From 032cea7cd8791a6c38c8de2060acdcd31123dc39 Mon Sep 17 00:00:00 2001 From: Jared Wein Date: Mon, 21 Aug 2017 18:11:34 -0400 Subject: [PATCH] Bug 1392157 - Performance improvements to burst animation. r=mconley MozReview-Commit-ID: KJJv09u1SaJ --HG-- extra : rebase_source : e5e4abe08c6d346e93acc0cbaa78a6ef31260b50 extra : source : 168182fb00ea49c77fe7cc7090b3413aad931f60 --- browser/base/content/tabbrowser.xml | 16 +++------------- browser/themes/shared/tabs.inc.css | 10 +++++----- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/browser/base/content/tabbrowser.xml b/browser/base/content/tabbrowser.xml index 1849b6035e73..9c3d2fefa7ba 100644 --- a/browser/base/content/tabbrowser.xml +++ b/browser/base/content/tabbrowser.xml @@ -729,8 +729,9 @@ // 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"]); @@ -2915,6 +2916,7 @@ aTab.style.maxWidth = ""; // ensure that fade-out transition happens aTab.removeAttribute("fadein"); + aTab.removeAttribute("bursting"); setTimeout(function(tab, tabbrowser) { if (tab.parentNode && @@ -7652,18 +7654,6 @@ ]]> - - - - diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css index 597efba5f190..a1a946b1cbea 100644 --- a/browser/themes/shared/tabs.inc.css +++ b/browser/themes/shared/tabs.inc.css @@ -62,12 +62,12 @@ 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 @@ -81,18 +81,18 @@ 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); }