Adds support for badges (centers wide badges)

app/renderer/components/browserActionButton.js → app/renderer/components/browserAction.js

@@ -7,11 +7,12 @@ const ImmutableComponent = require('../../../js/components/immutableComponent')
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const Button = require('../../../js/components/button')
+const BrowserActionBadge = require('../../renderer/components/browserActionBadge')
 const cx = require('../../../js/lib/classSet')
 const extensionState = require('../../common/state/extensionState')
 const windowActions = require('../../../js/actions/windowActions')
 
-class BrowserActionButton extends ImmutableComponent {
+class BrowserAction extends ImmutableComponent {
   constructor () {
     super()
     this.onClick = this.onClick.bind(this)
@@ -34,19 +35,27 @@ class BrowserActionButton extends ImmutableComponent {
   }
 
   render () {
+    const browserBadgeText = this.props.browserAction.get('text')
+    const browserBadgeColor = this.props.browserAction.get('color')
     // TODO(bridiver) should have some visual notification of hover/press
-    return <Button iconClass='extensionBrowserAction'
-      className={cx({
-        extensionButton: true
-      })}
-      inlineStyles={{
-        backgroundImage: extensionState.browserActionBackgroundImage(this.props.browserAction, this.props.tabId),
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center'
-      }}
-      dataButtonValue={this.props.extensionId}
-      onClick={this.onClick} />
+    return <div className={cx({browserActionButton: true})}>
+      <Button iconClass='extensionBrowserAction'
+        className={cx({
+          extensionButton: true
+        })}
+        inlineStyles={{
+          backgroundImage: extensionState.browserActionBackgroundImage(this.props.browserAction, this.props.tabId),
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center'
+        }}
+        dataButtonValue={this.props.extensionId}
+        onClick={this.onClick} />
+      { browserBadgeText
+        ? <BrowserActionBadge text={browserBadgeText} color={browserBadgeColor} />
+        : null
+      }
+    </div>
   }
 }
 
-module.exports = BrowserActionButton
+module.exports = BrowserAction

app/renderer/components/browserActionBadge.js

@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+
+class BrowserActionBadge extends ImmutableComponent {
+  constructor () {
+    super()
+    this.determineLayout = this.determineLayout.bind(this)
+  }
+
+  determineLayout () {
+    const verb = this.refs.badge.offsetWidth > 20 ? 'add' : 'remove'
+    this.refs.badge.classList[verb]('center')
+  }
+
+  componentDidMount () {
+    this.determineLayout()
+  }
+
+  componentDidUpdate () {
+    this.determineLayout()
+  }
+
+  render () {
+    return <div
+      ref='badge'
+      className='browserActionBadge'
+      style={{backgroundColor: this.props.color}}
+      >{this.props.text}</div>
+  }
+}
+
+module.exports = BrowserActionBadge

js/components/main.js

@@ -26,7 +26,7 @@ const UpdateBar = require('./updateBar')
 const NotificationBar = require('./notificationBar')
 const DownloadsBar = require('../../app/renderer/components/downloadsBar')
 const Button = require('./button')
-const BrowserActionButton = require('../../app/renderer/components/browserActionButton')
+const BrowserAction = require('../../app/renderer/components/browserAction')
 const SiteInfo = require('./siteInfo')
 const BraveryPanel = require('./braveryPanel')
 const ClearBrowsingDataPanel = require('./clearBrowsingDataPanel')
@@ -831,7 +831,7 @@ class Main extends ImmutableComponent {
       .map((extension) => extensionState.getBrowserActionByTabId(this.props.appState, extension.get('id'), this.activeTabId))
       .filter((browserAction) => browserAction)
     let buttons = extensionBrowserActions.map((browserAction, id) =>
-      <BrowserActionButton
+      <BrowserAction
         browserAction={browserAction}
         extensionId={id}
         tabId={this.activeTabId}

less/navigationBar.less

@@ -511,11 +511,37 @@
     flex-direction: row;
     margin-left: 3px;
 
+    .browserActionButton {
+      position: relative;
+    }
+
+    .browserActionBadge {
+      color: white;
+      border-radius: 2px;
+      padding: 1px 2px;
+      pointer-events: none;
+      background: #F5601A;
+      font: 7pt 'Arial Narrow';
+      text-align: center;
+      position: absolute;
+      top: 50%; left: 40%;
+      border: .5px solid #FFF;
+
+        &.center {
+          left: 50%;
+          transform: translateX(-50%);
+          max-width: calc(100% - 5px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+    }
+
     .extensionButton {
       -webkit-app-region: no-drag;
       background-size: contain;
       height: 17px;
-      margin: 4px 4px 0 0;
+      margin: 4px 0 0 0;
       opacity: 0.85;
     }