Web 3.0, 6 Bladed Razors, 7 Minute Abs » Firefox

Minor Annoyances with Firefox Development

Zach Leatherman — Sun, 23 Mar 2008 20:39:40 +0000

When you’re developing web applications in Firefox, do you find yourself constantly clearing your cache? Cache is a useful facet of web browsing for everything but the continuous testing environment of web development. Here’s a nice alternative so that you don’t have to disable your cache entirely:

Use the Firefox Plug-In called (humorously enough) JohnnyCache. I added the pattern ‘http://localhost/’ to my preferences and now I don’t have to worry about cache on my local machine anymore. Simple, easy, effective.

Now only if I knew how to disable the Firefox preference that autopopulates form fields with default values when F5 is hit to refresh the page. Try creating a page with a single text field, type a value into the form, and then hit F5 to refresh the page. Your value will be prefilled into the form.

I find myself always hitting “CTRL+L” (goes to the Location Bar) and “Enter” to avoid that one. I looked through about:config, but only found: signon.prefillForms (related to usernames and passwords), and browser.formfill.enable (related to autocomplete dropdowns for forms, not default values).

Anyone know an easier method?

Problems with Looping through window.setInterval

Zach Leatherman — Mon, 24 Dec 2007 03:46:24 +0000

Look at this code. What do you expect to be the outcome?

var d = new Date();
var r = [];
for(var j=0,k=2;j<k ;j++) {
    window.setInterval(function()
    {
        var next = new Date();
        r.push(next.getTime() - d.getTime());
    },1000);
}

Every 1000 milliseconds (1 second), the r array should have three delta timestamps added into it (one for each interval set in the for loop). In FireFox, however, there are exactly nine delta timestamps added per second. If you set k=10, the result is one hundred delta timestamps per second. If anyone has the answer, I am curious, even if the result is that I'm an idiot. It seems to work correctly in Internet Explorer 7. Thanks for your help, internet.



Cross Domain XHR with Firefox 2
Zach Leatherman — Thu, 30 Aug 2007 23:40:20 +0000
By now know you know that trying to do an XMLHttpRequest (XHR or AJAX) call to a domain that is different from the domain of the hosted JavaScript in Firefox will throw an exception.
Error: uncaught exception: Permission denied to call method XMLHttpRequest.open
If you don’t want a history of the past solutions, page down to see the final solution.
The web has solutions to this problem, but most of them involve changing your JavaScript code, which I thought to be less than ideal.  A common solution involves setting the UniversalBrowserRead security property in your JavaScript code [Dion Almaer, of Ajaxian fame]:

netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');

The problem with that solution (obviously) lies in single browser proprietary JavaScript polluting your code.  And you have to set this property inside the scope of any usage (ie: inside your library file that does your AJAX calls and inside your callbacks, etc).
Why can’t it just be as easy as Internet Explorer?  They just pop-up a little security dialog asking you if you want to allow this access (which is also what the enablePrivilege function does as well).
Another solution involves setting the capability.policy.default.XMLHttpRequest.open preference inside your prefs.js Firefox preference file [Mike Dirolf].  This worked as desired and allowed the AJAX call, but anytime you attempt to access the resulting XML you received a nice exception as well.  It turns out this is the solution we wanted, it’s just incomplete.
The Final Solution

Close Firefox.  It will overwrite your changes to the prefs.js file if you have it open.
Optional step: This approach will open up your Firefox security quite a bit, so I’d recommend setting up a separate profile in Firefox to use when testing.  It will not pop up a security dialog when a cross-domain AJAX call is made.
Find your prefs.js file.  In Windows, it is typically located in the C:\Documents and Settings\{YOUR_USERNAME}\ApplicationData\Mozilla\Firefox\Profiles\{YOUR_TEST_USER_PROFILE_ID}\prefs.js
Open it up and add the following lines:

user_pref("capability.policy.default.XMLHttpRequest.open", "allAccess");
user_pref("capability.policy.default.CDATASection.nodeValue", "allAccess");
user_pref("capability.policy.default.Element.attributes", "allAccess");
user_pref("capability.policy.default.Element.childNodes", "allAccess");
user_pref("capability.policy.default.Element.firstChild", "allAccess");
user_pref("capability.policy.default.Element.getElementsByTagName", "allAccess");
user_pref("capability.policy.default.Element.tagName", "allAccess");
user_pref("capability.policy.default.HTMLCollection.length", "allAccess");
user_pref("capability.policy.default.HTMLCollection.item", "allAccess");
user_pref("capability.policy.default.Text.nodeValue", "allAccess");
user_pref("capability.policy.default.XMLDocument.documentElement", "allAccess");
user_pref("capability.policy.default.XMLDocument.getElementsByTagName", "allAccess");
user_pref("capability.policy.default.XMLHttpRequest.channel", "allAccess");
user_pref("capability.policy.default.XMLHttpRequest.open", "allAccess");
user_pref("capability.policy.default.XMLHttpRequest.responseText", "allAccess");
user_pref("capability.policy.default.XMLHttpRequest.responseXML", "allAccess");
user_pref("capability.policy.default.XMLHttpRequest.send", "allAccess");
user_pref("capability.policy.default.XMLHttpRequest.setRequestHeader", "allAccess");



This code was copied (with the exception of 1 line) from a source repository at [kryogenix.org]

used in jackfield.  It wasn’t intended to be used for this purpose, but it works.
If you still get Error: uncaught exception: Permission denied to call method _________ errors, you can add the method to your prefs.js.  I would appreciate a comment with any commonly used methods not included above.  Thanks.
Update: Because this article is deprecated (applies to an older version of Firefox), I’m updating the blog title in the interest of minimizing the number of disappointed users.  Some might think this is a stupid thing to do, since it’s the most popular page on my blog, but I’m more interested in helping people than getting traffic.



JavaScript Code Coverage Tool for Firebug
Zach Leatherman — Wed, 18 Apr 2007 20:08:06 +0000
Download FirebugCodeCoverage-0.1.xpi
Recently, I’ve become interested in client side automated testing tools.  When I found the Selenium plug-in for Firefox, I was blown away.  I can record actions in my browser and play them back!  No more manual testing of JavaScript code!
Researching a little bit more about automated testing tools led to the discovery of a metric called ‘Code Coverage’, a statistic that gives you a percentage of how much of your code executed during a certain period of time (usually while your automated test was executing).
Of course, I immediately thought of Joe Hewitt’s Firebug extension for Firefox, which includes a feature for JavaScript Profiling.  The Profile feature of Firebug was similar to a Function Entry Code Coverage report, so I decided to modify the feature and release an add-on for Firefox that showed (at a file level) a list of which functions executed and which functions did not.

So, now, to test my JavaScript code coverage, I will write automated tests using the Selenium IDE plug-in for Firefox, hit the Code Coverage button in Firebug, and try to get my Code Coverage statistics in the upper 90%’s.
Screenshot Example of running the tool at yahoo.com


Download FirebugCodeCoverage-0.1.xpi.
Requirements (obviously)

Mozilla Firefox
Firebug Extension for Mozilla Firefox

Limitations:

Does not include statistics on anonymous functions.
Is limited to function (entry) code coverage, does not include other forms such as exit, statement, condition, or path code coverage. (Description: Wikipedia)
Is my first Firefox add-on, so there was a learning curve involved.

Future Improvements:

Automated integration with Selenium IDE (one button to run tests and do code coverage)
Better display of results, instead of a big kludge of function names
Additional types of coverage, depending on what options are available from jsdIDebuggerService

Update: After many requests and much self deliberation, I have decided not to update the plugin to work with newer versions of Firefox.  Code Coverage doesn’t belong in the browser, it’s just the wrong place in the tool chain to have something like this.  Code Coverage results need to be exportable, and the utility must be executable from the command line to use with unit tests and continuous integration.