@arraypress/extension-kit 1.9.0 → 1.11.0

package/src/settings/store.d.ts

@@ -8,6 +8,15 @@
  * `chrome.storage.local` instead. Local also holds any write sync refused
  * (too many writes a minute, or an item over its size limit), kept under
  * `unsyncedKey`, read as if synced, and retried, so a change is never lost.
+ * Beside it (`<unsyncedKey>Was`) is what sync held for each when it was
+ * refused: once sync holds something else (the setting was changed since on
+ * another computer), the held change is the older one and is dropped, not
+ * read over the newer one or sent up over it.
+ *
+ * Holding a change is a read-modify-write of one local item, so it runs
+ * under a Web Lock the extension's pages and worker share: two refused
+ * writes at once keep both changes, and a retry can't put an older value
+ * back over a newer one.
  *
  * Each extension supplies its schema: the defaults and one normaliser that
  * coerces anything read from storage or a form into valid settings.
@@ -72,6 +81,11 @@ export type SettingsStore<S extends Record<string, unknown>> = {
      *   Try again to put earlier refusals into sync.
      */
     retryUnsynced: (storage: SyncedStorage) => Promise<boolean>;
+    /**
+     *   Whether trying again could help: something held is still the newest and small enough for sync
+     *   (an item over sync's size limit stays on this computer however often it's tried).
+     */
+    retryable: (storage: SyncedStorage) => Promise<boolean>;
     /**
      *   Save the settings `changes` names, normalised.
      */
@@ -116,6 +130,9 @@ export type SettingsStore<S extends Record<string, unknown>> = {
  *   everything reached sync.
  * @property {(storage: SyncedStorage) => Promise<boolean>} retryUnsynced
  *   Try again to put earlier refusals into sync.
+ * @property {(storage: SyncedStorage) => Promise<boolean>} retryable
+ *   Whether trying again could help: something held is still the newest and small enough for sync
+ *   (an item over sync's size limit stays on this computer however often it's tried).
  * @property {(storage: SyncedStorage, changes: Partial<S>) => Promise<{settings: S, synced: boolean}>} save
  *   Save the settings `changes` names, normalised.
  * @property {(changes: Record<string, StorageChange>, area: string) => (keyof S & string)[]} changed

package/src/settings/store.js

@@ -8,6 +8,15 @@
  * `chrome.storage.local` instead. Local also holds any write sync refused
  * (too many writes a minute, or an item over its size limit), kept under
  * `unsyncedKey`, read as if synced, and retried, so a change is never lost.
+ * Beside it (`<unsyncedKey>Was`) is what sync held for each when it was
+ * refused: once sync holds something else (the setting was changed since on
+ * another computer), the held change is the older one and is dropped, not
+ * read over the newer one or sent up over it.
+ *
+ * Holding a change is a read-modify-write of one local item, so it runs
+ * under a Web Lock the extension's pages and worker share: two refused
+ * writes at once keep both changes, and a retry can't put an older value
+ * back over a newer one.
  *
  * Each extension supplies its schema: the defaults and one normaliser that
  * coerces anything read from storage or a form into valid settings.
@@ -15,7 +24,7 @@
  * @module settings/store
  */
 
-import { MAX_SYNC_ITEM_BYTES, isEmpty, pick, syncItemBytes } from './storage.js';
+import { MAX_SYNC_ITEM_BYTES, exclusive, isEmpty, pick, sameValue, syncItemBytes } from './storage.js';
 
 /** @import { StorageChange, SyncedStorage } from './storage.js' */
 
@@ -51,6 +60,9 @@ import { MAX_SYNC_ITEM_BYTES, isEmpty, pick, syncItemBytes } from './storage.js'
  *   everything reached sync.
  * @property {(storage: SyncedStorage) => Promise<boolean>} retryUnsynced
  *   Try again to put earlier refusals into sync.
+ * @property {(storage: SyncedStorage) => Promise<boolean>} retryable
+ *   Whether trying again could help: something held is still the newest and small enough for sync
+ *   (an item over sync's size limit stays on this computer however often it's tried).
  * @property {(storage: SyncedStorage, changes: Partial<S>) => Promise<{settings: S, synced: boolean}>} save
  *   Save the settings `changes` names, normalised.
  * @property {(changes: Record<string, StorageChange>, area: string) => (keyof S & string)[]} changed
@@ -78,9 +90,36 @@ export function createSettingsStore({ defaults, normalize: normalizeRaw, localKe
   /** @param {Record<string, unknown> | null} [raw] @returns {S} */
   const normalize = (raw) => normalizeRaw(raw ?? {});
 
+  /** The local item holding what sync held for each refused setting: `{key: [value]}`, `[]` for nothing. */
+  const wasKey = `${unsyncedKey}Was`;
+
+  /**
+   * What an area holds for a key, in a form that tells nothing from `null`.
+   *
+   * @param {Record<string, unknown>} items - What a `get` gave.
+   * @param {string} key - The key.
+   * @returns {unknown[]} `[value]`, or `[]` when it holds nothing.
+   */
+  const seen = (items, key) => (key in items ? [items[key]] : []);
+
+  /**
+   * The held changes that are still the newest: sync holds what it did when each was refused.
+   * One held before `wasKey` existed has nothing to compare, and counts as newest.
+   *
+   * @param {Record<string, unknown>} held - The held changes.
+   * @param {Record<string, unknown[]>} was - What sync held when each was refused.
+   * @param {Record<string, unknown>} synced - What sync holds now.
+   * @returns {Record<string, unknown>} The ones to keep.
+   */
+  const newest = (held, was, synced) => Object.fromEntries(Object.entries(pick(held, syncedKeys))
+    .filter(([key]) => !(key in was) || sameValue(was[key], seen(synced, key))));
+
   /**
    * Start one sync write of `values` at once; resolves to what sync refused.
-   * An item too big for sync isn't even tried.
+   * An item too big for sync isn't even tried. When Chrome refuses several
+   * together for anything but its write rate, each is tried on its own, so
+   * one item Chrome won't take (the whole of sync is full, or it weighs more
+   * there than here) doesn't keep the others on this computer.
    *
    * @param {SyncedStorage} storage
    * @param {Record<string, unknown>} values
@@ -91,10 +130,13 @@ export function createSettingsStore({ defaults, normalize: normalizeRaw, localKe
     const fits = Object.fromEntries(entries.filter(([key, value]) => syncItemBytes(key, value) <= MAX_SYNC_ITEM_BYTES));
     const refused = Object.fromEntries(entries.filter(([key]) => !(key in fits)));
     if (isEmpty(fits)) return Promise.resolve(refused);
-    return storage.sync.set(fits).then(() => refused, (/** @type {unknown} */ error) => {
-      console.warn('Settings: Chrome Sync refused the change; keeping it on this computer and trying again later.',
-        /** @type {Error | undefined} */ (error)?.message ?? error);
-      return { ...refused, ...fits };
+    return storage.sync.set(fits).then(() => refused, async (/** @type {unknown} */ error) => {
+      const message = String(/** @type {Error | undefined} */ (error)?.message ?? error);
+      console.warn('Settings: Chrome Sync refused the change; keeping it on this computer and trying again later.', message);
+      const keys = Object.keys(fits);
+      if (keys.length === 1 || /MAX_WRITE_OPERATIONS/.test(message)) return { ...refused, ...fits };
+      const alone = await Promise.all(keys.map((key) => storage.sync.set({ [key]: fits[key] }).then(() => [], () => [key])));
+      return { ...refused, ...pick(fits, alone.flat()) };
     });
   }
 
@@ -102,30 +144,54 @@ export function createSettingsStore({ defaults, normalize: normalizeRaw, localKe
   async function load(storage) {
     const [synced, local] = await Promise.all([
       storage.sync.get([...syncedKeys]),
-      storage.local.get([...localKeys, unsyncedKey]),
+      storage.local.get([...localKeys, unsyncedKey, wasKey]),
     ]);
-    const { [unsyncedKey]: unsynced = {}, ...here } = local;
-    return normalize({ ...synced, ...pick(unsynced, syncedKeys), ...here });
+    const { [unsyncedKey]: unsynced = {}, [wasKey]: was = {}, ...here } = local;
+    return normalize({ ...synced, ...newest(unsynced, was, synced), ...here });
   }
 
   /**
    * One sync write for all of `values` (sync allows 120 a minute), then any
-   * that sync refused before. What sync refuses is kept in local, where
-   * `load` still reads it, and goes up with the next write or
-   * `retryUnsynced`.
+   * that sync refused before and that are still the newest. What sync refuses
+   * is kept in local, where `load` still reads it, and goes up with the next
+   * write or `retryUnsynced`.
    *
    * @type {SettingsStore<S>['writeSynced']}
    */
-  async function writeSynced(storage, values) {
+  function writeSynced(storage, values) {
     // Sent before anything is awaited, so a page that's closing still gets it out.
     const sending = send(storage, values);
-    const { [unsyncedKey]: held } = await storage.local.get([unsyncedKey]);
-    let refused = await sending;
-    const older = Object.fromEntries(Object.entries(pick(held ?? {}, syncedKeys)).filter(([key]) => !(key in values)));
-    if (!isEmpty(older)) refused = { ...(await send(storage, older)), ...refused };
-    if (!isEmpty(refused)) await storage.local.set({ [unsyncedKey]: refused });
-    else if (held) await storage.local.remove(unsyncedKey);
-    return isEmpty(refused);
+    return exclusive(`settings:${unsyncedKey}`, async (waited) => {
+      let refused = await sending;
+      const sent = Object.keys(values).filter((key) => !(key in refused));
+      if (waited && sent.length) {
+        // The work waited for may have been a retry that sent an older value after this one: put this one back.
+        const now = await storage.sync.get(sent);
+        const undone = pick(values, sent.filter((key) => !sameValue(seen(now, key), [values[key]])));
+        if (!isEmpty(undone)) refused = { ...refused, ...(await send(storage, undone)) };
+      }
+      const { [unsyncedKey]: held = {}, [wasKey]: was = {} } = await storage.local.get([unsyncedKey, wasKey]);
+      const heldKeys = Object.keys(pick(held, syncedKeys)).filter((key) => !(key in values));
+      const synced = await storage.sync.get([...heldKeys, ...Object.keys(refused)]);
+      const older = pick(newest(held, was, synced), heldKeys);
+      const stillOlder = isEmpty(older) ? {} : await send(storage, older);
+      const keep = { ...stillOlder, ...refused };
+      const keepWas = Object.fromEntries(Object.keys(keep).map((key) => [key, key in refused || !(key in was) ? seen(synced, key) : was[key]]));
+      if (isEmpty(keep)) {
+        if (!isEmpty(held) || !isEmpty(was)) await storage.local.remove([unsyncedKey, wasKey]);
+      } else if (!sameValue(keep, held) || !sameValue(keepWas, was)) {
+        await storage.local.set({ [unsyncedKey]: keep, [wasKey]: keepWas });
+      }
+      return isEmpty(keep);
+    });
+  }
+
+  /** @type {SettingsStore<S>['retryable']} */
+  async function retryable(storage) {
+    const { [unsyncedKey]: held = {}, [wasKey]: was = {} } = await storage.local.get([unsyncedKey, wasKey]);
+    const keys = Object.keys(pick(held, syncedKeys));
+    if (!keys.length) return false;
+    return Object.entries(newest(held, was, await storage.sync.get(keys))).some(([key, value]) => syncItemBytes(key, value) <= MAX_SYNC_ITEM_BYTES);
   }
 
   /**
@@ -166,6 +232,7 @@ export function createSettingsStore({ defaults, normalize: normalizeRaw, localKe
     normalize,
     load,
     writeSynced,
+    retryable,
     retryUnsynced: (/** @type {SyncedStorage} */ storage) => writeSynced(storage, {}),
     save,
     changed,

package/src/sites/sites.d.ts

@@ -7,7 +7,11 @@
  * taken out or edited. Pure.
  *
  * A site is a web host: http or https, with a dot in its name (or
- * `localhost`). Text without a scheme is read as https.
+ * `localhost`). Text without a scheme is read as https. Only a real host
+ * name is a site: a `*` typed inside one would make a match pattern Chrome
+ * refuses (`*://*.*.example.com/*`), and with it the whole
+ * `registerContentScripts` call, so the extension would stop following its
+ * settings (checked in Chromium 156: "Invalid host wildcard").
  *
  * @module sites/sites
  */
@@ -35,6 +39,7 @@ export declare function siteOrigin(input: unknown): string | null;
  * @example
  * siteHost(' https://www.GitHub.com/a ');  // 'github.com'
  * siteHost('news.bbc.co.uk');              // 'news.bbc.co.uk'
+ * siteHost('*.example.com');               // 'example.com': a list covers subdomains anyway
  * siteHost('not a site');                  // null
  */
 export declare function siteHost(input: unknown): string | null;

package/src/sites/sites.js

@@ -7,7 +7,11 @@
  * taken out or edited. Pure.
  *
  * A site is a web host: http or https, with a dot in its name (or
- * `localhost`). Text without a scheme is read as https.
+ * `localhost`). Text without a scheme is read as https. Only a real host
+ * name is a site: a `*` typed inside one would make a match pattern Chrome
+ * refuses (`*://*.*.example.com/*`), and with it the whole
+ * `registerContentScripts` call, so the extension would stop following its
+ * settings (checked in Chromium 156: "Invalid host wildcard").
  *
  * @module sites/sites
  */
@@ -18,19 +22,31 @@ export const MAX_HOST_LENGTH = 253;
 /** A scheme at the start of what was typed; `localhost:8080` is a host and port, not one. */
 const SCHEME = /^[a-z][a-z\d+.-]*:(?!\d)/i;
 
+/** A match pattern's wildcards at the start of what was typed: `*://` for any scheme, `*.` for subdomains. A listed site covers its subdomains anyway. */
+const PATTERN_START = /^(?:\*:\/\/)?((?:[a-z][a-z\d+.-]*:\/\/)?)\*\./i;
+
+/**
+ * A host name as the URL parser gives it (lower case, punycode), and nothing else it lets through:
+ * labels of letters, digits, `-` and `_`, none empty, a dot at the end allowed. `*`, commas and
+ * empty labels pass the parser, and a `*` goes on to make a match pattern Chrome refuses.
+ */
+const HOST_NAME = /^[a-z\d_](?:[a-z\d_-]*[a-z\d_])?(?:\.[a-z\d_](?:[a-z\d_-]*[a-z\d_])?)*\.?$/;
+
 /**
- * What was typed (or stored, or a page's address) as a web URL.
+ * What was typed (or stored, or a page's address) as a web URL. A match pattern's wildcards at
+ * the start (`*.example.com`, `*://*.example.com/*`) are dropped: the site is `example.com`.
  *
  * @param {unknown} input - Anything.
  * @returns {URL | null} The URL, or null when it isn't a web site's.
  */
 function webUrl(input) {
   // Only text: a stray number would otherwise read as an IP address (3 → "0.0.0.3").
-  const text = typeof input === 'string' ? input.trim() : '';
+  const text = typeof input === 'string' ? input.trim().replace(PATTERN_START, '$1').replace(/^\*:\/\//, '') : '';
   if (!text || /\s/.test(text)) return null;
   try {
     const url = new URL(SCHEME.test(text) ? text : `https://${text}`);
     if (url.protocol !== 'https:' && url.protocol !== 'http:') return null;
+    if (!HOST_NAME.test(url.hostname)) return null;
     return url.hostname.includes('.') || url.hostname === 'localhost' ? url : null;
   } catch {
     return null;
@@ -63,6 +79,7 @@ export function siteOrigin(input) {
  * @example
  * siteHost(' https://www.GitHub.com/a ');  // 'github.com'
  * siteHost('news.bbc.co.uk');              // 'news.bbc.co.uk'
+ * siteHost('*.example.com');               // 'example.com': a list covers subdomains anyway
  * siteHost('not a site');                  // null
  */
 export function siteHost(input) {

package/src/styles/chrome-ui.css

@@ -307,7 +307,7 @@ button.link:hover { background: none; text-decoration: underline; }
 
 /* settings-subpage's header, at the top of its card: the back button, then the subpage's title.
    <div class="subpage-head"><button class="icon-button" aria-label="Back"><span class="icon icon-arrow-back"></span></button><h2>Cookies</h2></div> */
-.subpage-head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 20px 0 8px; }
+.subpage-head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding-inline: 8px 20px; }
 .subpage-head h2 { margin: 0; font-size: 15px; font-weight: 400; color: var(--text); overflow-wrap: anywhere; }
 .subpage-head .icon-button { color: var(--icon-muted); }
 
@@ -323,13 +323,17 @@ select {
     width: 200px;
     max-width: 100%;
     height: 36px;
-    padding: 0 20px 0 10px;
+    padding-block: 0;
+    padding-inline: 10px 20px;
     border: 1px solid var(--field-border);
     border-radius: var(--radius);
     background: var(--select-arrow) calc(100% - 10px) center / 7px no-repeat transparent;
     cursor: pointer;
 }
 
+/* Right to left: the arrow at the other end, as Chrome mirrors its own. */
+select:dir(rtl) { background-position: 10px center; }
+
 select:hover { background-color: var(--hover-subtle); }
 select:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; }
 select:disabled { opacity: 0.38; cursor: default; }
@@ -414,13 +418,13 @@ input.switch::after {
     content: "";
     position: absolute;
     top: 50%;
-    left: 7px;
+    inset-inline-start: 7px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--switch-outline-off);
     transform: translate(-50%, -50%);
-    transition: left 80ms linear, width 80ms linear, height 80ms linear, background-color 80ms linear;
+    transition: inset-inline-start 80ms linear, width 80ms linear, height 80ms linear, background-color 80ms linear;
 }
 
 /* The 20px hover halo around the knob. */
@@ -428,7 +432,7 @@ input.switch:hover::before {
     content: "";
     position: absolute;
     top: 50%;
-    left: 7px;
+    inset-inline-start: 7px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
@@ -438,8 +442,10 @@ input.switch:hover::before {
 
 input.switch:active::after { width: 10px; height: 10px; }
 input.switch:checked { background: var(--primary); border-color: var(--primary); }
-input.switch:checked::after { left: 17px; width: 12px; height: 12px; background: var(--on-primary); }
-input.switch:checked:hover::before { left: 17px; }
+input.switch:checked::after { inset-inline-start: 17px; width: 12px; height: 12px; background: var(--on-primary); }
+input.switch:checked:hover::before { inset-inline-start: 17px; }
+/* Right to left: the knob is measured from the right, so it's centred on its point the other way. */
+input.switch:dir(rtl)::after, input.switch:dir(rtl):hover::before { transform: translate(50%, -50%); }
 input.switch:checked:active::after { width: 14px; height: 14px; }
 input.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
 input.switch:disabled { opacity: 0.38; cursor: default; }
@@ -458,10 +464,10 @@ input.switch:disabled::before { display: none; }
     grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
     align-items: center;
     height: var(--toolbar-height);
-    padding-right: 12px;
+    padding-inline-end: 12px;
 }
 
-.toolbar-start { display: flex; align-items: center; gap: 12px; padding-left: 20px; min-width: 0; }
+.toolbar-start { display: flex; align-items: center; gap: 12px; padding-inline-start: 20px; min-width: 0; }
 .toolbar-start h1, .toolbar > h1 {
     font-size: 22px;
     font-weight: 500;
@@ -481,7 +487,8 @@ input.switch:disabled::before { display: none; }
     width: 100%;
     max-width: 680px;
     height: 36px;
-    padding: 0 6px 0 10px;
+    padding-block: 0;
+    padding-inline: 10px 6px;
     border-radius: 100px;
     background: var(--search-bg);
     color: var(--icon);
@@ -496,7 +503,8 @@ input.switch:disabled::before { display: none; }
     min-width: 0;
     height: 100%;
     min-height: 0;
-    padding: 0 0 0 4px;
+    padding: 0;
+    padding-inline-start: 4px;
     border: 0;
     border-radius: 0;
     background: none;
@@ -621,11 +629,13 @@ label.row, .row[actionable] { cursor: pointer; }
     flex: none;
     width: 20px;
     height: 20px;
-    margin-right: -2px;
+    margin-inline-end: -2px;
     background: var(--icon-muted);
     mask: var(--icon-arrow-right) center / 20px no-repeat;
 }
 
+.link-row:dir(rtl)::after { transform: scaleX(-1); }
+
 .link-row.external::after { mask-image: var(--icon-open-in-new); }
 
 /* A list inside a card: each item is a row. */
@@ -653,9 +663,13 @@ label.row, .row[actionable] { cursor: pointer; }
     align-items: center;
     gap: 20px;
     min-height: 40px;
-    margin: 0 2px 0 1px;
-    padding: 10px 16px 10px 23px;
-    border-radius: 0 100px 100px 0;
+    margin-block: 0;
+    margin-inline: 1px 2px;
+    padding-block: 10px;
+    padding-inline: 23px 16px;
+    border-radius: 0;
+    border-start-end-radius: 100px;
+    border-end-end-radius: 100px;
     color: var(--text);
     font-size: 14px;
     font-weight: 500;
@@ -678,7 +692,7 @@ label.row, .row[actionable] { cursor: pointer; }
 .manager { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
 .layout { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
 .sidebar { overflow: auto; padding: 8px 0 24px; }
-.main { overflow: auto; padding: 24px 32px 96px 17px; min-width: 0; }
+.main { overflow: auto; padding-block: 24px 96px; padding-inline: 17px 32px; min-width: 0; }
 
 /* A folder in the sidebar (bookmarks-folder-node): the same pill as the settings menu. */
 .tree { list-style: none; margin: 0; padding: 0; }
@@ -689,9 +703,13 @@ label.row, .row[actionable] { cursor: pointer; }
     align-items: center;
     gap: 8px;
     min-height: 40px;
-    margin: 0 3px 0 1px;
-    padding: 0 4px 0 calc(8px + var(--depth) * 20px);
-    border-radius: 0 100px 100px 0;
+    margin-block: 0;
+    margin-inline: 1px 3px;
+    padding-block: 0;
+    padding-inline: calc(8px + var(--depth) * 20px) 4px;
+    border-radius: 0;
+    border-start-end-radius: 100px;
+    border-end-end-radius: 100px;
     color: var(--folder-text);
     font-size: 14px;
     font-weight: 500;
@@ -724,7 +742,8 @@ label.row, .row[actionable] { cursor: pointer; }
     align-items: center;
     gap: 20px;
     height: 40px;
-    padding: 0 8px 0 20px;
+    padding-block: 0;
+    padding-inline: 20px 8px;
     user-select: none;
 }
 
@@ -798,7 +817,8 @@ label.row, .row[actionable] { cursor: pointer; }
    `hidden`: the popover defaults undone either way. */
 .toast {
     position: fixed;
-    inset: auto auto 0 0;
+    inset-block: auto 0;
+    inset-inline: 0 auto;
     display: flex;
     align-items: center;
     gap: 32px;
@@ -822,7 +842,7 @@ label.row, .row[actionable] { cursor: pointer; }
 
 .toast button {
     height: auto;
-    margin-right: -8px;
+    margin-inline-end: -8px;
     padding: 8px;
     border: 0;
     background: none;
@@ -836,7 +856,8 @@ label.row, .row[actionable] { cursor: pointer; }
 
 .drawer {
     position: fixed;
-    inset: 0 auto 0 0;
+    inset-block: 0;
+    inset-inline: 0 auto;
     width: 256px;
     max-width: calc(100vw - 56px);
     height: 100%;
@@ -851,9 +872,11 @@ label.row, .row[actionable] { cursor: pointer; }
 
 .drawer[open] { animation: cr-drawer-in 200ms ease; }
 .drawer::backdrop { background: rgb(0 0 0 / 0.5); }
-.drawer-head { display: flex; align-items: center; gap: 12px; height: var(--toolbar-height); padding-left: 24px; font-size: 22px; font-weight: 500; letter-spacing: 0.25px; }
+.drawer-head { display: flex; align-items: center; gap: 12px; height: var(--toolbar-height); padding-inline-start: 24px; font-size: 22px; font-weight: 500; letter-spacing: 0.25px; }
 
 @keyframes cr-drawer-in { from { transform: translateX(-100%); } }
+@keyframes cr-drawer-in-rtl { from { transform: translateX(100%); } }
+.drawer[open]:dir(rtl) { animation-name: cr-drawer-in-rtl; }
 
 @media (prefers-reduced-motion: reduce) {
     .drawer[open] { animation: none; }
@@ -942,7 +965,8 @@ label.row, .row[actionable] { cursor: pointer; }
 
 /* .sp-card: rows on a 12px-rounded card, 8px from the panel's edge. */
 .sp-card {
-    margin: 0 0 0 8px;
+    margin: 0;
+    margin-inline-start: 8px;
     padding: 8px 0;
     border-radius: 12px;
     background: var(--sp-card);
@@ -1027,7 +1051,7 @@ label.row, .row[actionable] { cursor: pointer; }
     place-items: center;
     width: 40px;
     height: 40px;
-    margin-right: 16px;
+    margin-inline-end: 16px;
     border-radius: 8px;
     background: var(--sp-icon-bg);
     color: var(--text-secondary);
@@ -1057,12 +1081,20 @@ label.row, .row[actionable] { cursor: pointer; }
     display: none;
     align-items: center;
     gap: 4px;
-    margin: 0 -4px 0 8px;
+    margin-block: 0;
+    margin-inline: 8px -4px;
 }
 
 .sp-item:is(:hover, :focus-within) .sp-suffix,
 .sp-suffix.always { display: flex; }
 
+/* .sp-notice (ui/notice.js): a card saying what a list leaves out or can't do; a warning's icon in
+   the error colour, an information's in the secondary text colour. */
+.sp-notice .sp-heading > .icon { flex: none; width: 18px; height: 18px; color: var(--error); }
+.sp-notice.info .sp-heading > .icon { color: var(--text-secondary); }
+.sp-notice-text { margin: 0; padding: 2px 16px 8px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
+.sp-notice-actions { display: flex; justify-content: flex-end; padding: 0 16px 8px; }
+
 /* sp-empty-state: a centred heading and a line of help. */
 .sp-empty {
     display: flex;
@@ -1089,7 +1121,8 @@ button.floating {
     align-items: center;
     gap: 8px;
     height: 40px;
-    padding: 8px 16px 8px 12px;
+    padding-block: 8px;
+    padding-inline: 12px 16px;
     border: 0;
     border-radius: 8px;
     background: var(--tonal-bg);
@@ -1111,6 +1144,6 @@ button.floating .icon { width: 20px; height: 20px; }
 /* ------------------------------------------------------------ Narrow */
 
 @media (max-width: 720px) {
-    .toolbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding-right: 8px; }
-    .toolbar-start { padding-left: 16px; }
+    .toolbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding-inline-end: 8px; }
+    .toolbar-start { padding-inline-start: 16px; }
 }

package/src/testing/e2e.d.ts

@@ -125,6 +125,33 @@ export declare function extensionProfile(chromium: BrowserType, dir: string, { p
  * await page.goto(url('options/options.html'));
  */
 export declare function launchExtension(chromium: BrowserType, dir: string, options?: LaunchOptions): Promise<LaunchedExtension>;
+/**
+ * Stop the extension's service worker, as Chrome does after 30 seconds idle: its globals,
+ * timers and anything else kept in memory are gone; storage, alarms and registered listeners
+ * stay. Chrome never does this by itself in an e2e run (Playwright's debugger keeps the worker
+ * alive), so a check that state survives a restart has to ask for it. Done through the
+ * DevTools protocol from a page of the extension (`ServiceWorker.stopWorker`), and, unless
+ * `start` is false, the worker is started again with no event (`ServiceWorker.startWorker`).
+ *
+ * `launched.worker` stays the handle to use: Playwright keeps it across the restart. Anything a
+ * test put in the old worker (`recordIconCalls`, a patched `chrome.*` function) is gone with it.
+ *
+ * @param {Pick<LaunchedExtension, 'context' | 'worker' | 'extensionId' | 'url'>} launched - From {@link launchExtension}.
+ * @param {{start?: boolean, page?: string}} [options] - `start: false` leaves the worker stopped, for
+ *   the next event (a message, an alarm, a tab) to start it as on a person's computer; `page`: a file
+ *   of the extension to open for the protocol session (default `manifest.json`).
+ * @returns {Promise<void>} Once the worker has stopped (and, with `start`, is running again).
+ * @throws {Error} When the worker isn't running, or doesn't stop or start in 10 s.
+ *
+ * @example
+ * await worker.evaluate(() => { globalThis.cache = { tab: 7 }; });
+ * await stopWorker(launched);
+ * await worker.evaluate(() => globalThis.cache); // undefined: what wasn't stored is gone
+ */
+export declare function stopWorker({ context, worker, extensionId, url }: Pick<LaunchedExtension, 'context' | 'worker' | 'extensionId' | 'url'>, { start, page: file }?: {
+    start?: boolean;
+    page?: string;
+}): Promise<void>;
 /**
  * Emulate colour schemes in the offscreen document: one CDP session attached
  * to it, reused for every change.
@@ -137,10 +164,12 @@ export declare function launchExtension(chromium: BrowserType, dir: string, opti
 export declare function offscreenEmulator(cdp: CDPSession, suffix?: string): Promise<(scheme: 'light' | 'dark') => Promise<unknown>>;
 /**
  * Wrap the worker's real `chrome.action.setIcon` so each call is recorded once
- * Chrome has taken it (a path Chrome can't load fails, and isn't recorded).
+ * Chrome has taken it (a path Chrome can't load fails, and isn't recorded):
+ * its `path`, or `'imageData'` for an icon given as pixels. The record lives
+ * in the worker: it's gone when the worker restarts ({@link stopWorker}).
  *
  * @param {Worker} worker - The extension's service worker.
- * @returns {Promise<() => Promise<unknown[]>>} Reads the recorded `path`s, oldest first.
+ * @returns {Promise<() => Promise<unknown[]>>} Reads the recorded icons, oldest first.
  */
 export declare function recordIconCalls(worker: Worker): Promise<() => Promise<unknown[]>>;
 /** How long one check may take before it's failed, in ms: long enough for a slow real-browser check, short of a hang. */
@@ -159,7 +188,8 @@ export type CheckRunner = {
      */
     fail: (name: string) => void;
     /**
-     * Print the tally, and exit with 1 if anything failed.
+     * Print the tally, and exit with 1 if anything failed or no check ran at all
+     * (a script that returned early, or whose filter matched nothing, hasn't passed).
      */
     finish: () => void;
 };
@@ -173,7 +203,8 @@ export type CheckRunner = {
  *   whether it passed.
  * @property {(name: string) => void} fail Count a failure found outside any check (a page's
  *   uncaught error, say): printed now, listed and counted at the end.
- * @property {() => void} finish Print the tally, and exit with 1 if anything failed.
+ * @property {() => void} finish Print the tally, and exit with 1 if anything failed or no check ran at all
+ *   (a script that returned early, or whose filter matched nothing, hasn't passed).
  */
 /**
  * Make a {@link CheckRunner}: "✓ name" for a pass, "✗ name" and the error's