Speed up editorStatus: do minimal updates to the DOM

src/vs/workbench/browser/parts/editor/editorStatus.ts

@@ -9,7 +9,6 @@ import 'vs/css!./media/editorstatus';
 import nls = require('vs/nls');
 import {TPromise} from 'vs/base/common/winjs.base';
 import { emmet as $, append, show, hide } from 'vs/base/browser/dom';
-import objects = require('vs/base/common/objects');
 import encoding = require('vs/base/common/bits/encoding');
 import strings = require('vs/base/common/strings');
 import types = require('vs/base/common/types');
@@ -65,14 +64,99 @@ interface IEditorSelectionStatus {
 	charactersSelected?: number;
 }
 
-interface IState {
-	selectionStatus: IEditorSelectionStatus;
-	mode: string;
-	encoding: string;
-	EOL: string;
+interface IStateChange {
+	selectionStatus: boolean;
+	mode: boolean;
+	encoding: boolean;
+	EOL: boolean;
 	tabFocusMode: boolean;
 }
 
+interface StateDelta {
+	selectionStatus?: string;
+	mode?: string;
+	encoding?: string;
+	EOL?: string;
+	tabFocusMode?: boolean;
+}
+
+class State {
+	private _selectionStatus: string;
+	public get selectionStatus(): string { return this._selectionStatus; }
+
+	private _mode: string;
+	public get mode(): string { return this._mode; }
+
+	private _encoding: string;
+	public get encoding(): string { return this._encoding; }
+
+	private _EOL: string;
+	public get EOL(): string { return this._EOL; }
+
+	private _tabFocusMode: boolean;
+	public get tabFocusMode(): boolean { return this._tabFocusMode; }
+
+	constructor() {
+		this._selectionStatus = null;
+		this._mode = null;
+		this._encoding = null;
+		this._EOL = null;
+		this._tabFocusMode = false;
+	}
+
+	public update(update:StateDelta): IStateChange {
+		let e = {
+			selectionStatus: false,
+			mode: false,
+			encoding: false,
+			EOL: false,
+			tabFocusMode: false
+		};
+		let somethingChanged = false;
+
+		if (typeof update.selectionStatus !== 'undefined') {
+			if (this._selectionStatus !== update.selectionStatus) {
+				this._selectionStatus = update.selectionStatus;
+				somethingChanged = true;
+				e.selectionStatus = true;
+			}
+		}
+		if (typeof update.mode !== 'undefined') {
+			if (this._mode !== update.mode) {
+				this._mode = update.mode;
+				somethingChanged = true;
+				e.mode = true;
+			}
+		}
+		if (typeof update.encoding !== 'undefined') {
+			if (this._encoding !== update.encoding) {
+				this._encoding = update.encoding;
+				somethingChanged = true;
+				e.encoding = true;
+			}
+		}
+		if (typeof update.EOL !== 'undefined') {
+			if (this._EOL !== update.EOL) {
+				this._EOL = update.EOL;
+				somethingChanged = true;
+				e.EOL = true;
+			}
+		}
+		if (typeof update.tabFocusMode !== 'undefined') {
+			if (this._tabFocusMode !== update.tabFocusMode) {
+				this._tabFocusMode = update.tabFocusMode;
+				somethingChanged = true;
+				e.tabFocusMode = true;
+			}
+		}
+
+		if (somethingChanged) {
+			return e;
+		}
+		return null;
+	}
+}
+
 const nlsSingleSelectionRange = nls.localize('singleSelectionRange', "Ln {0}, Col {1} ({2} selected)");
 const nlsSingleSelection = nls.localize('singleSelection', "Ln {0}, Col {1}");
 const nlsMultiSelectionRange = nls.localize('multiSelectionRange', "{0} selections ({1} characters selected)");
@@ -83,7 +167,7 @@ const nlsTabFocusMode = nls.localize('tabFocusModeEnabled', "Tab moves focus");
 
 export class EditorStatus implements IStatusbarItem {
 
-	private state: IState;
+	private state: State;
 	private element: HTMLElement;
 	private tabFocusModeElement: HTMLElement;
 	private selectionElement: HTMLElement;
@@ -99,13 +183,7 @@ export class EditorStatus implements IStatusbarItem {
 		@IEventService private eventService: IEventService
 	) {
 		this.toDispose = [];
-		this.state = {
-			selectionStatus: null,
-			mode: null,
-			encoding: null,
-			EOL: null,
-			tabFocusMode: false,
-		};
+		this.state = new State();
 	}
 
 	public render(container: HTMLElement): IDisposable {
@@ -115,24 +193,27 @@ export class EditorStatus implements IStatusbarItem {
 		this.tabFocusModeElement.title = nls.localize('disableTabMode', "Disable Accessibility Mode");
 		this.tabFocusModeElement.onclick = () => this.onTabFocusModeClick();
 		this.tabFocusModeElement.textContent = nlsTabFocusMode;
+		hide(this.tabFocusModeElement);
 
 		this.selectionElement = append(this.element, $('a.editor-status-selection'));
 		this.selectionElement.title = nls.localize('gotoLine', "Go to Line");
 		this.selectionElement.onclick = () => this.onSelectionClick();
+		hide(this.selectionElement);
 
 		this.encodingElement = append(this.element, $('a.editor-status-encoding'));
 		this.encodingElement.title = nls.localize('selectEncoding', "Select Encoding");
 		this.encodingElement.onclick = () => this.onEncodingClick();
+		hide(this.encodingElement);
 
 		this.eolElement = append(this.element, $('a.editor-status-eol'));
 		this.eolElement.title = nls.localize('selectEOL', "Select End of Line Sequence");
 		this.eolElement.onclick = () => this.onEOLClick();
+		hide(this.eolElement);
 
 		this.modeElement = append(this.element, $('a.editor-status-mode'));
 		this.modeElement.title = nls.localize('selectLanguageMode', "Select Language Mode");
 		this.modeElement.onclick = () => this.onModeClick();
-
-		this.setState(this.state);
+		hide(this.modeElement);
 
 		this.toDispose.push(
 			this.eventService.addListener2(EventType.EDITOR_INPUT_CHANGED, (e: EditorEvent) => this.onEditorInputChange(e.editor)),
@@ -146,52 +227,59 @@ export class EditorStatus implements IStatusbarItem {
 		return combinedDispose(...this.toDispose);
 	}
 
-	private setState(state: IState): void {
-		this.state = state;
-
-		if (state.tabFocusMode && state.tabFocusMode === true) {
-			show(this.tabFocusModeElement);
-		} else {
-			hide(this.tabFocusModeElement);
+	private updateState(update: StateDelta): void {
+		let changed = this.state.update(update);
+		if (!changed) {
+			// Nothing really changed
+			return;
 		}
 
-		let selectionLabel = this.getSelectionLabel();
-		if (selectionLabel) {
-			this.selectionElement.textContent = selectionLabel;
-			show(this.selectionElement);
-		} else {
-			hide(this.selectionElement);
+		if (changed.tabFocusMode) {
+			if (this.state.tabFocusMode && this.state.tabFocusMode === true) {
+				show(this.tabFocusModeElement);
+			} else {
+				hide(this.tabFocusModeElement);
+			}
 		}
 
-		if (state.encoding) {
-			this.encodingElement.textContent = state.encoding;
-			show(this.encodingElement);
-		} else {
-			hide(this.encodingElement);
+		if (changed.selectionStatus) {
+			if (this.state.selectionStatus) {
+				this.selectionElement.textContent = this.state.selectionStatus;
+				show(this.selectionElement);
+			} else {
+				hide(this.selectionElement);
+			}
 		}
 
-		if (state.EOL) {
-			this.eolElement.textContent = state.EOL === '\r\n' ? nlsEOLCRLF : nlsEOLLF;
-			show(this.eolElement);
-		} else {
-			hide(this.eolElement);
+		if (changed.encoding) {
+			if (this.state.encoding) {
+				this.encodingElement.textContent = this.state.encoding;
+				show(this.encodingElement);
+			} else {
+				hide(this.encodingElement);
+			}
 		}
 
-		if (state.mode) {
-			this.modeElement.textContent = state.mode;
-			show(this.modeElement);
-		} else {
-			hide(this.modeElement);
+		if (changed.EOL) {
+			if (this.state.EOL) {
+				this.eolElement.textContent = this.state.EOL === '\r\n' ? nlsEOLCRLF : nlsEOLLF;
+				show(this.eolElement);
+			} else {
+				hide(this.eolElement);
+			}
 		}
-	}
 
-	private updateState(update: any): void {
-		this.setState(objects.assign({}, this.state, update));
+		if (changed.mode) {
+			if (this.state.mode) {
+				this.modeElement.textContent = this.state.mode;
+				show(this.modeElement);
+			} else {
+				hide(this.modeElement);
+			}
+		}
 	}
 
-	private getSelectionLabel(): string {
-		let info = this.state.selectionStatus;
-
+	private getSelectionLabel(info:IEditorSelectionStatus): string {
 		if (!info || !info.selections) {
 			return null;
 		}
@@ -256,7 +344,7 @@ export class EditorStatus implements IStatusbarItem {
 			return;
 		}
 
-		let info: { mode: string; } = { mode: null };
+		let info: StateDelta = { mode: null };
 
 		// We only support text based editors
 		if (e instanceof BaseTextEditor) {
@@ -312,7 +400,7 @@ export class EditorStatus implements IStatusbarItem {
 			}
 		}
 
-		this.updateState({ selectionStatus: info });
+		this.updateState({ selectionStatus: this.getSelectionLabel(info) });
 	}
 
 	private onEOLChange(e: IBaseEditor): void {
@@ -320,7 +408,7 @@ export class EditorStatus implements IStatusbarItem {
 			return;
 		}
 
-		let info: { EOL: string; } = { EOL: null };
+		let info: StateDelta = { EOL: null };
 
 		// We only support writable text based code editors
 		if (e instanceof BaseTextEditor && isWritableCodeEditor(e)) {
@@ -339,7 +427,7 @@ export class EditorStatus implements IStatusbarItem {
 			return;
 		}
 
-		let info: { encoding: string; } = { encoding: null };
+		let info: StateDelta = { encoding: null };
 
 		// We only support text based editors
 		if (e instanceof BaseTextEditor) {
@@ -373,7 +461,7 @@ export class EditorStatus implements IStatusbarItem {
 			return;
 		}
 
-		let info: { tabFocusMode: boolean; } = { tabFocusMode: false };
+		let info: StateDelta = { tabFocusMode: false };
 
 		// We only support text based editors
 		if (e instanceof BaseTextEditor && isCodeEditorWithTabFocusMode(e)) {