Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(249)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: appengine/sheriff_o_matic/ui/ct-results-comparison-zoomer.html

Issue 1315693002: SoM: upgrade Polymer from 0.5 to 1.0 Base URL: https://chromium.googlesource.com/infra/infra.git@master
Patch Set: get bower_components from polymer_1.0.4 Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « appengine/sheriff_o_matic/ui/ct-results-comparison.html ('k') | appengine/sheriff_o_matic/ui/ct-results-detail.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!-- 1 <!--
2 Copyright 2014 The Chromium Authors. All rights reserved. 2 Copyright 2014 The Chromium Authors. All rights reserved.
3 Use of this source code is governed by a BSD-style license that can be 3 Use of this source code is governed by a BSD-style license that can be
4 found in the LICENSE file. 4 found in the LICENSE file.
5 --> 5 --><html><head><dom-module id="ct-results-comparison-zoomer">
6 6 <style>
7 <polymer-element name="ct-results-comparison-zoomer" attributes="expectedUrl act ualUrl diffUrl position">
8 <template>
9 <style>
10 :host { 7 :host {
11 background-color: silver; 8 background-color: silver;
12 border: 1px solid gray; 9 border: 1px solid gray;
13 box-shadow: 0 0 5px rgba(0, 0, 0, 0.75); 10 box-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
14 display: flex; 11 display: flex;
15 pointer-events: none; 12 pointer-events: none;
16 position: fixed; 13 position: fixed;
17 top: 0; 14 top: 0;
18 width: 100%; 15 width: 100%;
19 z-index: 1; 16 z-index: 1;
(...skipping 11 matching lines...) Expand all
31 .container { 28 .container {
32 border: 1px solid gray; 29 border: 1px solid gray;
33 height: 400px; 30 height: 400px;
34 line-height: 0; 31 line-height: 0;
35 } 32 }
36 33
37 .container > img { 34 .container > img {
38 display: none; 35 display: none;
39 } 36 }
40 </style> 37 </style>
38 <template>
41 39
42 <div> 40 <div>
43 <div class="label">Expected</div> 41 <div class="label">Expected</div>
44 <div id="expectedZoomer" class="container"> 42 <div id="expectedZoomer" class="container">
45 <img src="{{ expectedUrl }}"> 43 <img src="{{ expectedUrl }}">
46 <canvas></canvas> 44 <canvas></canvas>
47 </div> 45 </div>
48 </div> 46 </div>
49 47
50 <div> 48 <div>
51 <div class="label">Actual</div> 49 <div class="label">Actual</div>
52 <div id="actualZoomer" class="container"> 50 <div id="actualZoomer" class="container">
53 <img src="{{ actualUrl }}"> 51 <img src="{{ actualUrl }}">
54 <canvas></canvas> 52 <canvas></canvas>
55 </div> 53 </div>
56 </div> 54 </div>
57 55
58 <div> 56 <div>
59 <div class="label">Diff</div> 57 <div class="label">Diff</div>
60 <div id="diffZoomer" class="container"> 58 <div id="diffZoomer" class="container">
61 <img src="{{ diffUrl }}"> 59 <img src="{{ diffUrl }}">
62 <canvas></canvas> 60 <canvas></canvas>
63 </div> 61 </div>
64 </div> 62 </div>
65 </template> 63 </template>
66 <script> 64 <script>
67 (function() { 65 (function () {
68 var kResultWidth = 800; 66 var kResultWidth = 800;
69 var kResultHeight = 600; 67 var kResultHeight = 600;
70 var kZoomFactor = 6; 68 var kZoomFactor = 6;
71 var kZoomedResultWidth = kResultWidth * kZoomFactor; 69 var kZoomedResultWidth = kResultWidth * kZoomFactor;
72 var kZoomedResultHeight = kResultHeight * kZoomFactor; 70 var kZoomedResultHeight = kResultHeight * kZoomFactor;
73 71 Polymer({
74 Polymer({ 72 is: 'ct-results-comparison-zoomer',
75 expectedUrl: '', 73 properties: {
76 actualUrl: '', 74 _drawScheduled: {
77 diffUrl: '', 75 type: Boolean,
78 position: null, 76 value: false
79 _drawScheduled: false, 77 },
80 78 actualUrl: {
81 positionChanged: function() { 79 type: String,
82 if (!this._drawScheduled) { 80 value: '',
83 this._drawScheduled = true; 81 notify: true
84 this.async(this._drawAll); 82 },
83 diffUrl: {
84 type: String,
85 value: '',
86 notify: true
87 },
88 expectedUrl: {
89 type: String,
90 value: '',
91 notify: true
92 },
93 position: {
94 value: null,
95 notify: true,
96 observer: 'positionChanged'
97 }
98 },
99 positionChanged: function () {
100 if (!this._drawScheduled) {
101 this._drawScheduled = true;
102 this.async(this._drawAll);
103 }
104 },
105 _drawAll: function () {
106 this._drawScheduled = false;
107 if (!this.position)
108 return;
109 this._draw(this.$.expectedZoomer);
110 this._draw(this.$.actualZoomer);
111 this._draw(this.$.diffZoomer);
112 },
113 _draw: function (imageContainer) {
114 var canvas = imageContainer.querySelector('canvas');
115 canvas.width = imageContainer.clientWidth;
116 canvas.height = imageContainer.clientHeight;
117 this._drawCanvas(canvas.getContext('2d'), imageContainer);
118 },
119 _drawCanvas: function (context, imageContainer) {
120 context.imageSmoothingEnabled = false;
121 context.translate(imageContainer.clientWidth / 2, imageContainer.clien tHeight / 2);
122 context.translate(-this.position.x * kZoomedResultWidth, -this.positio n.y * kZoomedResultHeight);
123 context.strokeRect(-1.5, -1.5, kZoomedResultWidth + 2, kZoomedResultHe ight + 2);
124 context.scale(kZoomFactor, kZoomFactor);
125 context.drawImage(imageContainer.querySelector('img'), 0, 0);
85 } 126 }
86 }, 127 });
87 128 }());
88 _drawAll: function() {
89 this._drawScheduled = false;
90
91 if (!this.position)
92 return;
93
94 this._draw(this.$.expectedZoomer);
95 this._draw(this.$.actualZoomer);
96 this._draw(this.$.diffZoomer);
97 },
98
99 _draw: function(imageContainer) {
100 var canvas = imageContainer.querySelector('canvas');
101 canvas.width = imageContainer.clientWidth;
102 canvas.height = imageContainer.clientHeight;
103 this._drawCanvas(canvas.getContext('2d'), imageContainer);
104 },
105
106 _drawCanvas: function(context, imageContainer) {
107 context.imageSmoothingEnabled = false;
108 context.translate(imageContainer.clientWidth / 2, imageContainer.clientH eight / 2);
109 context.translate(-this.position.x * kZoomedResultWidth, -this.position. y * kZoomedResultHeight);
110 context.strokeRect(-1.5, -1.5, kZoomedResultWidth + 2, kZoomedResultHeig ht + 2);
111 context.scale(kZoomFactor, kZoomFactor);
112 context.drawImage(imageContainer.querySelector('img'), 0, 0);
113 },
114 });
115 })();
116 </script> 129 </script>
117 </polymer-element> 130 </dom-module>
OLDNEW
« no previous file with comments | « appengine/sheriff_o_matic/ui/ct-results-comparison.html ('k') | appengine/sheriff_o_matic/ui/ct-results-detail.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698