Hacking Firefox - part 30 ppt

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 extens

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

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/

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

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/

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

Creating Extensions

and Themes

Chapter 16

Understanding Mozilla Programming

Chapter 17

Creating Extensions

Chapter 18

Creating Themes

part

in this part

Mozilla

Programming

This 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

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]

.

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 labelattribute 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 valueattribute 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 truemakes 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 passwordcreates 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”/>