feat: Add Essentials Toolbar

This commit introduces a new Essentials Toolbar feature to Zen. It provides a more streamlined and organized way for users to access frequently used bookmakrs directly from the sidebar.

- Added `ZenEssentialsToolbar.mjs` to provide the logic for the toolbar.
- Updated the sidebar CSS (`zen-sidebar.css`) to style the Essentials Toolbar.
- Modified `ZenStartup.mjs` to initialize the Essentials Toolbar.
- Made changes to `browserPlacesViews-js.patch` to integrate with existing bookmark functionality.
- Added a new preference `zen.essentials.enabled` to enable/disable the Essentials Toolbar.

src/browser/base/content/ZenStartup.mjs

@@ -34,7 +34,11 @@
 
         // Disable smooth scroll
         gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
-
+        new ZenEssentialsToolbar(
+            `place:parent=pfgqteRgY-Wr`,
+            document.getElementById("EssentialsToolbarItems"),
+            document.getElementById("EssentialsToolbar")
+        );
         ZenWorkspaces.init();
         gZenUIManager.init();
         gZenVerticalTabsManager.init();

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

@@ -34,6 +34,7 @@
 <script src="chrome://browser/content/ZenUIManager.mjs" />
 <script src="chrome://browser/content/zen-components/ZenSidebarManager.mjs"/>
 <script src="chrome://browser/content/zen-components/ZenTabUnloader.mjs" />
+<script src="chrome://browser/content/zen-components/ZenEssentialsToolbar.mjs" />
 <script src="chrome://browser/content/zen-components/ZenWorkspaces.mjs" />
 <script src="chrome://browser/content/zen-components/ZenWorkspacesStorage.mjs" />
 <script src="chrome://browser/content/zen-components/ZenWorkspacesSync.mjs" />

src/browser/base/content/zen-assets.jar.inc.mn

@@ -16,6 +16,7 @@
         content/browser/zen-components/ZenThemeBuilder.mjs      (content/zen-components/src/ZenThemeBuilder.mjs)
         content/browser/zen-components/ZenThemesImporter.mjs    (content/zen-components/src/ZenThemesImporter.mjs)
         content/browser/zen-components/ZenTabUnloader.mjs       (content/zen-components/src/ZenTabUnloader.mjs)
+        content/browser/zen-components/ZenEssentialsToolbar.mjs (content/zen-components/src/ZenEssentialsToolbar.mjs)
         content/browser/zen-components/ZenPinnedTabManager.mjs  (content/zen-components/src/ZenPinnedTabManager.mjs)
         content/browser/zen-components/ZenCommonUtils.mjs       (content/zen-components/src/ZenCommonUtils.mjs)
         content/browser/zen-components/ZenGradientGenerator.mjs (content/zen-components/src/ZenGradientGenerator.mjs)

src/browser/base/content/zen-styles/zen-sidebar.css

@@ -73,3 +73,78 @@
 #toolbar-menubar {
   display: none !important;
 }
+
+/* Essentials styles */
+#EssentialsToolbar {
+  border-bottom: 1px solid var(--zen-colors-border);
+  padding-bottom: 6px;
+  & .bookmark-item {
+    max-width: unset;
+    padding: 8px;
+    gap: 8px;
+
+    & .toolbarbutton-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  overflow: hidden;
+}
+
+#essentials-accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  background: none !important;
+  border: none !important;
+  appearance: unset !important;
+  padding: 4px 8px;
+  gap: 6px;
+  cursor: pointer;
+  width: 100%;
+  transition: 0.3s;
+}
+
+.accordion-header-line {
+  flex: 1;
+  height: 1px;
+  width: 100%;
+  background-color: currentColor;
+}
+
+#essentials-accordion-header[expanded] #essentials-accordion-icon image {
+  transform: rotate(90deg);
+}
+
+#essentials-accordion-icon {
+  width: 12px;
+  height: 12px;
+  appearance: none !important;
+
+  color:inherit !important;
+  -moz-context-properties: fill, fill-opacity !important;
+  fill: currentColor !important;
+  & image {
+
+    color: inherit !important;
+    list-style-image: url("chrome://global/skin/icons/chevron.svg") !important;
+    transition: transform 0.3s ease;
+    appearance: unset !important;
+  }
+}
+
+#EssentialsToolbarItems {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  padding: 0 4px;
+  opacity: 0;
+}
+
+#EssentialsToolbarItems[expanded] {
+  opacity: 1;
+}
+
+#EssentialsToolbarItems .bookmark-item {
+  max-width: unset;
+}

src/browser/components/places/content/browserPlacesViews-js.patch

@@ -0,0 +1,30 @@
+diff --git a/browser/components/places/content/browserPlacesViews.js b/browser/components/places/content/browserPlacesViews.js
+index 1bfa0af16178c9b42172bc1b1e0249d28ff8e9e6..e7e76a6d548b32887c1d39053e42c5e3dafbb839 100644
+--- a/browser/components/places/content/browserPlacesViews.js
++++ b/browser/components/places/content/browserPlacesViews.js
+@@ -393,6 +393,7 @@ class PlacesViewBase {
+           "scheme",
+           PlacesUIUtils.guessUrlSchemeForUI(aPlacesNode.uri)
+         );
++        element.addEventListener("command", gZenGlanceManager.openGlanceForBookmark.bind(gZenGlanceManager));
+       } else if (PlacesUtils.containerTypes.includes(type)) {
+         element = document.createXULElement("menu");
+         element.setAttribute("container", "true");
+@@ -1087,6 +1088,8 @@ class PlacesToolbar extends PlacesViewBase {
+           "scheme",
+           PlacesUIUtils.guessUrlSchemeForUI(aChild.uri)
+         );
++        button.hidden = ZenWorkspaces.isBookmarkInAnotherWorkspace(aChild);
++        button.addEventListener("command", gZenGlanceManager.openGlanceForBookmark.bind(gZenGlanceManager));
+       }
+     }
+ 
+@@ -2235,7 +2238,7 @@ this.PlacesPanelview = class PlacesPanelview extends PlacesViewBase {
+         PlacesUIUtils.guessUrlSchemeForUI(placesNode.uri)
+       );
+       element.setAttribute("label", PlacesUIUtils.getBestTitle(placesNode));
+-
++      element.addEventListener("command", gZenGlanceManager.openGlanceForBookmark.bind(gZenGlanceManager));
+       let icon = placesNode.icon;
+       if (icon) {
+         element.setAttribute("image", icon);

src/browser/components/preferences/zen-settings.js

@@ -1099,5 +1099,10 @@ Preferences.addAll([
     id: "zen.view.compact.color-sidebar",
     type: "bool",
     default: true,
+  },
+  {
+  id: "zen.essentials.enabled",
+  type: "bool",
+  default: true,
   }
 ]);