Add Component Highlighting to Profiler DevTools

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

@@ -15,9 +15,12 @@ type Props = {|
   color: string,
   height: number,
   isDimmed?: boolean,
+  isHovered?: boolean,
   label: string,
   onClick: (event: SyntheticMouseEvent<*>) => mixed,
   onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,
+  onMouseEnter?: (event: SyntheticMouseEvent<*>) => mixed,
+  onMouseLeave?: (event: SyntheticMouseEvent<*>) => mixed,
   placeLabelAboveNode?: boolean,
   textStyle?: Object,
   width: number,
@@ -31,14 +34,24 @@ export default function ChartNode({
   color,
   height,
   isDimmed = false,
+  isHovered = false,
   label,
   onClick,
   onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
   textStyle,
   width,
   x,
   y,
 }: Props) {
+  let opacity = 1;
+  if (isHovered) {
+    opacity = 0.75;
+  } else if (isDimmed) {
+    opacity = 0.5;
+  }
+
   return (
     <g className={styles.Group} transform={`translate(${x},${y})`}>
       <title>{label}</title>
@@ -48,9 +61,11 @@ export default function ChartNode({
         fill={color}
         onClick={onClick}
         onDoubleClick={onDoubleClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         className={styles.Rect}
         style={{
-          opacity: isDimmed ? 0.5 : 1,
+          opacity,
         }}
       />
       {width >= minWidthToDisplay && (

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

@@ -14,7 +14,7 @@ import {ProfilerContext} from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitFlamegraphListItem from './CommitFlamegraphListItem';
 import {scale} from './utils';
-import {StoreContext} from '../context';
+import {BridgeContext, StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
 
 import styles from './CommitFlamegraph.css';
@@ -24,6 +24,7 @@ import type {CommitTree} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
+  onElementMouseEnter: (id: number) => void,
   scaleX: (value: number, fallbackValue: number) => number,
   selectedChartNode: ChartNode | null,
   selectedChartNodeIndex: number,
@@ -93,6 +94,8 @@ type Props = {|
 function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
   const {lineHeight} = useContext(SettingsContext);
   const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
+  const store = useContext(StoreContext);
+  const bridge = useContext(BridgeContext);
 
   const selectedChartNodeIndex = useMemo<number>(() => {
     if (selectedFiberID === null) {
@@ -115,9 +118,36 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
     return null;
   }, [chartData, selectedFiberID, selectedChartNodeIndex]);
 
+  const highlightNativeElement = useCallback(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      const rendererID = store.getRendererIDForElement(id);
+      if (element !== null && rendererID !== null) {
+        bridge.send('highlightNativeElement', {
+          displayName: element.displayName,
+          hideAfterTimeout: false,
+          id,
+          openNativeElementsPanel: false,
+          rendererID,
+          scrollIntoView: false,
+        });
+      }
+    },
+    [store, bridge],
+  );
+
+  // Highlight last hovered element.
+  const handleElementMouseEnter = useCallback(
+    id => {
+      highlightNativeElement(id);
+    },
+    [highlightNativeElement],
+  );
+
   const itemData = useMemo<ItemData>(
     () => ({
       chartData,
+      onElementMouseEnter: handleElementMouseEnter,
       scaleX: scale(
         0,
         selectedChartNode !== null

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

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React, {Fragment, memo, useCallback, useContext} from 'react';
+import React, {Fragment, memo, useCallback, useContext, useState} from 'react';
 import {areEqual} from 'react-window';
 import {barWidthThreshold} from './constants';
 import {getGradientColor} from './utils';
@@ -24,8 +24,11 @@ type Props = {
 };
 
 function CommitFlamegraphListItem({data, index, style}: Props) {
+  const [isHovered, setIsHovered] = useState(false);
+
   const {
     chartData,
+    onElementMouseEnter,
     scaleX,
     selectedChartNode,
     selectedChartNodeIndex,
@@ -43,6 +46,18 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
     [selectFiber],
   );
 
+  const handleMouseEnter = (id: number) => {
+    setIsHovered(true);
+
+    if (id !== null) {
+      onElementMouseEnter(id);
+    }
+  };
+
+  const handleMouseLeave = (id: number) => {
+    setIsHovered(false);
+  };
+
   // List items are absolutely positioned using the CSS "top" attribute.
   // The "left" value will always be 0.
   // Since height is fixed, and width is based on the node's duration,
@@ -101,9 +116,12 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
             color={color}
             height={lineHeight}
             isDimmed={index < selectedChartNodeIndex}
+            isHovered={isHovered}
             key={id}
             label={label}
             onClick={event => handleClick(event, id, name)}
+            onMouseEnter={() => handleMouseEnter(id)}
+            onMouseLeave={() => handleMouseLeave(id)}
             textStyle={{color: textColor}}
             width={nodeWidth}
             x={nodeOffset - selectedNodeOffset}

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

@@ -14,7 +14,7 @@ import {ProfilerContext} from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitRankedListItem from './CommitRankedListItem';
 import {scale} from './utils';
-import {StoreContext} from '../context';
+import {BridgeContext, StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
 
 import styles from './CommitRanked.css';
@@ -24,6 +24,7 @@ import type {CommitTree} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
+  onElementMouseEnter: (id: number) => void,
   scaleX: (value: number, fallbackValue: number) => number,
   selectedFiberID: number | null,
   selectedFiberIndex: number,
@@ -91,15 +92,44 @@ type Props = {|
 function CommitRanked({chartData, commitTree, height, width}: Props) {
   const {lineHeight} = useContext(SettingsContext);
   const {selectedFiberID, selectFiber} = useContext(ProfilerContext);
+  const store = useContext(StoreContext);
+  const bridge = useContext(BridgeContext);
 
   const selectedFiberIndex = useMemo(
     () => getNodeIndex(chartData, selectedFiberID),
     [chartData, selectedFiberID],
   );
 
+  const highlightNativeElement = useCallback(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      const rendererID = store.getRendererIDForElement(id);
+      if (element !== null && rendererID !== null) {
+        bridge.send('highlightNativeElement', {
+          displayName: element.displayName,
+          hideAfterTimeout: false,
+          id,
+          openNativeElementsPanel: false,
+          rendererID,
+          scrollIntoView: false,
+        });
+      }
+    },
+    [store, bridge],
+  );
+
+  // Highlight last hovered element.
+  const handleElementMouseEnter = useCallback(
+    id => {
+      highlightNativeElement(id);
+    },
+    [highlightNativeElement],
+  );
+
   const itemData = useMemo<ItemData>(
     () => ({
       chartData,
+      onElementMouseEnter: handleElementMouseEnter,
       scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),
       selectedFiberID,
       selectedFiberIndex,

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

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React, {memo, useCallback, useContext} from 'react';
+import React, {memo, useCallback, useContext, useState} from 'react';
 import {areEqual} from 'react-window';
 import {minBarWidth} from './constants';
 import {getGradientColor} from './utils';
@@ -24,7 +24,15 @@ type Props = {
 };
 
 function CommitRankedListItem({data, index, style}: Props) {
-  const {chartData, scaleX, selectedFiberIndex, selectFiber, width} = data;
+  const [isHovered, setIsHovered] = useState(false);
+  const {
+    chartData,
+    onElementMouseEnter,
+    scaleX,
+    selectedFiberIndex,
+    selectFiber,
+    width,
+  } = data;
 
   const node = chartData.nodes[index];
 
@@ -38,6 +46,18 @@ function CommitRankedListItem({data, index, style}: Props) {
     [node, selectFiber],
   );
 
+  const handleMouseEnter = (id: number) => {
+    setIsHovered(true);
+
+    if (id !== null) {
+      onElementMouseEnter(id);
+    }
+  };
+
+  const handleMouseLeave = (id: number) => {
+    setIsHovered(false);
+  };
+
   // List items are absolutely positioned using the CSS "top" attribute.
   // The "left" value will always be 0.
   // Since height is fixed, and width is based on the node's duration,
@@ -49,9 +69,12 @@ function CommitRankedListItem({data, index, style}: Props) {
       color={getGradientColor(node.value / chartData.maxValue)}
       height={lineHeight}
       isDimmed={index < selectedFiberIndex}
+      isHovered={isHovered}
       key={node.id}
       label={node.label}
       onClick={handleClick}
+      onMouseEnter={() => handleMouseEnter(node.id)}
+      onMouseLeave={() => handleMouseLeave(node.id)}
       width={Math.max(minBarWidth, scaleX(node.value, width))}
       x={0}
       y={top}