1040202 - Hard to differentiate still running jobs from successful ones at a glance

Status: RESOLVED FIXED

(Tree Management :: Treeherder, defect, P2)

Description

[Andrew Halberstadt [:ahal]]

This might just be me not being used to treeherder yet, but I find it really difficult to differentiate 'passed' jobs from 'still running' jobs. Especially if glancing/scrolling quickly.

I know this is likely by design because successful jobs shouldn't grab your attention like failures, but I would prefer if the background was coloured in with a light green (or slightly darker green if it is already.. it's hard to tell). While I agree that failures should stand out more than passes, if a user didn't care about passed jobs at all they would filter them away.

Just some bikeshedding, feel free to ignore :)

Comment 1

[Ed Morley [:emorley]]

From dev.platform:

On 25/07/2014 04:37, Nicholas Nethercote wrote:
> One comment: the visual distinction between a dark grey (running) and
> green (successful) job is much less than on TBPL. Could a very light
> green background and darker green border be used, similar to the
> orange and red boxes, to make the green jobs stand out a bit more?

Comment 2

[Nicholas Nethercote [inactive]]

> I know this is likely by design because successful jobs shouldn't grab your attention like failures

It depends on the use case. For sheriffs starring failures, I can imagine that green jobs are mostly uninteresting. But for a try push you need to wait until all the jobs have finished, so more obvious greens are useful there. Similarly when the tree is closed and things need to get back to green before reopening.

Comment 3

[Cameron Dawson [:camd]]

Attachment: Screenshot 2014-08-01 15.00.38.png

Comment 4

[Cameron Dawson [:camd]]

Yeah, this is a totally fair point.  Something like this is always a balancing act.  I've attached a screenshot of one attempt.  Does this look better?

Comment 5

[Andrew Halberstadt [:ahal]]

Yeah imo that looks much better, thanks!

Comment 6

[Nicholas Nethercote [inactive]]

Yeah, looks good. Sticks out more than the grey ones, but not as much as the orange ones.

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I agree that the current situation is pretty hard to read, whereas TBPL is fine since the letters are bolder and thus the colors are more visible.

Additionally, I'd note that you should probably also run this by folks with a few different varieties of red-green color-blindness.  (That's what led to the underlining of failed jobs on TBPL.)  I know that before we had the underlining, I talked to one person who had trouble distinguishing the green from the red, and another who had trouble distinguishing the green from the orange.

Comment 8

[Cameron Dawson [:camd]]

Attachment: screenshot take 2

Comment 9

[Cameron Dawson [:camd]]

Attachment: screenshot take 3

Comment 10

[Cameron Dawson [:camd]]

I've attached another attempt in 'screenshot take 3'

For our case, we will have a solid background for all failed jobs (red/orange/purple) which hopefully addresses color-blindness.  I made the completed jobs bold (green/blue/pink) and the running and pending jobs stayed the same.  But I removed borders from all the jobs except the failing ones.  

How does that look?  :)

Comment 11

[Nicholas Nethercote [inactive]]

I'm having trouble distinguishing take 2 from take 3... they both look good :)

I was commenting to emorley just yesterday that I found having a box around every job made things look very "busy", so I think only having boxes around failing jobs is a great improvement! I like the bold text for completed jobs, too.

Comment 12

[Ed Morley [:emorley]]

That looks good, thank you :-)

Comment 13

[Andrew Halberstadt [:ahal]]

+1, it looks way less crowded without all the boxes.

Comment 14

[Cameron Dawson [:camd]]

awesome!  thanks guys.  OK.  I've pushed this to production and will mark this fixed.  Please let me know if you want more tweaks.  :)

The main commit fix is here: https://github.com/mozilla/treeherder-ui/commit/b7c39763c47fd7a47b4cc1367c9e990abfa4b023

Though I made a few tweaks in subsequent commits as well.

Comment 15

[Treeherder GitHub Bugbot]

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

https://github.com/mozilla/treeherder/commit/a9699de40de00c7b5149c26b4a2e235e362aedda
fix bug 1040202: remove borders on non-error jobs.  css tweaking.