1200692 - Improve the UI Show/Hide states for Tier-1, Excluded Jobs, and Revision List

Status: RESOLVED FIXED

(Tree Management :: Treeherder, enhancement, P3)

Description

[Jonathan French (:jfrench)]

The current display states an interaction is a bit ambiguous for Tier-1, Excluded jobs and Revision list in the navbar, and could be improved:

o Tier-1 and Revision list should have different icons if possible for their Show and Hide states so you know what state the button is in before you press it

o Tier-1, Excluded Jobs and Revision List should have a title for each state, on hover indicating the state that it will switch to (like we do with (+) job counts..) eg. "Show (thing)" and "Hide (thing)" depending on the state of the model

o 'Tier-1' now encompasses Tier-2 and Tier-3 jobs so the "T" button/icon (if we can improve it to something better perhaps) and its title should reflect that and refer to "Tier jobs" in general terms. Presently the title says "Toggle Tier-1 jobs only mode". We'd probably want "Show Tier jobs" and "Hide Tier jobs".

Comment 1

[Jonathan French (:jfrench)]

It's unlikely I will get to this before the end of Sept, so unassigning.

Comment 2

[William Lachance (:wlach)]

I think this would be a good bug for Roy to pick up. I'm going to narrow the scope of this to the revision list and the show all jobs buttons (ignoring the tier menu, which has undergone some changes since this bug was filed).

We can make the textual improvements :jfrench describes above for the revision list and show/hide all jobs by putting some conditional logic in this file:

https://github.com/mozilla/treeherder/blob/2d711b5dbbb75e7aa7d16ee6f3e50772bf28e833/ui/partials/main/thWatchedRepoNavPanel.html#L44

For example, for the revision list, we should be able to do something like this:
```
        <span class="btn-group">
          <span class="btn btn-view-nav btn-sm btn-collapse-resultsets"
                title="{{ revisionListShown ? 'Show revision list' : 'Hide revision list'}}"
                tabindex="0" role="button"
                ng-click="toggleAllRevisions()"><i class="fa fa-code-fork"></i>
          </span>
        </span>
```

(revisionListShown is not the right variable name, but you can find out the right ones by looking in ui/js/controllers/main.js)

For the icons, I'm not sure if we need a seperate one for the revision list, but it might be nice to indicate when it is hidden by setting the color of the icon to grey, indicating it is not currently active. You would add the css class somewhere in `ui/css/` and use the ngClass directive (https://docs.angularjs.org/api/ng/directive/ngClass) to conditionally apply it.

Comment 3

[GitHub Autolander Bot]

Attachment: [treeherder] crosscent:bug1200692 > mozilla:master

Comment 4

[William Lachance (:wlach)]

Comment on attachment 8757449 [details] [review]
[treeherder] crosscent:bug1200692 > mozilla:master

Looks good after a few revisions! Thanks

Comment 5

[GitHub Autolander Bot]

Pull request has landed in master: https://github.com/mozilla/treeherder/commit/609143448358f9a98d4d2af356b3c1f4b48e5c8a

Comment 6

[Treeherder GitHub Bugbot]

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

https://github.com/mozilla/treeherder/commit/fe3db57315657ba0ac64832fab43d40136e092e0
Bug 1200692 - Display current exclusion and revision state in tooltip