Skip to content

Commit

Permalink
ThemeAdwaita: checkbox, radio and inner spin button don't scale along…
Browse files Browse the repository at this point in the history 
… by page zoom

https://bugs.webkit.org/show_bug.cgi?id=246679

Reviewed by Carlos Garcia Campos.

ThemeAdwaita should scale controls based on a given zoom factor. Scale
buttons for input elements with type=number, type=checkbox, type=radio
and datalist, and select elements.

ThemeAdwaita::paintArrow painted a 16x16 arrow at (0, 0) position.
Change it to take a rect and paint an arrow at the center of the rect,
fitting to the smaller edge.

* Source/WebCore/platform/adwaita/ThemeAdwaita.cpp:
(WebCore::ThemeAdwaita::paintArrow):
(WebCore::ThemeAdwaita::controlSize const):
(WebCore::ThemeAdwaita::paintSpinButton):
* Source/WebCore/platform/adwaita/ThemeAdwaita.h:
* Source/WebCore/rendering/RenderThemeAdwaita.cpp:
(WebCore::RenderThemeAdwaita::paintTextField):
(WebCore::RenderThemeAdwaita::popupInternalPaddingBox const):
(WebCore::RenderThemeAdwaita::paintMenuList):
* LayoutTests/platform/gtk/transforms/2d/zoom-menulist-expected.png:
* LayoutTests/platform/gtk/transforms/2d/zoom-menulist-expected.txt:

Canonical link: https://commits.webkit.org/255820@main
  • Loading branch information
