@inboxsdk/core 1.1.6 → 1.1.7

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

@@ -1,641 +1,721 @@
-"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"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _constants = require("../../../../../driver-common/sidebar/constants");
+import findIndex from 'lodash/findIndex';
+import autoHtml from 'auto-html';
+import asap from 'asap';
+import * as Kefir from 'kefir';
+import kefirBus 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 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 { 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';
+import cx from 'classnames';
+import { sidebarWaitingPlatformClassName, sidebarWaitingPlatformSelector, } from '../../../../../driver-common/sidebar/constants';
 const ACTIVE_ADD_ON_ICON_SELECTOR = '.aT5-aOt-I-KO';
-const COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS = 'brC-brG-btc';
-
-// Only one instance of this Primary is ever created within a page, even if
+const COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS = 'brC-brG-btc'; // Only one instance of this Primary is ever created within a page, even if
 // there are multiple InboxSDK instances and/or extensions. All other InboxSDK
 // instances (including from other extensions) communicate with this Primary
 // through DOM events.
 class GmailAppSidebarPrimary {
-  // 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.
-
-  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() {
+    _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;
+    // 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 = `${Date.now()}-${Math.random()}`;
+    _companionSidebarContentContainerEl;
+    _instanceIdsToDescriptors = new Map();
+    _threadSidebarComponent = null;
+    _threadIconArea = null;
+    _globalIconArea = null;
+    _globalButtonContainers = new Map();
+    _threadButtonContainers = new Map();
+    _contentContainers = new Map();
+    _threadSidebarContainerEl = null;
+    _companionSidebarOuterWrapper;
+    _currentIds = new Set();
+    _orderManager = new OrderManager({
+        get() {
+            try {
+                return JSON.parse(global.localStorage.getItem('inboxsdk__sidebar_ordering') || 'null');
+            }
+            catch (err) {
+                console.error('failed to read sidebar order data', err);
+            }
+        },
+        set(data) {
+            try {
+                global.localStorage.setItem('inboxsdk__sidebar_ordering', JSON.stringify(data));
+            }
+            catch (err) {
+                console.error('failed to set sidebar order data', err);
+            }
+        },
+    });
+    _containerProp;
+    _updateHighlightedAppThreadIconBus = kefirBus();
+    constructor(driver, companionSidebarContentContainerElement) {
+        this._driver = driver;
+        this._companionSidebarContentContainerEl =
+            companionSidebarContentContainerElement;
+        this._setupElement();
+    }
+    getInstanceId() {
+        return this._instanceId;
+    }
+    // Only use this if a different Primary needs to take over this one's elements.
+    // Currently this is only done when hot-reloading in dev. Don't use this when
+    // a threadview exits, the sdk.destroy() is called, etc.
+    destroy() {
+        this._stopper.destroy();
+    }
+    // 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');
+    }
+    _setShouldGlobalAppSidebarOpen(open) {
         try {
-          return JSON.parse(global.localStorage.getItem('inboxsdk__sidebar_ordering') || 'null');
-        } catch (err) {
-          console.error('failed to read sidebar order data', err);
+            global.localStorage.setItem('inboxsdk__global_app_sidebar_should_open', String(open));
         }
-      },
-      set(data) {
-        try {
-          global.localStorage.setItem('inboxsdk__sidebar_ordering', JSON.stringify(data));
-        } catch (err) {
-          console.error('failed to set sidebar order data', err);
+        catch (err) {
+            console.error('error saving', err);
         }
-      }
-    }));
-    (0, _defineProperty2.default)(this, "_updateHighlightedAppThreadIconBus", (0, _kefirBus.default)());
-    (0, _defineProperty2.default)(this, "_appSidebarRefSetter", threadSidebarComponent => {
-      if (threadSidebarComponent) {
-        this._threadSidebarComponent = threadSidebarComponent;
-      }
-    });
-    (0, _defineProperty2.default)(this, "_closeButton", null);
-    this._driver = driver;
-    this._companionSidebarContentContainerEl = companionSidebarContentContainerElement;
-    this._setupElement();
-  }
-  getInstanceId() {
-    return this._instanceId;
-  }
-
-  // Only use this if a different Primary needs to take over this one's elements.
-  // Currently this is only done when hot-reloading in dev. Don't use this when
-  // a threadview exits, the sdk.destroy() is called, etc.
-  destroy() {
-    this._stopper.destroy();
-  }
-
-  // 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';
-  }
-  _setShouldGlobalAppSidebarOpen(open) {
-    try {
-      global.localStorage.setItem('inboxsdk__global_app_sidebar_should_open', String(open));
-    } catch (err) {
-      console.error('error saving', err);
     }
-  }
-  _getShouldThreadAppSidebarOpen() {
-    return global.localStorage.getItem('inboxsdk__thread_app_sidebar_should_open') !== 'false';
-  }
-  _setShouldThreadAppSidebarOpen(open) {
-    try {
-      global.localStorage.setItem('inboxsdk__thread_app_sidebar_should_open', String(open));
-    } catch (err) {
-      console.error('error saving', err);
+    _getShouldThreadAppSidebarOpen() {
+        return (global.localStorage.getItem('inboxsdk__thread_app_sidebar_should_open') !== 'false');
     }
-  }
-  _createThreadSidebarIfNeeded() {
-    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);
-    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;
-      });
-
-      // 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;
-          }
+    _setShouldThreadAppSidebarOpen(open) {
+        try {
+            global.localStorage.setItem('inboxsdk__thread_app_sidebar_should_open', String(open));
         }
-        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');
+        catch (err) {
+            console.error('error saving', err);
         }
-        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));
-
-    // handle rendering thread sidebar contents
-    this._renderThreadSidebar();
-    return threadSidebarContainerEl;
-  }
-  _renderThreadSidebarIfPresent() {
-    if (!this._threadSidebarContainerEl) {
-      return;
     }
-    this._renderThreadSidebar();
-  }
-  _renderThreadSidebar() {
-    const threadSidebarContainerEl = this._threadSidebarContainerEl;
-    if (!threadSidebarContainerEl) {
-      throw new Error('_renderThreadSidebar should not be called when _threadSidebarContainerEl is unset');
+    _createThreadSidebarIfNeeded() {
+        if (this._threadSidebarContainerEl)
+            return this._threadSidebarContainerEl;
+        const threadSidebarContainerEl = (this._threadSidebarContainerEl =
+            document.createElement('div'));
+        threadSidebarContainerEl.classList.add('thread_app_sidebar', idMap('app_sidebar_container'), 'addon_sidebar');
+        this._companionSidebarContentContainerEl.insertBefore(threadSidebarContainerEl, this._companionSidebarContentContainerEl.firstElementChild);
+        this._containerProp = () => threadSidebarContainerEl;
+        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(`.${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();
+                const relativeScrollOfTitleBottom = tBoundingBox.bottom;
+                const absoluteScrollOfTitleBottom = relativeScrollOfTitleBottom + absoluteScrollOfViewportTop;
+                // Return true for an element that is below the top of the viewport but above its midpoint
+                return (absoluteScrollOfTitleBottom > absoluteScrollOfViewportTop &&
+                    absoluteScrollOfTitleBottom < absoluteScrollOfViewportMidpoint);
+            });
+            // If titleBar is falsey then there isn't a title element in the top half of the viewport.
+            // In this case, find the first title element above the viewport.
+            if (!titleBar) {
+                // We make the assumption here that ordering of the elements in titleBars matches the
+                // ordering of how they appear in the sidebar (i.e. their ordering from top to bottom).
+                let lastElementAboveViewPort;
+                for (let i = 0; i < titleBars.length; i++) {
+                    const tElement = titleBars[i];
+                    const tBoundingBox = tElement.getBoundingClientRect();
+                    const relativeScrollOfTitleBottom = tBoundingBox.bottom;
+                    if (relativeScrollOfTitleBottom < 0) {
+                        lastElementAboveViewPort = tElement;
+                    }
+                    else if (relativeScrollOfTitleBottom > 0) {
+                        break;
+                    }
+                }
+                titleBar = lastElementAboveViewPort;
+            }
+            if (titleBar) {
+                const instanceId = titleBar.getAttribute('data-instance-id');
+                const appName = titleBar.getAttribute('data-app-name');
+                if (!appName)
+                    return;
+                const appButton = this._threadButtonContainers.get(appName);
+                if (!appButton || !this._threadIconArea)
+                    return;
+                const activeButtonContainer = this._threadIconArea.querySelector('.sidebar_button_container_active');
+                if (activeButtonContainer) {
+                    activeButtonContainer.classList.remove('sidebar_button_container_active');
+                }
+                appButton.classList.add('sidebar_button_container_active');
+            }
+        });
+        //listen for scroll and update active icon if needed
+        this._updateHighlightedAppThreadIconBus.plug(Kefir.fromEvents(threadSidebarContainerEl, 'scroll').map(() => null));
+        // handle rendering thread sidebar contents
+        this._renderThreadSidebar();
+        return threadSidebarContainerEl;
     }
-    return new Promise(resolve => {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_AppSidebar.default, {
-        ref: this._appSidebarRefSetter,
-        panels: this._orderManager.getOrderedItems().map(x => x.value),
-        onMoveEnd: (newList, movedItem, oldIndex, newIndex) => {
-          this._orderManager.moveItem(oldIndex, newIndex);
-          this._renderThreadSidebar();
-        },
-        onExpandedToggle: () => {
-          this._updateHighlightedAppThreadIconBus.emit(null);
-        },
-        container: this._containerProp
-      }), threadSidebarContainerEl, () => {
-        if (!this._threadSidebarComponent) {
-          throw new Error('Should not happen');
+    _renderThreadSidebarIfPresent() {
+        if (!this._threadSidebarContainerEl) {
+            return;
         }
-        resolve(this._threadSidebarComponent);
-        this._updateHighlightedAppThreadIconBus.emit(null);
-      });
-    });
-  }
-  _getActiveButtonContainer() {
-    let activeButtonContainer;
-    if (this._globalIconArea) {
-      activeButtonContainer = this._globalIconArea.querySelector('.sidebar_button_container_active');
+        this._renderThreadSidebar();
     }
-    if (!activeButtonContainer && this._threadIconArea) {
-      activeButtonContainer = this._threadIconArea.querySelector('.sidebar_button_container_active');
+    _appSidebarRefSetter = (threadSidebarComponent) => {
+        if (threadSidebarComponent) {
+            this._threadSidebarComponent = threadSidebarComponent;
+        }
+    };
+    _renderThreadSidebar() {
+        const threadSidebarContainerEl = this._threadSidebarContainerEl;
+        if (!threadSidebarContainerEl) {
+            throw new Error('_renderThreadSidebar should not be called when _threadSidebarContainerEl is unset');
+        }
+        return new Promise((resolve) => {
+            ReactDOM.render(React.createElement(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);
+            });
+        });
+    }
+    _getActiveButtonContainer() {
+        let activeButtonContainer;
+        if (this._globalIconArea) {
+            activeButtonContainer = this._globalIconArea.querySelector('.sidebar_button_container_active');
+        }
+        if (!activeButtonContainer && this._threadIconArea) {
+            activeButtonContainer = this._threadIconArea.querySelector('.sidebar_button_container_active');
+        }
+        return activeButtonContainer;
     }
-    return activeButtonContainer;
-  }
-  _addButton(iconArea, event, isGlobal) {
-    var _this = this;
-    // we put adding the content panel icon in the iconArea in an asap so that we
-    // get consistent ordering. The ordering of the icons is based on the position of the FIRST
-    // panel with that app name. This means we need to wait for all the panels for a particular appName
-    // to be added first, and then we can get the correct position
-    (0, _asap.default)(() => {
-      if (!iconArea) throw new Error('should not happen');
-      const instanceId = event.detail.instanceId;
-      const iconUrl = isGlobal && event.detail.iconUrl ? event.detail.iconUrl : event.detail.appIconUrl;
-      const 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);
-      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.innerHTML = (0, _autoHtml.default)`
+    _closeButton = null;
+    _addButton(iconArea, event, isGlobal) {
+        // 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 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);
+            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.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;
-        }
-        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();
-          if (activeButtonContainer === buttonContainer) {
-            // button was clicked while its panel was open, so close it.
-            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 (isGlobal) _this._setShouldGlobalAppSidebarOpen(true);else _this._setShouldThreadAppSidebarOpen(true);
-            _this._openSidebarAndActivateButton(buttonContainer, isGlobal);
-            if (isGlobal) {
-              const contentEl = _this._contentContainers.get(appName);
-              if (contentEl) contentEl.style.display = '';
-              _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
+                if (event.detail.primaryColor) {
+                    querySelector(buttonContainer, '.inboxsdk__button_selectedIndicator').style.backgroundColor = event.detail.primaryColor;
                 }
-              }));
-            } else {
-              const threadSidebarComponent = _this._threadSidebarComponent;
-              if (!threadSidebarComponent) {
-                throw new Error('sidebar not mounted');
-              }
-              if (!dontScrollIntoView) {
-                threadSidebarComponent.openPanel(instanceId);
-                threadSidebarComponent.scrollPanelIntoView(instanceId, true);
-              }
-            }
-            _this._closeButton = userClick => {
-              _this._closeButton = null;
-              const activeButtonContainer = _this._getActiveButtonContainer();
-              if (!activeButtonContainer) {
-                throw new Error('Expected activeButtonContainer');
-              }
-              _this._closeSidebarAndDeactivateButton(activeButtonContainer);
-              if (isGlobal) {
-                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'));
+                if (isGlobal) {
+                    this._globalButtonContainers.set(appName, buttonContainer);
+                }
+                else {
+                    this._threadButtonContainers.set(appName, buttonContainer);
+                }
+                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);
+                    }
+                    else {
+                        // button was clicked while its own panel wasn't open, so open it.
+                        if (this._closeButton) {
+                            this._closeButton(true);
+                        }
+                        if (isGlobal)
+                            this._setShouldGlobalAppSidebarOpen(true);
+                        else
+                            this._setShouldThreadAppSidebarOpen(true);
+                        this._openSidebarAndActivateButton(buttonContainer, isGlobal);
+                        if (isGlobal) {
+                            const contentEl = this._contentContainers.get(appName);
+                            if (contentEl)
+                                contentEl.style.display = '';
+                            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,
+                                },
+                            }));
+                        }
+                        else {
+                            const threadSidebarComponent = this._threadSidebarComponent;
+                            if (!threadSidebarComponent) {
+                                throw new Error('sidebar not mounted');
+                            }
+                            if (!dontScrollIntoView) {
+                                threadSidebarComponent.openPanel(instanceId);
+                                threadSidebarComponent.scrollPanelIntoView(instanceId, true);
+                            }
+                        }
+                        this._closeButton = (userClick) => {
+                            this._closeButton = null;
+                            const activeButtonContainer = this._getActiveButtonContainer();
+                            if (!activeButtonContainer) {
+                                throw new Error('Expected activeButtonContainer');
+                            }
+                            this._closeSidebarAndDeactivateButton(activeButtonContainer);
+                            if (isGlobal) {
+                                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'));
+                                }
+                                document.body.dispatchEvent(new CustomEvent('inboxsdkSidebarPanelDeactivated', {
+                                    bubbles: true,
+                                    cancelable: false,
+                                    detail: {
+                                        instanceId,
+                                    },
+                                }));
+                            }
+                            else {
+                                if (userClick)
+                                    this._setShouldThreadAppSidebarOpen(false);
+                            }
+                            //fake a window resize after closing so gmail fixes any heights that are messed up
+                            fakeWindowResize();
+                        };
+                        //fake a window resize after opening so gmail fixes any heights that are messed up
+                        fakeWindowResize();
+                    }
+                };
+                querySelector(buttonContainer, 'button').addEventListener('click', (event) => {
+                    event.stopPropagation();
+                    activate();
+                }, true);
+                if (iconArea) {
+                    addToIconArea(this._orderManager, appName, buttonContainer, iconArea);
+                }
+                // if we last had an SDK sidebar open then bring up the SDK sidebar when the first
+                // panel gets added
+                {
+                    const activeButtonContainer = this._getActiveButtonContainer();
+                    if (isGlobal) {
+                        if (this._getShouldGlobalAppSidebarOpen()) {
+                            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);
+                            if (!activeButtonContainerPresentAndIsForThread) {
+                                activate(true);
+                            }
+                        }
+                    }
                 }
