Add type annotations to gallery/js/image_editor/image_view.js.

ui/file_manager/gallery/js/image_editor/image_view.js

 // 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.
 
 /**
  * The overlay displaying the image.
  *
- * @param {HTMLElement} container The container element.
- * @param {Viewport} viewport The viewport.
+ * @param {!HTMLElement} container The container element.
+ * @param {!Viewport} viewport The viewport.
  * @constructor
  * @extends {ImageBuffer.Overlay}
+ * @struct
  */
 function ImageView(container, viewport) {
   ImageBuffer.Overlay.call(this);
 
   this.container_ = container;
+
+  /**
+   * The viewport.
+   * @type {!Viewport}
+   * @private
+   */
   this.viewport_ = viewport;
-  this.document_ = container.ownerDocument;
+
+  this.document_ = assertInstanceof(container.ownerDocument, HTMLDocument);
   this.contentGeneration_ = 0;
   this.displayedContentGeneration_ = 0;
 
   this.imageLoader_ = new ImageUtil.ImageLoader(this.document_);
   // We have a separate image loader for prefetch which does not get cancelled
   // when the selection changes.
   this.prefetchLoader_ = new ImageUtil.ImageLoader(this.document_);
 
   this.contentCallbacks_ = [];
 
   /**
    * The element displaying the current content.
-   *
    * @type {HTMLCanvasElement}
    * @private
    */
   this.screenImage_ = null;
+
+  /**
+   * The content canvas element.
+   * @type {(HTMLCanvasElement|HTMLImageElement)}
+   * @private
+   */
+  this.contentCanvas_ = null;
+
+  /**
+   * True if the image is a preview (not full res).
+   * @type {boolean}
+   * @private
+   */
+  this.preview_ = false;
+
+  /**
+   * Cached thumbnail image.
+   * @type {HTMLCanvasElement}
+   * @private
+   */
+  this.thumbnailCanvas_ = null;
+
+  /**
+   * The content revision number.
+   * @type {number}
+   * @private
+   */
+  this.contentRevision_ = -1;
+
+  /**
+   * The last load time.
+   * @type {?number}
+   * @private
+   */
+  this.lastLoadTime_ = null;
+
+  /**
+   * Gallery item which is loaded.
+   * @type {Gallery.Item}
+   * @private
+   */
+  this.contentItem_ = null;
+
+  /**
+   * Timer to unload.
+   * @type {?number}
+   * @private
+   */
+  this.unloadTimer_ = null;
 }
 
 /**
  * Duration of transition between modes in ms.
+ * @type {number}
+ * @const
  */
 ImageView.MODE_TRANSITION_DURATION = 350;
 
 /**
  * If the user flips though images faster than this interval we do not apply
  * the slide-in/slide-out transition.
+ * @type {number}
+ * @const
  */
 ImageView.FAST_SCROLL_INTERVAL = 300;
 
-/**
- * Image load type: full resolution image loaded from cache.
- */
-ImageView.LOAD_TYPE_CACHED_FULL = 0;
 
 /**
- * Image load type: screen resolution preview loaded from cache.
+ * Image load types.
+ * @enum {number}
  */
