948713 - Try using multi-line flexbox for PanelUI grid layout

Status: RESOLVED INVALID

(Firefox :: Toolbars and Customization, defect)

Description

[Mike Conley (:mconley) (:⚙️)]

I believe we're currently using an unholy mix of XUL flex and CSS3 flex in order to make the Australis PanelUI grid happen.

Recently, bug 702508, giving us multi-line CSS3 flexboxes. I *think* we can leverage that to simplify the grid some - or at the very least, swap out some XUL flex-y business.

It's worth checking to see if this could fix the alignment issue in bug 940379, and bug 924050, since I *think* we chalked that up to a XUL flex + CSS3 flex = confusion problem.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

Here's what multi-line flexbox can do:

http://blog.dholbert.org/2013/12/multi-line-flexbox-support-in-nightly.html

Looks familiar.

Comment 2

[Mike Conley (:mconley) (:⚙️)]

Just from local fiddling with DOMi, setting display: flex and flex-wrap: wrap #PanelUI-contents *does* seem to fix the Downloads button issue...

It introduces other issues though - like massive elements in the panel when in customize mode, and the wide widgets wrapping around onto two lines, but this might be worth investigating...

Comment 3

[:Gijs (he/him)]

Jared, the reason we're looking at this at all is the issues with some buttons (like the downloads button post-overlay-load, and type="menu-button" buttons, and the placeholders - all of which are PN rather than P-) not being aligned correctly in the panel. We've all looked at that and can't figure out what's causing this, and it's possible switching to "proper" multiline-flex might help fix this, so I'm not convinced this should be P-. Do you disagree?

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

I marked this as P- because we haven't determined yet if this will fix the issues. It still appears to be in more of an investigative phase.

Comment 5

[:Gijs (he/him)]

No more grid layout, so we can close this.