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

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

Index: chrome/browser/resources/file_manager/css/file_manager.css
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index 5df2f73619946e4ed3ea7b3784f190d91d58d4d8..622e65f79614f5eb9d776555287fdaa2e4c252e9 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -328,6 +328,7 @@ div.root-eject:hover {
   border-top: 1px solid #d4d4d4;
   display: -webkit-box;
   overflow: hidden;
+  position: relative;
 }
 
 /* Container for the ok/cancel buttons. */
@@ -1122,33 +1123,47 @@ div.shade[fadein] {
 }
 
 /* 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;
+}
+
+.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;
 }
 
-div.unmounted-panel > * {
+#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 .spinner-box {
   bottom: 0;
   position: absolute;
   right: 100%;
@@ -1156,12 +1171,13 @@ div.unmounted-panel > div {
   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='mounting'] #unmounted-panel > .loading,
+[gdata='mounting'] #unmounted-panel > .spinner-box,
+[gdata='mounting'] #unmounted-panel > .progress,
+#unmounted-panel > .retry:not([hidden]),
+[gdata='error'] #unmounted-panel > .error,
+[gdata='error'] #unmounted-panel > .learn-more {
+  display: -webkit-box;
 }
 
 .plain-link {