Code cleanup (#161)

Author: fregante

source/extension.svelte

@@ -5,16 +5,17 @@
 
 	import openInTab from './lib/open-in-tab.js';
 	import trimName from './lib/trim-name.js';
+	import pickBestIcon from './libs/icons.js';
 
 	export let id;
 	export let name;
 	export let shortName;
 	export let enabled;
 	export let installType;
 	export let homepageUrl;
-	export let updateUrl; // Optional
+	export let updateUrl = undefined; // eslint-disable-line no-undef-init -- Optional svelte property
 	export let optionsUrl;
-	export let icons; // Optional
+	export let icons = undefined; // eslint-disable-line no-undef-init -- Optional svelte property
 	export let showExtras;
 	export let undoStack;
 
@@ -46,22 +47,6 @@
 	function onUninstallClick() {
 		chrome.management.uninstall(id);
 	}
-
-	function getIcon(icons, size = 16) {
-		// Get retina size if necessary
-		size *= window.devicePixelRatio;
-
-		if (icons) {
-			// Get a large icon closest to the desired size
-			for (const icon of icons.toReversed()) {
-				if (icon.size >= size) {
-					return icon.url;
-				}
-			}
-		}
-		// Fallback icon
-		return 'icons/puzzle.svg';
-	}
 </script>
 
 <li class:disabled={!enabled} class="ext type-{installType}">
@@ -71,7 +56,7 @@
 		on:click={toggleExtension}
 		on:contextmenu
 	>
-		<img alt="" src={getIcon(icons, 16)} />{realName}
+		<img alt="" src={pickBestIcon(icons, 16)} />{realName}
 	</button>
 	{#if optionsUrl && enabled}
 		<a href={optionsUrl} title={getI18N('gotoOpt')} on:click={openInTab}>

source/lib/single-window.js

@@ -0,0 +1,10 @@
+export default function preventMultipleWindows() {
+	chrome.runtime.sendMessage('thisTownIsTooSmallForTheTwoOfUs').catch(() => {
+		// No other windows open, good!
+	});
+	chrome.runtime.onMessage.addListener(message => {
+		if (message === 'thisTownIsTooSmallForTheTwoOfUs') {
+			window.close();
+		}
+	});
+}

source/libs/icons.js

@@ -0,0 +1,20 @@
+export default function pickBestIcon(icons, size = 16) {
+	// Get retina size if necessary
+	size *= globalThis.devicePixelRatio;
+
+	if (!icons?.length) {
+		return 'icons/puzzle.svg';
+	}
+
+	const smallestToLargest = icons.toSorted((a, b) => a.size - b.size);
+
+	// Find the smallest icon that is larger than the requested size
+	for (const icon of smallestToLargest) {
+		if (icon.size >= size) {
+			return icon.url;
+		}
+	}
+
+	// If it's not available (e.g. requested 32, available only 16), get the largest one
+	return smallestToLargest.at(-1).url;
+}

source/libs/icons.test.js

@@ -0,0 +1,24 @@
+import assert from 'node:assert';
+import test from 'node:test';
+import pickBestIcon from './icons.js';
+
+const manifest = [
+	{url: '16.svg', size: 16},
+	{url: '32.svg', size: 32},
+];
+
+test('pickBestIcon', () => {
+	globalThis.devicePixelRatio = 1;
+	assert.equal(pickBestIcon(), 'icons/puzzle.svg');
+	assert.equal(pickBestIcon(undefined), 'icons/puzzle.svg');
+	assert.equal(pickBestIcon([]), 'icons/puzzle.svg');
+	assert.equal(pickBestIcon(manifest), '16.svg');
+	assert.equal(pickBestIcon(manifest, 16), '16.svg');
+	assert.equal(pickBestIcon(manifest, 1), '16.svg');
+	assert.equal(pickBestIcon(manifest, 32), '32.svg');
+	assert.equal(pickBestIcon(manifest, 48), '32.svg');
+
+	globalThis.devicePixelRatio = 2;
+	assert.equal(pickBestIcon(manifest, 16), '32.svg');
+	assert.equal(pickBestIcon(manifest, 32), '32.svg');
+});

source/main.js

@@ -1,5 +1,6 @@
 import App from './app.svelte';
 import fitWindow from './lib/fit-window.js';
+import preventMultipleWindows from './lib/single-window.js';
 
 // eslint-disable-next-line no-new -- Tell this to Svelte
 new App({
@@ -11,11 +12,4 @@ if (autoFit) {
 	fitWindow();
 }
 
-chrome.runtime.sendMessage('thisTownIsTooSmallForTheTwoOfUs').catch(() => {
-	// No other windows open, good!
-});
-chrome.runtime.onMessage.addListener(message => {
-	if (message === 'thisTownIsTooSmallForTheTwoOfUs') {
-		window.close();
-	}
-});
+preventMultipleWindows();