touch bar: reuse entries to avoid flickering

src/vs/code/electron-main/window.ts

@@ -94,6 +94,8 @@ export class CodeWindow implements ICodeWindow {
 	private currentConfig: IWindowConfiguration;
 	private pendingLoadConfig: IWindowConfiguration;
 
+	private touchBarGroups: Map<string, Electron.TouchBarSegmentedControl>;
+
 	constructor(
 		config: IWindowCreationOptions,
 		@ILogService private logService: ILogService,
@@ -103,6 +105,7 @@ export class CodeWindow implements ICodeWindow {
 		@IWorkspacesMainService private workspaceService: IWorkspacesMainService,
 		@IBackupMainService private backupService: IBackupMainService
 	) {
+		this.touchBarGroups = new Map<string, Electron.TouchBarSegmentedControl>();
 		this._lastFocusTime = -1;
 		this._readyState = ReadyState.NONE;
 		this.whenReadyCallbacks = [];
@@ -858,49 +861,80 @@ export class CodeWindow implements ICodeWindow {
 		this._win.webContents.send(channel, ...args);
 	}
 
-	public updateTouchBar(items: ICommandAction[][]): void {
+	public updateTouchBar(groups: ICommandAction[][]): void {
 		if (!isMacintosh) {
 			return; // only supported on macOS
 		}
 
-		const groups: (Electron.TouchBarGroup | Electron.TouchBarSpacer)[] = [];
+		// Clean up previous groups no longer in use
+		const groupHashes: string[] = [];
+		groups.forEach(group => groupHashes.push(this.getTouchBarGroupHash(group)));
+		this.touchBarGroups.forEach((value, key) => {
+			if (groupHashes.indexOf(key) === -1) {
+				this.touchBarGroups.delete(key);
+			}
+		});
 
-		items.forEach(itemGroup => {
-			if (itemGroup.length) {
+		// Build touchbar from groups
+		const touchBarGroups: (Electron.TouchBarGroup | Electron.TouchBarSpacer)[] = [];
+		groups.forEach(group => {
+			if (group.length) {
+				const groupHash = this.getTouchBarGroupHash(group);
+
+				// To avoid flickering, we try to reuse the touch bar group
+				// as much as possible by checking for a previously created
+				// group that has the same number of items with same style.
+				let groupTouchBar: Electron.TouchBarSegmentedControl;
+				if (this.touchBarGroups.has(groupHash)) {
+					groupTouchBar = this.touchBarGroups.get(groupHash);
+				} else {
+					groupTouchBar = this.createTouchBarGroup(group);
+					this.touchBarGroups.set(groupHash, groupTouchBar);
+				}
 
-				// Group Segments
-				const groupSegments = itemGroup.map(item => {
-					let icon: Electron.NativeImage;
-					if (item.iconPath) {
-						icon = nativeImage.createFromPath(item.iconPath);
-						if (icon.isEmpty()) {
-							icon = void 0;
-						}
-					}
+				// Push and add small space between groups
+				touchBarGroups.push(groupTouchBar);
+				touchBarGroups.push(new TouchBar.TouchBarSpacer({ size: 'small' }));
+			}
+		});
 
-					return {
-						label: !icon ? item.title as string : void 0,
-						icon
-					};
-				});
+		this._win.setTouchBar(new TouchBar({ items: touchBarGroups }));
+	}
 
-				// Group Touch Bar
-				const groupTouchBar = new TouchBar.TouchBarSegmentedControl({
-					segments: groupSegments,
-					mode: 'buttons',
-					segmentStyle: 'automatic',
-					change: (selectedIndex) => {
-						this.sendWhenReady('vscode:runAction', itemGroup[selectedIndex].id);
-					}
-				});
+	private getTouchBarGroupHash(items: ICommandAction[]): string {
+		let id = '';
+		items.forEach(item => id += (item.id + item.title + item.iconPath));
 
-				// Push and add small space between groups
-				groups.push(groupTouchBar);
-				groups.push(new TouchBar.TouchBarSpacer({ size: 'small' }));
+		return id;
+	}
+
+	private createTouchBarGroup(items: ICommandAction[]): Electron.TouchBarSegmentedControl {
+
+		// Group Segments
+		const segments = items.map(item => {
+			let icon: Electron.NativeImage;
+			if (item.iconPath) {
+				icon = nativeImage.createFromPath(item.iconPath);
+				if (icon.isEmpty()) {
+					icon = void 0;
+				}
 			}
+
+			return {
+				label: !icon ? item.title as string : void 0,
+				icon
+			};
 		});
 
-		this._win.setTouchBar(new TouchBar({ items: groups }));
+		// Group Touch Bar
+		return new TouchBar.TouchBarSegmentedControl({
+			segments,
+			mode: 'buttons',
+			segmentStyle: 'automatic',
+			change: (selectedIndex) => {
+				this.sendWhenReady('vscode:runAction', items[selectedIndex].id);
+			}
+		});
 	}
 
 	public dispose(): void {