Menubar items now auto-popup context menu when moused over (if one was

initially clicked). This selection is not cleared yet but otherwise works
great

app/renderer/components/menubar.js

@@ -12,13 +12,21 @@ class MenubarItem extends ImmutableComponent {
   constructor () {
     super()
     this.onClick = this.onClick.bind(this)
+    this.onMouseOver = this.onMouseOver.bind(this)
   }
 
   onClick (e) {
     if (e && e.stopPropagation) {
       e.stopPropagation()
     }
-
+    // If clicking on an already selected item, deselect it
+    const selected = this.props.menubar.state.selectedLabel
+    if (selected && selected === this.props.label) {
+      this.props.menubar.setState({selectedLabel: null})
+      return
+    }
+    // Otherwise, mark item as selected and show its context menu
+    this.props.menubar.setState({selectedLabel: this.props.label})
     const rect = e.target.getBoundingClientRect()
     windowActions.setContextMenuDetail(Immutable.fromJS({
       left: rect.left,
@@ -35,10 +43,18 @@ class MenubarItem extends ImmutableComponent {
     }))
   }
 
+  onMouseOver (e) {
+    const selected = this.props.menubar.state.selectedLabel
+    if (selected && selected !== this.props.label) {
+      this.onClick(e)
+    }
+  }
+
   render () {
     return <span
-      className='menubarItem'
-      onClick={this.onClick}>
+      className={'menubarItem' + (this.props.selected ? ' selected' : '')}
+      onClick={this.onClick}
+      onMouseOver={this.onMouseOver}>
       { this.props.label }
     </span>
   }
@@ -50,11 +66,34 @@ class MenubarItem extends ImmutableComponent {
  * NOTE: the system menu is still created and used in order to keep the accelerators working.
  */
 class Menubar extends ImmutableComponent {
+  constructor () {
+    super()
+    this.state = {
+      selectedLabel: null
+    }
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    return this.state.selectedLabel !== nextState.selectedLabel
+  }
+
+  // TODO: this needs to clear its state every time a context menu is closed
+  // selected label would need to be in windowState for this to work
+
   render () {
     return <div className='menubar'>
     {
-      this.props.template.map((menubarItem) =>
-        <MenubarItem label={menubarItem.get('label')} submenu={menubarItem.get('submenu').toJS()} />)
+      this.props.template.map((menubarItem) => {
+        let props = {
+          label: menubarItem.get('label'),
+          submenu: menubarItem.get('submenu').toJS(),
+          menubar: this
+        }
+        if (props.label === this.state.selectedLabel) {
+          props.selected = true
+        }
+        return <MenubarItem {...props} />
+      })
     }
     </div>
   }

js/stores/appStore.js

@@ -674,6 +674,7 @@ const handleAppAction = (action) => {
       break
     case ExtensionConstants.EXTENSION_DISABLED:
       appState = extensionState.extensionDisabled(appState, action)
+      break
     case AppConstants.APP_SET_MENUBAR_TEMPLATE:
       appState = appState.setIn(['menu', 'template'], action.menubarTemplate)
       break

js/stores/windowStore.js

@@ -774,8 +774,11 @@ const doAction = (action) => {
       }
       break
     case WindowConstants.WINDOW_TOGGLE_MENUBAR_VISIBLE:
+      // Close existing context menus
+      windowState = windowState.delete('contextMenuDetail')
+      // Use value if provided; if not, toggle to opposite.
       if (getSetting(settings.AUTO_HIDE_MENU)) {
-        if (typeof action.isVisible === 'boolean'){
+        if (typeof action.isVisible === 'boolean') {
           windowState = windowState.setIn(['ui', 'menubar', 'isVisible'], action.isVisible)
         } else {
           const currentStatus = windowState.getIn(['ui', 'menubar', 'isVisible'])

less/navigationBar.less

@@ -405,6 +405,7 @@
   -webkit-user-select: none;
   -webkit-app-region: drag;
   height: 29px;
+  display: inline-block;
 
   .menubar {
     display: inline-block;
@@ -425,6 +426,11 @@
         border: 1px solid #cce8ff;
       }
     }
+
+    .selected {
+      background-color: #cce8ff !important;
+      border: 1px solid #99d1ff !important;
+    }
   }
 }