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

Backed out changeset ac1633f93f5c (bug 1933479) for causing bc failures @ browser_sidebar_collapsed_close_tab_button.js CLOSED TREE

Browse Source
This commit is contained in:
Alexandru Marc
2025-01-10 23:20:43 +02:00
parent b1eb1e8f71
commit 7ef1c829eb
3 changed files with 5 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

81
browser/components/sidebar/tests/browser/browser_sidebar_collapsed_close_tab_button.js
View File

@@ -1,81 +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.verticalTabs", true],
["sidebar.visibility", "always-show"],
],
});
});
registerCleanupFunction(async () => {
await SpecialPowers.popPrefEnv();
gBrowser.removeAllTabsBut(gBrowser.tabs[0]);
});
add_task(async function test_toggle_collapse_close_button() {
const sidebar = document.querySelector("sidebar-main");
ok(sidebar, "Sidebar is shown.");
if (window.SidebarController._state.launcherExpanded) {
await SidebarController.setUIState({ expanded: false });
await sidebar.updateComplete;
}
ok(!sidebar.expanded, "Sidebar is collapsed by default.");
let newTabButton = document.getElementById("tabs-newtab-button");
info("Open a new tab using the new tab button.");
EventUtils.synthesizeMouseAtCenter(newTabButton, {});
is(gBrowser.tabs.length, 2, "Tabstrip now has two tabs");
let firstTab = gBrowser.visibleTabs[0];
let computedStyle = window.getComputedStyle(
gBrowser.selectedTab.querySelector(".tab-close-button")
);
is(computedStyle.opacity, "1", "The active tab is showing the close button.");
computedStyle = window.getComputedStyle(
firstTab.querySelector(".tab-close-button")
);
is(
computedStyle.opacity,
"0",
"The inactive tab is not showing the close button."
);
// Check that collapsed close button is shown on hover of the inactive tab
EventUtils.synthesizeMouse(firstTab, 10, 10, { type: "mouseover" });
computedStyle = window.getComputedStyle(
firstTab.querySelector(".tab-close-button")
);
is(
computedStyle.opacity,
"1",
"The inactive tab is showing the close button on hover."
);
// Close the active tab
EventUtils.synthesizeMouseAtCenter(
gBrowser.selectedTab.querySelector(".tab-close-button"),
{}
);
is(gBrowser.tabs.length, 1, "Tabstrip now has one tab");
// Expand the sidebar and make sure the collased close button no longer shows
await SidebarController.setUIState({ expanded: true });
await sidebar.updateComplete;
await TestUtils.waitForCondition(() => {
return window.SidebarController._state.launcherExpanded;
}, "Sidebar launcher is expanded");
computedStyle = window.getComputedStyle(
gBrowser.selectedTab.querySelector(".tab-close-button")
);
is(
computedStyle.position,
"static",
"The active tab is showing the collapsed close button when the sidebar is expanded."
);
});

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

@@ -50,10 +50,6 @@
--tab-outline-offset: -1px;
--tab-selected-outline-color: transparent;
--tab-hover-outline-color: transparent;
--tab-attention-dot-position-x: calc(50% + 11px);
&:-moz-locale-dir(rtl) {
--tab-attention-dot-position-x: calc(50% - 11px);
}
@media (prefers-contrast) {
--tab-selected-outline-color: currentColor;
--tab-hover-outline-color: currentColor;
@@ -235,7 +231,6 @@
}
.tab-content {
position: relative;
padding: 0 var(--tab-inline-padding);
&:not([pinned]) {
@@ -499,10 +494,6 @@
position: relative;
padding: 2px;
#tabbrowser-tabs[orient=vertical] & {
top: 7px;
}
&[crashed] {
list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
}
@@ -609,10 +600,9 @@
margin-inline-end: calc(var(--tab-inline-padding) / -2);
width: 24px;
height: 24px;
box-sizing: border-box;
padding: var(--tab-close-button-padding);
border-radius: var(--tab-border-radius);
content: url(chrome://global/skin/icons/close-12.svg);
list-style-image: url(chrome://global/skin/icons/close-12.svg);
&[pinned],
#tabbrowser-tabs[closebuttons="activetab"][orient="horizontal"] &:not([selected]) {
@@ -735,8 +725,7 @@
background-repeat: no-repeat;
#tabbrowser-tabs[orient="vertical"] & {
background-position-y: 6px;
background-position-x: var(--tab-attention-dot-position-x);
background-position-y: bottom 4px;
}
}
@@ -1295,8 +1284,7 @@
&:not([expanded]) {
.tabbrowser-tab {
padding-inline: 0;
padding-block: 2px;
padding: 0;
&[pinned] {
width: var(--tab-collapsed-width);
@@ -1307,44 +1295,9 @@
width: var(--tab-collapsed-background-width);
}
.tab-label-container {
display: none;
}
.tab-label-container,
.tab-close-button {
opacity: 0;
width: 16px;
height: 16px;
padding: 4px;
margin: 0;
fill: var(--tab-selected-textcolor);
/* 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.
*/
background-color: var(--lwt-accent-color);
background-image: linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
color-scheme: var(--tab-selected-color-scheme);
outline-color: var(--tab-selected-outline-color);
box-shadow: var(--tab-selected-shadow);
border-radius: var(--border-radius-circle);
display: block;
position: absolute;
inset: auto;
top: -1px;
inset-inline-start: 2px;
.browser-toolbox-background:-moz-window-inactive & {
background-image: linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive));
}
.tabbrowser-tab:is([selected], :hover) & {
opacity: 1;
}
display: none;
}
}