From ee063a1d9ef076006ac14db56b9e9194355e17eb Mon Sep 17 00:00:00 2001
From: "Mr. M" <mr.m@tuta.com>
Date: Sat, 12 Apr 2025 17:22:00 +0200
Subject: [PATCH 1/2] Refactor Zen components: remove zen-rices, add
 zen-library, and update related styles and scripts

---
 l10n                                          |   2 +-
 src/browser/base/content/browser-xhtml.patch  |  16 +-
 .../content/zen-app-wrapper-content.inc.xhtml |   2 +
 src/browser/base/content/zen-assets.inc.xhtml |   5 +-
 .../base/content/zen-assets.jar.inc.mn        |   3 +-
 .../base/content/zen-library.inc.xhtml        |   6 +
 .../content/zen-styles/zen-animations.css     |  76 ------
 .../base/content/zen-styles/zen-rices.css     | 226 ------------------
 .../base/zen-components/ZenLibrary.mjs        |  35 +++
 .../base/zen-components/ZenWorkspaces.mjs     |   2 +-
 src/browser/themes/shared/zen-icons/icons.css |   4 -
 11 files changed, 54 insertions(+), 323 deletions(-)
 create mode 100644 src/browser/base/content/zen-app-wrapper-content.inc.xhtml
 create mode 100644 src/browser/base/content/zen-library.inc.xhtml
 delete mode 100644 src/browser/base/content/zen-styles/zen-rices.css
 create mode 100644 src/browser/base/zen-components/ZenLibrary.mjs

diff --git a/l10n b/l10n
index 950562cd71..2f26cef6c3 160000
--- a/l10n
+++ b/l10n
@@ -1 +1 @@
-Subproject commit 950562cd71c8a6cbc196234620055dfecbe082d0
+Subproject commit 2f26cef6c3c6e7a822472cf6e1cdb66dc3f20d04
diff --git a/src/browser/base/content/browser-xhtml.patch b/src/browser/base/content/browser-xhtml.patch
index 527fb79dc7..6dc4d4d5cf 100644
--- a/src/browser/base/content/browser-xhtml.patch
+++ b/src/browser/base/content/browser-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index 0d0a559a6473149b50f4bf18d059e86907c4acd3..25ad798eb26f04262d069fdaf1f3fb00adec9807 100644
+index 0d0a559a6473149b50f4bf18d059e86907c4acd3..7f271dacadaabc569cedd437ee4b3dc52900100b 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
 @@ -26,6 +26,7 @@
@@ -27,18 +27,16 @@ index 0d0a559a6473149b50f4bf18d059e86907c4acd3..25ad798eb26f04262d069fdaf1f3fb00
  </head>
  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  # All sets except for popupsets (commands, keys, and stringbundles)
-@@ -169,9 +173,11 @@
+@@ -169,9 +173,12 @@
      </vbox>
    </html:template>
  
--#include navigator-toolbox.inc.xhtml
--
--#include browser-box.inc.xhtml
 +  <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
