Bug 759252 - Switch to using CSS animations for loading & connecting throbbers. r=fryn
☠☠ backed out by 5a095777e385 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Wed, 30 May 2012 16:14:42 -0700
changeset 95303 970abbd6e5b0aac52fc7536885e54f4779c5e221
parent 95302 869482fb63a0293e36518b42e15222e30344df85
child 95304 02e49bc6ead9943d67f0c4bc14be35bbd4f37235
push id10054
push userjwein@mozilla.com
push dateWed, 30 May 2012 23:15:31 +0000
treeherdermozilla-inbound@970abbd6e5b0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfryn
bugs759252
milestone15.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 759252 - Switch to using CSS animations for loading & connecting throbbers. r=fryn
browser/themes/gnomestripe/browser.css
browser/themes/gnomestripe/tabbrowser/connecting.png
browser/themes/gnomestripe/tabbrowser/loading.png
browser/themes/pinstripe/browser.css
browser/themes/pinstripe/tabbrowser/connecting.png
browser/themes/pinstripe/tabbrowser/loading.png
browser/themes/winstripe/browser.css
browser/themes/winstripe/tabbrowser/connecting.png
browser/themes/winstripe/tabbrowser/loading.png
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -1553,20 +1553,38 @@ richlistitem[type~="action"][actiontype=
   width: 16px;
   height: 16px;
   -moz-margin-end: 3px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 }
 
 .tab-throbber {
   list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
+  -moz-animation-duration: 960ms;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-name: rotate-counterclockwise;
+  -moz-animation-timing-function: linear;
 }
 
 .tab-throbber[progress] {
   list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
+  -moz-animation-duration: 800ms;
+  -moz-animation-name: rotate-clockwise;
+}
+
+@-moz-keyframes rotate-clockwise {
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes rotate-counterclockwise {
+  to {
+    -moz-transform: rotate(-360deg);
+  }
 }
 
 .tab-throbber[pinned],
 .tab-icon-image[pinned],
 .tabs-newtab-button > .toolbarbutton-icon {
   -moz-margin-start: 2px;
   -moz-margin-end: 2px;
 }
index 3c8e71f5db658610223244b2e5938d6e3c7b6524..33075734e9ed322bad65b401a278c75cac78a3d3
GIT binary patch
literal 812
zc$@(&1JnG8P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#32;bRa{vGi!vFvd!vV){sAK>D02*{fSaefwW^{L9
za%BKeVQFr3E>1;MAa*k@H7+qQF!XYv0007;Nkl<ZILl-B|NlROq@*M^EDpp*K&%GD
zA~@7AFn|n@kdQ#e#z0&yEiGLqD=S+rBO_BKB_&k{6e|K^6Ch>=>49Nn1K5B#1*oY+
zS64SIDJjWe+O%mlQ>RX~Oixd@)6vn1P*qhe1Inc?Uc8tesE-AR8DR!6197a1ib`sJ
ze!j!+-@mni;*vlt0K_20;y`TJ-rgQ(VPUb^+S+<`cXziwP>d61fECd6l)}P7N2p>(
zn3teVWx9O%vXr*A_6b8n!|Oo$9?-IDJv}`p4C3PAj0y@031((y{@=fUmqhj-5@t(C
zNQeMxKH%x;xy#Yf@uZ1~$yEmjhshuV#DV^b1ln#5vKf~FK(ED_o11TUb8}ni?d`qC
z*4FlnySw`eP*f-bofMFlm#2Y4GuR7{9z9YAYT5+EtAU2>02+3&w6wI10T@LJKm)u3
z0|S-u7y!bYM~@y&0%}?x5fO0`7>L_etXSa%GC;)6&dwhgvW5f<VBEB6lf$7yhbHXU
zv18M`dGjU$15pheh>3}bLBIeC5)l!>6$T9b{r#-VmM!zxxpQaXoH=t=&YU^3^!@wy
zd|=7e)>d<8XJ>y+O-&=9Lac@WH7RY`vc+%V!iC+_r%&%*wQ7|YC~#q>v((kq`5G7)
zgc%tb87^JAloezn5HkTW^MVBnq*kw9Z82%mq@v#5-hQCp)1E(nE(A}BAbk7wZBd|~
z{B3M(BCV{f5`ls0l$n`nT~t)$R$N>hQ&3P)*Vfk7ynOlc_{WbQE5M>0#hGv4z7^fS
zf4@h4eSH)#;pE1}#g(O|rdH<W<`w~6l78aEiI5*Zen<n=GNWWBG|c+v&mZ~w_wU<W
qxpKt|s43{)y?Zu5aYc|Ex_SVSV*j+>YKy!80000<MNUMnLSTZFR%EaM
index 87d0badd10f6de9aadb93c5d72197e1760954cdb..a59c531602b84c60a2157a6148cae994b110f8f7
GIT binary patch
literal 857
zc$@)Q1E&0mP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#32;bRa{vGi!vFvd!vV){sAK>D02*{fSaefwW^{L9
za%BKeVQFr3E>1;MAa*k@H7+qQF!XYv0008WNkl<ZI1vTGTWFSb901_w_kZ8-uy51t
zQ|D$|!j{K|P%1>wAc`b|D1xYH7u^SS*@bl3RRv*pK~YfGb<sr-L?v_)1%eum;lM-5
zoKrV<{0{HG=ZViBZy^K#Q+PY^T%<TDq8{=;Ir}a6BEmcYUVr+SQbuH1NX+f77avTI
zl>0`TWn-j~YN<%&YA>I>*Gs1sAMCul`f%r5=F<R_8IhF{`J*Fy8ZXVX>#ZVkFLI<%
z6)I)BjM%$-z~RY#jjInjpIn~5eI{4^m(fX3q<Cj`qBVPBPd$gco~!&zR?X$?n4G6n
z)hjkPe=oWnC#D|p!c#}j6e&K2;_PT`@`=&rdyfv)T5{e{RbMV|S07%y+g-f0(p_Iz
z>pooGs^$mE_<E@7G*hGT%+SFptyG=<`R|4Ai#I14XHJi`PDMm7_xl&-AM`%^^Uh9Q
z?`6Fz>t!~2mFo|C$|8Op%{$MR2d5A2JusebTwUm=>EZg(l%gwFOUv8UcbD&XE66#^
zfDj_Mw9@IXY<ADtSQqUv$EU_$Oyh&)kVspy<tz8Pw{p$^a?Tn>QlyX~z@?R)i+Sm$
zXb#xFdtjn$m9ZgWQ&?T?R2cwZqtgR0R4?7{RI65&uJwQT>al^!f2HhZq_kfub})=P
z05CT@1K`^WSHMPd_>E@Od274xeA?*rE@L%n^=7+S96<m80L;zKn46s`qS+db*WSOL
zc8%OfOI!VgT=lO-DymbHBhwKv0RR91IEKOPpT7AK(&Acgt-sUxBg;#}gU$A{hel`0
zB8{O200<n$H16U$l&hV};#z0nP_Yrk(D2Fek-^DVpB!rKRBjD4>bFs$jr|zH3jRU`
z#o5uCJ6n}@-O8Z;zfsn@Wv#ZWSufjVS&rcV+UVmduAmPP=a07l92u^e*;6ZuP^<49
j8%WJo4X}xI008(OhB+FXsNS1H00000NkvXXu0mjf#6gmN
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -1661,20 +1661,38 @@ toolbarbutton.chevron > .toolbarbutton-m
 .tab-icon-image {
   width: 16px;
   height: 16px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 }
 
 .tab-throbber {
   list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
+  -moz-animation-duration: 960ms;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-name: rotate-counterclockwise;
+  -moz-animation-timing-function: linear;
 }
 
 .tab-throbber[progress] {
   list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
+  -moz-animation-duration: 800ms;
+  -moz-animation-name: rotate-clockwise;
+}
+
+@-moz-keyframes rotate-clockwise {
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes rotate-counterclockwise {
+  to {
+    -moz-transform: rotate(-360deg);
+  }
 }
 
 .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) {
   opacity: .8;
 }
 
 .tabbrowser-tab:not([pinned]):not([fadein]) {
   -moz-transition: min-width 200ms ease-out /* copied from browser/base/content/browser.css */,
index 3c8e71f5db658610223244b2e5938d6e3c7b6524..33075734e9ed322bad65b401a278c75cac78a3d3
GIT binary patch
literal 812
zc$@(&1JnG8P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#32;bRa{vGi!vFvd!vV){sAK>D02*{fSaefwW^{L9
za%BKeVQFr3E>1;MAa*k@H7+qQF!XYv0007;Nkl<ZILl-B|NlROq@*M^EDpp*K&%GD
zA~@7AFn|n@kdQ#e#z0&yEiGLqD=S+rBO_BKB_&k{6e|K^6Ch>=>49Nn1K5B#1*oY+
zS64SIDJjWe+O%mlQ>RX~Oixd@)6vn1P*qhe1Inc?Uc8tesE-AR8DR!6197a1ib`sJ
ze!j!+-@mni;*vlt0K_20;y`TJ-rgQ(VPUb^+S+<`cXziwP>d61fECd6l)}P7N2p>(
zn3teVWx9O%vXr*A_6b8n!|Oo$9?-IDJv}`p4C3PAj0y@031((y{@=fUmqhj-5@t(C
zNQeMxKH%x;xy#Yf@uZ1~$yEmjhshuV#DV^b1ln#5vKf~FK(ED_o11TUb8}ni?d`qC
z*4FlnySw`eP*f-bofMFlm#2Y4GuR7{9z9YAYT5+EtAU2>02+3&w6wI10T@LJKm)u3
z0|S-u7y!bYM~@y&0%}?x5fO0`7>L_etXSa%GC;)6&dwhgvW5f<VBEB6lf$7yhbHXU
zv18M`dGjU$15pheh>3}bLBIeC5)l!>6$T9b{r#-VmM!zxxpQaXoH=t=&YU^3^!@wy
zd|=7e)>d<8XJ>y+O-&=9Lac@WH7RY`vc+%V!iC+_r%&%*wQ7|YC~#q>v((kq`5G7)
zgc%tb87^JAloezn5HkTW^MVBnq*kw9Z82%mq@v#5-hQCp)1E(nE(A}BAbk7wZBd|~
z{B3M(BCV{f5`ls0l$n`nT~t)$R$N>hQ&3P)*Vfk7ynOlc_{WbQE5M>0#hGv4z7^fS
zf4@h4eSH)#;pE1}#g(O|rdH<W<`w~6l78aEiI5*Zen<n=GNWWBG|c+v&mZ~w_wU<W
qxpKt|s43{)y?Zu5aYc|Ex_SVSV*j+>YKy!80000<MNUMnLSTZFR%EaM
index b861e0ba5d896489d2bead8e9b2bea40678eccf5..30bce927b44693a8c2e437c08e88461ab9f9ca0a
GIT binary patch
literal 795
zc$@(n1LXXPP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#32;bRa{vGi!vFvd!vV){sAK>D02*{fSaefwW^{L9
za%BKeVQFr3E>1;MAa*k@H7+qQF!XYv0007tNkl<ZILnQbT}V@57{{NpbLLi<He`OW
zi1G`K3hSZ>Y;@6G1wlweq(?i7Ndz@0DKuMcXJ>OuMYCETgYY8yaGTZ4!VC#Q6a=FZ
z?LsTTkDZ-4PP(tR*PP2n%PxKw2mb%x^PclQ2jIjLKnO*FlBb(6mk8S417!{m&<>HH
zodZBS8-VW2TbccpUnzi+j^mPw?hoYo;VH?LuL5E8h=fT9fNnBO)sG<R^xJtTe||1T
z@OV)|NlH76lxFZF#k$8ygXcTJdZvIC1mL_2VDuqbvxpS8M3kcYj3}n73(8(3L<K~t
z{iL++OMe2#e<E4;FzDPi(DVC&^<;p-n+crn5MdO1*R?F5tad+AwN4{oUN$ZZRMdrG
zhn(XF@bo^=%`&m?89lCPUY~Y1fOgq~DBV0BgmTwb0LFD>t&xAdhU4GBwV66NJ1B`O
zs2L$ii@&eP8A9r3K?K!(&48!ZCN>D&2?lpNTpZ1gSB^@q&Zr9?g-~&C2&Hfnqaf9O
z<C4sRL(00ZL**;^s)959$*I;5qThv4+6|uwGS+=rVevkc8TfiAwaZo$EJ9eqV_*p*
z!W<X_seYDDX`HhqnuJ;`Nc|r{wl%0$wjpbJ>%wM$x{002CSMb#fjreygl~oTS9!++
zL}89<-=o^4Yt#%SC7ZpKnJuDOX_~IWOQl*xum@9t*|H>HTtMn)ax+>)&BnHQZH963
zu!Od!;gd*XiUg)GQa*r@{9a|v5Ft14`B+euWA)eM-TuMk-<;dG{eB<^2eUA{F~yPc
zL5%E=e_{Cn?}7qL_7>a=GTUsSY8<SLlomOLDOjHTSHaSvOp$ma<+*qKN*vx0VST)B
Z@)Kb4SM=4f?Pvf1002ovPDHLkV1gCLV&wn;
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -1862,20 +1862,38 @@ richlistitem[type~="action"][actiontype=
   height: 16px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
   -moz-margin-start: 2px;
   -moz-margin-end: 3px;
 }
 
 .tab-throbber {
   list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
+  -moz-animation-duration: 960ms;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-name: rotate-counterclockwise;
+  -moz-animation-timing-function: linear;
 }
 
 .tab-throbber[progress] {
   list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
+  -moz-animation-duration: 800ms;
+  -moz-animation-name: rotate-clockwise;
+}
+
+@-moz-keyframes rotate-clockwise {
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes rotate-counterclockwise {
+  to {
+    -moz-transform: rotate(-360deg);
+  }
 }
 
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
   min-height: 16px; /* corresponds to the max. height of non-textual tab contents, i.e. the favicon */
 }
 
 .tab-throbber[pinned],
 .tab-icon-image[pinned] {
index 3c8e71f5db658610223244b2e5938d6e3c7b6524..33075734e9ed322bad65b401a278c75cac78a3d3
GIT binary patch
literal 812
zc$@(&1JnG8P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#32;bRa{vGi!vFvd!vV){sAK>D02*{fSaefwW^{L9
za%BKeVQFr3E>1;MAa*k@H7+qQF!XYv0007;Nkl<ZILl-B|NlROq@*M^EDpp*K&%GD
zA~@7AFn|n@kdQ#e#z0&yEiGLqD=S+rBO_BKB_&k{6e|K^6Ch>=>49Nn1K5B#1*oY+
zS64SIDJjWe+O%mlQ>RX~Oixd@)6vn1P*qhe1Inc?Uc8tesE-AR8DR!6197a1ib`sJ
ze!j!+-@mni;*vlt0K_20;y`TJ-rgQ(VPUb^+S+<`cXziwP>d61fECd6l)}P7N2p>(
zn3teVWx9O%vXr*A_6b8n!|Oo$9?-IDJv}`p4C3PAj0y@031((y{@=fUmqhj-5@t(C
zNQeMxKH%x;xy#Yf@uZ1~$yEmjhshuV#DV^b1ln#5vKf~FK(ED_o11TUb8}ni?d`qC
z*4FlnySw`eP*f-bofMFlm#2Y4GuR7{9z9YAYT5+EtAU2>02+3&w6wI10T@LJKm)u3
z0|S-u7y!bYM~@y&0%}?x5fO0`7>L_etXSa%GC;)6&dwhgvW5f<VBEB6lf$7yhbHXU
zv18M`dGjU$15pheh>3}bLBIeC5)l!>6$T9b{r#-VmM!zxxpQaXoH=t=&YU^3^!@wy
zd|=7e)>d<8XJ>y+O-&=9Lac@WH7RY`vc+%V!iC+_r%&%*wQ7|YC~#q>v((kq`5G7)
zgc%tb87^JAloezn5HkTW^MVBnq*kw9Z82%mq@v#5-hQCp)1E(nE(A}BAbk7wZBd|~
z{B3M(BCV{f5`ls0l$n`nT~t)$R$N>hQ&3P)*Vfk7ynOlc_{WbQE5M>0#hGv4z7^fS
zf4@h4eSH)#;pE1}#g(O|rdH<W<`w~6l78aEiI5*Zen<n=GNWWBG|c+v&mZ~w_wU<W
qxpKt|s43{)y?Zu5aYc|Ex_SVSV*j+>YKy!80000<MNUMnLSTZFR%EaM
index 201d014c1fcd5ba76fff1fecdc7d8531ae473f17..6ab5e87b538305b9a46f713cf08ae25a325fb31a
GIT binary patch
literal 677
zc$@*H0$TlvP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#32;bRa{vGi!vFvd!vV){sAK>D02*{fSaefwW^{L9
za%BKeVQFr3E>1;MAa*k@H7+qQF!XYv0006MNkl<ZILnQbL2Qd*9L9hBKBG$-vSpc8
zzKCVm!JK4Sh{VXu$wIhDL?tZQ%|YT~2xAM`ggVkN2NH^As%tBwWkD8}%v_|~g##`d
zmj)59r(LaVt2+Gh=6k>QdH(PFy#E(t41dBYYD5Q}JQANphBLg>*emMhtpDqylfCpX
z#x*_=V$v0LWr*_K4%<J=Z<ZT(!2MNbhvyh@k_D=ImY~EBn2_kb#!upl_+|}Q#xv+K
zz9&B83;B%QWyfW-uwZbSgWTd7F<whB%6<C8RwDSsGR?JGQ7cvXxYE=Q*PGghwT5mk
z=CrEraGkp(7*gdV{j|+K=gfAabUQ<iX&P-ZPT2XOU95$3?3OqpViKR=GFDN8tJrqT
z9%>nDF<CgzB~<;W^1df|A2(Q8Ogv)}VpHQtqw%Nxrs_^r8p1kFQqlqC-;2AXL4YOR
zl-IORv>R{2n?aR3c*+%x#}wwGQU*Db1mnap(u`+=@hkrTgB+1T^?w<>Wu029hhdh(
zZGAjf3%%et7ucv<as5*~g)O#-=ILt;vX~V68PQRa>{CNIB@EVx?V_g8ND)@^iZ<SG
zNG99pVySjgHcRLdtMcOY!YUX9^)p7D8hMXmIY647I%fkP)nrrZ#ObP=^WqJnZ2rd-
zr$QzTykm#NyO^XkFUry^R{X9!uR(4itdRO~>q%8;adjR~u}ppeixl%7)dgZU00000
LNkvXXu0mjf1J5u=