Files.app: Add touch feedback on eject button.

Along with adding touch feedback, I enlarged the touch target of eject button.

BUG=469943
TEST=manual test

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

Cr-Commit-Position: refs/heads/master@{#322926}

2 files changed, 9 insertions, 3 deletions

diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index 24e8c49..0919fc3 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -221,9 +221,9 @@ div.splitter {
       url(../images/files/ui/2x/eject.png) 2x) no-repeat center;
   cursor: pointer;
   flex: none;
-  height: 20px;
-  margin-right: 6px;
-  width: 20px;
+  height: 40px;
+  position: relative;
+  width: 40px;
   z-index: 1;  /* Make sure .root-eject is on upper layer than paper-ripple. */
 }
 
diff --git a/ui/file_manager/file_manager/foreground/js/ui/directory_tree.js b/ui/file_manager/file_manager/foreground/js/ui/directory_tree.js
index c7483b0..a699aa5 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/directory_tree.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/directory_tree.js
@@ -545,6 +545,12 @@ VolumeItem.prototype.setupEjectButton_ = function(rowElement) {
       unmountCommand.execute(this);
     }.bind(this));
     rowElement.appendChild(ejectButton);
+
+    // Add paper-ripple effect on the eject button.
+    var ripple = cr.doc.createElement('paper-ripple');
+    ripple.setAttribute('fit', '');
+    ripple.className = 'circle recenteringTouch';
+    ejectButton.appendChild(ripple);
   }
 };