[OOBE] Migrate Encryption Migration screen to use hidden attribute

Change-Id: I5c8ce837ae685c86dc6383790dc6cf1e384def1d
Bug: 1058022
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2110850Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#753181}

chrome/browser/resources/chromeos/login/encryption_migration.html

@@ -13,30 +13,26 @@
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="encryption_migration.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
-    <template is="dom-if" if="[[isInitial_(uiState)]]">
-      <oobe-dialog tabindex="0" has-buttons></oobe-dialog>
-    </template>
-    <template is="dom-if" if="[[isMigratingMinimal_(uiState)]]">
-      <oobe-dialog id="minimal-migration-dialog" tabindex="0" has-buttons>
+    <oobe-dialog tabindex="0" has-buttons hidden="[[!isInitial_(uiState)]]">
+    </oobe-dialog>
+    <oobe-dialog id="minimal-migration-dialog" tabindex="0" has-buttons
+        hidden="[[!isMigratingMinimal_(uiState)]]">
       <div slot="footer" class="layout vertical">
         <throbber-notice text-key="gaiaLoading"></throbber-notice>
       </div>
     </oobe-dialog>
-    </template>
-    <template is="dom-if" if="[[isReady_(uiState)]]">
     <oobe-dialog tabindex="0" id="ready-dialog" has-buttons
-          title-key="migrationReadyTitle"
+        title-key="migrationReadyTitle" hidden="[[!isReady_(uiState)]]"
         subtitle-key="migrationReadyDescription">
       <iron-icon slot="oobe-icon" class="warning-icon"></iron-icon>
-        <template is="dom-if" if="[[isEnoughBattery]]">
-          <div slot="footer" class="layout vertical center center-justified">
+      <div slot="footer" class="layout vertical center center-justified"
+          hidden="[[!isEnoughBattery]]">
         <img srcset="images/security_update_1x.png 1x,
                      images/security_update_2x.png 2x"
              class="oobe-illustration">
       </div>
-        </template>
-        <template is="dom-if" if="[[!isEnoughBattery]]">
-          <div slot="footer" class="layout vertical" aria-live="polite">
+      <div slot="footer" class="layout vertical" aria-live="polite"
+          hidden="[[isEnoughBattery]]">
         <div class="warning">
           [[computeBatteryWarningLabel_(locale, batteryPercent)]]
         </div>
@@ -51,10 +47,8 @@
                                                necessaryBatteryPercent)]]
         </div>
       </div>
-        </template>
-        </div>
-        <template is="dom-if" if="[[!isResuming]]">
-          <div slot="bottom-buttons" class="flex layout horizontal">
+      <div slot="bottom-buttons" class="flex layout horizontal"
+          hidden="[[isResuming]]">
         <div class="flex"></div>
         <oobe-text-button border id="skip-button" on-tap="onSkip_"
             hidden="[[isSkipHidden_()]]" text-key="migrationButtonSkip">
@@ -63,11 +57,9 @@
             disabled="[[isUpdateDisabled_(isEnoughBattery, isSkipped)]]"
             text-key="migrationButtonUpdate"></oobe-text-button>
       </div>
-        </template>
     </oobe-dialog>
-    </template>
-    <template is="dom-if" if="[[isMigrating_(uiState)]]">
     <oobe-dialog id="migrating-dialog" tabindex="0"
+        hidden="[[!isMigrating_(uiState)]]"
         title-key="migrationMigratingTitle"
         subtitle-key="migrationMigratingDescription">
       <iron-icon slot="oobe-icon" class="chrome-logo"></iron-icon>
@@ -83,9 +75,8 @@
         </template>
       </div>
     </oobe-dialog>
-    </template>
-    <template is="dom-if" if="[[isMigrationFailed_(uiState)]]">
     <oobe-dialog id="error-dialog" tabindex="0" has-buttons
+        hidden="[[!isMigrationFailed_(uiState)]]"
         title-key="migrationFailedTitle"
         subtitle-key="migrationFailedSubtitle">
       <iron-icon icon="cr:warning" slot="oobe-icon" class="warning">
@@ -104,9 +95,8 @@
         </oobe-text-button>
       </div>
     </oobe-dialog>
-    </template>
-    <template is="dom-if" if="[[isNotEnoughSpace_(uiState)]]">
     <oobe-dialog id="insufficient-space-dialog" tabindex="0" has-buttons
+        hidden="[[!isNotEnoughSpace_(uiState)]]"
         title-key="migrationReadyTitle"
         subtitle-key="migrationReadyDescription">
       <iron-icon slot="oobe-icon" class="chrome-logo"></iron-icon>
@@ -124,18 +114,16 @@
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
         <div class="flex"></div>
-          <template is="dom-if" if="[[!isResuming]]">
         <oobe-text-button inverse id="insufficient-space-skip-button"
+            hidden="[[isResuming]]"
             on-tap="onSkip_" text-key="migrationButtonContinue">
         </oobe-text-button>
-          </template>
-          <template is="dom-if" if="[[isResuming]]">
         <oobe-text-button inverse id="insufficient-space-restart-button"
+            hidden="[[!isResuming]]"
             on-tap="onRestartOnLowStorage_"
-                text-key="migrationButtonRestart"></oobe-text-button>
-          </template>
+            text-key="migrationButtonRestart">
+        </oobe-text-button>
       </div>
     </oobe-dialog>
   </template>
-  </template>
 </dom-module>