-+    <vbox id="zen-toast-container"></vbox>
-+    #include navigator-toolbox.inc.xhtml
-+    #include browser-box.inc.xhtml
-+  </hbox>
++#include zen-app-wrapper-content.inc.xhtml
+ #include navigator-toolbox.inc.xhtml
+ 
+ #include browser-box.inc.xhtml
++  </hbox> <!-- zen-main-app-wrapper -->
  
    <html:template id="customizationPanel">
      <box id="customization-container" flex="1" hidden="true"><![CDATA[
diff --git a/src/browser/base/content/zen-app-wrapper-content.inc.xhtml b/src/browser/base/content/zen-app-wrapper-content.inc.xhtml
new file mode 100644
index 0000000000..52141d8895
--- /dev/null
+++ b/src/browser/base/content/zen-app-wrapper-content.inc.xhtml
@@ -0,0 +1,2 @@
+<vbox id="zen-toast-container"></vbox>
+#include zen-library.inc.xhtml
\ No newline at end of file
diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml
index 3df177b911..8823e94741 100644
--- a/src/browser/base/content/zen-assets.inc.xhtml
+++ b/src/browser/base/content/zen-assets.inc.xhtml
@@ -10,7 +10,6 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-tabs.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-ui.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-gradient-generator.css" />
-<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-rices.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-panel-ui.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-single-components.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-container.css" />
@@ -43,7 +42,5 @@ Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/Zen
 Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs", this);
 Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenGlanceManager.mjs", this);
 Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenMediaController.mjs", this);
-
-// Unimportant scripts
-Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenRices.mjs", this);
+Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenLibrary.mjs", this);
 </script>
diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
index f94d0c19cf..b00db3578b 100644
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -22,9 +22,9 @@
         content/browser/zen-components/ZenGlanceManager.mjs     (zen-components/ZenGlanceManager.mjs)
         content/browser/zen-components/ZenFolders.mjs           (zen-components/ZenFolders.mjs)
         content/browser/zen-components/ZenActorsManager.mjs     (zen-components/ZenActorsManager.mjs)
-        content/browser/zen-components/ZenRices.mjs             (zen-components/ZenRices.mjs)
         content/browser/zen-components/ZenEmojies.mjs           (zen-components/ZenEmojies.mjs)
         content/browser/zen-components/ZenWelcome.mjs           (zen-components/ZenWelcome.mjs)
+        content/browser/zen-components/ZenLibrary.mjs           (zen-components/ZenLibrary.mjs)
         content/browser/zen-components/ZenMediaController.mjs   (zen-components/ZenMediaController.mjs)
 
         content/browser/zen-styles/zen-theme.css                (content/zen-styles/zen-theme.css)
@@ -46,7 +46,6 @@
         content/browser/zen-styles/zen-urlbar.css               (content/zen-styles/zen-urlbar.css)
         content/browser/zen-styles/zen-popup.css                (content/zen-styles/zen-popup.css)
         content/browser/zen-styles/zen-gradient-generator.css   (content/zen-styles/zen-gradient-generator.css)
-        content/browser/zen-styles/zen-rices.css                (content/zen-styles/zen-rices.css)
         content/browser/zen-styles/zen-branding.css             (content/zen-styles/zen-branding.css)
         content/browser/zen-styles/zen-welcome.css              (content/zen-styles/zen-welcome.css)
         content/browser/zen-styles/zen-media-controls.css       (content/zen-styles/zen-media-controls.css)
diff --git a/src/browser/base/content/zen-library.inc.xhtml b/src/browser/base/content/zen-library.inc.xhtml
new file mode 100644
index 0000000000..6294e5def4
--- /dev/null
+++ b/src/browser/base/content/zen-library.inc.xhtml
@@ -0,0 +1,6 @@
+<hbox id="zen-library">
+  <vbox id="zen-library-sidebar">
+  </vbox>
+  <vbox id="zen-library-content">
+  </vbox>
+</hbox>
\ No newline at end of file
diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css
index d1b09714c1..7c6fb0cd87 100644
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -221,82 +221,6 @@
   }
 }
 
