Fix popup width and incognito image

src/popup/popup.css

@@ -1,5 +1,6 @@
 :root {
     color-scheme: light;
+    scrollbar-gutter: stable;
     --bg: #f6f7f9;
     --surface: #ffffff;
     --surface-strong: #eef2f7;

src/popup/popup.js

@@ -50,9 +50,7 @@ const BLOCKED_IMAGE_STORAGE_KEY = "blockedImageDataUrl";
 const BLOCKED_IMAGE_FILE_NAME_STORAGE_KEY = "blockedImageFileName";
 const TEMPORARY_UNBLOCKS_KEY = "temporaryUnblocks";
 const TEMPORARY_UNBLOCK_DURATION_MS = 5 * 60 * 1000;
-const DEFAULT_BLOCK_IMAGE_URL = hasExtensionApi() ?
-    getExtensionUrl("assets/images/image.jpg") :
-    "../../assets/images/image.jpg";
+const DEFAULT_BLOCK_IMAGE_URL = imagePreview.src || "../../assets/images/image.jpg";
 
 const storage = hasExtensionApi() ? extensionStorage.local : createMemoryStorage();
 let areRulesExpanded = false;

tests/unit/popup-css.test.js

@@ -4,10 +4,16 @@ import test from "node:test";
 
 test("popup grows naturally without an internal blocked-sites scroll trap", async () => {
     const css = await readFile(new URL("../../src/popup/popup.css", import.meta.url), "utf8");
+    const rootRule = getRule(css, ":root");
     const bodyRule = getRule(css, "body");
     const shellRule = getRule(css, "\\.popup-shell");
     const rulesContentRule = getRule(css, "\\.rules-content");
 
+    assert.match(
+        rootRule,
+        /(^|\n)\s*scrollbar-gutter:\s*stable;/,
+        "opening a tall blocked-sites list must not add scrollbar width to the popup",
+    );
     assert.doesNotMatch(bodyRule, /(^|\n)\s*height:\s*560px;/);
     assert.doesNotMatch(bodyRule, /(^|\n)\s*overflow:\s*hidden;/);
     assert.doesNotMatch(shellRule, /(^|\n)\s*height:\s*100vh;/);

tests/unit/popup-current-site.test.js

@@ -146,6 +146,24 @@ test("popup labels legacy custom images without stored file metadata", async (t)
     assert.equal(elements.imageFileName.textContent, "Custom image");
 });
 
+test("popup preserves the default image URL resolved in its incognito context", async (t) => {
+    const incognitoImageUrl = "chrome-extension://incognito-dynamic/assets/images/image.jpg";
+    const { elements, chrome, cleanup } = await setupPopupTest({
+        activeTab: {
+            id: 42,
+            url: "https://example.com/"
+        },
+        defaultImageUrl: incognitoImageUrl
+    });
+    t.after(cleanup);
+
+    assert.equal(elements.imagePreview.src, incognitoImageUrl);
+    assert.equal(
+        chrome.runtime.requestedPaths.includes("assets/images/image.jpg"),
+        false
+    );
+});
+
 test("choosing a local image saves its data and file name together", async (t) => {
     const customImage = "data:image/png;base64,new";
     const { elements, chrome, state, cleanup } = await setupPopupTest({
@@ -867,14 +885,21 @@ test("removing a blocked site requires solving the math challenge", async (t) =>
     assert.equal(elements.formHint.textContent, "Blocked site removed.");
 });
 
-async function setupPopupTest({ activeTab, initialState = {}, now, randomValues }) {
+async function setupPopupTest({
+    activeTab,
+    initialState = {},
+    now,
+    randomValues,
+    defaultImageUrl = "chrome-extension://test/assets/images/image.jpg"
+}) {
     const previousChrome = globalThis.chrome;
     const previousDocument = globalThis.document;
     const previousFileReader = globalThis.FileReader;
     const previousDateNow = Date.now;
     const previousMathRandom = Math.random;
 
     const elements = createPopupElements();
+    elements.imagePreview.src = defaultImageUrl;
     const state = {
         blockedSites: [],
         ...initialState