Bug 1689615 - Only paint one outline for outline-style:auto with nnt. r=mstange

outline-style: auto might show up in non-themed controls and such, and
the double-outline there might look ugly.

Following border-radius would be an extra improvement for the reddit
case, but no platform does it currently (Safari on macOS does it), so
let's consider that in a follow-up.

Differential Revision: https://phabricator.services.mozilla.com/D104214
This commit is contained in:
Emilio Cobos Álvarez 2021-02-05 16:25:57 +00:00
parent 1b17d2b73e
commit e531b2b7fd
2 changed files with 13 additions and 7 deletions

View File

@ -483,7 +483,8 @@ void nsNativeBasicTheme::PaintRoundedFocusRect(DrawTarget* aDrawTarget,
const LayoutDeviceRect& aRect,
DPIRatio aDpiRatio,
CSSCoord aRadius,
CSSCoord aOffset) {
CSSCoord aOffset,
bool aInnerOnly) {
// NOTE(emilio): If the widths or offsets here change, make sure to tweak
// the GetWidgetOverflow path for FocusOutline.
auto [innerColor, middleColor, outerColor] = ComputeFocusRectColors();
@ -507,6 +508,10 @@ void nsNativeBasicTheme::PaintRoundedFocusRect(DrawTarget* aDrawTarget,
aDrawTarget->Stroke(roundedRect, ColorPattern(ToDeviceColor(innerColor)),
StrokeOptions(strokeWidth));
if (aInnerOnly) {
return;
}
offset = CSSCoord(1.0f) * aDpiRatio;
strokeRadius += offset;
strokeWidth = CSSCoord(1.0f) * aDpiRatio;
@ -1272,7 +1277,8 @@ nsNativeBasicTheme::DrawWidgetBackground(gfxContext* aContext, nsIFrame* aFrame,
break;
case StyleAppearance::FocusOutline:
// TODO(emilio): Consider supporting outline-radius / outline-offset?
PaintRoundedFocusRect(dt, devPxRect, dpiRatio, 0.0f, 0.0f);
PaintRoundedFocusRect(dt, devPxRect, dpiRatio, 0.0f, 0.0f,
/* aInnerOnly = */ true);
break;
default:
// Various appearance values are used for XUL elements. Normally these
@ -1359,8 +1365,8 @@ bool nsNativeBasicTheme::GetWidgetOverflow(nsDeviceContext* aContext,
nsIntMargin overflow;
switch (aAppearance) {
case StyleAppearance::FocusOutline:
// 2px * each of the segments + 1 px for the separation between them.
overflow.SizeTo(5, 5, 5, 5);
// 2px * one segment
overflow.SizeTo(2, 2, 2, 2);
break;
case StyleAppearance::Radio:
case StyleAppearance::Checkbox:

View File

@ -186,8 +186,7 @@ class nsNativeBasicTheme : protected nsNativeTheme, public nsITheme {
bool WidgetIsContainer(StyleAppearance aAppearance) override;
bool ThemeDrawsFocusForWidget(StyleAppearance aAppearance) override;
bool ThemeNeedsComboboxDropmarker() override;
ScrollbarSizes GetScrollbarSizes(nsPresContext*,
StyleScrollbarWidth,
ScrollbarSizes GetScrollbarSizes(nsPresContext*, StyleScrollbarWidth,
Overlay) override;
static nscolor AdjustUnthemedScrollbarThumbColor(nscolor, EventStates);
@ -239,7 +238,8 @@ class nsNativeBasicTheme : protected nsNativeTheme, public nsITheme {
void PaintRoundedFocusRect(DrawTarget* aDrawTarget,
const LayoutDeviceRect& aRect, DPIRatio aDpiRatio,
CSSCoord aRadius, CSSCoord aOffset);
CSSCoord aRadius, CSSCoord aOffset,
bool aInnerOnly = false);
void PaintRoundedRectWithRadius(DrawTarget* aDrawTarget,
const LayoutDeviceRect& aRect,
const sRGBColor& aBackgroundColor,