Hallo beisammen,
ich suche ein Skript (oder Add-On), das die Tableiste an die linke Fenster-Seite verschieben kann?
Allerdings ohne Text, nur als Symbol-Tableiste, wie im Bild.
EDIT: Taskleiste = Tableiste
Mit dem Add-On Tab Center Redux habe ich die Menü-Breite leider nicht auf Symbolbreite reduzieren können?
Welche Taskleiste meinst du denn?
Ja, und dann schreibt er noch:
nur die Tab-Symbol-Leiste
Ja, was denn nun?
Schau dir mal dieses Script an:
https://github.com/alice0775/user…LiteforFx.uc.js
Angehäftete Tabs werden aber noch nicht unterstützt, laut Hinweis vom Autor.
Script:
// ==UserScript==
// @name verticalTabLiteforFx.uc.js
// @namespace http://space.geocities.yahoo.co.jp/gl/alice0775
// @description CSS入れ替えまくりLiteバージョン
// @include main
// @compatibility Firefox 78ESR
// @author Alice0775
// @note not support pinned tab yet
// @version 2020/10/21 12:00 fix resize vtb when drag Sidebar splitter
// @version 2020/10/18 00:00 fix detach Tab Threshold
// @version 2020/09/25 05:00 use ResizeObserver instead resize event
// @version 2020/09/25 05:00 adjust allTabsMenu to make including pinned tab
// @version 2020/09/23 01:30 cosme label pinned
// @version 2020/09/25 01:00 dblclick splitter toggle tabbar
// @version 2020/09/25 01:00 check gBrowserInit.delayedStartupFinished
// @version 2020/09/23 01:00 cosme
// @version 2020/09/21 01:00 force ReducedMotion for tab manuplation
// @version 2020/09/21 00:00 78ESR fix close button
// @version 2020/09/16 20:00 78ESR make tab resizabe (todo pinned tab)
// @version 2020/09/16 10:00 78ESR fix fullscreen window controls(wip, todo pinned tab)
// @version 2020/09/16 00:00 78ESR fix fullscreen navbar(wip, todo pinned tab)
// @version 2020/09/15 00:00 78ESR (wip, todo pinned tab)
// @version 2019/10/23 00:00 68ESR fix multiselect mark
// @version 2019/10/22 00:00 68ESR
// ==/UserScript==
"user strict";
// We should only start the redirection if the browser window has finished
// starting up. Otherwise, we should wait until the startup is done.
if (gBrowserInit.delayedStartupFinished) {
verticalTabLiteforFx();
} else {
let delayedStartupFinished = (subject, topic) => {
if (topic == "browser-delayed-startup-finished" &&
subject == window) {
Services.obs.removeObserver(delayedStartupFinished, topic);
verticalTabLiteforFx();
}
};
Services.obs.addObserver(delayedStartupFinished,
"browser-delayed-startup-finished");
}
function verticalTabLiteforFx() {
let verticalTabbar_maxWidth = 225; /* タブバーの横幅 px */
let verticalTab_height = 18; /* タブの高さ px */
/* not yet */
//let verticalTabPinned_width = 27; /* ピン留めタブの横幅 px */
//let verticalScrollbar_width = 11; /* スクロールバー幅 px */
let verticalTabbar_minWidth = Services.prefs.getIntPref("browser.tabs.tabMinWidth", 0);
let verticalTabbar_width = Services.prefs.getIntPref("ucjs.tabWidth", verticalTabbar_maxWidth);
var css =`@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
/* vertical tabs */
#vtb_TabsToolbar {
max-width: ${verticalTabbar_maxWidth}px !important;
min-width: calc(0px + ${verticalTabbar_minWidth}px) !important;
width: ${verticalTabbar_width}px !important;
background-color: transparent;
}
#vtb_splitter:not([state="collapsed"]) {
-moz-appearance: none !important;
border: 0 solid !important;
min-width: 1px !important;
width: 4px !important;
background-image: none !important;
background-color: transparent !important;
margin-inline-start: -4px !important;
position: relative;
}
#tabbrowser-tabs {
height: calc(100vh - 2 * ${verticalTab_height}px) !important;
}
.tabbrowser-tab {
max-height: ${verticalTab_height}px !important;
font-size: calc(${verticalTab_height}px - 3px) !important;
}
.tabbrowser-tab:not([pinned]) {
width: auto !important;
max-width: auto !important;
transition: none !important;
}
.tabbrowser-tab::after, .tabbrowser-tab::before {
border-left: none !important;
}
/* put scrollbar at left side */
#tabbrowser-tabs {
direction: rtl; /*scroll bar position*/
}
.tabbrowser-tab {
direction: ltr; /*scroll bar position*/
}
/* be able to drag scrollbar thumb */
scrollbox[part] > scrollbar {
-moz-window-dragging: no-drag;
}
/* hide */
#tabs-newtab-button,
.titlebar-spacer[type="pre-tabs"],
.tab-drop-indicator {
display: none !important;
}
/* always show toolbuttons*/
tabs:not([overflow="true"]):not([hashiddentabs]) ~ #new-tab-button,
tabs:not([overflow="true"]):not([hashiddentabs]) ~ #alltabs-button {
display: -moz-box !important;
}
/*DOMFullScreen*/
:root[inFullscreen][inDOMFullscreen] #vtb_TabsToolbar {
display: none;
}
/*FullScreen*/
:root[inFullscreen]:not([inDOMFullscreen]) #vtb_TabsToolbar:not(:hover) {
max-width: 1px !important;
min-width: 1px !important;
opacity: 0;
visibility: visible !important;
transition: .5s;
}
:root[inFullscreen]:not([inDOMFullscreen]) #vtb_TabsToolbar:hover {
visibility: visible !important;
transition: .2s;
}
:root[inFullscreen] #vtb_splitter {
display: none;
}
/*Print Preview*/
:root[printpreview] #vtb_TabsToolbar {
display: none;
}
/*Popup window*/
:root[chromehidden*="toolbar"] #vtb_TabsToolbar {
display: none;
}
/* height of menu bar */
:root:not([tabsintitlebar]) #toolbar-menubar {
height: 30px;
}
:root:not([tabsintitlebar]) #main-menubar {
padding-top: 4px;
}
/* */
:root:not([inFullscreen])[tabsintitlebar][Menubarinactive] #titlebar {
margin-top:-32px;
}
/* window control and drag space */
:root[tabsintitlebar]:not([Menubarinactive]) #nav-bar .titlebar-buttonbox{
display: none !important;
}
:root:not([inFullscreen])[tabsintitlebar]:not([Menubarinactive]) .titlebar-spacer[type="post-tabs"] {
display: none !important;
}
:root:not([inFullscreen])[tabsintitlebar][Menubarinactive] .titlebar-spacer[type="post-tabs"] {
display: -moz-box !important;
}
:root[inFullscreen]:not([tabsintitlebar]) .titlebar-buttonbox-container,
:root[inFullscreen]:not([tabsintitlebar]) .titlebar-buttonbox {
display: none !important;
}
/* :root[inFullscreen]:not([tabsintitlebar]) #window-controls {
display: none;
}
*/
:root[inFullscreen] .titlebar-restore {
display: -moz-box !important;
}
:root[inFullscreen] .titlebar-max {
display: none !important
}
/*cosme*/
.tab-content {
padding: 0 2px !important;
}
.tab-label {
line-height: 1.5em !important;
}
.tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
direction: ltr;
mask-image: linear-gradient(to left, transparent, black 0.5em) !important;
}
/*scrollbar color*/
toolbar[brighttext] #tabbrowser-tabs * {
scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3) !important;
}
/*bollow css code from https://egg.5ch.net/test/read.cgi/software/1579702570/676 */
/* ピン留めしたタブのタイトルをグラデーション表示 */
#vtb_TabsToolbar .tab-label-container[textoverflow][labeldirection=ltr][pinned] {
mask-image: linear-gradient(to left, transparent, black 0.5em)!important;
}
/* ピン留めしたタブicon左右位置調整 */
.tab-throbber[pinned],
.tab-sharing-icon-overlay[pinned],
.tab-icon-pending[pinned],
.tab-icon-image[pinned] {
margin-inline-end: 6px;
}
/* ピン留めしたタブに閉じるボタンを表示する・左右位置調整 */
#vtb_TabsToolbar .tabbrowser-tab[pinned]:not([tabProtect]) .tab-close-button {
visibility:visible !important;
display: unset !important;
margin-inline-end: -2px;
}
/* ピン留めしたタブのサウンドアイコン */
#vtb_TabsToolbar .tab-icon-overlay:-moz-any([soundplaying],[muted],[activemedia-blocked]),
#vtb_TabsToolbar .tab-icon-overlay:-moz-any([soundplaying],[muted][activemedia]) {
display: none !important;;
}
#vtb_TabsToolbar .tabbrowser-tab[pinned] .tab-icon-sound[soundplaying] {
color: #00ACE5;
visibility: visible;
display: unset !important;
}
#vtb_TabsToolbar .tabbrowser-tab[pinned] .tab-icon-sound[muted] {
color: #FF6E00;
visibility: visible;
display: unset !important;
}
/* ピン留めしたタブにピンマークを付ける */
#vtb_TabsToolbar .tabbrowser-tab[pinned="true"] .tab-content::before {
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAOCAYAAAD9lDaoAAABPUlEQVQokY3RTUtCQRTG8WnRNwj6DDkzotwLBoVBZLeIgsCglYvAct0LSLlICIqLm7LAIIQIAqMWiULaQsyITOkFgtpEuwokiJDE9J6nXWpG9F8efnAOM4zVVY6PH9B+NygxUC7nnSsAWtjPimdOlxF1gI7HQLkJ0OM0KpWQowEZJ2rweUuiuGNDKeUGPfhhvK+jAVFGgo4sKAQFVgcFZq3ielNRWr9BNTfqQtoMIyJw5eNYUAUCw0obY4wxHNraKd71RGkJSprxFuKIuARmpHyprUhxIClBSSuMPY5bP8dipwlrI6q1hrLqPeWHQFEFpTDHpc+E2JSKarY30XDwZ6bvhuJ2vG504MLLcTon8bHbQ01vFA54z++WbfnYJC8s2UVB1yzzTUjTtO2mYX26rvf/+gX1eTwe95/gP30BeHKkcA2on8MAAAAASUVORK5CYII=") !important;
position: absolute !important;
z-index: -1 !important;
margin-left: 13px !important;
margin-right: 0px !important;
margin-top: -14px !important;
display: block !important;
filter: saturate(150%) !important;
}
/* タブのfaviconよりもピンマークを上にする */
#vtb_TabsToolbar .tabbrowser-tab[pinned="true"] .tab-icon-image {
position: relative !important;
z-index: -2 !important;
}
`;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
var ref = document.getElementById('SM_toolbox') ||
document.getElementById('sidebar-box') ||
document.getElementById("appcontent");
var vtbTabsToolbar = document.createXULElement('hbox');
vtbTabsToolbar.setAttribute("id", "vtb_TabsToolbar");
document.getElementById("browser").insertBefore(vtbTabsToolbar, ref);
var tabsToolbar = document.getElementById('TabsToolbar');
vtbTabsToolbar.appendChild(tabsToolbar);
//prepare for splitter
var vtbSplitter = document.createXULElement("splitter");
vtbSplitter.setAttribute("id", "vtb_splitter");
vtbSplitter.setAttribute("state", "open");
vtbSplitter.setAttribute("collapse", "before");
vtbSplitter.setAttribute("resizebefore", "closest");
vtbSplitter.setAttribute("resizeafter", "closest");
document.getElementById("browser").insertBefore(vtbSplitter, ref);
tabsToolbar.setAttribute("orient", "vertical");
tabsToolbar.querySelector(".toolbar-items").setAttribute("orient", "vertical");
tabsToolbar.querySelector(".toolbar-items").removeAttribute("align");
tabsToolbar.querySelector("#TabsToolbar-customization-target").setAttribute("orient", "vertical");
// scrollbar
gBrowser.tabContainer.setAttribute("orient", "vertical");
var arrowScrollbox = gBrowser.tabContainer.arrowScrollbox;
arrowScrollbox.setAttribute("orient", "vertical");
var scrollbox = arrowScrollbox.shadowRoot.querySelector("scrollbox");
scrollbox.setAttribute("orient", "vertical");
scrollbox.style.setProperty("overflow-y", "auto", "");
scrollbox.style.setProperty("scrollbar-width", "thin", "");
// hide scroll buttons
var scrollButtonUp = arrowScrollbox.shadowRoot.getElementById("scrollbutton-up");
var scrollButtonDown = arrowScrollbox.shadowRoot.getElementById("scrollbutton-down");
scrollButtonUp.style.setProperty("display", "none", "");
scrollButtonDown.style.setProperty("display", "none", "");
var spacer1 = arrowScrollbox.shadowRoot.querySelector('[part="overflow-start-indicator"]');
var spacer2 = arrowScrollbox.shadowRoot.querySelector('[part="overflow-start-indicator"]');
spacer1.style.setProperty("display", "none", "");
spacer2.style.setProperty("display", "none", "");
// ignore lock tab width when closing
gBrowser.tabContainer._lockTabSizing = function (aTab, tabWidth){};
// print preview
PrintPreviewListener._toggleAffectedChrome_org = PrintPreviewListener._toggleAffectedChrome;
PrintPreviewListener._toggleAffectedChrome = function() {
PrintPreviewListener._toggleAffectedChrome_org();
if (!gInPrintPreviewMode)
document.getElementById("main-window").removeAttribute("printpreview");
else
document.getElementById("main-window").setAttribute("printpreview", "true");
};
// control buttons
let spacer = tabsToolbar.querySelector('.titlebar-spacer[type="post-tabs"]');
let accessibility = tabsToolbar.querySelector('.accessibility-indicator');
let private = tabsToolbar.querySelector('.private-browsing-indicator');
let control = tabsToolbar.querySelector('.titlebar-buttonbox-container');
ref = document.getElementById("PanelUI-button");
ref.parentNode.insertBefore(spacer, ref);
ref.parentNode.insertBefore(accessibility, ref);
ref.parentNode.insertBefore(private, ref);
ref.parentNode.insertBefore(control, ref);
var func = FullScreen._updateToolbars.toString();
func = func.replace(
'document.getElementById("TabsToolbar").appendChild(fullscreenctls);',
''
);
FullScreen._updateToolbars = new Function(
func.match(/\(([^)]*)/)[1],
func.replace(/[^{]*\{/, '').replace(/}\s*$/, '')
);
const target = document.getElementById('toolbar-menubar');
if (!target?.getAttribute("inactive"))
document.getElementById("main-window").removeAttribute("Menubarinactive");
else
document.getElementById("main-window").setAttribute("Menubarinactive", "true");
verticalTabLiteforFx.observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (!mutation.target?.getAttribute("inactive"))
document.getElementById("main-window").removeAttribute("Menubarinactive");
else
document.getElementById("main-window").setAttribute("Menubarinactive", "true");
});
});
const config = { attributes: true, attributeFilter: ["inactive", "autohide"]};
verticalTabLiteforFx.observer.observe(target, config);
window.addEventListener("unload", function(){
verticalTabLiteforFx.observer.disconnect();
}, {once: true});
gBrowser.tabContainer._positionPinnedTabs = function _positionPinnedTabs() {
return;
}
gBrowser.tabContainer._updateCloseButtons = function _updateCloseButtons() {
return;
}
gBrowser.removeTab_vtb_org = gBrowser.removeTab;
gBrowser.removeTab = function removeTab(
aTab,
{
animate,
byMouse,
skipPermitUnload,
closeWindowWithLastTab,
prewarmed,
} = {}) {
animate = false;
gBrowser.removeTab_vtb_org(aTab,
{
animate,
byMouse,
skipPermitUnload,
closeWindowWithLastTab,
prewarmed,
});
}
gBrowser.tabContainer._getDropEffectForTabDrag = function(event){return "";}; // default "dragover" handler does nothing
gBrowser.tabContainer.lastVisibleTab = function() {
var tabs = this.allTabs;
for (let i = tabs.length - 1; i >= 0; i--){
if (!tabs[i].hasAttribute("hidden"))
return i;
}
return -1;
};
gBrowser.tabContainer.clearDropIndicator = function() {
var tabs = this.allTabs;
for (let i = 0, len = tabs.length; i < len; i++){
let tab_s= tabs[i].querySelector(".tab-background").style;
tab_s.removeProperty("box-shadow");
}
};
gBrowser.tabContainer.addEventListener("drop",function(event){this.on_drop(event);},true);
gBrowser.tabContainer.addEventListener("dragleave",function(event){this.clearDropIndicator(event);},true);
gBrowser.tabContainer._getDragTargetTab = function _getDragTargetTab(event, isLink) {
let tab = event.target;
while (tab && tab.localName != "tab") {
tab = tab.parentNode;
}
if (tab && isLink) {
let { height } = tab.getBoundingClientRect();
if (
event.screenY < tab.screenY + height * 0.25 ||
event.screenY > tab.screenY + height * 0.75
) {
return null;
}
}
return tab;
}
gBrowser.tabContainer.on_dragover = function(event) {
this.clearDropIndicator();
var effects = this._getDropEffectForTabDrag(event);
event.preventDefault();
event.stopPropagation();
if (effects == "link") {
let tab = this._getDragTargetTab(event, true);
if (tab) {
if (!this._dragTime) {
this._dragTime = Date.now();
}
if (Date.now() >= this._dragTime + this._dragOverDelay) {
this.selectedItem = tab;
}
return;
}
}
var newIndex = this._getDropIndex(event, effects == "link");
if (newIndex == null)
return;
if (newIndex < this.allTabs.length) {
this.allTabs[newIndex].querySelector(".tab-background").style.setProperty("box-shadow","0px 2px 0px 0px #f00 inset, 0px -2px 0px 0px #f00","important");
} else {
newIndex = gBrowser.tabContainer.lastVisibleTab();
if (newIndex >= 0)
this.allTabs[newIndex].querySelector(".tab-background").style.setProperty("box-shadow","0px -2px 0px 0px #f00 inset, 0px 2px 0px 0px #f00","important");
}
};
gBrowser.tabContainer.addEventListener("dragover", gBrowser.tabContainer.on_dragover, true);
gBrowser.tabContainer._getDropIndex = function(aEvent, isLink) {
var tabs = this.allTabs;
for (let i = 0; i < tabs.length; i++){
if (aEvent.screenY >= tabs[i].screenY &&
aEvent.screenY < tabs[i].screenY + tabs[i].getBoundingClientRect().height / 2)
return i;
if (aEvent.screenY >= tabs[i].screenY + tabs[i].getBoundingClientRect().height / 2 &&
aEvent.screenY < tabs[i].screenY + tabs[i].getBoundingClientRect().height)
return i + 1;
}
return tabs.length;
};
gBrowser.tabContainer.on_drop = function(event) {
this.clearDropIndicator();
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, false);
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 = this._getDropIndex(event, false);
// "animDropIndex" in draggedTab._dragData &&
// draggedTab._dragData.animDropIndex;
let incrementDropIndex = true;
if (dropIndex && dropIndex > movingTabs[0]._tPos) {
dropIndex--;
incrementDropIndex = false;
}
if (false && oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
for (let tab of movingTabs) {
tab.setAttribute("tabdrop-samewindow", "true");
tab.style.transform = "translateX(" + newTranslateX + "px)";
let onTransitionEnd = transitionendEvent => {
if (
transitionendEvent.propertyName != "transform" ||
transitionendEvent.originalTarget != tab
) {
return;
}
tab.removeEventListener("transitionend", onTransitionEnd);
tab.removeAttribute("tabdrop-samewindow");
this._finishAnimateTabMove();
if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
dropIndex++;
}
}
gBrowser.syncThrobberAnimations(tab);
};
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) {
let newIndex = this._getDropIndex(event, false);
let newTabs = [];
for (let tab of movingTabs) {
let newTab = gBrowser.adoptTab(tab, newIndex++, tab == draggedTab);
newTabs.push(newTab);
}
// Restore tab selection
gBrowser.addRangeToMultiSelectedTabs(
newTabs[0],
newTabs[newTabs.length - 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, true);
let userContextId = this.selectedItem.getAttribute("usercontextid");
let replace = !!targetTab;
let newIndex = this._getDropIndex(event, true);
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;
}
};
func = gBrowser.tabContainer.on_dragend.toString();
func = func.replace(
'var wX = window.screenX;',
'var wX = window.screenX;var wY = window.screenY;'
).replace(
'let detachTabThresholdY = window.screenY + rect.top + 1.5 * rect.height;',
'let detachTabThresholdX = window.screenX + rect.left + rect.width + 100;'
).replace(
'if (eY < detachTabThresholdY && eY > window.screenY) {',
'if (eX < detachTabThresholdX && eX > window.screenX) {'
);
gBrowser.tabContainer.on_dragend = new Function(
func.match(/\(([^)]*)/)[1],
func.replace(/[^{]*\{/, '').replace(/}\s*$/, '')
);
gBrowser.tabContainer.addEventListener('SSTabRestoring', ensureVisible, false);
gBrowser.tabContainer.addEventListener('TabSelect', ensureVisible, false);
function ensureVisible(event) {
setTimeout(() => {
let tab = gBrowser.selectedTab;
let tabContainer = gBrowser.tabContainer;
if ( tab.screenY + tab.getBoundingClientRect().height + 1 >
tabContainer.screenY + tabContainer.getBoundingClientRect().height ) {
tab.scrollIntoView(false);
} else if ( tab.screenY < tabContainer.screenY ) {
tab.scrollIntoView(true);
}
}, gReduceMotion ? 0 : 150);
}
// check width only while dragging of splitter
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
if(entry.contentBoxSize) {
ensureVisible();
if (vtbSplitter.getAttribute("state") == "dragging" ||
SidebarUI._splitter.getAttribute("state") == "dragging") {
let width = vtbTabsToolbar.getBoundingClientRect().width;
if (verticalTabbar_minWidth <= width) {
sizeofToolbottun();
Services.prefs.setIntPref("ucjs.tabWidth", width);
}
}
}
}
});
resizeObserver.observe(vtbTabsToolbar);
// adjust button size
sizeofToolbottun();
function sizeofToolbottun() {
let width = vtbTabsToolbar.getBoundingClientRect().width;
let btn = document.querySelector("#new-tab-button .toolbarbutton-icon");
btn.style.setProperty("width", "auto", "");
btn.style.setProperty("padding", "6px " + (width - 16 - 4) / 2 + "px", "");
btn = document.querySelector("#alltabs-button .toolbarbutton-badge-stack");
btn.style.setProperty("padding", "6px " + (width - 16 - 4) / 2 + "px", "");
};
// dblclick splitter toggle tabbar
vtbSplitter.addEventListener('dblclick', vtbSplitter_toggle, false);
function vtbSplitter_toggle(event) {
if (vtbSplitter.getAttribute("state") == "collapsed")
vtbSplitter.setAttribute("state", "open");
else
vtbSplitter.setAttribute("state", "collapsed");
}
// adjust allTabsMenu to make including pinned tab
func = gTabsPanel.init.toString();
func = func.replace(
'filterFn: tab => !tab.pinned && !tab.hidden,',
'filterFn: tab => !tab.hidden,'
);
gTabsPanel.init = new Function(
func.match(/\(([^)]*)/)[1],
func.replace(/[^{]*\{/, '').replace(/}\s*$/, '')
);
}Mfg.
Endor
Schau dir mal dieses Script an:
Danke Endor, sieht schon mal gut aus. 
Nur halb so breit wär geradezu perfekt. 
Zusammenschieben funktioniert leider nicht, weil sie dann ganz verschwindet.
let verticalTabbar_maxWidth = 20 greift hier leider nicht.
Hatte ich ja hinterher gesehen und daher wieder gelöscht.
So schmal, also 20, wird nicht gehen.
Teste mal 150 oder so, das denke ich könnte eher gehen.
Firefox neu starten und dabei den Scriptcache löschen lassen, weißt Du sicher.
Mfg.
Endor
Ich hatte mal vor einiger Zeit was gebastelt. Allerdings weiß ich nicht, ob es das Richtige für dich wäre. Die vertikale Tableiste wird nämlich erst angezeigt, wenn du mit der Maus an den linken Rand fährst ("Autopopup"). Auch wenn es merkwürdig klingt: Ich habe es seinerzeit nicht hinbekommen, dass die Tableiste immer angezeigt wird, was ja eigentlich einfacher sein sollte...
(Kleiner als ~40 Pixel scheint auch hier nicht zu funktionieren)
Kannst es ja mal ausprobieren (Einstellungen im Skript oben in den "User-Settings"):
// ==UserScript==
// @name zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace http://space.geocities.yahoo.co.jp/gl/alice0775
// @description Experimentelle CSS Version für Mehrzeilige Tableiste
// @include main
// @compatibility Firefox 72
// @author Alice0775
// @version 2016/08/05 00:00 Firefox 48
// @version 2016/05/01 00:01 hide favicon if busy
// @version 2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version 2016/02/09 00:01 workaround css for lwt
// @version 2016/02/09 00:00
// Version: 04.07.2020 FireFox 78+ by 'BrokenHeart'
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {
// User-Settings ---
var bTabsAutoPopup = true; // [true]: 'AutoPopup' für Tabs einschalten, [false]:'AutoPopup' für Tabs auschalten
var bTabsDown = true; // [true]: Tab-Leiste unter allen anderen Toolbars, [false]: Tab-Leiste oben
var bTabWheel = true; // [true]: Tab-Wheel-Selection einschalten, [false]: Tab-Wheel-Selection ausschalten
var bPageScroll = true; // [true]: seitenweises Scrollen, [false]: zeilenweises Scrollen
var nTabsAutoPopupWidth = 44; // Breite der 'AutoPopup'-Leiste in Pixeln
var nTabsAutoPopupHover = 2; // Abstand zum FF-Fensterrand in Pixeln, ab dem das Popup-Fenster sichtbar gemacht wird
var nTabsAutoPopupAnim = 0.5; // Dauer der Animation beim 'Herausschieben' des Popups in Sekunden (0 = keine Animation)
var nTabLines = 3; // Anzahl der sichtbaren Tab-Zeilen, darüber hinaus wird gescrollt (!keine Funktion bei 'bTabsAutoPopup=true'!)
var nTabWidth = 42; // Breite der einzelnen Tabs in Pixeln
var nTabHeight = 26; // Höhe der einzelnen Tabs in Pixeln
var nTabMargin = 1; // Abstand zwischen den Tab-Zeilen in Pixeln
var bTabScrollbar = false; // [true] Scrollbar für Tabbar anzeigen, [false] Keine Scrollbar für Tabbar anzeigen
var bTabCloseButton = false; // [true] Tab-Schließen-Button anzeigen, [false] Tab-Schließen-Button verbergen
var bTabTooltips = true; // [true] Tab-Tooltips werden angezeigt, [false] Tab-Tooltips werden nicht angezeigt
var bDblclickOnTabbarNewTab = true; // [true] Doppel-Klick über Tabbar öffnet neuen Tab, [false] Funktion wird nicht ausgeführt
var bDblclickOnTabReloadTab = true; // [true] Doppel-Klick über Tab lädt diesen neu, [false] Funktion wird nicht ausgeführt
// User-Settings ---
var nTabLineHeight = nTabHeight+2*nTabMargin;
tabsetting: {
let css =`
tabs tab {
border-left: solid 1px hsla(0,0%,0%,0) !important;
border-right: solid 1px hsla(0,0%,0%,0) !important;
}
tabs tab:after,tabs tab:before
{
display: none !important;
}
`;
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
}
multiLineTabSetup: {
let cssIn =`
#tabbrowser-tab-tooltip {
visibility: strTabTooltips !important;
/*display: strTabTooltips !important;*/
}
#TabsToolbar > .titlebar-buttonbox-container,
#main-window[sizemode="fullscreen"] #window-controls {
display: none !important;
}
/* TabToolbar */
#TabsToolbar {
/*background-image: linear-gradient( rgba(0,0,0,1), rgba(100,125,145,1) ), none !important; */
/*background-image: url('file:///D://Programme%20(Portable)//Firefox%20Portable//Firefox-Test//Profilordner//chrome//image//BackNew0008.png') !important;*/
background: rgba(30,40,50,0.80) !important;
-moz-window-dragging: no-drag !important;
}
/* Tab-Höhe */
.tabbrowser-tab {
min-height: nTabHeightpx !important;
max-height: nTabHeightpx !important;
margin-top: nTabMarginpx !important;
margin-bottom: nTabMarginpx !important;
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
background: unset !important;
border-top: unset !important;
outline: none !important;
}
/* Tab-Schließen-Button entfernen */
.tabbrowser-tab .tab-close-button {
visibility: strVisible !important;
}
tabs > arrowscrollbox,
tabs > arrowscrollbox::part(scrollbox-clip) {
display: block;
}
tabs > arrowscrollbox::part(scrollbox)/*,
tabs > arrowscrollbox::part(scrollbox-clip) */ {
display: flex !important;
position: relative !important;
flex-wrap: wrap !important;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: strScrollbar !important;
-moz-window-dragging: no-drag !important;
}
.tabbrowser-tab:not([pinned]) {
min-width: nTabWidthpx !important;
}
/* Tab-Separatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
opacity: 0 !important;
border-image: unset !important;
border-image-slice: none !important;
width: 2 !important;
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
display: none !important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
text-shadow: 1px 1px 0px #000000 !important;
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Arial" !important;
color: white !important;
}
.tabbrowser-tab .tab-label[selected="true"] {
text-shadow: 1px 1px 0px #000000 !important;
color: white !important;
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Arial" !important;
}
/* Tab-Hintergrund */
/*--- selektiert ---*/
.tab-background[selected=true] > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important;
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(112,112,112,0.85), rgba(50,62,72,0.85) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75) !important;
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(60,60,60,0.85), rgba(25,25,25,0.85) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); !important;
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
}
`;
let cssOut;
cssOut = cssIn.replace(/nTabHeight/g, nTabHeight);
cssOut = cssOut.replace(/nTabMargin/g, nTabMargin);
cssOut = cssOut.replace(/nTabWidth/g, nTabWidth);
if(bTabCloseButton)
cssOut = cssOut.replace("strVisible", "visible");
else
cssOut = cssOut.replace("strVisible", "collapse");
if(bTabScrollbar)
cssOut = cssOut.replace("strScrollbar", "auto");
else
cssOut = cssOut.replace("strScrollbar", "hidden");
if(bTabTooltips)
cssOut = cssOut.replace("strTabTooltips", "visible");
else
cssOut = cssOut.replace("strTabTooltips", "hidden");
//console.log(cssOut);
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssOut));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
let tabbrowsertabs = document.getElementById('tabbrowser-tabs');
let tabsScrollbox = document.getElementById('tabbrowser-arrowscrollbox').scrollbox;
tabsScrollbox.style.minHeight = nTabLineHeight + 'px';
tabsScrollbox.style.maxHeight = nTabLineHeight*nTabLines + 'px';
console.log(tabbrowsertabs.style);
console.log(tabsScrollbox.style);
}
if(bTabsDown || bTabsAutoPopup){
let tabbar = document.getElementById("TabsToolbar");
tabbar.parentNode.parentNode.appendChild(tabbar);
let css =`
#main-window[sizemode="normal"] #titlebar {
margin-bottom: -6px;}
`;
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
}
if(bTabsAutoPopup)
{
let cssIn =`
.StyleShowingTabsToolbar {
transition: margin-left nTabsAutoPopupAnims !important;
display: flex !important;
position: absolute !important;
opacity: 1;
margin-left: 0px !important;
z-index: 100 !important;
min-width: nTabsAutoPopupWidthpx !important;
filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) !important;
}
.StyleHidingTabsToolbar {
display: flex !important;
position: absolute !important;
opacity: 0;
margin-left: calc( (nTabsAutoPopupWidthpx - nTabsAutoPopupHoverpx) * -1 );
z-index: 100 !important;
min-width: nTabsAutoPopupWidthpx !important;
}
.toolbar-items
{
display:flex !important;
}
tabs > arrowscrollbox {
display: flex !important;
position: absolute !important;
min-width: nTabsAutoPopupWidthpx !important;
/*background-color: rgba(0,0,0,0.25); */
}
`;
let cssOut;
cssOut = cssIn.replace(/nTabsAutoPopupWidth/g, nTabsAutoPopupWidth);
cssOut = cssOut.replace(/nTabsAutoPopupHover/g, nTabsAutoPopupHover);
cssOut = cssOut.replace(/nTabsAutoPopupAnim/g, nTabsAutoPopupAnim);
//console.log("AutoPopup: ");
//console.log(cssOut);
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssOut));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
let tabsToolbar = document.getElementById('TabsToolbar');
tabsToolbar.classList.add('StyleHidingTabsToolbar');
//console.log(tabsToolbar);
}
//------------------------------------------------------------------------------------------
var tabsToolbar = document.getElementById('TabsToolbar');
var tabbrowsertabs = document.getElementById('tabbrowser-tabs');
var tabsscrollbox = document.getElementById('tabbrowser-arrowscrollbox');
var ScrollBox = tabsscrollbox.scrollbox;
var bMouseEnter = false;
var bToolbarLocked = false;
// ----------------------------------
// Load-Event:
// ----------------------------------
function onReady()
{
console.log("Ready");
let cssElements =`
#alltabs-button,
hbox.titlebar-spacer,
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] {
display: none;
}
`;
let service = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let ur = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssElements));
service.loadAndRegisterSheet(ur, service.AUTHOR_SHEET);
gBrowser.selectedTab.scrollIntoView();
}
if (window.readyState !== "loading") {
setTimeout(onReady,350);
}
else
{
window.addEventListener("DOMContentLoaded", onReady );
}
// ----------------------------------
// ResizeObserver / Client
// ----------------------------------
var resizeClientObserver=null;
if( bTabsAutoPopup )
{
resizeClientObserver = new ResizeObserver(function(entries) {
for (let entry of entries) {
tabsToolbar.style.minHeight = tabsToolbar.style.maxHeight = entry.contentRect.height + 'px';
ScrollBox.style.maxHeight = entry.contentRect.height + 'px';
}
});
resizeClientObserver.observe(document.getElementById("browser"));
}
// ----------------------------------
// 'Middleclick' on Tab -> Close Tab
// ----------------------------------
gBrowser.tabContainer.addEventListener('click', function(event)
{
if (event.button == 1)
{
let element = event.target.parentNode;
while(element)
{
if (element.localName == 'tab')
{
gBrowser.removeTab(element, {animate: false});
event.preventDefault();
event.stopPropagation();
console.log("Klick-M1");
return;
}
element = element.parentNode;
}
};
}, true);
// ----------------------------------
// 'Middleclick' on TabsToolbar -> Add Tab
// ----------------------------------
tabsToolbar.addEventListener('click', function(event)
{
if (event.button == 1)
{
//let element = event.target.parentNode;
if(event.target.parentNode.id == "navigator-toolbox")
{
gBrowser.selectedTab = gBrowser.addTrustedTab('moz-extension://073ae002-537d-4165-ae7b-07540569971e/index.html');
let urlbar = document.getElementById('urlbar-input');
urlbar.focus();
event.preventDefault();
event.stopPropagation();
console.log("Klick-M2");
return;
}
};
}, true);
// ----------------------------------
// 'Doubleclick' on TabsToolbar -> Add Tab
// ----------------------------------
tabsToolbar.addEventListener('dblclick', function(event)
{
if(!bDblclickOnTabbarNewTab)
return;
if (event.button == 0)
{
//let element = event.target.parentNode;
if(event.target.parentNode.id == "navigator-toolbox")
{
gBrowser.selectedTab = gBrowser.addTrustedTab('moz-extension://073ae002-537d-4165-ae7b-07540569971e/index.html');
let urlbar = document.getElementById('urlbar-input');
urlbar.focus();
event.preventDefault();
event.stopPropagation();
console.log("Klick-D1");
return;
}
};
}, true);
// ----------------------------------
// 'Doubleclick' on TabsToolbar -> Add Tab
// ----------------------------------
gBrowser.tabContainer.addEventListener('dblclick', function(event)
{
if(!bDblclickOnTabbarNewTab)
return;
if (event.button == 0)
{
let element = event.target.parentNode;
if (element == gBrowser.tabContainer )
{
gBrowser.selectedTab = gBrowser.addTrustedTab('moz-extension://073ae002-537d-4165-ae7b-07540569971e/index.html');
let urlbar = document.getElementById('urlbar-input');
urlbar.focus();
event.preventDefault();
event.stopPropagation();
console.log("Klick-D2");
return;
}
};
}, true);
// ----------------------------------
// 'Doubleclick' on Tab -> Reload Tab
// ----------------------------------
gBrowser.tabContainer.addEventListener('dblclick', function(event)
{
if(!bDblclickOnTabReloadTab)
return;
if (event.button == 0)
{
// Test ---------------------------------------------------------------------------------
/*
let tabinfo = document.getElementById('tabInfo');
let strTabInfo = tabinfo.textContent;
*/
// Test ---------------------------------------------------------------------------------
let element = event.target.parentNode;
while (element)
{
if (element.localName == 'tab')
{
element.linkedBrowser.reload();
console.log("Klick-D-Tab");
return;
}
element = element.parentNode;
}
}
}, true);
// ----------------------------------
// 'mouseenter'
// ----------------------------------
tabsToolbar.addEventListener('mouseenter', event => {
if( bTabsAutoPopup )
{
if(!bMouseEnter)
{
//tabsToolbar.style.minHeight = tabsToolbar.style.maxHeight = gBrowser.selectedBrowser.clientHeight + 'px';
//ScrollBox.style.maxHeight = gBrowser.selectedBrowser.clientHeight + 'px';
bMouseEnter = true;
tabsToolbar.classList.add('StyleShowingTabsToolbar');
tabsToolbar.classList.remove('StyleHidingTabsToolbar');
//console.log("TabsToolbar: MOUSE ENTER");
//tabsToolbar.style.backgroundColor = "rgba(0,0,0,0.75)";
}
}
}, true);
// ----------------------------------
// 'mouseleave'
// ----------------------------------
tabsToolbar.addEventListener('mouseleave', event => {
if( bTabsAutoPopup )
{
if(bMouseEnter)
{
if( event.clientX > 0/*tabsToolbar.clientLeft*/ &&
event.offsetY > tabsToolbar.clientTop &&
event.offsetX < tabsToolbar.clientWidth &&
event.offsetY < tabsToolbar.clientHeight )
{
//console.log("TabsToolbar: (1) MOUSE NO LEAVE screenX:%d|screenY:%d ", event.screenX, event.screenY );
//console.log("TabsToolbar: (2) MOUSE NO LEAVE clientX:%d|clientY:%d ", event.clientX, event.clientY );
//console.log("TabsToolbar: (3) MOUSE NO LEAVE offsetX:%d|offsetY:%d ", event.offsetX, event.offsetY );
//console.log("TabsToolbar: (4) MOUSE NO LEAVE tabsToolbar.clientLeft:%d|tabsToolbar.clientTop:%d|tabsToolbar.clientWidth-2:%d|tabsToolbar.clientHeight:%d ", tabsToolbar.clientLeft, tabsToolbar.clientTop, tabsToolbar.clientWidth-2, tabsToolbar.clientHeight );
//console.log("TabsToolbar: (5) MOUSE NO LEAVE event.target.clientLeft:%d|event.target.clientTop:%d|event.target.clientWidth-2:%d|event.target.clientHeight:%d ", event.target.clientLeft, event.target.clientTop, event.target.clientWidth-2, event.target.clientHeight );
return;
}
event.preventDefault();
event.stopPropagation();
tabsToolbar.classList.add('StyleHidingTabsToolbar');
tabsToolbar.classList.remove('StyleShowingTabsToolbar');
//console.log("TabsToolbar: (1) MOUSE LEAVE screenX:%d|screenY:%d ", event.screenX, event.screenY );
//console.log("TabsToolbar: (2) MOUSE LEAVE clientX:%d|clientY:%d ", event.clientX, event.clientY );
//console.log("TabsToolbar: (3) MOUSE LEAVE offsetX:%d|offsetY:%d ", event.offsetX, event.offsetY );
//console.log("TabsToolbar: (4) MOUSE LEAVE tabsToolbar.clientLeft:%d|tabsToolbar.clientTop:%d|tabsToolbar.clientWidth-2:%d|tabsToolbar.clientHeight:%d ", tabsToolbar.clientLeft, tabsToolbar.clientTop, tabsToolbar.clientWidth-2, tabsToolbar.clientHeight );
//console.log("TabsToolbar: (5) MOUSE LEAVE event.target.clientLeft:%d|event.target.clientTop:%d|event.target.clientWidth-2:%d|event.target.clientHeight:%d ", event.target.clientLeft, event.target.clientTop, event.target.clientWidth-2, event.target.clientHeight );
bMouseEnter = false;
//tabsToolbar.style.backgroundColor = "rgba(0,0,0,0.8)";
}
}
}, false);
// ...
// TabSelect-Event:
// ...
gBrowser.tabContainer.addEventListener("TabSelect", function(event) {
let bScroll = false;
let bScrollTop = true;
let scrollBoxY1 = event.target.parentElement.scrollbox.screenY;
let scrollBoxHeight = event.target.parentElement.scrollbox.clientHeight;
let scrollBoxY2 = scrollBoxY1+scrollBoxHeight;
let TabSelY1 = event.target.screenY;
let TabSelHeight = event.target.clientHeight;
let TabSelY2 = TabSelY1+TabSelHeight;
if( TabSelY2 > scrollBoxY2 )
{
bScroll = true;
bScrollTop = false;
}
if( TabSelY1 < scrollBoxY1 )
{
bScroll = true;
bScrollTop = true;
}
if( bScroll )
{
setTimeout(function()
{
event.target.scrollIntoView(bScrollTop);
}, 0);
}
}, true);
// ...
// Wheel-Event:
// ...
gBrowser.tabContainer.addEventListener("wheel", function(event)
{
event.preventDefault();
event.stopPropagation();
let scrollUp = true;
let wrap = false;
let scrollBoxY1 = gBrowser.tabContainer._animateElement.scrollbox.scrollTop;
let scrollHeight;
//let nTabLineHeight = gBrowser.tabContainer._animateElement.scrollbox.clientHeight/nTabLines ;
if(bPageScroll)
{scrollHeight = gBrowser.tabContainer._animateElement.scrollbox.clientHeight;}
else
{scrollHeight = nTabLineHeight;}
let dir = (scrollUp ? 1 : -1) * Math.sign(event.deltaY);
let bLastScrollLine = false;
if( gBrowser.tabContainer._animateElement.scrollbox.scrollTopMax == gBrowser.tabContainer._animateElement.scrollbox.scrollTop)
{
bLastScrollLine = true;
}
if( !bTabWheel || event.ctrlKey || event.originalTarget.localName == "thumb" || event.originalTarget.localName == "slider" || event.originalTarget.localName == "scrollbarbutton" )
{
setTimeout(function()
{
let scrollBoxMod = scrollBoxY1%scrollHeight;
if( scrollBoxMod > 0 )
{
if( dir == -1 )
{
scrollBoxY1 -= scrollBoxMod;
if(scrollBoxMod < nTabLineHeight && !bLastScrollLine) { scrollBoxY1 -= scrollHeight; }
}
else
{
scrollBoxY1 += (scrollHeight-(scrollBoxMod));
if(scrollHeight-(scrollBoxMod) < nTabLineHeight) { scrollBoxY1 += scrollHeight; }
}
}
else
{
if( dir == -1 )
{
scrollBoxY1 -= scrollHeight;
}
else
{
scrollBoxY1 += scrollHeight;
}
}
gBrowser.tabContainer._animateElement.scrollbox.scrollTo({ top: scrollBoxY1, left: 0, behavior: 'auto'});
}, 20);
}
if( bTabWheel && !event.ctrlKey )
{
setTimeout(function()
{
if( event.originalTarget.localName != "slider" &&
event.originalTarget.localName != "thumb" &&
event.originalTarget.localName != "scrollbarbutton" )
{
gBrowser.tabContainer.advanceSelectedTab(dir, wrap);
if( (gBrowser.tabContainer._firstTab == gBrowser.selectedTab) ||
(gBrowser.tabContainer._lastTab == gBrowser.selectedTab) )
{
gBrowser.selectedTab.scrollIntoView();
}
}
}, 50);
}
}, false);
//-------------------------------------------------------------------------------------------
gBrowser.tabContainer.clearDropIndicator = function() {
var tabs = this.allTabs;
for (let i = 0, len = tabs.length; i < len; i++) {
tabs[i].style.removeProperty("border-left-color");
tabs[i].style.removeProperty("border-right-color");
}
}
gBrowser.tabContainer.addEventListener("dragleave", function(event) { this.clearDropIndicator(event); }, true);
gBrowser.tabContainer.on_dragover = function(event) {
this.clearDropIndicator();
var effects = this._getDropEffectForTabDrag(event);
var ind = this._tabDropIndicator;
if (effects == "" || effects == "none") {
ind.hidden = true;
return;
}
event.preventDefault();
event.stopPropagation();
if (effects == "link") {
let tab = this._getDragTargetTab(event, true);
if (tab) {
if (!this._dragTime) {
this._dragTime = Date.now();
}
if (Date.now() >= this._dragTime + this._dragOverDelay) {
this.selectedItem = tab;
}
ind.hidden = true;
return;
}
}
let newIndex = this._getDropIndex(event, effects == "link");
let children = this.allTabs;
if (newIndex == children.length) {
children[newIndex - 1].style.setProperty("border-right-color","red","important");
} else {
children[newIndex].style.setProperty("border-left-color","red","important");
}
}
gBrowser.tabContainer.on_drop = function(event) {
this.clearDropIndicator();
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, false);
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 = this._getDropIndex(event, false);
// "animDropIndex" in draggedTab._dragData &&
// draggedTab._dragData.animDropIndex;
let incrementDropIndex = true;
if (dropIndex && dropIndex > movingTabs[0]._tPos) {
dropIndex--;
incrementDropIndex = false;
}
let animate = gBrowser.animationsEnabled;
if (oldTranslateX && oldTranslateX != newTranslateX && animate) {
for (let tab of movingTabs) {
tab.setAttribute("tabdrop-samewindow", "true");
tab.style.transform = "translateX(" + newTranslateX + "px)";
let onTransitionEnd = transitionendEvent => {
if (
transitionendEvent.propertyName != "transform" ||
transitionendEvent.originalTarget != tab
) {
return;
}
tab.removeEventListener("transitionend", onTransitionEnd);
tab.removeAttribute("tabdrop-samewindow");
this._finishAnimateTabMove();
if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
dropIndex++;
}
}
gBrowser.syncThrobberAnimations(tab);
};
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) {
let newIndex = this._getDropIndex(event, false);
let newTabs = [];
for (let tab of movingTabs) {
let newTab = gBrowser.adoptTab(tab, newIndex++, tab == draggedTab);
newTabs.push(newTab);
}
// Restore tab selection
gBrowser.addRangeToMultiSelectedTabs(
newTabs[0],
newTabs[newTabs.length - 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, true);
let userContextId = this.selectedItem.getAttribute("usercontextid");
let replace = !!targetTab;
let newIndex = this._getDropIndex(event, true);
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;
}
}
gBrowser.tabContainer._getDropIndex = function(event, isLink) {
var tabs = this.allTabs;
var tab = this._getDragTargetTab(event, isLink);
if (!RTL_UI) {
for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
if (
event.screenY <
tabs[i].screenY + tabs[i].getBoundingClientRect().height
) {
if (
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
) {
return i;
}
if (
event.screenX >
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2 &&
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width
) {
return i + 1;
}
}
}
} else {
for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
if (
event.screenY <
tabs[i].screenY + tabs[i].getBoundingClientRect().height
) {
if (
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width &&
event.screenX >
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
) {
return i;
}
if (
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
) {
return i + 1;
}
}
}
}
return tabs.length;
}
}bei mir schon, habs extra mit frischem Profil getestet. Funktioniert einwandfrei wenn ich an den linken Rand fahre.
probiere doch nur dieses einzige Skript aus, dann siehst du es.
Was ist richtig? "use strict"; oder "user strict";
Ersteres, siehe auch https://developer.mozilla.org/de/docs/Web/Ja…nce/Strict_mode für eine Erklärung, was das ist.
^L^ :
Mit dem Skript wird keine neue Tableiste erzeugt. Die vorhandene Tableiste wird nur (optional) an eine andere Position verschoben.
Optische Anpassungen in der CSS und Skripte, die die Tableiste verändern, solltest du, wie Zitronella geschrieben hat, erst mal auskommentieren. Du kannst ja die Variable 'bTabsAutoPopup' testweise auch mal auf 'false' setzen, dann sollte die sich die MultiLine-Tableiste wieder an gewohnter Position befinden.
Werd ein neues Profil erstellen und eure Tipps mal durchtesten - aber heut nicht mehr. 
Danke einstweilen.
Die vertikale Tableiste wird nämlich erst angezeigt, wenn du mit der Maus an den linken Rand fährst ("Autopopup"). Auch wenn es merkwürdig klingt: Ich habe es seinerzeit nicht hinbekommen, dass die Tableiste immer angezeigt wird, was ja eigentlich einfacher sein sollte...
Teste folgendes, damit die Leiste immer sichtbar ist:
Im Skript aus #12 ersetze Zeile 302:
tabsToolbar.classList.add('StyleHidingTabsToolbar');durch
tabsToolbar.classList.add('StyleShowingTabsToolbar');und kommentiere diese Zeilen aus:
tabsToolbar.classList.add('StyleShowingTabsToolbar');
tabsToolbar.classList.remove('StyleHidingTabsToolbar'); tabsToolbar.classList.add('StyleHidingTabsToolbar');
tabsToolbar.classList.remove('StyleShowingTabsToolbar');Teste folgendes, damit die Leiste immer sichtbar ist:
Danke, aber das funktioniert leider nicht, da die Tableiste dann über dem Clientbereich liegt und ihn verdeckt. Man müsste die Tableiste vor den Clientbereich setzen (wie die Sidebar). Die beiden Style-Klassen hatte ich ja extra für das "Autopopup" deklariert. Vielleicht hast du ja noch eine andere Lösung...
