diff --git a/js/components/main.js b/js/components/main.js index 7198a939339..733001b5874 100644 --- a/js/components/main.js +++ b/js/components/main.js @@ -6,6 +6,7 @@ const React = require('react') const ImmutableComponent = require('./immutableComponent') const Immutable = require('immutable') const electron = require('electron') +const {StyleSheet, css} = require('aphrodite') const ipc = electron.ipcRenderer // const systemPreferences = electron.remote.systemPreferences @@ -880,6 +881,14 @@ class Main extends ImmutableComponent { return null } + getTotalBlocks (frames) { + const ads = frames.getIn(['adblock', 'blocked']) + const trackers = frames.getIn(['trackingProtection', 'blocked']) + const blocked = (ads ? ads.size : 0) + (trackers ? trackers.size : 0) + + return (blocked > 99) ? '99+' : blocked + } + render () { const comparatorByKeyAsc = (a, b) => a.get('key') > b.get('key') ? 1 : b.get('key') > a.get('key') ? -1 : 0 @@ -1067,6 +1076,11 @@ class Main extends ImmutableComponent { ? : null } + { + !this.braveShieldsDisabled + ?
{this.getTotalBlocks(activeFrame)}
+ : null + } @@ -1342,4 +1356,20 @@ class Main extends ImmutableComponent { } } +const styles = StyleSheet.create({ + lionBadge: { + right: '2px', + position: 'absolute', + top: '15px', + color: '#FFF', + borderRadius: '2px', + padding: '1px 2px', + pointerEvents: 'none', + font: '7pt "Arial Narrow"', + textAlign: 'center', + border: '.5px solid #FFF', + background: '#555555' + } +}) + module.exports = Main diff --git a/less/navigationBar.less b/less/navigationBar.less index 935028f3708..5e50f2266e2 100644 --- a/less/navigationBar.less +++ b/less/navigationBar.less @@ -510,6 +510,7 @@ display: flex; flex-direction: row; margin-left: 3px; + position: relative; .extensionButton { -webkit-app-region: no-drag;