mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-07-30 03:47:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add top buttons separator in Zen UI manager; update icon references and clean up styles

Browse Source
This commit is contained in:
mr. M
2024-11-21 00:30:55 +01:00
parent f3cf51f7ac
commit 10b9f03410
8 changed files with 162 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/browser/base/content/ZenUIManager.mjs
View File

@@ -167,6 +167,16 @@ var gZenVerticalTabsManager = {
return !(window.AppConstants.platform === 'macosx'|| window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches);
},
get _topButtonsSeparatorElement() {
if (this.__topButtonsSeparatorElement) {
return this.__topButtonsSeparatorElement;
}
this.__topButtonsSeparatorElement = document.createElement('div');
this.__topButtonsSeparatorElement.id = 'zen-sidebar-top-buttons-separator';
this.__topButtonsSeparatorElement.setAttribute('skipintoolbarset', 'true');
return this.__topButtonsSeparatorElement;
},
_updateEvent() {
this._updateMaxWidth();
const topButtons = document.getElementById('zen-sidebar-top-buttons');
@@ -197,16 +207,22 @@ var gZenVerticalTabsManager = {
let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)');
elements = Array.from(elements);
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
// Add separator if it doesn't exist
if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) {
buttonsTarget.append(this._topButtonsSeparatorElement);
}
for (const button of elements) {
buttonsTarget.append(button);
}
topButtons.appendChild(document.getElementById('unified-extensions-button'));
topButtons.appendChild(document.getElementById('PanelUI-button'));
buttonsTarget.prepend(document.getElementById('unified-extensions-button'));
buttonsTarget.prepend(document.getElementById('PanelUI-button'));
if (this.isWindowsStyledButtons) {
document.getElementById('zen-appcontent-navbar-container').append(
document.querySelector('#nav-bar > .titlebar-buttonbox-container')
);
const windowButtons = document.querySelector('#nav-bar > .titlebar-buttonbox-container');
if (windowButtons) {
document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
}
}
document.documentElement.setAttribute("zen-single-toolbar", true);
}
// Always move the splitter next to the sidebar

