Migrate from URLs to Entries in the Files App's gallery.

chrome/browser/resources/file_manager/foreground/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.
 
 'use strict';
 
 /**
  * Called from the main frame when unloading.
  * @return {string?} User-visible message on null if it is OK to close.
  */
@@ skipping 25 matching lines @@
  *      the system.
  * @class
  * @constructor
  */
 function Gallery(context, volumeManager) {
   this.container_ = document.querySelector('.gallery');
   this.document_ = document;
   this.context_ = context;
   this.metadataCache_ = context.metadataCache;
   this.volumeManager_ = volumeManager;
+  this.selectedEntry_ = null;
 
   this.dataModel_ = new cr.ui.ArrayDataModel([]);
   this.selectionModel_ = new cr.ui.ListSelectionModel();
   this.displayStringFunction_ = context.displayStringFunction;
 
   this.initDom_();
   this.initListeners_();
 }
 
 /**
  * Gallery extends cr.EventTarget.
  */
 Gallery.prototype.__proto__ = cr.EventTarget.prototype;
 
 /**
- * Create and initialize a Gallery object based on a context.
+ * Creates and initializes a Gallery object based on a context.
  *
  * @param {Object} context Gallery context.
  * @param {VolumeManagerWrapper} volumeManager VolumeManager of the system.
- * @param {Array.<string>} urls Array of urls.
- * @param {Array.<string>} selectedUrls Array of selected urls.
+ * @param {Array.<Entry>} entries Array of entries.
+ * @param {Array.<Entry>} selectedEntries Array of selected entries.
  */