-                document.body.dispatchEvent(new CustomEvent('inboxsdkSidebarPanelDeactivated', {
-                  bubbles: true,
-                  cancelable: false,
-                  detail: {
-                    instanceId
-                  }
-                }));
-              } else {
-                if (userClick) _this._setShouldThreadAppSidebarOpen(false);
-              }
-              //fake a window resize after closing so gmail fixes any heights that are messed up
-              (0, _fakeWindowResize.default)();
-            };
-
-            //fake a window resize after opening so gmail fixes any heights that are messed up
-            (0, _fakeWindowResize.default)();
-          }
-        };
-        (0, _querySelectorOrFail.default)(buttonContainer, 'button').addEventListener('click', event => {
-          event.stopPropagation();
-          activate();
-        }, true);
-        if (iconArea) {
-          (0, _addToIconArea.default)(this._orderManager, appName, buttonContainer, iconArea);
-        }
-
-        // if we last had an SDK sidebar open then bring up the SDK sidebar when the first
-        // panel gets added
-        {
-          const activeButtonContainer = this._getActiveButtonContainer();
-          if (isGlobal) {
-            if (this._getShouldGlobalAppSidebarOpen()) {
-              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);
-              if (!activeButtonContainerPresentAndIsForThread) {
-                activate(true);
-              }
+        });
+    }
+    _removeButton(event, buttonContainers, iconArea) {
+        const appName = event.detail.appName;
+        const container = buttonContainers.get(appName);
+        if (!iconArea || !container) {
+            throw new Error('should not happen: tried to remove button without container or iconArea');
+        }
+        const currentCount = Number(container.getAttribute('data-count'));
+        if (currentCount <= 1) {
+            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');
             }
-          }
+            container.remove();
+            buttonContainers.delete(appName);
+        }
+        else if (currentCount === 2) {
+            container.removeAttribute('data-count');
+        }
+        else {
+            container.setAttribute('data-count', String(currentCount - 1));
         }
