1 /* -*- Mode: C++; c-basic-offset: 2; indent-tabs-mode: nil; tab-width: 2; -*- */
2 /* vim: set sw=2 ts=8 et tw=80 : */
3 /* This Source Code Form is subject to the terms of the Mozilla Public
4 * License, v. 2.0. If a copy of the MPL was not distributed with this
5 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
7 #include "ScrollbarDrawing.h"
9 #include "mozilla/RelativeLuminanceUtils.h"
10 #include "mozilla/StaticPrefs_widget.h"
11 #include "nsContainerFrame.h"
12 #include "nsDeviceContext.h"
14 #include "nsLayoutUtils.h"
15 #include "nsLookAndFeel.h"
16 #include "nsNativeTheme.h"
18 using namespace mozilla::gfx
;
20 namespace mozilla::widget
{
22 using mozilla::RelativeLuminanceUtils
;
25 auto ScrollbarDrawing::GetDPIRatioForScrollbarPart(nsPresContext
* aPc
)
27 if (auto* rootPc
= aPc
->GetRootPresContext()) {
28 if (nsCOMPtr
<nsIWidget
> widget
= rootPc
->GetRootWidget()) {
29 return widget
->GetDefaultScale();
33 float(AppUnitsPerCSSPixel()) /
34 float(aPc
->DeviceContext()->AppUnitsPerDevPixelAtUnitFullZoom()));
38 nsIFrame
* ScrollbarDrawing::GetParentScrollbarFrame(nsIFrame
* aFrame
) {
39 // Walk our parents to find a scrollbar frame
40 nsIFrame
* scrollbarFrame
= aFrame
;
42 if (scrollbarFrame
->IsScrollbarFrame()) {
45 } while ((scrollbarFrame
= scrollbarFrame
->GetParent()));
47 // We return null if we can't find a parent scrollbar frame
48 return scrollbarFrame
;
52 bool ScrollbarDrawing::IsParentScrollbarRolledOver(nsIFrame
* aFrame
) {
53 nsIFrame
* scrollbarFrame
= GetParentScrollbarFrame(aFrame
);
54 return nsLookAndFeel::GetInt(LookAndFeel::IntID::UseOverlayScrollbars
) != 0
55 ? nsNativeTheme::CheckBooleanAttr(scrollbarFrame
, nsGkAtoms::hover
)
56 : nsNativeTheme::GetContentState(scrollbarFrame
,
57 StyleAppearance::None
)
58 .HasState(NS_EVENT_STATE_HOVER
);
62 bool ScrollbarDrawing::IsParentScrollbarHoveredOrActive(nsIFrame
* aFrame
) {
63 nsIFrame
* scrollbarFrame
= GetParentScrollbarFrame(aFrame
);
64 return scrollbarFrame
&& scrollbarFrame
->GetContent()
67 .HasAtLeastOneOfStates(NS_EVENT_STATE_HOVER
|
68 NS_EVENT_STATE_ACTIVE
);
72 bool ScrollbarDrawing::IsScrollbarWidthThin(const ComputedStyle
& aStyle
) {
73 auto scrollbarWidth
= aStyle
.StyleUIReset()->ScrollbarWidth();
74 return scrollbarWidth
== StyleScrollbarWidth::Thin
;
78 bool ScrollbarDrawing::IsScrollbarWidthThin(nsIFrame
* aFrame
) {
79 ComputedStyle
* style
= nsLayoutUtils::StyleForScrollbar(aFrame
);
80 return IsScrollbarWidthThin(*style
);
83 auto ScrollbarDrawing::GetScrollbarSizes(nsPresContext
* aPresContext
,
84 StyleScrollbarWidth aWidth
, Overlay
)
86 uint32_t h
= GetHorizontalScrollbarHeight();
87 uint32_t w
= GetVerticalScrollbarWidth();
88 if (aWidth
== StyleScrollbarWidth::Thin
) {
92 auto dpi
= GetDPIRatioForScrollbarPart(aPresContext
);
93 return {(CSSCoord(w
) * dpi
).Rounded(), (CSSCoord(h
) * dpi
).Rounded()};
96 auto ScrollbarDrawing::GetScrollbarSizes(nsPresContext
* aPresContext
,
97 nsIFrame
* aFrame
) -> ScrollbarSizes
{
98 auto* style
= nsLayoutUtils::StyleForScrollbar(aFrame
);
99 auto width
= style
->StyleUIReset()->ScrollbarWidth();
101 aPresContext
->UseOverlayScrollbars() ? Overlay::Yes
: Overlay::No
;
102 return GetScrollbarSizes(aPresContext
, width
, overlay
);
105 bool ScrollbarDrawing::IsScrollbarTrackOpaque(nsIFrame
* aFrame
) {
106 auto trackColor
= ComputeScrollbarTrackColor(
107 aFrame
, *nsLayoutUtils::StyleForScrollbar(aFrame
),
108 aFrame
->PresContext()->Document()->GetDocumentState(),
109 Colors(aFrame
, StyleAppearance::ScrollbartrackVertical
));
110 return trackColor
.a
== 1.0f
;
113 sRGBColor
ScrollbarDrawing::ComputeScrollbarTrackColor(
114 nsIFrame
* aFrame
, const ComputedStyle
& aStyle
,
115 const EventStates
& aDocumentState
, const Colors
& aColors
) {
116 if (aColors
.HighContrast()) {
117 return aColors
.System(StyleSystemColor::Window
);
119 const nsStyleUI
* ui
= aStyle
.StyleUI();
120 if (ui
->mScrollbarColor
.IsColors()) {
121 return sRGBColor::FromABGR(
122 ui
->mScrollbarColor
.AsColors().track
.CalcColor(aStyle
));
124 static constexpr sRGBColor sDefaultDarkTrackColor
=
125 sRGBColor::FromU8(20, 20, 25, 77);
126 static constexpr sRGBColor
sDefaultTrackColor(
127 gfx::sRGBColor::UnusualFromARGB(0xfff0f0f0));
130 aDocumentState
.HasAllStates(NS_DOCUMENT_STATE_WINDOW_INACTIVE
)
131 ? StyleSystemColor::ThemedScrollbarInactive
132 : StyleSystemColor::ThemedScrollbar
;
133 return aColors
.SystemOrElse(systemColor
, [&] {
134 return aColors
.IsDark() ? sDefaultDarkTrackColor
: sDefaultTrackColor
;
138 // Don't use the theme color for dark scrollbars if it's not a color (if it's
139 // grey-ish), as that'd either lack enough contrast, or be close to what we'd do
140 // by default anyways.
141 sRGBColor
ScrollbarDrawing::ComputeScrollbarThumbColor(
142 nsIFrame
* aFrame
, const ComputedStyle
& aStyle
,
143 const EventStates
& aElementState
, const EventStates
& aDocumentState
,
144 const Colors
& aColors
) {
145 const nsStyleUI
* ui
= aStyle
.StyleUI();
146 if (ui
->mScrollbarColor
.IsColors()) {
147 return sRGBColor::FromABGR(ThemeColors::AdjustUnthemedScrollbarThumbColor(
148 ui
->mScrollbarColor
.AsColors().thumb
.CalcColor(aStyle
), aElementState
));
151 auto systemColor
= [&] {
152 if (aDocumentState
.HasState(NS_DOCUMENT_STATE_WINDOW_INACTIVE
)) {
153 return StyleSystemColor::ThemedScrollbarThumbInactive
;
155 if (aElementState
.HasState(NS_EVENT_STATE_ACTIVE
)) {
156 if (aColors
.HighContrast()) {
157 return StyleSystemColor::Selecteditem
;
159 return StyleSystemColor::ThemedScrollbarThumbActive
;
161 if (aElementState
.HasState(NS_EVENT_STATE_HOVER
)) {
162 if (aColors
.HighContrast()) {
163 return StyleSystemColor::Selecteditem
;
165 return StyleSystemColor::ThemedScrollbarThumbHover
;
167 if (aColors
.HighContrast()) {
168 return StyleSystemColor::Windowtext
;
170 return StyleSystemColor::ThemedScrollbarThumb
;
173 return aColors
.SystemOrElse(systemColor
, [&] {
174 const nscolor unthemedColor
= aColors
.IsDark() ? NS_RGBA(249, 249, 250, 102)
175 : NS_RGB(0xcd, 0xcd, 0xcd);
177 return sRGBColor::FromABGR(ThemeColors::AdjustUnthemedScrollbarThumbColor(
178 unthemedColor
, aElementState
));
182 template <typename PaintBackendData
>
183 bool ScrollbarDrawing::DoPaintDefaultScrollbar(
184 PaintBackendData
& aPaintData
, const LayoutDeviceRect
& aRect
,
185 bool aHorizontal
, nsIFrame
* aFrame
, const ComputedStyle
& aStyle
,
186 const EventStates
& aElementState
, const EventStates
& aDocumentState
,
187 const Colors
& aColors
, const DPIRatio
& aDpiRatio
) {
188 const bool overlay
= aFrame
->PresContext()->UseOverlayScrollbars();
189 if (overlay
&& !aElementState
.HasAtLeastOneOfStates(NS_EVENT_STATE_HOVER
|
190 NS_EVENT_STATE_ACTIVE
)) {
194 ComputeScrollbarTrackColor(aFrame
, aStyle
, aDocumentState
, aColors
);
195 if (overlay
&& mKind
== Kind::Win11
) {
196 LayoutDeviceCoord radius
=
197 (aHorizontal
? aRect
.height
: aRect
.width
) / 2.0f
;
198 ThemeDrawing::PaintRoundedRectWithRadius(aPaintData
, aRect
, color
,
199 sRGBColor(), 0, radius
/ aDpiRatio
,
202 ThemeDrawing::FillRect(aPaintData
, aRect
, color
);
207 bool ScrollbarDrawing::PaintScrollbar(
208 DrawTarget
& aDrawTarget
, const LayoutDeviceRect
& aRect
, bool aHorizontal
,
209 nsIFrame
* aFrame
, const ComputedStyle
& aStyle
,
210 const EventStates
& aElementState
, const EventStates
& aDocumentState
,
211 const Colors
& aColors
, const DPIRatio
& aDpiRatio
) {
212 return DoPaintDefaultScrollbar(aDrawTarget
, aRect
, aHorizontal
, aFrame
,
213 aStyle
, aElementState
, aDocumentState
, aColors
,
217 bool ScrollbarDrawing::PaintScrollbar(
218 WebRenderBackendData
& aWrData
, const LayoutDeviceRect
& aRect
,
219 bool aHorizontal
, nsIFrame
* aFrame
, const ComputedStyle
& aStyle
,
220 const EventStates
& aElementState
, const EventStates
& aDocumentState
,
221 const Colors
& aColors
, const DPIRatio
& aDpiRatio
) {
222 return DoPaintDefaultScrollbar(aWrData
, aRect
, aHorizontal
, aFrame
, aStyle
,
223 aElementState
, aDocumentState
, aColors
,
227 template <typename PaintBackendData
>
228 bool ScrollbarDrawing::DoPaintDefaultScrollCorner(
229 PaintBackendData
& aPaintData
, const LayoutDeviceRect
& aRect
,
230 nsIFrame
* aFrame
, const ComputedStyle
& aStyle
,
231 const EventStates
& aDocumentState
, const Colors
& aColors
,
232 const DPIRatio
& aDpiRatio
) {
233 auto scrollbarColor
=
234 ComputeScrollbarTrackColor(aFrame
, aStyle
, aDocumentState
, aColors
);
235 ThemeDrawing::FillRect(aPaintData
, aRect
, scrollbarColor
);
239 bool ScrollbarDrawing::PaintScrollCorner(
240 DrawTarget
& aDrawTarget
, const LayoutDeviceRect
& aRect
, nsIFrame
* aFrame
,
241 const ComputedStyle
& aStyle
, const EventStates
& aDocumentState
,
242 const Colors
& aColors
, const DPIRatio
& aDpiRatio
) {
243 return DoPaintDefaultScrollCorner(aDrawTarget
, aRect
, aFrame
, aStyle
,
244 aDocumentState
, aColors
, aDpiRatio
);
247 bool ScrollbarDrawing::PaintScrollCorner(WebRenderBackendData
& aWrData
,
248 const LayoutDeviceRect
& aRect
,
250 const ComputedStyle
& aStyle
,
251 const EventStates
& aDocumentState
,
252 const Colors
& aColors
,
253 const DPIRatio
& aDpiRatio
) {
254 return DoPaintDefaultScrollCorner(aWrData
, aRect
, aFrame
, aStyle
,
255 aDocumentState
, aColors
, aDpiRatio
);
258 nscolor
ScrollbarDrawing::GetScrollbarButtonColor(nscolor aTrackColor
,
259 EventStates aStates
) {
260 // See numbers in GetScrollbarArrowColor.
261 // This function is written based on ratios between values listed there.
263 bool isActive
= aStates
.HasState(NS_EVENT_STATE_ACTIVE
);
264 bool isHover
= aStates
.HasState(NS_EVENT_STATE_HOVER
);
265 if (!isActive
&& !isHover
) {
268 float luminance
= RelativeLuminanceUtils::Compute(aTrackColor
);
270 if (luminance
>= 0.18f
) {
274 luminance
= std::min(luminance
, 1.0f
);
277 if (luminance
>= 0.18f
) {
283 return RelativeLuminanceUtils::Adjust(aTrackColor
, luminance
);
286 Maybe
<nscolor
> ScrollbarDrawing::GetScrollbarArrowColor(nscolor aButtonColor
) {
287 // In Windows 10 scrollbar, there are several gray colors used:
289 // State | Background (lum) | Arrow | Contrast
290 // -------+------------------+---------+---------
291 // Normal | Gray 240 (87.1%) | Gray 96 | 5.5
292 // Hover | Gray 218 (70.1%) | Black | 15.0
293 // Active | Gray 96 (11.7%) | White | 6.3
295 // Contrast value is computed based on the definition in
296 // https://www.w3.org/TR/WCAG20/#contrast-ratiodef
298 // This function is written based on these values.
300 if (NS_GET_A(aButtonColor
) == 0) {
301 // If the button color is transparent, because of e.g.
302 // scrollbar-color: <something> transparent, then use
303 // the thumb color, which is expected to have enough
308 float luminance
= RelativeLuminanceUtils::Compute(aButtonColor
);
309 // Color with luminance larger than 0.72 has contrast ratio over 4.6
310 // to color with luminance of gray 96, so this value is chosen for
311 // this range. It is the luminance of gray 221.
312 if (luminance
>= 0.72) {
313 // ComputeRelativeLuminanceFromComponents(96). That function cannot
314 // be constexpr because of std::pow.
315 const float GRAY96_LUMINANCE
= 0.117f
;
316 return Some(RelativeLuminanceUtils::Adjust(aButtonColor
, GRAY96_LUMINANCE
));
318 // The contrast ratio of a color to black equals that to white when its
319 // luminance is around 0.18, with a contrast ratio ~4.6 to both sides,
320 // thus the value below. It's the lumanince of gray 118.
322 // TODO(emilio): Maybe the button alpha is not the best thing to use here and
323 // we should use the thumb alpha? It seems weird that the color of the arrow
324 // depends on the opacity of the scrollbar thumb...
325 if (luminance
>= 0.18) {
326 return Some(NS_RGBA(0, 0, 0, NS_GET_A(aButtonColor
)));
328 return Some(NS_RGBA(255, 255, 255, NS_GET_A(aButtonColor
)));
331 std::pair
<sRGBColor
, sRGBColor
> ScrollbarDrawing::ComputeScrollbarButtonColors(
332 nsIFrame
* aFrame
, StyleAppearance aAppearance
, const ComputedStyle
& aStyle
,
333 const EventStates
& aElementState
, const EventStates
& aDocumentState
,
334 const Colors
& aColors
) {
335 if (aColors
.HighContrast()) {
336 if (aElementState
.HasAtLeastOneOfStates(NS_EVENT_STATE_ACTIVE
|
337 NS_EVENT_STATE_HOVER
)) {
338 return aColors
.SystemPair(StyleSystemColor::Selecteditem
,
339 StyleSystemColor::Buttonface
);
341 return aColors
.SystemPair(StyleSystemColor::Window
,
342 StyleSystemColor::Windowtext
);
346 ComputeScrollbarTrackColor(aFrame
, aStyle
, aDocumentState
, aColors
);
347 nscolor buttonColor
=
348 GetScrollbarButtonColor(trackColor
.ToABGR(), aElementState
);
350 GetScrollbarArrowColor(buttonColor
)
351 .map(sRGBColor::FromABGR
)
353 return ComputeScrollbarThumbColor(aFrame
, aStyle
, aElementState
,
354 aDocumentState
, aColors
);
356 return {sRGBColor::FromABGR(buttonColor
), arrowColor
};
359 bool ScrollbarDrawing::PaintScrollbarButton(
360 DrawTarget
& aDrawTarget
, StyleAppearance aAppearance
,
361 const LayoutDeviceRect
& aRect
, nsIFrame
* aFrame
,
362 const ComputedStyle
& aStyle
, const EventStates
& aElementState
,
363 const EventStates
& aDocumentState
, const Colors
& aColors
, const DPIRatio
&) {
364 auto [buttonColor
, arrowColor
] = ComputeScrollbarButtonColors(
365 aFrame
, aAppearance
, aStyle
, aElementState
, aDocumentState
, aColors
);
366 aDrawTarget
.FillRect(aRect
.ToUnknownRect(),
367 ColorPattern(ToDeviceColor(buttonColor
)));
369 // Start with Up arrow.
370 float arrowPolygonX
[] = {-4.0f
, 0.0f
, 4.0f
, 4.0f
, 0.0f
, -4.0f
};
371 float arrowPolygonY
[] = {0.0f
, -4.0f
, 0.0f
, 3.0f
, -1.0f
, 3.0f
};
373 const float kPolygonSize
= 17;
375 const int32_t arrowNumPoints
= ArrayLength(arrowPolygonX
);
376 switch (aAppearance
) {
377 case StyleAppearance::ScrollbarbuttonUp
:
379 case StyleAppearance::ScrollbarbuttonDown
:
380 for (int32_t i
= 0; i
< arrowNumPoints
; i
++) {
381 arrowPolygonY
[i
] *= -1;
384 case StyleAppearance::ScrollbarbuttonLeft
:
385 for (int32_t i
= 0; i
< arrowNumPoints
; i
++) {
386 float temp
= arrowPolygonX
[i
];
387 arrowPolygonX
[i
] = arrowPolygonY
[i
];
388 arrowPolygonY
[i
] = temp
;
391 case StyleAppearance::ScrollbarbuttonRight
:
392 for (int32_t i
= 0; i
< arrowNumPoints
; i
++) {
393 float temp
= arrowPolygonX
[i
];
394 arrowPolygonX
[i
] = arrowPolygonY
[i
] * -1;
395 arrowPolygonY
[i
] = temp
;
401 ThemeDrawing::PaintArrow(aDrawTarget
, aRect
, arrowPolygonX
, arrowPolygonY
,
402 kPolygonSize
, arrowNumPoints
, arrowColor
);
406 } // namespace mozilla::widget