npm - @finsemble/finsemble-ui - Versions diffs - 1.0.0-beta-1 → 1.0.0-beta-3 - Mend

@finsemble/finsemble-ui 1.0.0-beta-1 → 1.0.0-beta-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2185) hide show

package/react/components/windowTitleBar/WindowTitleBarShell.js CHANGED Viewed

@@ -5,20 +5,37 @@
 import * as React from "react";
 import { WindowTitleBarContext } from "./windowTitleBarContext";
 import { storeManager, Actions, getStore } from "./stores/windowTitleBarStore";
-import "../../assets/css/windowTitleBar.css";
+import styles from "../../assets/css/windowTitleBar.lazy.css";
 import { clone } from "../sdd/Appearance.helpers";
-import { Logger } from "@finsemble/finsemble-api";
+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: FSBL.Clients.WindowClient.getWindowIdentifier(),
+            activeTab: FEAGlobals.FSBL.Clients.WindowClient.getWindowIdentifier(),
             allowDragOnCenterRegion: true,
             alwaysOnTop: false,
             alwaysOnTopButton: false,
@@ -43,10 +60,10 @@ export class WindowTitleBarShell extends React.Component {
             bumpElements: {},
             adjustContentHeights: true,
         };
-        finsembleWindow.isAlwaysOnTop({}, (err, alwaysOnTop) => {
+        FEAGlobals.finsembleWindow.isAlwaysOnTop({}, (err, alwaysOnTop) => {
             this.setState(Object.assign(Object.assign({}, this.state), { alwaysOnTop }));
         });
-        finsembleWindow.addEventListener("alwaysOnTop", this.alwaysOnTopListener);
+        FEAGlobals.finsembleWindow.addEventListener("alwaysOnTop", this.alwaysOnTopListener);
     }
     alwaysOnTopListener({ data: { alwaysOnTop } }) {
         this.setState(Object.assign(Object.assign({}, this.state), { alwaysOnTop }));
@@ -94,12 +111,12 @@ export class WindowTitleBarShell extends React.Component {
             { 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);
+        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,
@@ -107,7 +124,7 @@ export class WindowTitleBarShell extends React.Component {
     }
     onStoreChange() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        let activeIdentifier = finsembleWindow.identifier;
+        let activeIdentifier = FEAGlobals.finsembleWindow.identifier;
         activeIdentifier.title = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getValue({
             field: "Main.windowTitle",
         });
@@ -141,7 +158,7 @@ export class WindowTitleBarShell extends React.Component {
         window.addEventListener("keydown", (e) => {
             if (e.key === "Tab") {
                 // This magic moves focus to a browserView, if one exists
-                finsembleWindow.focus();
+                FEAGlobals.finsembleWindow.focus();
             }
         });
         let header = document.getElementsByClassName("fsbl-header")[0];
@@ -157,12 +174,19 @@ export class WindowTitleBarShell extends React.Component {
     }
     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 },
@@ -186,12 +210,12 @@ export class WindowTitleBarShell extends React.Component {
                 { 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);
+            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) {
@@ -237,7 +261,7 @@ export class WindowTitleBarShell extends React.Component {
      * It won't be called when dropped on a tab that handles handle the event.
      */
     onDropHandler() {
-        FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {});
+        FEAGlobals.FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {});
     }
     /**
      * Called when user double clicks on drag handle
@@ -248,8 +272,28 @@ export class WindowTitleBarShell extends React.Component {
         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;
@@ -258,7 +302,7 @@ export class WindowTitleBarShell extends React.Component {
             this.isMousePressed = true;
             setTimeout(() => {
                 if (this.isMousePressed) {
-                    FSBL.Clients.WindowClient.startMovingWindow(event);
+                    FEAGlobals.FSBL.Clients.WindowClient.startMovingWindow(event);
                 }
             }, 100);
         };
@@ -268,8 +312,9 @@ export class WindowTitleBarShell extends React.Component {
                 return;
             }
             this.isMousePressed = false;
-            FSBL.Clients.WindowClient.stopMovingWindow();
+            FEAGlobals.FSBL.Clients.WindowClient.stopMovingWindow();
         };
+        element.onmouseleave = handleMouseLeave;
         element.onmousedown = handleMouseDown;
         element.onmouseup = handleMouseUp;
     }
@@ -288,14 +333,34 @@ export class WindowTitleBarShell extends React.Component {
     }
     dragHandleBoundsForShowTabs(startingBounds) {
         var _a;
-        // If there is more than one tab, then the drag area is the padding-left of fsbl-header-right
-        // See .fsbl-tabs-multiple in the css
         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) {
-                const computedStyle = getComputedStyle(headerRight);
-                // override the bounds.width with the paddingLeft amount
-                return Object.assign(Object.assign({}, clone(headerRight.getBoundingClientRect())), { width: parseInt(computedStyle.paddingLeft, 10) });
+                // 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;
@@ -330,6 +395,15 @@ export class WindowTitleBarShell extends React.Component {
      */
     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
@@ -399,7 +473,7 @@ export class WindowTitleBarShell extends React.Component {
      */
     onTitleChange(err, response) {
         let { tabs } = this.state;
-        let myIdentifier = FSBL.Clients.WindowClient.getWindowIdentifier();
+        let myIdentifier = FEAGlobals.FSBL.Clients.WindowClient.getWindowIdentifier();
         tabs = tabs.map((el) => {
             if (!el.windowName && el.name)
                 el.windowName = el.name;
@@ -476,25 +550,6 @@ export class WindowTitleBarShell extends React.Component {
                 bodyElement.style.overflowY = "auto";
         }
     }
-    beginAdjustment() {
-        const bodyElement = document.querySelector("body");
-        const header = document.getElementsByClassName("fsbl-header")[0];
-        if (bodyElement) {
-            const headerHeight = window.getComputedStyle(header, null).getPropertyValue("height");
-            bodyElement.style.height = `calc(100vh - ${headerHeight})`;
-        }
-        if (header) {
-            const headerHeight = window.getComputedStyle(header, null).getPropertyValue("height");
-            if (this.state.adjustContentHeights)
-                this.adjustTopLevelHeight(Number(headerHeight.split("px")[0]));
-            this.bumpElements(this.state.bumpElements);
-            if (this.state.bumpElements.monitorFixedAdditions)
-                this.monitorFixedPositionedElements(headerHeight);
-        }
-        else {
-            Logger.system.error("WindowTitleBarShell.maybeAdjustWindow:could not find the header.");
-        }
-    }
     /**
      * Once document is ready and header is injected into DOM, begin adjusting the height of elements and bump fixed/absolute elements
      */
@@ -511,114 +566,218 @@ export class WindowTitleBarShell extends React.Component {
         }
     }
     /**
-     * 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.
-     * @param headerHeight the height of the header
+     * Begin adjusting the body and top level elements and their direct descendants by the header height.
      */
-    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.className) === null || _a === void 0 ? void 0 : _a.includes("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
-                        }
-                    }
-                });
-            });
+    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);
+            }
         });
