improve layout performance

fixes #39699

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));
 

src/vs/workbench/browser/parts/panel/panelPart.ts

@@ -43,6 +43,7 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 	private blockOpeningPanel: boolean;
 	private compositeBar: CompositeBar;
 	private dimension: Dimension;
+	private toolbarWidth = new Map<string, number>();
 
 	constructor(
 		id: string,
@@ -234,14 +235,22 @@ export class PanelPart extends CompositePart<Panel> 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 {

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<void> {
 		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();
 	}