Storage manager: Add conditional messages for disk low situation and update design.

chrome/browser/resources/options/chromeos/storage_manager.html

Index: chrome/browser/resources/options/chromeos/storage_manager.html
diff --git a/chrome/browser/resources/options/chromeos/storage_manager.html b/chrome/browser/resources/options/chromeos/storage_manager.html
index da5f6dd90c0b44266da304312a52f3cd20f5708e..5ea4825bbdc419347644606b9519fc1dc6a2c72e 100644
--- a/chrome/browser/resources/options/chromeos/storage_manager.html
+++ b/chrome/browser/resources/options/chromeos/storage_manager.html
@@ -2,38 +2,66 @@
   <div class="close-button"></div>
   <h1 i18n-content="storageManagerPage"></h1>
 
-  <div class="content-area">
-    <div class="storage-manager-item">
-      <span i18n-content="storageItemLabelCapacity"></span>
-      <span id="storage-manager-size-capacity"
-            class="storage-manager-item-size"></span>
+  <div id="storage-manager-message-low-space"
+       class="storage-manager-message-area">
+    <div class="storage-manager-message-title">
+      <div class="storage-manager-message-icon"></div>
+      <span i18n-content="storageLowMessageTitle"></span>
     </div>
-    <div class="storage-manager-item">
-      <span i18n-content="storageItemLabelInUse"></span>
-      <span id="storage-manager-size-in-use"
-            class="storage-manager-item-size"></span>
+    <p i18n-content="storageLowMessageLine1"></p>
+    <p i18n-content="storageLowMessageLine2"></p>
+  </div>
+  <div id="storage-manager-message-critically-low-space"
+       class="storage-manager-message-area">
+    <div class="storage-manager-message-title">
+      <div class="storage-manager-message-icon"></div>
+      <span i18n-content="storageCriticallyLowMessageTitle"></span>
     </div>
-    <div class="storage-manager-subitem">
-      <a is="action-link"
-         id="storage-manager-label-downloads"
-         i18n-content="storageSubitemLabelDownloads"></a>
-      <span id="storage-manager-size-downloads"
-            class="storage-manager-item-size"
-            i18n-content="storageSizeCalculating"></span>
+    <p i18n-content="storageCriticallyLowMessageLine1"></p>
+    <p i18n-content="storageCriticallyLowMessageLine2"></p>
+  </div>
+
+  <div class="content-area">
+    <div class="storage-manager-section">
+      <div class="storage-manager-item">
+        <span i18n-content="storageItemLabelCapacity"></span>
+        <span id="storage-manager-size-capacity"
+              class="storage-manager-item-size"></span>
+      </div>
+      <div id="storage-bar-background">
+        <div id="storage-bar-progress"></div>

[Dan Beam, 2016/06/21 01:39:55]

why not use a <progress> element?

[fukino, 2016/06/21 22:21:49]

Done.
I didn't know the progress element. Thanks!

+      </div>
     </div>
-    <div id="storage-manager-item-arc"
-         class="storage-manager-subitem" hidden>
-      <a is="action-link"
-         id="storage-manager-label-arc"
-         i18n-content="storageSubitemLabelArc"></a>
-      <span id="storage-manager-size-arc"
-            class="storage-manager-item-size"
-            i18n-content="storageSizeCalculating"></span>
+    <div class="storage-manager-section">
+      <div class="storage-manager-item">
+        <span i18n-content="storageItemLabelInUse"></span>
+        <span id="storage-manager-size-in-use"
+              class="storage-manager-item-size"></span>
+      </div>
+      <div class="storage-manager-subitem">
+        <a is="action-link"
+           id="storage-manager-label-downloads"
+           i18n-content="storageSubitemLabelDownloads"></a>
+        <span id="storage-manager-size-downloads"
+              class="storage-manager-item-size"
+              i18n-content="storageSizeCalculating"></span>
+      </div>
+      <div id="storage-manager-item-arc"
+           class="storage-manager-subitem" hidden>
+        <a is="action-link"
+           id="storage-manager-label-arc"
+           i18n-content="storageSubitemLabelArc"></a>
+        <span id="storage-manager-size-arc"
+              class="storage-manager-item-size"
+              i18n-content="storageSizeCalculating"></span>
+      </div>
     </div>
-    <div class="storage-manager-item">
-      <span i18n-content="storageItemLabelAvailable"></span>
-      <span id="storage-manager-size-available"
-            class="storage-manager-item-size"></span>
+    <div class="storage-manager-section">
+      <div class="storage-manager-item">
+        <span i18n-content="storageItemLabelAvailable"></span>
+        <span id="storage-manager-size-available"
+              class="storage-manager-item-size"></span>
+      </div>
     </div>
   </div>