@finsemble/finsemble-ui 7.3.0 → 8.0.0-beta.1

package/react/components/windowTitleBar/WindowTitleBarShell.js

@@ -1,878 +1,907 @@
-/*!
- * Copyright 2017 by ChartIQ, Inc.
- * All rights reserved.
- */
-import * as React from "react";
-import { WindowTitleBarContext } from "./windowTitleBarContext";
-import { storeManager, Actions, getStore } from "./stores/windowTitleBarStore";
-import "../../assets/css/windowTitleBar.css";
-import { clone } from "../sdd/Appearance.helpers";
-import { Logger } from "@finsemble/finsemble-api";
-// Values for possible zero
-const possibleZeros = ["0", "0px", 0];
-export class WindowTitleBarShell extends React.Component {
-    constructor(props) {
-        super(props);
-        // Keep track of if the mouse button is pressed
-        this.isMousePressed = false;
-        this.store = undefined;
-        this.bindCorrectContext();
-        this.state = {
-            activeTab: FSBL.Clients.WindowClient.getWindowIdentifier(),
-            allowDragOnCenterRegion: true,
-            alwaysOnTop: false,
-            alwaysOnTopButton: false,
-            closeButton: false,
-            dockingEnabled: false,
-            dockingIcon: "",
-            hackScrollbar: false,
-            initialized: false,
-            isTopRight: false,
-            maxButton: false,
-            minButton: false,
-            showDockingTooltip: false,
-            showLinkerButton: false,
-            showShareButton: false,
-            showTabs: false,
-            showTabRegion: false,
-            tabs: [],
-            tabBarBoundingBox: {},
-            windowTitle: "",
-            useDOMBasedMovement: true,
-            dragHandleName: "fsbl-drag-handle",
-            bumpElements: {},
-            adjustContentHeights: true,
-        };
-        finsembleWindow.isAlwaysOnTop({}, (err, alwaysOnTop) => {
-            this.setState(Object.assign(Object.assign({}, this.state), { alwaysOnTop }));
-        });
-        finsembleWindow.addEventListener("alwaysOnTop", this.alwaysOnTopListener);
-    }
-    alwaysOnTopListener({ data: { alwaysOnTop } }) {
-        this.setState(Object.assign(Object.assign({}, this.state), { alwaysOnTop }));
-    }
-    /**
-     * This is necessary to make sure that the `this` inside of the callback is correct.
-     *
-     * @memberof WindowTitleBar
-     */
-    bindCorrectContext() {
-        this.onTitleChange = this.onTitleChange.bind(this);
-        this.onShowDockingToolTip = this.onShowDockingToolTip.bind(this);
-        this.onToggleDockingIcon = this.onToggleDockingIcon.bind(this);
-        this.onDockingEnabledChanged = this.onDockingEnabledChanged.bind(this);
-        this.onAlwaysOnTopChanged = this.onAlwaysOnTopChanged.bind(this);
-        this.showLinkerButton = this.showLinkerButton.bind(this);
-        this.isTopRight = this.isTopRight.bind(this);
-        this.allowDragOnCenterRegion = this.allowDragOnCenterRegion.bind(this);
-        this.disallowDragOnCenterRegion = this.disallowDragOnCenterRegion.bind(this);
-        this.setDOMBasedMovement = this.setDOMBasedMovement.bind(this);
-        this.onShareEmitterChanged = this.onShareEmitterChanged.bind(this);
-        this.onTabsChanged = this.onTabsChanged.bind(this);
-        this.onShowTabsChanged = this.onShowTabsChanged.bind(this);
-        this.onTilingStop = this.onTilingStop.bind(this);
-        this.onTilingStart = this.onTilingStart.bind(this);
-        this.resizeDragHandle = this.resizeDragHandle.bind(this);
-        this.onDoubleClick = this.onDoubleClick.bind(this);
-        this.alwaysOnTopListener = this.alwaysOnTopListener.bind(this);
-        this.onInitialized = this.onInitialized.bind(this);
-    }
-    onInitialized() {
-        this.store = getStore();
-        this.store.addListeners([
-            { field: "Main.windowTitle", listener: this.onTitleChange },
-            { field: "Main.showDockingTooltip", listener: this.onShowDockingToolTip },
-            { field: "Main.dockingIcon", listener: this.onToggleDockingIcon },
-            { field: "Main.dockingEnabled", listener: this.onDockingEnabledChanged },
-            { field: "AlwaysOnTop.show", listener: this.onAlwaysOnTopChanged },
-            { field: "Linker.showLinkerButton", listener: this.showLinkerButton },
-            { field: "Sharer.emitterEnabled", listener: this.onShareEmitterChanged },
-            { field: "isTopRight", listener: this.isTopRight },
-            { field: "tabs", listener: this.onTabsChanged },
-            { field: "showTabs", listener: this.onShowTabsChanged },
-            { field: "hackScrollbar", listener: this.onShowTabsChanged },
-            { field: "Main.useDOMBasedMovement", listener: this.setDOMBasedMovement },
-        ], () => { });
-        // Add listeners for tiling/tabbing
-        FSBL.Clients.RouterClient.addListener("DockingService.startTilingOrTabbing", this.onTilingStart);
-        FSBL.Clients.RouterClient.addListener("DockingService.stopTilingOrTabbing", this.onTilingStop);
-        FSBL.Clients.RouterClient.addListener("DockingService.cancelTilingOrTabbing", this.onTilingStop);
-        FSBL.Clients.RouterClient.addListener("DockingService.startTilingOrTabbing", this.disallowDragOnCenterRegion);
-        FSBL.Clients.RouterClient.addListener("DockingService.stopTilingOrTabbing", this.allowDragOnCenterRegion);
-        FSBL.Clients.RouterClient.addListener("DockingService.cancelTilingOrTabbing", this.allowDragOnCenterRegion);
-        this.onStoreChange();
-        this.setState({
-            initialized: true,
-        });
-    }
-    onStoreChange() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        let activeIdentifier = finsembleWindow.identifier;
-        activeIdentifier.title = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getValue({
-            field: "Main.windowTitle",
-        });
-        this.setState({
-            windowTitle: (_b = this.store) === null || _b === void 0 ? void 0 : _b.getValue({ field: "Main.windowTitle" }),
-            minButton: !((_c = this.store) === null || _c === void 0 ? void 0 : _c.getValue({ field: "Minimize.hide" })),
-            maxButton: !((_d = this.store) === null || _d === void 0 ? void 0 : _d.getValue({ field: "Maximize.hide" })),
-            closeButton: !((_e = this.store) === null || _e === void 0 ? void 0 : _e.getValue({ field: "Close.hide" })),
-            showLinkerButton: (_f = this.store) === null || _f === void 0 ? void 0 : _f.getValue({
-                field: "Linker.showLinkerButton",
-            }),
-            showShareButton: (_g = this.store) === null || _g === void 0 ? void 0 : _g.getValue({
-                field: "Sharer.emitterEnabled",
-            }),
-            isTopRight: (_h = this.store) === null || _h === void 0 ? void 0 : _h.getValue({ field: "isTopRight" }),
-            alwaysOnTopButton: (_j = this.store) === null || _j === void 0 ? void 0 : _j.getValue({
-                field: "AlwaysOnTop.show",
-            }),
-            showTabs: (_k = this.store) === null || _k === void 0 ? void 0 : _k.getValue({ field: "showTabs" }),
-            hackScrollbar: (_l = this.store) === null || _l === void 0 ? void 0 : _l.getValue({ field: "hackScrollbar" }),
-            bumpElements: (_m = this.store) === null || _m === void 0 ? void 0 : _m.getValue({ field: "bumpElements" }),
-            adjustContentHeights: (_o = this.store) === null || _o === void 0 ? void 0 : _o.getValue({ field: "adjustContentHeights" }),
-            tabs: [activeIdentifier], // array of tabs for this window
-        });
-    }
-    componentDidMount() {
-        // Goal: If a user gets focus into the title bar (if they Alt+Tab or Cmd+Tab into the window),
-        // we want to let get into the rest of the component using the keyboard alone. The UX for
-        // this task will be to seemingly TAB from the title bar into the window, if possible.
-        // Code: If the user presses the "Tab" key, move their focus to the browser view
-        window.addEventListener("keydown", (e) => {
-            if (e.key === "Tab") {
-                // This magic moves focus to a browserView, if one exists
-                finsembleWindow.focus();
-            }
-        });
-        let header = document.getElementsByClassName("fsbl-header")[0];
-        //Add a margin top to the body if there title bar is injected into the component.
-        if (header) {
-            document.body.style.margin = "0px";
-            document.body.style.marginTop = window.getComputedStyle(header, null).getPropertyValue("height");
-        }
-        this.resizeDragHandle();
-        this.hackScrollbar();
-        storeManager.addInitializedListener(this.onInitialized);
-        storeManager.initialize();
-    }
-    componentDidUpdate() {
-        this.resizeDragHandle();
-        // Sometimes handleMouseUp is not invoked; specifically this can happen if the mouse is not over the drag handle when the button is
-        // unpressed. This happens when the drag starts near the bottom of the drag handle and the mouse is moved UP. If the window is
-        // docked to a window ABOVE then it may snap a few pixels up, making the mouse no longer on top of the drag handle. At this point, the
-        // componentDidUpdate is executed and the onmouseup handler is not invoked. Setting this.isMousePressed handles that narrow case.
-        this.isMousePressed = false;
-        this.hackScrollbar();
-        this.maybeAdjustWindow();
-    }
-    componentWillUnmount() {
-        var _a;
-        storeManager.removeInitializedListener(this.onInitialized);
-        if (this.state.initialized) {
-            (_a = this.store) === null || _a === void 0 ? void 0 : _a.removeListeners([
-                { field: "Main.windowTitle", listener: this.onTitleChange },
-                {
-                    field: "Main.showDockingTooltip",
-                    listener: this.onShowDockingToolTip,
-                },
-                { field: "Main.dockingIcon", listener: this.onToggleDockingIcon },
-                {
-                    field: "Main.dockingEnabled",
-                    listener: this.onDockingEnabledChanged,
-                },
-                { field: "AlwaysOnTop.show", listener: this.onAlwaysOnTopChanged },
-                { field: "Linker.showLinkerButton", listener: this.showLinkerButton },
-                {
-                    field: "Sharer.emitterEnabled",
-                    listener: this.onShareEmitterChanged,
-                },
-                { field: "isTopRight", listener: this.isTopRight },
-                { field: "tabs", listener: this.onTabsChanged },
-                { field: "showTabs", listener: this.onShowTabsChanged },
-            ], () => { }, () => { });
-            // Cleanup all listeners
-            FSBL.Clients.RouterClient.removeListener("DockingService.startTilingOrTabbing", this.disallowDragOnCenterRegion);
-            FSBL.Clients.RouterClient.removeListener("DockingService.stopTilingOrTabbing", this.allowDragOnCenterRegion);
-            FSBL.Clients.RouterClient.removeListener("DockingService.cancelTilingOrTabbing", this.allowDragOnCenterRegion);
-            FSBL.Clients.RouterClient.removeListener("DockingService.startTilingOrTabbing", this.onTilingStart);
-            FSBL.Clients.RouterClient.removeListener("DockingService.stopTilingOrTabbing", this.onTilingStop);
-            FSBL.Clients.RouterClient.removeListener("DockingService.cancelTilingOrTabbing", this.onTilingStop);
-        }
-    }
-    setDOMBasedMovement(err, response) {
-        if (response && response.hasOwnProperty("value")) {
-            this.setState({
-                useDOMBasedMovement: response.value,
-                dragHandleName: response.value ? "fsbl-drag-handle" : "fsbl-drag-handle-native-movement",
-            }, this.resizeDragHandle);
-        }
-    }
-    /**
-     * When we are not tiling/tabbing, we want to allow the user to drag the window around via any available space in the tab-region. This function allows that.
-     */
-    allowDragOnCenterRegion() {
-        this.setState({
-            allowDragOnCenterRegion: true,
-        });
-    }
-    /**
-     * When we are tiling/tabbing, we do not want to allow any window to be dragged around and moved.
-     */
-    disallowDragOnCenterRegion() {
-        this.setState({
-            allowDragOnCenterRegion: false,
-        });
-    }
-    /**
-     * When tiling start, we want to find the dragHandler and hide it
-     */
-    onTilingStart() {
-        var _a;
-        (_a = document.querySelector(`.${this.state.dragHandleName}`)) === null || _a === void 0 ? void 0 : _a.classList.add("hidden");
-    }
-    /**
-     * When tiling stops, we want to find the dragHandler and re-show it
-     */
-    onTilingStop() {
-        var _a;
-        (_a = document.querySelector(`.${this.state.dragHandleName}.hidden`)) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
-    }
-    /**
-     * Called whenever a tab is dropped on a non tab area.
-     * It won't be called when dropped on a tab that handles handle the event.
-     */
-    onDropHandler() {
-        FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {});
-    }
-    /**
-     * Called when user double clicks on drag handle
-     */
-    onDoubleClick() {
-        // Actions.clickMaximize checks the window state
-        // and toggles between maximize and minimize.
-        Actions.clickMaximize();
-    }
-    _setOnMouseUpAndDownHandlers(element) {
-        // Sometimes the mouse cursor can leave the drag handle when the window is moved quickly
-        // In this case, the drag will succeed but handleMouseUp() is not invoked; as a consequence,
-        // this.isMousePressed is not reset and FSBL.Clients.WindowClient.stopMovingWindow() is not called.
-        //
-        // To work around this, a new variable is introduced in order to keep track of if the mouse cursor
-        // has left the drag handle. If handleMouseDown is invoked AND mouseHasLeft has been set to true, then
-        // any click (handleMouseDown) will reset mouseHasLeft and this.isMousePressed (the drag state)
-        let mouseHasLeft = false;
-        /**
-         * Keeps track of when the mouse cursor leaves the drag handle.
-         */
-        const handleMouseLeave = () => {
-            mouseHasLeft = true;
-        };
-        // if do double click it will invoke MouseDown and MouseUp events which could break the window bounds. So wait a 100ms for moving or resizing the window.
-        const handleMouseDown = (event) => {
-            // If the mouse has left the drag handle then reset drag state on click
-            if (mouseHasLeft) {
-                mouseHasLeft = false;
-                this.isMousePressed = false;
-                FSBL.Clients.WindowClient.stopMovingWindow();
-            }
-            // prevent a second call if the button hasn't been unpressed
-            if (this.isMousePressed) {
-                return;
-            }
-            // Indicate that the mouse has been pressed
-            this.isMousePressed = true;
-            setTimeout(() => {
-                if (this.isMousePressed) {
-                    FSBL.Clients.WindowClient.startMovingWindow(event);
-                }
-            }, 100);
-        };
-        const handleMouseUp = () => {
-            // prevent a call if the button hasn't been pressed
-            if (!this.isMousePressed) {
-                return;
-            }
-            this.isMousePressed = false;
-            FSBL.Clients.WindowClient.stopMovingWindow();
-        };
-        element.onmouseleave = handleMouseLeave;
-        element.onmousedown = handleMouseDown;
-        element.onmouseup = handleMouseUp;
-    }
-    makeDragHandle(fsblHeader, dragHandleCssClass) {
-        let dragHandle = document.createElement("div");
-        dragHandle.className = dragHandleCssClass;
-        this._setOnMouseUpAndDownHandlers(dragHandle);
-        dragHandle.ondblclick = () => {
-            this.onDoubleClick();
-        };
-        fsblHeader.insertBefore(dragHandle, fsblHeader.firstChild);
-        window.addEventListener("resize", () => {
-            this.resizeDragHandle();
-        });
-        return dragHandle;
-    }
-    dragHandleBoundsForShowTabs(startingBounds) {
-        var _a;
-        if (this.state.tabs.length > 1) {
-            // The drag handle is the space between the right-most tab and the left-most window button (minimize, maximize, close, etc)
-            //
-            // The bounds will largely be the same as ".fsbl-header-right"
-            const headerRight = document.querySelector(".fsbl-header-right");
-            if (headerRight) {
-                // The padding (in pixels) for the left and right of the drag handle
-                const padding = 2;
-                // Get the RIGHT-MOST x-coordinate for the drag handle
-                //
-                // The "x" coordinate of the LEFT-MOST element in the "fsbl-header-right" container; but
-                // if there are no elements in the container then use the "innerWidth" of the window because that
-                // value is the furthest RIGHT x-coordinate available to use
-                const leftMostRightHeaderElement = document.querySelector(".fsbl-tabs-multiple .fsbl-header-right div:first-child");
-                const rightXCoord = leftMostRightHeaderElement
-                    ? leftMostRightHeaderElement.getBoundingClientRect().x
-                    : window.innerWidth;
-                // Get the LEFT-MOST x-coordinate for the drag handle
-                //
-                // Get the "x" coordinate for the RIGHT-MOST tab; the "right" attribute will be the
-                // LEFT x-coordinate for the drag handle
-                const rightTab = document.querySelector(".tab-region-wrapper .fsbl-tab:last-child");
-                // The "left" bounds is to the RIGHT of the RIGHT-MOST tab, plus padding
-                const leftXCoord = Math.trunc((rightTab === null || rightTab === void 0 ? void 0 : rightTab.getBoundingClientRect().right) || 0) + padding;
-                // The "width" bounds attribute is the difference between leftXCoord and rightXCoord, minus padding
-                const width = rightXCoord - leftXCoord - padding;
-                // Override bounds.width and bounds.left with the calculated values
-                return Object.assign(Object.assign({}, clone(headerRight.getBoundingClientRect())), { width: width, left: leftXCoord });
-            }
-            else {
-                return startingBounds;
-            }
-        }
-        else {
-            // If tabs are not enabled, then the remained of fsbl-header-center beyond the tabs
-            // is the draggable area. This assumes left aligned tabs.
-            const fsblHeaderCenter = document.querySelector(".fsbl-header-center");
-            const bounds = (_a = fsblHeaderCenter === null || fsblHeaderCenter === void 0 ? void 0 : fsblHeaderCenter.getBoundingClientRect()) !== null && _a !== void 0 ? _a : startingBounds;
-            const tabRegionWrapperDiv = fsblHeaderCenter === null || fsblHeaderCenter === void 0 ? void 0 : fsblHeaderCenter.querySelector(".tab-region-wrapper div.fsbl-header-title");
-            if (tabRegionWrapperDiv) {
-                const theTabBounds = tabRegionWrapperDiv.getBoundingClientRect();
-                // Calculate the right portion
-                return Object.assign(Object.assign({}, clone(bounds)), { left: bounds.left + theTabBounds.width, width: bounds.width - theTabBounds.width });
-            }
-            else {
-                return bounds;
-            }
-        }
-    }
-    /**
-     * The dragger is an absolutely positioned element that is superimposed on the actual area that we'd like to drag.
-     * This is necessary due to a bug in Chromium. Effectively, we need the dragger to change its left position and width
-     * to match the intended drag area. These dimensions can change whenever the header is re-rendered (for instance when
-     * changing mode from tabbing to non-tabbing). Dimensions can also change when the window itself is resized (due to natural
-     * css).
-     *
-     * Can remove all of the cq-drag and cq-no-drag because Chromium bug is fixed
-     * Remove fsbl-drag-region, it is no longer needed
-     * Hide the dragHandle during drop operations, so that it doesn't interfere
-     */
-    resizeDragHandle() {
-        var _a, _b;
-        // Sometimes this function is called during a drag (determined by this.isMousePressed); in this case,
-        // the function should abort.
-        //
-        // This happens if the cursor starts dragging near the left end of the drag handle. When the mouse is moved left, the cursor
-        // moves left (over the right-most) tab for a few moments, triggering an invocation of this function. This is incorrect
-        // behavior and should be avoided
-        if (this.isMousePressed) {
-            return;
-        }
-        // This function is invoked when a window is grouped or ungrouped (or docked); in all these cases, reset the mouse pressed state
-        //
-        // Reset the mouse pressed state
-        this.isMousePressed = false;
-        try {
-            const fsblHeader = document.querySelector(".fsbl-header");
-            // If there isn't an FSBLHeader then there doesn't need to be a drag handle.
-            if (!fsblHeader)
-                return;
-            const dragHandleCssClass = this.state.useDOMBasedMovement
-                ? "fsbl-drag-handle"
-                : "fsbl-drag-handle-native-movement";
-            const dragHandleToRemoveClass = this.state.useDOMBasedMovement
-                ? "fsbl-drag-handle-native-movement"
-                : "fsbl-drag-handle";
-            // Create the dragger if it doesn't already exist
-            let dragHandle = (_a = document.querySelector(`.${dragHandleCssClass}`)) !== null && _a !== void 0 ? _a : this.makeDragHandle(fsblHeader, dragHandleCssClass);
-            // When the titlebar starts up, useDOMBasedMovement will have a default value that is not the same as the config value
-            // When the value from the config propagates down to the UI, we need to make sure the old drag handle is removed in place of the new
-            const dragHandleToRemove = document.querySelector(`.${dragHandleToRemoveClass}`);
-            if (dragHandleToRemove)
-                (_b = dragHandleToRemove.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(dragHandleToRemove);
-            // Set the height of the dragHandle to match the height of the window title bar
-            // Do this every time through the render loop just in case a customer builds a
-            // header bar with dynamic height!
-            let bounds = fsblHeader.getBoundingClientRect();
-            dragHandle.style.height = `${bounds.height - 5}px`; // Subtract 5 pixels from height in order to make room for resize window cursor at top edge of window
-            dragHandle.style.marginTop = `${-bounds.height + 5}px`; // Negative margin pulls the drag handle up over the fixed header
-            // Start logic for determining where to place our dragHandle
-            if (this.state.showTabs) {
-                bounds = this.dragHandleBoundsForShowTabs(bounds);
-            }
-            else {
-                // If tabs are not enabled, then the entire center is the drag area
-                let fsblHeaderCenter = document.querySelector(".fsbl-header-center");
-                if (fsblHeaderCenter)
-                    bounds = fsblHeaderCenter.getBoundingClientRect();
-            }
-            if (bounds) {
-                dragHandle.style.left = `${bounds.left}px`;
-                dragHandle.style.width = `${bounds.width}px`;
-            }
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-    /**
-     * Whether the component's config allows for the linker.
-     * @param {} err
-     * @param {*} response
-     */
-    showLinkerButton(err, response) {
-        this.setState({ showLinkerButton: response.value });
-    }
-    /**
-     * Whether the window is the top-right-most window in a group of windows. If so, it renders a minimize icon for the whole group.
-     * @param {} err
-     * @param {*} response
-     */
-    isTopRight(err, response) {
-        this.setState({ isTopRight: response.value });
-    }
-    /**
-     * @param {*} err
-     * @param {*} response
-     */
-    onTitleChange(err, response) {
-        let { tabs } = this.state;
-        let myIdentifier = FSBL.Clients.WindowClient.getWindowIdentifier();
-        tabs = tabs.map((el) => {
-            if (!el.windowName && el.name)
-                el.windowName = el.name;
-            if (!el.name && el.windowName)
-                el.name = el.windowName;
-            return el;
-        });
-        const myIndex = tabs.findIndex((el) => el.name === myIdentifier.windowName);
-        if (myIndex === -1)
-            return;
-        let myTab = tabs[myIndex] || {};
-        myTab.title = response.value;
-        tabs.splice(myIndex, 1, myTab);
-        this.setState({
-            windowTitle: response.value,
-            tabs: tabs,
-        });
-    }
-    /**
-     * The next few methods are store change handlers that sync local state with the store's state.
-     */
-    onShowDockingToolTip(err, response) {
-        this.setState({ showDockingTooltip: response.value });
-    }
-    onToggleDockingIcon(err, response) {
-        this.setState({ dockingIcon: response.value });
-    }
-    onDockingEnabledChanged(err, response) {
-        this.setState({ dockingEnabled: response.value });
-    }
-    onAlwaysOnTopChanged(err, response) {
-        this.setState({ alwaysOnTopButton: response.value });
-    }
-    onStoreChanged(newState) {
-        this.setState(newState);
-    }
-    onShareEmitterChanged(err, response) {
-        this.setState({ showShareButton: response.value });
-    }
-    onTabsChanged(err, response) {
-        this.setState({
-            tabs: response.value,
-        });
-    }
-    onShowTabsChanged(err, response) {
-        // If we are not showing tabs, then it means that it is a non tabbed window
-        // therefore we need to check whether we have a window title contained in
-        // .div.fsbl-tab-editor so that we can edit it.
-        if (!response.value) {
-            let tabEditor = document.querySelector("div.fsbl-tab-editor");
-            if (tabEditor) {
-                // we set this z-index value to be slightly higher than the drag handle
-                // to make the editor dragable AND double-clickcable
-                tabEditor.style.zIndex = "2147483647";
-                // We add the mousedown and mouseup functions to the tab editor
-                // so that on a single mouse down it allows the user to drag the
-                // window on both the .fsbl-drag-handle and the .fsbl-tab-editor
-                this._setOnMouseUpAndDownHandlers(tabEditor);
-            }
-        }
-        this.setState({
-            showTabs: response.value,
-        });
-    }
-    // Hack the window's scrollbar so that it displays underneath the header. html.overflow: hidden body.overflow:auto
-    // This is turned on by default. Set "Window Manager.hackScrollbar: false" to turn it off
-    hackScrollbar() {
-        if (this.state.hackScrollbar) {
-            const htmlElement = document.querySelector("html");
-            if (htmlElement)
-                htmlElement.style.overflowY = "hidden";
-            const bodyElement = document.querySelector("body");
-            if (bodyElement)
-                bodyElement.style.overflowY = "auto";
-        }
-    }
-    /**
-     * Once document is ready and header is injected into DOM, begin adjusting the height of elements and bump fixed/absolute elements
-     */
-    async maybeAdjustWindow() {
-        // don't start pushing stuff down until page is ready. This is needed for preloaded titlebars because they can happen before the page is ready.
-        if (document.readyState === "complete") {
-            this.beginAdjustment();
-        }
-        else {
-            document.addEventListener("readystatechange", () => {
-                if (document.readyState === "complete")
-                    this.beginAdjustment();
-            });
-        }
-    }
-    /**
-     * Begin adjusting the body and top level elements and their direct descendants by the header height.
-     */
-    beginAdjustment() {
-        const header = document.getElementsByClassName("fsbl-header")[0];
-        if (header) {
-            const bodyElement = document.querySelector("body");
-            const headerHeight = window.getComputedStyle(header, null).getPropertyValue("height");
-            if (bodyElement) {
-                bodyElement.style.height = `calc(100vh - ${headerHeight})`;
-            }
-            if (this.state.adjustContentHeights)
-                this.adjustTopLevelHeight(Number.parseInt(headerHeight, 10));
-            this.bumpElements(this.state.bumpElements);
-            if (this.state.bumpElements.monitorFixedAdditions)
-                this.monitorFixedPositionedElements(headerHeight);
-        }
-        else {
-            Logger.system.error("WindowTitleBarShell.maybeAdjustWindow:could not find the header.");
-        }
-    }
-    /**
-     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.adjustContentHeights`
-     * Called from beginAdjustment()
-     *
-     * Adjusts the top level content maxHeight to be 100vh subtracted by the total height of the previous elements.
-     * The height of the previous elements are added to this calculation if they are not fixed or absolute.
-     * These top level elements will be passed into adjustContentHeight where their descendants
-     * will also have their heights adjusted.
-     * Example:
-     * In this below situation, the B element extends passed the view because the header is injected. B doesn't have a
-     * set height so it'll extend as far as it needs.
-     * --------------------
-     * |******************|
-     * |*     Titlebar   *|
-     * |******************|
-     * |******************|
-     * |*       A        *|
-     * |*                *|
-     * |******************|
-     * |******************|
-     * |*                *|
-     * |*                *|
-     * |*       B        *|
-     * |*                *|
-     * |*                *|
-     * |*                *|
-     * --------------------
-     * The chain of adjust functions will set the maxHeight of A and B to ensure they both occupy space that the above element doesn't
-     * and keep it within the bounds of the view.
-     * --------------------
-     * |******************|
-     * |*     Titlebar   *|
-     * |******************|
-     * |******************|
-     * |*       A        *|
-     * |*                *|
-     * |******************|
-     * |******************|
-     * |*                *|
-     * |*                *|
-     * |*       B        *|
-     * |*                *|
-     * |*                *|
-     * |******************|
-     * --------------------
-     * @param {number} headerHeight the height of the header
-     */
-    adjustTopLevelHeight(headerHeight) {
-        const elems = document.body.querySelectorAll(":scope > *:not(#FSBLHeader, .fsbl-header)");
-        let prev = headerHeight;
-        elems.forEach((elem) => {
-            this.adjust(elem, prev);
-            // Heights of fixed and absolute positioned elements are not added to the total heights of previous elements
-            // since they are removed from the document flow and can be positioned anywhere in the page.
-            if (elem.style.position !== "fixed" && elem.style.position !== "absolute")
-                prev = prev + elem.offsetHeight;
-            this.adjustContentHeight(elem);
-        });
-    }
-    /**
-     * Adjusts the content view height to be maximum of the parent container (passed in by adjustTopLevelHeight()) height
-     * subtracted by the total height of elements above it. The height of the previous elements are added to this calculation
-     * if they are not fixed or absolute.
-     * @param {object} parentElem parent element
-     */
-    adjustContentHeight(parentElem) {
-        const elem = parentElem;
-        const maxHeight = `100%`;
-        const { children } = elem;
-        const len = children.length;
-        let prev = 0;
-        for (let i = 0; i < len; i++) {
-            // Fixed and absolute positioned elements are ignored since they are removed from the document flow.
-            if (children[i].style.position !== "fixed" && children[i].style.position !== "absolute") {
-                this.adjust(children[i], prev, maxHeight);
-                prev = prev + children[i].offsetHeight;
-            }
-        }
-    }
-    /**
-     * This is used in adjustTopLevelHeight() and adjustContentHeight()
-     *
-     * Set the max height of each element to be the height of the parent container
-     * subtracted by the height of the previous element. This forces the element to either obey its
-     * predefined height or stay within the bounds of the max height.
-     *
-     * @param {object} elem HTML element
-     * @param {number} prev height of previous sibling
-     * @param {string} maxHeight maximum height of the element
-     */
-    adjust(elem, prev, maxHeight = "100vh") {
-        var _a, _b;
-        if (!((_a = elem.classList) === null || _a === void 0 ? void 0 : _a.contains("adjusted-element")) &&
-            // workaround to fix dnd scrim disappearing
-            !((_b = elem.classList) === null || _b === void 0 ? void 0 : _b.contains("fsbl-share-scrim"))) {
-            const clientHeight = elem.clientHeight ? elem.clientHeight : 0;
-            const offsetHeight = elem.offsetHeight ? elem.offsetHeight : 0;
-            const offset = offsetHeight - clientHeight;
-            const adjustPrev = prev + offset;
-            elem.style.maxHeight = `calc(${maxHeight} - ${adjustPrev}px)`;
-            elem.classList.add("adjusted-element");
-        }
-    }
-    /**
-     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.bumpElements.[bumpBy|fixed|absolute]`
-     * Called from beginAdjustment()
-     *
-     * Calls bumpFixedElements and bumpAbsoluteElements to bump fixed and/or absolute elements by the value of bumpBy if configured to do so.
-     * Since absolute and fixed positioned elements are removed from the document flow their positions will not be adjusted when the titlebar
-     * is injected and they have a set top style. However, if the element is an absolute positioned element and it's
-     * parent container has a position that is not set to static, then it'll adjust relative to the parent. Fixed positioned elements, on the otherhand,
-     * won't adjust unless their top stlyes are changed.
-     * @param {object} config bumpElements object
-     */
-    bumpElements(config) {
-        if ((config === null || config === void 0 ? void 0 : config.bumpBy) !== "0px") {
-            if (config.fixed)
-                this.bumpFixedElements(config);
-            if (config.absolute)
-                this.bumpAbsoluteElements(config);
-        }
-    }
-    /**
-     * Called from bumpElements
-     *
-     * Bumps all elements with fixed positioning, that are not in the header, down by the configured amount.
-     * @private
-     * @param {object} params bumpElements object
-     */
-    bumpFixedElements(params) {
-        var _a, _b;
-        let { fixed, bumpBy } = params;
-        const getFixedElements = (selector) => {
-            const fixedElems = [];
-            const nodes = document.body.querySelectorAll(selector);
-            nodes.forEach((node) => {
-                const style = window.getComputedStyle(node, null);
-                if (style.getPropertyValue("position") == "fixed")
-                    fixedElems.push(node);
-            });
-            return fixedElems;
-        };
-        const selector = "*:not(#FSBLHeader, .fsbl-header)";
-        // Get all fixed positioned elements
-        const elems = getFixedElements(selector);
-        const len = elems.length;
-        for (let i = 0; i < len; i++) {
-            const style = window.getComputedStyle(elems[i], null);
-            const topStyle = style.getPropertyValue("top");
-            if (!((_b = (_a = elems[i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains("bumped-element"))) {
-                elems[i].style.top = this.calculateBumpValue(fixed, topStyle, bumpBy);
-                elems[i].classList.add("bumped-element");
-            }
-        }
-    }
-    /**
-     * Called from bumpElements
-     *
-     * Bumps all absolute positioned elements with static parents, that are not in the header, down by the configured amount.
-     * @private
-     * @param {object} params bumpElements object
-     */
-    bumpAbsoluteElements(params) {
-        var _a, _b;
-        let { absolute, bumpBy } = params;
-        const selector = "*:not(#FSBLHeader, .fsbl-header)";
-        // Get top level absolute positioned elements and elements who have static parents
-        const elems = this.traverseHtml({ children: document.body.querySelectorAll(`:scope > ${selector}`) });
-        const len = elems.length;
-        for (let i = 0; i < len; i++) {
-            const style = window.getComputedStyle(elems[i], null);
-            const topStyle = style.getPropertyValue("top");
-            // Target absolute positioned elements
-            if (style.getPropertyValue("position") == "absolute" && !((_b = (_a = elems[i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains("bumped-element"))) {
-                elems[i].style.top = this.calculateBumpValue(absolute, topStyle, bumpBy);
-                elems[i].classList.add("bumped-element");
-            }
-        }
-    }
-    /**
-     * Used in bumpFixedElements and bumpAbsoluteElements
-     * Calculates value to bump element by. If 'all' return top style plus the header height, if '0Positioned' return just header height
-     * @param type Whether all elements are being bumped by the header height and their top style or just header height
-     * @param topStyle Element top value
-     * @param bumpBy Value to bump element by
-     * @returns Top style for element
-     */
-    calculateBumpValue(type, topStyle, bumpBy) {
-        let topVal = topStyle;
-        if (type == "all") {
-            topVal = `calc(${topStyle} + ${bumpBy})`;
-        }
-        else if (type == "0Positioned" && possibleZeros.includes(topStyle)) {
-            topVal = bumpBy;
-        }
-        return topVal;
-    }
-    /**
-     * Used in bumpAbsoluteElements
-     *
-     * Recursively traverse through the HTML document and return an array of the top level elements
-     * and elements with static parents
-     * @param {object} element The HTML element
-     * @param {array} acc accumulator
-     * @returns {array} array top level elements and elements with static parents
-     *
-     */
-    traverseHtml(element, acc = []) {
-        const elems = element.children;
-        const len = elems.length;
-        if (!len) {
-            acc.push(element);
-        }
-        else {
-            for (let i = 0; i < len; i++) {
-                const style = window.getComputedStyle(elems[i], null);
-                if (style.getPropertyValue("position") == "static") {
-                    acc = this.traverseHtml(elems[i], acc);
-                }
-                else {
-                    acc.push(elems[i]);
-                }
-            }
-        }
-        return acc;
-    }
-    /**
-     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.bumpElements.[monitorFixedAdditions]`
-     * Called from beginAdjustment()
-     *
-     * Monitors the DOM for mutations, if the added node has a fixed position with a top style of 0px, it will be bumped by the title bar height.
-     * This ensures that if a fixed positioned element is dynamically added to the DOM, for example a pop-up modal, it'll have it's height adjusted
-     * by the header height since the initial bumping of elements can happen before this element exists.
-     *
-     * Element heights are not monitored and adjusted since this would require that all pre-existing elements have ther height recalculated each time
-     * a new element is dynamically added onto the page. Absolute postioned elements, however, could be monitored and adjusted since all we would
-     * need to check for is that it's parent has a static position or not, if it does then it can be adjusted.
-     * @param headerHeight the height of the header
-     */
-    monitorFixedPositionedElements(headerHeight) {
-        const options = {
-            childList: true,
-            subtree: true,
-        };
-        /**
-         * MutationObserver interface provides the ability to watch for
-         * changes to the DOM tree using the observe method
-         */
-        const mutationObserver = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                mutation.addedNodes.forEach((node) => {
-                    var _a;
-                    if (!((_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains("bumped-element"))) {
-                        try {
-                            const nodeStyle = window.getComputedStyle(node);
-                            const topStyle = nodeStyle.top;
-                            // make sure node is fixed, has top style set to 0, and has not been bumped
-                            if (nodeStyle.position === "fixed" && possibleZeros.includes(topStyle)) {
-                                node.style.top = this.calculateBumpValue("0Positioned", topStyle, headerHeight);
-                                node.classList.add("bumped-element");
-                            }
-                        }
-                        catch (err) {
-                            // Expected to error if the node is not an Element e.g text is not of type Element
-                        }
-                    }
-                });
-            });
-        });
-        // We observe the body and do not disconnect because there may be other elements that are dynamically loaded, such as a dialogue menu.
-        mutationObserver.observe(document.body, options);
-    }
-    render() {
-        let showDockingIcon = !this.state.dockingEnabled ? false : this.state.dockingIcon;
-        let isGrouped = this.state.dockingIcon == "ejector";
-        let showMinimizeIcon = (isGrouped && this.state.isTopRight) || !isGrouped; // If not in a group or if topright in a group
-        let tabRegionClasses = "fsbl-tab-area";
-        let headerClasses = "fsbl-header";
-        // If we're showing tabs, we throw these classes on to modify styles.
-        if (this.state.showTabs) {
-            headerClasses = `${headerClasses} fsbl-tabs-enabled`;
-        }
-        if (this.state.tabs.length > 1) {
-            headerClasses = `${headerClasses} fsbl-tabs-multiple`;
-        }
-        const context = {
-            showLinkerButton: this.state.showLinkerButton,
-            showShareButton: this.state.showShareButton,
-            showTabRegion: this.state.showTabs,
-            showMinimizeButton: this.state.minButton && showMinimizeIcon,
-            showMaximizeButton: this.state.maxButton,
-            onTabDropped: this.allowDragOnCenterRegion,
-            showDockingButton: showDockingIcon,
-            showCloseButton: this.state.closeButton,
-            className: tabRegionClasses,
-            thisWindowTitle: this.state.windowTitle,
-            boundingBox: this.state.tabBarBoundingBox,
-            listenForDragOver: !this.state.allowDragOnCenterRegion,
-            tabs: this.state.tabs,
-            onTitleUpdated: this.resizeDragHandle,
-            showAlwaysOnTopButton: this.state.alwaysOnTopButton && showMinimizeIcon,
-            showTabs: this.state.showTabs,
-            alwaysOnTop: this.state.alwaysOnTop,
-            useDOMBasedMovement: this.state.useDOMBasedMovement,
-        };
-        return (React.createElement("div", { className: headerClasses, onDrop: this.onDropHandler.bind(this) }, this.state.initialized && (React.createElement(WindowTitleBarContext.Provider, { value: context }, this.props.children))));
-    }
-}
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import * as React from "react";
+import { WindowTitleBarContext } from "./windowTitleBarContext";
+import { storeManager, Actions, getStore } from "./stores/windowTitleBarStore";
+import styles from "../../assets/css/windowTitleBar.lazy.css";
+import { clone } from "../sdd/Appearance.helpers";
+import { FEAGlobals } from "../../../common/Globals";
+/**
+ * windowTitleBar is injected into pages via a preload. At the time that it is injected, there is no DOM on the page yet.
+ *
+ * Normally, webpack's style-loader will add all the imported styles as <STYLE> tags and add them to the document's <HEAD>.
+ * But this is done at _module load time_ which, when running in a preload, occurs before a <HEAD> tag exists, or even a <BODY>
+ * or <HTML> tag.
+ *
+ * So, instead we load the styles lazily. This requires using the `lazyStyleTag` or `lazySingletonStyleTag` rule in the actual
+ * style-loader, and then to call `styles.use()` when they are safe to load. We do this here, in the constructor for the shell,
+ * and we use a flag to make sure it only happens once (this should be converted to useEffect() if this is converted to a hook).
+ */
+let stylesHaveBeenInjected = false;
+// Values for possible zero
+const possibleZeros = ["0", "0px", 0];
+const maxHeight = "100%";
+export class WindowTitleBarShell extends React.Component {
+    constructor(props) {
+        super(props);
+        // Keep track of if the mouse button is pressed
+        this.isMousePressed = false;
+        this.store = undefined;
+        if (!stylesHaveBeenInjected) {
+            styles.use();
+            stylesHaveBeenInjected = true;
+        }
+        this.bindCorrectContext();
+        this.state = {
+            activeTab: FEAGlobals.FSBL.Clients.WindowClient.getWindowIdentifier(),
+            allowDragOnCenterRegion: true,
+            alwaysOnTop: false,
+            alwaysOnTopButton: false,
+            closeButton: false,
+            dockingEnabled: false,
+            dockingIcon: "",
+            hackScrollbar: false,
+            initialized: false,
+            isTopRight: false,
+            maxButton: false,
+            minButton: false,
+            showDockingTooltip: false,
+            showLinkerButton: false,
+            showShareButton: false,
+            showTabs: false,
+            showTabRegion: false,
+            tabs: [],
+            tabBarBoundingBox: {},
+            windowTitle: "",
+            useDOMBasedMovement: true,
+            dragHandleName: "fsbl-drag-handle",
+            bumpElements: {},
+            adjustContentHeights: true,
+        };
+        FEAGlobals.finsembleWindow.isAlwaysOnTop({}, (err, alwaysOnTop) => {
+            this.setState(Object.assign(Object.assign({}, this.state), { alwaysOnTop }));
+        });
+        FEAGlobals.finsembleWindow.addEventListener("alwaysOnTop", this.alwaysOnTopListener);
+    }
+    alwaysOnTopListener({ data: { alwaysOnTop } }) {
+        this.setState(Object.assign(Object.assign({}, this.state), { alwaysOnTop }));
+    }
+    /**
+     * This is necessary to make sure that the `this` inside of the callback is correct.
+     *
+     * @memberof WindowTitleBar
+     */
+    bindCorrectContext() {
+        this.onTitleChange = this.onTitleChange.bind(this);
+        this.onShowDockingToolTip = this.onShowDockingToolTip.bind(this);
+        this.onToggleDockingIcon = this.onToggleDockingIcon.bind(this);
+        this.onDockingEnabledChanged = this.onDockingEnabledChanged.bind(this);
+        this.onAlwaysOnTopChanged = this.onAlwaysOnTopChanged.bind(this);
+        this.showLinkerButton = this.showLinkerButton.bind(this);
+        this.isTopRight = this.isTopRight.bind(this);
+        this.allowDragOnCenterRegion = this.allowDragOnCenterRegion.bind(this);
+        this.disallowDragOnCenterRegion = this.disallowDragOnCenterRegion.bind(this);
+        this.setDOMBasedMovement = this.setDOMBasedMovement.bind(this);
+        this.onShareEmitterChanged = this.onShareEmitterChanged.bind(this);
+        this.onTabsChanged = this.onTabsChanged.bind(this);
+        this.onShowTabsChanged = this.onShowTabsChanged.bind(this);
+        this.onTilingStop = this.onTilingStop.bind(this);
+        this.onTilingStart = this.onTilingStart.bind(this);
+        this.resizeDragHandle = this.resizeDragHandle.bind(this);
+        this.onDoubleClick = this.onDoubleClick.bind(this);
+        this.alwaysOnTopListener = this.alwaysOnTopListener.bind(this);
+        this.onInitialized = this.onInitialized.bind(this);
+    }
+    onInitialized() {
+        this.store = getStore();
+        this.store.addListeners([
+            { field: "Main.windowTitle", listener: this.onTitleChange },
+            { field: "Main.showDockingTooltip", listener: this.onShowDockingToolTip },
+            { field: "Main.dockingIcon", listener: this.onToggleDockingIcon },
+            { field: "Main.dockingEnabled", listener: this.onDockingEnabledChanged },
+            { field: "AlwaysOnTop.show", listener: this.onAlwaysOnTopChanged },
+            { field: "Linker.showLinkerButton", listener: this.showLinkerButton },
+            { field: "Sharer.emitterEnabled", listener: this.onShareEmitterChanged },
+            { field: "isTopRight", listener: this.isTopRight },
+            { field: "tabs", listener: this.onTabsChanged },
+            { field: "showTabs", listener: this.onShowTabsChanged },
+            { field: "hackScrollbar", listener: this.onShowTabsChanged },
+            { field: "Main.useDOMBasedMovement", listener: this.setDOMBasedMovement },
+        ], () => { });
+        // Add listeners for tiling/tabbing
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.startTilingOrTabbing", this.onTilingStart);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.stopTilingOrTabbing", this.onTilingStop);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.cancelTilingOrTabbing", this.onTilingStop);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.startTilingOrTabbing", this.disallowDragOnCenterRegion);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.stopTilingOrTabbing", this.allowDragOnCenterRegion);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.cancelTilingOrTabbing", this.allowDragOnCenterRegion);
+        this.onStoreChange();
+        this.setState({
+            initialized: true,
+        });
+    }
+    onStoreChange() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        let activeIdentifier = FEAGlobals.finsembleWindow.identifier;
+        activeIdentifier.title = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getValue({
+            field: "Main.windowTitle",
+        });
+        this.setState({
+            windowTitle: (_b = this.store) === null || _b === void 0 ? void 0 : _b.getValue({ field: "Main.windowTitle" }),
+            minButton: !((_c = this.store) === null || _c === void 0 ? void 0 : _c.getValue({ field: "Minimize.hide" })),
+            maxButton: !((_d = this.store) === null || _d === void 0 ? void 0 : _d.getValue({ field: "Maximize.hide" })),
+            closeButton: !((_e = this.store) === null || _e === void 0 ? void 0 : _e.getValue({ field: "Close.hide" })),
+            showLinkerButton: (_f = this.store) === null || _f === void 0 ? void 0 : _f.getValue({
+                field: "Linker.showLinkerButton",
+            }),
+            showShareButton: (_g = this.store) === null || _g === void 0 ? void 0 : _g.getValue({
+                field: "Sharer.emitterEnabled",
+            }),
+            isTopRight: (_h = this.store) === null || _h === void 0 ? void 0 : _h.getValue({ field: "isTopRight" }),
+            alwaysOnTopButton: (_j = this.store) === null || _j === void 0 ? void 0 : _j.getValue({
+                field: "AlwaysOnTop.show",
+            }),
+            showTabs: (_k = this.store) === null || _k === void 0 ? void 0 : _k.getValue({ field: "showTabs" }),
+            hackScrollbar: (_l = this.store) === null || _l === void 0 ? void 0 : _l.getValue({ field: "hackScrollbar" }),
+            bumpElements: (_m = this.store) === null || _m === void 0 ? void 0 : _m.getValue({ field: "bumpElements" }),
+            adjustContentHeights: (_o = this.store) === null || _o === void 0 ? void 0 : _o.getValue({ field: "adjustContentHeights" }),
+            tabs: [activeIdentifier], // array of tabs for this window
+        });
+    }
+    componentDidMount() {
+        // Goal: If a user gets focus into the title bar (if they Alt+Tab or Cmd+Tab into the window),
+        // we want to let get into the rest of the component using the keyboard alone. The UX for
+        // this task will be to seemingly TAB from the title bar into the window, if possible.
+        // Code: If the user presses the "Tab" key, move their focus to the browser view
+        window.addEventListener("keydown", (e) => {
+            if (e.key === "Tab") {
+                // This magic moves focus to a browserView, if one exists
+                FEAGlobals.finsembleWindow.focus();
+            }
+        });
+        let header = document.getElementsByClassName("fsbl-header")[0];
+        //Add a margin top to the body if there title bar is injected into the component.
+        if (header) {
+            document.body.style.margin = "0px";
+            document.body.style.marginTop = window.getComputedStyle(header, null).getPropertyValue("height");
+        }
+        this.resizeDragHandle();
+        this.hackScrollbar();
+        storeManager.addInitializedListener(this.onInitialized);
+        storeManager.initialize();
+    }
+    componentDidUpdate() {
+        this.resizeDragHandle();
+        // Sometimes handleMouseUp is not invoked; specifically this can happen if the mouse is not over the drag handle when the button is
+        // unpressed. This happens when the drag starts near the bottom of the drag handle and the mouse is moved UP. If the window is
+        // docked to a window ABOVE then it may snap a few pixels up, making the mouse no longer on top of the drag handle. At this point, the
+        // componentDidUpdate is executed and the onmouseup handler is not invoked. Setting this.isMousePressed handles that narrow case.
+        this.isMousePressed = false;
+        this.hackScrollbar();
+        this.maybeAdjustWindow();
+        window.addEventListener("resize", () => this.maybeAdjustWindow());
+    }
+    componentWillUnmount() {
+        var _a;
+        storeManager.removeInitializedListener(this.onInitialized);
+        window.removeEventListener("resize", () => this.maybeAdjustWindow());
+        if (this.state.initialized) {
+            (_a = this.store) === null || _a === void 0 ? void 0 : _a.removeListeners([
+                { field: "Main.windowTitle", listener: this.onTitleChange },
+                {
+                    field: "Main.showDockingTooltip",
+                    listener: this.onShowDockingToolTip,
+                },
+                { field: "Main.dockingIcon", listener: this.onToggleDockingIcon },
+                {
+                    field: "Main.dockingEnabled",
+                    listener: this.onDockingEnabledChanged,
+                },
+                { field: "AlwaysOnTop.show", listener: this.onAlwaysOnTopChanged },
+                { field: "Linker.showLinkerButton", listener: this.showLinkerButton },
+                {
+                    field: "Sharer.emitterEnabled",
+                    listener: this.onShareEmitterChanged,
+                },
+                { field: "isTopRight", listener: this.isTopRight },
+                { field: "tabs", listener: this.onTabsChanged },
+                { field: "showTabs", listener: this.onShowTabsChanged },
+            ], () => { }, () => { });
+            // Cleanup all listeners
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.startTilingOrTabbing", this.disallowDragOnCenterRegion);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.stopTilingOrTabbing", this.allowDragOnCenterRegion);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.cancelTilingOrTabbing", this.allowDragOnCenterRegion);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.startTilingOrTabbing", this.onTilingStart);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.stopTilingOrTabbing", this.onTilingStop);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.cancelTilingOrTabbing", this.onTilingStop);
+        }
+    }
+    setDOMBasedMovement(err, response) {
+        if (response && response.hasOwnProperty("value")) {
+            this.setState({
+                useDOMBasedMovement: response.value,
+                dragHandleName: response.value ? "fsbl-drag-handle" : "fsbl-drag-handle-native-movement",
+            }, this.resizeDragHandle);
+        }
+    }
+    /**
+     * When we are not tiling/tabbing, we want to allow the user to drag the window around via any available space in the tab-region. This function allows that.
+     */
+    allowDragOnCenterRegion() {
+        this.setState({
+            allowDragOnCenterRegion: true,
+        });
+    }
+    /**
+     * When we are tiling/tabbing, we do not want to allow any window to be dragged around and moved.
+     */
+    disallowDragOnCenterRegion() {
+        this.setState({
+            allowDragOnCenterRegion: false,
+        });
+    }
+    /**
+     * When tiling start, we want to find the dragHandler and hide it
+     */
+    onTilingStart() {
+        var _a;
+        (_a = document.querySelector(`.${this.state.dragHandleName}`)) === null || _a === void 0 ? void 0 : _a.classList.add("hidden");
+    }
+    /**
+     * When tiling stops, we want to find the dragHandler and re-show it
+     */
+    onTilingStop() {
+        var _a;
+        (_a = document.querySelector(`.${this.state.dragHandleName}.hidden`)) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
+    }
+    /**
+     * Called whenever a tab is dropped on a non tab area.
+     * It won't be called when dropped on a tab that handles handle the event.
+     */
+    onDropHandler() {
+        FEAGlobals.FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {});
+    }
+    /**
+     * Called when user double clicks on drag handle
+     */
+    onDoubleClick() {
+        // Actions.clickMaximize checks the window state
+        // and toggles between maximize and minimize.
+        Actions.clickMaximize();
+    }
+    _setOnMouseUpAndDownHandlers(element) {
+        // Sometimes the mouse cursor can leave the drag handle when the window is moved quickly
+        // In this case, the drag will succeed but handleMouseUp() is not invoked; as a consequence,
+        // this.isMousePressed is not reset and FSBL.Clients.WindowClient.stopMovingWindow() is not called.
+        //
+        // To work around this, a new variable is introduced in order to keep track of if the mouse cursor
+        // has left the drag handle. If handleMouseDown is invoked AND mouseHasLeft has been set to true, then
+        // any click (handleMouseDown) will reset mouseHasLeft and this.isMousePressed (the drag state)
+        let mouseHasLeft = false;
+        /**
+         * Keeps track of when the mouse cursor leaves the drag handle.
+         */
+        const handleMouseLeave = () => {
+            mouseHasLeft = true;
+        };
+        // if do double click it will invoke MouseDown and MouseUp events which could break the window bounds. So wait a 100ms for moving or resizing the window.
+        const handleMouseDown = (event) => {
+            // If the mouse has left the drag handle then reset drag state on click
+            if (mouseHasLeft) {
+                mouseHasLeft = false;
+                this.isMousePressed = false;
+                FEAGlobals.FSBL.Clients.WindowClient.stopMovingWindow();
+            }
+            // prevent a second call if the button hasn't been unpressed
+            if (this.isMousePressed) {
+                return;
+            }
+            // Indicate that the mouse has been pressed
+            this.isMousePressed = true;
+            setTimeout(() => {
+                if (this.isMousePressed) {
+                    FEAGlobals.FSBL.Clients.WindowClient.startMovingWindow(event);
+                }
+            }, 100);
+        };
+        const handleMouseUp = () => {
+            // prevent a call if the button hasn't been pressed
+            if (!this.isMousePressed) {
+                return;
+            }
+            this.isMousePressed = false;
+            FEAGlobals.FSBL.Clients.WindowClient.stopMovingWindow();
+        };
+        element.onmouseleave = handleMouseLeave;
+        element.onmousedown = handleMouseDown;
+        element.onmouseup = handleMouseUp;
+    }
+    makeDragHandle(fsblHeader, dragHandleCssClass) {
+        let dragHandle = document.createElement("div");
+        dragHandle.className = dragHandleCssClass;
+        this._setOnMouseUpAndDownHandlers(dragHandle);
+        dragHandle.ondblclick = () => {
+            this.onDoubleClick();
+        };
+        fsblHeader.insertBefore(dragHandle, fsblHeader.firstChild);
+        window.addEventListener("resize", () => {
+            this.resizeDragHandle();
+        });
+        return dragHandle;
+    }
+    dragHandleBoundsForShowTabs(startingBounds) {
+        var _a;
+        if (this.state.tabs.length > 1) {
+            // The drag handle is the space between the right-most tab and the left-most window button (minimize, maximize, close, etc)
+            //
+            // The bounds will largely be the same as ".fsbl-header-right"
+            const headerRight = document.querySelector(".fsbl-header-right");
+            if (headerRight) {
+                // The padding (in pixels) for the left and right of the drag handle
+                const padding = 2;
+                // Get the RIGHT-MOST x-coordinate for the drag handle
+                //
+                // The "x" coordinate of the LEFT-MOST element in the "fsbl-header-right" container; but
+                // if there are no elements in the container then use the "innerWidth" of the window because that
+                // value is the furthest RIGHT x-coordinate available to use
+                const leftMostRightHeaderElement = document.querySelector(".fsbl-tabs-multiple .fsbl-header-right div:first-child");
+                const rightXCoord = leftMostRightHeaderElement
+                    ? leftMostRightHeaderElement.getBoundingClientRect().x
+                    : window.innerWidth;
+                // Get the LEFT-MOST x-coordinate for the drag handle
+                //
+                // Get the "x" coordinate for the RIGHT-MOST tab; the "right" attribute will be the
+                // LEFT x-coordinate for the drag handle
+                const rightTab = document.querySelector(".tab-region-wrapper .fsbl-tab:last-child");
+                // The "left" bounds is to the RIGHT of the RIGHT-MOST tab, plus padding
+                const leftXCoord = Math.trunc((rightTab === null || rightTab === void 0 ? void 0 : rightTab.getBoundingClientRect().right) || 0) + padding;
+                // The "width" bounds attribute is the difference between leftXCoord and rightXCoord, minus padding
+                const width = rightXCoord - leftXCoord - padding;
+                // Override bounds.width and bounds.left with the calculated values
+                return Object.assign(Object.assign({}, clone(headerRight.getBoundingClientRect())), { width: width, left: leftXCoord });
+            }
+            else {
+                return startingBounds;
+            }
+        }
+        else {
+            // If tabs are not enabled, then the remained of fsbl-header-center beyond the tabs
+            // is the draggable area. This assumes left aligned tabs.
+            const fsblHeaderCenter = document.querySelector(".fsbl-header-center");
+            const bounds = (_a = fsblHeaderCenter === null || fsblHeaderCenter === void 0 ? void 0 : fsblHeaderCenter.getBoundingClientRect()) !== null && _a !== void 0 ? _a : startingBounds;
+            const tabRegionWrapperDiv = fsblHeaderCenter === null || fsblHeaderCenter === void 0 ? void 0 : fsblHeaderCenter.querySelector(".tab-region-wrapper div.fsbl-header-title");
+            if (tabRegionWrapperDiv) {
+                const theTabBounds = tabRegionWrapperDiv.getBoundingClientRect();
+                // Calculate the right portion
+                return Object.assign(Object.assign({}, clone(bounds)), { left: bounds.left + theTabBounds.width, width: bounds.width - theTabBounds.width });
+            }
+            else {
+                return bounds;
+            }
+        }
+    }
+    /**
+     * The dragger is an absolutely positioned element that is superimposed on the actual area that we'd like to drag.
+     * This is necessary due to a bug in Chromium. Effectively, we need the dragger to change its left position and width
+     * to match the intended drag area. These dimensions can change whenever the header is re-rendered (for instance when
+     * changing mode from tabbing to non-tabbing). Dimensions can also change when the window itself is resized (due to natural
+     * css).
+     *
+     * Can remove all of the cq-drag and cq-no-drag because Chromium bug is fixed
+     * Remove fsbl-drag-region, it is no longer needed
+     * Hide the dragHandle during drop operations, so that it doesn't interfere
+     */
+    resizeDragHandle() {
+        var _a, _b;
+        // Sometimes this function is called during a drag (determined by this.isMousePressed); in this case,
+        // the function should abort.
+        //
+        // This happens if the cursor starts dragging near the left end of the drag handle. When the mouse is moved left, the cursor
+        // moves left (over the right-most) tab for a few moments, triggering an invocation of this function. This is incorrect
+        // behavior and should be avoided
+        if (this.isMousePressed) {
+            return;
+        }
+        // This function is invoked when a window is grouped or ungrouped (or docked); in all these cases, reset the mouse pressed state
+        //
+        // Reset the mouse pressed state
+        this.isMousePressed = false;
+        try {
+            const fsblHeader = document.querySelector(".fsbl-header");
+            // If there isn't an FSBLHeader then there doesn't need to be a drag handle.
+            if (!fsblHeader)
+                return;
+            const dragHandleCssClass = this.state.useDOMBasedMovement
+                ? "fsbl-drag-handle"
+                : "fsbl-drag-handle-native-movement";
+            const dragHandleToRemoveClass = this.state.useDOMBasedMovement
+                ? "fsbl-drag-handle-native-movement"
+                : "fsbl-drag-handle";
+            // Create the dragger if it doesn't already exist
+            let dragHandle = (_a = document.querySelector(`.${dragHandleCssClass}`)) !== null && _a !== void 0 ? _a : this.makeDragHandle(fsblHeader, dragHandleCssClass);
+            // When the titlebar starts up, useDOMBasedMovement will have a default value that is not the same as the config value
+            // When the value from the config propagates down to the UI, we need to make sure the old drag handle is removed in place of the new
+            const dragHandleToRemove = document.querySelector(`.${dragHandleToRemoveClass}`);
+            if (dragHandleToRemove)
+                (_b = dragHandleToRemove.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(dragHandleToRemove);
+            // Set the height of the dragHandle to match the height of the window title bar
+            // Do this every time through the render loop just in case a customer builds a
+            // header bar with dynamic height!
+            let bounds = fsblHeader.getBoundingClientRect();
+            dragHandle.style.height = `${bounds.height - 5}px`; // Subtract 5 pixels from height in order to make room for resize window cursor at top edge of window
+            dragHandle.style.marginTop = `${-bounds.height + 5}px`; // Negative margin pulls the drag handle up over the fixed header
+            // Start logic for determining where to place our dragHandle
+            if (this.state.showTabs) {
+                bounds = this.dragHandleBoundsForShowTabs(bounds);
+            }
+            else {
+                // If tabs are not enabled, then the entire center is the drag area
+                let fsblHeaderCenter = document.querySelector(".fsbl-header-center");
+                if (fsblHeaderCenter)
+                    bounds = fsblHeaderCenter.getBoundingClientRect();
+            }
+            if (bounds) {
+                dragHandle.style.left = `${bounds.left}px`;
+                dragHandle.style.width = `${bounds.width}px`;
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    /**
+     * Whether the component's config allows for the linker.
+     * @param {} err
+     * @param {*} response
+     */
+    showLinkerButton(err, response) {
+        this.setState({ showLinkerButton: response.value });
+    }
+    /**
+     * Whether the window is the top-right-most window in a group of windows. If so, it renders a minimize icon for the whole group.
+     * @param {} err
+     * @param {*} response
+     */
+    isTopRight(err, response) {
+        this.setState({ isTopRight: response.value });
+    }
+    /**
+     * @param {*} err
+     * @param {*} response
+     */
+    onTitleChange(err, response) {
+        let { tabs } = this.state;
+        let myIdentifier = FEAGlobals.FSBL.Clients.WindowClient.getWindowIdentifier();
+        tabs = tabs.map((el) => {
+            if (!el.windowName && el.name)
+                el.windowName = el.name;
+            if (!el.name && el.windowName)
+                el.name = el.windowName;
+            return el;
+        });
+        const myIndex = tabs.findIndex((el) => el.name === myIdentifier.windowName);
+        if (myIndex === -1)
+            return;
+        let myTab = tabs[myIndex] || {};
+        myTab.title = response.value;
+        tabs.splice(myIndex, 1, myTab);
+        this.setState({
+            windowTitle: response.value,
+            tabs: tabs,
+        });
+    }
+    /**
+     * The next few methods are store change handlers that sync local state with the store's state.
+     */
+    onShowDockingToolTip(err, response) {
+        this.setState({ showDockingTooltip: response.value });
+    }
+    onToggleDockingIcon(err, response) {
+        this.setState({ dockingIcon: response.value });
+    }
+    onDockingEnabledChanged(err, response) {
+        this.setState({ dockingEnabled: response.value });
+    }
+    onAlwaysOnTopChanged(err, response) {
+        this.setState({ alwaysOnTopButton: response.value });
+    }
+    onStoreChanged(newState) {
+        this.setState(newState);
+    }
+    onShareEmitterChanged(err, response) {
+        this.setState({ showShareButton: response.value });
+    }
+    onTabsChanged(err, response) {
+        this.setState({
+            tabs: response.value,
+        });
+    }
+    onShowTabsChanged(err, response) {
+        // If we are not showing tabs, then it means that it is a non tabbed window
+        // therefore we need to check whether we have a window title contained in
+        // .div.fsbl-tab-editor so that we can edit it.
+        if (!response.value) {
+            let tabEditor = document.querySelector("div.fsbl-tab-editor");
+            if (tabEditor) {
+                // we set this z-index value to be slightly higher than the drag handle
+                // to make the editor dragable AND double-clickcable
+                tabEditor.style.zIndex = "2147483647";
+                // We add the mousedown and mouseup functions to the tab editor
+                // so that on a single mouse down it allows the user to drag the
+                // window on both the .fsbl-drag-handle and the .fsbl-tab-editor
+                this._setOnMouseUpAndDownHandlers(tabEditor);
+            }
+        }
+        this.setState({
+            showTabs: response.value,
+        });
+    }
+    // Hack the window's scrollbar so that it displays underneath the header. html.overflow: hidden body.overflow:auto
+    // This is turned on by default. Set "Window Manager.hackScrollbar: false" to turn it off
+    hackScrollbar() {
+        if (this.state.hackScrollbar) {
+            const htmlElement = document.querySelector("html");
+            if (htmlElement)
+                htmlElement.style.overflowY = "hidden";
+            const bodyElement = document.querySelector("body");
+            if (bodyElement)
+                bodyElement.style.overflowY = "auto";
+        }
+    }
+    /**
+     * Once document is ready and header is injected into DOM, begin adjusting the height of elements and bump fixed/absolute elements
+     */
+    async maybeAdjustWindow() {
+        // don't start pushing stuff down until page is ready. This is needed for preloaded titlebars because they can happen before the page is ready.
+        if (document.readyState === "complete") {
+            this.beginAdjustment();
+        }
+        else {
+            document.addEventListener("readystatechange", () => {
+                if (document.readyState === "complete")
+                    this.beginAdjustment();
+            });
+        }
+    }
+    /**
+     * Begin adjusting the body and top level elements and their direct descendants by the header height.
+     */
+    beginAdjustment() {
+        const header = document.getElementsByClassName("fsbl-header")[0];
+        if (header) {
+            const bodyElement = document.querySelector("body");
+            const headerHeight = window.getComputedStyle(header, null).getPropertyValue("height");
+            if (bodyElement) {
+                bodyElement.style.height = `calc(100vh - ${headerHeight})`;
+            }
+            if (this.state.adjustContentHeights)
+                this.adjustTopLevelHeight(Number.parseInt(headerHeight, 10));
+            this.bumpElements(this.state.bumpElements);
+            if (this.state.bumpElements.monitorFixedAdditions)
+                this.monitorFixedPositionedElements(headerHeight);
+        }
+        else {
+            FEAGlobals.FSBL.Clients.Logger.system.error("WindowTitleBarShell.maybeAdjustWindow:could not find the header.");
+        }
+    }
+    /**
+     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.adjustContentHeights`
+     * Called from beginAdjustment()
+     *
+     * Adjusts the top level content max-height to be 100% subtracted by the total height of the previous elements.
+     * The height of the previous elements are added to this calculation if they are not fixed or absolute.
+     * These top level elements will be passed into adjustContentHeight where their descendants
+     * will also have their heights adjusted.
+     *
+     * Absolute and Fixed positions elements, however, will just have their max-heights set to 100% subtracted by the header height
+     * since they are not part of the document flow.
+     * Example:
+     * In this below situation, the B element extends passed the view because the header is injected. B doesn't have a
+     * set height so it'll extend as far as it needs.
+     * --------------------
+     * |******************|
+     * |*     Titlebar   *|
+     * |******************|
+     * |******************|
+     * |*       A        *|
+     * |*                *|
+     * |******************|
+     * |******************|
+     * |*                *|
+     * |*                *|
+     * |*       B        *|
+     * |*                *|
+     * |*                *|
+     * |*                *|
+     * --------------------
+     * The chain of adjust functions will set the maxHeight of A and B to ensure they both occupy space that the above element doesn't
+     * and keep it within the bounds of the view.
+     * --------------------
+     * |******************|
+     * |*     Titlebar   *|
+     * |******************|
+     * |******************|
+     * |*       A        *|
+     * |*                *|
+     * |******************|
+     * |******************|
+     * |*                *|
+     * |*                *|
+     * |*       B        *|
+     * |*                *|
+     * |*                *|
+     * |******************|
+     * --------------------
+     * @param {number} headerHeight the height of the header
+     */
+    adjustTopLevelHeight(headerHeight) {
+        const elems = document.body.querySelectorAll(":scope > *:not(#FSBLHeader, .fsbl-header)");
+        let prevHeight = 0;
+        // tags that we should avoid adding max-heights too
+        const avoidTags = ["svg", "script"];
+        elems.forEach((elem) => {
+            if (!avoidTags.includes(String(elem.tagName).toLowerCase())) {
+                this.adjust(elem, prevHeight, maxHeight, headerHeight);
+                // Heights of fixed and absolute positioned elements are not added to the total heights of previous elements
+                // since they are removed from the document flow and can be positioned anywhere in the page.
+                if (elem.style.position !== "fixed" && elem.style.position !== "absolute")
+                    prevHeight = prevHeight + elem.offsetHeight;
+                this.adjustContentHeight(elem, headerHeight);
+            }
+        });
+    }
+    /**
+     * Adjusts the content view height to be maximum of the parent container (passed in by adjustTopLevelHeight()) height
+     * subtracted by the total height of elements above it. The height of the previous elements are added to this calculation
+     * if they are not fixed or absolute.
+     * @param {object} parentElem parent element
+     * @param {number} headerHeight the height of the header
+     */
+    adjustContentHeight(parentElem, headerHeight) {
+        const { children } = parentElem;
+        const len = children.length;
+        let prevHeight = 0;
+        for (let i = 0; i < len; i++) {
+            this.adjust(children[i], prevHeight, maxHeight, headerHeight);
+            // Fixed and absolute positioned elements are ignored since they are removed from the document flow.
+            const elemPosition = window.getComputedStyle(children[i], null).getPropertyValue("position");
+            if (elemPosition !== "fixed" && elemPosition !== "absolute")
+                prevHeight = prevHeight + children[i].offsetHeight;
+        }
+    }
+    /**
+     * This is used in adjustTopLevelHeight() and adjustContentHeight()
+     *
+     * Set the max height of each element to be the height of the parent container
+     * subtracted by the height of the previous element. This forces the element to either obey its
+     * predefined height or stay within the bounds of the max height.
+     *
+     * @param {object} elem HTML element
+     * @param {number} prevHeight height of previous sibling
+     * @param {string} maxElemHeight maximum height of the element
+     * @param {number} headerHeight the height of the header
+     */
+    adjust(elem, prevHeight, maxElemHeight, headerHeight = 25) {
+        var _a;
+        if (
+        // workaround to fix dnd scrim disappearing
+        !((_a = elem.classList) === null || _a === void 0 ? void 0 : _a.contains("fsbl-share-scrim"))) {
+            const clientHeight = elem.clientHeight ? elem.clientHeight : 0;
+            const offsetHeight = elem.offsetHeight ? elem.offsetHeight : 0;
+            const offset = offsetHeight - clientHeight;
+            let adjustPrev = prevHeight + offset;
+            const elemPosition = window.getComputedStyle(elem, null).getPropertyValue("position");
+            if (elemPosition == "fixed" || elemPosition == "absolute")
+                adjustPrev = headerHeight + offset;
+            elem.style.maxHeight = `calc(${maxElemHeight} - ${adjustPrev}px)`;
+            elem.classList.add("adjusted-element");
+        }
+    }
+    /**
+     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.bumpElements.[bumpBy|fixed|absolute]`
+     * Called from beginAdjustment()
+     *
+     * Calls bumpFixedElements and bumpAbsoluteElements to bump fixed and/or absolute elements by the value of bumpBy if configured to do so.
+     * Since absolute and fixed positioned elements are removed from the document flow their positions will not be adjusted when the titlebar
+     * is injected and they have a set top style. However, if the element is an absolute positioned element and it's
+     * parent container has a position that is not set to static, then it'll adjust relative to the parent. Fixed positioned elements, on the otherhand,
+     * won't adjust unless their top stlyes are changed.
+     * @param {object} config bumpElements object
+     */
+    bumpElements(config) {
+        if ((config === null || config === void 0 ? void 0 : config.bumpBy) !== "0px") {
+            if (config.fixed)
+                this.bumpFixedElements(config);
+            if (config.absolute)
+                this.bumpAbsoluteElements(config);
+        }
+    }
+    /**
+     * Called from bumpElements
+     *
+     * Bumps all elements with fixed positioning, that are not in the header, down by the configured amount.
+     * @private
+     * @param {object} params bumpElements object
+     */
+    bumpFixedElements(params) {
+        var _a, _b;
+        let { fixed, bumpBy } = params;
+        const getFixedElements = (selector) => {
+            const fixedElems = [];
+            const nodes = document.body.querySelectorAll(selector);
+            nodes.forEach((node) => {
+                const style = window.getComputedStyle(node, null);
+                if (style.getPropertyValue("position") == "fixed")
+                    fixedElems.push(node);
+            });
+            return fixedElems;
+        };
+        const selector = "*:not(#FSBLHeader, .fsbl-header)";
+        // Get all fixed positioned elements
+        const elems = getFixedElements(selector);
+        const len = elems.length;
+        for (let i = 0; i < len; i++) {
+            const style = window.getComputedStyle(elems[i], null);
+            const topStyle = style.getPropertyValue("top");
+            if (!((_b = (_a = elems[i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains("bumped-element"))) {
+                elems[i].style.top = this.calculateBumpValue(fixed, topStyle, bumpBy);
+                elems[i].classList.add("bumped-element");
+            }
+        }
+    }
+    /**
+     * Called from bumpElements
+     *
+     * Bumps all absolute positioned elements with static parents, that are not in the header, down by the configured amount.
+     * @private
+     * @param {object} params bumpElements object
+     */
+    bumpAbsoluteElements(params) {
+        var _a, _b;
+        let { absolute, bumpBy } = params;
+        const selector = "*:not(#FSBLHeader, .fsbl-header)";
+        // Get top level absolute positioned elements and elements who have static parents
+        const elems = this.traverseHtml({ children: document.body.querySelectorAll(`:scope > ${selector}`) });
+        const len = elems.length;
+        for (let i = 0; i < len; i++) {
+            const style = window.getComputedStyle(elems[i], null);
+            const topStyle = style.getPropertyValue("top");
+            // Target absolute positioned elements
+            if (style.getPropertyValue("position") == "absolute" && !((_b = (_a = elems[i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains("bumped-element"))) {
+                elems[i].style.top = this.calculateBumpValue(absolute, topStyle, bumpBy);
+                elems[i].classList.add("bumped-element");
+            }
+        }
+    }
+    /**
+     * Used in bumpFixedElements and bumpAbsoluteElements
+     * Calculates value to bump element by. If 'all' return top style plus the header height, if '0Positioned' return just header height
+     * @param type Whether all elements are being bumped by the header height and their top style or just header height
+     * @param topStyle Element top value
+     * @param bumpBy Value to bump element by
+     * @returns Top style for element
+     */
+    calculateBumpValue(type, topStyle, bumpBy) {
+        let topVal = topStyle;
+        if (type == "all") {
+            topVal = `calc(${topStyle} + ${bumpBy})`;
+        }
+        else if (type == "0Positioned" && possibleZeros.includes(topStyle)) {
+            topVal = bumpBy;
+        }
+        return topVal;
+    }
+    /**
+     * Used in bumpAbsoluteElements
+     *
+     * Recursively traverse through the HTML document and return an array of the top level elements
+     * and elements with static parents
+     * @param {object} element The HTML element
+     * @param {array} acc accumulator
+     * @returns {array} array top level elements and elements with static parents
+     *
+     */
+    traverseHtml(element, acc = []) {
+        const elems = element.children;
+        const len = elems.length;
+        if (!len) {
+            acc.push(element);
+        }
+        else {
+            for (let i = 0; i < len; i++) {
+                const style = window.getComputedStyle(elems[i], null);
+                if (style.getPropertyValue("position") == "static") {
+                    acc = this.traverseHtml(elems[i], acc);
+                }
+                else {
+                    acc.push(elems[i]);
+                }
+            }
+        }
+        return acc;
+    }
+    /**
+     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.bumpElements.[monitorFixedAdditions]`
+     * Called from beginAdjustment()
+     *
+     * Monitors the DOM for mutations, if the added node has a fixed position with a top style of 0px, it will be bumped by the title bar height.
+     * This ensures that if a fixed positioned element is dynamically added to the DOM, for example a pop-up modal, it'll have it's height adjusted
+     * by the header height since the initial bumping of elements can happen before this element exists.
+     *
+     * Element heights are not monitored and adjusted since this would require that all pre-existing elements have ther height recalculated each time
+     * a new element is dynamically added onto the page. Absolute postioned elements, however, could be monitored and adjusted since all we would
+     * need to check for is that it's parent has a static position or not, if it does then it can be adjusted.
+     * @param headerHeight the height of the header
+     */
+    monitorFixedPositionedElements(headerHeight) {
+        const options = {
+            childList: true,
+            subtree: true,
+        };
+        /**
+         * MutationObserver interface provides the ability to watch for
+         * changes to the DOM tree using the observe method
+         */
+        const mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    var _a;
+                    if (!((_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains("bumped-element"))) {
+                        try {
+                            const nodeStyle = window.getComputedStyle(node);
+                            const topStyle = nodeStyle.top;
+                            // make sure node is fixed, has top style set to 0, and has not been bumped
+                            if (nodeStyle.position === "fixed" && possibleZeros.includes(topStyle)) {
+                                node.style.top = this.calculateBumpValue("0Positioned", topStyle, headerHeight);
+                                node.classList.add("bumped-element");
+                            }
+                        }
+                        catch (err) {
+                            // Expected to error if the node is not an Element e.g text is not of type Element
+                        }
+                    }
+                });
+            });
+        });
+        // We observe the body and do not disconnect because there may be other elements that are dynamically loaded, such as a dialogue menu.
+        mutationObserver.observe(document.body, options);
+    }
+    render() {
+        let showDockingIcon = !this.state.dockingEnabled ? false : this.state.dockingIcon;
+        let isGrouped = this.state.dockingIcon == "ejector";
+        let showMinimizeIcon = (isGrouped && this.state.isTopRight) || !isGrouped; // If not in a group or if topright in a group
+        let tabRegionClasses = "fsbl-tab-area";
+        let headerClasses = "fsbl-header";
+        // If we're showing tabs, we throw these classes on to modify styles.
+        if (this.state.showTabs) {
+            headerClasses = `${headerClasses} fsbl-tabs-enabled`;
+        }
+        if (this.state.tabs.length > 1) {
+            headerClasses = `${headerClasses} fsbl-tabs-multiple`;
+        }
+        const context = {
+            showLinkerButton: this.state.showLinkerButton,
+            showShareButton: this.state.showShareButton,
+            showTabRegion: this.state.showTabs,
+            showMinimizeButton: this.state.minButton && showMinimizeIcon,
+            showMaximizeButton: this.state.maxButton,
+            onTabDropped: this.allowDragOnCenterRegion,
+            showDockingButton: showDockingIcon,
+            showCloseButton: this.state.closeButton,
+            className: tabRegionClasses,
+            thisWindowTitle: this.state.windowTitle,
+            boundingBox: this.state.tabBarBoundingBox,
+            listenForDragOver: !this.state.allowDragOnCenterRegion,
+            tabs: this.state.tabs,
+            onTitleUpdated: this.resizeDragHandle,
+            showAlwaysOnTopButton: this.state.alwaysOnTopButton && showMinimizeIcon,
+            showTabs: this.state.showTabs,
+            alwaysOnTop: this.state.alwaysOnTop,
+            useDOMBasedMovement: this.state.useDOMBasedMovement,
+        };
+        return (React.createElement("div", { className: headerClasses, onDrop: this.onDropHandler.bind(this) }, this.state.initialized && (React.createElement(WindowTitleBarContext.Provider, { value: context }, this.props.children))));
+    }
+}
 //# sourceMappingURL=WindowTitleBarShell.js.map