138
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -7,6 +7,24 @@
height: 100%;
}
:root[zen-single-toolbar='true'] {
& #zen-appcontent-navbar-container,
& #zen-sidebar-top-buttons {
--zen-toolbar-height: 32px;
height: var(--zen-toolbar-height);
}
& #zen-sidebar-top-buttons .toolbarbutton-1 {
& > .toolbarbutton-icon {
padding: 5px;
}
}
& #zen-sidebar-top-buttons-separator {
width: 100%;
}
}
#TabsToolbar > * {
justify-content: center;
}
@@ -17,12 +35,53 @@
#browser {
--zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
:root[zen-no-padding='true'] & {
--zen-toolbox-padding: 4px;
}
}
:root[zen-single-toolbar='true'] {
#urlbar-container {
width: -moz-available !important;
}
.sharing-icon,
#identity-icon,
.urlbar-icon,
#permissions-granted-icon,
#tracking-protection-icon,
#tracking-protection-icon-box,
#blocked-permissions-container > .blocked-permission-icon {
width: 12px;
height: 12px;
}
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
margin-bottom: auto;
padding: 6px;
}
& #urlbar-container,
& #urlbar {
--urlbar-container-height: 40px !important;
--urlbar-height: 38px !important;
}
& #nav-bar {
margin-bottom: 8px;
}
& #zen-sidebar-top-buttons {
margin: 4px 0;
}
& #PanelUI-menu-button {
padding: 0 !important;
}
}
#vertical-pinned-tabs-container-separator {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
margin: 8px auto;
@@ -55,22 +114,51 @@
& toolbarspring { display: none; }
}
@media (-moz-bool-pref: 'zen.view.use-single-toolbar') {
& #zen-appcontent-navbar-container > .titlebar-buttonbox-container {
margin-left: auto;
width: fit-content;
}
& #urlbar-container {
width: -moz-available !important;
}
}
.titlebar-spacer[type='pre-tabs'],
.titlebar-spacer[type='post-tabs'] {
display: none;
}
:root[zen-single-toolbar='true'] {
#zen-appcontent-navbar-container {
display: flex;
-moz-window-dragging: drag;
& #PersonalToolbar {
width: -moz-available;
}
@media (not (-moz-platform: macos)) and (not (-moz-gtk-csd-reversed-placement)) {
@media (-moz-bool-pref: 'zen.view.hide-window-controls') {
& {
transition: height 0.2s ease-out, opacity 0.2s ease-out;
}
&:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) {
transition-delay: 0.2s;
height: var(--zen-element-separation);
overflow: hidden;
opacity: 0;
& > * {
pointer-events: none;
}
}
}
& .titlebar-buttonbox-container {
margin-left: auto;
width: fit-content;
}
}
@media (-moz-platform: macos) and (-moz-gtk-csd-reversed-placement) {
&:has(#PersonalToolbar[collapsed="true"]) {
display: none;
}
}
}
}
#TabsToolbar-customization-target {
position: relative;
max-width: 100%;
@@ -248,12 +336,24 @@
}
& #nav-bar {
padding: var(--zen-element-separation);
padding-right: 0;
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
padding-left: 0;
padding-right: var(--zen-element-separation);
:root[zen-single-toolbar='true'] & {
margin-left: var(--zen-toolbox-padding);
width: calc(100% - var(--zen-toolbox-padding));
& .urlbar-input-container {
padding-left: 2px;
}
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
padding-left: 0;
margin-right: var(--zen-toolbox-padding);
& .urlbar-input-container {
padding-right: 2px;
padding-left: 0;
}
}
}
}
@@ -503,18 +603,20 @@
order: -1;
min-width: unset !important;
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
--toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
& #zen-sidebar-top-buttons-customization-target {
height: 100%;
align-items: center;
padding-inline-start: var(--zen-toolbox-padding);
#nav-bar:has(&) & {
padding-inline-start: var(--toolbarbutton-outer-padding);
}
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
padding-inline-start: 0;
padding-inline-end: var(--zen-toolbox-padding);
}
& toolbarbutton {

38
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -9,7 +9,6 @@
--urlbarView-separator-color: var(--zen-colors-border);
--urlbarView-hover-background: var(--toolbarbutton-hover-background);
--urlbarView-highlight-background: var(--toolbarbutton-hover-background);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: var(--toolbarbutton-border-radius);
overflow: hidden;
padding: 1px;
@@ -36,12 +35,14 @@
}
#urlbar:not([focused='true']):not([breakout-extend="true"]) > #urlbar-background {
background: color-mix(in srgb, light-dark(#fff, var(--zen-colors-tertiary)) 60%, transparent 40%) !important;
background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
backdrop-filter: blur(10px);
}
#urlbar-background {
border: transparent !important;
margin: 1px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}
#urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background,
@@ -51,15 +52,13 @@
outline-color: none !important;
}
#identity-icon-box,
#identity-permission-box {
background: color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%) !important;
margin: 0 8px 0 0 !important;
#identity-icon-box {
background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
}
#identity-permission-box {
background: var(--zen-colors-border) !important;
}
#identity-permission-box:not(:hover):not(:focus-within) {
background: transparent !important;
}
#urlbar:is([focused], [open]) > #urlbar-background,
#searchbar:focus-within {
@@ -95,6 +94,10 @@
padding: 0 !important;
justify-content: center !important;
align-items: center !important;
margin: 0;
}
#tracking-protection-icon-container {
margin: 0 0 0 2px !important;
}
@@ -102,11 +105,8 @@
#tracking-protection-icon-container {
width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
}
#identity-permission-box {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
margin-top: auto !important;
margin-bottom: auto !important;
}
#identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-icon-box,
@@ -205,15 +205,6 @@ button.popup-notification-dropmarker {
border-radius: 10px !important;
}
/* Border radius of boxes on the left */
#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid'])
#identity-icon-box {
border-top-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* Extensions or similar */
#urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
border-radius: 10px !important;
@@ -275,6 +266,5 @@ button.popup-notification-dropmarker {
}*/
#PersonalToolbar:not([collapsed='true']) {
padding-bottom: 10px;
padding-left: 0 !important;
}