@inboxsdk/core 0.2.29-aplha.3 → 1.0.0

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

@@ -2,7 +2,7 @@ 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 { GmailAppMenuItemView, NATIVE_CLASS, INBOXSDK_CLASS, ICON_ELEMENT_SELECTOR, } 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';
@@ -60,6 +60,42 @@ 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 #isPanelDropdownShown() {
+        const sdkDropdown = document.querySelector('.inboxsdk__menu');
+        if (sdkDropdown) {
+            return true;
+        }
+        const mailDropdown = document.querySelector('.JM');
+        if (mailDropdown && mailDropdown.style.display !== 'none') {
+            return true;
+        }
+        const chatAndSpacesDropdown = document.querySelector('.tP');
+        if (chatAndSpacesDropdown &&
+            chatAndSpacesDropdown.style.display !== 'none') {
+            return true;
+        }
+        return false;
+    }
     static #setUpRouteViewDriverStream(driver) {
         if (AppMenuItemView.#routeViewDriverStream)
             return;
@@ -154,6 +190,7 @@ export class AppMenuItemView extends EventEmitter {
                 // 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) => {
+                    e.stopImmediatePropagation();
                     AppMenuItemView.#menuItemChangeBus.emit([
                         'mouseleave',
                         nativeMenuItem,
@@ -176,10 +213,15 @@ export class AppMenuItemView extends EventEmitter {
                     activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
                     activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
                 }
-                // deactivate menu items
+                // deactivate menu items and handle keyboard accessibility
                 for (const menuItem_ of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}`) ?? []) {
                     menuItem_.classList.remove(ACTIVE);
                     menuItem_.classList.remove(HOVER);
+                    // update tabindex
+                    const iconElement = menuItem_.querySelector(ICON_ELEMENT_SELECTOR);
+                    if (iconElement) {
+                        iconElement.tabIndex = menuItem_ === menuItem ? 0 : -1;
+                    }
                 }
                 // activate menu item
                 menuItem.classList.add(ACTIVE);
@@ -230,6 +272,10 @@ export class AppMenuItemView extends EventEmitter {
                     break;
                 }
                 case 'mouseleave': {
+                    // Do not handle blur event when we're in one of the panel's dropdowns
+                    const isPanelDropdownShown = AppMenuItemView.#isPanelDropdownShown();
+                    if (isPanelDropdownShown)
+                        return;
                     const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
                     const activePanel = AppMenuItemView.#getActivePanel();
                     const activeMenuItemPanel = activeMenuItem &&
@@ -298,6 +344,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 +382,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 +394,8 @@ export class AppMenuItemView extends EventEmitter {
                             e,
                         ]);
                     });
-                }
-                if (gmailElement && collapsiblePanel) {
                     AppMenuItemView.#menuItemToPanelMap.set(gmailElement, collapsiblePanel.element);
+                    AppMenuItemView.#adjustTooltipNub();
                 }
             });
         }
@@ -358,7 +404,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 +417,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;IAW7C,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 {
@@ -35,7 +38,7 @@ export class CollapsiblePanelView extends EventEmitter {
     #id = Math.random().toFixed(3);
     #ARIA_LABELLED_BY_ID = Math.random().toFixed(3);
     #driver;
-    #loading = false;
+    #loading;
     get loading() {
         return this.#loading;
     }
@@ -63,10 +66,18 @@ export class CollapsiblePanelView extends EventEmitter {
         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);
         });
+        stylesStream
+            .skipDuplicates((a, b) => isEqual(a, b))
+            .onValue(({ type }) => {
+            if (type === 'theme') {
+                this.#update();
+            }
+        });
     }
     remove() {
         if (this.#destroyed)
@@ -85,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">
@@ -111,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>
@@ -135,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;
     }
@@ -155,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) {
@@ -181,7 +229,6 @@ export class CollapsiblePanelView extends EventEmitter {
         if (!scrollablePanelLoadingEl) {
             return;
         }
-        const panelLoadingClass = `${loadingElementClass}--active`;
         if (this.loading) {
             scrollablePanelLoadingEl.classList.add(panelLoadingClass);
         }