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

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

Index: chrome/browser/resources/options/chromeos/storage_manager.css
diff --git a/chrome/browser/resources/options/chromeos/storage_manager.css b/chrome/browser/resources/options/chromeos/storage_manager.css
index 73a8889d5738db855b54a299972af10e6da52d13..f738293f4646b468492aa03a66cbf2c4905256ff 100644
--- a/chrome/browser/resources/options/chromeos/storage_manager.css
+++ b/chrome/browser/resources/options/chromeos/storage_manager.css
@@ -3,12 +3,19 @@
  * found in the LICENSE file. */
 
 #storageManagerPage {
-  min-width: 320px;
+  width: 400px;
+}
+
+.storage-manager-section {
+  margin: 0 40px;
+}
+
+.storage-manager-section:not(:last-child) {
+  margin-bottom: 28px;
 }
 
 .storage-manager-item,
 .storage-manager-subitem {
-  -webkit-padding-end: 20px;
   display: flex;
   font-size: 108.33%; /* go to 13px from 12px */
   justify-content: space-between;
@@ -16,13 +23,77 @@
 }
 
 .storage-manager-item {
-  -webkit-padding-start: 20px;
-}
-
-.storage-manager-subitem {
-  -webkit-padding-start: 40px;
+  font-weight: 500;
 }
 
 .storage-manager-item-size {
   color: rgb(153, 153, 153);
 }
+
+.critically-low-space #storage-manager-message-critically-low-space,
+.low-space #storage-manager-message-low-space {
+  display: block;
+}
+
+.storage-manager-message-area {
+  background-color: rgb(245, 245, 245);
+  display: none;
+  padding: 20px 24px;
+}
+
+.storage-manager-message-icon {
+  background-size: 100%;
+  height: 20px;
+  width: 20px;
+}
+
+#storage-manager-message-critically-low-space .storage-manager-message-icon {
+  background-image: -webkit-image-set(
+      url(space_critically_low.png) 1x,
+      url(2x/space_critically_low.png) 2x);
+}
+
+#storage-manager-message-low-space .storage-manager-message-icon {
+  background-image: -webkit-image-set(
+      url(space_low.png) 1x,
+      url(2x/space_low.png) 2x);
+}
+
+.storage-manager-message-title {
+  align-items: center;
+  display: flex;
+}
+
+.storage-manager-message-title span {
+  font-size: 115%;
+  font-weight: 500;
+  margin: 0 10px;
+}
+
+.storage-manager-message-area p {
+  color: rgb(90, 90, 90);
+}
+
+#storage-bar-background {
+  background-color: rgb(229, 229, 229);
+  border-radius: 3px;
+  height: 6px;
+  position: relative;
+  width: 100%;
+}
+
+#storage-bar-progress {
+  background-color: rgb(74, 144, 226);
+  border-radius: 3px;
+  height: 6px;
+  position: absolute;
+  width: 0;
+}
+
+.critically-low-space #storage-bar-progress {
+  background-color: rgb(219, 68, 55);
+}
+
+.low-space #storage-bar-progress {
+  background-color: rgb(255, 176, 0);
+}