From c319007abd36b283c1186345d53a844bb14f85b7 Mon Sep 17 00:00:00 2001 From: Rob Lourens Date: Tue, 31 Jul 2018 16:00:46 -0700 Subject: [PATCH] Settings editor - revert earlier '...' changes --- .../browser/media/settingsEditor2.css | 27 +-- .../preferences/browser/settingsEditor2.ts | 5 - .../parts/preferences/browser/settingsTree.ts | 176 ++++-------------- 3 files changed, 35 insertions(+), 173 deletions(-) diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css index 13e744ec8af..1019b0087b5 100644 --- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css @@ -219,18 +219,6 @@ height: 100%; } -.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-expand-indicator { - display: none; -} - -.settings-editor > .settings-body > .settings-tree-container .setting-item.is-expandable:not(.is-expanded) .setting-expand-indicator { - display: block; - position: absolute; - left: 7px; - top: 0px; - opacity: .9; -} - .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title { white-space: nowrap; overflow: hidden; @@ -261,13 +249,10 @@ opacity: 0.9; } -.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-container { - margin-top: 3px; - position: relative; -} - .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description { + margin-top: 3px; overflow: hidden; + text-overflow: ellipsis; height: 18px; display: -webkit-box; -webkit-line-clamp: 1; @@ -295,11 +280,6 @@ -webkit-line-clamp: initial; } -.settings-editor > .settings-body > .settings-tree-container .setting-description-measure-container .setting-item .setting-item-description, -.settings-editor > .settings-body > .settings-tree-container .setting-description-measure-container .setting-item .setting-item-description * { - display: inline; -} - .settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-item-value-description { display: flex; } @@ -333,7 +313,7 @@ min-width: 200px; } -.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-text .setting-item-value { +.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-text { width: 500px; } @@ -343,7 +323,6 @@ min-width: initial; } -.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-enum .setting-item-value, .settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-enum .setting-item-value > .setting-item-control > select { width: 320px; } diff --git a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts index 1253fb2145f..3346f396a0b 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts @@ -83,8 +83,6 @@ export class SettingsEditor2 extends BaseEditor { private tagRegex = /(^|\s)@tag:("([^"]*)"|[^"]\S*)/g; - private layoutDelayer: Delayer; - /** Don't spam warnings */ private hasWarnedMissingSettings: boolean; @@ -105,7 +103,6 @@ export class SettingsEditor2 extends BaseEditor { this.localSearchDelayer = new Delayer(100); this.remoteSearchThrottle = new ThrottledDelayer(200); this.viewState = { settingsTarget: ConfigurationTarget.USER }; - this.layoutDelayer = new Delayer(100); this.settingUpdateDelayer = new Delayer(500); @@ -150,8 +147,6 @@ export class SettingsEditor2 extends BaseEditor { this.layoutTrees(dimension); DOM.toggleClass(this.rootElement, 'narrow', dimension.width < 600); - - this.layoutDelayer.trigger(() => this.refreshTreeAndMaintainFocus()); } focus(): void { diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts index da45292f34d..f0b9c730b98 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsTree.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsTree.ts @@ -472,7 +472,6 @@ interface ISettingItemTemplate extends IDisposableTemplate { categoryElement: HTMLElement; labelElement: HTMLElement; descriptionElement: HTMLElement; - expandIndicatorElement: HTMLElement; controlElement: HTMLElement; isConfiguredElement: HTMLElement; otherOverridesElement: HTMLElement; @@ -546,8 +545,6 @@ export class SettingsRenderer implements ITreeRenderer { public readonly onDidClickSettingLink: Event = this._onDidClickSettingLink.event; private measureContainer: HTMLElement; - // private measureDescriptionContainer: HTMLElement; - // private measureDescriptionTemplates = new Map(); constructor( _measureContainer: HTMLElement, @@ -558,7 +555,6 @@ export class SettingsRenderer implements ITreeRenderer { @ICommandService private readonly commandService: ICommandService, ) { this.measureContainer = DOM.append(_measureContainer, $('.setting-measure-container.monaco-tree-row')); - // this.measureDescriptionContainer = DOM.append(_measureContainer, $('.setting-measure-container.setting-description-measure-container.monaco-tree-row')); } getHeight(tree: ITree, element: SettingsTreeElement): number { @@ -613,40 +609,6 @@ export class SettingsRenderer implements ITreeRenderer { return Math.max(height, this._getUnexpandedSettingHeight(element)); } - // private measureSettingDescriptionHeight(tree: ITree, element: SettingsTreeSettingElement): number { - // const measureHelper = DOM.append(this.measureContainer, $('.setting-measure-helper')); - - // const templateId = this.getTemplateId(tree, element); - // const template = this.renderTemplate(tree, templateId, measureHelper); - // this.renderDescription(element.description, template, true); - - // const height = (template).descriptionElement.offsetHeight; - // this.measureContainer.removeChild(this.measureContainer.firstChild); - // return height; - // } - - // private measureSettingDescription(tree: ITree, element: SettingsTreeSettingElement, text: string): { height: number, width: number } { - // const templateId = this.getTemplateId(tree, element); - // if (!this.measureDescriptionTemplates.has(templateId)) { - // const measureHelper = $('.setting-measure-helper'); - // this.measureDescriptionTemplates.set(templateId, this.renderTemplate(tree, templateId, measureHelper)); - // } - - // const template = this.measureDescriptionTemplates.get(templateId); - // this.measureDescriptionContainer.appendChild(template.containerElement); - // this.renderDescription(text, template, true); - - // const descriptionElement = (template).descriptionElement; - // const width = descriptionElement.offsetWidth; - // const height = descriptionElement.offsetHeight; - - // if (this.measureDescriptionContainer.firstChild) { - // this.measureDescriptionContainer.removeChild(this.measureDescriptionContainer.firstChild); - // } - - // return { height, width }; - // } - getTemplateId(tree: ITree, element: SettingsTreeElement): string { if (element instanceof SettingsTreeGroupElement) { @@ -741,15 +703,11 @@ export class SettingsRenderer implements ITreeRenderer { const labelElement = DOM.append(titleElement, $('span.setting-item-label')); const isConfiguredElement = DOM.append(titleElement, $('span.setting-item-is-configured-label')); const otherOverridesElement = DOM.append(titleElement, $('span.setting-item-overrides')); - const descriptionContainerElement = DOM.append(container, $('.setting-item-description-container')); - const descriptionElement = DOM.append(descriptionContainerElement, $('.setting-item-description')); + const descriptionElement = DOM.append(container, $('.setting-item-description')); const valueElement = DOM.append(container, $('.setting-item-value')); const controlElement = DOM.append(valueElement, $('div.setting-item-control')); - const expandIndicatorElement = DOM.append(descriptionContainerElement, $('.setting-expand-indicator')); - expandIndicatorElement.textContent = '…'; - const toDispose = []; const template: ISettingItemTemplate = { toDispose, @@ -760,7 +718,6 @@ export class SettingsRenderer implements ITreeRenderer { descriptionElement, controlElement, isConfiguredElement, - expandIndicatorElement, otherOverridesElement }; @@ -841,10 +798,7 @@ export class SettingsRenderer implements ITreeRenderer { const descriptionAndValueElement = DOM.append(container, $('.setting-item-value-description')); const controlElement = DOM.append(descriptionAndValueElement, $('.setting-item-bool-control')); - const descriptionContainerElement = DOM.append(descriptionAndValueElement, $('.setting-item-description-container')); - const descriptionElement = DOM.append(descriptionContainerElement, $('.setting-item-description')); - const expandIndicatorElement = DOM.append(descriptionContainerElement, $('.setting-expand-indicator')); - expandIndicatorElement.textContent = '…'; + const descriptionElement = DOM.append(descriptionAndValueElement, $('.setting-item-description')); const toDispose = []; const checkbox = new Checkbox({ actionClassName: 'setting-value-checkbox', isChecked: true, title: '', inputActiveOptionBorder: null }); @@ -865,7 +819,6 @@ export class SettingsRenderer implements ITreeRenderer { controlElement, checkbox, descriptionElement, - expandIndicatorElement, isConfiguredElement, otherOverridesElement }; @@ -1040,55 +993,12 @@ export class SettingsRenderer implements ITreeRenderer { template.context = element; } - // private isSettingExpandable(tree: ITree, element: SettingsTreeSettingElement): boolean { - // // Shortcuts before measuring - // if (element.valueType === 'enum' && element.setting.enumDescriptions && element.setting.enum && element.setting.enum.length < SettingsRenderer.MAX_ENUM_DESCRIPTIONS) { - // return true; - // } - - // if (element.setting.description.indexOf('\n') >= 0) { - // return true; - // } - - // const height = this.measureSettingDescriptionHeight(tree, element); - // return height > 18; - // } - - // private settingDescriptionFirstLineLength(tree: ITree, element: SettingsTreeSettingElement): number { - // const fullDescription = element.description - // .replace(/\[(.*)\]\(.*\)/, '$1') - // .split('\n')[0]; - - // // Add characters one at a time, measure the width. Start from some safe number. - // // const startPos = Math.min(50, fullDescription.length - 1); - // let size: { height: number, width: number }; - // for (let i = 10; i <= fullDescription.length;) { - // let description = fullDescription.substr(0, i); - // size = this.measureSettingDescription(tree, element, description); - // if (size.height > 20) { - // // It wrapped - // return size.width; - // } - - // const nextBreakMatch = fullDescription.slice(i + 1).match(/([\s.,]|$)/); - // if (nextBreakMatch) { - // i = nextBreakMatch.index + i + 1; - // } else { - // return size.width; - // } - // } - - // return size ? size.width : 0; - // } - private renderSettingElement(tree: ITree, element: SettingsTreeSettingElement, templateId: string, template: ISettingItemTemplate | ISettingBoolItemTemplate): void { const isSelected = !!this.elementIsSelected(tree, element); const setting = element.setting; - // const isExpandable = this.isSettingExpandable(tree, element); - // DOM.toggleClass(template.containerElement, 'is-expandable', isExpandable); - DOM.toggleClass(template.containerElement, 'is-expanded', isSelected); DOM.toggleClass(template.containerElement, 'is-configured', element.isConfigured); + DOM.toggleClass(template.containerElement, 'is-expanded', isSelected); template.containerElement.id = element.id.replace(/\./g, '_'); const titleTooltip = setting.key; @@ -1098,33 +1008,9 @@ export class SettingsRenderer implements ITreeRenderer { template.labelElement.textContent = element.displayLabel; template.labelElement.title = titleTooltip; - // if (isExpandable) { - // const widthInFirstLine = this.settingDescriptionFirstLineLength(tree, element); - // template.expandIndicatorElement.style.left = (widthInFirstLine + 8) + 'px'; - // } - - const descriptionText = element.description + this.getEnumDescriptionText(element); - this.renderDescription(descriptionText, template, isSelected); - this.renderValue(element, isSelected, templateId, template); - - template.isConfiguredElement.textContent = element.isConfigured ? localize('configured', "Modified") : ''; - - if (element.overriddenScopeList.length) { - const otherOverridesLabel = element.isConfigured ? - localize('alsoConfiguredIn', "Also modified in") : - localize('configuredIn', "Modified in"); - - template.otherOverridesElement.textContent = `(${otherOverridesLabel}: ${element.overriddenScopeList.join(', ')})`; - } else { - template.otherOverridesElement.textContent = ''; - } - } - - private getEnumDescriptionText(element: SettingsTreeSettingElement): string { - const setting = element.setting; let enumDescriptionText = ''; - if (element.valueType === 'enum' && setting.enumDescriptions && setting.enum && setting.enum.length < SettingsRenderer.MAX_ENUM_DESCRIPTIONS) { - enumDescriptionText = '\n' + setting.enumDescriptions + if (element.valueType === 'enum' && element.setting.enumDescriptions && element.setting.enum && element.setting.enum.length < SettingsRenderer.MAX_ENUM_DESCRIPTIONS) { + enumDescriptionText = '\n' + element.setting.enumDescriptions .map((desc, i) => { const displayEnum = escapeInvisibleChars(setting.enum[i]); return desc ? @@ -1135,40 +1021,42 @@ export class SettingsRenderer implements ITreeRenderer { .join('\n'); } - return enumDescriptionText; - } - - private renderDescription(text: string, template: ISettingItemTemplate | ISettingBoolItemTemplate, isSelected: boolean, measuring = false): void { // Rewrite `#editor.fontSize#` to link format - const descriptionText = text + const descriptionText = (element.description + enumDescriptionText) .replace(/`#(.*)#`/g, (match, settingName) => `[\`${settingName}\`](#${settingName})`); const renderedDescription = renderMarkdown({ value: descriptionText }, { - actionHandler: measuring ? - undefined : - { - callback: (content: string) => { - if (startsWith(content, '#')) { - this._onDidClickSettingLink.fire(content.substr(1)); - } else { - this.openerService.open(URI.parse(content)).then(void 0, onUnexpectedError); - } - }, - disposeables: template.toDispose - } + actionHandler: { + callback: (content: string) => { + if (startsWith(content, '#')) { + this._onDidClickSettingLink.fire(content.substr(1)); + } else { + this.openerService.open(URI.parse(content)).then(void 0, onUnexpectedError); + } + }, + disposeables: template.toDispose + } }); - if (!measuring) { - cleanRenderedMarkdown(renderedDescription); - } - + cleanRenderedMarkdown(renderedDescription); renderedDescription.classList.add('setting-item-description-markdown'); template.descriptionElement.innerHTML = ''; template.descriptionElement.appendChild(renderedDescription); + (renderedDescription.querySelectorAll('a')).forEach(aElement => { + aElement.tabIndex = isSelected ? 0 : -1; + }); - if (!measuring) { - (renderedDescription.querySelectorAll('a')).forEach(aElement => { - aElement.tabIndex = isSelected ? 0 : -1; - }); + this.renderValue(element, isSelected, templateId, template); + + template.isConfiguredElement.textContent = element.isConfigured ? localize('configured', "Modified") : ''; + + if (element.overriddenScopeList.length) { + let otherOverridesLabel = element.isConfigured ? + localize('alsoConfiguredIn', "Also modified in") : + localize('configuredIn', "Modified in"); + + template.otherOverridesElement.textContent = `(${otherOverridesLabel}: ${element.overriddenScopeList.join(', ')})`; + } else { + template.otherOverridesElement.textContent = ''; } } -- GitLab