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

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

@@ -0,0 +1,233 @@
+import includes from 'lodash/includes';
+import * as Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import Logger from '../../../../lib/logger';
+import { simulateHover } from '../../../../lib/dom/simulate-mouse-event';
+import keyboardShortcutStream from '../../../../lib/dom/keyboard-shortcut-stream';
+export default class GmailComposeButtonView {
+    _element = document.createElement('div');
+    _iconElement = document.createElement('div');
+    _iconImgElement;
+    _iconClass;
+    _iconUrl;
+    _tooltip;
+    _hasDropdown;
+    _isEnabled;
+    _keyboardShortcutHandle;
+    _eventStream;
+    constructor(options) {
+        this._isEnabled = options.enabled !== false;
+        this._iconClass = options.iconClass;
+        this._iconUrl = options.iconUrl;
+        this._tooltip = options.tooltip || options.title || options.text;
+        // TODO what is this used for?
+        this._hasDropdown = !!options.hasDropdown;
+        this._keyboardShortcutHandle = options.keyboardShortcutHandle;
+        this._createElement(options);
+        this._eventStream = kefirBus();
+        this._setupEventStream();
+        this._setupAestheticEvents();
+        if (options.enabled !== false) {
+            this._setupKeyboardShortcutEvent();
+        }
+    }
+    destroy() {
+        this._element.remove();
+        this._eventStream.end();
+    }
+    getElement() {
+        return this._element;
+    }
+    getEventStream() {
+        return this._eventStream;
+    }
+    activate() {
+        this.addClass('inboxsdk__composeButton_active');
+    }
+    deactivate() {
+        this.removeClass('inboxsdk__composeButton_active');
+    }
+    addClass(className) {
+        this._element.classList.add(className);
+    }
+    removeClass(className) {
+        this._element.classList.remove(className);
+    }
+    simulateHover() {
+        simulateHover(this._element);
+    }
+    setEnabled(value) {
+        this._setEnabled(value);
+    }
+    isEnabled() {
+        return this._isEnabled;
+    }
+    update(options) {
+        if (!options) {
+            this._element.style.display = 'none';
+            return;
+        }
+        else if (this._element.style.display === 'none') {
+            this._element.style.display = '';
+        }
+        const newTooltip = options.tooltip || options.title || options.text;
+        if (newTooltip != this._tooltip) {
+            this._updateTooltip(newTooltip);
+        }
+        if (options.iconUrl != this._iconUrl) {
+            this._updateIconUrl(options.iconUrl);
+        }
+        if (options.iconClass != this._iconClass) {
+            this._updateIconClass(options.iconClass);
+        }
+        if (options.enabled === false || options.enabled === true) {
+            this._setEnabled(options.enabled);
+        }
+    }
+    _createElement(options) {
+        this._createMainElement(options);
+        this._createIconElement();
+    }
+    _createMainElement(options) {
+        this._element.setAttribute('class', 'inboxsdk__composeButton');
+        if (options.tooltip) {
+            this._element.setAttribute('aria-label', options.tooltip);
+        }
+        this._element.setAttribute('role', 'button');
+        this._element.setAttribute('tabindex', '0');
+        const newTooltip = options.tooltip || options.title || options.text;
+        if (newTooltip) {
+            this._element.setAttribute('data-tooltip', newTooltip);
+        }
+        if (options.enabled === false) {
+            this._element.classList.add('inboxsdk__button_disabled');
+        }
+        if (options.noOverflow) {
+            this._element.setAttribute('data-no-overflow', '');
+        }
+    }
+    _createIconElement() {
+        const iconElement = this._iconElement;
+        if (this._iconClass) {
+            iconElement.innerHTML = ' ';
+            iconElement.setAttribute('class', this._iconClass);
+        }
+        iconElement.classList.add('inboxsdk__button_icon');
+        this._element.appendChild(iconElement);
+        if (this._iconUrl) {
+            this._createIconImgElement();
+        }
+    }
+    _createIconImgElement() {
+        this._iconElement.innerHTML = '';
+        const iconImgElement = (this._iconImgElement =
+            document.createElement('img'));
+        iconImgElement.classList.add('inboxsdk__button_iconImg');
+        if (this._iconUrl) {
+            iconImgElement.src = this._iconUrl;
+        }
+        else {
+            Logger.error(new Error('_createIconImgElement should not be called with null _iconUrl'));
+        }
+        this._iconElement.appendChild(iconImgElement);
+    }
+    _updateTooltip(newTooltip) {
+        this._tooltip = newTooltip;
+        if (newTooltip) {
+            this._element.setAttribute('data-tooltip', newTooltip);
+        }
+        else {
+            this._element.removeAttribute('data-tooltip');
+        }
+    }
+    _updateIconUrl(newIconUrl) {
+        this._iconUrl = newIconUrl;
+        if (!newIconUrl && this._iconImgElement) {
+            this._iconImgElement.remove();
+            this._iconImgElement = null;
+        }
+        else if (newIconUrl && !this._iconImgElement) {
+            this._createIconImgElement();
+        }
+        else if (newIconUrl && this._iconImgElement) {
+            this._iconImgElement.src = newIconUrl;
+        }
+    }
+    _updateIconClass(newIconClass) {
+        this._iconClass = newIconClass;
+        this._iconElement.setAttribute('class', 'inboxsdk__button_icon ' + (newIconClass || ''));
+    }
+    _setEnabled(value) {
+        if (this._isEnabled === value) {
+            return;
+        }
+        this._isEnabled = value;
+        if (this._isEnabled) {
+            this._element.classList.remove('inboxsdk__button_disabled');
+        }
+        else {
+            this._element.classList.add('inboxsdk__button_disabled');
+        }
+        this._eventStream.emit({
+            eventName: 'enabledChanged',
+            isEnabled: this._isEnabled,
+        });
+        if (this._isEnabled) {
+            this._setupKeyboardShortcutEvent();
+        }
+    }
+    _setupEventStream() {
+        const clickEventStream = Kefir.fromEvents(this._element, 'click');
+        clickEventStream.onValue(function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this._eventStream.plug(clickEventStream
+            .filter(() => this.isEnabled())
+            .map(function (event) {
+            return {
+                eventName: 'click',
+                domEvent: event,
+            };
+        }));
+        const isEnterOrSpace = (event) => includes([32 /* space */, 13 /* enter */], event.which);
+        const keydownEventStream = Kefir.fromEvents(this._element, 'keydown').filter(() => this.isEnabled());
+        const enterEventStream = keydownEventStream.filter(isEnterOrSpace);
+        this._eventStream.plug(enterEventStream.map(function (event) {
+            return {
+                eventName: 'click',
+                domEvent: event,
+            };
+        }));
+        enterEventStream.onValue(function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        });
+    }
+    _setupKeyboardShortcutEvent() {
+        const keyboardShortcutHandle = this._keyboardShortcutHandle;
+        if (keyboardShortcutHandle) {
+            this._eventStream.plug(keyboardShortcutStream(keyboardShortcutHandle.chord)
+                .takeUntilBy(this._eventStream.filter(function (event) {
+                return (event.eventName === 'enabledChanged' &&
+                    event.isEnabled === false);
+            }))
+                .map(function (domEvent) {
+                return {
+                    eventName: 'click',
+                    domEvent: domEvent,
+                };
+            }));
+        }
+    }
+    _setupAestheticEvents() {
+        Kefir.fromEvents(this._element, 'mouseenter')
+            .filter(() => this.isEnabled())
+            .onValue(() => {
+            this._element.classList.add('inboxsdk__button_hover');
+        });
+        Kefir.fromEvents(this._element, 'mouseleave').onValue(() => {
+            this._element.classList.remove('inboxsdk__button_hover');
+        });
+    }
+}

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

