Open Bug 1513529 Opened 2 years ago Updated 2 years ago

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

Categories

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

enhancement

Tracking

(Not tracked)

People

(Reporter: jdescottes, Unassigned)

References

(Blocks 1 open bug)

Details

(Whiteboard: remote-debugging-technical-debt)

Attachments

(1 file)

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.
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?
Flags: needinfo?(ntim.bugs)
(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.
Flags: needinfo?(ntim.bugs)
See Also: → 1418600
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.
(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.
(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.
Priority: -- → P3

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

See Also: 14186001519548

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

Whiteboard: remote-debugging-technical-debt
You need to log in before you can comment on or make changes to this bug.