From e5b271fe909787c848d962f16e0079b16f16a21d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Qu=C3=A8ze?= Date: Wed, 27 Sep 2023 20:16:36 +0200 Subject: [PATCH] Support colored power tracks. --- src/app-logic/constants.js | 2 + .../timeline/TrackCustomMarkerGraph.js | 95 ++----------------- src/components/timeline/TrackMemoryGraph.js | 10 +- src/components/timeline/TrackPower.css | 1 - src/components/timeline/TrackPowerGraph.js | 26 ++++- src/profile-logic/graph-color.js | 88 +++++++++++++++++ .../__snapshots__/TrackPower.test.js.snap | 2 +- src/types/markers.js | 15 +-- src/types/profile.js | 13 +++ 9 files changed, 143 insertions(+), 109 deletions(-) create mode 100644 src/profile-logic/graph-color.js diff --git a/src/app-logic/constants.js b/src/app-logic/constants.js index bb9971798c..8fb8a59b68 100644 --- a/src/app-logic/constants.js +++ b/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; diff --git a/src/components/timeline/TrackCustomMarkerGraph.js b/src/components/timeline/TrackCustomMarkerGraph.js index e97ec3736a..efb8cfc328 100644 --- a/src/components/timeline/TrackCustomMarkerGraph.js +++ b/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 { 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 { 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 { 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; diff --git a/src/components/timeline/TrackMemoryGraph.js b/src/components/timeline/TrackMemoryGraph.js index 4b077769ab..62bffc95c2 100644 --- a/src/components/timeline/TrackMemoryGraph.js +++ b/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 { 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. diff --git a/src/components/timeline/TrackPower.css b/src/components/timeline/TrackPower.css index 7ecd677585..09f616a1c2 100644 --- a/src/components/timeline/TrackPower.css +++ b/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; } diff --git a/src/components/timeline/TrackPowerGraph.js b/src/components/timeline/TrackPowerGraph.js index 2a8576c9ec..40845eda11 100644 --- a/src/components/timeline/TrackPowerGraph.js +++ b/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 { 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 { const top = innerTrackHeight - unitSampleCount * innerTrackHeight + lineWidth / 2; - return
; + return ( +
+ ); } render() { diff --git a/src/profile-logic/graph-color.js b/src/profile-logic/graph-color.js new file mode 100644 index 0000000000..74b40785f8 --- /dev/null +++ b/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); + } +} diff --git a/src/test/components/__snapshots__/TrackPower.test.js.snap b/src/test/components/__snapshots__/TrackPower.test.js.snap index cf0ff48b6b..a48d77c4f5 100644 --- a/src/test/components/__snapshots__/TrackPower.test.js.snap +++ b/src/test/components/__snapshots__/TrackPower.test.js.snap @@ -3,7 +3,7 @@ exports[`TrackPower draws a dot that matches the snapshot 1`] = `
`; diff --git a/src/types/markers.js b/src/types/markers.js index 2593fbe609..9d3aae7e5f 100644 --- a/src/types/markers.js +++ b/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 = {| diff --git a/src/types/profile.js b/src/types/profile.js index 034880a1c5..bcb3c6e18b 100644 --- a/src/types/profile.js +++ b/src/types/profile.js @@ -514,10 +514,23 @@ export type CounterSamplesTable = {| length: number, |}; +export type GraphColor = + | 'blue' + | 'green' + | 'grey' + | 'ink' + | 'magenta' + | 'orange' + | 'purple' + | 'red' + | 'teal' + | 'yellow'; + export type Counter = {| name: string, category: string, description: string, + color?: GraphColor, pid: Pid, mainThreadIndex: ThreadIndex, sampleGroups: $ReadOnlyArray<{|