cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Feedback for the new tab layout variants in the Home Page

FrancisLS
Making moves

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.

New UI at version 136.0New UI at version 136.0

 

3 ACCEPTED SOLUTIONS

Agentvirtuel
Collaborator

Hello

https://www.reddit.com/r/firefox/comments/1kxhc24/how_do_i_fix_the_shortcuts_on_the_new_tab_page

Try
1 - Go to Configuration Editor for Firefox https://support.mozilla.org/en-US/kb/about-config-editor-firefox
2 - Enter a search term browser.newtabpage.activity-stream.newtabShortcuts.refresh and set the false value

Other to try
An code userContent.css file

@-moz-document url("about:home"), url("about:newtab")
{.icon.icon-pin-small{display:none!important;}

Support https://www.userchrome.org/how-create-userchrome-css.html similar

View solution in original post

Agentvirtuel
Collaborator

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.

1.png

2.png

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...

View solution in original post

23 REPLIES 23

FrancisLS
Making moves

The image for the Old UI didn't attach to my original post. Here it is.Old UI before version 136.0Old UI before version 136.0

sir_KitKat
Making moves

They did some A/B testing and I found on reddit a lot of people that disabled the testing as a result of this. I dislike the new layout, it feels so empty.

I was in the B testing. I have my Pocket recommended stories turned on so for me everything is so cluttered and messy, but I guess if you turn off Pocket then yeah... the new tab would feel empty because everything is so small and spaced out. Exactly why I prefer the old UI.

Got it. Didn't know there was other similar feedback posts to mine because I only searched "home page" instead of "new tab" in the discussions. Accepting this as solution so it's easier for others to see the same feedbacks.

Firefox 141.0 New Tab Layout - After the latest update, the Firefox logo is back on the new tab page and the shortcut icons are way too small. How do I remove the Firefox logo and make the shortcut icons bigger. I want the old new tab layout back. I have tried all of these and nothing seems to work.

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.css1.png

With userContent.css2.png

Thank you so much! This worked!

welly0606
Making moves

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.

螢幕擷取畫面 2025-03-14 062318.jpg

I think the new comment by Agentvirtuel below was meant for you, not me. I personally don't mind the Firefox logo, but they gave some instructions to remove the logo using CSS at the end if you need it.

Agentvirtuel
Collaborator

Hello

Try

1 - Go to Configuration Editor for Firefox https://support.mozilla.org/en-US/kb/about-config-editor-firefox
2 - Enter a search term browser.newtabpage.activity-stream.newtabLayouts.variant
Check, browser.newtabpage.activity-stream.newtabLayouts.variant-b
To change a boolean (true-false) preference's value, double-click on the preference.

Then

If you wish to test https://connect.mozilla.org/t5/discussions/giant-logo/m-p/89729#M34734 userContent.css file
Or
Maybe? try this https://support.mozilla.org/en-US/questions/1316284
browser.newtabpage.activity-stream.logowordmark.AlwaysVisible

STUART69
Making moves

pinned.JPG

How can I remove the PIN grahics? They're useless and are clutter~

move your pointer to the f, you will see ... to the right, select unpin.

Agentvirtuel
Collaborator

Hello

https://www.reddit.com/r/firefox/comments/1kxhc24/how_do_i_fix_the_shortcuts_on_the_new_tab_page

Try
1 - Go to Configuration Editor for Firefox https://support.mozilla.org/en-US/kb/about-config-editor-firefox
2 - Enter a search term browser.newtabpage.activity-stream.newtabShortcuts.refresh and set the false value

Other to try
An code userContent.css file

@-moz-document url("about:home"), url("about:newtab")
{.icon.icon-pin-small{display:none!important;}

Support https://www.userchrome.org/how-create-userchrome-css.html similar

Thanks. Had to search this up earlier and found the same solution. Pinning this.

not-foxy
Making moves

this just stopped working on  141.0b1

any new suggestions?

Agentvirtuel
Collaborator

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.

1.png

2.png

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...

Agentvirtuel
Collaborator

dglowny
Making moves

Fundamentally, it seems like this problem arose from the "Variant A/B" study, and a misunderstanding between developers and the user community about what was being changed.

From a developer perspective, they thought they were evaluating between 2 choices (A and B) and ultimately they felt that B was the winner so that made that the new default. See https://bugzilla.mozilla.org/show_bug.cgi?id=1937177

But from a user perspective, there were actually 3 choices during the evaluation period (Original behavior, plus new options A and B). There are a significant number of users who liked neither A nor B, and wanted to retain the original behavior with its larger icons. These people have unfortunately been ignored.

This pisses me off to no end.
I saw a C variant in about:config while trying to find the solution to this latest phuck of jamming more content onto the NewTab page.
Whether on purpose or not, these UI changes are NEVER mentioned in the notes.
I'm about done with FF as my core browser.
Reverted back to 140.04.
**Edit** To ESR with updates blocked for the time being.
"SOFTWARE\Policies\Mozilla\Firefox\DisableAppUpdate"
Have to use the --Allow-Downgrade switch. Asshoels.

Agentvirtuel
Collaborator

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...

1.png

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;
}
}

2.png

Agentvirtuel
Collaborator

Hello

1.png

https://www.camp-firefox.de/forum/thema/138920-firefox-135-kacheln-zu-klein-und-wetter-auf-der-recht...

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;
}
}

2.png

Type a product name