From 8959c0fe823ecd372a8942470aceae3a7f343cfb Mon Sep 17 00:00:00 2001
From: Kelly Cochrane <kcochrane@mozilla.com>
Date: Thu, 13 Mar 2025 23:39:02 +0000
Subject: [PATCH] Bug 1951427 - Rework expand on hover to only overlay the
 sidebar launcher
 r=desktop-theme-reviewers,tabbrowser-reviewers,sidebar-reviewers,dao,emilio,sclements

Differential Revision: https://phabricator.services.mozilla.com/D240171
---
 browser/base/content/browser-box.inc.xhtml    |  41 +--
 .../components/sidebar/SidebarState.sys.mjs   |  47 ++-
 browser/components/sidebar/browser-sidebar.js | 271 +++++++-------
 browser/themes/shared/sidebar.css             | 130 +++++--
 browser/themes/shared/tabbrowser/tabs.css     | 346 ++++++++++++------
 5 files changed, 516 insertions(+), 319 deletions(-)

diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
index 2ca8bdd2674f..7d7e8697f02f 100644
--- a/browser/base/content/browser-box.inc.xhtml
+++ b/browser/base/content/browser-box.inc.xhtml
@@ -3,29 +3,26 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 <hbox flex="1" id="browser">
-  <div id="sidebar-wrapper">
-    <box context="sidebar-context-menu" id="sidebar-main" hidden="true">
-      <html:sidebar-main flex="1">
-        <box id="vertical-tabs" slot="tabstrip" customizable="true" contextmenu="toolbar-context-menu"></box>
-      </html:sidebar-main>
+  <box context="sidebar-context-menu" id="sidebar-main" hidden="true">
+    <html:sidebar-main flex="1">
+      <box id="vertical-tabs" slot="tabstrip" customizable="true" contextmenu="toolbar-context-menu"></box>
+    </html:sidebar-main>
+  </box>
+  <splitter id="sidebar-launcher-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
+  <vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
+    <box id="sidebar-header" align="center">
+      <toolbarbutton id="sidebar-switcher-target" class="tabbable" aria-expanded="false">
+        <image id="sidebar-icon" consumeanchor="sidebar-switcher-target"/>
+        <label id="sidebar-title" crop="end" control="sidebar"/>
+        <image id="sidebar-switcher-arrow"/>
+      </toolbarbutton>
+      <image id="sidebar-throbber"/>
+      <spacer id="sidebar-spacer"/>
+      <toolbarbutton id="sidebar-close" class="close-icon tabbable" data-l10n-id="sidebar-close-button"/>
     </box>
-    <splitter id="sidebar-launcher-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
-    <vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
-      <box id="sidebar-header" align="center">
-        <toolbarbutton id="sidebar-switcher-target" class="tabbable" aria-expanded="false">
-          <image id="sidebar-icon" consumeanchor="sidebar-switcher-target"/>
-          <label id="sidebar-title" crop="end" control="sidebar"/>
-          <image id="sidebar-switcher-arrow"/>
-        </toolbarbutton>
-        <image id="sidebar-throbber"/>
-        <spacer id="sidebar-spacer"/>
-        <toolbarbutton id="sidebar-close" class="close-icon tabbable" data-l10n-id="sidebar-close-button"/>
-      </box>
-      <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
-    </vbox>
-    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
-    <box id="after-splitter"></box>
-  </div>
+    <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
+  </vbox>
+  <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
   <tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
     <tabpanels id="tabbrowser-tabpanels" flex="1" selectedIndex="0"/>
   </tabbox>
diff --git a/browser/components/sidebar/SidebarState.sys.mjs b/browser/components/sidebar/SidebarState.sys.mjs
index 1fb2a9b455e9..772539322b2a 100644
--- a/browser/components/sidebar/SidebarState.sys.mjs
+++ b/browser/components/sidebar/SidebarState.sys.mjs
@@ -32,9 +32,6 @@ XPCOMUtils.defineLazyPreferenceGetter(
  * @property {number} launcherWidth
  *   Current width of the sidebar launcher.
  * @property {number} expandedLauncherWidth
- *   Width that the sidebar launcher should expand to.
- * @property {number} collapsedLauncherWidth
- *   Width that the sidebar launcher should collapse to.
  */
 
 const LAUNCHER_MINIMUM_WIDTH = 100;
@@ -57,8 +54,6 @@ export class SidebarState {
     launcherExpanded: false,
     launcherDragActive: false,
     launcherHoverActive: false,
-    collapsedLauncherWidth: undefined,
-    command: undefined,
   };
   #previousLauncherExpanded = undefined;
 
@@ -218,10 +213,6 @@ export class SidebarState {
       expandedLauncherWidth: convertToInt(this.expandedLauncherWidth),
       launcherExpanded: this.launcherExpanded,
       launcherVisible: this.launcherVisible,
-      collapsedLauncherWidth:
-        typeof this.collapsedLauncherWidth === "number"
-          ? Math.round(this.collapsedLauncherWidth)
-          : this.collapsedLauncherWidth,
     };
   }
 
@@ -249,12 +240,20 @@ export class SidebarState {
         ? this.#previousLauncherExpanded
         : false;
     }
