1120477 - The "show/hide hidden jobs" toggle needs to more clearly convey it's purpose & toggle state

Status: RESOLVED FIXED

(Tree Management :: Treeherder, defect, P3)

Description

[Boris Zbarsky [:bzbarsky]]

STEPS TO REPRODUCE: Load https://treeherder.mozilla.org/#/jobs?repo=mozilla-central&exclusion_state=all

EXPECTED RESULTS: The checkbox in the second row of the header, to the right of "NNN unclassified" is checked.

ACTUAL RESULTS: The checkbox is not checked.

The hidden jobs _are_ being shown, so this is a pure UI issue.

Comment 1

[Boris Zbarsky [:bzbarsky]]

philor tells me it's not a checkbox.  I can confirm that it draws as a white hollow square in the non-all state and a gray solid square in the "all" state.  But it looks like a checkbox in both cases, and an unchecked one.  Why can this not just use an actual checkbox?

Comment 2

[(no longer active)]

Perhaps the more important question is, why not just use some text instead of a glyph which doesn't mean much on its own? :-)

Comment 3

[Ed Morley [:emorley]]

(In reply to :Ehsan Akhgari (not reading bugmail, needinfo? me!) from comment #2)
> Perhaps the more important question is, why not just use some text instead
> of a glyph which doesn't mean much on its own? :-)

Yeah agree the UX could be improved here. Treeherder uses icons in many more places than TBPL did, and I think the new-user learning curve is steeper as a result. That said, I think we need _something_ to try and reduce the UI clutter TBPL had (even with the IMO hard to discover rollover hidden features), particularly given there are more features in Treeherder already, and even more so in the future. Perhaps multiple/customisable views for different types of users (sheriffs vs devs looking at try vs ...) might be the way forwards...

Comment 4

[Jonathan French (:jfrench)]

(In reply to :Ehsan Akhgari (not reading bugmail, needinfo? me!) from comment #2)
> Perhaps the more important question is, why not just use some text instead
> of a glyph which doesn't mean much on its own? :-)

What if it looked like a literal job character, with some sort of partly transparent state to imply excluded, then 100% opaque when not.

We do have a tooltip for nearly every key piece of UI including that one, so it is discoverable.

Re text, I think we are just trying to avoid cluttering the UI with yet more content, but which after a users' first discovery becomes just more clutter, because they know intimately where it is and what it does.

Comment 5

[GitHub Autolander Bot]

Attachment: [treeherder] KWierso:1120477 > mozilla:master

Comment 6

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Comment on attachment 8762917 [details] [review]
[treeherder] KWierso:1120477 > mozilla:master

How about these? We can use the eye-slash glyph when we aren't showing hidden jobs, and then just the eye glyph when hidden jobs are shown.

Comment 7

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Attachment: hiddenishidden.png

Comment 8

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Attachment: hiddenisvisible.png

Comment 9

[Jonathan French (:jfrench)]

(In reply to Wes Kocher (:KWierso) from comment #6)
> Comment on attachment 8762917 [details] [review]
> [treeherder] KWierso:1120477 > mozilla:master
> 
> How about these? We can use the eye-slash glyph when we aren't showing
> hidden jobs, and then just the eye glyph when hidden jobs are shown.

I've no issues either way :) I think we had the eye glyph in early development and iirc there was user confusion with it, which resulted in using fa-square and fa-square-o to mimic a job button shape.

Comment 10

[Cameron Dawson [:camd]]

We were talking in IRC that this needs to be a tri-state kind of item.  The issue is actually slightly more complex if we wanted to support everything.

We have two url params in effect here:

* exclusion_profile=default/Tier-2/myTestProfile
* visibility=excluded/included

So here's a proposal:

1. Make the button a drop-down with text "Visibility" when the window is wide.  In narrow widows perhaps switch to the eye icon?
2. Make the menu like this:

================
  excluded
----------------
  none
x default
  Tier-2
  Tier-3
  MyTestProfile
  FlimFlamProfile
=================
where the x's represent the checked item.  For "excluded" it would be checked or not.  For the profile, at least one of them would always be checked.  "none" would indicate show all jobs

"Yay!  Way to complicate things, Cam!", you might say...
"Well, it's just an idea.  We can go a different route, if you like", I would respond...  ;)

Comment 11

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

(Tri-state bit came from bug 1117561, for the record.)

Comment 12

[Cameron Dawson [:camd]]

Wes: would you want to just address this one by changing it to text in the wide-case, and an icon in the narrow case.  Perhaps the eye is fine as that.

Seems like there could be some clever word that's used that means "only showing non-excluded" and could be a strike-out when you're showing all?  I sure can't think of what that word would be though.  Maybe "Excluding" ?  Sigh.. naming is hard...

Comment 13

[Cameron Dawson [:camd]]

Comment on attachment 8762917 [details] [review]
[treeherder] KWierso:1120477 > mozilla:master

Clearing this for now till we decide on what the impl should be.

Comment 14

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Comment on attachment 8762917 [details] [review]
[treeherder] KWierso:1120477 > mozilla:master

How about this? 

When you first load the page, the eye icon is slashed, and the words "Excluded jobs" have a line through them. The tooltip for the toggle says "Click to show excluded jobs".

When you click the toggle, the eye icon loses the slash, the words "Excluded jobs" loses the line through them, and the tooltip changes to "Click to hide excluded jobs".

If the window is too narrow, the text disappears, and shows only the eye icon.

Happy to wordsmith it a bit more, if you'd like, but I can't think of anything better offhand.

Comment 15

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Other option could be to switch the ::after to be ::before, which would get rid of the eye icon when the text is visible and then show it when the text is hidden.

Comment 16

[Cameron Dawson [:camd]]

Comment on attachment 8762917 [details] [review]
[treeherder] KWierso:1120477 > mozilla:master

I really like it!  :)

Comment 17

[Treeherder GitHub Bugbot]

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

https://github.com/mozilla/treeherder/commit/172afd396c6377ea778622345096b7923c20d9e5
Bug 1120477 - Change the hidden jobs toggle's glyphs to something hopefully more discoverable (#1596) r=camd

* Bug 1120477 - Change the hidden jobs toggle's glyphs to something hopefully more discoverable

* Add some text, but only if the window can fit it