mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-02 15:46:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb/CSS: Implement the scrollbar-color property

Browse source 
This allows the user to set the scrollbar thumb and track colors.
This commit is contained in:
Tim Ledbetter 2025-05-26 22:36:12 +01:00 • committed by Alexander Kalenik
commit e2d0d8e2b9
Notes: github-actions[bot] 2025-06-01 22:18:57 +00:00
24 changed files with 212 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

7
Libraries/LibWeb/CSS/CSSStyleValue.cpp
View file

@ -55,6 +55,7 @@
#include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
#include <LibWeb/CSS/StyleValues/RectStyleValue.h>
#include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
#include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
#include <LibWeb/CSS/StyleValues/ScrollbarGutterStyleValue.h>
#include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
#include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
@ -338,6 +339,12 @@ ResolutionStyleValue const& CSSStyleValue::as_resolution() const
return static_cast<ResolutionStyleValue const&>(*this);
}
ScrollbarColorStyleValue const& CSSStyleValue::as_scrollbar_color() const
{
VERIFY(is_scrollbar_color());
return static_cast<ScrollbarColorStyleValue const&>(*this);
}
ScrollbarGutterStyleValue const& CSSStyleValue::as_scrollbar_gutter() const
{
VERIFY(is_scrollbar_gutter());

5
Libraries/LibWeb/CSS/CSSStyleValue.h
View file

@ -130,6 +130,7 @@ public:
Ratio,
Rect,
Resolution,
ScrollbarColor,
ScrollbarGutter,
Shadow,
Shorthand,
@ -325,6 +326,10 @@ public:
ResolutionStyleValue const& as_resolution() const;
ResolutionStyleValue& as_resolution() { return const_cast<ResolutionStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_resolution()); }
bool is_scrollbar_color() const { return type() == Type::ScrollbarColor; }
ScrollbarColorStyleValue const& as_scrollbar_color() const;
ScrollbarColorStyleValue& as_scrollbar_color() { return const_cast<ScrollbarColorStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_scrollbar_color()); }
bool is_scrollbar_gutter() const { return type() == Type::ScrollbarGutter; }
ScrollbarGutterStyleValue const& as_scrollbar_gutter() const;
ScrollbarGutterStyleValue& as_scrollbar_gutter() { return const_cast<ScrollbarGutterStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_scrollbar_gutter()); }

17
Libraries/LibWeb/CSS/ComputedProperties.cpp
View file

