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

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/add-tooltip-to-button.js

@@ -1,125 +1,50 @@
-/* @flow */
-
-import Kefir from 'kefir';
-import Logger from '../../../../lib/logger';
-
-import GmailTooltipView from '../../widgets/gmail-tooltip-view';
-import type GmailComposeView from '../gmail-compose-view';
-
-import type { TooltipDescriptor } from '../../../../views/compose-button-view';
-
-export default function addTooltipToButton(
-  gmailComposeView: GmailComposeView,
-  buttonViewController: Object,
-  buttonDescriptor: Object,
-  tooltipDescriptor: TooltipDescriptor
-): GmailTooltipView {
-  var gmailTooltipView = new GmailTooltipView(tooltipDescriptor);
-  var tooltipStopperStream: Kefir.Observable<any> = gmailTooltipView
-    .getStopper()
-    .merge(gmailComposeView.getStopper());
-
-  gmailComposeView
-    .getStopper()
-    .takeUntilBy(gmailTooltipView.getStopper())
-    .onValue(() => gmailTooltipView.destroy());
-
-  ((document.body: any): HTMLElement).appendChild(
-    gmailTooltipView.getElement()
-  );
-
-  _anchorTooltip(
-    gmailTooltipView,
-    gmailComposeView,
-    buttonViewController,
-    buttonDescriptor
-  );
-
-  gmailComposeView
-    .getEventStream()
-    .filter(
-      (event) =>
-        event.eventName === 'buttonAdded' ||
-        event.eventName === 'fullscreenChanged'
-    )
-    .merge(
-      gmailTooltipView
-        .getEventStream()
-        .filter(({ eventName }) => eventName === 'imageLoaded')
-    )
-    .debounce(10)
-    .takeUntilBy(tooltipStopperStream)
-    .onValue(
-      _anchorTooltip.bind(
-        null,
-        gmailTooltipView,
-        gmailComposeView,
-        buttonViewController,
-        buttonDescriptor
-      )
-    );
-
-  buttonViewController
-    .getView()
-    .getEventStream()
-    .takeUntilBy(tooltipStopperStream)
-    .filter(function (event) {
-      return event.eventName === 'click';
-    })
-    .onValue(gmailTooltipView.destroy.bind(gmailTooltipView));
-
-  var stoppedIntervalStream =
-    Kefir.interval(50).takeUntilBy(tooltipStopperStream);
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = addTooltipToButton;
+var _kefir = _interopRequireDefault(require("kefir"));
+var _logger = _interopRequireDefault(require("../../../../lib/logger"));
+var _gmailTooltipView = _interopRequireDefault(require("../../widgets/gmail-tooltip-view"));
+function addTooltipToButton(gmailComposeView, buttonViewController, buttonDescriptor, tooltipDescriptor) {
+  var gmailTooltipView = new _gmailTooltipView.default(tooltipDescriptor);
+  var tooltipStopperStream = gmailTooltipView.getStopper().merge(gmailComposeView.getStopper());
+  gmailComposeView.getStopper().takeUntilBy(gmailTooltipView.getStopper()).onValue(() => gmailTooltipView.destroy());
+  document.body.appendChild(gmailTooltipView.getElement());
+  _anchorTooltip(gmailTooltipView, gmailComposeView, buttonViewController, buttonDescriptor);
+  gmailComposeView.getEventStream().filter(event => event.eventName === 'buttonAdded' || event.eventName === 'fullscreenChanged').merge(gmailTooltipView.getEventStream().filter(_ref => {
+    let {
+      eventName
+    } = _ref;
+    return eventName === 'imageLoaded';
+  })).debounce(10).takeUntilBy(tooltipStopperStream).onValue(_anchorTooltip.bind(null, gmailTooltipView, gmailComposeView, buttonViewController, buttonDescriptor));
+  buttonViewController.getView().getEventStream().takeUntilBy(tooltipStopperStream).filter(function (event) {
+    return event.eventName === 'click';
+  }).onValue(gmailTooltipView.destroy.bind(gmailTooltipView));
+  var stoppedIntervalStream = _kefir.default.interval(50).takeUntilBy(tooltipStopperStream);
   var left = 0;
   var top = 0;
-
-  stoppedIntervalStream
-    .takeWhile(
-      () => !!buttonViewController.getView() && !!gmailTooltipView.getElement()
-    )
-    .map(() =>
-      buttonViewController.getView().getElement().getBoundingClientRect()
-    )
-    .filter((rect) => rect.left !== left || rect.top !== top)
-    .map((rect) => {
-      left = rect.left;
-      top = rect.top;
-      return rect;
-    })
-    .onValue(
-      gmailTooltipView.anchor.bind(
-        gmailTooltipView,
-        buttonViewController.getView().getElement(),
-        { position: 'top' }
-      )
-    );
-
-  stoppedIntervalStream
-    .filter(
-      () =>
-        !buttonViewController.getView() ||
-        !buttonViewController.getView().getElement().offsetParent
-    )
-    .onValue(gmailTooltipView.destroy.bind(gmailTooltipView));
-
+  stoppedIntervalStream.takeWhile(() => !!buttonViewController.getView() && !!gmailTooltipView.getElement()).map(() => buttonViewController.getView().getElement().getBoundingClientRect()).filter(rect => rect.left !== left || rect.top !== top).map(rect => {
+    left = rect.left;
+    top = rect.top;
+    return rect;
+  }).onValue(gmailTooltipView.anchor.bind(gmailTooltipView, buttonViewController.getView().getElement(), {
+    position: 'top'
+  }));
+  stoppedIntervalStream.filter(() => !buttonViewController.getView() || !buttonViewController.getView().getElement().offsetParent).onValue(gmailTooltipView.destroy.bind(gmailTooltipView));
   return gmailTooltipView;
 }
-
-function _anchorTooltip(
-  gmailTooltipView,
-  gmailComposeView,
-  buttonViewController,
-  buttonDescriptor
-) {
+function _anchorTooltip(gmailTooltipView, gmailComposeView, buttonViewController, buttonDescriptor) {
   try {
     gmailComposeView.ensureGroupingIsOpen(buttonDescriptor.type);
     setTimeout(function () {
       gmailTooltipView.anchor(buttonViewController.getView().getElement(), {
-        position: 'top',
+        position: 'top'
       });
     }, 10);
   } catch (err) {
-    Logger.error(err);
+    _logger.default.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/ensure-app-button-toolbars-are-closed.js

@@ -1,22 +1,17 @@
-/* @flow */
+"use strict";
 
-import { simulateClick } from '../../../../lib/dom/simulate-mouse-event';
-
-export default function ensureAppButtonToolbarsAreClosed(
-  gmailComposeViewElement: HTMLElement
-) {
-  var groupedButton = gmailComposeViewElement.querySelector(
-    '.inboxsdk__compose_groupedActionButton'
-  );
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ensureAppButtonToolbarsAreClosed;
+var _simulateMouseEvent = require("../../../../lib/dom/simulate-mouse-event");
+function ensureAppButtonToolbarsAreClosed(gmailComposeViewElement) {
+  var groupedButton = gmailComposeViewElement.querySelector('.inboxsdk__compose_groupedActionButton');
   if (!groupedButton) {
     return; //no group button so we're good
   }
 
-  if (
-    gmailComposeViewElement.classList.contains(
-      'inboxsdk__compose_groupedActionToolbar_visible'
-    )
-  ) {
-    simulateClick(groupedButton);
+  if (gmailComposeViewElement.classList.contains('inboxsdk__compose_groupedActionToolbar_visible')) {
+    (0, _simulateMouseEvent.simulateClick)(groupedButton);
   }
-}
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/ensure-grouping-is-open.js

@@ -1,29 +1,23 @@
-/* @flow */
+"use strict";
 
-import { simulateClick } from '../../../../lib/dom/simulate-mouse-event';
-
-export default function ensureGroupingIsOpen(
-  gmailComposeViewElement: HTMLElement,
-  type: string
-) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ensureGroupingIsOpen;
+var _simulateMouseEvent = require("../../../../lib/dom/simulate-mouse-event");
+function ensureGroupingIsOpen(gmailComposeViewElement, type) {
   if (type === 'SEND_ACTION') {
     return; //we don't currently group send_actions
   }
 
-  var groupedButton = gmailComposeViewElement.querySelector(
-    '.inboxsdk__compose_groupedActionButton'
-  );
+  var groupedButton = gmailComposeViewElement.querySelector('.inboxsdk__compose_groupedActionButton');
   if (!groupedButton) {
     return; //no group button so we're good
   }
 
-  if (
-    gmailComposeViewElement.classList.contains(
-      'inboxsdk__compose_groupedActionToolbar_visible'
-    )
-  ) {
+  if (gmailComposeViewElement.classList.contains('inboxsdk__compose_groupedActionToolbar_visible')) {
     return; //we are already visible
   }
 
-  simulateClick(groupedButton);
-}
+  (0, _simulateMouseEvent.simulateClick)(groupedButton);
+}

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

@@ -1,19 +1,16 @@
-/* @flow */
+"use strict";
 
-import type GmailComposeView from '../gmail-compose-view';
-
-export default function (gmailComposeView: GmailComposeView) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+function _default(gmailComposeView) {
   gmailComposeView.getBodyElement().focus();
-
   const lastSelectionRange = gmailComposeView.getLastSelectionRange();
   const selection = document.getSelection();
   if (!selection) throw new Error();
-  if (
-    lastSelectionRange &&
-    selection.anchorNode === selection.focusNode &&
-    selection.anchorOffset === selection.focusOffset
-  ) {
+  if (lastSelectionRange && selection.anchorNode === selection.focusNode && selection.anchorOffset === selection.focusOffset) {
     selection.removeAllRanges();
     selection.addRange(lastSelectionRange);
   }
-}
+}

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

@@ -1,82 +1,62 @@
-/* @flow */
+"use strict";
 
-import find from 'lodash/find';
-import { simulateClick } from '../../../../lib/dom/simulate-mouse-event';
-import type GmailDriver from '../../gmail-driver';
-import type GmailComposeView from '../../views/gmail-compose-view';
-
-export function getFromContact(
-  driver: GmailDriver,
-  gmailComposeView: GmailComposeView
-): Contact {
-  const nameInput: ?HTMLInputElement = (gmailComposeView
-    .getElement()
-    .querySelector('input[name="from"]'): any);
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFromContact = getFromContact;
+exports.getFromContactChoices = getFromContactChoices;
+exports.setFromEmail = setFromEmail;
+var _find = _interopRequireDefault(require("lodash/find"));
+var _simulateMouseEvent = require("../../../../lib/dom/simulate-mouse-event");
+function getFromContact(driver, gmailComposeView) {
+  const nameInput = gmailComposeView.getElement().querySelector('input[name="from"]');
   const emailAddress = nameInput ? nameInput.value : null;
   if (!emailAddress) {
     return driver.getUserContact();
   }
   const fromContactChoices = getFromContactChoices(driver, gmailComposeView);
-  const matchingContact: ?Contact = find(
-    fromContactChoices,
-    (contact) => contact.emailAddress === emailAddress
-  );
+  const matchingContact = (0, _find.default)(fromContactChoices, contact => contact.emailAddress === emailAddress);
   let name;
   if (!matchingContact) {
     name = emailAddress;
     driver.getLogger().error(new Error('getFromContact failed to find name'), {
-      fromContactChoicesLength: fromContactChoices.length,
+      fromContactChoicesLength: fromContactChoices.length
     });
   } else {
     name = matchingContact.name;
   }
-  return { emailAddress, name };
+  return {
+    emailAddress,
+    name
+  };
 }
-
-export function getFromContactChoices(
-  driver: GmailDriver,
-  gmailComposeView: GmailComposeView
-): Contact[] {
-  const choiceEls = gmailComposeView
-    .getElement()
-    .querySelectorAll(
-      'div.J-M.jQjAxd.J-M-awS[role=menu] > div.SK.AX > div[value][role=menuitem]'
-    );
+function getFromContactChoices(driver, gmailComposeView) {
+  const choiceEls = gmailComposeView.getElement().querySelectorAll('div.J-M.jQjAxd.J-M-awS[role=menu] > div.SK.AX > div[value][role=menuitem]');
   if (choiceEls.length == 0) {
     // From field isn't present
     return [driver.getUserContact()];
   }
-  return Array.from(choiceEls).map((item) => ({
+  return Array.from(choiceEls).map(item => ({
     emailAddress: item.getAttribute('value') || '',
-    name: item.textContent.replace(/<.*/, '').trim(),
+    name: item.textContent.replace(/<.*/, '').trim()
   }));
 }
-
-export function setFromEmail(
-  driver: GmailDriver,
-  gmailComposeView: GmailComposeView,
-  email: string
-) {
+function setFromEmail(driver, gmailComposeView, email) {
   let currentFromAddress = gmailComposeView.getFromContact().emailAddress;
   if (currentFromAddress === email) {
     return;
   }
-
-  const choiceParent = gmailComposeView
-    .getElement()
-    .querySelector('div.J-M.jQjAxd.J-M-awS[role=menu] > div.SK.AX');
+  const choiceParent = gmailComposeView.getElement().querySelector('div.J-M.jQjAxd.J-M-awS[role=menu] > div.SK.AX');
   if (!choiceParent) {
     if (driver.getUserContact().emailAddress != email) {
       throw new Error('Chosen email from choice was not found');
     }
     return;
   }
-  const chosenChoice = find(
-    choiceParent.children,
-    (item) => item.getAttribute('value') == email
-  );
+  const chosenChoice = (0, _find.default)(choiceParent.children, item => item.getAttribute('value') == email);
   if (!chosenChoice) {
     throw new Error('Chosen email from choice was not found');
   }
-  simulateClick(chosenChoice);
-}
+  (0, _simulateMouseEvent.simulateClick)(chosenChoice);
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/get-additional-action-toolbar.js

@@ -1,30 +1,22 @@
-/* @flow */
-
-import type GmailComposeView from '../gmail-compose-view';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getAdditionalActionToolbar;
 const composeViewActionToolbars = new WeakMap();
-
-export default function getAdditionalActionToolbar(
-  gmailComposeView: GmailComposeView
-) {
-  var groupedActionToolbar = gmailComposeView
-    .getElement()
-    .querySelector('.inboxsdk__compose_groupedActionToolbar > div');
+function getAdditionalActionToolbar(gmailComposeView) {
+  var groupedActionToolbar = gmailComposeView.getElement().querySelector('.inboxsdk__compose_groupedActionToolbar > div');
   if (groupedActionToolbar) {
     return groupedActionToolbar;
   }
-
-  let actionToolbar = gmailComposeView
-    .getElement()
-    .querySelector('.inboxsdk__compose_actionToolbar > div');
+  let actionToolbar = gmailComposeView.getElement().querySelector('.inboxsdk__compose_actionToolbar > div');
   if (actionToolbar) {
     return actionToolbar;
   }
-
   actionToolbar = composeViewActionToolbars.get(gmailComposeView);
   if (!actionToolbar) {
-    const _actionToolbar = (actionToolbar =
-      _addActionToolbar(gmailComposeView));
+    const _actionToolbar = actionToolbar = _addActionToolbar(gmailComposeView);
     gmailComposeView.getStopper().onValue(() => {
       _actionToolbar.remove();
     });
@@ -32,20 +24,17 @@ export default function getAdditionalActionToolbar(
   }
   return actionToolbar;
 }
-
-function _addActionToolbar(gmailComposeView: GmailComposeView) {
+function _addActionToolbar(gmailComposeView) {
   const td = document.createElement('td');
   td.setAttribute('class', 'inboxsdk__compose_actionToolbar gU');
   const formattingArea = gmailComposeView.getFormattingArea();
   if (!formattingArea) throw new Error('formatting area missing');
   formattingArea.insertAdjacentElement('beforebegin', td);
-
   let parent = td.parentElement;
   while (parent) {
     if (parent.tagName === 'TABLE') break;
     parent = parent.parentElement;
   }
-
   if (parent) {
     const col = parent.querySelector('colgroup col');
     if (col) {
@@ -59,9 +48,7 @@ function _addActionToolbar(gmailComposeView: GmailComposeView) {
       col.insertAdjacentElement('afterend', newCol1);
     }
   }
-
   var toolbarDiv = document.createElement('div');
   td.appendChild(toolbarDiv);
-
   return toolbarDiv;
-}
+}