touch bar: reuse groups

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

@@ -65,6 +65,10 @@ interface IWorkbenchEditorConfiguration {
 	};
 }
 
+interface ITouchBarSegment extends Electron.SegmentedControlSegment {
+	id: string;
+}
+
 export class CodeWindow implements ICodeWindow {
 
 	public static themeStorageKey = 'theme';
@@ -93,7 +97,7 @@ export class CodeWindow implements ICodeWindow {
 	private currentConfig: IWindowConfiguration;
 	private pendingLoadConfig: IWindowConfiguration;
 
-	private touchBarGroups: Map<string, Electron.TouchBarSegmentedControl>;
+	private touchBarGroups: Electron.TouchBarSegmentedControl[];
 
 	constructor(
 		config: IWindowCreationOptions,
@@ -104,7 +108,7 @@ export class CodeWindow implements ICodeWindow {
 		@IWorkspacesMainService private workspaceService: IWorkspacesMainService,
 		@IBackupMainService private backupService: IBackupMainService
 	) {
-		this.touchBarGroups = new Map<string, Electron.TouchBarSegmentedControl>();
+		this.touchBarGroups = [];
 		this._lastFocusTime = -1;
 		this._readyState = ReadyState.NONE;
 		this.whenReadyCallbacks = [];
@@ -116,6 +120,9 @@ export class CodeWindow implements ICodeWindow {
 		// respect configured menu bar visibility
 		this.onConfigurationUpdated();
 
+		// macOS: touch bar support
+		this.createTouchBar();
+
 		// Eventing
 		this.registerListeners();
 	}
@@ -862,52 +869,50 @@ export class CodeWindow implements ICodeWindow {
 			return; // only supported on macOS
 		}
 
-		// 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);
-			}
+		// Update segments for all groups. Setting the segments property
+		// of the group directly prevents ugly flickering from happening
+		this.touchBarGroups.forEach((touchBarGroup, index) => {
+			const commands = groups[index];
+			touchBarGroup.segments = this.createTouchBarGroupSegments(commands);
 		});
+	}
 
-		// 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);
-				}
+	private createTouchBar(): void {
+		if (!isMacintosh) {
+			return; // only supported on macOS
+		}
 
-				// Push and add small space between groups
-				touchBarGroups.push(groupTouchBar);
-				touchBarGroups.push(new TouchBar.TouchBarSpacer({ size: 'small' }));
-			}
-		});
+		// To avoid flickering, we try to reuse the touch bar group
+		// as much as possible by creating a large number of groups
+		// for reusing later.
+		for (let i = 0; i < 10; i++) {
+			const groupTouchBar = this.createTouchBarGroup();
+			this.touchBarGroups.push(groupTouchBar);
+		}
 
-		this._win.setTouchBar(new TouchBar({ items: touchBarGroups }));
+		this._win.setTouchBar(new TouchBar({ items: this.touchBarGroups }));
 	}
 
-	private getTouchBarGroupHash(items: ICommandAction[]): string {
-		let id = '';
-		items.forEach(item => id += (item.id + item.title + item.iconPath));
+	private createTouchBarGroup(items: ICommandAction[] = []): Electron.TouchBarSegmentedControl {
 
-		return id;
-	}
+		// Group Segments
+		const segments = this.createTouchBarGroupSegments(items);
 
-	private createTouchBarGroup(items: ICommandAction[]): Electron.TouchBarSegmentedControl {
+		// Group Control
+		const control = new TouchBar.TouchBarSegmentedControl({
+			segments,
+			mode: 'buttons',
+			segmentStyle: 'automatic',
+			change: (selectedIndex) => {
+				this.sendWhenReady('vscode:runAction', { id: (control.segments[selectedIndex] as ITouchBarSegment).id, from: 'touchbar' });
+			}
+		});
 
-		// Group Segments
-		const segments = items.map(item => {
+		return control;
+	}
+
+	private createTouchBarGroupSegments(items: ICommandAction[] = []): ITouchBarSegment[] {
+		const segments: ITouchBarSegment[] = items.map(item => {
 			let icon: Electron.NativeImage;
 			if (item.iconPath) {
 				icon = nativeImage.createFromPath(item.iconPath);
@@ -917,20 +922,13 @@ export class CodeWindow implements ICodeWindow {
 			}
 
 			return {
+				id: item.id,
 				label: !icon ? item.title as string : void 0,
 				icon
 			};
 		});
 
-		// Group Touch Bar
-		return new TouchBar.TouchBarSegmentedControl({
-			segments,
-			mode: 'buttons',
-			segmentStyle: 'automatic',
-			change: (selectedIndex) => {
-				this.sendWhenReady('vscode:runAction', { id: items[selectedIndex].id, from: 'touchbar' });
-			}
-		});
+		return segments;
 	}
 
 	public dispose(): void {