[CrOS MultiDevice]: Allow settings UI page to detach itself from DOM

The "multidevice" settings-section is only suppose to appear when the
Chrombook has a potential host. This information comes from a mojo
call on that takes place further down the DOM tree than the basic-page
element so the connected devices infrastructure must itself be able to
detach any significant elements based on the results of the mojo call.
By wrapping the entire multidevice settings-section element in a
separate container element, we can make the container keep the entire
section from the DOM without tinkering further up the tree.

Change-Id: I766164a2d04ea42f77bb0c101a17c2e1eadad016
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Reviewed-on: https://chromium-review.googlesource.com/1105185Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568518}

chrome/browser/resources/settings/basic_page/basic_page.html

@@ -21,7 +21,7 @@
 <link rel="import" href="../crostini_page/crostini_page.html">
 <link rel="import" href="../device_page/device_page.html">
 <link rel="import" href="../internet_page/internet_page.html">
-<link rel="import" href="../multidevice_page/multidevice_page.html">
+<link rel="import" href="../multidevice_page/multidevice_section_container.html">
 </if>
 
 <if expr="not chromeos">
@@ -113,11 +113,8 @@
         <template is="dom-if"
             if="[[shouldShowMultidevice_(showMultidevice, pageVisibility)]]"
             restamp>
-          <settings-section page-title="$i18n{multidevicePageTitle}"
-              section="multidevice">
-            <settings-multidevice-page prefs="{{prefs}}">
-            </settings-multidevice-page>
-          </settings-section>
+          <settings-multidevice-section-container prefs="{{prefs}}">
+          </settings-multidevice-section-container>
         </template>
         <template is="dom-if" if="[[showPage_(pageVisibility.bluetooth)]]"
             restamp>

chrome/browser/resources/settings/multidevice_page/multidevice_section_container.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="../settings_page/settings_section.html">
+<link rel="import" href="multidevice_page.html">
+
+<dom-module id="settings-multidevice-section-container">
+  <template>
+    <template is="dom-if" if="[[hostFound_(mode_)]]" restamp>
+      <settings-section page-title="$i18n{multidevicePageTitle}"
+          section="multidevice">
+        <settings-multidevice-page prefs="[[prefs]]" mode="[[mode_]]">
+        </settings-multidevice-page>
+      </settings-section>
+    </template>
+  </template>
+  <script src="multidevice_section_container.js"></script>
+</dom-module>

chrome/browser/resources/settings/multidevice_page/multidevice_section_container.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.
+
+/**
+ * @fileoverview
+ * Container element that interfaces with a Mojo API to ensure that the entire
+ * multidevice settings-section is not attached to the DOM if there is not a
+ * host device or potential host device. It also provides the page with the
+ * data it needs to provide the user with the correct infomation and call(s) to
+ * action based on the data retrieved from the Mojo service (i.e. the mode_
+ * property).
+ */
+
+Polymer({
+  is: 'settings-multidevice-section-container',
+
+  properties: {
+    /** SettingsPrefsElement 'prefs' Object reference. See prefs.js. */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
+    // TODO(jordynass): Set this property based on the results of the Mojo call.
+    /** @type {settings.MultiDeviceSettingsMode} */
+    mode_: {
+      type: Number,
+      value: settings.MultiDeviceSettingsMode.NO_HOST_SET,
+    },
+  },
+
+  /** @return {boolean} */
+  hostFound_: function() {
+    return this.mode_ != settings.MultiDeviceSettingsMode.NO_ELIGIBLE_HOSTS;
+  },
+});

chrome/browser/resources/settings/settings_resources.grd

@@ -1299,6 +1299,12 @@
         <structure name="IDR_SETTINGS_MULTIDEVICE_PAGE_JS"
                    file="multidevice_page/multidevice_page.js"
                    type="chrome_html" />
