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 1921 matching lines @@
   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 */
+  /* This must not be margin-bottom to calculate parent's height correctly. */
   padding-bottom: 20px;
+  position: relative;
 }
 
 #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 {
   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;
 }
 
 #progress-center .progress-bar {
-  -webkit-margin-end: 24px;
+  -webkit-margin-end: 34px;
+  -webkit-margin-start: 20px;
   background: #d8d8d8;
   border-radius: 3px;
   flex: 1 0 0;
   height: 6px;
+  margin-top: 4px;
   opacity: 1;
   overflow: hidden;
 }
 
 #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 {
-  background: orange;
   border: none;
   cursor: pointer;
-  flex: 0 0 auto;
   height: 12px;
   min-height: 0;
   min-width: 0;
   outline: none;
   padding: 0;
+  position: absolute;
+  right: 10px;
   width: 12px;
   z-index: 0;
 }
 
+#progress-center button.cancel {
+  top: 17px;

[mtomasz, 2014/01/15 06:38:01]

Do we need so many magic numbers? Can't we use flex model instead? Will it work
well when font size is changed?

[hirono, 2014/01/16 05:05:52]

Yes, it will not work with different font size...
Let me update the structure of DOM and CSS!

[hirono, 2014/01/16 08:46:24]

Done.

+}
+
+#progress-center li.error button.cancel,
+#progress-center li.quiet button.cancel {
+  top: 3px;
+}
+
 #progress-center button.toggle {
   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;
 }
 
 #progress-center button.toggle: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;
 }
 
@@ skipping 11 matching lines @@
 #progress-center:not(.opened) #progress-center-close-view.single ~
     button.toggle,
 #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.quiet ~ button.toggle,
+#progress-center:not(.opened)
+#progress-center-close-view.error ~ button.toggle {
+  top: 3px;
+}
+
+#progress-center:not(.opened)
     #progress-center-close-view.single:not(.cancelable) ~ button.toggle,
 #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;
 }