Port storage manager to MD settings.

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
new file mode 100644
index 0000000000000000000000000000000000000000..2b3a688f4ea250a32ea4bbdd073c5e58df0e4f8e
--- /dev/null
+++ b/chrome/browser/resources/settings/device_page/storage.html
@@ -0,0 +1,205 @@
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<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/paper-progress/paper-progress.html">

[michaelpg, 2016/10/03 23:44:45]

import iron-icon

[fukino, 2016/10/04 09:03:53]

Done.

+<link rel="import" href="/device_page/drive_cache_dialog.html">
+<link rel="import" href="/prefs/prefs.html">
+<link rel="import" href="/route.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-storage">
+  <template>
+    <style include="settings-shared">
+      progress {
+        -webkit-appearance: none;
+        display: block;
+        height: 40px;
+        width: 100%;
+      }
+
+      progress::-webkit-progress-bar {
+        background-color: rgb(232, 232, 232);
+        border-radius: 2px;
+      }
+
+      progress::-webkit-progress-value {
+        background-color: rgb(167, 225, 251);
+        border-radius: 2px;
+      }
+
+      progress.space-low::-webkit-progress-value {
+        background-color: rgb(255, 176, 0);
+      }
+
+      progress.space-critically-low::-webkit-progress-value {
+        background-color: var(--google-red-500);
+      }
+
+      iron-icon {
+        --iron-icon-fill-color: rgb(255, 176, 0);
+        --iron-icon-height: 20px;
+        --iron-icon-width: 20px;
+      }
+
+      #criticallyLowMessage iron-icon {
+        --iron-icon-fill-color: var(--google-red-500);
+      }
+
+      .storage-size {
+        color: rgb(145, 145, 145);
+      }
+
+      .message-area {
+        background-color: var(--google-grey-100);
+        border-radius: 2px;
+        margin: 10px 0;
+        padding: 20px 20px 6px;
+        width: 100%;
+      }
+
+      .message-title {
+        align-items: center;
+        display: flex;
+        margin-bottom: 16px;
+      }
+
+      .message-title span {
+        font-size: 115%;
+        margin: 0 10px;
+      }
+
+      .message-area p {
+        color: rgb(90, 90, 90);
+      }
+
+      #barArea {
+        display: flex;
+        flex-direction: column;
+        margin: 12px 0 20px;
+        width: 100%;
+      }
+
+      #barLabels {
+        display: flex;
+      }
+
+      .bar-label {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .bar-label .vertical-line {
+        align-self: center;
+        background-color: rgb(223, 223, 223);
+        height: 10px;
+        width: 1px;
+      }
+
+      .bar-label span {
+        font-size: 85%;
+      }
+
+      .bar-label .wrapper {
+        text-align: center;
+        white-space: nowrap;
+      }
+
+      /* If the "Available" part in the ber is too small, the label "Available"
+       * and a label for its size can overstep the right edge of bar area.
+       * To prevent it, we invert the direction to put the text labels here.
+       * We restore the direction for inner span elements not to change how to
+       * render the text contents. */
+      .end-aligned .wrapper {
+        direction: rtl;
+      }
+
+      :host-context([dir=rtl]) .end-aligned .wrapper {
+        direction: ltr;
+      }
+
+      .end-aligned .wrapper span {
+        direction: initial;
+        unicode-bidi: embed;
+      }
+    </style>
+    <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>
+        <p>$i18n{storageSpaceLowMessageLine1}</p>

[michaelpg, 2016/10/03 23:44:45]

do we use <p> anywhere else? it has user-agent styles that we generally don't
conform to our styles.

[fukino, 2016/10/04 09:03:53]

I replaced these <p>s with <div>s, and set the same margin for those <div>s.

+        <p>$i18n{storageSpaceLowMessageLine2}</p>
+      </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>
+        <p>$i18n{storageSpaceCriticallyLowMessageLine1}</p>

[michaelpg, 2016/10/03 23:44:45]

same

[fukino, 2016/10/04 09:03:53]

Done.

+        <p>$i18n{storageSpaceCriticallyLowMessageLine2}</p>
+      </div>
+    </div>
+    <div class="settings-box first">
+      <div id="barArea">
+        <progress id="bar" class$="[[getBarClass_(sizeStat_.spaceState)]]"
+            value="[[sizeStat_.usedRatio]]"></progress>
+        <div id="barLabels">
+          <div id="inUseLabelArea" class="bar-label">
+            <div class="vertical-line"></div>
+            <div class="wrapper"><span>$i18n{storageItemInUse}</span></div>
+            <div class="wrapper">
+              <span class="storage-size">[[sizeStat_.usedSize]]</span>
+            </div>
+          </div>
+          <div id="availableLabelArea" class="bar-label end-aligned">
+            <div class="vertical-line"></div>
+            <div class="wrapper"><span>$i18n{storageItemAvailable}</span></div>
+            <div class="wrapper">
+              <span class="storage-size">[[sizeStat_.availableSize]]</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="settings-box" on-tap="onDownloadsTap_" actionable>
+      <div class="start">$i18n{storageItemDownloads}</div>
+      <div id="downloadsSize" class="storage-size">
+        $i18n{storageSizeComputing}
+      </div>
+    </div>
+    <div class="settings-box" on-tap="onDriveCacheTap_"
+         hidden$="[[!driveEnabled_]]" actionable>
+      <div class="start">$i18n{storageItemDriveCache}</div>
+      <div id="driveCacheSize" class="storage-size">
+        $i18n{storageSizeComputing}
+      </div>
+    </div>
+    <div class="settings-box" on-tap="onBrowsingDataTap_" actionable>
+      <div class="start">$i18n{storageItemBrowsingData}</div>
+      <div id="browsingDataSize" class="storage-size">
+        $i18n{storageSizeComputing}
+      </div>
+    </div>
+    <div class="settings-box" on-tap="onAndroidTap_"
+         hidden$="[[!androidEnabled_]]" actionable>
+      <div class="start">$i18n{storageItemAndroid}</div>
+      <div id="androidSize" class="storage-size">
+        $i18n{storageSizeComputing}
+      </div>
+    </div>
+    <div class="settings-box" on-tap="onOtherUsersTap_" actionable>
+      <div class="start">$i18n{storageItemOtherUsers}</div>
+      <div id="otherUsersSize" class="storage-size">
+        $i18n{storageSizeComputing}
+      </div>
+    </div>
+    <settings-drive-cache-dialog id="storageDriveCache">
+    </settings-drive-cache-dialog>
+  </template>
+  <script src="storage.js"></script>

[michaelpg, 2016/10/03 23:44:45]

use absolute paths: /device_page/storage.js

[fukino, 2016/10/04 09:03:53]

Done.

+</dom-module>