@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

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

@@ -1,94 +1,105 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _includes = _interopRequireDefault(require("lodash/includes"));
-var _last = _interopRequireDefault(require("lodash/last"));
-var _once = _interopRequireDefault(require("lodash/once"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _querystring = require("querystring");
-var _asap = _interopRequireDefault(require("asap"));
-var _ud = require("ud");
-var _makeElementChildStream = _interopRequireDefault(require("../../../../lib/dom/make-element-child-stream"));
-var _makeElementViewStream = _interopRequireDefault(require("../../../../lib/dom/make-element-view-stream"));
-var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../../lib/dom/make-mutation-observer-chunked-stream"));
-var _getInsertBeforeElement = _interopRequireDefault(require("../../../../lib/dom/get-insert-before-element"));
-var _gmailRowListView = _interopRequireDefault(require("../gmail-row-list-view"));
-var _gmailThreadView = _interopRequireDefault(require("../gmail-thread-view"));
-var _gmailCollapsibleSectionView = _interopRequireDefault(require("../gmail-collapsible-section-view"));
-var _gmailElementGetter = _interopRequireDefault(require("../../gmail-element-getter"));
-var _simulateMouseEvent = require("../../../../lib/dom/simulate-mouse-event");
-var _querySelectorOrFail = _interopRequireDefault(require("../../../../lib/dom/querySelectorOrFail"));
+/* @flow */
+
+import includes from 'lodash/includes';
+import last from 'lodash/last';
+import once from 'lodash/once';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+import { parse } from 'querystring';
+
+import asap from 'asap';
+import { defn } from 'ud';
+
+import makeElementChildStream from '../../../../lib/dom/make-element-child-stream';
+import makeElementViewStream from '../../../../lib/dom/make-element-view-stream';
+import makeMutationObserverChunkedStream from '../../../../lib/dom/make-mutation-observer-chunked-stream';
+import getInsertBeforeElement from '../../../../lib/dom/get-insert-before-element';
+import type { RouteViewDriver } from '../../../../driver-interfaces/route-view-driver';
+import GmailRowListView from '../gmail-row-list-view';
+import GmailThreadView from '../gmail-thread-view';
+import GmailCollapsibleSectionView from '../gmail-collapsible-section-view';
+import GmailElementGetter from '../../gmail-element-getter';
+
+import { simulateClick } from '../../../../lib/dom/simulate-mouse-event';
+import querySelector from '../../../../lib/dom/querySelectorOrFail';
+
+import type GmailDriver from '../../gmail-driver';
+import type GmailRouteProcessor from '../gmail-route-view/gmail-route-processor';
+import type GmailPageCommunicator from '../../gmail-page-communicator';
+
 class GmailRouteView {
-  constructor(_ref, gmailRouteProcessor, driver) {
-    let {
-      urlObject,
-      type,
-      routeID: _routeID,
-      cachedRouteData
-    } = _ref;
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
-    (0, _defineProperty2.default)(this, "getParams", (0, _once.default)(() => {
-      let params;
-      if (this._customRouteID) {
-        params = this._getCustomParams();
-      } else {
-        params = this._getNativeParams();
-        const routeID = this.getRouteID();
-        if (routeID) {
-          const routeIDParams = this._extractParamKeysFromRouteID(routeID);
-          const routeParams = {};
-          routeIDParams.forEach(function (param) {
-            if (params[param]) {
-              routeParams[param] = params[param];
-            }
-          });
-          params = routeParams;
-        }
-      }
-      return Object.freeze(params);
-    }));
-    (0, _defineProperty2.default)(this, "_getThreadContainerElement", (0, _once.default)(() => {
-      return _gmailElementGetter.default.getThreadContainerElement();
-    }));
+  _type: string;
+  _hash: string;
+  _name: string;
+  _paramsArray: string[];
+  _customRouteID: ?string;
+  _stopper = kefirStopper();
+  _rowListViews: GmailRowListView[];
+  _gmailRouteProcessor: GmailRouteProcessor;
+  _driver: GmailDriver;
+  _eventStream: Bus<any>;
+  _customViewElement: ?HTMLElement;
+  _threadView: ?GmailThreadView;
+  _sectionsContainer: ?HTMLElement;
+  _hasAddedCollapsibleSection: boolean;
+  _cachedRouteData: Object;
+
+  constructor(
+    { urlObject, type, routeID, cachedRouteData }: Object,
+    gmailRouteProcessor: GmailRouteProcessor,
+    driver: GmailDriver
+  ) {
     // Check we implement interface
-    this;
+    (this: RouteViewDriver);
+
     this._type = type;
     this._hash = urlObject.hash;
     this._name = urlObject.name;
     this._paramsArray = urlObject.params;
-    this._customRouteID = _routeID;
+    this._customRouteID = routeID;
     this._cachedRouteData = cachedRouteData;
-    this._stopper = (0, _kefirStopper.default)();
+
+    this._stopper = kefirStopper();
     this._rowListViews = [];
+
     this._gmailRouteProcessor = gmailRouteProcessor;
     this._driver = driver;
-    this._eventStream = (0, _kefirBus.default)();
+
+    this._eventStream = kefirBus();
+
     this._hasAddedCollapsibleSection = false;
+
     if (this._type === 'CUSTOM') {
       this._setupCustomViewElement();
-      driver.getStopper().takeUntilBy(this._stopper.delay(0)).onValue(() => {
-        driver.showNativeRouteView();
-        window.location.hash = '#inbox';
-      });
-    } else if ((0, _includes.default)(['NATIVE', 'CUSTOM_LIST'], this._type)) {
+      driver
+        .getStopper()
+        .takeUntilBy(this._stopper.delay(0))
+        .onValue(() => {
+          driver.showNativeRouteView();
+          window.location.hash = '#inbox';
+        });
+    } else if (includes(['NATIVE', 'CUSTOM_LIST'], this._type)) {
       this._setupSubViews();
     }
+
     if (this._type === 'CUSTOM_LIST') {
-      _kefir.default.later(500).takeUntilBy(this._stopper).onValue(() => {
-        var last = driver.getLastCustomThreadListActivity();
-        if (!last || last.customRouteID !== this._customRouteID || Date.now() - last.timestamp > 5000) {
-          this.refresh();
-        }
-      });
+      Kefir.later(500)
+        .takeUntilBy(this._stopper)
+        .onValue(() => {
+          var last = driver.getLastCustomThreadListActivity();
+          if (
+            !last ||
+            last.customRouteID !== this._customRouteID ||
+            Date.now() - last.timestamp > 5000
+          ) {
+            this.refresh();
+          }
+        });
     }
   }
+
   destroy() {
     this._stopper.destroy();
     this._eventStream.end();
@@ -97,7 +108,7 @@ class GmailRouteView {
     }
     var rowListViews = this._rowListViews;
     this._rowListViews = [];
-    rowListViews.forEach(view => {
+    rowListViews.forEach((view) => {
       view.destroy();
     });
     if (this._threadView) {
@@ -105,180 +116,322 @@ class GmailRouteView {
       this._threadView = null;
     }
   }
-  getHash() {
+
+  getHash(): string {
     return this._hash;
   }
-  getEventStream() {
+  getEventStream(): Kefir.Observable<Object> {
     return this._eventStream;
   }
-  getStopper() {
+  getStopper(): Kefir.Observable<null> {
     return this._stopper;
   }
-  getCustomViewElement() {
+  getCustomViewElement(): ?HTMLElement {
     return this._customViewElement;
   }
-  getRowListViews() {
+  getRowListViews(): GmailRowListView[] {
     return this._rowListViews;
   }
-  getThreadView() {
+  getThreadView(): ?GmailThreadView {
     return this._threadView;
   }
-  getType() {
+
+  getType(): string {
     if (this._type === 'OTHER_APP_CUSTOM') {
       return 'CUSTOM';
     } else {
       return this._type;
     }
   }
-  isCustomRouteBelongingToApp() {
+
+  isCustomRouteBelongingToApp(): boolean {
     return this._type === 'CUSTOM';
   }
-  addCollapsibleSection(sectionDescriptorProperty, groupOrderHint) {
-    return this._addCollapsibleSection(sectionDescriptorProperty, groupOrderHint, true);
+
+  getParams: () => { [ix: string]: string } = once(() => {
+    let params;
+    if (this._customRouteID) {
+      params = this._getCustomParams();
+    } else {
+      params = this._getNativeParams();
+      const routeID = this.getRouteID();
+      if (routeID) {
+        const routeIDParams = this._extractParamKeysFromRouteID(routeID);
+        const routeParams = {};
+        routeIDParams.forEach(function (param) {
+          if (params[param]) {
+            routeParams[param] = params[param];
+          }
+        });
+
+        params = routeParams;
+      }
+    }
+
+    return Object.freeze(params);
+  });
+
+  addCollapsibleSection(
+    sectionDescriptorProperty: Kefir.Observable<?Object>,
+    groupOrderHint: any
+  ): GmailCollapsibleSectionView {
+    return this._addCollapsibleSection(
+      sectionDescriptorProperty,
+      groupOrderHint,
+      true
+    );
   }
-  addSection(sectionDescriptorProperty, groupOrderHint) {
-    return this._addCollapsibleSection(sectionDescriptorProperty, groupOrderHint, false);
+
+  addSection(
+    sectionDescriptorProperty: Kefir.Observable<?Object>,
+    groupOrderHint: any
+  ): GmailCollapsibleSectionView {
+    return this._addCollapsibleSection(
+      sectionDescriptorProperty,
+      groupOrderHint,
+      false
+    );
   }
-  _addCollapsibleSection(collapsibleSectionDescriptorProperty, groupOrderHint, isCollapsible) {
+
+  _addCollapsibleSection(
+    collapsibleSectionDescriptorProperty: Object,
+    groupOrderHint: any,
+    isCollapsible: boolean
+  ): GmailCollapsibleSectionView {
     this._hasAddedCollapsibleSection = true;
-    var gmailResultsSectionView = new _gmailCollapsibleSectionView.default(this._driver, groupOrderHint, this.getRouteID() === this._gmailRouteProcessor.NativeRouteIDs.SEARCH, isCollapsible);
+
+    var gmailResultsSectionView = new GmailCollapsibleSectionView(
+      this._driver,
+      groupOrderHint,
+      this.getRouteID() === this._gmailRouteProcessor.NativeRouteIDs.SEARCH,
+      isCollapsible
+    );
+
     var sectionsContainer = this._getSectionsContainer();
-    gmailResultsSectionView.getEventStream().filter(function (event) {
-      return event.type === 'update' && event.property === 'orderHint';
-    }).onValue(function () {
-      var children = sectionsContainer.children;
-      var insertBeforeElement = (0, _getInsertBeforeElement.default)(gmailResultsSectionView.getElement(), children, ['data-group-order-hint', 'data-order-hint']);
-      if (insertBeforeElement) {
-        sectionsContainer.insertBefore(gmailResultsSectionView.getElement(), insertBeforeElement);
-      } else {
-        sectionsContainer.appendChild(gmailResultsSectionView.getElement());
-      }
-    });
-    gmailResultsSectionView.setCollapsibleSectionDescriptorProperty(collapsibleSectionDescriptorProperty);
+    gmailResultsSectionView
+      .getEventStream()
+      .filter(function (event) {
+        return event.type === 'update' && event.property === 'orderHint';
+      })
+      .onValue(function () {
+        var children = sectionsContainer.children;
+        var insertBeforeElement = getInsertBeforeElement(
+          gmailResultsSectionView.getElement(),
+          children,
+          ['data-group-order-hint', 'data-order-hint']
+        );
+        if (insertBeforeElement) {
+          sectionsContainer.insertBefore(
+            gmailResultsSectionView.getElement(),
+            insertBeforeElement
+          );
+        } else {
+          sectionsContainer.appendChild(gmailResultsSectionView.getElement());
+        }
+      });
+
+    gmailResultsSectionView.setCollapsibleSectionDescriptorProperty(
+      collapsibleSectionDescriptorProperty
+    );
+
     return gmailResultsSectionView;
   }
+
   _setupCustomViewElement() {
     this._customViewElement = document.createElement('div');
     this._customViewElement.classList.add('inboxsdk__custom_view_element');
+
     this._monitorLeftNavHeight();
     this._setCustomViewElementHeight();
   }
+
   _monitorLeftNavHeight() {
-    var leftNav = _gmailElementGetter.default.getLeftNavHeightElement();
+    var leftNav = GmailElementGetter.getLeftNavHeightElement();
+
     if (!leftNav) {
       return;
     }
-    (0, _makeMutationObserverChunkedStream.default)(leftNav, {
+
+    makeMutationObserverChunkedStream(leftNav, {
       attributes: true,
-      attributeFilter: ['style']
-    }).takeUntilBy(this._stopper).onValue(() => {
-      this._setCustomViewElementHeight();
-    });
+      attributeFilter: ['style'],
+    })
+      .takeUntilBy(this._stopper)
+      .onValue(() => {
+        this._setCustomViewElementHeight();
+      });
   }
+
   _setCustomViewElementHeight() {
-    const leftNav = _gmailElementGetter.default.getLeftNavHeightElement();
-    const gtalkButtons = _gmailElementGetter.default.getGtalkButtons();
+    const leftNav = GmailElementGetter.getLeftNavHeightElement();
+    const gtalkButtons = GmailElementGetter.getGtalkButtons();
     const customViewEl = this._customViewElement;
     if (!leftNav || !customViewEl) throw new Error('Should not happen');
-    customViewEl.style.height = `${parseInt(leftNav.style.height, 10) + (gtalkButtons ? gtalkButtons.offsetHeight : 0)}px`;
+    customViewEl.style.height = `${
+      parseInt(leftNav.style.height, 10) +
+      (gtalkButtons ? gtalkButtons.offsetHeight : 0)
+    }px`;
   }
+
   _setupSubViews() {
-    (0, _asap.default)(() => {
+    asap(() => {
       if (!this._eventStream) return;
+
       this._setupRowListViews();
       this._setupContentAndSidebarView();
       this._setupScrollStream();
     });
   }
+
   _setupRowListViews() {
-    var rowListElements = _gmailElementGetter.default.getRowListElements();
-    Array.prototype.forEach.call(rowListElements, rowListElement => {
+    var rowListElements = GmailElementGetter.getRowListElements();
+
+    Array.prototype.forEach.call(rowListElements, (rowListElement) => {
       this._processRowListElement(rowListElement);
     });
   }
-  _processRowListElement(rowListElement) {
+
+  _processRowListElement(rowListElement: HTMLElement) {
     var rootElement = rowListElement.parentElement;
     if (!rootElement) throw new Error('no rootElement');
-    var gmailRowListView = new _gmailRowListView.default(rootElement, this, this._driver);
+    var gmailRowListView = new GmailRowListView(
+      (rootElement: any),
+      this,
+      this._driver
+    );
+
     this._rowListViews.push(gmailRowListView);
+
     this._eventStream.emit({
       eventName: 'newGmailRowListView',
-      view: gmailRowListView
+      view: gmailRowListView,
     });
   }
+
   _setupContentAndSidebarView() {
     const threadContainerElement = this._getThreadContainerElement();
     if (threadContainerElement) {
-      var gmailThreadView = new _gmailThreadView.default(threadContainerElement, this, this._driver);
+      var gmailThreadView = new GmailThreadView(
+        threadContainerElement,
+        this,
+        this._driver
+      );
+
       this._threadView = gmailThreadView;
+
       this._eventStream.emit({
         eventName: 'newGmailThreadView',
-        view: gmailThreadView
+        view: gmailThreadView,
       });
     } else {
       // This element is always present in thread lists, but it only has contents
       // when in preview pane mode. We want to monitor it in either case
       // because the user could switch into preview pane mode.
-      const previewPaneContainer = document.querySelector('div[role=main] .aia');
+      const previewPaneContainer = document.querySelector(
+        'div[role=main] .aia'
+      );
       if (previewPaneContainer) {
         this._startMonitoringPreviewPaneForThread(previewPaneContainer);
       }
     }
   }
+
   _setupScrollStream() {
     const SCROLL_DEBOUNCE_MS = 100;
-    const scrollContainer = _gmailElementGetter.default.getScrollContainer();
-    const {
-      scrollTop: cachedScrollTop
-    } = this._cachedRouteData;
+    const scrollContainer = GmailElementGetter.getScrollContainer();
+    const { scrollTop: cachedScrollTop } = this._cachedRouteData;
     if (scrollContainer && this._hasAddedCollapsibleSection) {
       if (cachedScrollTop) {
         scrollContainer.scrollTop = cachedScrollTop;
       }
-      _kefir.default.fromEvents(scrollContainer, 'scroll').throttle(SCROLL_DEBOUNCE_MS).map(e => e.target.scrollTop).takeUntilBy(this._stopper).onValue(scrollTop => {
-        this._cachedRouteData.scrollTop = scrollTop;
-      });
+      Kefir.fromEvents(scrollContainer, 'scroll')
+        .throttle(SCROLL_DEBOUNCE_MS)
+        .map((e) => e.target.scrollTop)
+        .takeUntilBy(this._stopper)
+        .onValue((scrollTop) => {
+          this._cachedRouteData.scrollTop = scrollTop;
+        });
     }
   }
-  _startMonitoringPreviewPaneForThread(previewPaneContainer) {
-    const threadContainerTableElement = (0, _querySelectorOrFail.default)(previewPaneContainer, 'table.Bs > tr');
-    const elementStream = (0, _makeElementChildStream.default)(threadContainerTableElement).filter(event => !!event.el.querySelector('.if') || !!event.el.querySelector('.PeIF1d') || !!event.el.querySelector('.a98.iY'));
-    this._eventStream.plug(elementStream.flatMap((0, _makeElementViewStream.default)(element => new _gmailThreadView.default(element, this, this._driver, true))).map(view => {
-      this._threadView = view;
-      return {
-        eventName: 'newGmailThreadView',
-        view: view
-      };
-    }));
+
+  _startMonitoringPreviewPaneForThread(previewPaneContainer: HTMLElement) {
+    const threadContainerTableElement = querySelector(
+      previewPaneContainer,
+      'table.Bs > tr'
+    );
+
+    const elementStream = makeElementChildStream(
+      threadContainerTableElement
+    ).filter(
+      (event) =>
+        !!event.el.querySelector('.if') ||
+        !!event.el.querySelector('.PeIF1d') ||
+        !!event.el.querySelector('.a98.iY')
+    );
+
+    this._eventStream.plug(
+      elementStream
+        .flatMap(
+          makeElementViewStream(
+            (element) =>
+              new (GmailThreadView: any)(element, this, this._driver, true)
+          )
+        )
+        .map((view) => {
+          this._threadView = view;
+          return {
+            eventName: 'newGmailThreadView',
+            view: view,
+          };
+        })
+    );
   }
-  _getSectionsContainer() {
+
+  _getSectionsContainer(): HTMLElement {
     const main = document.querySelector("div[role='main']");
     if (!main) throw new Error('should not happen');
     let sectionsContainer = main.querySelector('.inboxsdk__custom_sections');
     if (!sectionsContainer) {
-      sectionsContainer = this._sectionsContainer = document.createElement('div');
+      sectionsContainer = this._sectionsContainer =
+        document.createElement('div');
       sectionsContainer.classList.add('inboxsdk__custom_sections');
+
       main.insertBefore(sectionsContainer, main.firstChild);
-    } else if (sectionsContainer.classList.contains('Wc') && !this._isSearchRoute()) {
+    } else if (
+      sectionsContainer.classList.contains('Wc') &&
+      !this._isSearchRoute()
+    ) {
       sectionsContainer.classList.remove('Wc');
     }
+
     return sectionsContainer;
   }
-  _getCustomParams() {
-    var params = Object.create(null);
-    if (!this._customRouteID) throw new Error("Should not happen, can't get custom params for non-custom view");
-    this._customRouteID.split('/').slice(1).forEach((part, index) => {
-      if (part[0] !== ':') {
-        return;
-      }
-      part = part.substring(1);
-      if (this._paramsArray[index]) {
-        params[part] = this._paramsArray[index];
-      }
-    });
+
+  _getCustomParams(): Object {
+    var params: Object = Object.create(null);
+
+    if (!this._customRouteID)
+      throw new Error(
+        "Should not happen, can't get custom params for non-custom view"
+      );
+    this._customRouteID
+      .split('/')
+      .slice(1)
+      .forEach((part, index) => {
+        if (part[0] !== ':') {
+          return;
+        }
+        part = part.substring(1);
+
+        if (this._paramsArray[index]) {
+          params[part] = this._paramsArray[index];
+        }
+      });
+
     return params;
   }
-  _getNativeParams() {
+
+  _getNativeParams(): Object {
     if (this._isSearchRoute()) {
       return this._getSearchRouteParams();
     } else if (this._isListRoute()) {
@@ -290,11 +443,15 @@ class GmailRouteView {
     }
     return {};
   }
-  _isSearchRoute() {
-    return this.getRouteID() === this._gmailRouteProcessor.NativeRouteIDs.SEARCH;
+
+  _isSearchRoute(): boolean {
+    return (
+      this.getRouteID() === this._gmailRouteProcessor.NativeRouteIDs.SEARCH
+    );
   }
-  getRouteType() {
-    if ((0, _includes.default)(['CUSTOM', 'OTHER_APP_CUSTOM'], this._type)) {
+
+  getRouteType(): string {
+    if (includes(['CUSTOM', 'OTHER_APP_CUSTOM'], this._type)) {
       return this._gmailRouteProcessor.RouteTypes.CUSTOM;
     } else if (this._isListRoute()) {
       return this._gmailRouteProcessor.RouteTypes.LIST;
@@ -303,77 +460,103 @@ class GmailRouteView {
     } else if (this._isSettingsRoute()) {
       return this._gmailRouteProcessor.RouteTypes.SETTINGS;
     }
+
     return this._gmailRouteProcessor.RouteTypes.UNKNOWN;
   }
-  _isThreadRoute() {
+
+  _isThreadRoute(): boolean {
     return !!this._getThreadContainerElement();
   }
-  _isListRoute() {
-    var rowListElements = _gmailElementGetter.default.getRowListElements();
-    return (this._type === 'CUSTOM_LIST' || this._gmailRouteProcessor.isListRouteName(this._name)) && rowListElements && rowListElements.length > 0;
+
+  _isListRoute(): boolean {
+    var rowListElements = GmailElementGetter.getRowListElements();
+
+    return (
+      (this._type === 'CUSTOM_LIST' ||
+        this._gmailRouteProcessor.isListRouteName(this._name)) &&
+      rowListElements &&
+      rowListElements.length > 0
+    );
   }
-  _isSettingsRoute() {
+
+  _isSettingsRoute(): boolean {
     return this._gmailRouteProcessor.isSettingsRouteName(this._name);
   }
-  _getSearchRouteParams() {
+
+  _getSearchRouteParams(): Object {
     return {
       query: this._paramsArray[0],
       includesDriveResults: this._name === 'apps',
-      page: this._getPageParam()
+      page: this._getPageParam(),
     };
   }
-  _getListRouteParams() {
-    var params = {
-      page: this._getPageParam()
+
+  _getListRouteParams(): Object {
+    var params: Object = {
+      page: this._getPageParam(),
     };
-    if (this.getRouteID() === this._gmailRouteProcessor.NativeRouteIDs.LABEL && this._paramsArray[0]) {
+
+    if (
+      this.getRouteID() === this._gmailRouteProcessor.NativeRouteIDs.LABEL &&
+      this._paramsArray[0]
+    ) {
       params.labelName = this._paramsArray[0];
     }
+
     return params;
   }
-  _getThreadRouteParams() {
+
+  _getThreadRouteParams(): Object {
     if (this._paramsArray && this._paramsArray.length > 0) {
-      const threadID = (0, _last.default)(this._paramsArray);
-      if (threadID && (threadID.length === 16 ||
-      //for old hex style
-      threadID[0] === '#') //new sync style thread id
+      const threadID = last(this._paramsArray);
+
+      if (
+        threadID &&
+        (threadID.length === 16 || //for old hex style
+          threadID[0] === '#') //new sync style thread id
       ) {
         return {
-          threadID: threadID.replace('#', '')
+          threadID: threadID.replace('#', ''),
         };
       }
     }
+
     const threadContainerElement = this._getThreadContainerElement();
     let threadID;
     if (threadContainerElement) {
       try {
-        threadID = this._driver.getPageCommunicator().getCurrentThreadID(threadContainerElement);
+        threadID = this._driver
+          .getPageCommunicator()
+          .getCurrentThreadID(threadContainerElement);
       } catch (err) {
         // leave threadID null to be set below
       }
     }
     if (!threadID) {
       // Happens if gmonkey isn't available, like on a standalone thread page.
-      threadID = (0, _querystring.parse)(document.location.search, null, null).th || '';
+      threadID = parse(document.location.search, null, null).th || '';
     }
-    return {
-      threadID
-    };
+
+    return { threadID };
   }
-  _getSettingsRouteParams() {
+
+  _getSettingsRouteParams(): Object {
     return {
-      tabName: this._paramsArray[0]
+      tabName: this._paramsArray[0],
     };
   }
-  _getPageParam() {
+
+  _getPageParam(): number {
     for (var ii = 1; ii < this._paramsArray.length; ii++) {
       if (this._paramsArray[ii].match(/p\d+/)) {
         return parseInt(this._paramsArray[ii].replace(/[a-zA-Z]/, ''), 10);
       }
     }
+
     return 1;
   }
-  getRouteID() {
+
+  getRouteID(): string {
     if (this._customRouteID) {
       return this._customRouteID;
     } else if (this._isThreadRoute()) {
@@ -385,11 +568,11 @@ class GmailRouteView {
 
   // Used to click gmail refresh button in thread lists
   refresh() {
-    var el = _gmailElementGetter.default.getToolbarElement().querySelector('div.T-I.nu');
+    var el = GmailElementGetter.getToolbarElement().querySelector('div.T-I.nu');
     if (el) {
       var prevActive = document.activeElement;
       var prevClassName = el.className;
-      (0, _simulateMouseEvent.simulateClick)(el);
+      simulateClick(el);
       el.className = prevClassName; // remove the gmail focus class
       if (prevActive) {
         prevActive.focus();
@@ -398,12 +581,21 @@ class GmailRouteView {
       }
     }
   }
-  setFullWidth(fullWidth) {
+
+  setFullWidth(fullWidth: boolean) {
     // The setFullWidth method does not do anything in Gmail
   }
-  _extractParamKeysFromRouteID(routeID) {
-    return routeID.split('/').filter(part => part[0] === ':').map(part => part.substring(1));
+
+  _extractParamKeysFromRouteID(routeID: string): string[] {
+    return routeID
+      .split('/')
+      .filter((part) => part[0] === ':')
+      .map((part) => part.substring(1));
   }
+
+  _getThreadContainerElement: () => ?HTMLElement = once(() => {
+    return GmailElementGetter.getThreadContainerElement();
+  });
 }
-var _default = (0, _ud.defn)(module, GmailRouteView);
-exports.default = _default;
+
+export default defn(module, GmailRouteView);