@@ -0,0 +1,223 @@
+import closest from 'closest-ng';
+import PageParserTree from 'page-parser-tree';
+import censorHTMLtree from '../../../../../common/censorHTMLtree';
+export function makePageParser(element, logger) {
+    return new PageParserTree(element, {
+        logError(err, el) {
+            const details = {
+                el,
+                html: el ? censorHTMLtree(el) : null,
+            };
+            logger.errorSite(err, details);
+        },
+        tags: {},
+        watchers: [
+            {
+                // For regular composes
+                sources: [null],
+                tag: 'recipientsCommon',
+                selectors: [
+                    'div',
+                    'div',
+                    'div[jsaction]',
+                    'div[role=region]',
+                    'table',
+                    'tbody',
+                    'tr',
+                    'td',
+                    'form',
+                    'div',
+                    'table.GS',
+                    'tbody',
+                    'tr.bzf',
+                    'td.eV',
+                    'div',
+                    'div',
+                ],
+            },
+            {
+                // For inline composes
+                sources: [null],
+                tag: 'recipientsCommon',
+                selectors: [
+                    'div[role=region]',
+                    'table',
+                    'tbody',
+                    'tr',
+                    'td',
+                    'form',
+                    'div',
+                    'table[role=presentation]',
+                    'tbody',
+                    'tr',
+                    'td.Iy',
+                    'div.fX',
+                    'table.GS',
+                    'tbody',
+                    'tr.bzf',
+                    'td.eV',
+                    'div',
+                    'div',
+                ],
+            },
+            {
+                sources: ['recipientsCommon'],
+                tag: 'toRecipient',
+                selectors: [
+                    {
+                        $or: [
+                            [
+                                'div.anm[name="to"]',
+                                {
+                                    $or: [
+                                        [],
+                                        // Inline reply compose
+                                        ['div.aUy'],
+                                    ],
+                                },
+                                'div',
+                                'div',
+                                'div',
+                                'div',
+                                '[role=listbox]',
+                                'div',
+                                'div',
+                                'div[role=option][data-name]',
+                            ],
+                            [
+                                {
+                                    $map: (el) => el.querySelector('textarea.vO[name=to], input[name=to]'),
+                                },
+                                { $map: (el) => el.closest('tr') },
+                                'td.eV',
+                                'div',
+                                'div',
+                                '.vR',
+                                'input[type=hidden]',
+                                { $map: (el) => el.parentElement },
+                            ],
+                        ],
+                    },
+                ],
+            },
+            {
+                sources: ['recipientsCommon'],
+                tag: 'ccRecipient',
+                selectors: [
+                    {
+                        $or: [
+                            [
+                                'div.anm[name="cc"]',
+                                {
+                                    $or: [
+                                        [],
+                                        // Inline reply compose
+                                        ['div.aUy'],
+                                    ],
+                                },
+                                'div',
+                                'div',
+                                'div',
+                                'div',
+                                '[role=listbox]',
+                                'div',
+                                'div',
+                                'div[role=option][data-name]',
+                            ],
+                            [
+                                {
+                                    $map: (el) => el.querySelector('textarea.vO[name=cc], input[name=cc]'),
+                                },
+                                { $map: (el) => el.closest('tr') },
+                                'td.eV',
+                                'div',
+                                'div',
+                                '.vR',
+                                'input[type=hidden]',
+                                { $map: (el) => el.parentElement },
+                            ],
+                        ],
+                    },
+                ],
+            },
+            {
+                sources: ['recipientsCommon'],
+                tag: 'bccRecipient',
+                selectors: [
+                    {
+                        $or: [
+                            [
+                                'div.anm[name="bcc"]',
+                                {
+                                    $or: [
+                                        [],
+                                        // Inline reply compose
+                                        ['div.aUy'],
+                                    ],
+                                },
+                                'div',
+                                'div',
+                                'div',
+                                'div',
+                                '[role=listbox]',
+                                'div',
+                                'div',
+                                'div[role=option][data-name]',
+                            ],
+                            [
+                                {
+                                    $map: (el) => el.querySelector('textarea.vO[name=bcc], input[name=bcc]'),
+                                },
+                                { $map: (el) => el.closest('tr') },
+                                'td.eV',
+                                'div',
+                                'div',
+                                '.vR',
+                                'input[type=hidden]',
+                                { $map: (el) => el.parentElement },
+                            ],
+                        ],
+                    },
+                ],
+            },
+        ],
+        finders: {
+            toRecipient: {
+                fn: (root) => getRecipientChips(root, 'to'),
+            },
+            ccRecipient: {
+                fn: (root) => getRecipientChips(root, 'cc'),
+            },
+            bccRecipient: {
+                fn: (root) => getRecipientChips(root, 'bcc'),
+            },
+        },
+    });
+}
+export function getRecipientChips(element, addressType) {
+    const oldRow = getOldRecipientRowForType(element, addressType);
+    if (oldRow) {
+        return Array.from(oldRow.querySelectorAll('.vR > input[type=hidden]')).map((el) => el.parentElement);
+    }
+    else {
+        return element.querySelectorAll(`.GS .anm[name="${addressType}"] [role=listbox] [role=option][data-name]`);
+    }
+}
+// getRecipientRowForType is recommended over this
+export function getRecipientRowElements(element) {
+    return Array.prototype.filter.call(element.querySelectorAll('.GS tr, .GS .anm[name] [role=listbox]'), (tr) => !tr.classList.contains('inboxsdk__recipient_row'));
+}
+export function getRecipientRowForType(element, addressType) {
+    // handling new recipients
+    // https://workspaceupdates.googleblog.com/2021/10/visual-updates-for-composing-email-in-gmail.html
+    return element.querySelector(`.GS .anm[name="${addressType}"] [role=listbox]`);
+}
+export function getOldRecipientRowForType(element, addressType) {
+    const input = element.querySelector(`.GS tr textarea.vO[name="${addressType}"], .GS tr input[name="${addressType}"]`);
+    if (input) {
+        return closest(input, 'tr');
+    }
+    else {
+        return null;
+    }
+}

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

