Printer settings: Make saved/nearby printers use FocusRowBehavior

Description:
 This change allows users to tab to the first printer in the saved
 and nearby printer lists and use the arrow keys to navigate the
 remaining printers. Users can also use the arrow keys to navigate
 through a printer entry's associated buttons/icons. Lastly, the
 printer entry row will be highlighted (blue background) if it is
 being focused.

Screenshots:
 - http://shortn/_Fqf1Nn9qjF nearby printers
 - http://shortn/_BSspETkjzV saved printers

Bug: 987422
Test: gtest_filter=OSSettingsCupsPrinterLandingPageV3Test.All
Change-Id: I68fc5fc3ff2ceec88ce81f95da5b451a6ad3beb1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2399601Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Michael Checo <michaelcheco@google.com>
Cr-Commit-Position: refs/heads/master@{#809354}

chrome/browser/resources/settings/chromeos/os_printing_page/BUILD.gn

@@ -131,6 +131,7 @@ js_library("cups_printers_entry") {
   deps = [
     ":cups_printer_types",
     ":cups_printers_browser_proxy",
+    "//ui/webui/resources/js/cr/ui:focus_row_behavior",
   ]
 }
 
@@ -311,7 +312,10 @@ js_library("cups_printers_browser_proxy.m") {
 
 js_library("cups_printers_entry.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_printing_page/cups_printers_entry.m.js" ]
-  deps = [ ":cups_printer_types.m" ]
+  deps = [
+    ":cups_printer_types.m",
+    "//ui/webui/resources/js/cr/ui:focus_row_behavior.m",
+  ]
   extra_deps = [ ":cups_printers_entry_module" ]
 }
 

chrome/browser/resources/settings/chromeos/os_printing_page/cups_nearby_printers.html

@@ -28,7 +28,10 @@
     <iron-list class="list-frame vertical-list flex-auto" id="printerEntryList"
         items="[[filteredPrinters_]]">
       <template>
-        <settings-cups-printers-entry printer-entry="[[item]]">
+        <settings-cups-printers-entry printer-entry="[[item]]"
+            tabindex$="[[tabIndex]]" last-focused="{{lastFocused_}}"
+            list-blurred="{{listBlurred_}}" focus-row-index="[[index]]"
+            iron-list-tab-index="[[tabIndex]]">
         </settings-cups-printers-entry>
       </template>
     </iron-list>

chrome/browser/resources/settings/chromeos/os_printing_page/cups_nearby_printers.js

@@ -56,6 +56,18 @@ Polymer({
       type: Array,
       value: () => [],
     },
+
+    /**
+     * Used by FocusRowBehavior to track the last focused element on a row.
+     * @private
+     */
+    lastFocused_: Object,
+
+    /**
+     * Used by FocusRowBehavior to track if the list has been blurred.
+     * @private
+     */
+    listBlurred_: Boolean,
   },
 
   listeners: {

chrome/browser/resources/settings/chromeos/os_printing_page/cups_printers_entry.html

@@ -5,53 +5,74 @@
 <link rel="import" href="cups_printers_browser_proxy.html">
 <link rel="import" href="../../settings_shared_css.html">
 <link rel="import" href="chrome://resources/html/load_time_data.html">
+<link rel="import" href="chrome://resources/html/cr/ui/focus_row_behavior.html">
 
 <dom-module id="settings-cups-printers-entry">
   <template>
     <style include="settings-shared">
+      .icon-more-vert {
+        background-color: none;
+      }
+
       .printer-name {
         flex: 1;
       }
+
+      .list-item:focus-within {
+        background-color: var(--google-blue-50);
+        outline: none;
+      }
     </style>
-    <div id="entry" class="list-item" focus-row-container>
-      <div class="printer-name text-elide">
-        <span id="printerName" aria-hidden="true">
-            [[printerEntry.printerInfo.printerName]]
-        </span>
-        <div id="printerSubtext" hidden="[[!subtext]]" class="secondary"
-            aria-hidden="true">
-          [[subtext]]
+    <div focus-row-container>
+      <div id="entry" class="list-item" focus-row-control focus-type="entry">
+        <div class="printer-name text-elide">
+          <span id="printerName" aria-hidden="true">
+              [[printerEntry.printerInfo.printerName]]
+          </span>
+          <div id="printerSubtext" hidden="[[!subtext]]" class="secondary"
+              aria-hidden="true">
+            [[subtext]]
+          </div>
         </div>
+        <template is="dom-if"
+            if="[[isSavedPrinter_(printerEntry.printerType)]]">
+          <cr-icon-button id="moreActions" class="icon-more-vert"
+              on-click="onOpenActionMenuTap_" title="$i18n{moreActions}"
+              aria-labelledby="printerName" focus-row-control
+              focus-type="moreActions" tabindex$="[[tabindex]]">
+          </cr-icon-button>
+        </template>
+        <template is="dom-if"
+            if="[[isDiscoveredPrinter_(printerEntry.printerType)]]">
+          <cr-button id="setupPrinterButton"
+              on-click="onAddDiscoveredPrinterTap_"
+              aria-label$="[[getSetupButtonAria_()]]"
+              focus-row-control
+              focus-type="setupPrinterButton">
+            $i18n{setupPrinter}
+          </cr-button>
+        </template>
+        <template is="dom-if"
+            if="[[isAutomaticPrinter_(printerEntry.printerType)]]">
+          <cr-button id="automaticPrinterButton" class="save-printer-button"
+              on-click="onAddAutomaticPrinterTap_"
+              aria-label$="[[getSaveButtonAria_()]]"
+              focus-row-control
+              focus-type="automaticPrinterButton">
+            $i18n{savePrinter}
+          </cr-button>
+        </template>
+        <template is="dom-if"
+            if="[[isPrintServerPrinter_(printerEntry.printerType)]]">
+          <cr-button id="savePrinterButton"
+          class="save-printer-button" on-click="onAddServerPrinterTap_"
+              aria-label$="[[getSaveButtonAria_()]]"
+              focus-row-control
+              focus-type="savePrinterButton">
+            $i18n{savePrinter}
+          </cr-button>
+        </template>
       </div>
-      <template is="dom-if" if="[[isSavedPrinter_(printerEntry.printerType)]]">
-        <cr-icon-button id="moreActions" class="icon-more-vert"
-            on-click="onOpenActionMenuTap_" title="$i18n{moreActions}"
-            aria-labelledby="printerName">
-        </cr-icon-button>
-      </template>
-      <template is="dom-if"
-          if="[[isDiscoveredPrinter_(printerEntry.printerType)]]">
-        <cr-button id="setupPrinterButton"
-            on-click="onAddDiscoveredPrinterTap_"
-            aria-label$="[[getSetupButtonAria_()]]">
-          $i18n{setupPrinter}
-        </cr-button>
-      </template>
-      <template is="dom-if"
-          if="[[isAutomaticPrinter_(printerEntry.printerType)]]">
-        <cr-button class="save-printer-button"
-            on-click="onAddAutomaticPrinterTap_"
-            aria-label$="[[getSaveButtonAria_()]]">
-          $i18n{savePrinter}
-        </cr-button>
-      </template>
-      <template is="dom-if"
-          if="[[isPrintServerPrinter_(printerEntry.printerType)]]">
-        <cr-button class="save-printer-button" on-click="onAddServerPrinterTap_"
-            aria-label$="[[getSaveButtonAria_()]]">
-          $i18n{savePrinter}
-        </cr-button>
-      </template>
     </div>
   </template>
   <script src="cups_printers_entry.js"></script>

chrome/browser/resources/settings/chromeos/os_printing_page/cups_printers_entry.js

@@ -9,6 +9,9 @@
 Polymer({
   is: 'settings-cups-printers-entry',
 
+  behaviors: [
+    cr.ui.FocusRowBehavior,
+  ],
   properties: {
     /** @type {!PrinterListEntry} */
     printerEntry: Object,

chrome/browser/resources/settings/chromeos/os_printing_page/cups_saved_printers.html

@@ -63,7 +63,10 @@
     <iron-list class="list-frame vertical-list flex-auto" id="printerEntryList"
         items="[[filteredPrinters_]]">
       <template>
-        <settings-cups-printers-entry printer-entry="[[item]]">
+        <settings-cups-printers-entry printer-entry="[[item]]"
+            tabindex$="[[tabIndex]]" last-focused="{{lastFocused_}}"
+            list-blurred="{{listBlurred_}}" focus-row-index="[[index]]"
+            iron-list-tab-index="[[tabIndex]]">
         </settings-cups-printers-entry>
       </template>
     </iron-list>

chrome/browser/resources/settings/chromeos/os_printing_page/cups_saved_printers.js

@@ -96,6 +96,18 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /**
+     * Used by FocusRowBehavior to track the last focused element on a row.
+     * @private
+     */
+    lastFocused_: Object,
+
+    /**
+     * Used by FocusRowBehavior to track if the list has been blurred.
+     * @private
+     */
+    listBlurred_: Boolean,
   },
 
   listeners: {

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

@@ -18,6 +18,12 @@
 // #import {waitAfterNextRender} from 'chrome://test/test_util.m.js';
 // clang-format on
 
+const arrowUpEvent = new KeyboardEvent(
+    'keydown', {cancelable: true, key: 'ArrowUp', keyCode: 38});
+
+const arrowDownEvent = new KeyboardEvent(
+    'keydown', {cancelable: true, key: 'ArrowDown', keyCode: 40});
+
 /**
  * @param {!HTMLElement} printerEntry
  * @private
@@ -615,6 +621,37 @@ suite('CupsSavedPrintersTests', function() {
         });
   });
 
+  test('NavigateSavedPrintersList', function() {
+    createCupsPrinterPage([
+      cups_printer_test_util.createCupsPrinterInfo('google', '4', 'id4'),
+      cups_printer_test_util.createCupsPrinterInfo('test1', '1', 'id1'),
+      cups_printer_test_util.createCupsPrinterInfo('test2', '2', 'id2'),
+    ]);
+    return cupsPrintersBrowserProxy.whenCalled('getCupsPrintersList')
+        .then(async () => {
+          // Wait for saved printers to populate.
+          Polymer.dom.flush();
+          savedPrintersElement = page.$$('settings-cups-saved-printers');
+          assertTrue(!!savedPrintersElement);
+          const printerEntryList = savedPrintersElement.$$('#printerEntryList');
+          const printerListEntries =
+              cups_printer_test_util.getPrinterEntries(savedPrintersElement);
+          printerEntryList.focus();
+          printerEntryList.dispatchEvent(arrowDownEvent);
+          Polymer.dom.flush();
+          assertEquals(printerListEntries[1], getDeepActiveElement());
+          printerEntryList.dispatchEvent(arrowDownEvent);
+          Polymer.dom.flush();
+          assertEquals(printerListEntries[2], getDeepActiveElement());
+          printerEntryList.dispatchEvent(arrowUpEvent);
+          Polymer.dom.flush();
+          assertEquals(printerListEntries[1], getDeepActiveElement());
+          printerEntryList.dispatchEvent(arrowUpEvent);
+          Polymer.dom.flush();
+          assertEquals(printerListEntries[0], getDeepActiveElement());
+        });
+  });
+
   test('Deep link to saved printers', async () => {
     loadTimeData.overrideValues({
       isDeepLinkingEnabled: true,
@@ -1201,6 +1238,38 @@ suite('CupsNearbyPrintersTests', function() {
         });
   });
 
+  test('NavigateNearbyPrinterList', function() {
+    const discoveredPrinterList = [
+      cups_printer_test_util.createCupsPrinterInfo('test3', '3', 'id3'),
+      cups_printer_test_util.createCupsPrinterInfo('test4', '4', 'id4'),
+      cups_printer_test_util.createCupsPrinterInfo('test2', '2', 'id5'),
+    ];
+    return test_util.flushTasks().then(() => {
+      nearbyPrintersElement = page.$$('settings-cups-nearby-printers');
+      assertTrue(!!nearbyPrintersElement);
+      // Simuluate finding nearby printers.
+      cr.webUIListenerCallback(
+          'on-nearby-printers-changed', [], discoveredPrinterList);
+      Polymer.dom.flush();
+      const nearbyPrinterEntries =
+          cups_printer_test_util.getPrinterEntries(nearbyPrintersElement);
+      const printerEntryList = nearbyPrintersElement.$$('#printerEntryList');
+      printerEntryList.focus();
+      printerEntryList.dispatchEvent(arrowDownEvent);
+      Polymer.dom.flush();
+      assertEquals(nearbyPrinterEntries[1], getDeepActiveElement());
+      printerEntryList.dispatchEvent(arrowDownEvent);
+      Polymer.dom.flush();
+      assertEquals(nearbyPrinterEntries[2], getDeepActiveElement());
+      printerEntryList.dispatchEvent(arrowUpEvent);
+      Polymer.dom.flush();
+      assertEquals(nearbyPrinterEntries[1], getDeepActiveElement());
+      printerEntryList.dispatchEvent(arrowUpEvent);
+      Polymer.dom.flush();
+      assertEquals(nearbyPrinterEntries[0], getDeepActiveElement());
+    });
+  });
+
   test('addingDiscoveredPrinterIsSuccessful', function() {
     const automaticPrinterList = [];
     const discoveredPrinterList =