mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-02-05 11:27:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into zen-hide-mute-button

Browse Source
This commit is contained in:
mauro 🤙
2024-08-19 19:12:53 +02:00
committed by GitHub
parent e7013c4db4 7e3eba280b
commit 3d6707fe21
10 changed files with 312 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/browser/app/profile/zen-browser.js
View File

@@ -68,10 +68,14 @@ pref('zen.theme.toolbar-themed', true);
pref('zen.theme.pill-button', false);
pref('zen.view.compact', false);
pref('zen.view.compact.hide-toolbar', false);
pref('zen.view.sidebar-expanded', false);
pref('zen.view.sidebar-expanded.on-hover', false);
pref('zen.view.sidebar-expanded.show-button', true);
pref('zen.view.sidebar-expanded.max-width', 400);
pref('zen.view.sidebar-collapsed.hide-mute-button', true);
pref('zen.keyboard.shortcuts.enabled', true);
pref('zen.keyboard.shortcuts', ""); // Empty string means default shortcuts
pref('zen.keyboard.shortcuts.disable-firefox', false);
@@ -128,6 +132,10 @@ pref('dom.script_loader.bytecode_cache.strategy', 2);
// Extremly experimental features
pref("dom.webgpu.enabled", true);
// Font rendering
pref('gfx.font_rendering.cleartype_params.rendering_mode', 5);
pref('gfx.font_rendering.cleartype_params.gamma', 1750);
#include better-fox.js
// Betterfox overrides (Stay below the include directive)

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

@@ -28,8 +28,20 @@ var gZenVerticalTabsManager = {
//Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
Services.prefs.addObserver('zen.view.sidebar-expanded', this._updateEvent.bind(this));
Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', this._updateEvent.bind(this));
Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', this._updateOnHoverVerticalTabs.bind(this));
this._updateMaxWidth();
this.initRightSideOrderContextMenu();
this._updateOnHoverVerticalTabs();
},
_updateOnHoverVerticalTabs() {
let onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
let sidebar = document.getElementById('navigator-toolbox');
if (onHover) {
sidebar.setAttribute('zen-user-hover', 'true');
} else {
sidebar.removeAttribute('zen-user-hover');
}
},
initRightSideOrderContextMenu() {
@@ -89,6 +101,7 @@ var gZenVerticalTabsManager = {
toggleExpand() {
let expanded = !this.expanded;
Services.prefs.setBoolPref('zen.view.sidebar-expanded', expanded);
Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
},
};

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: 5cb3a8da2c...9a0959c50e

7
src/browser/base/content/zen-styles/zen-sidebar.css
View File

@@ -73,10 +73,7 @@
display: none;
}
#TabsToolbar .toolbarbutton-1:hover > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
#TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
.zen-sidebar-action-button:hover,
.zen-sidebar-action-button[open="true"] {
.zen-sidebar-action-button:hover {
background: var(--toolbarbutton-hover-background) !important;
}
@@ -215,7 +212,7 @@
@media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") {
#zen-expand-sidebar-button {
display: block;
display: flex;
}
}

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

