@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

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

@@ -1,102 +1,173 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.removeAllThreadRowUnclaimedModifications = removeAllThreadRowUnclaimedModifications;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _once = _interopRequireDefault(require("lodash/once"));
-var _flatten = _interopRequireDefault(require("lodash/flatten"));
-var _includes = _interopRequireDefault(require("lodash/includes"));
-var _intersection = _interopRequireDefault(require("lodash/intersection"));
-var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));
-var _flatMap = _interopRequireDefault(require("lodash/flatMap"));
-var _ud = require("ud");
-var _assert = _interopRequireDefault(require("assert"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _asap = _interopRequireDefault(require("asap"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
-var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../lib/dom/make-mutation-observer-chunked-stream"));
-var _insertElementInOrder = _interopRequireDefault(require("../../../lib/dom/insert-element-in-order"));
-var _kefirCast = _interopRequireDefault(require("kefir-cast"));
-var _delayAsap = _interopRequireDefault(require("../../../lib/delay-asap"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _gmailDropdownView = _interopRequireDefault(require("../widgets/gmail-dropdown-view"));
-var _dropdownView = _interopRequireDefault(require("../../../widgets/buttons/dropdown-view"));
-var _gmailLabelView = _interopRequireDefault(require("../widgets/gmail-label-view"));
-var _gmailActionButtonView = _interopRequireDefault(require("../widgets/gmail-action-button-view"));
-var _updateIcon = _interopRequireDefault(require("../../../driver-common/update-icon"));
+/* @flow */
 /* eslint-disable no-console */
-const cachedModificationsByRow = (0, _ud.defonce)(module, () => new WeakMap());
+
+import once from 'lodash/once';
+import flatten from 'lodash/flatten';
+import includes from 'lodash/includes';
+import intersection from 'lodash/intersection';
+import uniqBy from 'lodash/uniqBy';
+import flatMap from 'lodash/flatMap';
+import { defn, defonce } from 'ud';
+import assert from 'assert';
+import Kefir from 'kefir';
+import asap from 'asap';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import insertElementInOrder from '../../../lib/dom/insert-element-in-order';
+import kefirCast from 'kefir-cast';
+import type { ThreadRowViewDriver } from '../../../driver-interfaces/thread-row-view-driver';
+import delayAsap from '../../../lib/delay-asap';
+import kefirStopper from 'kefir-stopper';
+
+import GmailDropdownView from '../widgets/gmail-dropdown-view';
+import DropdownView from '../../../widgets/buttons/dropdown-view';
+import GmailLabelView from '../widgets/gmail-label-view';
+import GmailActionButtonView from '../widgets/gmail-action-button-view';
+import type GmailDriver from '../gmail-driver';
+import type GmailRowListView from './gmail-row-list-view';
+
+import updateIcon from '../../../driver-common/update-icon';
+
+type LabelMod = { gmailLabelView: Object, remove(): void };
+type ActionButtonMod = {
+  gmailActionButtonView: GmailActionButtonView,
+  remove(): void,
+};
+type ButtonMod = {
+  buttonSpan: HTMLElement,
+  iconSettings: Object,
+  remove(): void,
+};
+type ImageMod = {
+  iconSettings: Object,
+  iconWrapper: HTMLElement,
+  remove(): void,
+};
+type ReplacedDateMod = { el: HTMLElement, remove(): void };
+type ReplacedDraftLabelMod = ReplacedDateMod;
+
+type Mods = {
+  label: { unclaimed: LabelMod[], claimed: LabelMod[] },
+  action: { unclaimed: ActionButtonMod[], claimed: ActionButtonMod[] },
+  button: { unclaimed: ButtonMod[], claimed: ButtonMod[] },
+  image: { unclaimed: ImageMod[], claimed: ImageMod[] },
+  replacedDate: { unclaimed: ReplacedDateMod[], claimed: ReplacedDateMod[] },
+  replacedDraftLabel: {
+    unclaimed: ReplacedDraftLabelMod[],
+    claimed: ReplacedDraftLabelMod[],
+  },
+};
+
+const cachedModificationsByRow: WeakMap<HTMLElement, Mods> = defonce(
+  module,
+  () => new WeakMap()
+);
+
 function focusAndNoPropagation(event) {
   this.focus();
   event.stopImmediatePropagation();
 }
+
 function starGroupEventInterceptor(event) {
   const isOnStar = this.firstElementChild.contains(event.target);
   const isOnSDKButton = !isOnStar && this !== event.target;
   if (!isOnStar) {
     event.stopImmediatePropagation();
     if (!isOnSDKButton || event.type == 'mouseover') {
-      const newEvent = document.createEvent('MouseEvents');
-      newEvent.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, event.relatedTarget);
+      const newEvent: Object = document.createEvent('MouseEvents');
+      newEvent.initMouseEvent(
+        event.type,
+        event.bubbles,
+        event.cancelable,
+        event.view,
+        event.detail,
+        event.screenX,
+        event.screenY,
+        event.clientX,
+        event.clientY,
+        event.ctrlKey,
+        event.altKey,
+        event.shiftKey,
+        event.metaKey,
+        event.button,
+        event.relatedTarget
+      );
       this.parentElement.dispatchEvent(newEvent);
     }
   }
 }
+
+type Counts = {
+  messageCount: number,
+  draftCount: number,
+};
+
 class GmailThreadRowView {
-  constructor(element, rowListViewDriver, gmailDriver) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
-    (0, _defineProperty2.default)(this, "_isDestroyed", false);
-    this;
-    (0, _assert.default)(element.hasAttribute('id'), 'check element is main thread row');
-    this._isVertical = (0, _intersection.default)(Array.from(element.classList), ['zA', 'apv']).length === 2;
+  _elements: HTMLElement[];
+  _modifications: Mods;
+  _alreadyHadModifications: boolean;
+  _rowListViewDriver: GmailRowListView;
+  _driver: GmailDriver;
+  _userView: ?Object;
+  _cachedThreadID: ?string;
+  _cachedSyncThreadID: ?string;
+  _cachedSyncDraftIDPromise: ?Promise<?string>;
+  _stopper = kefirStopper();
+  _refresher: ?Kefir.Observable<any>;
+  _subjectRefresher: ?Kefir.Observable<any>;
+  _imageRefresher: ?Kefir.Observable<any>;
+  _counts: ?Counts;
+  _isVertical: boolean;
+  _isDestroyed: boolean = false;
+
+  constructor(
+    element: HTMLElement,
+    rowListViewDriver: GmailRowListView,
+    gmailDriver: GmailDriver
+  ) {
+    (this: ThreadRowViewDriver);
+    assert(element.hasAttribute('id'), 'check element is main thread row');
+
+    this._isVertical =
+      intersection(Array.from(element.classList), ['zA', 'apv']).length === 2;
     if (this._isVertical) {
       const threadRow2 = element.nextElementSibling;
+
       if (!threadRow2) throw new Error('threadRow2 not found');
+
       const threadRow3 = threadRow2.nextElementSibling;
       const has3Rows = threadRow3 && threadRow3.classList.contains('apw');
-      this._elements = has3Rows ? [element, element.nextElementSibling, element.nextElementSibling.nextElementSibling] : [element, element.nextElementSibling];
+      this._elements = has3Rows
+        ? [
+            element,
+            (element: any).nextElementSibling,
+            (element: any).nextElementSibling.nextElementSibling,
+          ]
+        : [element, (element: any).nextElementSibling];
     } else {
       this._elements = [element];
     }
+
     const modifications = cachedModificationsByRow.get(this._elements[0]);
     if (!modifications) {
       this._alreadyHadModifications = false;
       this._modifications = {
-        label: {
-          unclaimed: [],
-          claimed: []
-        },
-        action: {
-          unclaimed: [],
-          claimed: []
-        },
-        button: {
-          unclaimed: [],
-          claimed: []
-        },
-        image: {
-          unclaimed: [],
-          claimed: []
-        },
-        replacedDate: {
-          unclaimed: [],
-          claimed: []
-        },
-        replacedDraftLabel: {
-          unclaimed: [],
-          claimed: []
-        }
+        label: { unclaimed: [], claimed: [] },
+        action: { unclaimed: [], claimed: [] },
+        button: { unclaimed: [], claimed: [] },
+        image: { unclaimed: [], claimed: [] },
+        replacedDate: { unclaimed: [], claimed: [] },
+        replacedDraftLabel: { unclaimed: [], claimed: [] },
       };
       cachedModificationsByRow.set(this._elements[0], this._modifications);
     } else {
       this._modifications = modifications;
       this._alreadyHadModifications = true;
     }
+
     this._rowListViewDriver = rowListViewDriver;
     this._driver = gmailDriver;
     this._userView = null; // supplied by ThreadRowView
@@ -106,41 +177,74 @@ class GmailThreadRowView {
     this._subjectRefresher = null;
     this._imageRefresher = null;
     this._counts = null;
+
     this._elements[0].setAttribute('data-inboxsdk-thread-row', 'true');
   }
+
   destroy() {
     if (!this._elements.length) {
       return;
     }
+
     this._isDestroyed = true;
-    this._modifications.label.unclaimed = this._modifications.label.claimed.concat(this._modifications.label.unclaimed);
+
+    this._modifications.label.unclaimed =
+      this._modifications.label.claimed.concat(
+        this._modifications.label.unclaimed
+      );
     this._modifications.label.claimed.length = 0;
-    this._modifications.action.unclaimed = this._modifications.action.claimed.concat(this._modifications.action.unclaimed);
+
+    this._modifications.action.unclaimed =
+      this._modifications.action.claimed.concat(
+        this._modifications.action.unclaimed
+      );
     this._modifications.action.claimed.length = 0;
-    this._modifications.button.unclaimed = this._modifications.button.claimed.concat(this._modifications.button.unclaimed);
+
+    this._modifications.button.unclaimed =
+      this._modifications.button.claimed.concat(
+        this._modifications.button.unclaimed
+      );
     this._modifications.button.claimed.length = 0;
-    this._modifications.image.unclaimed = this._modifications.image.claimed.concat(this._modifications.image.unclaimed);
+
+    this._modifications.image.unclaimed =
+      this._modifications.image.claimed.concat(
+        this._modifications.image.unclaimed
+      );
     this._modifications.image.claimed.length = 0;
-    this._modifications.replacedDate.unclaimed = this._modifications.replacedDate.claimed.concat(this._modifications.replacedDate.unclaimed);
+
+    this._modifications.replacedDate.unclaimed =
+      this._modifications.replacedDate.claimed.concat(
+        this._modifications.replacedDate.unclaimed
+      );
     this._modifications.replacedDate.claimed.length = 0;
-    this._modifications.replacedDraftLabel.unclaimed = this._modifications.replacedDraftLabel.claimed.concat(this._modifications.replacedDraftLabel.unclaimed);
+
+    this._modifications.replacedDraftLabel.unclaimed =
+      this._modifications.replacedDraftLabel.claimed.concat(
+        this._modifications.replacedDraftLabel.unclaimed
+      );
     this._modifications.replacedDraftLabel.claimed.length = 0;
-    (0, _flatMap.default)(this._elements, el => Array.from(el.getElementsByClassName('inboxsdk__thread_row_addition'))).forEach(el => {
+
+    flatMap(this._elements, (el) =>
+      Array.from(el.getElementsByClassName('inboxsdk__thread_row_addition'))
+    ).forEach((el) => {
       el.remove();
     });
+
     this._stopper.destroy();
     this._elements.length = 0;
   }
-  getElement() {
+
+  getElement(): HTMLElement {
     return this._elements[0];
   }
+
   _removeUnclaimedModifications() {
     _removeThreadRowUnclaimedModifications(this._modifications);
 
     // TODO fix column width to deal with removed buttons
   }
 
-  getAlreadyHadModifications() {
+  getAlreadyHadModifications(): boolean {
     return this._alreadyHadModifications;
   }
 
@@ -149,110 +253,168 @@ class GmailThreadRowView {
   // a few cases such as with multiple inbox or the drafts page that it needs a moment.
   // make sure you take until by on the gmailThreadRowView.getStopper() because waitForReady
   // must not be called after the gmailThreadRowView is destroyed
-  waitForReady() {
+  waitForReady(): Kefir.Observable<GmailThreadRowView> {
     const time = [0, 10, 100, 1000, 15000];
     const step = () => {
       if (this._threadIdReady()) {
-        (0, _asap.default)(() => {
+        asap(() => {
           if (this._elements.length) this._removeUnclaimedModifications();
         });
-        return _kefir.default.constant(this);
+        return Kefir.constant(this);
       } else {
         const stepTime = time.shift();
         if (stepTime == undefined) {
-          console.log('Should not happen: ThreadRowViewDriver never became ready', this);
-          return _kefir.default.never();
+          console.log(
+            'Should not happen: ThreadRowViewDriver never became ready',
+            this
+          );
+          return Kefir.never();
         } else {
-          return _kefir.default.later(stepTime).flatMap(step);
+          return Kefir.later(stepTime).flatMap(step);
         }
       }
     };
+
     return step();
   }
-  setUserView(userView) {
+
+  setUserView(userView: Object) {
     this._userView = userView;
   }
-  getCounts() {
+
+  getCounts(): Counts {
     let counts = this._counts;
     if (!counts) {
-      const recipientsElement = (0, _querySelectorOrFail.default)(this._elements[0], 'td div.yW');
+      const recipientsElement = querySelector(this._elements[0], 'td div.yW');
+
       if (this._driver.isUsingSyncAPI()) {
         const draftCount = recipientsElement.querySelectorAll('.boq').length;
         const messageCountMatch = recipientsElement.querySelector('.bx0');
-        const messageCount = messageCountMatch && messageCountMatch.innerHTML ? +messageCountMatch.innerHTML : draftCount ? 0 : 1;
-        counts = this._counts = {
-          messageCount,
-          draftCount
-        };
+
+        const messageCount =
+          messageCountMatch && messageCountMatch.innerHTML
+            ? +messageCountMatch.innerHTML
+            : draftCount
+            ? 0
+            : 1;
+
+        counts = this._counts = { messageCount, draftCount };
       } else {
-        const [preDrafts, drafts] = recipientsElement.innerHTML.split(/<font color=[^>]+>[^>]+<\/font>/);
-        const preDraftsWithoutNames = preDrafts.replace(/<span\b[^>]*>.*?<\/span>/g, '');
+        const [preDrafts, drafts] = recipientsElement.innerHTML.split(
+          /<font color=[^>]+>[^>]+<\/font>/
+        );
+
+        const preDraftsWithoutNames = preDrafts.replace(
+          /<span\b[^>]*>.*?<\/span>/g,
+          ''
+        );
+
         const messageCountMatch = preDraftsWithoutNames.match(/\((\d+)\)/);
-        const messageCount = messageCountMatch ? +messageCountMatch[1] : preDrafts ? 1 : 0;
+        const messageCount = messageCountMatch
+          ? +messageCountMatch[1]
+          : preDrafts
+          ? 1
+          : 0;
+
         const draftCountMatch = drafts && drafts.match(/\((\d+)\)/);
-        const draftCount = draftCountMatch ? +draftCountMatch[1] : drafts != null ? 1 : 0;
-        counts = this._counts = {
-          messageCount,
-          draftCount
-        };
+        const draftCount = draftCountMatch
+          ? +draftCountMatch[1]
+          : drafts != null
+          ? 1
+          : 0;
+        counts = this._counts = { messageCount, draftCount };
       }
     }
+
     return counts;
   }
-  _expandColumn(colSelector, width) {
+
+  _expandColumn(colSelector: string, width: number) {
     this._rowListViewDriver.expandColumn(colSelector, width);
   }
-  addLabel(label) {
+
+  addLabel(label: Object) {
     if (!this._elements.length) {
       console.warn('addLabel called on destroyed thread row');
       return;
     }
-    const prop = (0, _kefirCast.default)(_kefir.default, label).takeUntilBy(this._stopper).toProperty();
+    const prop: Kefir.Observable<?Object> = kefirCast(Kefir, label)
+      .takeUntilBy(this._stopper)
+      .toProperty();
     let labelMod = null;
-    prop.combine(this._getRefresher()).takeUntilBy(this._stopper).onValue(_ref => {
-      let [labelDescriptor] = _ref;
-      if (!labelDescriptor) {
-        if (labelMod) {
-          labelMod.remove();
-          this._modifications.label.claimed.splice(this._modifications.label.claimed.indexOf(labelMod), 1);
-          labelMod = null;
-        }
-      } else {
-        if (!labelMod) {
-          labelMod = this._modifications.label.unclaimed.shift();
+
+    prop
+      .combine(this._getRefresher())
+      .takeUntilBy(this._stopper)
+      .onValue(([labelDescriptor]) => {
+        if (!labelDescriptor) {
+          if (labelMod) {
+            labelMod.remove();
+            this._modifications.label.claimed.splice(
+              this._modifications.label.claimed.indexOf(labelMod),
+              1
+            );
+            labelMod = null;
+          }
+        } else {
           if (!labelMod) {
-            const gmailLabelView = new _gmailLabelView.default({
-              classes: ['inboxsdk__thread_row_label']
-            });
-            const el = gmailLabelView.getElement();
-            labelMod = {
-              gmailLabelView,
-              remove: el.remove.bind(el)
-            };
+            labelMod = this._modifications.label.unclaimed.shift();
+            if (!labelMod) {
+              const gmailLabelView = new GmailLabelView({
+                classes: ['inboxsdk__thread_row_label'],
+              });
+              const el = gmailLabelView.getElement();
+              labelMod = {
+                gmailLabelView,
+                remove: el.remove.bind(el),
+              };
+            }
+            this._modifications.label.claimed.push(labelMod);
+          }
+
+          labelMod.gmailLabelView.updateLabelDescriptor(labelDescriptor);
+
+          const labelParentDiv = this._getLabelParent();
+
+          if (
+            labelParentDiv !==
+            labelMod.gmailLabelView.getElement().parentElement
+          ) {
+            labelParentDiv.insertAdjacentElement(
+              'afterbegin',
+              labelMod.gmailLabelView.getElement()
+            );
           }
-          this._modifications.label.claimed.push(labelMod);
-        }
-        labelMod.gmailLabelView.updateLabelDescriptor(labelDescriptor);
-        const labelParentDiv = this._getLabelParent();
-        if (labelParentDiv !== labelMod.gmailLabelView.getElement().parentElement) {
-          labelParentDiv.insertAdjacentElement('afterbegin', labelMod.gmailLabelView.getElement());
         }
-      }
-    });
+      });
   }
-  addImage(inIconDescriptor) {
+
+  addImage(inIconDescriptor: Object) {
     if (!this._elements.length) {
       console.warn('addImage called on destroyed thread row');
       return;
     }
-    const prop = (0, _kefirCast.default)(_kefir.default, inIconDescriptor).toProperty().combine(_kefir.default.merge([this._getRefresher(), this._getSubjectRefresher(), this._getImageContainerRefresher()])).takeUntilBy(this._stopper);
+    const prop = kefirCast(Kefir, inIconDescriptor)
+      .toProperty()
+      .combine(
+        Kefir.merge([
+          this._getRefresher(),
+          this._getSubjectRefresher(),
+          this._getImageContainerRefresher(),
+        ])
+      )
+      .takeUntilBy(this._stopper);
+
     let imageMod = null;
-    prop.onValue(_ref2 => {
-      let [iconDescriptor] = _ref2;
+
+    prop.onValue(([iconDescriptor]) => {
       if (!iconDescriptor) {
         if (imageMod) {
           imageMod.remove();
-          this._modifications.image.claimed.splice(this._modifications.image.claimed.indexOf(imageMod), 1);
+          this._modifications.image.claimed.splice(
+            this._modifications.image.claimed.indexOf(imageMod),
+            1
+          );
           imageMod = null;
         }
       } else {
@@ -264,32 +426,46 @@ class GmailThreadRowView {
               iconWrapper: document.createElement('div'),
               remove() {
                 this.iconWrapper.remove();
-              }
+              },
             };
-            imageMod.iconWrapper.className = 'inboxsdk__thread_row_icon_wrapper';
+            imageMod.iconWrapper.className =
+              'inboxsdk__thread_row_icon_wrapper';
           }
           this._modifications.image.claimed.push(imageMod);
         }
-        const {
+        const { iconSettings, iconWrapper } = imageMod;
+
+        updateIcon(
           iconSettings,
-          iconWrapper
-        } = imageMod;
-        (0, _updateIcon.default)(iconSettings, iconWrapper, false, iconDescriptor.imageClass, iconDescriptor.imageUrl);
-        const containerRow = this._elements.length === 3 ? this._elements[2] : this._elements[0];
+          iconWrapper,
+          false,
+          iconDescriptor.imageClass,
+          iconDescriptor.imageUrl
+        );
+
+        const containerRow =
+          this._elements.length === 3 ? this._elements[2] : this._elements[0];
         containerRow.classList.add('inboxsdk__thread_row_image_added');
+
         if (iconDescriptor.tooltip) {
           iconWrapper.setAttribute('data-tooltip', iconDescriptor.tooltip);
         } else {
           iconWrapper.removeAttribute('data-tooltip');
         }
+
         const labelParent = this._getLabelParent();
+
         if (!labelParent.contains(iconWrapper)) {
-          (0, _querySelectorOrFail.default)(labelParent, '.y6').insertAdjacentElement('beforebegin', iconWrapper);
+          querySelector(labelParent, '.y6').insertAdjacentElement(
+            'beforebegin',
+            iconWrapper
+          );
         }
       }
     });
   }
-  addButton(buttonDescriptor) {
+
+  addButton(buttonDescriptor: Object) {
     if (!this._elements.length) {
       console.warn('addButton called on destroyed thread row');
       return;
@@ -298,8 +474,12 @@ class GmailThreadRowView {
 
     let activeDropdown = null;
     let buttonMod = null;
-    const prop = (0, _kefirCast.default)(_kefir.default, buttonDescriptor).toProperty().takeUntilBy(this._stopper);
-    prop.merge(this._stopper).onValue(buttonDescriptor => {
+
+    const prop: Kefir.Observable<?Object> = kefirCast(Kefir, buttonDescriptor)
+      .toProperty()
+      .takeUntilBy(this._stopper);
+
+    prop.merge(this._stopper).onValue((buttonDescriptor) => {
       if (!buttonDescriptor) {
         if (activeDropdown) {
           activeDropdown.close();
@@ -307,18 +487,22 @@ class GmailThreadRowView {
         }
       }
     });
+
     this._stopper.onValue(() => {
       if (buttonMod && buttonMod.buttonSpan) {
-        buttonMod.buttonSpan.onclick = null;
+        (buttonMod.buttonSpan: any).onclick = null;
       }
     });
-    prop.combine(this._getRefresher()).onValue(_ref3 => {
-      let [_buttonDescriptor] = _ref3;
+
+    prop.combine(this._getRefresher()).onValue(([_buttonDescriptor]) => {
       const buttonDescriptor = _buttonDescriptor;
       if (!buttonDescriptor) {
         if (buttonMod) {
           buttonMod.remove();
-          this._modifications.button.claimed.splice(this._modifications.button.claimed.indexOf(buttonMod), 1);
+          this._modifications.button.claimed.splice(
+            this._modifications.button.claimed.indexOf(buttonMod),
+            1
+          );
           buttonMod = null;
         }
       } else {
@@ -327,8 +511,11 @@ class GmailThreadRowView {
           buttonDescriptor.iconClass = buttonDescriptor.className;
           delete buttonDescriptor.className;
         }
+
         let buttonSpan, iconSettings;
-        const buttonToolbar = this._elements[0].querySelector('ul[role=toolbar]');
+        const buttonToolbar =
+          this._elements[0].querySelector('ul[role=toolbar]');
+
         if (!buttonMod) {
           buttonMod = this._modifications.button.unclaimed.shift();
           if (!buttonMod) {
@@ -340,34 +527,47 @@ class GmailThreadRowView {
               // T-KT is one of the class names on the star button.
               buttonSpan.classList.add('T-KT');
             }
+
             buttonSpan.classList.add('inboxsdk__thread_row_button');
+
             if (buttonDescriptor.title) {
               buttonSpan.setAttribute('title', buttonDescriptor.title);
             } else {
               buttonSpan.removeAttribute('title');
             }
             buttonSpan.setAttribute('tabindex', '-1');
-            buttonSpan.setAttribute('data-order-hint', String(buttonDescriptor.orderHint || 0));
-            buttonSpan.addEventListener('onmousedown', focusAndNoPropagation);
+            buttonSpan.setAttribute(
+              'data-order-hint',
+              String(buttonDescriptor.orderHint || 0)
+            );
+            (buttonSpan: any).addEventListener(
+              'onmousedown',
+              focusAndNoPropagation
+            );
+
             iconSettings = {};
+
             buttonMod = {
               buttonSpan,
               iconSettings,
-              remove: buttonSpan.remove.bind(buttonSpan)
+              remove: buttonSpan.remove.bind(buttonSpan),
             };
           }
           this._modifications.button.claimed.push(buttonMod);
         }
 
         // could also be trash icon
-        const starGroup = buttonToolbar ? null : (0, _querySelectorOrFail.default)(this._elements[0], 'td.apU.xY, td.aqM.xY');
+        const starGroup = buttonToolbar
+          ? null
+          : querySelector(this._elements[0], 'td.apU.xY, td.aqM.xY');
         buttonSpan = buttonMod.buttonSpan;
         iconSettings = buttonMod.iconSettings;
+
         if (buttonDescriptor.onClick) {
-          buttonSpan.onclick = event => {
+          (buttonSpan: any).onclick = (event) => {
             const appEvent = {
-              dropdown: null,
-              threadRowView: this._userView
+              dropdown: (null: ?DropdownView),
+              threadRowView: this._userView,
             };
             if (buttonDescriptor.hasDropdown) {
               if (activeDropdown) {
@@ -379,16 +579,21 @@ class GmailThreadRowView {
               } else {
                 this._elements[0].classList.add('inboxsdk__dropdown_active');
                 this._elements[0].classList.add('buL'); // gmail class to force row button toolbar to be visible
-                appEvent.dropdown = activeDropdown = new _dropdownView.default(new _gmailDropdownView.default(), buttonSpan, null);
+                appEvent.dropdown = activeDropdown = new DropdownView(
+                  new GmailDropdownView(),
+                  buttonSpan,
+                  null
+                );
                 activeDropdown.setPlacementOptions({
                   position: 'bottom',
                   hAlign: 'left',
-                  vAlign: 'top'
+                  vAlign: 'top',
                 });
 
                 // remember this reference before the destroy event and setTimeout
                 // because this._elements may be cleared by then.
                 const firstEl = this._elements[0];
+
                 activeDropdown.on('destroy', () => {
                   setTimeout(() => {
                     firstEl.classList.remove('inboxsdk__dropdown_active');
@@ -401,11 +606,18 @@ class GmailThreadRowView {
             buttonDescriptor.onClick.call(null, appEvent);
           };
         }
-        (0, _updateIcon.default)(iconSettings, buttonSpan, false, buttonDescriptor.iconClass, buttonDescriptor.iconUrl);
+
+        updateIcon(
+          iconSettings,
+          buttonSpan,
+          false,
+          buttonDescriptor.iconClass,
+          buttonDescriptor.iconUrl
+        );
         if (buttonToolbar && buttonSpan.parentElement !== buttonToolbar) {
-          (0, _insertElementInOrder.default)(buttonToolbar, buttonSpan, undefined, true);
+          insertElementInOrder(buttonToolbar, buttonSpan, undefined, true);
         } else if (starGroup && buttonSpan.parentElement !== starGroup) {
-          (0, _insertElementInOrder.default)(starGroup, buttonSpan);
+          insertElementInOrder(starGroup, buttonSpan);
           this._expandColumn('col.y5', 26 * starGroup.children.length);
 
           // Don't let the whole column count as the star for click and mouse over purposes.
@@ -416,351 +628,525 @@ class GmailThreadRowView {
           // Click events that are on one of our buttons should be stopped. Click events
           // that aren't on the star button or our buttons should be re-emitted from the
           // thread row so it counts as clicking on the thread.
-          starGroup.onmouseover = starGroup.onclick = starGroupEventInterceptor;
+          (starGroup: any).onmouseover = (starGroup: any).onclick =
+            starGroupEventInterceptor;
         }
       }
     });
   }
-  addActionButton(actionButtonDescriptor) {
+
+  addActionButton(actionButtonDescriptor: Object) {
     if (this._elements.length !== 1) {
       return;
     }
-    const prop = (0, _kefirCast.default)(_kefir.default, actionButtonDescriptor).takeUntilBy(this._stopper).toProperty();
+    const prop: Kefir.Observable<?Object> = kefirCast(
+      Kefir,
+      actionButtonDescriptor
+    )
+      .takeUntilBy(this._stopper)
+      .toProperty();
     let actionMod = null;
+
     this._stopper.onEnd(() => {
       if (actionMod) {
         actionMod.gmailActionButtonView.setOnClick(null);
       }
     });
-    prop.takeUntilBy(this._stopper).onValue(actionButtonDescriptor => {
+
+    prop.takeUntilBy(this._stopper).onValue((actionButtonDescriptor) => {
       if (actionButtonDescriptor && actionButtonDescriptor.type !== 'LINK') {
         console.error('Only type=LINK is currently supported');
         return;
       }
+
       if (!actionButtonDescriptor) {
         if (actionMod) {
           actionMod.remove();
-          this._modifications.action.claimed.splice(this._modifications.action.claimed.indexOf(actionMod), 1);
+          this._modifications.action.claimed.splice(
+            this._modifications.action.claimed.indexOf(actionMod),
+            1
+          );
           actionMod = null;
         }
       } else {
         if (!actionMod) {
           actionMod = this._modifications.action.unclaimed.shift();
           if (!actionMod) {
-            const gmailActionButtonView = new _gmailActionButtonView.default();
+            const gmailActionButtonView = new GmailActionButtonView();
             const el = gmailActionButtonView.getElement();
             actionMod = {
               gmailActionButtonView,
-              remove: el.remove.bind(el)
+              remove: el.remove.bind(el),
             };
           }
           this._modifications.action.claimed.push(actionMod);
         }
-        actionMod.gmailActionButtonView.updateDescriptor(actionButtonDescriptor);
-        const {
-          url,
-          onClick
-        } = actionButtonDescriptor;
-        actionMod.gmailActionButtonView.setOnClick(event => {
+
+        actionMod.gmailActionButtonView.updateDescriptor(
+          actionButtonDescriptor
+        );
+        const { url, onClick } = actionButtonDescriptor;
+        actionMod.gmailActionButtonView.setOnClick((event) => {
           event.stopPropagation();
           window.open(url, '_blank');
           if (onClick) {
             onClick.call(null, {});
           }
         });
-        const actionParentDiv = this._elements[0].querySelector('td.a4W .a4X .aKS') || this._elements[0].querySelector('td.a4W div.xS');
+
+        const actionParentDiv =
+          this._elements[0].querySelector('td.a4W .a4X .aKS') ||
+          this._elements[0].querySelector('td.a4W div.xS');
         if (!actionParentDiv) throw new Error('Failed to find actionParentDiv');
-        if (!(0, _includes.default)(actionParentDiv.children, actionMod.gmailActionButtonView.getElement())) {
-          actionParentDiv.insertBefore(actionMod.gmailActionButtonView.getElement(), actionParentDiv.firstChild);
+        if (
+          !includes(
+            actionParentDiv.children,
+            actionMod.gmailActionButtonView.getElement()
+          )
+        ) {
+          actionParentDiv.insertBefore(
+            actionMod.gmailActionButtonView.getElement(),
+            actionParentDiv.firstChild
+          );
         }
       }
     });
   }
-  addAttachmentIcon(opts) {
+
+  addAttachmentIcon(opts: Object) {
     if (!this._elements.length) {
       console.warn('addAttachmentIcon called on destroyed thread row');
       return;
     }
-    const getImgElement = (0, _once.default)(() => {
+    const getImgElement = once(() => {
       const img = document.createElement('img');
       img.src = 'images/cleardot.gif';
       return img;
     });
-    const getCustomIconWrapper = (0, _once.default)(() => {
+
+    const getCustomIconWrapper = once(() => {
       const div = document.createElement('div');
       return div;
     });
+
     var added = false;
     var currentIconUrl;
-    var prop = (0, _kefirCast.default)(_kefir.default, opts).toProperty();
-    prop.combine(this._getRefresher()).takeUntilBy(this._stopper).onValue(_ref4 => {
-      let [opts] = _ref4;
-      const attachmentDiv = (0, _querySelectorOrFail.default)(this._elements[0], 'td.yf.xY');
-      if (!opts) {
-        if (added) {
-          getCustomIconWrapper().remove();
-          getImgElement().remove();
-          added = false;
-          if (!attachmentDiv.querySelector('.inboxsdk__thread_row_attachment_icon')) {
-            attachmentDiv.classList.remove('inboxsdk__thread_row_attachment_icons_present');
+
+    var prop: Kefir.Observable<?Object> = kefirCast(Kefir, opts).toProperty();
+    prop
+      .combine(this._getRefresher())
+      .takeUntilBy(this._stopper)
+      .onValue(([opts]) => {
+        const attachmentDiv = querySelector(this._elements[0], 'td.yf.xY');
+        if (!opts) {
+          if (added) {
+            getCustomIconWrapper().remove();
+            getImgElement().remove();
+            added = false;
+
+            if (
+              !attachmentDiv.querySelector(
+                '.inboxsdk__thread_row_attachment_icon'
+              )
+            ) {
+              attachmentDiv.classList.remove(
+                'inboxsdk__thread_row_attachment_icons_present'
+              );
+            }
           }
-        }
-      } else {
-        const img = opts.iconHtml != null ? getCustomIconWrapper() : getImgElement();
-        if (opts.tooltip) {
-          img.setAttribute('data-tooltip', opts.tooltip);
         } else {
-          img.removeAttribute('data-tooltip');
-        }
-        img.className = opts.iconHtml != null ? 'inboxsdk__thread_row_addition inboxsdk__thread_row_attachment_iconWrapper ' + (opts.iconClass || '') : 'inboxsdk__thread_row_addition inboxsdk__thread_row_attachment_icon ' + (opts.iconClass || '');
-        if (opts.iconHtml != null) {
-          if (attachmentDiv.contains(getImgElement())) {
-            getImgElement().remove();
+          const img =
+            opts.iconHtml != null ? getCustomIconWrapper() : getImgElement();
+          if (opts.tooltip) {
+            img.setAttribute('data-tooltip', opts.tooltip);
+          } else {
+            img.removeAttribute('data-tooltip');
           }
-          img.innerHTML = opts.iconHtml;
-        } else if (currentIconUrl != opts.iconUrl) {
-          if (attachmentDiv.contains(getCustomIconWrapper())) {
-            getCustomIconWrapper().remove();
+
+          img.className =
+            opts.iconHtml != null
+              ? 'inboxsdk__thread_row_addition inboxsdk__thread_row_attachment_iconWrapper ' +
+                (opts.iconClass || '')
+              : 'inboxsdk__thread_row_addition inboxsdk__thread_row_attachment_icon ' +
+                (opts.iconClass || '');
+
+          if (opts.iconHtml != null) {
+            if (attachmentDiv.contains(getImgElement())) {
+              getImgElement().remove();
+            }
+
+            img.innerHTML = opts.iconHtml;
+          } else if (currentIconUrl != opts.iconUrl) {
+            if (attachmentDiv.contains(getCustomIconWrapper())) {
+              getCustomIconWrapper().remove();
+            }
+
+            img.style.background = opts.iconUrl
+              ? 'url(' + opts.iconUrl + ') no-repeat 0 0'
+              : '';
+            currentIconUrl = opts.iconUrl;
           }
-          img.style.background = opts.iconUrl ? 'url(' + opts.iconUrl + ') no-repeat 0 0' : '';
-          currentIconUrl = opts.iconUrl;
-        }
-        if (!attachmentDiv.contains(img)) {
-          attachmentDiv.appendChild(img);
-          added = true;
-          this._expandColumn('col.yg', attachmentDiv.children.length * 16);
-          if (this._elements.length > 1) {
-            this._fixDateColumnWidth();
+
+          if (!attachmentDiv.contains(img)) {
+            attachmentDiv.appendChild(img);
+            added = true;
+            this._expandColumn('col.yg', attachmentDiv.children.length * 16);
+            if (this._elements.length > 1) {
+              this._fixDateColumnWidth();
+            }
           }
+          attachmentDiv.classList.add(
+            'inboxsdk__thread_row_attachment_icons_present'
+          );
         }
-        attachmentDiv.classList.add('inboxsdk__thread_row_attachment_icons_present');
-      }
-    });
+      });
   }
+
   _fixDateColumnWidth() {
-    (0, _asap.default)(() => {
+    asap(() => {
       if (!this._elements.length) return;
-      const dateContainer = this._elements[0].querySelector('td.xW, td.yf > div.apm');
+
+      const dateContainer = this._elements[0].querySelector(
+        'td.xW, td.yf > div.apm'
+      );
       if (!dateContainer) return;
-      const visibleDateSpan = dateContainer.querySelector('.inboxsdk__thread_row_custom_date') || dateContainer.firstElementChild;
+      const visibleDateSpan =
+        dateContainer.querySelector('.inboxsdk__thread_row_custom_date') ||
+        dateContainer.firstElementChild;
       if (!visibleDateSpan || !(visibleDateSpan instanceof HTMLElement)) return;
 
       // Attachment icons are only in the date column in vertical preivew pane.
-      const dateColumnAttachmentIconCount = this._elements[0].querySelectorAll('td.yf > img').length;
-      this._expandColumn('col.xX', visibleDateSpan.offsetWidth + 8 + 2 + 20 + dateColumnAttachmentIconCount * 16);
+      const dateColumnAttachmentIconCount =
+        this._elements[0].querySelectorAll('td.yf > img').length;
+      this._expandColumn(
+        'col.xX',
+        visibleDateSpan.offsetWidth +
+          8 +
+          2 +
+          20 +
+          dateColumnAttachmentIconCount * 16
+      );
     });
   }
-  replaceDraftLabel(opts) {
+
+  replaceDraftLabel(opts: Object) {
     if (!this._elements.length) {
       console.warn('replaceDraftLabel called on destroyed thread row');
       return;
     }
     let labelMod;
     let draftElement, countElement;
-    const prop = (0, _kefirCast.default)(_kefir.default, opts).toProperty();
-    prop.combine(this._getRefresher()).takeUntilBy(this._stopper).onValue(_ref5 => {
-      let [opts] = _ref5;
-      const originalLabel = (0, _querySelectorOrFail.default)(this._elements[0], 'td > div.yW');
-      const recipientsContainer = originalLabel.parentElement;
-      if (!recipientsContainer) throw new Error('Should not happen');
-      if (!opts) {
-        if (labelMod) {
-          labelMod.remove();
-          this._modifications.replacedDraftLabel.claimed.splice(this._modifications.replacedDraftLabel.claimed.indexOf(labelMod), 1);
-          labelMod = null;
-        }
-      } else {
-        opts = Object.assign({
-          count: 1
-        }, opts);
-        if (!labelMod) {
-          labelMod = this._modifications.replacedDraftLabel.unclaimed.shift();
-          if (!labelMod) {
-            labelMod = {
-              el: Object.assign(document.createElement('span'), {
-                className: 'inboxsdk__thread_row_custom_draft_label'
-              }),
-              remove() {
-                this.el.remove();
-              }
-            };
+    const prop: Kefir.Observable<?Object> = kefirCast(Kefir, opts).toProperty();
+    prop
+      .combine(this._getRefresher())
+      .takeUntilBy(this._stopper)
+      .onValue(([opts]) => {
+        const originalLabel = querySelector(this._elements[0], 'td > div.yW');
+        const recipientsContainer = originalLabel.parentElement;
+        if (!recipientsContainer) throw new Error('Should not happen');
+
+        if (!opts) {
+          if (labelMod) {
+            labelMod.remove();
+            this._modifications.replacedDraftLabel.claimed.splice(
+              this._modifications.replacedDraftLabel.claimed.indexOf(labelMod),
+              1
+            );
+            labelMod = null;
           }
-          this._modifications.replacedDraftLabel.claimed.push(labelMod);
-        }
-        const needToAdd = !(0, _includes.default)(recipientsContainer.children, labelMod.el);
-        if (needToAdd || !draftElement) {
-          labelMod.el.innerHTML = originalLabel.innerHTML;
-          const materiaUIlDraftElements = Array.from(labelMod.el.querySelectorAll('.boq'));
-          if (materiaUIlDraftElements.length > 0) {
-            materiaUIlDraftElements.forEach(el => el.remove());
-            draftElement = Object.assign(document.createElement('span'), {
-              className: 'boq'
-            });
-            labelMod.el.appendChild(draftElement);
-          } else {
-            draftElement = labelMod.el.querySelector('font');
-            if (!draftElement) {
-              return;
+        } else {
+          opts = Object.assign({ count: 1 }, opts);
+
+          if (!labelMod) {
+            labelMod = this._modifications.replacedDraftLabel.unclaimed.shift();
+            if (!labelMod) {
+              labelMod = {
+                el: Object.assign(document.createElement('span'), {
+                  className: 'inboxsdk__thread_row_custom_draft_label',
+                }),
+                remove() {
+                  this.el.remove();
+                },
+              };
             }
-            const nextSibling = draftElement.nextElementSibling;
-            if (nextSibling) {
-              nextSibling.remove();
+            this._modifications.replacedDraftLabel.claimed.push(labelMod);
+          }
+
+          const needToAdd = !includes(
+            recipientsContainer.children,
+            labelMod.el
+          );
+
+          if (needToAdd || !draftElement) {
+            labelMod.el.innerHTML = originalLabel.innerHTML;
+            const materiaUIlDraftElements = Array.from(
+              labelMod.el.querySelectorAll('.boq')
+            );
+            if (materiaUIlDraftElements.length > 0) {
+              materiaUIlDraftElements.forEach((el) => el.remove());
+              draftElement = Object.assign(document.createElement('span'), {
+                className: 'boq',
+              });
+              labelMod.el.appendChild(draftElement);
+            } else {
+              draftElement = labelMod.el.querySelector('font');
+              if (!draftElement) {
+                return;
+              }
+
+              const nextSibling = draftElement.nextElementSibling;
+              if (nextSibling) {
+                nextSibling.remove();
+              }
             }
+
+            draftElement.classList.add(
+              'inboxsdk__thread_row_custom_draft_part'
+            );
+
+            countElement = Object.assign(document.createElement('span'), {
+              className: 'inboxsdk__thread_row_custom_draft_count',
+            });
+            labelMod.el.appendChild(countElement);
+          }
+
+          draftElement.textContent = opts.text;
+          countElement.textContent = opts.count !== 1 ? ` (${opts.count})` : '';
+
+          if (needToAdd) {
+            recipientsContainer.insertBefore(labelMod.el, originalLabel);
           }
-          draftElement.classList.add('inboxsdk__thread_row_custom_draft_part');
-          countElement = Object.assign(document.createElement('span'), {
-            className: 'inboxsdk__thread_row_custom_draft_count'
-          });
-          labelMod.el.appendChild(countElement);
-        }
-        draftElement.textContent = opts.text;
-        countElement.textContent = opts.count !== 1 ? ` (${opts.count})` : '';
-        if (needToAdd) {
-          recipientsContainer.insertBefore(labelMod.el, originalLabel);
         }
-      }
-    });
+      });
   }
-  replaceDate(opts) {
+
+  replaceDate(opts: Object) {
     if (!this._elements.length) {
       console.warn('replaceDate called on destroyed thread row');
       return;
     }
     let dateMod;
-    const prop = (0, _kefirCast.default)(_kefir.default, opts).toProperty();
-    prop.combine(this._getRefresher()).takeUntilBy(this._stopper).onValue(_ref6 => {
-      let [opts] = _ref6;
-      const dateContainer = (0, _querySelectorOrFail.default)(this._elements[0], 'td.xW, td.yf > div.apm');
-      const originalDateSpan = dateContainer.firstElementChild;
-      if (!opts) {
-        if (dateMod) {
-          dateMod.remove();
-          this._modifications.replacedDate.claimed.splice(this._modifications.replacedDate.claimed.indexOf(dateMod), 1);
-          dateMod = null;
-        }
-      } else {
-        if (!dateMod) {
-          dateMod = this._modifications.replacedDate.unclaimed.shift();
-          if (!dateMod) {
-            dateMod = {
-              el: Object.assign(document.createElement('span'), {
-                className: 'inboxsdk__thread_row_custom_date'
-              }),
-              remove() {
-                this.el.remove();
-                dateContainer.classList.remove('inboxsdk__thread_row_custom_date_container');
-              }
-            };
+    const prop: Kefir.Observable<?Object> = kefirCast(Kefir, opts).toProperty();
+    prop
+      .combine(this._getRefresher())
+      .takeUntilBy(this._stopper)
+      .onValue(([opts]) => {
+        const dateContainer = querySelector(
+          this._elements[0],
+          'td.xW, td.yf > div.apm'
+        );
+        const originalDateSpan = dateContainer.firstElementChild;
+
+        if (!opts) {
+          if (dateMod) {
+            dateMod.remove();
+            this._modifications.replacedDate.claimed.splice(
+              this._modifications.replacedDate.claimed.indexOf(dateMod),
+              1
+            );
+            dateMod = null;
           }
-          this._modifications.replacedDate.claimed.push(dateMod);
-        }
-        dateMod.el.textContent = opts.text;
-        if (opts.tooltip) {
-          dateMod.el.setAttribute('data-tooltip', opts.tooltip);
-          dateMod.el.setAttribute('aria-label', opts.tooltip);
         } else {
-          dateMod.el.removeAttribute('data-tooltip');
-          dateMod.el.removeAttribute('aria-label');
-        }
-        dateMod.el.style.color = opts.textColor || '';
-        if (!(0, _includes.default)(dateContainer.children, dateMod.el)) {
-          dateContainer.insertBefore(dateMod.el, dateContainer.firstChild);
-          dateContainer.classList.add('inboxsdk__thread_row_custom_date_container');
+          if (!dateMod) {
+            dateMod = this._modifications.replacedDate.unclaimed.shift();
+            if (!dateMod) {
+              dateMod = {
+                el: Object.assign(document.createElement('span'), {
+                  className: 'inboxsdk__thread_row_custom_date',
+                }),
+                remove() {
+                  this.el.remove();
+                  dateContainer.classList.remove(
+                    'inboxsdk__thread_row_custom_date_container'
+                  );
+                },
+              };
+            }
+            this._modifications.replacedDate.claimed.push(dateMod);
+          }
+
+          dateMod.el.textContent = opts.text;
+          if (opts.tooltip) {
+            dateMod.el.setAttribute('data-tooltip', opts.tooltip);
+            dateMod.el.setAttribute('aria-label', opts.tooltip);
+          } else {
+            dateMod.el.removeAttribute('data-tooltip');
+            dateMod.el.removeAttribute('aria-label');
+          }
+          dateMod.el.style.color = opts.textColor || '';
+
+          if (!includes(dateContainer.children, dateMod.el)) {
+            dateContainer.insertBefore(dateMod.el, dateContainer.firstChild);
+            dateContainer.classList.add(
+              'inboxsdk__thread_row_custom_date_container'
+            );
+          }
+
+          this._fixDateColumnWidth();
         }
-        this._fixDateColumnWidth();
-      }
-    });
+      });
   }
-  getEventStream() {
+
+  getEventStream(): Kefir.Observable<any> {
     return this._stopper;
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<any> {
     return this._stopper;
   }
-  getSubject() {
+
+  getSubject(): string {
     if (this._elements.length > 1) {
-      return (0, _querySelectorOrFail.default)(this._elements[1], 'div.xS div.xT div.y6 > span[id]').textContent;
+      return querySelector(this._elements[1], 'div.xS div.xT div.y6 > span[id]')
+        .textContent;
     } else {
-      return (0, _querySelectorOrFail.default)(this._elements[0], 'td.a4W div.xS div.xT div.y6 > span[id]').textContent;
+      return querySelector(
+        this._elements[0],
+        'td.a4W div.xS div.xT div.y6 > span[id]'
+      ).textContent;
     }
   }
-  getDateString() {
-    return (0, _querySelectorOrFail.default)(this._elements[0], 'td.xW > span[title]:not(.inboxsdk__thread_row_custom_date), td.yf.apt > div.apm > span[title]:not(.inboxsdk__thread_row_custom_date)').title;
+
+  getDateString(): string {
+    return querySelector(
+      this._elements[0],
+      'td.xW > span[title]:not(.inboxsdk__thread_row_custom_date), td.yf.apt > div.apm > span[title]:not(.inboxsdk__thread_row_custom_date)'
+    ).title;
   }
-  _threadIdReady() {
+
+  _threadIdReady(): boolean {
     return !!this._getThreadID();
   }
-  _getThreadID() {
+
+  _getThreadID(): ?string {
     if (this._cachedThreadID) {
       return this._cachedThreadID;
     }
+
     if (this._driver.isUsingSyncAPI()) {
-      const elementWithId = (0, _flatten.default)(this._elements.map(el => Array.from(el.querySelectorAll('[data-thread-id][data-legacy-thread-id]')))).filter(Boolean)[0];
+      const elementWithId = flatten(
+        this._elements.map((el) =>
+          Array.from(
+            el.querySelectorAll('[data-thread-id][data-legacy-thread-id]')
+          )
+        )
+      ).filter(Boolean)[0];
+
       if (elementWithId) {
-        this._cachedSyncThreadID = elementWithId.getAttribute('data-thread-id').replace('#', '');
-        this._cachedThreadID = elementWithId.getAttribute('data-legacy-thread-id').replace('#', '');
+        this._cachedSyncThreadID = elementWithId
+          .getAttribute('data-thread-id')
+          .replace('#', '');
+        this._cachedThreadID = elementWithId
+          .getAttribute('data-legacy-thread-id')
+          .replace('#', '');
+
         return this._cachedThreadID;
       } else {
-        const threadID = this._driver.getThreadRowIdentifier().getThreadIdForThreadRow(this, this._elements);
+        const threadID = this._driver
+          .getThreadRowIdentifier()
+          .getThreadIdForThreadRow(this, this._elements);
         this._cachedSyncThreadID = threadID;
+
         if (threadID) {
-          this._driver.getOldGmailThreadIdFromSyncThreadId(threadID).then(oldGmailThreadID => {
-            this._cachedThreadID = oldGmailThreadID;
-          });
+          this._driver
+            .getOldGmailThreadIdFromSyncThreadId(threadID)
+            .then((oldGmailThreadID) => {
+              this._cachedThreadID = oldGmailThreadID;
+            });
         }
       }
     } else {
-      this._cachedThreadID = this._driver.getThreadRowIdentifier().getThreadIdForThreadRow(this, this._elements);
+      this._cachedThreadID = this._driver
+        .getThreadRowIdentifier()
+        .getThreadIdForThreadRow(this, this._elements);
     }
+
     return this._cachedThreadID;
   }
-  getThreadID() {
+
+  getThreadID(): string {
     const threadID = this._getThreadID();
     if (!threadID) {
       throw new Error('Should not happen: thread id was null');
     }
     return threadID;
   }
-  getSyncThreadID() {
+
+  getSyncThreadID(): Promise<?string> {
     return Promise.resolve(this._cachedSyncThreadID);
   }
-  async getThreadIDAsync() {
+
+  async getThreadIDAsync(): Promise<string> {
     return this.getThreadID();
   }
-  getDraftID() {
+
+  getDraftID(): Promise<?string> {
     if (this._cachedSyncDraftIDPromise) return this._cachedSyncDraftIDPromise;
+
     if (this._driver.isUsingSyncAPI()) {
-      const elementWithId = (0, _flatten.default)(this._elements.map(el => Array.from(el.querySelectorAll('[data-standalone-draft-id]')))).filter(Boolean)[0];
-      this._cachedSyncDraftIDPromise = Promise.resolve(elementWithId ? elementWithId.getAttribute('data-standalone-draft-id').replace('#msg-a:', '') : null);
+      const elementWithId = flatten(
+        this._elements.map((el) =>
+          Array.from(el.querySelectorAll('[data-standalone-draft-id]'))
+        )
+      ).filter(Boolean)[0];
+
+      this._cachedSyncDraftIDPromise = Promise.resolve(
+        elementWithId
+          ? elementWithId
+              .getAttribute('data-standalone-draft-id')
+              .replace('#msg-a:', '')
+          : null
+      );
     } else {
-      this._cachedSyncDraftIDPromise = this._driver.getThreadRowIdentifier().getDraftIdForThreadRow(this);
+      this._cachedSyncDraftIDPromise = this._driver
+        .getThreadRowIdentifier()
+        .getDraftIdForThreadRow(this);
     }
+
     return this._cachedSyncDraftIDPromise;
   }
-  getVisibleDraftCount() {
+
+  getVisibleDraftCount(): number {
     return this.getCounts().draftCount;
   }
-  getVisibleMessageCount() {
+
+  getVisibleMessageCount(): number {
     return this.getCounts().messageCount;
   }
-  getContacts() {
+
+  getContacts(): Contact[] {
     const senderSpans = this._elements[0].querySelectorAll('[email]');
-    const contacts = Array.from(senderSpans).map(span => ({
+
+    const contacts = Array.from(senderSpans).map((span) => ({
       emailAddress: span.getAttribute('email'),
-      name: span.getAttribute('name')
+      name: span.getAttribute('name'),
     }));
-    return (0, _uniqBy.default)(contacts, contact => contact.emailAddress);
+
+    return uniqBy(contacts, (contact) => contact.emailAddress);
   }
-  isSelected() {
-    return !!this._elements[0].querySelector('div[role=checkbox][aria-checked=true]');
+
+  isSelected(): boolean {
+    return !!this._elements[0].querySelector(
+      'div[role=checkbox][aria-checked=true]'
+    );
   }
-  _getLabelParent() {
-    return this._elements.length > 1 ? (0, _querySelectorOrFail.default)(this._elements[this._elements.length === 2 ? 0 : 2], 'div.apu') : (0, _querySelectorOrFail.default)(this._elements[0], 'td.a4W div.xS div.xT');
+
+  _getLabelParent(): HTMLElement {
+    return this._elements.length > 1
+      ? querySelector(
+          this._elements[this._elements.length === 2 ? 0 : 2],
+          'div.apu'
+        )
+      : querySelector(this._elements[0], 'td.a4W div.xS div.xT');
   }
-  _getWatchElement() {
-    return this._elements.length === 1 ? this._elements[0] : this._elements[0].children[2];
+
+  _getWatchElement(): HTMLElement {
+    return this._elements.length === 1
+      ? this._elements[0]
+      : (this._elements[0].children[2]: any);
   }
-  _getRefresher() {
+
+  _getRefresher(): Kefir.Observable<any> {
     // Stream that emits an event after whenever Gmail replaces the ThreadRow DOM
     // nodes. One time this happens is when you have a new email in your inbox,
     // you read the email, return to the inbox, get another email, and then the
@@ -771,53 +1157,89 @@ class GmailThreadRowView {
     // us a little bit of work.
     let refresher = this._refresher;
     if (!refresher) {
-      refresher = this._refresher = (0, _makeMutationObserverChunkedStream.default)(this._getWatchElement(), {
-        childList: true
-      }).map(() => null).takeUntilBy(this._stopper).toProperty(() => null);
+      refresher = this._refresher = makeMutationObserverChunkedStream(
+        this._getWatchElement(),
+        {
+          childList: true,
+        }
+      )
+        .map(() => null)
+        .takeUntilBy(this._stopper)
+        .toProperty(() => null);
     }
+
     return refresher;
   }
-  _getSubjectRefresher() {
+
+  _getSubjectRefresher(): Kefir.Observable<any> {
     // emit an event whenever the subject element is swapped out for a new one.
     let subjectRefresher = this._subjectRefresher;
     if (!subjectRefresher) {
       if (this._isVertical) {
-        subjectRefresher = this._subjectRefresher = _kefir.default.constant(null);
+        subjectRefresher = this._subjectRefresher = Kefir.constant(null);
       } else {
         const watchElement = this._getWatchElement();
-        const subjectElement = (0, _querySelectorOrFail.default)(watchElement, '.y6');
-        subjectRefresher = this._subjectRefresher = (0, _makeMutationObserverChunkedStream.default)(subjectElement, {
-          childList: true
-        }).map(() => null).takeUntilBy(this._stopper).toProperty(() => null);
+        const subjectElement = querySelector(watchElement, '.y6');
+        subjectRefresher = this._subjectRefresher =
+          makeMutationObserverChunkedStream(subjectElement, {
+            childList: true,
+          })
+            .map(() => null)
+            .takeUntilBy(this._stopper)
+            .toProperty(() => null);
       }
     }
+
     return subjectRefresher;
   }
-  _getImageContainerRefresher() {
+
+  _getImageContainerRefresher(): Kefir.Observable<any> {
     let imageRefresher = this._imageRefresher;
     if (!imageRefresher) {
       if (this._isVertical) {
-        const containerRow = this._elements.length === 3 ? this._elements[2] : this._elements[0];
-        const classChangeStream = (0, _makeMutationObserverChunkedStream.default)(containerRow, {
-          attributes: true,
-          attributeFilter: ['class']
-        });
-        imageRefresher = this._imageRefresher = classChangeStream.bufferBy(classChangeStream.flatMapLatest(() => (0, _delayAsap.default)())).filter(() => containerRow.querySelectorAll('.inboxsdk__thread_row_icon_wrapper').length > 0 && !containerRow.classList.contains('inboxsdk__thread_row_image_added')).map(() => null).takeUntilBy(this._stopper).toProperty(() => null);
+        const containerRow =
+          this._elements.length === 3 ? this._elements[2] : this._elements[0];
+        const classChangeStream = makeMutationObserverChunkedStream(
+          containerRow,
+          {
+            attributes: true,
+            attributeFilter: ['class'],
+          }
+        );
+
+        imageRefresher = this._imageRefresher = classChangeStream
+          .bufferBy(classChangeStream.flatMapLatest(() => delayAsap()))
+          .filter(
+            () =>
+              containerRow.querySelectorAll(
+                '.inboxsdk__thread_row_icon_wrapper'
+              ).length > 0 &&
+              !containerRow.classList.contains(
+                'inboxsdk__thread_row_image_added'
+              )
+          )
+          .map(() => null)
+          .takeUntilBy(this._stopper)
+          .toProperty(() => null);
       } else {
-        imageRefresher = this._imageRefresher = _kefir.default.constant(null);
+        imageRefresher = this._imageRefresher = Kefir.constant(null);
       }
     }
+
     return imageRefresher;
   }
 }
-var _default = (0, _ud.defn)(module, GmailThreadRowView);
-exports.default = _default;
-function removeAllThreadRowUnclaimedModifications() {
+
+export default defn(module, GmailThreadRowView);
+
+export function removeAllThreadRowUnclaimedModifications() {
   // run in a setTimeout so that the thread rows get destroyed
   // and populate the unclaimed modifications
   setTimeout(() => {
-    const modifiedRows = document.querySelectorAll('tr[data-inboxsdk-thread-row]');
-    Array.prototype.forEach.call(modifiedRows, row => {
+    const modifiedRows = document.querySelectorAll(
+      'tr[data-inboxsdk-thread-row]'
+    );
+    Array.prototype.forEach.call(modifiedRows, (row) => {
       const modifications = cachedModificationsByRow.get(row);
       if (modifications) {
         _removeThreadRowUnclaimedModifications(modifications);
@@ -825,6 +1247,7 @@ function removeAllThreadRowUnclaimedModifications() {
     });
   }, 15);
 }
+
 function _removeThreadRowUnclaimedModifications(modifications) {
   for (let ii = 0; ii < modifications.label.unclaimed.length; ii++) {
     const mod = modifications.label.unclaimed[ii];
@@ -844,15 +1267,21 @@ function _removeThreadRowUnclaimedModifications(modifications) {
     mod.remove();
   }
   modifications.image.unclaimed.length = 0;
+
   for (let ii = 0; ii < modifications.replacedDate.unclaimed.length; ii++) {
     const mod = modifications.replacedDate.unclaimed[ii];
     //console.log('removing unclaimed replacedDate mod', mod);
     mod.remove();
   }
   modifications.replacedDate.unclaimed.length = 0;
-  for (let ii = 0; ii < modifications.replacedDraftLabel.unclaimed.length; ii++) {
+
+  for (
+    let ii = 0;
+    ii < modifications.replacedDraftLabel.unclaimed.length;
+    ii++
+  ) {
     const mod = modifications.replacedDraftLabel.unclaimed[ii];
     mod.remove();
   }
   modifications.replacedDraftLabel.unclaimed.length = 0;
-}
+}