@theia/monaco 1.56.0 → 1.57.0-next.136

package/src/browser/monaco-frontend-application-contribution.ts

@@ -33,9 +33,17 @@ import { MonacoEditor } from './monaco-editor';
 import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
 import { StandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneThemeService';
 import { IStandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme';
+import { SecondaryWindowService } from '@theia/core/lib/browser/window/secondary-window-service';
+import { registerWindow } from '@theia/monaco-editor-core/esm/vs/base/browser/dom';
+
+type CodeWindow = Window & typeof globalThis & {
+    vscodeWindowId: number;
+};
 
 @injectable()
 export class MonacoFrontendApplicationContribution implements FrontendApplicationContribution, StylingParticipant {
+    protected readonly windowsById = new Map<number, monaco.IDisposable>();
+    protected nextWindowId = 2; // the main window has the id "1"
 
     @inject(MonacoTextModelService)
     protected readonly textModelService: MonacoTextModelService;
@@ -56,6 +64,9 @@ export class MonacoFrontendApplicationContribution implements FrontendApplicatio
     @inject(SecondaryWindowHandler)
     protected readonly secondaryWindowHandler: SecondaryWindowHandler;
 
+    @inject(SecondaryWindowService)
+    protected readonly secondaryWindowService: SecondaryWindowService;
+
     @postConstruct()
     protected init(): void {
         this.addAdditionalPreferenceValidations();
@@ -98,6 +109,17 @@ export class MonacoFrontendApplicationContribution implements FrontendApplicatio
                 themeService.registerEditorContainer(widget.node);
             }
         });
+        this.secondaryWindowService.onWindowOpened(window => {
+            const codeWindow: CodeWindow = window as CodeWindow;
+            codeWindow.vscodeWindowId = this.nextWindowId++;
+
+            this.windowsById.set(codeWindow.vscodeWindowId, registerWindow(codeWindow));
+        });
+
+        this.secondaryWindowService.onWindowClosed(window => {
+            const codeWindow: CodeWindow = window as CodeWindow;
+            this.windowsById.get(codeWindow.vscodeWindowId)?.dispose();
+        });
     }
 
     registerThemeStyle(theme: ColorTheme, collector: CssStyleCollector): void {
@@ -172,8 +194,7 @@ export class MonacoFrontendApplicationContribution implements FrontendApplicatio
                 new editorBoolConstructor(id++, 'detectIndentation', true, editorGeneratedPreferenceProperties['editor.detectIndentation']),
                 new editorBoolConstructor(id++, 'trimAutoWhitespace', true, editorGeneratedPreferenceProperties['editor.trimAutoWhitespace']),
                 new editorBoolConstructor(id++, 'largeFileOptimizations', true, editorGeneratedPreferenceProperties['editor.largeFileOptimizations']),
-                new editorBoolConstructor(id++, 'wordBasedSuggestions', true, editorGeneratedPreferenceProperties['editor.wordBasedSuggestions']),
-                new editorStringEnumConstructor(id++, 'wordBasedSuggestionsMode', 'matchingDocuments', editorGeneratedPreferenceProperties['editor.wordBasedSuggestionsMode'].enum, editorGeneratedPreferenceProperties['editor.wordBasedSuggestionsMode']),
+                new editorStringEnumConstructor(id++, 'wordBasedSuggestions', 'matchingDocuments', editorGeneratedPreferenceProperties['editor.wordBasedSuggestions'].enum, editorGeneratedPreferenceProperties['editor.wordBasedSuggestions']),
                 new editorBoolConstructor(id++, 'stablePeek', false, editorGeneratedPreferenceProperties['editor.stablePeek']),
                 new editorIntConstructor(id++, 'maxTokenizationLineLength', 20000, 1, MAX_SAFE_INTEGER, editorGeneratedPreferenceProperties['editor.maxTokenizationLineLength']),
             );

