scm view improvements

src/vs/base/browser/ui/dropdown/dropdown.ts

@@ -11,7 +11,7 @@ import { IDisposable } from 'vs/base/common/lifecycle';
 import { IContextViewProvider, IAnchor, AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { IMenuOptions } from 'vs/base/browser/ui/menu/menu';
 import { ResolvedKeybinding, KeyCode } from 'vs/base/common/keyCodes';
-import { EventHelper, EventType, removeClass, addClass, append, $, addDisposableListener, addClasses } from 'vs/base/browser/dom';
+import { EventHelper, EventType, removeClass, addClass, append, $, addDisposableListener, addClasses, DOMEvent } from 'vs/base/browser/dom';
 import { IContextMenuDelegate } from 'vs/base/browser/contextmenu';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { Emitter } from 'vs/base/common/event';
@@ -122,7 +122,7 @@ export class BaseDropdown extends ActionRunner {
 		return !!this.visible;
 	}
 
-	protected onEvent(e: Event, activeElement: HTMLElement): void {
+	protected onEvent(e: DOMEvent, activeElement: HTMLElement): void {
 		this.hide();
 	}
 
@@ -294,6 +294,9 @@ export class DropdownMenuActionViewItem extends BaseActionViewItem {
 	private anchorAlignmentProvider: (() => AnchorAlignment) | undefined;
 	private menuAsChild?: boolean;
 
+	private _onDidChangeVisibility = this._register(new Emitter<boolean>());
+	readonly onDidChangeVisibility = this._onDidChangeVisibility.event;
+
 	constructor(action: IAction, menuActions: ReadonlyArray<IAction>, contextMenuProvider: IContextMenuProvider, actionViewItemProvider: IActionViewItemProvider | undefined, actionRunner: IActionRunner, keybindings: ((action: IAction) => ResolvedKeybinding | undefined) | undefined, clazz: string | undefined, anchorAlignmentProvider?: () => AnchorAlignment, menuAsChild?: boolean);
 	constructor(action: IAction, actionProvider: IActionProvider, contextMenuProvider: IContextMenuProvider, actionViewItemProvider: IActionViewItemProvider | undefined, actionRunner: IActionRunner, keybindings: ((action: IAction) => ResolvedKeybinding) | undefined, clazz: string | undefined, anchorAlignmentProvider?: () => AnchorAlignment, menuAsChild?: boolean);
 	constructor(action: IAction, menuActionsOrProvider: ReadonlyArray<IAction> | IActionProvider, contextMenuProvider: IContextMenuProvider, actionViewItemProvider: IActionViewItemProvider | undefined, actionRunner: IActionRunner, keybindings: ((action: IAction) => ResolvedKeybinding | undefined) | undefined, clazz: string | undefined, anchorAlignmentProvider?: () => AnchorAlignment, menuAsChild?: boolean) {
@@ -339,7 +342,10 @@ export class DropdownMenuActionViewItem extends BaseActionViewItem {
 		}
 
 		this.dropdownMenu = this._register(new DropdownMenu(container, options));
-		this._register(this.dropdownMenu.onDidChangeVisibility(visible => this.element?.setAttribute('aria-expanded', `${visible}`)));
+		this._register(this.dropdownMenu.onDidChangeVisibility(visible => {
+			this.element?.setAttribute('aria-expanded', `${visible}`);
+			this._onDidChangeVisibility.fire(visible);
+		}));
 
 		this.dropdownMenu.menuOptions = {
 			actionViewItemProvider: this.actionViewItemProvider,

src/vs/base/browser/ui/toolbar/toolbar.ts

@@ -9,10 +9,11 @@ import { Action, IActionRunner, IAction } from 'vs/base/common/actions';
 import { ActionBar, ActionsOrientation, IActionViewItemProvider } from 'vs/base/browser/ui/actionbar/actionbar';
 import { IContextMenuProvider, DropdownMenuActionViewItem } from 'vs/base/browser/ui/dropdown/dropdown';
 import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
-import { Disposable, MutableDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { withNullAsUndefined } from 'vs/base/common/types';
 import { Codicon, registerIcon } from 'vs/base/common/codicons';
+import { Emitter } from 'vs/base/common/event';
 
 export const CONTEXT = 'context.toolbar';
 
@@ -35,17 +36,21 @@ export class ToolBar extends Disposable {
 	private options: IToolBarOptions;
 	private actionBar: ActionBar;
 	private toggleMenuAction: ToggleMenuAction;
-	private toggleMenuActionViewItem = this._register(new MutableDisposable<DropdownMenuActionViewItem>());
+	private toggleMenuActionViewItem: DropdownMenuActionViewItem | undefined;
+	private toggleMenuActionViewItemDisposable: IDisposable = Disposable.None;
 	private hasSecondaryActions: boolean = false;
 	private lookupKeybindings: boolean;
 
+	private _onDidChangeDropdownVisibility = this._register(new Emitter<boolean>());
+	readonly onDidChangeDropdownVisibility = this._onDidChangeDropdownVisibility.event;
+
 	constructor(container: HTMLElement, contextMenuProvider: IContextMenuProvider, options: IToolBarOptions = { orientation: ActionsOrientation.HORIZONTAL }) {
 		super();
 
 		this.options = options;
 		this.lookupKeybindings = typeof this.options.getKeyBinding === 'function';
 
-		this.toggleMenuAction = this._register(new ToggleMenuAction(() => this.toggleMenuActionViewItem.value && this.toggleMenuActionViewItem.value.show(), options.toggleMenuTitle));
+		this.toggleMenuAction = this._register(new ToggleMenuAction(() => this.toggleMenuActionViewItem?.show(), options.toggleMenuTitle));
 
 		let element = document.createElement('div');
 		element.className = 'monaco-toolbar';
@@ -60,8 +65,10 @@ export class ToolBar extends Disposable {
 				// Return special action item for the toggle menu action
 				if (action.id === ToggleMenuAction.ID) {
 
+					this.toggleMenuActionViewItemDisposable.dispose();
+
 					// Create new
-					this.toggleMenuActionViewItem.value = new DropdownMenuActionViewItem(
+					this.toggleMenuActionViewItem = new DropdownMenuActionViewItem(
 						action,
 						(<ToggleMenuAction>action).menuActions,
 						contextMenuProvider,
@@ -72,9 +79,14 @@ export class ToolBar extends Disposable {
 						this.options.anchorAlignmentProvider,
 						true
 					);
-					this.toggleMenuActionViewItem.value.setActionContext(this.actionBar.context);
+					this.toggleMenuActionViewItem.setActionContext(this.actionBar.context);
+
+					this.toggleMenuActionViewItemDisposable = combinedDisposable(
+						this.toggleMenuActionViewItem,
+						this.toggleMenuActionViewItem.onDidChangeVisibility(e => this._onDidChangeDropdownVisibility.fire(e))
+					);
 
-					return this.toggleMenuActionViewItem.value;
+					return this.toggleMenuActionViewItem;
 				}
 
 				return options.actionViewItemProvider ? options.actionViewItemProvider(action) : undefined;
@@ -92,8 +104,8 @@ export class ToolBar extends Disposable {
 
 	set context(context: unknown) {
 		this.actionBar.context = context;
-		if (this.toggleMenuActionViewItem.value) {
-			this.toggleMenuActionViewItem.value.setActionContext(context);
+		if (this.toggleMenuActionViewItem) {
+			this.toggleMenuActionViewItem.setActionContext(context);
 		}
 	}
 
@@ -151,6 +163,11 @@ export class ToolBar extends Disposable {
 			}
 		};
 	}
+
+	dispose(): void {
+		super.dispose();
+		this.toggleMenuActionViewItemDisposable.dispose();
+	}
 }
 
 class ToggleMenuAction extends Action {

src/vs/workbench/contrib/scm/browser/media/scm.css

@@ -38,20 +38,12 @@
 	flex-flow: nowrap;
 }
 
-.scm-viewlet .scm-provider > .icon {
-	margin-right: 4px;
-}
-
 .scm-viewlet .scm-provider > .label {
 	display: flex;
 	flex-shrink: 1;
 	overflow: hidden;
 }
 
-.scm-viewlet .scm-provider > .label > .name {
-	text-decoration: underline;
-}
-
 .scm-viewlet .scm-provider > .status {
 	flex: 1;
 	display: flex;
@@ -105,7 +97,6 @@
 	flex: 1;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	text-decoration: underline;
 }
 
 .scm-viewlet .monaco-list-row .resource {
@@ -149,10 +140,13 @@
 }
 
 .scm-viewlet .monaco-list .monaco-list-row:hover .scm-provider > .actions,
+.scm-viewlet .monaco-list .monaco-list-row .scm-provider.active > .actions,
+.scm-viewlet .monaco-list .monaco-list-row.selected .scm-provider > .actions,
+.scm-viewlet .monaco-list .monaco-list-row.focused .scm-provider > .actions,
 .scm-viewlet .monaco-list .monaco-list-row:hover .resource-group > .actions,
-.scm-viewlet .monaco-list .monaco-list-row:hover .resource > .name > .monaco-icon-label > .actions,
 .scm-viewlet .monaco-list .monaco-list-row.selected .resource-group > .actions,
 .scm-viewlet .monaco-list .monaco-list-row.focused .resource-group > .actions,
+.scm-viewlet .monaco-list .monaco-list-row:hover .resource > .name > .monaco-icon-label > .actions,
 .scm-viewlet .monaco-list .monaco-list-row.selected .resource > .name > .monaco-icon-label > .actions,
 .scm-viewlet .monaco-list .monaco-list-row.focused .resource > .name > .monaco-icon-label > .actions,
 .scm-viewlet .monaco-list:not(.selection-multiple) .monaco-list-row .resource:hover > .actions {
@@ -179,7 +173,7 @@
 
 .scm-viewlet .scm-input {
 	height: 100%;
-	margin-left: 6px;
+	margin-left: 9px;
 }
 
 .scm-viewlet .scm-editor {

src/vs/workbench/contrib/scm/browser/scmViewPane.ts

@@ -176,7 +176,6 @@ class RepositoryRenderer implements ICompressibleTreeRenderer<ISCMRepository, Fu
 		addClass(container.parentElement!.parentElement!.querySelector('.monaco-tl-twistie')! as HTMLElement, 'force-twistie');
 
 		const provider = append(container, $('.scm-provider'));
-		append(provider, $('span.icon.codicon.codicon-repo'));
 		const label = append(provider, $('.label'));
 		const name = append(label, $('span.name'));
 		const status = append(provider, $('.status'));
@@ -186,8 +185,10 @@ class RepositoryRenderer implements ICompressibleTreeRenderer<ISCMRepository, Fu
 		const countContainer = append(provider, $('.count'));
 		const count = new CountBadge(countContainer);
 		const badgeStyler = attachBadgeStyler(count, this.themeService);
+		const visibilityDisposable = toolBar.onDidChangeDropdownVisibility(e => toggleClass(provider, 'active', e));
+
 		const disposable = Disposable.None;
-		const templateDisposable = combinedDisposable(statusActionBar, toolBar, badgeStyler);
+		const templateDisposable = combinedDisposable(statusActionBar, visibilityDisposable, toolBar, badgeStyler);
 
 		return { name, countContainer, count, statusActionBar, toolBar, disposable, templateDisposable };
 	}
@@ -265,6 +266,9 @@ class InputRenderer implements ICompressibleTreeRenderer<ISCMInput, FuzzyScore,
 	) { }
 
 	renderTemplate(container: HTMLElement): InputTemplate {
+		// hack
+		addClass(container.parentElement!.parentElement!.querySelector('.monaco-tl-twistie')! as HTMLElement, 'force-no-twistie');
+
 		const inputElement = append(container, $('.scm-input'));
 		const inputWidget = this.instantiationService.createInstance(SCMInputWidget, inputElement);
 

src/vs/workbench/contrib/views/browser/media/views.css

@@ -7,7 +7,8 @@
 
 .file-icon-themable-tree.align-icons-and-twisties .monaco-tl-twistie:not(.force-twistie):not(.collapsible),
 .file-icon-themable-tree .align-icon-with-twisty .monaco-tl-twistie:not(.force-twistie):not(.collapsible),
-.file-icon-themable-tree.hide-arrows .monaco-tl-twistie:not(.force-twistie) {
+.file-icon-themable-tree.hide-arrows .monaco-tl-twistie:not(.force-twistie),
+.file-icon-themable-tree .monaco-tl-twistie.force-no-twistie {
 	background-image: none !important;
 	width: 0 !important;
 	padding-right: 0 !important;