mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1392157 - Performance improvements to burst animation. r=mconley 

MozReview-Commit-ID: KJJv09u1SaJ

--HG--
extra : rebase_source : e5e4abe08c6d346e93acc0cbaa78a6ef31260b50
extra : source : 168182fb00ea49c77fe7cc7090b3413aad931f60
This commit is contained in:
Jared Wein 2017-08-21 18:11:34 -04:00
Родитель a99b7a3fad
Коммит 032cea7cd8
2 изменённых файлов: 8 добавлений и 18 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

16
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 @@
]]></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>

10
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);
}