Add separator between view actions and global panel actions (fix microsoft#147903) (microsoft#255576)

Author: bpasero

src/vs/platform/actions/browser/toolbar.ts

@@ -301,6 +301,11 @@ export interface IToolBarRenderOptions {
 	 * Should the primary group allow for separators.
 	 */
 	useSeparatorsInPrimaryActions?: boolean;
+
+	/**
+	 * Force a leading separator in the primary actions group.
+	 */
+	forceLeadingSeparatorInPrimaryActions?: boolean;
 }
 
 export interface IMenuWorkbenchToolBarOptions extends IWorkbenchToolBarOptions {
@@ -369,6 +374,9 @@ export class MenuWorkbenchToolBar extends WorkbenchToolBar {
 				options?.toolbarOptions?.primaryGroup, options?.toolbarOptions?.shouldInlineSubmenu, options?.toolbarOptions?.useSeparatorsInPrimaryActions
 			);
 			container.classList.toggle('has-no-actions', primary.length === 0 && secondary.length === 0);
+			if (options?.toolbarOptions?.forceLeadingSeparatorInPrimaryActions && primary.length > 0) {
+				primary.unshift(new Separator());
+			}
 			super.setActions(primary, secondary);
 		};
 

src/vs/workbench/browser/parts/media/paneCompositePart.css

@@ -12,6 +12,10 @@
 	margin-right: 4px;
 }
 
+.monaco-workbench .pane-composite-part > .title > .global-actions .monaco-action-bar .action-item .action-label.separator {
+	background-color: var(--vscode-disabledForeground);
+}
+
 .monaco-workbench .pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item .action-label {
 	outline-offset: -2px;
 }

src/vs/workbench/browser/parts/paneCompositeBar.ts

@@ -110,6 +110,7 @@ export class PaneCompositeBar extends Disposable {
 		@IWorkbenchLayoutService protected readonly layoutService: IWorkbenchLayoutService,
 	) {
 		super();
+
 		this.location = paneCompositePart.partId === Parts.PANEL_PART
 			? ViewContainerLocation.Panel : paneCompositePart.partId === Parts.AUXILIARYBAR_PART
 				? ViewContainerLocation.AuxiliaryBar : ViewContainerLocation.Sidebar;
@@ -219,6 +220,7 @@ export class PaneCompositeBar extends Disposable {
 	}
 
 	private registerListeners(): void {
+
 		// View Container Changes
 		this._register(this.viewDescriptorService.onDidChangeViewContainers(({ added, removed }) => this.onDidChangeViewContainers(added, removed)));
 		this._register(this.viewDescriptorService.onDidChangeContainerLocation(({ viewContainer, from, to }) => this.onDidChangeViewContainerLocation(viewContainer, from, to)));

src/vs/workbench/browser/parts/paneCompositePart.ts

@@ -366,7 +366,8 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 				hoverDelegate: this.toolbarHoverDelegate,
 				hiddenItemStrategy: HiddenItemStrategy.NoHide,
 				highlightToggledItems: true,
-				telemetrySource: this.nameForTelemetry
+				telemetrySource: this.nameForTelemetry,
+				toolbarOptions: { forceLeadingSeparatorInPrimaryActions: true /* separate from view toolbar */ }
 			}
 		));
 
@@ -452,11 +453,13 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 
 	protected override createHeaderArea(): HTMLElement {
 		const headerArea = super.createHeaderArea();
+
 		return this.createHeaderFooterCompositeBarArea(headerArea);
 	}
 
 	protected override createFooterArea(): HTMLElement {
 		const footerArea = super.createFooterArea();
+
 		return this.createHeaderFooterCompositeBarArea(footerArea);
 	}