Removed interactions from DevTools Profiler UI

facebook · Oct 15, 2020 · 9bd8867 · 9bd8867
1 parent d2a67ab
commit 9bd8867
Show file tree

Hide file tree

Showing 24 changed files with 28 additions and 1,230 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -255,48 +255,6 @@ Object {
 }
 `;
 
-exports[`profiling charts interactions should contain valid data: Interactions 1`] = `
-Object {
-  "interactions": Array [
-    Object {
-      "__count": 1,
-      "id": 0,
-      "name": "mount",
-      "timestamp": 0,
-    },
-    Object {
-      "__count": 0,
-      "id": 1,
-      "name": "update",
-      "timestamp": 15,
-    },
-  ],
-  "lastInteractionTime": 25,
-  "maxCommitDuration": 15,
-}
-`;
-
-exports[`profiling charts interactions should contain valid data: Interactions 2`] = `
-Object {
-  "interactions": Array [
-    Object {
-      "__count": 1,
-      "id": 0,
-      "name": "mount",
-      "timestamp": 0,
-    },
-    Object {
-      "__count": 0,
-      "id": 1,
-      "name": "update",
-      "timestamp": 15,
-    },
-  ],
-  "lastInteractionTime": 25,
-  "maxCommitDuration": 15,
-}
-`;
-
 exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `
 Object {
   "nodes": Map {

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
@@ -95,7 +95,6 @@ import type {
   RendererInterface,
   WorkTagMap,
 } from './types';
-import type {Interaction} from 'react-devtools-shared/src/devtools/views/Profiler/types';
 import type {
   ComponentFilter,
   ElementType,
@@ -1730,24 +1729,22 @@ export function attach(
         currentRootID = getFiberID(getPrimaryFiber(root.current));
         setRootPseudoKey(currentRootID, root.current);
 
-        // Checking root.memoizedInteractions handles multi-renderer edge-case-
-        // where some v16 renderers support profiling and others don't.
-        if (isProfiling && root.memoizedInteractions != null) {
-          // If profiling is active, store commit time and duration, and the current interactions.
-          // The frontend may request this information after profiling has stopped.
-          currentCommitProfilingMetadata = {
-            changeDescriptions: recordChangeDescriptions ? new Map() : null,
-            durations: [],
-            commitTime: getCurrentTime() - profilingStartTime,
-            interactions: Array.from(root.memoizedInteractions).map(
-              (interaction: Interaction) => ({
-                ...interaction,
-                timestamp: interaction.timestamp - profilingStartTime,
-              }),
-            ),
-            maxActualDuration: 0,
-            priorityLevel: null,
-          };
+        if (isProfiling) {
+          // Handle multi-renderer edge-case where some v16 renderers support profiling and others don't.
+          if (
+            root.current != null &&
+            root.current.hasOwnProperty('treeBaseDuration')
+          ) {
+            // If profiling is active, store commit time and duration.
+            // The frontend may request this information after profiling has stopped.
+            currentCommitProfilingMetadata = {
+              changeDescriptions: recordChangeDescriptions ? new Map() : null,
+              durations: [],
+              commitTime: getCurrentTime() - profilingStartTime,
+              maxActualDuration: 0,
+              priorityLevel: null,
+            };
+          }
         }
 
         mountFiberRecursively(root.current, null, false, false);
@@ -1780,23 +1777,17 @@ export function attach(
       traceUpdatesForNodes.clear();
     }
 
-    // Checking root.memoizedInteractions handles multi-renderer edge-case-
-    // where some v16 renderers support profiling and others don't.
-    const isProfilingSupported = root.memoizedInteractions != null;
+    // Handle multi-renderer edge-case where some v16 renderers support profiling and others don't.
+    const isProfilingSupported =
+      root.current != null && root.current.hasOwnProperty('treeBaseDuration');
 
     if (isProfiling && isProfilingSupported) {
-      // If profiling is active, store commit time and duration, and the current interactions.
+      // If profiling is active, store commit time and duration.
       // The frontend may request this information after profiling has stopped.
       currentCommitProfilingMetadata = {
         changeDescriptions: recordChangeDescriptions ? new Map() : null,
         durations: [],
         commitTime: getCurrentTime() - profilingStartTime,
-        interactions: Array.from(root.memoizedInteractions).map(
-          (interaction: Interaction) => ({
-            ...interaction,
-            timestamp: interaction.timestamp - profilingStartTime,
-          }),
-        ),
         maxActualDuration: 0,
         priorityLevel:
           priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
@@ -2889,7 +2880,6 @@ export function attach(
     changeDescriptions: Map<number, ChangeDescription> | null,
     commitTime: number,
     durations: Array<number>,
-    interactions: Array<Interaction>,
     maxActualDuration: number,
     priorityLevel: string | null,
   |};
@@ -2920,8 +2910,6 @@ export function attach(
       (commitProfilingMetadata, rootID) => {
         const commitData: Array<CommitDataBackend> = [];
         const initialTreeBaseDurations: Array<[number, number]> = [];
-        const allInteractions: Map<number, Interaction> = new Map();
-        const interactionCommits: Map<number, Array<number>> = new Map();
 
         const displayName =
           (displayNamesByRootID !== null && displayNamesByRootID.get(rootID)) ||
@@ -2944,29 +2932,11 @@ export function attach(
           const {
             changeDescriptions,
             durations,
-            interactions,
             maxActualDuration,
             priorityLevel,
             commitTime,
           } = commitProfilingData;
 
-          const interactionIDs: Array<number> = [];
-
-          interactions.forEach(interaction => {
-            if (!allInteractions.has(interaction.id)) {
-              allInteractions.set(interaction.id, interaction);
-            }
-
-            interactionIDs.push(interaction.id);
-
-            const commitIndices = interactionCommits.get(interaction.id);
-            if (commitIndices != null) {
-              commitIndices.push(commitIndex);
-            } else {
-              interactionCommits.set(interaction.id, [commitIndex]);
-            }
-          });
-
           const fiberActualDurations: Array<[number, number]> = [];
           const fiberSelfDurations: Array<[number, number]> = [];
           for (let i = 0; i < durations.length; i += 3) {
@@ -2983,7 +2953,6 @@ export function attach(
             duration: maxActualDuration,
             fiberActualDurations,
             fiberSelfDurations,
-            interactionIDs,
             priorityLevel,
             timestamp: commitTime,
           });
@@ -2993,8 +2962,6 @@ export function attach(
           commitData,
           displayName,
           initialTreeBaseDurations,
-          interactionCommits: Array.from(interactionCommits.entries()),
-          interactions: Array.from(allInteractions.entries()),
           rootID,
         });
       },

diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
@@ -14,7 +14,6 @@ import type {
   ComponentFilter,
   ElementType,
 } from 'react-devtools-shared/src/types';
-import type {Interaction} from 'react-devtools-shared/src/devtools/views/Profiler/types';
 import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
 type BundleType =
@@ -158,7 +157,6 @@ export type CommitDataBackend = {|
   fiberActualDurations: Array<[number, number]>,
   // Tuple of fiber ID and computed "self" duration
   fiberSelfDurations: Array<[number, number]>,
-  interactionIDs: Array<number>,
   priorityLevel: string | null,
   timestamp: number,
 |};
@@ -168,9 +166,6 @@ export type ProfilingDataForRootBackend = {|
   displayName: string,
   // Tuple of Fiber ID and base duration
   initialTreeBaseDurations: Array<[number, number]>,
-  // Tuple of Interaction ID and commit indices
-  interactionCommits: Array<[number, Array<number>]>,
-  interactions: Array<[number, Interaction]>,
   rootID: number,
 |};
 

diff --git a/packages/react-devtools-shared/src/devtools/ProfilingCache.js b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
@@ -16,18 +16,13 @@ import {
   getChartData as getFlamegraphChartData,
   invalidateChartData as invalidateFlamegraphChartData,
 } from 'react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder';
-import {
-  getChartData as getInteractionsChartData,
-  invalidateChartData as invalidateInteractionsChartData,
-} from 'react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder';
 import {
   getChartData as getRankedChartData,
   invalidateChartData as invalidateRankedChartData,
 } from 'react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder';
 
 import type {CommitTree} from 'react-devtools-shared/src/devtools/views/Profiler/types';
 import type {ChartData as FlamegraphChartData} from 'react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder';
-import type {ChartData as InteractionsChartData} from 'react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder';
 import type {ChartData as RankedChartData} from 'react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder';
 
 export default class ProfilingCache {
@@ -92,16 +87,6 @@ export default class ProfilingCache {
       rootID,
     });
 
-  getInteractionsChartData = ({
-    rootID,
-  }: {|
-    rootID: number,
-  |}): InteractionsChartData =>
-    getInteractionsChartData({
-      profilerStore: this._profilerStore,
-      rootID,
-    });
-
   getRankedChartData = ({
     commitIndex,
     commitTree,
@@ -123,7 +108,6 @@ export default class ProfilingCache {
 
     invalidateCommitTrees();
     invalidateFlamegraphChartData();
-    invalidateInteractionsChartData();
     invalidateRankedChartData();
   }
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -17,7 +17,6 @@ export type IconType =
   | 'components'
   | 'copy'
   | 'flame-chart'
-  | 'interactions'
   | 'profiler'
   | 'ranked-chart'
   | 'search'
@@ -50,9 +49,6 @@ export default function Icon({className = '', type}: Props) {
     case 'flame-chart':
       pathData = PATH_FLAME_CHART;
       break;
-    case 'interactions':
-      pathData = PATH_INTERACTIONS;
-      break;
     case 'profiler':
       pathData = PATH_PROFILER;
       break;
@@ -120,14 +116,6 @@ const PATH_FLAME_CHART = `
   13.3541667,19.4702042 C13.3541667,20.1226027 12.7851952,20.6514763 12.0833333,20.6514763 Z
 `;
 
-const PATH_INTERACTIONS = `
-  M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2
-  2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55
-  4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02
-  9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55
-  2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z
-`;
-
 const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';
 
 const PATH_SEARCH = `

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.css b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.css