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

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-row-list-view.js

@@ -1,69 +1,46 @@
-/* @flow */
-
-import { defn } from 'ud';
-import find from 'lodash/find';
-import zip from 'lodash/zip';
-import asap from 'asap';
-import assert from 'assert';
-import Kefir from 'kefir';
-import kefirBus from 'kefir-bus';
-import type { Bus } from 'kefir-bus';
-import get from '../../../../common/get-or-fail';
-import delayAsap from '../../../lib/delay-asap';
-import querySelector from '../../../lib/dom/querySelectorOrFail';
-
-import GmailToolbarView from './gmail-toolbar-view';
-import GmailThreadRowView from './gmail-thread-row-view';
-
-import streamWaitFor from '../../../lib/stream-wait-for';
-import type { ElementWithLifetime } from '../../../lib/dom/make-element-child-stream';
-import makeElementChildStream from '../../../lib/dom/make-element-child-stream';
-import makeElementViewStream from '../../../lib/dom/make-element-view-stream';
-
-import type GmailDriver from '../gmail-driver';
-import type GmailRouteView from './gmail-route-view/gmail-route-view';
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ud = require("ud");
+var _find = _interopRequireDefault(require("lodash/find"));
+var _zip = _interopRequireDefault(require("lodash/zip"));
+var _asap = _interopRequireDefault(require("asap"));
+var _assert = _interopRequireDefault(require("assert"));
+var _kefir = _interopRequireDefault(require("kefir"));
+var _kefirBus = _interopRequireDefault(require("kefir-bus"));
+var _getOrFail = _interopRequireDefault(require("../../../../common/get-or-fail"));
+var _delayAsap = _interopRequireDefault(require("../../../lib/delay-asap"));
+var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
+var _gmailToolbarView = _interopRequireDefault(require("./gmail-toolbar-view"));
+var _gmailThreadRowView = _interopRequireDefault(require("./gmail-thread-row-view"));
+var _streamWaitFor = _interopRequireDefault(require("../../../lib/stream-wait-for"));
+var _makeElementChildStream = _interopRequireDefault(require("../../../lib/dom/make-element-child-stream"));
+var _makeElementViewStream = _interopRequireDefault(require("../../../lib/dom/make-element-view-stream"));
 const THREAD_ROW_SELECTED_CLASSNAME = 'x7';
 const THREAD_ROW_SELECTED_CLASSNAME_REGEX = /\bx7\b/;
