Fixed touch scrolling issue in Surface and WP devices (#18737)

Fixed by using mouse events instead of touchevents when the browser is
IE or Edge (added isIEOrEdge utility method in the BrowserInfo). Also
added touch-action: none; css rules into escalator.css to prevent
default touch behaviour on IE and Edge
No new unit tests since we do not have automatic touch testing
possibilities yet.
Please test manually with Surface: IE and Edge, use for example uitest:
com.vaadin.tests.components.grid.basics.GridBasics

Change-Id: I5b37f1648e2051ea0ab4d56ab767186b532da07c

client/src/main/java/com/vaadin/client/BrowserInfo.java

@@ -245,6 +245,10 @@ public class BrowserInfo {
         return browserDetails.isEdge();
     }
 
+    public boolean isIEOrEdge() {
+        return browserDetails.isIE() || browserDetails.isEdge();
+    }
+
     public boolean isFirefox() {
         return browserDetails.isFirefox();
     }

client/src/main/java/com/vaadin/client/widgets/Escalator.java

@@ -457,6 +457,15 @@ public class Escalator extends Widget
                 }
 
                 int pagePosition(CustomTouchEvent event) {
+                    // Use native event's screen x and y for IEs and Edge
+                    // since there is no touches for these browsers (#18737)
+                    if (BrowserInfo.get().isIEOrEdge()) {
+                        return vertical
+                                ? event.getNativeEvent().getClientY()
+                                        + Window.getScrollTop()
+                                : event.getNativeEvent().getClientX()
+                                        + Window.getScrollLeft();
+                    }
                     JsArray<Touch> a = event.getNativeEvent().getTouches();
                     return vertical ? a.get(0).getPageY() : a.get(0).getPageX();
                 }
@@ -496,7 +505,7 @@ public class Escalator extends Widget
             };
 
             public void touchStart(final CustomTouchEvent event) {
-                if (event.getNativeEvent().getTouches().length() == 1) {
+                if (allowTouch(event)) {
                     if (yMov == null) {
                         yMov = new Movement(true);
                         xMov = new Movement(false);
@@ -544,6 +553,15 @@ public class Escalator extends Widget
                 }
             }
 
+            // Allow touchStart for IE and Edge even though there is no touch
+            // (#18737),
+            // otherwise allow touch only if there is a single touch in the
+            // event
+            private boolean allowTouch(final CustomTouchEvent event) {
+                return BrowserInfo.get().isIEOrEdge()
+                        || event.getNativeEvent().getTouches().length() == 1;
+            }
+
             private double easingInOutCos(double val, double max) {
                 return 0.5 - 0.5 * Math.cos(Math.PI * Math.signum(val)
                         * Math.min(Math.abs(val), max) / max);
@@ -958,7 +976,7 @@ public class Escalator extends Widget
 
         public native void attachTouchListeners(Element element)
         /*
-         * Detaching events with JSNI instead of the GWT event mechanism because
+         * Attaching events with JSNI instead of the GWT event mechanism because
          * GWT didn't provide enough details in events, or triggering the event
          * handlers with GWT bindings was unsuccessful. Maybe, with more time
          * and skill, it could be done with better success. JavaScript overlay
@@ -996,6 +1014,48 @@ public class Escalator extends Widget
             }
         }-*/;
 
+        /**
+         * Using mousedown, mousemove, and mouseup for IE and Edge instead of
+         * touch* listeners (#18737)
+         * 
+         * @param element
+         */
+        public native void attachMouseDragListeners(Element element)
+        /*
+         * Attaching events with JSNI instead of the GWT event mechanism because
+         * GWT didn't provide enough details in events, or triggering the event
+         * handlers with GWT bindings was unsuccessful. Maybe, with more time
+         * and skill, it could be done with better success. JavaScript overlay
+         * types might work. This might also get rid of the JsniWorkaround
+         * class.
+         */
+        /*-{
+            element.addEventListener("mousedown", this.@com.vaadin.client.widgets.JsniWorkaround::touchStartFunction);
+            element.addEventListener("mousemove", this.@com.vaadin.client.widgets.JsniWorkaround::touchMoveFunction);
+            element.addEventListener("mouseup", this.@com.vaadin.client.widgets.JsniWorkaround::touchEndFunction);
+        }-*/;
+
+        /**
+         * Using mousedown, mousemove, and mouseup for IE and Edge instead of
+         * touch* listeners (#18737)
+         * 
+         * @param element
+         */
+        public native void detachMouseDragListeners(Element element)
+        /*
+         * Detaching events with JSNI instead of the GWT event mechanism because
+         * GWT didn't provide enough details in events, or triggering the event
+         * handlers with GWT bindings was unsuccessful. Maybe, with more time
+         * and skill, it could be done with better success. JavaScript overlay
+         * types might work. This might also get rid of the JsniWorkaround
+         * class.
+         */
+        /*-{
+            element.removeEventListener("mousedown", this.@com.vaadin.client.widgets.JsniWorkaround::touchStartFunction);
+            element.removeEventListener("mousemove", this.@com.vaadin.client.widgets.JsniWorkaround::touchMoveFunction);
+            element.removeEventListener("mouseup", this.@com.vaadin.client.widgets.JsniWorkaround::touchEndFunction);
+        }-*/;
+
         public void scrollToColumn(final int columnIndex,
                 final ScrollDestination destination, final int padding) {
             assert columnIndex >= columnConfiguration.frozenColumns : "Can't scroll to a frozen column";
@@ -5772,7 +5832,13 @@ public class Escalator extends Widget
         scroller.attachScrollListener(verticalScrollbar.getElement());
         scroller.attachScrollListener(horizontalScrollbar.getElement());
         scroller.attachMousewheelListener(getElement());
-        scroller.attachTouchListeners(getElement());
+
+        if (BrowserInfo.get().isIEOrEdge()) {
+            // Touch listeners doesn't work for IE and Edge (#18737)
+            scroller.attachMouseDragListeners(getElement());
+        } else {
+            scroller.attachTouchListeners(getElement());
+        }
     }
 
     @Override
@@ -5781,7 +5847,13 @@ public class Escalator extends Widget
         scroller.detachScrollListener(verticalScrollbar.getElement());
         scroller.detachScrollListener(horizontalScrollbar.getElement());
         scroller.detachMousewheelListener(getElement());
-        scroller.detachTouchListeners(getElement());
+
+        if (BrowserInfo.get().isIEOrEdge()) {
+            // Touch listeners doesn't work for IE and Edge (#18737)
+            scroller.detachMouseDragListeners(getElement());
+        } else {
+            scroller.detachTouchListeners(getElement());
+        }
 
         /*
          * We can call paintRemoveRows here, because static ranges are simple to

themes/src/main/themes/VAADIN/themes/base/escalator/escalator.scss

@@ -75,6 +75,9 @@
   }
 
   .#{$primaryStyleName}-body {
+    -ms-touch-action: none;
+    touch-action: none;
+
     z-index: 0;
     top: 0;