@inboxsdk/core 0.2.28-alpha.0 → 0.2.28-alpha.2

package/src/platform-implementation-js/dom-driver/inbox/detection/searchBar/parser.js

@@ -0,0 +1,28 @@
+/* @flow */
+
+import ErrorCollector from '../../../../lib/ErrorCollector';
+import querySelectorOne from '../../../../lib/dom/querySelectorOne';
+
+export default function parser(el: HTMLElement) {
+  const collector = new ErrorCollector('searchBar');
+  const rect = el.getBoundingClientRect();
+
+  collector.run('position check', () => {
+    if (rect.top > 100) {
+      throw new Error('expected element to border top of screen');
+    }
+  });
+
+  const searchInput = collector.run('searchInput', () =>
+    querySelectorOne(el, 'div[role=search] input[role=combobox]')
+  );
+
+  return {
+    elements: { searchInput },
+    score: 1 - collector.errorCount() / collector.runCount(),
+    errors: collector.getErrorLogs(),
+  };
+}
+
+/*:: const x = parser(({}:any)); */
+export type Parsed = typeof x;

package/src/platform-implementation-js/dom-driver/inbox/detection/thread/parser.js

@@ -0,0 +1,60 @@
+/* @flow */
+
+import ErrorCollector from '../../../../lib/ErrorCollector';
+import querySelectorOne from '../../../../lib/dom/querySelectorOne';
+
+export default function parser(el: HTMLElement) {
+  const ec = new ErrorCollector('thread');
+
+  const inBundle = !el.hasAttribute('aria-multiselectable');
+
+  ec.run('tabindex', () => {
+    if (!el.hasAttribute('tabindex')) throw new Error('expected tabindex');
+  });
+
+  const inboxThreadId: ?string = ec.run('thread id', () => {
+    const m = /thread-[^:]+:[^:\d]*(\d+)/.exec(
+      el.getAttribute('data-item-id') || ''
+    );
+    if (!m) {
+      throw new Error('thread id regex failed');
+    }
+    return m[0];
+  });
+
+  const heading = ec.run('heading', () =>
+    el.querySelector('div[role=heading]')
+  );
+  const stickyHeading = !heading
+    ? null
+    : ec.run('stickyHeading', () => {
+        const el = heading.firstElementChild;
+        if (el instanceof HTMLDivElement) return el;
+        throw new Error('child missing');
+      });
+  const toolbar = !stickyHeading
+    ? null
+    : ec.run('toolbar', () => querySelectorOne(stickyHeading, 'ul'));
+
+  // This will be null for threads that are still loading.
+  const list = ec.run('list', () => el.querySelector('div[role=list]'));
+
+  const elements = {
+    heading,
+    stickyHeading,
+    toolbar,
+    list,
+  };
+  const score = 1 - ec.errorCount() / ec.runCount();
+  return {
+    elements,
+    attributes: {
+      inBundle,
+      inboxThreadId,
+    },
+    score,
+    errors: ec.getErrorLogs(),
+  };
+}
+
+export type Parsed = $ReturnType<typeof parser>;

package/src/platform-implementation-js/dom-driver/inbox/detection/thread-row/parser.js

