Add EDU Coexistence ChromeOS UI elements and behaviors

This CL adds:
- Polymer template for all the screens of the UI
- Shared styles for all the screens
- Button templates and behaviors
- Error screen
- Network offline screens

Also:
- UI behaviors and event handler implementation to enable the flow to operate.
These are mostly in:
chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_ui.js
chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_app.js

But there are smaller bits of functionality in the other js files as
required by their respective screens.

Bug: 1133828,1133827,1123218
Change-Id: I297fe1a5c18bb3806d94b4c5e635c0dd4a990f70
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2462673Reviewed-by: Ted Choc <tedchoc@chromium.org>
Reviewed-by: Aga Wronska <agawronska@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Dan S <danan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#820844}

chrome/app/chromeos_strings.grdp

@@ -5697,6 +5697,20 @@
     Get highlights from the latest update
   </message>
 
+  <!-- Strings for EDU Coexistence flow -->
+  <message name="IDS_EDU_COEXISTENCE_NETWORK_DOWN_HEADING" desc="Heading string shown in the EDU Coexistence flow when the network is not available.">
+    Can’t connect to the internet
+  </message>
+  <message name="IDS_EDU_COEXISTENCE_NETWORK_DOWN_DESCRIPTION" desc="Description shown in the EDU Coexistence flow when the network is not available.">
+    Check your internet connection
+  </message>
+  <message name="IDS_EDU_COEXISTENCE_ERROR_HEADING" desc="Heading string shown in the EDU Coexistence flow when an unrecoverable error occured.">
+    An error occurred
+  </message>
+  <message name="IDS_EDU_COEXISTENCE_ERROR_DESCRIPTION" desc="Description shown in the EDU Coexistence flow when an unrecoverable error occured.">
+    Please try again later
+  </message>
+
   <!-- Strings for Add Supervision screen -->
   <message name="IDS_ADD_SUPERVISION_PAGE_TITLE" desc="Title for the Chrome OS Add Supervision screen. Since the title bar is not visible, this string is only used by screen readers.">
     Set Up Parental Controls

chrome/app/chromeos_strings_grdp/IDS_EDU_COEXISTENCE_ERROR_DESCRIPTION.png.sha1

+fe5b179467573c349c9103c6ea2c039e63bac5e5
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_EDU_COEXISTENCE_ERROR_HEADING.png.sha1

+fe5b179467573c349c9103c6ea2c039e63bac5e5
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_EDU_COEXISTENCE_NETWORK_DOWN_DESCRIPTION.png.sha1

+17d93a5572f7e0a928b6a620c972d5916cb3617b
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_EDU_COEXISTENCE_NETWORK_DOWN_HEADING.png.sha1

+17d93a5572f7e0a928b6a620c972d5916cb3617b
\ No newline at end of file

chrome/browser/browser_resources.grd

@@ -223,6 +223,11 @@
         <include name="IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_UI_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_coexistence\edu_coexistence_ui.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_CONTROLLER_JS" file="resources\chromeos\edu_coexistence\edu_coexistence_controller.js" type="BINDATA" />
         <include name="IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_BROWSER_PROXY_JS" file="resources\chromeos\edu_coexistence\edu_coexistence_browser_proxy.js" type="BINDATA" />
+        <include name="IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_BUTTON_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_coexistence\edu_coexistence_button.js" use_base_dir="false" type="BINDATA" />
+        <include name="IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_OFFLINE_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_coexistence\edu_coexistence_offline.js" use_base_dir="false" type="BINDATA" />
+        <include name="IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_ERROR_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_coexistence\edu_coexistence_error.js" use_base_dir="false" type="BINDATA" />
+        <include name="IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_TEMPLATE_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_coexistence\edu_coexistence_template.js" use_base_dir="false" type="BINDATA" />
+        <include name="IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_CSS_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_coexistence\edu_coexistence_css.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_EDU_LOGIN_BROWSER_PROXY_JS" file="resources\chromeos\edu_login\browser_proxy.js" type="BINDATA" />
         <include name="IDR_EDU_LOGIN_ICONS_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_login\icons.js" use_base_dir="false" type ="BINDATA" />
         <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" />

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

