SQL Operations Studio Public Preview 1 (0.23) release source code

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

@@ -0,0 +1,262 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import * as Platform from 'vs/base/common/platform';
+import * as DomUtils from 'vs/base/browser/dom';
+import { IMouseEvent, StandardMouseWheelEvent } from 'vs/base/browser/mouseEvent';
+import { GlobalMouseMoveMonitor, IStandardMouseMoveEventData, standardMouseMoveMerger } from 'vs/base/browser/globalMouseMoveMonitor';
+import { Widget } from 'vs/base/browser/ui/widget';
+import { FastDomNode, createFastDomNode } from 'vs/base/browser/fastDomNode';
+import { ScrollbarState } from 'vs/base/browser/ui/scrollbar/scrollbarState';
+import { ScrollbarArrow, ScrollbarArrowOptions } from 'vs/base/browser/ui/scrollbar/scrollbarArrow';
+import { ScrollbarVisibilityController } from 'vs/base/browser/ui/scrollbar/scrollbarVisibilityController';
+import { Scrollable, ScrollbarVisibility, INewScrollPosition } from 'vs/base/common/scrollable';
+
+/**
+ * The orthogonal distance to the slider at which dragging "resets". This implements "snapping"
+ */
+const MOUSE_DRAG_RESET_DISTANCE = 140;
+
+export interface ISimplifiedMouseEvent {
+	posx: number;
+	posy: number;
+}
+
+export interface ScrollbarHost {
+	onMouseWheel(mouseWheelEvent: StandardMouseWheelEvent): void;
+	onDragStart(): void;
+	onDragEnd(): void;
+}
+
+export interface AbstractScrollbarOptions {
+	lazyRender: boolean;
+	host: ScrollbarHost;
+	scrollbarState: ScrollbarState;
+	visibility: ScrollbarVisibility;
+	extraScrollbarClassName: string;
+	scrollable: Scrollable;
+}
+
+export abstract class AbstractScrollbar extends Widget {
+
+	protected _host: ScrollbarHost;
+	protected _scrollable: Scrollable;
+	private _lazyRender: boolean;
+	protected _scrollbarState: ScrollbarState;
+	private _visibilityController: ScrollbarVisibilityController;
+	private _mouseMoveMonitor: GlobalMouseMoveMonitor<IStandardMouseMoveEventData>;
+
+	public domNode: FastDomNode<HTMLElement>;
+	public slider: FastDomNode<HTMLElement>;
+
+	protected _shouldRender: boolean;
+
+	constructor(opts: AbstractScrollbarOptions) {
+		super();
+		this._lazyRender = opts.lazyRender;
+		this._host = opts.host;
+		this._scrollable = opts.scrollable;
+		this._scrollbarState = opts.scrollbarState;
+		this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'visible scrollbar ' + opts.extraScrollbarClassName, 'invisible scrollbar ' + opts.extraScrollbarClassName));
+		this._mouseMoveMonitor = this._register(new GlobalMouseMoveMonitor<IStandardMouseMoveEventData>());
+		this._shouldRender = true;
+		this.domNode = createFastDomNode(document.createElement('div'));
+		this.domNode.setAttribute('role', 'presentation');
+		this.domNode.setAttribute('aria-hidden', 'true');
+
+		this._visibilityController.setDomNode(this.domNode);
+		this.domNode.setPosition('absolute');
+
+		this.onmousedown(this.domNode.domNode, (e) => this._domNodeMouseDown(e));
+	}
+
+	// ----------------- creation
+
+	/**
+	 * Creates the dom node for an arrow & adds it to the container
+	 */
+	protected _createArrow(opts: ScrollbarArrowOptions): void {
+		let arrow = this._register(new ScrollbarArrow(opts));
+		this.domNode.domNode.appendChild(arrow.bgDomNode);
+		this.domNode.domNode.appendChild(arrow.domNode);
+	}
+
+	/**
+	 * Creates the slider dom node, adds it to the container & hooks up the events
+	 */
+	protected _createSlider(top: number, left: number, width: number, height: number): void {
+		this.slider = createFastDomNode(document.createElement('div'));
+		this.slider.setClassName('slider');
+		this.slider.setPosition('absolute');
+		this.slider.setTop(top);
+		this.slider.setLeft(left);
+		this.slider.setWidth(width);
+		this.slider.setHeight(height);
+		this.slider.setLayerHinting(true);
+
+		this.domNode.domNode.appendChild(this.slider.domNode);
+
+		this.onmousedown(this.slider.domNode, (e) => {
+			if (e.leftButton) {
+				e.preventDefault();
+				this._sliderMouseDown(e, () => { /*nothing to do*/ });
+			}
+		});
+	}
+
+	// ----------------- Update state
+
+	protected _onElementSize(visibleSize: number): boolean {
+		if (this._scrollbarState.setVisibleSize(visibleSize)) {
+			this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+			this._shouldRender = true;
+			if (!this._lazyRender) {
+				this.render();
+			}
+		}
+		return this._shouldRender;
+	}
+
+	protected _onElementScrollSize(elementScrollSize: number): boolean {
+		if (this._scrollbarState.setScrollSize(elementScrollSize)) {
+			this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+			this._shouldRender = true;
+			if (!this._lazyRender) {
+				this.render();
+			}
+		}
+		return this._shouldRender;
+	}
+
+	protected _onElementScrollPosition(elementScrollPosition: number): boolean {
+		if (this._scrollbarState.setScrollPosition(elementScrollPosition)) {
+			this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+			this._shouldRender = true;
+			if (!this._lazyRender) {
+				this.render();
+			}
+		}
+		return this._shouldRender;
+	}
+
+	// ----------------- rendering
+
+	public beginReveal(): void {
+		this._visibilityController.setShouldBeVisible(true);
+	}
+
+	public beginHide(): void {
+		this._visibilityController.setShouldBeVisible(false);
+	}
+
+	public render(): void {
+		if (!this._shouldRender) {
+			return;
+		}
+		this._shouldRender = false;
+
+		this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize());
+		this._updateSlider(this._scrollbarState.getSliderSize(), this._scrollbarState.getArrowSize() + this._scrollbarState.getSliderPosition());
+	}
+	// ----------------- DOM events
+
+	private _domNodeMouseDown(e: IMouseEvent): void {
+		if (e.target !== this.domNode.domNode) {
+			return;
+		}
+		this._onMouseDown(e);
+	}
+
+	public delegateMouseDown(e: IMouseEvent): void {
+		let domTop = this.domNode.domNode.getClientRects()[0].top;
+		let sliderStart = domTop + this._scrollbarState.getSliderPosition();
+		let sliderStop = domTop + this._scrollbarState.getSliderPosition() + this._scrollbarState.getSliderSize();
+		let mousePos = this._sliderMousePosition(e);
+		if (sliderStart <= mousePos && mousePos <= sliderStop) {
+			// Act as if it was a mouse down on the slider
+			if (e.leftButton) {
+				e.preventDefault();
+				this._sliderMouseDown(e, () => { /*nothing to do*/ });
+			}
+		} else {
+			// Act as if it was a mouse down on the scrollbar
+			this._onMouseDown(e);
+		}
+	}
+
+	public delegateSliderMouseDown(e: ISimplifiedMouseEvent, onDragFinished: () => void): void {
+		this._sliderMouseDown(e, onDragFinished);
+	}
+
+	private _onMouseDown(e: IMouseEvent): void {
+		let offsetX: number;
+		let offsetY: number;
+		if (e.target === this.domNode.domNode && typeof e.browserEvent.offsetX === 'number' && typeof e.browserEvent.offsetY === 'number') {
+			offsetX = e.browserEvent.offsetX;
+			offsetY = e.browserEvent.offsetY;
+		} else {
+			const domNodePosition = DomUtils.getDomNodePagePosition(this.domNode.domNode);
+			offsetX = e.posx - domNodePosition.left;
+			offsetY = e.posy - domNodePosition.top;
+		}
+		this._setDesiredScrollPositionNow(this._scrollbarState.getDesiredScrollPositionFromOffset(this._mouseDownRelativePosition(offsetX, offsetY)));
+		if (e.leftButton) {
+			e.preventDefault();
+			this._sliderMouseDown(e, () => { /*nothing to do*/ });
+		}
+	}
+
+	private _sliderMouseDown(e: ISimplifiedMouseEvent, onDragFinished: () => void): void {
+		const initialMousePosition = this._sliderMousePosition(e);
+		const initialMouseOrthogonalPosition = this._sliderOrthogonalMousePosition(e);
+		const initialScrollbarState = this._scrollbarState.clone();
+		this.slider.toggleClassName('active', true);
+
+		this._mouseMoveMonitor.startMonitoring(
+			standardMouseMoveMerger,
+			(mouseMoveData: IStandardMouseMoveEventData) => {
+				const mouseOrthogonalPosition = this._sliderOrthogonalMousePosition(mouseMoveData);
+				const mouseOrthogonalDelta = Math.abs(mouseOrthogonalPosition - initialMouseOrthogonalPosition);
+
+				if (Platform.isWindows && mouseOrthogonalDelta > MOUSE_DRAG_RESET_DISTANCE) {
+					// The mouse has wondered away from the scrollbar => reset dragging
+					this._setDesiredScrollPositionNow(initialScrollbarState.getScrollPosition());
+					return;
+				}
+
+				const mousePosition = this._sliderMousePosition(mouseMoveData);
+				const mouseDelta = mousePosition - initialMousePosition;
+				this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(mouseDelta));
+			},
+			() => {
+				this.slider.toggleClassName('active', false);
+				this._host.onDragEnd();
+				onDragFinished();
+			}
+		);
+
+		this._host.onDragStart();
+	}
+
+	private _setDesiredScrollPositionNow(_desiredScrollPosition: number): void {
+
+		let desiredScrollPosition: INewScrollPosition = {};
+		this.writeScrollPosition(desiredScrollPosition, _desiredScrollPosition);
+
+		this._scrollable.setScrollPositionNow(desiredScrollPosition);
+	}
+
+	// ----------------- Overwrite these
+
+	protected abstract _renderDomNode(largeSize: number, smallSize: number): void;
+	protected abstract _updateSlider(sliderSize: number, sliderPosition: number): void;
+
+	protected abstract _mouseDownRelativePosition(offsetX: number, offsetY: number): number;
+	protected abstract _sliderMousePosition(e: ISimplifiedMouseEvent): number;
+	protected abstract _sliderOrthogonalMousePosition(e: ISimplifiedMouseEvent): number;
+
+	public abstract writeScrollPosition(target: INewScrollPosition, scrollPosition: number): void;
+}

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

