@theia/core 1.46.0-next.196 → 1.46.0-next.226

package/src/browser/shell/tab-bars.ts

@@ -1084,8 +1084,6 @@ export class SideTabBar extends ScrollableTabBar {
         startIndex: number
     };
 
-    protected _rowGap: number;
-
     constructor(options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options) {
         super(options);
 
@@ -1142,31 +1140,6 @@ export class SideTabBar extends ScrollableTabBar {
         }
     }
 
-    // Queries the tabRowGap value of the content node. Needed to properly compute overflowing
-    // tabs that should be hidden
-    protected get tabRowGap(): number {
-        // We assume that the tab row gap is static i.e. we compute it once an then cache it
-        if (!this._rowGap) {
-            this._rowGap = this.computeTabRowGap();
-        }
-        return this._rowGap;
-
-    }
-
-    protected computeTabRowGap(): number {
-        const style = window.getComputedStyle(this.contentNode);
-        const rowGapStyle = style.getPropertyValue('row-gap');
-        const numericValue = parseFloat(rowGapStyle);
-        const unit = rowGapStyle.match(/[a-zA-Z]+/)?.[0];
-
-        const tempDiv = document.createElement('div');
-        tempDiv.style.height = '1' + unit;
-        document.body.appendChild(tempDiv);
-        const rowGapValue = numericValue * tempDiv.offsetHeight;
-        document.body.removeChild(tempDiv);
-        return rowGapValue;
-    }
-
     /**
      * Reveal the tab with the given index by moving it into the non-overflowing tabBar section
      * if necessary.
@@ -1207,18 +1180,13 @@ export class SideTabBar extends ScrollableTabBar {
                 const hiddenContent = this.hiddenContentNode;
                 const n = hiddenContent.children.length;
                 const renderData = new Array<Partial<SideBarRenderData>>(n);
-                const availableWidth = this.node.clientHeight - this.tabRowGap;
-                let actualWidth = 0;
-                let overflowStartIndex = -1;
                 for (let i = 0; i < n; i++) {
                     const hiddenTab = hiddenContent.children[i];
-                    // Extract tab padding from the computed style
+                    // Extract tab padding, and margin from the computed style
                     const tabStyle = window.getComputedStyle(hiddenTab);
-                    const paddingTop = parseFloat(tabStyle.paddingTop!);
-                    const paddingBottom = parseFloat(tabStyle.paddingBottom!);
                     const rd: Partial<SideBarRenderData> = {
-                        paddingTop,
-                        paddingBottom
+                        paddingTop: parseFloat(tabStyle.paddingTop!),
+                        paddingBottom: parseFloat(tabStyle.paddingBottom!)
                     };
                     // Extract label size from the DOM
                     const labelElements = hiddenTab.getElementsByClassName('p-TabBar-tabLabel');
@@ -1231,38 +1199,21 @@ export class SideTabBar extends ScrollableTabBar {
                     if (iconElements.length === 1) {
                         const icon = iconElements[0];
                         rd.iconSize = { width: icon.clientWidth, height: icon.clientHeight };
-                        actualWidth += icon.clientHeight + paddingTop + paddingBottom + this.tabRowGap;
-
-                        if (actualWidth > availableWidth && i !== 0) {
-                            rd.visible = false;
-                            if (overflowStartIndex === -1) {
-                                overflowStartIndex = i;
-                            }
-                        }
-                        renderData[i] = rd;
                     }
-                }
 
-                // Special handling if only one element is overflowing.
-                if (overflowStartIndex === n - 1 && renderData[overflowStartIndex]) {
-                    if (!this.tabsOverflowData) {
-                        overflowStartIndex--;
-                        renderData[overflowStartIndex].visible = false;
-                    } else {
-                        renderData[overflowStartIndex].visible = true;
-                        overflowStartIndex = -1;
-                    }
+                    renderData[i] = rd;
                 }
                 // Render into the visible node
                 this.renderTabs(this.contentNode, renderData);
-                this.computeOverflowingTabsData(overflowStartIndex);
+                this.computeOverflowingTabsData();
             });
         }
     }
 
-    protected computeOverflowingTabsData(startIndex: number): void {
+    protected computeOverflowingTabsData(): void {
         // ensure that render tabs has completed
         window.requestAnimationFrame(() => {
+            const startIndex = this.hideOverflowingTabs();
             if (startIndex === -1) {
                 if (this.tabsOverflowData) {
                     this.tabsOverflowData = undefined;
@@ -1286,6 +1237,38 @@ export class SideTabBar extends ScrollableTabBar {
         });
     }
 
+    /**
+     * Hide overflowing tabs and return the index of the first hidden tab.
+     */
+    protected hideOverflowingTabs(): number {
+        const availableHeight = this.node.clientHeight;
+        const invisibleClass = 'p-mod-invisible';
+        let startIndex = -1;
+        const n = this.contentNode.children.length;
+        for (let i = 0; i < n; i++) {
+            const tab = this.contentNode.children[i] as HTMLLIElement;
+            if (tab.offsetTop + tab.offsetHeight >= availableHeight) {
+                tab.classList.add(invisibleClass);
+                if (startIndex === -1) {
+                    startIndex = i;
+                    /* If only one element is overflowing and the additional menu widget is visible (i.e. this.tabsOverflowData is set)
+                     * there might already be enough space to show the last tab. In this case, we need to include the size of the
+                     * additional menu widget and recheck if the last tab is visible */
+                    if (startIndex === n - 1 && this.tabsOverflowData) {
+                        const additionalViewsMenu = this.node.parentElement?.querySelector('.theia-additional-views-menu') as HTMLDivElement;
+                        if (tab.offsetTop + tab.offsetHeight < availableHeight + additionalViewsMenu.offsetHeight) {
+                            tab.classList.remove(invisibleClass);
+                            startIndex = -1;
+                        }
+                    }
+                }
+            } else {
+                tab.classList.remove(invisibleClass);
+            }
+        }
+        return startIndex;
+    }
+
     /**
      * Render the tab bar using the given DOM element as host. The optional `renderData` is forwarded
      * to the TabBarRenderer.

package/src/browser/shell/view-column-service.ts

@@ -0,0 +1,125 @@
+// *****************************************************************************
+// Copyright (C) 2019 Red Hat, Inc. 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
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { injectable, inject } from 'inversify';
+import { Emitter, Event } from '../../common/event';
+import { ApplicationShell } from './application-shell';
+import { toArray } from '@phosphor/algorithm';
+import { TabBar, Widget } from '@phosphor/widgets';
+
+@injectable()
+export class ViewColumnService {
+    private readonly columnValues = new Map<string, number>();
+    private readonly viewColumnIds = new Map<number, string[]>();
+
+    protected readonly onViewColumnChangedEmitter = new Emitter<{ id: string, viewColumn: number }>();
+
+    constructor(
+        @inject(ApplicationShell) private readonly shell: ApplicationShell,
+    ) {
+        let oldColumnValues = new Map<string, number>();
+        const update = async () => {
+            await new Promise<void>((resolve => setTimeout(resolve)));
+            this.updateViewColumns();
+            this.viewColumnIds.forEach((ids: string[], viewColumn: number) => {
+                ids.forEach((id: string) => {
+                    if (!oldColumnValues.has(id) || oldColumnValues.get(id) !== viewColumn) {
+                        this.onViewColumnChangedEmitter.fire({ id, viewColumn });
+                    }
+                });
+            });
+            oldColumnValues = new Map(this.columnValues.entries());
+        };
+        this.shell.mainPanel.widgetAdded.connect(() => update());
+        this.shell.mainPanel.widgetRemoved.connect(() => update());
+    }
+
+    get onViewColumnChanged(): Event<{ id: string, viewColumn: number }> {
+        return this.onViewColumnChangedEmitter.event;
+    }
+
+    updateViewColumns(): void {
+        this.columnValues.clear();
+        this.viewColumnIds.clear();
+
+        const rows = new Map<number, Set<number>>();
+        const columns = new Map<number, Map<number, TabBar<Widget>>>();
+        for (const tabBar of toArray(this.shell.mainPanel.tabBars())) {
+            if (!tabBar.node.style.top || !tabBar.node.style.left) {
+                continue;
+            }
+            const top = parseInt(tabBar.node.style.top);
+            const left = parseInt(tabBar.node.style.left);
+
+            const row = rows.get(top) || new Set<number>();
+            row.add(left);
+            rows.set(top, row);
+
+            const column = columns.get(left) || new Map<number, TabBar<Widget>>();
+            column.set(top, tabBar);
+            columns.set(left, column);
+        }
+        const firstRow = rows.get([...rows.keys()].sort()[0]);
+        if (!firstRow) {
+            return;
+        }
+        const lefts = [...firstRow.keys()].sort();
+        for (let i = 0; i < lefts.length; i++) {
+            const column = columns.get(lefts[i]);
+            if (!column) {
+                break;
+            }
+            const cellIndexes = [...column.keys()].sort();
+            let viewColumn = Math.min(i, 2);
+            for (let j = 0; j < cellIndexes.length; j++) {
+                const cell = column.get(cellIndexes[j]);
+                if (!cell) {
+                    break;
+                }
+                this.setViewColumn(cell, viewColumn);
+                if (viewColumn < 7) {
+                    viewColumn += 3;
+                }
+            }
+        }
+    }
+
+    protected setViewColumn(tabBar: TabBar<Widget>, viewColumn: number): void {
+        const ids = [];
+        for (const title of tabBar.titles) {
+            const id = title.owner.id;
+            ids.push(id);
+            this.columnValues.set(id, viewColumn);
+        }
+        this.viewColumnIds.set(viewColumn, ids);
+    }
+
+    getViewColumnIds(viewColumn: number): string[] {
+        return this.viewColumnIds.get(viewColumn) || [];
+    }
+
+    getViewColumn(id: string): number | undefined {
+        return this.columnValues.get(id);
+    }
+
+    hasViewColumn(id: string): boolean {
+        return this.columnValues.has(id);
+    }
+
+    viewColumnsSize(): number {
+        return this.viewColumnIds.size;
+    }
+}

package/src/browser/test/mock-storage-service.ts

@@ -22,7 +22,7 @@ import { injectable } from 'inversify';
  */
 @injectable()
 export class MockStorageService implements StorageService {
-    readonly data = new Map<string, {} | undefined>();
+    readonly data = new Map<string, unknown | undefined>();
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onSetDataCallback?: (key: string, data?: any) => void;

package/src/browser/window/default-secondary-window-service.ts

@@ -21,6 +21,7 @@ import { ApplicationShell } from '../shell';
 import { Saveable } from '../saveable';
 import { PreferenceService } from '../preferences';
 import { environment } from '../../common';
+import { SaveableService } from '../saveable-service';
 
 @injectable()
 export class DefaultSecondaryWindowService implements SecondaryWindowService {
@@ -43,6 +44,9 @@ export class DefaultSecondaryWindowService implements SecondaryWindowService {
     @inject(PreferenceService)
     protected readonly preferenceService: PreferenceService;
 
+    @inject(SaveableService)
+    protected readonly saveResourceService: SaveableService;
+
     @postConstruct()
     init(): void {
         // Set up messaging with secondary windows
@@ -93,7 +97,7 @@ export class DefaultSecondaryWindowService implements SecondaryWindowService {
             newWindow.addEventListener('DOMContentLoaded', () => {
                 newWindow.addEventListener('beforeunload', evt => {
                     const saveable = Saveable.get(widget);
-                    const wouldLoseState = !!saveable && saveable.dirty && saveable.autoSave === 'off';
+                    const wouldLoseState = !!saveable && saveable.dirty && this.saveResourceService.autoSave === 'off';
                     if (wouldLoseState) {
                         evt.returnValue = '';
                         evt.preventDefault();
@@ -104,7 +108,7 @@ export class DefaultSecondaryWindowService implements SecondaryWindowService {
                 newWindow.addEventListener('unload', () => {
                     const saveable = Saveable.get(widget);
                     shell.closeWidget(widget.id, {
-                        save: !!saveable && saveable.dirty && saveable.autoSave !== 'off'
+                        save: !!saveable && saveable.dirty && this.saveResourceService.autoSave !== 'off'
                     });
 
                     const extIndex = this.secondaryWindows.indexOf(newWindow);

package/src/common/encoding-service.ts

@@ -318,7 +318,7 @@ export class EncodingService {
         });
     }
 
-    encodeStream(value: string | Readable<string>, options?: ResourceEncoding): Promise<BinaryBuffer | BinaryBufferReadable>
+    encodeStream(value: string | Readable<string>, options?: ResourceEncoding): Promise<BinaryBuffer | BinaryBufferReadable>;
     encodeStream(value?: string | Readable<string>, options?: ResourceEncoding): Promise<BinaryBuffer | BinaryBufferReadable | undefined>;
     async encodeStream(value: string | Readable<string> | undefined, options?: ResourceEncoding): Promise<BinaryBuffer | BinaryBufferReadable | undefined> {
         let encoding = options?.encoding;