feat: implement workspace selector in bookmark editing panel and update related styles

2025-09-05 19:08:18 +00:00 · 2024-12-05 00:06:02 +01:00
parent fad68a1bf0
commit 54cb67b316
9 changed files with 148 additions and 150 deletions
--- a/2
+++ b/2
--- a/src/browser/base/content/ZenCustomizableUI.sys.mjs
+++ b/src/browser/base/content/ZenCustomizableUI.sys.mjs
@@ -9,7 +9,7 @@ export var ZenCustomizableUI = new (class {
      'zen-sidebar-top-buttons',
      {
        type: this.TYPE_TOOLBAR,
-        defaultPlacements: ['preferences-button', 'zen-sidepanel-button'],
+        defaultPlacements: ['zen-sidepanel-button'],
        defaultCollapsed: null,
      },
      true
--- a/src/browser/base/content/zen-styles/zen-popup.css
+++ b/src/browser/base/content/zen-styles/zen-popup.css
@@ -290,3 +290,53 @@ menuitem {
    color: var(--button-hover-color);
  }
 }
+
+/*Bookmark workspace selector styles*/
+.workspace-dropdown {
+  position: relative;
+  width: 100%;
+  display: flex;
+  gap: 16px;
+}
+
+.workspace-trigger {
+  width: 100%;
+  text-align: left;
+  padding: 8px 12px;
+  border: 1px solid var(--input-border-color);
+  border-radius: 4px;
+  background-color: var(--zen-colors-tertiary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.workspace-list {
+  flex-direction: column;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  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);
+  padding: 4px 0;
+}
+
+.workspace-list li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.workspace-list li > label {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+
+.workspace-list input[type="checkbox"] {
+  margin-right: 8px;
+}
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -94,7 +94,7 @@
  }

  & #nav-bar {
-    margin-bottom: 8px;
+    margin-bottom: 6px;
  }

  & #zen-sidebar-top-buttons {
@@ -435,7 +435,7 @@
  }

  & #zen-essentials-container {
-    --tab-min-height: 42px;
+    --tab-min-height: 44px;
  }

  /* Mark: Fix separator paddings */
@@ -506,7 +506,7 @@
      & .tab-background {
        @media not (prefers-color-scheme: dark) {
          &:is([selected], [multiselected]) {
-            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 .5px 1px rgba(0, 0, 0, 0.1);
          }
        }
        margin-inline: var(--tab-block-margin);
@@ -894,7 +894,8 @@
  }

  &:not([selected]) .tab-background {
-    background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
+    background: var(--zen-toolbar-element-bg);
+    backdrop-filter: none !important;
  }

  & .tab-content {
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -34,9 +34,10 @@

  --zen-secondary-btn-color: var(--zen-colors-primary-foreground);

-  --in-content-primary-button-background: color-mix(in srgb, var(--zen-primary-color) 10%, var(--zen-branding-bg-reverse) 90%) !important;
-  --in-content-primary-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
-  --in-content-primary-button-background-active: color-mix(in srgb, var(--zen-primary-color) 7%, var(--zen-branding-bg-reverse) 50%) !important;
+  --in-content-primary-button-background: color-mix(in srgb, var(--zen-primary-color) 10%, var(--zen-branding-bg) 90%) !important;
+  --in-content-primary-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 15%, var(--zen-branding-bg) 85%) !important;
+  --in-content-primary-button-background-active: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-branding-bg) 80%) !important;
+  --button-text-color-primary: var(--zen-branding-bg-reverse) !important;
  --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
  --in-content-primary-button-border-color: transparent !important;
  --in-content-primary-button-border-hover: transparent !important;
@@ -48,8 +49,7 @@
  /* This is like the secondary button */
  --in-content-button-background: transparent !important;
  --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
-  --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
-  --in-content-button-text-color-hover: var(--zen-branding-bg) !important;
+  --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg) 60%) !important;
  --button-bgcolor: var(--in-content-button-background) !important;
  --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
  --button-hover-color: var(--in-content-button-text-color-hover) !important;
@@ -65,7 +65,6 @@

  --button-background-color: var(--in-content-button-background) !important;
  --button-background-color-hover: var(--in-content-button-background-hover) !important;
-  --button-text-color-hover: var(--in-content-button-text-color-hover) !important;
  --button-background-color-active: var(--in-content-primary-button-background-active) !important;

  --color-accent-primary: var(--button-primary-bgcolor) !important;
