Fixes #959: Do not use translate3d when the zoomLevel is not 0

src/vs/base/browser/browser.ts

@@ -6,46 +6,42 @@
 
 import types = require('vs/base/common/types');
 import * as Platform from 'vs/base/common/platform';
+import Event, {Emitter} from 'vs/base/common/event';
+import {IDisposable} from 'vs/base/common/lifecycle';
 
-interface ISafeWindow {
-	Worker: any;
-}
+class ZoomManager {
 
-interface ISafeDocument {
-	URL: string;
-	createElement(tagName: 'div'): HTMLDivElement;
-	createElement(tagName: string): HTMLElement;
-}
+	public static INSTANCE = new ZoomManager();
 
-interface INavigator {
-	userAgent: string;
-}
+	private _zoomLevel: number = 0;
 
-interface IGlobalScope {
-	navigator: INavigator;
-	document: ISafeDocument;
-	history: {
-		pushState: any
-	};
-}
+	private _onDidChangeZoomLevel: Emitter<number> = new Emitter<number>();
+	public onDidChangeZoomLevel:Event<number> = this._onDidChangeZoomLevel.event;
+	public getZoomLevel(): number {
+		return this._zoomLevel;
+	}
 
-const globals = <IGlobalScope><any>(typeof self === 'object' ? self : global);
+	public setZoomLevel(zoomLevel:number): void {
+		if (this._zoomLevel === zoomLevel) {
+			return;
+		}
 
-// MAC:
-// chrome: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.100 Safari/535.2"
-// safari: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22"
-//
-// WINDOWS:
-// chrome: "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.102 Safari/535.2"
-// IE: "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC LM 8; InfoPath.3; Zune 4.7)"
-// Opera:	"Opera/9.80 (Windows NT 6.1; U; en) Presto/2.9.168 Version/11.52"
-// FF: "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) Gecko/20100101 Firefox/8.0"
+		this._zoomLevel = zoomLevel;
+		this._onDidChangeZoomLevel.fire(this._zoomLevel);
+	}
+}
 
-// LINUX:
-// chrome: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36"
-// firefox: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:34.0) Gecko/20100101 Firefox/34.0"
+export function getZoomLevel(): number {
+	return ZoomManager.INSTANCE.getZoomLevel();
+}
+export function setZoomLevel(zoomLevel:number): void {
+	ZoomManager.INSTANCE.setZoomLevel(zoomLevel);
+}
+export function onDidChangeZoomLevel(callback:(zoomLevel:number)=>void): IDisposable {
+	return ZoomManager.INSTANCE.onDidChangeZoomLevel(callback);
+}
 
-const userAgent = globals.navigator ? globals.navigator.userAgent : '';
+const userAgent = navigator.userAgent;
 
 // DOCUMENTED FOR FUTURE REFERENCE:
 // When running IE11 in IE10 document mode, the code below will identify the browser as being IE10,
@@ -76,12 +72,8 @@ export function hasCSSAnimationSupport() {
 		return this._hasCSSAnimationSupport;
 	}
 
-	if (!globals.document) {
-		return false;
-	}
-
 	let supported = false;
