[CrOS MultiDevice]: Basic connected device button item

This is the basic polymer structure for the MultiDevice settings UI
main page. The "Set up" item is implemented concretely.

Change-Id: I4796f903b1f928bb77f5005e50574f11bb56a134
Reviewed-on: https://chromium-review.googlesource.com/1098153
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#567721}

chrome/app/settings_strings.grdp

@@ -4109,6 +4109,15 @@
     <message name="IDS_SETTINGS_MULTIDEVICE" desc="Title of a section of settings. This section describes settings for devices that are connected to the Chromebook, like phones.">
       Connected devices
     </message>
+    <message name="IDS_SETTINGS_MULTIDEVICE_SETUP_ITEM_HEADING" desc="Heading for settings item that allows the user to connect their phone to their Chromebook." translateable="false">
+      Better Together (Beta)
+    </message>
+    <message name="IDS_SETTINGS_MULTIDEVICE_SETUP_SUMMARY" desc="Description of the idea that the user can get a better experience on their Chromebook by connecting it to their phone." translateable="false">
+      Your Chromebook works better with your phone. (Beta)
+    </message>
+    <message name="IDS_SETTINGS_MULTIDEVICE_SETUP_BUTTON" desc="Label of the button that opens a menu to the user that allows them to set up a connection between the user's phone and their Chromebook to give them access to special features.">
+      Set up
+    </message>
     <message name="IDS_SETTINGS_MULTIDEVICE_SMS_CONNECT" desc="Name of a feature. This feature lets the user read and reply to text messages from their Chromebook. New text messages will appear as notifications.">
       SMS Connect
     </message>

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

@@ -110,6 +110,15 @@
             </settings-internet-page>
           </settings-section>
         </template>
+        <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>
+        </template>
         <template is="dom-if" if="[[showPage_(pageVisibility.bluetooth)]]"
             restamp>
           <settings-section page-title="$i18n{bluetoothPageTitle}"
@@ -278,17 +287,6 @@
                 </settings-printing-page>
               </settings-section>
             </template>
-<if expr="chromeos">
-            <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>
-            </template>
-</if>
             <template is="dom-if" if="[[showPage_(pageVisibility.a11y)]]"
                 restamp>
               <settings-section page-title="$i18n{a11yPageTitle}"

chrome/browser/resources/settings/multidevice_page/BUILD.gn

