Gallery: Add the offset feature in the slide mode.

ui/file_manager/gallery/js/slide_mode.js

Index: ui/file_manager/gallery/js/slide_mode.js
diff --git a/ui/file_manager/gallery/js/slide_mode.js b/ui/file_manager/gallery/js/slide_mode.js
index 2d48a8940a78ea894dcc7996c6c5d7541c81e9da..4d3c12a683350cfaa30966b8d04926a8aea5328d 100644
--- a/ui/file_manager/gallery/js/slide_mode.js
+++ b/ui/file_manager/gallery/js/slide_mode.js
@@ -334,7 +334,7 @@ SlideMode.prototype.leave = function(zoomToRect, callback) {
       callback();
     }.bind(this);
 
-  this.viewport_.setZoomIndex(0);
+  this.viewport_.resetView();
   if (this.getItemCount_() === 0) {
     this.showErrorBanner_(false);
     commitDone();
@@ -846,9 +846,14 @@ SlideMode.prototype.onKeyDown = function(event) {
       break;
 
     case 'U+001B':  // Escape
-      if (!this.isEditing())
+      if (this.isEditing()) {
+        this.toggleEditor(event);
+      } else if (this.viewport_.getZoomIndex() !== 0) {
+        this.viewport_.resetView();
+        this.imageView_.applyViewportChange();
+      } else {
         return false;  // Not handled.
-      this.toggleEditor(event);
+      }
       break;
 
     case 'Home':
@@ -861,6 +866,19 @@ SlideMode.prototype.onKeyDown = function(event) {
     case 'Down':
     case 'Left':
     case 'Right':
+      if (!this.isEditing() && this.viewport_.getZoomIndex() !== 0) {
+        var delta = {
+          'Up': [0, 10], 'Down': [0, -10], 'Left': [10, 0], 'Right': [-10, 0]

[mtomasz, 2014/07/17 07:51:16]

nit: How about moving 10 to a constant?
nit: How about making delta a function like: getShiftDeltaForKey()? WDYT?
nit: Shall we multiply the offset with the scale? When the zoom is large, moving
by 10 pixels is very tedious. WDYT?

[hirono, 2014/07/18 04:57:26]

I made the offset map constant.
Done.

+        }[keyID];
+        this.viewport_.setOffset(
+            this.viewport_.getOffsetX() + delta[0],
+            this.viewport_.getOffsetY() + delta[1],
+            true);
+        this.imageView_.applyViewportChange();
+      } else {
+        this.advanceWithKeyboard(keyID);
+      }
+      break;
     case 'MediaNextTrack':
     case 'MediaPreviousTrack':
       this.advanceWithKeyboard(keyID);
@@ -879,6 +897,12 @@ SlideMode.prototype.onKeyDown = function(event) {
         this.imageView_.applyViewportChange();
       }
       break;
+
+    case 'Ctrl-U+0030': // Ctrl+'0' zoom reset.
+      if (!this.isEditing()) {
+        this.viewport_.resetView();
+        this.imageView_.applyViewportChange();
+      }

[mtomasz, 2014/07/17 07:51:16]

nit: break; at the end for consistency?

   }
 
   return true;
@@ -1046,7 +1070,7 @@ SlideMode.prototype.isSlideshowOn_ = function() {
  */
 SlideMode.prototype.startSlideshow = function(opt_interval, opt_event) {
   // Reset zoom.
-  this.viewport_.setZoomIndex(0);
+  this.viewport_.resetView();
   this.imageView_.applyViewportChange();
 
   // Set the attribute early to prevent the toolbar from flashing when
@@ -1201,7 +1225,7 @@ SlideMode.prototype.toggleEditor = function(opt_event) {
 
   if (this.isEditing()) { // isEditing has just been flipped to a new value.
     // Reset zoom.
-    this.viewport_.setZoomIndex(0);
+    this.viewport_.resetView();
     this.imageView_.applyViewportChange();
     if (this.context_.readonlyDirName) {
       this.editor_.getPrompt().showAt(