Hack 1. Ten Ways to Display a Web Page

Displaying a web page is like painting and hanging a picture: there are plenty of options.

Web pages that display only one way are called printouts. Firefox lets you display and view the content of a web page in a number of different ways. You also get to choose decorations for your windows. This hack shows 10 different ways you can display web content in Firefox.

1.3.1. Normal Browser Window

By default, web pages appear inside a frame with a menu bar and toolbars above and a status bar below. Those bars provide user control and feedback. The whole browser window is a single XML document written in Mozilla's XUL dialect of XML. The web page appears inside an XUL <iframe>. Scripts running inside the web page can't reach out into XUL, so those bars are mostly untouchable. Most bars can be disabled from the View menu. Figure 1-3 shows a normal Firefox window with the sidebar made visible.

Figure 1-3. Firefox browser window with sidebar

1.3.2. Source Code Window

The source code window is for web developers and hackers only. Choose ViewPage Source or press Ctrl-U to display the source code for the current page. If the page is a <frameset> page, you see only the frameset definition. You can change line-wrap and syntax-coloring options from the View menu in the new window.

1.3.3. window.open( )

Web pages can contain logic that opens other windows (usually pop ups). Web designers typically do so with the infamous window.open() scripting feature. (Technically, this is a DOM 0 browser feature available from JavaScript only.) These new windows can be opened with specific menu bars and toolbars disabled. Security hobbles prevent some uses of this feature.

