Started working on split views

src/browser/base/content/ZenViewSplitter.mjs

@@ -0,0 +1,75 @@
+
+var gZenViewSplitter = {
+  /**
+   * [
+   *  [
+   *   tab1,
+   *   tab2,
+   *   tab3,
+   *  ]
+   * ]
+   */
+  _data: [],
+
+  init() {
+    return; // TODO: Fix this please
+    window.addEventListener("TabClose", this);
+    window.addEventListener("TabChange", this);
+  },
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "TabClose":
+        this.onTabClose(event);
+        break;
+      case "TabChange":
+        this.onTabChange(event);
+        break;
+    }
+  },
+
+  onTabClose(event) {
+    const tab = event.target;
+    let index = -2;
+    while (index !== -1) {
+      index = this._data.findIndex((group) => group.includes(tabId));
+      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._showSplitView(tab);
+  },
+
+  onTabChange(event) {
+    const tab = event.target;
+    this._showSplitView(tab);
+  },
+
+  splitTabs(tabs) {
+    if (tabs.length < 2) {
+      return;
+    }
+    this._data.push(tabs);
+    this._showSplitView(tabs[0]);
+  },
+
+  _showSplitView(tab) {
+    const splitData = this._data.find((group) => group.includes(tab));
+    console.log(splitData)
+    if (!splitData) {
+      return;
+    }
+    for (const tab of splitData) {
+      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");
+    }
+  },
+};
+
+gZenViewSplitter.init();

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

@@ -1,5 +1,6 @@
 <script type="text/javascript">
 window.addEventListener("DOMContentLoaded", () => {
   Services.scriptloader.loadSubScript("chrome://browser/content/ZenSidebarManager.mjs");
+  Services.scriptloader.loadSubScript("chrome://browser/content/ZenViewSplitter.mjs");
 }, { once: true });
 </script>

src/browser/base/content/zen-scripts.jar.inc.mn

@@ -1,3 +1,5 @@
         content/browser/zen-browser-places.js            (content/zen-browser-places.js)
         content/browser/zenThemeModifier.js              (content/zenThemeModifier.js)
-        content/browser/ZenSidebarManager.mjs        (content/ZenSidebarManager.mjs)
+        content/browser/ZenSidebarManager.mjs            (content/ZenSidebarManager.mjs)
+        content/browser/ZenViewSplitter.mjs              (content/ZenViewSplitter.mjs)
+        

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

@@ -436,10 +436,15 @@ panelmultiview {
   background: var(--toolbar-bgcolor);
 }
 
-#tabbrowser-tabbox[inlinedwithsidebar="true"] #tabbrowser-tabpanels {
+#tabbrowser-tabpanels {
+  background: transparent !important;
+}
+
+#tabbrowser-tabbox[inlinedwithsidebar="true"] #tabbrowser-tabpanels .browserSidebarContainer {
   margin: 0 10px 10px 0;
   border-radius: var(--zen-browser-border-radius);
   border: 1px solid light-dark(#ddd, #4a4a4a);
+  width: 100%;
 }
 
 #tabbrowser-tabbox[inlinedwithsidebar="true"] #tabbrowser-tabpanels .browserStack > browser {

src/toolkit/modules/LightweightThemeConsumer-sys-mjs.patch

@@ -1,8 +1,17 @@
 diff --git a/toolkit/modules/LightweightThemeConsumer.sys.mjs b/toolkit/modules/LightweightThemeConsumer.sys.mjs
-index cf388eb3d393403c077f2a01c3e670cefad7db59..747095a95fc87837093ec7c85437f289450b4486 100644
+index 0d3993370b4ecbdfaf87cfd3145617343c29dc39..8587f7286476ca0dcce1bb02ef02ce0dae9c4df7 100644
 --- a/toolkit/modules/LightweightThemeConsumer.sys.mjs
 +++ b/toolkit/modules/LightweightThemeConsumer.sys.mjs
-@@ -315,6 +315,7 @@ LightweightThemeConsumer.prototype = {
+@@ -32,7 +32,7 @@ const toolkitVariableMap = [
+       lwtProperty: "accentcolor",
+       processColor(rgbaChannels, element) {
+         if (!rgbaChannels || rgbaChannels.a == 0) {
+-          return "white";
++          return "var(--zen-colors-primary)";
+         }
+         // Remove the alpha channel
+         const { r, g, b } = rgbaChannels;
+@@ -334,6 +334,7 @@ LightweightThemeConsumer.prototype = {
        theme.additionalBackgrounds
      );
      _setProperties(root, active, theme, hasTheme);
@@ -10,7 +19,7 @@ index cf388eb3d393403c077f2a01c3e670cefad7db59..747095a95fc87837093ec7c85437f289
  
      if (hasTheme) {
        if (updateGlobalThemeData) {
-@@ -406,6 +407,14 @@ LightweightThemeConsumer.prototype = {
+@@ -425,6 +426,14 @@ LightweightThemeConsumer.prototype = {
        this._lastExperimentData.stylesheet = stylesheet;
      }
    },