+
+    const mainEl = this.#controller.sidebarContainer;
+    const boxEl = this.#controller._box;
+    const contentAreaEl =
+      this.#controllerGlobal.document.getElementById("tabbrowser-tabbox");
+    mainEl.toggleAttribute("sidebar-panel-open", open);
+    boxEl.toggleAttribute("sidebar-panel-open", open);
+    contentAreaEl.toggleAttribute("sidebar-panel-open", open);
   }
 
   get panelWidth() {
     // Use the value from `style`. This is a more accurate user preference, as
     // opposed to what the resize observer gives us.
-    return convertToInt(this.#panelEl.style.width);
+    return convertToInt(this.#panelEl?.style.width);
   }
 
   set panelWidth(width) {
@@ -358,7 +357,16 @@ export class SidebarState {
     // Marking the tab container element as expanded or not simplifies the CSS logic
     // and selectors considerably.
     const { tabContainer } = this.#controllerGlobal.gBrowser;
+    const mainEl = this.#controller.sidebarContainer;
+    const splitterEl = this.#controller._launcherSplitter;
+    const boxEl = this.#controller._box;
+    const contentAreaEl =
+      this.#controllerGlobal.document.getElementById("tabbrowser-tabbox");
     tabContainer.toggleAttribute("expanded", expanded);
+    mainEl.toggleAttribute("sidebar-launcher-expanded", expanded);
+    splitterEl.toggleAttribute("sidebar-launcher-expanded", expanded);
+    boxEl.toggleAttribute("sidebar-launcher-expanded", expanded);
+    contentAreaEl.toggleAttribute("sidebar-launcher-expanded", expanded);
     this.#controller.updateToolbarButton();
     if (!this.launcherDragActive) {
       this.#updateLauncherWidth();
@@ -373,6 +381,12 @@ export class SidebarState {
     this.#props.launcherDragActive = active;
     if (active) {
       this.#launcherEl.toggleAttribute("customWidth", true);
+      if (
+        this.launcherExpanded &&
+        this.#controller.sidebarRevampVisibility === "expand-on-hover"
+      ) {
+        this.#controller.toggleExpandOnHover(false);
+      }
     } else if (this.launcherWidth < LAUNCHER_MINIMUM_WIDTH) {
       // Snap back to collapsed state when the new width is too narrow.
       this.launcherExpanded = false;
@@ -382,7 +396,12 @@ export class SidebarState {
     } else {
       // Store the user-preferred launcher width.
       this.expandedLauncherWidth = this.launcherWidth;
+      if (this.#controller.sidebarRevampVisibility === "expand-on-hover") {
+        this.#controller.toggleExpandOnHover(true, true);
+      }
     }
+    const rootEl = this.#controllerGlobal.document.documentElement;
+    rootEl.toggleAttribute("sidebar-launcher-drag-active", active);
   }
 
   get launcherHoverActive() {
@@ -418,14 +437,6 @@ export class SidebarState {
     this.#updateLauncherWidth();
   }
 
-  get collapsedLauncherWidth() {
-    return this.#props.collapsedLauncherWidth;
-  }
-
-  set collapsedLauncherWidth(width) {
-    this.#props.collapsedLauncherWidth = width;
-  }
-
   /**
    * If the sidebar is expanded, resize the launcher to the user-preferred
    * width (if available). If it is collapsed, reset the launcher width.
diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js
index fb3ec4b93443..8f78ad500605 100644
--- a/browser/components/sidebar/browser-sidebar.js
+++ b/browser/components/sidebar/browser-sidebar.js
@@ -260,6 +260,8 @@ var SidebarController = {
   _mainResizeObserverAdded: false,
   _mainResizeObserver: null,
   _ongoingAnimations: [],
+  _launcherMouseOverListenerAdded: false,
+  _launcherMouseOutListenerAdded: false,
 
   /**
    * @type {MutationObserver | null}
@@ -300,13 +302,6 @@ var SidebarController = {
     return this._sidebarMain;
   },
 
-  get sidebarWrapper() {
-    if (!this._sidebarWrapper) {
-      this._sidebarWrapper = document.getElementById("sidebar-wrapper");
-    }
-    return this._sidebarWrapper;
-  },
-
   get contentArea() {
     if (!this._contentArea) {
       this._contentArea = document.getElementById("tabbrowser-tabbox");
@@ -521,7 +516,7 @@ var SidebarController = {
       this._state.launcherDragActive = true;
     }
     if (this._state.visibilitySetting === "expand-on-hover") {
-      this.setLauncherInlineMargin();
+      this.setLauncherCollapsedWidth();
     }
   },
 
@@ -712,7 +707,7 @@ var SidebarController = {
   reversePosition() {
     Services.prefs.setBoolPref(this.POSITION_START_PREF, !this._positionStart);
     if (this.sidebarRevampVisibility === "expand-on-hover") {
-      this.setLauncherInlineMargin();
+      this.setLauncherCollapsedWidth();
     }
   },
 
@@ -723,78 +718,37 @@ var SidebarController = {
   setPosition() {
     // First reset all ordinals to match DOM ordering.
     let contentArea = document.getElementById("tabbrowser-tabbox");
-    if (this.sidebarRevampVisibility !== "expand-on-hover") {
-      let flattenedSidebarEls = [...this.sidebarWrapper.children, contentArea];
-      flattenedSidebarEls.forEach((node, i) => {
-        if (node.id !== "sidebar-wrapper") {
-          node.style.order = i + 1;
-        }
-      });
-    } else {
-      let browser = document.getElementById("browser");
-      [...browser.children].forEach((node, i) => {
-        node.style.order = i + 1;
-      });
-      [...this.sidebarWrapper.children].forEach((node, i) => {
-        node.style.order = i + 1;
-      });
-    }
+    let browser = document.getElementById("browser");
+    [...browser.children].forEach((node, i) => {
+      node.style.order = i + 1;
+    });
     let sidebarContainer = document.getElementById("sidebar-main");
     let sidebarMain = document.querySelector("sidebar-main");
     if (!this._positionStart) {
-      // DOM ordering is:     sidebar-main | launcher-splitter | sidebar-box | splitter | after-splitter | tabbrowser-tabbox
-      // Want to display as:  tabbrowser-tabbox | after-splitter |  splitter |  sidebar-box  | launcher-splitter | sidebar-main
-      if (this.sidebarRevampVisibility === "expand-on-hover") {
-        // First switch order of sidebar-wrapper and tabbrowser-tabbox
-        let wrapperOrdinal = this.sidebarWrapper.style.order;
-        this.sidebarWrapper.style.order = contentArea.style.order;
-        contentArea.style.order = wrapperOrdinal;
-
-        // Next swap sidebar-main and after-splitter
-        let afterSplitter = document.getElementById("after-splitter");
-        let mainOrdinal = parseInt(this.sidebarContainer.style.order);
-        this.sidebarContainer.style.order = parseInt(afterSplitter.style.order);
-        afterSplitter.style.order = mainOrdinal;
-
-        // Then swap launcher-splitter and splitter
-        const launcherSplitterOrdinal = parseInt(
-          this._launcherSplitter.style.order
-        );
-        this._launcherSplitter.style.order = parseInt(
-          this._splitter.style.order
-        );
-        this._splitter.style.order = launcherSplitterOrdinal;
-      } else {
-        // First switch order of sidebar-main and tabbrowser-tabbox
-        let mainOrdinal = this.sidebarContainer.style.order;
-        this.sidebarContainer.style.order = parseInt(contentArea.style.order);
-        contentArea.style.order = mainOrdinal;
-        // Then swap launcher-splitter and after-splitter
-        let afterSplitter = document.getElementById("after-splitter");
-        let afterSplitterOrdinal = afterSplitter.style.order;
-        afterSplitter.style.order = this._launcherSplitter.style.order;
-        this._launcherSplitter.style.order = afterSplitterOrdinal;
-        // Last swap splitter and sidebar-box
-        let splitterOrdinal = this._splitter.style.order;
-        this._splitter.style.order = this._box.style.order;
-        this._box.style.order = splitterOrdinal;
-      }
-
-      // Indicate we've switched ordering to the box
-      this._box.toggleAttribute("positionend", true);
-      sidebarMain.toggleAttribute("positionend", true);
-      sidebarContainer.toggleAttribute("positionend", true);
-      this.toolbarButton &&
-        this.toolbarButton.toggleAttribute("positionend", true);
-      this.sidebarWrapper.toggleAttribute("positionend", true);
-    } else {
-      this._box.toggleAttribute("positionend", false);
-      sidebarMain.toggleAttribute("positionend", false);
-      sidebarContainer.toggleAttribute("positionend", false);
-      this.toolbarButton &&
-        this.toolbarButton.toggleAttribute("positionend", false);
-      this.sidebarWrapper.toggleAttribute("positionend", false);
+      // DOM ordering is:     sidebar-main | launcher-splitter | sidebar-box | splitter | tabbrowser-tabbox
+      // Want to display as:  tabbrowser-tabbox | splitter |  sidebar-box  | launcher-splitter | sidebar-main
+      // First switch order of sidebar-main and tabbrowser-tabbox
+      let mainOrdinal = this.sidebarContainer.style.order;
+      this.sidebarContainer.style.order = contentArea.style.order;
+      contentArea.style.order = mainOrdinal;
+      // Then swap launcher-splitter and splitter
+      let splitterOrdinal = this._splitter.style.order;
+      this._splitter.style.order = this._launcherSplitter.style.order;
+      this._launcherSplitter.style.order = splitterOrdinal;
     }
+    // Indicate we've switched ordering to the box
+    this._box.toggleAttribute("sidebar-positionend", !this._positionStart);
+    sidebarMain.toggleAttribute("sidebar-positionend", !this._positionStart);
+    contentArea.toggleAttribute("sidebar-positionend", !this._positionStart);
+    sidebarContainer.toggleAttribute(
+      "sidebar-positionend",
+      !this._positionStart
+    );
+    this.toolbarButton &&
+      this.toolbarButton.toggleAttribute(
+        "sidebar-positionend",
+        !this._positionStart
+      );
 
     this.hideSwitcherPanel();
 
@@ -1072,9 +1026,16 @@ var SidebarController = {
 
   async _animateSidebarMain() {
     let tabbox = document.getElementById("tabbrowser-tabbox");
-    let animatingElements = [this.sidebarContainer, this._box, this._splitter];
-    if (this.sidebarRevampVisibility !== "expand-on-hover") {
-      animatingElements.push(tabbox);
+    let animatingElements;
+    if (document.documentElement.hasAttribute("sidebar-expand-on-hover")) {
+      animatingElements = [this.sidebarContainer];
+    } else {
+      animatingElements = [
+        this.sidebarContainer,
+        this._box,
+        this._splitter,
+        tabbox,
+      ];
     }
     let resetElements = () => {
       for (let el of animatingElements) {
@@ -1085,7 +1046,12 @@ var SidebarController = {
           el.style.display =
             "";
       }
-      this.sidebarWrapper.classList.remove("ongoing-animations");
+      this.sidebarContainer.toggleAttribute(
+        "sidebar-ongoing-animations",
+        false
+      );
+      this._box.toggleAttribute("sidebar-ongoing-animations", false);
+      tabbox.toggleAttribute("sidebar-ongoing-animations", false);
     };
     if (this._ongoingAnimations.length) {
       this._ongoingAnimations.forEach(a => a.cancel());
@@ -1104,10 +1070,9 @@ var SidebarController = {
     });
 
     const options = {
-      duration:
-        this.sidebarRevampVisibility === "expand-on-hover"
-          ? this._animationExpandOnHoverDurationMs
-          : this._animationDurationMs,
+      duration: document.documentElement.hasAttribute("sidebar-expand-on-hover")
+        ? this._animationExpandOnHoverDurationMs
+        : this._animationDurationMs,
       easing: "ease-in-out",
     };
     let animations = [];
@@ -1194,7 +1159,9 @@ var SidebarController = {
       );
     }
     this._ongoingAnimations = animations;
-    this.sidebarWrapper.classList.add("ongoing-animations");
+    this.sidebarContainer.toggleAttribute("sidebar-ongoing-animations", true);
+    this._box.toggleAttribute("sidebar-ongoing-animations", true);
+    tabbox.toggleAttribute("sidebar-ongoing-animations", true);
     await Promise.allSettled(animations.map(a => a.finished));
     if (this._ongoingAnimations === animations) {
       this._ongoingAnimations = [];
@@ -1210,6 +1177,9 @@ var SidebarController = {
     if (this.inPopup || this.uninitializing) {
       return;
     }
+    if (this.sidebarRevampVisibility === "expand-on-hover") {
+      this.toggleExpandOnHover(initialExpandedValue);
+    }
     if (this._animationEnabled && !window.gReduceMotion) {
       this._animateSidebarMain();
     }
@@ -1919,43 +1889,74 @@ var SidebarController = {
     this.sidebarMain.requestUpdate();
   },
 
-  onMouseOver() {
-    SidebarController._state.launcherHoverActive = true;
-    SidebarController.sidebarMain.addEventListener(
-      "mouseout",
-      SidebarController.onMouseOut,
-      { once: true }
-    );
-    if (SidebarController._animationEnabled && !window.gReduceMotion) {
-      SidebarController._animateSidebarMain();
+  onMouseOver(e) {
+    if (!SidebarController.sidebarContainer.matches(":hover")) {
+      // Don't fire mouseout if hovered over element outside of the launcher
+      e.stopPropagation();
+    } else {
+      const contentArea = document.getElementById("tabbrowser-tabbox");
+      SidebarController._box.toggleAttribute("sidebar-launcher-hovered", true);
+      contentArea.toggleAttribute("sidebar-launcher-hovered", true);
+      SidebarController._state.launcherHoverActive = true;
+      if (!SidebarController._launcherMouseOutListenerAdded) {
+        SidebarController.sidebarContainer.addEventListener(
+          "mouseout",
+          SidebarController.onMouseOut
+        );
+        SidebarController._launcherMouseOutListenerAdded = true;
+      }
+      if (SidebarController._animationEnabled && !window.gReduceMotion) {
+        if (SidebarController._ongoingAnimations.length) {
+          SidebarController._ongoingAnimations.forEach(a => a.cancel());
+          SidebarController._ongoingAnimations = [];
+        }
+        SidebarController._animateSidebarMain();
+      }
+      SidebarController._state.launcherExpanded = true;
+      SidebarController.sidebarContainer.removeEventListener(
+        "mouseover",
+        SidebarController.onMouseOver
+      );
+      SidebarController._launcherMouseOverListenerAdded = false;
     }
-    SidebarController._state.updateVisibility(true, false, false, true);
-    SidebarController.sidebarMain.removeEventListener(
-      "mouseover",
-      SidebarController.onMouseOver
-    );
   },
 
-  onMouseOut() {
-    SidebarController._state.launcherHoverActive = false;
-    SidebarController.sidebarMain.addEventListener(
-      "mouseover",
-      SidebarController.onMouseOver,
-      { once: true }
-    );
-    if (SidebarController._animationEnabled && !window.gReduceMotion) {
-      SidebarController._animateSidebarMain();
+  onMouseOut(e) {
+    if (SidebarController.sidebarContainer.matches(":hover")) {
+      // Don't fire mouseout if hovered over launcher child element
+      e.stopPropagation();
+    } else {
+      const contentArea = document.getElementById("tabbrowser-tabbox");
+      SidebarController._box.toggleAttribute("sidebar-launcher-hovered", false);
+      contentArea.toggleAttribute("sidebar-launcher-hovered", false);
+      SidebarController._state.launcherHoverActive = false;
+      if (!SidebarController._launcherMouseOverListenerAdded) {
+        SidebarController.sidebarContainer.addEventListener(
+          "mouseover",
+          SidebarController.onMouseOver
+        );
+        SidebarController._launcherMouseOverListenerAdded = true;
+      }
+      if (SidebarController._animationEnabled && !window.gReduceMotion) {
+        if (SidebarController._ongoingAnimations.length) {
+          SidebarController._ongoingAnimations.forEach(a => a.cancel());
+          SidebarController._ongoingAnimations = [];
+        }
+        SidebarController._animateSidebarMain();
+      }
+      SidebarController._state.launcherExpanded = false;
+      SidebarController.sidebarContainer.removeEventListener(
+        "mouseout",
+        SidebarController.onMouseOut
+      );
+      SidebarController._launcherMouseOutListenerAdded = false;
     }
-    SidebarController._state.updateVisibility(true, false, false, false);
-    SidebarController.sidebarMain.removeEventListener(
-      "mouseout",
-      SidebarController.onMouseOut
-    );
   },
 
-  async setLauncherInlineMargin() {
+  async setLauncherCollapsedWidth() {
+    let browserEl = document.getElementById("browser");
     let collapsedWidth;
-    if (this._state.launcherExpanded) {
+    if (this.getUIState().launcherExpanded) {
       this._state.launcherExpanded = false;
       await this.sidebarMain.updateComplete;
       collapsedWidth = await new Promise(resolve => {
@@ -1967,40 +1968,30 @@ var SidebarController = {
       collapsedWidth = this._getRects([this.sidebarMain])[0][1].width;
     }
 
-    this._state.collapsedLauncherWidth = collapsedWidth;
-
-    // Make sure sidebar doesn't overlay content area outline
-    const CONTENT_AREA_OUTLINE_WIDTH = 1;
-
-    if (this._positionStart) {
-      this.contentArea.style.marginInlineStart = `${this._state.collapsedLauncherWidth + CONTENT_AREA_OUTLINE_WIDTH}px`;
-      this.contentArea.style.marginInlineEnd = "";
-    } else {
-      this.contentArea.style.marginInlineEnd = `${this._state.collapsedLauncherWidth + CONTENT_AREA_OUTLINE_WIDTH}px`;
-      this.contentArea.style.marginInlineStart = "";
-    }
+    browserEl.style.setProperty(
+      "--sidebar-launcher-collapsed-width",
+      `${collapsedWidth}px`
+    );
   },
 
-  async toggleExpandOnHover(isEnabled) {
-    this.setPosition();
+  async toggleExpandOnHover(isEnabled, isDragEnded) {
+    document.documentElement.toggleAttribute(
+      "sidebar-expand-on-hover",
+      isEnabled
+    );
     if (isEnabled) {
-      this.sidebarWrapper.classList.add("expandOnHover");
       if (!this._state) {
         this._state = new this.SidebarState(this);
       }
+      this.sidebarContainer.addEventListener("mouseover", this.onMouseOver);
 
       await this.sidebarMain.updateComplete;
       await this._waitForOngoingAnimations();
-      await this.setLauncherInlineMargin();
-
-      this.sidebarMain.addEventListener("mouseover", this.onMouseOver, {
-        once: true,
-      });
+      if (!isDragEnded) {
+        await this.setLauncherCollapsedWidth();
+      }
     } else {
-      this.sidebarWrapper.classList.remove("expandOnHover");
-      this.sidebarMain.removeEventListener("mouseover", this.onMouseOver);
-      this.contentArea.style.marginInlineStart = "";
-      this.contentArea.style.marginInlineEnd = "";
+      this.sidebarContainer.removeEventListener("mouseover", this.onMouseOver);
     }
   },
 
diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css
index 9fc7f81df68a..0236931cff61 100644
--- a/browser/themes/shared/sidebar.css
+++ b/browser/themes/shared/sidebar.css
@@ -23,7 +23,7 @@
     position: relative;
     z-index: var(--browser-area-z-index-sidebar);
 
-    &[positionend] {
+    &[sidebar-positionend] {
       padding-inline: 0;
       margin-inline-start: var(--space-small);
     }
@@ -95,7 +95,7 @@
     margin-inline-start: calc(-1 * var(--splitter-width));
     position: relative;
 
-    #sidebar-box[positionend] + & {
+    #sidebar-box[sidebar-positionend] + & {
       border-inline-width: 1px 0;
       margin-inline: 0 calc(-1 * var(--splitter-width));
     }
@@ -234,26 +234,32 @@ sidebar-main,
 
 /* Expand on hover */
 
-#sidebar-wrapper {
-  display: contents;
-
-  &.expandOnHover {
-    position: absolute;
-    display: flex;
+:root[sidebar-expand-on-hover] {
+  #sidebar-main {
+    border-radius: inherit;
+    background-color: inherit;
+    position: relative;
     inset: 0;
     inset-inline-end: unset;
-    z-index: var(--browser-area-z-index-sidebar-wrapper);
 
-    &:not([positionend]):hover {
-      border-start-end-radius: var(--border-radius-medium);
-      border-end-end-radius: var(--border-radius-medium);
-      border-inline-end: 0.01px solid var(--chrome-content-separator-color);
-    }
+    /* We only want to apply these styles in two scenarios:
+      * When the sidebar is expanded AND hovered
+      * When the sidebar is in the process of moving from expanded to collapsed
+    */
+    &[sidebar-launcher-expanded]:hover,
+    &[sidebar-ongoing-animations]:not([sidebar-launcher-expanded]) {
+      z-index: var(--browser-area-z-index-sidebar-wrapper);
+      position: absolute;
+      color: var(--toolbox-textcolor);
+      background-color: var(--toolbox-bgcolor);
 
-    &[positionend]:hover {
-      border-start-start-radius: var(--border-radius-medium);
-      border-start-end-radius: var(--border-radius-medium);
-      border-inline-start: 0.01px solid var(--chrome-content-separator-color);
+      &:not([sidebar-positionend]) {
+        border-inline-end: 0.01px solid var(--sidebar-border-color);
+      }
+
+      &[sidebar-positionend] {
+        border-inline-start: 0.01px solid var(--sidebar-border-color);
+      }
     }
 
     :root[lwtheme] & {
@@ -268,24 +274,80 @@ sidebar-main,
       }
     }
 
-    &:hover,
-    &.ongoing-animations {
-      color: var(--toolbox-textcolor);
-      background-color: var(--toolbox-bgcolor);
-    }
-
-    #sidebar-main {
-      border-radius: inherit;
-      background-color: inherit;
-
-      &:hover {
-        box-shadow: var(--content-area-shadow);
-      }
-    }
-
-    &[positionend] {
+    &[sidebar-positionend] {
       inset-inline-start: unset;
       inset-inline-end: 0;
     }
   }
+
+  #sidebar-launcher-splitter[sidebar-launcher-expanded] {
+    display: none;
+  }
+
+  /* We add margin to compensate for the launcher width to the element next to it.
+  The element next to it can be the sidebar box or the tabbox,
+  depending on whether the sidebar box is expanded */
+  #tabbrowser-tabbox {
+    &:not([sidebar-positionend]) {
+      &:not([sidebar-panel-open]) {
+        margin-inline-start: 0;
+      }
+
+      &[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]),
+      &[sidebar-ongoing-animations]:not([sidebar-launcher-expanded], [sidebar-panel-open]) {
+        margin-inline-start: var(--sidebar-launcher-collapsed-width);
+      }
+    }
+
+    &[sidebar-positionend] {
+      &:not([sidebar-panel-open]) {
+        margin-inline-end: 0;
+      }
+
+      &[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]),
+      &[sidebar-ongoing-animations]:not([sidebar-panel-open], [sidebar-launcher-expanded]) {
+        margin-inline-end: var(--sidebar-launcher-collapsed-width);
+      }
+    }
+  }
+
+  #sidebar-box {
+    &:not([sidebar-positionend]) {
+      &[sidebar-panel-open] {
+        margin-inline-start: 0;
+      }
+
+      &[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded],
+      &[sidebar-ongoing-animations][sidebar-panel-open] {
+        margin-inline-start: var(--sidebar-launcher-collapsed-width);
+      }
+    }
+
+    &[sidebar-positionend] {
+      &[sidebar-panel-open] {
+        margin-inline-end: 0;
+      }
+
+      &[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded],
+      &[sidebar-ongoing-animations][sidebar-panel-open] {
+        margin-inline-end: var(--sidebar-launcher-collapsed-width);
+      }
+    }
+  }
 }
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media -moz-pref("sidebar.visibility", "expand-on-hover") {
+    /* We need these rules to apply at all times when the sidebar.visibility
+    pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+    has been added to root. There are certain scenarios when that attribute is temporarily
+    removed from root such as when toggling the sidebar to expand with the toolbar button. */
+    #sidebar-box {
+      --sidebar-border-color: light-dark(rgb(207, 207, 216), rgb(82, 82, 94));
+      > #sidebar {
+        box-shadow: none;
+        margin-block-start: 1px;
+        border: 0.5px solid var(--sidebar-border-color);
+      }
+    }
+  }
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
index 8bd5894142ed..ba4b1ef9a37d 100644
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -236,11 +236,18 @@
     z-index: 2;
   }
 
