From 8608aaeb6aae0b54aa482bc339b763a627f9d0a7 Mon Sep 17 00:00:00 2001 From: isidor Date: Wed, 6 Dec 2017 15:26:39 +0100 Subject: [PATCH] improve layout performance fixes #39699 --- .../parts/activitybar/activitybarPart.ts | 5 ++-- .../browser/parts/panel/panelPart.ts | 15 ++++++++-- .../parts/debug/electron-browser/repl.ts | 30 +++++++++++-------- 3 files changed, 33 insertions(+), 17 deletions(-) diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index e684a25292b..d0c3072491e 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts @@ -39,6 +39,7 @@ export class ActivitybarPart extends Part { badgeForeground: ACTIVITY_BAR_BADGE_FOREGROUND, dragAndDropBackground: ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND }; + private static readonly ACTION_HEIGHT = 50; public _serviceBrand: any; @@ -72,7 +73,7 @@ export class ActivitybarPart extends Part { getDefaultCompositeId: () => this.viewletService.getDefaultViewletId(), hidePart: () => this.partService.setSideBarHidden(true), colors: ActivitybarPart.COLORS, - overflowActionSize: 50 + overflowActionSize: ActivitybarPart.ACTION_HEIGHT }); this.registerListeners(); } @@ -196,7 +197,7 @@ export class ActivitybarPart extends Part { let availableHeight = this.dimension.height; if (this.globalActionBar) { // adjust height for global actions showing - availableHeight -= (this.globalActionBar.items.length * this.globalActionBar.domNode.clientHeight); + availableHeight -= (this.globalActionBar.items.length * ActivitybarPart.ACTION_HEIGHT); } this.compositeBar.layout(new Dimension(dimension.width, availableHeight)); diff --git a/src/vs/workbench/browser/parts/panel/panelPart.ts b/src/vs/workbench/browser/parts/panel/panelPart.ts index dafdc38f22a..38da57ef74a 100644 --- a/src/vs/workbench/browser/parts/panel/panelPart.ts +++ b/src/vs/workbench/browser/parts/panel/panelPart.ts @@ -43,6 +43,7 @@ export class PanelPart extends CompositePart implements IPanelService { private blockOpeningPanel: boolean; private compositeBar: CompositeBar; private dimension: Dimension; + private toolbarWidth = new Map(); constructor( id: string, @@ -234,14 +235,22 @@ export class PanelPart extends CompositePart implements IPanelService { let availableWidth = this.dimension.width - 40; // take padding into account if (this.toolBar) { // adjust height for global actions showing - availableWidth = Math.max(PanelPart.MIN_COMPOSITE_BAR_WIDTH, availableWidth - this.toolbarWidth); + availableWidth = Math.max(PanelPart.MIN_COMPOSITE_BAR_WIDTH, availableWidth - this.getToolbarWidth()); } this.compositeBar.layout(new Dimension(availableWidth, this.dimension.height)); } } - private get toolbarWidth(): number { - return this.toolBar.getContainer().getHTMLElement().offsetWidth; + private getToolbarWidth(): number { + const activePanel = this.getActivePanel(); + if (!activePanel) { + return 0; + } + if (!this.toolbarWidth.has(activePanel.getId())) { + this.toolbarWidth.set(activePanel.getId(), this.toolBar.getContainer().getHTMLElement().offsetWidth); + } + + return this.toolbarWidth.get(activePanel.getId()); } public shutdown(): void { diff --git a/src/vs/workbench/parts/debug/electron-browser/repl.ts b/src/vs/workbench/parts/debug/electron-browser/repl.ts index 8e81bdeac6e..81264733319 100644 --- a/src/vs/workbench/parts/debug/electron-browser/repl.ts +++ b/src/vs/workbench/parts/debug/electron-browser/repl.ts @@ -42,6 +42,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService'; import { clipboard } from 'electron'; import { ICodeEditor } from 'vs/editor/browser/editorBrowser'; import { WorkbenchTree, IListService } from 'vs/platform/list/browser/listService'; +import { memoize } from 'vs/base/common/decorators'; const $ = dom.$; @@ -73,7 +74,7 @@ export class Repl extends Panel implements IPrivateReplService { private tree: ITree; private renderer: ReplExpressionsRenderer; - private characterWidthSurveyor: HTMLElement; + private container: HTMLElement; private treeContainer: HTMLElement; private replInput: ReplInputEditor; private replInputContainer: HTMLElement; @@ -128,16 +129,9 @@ export class Repl extends Panel implements IPrivateReplService { public create(parent: Builder): TPromise { super.create(parent); - const container = dom.append(parent.getHTMLElement(), $('.repl')); - this.treeContainer = dom.append(container, $('.repl-tree')); - this.createReplInput(container); - - this.characterWidthSurveyor = dom.append(container, $('.surveyor')); - this.characterWidthSurveyor.textContent = Repl.HALF_WIDTH_TYPICAL; - for (let i = 0; i < 10; i++) { - this.characterWidthSurveyor.textContent += this.characterWidthSurveyor.textContent; - } - this.characterWidthSurveyor.style.fontSize = isMacintosh ? '12px' : '14px'; + this.container = dom.append(parent.getHTMLElement(), $('.repl')); + this.treeContainer = dom.append(this.container, $('.repl-tree')); + this.createReplInput(this.container); this.renderer = this.instantiationService.createInstance(ReplExpressionsRenderer); const controller = this.instantiationService.createInstance(ReplExpressionsController, new ReplExpressionsActionProvider(this.instantiationService), MenuId.DebugConsoleContext); @@ -242,7 +236,7 @@ export class Repl extends Panel implements IPrivateReplService { public layout(dimension: Dimension): void { this.dimension = dimension; if (this.tree) { - this.renderer.setWidth(dimension.width - 25, this.characterWidthSurveyor.clientWidth / this.characterWidthSurveyor.textContent.length); + this.renderer.setWidth(dimension.width - 25, this.characterWidth); const treeHeight = dimension.height - this.replInputHeight; this.treeContainer.style.height = `${treeHeight}px`; this.tree.layout(treeHeight); @@ -252,6 +246,18 @@ export class Repl extends Panel implements IPrivateReplService { this.replInput.layout({ width: dimension.width - 20, height: this.replInputHeight }); } + @memoize + private get characterWidth(): number { + const characterWidthSurveyor = dom.append(this.container, $('.surveyor')); + characterWidthSurveyor.textContent = Repl.HALF_WIDTH_TYPICAL; + for (let i = 0; i < 10; i++) { + characterWidthSurveyor.textContent += characterWidthSurveyor.textContent; + } + characterWidthSurveyor.style.fontSize = isMacintosh ? '12px' : '14px'; + + return characterWidthSurveyor.clientWidth / characterWidthSurveyor.textContent.length; + } + public focus(): void { this.replInput.focus(); } -- GitLab