Fixed internal keyboard shortcuts for macos (https://github.com/zen-browser/desktop/issues/1629) and bookmarks sidebar separation

src/browser/base/content/ZenStartup.mjs

@@ -97,20 +97,21 @@
 
     _changeSidebarLocation() {
       const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
-      const wrapper = document.getElementById('zen-tabbox-wrapper');
       const appWrapepr = document.getElementById('zen-sidebar-box-container');
-      for (let id of kElementsToAppend) {
-        const elem = document.getElementById(id);
-        if (elem) {
-          wrapper.prepend(elem);
-        }
-      }
       appWrapepr.setAttribute('hidden', 'true');
 
       const browser = document.getElementById('browser');
       const toolbox = document.getElementById('navigator-toolbox');
       browser.prepend(toolbox);
 
+      const sidebarPanelWrapper = document.getElementById('tabbrowser-tabbox');
+      for (let id of kElementsToAppend) {
+        const elem = document.getElementById(id);
+        if (elem) {
+          sidebarPanelWrapper.prepend(elem);
+        }
+      }
+
       // remove all styles except for the width, since we are xulstoring the complet style list
       const width = toolbox.style.width;
       toolbox.removeAttribute('style');

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -1,11 +1,5 @@
 /* All overrides for compact mode go here */
 
-@media not (-moz-bool-pref: 'zen.view.compact') {
-  #sidebar-box {
-    margin-top: 0 !important;
-  }
-}
-
 @media (-moz-bool-pref: 'zen.view.compact') {
   :root:not([customizing]) {
     @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
@@ -92,6 +86,11 @@
         padding-top: var(--zen-element-separation) !important;
       }
 
+      #sidebar-box,
+      #zen-sidebar-web-panel-wrapper {
+        margin-top: var(--zen-element-separation) !important;
+      }
+
       #zen-appcontent-navbar-container {
         position: absolute;
         top: 0;

src/browser/base/content/zen-styles/zen-sidebar.css

@@ -58,12 +58,13 @@ toolbar {
 #zen-tabbox-wrapper {
   & #sidebar-splitter {
     opacity: 0;
+    margin-inline-end: -4px;
   }
 
   & #sidebar-box {
     border-radius: var(--zen-border-radius);
     box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-    margin-bottom: var(--zen-element-separation) !important;
+    margin-bottom: var(--zen-element-separation);
     overflow: hidden;
     border: 1px solid var(--zen-colors-border);
 

src/browser/components/sidebar/browser-sidebar-js.patch

@@ -1,17 +1,17 @@
 diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js
-index 8b4f22ebc13fd013b82e9544dabcbe53d4429c13..22d21bcb825d35648213945bd4275d37b5c10a11 100644
+index c68a32794996348d95f3b1ee363be2eec587065e..3a163c75ac10a204754648dfd1332c79895799c7 100644
 --- a/browser/components/sidebar/browser-sidebar.js
 +++ b/browser/components/sidebar/browser-sidebar.js
-@@ -473,7 +473,7 @@ var SidebarController = {
+@@ -521,7 +521,7 @@ var SidebarController = {
     */
    setPosition() {
      // First reset all ordinals to match DOM ordering.
 -    let browser = document.getElementById("browser");
-+    let browser = document.getElementById("zen-tabbox-wrapper");
++    let browser = document.getElementById("tabbrowser-tabbox");
      [...browser.children].forEach((node, i) => {
        node.style.order = i + 1;
      });
-@@ -487,9 +487,11 @@ var SidebarController = {
+@@ -535,9 +535,11 @@ var SidebarController = {
        let boxOrdinal = this._box.style.order;
        this._box.style.order = appcontent.style.order;
  
@@ -25,11 +25,12 @@ index 8b4f22ebc13fd013b82e9544dabcbe53d4429c13..22d21bcb825d35648213945bd4275d37
        // Indicate we've switched ordering to the box
        this._box.setAttribute("positionend", true);
        sidebarMain.setAttribute("positionend", true);
-@@ -498,6 +500,8 @@ var SidebarController = {
+@@ -546,6 +548,9 @@ var SidebarController = {
        this._box.removeAttribute("positionend");
        sidebarMain.removeAttribute("positionend");
        sidebarContainer.removeAttribute("positionend");
 +      this._box.style.order = 1;
++      this._splitter.style.order = 2;
 +      this._splitter.style.removeProperty("margin-right");
      }