Bug 1392157 - Performance improvements to burst animation. r?mconley
MozReview-Commit-ID: KJJv09u1SaJ
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -724,18 +724,19 @@
aStateFlags & nsIWebProgressListener.STATE_IS_NETWORK) {
if (this.mTab.hasAttribute("busy")) {
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 &&
+ !this.mTabBrowser.tabAnimationsInProgress &&
Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled")) {
- this.mTab.animateLoadingBurst();
+ this.mTab.setAttribute("bursting", "true");
}
this.mTabBrowser._tabAttrModified(this.mTab, ["busy"]);
if (!this.mTab.selected)
this.mTab.setAttribute("unread", "true");
}
this.mTab.removeAttribute("progress");
@@ -2910,16 +2911,17 @@
return;
}
// We're animating, so we can cancel the non-animation stopwatch.
TelemetryStopwatch.cancel("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
aTab.style.maxWidth = ""; // ensure that fade-out transition happens
aTab.removeAttribute("fadein");
+ aTab.removeAttribute("bursting");
setTimeout(function(tab, tabbrowser) {
if (tab.parentNode &&
window.getComputedStyle(tab).maxWidth == "0.1px") {
NS_ASSERT(false, "Giving up waiting for the tab closing animation to finish (bug 608589)");
tabbrowser._endRemoveTab(tab);
}
}, 3000, aTab, this);
@@ -7647,28 +7649,16 @@
</method>
<method name="finishMediaBlockTimer">
<body><![CDATA[
TelemetryStopwatch.finish("TAB_MEDIA_BLOCKING_TIME_MS", this);
]]></body>
</method>
- <method name="animateLoadingBurst">
- <body><![CDATA[
- if (this.hasAttribute("bursting")) {
- // Stop the animation if it's already playing so we can restart it.
- this.removeAttribute("bursting");
- let burst = document.getAnonymousElementByAttribute(this, "anonid", "tab-loading-burst");
- window.getComputedStyle(burst).animationName;
- }
- this.setAttribute("bursting", "true");
- ]]></body>
- </method>
-
<method name="toggleMuteAudio">
<parameter name="aMuteReason"/>
<body>
<![CDATA[
// Do not attempt to toggle mute state if browser is lazy.
if (!this.linkedPanel) {
return;
}
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -57,47 +57,47 @@
.tab-content {
padding: 0 @horizontalTabPadding@;
}
.tab-content[pinned] {
padding: 0 12px;
}
-.tab-loading-burst {
+:root[sessionrestored] .tab-loading-burst {
position: relative;
overflow: hidden;
}
-.tab-loading-burst::before {
+:root[sessionrestored] .tab-loading-burst::before {
position: absolute;
content: "";
/* We set the width to be a percentage of the tab's width so that we can use
the `scale` transform to scale it up to the full size of the tab when the
burst occurs. We also need to set the margin-inline-start so that the
center of the burst matches the center of the favicon. */
width: 5%;
height: 100%;
/* Center the burst over the .tab-loading-burst; it's 9px from the edge thanks
to .tab-content, plus 8px more since .tab-loading-burst is 16px wide. */
margin-inline-start: calc(17px - 2.5%);
}
-.tab-loading-burst[pinned]::before {
+:root[sessionrestored] .tab-loading-burst[pinned]::before {
/* This is like the margin-inline-start rule above, except that icons for
pinned tabs are 12px from the edge. */
margin-inline-start: calc(20px - 2.5%);
}
-.tab-loading-burst[bursting]::before {
+:root[sessionrestored] .tab-loading-burst[bursting]::before {
background-image: url("chrome://browser/skin/tabbrowser/loading-burst.svg");
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
- animation: tab-burst-animation 1.8s var(--animation-easing-function);
+ animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1);
-moz-context-properties: fill;
fill: var(--tab-loading-fill);
}
@keyframes tab-burst-animation {
0% {
opacity: 0.4;
transform: scale(1);