Title: [197998] trunk/Source/WebCore
Revision
197998
Author
[email protected]
Date
2016-03-10 23:05:01 -0800 (Thu, 10 Mar 2016)

Log Message

[GTK] Fix rendering of slider input elements
https://bugs.webkit.org/show_bug.cgi?id=155296

Reviewed by Michael Catanzaro.

Use the new gadgets for newer GTK+ and improve a bit the rendering
for previous versions to better match GTK+.

* rendering/RenderThemeGtk.cpp:
(WebCore::createStyleContext): Add ScaleContents and
ScaleHighlight parts that are only used with GTK+ 3.19.
(WebCore::RenderThemeGtk::paintSliderTrack): Use a smaller trough,
centered in the given rectangle to better match GTK+. Also render
the hightlight gadget with GTK+ 3.19.
(WebCore::RenderThemeGtk::paintSliderThumb): Also create the style
context for contents gadget.
(WebCore::RenderThemeGtk::adjustSliderThumbSize): Take into
account the slider border when calculating the slider thumb size.

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (197997 => 197998)


--- trunk/Source/WebCore/ChangeLog	2016-03-11 06:59:57 UTC (rev 197997)
+++ trunk/Source/WebCore/ChangeLog	2016-03-11 07:05:01 UTC (rev 197998)
@@ -1,5 +1,26 @@
 2016-03-10  Carlos Garcia Campos  <[email protected]>
 
+        [GTK] Fix rendering of slider input elements
+        https://bugs.webkit.org/show_bug.cgi?id=155296
+
+        Reviewed by Michael Catanzaro.
+
+        Use the new gadgets for newer GTK+ and improve a bit the rendering
+        for previous versions to better match GTK+.
+
+        * rendering/RenderThemeGtk.cpp:
+        (WebCore::createStyleContext): Add ScaleContents and
+        ScaleHighlight parts that are only used with GTK+ 3.19.
+        (WebCore::RenderThemeGtk::paintSliderTrack): Use a smaller trough,
+        centered in the given rectangle to better match GTK+. Also render
+        the hightlight gadget with GTK+ 3.19.
+        (WebCore::RenderThemeGtk::paintSliderThumb): Also create the style
+        context for contents gadget.
+        (WebCore::RenderThemeGtk::adjustSliderThumbSize): Take into
+        account the slider border when calculating the slider thumb size.
+
+2016-03-10  Carlos Garcia Campos  <[email protected]>
+
         [GTK] Scrollbars are broken once again with current GTK+ master
         https://bugs.webkit.org/show_bug.cgi?id=155292
 

Modified: trunk/Source/WebCore/rendering/RenderThemeGtk.cpp (197997 => 197998)


--- trunk/Source/WebCore/rendering/RenderThemeGtk.cpp	2016-03-11 06:59:57 UTC (rev 197997)
+++ trunk/Source/WebCore/rendering/RenderThemeGtk.cpp	2016-03-11 07:05:01 UTC (rev 197998)
@@ -152,8 +152,10 @@
     ComboBoxButton,
     ComboBoxArrow,
     Scale,
+    ScaleContents,
     ScaleTrough,
     ScaleSlider,
+    ScaleHighlight,
     ProgressBar,
     ProgressBarTrough,
     ProgressBarProgress,
@@ -281,6 +283,15 @@
         gtk_widget_path_iter_add_class(path.get(), -1, GTK_STYLE_CLASS_SCALE);
 #endif
         break;
+    case ScaleContents:
+#if GTK_CHECK_VERSION(3, 19, 11)
+        gtk_widget_path_append_type(path.get(), GTK_TYPE_SCALE);
+        gtk_widget_path_iter_set_object_name(path.get(), -1, "contents");
+        gtk_widget_path_iter_add_class(path.get(), -1, GTK_STYLE_CLASS_SCALE);
+#else
+        ASSERT_NOT_REACHED();
+#endif
+        break;
     case ScaleTrough:
         gtk_widget_path_append_type(path.get(), GTK_TYPE_SCALE);
 #if GTK_CHECK_VERSION(3, 19, 2)