@@ -0,0 +1,152 @@
+/* @flow */
+
+import ErrorCollector from '../../../../lib/ErrorCollector';
+import querySelectorOne from '../../../../lib/dom/querySelectorOne';
+
+const RGB_REGEX = /^rgb\s*\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)/;
+
+export default function parser(el: HTMLElement) {
+  const ec = new ErrorCollector('threadRow');
+
+  const inBundle = !el.hasAttribute('aria-multiselectable');
+
+  ec.run('tabindex', () => {
+    if (!el.hasAttribute('tabindex')) throw new Error('expected tabindex');
+  });
+
+  const subject = ec.run('subject', () =>
+    querySelectorOne(
+      el,
+      'div[jsaction][jslog] > div:not(:first-child):not(:last-child) > div > div[class]:not([style]):not(:first-child) > div:not(:first-child):not(:last-child) > div:not([style]):not(:first-child):not(:last-child):not([class*="inboxsdk"])'
+    )
+  );
+
+  const checkbox = ec.run('checkbox', () =>
+    querySelectorOne(
+      el,
+      'div[jsaction] > div > div[jsaction] > div[role=checkbox]'
+    )
+  );
+
+  const recipients = ec.run('recipients', () =>
+    el.querySelectorAll(
+      'div[jsaction] > div:not(:first-child):not(:last-child) > div > div > span[email]'
+    )
+  );
+
+  const isOnlyDraft = ec.run(
+    'isOnlyDraft',
+    () => !(recipients && recipients.length > 0)
+  );
+
+  const draftLabels = ec.run('draftLabels', () => {
+    const recipientCandidates = el.querySelectorAll(
+      'div[jsaction] > div:not(:first-child):not(:last-child) > div > div > span'
+    );
+
+    // We have to locate draft labels via text color because it's impossible
+    // to locate them with reliable CSS selectors
+    return Array.from(recipientCandidates).filter((candidate) => {
+      const colorString = getComputedStyle(candidate).getPropertyValue('color');
+      const colorMatch = RGB_REGEX.exec(colorString);
+      if (!colorMatch) throw new Error('Failed to read color string');
+
+      const r = +colorMatch[1],
+        g = +colorMatch[2],
+        b = +colorMatch[3];
+
+      return r > 200 && g < 100 && b < 100; // Draft labels are red
+    });
+  });
+
+  const recipientParent = ec.run('recipientParent', () => {
+    if (recipients && recipients.length > 0) return recipients[0].parentElement;
+
+    // There are no recipient elements with an email attr, which means this
+    // thread only has drafts. In order to find the recipient parent we need
+    // to work from a draft label upwards.
+    if (!(draftLabels && draftLabels.length > 0))
+      throw new Error('Could not locate draft labels');
+    return draftLabels[0].parentElement;
+  });
+
+  const inboxThreadId: ?string = ec.run('thread id', () => {
+    const m = /thread-[^:]+:[^:\d]*(\d+)/.exec(
+      el.getAttribute('data-item-id') || ''
+    );
+    if (!m) {
+      throw new Error('thread row id regex failed');
+    }
+    return m[0];
+  });
+
+  const messageCountParent = ec.run(
+    'messageCountParent',
+    () => recipientParent && recipientParent.nextElementSibling
+  );
+
+  const visibleMessageCount = ec.run('visibleMessageCount', () => {
+    const messageCountEl =
+      messageCountParent && messageCountParent.querySelector('span');
+    const match =
+      messageCountEl && /^\((\d+)\)$/.exec(messageCountEl.textContent);
+    if (!match) return 1;
+    return parseInt(match[1]);
+  });
+
+  const visibleDraftCount = ec.run('visibleDraftCount', () => {
+    if (isOnlyDraft && visibleMessageCount) return visibleMessageCount;
+
+    if (!draftLabels) throw new Error('Could not locate draft labels');
+    return draftLabels.length;
+  });
+
+  const contacts = ec.run('contacts', () => {
+    if (!recipients) return null;
+
+    return Array.from(recipients)
+      .map((recipientEl) => {
+        const emailAddress = recipientEl.getAttribute('email');
+        if (!emailAddress) return null;
+
+        return { name: null, emailAddress };
+      })
+      .filter(Boolean);
+  });
+
+  const labelParent = ec.run('labelParent', () =>
+    querySelectorOne(
+      el,
+      'div[jsaction][jslog] > div:not(:first-child):not(:last-child) > div > div[class]:not([style]):not(:first-child) > div:not(:first-child):not(:last-child)'
+    )
+  );
+
+  const toolbar = ec.run('toolbar', () =>
+    querySelectorOne(el, 'div[jsaction] div[jsaction] > ul[aria-label]')
+  );
+
+  const elements = {
+    subject,
+    checkbox,
+    labelParent,
+    toolbar,
+    recipientParent,
+    messageCountParent,
+  };
+  const score = 1 - ec.errorCount() / ec.runCount();
+  return {
+    elements,
+    attributes: {
+      isOnlyDraft,
+      inBundle,
+      inboxThreadId,
+      visibleMessageCount,
+      visibleDraftCount,
+      contacts,
+    },
+    score,
+    errors: ec.getErrorLogs(),
+  };
+}
+
+export type Parsed = $ReturnType<typeof parser>;