@@ -0,0 +1,94 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { AbstractScrollbar, ScrollbarHost, ISimplifiedMouseEvent } from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
+import { StandardMouseWheelEvent } from 'vs/base/browser/mouseEvent';
+import { ScrollableElementResolvedOptions } from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
+import { Scrollable, ScrollEvent, ScrollbarVisibility, INewScrollPosition } from 'vs/base/common/scrollable';
+import { ScrollbarState } from 'vs/base/browser/ui/scrollbar/scrollbarState';
+import { ARROW_IMG_SIZE } from 'vs/base/browser/ui/scrollbar/scrollbarArrow';
+
+export class HorizontalScrollbar extends AbstractScrollbar {
+
+	constructor(scrollable: Scrollable, options: ScrollableElementResolvedOptions, host: ScrollbarHost) {
+		super({
+			lazyRender: options.lazyRender,
+			host: host,
+			scrollbarState: new ScrollbarState(
+				(options.horizontalHasArrows ? options.arrowSize : 0),
+				(options.horizontal === ScrollbarVisibility.Hidden ? 0 : options.horizontalScrollbarSize),
+				(options.vertical === ScrollbarVisibility.Hidden ? 0 : options.verticalScrollbarSize)
+			),
+			visibility: options.horizontal,
+			extraScrollbarClassName: 'horizontal',
+			scrollable: scrollable
+		});
+
+		if (options.horizontalHasArrows) {
+			let arrowDelta = (options.arrowSize - ARROW_IMG_SIZE) / 2;
+			let scrollbarDelta = (options.horizontalScrollbarSize - ARROW_IMG_SIZE) / 2;
+
+			this._createArrow({
+				className: 'left-arrow',
+				top: scrollbarDelta,
+				left: arrowDelta,
+				bottom: void 0,
+				right: void 0,
+				bgWidth: options.arrowSize,
+				bgHeight: options.horizontalScrollbarSize,
+				onActivate: () => this._host.onMouseWheel(new StandardMouseWheelEvent(null, 1, 0)),
+			});
+
+			this._createArrow({
+				className: 'right-arrow',
+				top: scrollbarDelta,
+				left: void 0,
+				bottom: void 0,
+				right: arrowDelta,
+				bgWidth: options.arrowSize,
+				bgHeight: options.horizontalScrollbarSize,
+				onActivate: () => this._host.onMouseWheel(new StandardMouseWheelEvent(null, -1, 0)),
+			});
+		}
+
+		this._createSlider(Math.floor((options.horizontalScrollbarSize - options.horizontalSliderSize) / 2), 0, null, options.horizontalSliderSize);
+	}
+
+	protected _updateSlider(sliderSize: number, sliderPosition: number): void {
+		this.slider.setWidth(sliderSize);
+		this.slider.setLeft(sliderPosition);
+	}
+
+	protected _renderDomNode(largeSize: number, smallSize: number): void {
+		this.domNode.setWidth(largeSize);
+		this.domNode.setHeight(smallSize);
+		this.domNode.setLeft(0);
+		this.domNode.setBottom(0);
+	}
+
+	public onDidScroll(e: ScrollEvent): boolean {
+		this._shouldRender = this._onElementScrollSize(e.scrollWidth) || this._shouldRender;
+		this._shouldRender = this._onElementScrollPosition(e.scrollLeft) || this._shouldRender;
+		this._shouldRender = this._onElementSize(e.width) || this._shouldRender;
+		return this._shouldRender;
+	}
+
+	protected _mouseDownRelativePosition(offsetX: number, offsetY: number): number {
+		return offsetX;
+	}
+
+	protected _sliderMousePosition(e: ISimplifiedMouseEvent): number {
+		return e.posx;
+	}
+
+	protected _sliderOrthogonalMousePosition(e: ISimplifiedMouseEvent): number {
+		return e.posy;
+	}
+
+	public writeScrollPosition(target: INewScrollPosition, scrollPosition: number): void {
+		target.scrollLeft = scrollPosition;
+	}
+}

src/vs/base/browser/ui/scrollbar/media/arrow-down-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path transform="rotate(-180 5.49045991897583,5.811500072479248)" fill="#E8E8E8" d="m9.48046,8.9615l1.26,-1.26l-5.04,-5.04l-5.46,5.04l1.26,1.26l4.2,-3.78l3.78,3.78z"/></svg>

src/vs/base/browser/ui/scrollbar/media/arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path transform="rotate(-180 5.49045991897583,5.811500072479248)" fill="#424242" d="m9.48046,8.9615l1.26,-1.26l-5.04,-5.04l-5.46,5.04l1.26,1.26l4.2,-3.78l3.78,3.78z"/></svg>

src/vs/base/browser/ui/scrollbar/media/arrow-left-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path transform="rotate(-90 5.490459918975831,5.431382179260254)" fill="#E8E8E8" d="m9.48046,8.58138l1.26,-1.26l-5.04,-5.04l-5.46,5.04l1.26,1.26l4.2,-3.78l3.78,3.78z"/></svg>

src/vs/base/browser/ui/scrollbar/media/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path transform="rotate(-90 5.490459918975831,5.431382179260254)" fill="#424242" d="m9.48046,8.58138l1.26,-1.26l-5.04,-5.04l-5.46,5.04l1.26,1.26l4.2,-3.78l3.78,3.78z"/></svg>

src/vs/base/browser/ui/scrollbar/media/arrow-right-dark.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path transform="rotate(90 5.6171650886535645,5.55808973312378) " fill="#E8E8E8" d="m9.60717,8.70809l1.26,-1.26l-5.04,-5.04l-5.46,5.04l1.26,1.26l4.2,-3.78l3.78,3.78z"/></svg>

src/vs/base/browser/ui/scrollbar/media/arrow-right.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path transform="rotate(90 5.6171650886535645,5.55808973312378) " fill="#424242" d="m9.60717,8.70809l1.26,-1.26l-5.04,-5.04l-5.46,5.04l1.26,1.26l4.2,-3.78l3.78,3.78z"/></svg>

src/vs/base/browser/ui/scrollbar/media/arrow-up-dark.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="m9.48046,8.9615l1.26,-1.26l-5.04,-5.04l-5.46,5.04l1.26,1.26l4.2,-3.78l3.78,3.78z" fill="#E8E8E8"/></svg>

src/vs/base/browser/ui/scrollbar/media/arrow-up.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="m9.48046,8.9615l1.26,-1.26l-5.04,-5.04l-5.46,5.04l1.26,1.26l4.2,-3.78l3.78,3.78z" fill="#424242"/></svg>

src/vs/base/browser/ui/scrollbar/media/scrollbars.css

