Affected versions

• 91.0a1 (20210701211644)
• 90.0b12 (20210624190035)
• 89.0.2 (20210622155641)

Affected platforms

• Ubuntu 21.04
• Windows 10x64
• macOS 11

Steps to reproduce

1. Open Firefox and https://www.who.int/.
2. Click on Search from the header.

Expected result

• Search field is displayed as expected.

Actual result

• Search field has a vertical line inside.

Regression range

• Last good revision: ed3ef7c26759e4a4187c65527e789ccb0fbf773d
  First bad revision: 1e5d1f957f717b896d5ffc5dcf96b70234bce8f0
  Pushlog:
  https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=ed3ef7c26759e4a4187c65527e789ccb0fbf773d&tochange=1e5d1f957f717b896d5ffc5dcf96b70234bce8f0

Notes

• Attached a screenshot with the issue.

In other browsers it works because they're suppressing the outline with:

#sf-top-header .sf-search-input-wrapper input:focus {
    border-radius: 0!important;
    border: 0!important;
    outline: -webkit-focus-ring-color auto 0;
}

And Firefox doesn't parse -webkit-focus-ring-color.

Some pages use this to hide the focus outline. On Blink it seems black,
WebKit uses it to expose the OS accent color, so this is reasonably safe
I think.

Perhaps on Windows it should be the hard-coded non-native-theme outline
color... Yet again perhaps on Windows we should also follow the OS
accent color for outlines / form controls, so this is probably fine,
wdyt?

Backed out for mochitest failures on test_value_computation.html

Backout link: https://hg.mozilla.org/integration/autoland/rev/1f558a68ac6ed78b9c4a1b36445d6e6013a06ca4
Log link: https://treeherder.mozilla.org/logviewer?job_id=344623809&repo=autoland&lineNumber=2359

https://hg.mozilla.org/mozilla-central/rev/d06a9296cfab

I can still reproduce the issue on Firefox 91.0b7 and 92.0a1 using Ubuntu 18.04 x64 and macOS 10.15.

Backed out changeset d06a9296cfab (Bug 1718934) for not fixing Bug 1718934 in its entirety.
Backout links:

• https://hg.mozilla.org/integration/autoland/rev/c0acfd9065590686ca20eda1d4d0f34bb38a88c3
• https://hg.mozilla.org/releases/mozilla-beta/rev/0c3072e6c42cf035b12808839f4e3fdbba2c7a05

Yeah, I checked and even parsing -webkit-focus-ring-color, we still paint the outline because of outline-style: auto. Safari behaves the same. https://drafts.csswg.org/css-ui/#typedef-outline-line-style says:

As such, this specification does not define how the outline-color and outline-width are incorporated or used (if at all) when rendering auto style outlines.

So we could reland my patch and align with Chrome so that outline-width: 0 hides the outline, but that seems wrong because outline-width: 10px does nothing for example.

Backout merged: https://hg.mozilla.org/mozilla-central/rev/c0acfd906559