-      }
-    });
-  }
-  _removeButton(event, buttonContainers, iconArea) {
-    const appName = event.detail.appName;
-    const container = buttonContainers.get(appName);
-    if (!iconArea || !container) {
-      throw new Error('should not happen: tried to remove button without container or iconArea');
     }
-    const currentCount = Number(container.getAttribute('data-count'));
-    if (currentCount <= 1) {
-      const activeButtonContainer = iconArea.querySelector('.sidebar_button_container_active');
-      if (container === activeButtonContainer) {
-        if (!this._closeButton) throw new Error();
-        this._closeButton(false);
+    _closeSidebarAndDeactivateButton(activeButtonContainer) {
+        activeButtonContainer.classList.remove('sidebar_button_container_active');
         this._companionSidebarOuterWrapper.classList.remove('companion_app_sidebar_wrapper_visible');
-        this._companionSidebarContentContainerEl.classList.remove('companion_app_sidebar_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');
-      }
-      container.remove();
-      buttonContainers.delete(appName);
-    } else if (currentCount === 2) {
-      container.removeAttribute('data-count');
-    } else {
-      container.setAttribute('data-count', String(currentCount - 1));
-    }
-  }
-  _closeSidebarAndDeactivateButton(activeButtonContainer) {
-    activeButtonContainer.classList.remove('sidebar_button_container_active');
-    this._companionSidebarOuterWrapper.classList.remove('companion_app_sidebar_wrapper_visible');
-    this._companionSidebarContentContainerEl.classList.add(COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS);
-    this._companionSidebarContentContainerEl.classList.remove('companion_app_sidebar_visible', 'companion_global_app_sidebar_visible');
-    const contentContainer = this._companionSidebarOuterWrapper.previousElementSibling;
-    if (contentContainer) contentContainer.classList.remove('companion_container_app_sidebar_visible');
-  }
-  _openSidebarAndActivateButton(buttonContainer, isGlobal) {
-    const companionSidebarIconContainerEl = _gmailElementGetter.default.getCompanionSidebarIconContainerElement();
-    if (!companionSidebarIconContainerEl) throw new Error('Could not find companion sidebar icon container element');
-    const activeButtonContainer = this._getActiveButtonContainer();
-    if (activeButtonContainer) {
-      throw new Error('activeButtonContainer should not be true');
-      // this._closeSidebarAndDeactivateButton(activeButtonContainer);
-    }
-
-    {
-      // If a gmail addon is active, close it.
-      const nativeActiveAddOnIcon = companionSidebarIconContainerEl.querySelector(ACTIVE_ADD_ON_ICON_SELECTOR);
-      if (nativeActiveAddOnIcon) {
-        (0, _simulateMouseEvent.simulateClick)(nativeActiveAddOnIcon);
-      }
-    }
-    buttonContainer.classList.add('sidebar_button_container_active');
-    this._companionSidebarOuterWrapper.classList.add('companion_app_sidebar_wrapper_visible');
-    this._companionSidebarContentContainerEl.classList.add('companion_app_sidebar_visible');
-    this._companionSidebarContentContainerEl.classList.remove(COMPANION_SIDEBAR_CONTENT_CLOSED_SHADOW_CLASS);
-    const contentContainer = this._companionSidebarOuterWrapper.previousElementSibling;
-    if (contentContainer) contentContainer.classList.add('companion_container_app_sidebar_visible');
-    if (isGlobal) this._companionSidebarContentContainerEl.classList.add('companion_global_app_sidebar_visible');
-  }
-  _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);
-
-    // 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;
-    if (!this._companionSidebarOuterWrapper) {
-      throw new Error('should not happen: failed to find companionSidebarOuterWrapper');
-    }
-    const contentContainer = this._companionSidebarOuterWrapper.previousElementSibling;
-    if (contentContainer) {
-      contentContainer.classList.add((0, _idMap.default)('companion_container_app_sidebar_in_use'));
+        if (contentContainer)
+            contentContainer.classList.remove('companion_container_app_sidebar_visible');
     }