-  &:is([muted], [soundplaying], [activemedia-blocked]) {
-    --tab-icon-end-margin: 2px;
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
+    /* We need these rules to apply at all times when the sidebar.visibility
+    pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+    has not been added to root. There are certain scenarios when that attribute is temporarily
+    removed from root such as when toggling the sidebar to expand with the toolbar button. */
+    &:is([muted], [soundplaying], [activemedia-blocked]) {
+      --tab-icon-end-margin: 2px;
 
-    #tabbrowser-tabs[orient=horizontal] &:not([pinned]) {
-      min-width: max(var(--tab-min-width-pref, var(--tab-min-width)), 100px);
+      #tabbrowser-tabs[orient=horizontal] &:not([pinned]) {
+        min-width: max(var(--tab-min-width-pref, var(--tab-min-width)), 100px);
+      }
     }
   }
 }
@@ -253,7 +260,7 @@
     min-width: 0;
   }
 
-  :root:not([uidensity=compact]) &[pinned] {
+  :root:not([uidensity=compact], [sidebar-expand-on-hover]) &[pinned] {
     padding: 0 10px;
   }
 
@@ -348,13 +355,26 @@
   height: 16px;
   width: 16px;
 
-  /* apply end margin to not-pinned tabs which are:
-     - oriented horizontally, or
-     - vertical but expanded
+  /* apply end margin to tabs which are:
+     - oriented horizontally and not pinned
+     - vertical but expanded and not pinned
+     - expand on hover enabled, vertical but expanded
   */
-  #tabbrowser-tabs:is([orient="horizontal"], [orient="vertical"][expanded]) &:not([pinned]) {
+  #tabbrowser-tabs[orient="horizontal"] &:not([pinned]),
+  :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]) {
     margin-inline-end: var(--tab-icon-end-margin);
   }
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media -moz-pref("sidebar.visibility", "expand-on-hover") {
+    /* We need these rules to apply at all times when the sidebar.visibility
+    pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+    has been added to root. There are certain scenarios when that attribute is temporarily
+    removed from root such as when toggling the sidebar to expand with the toolbar button. */
+    #tabbrowser-tabs[orient="vertical"][expanded] & {
+      margin-inline-end: var(--tab-icon-end-margin);
+    }
+  }
 }
 
 .tab-throbber {
@@ -593,11 +613,93 @@
     }
   }
 
