Changeset 270065 in webkit


Ignore:
Timestamp:
Nov 19, 2020 5:41:43 PM (3 years ago)
Author:
Aditya Keerthi
Message:

[iOS][FCR] Add new look for progress bars
​https://bugs.webkit.org/show_bug.cgi?id=218864
<rdar://problem/71334958>

Reviewed by Darin Adler and Wenson Hsieh.

Source/WebCore:

Tests: fast/forms/ios/form-control-refresh/progress/filled-appearance.html

fast/forms/ios/form-control-refresh/progress/indeterminate-appearance.html
fast/forms/ios/form-control-refresh/progress/rtl-appearance.html
fast/forms/ios/form-control-refresh/progress/style-height.html
fast/forms/ios/form-control-refresh/progress/style-width.html

  • platform/graphics/FloatRoundedRect.h:

(WebCore::FloatRoundedRect::Radii::Radii):

Added a new initializer to be used when all radii have the same value
but the horizontal and vertical components of an individual radius are
not equal.

  • rendering/RenderTheme.cpp:

(WebCore::RenderTheme::animationRepeatIntervalForProgressBar const):
(WebCore::RenderTheme::animationDurationForProgressBar const):

  • rendering/RenderTheme.h: Updated methods to take const parameter.
  • rendering/RenderThemeAdwaita.cpp:

(WebCore::RenderThemeAdwaita::animationRepeatIntervalForProgressBar const):
(WebCore::RenderThemeAdwaita::animationDurationForProgressBar const):

  • rendering/RenderThemeAdwaita.h:
  • rendering/RenderThemeIOS.h:
  • rendering/RenderThemeIOS.mm:

(WebCore::RenderThemeIOS::paintProgressBar):
(WebCore::RenderThemeIOS::animationRepeatIntervalForProgressBar const):
(WebCore::RenderThemeIOS::paintProgressBarFCR):

Updated appearance of determinate progress bars to match UIKit.

Added an animated indeterminate progress bar, by implementing the
animationRepeatIntervalForProgressBar method in RenderThemeIOS. This
matches RenderThemeMac. On macOS, the animation start time and the
current time are forwarded to CoreUI for drawing. However, on iOS, we
use this information to paint the animated progress bar ourselves.

  • rendering/RenderThemeMac.h:
  • rendering/RenderThemeMac.mm: Renamed constant for accuracy.

(WebCore::RenderThemeMac::animationRepeatIntervalForProgressBar const):

LayoutTests:

Added tests to verify different states and appearances of native progress bars.

  • fast/forms/ios/form-control-refresh/progress/filled-appearance-expected-mismatch.html: Added.
  • fast/forms/ios/form-control-refresh/progress/filled-appearance.html: Added.
  • fast/forms/ios/form-control-refresh/progress/indeterminate-appearance-expected-mismatch.html: Added.
  • fast/forms/ios/form-control-refresh/progress/indeterminate-appearance.html: Added.
  • fast/forms/ios/form-control-refresh/progress/rtl-appearance-expected-mismatch.html: Added.
  • fast/forms/ios/form-control-refresh/progress/rtl-appearance.html: Added.
  • fast/forms/ios/form-control-refresh/progress/style-height-expected.html: Added.
  • fast/forms/ios/form-control-refresh/progress/style-height.html: Added.
  • fast/forms/ios/form-control-refresh/progress/style-width-expected-mismatch.html: Added.
  • fast/forms/ios/form-control-refresh/progress/style-width.html: Added.
