Move treestatus.js to a model class.

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
index a65ef667a00c84a370b70355f8668d689e31cfc1..e4e7928531b9b8b7c5738afd32501610497a9454 100644
--- a/Tools/GardeningServer/ui/ct-unexpected-failures.html
+++ b/Tools/GardeningServer/ui/ct-unexpected-failures.html
@@ -6,6 +6,7 @@ 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">
@@ -14,23 +15,8 @@ found in the LICENSE file.
 
 <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>
@@ -44,6 +30,23 @@ found in the LICENSE file.
       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);
@@ -53,9 +56,8 @@ found in the LICENSE file.
         // 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();
       },
     });
   })();