-Gallery.open = function(context, volumeManager, urls, selectedUrls) {
+Gallery.open = function(context, volumeManager, entries, selectedEntries) {
   Gallery.instance = new Gallery(context, volumeManager);
-  Gallery.instance.load(urls, selectedUrls);
+  Gallery.instance.load(entries, selectedEntries);
 };
 
 /**
  * Tools fade-out timeout im milliseconds.
  * @const
  * @type {number}
  */
 Gallery.FADE_TIMEOUT = 3000;
 
 /**
@@ skipping 12 matching lines @@
 Gallery.MOSAIC_BACKGROUND_INIT_DELAY = 1000;
 
 /**
  * Types of metadata Gallery uses (to query the metadata cache).
  * @const
  * @type {string}
  */
 Gallery.METADATA_TYPE = 'thumbnail|filesystem|media|streaming|drive';
 
 /**
- * Initialize listeners.
+ * Initializes listeners.
  * @private
  */
 Gallery.prototype.initListeners_ = function() {
   this.document_.oncontextmenu = function(e) { e.preventDefault(); };
   this.keyDownBound_ = this.onKeyDown_.bind(this);
   this.document_.body.addEventListener('keydown', this.keyDownBound_);
 
   this.inactivityWatcher_ = new MouseInactivityWatcher(
       this.container_, Gallery.FADE_TIMEOUT, this.hasActiveTool.bind(this));
 
@@ skipping 10 matching lines @@
   this.volumeManager_.addEventListener('externally-unmounted',
       this.onExternallyUnmounted_.bind(this));
 };
 
 /**
  * Closes gallery when a volume containing the selected item is unmounted.
  * @param {Event} event The unmount event.
  * @private
  */
 Gallery.prototype.onExternallyUnmounted_ = function(event) {
-  if (!this.selectedItemFilesystemPath_)
+  if (!this.selectedEntry_)
     return;
-  if (this.selectedItemFilesystemPath_.indexOf(event.mountPath) == 0)
+
+  if (this.volumeManager_.getVolumeInfo(this.selectedEntry_) ===
+      event.volumeInfo) {
     this.onBack_();
+  }
 };
 
 /**
  * Beforeunload handler.
  * @return {string?} User-visible message on null if it is OK to close.
  */
 Gallery.prototype.onBeforeUnload = function() {
   return this.slideMode_.onBeforeUnload();
 };
 
 /**
- * Unload the Gallery.
+ * Unloads the Gallery.
  * @param {boolean} exiting True if the app is exiting.
  */
 Gallery.prototype.onUnload = function(exiting) {
   if (!this.context_.searchResults) {
     this.metadataCache_.removeObserver(this.thumbnailObserverId_);
   }
   this.slideMode_.onUnload(exiting);
 };
 
 /**
@@ skipping 100 matching lines @@
  * @return {HTMLElement} Newly created button.
  * @private
  */
 Gallery.prototype.createToolbarButton_ = function(className, title) {
   var button = util.createChild(this.toolbar_, className, 'button');
   button.title = this.displayStringFunction_(title);
   return button;
 };
 
 /**
- * Load the content.
+ * Loads the content.
  *
- * @param {Array.<string>} urls Array of urls.
- * @param {Array.<string>} selectedUrls Array of selected urls.
+ * @param {Array.<Entry>} entries Array of entries.
+ * @param {Array.<Entry>} selectedEntries Array of selected entries. Must be a
+ *     subset of {@code entries}.
  */
-Gallery.prototype.load = function(urls, selectedUrls) {
+Gallery.prototype.load = function(entries, selectedEntries) {
   var items = [];
-  for (var index = 0; index < urls.length; ++index) {
-    items.push(new Gallery.Item(urls[index]));
+  for (var index = 0; index < entries.length; ++index) {
+    items.push(new Gallery.Item(entries[index]));
   }
   this.dataModel_.push.apply(this.dataModel_, items);
 
   this.selectionModel_.adjustLength(this.dataModel_.length);
 
-  for (var i = 0; i != selectedUrls.length; i++) {
-    var selectedIndex = urls.indexOf(selectedUrls[i]);
+  for (var i = 0; i !== selectedEntries.length; i++) {
+    var selectedIndex = entries.indexOf(selectedEntries[i]);
     if (selectedIndex >= 0)
       this.selectionModel_.setIndexSelected(selectedIndex, true);
     else
-      console.error('Cannot select ' + selectedUrls[i]);
+      console.error('Cannot select ' + selectedEntries[i]);
   }
 
-  if (this.selectionModel_.selectedIndexes.length == 0)
+  if (this.selectionModel_.selectedIndexes.length === 0)
     this.onSelection_();
 
   var mosaic = this.mosaicMode_ && this.mosaicMode_.getMosaic();
 
   // Mosaic view should show up if most of the selected files are images.
   var imagesCount = 0;
-  for (var i = 0; i != selectedUrls.length; i++) {
-    if (FileType.getMediaType(selectedUrls[i]) == 'image')
+  for (var i = 0; i !== selectedEntries.length; i++) {
+    if (FileType.getMediaType(selectedEntries[i]) === 'image')
       imagesCount++;
   }
-  var mostlyImages = imagesCount > (selectedUrls.length / 2.0);
+  var mostlyImages = imagesCount > (selectedEntries.length / 2.0);
 
   var forcedMosaic = (this.context_.pageState &&
-       this.context_.pageState.gallery == 'mosaic');
+       this.context_.pageState.gallery === 'mosaic');
 
-  var showMosaic = (mostlyImages && selectedUrls.length > 1) || forcedMosaic;
+  var showMosaic = (mostlyImages && selectedEntries.length > 1) || forcedMosaic;
   if (mosaic && showMosaic) {
     this.setCurrentMode_(this.mosaicMode_);
     mosaic.init();
     mosaic.show();
     this.inactivityWatcher_.check();  // Show the toolbar.
     cr.dispatchSimpleEvent(this, 'loaded');
   } else {
     this.setCurrentMode_(this.slideMode_);
     var maybeLoadMosaic = function() {
       if (mosaic)
         mosaic.init();
       cr.dispatchSimpleEvent(this, 'loaded');
     }.bind(this);
     /* 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_.kick(Gallery.FIRST_FADE_TIMEOUT);
       }.bind(this),
       maybeLoadMosaic);
   }
 };
 
 /**
- * Close the Gallery and go to Files.app.
+ * Closes the Gallery and go to Files.app.
  * @private
  */
 Gallery.prototype.back_ = function() {
   if (util.isFullScreen(this.context_.appWindow)) {
     util.toggleFullScreen(this.context_.appWindow,
                           false);  // Leave the full screen mode.
   }
-  this.context_.onBack(this.getSelectedUrls());
+  this.context_.onBack(this.getSelectedEntries());
 };
 
 /**
- * Handle user's 'Back' action (Escape or a click on the X icon).
+ * Handles user's 'Back' action (Escape or a click on the X icon).
  * @private
  */
 Gallery.prototype.onBack_ = function() {
   this.executeWhenReady(this.back_.bind(this));
 };
 
 /**
- * Handle user's 'Close' action.
+ * Handles user's 'Close' action.
  * @private
  */
 Gallery.prototype.onClose_ = function() {
   this.executeWhenReady(this.context_.onClose);
 };
 
 /**
- * Handle user's 'Maximize' action (Escape or a click on the X icon).
+ * Handles user's 'Maximize' action (Escape or a click on the X icon).
  * @private
  */
 Gallery.prototype.onMaximize_ = function() {
   this.executeWhenReady(this.context_.onMaximize);
 };
 
 /**
- * Execute a function when the editor is done with the modifications.
+ * Executes a function when the editor is done with the modifications.
  * @param {function} callback Function to execute.
  */
 Gallery.prototype.executeWhenReady = function(callback) {
   this.currentMode_.executeWhenReady(callback);
 };
 
 /**
  * @return {Object} File browser private API.
  */
 Gallery.getFileBrowserPrivate = function() {
@@ skipping 12 matching lines @@
 * External user action event handler.
 * @private
 */
 Gallery.prototype.onUserAction_ = function() {
   this.closeShareMenu_();
   // Show the toolbar and hide it after the default timeout.
   this.inactivityWatcher_.kick();
 };
 
 /**
- * Set the current mode, update the UI.
+ * Sets the current mode, update the UI.
  * @param {Object} mode Current mode.
  * @private
  */
 Gallery.prototype.setCurrentMode_ = function(mode) {
-  if (mode != this.slideMode_ && mode != this.mosaicMode_)
+  if (mode !== this.slideMode_ && mode !== this.mosaicMode_)
     console.error('Invalid Gallery mode');
 
   this.currentMode_ = mode;
   this.container_.setAttribute('mode', this.currentMode_.getName());
   this.updateSelectionAndState_();
   this.updateButtons_();
 };
 
 /**
  * Mode toggle event handler.
@@ skipping 16 matching lines @@
   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_) {
+  if (this.currentMode_ === this.slideMode_) {
     this.setCurrentMode_(this.mosaicMode_);
     mosaic.transform(
         tileRect, this.slideMode_.getSelectedImageRect(), true /* instant */);
     this.slideMode_.leave(tileRect,
         function() {
           // Animate back to normal position.
           mosaic.transform();
           mosaic.show();
           onModeChanged();
         }.bind(this));
@@ skipping 24 matching lines @@
   /* TODO(dgozman): Implement Undo delete, Remove the confirmation dialog. */
 
   var itemsToRemove = this.getSelectedItems();
   var plural = itemsToRemove.length > 1;
   var param = plural ? itemsToRemove.length : itemsToRemove[0].getFileName();
 
   function deleteNext() {
     if (!itemsToRemove.length)
       return;  // All deleted.
 
-    var url = itemsToRemove.pop().getUrl();
-    webkitResolveLocalFileSystemURL(url,
-        function(entry) {
-          entry.remove(deleteNext,
-              util.flog('Error deleting ' + url, deleteNext));
-        },
-        util.flog('Error resolving ' + url, deleteNext));
+    // TODO(hirono): Use fileOperationManager.
+    var entry = itemsToRemove.pop().getEntry();
+    entry.remove(deleteNext, function() {
+      util.flog('Error deleting: ' + entry.fullPath, deleteNext);
+    });
   }
 
   // Prevent the Gallery from handling Esc and Enter.
   this.document_.body.removeEventListener('keydown', this.keyDownBound_);
   var restoreListener = function() {
     this.document_.body.addEventListener('keydown', this.keyDownBound_);
   }.bind(this);
 
   cr.ui.dialogs.BaseDialog.OK_LABEL = this.displayStringFunction_(
       'GALLERY_OK_LABEL');
@@ skipping 21 matching lines @@
 
 /**
  * @return {Array.<Gallery.Item>} Current selection.
  */
 Gallery.prototype.getSelectedItems = function() {
   return this.selectionModel_.selectedIndexes.map(
       this.dataModel_.item.bind(this.dataModel_));
 };
 
 /**
- * @return {Array.<string>} Array of currently selected urls.
+ * @return {Array.<Entry>} Array of currently selected entries.
  */
-Gallery.prototype.getSelectedUrls = function() {
+Gallery.prototype.getSelectedEntries = function() {
   return this.selectionModel_.selectedIndexes.map(function(index) {
-    return this.dataModel_.item(index).getUrl();
+    return this.dataModel_.item(index).getEntry();
   }.bind(this));
 };
 
 /**
  * @return {Gallery.Item} Current single selection.
  */
 Gallery.prototype.getSingleSelectedItem = function() {
   var items = this.getSelectedItems();
   if (items.length > 1)
     throw new Error('Unexpected multiple selection');
@@ skipping 17 matching lines @@
   this.selectionModel_.adjustLength(this.dataModel_.length);
 };
 
 /**
  * Content change event handler.
  * @param {Event} event Event.
  * @private
 */
 Gallery.prototype.onContentChange_ = function(event) {
   var index = this.dataModel_.indexOf(event.item);
-  if (index != this.selectionModel_.selectedIndex)
+  if (index !== this.selectionModel_.selectedIndex)
     console.error('Content changed for unselected item');
   this.updateSelectionAndState_();
 };
 
 /**
  * Keydown handler.
  *
  * @param {Event} event Event.
  * @private
  */
@@ skipping 27 matching lines @@
     case 'U+007F':  // Delete
     case 'Shift-U+0033':  // Shift+'3' (Delete key might be missing).
       this.delete_();
       break;
   }
 };
 
 // Name box and rename support.
 
 /**
- * Update the UI related to the selected item and the persistent state.
+ * Updates the UI related to the selected item and the persistent state.
  *
  * @private
  */
 Gallery.prototype.updateSelectionAndState_ = function() {
   var path;
   var displayName = '';
 
   var selectedItems = this.getSelectedItems();
-  if (selectedItems.length == 1) {
+  if (selectedItems.length === 1) {
     var item = selectedItems[0];
-    path = util.extractFilePath(item.getUrl());
-    var fullName = item.getFileName();
-    window.top.document.title = fullName;
-    displayName = ImageUtil.getFileNameFromFullName(fullName);
+    var entry = item.getEntry();
+    window.top.document.title = entry.name;
+    displayName = ImageUtil.getDisplayNameFromName(entry.name);
   } else if (selectedItems.length > 1 && this.context_.curDirEntry) {
     // If the Gallery was opened on search results the search query will not be
     // recorded in the app state and the relaunch will just open the gallery
     // in the curDirEntry directory.
     path = this.context_.curDirEntry.fullPath;
     window.top.document.title = this.context_.curDirEntry.name;
     displayName =
         this.displayStringFunction_('GALLERY_ITEMS_SELECTED',
                                     selectedItems.length);
   }
 
   window.top.util.updateAppState(path,
-      {gallery: (this.currentMode_ == this.mosaicMode_ ? 'mosaic' : 'slide')});
+      {gallery: (this.currentMode_ === this.mosaicMode_ ? 'mosaic' : 'slide')});
 
   // We can't rename files in readonly directory.
   // We can only rename a single file.
-  this.filenameEdit_.disabled = selectedItems.length != 1 ||
+  this.filenameEdit_.disabled = selectedItems.length !== 1 ||
                                 this.context_.readonlyDirName;
 
   this.filenameEdit_.value = displayName;
 
   // Resolve real filesystem path of the current file.
   if (this.selectionModel_.selectedIndexes.length) {
     var selectedIndex = this.selectionModel_.selectedIndex;
     var selectedItem =
         this.dataModel_.item(this.selectionModel_.selectedIndex);
-
-    this.selectedItemFilesystemPath_ = null;
-    webkitResolveLocalFileSystemURL(selectedItem.getUrl(),
-      function(entry) {
-        if (this.selectionModel_.selectedIndex != selectedIndex)
-          return;
-        this.selectedItemFilesystemPath_ = entry.fullPath;
-      }.bind(this));
+    this.selectedEntry_ = selectedItem.getEntry();
   }
 };
 
 /**
  * Click event handler on filename edit box
  * @private
  */
 Gallery.prototype.onFilenameFocus_ = function() {
   ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', true);
   this.filenameEdit_.originalValue = this.filenameEdit_.value;
   setTimeout(this.filenameEdit_.select.bind(this.filenameEdit_), 0);
   this.onUserAction_();
 };
 
 /**
  * Blur event handler on filename edit box.
  *
  * @param {Event} event Blur event.
  * @return {boolean} if default action should be prevented.
  * @private
  */
 Gallery.prototype.onFilenameEditBlur_ = function(event) {
-  if (this.filenameEdit_.value && this.filenameEdit_.value[0] == '.') {
+  if (this.filenameEdit_.value && this.filenameEdit_.value[0] === '.') {
     this.prompt_.show('GALLERY_FILE_HIDDEN_NAME', 5000);
     this.filenameEdit_.focus();
     event.stopPropagation();
     event.preventDefault();
     return false;
   }
 
   var item = this.getSingleSelectedItem();
-  var oldUrl = item.getUrl();
+  var oldEntry = item.getEntry();
 
   var onFileExists = function() {
     this.prompt_.show('GALLERY_FILE_EXISTS', 3000);
     this.filenameEdit_.value = name;
     this.filenameEdit_.focus();
   }.bind(this);
 
   var onSuccess = function() {
-    var e = new Event('content');
-    e.item = item;
-    e.oldUrl = oldUrl;
-    e.metadata = null;  // Metadata unchanged.
-    this.dataModel_.dispatchEvent(e);
+    var event = new Event('content');
+    event.item = item;
+    event.oldEntry = oldEntry;
+    event.metadata = null;  // Metadata unchanged.
+    this.dataModel_.dispatchEvent(event);
   }.bind(this);
 
   if (this.filenameEdit_.value) {
     this.getSingleSelectedItem().rename(
         this.filenameEdit_.value, onSuccess, onFileExists);
   }
 
   ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', false);
   this.onUserAction_();
 };
@@ skipping 60 matching lines @@
   if (!this.shareButton_.hasAttribute('disabled'))
     this.shareMenu_.hidden = !this.shareMenu_.hidden;
   this.inactivityWatcher_.check();
 };
 
 /**
  * Updates available actions list based on the currently selected urls.
  * @private.
  */
 Gallery.prototype.updateShareMenu_ = function() {
-  var urls = this.getSelectedUrls();
+  var entries = this.getSelectedEntries();
 
   function isShareAction(task) {
     var taskParts = task.taskId.split('|');
-    return taskParts[0] != chrome.runtime.id;
+    return taskParts[0] !== chrome.runtime.id;
   }
 
   var api = Gallery.getFileBrowserPrivate();
   var mimeTypes = [];  // TODO(kaznacheev) Collect mime types properly.
 
   var createShareMenu = function(tasks) {
     var wasHidden = this.shareMenu_.hidden;
     this.shareMenu_.hidden = true;
     var items = this.shareMenu_.querySelectorAll('.item');
-    for (var i = 0; i != items.length; i++) {
+    for (var i = 0; i !== items.length; i++) {
       items[i].parentNode.removeChild(items[i]);
     }
 
-    for (var t = 0; t != tasks.length; t++) {
+    for (var t = 0; t !== tasks.length; t++) {
       var task = tasks[t];
       if (!isShareAction(task)) continue;
 
       var item = util.createChild(this.shareMenu_, 'item');
       item.textContent = task.title;
       item.style.backgroundImage = 'url(' + task.iconUrl + ')';
       item.addEventListener('click', function(taskId) {
         this.toggleShare_();  // Hide the menu.
-        this.executeWhenReady(api.executeTask.bind(api, taskId, urls));
+        this.executeWhenReady(api.executeTask.bind(api, taskId, entries));
       }.bind(this, task.taskId));
     }
 
-    var empty = this.shareMenu_.querySelector('.item') == null;
+    var empty = this.shareMenu_.querySelector('.item') === null;
     ImageUtil.setAttribute(this.shareButton_, 'disabled', empty);
     this.shareMenu_.hidden = wasHidden || empty;
   }.bind(this);
 
   // Create or update the share menu with a list of sharing tasks and show
   // or hide the share button.
-  if (!urls.length)
+  // TODO(mtomasz): Pass Entries directly, instead of URLs.
+  if (!entries.length)
     createShareMenu([]);  // Empty list of tasks, since there is no selection.
   else
-    api.getFileTasks(urls, mimeTypes, createShareMenu);
+    api.getFileTasks(util.entriesToURLs(entries), mimeTypes, createShareMenu);
 };
 
 /**
  * Updates thumbnails.
  * @private
  */
 Gallery.prototype.updateThumbnails_ = function() {
-  if (this.currentMode_ == this.slideMode_)
+  if (this.currentMode_ === this.slideMode_)
     this.slideMode_.updateThumbnails();
 
   if (this.mosaicMode_) {
     var mosaic = this.mosaicMode_.getMosaic();
     if (mosaic.isInitialized())
       mosaic.reload();
   }
 };
 
 /**
  * Updates buttons.
  * @private
  */
 Gallery.prototype.updateButtons_ = function() {
   if (this.modeButton_) {
     var oppositeMode =
-        this.currentMode_ == this.slideMode_ ? this.mosaicMode_ :
-                                               this.slideMode_;
+        this.currentMode_ === this.slideMode_ ? this.mosaicMode_ :
+                                                this.slideMode_;
     this.modeButton_.title =
         this.displayStringFunction_(oppositeMode.getTitle());
   }
 };