Deploy Oct 17, 2023

package.json

@@ -56,7 +56,7 @@
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-rust": "^6.0.1",
-    "@codemirror/language": "^6.9.0",
+    "@codemirror/language": "^6.9.1",
     "@codemirror/state": "^6.2.1",
     "@codemirror/view": "^6.16.0",
     "@firefox-devtools/react-contextmenu": "^5.1.0",
@@ -97,23 +97,23 @@
     "workbox-window": "^7.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.15",
+    "@babel/cli": "^7.23.0",
     "@babel/core": "^7.22.17",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/eslint-plugin": "^7.22.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
     "@babel/preset-flow": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "alex": "^11.0.1",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
-    "browserslist": "^4.21.10",
+    "browserslist": "^4.22.1",
     "caniuse-lite": "^1.0.30001538",
     "circular-dependency-plugin": "^5.2.1",
     "codecov": "^3.8.3",
@@ -131,7 +131,7 @@
     "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-testing-library": "^6.0.1",
+    "eslint-plugin-testing-library": "^6.0.2",
     "espree": "^9.6.1",
     "fake-indexeddb": "^4.0.2",
     "fetch-mock-jest": "^1.5.1",
@@ -156,7 +156,7 @@
     "postcss-loader": "^7.3.3",
     "prettier": "^3.0.3",
     "raw-loader": "^4.0.2",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
     "style-loader": "^3.3.3",
     "stylelint": "^15.10.3",
     "stylelint-config-idiomatic-order": "^9.0.0",

src/app-logic/constants.js

@@ -39,6 +39,7 @@ export const TRACK_MEMORY_MARKERS_HEIGHT = 15;
 export const TRACK_MEMORY_HEIGHT =
   TRACK_MEMORY_GRAPH_HEIGHT + TRACK_MEMORY_MARKERS_HEIGHT;
 export const TRACK_MEMORY_LINE_WIDTH = 2;
+export const TRACK_MEMORY_COLOR = 'orange';
 
 // The following values are for experimental event delay track.
 export const TRACK_EVENT_DELAY_HEIGHT = 40;
@@ -62,6 +63,7 @@ export const TIMELINE_RULER_HEIGHT = 20;
 // Height of the power track.
 export const TRACK_POWER_HEIGHT = 25;
 export const TRACK_POWER_LINE_WIDTH = 2;
+export const TRACK_POWER_DEFAULT_COLOR = 'grey';
 
 // Height of the process cpu track.
 export const TRACK_PROCESS_CPU_HEIGHT = 25;

src/components/shared/thread/SampleGraph.js

@@ -20,7 +20,6 @@ import type {
   CategoryList,
   IndexIntoSamplesTable,
   Milliseconds,
-  CallNodeInfo,
   IndexIntoCallNodeTable,
   SelectedState,
 } from 'firefox-profiler/types';
