Scheduling profiler: UX tweaks (facebook#21971)

zhengjitf · Apr 15, 2022 · aa1778c · aa1778c
1 parent 13f0565
commit aa1778c
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 156 deletions.
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -507,7 +507,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
           );
         }}
       </ContextMenu>
-      {!isContextMenuShown && (
+      {!isContextMenuShown && !surfaceRef.current.hasActiveView() && (
         <EventTooltip
           data={data}
           hoveredEvent={hoveredEvent}

diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
@@ -17,7 +17,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -246,11 +246,7 @@ class FlamechartStackLayerView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {_stackLayer, frame, _intrinsicSize, _onHover, visibleArea} = this;
     const {location} = interaction.payload;
     if (!_onHover || !rectContainsPoint(location, visibleArea)) {
@@ -270,7 +266,7 @@ class FlamechartStackLayerView extends View {
       const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
       if (x <= location.x && x + width >= location.x) {
         this.currentCursor = 'pointer';
-        hoveredViewRef.current = this;
+        viewRefs.hoveredView = this;
         _onHover(flamechartStackFrame);
         return;
       }
@@ -287,14 +283,10 @@ class FlamechartStackLayerView extends View {
 
   _didGrab: boolean = false;
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }

diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -255,11 +255,7 @@ export class NativeEventsView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {frame, _intrinsicSize, onHover, visibleArea} = this;
     if (!onHover) {
       return;
@@ -290,7 +286,7 @@ export class NativeEventsView extends View {
         ) {
           this.currentCursor = 'pointer';
 
-          hoveredViewRef.current = this;
+          viewRefs.hoveredView = this;
 
           onHover(nativeEvent);
           return;
@@ -301,14 +297,10 @@ export class NativeEventsView extends View {
     onHover(null);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }

diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -231,11 +231,7 @@ export class ReactEventsView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {frame, onHover, visibleArea} = this;
     if (!onHover) {
       return;
@@ -271,7 +267,7 @@ export class ReactEventsView extends View {
         hoverTimestamp <= timestamp + eventTimestampAllowance
       ) {
         this.currentCursor = 'pointer';
-        hoveredViewRef.current = this;
+        viewRefs.hoveredView = this;
         onHover(event);
         return;
       }
@@ -280,14 +276,10 @@ export class ReactEventsView extends View {
     onHover(null);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }

diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -256,11 +256,7 @@ export class ReactMeasuresView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {
       frame,
       _intrinsicSize,
@@ -311,7 +307,7 @@ export class ReactMeasuresView extends View {
         hoverTimestamp <= timestamp + duration
       ) {
         this.currentCursor = 'pointer';
-        hoveredViewRef.current = this;
+        viewRefs.hoveredView = this;
         onHover(measure);
         return;
       }
@@ -320,14 +316,10 @@ export class ReactMeasuresView extends View {
     onHover(null);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }

diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -191,11 +191,7 @@ export class UserTimingMarksView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {frame, onHover, visibleArea} = this;
     if (!onHover) {
       return;
@@ -229,7 +225,7 @@ export class UserTimingMarksView extends View {
         hoverTimestamp <= timestamp + markTimestampAllowance
       ) {
         this.currentCursor = 'pointer';
-        hoveredViewRef.current = this;
+        viewRefs.hoveredView = this;
         onHover(mark);
         return;
       }
@@ -238,14 +234,10 @@ export class UserTimingMarksView extends View {
     onHover(null);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }

diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
@@ -19,7 +19,7 @@ import type {
 } from './useCanvasInteraction';
 import type {Rect} from './geometry';
 import type {ScrollState} from './utils/scrollState';
-import type {ViewRef} from './Surface';
+import type {ViewRefs} from './Surface';
 
 import {Surface} from './Surface';
 import {View} from './View';
@@ -156,34 +156,26 @@ export class HorizontalPanAndZoomView extends View {
     this._setScrollState(newState);
   }
 
-  _handleMouseDown(
-    interaction: MouseDownInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {
     if (rectContainsPoint(interaction.payload.location, this.frame)) {
       this._isPanning = true;
 
-      activeViewRef.current = this;
+      viewRefs.activeView = this;
 
       this.currentCursor = 'grabbing';
     }
   }
 
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const isHovered = rectContainsPoint(
       interaction.payload.location,
       this.frame,
     );
     if (isHovered) {
-      hoveredViewRef.current = this;
+      viewRefs.hoveredView = this;
     }
 
-    if (activeViewRef.current === this) {
+    if (viewRefs.activeView === this) {
       this.currentCursor = 'grabbing';
     } else if (isHovered) {
       this.currentCursor = 'grab';
@@ -200,17 +192,13 @@ export class HorizontalPanAndZoomView extends View {
     this._setStateAndInformCallbacksIfChanged(newState);
   }
 
-  _handleMouseUp(
-    interaction: MouseUpInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {
     if (this._isPanning) {
       this._isPanning = false;
     }
 
-    if (activeViewRef.current === this) {
-      activeViewRef.current = null;
+    if (viewRefs.activeView === this) {
+      viewRefs.activeView = null;
     }
   }
 
@@ -273,20 +261,16 @@ export class HorizontalPanAndZoomView extends View {
     this._setStateAndInformCallbacksIfChanged(newState);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousedown':
-        this._handleMouseDown(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseDown(interaction, viewRefs);
         break;
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
       case 'mouseup':
-        this._handleMouseUp(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseUp(interaction, viewRefs);
         break;
       case 'wheel-plain':
         this._handleWheelPlain(interaction);