Changeset 149624 in webkit


Ignore:
Timestamp:
May 6, 2013 12:13:30 PM (11 years ago)
Author:
commit-queue@webkit.org
Message:

[BlackBerry] Update HTML5 progress bar UX.
​https://bugs.webkit.org/show_bug.cgi?id=115284.

Patch by Tiancheng Jiang <​tijiang@rim.com> on 2013-05-06
Reviewed by Rob Buis.

BlackBerry PR 331729.
Internally Reviewed by Jeff Rogers.

Use GL render to paint progress bar to meet UX specs.
Also change the slider range to GL render.

  • platform/blackberry/RenderThemeBlackBerry.cpp:

(WebCore):
(WebCore::RenderThemeBlackBerry::paintSliderTrack):
(WebCore::RenderThemeBlackBerry::paintProgressTrackRect):
(WebCore::drawProgressTexture):
(WebCore::RenderThemeBlackBerry::paintProgressBar):

  • platform/blackberry/RenderThemeBlackBerry.h:

(RenderThemeBlackBerry):

Location:
trunk/Source/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r149623 r149624  
     12013-05-06  Tiancheng Jiang  <tijiang@rim.com>
     2
     3        [BlackBerry] Update HTML5 progress bar UX.
     4        https://bugs.webkit.org/show_bug.cgi?id=115284.
     5
     6        Reviewed by Rob Buis.
     7
     8        BlackBerry PR 331729.
     9        Internally Reviewed by Jeff Rogers.
     10
     11        Use GL render to paint progress bar to meet UX specs.
     12        Also change the slider range to GL render.
     13
     14        * platform/blackberry/RenderThemeBlackBerry.cpp:
     15        (WebCore):
     16        (WebCore::RenderThemeBlackBerry::paintSliderTrack):
     17        (WebCore::RenderThemeBlackBerry::paintProgressTrackRect):
     18        (WebCore::drawProgressTexture):
     19        (WebCore::RenderThemeBlackBerry::paintProgressBar):
     20        * platform/blackberry/RenderThemeBlackBerry.h:
     21        (RenderThemeBlackBerry):
     22
    1232013-05-06  Bem Jones-Bey  <bjonesbe@adobe.com>
    224

  • trunk/Source/WebCore/platform/blackberry/RenderThemeBlackBerry.cpp

    r149614 r149624  
    4444
    4545// Sizes (unit px)
    46 const unsigned smallRadius = 1;
    47 const unsigned largeRadius = 3;
    48 const unsigned lineWidth = 1;
    49 const float marginSize = 4;
     46const float progressMinWidth = 16;
     47const float progressTextureUnitWidth = 9.0;
    5048const float mediaControlsHeight = 44;
    5149const float mediaBackButtonHeight = 33;
    … …  
    6159const float sliderThumbHeight = 25;
    6260
    63 // Checkbox check scalers
    64 const float checkboxLeftX = 7 / 40.0;
    65 const float checkboxLeftY = 1 / 2.0;
    66 const float checkboxMiddleX = 19 / 50.0;
    67 const float checkboxMiddleY = 7 / 25.0;
    68 const float checkboxRightX = 33 / 40.0;
    69 const float checkboxRightY = 1 / 5.0;
    70 const float checkboxStrokeThickness = 6.5;
    71 
    72 // Radio button scaler
    73 const float radioButtonCheckStateScaler = 7 / 30.0;
    74 
    7561// Multipliers
    7662const unsigned paddingDivisor = 10;
    … …  
    9379
    9480// Colors
    95 const RGBA32 caretBottom = 0xff2163bf;
    96 const RGBA32 caretTop = 0xff69a5fa;
    97 
    98 const RGBA32 regularBottom = 0xffdcdee4;
    99 const RGBA32 regularTop = 0xfff7f2ee;
    100 const RGBA32 hoverBottom = 0xffb5d3fc;
    101 const RGBA32 hoverTop = 0xffcceaff;
    102 const RGBA32 depressedBottom = 0xff3388ff;
    103 const RGBA32 depressedTop = 0xff66a0f2;
    104 const RGBA32 disabledBottom = 0xffe7e7e7;
    105 const RGBA32 disabledTop = 0xffefefef;
    106 
    107 const RGBA32 regularBottomOutline = 0xff6e7073;
    108 const RGBA32 regularTopOutline = 0xffb9b8b8;
    109 const RGBA32 hoverBottomOutline = 0xff2163bf;
    110 const RGBA32 hoverTopOutline = 0xff69befa;
    111 const RGBA32 depressedBottomOutline = 0xff0c3d81;
    112 const RGBA32 depressedTopOutline = 0xff1d4d70;
    113 const RGBA32 disabledOutline = 0xffd5d9de;
    114 
    115 const RGBA32 progressRegularBottom = caretTop;
    116 const RGBA32 progressRegularTop = caretBottom;
    117 
    118 const RGBA32 rangeSliderRegularBottom = 0xfff6f2ee;
    119 const RGBA32 rangeSliderRegularTop = 0xffdee0e5;
    120 const RGBA32 rangeSliderRollBottom = 0xffc9e8fe;
    121 const RGBA32 rangeSliderRollTop = 0xffb5d3fc;
    122 
    123 const RGBA32 rangeSliderRegularBottomOutline = 0xffb9babd;
    124 const RGBA32 rangeSliderRegularTopOutline = 0xffb7b7b7;
    125 const RGBA32 rangeSliderRollBottomOutline = 0xff67abe0;
    126 const RGBA32 rangeSliderRollTopOutline = 0xff69adf9;
    127 
    128 const RGBA32 dragRegularLight = 0xfffdfdfd;
    129 const RGBA32 dragRegularDark = 0xffbababa;
    130 const RGBA32 dragRollLight = 0xfff2f2f2;
    131 const RGBA32 dragRollDark = 0xff69a8ff;
    132 
    133 const RGBA32 blackPen = Color::black;
    13481const RGBA32 focusRingPen = 0xffa3c8fe;
    135 
    136 const RGBA32 mediaSliderTrackOutline = 0xff848587;
    137 const RGBA32 mediaSliderTrackPlayed = 0xff2b8fff;
    138 const RGBA32 mediaSliderTrackBuffered = 0xffbbbdbf;
    139 
    140 const RGBA32 selection = 0xff2b8fff;
    14182
    14283float RenderThemeBlackBerry::defaultFontSize = 16;
    … …  
    14687    DEFINE_STATIC_LOCAL(String, fontFace, (ASCIILiteral("Slate Pro")));
    14788    return fontFace;
    148 }
    149 
    150 static PassRefPtr<Gradient> createLinearGradient(RGBA32 top, RGBA32 bottom, const IntPoint& a, const IntPoint& b)
    151 {
    152     RefPtr<Gradient> gradient = Gradient::create(a, b);
    153     gradient->addColorStop(0.0, Color(top));
    154     gradient->addColorStop(1.0, Color(bottom));
    155     return gradient.release();
    15689}
    15790
    … …  
    733666        rect2.setY(rect.y());
    734667    }
    735     return paintSliderTrackRect(object, info, rect2);
    736 }
    737 
    738 bool RenderThemeBlackBerry::paintSliderTrackRect(RenderObject* object, const PaintInfo& info, const IntRect& rect)
    739 {
    740     return paintSliderTrackRect(object, info, rect, rangeSliderRegularTopOutline, rangeSliderRegularBottomOutline, rangeSliderRegularTop, rangeSliderRegularBottom);
    741 }
    742 
    743 bool RenderThemeBlackBerry::paintSliderTrackRect(RenderObject* object, const PaintInfo& info, const IntRect& rect, RGBA32 strokeColorStart, RGBA32 strokeColorEnd, RGBA32 fillColorStart, RGBA32 fillColorEnd)
    744 {
    745     FloatSize smallCorner(mediaSliderTrackRadius, mediaSliderTrackRadius);
    746 
    747     info.context->save();
    748     info.context->setStrokeStyle(SolidStroke);
    749     info.context->setStrokeThickness(lineWidth);
    750 
    751 #if USE(SKIA)
    752     info.context->setStrokeGradient(createLinearGradient(strokeColorStart, strokeColorEnd, rect.maxXMinYCorner(), rect.maxXMaxYCorner()));
    753     info.context->setFillGradient(createLinearGradient(fillColorStart, fillColorEnd, rect.maxXMinYCorner(), rect.maxXMaxYCorner()));
    754 #else
    755     info.context->setStrokeColor(strokeColorStart, ColorSpaceDeviceRGB);
    756     info.context->setFillColor(fillColorStart, ColorSpaceDeviceRGB);
    757 #endif
    758 
    759     Path path;
    760     path.addRoundedRect(rect, smallCorner);
    761     info.context->fillPath(path);
    762 
    763     info.context->restore();
    764     return false;
     668    static Image* sliderTrack = Image::loadPlatformResource("core_slider_bg").leakRef();
     669    return paintSliderTrackRect(object, info, rect2, sliderTrack);
    765670}
    766671
    … …  
    11761081}
    11771082
     1083bool RenderThemeBlackBerry::paintProgressTrackRect(const PaintInfo& info, const IntRect& rect, Image* image)
     1084{
     1085    ASSERT(info.context);
     1086    info.context->save();
     1087    GraphicsContext* context = info.context;
     1088    drawThreeSliceHorizontal(context, rect, image, mediumSlice);
     1089    context->restore();
     1090    return false;
     1091}
     1092
     1093static void drawProgressTexture(GraphicsContext* gc, const FloatRect& rect, int n, Image* image)
     1094{
     1095    if (!image)
     1096        return;
     1097    float finalTexturePercentage = (int(rect.width()) % int(progressTextureUnitWidth)) / progressTextureUnitWidth;
     1098    FloatSize dstSlice(progressTextureUnitWidth, rect.height() - 2);
     1099    FloatRect srcRect(1, 2, image->width() - 2, image->height() - 4);
     1100    FloatRect dstRect(FloatPoint(rect.location().x() + 1, rect.location().y() + 1), dstSlice);
     1101
     1102    for (int i = 0; i < n; i++) {
     1103        gc->drawImage(image, ColorSpaceDeviceRGB, dstRect, srcRect);
     1104        dstRect.move(dstSlice.width(), 0);
     1105    }
     1106    if (finalTexturePercentage) {
     1107        srcRect.setWidth(srcRect.width() * finalTexturePercentage * finalTexturePercentage);
     1108        dstRect.setWidth(dstRect.width() * finalTexturePercentage * finalTexturePercentage);
     1109        gc->drawImage(image, ColorSpaceDeviceRGB, dstRect, srcRect);
     1110    }
     1111}
     1112
    11781113bool RenderThemeBlackBerry::paintProgressBar(RenderObject* object, const PaintInfo& info, const IntRect& rect)
    11791114{
    … …  
    11831118    RenderProgress* renderProgress = toRenderProgress(object);
    11841119
    1185     FloatSize smallCorner(smallRadius, smallRadius);
    1186 
    1187     info.context->save();
    1188     info.context->setStrokeStyle(SolidStroke);
    1189     info.context->setStrokeThickness(lineWidth);
    1190 
    1191     info.context->setStrokeGradient(createLinearGradient(rangeSliderRegularTopOutline, rangeSliderRegularBottomOutline, rect.maxXMinYCorner(), rect.maxXMaxYCorner()));
    1192     info.context->setFillGradient(createLinearGradient(rangeSliderRegularTop, rangeSliderRegularBottom, rect.maxXMinYCorner(), rect.maxXMaxYCorner()));
    1193 
    1194     Path path;
    1195     path.addRoundedRect(rect, smallCorner);
    1196     info.context->fillPath(path);
    1197 
    1198     IntRect rect2 = rect;
    1199     rect2.setX(rect2.x() + 1);
    1200     rect2.setHeight(rect2.height() - 2);
    1201     rect2.setY(rect2.y() + 1);
    1202     info.context->setStrokeStyle(NoStroke);
    1203     info.context->setStrokeThickness(0);
    1204     if (renderProgress->isDeterminate()) {
    1205         rect2.setWidth(rect2.width() * renderProgress->position() - 2);
    1206         info.context->setFillGradient(createLinearGradient(progressRegularTop, progressRegularBottom, rect2.maxXMinYCorner(), rect2.maxXMaxYCorner()));
    1207     } else {
     1120    static Image* progressTrack = Image::loadPlatformResource("core_progressindicator_bg").leakRef();
     1121    static Image* progressBar = Image::loadPlatformResource("core_progressindicator_progress").leakRef();
     1122    static Image* progressPattern = Image::loadPlatformResource("core_progressindicator_pattern").leakRef();
     1123    static Image* progressComplete = Image::loadPlatformResource("core_progressindicator_complete").leakRef();
     1124
     1125    paintProgressTrackRect(info, rect, progressTrack);
     1126
     1127    IntRect progressRect = rect;
     1128    progressRect.setX(progressRect.x() + 1);
     1129    progressRect.setHeight(progressRect.height() - 2);
     1130    progressRect.setY(progressRect.y() + 1);
     1131
     1132    if (renderProgress->isDeterminate())
     1133        progressRect.setWidth((progressRect.width() - progressMinWidth) * renderProgress->position() + progressMinWidth - 2);
     1134    else {
    12081135        // Animating
    1209         rect2.setWidth(rect2.width() - 2);
    1210         RefPtr<Gradient> gradient = Gradient::create(rect2.minXMaxYCorner(), rect2.maxXMaxYCorner());
    1211         gradient->addColorStop(0.0, Color(progressRegularBottom));
    1212         gradient->addColorStop(renderProgress->animationProgress(), Color(progressRegularTop));
    1213         gradient->addColorStop(1.0, Color(progressRegularBottom));
    1214         info.context->setFillGradient(gradient);
    1215     }
    1216     Path path2;
    1217     path2.addRoundedRect(rect2, smallCorner);
    1218     info.context->fillPath(path2);
    1219 
    1220     info.context->restore();
     1136        progressRect.setWidth(progressRect.width() - 2);
     1137    }
     1138
     1139    if (renderProgress->position() < 1) {
     1140        paintProgressTrackRect(info, progressRect, progressBar);
     1141        int loop = floor((progressRect.width() - 2) / progressTextureUnitWidth);
     1142        progressRect.setWidth(progressRect.width() - 2);
     1143        drawProgressTexture(info.context, progressRect, loop, progressPattern);
     1144    } else
     1145        paintProgressTrackRect(info, progressRect, progressComplete);
     1146
    12211147    return false;
    12221148}

  • trunk/Source/WebCore/platform/blackberry/RenderThemeBlackBerry.h

    r149614 r149624  
    117117    bool paintTextFieldOrTextAreaOrSearchField(RenderObject*, const PaintInfo&, const IntRect&);
    118118
    119     bool paintSliderTrackRect(RenderObject*, const PaintInfo&, const IntRect&);
     119    bool paintSliderTrackRect(RenderObject*, const PaintInfo&, const IntRect&, Image*);
    120120
    121     bool paintSliderTrackRect(RenderObject*, const PaintInfo&, const IntRect&, RGBA32, RGBA32, RGBA32, RGBA32);
    122 
    123     bool paintSliderTrackRect(RenderObject*, const PaintInfo&, const IntRect&, Image*);
     121    bool paintProgressTrackRect(const PaintInfo&, const IntRect&, Image*);
    124122
    125123    IntRect convertToPaintingRect(RenderObject* inputRenderer, const RenderObject* partRenderer, LayoutRect partRect, const IntRect& localOffset) const;
Note: See TracChangeset for help on using the changeset viewer.