<input type=color> select entire number on focus

This patch selects all of the text in the text fields for choosing
numbered values for R, G, and B in the color picker when clicking or
tabbing into them.

Fixed: 1137423
Change-Id: I10ca4a0f043429e762f724ddb9b9a0864fe0d7bd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2527181
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Sanket Joshi <sajos@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#831193}

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

@@ -1782,6 +1782,7 @@ class ChannelValueContainer extends HTMLInputElement {
 
     this.addEventListener('input', this.onValueChange_);
     this.addEventListener('blur', this.onBlur_);
+    this.addEventListener('focus', this.onFocus_);
   }
 
   get channelValue() {
@@ -1902,6 +1903,10 @@ class ChannelValueContainer extends HTMLInputElement {
         break;
     }
   }
+
+  onFocus_ = () => {
+    this.select();
+  }
 }
 window.customElements.define(
     'channel-value-container', ChannelValueContainer, {extends: 'input'});

third_party/blink/web_tests/fast/forms/color/color-picker-appearance-imperfect-match.html

@@ -25,10 +25,11 @@ function openPickerSuccessfulCallback() {
   eventSender.mouseMoveTo(hValueContainerRect.right - 1, hValueContainerRect.bottom - 1);
   eventSender.mouseDown();
   eventSender.mouseUp();
+  eventSender.keyDown('ArrowRight');
   eventSender.keyDown('Backspace');
   eventSender.keyDown('1');
   testRunner.notifyDone();
 }
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/blink/web_tests/fast/forms/color/color-picker-escape-cancellation-keyboard-change.html

