1070200 - Treeherder UI elements not properly resized in Firefox 34+

Status: RESOLVED FIXED

(Tree Management :: Treeherder, defect, P3)

Description

[William Lachance (:wlach)]

Because of bug 1032922, the flexbox "auto" directive doesn't work as it used to. We need a solution that will work both with older browsers (at least for now) and new ones.

Comment 1

[William Lachance (:wlach)]

Attachment: Fix sizing of elements on Firefox 34+

This fixes things for me. Tested on Firefox release and Nightly.

Daniel: Could you give me feedback on this approach? I based it on your suggestions in bug 1057047. I'm not yet a flexbox expert so would appreciate any advice you could give me on improving things.

Comment 2

[Daniel Holbert [:dholbert]]

Looks good, but one suggestion for making this more concise -- there are actually shorthand keywords that work in both old and new Firefox, for the "flex" values that you're using here.

- "flex: none" expands to "0 0 auto" in old versions, & to "0 0 main-size" in new versions.
- "flex: auto" expands to "1 1 auto" in old versions, & to "1 1 main-size" in new versions.

So, the behavior of the standalone keywords "none" and "auto" should be the same in old and new versions -- which means you won't need two separate lines.

These shorthand keywords have existed since the early days of the CSS flexbox spec, and the editors want to make sure their behavior doesn't change (since they're the among the "recommended" ways to specify flexibility).  So, they should have good backwards- and forwards-compatibility. (I'd expect that they also should work in the "-webkit-flex" declaration as well; though maybe you want to make & test that change separately.)

Comment 3

[William Lachance (:wlach)]

(In reply to Daniel Holbert [:dholbert] from comment #2)
> Looks good, but one suggestion for making this more concise -- there are
> actually shorthand keywords that work in both old and new Firefox, for the
> "flex" values that you're using here.
> 
> - "flex: none" expands to "0 0 auto" in old versions, & to "0 0 main-size"
> in new versions.
> - "flex: auto" expands to "1 1 auto" in old versions, & to "1 1 main-size"
> in new versions.
> 
> So, the behavior of the standalone keywords "none" and "auto" should be the
> same in old and new versions -- which means you won't need two separate
> lines.
> 
> These shorthand keywords have existed since the early days of the CSS
> flexbox spec, and the editors want to make sure their behavior doesn't
> change (since they're the among the "recommended" ways to specify
> flexibility).  So, they should have good backwards- and
> forwards-compatibility. (I'd expect that they also should work in the
> "-webkit-flex" declaration as well; though maybe you want to make & test
> that change separately.)

Thanks Daniel! I did what you suggested and it worked great on all of Firefox 32, Firefox Nightly, and Chromium.

Comment 4

[Treeherder GitHub Bugbot]

Commit pushed to master at https://github.com/mozilla/treeherder-ui

https://github.com/mozilla/treeherder-ui/commit/9b24205a8e558d640e5085af7668c3e48d0f4507
Bug 1070200 - Fixing size of elements on Firefox 34+;r=jeads

Comment 5

[Treeherder GitHub Bugbot]

Commit pushed to master at https://github.com/mozilla/treeherder-ui

https://github.com/mozilla/treeherder-ui/commit/ecaf663a1d4e59a036a63b7084ea0014101ddb18
Merge pull request #197 from mozilla/bug-1070200-redo

Bug 1070200 redo

Comment 6

[Treeherder GitHub Bugbot]

Commits pushed to master at https://github.com/mozilla/treeherder

https://github.com/mozilla/treeherder/commit/8848443d0e7aa607fc251bb511d3b46df9d4449a
Bug 1070200 - Fixing size of elements on Firefox 34+;r=jeads

https://github.com/mozilla/treeherder/commit/8e918f68730116c1cce425623874c6c29e4ea74f
Merge pull request #197 from mozilla/bug-1070200-redo

Bug 1070200 redo