Fixed zoomToRange() helper (which was broken by previous refactor commit)

Author: Brian Vaughn

packages/react-devtools-scheduling-profiler/src/CanvasPage.js

@@ -53,7 +53,7 @@ import {
   UserTimingMarksView,
 } from './content-views';
 import {COLORS} from './content-views/constants';
-import {clampState} from './view-base/utils/scrollState';
+import {clampState, moveStateToRange} from './view-base/utils/scrollState';
 import EventTooltip from './EventTooltip';
 import {RegistryContext} from 'react-devtools-shared/src/devtools/ContextMenu/Contexts';
 import ContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenu';
@@ -109,14 +109,24 @@ const zoomToBatch = (
   data: ReactProfilerData,
   measure: ReactMeasure,
   viewState: ViewState,
+  width: number,
 ) => {
   const {batchUID} = measure;
-  const [startTime, stopTime] = getBatchRange(batchUID, data);
-
-  viewState.updateHorizontalScrollState({
-    offset: startTime,
-    length: stopTime - startTime,
+  const [rangeStart, rangeEnd] = getBatchRange(batchUID, data);
+
+  // Convert from time range to ScrollState
+  const scrollState = moveStateToRange({
+    state: viewState.horizontalScrollState,
+    rangeStart,
+    rangeEnd,
+    contentLength: data.duration,
+
+    minContentLength: data.duration * MIN_ZOOM_LEVEL,
+    maxContentLength: data.duration * MAX_ZOOM_LEVEL,
+    containerLength: width,
   });
+
+  viewState.updateHorizontalScrollState(scrollState);
 };
 
 type AutoSizedCanvasProps = {|
@@ -650,7 +660,7 @@ function AutoSizedCanvas({
               {measure !== null && (
                 <ContextMenuItem
                   onClick={() =>
-                    zoomToBatch(contextData.data, measure, viewState)
+                    zoomToBatch(contextData.data, measure, viewState, width)
                   }
                   title="Zoom to batch">
                   Zoom to batch

packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js

@@ -69,9 +69,9 @@ function SchedulingProfilerContextController({children}: Props) {
         horizontalScrollState.offset = scrollState.offset;
         horizontalScrollState.length = scrollState.length;
 
-        horizontalScrollStateChangeCallbacks.forEach(callback =>
-          callback(scrollState),
-        );
+        horizontalScrollStateChangeCallbacks.forEach(callback => {
+          callback(scrollState);
+        });
       },
       viewToMutableViewStateMap: new Map(),
     };