-  #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]),
   &[pinned]:is([soundplaying], [muted], [activemedia-blocked]),
   &[crashed] {
     display: revert;
   }
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media -moz-pref("sidebar.visibility", "expand-on-hover") {
+    /* We need these rules to apply at all times when the sidebar.visibility
+    pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+    has been added to root. There are certain scenarios when that attribute is temporarily
+    removed from root such as when toggling the sidebar to expand with the toolbar button. */
+    #tabbrowser-tabs[orient="vertical"] &:is([soundplaying], [muted], [activemedia-blocked]) {
+      display: revert;
+    }
+
+    #tabbrowser-tabs[orient="vertical"] &:not([crashed]) {
+      &[soundplaying] {
+        list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+      }
+
+      &[muted] {
+        list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+      }
+
+      &[activemedia-blocked] {
+        list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
+      }
+
+      &:is([soundplaying], [muted], [activemedia-blocked]) {
+        /* We want to make this look like the selected tab, but fully opaque. For that,
+         * we build a stack of `--lwt-accent-color` (guaranteed opaque), then
+         * `--toolbox-bgcolor`, then `--tab-selected-bgcolor`.
+         *
+         * We rely on at least one of `--toolbox-bgcolor` / `--tab-selected-bgcolor`
+         * being opaque on the system themes, so even though `--lwt-accent-color` is
+         * not set there, it ends up working out because we never see it through.
+         *
+         * We also apply one extra color on top (--audio-overlay-extra-background)
+         * for hover / active feedback.
+         */
+         --audio-overlay-extra-background: transparent;
+        background-color: var(--lwt-accent-color);
+        background-image: linear-gradient(var(--audio-overlay-extra-background)),
+                          linear-gradient(var(--toolbox-bgcolor));
+        -moz-context-properties: fill;
+        fill: var(--tab-selected-textcolor);
+        color-scheme: var(--tab-selected-color-scheme);
+        border-radius: var(--border-radius-circle);
+
+        .browser-toolbox-background:-moz-window-inactive &:not([selected]) {
+          background-image: linear-gradient(var(--audio-overlay-extra-background)),
+                            linear-gradient(var(--toolbox-bgcolor-inactive));
+        }
+
+        &:hover {
+          --audio-overlay-extra-background: var(--button-background-color-ghost-hover);
+        }
+
+        &:hover:active {
+          --audio-overlay-extra-background: var(--button-background-color-ghost-active);
+        }
+
+        &[selected] {
+          background-image: linear-gradient(var(--audio-overlay-extra-background)),
+                            linear-gradient(var(--tab-selected-bgcolor)),
+                            linear-gradient(var(--toolbox-bgcolor));
+        }
+
+        .browser-toolbox-background:-moz-window-inactive &[selected] {
+          background-image: linear-gradient(var(--audio-overlay-extra-background)),
+                          linear-gradient(var(--tab-selected-bgcolor)),
+                          linear-gradient(var(--toolbox-bgcolor-inactive));
+        }
+      }
+    }
+  }
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
+    /* We need these rules to apply at all times when the sidebar.visibility
+    pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+    has not been added to root. There are certain scenarios when that attribute is temporarily
+    removed from root such as when toggling the sidebar to expand with the toolbar button. */
+    #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]) {
+      display: revert;
+    }
+  }
 }
 
 .tab-audio-button {
@@ -608,23 +710,31 @@
   --button-min-height-small: 24px;
   --button-border-radius: var(--border-radius-small);
 
-  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
-    &:is([soundplaying], [muted], [activemedia-blocked]) {
-      display: block;
-    }
+    /* stylelint-disable-next-line media-query-no-invalid */
+    @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
+      /* We need these rules to apply at all times when the sidebar.visibility
+      pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+      has not been added to root. There are certain scenarios when that attribute is temporarily
+      removed from root such as when toggling the sidebar to expand with the toolbar button. */
+      #tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]),
+      :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) {
+        &:is([soundplaying], [muted], [activemedia-blocked]) {
+          display: block;
+        }
 
-    &[soundplaying]::part(button) {
-      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
-    }
+        &[soundplaying]::part(button) {
+          background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+        }
 
-    &[muted]::part(button) {
-      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
-    }
+        &[muted]::part(button) {
+          background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+        }
 
-    &[activemedia-blocked]::part(button) {
-      background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
+        &[activemedia-blocked]::part(button) {
+          background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
+        }
+      }
     }
