Move treestatus.js to a model class.

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

 <!--
 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="../model/ct-commit-log.html">
+<link rel="import" href="../model/tree-status.html">
 <link rel="import" href="ct-failure-analyzer.html">
 <link rel="import" href="ct-failure-stream.html">
 <link rel="import" href="ct-party-time.html">
 <link rel="import" href="ct-revision-details.html">
 <link rel="import" href="ct-tree-status.html">
 
 <polymer-element name="ct-unexpected-failures" attributes="tree">
   <template>
-    <style>
-      ct-tree-status {

[ojan, 2014/08/07 18:30:49]

This styling was intentionally out here. You could easily imagine a different
app reusing the ct-tree-status component and wanting to style it differently
(e.g. not clip and instead just show the whole status).

[dsinclair, 2014/08/08 13:43:47]

Done.

-        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" failures="{{ failures }}" builderLatestRevisions="{{ builderLatestRevisions }}"></ct-failure-analyzer>
-    <ct-tree-status project="chromium"></ct-tree-status>
-    <ct-tree-status project="blink"></ct-tree-status>
+    <div id="ctTreeStatuses"></div>

[ojan, 2014/08/07 18:30:49]

I don't think you need the domReady business if you make the treeStatuses an
object instead of an array.

<ct-tree-status status="{{ treeStatuses["chromium"] }}></ct-tree-status>
<ct-tree-status status="{{ treeStatuses["blink"] }}></ct-tree-status>

[dsinclair, 2014/08/08 13:43:47]

Done.

     <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>
   <script>
   (function() {
     // FIXME: Make the update frequency 30 seconds again once we fix crbug.com/401358.
     var kUpdateFrequency = 1000 * 30 * 10;
 
     Polymer({
       revisionLog: new CTCommitLog(),
       tree: '',
 
+      created: function() {
+        this.treeStatuses = [];
+
+        var projects = ['chromium', 'blink'];
+        for (var i = 0; i < projects.length; i++) {
+          this.treeStatuses.add(new TreeStatus(projects[i]));
+        }
+      },
+
+      domReady: function() {
+        for (var i = 0; i < this.treeStatuses.length; i++) {
+          var ctTreeStatus = document.createElement('ct-tree-status');
+          ctTreeStatus.treeStatus = this.treeStatuses[i];
+          this.$.ctTreeStatuses.appendChild(ctTreeStatus);
+        }
+      },
+
       attached: function() {
         this.update();
         setInterval(this.update.bind(this), kUpdateFrequency);
       },
 
       update: function() {
         // FIXME: These shouldn't update if there's already an update in progress.
         this.revisionLog.update();
         this.$.analyzer.update();
-        var treeStatuses = this.shadowRoot.querySelectorAll("ct-tree-status");
-        for (var i = 0; i < treeStatuses.length; i++)
-          treeStatuses[i].update();
+        for (var i = 0; i < this.treeStatuses.length; i++)

[ojan, 2014/08/07 18:30:48]

If treeStatuses is an object, you can still iterate. sugarjs has a nice iterator
for objects:
Object.keys(this.treeStatuses, function(tree, status) { ... });

[dsinclair, 2014/08/08 13:43:47]

Done.

+          this.treeStatuses[i].update();
       },
     });
   })();
   </script>
 </polymer-element>