mozilla/treeherder-ui — pull request #230 by tojonmz (2014-10-14 22:19:59+00:00)
Title: Bug 1075272 - Highlight jobs using scale transform to reduce line shift

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

In it, we decouple the styling of large buttons on the job panel, and draw them with a scale transform, rather than font size.

This stops the vertical line shift that occurrs during job selection, and it reduces horizontal line shift and last-character wrapping. I was unable to completely eliminate the latter because of the border thickness change that occurs during job selection. But in many cases the jobs seem to 'drop down' to a new line less frequently.

That is an issue that can be looked at in a separate fix, I think.

Some of the selected job buttons used alpha transparency. When scaled this resulted in adjacent jobs showing through the scaled job. For affected jobs (eg. orange) I have replaced the background color with an opaque equivalent to the color+page-blend, so they look exactly the same. @edmorley and @rvandermeulen have signed off on the use of an opaque selected job. In some edge cases it obscures adjacent jobs, but they are ok with that.

The job size styling was 'decoupled' from the pinboard, by adding a new `btn-lg-xform` which the pinboard doesn't inherit. So the pinboard selected jobs draw the same as they always have. **nb.** I spent about a full day trying to implement the same scale transforms in the pinboard but hit a variety of issues because of the way the job is comprised of two elements - the job and the close icon, and they scale differently and from different centers. There was also some crazy z-depth stuff going on, that I did not investigate in detail, but was also a problem.

The only change in the pinboard here was to reduce the border width on selection by 1px, to 4px. This makes the appearance of the jobs in both locations more consistent.

So here is a job, before and after:

![jobselectedcurrent](https://cloud.githubusercontent.com/assets/3660661/4637703/80f282cc-53ef-11e4-99df-7b919bd65e42.jpg)

![jobselectedxformproposed](https://cloud.githubusercontent.com/assets/3660661/4637691/5cfc4344-53ef-11e4-8eff-c3e04685e633.jpg)

Here is the look with a pinned job.:

![jobselectedxformpinned](https://cloud.githubusercontent.com/assets/3660661/4637331/42283bc6-53eb-11e4-9954-156383d1865b.jpg)

I've spent a bunch of time on Firefox and Chrome on Windows, and it appears to be behaving pretty nicely. It also saves a bunch of vertical real estate when a job is selected, as you can see above. If you guys can try it on OSX that would be great.

I had to override the bootstrap margin with an `!important` to stop line shift, and I apologize for that. Maybe there is better way, but I seemed unable override the inheritance without it.

Apologies this is long, but I wanted to track the reasoning for my changes, mostly for my benefit :)

Tested on Windows:
FF Release 32.0.3
Chrome Latest Release 37.0.2062.124 m

Adding @edmorley for visibility.

Adding @wlach and @camd for review and/or merge.