-  }
 }
 
 .tab-label-container {
@@ -669,7 +779,8 @@
   border-radius: var(--tab-border-radius);
   list-style-image: url(chrome://global/skin/icons/close-12.svg);
 
-  &[pinned],
+  #tabbrowser-tabs[orient="horizontal"] &[pinned],
+  :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"] &[pinned],
   #tabbrowser-tabs[closebuttons="activetab"][orient="horizontal"] &:not([selected]) {
     display: none;
   }
@@ -1274,93 +1385,104 @@
 }
 
 #vertical-pinned-tabs-container {
-  /* Fit slightly more than 5 tabs + padding before overflowing */
-  max-height: calc(5 * var(--tabstrip-min-height) + var(--space-large));
-  --tab-inline-padding: calc(
-    (
-      calc(
-          var(--tab-collapsed-background-width) + 2 *
-            var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)
-        ) /
-        2
-    )
-  );
+  :root:not([sidebar-expand-on-hover]) & {
+    /* Fit slightly more than 5 tabs + padding before overflowing */
+    max-height: calc(5 * var(--tabstrip-min-height) + var(--space-large));
+    --tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 *
+    var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2);
 
-  &:empty {
-    display: none;
-  }
-
-  &::part(scrollbutton-up),
-  &::part(scrollbutton-down) {
-    display: none;
-  }
-
-  &::part(scrollbox) {
-    scrollbar-width: thin;
-    scrollbar-color: var(--vertical-tabs-scrollbar-color);
-    overflow-y: auto;
-  }
-
-  &::part(items-wrapper) {
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(var(--tab-pinned-min-width-expanded), auto)
-    );
-    display: grid;
-  }
-
-  &:not([scrolledtostart])::part(overflow-start-indicator),
-  &:not([scrolledtoend])::part(overflow-end-indicator) {
-    background-image: linear-gradient(
-      to top,
-      transparent 0%,
-      var(--toolbox-bgcolor)
-    );
-    background-repeat: no-repeat;
-    pointer-events: none;
-    position: relative;
-    height: 16px;
-    z-index: 1;
-  }
-
-  &::part(overflow-start-indicator) {
-    margin-block: 0 -16px;
-  }
-
-  &::part(overflow-end-indicator) {
-    transform: scaleY(-1);
-    margin-block: -16px 0;
-  }
-
-  .tab-content {
-    justify-content: center;
-  }
-
-  #tabbrowser-tabs[orient="vertical"] > &:not(:empty) {
-    display: grid;
-  }
-
-  .tab-label-container {
-    display: none;
-  }
-
-  .tab-background {
-    border-radius: var(--border-radius-medium);
-
-    .tabbrowser-tab:not(:hover) > .tab-stack > &:not([selected], [multiselected]) {
-      background-color: color-mix(in srgb, currentColor 7%, transparent);
+    &:empty {
+      display: none;
+    }
+
+    &::part(scrollbutton-up),
+    &::part(scrollbutton-down) {
+      display: none;
+    }
+
+    &::part(scrollbox) {
+      scrollbar-width: thin;
+      scrollbar-color: var(--vertical-tabs-scrollbar-color);
+      overflow-y: auto;
+    }
+
+    /* stylelint-disable-next-line media-query-no-invalid */
+    @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
+      /* We need these rules to apply at all times when the sidebar.visibility
+      pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+      has not been added to root. There are certain scenarios when that attribute is temporarily
+      removed from root such as when toggling the sidebar to expand with the toolbar button. */
+      &::part(items-wrapper) {
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(var(--tab-pinned-min-width-expanded), auto)
+        );
+        display: grid;
+      }
+
+      .tab-label-container {
+        display: none;
+      }
+    }
+
+    &:not([scrolledtostart])::part(overflow-start-indicator),
+    &:not([scrolledtoend])::part(overflow-end-indicator) {
+      background-image: linear-gradient(
+        to top,
+        transparent 0%,
+        var(--toolbox-bgcolor)
+      );
+      background-repeat: no-repeat;
+      pointer-events: none;
+      position: relative;
+      height: 16px;
+      z-index: 1;
+    }
+
+    &::part(overflow-start-indicator) {
+      margin-block: 0 -16px;
+    }
+
+    &::part(overflow-end-indicator) {
+      transform: scaleY(-1);
+      margin-block: -16px 0;
+    }
+
+    .tab-content {
+      justify-content: center;
+    }
+
+    #tabbrowser-tabs[orient="vertical"] > &:not(:empty) {
+      display: grid;
     }