-@keyframes zen-rice-form-out {
-  0% {
-    transform: translateX(0);
-    max-height: 350px;
-    opacity: 1;
-    position: relative;
-  }
-
-  50% {
-    transform: translateX(-100%);
-    opacity: 0;
-    position: relative;
-  }
-
-  99% {
-    transform: translateX(-100%);
-    opacity: 0;
-    max-height: 15px;
-    position: relative;
-  }
-
-  100% {
-    transform: translateX(-100%);
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-  }
-}
-
-@keyframes zen-rice-form-in {
-  0% {
-    position: absolute;
-    transform: translateX(100%);
-    opacity: 0;
-  }
-
-  99% {
-    position: absolute;
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  100% {
-    position: relative;
-  }
-}
-
-@keyframes zen-rice-form-in-2 {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-    max-height: 50px;
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-    max-height: 450px;
-  }
-}
-
-@keyframes zen-rice-submit-animation {
-  /* Scale and shake the dialog */
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
 @keyframes zen-back-and-forth-text {
   0%,
   10% {
diff --git a/src/browser/base/content/zen-styles/zen-rices.css b/src/browser/base/content/zen-styles/zen-rices.css
deleted file mode 100644
index a9b89fa47e..0000000000
--- a/src/browser/base/content/zen-styles/zen-rices.css
+++ /dev/null
@@ -1,226 +0,0 @@
-#zen-rice-share-dialog-overlay:not([hidden]) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 3;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#zen-rice-share-dialog,
-#zen-rice-share-dialog-notice {
-  color: var(--panel-color);
-  background: var(--arrowpanel-background);
-  border-radius: var(--zen-native-inner-radius);
-  box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, 0.2);
-  border: var(--zen-appcontent-border);
-  overflow: hidden;
-
-  animation: zen-jello-animation-large 0.4s ease;
-  max-width: 400px;
-
-  &[animate='true'] {
-    animation: zen-rice-submit-animation 1s cubic-bezier(0.77, 0, 0.18, 1);
-  }
-
-  & .zen-rice-share-content {
-    padding: 10px 0;
-    border-top: var(--zen-appcontent-border);
-    background: var(--arrowpanel-background);
-    position: relative;
-    align-items: center;
-
-    min-height: 50px;
-
-    &:has(#zen-rice-share-first-form:not([fade-out])),
-    &:has(#zen-rice-share-success) {
-      padding-top: 20px;
-    }
-
-    & > vbox {
-      width: 100%;
-      padding: 0 10px;
-    }
-
-    & #zen-rice-share-first-form input[type='text'] {
-      width: 100%;
-      padding: 1px 2px;
-      border: 0;
-      border-bottom: 1px solid var(--zen-appcontent-border);
-      background: transparent;
-      font-style: italic;
-      font-weight: 600;
-    }
-
-    & #zen-rice-share-name {
-      font-style: normal !important;
-      font-size: 24px;
-      margin-left: 1px;
-    }
-
-    & .indent {
-      margin-left: 30px;
-    }
-  }
-
-  & .zen-rice-share-header {
-    height: 200px;
-    margin-bottom: -20px;
-  }
-
-  & #zen-rice-share-options {
-    padding: 10px 0;
-
-    max-height: 30px;
-    overflow: hidden;
-    transition:
-      max-height 0.3s ease,
-      height 0.3s ease;
-    &[zen-collapsed='false'] {
-      max-height: 350px;
-    }
-
-    & > .options-header {
-      font-weight: 600;
-      margin-bottom: 5px;
-      position: relative;
-      cursor: pointer;
-      align-items: center;
-
-      color: inherit;
-      -moz-context-properties: fill, fill-opacity;
-      fill: var(--toolbarbutton-icon-fill);
-
-      & label {
-        width: fit-content;
-        cursor: pointer;
-      }
-    }
-
-    & > .options-header image {
-      transition: transform 0.3s ease;
-      width: 15px;
-      height: 15px;
-    }
-
-    &[zen-collapsed='false'] > .options-header image {
-      transform: rotate(90deg);
-    }
-
-    & > checkbox {
-      margin-left: 15px;
-    }
-  }
-
-  & .panel-footer {
-    margin: 0;
-    margin-top: 10px;
-
-    & button {
-      justify-content: center;
-    }
-  }
-
-  #zen-rice-share-error {
-    border: 1px solid rgba(255, 0, 0, 0.5);
-    background: rgba(255, 0, 0, 0.1);
-    padding: 5px;
-    transition: opacity 0.3s ease;
-    border-radius: var(--zen-native-inner-radius);
-
-    @starting-style {
-      opacity: 0;
-    }
-
-    & button {
-      margin-left: auto;
-      margin-top: 2px;
-    }
-  }
-
-  /* Animations */
-  #zen-rice-share-first-form[fade-out] {
-    position: absolute;
-    transform: translateX(-100%);
-    pointer-events: none;
-    animation: zen-rice-form-out 0.5s ease;
-  }
-
-  #zen-rice-share-second-form {
-    animation: zen-rice-form-in 0.5s ease forwards;
-    justify-content: center;
-
-    & > hbox {
-      width: 100%;
-      height: 5px;
-      border-radius: 100px;
-      border: 1px solid var(--zen-colors-border);
-      position: relative;
-      overflow: hidden;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: var(--zen-primary-color);
-        transition: width 4s cubic-bezier(1, 0, 0, 1);
-
-        @starting-style {
-          width: 0;
-        }
-      }
-    }
-
-    &[fade-out] {
-      position: absolute !important;
-      animation: zen-rice-form-out 0.5s ease forwards;
-    }
-  }
-
-  #zen-rice-share-success {
-    overflow-y: hidden;
-    max-height: 0px;
-    animation: zen-rice-form-in-2 0.5s ease forwards;
-
-    & > h1 {
-      margin: 0;
-      font-size: 20px;
-    }
-
-    & > p {
-      color: var(--text-color-deemphasized);
-    }
-
-    & label {
-      margin: 0;
-      margin-top: 15px;
-      font-weight: 600;
-      margin-bottom: 5px;
-    }
-  }
-}
-
-#zen-rice-share-dialog-notice {
-  padding: 15px;
-
-  & br {
-    margin-bottom: 10px;
-  }
-
-  & > p {
-    color: var(--text-color-deemphasized);
-    margin-top: 10px;
-  }
-
-  .panel-footer {
-    margin-top: 10px;
-    align-items: center;
-  }
-}
diff --git a/src/browser/base/zen-components/ZenLibrary.mjs b/src/browser/base/zen-components/ZenLibrary.mjs
new file mode 100644
index 0000000000..29c6697b47
--- /dev/null
+++ b/src/browser/base/zen-components/ZenLibrary.mjs
@@ -0,0 +1,35 @@
+
+{
+  class ZenLibrary {
+    constructor() {
+      ChromeUtils.defineLazyGetter(this, 'wrapper', () => document.getElementById('zen-library'));
+    }
+
+    get isOpen() {
+      return this.wrapper.hasAttribute('open');
+    }
+
+    set isOpen(value) {
+      if (value) {
+        this.wrapper.setAttribute('open', 'true');
+      } else {
+        this.wrapper.removeAttribute('open');
+      }
+      this.animateLibrary();
+    }
+
+    open() {
+      this.isOpen = true;
+    }
+
+    close() {
+      this.isOpen = false;
+    }
+
+    animateLibrary() {
+      window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow).rollupAllPopups();
+    }
+  }
+
+  window.gZenLibrary = new ZenLibrary();
+}
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 06f2ed9401..3a29a88d63 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1926,7 +1926,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return window;
   }
 
