feat[react-devtools]: display forget badge for components in profilin…

…g sessions

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

@@ -214,6 +214,7 @@ export default class ProfilerStore extends EventEmitter<{
         hocDisplayNames: element.hocDisplayNames,
         key: element.key,
         type: element.type,
+        compiledWithForget: element.compiledWithForget,
       };
       profilingSnapshots.set(elementID, snapshotNode);
 

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.css

@@ -1,5 +1,4 @@
 .Root {
-  padding: 0.25rem;
   user-select: none;
   display: inline-flex;
 }

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js

@@ -7,8 +7,6 @@
  * @flow
  */
 
-import type {Element} from 'react-devtools-shared/src/frontend/types';
-
 import * as React from 'react';
 
 import Badge from './Badge';
@@ -17,11 +15,20 @@ import ForgetBadge from './ForgetBadge';
 import styles from './InspectedElementBadges.css';
 
 type Props = {
-  element: Element,
+  hocDisplayNames: null | Array<string>,
+  compiledWithForget: boolean,
 };
 
-export default function InspectedElementBadges({element}: Props): React.Node {
-  const {hocDisplayNames, compiledWithForget} = element;
+export default function InspectedElementBadges({
+  hocDisplayNames,
+  compiledWithForget,
+}: Props): React.Node {
+  if (
+    !compiledWithForget &&
+    (hocDisplayNames == null || hocDisplayNames.length === 0)
+  ) {
+    return null;
+  }
 
   return (
     <div className={styles.Root}>

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css

@@ -25,6 +25,10 @@
   line-height: var(--line-height-data);
 }
 
+.InspectedElementBadgesContainer {
+  padding: 0.25rem;
+}
+
 .Owner {
   border-radius: 0.25rem;
   padding: 0.125rem 0.25rem;

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js

@@ -85,7 +85,12 @@ export default function InspectedElementView({
   return (
     <Fragment>
       <div className={styles.InspectedElement}>
-        <InspectedElementBadges element={element} />
+        <div className={styles.InspectedElementBadgesContainer}>
+          <InspectedElementBadges
+            hocDisplayNames={element.hocDisplayNames}
+            compiledWithForget={element.compiledWithForget}
+          />
+        </div>
 
         <InspectedElementPropsTree
           bridge={bridge}

packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js

@@ -17,7 +17,10 @@ import {
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
 } from 'react-devtools-shared/src/constants';
-import {utfDecodeStringWithRanges} from 'react-devtools-shared/src/utils';
+import {
+  parseElementDisplayNameFromBackend,
+  utfDecodeStringWithRanges,
+} from 'react-devtools-shared/src/utils';
 import {ElementTypeRoot} from 'react-devtools-shared/src/frontend/types';
 import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
@@ -133,6 +136,7 @@ function recursivelyInitializeTree(
         id,
       ): any): number),
       type: node.type,
+      compiledWithForget: node.compiledWithForget,
     });
 
     node.children.forEach(childID =>
@@ -214,6 +218,7 @@ function updateTree(
             parentID: 0,
             treeBaseDuration: 0, // This will be updated by a subsequent operation
             type,
+            compiledWithForget: false,
           };
 
           nodes.set(id, node);
@@ -241,15 +246,19 @@ function updateTree(
           const parentNode = getClonedNode(parentID);
           parentNode.children = parentNode.children.concat(id);
 
+          const {formattedDisplayName, hocDisplayNames, compiledWithForget} =
+            parseElementDisplayNameFromBackend(displayName, type);
+
           const node: CommitTreeNode = {
             children: [],
-            displayName,
-            hocDisplayNames: null,
+            displayName: formattedDisplayName,
+            hocDisplayNames: hocDisplayNames,
             id,
             key,
             parentID,
             treeBaseDuration: 0, // This will be updated by a subsequent operation
             type,
+            compiledWithForget,
           };
 
           nodes.set(id, node);

packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js

@@ -75,7 +75,7 @@ export function getChartData({
       throw Error(`Could not find node with id "${id}" in commit tree`);
     }
 
-    const {children, displayName, hocDisplayNames, key, treeBaseDuration} =
+    const {children, displayName, hocDisplayNames, key, treeBaseDuration, compiledWithForget} =
       node;
 
     const actualDuration = fiberActualDurations.get(id) || 0;
@@ -86,7 +86,11 @@ export function getChartData({
     const maybeKey = key !== null ? ` key="${key}"` : '';
 
     let maybeBadge = '';
-    if (hocDisplayNames !== null && hocDisplayNames.length > 0) {
+    if (compiledWithForget) {
+      maybeBadge = ' (Memo ✨)';
+    }
+
+    if (maybeBadge === '' && hocDisplayNames !== null && hocDisplayNames.length > 0) {
       maybeBadge = ` (${hocDisplayNames[0]})`;
     }
 

packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css

@@ -1,9 +1,13 @@
 .Toolbar {
   padding: 0.25rem 0;
-  margin-bottom: 0.25rem;
   flex: 0 0 auto;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.BadgesContainer:not(:empty) {
+  padding-bottom: 0.25rem;
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -20,10 +24,11 @@
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
+  padding-bottom: 0.25rem;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .CurrentCommit {
-  margin: 0.25rem 0;
   display: block;
   width: 100%;
   text-align: left;

packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js

@@ -9,6 +9,8 @@
 
 import * as React from 'react';
 import {Fragment, useContext} from 'react';
+
+import InspectedElementBadges from '../Components/InspectedElementBadges';
 import {ProfilerContext} from './ProfilerContext';
 import {formatDuration} from './utils';
 import WhatChanged from './WhatChanged';
@@ -34,10 +36,20 @@ export default function HoveredFiberInfo({fiberData}: Props): React.Node {
   const {id, name} = fiberData;
   const {profilingCache} = profilerStore;
 
+  if (rootID === null || selectedCommitIndex === null) {
+    return null;
+  }
+
   const commitIndices = profilingCache.getFiberCommits({
-    fiberID: ((id: any): number),
-    rootID: ((rootID: any): number),
+    fiberID: id,
+    rootID,
+  });
+
+  const {nodes} = profilingCache.getCommitTree({
+    rootID,
+    commitIndex: selectedCommitIndex,
   });
+  const node = nodes.get(id);
 
   let renderDurationInfo = null;
   let i = 0;
@@ -63,10 +75,21 @@ export default function HoveredFiberInfo({fiberData}: Props): React.Node {
     <Fragment>
       <div className={styles.Toolbar}>
         <div className={styles.Component}>{name}</div>
-      </div>
-      <div className={styles.Content}>
-        {renderDurationInfo || <div>Did not render.</div>}
-        <WhatChanged fiberID={((id: any): number)} />
+
+        {node != null && (
+          <div className={styles.BadgesContainer}>
+            <InspectedElementBadges
+              hocDisplayNames={node.hocDisplayNames}
+              compiledWithForget={node.compiledWithForget}
+            />
+          </div>
+        )}
+
+        <div className={styles.Content}>
+          {renderDurationInfo || <div>Did not render.</div>}
+
+          <WhatChanged fiberID={id} />
+        </div>
       </div>
     </Fragment>
   );

packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js

@@ -61,7 +61,7 @@ export function getChartData({
       throw Error(`Could not find node with id "${id}" in commit tree`);
     }
 
-    const {displayName, key, parentID, type} = node;
+    const {displayName, key, parentID, type, compiledWithForget} = node;
 
     // Don't show the root node in this chart.
     if (parentID === 0) {
@@ -74,7 +74,9 @@ export function getChartData({
     const maybeKey = key !== null ? ` key="${key}"` : '';
 
     let maybeBadge = '';
-    if (type === ElementTypeForwardRef) {
+    if (compiledWithForget) {
+      maybeBadge = ' (Memo ✨)';
+    } else if (type === ElementTypeForwardRef) {
       maybeBadge = ' (ForwardRef)';
     } else if (type === ElementTypeMemo) {
       maybeBadge = ' (Memo)';

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css

@@ -11,6 +11,9 @@
   padding: 0.5rem;
   user-select: none;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .Component {

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js

@@ -9,18 +9,18 @@
 
 import * as React from 'react';
 import {Fragment, useContext, useEffect, useRef} from 'react';
+
 import WhatChanged from './WhatChanged';
 import {ProfilerContext} from './ProfilerContext';
 import {formatDuration, formatTime} from './utils';
 import {StoreContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
+import InspectedElementBadges from '../Components/InspectedElementBadges';
 
 import styles from './SidebarSelectedFiberInfo.css';
 
-export type Props = {};
-
-export default function SidebarSelectedFiberInfo(_: Props): React.Node {
+export default function SidebarSelectedFiberInfo(): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {
     rootID,
@@ -33,11 +33,36 @@ export default function SidebarSelectedFiberInfo(_: Props): React.Node {
   const {profilingCache} = profilerStore;
   const selectedListItemRef = useRef<HTMLElement | null>(null);
 
+  useEffect(() => {
+    const selectedElement = selectedListItemRef.current;
+    if (
+      selectedElement !== null &&
+      // $FlowFixMe[method-unbinding]
+      typeof selectedElement.scrollIntoView === 'function'
+    ) {
+      selectedElement.scrollIntoView({block: 'nearest', inline: 'nearest'});
+    }
+  }, [selectedCommitIndex]);
+
+  if (
+    selectedFiberID === null ||
+    rootID === null ||
+    selectedCommitIndex === null
+  ) {
+    return null;
+  }
+
   const commitIndices = profilingCache.getFiberCommits({
-    fiberID: ((selectedFiberID: any): number),
-    rootID: ((rootID: any): number),
+    fiberID: selectedFiberID,
+    rootID: rootID,
   });
 
+  const {nodes} = profilingCache.getCommitTree({
+    rootID,
+    commitIndex: selectedCommitIndex,
+  });
+  const node = nodes.get(selectedFiberID);
+
   // $FlowFixMe[missing-local-annot]
   const handleKeyDown = event => {
     switch (event.key) {
@@ -64,17 +89,6 @@ export default function SidebarSelectedFiberInfo(_: Props): React.Node {
     }
   };
 
-  useEffect(() => {
-    const selectedElement = selectedListItemRef.current;
-    if (
-      selectedElement !== null &&
-      // $FlowFixMe[method-unbinding]
-      typeof selectedElement.scrollIntoView === 'function'
-    ) {
-      selectedElement.scrollIntoView({block: 'nearest', inline: 'nearest'});
-    }
-  }, [selectedCommitIndex]);
-
   const listItems = [];
   let i = 0;
   for (i = 0; i < commitIndices.length; i++) {
@@ -114,11 +128,18 @@ export default function SidebarSelectedFiberInfo(_: Props): React.Node {
         </Button>
       </div>
       <div className={styles.Content} onKeyDown={handleKeyDown} tabIndex={0}>
+        {node != null && (
+          <InspectedElementBadges
+            hocDisplayNames={node.hocDisplayNames}
+            compiledWithForget={node.compiledWithForget}
+          />
+        )}
         <WhatChanged fiberID={((selectedFiberID: any): number)} />
         {listItems.length > 0 && (
-          <Fragment>
-            <label className={styles.Label}>Rendered at</label>: {listItems}
-          </Fragment>
+          <div>
+            <label className={styles.Label}>Rendered at: </label>
+            {listItems}
+          </div>
         )}
         {listItems.length === 0 && (
           <div>Did not render during this profiling session.</div>

packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css

@@ -1,7 +1,3 @@
-.Component {
-  margin-bottom: 0.5rem;
-}
-
 .Item {
   margin-top: 0.25rem;
 }

packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js

@@ -9,7 +9,8 @@
 
 import * as React from 'react';
 import {useContext} from 'react';
-import {ProfilerContext} from '../Profiler/ProfilerContext';
+
+import {ProfilerContext} from './ProfilerContext';
 import {StoreContext} from '../context';
 
 import styles from './WhatChanged.css';
@@ -152,7 +153,7 @@ export default function WhatChanged({fiberID}: Props): React.Node {
   }
 
   return (
-    <div className={styles.Component}>
+    <div>
       <label className={styles.Label}>Why did this render?</label>
       {changes}
     </div>