@inboxsdk/core 0.2.28 → 0.2.29-alpha.1

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-sidebar-view/primary/index.js

@@ -1,36 +1,34 @@
-/* @flow */
-
-import find from 'lodash/find';
-import findIndex from 'lodash/findIndex';
-import { defn } from 'ud';
-import autoHtml from 'auto-html';
-import asap from 'asap';
-import Kefir from 'kefir';
-import kefirBus from 'kefir-bus';
-import type { Bus } from 'kefir-bus';
-import kefirStopper from 'kefir-stopper';
-import OrderManager from 'order-manager';
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import AppSidebar from '../../../../../driver-common/sidebar/AppSidebar';
-import type { PanelDescriptor } from '../../../../../driver-common/sidebar/AppSidebar';
-
-import type GmailDriver from '../../../gmail-driver';
-import GmailElementGetter from '../../../gmail-element-getter';
-import idMap from '../../../../../lib/idMap';
-import incrementName from '../../../../../lib/incrementName';
-import querySelector from '../../../../../lib/dom/querySelectorOrFail';
-import makeMutationObserverChunkedStream from '../../../../../lib/dom/make-mutation-observer-chunked-stream';
-import makeElementChildStream from '../../../../../lib/dom/make-element-child-stream';
-import { simulateClick } from '../../../../../lib/dom/simulate-mouse-event';
-import fakeWindowResize from '../../../../../lib/fake-window-resize';
-
-import addCompanionThreadIconArea from './add-companion-thread-icon-area';
-import addCompanionGlobalIconArea from './add-companion-global-icon-area';
-import addToIconArea from './add-to-icon-area';
-
+"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 _find = _interopRequireDefault(require("lodash/find"));
+var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
+var _ud = require("ud");
+var _autoHtml = _interopRequireDefault(require("auto-html"));
+var _asap = _interopRequireDefault(require("asap"));
+var _kefir = _interopRequireDefault(require("kefir"));
+var _kefirBus = _interopRequireDefault(require("kefir-bus"));
+var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
+var _orderManager = _interopRequireDefault(require("order-manager"));
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _AppSidebar = _interopRequireDefault(require("../../../../../driver-common/sidebar/AppSidebar"));
+var _gmailElementGetter = _interopRequireDefault(require("../../../gmail-element-getter"));
+var _idMap = _interopRequireDefault(require("../../../../../lib/idMap"));
+var _incrementName = _interopRequireDefault(require("../../../../../lib/incrementName"));
+var _querySelectorOrFail = _interopRequireDefault(require("../../../../../lib/dom/querySelectorOrFail"));
+var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../../../lib/dom/make-mutation-observer-chunked-stream"));
+var _makeElementChildStream = _interopRequireDefault(require("../../../../../lib/dom/make-element-child-stream"));
+var _simulateMouseEvent = require("../../../../../lib/dom/simulate-mouse-event");
+var _fakeWindowResize = _interopRequireDefault(require("../../../../../lib/fake-window-resize"));
+var _addCompanionThreadIconArea = _interopRequireDefault(require("./add-companion-thread-icon-area"));
+var _addCompanionGlobalIconArea = _interopRequireDefault(require("./add-companion-global-icon-area"));
+var _addToIconArea = _interopRequireDefault(require("./add-to-icon-area"));
 const ACTIVE_ADD_ON_ICON_SELECTOR = '.aT5-aOt-I-KO';
 const COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS = 'brC-brG-btc';
 
