fix(toolbar): slash focuses search & hidden buttons don't act

Test Plan: edgehill --test

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://review.inboxapp.com/D1289

internal_packages/message-list/lib/message-toolbar-items.cjsx

@@ -1,5 +1,5 @@
 React = require 'react'
-{Actions, ThreadStore} = require 'inbox-exports'
+{Actions, ThreadStore, Utils} = require 'inbox-exports'
 {RetinaImg} = require 'ui-components'
 
 # Note: These always have a thread, but only sometimes get a
@@ -14,6 +14,7 @@ ReplyButton = React.createClass
     </button>
 
   _onReply: (e) ->
+    return unless Utils.nodeIsVisible(e.currentTarget)
     Actions.composeReply(threadId: ThreadStore.selectedId())
     e.stopPropagation()
 
@@ -26,6 +27,7 @@ ReplyAllButton = React.createClass
     </button>
 
   _onReplyAll: (e) ->
+    return unless Utils.nodeIsVisible(e.currentTarget)
     Actions.composeReplyAll(threadId: ThreadStore.selectedId())
     e.stopPropagation()
 
@@ -38,6 +40,7 @@ ForwardButton = React.createClass
     </button>
 
   _onForward: (e) ->
+    return unless Utils.nodeIsVisible(e.currentTarget)
     Actions.composeForward(threadId: ThreadStore.selectedId())
     e.stopPropagation()
 
@@ -50,6 +53,7 @@ ArchiveButton = React.createClass
     </button>
 
   _onArchive: (e) ->
+    return unless Utils.nodeIsVisible(e.currentTarget)
     # Calling archive() sends an Actions.queueTask with an archive task
     # TODO Turn into an Action
     ThreadStore.selectedThread().archive()

internal_packages/search-bar/lib/search-bar.cjsx

@@ -16,12 +16,16 @@ SearchBar = React.createClass
 
   componentDidMount: ->
     @unsubscribe = SearchSuggestionStore.listen @_onStoreChange
+    @body_unsubscriber = atom.commands.add 'body', {
+      'application:focus-search': @_onFocusSearch
+    }
 
   # It's important that every React class explicitly stops listening to
   # atom events before it unmounts. Thank you event-kit
   # This can be fixed via a Reflux mixin
   componentWillUnmount: ->
     @unsubscribe()
+    @body_unsubscriber.dispose()
 
   render: ->
     inputValue = @_queryToString(@state.query)
@@ -31,6 +35,7 @@ SearchBar = React.createClass
 
     headerComponents = [
       <input type="text"
+             ref="searchInput"
              key="input"
              className={inputClass}
              placeholder="Search all email"
@@ -65,6 +70,10 @@ SearchBar = React.createClass
         />
     </div>
 
+  _onFocusSearch: ->
+    return unless @isMounted()
+    @refs.searchInput.getDOMNode().focus()
+
   _containerClasses: ->
     React.addons.classSet
       'focused': @state.focused

internal_packages/tooltip/lib/tooltip.cjsx

@@ -1,5 +1,6 @@
 _ = require 'underscore-plus'
 React = require 'react/addons'
+{Utils} = require 'inbox-exports'
 
 ###
 The Tooltip component displays a consistent hovering tooltip for use when
@@ -47,23 +48,13 @@ Tooltip = React.createClass
   # listeners.
   onMouseOver: (e) ->
     target = @_elementWithTooltip(e.target)
-    if target and @_targetIsVisible(target) then @_onTooltipEnter(target)
+    if target and Utils.nodeIsVisible(target) then @_onTooltipEnter(target)
     else if @state.display then @_hideTooltip()
 
   onMouseOut: (e) ->
     if @_elementWithTooltip(e.fromElement) and not @_elementWithTooltip(e.toElement)
       @_onTooltipLeave()
 
-  _targetIsVisible: (target) ->
-    while target
-      style = window.getComputedStyle(target)
-      target = target.parentNode
-      continue unless style?
-      # NOTE: opacity must be soft ==
-      if style.opacity is 0 or style.opacity is "0" or style.visibility is "hidden" or style.display is "none"
-        return false
-    return true
-
   _elementWithTooltip: (target) ->
     while target
       break if target?.dataset?.tooltip?

keymaps/base.cson

@@ -16,6 +16,8 @@
   'delete'   : 'application:remove-item' # Mac mail
   'backspace': 'application:remove-item' # Outlook
 
+  '/'        : 'application:focus-search' # Gmail
+
   'r'     : 'application:reply' # Gmail
   'a'     : 'application:reply-all' # Gmail
   'f'     : 'application:forward' # Gmail

src/flux/models/utils.coffee

@@ -149,4 +149,19 @@ Utils =
     # Return remaining compacted email body
     lines.join('\n')
 
+  # Checks to see if a particular node is visible and any of its parents
+  # are visible.
+  #
+  # WARNING. This is a fairly expensive operation and should be used
+  # sparingly.
+  nodeIsVisible: (node) ->
+    while node
+      style = window.getComputedStyle(node)
+      node = node.parentNode
+      continue unless style?
+      # NOTE: opacity must be soft ==
+      if style.opacity is 0 or style.opacity is "0" or style.visibility is "hidden" or style.display is "none"
+        return false
+    return true
+
 module.exports = Utils