1911733 - Use light-dark() in variables.css

Status: RESOLVED FIXED

(DevTools :: General, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

At the moment, we 2 rules, on for light theme, the other for dark theme, in which we declare hundreds of CSS variables. The CSS variable definition are duplicated, and adding one variable mean adding it to both rules, adding the same comment if one is needed. Since there are a lot of variable, editing one in light mode, then looking for the one in dark mode is a bit cumbersome.
Using light-dark() will allow us to only declare variables in one place

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1911733 - [devtools] Use light-dark in variables.css. r=#devtools-reviewers.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cfa6ec757a97
[devtools] Use light-dark in variables.css. r=devtools-reviewers,bomsy.

Comment 3

[Norisz Fay [:noriszfay]]

Backed out for causing multiple dt failures

Backout link

Push with failures

Failure log 1 // Failure log 2 // Failure log 3 // Failure log 4

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Those tests are failing because with my patch, getColor is broken https://searchfox.org/mozilla-central/rev/c4966e1c1e6a8cb38c15a27693e8ecd63082055e/devtools/client/shared/theme.js#71-86

const getColor = (exports.getColor = (type, theme) => {
  const themeName = theme || getTheme();
  let themeFile = getThemeFile(themeName);
  let match = themeFile.match(new RegExp("--theme-" + type + ": (.*);"));
  const variableMatch = match ? match[1].match(/var\((.*)\)/) : null;

  // Check if the match is a color variable and retrieve the value of the color variable
  // if needed
  if (variableMatch) {
    themeFile = getThemeFile("root");
    match = themeFile.match(new RegExp(`${variableMatch[1]}: (.*);`));
  }

  // Return the appropriate variable in the theme, or otherwise, null.
  return match ? match[1] : null;
});

This is used to send colors to the server so it can generate screenshots with the right colors (e.g. for Font preview)

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2e869929ad46
[devtools] Use light-dark in variables.css. r=devtools-reviewers,bomsy.

Comment 6

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/2e869929ad46