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

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
 

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 @@
      </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">

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

@@ -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>
  

src/browser/base/content/zenThemeModifier.js

@@ -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",

src/browser/components/preferences/main-inc-xhtml.patch

@@ -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">

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,
+  },
+]);

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -12,47 +12,10 @@
 
       <hbox id="zenLooksAndFeelColorOptions" align="center">
       </hbox>
-</groupbox>
 
-<groupbox id="webAppearanceGroup" data-category="paneZenLooks" hidden="true">
+      <checkbox id="zenLooksAndFeelUseThemedToolbar"
-  <html:h2 data-l10n-id="preferences-web-appearance-header"/>
+            data-l10n-id="zen-look-and-feel-themed-toolbar"
-  <html:div id="webAppearanceSettings">
+            preference="zen.theme.toolbar-themed"/>
-    <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>
 </groupbox>
 
 </html:template>

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

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;
+}

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 {

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;

src/toolkit/themes/shared/global-shared-css.patch

@@ -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 {