Horizontal scrollbar in browser_style popup
Categories
(WebExtensions :: Untriaged, defect, P5)
Tracking
(firefox102 affected, firefox103 affected, firefox104 affected)
People
(Reporter: manikulin, Unassigned)
References
Details
Attachments
(1 file)
|
2.98 KB,
image/png
|
Details |
2022-06-28_10h31_32.png
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:101.0) Gecko/20100101 Firefox/101.0
Steps to reproduce:
I was developing an add-on with browserAction popup. Unfortunately it was rendered with a horizontal scrollbar. I read
- https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action#syntax
- https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#example
and decided to try "browser_style": true for it. I can not say that I was satisfied by the result.
- Load the extension provided below (it is a bit shortened example from MDN).
- Click on the browser action toolbar button.
- Look at the popup
manifest.json
{
"manifest_version": 2,
"name": "browser-style-popup",
"version": "0.2",
"browser_action": {
"browser_style": true,
"default_title": "Browser Style Popup",
"default_popup": "browser-style-popup.html"
}
}
browser-style-popup.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<title>Browser Style Popup</title>
</head>
<body>
<header class="panel-section panel-section-header">
<div class="icon-section-header"><!-- An image goes here. --></div>
<div class="text-section-header">Header</div>
</header>
<div class="panel-section panel-section-list">
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut">Ctrl-L</div>
</div>
</div>
<footer class="panel-section panel-section-footer">
<button class="panel-section-footer-button">Cancel</button>
<div class="panel-section-footer-separator"></div>
<button class="panel-section-footer-button default">Confirm</button>
</footer>
</body>
</html>
Actual results:
My designer skills are rather poor (it is the reason of my intention to use browser style), but I see a number of issues with the popup. The most apparent one is horizontal scrollbar. I faced the problem some time ago before changing design of scrollbars, so they were more prominent.
Expected results:
No horizontal scrollbar for recommended minimal example. Either
- rendering engine is fixed for such case,
"browser_style": trueforbrowser_actionis discouraged by docs instead of recommending such option,extension.cssis fixed to avoid overflow.
I am not alone with such problem, see
https://github.com/mdn/webextensions-examples/blob/master/webpack-modules/addon/popup/style.css
For some reason the footer creates a horizontal overflow
Horizontal scrollbar is caused by negative margins of footer buttons.
You may try [Tab] key when the popup is open to increase degree of disappointment due to appearance of the dialog.
|
||
Comment 2•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Updated•2 years ago
|
|
||
Comment 3•2 years ago
|
||
Hello,
I reproduced the issue on the latest Nightly (104.0a1/20220627215036), Beta (103.0b1/20220627170120) and Release (102.0/20220623063721) under Windows 10 x64 and Ubuntu 16.04 LTS, using the attached extension.
A horizontal scrollbar is present after opening the popup, as mentioned.
For details, see the attached screenshot.
|
|
||
Comment 4•2 years ago
|
||
|
||
Updated•2 years ago
|
|
||
Comment 5•2 years ago
|
||
Closing bug because support for browser_style feature is going to be removed (at least in MV3), see bug 1827910.
Description
•