1690357 - Stop using -moz-deck in security/manager/pki/resources/content/certManager.xhtml

Status: NEW

(Toolkit :: UI Widgets, enhancement, P3)

Description

[Mats Palmgren (inactive)]

Attachment: cert-manager-tabpanels

certManager.xhtml is using <tabpanels> which has display:-moz-deck by default.
It looks fairly straight-forward to make it use display:flex/grid instead...
I made a WIP that seems to work...

WDYT?

Comment 1

[Tim Nguyen :ntim]

(In reply to Mats Palmgren (:mats) from comment #0)

Created attachment 9200718 [details] [diff] [review]
cert-manager-tabpanels

certManager.xhtml is using <tabpanels> which has display:-moz-deck by default.
It looks fairly straight-forward to make it use display:flex/grid instead...
I made a WIP that seems to work...

WDYT?

The CSS grid/flex approach seems OK. Though since we're keeping <tabpanels> either way, I think we should probably focus on integrating this logic (adding the selected class/hiding panes) directly in the tabpanels custom element and the CSS into toolkit/content/xul.css. That can be done in bug 1689816. I might be able to provide a WIP patch soon-ish.

I didn't notice the possible flex="1" cleanups, so thanks for pointing that out!

Comment 2

[Mats Palmgren (inactive)]

I think we should probably focus on integrating this logic (adding the selected class/hiding panes) directly in the tabpanels custom element and the CSS into toolkit/content/xul.css

I could only find one other use of <tabpanels> though (apart from tests), in browser.xhtml, and that one probably requires a bit more attention for performance reasons so we might want to use something other than grid layout there. Like abs.pos. blocks for the panels.
But yeah, we can add the suggested styles here to xul.css and let each consumer override the styling as they see fit I guess.