From 53c3deda16b4167a790ce494a64ab558b1a1e595 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristijan=20Ribari=C4=87?= <kriba13@gmail.com>
Date: Thu, 28 Nov 2024 10:38:38 +0100
Subject: [PATCH] Updated styles for workspace selector.

---
 .../places/content/editBookmark-js.patch      | 34 ++++++-----
 .../content/editBookmarkPanel-inc-xhtml.patch | 35 ++++++-----
 .../shared/places/editBookmark-css.patch      | 59 +++++++------------
 3 files changed, 62 insertions(+), 66 deletions(-)

diff --git a/src/browser/components/places/content/editBookmark-js.patch b/src/browser/components/places/content/editBookmark-js.patch
index 4bb55c00a..9eb664b74 100644
--- a/src/browser/components/places/content/editBookmark-js.patch
+++ b/src/browser/components/places/content/editBookmark-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/places/content/editBookmark.js b/browser/components/places/content/editBookmark.js
-index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..cbafb150524af4947218fb6d3ebdadbb05711bc5 100644
+index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..e2c38872ee3a5c45d2e288e67d33f9ce24cab2b9 100644
 --- a/browser/components/places/content/editBookmark.js
 +++ b/browser/components/places/content/editBookmark.js
 @@ -370,6 +370,10 @@ var gEditItemOverlay = {
@@ -21,7 +21,7 @@ index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..cbafb150524af4947218fb6d3ebdadbb
        }
  
        if (this._paneInfo.bulkTagging) {
-@@ -1232,6 +1237,142 @@ var gEditItemOverlay = {
+@@ -1232,6 +1237,148 @@ var gEditItemOverlay = {
    get bookmarkState() {
      return this._bookmarkState;
    },
@@ -79,17 +79,26 @@ index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..cbafb150524af4947218fb6d3ebdadbb
 +    // Update summary text
 +    this._workspaceSummary.textContent = selectedNames.length
 +      ? selectedNames.join(", ")
-+      : "Choose Workspaces";
++      : "-";
 +  },
 +
-+  onWorkspaceDropdownToggle(event) {
++  onWorkspaceDropdownToggle() {
 +    if(document.documentElement.getAttribute("windowtype") === "Places:Organizer") {
 +      return;
 +    }
-+    const details = this._workspaceDropdown;
-+    const summary = this._workspaceSummary;
 +
-+    if (!details.open) {
++    // Toggle active class on the container
++    const dropdown = this._workspaceList;
++    const button = this._workspaceSummary;
++
++    dropdown.hidden = !dropdown.hidden;
++
++    var expander = this._element("workspacesSelectorExpander");
++    expander.classList.toggle("expander-up", !dropdown.hidden);
++    expander.classList.toggle("expander-down", dropdown.hidden);
++
++    // Only update summary text when closing the dropdown
++    if (dropdown.hidden) {
 +      const checkboxes = this._workspaceList.querySelectorAll("input[type='checkbox']");
 +      const selectedLabels = [];
 +
@@ -100,13 +109,10 @@ index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..cbafb150524af4947218fb6d3ebdadbb
 +        }
 +      });
 +
-+      // Update the summary text with comma-separated list of workspace names
-+      summary.textContent = selectedLabels.length
++      button.textContent = selectedLabels.length
 +        ? selectedLabels.join(", ")
-+        : "Choose Workspaces";
++        : "-";
 +    }
-+
-+    event.stopPropagation();
 +  },
 +
 +  async _initWorkspaceDropdown(aInfo) {
@@ -151,7 +157,7 @@ index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..cbafb150524af4947218fb6d3ebdadbb
 +    // Update summary text with comma-separated list
 +    this._workspaceSummary.textContent = selectedNames.length
 +      ? selectedNames.join(", ")
-+      : "Choose Workspaces";
++      : "-";
 +
 +    // Handle read-only state
 +    if (this.readOnly) {
@@ -164,7 +170,7 @@ index 9f17174fdd9cc1eaefb4330da1e10f40eeda2f31..cbafb150524af4947218fb6d3ebdadbb
  };
  
  ChromeUtils.defineLazyGetter(gEditItemOverlay, "_folderTree", () => {
-@@ -1267,6 +1408,9 @@ for (let elt of [
+@@ -1267,6 +1414,9 @@ for (let elt of [
    "locationField",
    "keywordField",
    "tagsField",
diff --git a/src/browser/components/places/content/editBookmarkPanel-inc-xhtml.patch b/src/browser/components/places/content/editBookmarkPanel-inc-xhtml.patch
index edcac1134..363e8d2de 100644
--- a/src/browser/components/places/content/editBookmarkPanel-inc-xhtml.patch
+++ b/src/browser/components/places/content/editBookmarkPanel-inc-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/places/content/editBookmarkPanel.inc.xhtml b/browser/components/places/content/editBookmarkPanel.inc.xhtml
-index 3ec3f094831c2143a818b43d1761a571f0ffa63d..f543639d4d8e8d59e32a0ef866abd85e816d2571 100644
+index 3ec3f094831c2143a818b43d1761a571f0ffa63d..c4dd904604ee10a909bbcc7c03dd0dd3536020b1 100644
 --- a/browser/components/places/content/editBookmarkPanel.inc.xhtml
 +++ b/browser/components/places/content/editBookmarkPanel.inc.xhtml
 @@ -5,7 +5,7 @@
@@ -29,23 +29,30 @@ index 3ec3f094831c2143a818b43d1761a571f0ffa63d..f543639d4d8e8d59e32a0ef866abd85e
    <label data-l10n-id="bookmark-overlay-location-2"
           class="editBMPanel_folderRow hideable"
           control="editBMPanel_folderMenuList"/>
-@@ -51,6 +51,19 @@
+@@ -51,6 +51,26 @@
              data-l10n-id="bookmark-overlay-folders-expander2"
              oncommand="gEditItemOverlay.toggleFolderTreeVisibility();"/>
    </hbox>
 +</hbox>
-+<vbox class="zenEditBMPanel_fieldContainer">
-+    <label
-+            class="editBMPanel_workspaceRow hideable"
-+            control="editBMPanel_workspaceDropdown">Workspace</label>
-+    <html:details id="editBMPanel_workspaceDropdown"
-+                  class="editBMPanel_workspaceRow hideable"
-+                  onclick="gEditItemOverlay.onWorkspaceDropdownToggle(event)">
-+        <html:summary id="editBMPanel_workspaceSummary">Choose Workspaces</html:summary>
-+        <html:ul id="editBMPanel_workspaceList">
-+        </html:ul>
-+    </html:details>
-+</vbox>
++  <vbox>
++    <label data-l10n-id="zen-bookmark-edit-panel-workspace-selector"
++           class="hideable"
++           control="editBMPanel_workspacesSelectorExpander"/>
++    <div id="editBMPanel_workspaceDropdown"
++         class="editBMPanel_workspaceRow hideable workspace-dropdown">
++      <div
++              id="editBMPanel_workspaceSummary"
++              class="workspace-trigger">-</div>
++      <button id="editBMPanel_workspacesSelectorExpander"
++              class="expander-down panel-button"
++              data-l10n-id="bookmark-overlay-tags-expander2"
++              oncommand="gEditItemOverlay.onWorkspaceDropdownToggle();"/>
++
++    </div>
++  </vbox>
++
++  <ul id="editBMPanel_workspaceList" class="workspace-list hideable" hidden="true">
++  </ul>
  
    <vbox id="editBMPanel_folderTreeRow"
          class="hideable"
diff --git a/src/browser/themes/shared/places/editBookmark-css.patch b/src/browser/themes/shared/places/editBookmark-css.patch
index 75e0cf4b7..ba592ad75 100644
--- a/src/browser/themes/shared/places/editBookmark-css.patch
+++ b/src/browser/themes/shared/places/editBookmark-css.patch
@@ -1,76 +1,59 @@
 diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css
-index 4c00982e620f4cfd5aa1d97d45a276f5d41d0d74..2bc1b8dc5c0363aceb1f4671ca7423737217a75a 100644
+index 4c00982e620f4cfd5aa1d97d45a276f5d41d0d74..58018015d6046895c996f808785ab7282e5fed81 100644
 --- a/browser/themes/shared/places/editBookmark.css
 +++ b/browser/themes/shared/places/editBookmark.css
-@@ -158,3 +158,71 @@
+@@ -158,3 +158,53 @@
    font-size: 0.9em;
    margin: 2px 4px;
  }
 +
 +/*Bookmark workspace selector styles*/
-+#editBMPanel_workspaceRow {
-+  margin-top: 4px;
-+}
-+
-+details {
++.workspace-dropdown {
 +  position: relative;
 +  width: 100%;
++  display: flex;
++  gap: 16px;
 +}
 +
-+summary {
-+  display: flex;
-+  align-items: center;
-+  justify-content: space-between;
++.workspace-trigger {
++  width: 100%;
++  text-align: left;
 +  padding: 8px 12px;
 +  border: 1px solid var(--card-outline-color);
 +  border-radius: 4px;
 +  background-color: var(--zen-colors-tertiary);
-+  cursor: pointer;
-+}
-+
-+
-+summary:focus {
-+  border-color: transparent;
-+  outline: var(--in-content-focus-outline);
-+  outline-offset: -1px;
-+}
-+
-+details[open] > summary {
-+  border-bottom-left-radius: 0;
-+  border-bottom-right-radius: 0;
++  display: flex;
++  align-items: center;
++  justify-content: space-between;
 +}
 +
-+ul {
-+  position: absolute;
-+  top: 100%;
-+  left: 0;
-+  right: 0;
++.workspace-list {
++  flex-direction: column;
++  width: 100%;
 +  max-height: 200px;
 +  overflow-y: auto;
-+  border-color: transparent;
-+  outline: var(--in-content-focus-outline);
-+  outline-offset: -1px;
-+  border-top: none;
++  margin-top: 4px;
++  border: 1px solid var(--card-outline-color);
++  border-radius: 4px;
 +  background-color: var(--zen-colors-tertiary);
 +  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-+  z-index: 1000;
 +  padding: 4px 0;
-+  border-radius: 0 0 4px 4px;
 +}
 +
-+li {
++.workspace-list li {
 +  list-style: none;
 +  margin: 0;
 +  padding: 0;
 +}
 +
-+li > label {
++.workspace-list li > label {
 +  display: flex;
 +  align-items: center;
 +  padding: 4px 12px;
 +  cursor: pointer;
 +}
 +
-+input[type="checkbox"] {
++.workspace-list input[type="checkbox"] {
 +  margin-right: 8px;
 +}
+\ No newline at end of file