black7375
Min, max and close buttons misaligned when using compact/normal mode with vertical tabs
Describe the bug
I have the horizontal tabbar disabled and have Tree style tabs installed for vertical tabs.
This bug doesn't happen when not using vertical tabs.
When using normal density the hover effects don't fill the full space, in compact mode the hover effects take too much space.
This bug is only visible when hovering over any of the 3 buttons.
Should I also provide my Tree style tabs settings or would that not be the cause of this bug?
Expected behavior
The buttons should be aligned properly.
Screenshots
You might have to zoom in.
Compact:
Normal:
OS
Windows 10
OS - Others
No response
Firefox Version
v 112.0
Distribution
Theme
- [ ] Light
- [X] Dark
- [ ] Alpenglow (System: Light)
- [ ] Alpenglow (System: Dark)
- [ ] System Default
- [X] Others: (e.g. Photon Colors, Google Chrome Dark, Fairytale Of Nature)
Theme - More Info
The system theme is dark mode and the specific theme I use in firefox is this one: https://addons.mozilla.org/en-GB/firefox/addon/perfect-darkness/
user.js setup
user_pref("userChrome.icon.disabled", true);
user_pref("userChrome.hidden.tabbar", true);
user_pref("userChrome.autohide.sidebar", true);
user_pref("userChrome.hidden.sidebar_header", true);
user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true);
user_pref("userChrome.sidebar.overlap", true);
Additional context
My userChrome is as follows:
/*** Right-click menu ***/
html#main-window menupopup:not(.in-menulist) {
--menu-border-color: black !important;
--panel-border-color: var(--menu-border-color) !important;
}
html#main-window menupopup:not(.in-menulist) menuseparator {
--menu-border-color: black !important;
border-top: 1px solid var(--menu-border-color) !important;
}
/*** Drop-down menus menu ***/
:root {
--panel-separator-color: black !important;
}
html#main-window menupopup:not(.in-menulist, [placespopup]) menuseparator,
toolbarbutton menupopup[placespopup] menuseparator::before {
--menu-border-color: black !important;
}
/*** Nav bar horizontal seperators ***/
:root{
--autocomplete-popup-separator-color: black !important;
}
/*** Tooltips ***/
tooltip {
background-color: #1E2021!important;
color: white!important;
border-color: black!important;
}
/*** Statuspanel ***/
:root #statuspanel-label{
background-color: rgb(30,32,33) !important;
color: rgb(255,255,255) !important;
border-color: black !important;
}
/*** Footer & Container ***/
#customization-footer {
border: black !important;
background-color: #1E2021 !important;
}
#customization-container {
background-color: #1E2021 !important;
background-image: none !important;
}
/* Sidebery */
#main-window[titlepreface*="[S] "] .tabbrowser-tab {
visibility: collapse;
}
#main-window[titlepreface*="[S] "] .titlebar-button {
height: 40px;
}
#main-window[titlepreface*="[S] "] #nav-bar {
margin-top: -40px;
}
#main-window[titlepreface*="[S] "][tabsintitlebar="true"] #nav-bar {
margin-right: 137px;
}
#main-window[titlepreface*="[S] "] #titlebar-spacer {
background-color: var(--chrome-secondary-background-color);
}
#main-window[titlepreface*="[S] "] #titlebar-buttonbox-container {
background-color: var(--chrome-secondary-background-color);
}
#main-window[titlepreface*="[S] "] .titlebar-color {
background-color: var(--toolbar-bgcolor);
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
visibility: collapse;
}
/* Show sidebar only when the cursor is over it */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
--uc-sidebar-width: 47px;
--uc-sidebar-hover-width: 232px;
--uc-autohide-sidebar-delay: 500ms; /* Wait 0.6s before hiding sidebar */
position: relative;
min-width: var(--uc-sidebar-width) !important;
width: var(--uc-sidebar-width) !important;
max-width: var(--uc-sidebar-width) !important;
z-index:1;
margin-top: -1px;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] {
direction: rtl;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > *{
direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl){
direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{
direction: rtl;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar {
transition: min-width 115ms linear !important;
min-width: var(--uc-sidebar-width) !important;
will-change: min-width;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar {
min-width: var(--uc-sidebar-hover-width) !important;
transition: min-width 100ms linear var(--uc-autohide-sidebar-delay), box-shadow 500ms linear !important;
box-shadow: 0 0 4px rgba(10,10,10, .5);
clip-path: inset(0px -15px 0px -15px);
}
/* Add sidebar divider and give it background */
#sidebar,
#sidebar-header {
background-color: var(--toolbar-bgcolor) !important;
border-inline: 1px solid var(--chrome-content-separator-color);
border-inline-width: 0px 1px;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > * {
border-inline-width: 1px 0px;
}
/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel {
inset-inline: auto 0px !important;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel-label {
margin-inline: 0px !important;
border-left-style: solid !important;
}
The hover effect specifically, there is no visible overlap when not hovering.
In example, if you don't want to use these three buttons, then you should use the MinMaxClose by xiaoxiaoflood. It is just one single button for Minimize, Maximize and Close. I'm using MinMaxClose too.
https://github.com/xiaoxiaoflood/firefox-scripts
I'm not advertising, I'm just advising.
And for disabling these three buttons (which you don't like) use the userChrome.hidden.titlebar_container in about:config.
Damn, that is an interesting feature I'll definitely try it out, but since I only recently switched to vertical tabs I think I need some time to get used to it before adding another novel feature.
In example, if you don't want to use these three buttons, then you should use the MinMaxClose by xiaoxiaoflood. It is just one single button for Minimize, Maximize and Close. I'm using MinMaxClose too.
https://github.com/xiaoxiaoflood/firefox-scripts
@Patricek0056 Is this no longer working with Firefox 120?
EDIT: Nevermind, I found this https://github.com/xiaoxiaoflood/firefox-scripts/issues/265
