@inboxsdk/core 0.2.28-alpha.6 → 0.2.28

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

@@ -1,47 +1,57 @@
-"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 _findIndex = _interopRequireDefault(require("lodash/findIndex"));
-var _asap = _interopRequireDefault(require("asap"));
-var _ud = require("ud");
-var _autoHtml = _interopRequireDefault(require("auto-html"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _findParent = _interopRequireDefault(require("../../../../common/find-parent"));
-var _delayAsap = _interopRequireDefault(require("../../../lib/delay-asap"));
-var _fromEventTargetCapture = _interopRequireDefault(require("../../../lib/from-event-target-capture"));
-var _orderManager = _interopRequireDefault(require("order-manager"));
-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 _AppSidebar = _interopRequireDefault(require("../../../driver-common/sidebar/AppSidebar"));
-var _ContentPanelViewDriver = _interopRequireDefault(require("../../../driver-common/sidebar/ContentPanelViewDriver"));
-var _gmailElementGetter = _interopRequireDefault(require("../gmail-element-getter"));
-var _addIconArea = _interopRequireDefault(require("./gmail-thread-sidebar-view/add-icon-area"));
-var _addToIconArea = _interopRequireDefault(require("./gmail-app-sidebar-view/primary/add-to-icon-area"));
+/* @flow */
+
 /*
 This is used for PRE MATERIAL GMAIL, when sidebar only existed on threads.
 If you're reading this in the future, do you remember a time when there wasn't a global sidebar?
 It was a strange world, can you believe who the President of the United States was?
 
 */
+
+import findIndex from 'lodash/findIndex';
+import asap from 'asap';
+import { defn } from 'ud';
+import autoHtml from 'auto-html';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import kefirBus from 'kefir-bus';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import findParent from '../../../../common/find-parent';
+import delayAsap from '../../../lib/delay-asap';
+import fromEventTargetCapture from '../../../lib/from-event-target-capture';
+import OrderManager from 'order-manager';
+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 type GmailDriver from '../gmail-driver';
+
+import AppSidebar from '../../../driver-common/sidebar/AppSidebar';
+import ContentPanelViewDriver from '../../../driver-common/sidebar/ContentPanelViewDriver';
+import GmailElementGetter from '../gmail-element-getter';
+
+import addIconArea from './gmail-thread-sidebar-view/add-icon-area';
+import addToIconArea from './gmail-app-sidebar-view/primary/add-to-icon-area';
+
 const ADD_ON_SIDEBAR_CONTENT_SELECTOR = '.J-KU-Jz';
 const ACTIVE_ADD_ON_ICON_SELECTOR = '.J-KU-KO';
+
+import type WidthManager from './gmail-thread-view/width-manager';
+
 class GmailAppSidebarView {
-  constructor(driver, sidebarContainerEl, addonSidebarElement, widthManager) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+  _stopper = kefirStopper();
+  _driver: GmailDriver;
+  _instanceId: string;
+
+  constructor(
+    driver: GmailDriver,
+    sidebarContainerEl?: ?HTMLElement,
+    addonSidebarElement: ?HTMLElement,
+    widthManager: ?WidthManager
+  ) {
     this._driver = driver;
 
     // We need to be able to cooperate with other apps/extensions that are
@@ -57,34 +67,53 @@ class GmailAppSidebarView {
     if (instanceId != null) {
       this._instanceId = instanceId;
     } else {
-      this._createElement(sidebarContainerEl, addonSidebarElement, widthManager);
+      this._createElement(
+        sidebarContainerEl,
+        addonSidebarElement,
+        widthManager
+      );
     }
   }
+
   destroy() {
     this._stopper.destroy();
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<*> {
     return this._stopper;
   }
 
   // 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.
-  _getShouldAppSidebarOpen() {
-    return global.localStorage.getItem('inboxsdk__app_sidebar_should_open') !== 'false';
+  _getShouldAppSidebarOpen(): boolean {
+    return (
+      global.localStorage.getItem('inboxsdk__app_sidebar_should_open') !==
+      'false'
+    );
   }
-  _setShouldAppSidebarOpen(open) {
+
+  _setShouldAppSidebarOpen(open: boolean) {
     try {
-      global.localStorage.setItem('inboxsdk__app_sidebar_should_open', String(open));
+      global.localStorage.setItem(
+        'inboxsdk__app_sidebar_should_open',
+        String(open)
+      );
     } catch (err) {
       console.error('error saving', err); //eslint-disable-line no-console
     }
   }
 
-  _createElement(_sidebarContainerEl, _addonSidebarContainerEl, widthManager) {
+  _createElement(
+    _sidebarContainerEl: ?HTMLElement,
+    _addonSidebarContainerEl: ?HTMLElement,
+    widthManager: ?WidthManager
+  ) {
     let container, iconArea;
-    let component;
+    let component: AppSidebar;
+
     this._instanceId = `${Date.now()}-${Math.random()}`;
+
     {
       const idElement = _addonSidebarContainerEl || _sidebarContainerEl;
       if (!idElement) throw new Error('should not happen');
@@ -93,154 +122,237 @@ class GmailAppSidebarView {
         idElement.removeAttribute('data-sdk-sidebar-instance-id');
       });
     }
+
     const el = document.createElement('div');
-    el.className = (0, _idMap.default)('app_sidebar_container');
-    const buttonContainers = new Map();
-    let activatedWhileLoading = false;
+    el.className = idMap('app_sidebar_container');
+
+    const buttonContainers: Map<string, HTMLElement> = new Map();
+    let activatedWhileLoading: boolean = false;
+
     let contentContainer;
     let usedAddonsSidebar = false;
-    const updateHighlightedAppIconBus = (0, _kefirBus.default)();
+
+    const updateHighlightedAppIconBus = kefirBus();
     this._stopper.onEnd(() => {
       updateHighlightedAppIconBus.end();
     });
+
     if (_addonSidebarContainerEl) {
-      const mainContentBodyContainerElement = _gmailElementGetter.default.getMainContentBodyContainerElement();
+      const mainContentBodyContainerElement =
+        GmailElementGetter.getMainContentBodyContainerElement();
       if (mainContentBodyContainerElement) {
         contentContainer = mainContentBodyContainerElement.parentElement;
         if (!contentContainer) throw new Error('should not happen');
         contentContainer.classList.add('container_app_sidebar_in_use');
-        (0, _querySelectorOrFail.default)(_addonSidebarContainerEl, ADD_ON_SIDEBAR_CONTENT_SELECTOR).insertAdjacentElement('beforebegin', el);
+        querySelector(
+          _addonSidebarContainerEl,
+          ADD_ON_SIDEBAR_CONTENT_SELECTOR
+        ).insertAdjacentElement('beforebegin', el);
 
         // See if the element is visible.
         // Give it some content temporarily to check if it becomes sized to show it.
         _addonSidebarContainerEl.classList.add('app_sidebar_visible');
-        _addonSidebarContainerEl.classList.add((0, _idMap.default)('app_sidebar_in_use'));
+        _addonSidebarContainerEl.classList.add(idMap('app_sidebar_in_use'));
         contentContainer.classList.add('container_app_sidebar_visible');
+
         el.textContent = 'x';
         const elRect = el.getBoundingClientRect();
         el.textContent = '';
         // This gets re-added later once the panel has some content to show
         _addonSidebarContainerEl.classList.remove('app_sidebar_visible');
         contentContainer.classList.remove('container_app_sidebar_visible');
-        const supportedScreenSize = window.innerWidth >= 1024 && window.innerHeight >= 600;
-        if (!global._APP_SIDEBAR_TEST && (elRect.width == 0 || elRect.height == 0 || supportedScreenSize && Math.floor(elRect.right) > Math.floor(window.innerWidth))) {
-          this._driver.getLogger().error(new Error('SDK sidebar inserted into add-ons sidebar was not visible'), {
-            rect: {
-              // rect's properties aren't enumerable so we have to do this
-              top: elRect.top,
-              bottom: elRect.bottom,
-              left: elRect.left,
-              right: elRect.right,
-              width: elRect.width,
-              height: elRect.height
-            },
-            window: {
-              innerWidth: window.innerWidth,
-              innerHeight: window.innerHeight
-            }
-          });
+
+        const supportedScreenSize =
+          window.innerWidth >= 1024 && window.innerHeight >= 600;
+        if (
+          !global._APP_SIDEBAR_TEST &&
+          (elRect.width == 0 ||
+            elRect.height == 0 ||
+            (supportedScreenSize &&
+              Math.floor(elRect.right) > Math.floor(window.innerWidth)))
+        ) {
+          this._driver
+            .getLogger()
+            .error(
+              new Error(
+                'SDK sidebar inserted into add-ons sidebar was not visible'
+              ),
+              {
+                rect: {
+                  // rect's properties aren't enumerable so we have to do this
+                  top: elRect.top,
+                  bottom: elRect.bottom,
+                  left: elRect.left,
+                  right: elRect.right,
+                  width: elRect.width,
+                  height: elRect.height,
+                },
+                window: {
+                  innerWidth: window.innerWidth,
+                  innerHeight: window.innerHeight,
+                },
+              }
+            );
         } else {
           usedAddonsSidebar = true;
         }
+
         if (!usedAddonsSidebar) {
-          if (contentContainer) contentContainer.classList.remove('container_app_sidebar_in_use');
-          _addonSidebarContainerEl.classList.remove((0, _idMap.default)('app_sidebar_in_use'));
+          if (contentContainer)
+            contentContainer.classList.remove('container_app_sidebar_in_use');
+          _addonSidebarContainerEl.classList.remove(
+            idMap('app_sidebar_in_use')
+          );
         }
       }
     }
-    const addonSidebarContainerEl = usedAddonsSidebar ? _addonSidebarContainerEl : null;
-    const sidebarContainerEl = usedAddonsSidebar ? _addonSidebarContainerEl : _sidebarContainerEl;
+
+    const addonSidebarContainerEl = usedAddonsSidebar
+      ? _addonSidebarContainerEl
+      : null;
+    const sidebarContainerEl = usedAddonsSidebar
+      ? _addonSidebarContainerEl
+      : _sidebarContainerEl;
     if (!sidebarContainerEl) throw new Error('should not happen');
     if (!usedAddonsSidebar) {
       sidebarContainerEl.insertBefore(el, sidebarContainerEl.firstElementChild);
-      sidebarContainerEl.classList.add((0, _idMap.default)('app_sidebar_in_use'));
+      sidebarContainerEl.classList.add(idMap('app_sidebar_in_use'));
     }
-    if (!document.body.querySelector('.' + (0, _idMap.default)('app_sidebar_waiting_platform'))) {
+
+    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);
     }
+
     if (addonSidebarContainerEl) {
       container = () => el;
       el.classList.add('addon_sidebar');
     } else {
-      const containerEl = (0, _findParent.default)(sidebarContainerEl, el => window.getComputedStyle(el).overflowY !== 'visible');
+      const containerEl = findParent(
+        sidebarContainerEl,
+        (el) => window.getComputedStyle(el).overflowY !== 'visible'
+      );
       container = containerEl ? () => containerEl : undefined;
     }
+
     const currentIds = new Set();
-    const orderManager = new _orderManager.default({
+    const orderManager = new OrderManager({
       get() {
         try {
-          return JSON.parse(global.localStorage.getItem('inboxsdk__sidebar_ordering') || 'null');
+          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));
+          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
         }
-      }
+      },
     });
 
-    updateHighlightedAppIconBus.bufferWithTimeOrCount(150, 100).filter(events => events.length > 0).takeUntilBy(this._stopper).onValue(() => {
-      const elBoundingBox = el.getBoundingClientRect();
-      const boundingTop = elBoundingBox.top + el.scrollTop;
-      const boundingBottom = boundingTop + elBoundingBox.height;
-      const titleBars = Array.from(el.querySelectorAll(`.${(0, _idMap.default)('app_sidebar_content_panel')}.${(0, _idMap.default)('expanded')} .${(0, _idMap.default)('app_sidebar_content_panel_top_line')}`));
-      const titleBar = titleBars.find(t => {
-        const tBoundingBox = t.getBoundingClientRect();
-        return tBoundingBox.bottom > boundingTop && tBoundingBox.bottom < boundingBottom;
-      });
-      if (titleBar) {
-        const instanceId = titleBar.getAttribute('data-instance-id');
-        const appName = titleBar.getAttribute('data-app-name');
-        if (!appName) return;
-        const appButton = buttonContainers.get(appName);
-        if (!appButton || !iconArea) return;
-        const activeButtonContainer = iconArea.querySelector('.sidebar_button_container_active');
-        if (activeButtonContainer) {
-          activeButtonContainer.classList.remove('sidebar_button_container_active');
+    updateHighlightedAppIconBus
+      .bufferWithTimeOrCount(150, 100)
+      .filter((events) => events.length > 0)
+      .takeUntilBy(this._stopper)
+      .onValue(() => {
+        const elBoundingBox = el.getBoundingClientRect();
+        const boundingTop = elBoundingBox.top + el.scrollTop;
+        const boundingBottom = boundingTop + elBoundingBox.height;
+
+        const titleBars = Array.from(
+          el.querySelectorAll(
+            `.${idMap('app_sidebar_content_panel')}.${idMap(
+              'expanded'
+            )} .${idMap('app_sidebar_content_panel_top_line')}`
+          )
+        );
+
+        const titleBar = titleBars.find((t) => {
+          const tBoundingBox = t.getBoundingClientRect();
+          return (
+            tBoundingBox.bottom > boundingTop &&
+            tBoundingBox.bottom < boundingBottom
+          );
+        });
+
+        if (titleBar) {
+          const instanceId = titleBar.getAttribute('data-instance-id');
+          const appName = titleBar.getAttribute('data-app-name');
+          if (!appName) return;
+          const appButton = buttonContainers.get(appName);
+          if (!appButton || !iconArea) return;
+
+          const activeButtonContainer = iconArea.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');
-      }
-    });
-    const _appSidebarRefSetter = threadSidebarComponent => {
+      });
+
+    const _appSidebarRefSetter = (threadSidebarComponent) => {
       if (threadSidebarComponent) {
         component = threadSidebarComponent;
       }
     };
+
     const render = () => {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_AppSidebar.default, {
-        ref: _appSidebarRefSetter,
-        panels: orderManager.getOrderedItems().map(x => x.value),
-        onMoveEnd: (newList, movedItem, oldIndex, newIndex) => {
-          orderManager.moveItem(oldIndex, newIndex);
-          render();
-        },
-        onExpandedToggle: () => {
+      ReactDOM.render(
+        <AppSidebar
+          ref={_appSidebarRefSetter}
+          panels={orderManager.getOrderedItems().map((x) => x.value)}
+          onMoveEnd={(newList, movedItem, oldIndex, newIndex) => {
+            orderManager.moveItem(oldIndex, newIndex);
+            render();
+          }}
+          onExpandedToggle={() => {
+            updateHighlightedAppIconBus.emit(null);
+          }}
+          container={container}
+        />,
+        el,
+        () => {
           updateHighlightedAppIconBus.emit(null);
-        },
-        container: container
-      }), el, () => {
-        updateHighlightedAppIconBus.emit(null);
-      });
+        }
+      );
     };
     render();
-    _kefir.default.fromEvents(window, 'storage').filter(e => e.key === 'inboxsdk__sidebar_ordering').takeUntilBy(this._stopper).onValue(() => {
-      orderManager.reload();
-      render();
-    });
+
+    Kefir.fromEvents(window, 'storage')
+      .filter((e) => e.key === 'inboxsdk__sidebar_ordering')
+      .takeUntilBy(this._stopper)
+      .onValue(() => {
+        orderManager.reload();
+        render();
+      });
+
     this._stopper.onValue(() => {
-      _reactDom.default.unmountComponentAtNode(el);
+      ReactDOM.unmountComponentAtNode(el);
       el.remove();
-      sidebarContainerEl.classList.remove((0, _idMap.default)('app_sidebar_in_use'));
+      sidebarContainerEl.classList.remove(idMap('app_sidebar_in_use'));
       sidebarContainerEl.classList.remove('app_sidebar_visible');
       if (iconArea) iconArea.remove();
-      const mainContentBodyContainerElement = _gmailElementGetter.default.getMainContentBodyContainerElement();
+
+      const mainContentBodyContainerElement =
+        GmailElementGetter.getMainContentBodyContainerElement();
       if (mainContentBodyContainerElement) {
         contentContainer = mainContentBodyContainerElement.parentElement;
         if (contentContainer) {
@@ -249,245 +361,384 @@ class GmailAppSidebarView {
         }
       }
     });
-    _kefir.default.fromEvents(document.body, 'inboxsdkNewSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId).takeUntilBy(this._stopper).onValue(event => {
-      let id = event.detail.id;
-      while (currentIds.has(id)) {
-        id = (0, _incrementName.default)(id);
-      }
-      currentIds.add(id);
-      const appName = event.detail.appName;
-      orderManager.addItem({
-        groupId: event.detail.appId,
-        id,
-        orderHint: event.detail.orderHint,
-        value: {
+
+    Kefir.fromEvents((document.body: any), 'inboxsdkNewSidebarPanel')
+      .filter((e) => e.detail.sidebarId === this._instanceId)
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        let id = event.detail.id;
+        while (currentIds.has(id)) {
+          id = incrementName(id);
+        }
+        currentIds.add(id);
+
+        const appName = event.detail.appName;
+        orderManager.addItem({
+          groupId: event.detail.appId,
           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
+          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,
+          },
+        });
+        render();
+
+        if (!addonSidebarContainerEl) return;
+
+        iconArea = addonSidebarContainerEl.querySelector(
+          '.' + idMap('sidebar_iconArea')
+        );
+        if (!iconArea) {
+          iconArea = document.createElement('div');
+          iconArea.className = idMap('sidebar_iconArea');
+          addIconArea(iconArea, addonSidebarContainerEl, this._stopper);
         }
-      });
-      render();
-      if (!addonSidebarContainerEl) return;
-      iconArea = addonSidebarContainerEl.querySelector('.' + (0, _idMap.default)('sidebar_iconArea'));
-      if (!iconArea) {
-        iconArea = document.createElement('div');
-        iconArea.className = (0, _idMap.default)('sidebar_iconArea');
-        (0, _addIconArea.default)(iconArea, addonSidebarContainerEl, this._stopper);
-      }
 
-      // 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)(() => {
-        if (!iconArea) throw new Error('should not happen');
-        const instanceId = event.detail.instanceId;
-        const appIconUrl = event.detail.appIconUrl;
-
-        // If there's an existing button for the app, then just increment its
-        // data-count attribute instead of adding a new button.
-        const existingButtonContainer = buttonContainers.get(appName);
-        let buttonContainer;
-        if (existingButtonContainer) {
-          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.setAttribute('data-app-name', appName);
-          buttonContainer.setAttribute('data-count', String(1));
-          buttonContainer.innerHTML = (0, _autoHtml.default)`
+        // 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(() => {
+          if (!iconArea) throw new Error('should not happen');
+          const instanceId = event.detail.instanceId;
+          const appIconUrl = event.detail.appIconUrl;
+
+          // If there's an existing button for the app, then just increment its
+          // data-count attribute instead of adding a new button.
+          const existingButtonContainer = buttonContainers.get(appName);
+
+          let buttonContainer;
+          if (existingButtonContainer) {
+            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.setAttribute('data-app-name', appName);
+            buttonContainer.setAttribute('data-count', String(1));
+            buttonContainer.innerHTML = autoHtml`
               <button class="inboxsdk__button_icon" type="button" data-tooltip="${appName}">
                 <img class="inboxsdk__button_iconImg" src="${appIconUrl}">
               </button>
               <div class="inboxsdk__button_selectedIndicator"></div>
             `;
-          if (event.detail.primaryColor) {
-            (0, _querySelectorOrFail.default)(buttonContainer, '.inboxsdk__button_selectedIndicator').style.backgroundColor = event.detail.primaryColor;
-          }
-          buttonContainers.set(appName, buttonContainer);
-          (0, _querySelectorOrFail.default)(buttonContainer, 'button').addEventListener('click', event => {
-            event.stopPropagation();
-            const activeButtonContainer = iconArea ? iconArea.querySelector('.sidebar_button_container_active') : null;
-            if (activeButtonContainer) {
-              activeButtonContainer.classList.remove('sidebar_button_container_active');
+
+            if (event.detail.primaryColor) {
+              querySelector(
+                buttonContainer,
+                '.inboxsdk__button_selectedIndicator'
+              ).style.backgroundColor = event.detail.primaryColor;
             }
-            if (activeButtonContainer === buttonContainer) {
-              if (addonSidebarContainerEl) addonSidebarContainerEl.classList.remove('app_sidebar_visible');
-              if (contentContainer) contentContainer.classList.remove('container_app_sidebar_visible');
-              this._setShouldAppSidebarOpen(false);
-            } else {
-              if (addonSidebarContainerEl) addonSidebarContainerEl.classList.add('app_sidebar_visible');
-              buttonContainer.classList.add('sidebar_button_container_active');
-              if (contentContainer) contentContainer.classList.add('container_app_sidebar_visible');
-              this._setShouldAppSidebarOpen(true);
-              if (addonSidebarContainerEl) {
-                // check and deactivate add-on sidebar
-                const activeAddOnIcon = addonSidebarContainerEl.querySelector(ACTIVE_ADD_ON_ICON_SELECTOR);
-                if (activeAddOnIcon) (0, _simulateMouseEvent.simulateClick)(activeAddOnIcon);
 
-                //fake resize to get gmail to fix any heights that are messed up
-                (0, _fakeWindowResize.default)();
-
-                // if the tabList is still loading then handle the case where the user
-                // clicks on an SDK icon to bring up an SDK app when Gmail thinks that it needs
-                // to bring up an Add-On sidebar (since that was last visible from Gmail's perspective)
-                // so we need to suppress Gmail bringing up their sidebar. This handles the flag of if we
-                // need to suppress
-                const nativeIconArea = addonSidebarContainerEl.firstElementChild;
-                if (!nativeIconArea) return;
-                const loadingHolderAsAny = nativeIconArea.firstElementChild;
-                const loadingHolder = loadingHolderAsAny;
-                if (!loadingHolder) return;
-                if (loadingHolder.style.display !== 'none') {
-                  activatedWhileLoading = true;
-                  (0, _makeMutationObserverChunkedStream.default)(loadingHolder, {
-                    attributes: true,
-                    attributeFilter: ['style']
-                  }).toProperty(() => null).map(() => loadingHolder.style.display === 'none').filter(Boolean).take(1).delay(150).takeUntilBy(this._stopper).onValue(() => {
-                    activatedWhileLoading = false;
-                  });
+            buttonContainers.set(appName, buttonContainer);
+
+            querySelector(buttonContainer, 'button').addEventListener(
+              'click',
+              (event: MouseEvent) => {
+                event.stopPropagation();
+
+                const activeButtonContainer = iconArea
+                  ? iconArea.querySelector('.sidebar_button_container_active')
+                  : null;
+                if (activeButtonContainer) {
+                  activeButtonContainer.classList.remove(
+                    'sidebar_button_container_active'
+                  );
+                }
+
+                if (activeButtonContainer === buttonContainer) {
+                  if (addonSidebarContainerEl)
+                    addonSidebarContainerEl.classList.remove(
+                      'app_sidebar_visible'
+                    );
+                  if (contentContainer)
+                    contentContainer.classList.remove(
+                      'container_app_sidebar_visible'
+                    );
+
+                  this._setShouldAppSidebarOpen(false);
+                } else {
+                  if (addonSidebarContainerEl)
+                    addonSidebarContainerEl.classList.add(
+                      'app_sidebar_visible'
+                    );
+                  buttonContainer.classList.add(
+                    'sidebar_button_container_active'
+                  );
+                  if (contentContainer)
+                    contentContainer.classList.add(
+                      'container_app_sidebar_visible'
+                    );
+
+                  this._setShouldAppSidebarOpen(true);
+
+                  if (addonSidebarContainerEl) {
+                    // check and deactivate add-on sidebar
+                    const activeAddOnIcon =
+                      addonSidebarContainerEl.querySelector(
+                        ACTIVE_ADD_ON_ICON_SELECTOR
+                      );
+                    if (activeAddOnIcon) simulateClick(activeAddOnIcon);
+
+                    //fake resize to get gmail to fix any heights that are messed up
+                    fakeWindowResize();
+
+                    // if the tabList is still loading then handle the case where the user
+                    // clicks on an SDK icon to bring up an SDK app when Gmail thinks that it needs
+                    // to bring up an Add-On sidebar (since that was last visible from Gmail's perspective)
+                    // so we need to suppress Gmail bringing up their sidebar. This handles the flag of if we
+                    // need to suppress
+                    const nativeIconArea =
+                      addonSidebarContainerEl.firstElementChild;
+                    if (!nativeIconArea) return;
+                    const loadingHolderAsAny: any =
+                      nativeIconArea.firstElementChild;
+                    const loadingHolder = (loadingHolderAsAny: ?HTMLElement);
+                    if (!loadingHolder) return;
+
+                    if (loadingHolder.style.display !== 'none') {
+                      activatedWhileLoading = true;
+                      makeMutationObserverChunkedStream(loadingHolder, {
+                        attributes: true,
+                        attributeFilter: ['style'],
+                      })
+                        .toProperty(() => null)
+                        .map(() => loadingHolder.style.display === 'none')
+                        .filter(Boolean)
+                        .take(1)
+                        .delay(150)
+                        .takeUntilBy(this._stopper)
+                        .onValue(() => {
+                          activatedWhileLoading = false;
+                        });
+                    }
+                  }
+
+                  component.openPanel(instanceId);
+                  component.scrollPanelIntoView(instanceId, true);
                 }
+              },
+              true
+            );
+
+            if (iconArea)
+              addToIconArea(orderManager, appName, buttonContainer, iconArea);
+
+            if (widthManager) widthManager.fixWidths();
+
+            if (this._getShouldAppSidebarOpen()) {
+              // if we last had an SDK sidebar open then bring up the SDK sidebar when the first
+              // panel gets added
+              const activeButtonContainer = iconArea.querySelector(
+                '.sidebar_button_container_active'
+              );
+              if (!activeButtonContainer) {
+                buttonContainer.classList.add(
+                  'sidebar_button_container_active'
+                );
+
+                if (addonSidebarContainerEl)
+                  addonSidebarContainerEl.classList.add('app_sidebar_visible');
+                if (contentContainer)
+                  contentContainer.classList.add(
+                    'container_app_sidebar_visible'
+                  );
+
+                //fake resize to get gmail to fix any heights that are messed up
+                fakeWindowResize();
               }
-              component.openPanel(instanceId);
-              component.scrollPanelIntoView(instanceId, true);
-            }
-          }, true);
-          if (iconArea) (0, _addToIconArea.default)(orderManager, appName, buttonContainer, iconArea);
-          if (widthManager) widthManager.fixWidths();
-          if (this._getShouldAppSidebarOpen()) {
-            // if we last had an SDK sidebar open then bring up the SDK sidebar when the first
-            // panel gets added
-            const activeButtonContainer = iconArea.querySelector('.sidebar_button_container_active');
-            if (!activeButtonContainer) {
-              buttonContainer.classList.add('sidebar_button_container_active');
-              if (addonSidebarContainerEl) addonSidebarContainerEl.classList.add('app_sidebar_visible');
-              if (contentContainer) contentContainer.classList.add('container_app_sidebar_visible');
-
-              //fake resize to get gmail to fix any heights that are messed up
-              (0, _fakeWindowResize.default)();
             }
           }
-        }
-      });
-    });
-    _kefir.default.fromEvents(document.body, 'inboxsdkUpdateSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId).takeUntilBy(this._stopper).onValue(event => {
-      const orderedItems = 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');
-      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
+        });
       });
-      render();
-    });
-    _kefir.default.fromEvents(document.body, 'inboxsdkRemoveSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId).takeUntilBy(this._stopper).onValue(event => {
-      const orderedItems = 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');
-      currentIds.delete(orderedItems[index].id);
-      orderManager.removeItemByIndex(index);
-      if (orderManager.getOrderedItems().length === 0) {
-        this.destroy();
-      } else {
+
+    Kefir.fromEvents((document.body: any), 'inboxsdkUpdateSidebarPanel')
+      .filter((e) => e.detail.sidebarId === this._instanceId)
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        const orderedItems = 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');
+        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,
+        });
         render();
-      }
-      if (!addonSidebarContainerEl) return;
-      iconArea = addonSidebarContainerEl.querySelector('.' + (0, _idMap.default)('sidebar_iconArea'));
-      if (!iconArea) return;
-      if (widthManager) widthManager.fixWidths();
-      const appName = event.detail.appName;
-      const container = buttonContainers.get(appName);
-      if (container) {
-        const currentCount = Number(container.getAttribute('data-count'));
-        if (currentCount <= 1) {
-          const activeButtonContainer = el.querySelector('.sidebar_button_container_active');
-          container.remove();
-          buttonContainers.delete(appName);
-          if (container === activeButtonContainer) {
-            if (addonSidebarContainerEl) {
-              addonSidebarContainerEl.classList.remove('app_sidebar_visible');
-              if (contentContainer) contentContainer.classList.remove('container_app_sidebar_visible');
+      });
+
+    Kefir.fromEvents((document.body: any), 'inboxsdkRemoveSidebarPanel')
+      .filter((e) => e.detail.sidebarId === this._instanceId)
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        const orderedItems = 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');
+        currentIds.delete(orderedItems[index].id);
+        orderManager.removeItemByIndex(index);
+        if (orderManager.getOrderedItems().length === 0) {
+          this.destroy();
+        } else {
+          render();
+        }
+
+        if (!addonSidebarContainerEl) return;
+
+        iconArea = addonSidebarContainerEl.querySelector(
+          '.' + idMap('sidebar_iconArea')
+        );
+        if (!iconArea) return;
+
+        if (widthManager) widthManager.fixWidths();
+
+        const appName = event.detail.appName;
+
+        const container = buttonContainers.get(appName);
+        if (container) {
+          const currentCount = Number(container.getAttribute('data-count'));
+          if (currentCount <= 1) {
+            const activeButtonContainer = el.querySelector(
+              '.sidebar_button_container_active'
+            );
+            container.remove();
+            buttonContainers.delete(appName);
+            if (container === activeButtonContainer) {
+              if (addonSidebarContainerEl) {
+                addonSidebarContainerEl.classList.remove('app_sidebar_visible');
+                if (contentContainer)
+                  contentContainer.classList.remove(
+                    'container_app_sidebar_visible'
+                  );
+              }
+
+              this._setShouldAppSidebarOpen(false);
             }
-            this._setShouldAppSidebarOpen(false);
+          } else if (currentCount === 2) {
+            container.removeAttribute('data-count');
+          } else {
+            container.setAttribute('data-count', String(currentCount - 1));
           }
-        } else if (currentCount === 2) {
-          container.removeAttribute('data-count');
-        } else {
-          container.setAttribute('data-count', String(currentCount - 1));
         }
-      }
-    });
-    _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelScrollIntoView').takeUntilBy(this._stopper).onValue(event => {
-      component.scrollPanelIntoView(event.detail.instanceId);
-    });
-    _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelClose').takeUntilBy(this._stopper).onValue(event => {
-      component.closePanel(event.detail.instanceId);
-    });
+      });
+
+    Kefir.fromEvents((document.body: any), 'inboxsdkSidebarPanelScrollIntoView')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        component.scrollPanelIntoView(event.detail.instanceId);
+      });
+
+    Kefir.fromEvents((document.body: any), 'inboxsdkSidebarPanelClose')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        component.closePanel(event.detail.instanceId);
+      });
+
     if (addonSidebarContainerEl) {
       // listen for add-on sidebar contents to become visible which can happen in 1 of two cases
       //  1. user clicks on an Add-Icon icon
       //  2. Gmail automatically opens an Add-on sidebar because it was last open in previous thread
-      const addonSidebarContentContainerElement = (0, _querySelectorOrFail.default)(addonSidebarContainerEl, ADD_ON_SIDEBAR_CONTENT_SELECTOR);
-      (0, _makeElementChildStream.default)(addonSidebarContentContainerElement).flatMap(_ref => {
-        let {
-          el,
-          removalStream
-        } = _ref;
-        return (0, _makeMutationObserverChunkedStream.default)(el, {
-          attributes: true,
-          attributeFilter: ['style']
-        }).toProperty(() => null).map(() => el.style.display !== 'none');
-      }).takeUntilBy(this._stopper).onValue(isDisplayingGmailAddonSidebar => {
-        if (isDisplayingGmailAddonSidebar) {
-          if (contentContainer) contentContainer.classList.add('container_addon_sidebar_visible');
-
-          // we need to suppress this sidebar from loading
-          if (activatedWhileLoading) {
-            const activeAddOnIcon = addonSidebarContainerEl.querySelector(ACTIVE_ADD_ON_ICON_SELECTOR);
-            if (activeAddOnIcon) (0, _simulateMouseEvent.simulateClick)(activeAddOnIcon);
-            return;
-          }
-          this._setShouldAppSidebarOpen(false);
-          const activeButtonContainer = iconArea ? iconArea.querySelector('.sidebar_button_container_active') : null;
-          if (activeButtonContainer) {
-            addonSidebarContainerEl.classList.remove('app_sidebar_visible');
-            activeButtonContainer.classList.remove('sidebar_button_container_active');
-            if (contentContainer) contentContainer.classList.remove('container_app_sidebar_visible');
+      const addonSidebarContentContainerElement = querySelector(
+        addonSidebarContainerEl,
+        ADD_ON_SIDEBAR_CONTENT_SELECTOR
+      );
+      makeElementChildStream(addonSidebarContentContainerElement)
+        .flatMap(({ el, removalStream }) =>
+          makeMutationObserverChunkedStream(el, {
+            attributes: true,
+            attributeFilter: ['style'],
+          })
+            .toProperty(() => null)
+            .map(() => el.style.display !== 'none')
+        )
+        .takeUntilBy(this._stopper)
+        .onValue((isDisplayingGmailAddonSidebar) => {
+          if (isDisplayingGmailAddonSidebar) {
+            if (contentContainer)
+              contentContainer.classList.add('container_addon_sidebar_visible');
+
+            // we need to suppress this sidebar from loading
+            if (activatedWhileLoading) {
+              const activeAddOnIcon = addonSidebarContainerEl.querySelector(
+                ACTIVE_ADD_ON_ICON_SELECTOR
+              );
+              if (activeAddOnIcon) simulateClick(activeAddOnIcon);
+              return;
+            }
+
+            this._setShouldAppSidebarOpen(false);
+
+            const activeButtonContainer = iconArea
+              ? iconArea.querySelector('.sidebar_button_container_active')
+              : null;
+            if (activeButtonContainer) {
+              addonSidebarContainerEl.classList.remove('app_sidebar_visible');
+              activeButtonContainer.classList.remove(
+                'sidebar_button_container_active'
+              );
+              if (contentContainer)
+                contentContainer.classList.remove(
+                  'container_app_sidebar_visible'
+                );
+            }
+          } else {
+            if (contentContainer)
+              contentContainer.classList.remove(
+                'container_addon_sidebar_visible'
+              );
           }
-        } else {
-          if (contentContainer) contentContainer.classList.remove('container_addon_sidebar_visible');
-        }
-      });
+        });
     }
+
     if (addonSidebarContainerEl) {
       //listen for scroll and update active icon if needed
-      _kefir.default.fromEvents(el, 'scroll').takeUntilBy(this._stopper).onValue(() => {
-        updateHighlightedAppIconBus.emit(null);
-      });
+      Kefir.fromEvents(el, 'scroll')
+        .takeUntilBy(this._stopper)
+        .onValue(() => {
+          updateHighlightedAppIconBus.emit(null);
+        });
     }
   }
-  addSidebarContentPanel(descriptor) {
-    const panel = new _ContentPanelViewDriver.default(this._driver, descriptor, this._instanceId);
+
+  addSidebarContentPanel(descriptor: Kefir.Observable<Object>) {
+    const panel = new ContentPanelViewDriver(
+      this._driver,
+      descriptor,
+      this._instanceId
+    );
+
     this._stopper.takeUntilBy(panel.getStopper()).onValue(() => {
       panel.remove();
     });
+
     return panel;
   }
 }
-var _default = (0, _ud.defn)(module, GmailAppSidebarView);
-exports.default = _default;
+
+export default defn(module, GmailAppSidebarView);