-    this._companionSidebarContentContainerEl.classList.add((0, _idMap.default)('app_sidebar_in_use'));
-    if (!document.body.querySelector(_constants.sidebarWaitingPlatformSelector)) {
-      const waitingPlatform = document.createElement('div');
-      waitingPlatform.className = (0, _classnames.default)(_constants.sidebarWaitingPlatformClassName, (0, _idMap.default)('app_sidebar_waiting_platform'));
-      document.body.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);
+    _openSidebarAndActivateButton(buttonContainer, isGlobal) {
+        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'); // this._closeSidebarAndDeactivateButton(activeButtonContainer);
         }
-        this._currentIds.add(id);
-        const appName = event.detail.appName;
-        this._orderManager.addItem({
-          groupId: event.detail.appId,
-          id,
-          orderHint: event.detail.orderHint,
-          value: {
-            id,
-            appName,
-            appId: event.detail.appId,
-            instanceId: event.detail.instanceId,
-            title: event.detail.title,
-            iconClass: event.detail.iconClass,
-            iconUrl: event.detail.iconUrl,
-            hideTitleBar: event.detail.hideTitleBar,
-            el: event.target
-          }
-        });
-        this._renderThreadSidebar();
-        let threadIconArea = this._threadIconArea = companionSidebarIconContainerEl.querySelector('.sidebar_thread_iconArea');
-        if (!threadIconArea) {
-          threadIconArea = this._threadIconArea = document.createElement('div');
-          threadIconArea.className = (0, _idMap.default)('sidebar_iconArea');
-          threadIconArea.classList.add('sidebar_thread_iconArea');
-          (0, _addCompanionThreadIconArea.default)(this._driver.getLogger(), threadIconArea, companionSidebarIconContainerEl);
+        {
+            // If a gmail addon is active, close it.
+            const nativeActiveAddOnIcon = companionSidebarIconContainerEl.querySelector(ACTIVE_ADD_ON_ICON_SELECTOR);
+            if (nativeActiveAddOnIcon) {
+                simulateClick(nativeActiveAddOnIcon);
+            }
         }
-        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
-        });
-        this._renderThreadSidebar();
-      });
-      _kefir.default.fromEvents(document.body, 'inboxsdkRemoveSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
-        const orderedItems = this._orderManager.getOrderedItems();
-        const index = (0, _findIndex.default)(orderedItems, x => x.value.instanceId === event.detail.instanceId);
-        if (index === -1) throw new Error('should not happen: failed to find orderItem');
-        this._currentIds.delete(orderedItems[index].id);
-        this._orderManager.removeItemByIndex(index);
-        this._renderThreadSidebar();
-        this._removeButton(event, this._threadButtonContainers, this._threadIconArea);
-      });
-      _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelScrollIntoView').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
-        if (this._threadSidebarComponent) this._threadSidebarComponent.scrollPanelIntoView(event.detail.instanceId);
-      });
-      _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelClose').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
-        if (this._threadSidebarComponent) this._threadSidebarComponent.closePanel(event.detail.instanceId);
-      });
-      _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelOpen').filter(e => e.detail.sidebarId === this._instanceId && !e.detail.isGlobal).takeUntilBy(this._stopper).onValue(e => {
-        this._renderThreadSidebar().then(threadSidebarComponent => {
-          const descriptor = this._instanceIdsToDescriptors.get(e.detail.instanceId);
-          if (!descriptor) return;
-          const buttonContainer = this._threadButtonContainers.get(descriptor.appName);
-          if (!buttonContainer) {
-            throw new Error('missing button container');
-          }
-          const activeButtonContainer = this._getActiveButtonContainer();
-          if (activeButtonContainer !== buttonContainer) {
-            (0, _querySelectorOrFail.default)(buttonContainer, 'button').click();
-          }
-        });
-      });
+        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');
     }
