Migrate OOBE Enrollment to polymer

Get rid of enterprise-card / enterprise-header, switch existing screens
to oobe-dialog.

This cl simplify existing code before migrating enrollment flow to polymer
completely.

Bug: 811556
Change-Id: I5035707ba57c4281a293a616225a8171a8e552dc
Reviewed-on: https://chromium-review.googlesource.com/1225698
Commit-Queue: Denis Kuznetsov <antrim@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#591343}

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

@@ -21,13 +21,12 @@
 <include src="oobe_buttons.html">
 <include src="oobe_change_picture.html">
 <include src="oobe_dialog.html">
+<include src="oobe_enrollment.html">
 <include src="oobe_reset.html">
 <include src="oobe_reset_confirmation_overlay.html">
 <include src="oobe_voice_interaction_value_prop.html">
 <include src="oobe_wait_for_container_ready.html">
 <include src="encryption_migration.html">
-<include src="enterprise_card.html">
-<include src="enterprise_header.html">
 <include src="enrollment_license_card.html">
 <include src="sync_consent.html">
 <include src="fingerprint_setup.html">

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

@@ -31,8 +31,6 @@
 // <include src="encryption_migration.js">
 // <include src="oobe_voice_interaction_value_prop.js">
 // <include src="oobe_wait_for_container_ready.js">
-// <include src="enterprise_card.js">
-// <include src="enterprise_header.js">
 // <include src="enrollment_license_card.js">
 // <include src="sync_consent.js">
 // <include src="fingerprint_setup.js">

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

@@ -20,6 +20,7 @@
 <include src="oobe_buttons.html">
 <include src="oobe_change_picture.html">
 <include src="oobe_dialog.html">
+<include src="oobe_enrollment.html">
 <include src="oobe_eula.html">
 <include src="oobe_hid_detection.html">
 <include src="oobe_reset.html">
@@ -35,8 +36,6 @@
 <include src="offline_ad_login.html">
 <include src="active_directory_password_change.html">
 <include src="arc_terms_of_service.html">
-<include src="enterprise_card.html">
-<include src="enterprise_header.html">
 <include src="enrollment_license_card.html">
 <include src="sync_consent.html">
 <include src="fingerprint_setup.html">

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

@@ -45,8 +45,6 @@
 // <include src="arc_terms_of_service.js">
 // <include src="oobe_voice_interaction_value_prop.js">
 // <include src="oobe_wait_for_container_ready.js">
-// <include src="enterprise_card.js">
-// <include src="enterprise_header.js">
 // <include src="enrollment_license_card.js">
 // <include src="sync_consent.js">
 // <include src="fingerprint_setup.js">

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

@@ -4,10 +4,10 @@
 
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://oobe/custom_elements.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
-
 <!--
   UI for the Enrollment license type selection.
 
@@ -25,22 +25,20 @@
 <dom-module id="enrollment-license-card">
   <template>
     <link rel="stylesheet" href="gaia_input_form.css">
-    <link rel="stylesheet" href="enterprise_card.css">
-    <link rel="stylesheet" href="enterprise_card_footer.css">
     <link rel="stylesheet" href="enrollment_license_card.css">
+    <style
+        include="shared-style iron-flex iron-flex-alignment iron-positioning">
+    </style>
 
-    <enterprise-card id="license-selection-prompt-card" class="fit">
-      <enterprise-header slot="header"
-                         i18n-values="header-title:oauthEnrollScreenTitle">
-        <hd-iron-icon slot="enterprise-icon"
-                      icon1x="enterprise-header-32:briefcase"
-                      icon2x="enterprise-header-64:briefcase"></hd-iron-icon>
-        <div slot="header-comment" class="header-comment">
+    <oobe-dialog id="license-selection-prompt-card" has-buttons>
+      <hd-iron-icon slot="oobe-icon"
+                    icon1x="oobe-enrollment-32:briefcase"
+                    icon2x="oobe-enrollment-64:briefcase"></hd-iron-icon>
+      <h1 slot="title" i18n-content="oauthEnrollScreenTitle"></h1>
+      <div slot="subtitle">
         [[i18nDynamic(locale, 'licenseSelectionCardExplanation')]]
       </div>
