From 99c84473b168cc9792b13580fb4126fc0bd3d4ad Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Wed, 3 Jul 2024 11:20:08 +0200
Subject: [PATCH] chore: Update browser styles for split views

---
 src/browser/base/content/ZenViewSplitter.mjs  | 22 ++++++++++++++-----
 src/browser/base/content/browser-xhtml.patch  |  7 +++---
 .../base/content/zen-sidebar-box.inc.xhtml    | 15 -------------
 .../base/content/zen-sidebar-icons.inc.xhtml  |  2 +-
 .../themes/shared/zen-browser-shared.css      |  8 -------
 src/toolkit/content/zen-xul.css               |  2 +-
 6 files changed, 21 insertions(+), 35 deletions(-)
 delete mode 100644 src/browser/base/content/zen-sidebar-box.inc.xhtml

diff --git a/src/browser/base/content/ZenViewSplitter.mjs b/src/browser/base/content/ZenViewSplitter.mjs
index edcd2ba44..aac366274 100644
--- a/src/browser/base/content/ZenViewSplitter.mjs
+++ b/src/browser/base/content/ZenViewSplitter.mjs
@@ -46,19 +46,22 @@ var gZenViewSplitter = {
     tab._zenSplitted = false;
     tab.linkedBrowser.zenModeActive = false;
     tab.linkedBrowser.docShellIsActive = false;
-    if (dataTab.length < 2    ) {
+    let container = tab.linkedBrowser.closest(".browserSidebarContainer");
+    container.removeAttribute("zen-split");
+    container.style.display = "none";         
+    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.display = "flex";
-        this.tabBrowserPanel.style.gridGap = "0px";          
+        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";                 
         }     
       }
       return;
@@ -157,15 +160,22 @@ var gZenViewSplitter = {
           numberOfRows++;
         }
         container.style.gridArea = `tab${i + 1}`;
-      }
+      }  
       i++;
     }
     if (gridType == "grid") {
-      if (numberOfRows < splitData.tabs.length / 2) {
+      if ((numberOfRows < splitData.tabs.length / 2) && (splitData.tabs.length != 2)) { 
         // Make the last tab occupy the last row
         currentRowGridArea[1] += ` tab${i}`;
       }
-      this.tabBrowserPanel.style.gridTemplateAreas = `'${currentRowGridArea[0]}' '${currentRowGridArea[1]}'`;
+      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]}'`;
+      }
     }
     modifyDecks(splitData.tabs, true);
   },
diff --git a/src/browser/base/content/browser-xhtml.patch b/src/browser/base/content/browser-xhtml.patch
index 9a91fa7b7..2ad8c2f8b 100644
--- a/src/browser/base/content/browser-xhtml.patch
+++ b/src/browser/base/content/browser-xhtml.patch
@@ -1,8 +1,8 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index 1dcdd02cd1bfe24c9f32304511f3dd675fc9265c..b23c3cf40e9894d6fe3f5c2899a8d2d163b0b091 100644
+index aec0983a6704f09300da9a3a9ab76e627695b708..4228c96f59d6054c19c95686cafa979594e7da1f 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
-@@ -144,6 +144,8 @@
+@@ -140,6 +140,8 @@
    window.addEventListener("DOMContentLoaded",
      gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true });
  </script>
@@ -11,7 +11,7 @@ index 1dcdd02cd1bfe24c9f32304511f3dd675fc9265c..b23c3cf40e9894d6fe3f5c2899a8d2d1
  </head>
  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  # All sets except for popupsets (commands, keys, and stringbundles)
-@@ -165,9 +167,13 @@
+@@ -161,9 +163,12 @@
      </vbox>
    </html:template>
  
@@ -21,7 +21,6 @@ index 1dcdd02cd1bfe24c9f32304511f3dd675fc9265c..b23c3cf40e9894d6fe3f5c2899a8d2d1
 +  <hbox id="zen-main-app-wrapper" flex="1">
 +    #include navigator-toolbox.inc.xhtml
 +    <html:span id="zen-sidebar-box-container">
-+      #include zen-sidebar-box.inc.xhtml
 +    </html:span>
 +    #include browser-box.inc.xhtml    
 +  </hbox>
diff --git a/src/browser/base/content/zen-sidebar-box.inc.xhtml b/src/browser/base/content/zen-sidebar-box.inc.xhtml
deleted file mode 100644
index 550635bdc..000000000
--- a/src/browser/base/content/zen-sidebar-box.inc.xhtml
+++ /dev/null
@@ -1,15 +0,0 @@
-<html:sidebar-launcher id="sidebar-launcher" flex="1" hidden="true"></html:sidebar-launcher>
-<vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
-  <box id="sidebar-header" align="center">
-    <toolbarbutton id="sidebar-switcher-target" class="tabbable" aria-expanded="false">
-      <image id="sidebar-icon" consumeanchor="sidebar-switcher-target"/>
-      <label id="sidebar-title" crop="end" control="sidebar"/>
-      <image id="sidebar-switcher-arrow"/>
-    </toolbarbutton>
-    <image id="sidebar-throbber"/>
-    <spacer id="sidebar-spacer"/>
-    <toolbarbutton id="sidebar-close" class="close-icon tabbable" data-l10n-id="sidebar-close-button" oncommand="SidebarUI.hide();"/>
-  </box>
-  <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
-</vbox>
-<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
\ No newline at end of file
diff --git a/src/browser/base/content/zen-sidebar-icons.inc.xhtml b/src/browser/base/content/zen-sidebar-icons.inc.xhtml
index 1273e317d..d9e0916b4 100644
--- a/src/browser/base/content/zen-sidebar-icons.inc.xhtml
+++ b/src/browser/base/content/zen-sidebar-icons.inc.xhtml
@@ -4,7 +4,7 @@
     <html:div></html:div>
   </toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="SidebarUI.show('viewBookmarksSidebar');"></toolbarbutton>
+  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="SidebarController.show('viewBookmarksSidebar');"></toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-history-button" data-l10n-id="sidebar-menu-history" oncommand="PanelUI.showSubView('PanelUI-history', this);"></toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-preferences-button" data-l10n-id="toolbar-settings-button" onclick="event.target.ownerGlobal.openPreferences(undefined);"></toolbarbutton>
 </toolbar>
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css
index 11ac03b09..0bd22fc5f 100644
--- a/src/browser/themes/shared/zen-browser-shared.css
+++ b/src/browser/themes/shared/zen-browser-shared.css
@@ -204,14 +204,6 @@ button.popup-notification-dropmarker {
   min-width: 55px;
 }
 
-#zen-sidebar-box-container {
-  display: flex;
-}
-
-#zen-sidebar-box-container[hidden="true"] {
-  display: none;
-}
-
 #navigator-toolbox toolbar#TabsToolbar {
   margin: var(--zen-appcontent-separator-from-window);
   background: var(--sidebar-background-color);
diff --git a/src/toolkit/content/zen-xul.css b/src/toolkit/content/zen-xul.css
index d81a6328a..5db8dc1eb 100644
--- a/src/toolkit/content/zen-xul.css
+++ b/src/toolkit/content/zen-xul.css
@@ -7,7 +7,7 @@
   --zen-appcontent-separator-from-window: var(--zen-appcontent-separator-from-window-single);
   --zen-appcontent-border-radius: var(--zen-panel-radius);
   --zen-appcontent-border: 2px solid var(--zen-colors-border);
-  --zen-browser-border-radius: 10px;
+  --zen-browser-border-radius: var(--zen-panel-radius);
 }
 
 toolbox#navigator-toolbox,