Adds support for badges

- Centers wide badges
- Migrate to Aphrodite
- Use Hex Colors

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

@@ -7,11 +7,13 @@ 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')
+const {StyleSheet, css} = require('aphrodite')
 
-class BrowserActionButton extends ImmutableComponent {
+class BrowserAction extends ImmutableComponent {
   constructor () {
     super()
     this.onClick = this.onClick.bind(this)
@@ -34,19 +36,38 @@ 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={css(styles.browserActionButton)}>
+      <Button iconClass='extensionBrowserAction'
+        className={css(styles.extensionButton)}
+        inlineStyles={{
+          backgroundImage: extensionState.browserActionBackgroundImage(this.props.browserAction, this.props.tabId)
+        }}
+        dataButtonValue={this.props.extensionId}
+        onClick={this.onClick} />
+      { browserBadgeText
+        ? <BrowserActionBadge text={browserBadgeText} color={browserBadgeColor} />
+        : null
+      }
+    </div>
   }
 }
 
-module.exports = BrowserActionButton
+const styles = StyleSheet.create({
+  browserActionButton: {
+    position: 'relative'
+  },
+  extensionButton: {
+    '-webkit-app-region': 'no-drag',
+    backgroundSize: 'contain',
+    height: '17px',
+    margin: '4px 0 0 0',
+    opacity: '0.85',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center'
+  }
+})
+
+module.exports = BrowserAction

app/renderer/components/browserActionBadge.js

@@ -0,0 +1,63 @@
+/* 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')
+const {StyleSheet, css} = require('aphrodite')
+const commonStyles = require('./styles/global')
+
+class BrowserActionBadge extends ImmutableComponent {
+  constructor () {
+    super()
+    this.determineLayout = this.determineLayout.bind(this)
+  }
+
+  determineLayout () {
+    this.centered = this.refs.badge && this.refs.badge.offsetWidth > 16
+  }
+
+  componentDidMount () {
+    this.determineLayout()
+  }
+
+  componentDidUpdate () {
+    this.determineLayout()
+  }
+
+  render () {
+    return <div
+      ref='badge'
+      className={css(
+        styles.browserActionBadge,
+        this.centered && styles.centered
+      )}
+      style={{backgroundColor: this.props.color || commonStyles.color.braveMediumOrange}}
+      >{this.props.text}</div>
+  }
+}
+
+const styles = StyleSheet.create({
+  browserActionBadge: {
+    color: '#FFF',
+    borderRadius: '2px',
+    padding: '1px 2px',
+    pointerEvents: 'none',
+    font: '7pt "Arial Narrow"',
+    textAlign: 'center',
+    position: 'absolute',
+    top: '50%',
+    left: '40%',
+    border: '.5px solid #FFF',
+    minWidth: '8px'
+  },
+  centered: {
+    left: '50%',
+    transform: 'translateX(-50%)',
+    maxWidth: 'calc(100% - 5px)',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }
+})
+
+module.exports = BrowserActionBadge

js/components/main.js

@@ -27,7 +27,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')
@@ -736,7 +736,7 @@ class Main extends ImmutableComponent {
       if (node.classList &&
           (node.classList.contains('popupWindow') ||
             node.classList.contains('contextMenu') ||
-            node.classList.contains('extensionButton') ||
+            node.matches('[class*="extensionButton_"]') ||
             node.classList.contains('menubarItem') ||
             node.classList.contains('bookmarkHanger'))) {
         // Middle click (on context menu) needs to fire the click event.
@@ -838,7 +838,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

@@ -512,14 +512,6 @@
     margin-left: 3px;
     position: relative;
 
-    .extensionButton {
-      -webkit-app-region: no-drag;
-      background-size: contain;
-      height: 17px;
-      margin: 4px 4px 0 0;
-      opacity: 0.85;
-    }
-
     .braveMenu {
       width: @navbarBraveButtonWidth;
       margin-right: @navbarButtonSpacing;