mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-29 14:38:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added new, more compact layout when panel separation is 0 pixels

Browse Source
This commit is contained in:
Mauro Balades
2024-04-21 11:17:58 +02:00
parent f02af579bd
commit 6b17d35b36
12 changed files with 81 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,6 +104,7 @@ pref('zen.welcomeScreen.seen', false);
pref('zen.tabs.vertical', true);
pref('zen.theme.accent-color', "#aac7ff");
pref('zen.theme.panel-separation', 7);
pref('zen.theme.toolbar-themed', true);
// From: https://github.com/yokoffing/Betterfox

8
src/browser/base/content/browser-xhtml.patch
View File

@@ -1,18 +1,14 @@
diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
index 1dcdd02cd1bfe24c9f32304511f3dd675fc9265c..739b42cc6c832ccfe270a50d7d46fe2842a38f45 100644
index 1dcdd02cd1bfe24c9f32304511f3dd675fc9265c..753d0b60e0877507b531a415461fa8a9c843dcbd 100644
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -165,9 +165,17 @@
@@ -165,9 +165,13 @@
</vbox>
</html:template>
-#include navigator-toolbox.inc.xhtml
-
-#include browser-box.inc.xhtml
+ <hbox id="zen-titlebar-items-container">
+#include titlebar-items.inc.xhtml
+ </hbox>
+
+ <hbox id="zen-main-app-wrapper" flex="1">
+ #include navigator-toolbox.inc.xhtml
+ <html:span id="zen-sidebar-box-container">

14
src/browser/base/content/navigator-toolbox-inc-xhtml.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index fc19910726f2925505f6e71add034c82af36b63e..046f6fc8084403096be2730f7f892d9ea70d7de2 100644
index fc19910726f2925505f6e71add034c82af36b63e..df0c170ae44c0d51e2c60777c8f845c6b58a2a26 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -50,21 +50,24 @@
@@ -39,7 +39,17 @@ index fc19910726f2925505f6e71add034c82af36b63e..046f6fc8084403096be2730f7f892d9e
</toolbar>
@@ -576,7 +582,6 @@
@@ -505,6 +511,9 @@
consumeanchor="PanelUI-button"
data-l10n-id="appmenu-menu-button-closed2"/>
</toolbaritem>
+
+#include titlebar-items.inc.xhtml
+
</toolbar>
<toolbar id="PersonalToolbar"
@@ -576,7 +585,6 @@
<html:named-deck id="tab-notification-deck"></html:named-deck>
</html:template>

17
src/browser/base/content/zenThemeModifier.js
View File

