@inboxsdk/core 0.2.29-alpha.1 → 0.2.29-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inboxsdk/core",
-  "version": "0.2.29-alpha.1",
+  "version": "0.2.29-alpha.3",
   "description": "Library for building browser extensions for Gmail",
   "main": "inboxsdk.js",
   "author": "Streak",

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

@@ -19,6 +19,7 @@ declare const GmailElementGetter: {
     getMoleParent(): HTMLElement | null;
     shouldAddNavItemsInline(): boolean;
     getAppMenuAsync: () => Promise<HTMLElement | undefined>;
+    isAppBurgerMenuOpen(): boolean;
     getAppMenuContainer(): HTMLElement | null;
     getSeparateSectionNavItemMenuInjectionContainer(): HTMLElement | null;
     getSameSectionNavItemMenuInjectionContainer(): HTMLElement | null;

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;AAUjD,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;;;uDA6EiB,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;AAUjD,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;;;;uDAqFiB,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

@@ -164,6 +164,11 @@ const GmailElementGetter = {
             }
         }
     }),
+    isAppBurgerMenuOpen() {
+        return (document
+            .querySelector('.gb_Hc[aria-expanded]')
+            ?.getAttribute('aria-expanded') === 'true' ?? false);
+    },
     getAppMenuContainer() {
         return document.querySelector('.aqk.aql.bkL');
     },

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

@@ -1,7 +1,7 @@
 import { AppMenuItemDescriptor } from '../../../namespaces/app-menu';
 import GmailDriver from '../gmail-driver';
 import TypedEventEmitter from 'typed-emitter';
