chore: Update git clone command to include recursive flag

The git clone command in the README.md file has been updated to include the `--recursive` flag. This flag ensures that the Zen browser components submodule is cloned along with the main repository. This change improves the setup process for new users and ensures that all necessary dependencies are included.

.github/workflows/alpha.yml

@@ -30,8 +30,11 @@ jobs:
         with:
           node-version: 20
 
-      - uses: actions/checkout@v3
-
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ secrets.GITHUB_TOKEN }}
+          
       - name: Install pnpm
         run: npm install -g pnpm
 
@@ -87,8 +90,10 @@ jobs:
         with:
           node-version: 20
 
-      - name: Checkout
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+          token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Install pnpm
         run: npm install -g pnpm
@@ -139,6 +144,7 @@ jobs:
       - uses: actions/checkout@v3
         with:
           submodules: recursive
+          token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Setup git
         run: |
@@ -244,6 +250,9 @@ jobs:
           node-version: 20
 
       - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Install dependencies
         run: |
@@ -292,8 +301,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Update repo
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+          token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Git Pull
         run: git pull

.github/workflows/linux-alpha-build.yml

@@ -25,6 +25,9 @@ jobs:
           node-version: 20
 
       - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+          token: ${{ secrets.GITHUB_TOKEN }}
 
         # Give the runner some swap space in an attempt to stop gkrust from crashing the build
       - name: Set Swap Space

.github/workflows/macos-alpha-build.yml

@@ -30,7 +30,10 @@ jobs:
         with:
           python-version: '3.11' 
 
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+          token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Setup git
         run: |

.github/workflows/windows-alpha-build.yml

@@ -29,7 +29,10 @@ jobs:
         with:
           node-version: 20
 
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+          token: ${{ secrets.GITHUB_TOKEN }}
 
       # Give the runner some swap space in an attempt to stop gkrust from crashing the build
       - name: Set Swap Space

README.md

@@ -28,7 +28,7 @@ Zen is built with performance in mind, and we have optimized the browser to be a
 Clone the project
 
 ```bash
-git clone https://github.com/zen-browser/desktop.git
+git clone https://github.com/zen-browser/desktop.git --recursive
 cd desktop
 ```
 

src/browser/base/content/ZenViewSplitter.mjs

