1938906 - Vertical gap below userScripts opt-in warning message in add-on prompt on macOS

Status: VERIFIED FIXED

(Toolkit :: UI Widgets, defect, P3)

Description

[Alex Cornestean]

Attachment: gap_below_warning_message-macOS.png

Affected versions:

• Nightly 135.0a1 (135.0a1/20241222210617)

Affected platforms:

• macOS

Description:
The userScripts warning message in the add-on prompt has a vertical gap below the message string on macOS. The issue does not occur on Windows or Linux. See attached screenshot for more details.

Preconditions:

1. Set extensions.userScripts.mv3.enabled to true in about:config and restart the browser

Steps to reproduce:

1. Load the User Scripts Manager extension attached in https://mozilla-hub.atlassian.net/browse/WEBEXT-2024 via about:debugging
2. Go to about:addons, click on the add-on card to access its’ detailed view and then click on the “Preferences” tab
3. Click on the “Grant access to userScripts API” button to trigger the additional permissions request prompt
4. Notice the vertical gap below the warning message in the prompt

Expected results:
The extra gap below the warning message in the prompt should be removed.

Actual results:
There is a vertical gap below the warning message in the prompt.

Comment 1

[Rob Wu [:robwu]]

The "User Scripts Manager extension" from the STR is a zip file with the contents of the userScripts-mv3 directory from https://github.com/mdn/webextensions-examples/pull/576. To reproduce, clone the repo and select userScripts-mv3/manifest.json from that directory.

This is an issue with the underlying moz-message-bar component. I'll update this report and move it to the right Bugzilla location once I have finished my write-up.

Comment 2

[Rob Wu [:robwu]]

This issue is independent of the prompt. I can also reproduce it with the warning message displayed in about:addons. To test, after running step 1 of the STR, visit about:addons and go to the Permissions tab. Then open the devtools and run the following snippet:
document.querySelector("moz-message-bar[type='warning']").shadowRoot.querySelector('.message').textContent = 'l'.repeat(150)+'i'.repeat(152)
Tweak the numbers in the end as needed to get the text to reach the end of the line.

Even independently of the browser, try this STR:

1. Visit https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-message-bar--default&args=type:warning
2. Set "Change size of viewport" in the top bar to "Tablet" (mainly to get a fixed size).
3. In the Fluent tab, set the content of moz-message-bar-message to:
   .message = lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
4. Append one more letter to step 3's input field, e.g. "i".

Expected:

• step 3 and step 4 should yield the same sizes.

Actual:

• with step 4, a vertical gap appears below the message.

This appears to be a regression of bug 1848012, which added margin-inline-end to .message: https://searchfox.org/mozilla-central/rev/21710237a214fdb72d0799c297da4fb9b60ccff9/toolkit/content/widgets/moz-message-bar/moz-message-bar.css#104-106

The margin-inline-end property should not be there (be zero) if support-link is not used in the moz-message-bar.

Comment 3

[Rob Wu [:robwu]]

Attachment: Bug 1938906 - Hide gap after message if support-link is unused in moz-message-bar

Comment 4

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

Set release status flags based on info from the regressing bug 1848012

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ce992c509557
Hide gap after message if support-link is unused in moz-message-bar r=desktop-theme-reviewers,reusable-components-reviewers,emilio,hjones

Comment 6

[amarc]

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

Comment 7

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

The patch landed in nightly and beta is affected.
:robwu, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox135 to wontfix.

For more information, please visit BugBot documentation.

Comment 8

[Rob Wu [:robwu]]

The patch is not risky to uplift, so if there is anything else on ESR128 affected by this, I would recommend uplifting.

For other recent releases I don't bother - the UI where this issue was found is currently not enabled by default yet.

Comment 9

[Alex Cornestean]

Verified as Fixed. Tested on the latest Nightly (136.0a1/20250108215653) on macOS 11.3.1.

The vertical gap below the warning message in the prompt is no longer present, confirming the fix. See the attached screenshot for more details.

Comment 10

[Alex Cornestean]

Attachment: Screen Shot 2025-01-09 at 10.32.39.png