-type MessageEvents = {
+export type MessageEvents = {
     click: (e: MouseEvent) => void;
     blur: (e: MouseEvent) => void;
     hover: (e: MouseEvent) => void;
@@ -30,10 +30,6 @@ export declare class GmailAppMenuItemView extends GmailAppMenuItemView_base {
      * @internal
      */
     hover(): void;
-    /**
-     * @internal
-     */
-    activate(): 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,KAAK,aAAa,GAAG;IACnB,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;IAW/B,MAAM;IAON;;OAEG;IACH,IAAI;IAIJ;;OAEG;IACH,KAAK;IASL;;OAEG;IACH,QAAQ;CAiFT"}
+{"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;CAqFN"}

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

@@ -34,8 +34,8 @@ export class GmailAppMenuItemView extends EventEmitter {
         this.#driver = driver;
         driver.getStopper().onValue(() => this.remove());
         this.#element.addEventListener('click', (e) => this.#onClick(e));
-        this.#element.addEventListener('mouseenter', this.#onHover);
         this.#element.addEventListener('mouseleave', this.#onBlur);
+        querySelector(this.#element, ICON_ELEMENT_SELECTOR).addEventListener('mouseenter', this.#onHover);
     }
     remove() {
         if (this.#destroyed)
@@ -59,19 +59,6 @@ export class GmailAppMenuItemView extends EventEmitter {
         }
         this.element?.classList.add(GmailAppMenuItemView.elementCss.HOVER);
     }
-    /**
-     * @internal
-     */
-    activate() {
-        this.element?.classList.remove(GmailAppMenuItemView.elementCss.HOVER);
-        this.element?.classList.add(GmailAppMenuItemView.elementCss.ACTIVE);
-    }
-    // /**
-    //  * @internal
-    //  */
-    // deactivate() {
-    //   this.element?.classList.remove(GmailAppMenuItemView.elementCss.ACTIVE);
-    // }
     #setupElement() {
         const element = document.createElement('div');
         element.className = ELEMENT_CLASS;
@@ -98,10 +85,13 @@ export class GmailAppMenuItemView extends EventEmitter {
         const iconContainerEl = querySelector(element, ICON_ELEMENT_SELECTOR);
         const { iconUrl, iconClassName } = this.#menuItemDescriptor ?? {};
         if (iconUrl) {
-            const theme = GmailElementGetter.isDarkTheme()
+            const rawTheme = GmailElementGetter.isDarkTheme()
                 ? iconUrl.darkTheme
                 : iconUrl.lightTheme;
+            const theme = typeof rawTheme === 'string' ? rawTheme : rawTheme.default;
+            const activeImg = typeof rawTheme === 'string' ? rawTheme : rawTheme.active;
             iconContainerEl.style.setProperty('--background-image', `url(${theme})`);
+            iconContainerEl.style.setProperty('--background-image--active', `url(${activeImg})`);
         }
         iconContainerEl.className = cx(ICON_ELEMENT_CLASS, iconClassName);
     }
@@ -113,7 +103,7 @@ export class GmailAppMenuItemView extends EventEmitter {
         this.emit('click', e);
         this.#menuItemDescriptor?.onClick?.(e);
         if (this.#menuItemDescriptor?.routeID) {
-            this.#driver.goto(this.#menuItemDescriptor.routeID, this.#menuItemDescriptor?.routeParams);
+            this.#driver.goto(this.#menuItemDescriptor.routeID, this.#menuItemDescriptor.routeParams);
         }
     }
     #onBlur = (e) => {

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

@@ -1,19 +1,31 @@
 import { RouteView } from '../../inboxsdk';
 import GmailDriver from '../dom-driver/gmail/gmail-driver';
 import { AppMenuItemView } from '../views/app-menu-item-view';
+type ThemedIcon = string | {
+    active: string;
+    default: string;
+};
 export type AppMenuItemDescriptor = {
     name: string;
     iconUrl?: {
-        darkTheme: string;
-        lightTheme: string;
+        darkTheme: ThemedIcon;
+        lightTheme: ThemedIcon;
     };
     className?: string;
     iconClassName?: string;
     insertIndex?: number;
     onClick?: (e?: MouseEvent) => void | null;
     onHover?: (e?: MouseEvent) => void | null;
+    /**
+     * If routeID is provided, isRouteActive should be as well.
+     */
     routeID?: string;
     routeParams?: {};
+    /**
+     * @example (routeView) => routeView.getRouteID() === 'inbox'
+     *
+     * @see RouteView
+     */
     isRouteActive: (routeView: RouteView) => boolean;
 };
 export type AppMenuItemPanelDescriptor = {
@@ -37,4 +49,5 @@ export default class AppMenu {
     addMenuItem(menuItemDescriptor: AppMenuItemDescriptor): AppMenuItemView;
     isShown(): Promise<boolean>;
 }
+export {};
 //# sourceMappingURL=app-menu.d.ts.map

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,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE;QACR,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;KACpB,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,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,EAAE,CAAC;IACjB,aAAa,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,OAAO,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,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,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"}

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

@@ -14,6 +14,7 @@ declare const AppMenuItemView_base: new () => TypedEmitter<MessageEvents>;
  */
 export declare class AppMenuItemView extends AppMenuItemView_base {
     #private;
+    get menuItemDescriptor(): AppMenuItemDescriptor;
     constructor(driver: GmailDriver, menuItemDescriptor: AppMenuItemDescriptor);
     addCollapsiblePanel(panelDescriptor: AppMenuItemPanelDescriptor): Promise<CollapsiblePanelView | undefined>;
     update(menuItemDescriptor: AppMenuItemDescriptor): Promise<void>;

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;AAI3D,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;8CA2C8D,aAAa,aAAa,CAAC;AAH3F;;GAEG;AACH,qBAAa,eAAgB,SAAQ,oBAAuD;;gBA0Q9E,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,qBAAqB;IAiDpE,mBAAmB,CAAC,eAAe,EAAE,0BAA0B;IAkC/D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB;IAKtD,MAAM;CA+BP"}
+{"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;AAUzC,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;8CAyC8D,aAAa,aAAa,CAAC;AAH3F;;GAEG;AACH,qBAAa,eAAgB,SAAQ,oBAAuD;;IAiT1F,IAAI,kBAAkB,0BAErB;gBAQW,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,qBAAqB;IAuDpE,mBAAmB,CAAC,eAAe,EAAE,0BAA0B;IAiC/D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB;IAMtD,MAAM;CAYP"}

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

@@ -1,11 +1,11 @@
 import Kefir from 'kefir';
-import kefirStopper from 'kefir-stopper';
 import kefirBus from 'kefir-bus';
 import EventEmitter from '../lib/safe-event-emitter';
 import { GmailAppMenuItemView, NATIVE_CLASS, INBOXSDK_CLASS, } from '../dom-driver/gmail/views/gmail-app-menu-item-view';
 import { NATIVE_CLASS as PANEL_NATIVE_CLASS, CollapsiblePanelView, } from './collapsible-panel-view';
 import { addCollapsiblePanel } from '../dom-driver/gmail/gmail-driver/add-collapsible-panel';
 import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
+import defer from '../../common/defer';
 var NativeAppMenuClassName;
 (function (NativeAppMenuClassName) {
     NativeAppMenuClassName["MAIL"] = "XJ";
@@ -33,12 +33,13 @@ const routeIDtoMenuItemClass = Object.fromEntries([
     ...SPACES_ROUTES.map((route) => [route, NativeAppMenuClassName.SPACES]),
     ...MEET_ROUTES.map((route) => [route, NativeAppMenuClassName.MEET]),
 ]);
-const initialRoutingStateStopper = kefirStopper();
 /**
  * Contains both a native Gmail app menu item and a collapsible panel.
  */
 export class AppMenuItemView extends EventEmitter {
     static #menuItemChangeStream = Kefir.pool();
+    static #menuItemChangeBus = kefirBus();
+    static #menuItemAddedDeferred = defer();
     static #routeViewDriverStream;
     static #menuItemToPanelMap = new Map();
     static #appMenuItemViews = new Set();
@@ -58,19 +59,9 @@ export class AppMenuItemView extends EventEmitter {
         if (AppMenuItemView.#routeViewDriverStream)
             return;
         AppMenuItemView.#routeViewDriverStream = driver.getRouteViewDriverStream();
-        const bus = kefirBus();
-        AppMenuItemView.#menuItemChangeStream.plug(bus);
-        AppMenuItemView.#routeViewDriverStream
-            .takeUntilBy(initialRoutingStateStopper)
-            .onValue(async (routeView) => {
+        AppMenuItemView.#routeViewDriverStream.onValue(async (routeView) => {
             const routeViewID = routeView.getRouteID();
             const routeType = routeView.getRouteType();
-            const routeViewParams = routeView.getParams();
-            console.debug({
-                routeViewID,
-                routeType,
-                routeViewParams,
-            });
             /* Handling custom app menu items */
             const descriptors = Array.from(AppMenuItemView.#appMenuItemViews, async (appMenuItemView) => {
                 const gmailView = await appMenuItemView.#gmailViewPromise;
@@ -81,17 +72,21 @@ export class AppMenuItemView extends EventEmitter {
                 return descriptor?.isRouteActive(routeView);
             }) ?? [];
             if (gmailView?.element) {
-                bus.emit(['click', gmailView.element]);
+                AppMenuItemView.#menuItemChangeBus.emit(['click', gmailView.element]);
                 return;
             }
             /* Handling native app menu items */
-            const selector = `.${routeViewID
-                ? routeIDtoMenuItemClass[routeViewID] ?? NativeAppMenuClassName.MAIL
-                : NativeAppMenuClassName.MAIL}`;
-            const element = document.querySelector(selector);
-            if (element) {
-                bus.emit(['click', element]);
-                return;
+            let menuItemClass = '';
+            if (routeViewID) {
+                menuItemClass = routeIDtoMenuItemClass[routeViewID];
+            }
+            if ((!routeViewID || !menuItemClass) && routeType !== 'CUSTOM') {
+                menuItemClass = NativeAppMenuClassName.MAIL;
+            }
+            const menuItemElement = menuItemClass &&
+                document.querySelector(`.${menuItemClass}`);
+            if (menuItemElement) {
+                AppMenuItemView.#menuItemChangeBus.emit(['click', menuItemElement]);
             }
         });
     }
@@ -101,6 +96,7 @@ export class AppMenuItemView extends EventEmitter {
             if (!gmailAppMenu) {
                 return;
             }
+            AppMenuItemView.#menuItemChangeStream.plug(AppMenuItemView.#menuItemChangeBus);
             // Set up menu item panel -> menu collapsible panel element mappings
             for (const [menuItemClass, panelClass] of nativeButtonToPanelMap) {
                 const menuItemElement = document.querySelector(`.${NATIVE_CLASS}.${menuItemClass}`);
@@ -111,129 +107,161 @@ export class AppMenuItemView extends EventEmitter {
                     AppMenuItemView.#menuItemToPanelMap.set(menuItemElement, panelElement ?? undefined);
                 }
             }
-            // Set up event listeners we use to control menu UI
-            const stream = Kefir.stream((emitter) => {
-                // We intercept some events emitted on Gmail (native) menu items to gain full control of the menu (menu items and panels).
-                // Thus, some native event handlers won't be invoked so we replicate the Gmail's behavior by ourselves.
-                const appMenuElement = GmailElementGetter.getAppMenuContainer();
-                for (const nativeMenuItem of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}:not(.${INBOXSDK_CLASS})`) ?? []) {
-                    // Gmail uses this listener for panel hover state activation. It's prevented from propagation and we handle UI updates
-                    nativeMenuItem.addEventListener('mouseenter', (e) => {
-                        e.stopImmediatePropagation();
-                        emitter.emit(['mouseenter', nativeMenuItem, e]);
-                    }, true);
-                    // Gmail uses this listener for panel hover state deactivation. It's prevented from propagation and we handle UI updates
-                    nativeMenuItem.addEventListener('mouseleave', (e) => {
-                        e.stopImmediatePropagation();
-                        emitter.emit(['mouseleave', nativeMenuItem, e]);
-                    }, true);
-                    // Click event isn't prevented from propagation to let Gmail handle routing. The styling is handled by us
-                    nativeMenuItem.addEventListener('click', () => {
-                        emitter.emit(['click', nativeMenuItem]);
-                    });
-                    // Handle moving cursor out of panel. We use it to enhance the styling since it won't be handled by Gmail
-                    const panel = AppMenuItemView.#menuItemToPanelMap.get(nativeMenuItem);
-                    panel?.addEventListener('mouseleave', (e) => {
-                        emitter.emit(['mouseleave', nativeMenuItem, e]);
-                    });
-                }
-            });
-            AppMenuItemView.#menuItemChangeStream.plug(stream);
         })();
     }
+    static {
+        AppMenuItemView.#menuItemAddedDeferred.promise.then(() => {
+            // Set up event listeners we use to control menu UI
+            // We intercept some events emitted on Gmail (native) menu items to gain full control of the menu (menu items and panels).
+            // Thus, some native event handlers won't be invoked so we replicate the Gmail's behavior by ourselves.
+            const appMenuElement = GmailElementGetter.getAppMenuContainer();
+            for (const nativeMenuItem of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}:not(.${INBOXSDK_CLASS})`) ?? []) {
+                // Gmail uses this listener for panel hover state activation. It's prevented from propagation and we handle UI updates
+                const buttonElement = nativeMenuItem.querySelector('.V6.CL');
+                buttonElement?.addEventListener('mouseenter', (e) => {
+                    e.stopImmediatePropagation();
+                    AppMenuItemView.#menuItemChangeBus.emit([
+                        'mouseenter',
+                        nativeMenuItem,
+                        e,
+                    ]);
+                }, true);
+                // Gmail uses this listener for panel hover state deactivation. It's prevented from propagation and we handle UI updates
+                nativeMenuItem.addEventListener('mouseleave', (e) => {
+                    e.stopImmediatePropagation();
+                    AppMenuItemView.#menuItemChangeBus.emit([
+                        'mouseleave',
+                        nativeMenuItem,
+                        e,
+                    ]);
+                }, true);
+                // Click event isn't prevented from propagation to let Gmail handle routing. The styling is handled by us
+                nativeMenuItem.addEventListener('click', () => {
+                    AppMenuItemView.#menuItemChangeBus.emit(['click', nativeMenuItem]);
+                });
+                // Handle moving cursor out of panel. We use it to enhance the styling since it won't be handled by Gmail
+                const panel = AppMenuItemView.#menuItemToPanelMap.get(nativeMenuItem);
+                panel?.addEventListener('mouseleave', (e) => {
+                    AppMenuItemView.#menuItemChangeBus.emit([
+                        'mouseleave',
+                        nativeMenuItem,
+                        e,
+                    ]);
+                });
+            }
+        });
+    }
     static {
         AppMenuItemView.#menuItemChangeStream.onValue(async (v) => {
             const [type, menuItem, mouseEvent] = v;
             const { ACTIVE, HOVER } = GmailAppMenuItemView.elementCss;
-            if (type === 'mouseenter') {
-                const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
-                if (mouseEvent.relatedTarget instanceof Node &&
-                    (menuItem.contains(mouseEvent.relatedTarget) ||
-                        panel?.contains(mouseEvent.relatedTarget)))
-                    return;
-                const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
-                const activePanel = AppMenuItemView.#getActivePanel();
-                if (activeMenuItem === menuItem && activePanel === panel)
-                    return;
-                // deactivate active panel
-                if (activePanel) {
-                    activePanel.style.removeProperty('height');
-                    activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
-                    activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+            switch (type) {
+                case 'mouseenter': {
+                    const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
+                    const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
+                    const activePanel = AppMenuItemView.#getActivePanel();
+                    const burgerMenuOpen = GmailElementGetter.isAppBurgerMenuOpen();
+                    // hover-styled panel is displayed for collapsed burger menu
+                    if (activeMenuItem === menuItem &&
+                        activePanel === panel &&
+                        burgerMenuOpen)
+                        return;
+                    // deactivate active panel
+                    if (activePanel) {
+                        activePanel.style.removeProperty('height');
+                        activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+                        activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                    }
+                    // activate new panel
+                    if (panel) {
+                        const height = window.innerHeight - panel.getBoundingClientRect().top;
+                        panel.style.cssText = `height: ${height}px;`;
+                        panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                        panel.classList.add(CollapsiblePanelView.elementCss.HOVER);
+                        // hover menu item
+                        menuItem.classList.add(HOVER);
+                        // handle burger menu collapsed
+                        if (!burgerMenuOpen) {
+                            for (const panel of document.querySelectorAll(CollapsiblePanelView.elementSelectors.NATIVE) ?? []) {
+                                panel.classList.add(CollapsiblePanelView.elementCss.COLLAPSED_HOVER);
+                            }
+                        }
+                    }
+                    else {
+                        // panel doesn't exist (i.e. Meet) so activate active menu item's panel instead (as Gmail currently does -- FEB 2023)
+                        const panel = activeMenuItem &&
+                            AppMenuItemView.#menuItemToPanelMap.get(activeMenuItem);
+                        panel?.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                    }
+                    break;
                 }
-                // activate new panel
-                if (panel) {
-                    const height = window.innerHeight - panel.getBoundingClientRect().top;
-                    panel.style.cssText = `height: ${height}px;`;
-                    panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
-                    panel.classList.add(CollapsiblePanelView.elementCss.HOVER);
-                    // hover menu item
-                    menuItem.classList.add(HOVER);
-                }
-                else {
-                    // panel doesn't exist (i.e. Meet) so activate active menu item's panel instead (as Gmail currently does -- FEB 2023)
-                    const panel = activeMenuItem &&
+                case 'mouseleave': {
+                    const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
+                    const activePanel = AppMenuItemView.#getActivePanel();
+                    const activeMenuItemPanel = activeMenuItem &&
                         AppMenuItemView.#menuItemToPanelMap.get(activeMenuItem);
-                    panel?.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
-                }
-            }
-            if (type === 'mouseleave') {
-                const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
-                const activePanel = AppMenuItemView.#getActivePanel();
-                const activeMenuItemPanel = activeMenuItem &&
-                    AppMenuItemView.#menuItemToPanelMap.get(activeMenuItem);
-                if (mouseEvent.relatedTarget instanceof Node &&
-                    (menuItem.contains(mouseEvent.relatedTarget) ||
-                        activePanel?.contains(mouseEvent.relatedTarget)))
-                    return;
-                if (activePanel === activeMenuItemPanel)
-                    return;
-                // unhover menu item
-                menuItem.classList.remove(HOVER);
-                // deactivate active panel
-                if (activePanel) {
-                    activePanel.style.removeProperty('height');
-                    activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
-                    activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
-                }
-                // activate active menu item panel
-                if (activeMenuItemPanel) {
-                    activeMenuItemPanel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
-                }
-            }
-            if (type === 'click') {
-                const appMenuElement = GmailElementGetter.getAppMenuContainer();
-                // deactivate active panel
-                const activePanel = AppMenuItemView.#getActivePanel();
-                if (activePanel) {
-                    activePanel.style.removeProperty('height');
-                    activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
-                    activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
-                }
-                // deactivate menu items
-                for (const menuItem_ of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}`) ?? []) {
-                    menuItem_.classList.remove(ACTIVE);
-                    menuItem_.classList.remove(HOVER);
+                    if (mouseEvent.relatedTarget instanceof Node &&
+                        (menuItem.contains(mouseEvent.relatedTarget) ||
+                            activePanel?.contains(mouseEvent.relatedTarget)))
+                        return;
+                    const burgerMenuOpen = GmailElementGetter.isAppBurgerMenuOpen();
+                    if (activePanel === activeMenuItemPanel && burgerMenuOpen)
+                        return;
+                    // unhover menu item
+                    menuItem.classList.remove(HOVER);
+                    // handle burger menu collapsed
+                    for (const panel of document.querySelectorAll(CollapsiblePanelView.elementSelectors.NATIVE) ?? []) {
+                        panel.classList.remove(CollapsiblePanelView.elementCss.COLLAPSED_HOVER);
+                    }
+                    // deactivate active panel
+                    if (activePanel) {
+                        activePanel.style.removeProperty('height');
+                        activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+                        activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                    }
+                    // activate active menu item panel
+                    if (activeMenuItemPanel) {
+                        activeMenuItemPanel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                    }
+                    break;
                 }
-                // activate menu item
-                menuItem.classList.add(ACTIVE);
-                // activate panel
-                const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
-                if (panel) {
-                    panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                case 'click': {
+                    const appMenuElement = GmailElementGetter.getAppMenuContainer();
+                    // deactivate active panel
+                    const activePanel = AppMenuItemView.#getActivePanel();
+                    if (activePanel) {
+                        activePanel.style.removeProperty('height');
+                        activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+                        activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                    }
+                    // deactivate menu items
+                    for (const menuItem_ of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}`) ?? []) {
+                        menuItem_.classList.remove(ACTIVE);
+                        menuItem_.classList.remove(HOVER);
+                    }
+                    // activate menu item
+                    menuItem.classList.add(ACTIVE);
+                    // activate panel
+                    const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
+                    if (panel) {
+                        panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                    }
                 }
             }
         });
     }
+    get menuItemDescriptor() {
+        return this.#menuItemDescriptor;
+    }
     #driver;
     #destroyed = false;
     #gmailViewPromise;
     #collapsiblePanel;
-    #appMenuItemStream;
-    #collapsiblePanelStream;
+    #menuItemDescriptor;
     constructor(driver, menuItemDescriptor) {
         super();
         this.#driver = driver;
+        this.#menuItemDescriptor = menuItemDescriptor;
         const gmailAppMenuItemView = this.#driver.addAppMenuItem(menuItemDescriptor);
         this.#gmailViewPromise = gmailAppMenuItemView;
         gmailAppMenuItemView.then((gmailView) => {
@@ -244,28 +272,34 @@ export class AppMenuItemView extends EventEmitter {
             if (gmailElement) {
                 AppMenuItemView.#menuItemToPanelMap.set(gmailElement, undefined);
             }
-            this.#appMenuItemStream = Kefir.stream((emitter) => {
-                gmailView.on('destroy', () => {
-                    emitter.end();
-                    this.remove();
-                });
-                gmailView.on('click', () => {
-                    emitter.emit(['click', gmailElement]);
-                    this.emit('click');
-                });
-                gmailView.on('hover', (e) => {
-                    emitter.emit(['mouseenter', gmailElement, e]);
-                    this.emit('hover');
-                });
-                gmailView.on('blur', (e) => {
-                    emitter.emit(['mouseleave', gmailElement, e]);
-                    this.emit('blur');
-                });
+            gmailView.on('destroy', () => {
+                AppMenuItemView.#menuItemChangeBus.end();
+                this.remove();
+            });
+            gmailView.on('click', () => {
+                AppMenuItemView.#menuItemChangeBus.emit(['click', gmailElement]);
+                this.emit('click');
+            });
+            gmailView.on('hover', (e) => {
+                AppMenuItemView.#menuItemChangeBus.emit([
+                    'mouseenter',
+                    gmailElement,
+                    e,
+                ]);
+                this.emit('hover');
+            });
+            gmailView.on('blur', (e) => {
+                AppMenuItemView.#menuItemChangeBus.emit([
+                    'mouseleave',
+                    gmailElement,
+                    e,
+                ]);
+                this.emit('blur');
             });
-            AppMenuItemView.#menuItemChangeStream.plug(this.#appMenuItemStream);
-            AppMenuItemView.#setUpRouteViewDriverStream(driver);
-            AppMenuItemView.#appMenuItemViews.add(this);
         });
