Prepare for a very long blog post. This might even fill up the whole Planet 🙂
Change of Plans
Originally my slideshow was to open a new window and make the slideshow in there. But apparentlly there is already an extension to do it, uniquely called “Slideshow“. This extension though in my opinion is really an attachment picture viewer. Because it doesn’t automate a slideshow.
Either way, this means I have to make a few changes my extension. So I went back to what I wanted originally. To replace the picture attachments under the email in the messagepane (inline attachments) and to be a true slideshow.
Research
So the research begins. I went and looked at the XUL of Thunderbird to understand it.
http://mxr.mozilla.org/mailnews/source/mail/base/content/messenger.xul#398
- Looking in the above, the “messagepanebox” is where the email is (in the classic view, it is the bottom right section).
- “msgNotificationBar” is most likely the bar that pops up like “This is Spam” or “Images are disabled”
- “msgHeaderView” displays the header information of the email like who sent it, subject, and if expanded the more detailed information
- “messagepane” is where the actually email is displayed. As you can see it is a “browser” like in Firefox. So it most likely just pointing to a file in your profile (containing the email messages), decoded and then displayed here.
- “attachment-splitter” is the division from the…
- “attachmentView” where the attachments are displayed
Anyway, the attachments can be displayed inline in the email or not (which is what I plan to replace) by the user preference “Display Attachments Inline” which can be toggled under the “View” menu.
So I searched for that text -> http://mxr.mozilla.org/mailnews/source/mail/locales/en-US/chrome/messenger/messenger.dtd#221
Which brought me here -> http://mxr.mozilla.org/mailnews/source/mail/base/content/mailWindowOverlay.xul#1439
And ended here -> http://mxr.mozilla.org/mailnews/source/mailnews/base/resources/content/mailWindowOverlay.js#1674
Basically what it says is, change the user pref then just do a reload of the email. Kinda like the lab we had with the “View Image” is really just change the location bar to the path and load it.
I thought, since it is a “browser”, it would just apply a “display: none” or “visibility: hidden” CSS property but I guess not.
So I went to research the actually rendering of the email. If you ever “View Source” of the email with attachments, you will notice that is divided up into sections like the text message and then a bunch of characters under for the attachments. This is because email was originally designed just for text (ASCII) so for images (binary) they have to be encoded.
I went into circles and I ended up actually reading the C++ code that actually does the decoding process. I don’t plan on touching that.
So, I came back where I started and remembered that the messagepane is a “browser” therefore the email is rendered like an HTML page. Using DOM inspector, I looked into it.

As you can see, there are just a bunch of HTML tags. The message is put into a DIV and is displayed according to what is set (HTML or plain text). For the attachments, it is a HR for the horizontal rule, BR, CENTER to center the image and the image, for each attachment (outlined in red). As you can see in the image, there is the SRC for the image which is pointing to the imap path. I assume if it was POP it will will point to the file on the hard drive.
I also noticed if I uncheck “Display Attachments Inline”, it doesn’t render the image attachments (not a hide/visible that I originally thought). Makes sense, as if the images are huge, you don’t want to wait to download, decode and then just hide them.
The Road to Code v0.1
So I read up on how to make an extension. I found a “Hello Thunderbird” extension. It is unfortunately out of date (using old methods like contents.rdf). It will still work fine but I went up and look at how current extensions are made.
There are two goals for my v0.1
- To get all the attachments (ideally just the images)
- To manipulate the email, to render what I want (which will eventually be the slideshow)
So I went to work, read up some stuff (as I don’t know Javascript) and so forth. Here are the results…

As you can see, the alert in the middle shows the image name, content-type, URL and URI. If you click ok, and if another image is there, it will display that info. If there are no images, it displays an alert (for debugging purposes) saying no images found as expected 🙂
As well you can see little red “Hi” boxes next to the image. That was added by me so I know where to add code and as well what I can add 🙂 To display the colours, I used the following in my userContent.css
center span { background-color: #f00;border: 1px solid #000;}
So all is looking good 🙂
Goals for v0.2
Well not that I got the basics done, what to look forward to next?
- Get the a slideshow box
- Change images. This should be easy (theoretically), as I will just have to change the IMG SRC to the next image’s SRC and vice versa for the back button
- Have a real slideshow. A timer to automate the change.
- User prefs? Like what images to show, etc…
Download v0.1: attachment_slideshow.xpi
NOTE: I only tested it in TB v2.0.0.12. I know I was suppose to use v3.0pre but I am having problems with my build for some reason. Once I have time, I will test it on v3.0pre.