Refactor CSS selectors for open elements in navbar and toolbox

.github/workflows/alpha.yml

@@ -580,3 +580,36 @@ jobs:
           commit_user_email: zen-browser-bot@users.noreply.github.com
           repository: ./updates-server
 
+  distro-flatpak:
+    name: Build flatpak repos
+    needs: [release]
+    runs-on: ubuntu-latest
+    container:
+      image: bilelmoussaoui/flatpak-github-actions:gnome-44
+      options: --privileged
+    if: ${{ github.event.inputs.create_release == 'true' && false }}
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          repository: zen-browser/flatpak
+          token: ${{ secrets.DEPLOY_KEY }}
+          submodules: recursive
+
+      - name: Ensure repo is on main branch
+        run: |
+          cd flatpak
+          git checkout main
+          git pull
+          
+      - uses: flatpak/flatpak-github-actions/flatpak-builder@v6
+        with:
+          bundle: org.zen.browser.flatpak
+          manifest-path: flatpak/org.zen.browser.flatpak.json
+          cache-key: flatpak-builder-${{ github.sha }}
+
+      - name: Upload flatpak repo
+        uses: actions/upload-artifact@v3
+        with:
+          name: flatpak-repo
+          path: flatpak/repo

README.md

@@ -7,6 +7,8 @@ Experience tranquillity while browsing the web without people tracking you!
 
 Zen is currently built using firefox version `128.0`!
 
+* Checkout the latest [releases notes](https://get-zen.vercel.app/release-notes)!
+
 ## 🚀 Run Locally
 
 Clone the project
@@ -25,7 +27,7 @@ npm i
 Download and bootstrap the browser
 
 ```
-npm run bootstrap
+npm run init
 ```
 
 Start building the browser

docs/workspaces.md

@@ -0,0 +1,19 @@
+
+# Workspaces Layout
+
+```
+{
+  "workspaces": [
+    {
+      "uuid": "uuid1",
+      "name": "workspace1",
+      "icon": "icon1",
+      "default": true
+    },
+    ...
+  ]
+}
+```
+To save the tabs and identity them, they will contain a `zen-workspace-uuid` attribute with the workspace uuid.
+
+We will make use of firefox's builtin session restore feature to save the tabs and windows after the user closes the browser.

package.json

@@ -8,6 +8,7 @@
     "start": "cd engine && ./mach run --noprofile",
     "import": "surfer import",
     "export": "surfer export",
+    "init": "npm run bootstrap && npm run import",
     "bootstrap": "surfer download && surfer bootstrap",
     "package": "surfer package",
     "update-ff": "python3 scripts/update_ff.py",

src/browser/base/content/ZenUIManager.mjs

@@ -4,9 +4,16 @@ var gZenUIManager = {
     if (window.ownerGlobal.parent) {
       let tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options);
       window.ownerGlobal.parent.gBrowser.selectedTab = tab;
-      return;
+      return tab;
     }
     let tab = window.gBrowser.addTrustedTab(url, options);
     window.gBrowser.selectedTab = tab;
-  }
+    return tab;
+  },
+
+  generateUuidv4() {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+      (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+    );
+  },  
 };

src/browser/base/content/ZenWorkspaces.mjs

@@ -1,6 +1,13 @@
 
 var ZenWorkspaces = {
   async init() {
+    let docElement = document.documentElement;
+    if (docElement.getAttribute("chromehidden").includes("toolbar")
+      || docElement.getAttribute("chromehidden").includes("menubar")) {
+      console.log("!!! ZenWorkspaces is disabled in hidden windows !!!");
+      return; // We are in a hidden window, don't initialize ZenWorkspaces
+    }
+    console.log("Initializing ZenWorkspaces...");
     await this.initializeWorkspaces();
     console.log("ZenWorkspaces initialized");
   },
@@ -18,57 +25,327 @@ var ZenWorkspaces = {
     );
   },
 
+  async _workspaces() {
+    if (!this._workspaceCache) {
+      this._workspaceCache = await IOUtils.readJSON(this._storeFile);
+      if (!this._workspaceCache.workspaces) {
+        this._workspaceCache.workspaces = [];
+      }
+    }
+    return this._workspaceCache;
+  },
+
+  onWorkspacesEnabledChanged() {
+    if (this.workspaceEnabled) {
+      this.initializeWorkspaces();
+    } else {
+      this._workspaceCache = null;
+      document.getElementById("zen-workspaces-button")?.remove();
+      for (let tab of gBrowser.tabs) {
+        gBrowser.showTab(tab);
+      }
+    }
+  },
+
   async initializeWorkspaces() {
+    Services.prefs.addObserver("zen.workspaces.enabled", this.onWorkspacesEnabledChanged.bind(this));
+    this.initializeWorkspacesButton();
     let file = new FileUtils.File(this._storeFile);
     if (!file.exists()) {
       await IOUtils.writeJSON(this._storeFile, {});
     }
+    if (this.workspaceEnabled) {
+      let workspaces = await this._workspaces();
+      console.log("Workspaces loaded", workspaces);
+      if (workspaces.workspaces.length === 0) {
+        await this.createAndSaveWorkspace("Default Workspace", true);
+      } else {
+        let activeWorkspace = workspaces.workspaces.find(workspace => workspace.default);
+        if (!activeWorkspace) {
+          activeWorkspace = workspaces.workspaces.find(workspace => workspace.used);
+          activeWorkspace.used = true;
+          await this.saveWorkspaces();
+        }
+        if (!activeWorkspace) {
+          activeWorkspace = workspaces.workspaces[0];
+          activeWorkspace.used = true;
+          await this.saveWorkspaces();
+        }
+        await this.changeWorkspace(activeWorkspace);
+      }
+    }
   },
 
