extremetech Hacking Firefox phần 10 pdf

388 Part VI — Creating Extensions and Themes F IGURE 18-5: DOM Inspector F IGURE 18-6: Reload button, CSS Style Rules Now that the CSS rules are shown, you can actually see what code controls the Reload button. The first two lines in the CSS Style Rules pane are irrelevant. The third item details the styles applied to all buttons. This deals with margins, padding, borders, and text colors.The fourth, fifth, and sixth items — .toolbarbutton-1 — are general properties that deal with the main toolbar buttons only.The following buttons are part of the .toolbarbutton-1 group: Ⅲ Back Ⅲ Forward Ⅲ Reload Ⅲ Stop 26_596500 ch18.qxd 6/30/05 3:16 PM Page 388 389 Chapter 18 — Creating Themes Ⅲ Print Ⅲ Downloads Ⅲ History Ⅲ Mail Ⅲ Bookmarks Ⅲ New Tab Ⅲ New Window Ⅲ Cut Ⅲ Copy Ⅲ Paste The last line, #reload-button, details properties that are specific to the Reload button. Understanding CSS Because the entire user interface is defined through Cascading Style Sheets, you’ll need to know something about CSS to create a Firefox theme. I had never heard of CSS when I started creating Mozilla themes, and that made the process (unnecessarily) difficult. I still don’t know all that much about CSS, but I know enough to get around. If you don’t know any CSS, now might be a good time for a bit of research. A Google search for “CSS Tutorial” will bring up lots of useful sites to get you started. If you’re interested in a quick tutorial, visit the follow- ing sites: Ⅲ http://www.htmlhelp.com/reference/css/ Ⅲ http://www.w3schools.com/css/ Creating Needed Graphics To make your theme truly unique, you’ll need to replace the graphics associated with the default theme. A great majority of the buttons are found in the files browser\toolbar.png and browser\toolbar-small.png. PNG is an extensible file format for the lossless, portable, well-compressed storage of raster images. PNG is a replacement for GIF because PNG allows for true color (24-bit) images with alpha transparency, as opposed to GIF, which allows for 256-color images with indexed trans- parency. Indexed-color, grayscale, and true-color images are supported, plus an optional alpha channel for transparency. The PNG format was sought as a replacement for the GIF format when Unisys requested royalties from GIF-supporting software for the use of its patents on the LZW compression algorithms in 1994. See http://www.webcolors.freeserve.co.uk/png for more information on the PNG format. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 389 390 Part VI — Creating Extensions and Themes Overlay Default Icons If you want to use the same size buttons as the default theme (24 × 24 pixels for large buttons, 16 × 16 pixels for small buttons), you can simply open the image files and replace them with your own images in your image editor. I would recommend this method to anyone unfamiliar with CSS. The default theme uses one large image file to hold all the large toolbar button images and another for the small toolbar button images. In Figure 18-7, the buttons are all laid out on a single *.png image. F IGURE 18-7: Toolbar.png The top row of icons is for the normal state (not disabled, not hovered). The second row holds the icons displayed when you hover over a button with your mouse. The third row is the icons shown when a button is disabled. You’ll notice that there is only one icon on the fourth row — that is the bookmarks icon, which has four states in the default theme. When you click on the bookmarks button, Firefox displays your bookmarks along the left side of the screen. The icon on the fourth row is displayed while the bookmarks are open. Personally, I don’t like to use one large image file to hold all the toolbar images. It’s hard to edit files when they’re stored this way because of image alignment issues. I store each button in a different image, with three button states per image, as shown in Figure 18-8. The only down- side to storing each button in a different image is that compression is generally better when all buttons are stored in a single image, as in Figure 18-7. The compression issues should not affect your theme at all during normal use — only the size of the jar file. F IGURE 18-8: Separate images for each button The normal button image is on top, in the center is the button when hovered over, and on the bottom is the disabled state image. I do not specify a fourth state for the bookmarks icon while open. I modified the code to display the hover state for the icon when the bookmarks are visible. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 390 391 Chapter 18 — Creating Themes Keep in mind that there is no correct way to lay out images; you can simply choose the method that works best for you. As long as the code you write is valid CSS and points to valid images, it will work properly. Layered Images The easiest way for me to align all the different image states was to put each state on a separate layer. That way, I could manipulate each layer individually. Another method that might prove helpful is the use of gridlines. I use Jasc Paint Shop Pro to edit images while creating themes.To overlay the default theme’s images, open browser\toolbar.png, as shown in Figure 18-9. F IGURE 18-9: Paint Shop Pro Because the default theme uses 24 × 24 pixel images for large icons, you need to have your images the same size. Open up the image that you would like to use for the Back button and then copy the image by pressing Ctrl+C, or selecting Edit ➪ Copy. To paste your image as a new layer, press Ctrl+L or select Edit ➪ Paste ➪ Paste As New Layer. You can then select the new layer in the layer properties window (it will be called Raster 2), and use the Move tool to drag your icon over to where the Back button resides in the default icon set. Once you com- plete that step, your display will look similar to Figure 18-10. The Back button on layer 2 is the Back button from the Smoke theme. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 391 392 Part VI — Creating Extensions and Themes F IGURE 18-10: Paint Shop Pro, layered overlay Simply repeat the process until you have covered all images from the default theme with the images you want to appear in your theme. If you put each individual image on its own layer, you can easily manipulate them later on to correct alignment issues. When you are finished editing, select the Raster 1 and then press the Delete key on the keyboard to remove the default images. When saving the image, you might be asked if you want to merge all layers. Select Yes to finish saving the file. If you are using separate images for each button, as I choose to do, the process is similar. You can skip the step on deleting the layer containing the default images, but make sure to put each state of the images on a different layer to help with alignment. Most image editors have the capability to display gridlines behind the images to aid with align- ment. In Figures 18-9 and 18-10, the gridlines are shown as the gray and white squares visible on the background of the images. An easy way to create the small toolbar icons is to simply resize the large toolbar icons. If you’ve already completed the large toolbar icons, you can press Shift+S or choose Image ➪ Resize to shrink your image and then save it as a different name than the large toolbar icon. If you don’t use a different name, you will lose the large toolbar icon because the file will be overwritten. Different image editors handle things slightly differently, but all have the ability to display gridlines and resize images. If you are unsure how to perform an action, consult the help file for your image editor for more information. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 392 393 Chapter 18 — Creating Themes Graphics Locations If you are familiar with CSS, you can modify attributes freely. The majority of the buttons that you see while using Firefox are defined within the browser\browser.css file. I would say that about 90 percent of the Firefox interface that you see from day to day is defined in that file. If you are ever unsure of where a button’s image is located, refer to the DOM Inspector example to find which CSS file the button’s code resides in; then you can look at that CSS file to find out the exact location of the image. Main Toolbar The majority of the buttons you see when using Firefox are defined within the browser\ browser.css file. Browsing through this file will give you the location of all the images used, and you can modify attributes for buttons here. Figure 18-11 displays the main toolbar of the Atlas theme. F IGURE 18-11: Main toolbar Extensions Window The Extensions window requires a few graphics of its own, and they are defined in the mozapps\extensions\extensions.css file. If you wish to put icons on the buttons in the lower left, that is possible. I do not provide icons for those buttons in my themes. Figure 18-12 dis- plays the Extensions window of the Mars theme. F IGURE 18-12: Extensions window 26_596500 ch18.qxd 6/30/05 3:16 PM Page 393 394 Part VI — Creating Extensions and Themes Options Window The Options window requires a few icons for the option categories. The code that governs them resides in the browser\pref\pref.css file. Figure 18-13 displays the Options window of the Apollo theme. F IGURE 18-13: Options window In Firefox 1.1, the location of the code that handles the Options window will be changing. The new location is the browser\preferences\preferences.css file. Figure 18-14 displays the new Options window of Firefox 1.1 with the Neptune theme. F IGURE 18-14: Options window, Firefox 1.1 26_596500 ch18.qxd 6/30/05 3:16 PM Page 394 395 Chapter 18 — Creating Themes Bookmarks Manager The Bookmarks Manager has seven buttons to theme. The code defining the buttons is in the browser\bookmarks\bookmarksManager.css file. Figure 18-15 shows the Bookmarks Manager window of the Pluto theme. F IGURE 18-15: Bookmarks Manager Help Window The icons for the Help window are not actually included within the classic.jar file; they are in the Firefox\Chrome\help.jar file. To theme the Help window, I recommend using the DOM Inspector to find out the CSS id of each button and then adding the code to theme the buttons at the bottom of the global\global.css file. Be sure to set the !important flag after defining any styles for the Help window buttons so that your styles will be used instead of the default. Figure 18-16 shows the Help window of the Playground theme. F IGURE 18-16: Help window Icon Conversion I did not draw any of the images in my themes. I am somewhat of a novice when it comes to creating images. The method I used to create the button images in my themes was to find existing icon sets. After receiving permission from the icon creator to use his or her work, I converted the ICO files to PNG files. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 395 396 Part VI — Creating Extensions and Themes To create a PNG image from an ICO file, I use a product from Axialis IconWorkshop (see Figure 18-17). This is not a free program, and it is available for Windows users only. After opening the ICO file with IconWorkshop, you’ll need to select the size that you want to export as PNG from the list on the right. After selecting the image size, press Ctrl+Shift+T, or select File ➪ Export ➪ PNG with Transparency. F IGURE 18-17: IconWorkshop A Linux utility called ImageMagick will convert ICO files to PNG format. You can find more information at http://www.imagemagick.org/. A Mac program called IconBuilder can convert ICO files to PNG format. You can find more information at http://www.iconfactory.com/iconbuilder.asp. Supporting Popular Extension Buttons While not a requirement, supporting the buttons of popular extensions does enhance a theme. Theming the buttons of an extension is handled slightly differently from theming the standard buttons of Firefox. To theme an extension’s button, you need to find out the button’s CSS id. This can be done one of two ways: with the DOM Inspector or by manually opening up the extension’s JAR file and looking at the code. Either way will work, but I prefer to open the JAR file and look in the CSS there for any button ids. That way, I’m certain that I’ll theme all but- tons of the extension. After locating the button ids and creating images, you’ll need to add lines of code to your theme to support the extension’s buttons. The best way to do this is to open global\global.css and insert lines of code at the bottom of this file. Add the code for all of the extension’s buttons to the bottom of global.css and point the button ids to your images. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 396 397 Chapter 18 — Creating Themes To ensure that your image is shown, you must specify the !important flag in the line of code identifying the button image. The !important flag means that once an attribute is defined as !important, it can never be changed, even if the element is redefined in another CSS file. Here is an example of its use: #extension-button { list-style-image: url(“chrome:\\browser\skin\extension_button.png”) !important; } Let’s look at a real-world example. I’ll show you how to support the Basics extension, available at my web site: http://www.spuler.us. The Basics extension does only one thing: adds a button to the left side of the tab bar that opens a new tab when clicked. This emulates the behavior of the New Tab button that resides in the tab bar for Mozilla and Netscape. The Basics extension utilizes a 16 × 16 pixel image — anything taller than 16 pixels would not fix properly on the tab bar. By default, I have the image for the button set to look identical to the small version of the New Tab button, because many users will be using the default theme. Figure 18-18 shows the default theme with the Basics extension installed. F IGURE 18-18: Default theme, Basics extension I support the Basics extension in all my themes. If I had left out the code for the Basics exten- sion, the iCandy Junior theme would have looked like something was not quite right, because the Basics button would display the icon that is bundled with the extension — the icon from the default Firefox theme, as shown in Figure 18-19. F IGURE 18-19: iCandy Junior theme, Basics extension not supported 26_596500 ch18.qxd 6/30/05 3:16 PM Page 397 [...]... 227 converting ICO files to PNG, 396 CookieCuller extension, 136 cookies blocking, 110 111 defined, 109 , 134 deleting, 110, 136 disabling, 170 Exceptions window, 110 111 expiration date, 135 privacy settings, 109 , 134–135 removing, 110, 136 Stored Cookies window, 110, 136 View Cookies extension, 55, 288–289 viewing, 110 cookies.txt file backup, 15, 275 contents, 270 copying plugins, 218–220 Corel Paint... dialogs, 245 Firefox profile See profile Firefox source code, 350 Firefox themes See themes Firefox UltraBar extension, 54 fireFTP, 279–280 Flash plugin, 251–252 FlashGot extension, 53, 215 focus event, 357 fonts Cascading Style Sheets (CSS), 147 menus, 146–147 ForecastFox extension, 54, 171–172 foreign language translation systems, 230 form data clearing, 102 privacy, 101 102 saving, 101 formatting... CuteMenus extension, 154 handleLabelClick function, 358 hexadecimal codes for colors, 59 hiding menus, 143–145 tab bar, 184 history cache, 106 clearing, 105 108 deleting individual items, 108 Download Manager, 106 107 , 198–201 location of, 105 viewing individual items, 108 history.dat file, 270 HM NIS Editor, 254, 257 home page extensions, 343 multiple home pages, 180–183 single home page, 179–180 hosting... 325 chrome URLs, 324–326 chromeEdit extension downloading, 8, 27 editing environment, 27–28 features, 54 classic.jar file, 383 cleaning up, 99 100 clearing browsing history, 105 108 cache directory, 91 download history, 106 107 , 198–201 form data, 102 login data, 102 settings, 201 click event, 356 clock, 54, 170–171 colors CSS (Cascading Style Sheets), 59 hexadecimal codes, 59 menus, 147 tabs, 185 ColorZilla... 360 preview.png file, 384 privacy cookies, 109 , 134–135 form data, 101 102 login data, 101 102 processor-based optimizations, 96–97 Profile Manager Create Profile wizard, 268–269 launching, 268 Linux, 268 Mac OS X, 268 profile creation, 5 Windows, 268 profiles automating profile creation, 249–250 backups, 14–16, 267–268, 274–275 browser settings, 10 contents, 10 creating, 5, 249–250, 268–269 current... system icon, 159, 161–162 LiveHTTPHeaders extension, 55, 210 212, 287 load event, 357 Local Install extension, 40–41, 53, 71–72, 286 locale directory, 46, 334 locale resource (chrome), 325 locales (extensions), 318 localized strings in JavaScript, 365–366 localstore.rdf file, 270 logging, 342 login data clearing, 102 privacy, 101 102 saving, 101 loops ( JavaScript), 305 Lowery, Joseph W., CSS Hacks... -ms, 244–245, 248 parentheses matching (text editors), 322 parent.lock file, 271 passwords Master Password changing, 104 creating, 104 Password Manager, 102 103 Path parameter (config.ini file), 249 pattern matching, 131–133 pausing downloads, 203 performance optimization cleaning up, 99 100 disk cache location, 91–92 network settings Domain Name Server (DNS) resolution information, 86 FTP idle and keep-alive,... profile, 10 saving, 188 smooth scrolling, 88 browser window background color, 58–62 background images, 62–65 browser.cache.disk.capacity hack, 92–93 browser.cache.disk.parent_directory hack, 91–92 browser.cache.memory.capacity hack, 94 browser.dom.window.dump.enabled preference, 342 browser.xul.error_pages.enabled hack, 88 browsing history cache, 106 clearing, 105 108 deleting individual items, 108 Download... Find-As-You-Type feature, 235–237 finding background images, 63 preferences (about:config), 18–19 profile, 12 Firefox Builds forum, 201 Firefox customization context menus, 366–368 keyboard shortcuts, 368–369 menus, 366–368 toolbar buttons, 369–371 toolbars, 369–370 Firefox extensions See extensions Firefox installation automating, 244 built-in installer options, 243–244 Custom installation type, 4 FFDeploy,... browser.dom.window.dump.enabled preference, 342 browser.xul.error_pages.enabled hack, 88 browsing history cache, 106 clearing, 105 108 deleting individual items, 108 Download Manager, 106 107 locations of, 105 viewing individual items, 108 brushed metal background (themes), 73 bubbling phase (event propagation), 358–359 bugs in themes, 402 Bugzilla website, 88 builds BlueFyre builds, 98 branch builds, 98 branch . 342 browser.xul.error_pages.enabled hack, 88 browsing history cache, 106 clearing, 105 108 deleting individual items, 108 Download Manager, 106 107 locations of, 105 viewing individual items, 108 brushed metal background (themes),. 54 classic.jar file, 383 cleaning up, 99 100 clearing browsing history, 105 108 cache directory, 91 download history, 106 107 , 198–201 form data, 102 login data, 102 settings, 201 click event, 356 clock,. between them at this time. You can obtain a copy of both files by visiting http://www.hackingfirefox.com/themes. Hacking Existing Themes If you wish to modify existing themes, you should be able