Fix a bunch of UI nits in sheriff-o-matic.

-Add back the dividers between failure cards.
The wall of text and buttons was overwhelming.
-Fix the heights of things so that the page contents
isn't all overflowing out of height:0 containers.
-Remove the useless divider in ct-builder-grid.
-Make the buttons look like esprehn's codereview tool.
-Add a new sheriff-friendly favicon.
-Have the results panel consist of two overflow:auto
regions. One for the menu and one for the results.
-Get rid of tabs on top. Instead have a header that
converts to a "go back" button when you are in the
results page.
-Have ct-tree-status be collapsed to 0 height when it's empty.
To make this work, have the default status be the empty
string so that the status attribute isn't removed when the value
is open.
-Fix ellipsizing CSS in ct-tree-status

NOTRY=true
R=abarth@chromium.org

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

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

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

@@ -13,13 +13,13 @@ James, a web developer from Birmingham, UK.
 <meta name="viewport" content="width=device-width, user-scalable=no">
 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700">
 <style>
-html {
-    overflow-y: scroll;
+html, body {
+  height: 100%;
 }
 body {
-    font-family: 'Open Sans';
-    font-size: 14px;
-    margin: 0px;
+  font-family: 'Open Sans';
+  font-size: 14px;
+  margin: 0px;
 }
 </style>
 <script src="bower_components/platform/platform.js"></script>

third_party/WebKit/Tools/GardeningServer/ui/ct-builder-grid.html

@@ -17,10 +17,6 @@ found in the LICENSE file.
         width: 350px;
       }
 
-      tbody tr {
-        border-top: 1px solid #eee;
-      }
-
       tbody td:first-child {
         width: 20%;
       }

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

@@ -15,23 +15,53 @@ found in the LICENSE file.
         display: flex;
       }
 
+      /* FIXME: All this paper-button styling should go in a cr-button component so that
+         we can use buttons in different places and have them all look the same. */
       paper-button {
-        background: papayawhip;
+        -webkit-user-select: none;
+        background: #f5f5f5;
+        border-radius: 2px;
+        border: 1px solid #dcdcdc;
+        color: #444;
+        padding: 0 16px;
+        text-align: center;
+      }
+
+      paper-button:focus {
+        border: 1px solid #4d90fe;
+        outline: none;
+      }
+
+      paper-button:active {
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+      }
+
+      paper-button:active, paper-button:hover {
+        background: #f8f8f8;
+        border-color: #c6c6c6;
+        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
+        color: #222;
       }
 
       ct-builder-grid {
         margin-right: 10px;
       }
+
+      .failure {
+        flex: 1;
+      }
+
+      #examine {
+        align-self: flex-start;
+      }
     </style>
     <ct-builder-grid failures="{{failures}}"></ct-builder-grid>
-    <div style="flex: 1">
+    <div class="failure">
       <ct-test-list tests="{{failures|testNames}}"></ct-test-list>
       <ct-commit-list first="{{failures[0].newestPassingRevision + 1}}"
                       last="{{failures[0].oldestFailingRevision}}"></ct-commit-list>
     </div>