-
 class GmailRowListView {
-  _element: HTMLElement;
-  _gmailDriver: GmailDriver;
-  _routeViewDriver: GmailRouteView;
-  _pendingExpansions: Map<string, number>;
-  _pendingExpansionsSignal: Bus<any>;
-  _toolbarView: ?GmailToolbarView;
-  _threadRowViewDrivers: Set<GmailThreadRowView> = new Set();
-  _eventStreamBus: Bus<any>;
-  _rowViewDriverStream: Kefir.Observable<GmailThreadRowView>;
-  _stopper: Kefir.Observable<any>;
-  _elementsToViews: Map<HTMLElement, GmailThreadRowView> = new Map();
-  _selectionMutationObserver: MutationObserver;
-  _selectedThreadRowViews: Set<GmailThreadRowView> = new Set();
-
-  constructor(
-    rootElement: HTMLElement,
-    routeViewDriver: GmailRouteView,
-    gmailDriver: GmailDriver
-  ) {
-    this._eventStreamBus = kefirBus();
+  constructor(rootElement, routeViewDriver, gmailDriver) {
+    (0, _defineProperty2.default)(this, "_threadRowViewDrivers", new Set());
+    (0, _defineProperty2.default)(this, "_elementsToViews", new Map());
+    (0, _defineProperty2.default)(this, "_selectedThreadRowViews", new Set());
+    (0, _defineProperty2.default)(this, "_batchedSignalThreadRowViewSelectionChangeScheduled", false);
+    this._eventStreamBus = (0, _kefirBus.default)();
     this._stopper = this._eventStreamBus.ignoreValues().beforeEnd(() => null);
     this._gmailDriver = gmailDriver;
-
     this._element = rootElement;
     this._routeViewDriver = routeViewDriver;
-
-    this._selectionMutationObserver = new MutationObserver((mutations) => {
+    this._selectionMutationObserver = new MutationObserver(mutations => {
       let changed = false;
       for (let i = 0, len = mutations.length; i < len; i++) {
         const mutation = mutations[i];
-        const target: any = mutation.target;
-        const wasSelected = THREAD_ROW_SELECTED_CLASSNAME_REGEX.test(
-          (mutation: any).oldValue
-        );
-        const isSelected = THREAD_ROW_SELECTED_CLASSNAME_REGEX.test(
-          target.className
-        );
+        const target = mutation.target;
+        const wasSelected = THREAD_ROW_SELECTED_CLASSNAME_REGEX.test(mutation.oldValue);
+        const isSelected = THREAD_ROW_SELECTED_CLASSNAME_REGEX.test(target.className);
         if (wasSelected !== isSelected) {
           const view = this._elementsToViews.get(target);
           // we could be processing an element that was already removed
@@ -81,22 +58,15 @@ class GmailRowListView {
         this._gmailDriver.signalThreadRowViewSelectionChange();
       }
     });
-
     this._pendingExpansions = new Map();
-    this._pendingExpansionsSignal = kefirBus();
-    this._pendingExpansionsSignal
-      .bufferBy(this._pendingExpansionsSignal.flatMap(delayAsap))
-      .filter((x) => x.length > 0)
-      .takeUntilBy(this._stopper)
-      .onValue(this._expandColumnJob.bind(this));
-
+    this._pendingExpansionsSignal = (0, _kefirBus.default)();
+    this._pendingExpansionsSignal.bufferBy(this._pendingExpansionsSignal.flatMap(_delayAsap.default)).filter(x => x.length > 0).takeUntilBy(this._stopper).onValue(this._expandColumnJob.bind(this));
     this._setupToolbarView();
     this._startWatchingForRowViews();
   }
-
   destroy() {
     this._selectionMutationObserver.disconnect();
-    this._threadRowViewDrivers.forEach((threadRow) => threadRow.destroy());
+    this._threadRowViewDrivers.forEach(threadRow => threadRow.destroy());
     this._eventStreamBus.end();
     if (this._toolbarView) {
       this._toolbarView.destroy();
@@ -106,204 +76,144 @@ class GmailRowListView {
       this._gmailDriver.signalThreadRowViewSelectionChange();
     }
   }
-
-  getElement(): HTMLElement {
+  getElement() {
     return this._element;
   }
-
-  getRouteViewDriver(): GmailRouteView {
+  getRouteViewDriver() {
     return this._routeViewDriver;
   }
-
-  getToolbarView(): ?GmailToolbarView {
+  getToolbarView() {
     return this._toolbarView;
   }
-
-  getSelectedThreadRowViewDrivers(): Set<GmailThreadRowView> {
+  getSelectedThreadRowViewDrivers() {
     return this._selectedThreadRowViews;
   }
-
-  getThreadRowViewDrivers(): Set<GmailThreadRowView> {
+  getThreadRowViewDrivers() {
     return this._threadRowViewDrivers;
   }
-
-  getRowViewDriverStream(): Kefir.Observable<GmailThreadRowView> {
+  getRowViewDriverStream() {
     return this._rowViewDriverStream;
   }
-
-  getEventStream(): Kefir.Observable<any> {
+  getEventStream() {
     return this._eventStreamBus;
   }
-
   _setupToolbarView() {
     var toolbarElement = this._findToolbarElement();
-
     if (toolbarElement) {
-      this._toolbarView = new GmailToolbarView(
-        toolbarElement,
-        this._gmailDriver,
-        this._routeViewDriver,
-        this
-      );
+      this._toolbarView = new _gmailToolbarView.default(toolbarElement, this._gmailDriver, this._routeViewDriver, this);
     } else {
       this._toolbarView = null;
     }
   }
-
   _findToolbarElement() {
     /* multiple inbox extra section */
     const firstTry = this._element.querySelector('[gh=mtb]');
     if (firstTry) {
       return firstTry;
     }
-    const el = find(
-      document.querySelectorAll('[gh=tm]'),
-      (toolbarContainerElement) =>
-        toolbarContainerElement.parentElement.parentElement ===
-          (this._element: any).parentElement.parentElement.parentElement
-            .parentElement.parentElement ||
-        toolbarContainerElement.parentElement.parentElement ===
-          this._element.parentElement
-    );
+    const el = (0, _find.default)(document.querySelectorAll('[gh=tm]'), toolbarContainerElement => toolbarContainerElement.parentElement.parentElement === this._element.parentElement.parentElement.parentElement.parentElement.parentElement || toolbarContainerElement.parentElement.parentElement === this._element.parentElement);
     return el ? el.querySelector('[gh=mtb]') : null;
   }
 
   // When a new table is added to a row list, if an existing table has had its
   // column widths modified (by GmailThreadRowView), then the new table needs to
   // match.
-  _fixColumnWidths(newTableParent: ?HTMLElement) {
+  _fixColumnWidths(newTableParent) {
     if (!newTableParent || !newTableParent.parentElement) {
       return;
     }
-
     const firstTableParent = newTableParent.parentElement.firstElementChild;
     if (firstTableParent !== newTableParent && firstTableParent) {
-      const firstCols = firstTableParent.querySelectorAll(
-        'table.cf > colgroup > col'
-      );
-      const newCols = newTableParent.querySelectorAll(
-        'table.cf > colgroup > col'
-      );
-      assert.strictEqual(firstCols.length, newCols.length);
-      zip(firstCols, newCols).forEach(([firstCol, newCol]) => {
+      const firstCols = firstTableParent.querySelectorAll('table.cf > colgroup > col');
+      const newCols = newTableParent.querySelectorAll('table.cf > colgroup > col');
+      _assert.default.strictEqual(firstCols.length, newCols.length);
+      (0, _zip.default)(firstCols, newCols).forEach(_ref => {
+        let [firstCol, newCol] = _ref;
         newCol.style.width = firstCol.style.width;
       });
     }
   }
-
-  expandColumn(colSelector: string, width: number) {
+  expandColumn(colSelector, width) {
     const pendingWidth = this._pendingExpansions.get(colSelector);
     if (!pendingWidth || width > pendingWidth) {
       this._pendingExpansions.set(colSelector, width);
       this._pendingExpansionsSignal.emit();
     }
   }
-
   _expandColumnJob() {
     this._pendingExpansions.forEach((width, colSelector) => {
-      Array.prototype.forEach.call(
-        this._element.querySelectorAll('table.cf > colgroup > ' + colSelector),
-        (col) => {
-          const currentWidth = parseInt(col.style.width, 10);
-          if (isNaN(currentWidth) || currentWidth < width) {
-            col.style.width = width + 'px';
-          }
+      Array.prototype.forEach.call(this._element.querySelectorAll('table.cf > colgroup > ' + colSelector), col => {
+        const currentWidth = parseInt(col.style.width, 10);
+        if (isNaN(currentWidth) || currentWidth < width) {
+          col.style.width = width + 'px';
         }
-      );
+      });
     });
     this._pendingExpansions.clear();
   }
-
-  _batchedSignalThreadRowViewSelectionChangeScheduled = false;
   _batchedSignalThreadRowViewSelectionChange() {
     if (this._batchedSignalThreadRowViewSelectionChangeScheduled) {
       return;
     }
     this._batchedSignalThreadRowViewSelectionChangeScheduled = true;
-    delayAsap(null)
-      .takeUntilBy(this._stopper)
-      .onValue(() => {
-        this._batchedSignalThreadRowViewSelectionChangeScheduled = false;
-        this._gmailDriver.signalThreadRowViewSelectionChange();
-      });
+    (0, _delayAsap.default)(null).takeUntilBy(this._stopper).onValue(() => {
+      this._batchedSignalThreadRowViewSelectionChangeScheduled = false;
+      this._gmailDriver.signalThreadRowViewSelectionChange();
+    });
   }
-
   _startWatchingForRowViews() {
-    const tableDivParents = Array.from(
-      this._element.querySelectorAll('div.Cp')
-    );
-
-    const elementStream: Kefir.Observable<ElementWithLifetime> = Kefir.merge(
-      tableDivParents.map(makeElementChildStream)
-    ).flatMap((event) => {
+    const tableDivParents = Array.from(this._element.querySelectorAll('div.Cp'));
+    const elementStream = _kefir.default.merge(tableDivParents.map(_makeElementChildStream.default)).flatMap(event => {
       this._fixColumnWidths(event.el);
-      const tbody = querySelector(event.el, 'table > tbody');
+      const tbody = (0, _querySelectorOrFail.default)(event.el, 'table > tbody');
 
       // In vertical preview pane mode, each thread row has three <tr>
       // elements. We just want to pass the first one (which has an id) to
       // GmailThreadRowView().
-      return makeElementChildStream(tbody)
-        .takeUntilBy(event.removalStream)
-        .filter((rowEvent) => rowEvent.el.id);
+      return (0, _makeElementChildStream.default)(tbody).takeUntilBy(event.removalStream).filter(rowEvent => rowEvent.el.id);
     });
-
-    const laterStream = Kefir.later(2);
-
-    this._rowViewDriverStream = elementStream
-      .map((event) => {
-        const element = event.el;
-        this._selectionMutationObserver.observe(element, {
-          attributes: true,
-          attributeFilter: ['class'],
-          attributeOldValue: true,
-        });
-
-        const view = new GmailThreadRowView(element, this, this._gmailDriver);
-        this._elementsToViews.set(element, view);
-        if (element.classList.contains(THREAD_ROW_SELECTED_CLASSNAME)) {
-          this._selectedThreadRowViews.add(view);
+    const laterStream = _kefir.default.later(2);
+    this._rowViewDriverStream = elementStream.map(event => {
+      const element = event.el;
+      this._selectionMutationObserver.observe(element, {
+        attributes: true,
+        attributeFilter: ['class'],
+        attributeOldValue: true
+      });
+      const view = new _gmailThreadRowView.default(element, this, this._gmailDriver);
+      this._elementsToViews.set(element, view);
+      if (element.classList.contains(THREAD_ROW_SELECTED_CLASSNAME)) {
+        this._selectedThreadRowViews.add(view);
+        this._batchedSignalThreadRowViewSelectionChange();
+      }
+      event.removalStream.take(1).onValue(() => {
+        if (this._selectedThreadRowViews.has(view)) {
+          this._selectedThreadRowViews.delete(view);
           this._batchedSignalThreadRowViewSelectionChange();
         }
-        event.removalStream.take(1).onValue(() => {
-          if (this._selectedThreadRowViews.has(view)) {
-            this._selectedThreadRowViews.delete(view);
-            this._batchedSignalThreadRowViewSelectionChange();
-          }
-          this._elementsToViews.delete(element);
-          view.destroy();
-        });
-        return view;
-      })
-      .flatMap((threadRowView) => {
-        if (threadRowView.getAlreadyHadModifications()) {
-          // Performance hack: If the row already has old modifications on it, wait
-          // a moment before we re-emit the thread row and process our new
-          // modifications.
-
-          return laterStream
-            .flatMap(() => threadRowView.waitForReady())
-            .takeUntilBy(threadRowView.getStopper());
-        } else {
-          return threadRowView
-            .waitForReady()
-            .takeUntilBy(threadRowView.getStopper());
-        }
-      })
-      .takeUntilBy(this._stopper);
-
-    this._rowViewDriverStream.onValue((x) => this._addThreadRowView(x));
+        this._elementsToViews.delete(element);
+        view.destroy();
+      });
+      return view;
+    }).flatMap(threadRowView => {
+      if (threadRowView.getAlreadyHadModifications()) {
+        // Performance hack: If the row already has old modifications on it, wait
+        // a moment before we re-emit the thread row and process our new
+        // modifications.
+
+        return laterStream.flatMap(() => threadRowView.waitForReady()).takeUntilBy(threadRowView.getStopper());
+      } else {
+        return threadRowView.waitForReady().takeUntilBy(threadRowView.getStopper());
+      }
+    }).takeUntilBy(this._stopper);
+    this._rowViewDriverStream.onValue(x => this._addThreadRowView(x));
   }
-
-  _addThreadRowView(gmailThreadRowView: GmailThreadRowView) {
+  _addThreadRowView(gmailThreadRowView) {
     this._threadRowViewDrivers.add(gmailThreadRowView);
-
-    gmailThreadRowView
-      .getStopper()
-      .takeUntilBy(this._stopper)
-      .onValue(() => {
-        this._threadRowViewDrivers.delete(gmailThreadRowView);
-      });
+    gmailThreadRowView.getStopper().takeUntilBy(this._stopper).onValue(() => {
+      this._threadRowViewDrivers.delete(gmailThreadRowView);
+    });
   }
 }
-
-export default defn(module, GmailRowListView);
+var _default = (0, _ud.defn)(module, GmailRowListView);
+exports.default = _default;

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

@@ -0,0 +1,84 @@
+import kefirStopper from 'kefir-stopper';
+export default class GmailSupportItemView {
+    _stopper = kefirStopper();
+    _driver;
+    _insertElementContainer = null;
+    constructor(driver, supportItemDescriptor) {
+        this._driver = driver;
+        this._setup(supportItemDescriptor);
+    }
+    destroy() {
+        this._stopper.destroy();
+        if (this._insertElementContainer) {
+            this._insertElementContainer.remove();
+            this._insertElementContainer = null;
+        }
+    }
+    _setup(supportItemDescriptor) {
+        const supportMenuNodes = this._driver
+            .getTagTree()
+            .getAllByTag('supportMenu');
+        const subscription = supportMenuNodes.subscribe((changes) => {
+            changes.forEach((change) => {
+                if (change.type === 'add') {
+                    this._addSupportElement(change.value.getValue(), supportItemDescriptor);
+                }
+                else if (change.type === 'remove') {
+                    if (this._insertElementContainer) {
+                        this._insertElementContainer.remove();
+                        this._insertElementContainer = null;
+                    }
+                }
+            });
+        });
+        this._stopper.onValue(() => subscription.unsubscribe());
+    }
+    _addSupportElement(supportElement, supportItemDescriptor) {
+        const insertElementContainer = document.createElement('div');
+        const menuItemAttributes = supportElement.children.item(0).attributes;
+        for (const attribute of menuItemAttributes) {
+            if (attribute.name === 'aria-label') {
+                continue;
+            }
+            if (attribute.name === 'class') {
+                const classes = `${attribute.value} inboxsdk__support_menuItem`;
+                insertElementContainer.setAttribute(attribute.name, classes);
+                continue;
+            }
+            insertElementContainer.setAttribute(attribute.name, attribute.value);
+        }
+        // Append to-be-inserted element
+        insertElementContainer.append(supportItemDescriptor.element);
+        // Adjust insert position to always be the last one before separator
+        let lastSeparatorItem = null;
+        for (const item of supportElement.children) {
+            if (item.getAttribute('role') === 'separator') {
+                lastSeparatorItem = item;
+            }
+        }
+        if (lastSeparatorItem) {
+            lastSeparatorItem.insertAdjacentElement('beforebegin', insertElementContainer);
+        }
+        else {
+            supportElement.append(insertElementContainer);
+        }
+        insertElementContainer.onclick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            supportItemDescriptor.onClick();
+            this._closeSupportMenu(supportElement);
+        };
+        insertElementContainer.onkeypress = (event) => {
+            if (event.key === 'Enter') {
+                supportItemDescriptor.onClick();
+                this._closeSupportMenu(supportElement);
+            }
+        };
+    }
+    _closeSupportMenu(supportElement) {
+        if (supportElement.getAttribute('aria-hidden') != 'true') {
+            const button = supportElement.previousElementSibling;
+            button && button.click();
+        }
+    }
+}