Start a top-down rewrite of Garden-O-Matic in Polymer

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

Index: Tools/GardeningServer/ui/ct-unexpected-failures.html
diff --git a/Tools/GardeningServer/ui/ct-unexpected-failures.html b/Tools/GardeningServer/ui/ct-unexpected-failures.html
new file mode 100644
index 0000000000000000000000000000000000000000..f11d8c57ce833778ea7c57c97d0456cd00aa85a2
--- /dev/null
+++ b/Tools/GardeningServer/ui/ct-unexpected-failures.html
@@ -0,0 +1,46 @@
+<!--
+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="../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
+<link rel="import" href="ct-failure-analyzer.html">
+<link rel="import" href="ct-failure-grouper.html">
+<link rel="import" href="ct-failure-stream.html">
+
+<polymer-element name="ct-unexpected-failures">
+  <template>
+    <style>
+      paper-toast {

[esprehn, 2014/07/08 16:25:05]

You probably meant to add :host { display: block; } to most of these elements.
The default of inline is rarely what oyu want.

+        bottom: 40px;
+        left: 10px;
+      }
+      #update {
+        background: #4285f4;
+        color: #fff;
+      }
+    </style>
+    <ct-failure-analyzer id="analyzer" status="{{analyzerStatus}}" failures="{{failures}}"></ct-failure-analyzer>
+    <ct-failure-grouper failures="{{failures}}" groups="{{failureGroups}}"></ct-failure-grouper>
+    <paper-button id="update" on-tap="{{update}}">Update</paper-button>
+    <ct-failure-stream groups="{{failureGroups}}"></ct-failure-stream>

[esprehn, 2014/07/08 16:25:05]

Some of these seem to be data sources and some are UI controls, it's nice if you
group the sources together at the top or bottom and add an extra new line to
separate them.

+    <paper-toast id="toast" text="{{analyzerStatus}}"></paper-toast>

[ojan, 2014/06/29 04:48:25]

BTW, I tried this out locally and I'm not sure the toast is the right UI for
this. If the analyzing step takes a long time and you happen to not be looking
when the toast appears, it won't be clear that the tool is stuck trying to
update. I guess we could pop the toast back up if we saw it taking a long time.

None of this is super important, but I figured I'd mention it.

I guess we really just want a feature request for paper-toast to allow you to
give it a duration of 0 or -1 or something to mean that the page will manually
close/update it.

+  </template>
+  <script>
+    Polymer({
+      attached: function() {
+        this.update();
+      },
+
+      update: function() {
+        this.$.analyzer.update();
+      },
+
+      analyzerStatusChanged: function() {
+        this.$.toast.show();
+      },
+    });
+  </script>
+</polymer-element>