1031664 - Enable rendering of outline-style:auto by default

Status: RESOLVED FIXED

(Core :: Layout, enhancement, P3)

Description

[Mats Palmgren (inactive)]

It was disabled due to issues in some Gnome environments, bug 1031662.
We should fix that and then enable it by default again.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1031664 - Enable outline-style: auto. r=mats

With the gtk fix in place is there any reason not to do this?

I'll send an intent if so. Let me know if you want to keep it on nightly /
early beta for a while, too.

Comment 2

[Mats Palmgren (inactive)]

It's been quite a while since this was implemented though... we should probably verify that it works as intended on all platforms before enabling it. I seem to recall there was some issue on some version of Windows, but I don't recall exactly what it was...

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Ok, wdyt of enabling nightly/early-beta for now after I test it looks sane on Windows / Mac?

Comment 4

[Mats Palmgren (inactive)]

This is probably what I was thinking about:
https://bugzilla.mozilla.org/show_bug.cgi?id=427928#c14
https://searchfox.org/mozilla-central/rev/9e45d74b956be046e5021a746b0c8912f1c27318/widget/windows/nsNativeThemeWin.cpp#946
That said, it's probably not a blocking issue... but it be nice if someone could test it on Win7 and Win10 and post screenshots.

Comment 5

[Mats Palmgren (inactive)]

I seem to recall it was working correctly on Mac, but yeah, probably worth re-testing that as well. I can try that later unless someone beats me to it...

Comment 6

[Mats Palmgren (inactive)]

We should also test this in "dark mode" on all platforms. That feature didn't exist back when this was implemented, so we should verify that it works correctly.

Comment 7

[Mats Palmgren (inactive)]

I did a quick test on macOS Catalina (10.15.2) and it does seem to work reasonably well there. data:text/html,<div style="outline:auto">xxx</div> renders a light-blue outline. We use the same color in Light and Dark mode though, unlike native applications which get a slightly darker blue-ish color in Dark mode (I compared with the Search input control in System Preferences).

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Rendering of outline-style: auto on windows 10.

This is the rendering of data:text/html,<input type="text"><br><a style="outline: 1px solid" href="">Foo</a><br><a style="outline: auto" href="">Foo</a>

That is not quite amazing...

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Rendering of outlines on the screenshot app...

Other apps in Win10 seem to have thicker outlines from what I can see...

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Attachment: Rendering of outline-style: auto on windows 10 / chrome canary.

Seems like a 1 CSS pixel solid outline with a slight radius (irrespective of outline-width). They recently enabled their form-controls-refresh, but this looks similar both with it enabled and disabled. Only the color of the outline in the focused input changes.

Comment 11

[Emilio Cobos Álvarez (:emilio)]

Mats, not sure about your thoughts on the above... We could change the Windows rendering only... Do you know what other browsers do in mac?

Comment 12

[Emilio Cobos Álvarez (:emilio)]

Edge (pre-chromium) doesn't parse outline-style: auto

Comment 13

[Mats Palmgren (inactive)]

Were the <input>s focused when you took those screenshots? (I seem to recall Windows has a blue-ish focus border, but perhaps that's just Win7?)

Only the color of the outline in the focused input changes.

outline:auto should definitely use the same color as a focused <input> IMO. That's the whole point of this feature. That said, last I checked the spec it said "do whatever you want" basically.

For data:text/html,<div style="outline:auto red 10px;">xxx</div>, Chrome ignores the width but not the color. It seems like a bug to me that they don't ignore the color too. Safari ignores both color and width and render a blue-ish color.

Comment 14

[Emilio Cobos Álvarez (:emilio)]

(In reply to Mats Palmgren (:mats) from comment #13)

Were the <input>s focused when you took those screenshots? (I seem to recall Windows has a blue-ish focus border, but perhaps that's just Win7?)

Yeah, at least win10 focused border is black. Active border is blueish.

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/44e9e8835e9f
Enable outline-style: auto. r=mats

Comment 16

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/44e9e8835e9f