1915857 - Refactor getThemeColorAsRgba

Status: RESOLVED FIXED

(DevTools :: Netmonitor, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

This function takes a (color) variable name parse it and return rgba tuple with adjusted opacity https://searchfox.org/mozilla-central/rev/cb5faf5dd5176494302068c553da97b4d08aa339/devtools/client/netmonitor/src/widgets/WaterfallBackground.js#145-160

/**
 * Retrieve a color defined for the provided theme as a rgba array. The alpha channel is
 * forced to the waterfall constant TICKS_COLOR_OPACITY.
 *
 * @param {String} colorName
 *        The name of the theme color
 * @param {String} theme
 *        The name of the theme
 * @return {Array} RGBA array for the color.
 */
getThemeColorAsRgba(colorName, theme) {
  const colorStr = getColor(colorName, theme);
  const color = new colorUtils.CssColor(colorStr);
  const { r, g, b } = color.getRGBATuple();
  return [r, g, b, REQUESTS_WATERFALL.TICKS_COLOR_OPACITY];
}

We can remove the dependency on getColor and have the opacity handled directly in CSS

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1915857 - [devtools] Compute waterfall ticks color in CSS. r=#devtools-reviewers.

We define the tick colors in CSS, using relative color syntax to
add the alpha we want.
We set the highlighter-* variables as registered properties so
the computed value will be the end color, even if we use
the light-dark function in the initial value.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/93ae1c65be47
[devtools] Compute waterfall ticks color in CSS. r=devtools-reviewers,ochameau.

Comment 3

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/93ae1c65be47