JS makes every project an open source project. For example what would you do if you VP of R&D came to you and says , "QA found out what one of MS products you used in development of latest version of you project don't work correctly for 15% of you customers, please fix it" ?
And it's less that one month till release ? And price tag of this version is in 6 to 7 figures area ? Pretty scary if we talking about a C++ dll in mids of .NET framework. But in our case it's just a minor problem.
But let's move closer to the problem. We using a MS virtual earth services for our mapping needs (great service by the way superior to Google maps in many aspects) and as you all of you know recently a Firefox had a new version 3.0 so during QA we noticed what moving a map by mouse in fire fox causes it to jump uncontrollably.
By examining the behavior it was apparent what in FF3 virtual earth incorrectly calculates mouse position relative to page scroll position. I understood the problem but now I need to find this issue and fix it. How do you do it when all you have it's 800kb (200kb gzipped) of minified JS to look at and it's hosted on external server so you can't modify it?
So first of all I wanted to turn the minified JS into normal JS , http://www.prettyprinter.de/
to the rescue. So I got nice looking script I made a search for scrollposition and found following interesting class with a couple of methods.
Gimme.Screen=new function()
{
this.getMousePosition=function(a)
{
if(!a)
a=window.event;
var b= {x:0,y:0};
if(typeof a.pageX!=="undefined"&&typeof a.x!=="undefined")
{
b.x=a.pageX;
b.y=a.pageY
}
else
{
var c=this.getScrollPosition();
b.x=a.clientX+c.x;
b.y=a.clientY+c.y
}
return b
};
this.getScrollPosition=function()
{
var a = {x:0,y:0};
if(typeof window.pageYOffset!=="undefined")
{
a.x=window.pageXOffset;
a.y=window.pageYOffset
}
else if(typeof document.documentElement.scrollTop!=="undefined")
{
a.x=document.documentElement.scrollLeft;
a.y=document.documentElement.scrollTop
}
else if(typeof document.body.scrollTop!=="undefined")
{
a.x=document.body.scrollLeft;
a.y=document.body.scrollTop
}
return a
}
}
From looking at it I saw 2 things
First of all scroll position is calculated correctly but used only for browser what don't support pageX, pageY parameters. I wanted to try and see what happen if I make FF to use this path.
How do you do it if you can't modify script ? Easily because JS is a dynamic language you can modify any object/method at runtime. So I just gave a new implementation for the getMousePosition method by inserting the code bellow into my page.
Gimme.Screen.getMousePosition=function(a)
{
if(!a)
a=window.event;
var b= {x:0,y:0};
var c=this.getScrollPosition();
b.x=a.clientX+c.x;
b.y=a.clientY+c.y
return b
};
I hit save , reloaded the page and looks like it's works. Issue solved and I can go home :)