Adds lion badge

Resolves brave#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

@@ -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

less/navigationBar.less

@@ -510,6 +510,7 @@
     display: flex;
     flex-direction: row;
     margin-left: 3px;
+    position: relative;
 
     .extensionButton {
       -webkit-app-region: no-drag;

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)

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)
     })