diff --git a/src/vs/base/browser/ui/list/listView.ts b/src/vs/base/browser/ui/list/listView.ts index 6a4dc72ed090d4cda84d50836f2019c100cf664a..ff584114ea945e568ab2aeb02b9a4638dd1bb30d 100644 --- a/src/vs/base/browser/ui/list/listView.ts +++ b/src/vs/base/browser/ui/list/listView.ts @@ -87,7 +87,7 @@ export class ListView implements IDisposable { this.gesture = new Gesture(this.rowsContainer); this.scrollableElement = new ScrollableElement(this.rowsContainer, { - forbidTranslate3dUse: true, + canUseTranslate3d: false, horizontal: 'hidden', vertical: 'auto', useShadows: false, diff --git a/src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts b/src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts index c3e625b85f0bf5777bb452d57e59cf6076605928..c5b108a3f1ceb3237722b96f5b7d80c0fe7c1ace 100644 --- a/src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts +++ b/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()); 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()); } diff --git a/src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts b/src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts index abc765bf420f69c90b8f2b97cde1a59aef2553f9..0481ccbefbb4973fc9d1e5348f376cf1b6e7b7fc 100644 --- a/src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts +++ b/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); } } diff --git a/src/vs/base/browser/ui/scrollbar/scrollableElement.ts b/src/vs/base/browser/ui/scrollbar/scrollableElement.ts index 6b51e5bd1bcc26a90238cde516bc96819584e6f1..7bbb8abf9958cf83c7d78424600375d2985790c3 100644 --- a/src/vs/base/browser/ui/scrollbar/scrollableElement.ts +++ b/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), diff --git a/src/vs/base/browser/ui/scrollbar/scrollableElementOptions.ts b/src/vs/base/browser/ui/scrollbar/scrollableElementOptions.ts index 3eef4852226ba7f526d6391fa96ec6936efd20d9..28a8b53f153d865f8f27d63ebc73211b85156ae5 100644 --- a/src/vs/base/browser/ui/scrollbar/scrollableElementOptions.ts +++ b/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; diff --git a/src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts b/src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts index a7e91d33fc9426bc9603bea9096025f6b69c9a9a..1f511d29172780e536b7ad1dcf5b9916007798f5 100644 --- a/src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts +++ b/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); } } diff --git a/src/vs/base/parts/tree/browser/treeView.ts b/src/vs/base/parts/tree/browser/treeView.ts index 8cd9b64428ea689db62a54d1706009a9dbe60221..60636cdcc65a43886acd0d89a4683b6a3abcb6bd 100644 --- a/src/vs/base/parts/tree/browser/treeView.ts +++ b/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, diff --git a/src/vs/editor/browser/view/viewOverlays.ts b/src/vs/editor/browser/view/viewOverlays.ts index 0d6b883b7cb0c8643653d588757d0a93e066464b..4bc5259443f06c1310265237c034c92337760d77 100644 --- a/src/vs/editor/browser/view/viewOverlays.ts +++ b/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); diff --git a/src/vs/editor/browser/viewLayout/scrollManager.ts b/src/vs/editor/browser/viewLayout/scrollManager.ts index 31d86db62621531dc8d66ae789b2ff83744bcbbd..5dcf4b03bbfaf8afe580a381781e3bed39bc3f9e 100644 --- a/src/vs/editor/browser/viewLayout/scrollManager.ts +++ b/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); } })); diff --git a/src/vs/editor/browser/viewParts/lines/viewLines.ts b/src/vs/editor/browser/viewParts/lines/viewLines.ts index 1fd31b5e08168fd8bc193153da01382864632f28..d0cc972c7aaf2da97d6664828d56e37104393504 100644 --- a/src/vs/editor/browser/viewParts/lines/viewLines.ts +++ b/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(this.domNode.domNode.parentNode, transform); + StyleMutator.setTop(this.domNode.domNode.parentNode, 0); // TODO@Alex + StyleMutator.setLeft(this.domNode.domNode.parentNode, 0); // TODO@Alex } else { + StyleMutator.setTransform(this.domNode.domNode.parentNode, ''); StyleMutator.setTop(this.domNode.domNode.parentNode, linesViewportData.visibleRangesDeltaTop); // TODO@Alex StyleMutator.setLeft(this.domNode.domNode.parentNode, -this._layoutProvider.getScrollLeft()); // TODO@Alex } diff --git a/src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts b/src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts index 99c0a38f05ed4059142c08a5c860a5b6ebc51c05..7f973313cbab1b5cc32c3b6dcedeef0ad7659b50 100644 --- a/src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts +++ b/src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts @@ -285,9 +285,6 @@ export class OverviewRulerImpl { this._domNode = 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(); diff --git a/src/vs/editor/browser/viewParts/viewCursors/viewCursors.ts b/src/vs/editor/browser/viewParts/viewCursors/viewCursors.ts index c1cb866fd4de2eb11cd0fbf13bf8b4ee0c15e38b..d588d199ce8e4f264dc922f4f55e0bac67802fac 100644 --- a/src/vs/editor/browser/viewParts/viewCursors/viewCursors.ts +++ b/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(''); + } } } diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index 8d10dcfea5b0d8b22bd6957a34add6759e404e14..eab66e6a63d4eec5388cd85a6ff0d8b6a87b7a34 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/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); diff --git a/src/vs/workbench/browser/parts/editor/binaryDiffEditor.ts b/src/vs/workbench/browser/parts/editor/binaryDiffEditor.ts index 1ae8b918f0d514280f532d48fa214b817679c484..82e50e1642b348a065f420b15c3bae3de55f4a2a 100644 --- a/src/vs/workbench/browser/parts/editor/binaryDiffEditor.ts +++ b/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'); }