MD Settings: Update the design of storage manager.

chrome/browser/resources/settings/device_page/storage.html

Index: chrome/browser/resources/settings/device_page/storage.html
diff --git a/chrome/browser/resources/settings/device_page/storage.html b/chrome/browser/resources/settings/device_page/storage.html
index 4b0286287e294e1f6ae703cae9d22706633dead9..1af6a36e58fda34fa187ca55feaa3f3c75a6e598 100644
--- a/chrome/browser/resources/settings/device_page/storage.html
+++ b/chrome/browser/resources/settings/device_page/storage.html
@@ -13,17 +13,17 @@
       progress {
         -webkit-appearance: none;
         display: block;
-        height: 40px;
+        height: 28px;
         width: 100%;
       }
 
       progress::-webkit-progress-bar {
-        background-color: rgb(232, 232, 232);
+        background-color: rgba(0, 0, 0, 0.06);
         border-radius: 2px;
       }
 
       progress::-webkit-progress-value {
-        background-color: rgb(167, 225, 251);
+        background-color: rgb(0, 175, 255);
         border-radius: 2px;
       }
 
@@ -37,8 +37,8 @@
 
       iron-icon {
         --iron-icon-fill-color: rgb(255, 176, 0);
-        --iron-icon-height: 20px;
-        --iron-icon-width: 20px;
+        --iron-icon-height: 32px;
+        --iron-icon-width: 32px;
       }
 
       #criticallyLowMessage iron-icon {
@@ -46,37 +46,42 @@
       }
 
       .storage-size {
-        color: rgb(145, 145, 145);
+        color: var(--paper-grey-600);
       }
 
       .message-area {
         background-color: var(--google-grey-100);
         border-radius: 2px;
-        margin: 10px 0;
-        padding: 20px 20px 6px;
+        display: flex;
+        margin: 14px 0 16px;
+        padding: 16px 48px 12px 16px;
         width: 100%;
       }
 
-      .message-title {
-        align-items: center;
-        display: flex;
-        margin-bottom: 16px;
+      :host-context([dir=rtl]) .message-area {
+        padding: 16px 16px 12px 48px;

[michaelpg, 2016/10/22 05:08:41]

why not just specify -webkit-padding-start/end?

[fukino, 2016/10/24 07:59:19]

Replaced 'padding' with (-webkit-)padding-*.
(I blindly followed "Use shorthand notation when possible." in
https://www.chromium.org/developers/web-development-style-guide, but yes, using
-webkit-padding-start looks simpler.)

[michaelpg, 2016/10/24 21:36:13]

interesting -- I interpret "when possible" to mean it is overridden by "For the
properties that WebKit currently supports, use the RTL-friendly properties" but
it's definitely ambiguous.

[fukino, 2016/10/25 05:55:29]

Your interpretation makes sense to me.

       }
 
-      .message-title span {
+      .message-area > iron-icon {
+        -webkit-padding-end: 16px;
+        flex: none;
+      }
+
+      .message-title {
         font-size: 115%;
-        margin: 0 10px;
       }
 
-      .message-area > div:not(.message-title) {
+      .message-description {
         color: rgb(90, 90, 90);
+        font-size: 92%;
+        line-height: 1.6em;
         margin: 1em 0;
       }
 
       #barArea {
         display: flex;
         flex-direction: column;
-        margin: 12px 0 20px;
+        margin: 24px 0 54px;
         width: 100%;
       }
 
@@ -91,16 +96,14 @@
 
       .bar-label .vertical-line {
         align-self: center;
-        background-color: rgb(223, 223, 223);
-        height: 10px;
+        background-color: rgba(0, 0, 0, 0.17);
+        height: 8px;
+        margin-bottom: 4px;
         width: 1px;
       }
 
-      .bar-label span {
-        font-size: 85%;
-      }
-
       .bar-label .wrapper {
+        color: rgb(51, 51, 51);
         text-align: center;
         white-space: nowrap;
       }
@@ -126,23 +129,29 @@
     <div class="settings-box first"
         hidden$="[[!isSpaceLow_(sizeStat_.spaceState)]]">
       <div class="message-area">
-        <div class="message-title">
-          <iron-icon icon="cr:warning"></iron-icon>
-          <span>$i18n{storageSpaceLowMessageTitle}</span>
+        <iron-icon icon="cr:warning"></iron-icon>
+        <div class="message">
+          <div class="message-title">$i18n{storageSpaceLowMessageTitle}</div>
+          <div class="message-description">
+            <span>$i18n{storageSpaceLowMessageLine1}</span>
+            <span>$i18n{storageSpaceLowMessageLine2}</span>
+          </div>
         </div>
-        <div>$i18n{storageSpaceLowMessageLine1}</div>
-        <div>$i18n{storageSpaceLowMessageLine2}</div>
       </div>
     </div>
     <div class="settings-box first"
         hidden$="[[!isSpaceCriticallyLow_(sizeStat_.spaceState)]]">
       <div id="criticallyLowMessage" class="message-area">
-        <div class="message-title">
-          <iron-icon icon="cr:warning"></iron-icon>
-          <span>$i18n{storageSpaceCriticallyLowMessageTitle}</span>
+        <iron-icon icon="cr:warning"></iron-icon>
+        <div class="message">
+          <div class="message-title">
+            $i18n{storageSpaceCriticallyLowMessageTitle}
+          </div>
+          <div class="message-description">
+            <span>$i18n{storageSpaceCriticallyLowMessageLine1}</span>
+            <span>$i18n{storageSpaceCriticallyLowMessageLine2}</span>
+          </div>
         </div>
-        <div>$i18n{storageSpaceCriticallyLowMessageLine1}</div>
-        <div>$i18n{storageSpaceCriticallyLowMessageLine2}</div>
       </div>
     </div>
     <div class="settings-box first">
@@ -172,6 +181,7 @@
       <div id="downloadsSize" class="storage-size">
         $i18n{storageSizeComputing}
       </div>
+      <button class="icon-external" is="paper-icon-button-light"></button>

[michaelpg, 2016/10/22 05:08:41]

import paper-icon-button-light.html

[fukino, 2016/10/24 07:59:19]

Done.

     </div>
     <div class="settings-box" on-tap="onDriveCacheTap_"
          hidden$="[[!driveEnabled_]]" actionable>
@@ -179,12 +189,14 @@
       <div id="driveCacheSize" class="storage-size">
         $i18n{storageSizeComputing}
       </div>
+      <button class="subpage-arrow" is="paper-icon-button-light"></button>
     </div>
     <div class="settings-box" on-tap="onBrowsingDataTap_" actionable>
       <div class="start">$i18n{storageItemBrowsingData}</div>
       <div id="browsingDataSize" class="storage-size">
         $i18n{storageSizeComputing}
       </div>
+      <button class="subpage-arrow" is="paper-icon-button-light"></button>
     </div>
     <div class="settings-box" on-tap="onAndroidTap_"
          hidden$="[[!androidEnabled_]]" actionable>
@@ -192,12 +204,14 @@
       <div id="androidSize" class="storage-size">
         $i18n{storageSizeComputing}
       </div>
+      <button class="icon-external" is="paper-icon-button-light"></button>
     </div>
     <div class="settings-box" on-tap="onOtherUsersTap_" actionable>
       <div class="start">$i18n{storageItemOtherUsers}</div>
       <div id="otherUsersSize" class="storage-size">
         $i18n{storageSizeComputing}
       </div>
+      <button class="subpage-arrow" is="paper-icon-button-light"></button>
     </div>
     <settings-drive-cache-dialog id="storageDriveCache">
     </settings-drive-cache-dialog>