Settings editor - sync scroll from settings tree to TOC tree

src/vs/base/parts/tree/browser/tree.ts

@@ -25,6 +25,7 @@ export interface ITree {
 	onDidExpandItem: Event<IItemExpandEvent>;
 	onDidCollapseItem: Event<IItemCollapseEvent>;
 	onDidDispose: Event<void>;
+	onDidScroll: Event<void>;
 
 	/**
 	 * Returns the tree's DOM element.
@@ -148,6 +149,11 @@ export interface ITree {
 	 */
 	getRelativeTop(element: any): number;
 
+	/**
+	 * Returns the top-most visible element.
+	 */
+	getFirstVisibleElement(): any;
+
 	/**
 	 * Returns a number between 0 and 1 representing how much the tree is scroll down. 0 means all the way
 	 * to the top; 1 means all the way down.

src/vs/base/parts/tree/browser/treeImpl.ts

@@ -119,6 +119,10 @@ export class Tree implements _.ITree {
 		return this.view && this.view.onDOMBlur;
 	}
 
+	get onDidScroll(): Event<void> {
+		return this.view && this.view.onDidScroll;
+	}
+
 	public getHTMLElement(): HTMLElement {
 		return this.view.getHTMLElement();
 	}
@@ -209,6 +213,11 @@ export class Tree implements _.ITree {
 		return this.view.getRelativeTop(item);
 	}
 
+	public getFirstVisibleElement(): any {
+		return this.view.getFirstVisibleElement();
+
+	}
+
 	public getScrollPosition(): number {
 		return this.view.getScrollPosition();
 	}

src/vs/base/parts/tree/browser/treeView.ts

@@ -445,6 +445,9 @@ export class TreeView extends HeightMap {
 	private readonly _onDOMBlur: Emitter<void> = new Emitter<void>();
 	get onDOMBlur(): Event<void> { return this._onDOMBlur.event; }
 
+	private readonly _onDidScroll: Emitter<void> = new Emitter<void>();
+	get onDidScroll(): Event<void> { return this._onDidScroll.event; }
+
 	constructor(context: _.ITreeContext, container: HTMLElement) {
 		super();
 
@@ -510,6 +513,7 @@ export class TreeView extends HeightMap {
 		});
 		this.scrollableElement.onScroll((e) => {
 			this.render(e.scrollTop, e.height, e.scrollLeft, e.width, e.scrollWidth);
+			this._onDidScroll.fire();
 		});
 
 		if (Browser.isIE) {
@@ -649,6 +653,11 @@ export class TreeView extends HeightMap {
 		}
 	}
 
+	public getFirstVisibleElement(): any {
+		const item = this.itemAtIndex(this.indexAt(this.lastRenderTop));
+		return item && item.model.getElement();
+	}
+
 	private render(scrollTop: number, viewHeight: number, scrollLeft: number, viewWidth: number, scrollWidth: number): void {
 		var i: number;
 		var stop: number;

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

@@ -260,7 +260,7 @@ export class SettingsEditor2 extends BaseEditor {
 					return false;
 				};
 
-				if (element && (!currentSelection || !isEqualOrParent(currentSelection, element))) {
+				if (element && !e.payload.fromScroll && (!currentSelection || !isEqualOrParent(currentSelection, element))) {
 					this.settingsTree.reveal(element, 0);
 					this.settingsTree.setSelection([element]);
 					this.settingsTree.setFocus(element);
@@ -336,14 +336,29 @@ export class SettingsEditor2 extends BaseEditor {
 			this.selectedElement = e.focus;
 		}));
 
-		this._register(this.settingsTree.onDidChangeSelection(e => {
-			const element = e.selection[0] instanceof SettingsTreeSettingElement ? e.selection[0].parent :
-				e.selection[0] instanceof SettingsTreeGroupElement ? e.selection[0] :
+		this._register(this.settingsTree.onDidScroll(() => {
+			if (this.searchResultModel) {
+				return;
+			}
+
+			if (!this.tocTree.getInput()) {
+				return;
+			}
+
+			const topElement = this.settingsTree.getFirstVisibleElement();
+			const element = topElement instanceof SettingsTreeSettingElement ? topElement.parent :
+				topElement instanceof SettingsTreeGroupElement ? topElement :
 					null;
 
 			if (element && this.tocTree.getSelection()[0] !== element) {
-				this.tocTree.reveal(element, 0);
-				this.tocTree.setSelection([element]);
+				const elementTop = this.tocTree.getRelativeTop(element);
+				if (elementTop < 0) {
+					this.tocTree.reveal(element, 0);
+				} else if (elementTop > 1) {
+					this.tocTree.reveal(element, 1);
+				}
+
+				this.tocTree.setSelection([element], { fromScroll: true });
 				this.tocTree.setFocus(element);
 			}
 		}));

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

@@ -632,7 +632,7 @@ export class SettingsRenderer implements IRenderer {
 		template.context = element;
 		DOM.toggleClass(template.parent, 'is-configured', element.isConfigured);
 		DOM.toggleClass(template.parent, 'is-expanded', isSelected);
-		template.containerElement.id = element.id;
+		template.containerElement.id = element.id.replace(/\./g, '_');
 
 		const titleTooltip = setting.key;
 		template.categoryElement.textContent = element.displayCategory && (element.displayCategory + ': ');