[Photo Editor] Save edited images immediately.

chrome/browser/resources/file_manager/js/image_editor/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.
 
 /*
  * Base class that Ribbon uses to display photos.
  */
 
 function RibbonClient() {}
 
-RibbonClient.prototype.prefetchImage = function(id, content, metadata) {};
+RibbonClient.prototype.prefetchImage = function(id, url) {};
 
-RibbonClient.prototype.openImage = function(id, content, metadata, direction) {
+RibbonClient.prototype.openImage = function(id, url, metadata, direction) {
 };
 
 RibbonClient.prototype.closeImage = function(item) {};
 
 /**
  * Image gallery for viewing and editing image files.
  *
  * @param {HTMLDivElement} container
  * @param {Object} context Object containing the following:
  *     {function(string)} onNameChange Called every time a selected
@@ skipping 13 matching lines @@
   var strf = context.displayStringFunction;
   this.displayStringFunction_ = function(id, formatArgs) {
     var args = Array.prototype.slice.call(arguments);
     args[0] = 'GALLERY_' + id.toUpperCase();
     return strf.apply(null, args);
   };
 
   this.onFadeTimeoutBound_ = this.onFadeTimeout_.bind(this);
   this.fadeTimeoutId_ = null;
   this.mouseOverTool_ = false;
-  this.imageChanges_ = 0;
 
   this.initDom_();
 }
 
 Gallery.prototype = { __proto__: RibbonClient.prototype };
 
 Gallery.open = function(context, items, selectedItem) {
   var container = document.querySelector('.gallery');
   ImageUtil.removeChildren(container);
   var gallery = new Gallery(container, context);
@@ skipping 247 matching lines @@
   // Append a file name after an anchor so that the Gallery
   // code can find the file extension at the end of the url.
   // A File instance contains the real file name in the 'name' property.
   // For a Blob instance we make up a fake file name out of the mime type
   // (image/jpeg -> image.jpg).
   return window.webkitURL.createObjectURL(blob) +
       '#' + (blob.name || (blob.type.replace('/', '.')));
 };
 
 Gallery.prototype.onBeforeUnload_ = function(event) {
-  if (this.imageChanges_ > 0) {
-    setTimeout(this.saveChanges_.bind(this), 1000);
+  if (this.editor_.isBusy())
     return this.displayStringFunction_('unsaved_changes');
-  }
   return null;
 };
 
 Gallery.prototype.load = function(items, selectedItem) {
   var urls = [];
   var selectedIndex = -1;
 
   // Convert canvas and blob items to blob urls.
   for (var i = 0; i != items.length; i++) {
     var item = items[i];
@@ skipping 51 matching lines @@
         this.toolbar_, tasks,
         this.onShare_.bind(this), this.onActionExecute_.bind(this),
         this.displayStringFunction_);
     } else {
       this.shareMode_ = null;
     }
   }.bind(this));
 };
 
 Gallery.prototype.onImageContentChanged_ = function() {
-  this.imageChanges_++;
-  if (this.imageChanges_ == 0) return;
+  var revision = this.imageView_.getContentRevision();
+  if (revision == 0) return;  // Just loaded.
 
-  if (this.imageChanges_ == 1) {
+  if (revision == 1) {
     // First edit.
     this.filenameSpacer_.setAttribute('saved', 'saved');
     this.filenameSpacer_.setAttribute('overwrite', 'overwrite');
 
     var key = 'gallery-overwrite-original';
     var overwrite = key in localStorage ? (localStorage[key] == "true") : true;
     this.overwriteOriginal_.checked = overwrite;
     this.applyOverwrite_(overwrite);
 
     key = 'gallery-overwrite-bubble';
     var times = key in localStorage ? parseInt(localStorage[key], 10) : 0;
     if (times < Gallery.OVERWRITE_BUBBLE_MAX_TIMES) {
       this.bubble_.removeAttribute('hidden');
       localStorage[key] = times + 1;
     }
 
     ImageUtil.metrics.recordUserAction(ImageUtil.getMetricName('Edit'));
   }
+};
 
+Gallery.prototype.flashSavedLabel_ = function() {
   var label = this.savedLabel_;
   setTimeout(function(){ label.setAttribute('highlighted', 'true'); }, 0);
   setTimeout(function(){ label.removeAttribute('highlighted'); }, 300);
 };
 
 Gallery.prototype.applyOverwrite_ = function(overwrite) {
   if (overwrite) {
     this.ribbon_.getSelectedItem().setOriginalName(this.context_.saveDirEntry,
-      this.updateFilename_.bind(this));
+        this.updateFilename_.bind(this));
   } else {
     this.ribbon_.getSelectedItem().setCopyName(this.context_.saveDirEntry,
-      this.updateFilename_.bind(this));
+        this.selectedImageMetadata_,
+        this.updateFilename_.bind(this));
   }
 };
 
 Gallery.prototype.onOverwriteOriginalClick_ = function(event) {
   var overwrite = event.target.checked;
   localStorage['gallery-overwrite-original'] = overwrite;
   this.applyOverwrite_(overwrite);
 };
 
 Gallery.prototype.onCloseBubble_ = function(event) {
   this.bubble_.setAttribute('hidden', 'hidden');
   localStorage['gallery-overwrite-bubble'] = Gallery.OVERWRITE_BUBBLE_MAX_TIMES;
 };
 
-Gallery.prototype.saveItem_ = function(item, callback, canvas, modified) {
-  if (modified) {
-    item.save(this.context_.saveDirEntry, this.context_.metadataProvider,
-        canvas, callback);
-  } else {
-    if (callback) callback();
-  }
-};
+Gallery.prototype.saveCurrentImage_ = function(callback) {
+  var item = this.ribbon_.getSelectedItem();
+  var canvas = this.imageView_.getCanvas();
 
-Gallery.prototype.saveChanges_ = function(opt_callback) {
-  this.imageChanges_ = 0;
-  this.bubble_.setAttribute('hidden', 'hidden');
-  if (this.isShowingVideo_()) {
-    // This call ensures that editor leaves the mode and closes respective UI
-    // elements. Currently, the only mode for videos is sharing.
-    this.editor_.leaveModeGently();
-    if (opt_callback) opt_callback();
-    return;
-  }
-  this.editor_.requestImage(
-      this.saveItem_.bind(this, this.ribbon_.getSelectedItem(), opt_callback));
+  var metadataEncoder = ImageEncoder.encodeMetadata(
+      this.selectedImageMetadata_, canvas, 1);

[dgozman, 2012/05/16 16:05:40]

Comment what 1 means.

[Vladislav Kaznacheev, 2012/05/17 09:04:40]

Done.

+
+  this.selectedImageMetadata_ = metadataEncoder.getMetadata();
+  item.setThumbnail(this.selectedImageMetadata_);
+
+  item.saveToFile(
+      this.context_.saveDirEntry,
+      canvas,
+      metadataEncoder,
+      function(success) {
+        // TODO(kaznacheev): Implement write error handling.
+        // Until then pretend that the save succeeded.
+        this.flashSavedLabel_();
+        this.context_.metadataProvider.reset(item.getUrl());
+        callback();
+      }.bind(this));
 };
 
 Gallery.prototype.onActionExecute_ = function(action) {
-  var url = this.ribbon_.getSelectedItem().getUrl();
-  // saveChanges_ makes the editor leave the mode and close the sharing menu.
-  this.saveChanges_(action.execute.bind(action, [url]));
+  // |executeWhenReady| closes the sharing menu.
+  this.editor_.executeWhenReady(function() {
+    action.execute([this.ribbon_.getSelectedItem().getUrl()]);
+  }.bind(this));
 };
 
 Gallery.prototype.updateFilename_ = function(opt_url) {
   var fullName;
 
   var item = this.ribbon_.getSelectedItem();
   if (item) {
     fullName = item.getNameAfterSaving();
   } else if (opt_url) {
     fullName = ImageUtil.getFullNameFromUrl(opt_url);
@@ skipping 112 matching lines @@
     }
     this.context_.onClose();
   }.bind(this));
 };
 
 /**
  * Handle user's 'Close' action (Escape or a click on the X icon).
  */
 Gallery.prototype.onClose_ = function() {
   // TODO: handle write errors gracefully (suggest retry or saving elsewhere).
-  this.saveChanges_(this.close_.bind(this));
+  this.editor_.executeWhenReady(this.close_.bind(this));
 };
 
-Gallery.prototype.prefetchImage = function(id, content, metadata) {
-  this.editor_.prefetchImage(id, content, metadata);
+Gallery.prototype.prefetchImage = function(id, url) {
+  this.editor_.prefetchImage(id, url);
 };
 
-Gallery.prototype.openImage = function(id, content, metadata, slide, callback) {
-  // The first change is load, we should not count it.
-  this.imageChanges_ = -1;
+Gallery.prototype.openImage = function(id, url, metadata, slide, callback) {
   this.filenameSpacer_.removeAttribute('overwrite');
   this.filenameSpacer_.removeAttribute('saved');
 
-  var item = this.ribbon_.getSelectedItem();
-  this.updateFilename_(content);
+  this.selectedImageMetadata_ = metadata;
+  this.updateFilename_(url);
 
   this.showSpinner_(true);
 
   var self = this;
   function loadDone(loadType) {
     var video = self.isShowingVideo_();
     ImageUtil.setAttribute(self.container_, 'video', video);
 
     self.showSpinner_(false);
     if (loadType == ImageView.LOAD_TYPE_ERROR) {
@@ skipping 12 matching lines @@
 
       function toMillions(number) { return Math.round(number / (1000 * 1000)) }
 
       ImageUtil.metrics.recordSmallCount(ImageUtil.getMetricName('Size.MB'),
           toMillions(metadata.fileSize));
 
       var canvas = self.imageView_.getCanvas();
       ImageUtil.metrics.recordSmallCount(ImageUtil.getMetricName('Size.MPix'),
           toMillions(canvas.width * canvas.height));
 
-      var url = item ? item.getUrl() : content;
       var extIndex = url.lastIndexOf('.');
       var ext = extIndex < 0 ? '' : url.substr(extIndex + 1).toLowerCase();
       if (ext == 'jpeg') ext = 'jpg';
       ImageUtil.metrics.recordEnum(
           ImageUtil.getMetricName('FileType'), ext, ImageUtil.FILE_TYPES);
     }
 
     callback(loadType);
   }
 
-  this.editor_.openSession(id, content, metadata, slide, loadDone);
+  this.editor_.openSession(
+      id, url, metadata, slide, this.saveCurrentImage_.bind(this), loadDone);
 };
 
-Gallery.prototype.closeImage = function(item) {
+Gallery.prototype.closeImage = function(callback) {
   this.showSpinner_(false);
   this.showErrorBanner_(false);
   this.editor_.getPrompt().hide();
   if (this.isShowingVideo_()) {
     this.mediaControls_.pause();
     this.mediaControls_.detachMedia();
   }
-  this.editor_.closeSession(this.saveItem_.bind(this, item, null));
+  this.editor_.closeSession(callback);
 };
 
 Gallery.prototype.showSpinner_ = function(on) {
   if (this.spinnerTimer_) {
     clearTimeout(this.spinnerTimer_);
     this.spinnerTimer_ = null;
   }
 
   if (on) {
     this.spinnerTimer_ = setTimeout(function() {
       this.spinnerTimer_ = null;
       ImageUtil.setAttribute(this.container_, 'spinner', true);
     }.bind(this), 1000);
   } else {
     ImageUtil.setAttribute(this.container_, 'spinner', false);
   }
-}
+};
 
 Gallery.prototype.showErrorBanner_ = function(message) {
   if (message) {
     this.errorBanner_.textContent = this.displayStringFunction_(message);
   }
   ImageUtil.setAttribute(this.container_, 'error', !!message);
 };
 
 Gallery.prototype.isShowingVideo_ = function() {
   return !!this.imageView_.getVideo();
@@ skipping 30 matching lines @@
 
   // isEditing_ has just been flipped to a new value.
   if (this.isEditing_()) {
     if (this.context_.readonlyDirName) {
       this.editor_.getPrompt().showAt(
           'top', 'readonly_warning', 0, this.context_.readonlyDirName);
     }
     this.cancelFading_();
   } else {
     this.editor_.getPrompt().hide();
-    if (!this.isShowingVideo_()) {
-      var item = this.ribbon_.getSelectedItem();
-      this.editor_.requestImage(item.updateThumbnail.bind(item));
-    }
     this.filenameSpacer_.removeAttribute('saved');
     this.filenameSpacer_.removeAttribute('overwrite');
-    this.saveChanges_();
     this.initiateFading_();
   }
 
   ImageUtil.setAttribute(this.editButton_, 'pressed', this.isEditing_());
 };
 
 Gallery.prototype.isSharing_ = function(event) {
   return this.shareMode_ && this.shareMode_ == this.editor_.getMode();
 };
 
@@ skipping 148 matching lines @@
   this.lastVisibleIndex_ = -1;  // Zero thumbnails
   this.sequenceDirection_ = 0;
   this.sequenceLength_ = 0;
 };
 
 Ribbon.prototype.add = function(url) {
   var index = this.items_.length;
   var selectClosure = this.select.bind(this, index, 0, null);
   var item = new Ribbon.Item(index, url, this.document_, selectClosure);
   this.items_.push(item);
-  this.metadataProvider_.fetch(url, item.setMetadata.bind(item));
 };
 
 Ribbon.prototype.load = function(urls, selectedIndex) {
   this.clear();
   for (var index = 0; index < urls.length; ++index) {
     this.add(urls[index]);
   }
   this.selectedIndex_ = selectedIndex;
 
   // We do not want to call this.select because the selected image is already
   // displayed. Instead we just update the UI.
   this.getSelectedItem().select(true);
   this.redraw();
 
   // Let the thumbnails load before prefetching the next image.
   setTimeout(this.requestPrefetch.bind(this, 1), 1000);
 
   // Make the arrows visible if there are more than 1 image.
   ImageUtil.setAttribute(this.arrowLeft_, 'active', this.items_.length > 1);
   ImageUtil.setAttribute(this.arrowRight_, 'active', this.items_.length > 1);
 };
 
 Ribbon.prototype.select = function(index, opt_forceStep, opt_callback) {
   if (index == this.selectedIndex_)
     return;  // Do not reselect.
 
-  var oldSelectedItem = this.getSelectedItem();
-  oldSelectedItem.select(false);
-  this.client_.closeImage(oldSelectedItem);
+  this.client_.closeImage(
+      this.doSelect_.bind(this, index, opt_forceStep, opt_callback));
+};
+
+Ribbon.prototype.doSelect_ = function(index, opt_forceStep, opt_callback) {
+  if (index == this.selectedIndex_)
+    return;  // Do not reselect
+
+  var selectedItem = this.getSelectedItem();
+  selectedItem.select(false);
 
   var step = opt_forceStep || (index - this.selectedIndex_);
 
   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) {
     // 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.client_.prefetchImage(oldSelectedItem.getIndex(),
-        oldSelectedItem.getContent(), oldSelectedItem.getMetadata());
+    this.client_.prefetchImage(selectedItem.getIndex(), selectedItem.getUrl());
   }
 
   this.selectedIndex_ = index;
 
-  var selectedItem = this.getSelectedItem();
+  selectedItem = this.getSelectedItem();
   selectedItem.select(true);
   this.redraw();
 
   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)
       return false;
 
     // Always prefetch if the previous load was from cache.
     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 self = this;
