@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

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

@@ -1,34 +1,36 @@
-"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"));
+/* @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';
+
 const ACTIVE_ADD_ON_ICON_SELECTOR = '.aT5-aOt-I-KO';
 const COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS = 'brC-brG-btc';
 
@@ -37,54 +39,75 @@ 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()}`;
 
-  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
-        }
-      },
+  _companionSidebarContentContainerEl: HTMLElement;
+  _instanceIdsToDescriptors: Map<string, Object> = new Map();
 
-      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
-        }
+  _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();
+
+  _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
       }
-    }));
-    (0, _defineProperty2.default)(this, "_updateHighlightedAppThreadIconBus", (0, _kefirBus.default)());
-    (0, _defineProperty2.default)(this, "_appSidebarRefSetter", threadSidebarComponent => {
-      if (threadSidebarComponent) {
-        this._threadSidebarComponent = threadSidebarComponent;
+    },
+    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, "_closeButton", null);
+    },
+  });
+
+  _containerProp: () => HTMLElement;
+  _updateHighlightedAppThreadIconBus: Bus<null> = kefirBus();
+
+  constructor(
+    driver: GmailDriver,
+    companionSidebarContentContainerElement: HTMLElement
+  ) {
     this._driver = driver;
-    this._companionSidebarContentContainerEl = companionSidebarContentContainerElement;
+    this._companionSidebarContentContainerEl =
+      companionSidebarContentContainerElement;
     this._setupElement();
   }
-  getInstanceId() {
+
+  getInstanceId(): string {
     return this._instanceId;
   }
 
@@ -98,207 +121,310 @@ 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() {
-    return global.localStorage.getItem('inboxsdk__global_app_sidebar_should_open') === 'true';
+  _getShouldGlobalAppSidebarOpen(): boolean {
+    return (
+      global.localStorage.getItem(
+        'inboxsdk__global_app_sidebar_should_open'
+      ) === 'true'
+    );
   }
-  _setShouldGlobalAppSidebarOpen(open) {
+
+  _setShouldGlobalAppSidebarOpen(open: boolean) {
     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() {
-    return global.localStorage.getItem('inboxsdk__thread_app_sidebar_should_open') !== 'false';
+  _getShouldThreadAppSidebarOpen(): boolean {
+    return (
+      global.localStorage.getItem(
+        'inboxsdk__thread_app_sidebar_should_open'
+      ) !== 'false'
+    );
   }
-  _setShouldThreadAppSidebarOpen(open) {
+
+  _setShouldThreadAppSidebarOpen(open: boolean) {
     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() {
+  _createThreadSidebarIfNeeded(): HTMLElement {
     if (this._threadSidebarContainerEl) return this._threadSidebarContainerEl;
-    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);
+
+    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
+    );
+
     this._containerProp = () => threadSidebarContainerEl;
 
     // Kefir flow type def has wrong type for bufferWithTimeOrCount
-    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;
-      });
+    (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();
 
-      // 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;
+          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;
+            }
           }
+
+          titleBar = lastElementAboveViewPort;
         }
-        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');
+
+        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');
         }
-        appButton.classList.add('sidebar_button_container_active');
-      }
-    });
+      });
 
     //listen for scroll and update active icon if needed
-    this._updateHighlightedAppThreadIconBus.plug(_kefir.default.fromEvents(threadSidebarContainerEl, 'scroll').map(() => null));
+    this._updateHighlightedAppThreadIconBus.plug(
+      Kefir.fromEvents(threadSidebarContainerEl, 'scroll').map(() => null)
+    );
 
     // handle rendering thread sidebar contents
     this._renderThreadSidebar();
     return threadSidebarContainerEl;
   }
+
   _renderThreadSidebarIfPresent() {
     if (!this._threadSidebarContainerEl) {
       return;
     }
     this._renderThreadSidebar();
   }
-  _renderThreadSidebar() {
+
+  _appSidebarRefSetter: (el: ?AppSidebar) => void = (
+    threadSidebarComponent
+  ) => {
+    if (threadSidebarComponent) {
+      this._threadSidebarComponent = threadSidebarComponent;
+    }
+  };
+
+  _renderThreadSidebar(): Promise<AppSidebar> {
     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.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: () => {
+    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);
           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() {
+
+  _getActiveButtonContainer(): ?HTMLElement {
     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;
   }
-  _addButton(iconArea, event, isGlobal) {
-    var _this = this;
+
+  _closeButton: ?(userClick: boolean) => void = null;
+
+  _addButton(iconArea: HTMLElement, event: Object, isGlobal: boolean) {
     // 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
-    (0, _asap.default)(() => {
+    asap(() => {
       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 = (0, _idMap.default)('sidebar_button_container');
+        buttonContainer.className = idMap('sidebar_button_container');
         buttonContainer.setAttribute('data-app-name', appName);
-        buttonContainer.innerHTML = (0, _autoHtml.default)`
+        buttonContainer.innerHTML = autoHtml`
           <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) {
-          (0, _querySelectorOrFail.default)(buttonContainer, '.inboxsdk__button_selectedIndicator').style.backgroundColor = event.detail.primaryColor;
+          querySelector(
+            buttonContainer,
+            '.inboxsdk__button_selectedIndicator'
+          ).style.backgroundColor = event.detail.primaryColor;
         }
+
         if (isGlobal) {
           this._globalButtonContainers.set(appName, buttonContainer);
         } else {
           this._threadButtonContainers.set(appName, buttonContainer);
         }
-        const activate = function () {
-          let dontScrollIntoView = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-          const activeButtonContainer = _this._getActiveButtonContainer();
+
+        const activate = (dontScrollIntoView = 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.dispatchEvent(new CustomEvent('inboxsdkSidebarPanelActivated', {
-                bubbles: true,
-                cancelable: false,
-                detail: {
-                  instanceId
-                }
-              }));
+              ((document.body: any): HTMLElement).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');
               }
@@ -307,45 +433,58 @@ class GmailAppSidebarPrimary {
                 threadSidebarComponent.scrollPanelIntoView(instanceId, true);
               }
             }
-            _this._closeButton = userClick => {
-              _this._closeButton = null;
-              const activeButtonContainer = _this._getActiveButtonContainer();
+
+            this._closeButton = (userClick: boolean) => {
+              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.dispatchEvent(new CustomEvent('inboxsdkSidebarPanelDeactivated', {
-                  bubbles: true,
-                  cancelable: false,
-                  detail: {
-                    instanceId
-                  }
-                }));
+
+                ((document.body: any): HTMLElement).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
-              (0, _fakeWindowResize.default)();
+              fakeWindowResize();
             };
 
             //fake a window resize after opening so gmail fixes any heights that are messed up
-            (0, _fakeWindowResize.default)();
+            fakeWindowResize();
           }
         };
-        (0, _querySelectorOrFail.default)(buttonContainer, 'button').addEventListener('click', event => {
-          event.stopPropagation();
-          activate();
-        }, true);
+
+        querySelector(buttonContainer, 'button').addEventListener(
+          'click',
+          (event: MouseEvent) => {
+            event.stopPropagation();
+            activate();
+          },
+          true
+        );
+
         if (iconArea) {
-          (0, _addToIconArea.default)(this._orderManager, appName, buttonContainer, iconArea);
+          addToIconArea(this._orderManager, appName, buttonContainer, iconArea);
         }
 
         // if we last had an SDK sidebar open then bring up the SDK sidebar when the first
@@ -354,14 +493,20 @@ 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);
               }
@@ -371,22 +516,42 @@ class GmailAppSidebarPrimary {
       }
     });
   }
-  _removeButton(event, buttonContainers, iconArea) {
+
+  _removeButton(
+    event: Object,
+    buttonContainers: Map<string, HTMLElement>,
+    iconArea: ?HTMLElement
+  ) {
     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);
@@ -396,17 +561,39 @@ class GmailAppSidebarPrimary {
       container.setAttribute('data-count', String(currentCount - 1));
     }
   }
-  _closeSidebarAndDeactivateButton(activeButtonContainer) {
+
+  _closeSidebarAndDeactivateButton(activeButtonContainer: HTMLElement) {
     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, isGlobal) {
-    const companionSidebarIconContainerEl = _gmailElementGetter.default.getCompanionSidebarIconContainerElement();
-    if (!companionSidebarIconContainerEl) throw new Error('Could not find companion sidebar icon container element');
+
+  _openSidebarAndActivateButton(
+    buttonContainer: HTMLElement,
+    isGlobal: boolean
+  ) {
+    const companionSidebarIconContainerEl =
+      GmailElementGetter.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');
@@ -415,203 +602,407 @@ 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) {
-        (0, _simulateMouseEvent.simulateClick)(nativeActiveAddOnIcon);
+        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.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);
+    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
+    );
 
     // 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;
+    this._companionSidebarOuterWrapper =
+      this._companionSidebarContentContainerEl.classList.contains('bq9')
+        ? this._companionSidebarContentContainerEl
+        : (this._companionSidebarContentContainerEl.parentElement: any);
+
     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((0, _idMap.default)('companion_container_app_sidebar_in_use'));
+      contentContainer.classList.add(
+        idMap('companion_container_app_sidebar_in_use')
+      );
     }
-    this._companionSidebarContentContainerEl.classList.add((0, _idMap.default)('app_sidebar_in_use'));
-    if (!document.body.querySelector('.' + (0, _idMap.default)('app_sidebar_waiting_platform'))) {
+    this._companionSidebarContentContainerEl.classList.add(
+      idMap('app_sidebar_in_use')
+    );
+
+    if (
+      !((document.body: any): HTMLElement).querySelector(
+        '.' + idMap('app_sidebar_waiting_platform')
+      )
+    ) {
       const waitingPlatform = document.createElement('div');
-      waitingPlatform.className = (0, _idMap.default)('app_sidebar_waiting_platform');
-      document.body.appendChild(waitingPlatform);
+      waitingPlatform.className = idMap('app_sidebar_waiting_platform');
+      ((document.body: any): HTMLElement).appendChild(waitingPlatform);
     }
 
     // thread sidebar content panels
     {
-      _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: {
+      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,
             id,
-            appName,
+            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,
             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
+            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);
           }
+          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);
         });
-        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), '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}`);
         });
-        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);
+
+      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
+          );
+        });
+
+      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
+          );
           if (!descriptor) return;
-          const buttonContainer = this._threadButtonContainers.get(descriptor.appName);
-          if (!buttonContainer) {
-            throw new Error('missing button container');
-          }
+
+          const buttonContainer = this._globalButtonContainers.get(
+            descriptor.appName
+          );
+          if (!buttonContainer) return;
+
           const activeButtonContainer = this._getActiveButtonContainer();
-          if (activeButtonContainer !== buttonContainer) {
-            (0, _querySelectorOrFail.default)(buttonContainer, 'button').click();
+          if (activeButtonContainer === buttonContainer) {
+            if (!this._closeButton) {
+              throw new Error('Expected this._closeButton');
+            }
+            this._closeButton(true);
           }
         });
-      });
-    }
 
-    // global sidebar content panels
-    {
-      _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');
+      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();
           }
-          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();
-        }
-      });
+        });
     }
 
     // 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);
-      });
+      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.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
+          );
+        });
     }
 
     // at this point the companionSidebar has 2 children
@@ -623,20 +1014,35 @@ 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.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();
-      }
-    });
+    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();
+        }
+      });
   }
 }
-var _default = (0, _ud.defn)(module, GmailAppSidebarPrimary);
-exports.default = _default;
+
+export default defn(module, GmailAppSidebarPrimary);