Custom filters are applied by default after extension reload
Brian Vaughn committed
May 8, 2019 at 14:22 UTC
4f1d347c046f3e7c76683469718614c9f74e5e70
4 files changed
+43
-8
shells/browser/shared/src/main.js
+20
@@ -10,6 +10,7 @@ import {
10
getBrowserName,
11
getBrowserTheme,
12
} from './utils';
13
+import { getSavedComponentFilters } from 'src/utils';
14
import DevTools from 'src/devtools/views/DevTools';
15
16
const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
@@ -17,6 +18,20 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
18
19
let panelCreated = false;
20
21
+// The renderer interface can't read saved component filters directly,
22
+// because they are stored in localStorage within the context of the extension.
23
+// Instead it relies on the extension to pass filters through.
24
+function initializeSavedComponentFilters() {
25
+ const componentFilters = getSavedComponentFilters();
26
+ chrome.devtools.inspectedWindow.eval(
27
+ `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
28
+ componentFilters
29
+ )};`
30
+ );
31
+}
32
+
33
+initializeSavedComponentFilters();
34
+
35
function createPanelIfReactLoaded() {
36
if (panelCreated) {
37
return;
@@ -273,6 +288,10 @@ function createPanelIfReactLoaded() {
288
289
// Shutdown bridge and re-initialize DevTools panel when a new page is loaded.
290
chrome.devtools.network.onNavigated.addListener(function onNavigated() {
291
+ // Re-initialize saved filters on navigation,
292
+ // since global values stored on window get reset in this case.
293
+ initializeSavedComponentFilters();
294
+
295
// `bridge.shutdown()` will remove all listeners we added, so we don't have to.
296
bridge.shutdown();
297
@@ -286,6 +305,7 @@ function createPanelIfReactLoaded() {
305
306
// Load (or reload) the DevTools extension when the user navigates to a new page.
307
function checkPageForReact() {
308
+ initializeSavedComponentFilters();
309
createPanelIfReactLoaded();
310
}
311
shells/dev/src/devtools.js
+7
-6
@@ -8,11 +8,17 @@ import { installHook } from 'src/hook';
8
import { initDevTools } from 'src/devtools';
9
import Store from 'src/devtools/store';
10
import DevTools from 'src/devtools/views/DevTools';
11
+import { getSavedComponentFilters } from 'src/utils';
12
13
const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
14
15
const { contentDocument, contentWindow } = iframe;
16
17
+// The renderer interface can't read saved component filters directly,
18
+// because they are stored in localStorage within the context of the extension.
19
+// Instead it relies on the extension to pass filters through.
20
+contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getSavedComponentFilters();
21
+
22
installHook(contentWindow);
23
24
const container = ((document.getElementById('devtools'): any): HTMLElement);
@@ -78,12 +84,7 @@ inject('dist/app.js', () => {
84
85
// Initialize the backend only once the DevTools frontend Store has been initialized.
86
// Otherwise the Store may miss important initial tree op codes.
81
- inject('dist/backend.js', () => {
82
- if (__DEV__) {
83
- // Clear noisy webpack "WDS: ..." output.
84
- console.clear();
85
- }
86
- });
87
+ inject('dist/backend.js');
88
});
89
},
90
src/__tests__/setupTests.js
+4
@@ -11,6 +11,7 @@ env.beforeEach(() => {
11
const Bridge = require('src/bridge').default;
12
const Store = require('src/devtools/store').default;
13
const { installHook } = require('src/hook');
14
+ const { getDefaultComponentFilters } = require('src/utils');
15
16
// Fake timers let us flush Bridge operations between setup and assertions.
17
jest.useFakeTimers();
@@ -25,6 +26,9 @@ env.beforeEach(() => {
26
originalConsoleError.apply(console, args);
27
};
28
29
+ // Avoid "Invalid component filters" warning.
30
+ global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();
31
+
32
installHook(global);
33
34
const bridgeListeners = [];
src/backend/renderer.js
+12
-2
@@ -21,7 +21,7 @@ import {
21
import { PROFILER_EXPORT_VERSION } from 'src/constants';
22
import {
23
getDisplayName,
24
- getSavedComponentFilters,
24
+ getDefaultComponentFilters,
25
getUID,
26
utfEncodeString,
27
} from 'src/utils';
@@ -305,7 +305,17 @@ export function attach(
305
});
306
}
307
308
- applyComponentFilters(getSavedComponentFilters());
308
+ // The renderer interface can't read saved component filters directly,
309
+ // because they are stored in localStorage within the context of the extension.
310
+ // Instead it relies on the extension to pass filters through.
311
+ if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {
312
+ applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
313
+ } else {
314
+ console.warn('⚛️ DevTools: Invalid component filters');
315
+
316
+ // Fallback to assuming the default filters in this case.
317
+ applyComponentFilters(getDefaultComponentFilters());
318
+ }
319
320
// If necessary, we can revisit optimizing this operation.
321
// For example, we could add a new recursive unmount tree operation.