[CrOS MultiDevice] Display a modal webview of links in MultiDevice OOBE screen.

Links can't be opened like they usually would be in OOBE, because there's no
browser to open them in. This CL creates a webview modal which is displayed
when the user clicks on one of the two "Learn More" links in the MultiDevice
OOBE screen, and loads it with the appropriate URL.

Screenshot: https://screenshot.googleplex.com/JL9nfShorRA.png

Bug: 893349
Change-Id: I1ac06ea26857adcdf1f3113756e95e15b2f8a127
Reviewed-on: https://chromium-review.googlesource.com/c/1275296
Commit-Queue: Ryan Hansberry <hansberry@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#599084}

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

@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://oobe/custom_elements.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/multidevice_setup_shared_css.html">
 <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">
 <!--
   UI for the MultiDevice setup flow when displayed after OOBE or during the
@@ -24,7 +25,63 @@
 -->
 <dom-module id="multidevice-setup-first-run">
   <template>
-    <style include="shared-style multidevice-setup-shared"></style>
+    <link rel="stylesheet" href="oobe_popup_overlay.css">
+    <style include="shared-style multidevice-setup-shared ">
+      #multidevice-help-overlay-container {
+        width: 768px;
+      }
+
+      #multidevice-help-overlay-webview {
+        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;
+        margin: auto;
+        padding: 24px 8px 8px 8px;
+        width: 100%;
+      }
+
+      .multidevice-help-overlay-close-top {
+        background-image: url(chrome://theme/IDR_CLOSE_DIALOG);
+        background-position: center;
+        background-repeat: no-repeat;
+        height: 14px;
+        position: absolute;
+        right: 7px;
+        top: 7px;
+        width: 14px;
+        z-index: 1;
+      }
+
+      html[dir='rtl'] .multidevice-help-overlay-close-top {
+        left: 10px;
+        right: auto;
+      }
+
+      .multidevice-help-overlay-close-top:hover {
+        background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
+      }
+
+      .multidevice-help-overlay-close-top:active {
+        background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
+      }
+
+      .multidevice-help-button-strip {
+        display: flex;
+        justify-content: flex-end;
+        margin: 8px;
+      }
+    </style>
     <multidevice-setup delegate="[[delegate_]]"
         on-setup-exited="onExitRequested_"
         forward-button-text="{{forwardButtonText_}}"
@@ -38,5 +95,31 @@
         <div>[[forwardButtonText_]]</div>
       </oobe-next-button>
     </multidevice-setup>
+
+    <div id="multidevice-help-overlay" class="popup-overlay"
+        hidden$="[[webviewOverlayHidden_]]">
+      <div id="multidevice-help-overlay-container"
+          class="oobe-popup not-resizable">
+        <div id="multidevice-help-overlay-close-top"
+            class="multidevice-help-overlay-close-top
+                multidevice-help-overlay-close-button"
+            on-click="hideWebviewOverlay_"
+            title="[[getOverlayCloseTopTitle_()]]">
+        </div>
+        <div id="multidevice-help-overlay-webview-container">
+          <webview id="multidevice-help-overlay-webview"
+              src="[[webviewSrc_]]"></webview>
+        </div>
+        <div class="multidevice-help-button-strip">
+          <oobe-text-button inverse id="multidevice-help-overlay-close-bottom"
+              class="multidevice-help-overlay-close-button"
+              on-click="hideWebviewOverlay_">
+            <!-- TODO(crbug.com/894537): Use string that is specific to
+                    MultiDevice. -->
+            <div i18n-content="arcOverlayClose"></div>
+          </oobe-text-button>
+        </div>
+      </div>
+    </div>
   </template>
 </dom-module>

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

@@ -50,7 +50,7 @@ cr.define('multidevice_setup', function() {
   const MultiDeviceSetupFirstRun = Polymer({
     is: 'multidevice-setup-first-run',
 
-    behaviors: [WebUIListenerBehavior],
+    behaviors: [I18nBehavior, WebUIListenerBehavior],
 
     properties: {
       /** @private {!multidevice_setup.MultiDeviceSetupDelegate} */
@@ -82,6 +82,25 @@ cr.define('multidevice_setup', function() {
         type: String,
         value: '',
       },
+
+      /** Whether the webview overlay should be hidden. */
+      webviewOverlayHidden_: {
+        type: Boolean,
+        value: true,
+      },
+
+      /**
+       * URL for the webview to display.
+       * @private {string|undefined}
+       */
+      webviewSrc_: {
+        type: String,
+        value: '',
+      },
+    },
+
+    listeners: {
+      'open-learn-more-webview-requested': 'onOpenLearnMoreWebviewRequested_',
     },
 
     /** @override */
@@ -99,7 +118,38 @@ cr.define('multidevice_setup', function() {
     /** @private */
     onExitRequested_: function() {
       chrome.send('login.MultiDeviceSetupScreen.userActed', ['setup-finished']);
-    }
+    },
+
+    /**
+     * @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 */);
+    },
+
+    /**
+     * @param {!{detail: string}} event
+     * @private
+     */
+    onOpenLearnMoreWebviewRequested_: function(event) {
+      this.setWebviewOverlayVisibility_(
+          true /* shouldShow */, event.detail /* url */);
+    },
+
+    /** @private */
+    getOverlayCloseTopTitle_: function() {
+      return this.i18n('arcOverlayClose');
+    },
   });
 
   return {

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

@@ -2,6 +2,7 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 <link rel="import" href="chrome://oobe/custom_elements.html">
+<link rel="stylesheet" href="chrome://resources/css/overlay.css">
 
 <div class="step right hidden" id="multidevice-setup" hidden>
   <multidevice-setup-first-run id="multidevice-setup-impl">

ui/webui/resources/cr_components/chromeos/multidevice_setup/BUILD.gn

@@ -18,6 +18,7 @@ js_type_check("closure_compile") {
     ":setup_succeeded_page",
     ":start_setup_page",
     ":ui_page_container_behavior",
+    "//ui/webui/resources/js:web_ui_listener_behavior",
   ]
 }
 
@@ -116,6 +117,7 @@ js_library("setup_succeeded_page") {
 js_library("start_setup_page") {
   deps = [
     ":ui_page_container_behavior",
+    "//ui/webui/resources/js:web_ui_listener_behavior",
   ]
 }
 

ui/webui/resources/cr_components/chromeos/multidevice_setup/start_setup_page.html

@@ -5,6 +5,8 @@
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/ui_page.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/ui_page_container_behavior.html">
 <link rel="import" href="chrome://resources/html/cr.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-icon/iron-icon.html">
 
 <dom-module id="start-setup-page">
@@ -78,7 +80,7 @@
     </style>
 
     <ui-page header-text="[[headerText]]" icon-name="google-g">
-      <span slot="message" inner-h-t-m-l="[[messageHtml]]"></span>
+      <span slot="message" id="multidevice-summary-message" inner-h-t-m-l="[[messageHtml]]"></span>
       <div slot="additional-content">
         <div id="selector-and-details-container">
           <div id="deviceSelectionContainer" class="flex">
@@ -109,7 +111,7 @@
             </div>
             <div class="feature-detail">
               <iron-icon icon="multidevice-setup-icons-20:messages"></iron-icon>
-              <span inner-h-t-m-l="
+              <span id="awm-summary-message" inner-h-t-m-l="
                   [[i18nAdvanced('startSetupPageFeatureListAwm')]]">
               </span>
             </div>

ui/webui/resources/cr_components/chromeos/multidevice_setup/start_setup_page.js

@@ -58,8 +58,31 @@ Polymer({
   behaviors: [
     UiPageContainerBehavior,
     I18nBehavior,
+    WebUIListenerBehavior,
   ],
 
+  /** @override */
+  attached: function() {
+    this.addWebUIListener(
+        'multidevice_setup.initializeSetupFlow',
+        this.initializeSetupFlow_.bind(this));
+  },
+
+  /** @private */
+  initializeSetupFlow_: function() {
+    // The "Learn More" links are inside a grdp string, so we cannot actually
+    // add an onclick handler directly to the html. Instead, grab the two and
+    // manaully add onclick handlers.
+    let helpArticleLinks = [
+      this.$$('#multidevice-summary-message a'),
+      this.$$('#awm-summary-message a')
+    ];
+    for (let i = 0; i < helpArticleLinks.length; i++) {
+      helpArticleLinks[i].onclick = this.fire.bind(
+          this, 'open-learn-more-webview-requested', helpArticleLinks[i].href);
+    }
+  },
+
   /**
    * @param {!Array<!chromeos.deviceSync.mojom.RemoteDevice>} devices
    * @return {string} Label for devices selection content.