@@ -11,7 +11,11 @@ js_type_check("closure_compile") {
   deps = [
     ":edu_coexistence_app",
     ":edu_coexistence_browser_proxy",
+    ":edu_coexistence_button",
     ":edu_coexistence_controller",
+    ":edu_coexistence_error",
+    ":edu_coexistence_offline",
+    ":edu_coexistence_template",
     ":edu_coexistence_ui",
   ]
 
@@ -26,6 +30,8 @@ js_type_check("closure_compile") {
 js_library("edu_coexistence_app") {
   deps = [
     ":edu_coexistence_browser_proxy",
+    ":edu_coexistence_error",
+    ":edu_coexistence_offline",
     ":edu_coexistence_ui",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_view_manager:cr_view_manager.m",
@@ -34,10 +40,36 @@ js_library("edu_coexistence_app") {
   ]
 }
 
+js_library("edu_coexistence_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_coexistence_error") {
+  deps = [
+    ":edu_coexistence_button",
+    ":edu_coexistence_template",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
+js_library("edu_coexistence_offline") {
+  deps = [
+    ":edu_coexistence_button",
+    ":edu_coexistence_template",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("edu_coexistence_ui") {
   deps = [
     ":edu_coexistence_browser_proxy",
+    ":edu_coexistence_button",
     ":edu_coexistence_controller",
+    ":edu_coexistence_template",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
@@ -47,6 +79,19 @@ js_library("edu_coexistence_ui") {
   ]
 }
 
+js_library("edu_coexistence_template") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements:cr_scrollable_behavior.m",
+  ]
+}
+
+polymer_modulizer("edu_coexistence_css") {
+  js_file = "edu_coexistence_css.js"
+  html_file = "edu_coexistence_css.html"
+  html_type = "v3-ready"
+}
+
 js_library("edu_coexistence_controller") {
   deps = [
     ":edu_coexistence_browser_proxy",
@@ -69,6 +114,30 @@ polymer_modulizer("edu_coexistence_app") {
   html_type = "v3-ready"
 }
 
+polymer_modulizer("edu_coexistence_button") {
+  js_file = "edu_coexistence_button.js"
+  html_file = "edu_coexistence_button.html"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("edu_coexistence_error") {
+  js_file = "edu_coexistence_error.js"
+  html_file = "edu_coexistence_error.html"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("edu_coexistence_offline") {
+  js_file = "edu_coexistence_offline.js"
+  html_file = "edu_coexistence_offline.html"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("edu_coexistence_template") {
+  js_file = "edu_coexistence_template.js"
+  html_file = "edu_coexistence_template.html"
+  html_type = "v3-ready"
+}
+
 polymer_modulizer("edu_coexistence_ui") {
   js_file = "edu_coexistence_ui.js"
   html_file = "edu_coexistence_ui.html"
@@ -78,6 +147,11 @@ polymer_modulizer("edu_coexistence_ui") {
 group("polymer3_elements") {
   public_deps = [
     ":edu_coexistence_app_module",
+    ":edu_coexistence_button_module",
+    ":edu_coexistence_css_module",
+    ":edu_coexistence_error_module",
+    ":edu_coexistence_offline_module",
+    ":edu_coexistence_template_module",
     ":edu_coexistence_ui_module",
   ]
 }

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_app.html

- <cr-view-manager id="viewManager" hidden$="[[isErrorShown_]]">
-   <edu-coexistence-ui id="edu-coexistence-ui"  slot="view"></edu-coexistence-ui>
+<cr-view-manager id="viewManager" hidden$="[[isErrorShown_]]">
+   <edu-coexistence-ui id="edu-coexistence-ui"  slot="view">
+   </edu-coexistence-ui>
+   <edu-coexistence-offline id="edu-coexistence-offline"  slot="view">
+   </edu-coexistence-offline>
+   <edu-coexistence-error id="edu-coexistence-error"  slot="view">
+   </edu-coexistence-error>
  </cr-view-manager>

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_app.js

@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './edu_coexistence_css.js';
+import './edu_coexistence_template.js';
+import './edu_coexistence_button.js';
+import './edu_coexistence_error.js';
+import './edu_coexistence_offline.js';
 import './edu_coexistence_ui.js';
 import 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.m.js';
 
@@ -10,11 +15,12 @@ import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behav
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {EduCoexistenceBrowserProxyImpl} from './edu_coexistence_browser_proxy.js';
 
-
-// import {EduAccountLoginBrowserProxyImpl} from './browser_proxy.js';
-// import {EduCoexistenceFlowResult, EduLoginErrorType, EduLoginParams,
-// ParentAccount} from './edu_login_util.js';
-//
+/** @enum {string} */
+const Screens = {
+  ONLINE_FLOW: 'edu-coexistence-ui',
+  ERROR: 'edu-coexistence-error',
+  OFFLINE: 'edu-coexistence-offline',
+};
 
 Polymer({
   is: 'edu-coexistence-app',
@@ -32,15 +38,56 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /**
+     * Specifies what the current screen is.
+     * @private {Screens}
+     */
+    currentScreen_: {type: Screens, value: Screens.ONLINE_FLOW},
   },
 
-  /** @override */
-  created() {},
+  listeners: {
+    'go-error': 'onError_',
+  },
+
+  /**
+   * Displays the error screen.
+   * @private
+   */
+  onError_() {
+    this.switchToScreen_(Screens.ERROR);
+  },
+
+  /**
+   * Switches to the specified screen.
+   * @private
+   * @param {Screens} screen
+   */
+  switchToScreen_(screen) {
+    if (this.currentScreen_ === screen) {
+      return;
+    }
+    this.currentScreen_ = screen;
+    /** @type {CrViewManagerElement} */ (this.$.viewManager)
+        .switchView(this.currentScreen_);
+  },
 
   /** @override */
   ready() {
-    /** @type {CrViewManagerElement} */ (this.$.viewManager)
-        .switchView('edu-coexistence-ui');
+    window.addEventListener('online', () => {
+      if (this.currentScreen_ !== Screens.ERROR) {
+        this.switchToScreen_(Screens.ONLINE_FLOW);
+      }
+    });
+
+    window.addEventListener('offline', () => {
+      if (this.currentScreen_ !== Screens.ERROR) {
+        this.switchToScreen_(Screens.OFFLINE);
+      }
+    });
+
+    this.switchToScreen_(
+        navigator.onLine ? Screens.ONLINE_FLOW : Screens.OFFLINE);
   },
 
 });

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_button.html

+<style>
+  :host([button-type='ok']) cr-button {
+    position: absolute;
+  }
+
+  :host([button-type='back']) cr-button {
+    position: absolute;
+  }
+</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_coexistence/edu_coexistence_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 = {
+  ACTION: 'action',
+  BACK: 'back',
+};
+
+Polymer({
+  is: 'edu-coexistence-button',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /**
+     * Set button type.
+     * @type {!ButtonTypes}
+     */
+    buttonType: {
+      type: String,
+      value: ButtonTypes.ACTION,
+    },
+    /**
+     * 'disabled' button attribute.
+     * @type {Boolean}
+     */
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  /** @override */
+  ready() {
+    this.assertButtonType_(this.buttonType);
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @private
+   */
+  assertButtonType_(buttonType) {
+    assert(Object.values(ButtonTypes).includes(buttonType));
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {string} CSS class name
+   * @private
+   */
+  getClass_(buttonType) {
+    this.assertButtonType_(buttonType);
+    if (buttonType === ButtonTypes.BACK) {
+      return '';
+    }
+
+    return 'action-button';
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {boolean} Whether the button should have an icon before text
+   * @private
+   */
+  hasIconBeforeText_(buttonType) {
+    this.assertButtonType_(buttonType);
+    return buttonType === ButtonTypes.BACK;
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {boolean} Whether the button should have an icon after text
+   * @private
+   */
+  hasIconAfterText_(buttonType) {
+    this.assertButtonType_(buttonType);
+    return false;
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {string} Icon
+   * @private
+   */
+  getIcon_(buttonType) {
+    this.assertButtonType_(buttonType);
+    if (buttonType === ButtonTypes.BACK) {
+      return isRTL() ? 'cr:chevron-right' : 'cr:chevron-left';
+    }
+    return '';
+  },
+
+  /**
+   * @param {!ButtonTypes} buttonType
+   * @return {string} Localized button text
+   * @private
+   */
+  getDisplayName_(buttonType) {
+    this.assertButtonType_(buttonType);
+
+    if (buttonType === ButtonTypes.BACK) {
+      return this.i18n('backButton');
+    }
+    if (buttonType === ButtonTypes.ACTION) {
+      return this.i18n('actionButton');
+    }
+    return '';  // unreached
+  },
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onTap_(e) {
+    if (this.disabled) {
+      e.stopPropagation();
+      return;
+    }
+    if (this.buttonType === ButtonTypes.BACK) {
+      this.fire('go-back');
+      return;
+    }
+    if (this.buttonType === ButtonTypes.ACTION) {
+      this.fire('go-action');
+      return;
+    }
+  }
+
+});

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_css.html

+<template>
+  <style include="cr-shared-style cros-color-overrides">
+    :host {
+      --grey-border: 1px solid var(--google-grey-300);
+      --dialog-top-border-size: 35px;
+    }
+
+    .container,
+    .signin-frame {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+    }
+
+    .container {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      margin-top: calc(-1 * var(--dialog-top-border-size));
+    }
+
+    .signin-frame {
+      background-color: white;
+      overflow: hidden;
+    }
+
+    paper-spinner-lite {
+      --spinner-size: 25px;
+      display: none;
+      height: var(--spinner-size);
+      width: var(--spinner-size);
+    }
+
+    paper-spinner-lite[active] {
+      display: inline-block;
+    }
+
+    edu-coexistence-template {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      justify-content:  center;
+    }
+
+    h1 {
+      font-size: 2em;
+      font-weight: normal;
+      margin-bottom: 16px;
+      margin-top: 20px;
+    }
+
+    p {
+      line-height: 1.5;
+      margin: 0;
+      white-space: pre-line;
+    }
+
+    a {
+      color: var(--google-blue-700);
+      text-decoration: none;
+    }
+
+    .main-padding {
+      padding-inline-end: 64px;
+      padding-inline-start: 64px;
+      padding-top: calc(64px - var(--dialog-top-border-size));
+    }
+
+    .text-elide {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .secondary {
+      color: var(--google-grey-refresh-700);
+      font-weight: 400;
+    }
+
+    .google-logo {
+      height: 32px;
+      margin-top: 10px;
+      width: 32px;
+    }
+
+    .google-full-logo {
+      width: 74px;
+    }
+
+    .profile-icon {
+      background: center / cover no-repeat;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    span[slot='buttons'] {
+      display: flex;
+      width: 100%;
+    }
+
+    edu-login-button[button-type='ok'],
+    edu-login-button[button-type='back'] {
+      margin-inline-start: auto;
+    }
+  </style>
+</template>

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_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-coexistence-css">{__html_template__}</dom-module>
+`;
+document.body.appendChild(template.content.cloneNode(true));

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_error.html

+<style include="edu-coexistence-css"></style>
+
+<edu-coexistence-template>
+  <span slot="main">
+    <div class="container">
+      <div class="main-padding">
+        <if expr="_google_chrome">
+          <img class="google-full-logo"
+              src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
+        </if>
+        <h1>$i18n{eduCoexistenceErrorHeading}</h1>
+        <p class="secondary">$i18n{eduCoexistenceErrorDescription}</p>
+      </div>
+    </div>
+  </span>
+  <span slot="buttons">
+    <edu-coexistence-button button-type="action">
+  </span>
+</edu-coexistence-template>

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_error.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 './edu_coexistence_css.js';
+import './edu_coexistence_template.js';
+import './edu_coexistence_button.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {EduCoexistenceBrowserProxyImpl} from './edu_coexistence_browser_proxy.js';
+
+
+Polymer({
+  is: 'edu-coexistence-error',
+
+  _template: html`{__html_template__}`,
+
+  listeners: {
+    'go-action': 'closeDialog_',
+  },
+
+  /**
+   * Attempts to close the dialog.  In OOBE, this will move on
+   * to the next screen of OOBE (not the next screen of this flow).
+   * @private
+   */
+  closeDialog_() {
+    EduCoexistenceBrowserProxyImpl.getInstance().dialogClose();
+  },
+});

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_offline.html

+<style include="edu-coexistence-css"></style>
+
+<edu-coexistence-template>
+  <span slot="main">
+    <div class="container">
+      <div class="main-padding">
+        <if expr="_google_chrome">
+          <img class="google-full-logo"
+              src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
+        </if>
+        <h1>$i18n{eduCoexistenceNetworkDownHeading}</h1>
+        <p class="secondary">$i18n{eduCoexistenceNetworkDownDescription}</p>
+      </div>
+    </div>
+  </span>
+  <span slot="buttons">
+    <edu-coexistence-button button-type="action">
+  </span>
+</edu-coexistence-template>

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_offline.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 './edu_coexistence_css.js';
+import './edu_coexistence_template.js';
+import './edu_coexistence_button.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {EduCoexistenceBrowserProxyImpl} from './edu_coexistence_browser_proxy.js';
+
+
+Polymer({
+  is: 'edu-coexistence-offline',
+
+  _template: html`{__html_template__}`,
+
+  listeners: {
+    'go-action': 'closeDialog_',
+  },
+
+  /**
+   * Attempts to close the dialog. In OOBE, this will move on
+   * to the next screen of OOBE (not the next screen of this flow).
+   * @private
+   */
+  closeDialog_() {
+    EduCoexistenceBrowserProxyImpl.getInstance().dialogClose();
+  },
+});

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_template.html

+<style>
+  :host {
+    overflow-y: hidden;
+    --background-gradient-0: linear-gradient(0deg,
+        rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+        rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+    --background-gradient-180: linear-gradient(180deg,
+        rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+        rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+  }
+
+  .main {
+    height: calc(100% - 90px);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .template-container {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+  }
+
+  @media (orientation: landscape) {
+    .content-container {
+      align-items: stretch;
+      height: 100%;
+      max-height: 900px;
+      max-width: 1400px;
+      width: 100%;
+    }
+  }
+  
+  @media (orientation: portrait) {
+    .content-container {
+      align-items: stretch;
+      height: 50%;
+      max-height: 900px;
+      max-width: 1400px;
+      width: 100%;
+    }
+  }
+
+  .main[scrollable].can-scroll:not(.is-scrolled):not(.scrolled-to-bottom) {
+    background: var(--background-gradient-0);
+  }
+
+  .main[scrollable].can-scroll.is-scrolled:not(.scrolled-to-bottom) {
+    background: var(--background-gradient-0), var(--background-gradient-180);
+  }
+
+  .main[scrollable].is-scrolled.scrolled-to-bottom {
+    background: var(--background-gradient-180);
+  }
+
+  .footer {
+    align-items: center;
+    display: flex;
+    height: 90px;
+    padding-inline-end: 32px;
+    padding-inline-start: 32px;
+  }
+</style>
+<div class="template-container oobe-format">
+  <div class ="content-container oobe-format">
+    <div class="main" scrollable>
+      <slot name="main"></slot>
+    </div>
+    <div class="footer">
+      <slot name="buttons"></slot>
+    </div>
+  </div>
+</div>

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_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 {CrScrollableBehavior} from 'chrome://resources/cr_elements/cr_scrollable_behavior.m.js';
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+Polymer({
+  is: 'edu-coexistence-template',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [CrScrollableBehavior],
+});

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_ui.html

-<style>
-  .container,
-  .signin-frame {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    width: 100%;
+<style include="edu-coexistence-css">
+  .buttons {
+     width: 100%;
   }
 
-  .container {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-top: calc(-1 * var(--dialog-top-border-size));
-  }
-
-  .signin-frame {
-    background-color: white;
-    overflow: hidden;
-  }
-
-  paper-spinner-lite {
-    --spinner-size: 25px;
-    display: none;
-    height: var(--spinner-size);
-    width: var(--spinner-size);
-  }
-
-  paper-spinner-lite[active] {
-    display: inline-block;
+  gaia-action-buttons {
+    padding-inline-start: 85%;
   }
 </style>
 
-<div class="container">
-   <webview id="signinFrame" hidden$="[[loading_]]" class="signin-frame" allowscaling></webview>
-</div>
+<edu-coexistence-template>
+  <span slot="main">
+    <div class="container">
+     <webview id="signinFrame" hidden$="[[loading_]]" class="signin-frame"
+              allowscaling></webview>
+    </div>
+  </span>
+  <span slot="buttons">
+    <div class="buttons" hidden$="[[!showGaiaButtons_]]">
+      <div class="action-buttons">
+        <span>
+          <edu-coexistence-button button-type="back"
+            on-go-back="handleGaiaLoginGoBack_">
+          </edu-coexistence-button>
+        </span>
+        <gaia-action-buttons authenticator="[[controller_.authExtHost_]]" 
+          hidden$="[[!showGaiaNextButton_]]">
+        </gaia-action-buttons>
+      </div>
+    </div>
+  </span>
+
+</edu-coexistence-template>

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_ui.js

@@ -2,13 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './edu_coexistence_css.js';
+import './edu_coexistence_template.js';
+import './edu_coexistence_button.js';
+import './gaia_action_buttons.js';
+
 import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {AuthParams} from '../../gaia_auth_host/authenticator.m.js';
-
 import {EduCoexistenceBrowserProxyImpl} from './edu_coexistence_browser_proxy.js';
-import {EduCoexistenceController} from './edu_coexistence_controller.js';
+import {EduCoexistenceController, EduCoexistenceParams} from './edu_coexistence_controller.js';
 
 Polymer({
   is: 'edu-coexistence-ui',
@@ -27,6 +31,26 @@ Polymer({
       value: true,
     },
 
+    /**
+     * Indicates whether the GAIA buttons should be shown.
+     * @private {boolean}
+     */
+    showGaiaButtons_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Indicates whether the GAIA "Next" button should be shown.
+     * @private {boolean}
+     */
+    showGaiaNextButton_: {
+      type: Boolean,
+      value: false,
+    },
+
+
+
     /**
      * The EDU Ceoxistence controller instance.
      * @private {?EduCoexistenceController}
@@ -40,9 +64,16 @@ Polymer({
   },
 
   /**
-   * @param {!AuthParams} data parameters for auth extension.
+   * Takes the appropriate "back" action from the GAIA edu login page.
+   * @param {Event} e
    * @private
    */
+  handleGaiaLoginGoBack_(e) {
+    e.stopPropagation();
+    this.webview_.back();
+    this.webview_.focus();
+  },
+
   loadAuthExtension_(data) {
     // Set up the controller.
     this.controller_.loadAuthExtension(data);
@@ -50,6 +81,48 @@ Polymer({
     this.webview_.addEventListener('contentload', () => {
       this.loading_ = false;
     });
+
+    this.webview_.addEventListener('loadcommit', (e) => {
+      this.configureUiForGaiaFlow(new URL(e.url));
+    });
+  },
+
+  /**
+   * Configures the UI for showing/hiding the GAIA login flow.
+   * @param {URL} currentUrl
+   */
+  configureUiForGaiaFlow(currentUrl) {
+    var mainDiv = this.$$('edu-coexistence-template').$$('div.main');
+    var contentDiv =
+        this.$$('edu-coexistence-template').$$('div.content-container');
+
+    if (currentUrl.hostname !== this.controller_.getFlowOriginHostname()) {
+      // Show the GAIA Buttons.
+      this.showGaiaButtons_ = true;
+      // Shrink the main div so that the buttons line up more closely with the
+      // server rendered buttons.
+      mainDiv.style.height = '80%';
+
+      // GAIA login renders better with this width constraint.
+      contentDiv.style.maxWidth = '900px';
+
+      // Don't show the "Next" button if the EDU authentication got forwarded to
+      // a non-Google SSO page.
+      this.showGaiaNextButton_ = currentUrl.hostname.endsWith('.google.com');
+
+    } else {
+      // Hide the GAIA Buttons.
+      this.showGaiaButtons_ = false;
+
+      // Hide the GAIA Next button.
+      this.showGaiaNextButton_ = false;
+
+      // Undo the GAIA login width constraint set above.
+      contentDiv.style.maxWidth = '1400px';
+
+      // Restore the main div to 100%
+      mainDiv.style.height = '100%';
+    }
   },
 
   /** @override */

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

@@ -90,6 +90,16 @@ void AddEduStrings(content::WebUIDataSource* source,
                              IDS_EDU_LOGIN_INFO_COEXISTENCE_TITLE);
   source->AddLocalizedString("coexistenceBody",
                              IDS_EDU_LOGIN_INFO_COEXISTENCE_BODY);
+
+  // Strings for server based EDU Coexistence flow.
+  source->AddLocalizedString("eduCoexistenceNetworkDownHeading",
+                             IDS_EDU_COEXISTENCE_NETWORK_DOWN_HEADING);
+  source->AddLocalizedString("eduCoexistenceNetworkDownDescription",
+                             IDS_EDU_COEXISTENCE_NETWORK_DOWN_DESCRIPTION);
+  source->AddLocalizedString("eduCoexistenceErrorHeading",
+                             IDS_EDU_COEXISTENCE_ERROR_HEADING);
+  source->AddLocalizedString("eduCoexistenceErrorDescription",
+                             IDS_EDU_COEXISTENCE_ERROR_DESCRIPTION);
 }
 #endif  // defined(OS_CHROMEOS)
 
@@ -141,6 +151,14 @@ content::WebUIDataSource* CreateWebUIDataSource() {
      IDR_ADD_SUPERVISION_POST_MESSAGE_API_M_JS},
     {"edu_coexistence_browser_proxy.js",
      IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_BROWSER_PROXY_JS},
+    {"edu_coexistence_button.js",
+     IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_BUTTON_JS},
+    {"edu_coexistence_offline.js",
+     IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_OFFLINE_JS},
+    {"edu_coexistence_error.js", IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_ERROR_JS},
+    {"edu_coexistence_template.js",
+     IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_TEMPLATE_JS},
+    {"edu_coexistence_css.js", IDR_EDU_COEXISTENCE_EDU_COEXISTENCE_CSS_JS},
 
 #if BUILDFLAG(GOOGLE_CHROME_BRANDING)
     {"googleg.svg", IDR_ACCOUNT_MANAGER_WELCOME_GOOGLE_LOGO_SVG},