Files.app: Introduce check-select mode.

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

 /* Copyright (c) 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 /* Special attribute used in HTML to hide elements. */
 body[type='folder'] [invisibleif~='folder'],
 body[type='upload-folder'] [invisibleif~='upload-folder'],
 body[type='saveas-file'] [invisibleif~='saveas-file'],
 body[type='open-file'] [invisibleif~='open-file'],
 body[type='open-multi-file'] [invisibleif~='open-multi-file'],
@@ skipping 234 matching lines @@
   border-bottom: 1px solid rgb(56, 179, 244);
   color: white;
   display: flex;
   flex: none;
   flex-direction: row;
   height: 48px;
   margin: 0;
   transition: background 220ms ease;
 }
 
-body.selecting .dialog-header {
+body.check-select .dialog-header {
   background: white;
   border-bottom: 1px solid rgb(219, 219, 219);
   color: rgb(90, 90, 90);
 }
 
 .dialog-header > .spacer {
   flex: auto;
 }
 
 .dialog-header button {
   cursor: pointer;
   text-transform: uppercase;
 }
 
 .dialog-header button,
 .dialog-header button:hover {
   color: white;
 }
 
-body.selecting button,
-body.selecting button:hover {
+body.check-select button,
+body.check-select button:hover {
   color: rgb(90, 90, 90);
 }
 
 .dialog-header .icon-button {
   -webkit-margin-end: 4px;
   -webkit-margin-start: 12px;
   background-color: transparent;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 16px 16px;
   border: 0;
   border-radius: 16px;
   height: 32px;
   line-height: 16px;
   min-width: 32px;
   padding: 0;
   width: 32px;
 }
 
 .dialog-header .icon-button paper-ripple {
   color: black;
 }
 
-body.selecting .dialog-header .icon-button paper-ripple {
+body.check-select .dialog-header .icon-button paper-ripple {
   rgb(90, 90, 90);
 }
 
 .dialog-header .icon-button:hover,
 .dialog-header .icon-button:focus,
 .dialog-header .combobutton:hover,
 .dialog-header .combobutton:focus {
   background-color: rgba(90, 90, 90, 0.15);
 }
 
-body.selecting .dialog-header .icon-button:hover,
-body.selecting .dialog-header .icon-button:focus,
-body.selecting .dialog-header .combobutton:hover,
-body.selecting .dialog-header .combobutton:focus {
+body.check-select .dialog-header .icon-button:hover,
+body.check-select .dialog-header .icon-button:focus,
+body.check-select .dialog-header .combobutton:hover,
+body.check-select .dialog-header .combobutton:focus {
   background-color: rgba(153, 153, 153, 0.20);
 }
 
 .dialog-header .icon-button[disabled]:not(.manual-display) {
   display: none !important;
 }
 
 .dialog-header core-icon,
 .dialog-header .icon {
   height: 16px;
@@ skipping 23 matching lines @@
 .dialog-header button.icon-button > core-icon {
   margin: 8px;
 }
 
 #search-button {
   background-image: -webkit-image-set(
       url(../images/files/ui/search_white.png) 1x,
       url(../images/files/ui/2x/search_white.png) 2x);
 }
 
-body.selecting #search-button {
+body.check-select #search-button {
   background-image: -webkit-image-set(
       url(../images/files/ui/search.png) 1x,
       url(../images/files/ui/2x/search.png) 2x);
 }
 
 #share-button {
   background-image: -webkit-image-set(
       url(../images/files/ui/share_white.png) 1x,
       url(../images/files/ui/2x/share_white.png) 2x);
 }
 
-body.selecting #share-button {
+body.check-select #share-button {
   background-image: -webkit-image-set(
       url(../images/files/ui/share.png) 1x,
       url(../images/files/ui/2x/share.png) 2x);
 }
 
 #delete-button {
   background-image: -webkit-image-set(
       url(../images/files/ui/delete_white.png) 1x,
       url(../images/files/ui/2x/delete_white.png) 2x);
 }
 
-body.selecting #delete-button {
+body.check-select #delete-button {
   background-image: -webkit-image-set(
       url(../images/files/ui/delete.png) 1x,
       url(../images/files/ui/2x/delete.png) 2x);
 }
 
 #view-button {
   background-image: -webkit-image-set(
       url(../images/files/ui/view_list_white.png) 1x,
       url(../images/files/ui/2x/view_list_white.png) 2x);
 }
 
-body.selecting #view-button {
-  background-image: -webkit-image-set(
-      url(../images/files/ui/view_list.png) 1x,
-      url(../images/files/ui/2x/view_list.png) 2x);
+body.check-select #view-button {
+  display: none;
 }
 
 #view-button.thumbnail {
   background-image: -webkit-image-set(
       url(../images/files/ui/view_thumbnail_white.png) 1x,
       url(../images/files/ui/2x/view_thumbnail_white.png) 2x);
 }
 
