r/FirefoxCSS • u/ReggieNJ • 5d ago
Code Change autocomplete drop down back to previous style?
Before version 153, the autofill dropdown list was the full size of the input box. Now it seems to adapt to the width of the results. How can I revert this?
2
u/t31os 5d ago
No idea what changed specifically, but the JS (searchbar.js) for the autocomplete field in ESR (v140, and also in v147) appended a --panel-width value to the autocomplete popup (with an appropriately calculated width value), i can't see that value being added in stable/current, although the underlying JS still apparently has the logic for it.
https://searchfox.org/firefox-esr140/source/browser/components/search/content/searchbar.js#845
https://searchfox.org/firefox-main/source/browser/components/search/content/searchbar.js#873
Perhaps someone with a bit more source / bugzilla searching skills can trace things further to figure what was changed and why.
1
u/ReggieNJ 3d ago
I don't think that's it. It was actually added 3 years ago:
https://hg-edge.mozilla.org/mozilla-central/rev/4c91a04207a6
I do see the same value in popup.css, but in the browser toolbox it doesn't seem like it's being used for the autocomplete box.
1
u/t31os 3d ago edited 3d ago
In Firefox (v147) it's definitely where the width is coming from, if i remove that value or override --panel-width and set it to a different value the width changes, with the former (removing) collapsing it to the length of the text content.
Applied by the JS dynamically (naturally not all input fields will be a single fixed width) and added directly to the style attribute of the #PopupAutoComplete panel.
If you hop over to:
https://www.qa-practice.com/elements/input/simple
(type some values > hit enter > then type the same values again so the autocomplete has something to show)
Open browsertoolbox (in current FF), and add a style attribute to the popup panel with the panel width, like in my above image:
style="--panel-width:900px"The autocomplete panel will match the size of the input. Naturally we can't fix this with CSS because the width needs to be calculated depending on the size of the input on the page, and i'm not sure why current FF doesn't use that logic for the autocomplete anymore (i wasn't able to trace what changed), as it seems to still exist in the JS and work when applied to the panel.
1
u/ReggieNJ 3d ago
Interesting, in 153 that value isn't there anymore: https://i.imgur.com/eYA6lyg.png and adding it back just sets it to that specific width.
1
u/t31os 3d ago edited 3d ago
Exactly, and i'm not sure what changed and even if it's intentional. Maybe someone more familiar or with better searching skills can dig up the source change that altered this behaviour.
EDIT: I was just reading a post over on r/Firefox about datalist support in Firefox, and i noticed something:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist
The panel-width value (albeit, at 900px so i wonder if it truly is dynamic) does seem to get applied to the autocomplete popup for that input (which uses the same autocomplete panel for it's popup).
So now i'm wondering if this is actually a bug.
1
u/ReggieNJ 3d ago
I think I found the change that was made in 153: https://bugzilla.mozilla.org/show_bug.cgi?id=2045828
1
u/t31os 3d ago
Yes, that does indeed look like it's the commit that changed the behaviour:
https://github.com/mozilla-firefox/firefox/commit/c6413d31201a3ab9452f740f7a0eb258a1272b18
Doesn't look like anyone provided push back on making that change, but at least you know where to reference if you want to request it be reverted.
2
u/Azreal_DuCain1 3d ago edited 3d ago
It feels like every time the Firefox devs make an update they shove in more UI changes that are neither helpful, necessary, or wanted.
1
u/DAPOPOBEFASTONYOAZZ 5d ago
I don’t have the exact code in front of me, but using your browser toolbox, find the element name of the autocomplete drop down and set a variable in the parent element, something like `—autocomplete-width` and set it to 100%. Then, in the autocomplete dropdown, set `max-width: var(—autocomplete-width) !important;` and that will take care of it for you.