-      </enterprise-header>
-      <div slot="content" class="content flex vertical layout justified">
-        <div>
+      <div slot="footer" class="flex layout vertical justified">
         <paper-radio-group selected="{{selected}}"
                            selectable="cr-radio-button">
           <template is="dom-repeat" items="[[licenses]]"
@@ -53,15 +51,10 @@
           </template>
         </paper-radio-group>
       </div>
+      <div slot="bottom-buttons" class="flex layout horizontal end-justified">
+        <oobe-next-button disabled="[[disabled]]" on-tap="buttonClicked_"
+            class="focus-on-show"></oobe-next-button>
       </div>
-      <div slot="footer" class="footer">
-        <div class="horizontal-reverse justified layout center">
-          <oobe-next-button disabled="[[disabled]]"
-                            on-tap="buttonClicked_"
-                            id="submitButton" class="self-start">
-          </oobe-next-button>
-        </div>
-      </div>
-    </enterprise-card>
+    </oobe-dialog>
   </template>
 </dom-module>

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

@@ -10,7 +10,7 @@
 Polymer({
   is: 'enrollment-license-card',
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, OobeDialogHostBehavior],
 
   properties: {
     /**
@@ -49,8 +49,12 @@ Polymer({
     },
   },
 
-  get submitButton() {
-    return this.$.submitButton;
+  show: function() {
+    this.behaviors.forEach((behavior) => {
+      if (behavior.onBeforeShow)
+        behavior.onBeforeShow.call(this);
+    });
+    this.$['license-selection-prompt-card'].show();
   },
 
   buttonClicked_: function() {

chrome/browser/resources/chromeos/login/enterprise_card.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. */
-
-:host {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  position: relative;
-  width: 100%;
-}
-
-.enterprise-header {
-  background-color: white;
-}
-
-.enterprise-footer {
-  background-color: white;
-}
-
-:host(:not(.disabled)) :host(:not(.no-footer)) {
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17);
-  /* z-index is needed to make shadow visible. */
-  z-index: 1;
-}
-
-.header-container {
-  padding: 64px 64px 0 64px;
-}
-
-.header-comment {
-  color: #333;
-  font-size: 13px;
-  line-height: 20px;
-  min-height: 40px;
-}
-
-.content-container {
-  padding: 0 64px 0 64px;
-  z-index: 1;
-}
-
-.footer-container {
-  height: 44px;
-  padding: 18px;
-}
-
-.overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  display: none;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 100%;
-  z-index: 11;
-}
-
-paper-progress#progress-bar {
-  --paper-progress-active-color: var(--google-blue-500);
-  --paper-progress-container-color: var(--google-blue-100);
-  display: none;
-  height: 3px;
-  padding-top: 16px;
-  width: 100%;
-}
-
-:host(.full-disabled) #full-overlay,
-:host(.disabled) #actionable-overlay,
-:host(.disabled) #progress-bar,
-:host(.with-progress) #progress-bar {
-  display: block;
-}

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

-<!-- 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. -->
-
-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
-
-<!--
-  Simple Gaia v2 looking card which should be used for local OOBE UI elements
-  that look like Gaia v2 card (large white dialog with buttons in footer).
-  This is usually used in Enterprise Enrollment flow.
-
-  Example:
-
-    <enterprise-card>
-      <enterprise-header class="header" icon="enterprise"
-      i18n-values="header-title:...;
-                   header-comment:...">
-      </enterprise-header >
-      <div class="content">
-        ...
-      </div
-      <div class="footer">
-        <oobe-next-button class="autofocus main-button"> /
-        <gaia-button> / <oobe-back-button>
-      </div>
-    </enterprise-card>
-
-  Add class |header| to all which you want to go inside header.  Similar
-  with classes |content| and |footer|.
--->
-<dom-module id="enterprise-card">
-  <template>
-    <link rel="stylesheet" href="enterprise_card.css">
-    <link rel="stylesheet" href="oobe_flex_layout.css">
-    <div class="enterprise-header vertical layout justified layout-start">
-      <div class="header-container flex vertical layout relative">
-        <slot name="header"></slot>
-      </div>
-      <paper-progress class="self-end" id="progress-bar" indeterminate>
-      </paper-progress>
-    </div>
-    <div class="flex vertical layout">
-      <div class="content-container flex vertical layout">
-        <slot name="content"></slot>
-      </div>
-      <div class="footer-container horizontal layout center"
-           hidden="[[noFooter]]">
-        <slot name="footer"></slot>
-      </div>
-      <div id="actionable-overlay" class="overlay"></div>
-    </div>
-    <div id="full-overlay" class="overlay"></div>
-  </template>
-</dom-module>

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

