Backed out changeset 75ec289e02ef (bug 1947818) for causing mochitests failures in browser_customize_sidebar.js. CLOSED TREE

browser/base/content/test/sidebar/browser_sidebar_move.js

@@ -4,8 +4,8 @@ registerCleanupFunction(() => {
 });
 
 const EXPECTED_START_ORDINALS = [
-  ["sidebar-wrapper", ""],
+  ["sidebar-wrapper", 1],
-  ["tabbrowser-tabbox", 6],
+  ["tabbrowser-tabbox", 2],
 ];
 
 const EXPECTED_WRAPPER_START_ORDINALS = [
@@ -17,16 +17,16 @@ const EXPECTED_WRAPPER_START_ORDINALS = [
 ];
 
 const EXPECTED_END_ORDINALS = [
-  ["sidebar-wrapper", ""],
+  ["sidebar-wrapper", 2],
   ["tabbrowser-tabbox", 1],
 ];
 
 const EXPECTED_WRAPPER_END_ORDINALS = [
-  ["sidebar-main", 6],
+  ["sidebar-main", 7],
-  ["sidebar-launcher-splitter", 4],
+  ["sidebar-launcher-splitter", 6],
-  ["sidebar-box", 3],
+  ["sidebar-box", 5],
-  ["sidebar-splitter", 2],
+  ["sidebar-splitter", 4],
-  ["after-splitter", 5],
+  ["after-splitter", 3],
 ];
 
 function getBrowserChildrenWithOrdinals() {

browser/components/sidebar/browser-sidebar.js

@@ -710,14 +710,6 @@ 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;
@@ -725,42 +717,28 @@ var SidebarController = {
     [...this.sidebarWrapper.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
+      // DOM ordering is:     sidebar-main | launcher-splitter | sidebar-box | splitter | after-splitter |
+      // Want to display as:  after-splitter | splitter |  sidebar-box  | launcher-splitter | sidebar-main
+      // First swap sidebar-box and after-splitter
       let afterSplitter = document.getElementById("after-splitter");
-        let mainOrdinal = parseInt(this.sidebarContainer.style.order);
+      let boxOrdinal = this._box.style.order;
-        this.sidebarContainer.style.order = parseInt(afterSplitter.style.order);
+      this._box.style.order = afterSplitter.style.order;
-        afterSplitter.style.order = mainOrdinal;
+      afterSplitter.style.order = boxOrdinal;
 
-        // Then swap launcher-splitter and splitter
+      // Then move the launcher-splitter to the right of sidebar-box
-        const launcherSplitterOrdinal = parseInt(
+      const launcherSplitterOrdinal = parseInt(this._box.style.order) + 1;
-          this._launcherSplitter.style.order
+      this._launcherSplitter.style.order = launcherSplitterOrdinal;
-        );
+
-        this._launcherSplitter.style.order = parseInt(
+      // Finally move the launcher to the right of the launcher-splitter
-          this._splitter.style.order
+      sidebarContainer.style.order = parseInt(launcherSplitterOrdinal) + 1;
-        );
-        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 = 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("positionend", true);
@@ -1949,9 +1927,9 @@ var SidebarController = {
   },
 
   async toggleExpandOnHover(isEnabled) {
-    this.setPosition();
     if (isEnabled) {
       this.sidebarWrapper.classList.add("expandOnHover");
+
       if (!this._state) {
         this._state = new this.SidebarState(this);
       }

browser/components/sidebar/tests/browser/browser_sidebar_position.js

@@ -31,8 +31,8 @@ add_task(async function test_sidebar_position_end() {
   ok(sidebar, "Sidebar is shown.");
   await sidebar.updateComplete;
 
-  is(sidebar.style.order, "6", "Sidebar is shown at the end");
+  is(sidebar.style.order, "7", "Sidebar is shown at the end");
-  is(sidebarBox.style.order, "3", "Sidebar is shown at the end");
+  is(sidebarBox.style.order, "5", "Sidebar is shown at the end");
 
   await BrowserTestUtils.closeWindow(win);
 });
@@ -45,8 +45,8 @@ add_task(async function test_sidebar_position_end_new_window() {
   ok(sidebar, "Sidebar is shown.");
   await sidebar.updateComplete;
 
-  is(sidebar.style.order, "6", "Sidebar is shown at the end");
+  is(sidebar.style.order, "7", "Sidebar is shown at the end");
-  is(sidebarBox.style.order, "3", "Sidebar is shown at the end");
+  is(sidebarBox.style.order, "5", "Sidebar is shown at the end");
 
   await BrowserTestUtils.closeWindow(win);
 });

browser/themes/shared/sidebar.css

@@ -235,11 +235,10 @@ sidebar-main,
 /* Expand on hover */
 
 #sidebar-wrapper {
-  display: contents;
+  position: relative;
 
   &.expandOnHover {
     position: absolute;
-    display: flex;
     inset: 0;
     inset-inline-end: unset;
     z-index: var(--browser-area-z-index-sidebar-wrapper);