Reorganize layout and canvas folders (#120)

src/CanvasPage.js

@@ -1,6 +1,9 @@
 // @flow
 
-import type {Point, HorizontalPanAndZoomViewOnChangeCallback} from './layout';
+import type {
+  Point,
+  HorizontalPanAndZoomViewOnChangeCallback,
+} from './view-base';
 
 import {copy} from 'clipboard-js';
 import React, {
@@ -20,30 +23,30 @@ import {
   View,
   createComposedLayout,
   lastViewTakesUpRemainingSpaceLayout,
+  useCanvasInteraction,
   verticallyStackedLayout,
   zeroPoint,
-} from './layout';
+} from './view-base';
 
 import prettyMilliseconds from 'pretty-ms';
-import {getBatchRange} from './util/getBatchRange';
+import {getBatchRange} from './utils/getBatchRange';
 import EventTooltip from './EventTooltip';
 import styles from './CanvasPage.css';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import {COLORS} from './canvas/constants';
+import {COLORS} from './content-views/constants';
 
 import {ContextMenu, ContextMenuItem, useContextMenu} from './context';
 
 const CONTEXT_MENU_ID = 'canvas';
 
 import type {ReactHoverContextInfo, ReactProfilerData} from './types';
-import {useCanvasInteraction} from './useCanvasInteraction';
 import {
   FlamechartView,
   ReactEventsView,
   ReactMeasuresView,
   TimeAxisMarkersView,
   UserTimingMarksView,
-} from './canvas/views';
+} from './content-views';
 
 type ContextMenuContextData = {|
   data: ReactProfilerData,

src/EventTooltip.js

@@ -1,6 +1,6 @@
 // @flow
 
-import type {Point} from './layout';
+import type {Point} from './view-base';
 import type {
   FlamechartStackFrame,
   ReactEvent,
@@ -13,9 +13,9 @@ import type {
 
 import prettyMilliseconds from 'pretty-ms';
 import React, {Fragment, useRef} from 'react';
-import {COLORS} from './canvas/constants';
-import {getBatchRange} from './util/getBatchRange';
-import useSmartTooltip from './util/useSmartTooltip';
+import {COLORS} from './content-views/constants';
+import {getBatchRange} from './utils/getBatchRange';
+import useSmartTooltip from './utils/useSmartTooltip';
 import styles from './EventTooltip.css';
 
 type Props = {|

src/ImportPage.js

@@ -7,8 +7,8 @@ import React, {useEffect, useCallback, useRef} from 'react';
 import profilerBrowser from './assets/profilerBrowser.png';
 import style from './ImportPage.css';
 
-import preprocessData from './util/preprocessData';
-import {readInputData} from './util/readInputData';
+import preprocessData from './utils/preprocessData';
+import {readInputData} from './utils/readInputData';
 
 // TODO: Use for dev only, switch to import file after
 import JSON_PATH from 'url:../static/perfprofilev2.json';

src/canvas/views/FlamechartView.js → src/content-views/FlamechartView.js

@@ -1,15 +1,11 @@
 // @flow
 
-import type {
-  Interaction,
-  MouseMoveInteraction,
-} from '../../useCanvasInteraction';
 import type {
   Flamechart,
   FlamechartStackFrame,
   FlamechartStackLayer,
-} from '../../types';
-import type {Rect, Size} from '../../layout';
+} from '../types';
+import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
 
 import {
   ColorView,
@@ -21,22 +17,21 @@ import {
   rectIntersectionWithRect,
   rectIntersectsRect,
   verticallyStackedLayout,
-} from '../../layout';
+} from '../view-base';
 import {
   durationToWidth,
   positioningScaleFactor,
   timestampToPosition,
-  trimFlamechartText,
-} from '../canvasUtils';
+} from './utils/positioning';
 import {
   COLORS,
   FLAMECHART_FONT_SIZE,
   FLAMECHART_FRAME_HEIGHT,
   FLAMECHART_TEXT_PADDING,
   COLOR_HOVER_DIM_DELTA,
-  REACT_WORK_BORDER_SIZE,
-} from '../constants';
-import {ColorGenerator, dimmedColor, hslaColorToString} from '../colors';
+  BORDER_SIZE,
+} from './constants';
+import {ColorGenerator, dimmedColor, hslaColorToString} from './utils/colors';
 
 // Source: https://source.chromium.org/chromium/chromium/src/+/master:out/Debug/gen/devtools/timeline/TimelineUIUtils.js;l=2109;drc=fb32e928d79707a693351b806b8710b2f6b7d399
 const colorGenerator = new ColorGenerator(
@@ -63,6 +58,29 @@ function hoverColorForStackFrame(stackFrame: FlamechartStackFrame): string {
   return hslaColorToString(color);
 }
 
+const cachedFlamechartTextWidths = new Map();
+const trimFlamechartText = (
+  context: CanvasRenderingContext2D,
+  text: string,
+  width: number,
+) => {
+  for (let i = text.length - 1; i >= 0; i--) {
+    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
+
+    let measuredWidth = cachedFlamechartTextWidths.get(trimmedText);
+    if (measuredWidth == null) {
+      measuredWidth = context.measureText(trimmedText).width;
+      cachedFlamechartTextWidths.set(trimmedText, measuredWidth);
+    }
+
+    if (measuredWidth <= width) {
+      return trimmedText;
+    }
+  }
+
+  return null;
+};
+
 class FlamechartStackLayerView extends View {
   /** Layer to display */
   _stackLayer: FlamechartStackLayer;
@@ -149,8 +167,8 @@ class FlamechartStackLayerView extends View {
       const nodeRect: Rect = {
         origin: {x, y: frame.origin.y},
         size: {
-          width: Math.floor(width - REACT_WORK_BORDER_SIZE),
-          height: Math.floor(FLAMECHART_FRAME_HEIGHT - REACT_WORK_BORDER_SIZE),
+          width: Math.floor(width - BORDER_SIZE),
+          height: Math.floor(FLAMECHART_FRAME_HEIGHT - BORDER_SIZE),
         },
       };
       if (!rectIntersectsRect(nodeRect, visibleArea)) {

src/canvas/views/ReactEventsView.js → src/content-views/ReactEventsView.js

@@ -1,32 +1,30 @@
 // @flow
 
-import type {
-  Interaction,
-  MouseMoveInteraction,
-} from '../../useCanvasInteraction';
-import type {ReactEvent, ReactProfilerData} from '../../types';
-import type {Rect, Size} from '../../layout';
+import type {ReactEvent, ReactProfilerData} from '../types';
+import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
 
 import {
   positioningScaleFactor,
   timestampToPosition,
   positionToTimestamp,
   widthToDuration,
-} from '../canvasUtils';
+} from './utils/positioning';
 import {
   View,
   Surface,
   rectContainsPoint,
   rectIntersectsRect,
   rectIntersectionWithRect,
-} from '../../layout';
+} from '../view-base';
 import {
   COLORS,
-  EVENT_ROW_HEIGHT_FIXED,
-  REACT_EVENT_ROW_PADDING,
-  REACT_EVENT_SIZE,
-  REACT_WORK_BORDER_SIZE,
-} from '../constants';
+  EVENT_ROW_PADDING,
+  EVENT_DIAMETER,
+  BORDER_SIZE,
+} from './constants';
+
+const EVENT_ROW_HEIGHT_FIXED =
+  EVENT_ROW_PADDING + EVENT_DIAMETER + EVENT_ROW_PADDING;
 
 function isSuspenseEvent(event: ReactEvent): boolean %checks {
   return (
@@ -80,13 +78,13 @@ export class ReactEventsView extends View {
     const {timestamp, type} = event;
 
     const x = timestampToPosition(timestamp, scaleFactor, frame);
-    const radius = REACT_EVENT_SIZE / 2;
+    const radius = EVENT_DIAMETER / 2;
     const eventRect: Rect = {
       origin: {
         x: x - radius,
         y: baseY,
       },
-      size: {width: REACT_EVENT_SIZE, height: REACT_EVENT_SIZE},
+      size: {width: EVENT_DIAMETER, height: EVENT_DIAMETER},
     };
     if (!rectIntersectsRect(eventRect, rect)) {
       return; // Not in view
@@ -147,7 +145,7 @@ export class ReactEventsView extends View {
     );
 
     // Draw events
-    const baseY = frame.origin.y + REACT_EVENT_ROW_PADDING;
+    const baseY = frame.origin.y + EVENT_ROW_PADDING;
     const scaleFactor = positioningScaleFactor(
       this._intrinsicSize.width,
       frame,
@@ -194,11 +192,11 @@ export class ReactEventsView extends View {
     const borderFrame: Rect = {
       origin: {
         x: frame.origin.x,
-        y: frame.origin.y + EVENT_ROW_HEIGHT_FIXED - REACT_WORK_BORDER_SIZE,
+        y: frame.origin.y + EVENT_ROW_HEIGHT_FIXED - BORDER_SIZE,
       },
       size: {
         width: frame.size.width,
-        height: REACT_WORK_BORDER_SIZE,
+        height: BORDER_SIZE,
       },
     };
     if (rectIntersectsRect(borderFrame, visibleArea)) {
@@ -240,7 +238,7 @@ export class ReactEventsView extends View {
     );
     const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
     const eventTimestampAllowance = widthToDuration(
-      REACT_EVENT_SIZE / 2,
+      EVENT_DIAMETER / 2,
       scaleFactor,
     );