Merge pull request #116 from facebook/chrome-hide-highlight

[chrome] hide highlight when switching devtools tab

Author: jaredly

frontend/Panel.js

@@ -98,6 +98,10 @@ class Panel extends React.Component {
     this.props.getNewSelection(this._bridge);
   }
 
+  hideHighlight() {
+    this._store.hideHighlight();
+  }
+
   sendSelection(id: string) {
     if (!this._bridge || (!id && !this._store.selected)) {
       return;

frontend/Store.js

@@ -288,13 +288,21 @@ class Store extends EventEmitter {
       this.emit('hover');
       this._bridge.send('highlight', id);
     } else if (this.hovered === id) {
-      this.hovered = null;
-      this.emit(id);
-      this.emit('hover');
-      this._bridge.send('hideHighlight');
+      this.hideHighlight();
     }
   }
 
+  hideHighlight() {
+    this._bridge.send('hideHighlight');
+    if (!this.hovered) {
+      return;
+    }
+    var id = this.hovered;
+    this.hovered = null;
+    this.emit(id);
+    this.emit('hover');
+  }
+
   selectTop(id: ?ElementID, noHighlight?: boolean) {
     this.isBottomTagSelected = false;
     this.select(id, noHighlight);

shells/chrome/src/GlobalHook.js

@@ -20,7 +20,7 @@ var checkForOld = `
 if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
   console.error("REACT DEVTOOLS ERROR\\nYou need to disable the official version of React Devtools in order to use the beta.");
 }
-`
+`;
 
 var js = (
   ';(' + globalHook.toString() + '(window))'

shells/chrome/src/main.js

@@ -11,6 +11,9 @@
 'use strict';
 
 type Panel = { // eslint-disable-line no-unused-vars
+  onHidden: {
+    addListener: (cb: (window: Object) => void) => void,
+  },
   onShown: {
     addListener: (cb: (window: Object) => void) => void,
   }
@@ -35,10 +38,17 @@ chrome.devtools.inspectedWindow.eval(`!!(
   }
 
   chrome.devtools.panels.create('React', '', 'panel.html', function (panel) {
+    var reactPanel = null;
     panel.onShown.addListener(function (window) {
       // when the user switches to the panel, check for an elements tab
       // selection
       window.panel.getNewSelection();
+      reactPanel = window.panel;
+    });
+    panel.onHidden.addListener(function () {
+      if (reactPanel) {
+        reactPanel.hideHighlight();
+      }
     });
   });
 });