-  async saveWorkspace(workspaceData, windowID) {
+  async saveWorkspace(workspaceData) {
     let json = await IOUtils.readJSON(this._storeFile);
-    json[windowID] = workspaceData;
+    if (typeof json.workspaces === "undefined") {
+      json.workspaces = [];
+    }
+    json.workspaces.push(workspaceData);
+    console.log("Saving workspace", workspaceData);
     await IOUtils.writeJSON(this._storeFile, json);
-  },
-
-  async loadWorkspace(windowID) {
-    let json = await IOUtils.readJSON(this._storeFile);
-    return json[windowID];
+    this._workspaceCache = null;
   },
 
   async removeWorkspace(windowID) {
     let json = await IOUtils.readJSON(this._storeFile);
-    delete json[windowID];
+    if (!json.workspaces) {
+      return;
+    }
+    json.workspaces = json.workspaces.filter(workspace => workspace.uuid !== windowID);
     await IOUtils.writeJSON(this._storeFile, json);
+    this._workspaceCache = null;
+    await this._propagateWorkspaceData();
   },
 
-  async getWorkspaces() {
-    let json = await IOUtils.readJSON(this._storeFile);
-    return json;
+  async saveWorkspaces() {
+    await IOUtils.writeJSON(this._storeFile, await this._workspaces());
+    this._workspaceCache = null;
   },
 
-  async getWorkspace(windowID) {
-    let json = await IOUtils.readJSON(this._storeFile);
-    return json[windowID];
+  async unsafeSaveWorkspaces(workspaces) {
+    await IOUtils.writeJSON(this._storeFile, workspaces);
+    this._workspaceCache = null;
+  },
+
+  // Workspaces dialog UI management
+
+  openSaveDialog() {
+    let parentPanel = document.getElementById("PanelUI-zen-workspaces-multiview");
+    PanelUI.showSubView("PanelUI-zen-workspaces-create", parentPanel);
+  },
+
+  cancelWorkspaceCreation() {
+    let parentPanel = document.getElementById("PanelUI-zen-workspaces-multiview");
+    parentPanel.goBack();
+  },
+
+  async _propagateWorkspaceData() {
+    let currentContainer = document.getElementById("PanelUI-zen-workspaces-current-info");
+    let workspaceList = document.getElementById("PanelUI-zen-workspaces-list");
+    const createWorkspaceElement = (workspace) => {
+      let element = document.createElement("toolbarbutton");
+      element.className = "subviewbutton";
+      element.setAttribute("tooltiptext", workspace.name);
+      element.setAttribute("zen-workspace-id", workspace.uuid);
+      let childs = window.MozXULElement.parseXULToFragment(`
+        <div class="zen-workspace-icon">
+          ${workspace.name[0].toUpperCase()}
+        </div>
+        <div class="zen-workspace-name">
+          ${workspace.name}
+        </div>
+        <toolbarbutton closemenu="none" class="toolbarbutton-1 zen-workspace-actions">
+          <image class="toolbarbutton-icon" id="zen-workspace-actions-menu-icon"></image>
+        </toolbarbutton>
+      `);
+      childs.querySelector(".zen-workspace-actions").addEventListener("command", (event) => {
+        event.stopPropagation();
+        let button = event.target;
+        const popup = button.ownerDocument.getElementById(
+          "zenWorkspaceActionsMenu"
+        );
+        popup.openPopup(button, "after_end", 0,
+          0,
+          true /* isContextMenu */,
+          false /* attributesOverride */,
+          event);
+      });
+      element.appendChild(childs);
+      element.onclick = (async () => {
+        await this.changeWorkspace(workspace)
+        let panel = document.getElementById("PanelUI-zen-workspaces");
+        PanelMultiView.hidePopup(panel);
+      }).bind(this, workspace);
+      return element;
+    }
+    let workspaces = await this._workspaces();
+    let activeWorkspace = workspaces.workspaces.find(workspace => workspace.used);
+    currentContainer.innerHTML = "";
+    workspaceList.innerHTML = "";
+    workspaceList.parentNode.style.display = "flex";
+    if (workspaces.workspaces.length - 1 <= 0) {
+      workspaceList.parentNode.style.display = "none";
+    }      
+    if (activeWorkspace) {
+      let currentWorkspace = createWorkspaceElement(activeWorkspace);
+      currentContainer.appendChild(currentWorkspace);
+    }
+    for (let workspace of workspaces.workspaces) {
+      if (workspace.used) {
+        continue;
+      }
+      let workspaceElement = createWorkspaceElement(workspace);
+      workspaceList.appendChild(workspaceElement);
+    }
+  },
+
+  async openWorkspacesDialog(event) {
+    if (!this.workspaceEnabled) {
+      return;
+    }
+    let target = event.target;
+    let panel = document.getElementById("PanelUI-zen-workspaces");
+    await this._propagateWorkspaceData();
+    PanelMultiView.openPopup(panel, target, {
+      position: "bottomright topright",
+      triggerEvent: event,
+    }).catch(console.error);
+  },
+
+  initializeWorkspacesButton() {
+    if (!this.workspaceEnabled) {
+      return;
+    } else if (document.getElementById("zen-workspaces-button")) {
+      let button = document.getElementById("zen-workspaces-button");
+      button.removeAttribute("hidden");
+      return;
+    }
+    let browserTabs = document.getElementById("tabbrowser-tabs");
+    let button = document.createElement("toolbarbutton");
+    button.id = "zen-workspaces-button";
+    button.className = "toolbarbutton-1 chromeclass-toolbar-additional";
+    button.setAttribute("label", "Workspaces");
+    button.setAttribute("tooltiptext", "Workspaces");
+    button.onclick = this.openWorkspacesDialog.bind(this);
+    browserTabs.insertAdjacentElement("beforebegin", button);
+  },
+
+  async _updateWorkspacesButton() {
+    let button = document.getElementById("zen-workspaces-button");
+    if (!button) {
+      return;
+    }
+    let activeWorkspace = (await this._workspaces()).workspaces.find(workspace => workspace.used);
+    if (activeWorkspace) {
+      button.innerHTML = activeWorkspace.name[0].toUpperCase();
+    }
   },
 
   // Workspaces management
 
-  _createWorkspaceData(windowID) {
-    let window = Services.wm.getOuterWindowWithId(windowID);
-    let tabs = Array.from(window.gBrowser.tabs).map(tab => ({
-      url: tab.linkedBrowser.currentURI.spec,
-      title: tab.label,
-    }));
-    return {
-      tabs,
-    };
+  get _workspaceInput() {
+    return document.getElementById("PanelUI-zen-workspaces-create-input");
   },
 
-  async saveCurrentWorkspace(windowID) {
-    let workspaceData = this._createWorkspaceData(windowID);
-    await this.saveWorkspace(workspaceData, windowID);
+  _prepareNewWorkspace(window) {
+    document.documentElement.setAttribute("zen-workspace-id", window.uuid);
+    this._createNewTabForWorkspace(window);
   },
+
+  _createNewTabForWorkspace(window) {
+    let tab = gZenUIManager.openAndChangeToTab(Services.prefs.getStringPref("browser.startup.homepage"));
+    tab.setAttribute("zen-workspace-id", window.uuid);
+  },
+
+  async saveWorkspaceFromInput() {
+    let workspaceName = this._workspaceInput.value;
+    if (!workspaceName) {
+      return;
+    }
+    this._workspaceInput.value = "";
+    await this.createAndSaveWorkspace(workspaceName);
+    document.getElementById("PanelUI-zen-workspaces").hidePopup(true);
+  },
+
+  onWorkspaceNameChange(event) {
+    let button = document.getElementById("PanelUI-zen-workspaces-create-save");
+    if (this._workspaceInput.value === "") {
+      button.setAttribute("disabled", "true");
+      return;
+    }
+    button.removeAttribute("disabled");
+  },
+
+  async changeWorkspace(window) {
+    if (!this.workspaceEnabled) {
+      return;
+    }
+    let firstTab = undefined;
+    // Get the number of tabs that are hidden before we start hiding them
+    let numHiddenTabs = gBrowser.tabs.reduce((acc, tab) => {
+      return tab.getAttribute("zen-workspace-id") !== window.uuid ? acc + 1 : acc;
+    }, 0);
+    let workspaces = await this._workspaces();
+    for (let workspace of workspaces.workspaces) {
+      workspace.used = workspace.uuid === window.uuid;
+    }
+    this.unsafeSaveWorkspaces(workspaces);
+    if (numHiddenTabs === gBrowser.tabs.length) {
+      // If all tabs are hidden, we need to create a new tab
+      // to show the workspace
+      this._createNewTabForWorkspace(window);
+    }
+    for (let tab of gBrowser.tabs) {
+      if (tab.getAttribute("zen-workspace-id") === window.uuid) {
+        if (!firstTab) {
+          firstTab = tab;
+          gBrowser.selectedTab = firstTab;
+        }
+        gBrowser.showTab(tab);
+      }
+    }
+    for (let tab of gBrowser.tabs) {
+      if (tab.getAttribute("zen-workspace-id") !== window.uuid) {
+        gBrowser.hideTab(tab);
+      }
+    }
+    document.documentElement.setAttribute("zen-workspace-id", window.uuid);
+    await this.saveWorkspaces();
+    await this._updateWorkspacesButton();
+    await this._propagateWorkspaceData();
+  },
+
+  _createWorkspaceData(name, isDefault) {
+    let window = {
+      uuid: gZenUIManager.generateUuidv4(),
+      default: isDefault,
+      used: true,
+      icon: "",
+      name: name,
+    };
+    this._prepareNewWorkspace(window);
+    return window;
+  },
+
+  async createAndSaveWorkspace(name = "New Workspace", isDefault = false) {
+    if (!this.workspaceEnabled) {
+      return;
+    }
+    let workspaceData = this._createWorkspaceData(name, isDefault);
+    await this.saveWorkspace(workspaceData);
+    await this.changeWorkspace(workspaceData);
+  },
+
+  async onLocationChange(browser) {
+    let tab = gBrowser.getTabForBrowser(browser);
+    let workspaceID = tab.getAttribute("zen-workspace-id");
+    if (!workspaceID) {
+      let workspaces = await this._workspaces();
+      let activeWorkspace = workspaces.workspaces.find(workspace => workspace.used);
+      if (!activeWorkspace) {
+        return;
+      }
+      tab.setAttribute("zen-workspace-id", activeWorkspace.uuid);
+    }
+  },
+
+  // Context menu management
+
+  _contextMenuId: null,
+  updateContextMenu(event) {
+    event.preventDefault();
+    let target = event.target;
+    let workspace = target.closest("[zen-workspace-id]");
+    if (!workspace) {
+      return;
+    }
+    _contextMenuId = workspace.getAttribute("zen-workspace-id");
+  },
+
+  contextDelete() {
+    this.removeWorkspace(_contextMenuId);
+  }
 };
 
 ZenWorkspaces.init();

src/browser/base/content/appmenu-viewcache-inc-xhtml.patch

@@ -1,11 +0,0 @@
-diff --git a/browser/base/content/appmenu-viewcache.inc.xhtml b/browser/base/content/appmenu-viewcache.inc.xhtml
-index 07b1765f18236835363fb74c898d3a690659cc9b..7b58cbb5de147ed29fbc48c0093c731fe5cca90b 100644
---- a/browser/base/content/appmenu-viewcache.inc.xhtml
-+++ b/browser/base/content/appmenu-viewcache.inc.xhtml
-@@ -765,5 +765,6 @@
-     </vbox>
-   </panelview>
- 
-+#include zen-panels-ui.inc.xhtml
- #include ../../components/reportbrokensite/content/reportBrokenSitePanel.inc.xhtml
- </html:template>

src/browser/base/content/browser-box-inc-xhtml.patch

@@ -1,12 +1,10 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index b0308911446dd6fc549401371a85faa6341f8338..3942a0b45308b110685c34e8a9367d7c5d40d8c4 100644
+index 16559b2c0e3aef391b43e09281aee24007feb0bd..2579cea92a55fabb73fdd130c3706af08c3fd849 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -18,12 +18,18 @@
-     <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
+@@ -21,11 +21,15 @@
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
-+  <vbox id="browser">
    <vbox id="appcontent" flex="1">
 +    <html:div id="zen-appcontent-navbar-container"></html:div>
      <!-- gNotificationBox will be added here lazily. -->
@@ -18,6 +16,5 @@ index b0308911446dd6fc549401371a85faa6341f8338..3942a0b45308b110685c34e8a9367d7c
                    flex="1" selectedIndex="0"/>
      </tabbox>
 +  </hbox>
-+  </vbox>
    </vbox>
  </hbox>

src/browser/base/content/browser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index 5f41ca778131eedfd32043dc27d6528be978c4fb..086b01e8fdf80dd333d80b9eede190cdb5315b70 100644
+index b18f371a47fec53882c3dfb68e34d1a474eaf446..2c183d7e7fc65e00403f5e40e7859b915a3ea700 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
 @@ -630,6 +630,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
@@ -18,16 +18,17 @@ index 5f41ca778131eedfd32043dc27d6528be978c4fb..086b01e8fdf80dd333d80b9eede190cd
  customElements.setElementCreationCallback("screenshots-buttons", () => {
    Services.scriptloader.loadSubScript(
      "chrome://browser/content/screenshots/screenshots-buttons.js",
-@@ -3668,6 +3677,8 @@ var XULBrowserWindow = {
+@@ -3679,6 +3688,9 @@ var XULBrowserWindow = {
      AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser);
      TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
  
 +    gZenViewSplitter.onLocationChange(gBrowser.selectedBrowser);
++    ZenWorkspaces.onLocationChange(gBrowser.selectedBrowser);
 +
      PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser);
  
      if (!gMultiProcessBrowser) {
-@@ -4982,7 +4993,7 @@ function setToolbarVisibility(
+@@ -5001,7 +5013,7 @@ function setToolbarVisibility(
        );
      }
  
@@ -36,7 +37,7 @@ index 5f41ca778131eedfd32043dc27d6528be978c4fb..086b01e8fdf80dd333d80b9eede190cd
      switch (isVisible) {
        case true:
        case "always":
-@@ -7813,6 +7824,12 @@ var gDialogBox = {
+@@ -7832,6 +7844,12 @@ var gDialogBox = {
      parentElement.showModal();
      this._didOpenHTMLDialog = true;
  

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 0a67afa81ff5e10dcbfb53149f7ed9109de084ac..bdcce262b5fc18767efd1054fd724b97c42471e4 100644
+index 390a1300a1213af2b411ba09c67e3c25750ee6c3..7c80c54dd43b5414bf5ea9101d53431c0b4a140b 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -32,10 +32,11 @@

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

@@ -1 +1,2 @@
-<link rel="localization" href="browser/zen-web-side-panels.ftl"/>
+<link rel="localization" href="browser/zen-web-side-panels.ftl"/>
+<link rel="localization" href="browser/zen-workspaces.ftl"/>

src/browser/base/content/zen-panels-ui.inc.xhtml

@@ -1,18 +0,0 @@
-<panelview id="PanelUI-zen-profiles" position="bottomleft topleft" mainview="true" side="right">
-  <vbox>
-    <html:div id="PanelUI-zen-profiles-header">
-      <html:div id="PanelUI-zen-profiles-user-picture"></html:div>
-    </html:div>
-    <vbox id="PanelUI-zen-profiles-current-info">
-      <label id="PanelUI-zen-profiles-current-name"></label>
-      <p id="PanelUI-zen-profiles-current-profile-current" data-l10n-id="zen-panel-ui-current-profile-text"></p>
-    </vbox>
-    <hbox id="PanelUI-zen-profiles-actions">
-      <toolbarbutton id="PanelUI-zen-profiles-managePrfs" oncommand="switchToTabHavingURI('about:profiles', true);" data-l10n-id="appmenu-manage-profiles" class="subviewbutton"></toolbarbutton>
-      <toolbarbutton id="PanelUI-zen-profiles-privateWin" command="Tools:PrivateBrowsing" data-l10n-id="appmenuitem-new-private-window" class="subviewbutton"></toolbarbutton>
-      <toolbarbutton id="PanelUI-zen-profiles-newProfile" oncommand="ZenProfileDialogUI.createProfileWizard();" data-l10n-id="appmenu-create-profile" class="subviewbutton"></toolbarbutton>
-    </hbox>
-    <vbox id="PanelUI-zen-profiles-list">      
-    </vbox>
-  </vbox>
-</panelview>

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

@@ -56,3 +56,66 @@
   </panelmultiview>
 </panel>
 </html:template>
+
+<panelview id="PanelUI-zen-profiles" position="bottomleft topleft" mainview="true" side="right">
+  <vbox>
+    <html:div id="PanelUI-zen-profiles-header">
+      <html:div id="PanelUI-zen-profiles-user-picture"></html:div>
+    </html:div>
+    <vbox id="PanelUI-zen-profiles-current-info">
+      <label id="PanelUI-zen-profiles-current-name"></label>
+      <p id="PanelUI-zen-profiles-current-profile-current" data-l10n-id="zen-panel-ui-current-profile-text"></p>
+    </vbox>
+    <hbox id="PanelUI-zen-profiles-actions">
+      <toolbarbutton id="PanelUI-zen-profiles-managePrfs" oncommand="switchToTabHavingURI('about:profiles', true);" data-l10n-id="appmenu-manage-profiles" class="subviewbutton"></toolbarbutton>
+      <toolbarbutton id="PanelUI-zen-profiles-privateWin" command="Tools:PrivateBrowsing" data-l10n-id="appmenuitem-new-private-window" class="subviewbutton"></toolbarbutton>
+      <toolbarbutton id="PanelUI-zen-profiles-newProfile" oncommand="ZenProfileDialogUI.createProfileWizard();" data-l10n-id="appmenu-create-profile" class="subviewbutton"></toolbarbutton>
+    </hbox>
+    <vbox id="PanelUI-zen-profiles-list">      
+    </vbox>
+  </vbox>
+</panelview>
+
+<panel type="arrow" role="alertdialog" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
+  <panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
+    <panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
+      <vbox>
+        <hbox>
+          <h3 data-l10n-id="zen-panel-ui-current-window-text"></h3>
+          <hbox class="translations-panel-beta" role="image" aria-label="Beta">
+            <image class="translations-panel-beta-icon"></image>
+          </hbox>
+          <toolbarbutton id="PanelUI-zen-workspaces-new" oncommand="ZenWorkspaces.openSaveDialog();" class="subviewbutton">
+            <image></image>
+          </toolbarbutton>
+        </hbox>
+        <html:div id="PanelUI-zen-workspaces-current-info">
+        </html:div>
+      </vbox>
+      <vbox>
+        <h3 data-l10n-id="zen-panel-ui-workspaces-text"></h3>
+        <html:div id="PanelUI-zen-workspaces-list">
+        </html:div>
+      </vbox>
+    </panelview>
+    <panelview id="PanelUI-zen-workspaces-create" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
+      <vbox>
+        <h1 data-l10n-id="zen-panel-ui-workspaces-create-text"></h1>
+        <html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceNameChange(this);" />
+      </vbox>
+      <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-create-footer">
+        <button disabled="true" default="true" slot="primary" id="PanelUI-zen-workspaces-create-save" oncommand="ZenWorkspaces.saveWorkspaceFromInput();" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-save">
+        </button>
+        <button id="PanelUI-zen-workspaces-create-cancel" oncommand="ZenWorkspaces.cancelWorkspaceCreation();" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-cancel">
+        </button>
+      </html:moz-button-group>
+    </panelview>
+  </panelmultiview>
+</panel>
+
+<menupopup id="zenWorkspaceActionsMenu"
+            onpopupshowing="ZenWorkspaces.updateContextMenu(event);"
+            onpopuphidden="ZenWorkspaces._contextMenuId = null;">
+  <menuseparator/>
+  <menuitem id="context_zenDeleteWorkspace" oncommand="ZenWorkspaces.contextDelete();" data-l10n-id="zen-workspaces-panel-context-delete"/>
+</menupopup>

src/browser/components/preferences/jar-mn.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/preferences/jar.mn b/browser/components/preferences/jar.mn
-index 3b60d18e483bc3c4e9b4309f0dc1e4231b7116b1..aa30bc3de15b68ac90c12142a8851af99e1209ae 100644
+index 3b60d18e483bc3c4e9b4309f0dc1e4231b7116b1..e5b679b25941a7f1ed52db9fa3f7740a7220b9e4 100644
 --- a/browser/components/preferences/jar.mn
 +++ b/browser/components/preferences/jar.mn
 @@ -23,3 +23,5 @@ browser.jar:
@@ -7,4 +7,4 @@ index 3b60d18e483bc3c4e9b4309f0dc1e4231b7116b1..aa30bc3de15b68ac90c12142a8851af9
     content/browser/preferences/web-appearance-dark.svg
     content/browser/preferences/web-appearance-light.svg
 +
-+   content/browser/preferences/zen-looks.js
++   content/browser/preferences/zen-settings.js

src/browser/components/preferences/preferences-js.patch

@@ -1,12 +1,13 @@
 diff --git a/browser/components/preferences/preferences.js b/browser/components/preferences/preferences.js
-index c30a51c67ce636fa889090419a5c2642d74b4f49..b48ab31c564db4a4911c9fca291b4f09ba1025af 100644
+index 7e21bab426b6eb52fe84876d817fddbdb1a35ffc..fe23eb36a28a2baa4facad80a776e739ee6e43b1 100644
 --- a/browser/components/preferences/preferences.js
 +++ b/browser/components/preferences/preferences.js
-@@ -198,6 +198,7 @@ function init_all() {
+@@ -196,6 +196,8 @@ function init_all() {
    // the entire document.
    Preferences.queueUpdateOfAllElements();
    Services.telemetry.setEventRecordingEnabled("aboutpreferences", true);
 +  register_module("paneZenLooks", gZenLooksAndFeel);
++  register_module("paneZenWorkspaces", gZenWorkspacesSettings);
  
    register_module("paneGeneral", gMainPane);
    register_module("paneHome", gHomePane);

src/browser/components/preferences/preferences-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml
-index eee227822a772bec128d6adbe4f6aca90ed810f6..b52ee22054e3b2c80d4b780bc01507478becc583 100644
+index 3affb19d1a243da4a5782c9a4a5588d165b4119f..ccb56cc323ff5c3e94013de782af54911fc0c360 100644
 --- a/browser/components/preferences/preferences.xhtml
 +++ b/browser/components/preferences/preferences.xhtml
 @@ -43,6 +43,8 @@
@@ -11,7 +11,7 @@ index eee227822a772bec128d6adbe4f6aca90ed810f6..b52ee22054e3b2c80d4b780bc0150747
    <link rel="localization" href="branding/brand.ftl"/>
    <link rel="localization" href="browser/browser.ftl"/>
      <!-- Used by fontbuilder.js -->
-@@ -99,6 +101,12 @@
+@@ -97,6 +99,12 @@
    <hbox flex="1">
  
      <vbox class="navigation">
@@ -24,7 +24,7 @@ index eee227822a772bec128d6adbe4f6aca90ed810f6..b52ee22054e3b2c80d4b780bc0150747
        <!-- category list -->
        <richlistbox id="categories" data-l10n-id="category-list" data-l10n-attrs="aria-label">
          <richlistitem id="category-general"
-@@ -112,6 +120,17 @@
+@@ -110,6 +118,28 @@
            <label class="category-name" flex="1" data-l10n-id="pane-general-title"></label>
          </richlistitem>
  
@@ -38,11 +38,22 @@ index eee227822a772bec128d6adbe4f6aca90ed810f6..b52ee22054e3b2c80d4b780bc0150747
 +          <image class="category-icon"/>
 +          <label class="category-name" flex="1" data-l10n-id="pane-zen-looks-title"></label>
 +        </richlistitem>
++
++        <richlistitem id="category-zen-workspaces"
++                      class="category"
++                      value="paneZenWorkspaces"
++                      helpTopic="prefs-main"
++                      data-l10n-id="category-zen-workspaces"
++                      data-l10n-attrs="tooltiptext"
++                      align="center">
++          <image class="category-icon"/>
++          <label class="category-name" flex="1" data-l10n-id="pane-zen-workspaces-title"></label>
++        </richlistitem>
 +
          <richlistitem id="category-home"
                        class="category"
                        value="paneHome"
-@@ -230,11 +249,13 @@
+@@ -228,11 +258,13 @@
                  <html:a href="about:policies" target="_blank" data-l10n-id="managed-notice"/>
                </hbox>
              </hbox>
@@ -56,11 +67,12 @@ index eee227822a772bec128d6adbe4f6aca90ed810f6..b52ee22054e3b2c80d4b780bc0150747
            </hbox>
          </hbox>
          <vbox id="mainPrefPane">
-@@ -248,6 +269,7 @@
+@@ -246,6 +278,8 @@
  #include sync.inc.xhtml
  #include experimental.inc.xhtml
  #include moreFromMozilla.inc.xhtml
 +#include zenLooksAndFeel.inc.xhtml
++#include zenWorkspaces.inc.xhtml
          </vbox>
        </vbox>
      </vbox>

src/browser/components/preferences/zen-settings.js

@@ -48,6 +48,11 @@ var gZenLooksAndFeel = {
   },
 };
 
+var gZenWorkspacesSettings = {
+  init() {
+  },
+};
+
 Preferences.addAll([
   {
     id: "zen.theme.toolbar-themed",
@@ -64,4 +69,9 @@ Preferences.addAll([
     type: "bool",
     default: false,
   },
+  {
+    id: "zen.workspaces.enabled",
+    type: "bool",
+    default: true,
+  }
 ]);

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -1,4 +1,4 @@
-<script src="chrome://browser/content/preferences/zen-looks.js"/>
+<script src="chrome://browser/content/preferences/zen-settings.js"/>
 <html:template id="template-paneZenLooks">
 <hbox id="zenLooksCategory"
       class="subcategory"

src/browser/components/preferences/zenWorkspaces.inc.xhtml

@@ -0,0 +1,25 @@
+<html:template id="template-paneZenWorkspaces">
+<hbox id="ZenWorkspacesCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenWorkspaces">
+<html:h1 data-l10n-id="pane-workspaces-title"/>
+</hbox>
+
+<hbox id="zenSidePanelsCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenWorkspaces">
+<html:h1 data-l10n-id="pane-settings-workspaces-title"/>
+</hbox>
+
+<groupbox id="zenSidePanelsGroup" data-category="paneZenWorkspaces" hidden="true" class="highlighting-group">
+      <label><html:h2 data-l10n-id="zen-settings-workspaces-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-settings-workspaces-description" />
+
+      <checkbox id="zenWorkspacesActivate"
+            data-l10n-id="zen-settings-workspaces-enabled"
+            preference="zen.workspaces.enabled"/>
+</groupbox>
+
+</html:template>

src/browser/components/sessionstore/TabState-sys-mjs.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/components/sessionstore/TabState.sys.mjs b/browser/components/sessionstore/TabState.sys.mjs
+index 26f5671c849d9b0a126d79b07bc7d3d7870826ec..decc4c975507c9111df78dbc43434fa46d5f5e82 100644
+--- a/browser/components/sessionstore/TabState.sys.mjs
++++ b/browser/components/sessionstore/TabState.sys.mjs
+@@ -98,6 +98,8 @@ var TabStateInternal = {
+       tabData.muteReason = tab.muteReason;
+     }
+ 
++    tabData.zenWorkspace = tab.getAttribute("zen-workspace-id");
++
+     tabData.searchMode = tab.ownerGlobal.gURLBar.getSearchMode(browser, true);
+ 
+     tabData.userContextId = tab.userContextId || 0;

src/browser/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,8 +1,31 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 3bca0b6d30468dc3a755219723f673ec80dfce6e..200a609ea31a8c904e2d3e39a3a06ff67fb313ed 100644
+index 2674dc2bebf436529a46d45c52cb56e86b82c03f..960c0039cd511a9d2c78e2a0c8c78080464950ee 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -7623,6 +7623,11 @@ var TabContextMenu = {
+@@ -3208,6 +3208,11 @@
+         ) {
+           tabWasReused = true;
+           tab = this.selectedTab;
++
++          if (tabData.zenWorkspace) {
++            tab.setAttribute("zen-workspace-id", tabData.zenWorkspace);
++          }
++
+           if (!tabData.pinned) {
+             this.unpinTab(tab);
+           } else {
+@@ -3257,6 +3262,10 @@
+             preferredRemoteType,
+           });
+ 
++          if (tabData.zenWorkspace) {
++            tab.setAttribute("zen-workspace-id", tabData.zenWorkspace);
++          }
++
+           if (select) {
+             tabToSelect = tab;
+           }
+@@ -7878,6 +7887,11 @@ var TabContextMenu = {
        this.contextTab.linkedBrowser,
        document.getElementById("context_sendTabToDevice")
      );

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c992624170bde0e63 100644
+index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf457da3500c 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
-@@ -538,19 +538,36 @@
+@@ -552,19 +552,36 @@
        }
        dt.setDragImage(toDrag, dragImageOffset, dragImageOffset);
  
@@ -40,7 +40,7 @@ index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c99262417
          movingTabs: (tab.multiselected ? gBrowser.selectedTabs : [tab]).filter(
            t => t.pinned == tab.pinned
          ),
-@@ -637,21 +654,30 @@
+@@ -651,21 +668,30 @@
          }
        }
  
@@ -76,7 +76,7 @@ index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c99262417
            ];
          }
          newMargin = pixelsToScroll > 0 ? maxMargin : minMargin;
-@@ -661,29 +687,38 @@
+@@ -675,29 +701,38 @@
          if (newIndex == children.length) {
            let tabRect = this._getVisibleTabs().at(-1).getBoundingClientRect();
            if (RTL_UI) {
@@ -121,7 +121,7 @@ index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c99262417
        var dt = event.dataTransfer;
        var dropEffect = dt.dropEffect;
        var draggedTab;
-@@ -740,7 +775,7 @@
+@@ -754,7 +789,7 @@
            incrementDropIndex = false;
          }
  
@@ -130,7 +130,7 @@ index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c99262417
            for (let tab of movingTabs) {
              tab.toggleAttribute("tabdrop-samewindow", true);
              tab.style.transform = "translateX(" + newTranslateX + "px)";
-@@ -1126,10 +1161,13 @@
+@@ -1144,10 +1179,13 @@
      }
  
      _initializeArrowScrollbox() {
@@ -144,7 +144,24 @@ index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c99262417
            // Ignore underflow events:
            // - from nested scrollable elements
            // - for vertical orientation
-@@ -1492,19 +1530,30 @@
+@@ -1471,11 +1509,11 @@
+         for (let i = numPinned - 1; i >= 0; i--) {
+           let tab = tabs[i];
+           width += layoutData.pinnedTabWidth;
+-          tab.style.setProperty(
+-            "margin-inline-start",
+-            -(width + layoutData.scrollStartOffset) + "px",
+-            "important"
+-          );
++          //tab.style.setProperty(
++          //  "margin-inline-start",
++          //  -(width + layoutData.scrollStartOffset) + "px",
++          //  "important"
++          //);
+           tab._pinnedUnscrollable = true;
+         }
+         this.style.setProperty(
+@@ -1510,19 +1548,30 @@
          }
        }
  
@@ -184,7 +201,7 @@ index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c99262417
  
        let pinned = draggedTab.pinned;
        let numPinned = gBrowser._numPinnedTabs;
-@@ -1513,36 +1562,39 @@
+@@ -1531,36 +1580,39 @@
          pinned ? numPinned : undefined
        );
  
@@ -235,7 +252,7 @@ index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c99262417
        }
  
        draggedTab._dragData.translateX = translateX;
-@@ -1575,11 +1627,11 @@
+@@ -1593,11 +1645,11 @@
          if (tabs[mid] == draggedTab && ++mid > high) {
            break;
          }
@@ -249,7 +266,7 @@ index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c99262417
            tabCenter
          ) {
            low = mid + 1;
-@@ -1602,16 +1654,16 @@
+@@ -1620,16 +1672,16 @@
        for (let tab of tabs) {
          if (tab != draggedTab) {
            let shift = getTabShift(tab, newIndex);
@@ -269,7 +286,7 @@ index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..ab16fe96e1e8036df7e8321c99262417
          }
          return 0;
        }
-@@ -1683,9 +1735,9 @@
+@@ -1701,9 +1753,9 @@
  
        // Slide the relevant tabs to their new position.
        for (let t of this._getVisibleTabs()) {

src/browser/components/zen-welcome/welcome.css

@@ -36,10 +36,9 @@ button {
 }
 
 .page-split:not([hidden="true"]) {
-  display: flex;
-  margin: 12%;
   flex-direction: row;
-  justify-content: space-between;
+  margin: auto;
+  justify-content: space-around;
 }
 
 #enableFeatures .card {
@@ -62,7 +61,6 @@ button {
   align-items: stretch;
   gap: 8px;
   margin-bottom: 8px;
-  justify-content: center;
 }
 
 .cardGroup .card {
@@ -92,6 +90,12 @@ h1 {
   line-height: 1;
 }
 
+.page > div:nth-child(2) h1 {
+  margin-bottom: 15px;
+  margin-top: 10px;
+  font-size: 18px;
+}
+
 p {
   font-size: 16px;
   opacity: 0.8;

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -19,4 +19,17 @@ zen-side-panels-enabled =
 zen-look-and-feel-compact-view-header = Show in compact view
 zen-look-and-feel-compact-view-description = Only show the toolbars you use!
 zen-look-and-feel-compact-view-enabled = 
-    .label = Enable { -brand-short-name }'s compact mode
+    .label = Enable { -brand-short-name }'s compact mode
+
+
+
+pane-zen-workspaces-title = Workspaces
+category-zen-workspaces =
+    .tooltiptext = { pane-workspaces-title }
+pane-settings-workspaces-title = Workspaces
+
+pane-zen-workspaces-header = Workspaces
+zen-settings-workspaces-header = General settings for workspaces
+zen-settings-workspaces-description = With workspaces, you can have multiple browsing sessions at once!
+zen-settings-workspaces-enabled = 
+    .label = Enable Workspaces (Experimental)

src/browser/locales/en-US/browser/zen-welcome.ftl

@@ -16,8 +16,8 @@ welcome-dialog-theme = 🎨 Choose a theme
 welcome-dialog-theme-subtext = Personalize your experience with your favorite look!
 welcome-dialog-theme-action = Continue
 
-welcome-dialog-theme-header-1 = 1. Choose A theme
-welcome-dialog-theme-header-2 = 2. Find Your Perfect Color
+welcome-dialog-theme-header-1 = 1. Choose a theme
+welcome-dialog-theme-header-2 = 2. Find your perfect color
 
 welcome-dialog-search = 🔍 Choose a search engine
 welcome-dialog-search-subtext = Select your preferred search engine to tailor your browsing experience!

src/browser/locales/en-US/browser/zen-workspaces.ftl

@@ -0,0 +1,17 @@
+
+zen-panel-ui-current-window-text = Current Window
+
+zen-panel-ui-workspaces-text = Other Workspaces
+
+zen-panel-ui-workspaces-create-text = Create Workspace
+
+zen-panel-ui-workspaces-create-save =
+  .label = Create Workspace
+  .accesskey = S
+zen-panel-ui-workspaces-create-cancel =
+  .label = Cancel
+  .accesskey = C
+
+zen-workspaces-panel-context-delete = 
+    .label = Delete Workspace
+    .accesskey = D

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

@@ -185,3 +185,9 @@ groupbox h2 {
   position: absolute;
   background: var(--zen-colors-tertiary);
 }
+
+/* Workspace */
+
+#category-zen-workspaces > .category-icon {
+  list-style-image: url("chrome://browser/skin/window.svg");
+}

src/browser/themes/shared/tabbrowser/tabs-css.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index eb92f71e5942a19618fd74492354de78ac03bacf..28d23667991c9feff7a379acaa5f7c7928fb14cf 100644
+index 9a915ff442cc7f01ddec3fcea931c21e210cac92..19126b25ac7a63fe193628dd11a93507bd4bc63a 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
-@@ -67,7 +67,7 @@
+@@ -39,7 +39,7 @@
  
  #tabbrowser-tabs {
    --tab-min-width: 76px;
@@ -11,7 +11,43 @@ index eb92f71e5942a19618fd74492354de78ac03bacf..28d23667991c9feff7a379acaa5f7c79
    --tab-overflow-pinned-tabs-width: 0px;
    padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
    /* Use a bigger flex value than the searchbar to prevent it from
-@@ -618,6 +618,7 @@
+@@ -103,7 +103,7 @@
+    * (we only have 2px padding in the inline direction) */
+   overflow-clip-margin: 2px;
+ 
+-  &:not([pinned]) {
++  & {
+     flex: 100 100;
+     max-width: 225px;
+     min-width: var(--tab-min-width);
+@@ -126,7 +126,7 @@
+     flex-shrink: 0;
+ 
+     #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > & {
+-      position: absolute !important;
++      /*position: absolute !important;*/
+       display: block;
+     }
+   }
+@@ -360,7 +360,7 @@
+   &[selected]:not([src], [pinned], [crashed], [pictureinpicture]),
+   &:not([src], [pinned], [crashed], [sharing], [pictureinpicture]),
+   &[busy] {
+-    display: none;
++    /*display: none;*/
+   }
+ }
+ 
+@@ -627,7 +627,7 @@
+ 
+ #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
+   /* Add a gap between the last pinned tab and the first visible tab */
+-  margin-inline-start: 12px !important; /* .tabbrowser-tab sets margin: 0 !important; */
++  margin-inline-start: auto !important; /* .tabbrowser-tab sets margin: 0 !important; */
+ }
+ 
+ .tab-label[attention]:not([selected]) {
+@@ -737,6 +737,7 @@
  .titlebar-spacer[type="pre-tabs"],
  .titlebar-spacer[type="post-tabs"] {
    width: 40px;
@@ -19,7 +55,7 @@ index eb92f71e5942a19618fd74492354de78ac03bacf..28d23667991c9feff7a379acaa5f7c79
  }
  
  @media (max-width: 500px) {
-@@ -633,7 +634,7 @@
+@@ -752,7 +753,7 @@
    toolbarbutton:not(#firefox-view-button),
    toolbarpaletteitem:not(#wrapper-firefox-view-button)
  ) + #tabbrowser-tabs {

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

@@ -330,15 +330,37 @@ toolbarbutton#scrollbutton-up {
   display: none;
 }
 
-.tabbrowser-tab[pinned]:last-of-type {
- /** Todo: add a separator */
-}
-
 .tabbrowser-tab:is([multiselected="true"], [selected]) {
   /*border-color: light-dark(var(--zen-colors-border), rgba(255, 255, 255, 0.15));*/
   background: var(--toolbarbutton-hover-background);
 }
 
+.tabbrowser-tab {
+  margin-inline-start: 0 !important;
+  margin: 0 auto !important;
+}
+
+.tabbrowser-tab[pinned] {
+  position: relative !important;
+}
+
+.tabbrowser-tab:nth-last-child(1 of [pinned]) {
+  margin-bottom: 5px !important;
+  position: relative;
+  overflow: visible;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 1.5px;
+    border-radius: 1px;
+    background: var(--zen-colors-border);
+  }
+}
+
 .tab-close-button {
   position: absolute;
   display: none;
@@ -469,53 +491,76 @@ panelmultiview {
 
 @media (-moz-bool-pref: "zen.view.compact") {
   #navigator-toolbox,
-  #zen-appcontent-navbar-container {
-    position: absolute;
+  #zen-appcontent-navbar-container #nav-bar {
     z-index: 1;
-    overflow: hidden;
     opacity: 0;
+    transition: .2s;
   }
 
   #navigator-toolbox {
-    width: 1px;
+    max-width: 1px;
     min-width: 0;
-    height: 100%;
   }
 
-  #zen-appcontent-navbar-container {
+  #zen-appcontent-navbar-container #nav-bar {
     min-height: 0;
-    height: 1px;
-    width: 100%;
-  }
-
-  #navigator-toolbox:hover,
-  #navigator-toolbox:has([open="true"]) {
-    width: unset;
-    overflow: visible;
-    opacity: 1;
-  }
-
-  #zen-appcontent-navbar-container:hover,
-  #zen-appcontent-navbar-container:has([open="true"]) {
-    height: unset;
-    background: var(--zen-themed-toolbar-bg) !important;
-    overflow: visible;
-    border-bottom: var(--zen-appcontent-border) !important;
-    opacity: 1;
-  }
-  
-  #navigator-toolbox:hover #titlebar,
-  #navigator-toolbox:has([open="true"]:not(tab)) #titlebar {
-    background: var(--zen-themed-toolbar-bg) !important;
-    border-right: var(--zen-appcontent-border) !important;
-    padding: 0 5px;
+    max-height: 1px;
   }
 
   #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
     margin: 10px !important;
     margin-right: 0 !important;
+    margin-top: 0 !important;
     width: -moz-available;
   }
+
+  :root:has(
+    :is(
+      #navigator-toolbox:hover,
+      #navigator-toolbox *[open="true"]:not(tab),
+      #zen-appcontent-navbar-container:hover,
+      #zen-appcontent-navbar-container *[open="true"]:not(tab)
+    )
+  ) {
+    & #zen-appcontent-navbar-container #nav-bar,
+    & #navigator-toolbox { 
+      max-width: unset;
+      max-height: unset;
+      overflow: visible;
+      opacity: 1;
+      background: transparent !important;
+    }
+
+    & #navigator-toolbox {
+      border-right: var(--zen-appcontent-border) !important;
+      width: unset;
+      padding: 5px;
+    }
+
+    & #zen-appcontent-navbar-container #nav-bar {
+      border-bottom: var(--zen-appcontent-border) !important;
+    }
+
+    & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
+      margin-top: 10px !important;
+    }
+  }
+}
+
+:root:is([chromehidden~="location"],[chromehidden~="toolbar"]) {
+  --zen-browser-border-radius: 0 !important;
+
+  & #navigator-toolbox {
+    display: none;
+  }
+
+  & #tabbrowser-tabpanels {
+    margin: 0 !important;
+
+    & .browserSidebarContainer {
+      margin: 0 !important;
+    }
+  }
 }
 
 /* Screenshots */
