Skip to content

Commit 184ba7b

Browse files
rzhao271rzhao271
authored
Restyle Edit in settings.json link (microsoft#166629)
* Re-style Edit in settings.json link Fixes microsoft#166625 Also refactors the code a bit. * Adjust opacity
1 parent 1fa7760 commit 184ba7b

File tree

3 files changed

+49
-60
lines changed

3 files changed

+49
-60
lines changed

‎src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -484,12 +484,18 @@
484484
margin: 0px;
485485
}
486486

487+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .edit-in-settings-button {
488+
opacity: 0.9;
489+
}
490+
487491
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a,
492+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .edit-in-settings-button,
488493
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a > code {
489494
color: var(--vscode-textLink-foreground);
490495
}
491496

492-
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:focus {
497+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:focus,
498+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .edit-in-settings-button:focus {
493499
outline: 1px solid -webkit-focus-ring-color;
494500
outline-offset: -1px;
495501
text-decoration: underline;
@@ -498,12 +504,15 @@
498504

499505
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover,
500506
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:active,
507+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .edit-in-settings-button:hover,
508+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .edit-in-settings-button:active,
501509
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover > code,
502510
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:active > code {
503511
color: var(--vscode-textLink-activeForeground);
504512
}
505513

506-
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover {
514+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover,
515+
.settings-editor > .settings-body .settings-tree-container .edit-in-settings-button:hover {
507516
cursor: pointer;
508517
text-decoration: underline;
509518
}
@@ -570,14 +579,6 @@
570579
width: 320px;
571580
}
572581

573-
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-value .edit-in-settings-button,
574-
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-value .edit-in-settings-button:hover,
575-
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-value .edit-in-settings-button:active {
576-
text-align: left;
577-
text-decoration: underline;
578-
padding-left: 0px;
579-
}
580-
581582
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .monaco-select-box {
582583
width: initial;
583584
font: inherit;

‎src/vs/workbench/contrib/preferences/browser/settingsEditorSettingIndicators.ts‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { IHoverOptions, IHoverService, IHoverWidget } from 'vs/workbench/service
2626

2727
const $ = DOM.$;
2828

29-
type ScopeString = 'workspace' | 'user' | 'remote';
29+
type ScopeString = 'workspace' | 'user' | 'remote' | 'default';
3030

3131
export interface ISettingOverrideClickEvent {
3232
scope: ScopeString;
@@ -44,14 +44,15 @@ interface SettingIndicator {
4444
* Renders the indicators next to a setting, such as "Also Modified In".
4545
*/
4646
export class SettingsTreeIndicatorsLabel implements IDisposable {
47-
private indicatorsContainerElement: HTMLElement;
47+
private readonly indicatorsContainerElement: HTMLElement;
4848

49-
private workspaceTrustIndicator: SettingIndicator;
50-
private scopeOverridesIndicator: SettingIndicator;
51-
private syncIgnoredIndicator: SettingIndicator;
52-
private defaultOverrideIndicator: SettingIndicator;
49+
private readonly workspaceTrustIndicator: SettingIndicator;
50+
private readonly scopeOverridesIndicator: SettingIndicator;
51+
private readonly syncIgnoredIndicator: SettingIndicator;
52+
private readonly defaultOverrideIndicator: SettingIndicator;
53+
private readonly allIndicators: SettingIndicator[];
5354

54-
private profilesEnabled: boolean;
55+
private readonly profilesEnabled: boolean;
5556

5657
constructor(
5758
container: HTMLElement,
@@ -70,6 +71,7 @@ export class SettingsTreeIndicatorsLabel implements IDisposable {
7071
this.scopeOverridesIndicator = this.createScopeOverridesIndicator();
7172
this.syncIgnoredIndicator = this.createSyncIgnoredIndicator();
7273
this.defaultOverrideIndicator = this.createDefaultOverrideIndicator();
74+
this.allIndicators = [this.workspaceTrustIndicator, this.scopeOverridesIndicator, this.syncIgnoredIndicator, this.defaultOverrideIndicator];
7375
}
7476

7577
private defaultHoverOptions: Partial<IHoverOptions> = {
@@ -186,7 +188,7 @@ export class SettingsTreeIndicatorsLabel implements IDisposable {
186188
}
187189

188190
private render() {
189-
const indicatorsToShow = [this.workspaceTrustIndicator, this.scopeOverridesIndicator, this.syncIgnoredIndicator, this.defaultOverrideIndicator].filter(indicator => {
191+
const indicatorsToShow = this.allIndicators.filter(indicator => {
190192
return indicator.element.style.display !== 'none';
191193
});
192194

@@ -279,34 +281,31 @@ export class SettingsTreeIndicatorsLabel implements IDisposable {
279281
this.addHoverDisposables(this.scopeOverridesIndicator.disposables, this.scopeOverridesIndicator.element, showHover);
280282
} else if (element.overriddenScopeList.length || element.overriddenDefaultsLanguageList.length) {
281283
if (element.overriddenScopeList.length === 1 && !element.overriddenDefaultsLanguageList.length) {
284+
// We can inline the override and show all the text in the label
285+
// so that users don't have to wait for the hover to load
286+
// just to click into the one override there is.
282287
this.scopeOverridesIndicator.element.style.display = 'inline';
283288
this.scopeOverridesIndicator.element.classList.remove('setting-indicator');
284289
this.scopeOverridesIndicator.disposables.clear();
285290

286-
// Just show all the text in the label.
287291
const prefaceText = element.isConfigured ?
288292
localize('alsoConfiguredIn', "Also modified in") :
289293
localize('configuredIn', "Modified in");
290294
this.scopeOverridesIndicator.label.text = `${prefaceText} `;
291295

292-
for (let i = 0; i < element.overriddenScopeList.length; i++) {
293-
const overriddenScope = element.overriddenScopeList[i];
294-
const view = DOM.append(this.scopeOverridesIndicator.element, $('a.modified-scope', undefined, this.getInlineScopeDisplayText(overriddenScope)));
295-
if (i !== element.overriddenScopeList.length - 1) {
296-
DOM.append(this.scopeOverridesIndicator.element, $('span.comma', undefined, ', '));
297-
}
298-
elementDisposables.add(
299-
DOM.addStandardDisposableListener(view, DOM.EventType.CLICK, (e: IMouseEvent) => {
300-
const [scope, language] = overriddenScope.split(':');
301-
onDidClickOverrideElement.fire({
302-
settingKey: element.setting.key,
303-
scope: scope as ScopeString,
304-
language
305-
});
306-
e.preventDefault();
307-
e.stopPropagation();
308-
}));
309-
}
296+
const overriddenScope = element.overriddenScopeList[0];
297+
const view = DOM.append(this.scopeOverridesIndicator.element, $('a.modified-scope', undefined, this.getInlineScopeDisplayText(overriddenScope)));
298+
elementDisposables.add(
299+
DOM.addStandardDisposableListener(view, DOM.EventType.CLICK, (e: IMouseEvent) => {
300+
const [scope, language] = overriddenScope.split(':');
301+
onDidClickOverrideElement.fire({
302+
settingKey: element.setting.key,
303+
scope: scope as ScopeString,
304+
language
305+
});
306+
e.preventDefault();
307+
e.stopPropagation();
308+
}));
310309
} else {
311310
this.scopeOverridesIndicator.element.style.display = 'inline';
312311
this.scopeOverridesIndicator.element.classList.add('setting-indicator');

‎src/vs/workbench/contrib/preferences/browser/settingsTree.ts‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ import { IObjectTreeOptions } from 'vs/base/browser/ui/tree/objectTree';
1818
import { ObjectTreeModel } from 'vs/base/browser/ui/tree/objectTreeModel';
1919
import { ITreeFilter, ITreeModel, ITreeNode, ITreeRenderer, TreeFilterResult, TreeVisibility } from 'vs/base/browser/ui/tree/tree';
2020
import { Action, IAction, Separator } from 'vs/base/common/actions';
21-
import * as arrays from 'vs/base/common/arrays';
22-
import { Color } from 'vs/base/common/color';
2321
import { onUnexpectedError } from 'vs/base/common/errors';
2422
import { Emitter, Event } from 'vs/base/common/event';
2523
import { KeyCode } from 'vs/base/common/keyCodes';
@@ -64,7 +62,7 @@ import { getIndicatorsLabelAriaLabel, ISettingOverrideClickEvent, SettingsTreeIn
6462
import { ILanguageService } from 'vs/editor/common/languages/language';
6563
import { ConfigurationScope } from 'vs/platform/configuration/common/configurationRegistry';
6664
import { IUserDataProfilesService } from 'vs/platform/userDataProfile/common/userDataProfile';
67-
import { defaultButtonStyles, getButtonStyles, getInputBoxStyle } from 'vs/platform/theme/browser/defaultStyles';
65+
import { defaultButtonStyles, getInputBoxStyle } from 'vs/platform/theme/browser/defaultStyles';
6866

6967
const $ = DOM.$;
7068

@@ -97,7 +95,7 @@ function areAllPropertiesDefined(properties: string[], itemsToDisplay: IObjectDa
9795

9896
function getEnumOptionsFromSchema(schema: IJSONSchema): IObjectEnumOption[] {
9997
if (schema.anyOf) {
100-
return arrays.flatten(schema.anyOf.map(getEnumOptionsFromSchema));
98+
return schema.anyOf.map(getEnumOptionsFromSchema).flat();
10199
}
102100

103101
const enumDescriptions = schema.enumDescriptions ?? [];
@@ -425,8 +423,7 @@ export async function createTocTreeForExtensionSettings(extensionService: IExten
425423
extGroupTree.get(extensionId)!.children!.push(childEntry);
426424
};
427425
const processGroupEntry = async (group: ISettingsGroup) => {
428-
const flatSettings = arrays.flatten(
429-
group.sections.map(section => section.settings));
426+
const flatSettings = group.sections.map(section => section.settings).flat();
430427

431428
const extensionId = group.extensionInfo!.id;
432429
const extension = await extensionService.getExtension(extensionId);
@@ -509,7 +506,7 @@ function _resolveSettingsTree(tocData: ITOCEntry<string>, allSettings: Set<ISett
509506

510507
let settings: ISetting[] | undefined;
511508
if (tocData.settings) {
512-
settings = arrays.flatten(tocData.settings.map(pattern => getMatchingSettings(allSettings, pattern, logService)));
509+
settings = tocData.settings.map(pattern => getMatchingSettings(allSettings, pattern, logService)).flat();
513510
}
514511

515512
if (!children && !settings) {
@@ -619,7 +616,7 @@ interface ISettingEnumItemTemplate extends ISettingItemTemplate<number> {
619616
}
620617

621618
interface ISettingComplexItemTemplate extends ISettingItemTemplate<void> {
622-
button: Button;
619+
button: HTMLElement;
623620
validationErrorMessageElement: HTMLElement;
624621
}
625622

@@ -1051,17 +1048,9 @@ export class SettingComplexRenderer extends AbstractSettingRenderer implements I
10511048
renderTemplate(container: HTMLElement): ISettingComplexItemTemplate {
10521049
const common = this.renderCommonTemplate(null, container, 'complex');
10531050

1054-
const openSettingsButton = new Button(common.controlElement, {
1055-
title: true, ...getButtonStyles({
1056-
buttonBackground: Color.transparent.toString(),
1057-
buttonHoverBackground: Color.transparent.toString(),
1058-
buttonForeground: 'foreground'
1059-
})
1060-
});
1061-
common.toDispose.add(openSettingsButton);
1062-
1063-
openSettingsButton.element.classList.add('edit-in-settings-button');
1064-
openSettingsButton.element.classList.add(AbstractSettingRenderer.CONTROL_CLASS);
1051+
const openSettingsButton = DOM.append(common.controlElement, $('a.edit-in-settings-button'));
1052+
openSettingsButton.classList.add(AbstractSettingRenderer.CONTROL_CLASS);
1053+
openSettingsButton.role = 'button';
10651054

10661055
const validationErrorMessageElement = $('.setting-item-validation-message');
10671056
common.containerElement.appendChild(validationErrorMessageElement);
@@ -1085,11 +1074,11 @@ export class SettingComplexRenderer extends AbstractSettingRenderer implements I
10851074
const plainKey = getLanguageTagSettingPlainKey(dataElement.setting.key);
10861075
const editLanguageSettingLabel = localize('editLanguageSettingLabel', "Edit settings for {0}", plainKey);
10871076
const isLanguageTagSetting = dataElement.setting.isLanguageTagSetting;
1088-
template.button.label = isLanguageTagSetting
1077+
template.button.textContent = isLanguageTagSetting
10891078
? editLanguageSettingLabel
10901079
: SettingComplexRenderer.EDIT_IN_JSON_LABEL;
10911080

1092-
template.elementDisposables.add(template.button.onDidClick(() => {
1081+
template.elementDisposables.add(DOM.addDisposableListener(template.button, DOM.EventType.CLICK, () => {
10931082
if (isLanguageTagSetting) {
10941083
this._onApplyFilter.fire(`@${LANGUAGE_SETTING_TAG}${plainKey}`);
10951084
} else {
@@ -1100,9 +1089,9 @@ export class SettingComplexRenderer extends AbstractSettingRenderer implements I
11001089
this.renderValidations(dataElement, template);
11011090

11021091
if (isLanguageTagSetting) {
1103-
template.button.element.setAttribute('aria-label', editLanguageSettingLabel);
1092+
template.button.setAttribute('aria-label', editLanguageSettingLabel);
11041093
} else {
1105-
template.button.element.setAttribute('aria-label', `${SettingComplexRenderer.EDIT_IN_JSON_LABEL}: ${dataElement.setting.key}`);
1094+
template.button.setAttribute('aria-label', `${SettingComplexRenderer.EDIT_IN_JSON_LABEL}: ${dataElement.setting.key}`);
11061095
}
11071096
}
11081097

0 commit comments

Comments
 (0)