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

package/src/platform-implementation-js/dom-driver/gmail/gmail-sync-response-processor.js

@@ -0,0 +1,289 @@
+import BigNumber from 'bignumber.js';
+import isNotNil from '../../lib/isNotNil';
+export function extractThreadsFromSearchResponse(response) {
+    const parsedResponse = JSON.parse(response);
+    if (Array.isArray(parsedResponse)) {
+        try {
+            return extractThreadsFromSearchResponse_20220909(parsedResponse);
+        }
+        catch (err) {
+            return [];
+        }
+    }
+    const threadDescriptors = parsedResponse && parsedResponse[3];
+    if (!threadDescriptors)
+        return [];
+    return threadDescriptors
+        .map((descriptorWrapper, index) => {
+        const descriptor = descriptorWrapper[1];
+        if (!descriptor)
+            return null;
+        return {
+            subject: descriptor[1],
+            snippet: descriptor[2],
+            syncThreadID: descriptor[4],
+            // It seems Gmail is A/B testing including gmailThreadID in descriptor[20] and not including
+            // the encoded version of it in descriptor[18], so pull it from [20] if [18] is not set.
+            oldGmailThreadID: descriptor[18] != null
+                ? new BigNumber(descriptor[18]).toString(16)
+                : descriptor[20],
+            rawResponse: descriptorWrapper,
+            extraMetaData: {
+                snippet: (parsedResponse[15] &&
+                    parsedResponse[15][1] &&
+                    parsedResponse[15][1][index]) ||
+                    '',
+                syncMessageData: descriptor[5].map((md) => ({
+                    syncMessageID: md[1],
+                    oldMessageID: md[56],
+                    date: +md[7],
+                })),
+            },
+        };
+    })
+        .filter(isNotNil);
+}
+export function extractThreadsFromSearchResponse_20220909(parsedResponse) {
+    const threadDescriptors = parsedResponse && parsedResponse[2];
+    if (!threadDescriptors)
+        return [];
+    return threadDescriptors
+        .map((descriptorWrapper, index) => {
+        const descriptor = descriptorWrapper[0];
+        if (!descriptor)
+            return null;
+        return {
+            subject: descriptor[0],
+            snippet: descriptor[1],
+            syncThreadID: descriptor[3],
+            // It seems Gmail is A/B testing including gmailThreadID in descriptor[20] and not including
+            // the encoded version of it in descriptor[18], so pull it from [20] if [18] is not set.
+            oldGmailThreadID: descriptor[17] != null
+                ? new BigNumber(descriptor[17]).toString(16)
+                : descriptor[19],
+            rawResponse: descriptorWrapper,
+            extraMetaData: {
+                snippet: (parsedResponse[14] &&
+                    parsedResponse[14][0] &&
+                    parsedResponse[14][0][index]) ||
+                    '',
+                syncMessageData: descriptor[4].map((md) => ({
+                    syncMessageID: md[0],
+                    oldMessageID: md[55],
+                    date: +md[6],
+                })),
+            },
+        };
+    })
+        .filter(isNotNil);
+}
+export function extractThreadsFromThreadResponse(response) {
+    const parsedResponse = JSON.parse(response);
+    if (Array.isArray(parsedResponse)) {
+        return extractThreadsFromThreadResponse_20220909(parsedResponse);
+    }
+    const threadDescriptors = parsedResponse && parsedResponse[2];
+    if (!threadDescriptors)
+        throw new Error('Failed to process thread response');
+    return threadDescriptors
+        .map((descriptorWrapper) => {
+        if (typeof descriptorWrapper[1] === 'string' &&
+            Array.isArray(descriptorWrapper[3]) &&
+            !(descriptorWrapper[2] &&
+                descriptorWrapper[2][1] &&
+                descriptorWrapper[2][1][14] &&
+                Array.isArray(descriptorWrapper[2][2]))) {
+            return {
+                syncThreadID: descriptorWrapper[1],
+                oldGmailThreadID: (descriptorWrapper[2] &&
+                    descriptorWrapper[2][1] &&
+                    descriptorWrapper[2][1][16]) ||
+                    undefined,
+                extraMetaData: {
+                    snippet: (descriptorWrapper[2] &&
+                        descriptorWrapper[2][1] &&
+                        descriptorWrapper[2][1][3]) ||
+                        undefined,
+                    syncMessageData: (descriptorWrapper[3] || [])
+                        .filter((md) => Boolean(md[2]))
+                        .map((md) => ({
+                        syncMessageID: md[1],
+                        date: +md[2][17],
+                        recipients: getRecipientsFromMessageDescriptor(md),
+                    })),
+                },
+            };
+        }
+        else {
+            const threadDescriptor = descriptorWrapper[2] && descriptorWrapper[2][1];
+            if (!threadDescriptor)
+                return null;
+            let syncMessageData;
+            const fullMessageDescriptors = Array.isArray(descriptorWrapper[3]) && descriptorWrapper[3];
+            if (fullMessageDescriptors) {
+                syncMessageData = fullMessageDescriptors.map((md) => ({
+                    syncMessageID: md[1],
+                    date: +md[2][17],
+                    recipients: getRecipientsFromMessageDescriptor(md),
+                }));
+            }
+            else {
+                const messageDescriptors = descriptorWrapper[2] && descriptorWrapper[2][2];
+                syncMessageData = messageDescriptors.map((md) => ({
+                    syncMessageId: md[1],
+                    date: +md[16],
+                }));
+            }
+            return {
+                subject: threadDescriptor[2],
+                snippet: threadDescriptor[3],
+                syncThreadID: threadDescriptor[1],
+                oldGmailThreadID: new BigNumber(threadDescriptor[14]).toString(16),
+                rawResponse: descriptorWrapper,
+                extraMetaData: {
+                    syncMessageData,
+                    snippet: '',
+                },
+            };
+        }
+    })
+        .filter(isNotNil);
+}
+function extractThreadsFromThreadResponse_20220909(parsedResponse) {
+    const threadDescriptors = parsedResponse && parsedResponse[1];
+    if (!threadDescriptors)
+        throw new Error('Failed to process thread response');
+    return threadDescriptors
+        .map((descriptorWrapper) => {
+        if (typeof descriptorWrapper[0] === 'string' &&
+            Array.isArray(descriptorWrapper[2]) &&
+            !(descriptorWrapper[1] &&
+                descriptorWrapper[1][0] &&
+                descriptorWrapper[1][0][13] &&
+                Array.isArray(descriptorWrapper[1][1]))) {
+            return {
+                syncThreadID: descriptorWrapper[0],
+                oldGmailThreadID: (descriptorWrapper[1] &&
+                    descriptorWrapper[1][0] &&
+                    descriptorWrapper[1][0][15]) ||
+                    undefined,
+                extraMetaData: {
+                    snippet: (descriptorWrapper[1] &&
+                        descriptorWrapper[1][0] &&
+                        descriptorWrapper[1][0][2]) ||
+                        undefined,
+                    syncMessageData: (descriptorWrapper[2] || [])
+                        .filter((md) => Boolean(md[1]))
+                        .map((md) => ({
+                        syncMessageID: md[0],
+                        date: +md[1][16],
+                        recipients: getRecipientsFromMessageDescriptor_20220909(md),
+                    })),
+                },
+            };
+        }
+        else {
+            const threadDescriptor = descriptorWrapper[1] && descriptorWrapper[1][0];
+            if (!threadDescriptor)
+                return null;
+            let syncMessageData;
+            const fullMessageDescriptors = Array.isArray(descriptorWrapper[2]) && descriptorWrapper[2];
+            if (fullMessageDescriptors) {
+                syncMessageData = fullMessageDescriptors.map((md) => ({
+                    syncMessageID: md[0],
+                    date: +md[1][16],
+                    recipients: getRecipientsFromMessageDescriptor_20220909(md),
+                }));
+            }
+            else {
+                const messageDescriptors = descriptorWrapper[1] && descriptorWrapper[1][1];
+                syncMessageData = messageDescriptors.map((md) => ({
+                    syncMessageId: md[0],
+                    date: +md[15],
+                }));
+            }
+            return {
+                subject: threadDescriptor[1],
+                snippet: threadDescriptor[2],
+                syncThreadID: threadDescriptor[0],
+                oldGmailThreadID: new BigNumber(threadDescriptor[13]).toString(16),
+                rawResponse: descriptorWrapper,
+                extraMetaData: {
+                    syncMessageData,
+                    snippet: '',
+                },
+            };
+        }
+    })
+        .filter(isNotNil);
+}
+function getRecipientsFromMessageDescriptor(messageDescriptor) {
+    if (!messageDescriptor[2])
+        return;
+    const to = messageDescriptor[2][1] || [];
+    const cc = messageDescriptor[2][2] || [];
+    const bcc = messageDescriptor[2][3] || [];
+    return to
+        .concat(cc)
+        .concat(bcc)
+        .map((recipientDescriptor) => ({
+        emailAddress: recipientDescriptor[2],
+        name: recipientDescriptor[3],
+    }));
+}
+function getRecipientsFromMessageDescriptor_20220909(messageDescriptor) {
+    if (!messageDescriptor[1])
+        return;
+    const to = messageDescriptor[1][0] || [];
+    const cc = messageDescriptor[1][1] || [];
+    const bcc = messageDescriptor[1][2] || [];
+    return to
+        .concat(cc)
+        .concat(bcc)
+        .map((recipientDescriptor) => ({
+        emailAddress: recipientDescriptor[1],
+        name: recipientDescriptor[2],
+    }));
+}
+export function replaceThreadsInSearchResponse(response, replacementThreads, _unused // TODO why is this unused?
+) {
+    const parsedResponse = JSON.parse(response);
+    if (Array.isArray(parsedResponse)) {
+        try {
+            return replaceThreadsInSearchResponse_20220909(parsedResponse, replacementThreads, _unused);
+        }
+        catch (err) {
+            return response;
+        }
+    }
+    if (parsedResponse[3] || replacementThreads.length) {
+        parsedResponse[3] = replacementThreads.map(({ rawResponse }, index) => ({
+            ...rawResponse,
+            '2': index,
+        }));
+    }
+    if (parsedResponse[15] || replacementThreads.length) {
+        parsedResponse[15] = {
+            ...parsedResponse[15],
+            '1': replacementThreads.map(({ extraMetaData }) => extraMetaData.snippet),
+            '2': replacementThreads.map(({ extraMetaData }) => extraMetaData.syncMessageData.map(({ syncMessageID }) => syncMessageID)),
+        };
+    }
+    return JSON.stringify(parsedResponse);
+}
+export function replaceThreadsInSearchResponse_20220909(parsedResponse, replacementThreads, _unused // TODO why is this unused?
+) {
+    if (parsedResponse[2] || replacementThreads.length) {
+        parsedResponse[2] = replacementThreads.map(({ rawResponse }, index) => {
+            const res = [...rawResponse];
+            res[1] = index;
+            return res;
+        });
+    }
+    if (parsedResponse[14] || replacementThreads.length) {
+        parsedResponse[14] = [...parsedResponse[14]];
+        parsedResponse[14][0] = replacementThreads.map(({ extraMetaData }) => extraMetaData.snippet);
+        parsedResponse[14][1] = replacementThreads.map(({ extraMetaData }) => extraMetaData.syncMessageData.map(({ syncMessageID }) => syncMessageID));
+    }
+    return JSON.stringify(parsedResponse);
+}

