[CrOS MultiDevice] Only make setup flow Mojo connection when needed.

Previously, the MultiDevice setup flow would make a connection to the
Mojo service as soon as the flow was loaded. However, in OOBE mode, this
means that the WebUI page requests a connection as soon as OOBE loads,
which is before the user has signed in. Since the MultiDeviceSetup
service is only created once the user has signed in, the strategy of
connecting as soon as the page loads resulted in trying to connect to a
service which had not yet been registered.

This CL delays the process of connecting to the Mojo service; now, a
connection is made only when the initializeSetupFlow() function is called
or the "multidevice_setup.initializeSetupFlow" WebUI event is fired.

Bug: 884065
Change-Id: I2dde7916ac400625677c45d6de1c0fc72afab976
Reviewed-on: https://chromium-review.googlesource.com/c/1259835
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Ryan Hansberry <hansberry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#596697}

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

@@ -14,6 +14,7 @@ js_type_check("closure_compile") {
 js_library("multidevice_setup_post_oobe") {
   deps = [
     ":post_oobe_delegate",
+    "//ui/webui/resources/cr_components/chromeos/multidevice_setup:multidevice_setup",
   ]
 }
 

chrome/browser/resources/chromeos/multidevice_setup/multidevice_setup_post_oobe.js

@@ -43,6 +43,7 @@ Polymer({
   /** @override */
   attached: function() {
     this.delegate_ = new multidevice_setup.PostOobeDelegate();
+    this.$$('multidevice-setup').initializeSetupFlow();
   },
 
   /** @private */

chrome/test/data/webui/multidevice_setup/integration_test.js

@@ -45,6 +45,20 @@ cr.define('multidevice_setup', () => {
     }
   }
 
+  /** @implements {multidevice_setup.MojoInterfaceProvider} */
+  class FakeMojoInterfaceProviderImpl {
+    /** @param {!FakeMojoService} fakeMojoService */
+    constructor(fakeMojoService) {
+      /** @private {!FakeMojoService} */
+      this.fakeMojoService_ = fakeMojoService;
+    }
+
+    /** @override */
+    getInterfacePtr() {
+      return this.fakeMojoService_;
+    }
+  }
+
   function registerIntegrationTests() {
     suite('MultiDeviceSetup', () => {
       /**
@@ -65,6 +79,9 @@ cr.define('multidevice_setup', () => {
        */
       let backwardButton;
 
+      /** @type {!FakeMojoService} */
+      let fakeMojoService;
+
       const PASSWORD = 'password-page';
       const SUCCESS = 'setup-succeeded-page';
       const START = 'start-setup-page';
@@ -72,7 +89,9 @@ cr.define('multidevice_setup', () => {
       setup(() => {
         multiDeviceSetupElement = document.createElement('multidevice-setup');
         multiDeviceSetupElement.delegate = new FakeDelegate();
-        multiDeviceSetupElement.multideviceSetup_ = new FakeMojoService();
+        fakeMojoService = new FakeMojoService();
+        multiDeviceSetupElement.mojoInterfaceProvider_ =
+            new FakeMojoInterfaceProviderImpl(fakeMojoService);
 
         document.body.appendChild(multiDeviceSetupElement);
         forwardButton = multiDeviceSetupElement.$$('button-bar').$$('#forward');

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

@@ -60,6 +60,7 @@ js_library("multidevice_setup") {
     ":setup_succeeded_page",
     ":start_setup_page",
     "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:web_ui_listener_behavior",
   ]
 
   extra_deps = [

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

@@ -14,15 +14,19 @@ cr.define('multidevice_setup', function() {
   /** @implements {multidevice_setup.MojoInterfaceProvider} */
   class MojoInterfaceProviderImpl {
     constructor() {
-      /** @private {!chromeos.multideviceSetup.mojom.MultiDeviceSetupPtr} */
-      this.ptr_ = new chromeos.multideviceSetup.mojom.MultiDeviceSetupPtr();
-      Mojo.bindInterface(
-          chromeos.multideviceSetup.mojom.MultiDeviceSetup.name,
-          mojo.makeRequest(this.ptr_).handle);
+      /** @private {?chromeos.multideviceSetup.mojom.MultiDeviceSetupPtr} */
+      this.ptr_ = null;
     }
 
     /** @override */
     getInterfacePtr() {
+      if (!this.ptr_) {
+        this.ptr_ = new chromeos.multideviceSetup.mojom.MultiDeviceSetupPtr();
+        Mojo.bindInterface(
+            chromeos.multideviceSetup.mojom.MultiDeviceSetup.name,
+            mojo.makeRequest(this.ptr_).handle);
+      }
+
       return this.ptr_;
     }
   }

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

@@ -10,6 +10,7 @@
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/setup_succeeded_page.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/start_setup_page.html">
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 
 <dom-module id="multidevice-setup">

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

@@ -18,6 +18,8 @@ cr.define('multidevice_setup', function() {
   const MultiDeviceSetup = Polymer({
     is: 'multidevice-setup',
 
+    behaviors: [WebUIListenerBehavior],
+
     properties: {
       /**
        * Delegate object which performs differently in OOBE vs. non-OOBE mode.
@@ -106,10 +108,10 @@ cr.define('multidevice_setup', function() {
       passwordPageForwardButtonDisabled_: Boolean,
 
       /**
-       * Interface to the MultiDeviceSetup Mojo service.
-       * @private {!chromeos.multideviceSetup.mojom.MultiDeviceSetupImpl}
+       * Provider of an interface to the MultiDeviceSetup Mojo service.
+       * @private {!multidevice_setup.MojoInterfaceProvider}
        */
-      multideviceSetup_: Object
+      mojoInterfaceProvider_: Object
     },
 
     listeners: {
@@ -119,14 +121,20 @@ cr.define('multidevice_setup', function() {
 
     /** @override */
     created: function() {
-      this.multideviceSetup_ =
-          multidevice_setup.MojoInterfaceProviderImpl.getInstance()
-              .getInterfacePtr();
+      this.mojoInterfaceProvider_ =
+          multidevice_setup.MojoInterfaceProviderImpl.getInstance();
     },
 
     /** @override */
-    attached: function() {
-      this.multideviceSetup_.getEligibleHostDevices()
+    ready: function() {
+      this.addWebUIListener(
+          'multidevice_setup.initializeSetupFlow',
+          this.initializeSetupFlow.bind(this));
+    },
+
+    initializeSetupFlow: function() {
+      this.mojoInterfaceProvider_.getInterfacePtr()
+          .getEligibleHostDevices()
           .then((responseParams) => {
             if (responseParams.eligibleHostDevices.length == 0) {
               console.warn('Potential host list is empty.');