Firefox Hacks [Electronic resources] نسخه متنی

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.