Refactored filter preferences a bit more to be stored in the Store
Brian Vaughn committed
Apr 28, 2019 at 15:33 UTC
27a182003913e80771cbe0d4f44a026bdc7a15f3
4 files changed
+66
-23
src/devtools/store.js
+24
-2
@@ -10,7 +10,11 @@ import {
10
TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
11
} from '../constants';
12
import { ElementTypeRoot } from '../types';
13
-import { utfDecodeString } from '../utils';
13
+import {
14
+ getSavedFilterPreferences,
15
+ saveFilterPreferences,
16
+ utfDecodeString,
17
+} from '../utils';
18
import { __DEBUG__ } from '../constants';
19
import ProfilingCache from './ProfilingCache';
20
import { printStore } from 'src/__tests__/storeSerializer';
@@ -20,7 +24,7 @@ import type {
24
ImportedProfilingData,
25
ProfilingSnapshotNode,
26
} from './views/Profiler/types';
23
-import type { ElementType, Bridge } from '../types';
27
+import type { Bridge, ElementType, FilterPreferences } from '../types';
28
29
const debug = (methodName, ...args) => {
30
if (__DEBUG__) {
@@ -65,6 +69,8 @@ export default class Store extends EventEmitter {
69
// Should new nodes be collapsed by default when added to the tree?
70
_collapseNodesByDefault: boolean = true;
71
72
+ _filterPreferences: FilterPreferences;
73
+
74
// At least one of the injected renderers contains (DEV only) owner metadata.
75
_hasOwnerMetadata: boolean = false;
76
@@ -137,6 +143,8 @@ export default class Store extends EventEmitter {
143
localStorage.getItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
144
'false';
145
146
+ this._filterPreferences = getSavedFilterPreferences();
147
+
148
if (config != null) {
149
const {
150
isProfiling,
@@ -231,6 +239,20 @@ export default class Store extends EventEmitter {
239
this.emit('collapseNodesByDefault');
240
}
241
242
+ get filterPreferences(): FilterPreferences {
243
+ return this._filterPreferences;
244
+ }
245
+ set filterPreferences(value: FilterPreferences): void {
246
+ this._filterPreferences = value;
247
+
248
+ saveFilterPreferences(value);
249
+
250
+ // TODO (filter) Dump all nodes, update renderer preferences, and re-initialize tree.
251
+ // TODO (filter) Invariant check that we aren't profiling.
252
+
253
+ this.emit('filterPreferences');
254
+ }
255
+
256
get hasOwnerMetadata(): boolean {
257
return this._hasOwnerMetadata;
258
}
src/devtools/views/Settings/FilterList.css
+1
-1
@@ -1,4 +1,4 @@
1
.Filter {
2
display: block;
3
- padding: 0.5rem 0;
3
+ padding: 0 0 0.5rem;
4
}
src/devtools/views/Settings/FilterList.js
+40
-19
@@ -1,37 +1,58 @@
1
// @flow
2
3
-import React, { Fragment, useCallback, useState } from 'react';
4
-import { getSavedFilterPreferences, saveFilterPreferences } from 'src/utils';
3
+import React, { Fragment, useCallback, useContext, useMemo } from 'react';
4
import { ElementTypeHostComponent } from 'src/types';
5
+import Store from 'src/devtools/store';
6
+import { StoreContext } from '../context';
7
+import { useSubscription } from '../hooks';
8
9
import styles from './FilterList.css';
10
11
+import type { FilterPreferences } from 'src/types';
12
+
13
export default function FilterList(_: {||}) {
10
- const [filterPreferences, setFilterPreferences] = useState(
11
- getSavedFilterPreferences
14
+ const store = useContext(StoreContext);
15
+
16
+ const filterPreferencesSubscription = useMemo(
17
+ () => ({
18
+ getCurrentValue: () => store.filterPreferences,
19
+ subscribe: (callback: Function) => {
20
+ store.addListener('filterPreferences', callback);
21
+ return () => store.removeListener('filterPreferences', callback);
22
+ },
23
+ }),
24
+ [store]
25
+ );
26
+ const filterPreferences = useSubscription<FilterPreferences, Store>(
27
+ filterPreferencesSubscription
28
+ );
29
+
30
+ const updateFilterPreferences = useCallback(
31
+ ({ currentTarget }) => {
32
+ const filterPreferences = store.filterPreferences;
33
+ if (currentTarget.checked) {
34
+ filterPreferences.hideElementsWithTypes.add(ElementTypeHostComponent);
35
+ } else {
36
+ filterPreferences.hideElementsWithTypes.delete(
37
+ ElementTypeHostComponent
38
+ );
39
+ }
40
+ store.filterPreferences = { ...filterPreferences };
41
+ },
42
+ [store]
43
);
13
- const updateFilterPreferences = useCallback(() => {
14
- const clonedFilterPreferences = { ...filterPreferences };
15
- setFilterPreferences(clonedFilterPreferences);
16
- saveFilterPreferences(clonedFilterPreferences);
17
- }, [filterPreferences]);
44
19
- const { hideElementsWithTypes } = filterPreferences;
45
+ // TODO (filter) Disable toggles if isProfiling
46
47
return (
48
<Fragment>
49
<label className={styles.Filter}>
50
<input
51
type="checkbox"
26
- checked={hideElementsWithTypes.has(ElementTypeHostComponent)}
27
- onChange={() => {
28
- if (hideElementsWithTypes.has(ElementTypeHostComponent)) {
29
- hideElementsWithTypes.delete(ElementTypeHostComponent);
30
- } else {
31
- hideElementsWithTypes.add(ElementTypeHostComponent);
32
- }
33
- updateFilterPreferences();
34
- }}
52
+ checked={filterPreferences.hideElementsWithTypes.has(
53
+ ElementTypeHostComponent
54
+ )}
55
+ onChange={updateFilterPreferences}
56
/>{' '}
57
Hide host components (e.g. <code><div></code>)
58
</label>
src/devtools/views/Settings/Settings.css
+1
-1
@@ -67,7 +67,7 @@
67
68
.CheckboxOption {
69
display: block;
70
- padding: 0.5rem 0;
70
+ padding: 0 0 0.5rem;
71
}
72
73
.ScreenshotThrottling {