feat: Add Essentials Toolbar to Navigator Toolbox

This commit introduces a new Essentials Toolbar to the Navigator Toolbox. The toolbar is located within the vertical pinned tabs container and provides quick access to essential features.

The following changes were made:

- Added a new toolbarbutton with the id "essentials-accordion-header" to toggle the Essentials Toolbar visibility.
- Introduced a new `hbox` with the id "EssentialsToolbar" to house the toolbar items.
- Included a `scrollbox` with the id "EssentialsToolbarItems" to handle scrolling for the toolbar items.
- Modified the `arrowscrollbox` to use a vertical orientation (`orient="vertical"`).
- Added a separator between the pinned tabs container and the Essentials Toolbar.

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 12fa0cf79aade28581016adf96df85386dabdcef..4c8c2f791b29da0308d1a24778c1e7f5a9bb7293 100644
+index 12fa0cf79aade28581016adf96df85386dabdcef..b2a29b4c9a61ee8380076a0bcc517f3cf217528a 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -36,16 +36,40 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..4c8c2f791b29da0308d1a24778c1e7f5
                  stopwatchid="FX_TAB_CLICK_MS">
              <hbox class="tab-drop-indicator" hidden="true"/>
  # If the name (tabbrowser-arrowscrollbox) or structure of this changes
-@@ -59,7 +60,7 @@
+@@ -58,8 +59,31 @@
+ # DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
  # the current structure that we may want to revisit.
              <html:div id="vertical-pinned-tabs-container"></html:div>
++            <toolbarbutton id="essentials-accordion-header"  oncommand="gZenBrowserManagerSidebar.toggleEssentialsAccordion(this)">
++              Essentials
++              <toolbarbutton id="essentials-accordion-icon">
++                <image></image>
++              </toolbarbutton>
++              <html:div class="accordion-header-line"></html:div>
++            </toolbarbutton>
++            <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>
              <html:div id="vertical-pinned-tabs-container-separator"></html:div>
 -            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
 +            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="vertical" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
                <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
                <hbox id="tabbrowser-arrowscrollbox-periphery">
                  <toolbartabstop/>
-@@ -113,9 +114,10 @@
+@@ -113,9 +137,10 @@
        <toolbarbutton id="content-analysis-indicator"
                       oncommand="ContentAnalysis.showPanel(this, PanelUI);"
                       class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -58,7 +82,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..4c8c2f791b29da0308d1a24778c1e7f5
      </toolbar>
  
    </vbox>
-@@ -531,6 +534,7 @@
+@@ -531,6 +556,7 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -254,17 +254,18 @@
       margin-bottom: 12px;
       position: relative;
 
-      &::after {
-        bottom: -6px;
-        content: '';
-        display: block;
-        height: 1px;
-        background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
-        width: 99%;
-        left: 50%;
-        transform: translateX(-50%);
-        position: absolute;
-      }
+      /*TODO: figure out if we want this line*/
+      /*&::after {*/
+      /*  bottom: -6px;*/
+      /*  content: '';*/
+      /*  display: block;*/
+      /*  height: 1px;*/
+      /*  background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));*/
+      /*  width: 99%;*/
+      /*  left: 50%;*/
+      /*  transform: translateX(-50%);*/
+      /*  position: absolute;*/
+      /*}*/
 
       & .tabbrowser-tab {
         width: 100%;