[Datalist] Add button to TextFieldInputs with a datalist
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Jul 2018 23:12:23 +0000 (23:12 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Jul 2018 23:12:23 +0000 (23:12 +0000)
commita857a7ce0161edab1a0cf3d19d299c78779944d6
tree94f3eeb30338cd987af26118779f7ca164adf58f
parent4260ddcdbfc4cd6554e944b73a9942e5479c270a
[Datalist] Add button to TextFieldInputs with a datalist
https://bugs.webkit.org/show_bug.cgi?id=187741

Patch by Aditya Keerthi <akeerthi@apple.com> on 2018-07-26
Reviewed by Tim Horton.

Source/WebCore:

TextFieldInputs that have an associated datalist element should be drawn as
combo boxes. However, we cannot use NSComboBox for this control, as NSComboBox
is not height-resizable. Furthermore, the input should also be able to contain
additional elements, such as the stepper for type=number and the cancel button
for type=search. For these reasons, we draw a button at the end of the input,
mimicking appearance of a combo box.

The list-button -webkit-appearance value was added to display the new button.

Tests: fast/forms/datalist/datalist-searchinput-appearance.html
       fast/forms/datalist/datalist-textinput-appearance.html

* Resources/ListButtonArrow.png: Added.
* Resources/ListButtonArrow@2x.png: Added.
* WebCore.xcodeproj/project.pbxproj:
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
* css/CSSProperties.json:
* css/CSSValueKeywords.in:
* css/html.css:
(input::-webkit-list-button):
* html/HTMLInputElement.cpp:
(WebCore::HTMLInputElement::dataListButtonElement const):
(WebCore::HTMLInputElement::isShowingList const):
* html/HTMLInputElement.h:
* html/InputType.h:
(WebCore::InputType::dataListButtonElement const):
(WebCore::InputType::isShowingList const):
* html/TextFieldInputType.cpp:
(WebCore::TextFieldInputType::needsContainer const):
(WebCore::TextFieldInputType::createShadowSubtree):
(WebCore::TextFieldInputType::destroyShadowSubtree):
(WebCore::TextFieldInputType::listAttributeTargetChanged):
(WebCore::TextFieldInputType::dataListButtonElement const):
(WebCore::TextFieldInputType::dataListButtonElementWasClicked):
(WebCore::TextFieldInputType::didCloseSuggestions):
(WebCore::TextFieldInputType::isShowingList const):
* html/TextFieldInputType.h:
* html/shadow/DataListButtonElement.cpp: Added.
(WebCore::DataListButtonElement::create):
(WebCore::DataListButtonElement::DataListButtonElement):
(WebCore::DataListButtonElement::~DataListButtonElement):
(WebCore::DataListButtonElement::defaultEventHandler):
* html/shadow/DataListButtonElement.h: Added.
* platform/ThemeTypes.h:
* rendering/RenderTheme.cpp:
(WebCore::RenderTheme::adjustStyle):
(WebCore::RenderTheme::adjustListButtonStyle const):
* rendering/RenderTheme.h:
* rendering/RenderThemeMac.h:
* rendering/RenderThemeMac.mm:
(-[WebListButtonCell drawWithFrame:inView:]):
(WebCore::RenderThemeMac::paintListButtonForInput):
(WebCore::RenderThemeMac::adjustListButtonStyle const):
(WebCore::RenderThemeMac::paintTextField):
(WebCore::RenderThemeMac::paintSearchField):
(WebCore::RenderThemeMac::paintSearchFieldCancelButton):
(WebCore::RenderThemeMac::listButton const):

Source/WebCore/PAL:

* pal/spi/cocoa/NSColorSPI.h: Added NSColorGetUserAccentColor().

Source/WebInspectorUI:

Add keyword completion for 'list-button'.

* UserInterface/External/CodeMirror/css.js:
* UserInterface/Models/CSSKeywordCompletions.js:

LayoutTests:

Added tests to verify appearance of TextFieldInputs with a datalist.

* fast/forms/datalist/datalist-searchinput-appearance.html: Added.
* fast/forms/datalist/datalist-textinput-appearance.html: Added.
* platform/mac/fast/forms/datalist/datalist-searchinput-appearance-expected.png: Added.
* platform/mac/fast/forms/datalist/datalist-searchinput-appearance-expected.txt: Added.
* platform/mac/fast/forms/datalist/datalist-textinput-appearance-expected.png: Added.
* platform/mac/fast/forms/datalist/datalist-textinput-appearance-expected.txt: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@234281 268f45cc-cd09-0410-ab3c-d52691b4dbfc
32 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/forms/datalist/datalist-searchinput-appearance.html [new file with mode: 0644]
LayoutTests/fast/forms/datalist/datalist-textinput-appearance.html [new file with mode: 0644]
LayoutTests/platform/mac/fast/forms/datalist/datalist-searchinput-appearance-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/fast/forms/datalist/datalist-searchinput-appearance-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/fast/forms/datalist/datalist-textinput-appearance-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/fast/forms/datalist/datalist-textinput-appearance-expected.txt [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/PAL/ChangeLog
Source/WebCore/PAL/pal/spi/cocoa/NSColorSPI.h
Source/WebCore/Resources/ListButtonArrow.png [new file with mode: 0644]
Source/WebCore/Resources/ListButtonArrow@2x.png [new file with mode: 0644]
Source/WebCore/WebCore.xcodeproj/project.pbxproj
Source/WebCore/css/CSSPrimitiveValueMappings.h
Source/WebCore/css/CSSProperties.json
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/html.css
Source/WebCore/html/HTMLInputElement.cpp
Source/WebCore/html/HTMLInputElement.h
Source/WebCore/html/InputType.h
Source/WebCore/html/TextFieldInputType.cpp
Source/WebCore/html/TextFieldInputType.h
Source/WebCore/html/shadow/DataListButtonElement.cpp [new file with mode: 0644]
Source/WebCore/html/shadow/DataListButtonElement.h [new file with mode: 0644]
Source/WebCore/platform/ThemeTypes.h
Source/WebCore/rendering/RenderTheme.cpp
Source/WebCore/rendering/RenderTheme.h
Source/WebCore/rendering/RenderThemeMac.h
Source/WebCore/rendering/RenderThemeMac.mm
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js