@@ -11,4 +11,7 @@ js_type_check("closure_compile") {
 }
 
 js_library("multidevice_page") {
+  deps = [
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
 }

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="../prefs/prefs.html">
-<link rel="import" href="../controls/settings_toggle_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-multidevice-page">
   <template>
-    <style include="settings-shared">
-      settings-toggle-button {
-        -webkit-padding-end: 0;
-        flex: 1;
-      }
-    </style>
-    <div class="settings-box two-line">
-      <div class="icon-container">
-        <iron-icon icon="cr:sms-connect"></iron-icon>
+    <style include="settings-shared"></style>
+    <div class="settings-box two-line first">
+      <div class="start">
+        [[getLabelText_(mode)]]
+        <div class="secondary" id="multideviceSummary">
+          [[getSubLabelText_(mode)]]
+          <template is="dom-if"
+              if="[[shouldShowLearnMoreLink_(mode)]]" restamp>
+            <a href="chrome://foo-bar-multidevice-help-page" target="_blank">
+              $i18n{learnMore}.
+            </a>
+          </template>
+        </div>
       </div>
-      <settings-toggle-button
-          pref="{{prefs.multidevice.sms_connect_enabled}}"
-          label="$i18n{smsConnect}"
-          sub-label="$i18n{smsConnectSummary}">
-      </settings-toggle-button>
+      <div class="separator"></div>
+      <template is="dom-if" if="[[showButton_(mode)]]" restamp>
+        <paper-button class="secondary-button">
+          [[getButtonText_(mode)]]
+        </paper-button>
+      </template>
+      <template is="dom-if" if="[[showToggle_(mode)]]" restamp>
+        <cr-toggle></cr-toggle>
+      </template>
     </div>
   </template>
   <script src="multidevice_page.js"></script>

chrome/browser/resources/settings/multidevice_page/multidevice_page.js

@@ -4,17 +4,112 @@
 
 /**
  * @fileoverview
- * Settings page for managing multidevice features.
+ * Settings page for managing MultiDevice features.
  */
 
+/**
+ * The possible statuses of hosts on the logged in account that determine the
+ * page content.
+ * @enum {number}
+ */
+settings.MultiDeviceSettingsMode = {
+  NO_ELIGIBLE_HOSTS: 0,
+  NO_HOST_SET: 1,
+  HOST_SET_WAITING_FOR_SERVER: 2,
+  HOST_SET_WAITING_FOR_VERIFICATION: 3,
+  HOST_SET_VERIFIED: 4,
+};
+
 Polymer({
   is: 'settings-multidevice-page',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /** Preferences state. */
     prefs: {
       type: Object,
       notify: true,
     },
+
+    /** @type {settings.MultiDeviceSettingsMode} */
+    mode: {
+      type: Number,
+      value: settings.MultiDeviceSettingsMode.NO_HOST_SET,
+    },
+  },
+
+  /**
+   * @return {string} Translated item label.
+   * @private
+   */
+  getLabelText_: function() {
+    if (this.mode == settings.MultiDeviceSettingsMode.NO_HOST_SET)
+      return this.i18n('multideviceSetupItemHeading');
+    // TODO(jordynass): Fill in with real device name.
+    return 'Device Name Placeholder';
+  },
+
+  /**
+   * @return {string} Translated sublabel.
+   * @private
+   */
+  getSubLabelText_: function() {
+    switch (this.mode) {
+      case settings.MultiDeviceSettingsMode.NO_HOST_SET:
+        return this.i18n('multideviceSetupSummary');
+      case settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_SERVER:
+        // TODO(jordynass): Replace this with the real "Retry" string
+        return 'Retry Placeholder';
+      case settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_VERIFICATION:
+        // TODO(jordynass): Replace this with the real "Verify" string
+        return 'Verification Placeholder';
+      default:
+        // TODO(jordynass): Replace this with the i18n versions
+        return 'Enabled/Disabled';
+    }
+  },
+
+  /**
+   * @return {string} Translated button text.
+   * @private
+   */
+  getButtonText_: function() {
+    switch (this.mode) {
+      case settings.MultiDeviceSettingsMode.NO_HOST_SET:
+        return this.i18n('multideviceSetupButton');
+      case settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_SERVER:
+        // TODO(jordynass): Replace this with the real "Retry" string
+        return 'Retry Placeholder';
+      case settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_VERIFICATION:
+        // TODO(jordynass): Replace this with the real "Verify" string
+        return 'Verification Placeholder';
+      default:
+        return null;
+    }
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowLearnMoreLink_: function() {
+    return this.mode != settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  showButton_: function() {
+    return this.mode != settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  showToggle_: function() {
+    return this.mode == settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED;
   },
 });

chrome/browser/resources/settings/route.js

@@ -229,6 +229,8 @@ cr.define('settings', function() {
     r.KNOWN_NETWORKS = r.INTERNET.createChild('/knownNetworks');
     r.BLUETOOTH = r.BASIC.createSection('/bluetooth', 'bluetooth');
     r.BLUETOOTH_DEVICES = r.BLUETOOTH.createChild('/bluetoothDevices');
+
+    r.MULTIDEVICE = r.BASIC.createSection('/multidevice', 'multidevice');
     // </if>
 
     if (pageVisibility.appearance !== false) {
@@ -384,8 +386,6 @@ cr.define('settings', function() {
       r.CLOUD_PRINTERS = r.PRINTING.createChild('/cloudPrinters');
       // <if expr="chromeos">
       r.CUPS_PRINTERS = r.PRINTING.createChild('/cupsPrinters');
-
-      r.MULTIDEVICE = r.ADVANCED.createSection('/multidevice', 'multidevice');
       // </if>
 
       r.ACCESSIBILITY = r.ADVANCED.createSection('/accessibility', 'a11y');

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -2467,6 +2467,10 @@ void AddWebContentStrings(content::WebUIDataSource* html_source) {
 void AddMultideviceStrings(content::WebUIDataSource* html_source) {
   LocalizedString localized_strings[] = {
       {"multidevicePageTitle", IDS_SETTINGS_MULTIDEVICE},
+      {"multideviceSetupButton", IDS_SETTINGS_MULTIDEVICE_SETUP_BUTTON},
+      {"multideviceSetupItemHeading",
+       IDS_SETTINGS_MULTIDEVICE_SETUP_ITEM_HEADING},
+      {"multideviceSetupSummary", IDS_SETTINGS_MULTIDEVICE_SETUP_SUMMARY},
       {"smsConnect", IDS_SETTINGS_MULTIDEVICE_SMS_CONNECT},
       {"smsConnectSummary", IDS_SETTINGS_MULTIDEVICE_SMS_CONNECT_SUMMARY},
   };