Add EDU login flow: Add templates

Add Polymer template for the views in login flow, component
for buttons and CSS.

See http://doc/1WVGl7i7uWTnMEa3MPPVALegDM-7RabDv6z3JrAw53Sg

Bug: 1043108
Change-Id: I70d4a1e75e3cdf8889ce211eacb7946db09cba9f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2007455
Commit-Queue: Anastasiia Nikolaienko <anastasiian@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Kush Sinha <sinhak@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747203}

chrome/app/chromeos_strings.grdp

@@ -4399,6 +4399,14 @@
     Update account
   </message>
 
+  <!-- Strings for EDU login flow -->
+  <message name="IDS_EDU_LOGIN_BACK" desc="The name of the button that goes to the previous step in EDU login flow.">
+    Back
+  </message>
+  <message name="IDS_EDU_LOGIN_NEXT" desc="The name of the button that goes to the next step in EDU login flow.">
+    Next
+  </message>
+
   <!-- TPM firmware auto-update notifications -->
   <message name="IDS_TPM_AUTO_UPDATE_PLANNED_NOTIFICATION_TITLE" desc="Title for the notification informing the user that local data will be deleted.">
     Your local data will soon be deleted

chrome/app/chromeos_strings_grdp/IDS_EDU_LOGIN_BACK.png.sha1

+5031c9358ff9591d5fcc3a382fa198c2950d49f8
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_EDU_LOGIN_NEXT.png.sha1

+5031c9358ff9591d5fcc3a382fa198c2950d49f8
\ No newline at end of file

chrome/browser/browser_resources.grd

@@ -215,6 +215,10 @@
         <!-- Edu account login resources -->
         <include name="IDU_EDU_LOGIN_EDU_LOGIN_HTML" file="resources\chromeos\edu_login\edu_login.html" allowexternalscript="true" type="BINDATA" compress="gzip" />
         <include name="IDU_EDU_LOGIN_EDU_LOGIN_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_login\app.js" use_base_dir="false" type="BINDATA" compress="gzip" />
+        <include name="IDR_EDU_LOGIN_EDU_LOGIN_BUTTON_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_login\edu_login_button.js" use_base_dir="false" type="BINDATA" compress="gzip" />
+        <include name="IDR_EDU_LOGIN_EDU_LOGIN_TEMPLATE_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_login\edu_login_template.js" use_base_dir="false" type="BINDATA" compress="gzip" />
+        <include name="IDR_EDU_LOGIN_EDU_LOGIN_CSS_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_login\edu_login_css.js" use_base_dir="false" type ="BINDATA" />
+
         <!-- Chrome OS Account Manager welcome screen resources -->
         <include name="IDR_ACCOUNT_MANAGER_SHARED_CSS" file="resources\chromeos\account_manager_shared.css" type="BINDATA" compress="gzip" />
         <include name="IDR_ACCOUNT_MANAGER_WELCOME_HTML" file="resources\chromeos\account_manager_welcome.html" allowexternalscript="true" type="BINDATA" compress="gzip" preprocess="true"/>

chrome/browser/resources/chromeos/edu_login/BUILD.gn

@@ -7,7 +7,11 @@ import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   is_polymer3 = true
-  deps = [ ":app" ]
+  deps = [
+    ":app",
+    ":edu_login_button",
+    ":edu_login_template",
+  ]
 }
 
 js_library("app") {
@@ -16,12 +20,49 @@ js_library("app") {
   ]
 }
 
+js_library("edu_login_button") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:util.m",
+  ]
+}
+
+js_library("edu_login_template") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 polymer_modulizer("app") {
   js_file = "app.js"
   html_file = "app.html"
   html_type = "v3-ready"
 }
 
