@inboxsdk/core 1.2.5 → 1.2.7

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

@@ -1,723 +0,0 @@
-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
-// 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 {
-    _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 {
-            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);
-        }
-    }
-    _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) {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                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;
-    }
-    _renderThreadSidebarIfPresent() {
-        if (!this._threadSidebarContainerEl) {
-            return;
-        }
-        this._renderThreadSidebar();
-    }
-    _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;
-    }
-    _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) {
-                    querySelector(buttonContainer, '.inboxsdk__button_selectedIndicator').style.backgroundColor = event.detail.primaryColor;
-                }
-                if (isGlobal) {
-                    this._globalButtonContainers.set(appName, buttonContainer);
-                }
-                else {
-                    this._threadButtonContainers.set(appName, buttonContainer);
-                }
-                const activate = (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);
-                            }
-                        }
-                    }
-                }
-            }
-        });
-    }
-    _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));
-        }
-    }
-    _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.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) {
-                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.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(idMap('companion_container_app_sidebar_in_use'));
-        }
-        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);
-        }
-        // 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) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                this._renderThreadSidebar().then((threadSidebarComponent) => {
-                    const descriptor = this._instanceIdsToDescriptors.get(e.detail.instanceId);
-                    if (!descriptor)
-                        return;
-                    const buttonContainer = this._threadButtonContainers.get(descriptor.appName);
-                    if (!buttonContainer) {
-                        throw new Error('missing button container');
-                    }
-                    const activeButtonContainer = this._getActiveButtonContainer();
-                    if (activeButtonContainer !== buttonContainer) {
-                        querySelector(buttonContainer, 'button').click();
-                    }
-                });
-            });
-        }
-        // global sidebar content panels
-        {
-            Kefir.fromEvents(document.body, '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();
-            }
-        });
-    }
-}
-export default GmailAppSidebarPrimary;