+        AppMenuItemView.#setUpRouteViewDriverStream(driver);
+        AppMenuItemView.#menuItemAddedDeferred.resolve(undefined);
+        AppMenuItemView.#appMenuItemViews.add(this);
     }
     async addCollapsiblePanel(panelDescriptor) {
         const collapsiblePanel = await addCollapsiblePanel(this.#driver, panelDescriptor);
@@ -273,12 +307,13 @@ export class AppMenuItemView extends EventEmitter {
             this.#gmailViewPromise.then((gmailView) => {
                 const gmailElement = gmailView.element;
                 if (gmailElement) {
-                    this.#collapsiblePanelStream = Kefir.stream((emitter) => {
-                        collapsiblePanel.on('blur', (e) => {
-                            emitter.value(['mouseleave', gmailElement, e]);
-                        });
+                    collapsiblePanel.on('blur', (e) => {
+                        AppMenuItemView.#menuItemChangeBus.value([
+                            'mouseleave',
+                            gmailElement,
+                            e,
+                        ]);
                     });
-                    AppMenuItemView.#menuItemChangeStream.plug(this.#collapsiblePanelStream);
                 }
                 if (gmailElement && collapsiblePanel) {
                     AppMenuItemView.#menuItemToPanelMap.set(gmailElement, collapsiblePanel.element);
@@ -291,6 +326,7 @@ export class AppMenuItemView extends EventEmitter {
     async update(menuItemDescriptor) {
         const gmailView = await this.#gmailViewPromise;
         gmailView.setMenuItemDescriptor(menuItemDescriptor);
+        this.#menuItemDescriptor = menuItemDescriptor;
     }
     remove() {
         if (this.#destroyed)
@@ -303,22 +339,6 @@ export class AppMenuItemView extends EventEmitter {
                 AppMenuItemView.#menuItemToPanelMap.delete(gmailView.element);
             gmailView.remove();
         });
-        this.#appMenuItemStream &&
-            AppMenuItemView.#menuItemChangeStream.unplug(this.#appMenuItemStream);
-        this.#collapsiblePanelStream &&
-            AppMenuItemView.#menuItemChangeStream.unplug(this.#collapsiblePanelStream);
         AppMenuItemView.#appMenuItemViews.delete(this);
-        initialRoutingStateStopper.destroy();
-    }
-    async #activate() {
-        const gmailView = await this.#gmailViewPromise;
-        const appMenuElement = GmailElementGetter.getAppMenuContainer();
-        const { ACTIVE } = GmailAppMenuItemView.elementCss;
-        // Note this affects both the active app menu item and the collapsible panel.
-        for (const el of appMenuElement?.querySelectorAll(`.${ACTIVE}`) ?? []) {
-            el.classList.remove(ACTIVE);
-        }
-        gmailView.activate();
-        this.#collapsiblePanel?.activate();
     }
 }