chore: Update CSS styles for Zen Browser sidebar and tabpanels

src/browser/base/content/ZenViewSplitter.mjs

@@ -8,7 +8,7 @@ var gZenViewSplitter = {
    *      tab2,
    *      tab3,
    *     ],
-   *    gridType: "vsplit" | "hsplit" | "grid",
+   *    gridType: "vsep" | "hsep" | "grid",
    *   }
    * ]
    */
@@ -45,10 +45,14 @@ var gZenViewSplitter = {
     dataTab.splice(dataTab.indexOf(tab), 1);
     tab._zenSplitted = false;
     tab.linkedBrowser.zenModeActive = false;
-    tab.linkedBrowser.docShellIsActive = false;
     let container = tab.linkedBrowser.closest(".browserSidebarContainer");
     container.removeAttribute("zen-split");
-    container.style.display = "none";         
+    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) {
@@ -61,7 +65,8 @@ var gZenViewSplitter = {
         for (const tab of dataTab) {
           let container = tab.linkedBrowser.closest(".browserSidebarContainer");
           container.removeAttribute("zen-split");
-          container.style.gridArea = "1 / 1";                 
+          container.style.gridArea = "1 / 1";
+          tab._zenSplitted = false;               
         }     
       }
       return;
@@ -72,6 +77,7 @@ var gZenViewSplitter = {
 
   onLocationChange(browser) {
     let tab = gBrowser.getTabForBrowser(browser);
+    this.updateSplitViewButton(!(tab && tab._zenSplitted));
     if (!tab) {
       return;
     }
@@ -85,6 +91,7 @@ var gZenViewSplitter = {
     }
     this._data.push({
       tabs,
+      gridType: "grid",
     });
     gBrowser.selectedTab = tabs[0];
     this._showSplitView(tabs[0]);
@@ -110,6 +117,7 @@ var gZenViewSplitter = {
       })
     };    
     if (!splitData || (this.currentView >= 0 && !this._data[this.currentView].tabs.includes(tab))) {
+      this.updateSplitViewButton(true);
       if (this.currentView < 0) {
         return;
       }
@@ -176,8 +184,13 @@ var gZenViewSplitter = {
       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() {
@@ -197,6 +210,62 @@ var gZenViewSplitter = {
     }
     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");
+  },
+
+  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 tabs = this._data[this.currentView].tabs;
+          for (const tab of tabs) {
+            this.onTabClose({ target: tab, forUnsplit: true });
+          }
+          gBrowser.selectedTab = tabs[0];
+          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);
+  },
 };
 
 gZenViewSplitter.init();

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

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
-index c9ebddb7f5c57d00c06bdf303a23085818c78259..f97c3e808d1c42cbce1a538ab7aeefa91ad27893 100644
+index 6e776a9ce7c525e510b6466065daf755b21567a4..8668b27ec2126ed772a11aa77809b6f22ceab7e2 100644
 --- a/browser/base/content/browser.css
 +++ b/browser/base/content/browser.css
 @@ -2,6 +2,8 @@
@@ -20,7 +20,13 @@ index c9ebddb7f5c57d00c06bdf303a23085818c78259..f97c3e808d1c42cbce1a538ab7aeefa9
  }
  
  :root[uidensity=touch] .tabbrowser-tab:not([pinned]) {
-@@ -659,7 +659,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
+@@ -647,12 +647,12 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
+   margin-inline-start: 0;
+ }
+ 
+-#urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action,
++#urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action:not(#zen-split-views-box),
+ #identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box),
  #urlbar[usertyping] > #urlbar-input-container > #page-action-buttons > #urlbar-zoom-button,
  #urlbar:not([usertyping]) > #urlbar-input-container > #urlbar-go-button,
  #urlbar:not([focused]) > #urlbar-input-container > #urlbar-go-button {
@@ -29,7 +35,7 @@ index c9ebddb7f5c57d00c06bdf303a23085818c78259..f97c3e808d1c42cbce1a538ab7aeefa9
  }
  
  #nav-bar:not([keyNav=true]) #identity-box,
