Port pixelzoomer.js/css to ct-results-comparison.

This broke when I changed the results comparison to use polymer components.
This isn't 100% the same as the old pixelzoomer code. I took this as an
opportunity to simplify it.

Also, change the 4-space indent to 2-space indent and replace
endOfMicroTask calls with requestAnimationFrame to match the rest of
the codebase.

NOTRY=true

Review URL: https://codereview.chromium.org/403983002

git-svn-id: svn://svn.chromium.org/blink/trunk@178536 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Tools/GardeningServer/run-unittests.html

@@ -67,12 +67,13 @@ THE POSSIBILITY OF SUCH DAMAGE.
 <link rel="import" href="ui/ct-commit-data-tests.html">
 <link rel="import" href="ui/ct-commit-tests.html">
 <link rel="import" href="ui/ct-embedded-flakiness-dashboard-tests.html">
+<link rel="import" href="ui/ct-failing-builders-tests.html">
 <link rel="import" href="ui/ct-failure-card-tests.html">
 <link rel="import" href="ui/ct-failure-grouper-tests.html">
 <link rel="import" href="ui/ct-failure-stream-tests.html">
-<link rel="import" href="ui/ct-failing-builders-tests.html">
 <link rel="import" href="ui/ct-results-by-builder-tests.html">
 <link rel="import" href="ui/ct-results-comparison-tests.html">
+<link rel="import" href="ui/ct-results-comparison-zoomer-tests.html">
 <link rel="import" href="ui/ct-results-detail-tests.html">
 <link rel="import" href="ui/ct-results-panel-tests.html">
 <link rel="import" href="ui/ct-test-list-tests.html">

third_party/WebKit/Tools/GardeningServer/ui/ct-results-comparison-tests.html

@@ -11,32 +11,65 @@ found in the LICENSE file.
 
 module("ct-results-comparison");
 
