@eclipse-docks/core 0.7.126 → 0.7.130

package/src/components/command.ts

@@ -6,15 +6,11 @@ import { keyBindingManager } from '../core/keybindings'
 import {
     contributionRegistry,
     Contribution,
-    CommandContribution,
-    HTMLContribution,
     ContributionChangeEvent,
     TOPIC_CONTRIBUTEIONS_CHANGED,
-    getContributionDisabled,
-    getContributionVisible,
 } from '../core/contributionregistry'
 import { subscribe } from '../core/events'
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+import { renderDropdownItem, renderDropdownContribution, handleDropdownWaSelect } from '../core/dropdown-item'
 
 @customElement('docks-command')
 export class DocksCommand extends DocksWidget {
@@ -60,47 +56,32 @@ export class DocksCommand extends DocksWidget {
     @state()
     private dropdownContributions: Contribution[] = []
 
-    private closeDropdown(dropdown: { open?: boolean } | null | undefined) {
-        if (dropdown && dropdown.open !== undefined) {
-            dropdown.open = false
-        }
-    }
-
-    private closeParentDropdown() {
-        this.closeDropdown(this.closest('wa-dropdown') as { open?: boolean } | null)
+    private handleSelect(event: CustomEvent) {
+        handleDropdownWaSelect(event);
     }
 
-    private handleClick(event?: Event) {
-        if (this.disabled) return
-
-        if (event) {
-            event.stopPropagation()
-        }
-
-        this.closeParentDropdown()
-
-        if (this.action) {
-            this.action(event)
-            return
-        }
-
-        if (this.cmd) {
-            void this.executeCommand(this.cmd, this.params);
-        }
+    private getKeybinding(): string | null {
+        if (!this.cmd || this.action) return null
+        const keybindings = keyBindingManager.getKeyBindingsForCommand(this.cmd)
+        return keybindings.length > 0 ? keybindings[0] : null
     }
 
-    private handleSelect(event: CustomEvent) {
-        this.closeDropdown(event.target as { open?: boolean })
+    private hasLightDomContent(): boolean {
+        return Array.from(this.childNodes).some((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return (node.textContent?.trim().length ?? 0) > 0
+            }
+            return node.nodeType === Node.ELEMENT_NODE
+        })
     }
 
-    private isInDropdown(): boolean {
-        return !!this.closest('wa-dropdown, wa-dropdown-menu')
+    private isIconOnlyDropdownTrigger(): boolean {
+        return !this.label && !this.hasLightDomContent()
     }
 
-    private getKeybinding(): string | null {
-        if (!this.cmd || this.action) return null
-        const keybindings = keyBindingManager.getKeyBindingsForCommand(this.cmd)
-        return keybindings.length > 0 ? keybindings[0] : null
+    private renderDropdownTriggerIcon(iconSlot: 'start' | undefined) {
+        if (!this.icon) return nothing
+        return icon(this.icon, { label: this.title, slot: iconSlot })
     }
 
     protected doBeforeUI() {
@@ -122,66 +103,29 @@ export class DocksCommand extends DocksWidget {
         }
     }
 
-    private renderContribution(contribution: Contribution, slot?: string) {
-        if ('command' in contribution) {
-            const commandContribution = contribution as CommandContribution
-            if (!getContributionVisible(commandContribution)) {
-                return nothing
-            }
-            const disabled = getContributionDisabled(commandContribution)
-            return html`
-                <docks-command 
-                    slot=${slot ?? nothing}
-                    cmd="${commandContribution.command}"
-                    icon="${commandContribution.icon || ''}"
-                    .params=${commandContribution.params || {}}
-                    ?disabled="${disabled}">
-                    ${commandContribution.label}
-                </docks-command>
-            `
+    private handleToolbarClick(event?: Event) {
+        if (this.disabled) return
+
+        if (event) {
+            event.stopPropagation()
         }
-        
-        if ('component' in contribution) {
-            const htmlContribution = contribution as HTMLContribution
-            const contents = htmlContribution.component
-            if (contents instanceof Function) {
-                return contents()
-            }
-            return unsafeHTML(contents)
+
+        if (this.action) {
+            this.action(event)
+            return
+        }
+
+        if (this.cmd) {
+            void this.executeCommand(this.cmd, this.params);
         }
-        
-        return nothing
     }
 
     render() {
         const keybinding = this.getKeybinding()
 
-        // Nested dropdown menu item (e.g. context menu "Create new…").
-        // docks-command renders the submenu; docks-contextmenu closes sibling
-        // submenus across shadow boundaries when one opens.
-        if (this.isInDropdown() && this.dropdown) {
-            return html`
-                <wa-dropdown-item ?disabled=${this.disabled}>
-                    ${icon(this.icon, { label: this.title, slot: 'icon' })}
-                    <slot></slot>
-                    ${this.dropdownContributions.map(c => this.renderContribution(c, 'submenu'))}
-                </wa-dropdown-item>
-            `
-        }
-
-        if (this.isInDropdown()) {
-            return html`
-                <wa-dropdown-item 
-                    ?disabled=${this.disabled}
-                    @click=${(e: Event) => this.handleClick(e)}>
-                    ${icon(this.icon, { label: this.title, slot: 'icon' })}
-                    <slot></slot>
-                    ${keybinding ? html`<span class="keybinding">${keybinding}</span>` : ''}
-                </wa-dropdown-item>
-            `
-        }
-
         if (this.dropdown) {
+            const iconOnlyTrigger = this.isIconOnlyDropdownTrigger()
+            const iconSlot = iconOnlyTrigger ? undefined : 'start'
             return html`
                 <wa-dropdown 
                     placement=${this.placement}
@@ -194,8 +138,8 @@ export class DocksCommand extends DocksWidget {
                         ?disabled=${this.disabled}
                         ?with-caret=${this.withCaret}
                         title=${keybinding ? `${this.title} (${keybinding})` : this.title}>
-                        ${icon(this.icon, { label: this.title, slot: 'start' })}
-                        <slot></slot>
+                        ${this.renderDropdownTriggerIcon(iconSlot)}
+                        ${iconOnlyTrigger ? nothing : html`<slot></slot>`}
                         ${this.label ? this.title : nothing}
                     </wa-button>
                     
@@ -205,18 +149,17 @@ export class DocksCommand extends DocksWidget {
                         </h6>
                     ` : nothing}
                     
-                    ${this.dropdownContributions.map(c => this.renderContribution(c))}
+                    ${this.dropdownContributions.map(c => renderDropdownContribution(c))}
                     
                     ${this.cmd ? html`
                         <wa-divider></wa-divider>
-                        <docks-command 
-                            cmd="${this.cmd}"
-                            icon="${this.icon || ''}"
-                            .params=${this.params}
-                            ?disabled=${this.disabled}>
-                            <slot></slot>
-                            ${this.title}
-                        </docks-command>
+                        ${renderDropdownItem({
+                            cmd: this.cmd,
+                            icon: this.icon,
+                            label: this.title,
+                            params: this.params,
+                            disabled: this.disabled,
+                        })}
                     ` : nothing}
                 </wa-dropdown>
             `
@@ -229,7 +172,7 @@ export class DocksCommand extends DocksWidget {
                 size=${this.size}
                 ?disabled=${this.disabled}
                 title=${keybinding ? `${this.title} (${keybinding})` : this.title}
-                @click=${(e: Event) => this.handleClick(e)}>
+                @click=${(e: Event) => this.handleToolbarClick(e)}>
                 ${icon(this.icon, { label: this.title, slot: 'start' })}
                 <slot></slot>
             </wa-button>
@@ -240,22 +183,6 @@ export class DocksCommand extends DocksWidget {
         :host {
             display: inline-block;
         }
-
-        .keybinding {
-            margin-left: auto;
-            padding: 2px 6px;
-            background: var(--wa-color-neutral-15);
-            border: 1px solid var(--wa-color-neutral-25);
-            border-radius: 3px;
-            font-size: 10px;
-            font-family: monospace;
-            opacity: 0.7;
-        }
-
-        :host-context(.wa-light) .keybinding {
-            background: var(--wa-color-neutral-85);
-            border: 1px solid var(--wa-color-neutral-75);
-        }
     `
 }
 
@@ -264,4 +191,3 @@ declare global {
         'docks-command': DocksCommand
     }
 }
-

package/src/components/extensions.ts

@@ -225,7 +225,7 @@ export class DocksExtensions extends DocksPart {
                 await extensionRegistry.loadExtensionFromUrl(this.registerExtensionData.url!, extension.id);
                 
                 toastInfo(`Extension ${extension.name} registered successfully`);
-                this.showRegisterDialog = false;
+                this.closeRegisterDialog();
                 this.registerExtensionData = {};
                 this.requestUpdate();
             });
@@ -234,12 +234,29 @@ export class DocksExtensions extends DocksPart {
         }
     }
 
-    private cancelRegisterExtension() {
+    private closeRegisterDialog() {
+        const dialog = this.renderRoot.querySelector('wa-dialog') as (HTMLElement & { open?: boolean }) | null;
+        if (dialog && dialog.open !== false) {
+            dialog.open = false;
+            return;
+        }
+        this.finishRegisterDialogClose();
+    }
+
+    private handleRegisterDialogAfterHide = () => {
+        this.finishRegisterDialogClose();
+    };
+
+    private finishRegisterDialogClose() {
         this.showRegisterDialog = false;
         this.registerExtensionData = {};
         this.requestUpdate();
     }
 
+    private cancelRegisterExtension() {
+        this.closeRegisterDialog();
+    }
+
     protected renderToolbar() {
         return html`
             <wa-input
@@ -272,7 +289,7 @@ export class DocksExtensions extends DocksPart {
                 <wa-dialog 
                     label="Register Extension"
                     open
-                    @wa-request-close=${() => this.cancelRegisterExtension()}
+                    @wa-after-hide=${this.handleRegisterDialogAfterHide}
                     style="--wa-dialog-width: 500px;">
                     <div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
                         <wa-input

package/src/components/filebrowser.ts

@@ -22,6 +22,7 @@ import { confirmDialog, infoDialog } from "../dialogs";
 import { editorRegistry } from "../core/editorregistry";
 import { TOPIC_CONTRIBUTEIONS_CHANGED, type ContributionChangeEvent } from '../core/contributionregistry';
 import { icon } from '../core/icon-utils';
+import { renderDropdownItem, renderDropdownSubmenu } from '../core/dropdown-item';
 import { i18n } from '../core/i18n';
 import { createLogger } from '../core/logger';
 
@@ -95,7 +96,6 @@ export class DocksFileBrowser extends DocksPart {
     protected renderToolbar() {
         return html`
             <docks-command icon="folder-open" title="${t.CONNECT_WORKSPACE}" dropdown="filebrowser.connections"></docks-command>
-            <docks-command cmd="refresh_resource" icon="repeat" title="${t.REFRESH_RESOURCE}"></docks-command>
             <docks-command icon="docks file-plus" title="${t.CREATE_NEW}" dropdown="filebrowser.create"></docks-command>
         `;
     }
@@ -106,23 +106,26 @@ export class DocksFileBrowser extends DocksPart {
         const editorOptions = file ? editorRegistry.getEditorOptionsForInput(file) : []
         const hasOpenWith = editorOptions.length > 0
         return html`
-            <docks-command cmd="open_editor" icon="folder-open">${t.OPEN}</docks-command>
+            ${renderDropdownItem({ cmd: 'open_editor', icon: 'folder-open', label: t.OPEN })}
             ${hasOpenWith ? html`
                 <wa-dropdown-item>
                     ${icon('folder-open', { slot: 'icon' })}
                     ${t.OPEN_WITH}
-                    ${editorOptions.map(opt => html`
-                        <docks-command
-                            slot="submenu"
-                            cmd="open_editor"
-                            icon="${opt.icon ?? 'file'}"
-                            .params=${{ path: file!.getWorkspacePath(), editorId: opt.editorId }}>
-                            ${opt.title}
-                        </docks-command>
-                    `)}
+                    ${editorOptions.map(opt => renderDropdownItem({
+                        cmd: 'open_editor',
+                        icon: opt.icon ?? 'file',
+                        label: opt.title,
+                        params: { path: file!.getWorkspacePath(), editorId: opt.editorId },
+                        slot: 'submenu',
+                    }))}
                 </wa-dropdown-item>
             ` : nothing}
-            <docks-command icon="docks file-plus" dropdown="filebrowser.create">${t.CREATE_NEW}</docks-command>
+            ${renderDropdownSubmenu({
+                icon: 'docks file-plus',
+                label: t.CREATE_NEW,
+                contributionTarget: 'filebrowser.create',
+            })}
+            ${renderDropdownItem({ cmd: 'refresh_resource', icon: 'repeat', label: t.REFRESH_RESOURCE })}
         `;
     }
 

package/src/components/language-selector.ts

@@ -58,7 +58,6 @@ export const showLanguageSelectorDialog = async (): Promise<void> => {
                 label="Select Language" 
                 open 
                 light-dismiss
-                @wa-request-close=${handleClose}
                 @wa-after-hide=${handleAfterHide}>
                 <style>
                     .language-list {

package/src/components/layout-switcher.ts

@@ -1,47 +1,60 @@
 import { html, css } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { DocksElement } from "../parts/element";
-import { appLoaderService } from "../core/apploader";
 import { icon } from '../core/icon-utils';
+import {
+    DEFAULT_LAYOUT_PANEL_VISIBILITY,
+    findStandardLayout,
+    LAYOUT_PANEL_OPTIONS,
+    type LayoutPanelVisibility,
+} from "../core/layout-panels";
 
 @customElement('docks-layout-switcher')
 export class DocksLayoutSwitcher extends DocksElement {
     @state()
-    private currentLayoutId = 'standard';
+    private panels: LayoutPanelVisibility = { ...DEFAULT_LAYOUT_PANEL_VISIBILITY };
 
     protected doBeforeUI() {
-        this.currentLayoutId = appLoaderService.getCurrentLayoutId();
-        const updateLayout = () => {
-            this.currentLayoutId = appLoaderService.getCurrentLayoutId();
+        const syncPanels = () => {
+            const layout = findStandardLayout();
+            this.panels = layout?.getPanelVisibility() ?? { ...DEFAULT_LAYOUT_PANEL_VISIBILITY };
             this.requestUpdate();
         };
-        window.addEventListener('app-loaded', updateLayout);
-        window.addEventListener('layout-changed', updateLayout);
+        syncPanels();
+        window.addEventListener('app-loaded', syncPanels);
+        window.addEventListener('layout-panels-changed', syncPanels);
         return () => {
-            window.removeEventListener('app-loaded', updateLayout);
-            window.removeEventListener('layout-changed', updateLayout);
+            window.removeEventListener('app-loaded', syncPanels);
+            window.removeEventListener('layout-panels-changed', syncPanels);
         };
     }
 
     private async handleSelect(e: CustomEvent) {
-        const layoutId = e.detail?.item?.value;
-        if (!layoutId || layoutId === this.currentLayoutId) return;
+        const layout = findStandardLayout();
+        if (!layout) {
+            return;
+        }
+
+        const item = e.detail?.item as (HTMLElement & { value?: string; checked?: boolean }) | undefined;
+        const key = item?.value as keyof LayoutPanelVisibility | undefined;
+        if (!item || !key) {
+            return;
+        }
         try {
-            await appLoaderService.setPreferredLayoutId(layoutId);
+            await layout.setPanelVisibility({
+                [key]: item.checked ?? false,
+            });
+            this.panels = layout.getPanelVisibility();
         } catch (err) {
-            console.error('Failed to switch layout:', err);
+            console.error('Failed to update layout panels:', err);
         }
     }
 
     protected render() {
-        const layouts = appLoaderService.getRegisteredLayouts();
-        if (layouts.length <= 1) {
+        if (!findStandardLayout()) {
             return html``;
         }
 
-        const currentLayout = layouts.find((l) => l.id === this.currentLayoutId);
-        const layoutName = currentLayout?.name ?? this.currentLayoutId;
-
         return html`
             <wa-dropdown
                 placement="bottom-end"
@@ -53,17 +66,17 @@ export class DocksLayoutSwitcher extends DocksElement {
                     appearance="plain"
                     size="s"
                     with-caret
-                    title="Switch layout (current: ${layoutName})">
-                    <wa-icon name="table-cells" label="Layout"></wa-icon>
+                    title="Show or hide layout panels">
+                    ${icon('docks layout-standard-full', { label: 'Layout panels' })}
                 </wa-button>
-                ${layouts.map(
-                    (layout) => html`
+                ${LAYOUT_PANEL_OPTIONS.map(
+                    (panel) => html`
                         <wa-dropdown-item
-                            value="${layout.id}"
+                            value="${panel.key}"
                             type="checkbox"
-                            ?checked=${layout.id === this.currentLayoutId}>
-                            ${icon(layout.icon, { label: layout.name, slot: 'icon' })}
-                            ${layout.name}
+                            ?checked=${this.panels[panel.key]}>
+                            ${icon(panel.icon, { label: panel.label, slot: 'icon' })}
+                            ${panel.label}
                         </wa-dropdown-item>
                     `
                 )}

package/src/components/npm-packages.ts

@@ -5,6 +5,8 @@ import { appLoaderService } from "../core/apploader";
 
 @customElement("docks-npm-packages")
 export class DocksNpmPackages extends DocksPart {
+    protected scrollMode: "scroller" | "native" | "none" = "none";
+
     static styles = [
         css`
             .packages-panel {

package/src/components/release-history.ts

@@ -40,6 +40,12 @@ function isNewerThan(releaseTag: string, currentVersion: string): boolean {
     return false;
 }
 
+export type ReleaseHistoryNavState = {
+    hasMultiple: boolean;
+    atOldest: boolean;
+    atNewest: boolean;
+};
+
 @customElement("docks-release-history")
 export class DocksReleaseHistory extends DocksPart {
     protected scrollMode: "scroller" | "native" | "none" = "none";
@@ -59,19 +65,12 @@ export class DocksReleaseHistory extends DocksPart {
                 display: flex;
                 flex-direction: column;
                 gap: 0.5rem;
-                height: 100%;
                 padding: 0.75rem;
                 box-sizing: border-box;
             }
 
-            .release-panel wa-scroller {
-                flex: 1;
-                min-height: 0;
-            }
-
-            .release-nav {
-                display: flex;
-                gap: 0.5rem;
+            .release-body {
+                white-space: normal;
             }
         `,
     ];
@@ -88,20 +87,35 @@ export class DocksReleaseHistory extends DocksPart {
             semverEqual(release.tag_name, this.appVersion),
         );
         this.currentReleaseIndex = currentIndex >= 0 ? currentIndex : 0;
+        this.notifyChanged();
     }
 
-    private showOlder() {
+    public getNavState(): ReleaseHistoryNavState {
+        return {
+            hasMultiple: this.releases.length > 1,
+            atOldest: this.currentReleaseIndex >= this.releases.length - 1,
+            atNewest: this.currentReleaseIndex <= 0,
+        };
+    }
+
+    public showOlder() {
         if (this.currentReleaseIndex < this.releases.length - 1) {
             this.currentReleaseIndex += 1;
+            this.notifyChanged();
         }
     }
 
-    private showNewer() {
+    public showNewer() {
         if (this.currentReleaseIndex > 0) {
             this.currentReleaseIndex -= 1;
+            this.notifyChanged();
         }
     }
 
+    private notifyChanged() {
+        this.dispatchEvent(new CustomEvent("release-history-changed", { bubbles: true, composed: true }));
+    }
+
     protected renderContent() {
         const release = this.releases[this.currentReleaseIndex];
         if (!release) {
@@ -110,8 +124,6 @@ export class DocksReleaseHistory extends DocksPart {
 
         const isCurrent = semverEqual(release.tag_name, this.appVersion);
         const showUpdateHint = !isCurrent && isNewerThan(release.tag_name, this.appVersion);
-        const atOldest = this.currentReleaseIndex === this.releases.length - 1;
-        const atNewest = this.currentReleaseIndex === 0;
         const bodyHtml = release.body ? parseMarkdownHtml(release.body) : "";
 
         return html`
@@ -132,36 +144,13 @@ export class DocksReleaseHistory extends DocksPart {
                     ? html`
                         <wa-callout variant="warning">
                             <wa-icon slot="icon" name="triangle-exclamation"></wa-icon>
-                            Update available — reload the page to update
+                            A newer release is available than the version you are running.
+                            Use <strong>Update Available</strong> in the toolbar when it appears.
                         </wa-callout>
                     `
                     : ""}
-                <wa-scroller orientation="vertical">
-                    ${bodyHtml
-                        ? html`<div style="white-space: normal;">${unsafeHTML(bodyHtml)}</div>`
-                        : ""}
-                </wa-scroller>
-                ${this.releases.length > 1
-                    ? html`
-                        <div class="release-nav">
-                            <wa-button-group>
-                                <wa-button
-                                    variant="default"
-                                    ?disabled=${atOldest}
-                                    @click=${() => this.showOlder()}
-                                >
-                                    ← Previous
-                                </wa-button>
-                                <wa-button
-                                    variant="default"
-                                    ?disabled=${atNewest}
-                                    @click=${() => this.showNewer()}
-                                >
-                                    Next →
-                                </wa-button>
-                            </wa-button-group>
-                        </div>
-                    `
+                ${bodyHtml
+                    ? html`<div class="release-body">${unsafeHTML(bodyHtml)}</div>`
                     : ""}
             </div>
         `;

package/src/components/tasks.ts

@@ -76,7 +76,6 @@ function updateProgressDialog(forceOpen = false) {
             open
             light-dismiss
             style="--width: 600px;"
-            @wa-request-close=${handleClose}
             @wa-after-hide=${handleAfterHide}
         >
             <style>

package/src/contributions/default-layout-contributions.ts

@@ -2,46 +2,10 @@ import "../layouts/standard-layout";
 import { contributionRegistry } from "../core/contributionregistry";
 import { SYSTEM_LAYOUTS } from "../core/contribution-targets";
 
-const standardLayouts: Array<{
-    id: string;
-    name: string;
-    label: string;
-    icon?: string;
-    component: string | { tag: string; attributes?: Record<string, string> };
-}> = [
-    {
-        id: "standard",
-        name: "Standard",
-        label: "Standard",
-        icon: "docks layout-standard",
-        component: "docks-standard-layout",
-    },
-    {
-        id: "standard-bottom-panel",
-        name: "Standard (bottom panel)",
-        label: "Standard (bottom panel)",
-        icon: "docks layout-standard-bottom-panel",
-        component: { tag: "docks-standard-layout", attributes: { "show-bottom-panel": "true" } },
-    },
-    {
-        id: "standard-bottom-sidebar",
-        name: "Standard (bottom sidebar)",
-        label: "Standard (bottom sidebar)",
-        icon: "docks layout-standard-bottom-sidebar",
-        component: { tag: "docks-standard-layout", attributes: { "show-bottom-sidebar": "true" } },
-    },
-    {
-        id: "standard-full",
-        name: "Standard (panel + sidebar)",
-        label: "Standard (panel + sidebar)",
-        icon: "docks layout-standard-full",
-        component: {
-            tag: "docks-standard-layout",
-            attributes: { "show-bottom-panel": "true", "show-bottom-sidebar": "true" },
-        },
-    },
-];
-
-for (const layout of standardLayouts) {
-    contributionRegistry.registerContribution(SYSTEM_LAYOUTS, layout);
-}
+contributionRegistry.registerContribution(SYSTEM_LAYOUTS, {
+    id: "standard",
+    name: "Standard",
+    label: "Standard",
+    icon: "docks layout-standard-full",
+    component: "docks-standard-layout",
+});