-ImageView.LOAD_TYPE_CACHED_SCREEN = 1;
-
-/**
- * Image load type: image read from file.
- */
-ImageView.LOAD_TYPE_IMAGE_FILE = 2;
-
-/**
- * Image load type: error occurred.
- */
-ImageView.LOAD_TYPE_ERROR = 3;
-
-/**
- * Image load type: the file contents is not available offline.
- */
-ImageView.LOAD_TYPE_OFFLINE = 4;
-
-/**
- * The total number of load types.
- */
-ImageView.LOAD_TYPE_TOTAL = 5;
+ImageView.LoadType = {
+  // Full resolution image loaded from cache.
+  CACHED_FULL: 0,
+  // Screen resolution preview loaded from cache.
+  CACHED_SCREEN: 1,
+  // Image read from file.
+  IMAGE_FILE: 2,
+  // Error occurred.
+  ERROR: 3,
+  // The file contents is not available offline.
+  OFFLINE: 4
+};
 
 /**
  * Target of image load.
  * @enum {string}
  */
 ImageView.LoadTarget = {
   CACHED_MAIN_IMAGE: 'cachedMainImage',
   CACHED_THUMBNAIL: 'cachedThumbnail',
   THUMBNAIL: 'thumbnail',
   MAIN_IMAGE: 'mainImage'
@@ skipping 29 matching lines @@
  * @override
  */
 ImageView.prototype.getZIndex = function() { return -1; };
 
 /**
  * @override
  */
 ImageView.prototype.draw = function() {
   if (!this.contentCanvas_)  // Do nothing if the image content is not set.
     return;
-  if (this.setupDeviceBuffer(this.screenImage_) ||
+  if ((this.screenImage_ && this.setupDeviceBuffer(this.screenImage_)) ||
       this.displayedContentGeneration_ !== this.contentGeneration_) {
     this.displayedContentGeneration_ = this.contentGeneration_;
     ImageUtil.trace.resetTimer('paint');
     this.paintDeviceRect(
-        this.contentCanvas_, new ImageRect(this.contentCanvas_));
+        this.contentCanvas_, ImageRect.createFromCanvas(this.contentCanvas_));
     ImageUtil.trace.reportTimer('paint');
   }
 };
 
 /**
  * Applies the viewport change that does not affect the screen cache size (zoom
  * change or offset change) with animation.
  */
 ImageView.prototype.applyViewportChange = function() {
   if (this.screenImage_) {
@@ skipping 21 matching lines @@
 
 /**
  * @return {HTMLCanvasElement} The content canvas element.
  */
 ImageView.prototype.getCanvas = function() { return this.contentCanvas_; };
 
 /**
  * @return {boolean} True if the a valid image is currently loaded.
  */
 ImageView.prototype.hasValidImage = function() {
-  return !this.preview_ && this.contentCanvas_ && this.contentCanvas_.width;
+  return !!(!this.preview_ && this.contentCanvas_ && this.contentCanvas_.width);
 };
 
 /**
  * @return {!HTMLCanvasElement} The cached thumbnail image.
  */
 ImageView.prototype.getThumbnail = function() {
   assert(this.thumbnailCanvas_);
   return this.thumbnailCanvas_;
 };
 
 /**
  * @return {number} The content revision number.
  */
 ImageView.prototype.getContentRevision = function() {
   return this.contentRevision_;
 };
 
 /**
  * Copies an image fragment from a full resolution canvas to a device resolution
  * canvas.
  *
- * @param {HTMLCanvasElement} canvas Canvas containing whole image. The canvas
+ * @param {!HTMLCanvasElement} canvas Canvas containing whole image. The canvas
  *     may not be full resolution (scaled).
- * @param {ImageRect} imageRect Rectangle region of the canvas to be rendered.
+ * @param {!ImageRect} imageRect Rectangle region of the canvas to be rendered.
  */
 ImageView.prototype.paintDeviceRect = function(canvas, imageRect) {
   // Map the rectangle in full resolution image to the rectangle in the device
   // canvas.
   var deviceBounds = this.viewport_.getDeviceBounds();
   var scaleX = deviceBounds.width / canvas.width;
   var scaleY = deviceBounds.height / canvas.height;
-  var deviceRect = new ImageRect(
+  var deviceRect = ImageRect.createWith(
       imageRect.left * scaleX,
       imageRect.top * scaleY,
       imageRect.width * scaleX,
       imageRect.height * scaleY);
 
   ImageRect.drawImage(
       this.screenImage_.getContext('2d'), canvas, deviceRect, imageRect);
 };
 
 /**
  * Creates an overlay canvas with properties similar to the screen canvas.
  * Useful for showing quick feedback when editing.
  *
- * @return {HTMLCanvasElement} Overlay canvas.
+ * @return {!HTMLCanvasElement} Overlay canvas.
  */
 ImageView.prototype.createOverlayCanvas = function() {
-  var canvas = this.document_.createElement('canvas');
+  var canvas = assertInstanceof(this.document_.createElement('canvas'),
+      HTMLCanvasElement);
   canvas.className = 'image';
   this.container_.appendChild(canvas);
   return canvas;
 };
 
 /**
  * Sets up the canvas as a buffer in the device resolution.
  *
- * @param {HTMLCanvasElement} canvas The buffer canvas.
+ * @param {!HTMLCanvasElement} canvas The buffer canvas.
  * @return {boolean} True if the canvas needs to be rendered.
  */
 ImageView.prototype.setupDeviceBuffer = function(canvas) {
   // Set the canvas position and size in device pixels.
   var deviceRect = this.viewport_.getDeviceBounds();
   var needRepaint = false;
   if (canvas.width !== deviceRect.width) {
     canvas.width = deviceRect.width;
     needRepaint = true;
   }
   if (canvas.height !== deviceRect.height) {
     canvas.height = deviceRect.height;
     needRepaint = true;
   }
 
   // Center the image.
   var imageBounds = this.viewport_.getImageElementBoundsOnScreen();
   canvas.style.left = imageBounds.left + 'px';
   canvas.style.top = imageBounds.top + 'px';
   canvas.style.width = imageBounds.width + 'px';
   canvas.style.height = imageBounds.height + 'px';
 
   this.setTransform_(canvas, this.viewport_);
 
   return needRepaint;
 };
 
 /**
- * @return {ImageData} A new ImageData object with a copy of the content.
+ * @return {!ImageData} A new ImageData object with a copy of the content.
  */
 ImageView.prototype.copyScreenImageData = function() {
   return this.screenImage_.getContext('2d').getImageData(
       0, 0, this.screenImage_.width, this.screenImage_.height);
 };
 
 /**
  * @return {boolean} True if the image is currently being loaded.
  */
 ImageView.prototype.isLoading = function() {
   return this.imageLoader_.isBusy();
 };
 
 /**
  * Cancels the current image loading operation. The callbacks will be ignored.
  */
 ImageView.prototype.cancelLoad = function() {
   this.imageLoader_.cancel();
 };
 
 /**
  * Loads and display a new image.
  *
  * Loads the thumbnail first, then replaces it with the main image.
  * Takes into account the image orientation encoded in the metadata.
  *
- * @param {Gallery.Item} item Gallery item to be loaded.
+ * @param {!Gallery.Item} item Gallery item to be loaded.
  * @param {!ImageView.Effect} effect Transition effect object.
  * @param {function()} displayCallback Called when the image is displayed
  *     (possibly as a preview).
- * @param {function(number, number, *=)} loadCallback Called when the image is
- *     fully loaded. The first parameter is the load type.
+ * @param {function(ImageView.LoadType, number, *=)} loadCallback Called when
+ *     the image is fully loaded. The first parameter is the load type.
  */
 ImageView.prototype.load =
     function(item, effect, displayCallback, loadCallback) {
   var entry = item.getEntry();
   var metadata = item.getMetadata() || {};
 
-  if (effect) {
+  if (!(effect instanceof ImageView.Effect.None)) {
     // Skip effects when reloading repeatedly very quickly.
     var time = Date.now();
     if (this.lastLoadTime_ &&
         (time - this.lastLoadTime_) < ImageView.FAST_SCROLL_INTERVAL) {
       effect = new ImageView.Effect.None();
     }
     this.lastLoadTime_ = time;
   }
 
   ImageUtil.metrics.startInterval(ImageUtil.getMetricName('DisplayTime'));
 
   var self = this;
 
   this.contentItem_ = item;
   this.contentRevision_ = -1;
 
   switch (ImageView.getLoadTarget(item, effect)) {
     case ImageView.LoadTarget.CACHED_MAIN_IMAGE:
       displayMainImage(
-          ImageView.LOAD_TYPE_CACHED_FULL,
+          ImageView.LoadType.CACHED_FULL,
           false /* no preview */,
           assert(item.contentImage));
       break;
 
     case ImageView.LoadTarget.CACHED_THUMBNAIL:
       // We have a cached screen-scale canvas, use it instead of a thumbnail.
-      displayThumbnail(ImageView.LOAD_TYPE_CACHED_SCREEN, item.screenImage);
+      displayThumbnail(ImageView.LoadType.CACHED_SCREEN, item.screenImage);
       // As far as the user can tell the image is loaded. We still need to load
       // the full res image to make editing possible, but we can report now.
       ImageUtil.metrics.recordInterval(ImageUtil.getMetricName('DisplayTime'));
       break;
 
     case ImageView.LoadTarget.THUMBNAIL:
       var thumbnailLoader = new ThumbnailLoader(
           entry,
           ThumbnailLoader.LoaderType.CANVAS,
           metadata);
       thumbnailLoader.loadDetachedImage(function(success) {
         displayThumbnail(
-            ImageView.LOAD_TYPE_IMAGE_FILE,
+            ImageView.LoadType.IMAGE_FILE,
             success ? thumbnailLoader.getImage() : null);
       });
       break;
 
     case ImageView.LoadTarget.MAIN_IMAGE:
       loadMainImage(
-          ImageView.LOAD_TYPE_IMAGE_FILE,
+          ImageView.LoadType.IMAGE_FILE,
           entry,
           false /* no preview*/,
           0 /* delay */);
       break;
 
     default:
       assertNotReached();
   }
 
+  /**
+   * @param {ImageView.LoadType} loadType A load type.
+   * @param {(HTMLCanvasElement|HTMLImageElement)} canvas A canvas.
+   */
   function displayThumbnail(loadType, canvas) {
     if (canvas) {
       var width = null;
       var height = null;
       if (metadata.media) {
         width = metadata.media.width;
         height = metadata.media.height;
       }
       // If metadata.external.present is true, the image data is loaded directly
       // from local cache, whose size may be out of sync with the drive
       // metadata.
       if (metadata.external && !metadata.external.present) {
         width = metadata.external.imageWidth;
         height = metadata.external.imageHeight;
       }
       self.replace(
           canvas,
           effect,
           width,
           height,
           true /* preview */);
       if (displayCallback) displayCallback();
     }
     loadMainImage(loadType, entry, !!canvas,
         (effect && canvas) ? effect.getSafeInterval() : 0);
   }
 
+  /**
+   * @param {ImageView.LoadType} loadType Load type.
+   * @param {Entry} contentEntry A content entry.
+   * @param {boolean} previewShown A preview is shown or not.
+   * @param {number} delay Load delay.
+   */
   function loadMainImage(loadType, contentEntry, previewShown, delay) {
     if (self.prefetchLoader_.isLoading(contentEntry)) {
       // The image we need is already being prefetched. Initiating another load
       // would be a waste. Hijack the load instead by overriding the callback.
       self.prefetchLoader_.setCallback(
           displayMainImage.bind(null, loadType, previewShown));
 
       // Swap the loaders so that the self.isLoading works correctly.
       var temp = self.prefetchLoader_;
       self.prefetchLoader_ = self.imageLoader_;
       self.imageLoader_ = temp;
       return;
     }
     self.prefetchLoader_.cancel();  // The prefetch was doing something useless.
 
     self.imageLoader_.load(
         item,
         displayMainImage.bind(null, loadType, previewShown),
         delay);
   }
 
   /**
-   * @param {number} loadType
-   * @param {boolean} previewShown
-   * @param {!HTMLCanvasElement} content
-   * @param {*=} opt_error
+   * @param {ImageView.LoadType} loadType Load type.
+   * @param {boolean} previewShown A preview is shown or not.
+   * @param {!(HTMLCanvasElement|HTMLImageElement)} content A content.
+   * @param {string=} opt_error Error message.
    */
   function displayMainImage(loadType, previewShown, content, opt_error) {
     if (opt_error)
-      loadType = ImageView.LOAD_TYPE_ERROR;
+      loadType = ImageView.LoadType.ERROR;
 
     // If we already displayed the preview we should not replace the content if
     // the full content failed to load.
     var animationDuration = 0;
-    if (!(previewShown && loadType === ImageView.LOAD_TYPE_ERROR)) {
+    if (!(previewShown && loadType === ImageView.LoadType.ERROR)) {
       var replaceEffect = previewShown ? null : effect;
       animationDuration = replaceEffect ? replaceEffect.getSafeInterval() : 0;
       self.replace(content, replaceEffect);
       if (!previewShown && displayCallback) displayCallback();
     }
 
-    if (loadType !== ImageView.LOAD_TYPE_ERROR &&
-        loadType !== ImageView.LOAD_TYPE_CACHED_SCREEN) {
+    if (loadType !== ImageView.LoadType.ERROR &&
+        loadType !== ImageView.LoadType.CACHED_SCREEN) {
       ImageUtil.metrics.recordInterval(ImageUtil.getMetricName('DisplayTime'));
     }
     ImageUtil.metrics.recordEnum(ImageUtil.getMetricName('LoadMode'),
-        loadType, ImageView.LOAD_TYPE_TOTAL);
+        loadType, Object.keys(ImageView.LoadType).length);
 
-    if (loadType === ImageView.LOAD_TYPE_ERROR &&
+    if (loadType === ImageView.LoadType.ERROR &&
         !navigator.onLine && !metadata.external.present) {
-      loadType = ImageView.LOAD_TYPE_OFFLINE;
+      loadType = ImageView.LoadType.OFFLINE;
     }
     if (loadCallback) loadCallback(loadType, animationDuration, opt_error);
   }
 };
 
 /**
  * Prefetches an image.
- * @param {Gallery.Item} item The image item.
+ * @param {!Gallery.Item} item The image item.
  * @param {number=} opt_delay Image load delay in ms.
  */
 ImageView.prototype.prefetch = function(item, opt_delay) {
   if (item.contentImage)
     return;
   this.prefetchLoader_.load(item, function(canvas) {
     if (canvas.width && canvas.height && !item.contentImage)
       item.contentImage = canvas;
   }, opt_delay);
 };
@@ skipping 16 matching lines @@
       this.unload(null /* force unload */);
     }.bind(this), effect.getSafeInterval());
     return;
   }
   this.container_.textContent = '';
   this.contentCanvas_ = null;
   this.screenImage_ = null;
 };
 
 /**
- * @param {HTMLCanvasElement} content The image element.
+ * @param {!(HTMLCanvasElement|HTMLImageElement)} content The image element.
  * @param {number=} opt_width Image width.
  * @param {number=} opt_height Image height.
  * @param {boolean=} opt_preview True if the image is a preview (not full res).
  * @private
  */
 ImageView.prototype.replaceContent_ = function(
     content, opt_width, opt_height, opt_preview) {
 
   if (this.contentCanvas_ && this.contentCanvas_.parentNode === this.container_)
     this.container_.removeChild(this.contentCanvas_);
 
-  this.screenImage_ = this.document_.createElement('canvas');
+  this.screenImage_ = assertInstanceof(this.document_.createElement('canvas'),
+      HTMLCanvasElement);
   this.screenImage_.className = 'image';
 
   this.contentCanvas_ = content;
   this.invalidateCaches();
   this.viewport_.setImageSize(
       opt_width || this.contentCanvas_.width,
       opt_height || this.contentCanvas_.height);
   this.draw();
 
   this.container_.appendChild(this.screenImage_);
 
-  this.preview_ = opt_preview;
+  this.preview_ = opt_preview || false;
   // If this is not a thumbnail, cache the content and the screen-scale image.
   if (this.hasValidImage()) {
     // Insert the full resolution canvas into DOM so that it can be printed.
     this.container_.appendChild(this.contentCanvas_);
     this.contentCanvas_.classList.add('fullres');
 
     this.contentItem_.contentImage = this.contentCanvas_;
     this.contentItem_.screenImage = this.screenImage_;
 
     // TODO(kaznacheev): It is better to pass screenImage_ as it is usually
@@ skipping 16 matching lines @@
  * Adds a listener for content changes.
  * @param {function()} callback Callback.
  */
 ImageView.prototype.addContentCallback = function(callback) {
   this.contentCallbacks_.push(callback);
 };
 
 /**
  * Updates the cached thumbnail image.
  *
- * @param {HTMLCanvasElement} canvas The source canvas.
+ * @param {!HTMLCanvasElement} canvas The source canvas.
  * @private
  */
 ImageView.prototype.updateThumbnail_ = function(canvas) {
   ImageUtil.trace.resetTimer('thumb');
   var pixelCount = 10000;
   var downScale =
       Math.max(1, Math.sqrt(canvas.width * canvas.height / pixelCount));
 
   this.thumbnailCanvas_ = canvas.ownerDocument.createElement('canvas');
   this.thumbnailCanvas_.width = Math.round(canvas.width / downScale);
   this.thumbnailCanvas_.height = Math.round(canvas.height / downScale);
   ImageRect.drawImage(this.thumbnailCanvas_.getContext('2d'), canvas);
   ImageUtil.trace.reportTimer('thumb');
 };
 
 /**
  * Replaces the displayed image, possibly with slide-in animation.
  *
- * @param {HTMLCanvasElement} content The image element.
- * @param {Object=} opt_effect Transition effect object.
+ * @param {!(HTMLCanvasElement|HTMLImageElement)} content The image element.
+ * @param {ImageView.Effect=} opt_effect Transition effect object.
  * @param {number=} opt_width Image width.
  * @param {number=} opt_height Image height.
  * @param {boolean=} opt_preview True if the image is a preview (not full res).
  */
 ImageView.prototype.replace = function(
     content, opt_effect, opt_width, opt_height, opt_preview) {
   var oldScreenImage = this.screenImage_;
   var oldViewport = this.viewport_.clone();
 
   this.replaceContent_(content, opt_width, opt_height, opt_preview);
   if (!opt_effect) {
     if (oldScreenImage)
       oldScreenImage.parentNode.removeChild(oldScreenImage);
     return;
   }
 
+  assert(this.screenImage_);
   var newScreenImage = this.screenImage_;
   this.viewport_.resetView();
 
   if (oldScreenImage)
     ImageUtil.setAttribute(newScreenImage, 'fade', true);
   this.setTransform_(
       newScreenImage, this.viewport_, opt_effect, 0 /* instant */);
 
   setTimeout(function() {
     this.setTransform_(
         newScreenImage,
         this.viewport_,
         null,
         opt_effect && opt_effect.getDuration());
     if (oldScreenImage) {
       ImageUtil.setAttribute(newScreenImage, 'fade', false);
       ImageUtil.setAttribute(oldScreenImage, 'fade', true);
-      console.assert(opt_effect.getReverse, 'Cannot revert an effect.');
       var reverse = opt_effect.getReverse();
+      assert(reverse);
       this.setTransform_(oldScreenImage, oldViewport, reverse);
       setTimeout(function() {
         if (oldScreenImage.parentNode)
           oldScreenImage.parentNode.removeChild(oldScreenImage);
       }, reverse.getSafeInterval());
     }
-  }.bind(this));
+  }.bind(this), 0);
 };
 
 /**
- * @param {HTMLCanvasElement} element The element to transform.
- * @param {Viewport} viewport Viewport to be used for calculating
+ * @param {!HTMLCanvasElement} element The element to transform.
+ * @param {!Viewport} viewport Viewport to be used for calculating
  *     transformation.
  * @param {ImageView.Effect=} opt_effect The effect to apply.
  * @param {number=} opt_duration Transition duration.
  * @private
  */
 ImageView.prototype.setTransform_ = function(
     element, viewport, opt_effect, opt_duration) {
   if (!opt_effect)
     opt_effect = new ImageView.Effect.None();
   if (typeof opt_duration !== 'number')
     opt_duration = opt_effect.getDuration();
   element.style.webkitTransitionDuration = opt_duration + 'ms';
   element.style.webkitTransitionTimingFunction = opt_effect.getTiming();
   element.style.webkitTransform = opt_effect.transform(element, viewport);
 };
 
 /**
- * @param {ImageRect} screenRect Target rectangle in screen coordinates.
+ * Creates zoom effect object.
+ * @param {!ImageRect} screenRect Target rectangle in screen coordinates.
  * @return {!ImageView.Effect} Zoom effect object.
  */
 ImageView.prototype.createZoomEffect = function(screenRect) {
   return new ImageView.Effect.ZoomToScreen(
       screenRect,
       ImageView.MODE_TRANSITION_DURATION);
 };
 
 /**
  * Visualizes crop or rotate operation. Hide the old image instantly, animate
  * the new image to visualize the operation.
  *
- * @param {HTMLCanvasElement} canvas New content canvas.
- * @param {ImageRect} imageCropRect The crop rectangle in image coordinates.
- *                             Null for rotation operations.
+ * @param {!HTMLCanvasElement} canvas New content canvas.
+ * @param {!ImageRect} imageCropRect The crop rectangle in image coordinates.
+ *     Null for rotation operations.
  * @param {number} rotate90 Rotation angle in 90 degree increments.
  * @return {number} Animation duration.
  */
 ImageView.prototype.replaceAndAnimate = function(
     canvas, imageCropRect, rotate90) {
+  assert(this.screenImage_);
+
   var oldImageBounds = {
     width: this.viewport_.getImageBounds().width,
     height: this.viewport_.getImageBounds().height
   };
   var oldScreenImage = this.screenImage_;
   this.replaceContent_(canvas);
   var newScreenImage = this.screenImage_;
   var effect = rotate90 ?
       new ImageView.Effect.Rotate(rotate90 > 0) :
       new ImageView.Effect.Zoom(
@@ skipping 10 matching lines @@
           this, newScreenImage, this.viewport_, null, effect.getDuration()),
       0);
 
   return effect.getSafeInterval();
 };
 
 /**
  * Visualizes "undo crop". Shrink the current image to the given crop rectangle
  * while fading in the new image.
  *
- * @param {HTMLCanvasElement} canvas New content canvas.
- * @param {ImageRect} imageCropRect The crop rectangle in image coordinates.
+ * @param {!HTMLCanvasElement} canvas New content canvas.
+ * @param {!ImageRect} imageCropRect The crop rectangle in image coordinates.
  * @return {number} Animation duration.
  */
 ImageView.prototype.animateAndReplace = function(canvas, imageCropRect) {
   var oldScreenImage = this.screenImage_;
   this.replaceContent_(canvas);
   var newScreenImage = this.screenImage_;
   var setFade = ImageUtil.setAttribute.bind(null, newScreenImage, 'fade');
   setFade(true);
   oldScreenImage.parentNode.insertBefore(newScreenImage, oldScreenImage);
   var effect = new ImageView.Effect.Zoom(
@@ skipping 13 matching lines @@
 };
 
 /* Transition effects */
 
 /**
  * Base class for effects.
  *
  * @param {number} duration Duration in ms.
  * @param {string=} opt_timing CSS transition timing function name.
  * @constructor
+ * @struct
  */
 ImageView.Effect = function(duration, opt_timing) {
   this.duration_ = duration;
   this.timing_ = opt_timing || 'linear';
 };
 
 /**
- *
+ * Default duration of an effect.
+ * @type {number}
+ * @const
  */
 ImageView.Effect.DEFAULT_DURATION = 180;
 
 /**
- *
+ * Effect margin.
+ * @type {number}
+ * @const
  */
 ImageView.Effect.MARGIN = 100;
 
 /**
  * @return {number} Effect duration in ms.
  */
 ImageView.Effect.prototype.getDuration = function() { return this.duration_; };
 
 /**
  * @return {number} Delay in ms since the beginning of the animation after which
  * it is safe to perform CPU-heavy operations without disrupting the animation.
  */
 ImageView.Effect.prototype.getSafeInterval = function() {
   return this.getDuration() + ImageView.Effect.MARGIN;
 };
 
 /**
+ * Reverses the effect.
+ * @return {ImageView.Effect} Reversed effect. Null is returned if this
+ *     is not supported in the effect.
+ */
+ImageView.Effect.prototype.getReverse = function() {
+  return null;
+};
+
+/**
  * @return {string} CSS transition timing function name.
  */
 ImageView.Effect.prototype.getTiming = function() { return this.timing_; };
 
 /**
  * Obtains the CSS transformation string of the effect.
- * @param {HTMLCanvasElement} element Canvas element to be applied the
+ * @param {!HTMLCanvasElement} element Canvas element to be applied the
  *     transformation.
- * @param {Viewport} viewport Current viewport.
+ * @param {!Viewport} viewport Current viewport.
  * @return {string} CSS transformation description.
  */
 ImageView.Effect.prototype.transform = function(element, viewport) {
   throw new Error('Not implemented.');
-  return '';
 };
 
 /**
  * Default effect.
  *
  * @constructor
  * @extends {ImageView.Effect}
+ * @struct
  */
 ImageView.Effect.None = function() {
   ImageView.Effect.call(this, 0, 'easy-out');
 };
 
 /**
  * Inherits from ImageView.Effect.
  */
 ImageView.Effect.None.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
- * @param {HTMLCanvasElement} element Element.
- * @param {Viewport} viewport Current viewport.
+ * @param {!HTMLCanvasElement} element Element.
+ * @param {!Viewport} viewport Current viewport.
  * @return {string} Transform string.
  */
 ImageView.Effect.None.prototype.transform = function(element, viewport) {
   return viewport.getTransformation();
 };
 
 /**
  * Slide effect.
  *
  * @param {number} direction -1 for left, 1 for right.
  * @param {boolean=} opt_slow True if slow (as in slideshow).
  * @constructor
  * @extends {ImageView.Effect}
+ * @struct
  */
 ImageView.Effect.Slide = function Slide(direction, opt_slow) {
   ImageView.Effect.call(this,
       opt_slow ? 800 : ImageView.Effect.DEFAULT_DURATION, 'ease-out');
   this.direction_ = direction;
   this.slow_ = opt_slow;
   this.shift_ = opt_slow ? 100 : 40;
   if (this.direction_ < 0) this.shift_ = -this.shift_;
 };
 
 ImageView.Effect.Slide.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
- * Reverses the slide effect.
- * @return {ImageView.Effect.Slide} Reversed effect.
+ * @override
  */
 ImageView.Effect.Slide.prototype.getReverse = function() {
   return new ImageView.Effect.Slide(-this.direction_, this.slow_);
 };
 
 /**
  * @override
  */
 ImageView.Effect.Slide.prototype.transform = function(element, viewport) {
   return viewport.getShiftTransformation(this.shift_);
 };
 
 /**
  * Zoom effect.
  *
  * Animates the original rectangle to the target rectangle.
  *
  * @param {number} previousImageWidth Width of the full resolution image.
  * @param {number} previousImageHeight Height of the full resolution image.
- * @param {ImageRect} imageCropRect Crop rectangle in the full resolution image.
+ * @param {!ImageRect} imageCropRect Crop rectangle in the full resolution
+ *     image.
  * @param {number=} opt_duration Duration of the effect.
  * @constructor
  * @extends {ImageView.Effect}
+ * @struct
  */
 ImageView.Effect.Zoom = function(
     previousImageWidth, previousImageHeight, imageCropRect, opt_duration) {
   ImageView.Effect.call(this,
       opt_duration || ImageView.Effect.DEFAULT_DURATION, 'ease-out');
   this.previousImageWidth_ = previousImageWidth;
   this.previousImageHeight_ = previousImageHeight;
   this.imageCropRect_ = imageCropRect;
 };
 
 ImageView.Effect.Zoom.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Zoom.prototype.transform = function(element, viewport) {
   return viewport.getInverseTransformForCroppedImage(
       this.previousImageWidth_, this.previousImageHeight_, this.imageCropRect_);
 };
 
 /**
  * Effect to zoom to a screen rectangle.
  *
- * @param {ImageRect} screenRect Rectangle in the application window's
+ * @param {!ImageRect} screenRect Rectangle in the application window's
  *     coordinate.
  * @param {number=} opt_duration Duration of effect.
  * @constructor
  * @extends {ImageView.Effect}
+ * @struct
  */
 ImageView.Effect.ZoomToScreen = function(screenRect, opt_duration) {
-  ImageView.Effect.call(this, opt_duration);
+  ImageView.Effect.call(this, opt_duration ||
+      ImageView.Effect.DEFAULT_DURATION);
   this.screenRect_ = screenRect;
 };
 
 ImageView.Effect.ZoomToScreen.prototype = {
   __proto__: ImageView.Effect.prototype
 };
 
 /**
  * @override
  */
 ImageView.Effect.ZoomToScreen.prototype.transform = function(
     element, viewport) {
   return viewport.getScreenRectTransformForImage(this.screenRect_);
 };
 
 /**
  * Rotation effect.
  *
  * @param {boolean} orientation Orientation of rotation. True is for clockwise
  *     and false is for counterclockwise.
  * @constructor
  * @extends {ImageView.Effect}
+ * @struct
  */
 ImageView.Effect.Rotate = function(orientation) {
   ImageView.Effect.call(this, ImageView.Effect.DEFAULT_DURATION);
   this.orientation_ = orientation;
 };
 
 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) {
   return viewport.getInverseTransformForRotatedImage(this.orientation_);
 };