Port first garden-o-matic component over to polymer

Tools/GardeningServer/ui/results-comparison.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.
+-->
+
+ <polymer-element name="results-comparison" attributes="type urlsByKind">

[esprehn, 2014/06/22 05:15:20]

You should really pick a prefix for your app and use it on all your components.
I might suggest "gm-"

[ojan, 2014/06/22 06:33:19]

Yeah, I started with gom-results-comparison, but that seemed so wordy.

[abarth-chromium, 2014/06/22 14:43:51]

Yeah, we need a prefix.  Don't worry about it being wordy.  We can rename things
as we go.

[ojan, 2014/06/22 22:49:22]

At esprehns suggestion, I went with ct- for chromium tools. I think eventually
we want most of these widgets to be shared across dashboards and I'm not too
worried about naming conflicts within the chromium tools themselves. In the rare
cases where they happen, they can easily be worked around.

+    <template>
+        <style>
+            :host {
+                display: flex;
+                flex-wrap: wrap;
+                width: 100%;
+            }
+            .container {
+                flex: 1;
+                min-width: 300px;
+            }
+            .result {
+                border: 1px solid gray;
+            }
+            iframe {
+                border: none;
+                width: 100%;
+                height: 400px;
+            }
+            img {
+                width: 100%;
+            }
+        </style>
+
+        <div class="container">
+            <h2>Expected</h2>
+            <div id="expected" class="result"></div>
+        </div>
+
+        <div class="container">
+            <h2>Actual</h2>
+            <div id="actual" class="result"></div>
+        </div>
+
+        <div class="container">
+            <h2>Diff</h2>
+            <div id="diff" class="result"></div>
+        </div>
+    </template>
+    <script>
+        Polymer("results-comparison", {
+            type: "",
+            urlsByKind: null,
+
+            _update: function() {
+                if (!this.type || !this.urlsByKind)
+                    return;
+
+                for (var kind in this.urlsByKind) {
+                    var container = this.$[kind];
+                    if (!container)
+                        throw new Error('Passed in an invalid comparison kind: ' + kind);
+
+                    var result;
+                    if (this.type == results.kImageType) {
+                        result = document.createElement('img');

[esprehn, 2014/06/22 05:15:20]

This can actually be new Image() and the below one can be new Audio() if you
want.

[ojan, 2014/06/22 06:33:19]

Why is that better? Seems better to me to use document.createElement for
everything than to use constructors for some things and createElement for
others.

[ojan, 2014/06/22 22:49:22]

This is also gone now.

+                    } else if (this.type == results.kAudioType) {
+                        result = document.createElement('audio');
+                        result.controls = 'controls';
+                    } else {
+                        result = document.createElement('iframe');

[esprehn, 2014/06/22 05:15:20]

else if (this.type == == results.kIframeType) ?

Otherwise that kUndefinedType creates iframes.

Note that a somewhat more idiomatic JS way would be to use a table of functions.
It probably performs slightly better too, but this widget isn't so common that
it matters.

var constructors = {
  "image": function() {
     return new Image();
  },
  "audio": function() {
    ...
  },
  ...
}

and this becomes one line with:

result = constructors[type]();

+                    }
+
+                    result.src = this.urlsByKind[kind];
+                    result.classList.add(kind);
+
+                    container.innerHTML = '';
+                    container.appendChild(result);
+                }
+            },

[abarth-chromium, 2014/06/22 14:43:51]

Why not use <template> to do this work?  You're re-implementing MDV.

[ojan, 2014/06/22 22:49:22]

Lol. Just wasn't thinking as I copy-pasted the code over.

+
+            typeChanged: function(oldValue, newValue) {
+                this._update();
+            },
+
+            urlsByKindChanged: function(oldValue, newValue) {
+                this._update();
+            },
+        });
+    </script>
+</polymer-element>