mozilla/treeherder-ui — pull request #318 by tojonmz (2014-12-29 05:04:21+00:00)
Title: Bug 1116000 - Improve pin icon UX via added display states

This fixes Bugzilla bug [1116000](https://bugzilla.mozilla.org/show_bug.cgi?id=1116000).

This change hopefully improves the pin UX by:

* suppressing the count for cleanliness when there are no pinned jobs
* emphasizing via color when there are pinned jobs
* de-emphasizing the pin counter text

Here's the before:
![pinjobiconcurrent](https://cloud.githubusercontent.com/assets/3660661/5564619/c75d0cc6-8e98-11e4-9233-b40c2db7283f.jpg)

Here's the after:
![pinjobiconproposed](https://cloud.githubusercontent.com/assets/3660661/5564621/d1da425e-8e98-11e4-855b-1c2c7dfc569d.jpg)

Here's the pinned state:
![pinjobiconproposedpinned](https://cloud.githubusercontent.com/assets/3660661/5564624/df537658-8e98-11e4-8c46-75bec7e8aabe.jpg)

And multiple pins:
![pinjobiconproposedmultiplep](https://cloud.githubusercontent.com/assets/3660661/5564625/e645445a-8e98-11e4-87b3-037596d4a860.jpg)

I accessed the model's pin `.count` rather than testing against the returned value of `getCountPinnedJobs()` although I suppose I might be able to do that depending on the comparator used.

I used `#68aae2` which is a blend of of our global links blue, and the [+]add related bugs icon blue in the pinboard. It also lies in the color range of the pinboard itself, so it's kind of evocative of it when the pinboard is closed.

For a11y (eg. colorblind) we aren't any worse off than we were before. Since we didn't change luminance anyway on a pin when it was monochrome. The count now changes from (0) to (n) in a more visible way.

Everything seems to be behaving properly during pinning (manual and via shortcuts), unpinning, count changes, and clearing the pinboard entirely. Both with the pinboard open and closed.

The feel and UI feedback seems to make sense during testing.

Tested on Windows:
FF Release **34.0**
Chrome Latest Release **39.0.2171.95 m**

Adding @camd for review and @edmorley for visibility.