HOWTO: Use DOM Inspector to examine Thunderbird’s UI

Prologue: I would like to thank dolske, jesse and dbaron for guiding me through the forests of DOMi (DOM Inspector) and dmose for giving me the idea of doing something to Thunderbird’s chrome. A faint wiff of DOM / CSS knowledge is needed, though I had virtually no experience in DOM / CSS prior to this.

The following steps show how I managed to come up with the fix for bug 433107, which is Mac-specific, on Leopard. (Drop down arrow for "To/CC/BCC/.." too close to the edge)

  1. Build a debug Thunderbird trunk build from the latest sources. You can find build documentation on MDC or on the Mozilla Wiki.
  2. Run it. (<yourlocation>/objdir/mail/dist/ThunderbirdDebug.app/Contents/MacOS/thunderbird.bin)
  3. Install DOM Inspector from Mozilla Add-ons. You may have to hack around the versioning to force it to install on the latest 3.0a2pre build.
  4. Restart Thunderbird.

You are now ready to use DOM Inspector to help yourself find out the names / relationships of all the DOM elements in the chrome of Thunderbird.

  1. In the main Thunderbird UI, you can create a sample email account, though I had a previous profile to work from. Activate the compose window by clicking the "Write" button.
  2. Run DOM Inspector from Tools -> DOM Inspector in the main UI.
  3. Import the DOM of the compose window by clicking File -> Inspect Chrome Document -> Write: (no subject).
  4. Activate the top left icon that allows you to select the portion of chrome you are interested in. (It also has the tooltip "Find a node to inspect by clicking on it")
  5. icon
  6. Go back to your compose window, and select the guilty arrow as seen in the screenshot of bug 433107.
  7. Switch back to the DOM Inspector window. It should show up something like this:
  8. window
  9. Change the options on the right pane to show "CSS Style Rules" (it defaults to DOM Node).

You will now be examining the chrome of Thunderbird’s compose window in intricate detail.

  1. I wanted to adjust the left padding, to give some space between the left border and the arrow. Hence, I looked out for wordings like "left" and "padding".
  2. After some poking around, along with advice that changes to global (read: shared toolkit) files will probably impact other applications, I came to the conclusion that the guilty party was hiding in .addressingWidgetCell inside messengercompose.css, since it had the code that was Thunderbird-specific and it had something associated with "padding" and "left" when viewing the CSS Style Rules of messengercompose.css.
  3. And so it seemed that a simple adjustment to "padding-left-value" was needed, e.g. increasing it from 0px to 5px.

Instead, it did not work. "padding-left-value" stubbornly remained at 0px. Someone suggested inserting a new property called "padding-left" even though there clearly was no "padding-left" name anywhere present. I took the advice and tried anyway, right-clicking "padding-left-value", clicking Insert, entering a new property called "padding-left" and the value "5px". As you may have guessed, the value for "padding-left-value" property changed to "5px", and the eventual change seemed to be able to fix the bug.

By the way, changing the value in DOMi was instantaneous, so all I had to do next was:

  1. Look up "addressingWidgetCell" in mxr.mozilla.org.
  2. Fire up any preferred text editor, then make the appropriate change.
  3. Create the patch using |cvs diff -u8pN . > /your/path/|
  4. Upload the patch to Bugzilla, in this case to bug 433107.

And that’s an example of how to make use DOM Inspector in Thunderbird!

Note: The way I fix the bug above might not be the best way to do so, and the eventual fix may be different, but the general ways of using DOMi in Thunderbird are still applicable.