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 1119 matching lines @@
   };
 
   /**
    * 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',
@@ skipping 503 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');
+  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);
+  };
+
+  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;
-  };
+  GridItem.prototype.__proto__ = cr.ui.ListItem.prototype;

[dgozman, 2011/12/09 11:14:43]

This is already set above.

[SeRya, 2011/12/09 14:31:13]

Removed.

 
   /**
    * 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 28 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';
+    // 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';
     if (this.currentDirEntry_.name == '') {
-      label.appendChild(this.document_.createTextNode(
+      fileName.appendChild(this.document_.createTextNode(

[dgozman, 2011/12/09 11:14:43]

You can use instead:
fileName.textContent = this.getLabelForRootPath_.(entry.name)

Same below.

[SeRya, 2011/12/09 14:31:13]

Fixed and extracted to a method to avoid code duplication.

           this.getLabelForRootPath_(entry.name)));
     } else {
-      label.appendChild(this.document_.createTextNode(entry.name));
+      fileName.appendChild(this.document_.createTextNode(entry.name));
     }
+    label.appendChild(fileName);
 
     return label;
   };
 
   /**
    * 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.
@@ skipping 1489 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, list) {
     var node = event.srcElement;
+    // 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)
+        return node;
+      node = parent;
     }
-
-    return node;
+    return null;
   };
 
   FileManager.prototype.onGridMouseDown_ = function(event) {
     this.updateCommands_();
 
-    if (this.allowRenameClick_(event, event.srcElement.parentNode)) {
+    var list = this.grid_;
+    var item = this.findListItemForEvent_(event, list);
+    if (!item)
+      return;
+    if (this.allowRenameClick_(event, list, item)) {
       event.preventDefault();
-      this.initiateRename_(event.srcElement);
+      this.initiateRename_(list, item);
     }
-
-    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)) {
+    var list = this.table_.list;
+    var item = this.findListItemForEvent_(event, list);
+    if (!item)
+      return;
+    if (this.allowRenameClick_(event, list, item)) {
       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_(list, 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 12 matching lines @@
     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.
    */
-  FileManager.prototype.allowRenameClick_ = function(event, row) {
+  FileManager.prototype.allowRenameClick_ = function(event, list, 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 index = list.getIndexOfListItem(item);
     var lastLabelClick = this.lastLabelClick_;
-    this.lastLabelClick_ = {path: path, date: now};
+    this.lastLabelClick_ = {index: index, date: now};
 
     // Rename already in progress.
     if (this.renameInput_.currentEntry)
       return false;
 
-    if (lastLabelClick && lastLabelClick.path == path) {
+    if (lastLabelClick && lastLabelClick.index == index) {
       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(list, 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;
+    var index = list.getIndexOfListItem(item);
+    input.currentEntry = list.dataModel.item(index);
   };
 
   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);
       }
     }
   }
 })();