Added huge UI changes

.gitignore

@@ -3,4 +3,6 @@
 engine/
 firefox-*/
 node_modules/
-.gluon/
+.gluon/
+
+__pycache__/

init-browser.py

@@ -1,16 +1,13 @@
 
 import os
+from update_newtab import update_newtab
 
 def initialize_avatars():
   os.system("cd src/browser/base/content/zen-avatars && python3 fetch-all-avatars.py")
 
-def recompile_new_tab():
-  os.system("(cd ./engine/browser/components/newtab && ../../../mach npm install && ../../../mach npm install meow@9.0.0)")
-  os.system("cd ./engine && ./mach npm run bundle --prefix=browser/components/newtab")
-
 def main():
   initialize_avatars()
-  recompile_new_tab()
+  update_newtab()
 
 if __name__ == "__main__":
   main()

package.json

@@ -7,7 +7,8 @@
     "start": "cd engine && ./mach run --noprofile",
     "import": "gluon import",
     "export": "gluon export",
-    "init": "python3 init-browser.py"
+    "init": "python3 init-browser.py",
+    "update-newtab": "python3 update_newtab.py"
   },
   "repository": {
     "type": "git",

src/browser/app/profile/zen-browser.js

@@ -27,6 +27,7 @@ pref(
 pref('browser.preferences.moreFromMozilla', false);
 pref('browser.aboutwelcome.enabled', true);
 pref("browser.aboutwelcome.showModal", false);
+pref('browser.translations.select.enable', true);
 
 // Theme
 pref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
@@ -102,6 +103,7 @@ pref('zen.welcomeScreen.enabled', true);
 pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.theme.accent-color', "#aac7ff");
+pref('zen.theme.panel-separation', 7);
 
 // From: https://github.com/yokoffing/Betterfox
 

src/browser/base/content/browser-box-inc-xhtml.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index d445abe7e743b2ec5d46d42f8f149c000e3c7997..c45459f1ae13190c5a508def867159d52cc6c1e1 100644
+index d445abe7e743b2ec5d46d42f8f149c000e3c7997..9ef4a0be1dbfc8fd50b57118b59304ef34597364 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -2,22 +2,11 @@
+@@ -2,27 +2,18 @@
  # License, v. 2.0. If a copy of the MPL was not distributed with this
  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
  
@@ -24,14 +24,18 @@ index d445abe7e743b2ec5d46d42f8f149c000e3c7997..c45459f1ae13190c5a508def867159d5
 +<vbox id="browser">
    <vbox id="appcontent" flex="1">
 +
-+#include zen-browser-box-ui.inc.xhtml
++    <html:div id="zen-appcontent-navbar-container"></html:div>
 +
      <!-- gNotificationBox will be added here lazily. -->
-     <tabbox id="tabbrowser-tabbox"
+-    <tabbox id="tabbrowser-tabbox"
++    <hbox id="zen-tabbox-wrapper" flex="1">
++      <tabbox id="tabbrowser-tabbox"
              flex="1" tabcontainer="tabbrowser-tabs">
-@@ -25,4 +14,4 @@
+       <tabpanels id="tabbrowser-tabpanels"
                    flex="1" selectedIndex="0"/>
-     </tabbox>
+-    </tabbox>
++      </tabbox>
++    </hbox>
    </vbox>
 -</hbox>
 +</vbox>

src/browser/base/content/browser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250ca26968a 100644
+index c91a5d4db29a9691e9b43ef4d5d5e9a4db945ac8..00107b54e09137ee1af1c56b8c9e853a4ffe7264 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
 @@ -13,6 +13,15 @@ ChromeUtils.importESModule("resource://gre/modules/NotificationDB.sys.mjs");
@@ -18,7 +18,15 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250
  ChromeUtils.defineESModuleGetters(this, {
    AMTelemetry: "resource://gre/modules/AddonManager.sys.mjs",
    AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs",
-@@ -1735,6 +1744,11 @@ var gBrowserInit = {
+@@ -1664,6 +1673,7 @@ var gBrowserInit = {
+     });
+ 
+     updateFxaToolbarMenu(gFxaToolbarEnabled, true);
++    Services.scriptloader.loadSubScript("chrome://browser/content/zenThemeModifier.js", this);
+ 
+     updatePrintCommands(gPrintEnabled);
+ 
+@@ -1727,6 +1737,11 @@ var gBrowserInit = {
      }
  
      // Misc. inits.
@@ -30,7 +38,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250
      gUIDensity.init();
      TabletModeUpdater.init();
      CombinedStopReload.ensureInitialized();
-@@ -6660,7 +6674,7 @@ function setToolbarVisibility(
+@@ -6669,7 +6684,7 @@ function setToolbarVisibility(
        );
      }
  
@@ -39,7 +47,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250
      switch (isVisible) {
        case true:
        case "always":
-@@ -9780,6 +9794,13 @@ var gDialogBox = {
+@@ -9789,6 +9804,13 @@ var gDialogBox = {
      parentElement.style.removeProperty("width");
      parentElement.style.removeProperty("height");
      document.documentElement.setAttribute("window-modal-open", true);
@@ -53,7 +61,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250
      // Call this first so the contents show up and get layout, which is
      // required for SubDialog to work.
      parentElement.showModal();
-@@ -10157,3 +10178,15 @@ var FirefoxViewHandler = {
+@@ -10166,3 +10188,15 @@ var FirefoxViewHandler = {
      this.button?.toggleAttribute("attention", shouldShow);
    },
  };

src/browser/base/content/browser-xhtml.patch

@@ -1,28 +1,23 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index b4886fb5f74568b4c09eb620be9efb74e39c599c..534e40c8f65d1b626c11aa3cfea308cc6176be02 100644
+index 1dcdd02cd1bfe24c9f32304511f3dd675fc9265c..739b42cc6c832ccfe270a50d7d46fe2842a38f45 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
-@@ -127,6 +127,7 @@
+@@ -165,9 +165,17 @@
-   Services.scriptloader.loadSubScript("chrome://browser/content/search/autocomplete-popup.js", this);
-   Services.scriptloader.loadSubScript("chrome://browser/content/search/searchbar.js", this);
-   Services.scriptloader.loadSubScript("chrome://browser/content/shopping/shopping-sidebar.js", this);
-+  Services.scriptloader.loadSubScript("chrome://browser/content/zenThemeModifier.js", this);
- 
-   window.onload = gBrowserInit.onLoad.bind(gBrowserInit);
-   window.onunload = gBrowserInit.onUnload.bind(gBrowserInit);
-@@ -163,9 +164,15 @@
      </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>
- 
++
--#include browser-box.inc.xhtml
 +  <hbox id="zen-main-app-wrapper" flex="1">
 +    #include navigator-toolbox.inc.xhtml
-+    #include zen-sidebar-box.inc.xhtml
++    <html:span id="zen-sidebar-box-container">
++      #include zen-sidebar-box.inc.xhtml
++    </html:span>
 +    #include browser-box.inc.xhtml    
 +  </hbox>
  

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 dce7bacdb3678a95dc97085390a7e6102090ffb2..adc160df554e19b5d7cc874cedf2fae6e98a1e60 100644
+index fc19910726f2925505f6e71add034c82af36b63e..046f6fc8084403096be2730f7f892d9ea70d7de2 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -50,21 +50,24 @@
@@ -28,7 +28,7 @@ index dce7bacdb3678a95dc97085390a7e6102090ffb2..adc160df554e19b5d7cc874cedf2fae6
                  <spacer class="closing-tabs-spacer" style="width: 0;"/>
                </hbox>
              </arrowscrollbox>
-@@ -101,12 +104,16 @@
+@@ -101,7 +104,10 @@
          <label data-l10n-id="private-browsing-indicator-label"></label>
        </hbox>
  
@@ -39,18 +39,11 @@ index dce7bacdb3678a95dc97085390a7e6102090ffb2..adc160df554e19b5d7cc874cedf2fae6
  
      </toolbar>
  
-   </vbox>
+@@ -576,7 +582,6 @@
- 
-+#if 0
-   <toolbar id="nav-bar"
-            class="browser-toolbar"
-            data-l10n-id="navbar-accessible"
-@@ -575,7 +582,7 @@
-   <html:template id="tab-notification-deck-template">
      <html:named-deck id="tab-notification-deck"></html:named-deck>
    </html:template>
--
-+#endif
  
+-
    <html:template id="BrowserToolbarPalette">
      <toolbarbutton id="import-button"
+                    class="toolbarbutton-1 chromeclass-toolbar-additional"

src/browser/base/content/zen-browser-box-ui.inc.xhtml

@@ -1,470 +0,0 @@
-
-<toolbar id="nav-bar"
-        class="browser-toolbar"
-        data-l10n-id="navbar-accessible"
-        fullscreentoolbar="true" mode="icons" customizable="true"
-        customizationtarget="nav-bar-customization-target"
-        overflowable="true"
-        default-overflowbutton="nav-bar-overflow-button"
-        default-overflowtarget="widget-overflow-list"
-        default-overflowpanel="widget-overflow"
-        addon-webext-overflowbutton="unified-extensions-button"
-        addon-webext-overflowtarget="overflowed-extensions-list"
-        context="toolbar-context-menu">
-  <toolbartabstop/>
-
-  <hbox id="nav-bar-customization-target" flex="1">
-    <toolbarbutton id="back-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
-                  data-l10n-id="toolbar-button-back-2"
-                  removable="false" overflows="false"
-                  keepbroadcastattributeswhencustomizing="true"
-                  command="Browser:BackOrBackDuplicate"
-                  onclick="checkForMiddleClick(this, event);"
-                  tooltip="back-button-tooltip"
-                  context="backForwardMenu"/>
-    <toolbarbutton id="forward-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
-                  data-l10n-id="toolbar-button-forward-2"
-                  removable="false" overflows="false"
-                  keepbroadcastattributeswhencustomizing="true"
-                  command="Browser:ForwardOrForwardDuplicate"
-                  onclick="checkForMiddleClick(this, event);"
-                  tooltip="forward-button-tooltip"
-                  context="backForwardMenu"/>
-    <toolbaritem id="stop-reload-button" class="chromeclass-toolbar-additional"
-                data-l10n-id="toolbar-button-stop-reload"
-                removable="true" overflows="false">
-      <toolbarbutton id="reload-button" class="toolbarbutton-1"
-                    data-l10n-id="toolbar-button-reload"
-                    command="Browser:ReloadOrDuplicate"
-                    onclick="checkForMiddleClick(this, event);"
-                    tooltip="dynamic-shortcut-tooltip">
-        <box class="toolbarbutton-animatable-box">
-          <image class="toolbarbutton-animatable-image"/>
-        </box>
-      </toolbarbutton>
-      <toolbarbutton id="stop-button" class="toolbarbutton-1"
-                    data-l10n-id="toolbar-button-stop"
-                    command="Browser:Stop"
-                    tooltip="dynamic-shortcut-tooltip">
-        <box class="toolbarbutton-animatable-box">
-          <image class="toolbarbutton-animatable-image"/>
-        </box>
-      </toolbarbutton>
-    </toolbaritem>
-    <toolbarspring cui-areatype="toolbar" class="chromeclass-toolbar-additional"/>
-    <toolbaritem id="urlbar-container"
-                removable="false"
-                class="chromeclass-location" overflows="false">
-      <toolbartabstop/>
-      <hbox id="urlbar" flex="1"
-            context=""
-            focused="true"
-            pageproxystate="invalid">
-        <hbox id="urlbar-background"/>
-        <hbox id="urlbar-input-container"
-              flex="1"
-              pageproxystate="invalid">
-          <box id="remote-control-box"
-              align="center"
-              collapsed="true">
-              <image id="remote-control-icon"/>
-          </box>
-          <box id="urlbar-search-button"
-              class="chromeclass-toolbar-additional"/>
-          <!-- Use onclick instead of normal popup= syntax since the popup
-              code fires onmousedown, and hence eats our favicon drag events. -->
-          <box id="identity-box"
-              pageproxystate="invalid"
-              ondragstart="gIdentityHandler.onDragStart(event);">
-            <box id="identity-icon-box"
-                role="button"
-                align="center"
-                data-l10n-id="urlbar-identity-button"
-                class="identity-box-button"
-                onclick="gIdentityHandler.handleIdentityButtonEvent(event); PageProxyClickHandler(event);"
-                onkeypress="gIdentityHandler.handleIdentityButtonEvent(event);">
-              <image id="identity-icon"/>
-              <label id="identity-icon-label" class="plain" crop="center" flex="1"/>
-            </box>
-            <box id="identity-permission-box"
-                data-l10n-id="urlbar-permissions-granted"
-                role="button"
-                align="center"
-                class="identity-box-button"
-                onclick="gPermissionPanel.handleIdentityButtonEvent(event); PageProxyClickHandler(event);"
-                onkeypress="gPermissionPanel.handleIdentityButtonEvent(event);">
-              <image id="permissions-granted-icon"/>
-              <box style="pointer-events: none;">
-                  <image class="sharing-icon" id="webrtc-sharing-icon"/>
-                  <image class="sharing-icon geo-icon" id="geo-sharing-icon"/>
-                  <image class="sharing-icon xr-icon" id="xr-sharing-icon"/>
-              </box>
-              <box id="blocked-permissions-container" align="center">
-                <image data-permission-id="geo" class="blocked-permission-icon geo-icon" role="button"
-                      data-l10n-id="urlbar-geolocation-blocked"/>
-                <image data-permission-id="xr" class="blocked-permission-icon xr-icon" role="button"
-                      data-l10n-id="urlbar-xr-blocked"/>
-                <image data-permission-id="desktop-notification" class="blocked-permission-icon desktop-notification-icon" role="button"
-                      data-l10n-id="urlbar-web-notifications-blocked"/>
-                <image data-permission-id="camera" class="blocked-permission-icon camera-icon" role="button"
-                      data-l10n-id="urlbar-camera-blocked"/>
-                <image data-permission-id="microphone" class="blocked-permission-icon microphone-icon" role="button"
-                      data-l10n-id="urlbar-microphone-blocked"/>
-                <image data-permission-id="screen" class="blocked-permission-icon screen-icon" role="button"
-                      data-l10n-id="urlbar-screen-blocked"/>
-                <image data-permission-id="persistent-storage" class="blocked-permission-icon persistent-storage-icon" role="button"
-                      data-l10n-id="urlbar-persistent-storage-blocked"/>
-                <image data-permission-id="popup" class="blocked-permission-icon popup-icon" role="button"
-                      data-l10n-id="urlbar-popup-blocked"/>
-                <image data-permission-id="autoplay-media" class="blocked-permission-icon autoplay-media-icon" role="button"
-                      data-l10n-id="urlbar-autoplay-media-blocked"/>
-                <image data-permission-id="canvas" class="blocked-permission-icon canvas-icon" role="button"
-                      data-l10n-id="urlbar-canvas-blocked"/>
-                <image data-permission-id="midi" class="blocked-permission-icon midi-icon" role="button"
-                      data-l10n-id="urlbar-midi-blocked"/>
-                <image data-permission-id="install" class="blocked-permission-icon install-icon" role="button"
-                      data-l10n-id="urlbar-install-blocked"/>
-                <!-- A speaker icon for blocked speaker selection is not
-                    shown because, without text, this may be interpreted as
-                    active or blocked audio. -->
-              </box>
-            </box>
-            <box id="notification-popup-box"
-                class="anchor-root"
-                hidden="true"
-                align="center">
-              <image id="default-notification-icon" class="notification-anchor-icon" role="button"
-                    data-l10n-id="urlbar-default-notification-anchor"/>
-              <image id="geo-notification-icon" class="notification-anchor-icon geo-icon" role="button"
-                    data-l10n-id="urlbar-geolocation-notification-anchor"/>
-              <image id="xr-notification-icon" class="notification-anchor-icon xr-icon" role="button"
-                    data-l10n-id="urlbar-xr-notification-anchor"/>
-              <image id="autoplay-media-notification-icon" class="notification-anchor-icon autoplay-media-icon" role="button"
-                    data-l10n-id="urlbar-autoplay-notification-anchor"/>
-              <image id="addons-notification-icon" class="notification-anchor-icon install-icon" role="button"
-                    data-l10n-id="urlbar-addons-notification-anchor"/>
-              <image id="canvas-notification-icon" class="notification-anchor-icon" role="button"
-                    data-l10n-id="urlbar-canvas-notification-anchor"/>
-              <image id="indexedDB-notification-icon" class="notification-anchor-icon indexedDB-icon" role="button"
-                    data-l10n-id="urlbar-indexed-db-notification-anchor"/>
-              <image id="password-notification-icon" class="notification-anchor-icon" role="button"
-                    data-l10n-id="urlbar-password-notification-anchor"/>
-              <image id="web-notifications-notification-icon" class="notification-anchor-icon desktop-notification-icon" role="button"
-                    data-l10n-id="urlbar-web-notification-anchor"/>
-              <image id="webRTC-shareDevices-notification-icon" class="notification-anchor-icon camera-icon" role="button"
-                    data-l10n-id="urlbar-web-rtc-share-devices-notification-anchor"/>
-              <image id="webRTC-shareMicrophone-notification-icon" class="notification-anchor-icon microphone-icon" role="button"
-                    data-l10n-id="urlbar-web-rtc-share-microphone-notification-anchor"/>
-              <image id="webRTC-shareScreen-notification-icon" class="notification-anchor-icon screen-icon" role="button"
-                    data-l10n-id="urlbar-web-rtc-share-screen-notification-anchor"/>
-              <image id="webRTC-shareSpeaker-notification-icon" class="notification-anchor-icon speaker-icon" role="button"
-                    data-l10n-id="urlbar-web-rtc-share-speaker-notification-anchor"/>
-              <image id="servicesInstall-notification-icon" class="notification-anchor-icon service-icon" role="button"
-                    data-l10n-id="urlbar-services-notification-anchor"/>
-              <image id="eme-notification-icon" class="notification-anchor-icon drm-icon" role="button"
-                    data-l10n-id="urlbar-eme-notification-anchor"/>
-              <image id="persistent-storage-notification-icon" class="notification-anchor-icon persistent-storage-icon" role="button"
-                    data-l10n-id="urlbar-persistent-storage-notification-anchor"/>
-              <image id="midi-notification-icon" class="notification-anchor-icon midi-icon" role="button"
-                    data-l10n-id="urlbar-midi-notification-anchor"/>
-              <image id="webauthn-notification-icon" class="notification-anchor-icon" role="button"
-                    data-l10n-id="urlbar-web-authn-anchor"/>
-              <image id="identity-credential-notification-icon" class="notification-anchor-icon" role="button"
-                    data-l10n-id="identity-credential-urlbar-anchor"/>
-              <image id="storage-access-notification-icon" class="notification-anchor-icon storage-access-icon" role="button"
-                    data-l10n-id="urlbar-storage-access-anchor"/>
-            </box>
-          </box>
-          <box id="urlbar-label-box" align="center">
-            <label id="urlbar-label-switchtab" class="urlbar-label" data-l10n-id="urlbar-switch-to-tab"/>
-            <label id="urlbar-label-extension" class="urlbar-label" data-l10n-id="urlbar-extension"/>
-            <label id="urlbar-label-search-mode" class="urlbar-label"/>
-          </box>
-          <html:div id="urlbar-search-mode-indicator">
-            <html:span id="urlbar-search-mode-indicator-title"/>
-            <html:div id="urlbar-search-mode-indicator-close"
-                  class="close-button"
-                  role="button"
-                  aria-labelledby="urlbar-search-mode-indicator-close urlbar-search-mode-indicator-title"
-                  data-l10n-id="urlbar-search-mode-indicator-close"/>
-          </html:div>
-          <moz-input-box tooltip="aHTMLTooltip"
-                        class="urlbar-input-box"
-                        flex="1"
-                        role="combobox"
-                        aria-owns="urlbar-results">
-            <html:input id="urlbar-scheme"
-                        required="required"/>
-            <html:input id="urlbar-input"
-                        anonid="input"
-                        aria-controls="urlbar-results"
-                        aria-autocomplete="both"
-                        inputmode="mozAwesomebar"
-                        data-l10n-id="urlbar-placeholder"
-                        data-l10n-attrs="placeholder"/>
-          </moz-input-box>
-          <image id="urlbar-go-button"
-                class="urlbar-icon"
-                role="button"
-                keyNav="false"
-                onclick="gURLBar.handleCommand(event);"
-                data-l10n-id="urlbar-go-button"/>
-                <box id="tracking-protection-icon-container" align="center"
-                role="button"
-                onclick="gProtectionsHandler.handleProtectionsButtonEvent(event);"
-                onkeypress="gProtectionsHandler.handleProtectionsButtonEvent(event);"
-                onmouseover="gProtectionsHandler.onTrackingProtectionIconHoveredOrFocused();"
-                onfocus="gProtectionsHandler.onTrackingProtectionIconHoveredOrFocused();"
-                tooltip="tracking-protection-icon-tooltip">
-                <box id="tracking-protection-icon-box">
-                      <image id="tracking-protection-icon"/>
-                </box>
-                <tooltip id="tracking-protection-icon-tooltip">
-                      <description id="tracking-protection-icon-tooltip-label" class="tooltip-label"/>
-                </tooltip>
-          </box>
-          <hbox id="page-action-buttons" context="pageActionContextMenu" align="center">
-            <toolbartabstop/>
-            <hbox id="contextual-feature-recommendation" role="button" hidden="true">
-              <hbox id="cfr-label-container">
-                <label id="cfr-label"/>
-              </hbox>
-              <hbox id="cfr-button"
-                    role="presentation"
-                    class="urlbar-page-action">
-                <image class="urlbar-icon"/>
-              </hbox>
-            </hbox>
-            <hbox id="userContext-icons" hidden="true">
-              <label id="userContext-label"/>
-              <image id="userContext-indicator"/>
-            </hbox>
-            <hbox id="reader-mode-button"
-                  class="urlbar-page-action"
-                  role="button"
-                  data-l10n-id="reader-view-enter-button"
-                  hidden="true"
-                  tooltip="dynamic-shortcut-tooltip"
-                  onclick="AboutReaderParent.buttonClick(event);">
-              <image id="reader-mode-button-icon"
-                    class="urlbar-icon"/>
-            </hbox>
-            <hbox id="picture-in-picture-button"
-                  class="urlbar-page-action"
-                  role="button"
-                  hidden="true"
-                  onclick="PictureInPicture.toggleUrlbar(event)">
-              <image id="picture-in-picture-button-icon"
-                    class="urlbar-icon"/>
-            </hbox>
-            <hbox id="translations-button"
-                  class="urlbar-page-action"
-                  role="button"
-                  data-l10n-id="urlbar-translations-button2"
-                  hidden="true"
-                  onclick="TranslationsPanel.open(event);"
-                  onkeypress="TranslationsPanel.open(event);">
-              <image class="urlbar-icon" id="translations-button-icon" />
-              <image class="urlbar-icon" id="translations-button-circle-arrows" />
-              <html:span id="translations-button-locale" aria-hidden="true" />
-            </hbox>
-            <hbox id="shopping-sidebar-button"
-                class="urlbar-page-action"
-                role="button"
-                data-l10n-id="shopping-sidebar-open-button2"
-                hidden="true"
-                onclick="ShoppingSidebarParent.urlbarButtonClick(event);">
-              <image id="shopping-sidebar-button-icon"
-                    class="urlbar-icon"/>
-            </hbox>
-            <toolbarbutton id="urlbar-zoom-button"
-                  onclick="FullZoom.resetFromURLBar(event);"
-                  tooltip="dynamic-shortcut-tooltip"
-                  hidden="true"/>
-            <hbox id="pageActionButton"
-                  class="urlbar-page-action"
-                  role="button"
-                  data-l10n-id="urlbar-page-action-button"
-                  onmousedown="BrowserPageActions.mainButtonClicked(event);"
-                  onkeypress="BrowserPageActions.mainButtonClicked(event);">
-              <image class="urlbar-icon"/>
-            </hbox>
-            <hbox id="star-button-box"
-                  hidden="true"
-                  role="button"
-                  class="urlbar-page-action"
-                  onclick="BrowserPageActions.doCommandForAction(PageActions.actionForID('bookmark'), event, this);">
-              <image id="star-button"
-                    class="urlbar-icon"/>
-            </hbox>
-          </hbox>
-        </hbox>
-      </hbox>
-      <toolbartabstop/>
-    </toolbaritem>
-
-    <toolbarspring cui-areatype="toolbar" class="chromeclass-toolbar-additional"/>
-
-    <toolbarbutton id="downloads-button"
-                  class="toolbarbutton-1 chromeclass-toolbar-additional"
-                  delegatesanchor="true"
-                  badged="true"
-                  key="key_openDownloads"
-                  onmousedown="DownloadsIndicatorView.onCommand(event);"
-                  onkeypress="DownloadsIndicatorView.onCommand(event);"
-                  ondrop="DownloadsIndicatorView.onDrop(event);"
-                  ondragover="DownloadsIndicatorView.onDragOver(event);"
-                  ondragenter="DownloadsIndicatorView.onDragOver(event);"
-                  data-l10n-id="navbar-downloads"
-                  removable="true"
-                  overflows="false"
-                  cui-areatype="toolbar"
-                  hidden="true"
-                  tooltip="dynamic-shortcut-tooltip">
-      <box id="downloads-indicator-anchor"
-            consumeanchor="downloads-button">
-        <image id="downloads-indicator-icon"/>
-      </box>
-      <box class="toolbarbutton-animatable-box" id="downloads-indicator-progress-outer">
-        <box id="downloads-indicator-progress-inner"/>
-      </box>
-      <box class="toolbarbutton-animatable-box" id="downloads-indicator-start-box">
-        <image class="toolbarbutton-animatable-image" id="downloads-indicator-start-image"/>
-      </box>
-      <box class="toolbarbutton-animatable-box" id="downloads-indicator-finish-box">
-        <image class="toolbarbutton-animatable-image" id="downloads-indicator-finish-image"/>
-      </box>
-    </toolbarbutton>
-
-    <toolbarbutton id="fxa-toolbar-menu-button" class="toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
-                  badged="true"
-                  delegatesanchor="true"
-                  onmousedown="ZenProfileDialogUI.showSubView(this, event)"
-                  onkeypress="gSync.toggleAccountPanel(this, event)"
-                  consumeanchor="fxa-toolbar-menu-button"
-                  closemenu="none"
-                  data-l10n-id="toolbar-button-account"
-                  cui-areatype="toolbar"
-                  removable="true">
-                  <vbox>
-                    <image id="fxa-avatar-image"/>
-                  </vbox>
-    </toolbarbutton>
-
-    <toolbarbutton id="unified-extensions-button"
-                  class="toolbarbutton-1 chromeclass-toolbar-additional"
-                  delegatesanchor="true"
-                  data-l10n-id="unified-extensions-button"
-                  hidden="true"
-                  onkeypress="gUnifiedExtensions.togglePanel(event)"
-                  onmousedown="gUnifiedExtensions.togglePanel(event)"
-                  overflows="false"
-                  removable="false"/>
-  </hbox>
-
-  <toolbarbutton id="nav-bar-overflow-button"
-                class="toolbarbutton-1 chromeclass-toolbar-additional overflow-button"
-                delegatesanchor="true"
-                skipintoolbarset="true"
-                data-l10n-id="navbar-overflow">
-    <box class="toolbarbutton-animatable-box">
-      <image class="toolbarbutton-animatable-image"/>
-    </box>
-  </toolbarbutton>
-
-  <toolbaritem id="PanelUI-button"
-              removable="false">
-    <toolbarbutton id="ion-button"
-                  class="toolbarbutton-1"
-                  delegatesanchor="true"
-                  hidden="true"
-                  badged="true"
-                  tooltiptext="Ion"
-                  onmousedown="switchToTabHavingURI('about:ion', true);"
-                  onkeypress="switchToTabHavingURI('about:ion', true);"/>
-    <toolbarbutton id="whats-new-menu-button"
-                  class="toolbarbutton-1"
-                  delegatesanchor="true"
-                  hidden="true"
-                  badged="true"
-                  onmousedown="PanelUI.showSubView('PanelUI-whatsNew', this, event);"
-                  onkeypress="PanelUI.showSubView('PanelUI-whatsNew', this, event);"/>
-    <toolbarbutton id="PanelUI-menu-button"
-                  class="toolbarbutton-1"
-                  delegatesanchor="true"
-                  badged="true"
-                  consumeanchor="PanelUI-button"
-                  data-l10n-id="appmenu-menu-button-closed2"/>
-  </toolbaritem>
-</toolbar>
-
-<toolbar id="PersonalToolbar"
-        mode="icons"
-        class="browser-toolbar chromeclass-directories"
-        context="toolbar-context-menu"
-        data-l10n-id="bookmarks-toolbar"
-        data-l10n-attrs="toolbarname"
-        customizable="true">
-  <toolbartabstop skipintoolbarset="true"/>
-
-  <hbox id="personal-toolbar-empty" skipintoolbarset="true" removable="false" hidden="true">
-    <description id="personal-toolbar-empty-description"
-                data-l10n-id="bookmarks-toolbar-empty-message"
-                onclick="BookmarkingUI.openLibraryIfLinkClicked(event);"
-                onkeydown="BookmarkingUI.openLibraryIfLinkClicked(event);">
-      <html:a data-l10n-name="manage-bookmarks" class="text-link" tabindex="0"/>
-    </description>
-  </hbox>
-
-  <toolbaritem id="personal-bookmarks"
-              data-l10n-id="bookmarks-toolbar-placeholder"
-              cui-areatype="toolbar"
-              removable="true">
-    <toolbarbutton id="bookmarks-toolbar-placeholder"
-                  class="bookmark-item"
-                  data-l10n-id="bookmarks-toolbar-placeholder-button"/>
-    <toolbarbutton id="bookmarks-toolbar-button"
-                  class="toolbarbutton-1"
-                  delegatesanchor="true"
-                  flex="1"
-                  data-l10n-id="bookmarks-toolbar-placeholder-button"
-                  oncommand="PlacesToolbarHelper.onPlaceholderCommand();"/>
-    <hbox flex="1"
-          id="PlacesToolbar"
-          context="placesContext"
-          onmouseup="BookmarksEventHandler.onMouseUp(event);"
-          onclick="BookmarksEventHandler.onClick(event, this._placesView);"
-          oncommand="BookmarksEventHandler.onCommand(event);"
-          tooltip="bhTooltip"
-          popupsinherittooltip="true">
-      <hbox id="PlacesToolbarDropIndicatorHolder" align="center" collapsed="true">
-        <image id="PlacesToolbarDropIndicator"
-                collapsed="true"/>
-      </hbox>
-      <scrollbox orient="horizontal"
-                  id="PlacesToolbarItems"
-                  flex="1"/>
-      <toolbarbutton type="menu"
-                      id="PlacesChevron"
-                      class="toolbarbutton-1"
-                      delegatesanchor="true"
-                      collapsed="true"
-                      data-l10n-id="bookmarks-toolbar-chevron">
-        <menupopup id="PlacesChevronPopup"
-                    is="places-popup"
-                    placespopup="true"
-                    class="toolbar-menupopup"
-                    tooltip="bhTooltip" popupsinherittooltip="true"
-                    context="placesContext"
-                    onpopupshowing="document.getElementById('PlacesToolbar')
-                                            ._placesView._onChevronPopupShowing(event);"/>
-      </toolbarbutton>
-    </hbox>
-  </toolbaritem>
-</toolbar>
-
-<html:template id="tab-notification-deck-template">
-  <html:named-deck id="tab-notification-deck"></html:named-deck>
-</html:template>
-
-<html:span id="zen-website-and-native-separator"></html:span>

src/browser/base/content/zenThemeModifier.js

@@ -11,55 +11,126 @@
  * FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC
  */
 
- {
+{
   const kZenThemeAccentColorPref = "zen.theme.accent-color";
+  const kZenThemePanelSeparationPref = "zen.theme.panel-separation";
 
-   /**
+  /**
-    * ZenThemeModifier controls the application of theme data to the browser,
+  * ZenThemeModifier controls the application of theme data to the browser,
-    * for examplem, it injects the accent color to the document. This is used
+  * for examplem, it injects the accent color to the document. This is used
-    * because we need a way to apply the accent color without having to worry about
+  * because we need a way to apply the accent color without having to worry about
-    * shadow roots not inheriting the accent color.
+  * shadow roots not inheriting the accent color.
-    * 
+  * 
-    * note: It must be a firefox builtin page with access to the browser's configuration
+  * note: It must be a firefox builtin page with access to the browser's configuration
-    *  and services.
+  *  and services.
+  */
+  const ZenThemeModifier = {
+    _inMainBrowserWindow: false,
+
+    /**
+    * Listen for theming updates from the LightweightThemeChild actor, and
+    * begin listening to changes in preferred color scheme.
     */
-   const ZenThemeModifier = {
+    init() {
-     /**
+      this._inMainBrowserWindow = window.location.href == "chrome://browser/content/browser.xhtml";
-      * Listen for theming updates from the LightweightThemeChild actor, and
+      this.listenForEvents();
-      * begin listening to changes in preferred color scheme.
+      this.updateAllThemeBasics();
-      */
+      this._zenInitBrowserLayout();
-     init() {
+    },
+
+    listenForEvents() {
       addEventListener("LightweightTheme:Set", this);
       Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this));
+      if (this._inMainBrowserWindow) {
+        Services.prefs.addObserver(kZenThemePanelSeparationPref, this.handleEvent.bind(this));
+      }
+    },
+
+    handleEvent(event) {
+      // note: even might be undefined, but we shoudnt use it!
       this.updateAllThemeBasics();
-     },
+    },
- 
-     handleEvent(event) {
-       // note: even might be undefined, but we shoudnt use it!
-       this.updateAllThemeBasics();
-     },
 
-      /**
+    /**
-        * Update all theme basics, like the accent color.
+      * Update all theme basics, like the accent color.
-        */
+      */
-      updateAllThemeBasics() {
+    updateAllThemeBasics() {
-        this.updateAccentColor();
+      this.updateAccentColor();
-      },
+      this.updateExtraBrowserStyles();
+    },
 
-      /**
+    /**
-       * Update the accent color.
+     * Update the accent color.
-       */
+     */
-      updateAccentColor() {
+    updateAccentColor() {
-        const accentColor = Services.prefs.getStringPref(kZenThemeAccentColorPref, "#0b57d0");
+      const accentColor = Services.prefs.getStringPref(kZenThemeAccentColorPref, "#0b57d0");
-        document.documentElement.style.setProperty("--zen-primary-color", accentColor);
+      document.documentElement.style.setProperty("--zen-primary-color", accentColor);
-        // Notify the page that the accent color has changed, only if a function
+      // Notify the page that the accent color has changed, only if a function
-        // handler is defined.
+      // handler is defined.
-        if (typeof window.zenPageAccentColorChanged === "function") {
+      if (typeof window.zenPageAccentColorChanged === "function") {
-          window.zenPageAccentColorChanged(accentColor);
+        window.zenPageAccentColorChanged(accentColor);
-        }
+      }
-      },
+    },
- 
+
-   };
+    updateExtraBrowserStyles() {
-   ZenThemeModifier.init();
+      // If we are in the main browser window, we can add some extra styles.
- }
+      if (!this._inMainBrowserWindow) return;
- 
+      const panelSeparation = Services.prefs.getIntPref(kZenThemePanelSeparationPref, 7);
+      document.documentElement.style.setProperty("--zen-appcontent-separator-from-window-single", panelSeparation + "px");
+      if (panelSeparation <= 0) {
+        document.documentElement.style.setProperty("--zen-appcontent-border-radius", "0px");
+      } else {
+        document.documentElement.style.setProperty("--zen-appcontent-border-radius", "var(--zen-panel-radius)");
+      }
+      this._changeSidebarLocation(panelSeparation);
+    },
+
+    _changeSidebarLocation(value) {
+      const sidebar = document.getElementById("sidebar-box");
+      const toolbox = document.getElementById("navigator-toolbox");
+      const wrapper = document.getElementById("zen-tabbox-wrapper");
+      const appWrapepr = document.getElementById("zen-sidebar-box-container");
+      if (value <= 0) {
+        wrapper.prepend(sidebar);
+        wrapper.prepend(toolbox);
+        appWrapepr.setAttribute("hidden", "true");
+        sidebar.setAttribute("inlinedwithtoolbox", "true");
+        toolbox.setAttribute("inlinedwithsidebar", "true");
+      } else {
+        appWrapepr.appendChild(toolbox);
+        appWrapepr.appendChild(sidebar);
+        appWrapepr.removeAttribute("hidden");
+        sidebar.removeAttribute("inlinedwithtoolbox");
+        toolbox.removeAttribute("inlinedwithsidebar");
+      }
+    },
+
+    _zenInitBrowserLayout() {
+      const kNavbarItems = [
+        "nav-bar",
+        "PersonalToolbar",
+        "tab-notification-deck-template"
+      ];
+      const kSeparatorId = "zen-website-and-native-separator";
+      const kNewContainerId = "zen-appcontent-navbar-container";
+      let newContainer = document.getElementById(kNewContainerId);
+      for (let id of kNavbarItems) {
+        const node = document.getElementById(id);
+        console.assert(node, "Could not find node with id: " + id);
+        if (!node) continue;
+        newContainer.appendChild(node);
+      }
+      // Add the separator
+      const separator = document.createElement("span");
+      separator.id = kSeparatorId;
+      newContainer.appendChild(separator);
+
+      // move the security button to the right
+      const securityButton = document.getElementById("tracking-protection-icon-container");
+      document.getElementById("urlbar-input-container").insertBefore(securityButton, document.getElementById("page-action-buttons"));
+    },
+  };
+
+  if (typeof Services !== "undefined")
+    ZenThemeModifier.init();
+}

src/browser/components/customizableui/CustomizeMode-sys-mjs.patch

@@ -1,8 +1,16 @@
 diff --git a/browser/components/customizableui/CustomizeMode.sys.mjs b/browser/components/customizableui/CustomizeMode.sys.mjs
-index 5f6d01d8337efc515cc2687782a07af893ea85d8..3a1af9f3969e283a5eb5b225ba8389fd82e22184 100644
+index 5f6d01d8337efc515cc2687782a07af893ea85d8..b008373667b629ff6d230bea0114a28f9847ace9 100644
 --- a/browser/components/customizableui/CustomizeMode.sys.mjs
 +++ b/browser/components/customizableui/CustomizeMode.sys.mjs
-@@ -356,7 +356,7 @@ CustomizeMode.prototype = {
+@@ -138,6 +138,7 @@ export function CustomizeMode(aWindow) {
+   Services.prefs.addObserver(kBookmarksToolbarPref, this);
+ 
+   this.window.addEventListener("unload", this);
++  this._zenUpdateWindowSeparator();
+ }
+ 
+ CustomizeMode.prototype = {
+@@ -356,7 +357,7 @@ CustomizeMode.prototype = {
        this._transitioning = true;
  
        let customizer = document.getElementById("customization-container");
@@ -11,7 +19,7 @@ index 5f6d01d8337efc515cc2687782a07af893ea85d8..3a1af9f3969e283a5eb5b225ba8389fd
        browser.hidden = true;
        customizer.hidden = false;
  
-@@ -487,7 +487,7 @@ CustomizeMode.prototype = {
+@@ -487,7 +488,7 @@ CustomizeMode.prototype = {
      }
  
      let customizer = document.getElementById("customization-container");
@@ -20,7 +28,7 @@ index 5f6d01d8337efc515cc2687782a07af893ea85d8..3a1af9f3969e283a5eb5b225ba8389fd
      customizer.hidden = true;
      browser.hidden = false;
  
-@@ -2278,6 +2278,20 @@ CustomizeMode.prototype = {
+@@ -2278,6 +2279,20 @@ CustomizeMode.prototype = {
          if (makeSpaceImmediately) {
            aItem.setAttribute("notransition", "true");
          }
@@ -41,3 +49,23 @@ index 5f6d01d8337efc515cc2687782a07af893ea85d8..3a1af9f3969e283a5eb5b225ba8389fd
          aItem.style[prop] = borderWidth + "px";
          aItem.style.removeProperty(otherProp);
          if (makeSpaceImmediately) {
+@@ -2931,6 +2946,19 @@ CustomizeMode.prototype = {
+ 
+     return uninit;
+   },
++
++  _zenUpdateWindowSeparator() {
++    let range = this.$("customization-zen-browser-space");
++    const kZenThemePanelSeparationPref = "zen.theme.panel-separation";
++    range.value = Services.prefs.getIntPref(kZenThemePanelSeparationPref);
++    range.addEventListener("input", () => {
++      let value = range.value;
++      Services.prefs.setIntPref(kZenThemePanelSeparationPref, value);
++    });
++    Services.prefs.addObserver(kZenThemePanelSeparationPref, () => {
++      range.value = Services.prefs.getIntPref(kZenThemePanelSeparationPref);
++    });
++  },
+ };
+ 
+ function __dumpDragData(aEvent, caller) {

src/browser/components/customizableui/content/customizeMode-inc-xhtml.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/components/customizableui/content/customizeMode.inc.xhtml b/browser/components/customizableui/content/customizeMode.inc.xhtml
+index 2788cc6a8fb42b7b968eb45aafc02f8d6fcf771d..5142e65576aebaac0e31677b707a5e05f88dae76 100644
+--- a/browser/components/customizableui/content/customizeMode.inc.xhtml
++++ b/browser/components/customizableui/content/customizeMode.inc.xhtml
+@@ -94,7 +94,7 @@
+         class="footer-button"
+         oncommand="gCustomizeMode.togglePong(this.checked);"
+         hidden="true"/>
+-
++#include zenCustomizationMode.inc.xhtml
+ <spacer id="customization-footer-spacer"/>
+ #ifdef XP_MACOSX
+     <button id="customization-touchbar-button"

src/browser/components/customizableui/content/zenCustomizationMode.inc.xhtml

@@ -0,0 +1,4 @@
+
+<toolbarseparator id="zen-customization-uidensity-separator"/>
+<html:input type="range" id="customization-zen-browser-space" min="0" max="16" step="4"></html:input>
+<label data-l10n-id="customization-zen-browser-space" for="customization-zen-browser-space"/>

src/browser/components/newtab/lib/ActivityStream-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/newtab/lib/ActivityStream.sys.mjs b/browser/components/newtab/lib/ActivityStream.sys.mjs
-index f2287fe45edbf4f1e792e3fdcd6886a17c1bb9d2..07437d4fb426919bf8754c01776b00ab06401370 100644
+index f46e8aadf053c1a567642cda5f728534c81c8223..9ba13e5988a1fbcbc0502bba46fe6cfa3c647d85 100644
 --- a/browser/components/newtab/lib/ActivityStream.sys.mjs
 +++ b/browser/components/newtab/lib/ActivityStream.sys.mjs
 @@ -127,7 +127,7 @@ export const PREFS_CONFIG = new Map([

src/browser/locales/en-US/browser/customizeMode-ftl.patch

@@ -0,0 +1,11 @@
+diff --git a/browser/locales/en-US/browser/customizeMode.ftl b/browser/locales/en-US/browser/customizeMode.ftl
+index e5f54b231738fc8fee505c8c8dcccde820995cfc..ec81ef8e451faa25878830b7d4796708e15fe395 100644
+--- a/browser/locales/en-US/browser/customizeMode.ftl
++++ b/browser/locales/en-US/browser/customizeMode.ftl
+@@ -36,3 +36,5 @@ customize-mode-touchbar-cmd =
+     .label = Customize Touch Bar…
+ customize-mode-downloads-button-autohide =
+     .label = Hide button when empty
++
++customization-zen-browser-space = Content Space
+\ No newline at end of file

src/browser/themes/shared/customizableui/customizeMode-css.patch

@@ -0,0 +1,20 @@
+diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css
+index b3ee1ada6cbaef46ade98323d43bf72d84db3b88..a87a7511ba19d02849d1ccab487684156f7d8698 100644
+--- a/browser/themes/shared/customizableui/customizeMode.css
++++ b/browser/themes/shared/customizableui/customizeMode.css
+@@ -547,3 +547,15 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
+   80% { border-color: rgb(20,155,249); color: rgb(20,155,249); }
+   100% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
+ }
++
++#customization-zen-browser-space {
++  width: 200px;
++  height: 5px;
++}
++
++#zen-customization-uidensity-separator {
++  height: 100%;
++  width: 1px;
++  margin: 0 5px;
++  border-left: 1px solid rgba(0,0,0,.15);
++}

src/browser/themes/shared/zen-browser-shared.css

@@ -24,7 +24,7 @@
   --input-border-color: var(--zen-input-border-color) !important;
 }
 
-#PersonalToolbar {
+#PersonalToolbar:not([collapsed="true"]) {
   /*border-top: 1px solid light-dark(#ddd, #4a4a4a);*/
   padding: 5px 0;
   padding-inline: 15px !important;
@@ -183,12 +183,20 @@ button.popup-notification-dropmarker {
   min-width: 55px;
 }
 
+#zen-sidebar-box-container {
+  display: flex;
+}
+
+#zen-sidebar-box-container[hidden="true"] {
+  display: none;
+}
+
 #navigator-toolbox toolbar#TabsToolbar {
   margin: var(--zen-appcontent-separator-from-window);
   background: var(--sidebar-background-color);
   overflow: hidden;
   transition: .2s;
-  border-radius: 15px !important;
+  border-radius: var(--zen-appcontent-border-radius) !important;
   flex-direction: column !important;
   padding: 5px 0;
   margin-right: 0 !important;

src/browser/themes/shared/zen-sidebar.css

@@ -4,7 +4,7 @@
 }
 
 #sidebar-box {
-  --zen-sidebar-box-border-radius: var(--zen-panel-radius);
+  --zen-sidebar-box-border-radius: var(--zen-appcontent-border-radius);
   margin: var(--zen-appcontent-separator-from-window) !important;
   border-radius: var(--zen-sidebar-box-border-radius) !important;
   overflow: hidden;
@@ -29,6 +29,7 @@
   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

@@ -5,6 +5,7 @@
   --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-border-radius: var(--zen-panel-radius);
 }
 
 toolbox#navigator-toolbox, 
@@ -21,7 +22,7 @@ html#main-window > body {
 }
 
 :not([inDOMFullscreen="true"]) #appcontent {
-  border-radius: var(--zen-panel-radius);
+  border-radius: var(--zen-appcontent-border-radius);
   overflow: hidden;
   margin: var(--zen-appcontent-separator-from-window);
 }

update_newtab.py

@@ -0,0 +1,9 @@
+import os
+
+def update_newtab(init: bool = True):
+  if init:
+    os.system("(cd ./engine/browser/components/newtab && ../../../mach npm install && ../../../mach npm install meow@9.0.0)")
+  os.system("cd ./engine && ./mach npm run bundle --prefix=browser/components/newtab")
+
+if __name__ == "__main__":
+  update_newtab(False)