Last active
September 12, 2024 04:23
-
-
Save bigshans/4462cb5ca467b5ea401b7d2d00f84a55 to your computer and use it in GitHub Desktop.
EnhanceVerticalTab
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ===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(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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