[CrOS MultiDevice] Convert MojoApiBehavior to class-based approach.

The previous approach used a behavior, meaning that any Polymer element
which needs to access the JS Mojo API needs to create its own
InterfacePtr to the Mojo service. In a follow-up CL, I will be adding a
new client of this interface, so it would have been wasteful to create
two separate connections to the service.

This CL converts this behavior to a class-based approach which utilizes
a singleton class which stores a single instance of the pointer.

Bug: 884058
Change-Id: I0b2c13677309b9949a0f26d2f11dd40ea8f15b1c
Reviewed-on: https://chromium-review.googlesource.com/1247035Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#594518}

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

@@ -30,7 +30,7 @@ cr.define('multidevice_setup', () => {
 
       setup(() => {
         multiDeviceSetupElement = document.createElement('multidevice-setup');
-        multiDeviceSetupElement.multideviceSetup = new FakeMojoService();
+        multiDeviceSetupElement.multideviceSetup_ = new FakeMojoService();
         multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.POST_OOBE;
 
         document.body.appendChild(multiDeviceSetupElement);
@@ -66,7 +66,7 @@ cr.define('multidevice_setup', () => {
         });
 
         setVisiblePage(START);
-        multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed = true;
+        multiDeviceSetupElement.multideviceSetup_.shouldSetHostSucceed = true;
         multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.OOBE;
 
         backwardButton.click();
@@ -83,7 +83,7 @@ cr.define('multidevice_setup', () => {
                 });
 
             setVisiblePage(START);
-            multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed =
+            multiDeviceSetupElement.multideviceSetup_.shouldSetHostSucceed =
                 true;
             multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.OOBE;
 
@@ -98,7 +98,7 @@ cr.define('multidevice_setup', () => {
         multiDeviceSetupElement.addEventListener('setup-exited', () => done());
 
         setVisiblePage(START);
-        multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed = true;
+        multiDeviceSetupElement.multideviceSetup_.shouldSetHostSucceed = true;
         multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.POST_OOBE;
 
         backwardButton.click();
@@ -108,7 +108,7 @@ cr.define('multidevice_setup', () => {
         multiDeviceSetupElement.addEventListener('setup-exited', () => done());
 
         setVisiblePage(PASSWORD);
-        multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed = true;
+        multiDeviceSetupElement.multideviceSetup_.shouldSetHostSucceed = true;
         multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.POST_OOBE;
 
         backwardButton.click();
@@ -125,7 +125,7 @@ cr.define('multidevice_setup', () => {
                 });
 
             setVisiblePage(PASSWORD);
-            multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed =
+            multiDeviceSetupElement.multideviceSetup_.shouldSetHostSucceed =
                 true;
             multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.POST_OOBE;
 

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

@@ -10,7 +10,7 @@ js_type_check("closure_compile") {
   deps = [
     ":button_bar",
     ":fake_mojo_service",
-    ":mojo_api_behavior",
+    ":mojo_api",
     ":multidevice_setup",
     ":multidevice_setup_browser_proxy",
     ":setup_failed_page",
@@ -49,14 +49,14 @@ js_library("fake_mojo_service") {
   ]
 }
 
-js_library("mojo_api_behavior") {
+js_library("mojo_api") {
 }
 
 js_library("multidevice_setup") {
   deps = [
     ":button_bar",
     ":fake_mojo_service",
-    ":mojo_api_behavior",
+    ":mojo_api",
     ":password_page",
     ":setup_failed_page",
     ":setup_succeeded_page",

ui/webui/resources/cr_components/chromeos/multidevice_setup/mojo_api_behavior.html → ui/webui/resources/cr_components/chromeos/multidevice_setup/mojo_api.html

@@ -8,5 +8,5 @@
 </script>
 <script src="chrome://resources/js/chromeos/multidevice_setup_constants.mojom.js">
 </script>
-<script src="chrome://resources/cr_components/chromeos/multidevice_setup/mojo_api_behavior.js">
+<script src="chrome://resources/cr_components/chromeos/multidevice_setup/mojo_api.js">
 </script>

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

+// Copyright 2018 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.
+
+cr.define('multidevice_setup', function() {
+  /** @interface */
+  class MojoInterfaceProvider {
+    /**
+     * @return {!chromeos.multideviceSetup.mojom.MultiDeviceSetupImpl}
+     */
+    getInterfacePtr() {}
+  }
+
+  /** @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);
+    }
+
+    /** @override */
+    getInterfacePtr() {
+      return this.ptr_;
+    }
+  }
+
+  cr.addSingletonGetter(MojoInterfaceProviderImpl);
+
+  return {
+    MojoInterfaceProvider: MojoInterfaceProvider,
+    MojoInterfaceProviderImpl: MojoInterfaceProviderImpl,
+  };
+});

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

-// Copyright 2018 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.
-
-/** @polymerBehavior */
-const MojoApiBehavior = {
-  properties: {
-    /**
-     * Provides access to the MultiDeviceSetup Mojo service.
-     * @type {!chromeos.multideviceSetup.mojom.MultiDeviceSetupImpl}
-     */
-    multideviceSetup: {
-      type: Object,
-      value: function() {
-        let ptr = new chromeos.multideviceSetup.mojom.MultiDeviceSetupPtr();
-        Mojo.bindInterface(
-            chromeos.multideviceSetup.mojom.MultiDeviceSetup.name,
-            mojo.makeRequest(ptr).handle);
-        return ptr;
-      },
-    }
-  },
-};

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

@@ -2,7 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/button_bar.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/fake_mojo_service.html">
-<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/mojo_api_behavior.html">
+<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/mojo_api.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/password_page.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/setup_failed_page.html">

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

@@ -88,20 +88,29 @@ cr.define('multidevice_setup', function() {
         computed: 'shouldForwardButtonBeDisabled_(' +
             'passwordPageForwardButtonDisabled_, visiblePageName_)',
       },
-    },
 
-    behaviors: [
-      MojoApiBehavior,
-    ],
+      /**
+       * Interface to the MultiDeviceSetup Mojo service.
+       * @private {!chromeos.multideviceSetup.mojom.MultiDeviceSetupImpl}
+       */
+      multideviceSetup_: Object
+    },
 
     listeners: {
       'backward-navigation-requested': 'onBackwardNavigationRequested_',
       'forward-navigation-requested': 'onForwardNavigationRequested_',
     },
 
+    /** @override */
+    created: function() {
+      this.multideviceSetup_ =
+          multidevice_setup.MojoInterfaceProviderImpl.getInstance()
+              .getInterfacePtr();
+    },
+
     /** @override */
     attached: function() {
-      this.multideviceSetup.getEligibleHostDevices()
+      this.multideviceSetup_.getEligibleHostDevices()
           .then((responseParams) => {
             if (responseParams.eligibleHostDevices.length == 0) {
               console.warn('Potential host list is empty.');
@@ -138,7 +147,7 @@ cr.define('multidevice_setup', function() {
         case PageName.PASSWORD:
           this.$.passwordPage.clearPasswordTextInput();
           let deviceId = /** @type {string} */ (this.selectedDeviceId_);
-          this.multideviceSetup.setHostDevice(deviceId, this.authToken_)
+          this.multideviceSetup_.setHostDevice(deviceId, this.authToken_)
               .then((responseParams) => {
                 if (!responseParams.success) {
                   console.warn(

ui/webui/resources/cr_components/cr_components_resources.grdp

@@ -264,12 +264,12 @@
                file="cr_components/chromeos/multidevice_setup/icons.html"
                type="chrome_html"
                compress="gzip" />
-    <structure name="IDR_WEBUI_CHROMEOS_MULTIDEVICE_SETUP_MOJO_API_BEHAVIOR_HTML"
-               file="cr_components/chromeos/multidevice_setup/mojo_api_behavior.html"
+    <structure name="IDR_WEBUI_CHROMEOS_MULTIDEVICE_SETUP_MOJO_API_HTML"
+               file="cr_components/chromeos/multidevice_setup/mojo_api.html"
                type="chrome_html"
                compress="gzip" />
-    <structure name="IDR_WEBUI_CHROMEOS_MULTIDEVICE_SETUP_MOJO_API_BEHAVIOR_JS"
-               file="cr_components/chromeos/multidevice_setup/mojo_api_behavior.js"
+    <structure name="IDR_WEBUI_CHROMEOS_MULTIDEVICE_SETUP_MOJO_API_JS"
+               file="cr_components/chromeos/multidevice_setup/mojo_api.js"
                type="chrome_html"
                compress="gzip" />
     <structure name="IDR_WEBUI_CHROMEOS_MULTIDEVICE_SETUP_MULTIDEVICE_SETUP_HTML"