@@ -78,6 +77,11 @@
  --zen-button-border-radius: 5px;
  --zen-button-padding: 0.6rem 1.2rem;

+  --zen-toolbar-element-bg: light-dark(
+    rgba(255, 255, 255, 0.5),
+    rgba(170, 170, 170, 0.2)
+  );
+
  /* Toolbar */
  --zen-toolbar-height: 38px;
  --zen-toolbar-button-inner-padding: 6px;
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -14,57 +14,6 @@
  font-size: 1.1em;
 }

-#urlbar[breakout-extend='true'] {
-  z-index: 1000;
-  min-width: 600px;
-  top: 0 !important;
-  --urlbar-container-height: 55px !important;
-  --urlbar-margin-inline: 10px !important;
-
-  & #urlbar-background {
-    background: var(--zen-branding-bg) !important;
-    backdrop-filter: blur(10px);
-    border: 1px solid var(--arrowpanel-border-color) !important;
-  }
-
-  & #identity-box {
-    margin-right: var(--urlbar-margin-inline);
-  }
-
-  :root[zen-right-side='true'] & {
-    right: 0;
-  }
-
-  @media not (-moz-bool-pref: 'zen.view.compact') {
-    max-width: 45%;
-    min-width: 45%;
-    position: absolute;
-
-    top: calc(var(--zen-toolbar-height) * 4) !important;
-    left: 50%;
-    transform: translateX(-50%);
-
-    #urlbar-container:has(&) {
-      border-radius: var(--toolbarbutton-border-radius);
-      background: var(--toolbarbutton-hover-background);
-
-      &::before {
-        content: '';
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: -1;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-      }
-    }
-  }
-}
-
 #searchbar:focus-within {
  border-color: transparent !important;
 }
@@ -74,19 +23,10 @@
 }

 #urlbar-background {
-  background: var(--zen-dialog-background);
+  background: var(--zen-toolbar-element-bg) !important;
  outline: none !important;
 }

-#urlbar[focused='true'] > #urlbar-background {
-  background: var(--zen-dialog-background) !important;
-}
-
-#urlbar:not([focused='true']):not([breakout-extend="true"]) > #urlbar-background {
-  background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)) !important;
-  backdrop-filter: blur(10px);
-}
-
 #urlbar-background {
  border: transparent !important;
  margin: 1px;
@@ -178,6 +118,38 @@

 :root[zen-single-toolbar='true'] {

+  .urlbar-page-action:not(#star-button-box),
+  #tracking-protection-icon-container {
+    margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
+    opacity: 0;
+    transition: all 0.2s;
+  }
+
+  #urlbar[open] :is(#tracking-protection-icon-container, .urlbar-page-action),
+  #urlbar:hover :is(#tracking-protection-icon-container, .urlbar-page-action),
+  .urlbar-page-action[open],
+  #tracking-protection-icon-container[open] {
+    opacity: 1;
+    margin-inline-end: 0 !important;
+  }
+
+  #identity-permission-box,
+  #notification-popup-box {
+    margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
+    opacity: 0;
+    transition: all 0.2s;
+  }
+
+  #urlbar[open] #identity-permission-box,
+  #urlbar[open] #notification-popup-box,
+  #urlbar:hover #identity-permission-box,
+  #urlbar:hover #notification-popup-box,
+  #identity-permission-box[open],
+  #notification-popup-box[open] {
+    opacity: 1;
+    margin-inline-start: 0 !important;
+  }
+
  #notification-popup-box {
    align-items: center;
    justify-content: center;
@@ -355,3 +327,48 @@ button.popup-notification-dropmarker {
 /*.titlebar-button:last-child {
  padding-right: var(--zen-element-separation) !important;
 }*/
+
+#urlbar[breakout-extend='true'] {
+  z-index: 1000;
+  min-width: 600px;
+  top: 0 !important;
+  --urlbar-container-height: 55px !important;
+  --urlbar-margin-inline: 10px !important;
+
+  & #urlbar-background {
+    /* We cant have a transparent background with a backdrop-filter because on normal websites,
+      the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
+      due to performance issues */
+      background-color: light-dark(
+        rgba(255, 255, 255, 0.55),
+        rgba(25, 25, 25, 0.65)
+      ) !important;
+      backdrop-filter: blur(30px) !important;
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
+    outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
+    outline-offset: -1px !important;
+  }
+
+  & #identity-box {
+    margin-right: var(--urlbar-margin-inline);
+  }
+
+  :root[zen-right-side='true'] & {
+    right: 0;
+  }
+
+  @media not (-moz-bool-pref: 'zen.view.compact') {
+    max-width: 45%;
+    min-width: 45%;
+    position: absolute;
+
+    top: calc(var(--zen-toolbar-height) * 4) !important;
+    left: 50%;
+    transform: translateX(-50%);
+
+    #urlbar-container:has(&) {
+      border-radius: 10px;
+      background: var(--toolbarbutton-hover-background);
+    }
+  }
+}
--- 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..c4dd904604ee10a909bbcc7c03dd0dd3536020b1 100644
+index 3ec3f094831c2143a818b43d1761a571f0ffa63d..98704f399089f2a33776c6ae9565b8ff9b8ddd34 100644
 --- a/browser/components/places/content/editBookmarkPanel.inc.xhtml
 +++ b/browser/components/places/content/editBookmarkPanel.inc.xhtml
