\n+`;\n+\n+exports[`Store component filters should filter by path: 2: hide all components declared within this test filed 1`] = `[root]`;\n+\n+exports[`Store component filters should filter by path: 3: hide components in a made up fake path 1`] = `\n+[root]\n+ ▾ \n+

\n+`;\n+\n+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 1: mount 1`] = `\n+[root]\n+ ▾ \n+

\n+`;\n+\n+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2: add invalid filter 1`] = `\n+[root]\n+ ▾ \n+

\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 1: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾

\n+ ▾ \n+

\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 2: hide host components 1`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`Store component filters should support filtering by element type: 3: hide class components 1`] = `\n+[root]\n+ ▾

\n+ ▾ \n+

\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 4: hide class and function components 1`] = `\n+[root]\n+ ▾

\n+

\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 5: disable all filters 1`] = `\n+[root]\n+ ▾ \n+ ▾

\n+ ▾ \n+

\n+`;\ndiff --git a\/src\/__tests__\/storeComponentFilters-test.js b\/src\/__tests__\/storeComponentFilters-test.js\nnew file mode 100644\nindex 0000000000..8f408f49f7\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeComponentFilters-test.js\n@@ -0,0 +1,198 @@\n+\/\/ @flow\n+\n+describe('Store component filters', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestUtils;\n+ let Types;\n+ let store;\n+\n+ const createElementTypeFilter = (elementType, isEnabled = true) => ({\n+ type: Types.ComponentFilterElementType,\n+ isEnabled,\n+ value: elementType,\n+ });\n+\n+ const createDisplayNameFilter = (source, isEnabled = true) => {\n+ let isValid = true;\n+ try {\n+ new RegExp(source);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ return {\n+ type: Types.ComponentFilterDisplayName,\n+ isEnabled,\n+ isValid,\n+ value: source,\n+ };\n+ };\n+\n+ const createLocationFilter = (source, isEnabled = true) => {\n+ let isValid = true;\n+ try {\n+ new RegExp(source);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ return {\n+ type: Types.ComponentFilterLocation,\n+ isEnabled,\n+ isValid,\n+ value: source,\n+ };\n+ };\n+\n+ const act = (callback: Function) => {\n+ TestUtils.act(() => {\n+ callback();\n+ });\n+ jest.runAllTimers(); \/\/ Flush Bridge operations\n+ };\n+\n+ beforeEach(() => {\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.componentFilters = [];\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestUtils = require('react-dom\/test-utils');\n+ Types = require('src\/types');\n+ });\n+\n+ it('should throw if filters are updated while profiling', () => {\n+ act(() => store.startProfiling());\n+ expect(() => (store.componentFilters = [])).toThrow(\n+ 'Cannot modify filter preferences while profiling'\n+ );\n+ });\n+\n+ it('should support filtering by element type', () => {\n+ class Root extends React.Component<{| children: React$Node |}> {\n+ render() {\n+ return

{this.props.children}<\/div>;\n+ }\n+ }\n+ const Component = () =>

Hi<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/Root>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ createElementTypeFilter(Types.ElementTypeHostComponent),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('2: hide host components');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ createElementTypeFilter(Types.ElementTypeClass),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('3: hide class components');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ createElementTypeFilter(Types.ElementTypeClass),\n+ createElementTypeFilter(Types.ElementTypeFunction),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('4: hide class and function components');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ createElementTypeFilter(Types.ElementTypeClass, false),\n+ createElementTypeFilter(Types.ElementTypeFunction, false),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('5: disable all filters');\n+ });\n+\n+ it('should ignore invalid ElementTypeRoot filter', () => {\n+ const Root = () =>

Hi<\/div>;\n+\n+ act(() => ReactDOM.render(, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ createLocationFilter(__filename.replace(__dirname, '')),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot(\n+ '2: hide all components declared within this test filed'\n+ );\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ createLocationFilter('this:is:a:made:up:path'),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('3: hide components in a made up fake path');\n+ });\n+});\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex 5364d048c5..32982814df 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -16,7 +16,7 @@ import type {\n RendererID,\n RendererInterface,\n } from '.\/types';\n-import type { Bridge } from '..\/types';\n+import type { Bridge, ComponentFilter } from '..\/types';\n \n const debug = (methodName, ...args) => {\n if (__DEBUG__) {\n@@ -118,6 +118,7 @@ export default class Agent extends EventEmitter {\n this.syncSelectionFromNativeElementsPanel\n );\n bridge.addListener('shutdown', this.shutdown);\n+ bridge.addListener('updateComponentFilters', this.updateComponentFilters);\n bridge.addListener('viewElementSource', this.viewElementSource);\n \n if (this._isProfiling) {\n@@ -489,6 +490,15 @@ export default class Agent extends EventEmitter {\n this._bridge.send('profilingStatus', this._isProfiling);\n };\n \n+ updateComponentFilters = (componentFilters: Array) => {\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.updateComponentFilters(componentFilters);\n+ }\n+ };\n+\n viewElementSource = ({ id, rendererID }: InspectSelectParams) => {\n const renderer = this._rendererInterfaces[rendererID];\n if (renderer == null) {\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 3b029be297..6b79b12210 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -2,19 +2,28 @@\n \n import { gte } from 'semver';\n import {\n+ ComponentFilterDisplayName,\n+ ComponentFilterElementType,\n+ ComponentFilterLocation,\n ElementTypeClass,\n- ElementTypeFunction,\n ElementTypeContext,\n ElementTypeEventComponent,\n ElementTypeEventTarget,\n+ ElementTypeFunction,\n ElementTypeForwardRef,\n+ ElementTypeHostComponent,\n ElementTypeMemo,\n ElementTypeOtherOrUnknown,\n ElementTypeProfiler,\n ElementTypeRoot,\n ElementTypeSuspense,\n-} from 'src\/devtools\/types';\n-import { getDisplayName, utfEncodeString } from '..\/utils';\n+} from 'src\/types';\n+import {\n+ getDisplayName,\n+ getSavedComponentFilters,\n+ getUID,\n+ utfEncodeString,\n+} from 'src\/utils';\n import { cleanForBridge, copyWithSet, setInObject } from '.\/utils';\n import {\n __DEBUG__,\n@@ -24,7 +33,6 @@ import {\n TREE_OPERATION_REORDER_CHILDREN,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n } from '..\/constants';\n-import { getUID } from '..\/utils';\n import { inspectHooksOfFiber } from '.\/ReactDebugHooks';\n \n import type {\n@@ -32,7 +40,6 @@ import type {\n DevToolsHook,\n Fiber,\n FiberCommitsBackend,\n- FiberData,\n InteractionBackend,\n InteractionsBackend,\n InteractionWithCommitsBackend,\n@@ -43,6 +50,7 @@ import type {\n RendererInterface,\n } from '.\/types';\n import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n+import type { ComponentFilter, ElementType } from 'src\/types';\n \n function getInternalReactConstants(version) {\n const ReactSymbols = {\n@@ -239,18 +247,15 @@ export function attach(\n \n const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {\n if (__DEBUG__) {\n- const fiberData = getDataForFiber(fiber);\n- const fiberDisplayName = (fiberData && fiberData.displayName) || 'null';\n- const parentFiberData =\n- parentFiber == null ? null : getDataForFiber(parentFiber);\n- const parentFiberDisplayName =\n- (parentFiberData && parentFiberData.displayName) || 'null';\n+ const displayName = getDisplayNameForFiber(fiber) || 'null';\n+ const parentDisplayName =\n+ (parentFiber !== null && getDisplayNameForFiber(parentFiber)) || 'null';\n \/\/ NOTE: calling getFiberID or getPrimaryFiber is unsafe here\n \/\/ because it will put them in the map. For now, we'll omit them.\n \/\/ TODO: better debugging story for this.\n console.log(\n- `[renderer] %c${name} %c${fiberDisplayName} %c${\n- parentFiber ? parentFiberDisplayName : ''\n+ `[renderer] %c${name} %c${displayName} %c${\n+ parentFiber ? parentDisplayName : ''\n }`,\n 'color: red; font-weight: bold;',\n 'color: blue;',\n@@ -259,20 +264,84 @@ export function attach(\n }\n };\n \n- \/\/ Keep this function in sync with getDataForFiber()\n+ \/\/ Configurable Components tree filters.\n+ const hideElementsWithDisplayNames: Set = new Set();\n+ const hideElementsWithPaths: Set = new Set();\n+ const hideElementsWithTypes: Set = new Set();\n+\n+ function applyComponentFilters(componentFilters: Array) {\n+ hideElementsWithTypes.clear();\n+ hideElementsWithDisplayNames.clear();\n+ hideElementsWithPaths.clear();\n+\n+ componentFilters.forEach(componentFilter => {\n+ if (!componentFilter.isEnabled) {\n+ return;\n+ }\n+\n+ switch (componentFilter.type) {\n+ case ComponentFilterDisplayName:\n+ if (componentFilter.isValid && componentFilter.value !== '') {\n+ hideElementsWithDisplayNames.add(\n+ new RegExp(componentFilter.value, 'i')\n+ );\n+ }\n+ break;\n+ case ComponentFilterElementType:\n+ hideElementsWithTypes.add(componentFilter.value);\n+ break;\n+ case ComponentFilterLocation:\n+ if (componentFilter.isValid && componentFilter.value !== '') {\n+ hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));\n+ }\n+ break;\n+ default:\n+ console.warn(\n+ `Invalid component filter type \"${componentFilter.type}\"`\n+ );\n+ break;\n+ }\n+ });\n+ }\n+\n+ applyComponentFilters(getSavedComponentFilters());\n+\n+ \/\/ If necessary, we can revisit optimizing this operation.\n+ \/\/ For example, we could add a new recursive unmount tree operation.\n+ \/\/ The unmount operations are already significantly smaller than mount opreations though.\n+ \/\/ This is something to keep in mind for later.\n+ function updateComponentFilters(componentFilters: Array) {\n+ if (this._isProfiling) {\n+ \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n+ \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n+ throw Error('Cannot modify filter preferences while profiling');\n+ }\n+\n+ \/\/ Recursively unmount all roots.\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ currentRootID = getFiberID(getPrimaryFiber(root.current));\n+ unmountFiberChildrenRecursively(root.current);\n+ recordUnmount(root.current, false);\n+ currentRootID = -1;\n+ });\n+\n+ applyComponentFilters(componentFilters);\n+\n+ \/\/ Recursively re-mount all roots with new filter criteria applied.\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ currentRootID = getFiberID(getPrimaryFiber(root.current));\n+ setRootPseudoKey(currentRootID, root.current);\n+ mountFiberRecursively(root.current, null);\n+ flushPendingEvents(root);\n+ currentRootID = -1;\n+ });\n+ }\n+\n+ \/\/ NOTICE Keep in sync with get*ForFiber methods\n function shouldFilterFiber(fiber: Fiber): boolean {\n- const { tag } = fiber;\n+ const { _debugSource, tag, type } = fiber;\n \n switch (tag) {\n- case ClassComponent:\n- case FunctionComponent:\n- case IncompleteClassComponent:\n- case IndeterminateComponent:\n- case ForwardRef:\n- case HostRoot:\n- case MemoComponent:\n- case SimpleMemoComponent:\n- return false;\n case DehydratedSuspenseComponent:\n \/\/ TODO: ideally we would show dehydrated Suspense immediately.\n \/\/ However, it has some special behavior (like disconnecting\n@@ -282,12 +351,14 @@ export function attach(\n return true;\n case EventComponent:\n case HostPortal:\n- case HostComponent:\n case HostText:\n case Fragment:\n return true;\n+ case HostRoot:\n+ \/\/ It is never valid to filter the root element.\n+ return false;\n default:\n- const typeSymbol = getTypeSymbol(fiber.type);\n+ const typeSymbol = getTypeSymbol(type);\n \n switch (typeSymbol) {\n case CONCURRENT_MODE_NUMBER:\n@@ -296,20 +367,37 @@ export function attach(\n case STRICT_MODE_NUMBER:\n case STRICT_MODE_SYMBOL_STRING:\n return true;\n- case CONTEXT_PROVIDER_NUMBER:\n- case CONTEXT_PROVIDER_SYMBOL_STRING:\n- case CONTEXT_CONSUMER_NUMBER:\n- case CONTEXT_CONSUMER_SYMBOL_STRING:\n- case SUSPENSE_NUMBER:\n- case SUSPENSE_SYMBOL_STRING:\n- case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:\n- case PROFILER_NUMBER:\n- case PROFILER_SYMBOL_STRING:\n- return false;\n default:\n- return false;\n+ break;\n+ }\n+ }\n+\n+ const elementType = getElementTypeForFiber(fiber);\n+ if (hideElementsWithTypes.has(elementType)) {\n+ return true;\n+ }\n+\n+ if (hideElementsWithDisplayNames.size > 0) {\n+ const displayName = getDisplayNameForFiber(fiber);\n+ if (displayName != null) {\n+ for (let displayNameRegExp of hideElementsWithDisplayNames) {\n+ if (displayNameRegExp.test(displayName)) {\n+ return true;\n+ }\n+ }\n+ }\n+ }\n+\n+ if (_debugSource != null && hideElementsWithPaths.size > 0) {\n+ const { fileName } = _debugSource;\n+ for (let pathRegExp of hideElementsWithPaths) {\n+ if (pathRegExp.test(fileName)) {\n+ return true;\n }\n+ }\n }\n+\n+ return false;\n }\n \n function getTypeSymbol(type: any): Symbol | number {\n@@ -321,10 +409,9 @@ export function attach(\n : symbolOrNumber;\n }\n \n- \/\/ TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.\n- \/\/ TODO: Keep in sync with getElementType()\n- function getDataForFiber(fiber: Fiber): FiberData {\n- const { elementType, type, key, tag } = fiber;\n+ \/\/ NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods\n+ function getDisplayNameForFiber(fiber: Fiber): string | null {\n+ const { elementType, type, tag } = fiber;\n \n \/\/ This is to support lazy components with a Promise as the type.\n \/\/ see https:\/\/github.com\/facebook\/react\/pull\/13397\n@@ -335,91 +422,47 @@ export function attach(\n }\n }\n \n- let fiberData: FiberData = ((null: any): FiberData);\n- let displayName: string = ((null: any): string);\n let resolvedContext: any = null;\n \n switch (tag) {\n case ClassComponent:\n case IncompleteClassComponent:\n- fiberData = {\n- displayName: getDisplayName(resolvedType),\n- key,\n- type: ElementTypeClass,\n- };\n- break;\n+ return getDisplayName(resolvedType);\n case FunctionComponent:\n case IndeterminateComponent:\n- fiberData = {\n- displayName: getDisplayName(resolvedType),\n- key,\n- type: ElementTypeFunction,\n- };\n- break;\n+ return getDisplayName(resolvedType);\n case EventComponent:\n- fiberData = {\n- displayName: null,\n- key,\n- type: ElementTypeEventComponent,\n- };\n- break;\n+ return null;\n case EventTarget:\n switch (getTypeSymbol(elementType.type)) {\n case EVENT_TARGET_TOUCH_HIT_NUMBER:\n case EVENT_TARGET_TOUCH_HIT_STRING:\n- displayName = 'TouchHitTarget';\n- break;\n+ return 'TouchHitTarget';\n default:\n- displayName = 'EventTarget';\n- break;\n+ return 'EventTarget';\n }\n- fiberData = {\n- displayName,\n- key,\n- type: ElementTypeEventTarget,\n- };\n- break;\n case ForwardRef:\n const functionName = getDisplayName(resolvedType.render, '');\n- displayName =\n+ return (\n resolvedType.displayName ||\n- (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef');\n-\n- fiberData = {\n- displayName,\n- key,\n- type: ElementTypeForwardRef,\n- };\n- break;\n+ (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef')\n+ );\n case HostRoot:\n- return {\n- displayName: null,\n- key: null,\n- type: ElementTypeRoot,\n- };\n- case HostPortal:\n+ return null;\n case HostComponent:\n+ return type;\n+ case HostPortal:\n case HostText:\n case Fragment:\n- return {\n- displayName: null,\n- key,\n- type: ElementTypeOtherOrUnknown,\n- };\n+ return null;\n case MemoComponent:\n case SimpleMemoComponent:\n if (elementType.displayName) {\n- displayName = elementType.displayName;\n+ return elementType.displayName;\n } else {\n- displayName = type.displayName || type.name;\n- displayName = displayName ? `Memo(${displayName})` : 'Memo';\n+ const displayName = type.displayName || type.name;\n+ return displayName ? `Memo(${displayName})` : 'Memo';\n }\n- fiberData = {\n- displayName,\n- key,\n- type: ElementTypeMemo,\n- };\n- break;\n default:\n const typeSymbol = getTypeSymbol(type);\n \n@@ -427,83 +470,98 @@ export function attach(\n case CONCURRENT_MODE_NUMBER:\n case CONCURRENT_MODE_SYMBOL_STRING:\n case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:\n- return {\n- displayName: null,\n- key: null,\n- type: ElementTypeOtherOrUnknown,\n- };\n+ return null;\n case CONTEXT_PROVIDER_NUMBER:\n case CONTEXT_PROVIDER_SYMBOL_STRING:\n \/\/ 16.3.0 exposed the context object as \"context\"\n \/\/ PR #12501 changed it to \"_context\" for 16.3.1+\n- \/\/ NOTE Keep in sync with inspectElement()\n+ \/\/ NOTE Keep in sync with inspectElementRaw()\n resolvedContext = fiber.type._context || fiber.type.context;\n- displayName = `${resolvedContext.displayName ||\n- 'Context'}.Provider`;\n-\n- fiberData = {\n- displayName,\n- key,\n- type: ElementTypeContext,\n- };\n- break;\n+ return `${resolvedContext.displayName || 'Context'}.Provider`;\n case CONTEXT_CONSUMER_NUMBER:\n case CONTEXT_CONSUMER_SYMBOL_STRING:\n \/\/ 16.3-16.5 read from \"type\" because the Consumer is the actual context object.\n \/\/ 16.6+ should read from \"type._context\" because Consumer can be different (in DEV).\n- \/\/ NOTE Keep in sync with inspectElement()\n+ \/\/ NOTE Keep in sync with inspectElementRaw()\n resolvedContext = fiber.type._context || fiber.type;\n \n \/\/ NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'\n \/\/ If you change the name, figure out a more resilient way to detect it.\n- displayName = `${resolvedContext.displayName ||\n- 'Context'}.Consumer`;\n-\n- fiberData = {\n- displayName,\n- key,\n- type: ElementTypeContext,\n- };\n- break;\n+ return `${resolvedContext.displayName || 'Context'}.Consumer`;\n case STRICT_MODE_NUMBER:\n case STRICT_MODE_SYMBOL_STRING:\n- fiberData = {\n- displayName: null,\n- key,\n- type: ElementTypeOtherOrUnknown,\n- };\n- break;\n+ return null;\n case SUSPENSE_NUMBER:\n case SUSPENSE_SYMBOL_STRING:\n case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:\n- fiberData = {\n- displayName: 'Suspense',\n- key,\n- type: ElementTypeSuspense,\n- };\n- break;\n+ return 'Suspense';\n case PROFILER_NUMBER:\n case PROFILER_SYMBOL_STRING:\n- fiberData = {\n- displayName: `Profiler(${fiber.memoizedProps.id})`,\n- key,\n- type: ElementTypeProfiler,\n- };\n- break;\n+ return `Profiler(${fiber.memoizedProps.id})`;\n default:\n \/\/ Unknown element type.\n \/\/ This may mean a new element type that has not yet been added to DevTools.\n- fiberData = {\n- displayName: null,\n- key,\n- type: ElementTypeOtherOrUnknown,\n- };\n- break;\n+ return null;\n }\n- break;\n }\n+ }\n+\n+ \/\/ NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods\n+ function getElementTypeForFiber(fiber: Fiber): ElementType {\n+ const { type, tag } = fiber;\n \n- return fiberData;\n+ switch (tag) {\n+ case ClassComponent:\n+ case IncompleteClassComponent:\n+ return ElementTypeClass;\n+ case FunctionComponent:\n+ case IndeterminateComponent:\n+ return ElementTypeFunction;\n+ case EventComponent:\n+ return ElementTypeEventComponent;\n+ case EventTarget:\n+ return ElementTypeEventTarget;\n+ case ForwardRef:\n+ return ElementTypeForwardRef;\n+ case HostRoot:\n+ return ElementTypeRoot;\n+ case HostComponent:\n+ return ElementTypeHostComponent;\n+ case HostPortal:\n+ case HostText:\n+ case Fragment:\n+ return ElementTypeOtherOrUnknown;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ return ElementTypeMemo;\n+ default:\n+ const typeSymbol = getTypeSymbol(type);\n+\n+ switch (typeSymbol) {\n+ case CONCURRENT_MODE_NUMBER:\n+ case CONCURRENT_MODE_SYMBOL_STRING:\n+ case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:\n+ return ElementTypeOtherOrUnknown;\n+ case CONTEXT_PROVIDER_NUMBER:\n+ case CONTEXT_PROVIDER_SYMBOL_STRING:\n+ return ElementTypeContext;\n+ case CONTEXT_CONSUMER_NUMBER:\n+ case CONTEXT_CONSUMER_SYMBOL_STRING:\n+ return ElementTypeContext;\n+ case STRICT_MODE_NUMBER:\n+ case STRICT_MODE_SYMBOL_STRING:\n+ return ElementTypeOtherOrUnknown;\n+ case SUSPENSE_NUMBER:\n+ case SUSPENSE_SYMBOL_STRING:\n+ case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:\n+ return ElementTypeSuspense;\n+ case PROFILER_NUMBER:\n+ case PROFILER_SYMBOL_STRING:\n+ return ElementTypeProfiler;\n+ default:\n+ return ElementTypeOtherOrUnknown;\n+ }\n+ }\n }\n \n \/\/ This is a slightly annoying indirection.\n@@ -727,7 +785,9 @@ export function attach(\n pushOperation(isProfilingSupported ? 1 : 0);\n pushOperation(hasOwnerMetadata ? 1 : 0);\n } else {\n- const { displayName, key, type } = getDataForFiber(fiber);\n+ const { key } = fiber;\n+ const displayName = getDisplayNameForFiber(fiber);\n+ const elementType = getElementTypeForFiber(fiber);\n const { _debugOwner } = fiber;\n \n const ownerID =\n@@ -738,7 +798,7 @@ export function attach(\n let keyStringID = getStringID(key);\n pushOperation(TREE_OPERATION_ADD);\n pushOperation(id);\n- pushOperation(type);\n+ pushOperation(elementType);\n pushOperation(parentID);\n pushOperation(ownerID);\n pushOperation(displayNameStringID);\n@@ -1587,7 +1647,7 @@ export function attach(\n ) {\n \/\/ 16.3-16.5 read from \"type\" because the Consumer is the actual context object.\n \/\/ 16.6+ should read from \"type._context\" because Consumer can be different (in DEV).\n- \/\/ NOTE Keep in sync with getDataForFiber()\n+ \/\/ NOTE Keep in sync with getDisplayNameForFiber()\n const consumerResolvedContext = type._context || type;\n \n \/\/ Global context value.\n@@ -1604,7 +1664,7 @@ export function attach(\n ) {\n \/\/ 16.3.0 exposed the context object as \"context\"\n \/\/ PR #12501 changed it to \"_context\" for 16.3.1+\n- \/\/ NOTE Keep in sync with getDataForFiber()\n+ \/\/ NOTE Keep in sync with getDisplayNameForFiber()\n const providerResolvedContext =\n currentType._context || currentType.context;\n if (providerResolvedContext === consumerResolvedContext) {\n@@ -1629,7 +1689,7 @@ export function attach(\n let owner = _debugOwner;\n while (owner !== null) {\n owners.push({\n- displayName: getDataForFiber(owner).displayName || 'Unknown',\n+ displayName: getDisplayNameForFiber(owner) || 'Unknown',\n id: getFiberID(getPrimaryFiber(owner)),\n });\n owner = owner._debugOwner;\n@@ -1659,7 +1719,7 @@ export function attach(\n \/\/ Can view component source location.\n canViewSource,\n \n- displayName: getDataForFiber(fiber).displayName,\n+ displayName: getDisplayNameForFiber(fiber),\n \n \/\/ Inspectable properties.\n \/\/ TODO Review sanitization approach for the below inspectable values.\n@@ -2123,7 +2183,7 @@ export function attach(\n if (child === null) {\n break;\n }\n- const displayName = getDataForFiber(child).displayName;\n+ const displayName = getDisplayNameForFiber(child);\n if (displayName !== null) {\n \/\/ Prefer display names that we get from user-defined components.\n \/\/ We want to avoid using e.g. 'Suspense' unless we find nothing else.\n@@ -2166,7 +2226,8 @@ export function attach(\n }\n \n function getPathFrame(fiber: Fiber): PathFrame {\n- let { displayName, key } = getDataForFiber(fiber);\n+ const { key } = fiber;\n+ let displayName = getDisplayNameForFiber(fiber);\n const index = fiber.index;\n switch (fiber.tag) {\n case HostRoot:\n@@ -2260,5 +2321,6 @@ export function attach(\n setTrackedPath,\n startProfiling,\n stopProfiling,\n+ updateComponentFilters,\n };\n }\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex d1946d164a..1675416f96 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -1,6 +1,6 @@\n \/\/ @flow\n \n-import type { ElementType } from 'src\/devtools\/types';\n+import type { ComponentFilter, ElementType } from 'src\/types';\n import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n \n type BundleType =\n@@ -139,6 +139,7 @@ export type RendererInterface = {\n setTrackedPath: (path: Array | null) => void,\n startProfiling: () => void,\n stopProfiling: () => void,\n+ updateComponentFilters: (somponentFilters: Array) => void,\n };\n \n export type Handler = (data: any) => void;\ndiff --git a\/src\/constants.js b\/src\/constants.js\nindex 588c8d4219..fcbf9cb65e 100644\n--- a\/src\/constants.js\n+++ b\/src\/constants.js\n@@ -5,6 +5,9 @@ export const TREE_OPERATION_REMOVE = 2;\n export const TREE_OPERATION_REORDER_CHILDREN = 3;\n export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;\n \n+export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =\n+ 'React::DevTools::componentFilters';\n+\n export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =\n 'React::DevTools::reloadAndProfile';\n \ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex ecdf1683df..6da87d3032 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -9,19 +9,22 @@ import {\n TREE_OPERATION_REORDER_CHILDREN,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n } from '..\/constants';\n-import { ElementTypeRoot } from '.\/types';\n-import { utfDecodeString } from '..\/utils';\n+import { ElementTypeRoot } from '..\/types';\n+import {\n+ getSavedComponentFilters,\n+ saveComponentFilters,\n+ utfDecodeString,\n+} from '..\/utils';\n import { __DEBUG__ } from '..\/constants';\n import ProfilingCache from '.\/ProfilingCache';\n import { printStore } from 'src\/__tests__\/storeSerializer';\n \n-import type { ElementType } from '.\/types';\n import type { Element } from '.\/views\/Components\/types';\n import type {\n ImportedProfilingData,\n ProfilingSnapshotNode,\n } from '.\/views\/Profiler\/types';\n-import type { Bridge } from '..\/types';\n+import type { Bridge, ComponentFilter, ElementType } from '..\/types';\n \n const debug = (methodName, ...args) => {\n if (__DEBUG__) {\n@@ -66,6 +69,8 @@ export default class Store extends EventEmitter {\n \/\/ Should new nodes be collapsed by default when added to the tree?\n _collapseNodesByDefault: boolean = true;\n \n+ _componentFilters: Array;\n+\n \/\/ At least one of the injected renderers contains (DEV only) owner metadata.\n _hasOwnerMetadata: boolean = false;\n \n@@ -138,6 +143,8 @@ export default class Store extends EventEmitter {\n localStorage.getItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==\n 'false';\n \n+ this._componentFilters = getSavedComponentFilters();\n+\n if (config != null) {\n const {\n isProfiling,\n@@ -232,6 +239,28 @@ export default class Store extends EventEmitter {\n this.emit('collapseNodesByDefault');\n }\n \n+ get componentFilters(): Array {\n+ return this._componentFilters;\n+ }\n+ set componentFilters(value: Array): void {\n+ if (this._isProfiling) {\n+ \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n+ \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n+ throw Error('Cannot modify filter preferences while profiling');\n+ }\n+\n+ this._componentFilters = value;\n+\n+ \/\/ Update persisted filter preferences stored in localStorage.\n+ saveComponentFilters(value);\n+\n+ \/\/ Notify the renderer that filter prefernces have changed.\n+ \/\/ This is an expensive opreation; it unmounts and remounts the entire tree.\n+ this._bridge.send('updateComponentFilters', value);\n+\n+ this.emit('componentFilters');\n+ }\n+\n get hasOwnerMetadata(): boolean {\n return this._hasOwnerMetadata;\n }\ndiff --git a\/src\/devtools\/types.js b\/src\/devtools\/types.js\ndeleted file mode 100644\nindex 40425b7275..0000000000\n--- a\/src\/devtools\/types.js\n+++ \/dev\/null\n@@ -1,18 +0,0 @@\n-\/\/ @flow\n-\n-export const ElementTypeClass = 1;\n-export const ElementTypeEventComponent = 2;\n-export const ElementTypeEventTarget = 3;\n-export const ElementTypeFunction = 4;\n-export const ElementTypeContext = 5;\n-export const ElementTypeForwardRef = 6;\n-export const ElementTypeMemo = 7;\n-export const ElementTypeOtherOrUnknown = 8;\n-export const ElementTypeProfiler = 9;\n-export const ElementTypeRoot = 10;\n-export const ElementTypeSuspense = 11;\n-\n-\/\/ Different types of elements displayed in the Elements tree.\n-\/\/ These types may be used to visually distinguish types,\n-\/\/ or to enable\/disable certain functionality.\n-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;\ndiff --git a\/src\/devtools\/views\/Button.js b\/src\/devtools\/views\/Button.js\nindex 78a9c8201f..bb55bca22f 100644\n--- a\/src\/devtools\/views\/Button.js\n+++ b\/src\/devtools\/views\/Button.js\n@@ -9,13 +9,13 @@ import tooltipStyles from '.\/Tooltip.css';\n type Props = {\n children: React$Node,\n className?: string,\n- title: string,\n+ title?: string,\n };\n \n export default function Button({\n children,\n className = '',\n- title,\n+ title = '',\n ...rest\n }: Props) {\n let button = (\ndiff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nindex a42e02bdbc..6e67143f89 100644\n--- a\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -4,10 +4,13 @@ import React from 'react';\n import styles from '.\/ButtonIcon.css';\n \n export type IconType =\n+ | 'add'\n | 'cancel'\n+ | 'clear'\n | 'close'\n | 'collapsed'\n | 'copy'\n+ | 'delete'\n | 'down'\n | 'expanded'\n | 'export'\n@@ -19,22 +22,31 @@ export type IconType =\n | 'previous'\n | 'record'\n | 'reload'\n+ | 'save'\n | 'search'\n+ | 'settings'\n | 'undo'\n | 'up'\n | 'view-dom'\n | 'view-source';\n \n type Props = {|\n+ className?: string,\n type: IconType,\n |};\n \n-export default function ButtonIcon({ type }: Props) {\n+export default function ButtonIcon({ className = '', type }: Props) {\n let pathData = null;\n switch (type) {\n+ case 'add':\n+ pathData = PATH_ADD;\n+ break;\n case 'cancel':\n pathData = PATH_CANCEL;\n break;\n+ case 'clear':\n+ pathData = PATH_CLEAR;\n+ break;\n case 'close':\n pathData = PATH_CLOSE;\n break;\n@@ -44,6 +56,9 @@ export default function ButtonIcon({ type }: Props) {\n case 'copy':\n pathData = PATH_COPY;\n break;\n+ case 'delete':\n+ pathData = PATH_DELETE;\n+ break;\n case 'down':\n pathData = PATH_DOWN;\n break;\n@@ -77,9 +92,15 @@ export default function ButtonIcon({ type }: Props) {\n case 'reload':\n pathData = PATH_RELOAD;\n break;\n+ case 'save':\n+ pathData = PATH_SAVE;\n+ break;\n case 'search':\n pathData = PATH_SEARCH;\n break;\n+ case 'settings':\n+ pathData = PATH_SETTINGS;\n+ break;\n case 'undo':\n pathData = PATH_UNDO;\n break;\n@@ -100,7 +121,7 @@ export default function ButtonIcon({ type }: Props) {\n return (\n ({\n+ getCurrentValue: () => store.isProfiling,\n+ subscribe: (callback: Function) => {\n+ store.addListener('isProfiling', callback);\n+ return () => store.removeListener('isProfiling', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+ const isProfiling = useSubscription(isProfilingSubscription);\n+ if (isProfiling && isModalShowing) {\n+ setIsModalShowing(false);\n+ }\n+\n+ return isModalShowing ? (\n+ \n+ ) : null;\n+}\n+\n+type Props = {|\n+ store: Store,\n+ setIsModalShowing: (value: boolean) => void,\n+|};\n+\n+function ComponentFiltersModal({ store, setIsModalShowing }: Props) {\n+ const dismissModal = useCallback(() => setIsModalShowing(false), [\n+ setIsModalShowing,\n+ ]);\n+\n+ const modalRef = useRef(null);\n+\n+ useModalDismissSignal(modalRef, dismissModal);\n+\n+ const {\n+ addFilter,\n+ changeFilterType,\n+ updateFilterValueElementType,\n+ updateFilterValueRegExp,\n+ componentFilters,\n+ removeFilter,\n+ saveFilters,\n+ toggleFilterIsEnabled,\n+ } = useComponentFilters();\n+\n+ const saveAndClose = useCallback(() => {\n+ saveFilters();\n+ dismissModal();\n+ }, [dismissModal, saveFilters]);\n+\n+ return (\n+

\n+

Hide components where...<\/div>\n+

\n+

\n+ No filters have been added.\n+ <\/td>\n+ <\/tr>\n+ )}\n+ {componentFilters.map((componentFilter, index) => (\n+
\n+ \n+ toggleFilterIsEnabled(componentFilter, isEnabled)\n+ }\n+ title={\n+ componentFilter.isValid === false\n+ ? 'Filter invalid'\n+ : componentFilter.isEnabled\n+ ? 'Filter enabled'\n+ : 'Filter disabled'\n+ }\n+ >\n+ \n+ <\/Toggle>\n+ <\/td>\n+	\n+ \n+ changeFilterType(\n+ componentFilter,\n+ ((parseInt(\n+ currentTarget.value,\n+ 10\n+ ): any): ComponentFilterType)\n+ )\n+ }\n+ >\n+	\n+ {componentFilter.type === ComponentFilterElementType\n+ ? 'equals'\n+ : 'matches'}\n+ <\/td>\n+	\n+ {componentFilter.type === ComponentFilterElementType ? (\n+ \n+ updateFilterValueElementType(\n+ componentFilter,\n+ ((parseInt(\n+ currentTarget.value,\n+ 10\n+ ): any): ElementType)\n+ )\n+ }\n+ >\n+	\n+ removeFilter(index)}\n+ title=\"Delete filter\"\n+ >\n+ \n+ <\/Button>\n+ <\/td>\n+ <\/tr>\n+ ))}\n+ <\/tbody>\n+ <\/table>\n+ \n+ \n+

dillon1000/react

Files changed