@@ -549,7 +594,7 @@ panelmultiview {
 }
 
 #zen-watermark[hidden="true"] {
-  transition: 1s;
+  transition: 0.6s;
   transition-delay: 1.5s;
   opacity: 0;
   pointer-events: none;

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

@@ -81,7 +81,8 @@
 }
 
 #PanelUI-menu-button,
-#appMenu-more-button2 {
+#appMenu-more-button2,
+#zen-workspace-actions-menu-icon {
 	list-style-image: url("menu.svg") !important;
 }
 
@@ -153,7 +154,8 @@
 #TabsToolbar #new-tab-button,
 #appMenu-zoomEnlarge-button2,
 #PanelUI-zen-profiles-newProfile,
-#zen-sidebar-add-panel-button {
+#zen-sidebar-add-panel-button,
+#PanelUI-zen-workspaces-new image {
 	list-style-image: url("plus.svg") !important;
 }
 
@@ -667,7 +669,8 @@ menuitem[id="placesContext_deleteFolder"],
 menuitem[id="placesContext_delete"],
 menuitem[id="placesContext_delete_history"],
 menuitem[id="placesContext_deleteHost"],
-#context_zenDeleteWebPanel {
+#context_zenDeleteWebPanel,
+#context_zenDeleteWorkspace {
 	--menu-image: url("edit-delete.svg");
 }
 

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

