@inboxsdk/core 0.2.27 → 0.2.28-alpha.1

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/register-search-suggestions-provider.js

@@ -0,0 +1,207 @@
+/* @flow */
+
+import once from 'lodash/once';
+import find from 'lodash/find';
+import Kefir from 'kefir';
+import fromEventTargetCapture from '../../../lib/from-event-target-capture';
+import { simulateClick } from '../../../lib/dom/simulate-mouse-event';
+import makeElementChildStream from '../../../lib/dom/make-element-child-stream';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import gmailElementGetter from '../gmail-element-getter';
+import copyAndValidateAutocompleteResults from '../../../lib/copyAndValidateAutocompleteResults';
+
+import type GmailDriver from '../gmail-driver';
+import type {
+  AutocompleteSearchResult,
+  AutocompleteSearchResultWithId,
+} from '../../../../injected-js/gmail/modify-suggestions';
+
+export default function registerSearchSuggestionsProvider(
+  driver: GmailDriver,
+  handler: Function
+) {
+  // We inject the app-provided suggestions into Gmail's AJAX response. Then we
+  // watch the DOM for our injected suggestions to show up and attach click and
+  // enter handlers to them to let them do custom actions.
+
+  const providerId =
+    'inboxsdk__suggestions_' +
+    ('' + Date.now() + Math.random()).replace(/\D+/g, '');
+  const pageCommunicator = driver.getPageCommunicator();
+  pageCommunicator.registerSuggestionsModifier(providerId);
+
+  // Listen for the AJAX requests, call the application's handler function, and
+  // give the application's suggestions back to the pageCommunicator for it to
+  // inject into the AJAX responses.
+  const suggestionsStream = pageCommunicator.ajaxInterceptStream
+    .filter((event) => event.type === 'suggestionsRequest')
+    .flatMapLatest(({ query }) =>
+      Kefir.fromPromise(Promise.resolve(handler(query)))
+        .flatMap((results: Array<AutocompleteSearchResult>) => {
+          try {
+            const validatedResults = copyAndValidateAutocompleteResults(
+              driver,
+              results
+            );
+
+            const validatedResultsWithIds = validatedResults.map((result) => ({
+              ...result,
+              providerId,
+              id: `${Date.now()}-${Math.random()}`,
+            }));
+
+            return Kefir.constant(validatedResultsWithIds);
+          } catch (e) {
+            return Kefir.constantError(e);
+          }
+        })
+        .mapErrors((err) => {
+          driver.getLogger().error(err);
+          return [];
+        })
+        .map((suggestions) => {
+          return { query, suggestions };
+        })
+    )
+    .onValue((event) => {
+      pageCommunicator.provideAutocompleteSuggestions(
+        providerId,
+        event.query,
+        event.suggestions
+      );
+    })
+    .map((event) => event.suggestions);
+
+  // Wait for the first routeViewDriver to happen before looking for the search box.
+  const searchBoxStream: Kefir.Observable<HTMLInputElement> = driver
+    .getRouteViewDriverStream()
+    .toProperty(() => null)
+    .map(() => gmailElementGetter.getSearchInput())
+    .filter(Boolean)
+    .take(1);
+
+  // Wait for the search box to be focused before looking for the suggestions box.
+  const suggestionsBoxTbodyStream: Kefir.Observable<HTMLElement> =
+    searchBoxStream
+      .flatMapLatest((searchBox) => Kefir.fromEvents(searchBox, 'focus'))
+      .map(() => gmailElementGetter.getSearchSuggestionsBoxParent())
+      .filter(Boolean)
+      .flatMapLatest(makeElementChildStream)
+      .map((x) => (x.el: any).firstElementChild)
+      .take(1)
+      .toProperty();
+
+  // This stream emits an event after every time Gmail changes the suggestions
+  // list.
+  const suggestionsBoxGmailChanges = suggestionsBoxTbodyStream
+    .flatMap((suggestionsBoxTbody) =>
+      makeMutationObserverChunkedStream(suggestionsBoxTbody, {
+        childList: true,
+      }).toProperty(() => null)
+    )
+    .map(() => null);
+
+  // We listen to the event on the document node so that the event can be
+  // canceled before Gmail receives it.
+  const suggestionsBoxEnterPresses = searchBoxStream.flatMap((searchBox) =>
+    fromEventTargetCapture(document, 'keydown').filter(
+      (event) => event.keyCode == 13 && event.target === searchBox
+    )
+  );
+
+  // Stream of arrays of row elements belonging to this provider.
+  const providedRows: Kefir.Observable<HTMLElement[]> =
+    suggestionsBoxTbodyStream
+      .sampledBy(suggestionsBoxGmailChanges)
+      .map((suggestionsBoxTbody) =>
+        Array.from(suggestionsBoxTbody.children).filter(
+          (row) => row.getElementsByClassName(providerId).length > 0
+        )
+      );
+
+  providedRows.onValue((rows) => {
+    if (rows[0] && rows[0].previousElementSibling) {
+      const prevFirstChild = rows[0].previousElementSibling.firstElementChild;
+      if (prevFirstChild) {
+        prevFirstChild.classList.add('inboxsdk__suggestions_separator_before');
+      }
+      const firstChild = rows[0].firstElementChild;
+      if (firstChild) {
+        firstChild.classList.add('inboxsdk__suggestions_separator_after');
+      }
+    }
+  });
+
+  const rowSelectionEvents: Kefir.Observable<{
+    event: Object,
+    row: HTMLElement,
+  }> = providedRows.flatMapLatest((rows) =>
+    Kefir.merge(
+      rows.map((row) =>
+        Kefir.merge([
+          fromEventTargetCapture(row, 'click'),
+          suggestionsBoxEnterPresses.filter(() =>
+            row.classList.contains('gssb_i')
+          ),
+        ]).map((event) => ({ event, row }))
+      )
+    )
+  );
+
+  const activeSuggestionsStream: Kefir.Observable<
+    Array<AutocompleteSearchResultWithId>
+  > = Kefir.merge([
+    suggestionsStream,
+    searchBoxStream
+      .flatMapLatest((searchBox) => Kefir.fromEvents(searchBox, 'blur'))
+      .map(() => []),
+  ]).toProperty();
+
+  Kefir.combine(
+    [rowSelectionEvents, searchBoxStream],
+    [activeSuggestionsStream]
+  ).onValue((tuple: any) => {
+    const [{ event, row }, searchBox, suggestions] = (tuple: [
+      { event: Object, row: HTMLElement },
+      HTMLInputElement,
+      Array<AutocompleteSearchResultWithId>
+    ]);
+
+    const itemDataSpan = row.querySelector('span[data-inboxsdk-suggestion]');
+    const itemData = itemDataSpan
+      ? JSON.parse(
+          itemDataSpan.getAttribute('data-inboxsdk-suggestion') || 'null'
+        )
+      : null;
+
+    const clearSearch = once(() => {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      searchBox.blur();
+      searchBox.value = '';
+    });
+
+    if (itemData) {
+      const { id } = itemData;
+      const suggestion = find(suggestions, (s) => s.id === id);
+      if (!suggestion) {
+        // I can imagine this happening if Gmail caches old suggestions
+        // results. Unknown if it does that so let's log. If it does, then
+        // activeSuggestionsStream should be changed to have more than just
+        // the most recent suggestions.
+        driver.getLogger().error(new Error('Failed to find suggestion by id'));
+      }
+      if (suggestion && suggestion.onClick) {
+        clearSearch();
+        suggestion.onClick.call(null);
+      }
+    }
+    if (itemData && itemData.routeName) {
+      clearSearch();
+      driver.goto(itemData.routeName, itemData.routeParams);
+    } else if (itemData && itemData.externalURL) {
+      clearSearch();
+      window.open(itemData.externalURL);
+    }
+  });
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/setup-compose-view-driver-stream.js

@@ -0,0 +1,162 @@
+/* @flow */
+
+import Kefir from 'kefir';
+import udKefir from 'ud-kefir';
+import streamWaitFor from '../../../lib/stream-wait-for';
+
+import kefirMakeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import makeElementChildStream from '../../../lib/dom/make-element-child-stream';
+import elementViewMapper from '../../../lib/dom/element-view-mapper';
+import makeElementStreamMerger from '../../../lib/dom/make-element-stream-merger';
+import GmailElementGetter from '../gmail-element-getter';
+
+import GmailComposeView from '../views/gmail-compose-view';
+import type GmailMessageView from '../views/gmail-message-view';
+
+import Logger from '../../../lib/logger';
+import type GmailDriver from '../gmail-driver';
+
+var impStream = udKefir(module, imp);
+
+export default function setupComposeViewDriverStream(
+  gmailDriver: GmailDriver,
+  messageViewDriverStream: Kefir.Observable<GmailMessageView>,
+  xhrInterceptorStream: Kefir.Observable<Object>
+): Kefir.Observable<GmailComposeView> {
+  return impStream.flatMapLatest((imp) =>
+    imp(gmailDriver, messageViewDriverStream, xhrInterceptorStream)
+  );
+}
+
+function imp(
+  gmailDriver: GmailDriver,
+  messageViewDriverStream: Kefir.Observable<GmailMessageView>,
+  xhrInterceptorStream: Kefir.Observable<Object>
+): Kefir.Observable<GmailComposeView> {
+  return Kefir.fromPromise(GmailElementGetter.waitForGmailModeToSettle())
+    .flatMap(() => {
+      var elementStream;
+      var isStandalone = false;
+
+      if (GmailElementGetter.isStandaloneComposeWindow()) {
+        elementStream = _setupStandaloneComposeElementStream();
+        isStandalone = true;
+      } else if (GmailElementGetter.isStandaloneThreadWindow()) {
+        elementStream = Kefir.never();
+      } else {
+        elementStream = _setupStandardComposeElementStream();
+      }
+
+      return elementStream.map(
+        elementViewMapper(
+          (el) =>
+            new GmailComposeView(el, xhrInterceptorStream, gmailDriver, {
+              isStandalone,
+              isInlineReplyForm: false,
+            })
+        )
+      );
+    })
+    .merge(
+      messageViewDriverStream.flatMap((gmailMessageView) =>
+        gmailMessageView.getReplyElementStream().map(
+          elementViewMapper(
+            (el) =>
+              new GmailComposeView(el, xhrInterceptorStream, gmailDriver, {
+                isStandalone: false,
+                isInlineReplyForm: true,
+              })
+          )
+        )
+      )
+    )
+    .flatMap((composeViewDriver: any) => composeViewDriver.ready());
+}
+
+function _setupStandardComposeElementStream() {
+  return _waitForContainerAndMonitorChildrenStream(() =>
+    GmailElementGetter.getComposeWindowContainer()
+  )
+    .flatMap((composeGrandParent) => {
+      var composeParentEl = composeGrandParent.el.querySelector('div.AD');
+      if (composeParentEl) {
+        return makeElementChildStream(composeParentEl)
+          .takeUntilBy(composeGrandParent.removalStream)
+          .map(_informElement('composeFullscreenStateChanged'));
+      } else {
+        return Kefir.never();
+      }
+    })
+    .merge(
+      GmailElementGetter.getFullscreenComposeWindowContainerStream()
+        .flatMap(({ el, removalStream }) =>
+          makeElementChildStream(el).takeUntilBy(removalStream)
+        )
+        .map(_informElement('composeFullscreenStateChanged'))
+        .map(({ el, removalStream }) => {
+          // If you close a fullscreen compose while it's still saving, Gmail never
+          // removes it from the DOM, and instead only removes a specific child
+          // element. Ugh. Watch for its removal too.
+          const targetEl = el.querySelector('[role=dialog] div.aaZ');
+          if (!targetEl) return null;
+          var hiddenStream = kefirMakeMutationObserverChunkedStream(targetEl, {
+            childList: true,
+          })
+            .filter(() => targetEl.childElementCount === 0)
+            .map(() => null);
+          return {
+            el,
+            removalStream: removalStream.merge(hiddenStream).take(1),
+          };
+        })
+        .filter(Boolean)
+    )
+    .flatMap((event) => {
+      if (!event) throw new Error('Should not happen');
+      const el = event.el.querySelector('[role=dialog]');
+      if (!el || !el.querySelector('form')) {
+        return Kefir.never();
+      }
+      return Kefir.constant({
+        el,
+        removalStream: event.removalStream,
+      });
+    })
+    .flatMap(makeElementStreamMerger());
+}
+
+function _setupStandaloneComposeElementStream() {
+  return _waitForContainerAndMonitorChildrenStream(() =>
+    GmailElementGetter.StandaloneCompose.getComposeWindowContainer()
+  );
+}
+
+function _waitForContainerAndMonitorChildrenStream(
+  containerFn: () => ?HTMLElement
+) {
+  return Kefir.interval(2000) // TODO replace this with page-parser-tree
+    .map(containerFn)
+    .filter()
+    .take(1)
+    .flatMap((containerEl) => makeElementChildStream(containerEl));
+}
+
+function _informElement(eventName) {
+  return function (event) {
+    const composeEl =
+      event &&
+      event.el &&
+      event.el.querySelector &&
+      event.el.querySelector('[role=dialog]');
+    if (composeEl) {
+      composeEl.dispatchEvent(
+        new CustomEvent(eventName, {
+          bubbles: false,
+          cancelable: false,
+          detail: null,
+        })
+      );
+    }
+    return event;
+  };
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/setup-route-view-driver-stream.js

@@ -0,0 +1,194 @@
+/* @flow */
+
+import Kefir from 'kefir';
+import get from '../../../../common/get-or-fail';
+
+import type GmailDriver from '../gmail-driver';
+import type GmailRouteProcessor from '../views/gmail-route-view/gmail-route-processor';
+import GmailElementGetter from '../gmail-element-getter';
+import GmailRouteView from '../views/gmail-route-view/gmail-route-view';
+import getURLObject from './get-url-object';
+
+import routeIDmatchesHash from '../../../lib/routeIDmatchesHash';
+
+export default function setupRouteViewDriverStream(
+  gmailRouteProcessor: GmailRouteProcessor,
+  driver: GmailDriver
+): Kefir.Observable<GmailRouteView> {
+  const customRouteIDs = driver.getCustomRouteIDs();
+  const customListRouteIDs = driver.getCustomListRouteIDs();
+  const customListSearchStringsToRouteIds =
+    driver.getCustomListSearchStringsToRouteIds();
+
+  let lastNativeHash = getURLObject(document.location.href).hash;
+  let latestGmailRouteView = null;
+
+  driver.getStopper().onValue(() => {
+    if (latestGmailRouteView) {
+      latestGmailRouteView.destroy();
+    }
+  });
+
+  let lastHash = lastNativeHash;
+
+  let sameRouteData = {};
+
+  const eligibleHashChanges = Kefir.fromEvents(window, 'hashchange')
+    .filter((event) => !event.oldURL.match(/#inboxsdk-fake-no-vc$/))
+    .map((event) => ({
+      new: getURLObject(event.newURL),
+      old: getURLObject(event.oldURL),
+    }))
+    .filter((event) => event.new.hash !== event.old.hash)
+    .map((event) => event.new)
+    .map((urlObject) => {
+      const { hash, name } = urlObject;
+      for (let routeIDs of customRouteIDs) {
+        let routeID = routeIDmatchesHash(routeIDs, hash);
+        if (routeID) {
+          return { urlObject, type: 'CUSTOM', routeID };
+        }
+      }
+      for (let [routeIDs] of customListRouteIDs) {
+        let routeID = routeIDmatchesHash(routeIDs, name);
+        if (routeID) {
+          return { urlObject, type: 'CUSTOM_LIST_TRIGGER', routeID };
+        }
+      }
+      if (gmailRouteProcessor.isNativeRoute(urlObject.name)) {
+        return { urlObject, type: 'NATIVE' };
+      }
+      return { urlObject, type: 'OTHER_APP_CUSTOM' };
+    });
+
+  const customAndCustomListRouteHashChanges = eligibleHashChanges.filter(
+    ({ type }) => type !== 'NATIVE'
+  );
+
+  // If a user goes from a native route to a custom route, and then back to the
+  // same native route, we need to make a new GmailRouteView because
+  // getMainContentElementChangedStream() won't be firing, except when going from thread->custom->thread
+  const revertNativeHashChanges = eligibleHashChanges
+    .filter(({ type }) => type === 'NATIVE')
+    .filter(({ urlObject }) => {
+      const tmp = lastNativeHash;
+      lastNativeHash = urlObject.hash;
+      return tmp === urlObject.hash;
+    })
+    .filter(({ urlObject }) => {
+      return urlObject.hash !== lastHash;
+    });
+
+  // Merge everything that can trigger a new RouteView
+  return Kefir.merge([
+    customAndCustomListRouteHashChanges,
+    revertNativeHashChanges,
+
+    // when native gmail changes main view there's a div that takes on role=main.
+    // getMainContentElementChangedStream doesn't respect custom views so filter
+    // out events from it. This filter is needed if the user is already at a custom
+    // view of another InboxSDK instance while this starts up.
+    GmailElementGetter.getMainContentElementChangedStream()
+      .map((event) => ({
+        urlObject: getURLObject(document.location.href),
+        type: 'NATIVE',
+      }))
+      .filter((options) =>
+        gmailRouteProcessor.isNativeRoute(options.urlObject.name)
+      ),
+  ])
+    .map((options) => {
+      const { type, urlObject } = options;
+      if (type === 'NATIVE' && urlObject.name === 'search') {
+        const customListRouteId = customListSearchStringsToRouteIds.get(
+          urlObject.params[0]
+        );
+        if (customListRouteId) {
+          const searchInput = GmailElementGetter.getSearchInput();
+          if (!searchInput) throw new Error('Should not happen');
+          searchInput.value = '';
+
+          // Only rewrite the url if it's a search query with no further
+          // parameters or it has a page parameter. Don't write URLs with thread
+          // id parameters because currently other parts of the code depend on
+          // being able to parse the URL as a normal thread URL.
+
+          // Additionally, we don't want to treat threads as the CUSTOM_LIST type
+          // since they're not lists.
+          if (
+            urlObject.params.length === 1 ||
+            (urlObject.params.length === 2 && urlObject.params[1][0] === 'p')
+          ) {
+            driver.hashChangeNoViewChange(
+              '#' +
+                customListRouteId +
+                (urlObject.params[1] ? '/' + urlObject.params[1] : '')
+            );
+            return {
+              type: 'CUSTOM_LIST',
+              urlObject,
+              routeID: customListRouteId,
+            };
+          }
+        }
+      }
+      return options;
+    })
+    .map((options) => {
+      const MAX_KEY_CACHE = 50;
+      const { urlObject } = options;
+
+      if (!sameRouteData[urlObject.hash]) {
+        sameRouteData[urlObject.hash] = {
+          data: {},
+        };
+      }
+      sameRouteData[urlObject.hash].lastUsedTimestamp = Date.now();
+
+      if (Object.keys(sameRouteData).length > MAX_KEY_CACHE) {
+        sameRouteData = Object.keys(sameRouteData)
+          .sort(
+            (a, b) =>
+              sameRouteData[b].lastUsedTimestamp -
+              sameRouteData[a].lastUsedTimestamp
+          )
+          .slice(0, MAX_KEY_CACHE / 2)
+          .reduce((acc, hash) => ({ ...acc, [hash]: sameRouteData[hash] }), {});
+      }
+
+      return {
+        ...options,
+        cachedRouteData: sameRouteData[urlObject.hash].data,
+      };
+    })
+    .map((options) => {
+      if (options.type === 'NATIVE' || options.type === 'CUSTOM_LIST') {
+        driver.showNativeRouteView();
+      } else if (options.type === 'CUSTOM_LIST_TRIGGER') {
+        driver.showCustomThreadList(
+          options.routeID,
+          get(customListRouteIDs, options.routeID),
+          options.urlObject.params
+        );
+        return;
+      }
+      return new GmailRouteView(options, gmailRouteProcessor, driver);
+    })
+    .filter(Boolean)
+    .map((gmailRouteView) => {
+      if (latestGmailRouteView) {
+        latestGmailRouteView.destroy();
+      }
+      latestGmailRouteView = gmailRouteView;
+      lastHash = getURLObject(document.location.href).hash;
+
+      return gmailRouteView;
+    });
+}
+
+/*
+ * TODO: Split up "role=main" DOM watching and hash change watching.
+ *
+ * SDK only cares about hash change when the hash goes to a route that the app registered as custom.
+ * Otherwise it only responds to route changes when the role=main div changes.
+ */