Changeset 235435 in webkit


Ignore:
Timestamp:
Aug 28, 2018 11:56:37 AM (6 years ago)
Author:
Aditya Keerthi
Message:

[macOS] Color wells should appear rounded and textured
https://bugs.webkit.org/show_bug.cgi?id=189039

Reviewed by Tim Horton.

Source/WebCore:

Color wells should have a rounded and textured appearance on macOS. We can use
NSBezelStyleTexturedSquare to achieve this appearance.

Also updated the user-agent stylesheet to match the system appearance.

Rebaselined existing test: fast/forms/color/input-appearance-color.html

  • css/html.css:

(input[type="color"]::-webkit-color-swatch-wrapper):
(input[type="color"]::-webkit-color-swatch):

  • platform/mac/ThemeMac.mm:

(WebCore::setUpButtonCell):

  • rendering/RenderThemeMac.h: Build fix.

Source/WebKit:

  • UIProcess/mac/WebColorPickerMac.mm: Build fix.

LayoutTests:

Rebaseline tests to match new color-well appearance.

  • platform/mac/fast/forms/color/input-appearance-color-expected.png:
  • platform/mac/fast/forms/color/input-appearance-color-expected.txt:
Location:
trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r235429 r235435  
     12018-08-28  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [macOS] Color wells should appear rounded and textured
     4        https://bugs.webkit.org/show_bug.cgi?id=189039
     5
     6        Reviewed by Tim Horton.
     7
     8        Rebaseline tests to match new color-well appearance.
     9
     10        * platform/mac/fast/forms/color/input-appearance-color-expected.png:
     11        * platform/mac/fast/forms/color/input-appearance-color-expected.txt:
     12
    1132018-08-28  Youenn Fablet  <youenn@apple.com>
    214
  • trunk/LayoutTests/platform/mac/fast/forms/color/input-appearance-color-expected.txt

    r234788 r235435  
    1313        RenderBlock {INPUT} at (0,18) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    1414          RenderFlexibleBox {DIV} at (3,1) size 38x21
    15             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#000000] [border: (1px solid #8A8A8A)]
     15            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#000000]
    1616        RenderBlock {INPUT} at (44,18) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    1717          RenderFlexibleBox {DIV} at (3,1) size 38x21
    18             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#000000] [border: (1px solid #8A8A8A)]
     18            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#000000]
    1919        RenderText {#text} at (0,0) size 0x0
    2020      RenderBlock {H3} at (0,100) size 784x23
     
    2727        RenderBlock {INPUT} at (0,18) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    2828          RenderFlexibleBox {DIV} at (3,1) size 38x21
    29             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#00FF00] [border: (1px solid #8A8A8A)]
     29            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#00FF00]
    3030        RenderText {#text} at (44,21) size 4x18
    3131          text run at (44,21) width 4: " "
    3232        RenderBlock {INPUT} at (48,18) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    3333          RenderFlexibleBox {DIV} at (3,1) size 38x21
    34             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#00FF00] [border: (1px solid #8A8A8A)]
     34            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#00FF00]
    3535        RenderText {#text} at (92,21) size 4x18
    3636          text run at (92,21) width 4: " "
    3737        RenderBlock {INPUT} at (96,18) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    3838          RenderFlexibleBox {DIV} at (3,1) size 38x21
    39             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#00FF00] [border: (1px solid #8A8A8A)]
     39            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#00FF00]
    4040        RenderText {#text} at (140,21) size 4x18
    4141          text run at (140,21) width 4: " "
    4242        RenderBlock {INPUT} at (144,18) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    4343          RenderFlexibleBox {DIV} at (3,1) size 38x21
    44             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#00FF00] [border: (1px solid #8A8A8A)]
     44            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#00FF00]
    4545        RenderText {#text} at (188,21) size 4x18
    4646          text run at (188,21) width 4: " "
    4747        RenderBlock {INPUT} at (192,18) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    4848          RenderFlexibleBox {DIV} at (3,1) size 38x21
    49             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#00FF00] [border: (1px solid #8A8A8A)]
     49            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#00FF00]
    5050        RenderText {#text} at (236,21) size 4x18
    5151          text run at (236,21) width 4: " "
    5252        RenderBlock {INPUT} at (240,18) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    5353          RenderFlexibleBox {DIV} at (3,1) size 38x21
    54             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#00FF00] [border: (1px solid #8A8A8A)]
     54            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#00FF00]
    5555        RenderText {#text} at (0,0) size 0x0
    5656      RenderBlock {H3} at (0,200) size 784x23
     
    6060        RenderBlock {INPUT} at (0,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    6161          RenderFlexibleBox {DIV} at (3,1) size 38x21
    62             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#FF0000] [border: (1px solid #8A8A8A)]
     62            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#FF0000]
    6363        RenderText {#text} at (44,3) size 4x18
    6464          text run at (44,3) width 4: " "
    6565        RenderBlock {INPUT} at (48,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    6666          RenderFlexibleBox {DIV} at (3,1) size 38x21
    67             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#00FF00] [border: (1px solid #8A8A8A)]
     67            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#00FF00]
    6868        RenderText {#text} at (92,3) size 4x18
    6969          text run at (92,3) width 4: " "
    7070        RenderBlock {INPUT} at (96,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    7171          RenderFlexibleBox {DIV} at (3,1) size 38x21
    72             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#0000FF] [border: (1px solid #8A8A8A)]
     72            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#0000FF]
    7373        RenderText {#text} at (140,3) size 4x18
    7474          text run at (140,3) width 4: " "
    7575        RenderBlock {INPUT} at (144,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    7676          RenderFlexibleBox {DIV} at (3,1) size 38x21
    77             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#EC008C] [border: (1px solid #8A8A8A)]
     77            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#EC008C]
    7878        RenderText {#text} at (188,3) size 4x18
    7979          text run at (188,3) width 4: " "
    8080        RenderBlock {INPUT} at (192,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    8181          RenderFlexibleBox {DIV} at (3,1) size 38x21
    82             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#40E0D0] [border: (1px solid #8A8A8A)]
     82            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#40E0D0]
    8383        RenderText {#text} at (236,3) size 4x18
    8484          text run at (236,3) width 4: " "
    8585        RenderBlock {INPUT} at (240,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    8686          RenderFlexibleBox {DIV} at (3,1) size 38x21
    87             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#FF0000] [border: (1px solid #8A8A8A)]
     87            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#FF0000]
    8888        RenderText {#text} at (284,3) size 4x18
    8989          text run at (284,3) width 4: " "
    9090        RenderBlock {INPUT} at (288,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    9191          RenderFlexibleBox {DIV} at (3,1) size 38x21
    92             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#00FF00] [border: (1px solid #8A8A8A)]
     92            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#00FF00]
    9393        RenderText {#text} at (332,3) size 4x18
    9494          text run at (332,3) width 4: " "
    9595        RenderBlock {INPUT} at (336,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    9696          RenderFlexibleBox {DIV} at (3,1) size 38x21
    97             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#0000FF] [border: (1px solid #8A8A8A)]
     97            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#0000FF]
    9898        RenderText {#text} at (380,3) size 4x18
    9999          text run at (380,3) width 4: " "
    100100        RenderBlock {INPUT} at (384,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    101101          RenderFlexibleBox {DIV} at (3,1) size 38x21
    102             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#EC008C] [border: (1px solid #8A8A8A)]
     102            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#EC008C]
    103103        RenderText {#text} at (428,3) size 4x18
    104104          text run at (428,3) width 4: " "
    105105        RenderBlock {INPUT} at (432,0) size 44x23 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    106106          RenderFlexibleBox {DIV} at (3,1) size 38x21
    107             RenderBlock {DIV} at (2,4) size 34x13 [bgcolor=#40E0D0] [border: (1px solid #8A8A8A)]
     107            RenderBlock {DIV} at (2,4) size 34x12 [bgcolor=#40E0D0]
    108108        RenderText {#text} at (0,0) size 0x0
    109109      RenderBlock {H3} at (0,283) size 784x23
     
    113113        RenderBlock {INPUT} at (0,0) size 100x30 [bgcolor=#FFFFFF] [border: none (2px inset #000000) none (2px inset #000000)]
    114114          RenderFlexibleBox {DIV} at (3,1) size 94x28
    115             RenderBlock {DIV} at (2,4) size 90x20 [bgcolor=#FF0000] [border: (1px solid #8A8A8A)]
     115            RenderBlock {DIV} at (2,4) size 90x19 [bgcolor=#FF0000]
  • trunk/Source/WebCore/ChangeLog

    r235429 r235435  
     12018-08-28  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [macOS] Color wells should appear rounded and textured
     4        https://bugs.webkit.org/show_bug.cgi?id=189039
     5
     6        Reviewed by Tim Horton.
     7
     8        Color wells should have a rounded and textured appearance on macOS. We can use
     9        NSBezelStyleTexturedSquare to achieve this appearance.
     10
     11        Also updated the user-agent stylesheet to match the system appearance.
     12
     13        Rebaselined existing test: fast/forms/color/input-appearance-color.html
     14
     15        * css/html.css:
     16        (input[type="color"]::-webkit-color-swatch-wrapper):
     17        (input[type="color"]::-webkit-color-swatch):
     18        * platform/mac/ThemeMac.mm:
     19        (WebCore::setUpButtonCell):
     20        * rendering/RenderThemeMac.h: Build fix.
     21
    1222018-08-28  Youenn Fablet  <youenn@apple.com>
    223
  • trunk/Source/WebCore/css/html.css

    r234898 r235435  
    897897input[type="color"]::-webkit-color-swatch-wrapper {
    898898    display: flex;
    899     padding: 4px 2px;
     899    padding: 4px 2px 5px;
    900900    box-sizing: border-box;
    901901    width: 100%;
     
    905905input[type="color"]::-webkit-color-swatch {
    906906    background-color: #000000;
    907     border: 1px solid #8A8A8A;
     907    border-radius: 2px;
    908908    flex: 1;
    909909}
  • trunk/Source/WebCore/platform/mac/ThemeMac.mm

    r234788 r235435  
    497497    // Set the control size based off the rectangle we're painting into.
    498498    const std::array<IntSize, 3>& sizes = buttonSizes();
    499     if (part == SquareButtonPart
     499    switch (part) {
     500    case SquareButtonPart:
     501        [cell setBezelStyle:NSBezelStyleShadowlessSquare];
     502        break;
    500503#if ENABLE(INPUT_TYPE_COLOR)
    501         || part == ColorWellPart
     504    case ColorWellPart:
     505        [cell setBezelStyle:NSBezelStyleTexturedSquare];
     506        break;
    502507#endif
    503         || zoomedSize.height() > buttonSizes()[NSControlSizeRegular].height() * zoomFactor) {
    504         // Use the square button
    505         if ([cell bezelStyle] != NSBezelStyleShadowlessSquare)
    506             [cell setBezelStyle:NSBezelStyleShadowlessSquare];
    507     } else if ([cell bezelStyle] != NSBezelStyleRounded)
    508         [cell setBezelStyle:NSBezelStyleRounded];
     508    default:
     509        NSBezelStyle style = (zoomedSize.height() > buttonSizes()[NSControlSizeRegular].height() * zoomFactor) ? NSBezelStyleShadowlessSquare : NSBezelStyleRounded;
     510        [cell setBezelStyle:style];
     511        break;
     512    }
    509513
    510514    setControlSize(cell, sizes, zoomedSize, zoomFactor);
  • trunk/Source/WebCore/rendering/RenderThemeMac.h

    r235380 r235435  
    158158#if ENABLE(DATALIST_ELEMENT)
    159159    void paintListButtonForInput(const RenderObject&, GraphicsContext&, const FloatRect&);
    160     void adjustListButtonStyle(StyleResolver&, RenderStyle&, const Element*) const;
     160    void adjustListButtonStyle(StyleResolver&, RenderStyle&, const Element*) const final;
    161161#endif
    162162
  • trunk/Source/WebKit/ChangeLog

    r235427 r235435  
     12018-08-28  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [macOS] Color wells should appear rounded and textured
     4        https://bugs.webkit.org/show_bug.cgi?id=189039
     5
     6        Reviewed by Tim Horton.
     7
     8        * UIProcess/mac/WebColorPickerMac.mm: Build fix.
     9
    1102018-08-28  Aditya Keerthi  <akeerthi@apple.com>
    211
  • trunk/Source/WebKit/UIProcess/mac/WebColorPickerMac.mm

    r235403 r235435  
    6464@private
    6565    BOOL _lastChangedByUser;
    66     WebColorPickerMac *_picker;
     66    WebKit::WebColorPickerMac *_picker;
    6767    RetainPtr<WKPopoverColorWell> _popoverWell;
    6868}
Note: See TracChangeset for help on using the changeset viewer.