@eclipse-docks/core 0.7.126 → 0.7.130

package/src/parts/contextmenu.ts

@@ -2,20 +2,24 @@ import {css, html, nothing} from 'lit'
 import {customElement, property, state} from 'lit/decorators.js'
 import {DocksElement} from "./element";
 import {
-    CommandContribution,
     Contribution,
     ContributionChangeEvent,
     contributionRegistry,
-    getContributionDisabled,
-    HTMLContribution,
-    getContributionVisible,
     TOPIC_CONTRIBUTEIONS_CHANGED
 } from "../core/contributionregistry";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {subscribe} from "../core/events";
 import {closeSiblingSubmenus} from "../core/dropdown-menu-utils";
 import {createRef, ref} from "lit/directives/ref.js";
-import '../components/command';
+import {renderDropdownContribution, handleDropdownWaSelect} from "../core/dropdown-item";
+
+interface VirtualPopupAnchor {
+    getBoundingClientRect(): DOMRect;
+}
+
+interface WaPopupElement extends HTMLElement {
+    anchor?: Element | string | VirtualPopupAnchor;
+    reposition(): void;
+}
 
 @customElement('docks-contextmenu')
 export class DocksContextMenu extends DocksElement {
@@ -31,10 +35,15 @@ export class DocksContextMenu extends DocksElement {
     @state()
     private isOpen: boolean = false;
 
-    @state()
-    private position: { x: number, y: number } = { x: 0, y: 0 };
+    private menuPosition: { x: number; y: number } = { x: 0, y: 0 };
+
+    private readonly virtualAnchor: VirtualPopupAnchor = {
+        getBoundingClientRect: () => {
+            const { x, y } = this.menuPosition;
+            return new DOMRect(x, y, 0, 0);
+        },
+    };
 
-    private anchorRef = createRef<HTMLElement>();
     private dropdownRef = createRef<HTMLElement>();
 
     private boundHandleDocumentPointerDown = this.handleDocumentPointerDown.bind(this);
@@ -225,43 +234,38 @@ export class DocksContextMenu extends DocksElement {
             await this.updateComplete;
         }
 
-        this.position = position;
+        this.menuPosition = position;
         this.isOpen = true;
         await this.updateComplete;
+        this.syncVirtualPopupAnchor();
         document.addEventListener('pointerdown', this.boundHandleDocumentPointerDown, { capture: true });
         return true;
     }
 
+    /** Points wa-dropdown's internal wa-popup at the pointer via a VirtualElement anchor. */
+    private syncVirtualPopupAnchor(): void {
+        const dropdown = this.dropdownRef.value;
+        const popup = dropdown?.shadowRoot?.querySelector('wa-popup') as WaPopupElement | null;
+        if (!popup) return;
+        popup.anchor = this.virtualAnchor;
+        popup.reposition();
+    }
+
     private onClose() {
         if (!this.isOpen) return;
         this.isOpen = false;
         document.removeEventListener('pointerdown', this.boundHandleDocumentPointerDown, { capture: true });
     }
 
-    private renderContribution(contribution: Contribution) {
-        if ("command" in contribution) {
-            const commandContribution = contribution as CommandContribution;
-            if (!getContributionVisible(commandContribution)) {
-                return nothing;
-            }
-            const disabled = getContributionDisabled(commandContribution);
-            return html`
-                <docks-command
-                    cmd="${commandContribution.command}"
-                    icon="${commandContribution.icon ?? ''}"
-                    .params=${commandContribution.params ?? {}}
-                    ?disabled="${disabled}">
-                    ${commandContribution.label}
-                </docks-command>
-            `;
-        } else if ("component" in contribution) {
-            const contents = (contribution as HTMLContribution).component;
-            if (contents instanceof Function) {
-                return contents();
-            }
-            return unsafeHTML(contents);
+    protected updated(changedProperties: Map<string, unknown>): void {
+        super.updated(changedProperties);
+        if (changedProperties.has('isOpen') && this.isOpen) {
+            this.syncVirtualPopupAnchor();
         }
-        return nothing;
+    }
+
+    private renderContribution(contribution: Contribution) {
+        return renderDropdownContribution(contribution);
     }
 
     render() {
@@ -272,18 +276,9 @@ export class DocksContextMenu extends DocksElement {
                 ${ref(this.dropdownRef)}
                 ?open=${this.isOpen}
                 @submenu-opening=${this.handleSubmenuOpening}
+                @wa-select=${handleDropdownWaSelect}
                 @wa-after-hide=${this.onClose}>
-                
-                <div 
-                    slot="trigger"
-                    ${ref(this.anchorRef)}
-                    style="position: fixed; 
-                           left: ${this.position.x}px; 
-                           top: ${this.position.y}px; 
-                           width: 1px; 
-                           height: 1px; 
-                           pointer-events: none;">
-                </div>
+                <span slot="trigger" hidden aria-hidden="true"></span>
                 
                 ${partContent}
                 ${this.contributions.map(c => this.renderContribution(c))}

package/src/parts/index.ts

@@ -1,5 +1,8 @@
 import "../externals/webawesome"
+import { installOpenDropdownNativeContextMenuGuard } from "../core/dropdown-menu-utils";
 import "./toolbar"
 import "./contextmenu"
 import "./tabs"
-import "./resizable-grid"
+import "./resizable-grid"
+
+installOpenDropdownNativeContextMenuGuard();

package/src/parts/part.ts

@@ -21,6 +21,10 @@ export abstract class DocksPart extends DocksContainer {
     @property({ type: Boolean, attribute: false })
     public isEditor: boolean = false;
 
+    /** Compact layout for dialog/tab embedding (no fill-height shell or nested scroll). */
+    @property({ type: Boolean, reflect: true })
+    embedded = false;
+
     protected commandStack?: CommandStack;
 
     public getCommandStack(): CommandStack | undefined {
@@ -135,11 +139,13 @@ export abstract class DocksPart extends DocksContainer {
         return nothing;
     }
 
+    /** Part-level toolbar contributions (`toolbar:${partId}`). */
     private getToolbarTarget(): string | undefined {
         const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
         return contributionKey ? `toolbar:${contributionKey}` : undefined;
     }
 
+    /** Part-level context-menu contributions (`contextmenu:${partId}`). */
     private getContextMenuTarget(): string | undefined {
         const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
         return contributionKey ? `contextmenu:${contributionKey}` : undefined;
@@ -292,6 +298,26 @@ export abstract class DocksPart extends DocksContainer {
             min-height: 100%;
         }
 
+        :host([embedded]) {
+            height: auto;
+        }
+
+        :host([embedded]) .part-shell {
+            height: auto;
+            overflow: visible;
+            grid-template-rows: auto;
+        }
+
+        :host([embedded]) .part-content {
+            overflow: visible;
+            min-height: 0;
+        }
+
+        :host([embedded]) .part-content-inner {
+            height: auto;
+            min-height: 0;
+        }
+
         .part-toolbar {
             min-height: 0;
         }

package/src/parts/resizable-grid.ts

@@ -46,10 +46,10 @@ export class DocksResizableGrid extends DocksElement {
     } | null = null;
     
     private resizeOverlay: HTMLDivElement | null = null;
-    private childrenLoaded = false;
     private childStylesApplied = false;
     private mutationObserver?: MutationObserver;
-    private settingsLoaded = false;
+    private refreshScheduled = false;
+    private layoutGeneration = 0;
 
     createRenderRoot() {
         // intentionally disabling shadow DOM for the resizable grid
@@ -59,87 +59,162 @@ export class DocksResizableGrid extends DocksElement {
     // ============= Lifecycle Methods =============
 
     protected doBeforeUI() {
-        // Only set up observer if children not yet loaded
-        if (!this.childrenLoaded) {
-            // Use MutationObserver to detect when children are added
-            this.mutationObserver = new MutationObserver(() => {
-                if (!this.childrenLoaded) {
-                    this.loadChildren();
-                }
-            });
-            
-            this.mutationObserver.observe(this, { childList: true, subtree: false });
-            
-            // Also try to load immediately
-            this.loadChildren();
+        this.mutationObserver = new MutationObserver(() => {
+            this.scheduleRefreshGridLayout();
+        });
+        this.mutationObserver.observe(this, { childList: true, subtree: false });
+        this.scheduleRefreshGridLayout();
+    }
+
+    private scheduleRefreshGridLayout() {
+        if (this.refreshScheduled) {
+            return;
         }
+        this.refreshScheduled = true;
+        queueMicrotask(() => {
+            this.refreshScheduled = false;
+            void this.refreshGridLayout();
+        });
     }
 
-    private async loadChildren() {
-        const potentialChildren = Array.from(this.children).filter(
-            child => child.tagName !== 'STYLE' && 
-                     child.tagName !== 'SCRIPT' && 
-                     !child.classList.contains('resize-handle')
+    private getGridChildrenFromDom(): HTMLElement[] {
+        return Array.from(this.children).filter(
+            (child) =>
+                child.tagName !== 'STYLE' &&
+                child.tagName !== 'SCRIPT' &&
+                !child.classList.contains('resize-handle'),
         ) as HTMLElement[];
+    }
 
-        if (potentialChildren.length === 0) {
-            return;
+    private static isNestedResizableGrid(child: HTMLElement): boolean {
+        return child.tagName.toLowerCase() === 'docks-resizable-grid';
+    }
+
+    private applyChildLayoutStyles(): void {
+        this.gridChildren.forEach((child, index) => {
+            child.style.overflow = 'hidden';
+            child.style.height = '100%';
+            child.style.width = '100%';
+            child.style.gridColumn = this.orientation === 'horizontal' ? `${index * 2 + 1}` : '1';
+            child.style.gridRow = this.orientation === 'vertical' ? `${index * 2 + 1}` : '1';
+            if (!DocksResizableGrid.isNestedResizableGrid(child)) {
+                child.style.display = 'flex';
+                child.style.flexDirection = 'column';
+            }
+        });
+    }
+
+    private resolveGridSizes(childCount: number): string[] {
+        const parsedSizes = this.sizes?.split(',').map((s) => s.trim()).filter(Boolean) ?? [];
+        if (parsedSizes.length === childCount) {
+            return parsedSizes;
+        }
+        const equalSize = `${100 / childCount}%`;
+        return Array.from({ length: childCount }, () => equalSize);
+    }
+
+    private resolvePersistedSizes(persisted: unknown, childCount: number): string[] | null {
+        if (!persisted || typeof persisted !== 'object') {
+            return null;
         }
 
-        // Mark as loaded and disconnect observer
-        this.childrenLoaded = true;
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-            this.mutationObserver = undefined;
+        const record = persisted as {
+            sizes?: unknown;
+            sizesByCount?: Record<string, unknown>;
+        };
+        const byCount = record.sizesByCount?.[String(childCount)];
+        if (Array.isArray(byCount) && byCount.length === childCount && byCount.every((size) => typeof size === 'string')) {
+            return byCount;
+        }
+
+        if (Array.isArray(record.sizes) && record.sizes.length === childCount && record.sizes.every((size) => typeof size === 'string')) {
+            return record.sizes;
+        }
+
+        return null;
+    }
+
+    private async refreshGridLayout() {
+        const generation = ++this.layoutGeneration;
+        const potentialChildren = this.getGridChildrenFromDom();
+        if (potentialChildren.length === 0) {
+            this.gridChildren = [];
+            this.gridSizes = [];
+            this.childStylesApplied = false;
+            this.requestUpdate();
+            return;
         }
 
-        // Store children references
+        const countChanged = potentialChildren.length !== this.gridChildren.length;
+        const identityChanged = countChanged
+            || potentialChildren.some((child, index) => child !== this.gridChildren[index]);
         this.gridChildren = potentialChildren;
 
-        // Load persisted sizes once if available
-        if (!this.settingsLoaded) {
-            this.settingsLoaded = true;
-            const persisted = await this.getDialogSetting();
-            if (persisted && Array.isArray(persisted.sizes) && persisted.sizes.length === this.gridChildren.length) {
-                this.gridSizes = persisted.sizes;
-                this.requestUpdate();
-                return;
-            }
+        const persisted = await this.getDialogSetting();
+        if (generation !== this.layoutGeneration) {
+            return;
         }
 
-        // Use sizes attribute or equal distribution (only if not restored from settings)
-        if (this.sizes) {
-            this.gridSizes = this.sizes.split(',').map(s => s.trim());
-        } else {
-            const equalSize = `${100 / this.gridChildren.length}%`;
-            this.gridSizes = this.gridChildren.map(() => equalSize);
+        const restoredSizes = this.resolvePersistedSizes(persisted, this.gridChildren.length);
+        if (restoredSizes) {
+            const sizesChanged = restoredSizes.join('|') !== this.gridSizes.join('|');
+            this.gridSizes = restoredSizes;
+            if (identityChanged || sizesChanged) {
+                this.childStylesApplied = false;
+            }
+            this.requestUpdate();
+            return;
         }
 
+        const nextSizes = this.resolveGridSizes(this.gridChildren.length);
+        const sizesChanged = nextSizes.join('|') !== this.gridSizes.join('|');
+        this.gridSizes = nextSizes;
+
+        if (identityChanged || sizesChanged) {
+            this.childStylesApplied = false;
+        }
         this.requestUpdate();
     }
 
+    protected doInitUI() {
+        this.scheduleRefreshGridLayout();
+    }
+
     private async saveSizes() {
         if (this.gridSizes.length === 0) {
             return;
         }
 
+        const persisted = await this.getDialogSetting();
+        const existingByCount = persisted && typeof persisted === 'object'
+            ? (persisted as { sizesByCount?: Record<string, string[]> }).sizesByCount ?? {}
+            : {};
+
         await this.setDialogSetting({
             sizes: this.gridSizes,
-            orientation: this.orientation
+            sizesByCount: {
+                ...existingByCount,
+                [String(this.gridSizes.length)]: this.gridSizes,
+            },
+            orientation: this.orientation,
         });
     }
 
     updated(changedProperties: Map<string, any>) {
         super.updated(changedProperties);
-        
+
+        if (changedProperties.has('sizes')) {
+            this.scheduleRefreshGridLayout();
+        }
+
         // Only apply child styles once when children are first loaded
         // This prevents interfering with nested resizable grids during resize operations
-        if (changedProperties.has('gridChildren') && !this.childStylesApplied && this.gridChildren.length > 0) {
+        if (!this.childStylesApplied && this.gridChildren.length > 0) {
             this.childStylesApplied = true;
-            
+
             /**
              * Direct style manipulation is intentionally used here.
-             * 
+             *
              * Reasoning:
              * - Grid positioning (gridColumn/gridRow) must be computed dynamically based on
              *   the number of children and orientation at runtime
@@ -149,16 +224,9 @@ export class DocksResizableGrid extends DocksElement {
              *   (e.g., child at index 0 → column 1, index 1 → column 3, etc.)
              * - This is a layout container whose primary job is to programmatically position
              *   its children within a CSS grid system
+             * - Nested resizable grids manage their own display mode and must not receive flex
              */
-            this.gridChildren.forEach((child, index) => {
-                child.style.overflow = 'hidden';
-                child.style.height = '100%';
-                child.style.width = '100%';
-                child.style.gridColumn = this.orientation === 'horizontal' ? `${index * 2 + 1}` : '1';
-                child.style.gridRow = this.orientation === 'vertical' ? `${index * 2 + 1}` : '1';
-                child.style.display = 'flex';
-                child.style.flexDirection = 'column';
-            });
+            this.applyChildLayoutStyles();
         }
     }
 

package/src/parts/tabs.ts

@@ -45,6 +45,14 @@ export class DocksTabs extends DocksContainer {
     @property({ type: Boolean, reflect: true, attribute: 'hide-tabs' })
     hideTabs: boolean = false;
 
+    /** Size to tab content instead of filling the parent height (e.g. About dialog). */
+    @property({ type: Boolean, reflect: true, attribute: 'fit-content' })
+    fitContent: boolean = false;
+
+    /** Fill a fixed-height parent; tab body scrolls instead of resizing the container. */
+    @property({ type: Boolean, reflect: true, attribute: 'fill-height' })
+    fillHeight: boolean = false;
+
     /** Tab and nav-toolbar control sizing (`s` | `m` | `l`). */
     @property({ reflect: true, attribute: 'item-size' })
     itemSize: 's' | 'm' | 'l' = 'm';
@@ -129,6 +137,12 @@ export class DocksTabs extends DocksContainer {
         return this.tabGroup.value.getAttribute("active");
     }
 
+    public getTabPart(tabName: string): DocksPart | null {
+        const tabPanel = this.getTabPanel(tabName);
+        if (!tabPanel) return null;
+        return this.getPartFromPanel(tabPanel);
+    }
+
     open(contribution: TabContribution): void {
         const existing = this.contributions.find(c => c.name === contribution.name);
         if (existing) {
@@ -472,6 +486,95 @@ export class DocksTabs extends DocksContainer {
             width: 100%;
         }
 
+        :host([fit-content]) {
+            display: flex;
+            flex-direction: column;
+            height: auto;
+            max-height: 100%;
+            min-height: 0;
+        }
+
+        :host([fit-content]) wa-tab-group {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+            height: auto;
+            max-height: 100%;
+        }
+
+        :host([fit-content]) wa-tab-group::part(base) {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+            max-height: 100%;
+            height: auto;
+        }
+
+        :host([fit-content]) wa-tab-group::part(body) {
+            flex: 1 1 auto;
+            min-height: 0;
+            height: auto;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        :host([fit-content]) wa-tab-panel[active] {
+            display: block;
+            height: auto;
+            overflow: visible;
+        }
+
+        :host([fit-content]) wa-tab-panel > * {
+            height: auto;
+            min-height: 0;
+        }
+
+        :host([fill-height]) {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            min-height: 0;
+            max-height: 100%;
+        }
+
+        :host([fill-height]) wa-tab-group {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+            height: 100%;
+            max-height: 100%;
+        }
+
+        :host([fill-height]) wa-tab-group::part(base) {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+            max-height: 100%;
+            height: 100%;
+        }
+
+        :host([fill-height]) wa-tab-group::part(body) {
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        :host([fill-height]) wa-tab-panel[active] {
+            display: block;
+            height: auto;
+            overflow: visible;
+        }
+
+        :host([fill-height]) wa-tab-panel > * {
+            height: auto;
+            min-height: 0;
+        }
+
         wa-tab-group {
             height: 100%;
             width: 100%;