Refactoring file manager: moving volume mounting related code to a separate class.

chrome/browser/resources/file_manager/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. */
 
 html.col-resize * {
   cursor: col-resize !important;
 }
 
 /* Outer frame of the dialog. */
 body {
-   -webkit-box-flex: 1;
-   -webkit-box-orient: vertical;
-   -webkit-transition: opacity 70ms linear;
-   -webkit-user-select: none;
-   display: -webkit-box;
-   height: 100%;
-   margin: 0;
-   opacity: 0;
-   padding: 0;
-   position: absolute;
-   width: 100%;
+  -webkit-box-flex: 1;
+  -webkit-box-orient: vertical;
+  -webkit-transition: opacity 70ms linear;
+  -webkit-user-select: none;
+  display: -webkit-box;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  width: 100%;
+}
+
+body.loaded {
+  /* Do not use display:none because list will calculate metrics incorrectly. */
+  /*display: -webkit-box;*/

[Vladislav Kaznacheev, 2012/05/22 09:48:30]

Commented property looks confusing

+  opacity: 1;
 }
 
 button,
 input[type='button'],
 input[type='submit'] {
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-user-select: none;
   background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
   border: 1px solid #aaa;
@@ skipping 289 matching lines @@
 }
 
 /* Container for the detail and thumbnail list views. */
 .dialog-body {
   -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
   -webkit-transition: all 180ms ease;
   border-top: 1px solid #d4d4d4;
   display: -webkit-box;
   overflow: hidden;
+  position: relative;
 }
 
 /* Container for the ok/cancel buttons. */
 .dialog-footer {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   border-top: 1px solid #d2d2d2;
   display: -webkit-box;
   padding: 10px 17px 14px 15px;
 }
@@ skipping 774 matching lines @@
   position: absolute;
   right: 0;
   top: 0;
 }
 
 div.shade[fadein] {
   opacity: 1;
 }
 
 /* Message panel for unmounted GData */
-.dialog-container:not([unmounted]) .dialog-body > div.unmounted-panel,
-.dialog-container[unmounted] .dialog-body > div:not(.unmounted-panel) {
+#unmounted-panel {
+  bottom: 0;
+  color: #333;
   display: none;
+  left: 0;
+  padding-left: 50px;
+  padding-top: 20px;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
-div.unmounted-panel {
-  color: #333;
-  padding-left: 50px;
-  padding-top: 20px;
+.dialog-container[gdata='mounting'] #unmounted-panel,
+.dialog-container[gdata='error'] #unmounted-panel {
+  display: block;
 }
 
-div.unmounted-panel > * {
+.dialog-container[gdata='unmounted'] .filelist-panel,
+.dialog-container[gdata='mounting'] .filelist-panel,
+.dialog-container[gdata='error'] .filelist-panel {
+  /* Hide file list when GData is not mounted.
+     Use opacity to avoid manual resizing.*/
+  opacity: 0;
+}
+
+#unmounted-panel > * {
   height: 22px;
   margin-bottom: 10px;
 }
 
-div.unmounted-panel > div {
+#unmounted-panel > * {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
-  display: -webkit-box;
+  display: none;
 }
 
-.unmounted-panel > .gdata.loading {
+#unmounted-panel > .loading {
   position: relative;
 }
 
-.unmounted-panel > .gdata.loading .spinner-box {
+#unmounted-panel > .loading > .spinner-box {
   bottom: 0;
   position: absolute;
   right: 100%;
   top: 0;
   width: 40px;
 }
 
-.unmounted-panel > .gdata.progress {
+[gdata='mounting'] #unmounted-panel > .loading,
+[gdata='mounting'] #unmounted-panel > .progress,
+[gdata='error'] #unmounted-panel > .error,
+#unmounted-panel.retry-enabled > .retry,
+#unmounted-panel.retry-enabled > .learn-more {
+  display: -webkit-box;
+}
+
+#unmounted-panel > .progress {
   color: #999;
   margin-top: -10px;
 }
 
-.unmounted-panel:not([loading]) > .gdata.loading,
-.unmounted-panel:not([loading]) > .gdata.progress,
-.unmounted-panel:not([error]) > .gdata.error,
-.unmounted-panel:not([retry]) > .gdata.retry,
-.unmounted-panel:not([retry]) > .gdata.learn-more {
-  display: none;
-}
-
 .plain-link {
   color: rgb(17, 85, 204);
   cursor: pointer;
 }
 
 body[ash] .dialog-title,
 body[type='full-page'] [invisibleif='full-page'],
 body:not([type='full-page']) [visibleif='full-page'],
 body:not([type='saveas-file']) [visibleif='saveas-file'],
 body:not([type='saveas-file']):not([type='full-page'])
@@ skipping 107 matching lines @@
   left: 0;
   padding: 10px;
   position: absolute;
   right: 0;
   top: 28px;  /* Leave room for the file list header. */
 }
 
 .dialog-container:not([gdrive-welcome='page']) #no-search-results[show] {
   display: block;
 }