Location:
trunk
Files:
11 added
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r270059 r270065  
     12020-11-19  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [iOS][FCR] Add new look for progress bars
     4        https://bugs.webkit.org/show_bug.cgi?id=218864
     5        <rdar://problem/71334958>
     6
     7        Reviewed by Darin Adler and Wenson Hsieh.
     8
     9        Added tests to verify different states and appearances of native progress bars.
     10
     11        * fast/forms/ios/form-control-refresh/progress/filled-appearance-expected-mismatch.html: Added.
     12        * fast/forms/ios/form-control-refresh/progress/filled-appearance.html: Added.
     13        * fast/forms/ios/form-control-refresh/progress/indeterminate-appearance-expected-mismatch.html: Added.
     14        * fast/forms/ios/form-control-refresh/progress/indeterminate-appearance.html: Added.
     15        * fast/forms/ios/form-control-refresh/progress/rtl-appearance-expected-mismatch.html: Added.
     16        * fast/forms/ios/form-control-refresh/progress/rtl-appearance.html: Added.
     17        * fast/forms/ios/form-control-refresh/progress/style-height-expected.html: Added.
     18        * fast/forms/ios/form-control-refresh/progress/style-height.html: Added.
     19        * fast/forms/ios/form-control-refresh/progress/style-width-expected-mismatch.html: Added.
     20        * fast/forms/ios/form-control-refresh/progress/style-width.html: Added.
     21
    1222020-11-19  Geoffrey Garen  <ggaren@apple.com>
    223

  • trunk/Source/WebCore/ChangeLog

    r270064 r270065  
     12020-11-19  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [iOS][FCR] Add new look for progress bars
     4        https://bugs.webkit.org/show_bug.cgi?id=218864
     5        <rdar://problem/71334958>
     6
     7        Reviewed by Darin Adler and Wenson Hsieh.
     8
     9        Tests: fast/forms/ios/form-control-refresh/progress/filled-appearance.html
     10               fast/forms/ios/form-control-refresh/progress/indeterminate-appearance.html
     11               fast/forms/ios/form-control-refresh/progress/rtl-appearance.html
     12               fast/forms/ios/form-control-refresh/progress/style-height.html
     13               fast/forms/ios/form-control-refresh/progress/style-width.html
     14
     15        * platform/graphics/FloatRoundedRect.h:
     16        (WebCore::FloatRoundedRect::Radii::Radii):
     17
     18        Added a new initializer to be used when all radii have the same value
     19        but the horizontal and vertical components of an individual radius are
     20        not equal.
     21
     22        * rendering/RenderTheme.cpp:
     23        (WebCore::RenderTheme::animationRepeatIntervalForProgressBar const):
     24        (WebCore::RenderTheme::animationDurationForProgressBar const):
     25        * rendering/RenderTheme.h: Updated methods to take const parameter.
     26        * rendering/RenderThemeAdwaita.cpp:
     27        (WebCore::RenderThemeAdwaita::animationRepeatIntervalForProgressBar const):
     28        (WebCore::RenderThemeAdwaita::animationDurationForProgressBar const):
     29        * rendering/RenderThemeAdwaita.h:
     30        * rendering/RenderThemeIOS.h:
     31        * rendering/RenderThemeIOS.mm:
     32        (WebCore::RenderThemeIOS::paintProgressBar):
     33        (WebCore::RenderThemeIOS::animationRepeatIntervalForProgressBar const):
     34        (WebCore::RenderThemeIOS::paintProgressBarFCR):
     35
     36        Updated appearance of determinate progress bars to match UIKit.
     37
     38        Added an animated indeterminate progress bar, by implementing the
     39        animationRepeatIntervalForProgressBar method in RenderThemeIOS. This
     40        matches RenderThemeMac. On macOS, the animation start time and the
     41        current time are forwarded to CoreUI for drawing. However, on iOS, we
     42        use this information to paint the animated progress bar ourselves.
     43
     44        * rendering/RenderThemeMac.h:
     45        * rendering/RenderThemeMac.mm: Renamed constant for accuracy.
     46        (WebCore::RenderThemeMac::animationRepeatIntervalForProgressBar const):
     47
    1482020-11-19  Dean Jackson  <dino@apple.com>
    249

  • trunk/Source/WebCore/platform/graphics/FloatRoundedRect.h

    r269563 r270065  
    6868        }
    6969
     70        explicit Radii(float uniformRadiusWidth, float uniformRadiusHeight)
     71            : m_topLeft(uniformRadiusWidth, uniformRadiusHeight)
     72            , m_topRight(uniformRadiusWidth, uniformRadiusHeight)
     73            , m_bottomLeft(uniformRadiusWidth, uniformRadiusHeight)
     74            , m_bottomRight(uniformRadiusWidth, uniformRadiusHeight)
     75        {
     76        }
     77
    7078        void setTopLeft(const FloatSize& size) { m_topLeft = size; }
    7179        void setTopRight(const FloatSize& size) { m_topRight = size; }

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

    r269785 r270065  
    11191119#endif
    11201120
    1121 Seconds RenderTheme::animationRepeatIntervalForProgressBar(RenderProgress&) const
     1121Seconds RenderTheme::animationRepeatIntervalForProgressBar(const RenderProgress&) const
    11221122{
    11231123    return 0_s;
    11241124}
    11251125
    1126 Seconds RenderTheme::animationDurationForProgressBar(RenderProgress&) const
     1126Seconds RenderTheme::animationDurationForProgressBar(const RenderProgress&) const
    11271127{
    11281128    return 0_s;

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

    r269785 r270065  
    188188
    189189    // Returns the repeat interval of the animation for the progress bar.
    190     virtual Seconds animationRepeatIntervalForProgressBar(RenderProgress&) const;
     190    virtual Seconds animationRepeatIntervalForProgressBar(const RenderProgress&) const;
    191191    // Returns the duration of the animation for the progress bar.
    192     virtual Seconds animationDurationForProgressBar(RenderProgress&) const;
     192    virtual Seconds animationDurationForProgressBar(const RenderProgress&) const;
    193193    virtual IntRect progressBarRectForBounds(const RenderObject&, const IntRect&) const;
    194194

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

    r267009 r270065  
    303303}
    304304
    305 Seconds RenderThemeAdwaita::animationRepeatIntervalForProgressBar(RenderProgress&) const
     305Seconds RenderThemeAdwaita::animationRepeatIntervalForProgressBar(const RenderProgress&) const
    306306{
    307307    return progressAnimationFrameRate;
    308308}
    309309
    310 Seconds RenderThemeAdwaita::animationDurationForProgressBar(RenderProgress&) const
     310Seconds RenderThemeAdwaita::animationDurationForProgressBar(const RenderProgress&) const
    311311{
    312312    return progressAnimationFrameRate * progressAnimationFrameCount;

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

    r264298 r270065  
    7171    bool paintMenuListButtonDecorations(const RenderBox&, const PaintInfo&, const FloatRect&) final;
    7272
    73     Seconds animationRepeatIntervalForProgressBar(RenderProgress&) const final;
    74     Seconds animationDurationForProgressBar(RenderProgress&) const final;
     73    Seconds animationRepeatIntervalForProgressBar(const RenderProgress&) const final;
     74    Seconds animationDurationForProgressBar(const RenderProgress&) const final;
    7575    IntRect progressBarRectForBounds(const RenderObject&, const IntRect&) const final;
    7676    bool paintProgressBar(const RenderObject&, const PaintInfo&, const IntRect&) final;

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

    r269975 r270065  
    114114    bool paintCheckbox(const RenderObject&, const PaintInfo&, const IntRect&) override;
    115115    bool paintRadio(const RenderObject&, const PaintInfo&, const IntRect&) override;
     116
     117    Seconds animationRepeatIntervalForProgressBar(const RenderProgress&) const final;
     118    bool paintProgressBarFCR(const RenderObject&, const PaintInfo&, const IntRect&);
    116119#endif
    117120

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

    r269975 r270065  
    908908bool RenderThemeIOS::paintProgressBar(const RenderObject& renderer, const PaintInfo& paintInfo, const IntRect& rect)
    909909{
     910#if ENABLE(IOS_FORM_CONTROL_REFRESH)
     911    if (renderer.settings().iOSFormControlRefreshEnabled())
     912        return paintProgressBarFCR(renderer, paintInfo, rect);
     913#endif
     914
    910915    if (!is<RenderProgress>(renderer))
    911916        return true;
    … …  
    20702075}
    20712076
     2077// Animate the indeterminate progress bar at 30 fps. This value was chosen to
     2078// ensure a smooth animation, while trying to reduce the number of times the
     2079// progress bar is repainted.
     2080constexpr Seconds progressAnimationRepeatInterval = 33_ms;
     2081
     2082Seconds RenderThemeIOS::animationRepeatIntervalForProgressBar(const RenderProgress&) const
     2083{
     2084    return progressAnimationRepeatInterval;
     2085}
     2086
     2087bool RenderThemeIOS::paintProgressBarFCR(const RenderObject& renderer, const PaintInfo& paintInfo, const IntRect& rect)
     2088{
     2089    if (!is<RenderProgress>(renderer))
     2090        return true;
     2091    auto& renderProgress = downcast<RenderProgress>(renderer);
     2092
     2093    auto& context = paintInfo.context();
     2094    GraphicsContextStateSaver stateSaver(context);
     2095
     2096    constexpr auto barHeight = 4.0f;
     2097    FloatRoundedRect::Radii barCornerRadii(2.5f, 1.5f);
     2098
     2099    if (rect.height() < barHeight) {
     2100        // The rect is smaller than the standard progress bar. We clip to the
     2101        // element's rect to avoid leaking pixels outside the repaint rect.
     2102        context.clip(rect);
     2103    }
     2104
     2105    float barTop = rect.y() + (rect.height() - barHeight) / 2.0f;
     2106
     2107    FloatRect trackRect(rect.x(), barTop, rect.width(), barHeight);
     2108    FloatRoundedRect roundedTrackRect(trackRect, barCornerRadii);
     2109    context.fillRoundedRect(roundedTrackRect, controlBackgroundColor);
     2110
     2111    float barWidth;
     2112    float barLeft = rect.x();
     2113
     2114    if (renderProgress.isDeterminate()) {
     2115        barWidth = clampTo<float>(renderProgress.position(), 0.0f, 1.0f) * trackRect.width();
     2116
     2117        if (!renderProgress.style().isLeftToRightDirection())
     2118            barLeft = trackRect.maxX() - barWidth;
     2119    } else {
     2120        barWidth = 0.25f * trackRect.width();
     2121
     2122        Seconds elapsed = MonotonicTime::now() - renderProgress.animationStartTime();
     2123        float position = fmodf(elapsed.value(), 1.0f);
     2124        float offset = position * (trackRect.width() + barWidth);
     2125
     2126        bool reverseDirection = static_cast<int>(elapsed.value()) % 2;
     2127        if (reverseDirection)
     2128            barLeft = trackRect.maxX() - offset;
     2129        else
     2130            barLeft -= barWidth - offset;
     2131
     2132        context.clipRoundedRect(roundedTrackRect);
     2133    }
     2134
     2135    FloatRect barRect(barLeft, barTop, barWidth, barHeight);
     2136    context.fillRoundedRect(FloatRoundedRect(barRect, barCornerRadii), controlColor);
     2137
     2138    return false;
     2139}
     2140
    20722141#endif // ENABLE(IOS_FORM_CONTROL_REFRESH)
    20732142

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

    r269785 r270065  
    8989
    9090    // Returns the repeat interval of the animation for the progress bar.
    91     Seconds animationRepeatIntervalForProgressBar(RenderProgress&) const final;
     91    Seconds animationRepeatIntervalForProgressBar(const RenderProgress&) const final;
    9292    IntRect progressBarRectForBounds(const RenderObject&, const IntRect&) const final;
    9393

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

    r269869 r270065  
    116116@end
    117117
    118 static const Seconds progressAnimationFrameRate = 33_ms; // 30 fps
     118constexpr Seconds progressAnimationRepeatInterval = 33_ms; // 30 fps
    119119
    120120@interface WebCoreRenderThemeNotificationObserver : NSObject
    … …  
    13451345}
    13461346
    1347 Seconds RenderThemeMac::animationRepeatIntervalForProgressBar(RenderProgress&) const
    1348 {
    1349     return progressAnimationFrameRate;
     1347Seconds RenderThemeMac::animationRepeatIntervalForProgressBar(const RenderProgress&) const
     1348{
     1349    return progressAnimationRepeatInterval;
    13501350}
    13511351
Note: See TracChangeset for help on using the changeset viewer.