r79581 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r79580‎ | r79581 | r79582 >
Date:14:25, 4 January 2011
Author:catrope
Status:ok (Comments)
Tags:
Comment:
Add /* @embed */ comments for URLs in all RL-ified CSS files, except in jQuery UI's default theme. This'll reduce the number of images loaded, especially for jQuery UI.
Modified paths:
  • /trunk/phase3/resources/jquery.tipsy/jquery.tipsy.css (modified) (history)
  • /trunk/phase3/resources/jquery.ui/themes/vector/jquery.ui.autocomplete.css (modified) (history)
  • /trunk/phase3/resources/jquery.ui/themes/vector/jquery.ui.button.css (modified) (history)
  • /trunk/phase3/resources/jquery.ui/themes/vector/jquery.ui.dialog.css (modified) (history)
  • /trunk/phase3/resources/jquery.ui/themes/vector/jquery.ui.theme.css (modified) (history)
  • /trunk/phase3/skins/common/config.css (modified) (history)
  • /trunk/phase3/skins/common/shared.css (modified) (history)

Diff [purge]

Index: trunk/phase3/resources/jquery.ui/themes/vector/jquery.ui.dialog.css
——@@ -23,10 +23,12 @@
2424 padding: 0.9em 1.4em 0.6em !important;
2525 }
2626 body .ui-dialog .ui-widget-header {
 27+ /* @embed */
2728 background: #f0f0f0 url(images/titlebar-fade.png) repeat-x scroll 50% 100% !important;
2829 }
2930 /* FIXME: Should just update the icon sprite if we're keeping this X */
3031 body .ui-dialog .ui-icon-closethick {
 32+ /* @embed */
3133 background: url(images/close.png) no-repeat 50% 50% !important;
3234 }
3335 body .ui-dialog .ui-dialog-buttonpane {
Index: trunk/phase3/resources/jquery.ui/themes/vector/jquery.ui.autocomplete.css
——@@ -1,7 +1,7 @@
22 /* Autocomplete
33 ----------------------------------*/
44 .ui-autocomplete { position: absolute; cursor: default; }
5 -.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
 5+.ui-autocomplete-loading { /* @embed */ background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
66
77 /* workarounds */
88 * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
Index: trunk/phase3/resources/jquery.ui/themes/vector/jquery.ui.theme.css
——@@ -13,26 +13,26 @@
1414 .ui-widget { font-family: sans-serif; font-size: 0.8em; }
1515 .ui-widget .ui-widget { font-size: 1em; }
1616 .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: sans-serif; font-size: 1em; }
17 -.ui-widget-content { border: none; background: #f2f5f7 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x; color: #362b36; }
 17+.ui-widget-content { border: none; /* @embed */ background: #f2f5f7 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x; color: #362b36; }
1818 .ui-widget-content a { color: #362b36; }
19 -.ui-widget-header { border: 1px solid #aed0ea; line-height: 1em; background: #ffffff url(images/ui-bg_highlight-soft_100_ffffff_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
 19+.ui-widget-header { border: 1px solid #aed0ea; line-height: 1em; /* @embed */ background: #ffffff url(images/ui-bg_highlight-soft_100_ffffff_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
2020 .ui-widget-header a { color: #222222; }
2121
2222 /* Interaction states
2323 ----------------------------------*/
24 -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #aed0ea; background: #d7ebf9 url(images/ui-bg_highlight-hard_80_d7ebf9_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #2779aa; }
 24+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #aed0ea; /* @embed */ background: #d7ebf9 url(images/ui-bg_highlight-hard_80_d7ebf9_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #2779aa; }
2525 .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #2779aa; text-decoration: none; }
26 -.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #74b2e2; background: #e4f1fb url(images/ui-bg_highlight-soft_100_e4f1fb_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #0070a3; }
 26+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #74b2e2; /* @embed */ background: #e4f1fb url(images/ui-bg_highlight-soft_100_e4f1fb_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #0070a3; }
2727 .ui-state-hover a, .ui-state-hover a:hover { color: #0070a3; text-decoration: none; }
28 -.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #cccccc; background: #f0f0f0 url(images/ui-bg_inset-hard_100_f0f0f0_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #000000; }
 28+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #cccccc; background: #f0f0f0 /* @embed */ url(images/ui-bg_inset-hard_100_f0f0f0_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #000000; }
2929 .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #000000; text-decoration: none; }
3030 .ui-widget :active { outline: none; }
3131
3232 /* Interaction Cues
3333 ----------------------------------*/
34 -.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #f9dd34; background: #ffef8f url(images/ui-bg_highlight-soft_25_ffef8f_1x100.png) 50% top repeat-x; color: #363636; }
 34+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #f9dd34; background: #ffef8f /* @embed */ url(images/ui-bg_highlight-soft_25_ffef8f_1x100.png) 50% top repeat-x; color: #363636; }
3535 .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
36 -.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #cd0a0a url(images/ui-bg_flat_15_cd0a0a_40x100.png) 50% 50% repeat-x; color: #ffffff; }
 36+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #cd0a0a /* @embed */ url(images/ui-bg_flat_15_cd0a0a_40x100.png) 50% 50% repeat-x; color: #ffffff; }
3737 .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
3838 .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
3939 .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
——@@ -43,14 +43,14 @@
4444 ----------------------------------*/
4545
4646 /* states and images */
47 -.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_72a7cf_256x240.png); }
48 -.ui-widget-content .ui-icon {background-image: url(images/ui-icons_72a7cf_256x240.png); }
49 -.ui-widget-header .ui-icon {background-image: url(images/ui-icons_72a7cf_256x240.png); }
50 -.ui-state-default .ui-icon { background-image: url(images/ui-icons_3d80b3_256x240.png); }
51 -.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_2694e8_256x240.png); }
52 -.ui-state-active .ui-icon {background-image: url(images/ui-icons_666666_256x240.png); }
53 -.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
54 -.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
 47+.ui-icon { width: 16px; height: 16px; /* @embed */ background-image: url(images/ui-icons_72a7cf_256x240.png); }
 48+.ui-widget-content .ui-icon { /* @embed */ background-image: url(images/ui-icons_72a7cf_256x240.png); }
 49+.ui-widget-header .ui-icon { /* @embed */ background-image: url(images/ui-icons_72a7cf_256x240.png); }
 50+.ui-state-default .ui-icon { /* @embed */ background-image: url(images/ui-icons_3d80b3_256x240.png); }
 51+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon { /* @embed */ background-image: url(images/ui-icons_2694e8_256x240.png); }
 52+.ui-state-active .ui-icon { /* @embed */ background-image: url(images/ui-icons_666666_256x240.png); }
 53+.ui-state-highlight .ui-icon { /* @embed */ background-image: url(images/ui-icons_2e83ff_256x240.png); }
 54+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon { /* @embed */ background-image: url(images/ui-icons_ffffff_256x240.png); }
5555
5656 /* positioning */
5757 .ui-icon-carat-1-n { background-position: 0 0; }
——@@ -246,4 +246,4 @@
247247
248248 /* Overlays */
249249 .ui-widget-overlay { background: #000000; opacity: .75;filter:Alpha(Opacity=75); }
250 -.ui-widget-shadow { margin: -7px 0 0 -7px; padding: 7px; background: #000000 url(images/ui-bg_flat_70_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
\ No newline at end of file
 250+.ui-widget-shadow { margin: -7px 0 0 -7px; padding: 7px; /* @embed */ background: #000000 url(images/ui-bg_flat_70_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
\ No newline at end of file
Index: trunk/phase3/resources/jquery.ui/themes/vector/jquery.ui.button.css
——@@ -35,6 +35,7 @@
3636 padding: 0.2em 0.6em 0.15em !important;
3737 margin: 0.5em 0 0.5em 0.4em !important;
3838 border: 1px solid #a6a6a6 !important;
 39+ /* @embed */
3940 background: #f2f2f2 url(images/button-off.png) repeat-x scroll 50% 100% !important;
4041 cursor: pointer;
4142 font-size: 1em;
——@@ -44,16 +45,19 @@
4546 }
4647 body button.ui-button:hover {
4748 border-color: #6e7273;
 49+ /* @embed */
4850 background: #e1e1e1 url(images/button-over.png) repeat-x scroll 50% 100% !important;
4951 }
5052 body button.ui-button:active,
5153 body button.ui-button:focus {
5254 border-color: #707271;
 55+ /* @embed */
5356 background: #bfbfbf url(images/button-down.png) repeat-x scroll 50% 100% !important;
5457 }
5558 body button.ui-button.disabled {
5659 color: #7f7f7f;
5760 border-color: #cccccc;
 61+ /* @embed */
5862 background: #f2f2f2 url(images/button-disabled.png) repeat-x scroll 50% 100% !important;
5963 }
6064 /* Disables the annoying dashed border Firefox puts on active buttons */
Index: trunk/phase3/resources/jquery.tipsy/jquery.tipsy.css
——@@ -22,6 +22,7 @@
2323 }
2424 .tipsy-arrow {
2525 position: absolute;
 26+ /* @embed */
2627 background: url('images/tipsy.png') no-repeat top left;
2728 width: 9px;
2829 height: 5px;
Index: trunk/phase3/skins/common/config.css
——@@ -95,6 +95,7 @@
9696 .config-message {
9797 display: list-item;
9898 line-height: 1.5em;
 99+ /* @embed */
99100 list-style-image: url(images/bullet.gif);
100101 list-style-type: square;
101102 }
Index: trunk/phase3/skins/common/shared.css
——@@ -581,6 +581,7 @@
582582
583583 /* feed links */
584584 a.feedlink {
 585+ /* @embed */
585586 background: url("images/feed-icon.png") center left no-repeat;
586587 padding-left: 16px;
587588 }
——@@ -843,6 +844,7 @@
844845
845846 .mw-remove-category {
846847 padding: 8px;
 848+ /* @embed */
847849 background-image: url(images/remove.png);
848850 background-position: center center;
849851 background-repeat: no-repeat;
——@@ -850,12 +852,14 @@
851853
852854 .mw-ajax-addcategory {
853855 padding-left: 20px;
 856+ /* @embed */
854857 background-image: url(images/add.png);
855858 background-position: left center;
856859 background-repeat: no-repeat;
857860 }
858861
859862 .mw-ajax-loader {
 863+ /* @embed */
860864 background-image: url(images/ajax-loader.gif);
861865 background-position: center center;
862866 background-repeat: no-repeat;
——@@ -867,6 +871,7 @@
868872 .mw-small-spinner {
869873 padding: 10px !important;
870874 margin-right: 0.6em;
 875+ /* @embed */
871876 background-image: url(images/spinner.gif);
872877 background-position: center center;
873878 background-repeat: no-repeat;
——@@ -905,6 +910,7 @@
906911 padding-left: 15px;
907912 margin-left: 2px;
908913 margin-bottom: -8px;
 914+ /* @embed */
909915 background-image: url('images/help-question.gif');
910916 background-position: left center;
911917 background-repeat: no-repeat;
——@@ -914,6 +920,7 @@
915921 font-size: .8em;
916922 }
917923 .mw-help-field-hint:hover {
 924+ /* @embed */
918925 background-image: url('images/help-question-hover.gif');
919926 }
920927 .mw-help-field-data {
——@@ -925,5 +932,5 @@
926933 }
927934 .tipsy { padding: 5px 5px 10px; font-size: 12px; position: absolute; z-index: 100000; overflow: visible; }
928935 .tipsy-inner { padding: 5px 8px 4px 8px; background-color: #d6f3ff; color: black; border: 1px solid #5dc9f4; max-width: 300px; text-align: left; }
929 -.tipsy-arrow { position: absolute; background: url( 'images/tipsy-arrow.gif' ) no-repeat top left; width: 13px; height: 13px; }
 936+.tipsy-arrow { position: absolute; /* @embed */ background: url( 'images/tipsy-arrow.gif' ) no-repeat top left; width: 13px; height: 13px; }
930937 .tipsy-se .tipsy-arrow { bottom: -2px; right: 10px; background-position: 0% 100%; }

Follow-up revisions

RevisionCommit summaryAuthorDate
r798131.17: MFT r78093, r79245, r79570, r79571, r79573, r79574, r79581, r79582, r79...catrope13:20, 7 January 2011
r79863Per r79581 CR, add @embed comments to jQuery UI's default theme's CSS too, an...catrope15:54, 8 January 2011

Comments

#Comment by Krinkle (talk | contribs)   09:10, 7 January 2011

Just for the record, why not in the default theme ?

I have a guess but in case someone wants to be bold, I'd like to be sure. Guess: The other files are only loaded when needed thus the files are needed and embedding saves a http request. Default theme is also loaded when not needed and embedding imgs would download these embeds even if not needed which would make the overal load bigger for most page views.

#Comment by Catrope (talk | contribs)   13:12, 7 January 2011

No, it's just a reluctance on my part to mess with JUI's default theme, which is probably a bit silly of me. I figured we didn't use it, but that's not true either: the default theme is used in non-Vector skins. Will follow up for the default theme.

And no, the default theme is never loaded when unneeded. RL simply chooses the Vector theme when skin=vector and the default theme otherwise, so both have equal use for embedding.

#Comment by Catrope (talk | contribs)   15:56, 8 January 2011

r79863

Status & tagging log