Make a bunch of static changes to sheriff-o-matic.

-A bunch of minor UI tweaks to get things to line up better.
-Align the examine/snooze buttons vertically so they take up less space.
-Make the tabs in ct-results-by-builder black and more tab-looking.
-Change the name to Sheriff-o-matic now that it's clear we're sticking with it.
-Add a useful links link to the right of the revisions.

BUG=400411,400398
NOTRY=true

Review URL: https://codereview.chromium.org/462363003

git-svn-id: svn://svn.chromium.org/blink/trunk@180294 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Tools/GardeningServer/ui/ct-failure-card.html

@@ -24,6 +24,7 @@ found in the LICENSE file.
         border: 1px solid #dcdcdc;
         color: #444;
         padding: 0 16px;
+        margin-bottom: 5px;
         text-align: center;
       }
 
@@ -48,25 +49,27 @@ found in the LICENSE file.
         width: 250px;
       }
 
-      .failure {
+      #failure {
         flex: 1;
       }
 
-      .snoozed {
-        opacity: 0.5;
+      #buttons {
+        display: flex;
+        flex-direction: column;
       }
 
-      #examine, #snooze {
-        align-self: flex-start;
+      .snoozed {
+        opacity: 0.5;
       }
     </style>
     <ct-builder-grid failures="{{ group.failures }}"></ct-builder-grid>
-    <div class="{{ { failure: true, snoozed: group.isSnoozed } | tokenList }}">
+    <div id="failure" class="{{ { snoozed: group.isSnoozed } | tokenList }}">
       <ct-test-list tests="{{ group.failures }}" tree="{{ tree }}"></ct-test-list>
       <ct-commit-list first="{{ group.failures[0].lastPassingRevisions }}"
           last="{{ group.failures[0].firstFailingRevisions }}"
           commits="{{ commits }}"></ct-commit-list>
     </div>
+    <div id="buttons">
       <paper-button id="examine" on-tap="{{ examine }}">Examine</paper-button>
       <template if="{{ !group.isSnoozed }}">
         <paper-button id="snooze" on-tap="{{ snooze }}">Snooze</paper-button>
@@ -74,6 +77,7 @@ found in the LICENSE file.
       <template if="{{ group.isSnoozed }}">
         <paper-button id="snooze" on-tap="{{ unsnooze }}">Unsnooze</paper-button>
       </template>
+    </div>
   </template>
   <script>
     Polymer({

third_party/WebKit/Tools/GardeningServer/ui/ct-failure-stream.html

@@ -14,7 +14,7 @@ found in the LICENSE file.
       }
 
       ct-failure-card {
-        margin: 5px;
+        margin-bottom: 5px;
         padding: 5px;
         border-top: 1px solid lightgrey;
       }

third_party/WebKit/Tools/GardeningServer/ui/ct-results-by-builder.html

@@ -15,6 +15,17 @@ found in the LICENSE file.
       :host {
         display: block;
       }
+      paper-tabs::shadow #selectionBar {
+        background-color: #212121;
+        height: 4px;
+      }
+      paper-tab {
+        border: 1px solid #212121;
+        border-radius: 5px 5px 0 0;
+      }
+      paper-tab::shadow #ink {
+        color: #212121;
+      }
     </style>
     <paper-tabs selected="{{ selected }}">
       <template repeat="{{ builder in builders }}">

third_party/WebKit/Tools/GardeningServer/ui/ct-revision-details.html

@@ -11,9 +11,6 @@ found in the LICENSE file.
 <polymer-element name="ct-revision-details" attributes="builderLatestRevisions revisionLog tree">
   <template>
     <style>
-      :host {
-        padding-left: 2em;
-      }
       ct-popup-menu > div {
         display: flex;
         justify-content: space-between;

third_party/WebKit/Tools/GardeningServer/ui/ct-sheriff-o-matic.html

@@ -29,6 +29,7 @@ found in the LICENSE file.
         display: flex;
         justify-content: space-between;
         font-size: 1.1em;
+        padding: 0 5px;
       }
       header a, header span {
         color: white;
@@ -36,6 +37,13 @@ found in the LICENSE file.
         padding: 0.25em 4px;
         text-decoration: none;
       }
+      #right-toolbar {
+        display: flex;
+        align-items: center;
+      }
+      ct-last-updated {
+        margin: 0 5px;
+      }
       core-animated-pages {
         flex: 1;
       }
@@ -44,7 +52,7 @@ found in the LICENSE file.
     <header>
       <div>
         <template if="{{ selected == 0 }}">
-          <span><img src="../favicon.ico"> Auto-sheriff-o-maticon</span>
+          <img src="../favicon.ico"> <span>Sheriff-o-matic</span>
         </template>
         <template if="{{ selected == 1 }}">
           <a on-click="{{ onBack }}">
@@ -52,7 +60,7 @@ found in the LICENSE file.
           </a>
         </template>
       </div>
-      <div>
+      <div id="right-toolbar">
         <ct-last-updated date="{{ lastUpdateDate }}"></ct-last-updated>
         <!-- FIXME: Use a proper polymer component with data binding. -->
         <select id="tree" on-change="{{ _updateTree }}">

third_party/WebKit/Tools/GardeningServer/ui/ct-test-list.html

@@ -13,9 +13,19 @@ found in the LICENSE file.
         display: block;
       }
 
+      :host > div {
+        /* Be at least the height of a paper-icon-button.
+           So things line up nicely. */
+        min-height: 24px;
+      }
+
       paper-icon-button {
         vertical-align: middle;
       }
+
+      paper-icon-button::shadow #icon {
+        margin: 0;
+      }
     </style>
     <template repeat="{{ groups in testGroups_ }}">
       <!-- FIXME: Find a less redundant UI than repeating the step on each line. -->

third_party/WebKit/Tools/GardeningServer/ui/ct-unexpected-failures.html

@@ -29,11 +29,21 @@ found in the LICENSE file.
         margin: 0;
         padding: 0;
       }
+
+      .toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        padding: 0 5px;
+      }
     </style>
     <ct-failure-analyzer id="analyzer" failures="{{ failures }}" builderLatestRevisions="{{ builderLatestRevisions }}" lastUpdateDate="{{ lastUpdateDate }}"></ct-failure-analyzer>
+    <div class="toolbar">
+      <ct-revision-details id="revisionDetails" builderLatestRevisions="{{ builderLatestRevisions }}" revisionLog="{{ revisionLog }}" tree="{{ tree }}"></ct-revision-details>
+      <a href="https://code.google.com/p/chromium/wiki/UsefulURLs">Useful URLs</a>
+    </div>
     <ct-tree-status status="{{ treeStatuses['chromium'] }}" state="{{ treeStatuses['chromium'].status }}"></ct-tree-status>
     <ct-tree-status status="{{ treeStatuses['blink'] }}" state="{{ treeStatuses['blink'].status }}"></ct-tree-status>
-    <ct-revision-details id="revisionDetails" builderLatestRevisions="{{ builderLatestRevisions }}" revisionLog="{{ revisionLog }}" tree="{{ tree }}"></ct-revision-details>
     <ct-party-time failures="{{ failures }}" tree="{{ tree }}"></ct-party-time>
     <ct-failure-stream groups="{{ failures[tree] }}" commits="{{ revisionLog }}" tree="{{ tree }}"></ct-failure-stream>
   </template>