[New New UI] Disable blurred bg behind image previews, hide post separators and add features to Custom Feed

[bmndc]

In case you need something for the changelog later:

[NEW FEATURES]

• Add option to hide post separators in feeds
• Add option to hide the background blur behind image previews (video, GIF players and spoiler covers are not affected)
• Show Post Flairs on the Home Feed now shows flairs in custom feeds
• Add option to hide the information sidebar of custom feeds (no exclusion yet)
• Add option to resize the content width of custom feeds
• Bring back Old New UI features: full width subreddit banner, compact rule list, compact header bar and side menu
• (Experimental) Added option to resize the entire main container instead of just the feeds

[BUG FIXES & TWEAKS]

• Add .75rem padding to posts & default to .6rem margins between posts to compensate Reddit's bad padding settings
• Posts with no flairs now no longer have flair containers when Show Post Flairs on the Home Feed is on
• Resizing text now applies to comments in profiles and crossposted posts
  Font Size Change is not reflected on Profile page in new new reddit.  #99
• Raised the limit of Side Menu Width to 500px
• Back button on post view now remains inside the post container at all zoom levels
• Post borders now only shows in feeds and search results, but not in post view or moderation queue with compact view
• Theme Border Radius now only targets elements known to be outside shadow DOMs instead of blindly targetting all
• Theme Border Radius now applies to comment search results in post view
• [Old UI] Post titles and buttons are no longer capitalised in Modernised Old UI... will properly fix that later
• Minor style tweaks to hover card when Show Post Authors on the Home Feed is on

Already addressed in #107 and #108:

• Fix an issue in which the collapsed side menu leaves some space w/ Hide the Side Menu/Side Menu Toggle Button
  Long letters cut off when resizing post titles #97 Changing font size incorrectly changes line height #103
• Fix an issue in which navigating pages causes side menu to forget its collapsed status w/ Side Menu Toggle Button
• Fix an issue in which changing font sizes will cut off the descenders of letters (line-height now set to around 1.4–1.6)
• Fix an issue in which Side Menu Width doesn't work with Side Menu Toggle Button
• Fix an issue in which the main content may display over the side menu when Feed Offset is on
• Fix an issue in which the side menu and right sidebar leaves some header space w/ Non-Sticky Header Bar/Hide the Header Bar

[TODO]

• Add inputs under Styles to switch between html.theme-light and html.theme-dark
• Add option to only change the background color by changing the native --color-neutral-background

~ tested on Firefox 133.0.3, Windows 11 ~

[joelacus]

This is great, thanks! I've just replied to your post on Reddit.
I'll release an update I've been working on soon, and then I'll have a look at your commits. I made a few breaking changes, so I'll let you know what needs updating.

[bmndc]

Awesome. I'll be on the lookout for it and make changes as necessary. It might take some time though, probably in the next couple of weeks—have to prioritise some work first!

Also I've been noticing that many features are CSS patches, so I wonder if it might be possible for a v2 rewrite with CSS code being in a couple of files, and we use JS to toggle features with CSS classes and variables, with some JS-exclusive features. Makes the code a lot cleaner, but I understand there would be a problem with the extension stores.

Hopefully after this I can try to focus more on the bugs & feature requests. If it's okay, I'll bring back some more features from Old New UI as well.

[joelacus]

It might take some time though, probably in the next couple of weeks—have to prioritise some work first!

No worries man, no rush. I appreciate your help with all this.

I wonder if it might be possible for a v2 rewrite with CSS code being in a couple of files

This is how I initially had it actually, but the file was monolithic and I was tired of scrolling up and down trying to find sections to edit. I thought that dynamically creating and removing stylesheets would be easier to maintain, and would also reduce unnecessary code loaded on the webpage.

Although thinking about it now, I could keep the css in the javascript files for each feature as variables, then when webpack builds, it could import all the css from each feature into one main css file the page will load. This would make it easy to maintain, but the page would still load all the css for all the features. I suppose it wouldn't be too big. I'll do some testing.

Hopefully after this I can try to focus more on the bugs & feature requests. If it's okay, I'll bring back some more features from Old New UI as well.

Sounds good, thanks :)

Regarding the conflicts, I renamed some of the files and folders. I replaced "-" with "_" in some names, looks better.

"content > functions" --> "content > tweaks"
"content_load_saves.js" --> "tweak_loader.js"
"content-first > functions > observers" --> "content_first > functions > tweak_loaders"
"observers_newnew.js" --> "tweak_loader_newnew.js"
"observers_oldnew.js" --> "tweak_loader_oldnew.js"
"observers_old.js" --> "tweak_loader_old.js"
"content > functions > expand_feed_post" --> "content > tweaks > resize_elements"

Also, for every option input it sends a message to the popup_listener with this code:

BROWSER_API.tabs.query({ currentWindow: true }, function (tabs) {
	tabs.forEach(function (tab) {
		if (tab.url.match('https://.*.reddit.com/.*') && tab.discarded == false) {
			BROWSER_API.tabs.sendMessage(tab.id, { hideSideMenu: true });
		}
	});
});

To optimise the code and make it cleaner, I turned this into a function. You can now call it like this:

sendMessage({ hideSideMenu: true });