feat(toolbar): Add Zen Essentials Toolbar

This commit adds the Zen Essentials Toolbar to the application. The toolbar is initialized in the `ZenEssentialsToolbar` class constructor by calling the `_initInitialLayout` method. The toolbar is inserted before the `vertical-pinned-tabs-container` element and consists of a scrollable container (`EssentialsToolbarItems`) for toolbar items. The toolbar also includes event listeners for mouse events and commands.

The commit also includes a code change in the `ZenSidebarManager` class where the `toggleEssentialsAccordion` method has been removed. This method was responsible for expanding and collapsing the `EssentialsToolbarItems` content based on the state of the header element.

These changes enhance the application by adding the Zen Essentials Toolbar and removing the unnecessary `toggleEssentialsAccordion` method.

src/ZenEssentialsToolbar.mjs

@@ -1,8 +1,10 @@
 
 class ZenEssentialsToolbar extends PlacesViewBase {
-    constructor(placesUrl, rootElt, viewElt) {
+    constructor(placesUrl) {
+        ZenEssentialsToolbar._initInitialLayout();
+
         // We'll initialize the places URL after ensuring the folder exists
-        super(null, rootElt, viewElt);
+        super(null, document.getElementById("EssentialsToolbarItems"), document.getElementById("EssentialsToolbar"));
         // Do initialization of properties that don't depend on Places
         this._init();
         this._initPlacesFolder();
@@ -117,6 +119,29 @@ class ZenEssentialsToolbar extends PlacesViewBase {
         this._addEventListeners(window, ["unload"], false);
     }
 
+    static _initInitialLayout() {
+        const fragment = window.MozXULElement.parseXULToFragment(`
+            <hbox
+                    id="EssentialsToolbar"
+                    context="placesContext"
+                    onmouseup="BookmarksEventHandler.onMouseUp(event);"
+                    onclick="BookmarksEventHandler.onClick(event, this._placesView);"
+                    oncommand="BookmarksEventHandler.onCommand(event);"
+                    tooltip="bhTooltip"
+                    popupsinherittooltip="true">
+              <hbox id="EssentialsToolbarDropIndicatorHolder" align="center" collapsed="true">
+                <image id="EssentialsToolbarDropIndicator"
+                       collapsed="true"/>
+              </hbox>
+              <scrollbox orient="vertical"
+                         id="EssentialsToolbarItems"
+                         flex="1"/>
+            </hbox>
+        `);
+
+        document.getElementById("vertical-pinned-tabs-container").before(fragment);
+    }
+
     _cbEvents = [
         "dragstart",
         "dragover",

src/ZenSidebarManager.mjs

@@ -783,27 +783,6 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
     const url = gContextMenu.linkURL || gContextMenu.target.ownerDocument.location.href;
     this._createNewPanel(url);
   }
-
-  toggleEssentialsAccordion(header) {
-    const content = document.getElementById('EssentialsToolbarItems');
-    const isExpanded = header.hasAttribute('expanded');
-
-    if (isExpanded) {
-      // Collapse
-      header.removeAttribute('expanded');
-      content.style.maxHeight = null;
-      content.style.opacity = '0';
-      setTimeout(() => {
-        content.removeAttribute('expanded');
-      }, 300);
-    } else {
-      // Expand
-      header.setAttribute('expanded', 'true');
-      content.setAttribute('expanded', 'true');
-      content.style.maxHeight = content.scrollHeight + "px";
-      content.style.opacity = '1';
-    }
-  }
 }
 
 window.gZenBrowserManagerSidebar = new ZenBrowserManagerSidebar();