@@ -241,124 +241,131 @@
}
}
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
#navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) {
& #navigator-toolbox {
--zen-navigation-toolbar-min-width: 155px;
min-width: var(--zen-navigation-toolbar-min-width) !important;
align-items: start;
transition: .2s;
width: 170px;
border: none;
padding-left: 2px;
}
& .tab-label-container {
display: block;
}
& #titlebar,
& #TabsToolbar,
& #TabsToolbar .toolbar-items {
width: 100%;
align-items: flex-start;
}
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) {
width: 100% !important;
border-radius: 8px;
}
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover {
background: var(--button-hover-bgcolor);
}
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text,
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon,
& #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack {
background: transparent !important;
}
& #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
display: flex;
justify-content: center;
align-items: center;
}
& .tabbrowser-tab {
max-width: unset !important;
&:not([pinned]) {
width: 100%;
&:hover .tab-close-button {
display: block !important;
}
& .tab-content {
position: relative;
width: 100%;
}
& .tab-stack {
justify-content: start;
padding: 10px;
width: 100% !important;
}
& .tab-label-container {
#tabbrowser-tabs:not([secondarytext-unsupported]) & {
display: flex;
align-items: center;
padding-left: 10px;
}
}
}
&:active,
.zen-sidebar-panel-button:active {
transform: scale(0.96) !important;
}
&[pinned] {
margin: 0 !important;
}
}
& #tabbrowser-arrowscrollbox::part(scrollbox) {
/* We have the pinned tabs on the top, next to each other,
* and the rest of the tabs are below them. */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr));
padding: calc(var(--zen-tabbrowser-padding) / 2);
}
& .tabbrowser-tab:not([pinned]),
& #tabbrowser-arrowscrollbox-periphery {
grid-column: 1 / -1;
}
& .tabbrowser-tab[pinned] {
grid-column: span 1;
min-width: 100%;
}
& #zen-sidebar-icons-wrapper {
width: -moz-available;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(37px, 1fr));
transition: .1s;
}
& #zen-sidebar-icons-wrapper::before {
width: 100%;
}
}
}
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
#navigator-toolbox {
width: fit-content !important;
}
}
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
#navigator-toolbox {
--zen-navigation-toolbar-min-width: 155px;
min-width: var(--zen-navigation-toolbar-min-width) !important;
align-items: start;
transition: .2s;
width: 170px;
border: none;
padding-left: 2px;
}
.tab-label-container {
display: block;
}
#titlebar,
#TabsToolbar,
#TabsToolbar .toolbar-items {
width: 100%;
align-items: flex-start;
}
#TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) {
width: 100% !important;
border-radius: 8px;
}
#TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover {
background: var(--button-hover-bgcolor);
}
#TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text,
#TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon,
#TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack {
background: transparent !important;
}
#tabbrowser-arrowscrollbox-periphery > toolbarbutton {
display: flex;
justify-content: center;
align-items: center;
}
.tabbrowser-tab {
max-width: unset !important;
&:not([pinned]) {
width: 100%;
&:hover .tab-close-button {
display: block !important;
}
& .tab-content {
position: relative;
width: 100%;
}
& .tab-stack {
justify-content: start;
padding: 10px;
width: 100% !important;
}
& .tab-label-container {
#tabbrowser-tabs:not([secondarytext-unsupported]) & {
display: flex;
align-items: center;
padding-left: 10px;
}
}
}
&:active,
.zen-sidebar-panel-button:active {
transform: scale(0.96) !important;
}
&[pinned] {
margin: 0 !important;
}
}
#tabbrowser-arrowscrollbox::part(scrollbox) {
/* We have the pinned tabs on the top, next to each other,
* and the rest of the tabs are below them. */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr));
padding: calc(var(--zen-tabbrowser-padding) / 2);
}
.tabbrowser-tab:not([pinned]),
#tabbrowser-arrowscrollbox-periphery {
grid-column: 1 / -1;
}
.tabbrowser-tab[pinned] {
grid-column: span 1;
min-width: 100%;
}
#zen-sidebar-icons-wrapper {
width: -moz-available;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(37px, 1fr));
transition: .1s;
}
#zen-sidebar-icons-wrapper::before {
width: 100%;
}
}
#navigator-toolbox[zen-user-hover="true"] {
width: fit-content !important;
}
/* Display the vertical tabs on the right side */
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) {
@@ -385,4 +392,85 @@
margin-right: 0 !important;
}
}
@media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") and (not (-moz-bool-pref: "zen.view.compact")) {
#zen-sidebar-splitter {
display: none !important;
}
#navigator-toolbox {
z-index: 1;
}
#TabsToolbar {
--hovered-verticaltab-width: 20em;
transition: 200ms, margin 400ms, border-color 0 ease-in-out !important;
z-index: 1;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-top-right-radius: var(--zen-border-radius);
transform: translateY(-1px);
}
#TabsToolbar:not(:hover) #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-content[class] > .tab-close-button[class] {
display: none !important;
visibility: hidden !important;
}
#TabsToolbar-customization-target:hover > .toolbarbutton-1 > .toolbarbutton-text {
transition-delay: 0.2s !important;
}
#TabsToolbar-customization-target:not(:hover) > #tabbrowser-tabs > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > .tab-label-container {
opacity: 0;
visibility: collapse;
transition: opacity 370ms,
visibility 370ms,
width 370ms ease-in-out !important;
}
#TabsToolbar-customization-target:not(:hover) > .toolbarbutton-1 > .toolbarbutton-text {
opacity: 0;
visibility: collapse;
transition: all 370ms !important;
}
#TabsToolbar-customization-target:hover > .toolbarbutton-1 > .toolbarbutton-text {
transition-delay: 0.2s !important;
}
#TabsToolbar:hover {
padding-right: .1rem !important;
}
#TabsToolbar:hover {
z-index: 100 !important;
width: 250px !important;
background-color: var(--zen-dialog-background);
border-top-color: var(--zen-colors-border);
border-right-color: var(--zen-colors-border);
margin-right: calc((var(--hovered-verticaltab-width) + 10px) * -1) !important;
}
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
#TabsToolbar:hover {
margin-left: calc((var(--hovered-verticaltab-width) + 10px) * -1) !important;
}
}
#TabsToolbar-customization-target:not(:hover) > #tabbrowser-tabs > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > .tab-label-container {
opacity: 0;
visibility: collapse;
transition: opacity 370ms,
visibility 370ms,
width 370ms ease-in-out !important;
}
}
}