-    <div>
-      <paper-button id="examine" on-tap="{{examine}}">Examine</paper-button>
-    </div>
+    <paper-button id="examine" on-tap="{{examine}}">Examine</paper-button>
   </template>
   <script>
     Polymer({

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

@@ -16,6 +16,7 @@ found in the LICENSE file.
       ct-failure-card {
         margin: 5px;
         padding: 5px;
+        border-top: 1px solid lightgrey;
       }
     </style>
     <template repeat="{{failures in groups}}">

third_party/WebKit/Tools/GardeningServer/ui/ct-results-panel.html

@@ -13,7 +13,8 @@ found in the LICENSE file.
   <template>
     <style>
       :host {
-        display: block;
+        display: flex;
+        flex-direction: column;
       }
 
       paper-item.core-selected {
@@ -21,21 +22,41 @@ found in the LICENSE file.
       }
 
       .message {
-        text-align: center;
         margin: 20px;
+        text-align: center;
+      }
+
+      core-menu {
+        box-shadow: 0 3px 3px #ccc;
+        /* Override /deep/ selector in core-menu.css. */
+        margin: 0 !important;
+        max-height: 20%;
+        min-height: 150px;
+        overflow: auto;
+        /* So the box-shadow goes on top of the results. */
+        z-index: 1;
+      }
+
+      .results {
+        /* Stay below the box shadow of the core-menu. */
+        padding-top: 6px;
+        flex: 1;
+        overflow: auto;
       }
     </style>
-    <template if="{{!failures.length}}">
+    <template if="{{ !failures.length }}">
       <div class="message">No results to display.</div>
     </template>
-    <template if="{{failures.length}}">
-      <core-menu selected="{{selected}}">
-        <template repeat="{{failure in failures}}">
-          <paper-item label="{{failure.testName}}"></paper-item>
+    <template if="{{ failures.length }}">
+      <core-menu selected="{{ selected }}">
+        <template repeat="{{ failure in failures }}">
+          <paper-item label="{{ failure.testName }}"></paper-item>
         </template>
       </core-menu>
-      <ct-embedded-flakiness-dashboard test="{{failures[selected].testName}}"></ct-embedded-flakiness-dashboard>
-      <ct-results-by-builder failure="{{failures[selected]}}"></ct-results-by-builder>
+      <div class="results">
+        <ct-embedded-flakiness-dashboard test="{{ failures[selected].testName }}"></ct-embedded-flakiness-dashboard>
+        <ct-results-by-builder failure="{{ failures[selected] }}"></ct-results-by-builder>
+      </div>
     </template>
   </template>
   <script>

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

@@ -17,27 +17,51 @@ found in the LICENSE file.
 
 <link rel="import" href="../bower_components/core-animated-pages/core-animated-pages.html">
 <link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-right.html">
-<link rel="import" href="../bower_components/paper-tabs/paper-tab.html">
-<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
 <link rel="import" href="ct-results-panel.html">
 <link rel="import" href="ct-unexpected-failures.html">
 
 <polymer-element name="ct-sheriff-o-matic">
   <template>
     <style>
-      paper-tabs {
-        background-color: #00bcd4;
-        color: #fff;
-        box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+      header {
+        -webkit-user-select: none;
+        align-items: center;
+        background-color: #212121;
+        color: white;
+        cursor: default;
+        display: flex;
+        font-size: 1.1em;
+      }
+      header a, header span {
+        color: white;
+        display: inline-block;
+        padding: 0.25em 4px;
+        text-decoration: none;
+      }
+      core-animated-pages {
+        flex: 1;
       }
     </style>
-    <paper-tabs selected="{{selected}}">
-      <paper-tab>Unexpected Failures</paper-tab>
-      <paper-tab>Results</paper-tab>
-    </paper-tabs>
-    <core-animated-pages selected="{{selected}}" transitions="slide-from-right">
-      <ct-unexpected-failures on-ct-examine-failures="{{onExamine}}"></ct-unexpected-failures>
-      <ct-results-panel failures="{{currentFailures}}"></ct-results-panel>
+
+    <header>
+      <template if="{{ selected == 0 }}">
+        <span><img src="../favicon.ico"> Auto-sheriff-o-maticon</span>
+      </template>
+      <template if="{{ selected == 1 }}">
+        <a on-click="{{ onBack }}">
+          &lt;&lt; Go back
+        </a>
+      </template>
+    </header>
+
+    <core-animated-pages selected="{{ selected }}" transitions="slide-from-right">
+      <ct-unexpected-failures on-ct-examine-failures="{{ onExamine }}"></ct-unexpected-failures>
+      <ct-results-panel failures="{{ currentFailures }}"></ct-results-panel>
     </core-animated-pages>
   </template>
   <script>
@@ -45,6 +69,10 @@ found in the LICENSE file.
       selected: 0,
       currentFailures: [],
 
+      onBack: function() {
+        this.selected = 0;
+      },
+
       onExamine: function(event) {
         this.currentFailures = event.detail;
         this.selected = 1;

third_party/WebKit/Tools/GardeningServer/ui/ct-tree-status-tests.html

@@ -69,7 +69,7 @@ asyncTest("basic", 10, function() {
       })
     ]).then(function() {
       requestAnimationFrame(function() {
-        ok(!opentree.shadowRoot.textContent.trim());
+        ok(!opentree.shadowRoot.textContent.has("open-tree-project"));
         ok(throttledtree.shadowRoot.textContent.has("throttled-tree-project"));
         ok(closedtree.shadowRoot.textContent.has("closed-tree-project"));
         start();

third_party/WebKit/Tools/GardeningServer/ui/ct-tree-status.html

@@ -6,26 +6,30 @@ found in the LICENSE file.
 
 <polymer-element name="ct-tree-status">
   <template>
-    <template if="{{ message }}">
-      <style>
-        :host {
-          display: flex;
-          whitespace: nowrap;
-          overflow: hidden;
-          text-overflow: ellispis;
-        }
+    <style>
+      :host {
+        display: flex;
+      }
 
-        :host([status=throttled]) {
-          background-color: khaki;
-        }
+      :host([status=throttled]) {
+        background-color: #fffc6c;
+      }
 
-        :host([status=closed]),
-        :host([status=closed]) a {
-          color: white;
-          background-color: tomato;
-        }
-      </style>
-      <div style="flex: 1">{{ project }}: {{ message }}</div>
+      :host([status=closed]),
+      :host([status=closed]) a {
+        color: white;
+        background-color: #e98080;
+      }
+
+      .message {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    </style>
+    <template if="{{ message }}">
+      <div class="message">{{ project }}: {{ message }}</div>
       <div style="padding: 0 5px;">[ <a href="{{ project | _url }}">details</a> ]</div>
     </template>
   </template>
@@ -35,7 +39,7 @@ found in the LICENSE file.
         project: '',
         message: '',
         status: {
-          value: 'open',
+          value: '',
           reflect: true,
         },
       },

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

@@ -20,9 +20,22 @@ found in the LICENSE file.
         left: 10px;
       }
 
-      ct-tree-status, ct-failing-builders {
+      ct-failing-builders {
         margin: 5px;
       }
+
+      ct-tree-status {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 5px;
+        padding: 3px;
+      }
+
+      ct-tree-status[status=open] {
+        margin: 0;
+        padding: 0;
+      }
     </style>
     <ct-failure-analyzer id="analyzer" status="{{ analyzerStatus }}" failures="{{ failures }}"></ct-failure-analyzer>
     <ct-failure-grouper failures="{{ failures.unexpected }}" groups="{{ failureGroups }}"></ct-failure-grouper>