1513529 - [remote-dbg-next] Share CSS variables between about:debugging and other about: pages

Status: NEW

(DevTools :: about:debugging, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

Discussed with :ntim about CSS for about:pages during the all-hands, and it seems there is work ongoing to allow the about:pages to support light and dark theme.

It would be nice if about:debugging also had this feature, and this would be easier to handle if we started sharing CSS variables between all the about:pages. We can't directly reuse common.css as it is now, because the selectors assume a certain markup which is not compatible with about:debugging.

Comment 1

[Julian Descottes [:jdescottes]]

ntim: can we have a look at the patches for light/dark theme support for about:pages? Would you be interested in extracting the relevant colors to a separate CSS variables file?

Comment 2

[Tim Nguyen :ntim]

(In reply to Julian Descottes [:jdescottes][:julian] from comment #0)
> Discussed with :ntim about CSS for about:pages during the all-hands, and it
> seems there is work ongoing to allow the about:pages to support light and
> dark theme.

I'm not planning to move this forward anytime soon, but bug 1418600 is what I'm planning atm once I have time to resume the work.

Comment 3

[Tim Nguyen :ntim]

One good reason to use common.inc.css is that about:debugging can benefit from the photon updates we're making to it: bug 1392389. One component that's already out of sync in the new about:debugging are buttons, the buttons in about:preferences use the photon styles, while the new about:debugging doesn't.

Comment 4

[Julian Descottes [:jdescottes]]

(In reply to Tim Nguyen :ntim (please use needinfo?) from comment #3)
> One good reason to use common.inc.css is that about:debugging can benefit
> from the photon updates we're making to it: bug 1392389. One component
> that's already out of sync in the new about:debugging are buttons, the
> buttons in about:preferences use the photon styles, while the new
> about:debugging doesn't.

I believe I already explained this to you, but common.css is too often using markup based selectors. It just so happens that the current about:debugging sidebar looks broken today because it loads common.css but doesn't use the same markup as about:preferences.

While I agree we need to share styles, reusing common.css is not possible with the current selectors.

Comment 5

[Julian Descottes [:jdescottes]]

Attachment: aboutdebugging_broken_after_commoncss_change.png

Comment 6

[Tim Nguyen :ntim]

(In reply to Julian Descottes [:jdescottes][:julian] from comment #4)
> (In reply to Tim Nguyen :ntim (please use needinfo?) from comment #3)
> > One good reason to use common.inc.css is that about:debugging can benefit
> > from the photon updates we're making to it: bug 1392389. One component
> > that's already out of sync in the new about:debugging are buttons, the
> > buttons in about:preferences use the photon styles, while the new
> > about:debugging doesn't.
> 
> I believe I already explained this to you, but common.css is too often using
> markup based selectors. It just so happens that the current about:debugging
> sidebar looks broken today because it loads common.css but doesn't use the
> same markup as about:preferences.

Yeah, that's being covered by bug 1512887. Regressions like these usually don't happen, it's simply a busy period right now with a lot of theme changes (XBL stylesheets getting replaced, photon changes, ...). I can definitively understand the frustration though. 

The category style definitively needs to work for HTML (https://hg.mozilla.org/integration/fx-team/rev/3639f5216ac0) and it's likely a bug if it doesn't.

Comment 7

[Tim Nguyen :ntim]

Still at prototype stage, but the work has been moved to bug 1519547.

Comment 8

[Julian Descottes [:jdescottes]]

filter on: remote-debugging-m2-reserve-cleanup