|Dreamweaver Manual||Building Mozilla|
|MailNews Status Icons|
It all began at the end of the last
millennium, when the first executable version of a certain browser appeared
on the net which had its seeds in the plan to let go the old Netscape 4.x
sources and restart at zero. A wise decision.
I do not know exactly since when I am a part of it but I guess it was around M16 (about the middle of 2000). At that time, the Mozilla releases were called milestones and named accordingly. Some time later, 0.6 released which Netscape based their version 6 upon. Even then the Mozilla developers knew why they prefixed the version number with a zero, but Netscape seemed not to care. Correspondingly crushing were the reviews of the commercial spin-off, and certain sites like MozillaQuest received a boost only because of that.
Well, today it looks different. We are writing a one in front of the point and can decide freely: suite or slim single application? Just as you like.
Mozilla offers some really neat tools for web developers, out of the box. With extensions you can furthermore upgrade what the suite does not offer itself (all the more with the single applications).
First of all, we should clarify what is actually meant by the DOM: A representation of the structure of a document, may it be XML based like RDF or XHTML or pure HTML. The DOM Inspector displays this structure in the form of a tree (DOM tree), just like the Windows Explorer does for the file system, for example.
By default the DOM Inspector shows DOM nodes (nodes within the tree, ultimately elements), on the left the ones of the document currently displayed and on the right the data of the element selected on the left.
Using "File/Inspect a Window" you can select a window in order to further inspect it (side note: you can as well select the DOM Inspector itself, of course!). This way, however, you can only access the window, i.e. the chrome/XUL. Whereas if you want to inspect the page viewed inside a window, you will have to specify its URL. Here you can take advantage of MultiZilla (see below) which offers a button that loads the very page currently displayed into the DOM Inspector. In addition, you can let the document specified show in the so-called browser which will appear at the bottom if you select "View/Browser".
If you finally selected a document you can start: With an HTML document, you will find the <HTML> tag directly under the document root (#document). If you however select for example the <BODY> tag you should see a blinking border around the whole document for a short period of time — this feature can be very useful because it also works the other way round, allowing you to click elements within the document using the icon in the upper left (the one with the little arrow), making them blink and be selected in the DOM tree.
Furthermore, both on the left and on the right there are little switch
buttons which have the form of a stylized list. If you for example switch to
target. This is a good way to find style properties or
available functions and even execute little tests (richt click,
Style", you can watch the CSS properties of the element that is
actually in the document, i.e. including all Mozilla-specific details.
Accordingly, you can see under "CSS Style Rules" which style rules
from which files (those beginning with
internal ones) apply to an element.
Described quickly but much more valuable: By simple typing you can search every document (even source code). By default, links are searched for only; if you however start the search with a slash (/), the whole text is searched. The default behavior can be changed at "Edit/Preferences/Advanced/Keyboard Navigation".
Explaining the View Selection Source functionality is just as easy as Find As You Type. Just select a range within the current document and choose "View Selection Source" in the context menu.
You should however know that Selection Source works based upon the DOM Mozilla generates internally after parsing the source code and not, like the normal View Source, based upon the actual source code of the page.
Mozilla already includes neat features out of the box, but what makes it
real fun are extensions in form of so called XPIs, cross platform
Talking of extensions for Mozilla, one site has to be mentioned in the same breath: MozDev.
I copied the images shown at the side of the following extensions from the respective MozDev project pages; the rights remain with the respective copyright holders, of course.
If you never heard of MultiZilla, you missed something for sure. MultiZilla was the first tabbed browsing extension for the Mozilla suite and probably the best until now. Mozilla itself copied much of it but never all of it (see below). I myself have been using it since version 1.2.x, I think, and been a loyal fan ever since. Lead developer HJ (funny coincidence: my initials, just the other way round!) is working hard, making MultiZilla one of the most active MozDev projects so far.
The Google Toolbar is to Internet Explorer what the Googlebox is to MultiZilla. Embedded in the MultiZilla toolbar, you can also directky use the other Google searches like the one for images or news. The buttons created for the search results are especially useful since they allow for directly searching for them in the respective documents.
Blogging is fun! I have a weblog as well. With MozBlog, you can even blog directly out of Mozilla. It does not only support Blogger but also other popular weblog services like Movable Type.
Honestly, Mozilla's download manager is better than these nerving single download windows, yet still bothering if you want to download many small things like images. That is where the Download Status Bar produces relief: After deactivating the display of the download manager, further downloads will only appear at the bottom of the window — properly lined up and with nice context menus.
Everything the web developer needs: Deactivating and bordering parts of the document like styles, images, form elements, tables, ..., showing information, validation possibilities, resizing and many more.
How often do you painfully miss the functionality of your favorite editor (for me this is SciTE). That does not have to be with Mozilla: With MozEx you can define your own editors for certain links, textareas or the source code view. You can also setup other programs, for example for downloads, news, mail or telnet, ... and even define your own schemes like myscheme://.
An essential web development tool. Actually so important that it should be part of the suite by default: With this extensions you can listen to and log the HTTP communication between client (Mozilla) and server. This way you will quickly see if for example the wrong MIME type or which additional HTTP headers have been sent (especially of interest in connection with skripting languages like PHP and redirects).
Just a small helper tool for plagued XUL friends: With this you can easily modify the extracted content of a JAR from an XPI and directly see the result. The search for errors is quite significantly simplified; especially since Mozilla's chrome is directly accessible.
The advertisement blocker par excellence. Adblock does for the rest what Mozilla itself does for popups. Whether it be a plain image, IFRAME or Flash: By specifying wildcards in the image and IFRAME addresses you can block whole servers and subdirectories. Simple, yet effective: right click, "AdBlock xy" and quickly shortening the address — and the whole shebang is gone.
Ilya achieved with his project what the Mozilla project has not
accomplished itself in many years (and even after a long time for Windows):
A tray icon for new mails (biff). And not only for KDE but also for XFce and
IceWM. Small restriction: Mozilla has to use the GTK 2 toolkit, which is not
(yet) the case with normal nightlies from mozilla.org. By the way, that was
the major reason for me to switch the toolkit for building Mozilla.
What should I say? Colored icons everywhere!
MultiZilla can save tab sessions as well. But crash recovery...
April 25, 2005