Incomplete Dash Fixes in Chrome

[parkr]

I get this error in my Chrome DOM Inspector: Uncaught TypeError: Cannot read property 'id' of null

Unfortunately, it doesn't give me any file names or line numbers (or even function name!) associated

Here's a screenshot:

And another (from several hours later, just to make sure it wasn't me):

I'm stumped.

---

Specs: Chrome 12.0 Mac OS X 10.6.8 MissingE Version: Latest as of July 19, 2011 at 11pm (v1.7.4)

'Missing e' Startup on http://www.tumblr.com/dashboard safeDash: active dashLinksToTabs: active bookmarker: active unfollower: inactive followChecker: inactive sidebarTweaks: active magnifier: active dashboardFixes: active askFixes: active replyReplies: active timestamps: active betterReblogs: active reblogYourself: active

[jcutler]

Right now, I am registering an onSuccess handler to Tumblr's Prototype AJAX calls to trigger a MissingEajax event. All of the features which normally ran on DOMNodeInserted events now run on MissingEajax events.

The MissingEajax even is created as a MessageEvent, with the data field populated with the ids of all the new posts.

My guess is that every once in a while, the MissingEajax event handlers are getting run before the insertion of the new posts has completed.

I'll have to look into it.

[jcutler]

The easy way around it would be to have the AJAX call trigger an intermediate event, say MissingEajaxInsert. One handler for that could then check for the existence of the nodes in question and fire a MissingEajax event when they are there (or using setTimeout to wait until they are).

[parkr]

It may be the same issue that caused the creation of jQuery's live function - when AJAX-ed objects are brought in, they're not being passed through the same filters that the objects from the original load are being passed through.

Could that be it? I can't imagine, considering the DOMNodeInserted stuff worked. I'm just not as familiar with your code as you are, so I was unsuccessful!

[parkr]

That last comment was re your first comment, not the second.

That may work, but it would be a hack for sure. Everything should be triggered on the MissingEajax event (when more posts are brought in), right?

[jcutler]

The thing is that MissingEajax is triggered when the AJAX request finishes. Not necessarily when it is processed (nodes inserted). If the processing is slow enough, the handlers can run ahead (after AJAX finishes) and find that the nodes haven't been added yet.

I intended MissingEajax to mean when new posts have been added to the DOM, but that just may not be the case.

[jcutler]

I should probably put a max number of retries on that...

[jcutler]

Parker, are you using the released version or are you building an unpackaged version from the source. If the latter, can you see if my changes last night fixed the issue?

[parkr]

Nope! I just tried it again (I build from an unpackaged version of the source) after pulling and it's right when more posts are being brought in via AJAX that the change isn't happening. Hm.

[jcutler]

MissingEajaxInsert should always be fired. At the very least, it should be all or nothing, not intermittent.

Try adding this to the MissingEajaxInsert handler:

console.log("AJAX done. First post: " + e.originalEvent.data.list[0]);

You'll be able to see if the event was fired. You might as well add something like this to the beginning of checkAjaxReady to see if maybe the problem is there:

console.log("checkAjaxReady (" + tries + "). First post: " + data.list[0]);

I don't suppose you have an easy way to repeat this?

[parkr]

Here's something.

A post interested me and I hovered over the "reblog" button. It looks like your one-click reblogs feature is still working. I'll try what you posted above.

[parkr]

Easy way for me to repeat this is to load new articles. It happens every time, without fail. Icons aren't showing up.

[jcutler]

That is unrelated. The quick reblog menu uses jQuery.live on the mouseover event. Changing the icons can't be triggered like that.

[parkr]

Inserted those lines where appropriate, but nothing came of it. I don't see any logs. This whole thing is just confusing.

I even went to chrome://extensions to reload the plugin... it don't understand why this wouldn't be called, truthfully.

[jcutler]

You must have something interfering with it! Like another extension or something. I don't see how neither handler runs, especially considering the error you mentioned in your first note.

[parkr]

You think so? The only other extension that runs is a plugin that converts mailto links to urls that open up a new message with my gmail acct in my browser. Shouldn't bother this at all.

[jcutler]

It shouldn't, but I am at a complete loss as to why the handlers are not being run.

Unless for some reason the event is never triggered? Try adding a console log output to where it triggers MissingEajaxInsert

[jcutler]

How often does this happen? Is there any way you know of to make it more repeatable?

[parkr]

It happens every time I load in more posts. Every time.

I'll try that.

[jcutler]

It doesn't happen at all for me. Not at all.

[jcutler]

What version of Chrome?

[parkr]

v12.0.742.122 (latest build). I'll take a look at my other extensions, but they shouldn't be having any issue.

[jcutler]

This is most likely caused by NoScript or Ad Block Plus blocking some script loaded into tumblr (usually quant.js) that for some reason breaks a lot of other scripts on the page. Try configuring either of those to let that script run.

[parkr]

No Adblock or anything, but I use hosts.withlove. quant.js never loads, though. Interesting.

[jcutler]

Try allowing it to load and see if it fixes the issue.

[jcutler]

I assume that this issue has been dealt with by allowing quant.js to load. I will continue to look into it, but at least there is a workaround.

[jcutler]

On second thought, I just looked into it. It seems that Tumblr's AJAX onComplete handler for posts loaded in the endless dash makes a call to a function in quant.js without making sure that the function exists. It is the last call in the handler, so that's why Tumblr finishes its work, but the onComplete handler that Missing e registers isn't fired as a result.

To fix this, I've added code to common/ajaxEvents.js to create a dummy function that is expected. Tumblr's onComplete handler won't fail and Missing e's onComplete event will fire.

I have to finish this fix, though, because right now it prevents the __qc variable from being set by quant.js.

See: 4f6f8ad6e082d4a19ac85df1a4d8cee87578af09

[jcutler]

I worked out a better solution in 460806c13e8f5f2223bd04c762587d505b32d520

The quant.js script checks if there is already a __qc variable defined, so it is dicey for me to override it because what if I run before it is loaded? I fill __qc.firepixel with a dummy function, and when the quant.js script is run, it doesn't do anything because __qc is already defined. The last thing I want to do is give Tumblr another reason to target Missing e.

Instead, PrototypeJS has a global AJAX onException handler that fires if there is any error when running the request (or any of its handlers). In this case, the onComplete handler throws a ReferenceError when trying to access the __qc variable. So, I register an onException handler which ignores the reason it got there and runs my onComplete handler anyway.

This will go into the next release.

[parkr]

Awesome!! It all seems to work now! Many thanks.