Optimize loading licenses page

SteamDatabase · May 7, 2024 · 1acd443 · 1acd443
1 parent 6388078
commit 1acd443
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 52 deletions.
diff --git a/manifest.json b/manifest.json
@@ -53,6 +53,7 @@
 				"scripts/community/filedetails_award_injected.js",
 				"scripts/community/profile_award_injected.js",
 				"scripts/community/tradeoffer_injected.js",
+				"scripts/store/account_licenses_injected.js",
 				"scripts/store/invalidate_cache_injected.js",
 				"scripts/store/registerkey_injected.js",
 				"scripts/store/subscriptions.js"
@@ -178,14 +179,19 @@
 			]
 		},
 		{
+			"run_at": "document_start",
 			"matches":
 			[
 				"https://store.steampowered.com/account/licenses*"
 			],
 			"js":
 			[
 				"scripts/common.js",
-				"scripts/store/account.js"
+				"scripts/store/account_licenses.js"
+			],
+			"css":
+			[
+				"styles/account_licenses.css"
 			]
 		},
 		{

diff --git a/scripts/store/account.js b/scripts/store/account.js
diff --git a/scripts/store/account_licenses.js b/scripts/store/account_licenses.js
@@ -0,0 +1,91 @@
+'use strict';
+
+const script = document.createElement( 'script' );
+script.id = 'steamdb_disable_tooltips';
+script.type = 'text/javascript';
+script.src = GetLocalResource( 'scripts/store/account_licenses_injected.js' );
+document.documentElement.append( script );
+
+GetOption( { 'link-accountpage': true }, function( items )
+{
+	const addLinks = items[ 'link-accountpage' ];
+
+	if( document.readyState === 'loading' )
+	{
+		document.addEventListener( 'DOMContentLoaded', OnContentLoaded );
+	}
+	else
+	{
+		OnContentLoaded();
+	}
+
+	function OnContentLoaded()
+	{
+		const table = document.querySelector( '.account_table' );
+
+		if( !addLinks || !table )
+		{
+			document.body.classList.add( 'steamdb_account_table_loaded' );
+			return;
+		}
+
+		const licenses = table.querySelectorAll( 'tr' );
+
+		if( licenses )
+		{
+			const params = new URLSearchParams();
+			params.set( 'a', 'sub' );
+			params.set( 'q', '' );
+			params.set( 'utm_source', 'Steam' );
+			params.set( 'utm_medium', 'Steam' );
+			params.set( 'utm_campaign', 'SteamDB Extension' );
+
+			for( const tr of licenses )
+			{
+				const nameCell = tr.cells[ 1 ];
+
+				if( nameCell.tagName === 'TH' )
+				{
+					const newTd = document.createElement( 'th' );
+					newTd.className = 'steamdb_license_id_col';
+					newTd.textContent = 'SteamDB';
+					nameCell.after( newTd );
+
+					continue;
+				}
+
+				const link = document.createElement( 'a' );
+				const removeElement = nameCell.querySelector( '.free_license_remove_link a' );
+
+				if( removeElement )
+				{
+					const subidMatch = removeElement.href.match( /RemoveFreeLicense\( ?(?<subid>[0-9]+)/ );
+
+					if( !subidMatch )
+					{
+						continue;
+					}
+
+					const subid = subidMatch.groups.subid;
+
+					link.href = `${GetHomepage()}sub/${subid}/?utm_source=Steam&utm_medium=Steam&utm_campaign=SteamDB%20Extension`;
+					link.textContent = subid;
+				}
+				else
+				{
+					params.set( 'q', nameCell.textContent.trim() );
+
+					link.href = `${GetHomepage()}search/?${params.toString()}`;
+					link.textContent = 'Search';
+				}
+
+				const newTd = document.createElement( 'td' );
+				newTd.className = 'steamdb_license_id_col';
+				newTd.append( link );
+				nameCell.after( newTd );
+			}
+		}
+
+		document.body.classList.add( 'steamdb_account_table_loaded' );
+	}
+} );
diff --git a/scripts/store/account_licenses_injected.js b/scripts/store/account_licenses_injected.js
@@ -0,0 +1,49 @@
+( function()
+{
+	'use strict';
+
+	if( document.body )
+	{
+		PerformHook();
+	}
+	else
+	{
+		// If the script was injected too early, wait for <body> element to be created
+		const observer = new MutationObserver( () =>
+		{
+			if( document.body )
+			{
+				PerformHook();
+
+				observer.disconnect();
+			}
+		} );
+
+		observer.observe( document, {
+			childList: true,
+			subtree: true,
+		} );
+	}
+
+	function PerformHook()
+	{
+		const noop = () =>
+		{
+			// noop
+		};
+
+		window.InstrumentLinks = noop;
+		window.BindTooltips = noop;
+
+		if( window.GDynamicStore )
+		{
+			window.GDynamicStore.Init = noop;
+		}
+
+		// As Valve's own comment says this function is for "perf sensitive pages"
+		if( window.DisableTooltipMutationObserver )
+		{
+			window.DisableTooltipMutationObserver();
+		}
+	}
+}() );
diff --git a/styles/account_licenses.css b/styles/account_licenses.css
@@ -0,0 +1,44 @@
+/* These styles are copied from Steam's account.css for mobile view */
+table.account_table {
+	table-layout: fixed;
+}
+
+table.account_table td {
+	word-wrap: break-word;
+}
+
+table.account_table th.license_date_col,
+table.account_table td.license_date_col {
+	width: 7em;
+}
+
+table.account_table th.license_acquisition_col,
+table.account_table td.license_acquisition_col {
+	width: 8em;
+}
+
+/* - */
+
+body:not(.steamdb_account_table_loaded) .account_table_ctn::after {
+	display: block;
+	padding: 16px;
+	font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	font-size: 16px;
+	font-style: italic;
+	text-align: center;
+	content: "Page is loading…";
+}
+
+body:not(.steamdb_account_table_loaded) table.account_table {
+	display: none;
+}
+
+table.account_table th.steamdb_license_id_col,
+table.account_table td.steamdb_license_id_col {
+	width: 5em;
+}
+
+table.account_table td.steamdb_license_id_col a {
+	color: inherit;
+}
diff --git a/styles/inventory.css b/styles/inventory.css
@@ -16,7 +16,7 @@
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 1;
-	font-family: "Motiva Sans", sans-serif;
+	font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
 	z-index: 1;
 	white-space: pre;
 	width: 100%;