mirror of
https://github.com/zen-browser/desktop.git
synced 2025-09-05 19:08:18 +00:00
Update dependencies and enhance UI styles for improved user experience
This commit is contained in:
mr. M
@@ -33,7 +33,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/zen-browser/core#readme",
|
||||
"dependencies": {
|
||||
"@zen-browser/surfer": "^1.5.2"
|
||||
"@zen-browser/surfer": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"husky": "^9.1.5",
|
||||
|
||||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
@@ -9,8 +9,8 @@ importers:
|
||||
.:
|
||||
dependencies:
|
||||
'@zen-browser/surfer':
|
||||
specifier: ^1.5.2
|
||||
version: 1.5.2
|
||||
specifier: ^1.6.0
|
||||
version: 1.6.0
|
||||
devDependencies:
|
||||
husky:
|
||||
specifier: ^9.1.5
|
||||
@@ -119,8 +119,8 @@ packages:
|
||||
'@types/node@17.0.45':
|
||||
resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
|
||||
|
||||
'@zen-browser/surfer@1.5.2':
|
||||
resolution: {integrity: sha512-QJT12gcFWdicEVlh0o9tVi7FQmoGuYuy+ROgzFzLMclbQSyJxhVaYy08A1S0y+Fn2rzs7BflmZ1zXPrabiLgpA==}
|
||||
'@zen-browser/surfer@1.6.0':
|
||||
resolution: {integrity: sha512-UGcPVhr0SDdHlH5YUudtsc3yYBkDllLXWyvL97bME6JHBMNlnYg8WFxPE1MVYkUp0VULZzuQMvJv4oYygQBE8A==}
|
||||
hasBin: true
|
||||
|
||||
ansi-escapes@7.0.0:
|
||||
@@ -1003,7 +1003,7 @@ snapshots:
|
||||
|
||||
'@types/node@17.0.45': {}
|
||||
|
||||
'@zen-browser/surfer@1.5.2':
|
||||
'@zen-browser/surfer@1.6.0':
|
||||
dependencies:
|
||||
'@resvg/resvg-js': 1.4.0
|
||||
async-icns: 1.0.2
|
||||
|
||||
@@ -121,7 +121,7 @@ pref('zen.view.sidebar-height-throttle', 200); // in ms
|
||||
pref('zen.view.sidebar-expanded.max-width', 400);
|
||||
|
||||
pref('zen.view.show-bottom-border', false);
|
||||
pref('zen.view.use-single-toolbar', false);
|
||||
pref('zen.view.use-single-toolbar', true);
|
||||
|
||||
#ifndef XP_MACOSX
|
||||
pref('zen.view.hide-window-controls', true);
|
||||
|
||||
@@ -117,11 +117,14 @@ var gZenUIManager = {
|
||||
|
||||
var gZenVerticalTabsManager = {
|
||||
init() {
|
||||
ChromeUtils.defineLazyGetter(this, 'isWindowsStyledButtons', () => {
|
||||
return !(window.AppConstants.platform === 'macosx' || window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches);
|
||||
});
|
||||
|
||||
var updateEvent = this._updateEvent.bind(this);
|
||||
Services.prefs.addObserver('zen.tabs.vertical', updateEvent);
|
||||
Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
|
||||
Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
|
||||
Services.prefs.addObserver('zen.view.compact', updateEvent);
|
||||
Services.prefs.addObserver('zen.view.use-single-toolbar', updateEvent);
|
||||
|
||||
gZenCompactModeManager.addEventListener(updateEvent);
|
||||
@@ -132,6 +135,10 @@ var gZenVerticalTabsManager = {
|
||||
|
||||
XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true);
|
||||
|
||||
if (this.isWindowsStyledButtons) {
|
||||
document.documentElement.setAttribute("zen-window-buttons-reversed", true);
|
||||
}
|
||||
|
||||
if (tabs) {
|
||||
tabs.addEventListener('mouseup', this.openNewTabOnTabsMiddleClick.bind(this));
|
||||
}
|
||||
@@ -166,10 +173,6 @@ var gZenVerticalTabsManager = {
|
||||
document.getElementById('viewToolbarsMenuSeparator').before(fragment);
|
||||
},
|
||||
|
||||
get isWindowsStyledButtons() {
|
||||
return !(window.AppConstants.platform === 'macosx'|| window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches);
|
||||
},
|
||||
|
||||
get _topButtonsSeparatorElement() {
|
||||
if (this.__topButtonsSeparatorElement) {
|
||||
return this.__topButtonsSeparatorElement;
|
||||
@@ -180,18 +183,27 @@ var gZenVerticalTabsManager = {
|
||||
return this.__topButtonsSeparatorElement;
|
||||
},
|
||||
|
||||
get actualWindowButtons() {
|
||||
// we have multiple ".titlebar-buttonbox-container" in the DOM, because of the titlebar
|
||||
if (!this.__actualWindowButtons) {
|
||||
this.__actualWindowButtons = document.querySelector('#nav-bar .titlebar-buttonbox-container');
|
||||
}
|
||||
return this.__actualWindowButtons;
|
||||
},
|
||||
|
||||
_updateEvent() {
|
||||
this._updateMaxWidth();
|
||||
const topButtons = document.getElementById('zen-sidebar-top-buttons');
|
||||
const customizationTarget = document.getElementById('nav-bar-customization-target');
|
||||
const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
|
||||
const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
|
||||
const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
|
||||
const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs;
|
||||
|
||||
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
|
||||
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
|
||||
|
||||
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
|
||||
if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs) {
|
||||
if (isRightSide && isVerticalTabs) {
|
||||
this.navigatorToolbox.setAttribute('zen-right-side', 'true');
|
||||
} else {
|
||||
this.navigatorToolbox.removeAttribute('zen-right-side');
|
||||
@@ -210,11 +222,13 @@ var gZenVerticalTabsManager = {
|
||||
}
|
||||
|
||||
if (!isVerticalTabs) {
|
||||
const navbarContainer = document.getElementById('zen-appcontent-navbar-container');
|
||||
document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
|
||||
}
|
||||
|
||||
if (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs) {
|
||||
let windowButtons = this.actualWindowButtons;
|
||||
let doNotChangeWindowButtons = !isCompactMode && isRightSide && this.isWindowsStyledButtons;
|
||||
|
||||
if (isSingleToolbar) {
|
||||
const navBar = document.getElementById('nav-bar');
|
||||
this._navbarParent = navBar.parentElement;
|
||||
let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)');
|
||||
@@ -229,11 +243,8 @@ var gZenVerticalTabsManager = {
|
||||
}
|
||||
buttonsTarget.prepend(document.getElementById('unified-extensions-button'));
|
||||
buttonsTarget.prepend(document.getElementById('PanelUI-button'));
|
||||
if (this.isWindowsStyledButtons) {
|
||||
const windowButtons = document.querySelector('#nav-bar > .titlebar-buttonbox-container');
|
||||
if (windowButtons) {
|
||||
document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
|
||||
}
|
||||
if (this.isWindowsStyledButtons && !doNotChangeWindowButtons) {
|
||||
document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
|
||||
}
|
||||
document.documentElement.setAttribute("zen-single-toolbar", true);
|
||||
if (isCompactMode) {
|
||||
@@ -245,8 +256,9 @@ var gZenVerticalTabsManager = {
|
||||
titlebar.before(topButtons);
|
||||
titlebar.before(navBar);
|
||||
}
|
||||
document.documentElement.setAttribute("zen-has-set-single-toolbar", true);
|
||||
} else if (document.documentElement.hasAttribute("zen-has-set-single-toolbar")) {
|
||||
this._hasSetSingleToolbar = true;
|
||||
} else if (this._hasSetSingleToolbar) {
|
||||
this._hasSetSingleToolbar = false;
|
||||
// Do the opposite
|
||||
const navBar = document.getElementById('nav-bar');
|
||||
this._navbarParent.prepend(navBar);
|
||||
@@ -258,22 +270,21 @@ var gZenVerticalTabsManager = {
|
||||
}
|
||||
}
|
||||
document.documentElement.removeAttribute("zen-single-toolbar");
|
||||
document.documentElement.removeAttribute("zen-has-set-single-toolbar");
|
||||
navBar.appendChild(document.getElementById('PanelUI-button'));
|
||||
if (this.isWindowsStyledButtons) {
|
||||
const windowButtons = document.querySelector('#zen-appcontent-navbar-container > .titlebar-buttonbox-container');
|
||||
if (windowButtons) {
|
||||
document.getElementById('nav-bar').append(windowButtons);
|
||||
}
|
||||
} else {
|
||||
const windowButtons = document.querySelector('#zen-appcontent-navbar-container > .titlebar-buttonbox-container');
|
||||
if (windowButtons) {
|
||||
document.getElementById('nav-bar').prepend(windowButtons);
|
||||
if (!doNotChangeWindowButtons) {
|
||||
if (this.isWindowsStyledButtons) {
|
||||
navBar.append(windowButtons);
|
||||
} else {
|
||||
navBar.prepend(windowButtons);
|
||||
}
|
||||
}
|
||||
CustomizableUI.zenInternalCU._rebuildRegisteredAreas();
|
||||
}
|
||||
|
||||
|
||||
if (doNotChangeWindowButtons) {
|
||||
document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons);
|
||||
}
|
||||
|
||||
// Always move the splitter next to the sidebar
|
||||
this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
|
||||
},
|
||||
|
||||
@@ -97,6 +97,10 @@
|
||||
|
||||
.titlebar-buttonbox-container {
|
||||
height: 100%;
|
||||
|
||||
& .titlebar-buttonbox {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-platform: macos) {
|
||||
|
||||
@@ -57,6 +57,11 @@
|
||||
background: var(--zen-dialog-background);
|
||||
outline: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
||||
|
||||
:root[zen-single-toolbar='true'] {
|
||||
padding-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.color-sidebar') {
|
||||
background: var(--zen-main-browser-background-toolbar) !important;
|
||||
background-attachment: fixed !important;
|
||||
@@ -65,12 +70,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
#navigator-toolbox {
|
||||
top: var(--zen-element-separation);
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:hover,
|
||||
#navigator-toolbox[zen-has-hover],
|
||||
#navigator-toolbox:focus-within,
|
||||
@@ -85,60 +84,66 @@
|
||||
|
||||
transform: translateX(calc(100% - var(--zen-element-separation)));
|
||||
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
|
||||
transform: translateX(calc(-100% + var(--zen-element-separation)));
|
||||
transform: translateX(calc(-100% + var(--zen-element-separation) + 1px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-top-align: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
#sidebar-box,
|
||||
#titlebar,
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
|
||||
margin-top: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
||||
margin-top: calc(var(--zen-element-separation) * 2) !important;
|
||||
}
|
||||
|
||||
#zen-appcontent-navbar-container {
|
||||
--zen-compact-toolbar-offset: 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateY(calc(-100% + var(--zen-element-separation) + 1px));
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
|
||||
border-bottom-left-radius: var(--zen-border-radius);
|
||||
border-bottom-right-radius: var(--zen-border-radius);
|
||||
transition: all 0.1s ease-in-out;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
background: var(--zen-dialog-background);
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
|
||||
background-attachment: fixed;
|
||||
backdrop-filter: blur(5px);
|
||||
background: var(--zen-main-browser-background-toolbar);
|
||||
background-size: 100% 2000px;
|
||||
border-bottom: 1px solid var(--zen-colors-border);
|
||||
:root:not([zen-single-toolbar='true']) {
|
||||
#navigator-toolbox {
|
||||
top: var(--zen-element-separation);
|
||||
}
|
||||
}
|
||||
|
||||
#zen-appcontent-navbar-container:hover,
|
||||
#zen-appcontent-navbar-container[zen-has-hover],
|
||||
#zen-appcontent-navbar-container:focus-within,
|
||||
#zen-appcontent-navbar-container[zen-user-show],
|
||||
#zen-appcontent-navbar-container[has-popup-menu],
|
||||
#zen-appcontent-navbar-container:has(*[open='true']) {
|
||||
opacity: 1;
|
||||
border-top-width: 1px;
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-top-align: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
transform: translateY(-1px);
|
||||
#sidebar-box,
|
||||
#titlebar,
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
|
||||
margin-top: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
||||
margin-top: calc(var(--zen-element-separation) * 2) !important;
|
||||
}
|
||||
|
||||
#zen-appcontent-navbar-container {
|
||||
--zen-compact-toolbar-offset: 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateY(calc(-100% + var(--zen-element-separation) + 1px));
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
|
||||
border-bottom-left-radius: var(--zen-border-radius);
|
||||
border-bottom-right-radius: var(--zen-border-radius);
|
||||
transition: all 0.1s ease-in-out;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
background: var(--zen-dialog-background);
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
|
||||
background-attachment: fixed;
|
||||
backdrop-filter: blur(5px);
|
||||
background: var(--zen-main-browser-background-toolbar);
|
||||
background-size: 100% 2000px;
|
||||
border-bottom: 1px solid var(--zen-colors-border);
|
||||
}
|
||||
}
|
||||
|
||||
#zen-appcontent-navbar-container:hover,
|
||||
#zen-appcontent-navbar-container[zen-has-hover],
|
||||
#zen-appcontent-navbar-container:focus-within,
|
||||
#zen-appcontent-navbar-container[zen-user-show],
|
||||
#zen-appcontent-navbar-container[has-popup-menu],
|
||||
#zen-appcontent-navbar-container:has(*[open='true']) {
|
||||
opacity: 1;
|
||||
border-top-width: 1px;
|
||||
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
#identity-permission-box {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
padding: 6px;
|
||||
padding: 6px !important;
|
||||
}
|
||||
|
||||
& #urlbar-container,
|
||||
@@ -123,38 +123,45 @@
|
||||
#zen-appcontent-navbar-container {
|
||||
display: flex;
|
||||
-moz-window-dragging: drag;
|
||||
min-height: var(--zen-element-separation);
|
||||
|
||||
& #PersonalToolbar {
|
||||
width: -moz-available;
|
||||
}
|
||||
|
||||
:root:not([customizing]) & {
|
||||
@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;
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
/* We enable this trick IF we follow any of theses conditions:
|
||||
* - We are on a Mac
|
||||
* - We are on a Linux with reversed CSD
|
||||
* - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
|
||||
*/
|
||||
:root:is(
|
||||
[zen-window-buttons-reversed='true']:has(#TabsToolbar:not([collapsed='true'])),
|
||||
:not([zen-window-buttons-reversed='false'])
|
||||
):not([customizing]) & {
|
||||
@media (-moz-bool-pref: 'zen.view.hide-window-controls') {
|
||||
& {
|
||||
transition: height 0.2s ease-out, opacity 0.2s ease-out;
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
& .titlebar-buttonbox-container {
|
||||
margin-left: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-platform: macos) and (-moz-gtk-csd-reversed-placement) {
|
||||
:root[zen-window-buttons-reversed='true'] & {
|
||||
&:has(#PersonalToolbar[collapsed="true"]) {
|
||||
display: none;
|
||||
}
|
||||
@@ -349,12 +356,11 @@
|
||||
}
|
||||
|
||||
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
margin-right: var(--zen-toolbox-padding);
|
||||
|
||||
& .urlbar-input-container {
|
||||
padding-right: 2px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,8 +52,14 @@
|
||||
outline-color: none !important;
|
||||
}
|
||||
|
||||
#identity-icon-box {
|
||||
background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
|
||||
#identity-box.chromeUI:not([pageproxystate="invalid"]) {
|
||||
& #identity-icon-box {
|
||||
background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
|
||||
}
|
||||
|
||||
& #identity-icon-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#identity-permission-box:not(:hover):not(:focus-within) {
|
||||
@@ -69,10 +75,6 @@
|
||||
padding-inline-start: 8px !important;
|
||||
}
|
||||
|
||||
#identity-box:not([pageproxystate="invalid"]).chromeUI #identity-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user