+        <structure name="IDR_SETTINGS_MULTIDEVICE_SECTION_CONTAINER_HTML"
+                   file="multidevice_page/multidevice_section_container.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_MULTIDEVICE_SECTION_CONTAINER_JS"
+                   file="multidevice_page/multidevice_section_container.js"
+                   type="chrome_html" />
         <structure name="IDR_SETTINGS_NETWORK_PROXY_SECTION_HTML"
                    file="internet_page/network_proxy_section.html"
                    type="chrome_html" />

chrome/test/data/webui/settings/cr_settings_browsertest.js

@@ -1795,6 +1795,30 @@ TEST_F('CrSettingsSmbPageTest', 'All', function() {
   mocha.run();
 });
 
+/**
+ * Test fixture for the multidevice settings section container.
+ * @constructor
+ * @extends {CrSettingsBrowserTest}
+ */
+function CrSettingsMultideviceSectionContainerTest() {}
+
+CrSettingsMultideviceSectionContainerTest.prototype = {
+  __proto__: CrSettingsBrowserTest.prototype,
+
+  /** @override */
+  browsePreload:
+      'chrome://settings/multidevice_page/multidevice_section_container.html',
+
+  /** @override */
+  extraLibraries: CrSettingsBrowserTest.prototype.extraLibraries.concat([
+    'multidevice_section_container_tests.js',
+  ]),
+};
+
+TEST_F('CrSettingsMultideviceSectionContainerTest', 'All', function() {
+  mocha.run();
+});
+
 /**
  * Test fixture for the multidevice settings page.
  * @constructor

chrome/test/data/webui/settings/multidevice_section_container_tests.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.
+
+suite('Multidevice', function() {
+  let multideviceSectionContainer = null;
+
+  let ALL_MODES;
+
+  suiteSetup(function() {});
+
+  setup(function() {
+    PolymerTest.clearBody();
+    multideviceSectionContainer =
+        document.createElement('settings-multidevice-section-container');
+    assertTrue(!!multideviceSectionContainer);
+
+    ALL_MODES = Object.values(settings.MultiDeviceSettingsMode);
+
+    document.body.appendChild(multideviceSectionContainer);
+    Polymer.dom.flush();
+  });
+
+  teardown(function() {
+    multideviceSectionContainer.remove();
+  });
+
+  let isSettingsSectionVisible = function() {
+    Polymer.dom.flush();
+    let settingsSection = multideviceSectionContainer.$$(
+        'settings-section[section="multidevice"]');
+    return !!settingsSection && !settingsSection.hidden;
+  };
+
+  test('mode_ property toggles multidevice section', function() {
+    // Check that the settings-section is visible iff the mode is not
+    // NO_ELIGIBLE_HOSTS.
+    for (let mode of ALL_MODES) {
+      multideviceSectionContainer.mode_ = mode;
+      assertEquals(
+          isSettingsSectionVisible(),
+          mode != settings.MultiDeviceSettingsMode.NO_ELIGIBLE_HOSTS);
+    }
+    // One more loop to ensure we transition in and out of NO_ELIGIBLE_HOSTS
+    // mode.
+    for (let mode of ALL_MODES) {
+      multideviceSectionContainer.mode_ = mode;
+      assertEquals(
+          isSettingsSectionVisible(),
+          mode != settings.MultiDeviceSettingsMode.NO_ELIGIBLE_HOSTS);
+    }
+  });
+
+  test(
+      'mode_ property passes to settings-multidevice-page if present',
+      function() {
+        for (let mode of ALL_MODES) {
+          multideviceSectionContainer.mode_ = mode;
+          Polymer.dom.flush();
+          let multidevicePage =
+              multideviceSectionContainer.$$('settings-multidevice-page');
+          if (mode == settings.MultiDeviceSettingsMode.NO_ELIGIBLE_HOSTS)
+            assertEquals(multidevicePage, null);
+          else
+            assertEquals(
+                multideviceSectionContainer.mode_, multidevicePage.mode);
+        }
+      });
+});