Late Blog Posts – MXR/LXR

Well, catching up on late blog posts so you will see a bunch of them as I try to squeeze some marks in :D. This is about searching for code using MXR and LXR for Week 4.

During the progression of my extension, I had to look for code in the mozilla codebase to find like functions that will help me with my extension. I primarly used MXR. For what reason, I don’t know. In fact, I forgot the difference between MXR and LXR (if there are any?). Anyway these tools were definitely helpful because searching through hundreds if not thousand or dare to say millions of files and skimming through lines of codes to find just a snipplet of code would be painful.

How well did it go? Well, in the end I did find the functions that I needed. As well, help understand the layout through the XUL. I even spent time analysing C++ code for the fun of it. But how was it in the beginning? Painful. I went into loops. Functions just calling other functions. A path that leads you one way, that ends up as a dead end. I spent much time searching than I was coding that’s for sure. The main reason for that is that I don’t know what to search for. Luckily names are pretty obvious like getMessageBrowser(). Would be helpful if there is some big guide that tells what each object is and all their methods, what global variables are available and such. Kinda like in our lab where we had to modify adding a new tab to be placed relative to the right. We went through XUL, DTD and to the JS and finally find the actual code of the function is in some XML :S. For me, a beginner, this was pretty confusing. How I wish for something like Intellisense.

Road to Code v0.2

Unfortunately, I been feeling sick all weekend so I didn’t have much time to work on stuff as I was expecting ~_~.

Name Change

I decided to change the name to “Slideshow Gallery”. I think you can figure out why when you abbreviate the previous name 😉

Redone the structure

I used the Extension wizard as the base and port over the stuff I had from v0.1. This is because I was learning from old v1 tutorials before and so I wanted an up to date kind of feel.

Pitfalls

Some tales to tell as I worked on v0.2

Click damn you!

I consider myself quite knowledgeable on XHTML and CSS. As I’m working in a browser window (as the email is rendered as a HTML page), I thought it will work just like a webpage. So I got the layout all setup and fine but now I want to have actions. I had little picture previews of the image attachments and when you click on it, I want it to display on-demand. But… it didn’t. I had an onclick attribute and it just won’t fire. I use the DOM inspector to check if it is there (it is) and it also worked in the DOM inspector for some reason. I was about to add either anchors (<A>) or change them to input buttons (ugly :S) but then I realized… wait a minute…. why would they allow javascript in email? Kinda like they disable images from SPAM message to prevent spammers to check if you read their emails. If they allowed javascript then a spammer could use events like the onmouseover (or worse onload) to check if you read their emails. So to work around that I used the AddEventListener() and lo and behold it works. I don’t know if this is the right way to do it so please let me know. As well I don’t know what the third parameter does. I just set it to true which was how I see it used when browsing MXR.

JSON

The Extension wizard formatted the JS file (overlay.js) in JSON (I believe is the term). I am not familar with javascript. I use frameworks for AJAX in my websites to basically encapsulate all the hard stuff. From the looks of it, it is like making a class so I went along it with. It makes sense because it organizes the code. I had members and methods and everything is going smoothly until….. back to the previous point. My “click” events won’t fire for some reason. I have no clue how to get it to work. So…. as it is due today, I just went back to original and change it all to functions and global variables (bad programming practice?) as I know it will work.

Hide!!

I had a function that basically walkthroughs the mail message by their tags. As previously stated, the mail just had a bunch of tags like…

<PRE>

<BR>

<HR>

etc…

But the original inline display of the images were not wrapped around in like a container. So I can’t just say, hide inline images by adding a simple CSS attribute. The reason I have to hide it so that on display, I show my slideshow but in PRINT I hide my slideshow and re-show the original inline images. So I have to go through the tags and add it to a <DIV> to contain it then set a CSS attribute (display) to hide it. But I couldn’t get it to work and pressed for time so I just removed it temporarly (will try for a v0.3 release).

Release v0.2

slideshowgallery.jpg

