Don't persist Activity slice filters

Author: eps1lon

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -3283,8 +3283,6 @@ describe('Store', () => {
         <Suspense name="Outer" rects={null}>
     `);
 
-    console.log('...........................');
-
     await actAsync(() => {
       resolve('loaded');
     });

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -54,7 +54,7 @@ import {
   renamePathInObject,
   setInObject,
   utfEncodeString,
-  filterOutLocationComponentFilters,
+  persistableComponentFilters,
 } from 'react-devtools-shared/src/utils';
 import {
   formatConsoleArgumentsToSingleString,
@@ -1481,14 +1481,21 @@ export function attach(
           hideElementsWithEnvs.add(componentFilter.value);
           break;
         case ComponentFilterActivitySlice:
-          activitySlice = nextActivitySlice;
-          if (activitySlice === null) {
+          if (
+            nextActivitySlice !== null &&
+            nextActivitySlice.tag === ActivityComponent
+          ) {
+            activitySlice = nextActivitySlice;
+            isInActivitySlice = false;
+          } else {
             // We're not filtering by activity slice after all. Consider everything
             // to be in the slice.
             isInActivitySlice = true;
-          } else {
-            isInActivitySlice = false;
+            activitySlice = null;
+            // TODO: This is not sent to the frontend.
+            componentFilter.isEnabled = false;
           }
+
           break;
         default:
           console.warn(
@@ -1503,11 +1510,9 @@ 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) {
-    const componentFiltersWithoutLocationBasedOnes =
-      filterOutLocationComponentFilters(
-        window.__REACT_DEVTOOLS_COMPONENT_FILTERS__,
-      );
-    applyComponentFilters(componentFiltersWithoutLocationBasedOnes);
+    const restoredComponentFilters: Array<ComponentFilter> =
+      persistableComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
+    applyComponentFilters(restoredComponentFilters);
   } 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/store.js

@@ -27,7 +27,7 @@ import {
   SUSPENSE_TREE_OPERATION_RESIZE,
   SUSPENSE_TREE_OPERATION_SUSPENDERS,
 } from '../constants';
-import {ElementTypeActivity, ElementTypeRoot} from '../frontend/types';
+import {ElementTypeRoot} from '../frontend/types';
 import {
   getSavedComponentFilters,
   setSavedComponentFilters,

packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js

@@ -6,25 +6,26 @@
  *
  * @flow
  */
-import type {Element} from 'react-devtools-shared/src/frontend/types';
+import type {
+  Element,
+  ActivitySliceFilter,
+  ComponentFilter,
+} from 'react-devtools-shared/src/frontend/types';
 import typeof {
   SyntheticMouseEvent,
   SyntheticKeyboardEvent,
 } from 'react-dom-bindings/src/events/SyntheticEvent';
 
 import * as React from 'react';
 import {useContext, useTransition} from 'react';
+import {ComponentFilterActivitySlice} from 'react-devtools-shared/src/frontend/types';
 import styles from './ActivityList.css';
 import {
   TreeStateContext,
   TreeDispatcherContext,
 } from '../Components/TreeContext';
 import {useHighlightHostInstance} from '../hooks';
 import {StoreContext} from '../context';
-import type {
-  ActivitySliceFilter,
-  ComponentFilter,
-} from '../../../frontend/types';
 
 export function useChangeActivitySliceAction(): [
   boolean,
@@ -40,7 +41,7 @@ export function useChangeActivitySliceAction(): [
       // Remove any existing activity slice filter
       for (let i = 0; i < store.componentFilters.length; i++) {
         const filter = store.componentFilters[i];
-        if (filter.type !== 6) {
+        if (filter.type !== ComponentFilterActivitySlice) {
           nextFilters.push(filter);
         }
       }

packages/react-devtools-shared/src/utils.js

@@ -47,6 +47,7 @@ import {
   SUSPENSE_TREE_OPERATION_SUSPENDERS,
 } from './constants';
 import {
+  ComponentFilterActivitySlice,
   ComponentFilterElementType,
   ComponentFilterLocation,
   ElementTypeHostComponent,
@@ -467,7 +468,7 @@ export function getSavedComponentFilters(): Array<ComponentFilter> {
     );
     if (raw != null) {
       const parsedFilters: Array<ComponentFilter> = JSON.parse(raw);
-      return filterOutLocationComponentFilters(parsedFilters);
+      return persistableComponentFilters(parsedFilters);
     }
   } catch (error) {}
   return getDefaultComponentFilters();
@@ -478,16 +479,11 @@ export function setSavedComponentFilters(
 ): void {
   localStorageSetItem(
     LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
-    JSON.stringify(filterOutLocationComponentFilters(componentFilters)),
+    JSON.stringify(persistableComponentFilters(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(
+export function persistableComponentFilters(
   componentFilters: Array<ComponentFilter>,
 ): Array<ComponentFilter> {
   // This is just an additional check to preserve the previous state
@@ -496,7 +492,18 @@ export function filterOutLocationComponentFilters(
     return componentFilters;
   }
 
-  return componentFilters.filter(f => f.type !== ComponentFilterLocation);
+  return componentFilters.filter(f => {
+    return (
+      // 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.
+      f.type !== ComponentFilterLocation &&
+      // Activity slice filters are based on DevTools instance IDs which do not persist across sessions.
+      f.type !== ComponentFilterActivitySlice
+    );
+  });
 }
 
 const vscodeFilepath = 'vscode://file/{path}:{line}:{column}';