@@ -86,6 +86,10 @@
},
_changeSidebarLocation(value) {
const kInlineIndicatorElements = [
"nav-bar",
"tabbrowser-tabbox"
]
const sidebar = document.getElementById("sidebar-box");
const toolbox = document.getElementById("navigator-toolbox");
const wrapper = document.getElementById("zen-tabbox-wrapper");
@@ -96,16 +100,29 @@
appWrapepr.setAttribute("hidden", "true");
sidebar.setAttribute("inlinedwithtoolbox", "true");
toolbox.setAttribute("inlinedwithsidebar", "true");
for (let id of kInlineIndicatorElements) {
const elem = document.getElementById(id);
if (elem) {
elem.setAttribute("inlinedwithsidebar", "true");
}
}
} else {
appWrapepr.appendChild(toolbox);
appWrapepr.appendChild(sidebar);
appWrapepr.removeAttribute("hidden");
sidebar.removeAttribute("inlinedwithtoolbox");
toolbox.removeAttribute("inlinedwithsidebar");
for (let id of kInlineIndicatorElements) {
const elem = document.getElementById(id);
if (elem) {
elem.removeAttribute("inlinedwithsidebar");
}
}
}
},
_zenInitBrowserLayout() {
if (!this._inMainBrowserWindow) return;
const kNavbarItems = [
"nav-bar",
"PersonalToolbar",

20
src/browser/components/preferences/main-inc-xhtml.patch
View File

@@ -1,20 +0,0 @@
diff --git a/browser/components/preferences/main.inc.xhtml b/browser/components/preferences/main.inc.xhtml
index aaacdb6d977a69ca62d59bd861b26948980c400d..b014cfaf5b8f31bc5a37135c92dbf213b08eeba0 100644
--- a/browser/components/preferences/main.inc.xhtml
+++ b/browser/components/preferences/main.inc.xhtml
@@ -155,6 +155,7 @@
</hbox>
<!-- Website appearance -->
+#if 0
<groupbox id="webAppearanceGroup" data-category="paneGeneral" hidden="true">
<html:h2 data-l10n-id="preferences-web-appearance-header"/>
<html:div id="webAppearanceSettings">
@@ -195,6 +196,7 @@
</html:div>
</html:div>
</groupbox>
+#endif
<!-- Colors -->
<groupbox id="colorsGroup" data-category="paneGeneral" hidden="true">

8
src/browser/components/preferences/zen-looks.js
View File

@@ -47,3 +47,11 @@ var gZenLooksAndFeel = {
return Services.prefs.getStringPref("zen.theme.accent-color", kZenColors[0]);
},
};
Preferences.addAll([
{
id: "zen.theme.toolbar-themed",
type: "bool",
default: true,
},
]);

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

@@ -12,47 +12,10 @@
<hbox id="zenLooksAndFeelColorOptions" align="center">
</hbox>
</groupbox>
<groupbox id="webAppearanceGroup" data-category="paneZenLooks" hidden="true">
<html:h2 data-l10n-id="preferences-web-appearance-header"/>
<html:div id="webAppearanceSettings">
<description class="description-deemphasized" data-l10n-id="preferences-web-appearance-description"/>
<html:div id="web-appearance-override-warning" class="info-box-container">
<html:div class="info-icon-container">
<html:img class="info-icon"/>
</html:div>
<description data-l10n-id="preferences-web-appearance-override-warning">
<html:a class="text-link" data-l10n-name="colors-link" id="web-appearance-manage-colors-link" href="#"/>
</description>
</html:div>
<form xmlns="http://www.w3.org/1999/xhtml" id="web-appearance-chooser" autocomplete="off">
<label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-auto">
<div class="web-appearance-choice-image-container"><img role="presentation" alt="" width="54" height="42" /></div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="auto" data-l10n-id="preferences-web-appearance-choice-input-auto"
/><span data-l10n-id="preferences-web-appearance-choice-auto" />
</div>
</label>
<label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-light">
<div class="web-appearance-choice-image-container"><img role="presentation" alt="" width="54" height="42" /></div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="light" data-l10n-id="preferences-web-appearance-choice-input-light"
/><span data-l10n-id="preferences-web-appearance-choice-light" />
</div>
</label>
<label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-dark">
<div class="web-appearance-choice-image-container"><img role="presentation" alt="" width="54" height="42" /></div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="dark" data-l10n-id="preferences-web-appearance-choice-input-dark"
/><span data-l10n-id="preferences-web-appearance-choice-dark" />
</div>
</label>
</form>
<html:div data-l10n-id="preferences-web-appearance-footer">
<html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
</html:div>
</html:div>
<checkbox id="zenLooksAndFeelUseThemedToolbar"
data-l10n-id="zen-look-and-feel-themed-toolbar"
preference="zen.theme.toolbar-themed"/>
</groupbox>
</html:template>

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

@@ -6,3 +6,5 @@ category-zen-looks =
zen-look-and-feel-colors-header = Pick a theme colour
zen-look-and-feel-colors-description = Make { -brand-short-name } look and feel the way you like
zen-look-and-feel-themed-toolbar =
.label = Make the toolbar themed with the accent color

42
src/browser/themes/shared/zen-browser-shared.css
View File

@@ -24,6 +24,12 @@
--input-border-color: var(--zen-input-border-color) !important;
}
@media not (-moz-bool-pref: "zen.theme.toolbar-themed") {
:root {
--toolbar-bgcolor: light-dark(white, rgb(66, 65, 77)) !important;
}
}
#PersonalToolbar:not([collapsed="true"]) {
/*border-top: 1px solid light-dark(#ddd, #4a4a4a);*/
padding: 5px 0;
@@ -351,16 +357,6 @@ toolbarbutton#scrollbutton-up {
}
}
/* Title bar */
#zen-titlebar-items-container {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
-moz-window-dragging: drag;
}
.footer-button {
padding: var(--zen-button-padding) !important;
border-radius: var(--zen-button-border-radius) !important;
@@ -402,3 +398,29 @@ panelmultiview {
flex-direction: column;
align-items: center;
}
/** No space in panels overrides */
#tabbrowser-tabbox[inlinedwithsidebar="true"] {
background: var(--toolbar-bgcolor);
}
#tabbrowser-tabbox[inlinedwithsidebar="true"] #tabbrowser-tabpanels {
--zen-browser-border-radius: 10px;
margin: 0 10px 10px 0;
border-radius: var(--zen-browser-border-radius);
border: 1px solid light-dark(#ddd, #4a4a4a);
}
#tabbrowser-tabbox[inlinedwithsidebar="true"] #tabbrowser-tabpanels .browserStack > browser {
border-radius: var(--zen-browser-border-radius);
}
#nav-bar[inlinedwithsidebar="true"] {
padding-top: 5px;
padding-bottom: 5px;
}
#nav-bar[inlinedwithsidebar="true"] #urlbar[breakout]:not([breakout-extend="true"]) {
top: unset;
}

