How can I restore the Firefox 89 design to the old one?
Specifically the tab design. I can't tell (easily) what tab is open.
I can't find anything in the menus.
I'm running Firefox 89 on Ubuntu 21.04 (Hirsute Hippo).
How can I restore the Firefox 89 design to the old one?
Specifically the tab design. I can't tell (easily) what tab is open.
I can't find anything in the menus.
I'm running Firefox 89 on Ubuntu 21.04 (Hirsute Hippo).
copy and paste this to the URL bar:
about:config
search this:
proton
set the following values to false:
browser.proton.enabled
browser.proton.modals.enabled
browser.proton.doorhangers.enabled
browser.proton.contextmenus.enabled
browser.proton.*.enabled
flags are planned to be removed in v90; so this probably won't be a long term fix. V78 ESR will remain an option until later in the year, but will be retired in favor of v91 ESR at the end of October. https://bugzilla.mozilla.org/show_bug.cgi?id=1709425 https://wiki.mozilla.org/Release_Management/Calendar
– Dan Is Fiddling By Firelight
Jun 04 '21 at 13:56
browser.proton.enabled
not suffice? As the other things seem to be underneath this one in the hierarchy?
– Levente
Jun 06 '21 at 19:31
browser.proton.enabled
set to false is indeed enough. (The account of the answer's author has been removed.)
– cipricus
Jun 08 '21 at 15:51
Alternative solution: use a theme like Qiyu Light that highlight the current tab:
Original idea: https://www.reddit.com/r/firefox/comments/npz18m/firefox_89_new_tab_design_is_awful/h08fdnp/
The option to disable the new UI will inevitably be removed from about:config
. A more long-term solution is to use userChrome.css.
It can change the tab colors, but I didn't have to use it for this purpose: I have FF theme set to 'System' and the system theme I'm using paints the inactive tabs (and the rest of the top bar) black even after the update to FF 89.
My primary complaints were:
Both can be fixed. Check this for detailed instructions, but in short:
In about:config
, set toolkit.legacyUserProfileCustomizations.stylesheets
to true
.
Open the profile folder: in about:support
, find the row called Profile Folder
and click Open Folder
next to it.
In that directory, create a directory called chrome
, and in it create file userChrome.css
.
userchrome.org has some suggestions for what to put in there, aimed at achieving pre-FF-98 look (among other things).
I ended up with following file, which decreases bookmark menu spacing, and tweaks the tab bar design (which decreases its height and makes it look almost like before the update).
Note that any changes to the file are applied only after restarting FF.
/*** Tighten up drop-down/context/popup menu spacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 4px !important;
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}
/*** Proton Tabs Tweaks ***/
/* Adjust tab corner shape, optionally remove space below tabs */
#tabbrowser-tabs {
--user-tab-rounding: 0px;
}
@media (-moz-proton) {
.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
}
/* Inactive tabs: Separator line style */
@media (-moz-proton) {
.tab-background:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) {
border-right: 1px solid rgba(0, 0, 0, .20) !important;
}
/* For dark backgrounds /
[brighttext="true"] .tab-background:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) {
border-right: 1px solid var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20)) !important;
}
.tab-background:not([selected=true]):not([multiselected=true]) {
border-radius: 0 !important;
}
/ Remove padding between tabs */
.tabbrowser-tab {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
There is also a ready-made userChrome.css fix at: https://github.com/black7375/Firefox-UI-Fix