Make notificationBar tab-specific

Auditors: @bradleyrichter, @jonathansampson
Close #6935

Author: cezaraugusto

app/renderer/components/styles/commonStyles.js

@@ -174,13 +174,20 @@ const styles = StyleSheet.create({
     width: '100%',
     cursor: 'default',
     userSelect: 'none',
-    marginTop: globalStyles.spacing.navbarMenubarMargin
+    // if there's more than one notification per site,
+    // ensure border is on the last only
+    ':last-child': {
+      borderBottom: `5px solid ${globalStyles.color.notificationBottomBorderColor}`
+    },
+    // last-child will always be orange, but others can be gray
+    ':not(:last-child)': {
+      borderBottom: `1px solid ${globalStyles.color.tabsToolbarBorderColor}`
+    }
   },
   notificationBar__notificationItem: {
-    backgroundColor: '#ffefc0',
+    backgroundColor: globalStyles.color.notificationItemColor,
     boxSizing: 'border-box',
     borderTop: `1px solid ${globalStyles.color.tabsToolbarBorderColor}`,
-    borderBottom: `1px solid ${globalStyles.color.tabsToolbarBorderColor}`,
     lineHeight: '24px',
     padding: '8px 20px'
   },

app/renderer/components/styles/global.js

@@ -75,6 +75,8 @@ const globalStyles = {
     statsBlue: '#0796fa',
     statsLightGray: '#999999',
     defaultIconBackground: '#F7F7F7',
+    notificationItemColor: '#f1e9e5',
+    notificationBottomBorderColor: '#ff5500',
     almostInvisible: 'rgba(255,255,255,0.01)',
     urlBarOutline: '#bbb',
     alphaWhite: 'rgba(255,255,255,0.8)'

app/renderer/components/tabs/tab.js

@@ -14,6 +14,7 @@ const NewSessionIcon = require('./content/newSessionIcon')
 const PrivateIcon = require('./content/privateIcon')
 const TabTitle = require('./content/tabTitle')
 const CloseTabIcon = require('./content/closeTabIcon')
+const {NotificationBarCaret} = require('../../../../js/components/notificationBar')
 
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
@@ -41,6 +42,7 @@ const throttle = require('../../../../js/lib/throttle')
 const {getTabBreakpoint, tabUpdateFrameRate} = require('../../lib/tabUtil')
 const {isWindows} = require('../../../common/lib/platformUtil')
 const {getCurrentWindowId} = require('../../currentWindow')
+const UrlUtil = require('../../../../js/lib/urlutil')
 
 class Tab extends ImmutableComponent {
   constructor () {
@@ -303,6 +305,13 @@ class Tab extends ImmutableComponent {
       style={this.props.tabWidth ? { flex: `0 0 ${this.props.tabWidth}px` } : {}}
       onMouseEnter={this.onMouseEnter}
       onMouseLeave={this.onMouseLeave}>
+      {
+        this.props.isActive &&
+        this.props.notificationBarActive
+          .includes(UrlUtil.getUrlOrigin(this.props.tab.get('location')))
+          ? <NotificationBarCaret />
+          : null
+      }
       <div className={css(
         styles.tab,
         // Windows specific style

app/renderer/components/tabs/tabs.js

@@ -160,6 +160,7 @@ class Tabs extends ImmutableComponent {
                 onTabClosedWithMouse={this.onTabClosedWithMouse}
                 tabWidth={this.props.fixTabWidth}
                 hasTabInFullScreen={this.props.hasTabInFullScreen}
+                notificationBarActive={this.props.notificationBarActive}
                 totalTabs={this.props.tabs.size}
                 partOfFullPageSet={this.props.partOfFullPageSet} />)
         }

app/renderer/components/tabs/tabsToolbar.js

@@ -68,6 +68,7 @@ class TabsToolbar extends ImmutableComponent {
         startingFrameIndex={startingFrameIndex}
         partOfFullPageSet={currentTabs.size === this.props.tabsPerTabPage}
         fixTabWidth={this.props.fixTabWidth}
+        notificationBarActive={this.props.notificationBarActive}
       />
       <div className='tabsToolbarButtons'>
         <span data-l10n-id='menuButton'

js/components/main.js

@@ -23,7 +23,7 @@ const TabPages = require('../../app/renderer/components/tabs/tabPages')
 const TabsToolbar = require('../../app/renderer/components/tabs/tabsToolbar')
 const FindBar = require('./findbar')
 const UpdateBar = require('./updateBar')
-const NotificationBar = require('./notificationBar')
+const {NotificationBar} = require('./notificationBar')
 const DownloadsBar = require('../../app/renderer/components/downloadsBar')
 const SiteInfo = require('./siteInfo')
 const BraveryPanel = require('./braveryPanel')
@@ -732,6 +732,10 @@ class Main extends ImmutableComponent {
 
     const appStateSites = this.props.appState.get('sites')
 
+    const notifications = this.props.appState.get('notifications')
+    const hasNotifications = notifications && notifications.size
+    const notificationBarOrigin = notifications.map(bar => bar.get('frameOrigin'))
+
     return <div id='window'
       className={cx({
         isFullScreen: activeFrame && activeFrame.get('isFullScreen'),
@@ -860,12 +864,6 @@ class Main extends ImmutableComponent {
         }
 
         <UpdateBar updates={this.props.appState.get('updates')} />
-        {
-          this.props.appState.get('notifications') && this.props.appState.get('notifications').size && activeFrame
-          ? <NotificationBar notifications={this.props.appState.get('notifications')}
-            activeFrame={activeFrame} />
-          : null
-        }
         {
           showBookmarksToolbar
           ? <BookmarksToolbar
@@ -909,12 +907,18 @@ class Main extends ImmutableComponent {
           key='tab-bar'
           activeFrameKey={(activeFrame && activeFrame.get('key')) || undefined}
           onMenu={this.onHamburgerMenu}
+          notificationBarActive={notificationBarOrigin}
           hasTabInFullScreen={
             sortedFrames
               .map((frame) => frame.get('isFullScreen'))
               .some(fullScreenMode => fullScreenMode === true)
           }
         />
+        {
+          hasNotifications && activeFrame
+          ? <NotificationBar notifications={notifications} activeFrame={activeFrame} />
+          : null
+        }
 
         {
           activeFrame && activeFrame.get('findbarShown') && !activeFrame.get('isFullScreen')

js/components/notificationBar.js

@@ -15,6 +15,7 @@ const Button = require('./button')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+const globalStyles = require('../../app/renderer/components/styles/global')
 
 class NotificationItem extends ImmutableComponent {
   clickHandler (buttonIndex, e) {
@@ -115,6 +116,14 @@ class NotificationBar extends ImmutableComponent {
   }
 }
 
+class NotificationBarCaret extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.caretWrapper)}>
+      <div className={css(styles.caret)} />
+    </div>
+  }
+}
+
 const styles = StyleSheet.create({
   flexJustifyBetween: {
     display: 'flex',
@@ -142,7 +151,32 @@ const styles = StyleSheet.create({
     textDecoration: 'underline',
     fontSize: '13px',
     margin: '5px'
+  },
+  caretWrapper: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: globalStyles.zindex.zindexTabs,
+    filter: 'drop-shadow(rgba(0,0,0,0.25) 0px 0px 1px)'
+  },
+  caret: {
+    position: 'relative',
+    margin: 'auto',
+    width: '16px',
+    ':before': {
+      content: '""',
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      borderBottom: `6px solid ${globalStyles.color.notificationItemColor}`,
+      borderLeft: '8px solid transparent',
+      borderRight: '8px solid transparent'
+    }
   }
 })
 
-module.exports = NotificationBar
+module.exports = {
+  NotificationBar,
+  NotificationBarCaret
+}

js/lib/urlutil.js

@@ -386,6 +386,15 @@ const UrlUtil = {
    */
   isHttpOrHttps: function (url) {
     return url.startsWith('https://') || url.startsWith('http://')
+  },
+
+  /**
+   * Gets the origin of a given URL
+   * @param {string} url The URL to get the origin from
+   * @return {string} url The origin of the given URL
+   */
+  getUrlOrigin: function (url) {
+    return new window.URL(url).origin
   }
 }