-// Copyright 2015 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.
-
-Polymer({
-  is: 'enterprise-card',
-
-  properties: {
-    /**
-     * Control visibility of the footer container.
-     */
-    noFooter: {
-      type: Boolean,
-      value: false,
-    },
-  },
-
-  /** @override */
-  focus: function() {
-    if (this.autofocus) {
-      this.autofocus.focus();
-    }
-  },
-
-  /** @override */
-  ready: function() {
-    this.autofocus = this.querySelector('.autofocus');
-  },
-});

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

-/* Copyright 2015 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. */
-
-:host {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.header-title {
-  color: #333;
-  display: flex;
-  flex-direction: column-reverse;
-  font-size: 28px;
-  height: 64px;
-}

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

-// Copyright 2015 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.
-
-Polymer({
-  is: 'enterprise-header',
-
-  behaviors: [I18nBehavior],
-
-  properties: {
-    /**
-     * Title of the header
-     * @type {String}
-     */
-    headerTitle: {type: String, value: ''},
-  },
-});

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

@@ -47,6 +47,13 @@
                + var(--subtitle-font-distance-to-baseline)) 0 0 0;
 }
 
+#oobe-progress ::slotted(paper-progress) {
+  --paper-progress-active-color: var(--google-blue-500);
+  --paper-progress-container-color: var(--google-blue-100);
+  height: 3px;
+  width: 100%;
+}
+
 #footer-container {
   padding: 0 64px;
 }

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

@@ -67,6 +67,9 @@
       <div id="oobe-subtitle" class="layout vertical">
         <slot name="subtitle"></slot>
       </div>
+      <div id="oobe-progress" class="layout vertical">
+        <slot name="progress"></slot>
+      </div>
     </div>
     <div id="footer-container" noFooterPadding$="[[noFooterPadding]]"
         class="flex layout vertical">

chrome/browser/resources/chromeos/login/enterprise_header.html → chrome/browser/resources/chromeos/login/oobe_enrollment.html

-<!-- Copyright 2015 The Chromium Authors. All rights reserved.
+<!-- 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. -->
 
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
 
-<!-- Icons to use in enterprise-header -->
+<!-- Icons to use during enterprise enrollment -->
 
-<iron-iconset-svg name="enterprise-header-32" size="32">
+<iron-iconset-svg name="oobe-enrollment-32" size="32">
   <svg>
     <defs>
       <g id="briefcase" fill="none" fill-rule="evenodd">
@@ -20,7 +20,7 @@
   </svg>
 </iron-iconset-svg>
 
-<iron-iconset-svg name="enterprise-header-64" size="64">
+<iron-iconset-svg name="oobe-enrollment-64" size="64">
   <svg>
     <defs>
       <g id="briefcase" fill="none" fill-rule="evenodd">
@@ -32,24 +32,3 @@
     </defs>
   </svg>
 </iron-iconset-svg>
-
-
-<!--
-  Header for enterprise-card.
--->
-<dom-module id="enterprise-header">
-  <link rel="stylesheet" href="enterprise_header.css">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-
-  <template>
-    <div class="flex vertical layout start start-justified">
-        <div id="icon-container" class="vertical layout center">
-          <slot name="enterprise-icon"></slot>
-        </div>
-      <div class="header-title" hidden$="{{!headerTitle}}">
-        <span>[[headerTitle]]</span>
-      </div>
-      <slot name="header-comment"></slot>
-    </div>
-  </template>
-</dom-module>

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

