MD Settings: Storage: Use hidden attribute instead of dom-if binding to hide a row.

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..32a1b88a5871ba9e096080b9579015693a058b21 100644
--- a/chrome/browser/resources/settings/device_page/storage.html
+++ b/chrome/browser/resources/settings/device_page/storage.html
@@ -126,34 +126,36 @@
         unicode-bidi: embed;
       }
     </style>
-    <div class="settings-box first"
-        hidden$="[[!isSpaceLow_(sizeStat_.spaceState)]]">
-      <div class="message-area">
-        <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>
+    <template is="dom-if" if="[[isSpaceLow_(sizeStat_.spaceState)]]">
+      <div class="settings-box first">
+        <div class="message-area">

[stevenjb, 2017/02/09 20:21:00]

nit: These divs can probably be combined?

[fukino, 2017/02/09 20:42:57]

I think the dom tree for these two warnings can be unified, but can I do the
refactoring in another CL?

+          <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>
       </div>
-    </div>
-    <div class="settings-box first"
-        hidden$="[[!isSpaceCriticallyLow_(sizeStat_.spaceState)]]">
-      <div id="criticallyLowMessage" class="message-area">
-        <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>
+    </template>
+    <template is="dom-if" if="[[isSpaceCriticallyLow_(sizeStat_.spaceState)]]">
+      <div class="settings-box first">
+        <div id="criticallyLowMessage" class="message-area">

[stevenjb, 2017/02/09 20:21:00]

nit: These divs too?

+          <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>
       </div>
-    </div>
+    </template>
     <div class="settings-box first">
       <div id="barArea">
         <progress id="bar" class$="[[getBarClass_(sizeStat_.spaceState)]]"
@@ -183,14 +185,15 @@
       </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}
+    <template is="dom-if" if="[[driveEnabled_]]">
+      <div class="settings-box" on-tap="onDriveCacheTap_" actionable>
+        <div class="start">$i18n{storageItemDriveCache}</div>
+        <div id="driveCacheSize" class="storage-size">
+          $i18n{storageSizeComputing}
+        </div>
+        <button class="subpage-arrow" is="paper-icon-button-light"></button>
       </div>
-      <button class="subpage-arrow" is="paper-icon-button-light"></button>
-    </div>
+    </template>
     <div class="settings-box" on-tap="onBrowsingDataTap_" actionable>
       <div class="start">$i18n{storageItemBrowsingData}</div>
       <div id="browsingDataSize" class="storage-size">
@@ -198,14 +201,15 @@
       </div>
       <button class="subpage-arrow" is="paper-icon-button-light"></button>
     </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}
+    <template is="dom-if" if="[[androidEnabled_]]">
+      <div class="settings-box" on-tap="onAndroidTap_" actionable>
+        <div class="start">$i18n{storageItemAndroid}</div>
+        <div id="androidSize" class="storage-size">
+          $i18n{storageSizeComputing}
+        </div>
+        <button class="icon-external" is="paper-icon-button-light"></button>
       </div>
-      <button class="icon-external" is="paper-icon-button-light"></button>
-    </div>
+    </template>
     <template is="dom-if" if="[[!isGuest_]]">
       <div class="settings-box" on-tap="onOtherUsersTap_" actionable>
         <div class="start">$i18n{storageItemOtherUsers}</div>