Files.app: Add UI to toggle and clear item selection.

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

Index: ui/file_manager/file_manager/foreground/css/file_manager.css
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 911855e7af5348cbb1c05a4de8f6b6e65d8a5649..452037d23bac7327ac7de4221a87a31fecd665c2 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -265,13 +265,18 @@ div.splitter {
 /* Breadcrumbs and things under the title but above the list view. */
 .dialog-header {
   align-items: center;
-  background: rgb(27, 168, 243);
+  background: rgba(27, 168, 243, 1.0);
   color: white;
   display: flex;
   flex: none;
   flex-direction: row;
   height: 48px;
   margin: 0;
+  transition: background 220ms ease;
+}
+
+body.selecting .dialog-header {
+  background: rgba(27, 168, 243, 0.9);
 }
 
 .dialog-header > .spacer {
@@ -308,7 +313,7 @@ div.splitter {
   display: none !important;
 }
 
-.dialog-header .icon-button > core-icon {
+.dialog-header core-icon {
   height: 16px;
   width: 16px;
 }
@@ -338,18 +343,45 @@ div.splitter {
 }
 
 #files-selected-label {
+  display: none;
   /* TODO(fukino): Move dynamically with the navigation area's separator. */
   left: 252px;
   position: absolute;
   top: 18px;
 }
 
+body.selecting #files-selected-label {
+  display: block;
+}
+
+#cancel-selection-button {
+  text-transform: none;
+  display: none
+}
+
+#cancel-selection-button > core-icon {
+  -webkit-margin-end: 6px;
+}
+
+body.selecting #cancel-selection-button {
+  display: inline-block;
+}
+
+/* Search button */
+body.selecting #search-button {
+  display: none;
+}
+
 /* Search box */
 #search-box {
   display: flex;
   flex: none;
 }
 
+body.selecting #search-box {
+  display: none;
+}
+
 #search-box input {
   cursor: default;
   display: inline-block;
@@ -489,6 +521,10 @@ div.splitter {
   padding-top: 1px;
 }
 
+body.selecting .breadcrumbs {
+  display: none;
+}
+
 .breadcrumbs > [collapsed]::before {
   content: '...';
 }
@@ -728,10 +764,7 @@ body[type='full-page'] .detail-name .detail-icon {
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
 }
 
-.thumbnail-grid .thumbnail-frame .checkmark {
-  background-image: -webkit-image-set(
-      url(../images/files/ui/thumbnail_checked.png) 1x,
-      url(../images/files/ui/2x/thumbnail_checked.png) 2x);
+.thumbnail-grid .checkmark {
   height: 34px;
   left: 9px;
   opacity: 0;
@@ -741,7 +774,17 @@ body[type='full-page'] .detail-name .detail-icon {
   width: 34px;
 }
 
-.thumbnail-grid .thumbnail-item[selected] .thumbnail-frame .checkmark {
+body.selecting .thumbnail-grid .checkmark {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/thumbnail_unchecked.png) 1x,
+      url(../images/files/ui/2x/thumbnail_unchecked.png) 2x);
+  opacity: 1;
+}
+
+body.selecting .thumbnail-grid .thumbnail-item[selected] .checkmark {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/thumbnail_checked.png) 1x,
+      url(../images/files/ui/2x/thumbnail_checked.png) 2x);
   opacity: 1;
 }