Scheduling Profiler: Add network measures

packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js

@@ -32,14 +32,34 @@ export function trimText(
   text: string,
   width: number,
 ): string | null {
-  for (let i = text.length - 1; i >= 0; i--) {
-    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
+  const maxIndex = text.length - 1;
+
+  let startIndex = 0;
+  let stopIndex = maxIndex;
+
+  let longestValidIndex = 0;
+  let longestValidText = null;
+
+  // Trimming long text could be really slow if we decrease only 1 character at a time.
+  // Trimming with more of a binary search approach is faster in the worst cases.
+  while (startIndex <= stopIndex) {
+    const currentIndex = Math.floor((startIndex + stopIndex) / 2);
+    const trimmedText =
+      currentIndex === maxIndex ? text : text.substr(0, currentIndex) + '…';
+
     if (getTextWidth(context, trimmedText) <= width) {
-      return trimmedText;
+      if (longestValidIndex < currentIndex) {
+        longestValidIndex = currentIndex;
+        longestValidText = trimmedText;
+      }
+
+      startIndex = currentIndex + 1;
+    } else {
+      stopIndex = currentIndex - 1;
     }
   }
 
-  return null;
+  return longestValidText;
 }
 
 type TextConfig = {|

packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js

@@ -156,7 +156,7 @@ export class HorizontalPanAndZoomView extends View {
       interaction.payload.location,
       this.frame,
     );
-    if (isHovered) {
+    if (isHovered && viewRefs.hoveredView === null) {
       viewRefs.hoveredView = this;
     }
 
@@ -169,9 +169,16 @@ export class HorizontalPanAndZoomView extends View {
     if (!this._isPanning) {
       return;
     }
+
+    // Don't prevent mouse-move events from bubbling if they are vertical drags.
+    const {movementX, movementY} = interaction.payload.event;
+    if (Math.abs(movementX) < Math.abs(movementY)) {
+      return;
+    }
+
     const newState = translateState({
       state: this._viewState.horizontalScrollState,
-      delta: interaction.payload.event.movementX,
+      delta: movementX,
       containerLength: this.frame.size.width,
     });
     this._viewState.updateHorizontalScrollState(newState);

packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js

@@ -199,12 +199,20 @@ export class VerticalScrollView extends View {
     if (!this._isPanning) {
       return;
     }
+
+    // Don't prevent mouse-move events from bubbling if they are horizontal drags.
+    const {movementX, movementY} = interaction.payload.event;
+    if (Math.abs(movementX) > Math.abs(movementY)) {
+      return;
+    }
+
     const newState = translateState({
       state: this._scrollState,
       delta: interaction.payload.event.movementY,
       containerLength: this.frame.size.height,
     });
     this._setScrollState(newState);
+
     return true;
   }
 
@@ -255,12 +263,14 @@ export class VerticalScrollView extends View {
   }
 
   _setScrollState(proposedState: ScrollState): boolean {
-    const height = this._contentView.frame.size.height;
+    const contentHeight = this._contentView.frame.size.height;
+    const containerHeight = this.frame.size.height;
+
     const clampedState = clampState({
       state: proposedState,
-      minContentLength: height,
-      maxContentLength: height,
-      containerLength: this.frame.size.height,
+      minContentLength: contentHeight,
+      maxContentLength: contentHeight,
+      containerLength: containerHeight,
     });
     if (!areScrollStatesEqual(clampedState, this._scrollState)) {
       this._scrollState.offset = clampedState.offset;
@@ -275,6 +285,13 @@ export class VerticalScrollView extends View {
       return true;
     }
 
-    return false;
+    // Don't allow wheel events to bubble past this view even if we've scrolled to the edge.
+    // It just feels bad to have the scrolling jump unexpectedly from in a container to the outer page.
+    // The only exception is when the container fitst the contnet (no scrolling).
+    if (contentHeight === containerHeight) {
+      return false;
+    }
+
+    return true;
   }
 }