Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 21:01:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Stanca Serban 2024-11-19 23:52:07 +02:00
parent 34f5d2618f
commit bdd4122ccd
10 changed files with 24 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
browser/base/content/browser-box.inc.xhtml
View File

@ -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>
</html:sidebar-main>
<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">

1
browser/components/sessionstore/SessionStore.sys.mjs
View File

@ -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,
});
}

129
browser/components/sidebar/browser-sidebar.js
View File

@ -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._handleLauncherResize(entry)
);
this._mainResizeObserver = new ResizeObserver(async ([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 |
// Want to display as: | tabbrowser-tabbox | splitter | sidebar-box | launcher-splitter | sidebar-main
// DOM ordering is: sidebar-main | sidebar-box | splitter | tabbrowser-tabbox |
// 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;
this._launcherSplitter.style.order = launcherSplitterOrdinal;
// the launcher should be on the right of the launcher-splitter
sidebarContainer.style.order = launcherSplitterOrdinal + 1;
// the launcher should be on the right of the sidebar-box
sidebarContainer.style.order = parseInt(this._box.style.order) + 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) {

20
browser/components/sidebar/sidebar-main.css
View File

@ -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);
}
:host([customWidth]) & {
width: 100%;
min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);
}
}
}
@ -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;
}
}

2
browser/components/sidebar/tests/browser/browser.toml
View File

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

8
browser/components/sidebar/tests/browser/browser_customize_sidebar.js
View File

@ -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",
"Sidebar box should have an order of 3 when on the left"
"2",
"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",
"Sidebar box should have an order of 5 when on the right"
"4",
"Sidebar box should have an order of 4 when on the right"
);
await BrowserTestUtils.closeWindow(win);

94
browser/components/sidebar/tests/browser/browser_resize_sidebar.js
View File

@ -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);
});

10
browser/components/sidebar/tests/browser/browser_sidebar_position.js
View File

@ -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(sidebarBox.style.order, "5", "Sidebar is shown at the end");
is(sidebar.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(sidebarBox.style.order, "5", "Sidebar is shown at the end");
is(sidebar.style.order, "5", "Sidebar is shown at the end");
is(sidebarBox.style.order, "4", "Sidebar is shown at the end");
await BrowserTestUtils.closeWindow(win);
});

3
browser/themes/shared/sidebar.css
View File

@ -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;

6
toolkit/content/widgets/moz-button/moz-button.mjs
View File

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