Hides the focus ring on eject button activation.

We changed the focus ring on eject button activation to be hidden.
This ensures consistency with other button behavior within the files
app. We swapped the original eject button (<button>) for a cr-button,
a polymer element. This simplifies the eject button implementation by
removing a nested HTMLElement since the ripple effect is contained
within the polymer element (<cr-button>).

Bug: 1006198
Change-Id: I5fc60a28db9bbd8166420fe50ef89bd88facdc1d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1830218Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#713651}

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -238,6 +238,12 @@ html[class*='col-resize'] #directory-tree {
   background: -webkit-image-set(
       url(../images/files/ui/eject.png) 1x,
       url(../images/files/ui/2x/eject.png) 2x) no-repeat center;
+  border-style: none;
+  box-shadow: none;
+  min-width: 16px;
+  outline-color: rgb(77, 144, 254);
+  outline-width: 1px;
+  padding: 10px;
 }
 
 #directory-tree .tree-row[selected] > .root-eject {
@@ -246,6 +252,10 @@ html[class*='col-resize'] #directory-tree {
       url(../images/files/ui/2x/eject_active.png) 2x);
 }
 
+#directory-tree .tree-row > .root-eject:active {
+  outline-width: 0;
+}
+
 #directory-tree .root-item[disabled] {
   opacity: 0.5;
   pointer-events: none;

ui/file_manager/file_manager/foreground/js/ui/directory_tree.js

@@ -703,17 +703,12 @@ class DirectoryItem extends TreeItem {
    * @private
    */
   setupEjectButton_(rowElement) {
-    const ejectButton = document.createElement('button');
+    const ejectButton = document.createElement('cr-button');
 
     ejectButton.className = 'root-eject align-right-icon';
     ejectButton.setAttribute('aria-label', str('UNMOUNT_DEVICE_BUTTON_LABEL'));
     ejectButton.setAttribute('tabindex', '0');
-
-    // Add paper-ripple effect on the eject button.
-    const ripple = document.createElement('paper-ripple');
-    ripple.setAttribute('fit', '');
-    ripple.className = 'circle recenteringTouch';
-    ejectButton.appendChild(ripple);
+    ejectButton.circleRipple = true;
 
     // Block mouse handlers, handle click.
     ejectButton.addEventListener('mouseup', (event) => {

ui/file_manager/integration_tests/file_manager/directory_tree_context_menu.js

@@ -869,7 +869,7 @@
 
     // Wait for the eject button to appear.
     const ejectButtonQuery =
-        ['#directory-tree [entry-label="archive.zip"] button.root-eject'];
+        ['#directory-tree [entry-label="archive.zip"] .root-eject'];
     await remoteCall.waitForElement(appId, ejectButtonQuery);
 
     // Focus on the eject button.