292 Part V — Installation, Automation, Tools, and Tricks For more information or to install ieview, visit http://ieview.mozdev.org/. Hacking with BBCode and BBCodeXtra Without getting into extreme detail on how to use either one of these extensions, I can tell you that they can definitely help in filling out responses in forums or forms and with creating links and image tags for HTML, BBCode, and XHMTL. BBCode is the universally accepted markup language for just about all major online user forums. BBCode markup language has a much smaller subset of available formatting tags than HTML, and tags are usually delimited with brackets instead of the normal HTML tags, which are delimited with less than (<) and greater than (>) signs. Options that make either of these extensions great are their ability to create links from selected text or clipboards into an input form and to add text-formatting syn- tax, as needed. Either one of these extensions is a must-have if you intend on posting forum requests with links or have your own online forum that you use to support your applications, and so on. For more information or to install BBCode, visit http://jedbrown.net/1.0/mozilla/. For more information or to install BBCodeXtra, visit http://www.extenzilla.it/ bbcodextra/index.php?lang=eng. JavaScript and XUL Hacking Tools JavaScript and XUL programming can be used in tandem to create great Firefox extensions and applications. This section focuses on tools that will help with inspecting the Firefox inter- face, help debug JavaScript, and provide JavaScript tools and XUL packaging features. These tools vary in level of difficulty and may have a steep learning curve, but all should be worth the effort required. Hacking with the DOM Inspector The DOM Inspector is easily the best tool to use when working with Firefox and trying to cre- ate extension overlays by picking apart a window’s or dialog’s XUL elements. Using the combi- nation of File ➪ Inspect a Window and Search ➪ Select Element by Click, you can easily extract a window’s or an element’s id to use within your code. This is how I originally extracted the “throbber-box” and “search-container” ids that I later used and modified in my local userChrome.css file, as described in Chapter 2. Using this technique of selecting a window or dialog to inspect and then walking through the document tree also gives you a better understanding of the different elements that are used or are available with XUL interface programming. Installing the DOM Inspector is covered in Chapter 1 in greater detail, but suffice it to say, you will need to redownload the Firefox installer to get this little gem. After that, you can just fol- low the Custom installation options to enable Developer Tools when prompted. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 292 293 Chapter 15 — Hacking Tools for Web Programmers Hacking with JavaScript Console and Debugger The JavaScript Console and JavaScript Debugger are two different tools that are miles apart with respect to features and ease of use. The Console is a default install with Firefox and can be configured to show JavaScript errors and warnings from web pages, as well as errors from extensions or XUL applications. The entries that get added here are errors, warnings, and messages. While this native feature of Firefox is good, some crave more control over JavaScript coding, and that is where Venkman or JavaScript Debugger comes in handy. Venkman is the project code name for the JavaScript Debugger extension, which includes an extremely rich and robust editing and debugging environment specifically geared toward JavaScript debugging, as shown in Figure 15-7. F IGURE 15-7: JavaScript Debugger window This extension may be overwhelming for the faint of heart at first, but once you have gotten over the initial shock, the utilitarian features become very evident. For more information or to install Venkman, visit http://www.hacksrus.com/~ginda/ venkman/. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 293 294 Part V — Installation, Automation, Tools, and Tricks Hacking with Extension Developer’s Extension This extension is a nice compilation of quick tools that can make creating extensions a smooth ride. The extension comes with the following features: Ⅲ Extension Builder Ⅲ install.rdf Editor Ⅲ JavaScript Shell Ⅲ JavaScript Environment Ⅲ Live XUL Editor Ⅲ Live HTML Editor Ⅲ Toggle Debugging Preferences Ⅲ Reload All Chrome An Extension Developer menu is added to Firefox’s Tools menu, and all of these features are accessible there. Some of these features are mini–XUL applications that you can also use directly from Firefox without having to install them separately. While some of the features are really diamonds in the rough, the overall usefulness of this extension can quickly be reaped by novice or serious exten- sion developers. For more information or to install Extension Developer’s Extension, visit http://ted .mielczarek.org/code/mozilla/extensiondev/. Page Validation Hacking Tools While the Web Developer extension includes a couple of online validation service features, I want to also recommend two other extensions that may be of use: HTML Validator and Checky. These extensions offer different sets of features, but both can be tapped into to clean up any nonstandard coding that may be lingering in the HTML closet. Hacking with HTML Validator When I first used this extension on some of my pages, I was truly shocked and ashamed that it found so many errors and warnings. The core is based on Tidy, which was originally created by the W3C and has been updated and extended as an open-source project. Tidy’s core function- ality focuses on analyzing specific strict standards and formatting for HTML code. The latest version of HTML Validator, which taps into Tidy’s core features, adds a color-coded icon to display the status of the current page that is loaded to the status bar. The real function- ality comes with the information that it displays when you view a page’s source code from 22_596500 ch15.qxd 6/30/05 3:08 PM Page 294 295 Chapter 15 — Hacking Tools for Web Programmers View➪ Page Source. This is where HTML Validator adds a split panel, shown in Figure 15-8, to the bottom of the view source screen. The bottom-left panel provides a list of errors and warnings, and the bottom-right panel contains generic details and possible resolutions for the selected error or warning. A nice feature of this extension is that when in view source mode, clicking on an entry in the bottom-left panel jumps you to the offending code within the source code in the main code window above it, making it easier to track bugs within the code. Another feature that I have not really tapped into, but definitely will, is the Cleanup feature, which is available as a button on the bottom of the Page Source window or from the right-click context menu from the extension’s icon on the status bar. This feature steps you through pro- posed fixes for the offending page with source and browser views for the original as well as the newly cleaned HTML. F IGURE 15-8: HTML Validator list of errors and warnings in view source window For more information or to install HTML Validator, visit http://users.skynet.be/ mgueury/mozilla/. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 295 296 Part V — Installation, Automation, Tools, and Tricks Hacking with Checky Another notable extension for page validation is Checky, which is more centered on using online web validation services but comes with tons of options. This extension also has the abil- ity to create an agent, which automates several validation checks and caches the results locally. For more information or to install Checky, visit http://checky.sourceforge.net/ extension.html. Summary This chapter highlights how to quickly make local configuration changes, discusses using ScrapBook to organize notes and web pages, and finally recommends the mother of all web developer extensions to get the boat rockin’. After that, the chapter dives into a few extensions that help with hacking HTML, links, JavaScript, XUL, and validating web pages. The chap- ter’s main goal is to provide well-rooted and actively supported extensions that can really make an impact on the day-to-day web programming drudgeries that usually pop up. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 296 Creating Extensions and Themes Chapter 16 Understanding Mozilla Programming Chapter 17 Creating Extensions Chapter 18 Creating Themes part in this part 23_596500 pt06.qxd 6/30/05 3:09 PM Page 297 23_596500 pt06.qxd 6/30/05 3:09 PM Page 298 Understanding Mozilla Programming T his chapter introduces you to the wonderful world of Mozilla pro- gramming. You get to know the main Mozilla technologies and see how these technologies work together. After getting acquainted with the various concepts and terms, we take our first look at the exciting possi- bilities found in creating new browser extensions. What makes Mozilla programming and especially Mozilla extension pro- gramming so great? You can quickly achieve quite a lot with a simple text editor and some imagination. Moreover, Mozilla is truly cross-platform. For example, the vast majority of Firefox extensions can run on many different operating systems with no modifications whatsoever. Finally, Mozilla is open source. This means that you can see exactly what is happening behind the curtains in each and every component you want to enhance or modify. It also means that there are more people in the community who know the inner workings of the various Mozilla parts and can help you on your devel- opment quest. Understanding Mozilla Technologies This section provides an overview of the various Mozilla technologies, beginning with XML User Interface Language (XUL), the language Mozilla uses to describe user interfaces (UI). Then we’ll discuss JavaScript, a programming language used to implement the logic behind the user inter- face. You’ll also see how to use Cascading Style Sheets (CSS) to define the appearance of your HTML and XUL documents and how to programmati- cally access these documents using the Document Object Model (DOM) interfaces. The section concludes with a short overview of the Cross Platform Component Object Model (XPCOM). ˛ Understanding Mozilla technologies ˛ Introducing Firefox extension programming chapter in this chapter by Alex Sirota 24_596500 ch16.qxd 6/30/05 3:11 PM Page 299 300 Part VI — Creating Extensions and Themes XUL: XML User Interface Language XML User Interface Language (XUL) is the language used in Mozilla to describe user inter- faces. Being an XML language, it has all the advantages of XML: it is simple, text based, cross- platform, and very flexible. You can create an advanced user interface with XUL in minutes using a simple text editor. You don’t need to compile anything or to learn any platform-specific concepts or tools. This makes creating user interfaces with Mozilla as straightforward as creat- ing regular web pages, and similarly to a web page, your XUL user interface works on any plat- form supported by Mozilla. XUL is pronounced “zool” (rhymes with “cool”). XUL can be used to create both simple and complex user interfaces, starting with simple dialogs all the way to full-featured applications. In fact, the Mozilla applications — Firefox, Thunderbird, and the Mozilla Suite — are all built using XUL. There are several other XUL- based applications, including the Internet Relay Chat (IRC) client named ChatZilla. User interfaces created with XUL can be easily skinned, extended, and localized. For example, you can change the visual theme of your UI or translate it to another language by simply changing a few text files. Another nice feature is that you can open XUL documents inside your browser’s content area — exactly as you would open an HTML document. You can even run your XUL-based application directly from the Internet. This makes creating web applica- tions as easy as creating web pages. A XUL user interface definition is an XML file that contains the UI elements and their hierar- chal structure. For instance, your interface may consist of a window that contains two boxes. Each box can in turn have any number of child widgets (entry boxes, buttons, labels, and so on). In the following sections, we create and lay out some simple widgets, and finally create a com- plete XUL document. If you want to test the XUL code in the following examples, you can create a file with a .xul extension and the following contents: <?xml version=”1.0” encoding=”UTF-8”?> <window align=”start” xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there .is.only.xul”> . . . [Your XUL widgets go here] . . . </window> 24_596500 ch16.qxd 6/30/05 3:11 PM Page 300 301 Chapter 16 — Understanding Mozilla Programming Once you create the file and insert some XUL elements, you can open it in Firefox using File➪ Open File. The align=”start” part makes sure your XUL widgets are shown correctly when opened inside the browser window. XUL Widgets The basic element of a XUL document is a widget. Buttons, text boxes, menu items, and so on are all widgets. A widget is created by inserting an appropriate element into your XUL docu- ment. The attributes of this element determine the various properties of your widget. For example, the following defines a simple button: <button label=”Go”/> The label attribute determines the text that appears on the button. A button by itself isn’t much of a user interface, so let’s add a text box: <textbox value=”Enter you text here”/> The optional value attribute defines the default text that initially appears inside the text box. You shouldn’t put text labels directly in a XUL file. If you do, you won’t be able to use Mozilla’s localization mechanisms to translate this text into other languages. If you use XML entities instead of literal text strings, the translation will become virtually effortless. You learn about Mozilla localization in the next chapter. XUL elements can have many optional attributes. For example, some of the attributes that a text box can have follow: Ⅲ maxlength: The maximal number of characters that can be entered into the text box. Ⅲ readonly: Setting this attribute to true makes the entry box read-only. Ⅲ type: You can create special-purpose entry boxes with this attribute. For example, set- ting the value of this attribute to password creates a password entry box, one that doesn’t display what is being typed. XUL Layout We have seen how individual widgets can be specified using XUL. Now it is time to see how XUL handles layout. XUL uses a scheme called the box model to specify how the elements are oriented, aligned, and positioned. The user interface is divided into boxes. A box can contain UI elements or other boxes. Each box specifies whether its child elements are horizontally or vertically aligned. By grouping your elements into boxes, adding spacers, and specifying the flexibility of your ele- ments, you can achieve the wanted layout for you user interface. For example, the following specifies that we want three buttons to be arranged in a row: <hbox> <button label=”Red”/> <button label=”Green”/> <button label=”Blue”/> </hbox> 24_596500 ch16.qxd 6/30/05 3:11 PM Page 301 . the effort required. Hacking with the DOM Inspector The DOM Inspector is easily the best tool to use when working with Firefox and trying to cre- ate extension overlays by picking apart a window’s. Mozilla Programming Chapter 17 Creating Extensions Chapter 18 Creating Themes part in this part 23_596500 pt06.qxd 6 /30/ 05 3:09 PM Page 297 23_596500 pt06.qxd 6 /30/ 05 3:09 PM Page 298 Understanding Mozilla Programming T his. (XPCOM). ˛ Understanding Mozilla technologies ˛ Introducing Firefox extension programming chapter in this chapter by Alex Sirota 24_596500 ch16.qxd 6 /30/ 05 3:11 PM Page 299 300 Part VI — Creating Extensions and Themes XUL: