#3355 - Change "Show overrides" to a checkbox for now

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

@@ -39,10 +39,6 @@
 	display: flex;
 }
 
-.settings-editor > .settings-header .settings-target-container {
-	flex: 1;
-}
-
 .settings-editor > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item:not(:first-child) .action-label {
 	margin-left: 33px;
 }
@@ -53,6 +49,8 @@
 }
 
 .settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right {
+	margin-left: auto;
+	padding-top: 3px;
 	display: flex;
 }
 
@@ -61,14 +59,18 @@
 .settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right .open-settings-button:active {
 	background: none;
 	opacity: 0.7;
+	padding: 0;
 	text-decoration: underline;
 }
 
-.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right .configured-only-button {
+.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right #configured-only-checkbox {
+	flex-shrink: 0;
+}
+
+.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right .configured-only-label {
 	white-space: nowrap;
-	padding: 4px 10px;
 	margin-right: 10px;
-	height: 26px;
+	margin-left: 2px;
 }
 
 .settings-editor > .settings-body .settings-list-container .settings-list-offset-helper {

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

@@ -99,7 +99,7 @@ export class SettingsEditor2 extends BaseEditor {
 
 	private showConfiguredSettingsOnly = false;
 	private showAllSettings = false;
-	private showConfiguredSettingsOnlyButton: Button;
+	private showConfiguredSettingsOnlyCheckbox: HTMLInputElement;
 
 	private settingsListContainer: HTMLElement;
 	private settingsList: List<IListEntry>;
@@ -204,13 +204,15 @@ export class SettingsEditor2 extends BaseEditor {
 	private createHeaderControls(parent: HTMLElement): void {
 		const headerControlsContainerRight = DOM.append(parent, $('.settings-header-controls-right'));
 
-		this.showConfiguredSettingsOnlyButton = this._register(new Button(headerControlsContainerRight, { title: true }));
-		this.showConfiguredSettingsOnlyButton.label = localize('showOverrides', "Show overrides");
-		this.showConfiguredSettingsOnlyButton.element.classList.add('configured-only-button');
+		this.showConfiguredSettingsOnlyCheckbox = DOM.append(headerControlsContainerRight, $('input#configured-only-checkbox'));
+		this.showConfiguredSettingsOnlyCheckbox.type = 'checkbox';
+		const showConfiguredSettingsOnlyLabel = <HTMLLabelElement>DOM.append(headerControlsContainerRight, $('label.configured-only-label'));
+		showConfiguredSettingsOnlyLabel.textContent = localize('showOverriddenOnly', "Show overridden only");
+		showConfiguredSettingsOnlyLabel.htmlFor = 'configured-only-checkbox';
 
-		this._register(this.showConfiguredSettingsOnlyButton.onDidClick(() => this.onShowConfiguredOnlyClicked()));
+		this._register(DOM.addDisposableListener(this.showConfiguredSettingsOnlyCheckbox, 'change', e => this.onShowConfiguredOnlyClicked()));
 
-		const openSettingsButton = this._register(new Button(headerControlsContainerRight, { title: true, buttonBackground: null }));
+		const openSettingsButton = this._register(new Button(headerControlsContainerRight, { title: true, buttonBackground: null, buttonHoverBackground: null }));
 		openSettingsButton.label = localize('openSettingsLabel', "Open config file");
 		openSettingsButton.element.classList.add('open-settings-button');
 
@@ -268,7 +270,7 @@ export class SettingsEditor2 extends BaseEditor {
 	}
 
 	private onShowConfiguredOnlyClicked(): void {
-		this.showConfiguredSettingsOnly = !this.showConfiguredSettingsOnly;
+		this.showConfiguredSettingsOnly = this.showConfiguredSettingsOnlyCheckbox.checked;
 		this.render();
 	}