Fix mouse input delay on systems with a touchscreen

Use event.sourceCapabilities to allow non-synthetic mouse events to be
processed by the gesture system

Devices such as touchscreen Chromebooks can have input from mouse and
touch and the 2500ms delay is not necessary.

Fixes #3784

src/standard/gestures.html

@@ -41,12 +41,24 @@
   // Check for touch-only devices
   var IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/);
 
+  // Check for sourceCapabilities, used to distinguish synthetic events
+  var HAS_SOURCE_CAPS = 'sourceCapabilities' in UIEvent.prototype;
+
   // touch will make synthetic mouse events
   // `preventDefault` on touchend will cancel them,
   // but this breaks `<input>` focus and link clicks
   // disable mouse handlers for MOUSE_TIMEOUT ms after
   // a touchend to ignore synthetic mouse events
   var mouseCanceller = function(mouseEvent) {
+    if (HAS_SOURCE_CAPS) {
+      // if mouseEvent did not come from a device that fires touch events,
+      // it was made by a real mouse and should be counted
+      // http://wicg.github.io/InputDeviceCapabilities/#dom-inputdevicecapabilities-firestouchevents
+      var sc = mouseEvent.sourceCapabilities;
+      if (sc && !sc.firesTouchEvents) {
+        return;
+      }
+    }
     // skip synthetic mouse events
     mouseEvent[HANDLED_OBJ] = {skip: true};
     // disable "ghost clicks"

test/smoke/gesture-import.html

@@ -4,13 +4,13 @@
   <template>
     <style>
       #inner {
-        height: 20px;
-        width: 20px;
+        height: 100px;
+        width: 100px;
         background: blue;
       }
       #prevent {
-        height: 20px;
-        width: 20px;
+        height: 100px;
+        width: 100px;
         background: red;
       }
     </style>
@@ -37,6 +37,7 @@
     logger: function(e, detail) {
       console.log(e.type);
       console.log(detail);
+      console.log(e.target);
     },
     track: function(e, detail) {
       this.logger(e, detail);

test/smoke/gestures.html

@@ -9,8 +9,8 @@
     <style>
       x-gestures {
         display: block;
-        height: 100px;
-        width: 100px;
+        height: 500px;
+        width: 500px;
         background: gray;
       }
     </style>