diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
index c196aa743c23d7e20d8a076a1f5655d878561280..4dc619542ca0ad5b861af6bdacc0cc084f146466 100644
--- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
+++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
@@ -102,16 +102,14 @@
white-space: normal;
}
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.odd {
+.settings-editor > .settings-body > .settings-list-container .monaco-list-row.odd:not(.focused):not(.selected):not(:hover),
+.settings-editor > .settings-body > .settings-list-container .monaco-list:not(:focus) .monaco-list-row.focused.odd:not(.selected):not(:hover),
+.settings-editor > .settings-body > .settings-list-container .monaco-list:not(.focused) .monaco-list-row.focused.odd:not(.selected):not(:hover) {
background-color: rgba(130, 130, 130, 0.04);
}
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row:not(.odd) {
- background-color: initial;
-}
-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.setting-item {
- padding: 3px 0px;
+ padding: 3px;
}
.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container {
@@ -260,6 +258,10 @@
margin-left: -15px;
}
+.settings-editor > .settings-body > .settings-list-container .settings-group-title-label {
+ margin: 5px 3px;
+}
+
.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded,
.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed {
cursor: pointer;
@@ -293,5 +295,5 @@
position: absolute;
content: ' ';
left: -19px;
- top: 14px;
+ top: 4px;
}
\ No newline at end of file
diff --git a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
index 954275292783d04e87ab96281a0ba7326310dafe..5c16b4ee707dd7dac00a7009e9348c4a6e336d99 100644
--- a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
+++ b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
@@ -105,8 +105,6 @@ export class SettingsEditor2 extends BaseEditor {
private searchWidget: SearchWidget;
private settingsTargetsWidget: SettingsTargetsWidget;
- private showConfiguredSettingsOnly = false;
- private showAllSettings = false;
private showConfiguredSettingsOnlyCheckbox: HTMLInputElement;
private settingsListContainer: HTMLElement;
@@ -123,11 +121,15 @@ export class SettingsEditor2 extends BaseEditor {
private currentLocalSearchProvider: ISearchProvider;
private currentRemoteSearchProvider: ISearchProvider;
- private searchResultModel: SearchResultModel;
private pendingSettingModifiedReport: { key: string, value: any };
+ // factor out tree/list viewmodel to somewhere outside this class
+ private searchResultModel: SearchResultModel;
private groupExpanded = new Map();
private itemExpanded = new Map();
+ private showConfiguredSettingsOnly = false;
+ private showAllSettings = false;
+ //
constructor(
@ITelemetryService telemetryService: ITelemetryService,
@@ -265,20 +267,13 @@ export class SettingsEditor2 extends BaseEditor {
const settingItemRenderer = this.instantiationService.createInstance(SettingItemRenderer, this.settingsListContainer);
this._register(settingItemRenderer.onDidChangeSetting(e => this.onDidChangeSetting(e.key, e.value)));
this._register(settingItemRenderer.onDidOpenSettings(() => this.openSettingsFile()));
- this._register(settingItemRenderer.onDidToggleExpandSetting(e => {
- this.itemExpanded.set(e.key, e.expandState === ExpandState.Expanded);
- this.renderEntries();
- }));
+ this._register(settingItemRenderer.onDidToggleExpandSetting(e => this.toggleSettingExpanded(e)));
const buttonItemRenderer = new ButtonRowRenderer();
- this._register(buttonItemRenderer.onDidClick(e => this.onShowAllSettingsClicked()));
+ this._register(buttonItemRenderer.onDidClick(e => this.onShowAllSettingsToggled()));
const groupTitleRenderer = new GroupTitleRenderer();
- this._register(groupTitleRenderer.onDidClickGroup(e => {
- const isExpanded = !!this.groupExpanded.get(e);
- this.groupExpanded.set(e, !isExpanded);
- this.renderEntries();
- }));
+ this._register(groupTitleRenderer.onDidClickGroup(id => this.toggleGroupExpanded(id)));
this.settingsList = this._register(this.instantiationService.createInstance(
WorkbenchList,
@@ -287,18 +282,47 @@ export class SettingsEditor2 extends BaseEditor {
[settingItemRenderer, groupTitleRenderer, buttonItemRenderer],
{
identityProvider: e => e.id,
- ariaLabel: localize('settingsListLabel', "Settings"),
- focusOnMouseDown: false,
- selectOnMouseDown: false,
- keyboardSupport: false,
- mouseSupport: false
+ ariaLabel: localize('settingsListLabel', "Settings")
})
) as WorkbenchList;
- this.settingsList.style({ listHoverBackground: Color.transparent, listFocusOutline: Color.transparent });
+ this._register(this.settingsList.onDidFocus(() => {
+ DOM.addClass(this.settingsList.getHTMLElement(), 'focused');
+ }));
+ this._register(this.settingsList.onDidBlur(() => {
+ DOM.removeClass(this.settingsList.getHTMLElement(), 'focused');
+ }));
+
+ this.settingsList.onOpen(e => {
+ const entry = e.elements[0];
+ if (!entry) {
+ return;
+ }
+
+ if (entry.templateId === SETTINGS_GROUP_ENTRY_TEMPLATE_ID) {
+ this.toggleGroupExpanded(entry.id);
+ } else if (entry.templateId === SETTINGS_ENTRY_TEMPLATE_ID) {
+ this.toggleSettingExpanded(entry);
+ } else if (entry.templateId === BUTTON_ROW_ENTRY_TEMPLATE) {
+ this.onShowAllSettingsToggled();
+ }
+ });
+ }
+
+ private toggleGroupExpanded(id: string): void {
+ const isExpanded = !!this.groupExpanded.get(id);
+ this.groupExpanded.set(id, !isExpanded);
+ this.renderEntries();
+ }
+
+ private toggleSettingExpanded(entry: ISettingItemEntry): void {
+ if (entry.isExpandable) {
+ this.itemExpanded.set(entry.key, !entry.isExpanded);
+ this.renderEntries();
+ }
}
- private onShowAllSettingsClicked(): void {
+ private onShowAllSettingsToggled(): void {
this.showAllSettings = !this.showAllSettings;
this.render();
}
@@ -650,7 +674,7 @@ class SettingItemDelegate implements IDelegate {
getHeight(entry: ListEntry) {
if (entry.templateId === SETTINGS_GROUP_ENTRY_TEMPLATE_ID) {
- return 42;
+ return 30;
}
if (entry.templateId === SETTINGS_ENTRY_TEMPLATE_ID) {
@@ -722,11 +746,6 @@ interface ISettingChangeEvent {
value: any; // undefined => reset unconfigure
}
-interface ISettingExpandEvent {
- key: string;
- expandState: ExpandState;
-}
-
class SettingItemRenderer implements IRenderer {
private readonly _onDidChangeSetting: Emitter = new Emitter();
@@ -735,8 +754,8 @@ class SettingItemRenderer implements IRenderer = new Emitter();
public readonly onDidOpenSettings: Event = this._onDidOpenSettings.event;
- private readonly _onDidToggleExpandSetting: Emitter = new Emitter();
- public readonly onDidToggleExpandSetting: Event = this._onDidToggleExpandSetting.event;
+ private readonly _onDidToggleExpandSetting: Emitter = new Emitter();
+ public readonly onDidToggleExpandSetting: Event = this._onDidToggleExpandSetting.event;
get templateId(): string { return SETTINGS_ENTRY_TEMPLATE_ID; }
@@ -782,8 +801,7 @@ class SettingItemRenderer implements IRenderer {
const entry = template.context;
if (entry && entry.isExpandable) {
- const newState = entry.isExpanded ? ExpandState.Collapsed : ExpandState.Expanded;
- that._onDidToggleExpandSetting.fire({ key: entry.key, expandState: newState });
+ that._onDidToggleExpandSetting.fire(entry);
}
}));
}
@@ -869,6 +887,7 @@ class SettingItemRenderer implements IRendererDOM.append(template.valueElement, $('input.setting-value-checkbox.setting-value-input'));
checkboxElement.type = 'checkbox';
checkboxElement.checked = entry.value;
+ checkboxElement.tabIndex = 0;
template.toDispose.push(DOM.addDisposableListener(checkboxElement, 'change', e => onChange(checkboxElement.checked)));
}
@@ -879,6 +898,9 @@ class SettingItemRenderer implements IRenderer onChange(entry.enum[e.index])));
@@ -889,6 +911,7 @@ class SettingItemRenderer implements IRenderer onChange(e)));