Settings editor - ... fix measuring around links, relayout

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

@@ -224,7 +224,7 @@
 	display: block;
 	position: absolute;
 	left: 7px;
-	top: 2px;
+	top: 0px;
 	opacity: .9;
 }
 

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

@@ -86,6 +86,8 @@ export class SettingsEditor2 extends BaseEditor {
 
 	private tagRegex = /(^|\s)@tag:("([^"]*)"|[^"]\S*)/g;
 
+	private layoutDelayer: Delayer<void>;
+
 	/** Don't spam warnings */
 	private hasWarnedMissingSettings: boolean;
 
@@ -106,6 +108,7 @@ 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<void>(500);
 
@@ -150,6 +153,8 @@ export class SettingsEditor2 extends BaseEditor {
 		this.layoutTrees(dimension);
 
 		DOM.toggleClass(this.rootElement, 'narrow', dimension.width < 600);
+
+		this.layoutDelayer.trigger(() => this.refreshTreeAndMaintainFocus());
 	}
 
 	focus(): void {

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

@@ -1053,12 +1053,15 @@ export class SettingsRenderer implements ITreeRenderer {
 		return height > 18;
 	}
 
-	private settingDescriptionFirstLine(tree: ITree, element: SettingsTreeSettingElement): number {
-		const fullDescription = element.description;
+	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 = 0; i < fullDescription.length;) {
+		for (let i = 10; i <= fullDescription.length;) {
 			let description = fullDescription.substr(0, i);
 			size = this.measureSettingDescription(tree, element, description);
 			if (size.height > 20) {
@@ -1068,11 +1071,7 @@ export class SettingsRenderer implements ITreeRenderer {
 
 			const nextBreakMatch = fullDescription.slice(i + 1).match(/[\s.,$]/);
 			if (nextBreakMatch) {
-				if (nextBreakMatch[0] === '\n') {
-					return size.width;
-				} else {
 				i = nextBreakMatch.index + i + 1;
-				}
 			} else {
 				return size.width;
 			}
@@ -1099,7 +1098,7 @@ export class SettingsRenderer implements ITreeRenderer {
 		template.labelElement.title = titleTooltip;
 
 		if (isExpandable) {
-			const widthInFirstLine = this.settingDescriptionFirstLine(tree, element);
+			const widthInFirstLine = this.settingDescriptionFirstLineLength(tree, element);
 			template.expandIndicatorElement.style.left = (widthInFirstLine + 8) + 'px';
 		}
 
@@ -1138,13 +1137,15 @@ export class SettingsRenderer implements ITreeRenderer {
 		return enumDescriptionText;
 	}
 
-	private renderDescription(text: string, template: ISettingItemTemplate | ISettingBoolItemTemplate, isSelected: boolean): void {
+	private renderDescription(text: string, template: ISettingItemTemplate | ISettingBoolItemTemplate, isSelected: boolean, measuring = false): void {
 		// Rewrite `#editor.fontSize#` to link format
 		const descriptionText = text
 			.replace(/`#(.*)#`/g, (match, settingName) => `[\`${settingName}\`](#${settingName})`);
 
 		const renderedDescription = renderMarkdown({ value: descriptionText }, {
-			actionHandler: {
+			actionHandler: measuring ?
+				undefined :
+				{
 					callback: (content: string) => {
 						if (startsWith(content, '#')) {
 							this._onDidClickSettingLink.fire(content.substr(1));
@@ -1155,14 +1156,20 @@ export class SettingsRenderer implements ITreeRenderer {
 					disposeables: template.toDispose
 				}
 		});
+		if (!measuring) {
 			cleanRenderedMarkdown(renderedDescription);
+		}
+
 		renderedDescription.classList.add('setting-item-description-markdown');
 		template.descriptionElement.innerHTML = '';
 		template.descriptionElement.appendChild(renderedDescription);
+
+		if (!measuring) {
 			(<any>renderedDescription.querySelectorAll('a')).forEach(aElement => {
 				aElement.tabIndex = isSelected ? 0 : -1;
 			});
 		}
+	}
 
 	private renderValue(element: SettingsTreeSettingElement, isSelected: boolean, templateId: string, template: ISettingItemTemplate | ISettingBoolItemTemplate): void {
 		const onChange = value => this._onDidChangeSetting.fire({ key: element.setting.key, value });