Uncaught ReferenceError: WebKitPoint is not defined

Question

I use Sencha Touch 1.1.1

Yesterday when Google Chrome was updated to 39 it has started to give this error

Uncaught ReferenceError: WebKitPoint is not defined

Because they have removed WebKitPoint. Sencha Touch has a code with WebKitPoint, located here http://cdn.sencha.io/touch/sencha-touch-1.1.1/sencha-touch.js at line 6. Yeah.

getXY: function() {
    var a = window.webkitConvertPointFromNodeToPage(this.dom, new WebKitPoint(0, 0));
    return [a.x, a.y]
}

I think WebKitPoint is some kind of function object {x:0, y:0} but I was unable to make/create what the JavaScript code wants; I wrote this WebKitPoint = {x:0, y:0} but it gives error again, this time says that it is not a function.

Also I have found this: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/pIbpN_8Lqpg

tl;dr Google Chrome 39 no longer supports WebKitPoin. How can I emulate or replace it?

Answer 1

You can try replacing

var point = window.webkitConvertPointFromNodeToPage(this.dom, new WebKitPoint(0, 0));
return [point.x, point.y]

with

var rect = this.dom.getBoundingClientRect();
return [rect.left, rect.top];

Source: https://code.google.com/p/chromium/issues/detail?id=434976#c10

Code Credits: Philip Jägenstedt

Answer 2

Following on Ahmad's excellent answer, you could also just override everything at the beginning of your script (before sencha-touch.js is loaded):

WebKitPoint = function(x,y) { };
window.webkitConvertPointFromNodeToPage = function(dom, unusedWebKitPoint) {
    var rect = dom.getBoundingClientRect();
    return [rect.left, rect.top];
};