A recent post to dojo-interest mailing list caught my eye: basically, a user can reproduce this problem by just loading dojo from google CDN.

I decided to take a look at this and try to figure out why.

A firebug bug report is filed about this error: with FireFox>3.5.2, modifying window.console (or attributes on console) would trigger this error. However, in the test case mentioned in the post, even if dojo is not loaded, the error still pops up in firebug, so it must be in some firefox extension, rather than dojo.

The only other extension I have in my development firefox profile is Selenium-IDE 1.0.4. Disabling it, and the error immediately goes away. Searching selenium-ide bug report, it turns out it has just been fixed in Selenium-IDE 1.0.5 (direct link to the xpi file).

In a summary, if you are getting “setting a property that has only a getter error” Error in FF 3.6 with any page, make sure you have at least Selenium-IDE 1.0.5. If you don’t use it, then you are probably messing around with window.console. (the error message would be much more helpful if it states what property is being accessed)

After some digging, it turns out the algorithm to calculate the global progress bar has a flawed assumption: the number of tests in each group is known before the tests start. That’s not the case if nested test suites are used, such as the case in dojo._base.test.

The fix is quite simple as well: rather than trying to create a portion in the global progressbar for each test, we only create one for each group.

Another problem noted in the original bug report is overflow of test group progressbar. I never noticed it before, but keeping a close eye on each group progressbar when running dojo test suite does reveal it. By removing tests in the dojo test suite, I isolated the problem to dojo.date and dojo.date. The problem is the test group progress bar is not updated at all due to the fact that they don’t have a html page (instead both dojo.date and dojo.data test cases only use javascript files). The fix for this turns out to be quite straghtforward as well as soon as I know what causes it.

After the bug fixes, I feel like to add a new feature to DOH, clickable test cases which will hilight the relevant log line after the test finishes. Searching a failture/error in the log pane is a real pain especially if you have lots of tests generating huge number of messages. The log line will be hilighted according to whether the test failed or succeeded. (Note: the hilighting requires dojo, so if DOH is used without dojo, you won’t be able to see the hilighting animation.)

Similarly, when clicking on the global progressbar, the test group associated with that portion of the bar will be scrolled into view (for any failed test group, a tooltip is also attached to the global progressbar portion to indicate which test group it is). This is useful when locating a failed test group.

In addition, a tfoot is added to the test list table after all tests finish, which contains a summary of the test run. Check out the online demo in our nightly. This will be part of dojo 1.3 release.

So the problem is how to change the UI language. The website URL for the Chinese version of google maps is the same as the English version, both of which is maps.google.com, so must be another way of doing it. Searching the UI, I can’t find a control to change language anywhere. However, I did notice on one page when clicking around, where I have this in my address bar.

http://maps.google.com/maps/mm?hl=en

by chaning it to:

http://maps.google.com/maps/mm?hl=zh-CN

As expected, I get Simplified Chinese version of google maps. So to switch UI language in gmap is to append “?hl=LANG_CODE” to the URL, such as:

http://maps.google.com/?hl=en

Will load the gmap front page in English. Some LANG_CODE I tried which are recognized by gmap is: de, en, fr, ko, ja, ru, zh-CN and zh-TW. (See language identifier for a complete list)

After digging around, (by looking at the ebuild file) I found out that imagemagick is actually making use of librsvg to do the heavy lifting when dealing with svg files.

librsvg is part of gnome-base packages (as can be seen in gentoo portage). Looking at the source code, I figured that it makes use of pango to render text.

From the days of working on SCIM project, I know for sure that pango is more than capable of rendering text with underlines. So there must be something missing in librsvg to render it. It turns out that, while the svg parser implemented in librsvg does indeed look for text-decoration, and recoganize underline (among strikethrough and overline), it is not actually making use of these parsed info to render the text.

After a bit of tracing the code, I found out how to patch it: the trick is just to add a pango underline attribute to the text layout, and everything else is taken care of by pango.

This bug is reported to upstream, and hopefully it will be merged there soon. The patch is available in that bug report, so you can grab it if you can’t wait. The patch also fixes a bug which is discovered after the underline problem is fixed: when a underlined text has stroke set, the stroke is rendered in wrong position.

After seeing Bill’s commit to add a real MenuBar to dijit, I think it’s the time to bring back this feature. For now, see the test_Menu.html test file for a demo.

