@theia/plugin-ext 1.77.0-next.7 → 1.77.0-next.71

package/src/main/browser/view/plugin-view-registry.spec.ts

@@ -23,9 +23,10 @@ import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/front
 FrontendApplicationConfigProvider.set({});
 
 import { expect } from 'chai';
-import { Disposable } from '@theia/core/lib/common';
+import { Command, Disposable } from '@theia/core/lib/common';
 import { PluginViewRegistry, ViewContainerInfo, PLUGIN_VIEW_DATA_FACTORY_ID } from './plugin-view-registry';
-import type { ViewWelcome } from '../../../common';
+import { PluginViewType, ViewWelcome } from '../../../common';
+import { BaseWidget, Panel, Widget } from '@theia/core/lib/browser/widgets/widget';
 
 disableJSDOM();
 
@@ -54,7 +55,6 @@ describe('PluginViewRegistry - view menu labels', () => {
     let registry: PluginViewRegistry;
     let menus: RecordingMenuModelRegistry;
 
-    const toggleCommandId = (id: string): string => `plugin.view-container.${id}.toggle`;
     const internals = (): {
         viewContainers: Map<string, ViewContainerInfo>;
         registerViewMenuAction(containerId: string, label: string): Disposable;
@@ -76,21 +76,21 @@ describe('PluginViewRegistry - view menu labels', () => {
 
     it('uses the plain label for a single container', () => {
         registerContainer('a', 'Claude Code', 'left');
-        expect(menus.actions.get(toggleCommandId('a'))?.label).to.equal('Claude Code');
+        expect(menus.actions.get('a')?.label).to.equal('Claude Code');
     });
 
     it('leaves distinct labels unsuffixed', () => {
         registerContainer('a', 'Explorer', 'left');
         registerContainer('b', 'Claude Code', 'right');
-        expect(menus.actions.get(toggleCommandId('a'))?.label).to.equal('Explorer');
-        expect(menus.actions.get(toggleCommandId('b'))?.label).to.equal('Claude Code');
+        expect(menus.actions.get('a')?.label).to.equal('Explorer');
+        expect(menus.actions.get('b')?.label).to.equal('Claude Code');
     });
 
     it('suffixes the location when two containers share a label', () => {
         registerContainer('a', 'Claude Code', 'left');
         registerContainer('b', 'Claude Code', 'right');
-        expect(menus.actions.get(toggleCommandId('a'))?.label).to.equal('Claude Code (Side Bar)');
-        expect(menus.actions.get(toggleCommandId('b'))?.label).to.equal('Claude Code (Secondary Side Bar)');
+        expect(menus.actions.get('a')?.label).to.equal('Claude Code (Side Bar)');
+        expect(menus.actions.get('b')?.label).to.equal('Claude Code (Secondary Side Bar)');
     });
 
     it('drops the suffix from the remaining container once the duplicate is removed', () => {
@@ -99,12 +99,14 @@ describe('PluginViewRegistry - view menu labels', () => {
 
         disposeB.dispose();
 
-        expect(menus.actions.get(toggleCommandId('a'))?.label).to.equal('Claude Code');
-        expect(menus.actions.has(toggleCommandId('b'))).to.equal(false);
+        expect(menus.actions.get('a')?.label).to.equal('Claude Code');
+        expect(menus.actions.has('b')).to.equal(false);
     });
 
 });
 
+const welcome = (view: string): ViewWelcome => ({ view, content: `[Hi](command:${view}.hi)`, order: 0 });
+
 describe('PluginViewRegistry - welcome-only views', () => {
 
     interface FakeTreeViewWidget {
@@ -117,8 +119,6 @@ describe('PluginViewRegistry - welcome-only views', () => {
     let createdWidget: FakeTreeViewWidget;
     let getOrCreateCalls: Array<{ factoryId: string; options: unknown }>;
 
-    const welcome = (view: string): ViewWelcome => ({ view, content: `[Hi](command:${view}.hi)`, order: 0 });
-
     const internals = (): {
         views: Map<string, [string, { type?: unknown }]>;
         viewDataProviders: Map<string, unknown>;
@@ -171,3 +171,268 @@ describe('PluginViewRegistry - welcome-only views', () => {
     });
 
 });
+
+describe('PluginViewRegistry - welcome-only views on expand', () => {
+
+    const noop = () => Disposable.NULL;
+
+    let registry: PluginViewRegistry;
+    let view: { widgets: unknown[] };
+    let prepared: unknown[];
+
+    const internals = (): {
+        views: Map<string, [string, { type?: unknown }]>;
+        viewDataProviders: Map<string, unknown>;
+        viewsWelcome: Map<string, ViewWelcome[]>;
+        onDidExpandViewEmitter: { fire(viewId: string): void };
+        init(): void;
+    } => registry as unknown as {
+        views: Map<string, [string, { type?: unknown }]>;
+        viewDataProviders: Map<string, unknown>;
+        viewsWelcome: Map<string, ViewWelcome[]>;
+        onDidExpandViewEmitter: { fire(viewId: string): void };
+        init(): void;
+    };
+
+    async function expand(viewId: string): Promise<void> {
+        internals().onDidExpandViewEmitter.fire(viewId);
+        await new Promise(resolve => setTimeout(resolve));
+    }
+
+    beforeEach(() => {
+        registry = new PluginViewRegistry();
+        view = { widgets: [] };
+        prepared = [];
+        Object.assign(registry, {
+            shell: { activeWidget: undefined, onDidChangeActiveWidget: noop, initialized: new Promise(() => { }) },
+            viewContextKeys: { focusedView: { reset: () => { } } },
+            contextKeyService: { onDidChange: noop },
+            widgetManager: { onWillCreateWidget: noop, onDidCreateWidget: noop, getWidget: async () => view },
+            prepareView: async (widget: unknown) => { prepared.push(widget); }
+        });
+        internals().init();
+        internals().views.set('actions', ['container', {}]);
+        internals().viewsWelcome.set('actions', [welcome('actions')]);
+    });
+
+    it('prepares an empty welcome-only view when it is expanded, as after restoring a saved layout', async () => {
+        await expand('actions');
+
+        expect(prepared).to.deep.equal([view]);
+    });
+
+    it('leaves a view with a data provider to the provider', async () => {
+        internals().viewDataProviders.set('actions', () => undefined);
+
+        await expand('actions');
+
+        expect(prepared).to.have.lengthOf(0);
+    });
+
+    it('leaves a view that already has content alone', async () => {
+        view.widgets.push({});
+
+        await expand('actions');
+
+        expect(prepared).to.have.lengthOf(0);
+    });
+
+    it('leaves a view without welcomes alone', async () => {
+        internals().viewsWelcome.delete('actions');
+
+        await expand('actions');
+
+        expect(prepared).to.have.lengthOf(0);
+    });
+
+    it('leaves a webview view alone', async () => {
+        internals().views.set('actions', ['container', { type: PluginViewType.Webview }]);
+
+        await expand('actions');
+
+        expect(prepared).to.have.lengthOf(0);
+    });
+
+});
+
+describe('PluginViewRegistry - prepareView', () => {
+
+    interface FakeViewWidget {
+        options: { viewId: string };
+        title: { label: string };
+        widgets: unknown[];
+        isDisposed: boolean;
+        addWidget(widget: unknown): void;
+    }
+
+    let registry: PluginViewRegistry;
+    let view: FakeViewWidget;
+    let dataWidget: { isDisposed: boolean; dispose(): void };
+
+    beforeEach(() => {
+        registry = new PluginViewRegistry();
+        view = {
+            options: { viewId: 'actions' },
+            title: { label: '' },
+            widgets: [],
+            isDisposed: false,
+            addWidget(widget: unknown): void {
+                this.widgets.push(widget);
+            }
+        };
+        dataWidget = { isDisposed: false, dispose: () => { } };
+        (registry as unknown as { views: Map<string, unknown> }).views.set('actions', ['container', { id: 'actions', name: 'Actions' }]);
+        (registry as unknown as { createViewDataWidget: unknown }).createViewDataWidget = async () => dataWidget;
+    });
+
+    const prepareView = (): Promise<void> => (registry as unknown as { prepareView(widget: FakeViewWidget): Promise<void> }).prepareView(view);
+
+    it('adds the created data widget to the view', async () => {
+        await prepareView();
+
+        expect(view.widgets).to.deep.equal([dataWidget]);
+    });
+
+    it('leaves the view empty when its data widget was disposed before it could be added', async () => {
+        dataWidget.isDisposed = true;
+
+        await prepareView();
+
+        expect(view.widgets).to.have.lengthOf(0);
+    });
+
+});
+
+describe('PluginViewRegistry - VS Code view commands', () => {
+
+    let registry: PluginViewRegistry;
+    let commands: Map<string, Command>;
+
+    const internals = (): {
+        doRegisterViewContainer(id: string, location: string, options: { label: string }): Disposable;
+    } => registry as unknown as {
+        doRegisterViewContainer(id: string, location: string, options: { label: string }): Disposable;
+    };
+
+    beforeEach(() => {
+        registry = new PluginViewRegistry();
+        commands = new Map();
+        (registry as unknown as { commands: unknown }).commands = {
+            registerCommand: (command: Command) => {
+                commands.set(command.id, command);
+                return Disposable.create(() => commands.delete(command.id));
+            }
+        };
+        (registry as unknown as { menus: unknown }).menus = new RecordingMenuModelRegistry();
+        (registry as unknown as { quickView: unknown }).quickView = { registerItem: () => Disposable.NULL };
+    });
+
+    it('registers the container id and the view focus and open commands once a view is added', () => {
+        const containerId = 'workbench.view.extension.sample';
+        internals().doRegisterViewContainer(containerId, 'left', { label: 'Sample' });
+        expect(commands.has(containerId)).to.equal(false);
+
+        const disposeView = registry.registerView('sample', { id: 'sample.view', name: 'Sample View' });
+
+        expect(commands.get(containerId)).to.include({ label: 'Toggle Sample', category: 'View' });
+        expect(commands.get('plugin.view-container.workbench.view.extension.sample.toggle')?.label).to.equal(undefined);
+        expect(commands.get('sample.view.focus')).to.include({ label: 'Focus on Sample View View', category: 'Sample' });
+        expect(commands.has('sample.view.open')).to.equal(true);
+
+        disposeView.dispose();
+        expect(commands.has('sample.view.focus')).to.equal(false);
+        expect(commands.has('sample.view.open')).to.equal(false);
+    });
+
+});
+
+describe('PluginViewRegistry - webview view resolution', () => {
+
+    class FakeWebviewWidget extends BaseWidget {
+        setContentOptions(): void { }
+    }
+
+    const viewId = 'test.webviewView';
+    let registry: PluginViewRegistry;
+    let webview: FakeWebviewWidget;
+    let resolveCount: number;
+    let disableDom: () => void;
+
+    const createWebviewView = (): Promise<unknown> =>
+        (registry as unknown as { createNewWebviewView(id: string): Promise<unknown> }).createNewWebviewView(viewId);
+    const registerResolver = (): Promise<Disposable> =>
+        registry.registerWebviewView(viewId, { resolve: async () => { resolveCount++; } });
+    const settle = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+    before(() => disableDom = enableJSDOM());
+    after(() => disableDom());
+
+    beforeEach(() => {
+        registry = new PluginViewRegistry();
+        webview = new FakeWebviewWidget();
+        resolveCount = 0;
+        (registry as unknown as { widgetManager: unknown }).widgetManager = { getOrCreateWidget: async () => webview };
+    });
+
+    afterEach(() => webview.dispose());
+
+    it('does not resolve a webview view that has not been shown', async () => {
+        await createWebviewView();
+        await registerResolver();
+        await settle();
+
+        expect(resolveCount).to.equal(0);
+    });
+
+    it('resolves a webview view once it is shown', async () => {
+        await createWebviewView();
+        await registerResolver();
+        await settle();
+
+        Widget.attach(webview, document.body);
+        await settle();
+
+        expect(resolveCount).to.equal(1);
+    });
+
+    it('resolves a webview view that is shown before its provider is registered', async () => {
+        await createWebviewView();
+        Widget.attach(webview, document.body);
+        await settle();
+
+        await registerResolver();
+        await settle();
+
+        expect(resolveCount).to.equal(1);
+    });
+
+    it('resolves a webview view in a hidden parent only once the parent is shown', async () => {
+        const parent = new Panel();
+        parent.hide();
+        parent.addWidget(webview);
+        Widget.attach(parent, document.body);
+        await createWebviewView();
+        await registerResolver();
+        await settle();
+        expect(resolveCount).to.equal(0);
+
+        parent.show();
+        await settle();
+        parent.hide();
+        parent.show();
+        await settle();
+
+        expect(resolveCount).to.equal(1);
+        parent.dispose();
+    });
+
+    it('does not resolve a webview view that is disposed before it is shown', async () => {
+        await createWebviewView();
+        webview.dispose();
+        await registerResolver();
+        await settle();
+
+        expect(resolveCount).to.equal(0);
+    });
+
+});

package/src/main/browser/view/plugin-view-registry.ts

@@ -160,6 +160,7 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
 
         this.updateFocusedView();
         this.shell.onDidChangeActiveWidget(() => this.updateFocusedView());
+        this.onDidExpandView(viewId => this.prepareWelcomeOnlyView(viewId).catch(e => this.logger.error(e)));
 
         this.widgetManager.onWillCreateWidget(({ factoryId, widget, waitUntil }) => {
             if (factoryId === EXPLORER_VIEW_CONTAINER_ID && widget instanceof ViewContainerWidget) {
@@ -347,15 +348,30 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
         return toDispose;
     }
 
+    /**
+     * Toggles the view container the same way as {@link AbstractViewContribution.toggleView}:
+     * collapses its panel if it is the visible tab, otherwise opens and activates it.
+     */
     protected async toggleViewContainer(id: string): Promise<void> {
-        let widget = await this.getPluginViewContainer(id);
-        if (widget && widget.isAttached) {
-            widget.dispose();
-        } else {
-            widget = await this.openViewContainer(id);
-            if (widget) {
-                this.shell.activateWidget(widget.id);
+        const existing = await this.getPluginViewContainer(id);
+        const tabBar = existing && this.shell.getTabBarFor(existing);
+        const area = existing && this.shell.getAreaFor(existing);
+        if (existing && tabBar && area && this.shell.isExpanded(area) && tabBar.currentTitle === existing.title) {
+            if (area === 'left' || area === 'right') {
+                await this.shell.collapsePanel(area);
+            } else if (area === 'bottom') {
+                // Don't collapse the bottom panel if it's currently split
+                if (this.shell.bottomAreaTabBars.length === 1) {
+                    await this.shell.collapsePanel('bottom');
+                }
+            } else {
+                existing.dispose();
             }
+            return;
+        }
+        const widget = await this.openViewContainer(id);
+        if (widget) {
+            await this.shell.activateWidget(widget.id);
         }
     }
 
@@ -369,18 +385,22 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
                 toDispose.push(Disposable.create(() => this.viewContainerClauseContexts.delete(id)));
             }
         }
-        const toggleCommandId = `plugin.view-container.${id}.toggle`;
         // Some plugins may register empty view containers.
         // We should not register commands for them immediately, as that leads to bad UX.
         // Instead, we register commands the first time we add a view to them.
         let activate = () => {
+            // Like VS Code, use the container's id, e.g. `workbench.view.extension.${id}`, as the command id
             toDispose.push(this.commands.registerCommand({
-                id: toggleCommandId,
+                id,
                 category: nls.localizeByDefault('View'),
                 label: nls.localizeByDefault('Toggle {0}', options.label)
             }, {
                 execute: () => this.toggleViewContainer(id)
             }));
+            // Kept for backward compatibility with keybindings that use the former command id
+            toDispose.push(this.commands.registerCommand({ id: `plugin.view-container.${id}.toggle` }, {
+                execute: () => this.toggleViewContainer(id)
+            }));
             toDispose.push(this.registerViewMenuAction(id, options.label));
             toDispose.push(this.quickView?.registerItem({
                 label: options.label,
@@ -486,7 +506,7 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
                 }
             }
             const disposable = this.menus.registerMenuAction(CommonMenus.VIEW_VIEWS, {
-                commandId: `plugin.view-container.${id}.toggle`,
+                commandId: id,
                 label: menuLabel,
                 when: containerInfo.when
             });
@@ -561,15 +581,24 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
             when: view.when,
             open: () => this.openView(view.id, { activate: true })
         }));
-        toDispose.push(this.commands.registerCommand({ id: `${view.id}.focus` }, {
-            execute: async () => { await this.openView(view.id, { activate: true }); }
+        toDispose.push(this.commands.registerCommand({
+            id: `${view.id}.focus`,
+            category: this.viewContainers.get(viewContainerId)?.options.label,
+            label: nls.localizeByDefault('Focus on {0} View', view.name)
+        }, {
+            execute: async (options?: { preserveFocus?: boolean }) => { await this.openView(view.id, this.toOpenViewOptions(options)); },
+            isVisible: () => this.isViewVisible(view.id)
         }));
         toDispose.push(this.commands.registerCommand({ id: `${view.id}.open` }, {
-            execute: async () => { await this.openView(view.id, { activate: true }); }
+            execute: async (options?: { preserveFocus?: boolean }) => { await this.openView(view.id, this.toOpenViewOptions(options)); }
         }));
         return toDispose;
     }
 
+    protected toOpenViewOptions(options?: { preserveFocus?: boolean }): { activate?: boolean, reveal?: boolean } {
+        return options?.preserveFocus ? { reveal: true } : { activate: true };
+    }
+
     async resolveWebviewView(viewId: string, webview: WebviewView, cancellation: CancellationToken): Promise<void> {
         const resolver = this.webviewViewResolvers.get(viewId);
         if (resolver) {
@@ -652,14 +681,24 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
             }
         };
 
-        const toDispose = this.onNewResolverRegistered(resolver => {
-            if (resolver.viewType === viewId) {
-                // Potentially re-activate if we have a new resolver
+        // Like VS Code, resolve a webview view only once it is visible: extensions start work in
+        // `resolveWebviewView`, and views that are hidden or never opened should not pay for it.
+        const resolveIfVisible = () => {
+            if (webview.isVisible) {
                 webviewView.resolve();
             }
-        });
+        };
+        const toDispose = new DisposableCollection(
+            this.onNewResolverRegistered(resolver => {
+                if (resolver.viewType === viewId) {
+                    // Potentially re-activate if we have a new resolver
+                    resolveIfVisible();
+                }
+            }),
+            webview.onDidChangeVisibility(resolveIfVisible)
+        );
 
-        webviewView.resolve();
+        resolveIfVisible();
         return webviewView;
     }
 
@@ -758,7 +797,8 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
         const currentDataWidget = widget.widgets[0];
         const webviewId = currentDataWidget instanceof WebviewWidget ? currentDataWidget.identifier?.id : undefined;
         const viewDataWidget = await this.createViewDataWidget(view.id, webviewId);
-        if (widget.isDisposed) {
+        // `onDidInitializeLayout` can dispose the data widget before it is added here.
+        if (widget.isDisposed || viewDataWidget?.isDisposed) {
             viewDataWidget?.dispose();
             return;
         }
@@ -1001,8 +1041,8 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
     }
 
     /**
-     * retrieve restored layout state from previous user session but close widgets
-     * widgets should be opened only when view data providers are registered
+     * Retrieves the restored state of the data widgets and disposes them: a view gets a new data widget
+     * once its data provider registers or, for a view with only welcome content, once it is expanded.
      */
     onDidInitializeLayout(): void {
         const widgets = this.widgetManager.getWidgets(PLUGIN_VIEW_DATA_FACTORY_ID);
@@ -1080,6 +1120,21 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
         return widget;
     }
 
+    /**
+     * Gives an expanded view that has `viewsWelcome` content but neither a data provider nor a
+     * content widget its welcome widget, which `onDidInitializeLayout` disposes when it was restored.
+     */
+    protected async prepareWelcomeOnlyView(viewId: string): Promise<void> {
+        if (this.views.get(viewId)?.[1]?.type === PluginViewType.Webview
+            || this.viewDataProviders.has(viewId) || !this.getViewWelcomes(viewId).length) {
+            return;
+        }
+        const view = await this.getView(viewId);
+        if (view && !view.widgets.length) {
+            await this.prepareView(view);
+        }
+    }
+
     protected async createViewWelcomeWidget(viewId: string): Promise<TreeViewWidget> {
         const widget = await this.widgetManager.getOrCreateWidget<TreeViewWidget>(PLUGIN_VIEW_DATA_FACTORY_ID, { id: viewId });
         if (!widget.model.root) {

package/src/main/browser/view/tree-view-widget.tsx

@@ -811,7 +811,7 @@ export class TreeViewWidget extends TreeViewWelcomeWidget {
         }
         const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_TAIL_CLASS, actionMenuNode.icon, ACTION_ITEM, 'theia-tree-view-inline-action'].join(' ');
         const tabIndex = tabbable ? 0 : undefined;
-        const titleString = actionMenuNode.label + (AcceleratorSource.is(actionMenuNode) ? actionMenuNode.getAccelerator(undefined).join('+') : '');
+        const titleString = actionMenuNode.label + (AcceleratorSource.is(actionMenuNode) ? actionMenuNode.getAccelerator(undefined, 'logical').join('+') : '');
 
         return <div key={index} className={className} title={titleString} tabIndex={tabIndex} onClick={e => {
             e.stopPropagation();

package/src/main/browser/webview/pre/main.js

@@ -34,6 +34,23 @@
 (function () {
     'use strict';
 
+    /**
+     * @param {KeyboardEvent} event
+     */
+    const toNormalizedKeyboardInput = event => ({
+        key: event.key,
+        keyCode: event.keyCode,
+        code: event.code,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        altGraph: event.getModifierState('AltGraph'),
+        repeat: event.repeat,
+        isComposing: event.isComposing,
+        location: event.location
+    });
+
     /**
      * Use polling to track focus of main webview and iframes within the webview
      *
@@ -300,16 +317,7 @@ window.frameElement = null;
         const handleInnerKeydown = (e) => {
             preventDefaultBrowserHotkeys(e);
 
-            host.postMessage('did-keydown', {
-                key: e.key,
-                keyCode: e.keyCode,
-                code: e.code,
-                shiftKey: e.shiftKey,
-                altKey: e.altKey,
-                ctrlKey: e.ctrlKey,
-                metaKey: e.metaKey,
-                repeat: e.repeat
-            });
+            host.postMessage('did-keydown', toNormalizedKeyboardInput(e));
         };
 
         /**
@@ -678,6 +686,7 @@ window.frameElement = null;
 
     if (typeof module !== 'undefined') {
         module.exports = createWebviewManager;
+        module.exports.toNormalizedKeyboardInput = toNormalizedKeyboardInput;
     } else {
         window.createWebviewManager = createWebviewManager;
     }

package/src/main/browser/webview/pre/main.spec.ts

@@ -0,0 +1,46 @@
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// https://www.eclipse.org/legal/epl-2.0.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { expect } from 'chai';
+
+const { toNormalizedKeyboardInput } = require('../../../../../src/main/browser/webview/pre/main.js');
+
+describe('webview keyboard transport', () => {
+    it('serializes explicit AltGraph and normalized keyboard fields', () => {
+        const input = toNormalizedKeyboardInput({
+            key: '[',
+            keyCode: 56,
+            code: 'Digit8',
+            shiftKey: false,
+            altKey: false,
+            ctrlKey: true,
+            metaKey: false,
+            repeat: true,
+            isComposing: false,
+            location: 2,
+            getModifierState: (modifier: string) => modifier === 'AltGraph'
+        });
+
+        expect(input).to.deep.equal({
+            key: '[',
+            keyCode: 56,
+            code: 'Digit8',
+            shiftKey: false,
+            altKey: false,
+            ctrlKey: true,
+            metaKey: false,
+            altGraph: true,
+            repeat: true,
+            isComposing: false,
+            location: 2
+        });
+        expect(input).not.to.have.property('getModifierState');
+    });
+});

package/src/main/browser/webview/webview.ts

@@ -54,6 +54,7 @@ import { ContextMenuRenderer } from '@theia/core/lib/browser';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { PluginViewWidget } from '../view/plugin-view-widget';
 import { WebviewPreferences } from '../../common/webview-preferences';
+import { NormalizedKeyboardInput } from '@theia/core/lib/browser/keyboard/keys';
 
 // Style from core
 const TRANSPARENT_OVERLAY_STYLE = 'theia-transparent-overlay';
@@ -325,11 +326,14 @@ export class WebviewWidget extends BaseWidget implements StatefulWidget, Extract
         this.toHide.push(this.on(WebviewMessageChannels.loadLocalhost, (entry: any) =>
             this.loadLocalhost(entry.origin)
         ));
-        this.toHide.push(this.on(WebviewMessageChannels.didKeydown, (data: KeyboardEvent) => {
+        this.toHide.push(this.on(WebviewMessageChannels.didKeydown, (data: NormalizedKeyboardInput) => {
             // Electron: workaround for https://github.com/electron/electron/issues/14258
             // We have to detect keyboard events in the <webview> and dispatch them to our
             // keybinding service because these events do not bubble to the parent window anymore.
-            this.keybindings.dispatchKeyDown(data, this.element);
+            this.keybindings.dispatchNormalizedKeyDown(data, this.element);
+            // DOM capture listeners must still observe the emulated event. Mark it as already handled so the registry's
+            // capture listener does not execute the keybinding a second time.
+            this.keybindings.dispatchKeyDown(data, this.element, true);
         }));
         this.toHide.push(this.on(WebviewMessageChannels.didMouseDown, (data: MouseEvent) => {
             // We have to dispatch mousedown events so menus will be closed when clicking inside webviews.
@@ -415,7 +419,7 @@ export class WebviewWidget extends BaseWidget implements StatefulWidget, Extract
     }
 
     setContentOptions(contentOptions: WebviewContentOptions): void {
-        if (JSONExt.deepEqual(<any>this.contentOptions, <any>contentOptions)) {
+        if (JSONExt.deepEqual(this.contentOptions as any, contentOptions as any)) {
             return;
         }
         this._contentOptions = contentOptions;

package/src/main/node/handlers/plugin-theia-directory-handler.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import * as path from 'path';
-import * as filenamify from 'filenamify';
+import filenamify from 'filenamify';
 import * as fs from '@theia/core/shared/fs-extra';
 import { URI, ILogger } from '@theia/core';
 import { inject, injectable, named } from '@theia/core/shared/inversify';