@@ -127,3 +127,4 @@
 #oauth-enrollment.saml #oauth-enroll-navigation {
   color: rgba(0, 0, 0, .54);
 }
+

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

@@ -5,13 +5,11 @@
 <link rel="import" href="chrome://oobe/custom_elements.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="stylesheet" href="enterprise_card.css">
 <link rel="stylesheet" href="gaia_card_parameters.css">
 
 <div id="oauth-enrollment" class="step no-logo hidden" hidden>
   <div id="oauth-enroll-step-contents">
     <link rel="stylesheet" href="oobe_flex_layout.css">
-    <link rel="stylesheet" href="enterprise_card_footer.css">
     <div id="oauth-enroll-step-signin">
       <oobe-dialog class="gaia-dialog" role="dialog" id="enrollment-gaia-dialog"
                    has-buttons no-header no-footer-padding>
@@ -21,26 +19,24 @@
         </div>
         <div slot="bottom-buttons" class="flex layout horizontal center">
           <oobe-back-button id="oobe-signin-back-button"></oobe-back-button>
-          <div class="flex">
-          </div>
         </div>
       </oobe-dialog>
     </div>
     <div id="oauth-enroll-step-working">
-        <enterprise-card id="oauth-enroll-working"
-            class="with-progress" no-footer>
-            <enterprise-header slot="header"
-                i18n-values="header-title:oauthEnrollScreenTitle;">
-              <hd-iron-icon slot="enterprise-icon"
-                  icon1x="enterprise-header-32:briefcase"
-                  icon2x="enterprise-header-64:briefcase"></hd-iron-icon>
-            </enterprise-header >
-            <div slot="content" class="layout vertical start">
+        <oobe-dialog id="oauth-enroll-working">
+          <hd-iron-icon slot="oobe-icon"
+                        icon1x="oobe-enrollment-32:briefcase"
+                        icon2x="oobe-enrollment-64:briefcase"></hd-iron-icon>
+          <h1 slot="title" i18n-content="oauthEnrollScreenTitle"></h1>
+          <paper-progress slot="progress" indeterminate>
+          </paper-progress>
+
+          <div slot="footer" class="flex layout vertical">
             <div class="oauth-enroll-step-message">
               <span i18n-content="oauthEnrollWorking"></span>
             </div>
           </div>
-        </enterprise-card>
+        </oobe-dialog>
     </div>
     <div id="oauth-enroll-step-license">
       <enrollment-license-card id="oauth-enroll-license-ui"
@@ -60,66 +56,56 @@
       </notification-card>
     </div>
     <div id="oauth-enroll-step-success" role="alert">
-      <enterprise-card id="oauth-enroll-success-card">
-        <enterprise-header slot="header"
-            i18n-values="header-title:oauthEnrollSuccessTitle">
-          <hd-iron-icon slot="enterprise-icon"
-              icon1x="enterprise-header-32:briefcase"
-              icon2x="enterprise-header-64:briefcase"></hd-iron-icon>
-          <div slot="header-comment" class="header-comment"
-               i18n-content="oauthEnrollSuccess">
-          </div>
-        </enterprise-header >
-        <div slot="content" class="layout vertical center">
+      <oobe-dialog id="oauth-enroll-success-card" has-buttons>
+        <hd-iron-icon slot="oobe-icon"
+                      icon1x="oobe-enrollment-32:briefcase"
+                      icon2x="oobe-enrollment-64:briefcase"></hd-iron-icon>
+        <h1 slot="title" i18n-content="oauthEnrollSuccessTitle"></h1>
+        <div slot="subtitle" i18n-content="oauthEnrollSuccess"></div>
+        <div slot="footer" class="flex layout vertical center end-justified">
           <img srcset="images/enrollment_success_illustration_1x.png 1x,
                   images/enrollment_success_illustration_2x.png 2x"
                i18n-values="alt:enrollmentSuccessIllustrationTitle">
         </div>
-        <div slot="footer"
-            class="footer horizontal-reverse justified layout center">
-          <gaia-button i18n-content="oauthEnrollDone"
-              id="enroll-success-done-button" class="autofocus"></gaia-button>
+        <div slot="bottom-buttons" class="layout horizontal end-justified">
+          <oobe-text-button inverse id="enroll-success-done-button"
+              class="focus-on-show">
+            <div i18n-content="oauthEnrollDone"></div>
+          </oobe-text-button>
         </div>