-@@ -1244,13 +1244,13 @@ printpreview-pagination:focus-within,
+@@ -1237,13 +1237,13 @@ printpreview-pagination:focus-within,
  
  
  #sidebar-box {
@@ -46,7 +52,7 @@ index c9ebddb7f5c57d00c06bdf303a23085818c78259..f97c3e808d1c42cbce1a538ab7aeefa9
    list-style-image: var(--webextension-menuitem-image, inherit);
    -moz-context-properties: fill;
    fill: currentColor;
-@@ -1451,3 +1451,42 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
+@@ -1444,3 +1444,42 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
  /**
   * End Dialogs
   */

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..eb31df1dc273e1e71a1317e765efe49099a3dd4a 100644
+index 0a67afa81ff5e10dcbfb53149f7ed9109de084ac..bdcce262b5fc18767efd1054fd724b97c42471e4 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -32,10 +32,11 @@
@@ -44,7 +44,22 @@ index 0a67afa81ff5e10dcbfb53149f7ed9109de084ac..eb31df1dc273e1e71a1317e765efe490
      </toolbar>
  
    </vbox>
-@@ -450,6 +453,7 @@
+@@ -409,6 +412,14 @@
+                 <image id="star-button"
+                        class="urlbar-icon"/>
+               </hbox>
++              <hbox id="zen-split-views-box"
++                  hidden="true"
++                  role="button"
++                  class="urlbar-page-action"
++                  onclick="gZenViewSplitter.openSplitViewPanel(event);">
++                <image id="zen-split-views-button"
++                      class="urlbar-icon"/>
++              </hbox>
+             </hbox>
+           </hbox>
+         </hbox>
+@@ -450,6 +461,7 @@
  
        <toolbarbutton id="fxa-toolbar-menu-button" class="toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
                       badged="true"
@@ -52,7 +67,7 @@ index 0a67afa81ff5e10dcbfb53149f7ed9109de084ac..eb31df1dc273e1e71a1317e765efe490
                       delegatesanchor="true"
                       onmousedown="gSync.toggleAccountPanel(this, event)"
                       onkeypress="gSync.toggleAccountPanel(this, event)"
-@@ -501,6 +505,8 @@
+@@ -501,6 +513,8 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

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

@@ -7,4 +7,52 @@
   <menuitem id="context_zenOpenNewTabWebPanel" oncommand="gZenBrowserManagerSidebar.contextOpenNewTab();" data-l10n-id="zen-web-side-panel-open-in-new-tab"/>
   <menuseparator/>
   <menuitem id="context_zenDeleteWebPanel" oncommand="gZenBrowserManagerSidebar.contextDelete();" data-l10n-id="zen-web-side-panel-context-delete"/>
-</menupopup>
+</menupopup>
+
+<html:template id="template-zen-split-view-modifier">
+<panel id="zenSplitViewModifier"
+  class="panel-no-padding"
+  orient="vertical"
+  role="alertdialog"
+  type="arrow"
+  aria-labelledby="zen-split-view-modifier-header"
+  tabspecific="true">
+  <panelmultiview id="zenSplitViewModifierMultiview"
+    mainViewId="zenSplitViewModifierViewDefault">
+    <panelview id="zenSplitViewModifierViewDefault"
+      class="PanelUI-subView"
+      role="document"
+      mainview-with-header="true"
+      has-custom-header="true">
+      <vbox>
+        <box class="zen-split-view-modifier-preview grid">
+          <box></box>
+          <box></box>
+          <box></box>
+        </box>
+        <p>Grid Layout</p>
+      </vbox>
+      <vbox>
+        <box class="zen-split-view-modifier-preview hsep">
+          <box></box>
+          <box></box>
+        </box>
+        <p>Horizontal</p>
+      </vbox>
+      <vbox>
+        <box class="zen-split-view-modifier-preview vsep">
+          <box></box>
+          <box></box>
+        </box>
+        <p>Vertical</p>
+      </vbox>
+      <vbox>
+        <box class="zen-split-view-modifier-preview unsplit">
+          <box></box>
+        </box>
+        <p>Unsplit</p>
+      </vbox>
+    </panelview>
+  </panelmultiview>
+</panel>
+</html:template>