@@ -5,7 +5,7 @@
@@ -34,7 +34,7 @@ index 3ec3f094831c2143a818b43d1761a571f0ffa63d..c4dd904604ee10a909bbcc7c03dd0dd3
             oncommand="gEditItemOverlay.toggleFolderTreeVisibility();"/>
   </hbox>
 +</hbox>
-+  <vbox>
+  <hbox flex="1" class="zenEditBMPanel_fieldContainer">
 +    <label data-l10n-id="zen-bookmark-edit-panel-workspace-selector"
 +           class="hideable"
 +           control="editBMPanel_workspacesSelectorExpander"/>
@@ -49,7 +49,7 @@ index 3ec3f094831c2143a818b43d1761a571f0ffa63d..c4dd904604ee10a909bbcc7c03dd0dd3
 +              oncommand="gEditItemOverlay.onWorkspaceDropdownToggle();"/>
 +
 +    </div>
-+  </vbox>
+  </hbox>
 +
 +  <ul id="editBMPanel_workspaceList" class="workspace-list hideable" hidden="true">
 +  </ul>
--- a/src/browser/locales/en-US/browser/editBookmarkOverlay-ftl.patch
+++ b/src/browser/locales/en-US/browser/editBookmarkOverlay-ftl.patch
@@ -1,15 +0,0 @@
-diff --git a/browser/locales/en-US/browser/editBookmarkOverlay.ftl b/browser/locales/en-US/browser/editBookmarkOverlay.ftl
-index da74660e48620fe9097d05a51ba4be34f21246e6..d70b98c71ca3a70732c633d939079f9fb589726f 100644
--- a/browser/locales/en-US/browser/editBookmarkOverlay.ftl
-+++ b/browser/locales/en-US/browser/editBookmarkOverlay.ftl
-@@ -37,6 +37,10 @@ bookmark-overlay-tags-2 =
-   .value = Tags
-   .accesskey = T
- 
-+zen-bookmark-edit-panel-workspace-selector =
-+  .value = Workspaces
-+  .accesskey = W
-+
- bookmark-overlay-tags-empty-description =
-   .placeholder = Separate tags with commas
- 
--- a/src/browser/themes/shared/places/editBookmark-css.patch
+++ b/src/browser/themes/shared/places/editBookmark-css.patch
@@ -1,59 +0,0 @@
-diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css
-index 4c00982e620f4cfd5aa1d97d45a276f5d41d0d74..58018015d6046895c996f808785ab7282e5fed81 100644
--- a/browser/themes/shared/places/editBookmark.css
-+++ b/browser/themes/shared/places/editBookmark.css
-@@ -158,3 +158,53 @@
-   font-size: 0.9em;
-   margin: 2px 4px;
- }
-+
-+/*Bookmark workspace selector styles*/
-+.workspace-dropdown {
-+  position: relative;
-+  width: 100%;
-+  display: flex;
-+  gap: 16px;
-+}
-+
-+.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);
-+  display: flex;
-+  align-items: center;
-+  justify-content: space-between;
-+}
-+
-+.workspace-list {
-+  flex-direction: column;
-+  width: 100%;
-+  max-height: 200px;
-+  overflow-y: auto;
-+  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);
-+  padding: 4px 0;
-+}
-+
-+.workspace-list li {
-+  list-style: none;
-+  margin: 0;
-+  padding: 0;
-+}
-+
-+.workspace-list li > label {
-+  display: flex;
-+  align-items: center;
-+  padding: 4px 12px;
-+  cursor: pointer;
-+}
-+
-+.workspace-list input[type="checkbox"] {
-+  margin-right: 8px;
-+}
-\ No newline at end of file