MD Settings: Update the design of storage manager.

This CL updates the layout/colors to match the following latest spec:
https://folio.googleplex.com/md-storage-management-spec

BUG=629438
TEST=manually confirmed.
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2435033003
Cr-Commit-Position: refs/heads/master@{#427291}

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

@@ -2,6 +2,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="/device_page/drive_cache_dialog.html">
 <link rel="import" href="/prefs/prefs.html">
 <link rel="import" href="/route.html">
@@ -13,17 +14,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 +38,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 +47,41 @@
       }
 
       .storage-size {
-        color: rgb(145, 145, 145);
+        color: var(--paper-grey-600);
       }
 
       .message-area {
+        -webkit-padding-end: 48px;
+        -webkit-padding-start: 16px;
         background-color: var(--google-grey-100);
         border-radius: 2px;
-        margin: 10px 0;
-        padding: 20px 20px 6px;
+        display: flex;
+        margin: 14px 0 16px;
+        padding-bottom: 12px;
+        padding-top: 16px;
         width: 100%;
       }
 
-      .message-title {
-        align-items: center;
-        display: flex;
-        margin-bottom: 16px;
+      .message-area > iron-icon {
+        -webkit-padding-end: 16px;
+        flex: none;
       }
 
-      .message-title span {
+      .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>
+        <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>
+        <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>
     </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>