From 9cf7901ec9c1afe41a1d0a4548b887bab8f48fab Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Tue, 6 Aug 2019 15:06:08 +0100 Subject: [PATCH] Remove @embed page load delays (and misc optimisations) * page-fade: Remove redundant 'background-image' PNG fallback for IE6-8 in '#mw-page-base' because the vertical-gradient() already creates a solid fallback color which seems good enough for IE6-8. Remove the 'background-color' rule which was only there to fill the gap above the the IE6-8 PNG image fallback, which in turn overrode the background-color rule from vertical-gradient. The background-repeat rule is also redundant with background-image gone. * watch-icon-loading: This is only used when the JS code is active and the user clicks the watch star. It does not need a PNG fallback, as it is only needed in Grade A browsers where the JS executes, which are expected to support SVG. Also removed the embedding as the rendering of article text on page load should not be delayed by an icon that might be used if and when the user clicks on the watchstar (and irrelevant to logged-out users). Bug: T121730 Change-Id: Ief4b80432fbe2ce7ebddf429f02c161048ed61d1 --- components/common.less | 1 + components/navigation.less | 8 ++------ components/watchstar.less | 2 +- images/page-fade.png | Bin 114 -> 0 bytes images/watch-icon-loading.png | Bin 364 -> 0 bytes 5 files changed, 4 insertions(+), 7 deletions(-) delete mode 100644 images/page-fade.png delete mode 100644 images/watch-icon-loading.png diff --git a/components/common.less b/components/common.less index 792d152..ee67ab2 100644 --- a/components/common.less +++ b/components/common.less @@ -158,6 +158,7 @@ div.emptyPortlet { } ul { + // No need for PNG fallback. Fallback is browser default (a smaller, also black, circle). .list-style-image( 'images/bullet-icon.svg' ); } diff --git a/components/navigation.less b/components/navigation.less index 3506aa7..ba1e966 100644 --- a/components/navigation.less +++ b/components/navigation.less @@ -16,12 +16,8 @@ /* Head */ #mw-page-base { height: 5em; - background-color: @background-color-base; - /* This image is only a fallback (for IE 6-9), so we do not @embed it. */ - background-image: url( images/page-fade.png ); - .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% ); background-position: bottom left; - background-repeat: repeat-x; + .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% ); } #mw-head-base { @@ -98,7 +94,7 @@ .body { margin-left: @menu-main-body-margin-left; padding-top: 0; - .background-image( 'images/portal-break.png' ); + background-image: url( images/portal-break.png ); background-repeat: no-repeat; ul { diff --git a/components/watchstar.less b/components/watchstar.less index 37f0739..c1bcf9d 100644 --- a/components/watchstar.less +++ b/components/watchstar.less @@ -39,7 +39,7 @@ #ca-unwatch.icon a.loading, #ca-watch.icon a.loading { - .background-image-svg( 'images/watch-icon-loading.svg', 'images/watch-icon-loading.png' ); + background-image: url( images/watch-icon-loading.svg ); .rotation( 700ms ); /* Suppress the hilarious rotating focus outline on Firefox */ outline: 0; diff --git a/images/page-fade.png b/images/page-fade.png deleted file mode 100644 index 12623986932f5e80891d64c62aaa86c6d6cd4f04..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 114 zcmeAS@N?(olHy`uVBq!ia0vp^j6kfz!2~3=U0uz9l%=POV@L&KXm2YcgM*0U#{cKu zTh*B}D!sH)dh~6znd7R@wa4E%e*D*7zPadc{NChibB=$l`*vsQa>mRQW$Rv>{~*&D NJYD@<);T3K0RR_=C)WS~ diff --git a/images/watch-icon-loading.png b/images/watch-icon-loading.png deleted file mode 100644 index 48c470351281ed49ee8118deff35a84e9ad5ef2f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 364 zcmV-y0h9iTP)%^V*neS~=7Q&Wk}kX}{}OAO)#48TEQG&rzgI z;#vnW#dqTSzI;Xy1k@s-G2#%HG^C}pIt=9d`};D>GRZlY-+{)6b8v7VNkiJ_7Bz4T zDd{&nwFyYW-a=87YMA(d_)bh?NcLe+_1$`ufxw0M+5=;^2&rV>0WFHK`l0*=uIqX* zDEVpoI=8mA0trxyi;D|R*K?!o?QI_|hkiPJ!^g+R{OamTSe6xIu5(XUa(Q_vPESuc zLdJhO`?D~)gW!HgkwY2828n^f2T1S3=Ym=AxWxppG&7%png9T=Hog?vkgkLP0000< KMNUMnLSTY!Kc(#e