1079989 - Lower contrast and visually separate the revision block from the job block

Status: VERIFIED FIXED

(Tree Management :: Treeherder, defect, P5)

Description

[Jonathan French (:jfrench)]

Another one of those minor polish/LHF things.

I've been thinking about this one for a few months. The resultset revision block on the left side, competes visually on almost an equal contrast weighting with the more important job block on the right side. It's made 'worse' in the sense that the revision block often is irregular in shape, so attracts even more attention.

Since the job block should likely be the first visual point-of-contact for the user, it might make sense to reduce the contrast of the revision comment text, so it looks like a unified and slightly less prominent block.

Just an idea, but I will put up a PR for evaluation by the sheriffs.

Comment 1

[Jonathan French (:jfrench)]

Attachment: treeherder-ui-PR#223

Please see the above PR for review and status.

Adding feedback request from Ryan and Ed also, on the proposed look in the PR.

Comment 2

[Ryan VanderMeulen [:RyanVM]]

All I'm seeing in those screenshots is the difference in font color. What else should I be noticing?

Comment 3

[Jonathan French (:jfrench)]

(In reply to Ryan VanderMeulen [:RyanVM UTC-4] from comment #2)
> All I'm seeing in those screenshots is the difference in font color. What
> else should I be noticing?

That is the only change I've made, to unify that block.

Comment 4

[Ed Morley [:emorley]]

Comment on attachment 8501894 [details] [review]
treeherder-ui-PR#223

It definitely looks a lot cleaner, but I'm wondering if it reduces the readability of the text a little bit too much? When looking at test failures, it's often useful to read the commit messages to see which change could have cause the failure. Perhaps halfway between current and proposed? (I know the proposed colour matches the buttons, but I think we get away with it on them, since there is less text to read).

Comment 5

[Jonathan French (:jfrench)]

Sure, I'll try another at a halfway point. Definitely download the existing screen grabs on Github (or ensure they're being viewed 1:1) as Github tends to soften/lighten the appearance of larger images when it compresses them for the PR feed.

Comment 6

[Jonathan French (:jfrench)]

I've updated the PR with two darker versions for everyone's evaluation.

Comment 7

[Ed Morley [:emorley]]

Yeah the latest version looks good to me :-)

Comment 8

[Jonathan French (:jfrench)]

Thanks Ed, I'll get that latest one in the PR at #777 merged, and we can review it on dev.

Comment 9

[Treeherder GitHub Bugbot]

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

https://github.com/mozilla/treeherder-ui/commit/791ba33c049507b5f386003fce8cf13bf766749e
Bug 1079989 - Lower contrast and visually separate the revision block

https://github.com/mozilla/treeherder-ui/commit/6c5d237c14bf6c529108e507abc4756ffa71921f
Merge pull request #223 from tojonmz/revision-comment-colors

Bug 1079989 - Lower contrast and visually separate the revision block

Comment 10

[Jonathan French (:jfrench)]

Reviewed by wlach and merged by camd.

Verified fixed and appearing correctly on dev/stage.

Comment 11

[Treeherder GitHub Bugbot]

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

https://github.com/mozilla/treeherder/commit/83dc36991d4f34257c8e1e4c39c5fa71142ebd44
Bug 1079989 - Lower contrast and visually separate the revision block

https://github.com/mozilla/treeherder/commit/053b0e9efbee2fee7faf1d8dd119ebd46272210d
Merge pull request #223 from tojonmz/revision-comment-colors

Bug 1079989 - Lower contrast and visually separate the revision block