feat(devtools): add HOC name in Profiler chart

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

@@ -15,13 +15,15 @@ import type {ElementType} from 'react-devtools-shared/src/types';
 
 type Props = {|
   className?: string,
+  extraLabelClassName?: string,
   hocDisplayNames: Array<string> | null,
   type: ElementType,
   children: React$Node,
 |};
 
 export default function Badge({
   className,
+  extraLabelClassName,
   hocDisplayNames,
   type,
   children,
@@ -36,7 +38,9 @@ export default function Badge({
     <Fragment>
       <div className={`${styles.Badge} ${className || ''}`}>{children}</div>
       {totalBadgeCount > 1 && (
-        <div className={styles.ExtraLabel}>+{totalBadgeCount - 1}</div>
+        <div className={`${styles.ExtraLabel} ${extraLabelClassName || ''}`}>
+          +{totalBadgeCount - 1}
+        </div>
       )}
     </Fragment>
   );

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

@@ -29,3 +29,8 @@
   text-align: left;
   transition: all ease-in-out 250ms;
 }
+
+.ExtraLabel {
+  display: inline-block;
+  color: var(--color-commit-gradient-text);
+}

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

@@ -10,6 +10,7 @@
 import * as React from 'react';
 
 import styles from './ChartNode.css';
+import Badge from '../Components/Badge';
 
 type Props = {|
   color: string,
@@ -32,13 +33,15 @@ const minWidthToDisplay = 35;
 export default function ChartNode({
   color,
   height,
+  hocDisplayNames,
   isDimmed = false,
   label,
   onClick,
   onMouseEnter,
   onMouseLeave,
   onDoubleClick,
   textStyle,
+  type,
   width,
   x,
   y,
@@ -71,6 +74,13 @@ export default function ChartNode({
           y={0}>
           <div className={styles.Div} style={textStyle}>
             {label}
+          <Badge
+            className={styles.Badge}
+            hocDisplayNames={hocDisplayNames}
+            extraLabelClassName={styles.ExtraLabel}
+            type={type}>
+            {hocDisplayNames !== null ? <span>{hocDisplayNames[0]}</span> : null}
+          </Badge>
           </div>
         </foreignObject>
       )}

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

@@ -14,6 +14,7 @@ import {barWidthThreshold} from './constants';
 import {getGradientColor} from './utils';
 import ChartNode from './ChartNode';
 import {SettingsContext} from '../Settings/SettingsContext';
+import {StoreContext} from '../context';
 
 import type {ChartNode as ChartNodeType} from './FlamegraphChartBuilder';
 import type {ItemData} from './CommitFlamegraph';
@@ -39,6 +40,7 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
   const {renderPathNodes, maxSelfDuration, rows} = chartData;
 
   const {lineHeight} = useContext(SettingsContext);
+  const store = useContext(StoreContext);
 
   const handleClick = useCallback(
     (event: SyntheticMouseEvent<*>, id: number, name: string) => {
@@ -83,6 +85,9 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
           treeBaseDuration,
         } = chartNode;
 
+
+        const elementData = store.getElementByID(id);
+
         const nodeOffset = scaleX(offset, width);
         const nodeWidth = scaleX(treeBaseDuration, width);
 
@@ -121,6 +126,8 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
             onMouseEnter={() => handleMouseEnter(chartNode)}
             onMouseLeave={handleMouseLeave}
             textStyle={{color: textColor}}
+            hocDisplayNames={elementData.hocDisplayNames}
+            type={elementData.type}
             width={nodeWidth}
             x={nodeOffset - selectedNodeOffset}
             y={top}