Fix AudioPlayer tests for Polymer2

Change <repeat-button> element to use click event instead of tap,
because when binding to tap event Polymer2 wasn't triggering the click
event.

Change test util functions that issues events to have "composed: true"
[1] when they have "bubbles: true", this allows events to propagate
across shadow DOM boundary.

Add trailing comma to repeat_button.js so auto-formatter leave those
lines expanded.

Update all functions that were updated in test_util_base.js to use
const/let instead of var.

[1] - https://developer.mozilla.org/en-US/docs/Web/API/Event/composed

Bug: 875525
Change-Id: I5890f159ee54a5d6254b90621776cd82ef9bd7b5
Reviewed-on: https://chromium-review.googlesource.com/1237754
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Trent Apted <tapted@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593466}

ui/file_manager/audio_player/elements/repeat_button.js

@@ -12,28 +12,28 @@ Polymer({
 
   hostAttributes: {
     role: 'button',
-    tabindex: 0
+    tabindex: 0,
   },
 
   behaviors: [
     Polymer.IronButtonState,
-    Polymer.IronControlState
+    Polymer.IronControlState,
   ],
 
   properties: {
     'repeatMode': {
       type: String,
       notify: true,
-      reflectToAttribute: true
+      reflectToAttribute: true,
     }
   },
 
   listeners: {
-    tap: '_tapHandler'
+    click: '_clickHandler',
   },
 
   observers: [
-    '_focusedChanged(receivedFocusFromKeyboard)'
+    '_focusedChanged(receivedFocusFromKeyboard)',
   ],
 
   _focusedChanged: function(receivedFocusFromKeyboard) {
@@ -58,7 +58,7 @@ Polymer({
     ];
   },
 
-  _tapHandler: function() {
+  _clickHandler: function() {
     this.next_();
   },
 

ui/file_manager/file_manager/background/js/test_util_base.js

@@ -364,15 +364,15 @@ test.util.sync.fakeEvent = function(contentWindow,
  */
 test.util.sync.fakeKeyDown = function(
     contentWindow, targetQuery, key, keyIdentifier, ctrl, shift, alt) {
-  var event = new KeyboardEvent('keydown',
-      {
-        bubbles: true,
-        key: key,
-        keyIdentifier: keyIdentifier,
-        ctrlKey: ctrl,
-        shiftKey: shift,
-        altKey: alt
-      });
+  const event = new KeyboardEvent('keydown', {
+    bubbles: true,
+    composed: true,  // Allow the event to bubble past shadow DOM root.
+    key: key,
+    keyIdentifier: keyIdentifier,
+    ctrlKey: ctrl,
+    shiftKey: shift,
+    altKey: alt
+  });
   return test.util.sync.sendEvent(contentWindow, targetQuery, event);
 };
 
@@ -391,17 +391,22 @@ test.util.sync.fakeKeyDown = function(
  *     otherwise.
  */
 test.util.sync.fakeMouseClick = function(contentWindow, targetQuery) {
-  var mouseOverEvent = new MouseEvent('mouseover', {bubbles: true, detail: 1});
-  var resultMouseOver =
+  const props = {
+    bubbles: true,
+    detail: 1,
+    composed: true,  // Allow the event to bubble past shadow DOM root.
+  };
+  const mouseOverEvent = new MouseEvent('mouseover', props);
+  const resultMouseOver =
       test.util.sync.sendEvent(contentWindow, targetQuery, mouseOverEvent);
-  var mouseDownEvent = new MouseEvent('mousedown', {bubbles: true, detail: 1});
-  var resultMouseDown =
+  const mouseDownEvent = new MouseEvent('mousedown', props);
+  const resultMouseDown =
       test.util.sync.sendEvent(contentWindow, targetQuery, mouseDownEvent);
-  var mouseUpEvent = new MouseEvent('mouseup', {bubbles: true, detail: 1});
-  var resultMouseUp =
+  const mouseUpEvent = new MouseEvent('mouseup', props);
+  const resultMouseUp =
       test.util.sync.sendEvent(contentWindow, targetQuery, mouseUpEvent);
-  var clickEvent = new MouseEvent('click', {bubbles: true, detail: 1});
-  var resultClick =
+  const clickEvent = new MouseEvent('click', props);
+  const resultClick =
       test.util.sync.sendEvent(contentWindow, targetQuery, clickEvent);
   return resultMouseOver && resultMouseDown && resultMouseUp && resultClick;
 };
@@ -416,12 +421,14 @@ test.util.sync.fakeMouseClick = function(contentWindow, targetQuery) {
  *     otherwise.
  */
 test.util.sync.fakeMouseRightClick = function(contentWindow, targetQuery) {
-  var mouseDownEvent = new MouseEvent('mousedown', {bubbles: true, button: 2});
+  const mouseDownEvent =
+      new MouseEvent('mousedown', {bubbles: true, button: 2, composed: true});
   if (!test.util.sync.sendEvent(contentWindow, targetQuery, mouseDownEvent)) {
     return false;
   }
 
-  var contextMenuEvent = new MouseEvent('contextmenu', {bubbles: true});
+  const contextMenuEvent =
+      new MouseEvent('contextmenu', {bubbles: true, composed: true});
   return test.util.sync.sendEvent(contentWindow, targetQuery, contextMenuEvent);
 };
 
@@ -435,22 +442,24 @@ test.util.sync.fakeMouseRightClick = function(contentWindow, targetQuery) {
  *     otherwise.
  */
 test.util.sync.fakeTouchClick = function(contentWindow, targetQuery) {
-  var touchStartEvent = new TouchEvent('touchstart');
+  const touchStartEvent = new TouchEvent('touchstart');
   if (!test.util.sync.sendEvent(contentWindow, targetQuery, touchStartEvent)) {
     return false;
   }
 
-  var mouseDownEvent = new MouseEvent('mousedown', {bubbles: true, button: 2});
+  const mouseDownEvent =
+      new MouseEvent('mousedown', {bubbles: true, button: 2, composed: true});
   if (!test.util.sync.sendEvent(contentWindow, targetQuery, mouseDownEvent)) {
     return false;
   }
 
-  var touchEndEvent = new TouchEvent('touchend');
+  const touchEndEvent = new TouchEvent('touchend');
   if (!test.util.sync.sendEvent(contentWindow, targetQuery, touchEndEvent)) {
     return false;
   }
 
-  var contextMenuEvent = new MouseEvent('contextmenu', {bubbles: true});
+  const contextMenuEvent =
+      new MouseEvent('contextmenu', {bubbles: true, composed: true});
   return test.util.sync.sendEvent(contentWindow, targetQuery, contextMenuEvent);
 };
 
@@ -470,13 +479,14 @@ test.util.sync.fakeMouseDoubleClick = function(contentWindow, targetQuery) {
 
   // Send the second click event, but with detail equal to 2 (number of clicks)
   // in a row.
-  var event = new MouseEvent('click', { bubbles: true, detail: 2 });
+  let event =
+      new MouseEvent('click', {bubbles: true, detail: 2, composed: true});
   if (!test.util.sync.sendEvent(contentWindow, targetQuery, event)) {
     return false;
   }
 
   // Send the double click event.
-  var event = new MouseEvent('dblclick', { bubbles: true });
+  event = new MouseEvent('dblclick', {bubbles: true, composed: true});
   if (!test.util.sync.sendEvent(contentWindow, targetQuery, event)) {
     return false;
   }
@@ -492,7 +502,7 @@ test.util.sync.fakeMouseDoubleClick = function(contentWindow, targetQuery) {
  * @return {boolean} True if the event is sent to the target, false otherwise.
  */
 test.util.sync.fakeMouseDown = function(contentWindow, targetQuery) {
-  var event = new MouseEvent('mousedown', { bubbles: true });
+  const event = new MouseEvent('mousedown', {bubbles: true, composed: true});
   return test.util.sync.sendEvent(contentWindow, targetQuery, event);
 };
 
@@ -504,7 +514,7 @@ test.util.sync.fakeMouseDown = function(contentWindow, targetQuery) {
  * @return {boolean} True if the event is sent to the target, false otherwise.
  */
 test.util.sync.fakeMouseUp = function(contentWindow, targetQuery) {
-  var event = new MouseEvent('mouseup', { bubbles: true });
+  const event = new MouseEvent('mouseup', {bubbles: true, composed: true});
   return test.util.sync.sendEvent(contentWindow, targetQuery, event);
 };
 

ui/file_manager/file_manager/main.html

@@ -26,6 +26,12 @@
     <link rel="stylesheet" href="chrome-extension://fbjakikfhfdajcamjleinfciajelkpek/cws_widget/cws_widget_container.css">
 
     <style is="custom-style">
+      html {
+        /* crbug.com/812035 Remove 300ms delay for 'click' event, when using
+           touch interface. */
+        touch-action: manipulation;
+      }
+
       #search-box cr-input {
         --cr-input-color: white;
         --cr-input-focus-color: white;