+polymer_modulizer("edu_login_button") {
+  js_file = "edu_login_button.js"
+  html_file = "edu_login_button.html"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("edu_login_template") {
+  js_file = "edu_login_template.js"
+  html_file = "edu_login_template.html"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("edu_login_css") {
+  js_file = "edu_login_css.js"
+  html_file = "edu_login_css.html"
+  html_type = "v3-ready"
+}
+
 group("polymer3_elements") {
-  deps = [ ":app_module" ]
+  deps = [
+    ":app_module",
+    ":edu_login_button_module",
+    ":edu_login_css_module",
+    ":edu_login_template_module",
+  ]
 }

chrome/browser/resources/chromeos/edu_login/edu_login_button.html

+<style>
+  cr-button {
+    position: absolute;
+    right: 32px;
+  }
+
+  :host([button-type='next']) cr-button {
+    padding-inline-end: 10px;
+  }
+
+  :host([button-type='back']) cr-button {
+    left: 32px;
+    padding-inline-start: 10px;
+    right: auto;
+  }
+
+  :host-context([dir='rtl']) cr-button {
+    left: 32px;
+    right: auto;
+  }
+
+  :host-context([dir='rtl']):host([button-type='back']) cr-button {
+    left: auto;
+    right: 32px;
+  }
+</style>
+<cr-button class$="[[getClass_(buttonType)]]" on-tap="onTap_"
+    disabled="[[disabled]]">
+  <template is="dom-if" if="[[hasIconBeforeText_(buttonType)]]">
+    <iron-icon icon="[[getIcon_(buttonType)]]"></iron-icon>
+  </template>
+  [[getDisplayName_(buttonType)]]
+  <template is="dom-if" if="[[hasIconAfterText_(buttonType)]]">
+    <iron-icon icon="[[getIcon_(buttonType)]]"></iron-icon>
+  </template>
+</cr-button>

chrome/browser/resources/chromeos/edu_login/edu_login_button.js

+// Copyright 2020 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.
+
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/icons.m.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import './strings.m.js';
+
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import {isRTL} from 'chrome://resources/js/util.m.js';
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/** @enum {string} */
+const ButtonTypes = {
+  OK: 'ok',
+  NEXT: 'next',
+  BACK: 'back'
+};
+
+Polymer({
+  is: 'edu-login-button',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /**
+     * Set button type.
+     * @type {!ButtonTypes}
+     */
+    buttonType: {
+      type: String,
+      value: ButtonTypes.OK,
+    },
+    /**
+     * 'disabled' button attribute.
+     * @type {Boolean}
+     */
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  /** @override */
+  ready() {
+    assert(this.buttonType === ButtonTypes.OK ||
+        this.buttonType === ButtonTypes.NEXT ||
+        this.buttonType === ButtonTypes.BACK);
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {string} class name
+   * @private
+   */
+  getClass_(buttonType) {
+    return buttonType === ButtonTypes.BACK ? '' : 'action-button';
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {boolean} whether the button should have an icon before text
+   * @private
+   */
+  hasIconBeforeText_(buttonType) {
+    return buttonType === ButtonTypes.BACK;
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {boolean} whether the button should have an icon after text
+   * @private
+   */
+  hasIconAfterText_(buttonType) {
+    return buttonType === ButtonTypes.NEXT;
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {string} icon
+   * @private
+   */
+  getIcon_(buttonType) {
+    if (buttonType === ButtonTypes.NEXT) {
+      return isRTL() ? 'cr:chevron-left' : 'cr:chevron-right';
+    }
+    if (buttonType === ButtonTypes.BACK) {
+      return isRTL() ? 'cr:chevron-right' : 'cr:chevron-left';
+    }
+    return '';
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {string} localized button text
+   * @private
+   */
+  getDisplayName_(buttonType) {
+    if (buttonType === ButtonTypes.NEXT) {
+      return this.i18n('nextButton');
+    }
+    if (buttonType === ButtonTypes.BACK) {
+      return this.i18n('backButton');
+    }
+    return this.i18n('okButton');
+  },
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onTap_(e) {
+    if (this.disabled) {
+      e.stopPropagation();
+    }
+  }
+
+});

chrome/browser/resources/chromeos/edu_login/edu_login_css.html

+<template>
+  <style include="cr-shared-style cros-color-overrides">
+    .main-padding {
+      padding-inline-end: 64px;
+      padding-inline-start: 64px;
+      padding-top: 64px;
+    }
+
+    .text-elide {
+      @apply --cr-text-elide;
+    }
+
+    .secondary {
+      @apply --cr-secondary-text;
+    }
+
+    #google-full-logo {
+      width: 74px;
+    }
+  </style>
+</template>

chrome/browser/resources/chromeos/edu_login/edu_login_css.js

+// Copyright 2020 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.
+
+import 'chrome://resources/cr_elements/chromeos/cros_color_overrides.m.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+const template = document.createElement('template');
+template.innerHTML = `
+<dom-module id="edu-login-css">{__html_template__}</dom-module>
+`;
+document.body.appendChild(template.content.cloneNode(true));

chrome/browser/resources/chromeos/edu_login/edu_login_template.html

+<style>
+  .main {
+    height: calc(100% - 60px);
+  }
+
+  .footer {
+    height: 60px;
+    padding-inline-end: 32px;
+    padding-inline-start: 32px;
+  }
+</style>
+<div class="main">
+  <slot name="main"></slot>
+</div>
+<div class="footer">
+  <slot name="buttons"></slot>
+</div>

chrome/browser/resources/chromeos/edu_login/edu_login_template.js

+// Copyright 2020 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.
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+Polymer({
+  is: 'edu-login-template',
+
+  _template: html`{__html_template__}`,
+});

chrome/browser/ui/webui/signin/inline_login_ui.cc

@@ -28,12 +28,21 @@
 #if defined(OS_CHROMEOS)
 #include "chrome/browser/ui/webui/chromeos/edu_account_login_handler_chromeos.h"
 #include "chrome/browser/ui/webui/signin/inline_login_handler_chromeos.h"
+#include "ui/strings/grit/ui_strings.h"
 #else
 #include "chrome/browser/ui/webui/signin/inline_login_handler_impl.h"
 #endif  // defined(OS_CHROMEOS)
 
 namespace {
 
+#if defined(OS_CHROMEOS)
+void AddEduStrings(content::WebUIDataSource* source) {
+  source->AddLocalizedString("okButton", IDS_APP_OK);
+  source->AddLocalizedString("backButton", IDS_EDU_LOGIN_BACK);
+  source->AddLocalizedString("nextButton", IDS_EDU_LOGIN_NEXT);
+}
+#endif  // defined(OS_CHROMEOS)
+
 content::WebUIDataSource* CreateWebUIDataSource() {
   content::WebUIDataSource* source =
         content::WebUIDataSource::Create(chrome::kChromeUIChromeSigninHost);
@@ -58,6 +67,12 @@ content::WebUIDataSource* CreateWebUIDataSource() {
 #if defined(OS_CHROMEOS)
   source->AddResourcePath("edu", IDU_EDU_LOGIN_EDU_LOGIN_HTML);
   source->AddResourcePath("app.js", IDU_EDU_LOGIN_EDU_LOGIN_JS);
+  source->AddResourcePath("edu_login_button.js",
+                          IDR_EDU_LOGIN_EDU_LOGIN_BUTTON_JS);
+  source->AddResourcePath("edu_login_template.js",
+                          IDR_EDU_LOGIN_EDU_LOGIN_TEMPLATE_JS);
+  source->AddResourcePath("edu_login_css.js", IDR_EDU_LOGIN_EDU_LOGIN_CSS_JS);
+  AddEduStrings(source);
 #endif
 
   source->AddLocalizedString("title", IDS_CHROME_SIGNIN_TITLE);