diff options
Diffstat (limited to 'browser/base/content/tabbrowser-tabs.js')
| -rw-r--r-- | browser/base/content/tabbrowser-tabs.js | 2172 |
1 files changed, 2172 insertions, 0 deletions
diff --git a/browser/base/content/tabbrowser-tabs.js b/browser/base/content/tabbrowser-tabs.js new file mode 100644 index 0000000000..06c2479886 --- /dev/null +++ b/browser/base/content/tabbrowser-tabs.js @@ -0,0 +1,2172 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* eslint-env mozilla/browser-window */ + +"use strict"; + +// This is loaded into all browser windows. Wrap in a block to prevent +// leaking to window scope. +{ + class MozTabbrowserTabs extends MozElements.TabsBase { + constructor() { + super(); + + this.addEventListener("TabSelect", this); + this.addEventListener("TabClose", this); + this.addEventListener("TabAttrModified", this); + this.addEventListener("TabHide", this); + this.addEventListener("TabShow", this); + this.addEventListener("TabPinned", this); + this.addEventListener("TabUnpinned", this); + this.addEventListener("transitionend", this); + this.addEventListener("dblclick", this); + this.addEventListener("click", this); + this.addEventListener("click", this, true); + this.addEventListener("keydown", this, { mozSystemGroup: true }); + this.addEventListener("dragstart", this); + this.addEventListener("dragover", this); + this.addEventListener("drop", this); + this.addEventListener("dragend", this); + this.addEventListener("dragleave", this); + } + + init() { + this.arrowScrollbox = this.querySelector("arrowscrollbox"); + this.arrowScrollbox.addEventListener("wheel", this, true); + + this.baseConnect(); + + this._blockDblClick = false; + this._tabDropIndicator = this.querySelector(".tab-drop-indicator"); + this._dragOverDelay = 350; + this._dragTime = 0; + this._closeButtonsUpdatePending = false; + this._closingTabsSpacer = this.querySelector(".closing-tabs-spacer"); + this._tabDefaultMaxWidth = NaN; + this._lastTabClosedByMouse = false; + this._hasTabTempMaxWidth = false; + this._scrollButtonWidth = 0; + this._lastNumPinned = 0; + this._pinnedTabsLayoutCache = null; + this._animateElement = this.arrowScrollbox; + this._tabClipWidth = Services.prefs.getIntPref( + "browser.tabs.tabClipWidth" + ); + this._hiddenSoundPlayingTabs = new Set(); + this._allTabs = null; + this._visibleTabs = null; + + var tab = this.allTabs[0]; + tab.label = this.emptyTabTitle; + + // Hide the secondary text for locales where it is unsupported due to size constraints. + const language = Services.locale.appLocaleAsBCP47; + const unsupportedLocales = Services.prefs.getCharPref( + "browser.tabs.secondaryTextUnsupportedLocales" + ); + this.toggleAttribute( + "secondarytext-unsupported", + unsupportedLocales.split(",").includes(language.split("-")[0]) + ); + + this.newTabButton.setAttribute( + "aria-label", + GetDynamicShortcutTooltipText("tabs-newtab-button") + ); + + let handleResize = () => { + this._updateCloseButtons(); + this._handleTabSelect(true); + }; + window.addEventListener("resize", handleResize); + this._fullscreenMutationObserver = new MutationObserver(handleResize); + this._fullscreenMutationObserver.observe(document.documentElement, { + attributeFilter: ["inFullscreen", "inDOMFullscreen"], + }); + + this.boundObserve = (...args) => this.observe(...args); + Services.prefs.addObserver("privacy.userContext", this.boundObserve); + this.observe(null, "nsPref:changed", "privacy.userContext.enabled"); + + XPCOMUtils.defineLazyPreferenceGetter( + this, + "_tabMinWidthPref", + "browser.tabs.tabMinWidth", + null, + (pref, prevValue, newValue) => (this._tabMinWidth = newValue), + newValue => { + const LIMIT = 50; + return Math.max(newValue, LIMIT); + } + ); + + this._tabMinWidth = this._tabMinWidthPref; + + this._setPositionalAttributes(); + + CustomizableUI.addListener(this); + this._updateNewTabVisibility(); + this._initializeArrowScrollbox(); + + XPCOMUtils.defineLazyPreferenceGetter( + this, + "_closeTabByDblclick", + "browser.tabs.closeTabByDblclick", + false + ); + + if (gMultiProcessBrowser) { + this.tabbox.tabpanels.setAttribute("async", "true"); + } + } + + on_TabSelect(event) { + this._handleTabSelect(); + } + + on_TabClose(event) { + this._hiddenSoundPlayingStatusChanged(event.target, { closed: true }); + } + + on_TabAttrModified(event) { + if ( + ["soundplaying", "muted", "activemedia-blocked", "sharing"].some(attr => + event.detail.changed.includes(attr) + ) + ) { + this.updateTabIndicatorAttr(event.target); + } + + if ( + event.detail.changed.includes("soundplaying") && + event.target.hidden + ) { + this._hiddenSoundPlayingStatusChanged(event.target); + } + } + + on_TabHide(event) { + if (event.target.soundPlaying) { + this._hiddenSoundPlayingStatusChanged(event.target); + } + } + + on_TabShow(event) { + if (event.target.soundPlaying) { + this._hiddenSoundPlayingStatusChanged(event.target); + } + } + + on_TabPinned(event) { + this.updateTabIndicatorAttr(event.target); + } + + on_TabUnpinned(event) { + this.updateTabIndicatorAttr(event.target); + } + + on_transitionend(event) { + if (event.propertyName != "max-width") { + return; + } + + let tab = event.target ? event.target.closest("tab") : null; + + if (tab.getAttribute("fadein") == "true") { + if (tab._fullyOpen) { + this._updateCloseButtons(); + } else { + this._handleNewTab(tab); + } + } else if (tab.closing) { + gBrowser._endRemoveTab(tab); + } + + let evt = new CustomEvent("TabAnimationEnd", { bubbles: true }); + tab.dispatchEvent(evt); + } + + on_dblclick(event) { + // When the tabbar has an unified appearance with the titlebar + // and menubar, a double-click in it should have the same behavior + // as double-clicking the titlebar + if (TabsInTitlebar.enabled) { + return; + } + + if (event.button != 0 || event.originalTarget.localName != "scrollbox") { + return; + } + + if (!this._blockDblClick) { + BrowserOpenTab(); + } + + event.preventDefault(); + } + + on_click(event) { + if (event.eventPhase == Event.CAPTURING_PHASE && event.button == 0) { + /* Catches extra clicks meant for the in-tab close button. + * Placed here to avoid leaking (a temporary handler added from the + * in-tab close button binding would close over the tab and leak it + * until the handler itself was removed). (bug 897751) + * + * The only sequence in which a second click event (i.e. dblclik) + * can be dispatched on an in-tab close button is when it is shown + * after the first click (i.e. the first click event was dispatched + * on the tab). This happens when we show the close button only on + * the active tab. (bug 352021) + * The only sequence in which a third click event can be dispatched + * on an in-tab close button is when the tab was opened with a + * double click on the tabbar. (bug 378344) + * In both cases, it is most likely that the close button area has + * been accidentally clicked, therefore we do not close the tab. + * + * We don't want to ignore processing of more than one click event, + * though, since the user might actually be repeatedly clicking to + * close many tabs at once. + */ + let target = event.originalTarget; + if (target.classList.contains("tab-close-button")) { + // We preemptively set this to allow the closing-multiple-tabs- + // in-a-row case. + if (this._blockDblClick) { + target._ignoredCloseButtonClicks = true; + } else if (event.detail > 1 && !target._ignoredCloseButtonClicks) { + target._ignoredCloseButtonClicks = true; + event.stopPropagation(); + return; + } else { + // Reset the "ignored click" flag + target._ignoredCloseButtonClicks = false; + } + } + + /* Protects from close-tab-button errant doubleclick: + * Since we're removing the event target, if the user + * double-clicks the button, the dblclick event will be dispatched + * with the tabbar as its event target (and explicit/originalTarget), + * which treats that as a mouse gesture for opening a new tab. + * In this context, we're manually blocking the dblclick event. + */ + if (this._blockDblClick) { + if (!("_clickedTabBarOnce" in this)) { + this._clickedTabBarOnce = true; + return; + } + delete this._clickedTabBarOnce; + this._blockDblClick = false; + } + } else if ( + event.eventPhase == Event.BUBBLING_PHASE && + event.button == 1 + ) { + let tab = event.target ? event.target.closest("tab") : null; + if (tab) { + if (tab.multiselected) { + gBrowser.removeMultiSelectedTabs(); + } else { + gBrowser.removeTab(tab, { + animate: true, + triggeringEvent: event, + }); + } + } else if (event.originalTarget.closest("scrollbox")) { + // The user middleclicked on the tabstrip. Check whether the click + // was dispatched on the open space of it. + let visibleTabs = this._getVisibleTabs(); + let lastTab = visibleTabs[visibleTabs.length - 1]; + let winUtils = window.windowUtils; + let endOfTab = + winUtils.getBoundsWithoutFlushing(lastTab)[ + RTL_UI ? "left" : "right" + ]; + if ( + (!RTL_UI && event.clientX > endOfTab) || + (RTL_UI && event.clientX < endOfTab) + ) { + BrowserOpenTab(); + } + } else { + return; + } + + event.preventDefault(); + event.stopPropagation(); + } + } + + on_keydown(event) { + let { altKey, shiftKey } = event; + let [accel, nonAccel] = + AppConstants.platform == "macosx" + ? [event.metaKey, event.ctrlKey] + : [event.ctrlKey, event.metaKey]; + + let keyComboForMove = accel && shiftKey && !altKey && !nonAccel; + let keyComboForFocus = accel && !shiftKey && !altKey && !nonAccel; + + if (!keyComboForMove && !keyComboForFocus) { + return; + } + + // Don't check if the event was already consumed because tab navigation + // should work always for better user experience. + let { visibleTabs, selectedTab } = gBrowser; + let { arrowKeysShouldWrap } = this; + let focusedTabIndex = this.ariaFocusedIndex; + if (focusedTabIndex == -1) { + focusedTabIndex = visibleTabs.indexOf(selectedTab); + } + let lastFocusedTabIndex = focusedTabIndex; + switch (event.keyCode) { + case KeyEvent.DOM_VK_UP: + if (keyComboForMove) { + gBrowser.moveTabBackward(); + } else { + focusedTabIndex--; + } + break; + case KeyEvent.DOM_VK_DOWN: + if (keyComboForMove) { + gBrowser.moveTabForward(); + } else { + focusedTabIndex++; + } + break; + case KeyEvent.DOM_VK_RIGHT: + case KeyEvent.DOM_VK_LEFT: + if (keyComboForMove) { + gBrowser.moveTabOver(event); + } else if ( + (!RTL_UI && event.keyCode == KeyEvent.DOM_VK_RIGHT) || + (RTL_UI && event.keyCode == KeyEvent.DOM_VK_LEFT) + ) { + focusedTabIndex++; + } else { + focusedTabIndex--; + } + break; + case KeyEvent.DOM_VK_HOME: + if (keyComboForMove) { + gBrowser.moveTabToStart(); + } else { + focusedTabIndex = 0; + } + break; + case KeyEvent.DOM_VK_END: + if (keyComboForMove) { + gBrowser.moveTabToEnd(); + } else { + focusedTabIndex = visibleTabs.length - 1; + } + break; + case KeyEvent.DOM_VK_SPACE: + if (visibleTabs[lastFocusedTabIndex].multiselected) { + gBrowser.removeFromMultiSelectedTabs( + visibleTabs[lastFocusedTabIndex] + ); + } else { + gBrowser.addToMultiSelectedTabs(visibleTabs[lastFocusedTabIndex]); + } + break; + default: + // Consume the keydown event for the above keyboard + // shortcuts only. + return; + } + + if (arrowKeysShouldWrap) { + if (focusedTabIndex >= visibleTabs.length) { + focusedTabIndex = 0; + } else if (focusedTabIndex < 0) { + focusedTabIndex = visibleTabs.length - 1; + } + } else { + focusedTabIndex = Math.min( + visibleTabs.length - 1, + Math.max(0, focusedTabIndex) + ); + } + + if (keyComboForFocus && focusedTabIndex != lastFocusedTabIndex) { + this.ariaFocusedItem = visibleTabs[focusedTabIndex]; + } + + event.preventDefault(); + } + + on_dragstart(event) { + var tab = this._getDragTargetTab(event); + if (!tab || this._isCustomizing) { + return; + } + + this.startTabDrag(event, tab); + } + + startTabDrag(event, tab, { fromTabList = false } = {}) { + let selectedTabs = gBrowser.selectedTabs; + let otherSelectedTabs = selectedTabs.filter( + selectedTab => selectedTab != tab + ); + let dataTransferOrderedTabs = [tab].concat(otherSelectedTabs); + + let dt = event.dataTransfer; + for (let i = 0; i < dataTransferOrderedTabs.length; i++) { + let dtTab = dataTransferOrderedTabs[i]; + + dt.mozSetDataAt(TAB_DROP_TYPE, dtTab, i); + let dtBrowser = dtTab.linkedBrowser; + + // We must not set text/x-moz-url or text/plain data here, + // otherwise trying to detach the tab by dropping it on the desktop + // may result in an "internet shortcut" + dt.mozSetDataAt( + "text/x-moz-text-internal", + dtBrowser.currentURI.spec, + i + ); + } + + // Set the cursor to an arrow during tab drags. + dt.mozCursor = "default"; + + // Set the tab as the source of the drag, which ensures we have a stable + // node to deliver the `dragend` event. See bug 1345473. + dt.addElement(tab); + + if (tab.multiselected) { + this._groupSelectedTabs(tab); + } + + // Create a canvas to which we capture the current tab. + // Until canvas is HiDPI-aware (bug 780362), we need to scale the desired + // canvas size (in CSS pixels) to the window's backing resolution in order + // to get a full-resolution drag image for use on HiDPI displays. + let scale = window.devicePixelRatio; + let canvas = this._dndCanvas; + if (!canvas) { + this._dndCanvas = canvas = document.createElementNS( + "http://www.w3.org/1999/xhtml", + "canvas" + ); + canvas.style.width = "100%"; + canvas.style.height = "100%"; + canvas.mozOpaque = true; + } + + canvas.width = 160 * scale; + canvas.height = 90 * scale; + let toDrag = canvas; + let dragImageOffset = -16; + let browser = tab.linkedBrowser; + if (gMultiProcessBrowser) { + var context = canvas.getContext("2d"); + context.fillStyle = "white"; + context.fillRect(0, 0, canvas.width, canvas.height); + + let captureListener; + let platform = AppConstants.platform; + // On Windows and Mac we can update the drag image during a drag + // using updateDragImage. On Linux, we can use a panel. + if (platform == "win" || platform == "macosx") { + captureListener = function () { + dt.updateDragImage(canvas, dragImageOffset, dragImageOffset); + }; + } else { + // Create a panel to use it in setDragImage + // which will tell xul to render a panel that follows + // the pointer while a dnd session is on. + if (!this._dndPanel) { + this._dndCanvas = canvas; + this._dndPanel = document.createXULElement("panel"); + this._dndPanel.className = "dragfeedback-tab"; + this._dndPanel.setAttribute("type", "drag"); + let wrapper = document.createElementNS( + "http://www.w3.org/1999/xhtml", + "div" + ); + wrapper.style.width = "160px"; + wrapper.style.height = "90px"; + wrapper.appendChild(canvas); + this._dndPanel.appendChild(wrapper); + document.documentElement.appendChild(this._dndPanel); + } + toDrag = this._dndPanel; + } + // PageThumb is async with e10s but that's fine + // since we can update the image during the dnd. + PageThumbs.captureToCanvas(browser, canvas) + .then(captureListener) + .catch(e => console.error(e)); + } else { + // For the non e10s case we can just use PageThumbs + // sync, so let's use the canvas for setDragImage. + PageThumbs.captureToCanvas(browser, canvas).catch(e => + console.error(e) + ); + dragImageOffset = dragImageOffset * scale; + } + dt.setDragImage(toDrag, dragImageOffset, dragImageOffset); + + // _dragData.offsetX/Y give the coordinates that the mouse should be + // positioned relative to the corner of the new window created upon + // dragend such that the mouse appears to have the same position + // relative to the corner of the dragged tab. + function clientX(ele) { + return ele.getBoundingClientRect().left; + } + let tabOffsetX = clientX(tab) - clientX(this); + tab._dragData = { + offsetX: event.screenX - window.screenX - tabOffsetX, + offsetY: event.screenY - window.screenY, + scrollX: this.arrowScrollbox.scrollbox.scrollLeft, + screenX: event.screenX, + movingTabs: (tab.multiselected ? gBrowser.selectedTabs : [tab]).filter( + t => t.pinned == tab.pinned + ), + fromTabList, + }; + + event.stopPropagation(); + + if (fromTabList) { + Services.telemetry.scalarAdd( + "browser.ui.interaction.all_tabs_panel_dragstart_tab_event_count", + 1 + ); + } + } + + on_dragover(event) { + var effects = this.getDropEffectForTabDrag(event); + + var ind = this._tabDropIndicator; + if (effects == "" || effects == "none") { + ind.hidden = true; + return; + } + event.preventDefault(); + event.stopPropagation(); + + var arrowScrollbox = this.arrowScrollbox; + + // autoscroll the tab strip if we drag over the scroll + // buttons, even if we aren't dragging a tab, but then + // return to avoid drawing the drop indicator + var pixelsToScroll = 0; + if (this.getAttribute("overflow") == "true") { + switch (event.originalTarget) { + case arrowScrollbox._scrollButtonUp: + pixelsToScroll = arrowScrollbox.scrollIncrement * -1; + break; + case arrowScrollbox._scrollButtonDown: + pixelsToScroll = arrowScrollbox.scrollIncrement; + break; + } + if (pixelsToScroll) { + arrowScrollbox.scrollByPixels( + (RTL_UI ? -1 : 1) * pixelsToScroll, + true + ); + } + } + + let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0); + if ( + (effects == "move" || effects == "copy") && + this == draggedTab.container && + !draggedTab._dragData.fromTabList + ) { + ind.hidden = true; + + if (!this._isGroupTabsAnimationOver()) { + // Wait for grouping tabs animation to finish + return; + } + this._finishGroupSelectedTabs(draggedTab); + + if (effects == "move") { + this._animateTabMove(event); + return; + } + } + + this._finishAnimateTabMove(); + + if (effects == "link") { + let tab = this._getDragTargetTab(event, { ignoreTabSides: true }); + if (tab) { + if (!this._dragTime) { + this._dragTime = Date.now(); + } + if (Date.now() >= this._dragTime + this._dragOverDelay) { + this.selectedItem = tab; + } + ind.hidden = true; + return; + } + } + + var rect = arrowScrollbox.getBoundingClientRect(); + var newMargin; + if (pixelsToScroll) { + // if we are scrolling, put the drop indicator at the edge + // so that it doesn't jump while scrolling + let scrollRect = arrowScrollbox.scrollClientRect; + let minMargin = scrollRect.left - rect.left; + let maxMargin = Math.min( + minMargin + scrollRect.width, + scrollRect.right + ); + if (RTL_UI) { + [minMargin, maxMargin] = [ + this.clientWidth - maxMargin, + this.clientWidth - minMargin, + ]; + } + newMargin = pixelsToScroll > 0 ? maxMargin : minMargin; + } else { + let newIndex = this._getDropIndex(event); + let children = this.allTabs; + if (newIndex == children.length) { + let tabRect = this._getVisibleTabs().at(-1).getBoundingClientRect(); + if (RTL_UI) { + newMargin = rect.right - tabRect.left; + } else { + newMargin = tabRect.right - rect.left; + } + } else { + let tabRect = children[newIndex].getBoundingClientRect(); + if (RTL_UI) { + newMargin = rect.right - tabRect.right; + } else { + newMargin = tabRect.left - rect.left; + } + } + } + + ind.hidden = false; + newMargin += ind.clientWidth / 2; + if (RTL_UI) { + newMargin *= -1; + } + ind.style.transform = "translate(" + Math.round(newMargin) + "px)"; + } + + on_drop(event) { + var dt = event.dataTransfer; + var dropEffect = dt.dropEffect; + var draggedTab; + let movingTabs; + if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { + // tab copy or move + draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); + // not our drop then + if (!draggedTab) { + return; + } + movingTabs = draggedTab._dragData.movingTabs; + draggedTab.container._finishGroupSelectedTabs(draggedTab); + } + + this._tabDropIndicator.hidden = true; + event.stopPropagation(); + if (draggedTab && dropEffect == "copy") { + // copy the dropped tab (wherever it's from) + let newIndex = this._getDropIndex(event); + let draggedTabCopy; + for (let tab of movingTabs) { + let newTab = gBrowser.duplicateTab(tab); + gBrowser.moveTabTo(newTab, newIndex++); + if (tab == draggedTab) { + draggedTabCopy = newTab; + } + } + if (draggedTab.container != this || event.shiftKey) { + this.selectedItem = draggedTabCopy; + } + } else if (draggedTab && draggedTab.container == this) { + let oldTranslateX = Math.round(draggedTab._dragData.translateX); + let tabWidth = Math.round(draggedTab._dragData.tabWidth); + let translateOffset = oldTranslateX % tabWidth; + let newTranslateX = oldTranslateX - translateOffset; + if (oldTranslateX > 0 && translateOffset > tabWidth / 2) { + newTranslateX += tabWidth; + } else if (oldTranslateX < 0 && -translateOffset > tabWidth / 2) { + newTranslateX -= tabWidth; + } + + let dropIndex; + if (draggedTab._dragData.fromTabList) { + dropIndex = this._getDropIndex(event); + } else { + dropIndex = + "animDropIndex" in draggedTab._dragData && + draggedTab._dragData.animDropIndex; + } + let incrementDropIndex = true; + if (dropIndex && dropIndex > movingTabs[0]._tPos) { + dropIndex--; + incrementDropIndex = false; + } + + if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) { + for (let tab of movingTabs) { + tab.setAttribute("tabdrop-samewindow", "true"); + tab.style.transform = "translateX(" + newTranslateX + "px)"; + let postTransitionCleanup = () => { + tab.removeAttribute("tabdrop-samewindow"); + + this._finishAnimateTabMove(); + if (dropIndex !== false) { + gBrowser.moveTabTo(tab, dropIndex); + if (incrementDropIndex) { + dropIndex++; + } + } + + gBrowser.syncThrobberAnimations(tab); + }; + if (gReduceMotion) { + postTransitionCleanup(); + } else { + let onTransitionEnd = transitionendEvent => { + if ( + transitionendEvent.propertyName != "transform" || + transitionendEvent.originalTarget != tab + ) { + return; + } + tab.removeEventListener("transitionend", onTransitionEnd); + + postTransitionCleanup(); + }; + tab.addEventListener("transitionend", onTransitionEnd); + } + } + } else { + this._finishAnimateTabMove(); + if (dropIndex !== false) { + for (let tab of movingTabs) { + gBrowser.moveTabTo(tab, dropIndex); + if (incrementDropIndex) { + dropIndex++; + } + } + } + } + } else if (draggedTab) { + // Move the tabs. To avoid multiple tab-switches in the original window, + // the selected tab should be adopted last. + const dropIndex = this._getDropIndex(event); + let newIndex = dropIndex; + let selectedTab; + let indexForSelectedTab; + for (let i = 0; i < movingTabs.length; ++i) { + const tab = movingTabs[i]; + if (tab.selected) { + selectedTab = tab; + indexForSelectedTab = newIndex; + } else { + const newTab = gBrowser.adoptTab(tab, newIndex, tab == draggedTab); + if (newTab) { + ++newIndex; + } + } + } + if (selectedTab) { + const newTab = gBrowser.adoptTab( + selectedTab, + indexForSelectedTab, + selectedTab == draggedTab + ); + if (newTab) { + ++newIndex; + } + } + + // Restore tab selection + gBrowser.addRangeToMultiSelectedTabs( + gBrowser.tabs[dropIndex], + gBrowser.tabs[newIndex - 1] + ); + } else { + // Pass true to disallow dropping javascript: or data: urls + let links; + try { + links = browserDragAndDrop.dropLinks(event, true); + } catch (ex) {} + + if (!links || links.length === 0) { + return; + } + + let inBackground = Services.prefs.getBoolPref( + "browser.tabs.loadInBackground" + ); + if (event.shiftKey) { + inBackground = !inBackground; + } + + let targetTab = this._getDragTargetTab(event, { ignoreTabSides: true }); + let userContextId = this.selectedItem.getAttribute("usercontextid"); + let replace = !!targetTab; + let newIndex = this._getDropIndex(event); + let urls = links.map(link => link.url); + let csp = browserDragAndDrop.getCsp(event); + let triggeringPrincipal = + browserDragAndDrop.getTriggeringPrincipal(event); + + (async () => { + if ( + urls.length >= + Services.prefs.getIntPref("browser.tabs.maxOpenBeforeWarn") + ) { + // Sync dialog cannot be used inside drop event handler. + let answer = await OpenInTabsUtils.promiseConfirmOpenInTabs( + urls.length, + window + ); + if (!answer) { + return; + } + } + + gBrowser.loadTabs(urls, { + inBackground, + replace, + allowThirdPartyFixup: true, + targetTab, + newIndex, + userContextId, + triggeringPrincipal, + csp, + }); + })(); + } + + if (draggedTab) { + delete draggedTab._dragData; + } + } + + on_dragend(event) { + var dt = event.dataTransfer; + var draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); + + // Prevent this code from running if a tabdrop animation is + // running since calling _finishAnimateTabMove would clear + // any CSS transition that is running. + if (draggedTab.hasAttribute("tabdrop-samewindow")) { + return; + } + + this._finishGroupSelectedTabs(draggedTab); + this._finishAnimateTabMove(); + + if ( + dt.mozUserCancelled || + dt.dropEffect != "none" || + this._isCustomizing + ) { + delete draggedTab._dragData; + return; + } + + // Check if tab detaching is enabled + if (!Services.prefs.getBoolPref("browser.tabs.allowTabDetach")) { + return; + } + + // Disable detach within the browser toolbox + var eX = event.screenX; + var eY = event.screenY; + var wX = window.screenX; + // check if the drop point is horizontally within the window + if (eX > wX && eX < wX + window.outerWidth) { + // also avoid detaching if the the tab was dropped too close to + // the tabbar (half a tab) + let rect = window.windowUtils.getBoundsWithoutFlushing( + this.arrowScrollbox + ); + let detachTabThresholdY = window.screenY + rect.top + 1.5 * rect.height; + if (eY < detachTabThresholdY && eY > window.screenY) { + return; + } + } + + // screen.availLeft et. al. only check the screen that this window is on, + // but we want to look at the screen the tab is being dropped onto. + var screen = event.screen; + var availX = {}, + availY = {}, + availWidth = {}, + availHeight = {}; + // Get available rect in desktop pixels. + screen.GetAvailRectDisplayPix(availX, availY, availWidth, availHeight); + availX = availX.value; + availY = availY.value; + availWidth = availWidth.value; + availHeight = availHeight.value; + + // Compute the final window size in desktop pixels ensuring that the new + // window entirely fits within `screen`. + let ourCssToDesktopScale = + window.devicePixelRatio / window.desktopToDeviceScale; + let screenCssToDesktopScale = + screen.defaultCSSScaleFactor / screen.contentsScaleFactor; + + // NOTE(emilio): Multiplying the sizes here for screenCssToDesktopScale + // means that we'll try to create a window that has the same amount of CSS + // pixels than our current window, not the same amount of device pixels. + // There are pros and cons of both conversions, though this matches the + // pre-existing intended behavior. + var winWidth = Math.min( + window.outerWidth * screenCssToDesktopScale, + availWidth + ); + var winHeight = Math.min( + window.outerHeight * screenCssToDesktopScale, + availHeight + ); + + // This is slightly tricky: _dragData.offsetX/Y is an offset in CSS + // pixels. Since we're doing the sizing above based on those, we also need + // to apply the offset with pixels relative to the screen's scale rather + // than our scale. + var left = Math.min( + Math.max( + eX * ourCssToDesktopScale - + draggedTab._dragData.offsetX * screenCssToDesktopScale, + availX + ), + availX + availWidth - winWidth + ); + var top = Math.min( + Math.max( + eY * ourCssToDesktopScale - + draggedTab._dragData.offsetY * screenCssToDesktopScale, + availY + ), + availY + availHeight - winHeight + ); + + // Convert back left and top to our CSS pixel space. + left /= ourCssToDesktopScale; + top /= ourCssToDesktopScale; + + delete draggedTab._dragData; + + if (gBrowser.tabs.length == 1) { + // resize _before_ move to ensure the window fits the new screen. if + // the window is too large for its screen, the window manager may do + // automatic repositioning. + // + // Since we're resizing before moving to our new screen, we need to use + // sizes relative to the current screen. If we moved, then resized, then + // we could avoid this special-case and share this with the else branch + // below... + winWidth /= ourCssToDesktopScale; + winHeight /= ourCssToDesktopScale; + + window.resizeTo(winWidth, winHeight); + window.moveTo(left, top); + window.focus(); + } else { + // We're opening a new window in a new screen, so make sure to use sizes + // relative to the new screen. + winWidth /= screenCssToDesktopScale; + winHeight /= screenCssToDesktopScale; + + let props = { screenX: left, screenY: top, suppressanimation: 1 }; + if (AppConstants.platform != "win") { + props.outerWidth = winWidth; + props.outerHeight = winHeight; + } + gBrowser.replaceTabsWithWindow(draggedTab, props); + } + event.stopPropagation(); + } + + on_dragleave(event) { + this._dragTime = 0; + + // This does not work at all (see bug 458613) + var target = event.relatedTarget; + while (target && target != this) { + target = target.parentNode; + } + if (target) { + return; + } + + this._tabDropIndicator.hidden = true; + event.stopPropagation(); + } + + on_wheel(event) { + if ( + Services.prefs.getBoolPref("toolkit.tabbox.switchByScrolling", false) + ) { + event.stopImmediatePropagation(); + } + } + + get emptyTabTitle() { + // Normal tab title is used also in the permanent private browsing mode. + const l10nId = + PrivateBrowsingUtils.isWindowPrivate(window) && + !Services.prefs.getBoolPref("browser.privatebrowsing.autostart") + ? "tabbrowser-empty-private-tab-title" + : "tabbrowser-empty-tab-title"; + return gBrowser.tabLocalization.formatValueSync(l10nId); + } + + get tabbox() { + return document.getElementById("tabbrowser-tabbox"); + } + + get newTabButton() { + return this.querySelector("#tabs-newtab-button"); + } + + // Accessor for tabs. arrowScrollbox has a container for non-tab elements + // at the end, everything else is <tab>s. + get allTabs() { + if (this._allTabs) { + return this._allTabs; + } + let children = Array.from(this.arrowScrollbox.children); + children.pop(); + this._allTabs = children; + return children; + } + + _getVisibleTabs() { + if (!this._visibleTabs) { + this._visibleTabs = Array.prototype.filter.call( + this.allTabs, + tab => !tab.hidden && !tab.closing + ); + } + return this._visibleTabs; + } + + _invalidateCachedTabs() { + this._allTabs = null; + this._visibleTabs = null; + } + + _invalidateCachedVisibleTabs() { + this._visibleTabs = null; + } + + appendChild(tab) { + return this.insertBefore(tab, null); + } + + insertBefore(tab, node) { + if (!this.arrowScrollbox) { + throw new Error("Shouldn't call this without arrowscrollbox"); + } + + let { arrowScrollbox } = this; + if (node == null) { + // We have a container for non-tab elements at the end of the scrollbox. + node = arrowScrollbox.lastChild; + } + return arrowScrollbox.insertBefore(tab, node); + } + + set _tabMinWidth(val) { + this.style.setProperty("--tab-min-width", val + "px"); + } + + get _isCustomizing() { + return document.documentElement.getAttribute("customizing") == "true"; + } + + // This overrides the TabsBase _selectNewTab method so that we can + // potentially interrupt keyboard tab switching when sharing the + // window or screen. + _selectNewTab(aNewTab, aFallbackDir, aWrap) { + if (!gSharedTabWarning.willShowSharedTabWarning(aNewTab)) { + super._selectNewTab(aNewTab, aFallbackDir, aWrap); + } + } + + _initializeArrowScrollbox() { + let arrowScrollbox = this.arrowScrollbox; + arrowScrollbox.shadowRoot.addEventListener( + "underflow", + event => { + // Ignore underflow events: + // - from nested scrollable elements + // - for vertical orientation + // - corresponding to an overflow event that we ignored + if ( + event.originalTarget != arrowScrollbox.scrollbox || + event.detail == 0 || + !this.hasAttribute("overflow") + ) { + return; + } + + this.removeAttribute("overflow"); + + if (this._lastTabClosedByMouse) { + this._expandSpacerBy(this._scrollButtonWidth); + } + + for (let tab of gBrowser._removingTabs) { + gBrowser.removeTab(tab); + } + + this._positionPinnedTabs(); + this._updateCloseButtons(); + }, + true + ); + + arrowScrollbox.shadowRoot.addEventListener("overflow", event => { + // Ignore overflow events: + // - from nested scrollable elements + // - for vertical orientation + if ( + event.originalTarget != arrowScrollbox.scrollbox || + event.detail == 0 + ) { + return; + } + + this.setAttribute("overflow", "true"); + this._positionPinnedTabs(); + this._updateCloseButtons(); + this._handleTabSelect(true); + }); + + // Override arrowscrollbox.js method, since our scrollbox's children are + // inherited from the scrollbox binding parent (this). + arrowScrollbox._getScrollableElements = () => { + return this.allTabs.filter(arrowScrollbox._canScrollToElement); + }; + arrowScrollbox._canScrollToElement = tab => { + return !tab._pinnedUnscrollable && !tab.hidden; + }; + } + + observe(aSubject, aTopic, aData) { + switch (aTopic) { + case "nsPref:changed": + // This is has to deal with changes in + // privacy.userContext.enabled and + // privacy.userContext.newTabContainerOnLeftClick.enabled. + let containersEnabled = + Services.prefs.getBoolPref("privacy.userContext.enabled") && + !PrivateBrowsingUtils.isWindowPrivate(window); + + // This pref won't change so often, so just recreate the menu. + const newTabLeftClickOpensContainersMenu = Services.prefs.getBoolPref( + "privacy.userContext.newTabContainerOnLeftClick.enabled" + ); + + // There are separate "new tab" buttons for when the tab strip + // is overflowed and when it is not. Attach the long click + // popup to both of them. + const newTab = document.getElementById("new-tab-button"); + const newTab2 = this.newTabButton; + + for (let parent of [newTab, newTab2]) { + if (!parent) { + continue; + } + + parent.removeAttribute("type"); + if (parent.menupopup) { + parent.menupopup.remove(); + } + + if (containersEnabled) { + parent.setAttribute("context", "new-tab-button-popup"); + + let popup = document + .getElementById("new-tab-button-popup") + .cloneNode(true); + popup.removeAttribute("id"); + popup.className = "new-tab-popup"; + popup.setAttribute("position", "after_end"); + parent.prepend(popup); + parent.setAttribute("type", "menu"); + // Update tooltip text + nodeToTooltipMap[parent.id] = newTabLeftClickOpensContainersMenu + ? "newTabAlwaysContainer.tooltip" + : "newTabContainer.tooltip"; + } else { + nodeToTooltipMap[parent.id] = "newTabButton.tooltip"; + parent.removeAttribute("context", "new-tab-button-popup"); + } + // evict from tooltip cache + gDynamicTooltipCache.delete(parent.id); + + // If containers and press-hold container menu are both used, + // add to gClickAndHoldListenersOnElement; otherwise, remove. + if (containersEnabled && !newTabLeftClickOpensContainersMenu) { + gClickAndHoldListenersOnElement.add(parent); + } else { + gClickAndHoldListenersOnElement.remove(parent); + } + } + + break; + } + } + + _setPositionalAttributes() { + let visibleTabs = this._getVisibleTabs(); + if (!visibleTabs.length) { + return; + } + + this._firstUnpinnedTab?.removeAttribute("first-visible-unpinned-tab"); + this._firstUnpinnedTab = visibleTabs.find(t => !t.pinned); + this._firstUnpinnedTab?.setAttribute( + "first-visible-unpinned-tab", + "true" + ); + } + + _updateCloseButtons() { + // If we're overflowing, tabs are at their minimum widths. + if (this.getAttribute("overflow") == "true") { + this.setAttribute("closebuttons", "activetab"); + return; + } + + if (this._closeButtonsUpdatePending) { + return; + } + this._closeButtonsUpdatePending = true; + + // Wait until after the next paint to get current layout data from + // getBoundsWithoutFlushing. + window.requestAnimationFrame(() => { + window.requestAnimationFrame(() => { + this._closeButtonsUpdatePending = false; + + // The scrollbox may have started overflowing since we checked + // overflow earlier, so check again. + if (this.getAttribute("overflow") == "true") { + this.setAttribute("closebuttons", "activetab"); + return; + } + + // Check if tab widths are below the threshold where we want to + // remove close buttons from background tabs so that people don't + // accidentally close tabs by selecting them. + let rect = ele => { + return window.windowUtils.getBoundsWithoutFlushing(ele); + }; + let tab = this._getVisibleTabs()[gBrowser._numPinnedTabs]; + if (tab && rect(tab).width <= this._tabClipWidth) { + this.setAttribute("closebuttons", "activetab"); + } else { + this.removeAttribute("closebuttons"); + } + }); + }); + } + + _updateHiddenTabsStatus() { + if (gBrowser.visibleTabs.length < gBrowser.tabs.length) { + this.setAttribute("hashiddentabs", "true"); + } else { + this.removeAttribute("hashiddentabs"); + } + } + + _handleTabSelect(aInstant) { + let selectedTab = this.selectedItem; + if (this.getAttribute("overflow") == "true") { + this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant); + } + + selectedTab._notselectedsinceload = false; + } + + /** + * Try to keep the active tab's close button under the mouse cursor + */ + _lockTabSizing(aTab, aTabWidth) { + let tabs = this._getVisibleTabs(); + if (!tabs.length) { + return; + } + + var isEndTab = aTab._tPos > tabs[tabs.length - 1]._tPos; + + if (!this._tabDefaultMaxWidth) { + this._tabDefaultMaxWidth = parseFloat( + window.getComputedStyle(aTab).maxWidth + ); + } + this._lastTabClosedByMouse = true; + this._scrollButtonWidth = window.windowUtils.getBoundsWithoutFlushing( + this.arrowScrollbox._scrollButtonDown + ).width; + + if (this.getAttribute("overflow") == "true") { + // Don't need to do anything if we're in overflow mode and aren't scrolled + // all the way to the right, or if we're closing the last tab. + if (isEndTab || !this.arrowScrollbox._scrollButtonDown.disabled) { + return; + } + // If the tab has an owner that will become the active tab, the owner will + // be to the left of it, so we actually want the left tab to slide over. + // This can't be done as easily in non-overflow mode, so we don't bother. + if (aTab.owner) { + return; + } + this._expandSpacerBy(aTabWidth); + } else { + // non-overflow mode + // Locking is neither in effect nor needed, so let tabs expand normally. + if (isEndTab && !this._hasTabTempMaxWidth) { + return; + } + let numPinned = gBrowser._numPinnedTabs; + // Force tabs to stay the same width, unless we're closing the last tab, + // which case we need to let them expand just enough so that the overall + // tabbar width is the same. + if (isEndTab) { + let numNormalTabs = tabs.length - numPinned; + aTabWidth = (aTabWidth * (numNormalTabs + 1)) / numNormalTabs; + if (aTabWidth > this._tabDefaultMaxWidth) { + aTabWidth = this._tabDefaultMaxWidth; + } + } + aTabWidth += "px"; + let tabsToReset = []; + for (let i = numPinned; i < tabs.length; i++) { + let tab = tabs[i]; + tab.style.setProperty("max-width", aTabWidth, "important"); + if (!isEndTab) { + // keep tabs the same width + tab.style.transition = "none"; + tabsToReset.push(tab); + } + } + + if (tabsToReset.length) { + window + .promiseDocumentFlushed(() => {}) + .then(() => { + window.requestAnimationFrame(() => { + for (let tab of tabsToReset) { + tab.style.transition = ""; + } + }); + }); + } + + this._hasTabTempMaxWidth = true; + gBrowser.addEventListener("mousemove", this); + window.addEventListener("mouseout", this); + } + } + + _expandSpacerBy(pixels) { + let spacer = this._closingTabsSpacer; + spacer.style.width = parseFloat(spacer.style.width) + pixels + "px"; + this.setAttribute("using-closing-tabs-spacer", "true"); + gBrowser.addEventListener("mousemove", this); + window.addEventListener("mouseout", this); + } + + _unlockTabSizing() { + gBrowser.removeEventListener("mousemove", this); + window.removeEventListener("mouseout", this); + + if (this._hasTabTempMaxWidth) { + this._hasTabTempMaxWidth = false; + let tabs = this._getVisibleTabs(); + for (let i = 0; i < tabs.length; i++) { + tabs[i].style.maxWidth = ""; + } + } + + if (this.hasAttribute("using-closing-tabs-spacer")) { + this.removeAttribute("using-closing-tabs-spacer"); + this._closingTabsSpacer.style.width = 0; + } + } + + uiDensityChanged() { + this._positionPinnedTabs(); + this._updateCloseButtons(); + this._handleTabSelect(true); + } + + _positionPinnedTabs() { + let tabs = this._getVisibleTabs(); + let numPinned = gBrowser._numPinnedTabs; + let doPosition = + this.getAttribute("overflow") == "true" && + tabs.length > numPinned && + numPinned > 0; + + this.toggleAttribute("haspinnedtabs", !!numPinned); + + if (doPosition) { + this.setAttribute("positionpinnedtabs", "true"); + + let layoutData = this._pinnedTabsLayoutCache; + let uiDensity = document.documentElement.getAttribute("uidensity"); + if (!layoutData || layoutData.uiDensity != uiDensity) { + let arrowScrollbox = this.arrowScrollbox; + layoutData = this._pinnedTabsLayoutCache = { + uiDensity, + pinnedTabWidth: tabs[0].getBoundingClientRect().width, + scrollStartOffset: + arrowScrollbox.scrollbox.getBoundingClientRect().left - + arrowScrollbox.getBoundingClientRect().left + + parseFloat( + getComputedStyle(arrowScrollbox.scrollbox).paddingInlineStart + ), + }; + } + + let width = 0; + for (let i = numPinned - 1; i >= 0; i--) { + let tab = tabs[i]; + width += layoutData.pinnedTabWidth; + tab.style.setProperty( + "margin-inline-start", + -(width + layoutData.scrollStartOffset) + "px", + "important" + ); + tab._pinnedUnscrollable = true; + } + this.style.setProperty( + "--tab-overflow-pinned-tabs-width", + width + "px" + ); + } else { + this.removeAttribute("positionpinnedtabs"); + + for (let i = 0; i < numPinned; i++) { + let tab = tabs[i]; + tab.style.marginInlineStart = ""; + tab._pinnedUnscrollable = false; + } + + this.style.removeProperty("--tab-overflow-pinned-tabs-width"); + } + + if (this._lastNumPinned != numPinned) { + this._lastNumPinned = numPinned; + this._handleTabSelect(true); + } + } + + _animateTabMove(event) { + let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0); + let movingTabs = draggedTab._dragData.movingTabs; + + if (this.getAttribute("movingtab") != "true") { + this.setAttribute("movingtab", "true"); + gNavToolbox.setAttribute("movingtab", "true"); + if (!draggedTab.multiselected) { + this.selectedItem = draggedTab; + } + } + + if (!("animLastScreenX" in draggedTab._dragData)) { + draggedTab._dragData.animLastScreenX = draggedTab._dragData.screenX; + } + + let screenX = event.screenX; + if (screenX == draggedTab._dragData.animLastScreenX) { + return; + } + + // Direction of the mouse movement. + let ltrMove = screenX > draggedTab._dragData.animLastScreenX; + + draggedTab._dragData.animLastScreenX = screenX; + + let pinned = draggedTab.pinned; + let numPinned = gBrowser._numPinnedTabs; + let tabs = this._getVisibleTabs().slice( + pinned ? 0 : numPinned, + pinned ? numPinned : undefined + ); + + if (RTL_UI) { + tabs.reverse(); + // Copy moving tabs array to avoid infinite reversing. + movingTabs = [...movingTabs].reverse(); + } + let tabWidth = draggedTab.getBoundingClientRect().width; + let shiftWidth = tabWidth * movingTabs.length; + draggedTab._dragData.tabWidth = tabWidth; + + // Move the dragged tab based on the mouse position. + + let leftTab = tabs[0]; + let rightTab = tabs[tabs.length - 1]; + let rightMovingTabScreenX = movingTabs[movingTabs.length - 1].screenX; + let leftMovingTabScreenX = movingTabs[0].screenX; + let translateX = screenX - draggedTab._dragData.screenX; + if (!pinned) { + translateX += + this.arrowScrollbox.scrollbox.scrollLeft - + draggedTab._dragData.scrollX; + } + let leftBound = leftTab.screenX - leftMovingTabScreenX; + let rightBound = + rightTab.screenX + + rightTab.getBoundingClientRect().width - + (rightMovingTabScreenX + tabWidth); + translateX = Math.min(Math.max(translateX, leftBound), rightBound); + + for (let tab of movingTabs) { + tab.style.transform = "translateX(" + translateX + "px)"; + } + + draggedTab._dragData.translateX = translateX; + + // Determine what tab we're dragging over. + // * Single tab dragging: Point of reference is the center of the dragged tab. If that + // point touches a background tab, the dragged tab would take that + // tab's position when dropped. + // * Multiple tabs dragging: All dragged tabs are one "giant" tab with two + // points of reference (center of tabs on the extremities). When + // mouse is moving from left to right, the right reference gets activated, + // otherwise the left reference will be used. Everything else works the same + // as single tab dragging. + // * We're doing a binary search in order to reduce the amount of + // tabs we need to check. + + tabs = tabs.filter(t => !movingTabs.includes(t) || t == draggedTab); + let leftTabCenter = leftMovingTabScreenX + translateX + tabWidth / 2; + let rightTabCenter = rightMovingTabScreenX + translateX + tabWidth / 2; + let tabCenter = ltrMove ? rightTabCenter : leftTabCenter; + let newIndex = -1; + let oldIndex = + "animDropIndex" in draggedTab._dragData + ? draggedTab._dragData.animDropIndex + : movingTabs[0]._tPos; + let low = 0; + let high = tabs.length - 1; + while (low <= high) { + let mid = Math.floor((low + high) / 2); + if (tabs[mid] == draggedTab && ++mid > high) { + break; + } + screenX = tabs[mid].screenX + getTabShift(tabs[mid], oldIndex); + if (screenX > tabCenter) { + high = mid - 1; + } else if ( + screenX + tabs[mid].getBoundingClientRect().width < + tabCenter + ) { + low = mid + 1; + } else { + newIndex = tabs[mid]._tPos; + break; + } + } + if (newIndex >= oldIndex) { + newIndex++; + } + if (newIndex < 0 || newIndex == oldIndex) { + return; + } + draggedTab._dragData.animDropIndex = newIndex; + + // Shift background tabs to leave a gap where the dragged tab + // would currently be dropped. + + for (let tab of tabs) { + if (tab != draggedTab) { + let shift = getTabShift(tab, newIndex); + tab.style.transform = shift ? "translateX(" + shift + "px)" : ""; + } + } + + function getTabShift(tab, dropIndex) { + if (tab._tPos < draggedTab._tPos && tab._tPos >= dropIndex) { + return RTL_UI ? -shiftWidth : shiftWidth; + } + if (tab._tPos > draggedTab._tPos && tab._tPos < dropIndex) { + return RTL_UI ? shiftWidth : -shiftWidth; + } + return 0; + } + } + + _finishAnimateTabMove() { + if (this.getAttribute("movingtab") != "true") { + return; + } + + for (let tab of this._getVisibleTabs()) { + tab.style.transform = ""; + } + + this.removeAttribute("movingtab"); + gNavToolbox.removeAttribute("movingtab"); + + this._handleTabSelect(); + } + + /** + * Regroup all selected tabs around the + * tab in param + */ + _groupSelectedTabs(tab) { + let draggedTabPos = tab._tPos; + let selectedTabs = gBrowser.selectedTabs; + let animate = !gReduceMotion; + + tab.groupingTabsData = { + finished: !animate, + }; + + // Animate left selected tabs + + let insertAtPos = draggedTabPos - 1; + for (let i = selectedTabs.indexOf(tab) - 1; i > -1; i--) { + let movingTab = selectedTabs[i]; + insertAtPos = newIndex(movingTab, insertAtPos); + + if (animate) { + movingTab.groupingTabsData = {}; + addAnimationData(movingTab, insertAtPos, "left"); + } else { + gBrowser.moveTabTo(movingTab, insertAtPos); + } + insertAtPos--; + } + + // Animate right selected tabs + + insertAtPos = draggedTabPos + 1; + for ( + let i = selectedTabs.indexOf(tab) + 1; + i < selectedTabs.length; + i++ + ) { + let movingTab = selectedTabs[i]; + insertAtPos = newIndex(movingTab, insertAtPos); + + if (animate) { + movingTab.groupingTabsData = {}; + addAnimationData(movingTab, insertAtPos, "right"); + } else { + gBrowser.moveTabTo(movingTab, insertAtPos); + } + insertAtPos++; + } + + // Slide the relevant tabs to their new position. + for (let t of this._getVisibleTabs()) { + if (t.groupingTabsData && t.groupingTabsData.translateX) { + let translateX = (RTL_UI ? -1 : 1) * t.groupingTabsData.translateX; + t.style.transform = "translateX(" + translateX + "px)"; + } + } + + function newIndex(aTab, index) { + // Don't allow mixing pinned and unpinned tabs. + if (aTab.pinned) { + return Math.min(index, gBrowser._numPinnedTabs - 1); + } + return Math.max(index, gBrowser._numPinnedTabs); + } + + function addAnimationData(movingTab, movingTabNewIndex, side) { + let movingTabOldIndex = movingTab._tPos; + + if (movingTabOldIndex == movingTabNewIndex) { + // movingTab is already at the right position + // and thus don't need to be animated. + return; + } + + let movingTabWidth = movingTab.getBoundingClientRect().width; + let shift = (movingTabNewIndex - movingTabOldIndex) * movingTabWidth; + + movingTab.groupingTabsData.animate = true; + movingTab.setAttribute("tab-grouping", "true"); + + movingTab.groupingTabsData.translateX = shift; + + let postTransitionCleanup = () => { + movingTab.groupingTabsData.newIndex = movingTabNewIndex; + movingTab.groupingTabsData.animate = false; + }; + if (gReduceMotion) { + postTransitionCleanup(); + } else { + let onTransitionEnd = transitionendEvent => { + if ( + transitionendEvent.propertyName != "transform" || + transitionendEvent.originalTarget != movingTab + ) { + return; + } + movingTab.removeEventListener("transitionend", onTransitionEnd); + postTransitionCleanup(); + }; + + movingTab.addEventListener("transitionend", onTransitionEnd); + } + + // Add animation data for tabs between movingTab (selected + // tab moving towards the dragged tab) and draggedTab. + // Those tabs in the middle should move in + // the opposite direction of movingTab. + + let lowerIndex = Math.min(movingTabOldIndex, draggedTabPos); + let higherIndex = Math.max(movingTabOldIndex, draggedTabPos); + + for (let i = lowerIndex + 1; i < higherIndex; i++) { + let middleTab = gBrowser.visibleTabs[i]; + + if (middleTab.pinned != movingTab.pinned) { + // Don't mix pinned and unpinned tabs + break; + } + + if (middleTab.multiselected) { + // Skip because this selected tab should + // be shifted towards the dragged Tab. + continue; + } + + if ( + !middleTab.groupingTabsData || + !middleTab.groupingTabsData.translateX + ) { + middleTab.groupingTabsData = { translateX: 0 }; + } + if (side == "left") { + middleTab.groupingTabsData.translateX -= movingTabWidth; + } else { + middleTab.groupingTabsData.translateX += movingTabWidth; + } + + middleTab.setAttribute("tab-grouping", "true"); + } + } + } + + _finishGroupSelectedTabs(tab) { + if (!tab.groupingTabsData || tab.groupingTabsData.finished) { + return; + } + + tab.groupingTabsData.finished = true; + + let selectedTabs = gBrowser.selectedTabs; + let tabIndex = selectedTabs.indexOf(tab); + + // Moving left tabs + for (let i = tabIndex - 1; i > -1; i--) { + let movingTab = selectedTabs[i]; + if (movingTab.groupingTabsData.newIndex) { + gBrowser.moveTabTo(movingTab, movingTab.groupingTabsData.newIndex); + } + } + + // Moving right tabs + for (let i = tabIndex + 1; i < selectedTabs.length; i++) { + let movingTab = selectedTabs[i]; + if (movingTab.groupingTabsData.newIndex) { + gBrowser.moveTabTo(movingTab, movingTab.groupingTabsData.newIndex); + } + } + + for (let t of this._getVisibleTabs()) { + t.style.transform = ""; + t.removeAttribute("tab-grouping"); + delete t.groupingTabsData; + } + } + + _isGroupTabsAnimationOver() { + for (let tab of gBrowser.selectedTabs) { + if (tab.groupingTabsData && tab.groupingTabsData.animate) { + return false; + } + } + return true; + } + + handleEvent(aEvent) { + switch (aEvent.type) { + case "mouseout": + // If the "related target" (the node to which the pointer went) is not + // a child of the current document, the mouse just left the window. + let relatedTarget = aEvent.relatedTarget; + if (relatedTarget && relatedTarget.ownerDocument == document) { + break; + } + // fall through + case "mousemove": + if (document.getElementById("tabContextMenu").state != "open") { + this._unlockTabSizing(); + } + break; + default: + let methodName = `on_${aEvent.type}`; + if (methodName in this) { + this[methodName](aEvent); + } else { + throw new Error(`Unexpected event ${aEvent.type}`); + } + } + } + + _notifyBackgroundTab(aTab) { + if ( + aTab.pinned || + aTab.hidden || + this.getAttribute("overflow") != "true" + ) { + return; + } + + this._lastTabToScrollIntoView = aTab; + if (!this._backgroundTabScrollPromise) { + this._backgroundTabScrollPromise = window + .promiseDocumentFlushed(() => { + let lastTabRect = + this._lastTabToScrollIntoView.getBoundingClientRect(); + let selectedTab = this.selectedItem; + if (selectedTab.pinned) { + selectedTab = null; + } else { + selectedTab = selectedTab.getBoundingClientRect(); + selectedTab = { + left: selectedTab.left, + right: selectedTab.right, + }; + } + return [ + this._lastTabToScrollIntoView, + this.arrowScrollbox.scrollClientRect, + { left: lastTabRect.left, right: lastTabRect.right }, + selectedTab, + ]; + }) + .then(([tabToScrollIntoView, scrollRect, tabRect, selectedRect]) => { + // First off, remove the promise so we can re-enter if necessary. + delete this._backgroundTabScrollPromise; + // Then, if the layout info isn't for the last-scrolled-to-tab, re-run + // the code above to get layout info for *that* tab, and don't do + // anything here, as we really just want to run this for the last-opened tab. + if (this._lastTabToScrollIntoView != tabToScrollIntoView) { + this._notifyBackgroundTab(this._lastTabToScrollIntoView); + return; + } + delete this._lastTabToScrollIntoView; + // Is the new tab already completely visible? + if ( + scrollRect.left <= tabRect.left && + tabRect.right <= scrollRect.right + ) { + return; + } + + if (this.arrowScrollbox.smoothScroll) { + // Can we make both the new tab and the selected tab completely visible? + if ( + !selectedRect || + Math.max( + tabRect.right - selectedRect.left, + selectedRect.right - tabRect.left + ) <= scrollRect.width + ) { + this.arrowScrollbox.ensureElementIsVisible(tabToScrollIntoView); + return; + } + + this.arrowScrollbox.scrollByPixels( + RTL_UI + ? selectedRect.right - scrollRect.right + : selectedRect.left - scrollRect.left + ); + } + + if (!this._animateElement.hasAttribute("highlight")) { + this._animateElement.setAttribute("highlight", "true"); + setTimeout( + function (ele) { + ele.removeAttribute("highlight"); + }, + 150, + this._animateElement + ); + } + }); + } + } + + /** + * Returns the tab where an event happened, or null if it didn't occur on a tab. + * + * @param {Event} event + * The event for which we want to know on which tab it happened. + * @param {object} options + * @param {boolean} options.ignoreTabSides + * If set to true: events will only be associated with a tab if they happened + * on its central part (from 25% to 75%); if they happened on the left or right + * sides of the tab, the method will return null. + */ + _getDragTargetTab(event, { ignoreTabSides = false } = {}) { + let { target } = event; + if (target.nodeType != Node.ELEMENT_NODE) { + target = target.parentElement; + } + let tab = target?.closest("tab"); + if (tab && ignoreTabSides) { + let { width } = tab.getBoundingClientRect(); + if ( + event.screenX < tab.screenX + width * 0.25 || + event.screenX > tab.screenX + width * 0.75 + ) { + return null; + } + } + return tab; + } + + _getDropIndex(event) { + let tab = this._getDragTargetTab(event); + if (!tab) { + return this.allTabs.length; + } + let middle = tab.screenX + tab.getBoundingClientRect().width / 2; + let isBeforeMiddle = RTL_UI + ? event.screenX > middle + : event.screenX < middle; + return tab._tPos + (isBeforeMiddle ? 0 : 1); + } + + getDropEffectForTabDrag(event) { + var dt = event.dataTransfer; + + let isMovingTabs = dt.mozItemCount > 0; + for (let i = 0; i < dt.mozItemCount; i++) { + // tabs are always added as the first type + let types = dt.mozTypesAt(0); + if (types[0] != TAB_DROP_TYPE) { + isMovingTabs = false; + break; + } + } + + if (isMovingTabs) { + let sourceNode = dt.mozGetDataAt(TAB_DROP_TYPE, 0); + if ( + XULElement.isInstance(sourceNode) && + sourceNode.localName == "tab" && + sourceNode.ownerGlobal.isChromeWindow && + sourceNode.ownerDocument.documentElement.getAttribute("windowtype") == + "navigator:browser" && + sourceNode.ownerGlobal.gBrowser.tabContainer == sourceNode.container + ) { + // Do not allow transfering a private tab to a non-private window + // and vice versa. + if ( + PrivateBrowsingUtils.isWindowPrivate(window) != + PrivateBrowsingUtils.isWindowPrivate(sourceNode.ownerGlobal) + ) { + return "none"; + } + + if ( + window.gMultiProcessBrowser != + sourceNode.ownerGlobal.gMultiProcessBrowser + ) { + return "none"; + } + + if ( + window.gFissionBrowser != sourceNode.ownerGlobal.gFissionBrowser + ) { + return "none"; + } + + return dt.dropEffect == "copy" ? "copy" : "move"; + } + } + + if (browserDragAndDrop.canDropLink(event)) { + return "link"; + } + return "none"; + } + + _handleNewTab(tab) { + if (tab.container != this) { + return; + } + tab._fullyOpen = true; + gBrowser.tabAnimationsInProgress--; + + this._updateCloseButtons(); + + if (tab.getAttribute("selected") == "true") { + this._handleTabSelect(); + } else if (!tab.hasAttribute("skipbackgroundnotify")) { + this._notifyBackgroundTab(tab); + } + + // XXXmano: this is a temporary workaround for bug 345399 + // We need to manually update the scroll buttons disabled state + // if a tab was inserted to the overflow area or removed from it + // without any scrolling and when the tabbar has already + // overflowed. + this.arrowScrollbox._updateScrollButtonsDisabledState(); + + // If this browser isn't lazy (indicating it's probably created by + // session restore), preload the next about:newtab if we don't + // already have a preloaded browser. + if (tab.linkedPanel) { + NewTabPagePreloading.maybeCreatePreloadedBrowser(window); + } + + if (UserInteraction.running("browser.tabs.opening", window)) { + UserInteraction.finish("browser.tabs.opening", window); + } + } + + _canAdvanceToTab(aTab) { + return !aTab.closing; + } + + /** + * Returns the panel associated with a tab if it has a connected browser + * and/or it is the selected tab. + * For background lazy browsers, this will return null. + */ + getRelatedElement(aTab) { + if (!aTab) { + return null; + } + + // Cannot access gBrowser before it's initialized. + if (!gBrowser._initialized) { + return this.tabbox.tabpanels.firstElementChild; + } + + // If the tab's browser is lazy, we need to `_insertBrowser` in order + // to have a linkedPanel. This will also serve to bind the browser + // and make it ready to use. We only do this if the tab is selected + // because otherwise, callers might end up unintentionally binding the + // browser for lazy background tabs. + if (!aTab.linkedPanel) { + if (!aTab.selected) { + return null; + } + gBrowser._insertBrowser(aTab); + } + return document.getElementById(aTab.linkedPanel); + } + + _updateNewTabVisibility() { + // Helper functions to help deal with customize mode wrapping some items + let wrap = n => + n.parentNode.localName == "toolbarpaletteitem" ? n.parentNode : n; + let unwrap = n => + n && n.localName == "toolbarpaletteitem" ? n.firstElementChild : n; + + // Starting from the tabs element, find the next sibling that: + // - isn't hidden; and + // - isn't the all-tabs button. + // If it's the new tab button, consider the new tab button adjacent to the tabs. + // If the new tab button is marked as adjacent and the tabstrip doesn't + // overflow, we'll display the 'new tab' button inline in the tabstrip. + // In all other cases, the separate new tab button is displayed in its + // customized location. + let sib = this; + do { + sib = unwrap(wrap(sib).nextElementSibling); + } while (sib && (sib.hidden || sib.id == "alltabs-button")); + + const kAttr = "hasadjacentnewtabbutton"; + if (sib && sib.id == "new-tab-button") { + this.setAttribute(kAttr, "true"); + } else { + this.removeAttribute(kAttr); + } + } + + onWidgetAfterDOMChange(aNode, aNextNode, aContainer) { + if ( + aContainer.ownerDocument == document && + aContainer.id == "TabsToolbar-customization-target" + ) { + this._updateNewTabVisibility(); + } + } + + onAreaNodeRegistered(aArea, aContainer) { + if (aContainer.ownerDocument == document && aArea == "TabsToolbar") { + this._updateNewTabVisibility(); + } + } + + onAreaReset(aArea, aContainer) { + this.onAreaNodeRegistered(aArea, aContainer); + } + + _hiddenSoundPlayingStatusChanged(tab, opts) { + let closed = opts && opts.closed; + if (!closed && tab.soundPlaying && tab.hidden) { + this._hiddenSoundPlayingTabs.add(tab); + this.setAttribute("hiddensoundplaying", "true"); + } else { + this._hiddenSoundPlayingTabs.delete(tab); + if (this._hiddenSoundPlayingTabs.size == 0) { + this.removeAttribute("hiddensoundplaying"); + } + } + } + + destroy() { + if (this.boundObserve) { + Services.prefs.removeObserver("privacy.userContext", this.boundObserve); + } + CustomizableUI.removeListener(this); + } + + updateTabIndicatorAttr(tab) { + const theseAttributes = ["soundplaying", "muted", "activemedia-blocked"]; + const notTheseAttributes = ["pinned", "sharing", "crashed"]; + + if (notTheseAttributes.some(attr => tab.getAttribute(attr))) { + tab.removeAttribute("indicator-replaces-favicon"); + return; + } + + if (theseAttributes.some(attr => tab.getAttribute(attr))) { + tab.setAttribute("indicator-replaces-favicon", true); + } else { + tab.removeAttribute("indicator-replaces-favicon"); + } + } + } + + customElements.define("tabbrowser-tabs", MozTabbrowserTabs, { + extends: "tabs", + }); +} |