-  }
 
-  #tabbrowser-tabs[expanded] > & {
     .tab-background {
-      margin-inline: var(--tab-pinned-margin-inline-expanded);
+      border-radius: var(--border-radius-medium);
+
+      .tabbrowser-tab:not(:hover) > .tab-stack > &:not([selected], [multiselected]) {
+        background-color: color-mix(in srgb, currentColor 7%, transparent);
+      }
     }
 
-    &::part(items-wrapper) {
-      padding-inline: var(--tab-pinned-container-margin-inline-expanded);
+    #tabbrowser-tabs[expanded] > & {
+      .tab-background {
+        margin-inline: var(--tab-pinned-margin-inline-expanded);
+      }
+
+      &::part(items-wrapper) {
+        padding-inline: var(--tab-pinned-container-margin-inline-expanded);
+      }
     }
   }
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media -moz-pref("sidebar.visibility", "expand-on-hover") {
+    /* We need this rule to apply at all times when the sidebar.visibility
+    pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+    has been added to root. There are certain scenarios when that attribute is temporarily
+    removed from root such as when toggling the sidebar to expand with the toolbar button. */
+    grid-template-columns: 1fr;
+  }
 }
 
 #vertical-pinned-tabs-container-separator {
@@ -1368,10 +1490,20 @@
   border-bottom: var(--tabstrip-inner-border);
   margin-inline: var(--tab-inner-inline-margin);
 
-  #tabbrowser-tabs[expanded] > &,
   #vertical-pinned-tabs-container:empty + & {
     display: none;
   }
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
+  /* We need these rules to apply at all times when the sidebar.visibility
+  pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+  has not been added to root. There are certain scenarios when that attribute is temporarily
+  removed from root such as when toggling the sidebar to expand with the toolbar button. */
+    #tabbrowser-tabs[expanded] > & {
+      display: none;
+    }
+  }
 }
 
 #tabbrowser-tabs[orient="vertical"] {
@@ -1489,7 +1621,11 @@
         not be shown when expand on hover is enabled because once
         you hover over the launcher to use the button, the launcher
         starts to expand and the button is no longer shown. Users can
-        rely on the close button within the tab once expanded. */
+        rely on the close button within the tab once expanded.
+         We need this rule to apply at all times when the sidebar.visibility
+    pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
+    has been added to root. There are certain scenarios when that attribute is temporarily
+    removed from root such as when toggling the sidebar to expand with the toolbar button. */
         display: none;
       }
     }