-  async createAndSaveWorkspace(name = 'New Workspace', isDefault = false, icon = undefined, dontChange = false) {
+  async createAndSaveWorkspace(name = 'Space', isDefault = false, icon = undefined, dontChange = false) {
     if (!this.workspaceEnabled) {
       return;
     }
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index 13ca3d7dc0..c730f16813 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -110,10 +110,6 @@
   list-style-image: url('chevron.svg') !important;
 }
 
-#zen-rice-share-options .options-header {
-  list-style-image: url('arrow-right.svg');
-}
-
 #PanelUI-menu-button,
 #appMenu-more-button2,
 #zen-workspace-actions-menu-icon {

From 92d1c06d5d8f04153285bf660dcca61da54e38a7 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Sat, 12 Apr 2025 20:49:17 +0200
Subject: [PATCH 2/2] Refactor ZenLibrary: remove unnecessary whitespace, move
 toggle method, and enhance animateLibrary logic

---
 .../base/zen-components/ZenLibrary.mjs        | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/browser/base/zen-components/ZenLibrary.mjs b/src/browser/base/zen-components/ZenLibrary.mjs
index 29c6697b47..b3409c90c5 100644
--- a/src/browser/base/zen-components/ZenLibrary.mjs
+++ b/src/browser/base/zen-components/ZenLibrary.mjs
@@ -1,4 +1,3 @@
-
 {
   class ZenLibrary {
     constructor() {
@@ -26,8 +25,28 @@
       this.isOpen = false;
     }
 
-    animateLibrary() {
+    toggle() {
+      this.isOpen = !this.isOpen;
+    }
+
+    async animateLibrary() {
       window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow).rollupAllPopups();
+
+      let elementsToAnimate = [gNavToolbox];
+      if (gZenVerticalTabsManager._hasSetSingleToolbar) {
+        elementsToAnimate.push(gURLBar.textbox);
+      }
+      if (this.isOpen) {
+        await gZenUIManager.motion.animate(elementsToAnimate, {
+          transform: ['scale(1)', 'scale(0.8)'],
+          opacity: [1, 0],
+        });
+      } else {
+        await gZenUIManager.motion.animate(elementsToAnimate, {
+          transform: ['scale(0.8)', 'scale(1)'],
+          opacity: [0, 1],
+        });
+      }
     }
   }