So what does release v0.2 bring. Well, after installing the extension, you currently have to manually start it in email with image attachments (will eventually make it onload). The commands are in the Tools menu and highlighted in Red, Please note the two commands (resume + pause) should only be used when it started. They are just there temporarily and will be removed eventually. This is again because I didn’t have time to put them in the Slideshow Box.

REAL Slideshow

Yup. It automatically changes the images every 10 seconds (will eventually be a Pref setting) and loops.

Transitions baby!

It currently has a Fade In/Out transition. More to come soon? Maybe…. How about you contribute 😉

So from the Game Plan v0.2 post. Here is what is done…

  • Have a box for the slideshow
  • The image container in the middle
  • Buttons to switch image (not buttons but previews! ^_^)
  • Timer button for play/pause (well should be in the box…. for v0.3)
  • Hide the current method of displaying images. Why hide? Because for printing an email. For printing I will hide my slideshow and show the images regularly. (not done -> for v0.3)
  • ADDED: Transitions!!! (well just one)

I plan to eventually use Canvas as I currently using just IMG tags and CSS. This will add more effects and make it look even more amazing!

Bugs

  • Only works in the Layout view (not working in the mail window when you open an email in a window) This is because I am not overlaying the XUL of it. I had no time to test it.
  • A small window (or big huge images) will break the layout

THE RELEASE

Here’s the link. Let me know what you think!

slideshowgalleryjosephcresencia.xpi

EDIT: Minor grammar and spelling fixes. Never do blogging late at night ~_~.

Lab – Creating an extension

Our lab last week was learning on making an extension. I, of course, already read about it for my v0.1 release but I used old tutorials. Many were the same so all is good. One site that would of made my life easier was Firefox/Thunderbird Extension Wizard that gives you a base XPI file for you to work with, with all you settings set for you. I had a base “Hello Thunderbird” made for v1 that I modified to v2/v3 style and had to manually change the settings.

While doing the lab, I was just doing Copy and Pasting since I read up on most of the extension stuff already and just had a few problems.

  • The Max Version was old (had IIRC a PreAlpha of v3.0) so I modified the Wiki to just be v3.0+
  • The code said to remove leading whitespace when Copying and Pasting code. So I modified the Wiki to have the leading whitespace already removed. So now you can easily copy and paste with no worries.

Other than that, the extension went fine. The “Hello World” statusbar and the “Relative Tab” Extension went without a hitch.

Game Plan v0.2

A simple list for what must be done for v0.2

  • Have a box for the slideshow
  • The image container in the middle
  • Buttons to switch image
  • Timer button for play/pause
  • Hide the current method of displaying images. Why hide? Because for printing an email. For printing I will hide my slideshow and show the images regularly.

That’s should be good for v0.2

Contributions

For contributions, I think the only thing I can think of is testing. Documentation is minimal as it is already easy to use (it is an extension). Other things maybe suggestions for future features. So brainstorming ideas that you would like to have for what you want in a v1.0 release. I will most likely not finish for v1.0 release as I am graduating (and depends on my free time after that). So anyone willing to take the job can have a list of TO DOs already 🙂

The Road to Code v0.1

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.

dominspect.jpg

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

  1. To get all the attachments (ideally just the images)
  2. 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…

slideshow_attachment.jpg

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.

User “stalking” ;)

One of our TODOs in OSD600 was to watch a user in Bugzilla and see what kind of bugs s/he is watching, replying and contributing to. I choose Joey Minta as he is one of people Dave referred a few weeks back. From what I see, he is mainly focused on Lightning/Sunbird, the Calendar application. Lightning is meant to intergrate to Thunderbird and Sunbird meant to be a standalone application (nice of Mozilla to separate it ^_^ so you are not forced to use TB if you want a calendar app). I don’t use a calendar application so wouldn’t know much about it (I keep appointments in my head ^_^). One bug I see is he is replacing something RDF to JS driven (414038) (which I have no idea what RDF is or what it is used for). Another interesting one is “Clean up Thunderbird’s global scope a bit” (416666). Nice to see some spring cleaning 😀 Another one bug was from 2000 :O Anyway, it was interesting to see what discussion take place in bugs. Some about fixing (and break ;)) stuff, changing core components and even little things like how the UI should look like 🙂