@@ -0,0 +1,157 @@
+import Logger from '../../../../lib/logger';
+import querySelector from '../../../../lib/dom/querySelectorOrFail';
+import getRecipients from './get-recipients';
+import { simulateClick } from '../../../../lib/dom/simulate-mouse-event';
+import simulateKey from '../../../../lib/dom/simulate-key';
+import { getRecipientRowForType, getOldRecipientRowForType, } from './page-parser';
+export default function setRecipients(gmailComposeView, addressType, emailAddresses) {
+    if (_areContactsEqual(gmailComposeView, addressType, emailAddresses)) {
+        return;
+    }
+    const oldRange = gmailComposeView.getLastSelectionRange();
+    let _contactRow = getRecipientRowForType(gmailComposeView.getElement(), addressType);
+    function openRecipientsSectionIfNeeded(button) {
+        const signalElement = button.closest('.fX.aiL');
+        if (signalElement && signalElement.style.display === 'none') {
+            const cover = querySelector(gmailComposeView.getElement(), 'div.aoD.hl');
+            cover.dispatchEvent(new FocusEvent('focus'));
+        }
+    }
+    if (addressType === 'cc') {
+        const ccButton = gmailComposeView
+            .getElement()
+            .querySelector('span.pE[role=link]');
+        if (ccButton) {
+            openRecipientsSectionIfNeeded(ccButton);
+            ccButton.click();
+            _contactRow = getRecipientRowForType(gmailComposeView.getElement(), addressType);
+        }
+    }
+    else if (addressType === 'bcc') {
+        const bccButton = gmailComposeView
+            .getElement()
+            .querySelector('span.pB[role=link]');
+        if (bccButton) {
+            openRecipientsSectionIfNeeded(bccButton);
+            bccButton.click();
+            _contactRow = getRecipientRowForType(gmailComposeView.getElement(), addressType);
+        }
+    }
+    const contactRow = _contactRow;
+    if (contactRow) {
+        // new recipient fields
+        // https://workspaceupdates.googleblog.com/2021/10/visual-updates-for-composing-email-in-gmail.html
+        const emailAddressEntry = querySelector(contactRow, 'input[role=combobox][aria-autocomplete=list]');
+        if (!(emailAddressEntry instanceof HTMLInputElement)) {
+            throw new Error();
+        }
+        // Remove existing recipients
+        Array.from(contactRow.querySelectorAll('div[role=option][data-name] div.afX[aria-label]')).forEach((el) => {
+            el.click();
+        });
+        emailAddressEntry.value = '';
+        const clipboardData = new DataTransfer();
+        clipboardData.setData('text/plain', emailAddresses.join(','));
+        emailAddressEntry.dispatchEvent(new ClipboardEvent('paste', { clipboardData }));
+        // On fresh composes, if set_Recipients is called immediately, then
+        // Gmail asynchronously resets the recipients field. Detect this and
+        // put our change back.
+        const nameEl = contactRow.closest('div.anm[name]');
+        if (emailAddresses.length > 0 &&
+            nameEl &&
+            !nameEl.hasAttribute('data-inboxsdk-handled-reset')) {
+            // We're in a fresh compose.
+            // If setRecipients is called multiple times on a fresh compose,
+            // we only want the last call's setTimeout callback to do anything.
+            // Do this by marking a DOM element with a unique claim value and
+            // checking for it in the callback. Note that we generate the claim
+            // value by reading from the existing DOM value instead of a variable
+            // in module scope because there might be multiple extensions using
+            // the InboxSDK; we must use the shared DOM as the source of truth
+            // for values shared between InboxSDK instances.
+            const claim = String(Number(nameEl.getAttribute('data-inboxsdk-tracking-fresh-compose') || 0) + 1);
+            nameEl.setAttribute('data-inboxsdk-tracking-fresh-compose', claim);
+            setTimeout(() => {
+                if (nameEl.getAttribute('data-inboxsdk-tracking-fresh-compose') === claim) {
+                    nameEl.removeAttribute('data-inboxsdk-tracking-fresh-compose');
+                    // Does it look like our contact chips have all been removed?
+                    if (contactRow.querySelectorAll('div[role=option][data-name] div.afX[aria-label]').length === 0) {
+                        // put a mark in the DOM to be absolutely sure we can't
+                        // get in an infinite loop (which could happen if Gmail doesn't
+                        // actually set the style attribute, and our selector above fails
+                        // to find the recipient chips).
+                        nameEl.setAttribute('data-inboxsdk-handled-reset', 'true');
+                        setRecipients(gmailComposeView, addressType, emailAddresses);
+                    }
+                }
+            }, 100);
+        }
+    }
+    else {
+        // old recipient fields
+        let contactRow;
+        try {
+            contactRow = getOldRecipientRowForType(gmailComposeView.getElement(), addressType);
+            if (!contactRow) {
+                throw new Error('getOldRecipientRowForType failed');
+            }
+        }
+        catch (err) {
+            Logger.error(err, { addressType });
+            return;
+        }
+        const emailAddressEntry = contactRow.querySelector('textarea.vO');
+        if (!emailAddressEntry ||
+            !(emailAddressEntry instanceof HTMLTextAreaElement)) {
+            return;
+        }
+        // Remove existing recipients
+        Array.from(contactRow.querySelectorAll('.vR .vM')).forEach((el) => {
+            simulateClick(el);
+        });
+        emailAddressEntry.value = emailAddresses.join(',');
+        // Push enter so Gmail interprets the addresses.
+        simulateKey(emailAddressEntry, 13, 0);
+        // Focus the recipients preview label so Gmail re-renders it.
+        const cover = querySelector(gmailComposeView.getElement(), 'div.aoD.hl');
+        cover.dispatchEvent(new FocusEvent('focus'));
+        if (addressType === 'cc') {
+            const ccButton = querySelector(gmailComposeView.getElement(), 'span.aB.gQ.pE');
+            simulateClick(ccButton);
+        }
+        else if (addressType === 'bcc') {
+            const bccButton = querySelector(gmailComposeView.getElement(), 'span.aB.gQ.pB');
+            simulateClick(bccButton);
+        }
+    }
+    // Then restore focus to what it was before.
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
+    if (oldRange) {
+        const sel = document.getSelection();
+        if (!sel)
+            throw new Error();
+        sel.removeAllRanges();
+        sel.addRange(oldRange);
+    }
+}
+function _areContactsEqual(gmailComposeView, addressType, emailAddresses) {
+    const existingEmailAddresses = getRecipients(gmailComposeView, addressType).map((c) => c.emailAddress);
+    if (!emailAddresses) {
+        return !!existingEmailAddresses;
+    }
+    if (!existingEmailAddresses) {
+        return !!emailAddresses;
+    }
+    if (emailAddresses.length !== existingEmailAddresses.length) {
+        return false;
+    }
+    for (let ii = 0; ii < existingEmailAddresses.length; ii++) {
+        const existingEmailAddress = existingEmailAddresses[ii];
+        if (emailAddresses.indexOf(existingEmailAddress) === -1) {
+            return false;
+        }
+    }
+    return true;
+}