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

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/monitor-selection-range.js

@@ -1,29 +1,18 @@
-/* @flow */
+"use strict";
 
-import Kefir from 'kefir';
-
-import fromEventTargetCapture from '../../../../lib/from-event-target-capture';
-
-import type GmailComposeView from '../gmail-compose-view';
-
-export default function (gmailComposeView: GmailComposeView) {
-  Kefir.merge([
-    fromEventTargetCapture((document.body: any), 'mousedown'),
-    fromEventTargetCapture(gmailComposeView.getBodyElement(), 'keydown'),
-    gmailComposeView
-      .getEventStream()
-      .filter((e) => e.eventName === 'bodyChanged'),
-  ])
-    .takeUntilBy(gmailComposeView.getStopper())
-    .onValue((event) => {
-      var body = gmailComposeView.getMaybeBodyElement();
-      var selection = (document: any).getSelection();
-      if (
-        body &&
-        selection.rangeCount > 0 &&
-        body.contains(selection.anchorNode)
-      ) {
-        gmailComposeView.setLastSelectionRange(selection.getRangeAt(0));
-      }
-    });
-}
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _kefir = _interopRequireDefault(require("kefir"));
+var _fromEventTargetCapture = _interopRequireDefault(require("../../../../lib/from-event-target-capture"));
+function _default(gmailComposeView) {
+  _kefir.default.merge([(0, _fromEventTargetCapture.default)(document.body, 'mousedown'), (0, _fromEventTargetCapture.default)(gmailComposeView.getBodyElement(), 'keydown'), gmailComposeView.getEventStream().filter(e => e.eventName === 'bodyChanged')]).takeUntilBy(gmailComposeView.getStopper()).onValue(event => {
+    var body = gmailComposeView.getMaybeBodyElement();
+    var selection = document.getSelection();
+    if (body && selection.rangeCount > 0 && body.contains(selection.anchorNode)) {
+      gmailComposeView.setLastSelectionRange(selection.getRangeAt(0));
+    }
+  });
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/override-edit-subject.js

@@ -1,92 +1,56 @@
-/* @flow */
-
-import censorHTMLtree from '../../../../../common/censorHTMLtree';
-import { simulateClick } from '../../../../lib/dom/simulate-mouse-event';
-
-import type GmailDriver from '../../gmail-driver';
-import type GmailComposeView from '../gmail-compose-view';
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = overrideEditSubject;
+var _censorHTMLtree = _interopRequireDefault(require("../../../../../common/censorHTMLtree"));
+var _simulateMouseEvent = require("../../../../lib/dom/simulate-mouse-event");
 let hasLoggedError = false;
-
-export default function overrideEditSubject(
-  gmailDriver: GmailDriver,
-  gmailComposeView: GmailComposeView
-) {
+function overrideEditSubject(gmailDriver, gmailComposeView) {
   if (!gmailComposeView.isReply()) return;
-
-  const menuItem = gmailComposeView
-    .getElement()
-    .querySelector(
-      'div.J-M.jQjAxd.HX[role=menu] > div.SK.AX > [role=menuitem]:nth-last-child(2)'
-    );
+  const menuItem = gmailComposeView.getElement().querySelector('div.J-M.jQjAxd.HX[role=menu] > div.SK.AX > [role=menuitem]:nth-last-child(2)');
   if (!menuItem) {
     if (!hasLoggedError) {
-      gmailDriver
-        .getLogger()
-        .error(new Error('could not find edit subject item'), {
-          composeElement: censorHTMLtree(gmailComposeView.getElement()),
-        });
+      gmailDriver.getLogger().error(new Error('could not find edit subject item'), {
+        composeElement: (0, _censorHTMLtree.default)(gmailComposeView.getElement())
+      });
       hasLoggedError = true;
     }
     return;
   }
-
-  menuItem.addEventListener(
-    'click',
-    (e: MouseEvent) => {
-      e.stopPropagation();
-    },
-    true
-  );
-
-  menuItem.addEventListener(
-    'mouseup',
-    (e: MouseEvent) => {
-      e.stopPropagation();
-      _cloneContentToNewCompose(gmailDriver, gmailComposeView);
-    },
-    true
-  );
+  menuItem.addEventListener('click', e => {
+    e.stopPropagation();
+  }, true);
+  menuItem.addEventListener('mouseup', e => {
+    e.stopPropagation();
+    _cloneContentToNewCompose(gmailDriver, gmailComposeView);
+  }, true);
 }
-
 function _cloneContentToNewCompose(gmailDriver, gmailComposeView) {
   const toRecipients = gmailComposeView.getToRecipients();
   const ccRecipients = gmailComposeView.getCcRecipients();
   const bccRecipients = gmailComposeView.getBccRecipients();
   const fromAddress = gmailComposeView.getFromContact();
-
   const subject = gmailComposeView.getSubject();
-
   _ensureExtraContentIsVisible(gmailComposeView);
   const body = gmailComposeView.getHTMLContent();
-
   gmailComposeView.discard();
-
-  gmailDriver
-    .openNewComposeViewDriver()
-    .then((newComposeView: GmailComposeView) => {
-      if (toRecipients.length > 0)
-        newComposeView.setToRecipients(toRecipients.map((c) => c.emailAddress));
-      if (ccRecipients.length > 0)
-        newComposeView.setCcRecipients(ccRecipients.map((c) => c.emailAddress));
-      if (bccRecipients.length > 0)
-        newComposeView.setBccRecipients(
-          bccRecipients.map((c) => c.emailAddress)
-        );
-
-      newComposeView.setFromEmail(fromAddress.emailAddress);
-      newComposeView.setSubject(subject);
-      newComposeView.setBodyHTML(body);
-
-      setTimeout(function () {
-        newComposeView.getSubjectInput().select();
-      }, 1);
-    });
+  gmailDriver.openNewComposeViewDriver().then(newComposeView => {
+    if (toRecipients.length > 0) newComposeView.setToRecipients(toRecipients.map(c => c.emailAddress));
+    if (ccRecipients.length > 0) newComposeView.setCcRecipients(ccRecipients.map(c => c.emailAddress));
+    if (bccRecipients.length > 0) newComposeView.setBccRecipients(bccRecipients.map(c => c.emailAddress));
+    newComposeView.setFromEmail(fromAddress.emailAddress);
+    newComposeView.setSubject(subject);
+    newComposeView.setBodyHTML(body);
+    setTimeout(function () {
+      newComposeView.getSubjectInput().select();
+    }, 1);
+  });
 }
-
 function _ensureExtraContentIsVisible(gmailComposeView) {
   if (gmailComposeView.getBodyElement().querySelector('.gmail_extra')) return;
-
   const quoteDotsElement = gmailComposeView.getElement().querySelector('.ajR');
-  if (quoteDotsElement) simulateClick(quoteDotsElement);
-}
+  if (quoteDotsElement) (0, _simulateMouseEvent.simulateClick)(quoteDotsElement);
+}

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/position-formatting-toolbar.js

@@ -1,28 +1,21 @@
-/* @flow */
+"use strict";
 
-import type GmailComposeView from '../gmail-compose-view';
-
-export default function positionFormattingToolbar(
-  gmailComposeView: GmailComposeView
-) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = positionFormattingToolbar;
+function positionFormattingToolbar(gmailComposeView) {
   const formattingToolbar = gmailComposeView.getFormattingToolbar();
   if (formattingToolbar && formattingToolbar.style.display === '') {
     const arrowElement = gmailComposeView.getFormattingToolbarArrow();
     const buttonElement = gmailComposeView.getFormattingToolbarToggleButton();
-
-    const left =
-      buttonElement.offsetLeft +
-      buttonElement.clientWidth / 2 -
-      arrowElement.offsetWidth / 2;
+    const left = buttonElement.offsetLeft + buttonElement.clientWidth / 2 - arrowElement.offsetWidth / 2;
     arrowElement.style.left = left + 'px';
-
-    const statusBarPrependContainer =
-      gmailComposeView.getStatusBarPrependContainer();
+    const statusBarPrependContainer = gmailComposeView.getStatusBarPrependContainer();
     if (statusBarPrependContainer) {
-      formattingToolbar.style.bottom =
-        -1 * statusBarPrependContainer.offsetHeight + 'px';
+      formattingToolbar.style.bottom = -1 * statusBarPrependContainer.offsetHeight + 'px';
     } else {
       formattingToolbar.style.bottom = '';
     }
   }
-}
+}

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