Bug 1066377 - Convert repo menu to a two-column grid

ui/css/treeherder-navbar.css

@@ -382,3 +382,23 @@ fieldset[disabled] .btn-view-nav-closed.active {
   cursor: default;
 }
 
+.dropdown.open > #repo-dropdown {
+  width: 420px;
+  display: inline-grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(150px, auto);
+}
+
+#repo-dropdown > .repogroup.even {
+  grid-column: 1;
+}
+
+#repo-dropdown > .repogroup.odd {
+  grid-column: 2;
+}
+
+#repo-dropdown .repogroup {
+  margin-left: 15px;
+  margin-top: 5px;
+}

ui/partials/main/thGlobalTopNavPanel.html

@@ -43,9 +43,11 @@
           </button>
           <ul id="repo-dropdown" class="dropdown-menu checkbox-dropdown-menu"
               role="menu" aria-labelledby="repoLabel">
-            <span ng-repeat="(group_order, group) in groupedRepos()">
-              <li role="presentation" class="divider" ng-hide="$first"></li>
-              <li role="presentation" class="dropdown-header">{{::group.name}}</li>
+            <span class="repogroup {{$even ? 'even' : 'odd'}}" ng-repeat="(group_order, group) in groupedRepos()">
+              <li role="presentation" class="dropdown-header" title="{{::group.repos[0].repository_group.description}}">
+                  {{::group.name}}
+                  <span ng-show="group.repos[0].repository_group.description" class="fa fa-info-circle"></span>
+              </li>
               <th-repo-menu-item ng-repeat="repo in group.repos | orderBy : 'name'" ></th-repo-menu-item>
             </span>
           </ul>