Close dropdown on blur

Using on-blur simplifies closing the dropdown for clicks registered
outside of print preview. And now that we don't have to specifically
listen for clicks outside of print preview, on-click can be used
instead of pointerdown.

Bug: 1059607
Change-Id: I9225ec9e06e3197b9f2eae4ac078b29fa232a791
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2303368
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#790384}

chrome/browser/resources/print_preview/ui/destination_dropdown_cros.html

@@ -100,7 +100,8 @@
     width: 100%;
   }
 </style>
-<div id="destination-dropdown" on-keydown="onKeyDown_" tabindex="0">
+<div id="destination-dropdown" on-keydown="onKeyDown_" tabindex="0"
+    on-blur="onBlur_" on-click="onClick_">
   <div id="destination-display-container">
     <div id="destination-icon-box">
       <iron-icon icon="[[destinationIcon]]"
@@ -122,7 +123,7 @@
       <div slot="dropdown-content">
         <template is="dom-repeat" items="[[itemList]]">
           <button id="[[item.key]]" tabindex="-1" value="[[item.key]]"
-              on-click="onSelect_"
+              on-click="onSelect_" on-blur="onBlur_"
               class$="list-item [[getHighlightedClass_(item.key,
                   highlightedIndex_)]]">
             <printer-status-icon-cros icon-location="[[IconLocation.DROPDOWN]]"
@@ -134,25 +135,25 @@
           </button>
         </template>
         <button on-click="onSelect_" tabindex="-1" value="[[pdfDestinationKey]]"
-          hidden$="[[pdfPrinterDisabled]]"
+          hidden$="[[pdfPrinterDisabled]]" on-blur="onBlur_"
           class$="list-item [[getHighlightedClass_(pdfDestinationKey,
               highlightedIndex_)]]">
           $i18n{printToPDF}
         </button>
-        <button on-click="onSelect_" tabindex="-1"
+        <button on-click="onSelect_" tabindex="-1" on-blur="onBlur_"
           value="[[driveDestinationKey]]" hidden$="[[!driveDestinationKey]]"
           class$="list-item [[getHighlightedClass_(driveDestinationKey,
               highlightedIndex_)]]">
           $i18n{printToGoogleDrive}
         </button>
         <button on-click="onSelect_" tabindex="-1" value="noDestinations"
-          hidden$="[[!noDestinations]]"
+          hidden$="[[!noDestinations]]" on-blur="onBlur_"
           class$="list-item [[getHighlightedClass_('noDestinations',
               highlightedIndex_)]]">
           $i18n{noDestinationsMessage}
         </button>
         <button on-click="onSelect_" tabindex="-1" value="seeMore"
-          aria-label$="[[i18n(seeMoreDestinationsLabel)]]"
+          aria-label$="[[i18n(seeMoreDestinationsLabel)]]" on-blur="onBlur_"
           class$="list-item [[getHighlightedClass_('seeMore',
               highlightedIndex_)]]">
           $i18n{seeMore}

chrome/browser/resources/print_preview/ui/destination_dropdown_cros.js

