tabsTitleControl.ts

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

'use strict';

import 'vs/css!./media/tabstitle';
import nls = require('vs/nls');
import {prepareActions} from 'vs/workbench/browser/actionBarRegistry';
import arrays = require('vs/base/common/arrays');
import errors = require('vs/base/common/errors');
import DOM = require('vs/base/browser/dom');
import {Builder, $} from 'vs/base/browser/builder';
import {IEditorGroup} from 'vs/workbench/common/editor';
import {ToolBar} from 'vs/base/browser/ui/toolbar/toolbar';
import {ActionBar} from 'vs/base/browser/ui/actionbar/actionbar';
import {IWorkbenchEditorService} from 'vs/workbench/services/editor/common/editorService';
import {IContextMenuService} from 'vs/platform/contextview/browser/contextView';
import {IEditorGroupService} from 'vs/workbench/services/group/common/groupService';
import {IMessageService} from 'vs/platform/message/common/message';
import {ITelemetryService} from 'vs/platform/telemetry/common/telemetry';
import {IInstantiationService} from 'vs/platform/instantiation/common/instantiation';
import {IKeybindingService} from 'vs/platform/keybinding/common/keybindingService';
import {TitleControl} from 'vs/workbench/browser/parts/editor/titleControl';
import {IEditorInput} from 'vs/platform/editor/common/editor';

export class TabsTitleControl extends TitleControl {
	private titleContainer: Builder;
	private tabsContainer: Builder;

	private groupActionsToolbar: ToolBar;
	private tabActionBars: ActionBar[];

	private currentPrimaryGroupActionIds: string[];
	private currentSecondaryGroupActionIds: string[];

	constructor(
		@IContextMenuService contextMenuService: IContextMenuService,
		@IInstantiationService instantiationService: IInstantiationService,
		@IWorkbenchEditorService editorService: IWorkbenchEditorService,
		@IEditorGroupService editorGroupService: IEditorGroupService,
		@IKeybindingService keybindingService: IKeybindingService,
		@ITelemetryService telemetryService: ITelemetryService,
		@IMessageService messageService: IMessageService
	) {
		super(contextMenuService, instantiationService, editorService, editorGroupService, keybindingService, telemetryService, messageService);

		this.currentPrimaryGroupActionIds = [];
		this.currentSecondaryGroupActionIds = [];

		this.tabActionBars = [];
	}

	public setContext(group: IEditorGroup): void {
		super.setContext(group);

		this.groupActionsToolbar.context = { group };
	}

	public create(parent: Builder): void {
		this.titleContainer = $(parent);

		// Tabs Container
		parent.div({
			'class': 'tabs-container'
		}, (div) => {
			this.tabsContainer = div;

			// Support to scroll the tabs container with the mouse wheel
			// if we detect that scrolling happens in Y-axis
			div.on('wheel', (e: WheelEvent) => {
				if (e.deltaY && !e.deltaX) {
					DOM.EventHelper.stop(e);
					this.tabsContainer.getHTMLElement().scrollLeft += e.deltaY;
				}
			});
		});

		// Group Actions
		parent.div({
			'class': 'group-actions'
		}, (div) => {
			this.groupActionsToolbar = this.doCreateToolbar(div);
		});
	}

	public allowDragging(element: HTMLElement): boolean {
		return (element.className === 'tabs-container');
	}

	public refresh(): void {
		if (!this.context) {
			return;
		}

		const group = this.context;
		const editor = group.activeEditor;
		if (!editor) {
			this.groupActionsToolbar.setActions([], [])();

			this.currentPrimaryGroupActionIds = [];
			this.currentSecondaryGroupActionIds = [];

			return; // return early if we are being closed
		}

		// Activity state
		const isActive = this.stacks.isActive(group);
		if (isActive) {
			this.titleContainer.addClass('active');
		} else {
			this.titleContainer.removeClass('active');
		}

		// Update Group Actions Toolbar
		const groupActions = this.getGroupActions(group);
		const primaryGroupActions = prepareActions(groupActions.primary);
		const secondaryGroupActions = prepareActions(groupActions.secondary);
		const primaryGroupActionIds = primaryGroupActions.map(a => a.id);
		const secondaryGroupActionIds = secondaryGroupActions.map(a => a.id);

		if (!arrays.equals(primaryGroupActionIds, this.currentPrimaryGroupActionIds) || !arrays.equals(secondaryGroupActionIds, this.currentSecondaryGroupActionIds)) {
			this.groupActionsToolbar.setActions(primaryGroupActions, secondaryGroupActions)();
			this.currentPrimaryGroupActionIds = primaryGroupActionIds;
			this.currentSecondaryGroupActionIds = secondaryGroupActionIds;
		}

		// Refresh Tabs
		this.refreshTabs(group);
	}

