Support colored power tracks

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/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;

src/components/timeline/TrackMemoryGraph.js

@@ -8,6 +8,10 @@ import * as React from 'react';
 import { InView } from 'react-intersection-observer';
 import { Localized } from '@fluent/react';
 import { withSize } from 'firefox-profiler/components/shared/WithSize';
+import {
+  getStrokeColor,
+  getFillColor,
+} from 'firefox-profiler/profile-logic/graph-color';
 import explicitConnect from 'firefox-profiler/utils/connect';
 import {
   formatBytes,
@@ -20,9 +24,9 @@ import {
   getProfileInterval,
 } from 'firefox-profiler/selectors/profile';
 import { getThreadSelectors } from 'firefox-profiler/selectors/per-thread';
-import { ORANGE_50 } from 'photon-colors';
 import { Tooltip } from 'firefox-profiler/components/tooltip/Tooltip';
 import { EmptyThreadIndicator } from './EmptyThreadIndicator';
+import { TRACK_MEMORY_COLOR } from 'firefox-profiler/app-logic/constants';
 
 import type {
   CounterIndex,
@@ -139,8 +143,8 @@ class TrackMemoryCanvas extends React.PureComponent<CanvasProps> {
 
       ctx.lineWidth = deviceLineWidth;
       ctx.lineJoin = 'bevel';
-      ctx.strokeStyle = ORANGE_50;
-      ctx.fillStyle = '#ff940088'; // Orange 50 with transparency.
+      ctx.strokeStyle = getStrokeColor(TRACK_MEMORY_COLOR);
+      ctx.fillStyle = getFillColor(TRACK_MEMORY_COLOR);
       ctx.beginPath();
 
       // The x and y are used after the loop.

src/components/timeline/TrackPower.css

@@ -21,6 +21,5 @@
   border-radius: 3px;
   margin-top: -3px;
   margin-left: -3px;
-  background-color: var(--grey-50);
   pointer-events: none;
 }

src/components/timeline/TrackPowerGraph.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 {
@@ -15,10 +20,10 @@ import {
   getProfileInterval,
 } from 'firefox-profiler/selectors/profile';
 import { getThreadSelectors } from 'firefox-profiler/selectors/per-thread';
-import { GREY_50 } from 'photon-colors';
 import { Tooltip } from 'firefox-profiler/components/tooltip/Tooltip';
 import { TooltipTrackPower } from 'firefox-profiler/components/tooltip/TrackPower';
 import { EmptyThreadIndicator } from './EmptyThreadIndicator';
+import { TRACK_POWER_DEFAULT_COLOR } from 'firefox-profiler/app-logic/constants';
 
 import type {
   CounterIndex,
@@ -126,8 +131,10 @@ class TrackPowerCanvas extends React.PureComponent<CanvasProps> {
 
       ctx.lineWidth = deviceLineWidth;
       ctx.lineJoin = 'bevel';
-      ctx.strokeStyle = GREY_50;
-      ctx.fillStyle = '#73737388'; // Grey 50 with transparency.
+      ctx.strokeStyle = getStrokeColor(
+        counter.color || TRACK_POWER_DEFAULT_COLOR
+      );
+      ctx.fillStyle = getFillColor(counter.color || TRACK_POWER_DEFAULT_COLOR);
       ctx.beginPath();
 
       const getX = (i) =>
@@ -488,7 +495,18 @@ class TrackPowerGraphImpl extends React.PureComponent<Props, State> {
     const top =
       innerTrackHeight - unitSampleCount * innerTrackHeight + lineWidth / 2;
 
-    return <div style={{ left, top }} className="timelineTrackPowerGraphDot" />;
+    return (
+      <div
+        style={{
+          left,
+          top,
+          backgroundColor: getDotColor(
+            counter.color || TRACK_POWER_DEFAULT_COLOR
+          ),
+        }}
+        className="timelineTrackPowerGraphDot"
+      />
+    );
   }
 
   render() {

src/profile-logic/graph-color.js

@@ -0,0 +1,88 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+// @flow
+
+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 { GraphColor } from 'firefox-profiler/types';
+
+export function getStrokeColor(color: GraphColor) {
+  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 track color: ' + color);
+  }
+}
+
+export function getFillColor(color: GraphColor) {
+  // Same as stroke color with transparency.
+  return getStrokeColor(color) + '88';
+}
+
+export function getDotColor(color: GraphColor) {
+  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 track color: ' + color);
+  }
+}

src/test/components/__snapshots__/TrackPower.test.js.snap

@@ -3,7 +3,7 @@
 exports[`TrackPower draws a dot that matches the snapshot 1`] = `
 <div
   class="timelineTrackPowerGraphDot"
-  style="left: 15px; top: 24.872px;"
+  style="left: 15px; top: 24.872px; background-color: rgb(74, 74, 79);"
 />
 `;
 

src/types/markers.js

@@ -10,6 +10,7 @@ import type {
   IndexIntoStringTable,
   Tid,
   Pid,
+  GraphColor,
 } from './profile';
 import type { ObjectMap } from './utils';
 
@@ -89,23 +90,11 @@ export type MarkerDisplayLocation =
   // TODO - This is not supported yet.
   | 'stack-chart';
 
-export type MarkerGraphColor =
-  | 'blue'
-  | 'green'
-  | 'grey'
-  | 'ink'
-  | 'magenta'
-  | 'orange'
-  | 'purple'
-  | 'red'
-  | 'teal'
-  | 'yellow';
-
 export type MarkerGraphType = 'bar' | 'line' | 'line-filled';
 export type MarkerGraph = {|
   key: string,
   type: MarkerGraphType,
-  color?: MarkerGraphColor,
+  color?: GraphColor,
 |};
 
 export type MarkerSchema = {|