Files.app: Show drive sync state in the progress center.

chrome/browser/resources/file_manager/foreground/css/file_manager.css

 /* Copyright (c) 2012 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. */
 
 /* The order of z-index:
  * - 2: drag-selection-bodrder
  * - 3: preview-panel
  * - 500: scrollbar
  * - 500: splitter
  * - 525: spinner
@@ skipping 1888 matching lines @@
   background-color: #ebebeb;
   border-top: 1px solid #d8d8d8;
 }
 
 #progress-center.animated {
   -webkit-animation: progress-center-toggle 300ms ease-out;
 }
 
 #progress-center-open-view {
   opacity: 1;
-  padding-top: 42px;
+  padding-top: 10px;
   transition: opacity 300ms linear;
 }
 
 #progress-center:not(.opened) #progress-center-open-view {
   opacity: 0;
   pointer-events: none;
   position: absolute;
 }
 
 #progress-center-close-view {
@@ skipping 11 matching lines @@
 #progress-center.animated #progress-center-close-view {
   left: 0;
   pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
 }
 
 #progress-center li {
-  display: block;
-  min-height: 29px;  /* label 17px + frame 12px */
+  -webkit-padding-end: 10px;
+  display: flex;
+  /* This must not be margin-bottom to calculate parent's height correctly. */
   padding-bottom: 20px;
 }
 
 #progress-center label {
   color: #777;
   display: block;
-  font: 12px/17px normal;
-  min-height: 17px;
   overflow: hidden;
-  padding: 0 20px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-#progress-center li.error label {
+#progress-center li.error.single label {
   white-space: normal;
 }
 
 #progress-center .progress-frame {
   -webkit-padding-end: 10px;
   -webkit-padding-start: 20px;
-  align-items: center;
-  display: flex;
-  margin-top: 4px;
-}
-
-#progress-center li.error .progress-frame {
-  height: 0;
+  flex: 1 0 0;
 }
 
 #progress-center .progress-bar {
-  -webkit-margin-end: 24px;
   background: #d8d8d8;
   border-radius: 3px;
-  flex: 1 0 0;
+  display: inline-block;
   height: 6px;
   opacity: 1;
   overflow: hidden;
+  width: 100%;
 }
 
 #progress-center li.error .progress-bar,
-#progress-center li.canceled .progress-bar,
 #progress-center li.quiet .progress-bar {
-  visibility: hidden;
+  display: none;
 }
 
 #progress-center .progress-track {
   background: #787878;
   height: 100%;
 }
 
 #progress-center .progress-track.animated {
   transition: width 300ms linear;
 }
 
+#progress-center .button-frame {
+  align-self: flex-end;
+  flex: none;
+}
+
 #progress-center button {
-  background: orange;
   border: none;
   cursor: pointer;
-  flex: 0 0 auto;
+  display: inline-block;
   height: 12px;
   min-height: 0;
   min-width: 0;
   outline: none;
   padding: 0;
+  vertical-align: middle;
   width: 12px;
-  z-index: 0;
 }
 
-#progress-center button.toggle {
+#progress-center li.error.single .button-frame {
+  display: none;
+}
+
+#progress-center button.close {
+  -webkit-margin-end: 10px;
+  -webkit-margin-start: auto;
   background: -webkit-image-set(
       url(../images/files/ui/process_drawer_button_opened.png) 1x,
       url(../images/files/ui/2x/process_drawer_button_opened.png) 2x)
       no-repeat;
-  position: absolute;
-  right: 10px;
-  top: 17px; /* label height */
-  transition: top 300ms ease-out;
-  z-index: 1;
+  display: block;
+  margin-bottom: 20px;
 }
 
-#progress-center button.toggle:hover {
+#progress-center button.close:hover {
   background: -webkit-image-set(
       url(../images/files/ui/process_drawer_button_opened_hover.png) 1x,
       url(../images/files/ui/2x/process_drawer_button_opened_hover.png) 2x)
       no-repeat;
 }
 
-#progress-center button.toggle:active {
+#progress-center button.close:active {
   background: -webkit-image-set(
       url(../images/files/ui/process_drawer_button_opened_pressed.png) 1x,
       url(../images/files/ui/2x/process_drawer_button_opened_pressed.png) 2x)
       no-repeat;
 }
 
-/*
- * If the closed progress center has only one item,
- * toggle button turned into cancel button the item.
- */
-#progress-center:not(.opened) #progress-center-close-view.single ~
-    button.toggle,
+#progress-center button.open {
+  background: -webkit-image-set(
+      url(../images/files/ui/process_drawer_button_closed.png) 1x,
+      url(../images/files/ui/2x/process_drawer_button_closed.png) 2x)
+      no-repeat;
+}
+
+#progress-center button.open:hover {
+  background: -webkit-image-set(
+      url(../images/files/ui/process_drawer_button_closed_hover.png) 1x,
+      url(../images/files/ui/2x/process_drawer_button_closed_hover.png) 2x)
+      no-repeat;
+}
+
+#progress-center button.open:active {
+  background: -webkit-image-set(
+      url(../images/files/ui/process_drawer_button_closed_pressed.png) 1x,
+      url(../images/files/ui/2x/process_drawer_button_closed_pressed.png) 2x)
+      no-repeat;
+}
+
 #progress-center button.cancel {
   background: -webkit-image-set(
       url(../images/files/ui/close_bar.png) 1x,
       url(../images/files/ui/2x/close_bar.png) 2x)
       no-repeat;
 }
 
-#progress-center:not(.opened)
-    #progress-center-close-view.single:not(.cancelable) ~ button.toggle,
+#progress-center-close-view:not(.single) button.cancel {
+  display: none;
+}
+
+#progress-center-close-view.single button.open {
+  display: none;
+}
+
 #progress-center li:not(.cancelable) button.cancel {
   visibility: hidden;
 }
-
-#progress-center.opened button.toggle {
-  background: -webkit-image-set(
-      url(../images/files/ui/process_drawer_button_closed.png) 1x,
-      url(../images/files/ui/2x/process_drawer_button_closed.png) 2x)
-      no-repeat;
-  top: 10px;
-}
-
-#progress-center.opened button.toggle:hover {
-  background: -webkit-image-set(
-      url(../images/files/ui/process_drawer_button_closed_hover.png) 1x,
-      url(../images/files/ui/2x/process_drawer_button_closed_hover.png) 2x)
-      no-repeat;
-}
-
-#progress-center.opened button.toggle:active {
-  background: -webkit-image-set(
-      url(../images/files/ui/process_drawer_button_closed_pressed.png) 1x,
-      url(../images/files/ui/2x/process_drawer_button_closed_pressed.png) 2x)
-      no-repeat;
-}