Polymer-based Garden-O-Matic should have a basic results panel

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

Index: Tools/GardeningServer/ui/ct-failure-card.html
diff --git a/Tools/GardeningServer/ui/ct-failure-card.html b/Tools/GardeningServer/ui/ct-failure-card.html
new file mode 100644
index 0000000000000000000000000000000000000000..63f6dd6be88e4c472265ebe15a6fa5555cf70fa5
--- /dev/null
+++ b/Tools/GardeningServer/ui/ct-failure-card.html
@@ -0,0 +1,52 @@
+<!--
+Copyright 2014 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
+
+<link rel="import" href="ct-commit-list.html">
+<link rel="import" href="ct-test-list.html">
+
+<polymer-element name="ct-failure-card" attributes="failures">
+  <template>
+    <style>
+      :host {
+        display: block;
+        margin: 5px;
+        padding: 5px;
+        border-top: 1px solid lightgrey;
+        min-height: 30px;

[ojan, 2014/06/30 04:48:14]

Nit: Why the min-height?

[abarth-chromium, 2014/06/30 04:55:05]

Otherwise the Examine button overhangs the next entry.  It's floating left, so
another solution is to use |clear|.

[ojan, 2014/06/30 04:57:22]

Clear is better. More explicit what it's there for and less hard-coded. This
won't work right if you, e.g., zoom the page.

That said, don't use floats for this. Use flexbox.

+      }
+
+      :host(:hover) > #examine {
+        display: initial;
+      }
+
+      #examine {
+        display: none;
+        float: right;
+      }
+
+      paper-button {
+        background: #4285f4;
+        color: #fff;
+      }
+    </style>
+    <paper-button id="examine" on-tap="{{examine}}">Examine</paper-button>
+    <ct-test-list tests="{{failures|testNames}}"></ct-test-list>
+    <ct-commit-list first="{{failures[0].newestPassingRevision + 1}}"
+                    last="{{failures[0].oldestFailingRevision}}"></ct-commit-list>
+  </template>
+  <script>
+    Polymer({
+      failures: [],
+
+      testNames: function(failures) {
+        return failures.map(function(failureAnalysis) { return failureAnalysis.testName });
+      },
+      examine: function() {
+        this.fire('ct-examine-failures', this.failures);
+      },
+    });
+  </script>
+</polymer-element>