Port first garden-o-matic component over to polymer

Tools/GardeningServer/ui/ct-results-comparison.html

Index: Tools/GardeningServer/ui/ct-results-comparison.html
diff --git a/Tools/GardeningServer/ui/ct-results-comparison.html b/Tools/GardeningServer/ui/ct-results-comparison.html
new file mode 100644
index 0000000000000000000000000000000000000000..e752e2bc6139756ae9518a4cce5a41a2f2cd8584
--- /dev/null
+++ b/Tools/GardeningServer/ui/ct-results-comparison.html
@@ -0,0 +1,66 @@
+<!--
+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="ct-results-comparison" attributes="type expectedUrl actualUrl diffUrl">
+    <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>
+
+        <template repeat="{{resultKind in _resultKinds}}">
+            <div class="container">
+                <h2>{{resultKind}}</h2>
+                <div class="result">
+                    <template if="{{type == _kImageType && _urlForKind(resultKind)}}">

[esprehn, 2014/06/23 05:25:05]

This is a very contorted way to do this. You really just want two different
components I think. All this _urlForKind stuff and the loop is very weird usage
of MDV and components.

[ojan, 2014/06/23 05:43:32]

I'm not sure what you're suggesting I do. What would the two components do? The
_urlForKind check is so that we don't create the element if that attribute
wasn't set. The one below is obviously to get the right attribute's value.

+                        <img src="{{_urlForKind(resultKind)}}">
+                    </template>
+                    <template if="{{type == _kTextType && _urlForKind(resultKind)}}">
+                        <iframe src="{{_urlForKind(resultKind)}}"></iframe>
+                    </template>
+                    <template if="{{type == _kAudioType && _urlForKind(resultKind)}}">
+                        <audio controls src="{{_urlForKind(resultKind)}}"></audio>
+                    </template>
+                </div>
+            </div>
+        </template>
+    </template>
+    <script>
+        Polymer({

[esprehn, 2014/06/23 05:25:05]

You need to initialize your properties you've set to data bind to attrs to
default values here.

[ojan, 2014/06/23 05:43:32]

Why? It seems to work without. Not disagreeing, just trying to understand how
polymer works better.

+            _urlForKind: function(kind) {
+                if (kind == "Expected")
+                    return this.expectedUrl;
+                if (kind == "Actual")
+                    return this.actualUrl;
+                if (kind == "Diff")
+                    return this.diffUrl;
+                console.error('Unknown kind: ' + kind);
+            },
+            _kAudioType: results.kAudioType,
+            _kImageType: results.kImageType,
+            _kTextType: results.kTextType,
+            _resultKinds: ["Expected",  "Actual",  "Diff"],
+        });
+    </script>
+</polymer-element>