@@ -0,0 +1,147 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Arrows */
+.monaco-scrollable-element > .scrollbar > .up-arrow {
+	background: url('arrow-up.svg');
+	cursor: pointer;
+}
+.monaco-scrollable-element > .scrollbar > .down-arrow {
+	background: url('arrow-down.svg');
+	cursor: pointer;
+}
+.monaco-scrollable-element > .scrollbar > .left-arrow {
+	background: url('arrow-left.svg');
+	cursor: pointer;
+}
+.monaco-scrollable-element > .scrollbar > .right-arrow {
+	background: url('arrow-right.svg');
+	cursor: pointer;
+}
+
+.hc-black .monaco-scrollable-element > .scrollbar > .up-arrow,
+.vs-dark .monaco-scrollable-element > .scrollbar > .up-arrow {
+	background: url('arrow-up-dark.svg');
+}
+.hc-black .monaco-scrollable-element > .scrollbar > .down-arrow,
+.vs-dark .monaco-scrollable-element > .scrollbar > .down-arrow {
+	background: url('arrow-down-dark.svg');
+}
+.hc-black .monaco-scrollable-element > .scrollbar > .left-arrow,
+.vs-dark .monaco-scrollable-element > .scrollbar > .left-arrow {
+	background: url('arrow-left-dark.svg');
+}
+.hc-black .monaco-scrollable-element > .scrollbar > .right-arrow,
+.vs-dark .monaco-scrollable-element > .scrollbar > .right-arrow {
+	background: url('arrow-right-dark.svg');
+}
+
+.monaco-scrollable-element > .visible {
+	opacity: 1;
+
+	/* Background rule added for IE9 - to allow clicks on dom node */
+	background:rgba(0,0,0,0);
+
+	-webkit-transition: opacity 100ms linear;
+	-o-transition: opacity 100ms linear;
+	-moz-transition: opacity 100ms linear;
+	-ms-transition: opacity 100ms linear;
+	transition: opacity 100ms linear;
+}
+.monaco-scrollable-element > .invisible {
+	opacity: 0;
+}
+.monaco-scrollable-element > .invisible.fade {
+	-webkit-transition: opacity 800ms linear;
+	-o-transition: opacity 800ms linear;
+	-moz-transition: opacity 800ms linear;
+	-ms-transition: opacity 800ms linear;
+	transition: opacity 800ms linear;
+}
+
+/* Scrollable Content Inset Shadow */
+.monaco-scrollable-element > .shadow {
+	position: absolute;
+	display: none;
+}
+.monaco-scrollable-element > .shadow.top {
+	display: block;
+	top: 0;
+	left: 3px;
+	height: 3px;
+	width: 100%;
+	box-shadow: #DDD 0 6px 6px -6px inset;
+}
+.monaco-scrollable-element > .shadow.left {
+	display: block;
+	top: 3px;
+	left: 0;
+	height: 100%;
+	width: 3px;
+	box-shadow: #DDD 6px 0 6px -6px inset;
+}
+.monaco-scrollable-element > .shadow.top-left-corner {
+	display: block;
+	top: 0;
+	left: 0;
+	height: 3px;
+	width: 3px;
+}
+.monaco-scrollable-element > .shadow.top.left {
+	box-shadow: #DDD 6px 6px 6px -6px inset;
+}
+
+/* ---------- Default Style ---------- */
+
+.vs .monaco-scrollable-element > .scrollbar > .slider {
+	background: rgba(100, 100, 100, .4);
+}
+.vs-dark .monaco-scrollable-element > .scrollbar > .slider {
+	background: rgba(121, 121, 121, .4);
+}
+.hc-black .monaco-scrollable-element > .scrollbar > .slider {
+	background: rgba(111, 195, 223, .6);
+}
+
+.monaco-scrollable-element > .scrollbar > .slider:hover {
+	background: rgba(100, 100, 100, .7);
+}
+.hc-black .monaco-scrollable-element > .scrollbar > .slider:hover {
+	background: rgba(111, 195, 223, .8);
+}
+
+.monaco-scrollable-element > .scrollbar > .slider.active {
+	background: rgba(0, 0, 0, .6);
+}
+.vs-dark .monaco-scrollable-element > .scrollbar > .slider.active {
+	background: rgba(191, 191, 191, .4);
+}
+.hc-black .monaco-scrollable-element > .scrollbar > .slider.active {
+	background: rgba(111, 195, 223, 1);
+}
+
+.vs-dark .monaco-scrollable-element .shadow.top {
+	box-shadow: none;
+}
+
+.vs-dark .monaco-scrollable-element .shadow.left {
+	box-shadow: #000 6px 0 6px -6px inset;
+}
+
+.vs-dark .monaco-scrollable-element .shadow.top.left {
+	box-shadow: #000 6px 6px 6px -6px inset;
+}
+
+.hc-black .monaco-scrollable-element .shadow.top {
+	box-shadow: none;
+}
+
+.hc-black .monaco-scrollable-element .shadow.left {
+	box-shadow: none;
+}
+
+.hc-black .monaco-scrollable-element .shadow.top.left {
+	box-shadow: none;
+}

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

