Convert crostini and plugin VM shared paths settings lists to iron-list

iron-list provides better focus management for tab/chromevox navigation.

Bug: 1096143
Change-Id: Icaf2d27da606c9792a5aef9ac27226a77c63e76a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2390939
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Auto-Submit: Joel Hockey <joelhockey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805101}

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="crostini_browser_proxy.html">
 <link rel="import" href="../../i18n_setup.html">
 <link rel="import" href="../../prefs/prefs_behavior.html">
@@ -31,22 +32,22 @@
           $i18n{crostiniSharedPathsListHeading}
         </h2>
       </div>
-      <div class="list-frame vertical-list" role="list"
-          aria-labeledby="crostiniListHeading">
-        <template is="dom-repeat" items="[[sharedPaths_]]">
+      <iron-list class="list-frame vertical-list" role="list"
+          aria-labeledby="crostiniListHeading" items="[[sharedPaths_]]">
+        <template>
           <div class="list-item" role="listitem">
             <div class="start" aria-hidden="true"
                 id="[[generatePathDisplayTextId_(index)]]">
               [[item.pathDisplayText]]
             </div>
-            <cr-icon-button class="icon-clear"
+            <cr-icon-button class="icon-clear" tabindex$="[[tabIndex]]"
                 on-click="onRemoveSharedPathTap_"
                 title="$i18n{crostiniSharedPathsRemoveSharing}"
                 aria-labeledby$="[[generatePathDisplayTextId_(index)]]">
             </cr-icon-button>
           </div>
         </template>
-      </div>
+      </iron-list>
     </div>
     <template is="dom-if" if="[[sharedPathWhichFailedRemoval_]]" restamp>
       <cr-dialog id="removeSharedPathFailedDialog" close-text="$i18n{close}">

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/plugin_vm_page/plugin_vm_shared_paths.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="plugin_vm_browser_proxy.html">
 <link rel="import" href="../../../../settings_shared_css.html">
 <link rel="import" href="../../../metrics_recorder.html">
@@ -18,7 +19,7 @@
         </span>
       </div>
     </div>
-    <div class="settings-box secondary continuation"
+    <div id="pluginVmListEmpty" class="settings-box secondary continuation"
         hidden="[[sharedPaths_.length]]" >
        $i18n{pluginVmSharedPathsListEmptyMessage}
     </div>
@@ -28,18 +29,18 @@
           $i18n{pluginVmSharedPathsListHeading}
         </h2>
       </div>
-      <div class="list-frame vertical-list" role="list"
-          aria-labeledby="pluginVmListHeading">
-        <template is="dom-repeat" items="[[sharedPaths_]]">
+      <iron-list class="list-frame vertical-list" role="list"
+          aria-labeledby="pluginVmListHeading" items="[[sharedPaths_]]">
+        <template>
           <div class="list-item" role="listitem">
             <div class="start">[[item.pathDisplayText]]</div>
-            <cr-icon-button class="icon-clear"
+            <cr-icon-button class="icon-clear" tabindex$="[[tabIndex]]"
                 on-click="onRemoveSharedPathClick_"
                 title="$i18n{pluginVmSharedPathsRemoveSharing}">
             </cr-icon-button>
           </div>
         </template>
-      </div>
+      </iron-list>
     </div>
   </template>
   <script src="plugin_vm_shared_paths.js"></script>

chrome/test/data/webui/settings/chromeos/app_management/plugin_vm_shared_paths_test.js

@@ -58,8 +58,12 @@ suite('SharedPaths', function() {
   test('Remove', async function() {
     await setPrefs({'path1': ['PvmDefault'], 'path2': ['PvmDefault']});
     assertEquals(3, page.shadowRoot.querySelectorAll('.settings-box').length);
-    assertEquals(2, page.shadowRoot.querySelectorAll('.list-item').length);
+    const rows = '.list-item:not([hidden])';
+    assertEquals(2, page.shadowRoot.querySelectorAll(rows).length);
+
     assertFalse(page.$.pluginVmInstructionsRemove.hidden);
+    assertFalse(page.$.pluginVmList.hidden);
+    assertTrue(page.$.pluginVmListEmpty.hidden);
     assertTrue(!!page.$$('.list-item cr-icon-button'));
 
     // Remove first shared path, still one left.
@@ -71,12 +75,12 @@ suite('SharedPaths', function() {
       assertEquals('path1', path);
     }
     await setPrefs({'path2': ['PvmDefault']});
-    assertEquals(1, page.shadowRoot.querySelectorAll('.list-item').length);
+    assertEquals(1, page.shadowRoot.querySelectorAll(rows).length);
     assertFalse(page.$.pluginVmInstructionsRemove.hidden);
 
     // Remove remaining shared path, none left.
     pluginVmBrowserProxy.resetResolver('removePluginVmSharedPath');
-    page.$$('.list-item cr-icon-button').click();
+    page.$$(`${rows} cr-icon-button`).click();
     {
       const [vmName, path] =
           await pluginVmBrowserProxy.whenCalled('removePluginVmSharedPath');
@@ -84,8 +88,10 @@ suite('SharedPaths', function() {
       assertEquals('path2', path);
     }
     await setPrefs({'ignored': ['ignore']});
-    assertEquals(0, page.shadowRoot.querySelectorAll('.list-item').length);
-    // Verify remove instructions are hidden.
+    assertTrue(page.$.pluginVmList.hidden);
+    // Verify remove instructions are hidden, and empty list message is shown.
     assertTrue(page.$.pluginVmInstructionsRemove.hidden);
+    assertTrue(page.$.pluginVmList.hidden);
+    assertFalse(page.$.pluginVmListEmpty.hidden);
   });
 });

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

@@ -936,6 +936,8 @@ suite('CrostiniPageTests', function() {
       assertFalse(subpage.$.crostiniList.hidden);
       assertTrue(subpage.$.crostiniListEmpty.hidden);
       assertTrue(!!subpage.$$('.list-item cr-icon-button'));
+      const rows = '.list-item:not([hidden])';
+      assertEquals(2, subpage.shadowRoot.querySelectorAll(rows).length);
 
       {
         // Remove first shared path, still one left.
@@ -949,13 +951,13 @@ suite('CrostiniPageTests', function() {
 
       await test_util.flushTasks();
       Polymer.dom.flush();
-      assertEquals(1, subpage.shadowRoot.querySelectorAll('.list-item').length);
+      assertEquals(1, subpage.shadowRoot.querySelectorAll(rows).length);
       assertFalse(subpage.$.crostiniInstructionsRemove.hidden);
 
       {
         // Remove remaining shared path, none left.
         crostiniBrowserProxy.resetResolver('removeCrostiniSharedPath');
-        subpage.$$('.list-item cr-icon-button').click();
+        subpage.$$(`${rows} cr-icon-button`).click();
         const [vmName, path] =
             await crostiniBrowserProxy.whenCalled('removeCrostiniSharedPath');
         assertEquals('termina', vmName);
@@ -965,9 +967,7 @@ suite('CrostiniPageTests', function() {
 
       await test_util.flushTasks();
       Polymer.dom.flush();
-      assertEquals(0, subpage.shadowRoot.querySelectorAll('.list-item').length);
-      // Verify remove instructions are hidden, and empty list message
-      // is shown.
+      // Verify remove instructions are hidden, and empty list message is shown.
       assertTrue(subpage.$.crostiniInstructionsRemove.hidden);
       assertTrue(subpage.$.crostiniList.hidden);
       assertFalse(subpage.$.crostiniListEmpty.hidden);