package/src/browser/monaco-frontend-module.ts

@@ -66,16 +66,18 @@ import { GotoLineQuickAccessContribution } from './monaco-gotoline-quick-access'
 import { GotoSymbolQuickAccessContribution } from './monaco-gotosymbol-quick-access';
 import { QuickAccessContribution, QuickAccessRegistry } from '@theia/core/lib/browser/quick-input/quick-access';
 import { MonacoQuickAccessRegistry } from './monaco-quick-access-registry';
-import { ConfigurationTarget, IConfigurationChangeEvent, IConfigurationService } from '@theia/monaco-editor-core/esm/vs/platform/configuration/common/configuration';
-import { StandaloneConfigurationService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
-import { Configuration } from '@theia/monaco-editor-core/esm/vs/platform/configuration/common/configurationModels';
+import { ConfigurationTarget, IConfigurationChangeEvent, IConfigurationService } from '@theia/monaco-editor-core/esm/vs/platform/configuration/common/configuration.js';
+import { StandaloneConfigurationService, StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
+import { Configuration } from '@theia/monaco-editor-core/esm/vs/platform/configuration/common/configurationModels.js';
 import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
 import { MonacoMarkdownRenderer } from './markdown-renderer/monaco-markdown-renderer';
 import { ThemeService } from '@theia/core/lib/browser/theming';
 import { ThemeServiceWithDB } from './monaco-indexed-db';
-import { IContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
-import { IThemeService } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
+import { IContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey.js';
+import { IThemeService } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService.js';
 import { ActiveMonacoUndoRedoHandler, FocusedMonacoUndoRedoHandler } from './monaco-undo-redo-handler';
+import { ILogService } from '@theia/monaco-editor-core/esm/vs/platform/log/common/log';
+import { DefaultContentHoverWidgetPatcher } from './default-content-hover-widget-patcher';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(MonacoThemingService).toSelf().inSingletonScope();
@@ -183,13 +185,16 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(ActiveMonacoUndoRedoHandler).toSelf().inSingletonScope();
     bind(UndoRedoHandler).toService(FocusedMonacoUndoRedoHandler);
     bind(UndoRedoHandler).toService(ActiveMonacoUndoRedoHandler);
+
+    bind(DefaultContentHoverWidgetPatcher).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(DefaultContentHoverWidgetPatcher);
 });
 
 export const MonacoConfigurationService = Symbol('MonacoConfigurationService');
 export function createMonacoConfigurationService(container: interfaces.Container): IConfigurationService {
     const preferences = container.get<PreferenceService>(PreferenceService);
     const preferenceSchemaProvider = container.get<PreferenceSchemaProvider>(PreferenceSchemaProvider);
-    const service = new StandaloneConfigurationService();
+    const service = new StandaloneConfigurationService(StandaloneServices.get(ILogService));
     const _configuration: Configuration = service['_configuration'];
 
     _configuration.getValue = (section, overrides) => {

package/src/browser/monaco-init.ts

@@ -16,33 +16,18 @@
 
 /*
  * The code in this file is responsible for overriding service implementations in the Monaco editor with our own Theia-based implementations.
- * Since we only get a single chance to call `StandaloneServies.initialize()` with our overrides, we need to make sure that intialize is called before the first call to
- * `StandaloneServices.get()` or `StandaloneServies.initialize()`. As we do not control the mechanics of Inversify instance constructions, the approach here is to call
+ * Since we only get a single chance to call `StandaloneServices.initialize()` with our overrides, we need to make sure that initialize is called before the first call to
+ * `StandaloneServices.get()` or `StandaloneServices.initialize()`. As we do not control the mechanics of Inversify instance constructions, the approach here is to call
  * `MonacoInit.init()` from the `index.js` file after all container modules are loaded, but before the first object is fetched from it.
  * `StandaloneServices.initialize()` is called with service descriptors, not service instances. This lets us finish all overrides before any inversify object is constructed and
  * might call `initialize()` while being constructed.
  * The service descriptors require a constructor function, so we declare dummy class for each Monaco service we override. But instead of returning an instance of the dummy class,
  * we fetch the implementation of the monaco service from the inversify container.
- * The inversify-constructed services must not call StandaloneServices.get() or StandaloneServices.initialize() from their constructors. Calling `get`()` in postConstruct mehtods
+ * The inversify-constructed services must not call StandaloneServices.get() or StandaloneServices.initialize() from their constructors. Calling `get`()` in postConstruct methods
  * is allowed.
  */
 
 // Before importing anything from monaco we need to override its localization function
-import * as MonacoNls from '@theia/monaco-editor-core/esm/vs/nls';
-import { nls } from '@theia/core/lib/common/nls';
-import { FormatType, Localization } from '@theia/core/lib/common/i18n/localization';
-
-Object.assign(MonacoNls, {
-    localize(_key: string, label: string, ...args: FormatType[]): string {
-        if (nls.locale) {
-            const defaultKey = nls.getDefaultKey(label);
-            if (defaultKey) {
-                return nls.localize(defaultKey, label, ...args);
-            }
-        }
-        return Localization.format(label, args);
-    }
-});
 
 import { Container } from '@theia/core/shared/inversify';
 import { ICodeEditorService } from '@theia/monaco-editor-core/esm/vs/editor/browser/services/codeEditorService';
@@ -65,6 +50,9 @@ import { MonacoQuickInputImplementation } from './monaco-quick-input-service';
 import { IQuickInputService } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickInput';
 import { IStandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme';
 import { MonacoStandaloneThemeService } from './monaco-standalone-theme-service';
+import { createContentHoverWidgetPatcher } from './content-hover-widget-patcher';
+
+export const contentHoverWidgetPatcher = createContentHoverWidgetPatcher();
 
 class MonacoEditorServiceConstructor {
     /**
@@ -118,6 +106,12 @@ class MonacoQuickInputImplementationConstructor {
     }
 }
 
+class MonacoStandaloneThemeServiceConstructor {
+    constructor(container: Container) {
+        return new MonacoStandaloneThemeService();
+    }
+}
+
 export namespace MonacoInit {
     export function init(container: Container): void {
         StandaloneServices.initialize({
@@ -128,7 +122,7 @@ export namespace MonacoInit {
             [IBulkEditService.toString()]: new SyncDescriptor(MonacoBulkEditServiceConstructor, [container]),
             [ICommandService.toString()]: new SyncDescriptor(MonacoCommandServiceConstructor, [container]),
             [IQuickInputService.toString()]: new SyncDescriptor(MonacoQuickInputImplementationConstructor, [container]),
-            [IStandaloneThemeService.toString()]: new MonacoStandaloneThemeService()
+            [IStandaloneThemeService.toString()]: new SyncDescriptor(MonacoStandaloneThemeServiceConstructor, [])
         });
     }
 }

package/src/browser/monaco-quick-input-service.ts

@@ -31,17 +31,18 @@ import { MonacoResolvedKeybinding } from './monaco-resolved-keybinding';
 import { IQuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickAccess';
 import { QuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickAccess';
 import { IContextKey, IContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
-import { IListOptions, List } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/list/listWidget';
 import * as monaco from '@theia/monaco-editor-core';
 import { ResolvedKeybinding } from '@theia/monaco-editor-core/esm/vs/base/common/keybindings';
 import { IInstantiationService } from '@theia/monaco-editor-core/esm/vs/platform/instantiation/common/instantiation';
 import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
 import { IMatch } from '@theia/monaco-editor-core/esm/vs/base/common/filters';
-import { IListRenderer, IListVirtualDelegate } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/list/list';
 import { CancellationToken, Event } from '@theia/core';
 import { MonacoColorRegistry } from './monaco-color-registry';
 import { ThemeService } from '@theia/core/lib/browser/theming';
 import { IStandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme';
+import { ILayoutService } from '@theia/monaco-editor-core/esm/vs/platform/layout/browser/layoutService';
+import { IHoverDelegate, IHoverDelegateOptions } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/hover/hoverDelegate';
+import { IHoverWidget } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/hover/hover';
 
 // Copied from @vscode/src/vs/base/parts/quickInput/browser/quickInputList.ts
 export interface IListElement {
@@ -59,8 +60,21 @@ export interface IListElement {
     readonly fireButtonTriggered: (event: IQuickPickItemButtonEvent<IQuickPickItem>) => void;
 }
 
+class HoverDelegate implements IHoverDelegate {
+    showHover(options: IHoverDelegateOptions, focus?: boolean | undefined): IHoverWidget | undefined {
+        return undefined;
+    }
+    onDidHideHover?: (() => void) | undefined;
+    delay: number;
+    placement?: 'mouse' | 'element' | undefined;
+    showNativeHover?: boolean | undefined;
+
+}
 @injectable()
 export class MonacoQuickInputImplementation implements IQuickInputService {
+    get currentQuickInput(): IQuickInput | undefined {
+        return this.controller.currentQuickInput;
+    }
 
     declare readonly _serviceBrand: undefined;
 
@@ -77,7 +91,6 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     protected readonly themeService: ThemeService;
 
     protected container: HTMLElement;
-    private quickInputList: List<unknown>;
 
     protected inQuickOpen: IContextKey<boolean>;
 
@@ -113,19 +126,19 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
         return this.controller.createQuickWidget();
     }
 
-    createQuickPick<T extends IQuickPickItem>(): IQuickPick<T> {
-        return this.controller.createQuickPick<T>();
+    createQuickPick<T extends IQuickPickItem>(options: { useSeparators: true; }): IQuickPick<T, { useSeparators: true; }>;
+    createQuickPick<T extends IQuickPickItem>(options: { useSeparators: false; }): IQuickPick<T, { useSeparators: false; }>;
+    createQuickPick<T extends IQuickPickItem>(options: { useSeparators: boolean }): IQuickPick<T, { useSeparators: true; }> | IQuickPick<T, { useSeparators: false; }> {
+        return this.controller.createQuickPick({
+            useSeparators: options.useSeparators
+        });
     }
-
     createInputBox(): IInputBox {
         return this.controller.createInputBox();
     }
 
     open(filter: string): void {
         this.quickAccess.show(filter);
-        setTimeout(() => {
-            this.quickInputList.focusNth(0);
-        }, 300);
     }
 
     input(options?: IInputOptions, token?: monaco.CancellationToken): Promise<string | undefined> {
@@ -185,21 +198,10 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     }
 
     private initController(): void {
-        this.controller = new QuickInputController(this.getOptions(), StandaloneServices.get(IStandaloneThemeService));
-        this.updateLayout();
-    }
-
-    private updateLayout(): void {
-        // Initialize the layout using screen dimensions as monaco computes the actual sizing.
-        // https://github.com/microsoft/vscode/blob/6261075646f055b99068d3688932416f2346dd3b/src/vs/base/parts/quickinput/browser/quickInput.ts#L1799
-        this.controller.layout(this.getClientDimension(), 0);
-    }
-
-    private getClientDimension(): monaco.editor.IDimension {
-        return { width: window.innerWidth, height: window.innerHeight };
-    }
+        const contextKeyService = StandaloneServices.get(IContextKeyService);
+        const instantiationService = StandaloneServices.get(IInstantiationService);
+        const layoutService = StandaloneServices.get(ILayoutService);
 
-    private getOptions(): IQuickInputOptions {
         const options: IQuickInputOptions = {
             idPrefix: 'quickInput_',
             container: this.container,
@@ -208,14 +210,23 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
             backKeybindingLabel: () => undefined,
             setContextKey: (id?: string) => this.setContextKey(id),
             returnFocus: () => this.container.focus(),
-            createList: <T>(
-                user: string, container: HTMLElement, delegate: IListVirtualDelegate<T>, renderers: IListRenderer<T, unknown>[], listOptions: IListOptions<T>
-            ): List<T> => this.quickInputList = new List(user, container, delegate, renderers, listOptions),
+            hoverDelegate: new HoverDelegate(),
             linkOpenerDelegate: () => {
                 // @monaco-uplift: not sure what to do here
             }
         };
-        return options;
+        this.controller = new QuickInputController(options, layoutService, instantiationService, contextKeyService);
+        this.updateLayout();
+    }
+
+    private updateLayout(): void {
+        // Initialize the layout using screen dimensions as monaco computes the actual sizing.
+        // https://github.com/microsoft/vscode/blob/6261075646f055b99068d3688932416f2346dd3b/src/vs/base/parts/quickinput/browser/quickInput.ts#L1799
+        this.controller.layout(this.getClientDimension(), 0);
+    }
+
+    private getClientDimension(): monaco.editor.IDimension {
+        return { width: window.innerWidth, height: window.innerHeight };
     }
 
     // @monaco-uplift
@@ -258,13 +269,18 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
                 listInactiveSelectionForeground: this.colorRegistry.toCssVariableName('list.InactiveSelectionForeground'),
                 listHoverBackground: this.colorRegistry.toCssVariableName('list.HoverBackground'),
                 listHoverForeground: this.colorRegistry.toCssVariableName('list.HoverForeground'),
-                listDropBackground: this.colorRegistry.toCssVariableName('list.DropBackground'),
+                listDropOverBackground: this.colorRegistry.toCssVariableName('list.DropOverBackground'),
+                listDropBetweenBackground: this.colorRegistry.toCssVariableName('list.DropBetweenBackground'),
                 listSelectionOutline: this.colorRegistry.toCssVariableName('activeContrastBorder'),
                 listHoverOutline: this.colorRegistry.toCssVariableName('activeContrastBorder'),
                 treeIndentGuidesStroke: this.colorRegistry.toCssVariableName('tree.indentGuidesStroke'),
                 treeInactiveIndentGuidesStroke: this.colorRegistry.toCssVariableName('tree.inactiveIndentGuidesStroke'),
+                treeStickyScrollBackground: this.colorRegistry.toCssVariableName('tree.StickyScrollBackground'),
+                treeStickyScrollBorder: this.colorRegistry.toCssVariableName('tree.tickyScrollBorde'),
+                treeStickyScrollShadow: this.colorRegistry.toCssVariableName('tree.StickyScrollShadow'),
                 tableColumnsBorder: this.colorRegistry.toCssVariableName('tree.tableColumnsBorder'),
                 tableOddRowsBackgroundColor: this.colorRegistry.toCssVariableName('tree.tableOddRowsBackground'),
+
             },
             inputBox: {
                 inputForeground: this.colorRegistry.toCssVariableName('inputForeground'),
@@ -434,11 +450,11 @@ export class MonacoQuickInputService implements QuickInputService {
     }
 
     createQuickPick<T extends QuickPickItem>(): QuickPick<T> {
-        const quickPick = this.monacoService.createQuickPick<MonacoQuickPickItem<T>>();
+        const quickPick = this.monacoService.createQuickPick<MonacoQuickPickItem<T>>({ useSeparators: true });
         return this.wrapQuickPick(quickPick);
     }
 
-    wrapQuickPick<T extends QuickPickItem>(wrapped: IQuickPick<MonacoQuickPickItem<T>>): QuickPick<T> {
+    wrapQuickPick<T extends QuickPickItem>(wrapped: IQuickPick<MonacoQuickPickItem<T>, { useSeparators: true }>): QuickPick<T> {
         return new MonacoQuickPick(wrapped, this.keybindingRegistry);
     }
 
@@ -532,7 +548,7 @@ class MonacoQuickInput {
 }
 
 class MonacoQuickPick<T extends QuickPickItem> extends MonacoQuickInput implements QuickPick<T> {
-    constructor(protected override readonly wrapped: IQuickPick<MonacoQuickPickItem<T>>, protected readonly keybindingRegistry: KeybindingRegistry) {
+    constructor(protected override readonly wrapped: IQuickPick<MonacoQuickPickItem<T>, { useSeparators: true }>, protected readonly keybindingRegistry: KeybindingRegistry) {
         super(wrapped);
     }
 

package/src/browser/monaco-workspace.ts

@@ -221,14 +221,16 @@ export class MonacoWorkspace {
      * Applies given edits to the given model.
      * The model is saved if no editors is opened for it.
      */
-    applyBackgroundEdit(model: MonacoEditorModel, editOperations: monaco.editor.IIdentifiedSingleEditOperation[], shouldSave = true): Promise<void> {
+    applyBackgroundEdit(model: MonacoEditorModel, editOperations: monaco.editor.IIdentifiedSingleEditOperation[],
+        shouldSave?: boolean | ((openEditor: MonacoEditor | undefined, wasDirty: boolean) => boolean)): Promise<void> {
         return this.suppressOpenIfDirty(model, async () => {
             const editor = MonacoEditor.findByDocument(this.editorManager, model)[0];
+            const wasDirty = !!editor?.document.dirty;
             const cursorState = editor && editor.getControl().getSelections() || [];
             model.textEditorModel.pushStackElement();
             model.textEditorModel.pushEditOperations(cursorState, editOperations, () => cursorState);
             model.textEditorModel.pushStackElement();
-            if (!editor && shouldSave) {
+            if ((typeof shouldSave === 'function' && shouldSave(editor, wasDirty)) || (!editor && shouldSave)) {
                 await model.save();
             }
         });

package/src/browser/simple-monaco-editor.ts

@@ -16,7 +16,7 @@
 
 import { EditorServiceOverrides, MonacoEditor, MonacoEditorServices } from './monaco-editor';
 
-import { CodeEditorWidget, ICodeEditorWidgetOptions } from '@theia/monaco-editor-core/esm/vs/editor/browser/widget/codeEditorWidget';
+import { CodeEditorWidget, ICodeEditorWidgetOptions } from '@theia/monaco-editor-core/esm/vs/editor/browser/widget/codeEditor/codeEditorWidget';
 import { IInstantiationService } from '@theia/monaco-editor-core/esm/vs/platform/instantiation/common/instantiation';
 import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
 import { ServiceCollection } from '@theia/monaco-editor-core/esm/vs/platform/instantiation/common/serviceCollection';
@@ -27,6 +27,7 @@ import * as monaco from '@theia/monaco-editor-core';
 import { ElementExt } from '@theia/core/shared/@phosphor/domutils';
 import { Selection } from '@theia/editor/lib/browser/editor';
 import { SelectionDirection } from '@theia/monaco-editor-core/esm/vs/editor/common/core/selection';
+import { ShowLightbulbIconMode } from '@theia/monaco-editor-core/esm/vs/editor/common/config/editorOptions';
 
 export class SimpleMonacoEditor extends MonacoEditorServices implements Disposable {
 
@@ -87,7 +88,7 @@ export class SimpleMonacoEditor extends MonacoEditorServices implements Disposab
     protected create(options?: MonacoEditor.IOptions, override?: EditorServiceOverrides, widgetOptions?: ICodeEditorWidgetOptions): Disposable {
         const combinedOptions = {
             ...options,
-            lightbulb: { enabled: true },
+            lightbulb: { enabled: ShowLightbulbIconMode.On },
             fixedOverflowWidgets: true,
             automaticLayout: true,
             scrollbar: {