@fujii
fujii committed Oct 21, 2022
1 parent e1cd9d9 commit fbcbce2
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 49 deletions.
Binary file modified LayoutTests/platform/gtk/transforms/2d/zoom-menulist-expected.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions LayoutTests/platform/gtk/transforms/2d/zoom-menulist-expected.txt
View file
Expand Up @@ -7,8 +7,8 @@ layer at (0,0) size 800x600
RenderText {#text} at (0,0) size 272x36
text run at (0,0) width 272: "Zooming Menu List"
RenderBlock (anonymous) at (0,58) size 784x72
RenderMenuList {SELECT} at (0,0) size 158x71 [bgcolor=#FFFFFF] [border: (3px solid #000000)]
RenderBlock (anonymous) at (3,3) size 152x65
RenderMenuList {SELECT} at (0,0) size 190x71 [bgcolor=#FFFFFF] [border: (3px solid #000000)]
RenderBlock (anonymous) at (3,3) size 184x65
RenderText at (5,6) size 91x53
text run at (5,6) width 91: "One"
RenderText {#text} at (0,0) size 0x0
55 changes: 29 additions & 26 deletions Source/WebCore/platform/adwaita/ThemeAdwaita.cpp
View file
Expand Up @@ -132,19 +132,34 @@ void ThemeAdwaita::paintFocus(GraphicsContext& graphicsContext, const Vector<Flo
paintFocus(graphicsContext, path, color);
}

void ThemeAdwaita::paintArrow(GraphicsContext& graphicsContext, ArrowDirection direction, bool useDarkAppearance)
void ThemeAdwaita::paintArrow(GraphicsContext& graphicsContext, const FloatRect& rect, ArrowDirection direction, bool useDarkAppearance)
{
auto offset = rect.location();
float size;
if (rect.width() > rect.height()) {
size = rect.height();
offset.move((rect.width() - size) / 2, 0);
} else {
size = rect.width();
offset.move(0, (rect.height() - size) / 2);
}
float zoomFactor = size / arrowSize;
auto transform = [&](FloatPoint point) {
point.scale(zoomFactor);
point.moveBy(offset);
return point;
};
Path path;
switch (direction) {
case ArrowDirection::Down:
path.moveTo({ 3, 6 });
path.addLineTo({ 13, 6 });
path.addLineTo({ 8, 11 });
path.moveTo(transform({ 3, 6 }));
path.addLineTo(transform({ 13, 6 }));
path.addLineTo(transform({ 8, 11 }));
break;
case ArrowDirection::Up:
path.moveTo({ 3, 10 });
path.addLineTo({ 8, 5 });
path.addLineTo({ 13, 10});
path.moveTo(transform({ 3, 10 }));
path.addLineTo(transform({ 8, 5 }));
path.addLineTo(transform({ 13, 10 }));
break;
}
path.closeSubpath();
Expand All @@ -163,15 +178,15 @@ LengthSize ThemeAdwaita::controlSize(ControlPart part, const FontCascade& fontCa
case RadioPart: {
LengthSize buttonSize = zoomedSize;
if (buttonSize.width.isIntrinsicOrAuto())
buttonSize.width = Length(12, LengthType::Fixed);
buttonSize.width = Length(12 * zoomFactor, LengthType::Fixed);
if (buttonSize.height.isIntrinsicOrAuto())
buttonSize.height = Length(12, LengthType::Fixed);
buttonSize.height = Length(12 * zoomFactor, LengthType::Fixed);
return buttonSize;
}
case InnerSpinButtonPart: {
LengthSize spinButtonSize = zoomedSize;
if (spinButtonSize.width.isIntrinsicOrAuto())
spinButtonSize.width = Length(static_cast<int>(arrowSize), LengthType::Fixed);
spinButtonSize.width = Length(static_cast<int>(arrowSize * zoomFactor), LengthType::Fixed);
if (spinButtonSize.height.isIntrinsicOrAuto() || fontCascade.pixelSize() > static_cast<int>(arrowSize))
spinButtonSize.height = Length(fontCascade.pixelSize(), LengthType::Fixed);
return spinButtonSize;
Expand Down Expand Up @@ -492,14 +507,7 @@ void ThemeAdwaita::paintSpinButton(ControlStates& states, GraphicsContext& graph
path.clear();
}

GraphicsContextStateSaver buttonStateSaver(graphicsContext);
if (buttonRect.height() > arrowSize)
graphicsContext.translate(buttonRect.x(), buttonRect.y() + (buttonRect.height() / 2.0) - (arrowSize / 2.));
else {
graphicsContext.translate(buttonRect.x(), buttonRect.y());
graphicsContext.scale(FloatSize::narrowPrecision(buttonRect.width() / arrowSize, buttonRect.height() / arrowSize));
}
paintArrow(graphicsContext, ArrowDirection::Up, useDarkAppearance);
paintArrow(graphicsContext, buttonRect, ArrowDirection::Up, useDarkAppearance);
}

buttonRect.move(0, buttonRect.height());
Expand All @@ -510,18 +518,13 @@ void ThemeAdwaita::paintSpinButton(ControlStates& states, GraphicsContext& graph
graphicsContext.setFillColor(spinButtonBackgroundPressedColor);
else if (states.states().contains(ControlStates::States::Hovered))
graphicsContext.setFillColor(spinButtonBackgroundHoveredColor);
else
graphicsContext.setFillColor(spinButtonBackgroundColor);
graphicsContext.fillPath(path);
path.clear();
}

GraphicsContextStateSaver buttonStateSaver(graphicsContext);
if (buttonRect.height() > arrowSize)
graphicsContext.translate(buttonRect.x(), buttonRect.y() + (buttonRect.height() / 2.0) - (arrowSize / 2.));
else {
graphicsContext.translate(buttonRect.x(), buttonRect.y());
graphicsContext.scale(FloatSize::narrowPrecision(buttonRect.width() / arrowSize, buttonRect.height() / arrowSize));
}
paintArrow(graphicsContext, ArrowDirection::Down, useDarkAppearance);
paintArrow(graphicsContext, buttonRect, ArrowDirection::Down, useDarkAppearance);
}
}

Expand Down
2 changes: 1 addition & 1 deletion Source/WebCore/platform/adwaita/ThemeAdwaita.h
View file
Expand Up @@ -41,7 +41,7 @@ class ThemeAdwaita : public Theme {
static void paintFocus(GraphicsContext&, const Path&, const Color&);
static void paintFocus(GraphicsContext&, const Vector<FloatRect>&, const Color&, PaintRounded = PaintRounded::No);
enum class ArrowDirection { Up, Down };
static void paintArrow(GraphicsContext&, ArrowDirection, bool);
static void paintArrow(GraphicsContext&, const FloatRect&, ArrowDirection, bool);

virtual void platformColorsDidChange() { };

Expand Down
33 changes: 13 additions & 20 deletions Source/WebCore/rendering/RenderThemeAdwaita.cpp
View file
Expand Up @@ -354,18 +354,14 @@ bool RenderThemeAdwaita::paintTextField(const RenderObject& renderObject, const

#if ENABLE(DATALIST_ELEMENT)
if (is<HTMLInputElement>(renderObject.generatingNode()) && downcast<HTMLInputElement>(*(renderObject.generatingNode())).list()) {
auto zoomedArrowSize = menuListButtonArrowSize * renderObject.style().effectiveZoom();
FloatRect arrowRect = rect;
if (renderObject.style().direction() == TextDirection::LTR)
arrowRect.move(arrowRect.width() - (menuListButtonArrowSize + textFieldBorderSize * 2), (arrowRect.height() / 2.) - (menuListButtonArrowSize / 2.));
arrowRect.move(arrowRect.width() - (zoomedArrowSize + textFieldBorderSize * 2), 0);
else
fieldRect.move(textFieldBorderSize * 2, (arrowRect.height() / 2.) - (menuListButtonArrowSize / 2.));
arrowRect.setWidth(menuListButtonArrowSize);
arrowRect.setHeight(menuListButtonArrowSize);
{
GraphicsContextStateSaver arrowStateSaver(graphicsContext);
graphicsContext.translate(arrowRect.x(), arrowRect.y());
ThemeAdwaita::paintArrow(graphicsContext, ThemeAdwaita::ArrowDirection::Down, renderObject.useDarkAppearance());
}
fieldRect.move(textFieldBorderSize * 2, 0);
arrowRect.setWidth(zoomedArrowSize);
ThemeAdwaita::paintArrow(graphicsContext, arrowRect, ThemeAdwaita::ArrowDirection::Down, renderObject.useDarkAppearance());
}
#endif

Expand Down Expand Up @@ -417,8 +413,9 @@ LengthBox RenderThemeAdwaita::popupInternalPaddingBox(const RenderStyle& style,
if (style.effectiveAppearance() == NoControlPart)
return { };

int leftPadding = menuListButtonPadding + (style.direction() == TextDirection::RTL ? menuListButtonArrowSize : 0);
int rightPadding = menuListButtonPadding + (style.direction() == TextDirection::LTR ? menuListButtonArrowSize : 0);
auto zoomedArrowSize = menuListButtonArrowSize * style.effectiveZoom();
int leftPadding = menuListButtonPadding + (style.direction() == TextDirection::RTL ? zoomedArrowSize : 0);
int rightPadding = menuListButtonPadding + (style.direction() == TextDirection::LTR ? zoomedArrowSize : 0);

return { menuListButtonPadding, rightPadding, menuListButtonPadding, leftPadding };
}
Expand All @@ -438,19 +435,15 @@ bool RenderThemeAdwaita::paintMenuList(const RenderObject& renderObject, const P
ControlStates controlStates(states);
Theme::singleton().paint(ButtonPart, controlStates, graphicsContext, rect, 1., nullptr, 1., 1., false, renderObject.useDarkAppearance(), renderObject.style().effectiveAccentColor());

auto zoomedArrowSize = menuListButtonArrowSize * renderObject.style().effectiveZoom();
FloatRect fieldRect = rect;
fieldRect.inflate(menuListButtonBorderSize);
if (renderObject.style().direction() == TextDirection::LTR)
fieldRect.move(fieldRect.width() - (menuListButtonArrowSize + menuListButtonPadding), (fieldRect.height() / 2.) - (menuListButtonArrowSize / 2));
fieldRect.move(fieldRect.width() - (zoomedArrowSize + menuListButtonPadding), 0);
else
fieldRect.move(menuListButtonPadding, (fieldRect.height() / 2.) - (menuListButtonArrowSize / 2));
fieldRect.setWidth(menuListButtonArrowSize);
fieldRect.setHeight(menuListButtonArrowSize);
{
GraphicsContextStateSaver arrowStateSaver(graphicsContext);
graphicsContext.translate(fieldRect.x(), fieldRect.y());
ThemeAdwaita::paintArrow(graphicsContext, ThemeAdwaita::ArrowDirection::Down, renderObject.useDarkAppearance());
}
fieldRect.move(menuListButtonPadding, 0);
fieldRect.setWidth(zoomedArrowSize);
ThemeAdwaita::paintArrow(graphicsContext, fieldRect, ThemeAdwaita::ArrowDirection::Down, renderObject.useDarkAppearance());

if (isFocused(renderObject))
ThemeAdwaita::paintFocus(graphicsContext, rect, menuListButtonFocusOffset, platformFocusRingColor({ }));
Expand Down

0 comments on commit fbcbce2

Please sign in to comment.