Improve touch support for the color picker.

Prior to this CL dragging the color-well and the hue-slider was
supported via mouse events.
Because of this, dragging via touch wasn't working.

This CL adds support for touch dragging. Unfortunately, since
the popups don't have support for touch-action and we could not
achieve a correct pointermove behavior for touch because we can't
change the value of touch-action to none, the support is added by
handling touch events. (see WebPagePopupImpl::SetTouchAction) [1]

I have also added 2 new tests to validate dragging via touch.

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=844547

Bug: 1068066
Change-Id: I9a70c7ab06de0506810bb7fd1a4baaab2ea7a622
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2142339Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#757961}

third_party/blink/renderer/core/html/forms/resources/color_picker.js

@@ -609,6 +609,15 @@ class VisualColorPicker extends HTMLElement {
       document.documentElement
           .addEventListener('mousemove', this.onMouseMove_);
       document.documentElement.addEventListener('mouseup', this.onMouseUp_);
+      this.colorWell_
+          .addEventListener('touchstart', this.onColorWellTouchStart_);
+      this.hueSlider_
+          .addEventListener('touchstart', this.onHueSliderTouchStart_);
+      document.documentElement
+          .addEventListener('touchstart', this.onTouchStart_);
+      document.documentElement
+          .addEventListener('touchmove', this.onTouchMove_);
+      document.documentElement.addEventListener('touchend', this.onTouchEnd_);
       document.documentElement.addEventListener('keydown', this.onKeyDown_);
 
       this.dispatchEvent(new CustomEvent('visual-color-picker-initialized'));
@@ -633,7 +642,7 @@ class VisualColorPicker extends HTMLElement {
     event.preventDefault();
     event.stopPropagation();
     this.hueSlider_.focused = false;
-    this.colorWell_.mouseDown(new Point(event.clientX, event.clientY));
+    this.colorWell_.pointerDown(new Point(event.clientX, event.clientY));
   }
 
   /**
@@ -643,7 +652,7 @@ class VisualColorPicker extends HTMLElement {
     event.preventDefault();
     event.stopPropagation();
     this.colorWell_.focused = false;
-    this.hueSlider_.mouseDown(new Point(event.clientX, event.clientY));
+    this.hueSlider_.pointerDown(new Point(event.clientX, event.clientY));
   }
 
   onMouseDown_ = () => {
@@ -656,13 +665,52 @@ class VisualColorPicker extends HTMLElement {
    */
   onMouseMove_ = (event) => {
     var point = new Point(event.clientX, event.clientY);
-    this.colorWell_.mouseMove(point);
-    this.hueSlider_.mouseMove(point);
+    this.colorWell_.pointerMove(point);
+    this.hueSlider_.pointerMove(point);
   }
 
   onMouseUp_ = () => {
-    this.colorWell_.mouseUp();
-    this.hueSlider_.mouseUp();
+    this.colorWell_.pointerUp();
+    this.hueSlider_.pointerUp();
+  }
+
+    /**
+   * @param {!Event} event
+   */
+  onColorWellTouchStart_ = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.hueSlider_.focused = false;
+    this.colorWell_.pointerDown(new Point(event.touches[0].clientX, event.touches[0].clientY));
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  onHueSliderTouchStart_ = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.colorWell_.focused = false;
+    this.hueSlider_.pointerDown(new Point(event.touches[0].clientX, event.touches[0].clientY));
+  }
+
+  onTouchStart_ = () => {
+    this.colorWell_.focused = false;
+    this.hueSlider_.focused = false;
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  onTouchMove_ = (event) => {
+    var point = new Point(event.touches[0].clientX, event.touches[0].clientY);
+    this.colorWell_.pointerMove(point);
+    this.hueSlider_.pointerMove(point);
+  }
+
+  onTouchEnd_ = () => {
+    this.colorWell_.pointerUp();
+    this.hueSlider_.pointerUp();
   }
 
   /**
@@ -854,7 +902,7 @@ class ColorSelectionArea extends HTMLElement {
   /**
    * @param {!Point} point
    */
-  mouseDown(point) {
+  pointerDown(point) {
     this.colorSelectionRing_.focus({preventScroll: true});
     this.colorSelectionRing_.drag = true;
     this.moveColorSelectionRingTo_(point);
@@ -863,13 +911,13 @@ class ColorSelectionArea extends HTMLElement {
   /**
    * @param {!Point} point
    */
-  mouseMove(point) {
+  pointerMove(point) {
     if (this.colorSelectionRing_.drag) {
       this.moveColorSelectionRingTo_(point);
     }
   }
 
-  mouseUp() {
+  pointerUp() {
     this.colorSelectionRing_.drag = false;
   }
 
@@ -1836,6 +1884,7 @@ class FormatToggler extends HTMLElement {
     this.addEventListener('click', this.onClick_);
     this.addEventListener('keydown', this.onKeyDown_);
     this.addEventListener('mousedown', (event) => event.preventDefault());
+    this.addEventListener('touchstart', (event) => event.preventDefault());
   }
 
   /**

third_party/blink/web_tests/virtual/controls-refresh/color/color-picker-appearance-color-well-touch-drag.html

+<!DOCTYPE html>
+<html>
+<head>
+<script>
+testRunner.waitUntilDone();
+</script>
+<script src='../../../fast/forms/resources/picker-common.js'></script>
+</head>
+<body>
+<input type='color' id='color' value='#80D9FF'>
+
+<p id='description' style='opacity: 0'></p>
+<div id='console' style='opacity: 0'></div>
+
+<script>
+openPicker(document.getElementById('color'), openPickerSuccessfulCallback, () => testRunner.notifyDone());
+
+function openPickerSuccessfulCallback() {
+  popupWindow.focus();
+  const popupDocument = popupWindow.document;
+  const colorWell = popupDocument.querySelector('color-well');
+  const colorWellRect = colorWell.getBoundingClientRect();
+  eventSender.clearTouchPoints();
+  eventSender.addTouchPoint(colorWellRect.left, colorWellRect.top);
+  eventSender.touchStart();
+  eventSender.updateTouchPoint(0, colorWellRect.left + (colorWellRect.width * 4 / 10), colorWellRect.top + (colorWellRect.height * 6 / 10));
+  eventSender.touchMove();
+  eventSender.releaseTouchPoint(0);
+  eventSender.touchEnd();
+  testRunner.notifyDone();
+}
+</script>
+</body>
+</html>
\ No newline at end of file

third_party/blink/web_tests/virtual/controls-refresh/color/color-picker-appearance-hue-slider-touch-drag.html

+<!DOCTYPE html>
+<html>
+<head>
+<script>
+testRunner.waitUntilDone();
+</script>
+<script src='../../../fast/forms/resources/picker-common.js'></script>
+</head>
+<body>
+<input type='color' id='color'>
+
+<p id='description' style='opacity: 0'></p>
+<div id='console' style='opacity: 0'></div>
+
+<script>
+openPicker(document.getElementById('color'), openPickerSuccessfulCallback, () => testRunner.notifyDone());
+
+function openPickerSuccessfulCallback() {
+  popupWindow.focus();
+  const popupDocument = popupWindow.document;
+  const hueSlider = popupDocument.querySelector('hue-slider');
+  const hueSliderRect = hueSlider.getBoundingClientRect();
+  eventSender.clearTouchPoints();
+  eventSender.addTouchPoint(hueSliderRect.left, hueSliderRect.top);
+  eventSender.touchStart();
+  eventSender.updateTouchPoint(0, hueSliderRect.left + (hueSliderRect.width / 3), hueSliderRect.top);
+  eventSender.touchMove();
+  eventSender.releaseTouchPoint(0);
+  eventSender.touchEnd();
+  testRunner.notifyDone();
+}
+</script>
+</body>
+</html>
\ No newline at end of file