From 73fdd4c752fa09044bd70921c49b088201274ba0 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Thu, 23 Mar 2017 20:41:42 +0100
Subject: [PATCH] Adds lion badge

Resolves #7859

Auditors: @bradleyrichter @jonathansampson @bsclifton

Test Plan:
- go to youtube
- play some videos
- check if licon badge has the same number as shield panel
---
 js/components/main.js                       | 32 +++++++++++++++++++++
 less/navigationBar.less                     |  1 +
 test/bravery-components/braveryPanelTest.js |  9 ++++++
 test/lib/brave.js                           |  5 +++-
 4 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/js/components/main.js b/js/components/main.js
index 7198a939339..569903e9f06 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 {
                   ? <span className='buttonSeparator' />
                   : null
                 }
+                {
+                  !this.braveShieldsDisabled
+                  ? <div className={css(styles.lionBadge)} data-test-id='lionBadge'>
+                    {this.getTotalBlocks(activeFrame)}
+                  </div>
+                  : null
+                }
               </div>
             </div>
           </div>
@@ -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 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;
diff --git a/test/bravery-components/braveryPanelTest.js b/test/bravery-components/braveryPanelTest.js
index 7b0f7412266..363d4b9151d 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 9beac362baf..581b5f69e8b 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)
     })