Extract StyleMutator to its own file

src/vs/base/browser/dom.ts

@@ -178,95 +178,7 @@ export function toggleClass(node: HTMLElement, className: string, shouldHaveIt?:
 	}
 }
 
-export const StyleMutator = {
-	setMaxWidth: (domNode: HTMLElement, maxWidth: number) => {
-		let desiredValue = maxWidth + 'px';
-		if (domNode.style.maxWidth !== desiredValue) {
-			domNode.style.maxWidth = desiredValue;
-		}
-	},
-	setWidth: (domNode: HTMLElement, width: number) => {
-		let desiredValue = width + 'px';
-		if (domNode.style.width !== desiredValue) {
-			domNode.style.width = desiredValue;
-		}
-	},
-	setHeight: (domNode: HTMLElement, height: number) => {
-		let desiredValue = height + 'px';
-		if (domNode.style.height !== desiredValue) {
-			domNode.style.height = desiredValue;
-		}
-	},
-	setTop: (domNode: HTMLElement, top: number) => {
-		let desiredValue = top + 'px';
-		if (domNode.style.top !== desiredValue) {
-			domNode.style.top = desiredValue;
-		}
-	},
-	setLeft: (domNode: HTMLElement, left: number) => {
-		let desiredValue = left + 'px';
-		if (domNode.style.left !== desiredValue) {
-			domNode.style.left = desiredValue;
-		}
-	},
-	setBottom: (domNode: HTMLElement, bottom: number) => {
-		let desiredValue = bottom + 'px';
-		if (domNode.style.bottom !== desiredValue) {
-			domNode.style.bottom = desiredValue;
-		}
-	},
-	setRight: (domNode: HTMLElement, right: number) => {
-		let desiredValue = right + 'px';
-		if (domNode.style.right !== desiredValue) {
-			domNode.style.right = desiredValue;
-		}
-	},
-	setFontSize: (domNode: HTMLElement, fontSize: number) => {
-		let desiredValue = fontSize + 'px';
-		if (domNode.style.fontSize !== desiredValue) {
-			domNode.style.fontSize = desiredValue;
-		}
-	},
-	setLineHeight: (domNode: HTMLElement, lineHeight: number) => {
-		let desiredValue = lineHeight + 'px';
-		if (domNode.style.lineHeight !== desiredValue) {
-			domNode.style.lineHeight = desiredValue;
-		}
-	},
-	setTransform: null,
-	setDisplay: (domNode: HTMLElement, desiredValue: string) => {
-		if (domNode.style.display !== desiredValue) {
-			domNode.style.display = desiredValue;
-		}
-	},
-	setVisibility: (domNode: HTMLElement, desiredValue: string) => {
-		if (domNode.style.visibility !== desiredValue) {
-			domNode.style.visibility = desiredValue;
-		}
-	},
-};
 
-// Define setTransform
-function setWebkitTransform(domNode: HTMLElement, desiredValue: string): void {
-	if (domNode.getAttribute('data-transform') !== desiredValue) {
-		domNode.setAttribute('data-transform', desiredValue);
-		(<any>domNode.style).webkitTransform = desiredValue;
-	}
-}
-function setTransform(domNode: HTMLElement, desiredValue: string): void {
-	if (domNode.getAttribute('data-transform') !== desiredValue) {
-		domNode.setAttribute('data-transform', desiredValue);
-		domNode.style.transform = desiredValue;
-	}
-}
-(function() {
-	let testDomNode = document.createElement('div');
-	if (typeof (<any>testDomNode.style).webkitTransform !== 'undefined') {
-		StyleMutator.setTransform = setWebkitTransform;
-	} else {
-		StyleMutator.setTransform = setTransform;
-	}
-})();
 
 function _addListener(node: Element, type: string, handler: (event: any) => void, useCapture?: boolean): () => void;
 function _addListener(node: Window, type: string, handler: (event: any) => void, useCapture?: boolean): () => void;

src/vs/base/browser/styleMutator.ts

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+export const StyleMutator = {
+	setMaxWidth: (domNode: HTMLElement, maxWidth: number) => {
+		let desiredValue = maxWidth + 'px';
+		if (domNode.style.maxWidth !== desiredValue) {
+			domNode.style.maxWidth = desiredValue;
+		}
+	},
+	setWidth: (domNode: HTMLElement, width: number) => {
+		let desiredValue = width + 'px';
+		if (domNode.style.width !== desiredValue) {
+			domNode.style.width = desiredValue;
+		}
+	},
+	setHeight: (domNode: HTMLElement, height: number) => {
+		let desiredValue = height + 'px';
+		if (domNode.style.height !== desiredValue) {
+			domNode.style.height = desiredValue;
+		}
+	},
+	setTop: (domNode: HTMLElement, top: number) => {
+		let desiredValue = top + 'px';
+		if (domNode.style.top !== desiredValue) {
+			domNode.style.top = desiredValue;
+		}
+	},
+	setLeft: (domNode: HTMLElement, left: number) => {
+		let desiredValue = left + 'px';
+		if (domNode.style.left !== desiredValue) {
+			domNode.style.left = desiredValue;
+		}
+	},
+	setBottom: (domNode: HTMLElement, bottom: number) => {
+		let desiredValue = bottom + 'px';
+		if (domNode.style.bottom !== desiredValue) {
+			domNode.style.bottom = desiredValue;
+		}
+	},
+	setRight: (domNode: HTMLElement, right: number) => {
+		let desiredValue = right + 'px';
+		if (domNode.style.right !== desiredValue) {
+			domNode.style.right = desiredValue;
+		}
+	},
+	setFontSize: (domNode: HTMLElement, fontSize: number) => {
+		let desiredValue = fontSize + 'px';
+		if (domNode.style.fontSize !== desiredValue) {
+			domNode.style.fontSize = desiredValue;
+		}
+	},
+	setLineHeight: (domNode: HTMLElement, lineHeight: number) => {
+		let desiredValue = lineHeight + 'px';
+		if (domNode.style.lineHeight !== desiredValue) {
+			domNode.style.lineHeight = desiredValue;
+		}
+	},
+	setTransform: null,
+	setDisplay: (domNode: HTMLElement, desiredValue: string) => {
+		if (domNode.style.display !== desiredValue) {
+			domNode.style.display = desiredValue;
+		}
+	},
+	setVisibility: (domNode: HTMLElement, desiredValue: string) => {
+		if (domNode.style.visibility !== desiredValue) {
+			domNode.style.visibility = desiredValue;
+		}
+	},
+};
+
+// Define setTransform
+function setWebkitTransform(domNode: HTMLElement, desiredValue: string): void {
+	if (domNode.getAttribute('data-transform') !== desiredValue) {
+		domNode.setAttribute('data-transform', desiredValue);
+		(<any>domNode.style).webkitTransform = desiredValue;
+	}
+}
+function setTransform(domNode: HTMLElement, desiredValue: string): void {
+	if (domNode.getAttribute('data-transform') !== desiredValue) {
+		domNode.setAttribute('data-transform', desiredValue);
+		domNode.style.transform = desiredValue;
+	}
+}
+(function() {
+	let testDomNode = document.createElement('div');
+	if (typeof (<any>testDomNode.style).webkitTransform !== 'undefined') {
+		StyleMutator.setTransform = setWebkitTransform;
+	} else {
+		StyleMutator.setTransform = setTransform;
+	}
+})();
\ No newline at end of file

