Fix blocked list scrolling and incognito image

src/blocked/blocked.js

@@ -1,14 +1,13 @@
 import {
-    extensionStorage,
-    getExtensionUrl
+    extensionStorage
 } from "../shared/extension-api.js";
 import {
     matchesUrl,
     parseRule
 } from "../background/rules.js";
 
 const blockedImage = document.getElementById("blockedImage");
-const defaultImageUrl = getExtensionUrl("assets/images/image.jpg");
+const defaultImageUrl = blockedImage.src;
 const imageStorageKey = "blockedImageDataUrl";
 const temporaryUnblocksStorageKey = "temporaryUnblocks";
 

src/popup/popup.css

@@ -282,8 +282,13 @@ h2 {
     min-height: 0;
 }
 
+.rules-section:not(.is-collapsed) {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+}
+
 .rules-content {
-    max-height: 100%;
+    min-height: 0;
     overflow-y: auto;
 }
 

tests/unit/blocked-page.test.js

@@ -28,6 +28,23 @@ test("blocked page shows the default image before storage resolves", async (t) =
     await importPromise;
 });
 
+test("blocked page preserves the default image URL resolved in its incognito context", async (t) => {
+    const incognitoImageUrl = "chrome-extension://incognito-dynamic/assets/images/image.jpg";
+    const blockedImage = { src: incognitoImageUrl };
+    const { cleanup } = setupBlockedPageTest({
+        blockedImage,
+        runtimeImageUrl: "chrome-extension://regular-dynamic/assets/images/image.jpg",
+        storageGet() {
+            return Promise.resolve({});
+        }
+    });
+    t.after(cleanup);
+
+    await importBlockedPageScript();
+
+    assert.equal(blockedImage.src, incognitoImageUrl);
+});
+
 test("blocked page uses a saved custom image when storage provides one", async (t) => {
     const blockedImage = {};
     const customImage = "data:image/png;base64,custom";
@@ -189,16 +206,27 @@ test("blocked page reload refuses mismatched original URL context", async (t) =>
     assert.deepEqual(redirects, []);
 });
 
-function setupBlockedPageTest({ blockedImage, storageGet, url, redirects = [] }) {
+function setupBlockedPageTest({
+    blockedImage,
+    storageGet,
+    url,
+    redirects = [],
+    runtimeImageUrl = "chrome-extension://test/assets/images/image.jpg"
+}) {
     const previousBrowser = globalThis.browser;
     const previousChrome = globalThis.chrome;
     const previousDocument = globalThis.document;
     const previousLocation = globalThis.location;
 
+    if (!blockedImage.src) {
+        blockedImage.src = runtimeImageUrl;
+    }
+
     globalThis.browser = {
         runtime: {
             getURL(path) {
-                return `chrome-extension://test/${path}`;
+                assert.equal(path, "assets/images/image.jpg");
+                return runtimeImageUrl;
             }
         },
         storage: {

tests/unit/popup-css.test.js

@@ -15,7 +15,17 @@ test("popup keeps a fixed height without stretching the image section", async ()
         "the hidden current-site section must not shift the image section into the flexible grid row",
     );
     assert.match(css, /\.rules-section\s*{[^}]*\bmin-height:\s*0;/s);
-    assert.match(css, /\.rules-content\s*{[^}]*\boverflow-y:\s*auto;/s);
+    assert.match(
+        css,
+        /\.rules-section:not\(\.is-collapsed\)\s*{[^}]*display:\s*grid;[^}]*grid-template-rows:\s*auto minmax\(0,\s*1fr\);/s,
+        "the expanded rules card must reserve its header before sizing the scroll area",
+    );
+    assert.match(css, /\.rules-content\s*{[^}]*\bmin-height:\s*0;[^}]*\boverflow-y:\s*auto;/s);
+    assert.doesNotMatch(
+        css,
+        /\.rules-content\s*{[^}]*\bmax-height:\s*100%;/s,
+        "the scroll area must not claim the full card height in addition to the header",
+    );
 });
 
 test("collapsed rules use content-sized grid rows", async () => {