LibGUI+LibGfx: Make scrollbar buttons a little bit thicker

The common thin-cap button look (1px highlight, 2px shadow) looks nice
on regular buttons, but the scrollbar didn't feel quite right.
This patch adds 1px of offset to the highlight, giving it a thick-cap
look (which I have named Gfx::ButtonStyle::ThickCap) :^)

3 files changed, 14 insertions, 8 deletions

diff --git a/Userland/Libraries/LibGUI/Scrollbar.cpp b/Userland/Libraries/LibGUI/Scrollbar.cpp
index f9da67dacb..88744deaa7 100644
--- a/Userland/Libraries/LibGUI/Scrollbar.cpp
+++ b/Userland/Libraries/LibGUI/Scrollbar.cpp
@@ -178,8 +178,8 @@ void Scrollbar::paint_event(PaintEvent& event)
     bool decrement_pressed = (m_pressed_component == Component::DecrementButton) && (m_pressed_component == m_hovered_component);
     bool increment_pressed = (m_pressed_component == Component::IncrementButton) && (m_pressed_component == m_hovered_component);
 
-    Gfx::StylePainter::paint_button(painter, decrement_button_rect(), palette(), Gfx::ButtonStyle::Normal, decrement_pressed, hovered_component_for_painting == Component::DecrementButton);
-    Gfx::StylePainter::paint_button(painter, increment_button_rect(), palette(), Gfx::ButtonStyle::Normal, increment_pressed, hovered_component_for_painting == Component::IncrementButton);
+    Gfx::StylePainter::paint_button(painter, decrement_button_rect(), palette(), Gfx::ButtonStyle::ThickCap, decrement_pressed, hovered_component_for_painting == Component::DecrementButton);
+    Gfx::StylePainter::paint_button(painter, increment_button_rect(), palette(), Gfx::ButtonStyle::ThickCap, increment_pressed, hovered_component_for_painting == Component::IncrementButton);
 
     if (length(orientation()) > default_button_size()) {
         auto decrement_location = decrement_button_rect().location().translated(3, 3);
@@ -198,7 +198,7 @@ void Scrollbar::paint_event(PaintEvent& event)
     }
 
     if (has_scrubber())
-        Gfx::StylePainter::paint_button(painter, scrubber_rect(), palette(), Gfx::ButtonStyle::Normal, false, hovered_component_for_painting == Component::Scrubber || m_pressed_component == Component::Scrubber);
+        Gfx::StylePainter::paint_button(painter, scrubber_rect(), palette(), Gfx::ButtonStyle::ThickCap, false, hovered_component_for_painting == Component::Scrubber || m_pressed_component == Component::Scrubber);
 }
 
 void Scrollbar::on_automatic_scrolling_timer_fired()
diff --git a/Userland/Libraries/LibGfx/ClassicStylePainter.cpp b/Userland/Libraries/LibGfx/ClassicStylePainter.cpp
index b1a8f06a5d..c8c940662b 100644
--- a/Userland/Libraries/LibGfx/ClassicStylePainter.cpp
+++ b/Userland/Libraries/LibGfx/ClassicStylePainter.cpp
@@ -92,7 +92,7 @@ void ClassicStylePainter::paint_tab_button(Painter& painter, const IntRect& rect
     }
 }
 
-static void paint_button_new(Painter& painter, const IntRect& a_rect, const Palette& palette, bool pressed, bool checked, bool hovered, bool enabled, bool focused)
+static void paint_button_new(Painter& painter, IntRect const& a_rect, Palette const& palette, ButtonStyle style, bool pressed, bool checked, bool hovered, bool enabled, bool focused)
 {
     Color button_color = palette.button();
     Color highlight_color = palette.threed_highlight();
@@ -146,8 +146,13 @@ static void paint_button_new(Painter& painter, const IntRect& a_rect, const Pale
         painter.fill_rect({ 0, 0, rect.width(), rect.height() }, button_color);
 
         // Top highlight
-        painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, highlight_color);
-        painter.draw_line({ 0, 0 }, { 0, rect.height() - 2 }, highlight_color);
+        if (style == ButtonStyle::Normal) {
+            painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, highlight_color);
+            painter.draw_line({ 0, 0 }, { 0, rect.height() - 2 }, highlight_color);
+        } else if (style == ButtonStyle::ThickCap) {
+            painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, highlight_color);
+            painter.draw_line({ 1, 1 }, { 1, rect.height() - 2 }, highlight_color);
+        }
 
         // Outer shadow
         painter.draw_line({ 0, rect.height() - 1 }, { rect.width() - 1, rect.height() - 1 }, shadow_color2);
@@ -161,8 +166,8 @@ static void paint_button_new(Painter& painter, const IntRect& a_rect, const Pale
 
 void ClassicStylePainter::paint_button(Painter& painter, const IntRect& rect, const Palette& palette, ButtonStyle button_style, bool pressed, bool hovered, bool checked, bool enabled, bool focused)
 {
-    if (button_style == ButtonStyle::Normal)
-        return paint_button_new(painter, rect, palette, pressed, checked, hovered, enabled, focused);
+    if (button_style == ButtonStyle::Normal || button_style == ButtonStyle::ThickCap)
+        return paint_button_new(painter, rect, palette, button_style, pressed, checked, hovered, enabled, focused);
 
     if (button_style == ButtonStyle::Coolbar && !enabled)
         return;
diff --git a/Userland/Libraries/LibGfx/StylePainter.h b/Userland/Libraries/LibGfx/StylePainter.h
index 068aec8e88..f8b24362db 100644
--- a/Userland/Libraries/LibGfx/StylePainter.h
+++ b/Userland/Libraries/LibGfx/StylePainter.h
@@ -13,6 +13,7 @@ namespace Gfx {
 
 enum class ButtonStyle {
     Normal,
+    ThickCap,
     Coolbar,
     Tray,
 };