Backed out changeset 25d954644545 (bug 1892953) for causing mochitests failures in browser_sidebar_move.js. CLOSED TREE

browser/base/content/browser-box.inc.xhtml

@@ -5,10 +5,9 @@
 <hbox flex="1" id="browser">
   <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>
+    <box id="vertical-tabs" slot="tabstrip" customizable="true" contextmenu="toolbar-context-menu"></box>
-    </html:sidebar-main>
+  </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">

browser/components/sessionstore/SessionStore.sys.mjs

@@ -4708,7 +4708,6 @@ var SessionStoreInternal = {
       winData.sidebar = Object.assign(winData.sidebar || {}, {
         expanded: aWindow.SidebarController.sidebarMain.expanded,
         hidden: aWindow.SidebarController.sidebarContainer.hidden,
-        launcherWidth: aWindow.SidebarController.launcherWidth,
       });
     }
 

browser/components/sidebar/browser-sidebar.js

@@ -15,9 +15,6 @@ const defaultTools = {
   viewBookmarksSidebar: "bookmarks",
 };
 
-const LAUNCHER_MINIMUM_WIDTH = 100;
-const SIDEBAR_MAXIMUM_WIDTH = "75vw";
-
 var SidebarController = {
   makeSidebar({ elementId, ...rest }) {
     return {
@@ -250,7 +247,6 @@ var SidebarController = {
   _mainResizeObserverAdded: false,
   _mainResizeObserver: null,
   _ongoingAnimations: [],
-  launcherWidth: null,
 
   /**
    * @type {MutationObserver | null}
@@ -294,19 +290,12 @@ var SidebarController = {
     return this._toolbarButton;
   },
 
-  get isLauncherDragging() {
-    return this._launcherSplitter.getAttribute("state") === "dragging";
-  },
-
   init() {
     // Initialize with side effects
     this.SidebarManager;
 
     this._box = document.getElementById("sidebar-box");
     this._splitter = document.getElementById("sidebar-splitter");
-    this._launcherSplitter = document.getElementById(
-      "sidebar-launcher-splitter"
-    );
     this._reversePositionButton = document.getElementById(
       "sidebar-reverse-position"
     );
@@ -340,9 +329,10 @@ var SidebarController = {
     if (this._mainResizeObserver) {
       this._mainResizeObserver.disconnect();
     }
-    this._mainResizeObserver = new ResizeObserver(([entry]) =>
+    this._mainResizeObserver = new ResizeObserver(async ([entry]) => {
-      this._handleLauncherResize(entry)
+      let sidebarBox = document.getElementById("sidebar-box");
-    );
+      sidebarBox.style.maxWidth = `calc(75vw - ${entry.contentBoxSize[0].inlineSize}px)`;
+    });
 
     if (this.sidebarRevampEnabled) {
       if (!customElements.get("sidebar-main")) {
@@ -375,8 +365,6 @@ var SidebarController = {
         };
         this._splitter.addEventListener("command", this._browserResizeObserver);
       }
-      this._enableLauncherDragging();
-
       // Record Glean metrics.
       this.recordVisibilitySetting();
       this.recordPositionSetting();
@@ -395,7 +383,6 @@ var SidebarController = {
         });
         this._switcherListenersAdded = true;
       }
-      this._disableLauncherDragging();
     }
     // We need to update the tab strip for vertical tabs during init
     // as there will be no tabstrip-orientation-change event
@@ -469,24 +456,6 @@ var SidebarController = {
       this.sidebarMain.remove();
     }
     this._splitter.removeEventListener("command", this._browserResizeObserver);
-    this._disableLauncherDragging();
-  },
-
-  /**
-   * Handle the launcher being resized (either manually or programmatically).
-   *
-   * @param {ResizeObserverEntry} entry
-   */
-  _handleLauncherResize(entry) {
-    let sidebarBox = document.getElementById("sidebar-box");
-    let launcherWidth = entry.contentBoxSize[0].inlineSize;
-    sidebarBox.style.maxWidth = `calc(${SIDEBAR_MAXIMUM_WIDTH} - ${launcherWidth}px)`;
-    if (this.isLauncherDragging) {
-      this.sidebarMain.toggleAttribute("customWidth", true);
-      // Expand the launcher when it gets wide enough.
-      const expanded = launcherWidth >= LAUNCHER_MINIMUM_WIDTH;
-      this.toggleExpanded(expanded);
-    }
   },
 
   getUIState() {
@@ -494,7 +463,6 @@ var SidebarController = {
     if (this.sidebarRevampEnabled) {
       state.expanded = this.sidebarMain.expanded;
       state.hidden = this.sidebarContainer.hidden;
-      state.launcherWidth = this.launcherWidth;
     }
     return state;
   },
@@ -511,8 +479,6 @@ var SidebarController = {
    *   Whether the sidebar launcher is expanded. (Revamp only)
    * @param {boolean} state.hidden
    *   Whether the sidebar is hidden. (Revamp only)
-   * @param {string} state.launcherWidth
-   *   Launcher width of the sidebar.
    */
   async setUIState(state) {
     if (!state) {
@@ -537,9 +503,6 @@ var SidebarController = {
       // Wait this out to ensure that it is connected to the DOM before making
       // any changes.
       await this.promiseInitialized;
-      if (state.launcherWidth) {
-        this.launcherWidth = state.launcherWidth;
-      }
       if (typeof state.expanded === "boolean") {
         this.toggleExpanded(state.expanded);
       }
@@ -547,7 +510,6 @@ var SidebarController = {
         this.sidebarContainer.hidden = state.hidden;
       }
       this.updateToolbarButton();
-      this._updateLauncherWidth();
     }
     this.uiStateInitialized = true;
   },
@@ -699,18 +661,16 @@ var SidebarController = {
     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 | tabbrowser-tabbox |
+      // DOM ordering is:     sidebar-main |  sidebar-box  | splitter | tabbrowser-tabbox |
-      // Want to display as:  |   tabbrowser-tabbox  | splitter |  sidebar-box  | launcher-splitter | sidebar-main
+      // Want to display as:  |   tabbrowser-tabbox  | splitter |  sidebar-box  | sidebar-main
       // So we just swap box and tabbrowser-tabbox ordering and move sidebar-main to the end
       let tabbox = document.getElementById("tabbrowser-tabbox");
       let boxOrdinal = this._box.style.order;
       this._box.style.order = tabbox.style.order;
 
       tabbox.style.order = boxOrdinal;
-      const launcherSplitterOrdinal = parseInt(this._box.style.order) + 1;
+      // the launcher should be on the right of the sidebar-box
-      this._launcherSplitter.style.order = launcherSplitterOrdinal;
+      sidebarContainer.style.order = parseInt(this._box.style.order) + 1;
-      // the launcher should be on the right of the launcher-splitter
-      sidebarContainer.style.order = launcherSplitterOrdinal + 1;
       // Indicate we've switched ordering to the box
       this._box.toggleAttribute("positionend", true);
       sidebarMain.toggleAttribute("positionend", true);
@@ -806,8 +766,6 @@ var SidebarController = {
       this.promiseInitialized.then(() => {
         this.sidebarContainer.hidden = sourceController.sidebarContainer.hidden;
         this.toggleExpanded(sourceController.sidebarMain.expanded);
-        this.launcherWidth = sourceController.launcherWidth;
-        this._updateLauncherWidth();
       });
     }
 
@@ -1192,77 +1150,6 @@ var SidebarController = {
       this.sidebarMain.expanded
     );
     this.updateToolbarButton();
-    this._updateLauncherWidth();
-  },
-
-  /**
-   * If the sidebar is expanded, resize the launcher to the user-preferred
-   * width (if available). If it is collapsed, reset the launcher width.
-   */
-  _updateLauncherWidth() {
-    if (this.isLauncherDragging) {
-      // Do not resize the launcher if it's currently being dragged.
-      return;
-    }
-    if (this.sidebarMain.expanded && this.launcherWidth) {
-      this.sidebarContainer.style.width = `${this.launcherWidth}px`;
-    } else if (!this.sidebarMain.expanded) {
-      this.sidebarContainer.style.width = "";
-    }
-    const panelWidth = this._box.getBoundingClientRect().width;
-    this.sidebarContainer.style.maxWidth = `calc(${SIDEBAR_MAXIMUM_WIDTH} - ${panelWidth}px)`;
-    this.sidebarMain.toggleAttribute("customWidth", !!this.launcherWidth);
-  },
-
-  /**
-   * Enable the splitter which can be used to resize the launcher.
-   */
-  _enableLauncherDragging() {
-    if (!this._launcherSplitter.hidden) {
-      // Already showing the launcher splitter with observers connected.
-      // Nothing to do.
-      return;
-    }
-    this._panelResizeObserver = new ResizeObserver(([entry]) => {
-      const panelWidth = entry.contentBoxSize[0].inlineSize;
-      this.sidebarContainer.style.maxWidth = `calc(${SIDEBAR_MAXIMUM_WIDTH} - ${panelWidth}px)`;
-    });
-    this._panelResizeObserver.observe(this._box);
-
-    this._launcherDropHandler = () => {
-      const newWidth = this.sidebarContainer.getBoundingClientRect().width;
-      if (newWidth >= LAUNCHER_MINIMUM_WIDTH) {
-        // Persist the new width.
-        this.launcherWidth = newWidth;
-      } else {
-        // Snap back to collapsed state when the new width is too narrow.
-        this.toggleExpanded(false);
-        if (this.sidebarRevampVisibility === "hide-sidebar") {
-          this._toggleHideSidebar();
-        }
-      }
-    };
-    this._launcherSplitter.addEventListener(
-      "command",
-      this._launcherDropHandler
-    );
-
-    this._launcherSplitter.hidden = false;
-  },
-
-  /**
-   * Disable the launcher splitter and remove any active observers.
-   */
-  _disableLauncherDragging() {
-    if (this._panelResizeObserver) {
-      this._panelResizeObserver.disconnect();
-    }
-    this._launcherSplitter.removeEventListener(
-      "command",
-      this._launcherDropHandler
-    );
-
-    this._launcherSplitter.hidden = true;
   },
 
   _loadSidebarExtension(commandID) {

browser/components/sidebar/sidebar-main.css

@@ -11,16 +11,11 @@
   }
 }
 
-:host {
-  width: 100%;
-}
-
 .wrapper {
   display: grid;
   grid-template-rows: auto min-content min-content;
   box-sizing: border-box;
   height: 100%;
-  max-width: 100%;
   padding-inline: 0;
 
   /* stylelint-disable-next-line media-query-no-invalid */
@@ -29,11 +24,7 @@
       /* TODO: Should this be some other pixel value between 5/6? Need to be careful of Linux where font size is larger */
       --tab-pinned-horizontal-count: 5;
       /* TODO: These --space-* tokens should use semantic names shared with tabs.css */
-      width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);
+      min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);
-    }
-
-    :host([customWidth]) & {
-      width: 100%;
     }
   }
 }
@@ -43,8 +34,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: start;
-  max-width: 100%;
-  overflow-x: hidden;
 
   > moz-button:not(.tools-overflow) {
     --button-outer-padding-inline: var(--space-medium);
@@ -107,7 +96,7 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  moz-button::part(moz-button-label) {
+  moz-button::part(label) {
     opacity: 0;
     transition: opacity 300ms ease-in-out;
   }
@@ -123,11 +112,8 @@
     padding-inline: calc((var(--button-size-icon) - var(--icon-size-default)) / 2 - var(--border-width));
   }
 
-  &::part(moz-button-label) {
+  &::part(label) {
     opacity: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }
 

browser/components/sidebar/tests/browser/browser.toml

@@ -20,8 +20,6 @@ prefs = [
 
 ["browser_history_sidebar.js"]
 
-["browser_resize_sidebar.js"]
-
 ["browser_sidebar_context_menu.js"]
 
 ["browser_sidebar_macmenu.js"]

browser/components/sidebar/tests/browser/browser_customize_sidebar.js

@@ -168,8 +168,8 @@ add_task(async function test_customize_position_setting() {
   ok(positionLeft.checked, "The sidebar positioned on the left by default.");
   is(
     sidebarBox.style.order,
-    "3",
+    "2",
-    "Sidebar box should have an order of 3 when on the left"
+    "Sidebar box should have an order of 2 when on the left"
   );
   EventUtils.synthesizeMouseAtCenter(
     positionRight,
@@ -189,8 +189,8 @@ add_task(async function test_customize_position_setting() {
   ok(newPositionRight.checked, "Position setting persists.");
   is(
     newSidebarBox.style.order,
-    "5",
+    "4",
-    "Sidebar box should have an order of 5 when on the right"
+    "Sidebar box should have an order of 4 when on the right"
   );
 
   await BrowserTestUtils.closeWindow(win);

browser/components/sidebar/tests/browser/browser_resize_sidebar.js

@@ -1,94 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   https://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-add_setup(async () => {
-  await SpecialPowers.pushPrefEnv({
-    set: [
-      ["sidebar.visibility", "always-show"],
-      ["sidebar.position_start", true],
-    ],
-  });
-  await SidebarController.setUIState({ expanded: false, hidden: false });
-});
-
-async function dragLauncher(deltaX, shouldExpand) {
-  AccessibilityUtils.setEnv({ mustHaveAccessibleRule: false });
-
-  info(`Drag the launcher by ${deltaX} px.`);
-  const splitter = SidebarController._launcherSplitter;
-  EventUtils.synthesizeMouseAtCenter(splitter, { type: "mousedown" });
-  EventUtils.synthesizeMouse(splitter, deltaX, 0, { type: "mousemove" });
-  // Using synthesizeMouse() sometimes fails to trigger the resize observer,
-  // even if the splitter was dragged successfully. Invoke the resize handler
-  // explicitly to avoid this issue.
-  const resizeEntry = {
-    contentBoxSize: [
-      {
-        inlineSize: SidebarController.sidebarMain.getBoundingClientRect().width,
-      },
-    ],
-  };
-  SidebarController._handleLauncherResize(resizeEntry);
-  await TestUtils.waitForCondition(
-    () => SidebarController.getUIState().expanded == shouldExpand,
-    `The sidebar is ${shouldExpand ? "expanded" : "collapsed"}.`
-  );
-  EventUtils.synthesizeMouse(splitter, 0, 0, { type: "mouseup" });
-
-  AccessibilityUtils.resetEnv();
-}
-
-function getLauncherWidth({ SidebarController } = window) {
-  return SidebarController.sidebarContainer.style.width;
-}
-
-add_task(async function test_drag_expand_and_collapse() {
-  await dragLauncher(200, true);
-  ok(getLauncherWidth(), "Launcher width set.");
-
-  await dragLauncher(-200, false);
-  ok(!getLauncherWidth(), "Launcher width unset.");
-});
-
-add_task(async function test_drag_show_and_hide() {
-  await SpecialPowers.pushPrefEnv({
-    set: [["sidebar.visibility", "hide-sidebar"]],
-  });
-  await SidebarController.setUIState({ expanded: true, hidden: false });
-
-  await dragLauncher(-200, false);
-  ok(SidebarController.getUIState().hidden, "Sidebar is hidden.");
-
-  await SpecialPowers.popPrefEnv();
-});
-
-add_task(async function test_custom_width_persists() {
-  await SidebarController.setUIState({ expanded: false, hidden: false });
-  await dragLauncher(200, true);
-  const customWidth = getLauncherWidth();
-
-  info("Collapse the sidebar using toolbar button.");
-  EventUtils.synthesizeMouseAtCenter(SidebarController.toolbarButton, {});
-  await SidebarController.sidebarMain.updateComplete;
-
-  info("Expand the sidebar using toolbar button.");
-  EventUtils.synthesizeMouseAtCenter(SidebarController.toolbarButton, {});
-  await SidebarController.sidebarMain.updateComplete;
-  Assert.equal(
-    customWidth,
-    getLauncherWidth(),
-    "Sidebar expands to the previously stored custom width."
-  );
-
-  info("Open a new window.");
-  const win = await BrowserTestUtils.openNewBrowserWindow();
-  await win.SidebarController.promiseInitialized;
-  Assert.equal(
-    customWidth,
-    getLauncherWidth(win),
-    "Sidebar expands to the custom width set from the original window."
-  );
-  await BrowserTestUtils.closeWindow(win);
-});

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

@@ -16,7 +16,7 @@ add_task(async function test_sidebar_position_start() {
   await sidebar.updateComplete;
 
   is(sidebar.style.order, "1", "Sidebar is shown at the start");
-  is(sidebarBox.style.order, "3", "Sidebar is shown at the start");
+  is(sidebarBox.style.order, "2", "Sidebar is shown at the start");
 
   await BrowserTestUtils.closeWindow(win);
 });
@@ -31,8 +31,8 @@ add_task(async function test_sidebar_position_end() {
   ok(sidebar, "Sidebar is shown.");
   await sidebar.updateComplete;
 
-  is(sidebar.style.order, "7", "Sidebar is shown at the end");
+  is(sidebar.style.order, "5", "Sidebar is shown at the end");
-  is(sidebarBox.style.order, "5", "Sidebar is shown at the end");
+  is(sidebarBox.style.order, "4", "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, "7", "Sidebar is shown at the end");
+  is(sidebar.style.order, "5", "Sidebar is shown at the end");
-  is(sidebarBox.style.order, "5", "Sidebar is shown at the end");
+  is(sidebarBox.style.order, "4", "Sidebar is shown at the end");
 
   await BrowserTestUtils.closeWindow(win);
 });

browser/themes/shared/sidebar.css

@@ -37,7 +37,6 @@
 #sidebar-main,
 #sidebar-box {
   text-shadow: none;
-  max-width: 75vw;
 
   &:not(.browser-toolbox-background) {
     background-color: var(--sidebar-background-color);
@@ -115,7 +114,7 @@
 
   /* stylelint-disable-next-line media-query-no-invalid */
   @media (-moz-bool-pref: "sidebar.revamp") {
-    --splitter-width: 4px;
+    --splitter-width: 6px;
     transition: background-color 0.5s ease-in-out;
     border-style: none;
 

toolkit/content/widgets/moz-button/moz-button.mjs

@@ -111,11 +111,7 @@ export default class MozButton extends MozLitElement {
           ${this.iconSrc
             ? html`<img src=${this.iconSrc} role="presentation" />`
             : ""}
-          <label
+          <label is="moz-label" shownaccesskey=${ifDefined(this.accessKey)}>
-            is="moz-label"
-            shownaccesskey=${ifDefined(this.accessKey)}
-            part="moz-button-label"
-          >
             ${this.labelTemplate()}
           </label>
         </span>