[directory-tree] Add eject icon svg and use as an iron-icon

Add a 16px x 16px eject icon. Append it as a child of its <cr-button>
container. Update and combine its CSS with other .align-right-icons:

 z-index: remove the comment: there's no ripple on any align-right
   icon once <cr-button> was used for the eject button. z-index has
   re-paint minimization effects in Files app, so retain z-index.

 --active-bg: none; disable this prefers-dark-mode-only <cr-button>
   color until we support dark-mode.

 :hover: cr-button has a square hover and we keep it to match Files
   app. Never show the hover effect when Files app is re-sizing.

 :active: use round activation, via border-radius 20px. Remove code
   doing the same from directory-tree.js.

Remove the eject icon PNG files (no longer used).

Bug: 992819
Change-Id: I98530884c9fafccde491786f9c99d5d9a925db25
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1909670Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Austin Tankiang <austinct@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714166}

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

@@ -221,40 +221,39 @@ html[class*='col-resize'] #directory-tree {
 }
 
 #directory-tree .tree-row > .align-right-icon {
+  --iron-icon-height: 16px;
+  --iron-icon-width: 16px;
   border-style: none;
   cursor: pointer;
   flex: none;
   height: 40px;
   position: relative;
   width: 40px;
-  z-index: 1;  /* Make sure the icon is on upper layer than paper-ripple. */
+  z-index: 1;
 }
 
 #directory-tree .tree-row > .external-link-icon iron-icon {
-  --iron-icon-width: 16px;
-  --iron-icon-height: 16px;
   padding: 12px;
 }
 
 #directory-tree .tree-row > .root-eject {
-  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;
+  --active-bg: none;  /* prevent dark-mode activation color */
+  --text-color: currentColor;
   box-shadow: none;
-  min-width: 16px;
-  outline-color: rgb(77, 144, 254);
-  outline-width: 1px;
-  padding: 10px;
+  min-width: 40px;
+  padding: 12px;
 }
 
-#directory-tree .tree-row[selected] > .root-eject {
-  background-image: -webkit-image-set(
-      url(../images/files/ui/eject_active.png) 1x,
-      url(../images/files/ui/2x/eject_active.png) 2x);
+html[class*='col-resize'] #directory-tree .tree-row > .root-eject:hover {
+  --hover-bg-color: none;
+}
+
+#directory-tree .tree-row > .root-eject:focus {
+  outline: 1px auto rgb(77, 144, 254);
 }
 
 #directory-tree .tree-row > .root-eject:active {
+  border-radius: 20px;
   outline-width: 0;
 }
 

ui/file_manager/file_manager/foreground/elements/icons.html

@@ -31,6 +31,7 @@
 <iron-iconset-svg name="files16" size="16">
   <svg>
     <defs>
+      <g id="eject"><path d="M14.04 11v2h-12v-2h12zm-6-8l6 6h-12l6-6z"/></g>
       <g id="external-link"><path d="M12 12H4V4h3.2V2.4H4c-.8 0-1.6.8-1.6 1.6v8c0 .8.8 1.6 1.6 1.6h8c.8 0 1.6-.8 1.6-1.6V8.8H12V12zM8.8 2.4V4h2L5.6 9.2l1.2 1.2L12 5.2v2h1.6V2.4H8.8z"/><g>
     </defs>
   </svg>

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

@@ -708,7 +708,6 @@ class DirectoryItem extends TreeItem {
     ejectButton.className = 'root-eject align-right-icon';
     ejectButton.setAttribute('aria-label', str('UNMOUNT_DEVICE_BUTTON_LABEL'));
     ejectButton.setAttribute('tabindex', '0');
-    ejectButton.circleRipple = true;
 
     // Block mouse handlers, handle click.
     ejectButton.addEventListener('mouseup', (event) => {
@@ -733,6 +732,11 @@ class DirectoryItem extends TreeItem {
       command.execute(this);
     });
 
+    // Append eject iron-icon.
+    const ironIcon = document.createElement('iron-icon');
+    ironIcon.setAttribute('icon', 'files16:eject');
+    ejectButton.appendChild(ironIcon);
+
     // Add the eject button as the last element of the tree row content.
     const parent = rowElement.querySelector('.label').parentElement;
     assert(parent).appendChild(ejectButton);