[CrOS MultiDevice]: Settings UI subpage aesthetic and string fixes

Changes in this CL:
  -Unindent 'forget device' line
  -Get rid of coloration of 'Better together is on'
  -When waiting for verification/server, show text for that instead of
'better together is on/off'
  -When waiting for verification/server, show and verify button instead
of suite toggle

Bug: 884390 870103
Change-Id: I0c8fb9519d52c8a016f90eba32b26dda97bd449b
Reviewed-on: https://chromium-review.googlesource.com/1228935
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#591919}

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

@@ -27,33 +27,33 @@
         --feature-item-border-top-style: none;
       }
 
-      #status-text-container[enabled] {
-        color: var(--google-green-500);
-      }
-
-      #feature-items-container,
-      #forget-device-container {
+      #feature-items-container {
         @apply(--settings-list-frame-padding);
       }
 
       #forget-device-container {
         border-top: var(--settings-separator-line);
       }
-
-      #forget-device {
-        padding: 0;
-      }
     </style>
     <div class="settings-box first">
       <div id="status-text-container"
           class="start"
-          enabled$="[[isSuiteOn(pageContentData)]]">
-        [[getStatusText_(pageContentData)]]
+          enabled$="[[isSuiteOn(pageContentData)]]"
+          inner-h-t-m-l="[[getStatusInnerHtml_(pageContentData)]]">
       </div>
-        <settings-multidevice-feature-toggle
-            feature="[[MultiDeviceFeature.BETTER_TOGETHER_SUITE]]"
-            page-content-data="[[pageContentData]]">
-        </settings-multidevice-feature-toggle>
+        <template is="dom-if" if="[[shouldShowVerifyButton_(pageContentData)]]"
+            restamp>
+          <paper-button on-click="handleVerifyButtonClick_">
+            $i18n{multideviceVerifyButton}
+          </paper-button>
+        </template>
+        <template is="dom-if" if="[[shouldShowSuiteToggle_(pageContentData)]]"
+            restamp>
+          <settings-multidevice-feature-toggle
+              feature="[[MultiDeviceFeature.BETTER_TOGETHER_SUITE]]"
+              page-content-data="[[pageContentData]]">
+          </settings-multidevice-feature-toggle>
+        </template>
     </div>
     <template is="dom-if"
         if="[[shouldShowIndividualFeatures_(pageContentData)]]"

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

@@ -51,6 +51,11 @@ Polymer({
     this.browserProxy_ = settings.MultiDeviceBrowserProxyImpl.getInstance();
   },
 
+  /** @private */
+  handleVerifyButtonClick_: function(event) {
+    this.browserProxy_.retryPendingHostSetup();
+  },
+
   /** @private */
   handleAndroidMessagesButtonClick_: function() {
     this.browserProxy_.setUpAndroidSms();
@@ -75,6 +80,26 @@ Polymer({
         settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED;
   },
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowVerifyButton_: function() {
+    return [
+      settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_SERVER,
+      settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_VERIFICATION,
+    ].includes(this.pageContentData.mode);
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowSuiteToggle_: function() {
+    return this.pageContentData.mode ===
+        settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED;
+  },
+
   /** @private */
   handleForgetDeviceClick_: function() {
     this.$.forgetDeviceDialog.showModal();
@@ -95,7 +120,13 @@ Polymer({
    * @return {string}
    * @private
    */
-  getStatusText_: function() {
+  getStatusInnerHtml_: function() {
+    if ([
+          settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_SERVER,
+          settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_VERIFICATION,
+        ].includes(this.pageContentData.mode)) {
+      return this.i18nAdvanced('multideviceVerificationText');
+    }
     return this.isSuiteOn() ? this.i18n('multideviceEnabled') :
                               this.i18n('multideviceDisabled');
   },