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,43 +25,36 @@
 <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">
-          [[i18nDynamic(locale, 'licenseSelectionCardExplanation')]]
-        </div>
-      </enterprise-header>
-      <div slot="content" class="content flex vertical layout justified">
-        <div>
-          <paper-radio-group selected="{{selected}}"
-                             selectable="cr-radio-button">
-            <template is="dom-repeat" items="[[licenses]]"
-                      id="repeatTemplate">
-              <cr-radio-button class="license-radio-button"
-                               disabled$="[[or_(item.disabled, disabled)]]"
-                               hidden$="[[item.hidden]]" name="[[item.id]]">
-                [[formatTitle_(item)]]
-              </cr-radio-button>
-            </template>
-          </paper-radio-group>
-        </div>
+    <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>
+      <div slot="footer" class="flex layout vertical justified">
+        <paper-radio-group selected="{{selected}}"
+                           selectable="cr-radio-button">
+          <template is="dom-repeat" items="[[licenses]]"
+                    id="repeatTemplate">
+            <cr-radio-button class="license-radio-button"
+                             disabled$="[[or_(item.disabled, disabled)]]"
+                             hidden$="[[item.hidden]]" name="[[item.id]]">
+              [[formatTitle_(item)]]
+            </cr-radio-button>
+          </template>
+        </paper-radio-group>
       </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 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>
-    </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.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>
-        <div class="flex"></div>
+      <paper-progress slot="progress" id="checking-progress"
+          hidden="[[!checkingForUpdate]]">
+      </paper-progress>
+      <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>
+      <paper-progress slot="progress" min="0" max="100"
+          value="[[progressValue]]" hidden="[[updateCompleted]]">
+      </paper-progress>
       <div slot="footer" class="flex layout vertical">
-        <paper-progress min="0" max="100" value="[[progressValue]]"
-          hidden="[[updateCompleted]]">
-        </paper-progress>
         <div id="estimated-time-left" class="progress-message text"
             hidden="[[isNotAllowedOrUpdateCompleted_(estimatedTimeLeftShown,
                                                      updateCompleted)]]">