1709587 - Edit bookmark panel's save button outline focus should be more noticeable

Status: VERIFIED FIXED

(Firefox :: Bookmarks & History, defect, P2)

Description

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: border.webm

Affected versions
latest Nightly 90.0a1 (2021-05-05) (64-bit)
Beta 89.0b8 (64-bit)

Preconditions
Set the following prefs in about:config

browser.proton.enabled = true
prompts.windowPromptSubDialog = true
prompts.contentPromptSubDialog = true
browser.proton.modals.enabled = true

Affected platforms
Windows 10 x64
macOS 10.15
Ubuntu 18.04 x64

Steps to reproduce

1. Launch Firefox.
2. Click on star icon to open add bookmark panel (or if a website is already bookmarked, to open the edit bookmark panel)
3. Press tab key for outline focus to be triggered, and reach the save button.

Expected result
Save button outline focus should be more noticeable

Actual result
The outline is not noticeable.

Suggested Severity
S3, since this won't affect the end users.

Regression range
Not a regression.

Additional notes
Please observe the attached screenshot.

Comment 1

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: image_2021_05_03T19_39_04_309Z.png

Comment 2

[Tyler Duzan]

I believe this is due to lack of padding around the button before the focus ring, and it sharing the primary color.

Comment 3

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: Screen Recording 2021-05-14 at 10.20.31.mov

This is also reproducible in update notification panel.
Best regards,
Clara

Comment 4

[Bernard Igiri]

Attachment: Bug 1709587 - Edit Bookmark panel save button outline r=dao,#desktop-theme-reviewers

Changed outline offset on bookmark panel save button to match spec.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/37163e0fa3f0
Edit Bookmark panel save button outline r=desktop-theme-reviewers,dao

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/37163e0fa3f0

Comment 7

[Julien Cristau [:jcristau]]

Is this worth uplifting to beta 90?

Comment 8

[Shilpa Mohanty]

Approved for uplift.

Comment 9

[Bernard Igiri]

Comment on attachment 9226909 [details]
Bug 1709587 - Edit Bookmark panel save button outline r=dao,#desktop-theme-reviewers

Beta/Release Uplift Approval Request

• User impact if declined: Bookmark panel save button appearance will not match Proton spec.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: - Edit a bookmark by clicking on the Star icon in the URL bar.

• Click in the name field.
• Use tab to navigate to the Save button and the Remove bookmark button. (In OSX tabbing to buttons may need to be enabled in the OS under System Preferences > Keyboard > Shortcuts > "Use keyboard navigation to move focus between controls")
• Note that the outline that appears on the Remove bookmark button and the Save button, and has the proper padding to make that outline visible.

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Single line CSS change reflecting CSS that is used elsewhere for the same purpose.
• String changes made/needed:

Comment 10

[Julien Cristau [:jcristau]]

Comment on attachment 9226909 [details]
Bug 1709587 - Edit Bookmark panel save button outline r=dao,#desktop-theme-reviewers

approved for 90.0b9

Comment 11

[Julien Cristau [:jcristau]]

https://hg.mozilla.org/releases/mozilla-beta/rev/ca7b43e6dc20

Comment 12

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: border.webm

This issue was verified in nightly 91.0a1 (2021-06-16) (64-bit). Updating flag accordingly.
Waiting to verify in beta.

Best,
Clara

Comment 13

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: beta.jpg

This issue was also fixed in beta 90.0b10 (64-bit), updating flag to verified as well.

Best,
Clara