Add clear button to date/time input types
https://bugs.webkit.org/show_bug.cgi?id=111319

Reviewed by Kent Tamura.

Source/WebCore:

We want to remove the clear button from the calendar picker (Bug 109439)
so we are adding the clear button to the right side of the input element.

Tests: fast/forms/date-multiple-fields/date-multiple-fields-clearbutton-change-and-input-events.html
       fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-clearbutton-change-and-input-events.html
       fast/forms/month-multiple-fields/month-multiple-fields-clearbutton-change-and-input-events.html
       fast/forms/time-multiple-fields/time-multiple-fields-clearbutton-change-and-input-events.html
       fast/forms/week-multiple-fields/week-multiple-fields-clearbutton-change-and-input-events.html

* CMakeLists.txt: Added ClearButtonElement.cpp
* GNUmakefile.list.am: Ditto.
* Target.pri: Ditto.
* WebCore.gypi: Ditto.
* WebCore.vcproj/WebCore.vcproj: Ditto.
* WebCore.vcxproj/WebCore.vcxproj: Ditto.
* WebCore.vcxproj/WebCore.vcxproj.filters: Ditto.
* WebCore.xcodeproj/project.pbxproj: Ditto.
* css/html.css:
(input::-webkit-clear-button): Styles for the clear button.
* html/BaseMultipleFieldsDateAndTimeInputType.cpp:
(WebCore::BaseMultipleFieldsDateAndTimeInputType::editControlValueChanged):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::BaseMultipleFieldsDateAndTimeInputType):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::~BaseMultipleFieldsDateAndTimeInputType):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::createShadowSubtree):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::destroyShadowSubtree):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::disabledAttributeChanged):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::requiredAttributeChanged): Hide clear button if the value is required.
(WebCore):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::readonlyAttributeChanged):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::updateInnerTextValue):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::focusAndSelectClearButtonOwner): Called on mouse down on clear button.
(WebCore::BaseMultipleFieldsDateAndTimeInputType::shouldClearButtonRespondToMouseEvents):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::clearValue):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::updateClearButtonVisibility): We want to hide the clear button if the value is required or the value is empty.
* html/BaseMultipleFieldsDateAndTimeInputType.h:
(BaseMultipleFieldsDateAndTimeInputType):
* html/HTMLInputElement.cpp:
(WebCore::HTMLInputElement::updateClearButtonVisibility):
(WebCore):
(WebCore::HTMLInputElement::requiredAttributeChanged):
* html/HTMLInputElement.h:
(HTMLInputElement):
* html/InputType.cpp:
(WebCore::InputType::requiredAttributeChanged): Notifies the InputType that the required attribute has changed.
(WebCore):
(WebCore::InputType::updateClearButtonVisibility):
* html/InputType.h:
(InputType):
* html/shadow/ClearButtonElement.cpp: Added.
(WebCore):
(WebCore::ClearButtonElement::ClearButtonElement):
(WebCore::ClearButtonElement::create):
(WebCore::ClearButtonElement::detach):
(WebCore::ClearButtonElement::releaseCapture): Stop capturing mouse events.
(WebCore::ClearButtonElement::defaultEventHandler):
* html/shadow/ClearButtonElement.h: Added.
(WebCore):
(ClearButtonElement):
(ClearButtonOwner):
(WebCore::ClearButtonElement::ClearButtonOwner::~ClearButtonOwner):
(WebCore::ClearButtonElement::removeClearButtonOwner):
(WebCore::ClearButtonElement::isMouseFocusable):

LayoutTests:

* fast/forms/date-multiple-fields/date-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-mouse-events-expected.txt:
* fast/forms/date-multiple-fields/date-multiple-fields-mouse-events.html:
* fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-mouse-events-expected.txt:
* fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-mouse-events.html:
* fast/forms/month-multiple-fields/month-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/month-multiple-fields/month-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/month-multiple-fields/month-multiple-fields-mouse-events-expected.txt:
* fast/forms/month-multiple-fields/month-multiple-fields-mouse-events.html:
* fast/forms/resources/common-clearbutton-change-and-input-events.js: Added.
(.testInput.onchange):
(.testInput.oninput):
(testClearButtonChangeAndInputEvents):
* fast/forms/time-multiple-fields/time-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/time-multiple-fields/time-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/time-multiple-fields/time-multiple-fields-mouse-events-expected.txt:
* fast/forms/time-multiple-fields/time-multiple-fields-mouse-events.html:
* fast/forms/time-multiple-fields/time-multiple-fields-narrow-width-scroll.html:
* fast/forms/week-multiple-fields/week-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/week-multiple-fields/week-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/week-multiple-fields/week-multiple-fields-mouse-events-expected.txt:
* fast/forms/week-multiple-fields/week-multiple-fields-mouse-events.html:
* platform/chromium/TestExpectations:


git-svn-id: svn://svn.chromium.org/blink/trunk@145055 bbb929c8-8fbe-4397-9dbb-9b2b20218538
diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css
index 9ccb945..85f1a11 100644
--- a/Source/WebCore/css/html.css
+++ b/Source/WebCore/css/html.css
@@ -450,6 +450,14 @@
     direction: ltr;
 }
 
+input::-webkit-clear-button {
+    -webkit-appearance: searchfield-cancel-button;
+    display: inline-block;
+    -webkit-box-flex: 0;
+    -webkit-user-modify: read-only !important;
+    margin-left: 2px;
+}
+
 input[type="search"]::-webkit-search-cancel-button {
     -webkit-appearance: searchfield-cancel-button;
     display: block;