@inboxsdk/core 0.2.29-alpha.4 → 0.2.29-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inboxsdk/core",
-  "version": "0.2.29-alpha.4",
+  "version": "0.2.29-alpha.6",
   "description": "Library for building browser extensions for Gmail",
   "main": "inboxsdk.js",
   "author": "Streak",
@@ -31,6 +31,7 @@
     "@types/kefir": "^3.8.6",
     "@types/node": "*",
     "asap": "^2.0.3",
+    "fast-deep-equal": "^3.1.3",
     "kefir-cast": "^3.3.0",
     "sha.js": "^2.4.0",
     "tag-tree": "^1.0.0",

package/src/inboxsdk.d.ts

@@ -106,6 +106,9 @@ export interface ButterBar {
 // export interface DropdownButtonAccessoryDescriptor {}
 
 export { AppMenu };
+export type { AppMenuItemView } from './platform-implementation-js/views/app-menu-item-view';
+export type { AppMenuItemPanelDescriptor } from './platform-implementation-js/namespaces/app-menu';
+export type { CollapsiblePanelView } from './platform-implementation-js/views/collapsible-panel-view';
 
 export interface NativeNavItemView extends EventEmitter {
   addNavItem(descriptor: NavItemDescriptor): NavItemView;

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-app-menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-app-menu-item.d.ts","sourceRoot":"","sources":["../../../../../../../src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-app-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAI1C,wBAAsB,cAAc,CAClC,MAAM,EAAE,WAAW,EACnB,kBAAkB,EAAE,qBAAqB,6CAuB1C"}
+{"version":3,"file":"add-app-menu-item.d.ts","sourceRoot":"","sources":["../../../../../../../src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-app-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAI1C,wBAAsB,cAAc,CAClC,MAAM,EAAE,WAAW,EACnB,kBAAkB,EAAE,qBAAqB,6CAyB1C"}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-app-menu-item.js

@@ -3,12 +3,11 @@ import GmailElementGetter from '../gmail-element-getter';
 import Logger from '../../../lib/logger';
 export async function addAppMenuItem(driver, menuItemDescriptor) {
     const appMenuInjectionContainer = await GmailElementGetter.getAppMenuAsync();
-    const gmailAppMenuItemView = new GmailAppMenuItemView(driver);
-    gmailAppMenuItemView.setMenuItemDescriptor(menuItemDescriptor);
+    const gmailAppMenuItemView = new GmailAppMenuItemView(driver, menuItemDescriptor);
     try {
-        if (!appMenuInjectionContainer || !gmailAppMenuItemView.element)
+        if (!appMenuInjectionContainer)
             return;
-        const siblingElement = menuItemDescriptor.insertIndex
+        const siblingElement = Number.isInteger(menuItemDescriptor.insertIndex)
             ? appMenuInjectionContainer.childNodes[menuItemDescriptor.insertIndex] ??
                 null
             : null;

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-collapsible-panel.d.ts

@@ -1,5 +1,5 @@
 import { AppMenuItemPanelDescriptor } from '../../../namespaces/app-menu';
 import { CollapsiblePanelView } from '../../../views/collapsible-panel-view';
 import GmailDriver from '../gmail-driver';
-export declare function addCollapsiblePanel(driver: GmailDriver, panelDescriptor: AppMenuItemPanelDescriptor): Promise<CollapsiblePanelView | undefined>;
+export declare function addCollapsiblePanel(driver: GmailDriver, panelDescriptor: AppMenuItemPanelDescriptor, insertIndex?: number): Promise<CollapsiblePanelView | undefined>;
 //# sourceMappingURL=add-collapsible-panel.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-collapsible-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-collapsible-panel.d.ts","sourceRoot":"","sources":["../../../../../../../src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-collapsible-panel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,wBAAsB,mBAAmB,CACvC,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,0BAA0B,6CAkB5C"}
+{"version":3,"file":"add-collapsible-panel.d.ts","sourceRoot":"","sources":["../../../../../../../src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-collapsible-panel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,wBAAsB,mBAAmB,CACvC,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,0BAA0B,EAC3C,WAAW,CAAC,EAAE,MAAM,6CAmCrB"}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-collapsible-panel.js

@@ -3,7 +3,7 @@ import GmailElementGetter from '../gmail-element-getter';
 import waitFor from '../../../lib/wait-for';
 import Logger from '../../../lib/logger';
 import { CollapsiblePanelView } from '../../../views/collapsible-panel-view';
-export async function addCollapsiblePanel(driver, panelDescriptor) {
+export async function addCollapsiblePanel(driver, panelDescriptor, insertIndex) {
     const injectionContainer = await waitForAppMenuParentReady();
     const collapsiblePanelView = new CollapsiblePanelView(driver, panelDescriptor);
     if (!injectionContainer || !collapsiblePanelView.element)
@@ -11,7 +11,18 @@ export async function addCollapsiblePanel(driver, panelDescriptor) {
     const appMenu = await GmailElementGetter.getAppMenuAsync();
     if (!appMenu)
         return;
-    appMenu.insertAdjacentElement('afterend', collapsiblePanelView.element);
+    const panelNodes = injectionContainer.querySelectorAll(CollapsiblePanelView.elementSelectors.NATIVE) ?? [];
+    const siblingElement = Number.isInteger(insertIndex)
+        ? panelNodes[insertIndex] ?? null
+        : null;
+    if (siblingElement) {
+        siblingElement.insertAdjacentElement('beforebegin', collapsiblePanelView.element);
+    }
+    else {
+        [...panelNodes]
+            .at(-1)
+            ?.insertAdjacentElement('afterend', collapsiblePanelView.element);
+    }
     return collapsiblePanelView;
 }
 const waitForAppMenuParentReady = once(async () => {

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/track-gmail-styles.d.ts

@@ -1,2 +1,6 @@
-export default function trackGmailStyles(): void;
+export declare const stylesStream: import("kefir-bus").Bus<{
+    type: 'theme';
+    isDarkMode: boolean;
+}, unknown>;
+export default function trackGmailStyles(): Promise<void>;
 //# sourceMappingURL=track-gmail-styles.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/track-gmail-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"track-gmail-styles.d.ts","sourceRoot":"","sources":["../../../../../../../src/platform-implementation-js/dom-driver/gmail/gmail-driver/track-gmail-styles.ts"],"names":[],"mappings":"AAsDA,MAAM,CAAC,OAAO,UAAU,gBAAgB,SAwDvC"}
+{"version":3,"file":"track-gmail-styles.d.ts","sourceRoot":"","sources":["../../../../../../../src/platform-implementation-js/dom-driver/gmail/gmail-driver/track-gmail-styles.ts"],"names":[],"mappings":"AAyDA,eAAO,MAAM,YAAY;UACf,OAAO;gBAAc,OAAO;WAEnC,CAAC;AAEJ,wBAA8B,gBAAgB,kBAmE7C"}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/track-gmail-styles.js

@@ -1,3 +1,4 @@
+import kefirBus from 'kefir-bus';
 import Logger from '../../../lib/logger';
 import waitFor from '../../../lib/wait-for';
 import GmailElementGetter from '../gmail-element-getter';
@@ -21,10 +22,11 @@ function getDensity() {
         return 'compact';
     }
 }
+const navItemSelector = '.aio';
 function isDarkTheme() {
     // get the color of the left-nav-menu entries to determine whether Gmail is
     // in dark theme mode.
-    const navItem = document.querySelector('.aio');
+    const navItem = document.querySelector(navItemSelector);
     if (!navItem) {
         Logger.error(new Error('Failed to find nav item'));
         return false;
@@ -45,7 +47,8 @@ function isDarkTheme() {
     }
     return r > 128;
 }
-export default function trackGmailStyles() {
+export const stylesStream = kefirBus();
+export default async function trackGmailStyles() {
     if (document.head.hasAttribute('data-inboxsdk-gmail-style-tracker') ||
         GmailElementGetter.isStandalone()) {
         return;
@@ -71,25 +74,34 @@ export default function trackGmailStyles() {
             else {
                 document.body.classList.remove('inboxsdk__gmail_dark_theme');
             }
+            stylesStream.emit({
+                type: 'theme',
+                isDarkMode: newDarkTheme,
+            });
         }
     }
-    waitFor(() => document.querySelector('.TO .TN') && document.querySelector('.aio'))
-        .then(() => {
-        // Gmail changes an inline <style> sheet when the display density changes.
-        // Watch for changes to all <style> elements.
-        const observer = new MutationObserver(checkStyles);
-        const options = {
-            characterData: true,
-            childList: true,
-        };
-        Array.from(document.styleSheets).forEach((sheet) => {
-            if (sheet.ownerNode.tagName == 'STYLE') {
-                observer.observe(sheet.ownerNode, options);
-            }
-        });
-        checkStyles();
-    })
-        .catch((err) => {
+    try {
+        await waitFor(() => document.querySelector('.TO .TN') &&
+            document.querySelector(navItemSelector));
+    }
+    catch (err) {
         Logger.error(err);
-    });
+        return;
+    }
+    // Gmail changes an inline <style> sheet when the display density changes.
+    // Watch for changes to all <style> elements.
+    const observer = new MutationObserver(checkStyles);
+    const options = {
+        characterData: true,
+        childList: true,
+    };
+    for (const sheet of document.styleSheets) {
+        if (!(sheet.ownerNode instanceof Element)) {
+            continue;
+        }
+        if (sheet.ownerNode.tagName == 'STYLE') {
+            observer.observe(sheet.ownerNode, options);
+        }
+    }
+    checkStyles();
 }

package/src/platform-implementation-js/dom-driver/gmail/gmail-element-getter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gmail-element-getter.d.ts","sourceRoot":"","sources":["../../../../../../src/platform-implementation-js/dom-driver/gmail/gmail-element-getter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAA+B,EAC7B,mBAAmB,EACpB,MAAM,yCAAyC,CAAC;AAmBjD,QAAA,MAAM,kBAAkB;yBACD,WAAW,GAAG,IAAI;uCAcJ,WAAW,GAAG,IAAI;kDAKP,WAAW,GAAG,IAAI;+CAKrB,WAAW,GAAG,IAAI;wBAIzC,WAAW,GAAG,IAAI;iCAOT,WAAW,GAAG,IAAI;gCAInB,WAAW,GAAG,SAAS,GAAG,IAAI;2CA8BnB,WAAW,GAAG,IAAI;iDAIZ,MAAM,UAAU,CAC3D,mBAAmB,EACnB,KAAK,CACN;uBAgBkB,WAAW,GAAG,IAAI;kCAIP,WAAW,GAAG,IAAI;+BAOrB,WAAW,GAAG,IAAI;0CAIP,WAAW,GAAG,IAAI;+BAI7B,WAAW,GAAG,IAAI;+CAQrC,GAAG,KACR,MAAM,UAAU,CAAC,WAAW,EAAE,KAAK,CAAC;qBAItB,WAAW,GAAG,IAAI;+BAOR,OAAO;;;;;;uDAgFiB,WAAW,GAAG,IAAI;mDAItB,WAAW,GAAG,IAAI;0BAQ3C,WAAW,EAAE;0BAIb,WAAW,GAAG,IAAI;sBAItB,gBAAgB,GAAG,IAAI;qCAMR,WAAW,GAAG,IAAI;kCAIrB,WAAW,GAAG,IAAI;2BAIzB,WAAW,GAAG,IAAI;iCAWZ,WAAW,GAAG,IAAI;yBAI1B,WAAW;8BAIN,WAAW,GAAG,IAAI;sBAM1B,OAAO;mBAaV,OAAO;qBAIL,OAAO;oBAIR,OAAO;iCAIM,OAAO;gCAOR,OAAO;;qCASJ,WAAW,GAAG,IAAI;;gCAKrB,QAAQ,IAAI,CAAC;CAG1C,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"gmail-element-getter.d.ts","sourceRoot":"","sources":["../../../../../../src/platform-implementation-js/dom-driver/gmail/gmail-element-getter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAA+B,EAC7B,mBAAmB,EACpB,MAAM,yCAAyC,CAAC;AAmBjD,QAAA,MAAM,kBAAkB;yBACD,WAAW,GAAG,IAAI;uCAcJ,WAAW,GAAG,IAAI;kDAKP,WAAW,GAAG,IAAI;+CAKrB,WAAW,GAAG,IAAI;wBAIzC,WAAW,GAAG,IAAI;iCAOT,WAAW,GAAG,IAAI;gCAInB,WAAW,GAAG,SAAS,GAAG,IAAI;2CA8BnB,WAAW,GAAG,IAAI;iDAIZ,MAAM,UAAU,CAC3D,mBAAmB,EACnB,KAAK,CACN;uBAgBkB,WAAW,GAAG,IAAI;kCAIP,WAAW,GAAG,IAAI;+BAUrB,WAAW,GAAG,IAAI;0CAIP,WAAW,GAAG,IAAI;+BAI7B,WAAW,GAAG,IAAI;+CAQrC,GAAG,KACR,MAAM,UAAU,CAAC,WAAW,EAAE,KAAK,CAAC;qBAItB,WAAW,GAAG,IAAI;+BAOR,OAAO;;;;;;uDAgFiB,WAAW,GAAG,IAAI;mDAItB,WAAW,GAAG,IAAI;0BAQ3C,WAAW,EAAE;0BAIb,WAAW,GAAG,IAAI;sBAItB,gBAAgB,GAAG,IAAI;qCAMR,WAAW,GAAG,IAAI;kCAIrB,WAAW,GAAG,IAAI;2BAIzB,WAAW,GAAG,IAAI;iCAWZ,WAAW,GAAG,IAAI;yBAI1B,WAAW;8BAIN,WAAW,GAAG,IAAI;sBAM1B,OAAO;mBAaV,OAAO;qBAIL,OAAO;oBAIR,OAAO;iCAIM,OAAO;gCAOR,OAAO;;qCASJ,WAAW,GAAG,IAAI;;gCAKrB,QAAQ,IAAI,CAAC;CAG1C,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/src/platform-implementation-js/dom-driver/gmail/gmail-element-getter.js

@@ -89,6 +89,9 @@ const GmailElementGetter = {
         return document.querySelector('.aeN .aj5.J-KU-Jg');
     },
     getLeftNavContainerElement() {
+        if (this.getAppMenu()) {
+            return this.getAppMenuContainer()?.querySelector('.aqn.aIH') ?? null;
+        }
         if (isIntegratedViewGmail()) {
             return document.querySelector('div[role=navigation] + div.aqn');
         }

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-menu-item-view.d.ts

@@ -17,19 +17,11 @@ export declare class GmailAppMenuItemView extends GmailAppMenuItemView_base {
         readonly HOVER: "aIk";
         readonly ACTIVE: "apV";
     };
-    get element(): HTMLElement | undefined;
-    setMenuItemDescriptor(newMenuItemDescriptor: AppMenuItemDescriptor): void;
-    get menuItemDescriptor(): AppMenuItemDescriptor | undefined;
-    constructor(driver: GmailDriver);
+    get element(): HTMLElement;
+    set menuItemDescriptor(newMenuItemDescriptor: AppMenuItemDescriptor);
+    get menuItemDescriptor(): AppMenuItemDescriptor;
+    constructor(driver: GmailDriver, menuItemDescriptor: AppMenuItemDescriptor);
     remove(): void;
-    /**
-     * @internal
-     */
-    blur(): void;
-    /**
-     * @internal
-     */
-    hover(): void;
 }
 export {};
 //# sourceMappingURL=gmail-app-menu-item-view.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-menu-item-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gmail-app-menu-item-view.d.ts","sourceRoot":"","sources":["../../../../../../../src/platform-implementation-js/dom-driver/gmail/views/gmail-app-menu-item-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,OAAO,iBAAiB,MAAM,eAAe,CAAC;AAK9C,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/B,IAAI,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,MAAgB,CAAC;AAC1C,eAAO,MAAM,cAAc,yBAAmC,CAAC;AAC/D,eAAO,MAAM,aAAa,4BAA+C,CAAC;mDAOL,kBAAkB,aAAa,CAAC;AAArG,qBAAa,oBAAqB,SAAQ,yBAA4D;;IACpG,MAAM,CAAC,UAAU;;;MAGN;IAOX,IAAI,OAAO,4BAEV;IAED,qBAAqB,CAAC,qBAAqB,EAAE,qBAAqB;IAKlE,IAAI,kBAAkB,sCAErB;gBAEW,MAAM,EAAE,WAAW;IAc/B,MAAM;IAON;;OAEG;IACH,IAAI;IAIJ;;OAEG;IACH,KAAK;CA4FN"}
+{"version":3,"file":"gmail-app-menu-item-view.d.ts","sourceRoot":"","sources":["../../../../../../../src/platform-implementation-js/dom-driver/gmail/views/gmail-app-menu-item-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,OAAO,iBAAiB,MAAM,eAAe,CAAC;AAO9C,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/B,IAAI,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,MAAgB,CAAC;AAC1C,eAAO,MAAM,cAAc,yBAAmC,CAAC;AAC/D,eAAO,MAAM,aAAa,4BAA+C,CAAC;mDAOL,kBAAkB,aAAa,CAAC;AAArG,qBAAa,oBAAqB,SAAQ,yBAA4D;;IACpG,MAAM,CAAC,UAAU;;;MAGN;IAOX,IAAI,OAAO,gBAEV;IAED,IAAI,kBAAkB,CAAC,qBAAqB,uBAAA,EAG3C;IAED,IAAI,kBAAkB,0BAErB;gBAEW,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,qBAAqB;IAwB1E,MAAM;CA6GP"}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-menu-item-view.js

@@ -2,6 +2,8 @@ import querySelector from '../../../lib/dom/querySelectorOrFail';
 import { EventEmitter } from 'events';
 import cx from 'classnames';
 import GmailElementGetter from '../gmail-element-getter';
+import { stylesStream } from '../gmail-driver/track-gmail-styles';
+import isEqual from 'fast-deep-equal';
 export const NATIVE_CLASS = 'Xa';
 export const INBOXSDK_CLASS = 'inboxsdk__appMenuItem';
 export const ELEMENT_CLASS = `${NATIVE_CLASS} ${INBOXSDK_CLASS}`;
@@ -21,17 +23,26 @@ export class GmailAppMenuItemView extends EventEmitter {
     get element() {
         return this.#element;
     }
-    setMenuItemDescriptor(newMenuItemDescriptor) {
+    set menuItemDescriptor(newMenuItemDescriptor) {
         this.#menuItemDescriptor = newMenuItemDescriptor;
         this.#update();
     }
     get menuItemDescriptor() {
         return this.#menuItemDescriptor;
     }
-    constructor(driver) {
+    constructor(driver, menuItemDescriptor) {
         super();
         this.#element = this.#setupElement();
         this.#driver = driver;
+        this.#menuItemDescriptor = menuItemDescriptor;
+        this.#update();
+        stylesStream
+            .skipDuplicates((a, b) => isEqual(a, b))
+            .onValue(({ type }) => {
+            if (type === 'theme') {
+                this.#update();
+            }
+        });
         driver.getStopper().onValue(() => this.remove());
         this.#element.addEventListener('click', (e) => this.#onClick(e));
         this.#element.addEventListener('mouseleave', this.#onBlur);
@@ -44,21 +55,6 @@ export class GmailAppMenuItemView extends EventEmitter {
         this.element?.remove();
         this.emit('destroy');
     }
-    /**
-     * @internal
-     */
-    blur() {
-        this.element?.classList.remove(GmailAppMenuItemView.elementCss.HOVER);
-    }
-    /**
-     * @internal
-     */
-    hover() {
-        if (this.element?.classList.contains(GmailAppMenuItemView.elementCss.ACTIVE)) {
-            return;
-        }
-        this.element?.classList.add(GmailAppMenuItemView.elementCss.HOVER);
-    }
     #setupElement() {
         const element = document.createElement('div');
         element.className = ELEMENT_CLASS;
@@ -82,6 +78,7 @@ export class GmailAppMenuItemView extends EventEmitter {
         const headingElement = querySelector(element, HEADING_ELEMENT_SELECTOR);
         headingElement.textContent = this.#menuItemDescriptor?.name ?? '';
     }
+    static #preloadedIcons = new Set();
     #updateIcon(element) {
         const iconContainerEl = querySelector(element, ICON_ELEMENT_SELECTOR);
         const { iconUrl, iconClassName } = this.#menuItemDescriptor ?? {};
@@ -89,8 +86,22 @@ export class GmailAppMenuItemView extends EventEmitter {
             const rawTheme = GmailElementGetter.isDarkTheme()
                 ? iconUrl.darkTheme
                 : iconUrl.lightTheme;
+            if (!rawTheme)
+                return;
             const theme = typeof rawTheme === 'string' ? rawTheme : rawTheme.default;
             const activeImg = typeof rawTheme === 'string' ? rawTheme : rawTheme.active;
+            // alleviate FOUC when switching between active and default icons
+            // https://stackoverflow.com/a/68521953/1924257
+            for (const url of [theme, activeImg]) {
+                if (GmailAppMenuItemView.#preloadedIcons.has(url))
+                    continue;
+                GmailAppMenuItemView.#preloadedIcons.add(url);
+                var link = document.createElement('link');
+                link.rel = 'preload';
+                link.as = 'image';
+                link.href = url;
+                document.head.appendChild(link);
+            }
             iconContainerEl.style.setProperty('--background-image', `url(${theme})`);
             iconContainerEl.style.setProperty('--background-image--active', `url(${activeImg})`);
         }

package/src/platform-implementation-js/namespaces/app-menu.d.ts

@@ -8,8 +8,8 @@ type ThemedIcon = string | {
 export type AppMenuItemDescriptor = {
     name: string;
     iconUrl?: {
-        darkTheme: ThemedIcon;
-        lightTheme: ThemedIcon;
+        darkTheme?: ThemedIcon;
+        lightTheme?: ThemedIcon;
     };
     className?: string;
     iconClassName?: string;
@@ -28,6 +28,13 @@ export type AppMenuItemDescriptor = {
      */
     isRouteActive: (routeView: RouteView) => boolean;
 };
+/**
+ * In dark themes, Gmail has different colored primary buttons depending on hover or active state
+ */
+type PanelPrimaryButtonThemedIcon = string | {
+    panelHovered: string;
+    panelDefault: string;
+};
 export type AppMenuItemPanelDescriptor = {
     className?: string;
     /** In the form of HTML as a string.
@@ -38,8 +45,8 @@ export type AppMenuItemPanelDescriptor = {
         name: string;
         onClick: (e: MouseEvent) => void;
         iconUrl?: {
-            darkTheme: string;
-            lightTheme: string;
+            darkTheme?: PanelPrimaryButtonThemedIcon;
+            lightTheme?: PanelPrimaryButtonThemedIcon;
         };
         className?: string;
     };

package/src/platform-implementation-js/namespaces/app-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-menu.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/namespaces/app-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,KAAK,UAAU,GACX,MAAM,GACN;IACE,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEN,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE;QACR,SAAS,EAAE,UAAU,CAAC;QACtB,UAAU,EAAE,UAAU,CAAC;KACxB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,EAAE,CAAC;IACjB;;;;OAIG;IACH,aAAa,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,OAAO,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;0EAEsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE;QACd,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;QACjC,OAAO,CAAC,EAAE;YACR,SAAS,EAAE,MAAM,CAAC;YAClB,UAAU,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,OAAO;;gBAGd,MAAM,EAAE,WAAW;IAI/B,WAAW,CAAC,kBAAkB,EAAE,qBAAqB,GAAG,eAAe;IAKjE,OAAO;CAId"}
+{"version":3,"file":"app-menu.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/namespaces/app-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,KAAK,UAAU,GACX,MAAM,GACN;IACE,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEN,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,UAAU,CAAC,EAAE,UAAU,CAAC;KACzB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,EAAE,CAAC;IACjB;;;;OAIG;IACH,aAAa,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,OAAO,CAAC;CAClD,CAAC;AAEF;;GAEG;AACH,KAAK,4BAA4B,GAC7B,MAAM,GACN;IACE,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEN,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;0EAEsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE;QACd,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;QACjC,OAAO,CAAC,EAAE;YACR,SAAS,CAAC,EAAE,4BAA4B,CAAC;YACzC,UAAU,CAAC,EAAE,4BAA4B,CAAC;SAC3C,CAAC;QACF,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,OAAO;;gBAGd,MAAM,EAAE,WAAW;IAI/B,WAAW,CAAC,kBAAkB,EAAE,qBAAqB,GAAG,eAAe;IAKjE,OAAO;CAId"}

package/src/platform-implementation-js/views/app-menu-item-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-menu-item-view.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/views/app-menu-item-view.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAWzC,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEL,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAK3D,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;8CA0C8D,aAAa,aAAa,CAAC;AAH3F;;GAEG;AACH,qBAAa,eAAgB,SAAQ,oBAAuD;;IAqV1F,IAAI,kBAAkB,0BAErB;gBAQW,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,qBAAqB;IAsDpE,mBAAmB,CAAC,eAAe,EAAE,0BAA0B;IA2C/D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB;IAMtD,MAAM;CAYP"}
+{"version":3,"file":"app-menu-item-view.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/views/app-menu-item-view.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAWzC,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEL,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAK3D,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;8CA0C8D,aAAa,aAAa,CAAC;AAH3F;;GAEG;AACH,qBAAa,eAAgB,SAAQ,oBAAuD;;IA8W1F,IAAI,kBAAkB,0BAErB;gBAQW,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,qBAAqB;IAsDpE,mBAAmB,CAAC,eAAe,EAAE,0BAA0B;IA2C/D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB;IAMtD,MAAM;CAaP"}

package/src/platform-implementation-js/views/app-menu-item-view.js

@@ -60,6 +60,26 @@ export class AppMenuItemView extends EventEmitter {
         const activePanel = AppMenuItemView.#getActivePanel();
         return !activePanel;
     }
+    static #adjustTooltipNub() {
+        // adjust all menu items' collapsible panel's tooltip nub position
+        const appMenuElement = GmailElementGetter.getAppMenu();
+        for (const menuItem of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}`) ?? []) {
+            const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
+            if (!panel)
+                continue;
+            const nubElement = panel?.querySelector('* > .aTV');
+            const iconElement = menuItem?.querySelector('.V6');
+            const iconElementBox = iconElement?.getBoundingClientRect();
+            const offsetTop = (iconElement?.offsetTop ?? 0) + (iconElementBox?.height ?? 0) * 0.5;
+            const nubSide = 17;
+            const nubDiagonal = nubSide * Math.sqrt(2);
+            const offsetNub = nubDiagonal / 4;
+            const offset = offsetTop - offsetNub;
+            if (nubElement && offset) {
+                nubElement.style.top = `${offset}px`;
+            }
+        }
+    }
     static #setUpRouteViewDriverStream(driver) {
         if (AppMenuItemView.#routeViewDriverStream)
             return;
@@ -298,6 +318,7 @@ export class AppMenuItemView extends EventEmitter {
             const gmailElement = gmailView.element;
             if (gmailElement) {
                 AppMenuItemView.#menuItemToPanelMap.set(gmailElement, undefined);
+                AppMenuItemView.#adjustTooltipNub();
             }
             gmailView.on('destroy', () => {
                 this.remove();
@@ -335,7 +356,7 @@ export class AppMenuItemView extends EventEmitter {
                 [CollapsiblePanelView.elementCss.PANEL_LESS]: AppMenuItemView.#isPanelLess(),
             }),
         };
-        const collapsiblePanel = await addCollapsiblePanel(this.#driver, descriptor);
+        const collapsiblePanel = await addCollapsiblePanel(this.#driver, descriptor, this.menuItemDescriptor.insertIndex);
         if (collapsiblePanel) {
             this.#gmailViewPromise.then((gmailView) => {
                 const gmailElement = gmailView.element;
@@ -347,9 +368,8 @@ export class AppMenuItemView extends EventEmitter {
                             e,
                         ]);
                     });
-                }
-                if (gmailElement && collapsiblePanel) {
                     AppMenuItemView.#menuItemToPanelMap.set(gmailElement, collapsiblePanel.element);
+                    AppMenuItemView.#adjustTooltipNub();
                 }
             });
         }
@@ -358,7 +378,7 @@ export class AppMenuItemView extends EventEmitter {
     }
     async update(menuItemDescriptor) {
         const gmailView = await this.#gmailViewPromise;
-        gmailView.setMenuItemDescriptor(menuItemDescriptor);
+        gmailView.menuItemDescriptor = menuItemDescriptor;
         this.#menuItemDescriptor = menuItemDescriptor;
     }
     remove() {
@@ -371,6 +391,7 @@ export class AppMenuItemView extends EventEmitter {
             gmailView.element &&
                 AppMenuItemView.#menuItemToPanelMap.delete(gmailView.element);
             gmailView.remove();
+            AppMenuItemView.#adjustTooltipNub();
         });
         AppMenuItemView.#appMenuItemViews.delete(this);
     }

package/src/platform-implementation-js/views/collapsible-panel-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-panel-view.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/views/collapsible-panel-view.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAIpE,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,eAAO,MAAM,YAAY,OAAiB,CAAC;AAC3C,eAAO,MAAM,cAAc,8BAAwC,CAAC;AAapE,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/B,CAAC;mDAEmE,aAAa,aAAa,CAAC;AAAhG,qBAAa,oBAAqB,SAAQ,yBAAuD;;IAC/F,MAAM,CAAC,gBAAgB;;;MAGZ;IACX,MAAM,CAAC,UAAU;;;QAGf,kDAAkD;;;;MAIzC;IASX,IAAI,OAAO,YAEV;IAED,UAAU,CAAC,OAAO,EAAE,OAAO;IAS3B,IAAI,eAAe,IAIkB,0BAA0B,CAF9D;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,0BAA0B,EAG9D;IAED,IAAI,OAAO,gBAEV;IAED,IAAI,qBAAqB,mBAExB;gBAGC,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,0BAA0B;IAY7C,MAAM;IAON,UAAU,CACR,iBAAiB,EACb,iBAAiB,GACjB,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;CAsL/C"}
+{"version":3,"file":"collapsible-panel-view.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/views/collapsible-panel-view.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAIpE,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAI1C,eAAO,MAAM,YAAY,OAAiB,CAAC;AAC3C,eAAO,MAAM,cAAc,8BAAwC,CAAC;AAcpE,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/B,CAAC;mDAEmE,aAAa,aAAa,CAAC;AAAhG,qBAAa,oBAAqB,SAAQ,yBAAuD;;IAC/F,MAAM,CAAC,gBAAgB;;;MAGZ;IACX,MAAM,CAAC,UAAU;;;QAGf,kDAAkD;;;;MAIzC;IASX,IAAI,OAAO,YAEV;IAED,UAAU,CAAC,OAAO,EAAE,OAAO;IAS3B,IAAI,eAAe,+BAElB;IAED,IAAI,eAAe,CAAC,eAAe,4BAAA,EAGlC;IAED,IAAI,OAAO,gBAEV;IAED,IAAI,qBAAqB,mBAExB;gBAGC,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,0BAA0B;IAmB7C,MAAM;IAON,UAAU,CACR,iBAAiB,EACb,iBAAiB,GACjB,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;CA+N/C"}

package/src/platform-implementation-js/views/collapsible-panel-view.js

@@ -6,6 +6,8 @@ import autoHtml from 'auto-html';
 import querySelector from '../lib/dom/querySelectorOrFail';
 import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
 import NavItemView from './nav-item-view';
+import { stylesStream } from '../dom-driver/gmail/gmail-driver/track-gmail-styles';
+import isEqual from 'fast-deep-equal';
 export const NATIVE_CLASS = 'aqn';
 export const INBOXSDK_CLASS = 'inboxsdk__collapsiblePanel';
 const ELEMENT_CLASS = `${NATIVE_CLASS} ${INBOXSDK_CLASS} oy8Mbf`;
@@ -14,6 +16,7 @@ const PRIMARY_BUTTON_ELEMENT_SELECTOR = '.T-I.T-I-KE.L3';
 const scrollablePanelClass = 'at9';
 const scrollablePanelSelector = `.${scrollablePanelClass}`;
 const loadingElementClass = 'inboxsdk__collapsiblePanel_loading_container';
+const panelLoadingClass = `${loadingElementClass}--active`;
 const loadingElementSelector = `.${loadingElementClass}`;
 const NAV_MENU_CONTAINER_ELEMENT_SELECTOR = '.at9 .n3 .TK';
 export class CollapsiblePanelView extends EventEmitter {
@@ -68,6 +71,13 @@ export class CollapsiblePanelView extends EventEmitter {
         this.#element.addEventListener('mouseleave', (e) => {
             this.emit('blur', e);
         });
+        stylesStream
+            .skipDuplicates((a, b) => isEqual(a, b))
+            .onValue(({ type }) => {
+            if (type === 'theme') {
+                this.#update();
+            }
+        });
     }
     remove() {
         if (this.#destroyed)
@@ -86,22 +96,41 @@ export class CollapsiblePanelView extends EventEmitter {
         const navItemView = new NavItemView(appId, this.#driver, navItemDescriptorPropertyStream, gmailNavItemView);
         return navItemView;
     }
+    #extractPrimaryButtonTheme() {
+        const { iconUrl } = this.panelDescriptor.primaryButton ?? {};
+        if (!iconUrl) {
+            return;
+        }
+        const theme = GmailElementGetter.isDarkTheme()
+            ? iconUrl.darkTheme
+            : iconUrl.lightTheme;
+        if (!theme) {
+            return;
+        }
+        if (typeof theme === 'string') {
+            return {
+                panelHovered: theme,
+                panelDefault: theme,
+            };
+        }
+        else {
+            return {
+                panelDefault: theme.panelDefault,
+                panelHovered: theme.panelHovered,
+            };
+        }
+    }
     #setupElement() {
         const { panelDescriptor } = this;
         const { loadingIcon } = panelDescriptor;
-        const { iconUrl: themedIcons, className, name = '', } = panelDescriptor?.primaryButton ?? {};
+        const { className, name = '' } = panelDescriptor?.primaryButton ?? {};
         const element = document.createElement('div');
         element.className = cx(ELEMENT_CLASS, this.panelDescriptor.className);
         const primaryButtonClass = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
-        let iconUrl;
-        if (themedIcons) {
-            if (GmailElementGetter.isDarkTheme()) {
-                iconUrl = themedIcons.darkTheme;
-            }
-            else {
-                iconUrl = themedIcons.lightTheme;
-            }
-        }
+        const loadingElClass = cx(loadingElementClass, {
+            [panelLoadingClass]: this.#loading,
+        });
+        const { panelDefault: defaultIconUrl, panelHovered: hoverPanelIconUrl } = this.#extractPrimaryButtonTheme() ?? {};
         element.innerHTML = autoHtml `
       <div class="aBO">
         <div class="aic">
@@ -112,7 +141,7 @@ export class CollapsiblePanelView extends EventEmitter {
           </div>
         </div>
         <div class="${scrollablePanelClass}">
-          <div class="${loadingElementClass}">${loadingIcon ? { __html: loadingIcon } : ''}</div>
+          <div class="${loadingElClass}">${loadingIcon ? { __html: loadingIcon } : ''}</div>
           <div class="Ls77Lb aZ6">
             <div class="pp" style="user-select: none;">
               <div>
@@ -136,10 +165,11 @@ export class CollapsiblePanelView extends EventEmitter {
           </div>
         </div>
       </div>
-      <div class="aTV" style="top: 27px;"></div>
+      <div class="aTV"></div>
     `.trim();
         const primaryBtnEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
-        primaryBtnEl.style.setProperty('--background-image', iconUrl ? `url(${iconUrl})` : 'unset');
+        primaryBtnEl.style.setProperty('--background-image', defaultIconUrl ? `url(${defaultIconUrl})` : 'unset');
+        primaryBtnEl.style.setProperty('--background-image--hover', hoverPanelIconUrl ? `url(${hoverPanelIconUrl})` : 'unset');
         primaryBtnEl.addEventListener('click', this.#onPrimaryButtonClick);
         return element;
     }
@@ -156,18 +186,35 @@ export class CollapsiblePanelView extends EventEmitter {
         this.#updateIcon(element);
         this.#updateScrollablePanelLoading(element);
     }
+    static #preloadedIcons = new Set();
     #updateIcon(element) {
         const iconContainerEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
-        const { iconUrl, className } = this.panelDescriptor.primaryButton ?? {};
-        if (iconUrl) {
-            const backgroundImage = `url(${GmailElementGetter.isDarkTheme()
-                ? iconUrl.darkTheme
-                : iconUrl.lightTheme})`;
-            iconContainerEl.style.setProperty('--background-image', backgroundImage);
+        const { panelDefault, panelHovered } = this.#extractPrimaryButtonTheme() ?? {};
+        // alleviate FOUC when switching between active and default icons
+        // https://stackoverflow.com/a/68521953/1924257
+        for (const url of [panelHovered, panelDefault]) {
+            if (!url || CollapsiblePanelView.#preloadedIcons.has(url)) {
+                continue;
+            }
+            CollapsiblePanelView.#preloadedIcons.add(url);
+            var link = document.createElement('link');
+            link.rel = 'preload';
+            link.as = 'image';
+            link.href = url;
+            document.head.appendChild(link);
         }
-        else {
-            iconContainerEl.style.setProperty('--background-image', 'unset');
+        for (const [key, value] of Object.entries({
+            '--background-image--hover': panelHovered,
+            '--background-image': panelDefault,
+        })) {
+            if (value) {
+                iconContainerEl.style.setProperty(key, `url(${value})`);
+            }
+            else {
+                iconContainerEl.style.removeProperty(key);
+            }
         }
+        const { className } = this.panelDescriptor.primaryButton ?? {};
         iconContainerEl.className = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
     }
     #updateName(element) {
@@ -182,7 +229,6 @@ export class CollapsiblePanelView extends EventEmitter {
         if (!scrollablePanelLoadingEl) {
             return;
         }
-        const panelLoadingClass = `${loadingElementClass}--active`;
         if (this.loading) {
             scrollablePanelLoadingEl.classList.add(panelLoadingClass);
         }