@finsemble/finsemble-ui 7.0.0 → 7.1.0-beta.2

package/react/components/windowTitleBar/WindowTitleBarShell.js

@@ -1,8 +1,12 @@
+/*!
+ * 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 { clone } from "../sdd/Appearance.helpers";
 import { Logger } from "@finsemble/finsemble-api";
 export class WindowTitleBarShell extends React.Component {
     constructor(props) {
@@ -43,6 +47,11 @@ export class WindowTitleBarShell extends React.Component {
     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);
@@ -113,19 +122,28 @@ export class WindowTitleBarShell extends React.Component {
             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],
+            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];
+        //Increase the marginTop of the body if the title bar is injected into the component.
         if (header) {
-            document.body.style.margin = "0px";
-            document.body.style.marginTop = window.getComputedStyle(header, null).getPropertyValue("height");
+            const body = document.getElementsByTagName("body")[0];
+            let marginTop = this.getActualComputedStylesFromStylesheets(body, "margin-top");
+            marginTop = marginTop ? marginTop : "0px";
+            const height = window.getComputedStyle(header).getPropertyValue("height");
+            document.body.style.marginTop = `calc(${marginTop} + ${height})`;
         }
         this.resizeDragHandle();
         this.hackScrollbar();
@@ -174,37 +192,62 @@ export class WindowTitleBarShell extends React.Component {
             }, 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() {
         let dragHandle = document.querySelector(`.${this.state.dragHandleName}`);
         if (dragHandle) {
             dragHandle.classList.add("hidden");
         }
     }
+    /**
+     * When tiling stops, we want to find the dragHandler and re-show it
+     */
     onTilingStop() {
         let dragHandle = document.querySelector(`.${this.state.dragHandleName}.hidden`);
         if (dragHandle) {
             dragHandle.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) {
+        // 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.
         let isMousePressed = false;
         const handleMouseDown = (event) => {
+            // prevent a second call if the button hasn't been unpressed
+            if (isMousePressed)
+                return;
             isMousePressed = true;
             setTimeout(() => {
                 if (isMousePressed) {
@@ -213,6 +256,9 @@ export class WindowTitleBarShell extends React.Component {
             }, 100);
         };
         const handleMouseUp = () => {
+            // prevent a call if the button hasn't been pressed
+            if (!isMousePressed)
+                return;
             isMousePressed = false;
             FSBL.Clients.WindowClient.stopMovingWindow();
         };
@@ -234,10 +280,13 @@ 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) {
             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) });
             }
             else {
@@ -245,11 +294,14 @@ export class WindowTitleBarShell extends React.Component {
             }
         }
         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({}, bounds), { left: bounds.left + theTabBounds.width, width: bounds.width - theTabBounds.width });
             }
             else {
@@ -257,10 +309,22 @@ export class WindowTitleBarShell extends React.Component {
             }
         }
     }
