Allow sidebar to be aligned to the right

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

@@ -61,6 +61,7 @@ pref("toolkit.telemetry.pioneer-new-studies-available", false);
 pref('zen.welcomeScreen.enabled', true);
 pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
+pref('zen.tabs.vertical.right-side', false);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);

src/browser/base/content/ZenUIManager.mjs

@@ -29,6 +29,22 @@ var gZenVerticalTabsManager = {
     Services.prefs.addObserver('zen.view.sidebar-expanded', this._updateEvent.bind(this));
     Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', this._updateEvent.bind(this));
     this._updateMaxWidth();
+    this.initRightSideOrderContextMenu();
+  },
+
+  initRightSideOrderContextMenu() {
+    const kConfigKey = 'zen.tabs.vertical.right-side';
+    const fragment = window.MozXULElement.parseXULToFragment(`
+      <menuitem id="zen-toolbar-context-tabs-right"
+                type="checkbox"
+                ${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''}
+                data-lazy-l10n-id="zen-toolbar-context-tabs-right"/>
+    `);
+    fragment.getElementById("zen-toolbar-context-tabs-right").addEventListener('click', () => {
+      let rightSide = Services.prefs.getBoolPref(kConfigKey);
+      Services.prefs.setBoolPref(kConfigKey, !rightSide);
+    });
+    document.getElementById('viewToolbarsMenuSeparator').before(fragment);
   },
 
   _updateEvent() {

src/browser/base/content/zen-locales.inc.xhtml

@@ -1,3 +1,4 @@
 <link rel="localization" href="browser/zen-web-side-panels.ftl"/>
 <link rel="localization" href="browser/zen-workspaces.ftl"/>
 <link rel="localization" href="browser/zen-split-view.ftl"/>
+<link rel="localization" href="browser/zen-vertical-tabs.ftl"/>

src/browser/locales/en-US/browser/zen-vertical-tabs.ftl

@@ -0,0 +1,4 @@
+
+zen-toolbar-context-tabs-right =
+    .label = Tabs on the right
+    .accesskey = R

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

@@ -153,10 +153,6 @@
   align-items: center !important;
 }
 
-.urlbar-page-action:not([hidden="true"]) {
-  display: flex !important;
-}
-
 toolbar .toolbarbutton-1:not(.unified-extensions-item-action-button) {
   & > .toolbarbutton-icon,
   & > .toolbarbutton-badge-stack {
@@ -991,3 +987,30 @@ panelmultiview {
   max-height: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important;
   margin-top: var(--zen-welcome-dialog-space) !important;
 }
+
+/* Display the vertical tabs on the right side */
+
+@media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) {
+  #navigator-toolbox {
+    order: 4;
+    padding-left: 0;
+  }
+
+  @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
+    #navigator-toolbox {
+      padding-left: 5px;
+    }
+  }
+
+  #zen-sidebar-splitter {
+    order: 3;
+  }
+
+  #tabbrowser-tabbox {
+    padding-left: 10px;
+  }
+
+  #tabbrowser-tabpanels .browserSidebarContainer {
+    margin-right: 0 !important;
+  }
+}