Send the bridge sync event lazily
Dan Abramov committed
Apr 9, 2019 at 20:04 UTC
43bb821f601b345cbd51dd4f225b7237c251ca84
1 file changed
+16
-22
shells/browser/shared/src/main.js
+16
-22
@@ -166,35 +166,35 @@ function createPanelIfReactLoaded() {
166
// When the user chooses a different node in the browser Elements tab,
167
// copy it over to the hook object so that we can sync the selection.
168
chrome.devtools.inspectedWindow.eval(
169
- '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, undefined)',
170
- (_, error) => {
169
+ '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
170
+ '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
171
+ 'false',
172
+ (didSelectionChange, error) => {
173
if (error) {
174
console.error(error);
173
- } else {
174
- bridge.send('syncSelectionFromNativeElementsPanel');
175
+ } else if (didSelectionChange) {
176
+ // Remember to sync the selection next time we show Components tab.
177
+ needsToSyncElementSelection = true;
178
}
179
}
180
);
181
}
182
180
- // When the user selects another item in the native Elements tab,
181
- // select the corresponding React component.
182
- let isListeningToNativeSelectionChange = false;
183
- function ensureListeningToNativeSelectionChange() {
184
- if (isListeningToNativeSelectionChange) {
185
- return;
186
- }
187
- isListeningToNativeSelectionChange = true;
183
+ setReactSelectionFromBrowser();
184
+ chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
185
setReactSelectionFromBrowser();
189
- chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
190
- setReactSelectionFromBrowser();
191
- });
192
- }
186
+ });
187
188
let currentPanel = null;
189
+ let needsToSyncElementSelection = false;
190
191
chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
192
panel.onShown.addListener(panel => {
193
+ if (needsToSyncElementSelection) {
194
+ needsToSyncElementSelection = false;
195
+ bridge.send('syncSelectionFromNativeElementsPanel');
196
+ }
197
+
198
if (currentPanel === panel) {
199
return;
200
}
@@ -207,12 +207,6 @@ function createPanelIfReactLoaded() {
207
render('components');
208
panel.injectStyles(cloneStyleTags);
209
}
210
-
211
- // Don't start listening to native selection change
212
- // until *after* the panel is visible. Otherwise, we'll
213
- // set the selected element too early and won't scroll
214
- // to it the first time we open Components panel.
215
- ensureListeningToNativeSelectionChange();
210
});
211
panel.onHidden.addListener(() => {
212
// TODO: Stop highlighting and stuff.