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

Bug 1711519 - remove tabbrowser non-proton code and gProton global browser window property, r=jaws

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D116632
This commit is contained in:
Gijs Kruitbosch
2021-06-03 11:41:55 +00:00
parent fc906b8227
commit 3a8f64863a
13 changed files with 39 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
browser/base/content/browser.js
View File

@@ -536,22 +536,6 @@ XPCOMUtils.defineLazyPreferenceGetter(
false
);
/* Work around the pref callback being run after the document has been unlinked.
See bug 1543537. */
var docWeak = Cu.getWeakReference(document);
XPCOMUtils.defineLazyPreferenceGetter(
this,
"gProton",
"browser.proton.enabled",
false,
(pref, oldValue, newValue) => {
let doc = docWeak.get();
if (doc) {
doc.documentElement.toggleAttribute("proton", newValue);
}
}
);
/* Temporary pref while the dust settles around the updated tooltip design
for tabs and bookmarks toolbar. This will eventually be removed and
browser.proton.enabled will be used instead. */
@@ -1682,8 +1666,6 @@ var gBrowserInit = {
document.documentElement.setAttribute("icon", "main-window");
}
document.documentElement.toggleAttribute("proton", gProton);
// Call this after we set attributes that might change toolbars' computed
// text color.
ToolbarIconColor.init();

78
browser/base/content/tabbrowser-tab.js
View File

