7 Options Dialog A few relevant changes were also made to the Options dialog (still accessible via Tools > Options…). As Figure 7 illustrates, the first thing to notice is the new OS-dependent icon set used for the top buttons. However, if you look more carefully, you’ll see that a new Applications button has been added. The Applications tab lets you customize the way Firefox handles known file types and protocols. Figure 6. Viewing Application Options in Firefox 3 The view is divided into two columns, the first listing content types, while the other displays the action that’s to be performed when that particular content type is accessed. The big improvement is that now it’s no longer necessary to hack through about:config settings to set content handles: now, you’re allowed to browse for a specific set of predefined actions using a GUI. I was actually very impressed by how refined the application’s GUI is—in this release, it appears much more refined then Opera’ s. Firefox will try to find an appropriate plugin (if installed) to handle file content, but you can also select your favorite application via a dialog that shows all the installed applications which can open that particular file type. FREE PDF DOWNLOAD: 101 Ways To Make Money From Your Web Site! 8 Additionally, if you prefer, you can set the action to Always ask if you want Firefox to display the usual Open/Save dialog. Besides file actions, you can also set the default action for common Internet protocols and service handlers like mailto, webcal, or web feeds. Some default online apps can also be selected. For example, for web feeds it’s possible to specify Bloglines, Yahoo, or Google. What if your online app isn’t listed? Tough luck. Apparently, you’ll have to go through the usual about:config settings like you did in the old days. Unfortunately, this also applies to the mailto handler, for which only Yahoo Mail is provided as a default. If you’d like to use Gmail, you might want to check out how to do so on LifeHacker. 7 Other minor, but still worthwhile, improvements include the following: ■ You have the ability to use the search-as-you-type feature when searching the contents of your browser’ s cookies. This can be very handy, but unfortunately the search is performed on the cookie contents, not on the domain, so if you type in google, you’ll get a lot of results (that is, any cookie that has “google” in its content, and there are many). ■ In the Advanced tab, it’s possible to view the history of your Firefox updates, and to configure the way the browser checks for updates. Page Info Dialog The old Page Info dialog underwent a major overhaul for this release of Firefox, as Figure 7 shows. It features some pretty icons instead of tabs, and it is now accessible via: ■ Tools > Page Info—the same as always ■ the address bar—just click on the new “identity button” to bring up the identity overlay dialog and click More Information…; you’ll be taken directly to the Page Info > Security tab Why would you want to access Page Info frequently, though? Because it can do amazing things, of course! Perhaps the most important new feature is the ability to save site-specific preferences via the Permissions tab. More specifically, the following site-specific settings have been added: ■ Load Images ■ Open Pop-up Windows ■ Set Cookies ■ Install Extensions or Themes What Firefox actually does, though, is nothing but set an appropriate exception (which will appear imme- diately in Options > Content > [specific content type] Exception) for the current web site. That’s all? Yes, that’s all, but believe me, it’s a big time saver. 7 http://lifehacker.com/392287/set-firefox-3-to-launch-gmail-for-mailto-links/ Firefox 3 Revealed (www.sitepoint.com) 9 Figure 7. The new Page Info dialog for Firefox 3 A similar behavior can also be found in the Security tab—clicking on View Cookies and View Passwords will lead you to the cookie and password manager respectively, but with a filter already set for the current domain name. Now you realize why Mozilla developers have implemented search filters everywhere—they provide a very smart and elegant solution, delivering two new features for the price of one. A Few Little Things … Additionally, a few small but still significant things were improved or added to the GUI: ■ discontinuous text selection, like in MS Word or MS OneNote and other fancy office programs ■ full-page zoom: it’s possible to zoom in “properly,” not only on text, but on images as well. Moreover, Firefox will remember the zoom level you set for a particular page (although the page will actually be resized a fraction of a second after loading) ■ smoother tab scrolling, via the mouse wheel ■ tab cloning—just drag a tab holding Ctrl to copy it instead of moving it ■ resizable search bar—just drag the separator between the address and search bars FREE PDF DOWNLOAD: 101 Ways To Make Money From Your Web Site! 10 ■ “real” full screen is accessible simply by hitting F11 (even the address bar and tabs will be hidden!) That’ s it for the user interface. Okay, so it looks pretty and it’s more usable, but what about under the hood? In the next section, we’ll take a look at a crucial part of the new Firefox—security. Security Security has always been one of the main concerns of the Mozilla Foundation. In fact, one of the most common Firefox marketing slogans was “Browse the web more securely.” Web Site Identification Firefox 3 delivers more security-oriented features than previous versions of the browser. Whenever you visit a web site that’s authenticated via a SSL certificate, if the certificate is valid and verified you’ll see the name of the organization that owns the site on a green background right next to the site icon in the address bar. Try it yourself by visiting paypal.com. Clicking the new “identify web site” icon (the favicon next to the address bar) will open an overlay dialog that displays more information about the owners of the web site and the authority that verified its identify. Additionally, a green icon displaying a passport officer will be shown, as Figure 8 illustrates. That’s the signal Firefox uses to say “this site is safe, carry on browsing.” Personally, I’d have opted for a less cheesy image, but this one certainly does the job. Figure 8. Using Firefox’s new web site identification features If you’re still not satisfied with the information provided about the site, you can click the More Information… button to access the Security tab of the Page Info dialog, where it’s possible to view the site’s security certi- ficates, cookies, technical details, and more. If you’re visiting a web site that doesn’t have a SSL certificate, no name is shown next to the icon in the address bar, and the background remains gray. Clicking it will display an overlay dialog to indicate that the web site doesn’t supply identity information. Things change slightly if you visit a web site with which a security certificate is associated that uses the https protocol, but there’ s a problem with the certificate (usually it has expired: this may even happen with corporate intranet sites). When you visit such a site, the site won’t display, and a standard Firefox error Firefox 3 Revealed (www.sitepoint.com) 11 page will show. The message says “Secure Connection Failed,” and it’s accompanied by the usual icon featuring the policemen, this time with a yellow background. Apparently there’s no way to view the site you’re trying to access (which scared me to death when I tried to access one of our intranet sites at work!). Luckily, if you click the Or you can add an exception… link at the bottom of the dialog, you can choose whether to Get out of here… (yes, it literally says that). Doing so will take you back to the standard Firefox start page, or prompt you to Add an exception. This turns out to be a really useful feature if you frequently have to browse web sites whose security certi- ficates expire because nobody bothered to pay the yearly renewal: once you add an exception, you’ll be able to browse the site with no warnings at all—which is something neither Firefox 2 nor IE 7 allow you to do. Adding an exception is relatively painless: 1. Click the Add Exception… button. 2. In the Add Security Exception dialog, click the Get Certificate button. 3. Once the certificate has been retrieved, you can optionally view it by clicking the View button. 4. Click Confirm Security Exception (the Permanently Store This Exception checkbox is enabled by default). For more information about web site identification in Firefox 3, check out Deb Richardson’s blog post 8 (it also contains a precise explanation of each “passport officer” icon). Password Management The other security-related area which has been improved in Firefox 3 is the password management system. What’s wrong with the way Firefox 2 stored and managed passwords? Let’s see … ■ An obtrusive, extremely annoying modal dialog asked you whether you want to save the credential you just provided, before they were submitted. The number of incorrect passwords I stored as a result of this feature was embarrassingly high. ■ If you wanted to view a password for a specific site, either you remembered the exact URL of the site, or you had to manually scroll down the list of sites for which a password was stored. Both issues have been fixed in Firefox 3: ■ Password Dialogs are no longer modal. Instead, they slide down from the top of the page allowing you to continue browsing. Furthermore, they’re smart enough to appear only after you actually logged in. ■ Search capability has been added to the Saved Passwords dialog. What a great idea: a simple change that saves precious minutes of users’ time. What’s left to improve? Well, it would be nice to have the secure login extension built in, 9 maybe with an icon in the address bar (you can do virtually anything in it, even post to Twitter). 10 8 http://www.dria.org/wordpress/archives/2008/05/06/635/ 9 https://addons.mozilla.org/en-US/firefox/addon/4429 10 https://addons.mozilla.org/en-US/firefox/addon/4664 FREE PDF DOWNLOAD: 101 Ways To Make Money From Your Web Site! 12 Now that we’ve explored the ways in which Firefox 3 is more secure than its predecessor, let’s see how it performs. Performance Firefox 3 is noticeably faster and more lightweight than its predecessors. This isn’t the usual “this is the fastest Firefox yet” announcement: in this release, the browser has finally become usable without being a memory hog. I’m not being harsh: this is perhaps the biggest complaint that I and a lot of other users have had about the browser since Firefox 1.5 came out. Finally, everything seems lightning fast: ■ It starts … er … instantly—meaning that Opera and Safari are still faster on startup, but you don’t have to wait half a minute for Firefox to finally come to life. ■ “Heavily-Ajaxified” pages are much faster—I was particularly impressed by the speed of Gmail: you don’t really have to wait more than a fraction of a second when you archive emails, for example. ■ You can leave Firefox 3 on for hours without having it eating more and more of your RAM. This is the short story, from the point of view of the everyday user. Memory Management Improvements As a matter of fact, Firefox developers really did an outstanding job this time. There’s a very interesting post on pavlov.net 11 explaining what was done in detail. The memory problems with Firefox 2 were apparently attributable, in part at least, to memory fragmentation. This is similar to the phenomenon that affects hard drive memory when you install and uninstall programs: your disk becomes fragmented, which can degrade performance. A similar thing occurs with RAM, only that in Firefox’s case, it happens whenever you open and close web pages in tabs: whenever a new page is loaded, if it’s bigger than the largest space in the heap, it won’t fit in; the only solution for the program is to increase the heap size. Fortunately, the adoption of jemalloc (the same memory allocator used by FreeBSD) reduced memory fragmentation and, apparently, caused a 22% drop in the total amount of memory used by Firefox (on Windows Vista, at least). Another important improvement to memory management was the introduction of a new “cycle collector” to automatically break mutual references between two objects when they’re no longer being used. This, in addition to other tweaks, such as improved expiration policies for Firefox’s caches and optimized image storage, have all helped to successfully rein in the browser’s previous memory usage woes. Really Fast JavaScript Execution Besides improving memory management, Firefox developers also worked hard to improve JavaScript per- formance. According to the benchmarks conducted by a few people, Firefox 3 seems to be significantly faster than its predecessor when it comes to executing JavaScript code. Most of the benchmarks were con- 11 http://blog.pavlov.net/2008/03/11/firefox-3-memory-usage/ Firefox 3 Revealed (www.sitepoint.com) 13 ducted using WebKit’s SunSpider JavaScript Benchmark, 12 and in most tests, Firefox seems to perform better than its main competitors (Opera 9.5 beta, Safari 3.1 beta, and Internet Explorer 8 beta). Of course, benchmarks shouldn’t be taken too seriously, but personally, I noticed that sites like Gmail and Google Reader seemed snappier in Firefox 3 than in Opera 9.5 beta, for example. Try using Gmail in Firefox 3: there are virtually no delays when performing “simple” Ajax calls to archive or load emails. Cairo I remember when I installed the first beta versions of Firefox 3: about 70% of the text on web sites seemed to have lost crispness and antialiasing for no apparent reason. This happened because at the time Firefox was using an unpatched version of the Cairo graphics library, 13 which didn’t work that well on LCD displays. But as of Firefox 3 RC1, the issue was fixed. Despite the initial problems, the integration of Cairo into Firefox core brought quite a few advantages to both users, namely: ■ hardware-accelerated 2D image rendering ■ fewer graphic rendering bugs ■ better-looking graphics Also, Gecko developers won’t have to worry too much about maintaining graphics-related code, as most of their burden will be lifted by Cairo’s development team: this appears to be another very significant victory for the Open Source model, that’s for sure. Reflow Refactoring Cairo isn’t the only big change concerning Firefox rendering, though. Firefox 3 sports a brand new (and still beta) release of the Gecko layout engine. Gecko 1.9b introduces improvements in many areas, but the so-called “reflow refactoring” seems to be one of the most notable ones. The concept of reflowing has been defined in CSS 2.1 specifications to indicate the way browsers should position elements on a web page. More specifically, earlier versions of Firefox suffered a lot of bugs relating to the way the browser performed incremental reflows—the repositioning of elements on the page while the page is loading. Incremental reflow problems were often noticeable on pages in which the width of some elements (like tables and images) were not defined or defined via percentages. In such cases, the browser was caused to perform an incremental reflow to determine the correct width based on other elements on the page. The most famous of these bugs was the Slashdot Rendering Bug, 14 which appeared in Firefox 0.8. This caused the incorrect rendering of the text on the Slashdot web page. Apparently quite a few similar bugs were discovered (and fixed) in the last few years, and they were all caused by the way the Gecko engine performed incremental reflows. For a more detailed explanation of 12 http://webkit.org/perf/sunspider-0.9/sunspider.html 13 http://cairographics.org/ 14 http://www.deftone.com/blogzilla/archives/firefox_and_rendering_slashdot.html FREE PDF DOWNLOAD: 101 Ways To Make Money From Your Web Site! 14 the situation, refer to the reflow refactoring page of Mozilla wiki. 15 It’s quite an interesting read, but is also a little technical for the average reader, as it mentions various implementation aspects in detail. What really matters is that as of Firefox 3, a lot (all?) bugs related to incremental reflow and intrinsic width were fixed, the browser is now able to display page elements more consistently, and it passes the Acid 2 16 test. Unlike Opera and Safari developers, Firefox developers didn’t really try to build the browser to pass the Acid 3 test, the main reason being that Firefox 3 release was too close to bother with it. Color Profiles Designers will be happy (or maybe not…) to discover that Firefox 3 supports color profiles. 17 This means that Firefox is now able to render images (pictures in particular) with their proper colors, for instance, when they’re viewed in professional photo editing programs like Adobe Photoshop. Deb Richardson wrote a very interesting article 18 about this new hidden feature, which is worth reading. Color support can be enabled either by installing the Color Management extension 19 or by editing two settings in your about:config page (if you know what you’re doing). This feature can be a great thing for Flickr users and photographers, but others may be a little bit reluctant to enable it, due to two significant trade-offs: ■ It affects the browser’s rendering speed (it becomes 10-15% slower). ■ Color profiles aren’t supported by plugins, and this may break color matching with certain web pages (designers, beware!). These are the reasons why this feature is disabled by default (and why I’m going to disable the Color Man- agement extension in my browser for the time being). A Developer’s Dream If you think that this new Firefox release is all about user interface improvements and performance, you’re wrong. This is perhaps the most notable developer-oriented release the Mozilla Foundation has produced so far: the number of open-source APIs and developer goodies that ship along with Firefox 3 is unpreced- ented and very impressive. CSS Improvements Firefox 3 delivers higher CSS 2.1 support. A lot of CSS-related bugs have been fixed, and a few new features have been added. 15 http://wiki.mozilla.org/Gecko:Reflow_Refactoring 16 http://www.webstandards.org/files/acid2/test.html 17 http://en.wikipedia.org/wiki/Color_profile 18 http://www.dria.org/wordpress/archives/2008/04/29/633/ 19 https://addons.mozilla.org/en-US/firefox/addon/6891/ Firefox 3 Revealed (www.sitepoint.com) 15 Kevin Yank wrote an informative post about two of Firefox 3’ s new CSS features: 20 its support for the ­ HTML entity (or “soft hyphen”), and for the inline-block display type. Soft hyphens can be used to tell the browser where it’s acceptable to break a word—a feature that’s partic- ularly useful for long words which wouldn’t otherwise be hyphenated. Apparently Firefox was the only major browser not to support this capability, so it will be possible and relatively safe to start using soft hy- phens from now on. The inline-block value for the display property, on the other hand, is not supported by IE7, so you still need to take precautions (such as creating a separate style sheet for “other” browsers), but it’s still a cool feature: if the display property of an element is set to inline-block, the element will be rendered as inline, but its content as block. For more details and examples, check out Kevin’s post. Other CSS improvements include: ■ color translucency support for the color property via rgba() and hsla() ■ font-size-adjust now works on non-Windows platforms too ■ ime-mode property to set the default state of form fields to normal, active, inactive, or disabled ■ text-rendering property to instruct the Gecko engine to render text optimizing speed, legibility, or geometric precision (see some examples on the Mozilla developer site) 21 ■ :default CSS selector, to set the default properties of similar elements. For other CSS selectors, you’ll have to wait till Firefox 3.1, David Baron reports. 22 ■ the ability to set content and cursor to none ■ support for negative z-index values (finally!) JavaScript Goodies Firefox 3 supports JavaScript 1.8, which includes a few interesting new advantages, such as: ■ expression closures; we can now write function(x) x * x instead of the more verbose function(x) { return x * x; } ■ generator expressions; it’s no longer necessary to create custom generator functions like we did in JavaScript 1.7 ■ the reduce() and reduceRight() methods; these let arrays run a function over all elements of an array, collecting results from previous calls Head over to the Mozilla for Developers web site for more details. 23 20 http://www.sitepoint.com/blogs/2008/05/23/two-hidden-features-new-in-firefox-3/ 21 http://developer.mozilla.org/samples/cssref/text-rendering.html 22 http://dbaron.org/log/20080603-new-selectors/ 23 http://developer.mozilla.org/en/docs/New_in_JavaScript_1.8 FREE PDF DOWNLOAD: 101 Ways To Make Money From Your Web Site! 16 What really makes the difference, though, is the number of new APIs and interfaces that have been released by Mozilla developers. The Firefox User Extension Library (FUEL) 24 includes a set of very useful objects that will simplify the life of those who want to develop Firefox extensions, such as: ■ The Annotation object, to store custom data about a web page ■ The Bookmark, BookmarkFolder and BookmarkRoot objects, to handle bookmarks ■ The BrowserTab object, to control browser tabs, their state and contents ■ The Console object, to send messages to Firefox Error Console ■ The Events, EventItem and EventListener objects to manage browser events ■ The Extension and Extensions objects, to access the currently-installed extensions ■ The Preference and PreferenceBranch objects, to access Firefox options ■ The Window object, to manage browser windows and their tabs ■ The SessionStorage objects, to manage storage items Additionally, quite a few new public interfaces have been released: ■ nsIJSON—to encode and decode JSON strings. ■ nsIIdleService—to monitor user (in)activity. ■ nsIZipWriter—to compress data into ZIP files. ■ nsIThreadManager—to create and manage threads and dispatch events to them. ■ nsIParentalControlService—to access Windows Vista’s build-in parental control. ■ nsILoginManager and nsILoginInfo—to access the password manager. Last but not least, a new shiny Places API 25 to access the new bookmarking and history features. Offline Applications Made Easier The HTML 5 Working Draft 26 has been around for a while, and although it doesn’t yet qualify as a new, standardized HTML specification, it’ s on its way to doing so. A clear sign of this possibility is the increasing support browsers are rolling out, tag by tag, as time goes on. Firefox 3 puts into practice quite a few interesting HTML5 features, and offline caching is definitely one of them. Imagine being able to use your favorite web applications offline as well! In fact Google Gears was created for that very purpose. 27 But what we have here is a more standardized, native form of support for offline applications, which could potentially change the way such applications are developed (for instance, they might not require a third-party API). Firefox 2 already offered support for DOM storage, 28 which provides a way to overcome the most annoying limitations of browser cookies. In a nutshell, DOM storage allows developers to programmatically store re- sources on the client machine without having to worry too much about their size or making sure that they’re secure. The idea behind DOM storage is to provide storage via an easy-to-use and standardized API. 24 http://developer.mozilla.org/en/docs/FUEL 25 http://developer.mozilla.org/en/docs/Places 26 http://www.w3.org/TR/2008/WD-html5-20080122/ 27 http://gears.google.com/ 28 http://developer.mozilla.org/en/docs/DOM:Storage Firefox 3 Revealed (www.sitepoint.com) . details. 23 20 http://www.sitepoint.com/blogs /20 08/05/ 23 / two-hidden-features-new-in -firefox- 3/ 21 http://developer.mozilla.org/samples/cssref/text-rendering.html 22 http://dbaron.org/log /20 0806 03- new-selectors/. http://blog.pavlov.net /20 08/ 03/ 11 /firefox- 3- memory-usage/ Firefox 3 Revealed (www.sitepoint.com) 13 ducted using WebKit’s SunSpider JavaScript Benchmark, 12 and in most tests, Firefox seems to. http://lifehacker.com /39 22 87/set -firefox- 3- to-launch-gmail-for-mailto-links/ Firefox 3 Revealed (www.sitepoint.com) 9 Figure 7. The new Page Info dialog for Firefox 3 A similar behavior can