Gallery.app: Update the ribbon control when the item is inserted.

The CL also fixes the insertion position of the new item, so that the new item
is inserted behind of the existing selected item.  Previously the image item is
inserted ahead of the selected item. It changes the index of the selected item,
and it causes the inconsistency between the selected index and the selected
item.

BUG=392055
TEST=manually

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

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

ui/file_manager/gallery/js/gallery.js

@@ -101,15 +101,15 @@ GalleryDataModel.prototype.saveItem = function(item, canvas, overwrite) {
           // The item's entry is updated to the latest entry. Update metadata.
           item.setMetadata(newMetadata);
 
-          if (util.isSameEntry(oldEntry, item.getEntry())) {
-            // Current entry is updated.
-            // Dispatch an event.
-            var event = new Event('content');
-            event.item = item;
-            event.oldEntry = item.getEntry();
-            event.metadata = newMetadata;
-            this.dispatchEvent(event);
+          // Current entry is updated.
+          // Dispatch an event.
+          var event = new Event('content');
+          event.item = item;
+          event.oldEntry = oldEntry;
+          event.metadata = newMetadata;
+          this.dispatchEvent(event);
 
+          if (util.isSameEntry(oldEntry, item.getEntry())) {
             // Need an update of metdataCache.
             this.metadataCache_.set(
                 item.getEntry(),
@@ -120,7 +120,11 @@ GalleryDataModel.prototype.saveItem = function(item, canvas, overwrite) {
             // Add another item for the old entry.
             var anotherItem = new Gallery.Item(
                 oldEntry, oldMetadata, this.metadataCache_);
-            this.splice(this.indexOf(item), 0, anotherItem);
+            // The item must be added behind the existing item so that it does
+            // not change the index of the existing item.
+            // TODO(hirono): Update the item index of the selection model
+            // correctly.
+            this.splice(this.indexOf(item) + 1, 0, anotherItem);
           }
 
           fulfill();

ui/file_manager/gallery/js/ribbon.js

@@ -96,11 +96,27 @@ Ribbon.prototype.disable = function() {
  * @private
  */
 Ribbon.prototype.onSplice_ = function(event) {
-  if (event.removed.length == 0)
+  if (event.removed.length > 1) {
+    console.error('Cannot remove multiple items.');
     return;
+  }
 
-  if (event.removed.length > 1) {
-    console.error('Cannot remove multiple items');
+  if (event.removed.length > 0 && event.added.length > 0) {
+    console.error('Replacing is not implemented.');
+    return;
+  }
+
+  if (event.added.length > 0) {
+    for (var i = 0; i < event.added.length; i++) {
+      var index = this.dataModel_.indexOf(event.added[i]);
+      if (index === -1)
+        continue;
+      var element = this.renderThumbnail_(index);
+      var nextItem = this.dataModel_.item(index + 1);
+      var nextElement =
+          nextItem && this.renderCache_[nextItem.getEntry().toURL()];
+      this.insertBefore(element, nextElement);
+    }
     return;
   }
 
@@ -160,8 +176,7 @@ Ribbon.prototype.onSelection_ = function() {
 
   // TODO(dgozman): use margin instead of 2 here.
   var itemWidth = this.clientHeight - 2;
-  var fullItems = Ribbon.ITEMS_COUNT;
-  fullItems = Math.min(fullItems, length);
+  var fullItems = Math.min(Ribbon.ITEMS_COUNT, length);
   var right = Math.floor((fullItems - 1) / 2);
 
   var fullWidth = fullItems * itemWidth;
@@ -242,11 +257,13 @@ Ribbon.prototype.onSelection_ = function() {
   }
 
   var oldSelected = this.querySelector('[selected]');
-  if (oldSelected) oldSelected.removeAttribute('selected');
+  if (oldSelected)
+    oldSelected.removeAttribute('selected');
 
   var newSelected =
       this.renderCache_[this.dataModel_.item(selectedIndex).getEntry().toURL()];
-  if (newSelected) newSelected.setAttribute('selected', true);
+  if (newSelected)
+    newSelected.setAttribute('selected', true);
 };
 
 /**