diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 69a9b1bf9..619a41ad1 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -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
diff --git a/src/browser/base/content/browser-xhtml.patch b/src/browser/base/content/browser-xhtml.patch
index ee4f7129b..b05b0b117 100644
--- a/src/browser/base/content/browser-xhtml.patch
+++ b/src/browser/base/content/browser-xhtml.patch
@@ -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 @@
-#include navigator-toolbox.inc.xhtml
-
-#include browser-box.inc.xhtml
-+
-+#include titlebar-items.inc.xhtml
-+
-+
+
+ #include navigator-toolbox.inc.xhtml
+
-
-
-+#if 0
-
-
-
-@@ -195,6 +196,7 @@
-
-
-
-+#endif
-
-
-
diff --git a/src/browser/components/preferences/zen-looks.js b/src/browser/components/preferences/zen-looks.js
index 34381ff29..dddea5b23 100644
--- a/src/browser/components/preferences/zen-looks.js
+++ b/src/browser/components/preferences/zen-looks.js
@@ -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,
+ },
+]);
diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
index 49d4019c8..dc1ed469d 100644
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
@@ -12,47 +12,10 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
index dcbdac2fc..02d513e96 100644
--- a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
+++ b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
@@ -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
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css
index b74135602..309196e78 100644
--- a/src/browser/themes/shared/zen-browser-shared.css
+++ b/src/browser/themes/shared/zen-browser-shared.css
@@ -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;
+}
diff --git a/src/browser/themes/shared/zen-sidebar.css b/src/browser/themes/shared/zen-sidebar.css
index 3faf18216..60230bc3d 100644
--- a/src/browser/themes/shared/zen-sidebar.css
+++ b/src/browser/themes/shared/zen-sidebar.css
@@ -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 {
diff --git a/src/toolkit/content/zen-xul.css b/src/toolkit/content/zen-xul.css
index e056423c8..282902fdc 100644
--- a/src/toolkit/content/zen-xul.css
+++ b/src/toolkit/content/zen-xul.css
@@ -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;
diff --git a/src/toolkit/themes/shared/global-shared-css.patch b/src/toolkit/themes/shared/global-shared-css.patch
deleted file mode 100644
index efc63ebb3..000000000
--- a/src/toolkit/themes/shared/global-shared-css.patch
+++ /dev/null
@@ -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 {