1615026 - Snapping issues with file button with widget.disable-native-theme-for-content=true

Status: RESOLVED FIXED

(Core :: Widget, defect, P2)

Description

[Emilio Cobos Álvarez (:emilio)]

Attachment: Screenshot

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Other buttons seem fine.

Comment 2

[Stephen A Pohl [:spohl]]

Thanks for filing. This is also true on other platforms.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:jimm, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Stephen A Pohl [:spohl]]

I took a look at this bug and I've noticed that by setting padding: 1px; on the <input type="file"> control, the button border is displayed correctly. This made me think that a fix similar to bug 1618260 might do the trick here. Alternatively, I was thinking that we might be able to set this extra padding in nsNativeBasicTheme::GetWidgetPadding, but I haven't been able to do so properly so far. Emilio, what do you think?

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Ah, so this is not due to antialising, but because the <button> paints outside of its border area, and the <input type="file"> has overflow: hidden by default, and also -moz-appearance: none; (so GetWidgetPadding doesn't do anything).

(You should check the "Show browser styles" checkbox in devtools btw, comes handy to see what's going on. Also devtools.inspector.showAllAnonymousContent, so that you can inspect the anonymous <button> and so on).

I think the best approach here would be to make the button not paint outside of its border box. You can see the same issue with data:text/html,<span style="display: inline-block; overflow: hidden"><button>ABC</button></span>, and same for <input>.

Maybe we should subtract the border width somewhere we're not subtracting it from?

Comment 6

[Emilio Cobos Álvarez (:emilio)]

I can try to poke, I think we're just missing one pixel somewhere in the widget code :)

Comment 7

[Emilio Cobos Álvarez (:emilio)]

And I suspect fixing this would also fix almost all the issues I found with my Android try run, which were antialiasing issues in adjacent form controls.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1615026 - Ensure that non-native theme doesn't stroke outside of its rect. r=mstange,spohl

...and properly pixel-snap while at it, as otherwise my test would fail fuzzily.

Stroke() paints a stroke from the middle of the path, so it'll paint
one-half-of-the-width outside of the rect.

We need to deflate it by half the border width so that the stroke covers exactly
the area we want.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/282fc8510e02
Ensure that non-native theme doesn't stroke outside of its rect. r=mstange

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dbb705bba193
Annotate new test as failing on Mac.

Comment 11

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/282fc8510e02
https://hg.mozilla.org/mozilla-central/rev/dbb705bba193