Fix for new YouTube styles. I win again.

Alluseri · Alluseri · commit 31594ca19ba1 · 2023-12-01T12:27:43.000+05:00
diff --git a/README.md b/README.md
@@ -83,5 +83,5 @@ This is a **general non-exhaustive** list of SeriStyle's features. Preview & com
 ## Credits & Gratitude
 ### Services
 All of the following services are free-of-charge, which is already worth being credited.
-- [NoEmbed](https://noembed.com) - Required by SeriStyle to convert playlists into videos.
 - [Wayback Machine/Web Archive](https://web.archive.org) - For archiving old versions of several YouTube pages to match against.
+<!-- - [NoEmbed](https://noembed.com) - Required by SeriStyle to convert playlists into videos. -->
diff --git a/bgworker.js b/bgworker.js
@@ -4,7 +4,7 @@
 
 	if (env.runtime.getBrowserInfo) {
 		let BrowserInfo = await env.runtime.getBrowserInfo();
-		IsFirefox = BrowserInfo.name == "Firefox" || BrowserInfo.vendor == "Mozilla";
+		IsFirefox = BrowserInfo.name == "Firefox" || BrowserInfo.vendor == "Mozilla"; // yeah dawg, if you're using smth that doesn't follow this rule, GFY LMFAOOOOOOO FORK USER (user issue frfr)
 	}
 	env.runtime.onMessage.addListener((Message, Sender, Respond) => {
 		switch (Message.Operation) {
@@ -21,13 +21,8 @@
 				return;
 		}
 	});
-	env.webNavigation.onHistoryStateUpdated.addListener(function(Data) {
-		if (Data == null || !Data.url.includes("youtube")) return;
-		try {
-			console.log(Data);
-			env.tabs.sendMessage(Data.tabId, { Operation: "SeriStyle_HistoryState", Args: [Data.url] });
-		} catch {
-			console.log("Receiving end error.", JSON.stringify(Data, null, "\t"));
-		}
+	env.webNavigation.onHistoryStateUpdated.addListener(function (Data) {
+		if (Data == null || !new URL(Data.url).hostname.includes("youtube")) return;
+		env.tabs.sendMessage(Data.tabId, { Operation: "SeriStyle_HistoryState", Args: [Data.url] }).catch(() => console.log("Receiving end error.", JSON.stringify(Data, null, "\t")));
 	});
 })();
diff --git a/html/config.css b/html/config.css
@@ -1,8 +1,6 @@
 body {
-	/* I'd like to have a photo here but everything is licensed af :skull: */
 	background: #000;
 	font-family: Roboto, Arial, Helvetica, sans-serif;
-	width: 100%;
 	align-items: center;
 }
 
diff --git a/html/popup.html b/html/popup.html
@@ -15,7 +15,7 @@
 	<div id="central-logo">
 		<img src="../icons/default64.png">
 		<span id="central-name">SeriStyle</span>
-		<span class="central-sub">v1.12.1</span>
+		<span class="central-sub">v1.12.2</span>
 		<span class="central-sub" id="storage-status"></span>
 	</div>
 	<div id="interactions">
diff --git a/html/popup.js b/html/popup.js
@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', function () {
 	});
 	document.getElementById("low-i-debug").onclick = async () => {
 		var DebugInfo = [
-			"- SeriStyle v1.12.1",
+			"- SeriStyle v1.12.2",
 			"- " + navigator.userAgent,
 			"- " + StorageMode
 		];
diff --git a/manifest.firefox.json b/manifest.firefox.json
@@ -2,7 +2,7 @@
 	"manifest_version": 3,
 	"name": "SeriStyle",
 	"author": "Nekoseri",
-	"version": "1.12.1",
+	"version": "1.12.2",
 	"description": "Bring the early-2021 UI back to YouTube!",
 	"icons": {
 		"16": "icons/default16.png",
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
 	"manifest_version": 3,
 	"name": "SeriStyle",
 	"author": "Nekoseri",
-	"version": "1.12.1",
+	"version": "1.12.2",
 	"description": "Bring the early-2021 UI back to YouTube!",
 	"icons": {
 		"16": "icons/default16.png",
diff --git a/scripts/defaults.js b/scripts/defaults.js
@@ -1,8 +1,9 @@
-this.SeriStyleMetaVersion = 4;
+this.SeriStyleMetaVersion = 5;
 this.SeriStyleMetaNotice = [
 	"introduced new settings:",
-	"Videopage changes -> Fix content padding",
-	"Videopage changes -> Force min. content padding",
+	"Videopage changes -> Hide donation shelves",
+	"Advanced -> Improve action bar mutation success rate (BETA)",
+	"Advanced -> Disable all hotfixes",
 ].join("\n");
 
 this.SeriStyleLocales = {
@@ -23,7 +24,7 @@ this.SeriStyleLocales = {
 			Advanced: "Advanced settings"
 		},
 		Messages: {
-			UpdateSettings: "SeriStyle was updated to version 1.12.1, which " + this.SeriStyleMetaNotice + "\n\nDo you want to visit the settings page(opens in a new tab)?"
+			UpdateSettings: "SeriStyle was updated to version 1.12.2, which " + this.SeriStyleMetaNotice + "\n\nDo you want to visit the settings page(opens in a new tab)?"
 		}
 	}
 };
@@ -152,6 +153,13 @@ this.SeriStyleSettings = {
 			},
 			Value: false
 		},
+		HideDonationShelves: {
+			Kind: 0,
+			Name: {
+				"en-US": "Hide donation shelves"
+			},
+			Value: false
+		},
 		HideRecFilters: {
 			Kind: 0,
 			Name: {
@@ -365,6 +373,20 @@ this.SeriStyleSettings = {
 				"en-US": "$ms"
 			}
 		},
+		ActionBarPlus: {
+			Kind: 0,
+			Name: {
+				"en-US": "Improve action bar mutation success rate (BETA)"
+			},
+			Value: false
+		},
+		DisableHotfixes: {
+			Kind: 0,
+			Name: {
+				"en-US": "Disable all hotfixes"
+			},
+			Value: false
+		},
 		DisableCSS: {
 			Kind: 0,
 			Name: {
@@ -437,4 +459,4 @@ this.SvgMic = '<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focu
 this.SvgMenu = '<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" class="style-scope yt-icon"></path></g></svg>';
 
 this.PathVerified = "M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10 S17.52,2,12,2z M9.92,17.93l-4.95-4.95l2.05-2.05l2.9,2.9l7.35-7.35l2.05,2.05L9.92,17.93z";
-this.PathProducer = "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z";
+this.PathProducer = "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z";
diff --git a/scripts/page-observer.js b/scripts/page-observer.js
@@ -22,7 +22,7 @@ var GeneralTransformerBurned = false;
 var GT_Burn1 = false;
 var GT_Burn2 = false;
 
-var PageObserver = new MutationObserver(async Mutations => { // TODO: I have no idea why this is async. I'm keeping it because I'm scared.
+var PageObserver = new MutationObserver(async Mutations => {
 	var Inserted = [];
 	Mutations.forEach(Mutation => {
 		for (let i = 0; i < Mutation.addedNodes.length; i++) {
diff --git a/scripts/transformer-css.js b/scripts/transformer-css.js
@@ -100,6 +100,11 @@ document.head.appendChild(DomUtils.BuildElement("style", {
 			"}" +
 
 			/* Playlists */
+			// Remove roundings
+			"ytd-playlist-video-renderer{border-radius:0px;}" +
+			// Old title font
+			"#text.yt-sans-28{font-family:Roboto,Arial,sans-serif;font-size:24px;font-weight:400;line-height:34px;text-decoration-color:#FFF;text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-size-adjust:100%;word-break:break-word;}" + // Alternative selector: .thumbnail-and-metadata-wrapper>div>yt-dynamic-sizing-formatted-string>div>yt-formatted-string
+			// True Old
 			(SeriStyleSettings.Playlist.TrueOld.Value ? // TODO: Move duplicates outside of this scope
 				// Restore position & dimensions, fix colors
 				"ytd-browse.ytd-page-manager{padding-top:0px;}" +
@@ -114,14 +119,10 @@ document.head.appendChild(DomUtils.BuildElement("style", {
 				"yt-formatted-string.byline-item>span{display:inline-block;}" +
 				"div.metadata-stats.ytd-playlist-byline-renderer{max-height:unset;overflow:visible;display:block;}" +
 				"yt-formatted-string.byline-item:not(:nth-child(6))::after{content:'•';margin-left:4px;margin-right:2px;}" +
-				// Old title font(might affect certain other entries)
-				"#text.yt-sans-28{font-family:Roboto,Arial,sans-serif;font-size:24px;font-weight:400;line-height:34px;text-decoration-color:#FFF;text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-size-adjust:100%;word-break:break-word;}" + // Alternative selector: .thumbnail-and-metadata-wrapper>div>yt-dynamic-sizing-formatted-string>div>yt-formatted-string
 				// Remove cover thumbnail rounding
 				(SeriStyleSettings.General.ThumbnailRoundings.Value ? ".image-wrapper{border-radius:0px;}" : "") +
 				// Old video list padding
 				"ytd-two-column-browse-results-renderer[page-subtype='playlist'].ytd-browse,ytd-browse[page-subtype='playlist']>#alerts{padding-left:360px;}" +
-				// Remove roundings
-				"ytd-playlist-video-renderer{border-radius:0px;}" +
 				//
 				""
 				:
@@ -130,10 +131,6 @@ document.head.appendChild(DomUtils.BuildElement("style", {
 				"yt-formatted-string.byline-item>span{display:inline-block;}" +
 				"div.metadata-stats.ytd-playlist-byline-renderer{max-height:unset;overflow:visible;display:block;}" +
 				"yt-formatted-string.byline-item:not(:nth-child(6))::after{content:'•';margin-left:4px;margin-right:2px;}" +
-				// Old title font(might affect certain other entries)
-				"#text.yt-sans-28{font-family:Roboto,Arial,sans-serif;font-size:24px;font-weight:400;line-height:34px;text-decoration-color:#FFF;text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-size-adjust:100%;word-break:break-word;}" + // Alternative selector: .thumbnail-and-metadata-wrapper>div>yt-dynamic-sizing-formatted-string>div>yt-formatted-string
-				// Remove roundings
-				"ytd-playlist-video-renderer{border-radius:0px;}" +
 				//
 				""
 			) +
diff --git a/scripts/transformer-general.js b/scripts/transformer-general.js
@@ -23,7 +23,7 @@ $(SelSearchIcon).innerHTML = SvgSearch;
 $(SelMicIcon).innerHTML = SvgMic;
 $(SelMenuIcon).innerHTML = SvgMenu;
 
-setInterval(function() { // It's not my problem that everyone is stupid enough not to fix Subtree MutationObserver for the whole existence of this class
+setInterval(function () { // It's not my problem that everyone is stupid enough not to fix Subtree MutationObserver for the whole existence of this class
 	$$("path").forEach(Element => {
 		var Exel = btoa(Element.attributes.d?.value);
 		if (Exel == ExelVerified) {
@@ -36,14 +36,14 @@ setInterval(function() { // It's not my problem that everyone is stupid enough n
 
 var ShareUrl;
 var OldU;
-var FixShareIntv = setInterval(function() { // I hate the fact that you can't use intervals for checking value change, and on god I will not use Reflection for this
-	if (!ShareUrl) if (!(ShareUrl = document.getElementById("share-url"))) return; // It's a singleton from my observations at least
+var FixShareIntv = setInterval(function () { // See above comment
+	if (!ShareUrl) if (!(ShareUrl = document.getElementById("share-url"))) return;
 	var SuVal = ShareUrl.value;
 	if (SuVal != OldU && SuVal.includes("si=")) {
-		// ShareUrl.value = OldU = SuVal.split("?si=")[0];
-		OldU = SuVal.replace(/&{0,1}si=.+?(&|$)/, "");
-		if (OldU.endsWith("?")) OldU = OldU.substr(0, OldU.length - 1); // Oh no, cringe
-		ShareUrl.value = OldU;
+		var Uv = new URL(SuVal);
+		var Sep = Uv.searchParams;
+		Sep.delete("si");
+		ShareUrl.value = OldU = Uv.toString();
 	}
 }, SeriStyleSettings.Advanced.ShareFixInterval.Value);
 
diff --git a/scripts/transformer-launch.js b/scripts/transformer-launch.js
@@ -1,4 +1,4 @@
-if (SeriStyleSettings.General.OldColors.Value) { // TODO: Here and defaults... thing for icons, maybe not
+if (SeriStyleSettings.General.OldColors.Value) {
 	var GeneralObserver = new MutationObserver(async Mutations => {
 		Mutations.forEach(Mutation => {
 			for (let i = 0; i < Mutation.addedNodes.length; i++) {
@@ -14,4 +14,6 @@ if (SeriStyleSettings.General.OldColors.Value) { // TODO: Here and defaults... t
 	});
 
 	$$("[darker-dark-theme]").forEach(Element => Element.removeAttribute("darker-dark-theme"));
-}
+}
+
+// TODO: Icon(prod, verif) transformer goes here?
diff --git a/scripts/transformer-videopage.js b/scripts/transformer-videopage.js
@@ -1,4 +1,4 @@
-/* jshint -W084, -W027 */
+// jshint -W084, -W027
 
 var SelBottomRow = "#bottom-row";
 var SelTopRow = "#top-row.ytd-watch-metadata";
@@ -9,8 +9,9 @@ var SelFlexibleButtonsBar = "#menu.ytd-watch-metadata #flexible-item-buttons";
 var SelFlexibleButtons = SelFlexibleButtonsBar + ">.style-scope";
 var SelContextMenuButtons = "#items>ytd-menu-service-item-renderer";
 var SelContextMenuOpen = "#actions #button-shape button";
-var SelShareBtn = "#actions-inner #top-level-buttons-computed>ytd-button-renderer";
-var SelLikeButtons = "#actions-inner ytd-segmented-like-dislike-button-renderer button";
+var SelTopLevelButtons = "#actions-inner #top-level-buttons-computed";
+var SelShareBtn = SelTopLevelButtons + ">ytd-button-renderer";
+var SelLikeButtons = "#actions-inner segmented-like-dislike-button-view-model button";
 var SelDescription = "#description.ytd-watch-metadata";
 var SelDropdown = "tp-yt-iron-dropdown.ytd-popup-container";
 var SelSubButton = "#owner>#subscribe-button";
@@ -87,18 +88,27 @@ document.head.appendChild(DomUtils.BuildElement("style", {
 			"#contents>ytd-reel-shelf-renderer{display:none;}" +
 			// Disable rolling likes
 			"animated-rolling-character,yt-animated-rolling-number{transition:none;}" +
-			// Experimental, related to a (bug?)
+			// Force content centering
 			(SeriStyleSettings.VideoPage.ForceCentering.Value ? "#columns.ytd-watch-flexy{justify-content:center;}" : "") +
-			// Force content padding, added as part of above, but for weirdos
-			(FCP ? "#columns.ytd-watch-flexy{padding-left:"+FCP+"px;padding-right:"+FCP+"px;}" : "") + // I don't feel comfortable just enforcing padding to 0 without a reason. Same for verticals.
+			// Force content padding, usually not needed
+			(FCP ? "#columns.ytd-watch-flexy{padding-left:" + FCP + "px;padding-right:" + FCP + "px;}" : "") + // I don't feel comfortable just enforcing padding to 0 without a reason. Same for verticals.
+			// Hide donation shelves
+			(SeriStyleSettings.VideoPage.HideDonationShelves.Value ? "#donation-shelf{display:none;}" : "") +
+			(!SeriStyleSettings.Advanced.DisableHotfixes.Value ?
+				// HF #1: Disable small double-icons on action bar since I replace all of them
+				"#top-level-buttons-computed yt-icon>yt-icon-shape{display:none;}" +
+				//
+				""
+				: "") +
+			//
+			"" +
 			//
 			""
 		).replaceAll(/(?<!!important);/g, "!important;"), // <3 yt
 	"id": "seristyle-tf-videopage"
 }));
 
 const ActionBarFn = function (Inserted) {
-	// They usually don't come in amounts greater than 2, but we'll do it nevertheless:
 	var Icons = Inserted.filter(Element => Element.tagName == "DIV" && Element.children[0]?.tagName == "svg");
 
 	var AddToPlaylist = FindByExel(Icons, ExelAddToPlaylist);
@@ -109,16 +119,54 @@ const ActionBarFn = function (Inserted) {
 
 	if (SeriStyleSettings.VideoPage.HideCreateClipButton.Value) {
 		var CreateClip = FindByExel(Icons, ExelCreateClip);
-		CreateClip?.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.remove();
+		CreateClip?.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.remove(); // yt-button-view-model
 	}
 	if (SeriStyleSettings.VideoPage.HideDonateButton.Value) {
 		var Thanks = FindByExel(Icons, ExelDonate);
-		Thanks?.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.remove();
+		Thanks?.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.remove(); // yt-button-view-model
 	}
 };
 
-const Reinject = () => {
+var ActionBarObserver = new MutationObserver(async Mutations => {
+	var Inserted = [];
+	Mutations.forEach(Mutation => {
+		for (let i = 0; i < Mutation.addedNodes.length; i++) {
+			Inserted.push(Mutation.addedNodes[i]);
+		}
+	});
+
+	ActionBarFn(Inserted);
+});
+var TopLevelButtonsObserver = new MutationObserver(async Mutations => {
+	var Inserted = [];
+	Mutations.forEach(Mutation => {
+		for (let i = 0; i < Mutation.addedNodes.length; i++) {
+			Inserted.push(Mutation.addedNodes[i]);
+		}
+	});
+
+	if (Inserted.length == 0) return;
+
+	var Viewmodel = Inserted.find(Element => Element.tagName == "SEGMENTED-LIKE-DISLIKE-BUTTON-VIEW-MODEL");
+	if (Viewmodel) {
+		console.log("[SeriStyle|Videopage] Installed reinjection binding.");
+		var Mb = new MutationObserver(async Mutations => {
+			// TODO: Might need added elements here? Ehh, it works for now right
+			console.log("[SeriStyle|Videopage] Proc'd the reinjection binding, uninstalling soon.");
+			Reinject(Mb);
+		});
+		Mb.observe(Viewmodel, {
+			childList: true
+		});
+	} else console.log("[SeriStyle|Videopage] Warning: Failed to find l/d viewmodel, reinjection not possible: ", Inserted);
+});
+
+const Reinject = (Cleanup) => { // TODO: Call on no internet
 	try {
+		Cleanup?.disconnect();
+		ActionBarObserver.disconnect();
+		TopLevelButtonsObserver.disconnect();
+
 		// Apply old SVG to Share and Menu
 		if (_ = $(SelShareBtn)) _.querySelector("yt-icon").innerHTML = SvgShare;
 		$(SelContextMenuOpen).querySelector("yt-icon").innerHTML = SvgActionMenu;
@@ -131,19 +179,16 @@ const Reinject = () => {
 		// Remove RYD's border because it overrides SeriStyle's
 		if (_ = $(SelTopRow).attributes.style) _.value = "";
 
-		(new MutationObserver(async Mutations => {
-			var Inserted = [];
-			Mutations.forEach(Mutation => {
-				for (let i = 0; i < Mutation.addedNodes.length; i++) {
-					Inserted.push(Mutation.addedNodes[i]);
-				}
-			});
-
-			ActionBarFn(Inserted);
-		})).observe($(SelFlexibleButtonsBar), { // Should be GC'd because the bar should be completely regenerated on reinject cond
+		ActionBarObserver.observe($(SelFlexibleButtonsBar), {
 			childList: true,
 			subtree: true
 		});
+		TopLevelButtonsObserver.observe($(SelTopLevelButtons), {
+			childList: true
+		});
+
+		if (SeriStyleSettings.Advanced.ActionBarPlus.Value)
+			ActionBarFn(Array.from($(SelFlexibleButtonsBar).children));
 	} catch (Exception) {
 		console.log("[SeriStyle|Videopage] There was an error during the injection process:");
 		console.log(Exception);
diff --git a/update.firefox.json b/update.firefox.json
@@ -100,6 +100,15 @@
 							"strict_min_version": "109"
 						}
 					}
+				},
+				{
+					"version": "1.12.2",
+					"update_link": "https://github.com/Alluseri/SeriStyle/releases/download/1.12.2/SeriStyle-1.12.2.xpi",
+					"applications": {
+						"gecko": {
+							"strict_min_version": "109"
+						}
+					}
 				}
 			]
 		}

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,6 @@`
`1`	`1`	`body {`
`2`		`- /* I'd like to have a photo here but everything is licensed af :skull: */`
`3`	`2`	`background: #000;`
`4`	`3`	`font-family: Roboto, Arial, Helvetica, sans-serif;`
`5`		`- width: 100%;`
`6`	`4`	`align-items: center;`
`7`	`5`	`}`
`8`	`6`