feature[REMOVED][devtools]: turn off / hide location based component …

…filters
facebook · Feb 22, 2024 · a5006f8 · a5006f8
1 parent 47beb96
commit a5006f8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
@@ -36,6 +36,7 @@ import {
   renamePathInObject,
   setInObject,
   utfEncodeString,
+  filterOutLocationComponentFilters,
 } from 'react-devtools-shared/src/utils';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 import {
@@ -918,7 +919,11 @@ export function attach(
   // because they are stored in localStorage within the context of the extension.
   // Instead it relies on the extension to pass filters through.
   if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {
-    applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
+    const componentFiltersWithoutLocationBasedOnes =
+      filterOutLocationComponentFilters(
+        window.__REACT_DEVTOOLS_COMPONENT_FILTERS__,
+      );
+    applyComponentFilters(componentFiltersWithoutLocationBasedOnes);
   } else {
     // Unfortunately this feature is not expected to work for React Native for now.
     // It would be annoying for us to spam YellowBox warnings with unactionable stuff,

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -374,7 +374,9 @@ export default function ComponentsSettings(_: {}): React.Node {
                       ): any): ComponentFilterType),
                     )
                   }>
-                  <option value={ComponentFilterLocation}>location</option>
+                  {/* TODO: currently disabled, need find a new way of doing this
+                    <option value={ComponentFilterLocation}>location</option>
+                  */}
                   <option value={ComponentFilterDisplayName}>name</option>
                   <option value={ComponentFilterElementType}>type</option>
                   <option value={ComponentFilterHOC}>hoc</option>

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
@@ -43,6 +43,7 @@ import {
 } from './constants';
 import {
   ComponentFilterElementType,
+  ComponentFilterLocation,
   ElementTypeHostComponent,
 } from './frontend/types';
 import {
@@ -339,7 +340,8 @@ export function getSavedComponentFilters(): Array<ComponentFilter> {
       LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
     );
     if (raw != null) {
-      return JSON.parse(raw);
+      const parsedFilters: Array<ComponentFilter> = JSON.parse(raw);
+      return filterOutLocationComponentFilters(parsedFilters);
     }
   } catch (error) {}
   return getDefaultComponentFilters();
@@ -350,10 +352,27 @@ export function setSavedComponentFilters(
 ): void {
   localStorageSetItem(
     LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
-    JSON.stringify(componentFilters),
+    JSON.stringify(filterOutLocationComponentFilters(componentFilters)),
   );
 }
 
+// Following __debugSource removal from Fiber, the new approach for finding the source location
+// of a component, represented by the Fiber, is based on lazily generating and parsing component stack frames
+// To find the original location, React DevTools will perform symbolication, source maps are required for that.
+// In order to start filtering Fibers, we need to find location for all of them, which can't be done lazily.
+// Eager symbolication can become quite expensive for large applications.
+export function filterOutLocationComponentFilters(
+  componentFilters: Array<ComponentFilter>,
+): Array<ComponentFilter> {
+  // This is just an additional check to preserve the previous state
+  // Filters can be stored on the backend side or in user land (in a window object)
+  if (!Array.isArray(componentFilters)) {
+    return componentFilters;
+  }
+
+  return componentFilters.filter(f => f.type !== ComponentFilterLocation);
+}
+
 function parseBool(s: ?string): ?boolean {
   if (s === 'true') {
     return true;