[Multidevice OOBE] Add loading indicator to learn more dialogs.

This also fixes the flash of previous dialog content by covering
it with a loading indication until the new content has been loaded.

Bug: 956491
Change-Id: I06f03c1194925c45d3f40a054e26a017ac48c074
Tested: Heavily manually tested swapping between links.
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1668494
Auto-Submit: Jeremy Klein <jlklein@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Jeremy Klein <jlklein@chromium.org>
Cr-Commit-Position: refs/heads/master@{#671961}

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

@@ -10,6 +10,7 @@
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/multidevice_setup.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <!--
   UI for the MultiDevice setup flow when displayed after OOBE or during the
   user's first login on this Chromebook. Note that this flow is
@@ -32,18 +33,13 @@
         width: 768px;
       }
 
-      #multidevice-help-overlay-webview {
+      #multideviceHelpOverlayWebview {
         border: 1px solid #d9d9d9;
         display: block;
         height: 450px;
         width: 100%;
       }
 
-      #multidevice-help-overlay-webview-container.overlay-loading > webview,
-      #multidevice-help-overlay-webview-container:not(.overlay-loading) > div {
-        display: none;
-      }
-
       #multidevice-help-overlay-webview-container {
         box-sizing: border-box;
         height: 482px;
@@ -52,6 +48,11 @@
         width: 100%;
       }
 
+      .multidevice-help-overlay-webview-loading {
+          height: 100%;
+          width: 100%;
+      }
+
       .multidevice-help-overlay-close-top {
         background-image: url(chrome://theme/IDR_CLOSE_DIALOG);
         background-position: center;
@@ -111,7 +112,13 @@
             title="[[getOverlayCloseTopTitle_()]]">
         </div>
         <div id="multidevice-help-overlay-webview-container">
-          <webview id="multidevice-help-overlay-webview"
+          <div class="multidevice-help-overlay-webview-loading
+                      layout horizontal center-center"
+              hidden$="[[!isWebviewLoading_]]">
+            <throbber-notice i18n-values="text:gaiaLoading"></throbber-notice>
+          </div>
+          <webview id="multideviceHelpOverlayWebview"
+              hidden$="[[isWebviewLoading_]]"
               src="[[webviewSrc_]]"></webview>
         </div>
         <div class="multidevice-help-button-strip">

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

@@ -90,6 +90,12 @@ cr.define('multidevice_setup', function() {
         value: true,
       },
 
+      /** Whether the webview is currently loading. */
+      isWebviewLoading_: {
+        type: Boolean,
+        value: false,
+      },
+
       /**
        * URL for the webview to display.
        * @private {string|undefined}
@@ -107,6 +113,10 @@ cr.define('multidevice_setup', function() {
     /** @override */
     attached: function() {
       this.delegate_ = new MultiDeviceSetupFirstRunDelegate();
+      this.$.multideviceHelpOverlayWebview.addEventListener(
+          'contentload', () => {
+            this.isWebviewLoading_ = false;
+          });
     },
 
     /** @override */
@@ -137,21 +147,9 @@ cr.define('multidevice_setup', function() {
       }
     },
 
-    /**
-     * @param {boolean} shouldShow
-     * @param {string=} opt_url
-     * @private
-     */
-    setWebviewOverlayVisibility_: function(shouldShow, opt_url) {
-      if (opt_url) {
-        this.webviewSrc_ = opt_url;
-      }
-      this.webviewOverlayHidden_ = !shouldShow;
-    },
-
     /** @private */
     hideWebviewOverlay_: function() {
-      this.setWebviewOverlayVisibility_(false /* shouldShow */);
+      this.webviewOverlayHidden_ = true;
     },
 
     /**
@@ -159,8 +157,9 @@ cr.define('multidevice_setup', function() {
      * @private
      */
     onOpenLearnMoreWebviewRequested_: function(event) {
-      this.setWebviewOverlayVisibility_(
-          true /* shouldShow */, event.detail /* url */);
+      this.isWebviewLoading_ = true;
+      this.webviewSrc_ = event.detail;
+      this.webviewOverlayHidden_ = false;
     },
 
     /** @private */