Fixed renaming in the file manager.

chrome/browser/resources/file_manager/js/file_manager.js

 // Copyright (c) 2011 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.
 
 // Setting the src of an img to an empty string can crash the browser, so we
 // use an empty 1x1 gif instead.
 const EMPTY_IMAGE_URI = 'data:image/gif;base64,'
         + 'R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';
 
 // If directory files changes too often, don't rescan directory more than once
@@ skipping 181 matching lines @@
     'image': 'images/filetype_large_image.png',
     'video': 'images/filetype_large_video.png'
   };
 
   /**
    * Regexp for archive files. Used to show mount-archive task.
    */
   const ARCHIVES_REGEXP = /.zip$/;
 
   /**
+   * Item for the Grid View.
+   * @constructor
+   */
+  function GridItem(fileManager, entry) {
+    var li = fileManager.document_.createElement('li');
+    GridItem.decorate(li, fileManager, entry);
+    return li;
+  }
+
+  GridItem.prototype = {
+    __proto__: cr.ui.ListItem.prototype,
+
+    get label() {
+      return this.querySelector('filename-label').textContent;
+    },
+    set label(value) {
+      // Grid sets it to entry. Ignore.
+    }
+  };
+
+  GridItem.decorate = function(li, fileManager, entry) {
+    li.__proto__ = GridItem.prototype;
+    fileManager.decorateThumbnail_(li, entry);
+  };
+
+
+  /**
    * Return a translated string.
    *
    * Wrapper function to make dealing with translated strings more concise.
    * Equivilant to localStrings.getString(id).
    *
    * @param {string} id The id of the string to return.
    * @return {string} The translated string.
    */
   function str(id) {
     return localStrings.getString(id);
@@ skipping 888 matching lines @@
   FileManager.prototype.setListType = function(type) {
     if (type && type == this.listType_)
       return;
 
     if (type == FileManager.ListType.DETAIL) {
       var selectedIndexes = this.grid_.selectionModel.selectedIndexes;
       this.table_.dataModel = this.dataModel_;
       this.table_.style.display = '';
       this.grid_.style.display = 'none';
       this.grid_.dataModel = this.emptyDataModel_;
-      this.currentList_ = this.table_;
+      /** @type {cr.ui.List} */
+      this.currentList_ = this.table_.list;
       this.dialogDom_.querySelector('button.detail-view').disabled = true;
       this.dialogDom_.querySelector('button.thumbnail-view').disabled = false;
       this.table_.selectionModel.selectedIndexes = selectedIndexes;
     } else if (type == FileManager.ListType.THUMBNAIL) {
       var selectedIndexes = this.table_.selectionModel.selectedIndexes;
       this.grid_.dataModel = this.dataModel_;
       this.grid_.style.display = '';
       this.table_.style.display = 'none';
       this.table_.dataModel = this.emptyDataModel_;
+      /** @type {cr.ui.List} */
       this.currentList_ = this.grid_;
       this.dialogDom_.querySelector('button.thumbnail-view').disabled = true;
       this.dialogDom_.querySelector('button.detail-view').disabled = false;
       this.grid_.selectionModel.selectedIndexes = selectedIndexes;
     } else {
       throw new Error('Unknown list type: ' + type);
     }
 
     this.listType_ = type;
     this.onResize_();
   };
 
   /**
    * Initialize the file thumbnail grid.
    */
   FileManager.prototype.initGrid_ = function() {
     this.grid_ = this.dialogDom_.querySelector('.thumbnail-grid');
     cr.ui.Grid.decorate(this.grid_);
 
     var self = this;
-    this.grid_.itemConstructor = function(entry) {
-      return self.renderThumbnail_(entry);
-    };
+    this.grid_.itemConstructor = GridItem.bind(null, this);
 
     this.grid_.selectionModel = new this.selectionModelClass_();
 
     this.grid_.addEventListener(
         'dblclick', this.onDetailDoubleClick_.bind(this));
     this.grid_.selectionModel.addEventListener(
         'change', this.onSelectionChanged_.bind(this));
     cr.ui.contextMenuHandler.addContextMenuProperty(this.grid_);
     this.grid_.contextMenu = this.fileContextMenu_;
     this.grid_.addEventListener('mousedown',
-                                this.onGridMouseDown_.bind(this));
+                                this.onGridOrTableMouseDown_.bind(this));
   };
 
   /**
    * Initialize the file list table.
    */
   FileManager.prototype.initTable_ = function() {
     var columns = [
         new cr.ui.table.TableColumn('name', str('NAME_COLUMN_LABEL'),
                                     64),
         new cr.ui.table.TableColumn('cachedSize_',
@@ skipping 22 matching lines @@
 
     this.table_.addEventListener(
         'dblclick', this.onDetailDoubleClick_.bind(this));
     this.table_.selectionModel.addEventListener(
         'change', this.onSelectionChanged_.bind(this));
 
     cr.ui.contextMenuHandler.addContextMenuProperty(this.table_);
     this.table_.contextMenu = this.fileContextMenu_;
 
     this.table_.addEventListener('mousedown',
-                                 this.onTableMouseDown_.bind(this));
+                                 this.onGridOrTableMouseDown_.bind(this));
   };
 
   FileManager.prototype.onCopyProgress_ = function(event) {
     var status = this.copyManager_.getStatus();
 
     if (event.reason == 'PROGRESS') {
       if (status.totalItems > 1 && status.completedItems < status.totalItems) {
         // If we're copying more than one file, and we're not done, update
         // the user on the current status, and give an option to cancel.
         var self = this;
@@ skipping 65 matching lines @@
 
       case 'copy':
         this.copySelectionToClipboard();
         return;
 
       case 'paste':
         this.pasteFromClipboard();
         return;
 
       case 'rename':
-        var leadIndex = this.currentList_.selectionModel.leadIndex;
-        var li = this.currentList_.getListItemByIndex(leadIndex);
-        var label = li.querySelector('.filename-label');
-        if (!label) {
-          console.warn('Unable to find label for rename of index: ' +
-                       leadIndex);
-          return;
-        }
-
-        this.initiateRename_(label);
+        var index = this.currentList_.selectionModel.selectedIndex;
+        var item = this.currentList_.getListItemByIndex(index);
+        if (item)
+          this.initiateRename_(item);
         return;
 
       case 'delete':
         this.deleteEntries(this.selection.entries);
         return;
     }
   };
 
   /**
    * Respond to the back and forward buttons.
@@ skipping 354 matching lines @@
         if (opt_imageLoadCallback)
           opt_imageLoadCallback(img, transform);
         box.appendChild(img);
       };
       img.src = url;
       self.applyImageTransformation_(box, transform);
     });
     return box;
   };
 
-  FileManager.prototype.renderThumbnail_ = function(entry) {
-    var li = this.document_.createElement('li');
+  FileManager.prototype.decorateThumbnail_ = function(li, entry) {
     li.className = 'thumbnail-item';
 
     if (this.showCheckboxes_)
       li.appendChild(this.renderCheckbox_(entry));
 
     li.appendChild(this.renderThumbnailBox_(entry, false));
-
-    var div = this.document_.createElement('div');
-    div.className = 'filename-label';
-    var labelText = entry.name;
-    if (this.currentDirEntry_.name == '')
-      labelText = this.getLabelForRootPath_(labelText);
-
-    div.textContent = labelText;
-    div.entry = entry;
-
-    li.appendChild(div);
-
-    cr.defineProperty(li, 'lead', cr.PropertyKind.BOOL_ATTR);
-    cr.defineProperty(li, 'selected', cr.PropertyKind.BOOL_ATTR);
-    return li;
+    li.appendChild(this.renderFileNameLabel_(entry));
   };
 
   /**
    * Render the type column of the detail table.
    *
    * Invoked by cr.ui.Table when a file needs to be rendered.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
@@ skipping 29 matching lines @@
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderName_ = function(entry, columnId, table) {
     var label = this.document_.createElement('div');
     if (this.showCheckboxes_)
       label.appendChild(this.renderCheckbox_(entry));
     label.appendChild(this.renderIconType_(entry, columnId, table));
     label.entry = entry;
     label.className = 'detail-name';
-    if (this.currentDirEntry_.name == '') {
-      label.appendChild(this.document_.createTextNode(
-          this.getLabelForRootPath_(entry.name)));
-    } else {
-      label.appendChild(this.document_.createTextNode(entry.name));
-    }
+    label.appendChild(this.renderFileNameLabel_(entry));
+    return label;
+  };
 
-    return label;
+  /**
+   * Render filename label for grid and list view.
+   * @param {Entry} entry The Entry object to render.
+   * @return {HTMLDivElement} The label.
+   */
+  FileManager.prototype.renderFileNameLabel_ = function(entry) {
+    // Filename need to be in a '.filename-label' container for correct
+    // work of inplace renaming.
+    var fileName = this.document_.createElement('div');
+    fileName.className = 'filename-label';
+    fileName.textContent = this.currentDirEntry_.name == '' ?
+        this.getLabelForRootPath_(entry.name) : entry.name;
+    return fileName;
   };
 
   /**
    * Render the Size column of the detail table.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderSize_ = function(entry, columnId, table) {
@@ skipping 748 matching lines @@
   FileManager.prototype.selectEntry = function(name) {
     for (var i = 0; i < this.dataModel_.length; i++) {
       if (this.dataModel_.item(i).name == name) {
         this.selectIndex(i);
         return;
       }
     }
   };
 
   FileManager.prototype.selectIndex = function(index) {
-    this.currentList_.focus();
+    this.focusCurrentList_();
     if (index >= this.dataModel_.length)
       return;
     this.currentList_.selectionModel.selectedIndex = index;
     this.currentList_.scrollIndexIntoView(index);
   };
 
   /**
    * Add the file/directory with given name to the current selection.
    *
    * @param {string} name The name of the entry to select.
    * @return {boolean} Whether entry exists.
    */
   FileManager.prototype.addItemToSelection = function(name) {
     var entryExists = false;
     for (var i = 0; i < this.dataModel_.length; i++) {
       if (this.dataModel_.item(i).name == name) {
         this.currentList_.selectionModel.setIndexSelected(i, true);
         this.currentList_.scrollIndexIntoView(i);
-        this.currentList_.focus();
+        this.focusCurrentList_();
         entryExists = true;
         break;
       }
     }
     return entryExists;
-  }
+  };
+
+  FileManager.prototype.focusCurrentList_ = function() {
+    if (this.listType_ == FileManager.ListType.DETAIL)
+      this.table_.focus();
+    else  // this.listType_ == FileManager.ListType.THUMBNAIL)
+      this.grid_.focus();
+  };
 
   /**
    * Return the name of the entries in the current directory
    *
    * @return {object} Array of entry names.
    */
   FileManager.prototype.listDirectory = function() {
     var list = []
     for (var i = 0; i < this.dataModel_.length; i++) {
       list.push(this.dataModel_.item(i).name);
@@ skipping 693 matching lines @@
   FileManager.prototype.prefetchCacheForSorting_ = function(entries, callback) {
     var field = this.dataModel_.sortStatus.field;
     if (field) {
       this.prepareSortEntries_(entries, field, callback);
     } else {
       callback();
       return;
     }
   };
 
-  FileManager.prototype.findListItem_ = function(event) {
+  FileManager.prototype.findListItemForEvent_ = function(event) {
     var node = event.srcElement;
+    var list = this.currentList_;
+    // Assume list items are direct children of the list.
+    if (node == list)
+      return null;
     while (node) {
-      if (node.tagName == 'LI')
-        break;
-      node = node.parentNode;
+      var parent = node.parentNode;
+      if (parent == list && node instanceof cr.ui.ListItem)
+        return node;
+      node = parent;
     }
-
-    return node;
+    return null;
   };
 
-  FileManager.prototype.onGridMouseDown_ = function(event) {
+  FileManager.prototype.onGridOrTableMouseDown_ = function(event) {
     this.updateCommands_();
 
-    if (this.allowRenameClick_(event, event.srcElement.parentNode)) {
+    var item = this.findListItemForEvent_(event);
+    if (!item)
+      return;
+    if (this.allowRenameClick_(event, item)) {
       event.preventDefault();
-      this.initiateRename_(event.srcElement);
-    }
-
-    if (event.button != 1)
-      return;
-
-    var li = this.findListItem_(event);
-    if (!li)
-      return;
-  };
-
-  FileManager.prototype.onTableMouseDown_ = function(event) {
-    this.updateCommands_();
-
-    if (this.allowRenameClick_(event,
-                               event.srcElement.parentNode.parentNode)) {
-      event.preventDefault();
-      this.initiateRename_(event.srcElement);
-    }
-
-    if (event.button != 1)
-      return;
-
-    var li = this.findListItem_(event);
-    if (!li) {
-      console.log('li not found', event);
-      return;
+      this.initiateRename_(item);
     }
   };
 
   /**
    * Unload handler for the page.  May be called manually for the file picker
    * dialog, because it closes by calling extension API functions that do not
    * return.
    */
   FileManager.prototype.onUnload_ = function() {
     if (this.subscribedOnDirectoryChanges_) {
@@ skipping 11 matching lines @@
     // We receive a lot of events even in folders we are not interested in.
     if (event.fileUrl == this.currentDirEntry_.toURL())
       this.rescanDirectoryLater_();
   };
 
   /**
    * Determine whether or not a click should initiate a rename.
    *
    * Renames can happen on mouse click if the user clicks on a label twice,
    * at least a half second apart.
+   * @param {MouseEvent} event Click on the item.
+   * @param {cr.ui.ListItem} item Clicked item.
    */
-  FileManager.prototype.allowRenameClick_ = function(event, row) {
+  FileManager.prototype.allowRenameClick_ = function(event, item) {
     if (this.dialogType_ != FileManager.DialogType.FULL_PAGE ||
         this.currentDirEntry_ == null || this.currentDirEntry_.name == '' ||
         isSystemDirEntry(this.currentDirEntry_)) {
       // Renaming only enabled for full-page mode, outside of the root
       // directory.
       return false;
     }
 
     // Didn't click on the label.
     if (!event.srcElement.classList.contains('filename-label'))
       return false;
 
     // Wrong button or using a keyboard modifier.
     if (event.button != 0 || event.shiftKey || event.metaKey || event.altKey) {
       this.lastLabelClick_ = null;
       return false;
     }
 
     var now = new Date();
-    var path = event.srcElement.entry.fullPath;
     var lastLabelClick = this.lastLabelClick_;
-    this.lastLabelClick_ = {path: path, date: now};
+    this.lastLabelClick_ = {index: item.listIndex, date: now};
 
     // Rename already in progress.
     if (this.renameInput_.currentEntry)
       return false;
 
-    if (lastLabelClick && lastLabelClick.path == path) {
+    if (lastLabelClick && lastLabelClick.index == item.listIndex) {
       var delay = now - lastLabelClick.date;
       if (delay > 500 && delay < 2000) {
         this.lastLabelClick_ = null;
         return true;
       }
     }
 
     return false;
   };
 
-  FileManager.prototype.initiateRename_= function(label) {
+  FileManager.prototype.initiateRename_ = function(item) {
+    var label = item.querySelector('.filename-label');
     var input = this.renameInput_;
 
     input.value = label.textContent;
     input.style.top = label.offsetTop + 'px';
     input.style.left = label.offsetLeft + 'px';
     input.style.width = label.clientWidth + 'px';
     label.parentNode.appendChild(input);
     input.focus();
     var selectionEnd = input.value.lastIndexOf('.');
     if (selectionEnd == -1) {
       input.select();
     } else {
       input.selectionStart = 0;
       input.selectionEnd = selectionEnd;
     }
 
     // This has to be set late in the process so we don't handle spurious
     // blur events.
-    input.currentEntry = label.entry;
+    input.currentEntry = this.currentList_.dataModel.item(item.listIndex);
   };
 
   FileManager.prototype.onRenameInputKeyDown_ = function(event) {
     if (!this.renameInput_.currentEntry)
       return;
 
     switch (event.keyCode) {
       case 27:  // Escape
         this.cancelRename_();
         event.preventDefault();
@@ skipping 571 matching lines @@
           });
       }, onError);
 
       function onError(err) {
         console.log('Error while checking free space: ' + err);
         setTimeout(doCheck, 1000 * 60);
       }
     }
   }
 })();