This also uncovered a minor issue with WebRender disabled where the
radii was slightly off because it wasn't accounting for the border.
Differential Revision: https://phabricator.services.mozilla.com/D109206
This prevents contrast issues with high contrast themes when the page only
specifies some of the colors (which is an issue which we have historically
had on GTK with dark themes for a long time).
Feel free to push back on this if you prefer this, as on GTK we force a light
theme on content anyways, but this is a problem on windows for users that use a
high contrast theme but allow pages to override colors.
Differential Revision: https://phabricator.services.mozilla.com/D108324
Using the same color for the track and the meter chunk is not going to
fly of course...
In high contrast, make the colors consistent with <progress>, which
seems like a reasonable thing to do.
Differential Revision: https://phabricator.services.mozilla.com/D108347
I wonder if we could do something more fancy with the animation than
QueueAnimatedContentForRefresh, which is timer based, like a
transform-like animation that WebRender could run or something, but this
is probably good enough for now.
Depends on D108335
Differential Revision: https://phabricator.services.mozilla.com/D108336
The progress chunk already has the right size, but it's easier to get
the right clipping if we just paint it as part of the progress bar.
This is much like we paint the range track and thumb. We apply the
native appearance atomically so this should be fine.
Differential Revision: https://phabricator.services.mozilla.com/D108335
Mostly use matching foreground / background colors. Buttonface is the
counterpart of Buttontext, and Highlightext the counterpart of Highlight.
This fixes contrast of checkboxes and radio buttons for example, and a couple
other contrast issues with light themes specially.
Differential Revision: https://phabricator.services.mozilla.com/D108319
Linux can also have high contrast (and mac, if you tweak prefs, but
let's assume that doesn't happen), so no reason we shouldn't share this
code.
One related simplification while I was doing this code move is that I
managed to remove the scrollbar "border" code. Turns out that Windows
was overriding ComputeScrollbarColors so that border and track colors
were always the same, and Linux was ignoring the border anyways, so with
this we can simplfiy the implementation a bit (as the Linux scrollbar
track / corner code can be shared with Windows now).
Differential Revision: https://phabricator.services.mozilla.com/D107863
data:text/html,<input type=checkbox checked disabled>
Has a weird double border because the DrawTarget codepath fills and
strokes the same path, which is fine if the border is opaque, but not
otherwise.
Since this is the only use for a non-opaque border that we have, I
think, dealing with it on the caller seems a bit simpler. But let me
know if you want me to fix it more generally in
PaintRoundedRectWithRadius. I think for the semi-transparent border
case we'd need to create two paths, one for the background and one for
the border, which is a bit unfortunate.
The webrender codepath does the right thing, but of course that doesn't
get used for checkboxes.
Differential Revision: https://phabricator.services.mozilla.com/D107815
This used to be the case (for default-sized radio buttons anyways)
before bug 1693688 (since GetMinimumWidgetSize returns a
LayoutDeviceIntSize, which rounded).
With the previous patch we never see uneven borders, but the radio might
be e.g. one pixel taller than its width, which also looks odd. So
truncate to device pixels to avoid it.
Differential Revision: https://phabricator.services.mozilla.com/D107810
This isn't really an uneven border (because we snap border widths
correctly); this is the textfield border snapping differently than the
outline, actually, in a way such that the outline shows underneath. We
use negative offsets to try to cover the border but that breaks in this
case.
I thought of two ways to fix it, but this one looks slightly more
future-proof (and simpler), see the comment in ComputeBorderColor. Let
me know if you want me to go the other way (snapping offsets instead) or
both, actually.
The transparent border uncovered that the radius was slightly off, and
also that I forgot to snap the auto-style outline width properly, so I
fixed those drive-by too (without the first one stuff looks off
otherwise, at least, the second one I could move).
Differential Revision: https://phabricator.services.mozilla.com/D107287
This isn't really an uneven border (because we snap border widths
correctly); this is the textfield border snapping differently than the
outline, actually, in a way such that the outline shows underneath. We
use negative offsets to try to cover the border but that breaks in this
case.
I thought of two ways to fix it, but this one looks slightly more
future-proof (and simpler), see the comment in ComputeBorderColor. Let
me know if you want me to go the other way (snapping offsets instead) or
both, actually.
The transparent border uncovered that the radius was slightly off, and
also that I forgot to snap the auto-style outline width properly, so I
fixed those drive-by too (without the first one stuff looks off
otherwise, at least, the second one I could move).
Differential Revision: https://phabricator.services.mozilla.com/D107287
The native theme doesn't enforce the size of the whole scrollbar. This is
important because if the scrollbar overflows the scroller we might suppress it.
This causes a variety of test failures with the non-native theme enabled. One
of the most glaring ones is:
http://wpt.live/css/css-flexbox/overflow-auto-006.html
We don't show scrollbars for the inline elements because their width is 50px
and the min scrollbar ends up being 51px (17 * 3) which is pretty unfortunate.
Instead, allow the thumb / scrollbar / track to shrink like the native theme.
Differential Revision: https://phabricator.services.mozilla.com/D106781
The only thing missing now are things that draw arrows / checkmarks.
Make the disabled range thumb opaque, to avoid dealing with clipping
(also matches all other browsers, fwiw).
Differential Revision: https://phabricator.services.mozilla.com/D106011
The only thing missing now are things that draw arrows / checkmarks.
Make the disabled range thumb opaque, to avoid dealing with clipping
(also matches all other browsers, fwiw).
Differential Revision: https://phabricator.services.mozilla.com/D106011
We basically use a couple primitives to draw these
(PaintRoundedRectWithRadius, FillRect), so making the code a bit generic
implementing stuff with WebRender seems straight-forward.
I've kept using the fallback codepath for the bits that draw complex
paths like arrows and such, but the rest of the things should work with
this patch.
A thing I'm not too happy about is the scrollbar painting setup (requires a lot
of boilerplate), but modulo template hacks make nsNativeBasicTheme a template
that receives its super class as a parameter or something) it seems hard to do
better.
Differential Revision: https://phabricator.services.mozilla.com/D105931
We basically use a couple primitives to draw these
(PaintRoundedRectWithRadius, FillRect), so making the code a bit generic
implementing stuff with WebRender seems straight-forward.
I've kept using the fallback codepath for the bits that draw complex
paths like arrows and such, but the rest of the things should work with
this patch.
A thing I'm not too happy about is the scrollbar painting setup (requires a lot
of boilerplate), but modulo template hacks make nsNativeBasicTheme a template
that receives its super class as a parameter or something) it seems hard to do
better.
Differential Revision: https://phabricator.services.mozilla.com/D105931
We basically use a couple primitives to draw these
(PaintRoundedRectWithRadius, FillRect), so making the code a bit generic
implementing stuff with WebRender seems straight-forward.
I've kept using the fallback codepath for the bits that draw complex
paths like arrows and such, but the rest of the things should work with
this patch.
A thing I'm not too happy about is the scrollbar painting setup (requires a lot
of boilerplate), but modulo template hacks make nsNativeBasicTheme a template
that receives its super class as a parameter or something) it seems hard to do
better.
Differential Revision: https://phabricator.services.mozilla.com/D105931
This matches closer what Chrome and Safari do (Safari paints outside of
the box when this happens, but the layout box still respects the
author), see:
data:text/html,<button style="padding: 0; width: 0">
data:text/html,<input type=checkbox style="width: 0">
Etc. For checkboxes, this matches what OSX does, too.
Since we still want checkboxes to be slightly larger than what they'd be
otherwise, we add a hook to tweak it when non-native theme is enabled.
Differential Revision: https://phabricator.services.mozilla.com/D105798
This matches closer what Chrome and Safari do (Safari paints outside of
the box when this happens, but the layout box still respects the
author), see:
data:text/html,<button style="padding: 0; width: 0">
data:text/html,<input type=checkbox style="width: 0">
Etc. For checkboxes, this matches what OSX does, too.
Since we still want checkboxes to be slightly larger than what they'd be
otherwise, we add a hook to tweak it when non-native theme is enabled.
Differential Revision: https://phabricator.services.mozilla.com/D105798
I thought we didn't support outline-offset on auto-style outline.
The rect we get is already inflated, so we just got to compute the
radius using that.
Differential Revision: https://phabricator.services.mozilla.com/D105125
Some GTK themes use very soft colors for selection backgrounds, using
darker colors for the text. This makes the tab and focus outlines in the
tab bar not have sufficient contrast with usual backgrounds.
I needed to do this for bug 1690778, but it seems worth doing it on the
front-end as well.
Differential Revision: https://phabricator.services.mozilla.com/D104547
This makes form controls match the rest of the GTK theme like selection
colors, etc.
An alternative to this would be to just use non-native colors on GTK for
all content, but that seems somewhat unfortunate and we do the right
thing for scrollbars so...
I've tried on a variety of themes and this looks nice so far.
Differential Revision: https://phabricator.services.mozilla.com/D104496
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 is based on the windows implementation and has two nice things:
* Makes scrollbar-color react to active / hover state, like on Windows.
* Implements dark scrollbar support.
Differential Revision: https://phabricator.services.mozilla.com/D103969
This seems to come from bug 1179780, but custom scrollbars shouldn't
have this requirement, and it's kind of artificial anyway.
Differential Revision: https://phabricator.services.mozilla.com/D103692
This is slightly unfortunate on one hand because we're technically lying
(but so is chromium and our GTK theme, on the other hand).
It is nice because it means that themed and unthemed controls have the
same size by default though, which seems desirable.
So I'm a bit on the edge here, but I think this is probably the less bad
option to grow our form controls if we want to do it.
Differential Revision: https://phabricator.services.mozilla.com/D103477
There's no reason we should need an scrollbar box to query the size of a
scrollbar. I plan to use this in the following patch to make the size of a
resizer not vary depending on whether the container has scrollbars or not,
which is what ultimately causes the reftest failure.
Differential Revision: https://phabricator.services.mozilla.com/D103302
If you add padding to the input on the inline-end, like some of the
examples in bug 1674431, then the darker border looks off.
Without it, the number input still looks nice, so I think we should do
this.
We might want to introduce the padding by default (see bug 1689286).
Differential Revision: https://phabricator.services.mozilla.com/D103270
We might want to snap focus outline widths as well, but that's harder
because it has various segments and separation between them, so we
probably want to snap those separately... So for now only border rects
probably makes sense.
Differential Revision: https://phabricator.services.mozilla.com/D103106
