corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Bug 1941189 - Make vertical pinned tabs container adjustable r=desktop-theme-reviewers,tabbrowser-reviewers,sidebar-reviewers,jsudiaman,nsharpley,sfoster" for causing bc failures @ browser_resize_sidebar.js

Browse Source 
This reverts commit 5c1d9210e4.
This commit is contained in:
Alexandru Marc
2025-05-02 00:39:05 +03:00
committed by amarc@mozilla.com
parent e9fbc6e999
commit b06c4c0583
5 changed files with 13 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/base/content/navigator-toolbox.inc.xhtml
View File

@@ -57,7 +57,7 @@
# DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
# the current structure that we may want to revisit.
<arrowscrollbox id="vertical-pinned-tabs-container" orient="vertical" tabindex="-1"></arrowscrollbox>
<splitter orient="vertical" id="vertical-pinned-tabs-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
<html:div id="vertical-pinned-tabs-container-separator"></html:div>
<arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
<hbox id="tabbrowser-arrowscrollbox-periphery">

114
browser/components/sidebar/SidebarState.sys.mjs
View File

@@ -32,20 +32,11 @@ XPCOMUtils.defineLazyPreferenceGetter(
* When sidebar.visibility pref value is "always-show", the toolbar button serves to toggle this property
* @property {boolean} launcherDragActive
* Whether the launcher is currently being dragged.
* @property {boolean} pinnedTabsDragActive
* Whether the pinned tabs container is currently being dragged.
* @property {boolean} launcherHoverActive
* Whether the launcher is currently being hovered.
* @property {number} launcherWidth
* Current width of the sidebar launcher.
* @property {number} expandedLauncherWidth
* Width of the expanded launcher
* @property {number} pinnedTabsHeight
* Current height of the pinned tabs container
* @property {number} expandedPinnedTabsHeight
* Height of the pinned tabs container when the sidebar is expanded
* @property {number} collapsedPinnedTabsHeight
* Height of the pinned tabs container when the sidebar is collapsed
*/
const LAUNCHER_MINIMUM_WIDTH = 100;
@@ -75,7 +66,6 @@ export class SidebarState {
launcherHoverActive: false,
launcherVisible: false,
panelOpen: false,
pinnedTabsDragActive: false,
});
/**
@@ -132,26 +122,6 @@ export class SidebarState {
return this.#controller._box;
}
/**
* Get the pinned tabs container element.
*
* @returns {XULElement}
*/
get #pinnedTabsContainerEl() {
return this.#controller._pinnedTabsContainer;
}
/**
* Get the items-wrapper part of the pinned tabs container element.
*
* @returns {XULElement}
*/
get #pinnedTabsItemsWrapper() {
return this.#pinnedTabsContainerEl.shadowRoot.querySelector(
"[part=items-wrapper]"
);
}
/**
* Get window object from the controller.
*/
@@ -223,10 +193,6 @@ export class SidebarState {
case "panelOpen":
// we need to know if we have a command value before finalizing panelOpen
break;
case "expandedPinnedTabsHeight":
case "collapsedPinnedTabsHeight":
this.#updatePinnedTabsHeight();
break;
default:
this[key] = value;
}
@@ -274,9 +240,6 @@ export class SidebarState {
expandedLauncherWidth: convertToInt(this.expandedLauncherWidth),
launcherExpanded: this.launcherExpanded,
launcherVisible: this.launcherVisible,
pinnedTabsHeight: this.pinnedTabsHeight,
expandedPinnedTabsHeight: this.expandedPinnedTabsHeight,
collapsedPinnedTabsHeight: this.collapsedPinnedTabsHeight,
};
// omit any properties with undefined values'
for (let [key, value] of Object.entries(props)) {
@@ -327,24 +290,6 @@ export class SidebarState {
this.#launcherContainerEl.style.maxWidth = `calc(${SIDEBAR_MAXIMUM_WIDTH} - ${width}px)`;
}
get expandedPinnedTabsHeight() {
return this.#props.expandedPinnedTabsHeight;
}
set expandedPinnedTabsHeight(height) {
this.#props.expandedPinnedTabsHeight = height;
this.#updatePinnedTabsHeight();
}
get collapsedPinnedTabsHeight() {
return this.#props.collapsedPinnedTabsHeight;
}
set collapsedPinnedTabsHeight(height) {
this.#props.collapsedPinnedTabsHeight = height;
this.#updatePinnedTabsHeight();
}
get defaultLauncherVisible() {
if (!this.revampEnabled) {
return false;
@@ -445,12 +390,6 @@ export class SidebarState {
if (!this.launcherDragActive) {
this.#updateLauncherWidth();
}
if (
!this.pinnedTabsDragActive &&
this.#controller.sidebarRevampVisibility !== "expand-on-hover"
) {
this.#updatePinnedTabsHeight();
}
}
get launcherDragActive() {
@@ -490,34 +429,6 @@ export class SidebarState {
rootEl.toggleAttribute("sidebar-launcher-drag-active", active);
}
get pinnedTabsDragActive() {
return this.#props.pinnedTabsDragActive;
}
set pinnedTabsDragActive(active) {
this.#props.pinnedDragActive = active;
let itemsWrapperHeight =
this.#controllerGlobal.windowUtils.getBoundsWithoutFlushing(
this.#pinnedTabsItemsWrapper
).height;
if (this.pinnedTabsHeight > itemsWrapperHeight) {
this.pinnedTabsHeight = itemsWrapperHeight;
if (this.#props.launcherExpanded) {
this.expandedPinnedTabsHeight = this.pinnedTabsHeight;
} else {
this.collapsedPinnedTabsHeight = this.pinnedTabsHeight;
}
} else if (!active) {
// Store the user-preferred pinned tabs height.
if (this.#props.launcherExpanded) {
this.expandedPinnedTabsHeight = this.pinnedTabsHeight;
} else {
this.collapsedPinnedTabsHeight = this.pinnedTabsHeight;
}
}
}
get launcherHoverActive() {
return this.#props.launcherHoverActive;
}
@@ -567,31 +478,6 @@ export class SidebarState {
);
}
get pinnedTabsHeight() {
return this.#props.pinnedTabsHeight;
}
set pinnedTabsHeight(height) {
this.#props.pinnedTabsHeight = height;
if (this.launcherExpanded) {
this.expandedPinnedTabsHeight = height;
} else {
this.collapsedPinnedTabsHeight = height;
}
}
/**
* When the sidebar is expanded/collapsed, resize the pinned tabs container to the user-preferred
* height (if available).
*/
#updatePinnedTabsHeight() {
if (this.launcherExpanded && this.expandedPinnedTabsHeight) {
this.#pinnedTabsContainerEl.style.height = `${this.expandedPinnedTabsHeight}px`;
} else if (!this.launcherExpanded && this.collapsedPinnedTabsHeight) {
this.#pinnedTabsContainerEl.style.height = `${this.collapsedPinnedTabsHeight}px`;
}
}
#updateTabbrowser(isSidebarShown) {
this.#controllerGlobal.document
.getElementById("tabbrowser-tabbox")

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

@@ -252,8 +252,6 @@ var SidebarController = {
lastOpenedId: null,
_box: null,
_pinnedTabsContainer: null,
_pinnedTabsItemsWrapper: null,
// The constructor of this label accesses the browser element due to the
// control="sidebar" attribute, so avoid getting this label during startup.
get _title() {
@@ -336,10 +334,6 @@ var SidebarController = {
return this._launcherSplitter.getAttribute("state") === "dragging";
},
get isPinnedTabsDragging() {
return this._pinnedTabsSplitter.getAttribute("state") === "dragging";
},
init() {
// Initialize global state manager.
this.SidebarManager;
@@ -349,21 +343,11 @@ var SidebarController = {
this._state = new this.SidebarState(this);
}
this._pinnedTabsContainer = document.getElementById(
"vertical-pinned-tabs-container"
);
this._pinnedTabsItemsWrapper =
this._pinnedTabsContainer.shadowRoot.querySelector(
"[part=items-wrapper]"
);
this._box = document.getElementById("sidebar-box");
this._splitter = document.getElementById("sidebar-splitter");
this._launcherSplitter = document.getElementById(
"sidebar-launcher-splitter"
);
this._pinnedTabsSplitter = document.getElementById(
"vertical-pinned-tabs-splitter"
);
this._reversePositionButton = document.getElementById(
"sidebar-reverse-position"
);
@@ -432,7 +416,6 @@ var SidebarController = {
this._splitter.addEventListener("command", this._browserResizeObserver);
}
this._enableLauncherDragging();
this._enablePinnedTabsSplitterDragging();
// Record Glean metrics.
this.recordVisibilitySetting();
@@ -453,7 +436,6 @@ var SidebarController = {
this._switcherListenersAdded = true;
}
this._disableLauncherDragging();
this._disablePinnedTabsDragging();
}
// We need to update the tab strip for vertical tabs during init
// as there will be no tabstrip-orientation-change event
@@ -532,7 +514,6 @@ var SidebarController = {
}
this._splitter.removeEventListener("command", this._browserResizeObserver);
this._disableLauncherDragging();
this._disablePinnedTabsDragging();
},
/**
@@ -1332,66 +1313,6 @@ var SidebarController = {
this._launcherSplitter.hidden = false;
},
/**
* Enable the splitter which can be used to resize the pinned tabs container.
*/
_enablePinnedTabsSplitterDragging() {
if (!this._pinnedTabsSplitter.hidden) {
// Already showing the launcher splitter with observers connected.
// Nothing to do.
return;
}
this._pinnedTabsResizeObserver = new ResizeObserver(([entry]) => {
if (this.isPinnedTabsDragging) {
this._state.pinnedTabsDragActive = true;
}
if (
(entry.contentBoxSize[0].blockSize ===
this._state.expandedPinnedTabsHeight &&
this._state.launcherExpanded) ||
(entry.contentBoxSize[0].blockSize ===
this._state.collapsedPinnedTabsHeight &&
!this._state.launcherExpanded)
) {
// condition already met, no need to re-update
return;
}
this._state.pinnedTabsHeight = entry.contentBoxSize[0].blockSize;
});
this._itemsWrapperResizeObserver = new ResizeObserver(async () => {
await window.promiseDocumentFlushed(() => {
// Adjust pinned tabs container height if needed
let itemsWrapperHeight = window.windowUtils.getBoundsWithoutFlushing(
this._pinnedTabsItemsWrapper
).height;
requestAnimationFrame(() => {
if (this._state.pinnedTabsHeight > itemsWrapperHeight) {
this._state.pinnedTabsHeight = itemsWrapperHeight;
if (this._state.launcherExpanded) {
this._state.expandedPinnedTabsHeight =
this._state.pinnedTabsHeight;
} else {
this._state.collapsedPinnedTabsHeight =
this._state.pinnedTabsHeight;
}
}
});
});
});
this._pinnedTabsResizeObserver.observe(this._pinnedTabsContainer);
this._itemsWrapperResizeObserver.observe(this._pinnedTabsItemsWrapper);
this._pinnedTabsDropHandler = () =>
(this._state.pinnedTabsDragActive = false);
this._pinnedTabsSplitter.addEventListener(
"command",
this._pinnedTabsDropHandler
);
this._pinnedTabsSplitter.hidden = false;
},
/**
* Disable the launcher splitter and remove any active observers.
*/
@@ -1407,20 +1328,6 @@ var SidebarController = {
this._launcherSplitter.hidden = true;
},
/**
* Disable the pinned tabs splitter and remove any active observers.
*/
_disablePinnedTabsDragging() {
if (this._pinnedTabsResizeObserver) {
this._pinnedTabsResizeObserver.disconnect();
}
if (this._itemsWrapperResizeObserver) {
this._itemsWrapperResizeObserver.disconnect();
}
this._pinnedTabsSplitter.hidden = true;
},
_loadSidebarExtension(commandID) {
let sidebar = this.sidebars.get(commandID);
if (typeof sidebar?.onload === "function") {
@@ -2113,11 +2020,6 @@ var SidebarController = {
this.mouseOverTask?.finalize();
}
}
document.documentElement.toggleAttribute(
"sidebar-expand-on-hover",
isEnabled
);
},
/**
@@ -2281,11 +2183,6 @@ XPCOMUtils.defineLazyPreferenceGetter(
!SidebarController.inSingleTabWindow
) {
SidebarController.recordTabsLayoutSetting(newValue);
if (newValue) {
SidebarController._enablePinnedTabsSplitterDragging();
} else {
SidebarController._disablePinnedTabsDragging();
}
}
}
);

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

@@ -31,7 +31,7 @@ async function dragLauncher(deltaX, shouldExpand) {
info(`Drag the launcher by ${deltaX} px.`);
const { sidebarMain, _launcherSplitter: splitter } = SidebarController;
EventUtils.synthesizeMouseAtCenter(splitter, { type: "mousedown" });
await mouseMoveInChunksHorizontal(splitter, deltaX, 10);
await mouseMoveInChunks(splitter, deltaX, 10);
EventUtils.synthesizeMouse(splitter, 0, 0, { type: "mouseup" });
info(`The sidebar should be ${shouldExpand ? "expanded" : "collapsed"}.`);
@@ -44,24 +44,7 @@ async function dragLauncher(deltaX, shouldExpand) {
AccessibilityUtils.resetEnv();
}
async function dragPinnedTabs(deltaY) {
AccessibilityUtils.setEnv({ mustHaveAccessibleRule: false });
// Let the pinned tabs splitter stabilize before attempting a drag-and-drop.
await waitForRepaint();
info(`Drag the launcher by ${deltaY} px.`);
const { _pinnedTabsSplitter: splitter } = SidebarController;
EventUtils.synthesizeMouseAtCenter(splitter, { type: "mousedown" });
await mouseMoveInChunksVertical(splitter, deltaY, 10);
EventUtils.synthesizeMouse(splitter, 0, 0, { type: "mouseup" });
info(`The pinned tabs container has been expanded.`);
AccessibilityUtils.resetEnv();
}
async function mouseMoveInChunksHorizontal(el, deltaX, numberOfChunks) {
async function mouseMoveInChunks(el, deltaX, numberOfChunks) {
let chunkIndex = 0;
const chunkSize = deltaX / numberOfChunks;
const finished = Promise.withResolvers();
@@ -81,35 +64,10 @@ async function mouseMoveInChunksHorizontal(el, deltaX, numberOfChunks) {
await finished.promise;
}
async function mouseMoveInChunksVertical(el, deltaY, numberOfChunks) {
let chunkIndex = 0;
const chunkSize = deltaY / numberOfChunks;
const finished = Promise.withResolvers();
function synthesizeMouseMove() {
info(`chunkSize: ${chunkSize}`);
// mousemove by a single chunk. Queue up the next chunk if necessary.
EventUtils.synthesizeMouse(el, 0, chunkSize, { type: "mousemove" });
if (++chunkIndex === numberOfChunks) {
finished.resolve();
} else {
requestAnimationFrame(synthesizeMouseMove);
}
}
await waitForRepaint();
requestAnimationFrame(synthesizeMouseMove);
await finished.promise;
}
function getLauncherWidth({ SidebarController } = window) {
return SidebarController.sidebarContainer.style.width;
}
function getPinnedTabsHeight({ SidebarController } = window) {
return SidebarController._pinnedTabsContainer.clientHeight;
}
add_task(async function test_drag_expand_and_collapse() {
await dragLauncher(200, true);
ok(getLauncherWidth(), "Launcher width set.");
@@ -201,37 +159,4 @@ add_task(async function test_resize_after_toggling_revamp() {
parseInt(originalWidth),
"Vertical tab strip was resized."
);
await dragLauncher(-200, true);
});
add_task(async function test_resize_of_pinned_tabs() {
await SidebarController.initializeUIState({
launcherExpanded: true,
});
info("Open 10 new tabs using the new tab button.");
for (let i = 0; i < 10; i++) {
await BrowserTestUtils.openNewForegroundTab(
gBrowser,
`data:text/html,<title>${i + 1}</title>`
);
gBrowser.pinTab(gBrowser.selectedTab);
}
await SidebarController.waitUntilStable();
info("Resize the pinned tabs container.");
const originalHeight = getPinnedTabsHeight();
await dragPinnedTabs(20, true);
const newHeight = getPinnedTabsHeight();
info(`original: ${originalHeight}, new: ${newHeight}`);
Assert.greater(
parseInt(newHeight),
parseInt(originalHeight),
"Pinned tabs container was resized."
);
while (gBrowser.tabs.length > 1) {
BrowserTestUtils.removeTab(gBrowser.tabs.at(-1));
}
});

34
browser/themes/shared/tabbrowser/tabs.css
View File

@@ -105,8 +105,6 @@
--tab-group-color-gray-pale: #F2F9FF;
--tab-group-label-text-dark: var(--color-gray-100);
/* 5px of padding-block are adding to .tabbrowser-tab */
--tab-height-with-margin-padding: calc(5px + var(--tab-min-height) + (2 * var(--tab-block-margin)));
}
/* stylelint-disable-next-line media-query-no-invalid */
@@ -1353,8 +1351,7 @@ tab-group {
/* Vertical tabs styling */
#tabbrowser-arrowscrollbox[orient="vertical"] {
/* Don't allow resizing below the height of 3 tabs */
min-height: calc(3 * var(--tab-height-with-margin-padding));
min-height: 1px;
&::part(scrollbutton-up),
&::part(scrollbutton-down) {
@@ -1427,8 +1424,8 @@ tab-group {
}
#vertical-pinned-tabs-container {
/* Don't allow resizing below the height of 1 row of pinned tabs */
min-height: var(--tab-height-with-margin-padding);
/* Fit slightly more than 5 tabs + padding before overflowing */
max-height: calc(5 * var(--tabstrip-min-height) + var(--space-large));
&:empty {
display: none;
@@ -1476,10 +1473,6 @@ tab-group {
}
}
&::part(items-wrapper) {
flex: 0 1 0;
}
:root:not([sidebar-expand-on-hover]) & {
--tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 *
var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2);
@@ -1495,7 +1488,6 @@ tab-group {
minmax(var(--tab-pinned-min-width-expanded), auto)
);
display: grid;
grid-auto-rows: var(--tab-height-with-margin-padding);
}
.tab-label-container {
@@ -1532,29 +1524,23 @@ tab-group {
}
}
#vertical-pinned-tabs-splitter {
#vertical-pinned-tabs-container-separator {
display: block;
border-top: var(--tabstrip-inner-border);
border-bottom: var(--tabstrip-inner-border);
margin-inline: var(--tab-inner-inline-margin);
min-height: 2px;
#vertical-pinned-tabs-container:empty + & {
display: none;
}
&:hover {
background-color: var(--focus-outline-color);
border-radius: var(--border-radius-medium);
}
/* 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. */
/* 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] > & {
border: none;
display: none;
}
}
}