Remove chrome focus outline for mouse users. (#3230)

4 files changed, 40 insertions, 1 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index f930a93c1..c6776eeee 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -257,6 +257,9 @@ var actions = {
   updateFeatureFlags,
   UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS',
 
+  setMouseUserState,
+  SET_MOUSE_USER_STATE: 'SET_MOUSE_USER_STATE',
+
   // Network
   setNetworkEndpoints,
   updateNetworkEndpointType,
@@ -1661,6 +1664,13 @@ function updateFeatureFlags (updatedFeatureFlags) {
   }
 }
 
+function setMouseUserState (isMouseUser) {
+  return {
+    type: actions.SET_MOUSE_USER_STATE,
+    value: isMouseUser,
+  }
+}
+
 // Call Background Then Update
 //
 // A function generator for a common pattern wherein:
diff --git a/ui/app/app.js b/ui/app/app.js
index 20dc65df3..cdb0c8c61 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -85,6 +85,7 @@ function mapStateToProps (state) {
     lostAccounts: state.metamask.lostAccounts,
     frequentRpcList: state.metamask.frequentRpcList || [],
     currentCurrency: state.metamask.currentCurrency,
+    isMouseUser: state.appState.isMouseUser,  
 
     // state needed to get account dropdown temporarily rendering from app bar
     identities,
@@ -101,6 +102,7 @@ function mapDispatchToProps (dispatch, ownProps) {
     hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
     setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
     toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+    setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
   }
 }
 
@@ -112,7 +114,13 @@ App.prototype.componentWillMount = function () {
 
 App.prototype.render = function () {
   var props = this.props
-  const { isLoading, loadingMessage, network } = props
+  const {
+    isLoading,
+    loadingMessage,
+    network,
+    isMouseUser,
+    setMouseUserState,
+  } = props
   const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
   const loadMessage = loadingMessage || isLoadingNetwork ?
     `Connecting to ${this.getNetworkName()}` : null
@@ -120,11 +128,19 @@ App.prototype.render = function () {
 
   return (
     h('.flex-column.full-height', {
+      className: classnames({ 'mouse-user-styles': isMouseUser }),
       style: {
         overflowX: 'hidden',
         position: 'relative',
         alignItems: 'center',
       },
+      tabIndex: '0',
+      onClick: () => setMouseUserState(true),
+      onKeyDown: (e) => {
+        if (e.keyCode === 9) {
+          setMouseUserState(false)
+        }
+      },
     }, [
 
       // global modal
diff --git a/ui/app/css/itcss/base/index.scss b/ui/app/css/itcss/base/index.scss
index baa6ea037..1475e8bb5 100644
--- a/ui/app/css/itcss/base/index.scss
+++ b/ui/app/css/itcss/base/index.scss
@@ -1 +1,7 @@
 // Base
+
+.mouse-user-styles {
+  button:focus {
+    outline: 0;
+  }
+}
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 6885d029a..02f024f7c 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -59,6 +59,7 @@ function reduceApp (state, action) {
     // Used to display error text
     warning: null,
     buyView: {},
+    isMouseUser: false,
   }, state.appState)
 
   switch (action.type) {
@@ -658,6 +659,12 @@ function reduceApp (state, action) {
           data: action.value.data,
         },
       })
+
+    case actions.SET_MOUSE_USER_STATE:
+      return extend(appState, {
+        isMouseUser: action.value,
+      })
+
     default:
       return appState
   }