@@ -8,25 +8,12 @@
// a block to prevent accidentally leaking globals onto `window`.
{
class MozTabbrowserTab extends MozElements.MozTab {
static get markup() {
let background = gProton
? `
<vbox class="tab-background">
<hbox class="tab-context-line"/>
<hbox class="tab-loading-burst proton" flex="1"/>
</vbox>
`
: `
<vbox class="tab-background">
<hbox class="tab-line"/>
<spacer flex="1" class="tab-background-inner"/>
<hbox class="tab-context-line"/>
</vbox>
`;
return `
static markup = `
<stack class="tab-stack" flex="1">
${background}
<hbox class="tab-loading-burst"/>
<vbox class="tab-background">
<hbox class="tab-context-line"/>
<hbox class="tab-loading-burst" flex="1"/>
</vbox>
<hbox class="tab-content" align="center">
<stack class="tab-icon-stack">
<hbox class="tab-throbber" layer="true"/>
@@ -35,14 +22,7 @@
<image class="tab-sharing-icon-overlay" role="presentation"/>
<image class="tab-icon-overlay" role="presentation"/>
</stack>
<hbox class="tab-label-container"
onoverflow="this.setAttribute('textoverflow', 'true');"
onunderflow="this.removeAttribute('textoverflow');"
flex="1">
<label class="tab-text tab-label" role="presentation"/>
</hbox>
<image class="tab-icon-sound" role="presentation"/>
<vbox class="tab-label-container proton"
<vbox class="tab-label-container"
onoverflow="this.setAttribute('textoverflow', 'true');"
onunderflow="this.removeAttribute('textoverflow');"
align="start"
@@ -60,7 +40,6 @@
</hbox>
</stack>
`;
}
constructor() {
super();
@@ -101,9 +80,7 @@
".tab-background": "selected=visuallyselected,fadein,multiselected",
".tab-line":
"selected=visuallyselected,multiselected,before-multiselected",
".tab-loading-burst.proton": "pinned,bursting,notselectedsinceload",
".tab-loading-burst:not(.proton)":
"pinned,bursting,notselectedsinceload",
".tab-loading-burst": "pinned,bursting,notselectedsinceload",
".tab-content":
"pinned,selected=visuallyselected,titlechanged,attention",
".tab-icon-stack":
@@ -119,15 +96,9 @@
"sharing,pictureinpicture,crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
".tab-label-container":
"pinned,selected=visuallyselected,labeldirection",
".tab-label-container.proton":
"pinned,selected=visuallyselected,labeldirection",
".tab-label":
"text=label,accesskey,fadein,pinned,selected=visuallyselected,attention",
".tab-label-container.proton .tab-label":
"text=label,accesskey,fadein,pinned,selected=visuallyselected,attention",
".tab-icon-sound":
"soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,pictureinpicture",
".tab-label-container.proton .tab-secondary-label":
".tab-label-container .tab-secondary-label":
"soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,pictureinpicture",
".tab-close-button": "fadein,pinned,selected=visuallyselected",
};
@@ -263,22 +234,7 @@
}
get _overPlayingIcon() {
// TODO (bug 1702652): Simplify this getter during Proton cleanup
let iconVisible =
this.soundPlaying || this.muted || this.activeMediaBlocked;
let soundPlayingIcon = this.soundPlayingIcon;
let overlayIcon = this.overlayIcon;
return (
(soundPlayingIcon && soundPlayingIcon.matches(":hover")) ||
(overlayIcon && overlayIcon.matches(":hover") && iconVisible)
);
}
get soundPlayingIcon() {
return gProton
? this.querySelector(".tab-icon-overlay")
: this.querySelector(".tab-icon-sound");
return this.overlayIcon?.matches(":hover");
}
get overlayIcon() {
@@ -313,7 +269,7 @@
if (event.target.classList.contains("tab-close-button")) {
this.mOverCloseButton = true;
}
if (gProton && this._overPlayingIcon) {
if (this._overPlayingIcon) {
const selectedTabs = gBrowser.selectedTabs;
const contextTabInSelection = selectedTabs.includes(this);
const affectedTabsLength = contextTabInSelection
@@ -338,7 +294,7 @@
if (event.target.classList.contains("tab-close-button")) {
this.mOverCloseButton = false;
}
if (gProton && event.target == this.overlayIcon) {
if (event.target == this.overlayIcon) {
this.setSecondaryTabTooltipLabel(null);
}
this._mouseleave();
@@ -371,7 +327,6 @@
this.style.MozUserFocus = "ignore";
} else if (
event.target.classList.contains("tab-close-button") ||
event.target.classList.contains("tab-icon-sound") ||
event.target.classList.contains("tab-icon-overlay")
) {
eventMaySelectTab = false;
@@ -437,7 +392,6 @@
if (
gBrowser.multiSelectedTabsCount > 0 &&
!event.target.classList.contains("tab-close-button") &&
!event.target.classList.contains("tab-icon-sound") &&
!event.target.classList.contains("tab-icon-overlay")
) {
// Tabs were previously multi-selected and user clicks on a tab
@@ -446,9 +400,8 @@
}
if (
event.target.classList.contains("tab-icon-sound") ||
(event.target.classList.contains("tab-icon-overlay") &&
(this.soundPlaying || this.muted || this.activeMediaBlocked))
event.target.classList.contains("tab-icon-overlay") &&
(this.soundPlaying || this.muted || this.activeMediaBlocked)
) {
if (this.multiselected) {
gBrowser.toggleMuteAudioOnMultiSelectedTabs(this);
@@ -488,10 +441,7 @@
tabContainer._closeTabByDblclick &&
this._selectedOnFirstMouseDown &&
this.selected &&
!(
event.target.classList.contains("tab-icon-sound") ||
event.target.classList.contains("tab-icon-overlay")
)
!event.target.classList.contains("tab-icon-overlay")
) {
gBrowser.removeTab(this, {
animate: true,

26
browser/base/content/tabbrowser.css
View File

@@ -11,14 +11,11 @@
.tab-icon-image:not([src], [pinned], [crashed], [sharing], [pictureinpicture]),
.tab-icon-image[busy],
.tab-throbber:not([busy]),
.tab-icon-sound:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]),
.tab-icon-sound[pinned],
.tab-sharing-icon-overlay,
.tab-icon-overlay {
display: none;
}
@media (-moz-proton) {
:root[uidensity=compact] .tab-secondary-label,
.tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]),
.tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label,
@@ -38,29 +35,6 @@
.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture], [crashed]) {
display: revert;
}
} /*** END proton ***/
@media not (-moz-proton) {
.tab-icon-sound:not([activemedia-blocked]) > .tab-icon-sound-blocked-label,
.tab-icon-sound[muted][activemedia-blocked] > .tab-icon-sound-blocked-label,
.tab-icon-sound[activemedia-blocked] > .tab-icon-sound-playing-label,
.tab-icon-sound[muted] > .tab-icon-sound-playing-label,
.tab-icon-sound[pictureinpicture] > .tab-icon-sound-playing-label,
.tab-icon-sound[pictureinpicture] > .tab-icon-sound-muted-label,
.tab-icon-sound:not([pictureinpicture]) > .tab-icon-sound-pip-label,
.tab-icon-sound:not([muted]) > .tab-icon-sound-muted-label {
display: none;
}
.tab-sharing-icon-overlay[sharing]:not([selected]),
.tab-icon-overlay[soundplaying][pinned],
.tab-icon-overlay[muted][pinned],
.tab-icon-overlay[activemedia-blocked][pinned],
.tab-icon-overlay[pictureinpicture],
.tab-icon-overlay[crashed] {
display: -moz-box;
}
} /*** END !proton ***/
.tabbrowser-tab {
--tab-label-mask-size: 2em;

4
browser/base/content/test/tabMediaIndicator/browser_mute_webAudio.js
View File

@@ -52,7 +52,7 @@ add_task(async function mute_web_audio() {
ok(!tab.linkedBrowser.audioMuted, "Audio should not be muted by default");
let tabContent = tab.querySelector(".tab-content");
await hoverIcon(tabContent);
await clickIcon(tab.soundPlayingIcon);
await clickIcon(tab.overlayIcon);
ok(tab.linkedBrowser.audioMuted, "Audio should be muted now");
info("- stop web audip -");
@@ -64,7 +64,7 @@ add_task(async function mute_web_audio() {
info("- unmute browser -");
ok(tab.linkedBrowser.audioMuted, "Audio should be muted now");
await hoverIcon(tabContent);
await clickIcon(tab.soundPlayingIcon);
await clickIcon(tab.overlayIcon);
ok(!tab.linkedBrowser.audioMuted, "Audio should be unmuted now");
info("- tab should be audible -");

8
browser/base/content/test/tabs/browser_audioTabIcon.js
View File

@@ -175,7 +175,7 @@ async function test_muting_using_menu(tab, expectMuted) {
}
async function test_playing_icon_on_tab(tab, browser, isPinned) {
let icon = isPinned ? tab.overlayIcon : tab.soundPlayingIcon;
let icon = isPinned ? tab.overlayIcon : tab.overlayIcon;
let isActiveTab = tab === gBrowser.selectedTab;
await play(tab);
@@ -364,7 +364,7 @@ async function test_swapped_browser_while_playing(oldTab, newBrowser) {
"Expected the correct soundplaying attribute on the new tab"
);
await test_tooltip(newTab.soundPlayingIcon, "Unmute tab", true, newTab);
await test_tooltip(newTab.overlayIcon, "Unmute tab", true, newTab);
}
async function test_swapped_browser_while_not_playing(oldTab, newBrowser) {
@@ -437,14 +437,14 @@ async function test_swapped_browser_while_not_playing(oldTab, newBrowser) {
"Expected the correct soundplaying attribute on the new tab"
);
await test_tooltip(newTab.soundPlayingIcon, "Unmute tab", true, newTab);
await test_tooltip(newTab.overlayIcon, "Unmute tab", true, newTab);
}
async function test_browser_swapping(tab, browser) {
// First, test swapping with a playing but muted tab.
await play(tab);
await test_mute_tab(tab, tab.soundPlayingIcon, true);
await test_mute_tab(tab, tab.overlayIcon, true);
await BrowserTestUtils.withNewTab(
{

8
browser/base/content/test/tabs/browser_multiselect_tabs_mute_unmute.js
View File

@@ -62,7 +62,7 @@ add_task(async function muteTabs_usingButton() {
}
// Mute tab0 which is not multiselected, thus other tabs muted state should not be affected
let tab0MuteAudioBtn = tab0.soundPlayingIcon;
let tab0MuteAudioBtn = tab0.overlayIcon;
await test_mute_tab(tab0, tab0MuteAudioBtn, true);
ok(muted(tab0), "Tab0 is muted");
@@ -95,7 +95,7 @@ add_task(async function muteTabs_usingButton() {
// b) unmuted tabs (tab1, tab3) will become muted.
// b) media-blocked tabs (tab2) will remain media-blocked.
// However tab4 (unmuted) which is not multiselected should not be affected.
let tab1MuteAudioBtn = tab1.soundPlayingIcon;
let tab1MuteAudioBtn = tab1.overlayIcon;
await test_mute_tab(tab1, tab1MuteAudioBtn, true);
// Check mute state
@@ -153,7 +153,7 @@ add_task(async function unmuteTabs_usingButton() {
// b) unmuted tabs (tab0) will remain unmuted.
// b) media-blocked tabs (tab1, tab2) will get playing. (media not blocked anymore)
// However tab4 (muted) which is not multiselected should not be affected.
let tab3MuteAudioBtn = tab3.soundPlayingIcon;
let tab3MuteAudioBtn = tab3.overlayIcon;
await test_mute_tab(tab3, tab3MuteAudioBtn, false);
ok(!muted(tab0), "Tab0 is not muted");
@@ -266,7 +266,7 @@ add_task(async function playTabs_usingButton() {
// b) unmuted tabs (tab3) will remain unmuted.
// b) media-blocked tabs (tab1, tab2) will get playing. (media not blocked anymore)
// However tab4 (muted) which is not multiselected should not be affected.
let tab2MuteAudioBtn = tab2.soundPlayingIcon;
let tab2MuteAudioBtn = tab2.overlayIcon;
await test_mute_tab(tab2, tab2MuteAudioBtn, false);
ok(!muted(tab0), "Tab0 is not muted");

3
browser/themes/shared/jar.inc.mn
View File

@@ -213,13 +213,11 @@
skin/classic/browser/tabbrowser/crashed.svg (../shared/tabbrowser/crashed.svg)
skin/classic/browser/tabbrowser/hourglass.svg (../shared/tabbrowser/hourglass.svg)
skin/classic/browser/tabbrowser/indicator-tab-attention.svg (../shared/tabbrowser/indicator-tab-attention.svg)
skin/classic/browser/tabbrowser/loading.svg (../shared/tabbrowser/loading.svg)
skin/classic/browser/tabbrowser/loading-burst.svg (../shared/tabbrowser/loading-burst.svg)
skin/classic/browser/tabbrowser/pendingpaint.png (../shared/tabbrowser/pendingpaint.png)
skin/classic/browser/tabbrowser/tab-audio-playing-small.svg (../shared/tabbrowser/tab-audio-playing-small.svg)
skin/classic/browser/tabbrowser/tab-audio-muted-small.svg (../shared/tabbrowser/tab-audio-muted-small.svg)
skin/classic/browser/tabbrowser/tab-audio-blocked.svg (../shared/tabbrowser/tab-audio-blocked.svg)
skin/classic/browser/tabbrowser/tab-audio-blocked-small.svg (../shared/tabbrowser/tab-audio-blocked-small.svg)
skin/classic/browser/tabbrowser/tab-connecting.png (../shared/tabbrowser/tab-connecting.png)
skin/classic/browser/tabbrowser/tab-connecting@2x.png (../shared/tabbrowser/tab-connecting@2x.png)
@@ -228,7 +226,6 @@
skin/classic/browser/tabbrowser/tab-loading@2x.png (../shared/tabbrowser/tab-loading@2x.png)
skin/classic/browser/tabbrowser/tab-loading-inverted.png (../shared/tabbrowser/tab-loading-inverted.png)
skin/classic/browser/tabbrowser/tab-loading-inverted@2x.png (../shared/tabbrowser/tab-loading-inverted@2x.png)
skin/classic/browser/tabbrowser/tab-overflow-indicator.png (../shared/tabbrowser/tab-overflow-indicator.png)
skin/classic/browser/translating-16.png (../shared/translation/translating-16.png)
skin/classic/browser/translating-16@2x.png (../shared/translation/translating-16@2x.png)

8
browser/themes/shared/tabbrowser/indicator-tab-attention.svg
View File

@@ -1,8 +0,0 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<circle r="6" cy="6" cx="6" fill-opacity=".2" fill="#00C8D7" />
<circle r="4" cy="6" cx="6" fill-opacity=".6" fill="#00C8D7" />
<circle r="2" cy="6" cx="6" fill="#00FEFF" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 483 B

7
browser/themes/shared/tabbrowser/tab-audio-blocked.svg
View File

@@ -1,7 +0,0 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
<path d="M8 2a6 6 0 1 0 6 6 6.007 6.007 0 0 0-6-6zm0 11a5 5 0 1 1 5-5 5.006 5.006 0 0 1-5 5z"/>
<path d="M6.75 4.969A.5.5 0 0 0 6 5.4v5.2a.5.5 0 0 0 .75.433l4.5-2.6a.5.5 0 0 0 0-.866z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 514 B

BIN
browser/themes/shared/tabbrowser/tab-overflow-indicator.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 716 B

411
browser/themes/shared/tabs.inc.css
View File

@@ -8,35 +8,18 @@
%define tabIndicatorReplacesIcon :not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
:root {
--tab-min-height: 33px;
--inline-tab-padding: 9px;
--tab-min-height: 36px;
--inline-tab-padding: 8px;
/* Value for --in-content-page-background in in-content/common.inc.css */
--tabpanel-background-color: #f9f9fa;
}
@media (-moz-toolbar-prefers-color-scheme: dark) {
:root {
/* Value for --in-content-page-background for dark mode in in-content/common.inc.css */
--tabpanel-background-color: #2a2a2e;
}
}
:root[privatebrowsingmode=temporary] {
/* Value for --in-content-page-background in aboutPrivateBrowsing.css */
--tabpanel-background-color: #25003e;
}
@media (-moz-proton) {
:root {
--tab-min-height: 36px;
--tab-border-radius: 4px;
--tab-shadow-max-size: 6px;
--proton-tab-block-margin: 4px;
--inline-tab-padding: 8px;
--tab-block-margin: 4px;
/* --tabpanel-background-color matches $in-content-page-background in newtab
(browser/components/newtab/content-src/styles/_variables.scss) */
--tabpanel-background-color: #F9F9FB;
}
@media (-moz-toolbar-prefers-color-scheme: dark) {
:root {
/* --tabpanel-background-color matches $in-content-page-background in newtab
@@ -44,7 +27,11 @@
--tabpanel-background-color: #2A2A2E;
}
}
} /*** END proton ***/
:root[privatebrowsingmode=temporary] {
/* Value for --in-content-page-background in aboutPrivateBrowsing.css */
--tabpanel-background-color: #25003e;
}
:root[uidensity=compact] {
--tab-min-height: 29px;
@@ -55,17 +42,10 @@
}
#tabbrowser-tabs {
--tabs-top-border-width: 0px;
--tab-min-width: 76px;
--tab-loading-fill: #0A84FF;
}
@media not (-moz-proton) {
#tabbrowser-tabs:-moz-lwtheme {
--tab-line-color: currentColor;
}
} /* end !proton */
#tabbrowser-tabpanels {
background-color: var(--tabpanel-background-color);
}
@@ -81,14 +61,12 @@
min-height: inherit;
}
@media (-moz-proton) {
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
/* Add padding to match the shadow's blur radius so the
shadow doesn't get clipped when either the first or
last tab is selected */
padding-inline: var(--tab-shadow-max-size);
}
} /*** END proton ***/
@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
.tab-stack {
@@ -114,7 +92,6 @@
-moz-box-align: stretch;
}
@media (-moz-proton) {
.tabbrowser-tab {
min-height: var(--tab-min-height);
padding-inline: 2px !important;
@@ -126,7 +103,6 @@
outline: var(--focus-outline);
outline-offset: -2px;
}
} /*** END proton ***/
/* The selected tab should appear above the border between the tabs toolbar and
the navigation toolbar. */
@@ -143,22 +119,6 @@
padding: 0 10px;
}
@media not (-moz-proton) {
:root:not([uidensity=compact]) .tab-content[pinned] {
padding: 0 12px;
}
.tab-loading-burst.proton {
display: none;
}
} /*** END !proton ***/
@media (-moz-proton) {
.tab-loading-burst:not(.proton) {
display: none;
}
} /*** END proton ***/
@media (prefers-reduced-motion: no-preference) {
:root[sessionrestored] .tab-loading-burst {
border-radius: inherit;
@@ -223,14 +183,6 @@
}
}
@media not (-moz-proton) {
.tab-icon-stack,
.tab-icon-sound,
.tab-close-button {
margin-top: 1px;
}
} /*** END !proton ***/
/* Width/height & margins apply on tab icon stack children */
.tab-throbber-tabslist,
.tab-throbber,
@@ -242,17 +194,6 @@
width: 16px;
}
@media not (-moz-proton) {
.tab-throbber:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]),
.tab-icon-overlay:not([pinned], [sharing]) {
margin-inline-end: 6px;
}
} /*** END !proton ***/
@media (-moz-proton) {
.tab-throbber:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned]),
@@ -260,7 +201,6 @@
.tab-icon-overlay:not([pinned]) {
margin-inline-end: 5.5px;
}
} /*** END proton ***/
@media (prefers-reduced-motion: reduce) {
.tab-throbber[busy] {
@@ -392,23 +332,12 @@
padding: 2px;
}
@media not (-moz-proton) {
.tab-icon-overlay[pictureinpicture] {
top: -5.5px;
inset-inline-end: -6px;
z-index: 1; /* Overlay tab title */
padding: 0;
}
} /*** END !proton ***/
@media (-moz-proton) {
:root[uidensity=compact] .tab-icon-stack@tabIndicatorReplacesIcon@ > :not(.tab-icon-overlay),
#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack@tabIndicatorReplacesIcon@ > :not(.tab-icon-overlay),
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay@tabIndicatorReplacesIcon@,
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover .tab-icon-stack@tabIndicatorReplacesIcon@ > :not(.tab-icon-overlay) {
opacity: 0;
}
} /*** END proton ***/
.tab-icon-overlay[soundplaying]:not([crashed]),
.tab-icon-overlay[muted]:not([crashed]),
@@ -441,15 +370,6 @@
background-color: var(--tab-icon-overlay-stroke, black);
}
@media not (-moz-proton) {
.tab-icon-overlay[pictureinpicture]:hover {
background-color: white;
stroke: white;
color: black;
}
} /*** END !proton ***/
@media (-moz-proton) {
.tab-icon-overlay@tabIndicatorReplacesIcon@ {
border-radius: 2px;
fill-opacity: 0.75;
@@ -462,7 +382,6 @@
.tab-icon-overlay@tabIndicatorReplacesIcon@:hover:active {
background-color: color-mix(in srgb, currentColor 30%, transparent);
}
} /*** END proton ***/
.tab-icon-overlay[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
@@ -528,21 +447,6 @@
.tab-close-button {
-moz-context-properties: fill, fill-opacity;
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}
@media not (-moz-proton) {
.tab-label {
/* Maintain consistent alignment in case of font fallback for non-Latin characters. */
line-height: 1.7em;
}
.tab-close-button {
margin-inline-end: -2px;
}
} /*** END !proton ***/
@media (-moz-proton) {
.tab-close-button {
margin-inline-end: calc(var(--inline-tab-padding) / -2);
width: 24px;
height: 24px;
@@ -560,36 +464,9 @@
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):hover {
--tab-label-mask-size: 1em;
}
} /*** END proton ***/
@media not (-moz-proton) {
:root[uidensity=touch] .tab-close-button {
margin-inline-end: calc(var(--inline-tab-padding) / -2);
width: 24px;
height: 24px;
padding: 4px;
}
} /*** END !proton ***/
@media not (-moz-proton) {
.tab-label-container.proton {
display: none;
}
.tab-icon-sound {
margin-inline-start: 1px;
width: 16px;
height: 16px;
padding: 0;
-moz-context-properties: fill;
fill: currentColor;
}
} /*** END !proton ***/
@media (-moz-proton) {
#tabbrowser-tabs[secondarytext-unsupported] .tab-secondary-label,
.tab-label-container:not(.proton),
.tab-label-container:not(.proton) + .tab-icon-sound {
#tabbrowser-tabs[secondarytext-unsupported] .tab-secondary-label {
display: none;
}
@@ -604,66 +481,11 @@
height: 1.3333em;
margin: 0;
}
} /*** END proton ***/
@media not (-moz-proton) {
.tab-icon-sound[soundplaying],
.tab-icon-sound[muted],
.tab-icon-sound[activemedia-blocked] {
list-style-image: url(chrome://global/skin/media/audio.svg);
}
.tab-icon-sound[muted] {
list-style-image: url(chrome://global/skin/media/audio-muted.svg);
}
.tab-icon-sound[activemedia-blocked] {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
}
.tab-icon-sound[pictureinpicture] {
list-style-image: url(chrome://global/skin/media/picture-in-picture-open.svg);
width: 14px;
height: 14px;
opacity: .8;
}
.tab-icon-sound[pictureinpicture]:-moz-locale-dir(rtl) {
transform: scaleX(-1);
}
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[pictureinpicture],
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[soundplaying],
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[muted],
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] {
filter: drop-shadow(1px 1px 1px white);
}
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[pictureinpicture],
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[muted],
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] {
filter: drop-shadow(1px 1px 1px black);
}
.tab-icon-sound[soundplaying]:not(:hover),
.tab-icon-sound[muted]:not(:hover),
.tab-icon-sound[activemedia-blocked]:not(:hover) {
opacity: .8;
}
.tab-icon-sound[soundplaying-scheduledremoval]:not([muted], :hover),
.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted], :hover) {
transition: opacity .3s linear var(--soundplaying-removal-delay);
opacity: 0;
}
} /*** END !proton ***/
@media (-moz-proton) {
.tab-secondary-label[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
transition: opacity .3s linear var(--soundplaying-removal-delay);
opacity: 0;
}
} /*** END proton ***/
/* Tab Overflow */
#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator),
@@ -690,35 +512,11 @@
margin-inline: -6.5px -.5px;
}
@media not (-moz-proton) {
#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator),
#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {
width: 18px;
background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png);
background-size: 17px 100%;
border-left: 1px solid;
border-image: linear-gradient(rgba(255,255,255,.2),
rgba(255,255,255,.2) calc(100% - 1px - var(--tabs-navbar-shadow-size)),
transparent calc(100% - 1px - var(--tabs-navbar-shadow-size)));
border-image-slice: 1;
}
} /*** END !proton ***/
#tabbrowser-arrowscrollbox:-moz-locale-dir(rtl)::part(overflow-start-indicator),
#tabbrowser-arrowscrollbox:-moz-locale-dir(ltr)::part(overflow-end-indicator) {
transform: scaleX(-1);
}
@media not (-moz-proton) {
#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) {
margin-inline: -1px -17px;
}
#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {
margin-inline: -17px -1px;
}
} /*** END !proton ***/
#tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
#tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator) {
opacity: 0;
@@ -739,12 +537,6 @@
color: var(--lwt-tab-text, var(--toolbar-color));
}
@media not (-moz-proton) {
.tab-line {
height: 2px;
}
} /* end !proton */
/* Selected tab */
.tab-background {
@@ -752,10 +544,9 @@
background-clip: padding-box;
}
@media (-moz-proton) {
.tab-background {
border-radius: var(--tab-border-radius);
margin-block: var(--proton-tab-block-margin);
margin-block: var(--tab-block-margin);
}
:root[sizemode=maximized] .tabbrowser-tab {
@@ -781,24 +572,6 @@
:root:not([lwtheme-mozlightdark]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme {
box-shadow: 0 0 0 1px var(--tab-line-color, var(--tabs-border-color, rgba(128,128,142,0.9)));
}
} /*** END proton ***/
@media not (-moz-proton) {
%ifdef MENUBAR_CAN_AUTOHIDE
#toolbar-menubar:not([autohide=true]) + #TabsToolbar,
%endif
:root:not([tabsintitlebar]) {
--tabs-top-border-width: 1px;
}
%ifdef MENUBAR_CAN_AUTOHIDE
#toolbar-menubar:not([autohide=true]) + #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background,
%endif
:root:not([tabsintitlebar]) .tab-background {
border-top-style: solid;
}
} /*** END !proton ***/
.tab-background[multiselected=true],
.tab-background[selected=true] {
@@ -813,13 +586,6 @@
opacity: .9;
}
@media not (-moz-proton) {
.tab-line[multiselected],
.tab-line[selected=true] {
background-color: var(--tab-line-color);
}
} /* end !proton */
/*
* LightweightThemeConsumer will set the current lightweight theme's header
* image to the lwt-header-image variable, used in each of the following rulesets.
@@ -840,17 +606,6 @@
/* Tab hover */
@media not (-moz-proton) {
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
background-color: rgba(0,0,0,.1);
}
#TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
background-color: rgba(255,255,255,.1);
}
} /* END !proton */
@media (-moz-proton) {
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
background-color: color-mix(in srgb, currentColor 11%, transparent);
}
@@ -862,67 +617,9 @@
outline-offset: -1px;
}
}
} /* END proton */
@media not (-moz-proton) {
@media (prefers-reduced-motion: no-preference) {
.tab-line:not([selected=true], [multiselected]) {
transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
}
}
.tab-line:not([selected=true], [multiselected]) {
opacity: 0;
transform: scaleX(0);
}
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true], [multiselected]) {
background-color: rgba(0,0,0,.2);
opacity: 1;
transform: none;
}
#TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true], [multiselected]) {
background-color: rgba(255,255,255,.2);
}
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line[multiselected]:not([selected=true]) {
opacity: 0.5;
}
} /* end !proton */
/* Pinned tabs */
@media not (-moz-proton) {
/* Pinned tab separators need position: absolute when positioned (during overflow). */
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned]::after {
display: block;
position: absolute;
inset-block: 0;
inset-inline-end: 0;
}
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] > .tab-stack {
border-inline-end: 1px solid transparent;
}
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
background-image: url(chrome://browser/skin/tabbrowser/indicator-tab-attention.svg);
background-position: center bottom calc(-4px + var(--tabs-navbar-shadow-size));
background-repeat: no-repeat;
}
.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]) {
background-position-x: left 11px;
}
.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]):-moz-locale-dir(rtl) {
background-position-x: right 11px;
}
} /*** END !proton ***/
@media (-moz-proton) {
#TabsToolbar {
--attention-icon-color: rgb(42,195,162);
}
@@ -951,7 +648,6 @@
/* Add a gap between the last pinned tab and the first visible tab */
margin-inline-start: 12px !important; /* .tabbrowser-tab sets margin: 0 !important; */
}
} /*** END proton ***/
.tab-label[attention]:not([selected="true"]) {
font-weight: bold;
@@ -982,65 +678,6 @@
}
}
/* Tab separators */
@media not (-moz-proton) {
.titlebar-spacer[type="pre-tabs"] {
border-inline-end: 1px solid var(--lwt-background-tab-separator-color, currentColor);
opacity: 0.2;
}
.tabbrowser-tab::after,
.tabbrowser-tab::before {
border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor);
margin-block: 5px 4px;
opacity: 0.3;
}
/* Move the ::before pseudo-element on tabs 1px to the left
* to avoid resizing the tab when the pseudo-element is removed again
* (this currently happens when a tab is dragged and dropped).
*
* Note that this doesn't perfectly solve the issue (dragged tabs
* may still resize very slightly) on some DPI settings with uneven
* scaling factors on Windows, because of bug 477157.
*/
.tabbrowser-tab::before {
margin-inline-start: -1px;
}
%ifdef MENUBAR_CAN_AUTOHIDE
:root[tabsintitlebar] #toolbar-menubar[autohide=true] + #TabsToolbar .tabbrowser-tab::after,
%else
:root[tabsintitlebar] .tabbrowser-tab::after,
%endif
/* Show full height tab separators on hover and multiselection. */
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after,
.tabbrowser-tab[multiselected]::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after {
margin-top: var(--tabs-top-border-width);
margin-bottom: 0;
}
/* Show full height tab separators on selected tabs. */
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before,
.tabbrowser-tab[visuallyselected]::after {
border-color: var(--tabs-border-color);
margin-top: 0;
margin-bottom: var(--tabs-navbar-shadow-size);
opacity: 1;
}
.tabbrowser-tab::after,
/* Also show separators beside the selected tab when dragging it. */
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
content: "";
display: block;
}
} /*** END !proton ***/
/* Tab bar scroll arrows */
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
@@ -1117,16 +754,6 @@
font-weight: bold;
}
@media not (-moz-proton-doorhangers) {
.all-tabs-item[selected] {
box-shadow: inset 4px 0 var(--blue-40);
}
.all-tabs-item[selected]:-moz-locale-dir(rtl) {
box-shadow: inset -4px 0 var(--blue-40);
}
}
.all-tabs-button {
list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
}
@@ -1144,7 +771,6 @@
list-style-image: url(chrome://global/skin/media/audio-muted.svg);
}
@media (-moz-proton) {
#allTabsMenu-allTabsViewTabs {
padding-bottom: 8px;
}
@@ -1157,18 +783,3 @@
.all-tabs-item > toolbarbutton {
margin-inline-start: 0;
}
} /*** END proton ***/
@media not (-moz-proton) {
#allTabsMenu-searchTabs {
list-style-image: url(chrome://global/skin/icons/search-glass.svg);
}
#allTabsMenu-tabsSeparator {
margin-bottom: 0;
}
.all-tabs-item:hover {
background-color: var(--arrowpanel-dimmed);
}
} /*** END !proton ***/

6
mozglue/misc/PreXULSkeletonUI.cpp
View File

@@ -750,10 +750,10 @@ Result<Ok, PreXULSkeletonUIError> DrawSkeletonUI(
int horizontalOffset =
sNonClientHorizontalMargins - (sMaximized ? 0 : chromeHorMargin);
// found in tabs.inc.css, "--tab-min-height" + 2 * "--proton-tab-block-margin"
// found in tabs.inc.css, "--tab-min-height" + 2 * "--tab-block-margin"
int tabBarHeight = CSSToDevPixels(44, sCSSToDevPixelScaling);
int selectedTabBorderWidth = CSSToDevPixels(2, sCSSToDevPixelScaling);
// found in tabs.inc.css, "--proton-tab-block-margin"
// found in tabs.inc.css, "--tab-block-margin"
int titlebarSpacerWidth = horizontalOffset +
CSSToDevPixels(2, sCSSToDevPixelScaling) -
selectedTabBorderWidth;
@@ -761,7 +761,7 @@ Result<Ok, PreXULSkeletonUIError> DrawSkeletonUI(
// found in tabs.inc.css, ".titlebar-spacer"
titlebarSpacerWidth += CSSToDevPixels(40, sCSSToDevPixelScaling);
}
// found in tabs.inc.css, "--proton-tab-block-margin"
// found in tabs.inc.css, "--tab-block-margin"
int selectedTabMarginTop =
CSSToDevPixels(4, sCSSToDevPixelScaling) - selectedTabBorderWidth;
int selectedTabMarginBottom =

2
toolkit/content/tests/browser/browser_delay_autoplay_silentAudioTrack_media.js
View File

@@ -2,7 +2,7 @@ const PAGE =
"https://example.com/browser/toolkit/content/tests/browser/file_silentAudioTrack.html";
async function click_unblock_icon(tab) {
let icon = tab.soundPlayingIcon;
let icon = tab.overlayIcon;
await hover_icon(icon, document.getElementById("tabbrowser-tab-tooltip"));
EventUtils.synthesizeMouseAtCenter(icon, { button: 0 });