diff --git a/js/components/main.js b/js/components/main.js
index 7198a93933..569903e9f0 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,13 @@ class Main extends ImmutableComponent {
?
: null
}
+ {
+ !this.braveShieldsDisabled
+ ?
+ {this.getTotalBlocks(activeFrame)}
+
+ : null
+ }
@@ -1342,4 +1358,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 935028f370..5e50f2266e 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;
diff --git a/test/bravery-components/braveryPanelTest.js b/test/bravery-components/braveryPanelTest.js
index 7b0f741226..363d4b9151 100644
--- a/test/bravery-components/braveryPanelTest.js
+++ b/test/bravery-components/braveryPanelTest.js
@@ -29,6 +29,15 @@ describe('Bravery Panel', function () {
.windowByUrl(Brave.browserWindowUrl)
.waitForVisible(braveMenu)
})
+ it('lion badge', function * () {
+ const url = Brave.server.url('tracking.html')
+ yield this.app.client
+ .waitForDataFile('trackingProtection')
+ .tabByIndex(0)
+ .loadUrl(url)
+ .windowByUrl(Brave.browserWindowUrl)
+ .waitForTextValue('[data-test-id="lionBadge"]', '2')
+ })
})
describe('Stats', function () {
Brave.beforeEach(this)
diff --git a/test/lib/brave.js b/test/lib/brave.js
index 9beac362ba..581b5f69e8 100644
--- a/test/lib/brave.js
+++ b/test/lib/brave.js
@@ -316,7 +316,10 @@ var exports = {
return this
.waitForVisible(selector)
.waitUntil(function () {
- return this.getText(selector).then((value) => { return value === text })
+ return this.getText(selector).then((value) => {
+ logVerbose('waitForTextValue("' + selector + '", ' + text + ') => ' + value)
+ return value === text
+ })
}, 5000, null, 100)
})