package/src/platform-implementation-js/dom-driver/gmail/is-compose-titlebar-light-color.js

@@ -0,0 +1,21 @@
+import once from 'lodash/once';
+function isGmailRuleForTitlebarWideIcons() {
+    return !![...document.styleSheets].find((s) => {
+        try {
+            if (s.cssRules) {
+                return [...s.cssRules].find((rule) => rule instanceof CSSStyleRule &&
+                    rule.selectorText === '.Hl' &&
+                    rule.style.width === '24px');
+            }
+        }
+        catch (e) {
+            // Some stylesheets are crossorigin and throw if we try to access
+            // their rules. Don't worry about them.
+        }
+        return false;
+    });
+}
+const isComposeTitleBarLightColor = once(() => {
+    return !isGmailRuleForTitlebarWideIcons();
+});
+export default isComposeTitleBarLightColor;

package/src/platform-implementation-js/dom-driver/gmail/makePageParserTree.js

@@ -0,0 +1,28 @@
+import PageParserTree from 'page-parser-tree';
+import udKefir from 'ud-kefir';
+import pageParserOptions from './pageParserOptions';
+import censorHTMLtree from '../../../common/censorHTMLtree';
+const pageParserOptionsStream = udKefir(module, pageParserOptions);
+export default function makePageParserTree(driver, root) {
+    const _driver = driver;
+    function transformOptions(pageParserOptions) {
+        return !_driver
+            ? pageParserOptions
+            : {
+                ...pageParserOptions,
+                logError(err, el) {
+                    const details = {
+                        el,
+                        html: el ? censorHTMLtree(el) : null,
+                    };
+                    _driver.getLogger().errorSite(err, details);
+                },
+            };
+    }
+    const page = new PageParserTree(root, transformOptions(pageParserOptions));
+    pageParserOptionsStream.changes().onValue((pageParserOptions) => {
+        console.log('replacing PageParserTree options'); //eslint-disable-line no-console
+        page.replaceOptions(transformOptions(pageParserOptions));
+    });
+    return page;
+}

