1397421 - Expose devtools theme properties through WebExtensions

Status: NEW

(WebExtensions :: Developer Tools, enhancement, P5)

Description

[keith]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Steps to reproduce:

I mentioned this in the #addons IRC channel and was asked to raise a bug for it so it can be put into the "[design-decision-needed]" whiteboard.

WebExtensions can expose the current devtools theme name through `browser.devtools.theme`. I would like to investigate the idea of exposing some of the theme values, such as colours, fonts etc. so that devtools panels can be styled to match the look of the host.

If possible, I'd like to be able to apply styles using CSS Custom properties — like this:

body {
  font-family: var(--devtools-font-family);
  font-size: var(--devtools-font-size);
  background-color: var(--devtools-background-color);
  color: var(--devtools-text-color);
}
.td {
  padding: var(--devtools-spacing-unit);
}
.tr:nth-child(2n) {
  background-color: var(--devtools-background-color-alt);
}

Comment 1

[Caitlin Neiman [:caitmuenster]]

Hi Keith, this has been added to the agenda for the November 14 WebExtensions APIs triage meeting. Would you be able to join us? 

Here’s a quick overview of what to expect at the triage: 

* We normally spend 5 minutes per bug
* The more information in the bug, the better
* The goal of the triage is to give a general thumbs up or thumbs down on a proposal; we won't be going deep into implementation details

Relevant Links: 

* Wiki for the meeting: https://wiki.mozilla.org/Add-ons/Contribute/Triage
* Meeting agenda: https://docs.google.com/document/d/1g3RMfKZ3671NcusMqkoOiKwfPekRe-VI7Rzqxo6F_Ao/edit#
* Vision doc for WebExtensions: https://wiki.mozilla.org/WebExtensions/Vision

Comment 2

[keith]

Sorry I missed the triage meeting. What was the outcome?

Comment 3

[keith]

Could this be rolled into https://drafts.csswg.org/css-env-1/?

Comment 4

[keith]

Is it possible to get an update on the status of this? Is it on the roadmap?