mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-01 07:28:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor ZenCompactModeManager and ZenStartup.mjs

Browse Source
This commit is contained in:
mauro-balades
2024-09-21 16:11:07 +02:00
parent e4aa905440
commit 4510bc64d6
12 changed files with 242 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: 1d1873c8e4...248aa49b8d

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

@@ -78,14 +78,15 @@ pref('zen.theme.content-element-separation', 8); // In pixels
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.theme.color-prefs.amoled', false);
pref('zen.theme.color-prefs.colorful', false);
pref('zen.view.compact.hide-tabbar', true);
pref('zen.view.compact.hide-toolbar', false);
pref('zen.view.compact.toolbar-flash-popup', true);
pref('zen.view.compact.toolbar-flash-popup.duration', 800);
pref('zen.view.compact.toolbar-hide-after-hover.duration', 2000);
pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
pref('zen.view.sidebar-height-throttle', 200); // in ms
pref('zen.view.sidebar-expanded', false);

9
src/browser/base/content/ZenStartup.mjs
View File

@@ -128,15 +128,14 @@
splitter.setAttribute('resizeafter', 'none');
toolbox.insertAdjacentElement('afterend', splitter);
this._moveWindowButtons();
this._addSidebarButtons();
this._hideToolbarButtons();
},
_moveWindowButtons() {
const windowControls = document.getElementById('titlebar-buttonbox-container');
const toolboxIcons = document.getElementById('zen-sidebar-top-buttons');
if (AppConstants.platform == "macosx") {
const windowControls = document.getElementsByClassName('titlebar-buttonbox-container')[0];
const toolboxIcons = document.getElementById('zen-sidebar-top-buttons-customization-target');
if (AppConstants.platform === "macosx") {
toolboxIcons.prepend(windowControls);
}
},
@@ -221,6 +220,8 @@
CustomizableUI.registerToolbarNode(
document.getElementById('zen-sidebar-icons-wrapper')
);
this._moveWindowButtons();
}, 100);
},

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

Submodule src/browser/base/content/zen-components updated: b84a9418c2...80a8904bbc

162
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -7,68 +7,116 @@
}
@media (-moz-bool-pref: 'zen.view.compact') {
/* Set the extra paddings */
#tabbrowser-tabpanels {
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
padding-right: var(--zen-element-separation);
:root:not([customizing]) {
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
#zen-sidebar-web-panel-wrapper {
margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
}
#zen-sidebar-top-buttons-customization-target {
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
}
/* Set the extra paddings */
#tabbrowser-tabpanels {
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
padding-right: var(--zen-element-separation);
}
#browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
padding-left: var(--zen-element-separation);
}
}
#zen-sidebar-splitter {
display: none !important;
}
#navigator-toolbox {
position: absolute;
height: 98%;
z-index: 9;
background: var(--zen-themed-toolbar-bg) !important;
box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
border-top-right-radius: var(--zen-border-radius);
border-bottom-right-radius: var(--zen-border-radius);
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));
top: 50%;
opacity: 0;
transform: translate3d(0, -50%, 0);
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
border-left-width: 1px;
border-right-width: 0;
left: calc(100% - var(--zen-element-separation));
right: unset;
border-top-left-radius: var(--zen-border-radius);
border-bottom-left-radius: var(--zen-border-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
#navigator-toolbox:hover,
#navigator-toolbox[zen-has-hover],
#navigator-toolbox:focus-within,
#navigator-toolbox[zen-user-show],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
opacity: 1;
transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), -50%, 0);
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), -50%, 0);
}
}
}
#browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
padding-left: var(--zen-element-separation);
}
}
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
#tabbrowser-tabpanels {
padding-top: var(--zen-element-separation) !important;
}
#zen-sidebar-splitter {
display: none !important;
}
#zen-appcontent-navbar-container {
position: absolute;
top: 0;
transform: translateY(calc(-100% + var(--zen-element-separation)));
left: 0;
z-index: 10;
background: var(--zen-themed-toolbar-bg);
box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
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;
width: 100%;
opacity: 0;
}
#navigator-toolbox {
position: absolute;
height: 98%;
z-index: 9;
background: var(--zen-themed-toolbar-bg) !important;
box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
border-top-right-radius: var(--zen-border-radius);
border-bottom-right-radius: var(--zen-border-radius);
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));
top: 50%;
opacity: 0;
#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: translate3d(0, calc(-50% - 2px), 0);
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
border-left-width: 1px;
border-right-width: 0;
left: calc(100% - var(--zen-element-separation));
right: unset;
border-top-left-radius: var(--zen-border-radius);
border-bottom-left-radius: var(--zen-border-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
#navigator-toolbox:hover,
#navigator-toolbox:focus-within,
#navigator-toolbox[zen-user-show],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
opacity: 1;
transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), calc(-50% - 2px), 0);
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), calc(-50% - 2px), 0);
transform: translateY(-1px);
}
}
}
}

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

@@ -23,6 +23,8 @@ toolbar {
height: calc(var(--toolbarbutton-inner-padding) + 10px);
width: calc(var(--toolbarbutton-inner-padding) + 10px);
padding: 0;
margin: 0 var(--toolbarbutton-inner-padding) !important;
}
&:hover {

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

@@ -147,7 +147,7 @@
/* Mark: toolbox as expanded */
#navigator-toolbox:is(
#navigator-toolbox[zen-user-hover='true']:hover,
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
#navigator-toolbox[zen-user-hover='true']:focus-within,
#navigator-toolbox[zen-user-hover='true'][movingtab],
#navigator-toolbox[zen-user-hover='true'][flash-popup],
@@ -269,7 +269,7 @@
/* Mark: toolbox as collapsed */
#navigator-toolbox:not(#navigator-toolbox:is(
#navigator-toolbox[zen-user-hover='true']:hover,
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
#navigator-toolbox[zen-user-hover='true']:focus-within,
#navigator-toolbox[zen-user-hover='true'][movingtab],
#navigator-toolbox[zen-user-hover='true'][flash-popup],

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

@@ -259,9 +259,6 @@ button.popup-notification-dropmarker {
align-items: center;
}
#browser:not(:has([zen-expanded="true"])) #nav-bar {
padding-left: calc(var(--zen-toolbox-padding) 4px);
}
/* Other small tweaks */
#nav-bar-customization-target {

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

@@ -82,7 +82,7 @@
@media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
/** Keep these selectors in sync with the ones in vertical-tabs.css */
#navigator-toolbox:is(
#navigator-toolbox[zen-user-hover='true']:hover,
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
#navigator-toolbox[zen-user-hover='true']:focus-within,
#mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,

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

@@ -442,6 +442,7 @@ var gZenLooksAndFeel = {
}
}, 500);
this.setDarkThemeListener();
this.setCompactModeStyle();
},
onPreferColorSchemeChange(event) {
@@ -455,9 +456,9 @@ var gZenLooksAndFeel = {
},
setDarkThemeListener() {
this.chooser = document.getElementById('zen-dark-theme-styles-form');
this.radios = [...this.chooser.querySelectorAll('input')];
for (let radio of this.radios) {
const chooser = document.getElementById('zen-dark-theme-styles-form');
const radios = [...chooser.querySelectorAll('input')];
for (let radio of radios) {
if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) {
radio.checked = true;
} else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) {
@@ -489,6 +490,41 @@ var gZenLooksAndFeel = {
}
},
setCompactModeStyle() {
const chooser = document.getElementById('zen-compact-mode-styles-form');
const radios = [...chooser.querySelectorAll('input')];
for (let radio of radios) {
if (radio.value === 'left' && Services.prefs.getBoolPref('zen.view.compact.hide-tabbar')) {
radio.checked = true;
} else if (radio.value === 'top' && Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')) {
radio.checked = true;
} else if (
radio.value === 'both' &&
!Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') &&
!Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')
) {
radio.checked = true;
}
radio.addEventListener('change', (e) => {
let value = e.target.value;
switch (value) {
case 'left':
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
break;
case 'top':
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
break;
default:
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
break;
}
});
}
},
_initializeTabbarExpandForm() {
const form = document.getElementById('zen-expand-tabbar-strat');
const radios = form.querySelectorAll('input[type=radio]');

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

@@ -36,10 +36,10 @@
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:7.21px;"/>
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:8.78px;"/>
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
@@ -77,14 +77,14 @@
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 40%, transparent 40%)"/>
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 17%, transparent 98%)"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:7.21px;"/>
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:8.78px;"/>
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
@@ -126,10 +126,10 @@
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:7.21px;"/>
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:8.78px;"/>
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
@@ -190,10 +190,44 @@
<checkbox id="zenLooksAndFeelShowCompactView"
data-l10n-id="zen-look-and-feel-compact-view-enabled"
preference="zen.view.compact"/>
<html:div id="ZenCompactModeStyle">
<form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-compact-mode-styles-form">
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<div class="zen-compact-mode-styles-browser-wrapper" left="">
<div></div>
</div>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="left" data-l10n-id="preferences-web-appearance-choice-input-auto"
/><span data-l10n-id="zen-compact-mode-styles-left" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<div class="zen-compact-mode-styles-browser-wrapper" top="">
<div></div>
</div>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="top" data-l10n-id="preferences-web-appearance-choice-input-light"
/><span data-l10n-id="zen-compact-mode-styles-top" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<div class="zen-compact-mode-styles-browser-wrapper" both="">
<div></div>
</div>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="both" data-l10n-id="preferences-web-appearance-choice-input-dark"
/><span data-l10n-id="zen-compact-mode-styles-both" />
</div>
</label>
</form>
</html:div>
<vbox class="indent">
<checkbox id="zenLooksAndFeelShowCompactViewToolbar"
data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
preference="zen.view.compact.hide-toolbar"/>
<checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
preference="zen.view.compact.toolbar-flash-popup"/>

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

@@ -179,7 +179,8 @@ groupbox h2 {
margin-bottom: 15px;
}
#zen-dark-theme-styles-form {
#zen-dark-theme-styles-form,
#zen-compact-mode-styles-form {
display: flex;
justify-content: space-between;
gap: var(--space-large);
@@ -234,6 +235,43 @@ groupbox h2 {
border-color: var(--zen-primary-color);
}
.zen-compact-mode-styles-browser-wrapper {
width: 55%;
height: 60px;
display: flex;
border-radius: 10px;
border: 1px solid var(--zen-colors-border);
background: var(--zen-colors-tertiary);
position: relative;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
padding: 7px;
&[left] div {
width: 100%;
background: var(--zen-primary-color);
border-radius: 5px;
height: 18px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
}
&[top] div {
width: 18px;
background: var(--zen-primary-color);
border-radius: 5px;
height: 100%;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
}
&[both] div {
width: 100%;
height: 100%;
background: var(--zen-colors-secondary);
border-radius: 5px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
}
}
.zenLooksAndFeelColorOption {
width: 60px;
height: 60px;