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

…filters (#28417)

Following #28265, this should
disable location-based component filters.

```
// 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.
```

I am planning to publish a patch version of RDT soon, so I think its
better to remove this feature, instead of shipping it in a broken state.

The reason for filtering out these filters is a potential cases, where
we load filters from the backend (like in RN, where we storing some
settings on device), or these filters can be stored in user land
(`window.__REACT_DEVTOOLS_COMPONENT_FILTERS__`).

Explicitly tested the case when:
1. Load current RDT extension, add location-based component filter
2. Reload the page and observe that previously created component filter
is preserved
3. Re-load RDT extension with these changes, observe there is no
previously created component filter and user can't create a new
location-based filter
4. Reload RDT extension without these changes, no location-based filters
saved, user can create location-based filters

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,

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>

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;