A new property is introduced for dijit.MenuItem, called accelKey, of type String. It can be set either in markup or in the arguments passed to the dijit.MenuItem constructor (the demo contains examples for both of them). In addition, dynamically setting it is also supported, such as:

//item is a dijit.MenuItem object
item.attr("accelKey","Ctrl+W");

As mentioned in the demo, this accelKey is only a string, you can basically pass in any string you want. However, when the combination is pressed, it won’t actually trigger the action associated with the menu item: that has to be done explicitly elsewhere (such as dojo.connect to body’s onkeydown event, and detect whether a recognized accelerator key is pressed, if so, invoke the corresponding event handler).

Here is the core of how to achieve lazy loading:

dojo.declare("MyDropDownButton", dijit.form.DropDownButton, {
	dropDown:1,
	_openDropDown: function(){
		if(this.dropDown===1){
			this.dropDown=new dijit.Menu();
			var items=[{label:'One'}, {label:'Two'}, {label:'Three'}];
			dojo.forEach(items,function(args){
				this.dropDown.addChild(new dijit.MenuItem(args));    
			},this);
		}
		this.inherited(arguments);
	}
});

The trick here is to set dropDown to something which evaluates to true so that when clicked the first time, DropDownButton will proceed to call _openDropDown, where we have a chance to create the real dijit.Menu we want to show. Without line 2 above, _openDropDown won’t be called because DropDownButton thinks there is no attached dropdown menu.

As you may have already figured, in order to use this, the Menu has to be created programmatically.

1. when puting data into the clipboard with a RepresentationClass other than java.lang.String does not work properly with any applications (it is the same issue as described in a java bug report, which is supposed to be fixed in java 1.6 update 11)
2. even if you do use java.lang.String as RepresentationClass, the pasted html only appear correctly in IE, not in safari (it contains extra garbage characters), nor in FF (nothing is pasted at all).

The problem as described in the mentioned webpage, is due to buggy support of windows HTML clipboard format in java. One workaround is suggested in the same article by modifying some internal stuffs in the supporting class in java with the source files available for download. However, the provided code fails to run against my java 1.6 (although it does compile fine), probably due to changed internal mechanisms.

Luckily, I tried to run the same code against the next version of java (1.7 provided by openjdk, still in development), and the paste works great in all three browsers. However, this java 1.7 does not provide a java plugin for Safari, nor google Chrome. (only java 1.6u10 and 1.6u11 support these two new comers)

In order to workaround this, I decided to backport the fix from java 1.7 to 1.6. I don’t want to re-compile the whole jre or jdk, I just want to fix this particular bug. The buggy code is in sun/awt/windows/HTMLSupport.class (in rt.jar under java installation folder).

After poking around in the java 1.7 source (grabbed from openjdk), it turns out that file does not exists. However, with some string searching in files, I found out that it is now defined in jdk\src\windows\classes\sun\awt\windows\WDataTransferer.java. After doing some renaming and such, I came up with a HTMLSupport.java source file (which is a direct port of the original file included in java 1.7 source). Aftering hijacking the builtin HTMLSupport, sure enough, everything works as expected in java 1.6 now.

A pre-compiled HTMLSupport jar is available for download, which should work in java 1.6 (may work in previous versions as well).

How to use this new HTMLSupport

If you intend to use java applet (as I do in this case), then hijacking (or BootClasspath trick) does not work for IE: even if you set -Xbootclasspath/p:\path\to\your\HTMLSupport.jar as the runtime parameter in java control panel for java applet, it does not work. It seems IE just simply refuses to look at that configuration and uses the default bootclasspath only.

Short of other workarounds, I do it the brutal force way: replace the original HTMLSupport.class file in rt.jar with the patched one (you can find this file in the jar, it is the only file in there). As this is intended to be used in a virtual machine whose sole purpose is to use doh.robot to run functional tests, so it is not that bad.

Thanks goes to all the authors of the articles mentioned in this post.

One thing to note: the original articile was written in 2003, more than five years ago, and this bug still exists in latest java stable release (which is 1.6 update 11).

As I do not have an idea to actually implement that, I do come up with another “workaround” (if you like): rather than propagate changes to existing objects on the page, we can actually try to ask the app to reload itself without reloading the whole page. We don’t want to add in any special code in any frontend apps to handle this sort of “self reload” mechanism just to speed up development. Instead, a generic way should be available without any extra logic support in the application layer.

With the help of dojo and with one assumption, I did come up such an implementation to support that. The one assumption is that, all existing objects you care about in your applications are all dijits. If this assumption can be met, what we really need to do in order to reload an application is to:

1. call onunload handlers (in case any are registered with dojo)
2. destroy all dijits in the page
3. reset the document.body.innerHTML to what it looks like when the page is first loaded (before any js actually modifys it)
4. call all onload hanlders registered with dojo (such as dojo.parser etc.)

Item 3 can be achieved via a xhr call to retrieve current page from server and figure out the content within <body> tag. Item 4 requires a bit of extra work, because once all the onload handlers are called by dojo, they are removed. So in order to actually rerun them, we have to remember the original list of handlers.

Of course, as you may already figured, the method mentioned above won’t be able to run any modified onload handlers (even after they are dojo.reload-ed), however, it does cover most of other cases.

The one assumption mentioned above is not actually true in most web 2.0 applications using dojo, in such cases, any non-dijit objects have to be destroyed somehow so that they can be recreated, but that logic has to be application specific. On the other hand, in order to prevent memory leaks in browsers (espcially IE), it is always a good idea to have a destroy function for your objects to clean itself up. So if you are not worried about any thing other than dijits, then the method mentioned above should work reasonably well, while if you do want to re-create other non-dijits stuffs, you can call some application specific cleanup routines (which as I mentioned above would be good to have in any case).

You can find the code in dojoc.util.loader, the function is actually called dojo.reloadPage(). The normal use case for this is:

1. dojo.reload any modules you modified and want to test;
2. dojo.reloadPage to actually test them without waiting for reloading all js files/reloading your browser window.

Note: dojo.reloadPage only works if it is included in the initial page load, if you dojo.require dojoc.util.loader after the page is loaded, dojo.reloadPage won’t work (see comment at the beginning of the file to know why)

dojo.reload now also resides in dojoc.util.loader, and compared to the previous version, two additional features are add:

• Partial module name match: now you just need to type in a partial name of the module you want to reload, if it only matches one module already loaded, that module will be reloaded. If there are multiple matches, it will list all possible modules and error out.
• Automatically remove cache of dijit template: if a module references widget template files (using templatePath), these cached templates will be cleared automatically, so next time you create such a dijit, the new template will be loaded from your sever directly.

A new function to reload css files is also included in dojoc.util.loader, dojo.reloadCss, which also supports partial name match. If it is given no argument, it will reload all css files in the page (with a href attribute, of course), similar to ReCSS feature in the firebug lite shipped with dojo core.

Warning: use at your own risk.

Use Apache as proxy server

Today I decided to shield an apache proxy server in front of the cherrypy server to off load all static files serving duties from the latter, in the hope of speeding up reloading speed of the app.

The apache proxy should be setup so that it directly serves any files under /debug and /release, all other requests are dynamic and should be handled by cherrypy server. In addition, our backend app sometimes use HTTP redirects to direct client to a new page. In Apache configuration file, all this can be achieved by:

ProxyPassMatch ^/(?:debug|release)/.* !
ProxyPass / http://127.0.0.1:8000/
 
ProxyPassReverse / http://127.0.0.1:8000/
 
Alias /debug /var/www/htdocs
Alias /release /var/www/htdocs/release

Note: the /debug directory is the unbuilt frontend code, while the /release points to the built frontend code (by default, dojo will put the built version under release directly as peer of dojo dir).

With the above settings, cherrypy is nicely sitting behind the Apache server without worrying about any static files, and the reloading time of the unbuilt frontend code now reduces to about 4 seconds, which is a dramatic improvement.

Try nginx instead

nginx is normally considered to be a faster reverse proxy server than apache, so I want to give it a try.

In nginx configuration file, proxy_pass is used to pass the request to a backend server, while it does not use proxy_pass_reverse, instead the equivalent in nginx is proxy_redirect directive. As long as your host domain name is properly set up, the following nginx directive is equavalent to the above apache directive:

location /debug/ {
    alias /var/www/htdocs;
}
location /release/ {
    alias /var/www/htdocs/release;
}
location / {
    proxy_pass http://127.0.0.1:8000;
    proxy_redirect default;
}

More info on proxy_redirect can be found in official documentation.

Impression of Nginx compared to Apache

While I don’t want to do any thorough comparsion of the two reverse proxy servers, I just tried each of them several times and monitors the net panel output in firebug. It seems, nginx delievers more consistent performance: for the same page, apache sometimes deliver it in 1 second, sometimes in 4 seconds, while nginx always delivers it in 1 second. Thus I guess I will just keep using nginx at least for now.