[ui] Fix garish colors in slice tracks.
Bug: 312417373
Change-Id: I314c88e6e5928b4b6fd07937e328ce8273c2fa40
diff --git a/ui/src/common/colorizer.ts b/ui/src/common/colorizer.ts
index fec202d..3c20520 100644
--- a/ui/src/common/colorizer.ts
+++ b/ui/src/common/colorizer.ts
@@ -13,6 +13,7 @@
// limitations under the License.
import {hsl} from 'color-convert';
+import {hsluvToRgb} from 'hsluv';
import {clamp} from '../base/math_utils';
import {hash} from '../common/hash';
@@ -172,13 +173,6 @@
return cachedHsluvToHex(hue, saturation, newLightness);
}
-export function colorToStr(color: Color) {
- if (color.a !== undefined) {
- return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${color.a})`;
- }
- return `hsl(${color.h}, ${color.s}%, ${color.l}%)`;
-}
-
export function colorCompare(x: Color, y: Color): number {
return (x.h - y.h) || (x.s - y.s) || (x.l - y.l);
}
@@ -270,7 +264,7 @@
// brightness.
export function colorIsLight(color: Color): boolean {
// YIQ calculation from https://24ways.org/2010/calculating-color-contrast
- const [r, g, b] = colorToRGB(color);
+ const [r, g, b] = hsluvToRgb([color.h, color.s, color.l]);
const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
return (yiq >= 128);
}
diff --git a/ui/src/frontend/base_slice_track.ts b/ui/src/frontend/base_slice_track.ts
index 6f321ce..cd3ccc3 100644
--- a/ui/src/frontend/base_slice_track.ts
+++ b/ui/src/frontend/base_slice_track.ts
@@ -34,7 +34,6 @@
colorIsLight,
colorLighten,
colorsEqual,
- colorToStr,
UNEXPECTED_PINK_COLOR,
} from '../common/colorizer';
import {Selection, SelectionKind} from '../common/state';
@@ -431,7 +430,8 @@
for (const slice of vizSlicesByColor) {
if (slice.color !== lastColor) {
lastColor = slice.color;
- ctx.fillStyle = colorToStr(slice.color);
+ const {h, s, l} = slice.color;
+ ctx.fillStyle = cachedHsluvToHex(h, s, l);
}
const y = padding + slice.depth * (sliceHeight + rowSpacing);
if (slice.flags & SLICE_FLAGS_INSTANT) {
@@ -477,7 +477,7 @@
// Slices are sorted by color and light tint is a pure function of slice
// color so we should be able to re-use colors quite frequently
if (prevColor === undefined || !colorsEqual(color, prevColor)) {
- ctx.fillStyle = colorToStr(color);
+ ctx.fillStyle = cachedHsluvToHex(color.h, color.s, color.l);
prevColor = color;
}
diff --git a/ui/src/frontend/slice_track_base.ts b/ui/src/frontend/slice_track_base.ts
index 881e6c0..37c2ec8 100644
--- a/ui/src/frontend/slice_track_base.ts
+++ b/ui/src/frontend/slice_track_base.ts
@@ -18,7 +18,6 @@
import {cropText, drawIncompleteSlice} from '../common/canvas_utils';
import {
colorForThreadIdleSlice,
- colorToStr,
getColorForSlice,
} from '../common/colorizer';
import {HighPrecisionTime} from '../common/high_precision_time';
@@ -146,7 +145,7 @@
let color: string;
if (colorOverride === undefined) {
- color = colorToStr(colorObj);
+ color = cachedHsluvToHex(colorObj.h, colorObj.s, colorObj.l);
} else {
color = colorOverride;
}
diff --git a/ui/src/tracks/chrome_scroll_jank/event_latency_track.ts b/ui/src/tracks/chrome_scroll_jank/event_latency_track.ts
index 498591e..fcd0b5d 100644
--- a/ui/src/tracks/chrome_scroll_jank/event_latency_track.ts
+++ b/ui/src/tracks/chrome_scroll_jank/event_latency_track.ts
@@ -84,6 +84,18 @@
};
}
+ // TODO(stevegolton): The janky event color should be assigned in rowToSlice.
+ // For example:
+
+ // rowToSlice(row: NamedSliceRow): Slice {
+ // const baseSlice = super.rowToSlice(row);
+ // if (baseSlice.title === JANKY_LATENCY_NAME) {
+ // return {...baseSlice, baseColor: RED_COLOR};
+ // } else {
+ // return baseSlice;
+ // }
+ // }
+
onUpdatedSlices(slices: EventLatencyTrackTypes['slice'][]) {
for (const slice of slices) {
const currentSelection = globals.state.currentSelection;
diff --git a/ui/src/tracks/chrome_scroll_jank/jank_colors.ts b/ui/src/tracks/chrome_scroll_jank/jank_colors.ts
index 704819e..f556f7d 100644
--- a/ui/src/tracks/chrome_scroll_jank/jank_colors.ts
+++ b/ui/src/tracks/chrome_scroll_jank/jank_colors.ts
@@ -15,13 +15,13 @@
import {Color} from '../../common/colorizer';
export const RED_COLOR: Color = {
- h: 196,
- s: 30,
- l: 58,
+ h: 7,
+ s: 100,
+ l: 46,
};
export const DEEP_RED_COLOR: Color = {
- h: 136,
- s: 8,
- l: 8,
+ h: 11,
+ s: 100,
+ l: 32,
};
