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

package/package.json

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

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,6CAgB5C"}
+{"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"}

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

@@ -5,8 +5,7 @@ import Logger from '../../../lib/logger';
 import { CollapsiblePanelView } from '../../../views/collapsible-panel-view';
 export async function addCollapsiblePanel(driver, panelDescriptor) {
     const injectionContainer = await waitForAppMenuParentReady();
-    const collapsiblePanelView = new CollapsiblePanelView(driver);
-    collapsiblePanelView.panelDescriptor = panelDescriptor;
+    const collapsiblePanelView = new CollapsiblePanelView(driver, panelDescriptor);
     if (!injectionContainer || !collapsiblePanelView.element)
         return;
     const appMenu = await GmailElementGetter.getAppMenuAsync();

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

@@ -21,6 +21,8 @@ declare const GmailElementGetter: {
     getAppMenuAsync: () => Promise<HTMLElement | undefined>;
     isAppBurgerMenuOpen(): boolean;
     getAppMenuContainer(): HTMLElement | null;
+    getAppMenu(): HTMLElement | null;
+    getAppHeader(): HTMLElement | null;
     getSeparateSectionNavItemMenuInjectionContainer(): HTMLElement | null;
     getSameSectionNavItemMenuInjectionContainer(): HTMLElement | null;
     getRowListElements(): HTMLElement[];

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;;;;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"}
+{"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"}

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

@@ -7,6 +7,14 @@ import getMainContentElementChangedStream from './gmail-element-getter/get-main-
 import isIntegratedViewGmail from './gmail-driver/isIntegratedViewGmail';
 import Logger from '../../lib/logger';
 import waitFor from '../../lib/wait-for';
+/**
+ * The selector for the new app menu https://support.google.com/mail/answer/11555490 -- FEB 2023
+ */
+const APP_MENU = '.aeN.WR.a6o.anZ.nH.oy8Mbf[role=navigation]';
+/**
+ * If the APP_MENU selector is not found, NAV_MENU _might_ be present.
+ */
+const NAV_MENU = '.aeN.WR.nH.oy8Mbf[role=navigation]';
 // TODO Figure out if these functions can and should be able to return null
 const GmailElementGetter = {
     getActiveMoreMenu() {
@@ -144,14 +152,6 @@ const GmailElementGetter = {
     getAppMenuAsync: once(async () => {
         if (!GmailElementGetter.isStandalone()) {
             await GmailElementGetter.waitForGmailModeToSettle();
-            /**
-             * The selector for the new app menu https://support.google.com/mail/answer/11555490 -- FEB 2023
-             */
-            const APP_MENU = '.aeN.WR.a6o.anZ.nH.oy8Mbf[role=navigation]';
-            /**
-             * If the APP_MENU selector is not found, NAV_MENU _might_ be present.
-             */
-            const NAV_MENU = '.aeN.WR.nH.oy8Mbf[role=navigation]';
             try {
                 const element = await waitFor(() => document.querySelector(`${APP_MENU}, ${NAV_MENU}`));
                 if (!document.querySelector(APP_MENU)) {
@@ -172,10 +172,12 @@ const GmailElementGetter = {
     getAppMenuContainer() {
         return document.querySelector('.aqk.aql.bkL');
     },
-    // TODO figure out if we use it
-    // getNavMenu() {
-    //   return document.querySelector('.aeN.WR.nH.oy8Mbf[role=navigation]');
-    // },
+    getAppMenu() {
+        return document.querySelector(APP_MENU);
+    },
+    getAppHeader() {
+        return document.querySelector('.oy8Mbf.qp');
+    },
     getSeparateSectionNavItemMenuInjectionContainer() {
         return document.querySelector('.aeN');
     },

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;CAqFN"}
+{"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"}

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

@@ -72,7 +72,8 @@ export class GmailAppMenuItemView extends EventEmitter {
         const element = this.element;
         if (!element)
             return;
-        element.className = cx(ELEMENT_CLASS, this.#menuItemDescriptor?.className);
+        const existingClassNames = Object.values(GmailAppMenuItemView.elementCss).filter((className) => element.classList.contains(className));
+        element.className = cx(ELEMENT_CLASS, this.#menuItemDescriptor?.className, ...existingClassNames);
         this.#updateName(element);
         this.#updateIcon(element);
         this.#updateARIA(element);

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

@@ -30,6 +30,10 @@ export type AppMenuItemDescriptor = {
 };
 export type AppMenuItemPanelDescriptor = {
     className?: string;
+    /** In the form of HTML as a string.
+     *
+     * If this option is provided, the panel defaults to loading=true.  */
+    loadingIcon?: string;
     primaryButton?: {
         name: string;
         onClick: (e: MouseEvent) => void;

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,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;;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"}

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;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"}
+{"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"}

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

@@ -1,5 +1,6 @@
 import Kefir from 'kefir';
 import kefirBus from 'kefir-bus';
+import cx from 'classnames';
 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';
@@ -55,10 +56,15 @@ export class AppMenuItemView extends EventEmitter {
         const button = appMenuElement?.querySelector(`.${NATIVE_CLASS}.${ACTIVE}`);
         return button;
     }
+    static #isPanelLess() {
+        const activePanel = AppMenuItemView.#getActivePanel();
+        return !activePanel;
+    }
     static #setUpRouteViewDriverStream(driver) {
         if (AppMenuItemView.#routeViewDriverStream)
             return;
         AppMenuItemView.#routeViewDriverStream = driver.getRouteViewDriverStream();
+        // Activate menu items on route changes. Used for deep-links, browser history navigation etc.
         AppMenuItemView.#routeViewDriverStream.onValue(async (routeView) => {
             const routeViewID = routeView.getRouteID();
             const routeType = routeView.getRouteType();
@@ -72,7 +78,10 @@ export class AppMenuItemView extends EventEmitter {
                 return descriptor?.isRouteActive(routeView);
             }) ?? [];
             if (gmailView?.element) {
-                AppMenuItemView.#menuItemChangeBus.emit(['click', gmailView.element]);
+                AppMenuItemView.#menuItemChangeBus.emit([
+                    'route-activated',
+                    gmailView.element,
+                ]);
                 return;
             }
             /* Handling native app menu items */
@@ -86,12 +95,15 @@ export class AppMenuItemView extends EventEmitter {
             const menuItemElement = menuItemClass &&
                 document.querySelector(`.${menuItemClass}`);
             if (menuItemElement) {
-                AppMenuItemView.#menuItemChangeBus.emit(['click', menuItemElement]);
+                AppMenuItemView.#menuItemChangeBus.emit([
+                    'route-activated',
+                    menuItemElement,
+                ]);
             }
         });
     }
     static {
-        (async () => {
+        (async function init() {
             const gmailAppMenu = await GmailElementGetter.getAppMenuAsync();
             if (!gmailAppMenu) {
                 return;
@@ -155,6 +167,28 @@ export class AppMenuItemView extends EventEmitter {
         AppMenuItemView.#menuItemChangeStream.onValue(async (v) => {
             const [type, menuItem, mouseEvent] = v;
             const { ACTIVE, HOVER } = GmailAppMenuItemView.elementCss;
+            function handleActivate() {
+                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);
+                }
+            }
             switch (type) {
                 case 'mouseenter': {
                     const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
@@ -226,26 +260,19 @@ export class AppMenuItemView extends EventEmitter {
                     break;
                 }
                 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);
+                    handleActivate();
+                    // handle panel-less mode
+                    const isPanelLess = AppMenuItemView.#isPanelLess();
+                    for (const panel of document.querySelectorAll(CollapsiblePanelView.elementSelectors.NATIVE) ?? []) {
+                        panel.classList.toggle(CollapsiblePanelView.elementCss.PANEL_LESS, isPanelLess);
                     }
+                    GmailElementGetter.getAppMenu()?.classList.toggle('aTO', isPanelLess);
+                    GmailElementGetter.getAppHeader()?.classList.toggle('aTO', isPanelLess);
+                    break;
+                }
+                case 'route-activated': {
+                    handleActivate();
+                    break;
                 }
             }
         });
@@ -273,7 +300,6 @@ export class AppMenuItemView extends EventEmitter {
                 AppMenuItemView.#menuItemToPanelMap.set(gmailElement, undefined);
             }
             gmailView.on('destroy', () => {
-                AppMenuItemView.#menuItemChangeBus.end();
                 this.remove();
             });
             gmailView.on('click', () => {
@@ -302,7 +328,14 @@ export class AppMenuItemView extends EventEmitter {
         AppMenuItemView.#appMenuItemViews.add(this);
     }
     async addCollapsiblePanel(panelDescriptor) {
-        const collapsiblePanel = await addCollapsiblePanel(this.#driver, panelDescriptor);
+        const descriptor = {
+            ...panelDescriptor,
+            className: cx(panelDescriptor.className, {
+                [CollapsiblePanelView.elementCss.COLLAPSED]: !GmailElementGetter.isAppBurgerMenuOpen(),
+                [CollapsiblePanelView.elementCss.PANEL_LESS]: AppMenuItemView.#isPanelLess(),
+            }),
+        };
+        const collapsiblePanel = await addCollapsiblePanel(this.#driver, descriptor);
         if (collapsiblePanel) {
             this.#gmailViewPromise.then((gmailView) => {
                 const gmailElement = gmailView.element;

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

@@ -23,16 +23,17 @@ export declare class CollapsiblePanelView extends CollapsiblePanelView_base {
         /** A hover popover has both ACTIVE _and_ HOVER */
         readonly HOVER: "aJu";
         readonly COLLAPSED_HOVER: "bym";
+        readonly PANEL_LESS: "a3W";
     };
-    get element(): HTMLElement | undefined;
+    get loading(): boolean;
+    setLoading(loading: boolean): void;
+    get panelDescriptor(): AppMenuItemPanelDescriptor;
     set panelDescriptor(panelDescriptor: AppMenuItemPanelDescriptor);
-    constructor(driver: GmailDriver);
-    /**
-     * @internal
-     */
-    activate(): void;
+    get element(): HTMLElement;
+    get scrollablePaneElement(): Element | null;
+    constructor(driver: GmailDriver, panelDescriptor: AppMenuItemPanelDescriptor);
     remove(): void;
-    addNavItem(navItemDescriptor: NavItemDescriptor | Kefir.Observable<NavItemDescriptor, any>): NavItemView | undefined;
+    addNavItem(navItemDescriptor: NavItemDescriptor | Kefir.Observable<NavItemDescriptor, any>): NavItemView;
 }
 export {};
 //# sourceMappingURL=collapsible-panel-view.d.ts.map

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;AAQpE,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;;;MAGzC;IAQX,IAAI,OAAO,4BAEV;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,0BAA0B,EAG9D;gBAEW,MAAM,EAAE,WAAW;IAS/B;;OAEG;IACH,QAAQ;IAQR,MAAM;IAON,UAAU,CACR,iBAAiB,EACb,iBAAiB,GACjB,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;CAkK/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;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"}

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

@@ -11,6 +11,10 @@ export const INBOXSDK_CLASS = 'inboxsdk__collapsiblePanel';
 const ELEMENT_CLASS = `${NATIVE_CLASS} ${INBOXSDK_CLASS} oy8Mbf`;
 const PRIMARY_BUTTON_ELEMENT_CLASS = 'T-I T-I-KE L3';
 const PRIMARY_BUTTON_ELEMENT_SELECTOR = '.T-I.T-I-KE.L3';
+const scrollablePanelClass = 'at9';
+const scrollablePanelSelector = `.${scrollablePanelClass}`;
+const loadingElementClass = 'inboxsdk__collapsiblePanel_loading_container';
+const loadingElementSelector = `.${loadingElementClass}`;
 const NAV_MENU_CONTAINER_ELEMENT_SELECTOR = '.at9 .n3 .TK';
 export class CollapsiblePanelView extends EventEmitter {
     static elementSelectors = {
@@ -23,6 +27,7 @@ export class CollapsiblePanelView extends EventEmitter {
         /** A hover popover has both ACTIVE _and_ HOVER */
         HOVER: 'aJu',
         COLLAPSED_HOVER: 'bym',
+        PANEL_LESS: 'a3W',
     };
     #panelDescriptor;
     #element;
@@ -30,42 +35,50 @@ export class CollapsiblePanelView extends EventEmitter {
     #id = Math.random().toFixed(3);
     #ARIA_LABELLED_BY_ID = Math.random().toFixed(3);
     #driver;
-    get element() {
-        return this.#element;
+    #loading;
+    get loading() {
+        return this.#loading;
+    }
+    setLoading(loading) {
+        const changed = this.#loading !== loading;
+        this.#loading = loading;
+        if (changed) {
+            this.#update();
+        }
+    }
+    get panelDescriptor() {
+        return this.#panelDescriptor;
     }
     set panelDescriptor(panelDescriptor) {
         this.#panelDescriptor = panelDescriptor;
         this.#update();
     }
-    constructor(driver) {
+    get element() {
+        return this.#element;
+    }
+    get scrollablePaneElement() {
+        return this.element.querySelector(scrollablePanelSelector);
+    }
+    constructor(driver, panelDescriptor) {
         super();
         this.#driver = driver;
+        this.#panelDescriptor = panelDescriptor;
+        this.#loading = panelDescriptor.loadingIcon != null;
         this.#element = this.#setupElement();
         this.#element.addEventListener('mouseleave', (e) => {
             this.emit('blur', e);
         });
     }
-    /**
-     * @internal
-     */
-    activate() {
-        const element = this.element;
-        if (!element)
-            return;
-        element?.classList.remove(CollapsiblePanelView.elementCss.HOVER);
-        element.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
-    }
     remove() {
         if (this.#destroyed)
             return;
         this.#destroyed = true;
-        this.element?.remove();
+        this.element.remove();
         this.emit('destroy');
     }
     addNavItem(navItemDescriptor) {
-        const element = this.element;
-        if (!element)
-            return;
+        this.setLoading(false);
+        const { element } = this;
         const navMenuContainerElement = querySelector(element, NAV_MENU_CONTAINER_ELEMENT_SELECTOR);
         const appId = `collapsible-panel-${this.#id}`;
         const navItemDescriptorPropertyStream = kefirCast(Kefir, navItemDescriptor).toProperty();
@@ -74,12 +87,11 @@ export class CollapsiblePanelView extends EventEmitter {
         return navItemView;
     }
     #setupElement() {
-        const { iconUrl: themedIcons, className, name = '', } = this.#panelDescriptor?.primaryButton ?? {};
+        const { panelDescriptor } = this;
+        const { loadingIcon } = panelDescriptor;
+        const { iconUrl: themedIcons, className, name = '', } = panelDescriptor?.primaryButton ?? {};
         const element = document.createElement('div');
-        const burgerMenuOpen = GmailElementGetter.isAppBurgerMenuOpen();
-        element.className = cx(ELEMENT_CLASS, {
-            [CollapsiblePanelView.elementCss.COLLAPSED]: !burgerMenuOpen,
-        });
+        element.className = cx(ELEMENT_CLASS, this.panelDescriptor.className);
         const primaryButtonClass = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
         let iconUrl;
         if (themedIcons) {
@@ -99,7 +111,8 @@ export class CollapsiblePanelView extends EventEmitter {
             </div>
           </div>
         </div>
-        <div class="at9">
+        <div class="${scrollablePanelClass}">
+          <div class="${loadingElementClass}">${loadingIcon ? { __html: loadingIcon } : ''}</div>
           <div class="Ls77Lb aZ6">
             <div class="pp" style="user-select: none;">
               <div>
@@ -131,25 +144,21 @@ export class CollapsiblePanelView extends EventEmitter {
         return element;
     }
     #onPrimaryButtonClick = (e) => {
-        this.#panelDescriptor?.primaryButton?.onClick?.(e);
+        this.panelDescriptor.primaryButton?.onClick?.(e);
     };
     #update() {
         const element = this.element;
         if (!element)
             return;
-        const { ACTIVE, COLLAPSED } = CollapsiblePanelView.elementCss;
-        const isActive = element.classList.contains(ACTIVE);
-        const isCollapsed = element.classList.contains(COLLAPSED);
-        element.className = cx(ELEMENT_CLASS, this.#panelDescriptor?.className, {
-            [ACTIVE]: isActive,
-            [COLLAPSED]: isCollapsed,
-        });
+        const existingClassNames = Object.values(CollapsiblePanelView.elementCss).filter((className) => element.classList.contains(className));
+        element.className = cx(ELEMENT_CLASS, this.panelDescriptor.className, ...existingClassNames);
         this.#updateName(element);
         this.#updateIcon(element);
+        this.#updateScrollablePanelLoading(element);
     }
     #updateIcon(element) {
         const iconContainerEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
-        const { iconUrl, className } = this.#panelDescriptor?.primaryButton ?? {};
+        const { iconUrl, className } = this.panelDescriptor.primaryButton ?? {};
         if (iconUrl) {
             const backgroundImage = `url(${GmailElementGetter.isDarkTheme()
                 ? iconUrl.darkTheme
@@ -166,6 +175,19 @@ export class CollapsiblePanelView extends EventEmitter {
         if (!buttonTextEl) {
             return;
         }
-        buttonTextEl.textContent = this.#panelDescriptor?.primaryButton?.name ?? '';
+        buttonTextEl.textContent = this.panelDescriptor.primaryButton?.name ?? '';
+    }
+    #updateScrollablePanelLoading(element) {
+        const scrollablePanelLoadingEl = element.querySelector(loadingElementSelector);
+        if (!scrollablePanelLoadingEl) {
+            return;
+        }
+        const panelLoadingClass = `${loadingElementClass}--active`;
+        if (this.loading) {
+            scrollablePanelLoadingEl.classList.add(panelLoadingClass);
+        }
+        else {
+            scrollablePanelLoadingEl.classList.remove(panelLoadingClass);
+        }
     }
 }