MediaWiki talk:Gadget-Numerakri.css

Base64 encode images
How about base64 encoding the icon images? Saves an http request. And saves us from any possibility of commons vandalism affecting the gadget. The changes would be:

padding-left: 30px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAKCAYAAABBq/VWAAAABmJLR0QA/wD/AP+gvaeTAAABAUlEQVQoka3SvytFcRjH8VfHoa7EQMlgsChEYVCyWVwlf4Film7J/6CMNmVV/AGSpGS4NsUd/dgUKaWuQdI1nFOO4zjHcN/b5/n1+fY8X77pw6Lm0I8VDCSDHajioAkGbbjBER5QCjCDa/RmNIzFTXlMpvQQ3lHGIwYDTGMN26niKZwjLDDZwXJC36IdS+jBXYitOFlJFI7jEF0YRiPHpBW7+MAe3rCBfSyg/tcrX1BHN17xmWPSiA2eYx1gHas4ThdX/Dz8CJ5QyjGAC8wldCfuRb/1F2kTGBWtI4+JjNgszsT3DAoG1ESryOMyI3aKE2xCSyIRir5crWDof6liHldf/Mguk22gyLgAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: 0 0; }
 * 1) pt-numconvert {

and

.skin-modern #pt-numconvert { padding-left: 50px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAQCAYAAABk1z2tAAAABmJLR0QA/wD/AP+gvaeTAAABy0lEQVRIicWVO2sVURCAv0luDF4JQjBiQG3zL0Sw8gEaiZ2FNpLKWnsVsdHOIGoZCCR2tukEQRQLFfHRBSTiC4IJEcxncc+SZd3dm13wOtXZM3NmPua1UBC1qx4q3g9C1BF1pJ/RovphQExZzFCvqz/VdfW2OlxmeMOeDBrwTIr7Wn2RzufzBvvVR25LJaA62gKgow7V6OfVH+qYOqquqgsAQ+pR4B1wGrgFrNY4mgSWmgIC+4CFmv7aC3yOiLWI2AQ+AXuyoLPqE/VI+l4py6A6ob5sU371QKrMfFlvqZeSfkY9oW6plzPlWMH4L0B1Un3btj9zgKpLxUymIXmobqob6jN1F0AnItb6OB8HHgNTubtjQDRgHM+dzwIP1AsRsQUQEar3gYvAR+BURPwC6OzA+QbwPc+cvpsAFgdkJYOD3v4D5oAvwPGIqJyDqhJ31eVUovcNwLL3+RLfLNFfSbqTRV3l6OclItaBaeApvQy2lTngasn9q+S3/wqrmuKk66p3m1KlDF7rY3NH/apO1dnVAib9Tvq2+GZYre3ZtKCfq2/U3a0B/6Woh9Vv6r06o/8GmOLPpIE5B+VrZhb4PVisbYmIxfQXOQjwB2Z6ypI/S3l6AAAAAElFTkSuQmCC); background-position: 10px 50%; } Regards--Siddhartha Ghai (talk) 03:38, 4 October 2013 (UTC)


 * They can be protected on Commons if needed. The extra http request saving is nice, but thumbnails are very well cached. And manually converting to base64 encoded is in my opinion an unacceptable maintenance overhead that is not worth it. ResourceLoader is designed to make things more efficient without requiring you to sacrifice maintainability (e.g. a sprite that needs regenerating and new offsets, or a base64 encoded string that is hard to verify). Plus there is browser compatibility issues with base64 encoded urls (not all browsers support them, so you need to provide a fallback). This is exactly why you should let a machine do it instead of doing it manually. ResourceLoader already saves a great number of http requests for us by other techniques.
 * In fact, one of those techniques is base64 data uri encoding. Modules provided by the server (MediaWiki core, extensions) already get their images automatically base64 encoded and replaced in the stylesheet when the module is packaged by load.php. Inspect the Vector sidebar for example:

// load.php?module=skin.vector color: #4D4D4D; font-weight: normal; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAD1BMV…HdINQJCp1Ebv+ZlLYLaD4f4cbnDNi6MAO8KCHJ+7X02j3mzgMQe93HcQAAAABJRU5ErkJggg==) left center no-repeat; // skin/vector/screen.css color: #4D4D4D; font-weight: normal; /* @embed */ background: url(images/arrow-expanded.png) left center no-repeat;
 * 1) mw-panel.collapsible-nav .portal h3 {
 * 1) mw-panel.collapsible-nav .portal h3 {
 * See also ResourceLoader/Features. However this feature is not yet available for gadgets.
 * Anyway, I'd recommend keeping the code as easy to maintain as possible and instead letting the software do the performance improvements for you. That way it can also improve these techniques without having to edit 1000s of pages to update the technique. Krinkle (talk) 13:59, 4 October 2013 (UTC)
 * Right. I knew about RL embedding images, and about that not working for gadgets, which is precisely why I proposed we do this. However, I was unaware of needing fallbacks in case we do this. Thanks for the info.--Siddhartha Ghai (talk) 10:17, 5 October 2013 (UTC)

Icon issues with cologneblue skin
I just tested out the updated gadget (the current version) in cologneblue skin at https://hi.wikipedia.org/wiki/User:Siddhartha_Ghai?useskin=cologneblue Note to Krinkle: You can see what it looks like in the link. Gadget is enabled by default at hi-wp so no need to tinker with preferences.

The icon overlaps with the linked text अंक पतिवर्तन (in the hi interface)

The icon should either be hidden for that skin or the moved. Maybe use css to make it appear to the right of the text?

Regards--Siddhartha Ghai (talk) 05:26, 4 October 2013 (UTC)
 * The icon is overlapping because Cologne Blue has a stronger css selector on the  element than ours ( screenshot of inspector). The css   is being overwritten back to  . We can:
 * hide it by using
 * override the padding again
 * move it to the right
 * Krinkle (talk) 14:08, 4 October 2013 (UTC)
 * Thanks. I see that you've implemented the last one here. However, I don't see the icon in cologneblue skin in either chrome or FF on windows. (I did a hard refresh Ctrl+Shift+R in chrome several times, and I don't generally use FF; so this isn't a cache problem.) Chrome shows the padding, but not the icon. FF isn't showing either of these. Could you check if this is working?--Siddhartha Ghai (talk) 10:51, 5 October 2013 (UTC)
 * It works for me in Chrome (screenshot). Did you try on MediaWIki.org and/or updated it on the other wiki? Krinkle (talk) 18:50, 9 October 2013 (UTC)
 * Tried it here on mediawiki.org. Not working for me on chrome (screenshot)--Siddhartha Ghai (talk) 19:55, 10 October 2013 (UTC)
 * Apparently this css file is missing from MediaWiki:Gadgets-definition.--Siddhartha Ghai (talk) 20:03, 10 October 2013 (UTC)
 * Fixed, . Krinkle (talk) 22:43, 10 October 2013 (UTC)
 * Ok, it works now. But it appears prettier (tested in chrome) if the background position is changed to 60% 0. The icon appears closer to the text and seems fine both uselang en and hi.--Siddhartha Ghai (talk) 02:10, 18 October 2013 (UTC)
 * Both in "en" and in "he", when I test locally with background position "60% 0%" (and "40% 0") the icon goes through the text (which makes sense, the icon is 25px and the edge padding is 30px, so at most you can move it 5px, not 40%). Krinkle (talk) 04:00, 18 October 2013 (UTC)
 * Ok, what you're saying makes logical sense. What I'm seeing, however, is different. The text is wrapping to the next line and hence the icon isn't overlapping with the text, the overall effect seeming prettier.--Siddhartha Ghai (talk) 06:56, 22 October 2013 (UTC)