@@ -34,7 +33,6 @@ type Props = {|
   +interval: Milliseconds,
   +rangeStart: Milliseconds,
   +rangeEnd: Milliseconds,
-  +callNodeInfo: CallNodeInfo,
   +categories: CategoryList,
   +onSampleClick: (
     event: SyntheticMouseEvent<>,
@@ -96,7 +94,6 @@ export class ThreadSampleGraphImpl extends PureComponent<Props> {
       interval,
       rangeStart,
       rangeEnd,
-      callNodeInfo,
       samplesSelectedStates,
       sampleCallNodes,
       categories,
@@ -110,13 +107,6 @@ export class ThreadSampleGraphImpl extends PureComponent<Props> {
     canvas.width = Math.round(width * devicePixelRatio);
     canvas.height = Math.round(height * devicePixelRatio);
     const ctx = canvas.getContext('2d');
-    let maxDepth = 0;
-    const { callNodeTable } = callNodeInfo;
-    for (let i = 0; i < callNodeTable.depth.length; i++) {
-      if (callNodeTable.depth[i] > maxDepth) {
-        maxDepth = callNodeTable.depth[i];
-      }
-    }
     const range = [rangeStart, rangeEnd];
     const rangeLength = range[1] - range[0];
     const xPixelsPerMs = canvas.width / rangeLength;

src/components/sidebar/CallTreeSidebar.js

@@ -29,7 +29,6 @@ import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 import type {
   ThreadsKey,
   CategoryList,
-  CallNodeTable,
   IndexIntoCallNodeTable,
   TracedTiming,
   Milliseconds,
@@ -286,7 +285,6 @@ export const CategoryBreakdown = explicitConnect<
 
 type StateProps = {|
   +selectedNodeIndex: IndexIntoCallNodeTable | null,
-  +callNodeTable: CallNodeTable,
   +selectedThreadsKey: ThreadsKey,
   +name: string,
   +lib: string,
@@ -503,7 +501,6 @@ class CallTreeSidebarImpl extends React.PureComponent<Props> {
 export const CallTreeSidebar = explicitConnect<{||}, StateProps, {||}>({
   mapStateToProps: (state) => ({
     selectedNodeIndex: selectedThreadSelectors.getSelectedCallNodeIndex(state),
-    callNodeTable: selectedThreadSelectors.getCallNodeInfo(state).callNodeTable,
     selectedThreadsKey: getSelectedThreadsKey(state),
     name: getFunctionName(selectedNodeSelectors.getName(state)),
     lib: selectedNodeSelectors.getLib(state),

src/components/timeline/Ruler.js

@@ -6,6 +6,7 @@
 
 import React, { PureComponent } from 'react';
 import { TIMELINE_RULER_HEIGHT } from 'firefox-profiler/app-logic/constants';
+import { formatTimestamp } from 'firefox-profiler/utils/format-numbers';
 
 import './Ruler.css';
 
@@ -19,45 +20,66 @@ type Props = {|
 |};
 
 export class TimelineRuler extends PureComponent<Props> {
-  _findNiceNumberGreaterOrEqualTo(uglyNumber: number) {
+  _findNiceNumberGreaterOrEqualTo(uglyNumber: Milliseconds) {
+    // Special case numbers in the seconds, minutes or hour ranges.
+    if (uglyNumber > 10000 && uglyNumber <= 48 * 3600 * 1000) {
+      for (const seconds of [15, 20, 30]) {
+        const number = seconds * 1000;
+        if (uglyNumber <= number) {
+          return number;
+        }
+      }
+      for (const minutes of [1, 2, 5, 10, 15, 20, 30]) {
+        const number = minutes * 60 * 1000;
+        if (uglyNumber <= number) {
+          return number;
+        }
+      }
+      for (const hours of [1, 2, 3, 4, 6, 8, 12, 24, 48]) {
+        const number = hours * 3600 * 1000;
+        if (uglyNumber <= number) {
+          return number;
+        }
+      }
+    }
+
     // Write uglyNumber as a * 10^b, with 1 <= a < 10.
     // Return the lowest of 2 * 10^b, 5 * 10^b, 10 * 10^b that is greater or equal to uglyNumber.
     const b = Math.floor(Math.log10(uglyNumber));
     if (uglyNumber <= 2 * Math.pow(10, b)) {
-      return { number: 2 * Math.pow(10, b), exponent: b };
+      return 2 * Math.pow(10, b);
     }
     if (uglyNumber <= 5 * Math.pow(10, b)) {
-      return { number: 5 * Math.pow(10, b), exponent: b };
+      return 5 * Math.pow(10, b);
     }
-    return { number: Math.pow(10, b + 1), exponent: b + 1 };
+    return Math.pow(10, b + 1);
   }
 
   _getNotches() {
     if (this.props.width === 0) {
-      return { notches: [], decimalPlaces: 0 };
+      return { notches: [], notchTime: 0 };
     }
 
     const { zeroAt, rangeStart, rangeEnd, width } = this.props;
     const pixelsPerMilliSecond = width / (rangeEnd - rangeStart);
     const minimumNotchWidth = 55; // pixels
-    const { number: notchTime, exponent } =
-      this._findNiceNumberGreaterOrEqualTo(
-        minimumNotchWidth / pixelsPerMilliSecond
-      );
+    const notchTime = this._findNiceNumberGreaterOrEqualTo(
+      minimumNotchWidth / pixelsPerMilliSecond
+    );
     const firstNotchIndex = Math.ceil((rangeStart - zeroAt) / notchTime);
     const lastNotchIndex = Math.floor((rangeEnd - zeroAt) / notchTime);
     const notches = [];
     for (let i = firstNotchIndex; i <= lastNotchIndex; i++) {
       notches.push({
-        time: (i * notchTime) / 1000,
+        time: i * notchTime,
         pos: (i * notchTime - (rangeStart - zeroAt)) * pixelsPerMilliSecond,
       });
     }
-    return { notches, decimalPlaces: Math.max(0, -(exponent - 3)) };
+    return { notches, notchTime };
   }
 
   render() {
-    const { notches, decimalPlaces } = this._getNotches();
+    const { notches, notchTime } = this._getNotches();
     return (
       <div
         className="timelineRuler"
@@ -70,9 +92,9 @@ export class TimelineRuler extends PureComponent<Props> {
               key={i}
               style={{ left: `${pos}px` }}
             >
-              <span className="timelineRulerNotchText">{`${time.toFixed(
-                decimalPlaces
-              )}s`}</span>
+              <span className="timelineRulerNotchText">
+                {formatTimestamp(time, 2, 2, notchTime)}
+              </span>
             </li>
           ))}
         </ol>

src/components/timeline/TrackCustomMarkerGraph.js

@@ -7,6 +7,11 @@
 import * as React from 'react';
 import { InView } from 'react-intersection-observer';
 import { withSize } from 'firefox-profiler/components/shared/WithSize';
+import {
+  getStrokeColor,
+  getFillColor,
+  getDotColor,
+} from 'firefox-profiler/profile-logic/graph-color';
 import explicitConnect from 'firefox-profiler/utils/connect';
 import { bisectionRight } from 'firefox-profiler/utils/bisect';
 import { getCommittedRange } from 'firefox-profiler/selectors/profile';
@@ -17,28 +22,6 @@ import {
   TRACK_MARKER_DEFAULT_COLOR,
   TRACK_MARKER_LINE_WIDTH,
 } from 'firefox-profiler/app-logic/constants';
-import {
-  BLUE_50,
-  BLUE_60,
-  GREEN_50,
-  GREEN_60,
-  GREY_50,
-  GREY_60,
-  INK_50,
-  INK_60,
-  MAGENTA_50,
-  MAGENTA_60,
-  ORANGE_50,
-  ORANGE_60,
-  PURPLE_50,
-  PURPLE_60,
-  RED_50,
-  RED_60,
-  TEAL_50,
-  TEAL_60,
-  YELLOW_50,
-  YELLOW_60,
-} from 'photon-colors';
 
 import type {
   ThreadIndex,
@@ -48,7 +31,6 @@ import type {
   IndexIntoStringTable,
   MarkerSchema,
   CollectedCustomMarkerSamples,
-  MarkerGraphColor,
   MarkerGraphType,
   MarkerIndex,
   Marker,
@@ -101,65 +83,6 @@ function _calculateUnitValue(
   return scaled * 0.85;
 }
 
-function _getStrokeColor(color: MarkerGraphColor) {
-  switch (color) {
-    case 'magenta':
-      return MAGENTA_50;
-    case 'purple':
-      return PURPLE_50;
-    case 'blue':
-      return BLUE_50;
-    case 'teal':
-      return TEAL_50;
-    case 'green':
-      return GREEN_50;
-    case 'yellow':
-      return YELLOW_50;
-    case 'red':
-      return RED_50;
-    case 'orange':
-      return ORANGE_50;
-    case 'grey':
-      return GREY_50;
-    case 'ink':
-      return INK_50;
-    default:
-      throw new Error('Unexpected marker track stroke color: ' + color);
-  }
-}
-
-function _getFillColor(color: MarkerGraphColor) {
-  // Same as stroke color with transparency.
-  return _getStrokeColor(color) + '88';
-}
-
-function _getDotColor(color: MarkerGraphColor) {
-  switch (color) {
-    case 'magenta':
-      return MAGENTA_60;
-    case 'purple':
-      return PURPLE_60;
-    case 'blue':
-      return BLUE_60;
-    case 'teal':
-      return TEAL_60;
-    case 'green':
-      return GREEN_60;
-    case 'yellow':
-      return YELLOW_60;
-    case 'red':
-      return RED_60;
-    case 'orange':
-      return ORANGE_60;
-    case 'grey':
-      return GREY_60;
-    case 'ink':
-      return INK_60;
-    default:
-      throw new Error('Unexpected marker track stroke color: ' + color);
-  }
-}
-
 /**
  * This component controls the rendering of the canvas. Every render call through
  * React triggers a new canvas render. Because of this, it's important to only pass
@@ -225,7 +148,7 @@ class TrackCustomMarkerCanvas extends React.PureComponent<CanvasProps> {
         const samples = collectedSamples.numbersPerLine[graphIndex];
         // Draw the chart.
         //
-        ctx.strokeStyle = _getStrokeColor(color || TRACK_MARKER_DEFAULT_COLOR);
+        ctx.strokeStyle = getStrokeColor(color || TRACK_MARKER_DEFAULT_COLOR);
 
         const getX = (time) =>
           Math.round((time - rangeStart) * millisecondWidth);
@@ -297,9 +220,7 @@ class TrackCustomMarkerCanvas extends React.PureComponent<CanvasProps> {
               ctx.lineTo(firstX, deviceHeight);
 
               // The line from 4 to 1 will be implicitly filled in.
-              ctx.fillStyle = _getFillColor(
-                color || TRACK_MARKER_DEFAULT_COLOR
-              );
+              ctx.fillStyle = getFillColor(color || TRACK_MARKER_DEFAULT_COLOR);
               ctx.fill();
               ctx.closePath();
             }
@@ -606,7 +527,7 @@ class TrackCustomMarkerGraphImpl extends React.PureComponent<Props, State> {
         innerTrackHeight - unitValue * innerTrackHeight - halfLineWidth;
       // eslint-disable-next-line flowtype/no-weak-types
       const style: Object = { left, top };
-      style.backgroundColor = _getDotColor(color || TRACK_MARKER_DEFAULT_COLOR);
+      style.backgroundColor = getDotColor(color || TRACK_MARKER_DEFAULT_COLOR);
 
       if (marker.end) {
         let screenWidth = (width * (marker.end - marker.start)) / rangeLength;