blob: 43e4d43f4caf4ebcd52917204ff07449340eeebf [file] [log] [blame]
/*
* Copyright (C) 2015 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WI.TabBar = class TabBar extends WI.View
{
constructor(element)
{
super(element);
this.element.classList.add("tab-bar");
this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
this.element.createChild("div", "border top");
const navigationBarBeforeElement = null;
this._navigationBarBefore = new WI.NavigationBar(navigationBarBeforeElement, {sizesToFit: true});
this.addSubview(this._navigationBarBefore);
this._tabContainer = this.element.appendChild(document.createElement("div"));
this._tabContainer.className = "tabs";
this._tabContainer.setAttribute("role", "tablist");
this._tabContainer.addEventListener("mousedown", this._handleTabContainerMouseDown.bind(this));
this._tabContainer.addEventListener("click", this._handleTabContainerClick.bind(this));
this._tabContainer.addEventListener("mouseleave", this._handleTabContainerMouseLeave.bind(this));
this._tabContainer.addEventListener("contextmenu", this._handleTabContainerContextMenu.bind(this));
this._flexibleSpaceBeforeElement = this._tabContainer.appendChild(document.createElement("div"));
this._flexibleSpaceBeforeElement.className = "flexible-space";
this._flexibleSpaceAfterElement = this._tabContainer.appendChild(document.createElement("div"));
this._flexibleSpaceAfterElement.className = "flexible-space";
const navigationBarAfterElement = null;
this._navigationBarAfter = new WI.NavigationBar(navigationBarAfterElement, {sizesToFit: true});
this.addSubview(this._navigationBarAfter);
this.element.createChild("div", "border bottom");
this._tabBarItems = [];
this._hiddenTabBarItems = [];
const tabPickerRepresentedObject = null;
this._tabPickerTabBarItem = new WI.PinnedTabBarItem(tabPickerRepresentedObject, "Images/TabPicker.svg", WI.UIString("Show hidden tabs"));
this._tabPickerTabBarItem.hidden = true;
this._tabPickerTabBarItem.element.classList.add("tab-picker");
this.addTabBarItem(this._tabPickerTabBarItem, {suppressAnimations: true});
this._mouseDownPageX = NaN;
this._isDragging = false;
}
// Static
static get horizontalPadding()
{
return (WI.dockConfiguration === WI.DockConfiguration.Undocked) ? 0 : 8; // Keep in sync with `body.docked .tab-bar .tabs`
}
// Public
addNavigationItemBefore(navigationItem)
{
this._navigationBarBefore.addNavigationItem(navigationItem);
this.needsLayout();
}
addNavigationItemAfter(navigationItem)
{
this._navigationBarAfter.addNavigationItem(navigationItem);
this.needsLayout();
}
addTabBarItem(tabBarItem, options = {})
{
return this.insertTabBarItem(tabBarItem, this._tabBarItems.length, options);
}
insertTabBarItem(tabBarItem, index, options = {})
{
console.assert(tabBarItem instanceof WI.TabBarItem);
if (!(tabBarItem instanceof WI.TabBarItem))
return null;
if (tabBarItem.parentTabBar === this)
return null;
if (this._tabAnimatedClosedSinceMouseEnter) {
// Delay adding the new tab until we can expand the tabs after a closed tab.
this._finishExpandingTabsAfterClose().then(() => {
this.insertTabBarItem(tabBarItem, index, options);
});
return null;
}
if (tabBarItem.parentTabBar)
tabBarItem.parentTabBar.removeTabBarItem(tabBarItem);
tabBarItem.parentTabBar = this;
if (tabBarItem instanceof WI.GeneralTabBarItem)
index = Number.constrain(index, 0, this.normalTabCount);
else
index = Number.constrain(index, this.normalTabCount, this._tabBarItems.length);
if (this._tabContainer.classList.contains("animating")) {
requestAnimationFrame(removeStyles.bind(this));
options.suppressAnimations = true;
}
var beforeTabSizesAndPositions;
if (!options.suppressAnimations)
beforeTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
this._tabBarItems.splice(index, 0, tabBarItem);
let nextSibling = this._tabBarItems[index + 1] || this._tabBarItems.lastValue;
if (this._tabContainer.contains(nextSibling.element)) {
if (!(tabBarItem instanceof WI.PinnedTabBarItem) && nextSibling instanceof WI.PinnedTabBarItem && nextSibling !== this._tabPickerTabBarItem)
this._tabContainer.insertBefore(tabBarItem.element, this._flexibleSpaceAfterElement);
else
this._tabContainer.insertBefore(tabBarItem.element, nextSibling.element);
} else {
if (tabBarItem instanceof WI.PinnedTabBarItem && tabBarItem !== this._tabPickerTabBarItem)
this._tabContainer.appendChild(tabBarItem.element);
else
this._tabContainer.insertBefore(tabBarItem.element, this._flexibleSpaceAfterElement);
}
this._tabContainer.classList.toggle("single-tab", !this._hasMoreThanOneNormalTab());
tabBarItem.element.style.left = null;
tabBarItem.element.style.width = null;
function animateTabs()
{
this._tabContainer.classList.add("animating");
this._tabContainer.classList.add("inserting-tab");
this._applyTabBarItemSizesAndPositions(afterTabSizesAndPositions);
this._tabContainer.addEventListener("webkitTransitionEnd", removeStylesListener);
}
function removeStyles()
{
this._tabContainer.classList.remove("static-layout");
this._tabContainer.classList.remove("animating");
this._tabContainer.classList.remove("inserting-tab");
tabBarItem.element.classList.remove("being-inserted");
this._clearTabBarItemSizesAndPositions();
this._tabContainer.removeEventListener("webkitTransitionEnd", removeStylesListener);
}
if (!options.suppressAnimations) {
var afterTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
this.updateLayout();
let tabBarItems = this._tabBarItemsFromLeftToRight();
let previousTabBarItem = tabBarItems[tabBarItems.indexOf(tabBarItem) - 1] || null;
let previousTabBarItemSizeAndPosition = previousTabBarItem ? beforeTabSizesAndPositions.get(previousTabBarItem) : null;
if (previousTabBarItemSizeAndPosition)
beforeTabSizesAndPositions.set(tabBarItem, {left: previousTabBarItemSizeAndPosition.left + previousTabBarItemSizeAndPosition.width, width: 0});
else
beforeTabSizesAndPositions.set(tabBarItem, {left: 0, width: 0});
this._tabContainer.classList.add("static-layout");
tabBarItem.element.classList.add("being-inserted");
this._applyTabBarItemSizesAndPositions(beforeTabSizesAndPositions);
var removeStylesListener = removeStyles.bind(this);
requestAnimationFrame(animateTabs.bind(this));
} else
this.needsLayout();
this.dispatchEventToListeners(WI.TabBar.Event.TabBarItemAdded, {tabBarItem});
return tabBarItem;
}
removeTabBarItem(tabBarItemOrIndex, options = {})
{
let tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
if (!tabBarItem || tabBarItem instanceof WI.PinnedTabBarItem)
return null;
if (this.normalTabCount === 1)
return null;
tabBarItem.parentTabBar = null;
if (this._selectedTabBarItem === tabBarItem) {
var index = this._tabBarItems.indexOf(tabBarItem);
var nextTabBarItem = this._tabBarItems[index + 1];
if (!nextTabBarItem || nextTabBarItem instanceof WI.PinnedTabBarItem)
nextTabBarItem = this._tabBarItems[index - 1];
this.selectedTabBarItem = nextTabBarItem;
}
if (this._tabContainer.classList.contains("animating")) {
requestAnimationFrame(removeStyles.bind(this));
options.suppressAnimations = true;
}
var beforeTabSizesAndPositions;
if (!options.suppressAnimations)
beforeTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
// Subtract 1 from normalTabCount since arrays begin indexing at 0.
let wasLastNormalTab = this._tabBarItems.indexOf(tabBarItem) === this.normalTabCount - 1;
this._tabBarItems.remove(tabBarItem);
tabBarItem.element.remove();
var hasMoreThanOneNormalTab = this._hasMoreThanOneNormalTab();
this._tabContainer.classList.toggle("single-tab", !hasMoreThanOneNormalTab);
if (!hasMoreThanOneNormalTab || wasLastNormalTab || !options.suppressExpansion) {
if (!options.suppressAnimations) {
this._tabAnimatedClosedSinceMouseEnter = true;
this._finishExpandingTabsAfterClose(beforeTabSizesAndPositions);
} else
this.needsLayout();
this.dispatchEventToListeners(WI.TabBar.Event.TabBarItemRemoved, {tabBarItem});
return tabBarItem;
}
var lastNormalTabBarItem;
function animateTabs()
{
this._tabContainer.classList.add("animating");
this._tabContainer.classList.add("closing-tab");
// For RTL, we need to place extra space between pinned tab and first normal tab.
// From left to right there is pinned tabs, extra space, then normal tabs. Compute
// how much extra space we need to additionally add for normal tab items.
let extraSpaceBetweenNormalAndPinnedTabs = 0;
if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL) {
extraSpaceBetweenNormalAndPinnedTabs = this._tabContainer.getBoundingClientRect().width;
for (let currentTabBarItem of this._tabBarItemsFromLeftToRight())
extraSpaceBetweenNormalAndPinnedTabs -= currentTabBarItem.element.getBoundingClientRect().width;
}
let left = 0;
for (let currentTabBarItem of this._tabBarItemsFromLeftToRight()) {
let sizeAndPosition = beforeTabSizesAndPositions.get(currentTabBarItem);
if (!(currentTabBarItem instanceof WI.PinnedTabBarItem)) {
currentTabBarItem.element.style.left = extraSpaceBetweenNormalAndPinnedTabs + left + "px";
left += sizeAndPosition.width;
lastNormalTabBarItem = currentTabBarItem;
} else
left = sizeAndPosition.left + sizeAndPosition.width;
}
// The selected tab and last tab need to draw a right border as well, so make them 1px wider.
if (this._selectedTabBarItem)
this._selectedTabBarItem.element.style.width = (parseFloat(this._selectedTabBarItem.element.style.width) + 1) + "px";
if (lastNormalTabBarItem !== this._selectedTabBarItem)
lastNormalTabBarItem.element.style.width = (parseFloat(lastNormalTabBarItem.element.style.width) + 1) + "px";
this._tabContainer.addEventListener("webkitTransitionEnd", removeStylesListener);
}
function removeStyles()
{
// The selected tab needs to stop drawing the right border, so make it 1px smaller. Only if it isn't the last.
if (this._selectedTabBarItem && this._selectedTabBarItem !== lastNormalTabBarItem)
this._selectedTabBarItem.element.style.width = (parseFloat(this._selectedTabBarItem.element.style.width) - 1) + "px";
this._tabContainer.classList.remove("animating");
this._tabContainer.classList.remove("closing-tab");
this.updateLayout();
this._tabContainer.removeEventListener("webkitTransitionEnd", removeStylesListener);
}
if (!options.suppressAnimations) {
this._tabContainer.classList.add("static-layout");
this._tabAnimatedClosedSinceMouseEnter = true;
this._applyTabBarItemSizesAndPositions(beforeTabSizesAndPositions);
var removeStylesListener = removeStyles.bind(this);
requestAnimationFrame(animateTabs.bind(this));
} else
this.needsLayout();
this.dispatchEventToListeners(WI.TabBar.Event.TabBarItemRemoved, {tabBarItem});
return tabBarItem;
}
selectPreviousTab()
{
if (this._tabBarItems.length <= 1)
return;
var startIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
var newIndex = startIndex;
do {
if (newIndex === 0)
newIndex = this._tabBarItems.length - 1;
else
newIndex--;
if (!(this._tabBarItems[newIndex] instanceof WI.PinnedTabBarItem))
break;
} while (newIndex !== startIndex);
if (newIndex === startIndex)
return;
this.selectedTabBarItem = this._tabBarItems[newIndex];
}
selectNextTab()
{
if (this._tabBarItems.length <= 1)
return;
var startIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
var newIndex = startIndex;
do {
if (newIndex === this._tabBarItems.length - 1)
newIndex = 0;
else
newIndex++;
if (!(this._tabBarItems[newIndex] instanceof WI.PinnedTabBarItem))
break;
} while (newIndex !== startIndex);
if (newIndex === startIndex)
return;
this.selectedTabBarItem = this._tabBarItems[newIndex];
}
get selectedTabBarItem()
{
return this._selectedTabBarItem;
}
set selectedTabBarItem(tabBarItemOrIndex)
{
this.selectTabBarItem(tabBarItemOrIndex);
}
selectTabBarItem(tabBarItemOrIndex, options = {})
{
let tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
if (tabBarItem === this._tabPickerTabBarItem) {
// Get the last normal tab item if the item is not selectable.
tabBarItem = this._tabBarItems[this.normalTabCount - 1];
}
if (this._selectedTabBarItem === tabBarItem)
return;
let previousTabBarItem = this._selectedTabBarItem;
if (this._selectedTabBarItem)
this._selectedTabBarItem.selected = false;
this._selectedTabBarItem = tabBarItem || null;
if (this._selectedTabBarItem) {
this._selectedTabBarItem.selected = true;
if (this._selectedTabBarItem.hidden)
this.needsLayout();
}
let initiatorHint = options.initiatorHint || WI.TabBrowser.TabNavigationInitiator.Unknown;
this.dispatchEventToListeners(WI.TabBar.Event.TabBarItemSelected, {previousTabBarItem, initiatorHint});
}
get tabBarItems()
{
return this._tabBarItems;
}
get tabCount()
{
return this._tabBarItems.filter((item) => item.representedObject instanceof WI.TabContentView).length;
}
get normalTabCount()
{
return this._tabBarItems.filter((item) => !(item instanceof WI.PinnedTabBarItem)).length;
}
resetCachedWidths()
{
for (let tabBarItem of this._tabBarItems)
tabBarItem[WI.TabBar.CachedWidthSymbol] = 0;
}
// Protected
layout()
{
if (this._tabContainer.classList.contains("static-layout"))
return;
const tabBarHorizontalPadding = WI.TabBar.horizontalPadding;
const tabBarItemHorizontalMargin = WI.TabBarItem.horizontalMargin;
let undocked = WI.dockConfiguration === WI.DockConfiguration.Undocked;
function measureWidth(tabBarItem) {
if (!tabBarItem[WI.TabBar.CachedWidthSymbol])
tabBarItem[WI.TabBar.CachedWidthSymbol] = tabBarItem.element.realOffsetWidth + tabBarItemHorizontalMargin;
return tabBarItem[WI.TabBar.CachedWidthSymbol];
}
let availableSpace = this._tabContainer.realOffsetWidth - tabBarHorizontalPadding;
this._tabContainer.classList.add("calculate-width");
this._hiddenTabBarItems = [];
let normalTabBarItems = [];
for (let tabBarItem of this._tabBarItemsFromLeftToRight()) {
if (tabBarItem === this._tabPickerTabBarItem) {
tabBarItem.hidden = true;
continue;
}
tabBarItem.hidden = false;
if (tabBarItem instanceof WI.PinnedTabBarItem) {
availableSpace -= measureWidth(tabBarItem);
continue;
}
normalTabBarItems.push(tabBarItem);
// When undocked, `WI.TabBarItem` grow to fill any available space. As a result, if a
// `WI.TabBarItem` is added or removed, the width of all `WI.TabBarItem` will change.
if (undocked)
tabBarItem[WI.TabBar.CachedWidthSymbol] = 0;
}
// Wait to measure widths until all `WI.TabBarItem` are un-hidden for the reason above.
let normalTabBarItemsWidth = normalTabBarItems.reduce((accumulator, tabBarItem) => accumulator + measureWidth(tabBarItem), 0);
if (Math.round(normalTabBarItemsWidth) >= Math.floor(availableSpace)) {
this._tabPickerTabBarItem.hidden = false;
availableSpace -= measureWidth(this._tabPickerTabBarItem);
let index = normalTabBarItems.length - 1;
do {
let tabBarItem = normalTabBarItems[index];
if (tabBarItem === this._selectedTabBarItem)
continue;
normalTabBarItemsWidth -= measureWidth(tabBarItem);
tabBarItem.hidden = true;
this._hiddenTabBarItems.push(tabBarItem);
} while (normalTabBarItemsWidth >= availableSpace && --index >= 0);
}
// Tabs are marked as hidden from right to left, meaning that the right-most item will be
// first in the list. Reverse the list so that the right-most item is last.
this._hiddenTabBarItems.reverse();
this._tabContainer.classList.remove("calculate-width");
}
didLayoutSubtree()
{
super.didLayoutSubtree();
this._tabContainer.classList.toggle("hide-border-start", this._navigationBarBefore.navigationItems.every((item) => item.hidden));
this._tabContainer.classList.toggle("hide-border-end", this._navigationBarAfter.navigationItems.every((item) => item.hidden));
}
// Private
_tabBarItemsFromLeftToRight()
{
return WI.resolvedLayoutDirection() === WI.LayoutDirection.LTR ? this._tabBarItems : this._tabBarItems.slice().reverse();
}
_findTabBarItem(tabBarItemOrIndex)
{
if (typeof tabBarItemOrIndex === "number")
return this._tabBarItems[tabBarItemOrIndex] || null;
if (tabBarItemOrIndex instanceof WI.TabBarItem) {
if (this._tabBarItems.includes(tabBarItemOrIndex))
return tabBarItemOrIndex;
}
return null;
}
_hasMoreThanOneNormalTab()
{
let normalTabCount = 0;
for (let tabBarItem of this._tabBarItems) {
if (tabBarItem instanceof WI.PinnedTabBarItem)
continue;
++normalTabCount;
if (normalTabCount >= 2)
return true;
}
return false;
}
_recordTabBarItemSizesAndPositions()
{
const tabBarItemLeftMargin = WI.TabBarItem.horizontalMargin / 2;
var tabBarItemSizesAndPositions = new Map;
let barRect = this._tabContainer.getBoundingClientRect();
function add(key, element, leftMargin) {
let boundingRect = element.getBoundingClientRect();
tabBarItemSizesAndPositions.set(key, {
left: boundingRect.left - barRect.left - leftMargin,
width: boundingRect.width,
});
}
add(this._flexibleSpaceBeforeElement, this._flexibleSpaceBeforeElement, 0);
add(this._flexibleSpaceAfterElement, this._flexibleSpaceAfterElement, 0);
for (let tabBarItem of this._tabBarItems) {
if (tabBarItem.hidden)
continue;
add(tabBarItem, tabBarItem.element, tabBarItemLeftMargin);
}
return tabBarItemSizesAndPositions;
}
_applyTabBarItemSizesAndPositions(tabBarItemSizesAndPositions, skipTabBarItem)
{
for (var [tabBarItem, sizeAndPosition] of tabBarItemSizesAndPositions) {
if (skipTabBarItem && tabBarItem === skipTabBarItem)
continue;
let isFlexibleSpace = tabBarItem === this._flexibleSpaceBeforeElement || tabBarItem === this._flexibleSpaceAfterElement;
let element = isFlexibleSpace ? tabBarItem : tabBarItem.element;
element.style.left = sizeAndPosition.left + "px";
element.style.width = sizeAndPosition.width + "px";
}
}
_clearTabBarItemSizesAndPositions(skipTabBarItem)
{
this._flexibleSpaceBeforeElement.style.left = null;
this._flexibleSpaceBeforeElement.style.width = null;
this._flexibleSpaceAfterElement.style.left = null;
this._flexibleSpaceAfterElement.style.width = null;
for (var tabBarItem of this._tabBarItems) {
if (skipTabBarItem && tabBarItem === skipTabBarItem)
continue;
tabBarItem.element.style.left = null;
tabBarItem.element.style.width = null;
}
}
_finishExpandingTabsAfterClose(beforeTabSizesAndPositions)
{
return new Promise(function(resolve, reject) {
console.assert(this._tabAnimatedClosedSinceMouseEnter);
this._tabAnimatedClosedSinceMouseEnter = false;
if (!beforeTabSizesAndPositions)
beforeTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
this._tabContainer.classList.remove("static-layout");
this._clearTabBarItemSizesAndPositions();
var afterTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
this._applyTabBarItemSizesAndPositions(beforeTabSizesAndPositions);
this._tabContainer.classList.add("static-layout");
function animateTabs()
{
this._tabContainer.classList.add("static-layout");
this._tabContainer.classList.add("animating");
this._tabContainer.classList.add("expanding-tabs");
this._applyTabBarItemSizesAndPositions(afterTabSizesAndPositions);
this._tabContainer.addEventListener("webkitTransitionEnd", removeStylesListener);
}
function removeStyles()
{
this._tabContainer.classList.remove("static-layout");
this._tabContainer.classList.remove("animating");
this._tabContainer.classList.remove("expanding-tabs");
this._clearTabBarItemSizesAndPositions();
this.updateLayout();
this._tabContainer.removeEventListener("webkitTransitionEnd", removeStylesListener);
resolve();
}
var removeStylesListener = removeStyles.bind(this);
requestAnimationFrame(animateTabs.bind(this));
}.bind(this));
}
_handleMouseDown(event)
{
if (event.button !== 0 || event.ctrlKey)
return;
if (event.target !== this.element && event.target !== this._flexibleSpaceBeforeElement && event.target !== this._flexibleSpaceAfterElement)
return;
switch (WI.dockConfiguration) {
case WI.DockConfiguration.Bottom:
WI.resizeDockedFrameMouseDown(event);
break;
case WI.DockConfiguration.Undocked:
WI.moveUndockedWindowMouseDown(event);
break;
}
}
_handleTabContainerMouseDown(event)
{
// Only consider left mouse clicks for tab movement.
if (event.button !== 0 || event.ctrlKey)
return;
let itemElement = event.target.closest("." + WI.TabBarItem.StyleClassName);
if (!itemElement)
return;
let tabBarItem = itemElement[WI.TabBarItem.ElementReferenceSymbol];
if (!tabBarItem)
return;
if (tabBarItem.disabled)
return;
if (tabBarItem === this._tabPickerTabBarItem) {
if (!this._hiddenTabBarItems.length)
return;
if (this._ignoreTabPickerMouseDown)
return;
this._ignoreTabPickerMouseDown = true;
let contextMenu = WI.ContextMenu.createFromEvent(event);
contextMenu.addBeforeShowCallback(() => {
this._ignoreTabPickerMouseDown = false;
});
for (let item of this._hiddenTabBarItems) {
contextMenu.appendItem(item.displayName, () => {
this.selectTabBarItem(item, {
initiator: WI.TabBrowser.TabNavigationInitiator.ContextMenu
});
});
}
contextMenu.show();
return;
}
this.selectTabBarItem(tabBarItem, {
initiatorHint: WI.TabBrowser.TabNavigationInitiator.TabClick
});
if (tabBarItem instanceof WI.PinnedTabBarItem || !this._hasMoreThanOneNormalTab())
return;
this._firstNormalTabItemIndex = 0;
for (let i = 0; i < this._tabBarItems.length; ++i) {
if (this._tabBarItems[i] instanceof WI.PinnedTabBarItem)
continue;
this._firstNormalTabItemIndex = i;
break;
}
this._mouseDownPageX = event.pageX;
this._mouseMovedEventListener = this._handleMouseMoved.bind(this);
this._mouseUpEventListener = this._handleMouseUp.bind(this);
// Register these listeners on the document so we can track the mouse if it leaves the tab bar.
document.addEventListener("mousemove", this._mouseMovedEventListener, true);
document.addEventListener("mouseup", this._mouseUpEventListener, true);
event.preventDefault();
event.stopPropagation();
}
_handleTabContainerClick(event)
{
var itemElement = event.target.closest("." + WI.TabBarItem.StyleClassName);
if (!itemElement)
return;
var tabBarItem = itemElement[WI.TabBarItem.ElementReferenceSymbol];
if (!tabBarItem)
return;
if (tabBarItem.disabled)
return;
if (event.button === 1) {
// Disallow closing the only tab.
if (this._tabContainer.classList.contains("single-tab"))
return;
if (!event.altKey) {
let options = {
suppressExpansion: true,
initiatorHint: WI.TabBrowser.TabNavigationInitiator.TabClick,
};
this.removeTabBarItem(tabBarItem, options);
return;
}
for (let i = this._tabBarItems.length - 1; i >= 0; --i) {
let item = this._tabBarItems[i];
if (item === tabBarItem || item instanceof WI.PinnedTabBarItem)
continue;
this.removeTabBarItem(item);
}
}
}
_handleMouseMoved(event)
{
console.assert(event.button === 0);
console.assert(typeof this._mouseDownPageX === "number" && !isNaN(this._mouseDownPageX));
if (isNaN(this._mouseDownPageX))
return;
console.assert(this._selectedTabBarItem);
if (!this._selectedTabBarItem)
return;
if (this._mouseOffset === undefined)
this._mouseOffset = event.pageX - this._selectedTabBarItem.element.totalOffsetLeft;
if (!this._isDragging) {
const dragThreshold = 12;
if (Math.abs(this._mouseDownPageX - event.pageX) < dragThreshold)
return;
this._isDragging = true;
}
const tabBarLeftPadding = WI.TabBar.horizontalPadding / 2;
const tabBarItemHorizontalMargin = WI.TabBarItem.horizontalMargin;
event.preventDefault();
event.stopPropagation();
if (!this._tabContainer.classList.contains("static-layout")) {
this._applyTabBarItemSizesAndPositions(this._recordTabBarItemSizesAndPositions());
this._tabContainer.classList.add("static-layout");
this._tabContainer.classList.add("dragging-tab");
}
let containerOffset = this._tabContainer.totalOffsetLeft;
let tabBarMouseOffset = event.pageX - containerOffset;
var newLeft = tabBarMouseOffset - this._mouseOffset;
this._selectedTabBarItem.element.style.left = newLeft + "px";
let selectedTabMidX = containerOffset + newLeft + ((this._selectedTabBarItem.element.realOffsetWidth + tabBarItemHorizontalMargin) / 2);
var currentIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
var newIndex = currentIndex;
for (let tabBarItem of this._tabBarItems) {
if (tabBarItem.hidden)
continue;
if (tabBarItem === this._selectedTabBarItem)
continue;
var tabBarItemRect = tabBarItem.element.getBoundingClientRect();
if (selectedTabMidX < tabBarItemRect.left || selectedTabMidX > tabBarItemRect.right)
continue;
newIndex = this._tabBarItems.indexOf(tabBarItem);
break;
}
// Subtract 1 from normalTabCount since arrays begin indexing at 0.
newIndex = Number.constrain(newIndex, this._firstNormalTabItemIndex, this.normalTabCount - 1);
if (currentIndex === newIndex)
return;
this._tabBarItems.splice(currentIndex, 1);
this._tabBarItems.splice(newIndex, 0, this._selectedTabBarItem);
let nextSibling = this._tabBarItems[newIndex + 1];
let nextSiblingElement = nextSibling ? nextSibling.element : null;
this._tabContainer.insertBefore(this._selectedTabBarItem.element, nextSiblingElement);
// FIXME: Animate the tabs that move to make room for the selected tab. This was causing me trouble when I tried.
let isLTR = WI.resolvedLayoutDirection() === WI.LayoutDirection.LTR;
function inlineStyleValue(element, property) {
return element.style.getPropertyCSSValue(property).getFloatValue(CSSPrimitiveValue.CSS_PX) || 0;
}
let offsetAfter = inlineStyleValue(this._flexibleSpaceAfterElement, "width");
let accumulatedLeft = isLTR ? (inlineStyleValue(this._flexibleSpaceBeforeElement, "width") + inlineStyleValue(this._flexibleSpaceBeforeElement, "left")) : tabBarLeftPadding;
for (let tabBarItem of this._tabBarItemsFromLeftToRight()) {
if (tabBarItem.hidden)
continue;
if (tabBarItem !== this._selectedTabBarItem && inlineStyleValue(tabBarItem.element, "left") !== accumulatedLeft) {
let left = accumulatedLeft;
if (isLTR) {
if (tabBarItem instanceof WI.PinnedTabBarItem && tabBarItem !== this._tabPickerTabBarItem)
left += offsetAfter;
} else {
if (!(tabBarItem instanceof WI.PinnedTabBarItem) || tabBarItem === this._tabPickerTabBarItem)
left += offsetAfter;
}
tabBarItem.element.style.left = left + "px";
}
accumulatedLeft += inlineStyleValue(tabBarItem.element, "width") + tabBarItemHorizontalMargin;
}
}
_handleMouseUp(event)
{
console.assert(event.button === 0);
console.assert(typeof this._mouseDownPageX === "number" && !isNaN(this._mouseDownPageX));
if (isNaN(this._mouseDownPageX))
return;
this._tabContainer.classList.remove("dragging-tab");
if (!this._tabAnimatedClosedSinceMouseEnter) {
this._tabContainer.classList.remove("static-layout");
this._clearTabBarItemSizesAndPositions();
} else {
let left = 0;
for (let tabBarItem of this._tabBarItemsFromLeftToRight()) {
if (tabBarItem === this._selectedTabBarItem)
tabBarItem.element.style.left = left + "px";
left += parseFloat(tabBarItem.element.style.width);
}
}
this._isDragging = false;
this._mouseDownPageX = NaN;
this._mouseOffset = undefined;
document.removeEventListener("mousemove", this._mouseMovedEventListener, true);
document.removeEventListener("mouseup", this._mouseUpEventListener, true);
this._mouseMovedEventListener = null;
this._mouseUpEventListener = null;
event.preventDefault();
event.stopPropagation();
this.dispatchEventToListeners(WI.TabBar.Event.TabBarItemsReordered);
}
_handleTabContainerMouseLeave(event)
{
if (!isNaN(this._mouseDownPageX) || !this._tabAnimatedClosedSinceMouseEnter || !this._tabContainer.classList.contains("static-layout") || this._tabContainer.classList.contains("animating"))
return;
// This event can still fire when the mouse is inside the element if DOM nodes are added, removed or generally change inside.
// Check if the mouse really did leave the element by checking the bounds.
// FIXME: Is this a WebKit bug or correct behavior?
let barRect = this._tabContainer.getBoundingClientRect();
if (event.pageY > barRect.top && event.pageY < barRect.bottom && event.pageX > barRect.left && event.pageX < barRect.right)
return;
this._finishExpandingTabsAfterClose();
}
_handleTabContainerContextMenu(event)
{
let contextMenu = WI.ContextMenu.createFromEvent(event);
for (let tabClass of WI.knownTabClasses()) {
if (!tabClass.isTabAllowed() || !tabClass.shouldSaveTab())
continue;
let openTabBarItem = null;
for (let tabBarItem of this._tabBarItems) {
let tabContentView = tabBarItem.representedObject;
if (!(tabContentView instanceof WI.TabContentView))
continue;
if (tabContentView.type === tabClass.Type) {
openTabBarItem = tabBarItem;
break;
}
}
let checked = !!openTabBarItem;
let disabled = checked && this.normalTabCount === 1;
contextMenu.appendCheckboxItem(tabClass.tabInfo().displayName, () => {
if (openTabBarItem)
this.removeTabBarItem(openTabBarItem);
else
WI.createNewTabWithType(tabClass.Type, {shouldShowNewTab: true});
}, checked, disabled);
}
}
};
WI.TabBar.CachedWidthSymbol = Symbol("cached-width");
WI.TabBar.Event = {
TabBarItemSelected: "tab-bar-tab-bar-item-selected",
TabBarItemAdded: "tab-bar-tab-bar-item-added",
TabBarItemRemoved: "tab-bar-tab-bar-item-removed",
TabBarItemsReordered: "tab-bar-tab-bar-items-reordered",
};