rebaseline_server: disable image magnifier, for huge UI speedup

BUG=skia:2248
NOTREECHECKS=True
NOTRY=True
R=rmistry@google.com
TBR=rmistry

Author: epoger@google.com

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

git-svn-id: http://skia.googlecode.com/svn/trunk@13727 2bbb7eff-a529-9590-31e7-b0007b416f81

gm/rebaseline_server/static/diff_viewer.js

@@ -1,177 +0,0 @@
-// What portion of the image width will be taken up by the magnifier.
-var MAGNIFIER_WIDTH_FACTOR = 0.66;
-
-angular.module('diff_viewer', []).directive('imgCompare', function() {
-  // Custom directive for comparing (3-way) images
-  return {
-      restrict: 'E', // The directive can be used as an element name
-      replace: true, // The directive replaces itself with the template
-      template: '<canvas/>',
-      scope: true,
-      link: function(scope, elm, attrs, ctrl) {
-          var image = new Image();
-          var canvas = elm[0];
-          var ctx = canvas.getContext('2d');
-          var magnifyContent = false;
-
-          // When the type attribute changes, set magnifyContent appropriately.
-          attrs.$observe('type', function(value) {
-              switch(attrs.type) {
-                case "differingPixelsInWhite":
-                    magnifyContent = true;
-                    break;
-                case "differencePerPixel":
-                    break;
-                case "baseline":
-                    magnifyContent = true;
-                    break;
-                case "test":
-                    magnifyContent = true;
-                    break;
-                default:
-                    console.log("Unknown type attribute on <img-compare>: " + value);
-                    return;
-              }
-          });
-
-          // Reset ImageController's scale and render the image;
-          // we need to do this whenever attrs.src or attrs.width changes.
-          scope.setScaleAndRender = function() {
-              // compute the scaled image width/height for image and canvas
-              scope.setImgScale(image.width, attrs.width);
-
-              // Set canvas to correct size
-              canvas.width = image.width / scope.imgScaleDivisor;
-              canvas.height = image.height / scope.imgScaleDivisor;
-
-              scope.renderImage();
-          };
-          attrs.$observe('src', function(value) {
-              image.src = attrs.src;
-              image.onload = scope.setScaleAndRender;
-          });
-          attrs.$observe('width', scope.setScaleAndRender);
-
-          // When the magnify attribute changes, render the magnified rect at
-          // the default zoom level.
-          scope.$watch('magnifyCenter', function(magCenter) {
-              if (!magnifyContent) {
-                  return;
-              }
-
-              scope.renderImage();
-
-              if (!magCenter) {
-                  return;
-              }
-
-              var magX = magCenter.x - scope.magnifierHalfWidth;
-              var magY = magCenter.y - scope.magnifierHalfHeight;
-
-              var magMaxX = canvas.width - scope.magnifierWidth;
-              var magMaxY = canvas.height - scope.magnifierHeight;
-
-              var magRect = { x: Math.max(0, Math.min(magX, magMaxX)),
-                              y: Math.max(0, Math.min(magY, magMaxY)),
-                              width: scope.magnifierWidth,
-                              height: scope.magnifierHeight
-                            };
-
-              var imgRect = { x: (magCenter.x * scope.imgScaleDivisor) - scope.magnifierHalfWidth,
-                              y: (magCenter.y * scope.imgScaleDivisor) - scope.magnifierHalfHeight,
-                              width: scope.magnifierWidth,
-                              height: scope.magnifierHeight
-                            };
-
-              // draw the magnified image
-              ctx.clearRect(magRect.x, magRect.y, magRect.width, magRect.height);
-              ctx.drawImage(image, imgRect.x, imgRect.y, imgRect.width, imgRect.height,
-                            magRect.x, magRect.y, magRect.width, magRect.height);
-
-              // draw the outline rect
-              ctx.beginPath();
-              ctx.rect(magRect.x, magRect.y, magRect.width, magRect.height);
-              ctx.lineWidth = 2;
-              ctx.strokeStyle = 'red';
-              ctx.stroke();
-
-          });
-
-          // render the image to the canvas. This is often done every frame prior
-          // to any special effects (i.e. magnification).
-          scope.renderImage = function() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-          };
-
-          // compute a rect (x,y,width,height) that represents the bounding box for
-          // the magnification effect
-          scope.computeMagnifierOutline = function(event) {
-            var scaledWidth = scope.magnifierWidth / scope.imgScaleDivisor;
-            var scaledHeight = scope.magnifierHeight / scope.imgScaleDivisor;
-            return {
-              x: event.offsetX - (scaledWidth * 0.5),
-              y: event.offsetY  - (scaledHeight * 0.5),
-              width: scaledWidth,
-              height: scaledHeight
-            };
-          };
-
-          // event handler for mouse events that triggers the magnification
-          // effect across the 4 images being compared.
-          scope.MagnifyDraw = function(event, startMagnify) {
-              if (startMagnify) {
-                  scope.setMagnifierState(true);
-              }  else if (!scope.magnifierOn) {
-                  return;
-              }
-
-              scope.renderImage();
-
-              // render the magnifier outline rect
-              var rect = scope.computeMagnifierOutline(event);
-              ctx.save();
-              ctx.beginPath();
-              ctx.rect(rect.x, rect.y, rect.width, rect.height);
-              ctx.lineWidth = 2;
-              ctx.strokeStyle = 'red';
-              ctx.stroke();
-              ctx.restore();
-
-              // update scope on baseline / test that will cause them to render
-              scope.setMagnifyCenter({x: event.offsetX, y: event.offsetY});
-          };
-
-          // event handler that triggers the end of the magnification effect and
-          // resets all the canvases to their original state.
-          scope.MagnifyEnd = function(event) {
-              scope.renderImage();
-              // update scope on baseline / test that will cause them to render
-              scope.setMagnifierState(false);
-              scope.setMagnifyCenter(undefined);
-          };
-      }
-  };
-});
-
-function ImageController($scope, $http, $location, $timeout, $parse) {
-  $scope.imgScaleDivisor = 1.0;
-  $scope.magnifierOn = false;
-  $scope.magnifyCenter = undefined;
-
-  $scope.setImgScale = function(srcImageWidth, displayWidth) {
-    $scope.imgScaleDivisor = srcImageWidth / displayWidth;
-    $scope.magnifierWidth = displayWidth * MAGNIFIER_WIDTH_FACTOR;
-    $scope.magnifierHeight = $scope.magnifierWidth;
-    $scope.magnifierHalfWidth = $scope.magnifierWidth / 2;
-    $scope.magnifierHalfHeight = $scope.magnifierHeight / 2;
-  }
-
-  $scope.setMagnifierState = function(magnifierOn) {
-    $scope.magnifierOn = magnifierOn;
-  }
-
-  $scope.setMagnifyCenter = function(magnifyCenter) {
-    $scope.magnifyCenter = magnifyCenter;
-  }
-}

