Settings: site settings zoom levels, use iron-list for a11y

Bug: 809359
Change-Id: I8c04faa4761dc1d01cbb4ad1d2e77fda3c874c72
Reviewed-on: https://chromium-review.googlesource.com/1148948
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#579303}

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

@@ -261,6 +261,7 @@ js_library("website_usage_private_api") {
 js_library("zoom_levels") {
   deps = [
     ":site_settings_behavior",
+    "//ui/webui/resources/js:list_property_update_behavior",
     "//ui/webui/resources/js:web_ui_listener_behavior",
   ]
 }

chrome/browser/resources/settings/site_settings/zoom_levels.html

@@ -2,8 +2,9 @@
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+<link rel="import" href="chrome://resources/html/list_property_update_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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="../settings_shared_css.html">
 <link rel="import" href="site_settings_behavior.html">
@@ -26,28 +27,28 @@
       }
     </style>
     <div class="list-frame vertical-list" id="listContainer">
-      <template is="dom-repeat" items="[[sites_]]" id="list">
-        <div class="list-item">
-          <div class="favicon-image"
-              style$="[[computeSiteIcon(item.originForFavicon)]]">
-          </div>
-          <div class="middle">
-            <span class="url-directionality">[[item.displayName]]</span>
-          </div>
-          <div class="zoom-label">[[item.zoom]]</div>
-          <div>
+      <iron-list id="list" preserve-focus items="[[sites_]]"
+          class="cr-separators" risk-selection>
+        <template>
+          <div class="list-item" first$="[[!index]]">
+            <div class="favicon-image"
+                style$="[[computeSiteIcon(item.originForFavicon)]]">
+            </div>
+            <div class="middle">
+              <span class="url-directionality">[[item.displayName]]</span>
+            </div>
+            <div class="zoom-label">[[item.zoom]]</div>
             <paper-icon-button-light class="icon-clear">
               <button on-click="removeZoomLevel_"
-                  title="$i18n{siteSettingsRemoveZoomLevel}"></button>
+                  title="$i18n{siteSettingsRemoveZoomLevel}"
+                  tabindex$="[[tabIndex]]"></button>
             </paper-icon-button-light>
           </div>
-        </div>
-      </template>
-      <template is="dom-if" if="[[!sites_.length]]">
-        <div id="empty">
-          $i18n{siteSettingsNoZoomedSites}
-        </div>
-      </template>
+        </template>
+      </iron-list>
+      <div id="empty" hidden$="[[!showNoSites_]]">
+        $i18n{siteSettingsNoZoomedSites}
+      </div>
     </div>
   </template>
   <script src="zoom_levels.js"></script>

chrome/browser/resources/settings/site_settings/zoom_levels.js

@@ -11,14 +11,27 @@
 Polymer({
   is: 'zoom-levels',
 
-  behaviors: [SiteSettingsBehavior, WebUIListenerBehavior],
+  behaviors: [
+    ListPropertyUpdateBehavior,
+    SiteSettingsBehavior,
+    WebUIListenerBehavior,
+  ],
 
   properties: {
     /**
      * Array of sites that are zoomed in or out.
      * @type {!Array<ZoomLevelEntry>}
      */
-    sites_: Array,
+    sites_: {
+      type: Array,
+      value: () => [],
+    },
+
+    /** @private */
+    showNoSites_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /** @override */
@@ -34,7 +47,8 @@ Polymer({
    *     their zoom levels.
    */
   onZoomLevelsChanged_: function(sites) {
-    this.sites_ = sites;
+    this.updateList('sites_', item => `${item.origin}_${item.zoom}`, sites);
+    this.showNoSites_ = this.sites_.length == 0;
   },
 
   /**

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

@@ -75,7 +75,7 @@ suite('ZoomLevels', function() {
     assertEquals(0, list.items.length);
     assertEquals(
         0, testElement.shadowRoot.querySelectorAll('.list-item').length);
-    assertTrue(!!testElement.$$('#empty'));
+    assertFalse(testElement.$.empty.hidden);
   });
 
   test('non-empty zoom state', function() {
@@ -86,7 +86,7 @@ suite('ZoomLevels', function() {
           const list = testElement.$.list;
           assertTrue(!!list);
           assertEquals(2, list.items.length);
-          assertFalse(!!testElement.$$('#empty'));
+          assertTrue(testElement.$.empty.hidden);
           assertEquals(
               2, testElement.shadowRoot.querySelectorAll('.list-item').length);