package/src/platform-implementation-js/dom-driver/inbox/getComposeViewDriverLiveSet.js

@@ -0,0 +1,121 @@
+/* @flow */
+
+import Kefir from 'kefir';
+import type { TagTree } from 'tag-tree';
+import LiveSet from 'live-set';
+import censorHTMLtree from '../../../common/censorHTMLtree';
+import InboxComposeView from './views/inbox-compose-view';
+import toItemWithLifetimeStream from '../../lib/toItemWithLifetimeStream';
+import makeElementStreamMerger from '../../lib/dom/make-element-stream-merger';
+import type InboxDriver from './inbox-driver';
+
+import parser from './detection/compose/parser';
+
+export default function getComposeViewDriverLiveSet(
+  driver: InboxDriver,
+  tree: TagTree<HTMLElement>
+): LiveSet<InboxComposeView> {
+  const denodeify = ({ el, removalStream }) => ({
+    el: el.getValue(),
+    removalStream,
+  });
+
+  const inlineCompose = toItemWithLifetimeStream(
+    tree.getAllByTag('inlineCompose')
+  ).map(denodeify);
+  const regularCompose = toItemWithLifetimeStream(
+    tree.getAllByTag('regularCompose')
+  ).map(denodeify);
+  const fullscreenCompose = toItemWithLifetimeStream(
+    tree.getAllByTag('fullscreenCompose')
+  ).map(denodeify);
+
+  const compose = Kefir.merge([
+    inlineCompose,
+    regularCompose.merge(fullscreenCompose).flatMap(makeElementStreamMerger()),
+  ]);
+
+  const composeViewDriverStream: Kefir.Observable<InboxComposeView> =
+    compose.map(({ el, removalStream }) => {
+      const parsed = parser(el);
+      if (parsed.errors.length) {
+        driver.getLogger().errorSite(new Error('parse errors (compose)'), {
+          score: parsed.score,
+          errors: parsed.errors,
+          html: censorHTMLtree(el),
+        });
+      }
+      const view = new InboxComposeView(driver, el, parsed);
+      removalStream.take(1).onValue(() => view.removedFromDOM());
+      return view;
+    });
+
+  return new LiveSet({
+    scheduler: tree.getAllByTag('inlineCompose').getScheduler(),
+    read() {
+      return new Set();
+    },
+    listen(setValues, controller) {
+      setValues(new Set());
+      const sub = composeViewDriverStream.observe({
+        value(composeViewDriver) {
+          controller.add(composeViewDriver);
+          composeViewDriver.getStopper().onValue(() => {
+            controller.remove(composeViewDriver);
+          });
+        },
+        error(err) {
+          // If we get here, it's probably because of a waitFor timeout caused by
+          // us failing to find the compose parent. Let's log the results of a few
+          // similar selectors to see if our selector was maybe slightly wrong.
+          function getStatus() {
+            return {
+              mainLength: document.querySelectorAll('[role=main]').length,
+              regularLength: document.querySelectorAll(
+                'body > div[id][jsaction] > div[id][class]:not([role]) > div[class] > div[id]'
+              ).length,
+              noJsActionLength: document.querySelectorAll(
+                'body > div[id] > div[id][class]:not([role]) > div[class] > div[id]'
+              ).length,
+              noNotLength: document.querySelectorAll(
+                'body > div[id][jsaction] > div[id][class] > div[class] > div[id]'
+              ).length,
+              noBodyDirectChildLength: document.querySelectorAll(
+                'body div[id][jsaction] > div[id][class]:not([role]) > div[class] > div[id]'
+              ).length,
+              noBodyLength: document.querySelectorAll(
+                'div[id][jsaction] > div[id][class]:not([role]) > div[class] > div[id]'
+              ).length,
+              // We can use class names for logging heuristics. Don't want to use
+              // them anywhere else.
+              classLength: document.querySelectorAll('div.ek div.md > div')
+                .length,
+              classEkLength: document.querySelectorAll('.ek').length,
+              classMdLength: document.querySelectorAll('.md').length,
+              composeHtml: Array.from(
+                document.querySelectorAll(
+                  'body > div[id][jsaction] > div[id][class]:not([role]) > div[class] > div[id], div.ek div.md > div'
+                )
+              ).map((el) => censorHTMLtree(el)),
+            };
+          }
+
+          const startStatus = getStatus();
+          const waitTime = 180 * 1000;
+          driver.getLogger().error(err, startStatus);
+          setTimeout(() => {
+            const laterStatus = getStatus();
+            driver.getLogger().eventSdkPassive('waitfor compose data', {
+              startStatus,
+              waitTime,
+              laterStatus,
+            });
+          }, waitTime);
+        },
+      });
+      return () => {
+        sub.unsubscribe();
+      };
+    },
+  });
+}