@@ -39,75 +37,54 @@ const COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS = 'brC-brG-btc';
 // instances (including from other extensions) communicate with this Primary
 // through DOM events.
 class GmailAppSidebarPrimary {
-  _stopper = kefirStopper();
-
-  // There could be multiple InboxSDK instances (and therefore GmailDrivers)
-  // talking to this Primary, so we shouldn't privilege the specific GmailDriver
-  // that happened to create the Primary. Only use this GmailDriver for
-  // logging-related functionality!
-  _driver: GmailDriver;
-
   // This Primary has an identifier used by the DOM events to specify they're
   // talking to this Primary. This leaves us some room for having multiple
   // Primary instances (representing different visual locations in Gmail) or
   // multiple classes that make use of the same DOM events, but we don't make
   // use of that now. Mainly I didn't want to risk baking in the singleton
   // nature too deeply; that always seems to bite me.
-  _instanceId: string = `${Date.now()}-${Math.random()}`;
-
-  _companionSidebarContentContainerEl: HTMLElement;
-  _instanceIdsToDescriptors: Map<string, Object> = new Map();
-
-  _threadSidebarComponent: ?AppSidebar = null;
-
-  _threadIconArea: ?HTMLElement = null;
-  _globalIconArea: ?HTMLElement = null;
-
-  _globalButtonContainers: Map<string, HTMLElement> = new Map();
-  _threadButtonContainers: Map<string, HTMLElement> = new Map();
-  _contentContainers: Map<string, HTMLElement> = new Map();
 
-  _threadSidebarContainerEl: ?HTMLElement = null;
-  _companionSidebarOuterWrapper: HTMLElement;
-
-  _currentIds: Set<string> = new Set();
+  constructor(driver, companionSidebarContentContainerElement) {
+    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+    (0, _defineProperty2.default)(this, "_instanceId", `${Date.now()}-${Math.random()}`);
+    (0, _defineProperty2.default)(this, "_instanceIdsToDescriptors", new Map());
+    (0, _defineProperty2.default)(this, "_threadSidebarComponent", null);
+    (0, _defineProperty2.default)(this, "_threadIconArea", null);
+    (0, _defineProperty2.default)(this, "_globalIconArea", null);
+    (0, _defineProperty2.default)(this, "_globalButtonContainers", new Map());
+    (0, _defineProperty2.default)(this, "_threadButtonContainers", new Map());
+    (0, _defineProperty2.default)(this, "_contentContainers", new Map());
+    (0, _defineProperty2.default)(this, "_threadSidebarContainerEl", null);
+    (0, _defineProperty2.default)(this, "_currentIds", new Set());
+    (0, _defineProperty2.default)(this, "_orderManager", new _orderManager.default({
+      get() {
+        try {
+          return JSON.parse(global.localStorage.getItem('inboxsdk__sidebar_ordering') || 'null');
+        } catch (err) {
+          console.error('failed to read sidebar order data', err); //eslint-disable-line no-console
+        }
+      },
 
-  _orderManager = new OrderManager<PanelDescriptor>({
-    get() {
-      try {
-        return JSON.parse(
-          global.localStorage.getItem('inboxsdk__sidebar_ordering') || 'null'
-        );
-      } catch (err) {
-        console.error('failed to read sidebar order data', err); //eslint-disable-line no-console
+      set(data) {
+        try {
+          global.localStorage.setItem('inboxsdk__sidebar_ordering', JSON.stringify(data));
+        } catch (err) {
+          console.error('failed to set sidebar order data', err); //eslint-disable-line no-console
+        }
       }
-    },
-    set(data) {
-      try {
-        global.localStorage.setItem(
-          'inboxsdk__sidebar_ordering',
-          JSON.stringify(data)
-        );
-      } catch (err) {
-        console.error('failed to set sidebar order data', err); //eslint-disable-line no-console
+    }));
+    (0, _defineProperty2.default)(this, "_updateHighlightedAppThreadIconBus", (0, _kefirBus.default)());
+    (0, _defineProperty2.default)(this, "_appSidebarRefSetter", threadSidebarComponent => {
+      if (threadSidebarComponent) {
+        this._threadSidebarComponent = threadSidebarComponent;
       }
-    },
-  });
-
-  _containerProp: () => HTMLElement;
-  _updateHighlightedAppThreadIconBus: Bus<null> = kefirBus();
-
-  constructor(
-    driver: GmailDriver,
-    companionSidebarContentContainerElement: HTMLElement
-  ) {
+    });
+    (0, _defineProperty2.default)(this, "_closeButton", null);
     this._driver = driver;
-    this._companionSidebarContentContainerEl =
-      companionSidebarContentContainerElement;
+    this._companionSidebarContentContainerEl = companionSidebarContentContainerElement;
     this._setupElement();
   }
-
-  getInstanceId(): string {
+  getInstanceId() {
     return this._instanceId;
   }
 
@@ -121,310 +98,207 @@ class GmailAppSidebarPrimary {
   // This value controls whether the app sidebar should automatically open
   // itself when available when the chat sidebar isn't present. It's only set
   // if the user interacts with the app sidebar button.
-  _getShouldGlobalAppSidebarOpen(): boolean {
-    return (
-      global.localStorage.getItem(
-        'inboxsdk__global_app_sidebar_should_open'
-      ) === 'true'
-    );
+  _getShouldGlobalAppSidebarOpen() {
+    return global.localStorage.getItem('inboxsdk__global_app_sidebar_should_open') === 'true';
   }
-
-  _setShouldGlobalAppSidebarOpen(open: boolean) {
+  _setShouldGlobalAppSidebarOpen(open) {
     try {
-      global.localStorage.setItem(
-        'inboxsdk__global_app_sidebar_should_open',
-        String(open)
-      );
+      global.localStorage.setItem('inboxsdk__global_app_sidebar_should_open', String(open));
     } catch (err) {
       console.error('error saving', err); //eslint-disable-line no-console
     }
   }
 
-  _getShouldThreadAppSidebarOpen(): boolean {
-    return (
-      global.localStorage.getItem(
-        'inboxsdk__thread_app_sidebar_should_open'
-      ) !== 'false'
-    );
+  _getShouldThreadAppSidebarOpen() {
+    return global.localStorage.getItem('inboxsdk__thread_app_sidebar_should_open') !== 'false';
   }
-
-  _setShouldThreadAppSidebarOpen(open: boolean) {
+  _setShouldThreadAppSidebarOpen(open) {
     try {
-      global.localStorage.setItem(
-        'inboxsdk__thread_app_sidebar_should_open',
-        String(open)
-      );
+      global.localStorage.setItem('inboxsdk__thread_app_sidebar_should_open', String(open));
     } catch (err) {
       console.error('error saving', err); //eslint-disable-line no-console
     }
   }
 
-  _createThreadSidebarIfNeeded(): HTMLElement {
+  _createThreadSidebarIfNeeded() {
     if (this._threadSidebarContainerEl) return this._threadSidebarContainerEl;
-
-    const threadSidebarContainerEl = (this._threadSidebarContainerEl =
-      document.createElement('div'));
-    threadSidebarContainerEl.classList.add(
-      'thread_app_sidebar',
-      idMap('app_sidebar_container'),
-      'addon_sidebar'
-    );
-
-    this._companionSidebarContentContainerEl.insertBefore(
-      threadSidebarContainerEl,
-      this._companionSidebarContentContainerEl.firstElementChild
-    );
-
+    const threadSidebarContainerEl = this._threadSidebarContainerEl = document.createElement('div');
+    threadSidebarContainerEl.classList.add('thread_app_sidebar', (0, _idMap.default)('app_sidebar_container'), 'addon_sidebar');
+    this._companionSidebarContentContainerEl.insertBefore(threadSidebarContainerEl, this._companionSidebarContentContainerEl.firstElementChild);
     this._containerProp = () => threadSidebarContainerEl;
 
     // Kefir flow type def has wrong type for bufferWithTimeOrCount
-    (this._updateHighlightedAppThreadIconBus: any)
-      .bufferWithTimeOrCount(150, 100)
-      .filter((events) => events.length > 0)
-      .takeUntilBy(this._stopper)
-      .onValue(() => {
-        // Before touching this code, make sure you understand the meaning of the clientRect
-        // values and of scrollTop. In particular, make sure you understand the distinction of
-        // absolute (the scroll[Top|Bottom|Height] values) vs relative (the BoundingRect top
-        // and bottom values) scroll values.
-        // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
-        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
-
-        const containerBoundingBox =
-          threadSidebarContainerEl.getBoundingClientRect();
-        const titleBars = Array.from(
-          threadSidebarContainerEl.querySelectorAll(
-            `.${idMap('app_sidebar_content_panel')}.${idMap(
-              'expanded'
-            )} .${idMap('app_sidebar_content_panel_top_line')}`
-          )
-        );
-
-        const absoluteScrollOfViewportTop = threadSidebarContainerEl.scrollTop;
-        const absoluteScrollOfViewportMidpoint =
-          absoluteScrollOfViewportTop + containerBoundingBox.height / 2;
-
-        let titleBar = titleBars.find((t) => {
-          const tBoundingBox = t.getBoundingClientRect();
+    this._updateHighlightedAppThreadIconBus.bufferWithTimeOrCount(150, 100).filter(events => events.length > 0).takeUntilBy(this._stopper).onValue(() => {
+      // Before touching this code, make sure you understand the meaning of the clientRect
+      // values and of scrollTop. In particular, make sure you understand the distinction of
+      // absolute (the scroll[Top|Bottom|Height] values) vs relative (the BoundingRect top
+      // and bottom values) scroll values.
+      // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
+      // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
+
+      const containerBoundingBox = threadSidebarContainerEl.getBoundingClientRect();
+      const titleBars = Array.from(threadSidebarContainerEl.querySelectorAll(`.${(0, _idMap.default)('app_sidebar_content_panel')}.${(0, _idMap.default)('expanded')} .${(0, _idMap.default)('app_sidebar_content_panel_top_line')}`));
+      const absoluteScrollOfViewportTop = threadSidebarContainerEl.scrollTop;
+      const absoluteScrollOfViewportMidpoint = absoluteScrollOfViewportTop + containerBoundingBox.height / 2;
+      let titleBar = titleBars.find(t => {
+        const tBoundingBox = t.getBoundingClientRect();
+        const relativeScrollOfTitleBottom = tBoundingBox.bottom;
+        const absoluteScrollOfTitleBottom = relativeScrollOfTitleBottom + absoluteScrollOfViewportTop;
+
+        // Return true for an element that is below the top of the viewport but above its midpoint
+        return absoluteScrollOfTitleBottom > absoluteScrollOfViewportTop && absoluteScrollOfTitleBottom < absoluteScrollOfViewportMidpoint;
+      });
 
+      // If titleBar is falsey then there isn't a title element in the top half of the viewport.
+      // In this case, find the first title element above the viewport.
+      if (!titleBar) {
+        // We make the assumption here that ordering of the elements in titleBars matches the
+        // ordering of how they appear in the sidebar (i.e. their ordering from top to bottom).
+        let lastElementAboveViewPort;
+        for (let i = 0; i < titleBars.length; i++) {
+          const tElement = titleBars[i];
+          const tBoundingBox = tElement.getBoundingClientRect();
           const relativeScrollOfTitleBottom = tBoundingBox.bottom;
-          const absoluteScrollOfTitleBottom =
-            relativeScrollOfTitleBottom + absoluteScrollOfViewportTop;
-
-          // Return true for an element that is below the top of the viewport but above its midpoint
-          return (
-            absoluteScrollOfTitleBottom > absoluteScrollOfViewportTop &&
-            absoluteScrollOfTitleBottom < absoluteScrollOfViewportMidpoint
-          );
-        });
-
-        // If titleBar is falsey then there isn't a title element in the top half of the viewport.
-        // In this case, find the first title element above the viewport.
-        if (!titleBar) {
-          // We make the assumption here that ordering of the elements in titleBars matches the
-          // ordering of how they appear in the sidebar (i.e. their ordering from top to bottom).
-          let lastElementAboveViewPort;
-          for (let i = 0; i < titleBars.length; i++) {
-            const tElement = titleBars[i];
-            const tBoundingBox = tElement.getBoundingClientRect();
-
-            const relativeScrollOfTitleBottom = tBoundingBox.bottom;
-            if (relativeScrollOfTitleBottom < 0) {
-              lastElementAboveViewPort = tElement;
-            } else if (relativeScrollOfTitleBottom > 0) {
-              break;
-            }
+          if (relativeScrollOfTitleBottom < 0) {
+            lastElementAboveViewPort = tElement;
+          } else if (relativeScrollOfTitleBottom > 0) {
+            break;
           }
-
-          titleBar = lastElementAboveViewPort;
         }
-
-        if (titleBar) {
-          const instanceId = titleBar.getAttribute('data-instance-id');
-          const appName = titleBar.getAttribute('data-app-name');
-          if (!appName) return;
-          const appButton = this._threadButtonContainers.get(appName);
-          if (!appButton || !this._threadIconArea) return;
-
-          const activeButtonContainer = this._threadIconArea.querySelector(
-            '.sidebar_button_container_active'
-          );
-          if (activeButtonContainer) {
-            activeButtonContainer.classList.remove(
-              'sidebar_button_container_active'
-            );
-          }
-
-          appButton.classList.add('sidebar_button_container_active');
+        titleBar = lastElementAboveViewPort;
+      }
+      if (titleBar) {
+        const instanceId = titleBar.getAttribute('data-instance-id');
+        const appName = titleBar.getAttribute('data-app-name');
+        if (!appName) return;
+        const appButton = this._threadButtonContainers.get(appName);
+        if (!appButton || !this._threadIconArea) return;
+        const activeButtonContainer = this._threadIconArea.querySelector('.sidebar_button_container_active');
+        if (activeButtonContainer) {
+          activeButtonContainer.classList.remove('sidebar_button_container_active');
         }
-      });
+        appButton.classList.add('sidebar_button_container_active');
+      }
+    });
 
     //listen for scroll and update active icon if needed
-    this._updateHighlightedAppThreadIconBus.plug(
-      Kefir.fromEvents(threadSidebarContainerEl, 'scroll').map(() => null)
-    );
+    this._updateHighlightedAppThreadIconBus.plug(_kefir.default.fromEvents(threadSidebarContainerEl, 'scroll').map(() => null));
 
     // handle rendering thread sidebar contents
     this._renderThreadSidebar();
     return threadSidebarContainerEl;
   }
-
   _renderThreadSidebarIfPresent() {
     if (!this._threadSidebarContainerEl) {
       return;
     }
     this._renderThreadSidebar();
   }
-
-  _appSidebarRefSetter: (el: ?AppSidebar) => void = (
-    threadSidebarComponent
-  ) => {
-    if (threadSidebarComponent) {
-      this._threadSidebarComponent = threadSidebarComponent;
-    }
-  };
-
-  _renderThreadSidebar(): Promise<AppSidebar> {
+  _renderThreadSidebar() {
     const threadSidebarContainerEl = this._threadSidebarContainerEl;
     if (!threadSidebarContainerEl) {
-      throw new Error(
-        '_renderThreadSidebar should not be called when _threadSidebarContainerEl is unset'
-      );
+      throw new Error('_renderThreadSidebar should not be called when _threadSidebarContainerEl is unset');
     }
-    return new Promise((resolve) => {
-      ReactDOM.render(
-        <AppSidebar
-          ref={this._appSidebarRefSetter}
-          panels={this._orderManager.getOrderedItems().map((x) => x.value)}
-          onMoveEnd={(newList, movedItem, oldIndex, newIndex) => {
-            this._orderManager.moveItem(oldIndex, newIndex);
-            this._renderThreadSidebar();
-          }}
-          onExpandedToggle={() => {
-            this._updateHighlightedAppThreadIconBus.emit(null);
-          }}
-          container={this._containerProp}
-        />,
-        threadSidebarContainerEl,
-        () => {
-          if (!this._threadSidebarComponent) {
-            throw new Error('Should not happen');
-          }
-          resolve(this._threadSidebarComponent);
+    return new Promise(resolve => {
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_AppSidebar.default, {
+        ref: this._appSidebarRefSetter,
+        panels: this._orderManager.getOrderedItems().map(x => x.value),
+        onMoveEnd: (newList, movedItem, oldIndex, newIndex) => {
+          this._orderManager.moveItem(oldIndex, newIndex);
+          this._renderThreadSidebar();
+        },
+        onExpandedToggle: () => {
           this._updateHighlightedAppThreadIconBus.emit(null);
+        },
+        container: this._containerProp
+      }), threadSidebarContainerEl, () => {
+        if (!this._threadSidebarComponent) {
+          throw new Error('Should not happen');
         }
-      );
+        resolve(this._threadSidebarComponent);
+        this._updateHighlightedAppThreadIconBus.emit(null);
+      });
     });
   }
-
-  _getActiveButtonContainer(): ?HTMLElement {
+  _getActiveButtonContainer() {
     let activeButtonContainer;
     if (this._globalIconArea) {
-      activeButtonContainer = this._globalIconArea.querySelector(
-        '.sidebar_button_container_active'
-      );
+      activeButtonContainer = this._globalIconArea.querySelector('.sidebar_button_container_active');
     }
     if (!activeButtonContainer && this._threadIconArea) {
-      activeButtonContainer = this._threadIconArea.querySelector(
-        '.sidebar_button_container_active'
-      );
+      activeButtonContainer = this._threadIconArea.querySelector('.sidebar_button_container_active');
     }
     return activeButtonContainer;
   }
-
-  _closeButton: ?(userClick: boolean) => void = null;
-
-  _addButton(iconArea: HTMLElement, event: Object, isGlobal: boolean) {
+  _addButton(iconArea, event, isGlobal) {
+    var _this = this;
     // we put adding the content panel icon in the iconArea in an asap so that we
     // get consistent ordering. The ordering of the icons is based on the position of the FIRST
     // panel with that app name. This means we need to wait for all the panels for a particular appName
     // to be added first, and then we can get the correct position
-    asap(() => {
+    (0, _asap.default)(() => {
       if (!iconArea) throw new Error('should not happen');
-
       const instanceId = event.detail.instanceId;
-      const iconUrl =
-        isGlobal && event.detail.iconUrl
-          ? event.detail.iconUrl
-          : event.detail.appIconUrl;
+      const iconUrl = isGlobal && event.detail.iconUrl ? event.detail.iconUrl : event.detail.appIconUrl;
       const appName = event.detail.appName;
       const iconClass = event.detail.iconClass || '';
 
       // If there's an existing button for the app, then just increment its
       // data-count attribute instead of adding a new button.
-      const existingButtonContainer = isGlobal
-        ? this._globalButtonContainers.get(appName)
-        : this._threadButtonContainers.get(appName);
-
+      const existingButtonContainer = isGlobal ? this._globalButtonContainers.get(appName) : this._threadButtonContainers.get(appName);
       let buttonContainer;
       if (existingButtonContainer) {
-        const currentCount =
-          Number(existingButtonContainer.getAttribute('data-count')) || 1;
-        existingButtonContainer.setAttribute(
-          'data-count',
-          String(currentCount + 1)
-        );
+        const currentCount = Number(existingButtonContainer.getAttribute('data-count')) || 1;
+        existingButtonContainer.setAttribute('data-count', String(currentCount + 1));
         buttonContainer = existingButtonContainer;
       } else {
         buttonContainer = document.createElement('div');
-        buttonContainer.className = idMap('sidebar_button_container');
+        buttonContainer.className = (0, _idMap.default)('sidebar_button_container');
         buttonContainer.setAttribute('data-app-name', appName);
-        buttonContainer.innerHTML = autoHtml`
+        buttonContainer.innerHTML = (0, _autoHtml.default)`
           <button class="inboxsdk__button_icon ${iconClass}" type="button" data-tooltip="${appName}">
             <img class="inboxsdk__button_iconImg" src="${iconUrl}">
           </button>
           <div class="inboxsdk__button_selectedIndicator"></div>
         `;
-
         if (event.detail.primaryColor) {
-          querySelector(
-            buttonContainer,
-            '.inboxsdk__button_selectedIndicator'
-          ).style.backgroundColor = event.detail.primaryColor;
+          (0, _querySelectorOrFail.default)(buttonContainer, '.inboxsdk__button_selectedIndicator').style.backgroundColor = event.detail.primaryColor;
         }
-
         if (isGlobal) {
           this._globalButtonContainers.set(appName, buttonContainer);
         } else {
           this._threadButtonContainers.set(appName, buttonContainer);
         }
-
-        const activate = (dontScrollIntoView = false) => {
-          const activeButtonContainer = this._getActiveButtonContainer();
-
+        const activate = function () {
+          let dontScrollIntoView = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+          const activeButtonContainer = _this._getActiveButtonContainer();
           if (activeButtonContainer === buttonContainer) {
             // button was clicked while its panel was open, so close it.
-            if (!this._closeButton) throw new Error();
-            this._closeButton(true);
+            if (!_this._closeButton) throw new Error();
+            _this._closeButton(true);
           } else {
             // button was clicked while its own panel wasn't open, so open it.
 
-            if (this._closeButton) {
-              this._closeButton(true);
+            if (_this._closeButton) {
+              _this._closeButton(true);
             }
-
-            if (isGlobal) this._setShouldGlobalAppSidebarOpen(true);
-            else this._setShouldThreadAppSidebarOpen(true);
-
-            this._openSidebarAndActivateButton(buttonContainer, isGlobal);
-
+            if (isGlobal) _this._setShouldGlobalAppSidebarOpen(true);else _this._setShouldThreadAppSidebarOpen(true);
+            _this._openSidebarAndActivateButton(buttonContainer, isGlobal);
             if (isGlobal) {
-              const contentEl = this._contentContainers.get(appName);
+              const contentEl = _this._contentContainers.get(appName);
               if (contentEl) contentEl.style.display = '';
-              this._companionSidebarContentContainerEl.classList.add(
-                'companion_global_app_sidebar_visible'
-              );
+              _this._companionSidebarContentContainerEl.classList.add('companion_global_app_sidebar_visible');
 
               // let app listen for activate event
-              ((document.body: any): HTMLElement).dispatchEvent(
-                new CustomEvent('inboxsdkSidebarPanelActivated', {
-                  bubbles: true,
-                  cancelable: false,
-                  detail: { instanceId },
-                })
-              );
+              document.body.dispatchEvent(new CustomEvent('inboxsdkSidebarPanelActivated', {
+                bubbles: true,
+                cancelable: false,
+                detail: {
+                  instanceId
+                }
+              }));
             } else {
-              const threadSidebarComponent = this._threadSidebarComponent;
+              const threadSidebarComponent = _this._threadSidebarComponent;
               if (!threadSidebarComponent) {
                 throw new Error('sidebar not mounted');
               }
@@ -433,58 +307,45 @@ class GmailAppSidebarPrimary {
                 threadSidebarComponent.scrollPanelIntoView(instanceId, true);
               }
             }
-
-            this._closeButton = (userClick: boolean) => {
-              this._closeButton = null;
-
-              const activeButtonContainer = this._getActiveButtonContainer();
+            _this._closeButton = userClick => {
+              _this._closeButton = null;
+              const activeButtonContainer = _this._getActiveButtonContainer();
               if (!activeButtonContainer) {
                 throw new Error('Expected activeButtonContainer');
               }
-              this._closeSidebarAndDeactivateButton(activeButtonContainer);
-
+              _this._closeSidebarAndDeactivateButton(activeButtonContainer);
               if (isGlobal) {
-                if (userClick) this._setShouldGlobalAppSidebarOpen(false);
-
-                const contentEl = this._contentContainers.get(appName);
+                if (userClick) _this._setShouldGlobalAppSidebarOpen(false);
+                const contentEl = _this._contentContainers.get(appName);
                 if (contentEl) {
                   contentEl.style.display = 'none';
                 } else {
-                  this._driver
-                    .getLogger()
-                    .error(new Error('Unexpected: contentEl not set'));
+                  _this._driver.getLogger().error(new Error('Unexpected: contentEl not set'));
                 }
-
-                ((document.body: any): HTMLElement).dispatchEvent(
-                  new CustomEvent('inboxsdkSidebarPanelDeactivated', {
-                    bubbles: true,
-                    cancelable: false,
-                    detail: { instanceId },
-                  })
-                );
+                document.body.dispatchEvent(new CustomEvent('inboxsdkSidebarPanelDeactivated', {
+                  bubbles: true,
+                  cancelable: false,
+                  detail: {
+                    instanceId
+                  }
+                }));
               } else {
-                if (userClick) this._setShouldThreadAppSidebarOpen(false);
+                if (userClick) _this._setShouldThreadAppSidebarOpen(false);
               }
               //fake a window resize after closing so gmail fixes any heights that are messed up
-              fakeWindowResize();
+              (0, _fakeWindowResize.default)();
             };
 
             //fake a window resize after opening so gmail fixes any heights that are messed up
-            fakeWindowResize();
+            (0, _fakeWindowResize.default)();
           }
         };
-
-        querySelector(buttonContainer, 'button').addEventListener(
-          'click',
-          (event: MouseEvent) => {
-            event.stopPropagation();
-            activate();
-          },
-          true
-        );
-
+        (0, _querySelectorOrFail.default)(buttonContainer, 'button').addEventListener('click', event => {
+          event.stopPropagation();
+          activate();
+        }, true);
         if (iconArea) {
-          addToIconArea(this._orderManager, appName, buttonContainer, iconArea);
+          (0, _addToIconArea.default)(this._orderManager, appName, buttonContainer, iconArea);
         }
 
         // if we last had an SDK sidebar open then bring up the SDK sidebar when the first
@@ -493,20 +354,14 @@ class GmailAppSidebarPrimary {
           const activeButtonContainer = this._getActiveButtonContainer();
           if (isGlobal) {
             if (this._getShouldGlobalAppSidebarOpen()) {
-              const activeButtonContainerPresentAndIsForGlobal =
-                this._globalIconArea &&
-                activeButtonContainer &&
-                this._globalIconArea.contains(activeButtonContainer);
+              const activeButtonContainerPresentAndIsForGlobal = this._globalIconArea && activeButtonContainer && this._globalIconArea.contains(activeButtonContainer);
               if (!activeButtonContainerPresentAndIsForGlobal) {
                 activate(true);
               }
             }
           } else {
             if (this._getShouldThreadAppSidebarOpen()) {
-              const activeButtonContainerPresentAndIsForThread =
-                this._threadIconArea &&
-                activeButtonContainer &&
-                this._threadIconArea.contains(activeButtonContainer);
+              const activeButtonContainerPresentAndIsForThread = this._threadIconArea && activeButtonContainer && this._threadIconArea.contains(activeButtonContainer);
               if (!activeButtonContainerPresentAndIsForThread) {
                 activate(true);
               }
@@ -516,42 +371,22 @@ class GmailAppSidebarPrimary {
       }
     });
   }
-
-  _removeButton(
-    event: Object,
-    buttonContainers: Map<string, HTMLElement>,
-    iconArea: ?HTMLElement
-  ) {
+  _removeButton(event, buttonContainers, iconArea) {
     const appName = event.detail.appName;
-
     const container = buttonContainers.get(appName);
     if (!iconArea || !container) {
-      throw new Error(
-        'should not happen: tried to remove button without container or iconArea'
-      );
+      throw new Error('should not happen: tried to remove button without container or iconArea');
     }
-
     const currentCount = Number(container.getAttribute('data-count'));
     if (currentCount <= 1) {
-      const activeButtonContainer = iconArea.querySelector(
-        '.sidebar_button_container_active'
-      );
+      const activeButtonContainer = iconArea.querySelector('.sidebar_button_container_active');
       if (container === activeButtonContainer) {
         if (!this._closeButton) throw new Error();
         this._closeButton(false);
-
-        this._companionSidebarOuterWrapper.classList.remove(
-          'companion_app_sidebar_wrapper_visible'
-        );
-        this._companionSidebarContentContainerEl.classList.remove(
-          'companion_app_sidebar_visible'
-        );
-        const contentContainer =
-          this._companionSidebarOuterWrapper.previousElementSibling;
-        if (contentContainer)
-          contentContainer.classList.remove(
-            'companion_container_app_sidebar_visible'
-          );
+        this._companionSidebarOuterWrapper.classList.remove('companion_app_sidebar_wrapper_visible');
+        this._companionSidebarContentContainerEl.classList.remove('companion_app_sidebar_visible');
+        const contentContainer = this._companionSidebarOuterWrapper.previousElementSibling;
+        if (contentContainer) contentContainer.classList.remove('companion_container_app_sidebar_visible');
       }
       container.remove();
       buttonContainers.delete(appName);
@@ -561,39 +396,17 @@ class GmailAppSidebarPrimary {
       container.setAttribute('data-count', String(currentCount - 1));
     }
   }
-
-  _closeSidebarAndDeactivateButton(activeButtonContainer: HTMLElement) {
+  _closeSidebarAndDeactivateButton(activeButtonContainer) {
     activeButtonContainer.classList.remove('sidebar_button_container_active');
-    this._companionSidebarOuterWrapper.classList.remove(
-      'companion_app_sidebar_wrapper_visible'
-    );
-    this._companionSidebarContentContainerEl.classList.add(
-      COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS
-    );
-    this._companionSidebarContentContainerEl.classList.remove(
-      'companion_app_sidebar_visible',
-      'companion_global_app_sidebar_visible'
-    );
-
-    const contentContainer =
-      this._companionSidebarOuterWrapper.previousElementSibling;
-    if (contentContainer)
-      contentContainer.classList.remove(
-        'companion_container_app_sidebar_visible'
-      );
+    this._companionSidebarOuterWrapper.classList.remove('companion_app_sidebar_wrapper_visible');
+    this._companionSidebarContentContainerEl.classList.add(COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS);
+    this._companionSidebarContentContainerEl.classList.remove('companion_app_sidebar_visible', 'companion_global_app_sidebar_visible');
+    const contentContainer = this._companionSidebarOuterWrapper.previousElementSibling;
+    if (contentContainer) contentContainer.classList.remove('companion_container_app_sidebar_visible');
   }
-
-  _openSidebarAndActivateButton(
-    buttonContainer: HTMLElement,
-    isGlobal: boolean
-  ) {
-    const companionSidebarIconContainerEl =
-      GmailElementGetter.getCompanionSidebarIconContainerElement();
-    if (!companionSidebarIconContainerEl)
-      throw new Error(
-        'Could not find companion sidebar icon container element'
-      );
-
+  _openSidebarAndActivateButton(buttonContainer, isGlobal) {
+    const companionSidebarIconContainerEl = _gmailElementGetter.default.getCompanionSidebarIconContainerElement();
+    if (!companionSidebarIconContainerEl) throw new Error('Could not find companion sidebar icon container element');
     const activeButtonContainer = this._getActiveButtonContainer();
     if (activeButtonContainer) {
       throw new Error('activeButtonContainer should not be true');
@@ -602,407 +415,203 @@ class GmailAppSidebarPrimary {
 
     {
       // If a gmail addon is active, close it.
-      const nativeActiveAddOnIcon =
-        companionSidebarIconContainerEl.querySelector(
-          ACTIVE_ADD_ON_ICON_SELECTOR
-        );
+      const nativeActiveAddOnIcon = companionSidebarIconContainerEl.querySelector(ACTIVE_ADD_ON_ICON_SELECTOR);
       if (nativeActiveAddOnIcon) {
-        simulateClick(nativeActiveAddOnIcon);
+        (0, _simulateMouseEvent.simulateClick)(nativeActiveAddOnIcon);
       }
     }
-
     buttonContainer.classList.add('sidebar_button_container_active');
-    this._companionSidebarOuterWrapper.classList.add(
-      'companion_app_sidebar_wrapper_visible'
-    );
-    this._companionSidebarContentContainerEl.classList.add(
-      'companion_app_sidebar_visible'
-    );
-    this._companionSidebarContentContainerEl.classList.remove(
-      COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS
-    );
-
-    const contentContainer =
-      this._companionSidebarOuterWrapper.previousElementSibling;
-    if (contentContainer)
-      contentContainer.classList.add('companion_container_app_sidebar_visible');
-    if (isGlobal)
-      this._companionSidebarContentContainerEl.classList.add(
-        'companion_global_app_sidebar_visible'
-      );
+    this._companionSidebarOuterWrapper.classList.add('companion_app_sidebar_wrapper_visible');
+    this._companionSidebarContentContainerEl.classList.add('companion_app_sidebar_visible');
+    this._companionSidebarContentContainerEl.classList.remove(COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS);
+    const contentContainer = this._companionSidebarOuterWrapper.previousElementSibling;
+    if (contentContainer) contentContainer.classList.add('companion_container_app_sidebar_visible');
+    if (isGlobal) this._companionSidebarContentContainerEl.classList.add('companion_global_app_sidebar_visible');
   }
-
   _setupElement() {
-    const companionSidebarIconContainerEl =
-      GmailElementGetter.getCompanionSidebarIconContainerElement();
-    if (!companionSidebarIconContainerEl)
-      throw new Error(
-        'Could not find companion sidebar icon container element'
-      );
-
-    this._companionSidebarContentContainerEl.setAttribute(
-      'data-sdk-sidebar-instance-id',
-      this._instanceId
-    );
+    const companionSidebarIconContainerEl = _gmailElementGetter.default.getCompanionSidebarIconContainerElement();
+    if (!companionSidebarIconContainerEl) throw new Error('Could not find companion sidebar icon container element');
+    this._companionSidebarContentContainerEl.setAttribute('data-sdk-sidebar-instance-id', this._instanceId);
 
     // TODO: Once the changes to the GMail DOM have been entirely ramped, drop the ternary here and
     // always get the parentElement. (Jun 20, 2018)
-    this._companionSidebarOuterWrapper =
-      this._companionSidebarContentContainerEl.classList.contains('bq9')
-        ? this._companionSidebarContentContainerEl
-        : (this._companionSidebarContentContainerEl.parentElement: any);
-
+    this._companionSidebarOuterWrapper = this._companionSidebarContentContainerEl.classList.contains('bq9') ? this._companionSidebarContentContainerEl : this._companionSidebarContentContainerEl.parentElement;
     if (!this._companionSidebarOuterWrapper) {
-      throw new Error(
-        'should not happen: failed to find companionSidebarOuterWrapper'
-      );
+      throw new Error('should not happen: failed to find companionSidebarOuterWrapper');
     }
-
-    const contentContainer =
-      this._companionSidebarOuterWrapper.previousElementSibling;
+    const contentContainer = this._companionSidebarOuterWrapper.previousElementSibling;
     if (contentContainer) {
-      contentContainer.classList.add(
-        idMap('companion_container_app_sidebar_in_use')
-      );
+      contentContainer.classList.add((0, _idMap.default)('companion_container_app_sidebar_in_use'));
     }
-    this._companionSidebarContentContainerEl.classList.add(
-      idMap('app_sidebar_in_use')
-    );
-
-    if (
-      !((document.body: any): HTMLElement).querySelector(
-        '.' + idMap('app_sidebar_waiting_platform')
-      )
-    ) {
+    this._companionSidebarContentContainerEl.classList.add((0, _idMap.default)('app_sidebar_in_use'));
+    if (!document.body.querySelector('.' + (0, _idMap.default)('app_sidebar_waiting_platform'))) {
       const waitingPlatform = document.createElement('div');
-      waitingPlatform.className = idMap('app_sidebar_waiting_platform');
-      ((document.body: any): HTMLElement).appendChild(waitingPlatform);
+      waitingPlatform.className = (0, _idMap.default)('app_sidebar_waiting_platform');
+      document.body.appendChild(waitingPlatform);
     }
 
     // thread sidebar content panels
     {
-      Kefir.fromEvents(window, 'storage')
-        .filter((e) => e.key === 'inboxsdk__sidebar_ordering')
-        .takeUntilBy(this._stopper)
-        .onValue(() => {
-          this._orderManager.reload();
-          this._renderThreadSidebarIfPresent();
-        });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkNewSidebarPanel')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          this._createThreadSidebarIfNeeded();
-          let id = event.detail.id;
-          while (this._currentIds.has(id)) {
-            id = incrementName(id);
-          }
-          this._currentIds.add(id);
-
-          const appName = event.detail.appName;
-          this._orderManager.addItem({
-            groupId: event.detail.appId,
+      _kefir.default.fromEvents(window, 'storage').filter(e => e.key === 'inboxsdk__sidebar_ordering').takeUntilBy(this._stopper).onValue(() => {
+        this._orderManager.reload();
+        this._renderThreadSidebarIfPresent();
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkNewSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        this._createThreadSidebarIfNeeded();
+        let id = event.detail.id;
+        while (this._currentIds.has(id)) {
+          id = (0, _incrementName.default)(id);
+        }
+        this._currentIds.add(id);
+        const appName = event.detail.appName;
+        this._orderManager.addItem({
+          groupId: event.detail.appId,
+          id,
+          orderHint: event.detail.orderHint,
+          value: {
             id,
-            orderHint: event.detail.orderHint,
-            value: {
-              id,
-              appName,
-              appId: event.detail.appId,
-              instanceId: event.detail.instanceId,
-              title: event.detail.title,
-              iconClass: event.detail.iconClass,
-              iconUrl: event.detail.iconUrl,
-              hideTitleBar: event.detail.hideTitleBar,
-              el: event.target,
-            },
-          });
-          this._renderThreadSidebar();
-
-          let threadIconArea = (this._threadIconArea =
-            companionSidebarIconContainerEl.querySelector(
-              '.sidebar_thread_iconArea'
-            ));
-          if (!threadIconArea) {
-            threadIconArea = this._threadIconArea =
-              document.createElement('div');
-            threadIconArea.className = idMap('sidebar_iconArea');
-            threadIconArea.classList.add('sidebar_thread_iconArea');
-            addCompanionThreadIconArea(
-              this._driver.getLogger(),
-              threadIconArea,
-              companionSidebarIconContainerEl
-            );
-          }
-
-          this._addButton(threadIconArea, event, false);
-        });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkUpdateSidebarPanel')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          const orderedItems = this._orderManager.getOrderedItems();
-          const index = findIndex(
-            orderedItems,
-            (x) => x.value.instanceId === event.detail.instanceId
-          );
-          if (index === -1)
-            throw new Error('should not happen: failed to find orderItem');
-          this._orderManager.updateItemValueByIndex(index, {
-            id: orderedItems[index].value.id,
+            appName,
             appId: event.detail.appId,
-            appName: event.detail.appName || event.detail.title,
             instanceId: event.detail.instanceId,
             title: event.detail.title,
             iconClass: event.detail.iconClass,
             iconUrl: event.detail.iconUrl,
             hideTitleBar: event.detail.hideTitleBar,
-            el: event.target,
-          });
-          this._renderThreadSidebar();
-        });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkRemoveSidebarPanel')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          const orderedItems = this._orderManager.getOrderedItems();
-          const index = findIndex(
-            orderedItems,
-            (x) => x.value.instanceId === event.detail.instanceId
-          );
-          if (index === -1)
-            throw new Error('should not happen: failed to find orderItem');
-          this._currentIds.delete(orderedItems[index].id);
-          this._orderManager.removeItemByIndex(index);
-
-          this._renderThreadSidebar();
-          this._removeButton(
-            event,
-            this._threadButtonContainers,
-            this._threadIconArea
-          );
-        });
-
-      Kefir.fromEvents(
-        (document.body: any),
-        'inboxsdkSidebarPanelScrollIntoView'
-      )
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          if (this._threadSidebarComponent)
-            this._threadSidebarComponent.scrollPanelIntoView(
-              event.detail.instanceId
-            );
-        });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkSidebarPanelClose')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          if (this._threadSidebarComponent)
-            this._threadSidebarComponent.closePanel(event.detail.instanceId);
-        });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkSidebarPanelOpen')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((e) => {
-          this._renderThreadSidebar().then((threadSidebarComponent) => {
-            const descriptor = this._instanceIdsToDescriptors.get(
-              e.detail.instanceId
-            );
-            if (!descriptor) return;
-
-            const buttonContainer = this._threadButtonContainers.get(
-              descriptor.appName
-            );
-            if (!buttonContainer) {
-              throw new Error('missing button container');
-            }
-            const activeButtonContainer = this._getActiveButtonContainer();
-            if (activeButtonContainer !== buttonContainer) {
-              querySelector(buttonContainer, 'button').click();
-            }
-          });
-        });
-    }
-
-    // global sidebar content panels
-    {
-      Kefir.fromEvents((document.body: any), 'inboxsdkNewSidebarPanel')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          let id = event.detail.id;
-          while (this._currentIds.has(id)) {
-            id = incrementName(id);
+            el: event.target
           }
-          this._currentIds.add(id);
-
-          const appName = event.detail.appName;
-
-          let globalIconArea = (this._globalIconArea =
-            companionSidebarIconContainerEl.querySelector(
-              '.sidebar_global_iconArea'
-            ));
-          if (!globalIconArea) {
-            globalIconArea = this._globalIconArea =
-              document.createElement('div');
-            globalIconArea.className = idMap('sidebar_iconArea');
-            globalIconArea.classList.add('sidebar_global_iconArea');
-            addCompanionGlobalIconArea(
-              this._driver.getLogger(),
-              globalIconArea,
-              companionSidebarIconContainerEl
-            );
-          }
-
-          const sdkContentContainerEl = document.createElement('div');
-          sdkContentContainerEl.classList.add(
-            'addon_sidebar',
-            idMap('app_sidebar_container'),
-            'global_app_sidebar'
-          );
-          this._companionSidebarContentContainerEl.insertAdjacentElement(
-            'afterbegin',
-            sdkContentContainerEl
-          );
-          this._contentContainers.set(appName, sdkContentContainerEl);
-
-          sdkContentContainerEl.appendChild(event.target);
-          sdkContentContainerEl.style.display = 'none';
-
-          this._addButton(globalIconArea, event, true);
         });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkUpdateSidebarPanel')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          const buttonContainer = this._globalButtonContainers.get(
-            event.detail.appName
-          );
-          if (!buttonContainer) return;
-
-          const iconClass = event.detail.iconClass || '';
-          const iconUrl = event.detail.iconUrl || event.detail.appIconUrl;
-
-          const imgElement = querySelector(buttonContainer, 'img');
-          imgElement.setAttribute('src', iconUrl);
-
-          const button = querySelector(buttonContainer, 'button');
-          button.setAttribute('class', `inboxsdk__button_icon ${iconClass}`);
-        });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkRemoveSidebarPanel')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          this._currentIds.delete(event.detail.id);
-          this._removeButton(
-            event,
-            this._globalButtonContainers,
-            this._globalIconArea
-          );
+        this._renderThreadSidebar();
+        let threadIconArea = this._threadIconArea = companionSidebarIconContainerEl.querySelector('.sidebar_thread_iconArea');
+        if (!threadIconArea) {
+          threadIconArea = this._threadIconArea = document.createElement('div');
+          threadIconArea.className = (0, _idMap.default)('sidebar_iconArea');
+          threadIconArea.classList.add('sidebar_thread_iconArea');
+          (0, _addCompanionThreadIconArea.default)(this._driver.getLogger(), threadIconArea, companionSidebarIconContainerEl);
+        }
+        this._addButton(threadIconArea, event, false);
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkUpdateSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        const orderedItems = this._orderManager.getOrderedItems();
+        const index = (0, _findIndex.default)(orderedItems, x => x.value.instanceId === event.detail.instanceId);
+        if (index === -1) throw new Error('should not happen: failed to find orderItem');
+        this._orderManager.updateItemValueByIndex(index, {
+          id: orderedItems[index].value.id,
+          appId: event.detail.appId,
+          appName: event.detail.appName || event.detail.title,
+          instanceId: event.detail.instanceId,
+          title: event.detail.title,
+          iconClass: event.detail.iconClass,
+          iconUrl: event.detail.iconUrl,
+          hideTitleBar: event.detail.hideTitleBar,
+          el: event.target
         });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkSidebarPanelClose')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          const descriptor = this._instanceIdsToDescriptors.get(
-            event.detail.instanceId
-          );
+        this._renderThreadSidebar();
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkRemoveSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        const orderedItems = this._orderManager.getOrderedItems();
+        const index = (0, _findIndex.default)(orderedItems, x => x.value.instanceId === event.detail.instanceId);
+        if (index === -1) throw new Error('should not happen: failed to find orderItem');
+        this._currentIds.delete(orderedItems[index].id);
+        this._orderManager.removeItemByIndex(index);
+        this._renderThreadSidebar();
+        this._removeButton(event, this._threadButtonContainers, this._threadIconArea);
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelScrollIntoView').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        if (this._threadSidebarComponent) this._threadSidebarComponent.scrollPanelIntoView(event.detail.instanceId);
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelClose').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        if (this._threadSidebarComponent) this._threadSidebarComponent.closePanel(event.detail.instanceId);
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelOpen').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(e => {
+        this._renderThreadSidebar().then(threadSidebarComponent => {
+          const descriptor = this._instanceIdsToDescriptors.get(e.detail.instanceId);
           if (!descriptor) return;
-
-          const buttonContainer = this._globalButtonContainers.get(
-            descriptor.appName
-          );
-          if (!buttonContainer) return;
-
-          const activeButtonContainer = this._getActiveButtonContainer();
-          if (activeButtonContainer === buttonContainer) {
-            if (!this._closeButton) {
-              throw new Error('Expected this._closeButton');
-            }
-            this._closeButton(true);
+          const buttonContainer = this._threadButtonContainers.get(descriptor.appName);
+          if (!buttonContainer) {
+            throw new Error('missing button container');
           }
-        });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkSidebarPanelOpen')
-        .filter(
-          (e) => e.detail.sidebarId === this._instanceId && e.detail.isGlobal
-        )
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          const descriptor = this._instanceIdsToDescriptors.get(
-            event.detail.instanceId
-          );
-          if (!descriptor) return;
-
-          const buttonContainer = this._globalButtonContainers.get(
-            descriptor.appName
-          );
-          if (!buttonContainer) return;
-
           const activeButtonContainer = this._getActiveButtonContainer();
           if (activeButtonContainer !== buttonContainer) {
-            querySelector(buttonContainer, 'button').click();
+            (0, _querySelectorOrFail.default)(buttonContainer, 'button').click();
           }
         });
+      });
     }
 
-    // instance id to descriptor management
+    // global sidebar content panels
     {
-      Kefir.fromEvents((document.body: any), 'inboxsdkNewSidebarPanel')
-        .filter((e) => e.detail.sidebarId === this._instanceId)
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          this._instanceIdsToDescriptors.set(
-            event.detail.instanceId,
-            event.detail
-          );
-        });
-
-      Kefir.fromEvents((document.body: any), 'inboxsdkRemoveSidebarPanel')
-        .filter((e) => e.detail.sidebarId === this._instanceId)
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          this._instanceIdsToDescriptors.delete(event.detail.instanceId);
-        });
+      _kefir.default.fromEvents(document.body, 'inboxsdkNewSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId && e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        let id = event.detail.id;
+        while (this._currentIds.has(id)) {
+          id = (0, _incrementName.default)(id);
+        }
+        this._currentIds.add(id);
+        const appName = event.detail.appName;
+        let globalIconArea = this._globalIconArea = companionSidebarIconContainerEl.querySelector('.sidebar_global_iconArea');
+        if (!globalIconArea) {
+          globalIconArea = this._globalIconArea = document.createElement('div');
+          globalIconArea.className = (0, _idMap.default)('sidebar_iconArea');
+          globalIconArea.classList.add('sidebar_global_iconArea');
+          (0, _addCompanionGlobalIconArea.default)(this._driver.getLogger(), globalIconArea, companionSidebarIconContainerEl);
+        }
+        const sdkContentContainerEl = document.createElement('div');
+        sdkContentContainerEl.classList.add('addon_sidebar', (0, _idMap.default)('app_sidebar_container'), 'global_app_sidebar');
+        this._companionSidebarContentContainerEl.insertAdjacentElement('afterbegin', sdkContentContainerEl);
+        this._contentContainers.set(appName, sdkContentContainerEl);
+        sdkContentContainerEl.appendChild(event.target);
+        sdkContentContainerEl.style.display = 'none';
+        this._addButton(globalIconArea, event, true);
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkUpdateSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId && e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        const buttonContainer = this._globalButtonContainers.get(event.detail.appName);
+        if (!buttonContainer) return;
+        const iconClass = event.detail.iconClass || '';
+        const iconUrl = event.detail.iconUrl || event.detail.appIconUrl;
+        const imgElement = (0, _querySelectorOrFail.default)(buttonContainer, 'img');
+        imgElement.setAttribute('src', iconUrl);
+        const button = (0, _querySelectorOrFail.default)(buttonContainer, 'button');
+        button.setAttribute('class', `inboxsdk__button_icon ${iconClass}`);
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkRemoveSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId && e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        this._currentIds.delete(event.detail.id);
+        this._removeButton(event, this._globalButtonContainers, this._globalIconArea);
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelClose').filter(e => e.detail.sidebarId === this._instanceId && e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        const descriptor = this._instanceIdsToDescriptors.get(event.detail.instanceId);
+        if (!descriptor) return;
+        const buttonContainer = this._globalButtonContainers.get(descriptor.appName);
+        if (!buttonContainer) return;
+        const activeButtonContainer = this._getActiveButtonContainer();
+        if (activeButtonContainer === buttonContainer) {
+          if (!this._closeButton) {
+            throw new Error('Expected this._closeButton');
+          }
+          this._closeButton(true);
+        }
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelOpen').filter(e => e.detail.sidebarId === this._instanceId && e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
+        const descriptor = this._instanceIdsToDescriptors.get(event.detail.instanceId);
+        if (!descriptor) return;
+        const buttonContainer = this._globalButtonContainers.get(descriptor.appName);
+        if (!buttonContainer) return;
+        const activeButtonContainer = this._getActiveButtonContainer();
+        if (activeButtonContainer !== buttonContainer) {
+          (0, _querySelectorOrFail.default)(buttonContainer, 'button').click();
+        }
+      });
+    }
 
-      Kefir.fromEvents((document.body: any), 'inboxsdkUpdateSidebarPanel')
-        .filter((e) => e.detail.sidebarId === this._instanceId)
-        .takeUntilBy(this._stopper)
-        .onValue((event) => {
-          this._instanceIdsToDescriptors.set(
-            event.detail.instanceId,
-            event.detail
-          );
-        });
+    // instance id to descriptor management
+    {
+      _kefir.default.fromEvents(document.body, 'inboxsdkNewSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId).takeUntilBy(this._stopper).onValue(event => {
+        this._instanceIdsToDescriptors.set(event.detail.instanceId, event.detail);
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkRemoveSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId).takeUntilBy(this._stopper).onValue(event => {
+        this._instanceIdsToDescriptors.delete(event.detail.instanceId);
+      });
+      _kefir.default.fromEvents(document.body, 'inboxsdkUpdateSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId).takeUntilBy(this._stopper).onValue(event => {
+        this._instanceIdsToDescriptors.set(event.detail.instanceId, event.detail);
+      });
     }
 
     // at this point the companionSidebar has 2 children
@@ -1014,35 +623,20 @@ class GmailAppSidebarPrimary {
     // or the thread add-on content element are visible
     // if they are both display: '' or display: none then the native sidebar
     // contents are not visible
-    const globalAddOnContentContainer =
-      this._companionSidebarContentContainerEl.children[0];
-    const threadAddOnContentContainer =
-      this._companionSidebarContentContainerEl.children[1];
-
-    Kefir.merge(
-      [globalAddOnContentContainer, threadAddOnContentContainer].map(
-        (addonContentEl) =>
-          makeMutationObserverChunkedStream(addonContentEl, {
-            attributes: true,
-            attributeFilter: ['style'],
-          })
-      )
-    )
-      .filter(
-        () =>
-          globalAddOnContentContainer.style.display !==
-          threadAddOnContentContainer.style.display
-      )
-      .takeUntilBy(this._stopper)
-      .onValue(() => {
-        // TODO What is this block for? It closes the current section whenever
-        // one of the Gmail addons bar elements changes?
-        const activeButtonContainer = this._getActiveButtonContainer();
-        if (activeButtonContainer) {
-          querySelector(activeButtonContainer, 'button').click();
-        }
-      });
+    const globalAddOnContentContainer = this._companionSidebarContentContainerEl.children[0];
+    const threadAddOnContentContainer = this._companionSidebarContentContainerEl.children[1];
+    _kefir.default.merge([globalAddOnContentContainer, threadAddOnContentContainer].map(addonContentEl => (0, _makeMutationObserverChunkedStream.default)(addonContentEl, {
+      attributes: true,
+      attributeFilter: ['style']
+    }))).filter(() => globalAddOnContentContainer.style.display !== threadAddOnContentContainer.style.display).takeUntilBy(this._stopper).onValue(() => {
+      // TODO What is this block for? It closes the current section whenever
+      // one of the Gmail addons bar elements changes?
+      const activeButtonContainer = this._getActiveButtonContainer();
+      if (activeButtonContainer) {
+        (0, _querySelectorOrFail.default)(activeButtonContainer, 'button').click();
+      }
+    });
   }
 }
-
-export default defn(module, GmailAppSidebarPrimary);
+var _default = (0, _ud.defn)(module, GmailAppSidebarPrimary);
+exports.default = _default;