React Rally profiler feedback (#1100)

* Click in empty space of flamegraph/ranked chart to deselect an element

* Added close/stop-inspecting button to fiber detail pane

* Show unrounded durations on hover for chart tooltips

* Make selected commit more prominent in snapshot selector

* Left/right arrow keys navigate selected snapshot/commit

* Snapshot selector auto-scrolls to ensure selected commit is visible

* Snapshot selector shows filtered commit list when inspecting fiber durations

* Tweaked selected snapshot style again to stand out more

* Single click on arrow toggles tree open/closed

* Moved 'show native elements?' option into new Profiler settings panel

* "Commit time" -> "Committed at"

* Left pad number to avoid reflow when stepping through snapshots

* When dragging, don't leave the dragging state until you release the mouse. (Even if you mouse outside of the selector.)

* Add control to filter commits below a thresold (ms)

* Commit filtering applies to snapshot durations view as well

Author: bvaughn

frontend/Icons.js

@@ -19,7 +19,7 @@ const Icons = {
   CHECK: `
     M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z
   `,
-  CLEAR: `
+  CLOSE: `
     M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41
     17.59 19 19 17.59 13.41 12z
   `,

frontend/Node.js

@@ -336,11 +336,14 @@ class Node extends React.Component<PropsType, StateType> {
     const jsxOpenTagStyle = jsxTagStyle(inverted && (!isBottomTagSelected || collapsed), nodeType, theme);
     const head = (
       <div ref={h => this._head = h} style={sharedHeadStyle} {...headEvents}>
-        <span style={{
-          width: '1rem',
-          textAlign: 'center',
-          marginLeft: '-1rem',
-        }}>
+        <span
+          onClick={onToggleCollapse}
+          style={{
+            width: '1rem',
+            textAlign: 'center',
+            marginLeft: '-1rem',
+          }}
+        >
           {collapsed ? '▶' : '▼'}
         </span>
         &lt;

frontend/SvgIcon.js

@@ -17,22 +17,23 @@ type Props = {
   style?: Object,
 };
 
-const SvgIcon = ({ path, style = styles.svgIcon }: Props) => (
+const SvgIcon = ({ path, style }: Props) => (
   <svg
-    style={style}
+    style={{
+      ...DEFAULT_STYLE,
+      ...style,
+    }}
     viewBox="0 0 24 24"
   >
     <path d={path}></path>
   </svg>
 );
 
-const styles = {
-  svgIcon: {
-    flex: '0 0 1rem',
-    width: '1rem',
-    height: '1rem',
-    fill: 'currentColor',
-  },
+const DEFAULT_STYLE = {
+  flex: '0 0 1rem',
+  width: '1rem',
+  height: '1rem',
+  fill: 'currentColor',
 };
 
 module.exports = SvgIcon;

plugins/Profiler/ProfilerStore.js

@@ -18,14 +18,19 @@ const {EventEmitter} = require('events');
 const {get, set} = require('../../utils/storage');
 
 const LOCAL_STORAGE_CHART_TYPE_KEY = 'profiler:selectedChartType';
+const LOCAL_STORAGE_COMMIT_THRESHOLD = 'profiler:commitThreshold';
+const LOCAL_STORAGE_HIDE_COMMITS_BELOW_THRESHOLD = 'profiler:hideCommitsBelowThreshold';
 const LOCAL_STORAGE_SHOW_NATIVE_NODES_KEY = 'profiler:showNativeNodes';
 
 class ProfilerStore extends EventEmitter {
   _bridge: Bridge;
   _mainStore: Object;
 
   cachedData = {};
+  commitThreshold: number = ((get(LOCAL_STORAGE_COMMIT_THRESHOLD, 0): any): number);
+  hideCommitsBelowThreshold: boolean = ((get(LOCAL_STORAGE_HIDE_COMMITS_BELOW_THRESHOLD, false): any): boolean);
   isRecording: boolean = false;
+  isSettingsPanelActive: boolean = false;
   processedInteractions: {[id: string]: Interaction} = {};
   rootsToProfilerData: Map<string, RootProfilerData> = new Map();
   roots: List = new List();
@@ -86,6 +91,29 @@ class ProfilerStore extends EventEmitter {
     this.emit('roots', this._mainStore.roots);
   };
 
+  setCommitThrehsold = (commitThreshold: number) => {
+    this.commitThreshold = commitThreshold;
+    this.emit('commitThreshold', commitThreshold);
+    set(LOCAL_STORAGE_COMMIT_THRESHOLD, commitThreshold);
+  };
+
+  setHideCommitsBelowThreshold(hideCommitsBelowThreshold: boolean): void {
+    this.hideCommitsBelowThreshold = hideCommitsBelowThreshold;
+    this.emit('hideCommitsBelowThreshold', hideCommitsBelowThreshold);
+    set(LOCAL_STORAGE_HIDE_COMMITS_BELOW_THRESHOLD, hideCommitsBelowThreshold);
+  }
+
+  setIsRecording(isRecording: boolean): void {
+    this.isRecording = isRecording;
+    this.emit('isRecording', isRecording);
+    this._mainStore.setIsRecording(isRecording);
+  }
+
+  setIsSettingsPanelActive(isSettingsPanelActive: boolean): void {
+    this.isSettingsPanelActive = isSettingsPanelActive;
+    this.emit('isSettingsPanelActive', isSettingsPanelActive);
+  }
+
   setSelectedChartType(selectedChartType: ChartType) {
     this.selectedChartType = selectedChartType;
     this.emit('selectedChartType', selectedChartType);
@@ -98,12 +126,6 @@ class ProfilerStore extends EventEmitter {
     set(LOCAL_STORAGE_SHOW_NATIVE_NODES_KEY, showNativeNodes);
   }
 
-  setIsRecording(isRecording: boolean): void {
-    this.isRecording = isRecording;
-    this.emit('isRecording', isRecording);
-    this._mainStore.setIsRecording(isRecording);
-  }
-
   storeSnapshot = () => {
     this._mainStore.snapshotQueue.forEach((snapshot: Snapshot) => {
       const { root } = snapshot;

plugins/Profiler/views/ChartNode.js

@@ -24,19 +24,32 @@ type Props = {|
   onDoubleClick?: Function,
   placeLabelAboveNode?: boolean,
   theme: Theme,
+  title: string,
   width: number,
   x: number,
   y: number,
 |};
 
 const minWidthToDisplay = 35;
 
-const ChartNode = ({ color, height, isDimmed = false, label, onClick, onDoubleClick, theme, width, x, y }: Props) => (
+const ChartNode = ({
+  color,
+  height,
+  isDimmed = false,
+  label,
+  onClick,
+  onDoubleClick,
+  theme,
+  title,
+  width,
+  x,
+  y,
+}: Props) => (
   <g
     style={ChartAnimatedNode}
     transform={`translate(${x},${y})`}
   >
-    <title>{label}</title>
+    <title>{title}</title>
     <rect
       width={width}
       height={height}

plugins/Profiler/views/FiberRenderDurations.js

@@ -18,7 +18,7 @@ import React, { PureComponent } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List } from 'react-window';
 import ChartNode from './ChartNode';
-import { minBarHeight, minBarWidth, getGradientColor, scale } from './constants';
+import { getFilteredSnapshotData, getGradientColor, minBarHeight, minBarWidth, scale } from './constants';
 import NoRenderTimesMessage from './NoRenderTimesMessage';
 
 type Node = {|
@@ -46,40 +46,62 @@ type ItemData = {|
 type SelectSnapshot = (snapshot: Snapshot) => void;
 
 type Props = {|
+  commitThreshold: number,
+  hideCommitsBelowThreshold: boolean,
   selectedFiberID: string,
   selectedSnapshot: Snapshot,
   selectSnapshot: SelectSnapshot,
+  snapshotIndex: number,
   snapshots: Array<Snapshot>,
   stopInspecting: Function,
   theme: Theme,
 |};
 
 export default ({
+  commitThreshold,
+  hideCommitsBelowThreshold,
   selectedFiberID,
   selectedSnapshot,
   selectSnapshot,
+  snapshotIndex,
   snapshots,
   stopInspecting,
   theme,
-}: Props) => (
-  <AutoSizer>
-    {({ height, width }) => (
-      <RenderDurations
-        height={height}
-        selectedFiberID={selectedFiberID}
-        selectedSnapshot={selectedSnapshot}
-        selectSnapshot={selectSnapshot}
-        snapshots={snapshots}
-        stopInspecting={stopInspecting}
-        theme={theme}
-        width={width}
-      />
-    )}
-  </AutoSizer>
-);
+}: Props) => {
+  const filteredData = getFilteredSnapshotData(
+    commitThreshold,
+    hideCommitsBelowThreshold,
+    true, // If we're viewing this component
+    selectedFiberID,
+    selectedSnapshot,
+    snapshotIndex,
+    snapshots,
+  );
+
+  return (
+    <AutoSizer>
+      {({ height, width }) => (
+        <RenderDurations
+          commitThreshold={commitThreshold}
+          height={height}
+          hideCommitsBelowThreshold={hideCommitsBelowThreshold}
+          selectedFiberID={selectedFiberID}
+          selectedSnapshot={selectedSnapshot}
+          selectSnapshot={selectSnapshot}
+          snapshots={filteredData.snapshots}
+          stopInspecting={stopInspecting}
+          theme={theme}
+          width={width}
+        />
+      )}
+    </AutoSizer>
+  );
+};
 
 type RenderDurationsProps = {|
+  commitThreshold: number,
   height: number,
+  hideCommitsBelowThreshold: boolean,
   selectedFiberID: string,
   selectedSnapshot: Snapshot,
   selectSnapshot: SelectSnapshot,
@@ -90,7 +112,9 @@ type RenderDurationsProps = {|
 |};
 
 const RenderDurations = ({
+  commitThreshold,
   height,
+  hideCommitsBelowThreshold,
   selectedFiberID,
   selectedSnapshot,
   selectSnapshot,
@@ -111,7 +135,9 @@ const RenderDurations = ({
   if (maxValue === 0) {
     return (
       <NoRenderTimesMessage
+        commitThreshold={commitThreshold}
         height={height}
+        hideCommitsBelowThreshold={hideCommitsBelowThreshold}
         stopInspecting={stopInspecting}
         width={width}
       />
@@ -171,6 +197,7 @@ class ListItem extends PureComponent<any, void> {
         onClick={() => selectSnapshot(node.parentSnapshot)}
         onDoubleClick={stopInspecting}
         theme={theme}
+        title={`${node.value}ms`}
         width={width}
         x={left}
         y={height - safeHeight}

plugins/Profiler/views/IconButton.js

@@ -22,18 +22,29 @@ const IconButton = Hoverable(
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       style={{
+        position: 'relative',
+        width: '1.5rem',
+        height: '1.5rem',
         background: isTransparent ? 'none' : theme.base00,
         border: 'none',
+        borderRadius: '0.125rem',
         outline: 'none',
         cursor: disabled ? 'default' : 'pointer',
         color: isActive ? theme.state00 : (isHovered ? theme.state06 : theme.base05),
         opacity: disabled ? 0.5 : 1,
-        padding: '4px',
         ...style,
       }}
       title={title}
     >
-      <SvgIcon path={icon} />
+      <SvgIcon
+        path={icon}
+        style={{
+          position: 'absolute',
+          top: '50%',
+          bottom: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+      />
     </button>
   )
 );

plugins/Profiler/views/NoRenderTimesMessage.js

@@ -14,12 +14,20 @@ import React from 'react';
 import {sansSerif} from '../../../frontend/Themes/Fonts';
 
 type Props = {|
+  commitThreshold: number,
   height: number,
+  hideCommitsBelowThreshold: boolean,
   stopInspecting: Function,
   width: number,
 |};
 
-export default ({ height, stopInspecting, width }: Props) => (
+export default ({
+  commitThreshold,
+  height,
+  hideCommitsBelowThreshold,
+  stopInspecting,
+  width,
+}: Props) => (
   <div style={{
     display: 'flex',
     flexDirection: 'column',
@@ -29,11 +37,16 @@ export default ({ height, stopInspecting, width }: Props) => (
     height,
     width,
   }}>
-    <p style={{
-      fontSize: sansSerif.sizes.large,
-    }}>
-      No render times were recorded for the selected element
-    </p>
+    {!hideCommitsBelowThreshold && (
+      <p style={{ fontSize: sansSerif.sizes.large}}>
+        No render times were recorded for the selected element.
+      </p>
+    )}
+    {hideCommitsBelowThreshold && (
+      <p style={{ fontSize: sansSerif.sizes.large}}>
+        No render times were recorded for the selected element based on the current commit threshold.
+      </p>
+    )}
     <p>
       <button onClick={stopInspecting}>Return to the previous view</button>
     </p>