Update the Supervision Onboarding UI.

With this change we are rendering the webview at the correct size,
removing hardcoded strings and showing a "Please wait..." message
while we load the webview.

Bug: 958995
Change-Id: Iaf4c71398d29fdc73daa06cba18e001b9d70e3dc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1622986Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Lucas Tenório <ltenorio@chromium.org>
Cr-Commit-Position: refs/heads/master@{#663160}

chrome/app/chromeos_strings.grdp

@@ -3249,6 +3249,20 @@
     Please wait...
   </message>
 
+  <!-- Supervision Onboarding OOBE screen. -->
+  <message name="IDS_SUPERVISION_ONBOARDING_NEXT_BUTTON" desc="Label for button that shows the next page in the Supervision Onboarding flow.">
+    Next
+  </message>
+  <message name="IDS_SUPERVISION_ONBOARDING_SKIP_BUTTON" desc="Label for button that skips the whole Supervision Onboarding flow.">
+    Skip
+  </message>
+  <message name="IDS_SUPERVISION_ONBOARDING_BACK_BUTTON" desc="Label for button that shows the previous page in the Supervision Onboarding flow.">
+    Back
+  </message>
+  <message name="IDS_SUPERVISION_ONBOARDING_WAIT_MESSAGE" desc="Message shown while we load the Supervision Onboarding flow.">
+    Please wait...
+  </message>
+
   <!-- Supervision transition OOBE screen. -->
   <message name="IDS_REMOVING_SUPERVISION_TITLE" desc="Title of the supervision transition OOBE screen when stopping supervision.">
     Stopping supervision...

chrome/browser/chromeos/login/screens/supervision_onboarding_screen_browsertest.cc

@@ -196,8 +196,8 @@ class SupervisionOnboardingBaseTest : public MixinBasedInProcessBrowserTest {
     screen_waiter.Wait();
 
     test::OobeJS()
-        .CreateVisibilityWaiter(true,
-                                {"supervision-onboarding", "contentWebview"})
+        .CreateVisibilityWaiter(
+            true, {"supervision-onboarding", "supervision-onboarding-content"})
         ->Wait();
   }
 
@@ -325,7 +325,7 @@ IN_PROC_BROWSER_TEST_F(SupervisionOnboardingTest, NextButtonExitsScreen) {
   WaitForScreen();
   EXPECT_EQ(1u, supervision_server()->GetReceivedRequestsCount());
 
-  ClickButton("next-button");
+  ClickButton("supervision-onboarding-next-button");
   WaitForScreenExit();
 }
 
@@ -334,7 +334,7 @@ IN_PROC_BROWSER_TEST_F(SupervisionOnboardingTest, BackButtonExitsScreen) {
   WaitForScreen();
   EXPECT_EQ(1u, supervision_server()->GetReceivedRequestsCount());
 
-  ClickButton("back-button");
+  ClickButton("supervision-onboarding-back-button");
   WaitForScreenExit();
 }
 
@@ -343,7 +343,7 @@ IN_PROC_BROWSER_TEST_F(SupervisionOnboardingTest, SkipButtonExitsScreen) {
   WaitForScreen();
   EXPECT_EQ(1u, supervision_server()->GetReceivedRequestsCount());
 
-  ClickButton("skip-button");
+  ClickButton("supervision-onboarding-skip-button");
   WaitForScreenExit();
 }
 

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

@@ -163,6 +163,7 @@ js_library("multidevice_setup_first_run") {
 js_library("supervision_onboarding") {
   deps = [
     ":login_screen_behavior",
+    ":oobe_dialog_host_behavior",
     "//chrome/browser/chromeos/supervision/mojom:mojom_js_library_for_compile",
     "//ui/webui/resources/js:cr",
   ]

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

@@ -27,5 +27,5 @@
 <include src="screen_marketing_opt_in.html">
 <include src="screen_multidevice_setup.html">
 <supervision-onboarding id="supervision-onboarding" class="step right hidden"
-    full-screen-dialog hidden>
+    hidden>
 </supervision-onboarding>

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

@@ -37,5 +37,5 @@
 <include src="screen_marketing_opt_in.html">
 <include src="screen_multidevice_setup.html">
 <supervision-onboarding id="supervision-onboarding" class="step right hidden"
-    full-screen-dialog hidden>
+    hidden>
 </supervision-onboarding>

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

+/* Copyright 2019 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. */
+
+#supervision-onboarding-back-button,
+#supervision-onboarding-skip-button {
+  padding-inline-end: 6px;
+}
+
+#supervisionOnboardingWebview {
+  height: 560px;
+}
+

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

@@ -5,6 +5,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://oobe/custom_elements.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.html">
 <link rel="import" href="chrome://resources/mojo/url/mojom/url.mojom.html">
 <script src="chrome://oobe/supervision/onboarding_controller.mojom-lite.js">
@@ -16,24 +17,37 @@
 <dom-module id="supervision-onboarding">
   <template>
     <link rel="stylesheet" href="oobe_flex_layout.css">
-    <oobe-dialog id="supervision-onboarding-dialog" has-buttons>
-      <webview id="contentWebview" slot="footer" hidden></webview>
-      <div slot="bottom-buttons" class="flex layout horizontal">
-        <oobe-back-button id="back-button"
-          on-tap="onBack_">
-          Back
-        </oobe-back-button>
-        <div class="flex">
+    <link rel="stylesheet" href="supervision_onboarding.css">
+    <div id="supervision-onboarding-flow-container">
+      <oobe-dialog id="loading-dialog" role="dialog" no-header no-footer-padding
+          hidden="[[pageLoaded_]]">
+        <div slot="footer" class="flex layout vertical center center-justified">
+          <throbber-notice text="$i18n{supervisionOnboardingWaitMessage}">
+          </throbber-notice>
         </div>
-        <oobe-text-button id="skip-button"
-            border on-tap="onSkip_">
-          Skip
-        </oobe-text-button>
-        <oobe-text-button id="next-button"
-            inverse on-tap="onNext_">
-          Next
-        </oobe-text-button>
-      </div>
-    </oobe-dialog>
+      </oobe-dialog>
+      <oobe-dialog id="supervision-onboarding-content" role="dialog" no-header
+          no-footer-padding has-buttons hidden="[[!pageLoaded_]]">
+        <webview id="supervisionOnboardingWebview" slot="footer">
+        </webview>
+        <div id="supervision-onboarding-flow-buttons" slot="bottom-buttons"
+            class="layout horizontal end-justified">
+          <oobe-back-button id="supervision-onboarding-back-button"
+              on-tap="onBack_">
+            <div i18n-content="supervisionOnboardingBackButtonLabel"></div>
+          </oobe-back-button>
+          <div class="flex">
+          </div>
+          <oobe-text-button id="supervision-onboarding-skip-button" border
+              on-tap="onSkip_">
+            <div i18n-content="supervisionOnboardingSkipButtonLabel"></div>
+          </oobe-text-button>
+          <oobe-text-button id="supervision-onboarding-next-button" inverse
+              on-tap="onNext_">
+            <div i18n-content="supervisionOnboardingNextButtonLabel"></div>
+          </oobe-text-button>
+        </div>
+      </oobe-dialog>
+    </div>
   </template>
 </dom-module>

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

@@ -89,7 +89,8 @@
       }
 
       const header = responseEvent.responseHeaders.find(
-          h => h.name == this.page_.customHeaderName);
+          h => h.name.toUpperCase() ==
+              this.page_.customHeaderName.toUpperCase());
       this.customHeaderValue_ = header ? header.value : null;
 
       return {};
