1765877 - TreeHerder row gets shorter when you click on a job in that row and its letter gets bigger

Status: RESOLVED FIXED

(Tree Management :: Treeherder: Frontend, defect)

Description

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Attachment: screencast showing bug

STR:

1. On a TreeHerder push, look for some platform whose title & job-list all fit on a single line (no wrapping required).
2. Click to select one of the jobs (one of the colorful letters) for that platform.

ACTUAL RESULTS:
The row gets a little bit shorter (as the job letter grows larger). This shifts the whole rest of the results (for all subsequent platforms) and even subsequent pushes up a little bit as well.

EXPECTED RESULTS: No such change in row-size; the layout should ideally remain stable, and unrelated pieces of the UI shouldn't move around.

This happens in Firefox as well as Chrome, so I don't think it's a browser bug.

Comment 1

[Daniel Holbert [:dholbert] (PTO until 2/24)]

It looks like this has to do with the .btn-lg-xform class, specifically this part:

.btn-lg-xform {
  margin: -2px 0px !important;
  border: 2px solid;

https://treeherder.mozilla.org/assets/index.e17ff93f.css

The negative margin there is what's making the row shorter.

tl;dr: I think we want -1px rather than -2px in the margin declaration. I get good stable-layout results with that change (aside from a little jumpiness due to a CSS transition)

I suspect the intent here was for the -2px margin to exactly cancel out the 2px border. This seems reasonable, but in fact we're overcompensating because this element already has a 1px-thick-border in its default/unselected state -- that comes from here:

.btn {
  [...]
  border: 1px solid transparent;

(This CSS shows up in DevTools but I'm not sure precisely where it actually lives; DevTools tells me the URL for this is https://stackpath.bootstrapcdn.com/bootstrap/scss/_buttons.scss but that's a 404 so I think this is just a broken source-mapped URL; the real CSS must be bundled in somewhere else)

So we're going from a 1px-wide transparent border to a 2px-wide visible border, and we're compensating for that change by adding -2px of margin on all sides, which is too much negative margin to account for the 1px difference in border thickness.

Comment 2

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Thanks for the report. A selected task has a larger font size for its symbol than the other tasks. With the decrease to -1px here I still get an increase in the line height.

Comment 3

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Attachment: screencast showing potential/partial fix on dholbert's system

(In reply to Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout) from comment #2)

Thanks for the report. A selected task has a larger font size for its symbol than the other tasks. With the decrease to -1px here I still get an increase in the line height.

Odd; if I decrease to -1px, it seems to fix the issue locally for me.

Maybe you're seeing a combination with bug 1766520 or some other unrelated issue?

Here's a screencast of me demonstrating the fix. Before I started capturing this screencast, I changed the margin to -1px in devtools, at https://treeherder.mozilla.org/jobs?repo=autoland&revision=aa9e91285699bf36e245f92810cb0da6d3a72873&searchStr=Linux%2Cx64 . Then (as shown in the screencast) I click the Linux "Bo" tasks, and as you can see, the height/positioning does not change. Then, in the second half of the video, I restore the -2px margin (TreeHerder's current chosen value) and you can see the issue come back.

Note: before capturing the screencast, I also turned off all transitions (unchecking the boxes for several transition declarations in devtools) for this button, because otherwise there's a short bit of layout-instability while the text gets resized.

Comment 4

[Tooru Fujisawa [:arai]]

to my understanding, the issue here is that the negative margin is used to address the extra border.
can we use outline instead? that doesn't affect the size, and the same effect can be achieved without the negative margin hack.

Comment 5

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/treeherder/pull/7493