-  selectedItem.fetchMetadata(this.metadataProvider_, function(metadata){
+  this.metadataProvider_.fetch(selectedItem.getUrl(), function(metadata){
      if (!selectedItem.isSelected()) return;
      self.client_.openImage(
-         selectedItem.getIndex(), selectedItem.getContent(), metadata, step,
+         selectedItem.getIndex(), selectedItem.getUrl(), metadata, step,
          function(loadType) {
            if (!selectedItem.isSelected()) return;
            if (shouldPrefetch(loadType, step, self.sequenceLength_)) {
              self.requestPrefetch(step);
            }
            if (opt_callback) opt_callback();
          });
   });
 };
 
 Ribbon.prototype.requestPrefetch = function(direction) {
   if (this.items_.length < 2) return;
 
   var index = this.getNextSelectedIndex_(direction);
+  var nextItemUrl = this.items_[index].getUrl();
 
   var selectedItem = this.getSelectedItem();
-  var self = this;
-  var item = this.items_[index];
-  item.fetchMetadata(this.metadataProvider_, function(metadata) {
+  this.metadataProvider_.fetch(nextItemUrl, function(metadata) {
     if (!selectedItem.isSelected()) return;
-    self.client_.prefetchImage(index, item.getContent(), metadata);
-  });
+    this.client_.prefetchImage(index, nextItemUrl, metadata);
+  }.bind(this));
 };
 
 Ribbon.ITEMS_COUNT = 5;
 
 Ribbon.prototype.redraw = function() {
   // Never show a single thumbnail.
   if (this.items_.length == 1)
     return;
 
+  var initThumbnail = function(index) {
+    var item = this.items_[index];
+    if (!item.hasThumbnail())
+      this.metadataProvider_.fetch(item.getUrl(), item.setThumbnail.bind(item));
+  }.bind(this);
+
   // TODO(dgozman): use margin instead of 2 here.
   var itemWidth = this.bar_.clientHeight - 2;
   var fullItems = Ribbon.ITEMS_COUNT;
   fullItems = Math.min(fullItems, this.items_.length);
   var right = Math.floor((fullItems - 1) / 2);
 
   var fullWidth = fullItems * itemWidth;
   this.bar_.style.width = fullWidth + 'px';
 
   var lastIndex = this.selectedIndex_ + right;
@@ skipping 11 matching lines @@
     this.lastVisibleIndex_ = lastIndex;
   }
 
   this.bar_.textContent = '';
   var startIndex = Math.min(firstIndex, this.firstVisibleIndex_);
   var toRemove = [];
   // All the items except the first one treated equally.
   for (var index = startIndex + 1;
        index <= Math.max(lastIndex, this.lastVisibleIndex_);
        ++index) {
+    initThumbnail(index);
     var box = this.items_[index].getBox();
     box.style.marginLeft = '0';
     this.bar_.appendChild(box);
     if (index < firstIndex || index > lastIndex) {
       toRemove.push(index);
     }
   }
 
   var margin = itemWidth * Math.abs(firstIndex - this.firstVisibleIndex_);
+  initThumbnail(startIndex);
   var startBox = this.items_[startIndex].getBox();
   if (startIndex == firstIndex) {
     // Sliding to the right.
     startBox.style.marginLeft = -margin + 'px';
     if (this.bar_.firstChild)
       this.bar_.insertBefore(startBox, this.bar_.firstChild);
     else
       this.bar_.appendChild(startBox);
     setTimeout(function() {
       startBox.style.marginLeft = '0';
@@ skipping 113 matching lines @@
 };
 
 Ribbon.Item.prototype.isSelected = function() {
   return this.box_.hasAttribute('selected');
 };
 
 Ribbon.Item.prototype.select = function(on) {
   ImageUtil.setAttribute(this.box_, 'selected', on);
 };
 
-Ribbon.Item.prototype.updateThumbnail = function(canvas) {
-  if (this.canvas_)
-    return;  // The image is being saved, the thumbnail is already up-to-date.
-
-  var metadataEncoder =
-      ImageEncoder.encodeMetadata(this.getMetadata(), canvas, 1);
-  this.setMetadata(metadataEncoder.getMetadata());
-};
-
-Ribbon.Item.prototype.save = function(
-    dirEntry, metadataProvider, canvas, opt_callback) {
+Ribbon.Item.prototype.saveToFile = function(
+    dirEntry, canvas, metadataEncoder, opt_callback) {
   ImageUtil.metrics.startInterval(ImageUtil.getMetricName('SaveTime'));
 
-  var metadataEncoder =
-      ImageEncoder.encodeMetadata(this.getMetadata(), canvas, 1);
-
-  this.overrideContent(canvas, metadataEncoder.getMetadata());
-
   var self = this;
 
-  if (!dirEntry) {  // Happens only in gallery_demo.js

[dgozman, 2012/05/16 16:05:40]

I've just found the gallery_demo.js. We should remove it.

[Vladislav Kaznacheev, 2012/05/17 09:04:40]

Done. Also removed the code needed to support it.

-    self.onSaveSuccess(
-        Gallery.blobToURL_(ImageEncoder.getBlob(canvas, metadataEncoder)));
-    if (opt_callback) opt_callback();
-    return;
-  }
-
   var name = this.getNameAfterSaving();
   this.original_ = false;
   this.nameForSaving_ = null;
 
   function onSuccess(url) {
     console.log('Saved from gallery', name);
-    // Force the metadata provider to reread the metadata from the file.
-    metadataProvider.reset(url);
-    self.onSaveSuccess(url);
-    if (opt_callback) opt_callback();
+    ImageUtil.metrics.recordEnum(ImageUtil.getMetricName('SaveResult'), 1, 2);
+    ImageUtil.metrics.recordInterval(ImageUtil.getMetricName('SaveTime'));
+    self.setUrl(url);
+    if (opt_callback) opt_callback(true);
   }
 
   function onError(error) {
     console.log('Error saving from gallery', name, error);
-    self.onSaveError(error);
-    if (opt_callback) opt_callback();
+    ImageUtil.metrics.recordEnum(ImageUtil.getMetricName('SaveResult'), 0, 2);
+    if (opt_callback) opt_callback(false);
   }
 
   function doSave(newFile, fileEntry) {
     fileEntry.createWriter(function(fileWriter) {
       function writeContent() {
         fileWriter.onwriteend = onSuccess.bind(null, fileEntry.toURL());
         fileWriter.write(ImageEncoder.getBlob(canvas, metadataEncoder));
       }
       fileWriter.onerror = onError;
       if (newFile) {
@@ skipping 17 matching lines @@
 
 // TODO: Localize?
 Ribbon.Item.COPY_SIGNATURE = 'Edited';
 
 Ribbon.Item.REGEXP_COPY_N =
     new RegExp('^' + Ribbon.Item.COPY_SIGNATURE + ' \\((\\d+)\\)( - .+)$');
 
 Ribbon.Item.REGEXP_COPY_0 =
     new RegExp('^' + Ribbon.Item.COPY_SIGNATURE + '( - .+)$');
 
-Ribbon.Item.prototype.createCopyName_ = function(dirEntry, callback) {
+Ribbon.Item.prototype.createCopyName_ = function(dirEntry, metadata, callback) {
   var name = ImageUtil.getFullNameFromUrl(this.url_);
 
   // If the item represents a file created during the current Gallery session
   // we reuse it for subsequent saves instead of creating multiple copies.
   if (!this.original_)
     return name;
 
   var ext = '';
   var index = name.lastIndexOf('.');
   if (index != -1) {
     ext = name.substr(index);
     name = name.substr(0, index);
   }
 
-  var mimeType = this.metadata_.mimeType.toLowerCase();
+  var mimeType = metadata.mimeType.toLowerCase();
   if (mimeType != 'image/jpeg') {
     // Chrome can natively encode only two formats: JPEG and PNG.
     // All non-JPEG images are saved in PNG, hence forcing the file extension.
     ext = '.png';
   }
 
   function tryNext(tries) {
     // All the names are used. Let's overwrite the last one.
     if (tries == 0) {
       setTimeout(callback, 0, name + ext);
@@ skipping 14 matching lines @@
     }
 
     dirEntry.getFile(name + ext, {create: false, exclusive: false},
         tryNext.bind(null, tries - 1),
         callback.bind(null, name + ext));
   }
 
   tryNext(10);
 };
 
-Ribbon.Item.prototype.setCopyName = function(dirEntry, opt_callback) {
-  this.createCopyName_(dirEntry, function(name) {
+Ribbon.Item.prototype.setCopyName = function(dirEntry, metadata, opt_callback) {
+  this.createCopyName_(dirEntry, metadata, function(name) {
     this.nameForSaving_ = name;
     if (opt_callback) opt_callback();
   }.bind(this));
 };
 
 Ribbon.Item.prototype.setOriginalName = function(dirEntry, opt_callback) {
   this.nameForSaving_ = null;
   if (opt_callback) opt_callback();
 };
 
 Ribbon.Item.prototype.setNameForSaving = function(newName) {
   this.nameForSaving_ = newName;
 };
 
-// The url and metadata stored in the item are not valid while the modified
-// image is being saved. Use the results of the latest edit instead.
-
-Ribbon.Item.prototype.overrideContent = function(canvas, metadata) {
-  this.canvas_ = canvas;
-  this.backupMetadata_ = this.metadata_;
-  this.setMetadata(metadata);
+Ribbon.Item.prototype.hasThumbnail = function() {
+  return this.img_.hasAttribute('src');
 };
 
-Ribbon.Item.prototype.getContent = function () {
-  return this.canvas_ || this.url_;
-};
-
-Ribbon.Item.prototype.getMetadata = function () {
-  return this.metadata_;
-};
-
-Ribbon.Item.prototype.fetchMetadata = function (metadataProvider, callback) {
-  if (this.metadata_) {
-    callback(this.metadata_);  // Every millisecond counts, call directly
-  } else {
-    metadataProvider.fetch(this.getUrl(), callback);
-  }
-};
-
-Ribbon.Item.prototype.onSaveSuccess = function(url) {
-  this.url_ = url;
-  delete this.backupMetadata_;
-  delete this.canvas_;
-  ImageUtil.metrics.recordEnum(ImageUtil.getMetricName('SaveResult'), 1, 2);
-  ImageUtil.metrics.recordInterval(ImageUtil.getMetricName('SaveTime'));
-};
-
-Ribbon.Item.prototype.onSaveError = function(error) {
-  // TODO(kaznacheev): notify the user that the file write failed and
-  // suggest ways to rescue the modified image (retry/save elsewhere).
-  // For now - just drop the modified content and revert the thumbnail.
-  this.setMetadata(this.backupMetadata_);
-  delete this.backupMetadata_;
-  delete this.canvas_;
-  ImageUtil.metrics.recordEnum(ImageUtil.getMetricName('SaveResult'), 0, 2);
-};
-
-Ribbon.Item.prototype.setMetadata = function(metadata) {
-  this.metadata_ = metadata;
-
+Ribbon.Item.prototype.setThumbnail = function(metadata) {
   var url;
   var transform;
 
   var mediaType = FileType.getMediaType(this.url_);
 
   if (metadata.thumbnailURL) {
     url = metadata.thumbnailURL;
     transform = metadata.thumbnailTransform;
   } else if (mediaType == 'image' &&
       FileType.canUseImageUrlForPreview(metadata)) {
@@ skipping 91 matching lines @@
 ShareMode.prototype.setUp = function() {
   ImageEditor.Mode.prototype.setUp.apply(this, arguments);
   ImageUtil.setAttribute(this.menu_, 'hidden', false);
   ImageUtil.setAttribute(this.button_, 'pressed', false);
 };
 
 ShareMode.prototype.cleanUpUI = function() {
   ImageEditor.Mode.prototype.cleanUpUI.apply(this, arguments);
   ImageUtil.setAttribute(this.menu_, 'hidden', true);
 };