gm/rebaseline_server/static/loader.js

@@ -5,7 +5,7 @@
  */
 var Loader = angular.module(
     'Loader',
-    ['ConstantsModule', 'diff_viewer']
+    ['ConstantsModule']
 );
 
 Loader.directive(

gm/rebaseline_server/static/view.html

@@ -6,7 +6,6 @@
   <title ng-bind="windowTitle"></title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
   <script src="constants.js"></script>
-  <script src="diff_viewer.js"></script>
   <script src="loader.js"></script>
   <link rel="stylesheet" href="view.css">
 </head>
@@ -275,7 +274,7 @@
           </th>
         </tr>
 
-        <tr ng-repeat="imagePair in limitedImagePairs" ng-controller="ImageController" results-updated-callback-directive>
+        <tr ng-repeat="imagePair in limitedImagePairs" results-updated-callback-directive>
           <td>
             {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__RESULT_TYPE]}}
             <br>
@@ -343,9 +342,9 @@
           <td valign="bottom" width="{{imageSize}}">
             <div ng-if="imagePair[constants.KEY__IMAGE_A_URL] != null">
               <a href="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" target="_blank">View Image</a><br/>
-              <img-compare ng-if="showThumbnails"
-                           type="baseline" width="{{imageSize}}"
-                           src="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" />
+              <img ng-if="showThumbnails"
+                   width="{{imageSize}}"
+                   src="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" />
             </div>
             <div ng-show="imagePair[constants.KEY__IMAGE_A_URL] == null"
                  style="text-align:center">
@@ -357,9 +356,9 @@
           <td valign="bottom" width="{{imageSize}}">
             <div ng-if="imagePair[constants.KEY__IMAGE_B_URL] != null">
               <a href="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" target="_blank">View Image</a><br/>
-              <img-compare ng-if="showThumbnails"
-                           type="test" width="{{imageSize}}"
-                           src="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" />
+              <img ng-if="showThumbnails"
+                   width="{{imageSize}}"
+                   src="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" />
             </div>
             <div ng-show="imagePair[constants.KEY__IMAGE_B_URL] == null"
                  style="text-align:center">
@@ -376,9 +375,9 @@
               ({{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__NUM_DIFF_PIXELS]}})
               <br/>
               <a href="/static/generated-images/whitediffs/{{getImageDiffRelativeUrl(imagePair)}}" target="_blank">View Image</a><br/>
-              <img-compare ng-if="showThumbnails"
-                           type="differingPixelsInWhite" width="{{imageSize}}"
-                           src="/static/generated-images/whitediffs/{{getImageDiffRelativeUrl(imagePair)}}" />
+              <img ng-if="showThumbnails"
+                   width="{{imageSize}}"
+                   src="/static/generated-images/whitediffs/{{getImageDiffRelativeUrl(imagePair)}}" />
             </div>
             <div ng-show="!imagePair[constants.KEY__IS_DIFFERENT]"
                  style="text-align:center">
@@ -395,14 +394,10 @@
               {{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__MAX_DIFF_PER_CHANNEL]}}
               <br/>
               <a href="/static/generated-images/diffs/{{getImageDiffRelativeUrl(imagePair)}}" target="_blank">View Image</a><br/>
-              <img-compare ng-if="showThumbnails"
-                           ng-style="{backgroundColor: pixelDiffBgColor}"
-                           type="differencePerPixel" width="{{imageSize}}"
-                           src="/static/generated-images/diffs/{{getImageDiffRelativeUrl(imagePair)}}"
-                           ng-mousedown="MagnifyDraw($event, true)"
-                           ng-mousemove="MagnifyDraw($event, false)"
-                           ng-mouseup="MagnifyEnd($event)"
-                           ng-mouseleave="MagnifyEnd($event)" />
+              <img ng-if="showThumbnails"
+                   ng-style="{backgroundColor: pixelDiffBgColor}"
+                   width="{{imageSize}}"
+                   src="/static/generated-images/diffs/{{getImageDiffRelativeUrl(imagePair)}}"/>
             </div>
             <div ng-show="!imagePair[constants.KEY__IS_DIFFERENT]"
                  style="text-align:center">