34
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -18,25 +18,27 @@
}
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
#zen-workspaces-button .zen-workspace-sidebar-name {
display: block;
}
#navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) {
& #zen-workspaces-button .zen-workspace-sidebar-name {
display: block;
}
#zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] {
display: none;
}
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] {
display: none;
}
#zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name {
margin-left: 0;
}
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name {
margin-left: 0;
}
#zen-workspaces-button {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
padding: 2px 10px;
width: calc(100% - var(--zen-tabbrowser-padding) * 8) !important;
& #zen-workspaces-button {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
padding: 2px 10px;
width: calc(100% - var(--zen-tabbrowser-padding) * 8) !important;
}
}
}

33
src/browser/components/preferences/zen-settings.js
View File

@@ -144,10 +144,43 @@ var gZenLooksAndFeel = {
init() {
this._initializeColorPicker(this._getInitialAccentColor());
window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
this._initializeTabbarExpandForm();
gZenThemeBuilder.init();
gZenMarketplaceManager.init();
},
_initializeTabbarExpandForm() {
const form = document.getElementById("zen-expand-tabbar-strat");
const radios = form.querySelectorAll("input[type=radio]");
const onHoverPref = "zen.view.sidebar-expanded.on-hover";
const defaultExpandPref = "zen.view.sidebar-expanded";
if (Services.prefs.getBoolPref(onHoverPref)) {
form.querySelector("input[value=\"hover\"]").checked = true;
} else if (Services.prefs.getBoolPref(defaultExpandPref)) {
form.querySelector("input[value=\"expand\"]").checked = true;
} else {
form.querySelector("input[value=\"none\"]").checked = true;
}
for (let radio of radios) {
radio.addEventListener("change", e => {
switch (e.target.value) {
case "expand":
Services.prefs.setBoolPref(onHoverPref, false);
Services.prefs.setBoolPref(defaultExpandPref, true);
break;
case "none":
Services.prefs.setBoolPref(onHoverPref, false);
Services.prefs.setBoolPref(defaultExpandPref, false);
break;
case "hover":
Services.prefs.setBoolPref(onHoverPref, true);
Services.prefs.setBoolPref(defaultExpandPref, true);
break;
}
});
}
},
_initializeColorPicker(accentColor) {
let elem = document.getElementById("zenLooksAndFeelColorOptions");
elem.innerHTML = "";

20
src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
View File

@@ -96,9 +96,23 @@
<checkbox id="zenLooksAndFeelShowTabExpandButton"
data-l10n-id="zen-vertical-tabs-show-expand-button"
preference="zen.view.sidebar-expanded.show-button"/>
<checkbox id="zenLooksAndFeelExpandTabsByDefault"
data-l10n-id="zen-vertical-tabs-expand-tabs-by-default"
preference="zen.view.sidebar-expanded"/>
<label><html:h2 data-l10n-id="zen-vertical-tabs-expand-tabs-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-expand-tabs-description" />
<form xmlns="http://www.w3.org/1999/xhtml" id="zen-expand-tabbar-strat" autocomplete="off" class="indent">
<hbox>
<input type="radio" name="zen-expand-tabbar-value" value="expand" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
<span data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
</hbox>
<hbox>
<input type="radio" name="zen-expand-tabbar-value" value="hover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
<span data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
</hbox>
<hbox>
<input type="radio" name="zen-expand-tabbar-value" value="none" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
<span data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
</hbox>
</form>
</groupbox>
</html:template>

9
src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
View File

@@ -51,8 +51,13 @@ zen-vertical-tabs-header = Vertical Tabs
zen-vertical-tabs-description = Manage your tabs in a vertical layout
zen-vertical-tabs-show-expand-button =
.label = Show Expand Button
zen-vertical-tabs-expand-tabs-by-default =
.label = Expand Tabs by Default
zen-vertical-tabs-expand-tabs-by-default = Expand Tabs by Default
zen-vertical-tabs-dont-expand-tabs-by-default = Don't Expand Tabs by Default
zen-vertical-tabs-expand-tabs-on-hover = Expand Tabs on Hover (Wont work on compact mode)
zen-vertical-tabs-expand-tabs-header = How to expand tabs
zen-vertical-tabs-expand-tabs-description = Choose how to expand tabs in the sidebar
zen-theme-marketplace-header = Theme Store
zen-theme-marketplace-description = Find and install themes from the store.

13
src/browser/themes/shared/preferences/zen-preferences.css
View File

@@ -17,6 +17,10 @@
margin: auto;
}
description {
margin-top: 0 !important;
}
groupbox {
background: light-dark(white, color-mix(in srgb, var(--zen-primary-color) 10%, #1b1b1b 90%));
padding-inline: unset !important;
@@ -132,6 +136,15 @@ groupbox h2 {
/* Look and feel */
#zen-expand-tabbar-strat {
display: flex;
flex-direction: column;
}
#zen-expand-tabbar-strat > hbox {
margin-top: 10px;
}
#category-zen-looks > .category-icon {
list-style-image: url("chrome://browser/skin/customize.svg");
}