	private refreshTabs(group: IEditorGroup): void {

		// Empty container first
		this.tabsContainer.empty();
		while (this.tabActionBars.length) {
			this.tabActionBars.pop().dispose();
		}

		let activeTab: HTMLElement;

		// Add a tab for each opened editor
		this.context.getEditors().forEach(editor => {
			const isPinned = group.isPinned(editor);
			const isActive = group.isActive(editor);
			const isDirty = editor.isDirty();

			$(this.tabsContainer).div({ 'class': 'tab monaco-editor-background' }, tab => {

				// Eventing
				this.hookTabListeners(tab, editor, group);

				// Pinned state
				if (isPinned) {
					tab.addClass('pinned');
				} else {
					tab.removeClass('pinned');
				}

				// Active state
				if (isActive) {
					tab.addClass('active');
					activeTab = tab.getHTMLElement();
				} else {
					tab.removeClass('active');
				}

				// Dirty State
				if (isDirty) {
					tab.addClass('dirty');
				} else {
					tab.removeClass('dirty');
				}

				// Tab Label
				tab.div({
					'class': 'tab-label'
				}, (div) => {
					$(div).a().safeInnerHtml(editor.getName()).title(editor.getDescription(true));
				});

				// Tab Close
				tab.div({
					'class': 'tab-close'
				}, (div) => {
					const bar = new ActionBar(div, { context: { editor, group }, ariaLabel: nls.localize('araLabelTabActions', "Tab actions") });
					bar.push(this.closeEditorAction, { icon: true, label: false });

					this.tabActionBars.push(bar);
				});
			});
		});

		// Always reveal the active one
		const container = this.tabsContainer.getHTMLElement();
		const containerWidth = container.offsetWidth;
		const containerScrollPosX = container.scrollLeft;
		const activeTabPosX = activeTab.offsetLeft;
		const activeTabWidth = activeTab.offsetWidth;

		// Tab is overflowing to the right: Scroll minimally until the element is fully visible to the right
		if (containerScrollPosX + containerWidth < activeTabPosX + activeTabWidth) {
			container.scrollLeft += ((activeTabPosX + activeTabWidth) /* right corner of tab */ - (containerScrollPosX + containerWidth) /* right corner of view port */);
		}

		// Tab is overlflowng to the left: Scroll it into view to the left
		else if (containerScrollPosX > activeTabPosX) {
			container.scrollLeft = activeTab.offsetLeft;
		}
	}

	private hookTabListeners(tab: Builder, editor: IEditorInput, group: IEditorGroup): void {
		const position = this.stacks.positionOfGroup(group);

		// Open on Click
		tab.on(DOM.EventType.MOUSE_DOWN, (e: MouseEvent) => {
			DOM.EventHelper.stop(e);

			if (e.button === 0 /* Left Button */ && !DOM.findParentWithClass(<any>e.target || e.srcElement, 'monaco-action-bar', 'tab')) {
				this.editorService.openEditor(editor, null, position).done(null, errors.onUnexpectedError);
			}
		});

		// Pin on double click
		tab.on(DOM.EventType.DBLCLICK, (e: MouseEvent) => {
			DOM.EventHelper.stop(e);

			this.editorGroupService.pinEditor(position, editor);
		});

		// Close on mouse middle click
		tab.on(DOM.EventType.MOUSE_UP, (e: MouseEvent) => {
			DOM.EventHelper.stop(e);

			if (e.button === 1 /* Middle Button */) {
				this.editorService.closeEditor(position, editor).done(null, errors.onUnexpectedError);
			}
		});
	}

	public dispose(): void {
		super.dispose();

		// Toolbar
		this.groupActionsToolbar.dispose();
	}
}