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

BUG=138094
TEST=Manual test.


Review URL: https://chromiumcodereview.appspot.com/10825182

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

chrome/browser/resources/file_manager/css/file_manager.css

@@ -657,6 +657,18 @@ button#detail-view:not([disabled]) {
   position: relative;
 }
 
+.thumbnail-frame > .img-container,
+.detail-name .detail-icon,
+.filename-label > * {
+  cursor: pointer;
+}
+
+.filename-label > :hover,
+.breadcrumb-path:not(.breadcrumb-last):hover {
+  color: rgb(17, 85, 204);
+  text-decoration: underline;
+}
+
 .img-container > img {
   -webkit-user-drag: none;
   position: absolute;
@@ -667,6 +679,7 @@ button#detail-view:not([disabled]) {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   bottom: 0;
+  cursor: auto;
   display: -webkit-box;
   left: 0;
   padding: 0 5px;
@@ -759,7 +772,6 @@ body[type='full-page'] .thumbnail-grid .thumbnail-bottom {
 #default-actions-list > * {
   background-image: none;
   border-radius: 0;
-  line-height: 30px;
 }
 
 #list-container list > [selected],
@@ -1003,6 +1015,10 @@ input.rename {
   display: -webkit-box;
 }
 
+.table-row-cell {
+  -webkit-box-align: center;
+}
+
 .file-checkbox {
   -webkit-margin-end: 0;
   -webkit-margin-start: 0;
@@ -1044,7 +1060,7 @@ input.rename {
 #default-actions-list li {
   border: none;
   border-top: 1px solid transparent;
-  line-height: 39px;
+  height: 39px;
   padding-bottom: 1px;
   padding-top: 1px;
 }

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

@@ -1058,6 +1058,8 @@ FileManager.prototype = {
     // 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));
@@ -1120,6 +1122,8 @@ FileManager.prototype = {
     // 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));
@@ -1826,11 +1830,13 @@ FileManager.prototype = {
   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;
   };
 
   /**
@@ -2853,6 +2859,26 @@ FileManager.prototype = {
     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') ||
+        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)