Closed Bug 1636931 Opened 4 years ago Closed 4 years ago

Cutted borders around the form control buttons

Categories

(Core :: Layout: Form Controls, defect)

78 Branch
Desktop
Linux
defect

Tracking

()

VERIFIED FIXED
mozilla78
Tracking Status
firefox-esr68 --- unaffected
firefox76 --- unaffected
firefox77 --- unaffected
firefox78 --- verified

People

(Reporter: ailea, Assigned: emilio)

References

(Regression)

Details

(Keywords: regression)

Attachments

(5 files, 1 obsolete file)

Tested with:

Release 76
Beta 77.0b3 (64-bit)
Nightly 78.0a1 (2020-05-10)

Tested on:

Windows 10 - Unaffected
Windows 7 - Unaffected
Ubuntu 20.04 - Affected

Steps:

  1. Launch firefox with new profile and access: http://tinyurl.com/zdxp4lu
  2. Click on any button (play/pause, mute/unmute, drag the seek bar).

Actual result:

A cutted border is displayed around the focused buttons.

Expected result:

No cutted borders around the buttons.

Regression range:

This is a recent regression, here is the pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=842955b61f01c2d859484ae9aa155e4ea59561b5&tochange=0010e22f0dafa5d3f8b7fe095dd0ca51b745d38b

Note : On Ubuntu 18.04 the borders are not cutted. Please see the play/pause button from the screenshots below (Comment 1 - Ubuntu 20.04, Comment 2 - Ubuntu 18.04).

Flags: needinfo?(emilio)
Attached image Ubuntu 20.04.png
Attached image Ubuntu 18.04.png
Assignee: nobody → emilio
Flags: needinfo?(emilio)

We keep the ::-moz-focus-inner pseudo-element for these, so that acts
enough as a focus indicator.

We may want to opt buttons out of focus outlines altogether (given we
have the ::-moz-focus-inner style) or do something else, if we get
reports of web content showing a lot of outlines because of bug 1311444,
but for now this is better.

See https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c2 for the
context for which this pseudo-element was added.

In the previous patch, I had to special-case range appearance because of
this pseudo-class, but that patch makes this pseudo-class completely
redundant, as now all form controls, themed and unthemed, display
outlines, unless the native theme displays a focus indicator on its own.

Remove the special case, and make ranges use outlines like everything
else rather than this bespoke pseudo-element.

Depends on D74733

Comment on attachment 9147412 [details]
Bug 1636931 - Make ::-moz-focus-outer a no-op, and remove it on Nightly. r=jwatt

Revision D74734 was moved to bug 1636998. Setting attachment 9147412 [details] to obsolete.

Attachment #9147412 - Attachment is obsolete: true
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c85900bda759
Suppress outlines for buttons in videocontrols.css. r=Gijs
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla78

Hi, this issue still occurs on Ubuntu 20.04 with the latest Nightly Build ID: 20200513034405 but only for the Seekbar and the Volume bar. The outlines are no longer visible for the Play/Pause button or the Mute/Unmute button.

Emilio can you please take a look at this ?

Flags: needinfo?(emilio)

Sure, sorry I missed those.

Status: RESOLVED → REOPENED
Flags: needinfo?(emilio)
Resolution: FIXED → ---
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/34a9356a09c5
Also suppress outlines of range inputs in video controls. r=Gijs
Status: REOPENED → RESOLVED
Closed: 4 years ago4 years ago
Resolution: --- → FIXED

Verified - Fixed in Nightly 78.0a1 (build id: 20200514024010) on Ubuntu 20.04. Now all play/pause, mute/unmute, seekbar and volume bar buttons are displayed correctly without outlines.

Thanks.

Status: RESOLVED → VERIFIED
Has Regression Range: --- → yes
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: