Merge pull request #1914 from BrhmDev/feature/rearrange-split-view

Fully customizable splitview using drag and drop

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

@@ -124,6 +124,7 @@ pref('zen.sidebar.close-on-blur', true);
 pref('zen.splitView.working', false);
 pref('zen.splitView.min-resize-width', 7);
 pref('zen.splitView.change-on-hover', false);
+pref('zen.splitView.rearrange-hover-size', 24);
 
 // Zen Workspaces
 pref('zen.workspaces.enabled', true);

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>

src/browser/base/content/zen-splitview-overlay.inc.xhtml

@@ -0,0 +1,5 @@
+<hbox id="zen-splitview-overlay-wrapper">
+  <hbox id="zen-splitview-overlay">
+    <hbox id ="zen-splitview-dropzone"></hbox>
+  </hbox>
+</hbox>

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

@@ -15,41 +15,89 @@
   flex: 0;
   margin: 0;
 }
+#zen-splitview-dropzone {
+  border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
+  transition: inset ease-out .08s;
+  display: none;
+  background-color: color-mix(in srgb, var(--zen-colors-secondary) 30%, transparent 70%);
+}
+#zen-splitview-dropzone[enabled='true'] {
+  display: initial;
+}
 
-#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'] {
+#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'], #zen-splitview-dropzone {
   flex: 1;
+  margin: calc(var(--zen-split-column-gap) / 2) calc(var(--zen-split-row-gap) / 2);
+  position: absolute !important;
+  overflow: hidden;
 }
 
 #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split-anim='true'] {
   animation: zen-deck-fadeIn 0.2s forwards ease-in-out;
 }
 
-#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer[zen-split-active='true'] {
+#tabbrowser-tabpanels[zen-split-view='true']:not([zen-split-resizing]) > [zen-split-anim='true'] {
+  transition: inset 0.08s ease-out;
+  & browser {
+    transition: opacity 0.2s ease-out;
+  }
+}
+
+#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer.deck-selected {
   --uc-tweak-rounded-corners-shadow-color: var(--zen-primary-color) !important;
 }
 
-#tabbrowser-tabpanels:has(> [zen-split='true']) {
-  display: grid;
-  row-gap: 0;
-  column-gap: 0;
+#tabbrowser-tabbox {
   --zen-split-row-gap: calc(var(--zen-element-separation) + 2px);
   --zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
 }
 
+#tabbrowser-tabpanels:has(> [zen-split='true']), #zen-splitview-overlay {
+  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-wrapper {
+  position: absolute;
+  pointer-events: none;
+  padding: inherit;
+  inset: 0;
+}
+
+#zen-splitview-overlay {
+  position: relative;
+  flex: 1;
+  padding-right: var(--zen-element-separation);
+  padding-bottom: var(--zen-element-separation);
+  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-row-gap);
+  margin-left: calc(var(--zen-split-row-gap) / -2);
 }
 
 .zen-split-view-splitter[orient='horizontal'] {
+  height: var(--zen-split-column-gap);
+  margin-top: calc(var(--zen-split-column-gap) / -2);
   cursor: n-resize;
 }