mirror of
https://github.com/zen-browser/desktop.git
synced 2025-12-25 15:48:59 +00:00
Refactor ZenUIManager to add event listener for gZenCompactModeManager
This commit is contained in:
@@ -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();
|
||||
},
|
||||
|
||||
Submodule src/browser/base/content/zen-components updated: 80a8904bbc...e14fbd8e5c
@@ -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 */
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user