Photo Editor: better mode transitions

chrome/browser/resources/file_manager/js/photo/gallery.js

 // Copyright (c) 2012 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.
 
 document.addEventListener('DOMContentLoaded', function() {
   if (!location.hash)
     return;
 
   var pageState;
   if (location.search) {
     try {
-      pageState = JSON.parse(location.search.substr(1));
+      pageState = JSON.parse(decodeURIComponent(location.search.substr(1)));
     } catch (ignore) {}
   }
   Gallery.openStandalone(decodeURI(location.hash.substr(1)), pageState);
 });
 
 /**
  * Gallery for viewing and editing image files.
  *
  * @param {Object} context Object containing the following:
  *     {function(string)} onNameChange Called every time a selected
@@ skipping 236 matching lines @@
     var selectedIndex = urls.indexOf(selectedUrls[i]);
     if (selectedIndex >= 0)
       this.selectionModel_.setIndexSelected(selectedIndex, true);
     else
       console.error('Cannot select ' + selectedUrls[i]);
   }
 
   if (this.selectionModel_.selectedIndexes.length == 0)
     this.onSelection_();
 
+  var mosaic = this.mosaicMode_.getMosaic();
   if (selectedUrls.length != 1 ||
       (this.context_.pageState &&
           this.context_.pageState.gallery == 'mosaic')) {
     this.setCurrentMode_(this.mosaicMode_);
-    this.mosaicMode_.init();
+    mosaic.init();
+    mosaic.show();
   } else {
     this.setCurrentMode_(this.slideMode_);
     /* TODO: consider nice blow-up animation for the first image */
     this.slideMode_.enter(null, function() {
-      // Flash the toolbar briefly to show it is there.
-      this.inactivityWatcher_.startActivity();
-      this.inactivityWatcher_.stopActivity(Gallery.FIRST_FADE_TIMEOUT);
-      // Load mosaic tiles in background so that the transition is smooth.
-      this.mosaicMode_.init();
-    }.bind(this));
+        // Flash the toolbar briefly to show it is there.
+        this.inactivityWatcher_.startActivity();
+        this.inactivityWatcher_.stopActivity(Gallery.FIRST_FADE_TIMEOUT);
+      }.bind(this),
+      mosaic.init.bind(mosaic));
   }
 };
 
 /**
  * Close the Gallery.
  * @private
  */
 Gallery.prototype.close_ = function() {
   Gallery.getFileBrowserPrivate().isFullscreen(function(fullscreen) {
     if (this.originalFullscreen_ != fullscreen) {
@@ skipping 91 matching lines @@
   if (opt_event)
     this.onUserAction_();
 
   this.changingMode_ = true;
 
   var onModeChanged = function() {
     this.changingMode_ = false;
     if (opt_callback) opt_callback();
   }.bind(this);
 
+  var tileIndex = Math.max(0, this.selectionModel_.selectedIndex);
+
+  var mosaic = this.mosaicMode_.getMosaic();
+  var tileRect = mosaic.getTileRect(tileIndex);
+
   if (this.currentMode_ == this.slideMode_) {
-    this.mosaicMode_.enter();  // This may change the viewport.
-    this.slideMode_.leave(this.mosaicMode_.getSelectedTileRect(),
+    this.setCurrentMode_(this.mosaicMode_);
+    mosaic.transform(
+        tileRect, this.slideMode_.getSelectedImageRect(), true /* instant */);
+    this.slideMode_.leave(tileRect,
         function() {
-          this.setCurrentMode_(this.mosaicMode_);
+          // Animate back to normal position.
+          mosaic.transform();
+          mosaic.show();
           onModeChanged();
         }.bind(this));
   } else {
-    this.slideMode_.enter(this.mosaicMode_.getSelectedTileRect(),
-        this.setCurrentMode_.bind(this, this.slideMode_),
+    this.setCurrentMode_(this.slideMode_);
+    this.slideMode_.enter(tileRect,
+        function() {
+          // Animate to zoomed position.
+          mosaic.transform(tileRect, this.slideMode_.getSelectedImageRect());
+          mosaic.hide();
+        }.bind(this),
         onModeChanged);
   }
 };
 
 /**
  * Delete event handler.
  * @private
  */
 Gallery.prototype.onDelete_ = function() {
   this.onUserAction_();
@@ skipping 332 matching lines @@
         this.toggleShare_();  // Hide the menu.
         this.executeWhenReady(api.executeTask.bind(api, taskId, urls));
       }.bind(this, task.taskId));
     }
 
     var empty = this.shareMenu_.querySelector('.item') == null;
     ImageUtil.setAttribute(this.shareButton_, 'disabled', empty);
     this.shareMenu_.hidden = wasHidden || empty;
   }.bind(this));
 };