Refactor ZenUIManager to add event listener for gZenCompactModeManager

This commit is contained in:
mauro-balades
2024-09-21 16:58:22 +02:00
parent 4510bc64d6
commit a4edeb5b49
6 changed files with 21 additions and 22 deletions

View File

@@ -81,6 +81,7 @@ var gZenVerticalTabsManager = {
Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', updateEvent);
gZenCompactModeManager.addEventListener(updateEvent);
this._updateEvent();
this.initRightSideOrderContextMenu();
},

View File

@@ -35,7 +35,6 @@
:root:not([inDOMFullscreen='true']) #appcontent {
overflow: hidden;
padding: 1px;
}
:root:not([inDOMFullscreen='true']) #appcontent,
@@ -51,4 +50,5 @@
#tabbrowser-tabbox {
display: flex;
flex-direction: row;
padding: 1px; /* To allow the web view's shadow to be visible */
}

View File

@@ -43,8 +43,8 @@
border: 1px solid var(--zen-colors-border);
border-left-width: 0;
padding: var(--zen-toolbox-padding) !important;
transition: all 0.1s ease-in-out;
right: calc(100% - var(--zen-element-separation));
transition: all 0.2s ease-in-out;
right: calc(100% - var(--zen-element-separation) + 1px);
top: 50%;
opacity: 0;
@@ -54,7 +54,7 @@
border-left-width: 1px;
border-right-width: 0;
left: calc(100% - var(--zen-element-separation));
left: calc(100% - var(--zen-element-separation) - 1px);
right: unset;
border-top-left-radius: var(--zen-border-radius);
@@ -77,9 +77,9 @@
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
opacity: 1;
transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), -50%, 0);
transform: translate3d(calc(100% - var(--zen-element-separation)), -50%, 0);
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), -50%, 0);
transform: translate3d(calc(-100% + var(--zen-element-separation)), -50%, 0);
}
}
}
@@ -92,16 +92,16 @@
#zen-appcontent-navbar-container {
position: absolute;
top: 0;
transform: translateY(calc(-100% + var(--zen-element-separation)));
transform: translateY(calc(-100% + var(--zen-element-separation) + 1px));
left: 0;
z-index: 10;
background: var(--zen-themed-toolbar-bg);
box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 0 2px 2px rgba(0,0,0,.1) !important;
border-bottom-left-radius: var(--zen-border-radius);
border-bottom-right-radius: var(--zen-border-radius);
border: 1px solid var(--zen-colors-border);
border-top-width: 0px;
transition: all 0.1s ease-in-out;
transition: all 0.2s ease-in-out;
width: 100%;
opacity: 0;
}

View File

@@ -31,8 +31,6 @@
min-width: var(--zen-toolbox-min-width);
padding: var(--zen-toolbox-padding);
/* We do this to fix the padding of webview, the shadow overlaps one pixel */
padding-left: calc(var(--zen-toolbox-padding) - 1px);
padding-top: var(--zen-toolbox-top-align);
padding-bottom: var(--zen-element-separation);
@@ -152,7 +150,6 @@
#navigator-toolbox[zen-user-hover='true'][movingtab],
#navigator-toolbox[zen-user-hover='true'][flash-popup],
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
#mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
--zen-toolbox-min-width: fit-content;
@@ -161,8 +158,13 @@
min-width: 150px;
}
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
display: none;
& #zen-workspaces-button {
margin-left: 2px;
margin-right: 2px;
& .zen-workspace-sidebar-icon[no-icon='true'] {
display: none;
}
}
& #zen-sidebar-icons-wrapper {
@@ -274,7 +276,6 @@
#navigator-toolbox[zen-user-hover='true'][movingtab],
#navigator-toolbox[zen-user-hover='true'][flash-popup],
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
#mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) {
--zen-toolbox-max-width: 51px;
@@ -434,8 +435,6 @@
}
#TabsToolbar {
--hovered-verticaltab-width: 20em;
z-index: 1;
background-repeat: no-repeat !important;
background-position: center center !important;
@@ -449,15 +448,14 @@
border-top-right-radius: var(--zen-border-radius);
}
#navigator-toolbox:hover,
#navigator-toolbox[zen-has-hover],
#navigator-toolbox:focus-within,
#navigator-toolbox[movingtab],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
--zen-navigation-toolbar-min-width: 50px !important;
--zen-navigation-toolbar-min-width: 55.5px !important; /* + the width of the splitter */
max-width: var(--zen-navigation-toolbar-min-width) !important;
min-width: var(--zen-navigation-toolbar-min-width) !important;

View File

@@ -8,7 +8,7 @@
&:not([as-button='true']) {
border-radius: var(--zen-button-border-radius);
background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
padding: 6px;
padding: 5px;
height: fit-content;
gap: 3px;