-      </enterprise-card>
+      </oobe-dialog>
     </div>
       <div id="oauth-enroll-step-abe-success" role="alert">
-        <enterprise-card id="oauth-enroll-abe-success-card">
-            <enterprise-header slot="header"
-               i18n-values="header-title:oauthEnrollSuccessTitle">
-              <hd-iron-icon slot="enterprise-icon"
-                  icon1x="enterprise-header-32:briefcase"
-                  icon2x="enterprise-header-64:briefcase"></hd-iron-icon>
-              <div slot="header-comment" class="header-comment"
-                   id="oauth-enroll-abe-success-comment-no-domain"
+        <oobe-dialog id="oauth-enroll-abe-success-card" has-buttons>
+          <hd-iron-icon slot="oobe-icon"
+                        icon1x="oobe-enrollment-32:briefcase"
+                        icon2x="oobe-enrollment-64:briefcase"></hd-iron-icon>
+          <h1 slot="title" i18n-content="oauthEnrollSuccessTitle"></h1>
+          <div slot="subtitle" id="oauth-enroll-abe-success-comment-no-domain"
                i18n-content="oauthEnrollSuccess"></div>
-              <div slot="header-comment" class="header-comment"
-                     id="oauth-enroll-abe-success-comment-domain" hidden></div>
-            </enterprise-header >
-            <div slot="content" class="layout vertical center">
+          <div slot="subtitle" id="oauth-enroll-abe-success-comment-domain"
+               hidden></div>
+          <div slot="footer" class="flex layout vertical center end-justified">
             <img srcset="images/enrollment_success_illustration_1x.png 1x,
                   images/enrollment_success_illustration_2x.png 2x"
                  i18n-values="alt:enrollmentSuccessIllustrationTitle">
           </div>
-          <div slot="footer"
-              class="footer horizontal-reverse justified layout center">
-            <gaia-button i18n-content="oauthEnrollDone"
-                id="enroll-success-abe-done-button"
-                class="autofocus"></gaia-button>
+          <div slot="bottom-buttons" class="layout horizontal end-justified">
+            <oobe-text-button inverse id="enroll-success-abe-done-button"
+                class="focus-on-show">
+              <div i18n-content="oauthEnrollDone"></div>
+            </oobe-text-button>
           </div>
-        </enterprise-card>
+        </oobe-dialog>
     </div>
     <div id="oauth-enroll-step-attribute-prompt">
-        <enterprise-card id="oauth-enroll-attribute-prompt-card">
-            <enterprise-header slot="header"
-               i18n-values="header-title:oauthEnrollScreenTitle">
-              <hd-iron-icon slot="enterprise-icon"
-                  icon1x="enterprise-header-32:briefcase"
-                  icon2x="enterprise-header-64:briefcase"></hd-iron-icon>
-              <div slot="header-comment" class="header-comment"
-                   i18n-content="oauthEnrollDeviceInformation">
-              </div>
-            </enterprise-header >
-            <div slot="content" class="layout vertical start">
+      <oobe-dialog id="oauth-enroll-attribute-prompt-card" has-buttons>
+        <hd-iron-icon slot="oobe-icon"
+                      icon1x="oobe-enrollment-32:briefcase"
+                      icon2x="oobe-enrollment-64:briefcase"></hd-iron-icon>
+        <h1 slot="title" i18n-content="oauthEnrollScreenTitle"></h1>
+        <div slot="subtitle" i18n-content="oauthEnrollDeviceInformation"></div>
+        <div slot="footer" class="layout vertical start">
           <div class="oauth-enroll-step-message">
                     <span id="oauth-enroll-attribute-prompt-message"
                           i18n-content="oauthEnrollAttributeExplanation"></span>
@@ -128,7 +114,7 @@
                i18n-content="oauthEnrollExplainAttributeLink"></a>
           </div>
           <gaia-input id="oauth-enroll-asset-id" type="text"
