Closed Bug 1075272 Opened 5 years ago Closed 5 years ago

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

Categories

(Tree Management :: Treeherder, defect, P2)

defect

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: heycam, Assigned: jfrench)

References

()

Details

Attachments

(2 files)

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.
Good idea :-)
Priority: -- → P2
Assignee: nobody → tojonmz
Status: NEW → ASSIGNED
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.
Attachment #8503769 - Flags: review-
Attachment #8503769 - Flags: feedback?(ryanvm)
Attachment #8503769 - Flags: feedback?(emorley)
Attachment #8503769 - Flags: review-
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.
Attachment #8503769 - Flags: feedback?(ryanvm)
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...
Attachment #8503769 - Flags: feedback?(emorley)
Thanks guys. I spoke with Ed also in channel, and I'm working on the opaque version now.
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.
Attached file treeherder-ui-PR#230
Please see the above PR for review and status.
Attachment #8505063 - Flags: review?(cdawson)
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
Attachment #8505063 - Flags: review?(cdawson) → review+
Verified fixed and working correctly on dev/stage.
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Status: RESOLVED → VERIFIED
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
You need to log in before you can comment on or make changes to this bug.