If you mitigate security restrictions, then everything is possible. See Rapid Application Development with Mozilla by Nigel McFarlane (Prentice Hall PTR) for a more detailed treatment of Mozilla and Firefox's window.open() options. See JavaScript: The Definitive Guide by David Flanagan (O'Reilly) or any good scripting web site, such as Internet Related Technologies (http://www.irt.org), for the features of window.open() that are supported by all browsers.

1.3.4. Full Screen or Kiosk Mode

You can expand a web page window to fill your entire screen.

Viewing the page in Full Screen mode won't help with readability. For that, you also need to increase the text size using the ViewText SizeIncrease menu option.

You can take up all the screen real estate several different ways. The simplest is to click the operating system's Maximize button on the titlebar. This method, however, retains all toolbars and the titlebar. To get more space, press F11 (or choose ViewFull Screen) for Full Screen mode, which removes nearly all bars. To get rid of the location toolbar as well, hide it using the ViewToolbars menu before pressing F11. Press F11 again to toggle back to normal. Figure 1-4 shows a web page viewed in Firefox's Full Screen mode.

Figure 1-4. A browser window in Full Screen mode

For a robust kiosk mode (full screen with no other display options) that has most Firefox keyboard and mouse commands disabled, you need to hack the chrome ugly, as described in Chapter 7. You can't start kiosk mode from the command line. You can start it with a window.open() call from a secure web page. The following feature string is suitable for a display that's 1024x768 pixels in size:

"chrome,modal,resizable=false,alwaysRaised=true,width=1024,height=768"

The alternative to window.open() is intermediate scripting of Mozilla's XPCOM components using the chrome system.

1.3.5. Chrome-Free Windows

You can display an HTML or XHTML page free of any browser baggage. To do so, you need access to a command line, such as a DOS Box or cmd box under Windows, or a terminal emulator window (like xterm) under Unix/Linux.

On Windows, you need to follow these preparatory steps. Start a DOS Box from the Start menu, usually via StartProgramsMS-DOS Prompt. Then move to the Firefox install area with these commands:

C:
cd "Program Files"
cd Firefox

Next, on all operating systems, just invoke Firefox with the required web page like this:

firefox -chrome 
URL

The equivalent window.open() feature string is "chrome".

1.3.6. Print Preview

Before printing your page, you can see what it will look like. Firefox prepares pages for printing using Cascading Style Sheets (CSS) styles. To see a preview, choose FilePrint Preview and play with the toolbar. Firefox thinks briefly before displaying the preview.

1.3.7. User-Customized

Firefox support for CSS is designed to give the user control of page appearance. If you know CSS, you can exploit the following two files in Firefox:

userContent.css

For styles that affect the appearance of CSS-styled pages that appear in a normal browser window. These styles work on HTML, XHTML, MathML, and CSS-styled generic XML documents.

userChrome.css

For styles that affect the appearance of the Firefox chrome. That includes the toolbars, scrollbars, dialog boxes, menu bars, context menus, and other stuff that Firefox drapes around the displayed page. Since these styles are written using Mozilla's XUL tag set, userChrome.css provides styling for all Firefox XUL content.

For Microsoft Windows, there are some sample files called userChrome-example.css and userContent-example.css included in the Firefox install. They're buried deep inside the profile area. For all platforms, it's best to experiment with harmless styling changes (such as color changes) before proceeding to complex modifications of these files.

Once constructed, these files should be put in the chrome directory of your Firefox profile. Restart Firefox to see any and all effects. Don't forget to use the CSS imperative !important if you want to guarantee that your styles will override any others at work.

You can make small, generic modifications to suit all of your web browsing, or you can build a custom skin for a web site that you visit frequently. For the latter case, you need Firefox 1.1. You can then write web-site-specific CSS styles using this Firefox-specific syntax:

/* one page */
@-moz-document url(http://www.example.com) { color : red; }

/* all sub-pages with this URL as stem */
@-moz-document url-prefix(http://www.irt.org/articles/) { color : red; }

/* all pages at this domain */
@-moz-document domain(mozilla.org) { color : red; }

1.3.8. DOM Hierarchy

For HTML and all XML dialects supported by Mozilla, you can deconstruct a given web document into its pieces. These pieces appear as a sideways tree of tags and tag content. The resulting display is much like that of the Windows Explorer or the Macintosh Finder. Technically, the contents of the tree are W3C DOM nodes. That means tags and tag content.

To see this tree, you need to start the DOM Inspector by navigating to ToolsDOM Inspector. The DOM Inspector is an extension (an added feature) that comes as a bonus with the standard Firefox install. Initially, the DOM Inspector displays the web page of the window from which you started the Inspector. To view any other page, just type a URL into the top text field and click Inspect at the right. The new page appears below. In all cases, in the main pane on the left, you can drill down through the document, revealing its structure. [Hack #53] and [Hack #76] ellie describe use of that tool.

1.3.9. Debug-Enabled

A web page can be displayed so that it is managed by a script-debugging tool. This is a feature designed for programmers. To use this display, install the JavaScript Debugger extension.

To add the JavaScript Debugger, go to ToolsExtensions. In the resulting dialog box, click Get More Extensions. That opens up a web page at the central Mozilla Update web site (http://update.mozilla.org). In that new web page window, you can shop for free extensions. Click the category Developer Tools, scroll down to JavaScript Debugger and click on the install link. Follow the bouncing prompts, and when that is all done, restart Firefox.

If you want the debugger to appear automatically when a given page loads, just put this tiny bit of JavaScript anywhere in the page content:

<script type="application/x-javascript">
 debugger;
</script>

Chapter 5 provides many techniques for debugging Firefox, including use of this debugger [Hack #56] .

1.3.10. Splash Screens

You can display a web page as a splash screen, but this is a harder effect to produce than the others and requires intermediate Web programming. A splash screen appears when a program first starts up and usually contains brand information. For example, the Mozilla Application Suite, which preceded Firefox, has a splash screen. Setup of a splash screen requires some hacking of the chrome files [Chapter 7] or of security arrangements [Chapter 2], so explore those subjects first. It also requires scripting. To make such a splash screen appear, use this feature string in a window.open() call from JavaScript:

"chrome,centerscreen=true,height=200,width=150,titlebar=false"

These options are available only if all security is lifted (e.g., from inside the chrome or from a signed and accepted URL). A similar hack for ordinary browser windows is to calculate window size from the window.screen.x and window.screen.y properties and then use a feature string like this:

"toolbar=no,location=no,personalbar=no,status=no,menubar=no,scrollbars=no, top=225,
left=300,height=200,width=150"

This alternative does not remove the titlebar or work around the Popup Manager. It is not guaranteed to remove the status bar either. Once you move into the world of Mozilla programming, many other page display options are possible, but that's a more complex matter than quick hacks. Splash screens provide more than enough complexity for an introductory chapter like this.