Page MenuHomePhabricator

Twinkle broken by webfonts in sa and hi wikipedias
Closed, ResolvedPublic

Description

Author: sodabottle

Description:
Am not sure where to direct this, but this was reported in comments section of another issue i reported (now resolved - 33024). So i am filing a separate bug copying the contents of the comment

"One more problem arised is Twinkle has stopped working both in hindi as well
as sanskrit wikipedia. So either this new font script is cutting TW script."
-Mayur.


Version: unspecified
Severity: blocker

Details

Reference
bz33154

Event Timeline

bzimport raised the priority of this task from to Unbreak Now!.Nov 22 2014, 12:04 AM
bzimport set Reference to bz33154.

Can you please provide steps to reproduce?

mayurdce wrote:

I don't know what are the steps but TW is not working in Hindi and Sanskrit Wikipedia from the instant these web fonts were installed.I have tried en wiki script too but it is not working.

I can say the following for hindi wikipedia. When I'm logged out, I see the webfonts' choose font option. But after logging in, I get TW and the other gadgets I'm using, but the webfonts' option is missing.(using chrome 15.0.874.121 m on windows 7 home basic X64).

Gadgets I'm using:

Twinkle, HotCat, HotInterwiki, Commentsinlocaltime, and a personal simple script to add a portlet menu in p-cactions.

Will get back after trying different browser gadget combinations.

Hindi wikipedia
OS: Windows 7 X64 home basic
Browser: Google Chrome 15.0.874.121 m, Firefox 8.0, Safari 5.0.3(7533.19.4), Opera 11.51(build 1087)

Gadgets: HotCat, Hotinterwiki, Commentsinlocaltime, edittop, personal script for extra options in the p-variants(not p-cactions as earlier said), purge option in p-cactions, Twinkle.

Pages checked: One each in main, category, template, project(wikipedia), portal, mediawiki namespaces. One file page for file on commons, one file page for local file.

Twinkle disabled:

Google chrome, firefox, safari, opera: Webfonts' change font option visible. All other gadgets seem to work.

Twinkle enabled:

Google chrome, firefox, safari: Twinkle visible, webfonts' choose font option not visible except pages where Twinkle is inactive.

Google Chrome error:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

line 84

http://bits.wikimedia.org/hi.wikipedia.org/load.php?debug=false&lang=hi&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=20111213T185322Z

Firebug error:

Node cannot be inserted at the specified point in the hierarchy

line 85

http://bits.wikimedia.org/hi.wikipedia.org/load.php?debug=false&lang=hi&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=20111213T185322Z

Safari: Couldn't check for js errors.

Opera(Twinkle enabled): Neither twinkle nor webfonts visible. Couldn't check for js errors.

Other stuff:

HotCat not working in opera no matter twinkle is on or off.

There is also a possibility that webfonts might be interfering with article feedback and reftoolbar, but not sure about these yet.

mayurdce wrote:

Also transwiki translated messages is not working in both hindi and sanskrit wikipedia

On sa-wp; where Narayam and webfonts are both active, enabling
Twinkle(and no other scripts/gadgets) causes all three to vanish(checked in
google chrome only). None of the options(the twinkle menu, the narayam and
webfonts options) even appear on the screen.

As with hi, both Narayam and webfonts can still be seen on pages where twinkle
has no work(like special pages).

Disabling Narayam through the preferences doesn't seem to help, neither twinkle
nor webfonts appear after disabling it. There's most probably a clash somewhere
between webfonts and twinkle.

Comment 5 will be ignored in the context of this issue. Please do not create catchall bugs. That is unworkable for developers. The issue mentioned is already known in this tracker for a few weeks and should be fixed right now.

