making bbPress (and WordPress) work better!

Firefox fixes

How to fix “mutation operation” errors in Firefox

You may find at some point using firefox you are unable to access some websites which rely on complex javascript libraries. When you look at the errors on the page, you see:

A mutation operation was attempted on a database that did not allow mutations

The solution is to make sure dom.indexedDB.enabled is set to true in about:config

One example of a website with this problem is weather.com which will not display anything on the page unless this setting is enabled. Developers should wrap such function calls in try/catch or other error handling so your entire website doesn’t fail. Browser sniffing is not adequate.


Firefox Page Timer Lite (shows page load time)

One of the features I really liked in FasterFox plugin was the simple page timer which sat in the statusbar and just showed you how long the page you were viewing took to be loaded.

However they stopped updating that extension and it made my Firefox unstable. There is a FasterFoxLite but it also causes my Firefox to crash sooner or later for some reason.

So after some mucking about, I was able to make a super light version of the same page timer for Firefox.

Download Page Timer Lite for Firefox (pagetimerlite.xpi)

It works in all versions of Firefox, even 15 beta which I am using now, but you MUST install status-4-ever extension first, because my plugin requires the statusbar which was removed in Firefox 4 and newer.

This is because I do not know how to make addon bar extensions yet, someone will have to show me or I’ll eventually find a simple example for converting statusbar to addon bar.


Firefox 10 hits Release Candidate 1

Go test your websites to make sure nothing has changed, but it shouldn’t have.

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/10.0-candidates/build1/

I had dreaded the fast ship schedule put in place by Mozilla but once you start realizing their new version numbers are just minor version numbers in disguise, it’s not so bad. So Firefox 10 is really Firefox 5.10

What’s not really that new in Firefox 10
(hint: it’s mostly CSS3 stuff)

Firefox Mobile looks like it’s shaping up though.


How to get an element’s TRUE position in javascript, including borders in Firefox

I’ve seen a bunch of scripts around the web to get an element’s (aka object) actual/absolute position on a page in javascript. Virtually all of them are wrong, for one very good reason – if you have borders on an element in ANY version of firefox, the position will be off by the border width.

I haven’t seen any script attempt to deal with borders.

This is because Firefox uses a broken “inner” model, regardless if you are in standards vs quirks mode, that was based on trying to mimic IE6 – the only other game in town when Firefox was evolved. But ironically, even IE has moved on to including borders since version 7/8 while Firefox remains the same from version 1 through 5. Good for backwards compatibility I guess but a headache for web developers.

So in plain English, in Firefox, margins count towards offsetLeft/offsetTop but NOT borders! It’s the only “html5” browser in existence right now that doesn’t include borders.

See these bug reports from SEVEN years ago, still unfixed:
https://bugzilla.mozilla.org/show_bug.cgi?id=255754
https://bugzilla.mozilla.org/show_bug.cgi?id=387922

Ignore where people claim their solution works – if it doesn’t include border calculations, it doesn’t work, they are misguided.

I used to have a very short and sweet function to grab an object’s true position on the page. (do not use this one)

function XY(o) {var z=o,x=z.offsetLeft||0,y=z.offsetTop||0; while(z=z.offsetParent) {x+=z.offsetLeft||0; y+=z.offsetTop||0;} return {x:o.X=x,y:o.Y=y};}

(it returns an object with .X .Y added (left and top) but also appends them to the original object for convenience)

However do not use the above script, it’s incomplete. Not only does it not properly deal with scrolled objects (div, iframe, etc.) it does not handle borders in firefox.

Sadly there is no fast & clean way to get border width in firefox, you have to use computedstyles from the best I can figure out, which must be relatively slow because of how it traverses stylesheets (if you know a faster way, please let me know).

So this (unfortunately larger) function I’ve come up with does finally produce identical results across Chrome, Firefox and IE8

function XY(o) {
var z=o, x=0,y=0, c; 
while(z && !isNaN(z.offsetLeft) && !isNaN(z.offsetTop)) {        
c = isNaN(window.globalStorage)?0:window.getComputedStyle(z,null); 
x += z.offsetLeft-z.scrollLeft+(c?parseInt(c.getPropertyValue('border-left-width'),10):0);
y += z.offsetTop-z.scrollTop+(c?parseInt(c.getPropertyValue('border-top-width'),10):0);
z = z.offsetParent;
} 
return {x:o.X=x,y:o.Y=y};
}

But even though it’s larger, it’s still far better than turning to an 80k library like jquery. Note my use of “window.globalStorage” which is a trustworthy way of detecting anything based on the real gecko engine (since FF 2+) while ignoring all other browsers. No user-agent sniffing needed. Can’t use the navigator property – it’s useless because Chrome will also return “Gecko”.


Firefox 4 Mobile – first to support WYSIWYG Editors (contentEditable/designMode)

Firefox 4 Mobile was just released today and I have some incredible news that no-one else seems to have noticed (yet).

It’s the first mobile browser to support contentEditable!

What does this mean? Well TinyMCE, CKEditor (FCKeditor) and other rich, visual editors will now be able to work on your android cellphone (and a very few Nokia devices like the N900)

Check it out here: http://firefox.com/m

If you have Windows, Mac, or Linux on your desktop, you can see what the fuss is about through the developer versions:

http://ftp.mozilla.org/pub/mozilla.org/mobile/releases/4.0/

No other mobile browser to date does this trick. Not mobile Safari for the iPhone, not mobile Chrome for Android, not Opera Mini/Mobile, not IE Mobile. See my post from last week about this lack-of-support problem..


Firefox 3.5 finally supports DEFER on javascript

I was pleased to discover that after a mere 9 years
that Mozilla/Firefox finally supports defer on javascript.

Yup, 9 years, I couldn’t believe the time either, see for yourself:
http://bugzilla.mozilla.org/show_bug.cgi?id=28293

What this means is that Firefox finally has a feature
that Internet Explorer has had since version 4 (1997)
(it was made a standard by W3C HTML 4.01 in December 1999)

This means you should be doing this now on all your javascript, inline and external loading:
<script defer="defer" type="text/javascript" ...
(the repeat of the word is simply because of modern validation standards, without it the validation nutters have conniptions)

This causes the script to delay executing until the page is loaded. In some cases the script is also delayed in loading. The short answer is it will make your page seem to load faster for your visitors.

The only time you can’t use DEFER is when you are relying on javascript to inject something inline in your page, ie.
<script defer="defer" type="text/javascript" >
document.write('hello');
</script>
world
will NOT show “hello world” but rather “world hello“.
(if you removed the DEFER it would show “hello world” as expected)

I still don’t know what the status of webkit/safari/chrome is on DEFER or Opera for that matter, much more googling required.


Firefox 3.5 tampers with image colors by default

Tonight I was bothered that an image I was looking at in my browser looked washed out and when I loaded it into Irfanview to correct it and study it more closely, somehow it was already darker in Irfanview.

At first I started wondering if I accidentally turned on some kind of automatic option in Irfanview but then I remembered that Firefox 3.0 had image color correction added, but was off by default.

Sure enough Firefox 3.5 has color correction turned ON by default. Even for existing installs that simply upgraded, it apparently turns it back on all by itself.

So go to about:config and find
gfx.color_management.mode
and set it to 0 (zero)
problem solved.