-asyncTest("basic", 7, function() {
-    var comparison = document.createElement('ct-results-comparison');
-    comparison.type = results.kImageType;
-
-    var expected = "http://domain.com/dummy-expected";
-    var actual = "http://domain.com/dummy-actual";
-    var diff = "http://domain.com/dummy-diff";
-
-    comparison.expectedUrl = expected;
-    comparison.actualUrl = actual;
-    comparison.diffUrl = diff;
-
-    Platform.endOfMicrotask(function() {
-        var outputs = comparison.shadowRoot.querySelectorAll('ct-test-output');
-        equal(outputs.length, 3);
-
-        // Verify we didn't typo any of the bindings.
-        equal(outputs[0].type, results.kImageType);
-        equal(outputs[0].url, expected);
-        equal(outputs[1].type, results.kImageType);
-        equal(outputs[1].url, actual);
-        equal(outputs[2].type, results.kImageType);
-        equal(outputs[2].url, diff);
+asyncTest("basic", 8, function() {
+  var comparison = document.createElement('ct-results-comparison');
+  comparison.type = results.kImageType;
 
+  var expected = "http://domain.com/dummy-expected";
+  var actual = "http://domain.com/dummy-actual";
+  var diff = "http://domain.com/dummy-diff";
+
+  comparison.expectedUrl = expected;
+  comparison.actualUrl = actual;
+  comparison.diffUrl = diff;
+
+  requestAnimationFrame(function() {
+    var outputs = comparison.shadowRoot.querySelectorAll('ct-test-output');
+    equal(outputs.length, 3);
+
+    // Verify we didn't typo any of the bindings.
+    equal(outputs[0].type, results.kImageType);
+    equal(outputs[0].url, expected);
+    equal(outputs[1].type, results.kImageType);
+    equal(outputs[1].url, actual);
+    equal(outputs[2].type, results.kImageType);
+    equal(outputs[2].url, diff);
+
+    equal(comparison.shadowRoot.querySelectorAll('ct-results-comparison-zoomer').length, 0);
+
+    start();
+  });
+});
+
+asyncTest('zoomer', 3, function() {
+  // FIXME: Create a MouseEventMock class to use here.
+  var mockMouseEvent = {
+    clientX: 0,
+    clientY: 0,
+    target: document.createElement('div'),
+  }
+
+  var imageComparison = document.createElement('ct-results-comparison');
+  imageComparison.type = results.kImageType;
+
+  var nonImageComparison = document.createElement('ct-results-comparison');
+
+  requestAnimationFrame(function() {
+    imageComparison._handleMouseMove(mockMouseEvent);
+    nonImageComparison._handleMouseMove(mockMouseEvent);
+
+    requestAnimationFrame(function() {
+      equal(imageComparison.shadowRoot.querySelectorAll('ct-results-comparison-zoomer').length, 1);
+      equal(nonImageComparison.shadowRoot.querySelectorAll('ct-results-comparison-zoomer').length, 0);
+
+      imageComparison.type = 'foo';
+
+      requestAnimationFrame(function() {
+        equal(imageComparison.shadowRoot.querySelectorAll('ct-results-comparison-zoomer').length, 0);
         start();
+      });
     });
+  });
 });
 
 })()

third_party/WebKit/Tools/GardeningServer/ui/ct-results-comparison-zoomer-tests.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="ct-results-comparison-zoomer.html">
+
+<script>
+(function () {
+
+module("ct-results-comparison-zoomer");
+
+asyncTest("no-position", 2, function() {
+  var zoomer = document.createElement('ct-results-comparison-zoomer');
+  // FIXME: This should set zoomer.position instead, but there's no way
+  // to get between the microtask and requestAnimationFrame to verify the
+  // behavior.
+  zoomer.positionChanged();
+  ok(zoomer._drawScheduled);
+
+  requestAnimationFrame(function() {
+    ok(!zoomer._drawScheduled);
+    start();
+  });
+});
+
+test("draw", 3, function() {
+  // Hard to verify correct behavior here, but at least make sure the
+  // code executes without throwing errors.
+
+  var zoomer = document.createElement('ct-results-comparison-zoomer');
+
+  try {
+    zoomer._drawAll();
+    ok(true);
+  } catch(e) {
+    ok(false);
+  }
+
+  // FIXME: Use a proper model class instead of a dumb object.
+  zoomer.position = {x: 0, y: 0};
+  try {
+    zoomer._drawAll();
+    ok(true);
+  } catch(e) {
+    ok(false);
+  }
+
+  try {
+    zoomer._draw(zoomer.$.diffZoomer);
+    ok(true);
+  } catch(e) {
+    ok(false);
+  }
+});
+
+})()
+</script>

third_party/WebKit/Tools/GardeningServer/ui/ct-results-comparison-zoomer.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="ct-results-comparison-zoomer" attributes="expectedUrl actualUrl diffUrl position">
+  <template>
+    <style>
+      :host {
+        background-color: silver;
+        border: 1px solid gray;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
+        display: flex;
+        pointer-events: none;
+        position: fixed;
+        top: 0;
+        width: 100%;
+      }
+
+      :host > * {
+        flex: 1;
+      }
+
+      .label {
+        background-color: white;
+        text-align: center;
+      }
+
+      .container {
+        border: 1px solid gray;
+        height: 400px;
+        line-height: 0;
+      }
+
+      .container > img {
+        display: none;
+      }
+    </style>
+
+    <div>
+      <div class="label">Expected</div>
+      <div id="expectedZoomer" class="container">
+        <img src="{{ expectedUrl }}">
+        <canvas></canvas>
+      </div>
+    </div>
+
+    <div>
+      <div class="label">Actual</div>
+      <div id="actualZoomer" class="container">
+        <img src="{{ actualUrl }}">
+        <canvas></canvas>
+      </div>
+    </div>
+
+    <div>
+      <div class="label">Diff</div>
+      <div id="diffZoomer" class="container">
+        <img src="{{ diffUrl }}">
+        <canvas></canvas>
+      </div>
+    </div>
+  </template>
+  <script>
+  (function() {
+    var kResultWidth = 800;
+    var kResultHeight = 600;
+    var kZoomFactor = 6;
+    var kZoomedResultWidth = kResultWidth * kZoomFactor;
+    var kZoomedResultHeight = kResultHeight * kZoomFactor;
+
+    Polymer({
+      expectedUrl: '',
+      actualUrl: '',
+      diffUrl: '',
+      position: null,
+      _drawScheduled: false,
+
+      positionChanged: function() {
+        if (!this._drawScheduled) {
+          this._drawScheduled = true;
+          this.async(this._drawAll);
+        }
+      },
+
+      _drawAll: function() {
+        this._drawScheduled = false;
+
+        if (!this.position)
+          return;
+
+        this._draw(this.$.expectedZoomer);
+        this._draw(this.$.actualZoomer);
+        this._draw(this.$.diffZoomer);
+      },
+
+      _draw: function(imageContainer) {
+        var canvas = imageContainer.querySelector('canvas');
+        canvas.width = imageContainer.clientWidth;
+        canvas.height = imageContainer.clientHeight;
+
+        var ctx = canvas.getContext('2d');
+        ctx.imageSmoothingEnabled = false;
+        ctx.translate(imageContainer.clientWidth / 2, imageContainer.clientHeight / 2);
+        ctx.translate(-this.position.y * kZoomedResultWidth, -this.position.x * kZoomedResultHeight);
+        ctx.strokeRect(-1.5, -1.5, kZoomedResultWidth + 2, kZoomedResultHeight + 2);
+        ctx.scale(kZoomFactor, kZoomFactor);
+        ctx.drawImage(imageContainer.querySelector('img'), 0, 0);
+      },
+    });
+  })();
+  </script>
+</polymer-element>

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

@@ -4,33 +4,78 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 
+<link rel="import" href="ct-results-comparison-zoomer.html">
 <link rel="import" href="ct-test-output.html">
 
-<polymer-element name="ct-results-comparison" attributes="type expectedUrl actualUrl diffUrl" noscript>
-    <template>
-        <style>
-            :host {
-                display: flex;
-                flex-wrap: wrap;
-                width: 100%;
-            }
-            .container {
-                flex: 1;
-                min-width: 300px;
-            }
-        </style>
-
-        <div class="container">
-            <h2>Expected</h2>
-            <ct-test-output type="{{type}}" url="{{expectedUrl}}"></ct-test-output>
-        </div>
-        <div class="container">
-            <h2>Actual</h2>
-            <ct-test-output type="{{type}}" url="{{actualUrl}}"></ct-test-output>
-        </div>
-        <div class="container">
-            <h2>Diff</h2>
-            <ct-test-output type="{{type}}" url="{{diffUrl}}"></ct-test-output>
-        </div>
+<polymer-element name="ct-results-comparison" attributes="type expectedUrl actualUrl diffUrl">
+  <template>
+    <style>
+      .main-content {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+      }
+
+      .main-content > * {
+        flex: 1;
+        min-width: 300px;
+      }
+    </style>
+
+    <div class="main-content">
+      <div>
+        <h2>Expected</h2>
+        <ct-test-output type="{{ type }}" url="{{ expectedUrl }}"
+             on-mouseout="{{ _handleMouseOut }}" on-mousemove="{{ _handleMouseMove }}"></ct-test-output>
+      </div>
+      <div>
+        <h2>Actual</h2>
+        <ct-test-output type="{{ type }}" url="{{ actualUrl }}"
+             on-mouseout="{{ _handleMouseOut }}" on-mousemove="{{ _handleMouseMove }}"></ct-test-output>
+      </div>
+      <div>
+        <h2>Diff</h2>
+        <ct-test-output type="{{ type }}" url="{{ diffUrl }}"
+             on-mouseout="{{ _handleMouseOut }}" on-mousemove="{{ _handleMouseMove }}"></ct-test-output>
+      </div>
+    </div>
+
+    <template if="{{ _zoomPosition }}">
+      <ct-results-comparison-zoomer
+          expectedUrl="{{ expectedUrl }}"
+          actualUrl="{{ actualUrl }}"
+          diffUrl="{{ diffUrl }}"
+          position="{{ _zoomPosition }}"></ct-results-comparison-zoomer>
     </template>
+  </template>
+  <script>
+    Polymer({
+      type: '',
+      expectedUrl: '',
+      actualUrl: '',
+      diffUrl: '',
+      _zoomPosition: null,
+
+      typeChanged: function() {
+        this._zoomPosition = null;
+      },
+
+      _handleMouseOut: function(e) {
+        this._zoomPosition = null;
+      },
+
+      _handleMouseMove: function(e) {
+        if (this.type != 'image')
+          return;
+
+        // FIXME: This assumes that the ct-test-output only contains an image.
+        var targetLocation = e.target.getBoundingClientRect();
+        // FIXME: Use a proper model class instead of a dumb object.
+        this._zoomPosition = {
+          x: (e.clientX - targetLocation.left) / targetLocation.width,
+          y: (e.clientY - targetLocation.top) / targetLocation.height,
+        };
+      },
+    });
+  </script>
 </polymer-element>

third_party/WebKit/Tools/GardeningServer/ui/ct-test-output.html

@@ -9,6 +9,7 @@ found in the LICENSE file.
         <style>
             .result {
                 border: 1px solid gray;
+                line-height: 0;
             }
             iframe {
                 border: none;