Refactor the css so that embedded images are optimally loaded

Change-Id: If19d20fb22afafbf62c355394dcda825a0151ac6

Resources.php

@@ -249,6 +249,14 @@ $wgResourceModules['jquery.webfonts'] = array(
 	'targets' => array( 'desktop', 'mobile' ),
 ) + $resourcePaths;
 
+$wgResourceModules['ext.uls.pt'] = array(
+	'styles' => 'resources/css/ext.uls.pt.css',
+) + $resourcePaths;
+
+$wgResourceModules['ext.uls.interlanguage'] = array(
+	'styles' => 'resources/css/ext.uls.interlanguage.css',
+) + $resourcePaths;
+
 // A module named rangy is defined in VisualExtension with more features of rangy.
 // Here we need only the core library. This module is loaded dynamically from
 // client when rangy is undefined. If VE is present rangy will be defined, the module

UniversalLanguageSelector.hooks.php

@@ -45,7 +45,7 @@ class UniversalLanguageSelectorHooks {
 	 * Hook: BeforePageDisplay
 	 */
 	public static function addModules( $out, $skin ) {
-		global $wgULSGeoService, $wgULSEventLogging;
+		global $wgULSPosition, $wgULSGeoService, $wgULSEventLogging;
 
 		$user = $out->getUser();
 		if ( !$user->getBoolOption( 'uls-enable') ) {
@@ -76,6 +76,12 @@ class UniversalLanguageSelectorHooks {
 			$out->addModules( 'ext.uls.interface' );
 		}
 
+		if ( $wgULSPosition === 'personal' ) {
+			$out->addModules( 'ext.uls.pt' );
+		} else {
+			$out->addModules( 'ext.uls.interlanguage' );
+		}
+
 		return true;
 	}
 

resources/css/ext.uls.css

@@ -1,77 +1,3 @@
-/*
- * The trigger can be placed in the personal toolbar near the username
- * or near the interlanguage links.
- */
-
-/*
- * A hack to load the icon before the rest of the module is lazy-loaded.
- * Copied from jquuery.uls.css with the path changed.
- */
-.uls-trigger {
-	/* @embed */
-	background: transparent url('../../lib/jquery.uls/images/icon-language.png') no-repeat scroll left center;
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
-	/* @embed */
-	background-image: -moz-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
-	padding-left: 30px;
-}
-
-#pt-uls a.uls-trigger {
-	padding-left: 30px;
-	/* Fix alignment in vector: https://bugzilla.wikimedia.org/59239 */
-	line-height: 1;
-}
-
-#p-lang .uls-settings-trigger {
-	/* @embed */
-	background: transparent url('../images/cog-sprite.png') no-repeat right top;
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
-	/* @embed */
-	background-image: -moz-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
-	height: 16px;
-	width: 14px;
-	float: right;
-	cursor: pointer;
-}
-
-.skin-vector #p-lang .uls-settings-trigger {
-	/* Put it in the middle of the first row of the section title */
-	margin-top: 3px;
-}
-
-#p-lang .uls-settings-trigger:hover {
-	background-position: right -16px;
-}
-
-/* Opera for some inexplicable reason confuses right and left padding with */
-/* RTL text direction here (bug 45142). x:-o-prefocus won't match anything, */
-/* but will make other browsers ignore this rule. */
-x:-o-prefocus, body.rtl li#pt-uls {
-	/* @noflip */
-	direction: ltr;
-}
-
-#settings-block {
-	border-top: 1px solid #C9C9C9;
-	background: #f8f8f8;
-	background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0));
-	background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0);
-	background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0);
-	background: -o-linear-gradient(top, #FBFBFB, #F0F0F0);
-	background: linear-gradient(#FBFBFB, #F0F0F0);
-	padding-left: 10px;
-	line-height: 1.2em;
-	-webkit-border-radius: 0 0 5px 5px;
-	-moz-border-radius: 0 0 5px 5px;
-	border-radius: 0 0 5px 5px;
-}
-
 .uls-menu a {
 	cursor: pointer;
 }
@@ -96,18 +22,6 @@ x:-o-prefocus, body.rtl li#pt-uls {
 	position: absolute;
 }
 
