mozilla/treeherder-ui — pull request #283 by tojonmz (2014-12-01 20:24:00+00:00)
Title: Bug 1106303 - Add missing divider between Help and User buttons

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

This addresses the missing menu divider I noticed in philor's unrelated bug [1106145](https://bugzilla.mozilla.org/show_bug.cgi?id=1106145) between the Help button and the user id, when a user is logged in.

Since the user id is not a menu or button, I didn't want any hover behaviors inherited from the existing navbar classes. So, `th-username` gets a mix of its own properties, a overriding hover, but inherits other common properties where possible.

There is a minor tweak I could have done, adding `margin-right: -4px; padding-right: 16px` to which would make the container "perfect" - but since it has no hover or selection, it seems fine to omit that. It leaves an invisible 4px space at the right if you inspect the element, but the button UI width presented to the user, is correct.

IIRC, this negative margin compensation stuff is all a by product of a Repo menu offset which we want to keep. Perhaps we can improve all this inheritance later.

Here's philor's appearance from his bug on OSX:

![missingdividernavbar](https://cloud.githubusercontent.com/assets/3660661/5252072/8fb6c69e-7968-11e4-821c-53a1ca271d45.jpg)

Here's my local before, on Windows looking similar (Settings button exposed):

![missingdividernavbarcurrent](https://cloud.githubusercontent.com/assets/3660661/5252077/9b0c9276-7968-11e4-83fe-9233b3fd3e51.jpg)

And after the fix:

![missingdividernavbarpropose](https://cloud.githubusercontent.com/assets/3660661/5252080/9efe6580-7968-11e4-92ca-d7f7c9c89401.jpg)

Note I turned the ng directives on during the work and to generate the screen grabs above, which is why the Login state doesn't match. I created a consolidated `nav-menu-btn` class which is now shared with the Settings and Filter button, so Settings will also look correct, should we ever turn it back on.

I switched the order so the user id is adjacent the Login/Logout persona button, if that makes sense. The user id field uses the same `#777` as the main Treeherder logo, to imply they share the same inert behavior.

Tested on Windows:
FF Release **33.1.1**
Chrome Latest Release **39.0.2171.71 m**

Adding @wlach and/or @camd for review and @edmorley for visibility.