-	let element = globals.document.createElement('div');
+	let element = document.createElement('div');
 	let properties = ['animationName', 'webkitAnimationName', 'msAnimationName', 'MozAnimationName', 'OAnimationName'];
 	for (let i = 0; i < properties.length; i++) {
 		let property = properties[i];

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

@@ -106,6 +106,11 @@ export abstract class AbstractScrollbar extends Widget {
 
 	// ----------------- Update state
 
+	public setCanUseTranslate3d(canUseTranslate3d: boolean): boolean {
+		this._canUseTranslate3d = canUseTranslate3d;
+		return true;
+	}
+
 	protected _onElementSize(visibleSize: number): boolean {
 		if (this._scrollbarState.setVisibleSize(visibleSize)) {
 			this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());

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

@@ -186,6 +186,13 @@ export class ScrollableElement extends Widget {
 		this._options.handleMouseWheel = massagedOptions.handleMouseWheel;
 		this._options.mouseWheelScrollSensitivity = massagedOptions.mouseWheelScrollSensitivity;
 		this._setListeningToMouseWheel(this._options.handleMouseWheel);
+
+		this._shouldRender = this._horizontalScrollbar.setCanUseTranslate3d(massagedOptions.canUseTranslate3d) || this._shouldRender;
+		this._shouldRender = this._verticalScrollbar.setCanUseTranslate3d(massagedOptions.canUseTranslate3d) || this._shouldRender;
+
+		if (!this._options.lazyRender) {
+			this._render();
+		}
 	}
 
 	// -------------------- mouse wheel scrolling --------------------

src/vs/editor/browser/config/configuration.ts

@@ -241,6 +241,8 @@ export class Configuration extends CommonEditorConfiguration {
 		if (this._configWithDefaults.getEditorOptions().automaticLayout) {
 			this._elementSizeObserver.startObserving();
 		}
+
+		this._register(browser.onDidChangeZoomLevel(_ => this._recomputeOptions()));
 	}
 
 	private _onReferenceDomElementSizeChanged(): void {
@@ -287,6 +289,10 @@ export class Configuration extends CommonEditorConfiguration {
 		return this._elementSizeObserver.getHeight();
 	}
 
+	protected _getCanUseTranslate3d(): boolean {
+		return browser.canUseTranslate3d && browser.getZoomLevel() === 0;
+	}
+
 	protected readConfiguration(bareFontInfo:BareFontInfo): FontInfo {
 		return CSSBasedConfiguration.INSTANCE.readConfiguration(bareFontInfo);
 	}

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import * as browser from 'vs/base/browser/browser';
 import {StyleMutator, FastDomNode, createFastDomNode} from 'vs/base/browser/styleMutator';
 import {IScrollEvent, IConfigurationChangedEvent, EditorLayoutInfo, IModelDecoration} from 'vs/editor/common/editorCommon';
 import * as editorBrowser from 'vs/editor/browser/editorBrowser';
@@ -224,6 +223,7 @@ export class MarginViewOverlays extends ViewOverlays {
 	private _glyphMarginWidth:number;
 	private _scrollHeight:number;
 	private _contentLeft: number;
+	private _canUseTranslate3d: boolean;
 
 	constructor(context:ViewContext, layoutProvider:ILayoutProvider) {
 		super(context, layoutProvider);
@@ -232,6 +232,7 @@ export class MarginViewOverlays extends ViewOverlays {
 		this._glyphMarginWidth = context.configuration.editor.layoutInfo.glyphMarginWidth;
 		this._scrollHeight = layoutProvider.getScrollHeight();
 		this._contentLeft = context.configuration.editor.layoutInfo.contentLeft;
+		this._canUseTranslate3d = context.configuration.editor.viewInfo.canUseTranslate3d;
 
 		this.domNode.setClassName(editorBrowser.ClassNames.MARGIN_VIEW_OVERLAYS + ' monaco-editor-background');
 		this.domNode.setWidth(1);
@@ -274,13 +275,16 @@ export class MarginViewOverlays extends ViewOverlays {
 		if (e.fontInfo) {
 			Configuration.applyFontInfo(this.domNode, this._context.configuration.editor.fontInfo);
 		}
+		if (e.viewInfo.canUseTranslate3d) {
+			this._canUseTranslate3d = this._context.configuration.editor.viewInfo.canUseTranslate3d;
+		}
 		return super.onConfigurationChanged(e);
 	}
 
 
 	_viewOverlaysRender(ctx:IRestrictedRenderingContext): void {
 		super._viewOverlaysRender(ctx);
-		if (browser.canUseTranslate3d) {
+		if (this._canUseTranslate3d) {
 			var transform = 'translate3d(0px, ' + ctx.linesViewportData.visibleRangesDeltaTop + 'px, 0px)';
 			this.domNode.setTransform(transform);
 			this.domNode.setTop(0);

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

@@ -36,7 +36,7 @@ export class ScrollManager implements IDisposable {
 		var configScrollbarOpts = this.configuration.editor.viewInfo.scrollbar;
 
 		var scrollbarOptions:ScrollableElementCreationOptions = {
-			canUseTranslate3d: true,
+			canUseTranslate3d: this.configuration.editor.viewInfo.canUseTranslate3d,
 			listenOnDomNode: viewDomNode,
 			vertical: configScrollbarOpts.vertical,
 			horizontal: configScrollbarOpts.horizontal,
@@ -64,9 +64,9 @@ export class ScrollManager implements IDisposable {
 
 		this.toDispose.push(this.configuration.onDidChange((e:IConfigurationChangedEvent) => {
 			this.scrollbar.updateClassName(ClassNames.SCROLLABLE_ELEMENT + ' ' + this.configuration.editor.viewInfo.theme);
-			if (e.viewInfo.scrollbar) {
+			if (e.viewInfo.scrollbar || e.viewInfo.canUseTranslate3d) {
 				let newOpts:ScrollableElementChangeOptions = {
-					canUseTranslate3d: true,
+					canUseTranslate3d: this.configuration.editor.viewInfo.canUseTranslate3d,
 					handleMouseWheel: this.configuration.editor.viewInfo.scrollbar.handleMouseWheel,
 					mouseWheelScrollSensitivity: this.configuration.editor.viewInfo.scrollbar.mouseWheelScrollSensitivity
 				};

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

@@ -6,7 +6,6 @@
 
 import 'vs/css!./viewLines';
 import {RunOnceScheduler} from 'vs/base/common/async';
-import * as browser from 'vs/base/browser/browser';
 import {StyleMutator} from 'vs/base/browser/styleMutator';
 import {Range} from 'vs/editor/common/core/range';
 import * as editorCommon from 'vs/editor/common/editorCommon';
@@ -65,6 +64,7 @@ export class ViewLines extends ViewLayer {
 	private _lineHeight: number;
 	private _isViewportWrapping: boolean;
 	private _revealHorizontalRightPadding: number;
+	private _canUseTranslate3d: boolean;
 
 	// --- width
 	private _maxLineWidth: number;
@@ -78,6 +78,7 @@ export class ViewLines extends ViewLayer {
 		this._lineHeight = this._context.configuration.editor.lineHeight;
 		this._isViewportWrapping = this._context.configuration.editor.wrappingInfo.isViewportWrapping;
 		this._revealHorizontalRightPadding = this._context.configuration.editor.viewInfo.revealHorizontalRightPadding;
+		this._canUseTranslate3d = context.configuration.editor.viewInfo.canUseTranslate3d;
 		this._layoutProvider = layoutProvider;
 		this.domNode.setClassName(ClassNames.VIEW_LINES);
 		Configuration.applyFontInfo(this.domNode, this._context.configuration.editor.fontInfo);
@@ -122,6 +123,9 @@ export class ViewLines extends ViewLayer {
 		if (e.viewInfo.revealHorizontalRightPadding) {
 			this._revealHorizontalRightPadding = this._context.configuration.editor.viewInfo.revealHorizontalRightPadding;
 		}
+		if (e.viewInfo.canUseTranslate3d) {
+			this._canUseTranslate3d = this._context.configuration.editor.viewInfo.canUseTranslate3d;
+		}
 		if (e.fontInfo) {
 			Configuration.applyFontInfo(this.domNode, this._context.configuration.editor.fontInfo);
 		}
@@ -407,7 +411,7 @@ export class ViewLines extends ViewLayer {
 		}
 
 		// (4) handle scrolling
-		if (browser.canUseTranslate3d) {
+		if (this._canUseTranslate3d) {
 			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

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

@@ -37,6 +37,7 @@ export class DecorationsOverviewRuler extends ViewPart {
 			'decorationsOverviewRuler',
 			scrollHeight,
 			this._context.configuration.editor.lineHeight,
+			this._context.configuration.editor.viewInfo.canUseTranslate3d,
 			DecorationsOverviewRuler.DECORATION_HEIGHT,
 			DecorationsOverviewRuler.DECORATION_HEIGHT,
 			getVerticalOffsetForLine
@@ -80,6 +81,11 @@ export class DecorationsOverviewRuler extends ViewPart {
 			shouldRender = true;
 		}
 
+		if (e.viewInfo.canUseTranslate3d) {
+			this._overviewRuler.setCanUseTranslate3d(this._context.configuration.editor.viewInfo.canUseTranslate3d, false);
+			shouldRender = true;
+		}
+
 		if (prevLanesCount !== newLanesCount) {
 			this._overviewRuler.setLanesCount(newLanesCount, false);
 			shouldRender = true;

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

@@ -19,7 +19,7 @@ export class OverviewRuler extends ViewEventHandler implements IOverviewRuler {
 		super();
 		this._context = context;
 		this._overviewRuler = new OverviewRulerImpl(0, cssClassName, scrollHeight, this._context.configuration.editor.lineHeight,
-					minimumHeight, maximumHeight, getVerticalOffsetForLine);
+					this._context.configuration.editor.viewInfo.canUseTranslate3d, minimumHeight, maximumHeight, getVerticalOffsetForLine);
 
 		this._context.addEventHandler(this);
 	}
@@ -38,6 +38,12 @@ export class OverviewRuler extends ViewEventHandler implements IOverviewRuler {
 			this._overviewRuler.setLineHeight(this._context.configuration.editor.lineHeight, true);
 			return true;
 		}
+
+		if (e.viewInfo.canUseTranslate3d) {
+			this._overviewRuler.setCanUseTranslate3d(this._context.configuration.editor.viewInfo.canUseTranslate3d, true);
+			return true;
+		}
+
 		return false;
 	}
 

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import * as browser from 'vs/base/browser/browser';
 import {StyleMutator} from 'vs/base/browser/styleMutator';
 import {OverviewRulerPosition, OverviewRulerLane} from 'vs/editor/common/editorCommon';
 import {OverviewRulerZone, ColorZone} from 'vs/editor/browser/editorBrowser';
@@ -278,8 +277,9 @@ export class OverviewRulerImpl {
 	private _domNode: HTMLCanvasElement;
 	private _lanesCount:number;
 	private _zoneManager: ZoneManager;
+	private _canUseTranslate3d: boolean;
 
-	constructor(canvasLeftOffset:number, cssClassName:string, scrollHeight:number, lineHeight:number, minimumHeight:number, maximumHeight:number, getVerticalOffsetForLine:(lineNumber:number)=>number) {
+	constructor(canvasLeftOffset:number, cssClassName:string, scrollHeight:number, lineHeight:number, canUseTranslate3d:boolean, minimumHeight:number, maximumHeight:number, getVerticalOffsetForLine:(lineNumber:number)=>number) {
 		this._canvasLeftOffset = canvasLeftOffset;
 
 		this._domNode = <HTMLCanvasElement>document.createElement('canvas');
@@ -288,6 +288,8 @@ export class OverviewRulerImpl {
 
 		this._lanesCount = 3;
 
+		this._canUseTranslate3d = canUseTranslate3d;
+
 		this._zoneManager = new ZoneManager(getVerticalOffsetForLine);
 		this._zoneManager.setMinimumHeight(minimumHeight);
 		this._zoneManager.setMaximumHeight(maximumHeight);
@@ -366,6 +368,13 @@ export class OverviewRulerImpl {
 		}
 	}
 
+	public setCanUseTranslate3d(canUseTranslate3d:boolean, render:boolean): void {
+		this._canUseTranslate3d = canUseTranslate3d;
+		if (render) {
+			this.render(true);
+		}
+	}
+
 	public setZones(zones:OverviewRulerZone[], render:boolean): void {
 		this._zoneManager.setZones(zones);
 		if (render) {
@@ -380,7 +389,7 @@ export class OverviewRulerImpl {
 		if (this._zoneManager.getOuterHeight() === 0) {
 			return false;
 		}
-		if (browser.canUseTranslate3d) {
+		if (this._canUseTranslate3d) {
 			StyleMutator.setTransform(this._domNode, 'translate3d(0px, 0px, 0px)');
 		} else {
 			StyleMutator.setTransform(this._domNode, '');

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

@@ -6,7 +6,6 @@
 'use strict';
 
 import 'vs/css!./viewCursors';
-import * as browser from 'vs/base/browser/browser';
 import * as editorCommon from 'vs/editor/common/editorCommon';
 import {ClassNames} from 'vs/editor/browser/editorBrowser';
 import {ViewPart} from 'vs/editor/browser/view/viewPart';
@@ -28,6 +27,7 @@ export class ViewCursors extends ViewPart {
 	private _readOnly: boolean;
 	private _cursorBlinking: string;
 	private _cursorStyle: editorCommon.TextEditorCursorStyle;
+	private _canUseTranslate3d: boolean;
 
 	private _isVisible: boolean;
 
@@ -46,6 +46,7 @@ export class ViewCursors extends ViewPart {
 		this._readOnly = this._context.configuration.editor.readOnly;
 		this._cursorBlinking = this._context.configuration.editor.viewInfo.cursorBlinking;
 		this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
+		this._canUseTranslate3d = context.configuration.editor.viewInfo.canUseTranslate3d;
 
 		this._primaryCursor = new ViewCursor(this._context, false);
 		this._secondaryCursors = [];
@@ -152,6 +153,9 @@ export class ViewCursors extends ViewPart {
 		if (e.viewInfo.cursorStyle) {
 			this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
 		}
+		if (e.viewInfo.canUseTranslate3d) {
+			this._canUseTranslate3d = this._context.configuration.editor.viewInfo.canUseTranslate3d;
+		}
 
 		this._primaryCursor.onConfigurationChanged(e);
 		this._updateBlinking();
@@ -290,7 +294,7 @@ export class ViewCursors extends ViewPart {
 			this._secondaryCursors[i].render(ctx);
 		}
 
-		if (browser.canUseTranslate3d) {
+		if (this._canUseTranslate3d) {
 			this._domNode.setTransform('translate3d(0px, 0px, 0px)');
 		} else {
 			this._domNode.setTransform('');