From e96a40a545e50ddfc9222eae3466c5cb890f7052 Mon Sep 17 00:00:00 2001
From: brahim <92426196+BrhmDev@users.noreply.github.com>
Date: Wed, 2 Oct 2024 21:15:35 +0200
Subject: [PATCH] Insert splitters in right location for splitview.

---
 .../base/content/browser-box-inc-xhtml.patch  |  5 ++-
 .../content/zen-splitview-overlay.inc.xhtml   |  5 +++
 .../base/content/zen-styles/zen-decks.css     | 39 ++++++++++++++++---
 3 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 src/browser/base/content/zen-splitview-overlay.inc.xhtml

diff --git a/src/browser/base/content/browser-box-inc-xhtml.patch b/src/browser/base/content/browser-box-inc-xhtml.patch
index a5b90029f..294a90d1c 100644
--- a/src/browser/base/content/browser-box-inc-xhtml.patch
+++ b/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 16559b2c0e3aef391b43e09281aee24007feb0bd..2579cea92a55fabb73fdd130c3706af08c3fd849 100644
+index 108160d9469d44f47c93a3808402e4b27ff59777..39a7b691302bf13e1b5990f46428cff6807a8e56 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -21,11 +21,15 @@
+@@ -23,11 +23,16 @@
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
    <vbox id="appcontent" flex="1">
@@ -12,6 +12,7 @@ index 16559b2c0e3aef391b43e09281aee24007feb0bd..2579cea92a55fabb73fdd130c3706af0
      <tabbox id="tabbrowser-tabbox"
              flex="1" tabcontainer="tabbrowser-tabs">
 +#include zen-sidebar-panel.inc.xhtml
++#include zen-splitview-overlay.inc.xhtml
        <tabpanels id="tabbrowser-tabpanels"
                    flex="1" selectedIndex="0"/>
      </tabbox>
diff --git a/src/browser/base/content/zen-splitview-overlay.inc.xhtml b/src/browser/base/content/zen-splitview-overlay.inc.xhtml
new file mode 100644
index 000000000..75740f7ad
--- /dev/null
+++ b/src/browser/base/content/zen-splitview-overlay.inc.xhtml
@@ -0,0 +1,5 @@
+<hbox id="zen-splitview-overlay">
+  <hbox id="zen-splitview-splitterbox">
+
+  </hbox>
+</hbox>
\ No newline at end of file
diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css
index 618483120..ee67f103f 100644
--- a/src/browser/base/content/zen-styles/zen-decks.css
+++ b/src/browser/base/content/zen-styles/zen-decks.css
@@ -30,29 +30,56 @@
   --uc-tweak-rounded-corners-shadow-color: var(--zen-primary-color) !important;
 }
 
-#tabbrowser-tabpanels:has(> [zen-split='true']) {
+#tabbrowser-tabbox {
   --zen-split-row-gap: calc(var(--zen-element-separation) + 2px);
   --zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
-  margin-right: calc(var(--zen-element-separation) - var(--zen-split-row-gap)/2);
-  margin-bottom: calc(var(--zen-element-separation) - var(--zen-split-column-gap)/2);
-  margin-top: calc(-var(--zen-split-row-gap)/2);
-  margin-left: calc(-var(--zen-split-row-gap)/2);
 }
 
+#tabbrowser-tabpanels:has(> [zen-split='true']) {
+  margin-right: calc(var(--zen-element-separation) - var(--zen-split-row-gap)/2);
+  margin-bottom: calc(var(--zen-element-separation) - var(--zen-split-column-gap)/2);
+  margin-top: calc(var(--zen-split-row-gap)/-2);
+  margin-left: calc(var(--zen-split-row-gap)/-2);
+}
+
+margin-top: calc(-var(--zen-split-row-gap)/2);
+margin-left: calc(-var(--zen-split-row-gap)/2);
 #tabbrowser-tabpanels[zen-split-view] {
   .zen-split-view-splitter {
     display: inherit;
   }
 }
 
+#zen-splitview-overlay {
+  position: absolute;
+  width: calc(100% - var(--zen-element-separation));
+  height: calc(100% - var(--zen-element-separation));
+  pointer-events: none;
+}
+
+#zen-splitview-splitterbox {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
 .zen-split-view-splitter {
-  display: none;
   visibility: inherit;
   cursor: ew-resize;
   -moz-subtree-hidden-only-visually: 0;
+  position: absolute;
+  pointer-events: all;
+}
+
+.zen-split-view-splitter[orient='vertical'] {
+  width: var(--zen-split-column-gap);
+  margin-left: calc(var(--zen-split-row-gap) * -1);
 }
 
 .zen-split-view-splitter[orient='horizontal'] {
+  height: var(--zen-split-column-gap);
+  margin-top: calc(var(--zen-split-column-gap) * -1);
   cursor: n-resize;
 }