Skip to content

GitLab

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

Implement refreshed look for color suggestion picker 

This CL implements the refreshed look for the color suggestion picker.
The existing color suggestion picker tests have been copied into
appearance tests, so that the appearance with the controls refresh flag
on and off can be validated.

Bug: 1009125
Change-Id: I3b481e51699343d36d69804a9a934bd0e6946160
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1829247
Commit-Queue: Sanket Joshi <sajos@microsoft.com>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702237}
parent 1153d207
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 459 additions and 16 deletions
third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.css
View file @ f7be2de2
...@@ -24,6 +24,11 @@ ...@@ -24,6 +24,11 @@
*/ */
body { body {
--color-swatch-border-width: 1px;
--color-swatch-margin: 1px;
--color-swatch-height: 20px;
--color-swatch-padding: 0;
--color-swatch-width: 20px;
-webkit-user-select: none; -webkit-user-select: none;
background-color: white; background-color: white;
font: -webkit-small-control; font: -webkit-small-control;
...@@ -31,6 +36,13 @@ body { ...@@ -31,6 +36,13 @@ body {
overflow: hidden; overflow: hidden;
} }
body.controls-refresh {
--color-swatch-margin: 3px;
--color-swatch-height: 18px;
--color-swatch-width: 18px;
--scrollbar-width: 4px;
}
.color-suggestion-picker-main { .color-suggestion-picker-main {
background-color: white; background-color: white;
border: solid 1px #8899aa; border: solid 1px #8899aa;
...@@ -40,19 +52,30 @@ body { ...@@ -40,19 +52,30 @@ body {
float: left; float: left;
} }
.controls-refresh .color-suggestion-picker-main {
border: 0;
box-shadow: none;
padding: 8px 8px 4px 8px;
}
.color-swatch { .color-swatch {
float: left; float: left;
width: 20px; width: var(--color-swatch-width);
height: 20px; height: var(--color-swatch-height);
margin: 1px; margin: var(--color-swatch-margin);
padding: 0; padding: var(--color-swatch-padding);
border: 1px solid #e0e0e0; border: var(--color-swatch-border-width) solid #e0e0e0;
border-radius: 0; border-radius: 0;
box-sizing: content-box; box-sizing: content-box;
} }
.controls-refresh .color-swatch {
border: var(--color-swatch-border-width) solid rgba(0, 0, 0, 0.19);
border-radius: 2px;
}
.color-swatch:focus { .color-swatch:focus {
border: 1px solid #000000; border: var(--color-swatch-border-width) solid #000000;
outline: none; outline: none;
} }
...@@ -65,7 +88,39 @@ body { ...@@ -65,7 +88,39 @@ body {
align-items: center; align-items: center;
} }
.controls-refresh .color-swatch-container {
margin: 4px;
}
.controls-refresh .color-swatch-container::-webkit-scrollbar {
width: var(--scrollbar-width);
}
.controls-refresh .color-swatch-container::-webkit-scrollbar-thumb {
background-color: #cecece;
border-radius: 2px;
height: 47px;
margin: 20px;
width: 4px;
}
.other-color { .other-color {
width: 100%; width: 100%;
margin: 4px 0 0 0; margin: 4px 0 0 0;
} }
.controls-refresh .other-color {
background-color: #ffffff;
border-color: transparent;
border-radius: 2px;
color: #000000;
font-family: sans-serif;
font-size: 12px;
line-height: 16px;
margin: 0;
text-align: left;
}
.controls-refresh .other-color:hover {
background-color: #f3f3f3;
}
\ No newline at end of file
third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.js
View file @ f7be2de2
...@@ -63,10 +63,85 @@ function ColorSuggestionPicker(element, config) { ...@@ -63,10 +63,85 @@ function ColorSuggestionPicker(element, config) {
} }
ColorSuggestionPicker.prototype = Object.create(Picker.prototype); ColorSuggestionPicker.prototype = Object.create(Picker.prototype);
var SwatchBorderBoxWidth = 24; // keep in sync with CSS Object.defineProperty(ColorSuggestionPicker, '_ColorSwatchWidth', {
var SwatchBorderBoxHeight = 24; // keep in sync with CSS get: function() {
var SwatchesPerRow = 5; return Number(window.getComputedStyle(document.body)
var SwatchesMaxRow = 4; .getPropertyValue('--color-swatch-width')
.replace('px', ''));
}
});
Object.defineProperty(ColorSuggestionPicker, '_ColorSwatchHeight', {
get: function() {
return Number(window.getComputedStyle(document.body)
.getPropertyValue('--color-swatch-height')
.replace('px', ''));
}
});
Object.defineProperty(ColorSuggestionPicker, '_ColorSwatchPadding', {
get: function() {
return Number(window.getComputedStyle(document.body)
.getPropertyValue('--color-swatch-padding')
.replace('px', ''));
}
});
Object.defineProperty(ColorSuggestionPicker, '_ColorSwatchBorderWidth', {
get: function() {
return Number(window.getComputedStyle(document.body)
.getPropertyValue('--color-swatch-border-width')
.replace('px', ''));
}
});
Object.defineProperty(ColorSuggestionPicker, '_ColorSwatchMargin', {
get: function() {
return Number(window.getComputedStyle(document.body)
.getPropertyValue('--color-swatch-margin')
.replace('px', ''));
}
});
Object.defineProperty(ColorSuggestionPicker, 'SwatchBorderBoxWidth', {
get: function() {
return ColorSuggestionPicker._ColorSwatchWidth +
(ColorSuggestionPicker._ColorSwatchPadding * 2) +
(ColorSuggestionPicker._ColorSwatchBorderWidth * 2) +
(ColorSuggestionPicker._ColorSwatchMargin * 2);
}
});
Object.defineProperty(ColorSuggestionPicker, 'SwatchBorderBoxHeight', {
get: function() {
return ColorSuggestionPicker._ColorSwatchHeight +
(ColorSuggestionPicker._ColorSwatchPadding * 2) +
(ColorSuggestionPicker._ColorSwatchBorderWidth * 2) +
(ColorSuggestionPicker._ColorSwatchMargin * 2);
}
});
Object.defineProperty(ColorSuggestionPicker, 'SwatchesPerRow', {
get: function() {
return 5;
}
});
Object.defineProperty(ColorSuggestionPicker, 'SwatchesMaxRow', {
get: function() {
return global.params.isFormControlsRefreshEnabled ? 3 : 4;
}
});
Object.defineProperty(ColorSuggestionPicker, 'ScrollbarWidth', {
get: function() {
return !global.params.isFormControlsRefreshEnabled ?
getScrollbarWidth() :
Number(window.getComputedStyle(document.body)
.getPropertyValue('--scrollbar-width')
.replace('px', ''));
}
});
ColorSuggestionPicker.prototype._layout = function() { ColorSuggestionPicker.prototype._layout = function() {
var container = createElement('div', 'color-swatch-container'); var container = createElement('div', 'color-swatch-container');
...@@ -80,11 +155,15 @@ ColorSuggestionPicker.prototype._layout = function() { ...@@ -80,11 +155,15 @@ ColorSuggestionPicker.prototype._layout = function() {
swatch.style.backgroundColor = this._config.values[i]; swatch.style.backgroundColor = this._config.values[i];
container.appendChild(swatch); container.appendChild(swatch);
} }
var containerWidth = SwatchBorderBoxWidth * SwatchesPerRow; var containerWidth = ColorSuggestionPicker.SwatchBorderBoxWidth *
if (this._config.values.length > SwatchesPerRow * SwatchesMaxRow) ColorSuggestionPicker.SwatchesPerRow;
containerWidth += getScrollbarWidth(); if (this._config.values.length > (ColorSuggestionPicker.SwatchesPerRow *
ColorSuggestionPicker.SwatchesMaxRow))
containerWidth += ColorSuggestionPicker.ScrollbarWidth;
container.style.width = containerWidth + 'px'; container.style.width = containerWidth + 'px';
container.style.maxHeight = (SwatchBorderBoxHeight * SwatchesMaxRow) + 'px'; container.style.maxHeight = (ColorSuggestionPicker.SwatchBorderBoxHeight *
ColorSuggestionPicker.SwatchesMaxRow) +
'px';
this._element.appendChild(container); this._element.appendChild(container);
var otherButton = var otherButton =
createElement('button', 'other-color', this._config.otherColorLabel); createElement('button', 'other-color', this._config.otherColorLabel);
...@@ -153,10 +232,10 @@ ColorSuggestionPicker.prototype._handleKeyDown = function(event) { ...@@ -153,10 +232,10 @@ ColorSuggestionPicker.prototype._handleKeyDown = function(event) {
index++; index++;
break; break;
case 'ArrowUp': case 'ArrowUp':
index -= SwatchesPerRow; index -= ColorSuggestionPicker.SwatchesPerRow;
break; break;
case 'ArrowDown': case 'ArrowDown':
index += SwatchesPerRow; index += ColorSuggestionPicker.SwatchesPerRow;
break; break;
} }
if (index > this._container.childNodes.length - 1) { if (index > this._container.childNodes.length - 1) {
......
third_party/blink/renderer/core/html/forms/resources/color_picker.css
View file @ f7be2de2
...@@ -7,6 +7,11 @@ body { ...@@ -7,6 +7,11 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
.color-picker-main {
border: 0;
padding: 0;
}
color-picker { color-picker {
background: #FFFFFF; background: #FFFFFF;
display: flex; display: flex;
......
third_party/blink/renderer/core/html/forms/resources/color_picker_common.js
View file @ f7be2de2
...@@ -39,6 +39,9 @@ function initialize(args) { ...@@ -39,6 +39,9 @@ function initialize(args) {
main.innerHTML = ''; main.innerHTML = '';
var errorString; var errorString;
if (global.params.shouldShowColorSuggestionPicker) { if (global.params.shouldShowColorSuggestionPicker) {
if (global.params.isFormControlsRefreshEnabled) {
document.body.classList.add('controls-refresh');
}
main.classList.add('color-suggestion-picker-main'); main.classList.add('color-suggestion-picker-main');
errorString = validateColorSuggestionPickerArguments(args); errorString = validateColorSuggestionPickerArguments(args);
} else { } else {
......
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-suggestion-picker-appearance-empty-list.html 0 → 100644
View file @ f7be2de2
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' list>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-suggestion-picker-appearance-one-row.html 0 → 100644
View file @ f7be2de2
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#ff0000' list='single'>
<datalist id='single'>
<option>#000000</option>
</datalist>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-suggestion-picker-appearance-two-rows.html 0 → 100644
View file @ f7be2de2
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#ff0000' list='rainbow'>
<datalist id='rainbow'>
<option>#ff0000</option>
<option>#ffa500</option>
<option>#ffff00</option>
<option>#00ff00</option>
<option>#0000ff</option>
<option>#4b0082</option>
<option>#ee82ee</option>
</datalist>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-suggestion-picker-appearance-value-attribute.html 0 → 100644
View file @ f7be2de2
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#ff0000' list='colors'>
<datalist id='colors'>
<option value='#ff00ff'>F</option>
<option value='#eee00e'>E</option>
<option value='#d00ddd'>D</option>
<option value='#00cccc'>C</option>
<option value='#bbbb00'>B</option>
<option value='#aa00aa'>A</option>
<option value='#009999'>9</option>
<option value='#800888'>8</option>
<option value='#777700'>7</option>
<option value='#006666'>6</option>
<option value='#550055'>5</option>
<option value='#444004'>4</option>
<option value='#333300'>3</option>
<option value='#200222'>2</option>
<option value='#111001'>1</option>
<option value='#000000'>0</option>
<option value='#F00'>f00</option> <!--invalid-->
<option value='red'>red</option> <!--invalid-->
</datalist>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-suggestion-picker-appearance-with-scrollbar.html 0 → 100644
View file @ f7be2de2
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#ff0000' list='many'>
<datalist id='many'>
<option>#000000</option>
<option>#070707</option>
<option>#0e0e0e</option>
<option>#151515</option>
<option>#1d1d1d</option>
<option>#242424</option>
<option>#2b2b2b</option>
<option>#333333</option>
<option>#3a3a3a</option>
<option>#414141</option>
<option>#484848</option>
<option>#505050</option>
<option>#575757</option>
<option>#5e5e5e</option>
<option>#666666</option>
<option>#6d6d6d</option>
<option>#747474</option>
<option>#7b7b7b</option>
<option>#838383</option>
<option>#8a8a8a</option>
<option>#919191</option>
<option>#999999</option>
<option>#a0a0a0</option>
<option>#a7a7a7</option>
<option>#aeaeae</option>
<option>#b6b6b6</option>
<option>#bdbdbd</option>
<option>#c4c4c4</option>
<option>#cccccc</option>
<option>#d3d3d3</option>
<option>#dadada</option>
<option>#e1e1e1</option>
<option>#e9e9e9</option>
<option>#f0f0f0</option>
<option>#f7f7f7</option>
<option>#ffffff</option>
</datalist>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-suggestion-picker-appearance-zoom125.html 0 → 100644
View file @ f7be2de2
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body style='zoom: 1.25;'>
<input type='color' id='color' value='#ff0000' list='gray'>
<datalist id='gray'>
<option>#ffffff</option>
<option>#eeeeee</option>
<option>#dddddd</option>
<option>#cccccc</option>
<option>#bbbbbb</option>
<option>#aaaaaa</option>
<option>#999999</option>
<option>#888888</option>
<option>#777777</option>
<option>#666666</option>
<option>#555555</option>
<option>#444444</option>
<option>#333333</option>
<option>#222222</option>
<option>#111111</option>
<option>#000000</option>
<option>#F00</option> <!--invalid-->
<option>red</option> <!--invalid-->
</datalist>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-suggestion-picker-appearance-zoom200.html 0 → 100644
View file @ f7be2de2
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body style='zoom: 2;'>
<input type='color' id='color' value='#ff0000' list='gray'>
<datalist id='gray'>
<option>#ffffff</option>
<option>#eeeeee</option>
<option>#dddddd</option>
<option>#cccccc</option>
<option>#bbbbbb</option>
<option>#aaaaaa</option>
<option>#999999</option>
<option>#888888</option>
<option>#777777</option>
<option>#666666</option>
<option>#555555</option>
<option>#444444</option>
<option>#333333</option>
<option>#222222</option>
<option>#111111</option>
<option>#000000</option>
<option>#F00</option> <!--invalid-->
<option>red</option> <!--invalid-->
</datalist>
<script>
openPicker(document.getElementById('color'), () => 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-suggestion-picker-appearance.html 0 → 100644
View file @ f7be2de2
<!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' list='gray'>
<datalist id='gray'>
<option>#ffffff</option>
<option>#eeeeee</option>
<option>#dddddd</option>
<option>#cccccc</option>
<option>#bbbbbb</option>
<option>#aaaaaa</option>
<option>#999999</option>
<option>#888888</option>
<option>#777777</option>
<option>#666666</option>
<option>#555555</option>
<option>#444444</option>
<option>#333333</option>
<option>#222222</option>
<option>#111111</option>
<option>#000000</option>
<option>#F00</option> <!--invalid-->
<option>red</option> <!--invalid-->
</datalist>
<script>
openPicker(document.getElementById('color'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-suggestion-picker-css-variable-validation.html 0 → 100644
View file @ f7be2de2
<!DOCTYPE html>
<html>
<head>
<script src='../../../../resources/testharness.js'></script>
<script src='../../../../resources/testharnessreport.js'></script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#ff0000' list='rainbow'>
<datalist id='rainbow'>
<option>#ff0000</option>
<option>#ffa500</option>
<option>#ffff00</option>
<option>#00ff00</option>
<option>#0000ff</option>
<option>#4b0082</option>
<option>#ee82ee</option>
</datalist>
<script>
'use strict';
// The color suggestion picker JS code queries the values of certain CSS variables and expects them to be expressed in 'px' units.
// This test validates that those variables are actually declared with 'px' values (or '0').
let t = async_test('Color suggestion picker: Validate that length units in CSS variables end in \'px\'.');
t.step(() => {
let colorControl = document.getElementById('color');
openPicker(colorControl, t.step_func_done(() => {
popupWindow.focus();
const popupDocument = popupWindow.document;
const popupDocumentBody = popupDocument.body;
const colorSwatchBorderWidth = popupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-border-width');
const colorSwatchMargin = popupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-margin');
const colorSwatchHeight = popupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-height');
const colorSwatchPadding = popupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-padding');
const colorSwatchWidth = popupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-width');
assert_true(colorSwatchBorderWidth.trim() === '0' ||
colorSwatchBorderWidth.endsWith('px'), 'Color swatch border width must be 0 or end in \'px\'');
assert_true(colorSwatchMargin.trim() === '0' || colorSwatchMargin.endsWith('px'), 'Color swatch margin must be 0 or end in \'px\'');
assert_true(colorSwatchHeight.trim() === '0' || colorSwatchHeight.endsWith('px'), 'Color swatch height must be 0 or end in \'px\'');
assert_true(colorSwatchPadding.trim() === '0' || colorSwatchPadding.endsWith('px'), 'Color swatch padding must be 0 or end in \'px\'');
assert_true(colorSwatchWidth.trim() === '0' || colorSwatchWidth.endsWith('px'), 'Color swatch width must be 0 or end in \'px\'');
if (internals.runtimeFlags.formControlsRefreshEnabled) {
const scrollbarWidth = popupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--scrollbar-width');
assert_true(scrollbarWidth.trim() === '0' || scrollbarWidth.endsWith('px'), 'Scrollbar width must be 0 or end in \'px\'');
}
}));
});
</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