1231347 - Don't parse stylesheet to get theme variables in theme.js, use computed styles instead

Status: NEW

(DevTools :: General, defect)

Description

[Patrick Brosset <:pbro>]

In /devtools/client/shared/theme.js, we expose an API to javascript that allows consumers to retrieves values of theme variables defined in our CSS variables file.

To do this, we load the CSS file from disk and parse it.

This bug is about changing this to use computed styles instead.
For example, if you have a reference to any toolbox document object, you could list all variables doing this:

var style = getComputedStyle(doc.documentElement);
for(var i = 0; i < style.length; i ++) {
  if (style[i].substring(0, 2) === "--") {
    var name = style[i];
    var value = style.getPropertyValue(style[i]));
  }
}

If we do this though, we'd have to change all consumers of this API to make sure they pass a reference to a document.

Comment 1

[Patrick Brosset <:pbro>]

Also, it'd be great if we could use this same API to retrieve CSS variables defined in other CSS files (like in the animation-inspector, we have a few CSS variables defined and it'd be nice to be able to retrieve them too).