[directorytree] Add and style files-ng splitter bar and button

Add 32px files-ng-only <cr-button> centered in the splitter bar. The
design did not say where to place it, so make it centered.

Add style being careful that the splitter bar and the splitter button
both behave like buttons and can both activate dragging. For example,
--hover-bg-color, :hover, :active etc need quite fine control so that
button color matches regardless of which element started the drag.

Bug: 1002790, 992819
Change-Id: I99edc231f49bed97b1b29e012f50af5ca7d0080a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2060225Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#742075}

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

@@ -406,8 +406,8 @@ html[class*='col-resize'] #directory-tree .tree-row > .file-row > .root-eject:ho
 }
 
 /* A vertical splitter between the directory tree and the file list. It is
-   a transparent area centered on the directory tree right border.*/
-div.splitter {
+   a transparent area centered on the directory tree right border. */
+body:not(.files-ng) div.splitter {
   cursor: col-resize;
   flex: none;
   margin: 0 -3px;
@@ -416,6 +416,68 @@ div.splitter {
   z-index: 500;  /* Must be below the contextmenu (600). */
 }
 
+body.files-ng div.splitter {
+  align-items: center;
+  cursor: col-resize;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  margin-inline-end: calc(16px - 6px);
+  margin: 0;
+  position: relative;
+  width: 32px;
+  z-index: 500;  /* Must be below the contextmenu (600). */
+}
+
+body:not(.files-ng) div.splitter .splitter-button {
+  display: none;
+}
+
+body.files-ng div.splitter .splitter-button {
+  --hover-bg-color: rgba(0, 0, 0, 4%);
+  --ink-color: rgba(0, 0, 0, 88%);
+  border-radius: 50%;
+  border: none;
+  cursor: col-resize;
+  height: 32px;
+  min-width: 32px;
+  padding: 0;
+  width: 32px;
+}
+
+body.files-ng div.splitter.splitter-active .splitter-button:hover {
+  --hover-bg-color: none;
+}
+
+html.col-resize body.files-ng div.splitter:not(.splitter-active) .splitter-button:hover {
+  --hover-bg-color: none;
+}
+
+body.files-ng div.splitter.splitter-active .splitter-button:not(:active) {
+  background-color: rgba(var(--google-grey-300-rgb), 88%);
+}
+
+body.files-ng div.splitter .splitter-button .icon {
+  -webkit-mask-image: url(../images/common/dragger.svg);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  height: 20px;
+  padding: 6px;
+  width: 20px;
+}
+
+body.files-ng div.splitter:not(.splitter-active) .splitter-button .icon {
+  background-color: var(--google-grey-300);
+}
+
+html:not(.col-resize) body.files-ng div.splitter:not(.splitter-active) .splitter-button:hover .icon {
+  background-color: var(--google-grey-500);
+}
+
+body.files-ng div.splitter.splitter-active .splitter-button .icon {
+  background-color: var(--google-grey-500);
+}
+
 /* Breadcrumbs and things under the title but above the list view. */
 .dialog-header {
   align-items: center;

ui/file_manager/file_manager/main.html

@@ -498,7 +498,11 @@
           </div>
         </div>
       </div>
-      <div class="splitter" id="navigation-list-splitter"></div>
+      <div class="splitter" id="navigation-list-splitter">
+        <cr-button class="splitter-button">
+          <div class="icon"></div>
+        </cr-button>
+      </div>
       <div class="dialog-main">
         <div class="dialog-body">
           <div id="a11y-msg" aria-live="polite" style="display: inline-block; position: fixed; clip: rect(0, 0, 0, 0);"></div>