package/src/platform-implementation-js/dom-driver/inbox/getInboxMessageIdForInboxThreadId.js

@@ -0,0 +1,42 @@
+/* @flow */
+
+import { defn } from 'ud';
+import inboxAjax from '../../driver-common/inboxAjax';
+import getAccountUrlPart from '../../driver-common/getAccountUrlPart';
+import { extractMessageIdsFromThreadResponse } from './inboxResponseProcessor';
+
+import type InboxDriver from './inbox-driver';
+
+async function getInboxMessageIdForInboxThreadId(
+  driver: InboxDriver,
+  inboxThreadId: string
+): Promise<string> {
+  const { text } = await inboxAjax({
+    method: 'POST',
+    url: `https://inbox.google.com/sync${getAccountUrlPart()}/i/fd`,
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Framework-Xsrf-Token': await driver
+        .getPageCommunicator()
+        .getXsrfToken(),
+      'X-Gmail-BTAI': await driver.getPageCommunicator().getBtaiHeader(),
+      'X-Google-BTD': '1',
+    },
+    data: JSON.stringify({
+      '1': [
+        {
+          '1': inboxThreadId,
+          '3': [],
+        },
+      ],
+    }),
+  });
+
+  const [firstMessageId] = extractMessageIdsFromThreadResponse(text);
+  if (!firstMessageId)
+    throw new Error('Failed to find inbox message ID for thread');
+
+  return firstMessageId;
+}
+
+export default defn(module, getInboxMessageIdForInboxThreadId);

package/src/platform-implementation-js/dom-driver/inbox/getSidebarClassnames.js

