View DOM button opens Elements tab
Dan committed
Apr 13, 2019 at 18:55 UTC
ce335b89753a6858f076ac0a606c58f065f0634c
4 files changed
+28
-1
shells/browser/shared/src/main.js
+19
@@ -84,6 +84,9 @@ function createPanelIfReactLoaded() {
84
response => bridge.send('screenshotCaptured', response)
85
);
86
});
87
+ bridge.addListener('syncSelectionToNativeElementsPanel', () => {
88
+ setBrowserSelectionFromReact();
89
+ });
90
91
// This flag lets us tip the Store off early that we expect to be profiling.
92
// This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
@@ -162,6 +165,22 @@ function createPanelIfReactLoaded() {
165
container._hasInitialHTMLBeenCleared = true;
166
}
167
168
+ function setBrowserSelectionFromReact() {
169
+ // This is currently only called on demand when you press "view DOM".
170
+ // In the future, if Chrome adds an inspect() that doesn't switch tabs,
171
+ // we could make this happen automatically when you select another component.
172
+ chrome.devtools.inspectedWindow.eval(
173
+ '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
174
+ '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
175
+ 'false',
176
+ (didSelectionChange, error) => {
177
+ if (error) {
178
+ console.error(error);
179
+ }
180
+ }
181
+ );
182
+ }
183
+
184
function setReactSelectionFromBrowser() {
185
// When the user chooses a different node in the browser Elements tab,
186
// copy it over to the hook object so that we can sync the selection.
src/backend/agent.js
+6
@@ -235,12 +235,14 @@ export default class Agent extends EventEmitter {
235
displayName,
236
hideAfterTimeout,
237
id,
238
+ openNativeElementsPanel,
239
rendererID,
240
scrollIntoView,
241
}: {
242
displayName: string,
243
hideAfterTimeout: boolean,
244
id: number,
245
+ openNativeElementsPanel: boolean,
246
rendererID: number,
247
scrollIntoView: boolean,
248
}) => {
@@ -261,6 +263,10 @@ export default class Agent extends EventEmitter {
263
node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
264
}
265
showOverlay(((node: any): HTMLElement), displayName, hideAfterTimeout);
266
+ if (openNativeElementsPanel) {
267
+ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
268
+ this._bridge.send('syncSelectionToNativeElementsPanel');
269
+ }
270
} else {
271
hideOverlay();
272
}
src/devtools/views/Components/SelectedElement.js
+2
-1
@@ -46,6 +46,7 @@ export default function SelectedElement(_: Props) {
46
displayName: element.displayName,
47
hideAfterTimeout: true,
48
id: selectedElementID,
49
+ openNativeElementsPanel: true,
50
rendererID,
51
scrollIntoView: true,
52
});
@@ -96,7 +97,7 @@ export default function SelectedElement(_: Props) {
97
<Button
98
className={styles.IconButton}
99
onClick={highlightElement}
99
- title="Highlight this element in the page"
100
+ title="Inspect the matching DOM element"
101
>
102
<ButtonIcon type="view-dom" />
103
</Button>
src/devtools/views/Components/Tree.js
+1
@@ -204,6 +204,7 @@ export default function Tree(props: Props) {
204
displayName: element.displayName,
205
hideAfterTimeout: false,
206
id,
207
+ openNativeElementsPanel: false,
208
rendererID,
209
scrollIntoView: false,
210
});