diff --git a/frontend/Panel.js b/frontend/Panel.js index 8e45dd8994..232e616dcd 100644 --- a/frontend/Panel.js +++ b/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; diff --git a/frontend/Store.js b/frontend/Store.js index cb5f5a849e..6a724c55c9 100644 --- a/frontend/Store.js +++ b/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); diff --git a/shells/chrome/src/GlobalHook.js b/shells/chrome/src/GlobalHook.js index 6bea5b71d2..585ea061af 100644 --- a/shells/chrome/src/GlobalHook.js +++ b/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))' diff --git a/shells/chrome/src/main.js b/shells/chrome/src/main.js index b9cc81551d..3d080f03ce 100644 --- a/shells/chrome/src/main.js +++ b/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(); + } }); }); });