Changeset 234898 in webkit


Ignore:
Timestamp:
Aug 15, 2018 1:42:26 PM (6 years ago)
Author:
Aditya Keerthi
Message:

[Datalist] Add button to TextFieldInputs with a datalist
​https://bugs.webkit.org/show_bug.cgi?id=187741

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):

  • html/HTMLInputElement.h:
  • html/InputType.h:

(WebCore::InputType::dataListButtonElement 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):

  • 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/ios/TestExpectations:
  • 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.
Location:
trunk
Files:
10 added
23 edited
1 copied

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r234897 r234898  
     12018-08-15  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [Datalist] Add button to TextFieldInputs with a datalist
     4        https://bugs.webkit.org/show_bug.cgi?id=187741
     5
     6        Reviewed by Tim Horton.
     7
     8        Added tests to verify appearance of TextFieldInputs with a datalist.
     9
     10        * fast/forms/datalist/datalist-searchinput-appearance.html: Added.
     11        * fast/forms/datalist/datalist-textinput-appearance.html: Added.
     12        * platform/ios/TestExpectations:
     13        * platform/mac/fast/forms/datalist/datalist-searchinput-appearance-expected.png: Added.
     14        * platform/mac/fast/forms/datalist/datalist-searchinput-appearance-expected.txt: Added.
     15        * platform/mac/fast/forms/datalist/datalist-textinput-appearance-expected.png: Added.
     16        * platform/mac/fast/forms/datalist/datalist-textinput-appearance-expected.txt: Added.
     17
    1182018-08-15  Ryan Haddad  <ryanhaddad@apple.com>
    219

  • trunk/LayoutTests/platform/ios/TestExpectations

    r234862 r234898  
    32003200webkit.org/b/186714 fast/forms/datalist/datalist-show-hide.html [ Skip ]
    32013201webkit.org/b/186714 fast/forms/datalist/datalist-textinput-keydown.html [ Skip ]
     3202fast/forms/datalist/datalist-searchinput-appearance.html [ Skip ]
     3203fast/forms/datalist/datalist-textinput-appearance.html  [ Skip ]
    32023204
    32033205# We are only accepting GLSL3 for macOS.

  • trunk/Source/WebCore/ChangeLog

    r234897 r234898  
     12018-08-15  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [Datalist] Add button to TextFieldInputs with a datalist
     4        https://bugs.webkit.org/show_bug.cgi?id=187741
     5
     6        Reviewed by Tim Horton.
     7
     8        TextFieldInputs that have an associated datalist element should be drawn as
     9        combo boxes. However, we cannot use NSComboBox for this control, as NSComboBox
     10        is not height-resizable. Furthermore, the input should also be able to contain
     11        additional elements, such as the stepper for type=number and the cancel button
     12        for type=search. For these reasons, we draw a button at the end of the input,
     13        mimicking appearance of a combo box.
     14
     15        The list-button -webkit-appearance value was added to display the new button.
     16
     17        Tests: fast/forms/datalist/datalist-searchinput-appearance.html
     18               fast/forms/datalist/datalist-textinput-appearance.html
     19
     20        * Resources/ListButtonArrow.png: Added.
     21        * Resources/ListButtonArrow@2x.png: Added.
     22        * WebCore.xcodeproj/project.pbxproj:
     23        * css/CSSPrimitiveValueMappings.h:
     24        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
     25        * css/CSSProperties.json:
     26        * css/CSSValueKeywords.in:
     27        * css/html.css:
     28        (input::-webkit-list-button):
     29        * html/HTMLInputElement.cpp:
     30        (WebCore::HTMLInputElement::dataListButtonElement const):
     31        * html/HTMLInputElement.h:
     32        * html/InputType.h:
     33        (WebCore::InputType::dataListButtonElement const):
     34        * html/TextFieldInputType.cpp:
     35        (WebCore::TextFieldInputType::needsContainer const):
     36        (WebCore::TextFieldInputType::createShadowSubtree):
     37        (WebCore::TextFieldInputType::destroyShadowSubtree):
     38        (WebCore::TextFieldInputType::listAttributeTargetChanged):
     39        (WebCore::TextFieldInputType::dataListButtonElement const):
     40        (WebCore::TextFieldInputType::dataListButtonElementWasClicked):
     41        (WebCore::TextFieldInputType::didCloseSuggestions):
     42        * html/TextFieldInputType.h:
     43        * html/shadow/DataListButtonElement.cpp: Added.
     44        (WebCore::DataListButtonElement::create):
     45        (WebCore::DataListButtonElement::DataListButtonElement):
     46        (WebCore::DataListButtonElement::~DataListButtonElement):
     47        (WebCore::DataListButtonElement::defaultEventHandler):
     48        * html/shadow/DataListButtonElement.h: Added.
     49        * platform/ThemeTypes.h:
     50        * rendering/RenderTheme.cpp:
     51        (WebCore::RenderTheme::adjustStyle):
     52        (WebCore::RenderTheme::adjustListButtonStyle const):
     53        * rendering/RenderTheme.h:
     54        * rendering/RenderThemeMac.h:
     55        * rendering/RenderThemeMac.mm:
     56        (-[WebListButtonCell drawWithFrame:inView:]):
     57        (WebCore::RenderThemeMac::paintListButtonForInput):
     58        (WebCore::RenderThemeMac::adjustListButtonStyle const):
     59        (WebCore::RenderThemeMac::paintTextField):
     60        (WebCore::RenderThemeMac::paintSearchField):
     61        (WebCore::RenderThemeMac::paintSearchFieldCancelButton):
     62        (WebCore::RenderThemeMac::listButton const):
     63
    1642018-08-15  Ryan Haddad  <ryanhaddad@apple.com>
    265

  • trunk/Source/WebCore/PAL/ChangeLog

    r234897 r234898  
     12018-08-15  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [Datalist] Add button to TextFieldInputs with a datalist
     4        https://bugs.webkit.org/show_bug.cgi?id=187741
     5
     6        Reviewed by Tim Horton.
     7
     8        * pal/spi/cocoa/NSColorSPI.h: Added NSColorGetUserAccentColor().
     9
    1102018-08-15  Ryan Haddad  <ryanhaddad@apple.com>
    211

  • trunk/Source/WebCore/PAL/pal/spi/cocoa/NSColorSPI.h

    r234289 r234898  
    3030#import <AppKit/NSColor_Private.h>
    3131
     32#if __MAC_OS_X_VERSION_MIN_REQUIRED >= 101400
     33#import <AppKit/NSColor_UserAccent.h>
     34#endif
     35
    3236#else
    3337
    … …  
    4751@end
    4852
     53#if __MAC_OS_X_VERSION_MIN_REQUIRED >= 101400
     54typedef NS_ENUM(NSInteger, NSUserAccentColor) {
     55    NSUserAccentColorRed = 0,
     56    NSUserAccentColorOrange,
     57    NSUserAccentColorYellow,
     58    NSUserAccentColorGreen,
     59    NSUserAccentColorBlue,
     60    NSUserAccentColorPurple,
     61    NSUserAccentColorPink,
     62
     63    NSUserAccentColorNoColor = -1,
     64};
     65
     66extern "C" NSUserAccentColor NSColorGetUserAccentColor(void);
    4967#endif
     68
     69#endif

  • trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj

    r234846 r234898  
    47864786                E4E9B11D1814569C003ACCDF /* SimpleLineLayoutFunctions.h in Headers */ = {isa = PBXBuildFile; fileRef = E4E9B11C1814569C003ACCDF /* SimpleLineLayoutFunctions.h */; };
    47874787                E4F9EEF3156DA00700D23E7E /* StyleSheetContents.h in Headers */ = {isa = PBXBuildFile; fileRef = E4F9EEF1156D84C400D23E7E /* StyleSheetContents.h */; settings = {ATTRIBUTES = (Private, ); }; };
     4788                E59DD4B821098287003C8B47 /* ListButtonArrow.png in Resources */ = {isa = PBXBuildFile; fileRef = E59DD4B721098285003C8B47 /* ListButtonArrow.png */; };
     4789                E516699120FF9918009D2C27 /* ListButtonArrow@2x.png in Resources */ = {isa = PBXBuildFile; fileRef = E516698F20FF9916009D2C27 /* ListButtonArrow@2x.png */; };
    47884790                E517670320B88C1400D41167 /* DataListSuggestionInformation.h in Headers */ = {isa = PBXBuildFile; fileRef = E517670220B88C1400D41167 /* DataListSuggestionInformation.h */; settings = {ATTRIBUTES = (Private, ); }; };
    47894791                E52CF54D20A268AC00DADA27 /* DataListSuggestionsClient.h in Headers */ = {isa = PBXBuildFile; fileRef = E52CF54C20A268AC00DADA27 /* DataListSuggestionsClient.h */; settings = {ATTRIBUTES = (Private, ); }; };
    47904792                E52CF54F20A35A2800DADA27 /* DataListSuggestionPicker.h in Headers */ = {isa = PBXBuildFile; fileRef = E52CF54E20A35A2800DADA27 /* DataListSuggestionPicker.h */; settings = {ATTRIBUTES = (Private, ); }; };
     4793                E58B45BA20AD07DD00991025 /* DataListButtonElement.h in Headers */ = {isa = PBXBuildFile; fileRef = E58B45B820AD07DD00991025 /* DataListButtonElement.h */; };
     4794                E58B45BB20AD07DD00991025 /* DataListButtonElement.cpp in Sources */ = {isa = PBXBuildFile; fileRef = E58B45B920AD07DD00991025 /* DataListButtonElement.cpp */; };
    47914795                E5BA7D63151437CA00FE1E3F /* LengthFunctions.h in Headers */ = {isa = PBXBuildFile; fileRef = E5BA7D62151437CA00FE1E3F /* LengthFunctions.h */; settings = {ATTRIBUTES = (Private, ); }; };
    47924796                EBF5121C1696496C0056BD25 /* JSTypeConversions.cpp in Sources */ = {isa = PBXBuildFile; fileRef = EBF5121A1696496C0056BD25 /* JSTypeConversions.cpp */; };
    … …  
    1451314517                E4F9EEF0156D84C400D23E7E /* StyleSheetContents.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = StyleSheetContents.cpp; sourceTree = "<group>"; };
    1451414518                E4F9EEF1156D84C400D23E7E /* StyleSheetContents.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = StyleSheetContents.h; sourceTree = "<group>"; };
     14519                E59DD4B721098285003C8B47 /* ListButtonArrow.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = ListButtonArrow.png; sourceTree = "<group>"; };
     14520                E516698F20FF9916009D2C27 /* ListButtonArrow@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "ListButtonArrow@2x.png"; sourceTree = "<group>"; };
    1451514521                E517670220B88C1400D41167 /* DataListSuggestionInformation.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = DataListSuggestionInformation.h; sourceTree = "<group>"; };
    1451614522                E51A81DE17298D7700BFCA61 /* JSPerformance.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSPerformance.cpp; sourceTree = "<group>"; };
    … …  
    1451914525                E52CF54E20A35A2800DADA27 /* DataListSuggestionPicker.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = DataListSuggestionPicker.h; sourceTree = "<group>"; };
    1452014526                E55F4979151B888000BB67DB /* LengthFunctions.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = LengthFunctions.cpp; sourceTree = "<group>"; };
     14527                E58B45B820AD07DD00991025 /* DataListButtonElement.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = DataListButtonElement.h; sourceTree = "<group>"; };
     14528                E58B45B920AD07DD00991025 /* DataListButtonElement.cpp */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; path = DataListButtonElement.cpp; sourceTree = "<group>"; };
    1452114529                E5BA7D62151437CA00FE1E3F /* LengthFunctions.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = LengthFunctions.h; sourceTree = "<group>"; };
    1452214530                EB081CD81696084400553730 /* TypeConversions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = TypeConversions.h; sourceTree = "<group>"; };
    … …  
    1687016878                                7C1E97251A9F9834007BF0FB /* AutoFillButtonElement.cpp */,
    1687116879                                7C1E97261A9F9834007BF0FB /* AutoFillButtonElement.h */,
     16880                                E58B45B920AD07DD00991025 /* DataListButtonElement.cpp */,
     16881                                E58B45B820AD07DD00991025 /* DataListButtonElement.h */,
    1687216882                                A7C9ABF61357A3BF00F5503F /* DetailsMarkerControl.cpp */,
    1687316883                                A7C9ABF71357A3BF00F5503F /* DetailsMarkerControl.h */,
    … …  
    1924919259                                D02B64B014089E56006EFA21 /* DictationPhraseWithAlternativesDot.png */,
    1925019260                                D02B64B114089E56006EFA21 /* DictationPhraseWithAlternativesDot@2x.png */,
     19261                                E59DD4B721098285003C8B47 /* ListButtonArrow.png */,
     19262                                E516698F20FF9916009D2C27 /* ListButtonArrow@2x.png */,
    1925119263                                BE8C753010681324001E93F5 /* SpellingDot.png */,
    1925219264                                01E6C2E31194B2820050821C /* SpellingDot@2x.png */,
    … …  
    2771827730                                C5227DF11C3C6DF100F5ED54 /* DataDetection.h in Headers */,
    2771927731                                7C7941E51C56C29300A4C58E /* DataDetectorsCoreSoftLink.h in Headers */,
     27732                                E58B45BA20AD07DD00991025 /* DataListButtonElement.h in Headers */,
    2772027733                                E517670320B88C1400D41167 /* DataListSuggestionInformation.h in Headers */,
    2772127734                                E52CF54F20A35A2800DADA27 /* DataListSuggestionPicker.h in Headers */,
    … …  
    3128331296                                7CC7E3D717208C0F003C5277 /* IDNScriptWhiteList.txt in Resources */,
    3128431297                                2D9F0E1314FF1CBF00BA0FF7 /* linearSRGB.icc in Resources */,
     31298                                E59DD4B821098287003C8B47 /* ListButtonArrow.png in Resources */,
     31299                                E516699120FF9918009D2C27 /* ListButtonArrow@2x.png in Resources */,
    3128531300                                BCAD180A131C7A0D00990406 /* Localizable.strings in Resources */,
    3128631301                                837A80131E1E127300026B9F /* Localizable.stringsdict in Resources */,
    … …  
    3152531540                                1ABA76CA11D20E50004C201C /* CSSPropertyNames.cpp in Sources */,
    3152631541                                BE23480C18A9870B00E4B6E8 /* DataCue.cpp in Sources */,
     31542                                E58B45BB20AD07DD00991025 /* DataListButtonElement.cpp in Sources */,
    3152731543                                515BE18F1D54F5FB00DD7C68 /* EmptyGamepadProvider.cpp in Sources */,
    3152831544                                724ED32C1A3A7E5400F5F13C /* EXTBlendMinMax.cpp in Sources */,

  • trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h

    r234808 r234898  
    625625    case ColorWellPart:
    626626        m_value.valueID = CSSValueColorWell;
     627        break;
     628#endif
     629#if ENABLE(DATALIST_ELEMENT)
     630    case ListButtonPart:
     631        m_value.valueID = CSSValueListButton;
    627632        break;
    628633#endif

  • trunk/Source/WebCore/css/CSSProperties.json

    r234798 r234898  
    42194219                "caps-lock-indicator",
    42204220                "color-well",
     4221                "list-button",
    42214222                "none"
    42224223            ],

  • trunk/Source/WebCore/css/CSSValueKeywords.in

    r234788 r234898  
    840840color-well
    841841#endif
     842#if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
     843list-button
     844#endif
    842845textarea
    843846#if defined(ENABLE_ATTACHMENT_ELEMENT) && ENABLE_ATTACHMENT_ELEMENT

  • trunk/Source/WebCore/css/html.css

    r234788 r234898  
    617617}
    618618
     619#if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
     620input::-webkit-list-button {
     621    -webkit-appearance: list-button;
     622    display: block;
     623    position: relative;
     624    cursor: default;
     625    align-self: stretch;
     626    flex: none;
     627    -webkit-user-select: none;
     628    width: 16px;
     629    height: 100%;
     630}
     631#endif
     632
    619633keygen, select {
    620634    border-radius: 5px;

  • trunk/Source/WebCore/html/HTMLInputElement.cpp

    r234808 r234898  
    242242}
    243243
     244#if ENABLE(DATALIST_ELEMENT)
     245HTMLElement* HTMLInputElement::dataListButtonElement() const
     246{
     247    return m_inputType->dataListButtonElement();
     248}
     249#endif
     250
    244251bool HTMLInputElement::shouldAutocomplete() const
    245252{

  • trunk/Source/WebCore/html/HTMLInputElement.h

    r234788 r234898  
    151151    HTMLElement* placeholderElement() const final;
    152152    WEBCORE_EXPORT HTMLElement* autoFillButtonElement() const;
     153#if ENABLE(DATALIST_ELEMENT)
     154    HTMLElement* dataListButtonElement() const;
     155#endif
    153156
    154157    bool checked() const { return m_isChecked; }

  • trunk/Source/WebCore/html/InputType.h

    r234788 r234898  
    229229    virtual HTMLElement* sliderTrackElement() const { return nullptr; }
    230230    virtual HTMLElement* placeholderElement() const;
     231#if ENABLE(DATALIST_ELEMENT)
     232    virtual HTMLElement* dataListButtonElement() const { return nullptr; }
     233#endif
    231234
    232235    // Miscellaneous functions.

  • trunk/Source/WebCore/html/TextFieldInputType.cpp

    r234289 r234898  
    286286bool TextFieldInputType::needsContainer() const
    287287{
     288#if ENABLE(DATALIST_ELEMENT)
     289    return element()->hasAttributeWithoutSynchronization(listAttr);
     290#endif
    288291    return false;
    289292}
    … …  
    344347
    345348    updateAutoFillButton();
     349
     350#if ENABLE(DATALIST_ELEMENT)
     351    m_dataListDropdownIndicator = DataListButtonElement::create(element()->document(), *this);
     352    m_dataListDropdownIndicator->setInlineStyleProperty(CSSPropertyDisplay, CSSValueNone, true);
     353    m_container->appendChild(*m_dataListDropdownIndicator);
     354#endif
    346355}
    347356
    … …  
    393402    m_capsLockIndicator = nullptr;
    394403    m_autoFillButton = nullptr;
     404#if ENABLE(DATALIST)
     405    m_dataListDropdownIndicator = nullptr;
     406#endif
    395407    m_container = nullptr;
    396408}
    … …  
    786798#if ENABLE(DATALIST_ELEMENT)
    787799
     800void TextFieldInputType::listAttributeTargetChanged()
     801{
     802    if (!m_dataListDropdownIndicator)
     803        return;
     804
     805    m_dataListDropdownIndicator->setInlineStyleProperty(CSSPropertyDisplay, element()->list() ? CSSValueBlock : CSSValueNone, true);
     806}
     807
     808HTMLElement* TextFieldInputType::dataListButtonElement() const
     809{
     810    return m_dataListDropdownIndicator.get();
     811}
     812
     813void TextFieldInputType::dataListButtonElementWasClicked()
     814{
     815    if (element()->list())
     816        displaySuggestions(DataListSuggestionActivationType::IndicatorClicked);
     817}
     818
    788819IntRect TextFieldInputType::elementRectInRootViewCoordinates() const
    789820{
    … …  
    820851{
    821852    m_suggestionPicker = nullptr;
     853    if (element()->renderer())
     854        element()->renderer()->repaint();
    822855}
    823856
    … …  
    845878}
    846879
     880bool TextFieldInputType::isPresentingAttachedView() const
     881{
     882    return !!m_suggestionPicker;
     883}
     884
    847885#endif
    848886

  • trunk/Source/WebCore/html/TextFieldInputType.h

    r234289 r234898  
    3333
    3434#include "AutoFillButtonElement.h"
     35#include "DataListButtonElement.h"
    3536#include "DataListSuggestionPicker.h"
    3637#include "DataListSuggestionsClient.h"
    … …  
    4748class TextFieldInputType : public InputType, protected SpinButtonElement::SpinButtonOwner, protected AutoFillButtonElement::AutoFillButtonOwner
    4849#if ENABLE(DATALIST_ELEMENT)
    49     , private DataListSuggestionsClient
     50    , private DataListSuggestionsClient, protected DataListButtonElement::DataListButtonOwner
    5051#endif
    5152{
    … …  
    6566    HTMLElement* capsLockIndicatorElement() const final;
    6667    HTMLElement* autoFillButtonElement() const final;
     68#if ENABLE(DATALIST_ELEMENT)
     69    HTMLElement* dataListButtonElement() const final;
     70#endif
    6771
    6872    virtual bool needsContainer() const;
    … …  
    121125
    122126#if ENABLE(DATALIST_ELEMENT)
     127    bool isPresentingAttachedView() const final;
     128    void listAttributeTargetChanged() final;
    123129    void displaySuggestions(DataListSuggestionActivationType);
    124130    void closeSuggestions();
    … …  
    129135    void didSelectDataListOption(const String&) final;
    130136    void didCloseSuggestions() final;
     137
     138    void dataListButtonElementWasClicked() final;
     139    RefPtr<DataListButtonElement> m_dataListDropdownIndicator;
    131140
    132141    std::unique_ptr<DataListSuggestionPicker> m_suggestionPicker;

  • trunk/Source/WebCore/html/shadow/DataListButtonElement.h

    r234897 r234898  
    11/*
    2  * Copyright (C) 2015 Apple Inc. All rights reserved.
     2 * Copyright (C) 2018 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 #import <AppKit/NSColor.h>
     26#pragma once
    2727
    28 #if PLATFORM(MAC) && USE(APPLE_INTERNAL_SDK)
     28#if ENABLE(DATALIST_ELEMENT)
    2929
    30 #import <AppKit/NSColor_Private.h>
     30#include "HTMLDivElement.h"
    3131
    32 #else
     32namespace WebCore {
    3333
    34 @interface NSColor ()
    35 + (NSColor *)systemRedColor;
    36 + (NSColor *)systemGreenColor;
    37 + (NSColor *)systemBlueColor;
    38 + (NSColor *)systemOrangeColor;
    39 + (NSColor *)systemYellowColor;
    40 + (NSColor *)systemBrownColor;
    41 + (NSColor *)systemPinkColor;
    42 + (NSColor *)systemPurpleColor;
    43 + (NSColor *)systemGrayColor;
    44 + (NSColor *)linkColor;
    45 + (NSColor *)findHighlightColor;
    46 + (NSColor *)placeholderTextColor;
    47 @end
     34class TextFieldInputType;
    4835
    49 #endif
     36class DataListButtonElement final : public HTMLDivElement {
     37    WTF_MAKE_ISO_ALLOCATED(DataListButtonElement);
     38public:
     39    class DataListButtonOwner {
     40    public:
     41        virtual ~DataListButtonOwner() = default;
     42        virtual void dataListButtonElementWasClicked() = 0;
     43    };
     44
     45    ~DataListButtonElement();
     46
     47    static Ref<DataListButtonElement> create(Document&, DataListButtonOwner&);
     48
     49private:
     50    explicit DataListButtonElement(Document&, DataListButtonOwner&);
     51
     52    void defaultEventHandler(Event&) override;
     53
     54    DataListButtonOwner& m_owner;
     55};
     56
     57} // namespace WebCore
     58
     59#endif // ENABLE(DATALIST_ELEMENT)

  • trunk/Source/WebCore/platform/ThemeTypes.h

    r234788 r234898  
    5555    ColorWellPart,
    5656#endif
     57#if ENABLE(DATALIST_ELEMENT)
     58    ListButtonPart,
     59#endif
    5760    TextAreaPart,
    5861#if ENABLE(ATTACHMENT_ELEMENT)

  • trunk/Source/WebCore/rendering/RenderTheme.cpp

    r234788 r234898  
    272272    case BorderlessAttachmentPart:
    273273        return adjustAttachmentStyle(styleResolver, style, element);
     274#endif
     275#if ENABLE(DATALIST_ELEMENT)
     276    case ListButtonPart:
     277        return adjustListButtonStyle(styleResolver, style, element);
    274278#endif
    275279    default:
    … …  
    10321036#if ENABLE(DATALIST_ELEMENT)
    10331037
     1038void RenderTheme::adjustListButtonStyle(StyleResolver&, RenderStyle&, const Element*) const
     1039{
     1040}
     1041
    10341042LayoutUnit RenderTheme::sliderTickSnappingThreshold() const
    10351043{

  • trunk/Source/WebCore/rendering/RenderTheme.h

    r234788 r234898  
    338338    virtual void adjustAttachmentStyle(StyleResolver&, RenderStyle&, const Element*) const;
    339339    virtual bool paintAttachment(const RenderObject&, const PaintInfo&, const IntRect&);
     340#endif
     341
     342#if ENABLE(DATALIST_ELEMENT)
     343    virtual void adjustListButtonStyle(StyleResolver&, RenderStyle&, const Element*) const;
    340344#endif
    341345

  • trunk/Source/WebCore/rendering/RenderThemeMac.h

    r234512 r234898  
    156156    bool paintSearchFieldResultsButton(const RenderBox&, const PaintInfo&, const IntRect&) final;
    157157
     158#if ENABLE(DATALIST_ELEMENT)
     159    void paintListButtonForInput(const RenderObject&, GraphicsContext&, const FloatRect&);
     160    void adjustListButtonStyle(StyleResolver&, RenderStyle&, const Element*) const;
     161#endif
     162
    158163#if ENABLE(VIDEO)
    159164    bool supportsClosedCaptioning() const final { return true; }
    … …  
    220225    NSSliderCell *sliderThumbVertical() const;
    221226    NSTextFieldCell *textField() const;
     227#if ENABLE(DATALIST_ELEMENT)
     228    NSCell *listButton() const;
     229#endif
    222230
    223231#if ENABLE(METER_ELEMENT)
    … …  
    248256    mutable RetainPtr<NSServicesRolloverButtonCell> m_servicesRolloverButton;
    249257#endif
     258#if ENABLE(DATALIST_ELEMENT)
     259    mutable RetainPtr<NSCell> m_listButton;
     260#endif
    250261
    251262    bool m_isSliderThumbHorizontalPressed { false };

  • trunk/Source/WebCore/rendering/RenderThemeMac.mm

    r234808 r234898  
    198198@end
    199199
     200#if ENABLE(DATALIST_ELEMENT)
     201
     202static const CGFloat listButtonWidth = 16.0f;
     203static const CGFloat listButtonCornerRadius = 5.0f;
     204
     205@interface WebListButtonCell : NSCell
     206@end
     207
     208@implementation WebListButtonCell
     209- (void)drawWithFrame:(NSRect)cellFrame inView:(__unused NSView *)controlView
     210{
     211    CGFloat listButtonCornerRadius = 5.0f;
     212    NSPoint topLeft = NSMakePoint(NSMinX(cellFrame), NSMinY(cellFrame));
     213    NSPoint topRight = NSMakePoint(NSMaxX(cellFrame), NSMinY(cellFrame));
     214    NSPoint bottomRight = NSMakePoint(NSMaxX(cellFrame), NSMaxY(cellFrame));
     215    NSPoint bottomLeft = NSMakePoint(NSMinX(cellFrame), NSMaxY(cellFrame));
     216
     217    NSBezierPath *path = [NSBezierPath bezierPath];
     218    [path moveToPoint:topLeft];
     219
     220    [path lineToPoint:NSMakePoint(topRight.x - listButtonCornerRadius, topRight.y)];
     221    [path curveToPoint:NSMakePoint(topRight.x, topRight.y + listButtonCornerRadius) controlPoint1:topRight controlPoint2:topRight];
     222
     223    [path lineToPoint:NSMakePoint(bottomRight.x, bottomRight.y - listButtonCornerRadius)];
     224    [path curveToPoint:NSMakePoint(bottomRight.x - listButtonCornerRadius, bottomRight.y) controlPoint1:bottomRight controlPoint2:bottomRight];
     225
     226    [path lineToPoint:bottomLeft];
     227    [path lineToPoint:topLeft];
     228
     229    if ([self userInterfaceLayoutDirection] == NSUserInterfaceLayoutDirectionRightToLeft) {
     230        NSAffineTransform *transform = [NSAffineTransform transform];
     231        [transform translateXBy:NSMidX(cellFrame) yBy:NSMidY(cellFrame)];
     232        [transform rotateByDegrees:180];
     233        [transform translateXBy:-1 * NSMidX(cellFrame) yBy:-1 * NSMidY(cellFrame)];
     234        [path transformUsingAffineTransform:transform];
     235    }
     236
     237    // FIXME: Obtain the gradient colors from CoreUI or AppKit
     238    RetainPtr<NSGradient> gradient;
     239#if __MAC_OS_X_VERSION_MIN_REQUIRED >= 101400
     240    NSUserAccentColor accentColor = NSColorGetUserAccentColor();
     241    if (accentColor == NSUserAccentColorRed)
     242        gradient = adoptNS([[NSGradient alloc] initWithStartingColor:[NSColor colorWithRed:(212.0 / 255) green:(122.0 / 255) blue:(117.0 / 255) alpha:1.0] endingColor:[NSColor colorWithRed:(189.0 / 255) green:(34.0 / 255) blue:(23.0 / 255) alpha:1.0]]);
     243    else if (accentColor == NSUserAccentColorOrange)
     244        gradient = adoptNS([[NSGradient alloc] initWithStartingColor:[NSColor colorWithRed:(242.0 / 255) green:(185.0 / 255) blue:(113.0 / 255) alpha:1.0] endingColor:[NSColor colorWithRed:(242.0 / 255) green:(145.0 / 255) blue:(17.0 / 255) alpha:1.0]]);
     245    else if (accentColor == NSUserAccentColorYellow)
     246        gradient = adoptNS([[NSGradient alloc] initWithStartingColor:[NSColor colorWithRed:(241.0 / 255) green:(212.0 / 255) blue:(119.0 / 255) alpha:1.0] endingColor:[NSColor colorWithRed:(239.0 / 255) green:(193.0 / 255) blue:(27.0 / 255) alpha:1.0]]);
     247    else if (accentColor == NSUserAccentColorGreen)
     248        gradient = adoptNS([[NSGradient alloc] initWithStartingColor:[NSColor colorWithRed:(132.0 / 255) green:(186.0 / 255) blue:(120.0 / 255) alpha:1.0] endingColor:[NSColor colorWithRed:(46.0 / 255) green:(145.0 / 255) blue:(30.0 / 255) alpha:1.0]]);
     249    else if (accentColor == NSUserAccentColorPurple)
     250        gradient = adoptNS([[NSGradient alloc] initWithStartingColor:[NSColor colorWithRed:(178.0 / 255) green:(128.0 / 255) blue:(175.0 / 255) alpha:1.0] endingColor:[NSColor colorWithRed:(130.0 / 255) green:(43.0 / 255) blue:(123.0 / 255) alpha:1.0]]);
     251    else if (accentColor == NSUserAccentColorPink)
     252        gradient = adoptNS([[NSGradient alloc] initWithStartingColor:[NSColor colorWithRed:(225.0 / 255) green:(126.0 / 255) blue:(165.0 / 255) alpha:1.0] endingColor:[NSColor colorWithRed:(211.0 / 255) green:(42.0 / 255) blue:(105.0 / 255) alpha:1.0]]);
     253    else if (accentColor == NSUserAccentColorNoColor)
     254        gradient = adoptNS([[NSGradient alloc] initWithStartingColor:[NSColor colorWithRed:(177.0 / 255) green:(177.0 / 255) blue:(182.0 / 255) alpha:1.0] endingColor:[NSColor colorWithRed:(145.0 / 255) green:(145.0 / 255) blue:(150.0 / 255) alpha:1.0]]);
     255    else
     256#endif
     257        gradient = adoptNS([[NSGradient alloc] initWithStartingColor:[NSColor colorWithRed:(114.0 / 255) green:(164.0 / 255) blue:(243.0 / 255) alpha:1.0] endingColor:[NSColor colorWithRed:(45.0 / 255) green:(117.0 / 255) blue:(246.0 / 255) alpha:1.0]]);
     258
     259    [gradient drawInBezierPath:path angle:90];
     260    if ([self isHighlighted]) {
     261        NSColor *overlay = [NSColor colorWithWhite:0 alpha:0.1];
     262        [overlay setFill];
     263        [path fill];
     264    }
     265}
     266@end
     267
     268#endif // ENABLE(DATALIST_ELEMENT)
     269
    200270namespace WebCore {
    201271
    … …  
    10491119}
    10501120
     1121#if ENABLE(DATALIST_ELEMENT)
     1122
     1123void RenderThemeMac::paintListButtonForInput(const RenderObject& o, GraphicsContext& context, const FloatRect& r)
     1124{
     1125    // We can't paint an NSComboBoxCell since they are not height-resizable.
     1126    const auto& input = downcast<HTMLInputElement>(*(o.generatingNode()));
     1127    NSCell *listButton = this->listButton();
     1128
     1129    NSRect listButtonFrame = NSMakeRect(r.maxX() - listButtonWidth, r.y(), listButtonWidth, r.height());
     1130    if (!o.style().isLeftToRightDirection()) {
     1131        listButtonFrame.origin.x = r.x();
     1132        [listButton setUserInterfaceLayoutDirection:NSUserInterfaceLayoutDirectionRightToLeft];
     1133    } else
     1134        [listButton setUserInterfaceLayoutDirection:NSUserInterfaceLayoutDirectionLeftToRight];
     1135
     1136    [listButton setHighlighted:input.isPresentingAttachedView()];
     1137    if (!input.isPresentingAttachedView())
     1138        updatePressedState(listButton, *(input.dataListButtonElement()->renderer()));
     1139
     1140    [listButton drawWithFrame:listButtonFrame inView:documentViewFor(o)];
     1141    [listButton setControlView:nil];
     1142
     1143    RefPtr<Image> image;
     1144    float imageScale = 1;
     1145    if (o.document().deviceScaleFactor() >= 2) {
     1146        image = Image::loadPlatformResource("ListButtonArrow@2x");
     1147        imageScale = 2;
     1148    } else
     1149        image = Image::loadPlatformResource("ListButtonArrow");
     1150
     1151    FloatRect imageRect(0, 0, image->width() / imageScale, image->height() / imageScale);
     1152    imageRect.setX(NSMidX(listButtonFrame) - imageRect.width() / 2);
     1153    imageRect.setY(NSMidY(listButtonFrame) - imageRect.height() / 2);
     1154
     1155    context.drawImage(*image, imageRect);
     1156}
     1157
     1158void RenderThemeMac::adjustListButtonStyle(StyleResolver&, RenderStyle& style, const Element*) const
     1159{
     1160    // Add a margin to place the button at end of the input field.
     1161    if (style.isLeftToRightDirection())
     1162        style.setMarginRight(Length(-4, Fixed));
     1163    else
     1164        style.setMarginLeft(Length(-4, Fixed));
     1165}
     1166
     1167#endif
     1168
    10511169bool RenderThemeMac::paintTextField(const RenderObject& o, const PaintInfo& paintInfo, const FloatRect& r)
    10521170{
    … …  
    10741192
    10751193    [textField setControlView:nil];
     1194
     1195#if ENABLE(DATALIST_ELEMENT)
     1196    if (!is<HTMLInputElement>(o.generatingNode()))
     1197        return false;
     1198
     1199    const auto& input = downcast<HTMLInputElement>(*(o.generatingNode()));
     1200    if (input.list())
     1201        paintListButtonForInput(o, paintInfo.context(), adjustedPaintRect);
     1202#endif
    10761203
    10771204    return false;
    … …  
    18321959    [search resetSearchButtonCell];
    18331960
     1961#if ENABLE(DATALIST_ELEMENT)
     1962    if (!is<HTMLInputElement>(o.generatingNode()))
     1963        return false;
     1964
     1965    const auto& input = downcast<HTMLInputElement>(*(o.generatingNode()));
     1966    if (input.list())
     1967        paintListButtonForInput(o, paintInfo.context(), FloatRect(unzoomedRect.x(), unzoomedRect.y() + 1, unzoomedRect.width(), unzoomedRect.height() - 2));
     1968#endif
     1969
    18341970    return false;
    18351971}
    … …  
    19342070
    19352071    FloatRect localBounds = adjustedCancelButtonRect([search cancelButtonRectForBounds:NSRect(snappedIntRect(inputBox.contentBoxRect()))]);
     2072
    19362073    // Adjust position based on the content direction.
    19372074    float adjustedXPosition;
    1938     if (box.style().direction() == TextDirection::RTL)
     2075
     2076    if (is<HTMLInputElement>(*input)) {
     2077        RenderBox* cancelButtonBox = downcast<RenderBox>(downcast<HTMLInputElement>(*input).cancelButtonElement()->renderer());
     2078        // The cancel button won't always be the rightmost element.
     2079        adjustedXPosition = inputBox.contentBoxRect().x() + (cancelButtonBox->absoluteContentBox().x() - inputBox.absoluteContentBox().x());
     2080    } else if (box.style().direction() == TextDirection::RTL)
    19392081        adjustedXPosition = inputBox.contentBoxRect().x();
    19402082    else
    … …  
    22712413}
    22722414
     2415#if ENABLE(DATALIST_ELEMENT)
     2416NSCell *RenderThemeMac::listButton() const
     2417{
     2418    if (!m_listButton)
     2419        m_listButton = adoptNS([[WebListButtonCell alloc] init]);
     2420
     2421    return m_listButton.get();
     2422}
     2423#endif
     2424
    22732425String RenderThemeMac::fileListNameForWidth(const FileList* fileList, const FontCascade& font, int width, bool multipleFilesAllowed) const
    22742426{

  • trunk/Source/WebInspectorUI/ChangeLog

    r234889 r234898  
     12018-08-15  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [Datalist] Add button to TextFieldInputs with a datalist
     4        https://bugs.webkit.org/show_bug.cgi?id=187741
     5
     6        Reviewed by Tim Horton.
     7
     8        Add keyword completion for 'list-button'.
     9
     10        * UserInterface/External/CodeMirror/css.js:
     11        * UserInterface/Models/CSSKeywordCompletions.js:
     12
    1132018-08-15  Devin Rousso  <drousso@apple.com>
    214

  • trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js

    r234788 r234898  
    627627    "korean-hangul-formal", "korean-hanja-formal", "korean-hanja-informal",
    628628    "landscape", "lao", "large", "larger", "left", "level", "lighter", "lighten",
    629     "line-through", "linear", "linear-gradient", "lines", "list-item", "listbox", "listitem",
     629    "line-through", "linear", "linear-gradient", "lines", "list-item", "listbox", "list-button", "listitem",
    630630    "local", "logical", "loud", "lower", "lower-alpha", "lower-armenian",
    631631    "lower-greek", "lower-hexadecimal", "lower-latin", "lower-norwegian",

  • trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js

    r234788 r234898  
    10411041    /*
    10421042    "-webkit-appearance": [
    1043         "none", "checkbox", "radio", "push-button", "square-button", "button", "button-bevel", "default-button", "inner-spin-button", "listbox", "listitem", "media-enter-fullscreen-button", "media-exit-fullscreen-button", "media-fullscreen-volume-slider", "media-fullscreen-volume-slider-thumb", "media-mute-button", "media-play-button", "media-overlay-play-button", "media-seek-back-button", "media-seek-forward-button", "media-rewind-button", "media-return-to-realtime-button", "media-toggle-closed-captions-button", "media-slider", "media-sliderthumb", "media-volume-slider-container", "media-volume-slider", "media-volume-sliderthumb", "media-volume-slider-mute-button", "media-controls-background", "media-controls-fullscreen-background", "media-current-time-display", "media-time-remaining-display", "menulist", "menulist-button", "menulist-text", "menulist-textfield", "meter", "progress-bar", "progress-bar-value", "slider-horizontal", "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "caret", "searchfield", "searchfield-decoration", "searchfield-results-decoration", "searchfield-results-button", "searchfield-cancel-button", "snapshotted-plugin-overlay", "textfield", "relevancy-level-indicator", "continuous-capacity-level-indicator", "discrete-capacity-level-indicator", "rating-level-indicator", "textarea", "attachment", "caps-lock-indicator", "color-well"
     1043        "none", "checkbox", "radio", "push-button", "square-button", "button", "button-bevel", "default-button", "inner-spin-button", "listbox", "listitem", "media-enter-fullscreen-button", "media-exit-fullscreen-button", "media-fullscreen-volume-slider", "media-fullscreen-volume-slider-thumb", "media-mute-button", "media-play-button", "media-overlay-play-button", "media-seek-back-button", "media-seek-forward-button", "media-rewind-button", "media-return-to-realtime-button", "media-toggle-closed-captions-button", "media-slider", "media-sliderthumb", "media-volume-slider-container", "media-volume-slider", "media-volume-sliderthumb", "media-volume-slider-mute-button", "media-controls-background", "media-controls-fullscreen-background", "media-current-time-display", "media-time-remaining-display", "menulist", "menulist-button", "menulist-text", "menulist-textfield", "meter", "progress-bar", "progress-bar-value", "slider-horizontal", "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "caret", "searchfield", "searchfield-decoration", "searchfield-results-decoration", "searchfield-results-button", "searchfield-cancel-button", "snapshotted-plugin-overlay", "textfield", "relevancy-level-indicator", "continuous-capacity-level-indicator", "discrete-capacity-level-indicator", "rating-level-indicator", "textarea", "attachment", "caps-lock-indicator", "color-well", "list-button"
    10441044    ],
    10451045    */
Note: See TracChangeset for help on using the changeset viewer.