Basic GUI for settings - #3355

src/vs/workbench/parts/preferences/browser/media/action-remove-dark.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#e8e8e8" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>
\ No newline at end of file

src/vs/workbench/parts/preferences/browser/media/action-remove-focus.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#FFF" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>
\ No newline at end of file

src/vs/workbench/parts/preferences/browser/media/action-remove.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#424242" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>
\ No newline at end of file

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

@@ -40,7 +40,6 @@
 .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
 	text-transform: uppercase;
 	font-size: 11px;
-	margin-left: 33px;
 	margin-right: 5px;
 	cursor: pointer;
 	display: flex;
@@ -48,6 +47,11 @@
 	text-overflow: ellipsis;
 }
 
+.default-preferences-editor-container > .preferences-header-container > .default-preferences-header,
+.preferences-editor .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
+	margin-left: 33px;
+}
+
 .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
 	display: block;
 }

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

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.settings-editor {
+	padding: 11px 0px 0px 27px;
+	max-width: 800px;
+	margin: auto;
+}
+
+/* header styling */
+
+.settings-editor > .settings-header {
+	padding: 0px 10px 0px 0px;
+}
+
+.settings-editor > .settings-header > .search-container {
+	position: relative;
+}
+
+.settings-editor > .settings-header .search-container > .settings-search-input {
+	vertical-align: middle;
+}
+
+.settings-editor > .settings-header .search-container > .settings-search-input > .monaco-inputbox {
+	height: 30px;
+	width: 100%;
+}
+
+.settings-editor > .settings-header .search-container > .settings-search-input > .monaco-inputbox .input {
+	font-size: 14px;
+	padding-left:10px;
+}
+
+.settings-editor > .settings-header > .settings-header-controls-container {
+	margin-top: 7px;
+	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;
+}
+
+.settings-editor > .settings-header .open-settings-container {
+	/* compensate for 3px padding inside target widget, should be cleaned up */
+	padding-top: 3px;
+	display: flex;
+	opacity: 0.7;
+}
+
+.settings-editor > .settings-header .open-settings-container > .file-name {
+	text-decoration: underline;
+	cursor: pointer;
+	margin-left: 4px;
+}
+
+.settings-editor > .settings-body .settings-nav-controls {
+	margin-bottom: 15px;
+	display: flex;
+}
+
+.settings-editor > .settings-body .settings-nav-controls .monaco-custom-checkbox {
+	margin-right: 5px;
+}
+
+.settings-editor > .settings-body .settings-list-container .settings-list-offset-helper {
+	opacity: 0;
+	position: absolute;
+}
+
+.settings-editor > .settings-body .settings-nav-container {
+	margin-top: 18px;
+	margin-left: 410px;
+}
+
+.settings-editor > .settings-body .settings-nav-container .settings-nav-controls-configured-only {
+	margin-right: 10px;
+}
+
+.settings-editor > .settings-body .settings-list-container .monaco-list::before {
+	outline: none !important;
+}
+
+.settings-editor > .settings-body .settings-list-container {
+	flex: 1;
+	border-spacing: 0;
+	border-collapse: separate;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row {
+	cursor: default;
+	white-space: normal;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row.odd {
+	background-color: rgba(130, 130, 130, 0.04);
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row.setting-item {
+	padding: 3px 0px;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container {
+	display: flex;
+	height: 100%;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container > .setting-item-left {
+	width: 600px;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container > .setting-item-right {
+	flex: 1;
+	margin: 35px 10px;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-title {
+	line-height: initial;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-label {
+	font-size: 15px;
+	font-weight: bold;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-key {
+	margin-left: 10px;
+	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
+	font-size: 90%;
+	opacity: 0.8;
+	display: none;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-description {
+	opacity: 0.6;
+	margin-top: 5px;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value {
+	display: flex;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .monaco-select-box {
+	width: 100%;
+	font: inherit;
+}
+
+.settings-editor .settings-nav-controls .monaco-custom-checkbox.unchecked,
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .monaco-custom-checkbox.unchecked {
+	background: url("action-remove.svg") center center no-repeat;
+	/* Unchecked border style needs to be stylable on checkbox. Themeable? */
+	border-color: #75715e !important;
+}
+
+.settings-editor .settings-nav-controls .monaco-custom-checkbox.checked,
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .monaco-custom-checkbox.checked {
+	background: url("action-remove-focus.svg") center center no-repeat;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .monaco-custom-checkbox {
+	margin-left: auto;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .setting-reset-button.monaco-button {
+	display: inline-block;
+	background: url("action-remove-dark.svg") center center no-repeat;
+	width: 16px;
+	height: 16px;
+	margin-left: 3px;
+	visibility: hidden;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-configured:hover .setting-item-value > .setting-reset-button.monaco-button {
+	visibility: visible;
+}
+
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-overrides {
+	opacity: 0.6;
+	margin-top: 5px;
+	text-align: center;
+}

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

@@ -34,6 +34,25 @@ export class OpenRawDefaultSettingsAction extends Action {
 	}
 }
 
+export class OpenSettings2Action extends Action {
+
+	public static readonly ID = 'workbench.action.openSettings2';
+	public static readonly LABEL = nls.localize('openSettings2', "Open Settings (Experimental)");
+
+	constructor(
+		id: string,
+		label: string,
+		@IPreferencesService private preferencesService2: IPreferencesService
+	) {
+		super(id, label);
+	}
+
+	public run(event?: any): TPromise<any> {
+		return this.preferencesService2.openSettings2();
+	}
+}
+
+
 export class OpenSettingsAction extends Action {
 
 	public static readonly ID = 'workbench.action.openSettings';

src/vs/workbench/parts/preferences/electron-browser/preferences.contribution.ts

@@ -16,9 +16,10 @@ import { registerSingleton } from 'vs/platform/instantiation/common/extensions';
 import { KeyMod, KeyChord, KeyCode } from 'vs/base/common/keyCodes';
 import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
 import { PreferencesEditor } from 'vs/workbench/parts/preferences/browser/preferencesEditor';
-import { DefaultPreferencesEditorInput, PreferencesEditorInput, KeybindingsEditorInput } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
+import { SettingsEditor2 } from 'vs/workbench/parts/preferences/browser/settingsEditor2';
+import { DefaultPreferencesEditorInput, PreferencesEditorInput, KeybindingsEditorInput, PreferencesEditorInput2 } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
 import { KeybindingsEditor } from 'vs/workbench/parts/preferences/browser/keybindingsEditor';
-import { OpenRawDefaultSettingsAction, OpenSettingsAction, OpenGlobalSettingsAction, OpenGlobalKeybindingsFileAction, OpenWorkspaceSettingsAction, OpenFolderSettingsAction, ConfigureLanguageBasedSettingsAction, OPEN_FOLDER_SETTINGS_COMMAND, OpenGlobalKeybindingsAction } from 'vs/workbench/parts/preferences/browser/preferencesActions';
+import { OpenRawDefaultSettingsAction, OpenSettingsAction, OpenGlobalSettingsAction, OpenGlobalKeybindingsFileAction, OpenWorkspaceSettingsAction, OpenFolderSettingsAction, ConfigureLanguageBasedSettingsAction, OPEN_FOLDER_SETTINGS_COMMAND, OpenGlobalKeybindingsAction, OpenSettings2Action } from 'vs/workbench/parts/preferences/browser/preferencesActions';
 import {
 	IKeybindingsEditor, IPreferencesSearchService, CONTEXT_KEYBINDING_FOCUS, CONTEXT_KEYBINDINGS_EDITOR, CONTEXT_KEYBINDINGS_SEARCH_FOCUS, KEYBINDINGS_EDITOR_COMMAND_DEFINE, KEYBINDINGS_EDITOR_COMMAND_REMOVE, KEYBINDINGS_EDITOR_COMMAND_SEARCH,
 	KEYBINDINGS_EDITOR_COMMAND_COPY, KEYBINDINGS_EDITOR_COMMAND_RESET, KEYBINDINGS_EDITOR_COMMAND_COPY_COMMAND, KEYBINDINGS_EDITOR_COMMAND_SHOW_SIMILAR, KEYBINDINGS_EDITOR_COMMAND_FOCUS_KEYBINDINGS, KEYBINDINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS
@@ -47,6 +48,17 @@ Registry.as<IEditorRegistry>(EditorExtensions.Editors).registerEditor(
 	]
 );
 
+Registry.as<IEditorRegistry>(EditorExtensions.Editors).registerEditor(
+	new EditorDescriptor(
+		SettingsEditor2,
+		SettingsEditor2.ID,
+		nls.localize('defaultPreferencesEditor2', "Default Preferences Editor 2")
+	),
+	[
+		new SyncDescriptor(PreferencesEditorInput2)
+	]
+);
+
 Registry.as<IEditorRegistry>(EditorExtensions.Editors).registerEditor(
 	new EditorDescriptor(
 		KeybindingsEditor,
@@ -167,6 +179,7 @@ const category = nls.localize('preferences', "Preferences");
 const registry = Registry.as<IWorkbenchActionRegistry>(Extensions.WorkbenchActions);
 registry.registerWorkbenchAction(new SyncActionDescriptor(OpenRawDefaultSettingsAction, OpenRawDefaultSettingsAction.ID, OpenRawDefaultSettingsAction.LABEL), 'Preferences: Open Raw Default Settings', category);
 registry.registerWorkbenchAction(new SyncActionDescriptor(OpenSettingsAction, OpenSettingsAction.ID, OpenSettingsAction.LABEL, { primary: KeyMod.CtrlCmd | KeyCode.US_COMMA }), 'Preferences: Open Settings', category);
+registry.registerWorkbenchAction(new SyncActionDescriptor(OpenSettings2Action, OpenSettings2Action.ID, OpenSettings2Action.LABEL), 'Preferences: Open Settings (Experimental)', category);
 registry.registerWorkbenchAction(new SyncActionDescriptor(OpenGlobalSettingsAction, OpenGlobalSettingsAction.ID, OpenGlobalSettingsAction.LABEL), 'Preferences: Open User Settings', category);
 registry.registerWorkbenchAction(new SyncActionDescriptor(OpenGlobalKeybindingsAction, OpenGlobalKeybindingsAction.ID, OpenGlobalKeybindingsAction.LABEL, { primary: KeyChord(KeyMod.CtrlCmd | KeyCode.KEY_K, KeyMod.CtrlCmd | KeyCode.KEY_S) }), 'Preferences: Open Keyboard Shortcuts', category);
 registry.registerWorkbenchAction(new SyncActionDescriptor(OpenGlobalKeybindingsFileAction, OpenGlobalKeybindingsFileAction.ID, OpenGlobalKeybindingsFileAction.LABEL, { primary: null }), 'Preferences: Open Keyboard Shortcuts File', category);

src/vs/workbench/parts/preferences/electron-browser/preferencesSearch.ts

@@ -403,7 +403,7 @@ function remoteSettingToISetting(remoteSetting: IRemoteSetting): IExtensionSetti
 	};
 }
 
-class SettingMatches {
+export class SettingMatches {
 
 	private readonly descriptionMatchingWords: Map<string, IRange[]> = new Map<string, IRange[]>();
 	private readonly keyMatchingWords: Map<string, IRange[]> = new Map<string, IRange[]>();

src/vs/workbench/services/preferences/browser/preferencesService.ts

@@ -24,7 +24,7 @@ import { IEnvironmentService } from 'vs/platform/environment/common/environment'
 import { IPreferencesService, IPreferencesEditorModel, ISetting, getSettingsTargetName, FOLDER_SETTINGS_PATH, DEFAULT_SETTINGS_EDITOR_SETTING } from 'vs/workbench/services/preferences/common/preferences';
 import { SettingsEditorModel, DefaultSettingsEditorModel, DefaultKeybindingsEditorModel, defaultKeybindingsContents, DefaultSettings, WorkspaceConfigurationEditorModel } from 'vs/workbench/services/preferences/common/preferencesModels';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { DefaultPreferencesEditorInput, PreferencesEditorInput, KeybindingsEditorInput } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
+import { DefaultPreferencesEditorInput, PreferencesEditorInput, KeybindingsEditorInput, PreferencesEditorInput2 } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
 import { ITextModelService } from 'vs/editor/common/services/resolverService';
 import { getCodeEditor } from 'vs/editor/browser/services/codeEditorService';
 import { EditOperation } from 'vs/editor/common/core/editOperation';
@@ -182,6 +182,11 @@ export class PreferencesService extends Disposable implements IPreferencesServic
 		return this.openOrSwitchSettings(ConfigurationTarget.USER, this.userSettingsResource, options, position);
 	}
 
+	openSettings2(): TPromise<IEditor> {
+		return this.createDefaultSettingsEditorModel(this.userSettingsResource)
+			.then(model => this.editorService.openEditor(this.instantiationService.createInstance(PreferencesEditorInput2, model), { pinned: true }).then(() => null));
+	}
+
 	openWorkspaceSettings(options?: IEditorOptions, position?: EditorPosition): TPromise<IEditor> {
 		if (this.contextService.getWorkbenchState() === WorkbenchState.EMPTY) {
 			this.notificationService.info(nls.localize('openFolderFirst', "Open a folder first to create workspace settings"));

src/vs/workbench/services/preferences/common/preferences.ts

@@ -41,6 +41,10 @@ export interface ISetting {
 	descriptionRanges: IRange[];
 	overrides?: ISetting[];
 	overrideOf?: ISetting;
+
+	// TODO@roblou maybe need new type and new EditorModel for GUI editor instead of ISetting which is used for text settings editor
+	type?: string | string[];
+	enum?: string[];
 }
 
 export interface IExtensionSetting extends ISetting {
@@ -138,6 +142,7 @@ export interface IPreferencesService {
 
 	openRawDefaultSettings(): TPromise<void>;
 	openSettings(): TPromise<IEditor>;
+	openSettings2(): TPromise<IEditor>;
 	openGlobalSettings(options?: IEditorOptions, position?: Position): TPromise<IEditor>;
 	openWorkspaceSettings(options?: IEditorOptions, position?: Position): TPromise<IEditor>;
 	openFolderSettings(folder: URI, options?: IEditorOptions, position?: Position): TPromise<IEditor>;

src/vs/workbench/services/preferences/common/preferencesEditorInput.ts

@@ -14,6 +14,7 @@ import { KeybindingsEditorModel } from 'vs/workbench/services/preferences/common
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { OS } from 'vs/base/common/platform';
 import { TPromise } from 'vs/base/common/winjs.base';
+import { DefaultSettingsEditorModel } from './preferencesModels';
 
 export class PreferencesEditorInput extends SideBySideEditorInput {
 	public static readonly ID: string = 'workbench.editorinputs.preferencesEditorInput';
@@ -81,3 +82,31 @@ export class KeybindingsEditorInput extends EditorInput {
 		return otherInput instanceof KeybindingsEditorInput;
 	}
 }
+
+export class PreferencesEditorInput2 extends EditorInput {
+
+	public static readonly ID: string = 'workbench.input.preferences2';
+
+	public readonly defaultSettingsEditorModel: DefaultSettingsEditorModel;
+
+	constructor(model, @IInstantiationService instantiationService: IInstantiationService) {
+		super();
+		this.defaultSettingsEditorModel = model;
+	}
+
+	getTypeId(): string {
+		return PreferencesEditorInput2.ID;
+	}
+
+	getName(): string {
+		return nls.localize('prefsEditorInput2', "Settings (Experimental)");
+	}
+
+	resolve(refresh?: boolean): TPromise<DefaultSettingsEditorModel> {
+		return TPromise.wrap(this.defaultSettingsEditorModel);
+	}
+
+	matches(otherInput: any): boolean {
+		return otherInput instanceof PreferencesEditorInput2;
+	}
+}

src/vs/workbench/services/preferences/common/preferencesModels.ts

@@ -3,25 +3,25 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import * as nls from 'vs/nls';
-import { assign } from 'vs/base/common/objects';
+import { flatten, tail } from 'vs/base/common/arrays';
+import { IStringDictionary } from 'vs/base/common/collections';
+import { Emitter, Event } from 'vs/base/common/event';
+import { JSONVisitor, visit } from 'vs/base/common/json';
+import { Disposable, IReference } from 'vs/base/common/lifecycle';
 import * as map from 'vs/base/common/map';
-import { tail, flatten } from 'vs/base/common/arrays';
+import { assign } from 'vs/base/common/objects';
 import URI from 'vs/base/common/uri';
-import { IReference, Disposable } from 'vs/base/common/lifecycle';
-import { Event, Emitter } from 'vs/base/common/event';
-import { Registry } from 'vs/platform/registry/common/platform';
-import { visit, JSONVisitor } from 'vs/base/common/json';
-import { ITextModel, IIdentifiedSingleEditOperation } from 'vs/editor/common/model';
-import { EditorModel } from 'vs/workbench/common/editor';
-import { IConfigurationNode, IConfigurationRegistry, Extensions, OVERRIDE_PROPERTY_PATTERN, IConfigurationPropertySchema, ConfigurationScope } from 'vs/platform/configuration/common/configurationRegistry';
-import { ISettingsEditorModel, IKeybindingsEditorModel, ISettingsGroup, ISetting, IFilterResult, IGroupFilter, ISettingMatcher, ISettingMatch, ISearchResultGroup, IFilterMetadata } from 'vs/workbench/services/preferences/common/preferences';
-import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
-import { ITextEditorModel } from 'vs/editor/common/services/resolverService';
 import { IRange, Range } from 'vs/editor/common/core/range';
-import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import { Selection } from 'vs/editor/common/core/selection';
-import { IStringDictionary } from 'vs/base/common/collections';
+import { IIdentifiedSingleEditOperation, ITextModel } from 'vs/editor/common/model';
+import { ITextEditorModel } from 'vs/editor/common/services/resolverService';
+import * as nls from 'vs/nls';
+import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
+import { ConfigurationScope, Extensions, IConfigurationNode, IConfigurationPropertySchema, IConfigurationRegistry, OVERRIDE_PROPERTY_PATTERN } from 'vs/platform/configuration/common/configurationRegistry';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { Registry } from 'vs/platform/registry/common/platform';
+import { EditorModel } from 'vs/workbench/common/editor';
+import { IFilterMetadata, IFilterResult, IGroupFilter, IKeybindingsEditorModel, ISearchResultGroup, ISetting, ISettingMatch, ISettingMatcher, ISettingsEditorModel, ISettingsGroup } from 'vs/workbench/services/preferences/common/preferences';
 
 export abstract class AbstractSettingsModel extends EditorModel {
 
@@ -470,7 +470,9 @@ export class DefaultSettings extends Disposable {
 					value: setting.value,
 					range: null,
 					valueRange: null,
-					overrides: []
+					overrides: [],
+					type: setting.type,
+					enum: setting.enum
 				};
 			}
 			return null;
@@ -537,14 +539,14 @@ export class DefaultSettings extends Disposable {
 	}
 
 	private parseSettings(settingsObject: { [path: string]: IConfigurationPropertySchema; }): ISetting[] {
-		let result = [];
+		let result: ISetting[] = [];
 		for (let key in settingsObject) {
 			const prop = settingsObject[key];
 			if (!prop.deprecationMessage && this.matchesScope(prop)) {
 				const value = prop.default;
 				const description = (prop.description || '').split('\n');
 				const overrides = OVERRIDE_PROPERTY_PATTERN.test(key) ? this.parseOverrideSettings(prop.default) : [];
-				result.push({ key, value, description, range: null, keyRange: null, valueRange: null, descriptionRanges: [], overrides });
+				result.push({ key, value, description, range: null, keyRange: null, valueRange: null, descriptionRanges: [], overrides, type: prop.type, enum: prop.enum });
 			}
 		}
 		return result;