How can I increase the size of thumbnail in new tab page?

User Help for Mozilla Firefox
Johnny_Sun
Posts: 124
Joined: August 7th, 2003, 8:08 pm

How can I increase the size of thumbnail in new tab page?

Post by Johnny_Sun »

Hi,

I have changed the new tab page to show website thumbnails by 'browser.newtabpage.activity-stream.newNewtabExperience.enabled'. But the thumbnails look too small for me. How can I increase the size of the thumbnails(I don't want to use extensions)?
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: How can I increase the size of thumbnail in new tab page

Post by jscher2000 »

You could take a look at this style code I developed in July, but have not tested again since then:

https://support.mozilla.org/en-US/quest ... er-1428277

Screenshot: https://user-media-prod-cdn.itsre-sumo. ... 9f3c53.png

The rules would go into a userContent.css file. userContent.css is the lesser known cousin of userChrome.css, and both have the same setup method: https://www.userchrome.org/how-create-u ... e-css.html
Johnny_Sun
Posts: 124
Joined: August 7th, 2003, 8:08 pm

Re: How can I increase the size of thumbnail in new tab page

Post by Johnny_Sun »

Thanks. I changed the thumbnail size to 160 but the row space is not enough and 8 thumbnails are piled up. How can I reduce the count of thumbnails in each row from 8 to 4?
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Re: How can I increase the size of thumbnail in new tab page

Post by DSperber »

Johnny_Sun wrote:I have changed the new tab page to show website thumbnails by 'browser.newtabpage.activity-stream.newNewtabExperience.enabled'. But the thumbnails look too small for me. How can I increase the size of the thumbnails(I don't want to use extensions)?
You can disable the new small website thumbnails as follows:

(1) Enter about:config in the URL address, and acknowledge the warning message if you get one to proceed (this might have been removed recently)

(2) enter "newnew" in the search, which will result in a hit for browser.newtabpage.activity-stream.newNewtabExperience.enabled, which if TRUE results in the small thumbnails.

(3) toggle the value to FALSE, to revert to the original large thumbnails.
User avatar
costark
Posts: 548
Joined: July 14th, 2004, 5:03 am

Re: How can I increase the size of thumbnail in new tab page

Post by costark »

With -- browser.newtabpage.activity-stream.newNewtabExperience.enabled -- False Setting above I have 10 rows @ 8 Ea -- and on my Monitor screen I measured each Thumbnail at 1 3/16 inch square.
I only Find a way to affect the number of Rows but NOT Items in a Row.
I don't understand -- the row space is not enough and 8 thumbnails are piled up -- as I have 80 total with Plenty of room.

Post Picture or Link of your crowded spacing? Here's my New Tab Page as reference - Imgur below
I have Firefox in the Sky Theme IF Themes matter.

https://imgur.com/ejEvmRB
W10 22H2 - SSD-HDD i5 12G -
Johnny_Sun
Posts: 124
Joined: August 7th, 2003, 8:08 pm

Re: How can I increase the size of thumbnail in new tab page

Post by Johnny_Sun »

DSperber wrote:You can disable the new small website thumbnails as follows:

(1) Enter about:config in the URL address, and acknowledge the warning message if you get one to proceed (this might have been removed recently)

(2) enter "newnew" in the search, which will result in a hit for browser.newtabpage.activity-stream.newNewtabExperience.enabled, which if TRUE results in the small thumbnails.

(3) toggle the value to FALSE, to revert to the original large thumbnails.
I have already tried that before I post this question. With toggling browser.newtabpage.activity-stream.newNewtabExperience.enabled the thumbnails are still too small to me. I would like to enlarge them so that for example I only need 5 icons each row and just make them larger.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: How can I increase the size of thumbnail in new tab page

Post by dickvl »

I use code like this in userContent.css.
I don't know if it covers all possible cases.

Code: Select all

/* about:home - about:newtab */
@-moz-document url-prefix(about:newtab), url-prefix(about:home) {
 .top-site-outer .tile .icon-wrapper {height:100% !important; width:100% !important;}
}
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Re: How can I increase the size of thumbnail in new tab page

Post by DSperber »

dickvl wrote:I use code like this in userContent.css.
I don't know if it covers all possible cases.

Code: Select all

/* about:home - about:newtab */
@-moz-document url-prefix(about:newtab), url-prefix(about:home) {
 .top-site-outer .tile .icon-wrapper {height:100% !important; width:100% !important;}
}
Well, if this was supposed to be the equivalent of setting the "newnew" item in about:config to FALSE, it doesn't accomplish that with FF 94.

And I say that because the previously successful full/large 100% filled thumbnails that were facilitated up through FF93 with the FALSE technique no longer works in FF94. So we're back to small 50% white space thumbnails. Dreadful decision.

Image

So what is now the correct CSS snippet to get these thumbnails to be 100% filled and not 50% white space, like the FALSE method used to accomplish until FF94?
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: How can I increase the size of thumbnail in new tab page

Post by jscher2000 »

You could try this. Nothing can bring back the automatic thumbnail images, but custom pictures (after some delay to retrieve/cache them?) can be styled in the same way as the icons since they replace the icons.

Code: Select all

@-moz-document url-prefix(about:home), url-prefix(about:newtab) {
  /* increase overall tile size (moves them closer together */
  .top-site-outer {
    padding: 4px !important;
  }
  .top-site-outer .tile {
    width: 104px !important;
    height: 104px !important;
  }
  /* increase icon/picture area from 48x48 to 80x80 */
  .top-site-outer .tile .icon-wrapper {
    width: 88px !important;
    height: 88px !important;
  }
  /* scale up the icon/picture from 32x32 to 80x80 (may be hideous...) */
  .top-site-outer .default-icon {
    width: 80px !important;
    height: 80px !important;
    background-size: 80px !important;
  }
}
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Re: How can I increase the size of thumbnail in new tab page

Post by DSperber »

Well, I created the userContent.css that I assume this must go in. Unfortunately it didn't really resolve the problem.

My earlier screenshot shows how it looks immediately when FF got upgraded to v94. And now that I've tried your snippet, here's how it now looks. Note that most of the thumbnails are unaffected.

Image
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: How can I increase the size of thumbnail in new tab page

Post by jscher2000 »

Hmm, maybe you need to set this preference to true in about:config?

layout.css.moz-document.content.enabled

----

After further testing, no, that isn't required for userContent.css.

Do any of your userChrome.css or userContent.css rules work? If it's your first try, make sure everything is in its proper place per my checklist here: https://www.userchrome.org/how-create-u ... e-css.html

----

So far I have only tested on two profiles on Windows 10; maybe there are other page layouts I don't know about.
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Re: How can I increase the size of thumbnail in new tab page

Post by DSperber »

I never had a userContent.css before adding your snippet to a newly created one. But my old existing userChrome.css still exists and functions perfectly. It has things like reducing space between dropdown menu items, setting background colors, etc. No problem with all old items.

Note that there are SIX thumbnails (of the 16 total) whose inner contents WERE enlarged by your code. The other 10 remain their original size, not enlarged. But is you look at my earlier screenshot, those very same specific SIX thumbnails were already clearly presented differently than the other 10. They were already showing larger interior images, filling a larger percentage of the thumbnail outer boundary. So there must have been something about those six web sites, or the associated thumbnail, which made them different from the other 10.

In any case what's most disappointing about this change is that the graphical inner content within each thumbnail, either with or without the new enlargement due to your code, that inner graphic is NOT what used to be there filling 100% of each thumbnail's outer boundary. It appears that the new graphic is coming from some other source on the web site, or from some other way. It's not just that they have been "shrunk" in FF94 with the no-longer honored NEWNEW item in about:config. They are actually different interior graphics, regardless of whether they are always-small (the other 10) or can-be-enlarged (specifically those 6).

Very annoying, that seemingly all of the new cosmetic changes (or vaporizing of old built-in cosmetic-related tweaks that no longer work after moving on past FF93) are so unattractive. What was wrong with the old appearance and behavior, that could possibly justify making things so ugly now?

Very disappointing that there's apparently no way to get back the earlier inner graphics, even if they are reduced to 50% of their size with FF93. These new graphics are NOT the same graphics.
Last edited by DSperber on November 4th, 2021, 8:11 pm, edited 1 time in total.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: How can I increase the size of thumbnail in new tab page

Post by dickvl »

You could this code a try to make the thumbnails fill the tile.

Code: Select all

/* about:home - about:newtab */
@-moz-document
  url-prefix(about:newtab),
  url-prefix(about:home) {
   .top-site-outer .tile .icon-wrapper {
     height: 100% !important;
     width: 100% !important;
   }
   .top-site-outer .default-icon,
   .top-site-outer .search-topsite {
     background-size: 100% !important;
     height: 100% !important;
     width: 100% !important;
  }
}
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Re: How can I increase the size of thumbnail in new tab page

Post by DSperber »

dickvl wrote:You could this code a try to make the thumbnails fill the tile.

Code: Select all

/* about:home - about:newtab */
@-moz-document
  url-prefix(about:newtab),
  url-prefix(about:home) {
   .top-site-outer .tile .icon-wrapper {
     height: 100% !important;
     width: 100% !important;
   }
   .top-site-outer .default-icon,
   .top-site-outer .search-topsite {
     background-size: 100% !important;
     height: 100% !important;
     width: 100% !important;
  }
}
You, sir, are a gentleman and a scholar! This item in userContent.css did the trick! Yes, all 16 thumbnails are now enlarged to fill 100% of the boundary area.

NOTE: the original six which had been enlarged due to @jscher2000's code are sharp and clear now using your code. The other 10 which had not been enlarged with @jscher2000's code so physically occupy 100% of the thumbnail boundary but are obviously simply magnified from their original smaller size. And that produces truly poor graphic quality, just like zooming in any low-res image file to very large size produces garbage quality in the result. Nevertheless, at least all 16 images are large and 100% filled.

I'm contemplating reverting to FF93, or sticking with @jscher2000's version if I stay with FF94+, just because of the offensive zoom-quality of those other 10 badly magnified thumbnails. Haven't decided yet how to proceed.

Image
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Re: How can I increase the size of thumbnail in new tab page

Post by DSperber »

Easier said than done to just revert to FF93. It's no longer possible to just reinstall the older program with a newer \Profiles, so you have to restore everything. But I'm having trouble doing even that, so at the moment I'm "stuck" at FF94 on four machines that have already gone through the update from Ff93 to FF94.

But, fortunately, I actually did have one laptop where I'd turned off automatic application of updates. And that machine was at FF93. So I can show exactly how the new tab presentation used to look, contrasted with what's been removed (for no productive reason, if you ask me) in Ff94. It looks like the older thumbnails showed both the site logo as well as a piece of the last web page for that site URL. Of course not critical, but certainly very attractive... the way it used to be. i much prefer the old appearance to the new appearance.

Image

Don't you agree, that this older presentation is much nicer to look at than the minimalist appearance of FF94, even when the thumbnails are zoomed up to 100% just to fill the space.

So why can't this old appearance just be offered as a settings option? Why did it have to be disappeared??????? Who makes these decisions?????
Post Reply