@@ -299,6 +310,15 @@
         gtk_widget_path_iter_add_class(path.get(), -1, GTK_STYLE_CLASS_SLIDER);
 #endif
         break;
+    case ScaleHighlight:
+#if GTK_CHECK_VERSION(3, 19, 11)
+        gtk_widget_path_append_type(path.get(), GTK_TYPE_SCALE);
+        gtk_widget_path_iter_set_object_name(path.get(), -1, "highlight");
+        gtk_widget_path_iter_add_class(path.get(), -1, GTK_STYLE_CLASS_SCALE);
+#else
+        ASSERT_NOT_REACHED();
+#endif
+        break;
     case ProgressBar:
         gtk_widget_path_append_type(path.get(), GTK_TYPE_PROGRESS_BAR);
 #if GTK_CHECK_VERSION(3, 19, 2)
@@ -1074,23 +1094,62 @@
 bool RenderThemeGtk::paintSliderTrack(const RenderObject& renderObject, const PaintInfo& paintInfo, const IntRect& rect)
 {
     ControlPart part = renderObject.style().appearance();
-    ASSERT_UNUSED(part, part == SliderHorizontalPart || part == SliderVerticalPart);
+    ASSERT(part == SliderHorizontalPart || part == SliderVerticalPart);
 
     GRefPtr<GtkStyleContext> parentContext = createStyleContext(Scale);
     gtk_style_context_add_class(parentContext.get(), part == SliderHorizontalPart ? GTK_STYLE_CLASS_HORIZONTAL : GTK_STYLE_CLASS_VERTICAL);
+#if GTK_CHECK_VERSION(3, 19, 11)
+    GRefPtr<GtkStyleContext> contentsContext = createStyleContext(ScaleContents, parentContext.get());
+    GRefPtr<GtkStyleContext> context = createStyleContext(ScaleTrough, contentsContext.get());
+#else
     GRefPtr<GtkStyleContext> context = createStyleContext(ScaleTrough, parentContext.get());
+#endif
     gtk_style_context_set_direction(context.get(), gtkTextDirection(renderObject.style().direction()));
 
     if (!isEnabled(renderObject))
         gtk_style_context_set_state(context.get(), GTK_STATE_FLAG_INSENSITIVE);
 
-    gtk_render_background(context.get(), paintInfo.context().platformContext()->cr(), rect.x(), rect.y(), rect.width(), rect.height());
-    gtk_render_frame(context.get(), paintInfo.context().platformContext()->cr(), rect.x(), rect.y(), rect.width(), rect.height());
+    IntRect sliderRect = rect;
+    // GTK+ uses the slider thumb size and margins to calculate the trough size, but in WebKit we render the thumb and
+    // the slider track separately and the track rectangle we receive here can't be used to apply the GTK+ CSS sizes
+    // and margins. So we use a maximum fixed size for the trough to match at least Adwaita, but that should look
+    // good in other themes as well.
+    static const int sliderSize = 4;
 
+    if (part == SliderHorizontalPart) {
+        sliderRect.setHeight(std::min(rect.height(), sliderSize));
+        sliderRect.move(0, (rect.height() - sliderRect.height()) / 2);
+    } else {
+        sliderRect.setWidth(std::min(rect.width(), sliderSize));
+        sliderRect.move((rect.width() - sliderRect.width()) / 2, 0);
+    }
+
+    gtk_render_background(context.get(), paintInfo.context().platformContext()->cr(), sliderRect.x(), sliderRect.y(), sliderRect.width(), sliderRect.height());
+    gtk_render_frame(context.get(), paintInfo.context().platformContext()->cr(), sliderRect.x(), sliderRect.y(), sliderRect.width(), sliderRect.height());
+
+#if GTK_CHECK_VERSION(3, 19, 11)
+    GRefPtr<GtkStyleContext> highlightContext = createStyleContext(ScaleHighlight, context.get());
+    LayoutPoint thumbLocation;
+    if (is<HTMLInputElement>(renderObject.node())) {
+        auto& input = downcast<HTMLInputElement>(*renderObject.node());
+        if (auto* element = input.sliderThumbElement())
+            thumbLocation = element->renderBox()->location();
+    }
+
+    IntRect highlightRect = sliderRect;
+    if (part == SliderHorizontalPart)
+        highlightRect.setWidth(thumbLocation.x());
+    else
+        highlightRect.setHeight(thumbLocation.y());
+
+    gtk_render_background(highlightContext.get(), paintInfo.context().platformContext()->cr(), highlightRect.x(), highlightRect.y(), highlightRect.width(), highlightRect.height());
+    gtk_render_frame(highlightContext.get(), paintInfo.context().platformContext()->cr(), highlightRect.x(), highlightRect.y(), highlightRect.width(), highlightRect.height());
+#endif
+
     if (isFocused(renderObject)) {
         gint focusWidth, focusPad;
         gtk_style_context_get_style(context.get(), "focus-line-width", &focusWidth, "focus-padding", &focusPad, nullptr);
-        IntRect focusRect(rect);
+        IntRect focusRect(sliderRect);
         focusRect.inflate(focusWidth + focusPad);
         gtk_render_focus(context.get(), paintInfo.context().platformContext()->cr(), focusRect.x(), focusRect.y(), focusRect.width(), focusRect.height());
     }
@@ -1106,7 +1165,12 @@
     // FIXME: The entire slider is too wide, stretching the thumb into an oval rather than a circle.
     GRefPtr<GtkStyleContext> parentContext = createStyleContext(Scale);
     gtk_style_context_add_class(parentContext.get(), part == SliderThumbHorizontalPart ? GTK_STYLE_CLASS_HORIZONTAL : GTK_STYLE_CLASS_VERTICAL);
+#if GTK_CHECK_VERSION(3, 19, 11)
+    GRefPtr<GtkStyleContext> contentsContext = createStyleContext(ScaleContents, parentContext.get());
+    GRefPtr<GtkStyleContext> troughContext = createStyleContext(ScaleTrough, contentsContext.get());
+#else
     GRefPtr<GtkStyleContext> troughContext = createStyleContext(ScaleTrough, parentContext.get());
+#endif
     GRefPtr<GtkStyleContext> context = createStyleContext(ScaleSlider, troughContext.get());
     gtk_style_context_set_direction(context.get(), gtkTextDirection(renderObject.style().direction()));
 
@@ -1133,7 +1197,18 @@
 
     GRefPtr<GtkStyleContext> context = createStyleContext(Scale);
     gint sliderWidth, sliderLength;
+#if GTK_CHECK_VERSION(3, 19, 11)
+    GRefPtr<GtkStyleContext> contentsContext = createStyleContext(ScaleContents, context.get());
+    GRefPtr<GtkStyleContext> troughContext = createStyleContext(ScaleTrough, contentsContext.get());
+    GRefPtr<GtkStyleContext> sliderContext = createStyleContext(ScaleSlider, troughContext.get());
+    gtk_style_context_get(sliderContext.get(), gtk_style_context_get_state(sliderContext.get()), "min-width", &sliderWidth, "min-height", &sliderLength, nullptr);
+    GtkBorder border;
+    gtk_style_context_get_border(sliderContext.get(), gtk_style_context_get_state(sliderContext.get()), &border);
+    sliderWidth += border.left + border.right;
+    sliderLength += border.top + border.bottom;
+#else
     gtk_style_context_get_style(context.get(), "slider-width", &sliderWidth, "slider-length", &sliderLength, nullptr);
+#endif
     if (part == SliderThumbHorizontalPart) {
         style.setWidth(Length(sliderLength, Fixed));
         style.setHeight(Length(sliderWidth, Fixed));
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to