Skip to content

Instantly share code, notes, and snippets.

@bigshans
Last active September 12, 2024 04:23
Show Gist options
  • Save bigshans/4462cb5ca467b5ea401b7d2d00f84a55 to your computer and use it in GitHub Desktop.
Save bigshans/4462cb5ca467b5ea401b7d2d00f84a55 to your computer and use it in GitHub Desktop.
EnhanceVerticalTab
// ===UserScript==
// @name EnhanceVerticalTab
// @description EVT
// @include main
// @author Bigshans
// @version 2024/7/16 21:44 增加对标签抓取的支持,以及目前 positionend 的修复
// ==/UserScript==
window.addEventListener("MozAfterPaint", function () {
if (gBrowserInit.delayedStartupFinished) {
EnhanceVerticalTab();
} else {
let delayedStartupFinished = (subject, topic) => {
if (topic == "browser-delayed-startup-finished" &&
subject == window) {
Services.obs.removeObserver(delayedStartupFinished, topic);
EnhanceVerticalTab();
}
};
Services.obs.addObserver(delayedStartupFinished,
"browser-delayed-startup-finished");
}
}, { once: true });
function EnhanceVerticalTab() {
const initPosition = 'right'
const sidebarMainContainer = document.querySelector('#sidebar-main')
const sidebarMain = document.querySelector('#sidebar-main > sidebar-main');
const sidebarBox = document.querySelector('#sidebar-box');
if (initPosition === 'right') {
sidebarMainContainer.style.order = 5;
sidebarMainContainer.setAttribute('positionend', true)
} else {
sidebarMainContainer.style.order = 1;
sidebarMainContainer.removeAttribute('positionend')
}
let expandSidebar = false;
sidebarMain.addEventListener('mouseenter', () => {
expandSidebar = true;
});
sidebarMain.addEventListener('mouseleave', () => {
expandSidebar = false;
});
sidebarMain.addEventListener('mouseover', () => {
expandSidebar = true;
});
let touch = false;
const isRegesiter = new WeakSet();
const touchStart = () => {
touch = true;
};
const touchEnd = () => {
touch = false;
};
setTimeout(() => {
const tabs = document.querySelectorAll('tab');
for (let i = 0, len = tabs.length; i < len; i++) {
if (isRegesiter.has(tabs[i])) {
continue;
}
tabs[i].addEventListener('dragstart', touchStart);
tabs[i].addEventListener('dragend', touchEnd);
isRegesiter.add(tabs[i])
}
}, 100);
const target = document.querySelector('tabs')
const config = { childList: true, subtree: true, attributes: true };
const observer = new MutationObserver((mutationList, observer) => {
mutationList.forEach((mutation) => {
const node = mutation.target;
if (isRegesiter.has(node)) {
return;
}
node.addEventListener('dragstart', touchStart);
node.addEventListener('dragend', touchEnd);
isRegesiter.add(node);
});
});
observer.observe(target, config);
const ric = () => {
let sidebarBoxVisibility = !sidebarBox.hasAttribute('hidden');
if (sidebarBoxVisibility) {
if (sidebarMain.hasAttribute('expanded')) {
sidebarMain.toggleAttribute('expanded');
}
requestIdleCallback(ric);
return;
}
if (touch || expandSidebar) {
if (!sidebarMain.hasAttribute('expanded')) {
sidebarMain.toggleAttribute('expanded');
}
} else {
if (sidebarMain.hasAttribute('expanded')) {
sidebarMain.toggleAttribute('expanded');
}
}
requestIdleCallback(ric);
};
ric();
}
/* TAB: close button colors on hover */
.tab-close-button:hover {
background-color: rgba(255,0,0,.7) !important;
fill: white !important;
}
.tabbrowser-tab:not([pinned]) .tab-close-button {
display: inline-flex !important;
}
.tabbrowser-tab:not([pinned]) .tab-close-button {
max-width: 0 !important;
}
/* close button shown on hover */
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
max-width: 20px !important;
}
#sidebar-main[positionend] {
position: relative;
}
#sidebar-main[positionend] sidebar-main[expanded] {
position: absolute;
height: 100%;
right: 0;
}
#sidebar-main:has(sidebar-main[expanded]) {
max-width: 50px;
min-width: 50px;
z-index: 1;
}
#sidebar-main sidebar-main[expanded] {
background: var(--toolbar-bgcolor);
border-right: 1px;
min-width: 216px;
transition: min-width ease-in-out 0.5s;
}
#sidebar-main sidebar-main[expanded] #vertical-tabs #tabs-newtab-button {
width: 100%;
justify-content: center;
align-content: center;
height: 44px;
}
#sidebar-main sidebar-main[expanded] #vertical-tabs toolbarbutton#tabs-newtab-button.toolbarbutton-1 image.toolbarbutton-icon {
width: 100%;
margin-left: calc(50% - 16px);
margin-right: calc(50% - 16px);
}
#TabsToolbar-customization-target {
display: none;
}
#newtab-button-container {
order: 1;
padding-top: 0 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment