Port storage manager to MD settings.

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

+<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">
+<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_page/settings_subpage.html">

[michaelpg, 2016/10/01 01:41:05]

unused

[fukino, 2016/10/03 18:40:41]

Done.

+<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: rgb(219, 68, 55);
+      }
+
+      iron-icon {
+        --iron-icon-fill-color: rgb(255, 176, 0);
+        --iron-icon-height: 20px;
+        --iron-icon-width: 20px;
+      }
+
+      #critically-low-message iron-icon {
+        --iron-icon-fill-color: rgb(219, 68, 55);
+      }
+
+      .storage-size {
+        color: rgb(145, 145, 145);
+      }
+
+      .message-area {
+        background-color: rgb(245, 245, 245);

[michaelpg, 2016/10/01 01:41:05]

var(--google-grey-100)

(same for any other colors that are defined in paper-styles or
settings_vars_css.html)

[fukino, 2016/10/03 18:40:41]

Thanks! It turned out that --google-red-500 can also be used, so I used it too.
For other colors, I couldn't find any predefined ones. I'll ask the designer if
we can share more colors.

+        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);
+      }
+
+      #bar-area {
+        display: flex;
+        flex-direction: column;
+        margin: 12px 0 20px;
+        width: 100%;
+      }
+
+      #bar-labels {
+        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;

[michaelpg, 2016/10/01 01:41:04]

can this not be done with flex display? e.g., justify-content: flex-end

[fukino, 2016/10/03 18:40:41]

The tricky part is that the label "Available" should be centered if the bar area
is big enough, and it should be overflow to the left if the bar area is too
small.
I tried several ways, but I could not implement the behavior only by the
flexbox.

+      }
+
+      :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_(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>
+        <p>$i18n{storageSpaceLowMessageLine2}</p>
+      </div>
+    </div>
+    <div class="settings-box first"
+        hidden$="[[!isSpaceCriticallyLow_(spaceState_)]]">
+      <div id="critically-low-message" class="message-area">

[michaelpg, 2016/10/01 01:41:04]

nit throughout: use camelCase IDs for consistency w/ rest of settings/polymer

class names stay hyphen-separated though

[fukino, 2016/10/03 18:40:41]

Done. Used camelCase for critically-low-message, bar-area, and bar-labels.

+        <div class="message-title">
+          <iron-icon icon="cr:warning"></iron-icon>
+          <span>$i18n{storageSpaceCriticallyLowMessageTitle}</span>
+        </div>
+        <p>$i18n{storageSpaceCriticallyLowMessageLine1}</p>
+        <p>$i18n{storageSpaceCriticallyLowMessageLine2}</p>
+      </div>
+    </div>
+    <div class="settings-box first">
+      <div id="bar-area">
+        <progress id="bar" class$="[[getBarClass_(spaceState_)]]"
+            value="[[usedRatio_]]"></progress>
+        <div id="bar-labels">
+          <div id="inUseLabelArea" class="bar-label">
+            <div class="vertical-line"></div>
+            <div class="wrapper"><span>$i18n{storageItemInUse}</span></div>
+            <div class="wrapper">
+              <span id="inUseSize" class="storage-size"></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 id="availableSize" class="storage-size"></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>
+</dom-module>