Making file names (with icons) clickable in File Manager.

chrome/browser/resources/file_manager/js/file_manager.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.
 
 /**
  * FileManager constructor.
  *
  * FileManager objects encapsulate the functionality of the file selector
  * dialogs, as well as the full screen file manager application (though the
  * latter is not yet implemented).
@@ skipping 1041 matching lines @@
    */
   FileManager.prototype.initGrid_ = function() {
     var self = this;
     this.grid_.itemConstructor =
         GridItem.bind(null, this, this.showCheckboxes_);
     // TODO(bshe): should override cr.ui.List's activateItemAtIndex function
     // rather than listen explicitly for double click or tap events.
     this.grid_.addEventListener(
         'dblclick', this.onDetailDoubleClickOrTap_.bind(this));
     this.grid_.addEventListener(
+        'click', this.onDetailClick_.bind(this));
+    this.grid_.addEventListener(
         cr.ui.TouchHandler.EventType.TAP,
         this.onDetailDoubleClickOrTap_.bind(this));
     cr.ui.contextMenuHandler.setContextMenu(this.grid_, this.fileContextMenu_);
   };
 
   /**
    * Initialize the file list table.
    */
   FileManager.prototype.initTable_ = function() {
     var renderFunction = this.table_.getRenderFunction();
@@ skipping 42 matching lines @@
     } else {
       this.gdataColumnModel_ = null;
     }
 
     // TODO(bshe): should override cr.ui.List's activateItemAtIndex function
     // rather than listen explicitly for double click or tap events.
     // Don't pay attention to double clicks on the table header.
     this.table_.list.addEventListener(
         'dblclick', this.onDetailDoubleClickOrTap_.bind(this));
     this.table_.list.addEventListener(
+        'click', this.onDetailClick_.bind(this));
+    this.table_.list.addEventListener(
         cr.ui.TouchHandler.EventType.TAP,
         this.onDetailDoubleClickOrTap_.bind(this));
 
     cr.ui.contextMenuHandler.setContextMenu(this.table_.querySelector('.list'),
         this.fileContextMenu_);
   };
 
   FileManager.prototype.onCopyProgress_ = function(event) {
     if (event.reason === 'ERROR' &&
         event.error.reason === 'FILESYSTEM_ERROR' &&
@@ skipping 685 matching lines @@
   };
 
   /**
    * 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';
+    var box = this.document_.createElement('div');
+    box.className = 'filename-label';
+    var fileName = this.document_.createElement('span');
     fileName.textContent = entry.name;
+    box.appendChild(fileName);
 
-    return fileName;
+    return box;
   };
 
   /**
    * 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 1002 matching lines @@
     }
     var entry = this.selection.entries[0];
 
     if (entry.isDirectory) {
       return this.onDirectoryAction(entry);
     }
 
     this.dispatchSelectionAction_();
   };
 
+  /**
+   * Handles mouse click or tap. Simulates double click if click happens
+   * on the file name or the icon.
+   * @param {Event} event The click event.
+   */
+  FileManager.prototype.onDetailClick_ = function(event) {
+    if (this.isRenamingInProgress()) {
+      // Don't pay attention to clicks during a rename.
+      return;
+    }
+
+    if (event.target.parentElement.classList.contains('filename-label') ||

[Dmitry Zvorygin, 2012/08/03 18:03:40]

I don't like this hacky code with a lot of 'or-ed' if's. Consider rewriting?

+        event.target.classList.contains('detail-icon') ||
+        event.target.classList.contains('img-container')) {
+      this.onDetailDoubleClickOrTap_(event);
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
   FileManager.prototype.dispatchSelectionAction_ = function() {
     if (this.dialogType_ == FileManager.DialogType.FULL_PAGE) {
       if (this.selection.tasks)
         this.selection.tasks.executeDefault();
       return true;
     }
     if (!this.okButton_.disabled) {
       this.onOk_();
       return true;
     }
@@ skipping 1186 matching lines @@
     }
 
     var defaultActionSeparator =
         this.dialogDom_.querySelector('#default-action-separator');
 
     this.defaultActionMenuItem_.hidden = !taskItem;
     defaultActionSeparator.hidden = !taskItem;
   }
 })();