Use polymer slots in enrollment screens

This CL is intended to go be patched to M69, so fix can not change any
localized strings. As Polymer localization mechanism does not work with
html in localized values, the slot mechanism is used, and screen code
adjusts innerHtlm for element that is added into slot.

Propper change will be sent as a separate CL.

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

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

@@ -25,16 +25,19 @@
 <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">
 
     <enterprise-card id="license-selection-prompt-card" class="fit">
       <enterprise-header slot="header"
-                         i18n-values="header-title:oauthEnrollScreenTitle;
-                   header-comment:licenseSelectionCardExplanation">
+                         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>

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

@@ -28,6 +28,13 @@
   padding: 64px 64px 0 64px;
 }
 
+.header-comment {
+  color: #333;
+  font-size: 13px;
+  line-height: 20px;
+  min-height: 40px;
+}
+
 .content-container {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17);
   padding: 0 64px 0 64px;

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

@@ -15,12 +15,3 @@
   font-size: 28px;
   height: 64px;
 }
-
-.header-comment {
-  color: #333;
-  display: flex;
-  flex-direction: column-reverse;
-  font-size: 13px;
-  height: 40px;
-  line-height: 20px;
-}

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

@@ -49,9 +49,7 @@
       <div class="header-title" hidden$="{{!headerTitle}}">
         <span>[[headerTitle]]</span>
       </div>
-      <div class="header-comment" hidden$="{{!headerComment}}">
-        <span>[[headerComment]]</span>
-      </div>
+      <slot name="header-comment"></slot>
     </div>
   </template>
 </dom-module>

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

@@ -5,17 +5,13 @@
 Polymer({
   is: 'enterprise-header',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /**
      * Title of the header
      * @type {String}
      */
     headerTitle: {type: String, value: ''},
-
-    /**
-     * Additional text shown in the header
-     * @type {String}
-     */
-    headerComment: {type: String, value: ''},
   },
 });

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

@@ -5,6 +5,7 @@
 <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>
@@ -61,11 +62,13 @@
     <div id="oauth-enroll-step-success" role="alert">
       <enterprise-card id="oauth-enroll-success-card">
         <enterprise-header slot="header"
-            i18n-values="header-title:oauthEnrollSuccessTitle;
-                header-comment:oauthEnrollSuccess">
+            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">
           <img srcset="images/enrollment_success_illustration_1x.png 1x,
@@ -82,16 +85,20 @@
       <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;
-                   header-comment:oauthEnrollSuccess">
+               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"
+                   i18n-content="oauthEnrollSuccess"></div>
+              <div slot="header-comment" class="header-comment"
+                     id="oauth-enroll-abe-success-comment-domain" hidden></div>
             </enterprise-header >
-            <div class="layout vertical center">
-                <img srcset="images/enrollment_success_illustration_1x.png 1x,
-                         images/enrollment_success_illustration_2x.png 2x"
-                     i18n-values="alt:enrollmentSuccessIllustrationTitle">
+            <div slot="content" class="layout vertical center">
+              <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">
@@ -104,11 +111,13 @@
     <div id="oauth-enroll-step-attribute-prompt">
         <enterprise-card id="oauth-enroll-attribute-prompt-card">
             <enterprise-header slot="header"
-               i18n-values="header-title:oauthEnrollScreenTitle;
-                   header-comment:oauthEnrollDeviceInformation">
+               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">
                 <div class="oauth-enroll-step-message">

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

@@ -320,8 +320,11 @@ login.createScreen('OAuthEnrollmentScreen', 'oauth-enrollment', function() {
      */
     showAttestationBasedEnrollmentSuccess: function(
         device, enterpriseEnrollmentDomain) {
-      $('oauth-enroll-abe-success-card').innerHTML = loadTimeData.getStringF(
-          'oauthEnrollAbeSuccess', device, enterpriseEnrollmentDomain);
+      $('oauth-enroll-abe-success-comment-no-domain').hidden = true;
+      $('oauth-enroll-abe-success-comment-domain').hidden = false;
+      $('oauth-enroll-abe-success-comment-domain').innerHTML =
+          loadTimeData.getStringF(
+              'oauthEnrollAbeSuccess', device, enterpriseEnrollmentDomain);
       this.showStep(STEP_ABE_SUCCESS);
     },