@datagrok-libraries/dock-spawn-dg 0.0.1 → 0.0.3

package/README.md

@@ -6,6 +6,3 @@ Changes:
 - Webcomponent interacts properly with Vue's renderer
 - Webcomponent emits proper events on panel closing
 - Panels could not be turned into dialogs. They dock by "filling" strategy by default
-
-[![NPM version](http://img.shields.io/npm/v/dock-spawn-ts.svg)](https://www.npmjs.com/package/dock-spawn-ts)
-[![Downloads](https://img.shields.io/npm/dm/dock-spawn-ts.svg)](https://www.npmjs.com/package/dock-spawn-ts)

package/index.d.ts

@@ -0,0 +1,33 @@
+export * from './src/ContainerType';
+export * from './src/Dialog';
+export * from './src/DockConfig';
+export * from './src/DockGraphSerializer';
+export * from './src/DockLayoutEngine';
+export * from './src/DockManager';
+export * from './src/DockManagerContext';
+export * from './src/DockModel';
+export * from './src/DockNode';
+export * from './src/DockWheel';
+export * from './src/DockWheelItem';
+export * from './src/DocumentManagerContainer';
+export * from './src/DocumentTabPage';
+export * from './src/DraggableContainer';
+export * from './src/EventHandler';
+export * from './src/FillDockContainer';
+export * from './src/HorizontalDockContainer';
+export * from './src/PanelContainer';
+export * from './src/Point';
+export * from './src/ResizableContainer';
+export * from './src/ResizeHandle';
+export * from './src/SplitterBar';
+export * from './src/SplitterDockContainer';
+export * from './src/SplitterPanel';
+export * from './src/TabHandle';
+export * from './src/TabHost';
+export * from './src/TabPage';
+export * from './src/UndockInitiator';
+export * from './src/Utils';
+export * from './src/VerticalDockContainer';
+export * from './src/i18n/Localizer';
+export * from './src/webcomponent/DockSpawnTsWebcomponent';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,4CAA4C,CAAC"}

package/index.js

@@ -0,0 +1,32 @@
+export * from './src/ContainerType';
+export * from './src/Dialog';
+export * from './src/DockConfig';
+export * from './src/DockGraphSerializer';
+export * from './src/DockLayoutEngine';
+export * from './src/DockManager';
+export * from './src/DockManagerContext';
+export * from './src/DockModel';
+export * from './src/DockNode';
+export * from './src/DockWheel';
+export * from './src/DockWheelItem';
+export * from './src/DocumentManagerContainer';
+export * from './src/DocumentTabPage';
+export * from './src/DraggableContainer';
+export * from './src/EventHandler';
+export * from './src/FillDockContainer';
+export * from './src/HorizontalDockContainer';
+export * from './src/PanelContainer';
+export * from './src/Point';
+export * from './src/ResizableContainer';
+export * from './src/ResizeHandle';
+export * from './src/SplitterBar';
+export * from './src/SplitterDockContainer';
+export * from './src/SplitterPanel';
+export * from './src/TabHandle';
+export * from './src/TabHost';
+export * from './src/TabPage';
+export * from './src/UndockInitiator';
+export * from './src/Utils';
+export * from './src/VerticalDockContainer';
+export * from './src/i18n/Localizer';
+export * from './src/webcomponent/DockSpawnTsWebcomponent';

package/package.json

@@ -1,32 +1,25 @@
 {
   "name": "@datagrok-libraries/dock-spawn-dg",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A TypeScript Version of dock-spawn with changes for Datagrok",
   "license": "MIT",
-  "author": {
-    "name": "Aufar Zakiev",
-    "email": "aufar.zakiev@softwarecountry.com"
+    "author": {
+    "name": "Andrey Sharapov",
+    "email": "andrey.sharapov@softwarecountry.com"
   },
   "scripts": {
     "build": "tsc",
-    "clean": "tsc --build --clean",
-    "lint": "eslint . --ext .ts",
-    "lint-fix": "eslint . --ext .ts --fix"
+    "clean": "tsc --build --clean"
   },
   "dependencies": {
     "rxjs": "^6.6.7"
   },
   "devDependencies": {
-    "@types/wu": "latest",
-    "@typescript-eslint/eslint-plugin": "latest",
-    "@typescript-eslint/parser": "latest",
-    "eslint": "latest",
-    "eslint-config-google": "latest",
-    "ts-loader": "latest",
-    "typescript": "latest",
-    "webpack": "latest",
-    "webpack-cli": "latest",
-    "@types/node": "latest"
+    "@types/wu": "^2.1.44",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.3",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4"
   },
   "repository": {
     "type": "git",

package/src/BrowserDialogHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrowserDialogHelper.d.ts","sourceRoot":"","sources":["BrowserDialogHelper.ts"],"names":[],"mappings":"AAAA,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC,QAsDA"}

package/{lib → src}/BrowserDialogHelper.js

@@ -4,10 +4,11 @@ export function moveElementToNewBrowserWindow(element, params) {
     const win = window.open('about:blank', undefined, `popup=yes,left=${newWindowBounds.x},top=${newWindowBounds.y},width=${newWindowBounds.width},height=${newWindowBounds.height}`);
     win.onfocus = (e) => params.focused(e);
     win.onblur = (e) => params.blured(e);
-    const styles = [...document.head.querySelectorAll('link')].map((x) => x.cloneNode());
-    for (const s of styles)
+    let styles = [...document.head.querySelectorAll('link')].map(x => x.cloneNode());
+    for (let s of styles) {
         win.document.head.appendChild(win.document.adoptNode(s));
-    const st = win.document.createElement('style');
+    }
+    let st = win.document.createElement("style");
     st.innerText = `
     html {
         overflow: hidden;
@@ -22,7 +23,7 @@ export function moveElementToNewBrowserWindow(element, params) {
     }
     `;
     win.document.head.appendChild(st);
-    const titleEl = win.document.createElement('title');
+    const titleEl = win.document.createElement("title");
     titleEl.innerText = params.title;
     win.document.head.appendChild(titleEl);
     win.onunload = () => params.newWindowClosedCallback();
@@ -30,28 +31,33 @@ export function moveElementToNewBrowserWindow(element, params) {
     const listSs = new Map();
     function backupSs(el) {
         if (el.shadowRoot) {
-            if (el.shadowRoot.adoptedStyleSheets.length > 0)
-                listSs.set(el, [...el.shadowRoot.adoptedStyleSheets.map((x) => cloneStyleSheet(win, x, cache))]);
-            for (const e of el.shadowRoot.querySelectorAll('*'))
+            if (el.shadowRoot.adoptedStyleSheets.length > 0) {
+                listSs.set(el, [...el.shadowRoot.adoptedStyleSheets.map(x => cloneStyleSheet(win, x, cache))]);
+            }
+            for (const e of el.shadowRoot.querySelectorAll('*')) {
                 backupSs(e);
+            }
         }
     }
     backupSs(element);
-    for (const e of element.querySelectorAll('*'))
+    for (const e of element.querySelectorAll('*')) {
         backupSs(e);
+    }
     win.document.body.appendChild(win.document.adoptNode(element));
-    for (const e of listSs)
+    for (const e of listSs) {
         e[0].shadowRoot.adoptedStyleSheets = e[1];
+    }
     params.closeCallback();
 }
 function cloneStyleSheet(window, stylesheet, cache) {
     const existingCopy = cache.get(stylesheet);
     if (existingCopy)
         return existingCopy;
-    let payload = '';
+    let payload = "";
     const rules = stylesheet.cssRules;
-    for (let i = 0; i < rules.length; i++)
-        payload += rules[i].cssText + '\n';
+    for (var i = 0; i < rules.length; i++) {
+        payload += rules[i].cssText + "\n";
+    }
     //@ts-ignore
     const newStylesheet = new window.CSSStyleSheet();
     cache.set(stylesheet, newStylesheet);

package/src/BrowserDialogHelper.ts

@@ -5,17 +5,17 @@ export function moveElementToNewBrowserWindow(element: HTMLElement, params: {
     focused: (e: FocusEvent) => void,
     blured: (e: FocusEvent) => void,
 }) {
-  const rect = element.getBoundingClientRect();
-  const newWindowBounds = {x: rect.x + 24, y: rect.y + 60, width: rect.width, height: rect.height};
-  const win = window.open('about:blank', undefined, `popup=yes,left=${newWindowBounds.x},top=${newWindowBounds.y},width=${newWindowBounds.width},height=${newWindowBounds.height}`);
-  win.onfocus = (e) => params.focused(e);
-  win.onblur = (e) => params.blured(e);
-  const styles = [...document.head.querySelectorAll('link')].map((x) => x.cloneNode());
-  for (const s of styles)
-    win.document.head.appendChild(win.document.adoptNode(s));
-
-  const st = win.document.createElement('style');
-  st.innerText = `
+    const rect = element.getBoundingClientRect();
+    const newWindowBounds = { x: rect.x + 24, y: rect.y + 60, width: rect.width, height: rect.height };
+    const win = window.open('about:blank', undefined, `popup=yes,left=${newWindowBounds.x},top=${newWindowBounds.y},width=${newWindowBounds.width},height=${newWindowBounds.height}`);
+    win.onfocus = (e) => params.focused(e);
+    win.onblur = (e) => params.blured(e);
+    let styles = [...document.head.querySelectorAll('link')].map(x => x.cloneNode());
+    for (let s of styles) {
+        win.document.head.appendChild(win.document.adoptNode(s));
+    }
+    let st = win.document.createElement("style");
+    st.innerText = `
     html {
         overflow: hidden;
         position: fixed;
@@ -28,49 +28,50 @@ export function moveElementToNewBrowserWindow(element: HTMLElement, params: {
         margin: 0;
     }
     `;
-  win.document.head.appendChild(st);
-  const titleEl = win.document.createElement('title');
-  titleEl.innerText = params.title;
-  win.document.head.appendChild(titleEl);
-
-  win.onunload = () => params.newWindowClosedCallback();
+    win.document.head.appendChild(st);
+    const titleEl = win.document.createElement("title");
+    titleEl.innerText = params.title;
+    win.document.head.appendChild(titleEl);
 
-  const cache = new Map<CSSStyleSheet, CSSStyleSheet>();
-  const listSs = new Map<Element, CSSStyleSheet[]>();
-  function backupSs(el: Element) {
-    if (el.shadowRoot) {
-      if (el.shadowRoot.adoptedStyleSheets.length > 0)
-        listSs.set(el, [...el.shadowRoot.adoptedStyleSheets.map((x) => cloneStyleSheet(win, x, cache))]);
+    win.onunload = () => params.newWindowClosedCallback();
 
-      for (const e of el.shadowRoot.querySelectorAll('*'))
+    const cache = new Map<CSSStyleSheet, CSSStyleSheet>();
+    const listSs = new Map<Element, CSSStyleSheet[]>();
+    function backupSs(el: Element) {
+        if (el.shadowRoot) {
+            if (el.shadowRoot.adoptedStyleSheets.length > 0) {
+                listSs.set(el, [...el.shadowRoot.adoptedStyleSheets.map(x => cloneStyleSheet(win, x, cache))]);
+            }
+            for (const e of el.shadowRoot.querySelectorAll('*')) {
+                backupSs(e);
+            }
+        }
+    }
+    backupSs(element);
+    for (const e of element.querySelectorAll('*')) {
         backupSs(e);
     }
-  }
-  backupSs(element);
-  for (const e of element.querySelectorAll('*'))
-    backupSs(e);
-
-
-  win.document.body.appendChild(win.document.adoptNode(element));
-  for (const e of listSs)
-    e[0].shadowRoot.adoptedStyleSheets = e[1];
 
+    win.document.body.appendChild(win.document.adoptNode(element));
+    for (const e of listSs) {
+        e[0].shadowRoot.adoptedStyleSheets = e[1];
+    }
 
-  params.closeCallback();
+    params.closeCallback();
 }
 
 function cloneStyleSheet(window: Window, stylesheet: CSSStyleSheet, cache: Map<CSSStyleSheet, CSSStyleSheet>) {
-  const existingCopy = cache.get(stylesheet);
-  if (existingCopy)
-    return existingCopy;
-  let payload = '';
-  const rules = stylesheet.cssRules;
-  for (let i = 0; i < rules.length; i++)
-    payload += rules[i].cssText + '\n';
-
-  //@ts-ignore
-  const newStylesheet = new window.CSSStyleSheet();
-  cache.set(stylesheet, newStylesheet);
-  newStylesheet.replaceSync(payload);
-  return newStylesheet;
+    const existingCopy = cache.get(stylesheet);
+    if (existingCopy)
+        return existingCopy;
+    let payload = "";
+    const rules = stylesheet.cssRules;
+    for (var i = 0; i < rules.length; i++) {
+        payload += rules[i].cssText + "\n";
+    }
+    //@ts-ignore
+    const newStylesheet = new window.CSSStyleSheet();
+    cache.set(stylesheet, newStylesheet);
+    newStylesheet.replaceSync(payload);
+    return newStylesheet;
 }

package/src/ContainerType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerType.d.ts","sourceRoot":"","sources":["ContainerType.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACrB,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,KAAK,UAAU;CAClB"}

package/src/ContainerType.ts

@@ -3,4 +3,4 @@ export enum ContainerType {
     vertical = 'vertical',
     fill = 'fill',
     panel = 'panel'
-}
+}

package/{lib → src}/Dialog.d.ts

@@ -1,10 +1,10 @@
-import { DockManager } from './DockManager.js';
-import { Point } from './Point.js';
-import { PanelContainer } from './PanelContainer.js';
-import { DraggableContainer } from './DraggableContainer.js';
-import { ResizableContainer } from './ResizableContainer.js';
-import { EventHandler } from './EventHandler.js';
-import { DockNode } from './DockNode.js';
+import { DockManager } from "./DockManager";
+import { Point } from "./Point";
+import { PanelContainer } from "./PanelContainer";
+import { DraggableContainer } from "./DraggableContainer";
+import { ResizableContainer } from "./ResizableContainer";
+import { EventHandler } from "./EventHandler";
+import { DockNode } from "./DockNode";
 export declare class Dialog {
     elementDialog: HTMLDivElement & {
         floatingDialog: Dialog;

package/src/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["Dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,qBAAa,MAAM;IACf,aAAa,EAAE,cAAc,GAAG;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,SAAS,EAAE,kBAAkB,CAAC;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC;IAChB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,GAAG,CAAC;IACtB,eAAe,EAAE,GAAG,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,YAAY,CAAC;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,cAAc,CAAC;IAC9B,kBAAkB,EAAE,YAAY,CAAC;IACjC,QAAQ,EAAE,cAAc,CAAC;IACzB,6BAA6B,EAAE,GAAG,CAAC;gBAEvB,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC,EAAE,cAAc,EAAE,aAAa,CAAC,EAAE,OAAO;IAapH,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAK9B,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;IAIvD,WAAW;IAyBX,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAShC,WAAW,IAAI,KAAK;IAIpB,OAAO;IAKP,WAAW,CAAC,CAAC,EAAE,YAAY;IAK3B,OAAO;IA8BP,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAIpC,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB,YAAY,CAAC,QAAQ,EAAE,MAAM;IAI7B,YAAY;IAMZ,IAAI;IAaJ,KAAK;IAOL,MAAM;IAIN,IAAI;IAUJ,MAAM,CAAC,gCAAgC,WAAY,MAAM,uBAAuB,QAAQ,EAAE,KAAG,IAAI,EAAE,CA4BlG;IAED,oBAAoB,CAAC,CAAC,EAAE,UAAU;IA0BlC,gBAAgB;IAQhB,uBAAuB,CAAC,CAAC,EAAE,KAAK;CASnC"}

package/{lib → src}/Dialog.js

@@ -1,29 +1,11 @@
-import { Point } from './Point.js';
-import { PanelContainer } from './PanelContainer.js';
-import { DraggableContainer } from './DraggableContainer.js';
-import { ResizableContainer } from './ResizableContainer.js';
-import { EventHandler } from './EventHandler.js';
-import { Utils } from './Utils.js';
-import { Localizer } from './i18n/Localizer.js';
+import { Point } from "./Point";
+import { PanelContainer } from "./PanelContainer";
+import { DraggableContainer } from "./DraggableContainer";
+import { ResizableContainer } from "./ResizableContainer";
+import { EventHandler } from "./EventHandler";
+import { Utils } from "./Utils";
+import { Localizer } from "./i18n/Localizer";
 export class Dialog {
-    elementDialog;
-    draggable;
-    panel;
-    dockManager;
-    eventListener;
-    position;
-    resizable;
-    disableResize;
-    mouseDownHandler;
-    onKeyPressBound;
-    noDocking;
-    isHidden;
-    keyPressHandler;
-    focusHandler;
-    grayoutParent;
-    contextmenuHandler;
-    _ctxMenu;
-    _windowsContextMenuCloseBound;
     constructor(panel, dockManager, grayoutParent, disableResize) {
         this.panel = panel;
         this.dockManager = dockManager;
@@ -58,12 +40,13 @@ export class Dialog {
         this.contextmenuHandler = new EventHandler(this.panel.elementTitle, 'contextmenu', this.oncontextMenuClicked.bind(this));
         this.resize(this.panel.elementPanel.clientWidth, this.panel.elementPanel.clientHeight);
         this.isHidden = false;
-        if (this.grayoutParent != null)
+        if (this.grayoutParent != null) {
             this.grayoutParent.grayOut(true);
+        }
         this.bringToFront();
     }
     setPosition(x, y) {
-        const rect = this.dockManager.config.dialogRootElement.getBoundingClientRect();
+        let rect = this.dockManager.config.dialogRootElement.getBoundingClientRect();
         this.position = new Point(x - rect.left, y - rect.top);
         this.elementDialog.style.left = (x - rect.left) + 'px';
         this.elementDialog.style.top = (y - rect.top) + 'px';
@@ -104,8 +87,9 @@ export class Dialog {
         Utils.removeNode(this.panel.elementPanel);
         Utils.arrayRemove(this.dockManager.context.model.dialogs, this);
         delete this.panel.floatingDialog;
-        if (this.grayoutParent)
+        if (this.grayoutParent) {
             this.grayoutParent.grayOut(false);
+        }
     }
     resize(width, height) {
         this.resizable.resize(width, height);
@@ -129,8 +113,9 @@ export class Dialog {
             this.isHidden = true;
             this.dockManager.notifyOnHideDialog(this);
         }
-        if (this.grayoutParent)
+        if (this.grayoutParent) {
             this.grayoutParent.grayOut(false);
+        }
     }
     close() {
         this.hide();
@@ -150,45 +135,25 @@ export class Dialog {
             this.dockManager.notifyOnShowDialog(this);
         }
     }
-    static createContextMenuContentCallback = (dialog, documentMangerNodes) => {
-        if (!dialog.panel._hideCloseButton)
-            return [];
-        const result = [];
-        const btnCloseDialog = document.createElement('div');
-        btnCloseDialog.innerText = Localizer.getString('CloseDialog');
-        result.push(btnCloseDialog);
-        btnCloseDialog.onclick = () => {
-            dialog.panel.close();
-            dialog.closeContextMenu();
-        };
-        if (dialog.dockManager.config.enableBrowserWindows) {
-            const btnNewBrowserWindow = document.createElement('div');
-            btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
-            result.push(btnNewBrowserWindow);
-            btnNewBrowserWindow.onclick = () => {
-                dialog.panel.undockToBrowserDialog();
-                dialog.closeContextMenu();
-            };
-        }
-        return result;
-    };
     oncontextMenuClicked(e) {
         e.preventDefault();
         if (!this._ctxMenu && Dialog.createContextMenuContentCallback) {
             const menuItems = Dialog.createContextMenuContentCallback(this, this.dockManager.context.model.documentManagerNode.children);
-            if (menuItems.length == 0)
+            if (menuItems.length == 0) {
                 return;
+            }
             this._ctxMenu = document.createElement('div');
             this._ctxMenu.className = 'dockspab-tab-handle-context-menu';
             this._ctxMenu.append(...menuItems);
-            this._ctxMenu.style.left = e.pageX + 'px';
-            this._ctxMenu.style.top = e.pageY + 'px';
+            this._ctxMenu.style.left = e.pageX + "px";
+            this._ctxMenu.style.top = e.pageY + "px";
             document.body.appendChild(this._ctxMenu);
             this._windowsContextMenuCloseBound = this.windowsContextMenuClose.bind(this);
             window.addEventListener('pointerup', this._windowsContextMenuCloseBound);
         }
-        else
+        else {
             this.closeContextMenu();
+        }
     }
     closeContextMenu() {
         if (this._ctxMenu) {
@@ -198,12 +163,35 @@ export class Dialog {
         }
     }
     windowsContextMenuClose(e) {
-        const cp = e.composedPath();
-        for (const i in cp) {
-            const el = cp[i];
+        let cp = e.composedPath();
+        for (let i in cp) {
+            let el = cp[i];
             if (el == this._ctxMenu)
                 return;
         }
         this.closeContextMenu();
     }
 }
+Dialog.createContextMenuContentCallback = (dialog, documentMangerNodes) => {
+    if (!dialog.panel._hideCloseButton) {
+        return [];
+    }
+    const result = [];
+    let btnCloseDialog = document.createElement('div');
+    btnCloseDialog.innerText = Localizer.getString('CloseDialog');
+    result.push(btnCloseDialog);
+    btnCloseDialog.onclick = () => {
+        dialog.panel.close();
+        dialog.closeContextMenu();
+    };
+    if (dialog.dockManager.config.enableBrowserWindows) {
+        let btnNewBrowserWindow = document.createElement('div');
+        btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
+        result.push(btnNewBrowserWindow);
+        btnNewBrowserWindow.onclick = () => {
+            dialog.panel.undockToBrowserDialog();
+            dialog.closeContextMenu();
+        };
+    }
+    return result;
+};