+    /**
+     * 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;
         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
@@ -269,17 +333,25 @@ export class WindowTitleBarShell extends React.Component {
             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`;
-            dragHandle.style.marginTop = `${-bounds.height + 5}px`;
+            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();
@@ -288,7 +360,9 @@ export class WindowTitleBarShell extends React.Component {
                 dragHandle.style.left = `${bounds.left}px`;
                 dragHandle.style.width = `${bounds.width}px`;
             }
+            // Add an event listener to hide the drag-handler when tiling is started
             FSBL.Clients.RouterClient.addListener("DockingService.startTilingOrTabbing", this.onTilingStart);
+            // Add an event listener to show the drag-handler when tiling is stopped or cancelled
             FSBL.Clients.RouterClient.addListener("DockingService.stopTilingOrTabbing", this.onTilingStop);
             FSBL.Clients.RouterClient.addListener("DockingService.cancelTilingOrTabbing", this.onTilingStop);
         }
@@ -296,12 +370,26 @@ export class WindowTitleBarShell extends React.Component {
             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();
@@ -323,6 +411,9 @@ export class WindowTitleBarShell extends React.Component {
             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 });
     }
@@ -347,10 +438,18 @@ export class WindowTitleBarShell extends React.Component {
         });
     }
     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);
             }
         }
@@ -358,6 +457,8 @@ export class WindowTitleBarShell extends React.Component {
             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");
@@ -368,48 +469,139 @@ export class WindowTitleBarShell extends React.Component {
                 bodyElement.style.overflowY = "auto";
         }
     }
-    async maybeAdjustWindow() {
-        const beginAdjustment = () => {
-            const htmlElement = document.querySelector("html");
-            const bodyElement = document.querySelector("body");
-            if (htmlElement) {
-                htmlElement.style.display = "table";
-                htmlElement.style.height = "100vh";
-                htmlElement.style.width = "100vw";
-            }
-            if (bodyElement) {
-                const header = document.getElementsByClassName("fsbl-header")[0];
-                const headerHeight = window.getComputedStyle(header, null).getPropertyValue("height");
-                bodyElement.style.height = `calc(100vh - ${headerHeight})`;
-                bodyElement.style.position = "relative";
+    /**
+     * Gets all the CSS styles in the document that match the element.
+     *
+     * @param element
+     */
+    getStylesForElement(element) {
+        var _a;
+        const matchedStyles = [];
+        const styleSheetList = document.styleSheets;
+        for (let i = 0; i < styleSheetList.length; i++) {
+            const cssRuleList = (_a = styleSheetList.item(i)) === null || _a === void 0 ? void 0 : _a.cssRules;
+            for (let j = 0; j < cssRuleList.length; j++) {
+                const rule = cssRuleList.item(j);
+                if (element.matches(rule.selectorText)) {
+                    // No type available for StylePropertyMap
+                    matchedStyles.push(rule.styleMap);
+                }
             }
-            const header = document.getElementsByClassName("fsbl-header")[0];
+        }
+        return matchedStyles;
+    }
+    /**
+     * Get the Actual computed style values for an element native alternative is getComputedStyle() can return used
+     * values for some specific values eg a height specified in a % value will return a px value. Setting style with
+     * used values can lead to issues when resizing and potentially break application design.
+     *
+     * Note: this only takes into account the style from styles sheets and not inline styles on the element itself
+     */
+    getActualComputedStylesFromStylesheets(element, property) {
+        /**
+         * List of used values taken from here:
+         * https://developer.mozilla.org/en-US/docs/Web/CSS/used_value#difference_from_computed_value
+         */
+        const listOfUsedValues = [
+            "background-position",
+            "bottom",
+            "left",
+            "right",
+            "top",
+            "height",
+            "width",
+            "margin-bottom",
+            "margin-left",
+            "margin-right",
+            "margin-top",
+            "min-height",
+            "min-width",
+            "padding-bottom",
+            "padding-left",
+            "padding-right",
+            "padding-top",
+            "text-indent",
+        ];
+        if (!listOfUsedValues.includes(property)) {
+            return window.getComputedStyle(element, null).getPropertyValue(property);
+        }
+        const matchedStyles = this.getStylesForElement(element);
+        let styleString = "";
+        for (const style of matchedStyles) {
+            style.forEach((value, key) => {
+                var _a;
+                // Only works for
+                if (value[0].value) {
+                    styleString = `${styleString} ${key}: ${value[0].value}${(_a = value[0].unit) !== null && _a !== void 0 ? _a : ""}; `;
+                }
+            });
+        }
+        const div = document.createElement("div");
+        div.setAttribute("style", styleString);
+        return div.style.getPropertyValue(property);
+    }
+    beginAdjustment() {
+        const bodyElement = document.querySelector("body");
+        const header = document.getElementsByClassName("fsbl-header")[0];
+        if (bodyElement) {
             const headerHeight = window.getComputedStyle(header, null).getPropertyValue("height");
-            if (header) {
-                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.");
+            /**
+             * Get the application defined value height and modify it when available rather than change it completely
+             * with what FSBL needs
+             */
+            let bodyHeight = this.getActualComputedStylesFromStylesheets(bodyElement, "height");
+            bodyHeight = bodyHeight ? bodyHeight : "100vh";
+            // Make sure it's a unit value - global values and keyword value can (probably) take care of themselves
+            if (bodyHeight.match(/^\d./)) {
+                const inlineHeight = bodyElement.style.getPropertyValue("height");
+                let calculatedHeight = `calc(${bodyHeight} - ${headerHeight})`;
+                // Use inline specified height if it exists and do not recursively apply the same value
+                if (inlineHeight && calculatedHeight != inlineHeight) {
+                    calculatedHeight = `calc(${inlineHeight} - ${headerHeight})`;
+                }
+                bodyElement.style.height = calculatedHeight;
             }
-        };
-        if (document.readyState === "complete")
-            beginAdjustment();
+        }
+        const headerHeight = window.getComputedStyle(header, null).getPropertyValue("height");
+        if (header) {
+            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
+     */
+    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")
-                    beginAdjustment();
+                    this.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.
+     * @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) => {
             const possibleZeros = ["0", "0px", 0];
             mutations.forEach((mutation) => {
@@ -419,19 +611,26 @@ export class WindowTitleBarShell extends React.Component {
                         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);
     }
+    /**
+     * Calls functions to bump fixed and/or absolute elements if configured to do so.
+     * @param {object} config bumpElements object
+     */
     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)
@@ -440,8 +639,17 @@ export class WindowTitleBarShell extends React.Component {
                 this.bumpAbsoluteElements(config);
         }
     }
+    /**
+     * 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
+     */
     adjust(elem, prev, maxHeight = "100vh") {
         if (!elem.className.includes("adjusted-element") &&
+            // workaround to fix dnd scrim disappearing
             !elem.className.includes("fsbl-share-scrim")) {
             const clientHeight = elem.clientHeight ? elem.clientHeight : 0;
             const offsetHeight = elem.offsetHeight ? elem.offsetHeight : 0;
@@ -451,16 +659,29 @@ export class WindowTitleBarShell extends React.Component {
             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
+     */
     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 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
+     */
     adjustContentHeight(headerNode) {
         const elem = headerNode;
         const maxHeight = `100%`;
@@ -468,12 +689,20 @@ export class WindowTitleBarShell extends React.Component {
         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;
             }
         }
     }
+    /**
+     * Calculates value to bump element by. If 'all' return top style and header height, if '0Positioned' return 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;
         const possibleZeros = ["0", "0px", 0];
@@ -485,6 +714,14 @@ export class WindowTitleBarShell extends React.Component {
         }
         return topVal;
     }
+    /**
+     * 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;
@@ -504,6 +741,10 @@ export class WindowTitleBarShell extends React.Component {
         }
         return acc;
     }
+    /**
+     * Bumps elements with fixed positioning down by the configured amount.
+     * @private
+     */
     bumpFixedElements(params) {
         let { fixed, bumpBy } = params;
         const getFixedElements = (nodes) => {
@@ -522,6 +763,7 @@ export class WindowTitleBarShell extends React.Component {
             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++) {
@@ -533,14 +775,20 @@ export class WindowTitleBarShell extends React.Component {
             }
         }
     }
+    /**
+     * Bumps absolute positioned elements with static parents down by the configured amount.
+     * @private
+     */
     bumpAbsoluteElements(params) {
         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" && !elems[i].className.includes("bumped-element")) {
                 elems[i].style.top = this.calculateBumpValue(absolute, topStyle, bumpBy);
                 elems[i].classList.add("bumped-element");
@@ -550,9 +798,10 @@ export class WindowTitleBarShell extends React.Component {
     render() {
         let showDockingIcon = !this.state.dockingEnabled ? false : this.state.dockingIcon;
         let isGrouped = this.state.dockingIcon == "ejector";
-        let showMinimizeIcon = (isGrouped && this.state.isTopRight) || !isGrouped;
+        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`;
         }