src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts

@@ -7,9 +7,10 @@
 import * as Browser from 'vs/base/browser/browser';
 import {ARROW_IMG_SIZE, AbstractScrollbar, ScrollbarState, IMouseMoveEventData} from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
 import {StandardMouseEvent, StandardMouseWheelEvent} from 'vs/base/browser/mouseEvent';
-import {IDomNodePosition, StyleMutator} from 'vs/base/browser/dom';
+import {IDomNodePosition} from 'vs/base/browser/dom';
 import {IParent, IScrollableElementOptions, Visibility} from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import {IScrollable} from 'vs/base/common/scrollable';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export class HorizontalScrollbar extends AbstractScrollbar {
 

src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts

@@ -7,9 +7,10 @@
 import * as Browser from 'vs/base/browser/browser';
 import {ARROW_IMG_SIZE, AbstractScrollbar, ScrollbarState, IMouseMoveEventData} from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
 import {StandardMouseEvent, StandardMouseWheelEvent} from 'vs/base/browser/mouseEvent';
-import {IDomNodePosition, StyleMutator} from 'vs/base/browser/dom';
+import {IDomNodePosition} from 'vs/base/browser/dom';
 import {IParent, IScrollableElementOptions, Visibility} from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import {IScrollable} from 'vs/base/common/scrollable';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export class VerticalScrollbar extends AbstractScrollbar {
 

src/vs/editor/browser/controller/keyboardHandler.ts

@@ -22,6 +22,7 @@ import Event, {Emitter} from 'vs/base/common/event';
 import {TextAreaHandler} from 'vs/editor/common/controller/textAreaHandler';
 import {ITextAreaWrapper, IClipboardEvent, IKeyboardEventWrapper, ISimpleModel, TextAreaStrategy} from 'vs/editor/common/controller/textAreaState';
 import {GlobalScreenReaderNVDA} from 'vs/editor/common/config/commonEditorConfig';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 class ClipboardEventWrapper implements IClipboardEvent {
 
@@ -243,23 +244,23 @@ export class KeyboardHandler extends ViewEventHandler implements Lifecycle.IDisp
 			let visibleRange = this.viewHelper.visibleRangeForPositionRelativeToEditor(lineNumber, column);
 
 			if (visibleRange) {
-				DomUtils.StyleMutator.setTop(this.textArea.actual, visibleRange.top);
-				DomUtils.StyleMutator.setLeft(this.textArea.actual, this.contentLeft + visibleRange.left - this.scrollLeft);
+				StyleMutator.setTop(this.textArea.actual, visibleRange.top);
+				StyleMutator.setLeft(this.textArea.actual, this.contentLeft + visibleRange.left - this.scrollLeft);
 			}
 
 			if (Browser.isIE11orEarlier) {
-				DomUtils.StyleMutator.setWidth(this.textArea.actual, this.contentWidth);
+				StyleMutator.setWidth(this.textArea.actual, this.contentWidth);
 			}
 
 			// Show the textarea
-			DomUtils.StyleMutator.setHeight(this.textArea.actual, this.context.configuration.editor.lineHeight);
+			StyleMutator.setHeight(this.textArea.actual, this.context.configuration.editor.lineHeight);
 			DomUtils.addClass(this.viewHelper.viewDomNode, 'ime-input');
 		}));
 		this._toDispose.push(this.textAreaHandler.onCompositionEnd((e) => {
 			this.textArea.actual.style.height = '';
 			this.textArea.actual.style.width = '';
-			DomUtils.StyleMutator.setLeft(this.textArea.actual, 0);
-			DomUtils.StyleMutator.setTop(this.textArea.actual, 0);
+			StyleMutator.setLeft(this.textArea.actual, 0);
+			StyleMutator.setTop(this.textArea.actual, 0);
 			DomUtils.removeClass(this.viewHelper.viewDomNode, 'ime-input');
 		}));
 		this._toDispose.push(GlobalScreenReaderNVDA.onChange((value) => {
@@ -293,8 +294,8 @@ export class KeyboardHandler extends ViewEventHandler implements Lifecycle.IDisp
 
 	public onConfigurationChanged(e: EditorCommon.IConfigurationChangedEvent): boolean {
 		// Give textarea same font size & line height as editor, for the IME case (when the textarea is visible)
-		DomUtils.StyleMutator.setFontSize(this.textArea.actual, this.context.configuration.editor.fontSize);
-		DomUtils.StyleMutator.setLineHeight(this.textArea.actual, this.context.configuration.editor.lineHeight);
+		StyleMutator.setFontSize(this.textArea.actual, this.context.configuration.editor.fontSize);
+		StyleMutator.setLineHeight(this.textArea.actual, this.context.configuration.editor.lineHeight);
 		if (e.experimentalScreenReader) {
 			this.textAreaHandler.setStrategy(this._getStrategy());
 		}

src/vs/editor/browser/view/viewImpl.ts

@@ -9,6 +9,7 @@ import DomUtils = require('vs/base/browser/dom');
 import EventEmitter = require('vs/base/common/eventEmitter');
 import Errors = require('vs/base/common/errors');
 import Timer = require('vs/base/common/timer');
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 import {ViewEventHandler} from 'vs/editor/common/viewModel/viewEventHandler';
 import {KeyboardHandler} from 'vs/editor/browser/controller/keyboardHandler';
@@ -176,11 +177,11 @@ export class View extends ViewEventHandler implements EditorBrowser.IView, Lifec
 		this.textArea.setAttribute('aria-label', this.context.configuration.editor.ariaLabel);
 		this.textArea.setAttribute('role', 'textbox');
 		this.textArea.setAttribute('aria-multiline', 'true');
-		DomUtils.StyleMutator.setTop(this.textArea, 0);
-		DomUtils.StyleMutator.setLeft(this.textArea, 0);
+		StyleMutator.setTop(this.textArea, 0);
+		StyleMutator.setLeft(this.textArea, 0);
 		// Give textarea same font size & line height as editor, for the IME case (when the textarea is visible)
-		DomUtils.StyleMutator.setFontSize(this.textArea, this.context.configuration.editor.fontSize);
-		DomUtils.StyleMutator.setLineHeight(this.textArea, this.context.configuration.editor.lineHeight);
+		StyleMutator.setFontSize(this.textArea, this.context.configuration.editor.fontSize);
+		StyleMutator.setLineHeight(this.textArea, this.context.configuration.editor.lineHeight);
 
 		this.listenersToDispose.push(DomUtils.addDisposableListener(this.textArea, 'focus', () => this._setHasFocus(true)));
 		this.listenersToDispose.push(DomUtils.addDisposableListener(this.textArea, 'blur', () => this._setHasFocus(false)));
@@ -199,10 +200,10 @@ export class View extends ViewEventHandler implements EditorBrowser.IView, Lifec
 			}
 		}
 		this.textAreaCover.style.position = 'absolute';
-		DomUtils.StyleMutator.setWidth(this.textAreaCover, 1);
-		DomUtils.StyleMutator.setHeight(this.textAreaCover, 1);
-		DomUtils.StyleMutator.setTop(this.textAreaCover, 0);
-		DomUtils.StyleMutator.setLeft(this.textAreaCover, 0);
+		StyleMutator.setWidth(this.textAreaCover, 1);
+		StyleMutator.setHeight(this.textAreaCover, 1);
+		StyleMutator.setTop(this.textAreaCover, 0);
+		StyleMutator.setLeft(this.textAreaCover, 0);
 	}
 
 	private createViewParts(): void {
@@ -414,18 +415,18 @@ export class View extends ViewEventHandler implements EditorBrowser.IView, Lifec
 			// See Bug 19676: Editor misses a layout event
 			var clientWidth = this.overflowGuardContainer.clientWidth + 'px';
 		}
-		DomUtils.StyleMutator.setWidth(this.domNode, layoutInfo.width);
-		DomUtils.StyleMutator.setHeight(this.domNode, layoutInfo.height);
+		StyleMutator.setWidth(this.domNode, layoutInfo.width);
+		StyleMutator.setHeight(this.domNode, layoutInfo.height);
 
-		DomUtils.StyleMutator.setWidth(this.overflowGuardContainer, layoutInfo.width);
-		DomUtils.StyleMutator.setHeight(this.overflowGuardContainer, layoutInfo.height);
+		StyleMutator.setWidth(this.overflowGuardContainer, layoutInfo.width);
+		StyleMutator.setHeight(this.overflowGuardContainer, layoutInfo.height);
 
-		DomUtils.StyleMutator.setWidth(this.linesContent, 1000000);
-		DomUtils.StyleMutator.setHeight(this.linesContent, 1000000);
+		StyleMutator.setWidth(this.linesContent, 1000000);
+		StyleMutator.setHeight(this.linesContent, 1000000);
 
-		DomUtils.StyleMutator.setLeft(this.linesContentContainer, layoutInfo.contentLeft);
-		DomUtils.StyleMutator.setWidth(this.linesContentContainer, layoutInfo.contentWidth);
-		DomUtils.StyleMutator.setHeight(this.linesContentContainer, layoutInfo.contentHeight);
+		StyleMutator.setLeft(this.linesContentContainer, layoutInfo.contentLeft);
+		StyleMutator.setWidth(this.linesContentContainer, layoutInfo.contentWidth);
+		StyleMutator.setHeight(this.linesContentContainer, layoutInfo.contentHeight);
 
 		this.outgoingEventBus.emit(EditorCommon.EventType.ViewLayoutChanged, layoutInfo);
 		return false;

src/vs/editor/browser/view/viewOverlays.ts

@@ -11,6 +11,7 @@ import Lifecycle = require('vs/base/common/lifecycle');
 import {ViewLayer, IVisibleLineData} from 'vs/editor/browser/view/viewLayer';
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import EditorCommon = require('vs/editor/common/editorCommon');
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export class ViewOverlays extends ViewLayer {
 	private _dynamicOverlays:EditorBrowser.IDynamicViewOverlay[];
@@ -178,8 +179,8 @@ class ViewOverlayLine implements IVisibleLineData {
 		if (currentLineNumber !== lineNumber.toString()) {
 			this._domNode.setAttribute('lineNumber', lineNumber.toString());
 		}
-		DomUtils.StyleMutator.setTop(this._domNode, deltaTop);
-		DomUtils.StyleMutator.setHeight(this._domNode, this._context.configuration.editor.lineHeight);
+		StyleMutator.setTop(this._domNode, deltaTop);
+		StyleMutator.setHeight(this._domNode, this._context.configuration.editor.lineHeight);
 	}
 }
 
@@ -188,8 +189,8 @@ export class ContentViewOverlays extends ViewOverlays {
 	constructor(context:EditorBrowser.IViewContext, layoutProvider:EditorBrowser.ILayoutProvider) {
 		super(context, layoutProvider);
 
-		DomUtils.StyleMutator.setWidth(this.domNode, 0);
-		DomUtils.StyleMutator.setHeight(this.domNode, 0);
+		StyleMutator.setWidth(this.domNode, 0);
+		StyleMutator.setHeight(this.domNode, 0);
 	}
 
 	public onScrollWidthChanged(scrollWidth:number): boolean {
@@ -199,7 +200,7 @@ export class ContentViewOverlays extends ViewOverlays {
 	_viewOverlaysRender(ctx:EditorBrowser.IRestrictedRenderingContext): void {
 		super._viewOverlaysRender(ctx);
 
-		DomUtils.StyleMutator.setWidth(this.domNode, this._layoutProvider.getScrollWidth());
+		StyleMutator.setWidth(this.domNode, this._layoutProvider.getScrollWidth());
 	}
 }
 
@@ -217,7 +218,7 @@ export class MarginViewOverlays extends ViewOverlays {
 		this._scrollHeight = layoutProvider.getScrollHeight();
 
 		this.domNode.className = EditorBrowser.ClassNames.MARGIN_VIEW_OVERLAYS + ' monaco-editor-background';
-		DomUtils.StyleMutator.setWidth(this.domNode, 1);
+		StyleMutator.setWidth(this.domNode, 1);
 		this._hasVerticalScroll = true;
 	}
 
@@ -244,7 +245,7 @@ export class MarginViewOverlays extends ViewOverlays {
 		this._requestModificationFrame(() => {
 			var glyphMargin = this._getGlyphMarginDomNode();
 			if (glyphMargin) {
-				DomUtils.StyleMutator.setHeight(glyphMargin, this._scrollHeight);
+				StyleMutator.setHeight(glyphMargin, this._scrollHeight);
 			}
 		});
 		return super.onScrollHeightChanged(scrollHeight) || true;
@@ -256,12 +257,12 @@ export class MarginViewOverlays extends ViewOverlays {
 		this._scrollHeight = this._layoutProvider.getScrollHeight();
 
 		this._requestModificationFrame(() => {
-			DomUtils.StyleMutator.setWidth(this.domNode, layoutInfo.contentLeft);
+			StyleMutator.setWidth(this.domNode, layoutInfo.contentLeft);
 
 			var glyphMargin = this._getGlyphMarginDomNode();
 			if (glyphMargin) {
-				DomUtils.StyleMutator.setLeft(glyphMargin, layoutInfo.glyphMarginLeft);
-				DomUtils.StyleMutator.setWidth(glyphMargin, layoutInfo.glyphMarginWidth);
+				StyleMutator.setLeft(glyphMargin, layoutInfo.glyphMarginLeft);
+				StyleMutator.setWidth(glyphMargin, layoutInfo.glyphMarginWidth);
 			}
 		});
 		return super.onLayoutChanged(layoutInfo) || true;
@@ -278,15 +279,15 @@ export class MarginViewOverlays extends ViewOverlays {
 		if (this._hasVerticalScroll) {
 			if (Browser.canUseTranslate3d) {
 				var transform = 'translate3d(0px, ' + ctx.linesViewportData.visibleRangesDeltaTop + 'px, 0px)';
-				DomUtils.StyleMutator.setTransform(this.domNode, transform);
+				StyleMutator.setTransform(this.domNode, transform);
 			} else {
 				if (this._hasVerticalScroll) {
-					DomUtils.StyleMutator.setTop(this.domNode, ctx.linesViewportData.visibleRangesDeltaTop);
+					StyleMutator.setTop(this.domNode, ctx.linesViewportData.visibleRangesDeltaTop);
 				}
 			}
 			this._hasVerticalScroll = false;
 		}
 		var height = Math.min(this._layoutProvider.getTotalHeight(), 1000000);
-		DomUtils.StyleMutator.setHeight(this.domNode, height);
+		StyleMutator.setHeight(this.domNode, height);
 	}
 }
\ No newline at end of file

src/vs/editor/browser/viewParts/contentWidgets/contentWidgets.ts

@@ -11,6 +11,7 @@ import * as DomUtils from 'vs/base/browser/dom';
 import {ViewPart} from 'vs/editor/browser/view/viewPart';
 import * as EditorBrowser from 'vs/editor/browser/editorBrowser';
 import * as EditorCommon from 'vs/editor/common/editorCommon';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 interface IWidgetData {
 	allowEditorOverflow: boolean;
@@ -112,7 +113,7 @@ export class ViewContentWidgets extends ViewPart {
 			let widgetId:string;
 			for (widgetId in this._widgets) {
 				if (this._widgets.hasOwnProperty(widgetId)) {
-					DomUtils.StyleMutator.setMaxWidth(this._widgets[widgetId].widget.getDomNode(), this._contentWidth);
+					StyleMutator.setMaxWidth(this._widgets[widgetId].widget.getDomNode(), this._contentWidth);
 				}
 			}
 		});
@@ -146,8 +147,8 @@ export class ViewContentWidgets extends ViewPart {
 
 		let domNode = widget.getDomNode();
 		domNode.style.position = 'absolute';
-		DomUtils.StyleMutator.setMaxWidth(domNode, this._contentWidth);
-		DomUtils.StyleMutator.setVisibility(domNode, 'hidden');
+		StyleMutator.setMaxWidth(domNode, this._contentWidth);
+		StyleMutator.setVisibility(domNode, 'hidden');
 		domNode.setAttribute('widgetId', widget.getId());
 
 		if (widgetData.allowEditorOverflow) {
@@ -378,14 +379,14 @@ export class ViewContentWidgets extends ViewPart {
 
 					if (data.hasOwnProperty(widgetId)) {
 						if (widget.allowEditorOverflow) {
-							DomUtils.StyleMutator.setTop(domNode, data[widgetId].top);
-							DomUtils.StyleMutator.setLeft(domNode, data[widgetId].left);
+							StyleMutator.setTop(domNode, data[widgetId].top);
+							StyleMutator.setLeft(domNode, data[widgetId].left);
 						} else {
-							DomUtils.StyleMutator.setTop(domNode, data[widgetId].top + ctx.viewportTop - ctx.bigNumbersDelta);
-							DomUtils.StyleMutator.setLeft(domNode, data[widgetId].left);
+							StyleMutator.setTop(domNode, data[widgetId].top + ctx.viewportTop - ctx.bigNumbersDelta);
+							StyleMutator.setLeft(domNode, data[widgetId].left);
 						}
 						if (!widget.isVisible) {
-							DomUtils.StyleMutator.setVisibility(domNode, 'inherit');
+							StyleMutator.setVisibility(domNode, 'inherit');
 							domNode.setAttribute('monaco-visible-content-widget', 'true');
 							widget.isVisible = true;
 						}
@@ -393,7 +394,7 @@ export class ViewContentWidgets extends ViewPart {
 						if (widget.isVisible) {
 							domNode.removeAttribute('monaco-visible-content-widget');
 							widget.isVisible = false;
-							DomUtils.StyleMutator.setVisibility(domNode, 'hidden');
+							StyleMutator.setVisibility(domNode, 'hidden');
 						}
 					}
 				}

src/vs/editor/browser/viewParts/lines/viewLine.ts

@@ -5,12 +5,12 @@
 'use strict';
 
 import * as Browser from 'vs/base/browser/browser';
-import {StyleMutator} from 'vs/base/browser/dom';
 import {IVisibleLineData} from 'vs/editor/browser/view/viewLayer';
 import {ILineParts, createLineParts} from 'vs/editor/common/viewLayout/viewLineParts';
 import {ClassNames, IViewContext} from 'vs/editor/browser/editorBrowser';
 import {IModelDecoration, IConfigurationChangedEvent, HorizontalRange} from 'vs/editor/common/editorCommon';
 import {renderLine} from 'vs/editor/common/viewLayout/viewLineRenderer';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export class ViewLine implements IVisibleLineData {
 

src/vs/editor/browser/viewParts/lines/viewLines.ts

@@ -5,7 +5,6 @@
 'use strict';
 
 import Browser = require('vs/base/browser/browser');
-import DomUtils = require('vs/base/browser/dom');
 import Schedulers = require('vs/base/common/async');
 
 import {createLine, ViewLine} from 'vs/editor/browser/viewParts/lines/viewLine';
@@ -13,6 +12,7 @@ import {IVisibleLineData, ViewLayer} from 'vs/editor/browser/view/viewLayer';
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import EditorCommon = require('vs/editor/common/editorCommon');
 import {Range} from 'vs/editor/common/core/range';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export class ViewLines extends ViewLayer {
 
@@ -91,7 +91,7 @@ export class ViewLines extends ViewLayer {
 	}
 
 	public onScrollWidthChanged(scrollWidth:number): boolean {
-		DomUtils.StyleMutator.setWidth(this.domNode, scrollWidth);
+		StyleMutator.setWidth(this.domNode, scrollWidth);
 		return false;
 	}
 
@@ -362,21 +362,21 @@ export class ViewLines extends ViewLayer {
 		if (this._hasVerticalScroll || this._hasHorizontalScroll) {
 			if (Browser.canUseTranslate3d) {
 				var transform = 'translate3d(' + -this._layoutProvider.getScrollLeft() + 'px, ' + linesViewportData.visibleRangesDeltaTop + 'px, 0px)';
-				DomUtils.StyleMutator.setTransform(<HTMLElement>this.domNode.parentNode, transform);
+				StyleMutator.setTransform(<HTMLElement>this.domNode.parentNode, transform);
 			} else {
 				if (this._hasVerticalScroll) {
-					DomUtils.StyleMutator.setTop(<HTMLElement>this.domNode.parentNode, linesViewportData.visibleRangesDeltaTop);
+					StyleMutator.setTop(<HTMLElement>this.domNode.parentNode, linesViewportData.visibleRangesDeltaTop);
 				}
 				if (this._hasHorizontalScroll) {
-					DomUtils.StyleMutator.setLeft(<HTMLElement>this.domNode.parentNode, -this._layoutProvider.getScrollLeft());
+					StyleMutator.setLeft(<HTMLElement>this.domNode.parentNode, -this._layoutProvider.getScrollLeft());
 				}
 			}
 			this._hasVerticalScroll = false;
 			this._hasHorizontalScroll = false;
 		}
 
-		DomUtils.StyleMutator.setWidth(this.domNode, this._layoutProvider.getScrollWidth());
-		DomUtils.StyleMutator.setHeight(this.domNode, Math.min(this._layoutProvider.getTotalHeight(), 1000000));
+		StyleMutator.setWidth(this.domNode, this._layoutProvider.getScrollWidth());
+		StyleMutator.setHeight(this.domNode, Math.min(this._layoutProvider.getTotalHeight(), 1000000));
 
 		linesViewportData.visibleRange = this._currentVisibleRange;
 

src/vs/editor/browser/viewParts/overlayWidgets/overlayWidgets.ts

@@ -6,11 +6,11 @@
 'use strict';
 
 import 'vs/css!./overlayWidgets';
-import DomUtils = require('vs/base/browser/dom');
 
 import {ViewPart} from 'vs/editor/browser/view/viewPart';
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import EditorCommon = require('vs/editor/common/editorCommon');
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 interface IWidgetData {
 	widget: EditorBrowser.IOverlayWidget;
@@ -55,7 +55,7 @@ export class ViewOverlayWidgets extends ViewPart {
 		this._editorHeight = layoutInfo.height;
 
 		this._requestModificationFrame(() => {
-			DomUtils.StyleMutator.setWidth(this.domNode, layoutInfo.width);
+			StyleMutator.setWidth(this.domNode, layoutInfo.width);
 		});
 		return true;
 	}
@@ -114,20 +114,20 @@ export class ViewOverlayWidgets extends ViewPart {
 			if (!domNode.hasAttribute(_RESTORE_STYLE_TOP)) {
 				domNode.setAttribute(_RESTORE_STYLE_TOP, domNode.style.top);
 			}
-			DomUtils.StyleMutator.setTop(domNode, 0);
-			DomUtils.StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth));
+			StyleMutator.setTop(domNode, 0);
+			StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth));
 		} else if (widgetData.preference === EditorBrowser.OverlayWidgetPositionPreference.BOTTOM_RIGHT_CORNER) {
 			if (!domNode.hasAttribute(_RESTORE_STYLE_TOP)) {
 				domNode.setAttribute(_RESTORE_STYLE_TOP, domNode.style.top);
 			}
 			var widgetHeight = domNode.clientHeight;
-			DomUtils.StyleMutator.setTop(domNode, (this._editorHeight - widgetHeight - 2 * this._horizontalScrollbarHeight));
-			DomUtils.StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth));
+			StyleMutator.setTop(domNode, (this._editorHeight - widgetHeight - 2 * this._horizontalScrollbarHeight));
+			StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth));
 		} else if (widgetData.preference === EditorBrowser.OverlayWidgetPositionPreference.TOP_CENTER) {
 			if (!domNode.hasAttribute(_RESTORE_STYLE_TOP)) {
 				domNode.setAttribute(_RESTORE_STYLE_TOP, domNode.style.top);
 			}
-			DomUtils.StyleMutator.setTop(domNode, 0);
+			StyleMutator.setTop(domNode, 0);
 			domNode.style.right = '50%';
 		}
 	}

src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts

@@ -5,7 +5,7 @@
 'use strict';
 
 import Browser = require('vs/base/browser/browser');
-import DomUtils = require('vs/base/browser/dom');
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import EditorCommon = require('vs/editor/common/editorCommon');
@@ -93,8 +93,8 @@ export class OverviewRulerImpl {
 	}
 
 	public setLayout(position:EditorCommon.IOverviewRulerPosition, render:boolean): void {
-		DomUtils.StyleMutator.setTop(this._domNode, position.top);
-		DomUtils.StyleMutator.setRight(this._domNode, position.right);
+		StyleMutator.setTop(this._domNode, position.top);
+		StyleMutator.setRight(this._domNode, position.right);
 
 		if (this._width !== position.width || this._height !== position.height) {
 			this._width = position.width;

src/vs/editor/browser/viewParts/rulers/rulers.ts

@@ -10,7 +10,7 @@ import 'vs/css!./rulers';
 import {ViewPart} from 'vs/editor/browser/view/viewPart';
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import EditorCommon = require('vs/editor/common/editorCommon');
-import {StyleMutator} from 'vs/base/browser/dom';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export class Rulers extends ViewPart {
 

src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts

@@ -11,6 +11,7 @@ import DomUtils = require('vs/base/browser/dom');
 import {ViewPart} from 'vs/editor/browser/view/viewPart';
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import EditorCommon = require('vs/editor/common/editorCommon');
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export class ScrollDecorationViewPart extends ViewPart {
 
@@ -62,7 +63,7 @@ export class ScrollDecorationViewPart extends ViewPart {
 
 	_render(ctx: EditorBrowser.IRenderingContext): void {
 		this._requestModificationFrame(() => {
-			DomUtils.StyleMutator.setWidth(this._domNode, this._width);
+			StyleMutator.setWidth(this._domNode, this._width);
 			DomUtils.toggleClass(this._domNode, EditorBrowser.ClassNames.SCROLL_DECORATION, this._shouldShow);
 		});
 	}

src/vs/editor/browser/viewParts/viewCursors/viewCursor.ts

@@ -4,10 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import DomUtils = require('vs/base/browser/dom');
-
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import EditorCommon = require('vs/editor/common/editorCommon');
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export class ViewCursor {
 	private _context:EditorBrowser.IViewContext;
@@ -26,7 +25,7 @@ export class ViewCursor {
 
 		this._domNode = this._createCursorDomNode(isSecondary);
 		this._isVisible = true;
-		DomUtils.StyleMutator.setDisplay(this._domNode, 'none');
+		StyleMutator.setDisplay(this._domNode, 'none');
 		this.updatePosition({
 			lineNumber: 1,
 			column: 1
@@ -39,9 +38,9 @@ export class ViewCursor {
 		if (isSecondary) {
 			domNode.className += ' secondary';
 		}
-		DomUtils.StyleMutator.setHeight(domNode, this._context.configuration.editor.lineHeight);
-		DomUtils.StyleMutator.setTop(domNode, 0);
-		DomUtils.StyleMutator.setLeft(domNode, 0);
+		StyleMutator.setHeight(domNode, this._context.configuration.editor.lineHeight);
+		StyleMutator.setTop(domNode, 0);
+		StyleMutator.setLeft(domNode, 0);
 		domNode.setAttribute('role', 'presentation');
 		domNode.setAttribute('aria-hidden', 'true');
 		return domNode;
@@ -65,14 +64,14 @@ export class ViewCursor {
 
 	public show(): void {
 		if (!this._isVisible) {
-			DomUtils.StyleMutator.setVisibility(this._domNode, 'inherit');
+			StyleMutator.setVisibility(this._domNode, 'inherit');
 			this._isVisible = true;
 		}
 	}
 
 	public hide(): void {
 		if (this._isVisible) {
-			DomUtils.StyleMutator.setVisibility(this._domNode, 'hidden');
+			StyleMutator.setVisibility(this._domNode, 'hidden');
 			this._isVisible = false;
 		}
 	}
@@ -94,7 +93,7 @@ export class ViewCursor {
 
 	public onConfigurationChanged(e:EditorCommon.IConfigurationChangedEvent): boolean {
 		if (e.lineHeight) {
-			DomUtils.StyleMutator.setHeight(this._domNode, this._context.configuration.editor.lineHeight);
+			StyleMutator.setHeight(this._domNode, this._context.configuration.editor.lineHeight);
 		}
 		return true;
 	}
@@ -112,11 +111,11 @@ export class ViewCursor {
 
 	public render(ctx:EditorBrowser.IRestrictedRenderingContext): void {
 		if (this._isInViewport) {
-			DomUtils.StyleMutator.setDisplay(this._domNode, 'block');
-			DomUtils.StyleMutator.setLeft(this._domNode, this._positionLeft);
-			DomUtils.StyleMutator.setTop(this._domNode, this._positionTop + ctx.viewportTop - ctx.bigNumbersDelta);
+			StyleMutator.setDisplay(this._domNode, 'block');
+			StyleMutator.setLeft(this._domNode, this._positionLeft);
+			StyleMutator.setTop(this._domNode, this._positionTop + ctx.viewportTop - ctx.bigNumbersDelta);
 		} else {
-			DomUtils.StyleMutator.setDisplay(this._domNode, 'none');
+			StyleMutator.setDisplay(this._domNode, 'none');
 		}
 	}
 

src/vs/editor/browser/viewParts/viewZones/viewZones.ts

@@ -5,11 +5,11 @@
 'use strict';
 
 import errors = require('vs/base/common/errors');
-import DomUtils = require('vs/base/browser/dom');
 
 import {ViewPart} from 'vs/editor/browser/view/viewPart';
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import EditorCommon = require('vs/editor/common/editorCommon');
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export interface IMyViewZone {
 	whitespaceId: number;
@@ -70,7 +70,7 @@ export class ViewZones extends ViewPart {
 					if (this._zones.hasOwnProperty(id)) {
 						if (zone2Height.hasOwnProperty(id)) {
 							// TODO@Alex - edit dom node properties only in render()
-							DomUtils.StyleMutator.setHeight(this._zones[id].delegate.domNode, zone2Height[id]);
+							StyleMutator.setHeight(this._zones[id].delegate.domNode, zone2Height[id]);
 						}
 					}
 				}
@@ -180,9 +180,9 @@ export class ViewZones extends ViewPart {
 				return;
 			}
 			myZone.delegate.domNode.style.position = 'absolute';
-			DomUtils.StyleMutator.setHeight(myZone.delegate.domNode, computedHeight);
+			StyleMutator.setHeight(myZone.delegate.domNode, computedHeight);
 			myZone.delegate.domNode.style.width = '100%';
-			DomUtils.StyleMutator.setDisplay(myZone.delegate.domNode, 'none');
+			StyleMutator.setDisplay(myZone.delegate.domNode, 'none');
 		});
 
 		this._zones[myZone.whitespaceId.toString()] = myZone;
@@ -293,17 +293,17 @@ export class ViewZones extends ViewPart {
 
 					if (visibleZones.hasOwnProperty(id)) {
 						// zone is visible
-						DomUtils.StyleMutator.setTop(zone.delegate.domNode, (visibleZones[id].verticalOffset - ctx.bigNumbersDelta));
-						DomUtils.StyleMutator.setHeight(zone.delegate.domNode, visibleZones[id].height);
+						StyleMutator.setTop(zone.delegate.domNode, (visibleZones[id].verticalOffset - ctx.bigNumbersDelta));
+						StyleMutator.setHeight(zone.delegate.domNode, visibleZones[id].height);
 						if (!zone.isVisible) {
-							DomUtils.StyleMutator.setDisplay(zone.delegate.domNode, 'block');
+							StyleMutator.setDisplay(zone.delegate.domNode, 'block');
 							zone.delegate.domNode.setAttribute('monaco-visible-view-zone', 'true');
 							zone.isVisible = true;
 						}
 						this._safeCallOnDomNodeTop(zone.delegate, ctx.getScrolledTopFromAbsoluteTop(visibleZones[id].verticalOffset));
 					} else {
 						if (zone.isVisible) {
-							DomUtils.StyleMutator.setDisplay(zone.delegate.domNode, 'none');
+							StyleMutator.setDisplay(zone.delegate.domNode, 'none');
 							zone.delegate.domNode.removeAttribute('monaco-visible-view-zone');
 							zone.isVisible = false;
 						}
@@ -313,7 +313,7 @@ export class ViewZones extends ViewPart {
 			}
 
 			if (hasVisibleZone) {
-				DomUtils.StyleMutator.setWidth(this.domNode, ctx.scrollWidth);
+				StyleMutator.setWidth(this.domNode, ctx.scrollWidth);
 			}
 		});
 	}

src/vs/editor/browser/widget/diffEditorWidget.ts

@@ -21,6 +21,7 @@ import Schedulers = require('vs/base/common/async');
 import {Range} from 'vs/editor/common/core/range';
 import {IInstantiationService} from 'vs/platform/instantiation/common/instantiation';
 import {renderLine} from 'vs/editor/common/viewLayout/viewLineRenderer';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 interface IEditorScrollEvent {
 	scrollLeft: number;
@@ -844,11 +845,11 @@ export class DiffEditorWidget extends EventEmitter.EventEmitter implements Edito
 	private _layoutOverviewViewport(): void {
 		var layout = this._computeOverviewViewport();
 		if (!layout) {
-			DomUtils.StyleMutator.setTop(this._overviewViewportDomElement, 0);
-			DomUtils.StyleMutator.setHeight(this._overviewViewportDomElement, 0);
+			StyleMutator.setTop(this._overviewViewportDomElement, 0);
+			StyleMutator.setHeight(this._overviewViewportDomElement, 0);
 		} else {
-			DomUtils.StyleMutator.setTop(this._overviewViewportDomElement, layout.top);
-			DomUtils.StyleMutator.setHeight(this._overviewViewportDomElement, layout.height);
+			StyleMutator.setTop(this._overviewViewportDomElement, layout.top);
+			StyleMutator.setHeight(this._overviewViewportDomElement, layout.height);
 		}
 	}
 

src/vs/editor/contrib/accessibility/browser/accessibility.ts

@@ -18,13 +18,14 @@ import {KeyMod, KeyCode} from 'vs/base/common/keyCodes';
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import {Disposable} from 'vs/base/common/lifecycle';
 import {Widget} from 'vs/base/browser/ui/widget';
-import {clearNode, StyleMutator} from 'vs/base/browser/dom';
+import {clearNode} from 'vs/base/browser/dom';
 import {IKeybindingService, IKeybindingContextKey} from 'vs/platform/keybinding/common/keybindingService';
 import {ToggleTabFocusModeAction} from 'vs/editor/contrib/toggleTabFocusMode/common/toggleTabFocusMode';
 import * as Strings from 'vs/base/common/strings';
 import {renderHtml} from 'vs/base/browser/htmlContentRenderer';
 import {GlobalScreenReaderNVDA} from 'vs/editor/common/config/commonEditorConfig';
 import {KeybindingsRegistry} from 'vs/platform/keybinding/common/keybindingsRegistry';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 const NLS_SHOW_ACCESSIBILITY_HELP_ACTION_LABEL = nls.localize('ShowAccessibilityHelpAction',"Show Accessibility Help");
 const CONTEXT_ACCESSIBILITY_WIDGET_VISIBLE = 'accessibilityHelpWidgetVisible';

src/vs/editor/contrib/defineKeybinding/browser/defineKeybinding.ts

@@ -25,6 +25,7 @@ import {IOSupport} from 'vs/platform/keybinding/common/keybindingResolver';
 import {IHTMLContentElement} from 'vs/base/common/htmlContent';
 import {renderHtml} from 'vs/base/browser/htmlContentRenderer';
 import {Range} from 'vs/editor/common/core/range';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 const NLS_LAUNCH_MESSAGE = nls.localize('defineKeybinding.start', "Define Keybinding");
 const NLS_DEFINE_MESSAGE = nls.localize('defineKeybinding.initial', "Press desired key combination and ENTER");
@@ -325,8 +326,8 @@ class DefineKeybindingWidget implements EditorBrowser.IOverlayWidget {
 
 		this._domNode = document.createElement('div');
 		this._domNode.className = 'defineKeybindingWidget';
-		DomUtils.StyleMutator.setWidth(this._domNode, DefineKeybindingWidget.WIDTH);
-		DomUtils.StyleMutator.setHeight(this._domNode, DefineKeybindingWidget.HEIGHT);
+		StyleMutator.setWidth(this._domNode, DefineKeybindingWidget.WIDTH);
+		StyleMutator.setHeight(this._domNode, DefineKeybindingWidget.HEIGHT);
 
 		this._domNode.style.display = 'none';
 		this._isVisible = false;
@@ -424,10 +425,10 @@ class DefineKeybindingWidget implements EditorBrowser.IOverlayWidget {
 		let editorLayout = this._editor.getLayoutInfo();
 
 		let top = Math.round((editorLayout.height - DefineKeybindingWidget.HEIGHT) / 2);
-		DomUtils.StyleMutator.setTop(this._domNode, top);
+		StyleMutator.setTop(this._domNode, top);
 
 		let left = Math.round((editorLayout.width - DefineKeybindingWidget.WIDTH) / 2);
-		DomUtils.StyleMutator.setLeft(this._domNode, left);
+		StyleMutator.setLeft(this._domNode, left);
 	}
 
 	public start(): void {

src/vs/editor/contrib/hover/browser/hoverWidgets.ts

@@ -6,8 +6,8 @@
 
 import EditorBrowser = require('vs/editor/browser/editorBrowser');
 import EditorCommon = require('vs/editor/common/editorCommon');
-import DomUtils = require('vs/base/browser/dom');
 import {Position} from 'vs/editor/common/core/position';
+import {StyleMutator} from 'vs/base/browser/styleMutator';
 
 export class ContentHoverWidget implements EditorBrowser.IContentWidget {
 
@@ -53,15 +53,15 @@ export class ContentHoverWidget implements EditorBrowser.IContentWidget {
 		var editorMaxWidth = Math.min(800, parseInt(this._containerDomNode.style.maxWidth, 10));
 
 		// When scrolled horizontally, the div does not want to occupy entire visible area.
-		DomUtils.StyleMutator.setWidth(this._containerDomNode, editorMaxWidth);
-		DomUtils.StyleMutator.setHeight(this._containerDomNode, 0);
-		DomUtils.StyleMutator.setLeft(this._containerDomNode, 0);
+		StyleMutator.setWidth(this._containerDomNode, editorMaxWidth);
+		StyleMutator.setHeight(this._containerDomNode, 0);
+		StyleMutator.setLeft(this._containerDomNode, 0);
 
 		var renderedWidth = Math.min(editorMaxWidth, this._domNode.clientWidth + 5);
 		var renderedHeight = this._domNode.clientHeight + 1;
 
-		DomUtils.StyleMutator.setWidth(this._containerDomNode, renderedWidth);
-		DomUtils.StyleMutator.setHeight(this._containerDomNode, renderedHeight);
+		StyleMutator.setWidth(this._containerDomNode, renderedWidth);
+		StyleMutator.setHeight(this._containerDomNode, renderedHeight);
 
 		this._editor.layoutContentWidget(this);
 		// Simply force a synchronous render on the editor