(In reply to comment #6)

On sa-wp; where Narayam and webfonts are both active, enabling
Twinkle(and no other scripts/gadgets) causes all three to vanish(checked in
google chrome only). None of the options(the twinkle menu, the narayam and
webfonts options) even appear on the screen.

As with hi, both Narayam and webfonts can still be seen on pages where twinkle
has no work(like special pages).

Disabling Narayam through the preferences doesn't seem to help, neither twinkle
nor webfonts appear after disabling it. There's most probably a clash somewhere
between webfonts and twinkle.

Two questions:

  • are you using the latest version of twinkle? Sorry, I have no idea how it works...
  • can you add the developer of twinkle on cc of this issue? Someone needs to debug the JS.

(In reply to comment #8)

(In reply to comment #6)

On sa-wp; where Narayam and webfonts are both active, enabling
Twinkle(and no other scripts/gadgets) causes all three to vanish(checked in
google chrome only). None of the options(the twinkle menu, the narayam and
webfonts options) even appear on the screen.

As with hi, both Narayam and webfonts can still be seen on pages where twinkle
has no work(like special pages).

Disabling Narayam through the preferences doesn't seem to help, neither twinkle
nor webfonts appear after disabling it. There's most probably a clash somewhere
between webfonts and twinkle.

Two questions:

  • are you using the latest version of twinkle? Sorry, I have no idea how it

works...

  • can you add the developer of twinkle on cc of this issue? Someone needs to

debug the JS.

The version of twinkle on sa is from June(not updated). I think Mayur takes care of it at sa(He's already on cc).

The version on hi is slightly more updated than sa(some modules are up-to-date with en, some are same as they were on june 3, version v2.0-17-ga2cdabc of the original). Mayur and me usually do the maintenance of twinkle on hi.

As for how it works, I don't know much but the basic is that its divided into various modules(which are kept as separate files on github). These modules are almost entirely independent of each-other and it should be possible to switch them on and off.

The original developer of twinkle is AzaToth. I'll leave him a note.

As for the debugging, could you be more specific on what you need?(Note:Treat me like a js layman).

(In reply to comment #9)

As for the debugging, could you be more specific on what you need?(Note:Treat
me like a js layman).

we're suffering from the same lack of knowledge, which is why we need someone more knowledgeable with JavaScript involved.

I was able to reproduce it. I used Firefox 8.0.1 on OSX 10.7.2.

  1. Log on to https://hi.wikipedia.org
  2. Go to https://hi.wikipedia.org/wiki/Special:Preferences?uselang=en
  3. Click tab "Gadgets"
  4. Enable only "Twinkle" in the section "सम्पादन उपकरण" and click "Save" at the bottom of the page.
  5. Goto https://hi.wikipedia.org/wiki/%E0%A4%AE%E0%A5%81%E0%A4%96%E0%A4%AA%E0%A5%83%E0%A4%B7%E0%A5%8D%E0%A4%A0?debug=true

Adding "?debug=true" causes the JavaScript to not be minified, allowing proper analysis. I do not know how to continue from here...

Observed: JavaScript error "Node cannot be inserted at the specified point in the hierarchy" as mentioned in comment 4.

This is the piece of code that the error originates from (line number may differ):

append: function() {
  return this.domManip(arguments, true, function( elem ) {
    if ( this.nodeType === 1 ) {

line 5644 -> this.appendChild( elem );

    }
  });
},

With web fonts disabled (preference in tab "Appearance") the error does not occur. With Twinkle disabled, the error also does not occur.

The web developer debugger also states that the use of getAttributeNode() is discourages and that getAttribute() should be used. Probably not related.

I'm adding a ZIP file with the 10k lines of script in case it helps...

Created attachment 9714
JS from comment 10

attachment bug33154.txt.zip ignored as obsolete

I've confirmed that the following exception is the cause for everything to fail.

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
load.php:5644| jQuery.fn.extend.append
load.php:5846| jQuery.fn.extend.domManip
load.php:5819| jQuery.fn.extend.domManip.parent
load.php:660| jQuery.extend.each
load.php:274| jQuery.fn.jQuery.each
load.php:5816| jQuery.fn.extend.domManip
load.php:5642| jQuery.fn.extend.append
ext.webfonts.js:288| mw.webfonts.buildMenuItems
....
(Using debug=true to get ext.webfonts.js to load unminified/uncombined, and WebKit Web Inspector to get full trace)

Directly speaking, the bug is due to a bad loop in the WebFonts module. Indirectly speaking it's caused by Twinkle modifying the browsers' native constructors prototypes, which is kind a against our conventions, but shouldn't break anything like this.

Code from WebFonts:

			for ( var scheme in config ) {
				var $fontLink = $( '<input type="radio" name="font" />' )
					.attr( 'id', fontID( config[scheme] ) )
					.val( config[scheme] );

				var $fontLabel =  $( '<label>' )
					.attr( 'for',fontID(config[scheme] ) )
					.append( $fontLink )
					.append( config[scheme] );

"config" here is an object created as an Array literal, and as such has the following prototypes injected by Twinke:

  • Array.prototype. uniq
  • Array.prototype.dups
  • Array.prototype.chunk

This loop is attempting to insert a function (!) into the DOM which obviously will fail terribly.

Should be fixed by r106398.

I'll report this upstream as well as Twinkle should not be messing with native prototypes.

To be confirmed after deployment.

The content of attachment 9714 has been deleted by

Krinkle <krinklemail@gmail.com>

who provided the following reason:

Contains all of jQuery, that's not the cause. Just the utility function being called indirectly.

The token used to delete this attachment was generated at 2011-12-16 00:07:29 UTC.

Fixed in r106398. Niklas will deploy in about 4-5 hours.

mayurdce wrote:

Yes TW is working in normal if i disable webfont in my preferences. (In reply to comment #7)

Comment 5 will be ignored in the context of this issue. Please do not create
catchall bugs. That is unworkable for developers. The issue mentioned is
already known in this tracker for a few weeks and should be fixed right now.

Ok, it was observed these day so webfont cold be a probable reason for that.But its ok if it is different bug.TW is working if i disable webfont in my preferences.

Was just deployed. Might have a 15 min. or so lag before the JavaScript is rebuilt. We're looking into Narayam and other extensions deployed on Wikimedia if it may cause similar issues.

(In reply to comment #14)

I'll report this upstream as well as Twinkle should not be messing with native
prototypes.

Sorry about that. I had feared something like this might happen... I'll make an effort to remove these hackish prototype modifications.

I believe i pointed out this issue before: https://bugzilla.wikimedia.org/show_bug.cgi?id=33024#c8

don't for-in loop over arrays....