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

chrome/browser/resources/file_manager/foreground/js/photo/slide_mode.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';
 
 /**
  * Slide mode displays a single image and has a set of controls to navigate
  * between the images and to edit an image.
  *
@@ skipping 98 matching lines @@
   var overwriteOriginalBox =
       util.createChild(this.options_, 'overwrite-original');
 
   this.overwriteOriginal_ = util.createChild(
       overwriteOriginalBox, 'common white', 'input');
   this.overwriteOriginal_.type = 'checkbox';
   this.overwriteOriginal_.id = 'overwrite-checkbox';
   util.platform.getPreference(SlideMode.OVERWRITE_KEY, function(value) {
     // Out-of-the box default is 'true'
     this.overwriteOriginal_.checked =
-        (typeof value != 'string' || value == 'true');
+        (typeof value !== 'string' || value === 'true');
   }.bind(this));
   this.overwriteOriginal_.addEventListener('click',
       this.onOverwriteOriginalClick_.bind(this));
 
   var overwriteLabel = util.createChild(overwriteOriginalBox, '', 'label');
   overwriteLabel.textContent =
       this.displayStringFunction_('GALLERY_OVERWRITE_ORIGINAL');
   overwriteLabel.setAttribute('for', 'overwrite-checkbox');
 
   this.bubble_ = util.createChild(this.toolbar_, 'bubble');
@@ skipping 131 matching lines @@
 
     // Wait 1000ms after the animation is done, then prefetch the next image.
     this.requestPrefetch(1, delay + 1000);
 
     if (loadCallback) loadCallback();
   }.bind(this);
 
   // The latest |leave| call might have left the image animating. Remove it.
   this.unloadImage_();
 
-  if (this.getItemCount_() == 0) {
+  if (this.getItemCount_() === 0) {
     this.displayedIndex_ = -1;
     //TODO(kaznacheev) Show this message in the grid mode too.
     this.showErrorBanner_('GALLERY_NO_IMAGES');
     loadDone();
   } else {
     // Remember the selection if it is empty or multiple. It will be restored
     // in |leave| if the user did not changing the selection manually.
     var currentSelection = this.selectionModel_.selectedIndexes;
-    if (currentSelection.length == 1)
+    if (currentSelection.length === 1)
       this.savedSelection_ = null;
     else
       this.savedSelection_ = currentSelection;
 
     // Ensure valid single selection.
     // Note that the SlideMode object is not listening to selection change yet.
     this.select(Math.max(0, this.getSelectedIndex()));
     this.displayedIndex_ = this.getSelectedIndex();
 
     var selectedItem = this.getSelectedItem();
-    var selectedUrl = selectedItem.getUrl();
     // Show the selected item ASAP, then complete the initialization
     // (loading the ribbon thumbnails can take some time).
-    this.metadataCache_.get(selectedUrl, Gallery.METADATA_TYPE,
+    this.metadataCache_.get(selectedItem.getEntry(), Gallery.METADATA_TYPE,
         function(metadata) {
-          this.loadItem_(selectedUrl, metadata,
+          this.loadItem_(selectedItem.getEntry(), metadata,
               zoomFromRect && this.imageView_.createZoomEffect(zoomFromRect),
               displayCallback, loadDone);
         }.bind(this));
 
   }
 };
 
 /**
  * Leave the mode.
  * @param {Rect} zoomToRect Rectangle for zoom effect.
@@ skipping 10 matching lines @@
       this.dataModel_.removeEventListener('splice', this.onSpliceBound_);
       this.dataModel_.removeEventListener('content', this.onContentBound_);
       this.ribbon_.disable();
       this.active_ = false;
       if (this.savedSelection_)
         this.selectionModel_.selectedIndexes = this.savedSelection_;
       this.unloadImage_(zoomToRect);
       callback();
     }.bind(this);
 
-  if (this.getItemCount_() == 0) {
+  if (this.getItemCount_() === 0) {
     this.showErrorBanner_(false);
     commitDone();
   } else {
     this.commitItem_(commitDone);
   }
 
   // Disable the slide-mode only buttons when leaving.
   this.editButton_.setAttribute('disabled', '');
   this.printButton_.setAttribute('disabled', '');
 };
@@ skipping 64 matching lines @@
                         !util.isFullScreen(this.context_.appWindow));
 };
 
 /**
  * Selection change handler.
  *
  * Commits the current image and displays the newly selected image.
  * @private
  */
 SlideMode.prototype.onSelection_ = function() {
-  if (this.selectionModel_.selectedIndexes.length == 0)
+  if (this.selectionModel_.selectedIndexes.length === 0)
     return;  // Temporary empty selection.
 
   // Forget the saved selection if the user changed the selection manually.
   if (!this.isSlideshowOn_())
     this.savedSelection_ = null;
 
-  if (this.getSelectedIndex() == this.displayedIndex_)
+  if (this.getSelectedIndex() === this.displayedIndex_)
     return;  // Do not reselect.
 
   this.commitItem_(this.loadSelectedItem_.bind(this));
 };
 
 /**
  * Handles changes in tools visibility, and if the header is dimmed, then
  * requests disabling the draggable app region.
  *
  * @private
@@ skipping 19 matching lines @@
 /**
  * Load the selected item.
  *
  * @private
  */
 SlideMode.prototype.loadSelectedItem_ = function() {
   var slideHint = this.slideHint_;
   this.slideHint_ = undefined;
 
   var index = this.getSelectedIndex();
-  if (index == this.displayedIndex_)
+  if (index === this.displayedIndex_)
     return;  // Do not reselect.
 
   var step = slideHint || (index - this.displayedIndex_);
 
   if (Math.abs(step) != 1) {
     // Long leap, the sequence is broken, we have no good prefetch candidate.
     this.sequenceDirection_ = 0;
     this.sequenceLength_ = 0;
-  } else if (this.sequenceDirection_ == step) {
+  } else if (this.sequenceDirection_ === step) {
     // Keeping going in sequence.
     this.sequenceLength_++;
   } else {
     // Reversed the direction. Reset the counter.
     this.sequenceDirection_ = step;
     this.sequenceLength_ = 1;
   }
 
   if (this.sequenceLength_ <= 1) {
     // We have just broke the sequence. Touch the current image so that it stays
     // in the cache longer.
-    this.imageView_.prefetch(this.imageView_.contentID_);
+    this.imageView_.prefetch(this.imageView_.contentEntry_);
   }
 
   this.displayedIndex_ = index;
 
   function shouldPrefetch(loadType, step, sequenceLength) {
     // Never prefetch when selecting out of sequence.
     if (Math.abs(step) != 1)
       return false;
 
     // Never prefetch after a video load (decoding the next image can freeze
     // the UI for a second or two).
-    if (loadType == ImageView.LOAD_TYPE_VIDEO_FILE)
+    if (loadType === ImageView.LOAD_TYPE_VIDEO_FILE)
       return false;
 
     // Always prefetch if the previous load was from cache.
-    if (loadType == ImageView.LOAD_TYPE_CACHED_FULL)
+    if (loadType === ImageView.LOAD_TYPE_CACHED_FULL)
       return true;
 
     // Prefetch if we have been going in the same direction for long enough.
     return sequenceLength >= 3;
   }
 
   var selectedItem = this.getSelectedItem();
   this.currentUniqueKey_++;
   var selectedUniqueKey = this.currentUniqueKey_;
   var onMetadata = function(metadata) {
     // Discard, since another load has been invoked after this one.
     if (selectedUniqueKey != this.currentUniqueKey_) return;
-    this.loadItem_(selectedItem.getUrl(), metadata,
+    this.loadItem_(selectedItem.getEntry(), metadata,
         new ImageView.Effect.Slide(step, this.isSlideshowPlaying_()),
         function() {} /* no displayCallback */,
         function(loadType, delay) {
           // Discard, since another load has been invoked after this one.
           if (selectedUniqueKey != this.currentUniqueKey_) return;
           if (shouldPrefetch(loadType, step, this.sequenceLength_)) {
             this.requestPrefetch(step, delay);
           }
           if (this.isSlideshowPlaying_())
             this.scheduleNextSlide_();
         }.bind(this));
   }.bind(this);
   this.metadataCache_.get(
-      selectedItem.getUrl(), Gallery.METADATA_TYPE, onMetadata);
+      selectedItem.getEntry(), Gallery.METADATA_TYPE, onMetadata);
 };
 
 /**
  * Unload the current image.
  *
  * @param {Rect} zoomToRect Rectangle for zoom effect.
  * @private
  */
 SlideMode.prototype.unloadImage_ = function(zoomToRect) {
   this.imageView_.unload(zoomToRect);
@@ skipping 40 matching lines @@
 /**
  * @param {number} direction -1 for left, 1 for right.
  * @return {number} Next index in the given direction, with wrapping.
  * @private
  */
 SlideMode.prototype.getNextSelectedIndex_ = function(direction) {
   function advance(index, limit) {
     index += (direction > 0 ? 1 : -1);
     if (index < 0)
       return limit - 1;
-    if (index == limit)
+    if (index === limit)
       return 0;
     return index;
   }
 
   // If the saved selection is multiple the Slideshow should cycle through
   // the saved selection.
   if (this.isSlideshowOn_() &&
       this.savedSelection_ && this.savedSelection_.length > 1) {
     var pos = advance(this.savedSelection_.indexOf(this.getSelectedIndex()),
         this.savedSelection_.length);
     return this.savedSelection_[pos];
   } else {
     return advance(this.getSelectedIndex(), this.getItemCount_());
   }
 };
 
 /**
  * Advance the selection based on the pressed key ID.
  * @param {string} keyID Key identifier.
  */
 SlideMode.prototype.advanceWithKeyboard = function(keyID) {
-  this.advanceManually(keyID == 'Up' || keyID == 'Left' ? -1 : 1);
+  this.advanceManually(keyID === 'Up' || keyID === 'Left' ? -1 : 1);
 };
 
 /**
  * Advance the selection as a result of a user action (as opposed to an
  * automatic change in the slideshow mode).
  * @param {number} direction -1 for left, 1 for right.
  */
 SlideMode.prototype.advanceManually = function(direction) {
   if (this.isSlideshowPlaying_()) {
     this.pauseSlideshow_();
@@ skipping 22 matching lines @@
  */
 SlideMode.prototype.selectLast = function() {
   this.select(this.getItemCount_() - 1);
 };
 
 // Loading/unloading
 
 /**
  * Load and display an item.
  *
- * @param {string} url Item url.
+ * @param {FileEntry} entry Item entry to be loaded.
  * @param {Object} metadata Item metadata.
  * @param {Object} effect Transition effect object.
  * @param {function} displayCallback Called when the image is displayed
  *     (which can happen before the image load due to caching).
  * @param {function} loadCallback Called when the image is fully loaded.
  * @private
  */
 SlideMode.prototype.loadItem_ = function(
-    url, metadata, effect, displayCallback, loadCallback) {
+    entry, metadata, effect, displayCallback, loadCallback) {
   this.selectedImageMetadata_ = MetadataCache.cloneMetadata(metadata);
 
   this.showSpinner_(true);
 
   var loadDone = function(loadType, delay, error) {
     var video = this.isShowingVideo_();
     ImageUtil.setAttribute(this.container_, 'video', video);
 
     this.showSpinner_(false);
-    if (loadType == ImageView.LOAD_TYPE_ERROR) {
+    if (loadType === ImageView.LOAD_TYPE_ERROR) {
       // if we have a specific error, then display it
       if (error) {
         this.showErrorBanner_(error);
       } else {
         // otherwise try to infer general error
         this.showErrorBanner_(
             video ? 'GALLERY_VIDEO_ERROR' : 'GALLERY_IMAGE_ERROR');
       }
-    } else if (loadType == ImageView.LOAD_TYPE_OFFLINE) {
+    } else if (loadType === ImageView.LOAD_TYPE_OFFLINE) {
       this.showErrorBanner_(
           video ? 'GALLERY_VIDEO_OFFLINE' : 'GALLERY_IMAGE_OFFLINE');
     }
 
     if (video) {
       // The editor toolbar does not make sense for video, hide it.
       this.stopEditing_();
       this.mediaControls_.attachMedia(this.imageView_.getVideo());
 
       // TODO(kaznacheev): Add metrics for video playback.
     } else {
       ImageUtil.metrics.recordUserAction(ImageUtil.getMetricName('View'));
 
       var toMillions = function(number) {
         return Math.round(number / (1000 * 1000));
       };
 
       ImageUtil.metrics.recordSmallCount(ImageUtil.getMetricName('Size.MB'),
           toMillions(metadata.filesystem.size));
 
       var canvas = this.imageView_.getCanvas();
       ImageUtil.metrics.recordSmallCount(ImageUtil.getMetricName('Size.MPix'),
           toMillions(canvas.width * canvas.height));
 
-      var extIndex = url.lastIndexOf('.');
-      var ext = extIndex < 0 ? '' : url.substr(extIndex + 1).toLowerCase();
-      if (ext == 'jpeg') ext = 'jpg';
+      var extIndex = entry.name.lastIndexOf('.');
+      var ext = extIndex < 0 ? '' :
+          entry.name.substr(extIndex + 1).toLowerCase();
+      if (ext === 'jpeg') ext = 'jpg';
       ImageUtil.metrics.recordEnum(
           ImageUtil.getMetricName('FileType'), ext, ImageUtil.FILE_TYPES);
     }
 
     // Enable or disable buttons for editing and printing.
     if (video || error) {
       this.editButton_.setAttribute('disabled', '');
       this.printButton_.setAttribute('disabled', '');
     } else {
       this.editButton_.removeAttribute('disabled');
       this.printButton_.removeAttribute('disabled');
     }
 
     // For once edited image, disallow the 'overwrite' setting change.
     ImageUtil.setAttribute(this.options_, 'saved',
         !this.getSelectedItem().isOriginal());
 
     util.platform.getPreference(SlideMode.OVERWRITE_BUBBLE_KEY,
         function(value) {
-          var times = typeof value == 'string' ? parseInt(value, 10) : 0;
+          var times = typeof value === 'string' ? parseInt(value, 10) : 0;
           if (times < SlideMode.OVERWRITE_BUBBLE_MAX_TIMES) {
             this.bubble_.hidden = false;
             if (this.isEditing()) {
               util.platform.setPreference(
                   SlideMode.OVERWRITE_BUBBLE_KEY, times + 1);
             }
           }
         }.bind(this));
 
     loadCallback(loadType, delay);
   }.bind(this);
 
   var displayDone = function() {
     cr.dispatchSimpleEvent(this, 'image-displayed');
     displayCallback();
   }.bind(this);
 
-  this.editor_.openSession(url, metadata, effect,
+  this.editor_.openSession(entry, metadata, effect,
       this.saveCurrentImage_.bind(this), displayDone, loadDone);
 };
 
 /**
  * Commit changes to the current item and reset all messages/indicators.
  *
  * @param {function} callback Callback.
  * @private
  */
 SlideMode.prototype.commitItem_ = function(callback) {
@@ skipping 21 matching lines @@
  * Request a prefetch for the next image.
  *
  * @param {number} direction -1 or 1.
  * @param {number} delay Delay in ms. Used to prevent the CPU-heavy image
  *   loading from disrupting the animation that might be still in progress.
  */
 SlideMode.prototype.requestPrefetch = function(direction, delay) {
   if (this.getItemCount_() <= 1) return;
 
   var index = this.getNextSelectedIndex_(direction);
-  var nextItemUrl = this.getItem(index).getUrl();
-  this.imageView_.prefetch(nextItemUrl, delay);
+  var nextItemEntry = this.getItem(index).getEntry();
+  this.imageView_.prefetch(nextItemEntry, delay);
 };
 
 // Event handlers.
 
 /**
  * Unload handler, to be called from the top frame.
  * @param {boolean} exiting True if the app is exiting.
  */
 SlideMode.prototype.onUnload = function(exiting) {
   if (this.isShowingVideo_() && this.mediaControls_.isPlaying()) {
@@ skipping 139 matching lines @@
 // Saving
 
 /**
  * Save the current image to a file.
  *
  * @param {function} callback Callback.
  * @private
  */
 SlideMode.prototype.saveCurrentImage_ = function(callback) {
   var item = this.getSelectedItem();
-  var oldUrl = item.getUrl();
+  var oldEntry = item.getEntry();
   var canvas = this.imageView_.getCanvas();
 
   this.showSpinner_(true);
   var metadataEncoder = ImageEncoder.encodeMetadata(
       this.selectedImageMetadata_.media, canvas, 1 /* quality */);
 
   this.selectedImageMetadata_ = ContentProvider.ConvertContentMetadata(
       metadataEncoder.getMetadata(), this.selectedImageMetadata_);
 
   item.saveToFile(
       this.context_.saveDirEntry,
       this.shouldOverwriteOriginal_(),
       canvas,
       metadataEncoder,
       function(success) {
         // TODO(kaznacheev): Implement write error handling.
         // Until then pretend that the save succeeded.
         this.showSpinner_(false);
         this.flashSavedLabel_();
 
-        var e = new Event('content');
-        e.item = item;
-        e.oldUrl = oldUrl;
-        e.metadata = this.selectedImageMetadata_;
-        this.dataModel_.dispatchEvent(e);
+        var event = new Event('content');
+        event.item = item;
+        event.oldEntry = oldEntry;
+        event.metadata = this.selectedImageMetadata_;
+        this.dataModel_.dispatchEvent(event);
 
         // Allow changing the 'Overwrite original' setting only if the user
         // used Undo to restore the original image AND it is not a copy.
         // Otherwise lock the setting in its current state.
         var mayChangeOverwrite = !this.editor_.canUndo() && item.isOriginal();
         ImageUtil.setAttribute(this.options_, 'saved', !mayChangeOverwrite);
 
-        if (this.imageView_.getContentRevision() == 1) {  // First edit.
+        if (this.imageView_.getContentRevision() === 1) {  // First edit.
           ImageUtil.metrics.recordUserAction(ImageUtil.getMetricName('Edit'));
         }
 
-        if (oldUrl != item.getUrl()) {
+        if (util.isSameEntry(oldEntry, item.getEntry())) {
           this.dataModel_.splice(
-              this.getSelectedIndex(), 0, new Gallery.Item(oldUrl));
+              this.getSelectedIndex(), 0, new Gallery.Item(oldEntry));
           // The ribbon will ignore the splice above and redraw after the
           // select call below (while being obscured by the Editor toolbar,
           // so there is no need for nice animation here).
           // SlideMode will ignore the selection change as the displayed item
           // index has not changed.
           this.select(++this.displayedIndex_);
         }
         callback();
         cr.dispatchSimpleEvent(this, 'image-saved');
       }.bind(this));
 };
 
 /**
- * Update caches when the selected item url has changed.
- *
+ * Update caches when the selected item has been renamed.
  * @param {Event} event Event.
  * @private
  */
 SlideMode.prototype.onContentChange_ = function(event) {
-  var newUrl = event.item.getUrl();
-  if (newUrl != event.oldUrl) {
-    this.imageView_.changeUrl(newUrl);
-  }
-  this.metadataCache_.clear(event.oldUrl, Gallery.METADATA_TYPE);
+  var newEntry = event.item.getEntry();
+  if (util.isSameEntry(newEntry, event.oldEntry))
+    this.imageView_.changeEntry(newEntry);
+  this.metadataCache_.clear(event.oldEntry, Gallery.METADATA_TYPE);
 };
 
 /**
  * Flash 'Saved' label briefly to indicate that the image has been saved.
  * @private
  */
 SlideMode.prototype.flashSavedLabel_ = function() {
   var setLabelHighlighted =
       ImageUtil.setAttribute.bind(null, this.savedLabel_, 'highlighted');
   setTimeout(setLabelHighlighted.bind(null, true), 0);
@@ skipping 133 matching lines @@
     this.leaveAfterSlideshow_ = false;
     setTimeout(this.toggleMode_.bind(this), toggleModeDelay);
   }
 };
 
 /**
  * @return {boolean} True if the slideshow is playing (not paused).
  * @private
  */
 SlideMode.prototype.isSlideshowPlaying_ = function() {
-  return this.container_.getAttribute('slideshow') == 'playing';
+  return this.container_.getAttribute('slideshow') === 'playing';
 };
 
 /**
  * Pause/resume the slideshow.
  * @private
  */
 SlideMode.prototype.toggleSlideshowPause_ = function() {
   cr.dispatchSimpleEvent(this, 'useraction');  // Show the tools.
   if (this.isSlideshowPlaying_()) {
     this.pauseSlideshow_();
@@ skipping 174 matching lines @@
       done = true;
     }
   }.bind(this);
 };
 
 /**
  * If the user touched the image and moved the finger more than SWIPE_THRESHOLD
  * horizontally it's considered as a swipe gesture (change the current image).
  */
 SwipeOverlay.SWIPE_THRESHOLD = 100;