search

black7375 / Firefox-UI-Fix

🦊 I respect proton UI and aim to improve it.
Mozilla Public License 2.0
5.32k stars 187 forks source link

Min, max and close buttons misaligned when using compact/normal mode with vertical tabs #675

Open Zabooby opened 1 year ago

Zabooby commented 1 year ago

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: image image image

Normal: image image

OS

Windows 10

OS - Others

No response

Firefox Version

v 112.0

Distribution

Theme

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;
}
Aleksandra0056 commented 1 year ago

So, you think the buttons on the Tab bar, and not on the Title bar?

Zabooby commented 1 year ago

The hover effect specifically, there is no visible overlap when not hovering.

Aleksandra0056 commented 1 year ago

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.

Zabooby commented 1 year ago

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.

BobbyWibowo commented 9 months ago

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