From b0536e1cb12342ed3e3f5e46c3d8e875bda4c4eb Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Thu, 16 May 2024 22:02:27 +0200
Subject: [PATCH] worked on split views

---
 src/browser/base/content/ZenViewSplitter.mjs  | 69 +++++++++++++++----
 .../themes/shared/zen-browser-shared.css      |  1 +
 src/browser/themes/shared/zen-decks.css       | 14 ++++
 src/browser/themes/shared/zen-sources.inc.mn  |  1 +
 4 files changed, 71 insertions(+), 14 deletions(-)
 create mode 100644 src/browser/themes/shared/zen-decks.css

diff --git a/src/browser/base/content/ZenViewSplitter.mjs b/src/browser/base/content/ZenViewSplitter.mjs
index 27a1925f5..d29fbd411 100644
--- a/src/browser/base/content/ZenViewSplitter.mjs
+++ b/src/browser/base/content/ZenViewSplitter.mjs
@@ -1,18 +1,22 @@
 
 var gZenViewSplitter = {
   /**
-   * [
-   *  [
-   *   tab1,
-   *   tab2,
-   *   tab3,
-   *  ]
+   * [ 
+   *   {
+   *     view: <element>,
+   *     tabs: [
+   *      tab1,
+   *      tab2,
+   *      tab3,
+   *     ]
+   *   }
    * ]
    */
   _data: [],
+  currentView: -1,
 
   init() {
-    return; // TODO: Fix this please
+    return;
     window.addEventListener("TabClose", this);
     window.addEventListener("TabChange", this);
   },
@@ -28,15 +32,22 @@ var gZenViewSplitter = {
     }
   },
 
+  get tabBrowserPanel() {
+    if (!this._tabBrowserPanel) {
+      this._tabBrowserPanel = document.getElementById("tabbrowser-tabpanels");
+    }
+    return this._tabBrowserPanel;
+  },
+
   onTabClose(event) {
     const tab = event.target;
     let index = -2;
     while (index !== -1) {
-      index = this._data.findIndex((group) => group.includes(tabId));
+      index = this._data.findIndex((group) => group.tabs.includes(tab));
       if (index !== -1) {
-        this._data[index].splice(this._data[index].indexOf(tabId), 1);
-        if (this._data[index].length < 2) {
-          this._data.splice(index, 1);
+        this._data[index].tabs.splice(this._data[index].tabs.indexOf(tab), 1);
+        if (this._data[index].tabs.length < 2) {
+          this._data.tabs.splice(index, 1);
         }
       }
     }
@@ -52,23 +63,53 @@ var gZenViewSplitter = {
     if (tabs.length < 2) {
       return;
     }
-    this._data.push(tabs);
+    let gridElement = document.createElement("div");
+    gridElement.classList.add("zen-deck");
+    tabs.forEach((tab) => {
+      let container = tab.linkedBrowser.closest(".browserContainer");
+      gridElement.appendChild(container);
+    });
+    this.tabBrowserPanel.appendChild(gridElement);
+    this._data.push({
+      tabs,
+      element: gridElement,
+    });
     this._showSplitView(tabs[0]);
   },
 
   _showSplitView(tab) {
-    const splitData = this._data.find((group) => group.includes(tab));
+    if (this.currentView !== -1) {
+      this._data[this.currentView].element.classList.remove("deck-selected");
+      for (const tab of this._data[this.currentView].tabs) {
+        tab._zenSplitted = false;
+        let container = tab.linkedBrowser.closest(".browserSidebarContainer");
+        console.assert(container, "No container found for tab");
+        container.classList.remove("deck-selected");
+        container.removeAttribute("zen-split");
+      }
+    }
+    const splitData = this._data.find((group) => group.tabs.includes(tab));
     console.log(splitData)
     if (!splitData) {
       return;
     }
-    for (const tab of splitData) {
+    this.currentView = this._data.indexOf(splitData);
+    splitData.element.classList.add("deck-selected");
+    for (const tab of splitData.tabs) {
       tab._zenSplitted = true;
       let container = tab.linkedBrowser.closest(".browserSidebarContainer");
       console.assert(container, "No container found for tab");
       container.classList.add("deck-selected");
       container.setAttribute("zen-split", "true");
     }
+    if (splitData.tabs.length < 2) {
+      let tab = splitData.tabs[0];
+      tab._zenSplitted = false;
+      let container = tab.linkedBrowser.closest(".browserSidebarContainer");
+      console.assert(container, "No container found for tab");
+      this.tabBrowserPanel.appendChild(container);
+      splitData.element.remove();
+    }
   },
 };
 
diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css
index 4d7f98229..ddecfce93 100644
--- a/src/browser/themes/shared/zen-browser-shared.css
+++ b/src/browser/themes/shared/zen-browser-shared.css
@@ -1,6 +1,7 @@
 
 @import url("zen-panel-ui.css");
 @import url("zen-icons/icons.css");
+@import url("zen-decks.css");
 
 :root {
   --toolbarbutton-border-radius: 6px !important;
diff --git a/src/browser/themes/shared/zen-decks.css b/src/browser/themes/shared/zen-decks.css
new file mode 100644
index 000000000..1c1e5f255
--- /dev/null
+++ b/src/browser/themes/shared/zen-decks.css
@@ -0,0 +1,14 @@
+
+/** Zen Decks - ONLY USED FOR SPLIT VIEWS, DO NOT USE THIS CLASS FOR ANY OTHER PURPOSE **/
+
+.zen-deck {
+  display: grid;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.zen-deck:not(.deck-selected) {
+  z-index: -1;
+  visibility: hidden;
+}
diff --git a/src/browser/themes/shared/zen-sources.inc.mn b/src/browser/themes/shared/zen-sources.inc.mn
index 3843ed649..70fceb57a 100644
--- a/src/browser/themes/shared/zen-sources.inc.mn
+++ b/src/browser/themes/shared/zen-sources.inc.mn
@@ -3,5 +3,6 @@
   skin/classic/browser/zen-panel-ui.css                            (../shared/zen-panel-ui.css)
   skin/classic/browser/zen-sidebar-panels.css                      (../shared/zen-sidebar-panels.css)
   skin/classic/browser/preferences/zen-preferences.css             (../shared/preferences/zen-preferences.css)
+  skin/classic/browser/zen-decks.css                               (../shared/zen-decks.css)
 
 #include zen-icons/jar.inc.mn
\ No newline at end of file