Getting back into gear

Been busy for the past week so I am way behind in my blog. I will posting a bunch in the next few days. The reason being both work and school with mid term tests. I also wanted to finish working on my personal website which is done in PHP and MySQL (But time to put that in the backburner, as the assignments are due in less than a week).

Task List

– Report on the Bugzilla user watching

– Change of v0.1 specs, report on what I have so far

– Report on our in-class lab

Watch for the above to be posted soon…

Thunderbird Picture Preview Release Plan

The current release plan of my project is as follows…

v0.1

– Have an extension package (XPI)

– Make a new window and display all the attachments (like their names). Would be good if it is already just the images.

v0.2

– Display the images

– Have basic forward and back movement

v0.3

– Fade In/Out

– Graphical look

– Full Screen mode?

– Cross platform debugging and testing

Don’t know if that is sufficient. Feel free to post comments on it.

And a searching we will go…

With the project selected, it is now time to find and search on how to get started. I’m going to make it an extension so I read up some tutorials on how to do it and now have a basis XPI file. All it does it add to the extensions list and does nothing (yet).

The project is to display the image attachments into a slide show like the many slide shows you now see in websites 🙂 With the cool fade in/out, the grey background and all the web 2.0 jazz without Adobe flash (yeah!).

Since this is my first time to actually look into the working of Thunderbird, I looked into the XUL and JS to see how it works. And so far, I think I’m starting to know where things are laid out.

First question comes to mind is the GUI. Where to actually put out the slide show? Below is a picture of the “messagepanebox”. (If you wondering what’s with the black boxes is because I’m a “privacy freak”).

gui-plan.jpg

1) First idea was in the “messagepane” because it is already previewing the images (it knows which attachments are images. Most likely by mime-type). It seems to make a horizontal rule and then the centred image below it (and repeat for the next attachment). I planned to like override the function to display all the images in one area so you don’t have to keep scrolling down. Sadly, after tons of searching I can’t seem to figure out where it is actually doing the display. I know that “Display Attachments Inline” will show/hide it. But no where can I find what renders it. jminta suggested it maybe in the libmime 🙁

2) Since I can’t find on how to do the above, the easiest way is just make a new window and do the slide show there. Since it is just a separate browser window it makes it much easier. It will be easy to port it to do (1) once I figure out how to do it as the code would be re-useable. The good thing with this too is maybe I can add a full screen feature like in Firefox.

3) Like (2) except just replace the whole “messagepane” instead of a new window. So instead of looking into the email, just display the slideshow.

Either way I do it, once the basis of the code is done, it should be easy to port to do all 3.

Crossing the Minefield

So I decided to finally build Firefox. Using Peter’s walkthrough made the process super easy as he laid it out step by step.

The difference is at the time, Tinderbox was closed and burning red and orange. So as Chris suggested is to checkout a previous build. Using the following…

make -f client.mk checkout MOZ_CO_DATE="xxx"

And in my case, I chose “28 Jan 2008 12:00”. Nice round number.

It took about an hour to build on my laptop. The specs of my laptop is as follows…

CPU: AMD Athlon 64 3000+ (1.8 GHz I believe)
Memory: 2GB PC2100 ram
Hard Drive: 100GB 7200rpm 8MB cache

On first run, I had a bunch of assertion errors. Example of the errors as follows…

ASSERTION: invalid active window: 'Error', file c:/temp/mozilla/embedding/components/windowwatcher/src/nsWindowWatcher.cpp, line 1087
ASSERTION: cannot call on a dirty frame not currently being reflowed: '!NS_SUBTREE_DIRTY(this) || (GetStateBits() & NS_FRAME_IN_REFLOW)', file c:/temp/mozilla/layout/generic/nsFrame.cpp, line 556

To suppress the errors, as suggested from Chris, is to open up the Mozilla Build environment (that bash shell screen) and execute the following command…

export XPCOM_DEBUG_BREAK=warn

Unfortunately, you have to keep the bash shell open for the duration of testing.

Well, that’s my build on my old laptop. Hopefully when my main rig is up and running perfectly, I will do a build on that machine.