Skip to content

GitLab

T
tangled
Commit f0993fec authored by Ionel Popescu's avatar Ionel Popescu Committed by Commit Bot
Browse files
Options

Update design for datalist date related types. 

This CL updates the datalist UI for date related types.

Pixel tests are added to validate the new UI.

Bug: 1011681
Change-Id: I4a6fd18f563fa1d8cf9247bb4c024c1cebe45440
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1844071
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704109}
parent d66e56e0
Hide whitespace changes
Inline Side-by-side
Showing with 232 additions and 6 deletions
third_party/blink/renderer/core/html/forms/resources/calendarPicker.js
View file @ f0993fec
......@@ -868,6 +868,9 @@ function closePicker() {
function openSuggestionPicker() {
closePicker();
if (global.params.isFormControlsRefreshEnabled) {
document.body.classList.add('controls-refresh');
}
global.picker = new SuggestionPicker($('main'), global.params);
};
......
third_party/blink/renderer/core/html/forms/resources/suggestionPicker.css
View file @ f0993fec
......@@ -54,3 +54,27 @@
border-top: 1px solid #dcdcdc;
height: 0;
}
.controls-refresh .suggestion-list {
border-color: transparent;
padding: 4px;
}
.controls-refresh .suggestion-list-entry {
border-radius: 2px;
font-size: 14px;
height: 32px;
line-height: 32px;
}
.controls-refresh .suggestion-list-entry:focus {
background-color: #E5E5E5;
}
.controls-refresh .suggestion-list-entry .title {
color: #101010;
}
.controls-refresh .suggestion-list-entry .label {
color: rgba(16, 16, 16, 0.6) !important;
}
third_party/blink/renderer/core/html/forms/resources/suggestionPicker.js
View file @ f0993fec
......@@ -72,6 +72,15 @@ SuggestionPicker.validateConfig = function(config) {
return null;
};
Object.defineProperty(SuggestionPicker, 'Padding', {
get: function() {
return Number(
window.getComputedStyle(document.querySelector('.suggestion-list'))
.getPropertyValue('padding')
.replace('px', ''));
}
});
SuggestionPicker.prototype._setColors = function() {
var text = '.' + SuggestionPicker.ListEntryClass + ':focus {\
background-color: ' +
......@@ -152,11 +161,13 @@ SuggestionPicker.prototype._measureMaxContentWidth = function() {
SuggestionPicker.prototype._fixWindowSize = function() {
var ListBorder = 2;
const ListPadding = 2 * SuggestionPicker.Padding;
var zoom = this._config.zoomFactor;
var desiredWindowWidth = (this._measureMaxContentWidth() + ListBorder) * zoom;
var desiredWindowWidth =
(this._measureMaxContentWidth() + ListBorder + ListPadding) * zoom;
if (typeof this._config.inputWidth === 'number')
desiredWindowWidth = Math.max(this._config.inputWidth, desiredWindowWidth);
var totalHeight = ListBorder;
var totalHeight = ListBorder + ListPadding;
var maxHeight = 0;
var entryCount = 0;
for (var i = 0; i < this._containerElement.childNodes.length; ++i) {
......@@ -170,7 +181,8 @@ SuggestionPicker.prototype._fixWindowSize = function() {
}
var desiredWindowHeight = totalHeight * zoom;
if (maxHeight !== 0 && totalHeight > maxHeight * zoom) {
this._containerElement.style.maxHeight = (maxHeight - ListBorder) + 'px';
this._containerElement.style.maxHeight =
(maxHeight - ListBorder - ListPadding) + 'px';
desiredWindowWidth += getScrollbarWidth() * zoom;
desiredWindowHeight = maxHeight * zoom;
this._containerElement.style.overflowY = 'scroll';
......@@ -178,7 +190,7 @@ SuggestionPicker.prototype._fixWindowSize = function() {
var windowRect = adjustWindowRect(
desiredWindowWidth, desiredWindowHeight, desiredWindowWidth, 0);
this._containerElement.style.height =
(windowRect.height / zoom - ListBorder) + 'px';
(windowRect.height / zoom - ListBorder - ListPadding) + 'px';
setWindowRect(windowRect);
};
......@@ -197,8 +209,10 @@ SuggestionPicker.prototype._layout = function() {
}
if (this._config.showOtherDateEntry) {
// Add separator
var separator = createElement('div', 'separator');
this._containerElement.appendChild(separator);
if (!global.params.isFormControlsRefreshEnabled) {
var separator = createElement('div', 'separator');
this._containerElement.appendChild(separator);
}
// Add "Other..." entry
var otherEntry = this._createActionEntryElement(
......
third_party/blink/web_tests/fast/forms/controls-new-ui/suggestion-picker/date-suggestion-picker-appearance.html 0 → 100644
View file @ f0993fec
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
</head>
<body style="background-color: #eeffff;">
<input type=date id=date value="10000-12-31" list="suggestions" style="width: 200px;">
<datalist id=suggestions>
<option>2012-01-00</option> <!--invalid-->
<option>foo</option> <!--invalid-->
<option label="Today">2012-01-01</option>
<option label="Tomorrow">2012-01-02</option>
<option>2012-01-03</option>
<option>2012-01-04</option>
<option>2012-01-05</option>
<option>2012-01-06</option>
<option>2012-01-07</option>
<option>2012-01-08</option>
<option>2012-01-09</option>
<option>2012-01-10</option>
<option>2012-01-11</option>
<option>2012-01-12</option>
<option>2012-01-13</option>
<option>2012-01-14</option>
<option>2012-01-15</option>
<option>2012-01-16</option>
</datalist>
<script>
openPicker(document.getElementById('date'), finishTest);
function finishTest() {
popupWindow.focus();
eventSender.keyDown('ArrowDown');
testRunner.notifyDone();
}
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/suggestion-picker/datetimelocal-suggestion-picker-appearance.html 0 → 100644
View file @ f0993fec
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();</script>
<script src="../../../forms/resources/picker-common.js"></script>
</head>
<body style="background-color: #eeffff;">
<input type=datetime-local id=datetime-local value="10000-12-31T23:59" list="suggestions" style="width: 300px;" step="0.001">
<datalist id=suggestions>
<option>2012-11-31T00:00</option> <!--invalid-->
<option>2012-11-31</option> <!--invalid-->
<option>foo</option> <!--invalid-->
<option label="Today">2012-11-22T12:00</option>
<option label="Tomorrow">2012-11-23T12:00</option>
<option>2012-11-22T01:23</option>
<option>2012-11-22T01:23:45</option>
<option>2012-11-22T01:23:45.678</option>
<option>2012-11-22T01:06</option>
<option>2012-11-22T01:07</option>
<option>2012-11-22T01:08</option>
<option>2012-11-22T01:09</option>
<option>2012-11-22T01:10</option>
<option>2012-11-22T01:11</option>
</datalist>
<script>
openPicker(document.getElementById('datetime-local'), finishTest);
function finishTest() {
popupWindow.focus();
eventSender.keyDown('ArrowDown');
testRunner.notifyDone();
}
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/suggestion-picker/month-suggestion-picker-appearance.html 0 → 100644
View file @ f0993fec
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
</head>
<body style="background-color: #eeffff;">
<input type=month id=month value="10000-12" list="suggestions" style="width: 200px;">
<datalist id=suggestions>
<option>2012-00</option> <!--invalid-->
<option>2012-01-01</option> <!--invalid-->
<option>foo</option> <!--invalid-->
<option label="This Month">2012-01</option>
<option>2012-02</option>
<option>2012-03</option>
<option>2012-04</option>
<option>2012-05</option>
<option>2012-06</option>
<option>2012-07</option>
</datalist>
<script>
openPicker(document.getElementById('month'), finishTest);
function finishTest() {
popupWindow.focus();
eventSender.keyDown('ArrowDown');
testRunner.notifyDone();
}
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/suggestion-picker/time-suggestion-picker-appearance.html 0 → 100644
View file @ f0993fec
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
</head>
<body style="background-color: #eeffff;">
<input type=time id=time value="12:31" list="suggestions" style="width: 200px;" step="0.001">
<datalist id=suggestions>
<option>111:23</option> <!--invalid-->
<option>13:60</option> <!--invalid-->
<option>foo</option> <!--invalid-->
<option label="Now">01:01</option>
<option>14:23</option>
<option>12:34:56</option>
<option>01:23:45.678</option>
<option>01:05</option>
<option>01:06</option>
<option>01:07</option>
<option>01:08</option>
<option>01:09</option>
</datalist>
<script>
openPicker(document.getElementById('time'), finishTest);
function finishTest() {
popupWindow.focus();
eventSender.keyDown('ArrowDown');
testRunner.notifyDone()
}
</script>
</body>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/suggestion-picker/week-suggestion-picker-appearance.html 0 → 100644
View file @ f0993fec
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
</head>
<body style="background-color: #eeffff;">
<input type=week id=week value="10000-W12" list="suggestions" style="width: 200px;">
<datalist id=suggestions>
<option>2012-W00</option> <!--invalid-->
<option>2012-01-01</option> <!--invalid-->
<option>foo</option> <!--invalid-->
<option label="This Week">2012-W01</option>
<option>2012-W02</option>
<option>2012-W03</option>
<option>2012-W04</option>
<option>2012-W05</option>
<option>2012-W06</option>
<option>2012-W07</option>
<option>2012-W08</option>
<option>2012-W09</option>
</datalist>
<script>
openPicker(document.getElementById('week'), finishTest);
function finishTest() {
popupWindow.focus();
eventSender.keyDown('ArrowDown');
testRunner.notifyDone();
}
</script>
</body>
</html>
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