Bug 1399111 - Tabs that start loading in the background and haven't been selected before completing loading will show a lighter tab burst. r?gijs
MozReview-Commit-ID: FdXwaQr7Glt
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -754,16 +754,17 @@
// If the browser is loading it must not be crashed anymore
this.mTab.removeAttribute("crashed");
}
if (this._shouldShowProgress(aRequest)) {
if (!(aStateFlags & nsIWebProgressListener.STATE_RESTORING) &&
aWebProgress && aWebProgress.isTopLevel) {
this.mTab.setAttribute("busy", "true");
+ this.mTab._notselectedsinceload = !this.mTab.selected;
this._syncThrobberAnimations();
}
if (this.mTab.selected) {
this.mTabBrowser.mIsBusy = true;
}
}
} else if (aStateFlags & nsIWebProgressListener.STATE_STOP &&
@@ -773,16 +774,22 @@
this.mTab.removeAttribute("busy");
// Only animate the "burst" indicating the page has loaded if
// the top-level page is the one that finished loading.
if (aWebProgress.isTopLevel && !aWebProgress.isLoadingDocument &&
Components.isSuccessCode(aStatus) &&
!this.mTabBrowser.tabAnimationsInProgress &&
Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled")) {
+ if (this.mTab._notselectedsinceload) {
+ this.mTab.setAttribute("notselectedsinceload", "true");
+ } else {
+ this.mTab.removeAttribute("notselectedsinceload");
+ }
+
this.mTab.setAttribute("bursting", "true");
}
this.mTabBrowser._tabAttrModified(this.mTab, ["busy"]);
if (!this.mTab.selected)
this.mTab.setAttribute("unread", "true");
}
this.mTab.removeAttribute("progress");
@@ -6567,16 +6574,18 @@
]]></body>
</method>
<method name="_handleTabSelect">
<parameter name="aInstant"/>
<body><![CDATA[
if (this.getAttribute("overflow") == "true")
this.mTabstrip.ensureElementIsVisible(this.selectedItem, aInstant);
+
+ this.selectedItem._notselectedsinceload = false;
]]></body>
</method>
<field name="_closingTabsSpacer">
document.getAnonymousElementByAttribute(this, "anonid", "closing-tabs-spacer");
</field>
<field name="_tabDefaultMaxWidth">NaN</field>
@@ -7639,17 +7648,17 @@
<xul:stack class="tab-stack" flex="1">
<xul:vbox xbl:inherits="selected=visuallyselected,fadein"
class="tab-background">
<xul:hbox xbl:inherits="selected=visuallyselected"
class="tab-line"/>
<xul:spacer flex="1"/>
<xul:hbox class="tab-bottom-line"/>
</xul:vbox>
- <xul:hbox xbl:inherits="pinned,bursting"
+ <xul:hbox xbl:inherits="pinned,bursting,notselectedsinceload"
anonid="tab-loading-burst"
class="tab-loading-burst"/>
<xul:hbox xbl:inherits="pinned,selected=visuallyselected,titlechanged,attention"
class="tab-content" align="center">
<xul:hbox xbl:inherits="fadein,pinned,busy,progress,selected=visuallyselected"
anonid="tab-throbber"
class="tab-throbber"
layer="true"/>
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -102,27 +102,42 @@ tabbrowser {
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1);
-moz-context-properties: fill;
fill: var(--tab-loading-fill);
}
+:root[sessionrestored] .tab-loading-burst[bursting][notselectedsinceload]::before {
+ animation-name: tab-burst-animation-light;
+}
+
@keyframes tab-burst-animation {
0% {
opacity: 0.4;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(40);
}
}
+@keyframes tab-burst-animation-light {
+ 0% {
+ opacity: 0.2;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(40);
+ }
+}
+
.tab-throbber,
.tab-icon-image,
.tab-sharing-icon-overlay,
.tab-icon-sound,
.tab-close-button {
margin-top: 1px;
}