-
-    // 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);
+    _setupElement() {
+        const companionSidebarIconContainerEl = GmailElementGetter.getCompanionSidebarIconContainerElement();
+        if (!companionSidebarIconContainerEl)
+            throw new Error('Could not find companion sidebar icon container element');
+        this._companionSidebarContentContainerEl.setAttribute('data-sdk-sidebar-instance-id', this._instanceId);
+        // 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;
+        if (!this._companionSidebarOuterWrapper) {
+            throw new Error('should not happen: failed to find companionSidebarOuterWrapper');
         }
-        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 contentContainer = this._companionSidebarOuterWrapper.previousElementSibling;
+        if (contentContainer) {
+            contentContainer.classList.add(idMap('companion_container_app_sidebar_in_use'));
         }
-        const sdkContentContainerEl = document.createElement('div');
-        sdkContentContainerEl.classList.add('addon_sidebar', (0, _idMap.default)('app_sidebar_container'), 'global_app_sidebar');
-        this._companionSidebarContentContainerEl.insertAdjacentElement('afterbegin', sdkContentContainerEl);
-        this._contentContainers.set(appName, sdkContentContainerEl);
-        sdkContentContainerEl.appendChild(event.target);
-        sdkContentContainerEl.style.display = 'none';
-        this._addButton(globalIconArea, event, true);
-      });
-      _kefir.default.fromEvents(document.body, 'inboxsdkUpdateSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId && e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
-        const buttonContainer = this._globalButtonContainers.get(event.detail.appName);
-        if (!buttonContainer) return;
-        const iconClass = event.detail.iconClass || '';
-        const iconUrl = event.detail.iconUrl || event.detail.appIconUrl;
-        const imgElement = (0, _querySelectorOrFail.default)(buttonContainer, 'img');
-        imgElement.setAttribute('src', iconUrl);
-        const button = (0, _querySelectorOrFail.default)(buttonContainer, 'button');
-        button.setAttribute('class', `inboxsdk__button_icon ${iconClass}`);
-      });
-      _kefir.default.fromEvents(document.body, 'inboxsdkRemoveSidebarPanel').filter(e => e.detail.sidebarId === this._instanceId && e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
-        this._currentIds.delete(event.detail.id);
-        this._removeButton(event, this._globalButtonContainers, this._globalIconArea);
-      });
-      _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelClose').filter(e => e.detail.sidebarId === this._instanceId && e.detail.isGlobal).takeUntilBy(this._stopper).onValue(event => {
-        const descriptor = this._instanceIdsToDescriptors.get(event.detail.instanceId);
-        if (!descriptor) return;
-        const buttonContainer = this._globalButtonContainers.get(descriptor.appName);
-        if (!buttonContainer) return;
-        const activeButtonContainer = this._getActiveButtonContainer();
-        if (activeButtonContainer === buttonContainer) {
-          if (!this._closeButton) {
-            throw new Error('Expected this._closeButton');
-          }
-          this._closeButton(true);
+        this._companionSidebarContentContainerEl.classList.add(idMap('app_sidebar_in_use'));
+        if (!document.body.querySelector(sidebarWaitingPlatformSelector)) {
+            const waitingPlatform = document.createElement('div');
+            waitingPlatform.className = cx(sidebarWaitingPlatformClassName, idMap('app_sidebar_waiting_platform'));
+            document.body.appendChild(waitingPlatform);
         }
-      });
-      _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();
+        // thread sidebar content panels
+        {
+            Kefir.fromEvents(window, 'storage')
+                .filter((e) => e.key === 'inboxsdk__sidebar_ordering')
+                .takeUntilBy(this._stopper)
+                .onValue(() => {
+                this._orderManager.reload();
+                this._renderThreadSidebarIfPresent();
+            });
+            Kefir.fromEvents(document.body, '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,
+                    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, '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,
+                });
+                this._renderThreadSidebar();
+            });
+            Kefir.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 = 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, '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, '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, '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();
+                    }
+                });
+            });
         }
