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

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

Index: chrome/browser/resources/file_manager/foreground/css/file_manager.css
diff --git a/chrome/browser/resources/file_manager/foreground/css/file_manager.css b/chrome/browser/resources/file_manager/foreground/css/file_manager.css
index 9e945eb62441cc5b0e6f15021e1042243869507b..505423d4e1dbb6d88ef93a28bbb2bbf607105e03 100644
--- a/chrome/browser/resources/file_manager/foreground/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/foreground/css/file_manager.css
@@ -1939,8 +1939,9 @@ menuitem#thumbnail-view[lead]:not([disabled]) {
 
 #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 {
@@ -1963,27 +1964,23 @@ menuitem#thumbnail-view[lead]:not([disabled]) {
   -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 {
@@ -1996,28 +1993,34 @@ menuitem#thumbnail-view[lead]:not([disabled]) {
 }
 
 #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;
 }
 
@@ -2049,6 +2052,13 @@ menuitem#thumbnail-view[lead]:not([disabled]) {
 }
 
 #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;