-        // 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);
     }
     /**
-     * Calls functions to bump fixed and/or absolute elements if configured to do so.
-     * @param {object} config bumpElements object
+     * 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
      */
-    bumpElements(config) {
-        if ((config === null || config === void 0 ? void 0 : config.bumpBy) && (config === null || config === void 0 ? void 0 : config.bumpBy) !== "0px") {
-            if (config.fixed)
-                this.bumpFixedElements(config);
-            if (config.absolute)
-                this.bumpAbsoluteElements(config);
+    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} prev height of previous sibling
-     * @param maxHeight
+     * @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, prev, maxHeight = "100vh") {
-        var _a, _b;
-        if (!((_a = elem.className) === null || _a === void 0 ? void 0 : _a.includes("adjusted-element")) &&
-            // workaround to fix dnd scrim disappearing
-            !((_b = elem.className) === null || _b === void 0 ? void 0 : _b.includes("fsbl-share-scrim"))) {
+    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;
-            const adjustPrev = prev + offset;
-            elem.style.maxHeight = `calc(${maxHeight} - ${adjustPrev}px)`;
+            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");
         }
     }
     /**
-     * Adjusts the top level content view height to be its height subtracted by the headerHeight and its
-     * 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.
-     * @param {number} headerHeight the height of the header
+     * 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
      */
-    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);
-        });
+    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);
+        }
     }
     /**
-     * Adjusts the content view height to be maximum the parent container height subtracted by the total height elements above it.
-     * The height of the previous elements are added to this calculation if they are not fixed or absolute.
-     * @param {object} headerNode window titlebar
+     * 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
      */
-    adjustContentHeight(headerNode) {
-        const elem = headerNode;
-        const maxHeight = `100%`;
-        const { children } = elem;
-        const len = children.length;
-        let prev = 0;
+    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++) {
-            // 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;
+            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");
             }
         }
     }
     /**
-     * Calculates value to bump element by. If 'all' return top style and header height, if '0Positioned' return header height
+     * 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
@@ -635,6 +794,8 @@ export class WindowTitleBarShell extends React.Component {
         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
@@ -662,60 +823,50 @@ export class WindowTitleBarShell extends React.Component {
         return acc;
     }
     /**
-     * Bumps elements with fixed positioning down by the configured amount.
-     * @private
+     * 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
      */
-    bumpFixedElements(params) {
-        var _a;
-        let { fixed, bumpBy } = params;
-        const getFixedElements = (nodes) => {
-            const fixedElems = [];
-            nodes.forEach((node) => {
-                const style = window.getComputedStyle(node, null);
-                if (style.getPropertyValue("position") == "fixed")
-                    fixedElems.push(node);
-                const elems = node.querySelectorAll("*");
-                elems.forEach((elem) => {
-                    const childStyle = window.getComputedStyle(elem, null);
-                    if (childStyle.getPropertyValue("position") == "fixed")
-                        fixedElems.push(elem);
+    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
+                        }
+                    }
                 });
             });
-            return fixedElems;
-        };
-        const selector = "*:not(#FSBLHeader, .fsbl-header)";
-        // Get all fixed positioned elements
-        const elems = getFixedElements(document.body.querySelectorAll(`${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 (!((_a = elems[i].className) === null || _a === void 0 ? void 0 : _a.includes("bumped-element"))) {
-                elems[i].style.top = this.calculateBumpValue(fixed, topStyle, bumpBy);
-                elems[i].classList.add("bumped-element");
-            }
-        }
-    }
-    /**
-     * Bumps absolute positioned elements with static parents down by the configured amount.
-     * @private
-     */
-    bumpAbsoluteElements(params) {
-        var _a;
-        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" && !((_a = elems[i].className) === null || _a === void 0 ? void 0 : _a.includes("bumped-element"))) {
-                elems[i].style.top = this.calculateBumpValue(absolute, topStyle, bumpBy);
-                elems[i].classList.add("bumped-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;