-      });
-    }
-
-    // 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);
-      });
+        // global sidebar content panels
+        {
+            Kefir.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 = 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);
+            });
+            Kefir.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 = querySelector(buttonContainer, 'img');
+                imgElement.setAttribute('src', iconUrl);
+                const button = querySelector(buttonContainer, 'button');
+                button.setAttribute('class', `inboxsdk__button_icon ${iconClass}`);
+            });
+            Kefir.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.fromEvents(document.body, 'inboxsdkSidebarPanelClose')
+                .filter((e) => e.detail.sidebarId === this._instanceId && e.detail.isGlobal)
+                .takeUntilBy(this._stopper)
+                .onValue((event) => {
+                const descriptor = this._instanceIdsToDescriptors.get(event.detail.instanceId);
+                if (!descriptor)
+                    return;
+                const buttonContainer = this._globalButtonContainers.get(descriptor.appName);
+                if (!buttonContainer)
+                    return;
+                const activeButtonContainer = this._getActiveButtonContainer();
+                if (activeButtonContainer === buttonContainer) {
+                    if (!this._closeButton) {
+                        throw new Error('Expected this._closeButton');
+                    }
+                    this._closeButton(true);
+                }
+            });
+            Kefir.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) {
+                    querySelector(buttonContainer, 'button').click();
+                }
+            });
+        }
+        // instance id to descriptor management
+        {
+            Kefir.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.fromEvents(document.body, 'inboxsdkRemoveSidebarPanel')
+                .filter((e) => e.detail.sidebarId === this._instanceId)
+                .takeUntilBy(this._stopper)
+                .onValue((event) => {
+                this._instanceIdsToDescriptors.delete(event.detail.instanceId);
+            });
+            Kefir.fromEvents(document.body, 'inboxsdkUpdateSidebarPanel')
+                .filter((e) => e.detail.sidebarId === this._instanceId)
+                .takeUntilBy(this._stopper)
+                .onValue((event) => {
+                this._instanceIdsToDescriptors.set(event.detail.instanceId, event.detail);
+            });
+        }
+        // at this point the companionSidebar has 2 children
+        // 1st child is global add-on content
+        // 2nd is thread add-on content (may not exist)
+        // listen for companion sidebar contents to become visible
+        // this happens when ONE of the global add-on content element
+        // or the thread add-on content element are visible
+        // if they are both display: '' or display: none then the native sidebar
+        // contents are not visible
+        const globalAddOnContentContainer = this._companionSidebarContentContainerEl
+            .children[0];
+        const threadAddOnContentContainer = this._companionSidebarContentContainerEl
+            .children[1];
+        Kefir.merge([globalAddOnContentContainer, threadAddOnContentContainer].map((addonContentEl) => makeMutationObserverChunkedStream(addonContentEl, {
+            attributes: true,
+            attributeFilter: ['style'],
+        })))
+            .filter(() => globalAddOnContentContainer.style.display !==
+            threadAddOnContentContainer.style.display)
+            .takeUntilBy(this._stopper)
+            .onValue(() => {
+            // TODO What is this block for? It closes the current section whenever
+            // one of the Gmail addons bar elements changes?
+            const activeButtonContainer = this._getActiveButtonContainer();
+            if (activeButtonContainer) {
+                querySelector(activeButtonContainer, 'button').click();
+            }
+        });
     }
-
-    // at this point the companionSidebar has 2 children
-    // 1st child is global add-on content
-    // 2nd is thread add-on content (may not exist)
-
-    // listen for companion sidebar contents to become visible
-    // this happens when ONE of the global add-on content element
-    // 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();
-      }
-    });
-  }
 }
-var _default = (0, _ud.defn)(module, GmailAppSidebarPrimary);
-exports.default = _default;
+export default GmailAppSidebarPrimary;