@@ -126,15 +127,18 @@
       this.pendingLoadPageCallback_({
         customHeaderValue: this.customHeaderValue_,
       });
-
-      this.webview_.hidden = false;
     }
   }
 
   Polymer({
     is: 'supervision-onboarding',
 
-    behaviors: [LoginScreenBehavior],
+    behaviors: [LoginScreenBehavior, OobeDialogHostBehavior],
+
+    properties: {
+      /** True if the webview loaded the page. */
+      pageLoaded_: {type: Boolean, value: false},
+    },
 
     /** Overridden from LoginScreenBehavior. */
     EXTERNAL_API: [
@@ -154,15 +158,22 @@
     webviewLoader_: null,
 
     setupMojo: function() {
-      this.webviewLoader_ = new WebviewLoader(this.$.contentWebview);
+      this.webviewLoader_ =
+          new WebviewLoader(this.$.supervisionOnboardingWebview);
 
       this.controller_ =
           chromeos.supervision.mojom.OnboardingController.getProxy();
 
       this.hostCallbackRouter_ =
           new chromeos.supervision.mojom.OnboardingWebviewHostCallbackRouter();
-      this.hostCallbackRouter_.loadPage.addListener(
-          this.webviewLoader_.loadPage.bind(this.webviewLoader_));
+
+      this.hostCallbackRouter_.loadPage.addListener(p => {
+        this.pageLoaded_ = false;
+        return this.webviewLoader_.loadPage(p).then(response => {
+          this.pageLoaded_ = true;
+          return response;
+        });
+      });
       this.hostCallbackRouter_.exitFlow.addListener(this.exitFlow_.bind(this));
 
       this.controller_.bindWebviewHost(this.hostCallbackRouter_.createProxy());

chrome/browser/ui/webui/chromeos/login/supervision_onboarding_screen_handler.cc

@@ -11,6 +11,7 @@
 #include "chrome/browser/profiles/profile_manager.h"
 #include "chrome/browser/ui/ash/login_screen_client.h"
 #include "chrome/browser/ui/webui/chromeos/login/oobe_ui.h"
+#include "chrome/grit/generated_resources.h"
 #include "components/login/localized_values_builder.h"
 
 namespace chromeos {
@@ -30,7 +31,14 @@ SupervisionOnboardingScreenHandler::~SupervisionOnboardingScreenHandler() {
 
 void SupervisionOnboardingScreenHandler::DeclareLocalizedValues(
     ::login::LocalizedValuesBuilder* builder) {
-  // TODO(ltenorio): Add the strings for the back/next buttons here.
+  builder->Add("supervisionOnboardingWaitMessage",
+               IDS_SUPERVISION_ONBOARDING_WAIT_MESSAGE);
+  builder->Add("supervisionOnboardingNextButtonLabel",
+               IDS_SUPERVISION_ONBOARDING_NEXT_BUTTON);
+  builder->Add("supervisionOnboardingSkipButtonLabel",
+               IDS_SUPERVISION_ONBOARDING_SKIP_BUTTON);
+  builder->Add("supervisionOnboardingBackButtonLabel",
+               IDS_SUPERVISION_ONBOARDING_BACK_BUTTON);
 }
 
 void SupervisionOnboardingScreenHandler::Bind(