@@ -23,9 +23,9 @@ promise_test(() => {
     eventSender.mouseDown();
     eventSender.mouseUp();
     assert_equals(rValueContainer.value, '128');
-    eventSender.keyDown('Delete');
-    assert_equals(rValueContainer.value, '28');
-    assert_equals(colorControl.value, '#1cd9ff', 'Expected color value to change from manualinput.');
+    eventSender.keyDown('5');
+    assert_equals(rValueContainer.value, '5');
+    assert_equals(colorControl.value, '#05d9ff', 'Expected color value to change from manualinput.');
     eventSender.keyDown('Escape');
     assert_equals(colorControl.value, '#80d9ff', 'Color control value should have reverted back after pressing escape.');
     assert_equals(rValueContainer.value, '128');

third_party/blink/web_tests/fast/forms/color/color-picker-events-change-revert.html

@@ -27,7 +27,7 @@ promise_test(() => {
 
     assert_equals(rValueContainer.value, '0');
     eventSender.keyDown('1');
-    assert_equals(rValueContainer.value, '01');
+    assert_equals(rValueContainer.value, '1');
     assert_equals(inputEventCount, 1, 'Input event should have fired after color value change.');
     assert_equals(changeEventCount, 0, 'No change event should have fired before popup is closed.');
 

third_party/blink/web_tests/fast/forms/color/color-picker-events-change.html

@@ -26,12 +26,12 @@ promise_test(() => {
 
     assert_equals(rValueContainer.value, '0');
     eventSender.keyDown('1');
-    assert_equals(rValueContainer.value, '01');
+    assert_equals(rValueContainer.value, '1');
     assert_equals(inputEventCount, 1, 'Input event should have fired after color value change.');
     assert_equals(changeEventCount, 0, 'No change event should have fired before popup is closed.');
 
     eventSender.keyDown('2');
-    assert_equals(rValueContainer.value, '012');
+    assert_equals(rValueContainer.value, '12');
     assert_equals(inputEventCount, 2, 'Additional input event should have fired after additional color value change.');
     assert_equals(changeEventCount, 0, 'No change event should have fired before popup is closed.');
 

third_party/blink/web_tests/fast/forms/color/color-picker-manual-color-change-invalid-values.html

@@ -22,6 +22,7 @@ t.step(() => {
     eventSender.mouseMoveTo(gValueContainerRect.left + 1, gValueContainerRect.top);
     eventSender.mouseDown();
     eventSender.mouseUp();
+    eventSender.keyDown('ArrowLeft');
     eventSender.keyDown('3');
     assert_equals(gValueContainer.value, '372');
     eventSender.keyDown('Tab');
@@ -35,6 +36,7 @@ t.step(() => {
     eventSender.mouseMoveTo(sValueContainerRect.right - 1, sValueContainerRect.top + (sValueContainerRect.height / 2));
     eventSender.mouseDown();
     eventSender.mouseUp();
+    eventSender.keyDown('ArrowRight');
     eventSender.keyDown('Backspace');
     assert_equals(sValueContainer.value, '41');
     eventSender.keyDown('Tab');
@@ -47,6 +49,7 @@ t.step(() => {
     eventSender.mouseMoveTo(hexValueContainerRect.right - 1, hexValueContainerRect.top + (hexValueContainerRect.height / 2));
     eventSender.mouseDown();
     eventSender.mouseUp();
+    eventSender.keyDown('ArrowRight');
     const hexValueContainerLength = hexValueContainer.value.length;
     for (let i = 0; i < hexValueContainerLength; i++) {
       eventSender.keyDown('Backspace');
@@ -58,4 +61,4 @@ t.step(() => {
 });
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/blink/web_tests/fast/forms/color/color-picker-select-on-focus.html

+<!DOCTYPE html>
+<script src='../../../resources/testharness.js'></script>
+<script src='../../../resources/testharnessreport.js'></script>
+<script src='../../../fast/forms/resources/picker-common.js'></script>
+
+<input type=color id=colorinput value='#ffffff'>
+
+<script>
+function setTimeoutPromise() {
+  return new Promise(resolve => setTimeout(resolve, 0));
+}
+
+promise_test(async () => {
+  await openPickerWithPromise(document.getElementById('colorinput'));
+  popupWindow.focus();
+  const popupDocument = popupWindow.document;
+
+  const hueSliderSelectionRing = popupDocument.querySelector('hue-slider > color-selection-ring');
+  const rValueContainer = popupDocument.getElementById('rValueContainer');
+  const gValueContainer = popupDocument.getElementById('gValueContainer');
+  const bValueContainer = popupDocument.getElementById('bValueContainer');
+
+  hueSliderSelectionRing.focus();
+
+  eventSender.keyDown('Tab');
+  await setTimeoutPromise();
+  assert_equals(rValueContainer.selectionStart, 0,
+    'Tabbing into the text field should select the text in it.');
+  assert_equals(rValueContainer.selectionEnd, 3,
+    'Tabbing into the text field should select the text in it.');
+
+  eventSender.keyDown('Tab');
+  await setTimeoutPromise();
+  assert_equals(gValueContainer.selectionStart, 0,
+    'Tabbing into the text field should select the text in it.');
+  assert_equals(gValueContainer.selectionEnd, 3,
+    'Tabbing into the text field should select the text in it.');
+
+  eventSender.keyDown('Tab');
+  await setTimeoutPromise();
+  assert_equals(bValueContainer.selectionStart, 0,
+    'Tabbing into the text field should select the text in it.');
+  assert_equals(bValueContainer.selectionEnd, 3,
+    'Tabbing into the text field should select the text in it.');
+
+  rValueContainer.click();
+  assert_equals(rValueContainer.selectionStart, 0,
+    'Clicking the text field should select the text in it.');
+  assert_equals(rValueContainer.selectionEnd, 3,
+    'Clicking the text field should select the text in it.');
+
+  gValueContainer.click();
+  assert_equals(gValueContainer.selectionStart, 0,
+    'Clicking the text field should select the text in it.');
+  assert_equals(gValueContainer.selectionEnd, 3,
+    'Clicking the text field should select the text in it.');
+
+  bValueContainer.click();
+  assert_equals(bValueContainer.selectionStart, 0,
+    'Clicking the text field should select the text in it.');
+  assert_equals(bValueContainer.selectionEnd, 3,
+    'Clicking the text field should select the text in it.');
+
+}, 'Focusing color channels of color picker should select the entire number for easy replacing.');
+</script>