Possible to move search engine list above suggestions in search bar?
I like the search suggestions feature. I also like how installed Search Engines are listed as buttons in the search pop-down area, so I can type a search term then click a specific search engine.
What I don't like is the fact that this row of buttons is on the bottom of this area, not the top.
A very common occurrence is that I type something, the suggestions haven't loaded yet, I try to click on one of the Search Engine buttons, but then at the last second the suggestions appear, shift all the buttons away, and I end up clicking on some irrelevant google search term instead of what I wanted.
A related occurrence is that I've typed something, there are suggestions, but by the time I try to click a Search Engine button, the suggestions change (e.g. realising that e.g. there are no suggestions now that I typed an extra word or two) and the buttons suddenly move back up, causing me to click something irrelevant in the web page underneath.
Is it possible to change it so that this list of Search Engine buttons can be made to not keep moving around (as the search suggestions field is not of fixed height), e.g. by fixing it to the top of this area rather than the bottom? If it's already possible, I can't figure out where the option would be (and I did check, I also looked in about:config for terms like "search" and "suggestion" and found nothing promising). Please advise.
Chosen solution
I find CSS "grid" layout challenging to apply, but I think it could be useful in this case. What might break as a result? I don't really know yet.
/* Flip order of address bar drop-down sections */
#urlbar .urlbarView:not(.megabar):not([hidden="true"]) {
display: grid !important;
}
#urlbar .urlbarView-body-outer {
grid-column: 1;
grid-row: 2; /* Second "row" */
}
#urlbar .search-one-offs {
grid-column: 1;
grid-row: 1; /* First "row" */
}
Note: You might need to remove the @namespace line.
Ref. https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Read this answer in context 👍 1All Replies (10)
To have that section at the very top (i.e. above all other items in the drop-down list) isn't too difficult.
Add code to the userChrome.css file below the default @namespace line.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.search-one-offs { -moz-box-ordinal-group: 0; }
It is not that difficult to create userChrome.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.
You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.
You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.
See also:
Modified by cor-el
That seems to work perfectly! I added something to userChrome.css before when setting up Tree Style Tabs to my tastes. After adding your suggested lines and restarting Firefox, the Search Engine buttons are now nicely behaved on the top, never shifting.
Thanks a lot! Hopefully now at least anyone searching for this information in a similar way to me should come across this and save them some effort.
It seems that the situation has changed since the update to Firefox 70. The above-mentioned content of userChrome.css no longer has the desired effect, and the old frustrating behaviour has returned.
Please advise.
I didn't mark "Needs more info" in my previous message.
I tested it and can't make it work either, so likely something has changed that this is no longer possible. You can try to ask at Reddit to see if somebody has a possible solution.
Chosen Solution
I find CSS "grid" layout challenging to apply, but I think it could be useful in this case. What might break as a result? I don't really know yet.
/* Flip order of address bar drop-down sections */
#urlbar .urlbarView:not(.megabar):not([hidden="true"]) {
display: grid !important;
}
#urlbar .urlbarView-body-outer {
grid-column: 1;
grid-row: 2; /* Second "row" */
}
#urlbar .search-one-offs {
grid-column: 1;
grid-row: 1; /* First "row" */
}
Note: You might need to remove the @namespace line.
Ref. https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Thanks a lot, jscher2000, that seems to work! I'll test it out for a little while and report back if I have any issues.
@cor-el I'll definitely consider asking there in the future, I wasn't aware there was a specific community for that.
Those last changes worked fine, but now that I've updated to Firefox 72.0, I'm having problems again.
Specifically, the dropdown with the search engine icons is now persistent (it won't go away), and covers the top of all web pages and sidebar. Also, when starting Firefox there's something obscuring the URL bar that looks suspiciously like this dropdown but without any of the icons in it.
I guess the CSS needs to be altered again. I'll see if I can work out what to do, but I'd appreciate if someone more knowledgeable could suggest a more robust way.
What's happening specifically is that the blank white bar (only obscuring the URL bar, but across the whole screen) is present in a given Firefox window up until the search panel is brought up or used. From there, the full search panel remains persistent until the window is closed.
Note that you can possibly remove the flexible spaces at the left end and at the right end of the location bar via the right-click context menu.