Formatting fix for Crostini shared usb settings page

Changes the /crostini/shared_usb_devices page in crostini settings to
more closely match /crostini/shared_paths and other settings UI.

Bug: 930588
Change-Id: I14ec8a58ce4b263520efbdcd317281a30de3d2ad
Reviewed-on: https://chromium-review.googlesource.com/c/1477569
Commit-Queue: Josh Pratt <jopra@chromium.org>
Reviewed-by: Nicholas Verne <nverne@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#635903}

chrome/app/settings_strings.grdp

@@ -557,6 +557,9 @@
     <message name="IDS_SETTINGS_CROSTINI_SHARED_USB_DEVICES_LABEL" desc="Label for managing shared USB devices.">
       USB Device preferences
     </message>
+    <message name="IDS_SETTINGS_CROSTINI_SHARED_USB_DEVICES_LIST_HEADING" desc="Label for list of options to share USB devices.">
+      USB Devices
+    </message>
     <message name="IDS_SETTINGS_CROSTINI_SHARED_USB_DEVICES_DESCRIPTION" desc="Description for managing shared USB devices.">
       Share a USB device with Linux by turning the toggle on. Sharing will only last until the device is detached.
     </message>

chrome/browser/resources/settings/crostini_page/crostini_page.html

@@ -75,9 +75,6 @@
         <settings-subpage
             associated-control="[[$$('#crostini')]]"
             page-title="$i18n{crostiniSharedUsbDevicesLabel}">
-          <div class="settings-box first">
-            <div class="label">$i18n{crostiniSharedUsbDevicesDescription}</div>
-          </div>
           <settings-crostini-shared-usb-devices prefs="{{prefs}}">
           </settings-crostini-shared-usb-devices>
         </settings-subpage>

chrome/browser/resources/settings/crostini_page/crostini_shared_usb_devices.html

@@ -15,13 +15,21 @@
         justify-content: space-between;
       }
     </style>
-    <template is="dom-repeat"
-      items="{{prefs.crostini.shared_usb_devices.value}}" as="usb">
-      <div class="toggle-container settings-box">
-        <div class="label">[[usb.name]]</div>
-        <cr-toggle class="toggle" checked="{{usb.shared}}"></cr-toggle>
-      </div>
-    </template>
+    <div class="settings-box first">
+      <div>$i18n{crostiniSharedUsbDevicesDescription}</div>
+    </div>
+    <div class="settings-box continuation">
+      <h2 class="start">$i18n{crostiniSharedUsbDevicesListHeading}</h2>
+    </div>
+    <div class="list-frame vertical-list">
+      <template is="dom-repeat"
+        items="{{prefs.crostini.shared_usb_devices.value}}" as="device">
+        <div class="toggle-container settings-box">
+          <div class="label">[[device.name]]</div>
+          <cr-toggle class="toggle" checked="{{device.shared}}"></cr-toggle>
+        </div>
+      </template>
+    </div>
   </template>
   <script src="crostini_shared_usb_devices.js"></script>
 </dom-module>

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

@@ -464,6 +464,8 @@ void AddCrostiniStrings(content::WebUIDataSource* html_source,
        IDS_SETTINGS_CROSTINI_SHARED_USB_DEVICES_LABEL},
       {"crostiniSharedUsbDevicesDescription",
        IDS_SETTINGS_CROSTINI_SHARED_USB_DEVICES_DESCRIPTION},
+      {"crostiniSharedUsbDevicesListHeading",
+       IDS_SETTINGS_CROSTINI_SHARED_USB_DEVICES_LIST_HEADING},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings,
                           base::size(kLocalizedStrings));

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

@@ -215,12 +215,11 @@ suite('CrostiniPageTests', function() {
     });
 
     test('USB devices are shown', function() {
-      assertEquals(
-          3, subpage.shadowRoot.querySelectorAll('.settings-box').length);
+      assertEquals(3, subpage.shadowRoot.querySelectorAll('.toggle').length);
     });
 
     test('USB shared pref is updated by toggling', function() {
-      assertTrue(!!subpage.$$('.settings-box .toggle'));
+      assertTrue(!!subpage.$$('.toggle'));
       subpage.$$('.toggle').click();
       return flushAsync()
           .then(() => {