3
src/browser/themes/shared/zen-sidebar.css
View File

@@ -10,10 +10,10 @@
overflow: hidden;
transition: .2s;
margin-left: 0 !important;
border: var(--zen-appcontent-border);
}
#sidebar-box:not([positionend="true"]) {
border-left-width: 0px !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
margin-right: 0 !important;
@@ -29,7 +29,6 @@
border-bottom-right-radius: 0 !important;
margin-right: 0 !important;
box-shadow: none !important;
border-right: 1px solid light-dark(#ddd, #4a4a4a) !important;
}
#sidebar-splitter {

5
src/toolkit/content/zen-xul.css
View File

@@ -4,8 +4,9 @@
:root {
--zen-main-browser-background: var(--zen-colors-secondary);
--zen-appcontent-separator-from-window-single: 7px;
--zen-appcontent-separator-from-window: 0 var(--zen-appcontent-separator-from-window-single) var(--zen-appcontent-separator-from-window-single);
--zen-appcontent-separator-from-window: var(--zen-appcontent-separator-from-window-single);
--zen-appcontent-border-radius: var(--zen-panel-radius);
--zen-appcontent-border: 1px solid light-dark(#ddd, #4a4a4a);
}
toolbox#navigator-toolbox,
@@ -29,7 +30,7 @@ html#main-window > body {
:not([inDOMFullscreen="true"]) #appcontent,
#sidebar-box,
#navigator-toolbox #TabsToolbar {
#navigator-toolbox:not([inlinedwithsidebar="true"]) #TabsToolbar {
/** Sidebar is already hidden in full screen mode */
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
border: none;

13
src/toolkit/themes/shared/global-shared-css.patch
View File

@@ -1,13 +0,0 @@
diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css
index c478b2745e838a7fcb91da05ff9c5769065fd1c4..6977f16b1ff6f1f0fe9c1ad47d870d92f5857edd 100644
--- a/toolkit/themes/shared/global-shared.css
+++ b/toolkit/themes/shared/global-shared.css
@@ -45,7 +45,7 @@
--toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
--toolbar-non-lwt-textcolor: -moz-dialogtext;
- --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
+ --toolbar-bgcolor: var(--zen-colors-tertiary);
--toolbar-color: var(--toolbar-non-lwt-textcolor);
&:-moz-lwtheme {