-body.selecting #view-button.thumbnail {
-  background-image: -webkit-image-set(
-      url(../images/files/ui/view_thumbnail.png) 1x,
-      url(../images/files/ui/2x/view_thumbnail.png) 2x);
+body.check-select #view-button.thumbnail {
+  display: none;
 }
 
 #gear-button {
   background-image: -webkit-image-set(
       url(../images/files/ui/menu_white.png) 1x,
       url(../images/files/ui/2x/menu_white.png) 2x);
 }
 
-body.selecting #gear-button {
-  background-image: -webkit-image-set(
-      url(../images/files/ui/menu.png) 1x,
-      url(../images/files/ui/2x/menu.png) 2x);
+body.check-select #gear-button {
+  display: none;
 }
 
 #cloud-import-details-button {
   margin-left: -15px;
 }
 
 #cloud-import-details {
   background-color: white;
   border-radius: 2px;
   line-height: 1.5em;
@@ skipping 63 matching lines @@
   background-color: #1BA8F3;
   color: white;
   margin-top: 20px;
 }
 
 #files-selected-label {
   display: none;
   margin: 0 10px;
 }
 
-body.selecting #files-selected-label {
+body.check-select #files-selected-label {
   display: block;
 }
 
 #cancel-selection-button {
   display: none;
   margin: 0 8px;
   text-transform: none;
 }
 
 #cancel-selection-button .icon-arrow-back {
   -webkit-margin-end: 8px;
   background-image: -webkit-image-set(
       url(../images/files/ui/back.png) 1x,
       url(../images/files/ui/2x/back.png) 2x);
   background-position: center;
   background-repeat: no-repeat;
   height: 16px;
   width: 16px;
 }
 
 #cancel-selection-button-wrapper {
   width: 240px;  /* initial value, same as .dialog-navigation-list's width. */
 }
 
 #cancel-selection-button > core-icon {
   -webkit-margin-end: 6px;
 }
 
-body.selecting #cancel-selection-button {
+body.check-select #cancel-selection-button {
   display: inline-block;
 }
 
 /* Search button */
-body.selecting #search-button {
+body.check-select #search-button {
   display: none;
 }
 
 /* Search box */
 #search-box {
   display: flex;
   flex: none;
 }
 
-body.selecting #search-box {
+body.check-select #search-box {
   display: none;
 }
 
 #search-box input {
   cursor: default;
   display: inline-block;
   transition: width 0.2s ease;
   width: 0;
 }
 
@@ skipping 224 matching lines @@
   -webkit-margin-start: 16px;
   align-items: center;
   display: flex;
   flex: auto;
   flex-direction: row;
   line-height: 20px;
   overflow: hidden;
   padding-top: 1px;
 }
 
-body.selecting .breadcrumbs {
+body.check-select .breadcrumbs {
   display: none;
 }
 
 .breadcrumbs > [collapsed]::before {
   content: '...';
 }
 
 .breadcrumbs > [collapsed] {
   width: 1em;
 }
@@ skipping 239 matching lines @@
   position: absolute;
   top: 9px;
   transition: opacity 220ms ease;
   width: 34px;
 }
 
 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: 0.6;
+}
+
+body.check-select .thumbnail-grid .thumbnail-item .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 {
+body.check-select .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;
 }
 
 .thumbnail-grid .img-container {
   background-color: rgb(230, 230, 230);
   height: 100%;
   width: 100%;
@@ skipping 289 matching lines @@
   background-image: -webkit-image-set(
       url(../images/files/ui/list_checked.png) 1x,
       url(../images/files/ui/2x/list_checked.png) 2x);
   height: 28px;
   opacity: 0;
   position: absolute;
   transition: opacity 220ms ease;
   width: 28px;
 }
 
-#list-container list li[selected] .detail-checkmark {
+body.check-select #list-container list li[selected] .detail-checkmark {
   opacity: 1;
 }
 
 #list-container list li .detail-thumbnail {
   -webkit-user-drag: none;
   background-color: rgb(245, 245, 245);
   background-position: center;
   background-size: cover;
   border-radius: 14px;
   height: 28px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   transition: opacity 220ms ease;
   width: 28px;
 }
 
-#list-container list li:not([selected]) .detail-thumbnail.loaded {
+#list-container list li .detail-thumbnail.loaded {
   opacity: 1;
 }
 
+body.check-select #list-container list li[selected] .detail-thumbnail.loaded {
+  opacity: 0;
+}
+
 #tasks-menu cr-menu-item:not(.change-default) {
   background-position: left 10px center;
   padding-left: 32px;
 }
 
 #share-button {
   display: block;
   min-width: 0;  /* overrride */
 }
 
@@ skipping 583 matching lines @@
   padding: 20px 15px;
 }
 
 .text-measure {
   pointer-events: none;
   position: absolute;
   top: 0;
   visibility: hidden;
   z-index: -1;
 }