-                    class="autofocus">
+                      class="focus-on-show">
             <div slot="label" i18n-content="oauthEnrollAssetIdLabel">
             </div>
           </gaia-input>
@@ -137,14 +123,15 @@
             </div>
           </gaia-input>
         </div>
-            <div slot="footer" class="footer">
+        <div slot="bottom-buttons" class="layout horizontal end-justified">
+          <oobe-text-button id="enroll-attributes-skip-button">
+            <div i18n-content="oauthEnrollSkip"></div>
+          </oobe-text-button>
+          <div class="flex"></div>
           <oobe-next-button
               id="enroll-attributes-submit-button"></oobe-next-button>
-                <oobe-text-button
-                    id="enroll-attributes-skip-button"
-                    i18n-content="oauthEnrollSkip"></oobe-text-button>
         </div>
-        </enterprise-card>
+      </oobe-dialog>
     </div>
     <div id="oauth-enroll-step-attribute-prompt-error">
       <notification-card id="oauth-enroll-attribute-prompt-error-card"

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

@@ -387,15 +387,15 @@ login.createScreen('OAuthEnrollmentScreen', 'oauth-enrollment', function() {
       if (step == STEP_SIGNIN) {
         $('oauth-enroll-auth-view').focus();
       } else if (step == STEP_LICENSE_TYPE) {
-        $('oauth-enroll-license-ui').submitButton.focus();
+        $('oauth-enroll-license-ui').show();
       } else if (step == STEP_ERROR) {
         $('oauth-enroll-error-card').submitButton.focus();
       } else if (step == STEP_SUCCESS) {
-        $('oauth-enroll-success-card').focus();
+        $('oauth-enroll-success-card').show();
       } else if (step == STEP_ABE_SUCCESS) {
-        $('oauth-enroll-abe-success-card').focus();
+        $('oauth-enroll-abe-success-card').show();
       } else if (step == STEP_ATTRIBUTE_PROMPT) {
-        $('oauth-enroll-step-attribute-prompt').focus();
+        $('oauth-enroll-attribute-prompt-card').show();
       } else if (step == STEP_ATTRIBUTE_PROMPT_ERROR) {
         $('oauth-enroll-attribute-prompt-error-card').submitButton.focus();
       } else if (step == STEP_ACTIVE_DIRECTORY_JOIN_ERROR) {

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

@@ -26,11 +26,3 @@
 .update-illustration {
   padding-bottom: 82px;
 }
-
-paper-progress {
-  --paper-progress-active-color: var(--google-blue-500);
-  --paper-progress-secondary-color: var(--google-blue-100);
-  bottom: 0;
-  height: 3px;
-  width: 100%;
-}

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

@@ -33,10 +33,10 @@
       <div slot="subtitle" class="update-subtitle" id="checkingForUpdateCancelHint"
           i18n-content="cancelUpdateHint" hidden="[[!cancelAllowed]]">
       </div>
-      <div slot="footer" class="flex layout vertical">
-        <paper-progress id="checking-progress" hidden="[[!checkingForUpdate]]">
+      <paper-progress slot="progress" id="checking-progress"
+          hidden="[[!checkingForUpdate]]">
       </paper-progress>
-        <div class="flex"></div>
+      <div slot="footer" class="flex layout vertical end-justified">
         <img class="update-illustration"
             srcset="images/1x/updating_1x.png 1x,
                     images/2x/updating_2x.png 2x">
@@ -56,10 +56,10 @@
       </div>
       <div slot="subtitle" class="update-subtitle" i18n-content="updateCompeletedMsg"
           hidden="[[!updateCompleted]]"></div>
-      <div slot="footer" class="flex layout vertical">
-        <paper-progress min="0" max="100" value="[[progressValue]]"
-          hidden="[[updateCompleted]]">
+      <paper-progress slot="progress" min="0" max="100"
+          value="[[progressValue]]" hidden="[[updateCompleted]]">
       </paper-progress>
+      <div slot="footer" class="flex layout vertical">
         <div id="estimated-time-left" class="progress-message text"
             hidden="[[isNotAllowedOrUpdateCompleted_(estimatedTimeLeftShown,
                                                      updateCompleted)]]">