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 {
@@ skipping 310 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 {
+  padding-left: 50px;
+  padding-top: 20px;
   display: none;
 }
 
-div.unmounted-panel {
-  padding-left: 50px;
-  padding-top: 20px;
+.dialog-container[gdata='mounting'] #unmounted-panel,
+.dialog-container[gdata='error'] #unmounted-panel {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
 }
 
-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 > .gdata.loading {
   position: relative;
 }
 
-.unmounted-panel > .gdata.loading .spinner-box {
+#unmounted-panel > .gdata.loading .spinner-box {
   bottom: 0;
   position: absolute;
   right: 100%;
   top: 0;
   width: 40px;
 }
 
-.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;
+[gdata='unmounted'] #unmounted-panel > .gdata.loading,
+[gdata='unmounted'] #unmounted-panel > .gdata.progress,
+[gdata='error'] #unmounted-panel > .gdata.error,

[Vladislav Kaznacheev, 2012/05/15 11:11:54]

I introduced 'error' and 'retry' attribute for a reason, they are not always
present together.

[SeRya, 2012/05/15 18:16:20]

Thank you for the point. I goning to control visibility of the retry button with
the hidden attribute.

On 2012/05/15 11:11:54, Vladislav Kaznacheev wrote:

+[gdata='error'] #unmounted-panel > .gdata.retry,
+[gdata='error'] #unmounted-panel > .gdata.learn-more {
+  display: -webkit-box;
 }
 
 .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'],
@@ skipping 95 matching lines @@
   100% { opacity: 1; }
 }
 
 :hover > .tooltip {
   -webkit-animation-duration: 800ms;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-name: tooltip-show;
   -webkit-animation-timing-function: linear;
   opacity: 1;
 }