package/src/platform-implementation-js/dom-driver/gmail/pageParserOptions.js

@@ -0,0 +1,19 @@
+const pageParserOptions = {
+    tags: {},
+    watchers: [
+        {
+            sources: [null],
+            tag: 'composeLinkPopOverContainer',
+            selectors: ['body', '.Lf.a5s'],
+        },
+    ],
+    finders: {
+        supportMenu: {
+            fn: (root) => root.querySelectorAll('header[role=banner] div:not([aria-label]):not([data-ogsr-up]) > div:not(.inboxsdk__appButton) > div[data-tooltip] + div[role=menu]'),
+        },
+        composeLinkPopOverContainer: {
+            fn: (root) => root.querySelectorAll('body > .Lf.a5s'),
+        },
+    },
+};
+export default pageParserOptions;

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

@@ -0,0 +1,126 @@
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import { EventEmitter } from 'events';
+import cx from 'classnames';
+import GmailElementGetter from '../gmail-element-getter';
+export const NATIVE_CLASS = 'Xa';
+export const INBOXSDK_CLASS = 'inboxsdk__appMenuItem';
+export const ELEMENT_CLASS = `${NATIVE_CLASS} ${INBOXSDK_CLASS}`;
+const ICON_ELEMENT_CLASS = 'V6 CL';
+const HEADING_ELEMENT_CLASS = 'apW';
+const ICON_ELEMENT_SELECTOR = '.V6.CL';
+const HEADING_ELEMENT_SELECTOR = '.apW';
+export class GmailAppMenuItemView extends EventEmitter {
+    static elementCss = {
+        HOVER: 'aIk',
+        ACTIVE: 'apV',
+    };
+    #menuItemDescriptor;
+    #element;
+    #destroyed = false;
+    #driver;
+    get element() {
+        return this.#element;
+    }
+    setMenuItemDescriptor(newMenuItemDescriptor) {
+        this.#menuItemDescriptor = newMenuItemDescriptor;
+        this.#update();
+    }
+    get menuItemDescriptor() {
+        return this.#menuItemDescriptor;
+    }
+    constructor(driver) {
+        super();
+        this.#element = this.#setupElement();
+        this.#driver = driver;
+        driver.getStopper().onValue(() => this.remove());
+        this.#element.addEventListener('click', (e) => this.#onClick(e));
+        this.#element.addEventListener('mouseover', this.#onHover);
+        this.#element.addEventListener('mouseout', this.#onBlur);
+    }
+    remove() {
+        if (this.#destroyed)
+            return;
+        this.#destroyed = true;
+        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);
+    }
+    /**
+     * @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;
+        element.innerHTML = `
+      <div class="${ICON_ELEMENT_CLASS}" aria-label="" role="link" tabindex="-1"></div>
+      <div class="${HEADING_ELEMENT_CLASS}" role="heading" aria-level="2"></div>
+    `.trim();
+        return element;
+    }
+    #update() {
+        const element = this.element;
+        if (!element)
+            return;
+        element.className = cx(ELEMENT_CLASS, this.#menuItemDescriptor?.className);
+        this.#updateName(element);
+        this.#updateIcon(element);
+        this.#updateARIA(element);
+    }
+    #updateName(element) {
+        const headingElement = querySelector(element, HEADING_ELEMENT_SELECTOR);
+        headingElement.textContent = this.#menuItemDescriptor?.name ?? '';
+    }
+    #updateIcon(element) {
+        const iconContainerEl = querySelector(element, ICON_ELEMENT_SELECTOR);
+        const { iconUrl, iconClassName } = this.#menuItemDescriptor ?? {};
+        if (iconUrl) {
+            const theme = GmailElementGetter.isDarkTheme()
+                ? iconUrl.darkTheme
+                : iconUrl.lightTheme;
+            iconContainerEl.style.setProperty('--background-image', `url(${theme})`);
+        }
+        iconContainerEl.className = cx(ICON_ELEMENT_CLASS, iconClassName);
+    }
+    #updateARIA(element) {
+        const iconContainerEl = querySelector(element, ICON_ELEMENT_SELECTOR);
+        iconContainerEl.setAttribute('aria-label', this.#menuItemDescriptor?.name ?? '');
+    }
+    #onClick(e) {
+        this.emit('click');
+        this.#menuItemDescriptor?.onClick?.(e);
+        if (this.#menuItemDescriptor?.routeID) {
+            this.#driver.goto(this.#menuItemDescriptor.routeID, this.#menuItemDescriptor?.routeParams);
+        }
+    }
+    #onBlur = (e) => {
+        this.emit('blur', e);
+    };
+    #onHover = (e) => {
+        this.emit('hover', e);
+        this.#menuItemDescriptor?.onHover?.(e);
+    };
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-status-bar.js

@@ -0,0 +1,101 @@
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import cx from 'classnames';
+import insertElementInOrder from '../../../../lib/dom/insert-element-in-order';
+import Logger from '../../../../lib/logger';
+import querySelector from '../../../../lib/dom/querySelectorOrFail';
+import SimpleElementView from '../../../../views/SimpleElementView';
+export default defn(module, addStatusBar);
+function addStatusBar(gmailComposeView, options) {
+    const { height, orderHint, addAboveNativeStatusBar } = {
+        height: 40,
+        orderHint: 0,
+        addAboveNativeStatusBar: false,
+        ...options,
+    };
+    const statusbar = new StatusBar(gmailComposeView, height, orderHint, addAboveNativeStatusBar);
+    gmailComposeView
+        .getStopper()
+        .takeUntilBy(Kefir.fromEvents(statusbar, 'destroy'))
+        .onValue(() => statusbar.destroy());
+    return statusbar;
+}
+function createElement(orderHint, addAboveNativeStatusBar) {
+    const el = document.createElement('div');
+    el.className = cx('aDh', 'inboxsdk__compose_statusbar', {
+        inboxsdk__addAboveNative: addAboveNativeStatusBar,
+    });
+    el.style.fontFamily = 'Roboto,RobotoDraft,Helvetica,Arial,sans-serif';
+    el.style.fontSize = '15.6px';
+    el.setAttribute('data-order-hint', String(orderHint));
+    return el;
+}
+class StatusBar extends SimpleElementView {
+    _addAboveNativeStatusBar;
+    _gmailComposeView;
+    _nativeStatusContainer;
+    _prependContainer = null;
+    _stopper = kefirStopper();
+    constructor(gmailComposeView, height, orderHint, addAboveNativeStatusBar) {
+        super(createElement(orderHint, addAboveNativeStatusBar));
+        this._addAboveNativeStatusBar = addAboveNativeStatusBar;
+        this._gmailComposeView = gmailComposeView;
+        this._nativeStatusContainer = querySelector(gmailComposeView.getElement(), '.iN > tbody .aDj');
+        this._setStatusBar();
+        this.setHeight(height);
+    }
+    destroy() {
+        if (this.destroyed) {
+            return;
+        }
+        super.destroy();
+        this._stopper.destroy();
+        if (this._prependContainer &&
+            this._prependContainer.children.length === 0) {
+            this._prependContainer.remove();
+        }
+        this._updateTotalHeight();
+    }
+    setHeight(newHeight) {
+        this.el.style.height = newHeight + 'px';
+        this._updateTotalHeight();
+    }
+    _updateTotalHeight() {
+        const totalAddedStatusBarHeight = Array.from(this._gmailComposeView
+            .getElement()
+            .querySelectorAll('.inboxsdk__compose_statusbar'))
+            .map((el) => el.getBoundingClientRect().height)
+            .reduce((a, b) => a + b, 0);
+        this._gmailComposeView
+            .getElement()
+            .style.setProperty('--inboxsdk-total-added-statusbar-height', totalAddedStatusBarHeight + 'px');
+    }
+    _setStatusBar() {
+        try {
+            const statusArea = this._gmailComposeView.getStatusArea();
+            this._gmailComposeView
+                .getElement()
+                .classList.add('inboxsdk__compose_statusbarActive');
+            if (this._addAboveNativeStatusBar) {
+                const prependContainer = (this._prependContainer =
+                    statusArea.querySelector('.inboxsdk__compose_statusBarPrependContainer') || document.createElement('div'));
+                prependContainer.classList.add('inboxsdk__compose_statusBarPrependContainer');
+                statusArea.insertAdjacentElement('afterbegin', prependContainer);
+                insertElementInOrder(prependContainer, this.el);
+            }
+            else {
+                if (this._gmailComposeView.isInlineReplyForm()) {
+                    const nativeStatusBar = querySelector(this._gmailComposeView.getElement(), '.iN > tbody .aDj .aDh .IZ');
+                    insertElementInOrder(nativeStatusBar, this.el);
+                }
+                else {
+                    insertElementInOrder(statusArea, this.el);
+                }
+            }
+        }
+        catch (err) {
+            Logger.error(err);
+        }
+    }
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/detectClassicRecipientsArea.js

@@ -0,0 +1,38 @@
+import once from 'lodash/once';
+export default once(function detectClassicRecipientsArea() {
+    const styleSheetWithComposeRules = [...document.styleSheets].find((s) => {
+        try {
+            if (s.cssRules) {
+                // Both classic and new recipients Gmail should have this rule
+                return [...s.cssRules].find((rule) => rule instanceof CSSStyleRule &&
+                    rule.selectorText === '.aoI' &&
+                    rule.style.fontSize &&
+                    rule.style.color);
+            }
+        }
+        catch (e) {
+            // Some stylesheets are crossorigin and throw if we try to access
+            // their rules. Don't worry about them.
+        }
+        return false;
+    });
+    if (styleSheetWithComposeRules) {
+        // Check if we don't have any of these specific rules.
+        // If so, we're on classic recipients Gmail.
+        const hasOverflowYVisibleRule = [
+            ...styleSheetWithComposeRules.cssRules,
+        ].some((rule) => rule instanceof CSSStyleRule &&
+            rule.selectorText === '.aoI' &&
+            rule.style.overflowY === 'visible');
+        if (hasOverflowYVisibleRule) {
+            return;
+        }
+        const hasOverflowYAutoRule = [...styleSheetWithComposeRules.cssRules].some((rule) => rule instanceof CSSStyleRule &&
+            rule.selectorText === '.aaZ > .M9 > .aoI' &&
+            rule.style.overflowY === 'auto');
+        if (hasOverflowYAutoRule) {
+            return;
+        }
+        document.body.classList.add('inboxsdk__classic_gmail_recipients_area');
+    }
+});

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/get-address-information-extractor.js

@@ -0,0 +1,28 @@
+import Logger from '../../../../lib/logger';
+import extractContactFromEmailContactString from '../../../../lib/extract-contact-from-email-contact-string';
+import censorHTMLstring from '../../../../../common/censorHTMLstring';
+export default function getAddressInformationExtractor(addressType, composeView) {
+    return function (node) {
+        const contactNode = node instanceof HTMLInputElement &&
+            node.getAttribute('name') === addressType
+            ? node
+            : node.querySelector(`input[name='${addressType}']`);
+        if (contactNode) {
+            var contactInfoString = contactNode.value;
+            try {
+                return extractContactFromEmailContactString(contactInfoString);
+            }
+            catch (err) {
+                // The user might have typed in a partial address. We can just ignore that.
+                return null;
+            }
+        }
+        else {
+            Logger.error(new Error(`contactNode can't be found`), {
+                addressType,
+                composeViewHtml: censorHTMLstring(composeView.getElement().outerHTML),
+            });
+            return null;
+        }
+    };
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/get-recipients.js

@@ -0,0 +1,22 @@
+import { getRecipientChips } from './page-parser';
+import getAddressInformationExtractor from './get-address-information-extractor';
+import isNotNil from '../../../../lib/isNotNil';
+export default function getRecipients(gmailComposeView, addressType) {
+    const contactNodes = getRecipientChips(gmailComposeView.getElement(), addressType);
+    return Array.from(contactNodes)
+        .map((contactNode) => {
+        if (contactNode.getAttribute('role') === 'option') {
+            // new recipient
+            // https://workspaceupdates.googleblog.com/2021/10/visual-updates-for-composing-email-in-gmail.html
+            return {
+                name: contactNode.getAttribute('data-name'),
+                emailAddress: contactNode.getAttribute('data-hovercard-id'),
+            };
+        }
+        else {
+            // old
+            return getAddressInformationExtractor(addressType, gmailComposeView)(contactNode);
+        }
+    })
+        .filter(isNotNil);
+}