[CrOS MultiDevice] Basic forget device item in settings UI subpage

This CL adds the forget device line in the subpage that has no functionality
yet.


Bug: 870069, 824568
Change-Id: Id85730eccd456d3a80516cc5c7d156fd86174d09
Reviewed-on: https://chromium-review.googlesource.com/1166334Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Cr-Commit-Position: refs/heads/master@{#582680}

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

@@ -7,16 +7,19 @@
 <link rel="import" href="../icons.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="../settings_vars_css.html">
 
 <dom-module id="settings-multidevice-feature-item">
   <template>
     <style include="settings-shared">
-      iron-icon {
-        padding: 2px;
+      #card {
+        border-top: var(--settings-separator-line);
+        border-top-style: var(--feature-item-border-top-style, solid);
+        padding: 0;
       }
 
-      #item-text-container {
-        padding-inline-start: 18px;
+      iron-icon {
+        padding: 2px;
       }
     </style>
     <div id="card"
@@ -33,8 +36,8 @@
       </div>
       <template is="dom-if" if="[[hasSubpageClickHandler_(subpageRoute)]]">
         <paper-icon-button-light class="subpage-arrow">
-            <button aria-label="[[featureName]]"
-                aria-describedby="featureSecondary"></button>
+          <button aria-label="[[featureName]]"
+              aria-describedby="featureSecondary"></button>
         </paper-icon-button-light>
         <div class="separator"></div>
       </template>

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

@@ -38,8 +38,8 @@
           <template is="dom-if"
               if="[[doesClickOpenSubpage_(pageContentData)]]">
             <paper-icon-button-light class="subpage-arrow">
-            <button aria-label="[[getLabelText_(pageContentData)]]"
-                aria-describedby="mutltideviceSubLabel"></button>
+              <button aria-label="[[getLabelText_(pageContentData)]]"
+                  aria-describedby="mutltideviceSubLabel"></button>
             </paper-icon-button-light>
           </template>
           <div class="separator"></div>

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

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/html/cr.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="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../route.html">
@@ -15,13 +16,25 @@
 <dom-module id="settings-multidevice-subpage">
   <template>
     <style include="settings-shared iron-flex">
+      settings-multidevice-feature-item:first-of-type {
+        --feature-item-border-top-style: none;
+      }
+
       #status-text-container[enabled] {
         color: var(--google-green-500);
       }
 
-      .feature-item-container {
-        margin-inline-end: var(--settings-box-row-padding);
-        margin-inline-start: var(--settings-box-row-indent);
+      #feature-items-container,
+      #forget-device-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">
@@ -36,13 +49,13 @@
     <template is="dom-if"
         if="[[shouldShowIndividualFeatures_(pageContentData)]]"
         restamp>
-      <div class="feature-item-container">
+      <div id="feature-items-container">
         <settings-multidevice-feature-item id="smart-lock-item"
             icon-name="settings:smart-lock"
             subpage-route="[[routes.LOCK_SCREEN]]"
             feature-name="$i18n{multideviceSmartLockItemTitle}"
             feature-summary-html="$i18n{multideviceSmartLockItemSummary}">
-          <div slot="feature-contoller">
+          <div slot="feature-controller">
             <!-- TODO (jordynass): Change the pref property to the pref
                  controlling Easy Unlock and make sure it's effectively
                  password protected. -->
@@ -74,6 +87,23 @@
         </settings-multidevice-feature-item>
       </div>
     </template>
+    <div id="forget-device-container">
+      <div id="forget-device"
+          class="settings-box two-line first"
+          on-click="handleForgetDeviceClick_"
+          actionable>
+        <div class="start">
+          $i18n{multideviceForgetDevice}
+          <div class="secondary" id="multideviceForgetDeviceSummary">
+            $i18n{multideviceForgetDeviceSummary}
+          </div>
+        </div>
+        <paper-icon-button-light class="subpage-arrow">
+          <button aria-label="$i18n{multideviceForgetDevice}"
+              aria-describedby="multideviceForgetDeviceSummary"></button>
+        </paper-icon-button-light>
+      </div>
+    </div>
   </template>
   <script src="multidevice_subpage.js"></script>
 </dom-module>

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

@@ -53,6 +53,12 @@ Polymer({
         settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED;
   },
 
+  /** @private */
+  handleForgetDeviceClick_: function() {
+    // TODO(jordynass): Have this navigate to the route for dialog once it is
+    // built.
+  },
+
   /**
    * @return {string}
    * @private

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

@@ -60,7 +60,8 @@ suite('Multidevice', function() {
   });
 
   test('AndroidMessages item shows correct input control', function() {
-    const inputControl = multideviceSubpage.$$('[slot=feature-controller]');
+    const inputControl = multideviceSubpage.$$(
+        '#android-messages-item > div[slot=feature-controller]');
 
     multideviceSubpage.androidMessagesRequiresSetup_ = true;
     Polymer.dom.flush();