Prepare for mutating `canUseTranslate3d` at runtime

src/vs/base/browser/ui/list/listView.ts

@@ -87,7 +87,7 @@ export class ListView<T> implements IDisposable {
 		this.gesture = new Gesture(this.rowsContainer);
 
 		this.scrollableElement = new ScrollableElement(this.rowsContainer, {
-			forbidTranslate3dUse: true,
+			canUseTranslate3d: false,
 			horizontal: 'hidden',
 			vertical: 'auto',
 			useShadows: false,

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import * as Browser from 'vs/base/browser/browser';
 import * as Platform from 'vs/base/common/platform';
 import * as DomUtils from 'vs/base/browser/dom';
 import {IMouseEvent, StandardMouseEvent, StandardMouseWheelEvent} from 'vs/base/browser/mouseEvent';
@@ -34,7 +33,7 @@ export interface ScrollbarHost {
 }
 
 export interface AbstractScrollbarOptions {
-	forbidTranslate3dUse: boolean;
+	canUseTranslate3d: boolean;
 	lazyRender:boolean;
 	host: ScrollbarHost;
 	scrollbarState: ScrollbarState;
@@ -45,7 +44,7 @@ export interface AbstractScrollbarOptions {
 
 export abstract class AbstractScrollbar extends Widget {
 
-	protected _forbidTranslate3dUse: boolean;
+	protected _canUseTranslate3d: boolean;
 	protected _host: ScrollbarHost;
 	protected _scrollable: Scrollable;
 	private _lazyRender: boolean;
@@ -60,7 +59,7 @@ export abstract class AbstractScrollbar extends Widget {
 
 	constructor(opts:AbstractScrollbarOptions) {
 		super();
-		this._forbidTranslate3dUse = opts.forbidTranslate3dUse;
+		this._canUseTranslate3d = opts.canUseTranslate3d;
 		this._lazyRender = opts.lazyRender;
 		this._host = opts.host;
 		this._scrollable = opts.scrollable;
@@ -69,10 +68,6 @@ export abstract class AbstractScrollbar extends Widget {
 		this._mouseMoveMonitor = this._register(new GlobalMouseMoveMonitor<IStandardMouseMoveEventData>());
 		this._shouldRender = true;
 		this.domNode = createFastDomNode(document.createElement('div'));
-		if (!this._forbidTranslate3dUse && Browser.canUseTranslate3d) {
-			// Put the scrollbar in its own layer
-			this.domNode.setTransform('translate3d(0px, 0px, 0px)');
-		}
 
 		this._visibilityController.setDomNode(this.domNode);
 		this.domNode.setPosition('absolute');
@@ -159,6 +154,13 @@ export abstract class AbstractScrollbar extends Widget {
 		}
 		this._shouldRender = false;
 
+		if (this._canUseTranslate3d) {
+			// Put the scrollbar in its own layer
+			this.domNode.setTransform('translate3d(0px, 0px, 0px)');
+		} else {
+			this.domNode.setTransform('');
+		}
+
 		this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize());
 		this._updateSlider(this._scrollbarState.getSliderSize(), this._scrollbarState.getArrowSize() + this._scrollbarState.getSliderPosition());
 	}

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import * as Browser from 'vs/base/browser/browser';
 import {AbstractScrollbar, ScrollbarHost, IMouseMoveEventData} from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
 import {IMouseEvent, StandardMouseWheelEvent} from 'vs/base/browser/mouseEvent';
 import {IDomNodePosition} from 'vs/base/browser/dom';
@@ -18,7 +17,7 @@ export class HorizontalScrollbar extends AbstractScrollbar {
 
 	constructor(scrollable: Scrollable, options: ScrollableElementResolvedOptions, host: ScrollbarHost) {
 		super({
-			forbidTranslate3dUse: options.forbidTranslate3dUse,
+			canUseTranslate3d: options.canUseTranslate3d,
 			lazyRender: options.lazyRender,
 			host: host,
 			scrollbarState: new ScrollbarState(
@@ -63,9 +62,11 @@ export class HorizontalScrollbar extends AbstractScrollbar {
 
 	protected _updateSlider(sliderSize: number, sliderPosition: number): void {
 		this.slider.setWidth(sliderSize);
-		if (!this._forbidTranslate3dUse && Browser.canUseTranslate3d) {
+		if (this._canUseTranslate3d) {
 			this.slider.setTransform('translate3d(' + sliderPosition + 'px, 0px, 0px)');
+			this.slider.setLeft(0);
 		} else {
+			this.slider.setTransform('');
 			this.slider.setLeft(sliderPosition);
 		}
 	}

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

@@ -6,12 +6,13 @@
 
 import 'vs/css!./media/scrollbars';
 
+import * as Browser from 'vs/base/browser/browser';
 import * as DomUtils from 'vs/base/browser/dom';
 import * as Platform from 'vs/base/common/platform';
 import {StandardMouseWheelEvent, IMouseEvent} from 'vs/base/browser/mouseEvent';
 import {HorizontalScrollbar} from 'vs/base/browser/ui/scrollbar/horizontalScrollbar';
 import {VerticalScrollbar} from 'vs/base/browser/ui/scrollbar/verticalScrollbar';
-import {ScrollableElementCreationOptions, ScrollableElementResolvedOptions} from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
+import {ScrollableElementCreationOptions, ScrollableElementChangeOptions, ScrollableElementResolvedOptions} from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
 import {visibilityFromString} from 'vs/base/browser/ui/scrollbar/scrollbarVisibilityController';
 import {IDisposable, dispose} from 'vs/base/common/lifecycle';
 import {Scrollable, ScrollEvent, INewScrollState} from 'vs/base/common/scrollable';
@@ -181,8 +182,7 @@ export class ScrollableElement extends Widget {
 	 * Really this is Editor.IEditorScrollbarOptions, but base shouldn't
 	 * depend on Editor.
 	 */
-	public updateOptions(newOptions: ScrollableElementCreationOptions): void {
-		// only support handleMouseWheel changes for now
+	public updateOptions(newOptions: ScrollableElementChangeOptions): void {
 		let massagedOptions = resolveOptions(newOptions);
 		this._options.handleMouseWheel = massagedOptions.handleMouseWheel;
 		this._options.mouseWheelScrollSensitivity = massagedOptions.mouseWheelScrollSensitivity;
@@ -400,7 +400,7 @@ export class DomScrollableElement extends ScrollableElement {
 
 function resolveOptions(opts: ScrollableElementCreationOptions): ScrollableElementResolvedOptions {
 	let result: ScrollableElementResolvedOptions = {
-		forbidTranslate3dUse: (typeof opts.forbidTranslate3dUse !== 'undefined' ? opts.forbidTranslate3dUse : false),
+		canUseTranslate3d: opts.canUseTranslate3d && Browser.canUseTranslate3d,
 		lazyRender: (typeof opts.lazyRender !== 'undefined' ? opts.lazyRender : false),
 		className: (typeof opts.className !== 'undefined' ? opts.className : ''),
 		useShadows: (typeof opts.useShadows !== 'undefined' ? opts.useShadows : true),

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

@@ -8,9 +8,9 @@ import {Visibility} from 'vs/base/browser/ui/scrollbar/scrollbarVisibilityContro
 
 export interface ScrollableElementCreationOptions {
 	/**
-	 * Prevent the scrollbar rendering from using translate3d. Defaults to false.
+	 * Allow scrollbar rendering to use translate3d.
 	 */
-	forbidTranslate3dUse?: boolean;
+	canUseTranslate3d: boolean;
 	/**
 	 * The scrollable element should not do any DOM mutations until renderNow() is called.
 	 * Defaults to false.
@@ -98,8 +98,14 @@ export interface ScrollableElementCreationOptions {
 	saveLastScrollTimeOnClassName?: string;
 }
 
+export interface ScrollableElementChangeOptions {
+	canUseTranslate3d: boolean;
+	handleMouseWheel?: boolean;
+	mouseWheelScrollSensitivity?: number;
+}
+
 export interface ScrollableElementResolvedOptions {
-	forbidTranslate3dUse: boolean;
+	canUseTranslate3d: boolean;
 	lazyRender: boolean;
 	className: string;
 	useShadows: boolean;

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import * as Browser from 'vs/base/browser/browser';
 import {AbstractScrollbar, ScrollbarHost, IMouseMoveEventData} from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
 import {IMouseEvent, StandardMouseWheelEvent} from 'vs/base/browser/mouseEvent';
 import {IDomNodePosition} from 'vs/base/browser/dom';
@@ -18,7 +17,7 @@ export class VerticalScrollbar extends AbstractScrollbar {
 
 	constructor(scrollable: Scrollable, options: ScrollableElementResolvedOptions, host: ScrollbarHost) {
 		super({
-			forbidTranslate3dUse: options.forbidTranslate3dUse,
+			canUseTranslate3d: options.canUseTranslate3d,
 			lazyRender: options.lazyRender,
 			host: host,
 			scrollbarState: new ScrollbarState(
@@ -64,9 +63,11 @@ export class VerticalScrollbar extends AbstractScrollbar {
 
 	protected _updateSlider(sliderSize: number, sliderPosition: number): void {
 		this.slider.setHeight(sliderSize);
-		if (!this._forbidTranslate3dUse && Browser.canUseTranslate3d) {
+		if (this._canUseTranslate3d) {
 			this.slider.setTransform('translate3d(0px, ' + sliderPosition + 'px, 0px)');
+			this.slider.setTop(0);
 		} else {
+			this.slider.setTransform('');
 			this.slider.setTop(sliderPosition);
 		}
 	}

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

@@ -487,7 +487,7 @@ export class TreeView extends HeightMap {
 		this.wrapper = document.createElement('div');
 		this.wrapper.className = 'monaco-tree-wrapper';
 		this.scrollableElement = new ScrollableElementImpl.ScrollableElement(this.wrapper, {
-			forbidTranslate3dUse: true,
+			canUseTranslate3d: false,
 			horizontal: 'hidden',
 			vertical: context.options.verticalScrollMode || 'auto',
 			useShadows: context.options.useShadows,

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

@@ -283,7 +283,9 @@ export class MarginViewOverlays extends ViewOverlays {
 		if (browser.canUseTranslate3d) {
 			var transform = 'translate3d(0px, ' + ctx.linesViewportData.visibleRangesDeltaTop + 'px, 0px)';
 			this.domNode.setTransform(transform);
+			this.domNode.setTop(0);
 		} else {
+			this.domNode.setTransform('');
 			this.domNode.setTop(ctx.linesViewportData.visibleRangesDeltaTop);
 		}
 		var height = Math.min(this._layoutProvider.getTotalHeight(), 1000000);

src/vs/editor/browser/viewLayout/scrollManager.ts

@@ -6,7 +6,7 @@
 
 import {IDisposable, dispose} from 'vs/base/common/lifecycle';
 import * as dom from 'vs/base/browser/dom';
-import {ScrollableElementCreationOptions} from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
+import {ScrollableElementCreationOptions, ScrollableElementChangeOptions} from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
 import {IOverviewRulerLayoutInfo, ScrollableElement} from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import {EventType, IConfiguration, IConfigurationChangedEvent, IScrollEvent, INewScrollPosition} from 'vs/editor/common/editorCommon';
 import {ClassNames} from 'vs/editor/browser/editorBrowser';
@@ -36,6 +36,7 @@ export class ScrollManager implements IDisposable {
 		var configScrollbarOpts = this.configuration.editor.scrollbar;
 
 		var scrollbarOptions:ScrollableElementCreationOptions = {
+			canUseTranslate3d: true,
 			listenOnDomNode: viewDomNode,
 			vertical: configScrollbarOpts.vertical,
 			horizontal: configScrollbarOpts.horizontal,
@@ -64,7 +65,12 @@ export class ScrollManager implements IDisposable {
 		this.toDispose.push(this.configuration.onDidChange((e:IConfigurationChangedEvent) => {
 			this.scrollbar.updateClassName(this.configuration.editor.theme);
 			if (e.scrollbar) {
-				this.scrollbar.updateOptions(this.configuration.editor.scrollbar);
+				let newOpts:ScrollableElementChangeOptions = {
+					canUseTranslate3d: true,
+					handleMouseWheel: this.configuration.editor.scrollbar.handleMouseWheel,
+					mouseWheelScrollSensitivity: this.configuration.editor.scrollbar.mouseWheelScrollSensitivity
+				};
+				this.scrollbar.updateOptions(newOpts);
 			}
 		}));
 

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

@@ -408,9 +408,12 @@ export class ViewLines extends ViewLayer {
 
 		// (4) handle scrolling
 		if (browser.canUseTranslate3d) {
-			var transform = 'translate3d(' + -this._layoutProvider.getScrollLeft() + 'px, ' + linesViewportData.visibleRangesDeltaTop + 'px, 0px)';
+			let transform = 'translate3d(' + -this._layoutProvider.getScrollLeft() + 'px, ' + linesViewportData.visibleRangesDeltaTop + 'px, 0px)';
 			StyleMutator.setTransform(<HTMLElement>this.domNode.domNode.parentNode, transform);
+			StyleMutator.setTop(<HTMLElement>this.domNode.domNode.parentNode, 0); // TODO@Alex
+			StyleMutator.setLeft(<HTMLElement>this.domNode.domNode.parentNode, 0); // TODO@Alex
 		} else {
+			StyleMutator.setTransform(<HTMLElement>this.domNode.domNode.parentNode, '');
 			StyleMutator.setTop(<HTMLElement>this.domNode.domNode.parentNode, linesViewportData.visibleRangesDeltaTop); // TODO@Alex
 			StyleMutator.setLeft(<HTMLElement>this.domNode.domNode.parentNode, -this._layoutProvider.getScrollLeft()); // TODO@Alex
 		}

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

@@ -285,9 +285,6 @@ export class OverviewRulerImpl {
 		this._domNode = <HTMLCanvasElement>document.createElement('canvas');
 		this._domNode.className = cssClassName;
 		this._domNode.style.position = 'absolute';
-		if (browser.canUseTranslate3d) {
-			this._domNode.style.transform = 'translate3d(0px, 0px, 0px)';
-		}
 
 		this._lanesCount = 3;
 
@@ -383,6 +380,11 @@ export class OverviewRulerImpl {
 		if (this._zoneManager.getOuterHeight() === 0) {
 			return false;
 		}
+		if (browser.canUseTranslate3d) {
+			StyleMutator.setTransform(this._domNode, 'translate3d(0px, 0px, 0px)');
+		} else {
+			StyleMutator.setTransform(this._domNode, '');
+		}
 
 		const width = this._zoneManager.getWidth();
 		const height = this._zoneManager.getHeight();

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

@@ -13,6 +13,7 @@ import {ViewPart} from 'vs/editor/browser/view/viewPart';
 import {ViewCursor} from 'vs/editor/browser/viewParts/viewCursors/viewCursor';
 import {ViewContext} from 'vs/editor/common/view/viewContext';
 import {IRenderingContext, IRestrictedRenderingContext} from 'vs/editor/common/view/renderingContext';
+import {FastDomNode, createFastDomNode} from 'vs/base/browser/styleMutator';
 
 enum RenderType {
 	Hidden,
@@ -30,7 +31,7 @@ export class ViewCursors extends ViewPart {
 
 	private _isVisible: boolean;
 
-	private _domNode: HTMLElement;
+	private _domNode: FastDomNode;
 
 	private _blinkTimer: number;
 
@@ -49,13 +50,10 @@ export class ViewCursors extends ViewPart {
 		this._primaryCursor = new ViewCursor(this._context, false);
 		this._secondaryCursors = [];
 
-		this._domNode = document.createElement('div');
+		this._domNode = createFastDomNode(document.createElement('div'));
 		this._updateDomClassName();
-		if (browser.canUseTranslate3d) {
-			this._domNode.style.transform = 'translate3d(0px, 0px, 0px)';
-		}
 
-		this._domNode.appendChild(this._primaryCursor.getDomNode());
+		this._domNode.domNode.appendChild(this._primaryCursor.getDomNode());
 
 		this._blinkTimer = -1;
 
@@ -72,7 +70,7 @@ export class ViewCursors extends ViewPart {
 	}
 
 	public getDomNode(): HTMLElement {
-		return this._domNode;
+		return this._domNode.domNode;
 	}
 
 	// --- begin event handlers
@@ -227,7 +225,7 @@ export class ViewCursors extends ViewPart {
 	// --- end blinking logic
 
 	private _updateDomClassName(): void {
-		this._domNode.className = this._getClassName();
+		this._domNode.setClassName(this._getClassName());
 	}
 
 	private _getClassName(): string {
@@ -291,5 +289,11 @@ export class ViewCursors extends ViewPart {
 		for (var i = 0, len = this._secondaryCursors.length; i < len; i++) {
 			this._secondaryCursors[i].render(ctx);
 		}
+
+		if (browser.canUseTranslate3d) {
+			this._domNode.setTransform('translate3d(0px, 0px, 0px)');
+		} else {
+			this._domNode.setTransform('');
+		}
 	}
 }

src/vs/editor/contrib/suggest/browser/suggestWidget.ts

@@ -221,7 +221,7 @@ class SuggestionDetails {
 		this.back.title = nls.localize('goback', "Go back");
 		this.body = $('.body');
 
-		this.scrollbar = new DomScrollableElement(this.body, {});
+		this.scrollbar = new DomScrollableElement(this.body, { canUseTranslate3d: false });
 		append(this.el, this.scrollbar.getDomNode());
 		this.disposables.push(this.scrollbar);
 

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

@@ -58,7 +58,7 @@ export class BinaryResourceDiffEditor extends BaseEditor implements IVerticalSas
 		this.leftBinaryContainer.tabindex(0); // enable focus support from the editor part (do not remove)
 
 		// Left Custom Scrollbars
-		this.leftScrollbar = new DomScrollableElement(leftBinaryContainerElement, { horizontal: 'hidden', vertical: 'hidden' });
+		this.leftScrollbar = new DomScrollableElement(leftBinaryContainerElement, { canUseTranslate3d: false, horizontal: 'hidden', vertical: 'hidden' });
 		parent.getHTMLElement().appendChild(this.leftScrollbar.getDomNode());
 		$(this.leftScrollbar.getDomNode()).addClass('binarydiff-left');
 
@@ -76,7 +76,7 @@ export class BinaryResourceDiffEditor extends BaseEditor implements IVerticalSas
 		this.rightBinaryContainer.tabindex(0); // enable focus support from the editor part (do not remove)
 
 		// Right Custom Scrollbars
-		this.rightScrollbar = new DomScrollableElement(rightBinaryContainerElement, { horizontal: 'hidden', vertical: 'hidden' });
+		this.rightScrollbar = new DomScrollableElement(rightBinaryContainerElement, { canUseTranslate3d: false,horizontal: 'hidden', vertical: 'hidden' });
 		parent.getHTMLElement().appendChild(this.rightScrollbar.getDomNode());
 		$(this.rightScrollbar.getDomNode()).addClass('binarydiff-right');
 	}