Skip to content

GitLab

T
tangled
Commit 3b6a2d96 authored by Sanket Joshi's avatar Sanket Joshi Committed by Commit Bot
Browse files
Options

Reland "Implement visual color picker" 

This is a reland of c74afcfa

Original change's description:
> Implement visual color picker
>
> This CL adds to the implementation of the new color picker to provide
> functionality that allows the user to select colors visually. There
> are a few different components being added to the VisualColorPicker.
> They have been described in the ColorPicker.js file, but their
> description are also being shared herewith for convenience.
>
> EyeDropper: Allows color selection from content outside the color
>             picker. (This is currently just a placeholder for a future
>             implementation.)
> ColorViewer: Provides a view of the selected color.
> ColorSelectionArea: Base class for ColorWell and HueSlider that
>                     encapsulates a ColorPalette and a
>                     ColorSelectionRing.
> ColorPalette: Displays a range of colors.
> ColorSelectionRing: Provides movement and color selection
>                     functionality to pick colors from a given
>                     ColorPalette.
> ColorWell: Allows selection from a range of colors, between black and
>            white, that have the same hue value.
> HueSlider: Allows selection from a range of colors with distinct hue
>            values.
>
> This change includes connecting the existing manual color picker with
> the newly implemented visual color picker. If the user manually enters
> a new color value, it will be reflected visually, and similarly if the
> user visually selects a new color, the manual values will also get
> updated.
>
> Bug: 983311
> Change-Id: I32f3e647bae5da25a664a1f6cd1dd2462feb3984
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1747857
> Reviewed-by: Kent Tamura <tkent@chromium.org>
> Reviewed-by: Mason Freed <masonfreed@chromium.org>
> Commit-Queue: Sanket Joshi <sajos@microsoft.com>
> Cr-Commit-Position: refs/heads/master@{#687144}

Bug: 983311
Change-Id: I35596ee04bd3e3df481e9096f747b07e8413e3c1


TBR'ing original reviewers. Not making any changes to the original patch. It is
suspected that the MSAN test failure that lead to the original patch being
reverted was an unrelated issue. I have been unable to reproduce the failure
locally and this change does not touch C++ code. Per the recommendation here:
https://bugs.chromium.org/p/chromium/issues/detail?id=994447, relanding this
change as is to see if the MSAN failure still occurs.

TBR: tkent@chromium.org,masonfreed@chromium.org
Change-Id: I35596ee04bd3e3df481e9096f747b07e8413e3c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1758705Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Commit-Queue: Sanket Joshi <sajos@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#688011}
parent 5cdb54ae
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1142 additions and 23 deletions
third_party/blink/renderer/core/html/forms/resources/color_picker.css
View file @ 3b6a2d96
......@@ -19,6 +19,75 @@ visual-color-picker {
height: 59%;
}
color-well {
border-radius: 2px 2px 0px 0px;
display: block;
height: 77%;
position: relative;
overflow: hidden;
}
hue-slider {
height: 100%;
margin-left: 6%;
position: relative;
width: 130px;
}
#visual-color-picker-strip {
display: flex;
height: 18%;
margin-top: 3%;
position: relative;
}
eye-dropper {
height: 32px;
margin-left: 2%;
position: relative;
width: 32px;
}
color-viewer {
border: 1px solid rgba(0, 0, 0, 0.19);
border-radius: 50%;
box-sizing: border-box;
height: 32px;
margin-left: 2%;
width: 32px;
}
color-well > canvas {
height: 100%;
width: 100%;
}
hue-slider > canvas {
border-radius: 2px;
height: 11px;
margin-top: 7%;
width: 100%;
}
color-selection-ring {
border: 2px solid #FFFFFF;
border-radius: 50%;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
position: absolute;
}
color-well > color-selection-ring {
height: 12px;
width: 12px;
}
hue-slider > color-selection-ring {
height: 16px;
margin-top: 7%;
width: 16px;
}
manual-color-picker {
height: 28%;
}
......
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-color-well-click.html 0 → 100644
View file @ 3b6a2d96
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../../../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.mouseMoveTo(colorWellRect.left + (colorWellRect.width * 4 / 10), colorWellRect.top + (colorWellRect.height * 6 / 10));
eventSender.mouseDown();
eventSender.mouseUp();
testRunner.notifyDone();
}
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-color-well-drag.html 0 → 100644
View file @ 3b6a2d96
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../../../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.mouseMoveTo(colorWellRect.left, colorWellRect.top);
eventSender.mouseDown();
eventSender.mouseMoveTo(colorWellRect.left + (colorWellRect.width * 4 / 10), colorWellRect.top + (colorWellRect.height * 6 / 10));
eventSender.mouseUp();
testRunner.notifyDone();
}
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hue-slider-click.html 0 → 100644
View file @ 3b6a2d96
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../../../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.mouseMoveTo(hueSliderRect.left + (hueSliderRect.width / 2), hueSliderRect.top);
eventSender.mouseDown();
eventSender.mouseUp();
testRunner.notifyDone();
}
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hue-slider-drag.html 0 → 100644
View file @ 3b6a2d96
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../../../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.mouseMoveTo(hueSliderRect.left, hueSliderRect.top);
eventSender.mouseDown();
eventSender.mouseMoveTo(hueSliderRect.left + (hueSliderRect.width / 2), hueSliderRect.top);
eventSender.mouseUp();
testRunner.notifyDone();
}
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hue-slider-left-edge-zero-hue.html 0 → 100644
View file @ 3b6a2d96
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#FF0000'>
<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 formatToggler = popupDocument.querySelector('format-toggler');
formatToggler.click();
testRunner.notifyDone();
}
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-hue-slider-right-edge-zero-hue.html 0 → 100644
View file @ 3b6a2d96
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#FF0000'>
<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 formatToggler = popupDocument.querySelector('format-toggler');
formatToggler.click();
const hueSlider = popupDocument.querySelector('hue-slider');
const hueSliderRect = hueSlider.getBoundingClientRect();
eventSender.mouseMoveTo(hueSliderRect.left, hueSliderRect.top);
eventSender.mouseDown();
eventSender.mouseMoveTo(hueSliderRect.right - 1, hueSliderRect.top);
eventSender.mouseUp();
testRunner.notifyDone();
testRunner.notifyDone();
}
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-imperfect-match.html 0 → 100644
View file @ 3b6a2d96
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#EA5FB0'>
<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 formatToggler = popupDocument.querySelector('format-toggler');
formatToggler.click();
const hValueContainer = popupDocument.getElementById('hValueContainer');
const hValueContainerRect = hValueContainer.getBoundingClientRect();
eventSender.mouseMoveTo(hValueContainerRect.right - 1, hValueContainerRect.bottom - 1);
eventSender.mouseDown();
eventSender.mouseUp();
eventSender.keyDown('Backspace');
eventSender.keyDown('1');
testRunner.notifyDone();
}
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-appearance-manual-color-change.html 0 → 100644
View file @ 3b6a2d96
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#EA5FB0'>
<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 formatToggler = popupDocument.querySelector('format-toggler');
formatToggler.click();
const hValueContainer = popupDocument.getElementById('hValueContainer');
const hValueContainerRect = hValueContainer.getBoundingClientRect();
eventSender.mouseMoveTo(hValueContainerRect.right - 1, hValueContainerRect.top);
eventSender.mouseDown();
eventSender.mouseUp();
eventSender.keyDown('Backspace');
eventSender.keyDown('Backspace');
eventSender.keyDown('Backspace');
eventSender.keyDown('2');
eventSender.keyDown('7');
eventSender.keyDown('6');
testRunner.notifyDone();
}
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-color-class.html
View file @ 3b6a2d96
......@@ -29,6 +29,7 @@ testHSLValueGetters();
testAsHex();
testAsRGB();
testAsHSL();
testDistance();
function testEquals() {
test(() => {
......@@ -479,6 +480,29 @@ function testAsHSL() {
assert_equals('hsl(307,64%,54%)', new Color(ColorFormat.HSL, 307, 64, 54).asHSL());
}, 'new Color(ColorFormat.HSL, 307, 64, 54).asHSL()');
}
function testDistance() {
test(() => {
assert_equals(Color.distance([255, 255, 255], [255, 255, 255]), 0);
}, 'Color.distance([255,255,255], [255,255,255])');
test(() => {
assert_equals(Color.distance([120, 100, 50], [120, 100, 50]), 0);
}, 'Color.distance([120, 100, 50], [120, 100, 50])');
test(() => {
assert_equals(Color.distance([120, 100, 50], [0, 100, 50]), 120);
}, 'Color.distance([120, 100, 50], [0, 100, 50])');
test(() => {
assert_equals(Math.round(Color.distance([255, 255, 255], [0, 0, 0])), 442);
}, 'Color.distance([255,255,255], [0, 0, 0])');
test(() => {
assert_equals(Math.round(Color.distance([235, 77, 65], [234, 84, 59])), 9);
}, 'Color.distance([235, 77, 65], [234, 84, 59])');
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment