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

refactor: update styling and structure of Zen UI components; remove deprecated toolbar styles and adjust margins for better layout

Browse Source
This commit is contained in:
mr. M
2024-11-19 20:51:48 +01:00
parent 721a8cf6e3
commit b094d8322a
15 changed files with 116 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
index 989e69245aeb1185125752db6b9c58e462d554e4..a4825653b48aa5012e58a277c862caaf0e37abab 100644
index 989e69245aeb1185125752db6b9c58e462d554e4..7f03aa20386ace32a340131a84c484865883905f 100644
--- a/browser/components/customizableui/CustomizableUI.sys.mjs
+++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -78,13 +78,11 @@ index 989e69245aeb1185125752db6b9c58e462d554e4..a4825653b48aa5012e58a277c862caaf
// For toolbars that need it, mark as dirty.
let defaultPlacements = areaProperties.get("defaultPlacements");
if (
@@ -3521,6 +3527,9 @@ var CustomizableUIInternal = {
gSeenWidgets.add(widgetId);
}
}
+
+
+
if (gSeenWidgets.size || gNewElementCount) {
gDirty = true;
this.saveState();
@@ -3603,6 +3609,7 @@ var CustomizableUIInternal = {
if (area.get("type") == CustomizableUI.TYPE_TOOLBAR) {
let defaultCollapsed = area.get("defaultCollapsed");
let win = areaNode.ownerGlobal;
+ win.gZenVerticalTabsManager._updateEvent();
if (defaultCollapsed !== null) {
win.setToolbarVisibility(
areaNode,

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

@@ -563,17 +563,11 @@ var gZenLooksAndFeel = {
value = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ? 'left' : 'top';
}
chooser.querySelector(`[value='${value}']`).checked = true;
const disableExpandTabsOnHover = () => {
if (Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')) {
document.querySelector(`#zen-expand-tabbar-strat input[value='expand']`).click();
}
};
for (let radio of radios) {
radio.addEventListener('change', (e) => {
let value = e.target.value;
switch (value) {
case 'left':
disableExpandTabsOnHover();
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
break;
@@ -582,7 +576,6 @@ var gZenLooksAndFeel = {
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
break;
default:
disableExpandTabsOnHover();
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
break;
@@ -591,47 +584,6 @@ var gZenLooksAndFeel = {
}
},
_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;
}
const disableCompactTabbar = () => {
const toolbarEnable = Services.prefs.getBoolPref('zen.view.compact.hide-toolbar');
if (toolbarEnable) {
document.querySelector(`#ZenCompactModeStyle input[value='top']`).click();
} else if (Services.prefs.getBoolPref('zen.view.compact')) {
document.getElementById('zenLooksAndFeelShowCompactView').click();
}
};
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':
disableCompactTabbar();
Services.prefs.setBoolPref(onHoverPref, true);
Services.prefs.setBoolPref(defaultExpandPref, false);
break;
}
});
}
},
_initializeColorPicker(accentColor) {
let elem = document.getElementById('zenLooksAndFeelColorOptions');
elem.innerHTML = '';
@@ -1000,11 +952,6 @@ Preferences.addAll([
type: 'bool',
default: true,
},
{
id: 'zen.view.sidebar-expanded',
type: 'bool',
default: true,
},
{
id: 'zen.theme.pill-button',
type: 'bool',

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

@@ -337,23 +337,6 @@
data-l10n-id="zen-vertical-tabs-show-bottom-border"
preference="zen.view.show-bottom-border"/>
</vbox>
<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 id="zenVerticalTabsExpandDefault" type="radio" name="zen-expand-tabbar-value" value="expand" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
<label for="zenVerticalTabsExpandDefault" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
</hbox>
<hbox>
<input id="zenVerticalTabsExpandOnHover" type="radio" name="zen-expand-tabbar-value" value="hover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
<label for="zenVerticalTabsExpandOnHover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
</hbox>
<hbox>
<input id="zenVerticalTabsExpandDontExpand" type="radio" name="zen-expand-tabbar-value" value="none" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
<label for="zenVerticalTabsExpandDontExpand" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
</hbox>
</form>
</groupbox>
</html:template>