@ -31,6 +31,7 @@
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
#include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
#include <LibWeb/CSS/StyleValues/RectStyleValue.h>
#include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
#include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
#include <LibWeb/CSS/StyleValues/StringStyleValue.h>
#include <LibWeb/CSS/StyleValues/StyleValueList.h>
@ -1852,6 +1853,22 @@ Vector<CounterData> ComputedProperties::counter_data(PropertyID property_id) con
return {};
}
ScrollbarColorData ComputedProperties::scrollbar_color(Layout::NodeWithStyle const& layout_node) const
{
auto const& value = property(PropertyID::ScrollbarColor);
if (value.is_keyword() && value.as_keyword().keyword() == Keyword::Auto)
return InitialValues::scrollbar_color();
if (value.is_scrollbar_color()) {
auto& scrollbar_color_value = value.as_scrollbar_color();
auto thumb_color = scrollbar_color_value.thumb_color()->to_color(layout_node);
auto track_color = scrollbar_color_value.track_color()->to_color(layout_node);
return { thumb_color, track_color };
}
return {};
}
ScrollbarWidth ComputedProperties::scrollbar_width() const
{
auto const& value = property(PropertyID::ScrollbarWidth);

1
Libraries/LibWeb/CSS/ComputedProperties.h
View file

@ -228,6 +228,7 @@ public:
QuotesData quotes() const;
Vector<CounterData> counter_data(PropertyID) const;
ScrollbarColorData scrollbar_color(Layout::NodeWithStyle const& layout_node) const;
ScrollbarWidth scrollbar_width() const;
static NonnullRefPtr<Gfx::Font const> font_fallback(bool monospace, bool bold, float point_size);

16
Libraries/LibWeb/CSS/ComputedValues.h
View file

@ -81,6 +81,11 @@ struct Containment {
bool is_empty() const { return !(size_containment || inline_size_containment || layout_containment || style_containment || paint_containment); }
};
struct ScrollbarColorData {
Color thumb_color { Color::Transparent };
Color track_color { Color::Transparent };
};
using CursorData = Variant<NonnullRefPtr<CursorStyleValue const>, Cursor>;
using ListStyleType = Variant<CounterStyleNameKeyword, String>;
@ -211,6 +216,13 @@ public:
static CSS::MathStyle math_style() { return CSS::MathStyle::Normal; }
static int math_depth() { return 0; }
static ScrollbarColorData scrollbar_color()
{
return ScrollbarColorData {
.thumb_color = Color(Color::NamedColor::DarkGray).with_alpha(192),
.track_color = Color(Color::NamedColor::WarmGray).with_alpha(192),
};
}
static CSS::ScrollbarWidth scrollbar_width() { return CSS::ScrollbarWidth::Auto; }
};
@ -581,6 +593,7 @@ public:
CSS::MathStyle math_style() const { return m_inherited.math_style; }
int math_depth() const { return m_inherited.math_depth; }
ScrollbarColorData scrollbar_color() const { return m_inherited.scrollbar_color; }
CSS::ScrollbarWidth scrollbar_width() const { return m_noninherited.scrollbar_width; }
NonnullOwnPtr<ComputedValues> clone_inherited_values() const
@ -655,6 +668,8 @@ protected:
CSS::MathShift math_shift { InitialValues::math_shift() };
CSS::MathStyle math_style { InitialValues::math_style() };
int math_depth { InitialValues::math_depth() };
ScrollbarColorData scrollbar_color { InitialValues::scrollbar_color() };
} m_inherited;
struct {
@ -967,6 +982,7 @@ public:
void set_math_style(CSS::MathStyle value) { m_inherited.math_style = value; }
void set_math_depth(int value) { m_inherited.math_depth = value; }
void set_scrollbar_color(ScrollbarColorData value) { m_inherited.scrollbar_color = move(value); }
void set_scrollbar_width(CSS::ScrollbarWidth value) { m_noninherited.scrollbar_width = value; }
void set_counter_increment(Vector<CounterData> value) { m_noninherited.counter_increment = move(value); }

1
Libraries/LibWeb/CSS/Parser/Parser.h
View file

@ -417,6 +417,7 @@ private:
RefPtr<CSSStyleValue const> parse_place_items_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_place_self_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_quotes_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_scrollbar_color_value(TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue const> parse_scrollbar_gutter_value(TokenStream<ComponentValue>&);
enum class AllowInsetKeyword {
No,

31
Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp
View file

@ -48,6 +48,7 @@
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
#include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
#include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
#include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
#include <LibWeb/CSS/StyleValues/ScrollbarGutterStyleValue.h>
#include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
#include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
@ -644,6 +645,10 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue const>> Parser::parse_css_value
if (auto parsed_value = parse_rotate_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::ScrollbarColor:
if (auto parsed_value = parse_scrollbar_color_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::ScrollbarGutter:
if (auto parsed_value = parse_scrollbar_gutter_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
@ -4057,6 +4062,32 @@ RefPtr<CSSStyleValue const> Parser::parse_scale_value(TokenStream<ComponentValue
return TransformationStyleValue::create(PropertyID::Scale, TransformFunction::Scale, { maybe_x.release_nonnull(), maybe_y.release_nonnull(), maybe_z.release_nonnull() });
}
// https://drafts.csswg.org/css-scrollbars/#propdef-scrollbar-color
RefPtr<CSSStyleValue const> Parser::parse_scrollbar_color_value(TokenStream<ComponentValue>& tokens)
{
// auto | <color>{2}
if (!tokens.has_next_token())
return nullptr;
if (auto auto_keyword = parse_all_as_single_keyword_value(tokens, Keyword::Auto))
return auto_keyword;
auto transaction = tokens.begin_transaction();
auto thumb_color = parse_color_value(tokens);
if (!thumb_color)
return nullptr;
tokens.discard_whitespace();
auto track_color = parse_color_value(tokens);
if (!track_color)
return nullptr;
tokens.discard_whitespace();
transaction.commit();
return ScrollbarColorStyleValue::create(thumb_color.release_nonnull(), track_color.release_nonnull());
}
// https://drafts.csswg.org/css-overflow/#propdef-scrollbar-gutter
RefPtr<CSSStyleValue const> Parser::parse_scrollbar_gutter_value(TokenStream<ComponentValue>& tokens)
{

6
Libraries/LibWeb/CSS/Properties.json
View file

@ -2684,6 +2684,12 @@
"affects-layout": false,
"affects-stacking-context": true
},
"scrollbar-color": {
"affects-layout": false,
"animation-type": "by-computed-value",
"inherited": "yes",
"initial": "auto"
},
"scrollbar-gutter": {
"affects-layout": false,
"animation-type": "discrete",

21
Libraries/LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.cpp Normal file
View file

@ -0,0 +1,21 @@
/*
* Copyright (c) 2025, Tim Ledbetter <tim.ledbetter@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "ScrollbarColorStyleValue.h"
namespace Web::CSS {
ValueComparingNonnullRefPtr<ScrollbarColorStyleValue const> ScrollbarColorStyleValue::create(NonnullRefPtr<CSSStyleValue const> thumb_color, NonnullRefPtr<CSSStyleValue const> track_color)
{
return adopt_ref(*new ScrollbarColorStyleValue(move(thumb_color), move(track_color)));
}
String ScrollbarColorStyleValue::to_string(SerializationMode mode) const
{
return MUST(String::formatted("{} {}", m_thumb_color->to_string(mode), m_track_color->to_string(mode)));
}
}

38
Libraries/LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h Normal file
View file

@ -0,0 +1,38 @@
/*
* Copyright (c) 2025, Tim Ledbetter <tim.ledbetter@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <AK/OwnPtr.h>
#include <LibWeb/CSS/CSSStyleValue.h>
#include <LibWeb/CSS/StyleValues/CSSColorValue.h>
namespace Web::CSS {
class ScrollbarColorStyleValue final : public StyleValueWithDefaultOperators<ScrollbarColorStyleValue> {
public:
static ValueComparingNonnullRefPtr<ScrollbarColorStyleValue const> create(NonnullRefPtr<CSSStyleValue const> thumb_color, NonnullRefPtr<CSSStyleValue const> track_color);
virtual ~ScrollbarColorStyleValue() override = default;
virtual String to_string(SerializationMode) const override;
bool properties_equal(ScrollbarColorStyleValue const& other) const { return m_thumb_color == other.m_thumb_color && m_track_color == other.m_track_color; }
NonnullRefPtr<CSSStyleValue const> thumb_color() const { return m_thumb_color; }
NonnullRefPtr<CSSStyleValue const> track_color() const { return m_track_color; }
private:
explicit ScrollbarColorStyleValue(NonnullRefPtr<CSSStyleValue const> thumb_color, NonnullRefPtr<CSSStyleValue const> track_color)
: StyleValueWithDefaultOperators(Type::ScrollbarColor)
, m_thumb_color(move(thumb_color))
, m_track_color(move(track_color))
{
}
NonnullRefPtr<CSSStyleValue const> m_thumb_color;
NonnullRefPtr<CSSStyleValue const> m_track_color;
};
}