Skip to content

GitLab

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

Update the popup UI for input type="date" 

This CL includes the following changes:
- calendar_picker_refresh.css was added as a way to extend the current
style used for date popup
- calendarPicker.js was changed:
    - to support different sizes for cells
    - to provide different icons for forward, back month buttons
    - todayButton was moved to a different position
- locale_win | icu | mac to change the label used for weekdays to the
shortest one provided by each platform

Added tests to validate the new UI for input type="date". Although the
current change affects other types (datetime-local, week, month) this change
is the first of a series of changes which will update the popup UI for all
these types and tests will be added for each type.

Bug: 988155
Change-Id: Ibfbddd9f523f4adad79b6af2520989c3980bc18c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1721842
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarKentaro Hara <haraken@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#682420}
parent 76bc353f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 52 deletions
content/child/blink_platform_impl.cc
View file @ de76679b
......@@ -488,6 +488,8 @@ const DataResource kDataResources[] = {
{"calendarPicker.js", IDR_CALENDAR_PICKER_JS, ui::SCALE_FACTOR_NONE, true},
{"calendarPicker.css", IDR_CALENDAR_PICKER_CSS, ui::SCALE_FACTOR_NONE,
true},
{"calendar_picker_refresh.css", IDR_CALENDAR_PICKER_REFRESH_CSS,
ui::SCALE_FACTOR_NONE, true},
{"listPicker.js", IDR_LIST_PICKER_JS, ui::SCALE_FACTOR_NONE, true},
{"listPicker.css", IDR_LIST_PICKER_CSS, ui::SCALE_FACTOR_NONE, true},
{"pickerButton.css", IDR_PICKER_BUTTON_CSS, ui::SCALE_FACTOR_NONE, true},
......
third_party/blink/public/blink_resources.grd
View file @ de76679b
......@@ -48,6 +48,7 @@
<include name="IDR_PICKER_COMMON_JS" file="../renderer/core/html/forms/resources/pickerCommon.js" type="BINDATA" compress="gzip"/>
<include name="IDR_PICKER_COMMON_CSS" file="../renderer/core/html/forms/resources/pickerCommon.css" type="BINDATA" compress="gzip"/>
<include name="IDR_CALENDAR_PICKER_CSS" file="../renderer/core/html/forms/resources/calendarPicker.css" type="BINDATA" compress="gzip"/>
<include name="IDR_CALENDAR_PICKER_REFRESH_CSS" file="../renderer/core/html/forms/resources/calendar_picker_refresh.css" type="BINDATA" compress="gzip"/>
<include name="IDR_CALENDAR_PICKER_JS" file="../renderer/core/html/forms/resources/calendarPicker.js" type="BINDATA" compress="gzip"/>
<include name="IDR_PICKER_BUTTON_CSS" file="../renderer/core/html/forms/resources/pickerButton.css" type="BINDATA" compress="gzip"/>
<include name="IDR_SUGGESTION_PICKER_CSS" file="../renderer/core/html/forms/resources/suggestionPicker.css" type="BINDATA" compress="gzip"/>
......
third_party/blink/renderer/core/html/forms/date_time_chooser_impl.cc
View file @ de76679b
......@@ -121,9 +121,15 @@ void DateTimeChooserImpl::WriteDocument(SharedBuffer* data) {
AddString("<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", data);
data->Append(Platform::Current()->GetDataResource("pickerCommon.css"));
data->Append(Platform::Current()->GetDataResource("pickerButton.css"));
if (!RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
data->Append(Platform::Current()->GetDataResource("pickerButton.css"));
}
data->Append(Platform::Current()->GetDataResource("suggestionPicker.css"));
data->Append(Platform::Current()->GetDataResource("calendarPicker.css"));
if (RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
data->Append(
Platform::Current()->GetDataResource("calendar_picker_refresh.css"));
}
AddString(
"</style></head><body><div id=main>Loading...</div><script>\n"
"window.dialogArguments = {\n",
......@@ -169,6 +175,8 @@ void DateTimeChooserImpl::WriteDocument(SharedBuffer* data) {
AddProperty("dayLabels", locale_->WeekDayShortLabels(), data);
AddProperty("isLocaleRTL", locale_->IsRTL(), data);
AddProperty("isRTL", parameters_->is_anchor_element_rtl, data);
AddProperty("isFormControlsRefreshEnabled",
RuntimeEnabledFeatures::FormControlsRefreshEnabled(), data);
AddProperty("mode", parameters_->type.GetString(), data);
if (parameters_->suggestions.size()) {
Vector<String> suggestion_values;
......
third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css 0 → 100644
View file @ de76679b
/* Copyright (C) 2019 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
body {
font: 12px "Segoe UI", system-ui, Roboto, Ubuntu, sans-serif;
}
.calendar-picker {
background-color: #ffffff;
border-radius: 2px;
}
.calendar-table-view {
border: 0;
}
.calendar-table-header-view {
background-color: #ffffff;
border: 0;
height: 29px;
}
.week-day-label {
line-height: 28px;
}
.calendar-navigation-button {
-webkit-align-self: center;
background-color: #ffffff;
border: 0;
color: #101010;
padding: 0;
text-align: center;
width: 28px;
}
.calendar-navigation-button svg {
padding-top: 4px;
}
.calendar-navigation-button:hover {
background-color: #F3F3F3;
}
.calendar-navigation-button:disabled {
color: #C5C5C5;
}
.calendar-title {
-webkit-align-self: flex-start;
flex: 1;
text-align: left;
}
.month-popup-button {
border-width: 0px !important;
font-weight: bold;
padding: 0;
}
.month-popup-button .disclosure-triangle {
margin: 0;
margin-inline-start: 4px;
}
.day-cell {
background-color: #ffffff;
border: 0;
border-radius: 2px;
color: #767676;
padding: 1px;
text-align: center;
}
.day-cell.current-month {
color: #101010;
}
.week-number-cell.highlighted,
.day-cell.highlighted {
background-color: #F3F3F3;
}
.week-number-cell.selected,
.day-cell.selected {
background-color: #D9EBF9;
font-weight: bold;
}
.week-number-cell.disabled,
.day-cell.disabled {
background-color: #ffffff;
color: #C5C5C5;
}
.day-cell.highlighted.today,
.day-cell.today {
background-color: #0078D4;
border: 0;
color: #FFFFFF;
font-weight: bold;
}
.today-button-refresh {
border: 0;
bottom: 12px;
color: #0078D4;
font-size: 12px;
height: 20px;
padding: 4px;
position: absolute;
right: 20px;
width: auto;
}
third_party/blink/renderer/platform/text/locale_icu.cc
View file @ de76679b
......@@ -38,6 +38,7 @@
#include "base/memory/ptr_util.h"
#include "base/stl_util.h"
#include "third_party/blink/renderer/platform/runtime_enabled_features.h"
#include "third_party/blink/renderer/platform/wtf/date_math.h"
#include "third_party/blink/renderer/platform/wtf/text/string_buffer.h"
#include "third_party/blink/renderer/platform/wtf/text/string_builder.h"
......@@ -248,8 +249,13 @@ void LocaleICU::InitializeCalendar() {
UCAL_FIRST_DAY_OF_WEEK) -
UCAL_SUNDAY;
week_day_short_labels_ = CreateLabelVector(
short_date_format_, UDAT_SHORT_WEEKDAYS, UCAL_SUNDAY, 7);
if (RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
week_day_short_labels_ = CreateLabelVector(
short_date_format_, UDAT_NARROW_WEEKDAYS, UCAL_SUNDAY, 7);
} else {
week_day_short_labels_ = CreateLabelVector(
short_date_format_, UDAT_SHORT_WEEKDAYS, UCAL_SUNDAY, 7);
}
if (!week_day_short_labels_)
week_day_short_labels_ = CreateFallbackWeekDayShortLabels();
}
......
third_party/blink/renderer/platform/text/locale_mac.mm
View file @ de76679b
......@@ -37,6 +37,7 @@
#include "base/memory/ptr_util.h"
#include "base/stl_util.h"
#include "third_party/blink/renderer/platform/language.h"
#include "third_party/blink/renderer/platform/runtime_enabled_features.h"
#include "third_party/blink/renderer/platform/web_test_support.h"
#include "third_party/blink/renderer/platform/wtf/date_math.h"
#include "third_party/blink/renderer/platform/wtf/text/string_builder.h"
......@@ -135,7 +136,9 @@ const Vector<String>& LocaleMac::WeekDayShortLabels() {
if (!week_day_short_labels_.IsEmpty())
return week_day_short_labels_;
week_day_short_labels_.ReserveCapacity(7);
NSArray* array = [ShortDateFormatter() shortWeekdaySymbols];
NSArray* array = RuntimeEnabledFeatures::FormControlsRefreshEnabled()
? [ShortDateFormatter() veryShortWeekdaySymbols]
: [ShortDateFormatter() shortWeekdaySymbols];
if ([array count] == 7) {
for (unsigned i = 0; i < 7; ++i)
week_day_short_labels_.push_back(String([array objectAtIndex:i]));
......
third_party/blink/renderer/platform/text/locale_win.cc
View file @ de76679b
......@@ -36,6 +36,7 @@
#include "base/memory/ptr_util.h"
#include "base/stl_util.h"
#include "third_party/blink/renderer/platform/language.h"
#include "third_party/blink/renderer/platform/runtime_enabled_features.h"
#include "third_party/blink/renderer/platform/text/date_components.h"
#include "third_party/blink/renderer/platform/text/date_time_format.h"
#include "third_party/blink/renderer/platform/web_test_support.h"
......@@ -295,9 +296,19 @@ void LocaleWin::EnsureWeekDayShortLabels() {
LOCALE_SABBREVDAYNAME2, LOCALE_SABBREVDAYNAME3,
LOCALE_SABBREVDAYNAME4, LOCALE_SABBREVDAYNAME5,
LOCALE_SABBREVDAYNAME6};
const LCTYPE kTypesRefresh[7] = {
LOCALE_SSHORTESTDAYNAME7, // Sunday
LOCALE_SSHORTESTDAYNAME1, // Monday
LOCALE_SSHORTESTDAYNAME2, LOCALE_SSHORTESTDAYNAME3,
LOCALE_SSHORTESTDAYNAME4, LOCALE_SSHORTESTDAYNAME5,
LOCALE_SSHORTESTDAYNAME6};
week_day_short_labels_.ReserveCapacity(base::size(kTypes));
for (unsigned i = 0; i < base::size(kTypes); ++i) {
week_day_short_labels_.push_back(GetLocaleInfoString(kTypes[i]));
if (RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
week_day_short_labels_.push_back(GetLocaleInfoString(kTypesRefresh[i]));
} else {
week_day_short_labels_.push_back(GetLocaleInfoString(kTypes[i]));
}
if (week_day_short_labels_.back().IsEmpty()) {
week_day_short_labels_.Shrink(0);
week_day_short_labels_.ReserveCapacity(base::size(WTF::kWeekdayName));
......
third_party/blink/web_tests/fast/forms/calendar-picker/resources/calendar-picker-common.js
View file @ de76679b
......@@ -69,8 +69,8 @@ function hoverOverDayCellAt(column, row) {
var y = offset[1];
if (popupWindow.global.picker.calendarTableView.hasWeekNumberColumn)
x += popupWindow.WeekNumberCell.Width;
x += (column + 0.5) * popupWindow.DayCell.Width;
y += (row + 0.5) * popupWindow.DayCell.Height + popupWindow.CalendarTableHeaderView.Height;
x += (column + 0.5) * popupWindow.DayCell.GetWidth();
y += (row + 0.5) * popupWindow.DayCell.GetHeight() + popupWindow.CalendarTableHeaderView.GetHeight();
eventSender.mouseMoveTo(x, y);
};
......
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-coarse.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<input type=date id=date value="10000-12-31">
<script>
internals.settings.setAvailablePointerTypes('fine,coarse');
internals.settings.setPrimaryPointerType('fine')
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-rtl.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<html dir="rtl">
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
if (window.internals)
internals.settings.setLangAttributeAwareFormControlUIEnabled(true);
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<input type=date id=date value="1800-05-12" lang="ar-AE">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-step.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<!-- Check if step attribute is reflected in the appearance of the calendar picker. -->
<input type="date" id="date" value="2010-12-31" step="3">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-zoom150.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<body style="zoom: 1.5">
<p>Calendar picker should respect zoom level.</p>
<input type=date id=date value="2013-01-10">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<input type=date id=date value="10000-12-31">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-disabled-values.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<input type=date id=date min="2019-06-02" value="2019-06-11" max="2019-06-23">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
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