{"id":248,"date":"2006-04-10T12:28:12","date_gmt":"2006-04-10T18:28:12","guid":{"rendered":"http:\/\/blog.codedread.com\/?p=248"},"modified":"2006-04-10T12:28:12","modified_gmt":"2006-04-10T18:28:12","slug":"polishing-firefox-chrome","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2006\/04\/10\/polishing-firefox-chrome\/","title":{"rendered":"Polishing Firefox Chrome"},"content":{"rendered":"<p>The Mozilla folks are wrapping up <a href=\"http:\/\/groups.google.com\/group\/mozilla.dev.apps.firefox\/browse_frm\/thread\/6947a05fed1e088c\/73c66a86dd3cf11d#73c66a86dd3cf11d\">discussion<\/a> on how Firefox 2 user interface will change.  Some of the things I like, but I still don't see my biggest pet peeve about the Firefox User Interface (UI) addressed:  I absolutely hate the way that <a href=\"http:\/\/www.mozilla.com\/firefox\/\" title=\"Go download the Firefox browser now\">Firefox 1.5<\/a> squeezes the Search Bar next to the Address Bar like some inconsequential widget.  For me, it's one of most heavily-used things in the user interface.  This entry will show you how to tweak the user interface (sometimes called \"chrome\").  You don't need any heavy programming skills for this.  Basically you need to be comfortable renaming files, unzipping and zipping up directories and editing text files.  <!--more--><\/p>\n<p><script type=\"text\/javascript\" src=\"http:\/\/www.codedread.com\/googleads.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\"><\/script><\/p>\n<p>First, here's the default Firefox 1.5 user interface (or \"chrome\").  Yours may vary depending upon colour settings and operating system:<\/p>\n<p><a href=\"http:\/\/www.codedread.com\/images\/Firefox15_DefaultChrome.png\" title=\"Click for full-size image\"><img decoding=\"async\" src=\"http:\/\/www.codedread.com\/images\/Firefox15_DefaultChrome.png\" alt=\"My Firefox 1.5 UI Pet Peeve\" \/><\/a><\/p>\n<p>Now let's see how to tweak the user interface (UI) of Firefox 1.5 to your liking.<\/p>\n<h3>Customizing Firefox From Within<\/h3>\n<p>There are a couple things you can do from within Firefox itself to customize how where you want the menus\/toolbars\/buttons to be.  This is, by far, the easiest way for a novice user to customize things.  You just need to know how to point, click and drag.<\/p>\n<p>Open Firefox and go to View > Toolbars > Customize.  This puts Firefox into something I'll call Toolbar Customization mode.  To end Toolbar Customization mode, close the \"Customize Toolbar\" window.  In this mode you can actually drag around the items on your toolbars to suit your liking.  You can add new buttons and remove ones you don't like.  I'll explain how to do each:<\/p>\n<h4>Removing Toolbar Buttons<\/h4>\n<p>The window that pops up shows you any buttons\/widgets that Firefox does not currently have in its chrome.  Think of it as a \"bucket\".  You can take things out and put things into this \"bucket\".  When you're done, simply close the window.<\/p>\n<p>The first thing I do is to get rid of the \"Go\" button next to the address bar (which I find useless, since pressing \"Enter\" in the Address Bar will have the same effect).  Put your mouse over the \"Go\" (the one with the little green arrow), hold down the left-mouse button and drag the \"Go\" into the bucket.  Bye-bye \"Go\" button.<\/p>\n<p><script type=\"text\/javascript\" src=\"http:\/\/www.codedread.com\/googleads.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\"><\/script><\/p>\n<h4>Adding Toolbar Buttons<\/h4>\n<p>The next thing I like to do is to include the \"New Tab\" button, which is in the bucket by default.  This buttons creates a new blank tab for browsing.  For those who care, the same effect can be accomplished by pressing CTRL+T.  As to why I like the \"New Tab\" button but hate the \"Go\" button, when shortcut keys exist for both:  I have no idea.  Maybe because \"Enter\" is easier than CTRL+T?  I don't know.  The point is that with a customizable browser like Firefox, you can tailor it to suit your own idiosynchrocies.<\/p>\n<p>Anyway, the New Tab button has a picture of a folder tab and a little green \"plus\" symbol.  Find this button and drag it onto the toolbar where you want it to be.  If you drag it to \"Bookmarks Toolbar Items\" and drop it, it will actually drop as a small little button.  Another logical location is somewhere near the address bar (in which case you get a bigger button).<\/p>\n<h4>Moving Toolbar Buttons<\/h4>\n<p>Now finally to start addressing my pet peeve.  Let's take the search bar (usually this has a \"G\" for <a href=\"http:\/\/www.google.com\/\">Google<\/a> in it and drag it away from that address bar.  I found an unorthodox place for the search bar in the actual menu bar between the throbber (the thing that looks wheel) and the <u>H<\/u>elp menu.  People may frown upon this, but I actually am quite comfortable with its location, since in wider windows the menu bar has a lot of unused real estate.<\/p>\n<h4>Adding a New Toolbar<\/h4>\n<p>If you don't like this idea, you can add a new toolbar by clicking the \"Add New Toolbar\" button in the Customize Toolbars window.  Name it something like \"Search\".  Once you do this, a blank bar is added to the chrome.  Now you can throw buttons on to this new toolbar by dragging buttons from the bucket or from the existing toolbars.<\/p>\n<p>In the next page, we'll talk about how to further customize your Firefox UI by hacking the chrome.  <!--nextpage--><\/p>\n<h3>Hacking Firefox Chrome<\/h3>\n<p>Now if you've been following along and you moved the Search Bar to the menu bar, you'll notice that while the Address Bar expanded to fill up the remaining space, the same thing did <em>not<\/em> happen with the Search Bar.  We're going to fix that now, but it will require some hacking.<\/p>\n<p><script type=\"text\/javascript\" src=\"http:\/\/www.codedread.com\/googleads.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\"><\/script><\/p>\n<p>First, an explanation:  The Firefox UI is controlled by a set of text files.  These text files can be <span class=\"definition\" title=\"Cascading Style Sheets\">CSS<\/span>, JavaScript and <span class=\"definition\" title=\"XML User Interface Language\">XUL<\/span> files.  These text files are then all collected up and zipped into big files called \"Jar\" files.  What we're going to do is unzip a Jar file, edit two files and then zip it back up.  That's all that needs to be done to change the appearance and behavior of many facets within the Firefox user interface.<\/p>\n<p>The file we're going to touch is in your Firefox installation directory (default is <em>C:\\Program Files\\Mozilla Firefox\\<\/em>) under the \"chrome\" subdirectory and it's called <em>browser.jar<\/em>.  First, make a copy of this file for backup.  This is the file you can use to recover if you mess something up (simply delete your messed up browser.jar and rename this backup to browser.jar).<\/p>\n<p>Now, make a copy of browser.jar for editing.  Instructions for Windows XP follow:<\/p>\n<ul>\n<li>right-click browser.jar and click Copy<\/li>\n<li>right-click in the folder and click Paste<\/li>\n<li>right-click on this new file and rename it to browser.zip (ignore the warning about changing the file extension)<\/li>\n<li>right-click browser.zip and click \"Extract All\".  Accept the defaults on the Extraction Wizard screen.<\/li>\n<\/ul>\n<p>After extracting you'll have a subdirectory inside your \"chrome\" subdirectory.  Navigate into this structure and the file <em>content\/browser\/browser.xul<\/em>.  This is the first file we're going to edit.  Right-click the file and open it up in a text editor (you may need to associate .xul files with a text editor first).<\/p>\n<p>In the browser.xul file, find the following section:<\/p>\n<div class=\"code\">\n&#160;&#160;&#60;toolbaritem id=\"search-container\" title=\"&searchItem.title;\"<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;align=\"center\" class=\"chromeclass-toolbar-additional\" ><br \/>\n&#160;&#160;&#160;&#160;&#60;searchbar id=\"searchbar\"\/><br \/>\n&#160;&#160;&#60;\/toolbaritem>\n<\/div>\n<p>and change it to:<\/p>\n<div class=\"code\">\n&#160;&#160;&#60;toolbaritem id=\"search-container\" title=\"&searchItem.title;\"<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;align=\"center\" class=\"chromeclass-toolbar-additional\" flex=\"1000\"><br \/>\n&#160;&#160;&#160;&#160;&#60;searchbar id=\"searchbar\" flex=\"1000\"\/><br \/>\n&#160;&#160;&#60;\/toolbaritem>\n<\/div>\n<p>Basically we just added two <em>flex<\/em> attributes.  One to the Search Toolbar container and one to the Search Toolbar itself.  This tells the layout engine to stretch this widget so that it takes up any remaining space in its container.<\/p>\n<p><script type=\"text\/javascript\" src=\"http:\/\/www.codedread.com\/googleads.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\"><\/script><\/p>\n<p>Next, for a bonus, edit the search.xml file (also located in <em>content\/browser\/<\/em>) and find the following section:<\/p>\n<div class=\"code\">\n&#160;&#160;&#60;xul :textbox class=\"searchbar-textbox\" type=\"autocomplete\" flex=\"1\"<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;autocompletepopup=\"PopupAutoComplete\"<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;autocompletesearch=\"form-history\"<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;autocompletesearchparam=\"searchbar-history\"\n<\/div>\n<p>and change it to:<\/p>\n<div class=\"code\">\n&#160;&#160;&#60;xul :textbox class=\"searchbar-textbox\" type=\"autocomplete\" flex=\"1\"<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;enablehistory=\"true\"<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;autocompletepopup=\"PopupAutoComplete\"<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;autocompletesearch=\"form-history\"<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;autocompletesearchparam=\"searchbar-history\"\n<\/div>\n<p>Here we've added the enablehistory attribute to the Search text box.  This will give you a pull-down button on the bar and allow you to scroll through your previous searches.<\/p>\n<p>Once the changes are done, it's time to see if we did everything proper.  Navigate back up to the \"C:\\Program Files\\Mozilla Firefox\\chrome\" subdirectory and right-click on the \"browser\" folder.  Choose Send To > Compressed (zipped) Folder.  This will update browser.zip with your changes.<\/p>\n<p>Now the moment of truth.  You'll need to install your new browser.zip as the chrome that Firefox should use.  <b>To do this final step, you must shut down your Firefox browser<\/b> (since it is currently using the file).  Once Firefox is completely closed, delete the browser.jar file and rename browser.zip to browser.jar.  Start up your browser again.  If you did everything right, you should see the new chrome as shown in the below picture (minus the purple arrows and text).<\/p>\n<p><a href=\"http:\/\/www.codedread.com\/images\/Firefox15_MyChrome.png\" title=\"Click for full-size image\"><img decoding=\"async\" src=\"http:\/\/www.codedread.com\/images\/Firefox15_MyChrome.png\" alt=\"My Chrome for Firefox 1.5\" \/><\/a><\/p>\n<p>By the way, if any guru out there knows how to accomplish these changes using user.js, please let me know (leave a comment).<\/p>\n<p><script type=\"text\/javascript\" src=\"http:\/\/www.codedread.com\/googleads.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Mozilla folks are wrapping up discussion on how Firefox 2 user interface will change. Some of the things I like, but I still don&#8217;t see my biggest pet peeve about the Firefox User Interface (UI) addressed: I absolutely hate the way that Firefox 1.5 squeezes the Search Bar next to the Address Bar like [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,25,11,28],"tags":[],"class_list":["post-248","post","type-post","status-publish","format-standard","hentry","category-firefox","category-software","category-technology","category-web"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=248"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/248\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}