@@ -0,0 +1,171 @@
+/* @flow */
+
+import difference from 'lodash/difference';
+import once from 'lodash/once';
+import flatMap from 'lodash/flatMap';
+import last from 'lodash/last';
+import t from 'transducers.js';
+import cssParser from 'postcss-selector-parser';
+import Logger from '../../lib/logger';
+import querySelector from '../../lib/dom/querySelectorOrFail';
+
+const cssProcessor = cssParser();
+
+// There are specific classnames which are added when the chat or nav sidebars
+// are open which affect the layout of the page. We need to be able to activate
+// that chat sidebar layout ourselves, and we don't want to hardcode this
+// classname because Inbox is prone to changing their classnames.
+
+// We also get the classname for the center list element which has margins
+// applied to it depending on the current page width and sidebar settings to
+// keep it lined up with the search bar.
+
+const getSidebarClassnames: () => {
+  chat: ?string,
+  nav: ?string,
+  centerList: ?string,
+} = once(() => {
+  // We know that the page has a CSS rule which looks like
+  //   .blah.chat .foo { margin-right: bigger number; margin-left: smaller number; }
+  // where .chat is the chat sidebar classname that we want to know, and .foo
+  // is one of the classnames that's on the [role=application] element.
+
+  // We could search the rules for this rule, but then we don't know which part
+  // of the selector string is the chat sidebar classname!
+
+  // There's also another similar rule for when only the nav sidebar is open:
+  //   .blah.nav .foo { margin-right: smaller number; margin-left: bigger number; }
+  // If we find both of thse rules, then we can find the classname which is
+  // mentioned in the chat sidebar rule which is not mentioned in the nav
+  // sidebar rule.
+
+  // So first we find all the classnames on the [role=application] and make a
+  // regex for each one.
+  const classRegexes: RegExp[] = Array.from(
+    (querySelector(document, '[role=application]').classList: any)
+  ).map((x) => new RegExp('\\.' + x + '\\b'));
+  if (classRegexes.length === 0) throw new Error('no class names on element');
+
+  // rules will contain both the chat and nav sidebar rules.
+  const rules = t.toArray(
+    Array.prototype.slice.call(document.styleSheets),
+    t.compose(
+      t.filter((sheet) => {
+        try {
+          return sheet.cssRules && sheet.cssRules.length;
+        } catch (err) {
+          // ignore. Sometimes pages have stylesheets that don't permit their
+          // rules to be enumerated. Possibly caused by other extensions including
+          // a css file from another domain?
+          return false;
+        }
+      }),
+      t.mapcat((sheet) => Array.prototype.slice.call(sheet.cssRules || [])),
+      t.mapcat(rulesToStyleRules),
+      // We have all page rules. Filter it down to just rules mentioning one of
+      // [role=application]'s classnames.
+      t.filter((rule) => classRegexes.some((r) => r.test(rule.selectorText))),
+      // Now just the rules that contain both margin-left and -right rules.
+      t.filter(
+        (rule) => rule.style['margin-left'] && rule.style['margin-right']
+      )
+    )
+  );
+
+  const onlyNavSidebarRule = t.toArray(
+    Array.prototype.slice.call(rules),
+    t.compose(
+      t.filter(
+        (rule) =>
+          parseFloat(rule.style['margin-left']) >
+          parseFloat(rule.style['margin-right'])
+      ),
+      t.take(1)
+    )
+  )[0];
+  const onlyChatSidebarRule = t.toArray(
+    Array.prototype.slice.call(rules),
+    t.compose(
+      t.filter(
+        (rule) =>
+          parseFloat(rule.style['margin-left']) <
+          parseFloat(rule.style['margin-right'])
+      ),
+      t.take(1)
+    )
+  )[0];
+  if (!onlyNavSidebarRule || !onlyChatSidebarRule) {
+    const err = new Error('Failed to parse element CSS rules');
+    Logger.error(err, {
+      rulesCount: rules.length,
+      hasOnlyNavSidebarRule: !!onlyNavSidebarRule,
+      hasOnlyChatSidebarRule: !!onlyChatSidebarRule,
+    });
+    throw err;
+  }
+
+  function getMentionedClassNames(node): string[] {
+    switch (node.type) {
+      case 'root':
+      case 'selector':
+        return flatMap(node.nodes, getMentionedClassNames);
+      case 'class':
+        return [node.value];
+      default:
+        return [];
+    }
+  }
+
+  const onlyNavSidebarRuleClassNames: string[] = getMentionedClassNames(
+    cssProcessor.process(onlyNavSidebarRule.selectorText).res
+  );
+  const onlyChatSidebarRuleClassNames: string[] = getMentionedClassNames(
+    cssProcessor.process(onlyChatSidebarRule.selectorText).res
+  );
+
+  const chatSidebarClassNames: string[] = difference(
+    onlyChatSidebarRuleClassNames,
+    onlyNavSidebarRuleClassNames
+  );
+
+  const navSidebarClassNames: string[] = difference(
+    onlyNavSidebarRuleClassNames,
+    onlyChatSidebarRuleClassNames
+  );
+
+  const centerListClassName: ?string =
+    last(onlyNavSidebarRuleClassNames) === last(onlyChatSidebarRuleClassNames)
+      ? last(onlyNavSidebarRuleClassNames)
+      : null;
+
+  if (
+    chatSidebarClassNames.length !== 1 ||
+    navSidebarClassNames.length !== 1 ||
+    !centerListClassName
+  ) {
+    Logger.error(new Error('Failed to find sidebar classnames'), {
+      onlyNavSidebarRuleClassNames,
+      onlyChatSidebarRuleClassNames,
+      chatSidebarClassNames,
+      navSidebarClassNames,
+      centerListClassName,
+    });
+  }
+
+  return {
+    chat: chatSidebarClassNames[0],
+    nav: navSidebarClassNames[0],
+    centerList: centerListClassName,
+  };
+});
+
+export default getSidebarClassnames;
+
+function rulesToStyleRules(rule: CSSRule): Object[] {
+  if (rule instanceof window.CSSMediaRule) {
+    return flatMap(rule.cssRules, rulesToStyleRules);
+  } else if (rule instanceof window.CSSStyleRule) {
+    return [rule];
+  }
+  return [];
+}

