Fix #39697

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

@@ -41,13 +41,21 @@
 	text-transform: uppercase;
 	font-size: 11px;
 	margin-left: 33px;
-	margin-right: 0px;
+	margin-right: 5px;
 	cursor: pointer;
 	display: flex;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
+.settings-tabs-widget > .monaco-action-bar .actions-container {
+	justify-content: flex-start;
+}
+
+.settings-tabs-widget > .monaco-action-bar .action-item {
+	padding: 3px 0px;
+}
+
 .settings-tabs-widget > .monaco-action-bar .action-item .action-title {
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -89,18 +97,6 @@
 	opacity: 1;
 }
 
-.settings-tabs-widget > .monaco-action-bar:not(.empty-workbench) .action-item .action-label.checked {
-	border-bottom: 1px solid;
-}
-
-.vs .settings-tabs-widget > .monaco-action-bar .action-item .action-label.checked {
-	border-bottom-color: #ccceda;
-}
-
-.vs-dark .settings-tabs-widget > .monaco-action-bar .action-item .action-label.checked {
-	border-bottom-color: #404047;
-}
-
 .preferences-header > .settings-header-widget {
 	flex: 1;
 	display: flex;

src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts

@@ -12,7 +12,7 @@ import { Disposable, IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { Widget } from 'vs/base/browser/ui/widget';
 import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
 import Event, { Emitter } from 'vs/base/common/event';
-import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { IKeyboardEvent, StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition, OverlayWidgetPositionPreference, IViewZone, IEditorMouseEvent, MouseTargetType } from 'vs/editor/browser/editorBrowser';
 import * as editorCommon from 'vs/editor/common/editorCommon';
@@ -24,16 +24,17 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IWorkspaceContextService, WorkbenchState, IWorkspaceFolder } from 'vs/platform/workspace/common/workspace';
 import { IAction, Action } from 'vs/base/common/actions';
 import { attachInputBoxStyler, attachStylerCallback, attachCheckboxStyler } from 'vs/platform/theme/common/styler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import { Position } from 'vs/editor/common/core/position';
 import { ICursorPositionChangedEvent } from 'vs/editor/common/controller/cursorEvents';
-import { buttonBackground, buttonForeground, badgeForeground, badgeBackground, contrastBorder, errorForeground } from 'vs/platform/theme/common/colorRegistry';
+import { buttonBackground, buttonForeground, badgeForeground, badgeBackground, contrastBorder, errorForeground, focusBorder, activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { Separator, ActionBar, ActionsOrientation, BaseActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
 import { MarkdownString } from 'vs/base/common/htmlContent';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import { IMarginData } from 'vs/editor/browser/controller/mouseTarget';
 import { render as renderOcticons } from 'vs/base/browser/ui/octiconLabel/octiconLabel';
+import { PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_INACTIVE_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
 
 export class SettingsHeaderWidget extends Widget implements IViewZone {
 
@@ -333,15 +334,26 @@ export class FolderSettingsActionItem extends BaseActionItem {
 		this.anchorElement = DOM.$('a.action-label', {
 			role: 'button',
 			'aria-haspopup': 'true',
-			// 'tabindex': '0'
+			'tabindex': '0'
 		}, this.labelElement, this.detailsElement, this.dropDownElement);
 		this.disposables.push(DOM.addDisposableListener(this.anchorElement, DOM.EventType.CLICK, e => this.onClick(e)));
+		this.disposables.push(DOM.addDisposableListener(this.anchorElement, DOM.EventType.KEY_UP, e => this.onKeyUp(e)));
 
 		DOM.append(this.container, this.anchorElement);
 
 		this.update();
 	}
 
+	private onKeyUp(event: any): void {
+		const keyboardEvent = new StandardKeyboardEvent(event);
+		switch (keyboardEvent.keyCode) {
+			case KeyCode.Enter:
+			case KeyCode.Space:
+				this.onClick(event);
+				return;
+		}
+	}
+
 	public onClick(event: DOM.EventLike): void {
 		DOM.EventHelper.stop(event, true);
 		if (!this.folder || this._action.checked) {
@@ -399,7 +411,10 @@ export class FolderSettingsActionItem extends BaseActionItem {
 		this.contextMenuService.showContextMenu({
 			getAnchor: () => this.container,
 			getActions: () => TPromise.as(this.getDropdownMenuActions()),
-			getActionItem: (action) => null
+			getActionItem: (action) => null,
+			onHide: () => {
+				this.anchorElement.blur();
+			}
 		});
 	}
 
@@ -455,7 +470,7 @@ export class SettingsTargetsWidget extends Widget {
 	private create(parent: HTMLElement): void {
 		const settingsTabsWidget = DOM.append(parent, DOM.$('.settings-tabs-widget'));
 		this.settingsSwitcherBar = this._register(new ActionBar(settingsTabsWidget, {
-			orientation: ActionsOrientation.HORIZONTAL_REVERSE,
+			orientation: ActionsOrientation.HORIZONTAL,
 			ariaLabel: localize('settingsSwitcherBarAriaLabel', "Settings Switcher"),
 			animated: false,
 			actionItemProvider: (action: Action) => action.id === 'folderSettings' ? this.folderSettings : null
@@ -472,7 +487,7 @@ export class SettingsTargetsWidget extends Widget {
 
 		this.update();
 
-		this.settingsSwitcherBar.push([folderSettingsAction, this.workspaceSettings, this.userSettings]);
+		this.settingsSwitcherBar.push([this.userSettings, this.workspaceSettings, folderSettingsAction]);
 	}
 
 	public get settingsTarget(): SettingsTarget {
@@ -815,3 +830,72 @@ export class EditPreferenceWidget<T> extends Disposable {
 		super.dispose();
 	}
 }
+
+registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
+
+	collector.addRule(`
+		.settings-tabs-widget > .monaco-action-bar .action-item .action-label:focus,
+		.settings-tabs-widget > .monaco-action-bar .action-item .action-label.checked {
+			border-bottom: 1px solid;
+		}
+	`);
+	// Title Active
+	const titleActive = theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND);
+	const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
+	if (titleActive || titleActiveBorder) {
+		collector.addRule(`
+			.settings-tabs-widget > .monaco-action-bar .action-item .action-label:hover,
+			.settings-tabs-widget > .monaco-action-bar .action-item .action-label.checked {
+				color: ${titleActive};
+				border-bottom-color: ${titleActiveBorder};
+			}
+		`);
+	}
+
+	// Title Inactive
+	const titleInactive = theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND);
+	if (titleInactive) {
+		collector.addRule(`
+			.settings-tabs-widget > .monaco-action-bar .action-item .action-label {
+				color: ${titleInactive};
+			}
+		`);
+	}
+
+	// Title focus
+	const focusBorderColor = theme.getColor(focusBorder);
+	if (focusBorderColor) {
+		collector.addRule(`
+			.settings-tabs-widget > .monaco-action-bar .action-item .action-label:focus {
+				border-bottom-color: ${focusBorderColor} !important;
+			}
+			`);
+		collector.addRule(`
+			.settings-tabs-widget > .monaco-action-bar .action-item .action-label:focus {
+				outline: none;
+			}
+			`);
+	}
+
+	// Styling with Outline color (e.g. high contrast theme)
+	const outline = theme.getColor(activeContrastBorder);
+	if (outline) {
+		const outline = theme.getColor(activeContrastBorder);
+
+		collector.addRule(`
+			.settings-tabs-widget > .monaco-action-bar .action-item .action-label.checked,
+			.settings-tabs-widget > .monaco-action-bar .action-item .action-label:hover {
+				outline-color: ${outline};
+				outline-width: 1px;
+				outline-style: solid;
+				border-bottom: none;
+				padding-bottom: 0;
+				outline-offset: 3px;
+			}
+
+			.settings-tabs-widget > .monaco-action-bar .action-item .action-label:not(.checked):hover {
+				outline-style: dashed;
+			}
+		`);
+	}
+});
\ No newline at end of file