After updating to Firefox 136.0 I saw a new UI for the Home Page where the shortcut icons are now too small, more spaced out, and with the recommended Pocket stories now peeking out of the bottom of the page with no way to hide it beside just turning off Pocket entirely from the Home Page settings. This new UI, respectfully, is awful to look at (see image inserted below). It looks more like a Bing homepage with how cluttered the screen looks like and how the recommended stories are now obnoxiously "in-your-face".
I had to go to about:config and set browser.newtabpage.activity-stream.newtabLayouts.variant-b to false. From what I see, the new tab layout variants A and B look pretty much the same, and I don't like them. I prefer to have the old UI before 136.0 where it has bigger shortcut icons, the recommended Pocket stories are hidden below the shortcuts and you have to scroll down to see them, and the Firefox logo is above the search bar (see image attached, not below). The old UI has a better use of space, is less cluttered, and looks better overall. And if the team really wants to have the new variants A or B, then at least let us have the option to choose in the Settings the layouts we want, whether it's the old UI or the new ones you are pushing.
Hello
About, browser.newtabpage.activity-stream.newtabLayouts.variant, preferences no longer exist, on Firefox beta 141.0b1 and Firefox nightly 142.0a1
Home Page where the shortcut icons are now too small, more spaced out.
Maybe perform tests with userContent.css, a test carried out above.
Take a look at https://www.camp-firefox.de/forum/thema/139018-änderungen-der-kachelansicht-bei-startseite-und-neuem...
The image for the Old UI didn't attach to my original post. Here it is.
Hello
https://connect.mozilla.org/t5/discussions/feedback-for-the-new-tab-layout-variants-in-the-home-page...
Maybe, perform tests with userContent.css
@-moz-document url(about:newtab), url(about:home) {
.logo-and-wordmark-wrapper {
display: none !important;
}
li.top-site-outer {
margin-top: -10px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
}
.top-site-outer .tile .icon-wrapper {
min-width: 100% !important;
min-height: 100% !important;
}
.top-site-outer .title.pinned span {
padding: 0 0px !important;
}
}Copy/paste the code into notepad
Save
Type: All files
userContent.css
Create a chrome folder
Move userContent.css to your chrome folder
Go to your profile folder https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-prof...
Move your chrome folder to your profile folder
Go to Configuration Editor https://support.mozilla.org/en-US/kb/about-config-editor-firefox
Enter a search term toolkit.legacyUserProfileCustomizations.stylesheets
Double-click on the preference, to set its value to true
And restart Firefox
An feedback https://support.mozilla.org/en-US/questions/1524318#answer-1750754
Screenshot3, an experiment, with the help of userContent.css
Other illustration
Without userContent.css
With userContent.css
I really don't need that oversized Firefox icon at the top!!!!
It makes my other shortcuts super small.
This update sucks. It really scares me.
How can I remove the PIN grahics? They're useless and are clutter~
Hello
About, browser.newtabpage.activity-stream.newtabLayouts.variant, preferences no longer exist, on Firefox beta 141.0b1 and Firefox nightly 142.0a1
Home Page where the shortcut icons are now too small, more spaced out.
Maybe perform tests with userContent.css, a test carried out above.
Take a look at https://www.camp-firefox.de/forum/thema/139018-änderungen-der-kachelansicht-bei-startseite-und-neuem...
Hello
Customize items on your Firefox New Tab page
https://support.mozilla.org/en-US/kb/customize-items-on-firefox-new-tab-page
Weather
Other subject https://www.camp-firefox.de/forum/thema/138920-firefox-135-kacheln-zu-klein-und-wetter-auf-der-recht...
By way of illustration below
@-moz-document url(about:newtab), url(about:home) {
.logo-and-wordmark-wrapper {
display: none !important;
}
li.top-site-outer {
margin-top: -10px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
}
.top-site-outer .tile .icon-wrapper {
min-width: 100% !important;
min-height: 100% !important;
}
.top-site-outer .title.pinned span {
padding: 0 0px !important;
}
.weather {
margin-right: 1250px !important;
}
}
Hello
I tested an experiment
@-moz-document url(about:newtab), url(about:home) {
.logo-and-wordmark-wrapper {
display: none !important;
}
.top-site-outer .default-icon {
scale: 2.0 !important;
}
.top-site-outer .tile .icon-wrapper {
min-width: 120% !important;
min-height: 120% !important;
}
}
