1162725 - Make .th-content "flex:1" instead of "flex:auto"

Status: RESOLVED FIXED

(Tree Management :: Treeherder, defect, P2)

Description

[Daniel Holbert [:dholbert]]

Right now, .th-content has "flex:auto", which means we have to reflow it twice (as discussed in bug 1159819 comment 1).

We don't really care about its auto-size, though, because it's scrollable.  So we should just make it "flex:1" so that it absorbs free space without needing to bother measuring its auto-height.

This gives us a decent speedup, per bug 1159819 comment 2.

Comment 1

[Daniel Holbert [:dholbert]]

wlach, perhaps you take this, or farm it out to someone?  (One-liner change, should be pretty easy.)

Comment 2

[William Lachance (:wlach)]

Attachment: Use flex: 1 with treeherder content

Let's just fix this, since it's so simple and sheriffs have been asking for a more responsive UI.

More just asking for a rubber stamp here, the details are kind of opaque to me but I can confirm this improves the speed of loading 50 results.

Comment 3

[Ed Morley [:emorley]]

Comment on attachment 8603021 [details] [review]
Use flex: 1 with treeherder content

\o/ :-D

Comment 4

[Treeherder GitHub Bugbot]

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

https://github.com/mozilla/treeherder-ui/commit/4972b6c5021080c662dd9e158d1b09cdb2cbb193
Bug 1162725 - Use flex: 1 with treeherder content

Prevents unnecessary reflows

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to William Lachance (:wlach) from comment #2)
> More just asking for a rubber stamp here, the details are kind of opaque to
> me but I can confirm this improves the speed of loading 50 results.

If it clarifies things:

* "flex:auto;" (combined with "width|height:auto") means "start me at my auto-size, and then cooperatively grow/shrink from there to fill the container".

* "flex:1" means "start me at 0, and then grow/shrink from there to fill the container"

These produce different results if there are multiple flexible items.

But if there's only one flexible thing (as is the case here), they effectively mean the same thing.  th-content will always get all of the extra space, no matter where we start it flexing from, since it's the only thing that can eat up free space.

So, the styles are equivalent. And the first is less efficient, since it asks that we measure the auto-height of th-content before we do any flexing.  (The second just lets us start at 0 and not bother with the measuring.)

(It's possible we could add an optimization in Gecko to catch this case and skip measurement-that-will-prove-unnecessary.)

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #5)
> (It's possible we could add an optimization in Gecko to catch this case and
> skip measurement-that-will-prove-unnecessary.)

(I filed bug 1162786 with some more details on this possible optimization, btw.)

Comment 7

[Treeherder GitHub Bugbot]

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

https://github.com/mozilla/treeherder/commit/e5cc40874bca4d2b98b89b263660199ee5fa9314
Bug 1162725 - Use flex: 1 with treeherder content

Prevents unnecessary reflows