Gallery.app: Add shortcut keys for zooming in the slide mode.

The zoom is reset when it goes into the edit/mosaic/slideshow modes.

BUG=245926
TEST=manually

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@282930 0039d316-1c4b-4281-b951-d872f2087c98

ui/file_manager/gallery/js/image_editor/viewport.js

@@ -30,6 +30,21 @@ function Viewport() {
    * @private
    */
   this.scale_ = 1;
+
+  /**
+   * Index of zoom ratio. 0 is "zoom ratio = 1".
+   * @type {number}
+   * @private
+   */
+  this.zoomIndex_ = 0;
+
+  /**
+   * Zoom ratio specified by user operations.
+   * @type {number}
+   * @private
+   */
+  this.zoom_ = 1;
+
   this.offsetX_ = 0;
   this.offsetY_ = 0;
 
@@ -38,6 +53,22 @@ function Viewport() {
   this.update();
 }
 
+/**
+ * Zoom ratios.
+ *
+ * @type {Object.<string, number>}
+ * @const
+ */
+Viewport.ZOOM_RATIOS = Object.freeze({
+  '3': 3,
+  '2': 2,
+  '1': 1.5,
+  '0': 1,
+  '-1': 0.75,
+  '-2': 0.5,
+  '-3': 0.25
+});
+
 /**
  * @param {number} width Image width.
  * @param {number} height Image height.
@@ -56,6 +87,28 @@ Viewport.prototype.setScreenSize = function(width, height) {
   this.invalidateCaches();
 };
 
+/**
+ * Sets the new zoom ratio.
+ * @param {number} zoomIndex New zoom index.
+ */
+Viewport.prototype.setZoomIndex = function(zoomIndex) {
+  // Ignore the invalid zoomIndex.
+  if (!Viewport.ZOOM_RATIOS[zoomIndex.toString()])
+    return;
+
+  this.zoomIndex_ = zoomIndex;
+  this.zoom_ = Viewport.ZOOM_RATIOS[zoomIndex];
+  this.invalidateCaches();
+};
+
+/**
+ * Returns the current zoom index.
+ * @return {number} Zoon index.
+ */
+Viewport.prototype.getZoomIndex = function() {
+  return this.zoomIndex_;
+};
+
 /**
  * Set the size by an HTML element.
  *
@@ -388,7 +441,7 @@ Viewport.prototype.update = function() {
  * @return {string} Transformation description.
  */
 Viewport.prototype.getTransformation = function() {
-  return 'scale(' + (1 / window.devicePixelRatio) + ')';
+  return 'scale(' + (1 / window.devicePixelRatio * this.zoom_) + ')';
 };
 
 /**

ui/file_manager/gallery/js/slide_mode.js

@@ -334,6 +334,7 @@ SlideMode.prototype.leave = function(zoomToRect, callback) {
       callback();
     }.bind(this);
 
+  this.viewport_.setZoomIndex(0);
   if (this.getItemCount_() === 0) {
     this.showErrorBanner_(false);
     commitDone();
@@ -856,7 +857,19 @@ SlideMode.prototype.onKeyDown = function(event) {
       this.advanceWithKeyboard(keyID);
       break;
 
-    default: return false;
+    case 'Ctrl-U+00BB':  // Ctrl+'=' zoom in.
+      if (!this.isEditing()) {
+        this.viewport_.setZoomIndex(this.viewport_.getZoomIndex() + 1);
+        this.imageView_.draw();
+      }
+      break;
+
+    case 'Ctrl-U+00BD':  // Ctrl+'-' zoom out.
+      if (!this.isEditing()) {
+        this.viewport_.setZoomIndex(this.viewport_.getZoomIndex() - 1);
+        this.imageView_.draw();
+      }
+      break;
   }
 
   return true;
@@ -1023,6 +1036,10 @@ SlideMode.prototype.isSlideshowOn_ = function() {
  * @param {Event=} opt_event Event.
  */
 SlideMode.prototype.startSlideshow = function(opt_interval, opt_event) {
+  // Reset zoom.
+  this.viewport_.setZoomIndex(0);
+  this.imageView_.draw();
+
   // Set the attribute early to prevent the toolbar from flashing when
   // the slideshow is being started from the mosaic view.
   this.container_.setAttribute('slideshow', 'playing');
@@ -1174,6 +1191,9 @@ SlideMode.prototype.toggleEditor = function(opt_event) {
   ImageUtil.setAttribute(this.container_, 'editing', !this.isEditing());
 
   if (this.isEditing()) { // isEditing has just been flipped to a new value.
+    // Reset zoom.
+    this.viewport_.setZoomIndex(0);
+    this.imageView_.draw();
     if (this.context_.readonlyDirName) {
       this.editor_.getPrompt().showAt(
           'top', 'GALLERY_READONLY_WARNING', 0, this.context_.readonlyDirName);