-#settings-block div.display-settings-block,
-#settings-block div.input-settings-block {
-	display: inline-block;
-	margin: 8px 15px;
-	color: #565656;
-}
-
-#settings-block div.display-settings-block:hover,
-#settings-block div.input-settings-block:hover {
-	color: #252525;
-}
-
 .uls-ui-languages button {
 	width: 23%;
 	text-overflow: ellipsis;
@@ -129,31 +43,4 @@ button.uls-more-languages {
 
 div.display-settings-block:hover .settings-text {
 	color: #252525;
-}
+}
-
-/* Ime menu customizations */
-.ime-perime-help {
-	display: none;
-}
-
-.ime-checked .ime-perime-help {
-	display: inline-block;
-	width: 20px;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	right: 0;
-	opacity: 0.75;
-	padding: 0;
-	/* @embed */
-	background: transparent url('../images/help.png') left center no-repeat;
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/help.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../images/help.svg');
-}
-
-.ime-checked .ime-perime-help:hover {
-	opacity: 1;
-}

resources/css/ext.uls.inputsettings.css

@@ -125,3 +125,30 @@ div.input-settings-block {
 .uls-input-settings .uls-ime-help {
 	margin-left: 10px;
 }
+
+/* Ime menu customizations */
+.ime-perime-help {
+	display: none;
+}
+
+.ime-checked .ime-perime-help {
+	display: inline-block;
+	width: 20px;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	opacity: 0.75;
+	padding: 0;
+	/* @embed */
+	background: transparent url('../images/help.png') left center no-repeat;
+	/* @embed */
+	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/help.svg');
+	/* @embed */
+	background-image: linear-gradient(transparent, transparent), url('../images/help.svg');
+}
+
+.ime-checked .ime-perime-help:hover {
+	opacity: 1;
+}

resources/css/ext.uls.interlanguage.css

@@ -0,0 +1,23 @@
+#p-lang .uls-settings-trigger {
+	/* @embed */
+	background: transparent url('../images/cog-sprite.png') no-repeat right top;
+	/* @embed */
+	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
+	/* @embed */
+	background-image: -moz-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
+	/* @embed */
+	background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
+	height: 16px;
+	width: 14px;
+	float: right;
+	cursor: pointer;
+}
+
+.skin-vector #p-lang .uls-settings-trigger {
+	/* Put it in the middle of the first row of the section title */
+	margin-top: 3px;
+}
+
+#p-lang .uls-settings-trigger:hover {
+	background-position: right -16px;
+}

resources/css/ext.uls.languagesettings.css

@@ -1,3 +1,18 @@
+#settings-block {
+	border-top: 1px solid #C9C9C9;
+	background: #f8f8f8;
+	background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0));
+	background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0);
+	background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0);
+	background: -o-linear-gradient(top, #FBFBFB, #F0F0F0);
+	background: linear-gradient(#FBFBFB, #F0F0F0);
+	padding-left: 10px;
+	line-height: 1.2em;
+	-webkit-border-radius: 0 0 5px 5px;
+	-moz-border-radius: 0 0 5px 5px;
+	border-radius: 0 0 5px 5px;
+}
+
 .uls-menu h3 {
 	border-bottom: medium none;
 	font-size: 14pt;

resources/css/ext.uls.pt.css

@@ -0,0 +1,61 @@
+/*
+ * The trigger can be placed in the personal toolbar near the username
+ * or near the interlanguage links.
+ */
+
+/*
+ * A hack to load the icon before the rest of the module is lazy-loaded.
+ * Copied from jquery.uls.css with the path changed.
+ */
+.uls-trigger {
+	/* @embed */
+	background: transparent url('../../lib/jquery.uls/images/icon-language.png') no-repeat scroll left center;
+	/* @embed */
+	background-image: -webkit-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
+	/* @embed */
+	background-image: -moz-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
+	/* @embed */
+	background-image: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
+	padding-left: 30px;
+}
+
+#pt-uls a.uls-trigger {
+	padding-left: 30px;
+	/* Fix alignment in vector: https://bugzilla.wikimedia.org/59239 */
+	line-height: 1;
+}
+
+/* Opera for some inexplicable reason confuses right and left padding with */
+/* RTL text direction here (bug 45142). x:-o-prefocus won't match anything, */
+/* but will make other browsers ignore this rule. */
+x:-o-prefocus, body.rtl li#pt-uls {
+	/* @noflip */
+	direction: ltr;
+}
+
+#settings-block {
+	border-top: 1px solid #C9C9C9;
+	background: #f8f8f8;
+	background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0));
+	background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0);
+	background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0);
+	background: -o-linear-gradient(top, #FBFBFB, #F0F0F0);
+	background: linear-gradient(#FBFBFB, #F0F0F0);
+	padding-left: 10px;
+	line-height: 1.2em;
+	-webkit-border-radius: 0 0 5px 5px;
+	-moz-border-radius: 0 0 5px 5px;
+	border-radius: 0 0 5px 5px;
+}
+
+#settings-block div.display-settings-block,
+#settings-block div.input-settings-block {
+	display: inline-block;
+	margin: 8px 15px;
+	color: #565656;
+}
+
+#settings-block div.display-settings-block:hover,
+#settings-block div.input-settings-block:hover {
+	color: #252525;
+}