[selectionbar] Change 'cancel selection' to icon

Removes the 'Cancel selection' text from the selection bar cancel
button.

Changes the icon for selection bar to match the file list selection
icon.

Positions the icon and number of files selected message to align with
the icons and file names in the file list.

Removes the resize listener on the toolbar controller which was used
in the old layout to size the 'Cancel selection' button to match the
position of the splitter bar between the tree and file list views. The
listener function itself remains, with a comment added so that it can
be removed after files-ng work is complete.

Bug: 1068079, 1065837
Change-Id: I857f037995a5bc0ba631fa41f62af8d72ff99dd9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2137185
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756933}

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

@@ -1019,9 +1019,16 @@ html[dir='rtl'] #cloud-import-details {
 #files-selected-label {
   display: none;
   font-weight: 500;
+}
+
+body:not(.files-ng) #files-selected-label {
   margin-inline-start: 20px;
 }
 
+body.files-ng #files-selected-label {
+  margin-inline-start: 8px;
+}
+
 body.check-select #files-selected-label {
   display: block;
 }
@@ -1036,17 +1043,26 @@ body.check-select #files-selected-label {
   text-transform: none;
 }
 
+/* TODO(adanilo) document the calc() reason. */
+body.files-ng #cancel-selection-button {
+  margin-inline-start: calc(10px + 1px);
+}
+
 #cancel-selection-button:focus:not([tabindex='-1']):not(:active) {
   background-color: rgba(153, 153, 153, 20%);
 }
 
-#cancel-selection-button > span {
+body:not(.files-ng) #cancel-selection-button > span {
   display: inline-block;
   font-weight: 500;
   vertical-align: middle;
 }
 
-#cancel-selection-button .icon-arrow-back {
+body.files-ng #cancel-selection-button > span#cancel-selection-label {
+  display: none;
+}
+
+body:not(.files-ng) #cancel-selection-button .icon-arrow-back {
   background-image: -webkit-image-set(
       url(../images/files/ui/back.png) 1x,
       url(../images/files/ui/2x/back.png) 2x);
@@ -1058,9 +1074,22 @@ body.check-select #files-selected-label {
   width: 16px;
 }
 
+body.files-ng #cancel-selection-button .icon-arrow-back {
+  -webkit-mask-image: url(../images/files/ui/list_check.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  background-color: var(--google-blue-600);
+  flex: none;
+  height: 20px;
+  width: 20px;
+}
+
+body:not(.files-ng) #cancel-selection-button-wrapper {
+  width: 240px;  /* initial value, same as .dialog-navigation-list's width. */
+}
+
 #cancel-selection-button-wrapper {
   display: none;
-  width: 240px;  /* initial value, same as .dialog-navigation-list's width. */
 }
 
 #cancel-selection-button > iron-icon {

ui/file_manager/file_manager/foreground/js/toolbar_controller.js

@@ -142,8 +142,12 @@ class ToolbarController {
     this.deleteButton_.addEventListener(
         'click', this.onDeleteButtonClicked_.bind(this));
 
-    this.navigationList_.addEventListener(
-        'relayout', this.onNavigationListRelayout_.bind(this));
+    // The old layout needed the cancel selection button to resize every
+    // time the splitter was moved. Not needed for files-ng.
+    if (!util.isFilesNg()) {
+      this.navigationList_.addEventListener(
+          'relayout', this.onNavigationListRelayout_.bind(this));
+    }
 
     this.directoryModel_.addEventListener(
         'directory-changed', this.updateCurrentDirectoryButtons_.bind(this));
@@ -270,10 +274,13 @@ class ToolbarController {
    * @private
    */
   onNavigationListRelayout_() {
-    // Make the width of spacer same as the width of navigation list.
-    const navWidth =
-        parseFloat(window.getComputedStyle(this.navigationList_).width);
-    this.cancelSelectionButtonWrapper_.style.width = navWidth + 'px';
+    // Not needed for files-ng, see comment above where this function is used.
+    if (!util.isFilesNg()) {
+      // Make the width of spacer same as the width of navigation list.
+      const navWidth =
+          parseFloat(window.getComputedStyle(this.navigationList_).width);
+      this.cancelSelectionButtonWrapper_.style.width = navWidth + 'px';
+    }
   }
 
   /**