@@ -234,3 +234,120 @@
 #zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) {
   grid-area: c;
 }
+
+/* Workspaces */
+
+#zen-workspaces-button {
+  border: 1px solid var(--zen-colors-border);
+  border-radius: 50px;
+  height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
+  margin-bottom: 5px !important;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  font-weight: 600;
+}
+
+#PanelUI-zen-workspaces {
+  --panel-width: 320px;
+  width: var(--panel-width);
+  min-height: 200px;
+}
+
+#PanelUI-zen-workspaces > panelmultiview {
+  align-items: flex-start;
+}
+
+#PanelUI-zen-workspaces panelmultiview panelview {
+  position: relative;
+  width: 100%;
+  overflow: hidden !important;
+}
+
+#PanelUI-zen-workspaces-create-input {
+  margin-top: 10px;
+}
+
+#PanelUI-zen-workspaces-list {
+  display: flex;
+  flex-direction: column;
+}
+
+#PanelUI-zen-workspaces .panel-viewcontainer,
+#PanelUI-zen-workspaces .panel-viewstack {
+  width: 100%;
+}
+
+#PanelUI-zen-workspaces-current-info toolbarbutton:last-child {
+  margin-bottom: 0 !important;
+}
+
+#PanelUI-zen-workspaces-list toolbarbutton,
+#PanelUI-zen-workspaces-current-info toolbarbutton  {
+  padding: 5px;
+  border-radius: 7px;
+
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+
+  display: flex;
+  align-items: center;
+
+  &:first-child {
+    margin-top: 10px;
+  }
+
+  & .zen-workspace-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 7px;
+    margin-right: 10px;
+    border: 1px solid var(--zen-colors-border);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+  }
+
+  & .zen-workspace-name {
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  & .zen-workspace-actions {
+    margin: 0;
+    margin-left: auto !important;
+  }
+}
+
+#PanelUI-zen-workspaces-current-info toolbarbutton:first-child {
+  margin-bottom: 10px;
+  margin-top: 5px;
+}
+
+#PanelUI-zen-workspaces-view vbox:nth-child(2) {
+  margin-top: 10px;
+}
+
+#PanelUI-zen-workspaces-new {
+  margin-left: auto;
+  min-height: 1px !important;
+  padding: 3px;
+  border-radius: 4px;
+  width: 20px;
+  height: 20px;
+}
+
+#PanelUI-zen-workspaces-create-footer {
+  padding-bottom: 0 !important;
+  margin-top: 20px;
+  margin-left: 0;
+  margin-bottom: 0 !important;
+  width: 100%;
+}
+
+#PanelUI-zen-workspaces-create-footer button[default="true"] {
+  width: 100%;
+}

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

@@ -163,7 +163,6 @@
   display: flex;
   flex-direction: column;
   padding: 0 3px;
-  height: 100%;
   position: relative;
   background: transparent !important;
   align-items: center;

surfer.json

@@ -27,7 +27,7 @@
       "brandShortName": "Zen Browser",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.0.0-a.1",
+        "displayVersion": "1.0.0-a.3",
         "github": {
           "repo": "zen-browser/desktop"
         },