@@ -1,304 +1,19 @@
 
 var gZenViewSplitter = {
-  /**
-   * [ 
-   *   {
-   *     tabs: [
-   *      tab1,
-   *      tab2,
-   *      tab3,
-   *     ],
-   *    gridType: "vsep" | "hsep" | "grid",
-   *   }
-   * ]
-   */
-  _data: [],
-  currentView: -1,
-
   init() {
-    Services.prefs.setBoolPref("zen.splitView.working", false);
-    window.addEventListener("TabClose", this);
-    this.insertIntoContextMenu();
-    console.log("ZenViewSplitter initialized");
-  },
-
-  handleEvent(event) {
-    switch (event.type) {
-      case "TabClose":
-        this.onTabClose(event);
-    }
-  },
-
-  insertIntoContextMenu() {
-    const sibling = document.getElementById("context-stripOnShareLink");
-    const menuitem = document.createXULElement("menuitem");
-    menuitem.setAttribute("id", "context-zenSplitLink");
-    menuitem.setAttribute("hidden", "true");
-    menuitem.setAttribute("oncommand", "gZenViewSplitter.contextSplitLink();");
-    menuitem.setAttribute("data-l10n-id", "zen-split-link");
-    const separator = document.createXULElement("menuseparator");
-    sibling.insertAdjacentElement("afterend", menuitem);
-    sibling.insertAdjacentElement("afterend", separator);
-  },
-
-  get tabBrowserPanel() {
-    if (!this._tabBrowserPanel) {
-      this._tabBrowserPanel = document.getElementById("tabbrowser-tabpanels");
-    }
-    return this._tabBrowserPanel;
-  },
-
-  onTabClose(event) {
-    const tab = event.target;
-    let index = this._data.findIndex((group) => group.tabs.includes(tab));
-    if (index < 0) {
-      return;
-    }
-    let dataTab = this._data[index].tabs;
-    dataTab.splice(dataTab.indexOf(tab), 1);
-    tab._zenSplitted = false;
-    tab.linkedBrowser.zenModeActive = false;
-    let container = tab.linkedBrowser.closest(".browserSidebarContainer");
-    container.removeAttribute("zen-split");
-    if (!event.forUnsplit) {
-      tab.linkedBrowser.docShellIsActive = false;
-      container.style.display = "none";         
-    } else {
-      container.style.gridArea = "1 / 1";
-    }
-    if (dataTab.length < 2) {
-      this._data.splice(index, 1);
-      if (this.currentView == index) {
-        console.assert(dataTab.length == 1, "Data tab length is not 1");      
-        this.currentView = -1;
-        this.tabBrowserPanel.removeAttribute("zen-split-view");
-        this.tabBrowserPanel.style.gridTemplateAreas = "";
-        this.tabBrowserPanel.style.gridGap = "0px";     
-        Services.prefs.setBoolPref("zen.splitView.working", false);
-        for (const tab of dataTab) {
-          let container = tab.linkedBrowser.closest(".browserSidebarContainer");
-          container.removeAttribute("zen-split");
-          container.style.gridArea = "1 / 1";
-          tab._zenSplitted = false;               
-        }     
-      }
-      return;
-    }
-    let lastTab = dataTab[dataTab.length - 1];
-    this._showSplitView(lastTab);
-  },
-
-  contextSplitLink() {
-    const url = gContextMenu.linkURL || gContextMenu.target.ownerDocument.location.href;
-    const tab = gBrowser.selectedTab;
-    const newTab = gZenUIManager.openAndChangeToTab(url);
-    this.splitTabs([tab, newTab]);
+    console.log(gZenSplitViewsBase)
   },
 
   onLocationChange(browser) {
-    let tab = gBrowser.getTabForBrowser(browser);
-    this.updateSplitViewButton(!(tab && tab._zenSplitted));
-    if (!tab) {
-      return;
-    }
-
-    this._showSplitView(tab);
-  },
-
-  splitTabs(tabs) {
-    if (tabs.length < 2) {
-      return;
-    }
-    // Check if any tab is already split
-    for (const tab of tabs) {
-      if (tab._zenSplitted) {
-        let index = this._data.findIndex((group) => group.tabs.includes(tab));
-        if (index < 0) {
-          return;
-        }
-        this._showSplitView(tab);
-        return;
-      }
-    }
-    this._data.push({
-      tabs,
-      gridType: "grid",
-    });
-    gBrowser.selectedTab = tabs[0];
-    this._showSplitView(tabs[0]);
-  },
-
-  _showSplitView(tab) {
-    const splitData = this._data.find((group) => group.tabs.includes(tab));
-    function modifyDecks(tabs, add) {
-      for (const tab of tabs) {
-        tab.linkedBrowser.zenModeActive = add;
-        tab.linkedBrowser.docShellIsActive = add;
-        let browser = tab.linkedBrowser.closest(".browserSidebarContainer");
-        if (add) {
-          browser.setAttribute("zen-split", "true");
-          continue;
-        }
-        browser.removeAttribute("zen-split");
-      }
-    }
-    const handleClick = (tab) => {
-      return ((event) => {
-        gBrowser.selectedTab = tab;
-      })
-    };    
-    if (!splitData || (this.currentView >= 0 && !this._data[this.currentView].tabs.includes(tab))) {
-      this.updateSplitViewButton(true);
-      if (this.currentView < 0) {
-        return;
-      }
-      for (const tab of this._data[this.currentView].tabs) {
-        //tab._zenSplitted = false;
-        let container = tab.linkedBrowser.closest(".browserSidebarContainer");
-        container.removeAttribute("zen-split-active");
-        container.classList.remove("deck-selected");
-        console.assert(container, "No container found for tab");
-        container.removeEventListener("click", handleClick(tab));
-        container.style.gridArea = "";
-      }
-      this.tabBrowserPanel.removeAttribute("zen-split-view");
-      this.tabBrowserPanel.style.gridTemplateAreas = "";
-      Services.prefs.setBoolPref("zen.splitView.working", false);
-      modifyDecks(this._data[this.currentView].tabs, false);
-      // console.log("Setting the active tab to be active", gBrowser.selectedTab);
-      gBrowser.selectedTab.linkedBrowser.docShellIsActive = true; // Make sure the active tab is active
-      this.currentView = -1;
-      if (!splitData) {
-        return;
-      }
-    }
-    this.tabBrowserPanel.setAttribute("zen-split-view", "true");
-    Services.prefs.setBoolPref("zen.splitView.working", true);
-    this.currentView = this._data.indexOf(splitData);
-    let gridType = splitData.gridType || "grid"; // TODO: let user decide the grid type
-    let i = 0;
-    // 2 rows, infinite columns
-    let currentRowGridArea = ["", ""/* first row, second row */];
-    let numberOfRows = 0;
-    for (const _tab of splitData.tabs) {
-      _tab._zenSplitted = true;
-      let container = _tab.linkedBrowser.closest(".browserSidebarContainer");
-      console.assert(container, "No container found for tab");
-      container.removeAttribute("zen-split-active");
-      if (_tab == tab) {
-        container.setAttribute("zen-split-active", "true");
-      }
-      container.setAttribute("zen-split-anim", "true");
-      container.addEventListener("click", handleClick(_tab));
-      // Set the grid type for the container. If the grid type is not "grid", then set the grid type contain 
-      // each column or row. If it's "grid", then try to create
-      if (gridType == "grid") {
-        // Each 2 tabs, create a new row
-        if (i % 2 == 0) {
-          currentRowGridArea[0] += ` tab${i + 1}`;
-        } else {
-          currentRowGridArea[1] += ` tab${i + 1}`;
-          numberOfRows++;
-        }
-        container.style.gridArea = `tab${i + 1}`;
-      }  
-      i++;
-    }
-    if (gridType == "grid") {
-      if ((numberOfRows < splitData.tabs.length / 2) && (splitData.tabs.length != 2)) { 
-        // Make the last tab occupy the last row
-        currentRowGridArea[1] += ` tab${i}`;
-      }
-      if (gridType == "grid" && (splitData.tabs.length === 2)) {
-        currentRowGridArea[0]     = `tab1 tab2`;
-        currentRowGridArea[1] = "";
-      }     
-      this.tabBrowserPanel.style.gridTemplateAreas = `'${currentRowGridArea[0]}'`;
-      if (currentRowGridArea[1] != "") {
-        this.tabBrowserPanel.style.gridTemplateAreas += `     '${currentRowGridArea[1]}'`;
-      }
-    } else if (gridType == "vsep") {
-      this.tabBrowserPanel.style.gridTemplateAreas = `'${splitData.tabs.map((_, i) => `tab${i + 1}`).join(" ")}'`;
-    } else if (gridType == "hsep") {
-      this.tabBrowserPanel.style.gridTemplateAreas = `${splitData.tabs.map((_, i) => `'tab${i + 1}'`).join(" ")}`;
-    }
-    modifyDecks(splitData.tabs, true);
-    this.updateSplitViewButton(false);
-  },
-
-  contextSplitTabs() {
-    let tabs = gBrowser.selectedTabs;
-    this.splitTabs(tabs);
   },
 
   contextCanSplitTabs() {
-    if (gBrowser.selectedTabs.length < 2) {
-      return false;
-    }
-    // Check if any tab is already split
-    for (const tab of gBrowser.selectedTabs) {
-      if (tab._zenSplitted) {
-        return false;
-      }
-    }
-    return true;
   },
 
-  // Panel and url button
-
-  updateSplitViewButton(hidden) {
-    let button = document.getElementById("zen-split-views-box");
-    if (hidden) {
-      button.setAttribute("hidden", "true");
-      return;
-    }
-    button.removeAttribute("hidden");
+  openSplitViewPanel(event) {
   },
 
-  get _modifierElement() {
-    if (!this.__modifierElement) {
-      let wrapper = document.getElementById("template-zen-split-view-modifier");
-      const panel = wrapper.content.firstElementChild;
-      wrapper.replaceWith(wrapper.content);
-      this.__modifierElement = panel;
-    }
-    return this.__modifierElement;
-  },
-
-  async openSplitViewPanel(event) {
-    let panel = this._modifierElement;
-    let target = event.target.parentNode;
-    for (const gridType of ["hsep", "vsep", "grid", "unsplit"]) {
-      let selector = panel.querySelector(`.zen-split-view-modifier-preview.${gridType}`);
-      selector.classList.remove("active");
-      if (this.currentView >= 0 && this._data[this.currentView].gridType == gridType) {
-        selector.classList.add("active");
-      }
-      if (this.__hasSetMenuListener) {
-        continue;
-      }
-      selector.addEventListener("click", ((gridType) => {
-        if (gridType === "unsplit") {
-          let currentTab = gBrowser.selectedTab;
-          let tabs = this._data[this.currentView].tabs;
-          for (const tab of tabs) {
-            this.onTabClose({ target: tab, forUnsplit: true });
-          }
-          gBrowser.selectedTab = currentTab;
-          panel.hidePopup();
-          this.updateSplitViewButton(true);
-          return;
-        }
-        this._data[this.currentView].gridType = gridType;
-        this._showSplitView(gBrowser.selectedTab);
-        panel.hidePopup();
-      }).bind(this, gridType));
-    } 
-    this.__hasSetMenuListener = true;
-    PanelMultiView.openPopup(panel, target, {
-      position: "bottomright topright",
-      triggerEvent: event,
-    }).catch(console.error);
+  contextSplitTabs() {
   },
 };
 

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

@@ -1,8 +1,16 @@
 <script type="text/javascript">
-window.addEventListener("DOMContentLoaded", () => {
+window.addEventListener("DOMContentLoaded", async () => {
   Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
   Services.scriptloader.loadSubScript("chrome://browser/content/ZenWorkspaces.mjs");
   Services.scriptloader.loadSubScript("chrome://browser/content/ZenSidebarManager.mjs");
+
+  // Split view (Leave it at the end)
+  window.gZenSplitViewsBase = new (await import("chrome://browser/content/zen-components/browser-splitViews.mjs")).SplitViews({
+    splitIndicator: "zen-split",
+    browserName: "Zen",
+    defaultSplitView: "grid",
+    debug: true,
+  });
   Services.scriptloader.loadSubScript("chrome://browser/content/ZenViewSplitter.mjs");
 }, { once: true });
 </script>

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

@@ -4,4 +4,5 @@
         content/browser/ZenUIManager.mjs                 (content/ZenUIManager.mjs)
         content/browser/ZenViewSplitter.mjs              (content/ZenViewSplitter.mjs)
         content/browser/ZenWorkspaces.mjs                 (content/ZenWorkspaces.mjs)
-        
+        
+        content/browser/zen-components/browser-splitViews.mjs (content/zen-components/src/browser-splitViews.mjs)