@@ -68,17 +68,10 @@ Polymer({
 
   /** @override */
   attached() {
-    this.pointerDownListener_ = event => this.onPointerDown_(event);
-    document.addEventListener('pointerdown', this.pointerDownListener_);
     this.updateTabIndex_();
     this.IconLocation = IconLocation;
   },
 
-  /** @override */
-  detached() {
-    document.removeEventListener('pointerdown', this.pointerDownListener_);
-  },
-
   /**
    * Enqueues a task to refit the iron-dropdown if it is open.
    * @private
@@ -130,28 +123,20 @@ Polymer({
     this.highlightedIndex_ = this.getButtonListFromDropdown_().indexOf(item);
   },
 
-  /**
-   * @param {!Event} event
-   * @private
-   */
-  onPointerDown_(event) {
-    const paths = event.composedPath();
+  /** @private */
+  onClick_(event) {
     const dropdown =
         /** @type {!IronDropdownElement} */ (this.$$('iron-dropdown'));
-    const destinationDropdown =
-        /** @type {!Element} */ (this.$$('#destination-dropdown'));
-
     // Exit if path includes |dropdown| because event will be handled by
     // onSelect_.
-    if (paths.includes(dropdown)) {
+    if (event.composedPath().includes(dropdown)) {
       return;
     }
 
-    if (!paths.includes(destinationDropdown) || dropdown.opened) {
+    if (dropdown.opened) {
       this.closeDropdown_();
       return;
     }
-
     this.openDropdown_();
   },
 
@@ -171,9 +156,6 @@ Polymer({
     event.stopPropagation();
     const dropdown = this.$$('iron-dropdown');
     switch (event.code) {
-      case 'Tab':
-        this.closeDropdown_();
-        break;
       case 'ArrowUp':
       case 'ArrowDown':
         this.onArrowKeyPress_(event.code);
@@ -307,4 +289,17 @@ Polymer({
         'highlighted' :
         '';
   },
+
+  /**
+   * Close the dropdown when focus is lost except when an item in the dropdown
+   * is the element that received the focus.
+   * @param {!Event} event
+   * @private
+   */
+  onBlur_(event) {
+    if (!this.getButtonListFromDropdown_().includes(
+            /** @type {!Element} */ (event.relatedTarget))) {
+      this.closeDropdown_();
+    }
+  },
 });

chrome/test/data/webui/print_preview/destination_dropdown_cros_test.js

@@ -20,7 +20,6 @@ destination_dropdown_cros_test.suiteName =
 destination_dropdown_cros_test.TestNames = {
   CorrectListItems: 'correct list items',
   ClickCloses: 'click closes dropdown',
-  TabCloses: 'tab closes dropdown',
   HighlightedAfterUpDown: 'highlighted after keyboard press up and down',
   DestinationChangeAfterUpDown:
       'destination changes after keyboard press up and down',
@@ -48,22 +47,17 @@ suite(destination_dropdown_cros_test.suiteName, function() {
   }
 
   function clickDropdown() {
-    dropdown.$$('#destination-dropdown')
-        .dispatchEvent(new PointerEvent('pointerdown', {
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          buttons: 1,
-        }));
+    dropdown.$$('#destination-dropdown').click();
+  }
+
+  function clickDropdownFocus() {
+    dropdown.$$('#destination-dropdown').click();
+    dropdown.$$('#destination-dropdown').focus();
   }
 
   function clickOutsideDropdown() {
-    document.body.dispatchEvent(new PointerEvent('pointerdown', {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-      buttons: 1,
-    }));
+    document.body.click();
+    dropdown.$$('#destination-dropdown').blur();
   }
 
   function down() {
@@ -79,10 +73,6 @@ suite(destination_dropdown_cros_test.suiteName, function() {
     keyDownOn(dropdown.$$('#destination-dropdown'), 'Enter', [], 'Enter');
   }
 
-  function tab() {
-    keyDownOn(dropdown.$$('#destination-dropdown'), 'Tab', [], 'Tab');
-  }
-
   /** @return {?Element} */
   function getHighlightedElement() {
     return dropdown.$$('.highlighted');
@@ -140,33 +130,21 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         dropdown.value = destinationOne;
         const ironDropdown = dropdown.$$('iron-dropdown');
 
-        clickDropdown();
+        clickDropdownFocus();
         assertTrue(ironDropdown.opened);
 
         getList()[0].click();
         assertFalse(ironDropdown.opened);
 
-        clickDropdown();
+        clickDropdownFocus();
         assertTrue(ironDropdown.opened);
 
-        // Click outside dropdown to close the dropdown.
+        // Clicking outside the dropdown will cause it to lose focus and close.
+        // This will verify on-blur closes the dropdown.
         clickOutsideDropdown();
         assertFalse(ironDropdown.opened);
       });
 
-  test(assert(destination_dropdown_cros_test.TestNames.TabCloses), function() {
-    const destinationOne = createDestination('One', DestinationOrigin.CROS);
-    setItemList([destinationOne]);
-    dropdown.value = destinationOne;
-    const ironDropdown = dropdown.$$('iron-dropdown');
-
-    clickDropdown();
-    assertTrue(ironDropdown.opened);
-
-    tab();
-    assertFalse(ironDropdown.opened);
-  });
-
   test(
       assert(destination_dropdown_cros_test.TestNames.HighlightedAfterUpDown),
       function() {

chrome/test/data/webui/print_preview/print_preview_interactive_ui_tests.js

@@ -181,3 +181,23 @@ TEST_F(
       this.runMochaTest(
           scaling_settings_interactive_test.TestNames.AutoFocusInput);
     });
+
+GEN('#if defined(OS_CHROMEOS)');
+// eslint-disable-next-line no-var
+var PrintPreviewDestinationDropdownCrosTest =
+    class extends PrintPreviewInteractiveUITest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://print/test_loader.html?module=print_preview/destination_dropdown_cros_test.js';
+  }
+
+  /** @override */
+  get suiteName() {
+    return destination_dropdown_cros_test.suiteName;
+  }
+};
+
+TEST_F('PrintPreviewDestinationDropdownCrosTest', 'ClickCloses', function() {
+  this.runMochaTest(destination_dropdown_cros_test.TestNames.ClickCloses);
+});
+GEN('#endif');

chrome/test/data/webui/print_preview/print_preview_ui_browsertest.js

@@ -1142,14 +1142,6 @@ TEST_F(
           destination_dropdown_cros_test.TestNames.CorrectListItems);
     });
 
-TEST_F('PrintPreviewDestinationDropdownCrosTest', 'ClickCloses', function() {
-  this.runMochaTest(destination_dropdown_cros_test.TestNames.ClickCloses);
-});
-
-TEST_F('PrintPreviewDestinationDropdownCrosTest', 'TabCloses', function() {
-  this.runMochaTest(destination_dropdown_cros_test.TestNames.TabCloses);
-});
-
 TEST_F(
     'PrintPreviewDestinationDropdownCrosTest', 'HighlightedAfterUpDown',
     function() {