Gallery: Add the offset feature in the slide mode.

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.
 
 'use strict';
 
 /**
  * The overlay displaying the image.
  *
  * @param {HTMLElement} container The container element.
@@ skipping 475 matching lines @@
     this.container_.removeChild(this.contentCanvas_);
 
   this.screenImage_ = this.document_.createElement('canvas');
   this.screenImage_.className = 'image';
 
   this.contentCanvas_ = content;
   this.invalidateCaches();
   this.viewport_.setImageSize(
       opt_width || this.contentCanvas_.width,
       opt_height || this.contentCanvas_.height);
-  this.viewport_.fitImage();
-  this.viewport_.update();
   this.draw();
 
   this.container_.appendChild(this.screenImage_);
 
   this.preview_ = opt_preview;
   // 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');
@@ skipping 331 matching lines @@
 };
 
 /**
  * Default effect. It is not a no-op as it needs to adjust a canvas scale
  * for devicePixelRatio.
  *
  * @constructor
  * @extends {ImageView.Effect}
  */
 ImageView.Effect.None = function() {
-  ImageView.Effect.call(this, 0);
+  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.
  * @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}
  */
 ImageView.Effect.Slide = function Slide(direction, opt_slow) {
   ImageView.Effect.call(this,
-      opt_slow ? 800 : ImageView.Effect.DEFAULT_DURATION, 'ease-in-out');
+      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.
@@ skipping 19 matching lines @@
  * @param {number} previousImageWidth Width of the full resolution image.
  * @param {number} previousImageHeight Hieght of the full resolution image.
  * @param {Rect} imageCropRect Crop rectangle in the full resolution image.
  * @param {number=} opt_duration Duration of the effect.
  * @constructor
  * @extends {ImageView.Effect}
  */
 ImageView.Effect.Zoom = function(
     previousImageWidth, previousImageHeight, imageCropRect, opt_duration) {
   ImageView.Effect.call(this,
-      opt_duration || ImageView.Effect.DEFAULT_DURATION);
+      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
  */
@@ skipping 41 matching lines @@
 };
 
 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) {
   return viewport.getInverseTransformForRotatedImage(this.orientation_);
 };