1075272 - highlight selected job using a scale transform rather than a font size change

Status: VERIFIED FIXED

(Tree Management :: Treeherder, defect, P2)

Description

[Cameron McCormack (:heycam)]

If you click on a job, it gets a thicker border and an increased font size.  This changes the height of the whole line and the wrapping of the line.  To avoid this, we could do a "transform: scale(1.5)" or something on the job instead.

Comment 1

[Ed Morley [:emorley]]

Good idea :-)

Comment 2

[Jonathan French (:jfrench)]

Attachment: transform Jobs UI Choice 1

I have something working in basic form (attached).

Given the way transform appears to work preventing the unwanted row shift, a selected button will overlay adjacent jobs. My question with this attachment is for Sheriff preference on the draw of the selected job element. Either a) transparent (easier, sort of the default behavior with the change) or b) opaque (I simulate the blended white+color with an opaque equivalent).

Note that with Opaque b) it will block out adjacent jobs. This seems particularly problematic if you had several failures and one was a selected multi-character failure and the adjacent failures were single characters. You wouldn't see them and you have to somehow know they are there, and use the navigation keys to select them, or click "away" and then click back on the adjacent failure.

With Transparent a) you can at least hover and see it get selected through the currently selected job, and click it.

Let me know which you prefer and I'll see if I can proceed from there and try to sort out some pinboard problems which are also introduced by the change.

Comment 3

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 8503769 [details]
transform Jobs UI Choice 1

I think opaque looks better personally. For selecting multiple jobs, I'd forsee either using the Pin All button or the 'n' key anyway, so mouse clicking doesn't seem like a big issue.

Comment 4

[Ed Morley [:emorley]]

Comment on attachment 8503769 [details]
transform Jobs UI Choice 1

I agree with Ryan that opaque looks better.
That said, I'd be interested to see a before/after for this patch comparing to current behaviour.

Ideally we wouldn't obscure other jobs at all - but with the intentional design choice to make failures more obvious (by surrounding them with a border even if not selected), I can't off the top of my head think of a better way of emphasizing the selected jobs. We could try alternative colours etc, but I'm not sure that would be any better...

Comment 5

[Jonathan French (:jfrench)]

Thanks guys. I spoke with Ed also in channel, and I'm working on the opaque version now.

Comment 6

[Jonathan French (:jfrench)]

I have the opaque part done. The job list looks great. But the transform causes some mayhem in the pinboard, which I either have to compensate for, or bypass. I am still looking at that part.

Comment 7

[Jonathan French (:jfrench)]

Attachment: treeherder-ui-PR#230

Please see the above PR for review and status.

Comment 8

[Treeherder GitHub Bugbot]

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

https://github.com/mozilla/treeherder-ui/commit/ec26c315cea4ccb48141a71c242319cd487e4c24
Bug 1075272 - Highlight jobs using scale transform to reduce line shift

https://github.com/mozilla/treeherder-ui/commit/bff52796b1ee29642bf8a48dfd2e35702d5daf55
Merge pull request #230 from tojonmz/job-scale

Bug 1075272 - Highlight jobs using scale transform to reduce line shift

Comment 9

[Jonathan French (:jfrench)]

Verified fixed and working correctly on dev/stage.

Comment 10

[Treeherder GitHub Bugbot]

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

https://github.com/mozilla/treeherder/commit/f865a4a0c576c0c076482a4b74a91a600c989bf3
Bug 1075272 - Highlight jobs using scale transform to reduce line shift

https://github.com/mozilla/treeherder/commit/bb21760b8f48d772a8e32ddf0ff5cd257b8ca465
Merge pull request #230 from tojonmz/job-scale

Bug 1075272 - Highlight jobs using scale transform to reduce line shift