MD settings: Storage: Add DELETE button for deleting Drive offline files.

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 06f4a9b6a128ac730e66dace8c5e392db7f71ee0..42525ea8d5f2b8d74430062fa8d77fa0090198d0 100644
--- a/chrome/browser/resources/settings/device_page/storage.html
+++ b/chrome/browser/resources/settings/device_page/storage.html
@@ -125,6 +125,18 @@
         direction: initial;
         unicode-bidi: embed;
       }
+
+      button[is='paper-icon-button-light'].delete {

[fukino, 2017/02/08 20:20:51]

As the delete icon is used only in Chrome OS, I didn't add this to
shared_style_css.html.

+        background-image: url(chrome://resources/images/delete.svg);
+      }
+
+      .delete {
+        display: none;
+      }
+
+      [actionable] .delete {
+        display: block;
+      }
     </style>
     <div class="settings-box first"
         hidden$="[[!isSpaceLow_(sizeStat_.spaceState)]]">
@@ -176,41 +188,51 @@
         </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 class="settings-box two-line" on-tap="onDownloadsTap_" actionable>
+      <div class="start">
+        $i18n{storageItemDownloads}
+        <div id="downloadsSize" class="secondary">
+          $i18n{storageSizeComputing}
+        </div>
       </div>
       <button class="icon-external" is="paper-icon-button-light"></button>
     </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 class="settings-box two-line" on-tap="onDriveCacheTap_"
+        hidden$="[[!driveEnabled_]]" actionable$="[[hasDriveCache_]]" >

[Dan Beam, 2017/02/13 19:47:55]

maybe worth changing from

hidden$="[[!driveEnabled_]]"

to

<template is="dom-if" if="[[driveEnabled_]]">

[fukino, 2017/02/13 19:50:52]

Sorry! It's already templated in ToT. I'll rebase this CL.

[fukino, 2017/02/14 00:58:38]

Rebased. (Done)

+      <div class="start">
+        $i18n{storageItemDriveCache}
+        <div id="driveCacheSize" class="secondary">
+          $i18n{storageSizeComputing}
+        </div>
       </div>
-      <button class="subpage-arrow" is="paper-icon-button-light"></button>
+      <button class="delete" is="paper-icon-button-light"></button>

[Dan Beam, 2017/02/13 19:47:55]

can we just use

<link rel="import" href="chrome://resources/cr_elements/icons.html">

<button is="paper-icon-button-light">
  <iron-icon icon="cr:delete"></iron-icon>
</button>

instead of adding a copy of this?

[fukino, 2017/02/14 00:58:38]

<iron-icon icon="cr:delete"> worked. Thanks!
Done.

     </div>
-    <div class="settings-box" on-tap="onBrowsingDataTap_" actionable>
-      <div class="start">$i18n{storageItemBrowsingData}</div>
-      <div id="browsingDataSize" class="storage-size">
-        $i18n{storageSizeComputing}
+    <div class="settings-box two-line" on-tap="onBrowsingDataTap_" actionable>
+      <div class="start">
+        $i18n{storageItemBrowsingData}
+        <div id="browsingDataSize" class="secondary">
+          $i18n{storageSizeComputing}
+        </div>
       </div>
       <button class="subpage-arrow" is="paper-icon-button-light"></button>
     </div>
-    <div class="settings-box" on-tap="onAndroidTap_"
+    <div class="settings-box two-line" on-tap="onAndroidTap_"
          hidden$="[[!androidEnabled_]]" actionable>
-      <div class="start">$i18n{storageItemAndroid}</div>
-      <div id="androidSize" class="storage-size">
-        $i18n{storageSizeComputing}
+      <div class="start">
+        $i18n{storageItemAndroid}
+        <div id="androidSize" class="secondary">
+          $i18n{storageSizeComputing}
+        </div>
       </div>
       <button class="icon-external" is="paper-icon-button-light"></button>
     </div>
     <template is="dom-if" if="[[!isGuest_]]">
-      <div class="settings-box" on-tap="onOtherUsersTap_" actionable>
-        <div class="start">$i18n{storageItemOtherUsers}</div>
-        <div id="otherUsersSize" class="storage-size">
-          $i18n{storageSizeComputing}
+      <div class="settings-box two-line" on-tap="onOtherUsersTap_" actionable>
+        <div class="start">
+          $i18n{storageItemOtherUsers}
+          <div id="otherUsersSize" class="secondary">
+            $i18n{storageSizeComputing}
+          </div>
         </div>
         <button class="subpage-arrow" is="paper-icon-button-light"></button>
       </div>