@@ -0,0 +1,580 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import 'vs/css!./media/scrollbars';
+
+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, ScrollableElementChangeOptions, ScrollableElementResolvedOptions } from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
+import { Scrollable, ScrollEvent, ScrollbarVisibility, INewScrollDimensions, IScrollDimensions, INewScrollPosition, IScrollPosition } from 'vs/base/common/scrollable';
+import { Widget } from 'vs/base/browser/ui/widget';
+import { TimeoutTimer } from 'vs/base/common/async';
+import { FastDomNode, createFastDomNode } from 'vs/base/browser/fastDomNode';
+import { ScrollbarHost, ISimplifiedMouseEvent } from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
+import Event, { Emitter } from 'vs/base/common/event';
+
+const HIDE_TIMEOUT = 500;
+const SCROLL_WHEEL_SENSITIVITY = 50;
+const SCROLL_WHEEL_SMOOTH_SCROLL_ENABLED = true;
+
+export interface IOverviewRulerLayoutInfo {
+	parent: HTMLElement;
+	insertBefore: HTMLElement;
+}
+
+class MouseWheelClassifierItem {
+	public timestamp: number;
+	public deltaX: number;
+	public deltaY: number;
+	public score: number;
+
+	constructor(timestamp: number, deltaX: number, deltaY: number) {
+		this.timestamp = timestamp;
+		this.deltaX = deltaX;
+		this.deltaY = deltaY;
+		this.score = 0;
+	}
+}
+
+export class MouseWheelClassifier {
+
+	public static INSTANCE = new MouseWheelClassifier();
+
+	private readonly _capacity: number;
+	private _memory: MouseWheelClassifierItem[];
+	private _front: number;
+	private _rear: number;
+
+	constructor() {
+		this._capacity = 5;
+		this._memory = [];
+		this._front = -1;
+		this._rear = -1;
+	}
+
+	public isPhysicalMouseWheel(): boolean {
+		if (this._front === -1 && this._rear === -1) {
+			// no elements
+			return false;
+		}
+
+		// 0.5 * last + 0.25 * before last + 0.125 * before before last + ...
+		let remainingInfluence = 1;
+		let score = 0;
+		let iteration = 1;
+
+		let index = this._rear;
+		do {
+			const influence = (index === this._front ? remainingInfluence : Math.pow(2, -iteration));
+			remainingInfluence -= influence;
+			score += this._memory[index].score * influence;
+
+			if (index === this._front) {
+				break;
+			}
+
+			index = (this._capacity + index - 1) % this._capacity;
+			iteration++;
+		} while (true);
+
+		return (score <= 0.5);
+	}
+
+	public accept(timestamp: number, deltaX: number, deltaY: number): void {
+		const item = new MouseWheelClassifierItem(timestamp, deltaX, deltaY);
+		item.score = this._computeScore(item);
+
+		if (this._front === -1 && this._rear === -1) {
+			this._memory[0] = item;
+			this._front = 0;
+			this._rear = 0;
+		} else {
+			this._rear = (this._rear + 1) % this._capacity;
+			if (this._rear === this._front) {
+				// Drop oldest
+				this._front = (this._front + 1) % this._capacity;
+			}
+			this._memory[this._rear] = item;
+		}
+	}
+
+	/**
+	 * A score between 0 and 1 for `item`.
+	 *  - a score towards 0 indicates that the source appears to be a physical mouse wheel
+	 *  - a score towards 1 indicates that the source appears to be a touchpad or magic mouse, etc.
+	 */
+	private _computeScore(item: MouseWheelClassifierItem): number {
+
+		if (Math.abs(item.deltaX) > 0 && Math.abs(item.deltaY) > 0) {
+			// both axes exercised => definitely not a physical mouse wheel
+			return 1;
+		}
+
+		let score: number = 0.5;
+		const prev = (this._front === -1 && this._rear === -1 ? null : this._memory[this._rear]);
+		if (prev) {
+			// const deltaT = item.timestamp - prev.timestamp;
+			// if (deltaT < 1000 / 30) {
+			// 	// sooner than X times per second => indicator that this is not a physical mouse wheel
+			// 	score += 0.25;
+			// }
+
+			// if (item.deltaX === prev.deltaX && item.deltaY === prev.deltaY) {
+			// 	// equal amplitude => indicator that this is a physical mouse wheel
+			// 	score -= 0.25;
+			// }
+		}
+
+		if (Math.abs(item.deltaX - Math.round(item.deltaX)) > 0 || Math.abs(item.deltaY - Math.round(item.deltaY)) > 0) {
+			// non-integer deltas => indicator that this is not a physical mouse wheel
+			score += 0.25;
+		}
+
+		return Math.min(Math.max(score, 0), 1);
+	}
+}
+
+export abstract class AbstractScrollableElement extends Widget {
+
+	private readonly _options: ScrollableElementResolvedOptions;
+	protected readonly _scrollable: Scrollable;
+	private readonly _verticalScrollbar: VerticalScrollbar;
+	private readonly _horizontalScrollbar: HorizontalScrollbar;
+	private readonly _domNode: HTMLElement;
+
+	private readonly _leftShadowDomNode: FastDomNode<HTMLElement>;
+	private readonly _topShadowDomNode: FastDomNode<HTMLElement>;
+	private readonly _topLeftShadowDomNode: FastDomNode<HTMLElement>;
+
+	private readonly _listenOnDomNode: HTMLElement;
+
+	private _mouseWheelToDispose: IDisposable[];
+
+	private _isDragging: boolean;
+	private _mouseIsOver: boolean;
+
+	private readonly _hideTimeout: TimeoutTimer;
+	private _shouldRender: boolean;
+
+	private readonly _onScroll = this._register(new Emitter<ScrollEvent>());
+	public onScroll: Event<ScrollEvent> = this._onScroll.event;
+
+	protected constructor(element: HTMLElement, options: ScrollableElementCreationOptions, scrollable?: Scrollable) {
+		super();
+		element.style.overflow = 'hidden';
+		this._options = resolveOptions(options);
+		this._scrollable = scrollable;
+
+		this._register(this._scrollable.onScroll((e) => {
+			this._onDidScroll(e);
+			this._onScroll.fire(e);
+		}));
+
+		let scrollbarHost: ScrollbarHost = {
+			onMouseWheel: (mouseWheelEvent: StandardMouseWheelEvent) => this._onMouseWheel(mouseWheelEvent),
+			onDragStart: () => this._onDragStart(),
+			onDragEnd: () => this._onDragEnd(),
+		};
+		this._verticalScrollbar = this._register(new VerticalScrollbar(this._scrollable, this._options, scrollbarHost));
+		this._horizontalScrollbar = this._register(new HorizontalScrollbar(this._scrollable, this._options, scrollbarHost));
+
+		this._domNode = document.createElement('div');
+		this._domNode.className = 'monaco-scrollable-element ' + this._options.className;
+		this._domNode.setAttribute('role', 'presentation');
+		this._domNode.style.position = 'relative';
+		this._domNode.style.overflow = 'hidden';
+		this._domNode.appendChild(element);
+		this._domNode.appendChild(this._horizontalScrollbar.domNode.domNode);
+		this._domNode.appendChild(this._verticalScrollbar.domNode.domNode);
+
+		if (this._options.useShadows) {
+			this._leftShadowDomNode = createFastDomNode(document.createElement('div'));
+			this._leftShadowDomNode.setClassName('shadow');
+			this._domNode.appendChild(this._leftShadowDomNode.domNode);
+
+			this._topShadowDomNode = createFastDomNode(document.createElement('div'));
+			this._topShadowDomNode.setClassName('shadow');
+			this._domNode.appendChild(this._topShadowDomNode.domNode);
+
+			this._topLeftShadowDomNode = createFastDomNode(document.createElement('div'));
+			this._topLeftShadowDomNode.setClassName('shadow top-left-corner');
+			this._domNode.appendChild(this._topLeftShadowDomNode.domNode);
+		}
+
+		this._listenOnDomNode = this._options.listenOnDomNode || this._domNode;
+
+		this._mouseWheelToDispose = [];
+		this._setListeningToMouseWheel(this._options.handleMouseWheel);
+
+		this.onmouseover(this._listenOnDomNode, (e) => this._onMouseOver(e));
+		this.onnonbubblingmouseout(this._listenOnDomNode, (e) => this._onMouseOut(e));
+
+		this._hideTimeout = this._register(new TimeoutTimer());
+		this._isDragging = false;
+		this._mouseIsOver = false;
+
+		this._shouldRender = true;
+	}
+
+	public dispose(): void {
+		this._mouseWheelToDispose = dispose(this._mouseWheelToDispose);
+		super.dispose();
+	}
+
+	/**
+	 * Get the generated 'scrollable' dom node
+	 */
+	public getDomNode(): HTMLElement {
+		return this._domNode;
+	}
+
+	public getOverviewRulerLayoutInfo(): IOverviewRulerLayoutInfo {
+		return {
+			parent: this._domNode,
+			insertBefore: this._verticalScrollbar.domNode.domNode,
+		};
+	}
+
+	/**
+	 * Delegate a mouse down event to the vertical scrollbar.
+	 * This is to help with clicking somewhere else and having the scrollbar react.
+	 */
+	public delegateVerticalScrollbarMouseDown(browserEvent: IMouseEvent): void {
+		this._verticalScrollbar.delegateMouseDown(browserEvent);
+	}
+
+	/**
+	 * Delegate a mouse down event to the vertical scrollbar (directly to the slider!).
+	 * This is to help with clicking somewhere else and having the scrollbar react.
+	 */
+	public delegateSliderMouseDown(e: ISimplifiedMouseEvent, onDragFinished: () => void): void {
+		this._verticalScrollbar.delegateSliderMouseDown(e, onDragFinished);
+	}
+
+	public getScrollDimensions(): IScrollDimensions {
+		return this._scrollable.getScrollDimensions();
+	}
+
+	public setScrollDimensions(dimensions: INewScrollDimensions): void {
+		this._scrollable.setScrollDimensions(dimensions);
+	}
+
+	/**
+	 * Update the class name of the scrollable element.
+	 */
+	public updateClassName(newClassName: string): void {
+		this._options.className = newClassName;
+		// Defaults are different on Macs
+		if (Platform.isMacintosh) {
+			this._options.className += ' mac';
+		}
+		this._domNode.className = 'monaco-scrollable-element ' + this._options.className;
+	}
+
+	/**
+	 * Update configuration options for the scrollbar.
+	 * Really this is Editor.IEditorScrollbarOptions, but base shouldn't
+	 * depend on Editor.
+	 */
+	public updateOptions(newOptions: ScrollableElementChangeOptions): void {
+		let massagedOptions = resolveOptions(newOptions);
+		this._options.handleMouseWheel = massagedOptions.handleMouseWheel;
+		this._options.mouseWheelScrollSensitivity = massagedOptions.mouseWheelScrollSensitivity;
+		this._setListeningToMouseWheel(this._options.handleMouseWheel);
+
+		if (!this._options.lazyRender) {
+			this._render();
+		}
+	}
+
+	// -------------------- mouse wheel scrolling --------------------
+
+	private _setListeningToMouseWheel(shouldListen: boolean): void {
+		let isListening = (this._mouseWheelToDispose.length > 0);
+
+		if (isListening === shouldListen) {
+			// No change
+			return;
+		}
+
+		// Stop listening (if necessary)
+		this._mouseWheelToDispose = dispose(this._mouseWheelToDispose);
+
+		// Start listening (if necessary)
+		if (shouldListen) {
+			let onMouseWheel = (browserEvent: MouseWheelEvent) => {
+				let e = new StandardMouseWheelEvent(browserEvent);
+				this._onMouseWheel(e);
+			};
+
+			this._mouseWheelToDispose.push(DomUtils.addDisposableListener(this._listenOnDomNode, 'mousewheel', onMouseWheel));
+			this._mouseWheelToDispose.push(DomUtils.addDisposableListener(this._listenOnDomNode, 'DOMMouseScroll', onMouseWheel));
+		}
+	}
+
+	private _onMouseWheel(e: StandardMouseWheelEvent): void {
+
+		const classifier = MouseWheelClassifier.INSTANCE;
+		if (SCROLL_WHEEL_SMOOTH_SCROLL_ENABLED) {
+			classifier.accept(Date.now(), e.deltaX, e.deltaY);
+		}
+
+		// console.log(`${Date.now()}, ${e.deltaY}, ${e.deltaX}`);
+
+		if (e.deltaY || e.deltaX) {
+			let deltaY = e.deltaY * this._options.mouseWheelScrollSensitivity;
+			let deltaX = e.deltaX * this._options.mouseWheelScrollSensitivity;
+
+			if (this._options.flipAxes) {
+				[deltaY, deltaX] = [deltaX, deltaY];
+			}
+
+			// Convert vertical scrolling to horizontal if shift is held, this
+			// is handled at a higher level on Mac
+			const shiftConvert = !Platform.isMacintosh && e.browserEvent.shiftKey;
+			if ((this._options.scrollYToX || shiftConvert) && !deltaX) {
+				deltaX = deltaY;
+				deltaY = 0;
+			}
+
+			if (Platform.isMacintosh) {
+				// Give preference to vertical scrolling
+				if (deltaY && Math.abs(deltaX) < 0.2) {
+					deltaX = 0;
+				}
+				if (Math.abs(deltaY) > Math.abs(deltaX) * 0.5) {
+					deltaX = 0;
+				}
+			}
+
+			const futureScrollPosition = this._scrollable.getFutureScrollPosition();
+
+			let desiredScrollPosition: INewScrollPosition = {};
+			if (deltaY) {
+				const desiredScrollTop = futureScrollPosition.scrollTop - SCROLL_WHEEL_SENSITIVITY * deltaY;
+				this._verticalScrollbar.writeScrollPosition(desiredScrollPosition, desiredScrollTop);
+			}
+			if (deltaX) {
+				const desiredScrollLeft = futureScrollPosition.scrollLeft - SCROLL_WHEEL_SENSITIVITY * deltaX;
+				this._horizontalScrollbar.writeScrollPosition(desiredScrollPosition, desiredScrollLeft);
+			}
+
+			// Check that we are scrolling towards a location which is valid
+			desiredScrollPosition = this._scrollable.validateScrollPosition(desiredScrollPosition);
+
+			if (futureScrollPosition.scrollLeft !== desiredScrollPosition.scrollLeft || futureScrollPosition.scrollTop !== desiredScrollPosition.scrollTop) {
+
+				const canPerformSmoothScroll = (
+					SCROLL_WHEEL_SMOOTH_SCROLL_ENABLED
+					&& this._options.mouseWheelSmoothScroll
+					&& classifier.isPhysicalMouseWheel()
+				);
+
+				if (canPerformSmoothScroll) {
+					this._scrollable.setScrollPositionSmooth(desiredScrollPosition);
+				} else {
+					this._scrollable.setScrollPositionNow(desiredScrollPosition);
+				}
+				this._shouldRender = true;
+			}
+		}
+
+		if (this._options.alwaysConsumeMouseWheel || this._shouldRender) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
+
+	private _onDidScroll(e: ScrollEvent): void {
+		this._shouldRender = this._horizontalScrollbar.onDidScroll(e) || this._shouldRender;
+		this._shouldRender = this._verticalScrollbar.onDidScroll(e) || this._shouldRender;
+
+		if (this._options.useShadows) {
+			this._shouldRender = true;
+		}
+
+		this._reveal();
+
+		if (!this._options.lazyRender) {
+			this._render();
+		}
+	}
+
+	/**
+	 * Render / mutate the DOM now.
+	 * Should be used together with the ctor option `lazyRender`.
+	 */
+	public renderNow(): void {
+		if (!this._options.lazyRender) {
+			throw new Error('Please use `lazyRender` together with `renderNow`!');
+		}
+
+		this._render();
+	}
+
+	private _render(): void {
+		if (!this._shouldRender) {
+			return;
+		}
+
+		this._shouldRender = false;
+
+		this._horizontalScrollbar.render();
+		this._verticalScrollbar.render();
+
+		if (this._options.useShadows) {
+			const scrollState = this._scrollable.getCurrentScrollPosition();
+			let enableTop = scrollState.scrollTop > 0;
+			let enableLeft = scrollState.scrollLeft > 0;
+
+			this._leftShadowDomNode.setClassName('shadow' + (enableLeft ? ' left' : ''));
+			this._topShadowDomNode.setClassName('shadow' + (enableTop ? ' top' : ''));
+			this._topLeftShadowDomNode.setClassName('shadow top-left-corner' + (enableTop ? ' top' : '') + (enableLeft ? ' left' : ''));
+		}
+	}
+
+	// -------------------- fade in / fade out --------------------
+
+	private _onDragStart(): void {
+		this._isDragging = true;
+		this._reveal();
+	}
+
+	private _onDragEnd(): void {
+		this._isDragging = false;
+		this._hide();
+	}
+
+	private _onMouseOut(e: IMouseEvent): void {
+		this._mouseIsOver = false;
+		this._hide();
+	}
+
+	private _onMouseOver(e: IMouseEvent): void {
+		this._mouseIsOver = true;
+		this._reveal();
+	}
+
+	private _reveal(): void {
+		this._verticalScrollbar.beginReveal();
+		this._horizontalScrollbar.beginReveal();
+		this._scheduleHide();
+	}
+
+	private _hide(): void {
+		if (!this._mouseIsOver && !this._isDragging) {
+			this._verticalScrollbar.beginHide();
+			this._horizontalScrollbar.beginHide();
+		}
+	}
+
+	private _scheduleHide(): void {
+		if (!this._mouseIsOver && !this._isDragging) {
+			this._hideTimeout.cancelAndSet(() => this._hide(), HIDE_TIMEOUT);
+		}
+	}
+}
+
+export class ScrollableElement extends AbstractScrollableElement {
+
+	constructor(element: HTMLElement, options: ScrollableElementCreationOptions) {
+		options = options || {};
+		options.mouseWheelSmoothScroll = false;
+		const scrollable = new Scrollable(0, (callback) => DomUtils.scheduleAtNextAnimationFrame(callback));
+		super(element, options, scrollable);
+		this._register(scrollable);
+	}
+
+	public setScrollPosition(update: INewScrollPosition): void {
+		this._scrollable.setScrollPositionNow(update);
+	}
+
+	public getScrollPosition(): IScrollPosition {
+		return this._scrollable.getCurrentScrollPosition();
+	}
+}
+
+export class SmoothScrollableElement extends AbstractScrollableElement {
+
+	constructor(element: HTMLElement, options: ScrollableElementCreationOptions, scrollable: Scrollable) {
+		super(element, options, scrollable);
+	}
+
+}
+
+export class DomScrollableElement extends ScrollableElement {
+
+	private _element: HTMLElement;
+
+	constructor(element: HTMLElement, options: ScrollableElementCreationOptions) {
+		super(element, options);
+		this._element = element;
+		this.onScroll((e) => {
+			if (e.scrollTopChanged) {
+				this._element.scrollTop = e.scrollTop;
+			}
+			if (e.scrollLeftChanged) {
+				this._element.scrollLeft = e.scrollLeft;
+			}
+		});
+		this.scanDomNode();
+	}
+
+	public scanDomNode(): void {
+		// widh, scrollLeft, scrollWidth, height, scrollTop, scrollHeight
+		this.setScrollDimensions({
+			width: this._element.clientWidth,
+			scrollWidth: this._element.scrollWidth,
+			height: this._element.clientHeight,
+			scrollHeight: this._element.scrollHeight
+		});
+		this.setScrollPosition({
+			scrollLeft: this._element.scrollLeft,
+			scrollTop: this._element.scrollTop,
+		});
+	}
+}
+
+function resolveOptions(opts: ScrollableElementCreationOptions): ScrollableElementResolvedOptions {
+	let result: ScrollableElementResolvedOptions = {
+		lazyRender: (typeof opts.lazyRender !== 'undefined' ? opts.lazyRender : false),
+		className: (typeof opts.className !== 'undefined' ? opts.className : ''),
+		useShadows: (typeof opts.useShadows !== 'undefined' ? opts.useShadows : true),
+		handleMouseWheel: (typeof opts.handleMouseWheel !== 'undefined' ? opts.handleMouseWheel : true),
+		flipAxes: (typeof opts.flipAxes !== 'undefined' ? opts.flipAxes : false),
+		alwaysConsumeMouseWheel: (typeof opts.alwaysConsumeMouseWheel !== 'undefined' ? opts.alwaysConsumeMouseWheel : false),
+		scrollYToX: (typeof opts.scrollYToX !== 'undefined' ? opts.scrollYToX : false),
+		mouseWheelScrollSensitivity: (typeof opts.mouseWheelScrollSensitivity !== 'undefined' ? opts.mouseWheelScrollSensitivity : 1),
+		mouseWheelSmoothScroll: (typeof opts.mouseWheelSmoothScroll !== 'undefined' ? opts.mouseWheelSmoothScroll : true),
+		arrowSize: (typeof opts.arrowSize !== 'undefined' ? opts.arrowSize : 11),
+
+		listenOnDomNode: (typeof opts.listenOnDomNode !== 'undefined' ? opts.listenOnDomNode : null),
+
+		horizontal: (typeof opts.horizontal !== 'undefined' ? opts.horizontal : ScrollbarVisibility.Auto),
+		horizontalScrollbarSize: (typeof opts.horizontalScrollbarSize !== 'undefined' ? opts.horizontalScrollbarSize : 10),
+		horizontalSliderSize: (typeof opts.horizontalSliderSize !== 'undefined' ? opts.horizontalSliderSize : 0),
+		horizontalHasArrows: (typeof opts.horizontalHasArrows !== 'undefined' ? opts.horizontalHasArrows : false),
+
+		vertical: (typeof opts.vertical !== 'undefined' ? opts.vertical : ScrollbarVisibility.Auto),
+		verticalScrollbarSize: (typeof opts.verticalScrollbarSize !== 'undefined' ? opts.verticalScrollbarSize : 10),
+		verticalHasArrows: (typeof opts.verticalHasArrows !== 'undefined' ? opts.verticalHasArrows : false),
+		verticalSliderSize: (typeof opts.verticalSliderSize !== 'undefined' ? opts.verticalSliderSize : 0)
+	};
+
+	result.horizontalSliderSize = (typeof opts.horizontalSliderSize !== 'undefined' ? opts.horizontalSliderSize : result.horizontalScrollbarSize);
+	result.verticalSliderSize = (typeof opts.verticalSliderSize !== 'undefined' ? opts.verticalSliderSize : result.verticalScrollbarSize);
+
+	// Defaults are different on Macs
+	if (Platform.isMacintosh) {
+		result.className += ' mac';
+	}
+
+	return result;
+}

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

@@ -0,0 +1,133 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+
+export interface ScrollableElementCreationOptions {
+	/**
+	 * The scrollable element should not do any DOM mutations until renderNow() is called.
+	 * Defaults to false.
+	 */
+	lazyRender?: boolean;
+	/**
+	 * CSS Class name for the scrollable element.
+	 */
+	className?: string;
+	/**
+	 * Drop subtle horizontal and vertical shadows.
+	 * Defaults to false.
+	 */
+	useShadows?: boolean;
+	/**
+	 * Handle mouse wheel (listen to mouse wheel scrolling).
+	 * Defaults to true
+	 */
+	handleMouseWheel?: boolean;
+	/**
+	 * If mouse wheel is handled, make mouse wheel scrolling smooth.
+	 * Defaults to true.
+	 */
+	mouseWheelSmoothScroll?: boolean;
+	/**
+	 * Flip axes. Treat vertical scrolling like horizontal and vice-versa.
+	 * Defaults to false.
+	 */
+	flipAxes?: boolean;
+	/**
+	 * If enabled, will scroll horizontally when scrolling vertical.
+	 * Defaults to false.
+	 */
+	scrollYToX?: boolean;
+	/**
+	 * Always consume mouse wheel events, even when scrolling is no longer possible.
+	 * Defaults to false.
+	 */
+	alwaysConsumeMouseWheel?: boolean;
+	/**
+	 * A multiplier to be used on the `deltaX` and `deltaY` of mouse wheel scroll events.
+	 * Defaults to 1.
+	 */
+	mouseWheelScrollSensitivity?: number;
+	/**
+	 * Height for vertical arrows (top/bottom) and width for horizontal arrows (left/right).
+	 * Defaults to 11.
+	 */
+	arrowSize?: number;
+	/**
+	 * The dom node events should be bound to.
+	 * If no listenOnDomNode is provided, the dom node passed to the constructor will be used for event listening.
+	 */
+	listenOnDomNode?: HTMLElement;
+	/**
+	 * Control the visibility of the horizontal scrollbar.
+	 * Accepted values: 'auto' (on mouse over), 'visible' (always visible), 'hidden' (never visible)
+	 * Defaults to 'auto'.
+	 */
+	horizontal?: ScrollbarVisibility;
+	/**
+	 * Height (in px) of the horizontal scrollbar.
+	 * Defaults to 10.
+	 */
+	horizontalScrollbarSize?: number;
+	/**
+	 * Height (in px) of the horizontal scrollbar slider.
+	 * Defaults to `horizontalScrollbarSize`
+	 */
+	horizontalSliderSize?: number;
+	/**
+	 * Render arrows (left/right) for the horizontal scrollbar.
+	 * Defaults to false.
+	 */
+	horizontalHasArrows?: boolean;
+	/**
+	 * Control the visibility of the vertical scrollbar.
+	 * Accepted values: 'auto' (on mouse over), 'visible' (always visible), 'hidden' (never visible)
+	 * Defaults to 'auto'.
+	 */
+	vertical?: ScrollbarVisibility;
+	/**
+	 * Width (in px) of the vertical scrollbar.
+	 * Defaults to 10.
+	 */
+	verticalScrollbarSize?: number;
+	/**
+	 * Width (in px) of the vertical scrollbar slider.
+	 * Defaults to `verticalScrollbarSize`
+	 */
+	verticalSliderSize?: number;
+	/**
+	 * Render arrows (top/bottom) for the vertical scrollbar.
+	 * Defaults to false.
+	 */
+	verticalHasArrows?: boolean;
+}
+
+export interface ScrollableElementChangeOptions {
+	handleMouseWheel?: boolean;
+	mouseWheelScrollSensitivity?: number;
+}
+
+export interface ScrollableElementResolvedOptions {
+	lazyRender: boolean;
+	className: string;
+	useShadows: boolean;
+	handleMouseWheel: boolean;
+	flipAxes: boolean;
+	scrollYToX: boolean;
+	alwaysConsumeMouseWheel: boolean;
+	mouseWheelScrollSensitivity: number;
+	mouseWheelSmoothScroll: boolean;
+	arrowSize: number;
+	listenOnDomNode: HTMLElement;
+	horizontal: ScrollbarVisibility;
+	horizontalScrollbarSize: number;
+	horizontalSliderSize: number;
+	horizontalHasArrows: boolean;
+	vertical: ScrollbarVisibility;
+	verticalScrollbarSize: number;
+	verticalSliderSize: number;
+	verticalHasArrows: boolean;
+}

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

@@ -0,0 +1,109 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { IMouseEvent } from 'vs/base/browser/mouseEvent';
+import { GlobalMouseMoveMonitor, IStandardMouseMoveEventData, standardMouseMoveMerger } from 'vs/base/browser/globalMouseMoveMonitor';
+import { Widget } from 'vs/base/browser/ui/widget';
+import { TimeoutTimer, IntervalTimer } from 'vs/base/common/async';
+
+/**
+ * The arrow image size.
+ */
+export const ARROW_IMG_SIZE = 11;
+
+export interface ScrollbarArrowOptions {
+	onActivate: () => void;
+	className: string;
+
+	bgWidth: number;
+	bgHeight: number;
+
+	top?: number;
+	left?: number;
+	bottom?: number;
+	right?: number;
+}
+
+export class ScrollbarArrow extends Widget {
+
+	private _onActivate: () => void;
+	public bgDomNode: HTMLElement;
+	public domNode: HTMLElement;
+	private _mousedownRepeatTimer: IntervalTimer;
+	private _mousedownScheduleRepeatTimer: TimeoutTimer;
+	private _mouseMoveMonitor: GlobalMouseMoveMonitor<IStandardMouseMoveEventData>;
+
+	constructor(opts: ScrollbarArrowOptions) {
+		super();
+		this._onActivate = opts.onActivate;
+
+		this.bgDomNode = document.createElement('div');
+		this.bgDomNode.className = 'arrow-background';
+		this.bgDomNode.style.position = 'absolute';
+		this.bgDomNode.style.width = opts.bgWidth + 'px';
+		this.bgDomNode.style.height = opts.bgHeight + 'px';
+		if (typeof opts.top !== 'undefined') {
+			this.bgDomNode.style.top = '0px';
+		}
+		if (typeof opts.left !== 'undefined') {
+			this.bgDomNode.style.left = '0px';
+		}
+		if (typeof opts.bottom !== 'undefined') {
+			this.bgDomNode.style.bottom = '0px';
+		}
+		if (typeof opts.right !== 'undefined') {
+			this.bgDomNode.style.right = '0px';
+		}
+
+		this.domNode = document.createElement('div');
+		this.domNode.className = opts.className;
+		this.domNode.style.position = 'absolute';
+		this.domNode.style.width = ARROW_IMG_SIZE + 'px';
+		this.domNode.style.height = ARROW_IMG_SIZE + 'px';
+		if (typeof opts.top !== 'undefined') {
+			this.domNode.style.top = opts.top + 'px';
+		}
+		if (typeof opts.left !== 'undefined') {
+			this.domNode.style.left = opts.left + 'px';
+		}
+		if (typeof opts.bottom !== 'undefined') {
+			this.domNode.style.bottom = opts.bottom + 'px';
+		}
+		if (typeof opts.right !== 'undefined') {
+			this.domNode.style.right = opts.right + 'px';
+		}
+
+		this._mouseMoveMonitor = this._register(new GlobalMouseMoveMonitor<IStandardMouseMoveEventData>());
+		this.onmousedown(this.bgDomNode, (e) => this._arrowMouseDown(e));
+		this.onmousedown(this.domNode, (e) => this._arrowMouseDown(e));
+
+		this._mousedownRepeatTimer = this._register(new IntervalTimer());
+		this._mousedownScheduleRepeatTimer = this._register(new TimeoutTimer());
+	}
+
+	private _arrowMouseDown(e: IMouseEvent): void {
+		let scheduleRepeater = () => {
+			this._mousedownRepeatTimer.cancelAndSet(() => this._onActivate(), 1000 / 24);
+		};
+
+		this._onActivate();
+		this._mousedownRepeatTimer.cancel();
+		this._mousedownScheduleRepeatTimer.cancelAndSet(scheduleRepeater, 200);
+
+		this._mouseMoveMonitor.startMonitoring(
+			standardMouseMoveMerger,
+			(mouseMoveData: IStandardMouseMoveEventData) => {
+				/* Intentional empty */
+			},
+			() => {
+				this._mousedownRepeatTimer.cancel();
+				this._mousedownScheduleRepeatTimer.cancel();
+			}
+		);
+
+		e.preventDefault();
+	}
+}

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

@@ -0,0 +1,222 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+/**
+ * The minimal size of the slider (such that it can still be clickable) -- it is artificially enlarged.
+ */
+const MINIMUM_SLIDER_SIZE = 20;
+
+export class ScrollbarState {
+
+	/**
+	 * For the vertical scrollbar: the width.
+	 * For the horizontal scrollbar: the height.
+	 */
+	private readonly _scrollbarSize: number;
+
+	/**
+	 * For the vertical scrollbar: the height of the pair horizontal scrollbar.
+	 * For the horizontal scrollbar: the width of the pair vertical scrollbar.
+	 */
+	private readonly _oppositeScrollbarSize: number;
+
+	/**
+	 * For the vertical scrollbar: the height of the scrollbar's arrows.
+	 * For the horizontal scrollbar: the width of the scrollbar's arrows.
+	 */
+	private readonly _arrowSize: number;
+
+	// --- variables
+	/**
+	 * For the vertical scrollbar: the viewport height.
+	 * For the horizontal scrollbar: the viewport width.
+	 */
+	private _visibleSize: number;
+
+	/**
+	 * For the vertical scrollbar: the scroll height.
+	 * For the horizontal scrollbar: the scroll width.
+	 */
+	private _scrollSize: number;
+
+	/**
+	 * For the vertical scrollbar: the scroll top.
+	 * For the horizontal scrollbar: the scroll left.
+	 */
+	private _scrollPosition: number;
+
+	// --- computed variables
+
+	/**
+	 * `visibleSize` - `oppositeScrollbarSize`
+	 */
+	private _computedAvailableSize: number;
+	/**
+	 * (`scrollSize` > 0 && `scrollSize` > `visibleSize`)
+	 */
+	private _computedIsNeeded: boolean;
+
+	private _computedSliderSize: number;
+	private _computedSliderRatio: number;
+	private _computedSliderPosition: number;
+
+	constructor(arrowSize: number, scrollbarSize: number, oppositeScrollbarSize: number) {
+		this._scrollbarSize = Math.round(scrollbarSize);
+		this._oppositeScrollbarSize = Math.round(oppositeScrollbarSize);
+		this._arrowSize = Math.round(arrowSize);
+
+		this._visibleSize = 0;
+		this._scrollSize = 0;
+		this._scrollPosition = 0;
+
+		this._computedAvailableSize = 0;
+		this._computedIsNeeded = false;
+		this._computedSliderSize = 0;
+		this._computedSliderRatio = 0;
+		this._computedSliderPosition = 0;
+
+		this._refreshComputedValues();
+	}
+
+	public clone(): ScrollbarState {
+		let r = new ScrollbarState(this._arrowSize, this._scrollbarSize, this._oppositeScrollbarSize);
+		r.setVisibleSize(this._visibleSize);
+		r.setScrollSize(this._scrollSize);
+		r.setScrollPosition(this._scrollPosition);
+		return r;
+	}
+
+	public setVisibleSize(visibleSize: number): boolean {
+		let iVisibleSize = Math.round(visibleSize);
+		if (this._visibleSize !== iVisibleSize) {
+			this._visibleSize = iVisibleSize;
+			this._refreshComputedValues();
+			return true;
+		}
+		return false;
+	}
+
+	public setScrollSize(scrollSize: number): boolean {
+		let iScrollSize = Math.round(scrollSize);
+		if (this._scrollSize !== iScrollSize) {
+			this._scrollSize = iScrollSize;
+			this._refreshComputedValues();
+			return true;
+		}
+		return false;
+	}
+
+	public setScrollPosition(scrollPosition: number): boolean {
+		let iScrollPosition = Math.round(scrollPosition);
+		if (this._scrollPosition !== iScrollPosition) {
+			this._scrollPosition = iScrollPosition;
+			this._refreshComputedValues();
+			return true;
+		}
+		return false;
+	}
+
+	private static _computeValues(oppositeScrollbarSize: number, arrowSize: number, visibleSize: number, scrollSize: number, scrollPosition: number) {
+		const computedAvailableSize = Math.max(0, visibleSize - oppositeScrollbarSize);
+		const computedRepresentableSize = Math.max(0, computedAvailableSize - 2 * arrowSize);
+		const computedIsNeeded = (scrollSize > 0 && scrollSize > visibleSize);
+
+		if (!computedIsNeeded) {
+			// There is no need for a slider
+			return {
+				computedAvailableSize: Math.round(computedAvailableSize),
+				computedIsNeeded: computedIsNeeded,
+				computedSliderSize: Math.round(computedRepresentableSize),
+				computedSliderRatio: 0,
+				computedSliderPosition: 0,
+			};
+		}
+
+		// We must artificially increase the size of the slider if needed, since the slider would be too small to grab with the mouse otherwise
+		const computedSliderSize = Math.round(Math.max(MINIMUM_SLIDER_SIZE, Math.floor(visibleSize * computedRepresentableSize / scrollSize)));
+
+		// The slider can move from 0 to `computedRepresentableSize` - `computedSliderSize`
+		// in the same way `scrollPosition` can move from 0 to `scrollSize` - `visibleSize`.
+		const computedSliderRatio = (computedRepresentableSize - computedSliderSize) / (scrollSize - visibleSize);
+		const computedSliderPosition = (scrollPosition * computedSliderRatio);
+
+		return {
+			computedAvailableSize: Math.round(computedAvailableSize),
+			computedIsNeeded: computedIsNeeded,
+			computedSliderSize: Math.round(computedSliderSize),
+			computedSliderRatio: computedSliderRatio,
+			computedSliderPosition: Math.round(computedSliderPosition),
+		};
+	}
+
+	private _refreshComputedValues(): void {
+		const r = ScrollbarState._computeValues(this._oppositeScrollbarSize, this._arrowSize, this._visibleSize, this._scrollSize, this._scrollPosition);
+		this._computedAvailableSize = r.computedAvailableSize;
+		this._computedIsNeeded = r.computedIsNeeded;
+		this._computedSliderSize = r.computedSliderSize;
+		this._computedSliderRatio = r.computedSliderRatio;
+		this._computedSliderPosition = r.computedSliderPosition;
+	}
+
+	public getArrowSize(): number {
+		return this._arrowSize;
+	}
+
+	public getScrollPosition(): number {
+		return this._scrollPosition;
+	}
+
+	public getRectangleLargeSize(): number {
+		return this._computedAvailableSize;
+	}
+
+	public getRectangleSmallSize(): number {
+		return this._scrollbarSize;
+	}
+
+	public isNeeded(): boolean {
+		return this._computedIsNeeded;
+	}
+
+	public getSliderSize(): number {
+		return this._computedSliderSize;
+	}
+
+	public getSliderPosition(): number {
+		return this._computedSliderPosition;
+	}
+
+	public getSliderCenter(): number {
+		return (this._computedSliderPosition + this._computedSliderSize / 2);
+	}
+
+	/**
+	 * Compute a desired `scrollPosition` such that `offset` ends up in the center of the slider.
+	 * `offset` is based on the same coordinate system as the `sliderPosition`.
+	 */
+	public getDesiredScrollPositionFromOffset(offset: number): number {
+		if (!this._computedIsNeeded) {
+			// no need for a slider
+			return 0;
+		}
+
+		let desiredSliderPosition = offset - this._arrowSize - this._computedSliderSize / 2;
+		return Math.round(desiredSliderPosition / this._computedSliderRatio);
+	}
+
+	/**
+	 * Compute a desired `scrollPosition` such that the slider moves by `delta`.
+	 */
+	public getDesiredScrollPositionFromDelta(delta: number): number {
+		if (!this._computedIsNeeded) {
+			// no need for a slider
+			return 0;
+		}
+
+		let desiredSliderPosition = this._computedSliderPosition + delta;
+		return Math.round(desiredSliderPosition / this._computedSliderRatio);
+	}
+}

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

@@ -0,0 +1,105 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { Disposable } from 'vs/base/common/lifecycle';
+import { TimeoutTimer } from 'vs/base/common/async';
+import { FastDomNode } from 'vs/base/browser/fastDomNode';
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+
+export class ScrollbarVisibilityController extends Disposable {
+	private _visibility: ScrollbarVisibility;
+	private _visibleClassName: string;
+	private _invisibleClassName: string;
+	private _domNode: FastDomNode<HTMLElement>;
+	private _shouldBeVisible: boolean;
+	private _isNeeded: boolean;
+	private _isVisible: boolean;
+	private _revealTimer: TimeoutTimer;
+
+	constructor(visibility: ScrollbarVisibility, visibleClassName: string, invisibleClassName: string) {
+		super();
+		this._visibility = visibility;
+		this._visibleClassName = visibleClassName;
+		this._invisibleClassName = invisibleClassName;
+		this._domNode = null;
+		this._isVisible = false;
+		this._isNeeded = false;
+		this._shouldBeVisible = false;
+		this._revealTimer = this._register(new TimeoutTimer());
+	}
+
+	// ----------------- Hide / Reveal
+
+	private applyVisibilitySetting(shouldBeVisible: boolean): boolean {
+		if (this._visibility === ScrollbarVisibility.Hidden) {
+			return false;
+		}
+		if (this._visibility === ScrollbarVisibility.Visible) {
+			return true;
+		}
+		return shouldBeVisible;
+	}
+
+	public setShouldBeVisible(rawShouldBeVisible: boolean): void {
+		let shouldBeVisible = this.applyVisibilitySetting(rawShouldBeVisible);
+
+		if (this._shouldBeVisible !== shouldBeVisible) {
+			this._shouldBeVisible = shouldBeVisible;
+			this.ensureVisibility();
+		}
+	}
+
+	public setIsNeeded(isNeeded: boolean): void {
+		if (this._isNeeded !== isNeeded) {
+			this._isNeeded = isNeeded;
+			this.ensureVisibility();
+		}
+	}
+
+	public setDomNode(domNode: FastDomNode<HTMLElement>): void {
+		this._domNode = domNode;
+		this._domNode.setClassName(this._invisibleClassName);
+
+		// Now that the flags & the dom node are in a consistent state, ensure the Hidden/Visible configuration
+		this.setShouldBeVisible(false);
+	}
+
+	public ensureVisibility(): void {
+
+		if (!this._isNeeded) {
+			// Nothing to be rendered
+			this._hide(false);
+			return;
+		}
+
+		if (this._shouldBeVisible) {
+			this._reveal();
+		} else {
+			this._hide(true);
+		}
+	}
+
+	private _reveal(): void {
+		if (this._isVisible) {
+			return;
+		}
+		this._isVisible = true;
+
+		// The CSS animation doesn't play otherwise
+		this._revealTimer.setIfNotSet(() => {
+			this._domNode.setClassName(this._visibleClassName);
+		}, 0);
+	}
+
+	private _hide(withFadeAway: boolean): void {
+		this._revealTimer.cancel();
+		if (!this._isVisible) {
+			return;
+		}
+		this._isVisible = false;
+		this._domNode.setClassName(this._invisibleClassName + (withFadeAway ? ' fade' : ''));
+	}
+}

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

@@ -0,0 +1,95 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { AbstractScrollbar, ScrollbarHost, ISimplifiedMouseEvent } from 'vs/base/browser/ui/scrollbar/abstractScrollbar';
+import { StandardMouseWheelEvent } from 'vs/base/browser/mouseEvent';
+import { ScrollableElementResolvedOptions } from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
+import { Scrollable, ScrollEvent, ScrollbarVisibility, INewScrollPosition } from 'vs/base/common/scrollable';
+import { ScrollbarState } from 'vs/base/browser/ui/scrollbar/scrollbarState';
+import { ARROW_IMG_SIZE } from 'vs/base/browser/ui/scrollbar/scrollbarArrow';
+
+export class VerticalScrollbar extends AbstractScrollbar {
+
+	constructor(scrollable: Scrollable, options: ScrollableElementResolvedOptions, host: ScrollbarHost) {
+		super({
+			lazyRender: options.lazyRender,
+			host: host,
+			scrollbarState: new ScrollbarState(
+				(options.verticalHasArrows ? options.arrowSize : 0),
+				(options.vertical === ScrollbarVisibility.Hidden ? 0 : options.verticalScrollbarSize),
+				// give priority to vertical scroll bar over horizontal and let it scroll all the way to the bottom
+				0
+			),
+			visibility: options.vertical,
+			extraScrollbarClassName: 'vertical',
+			scrollable: scrollable
+		});
+
+		if (options.verticalHasArrows) {
+			let arrowDelta = (options.arrowSize - ARROW_IMG_SIZE) / 2;
+			let scrollbarDelta = (options.verticalScrollbarSize - ARROW_IMG_SIZE) / 2;
+
+			this._createArrow({
+				className: 'up-arrow',
+				top: arrowDelta,
+				left: scrollbarDelta,
+				bottom: void 0,
+				right: void 0,
+				bgWidth: options.verticalScrollbarSize,
+				bgHeight: options.arrowSize,
+				onActivate: () => this._host.onMouseWheel(new StandardMouseWheelEvent(null, 0, 1)),
+			});
+
+			this._createArrow({
+				className: 'down-arrow',
+				top: void 0,
+				left: scrollbarDelta,
+				bottom: arrowDelta,
+				right: void 0,
+				bgWidth: options.verticalScrollbarSize,
+				bgHeight: options.arrowSize,
+				onActivate: () => this._host.onMouseWheel(new StandardMouseWheelEvent(null, 0, -1)),
+			});
+		}
+
+		this._createSlider(0, Math.floor((options.verticalScrollbarSize - options.verticalSliderSize) / 2), options.verticalSliderSize, null);
+	}
+
+	protected _updateSlider(sliderSize: number, sliderPosition: number): void {
+		this.slider.setHeight(sliderSize);
+		this.slider.setTop(sliderPosition);
+	}
+
+	protected _renderDomNode(largeSize: number, smallSize: number): void {
+		this.domNode.setWidth(smallSize);
+		this.domNode.setHeight(largeSize);
+		this.domNode.setRight(0);
+		this.domNode.setTop(0);
+	}
+
+	public onDidScroll(e: ScrollEvent): boolean {
+		this._shouldRender = this._onElementScrollSize(e.scrollHeight) || this._shouldRender;
+		this._shouldRender = this._onElementScrollPosition(e.scrollTop) || this._shouldRender;
+		this._shouldRender = this._onElementSize(e.height) || this._shouldRender;
+		return this._shouldRender;
+	}
+
+	protected _mouseDownRelativePosition(offsetX: number, offsetY: number): number {
+		return offsetY;
+	}
+
+	protected _sliderMousePosition(e: ISimplifiedMouseEvent): number {
+		return e.posy;
+	}
+
+	protected _sliderOrthogonalMousePosition(e: ISimplifiedMouseEvent): number {
+		return e.posx;
+	}
+
+	public writeScrollPosition(target: INewScrollPosition, scrollPosition: number): void {
+		target.scrollTop = scrollPosition;
+	}
+}