oobe: Migrate supervision-transition-element to MultiStepBehavior

Bug: 1159430
Change-Id: I9923cc0a1590a26a2fa9988a6bbd5220d40fa9e5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2604911
Commit-Queue: Danila Kuzmin <dkuzmin@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#839586}

chrome/browser/resources/chromeos/login/oobe_supervision_transition.css

-/* Copyright 2018 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-paper-progress {
-  --paper-progress-active-color: rgb(66, 133, 244);
-  --paper-progress-container-color: rgb(206, 224, 252);
-  --paper-progress-secondary-color: rgb(66, 133, 244);
-  display: block;
-  height: 3px;
-  padding: 40px 0 0 0;
-  width: 100%;
-}
-
-.supervision-icon {
-  --iron-icon-height: 32px;
-  --iron-icon-width: 32px;
-}

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

@@ -9,11 +9,25 @@
 
 <dom-module id="supervision-transition-element">
   <template>
-    <style include="oobe-dialog-host"></style>
-    <link rel="stylesheet" href="oobe_supervision_transition.css">
+    <style include="oobe-dialog-host">
+      paper-progress {
+        --paper-progress-active-color: rgb(66, 133, 244); /*#4285F4*/
+        --paper-progress-container-color: rgb(206, 224, 252); /*#CEE0FC*/
+        --paper-progress-secondary-color: rgb(66, 133, 244); /*#4285F4*/
+        display: block;
+        height: 3px;
+        padding: 40px 0 0 0;
+        width: 100%;
+      }
+
+      .supervision-icon {
+        --iron-icon-height: 32px;
+        --iron-icon-width: 32px;
+      }
+    </style>
     <oobe-dialog id="supervisionTransitionDialog" role="alert"
         aria-label$="[[getDialogA11yTitle_(locale, isRemovingSupervision_)]]"
-        subtitle-key="supervisionTransitionIntroMessage">
+        subtitle-key="supervisionTransitionIntroMessage" for-step="progress">
       <iron-icon src="chrome://oobe/supervision_icon.png" slot="oobe-icon"
           class="supervision-icon" aria-hidden="true">
       </iron-icon>
@@ -34,13 +48,15 @@
         title-key="supervisionTransitionErrorTitle"
         subtitle-key="supervisionTransitionErrorMessage"
         aria-label$="[[i18nDynamic(locale,'supervisionTransitionErrorTitle')]]"
-        has-buttons hidden>
+        has-buttons for-step="error">
       <iron-icon src="chrome://oobe/supervision_icon.png" slot="oobe-icon"
           aria-hidden="true">
       </iron-icon>
       <div slot="bottom-buttons" class="layout horizontal end-justified">
         <oobe-text-button id="accept-button" on-click="onAcceptAndContinue_"
-            text-key="supervisionTransitionButton" inverse></oobe-text-button>
+            text-key="supervisionTransitionButton" class="focus-on-show"
+            inverse>
+        </oobe-text-button>
       </div>
     </oobe-dialog>
   </template>

chrome/browser/resources/chromeos/login/oobe_supervision_transition.js

@@ -7,10 +7,17 @@
  * transition screen.
  */
 
+(function() {
+
+const UIState = {
+  PROGRESS: 'progress',
+  ERROR: 'error',
+};
+
 Polymer({
   is: 'supervision-transition-element',
 
-  behaviors: [OobeI18nBehavior, OobeDialogHostBehavior, LoginScreenBehavior],
+  behaviors: [OobeI18nBehavior, LoginScreenBehavior, MultiStepBehavior],
 
   properties: {
     /**
@@ -19,6 +26,12 @@ Polymer({
     isRemovingSupervision_: Boolean,
   },
 
+  UI_STEPS: UIState,
+
+  defaultUIStep() {
+    return UIState.PROGRESS;
+  },
+
   ready() {
     this.initializeLoginScreen('SupervisionTransitionScreen', {
       resetAllowed: false,
@@ -48,10 +61,7 @@ Polymer({
 
   /** @private */
   showSupervisionTransitionFailedScreen_() {
-    this.$.supervisionTransitionDialog.hidden = true;
-    this.$.supervisionTransitionErrorDialog.hidden = false;
-    this.$.supervisionTransitionErrorDialog.show();
-    this.$.supervisionTransitionErrorDialog.focus();
+    this.setUIStep(UIState.ERROR);
   },
 
   /**
@@ -63,3 +73,4 @@ Polymer({
     chrome.send('finishSupervisionTransition');
   },
 });
+})();