Replace the Header & Thread Watcher menu icon with a FontAwesome icon.

Also fix .brackets-wrap spacing.

css/style.css

@@ -191,17 +191,14 @@ a[href="javascript:;"] {
   text-decoration: none;
   padding: 1px;
 }
-#shortcuts::after {
-  margin-left: 2px;
-}
 .shortcut:not(:last-child)::after {
   content: " / ";
 }
 .brackets-wrap::before {
-  content: "\\00a0[";
+  content: " [ ";
 }
 .brackets-wrap::after {
-  content: "]\\00a0";
+  content: " ] ";
 }
 
 /* Notifications */
@@ -885,10 +882,9 @@ a.hide-announcement {
 
 /* Menu */
 .menu-button {
-  display: inline-block;
   position: relative;
 }
-.menu-button i {
+.menu-button i:not(.icon-reorder) {
   border-top:   6px solid;
   border-right: 4px solid transparent;
   border-left:  4px solid transparent;
@@ -896,6 +892,14 @@ a.hide-announcement {
   margin: 2px;
   vertical-align: middle;
 }
+:root.blink .menu-button .icon-reorder {
+  /* crbug.com/25541 */
+  font-size: 14px;
+}
+:root.blink #shortcuts .icon-reorder {
+  /* crbug.com/25541 */
+  vertical-align: -1px;
+}
 #menu {
   border-bottom: 0;
   display: -webkit-flex;

html/Monitoring/ThreadWatcher.html

@@ -1,5 +1,5 @@
 <div>
   <span class="move">Thread Watcher <span id="watcher-status"></span></span>
-  <a class="menu-button" href="javascript:;">[<i></i>]</a>
+  <a class="menu-button" href="javascript:;"><i class="icon-reorder"></i></a>
 </div>
 <div id="watched-threads"></div>

src/General/Header.coffee

@@ -12,7 +12,7 @@ Header =
     @menu = new UI.Menu 'header'
     menuButton = $.el 'a',
       className: 'menu-button'
-      innerHTML: '<i></i>'
+      innerHTML: '<i class=icon-reorder></i>'
       href: 'javascript:;'
     $.on menuButton, 'click', @menuToggle
     @addShortcut menuButton, 0