package/src/platform-implementation-js/dom-driver/inbox/getSidebarClassnames.test.js

@@ -0,0 +1,74 @@
+/* @flow */
+
+import getSidebarClassnames from './getSidebarClassnames';
+
+(document.documentElement: any).innerHTML = `
+<head>
+<style type="text/css">
+.blah {
+  color: red;
+}
+
+.bz, .bS {
+  width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (max-width: 1800px) {
+  .bz, .bS {
+    width: 66.66%;
+  }
+}
+@media (max-width: 1260px) {
+  .bz, .bS {
+    width: 840px;
+  }
+}
+.cM {
+  min-width: 512px;
+  padding: 56px 0 1px;
+}
+
+/* chat sidebar open rules */
+@media (max-width: 1632px) {
+  .m .bz {
+    width: auto;
+    margin-left: 50px;
+    margin-right: 272px;
+  }
+}
+
+/* nav sidebar open rules */
+@media (max-width: 1632px) {
+  .M .bz {
+    width: auto;
+    margin-left: 272px;
+    margin-right: 104px;
+  }
+}
+
+/* both open */
+@media (max-width: 1632px) {
+  .m.M .bz {
+    margin-left: 272px;
+    margin-right: 272px;
+  }
+}
+</style>
+</head>
+<body>
+  <div>
+    <div role="application" class="cM bz">
+      <p>foo
+    </div>
+  </div>
+</body>
+`;
+
+test('works', () => {
+  expect(getSidebarClassnames()).toEqual({
+    chat: 'm',
+    nav: 'M',
+    centerList: 'bz',
+  });
+});

package/src/platform-implementation-js/dom-driver/inbox/gotoView.js

@@ -0,0 +1,43 @@
+/* @flow */
+
+import includes from 'lodash/includes';
+import type InboxDriver from './inbox-driver';
+import populateRouteID from '../../lib/populateRouteID';
+import type { RouteParams } from '../../namespaces/router';
+import routeIDmatchesHash from '../../lib/routeIDmatchesHash';
+import { NATIVE_ROUTE_IDS } from '../../constants/router';
+
+export default function gotoView(
+  driver: InboxDriver,
+  routeID: string,
+  params: ?RouteParams
+): void {
+  if (includes(Object.values(NATIVE_ROUTE_IDS), routeID)) {
+    throw new Error('NativeRouteIDs are not currently supported in Inbox');
+  }
+  if (!driver.getCustomRouteIDs().has(routeID)) {
+    const startedWithHash = routeID[0] === '#';
+    if (startedWithHash) {
+      routeID = routeID.slice(1);
+    }
+    let foundRouteID = false;
+    if (!params) {
+      // If params were given, then we don't assume it was a resolved/populated URL
+      for (let routeIDs of driver.getCustomRouteIDs()) {
+        if (routeIDmatchesHash(routeIDs, routeID)) {
+          foundRouteID = true;
+          break;
+        }
+      }
+    }
+    if (!foundRouteID) {
+      throw new Error(`Invalid routeID: ${routeID}`);
+    }
+    if (!startedWithHash) {
+      driver
+        .getLogger()
+        .deprecationWarning('Router.goto resolved routeID without "#" prefix');
+    }
+  }
+  document.location.hash = populateRouteID(routeID, params);
+}