[Wylug-discuss] 'Firefox' Talk Notes

[Smylers]

Hello, these are the promised notes from Monday's 'Firefox' tips and
tricks talk.  Sorry they're late -- the computer I do mail on suffered
yesterday what I'm presuming is a power-supply failure.

These are the 10 levels of 'Firefox' customization that I identified,
with examples of each.


Level 1:  Using Built-in Features

* Keywords for URL searching -- right-click on a textbox on a search
  form (such as a dictionary look-up) and choose 'Add a Keyword for This
  Search'.  Pick a keyword (such as "oed"), then you can use that
  keyword in the URL bar to search directly on the site, for example
  entering just:

    oed cheese

  and having 'Firefox' turn that into something like:

    http://www.askoxford.com/results/?field-12668446=cheese&view=dev_dict&branch=13842570&textsearchtype=exact&sortorder=score%2Cname

  You can press Ctrl+L to get to the URL bar without having to use the
  mouse.

  The state of any other fields on the form, such as the only 'pages
  from the UK' radio button you get on Google UK is taken into account
  -- though if a form has multiple buttons it acts like you clicked the
  first one; to make keywords for other buttons (such as Google's I'm
  Feeling Lucky), see the Live HTTP Headers bit below.

  Here are some of the keywords I have:

    g     Google
    gu    Google UK
    gl    Google I'm Feeling Lucky
    gul   Google UK I'm Feeling Lucky
    gi    Google Images
    wiki  Wikipedia
    map   Streetmap postcode
    map2  Multimap postcode
    dq    Directory Inquiries
    oed   Oxford English Dictionary
    dict  Dictionary.com
    th    Thesaurus.com
    imdb  IMDB film title
    gc    Google Cache
    wm    Wayback Machine
    reg   The Register
    cpan  Perl module documentation
    rfc   internet RFC

  Once you've set up keywords for searching you can save space by
  removing the search box that 'Firefox' comes with (right-click on the
  toolbar, choose 'Customise', then drag it from the toolbar to the
  window that's appeared with a palette of buttons).

  If you install the 'OpenBook' extension then you can configure it to
  make the URL textbox appear in the 'Add Bookmark' dialogue box which
  pops up when you choose 'Add a Keyword for This Bookmark'; that lets
  you see what's happening more easily.


Level 2:  Setting Preferences

Go to 'Edit' | 'Preferences' on Linux, 'Tools' | 'Options' on Windows.

* JavaScript restrictions -- on the 'Web Features' panel next to the
  'JavaScript' checkbox choose the 'Advanced' button.  You can then
  untick the first two options, and block sites from interfering with
  the size and position of your existing 'Firefox' windows.

* Webpages from other apps in new tabs -- on the 'Advanced' panel in the
  'Tabbed Browsing' bit set 'Open links from other applications in' 'a
  new tab in the most recent window', and avoid the situation that
  looking at a link in an e-mail clobbers whichever webpage you were
  previously perusing.


Level 3:  Setting Hidden Preferences.

Go the special URL about:config to tweak prefs that don't have a gui.

* No looping animations -- in the filter box type "ani", and the
  preference image.animation_mode should spring into view.  Double-click
  on its current value (probably "normal") and change it to "once".
  Animated gifs will not be allowed to repeat, so you won't have to put
  up with distracting movement on webpages, but each animation will run
  through once, so you do have a chance to see any animations that you
  want.


Level 4:   Extensions

The main sites listing extensions are:

  http://extensionroom.mozdev.org/
  http://www.extensionmirror.nl/
  http://update.mozilla.org/

That third one is the most 'official', but often it lags behind the
others by a few versions.  Unfortunately newly installed extensions
don't work till the browser has been restart at least once (but you can
install a bunch of them then restart it and activate them all at once).

* FlashBlock -- avoid webpages distracting you with continuously
  changing 'Flash' animations.  Initially all 'Flash' content will be
  replaced by a grey box with an "F" in it, which you can click on to
  play the animation if it's one you actually want to see.

* Session Saver -- re-open tabs when you re-start the browser.

* Undo Close Tab -- right-click on the tab bar and choose 'Undo Close
  Tab' if you closed a tab that you now want back; do it multiple times
  for even older tabs.

* Live HTTP Headers -- adds an option to the 'Tools' menu for watching
  HTTP as it goes past.  Often is more useful when configured to exclude
  URLs of images and style-sheets.

  Comes in handy for spotting URLs on the way past for setting keywords
  for forms such as Google I'm Feeling Lucky (use "%s" as the
  placeholder for the search term), where 'Add a Keyword for This
  Bookmark' doesn't work and the final URL isn't the one you want to add
  a keyword to (because the URL that the form submits to redirects
  elsewhere).

  Also useful for web developers.

* MozEx -- make 'Firefox' delegate things to external programs of your
  choice.  In particular, you can right-click in a text area and edit
  the text in an editor of your choice (when you've finished, save the
  text and exit the editor, then click in the text area and it will
  magically appear); view HTML source in an external app; have mailto:
  links use a mailer such as 'Mutt' to e-mail the specified address.

  Unfortunately MozEx as well as having a terrible name (unbelievably
  the name was picked to stand for "Mozilla Extension" -- like that
  helps describe what it does!), MozEx is quite an old extension and
  doesn't appear in the 'Extensions' window, so there isn't any way of
  getting to its gui config; you have to configure it using
  about:config.  Add each new pref by right-clicking on an existing one
  and choosing 'New' | 'String' -- here are the values I use:

    mozex.command.mailer    xterm -e mutt mailto:%A?subject=%S&cc=%C&body=%B
    mozex.command.source    /usr/bin/X11/gview %t
    mozex.command.textarea  /usr/bin/X11/gvim %t
    mozex.general.tmpdir    /home/smylers/tmp

  For details of what %t, %A, and so on are see the website:

    http://mozex.mozdev.org/arguments.html

* EditCSS -- hack on a page's styling live.  Again useful for web
  developers, but also if you're finding a page a little hard to read --
  simply press Ctrl+8 then remove its background image, change the
  colours, make the text bigger, the lines shorter, or whatever.


Level 5:  Bookmarklets

Bookmarklets are bookmarks of JavaScript code which act on the current
page, performing some task.

* Applying style -- if there are some general CSS hacks you often want
  to apply to other people's pages to make them more readable then you
  can create bookmarklets for them and deploy them easily, without
  having to use EditCSS each time.

  For example here's my 'Limit Paragraph Width' bookmarklet, which
  constrains the maximum line length of text in paragraphs (in terms of
  number of characters, so it works for all font sizes) to make them
  easier to read -- this should all be on one line:

    javascript:(function(){var newSS=document.createElement('link');
    newSS.rel='stylesheet';newSS.href='data:text/css,'+escape(
    'p { margin-right: auto; margin-left: auto; max-width: 40em; }'
    );document.getElementsByTagName(%22head%22)[0].appendChild(newSS);})();

  The actual CSS is the third line, so you use this as a template for
  apply any other styles.


Level 6:  Permanent Custom Styling

The contents of your userContent.css file are applied to all pages on
all websites.  If you have particular styling you always wish to apply,
add it to this file.  Its path will be something like this, but
"1234abcd" will be random:

  ~/.mozilla/firefox/1234abcd.default/chrome/userContent.css

If it doesn't exist then there should be an example file in that
directory which can be renamed to userContent.css.

You have to restart for changes to take affect.

* No flashing and scrolling -- in the example is the code needed for
  disabling the <blink> and <marquee> elements on all webpages.

* Selective modifying -- if there's a site that you regularly visit that
  could do with a little 'improving' you might be able to write some CSS
  which is so specific it will only apply on that site.  For example our
  intranet has OTRS, which sometimes has things flashing in red.  Since
  I can't avoid using this site, I have the following CSS to turn off
  the flashing:

    .table1 font[color="red"] blink
    {
      text-decoration: none;
    }

  Now it's possible that some other site also has blinking text in a red
  font in something that's been classed as 'table1', but not that
  likely.  ('Firefox 1.1' will improve matters by having a CSS URL
  selector available for exactly this purpose.)

  (I leave <blink> enabled in general so that if a website uses it I
  will notice, and therefore can choose to avoid giving them any
  business.)


Level 7:  Custom Chrome

"Chrome" is the browser's own interface, the bit around the webpages.
It's written in XUL, which uses CSS for its appearance -- which means
you can hack on the interface.  Use userChrome.css, in the same
directory as userContent.css.

* Non-bold tab titles -- if you can spot which is the current tab
  without its title being in bold then you can turn off the boldness;
  this means that a few more characters will fit into the tab, and the
  text will be exactly the same whether the tab is selected or not.
  Here's the CSS:

    tab[selected="true"]
    {
      font-weight: normal !important;
    }


Level 8:  Tweaking Extension's Appearances

Extensions' interfaces are also written in XUL, so if an extension
doesn't look quite right (and in general extensions are thrown together
by people much less skilled in gui design than those who worked on
'Firefox' itself) you might be able to remedy things in userChrome.css.

* SearchStatus, without its logo -- the SearchStatus extension is handy
  if you follow search engine rankings, but it rather intrusively (and
  egocentrically) puts its logo in the status bar.  Each extension is in
  a .jar file, under your <profile>/extensions/ subdirectory.
  Unfortunately they usually have a long unmemorable hex ID in the path,
  but from you profile directory this should list all your installed
  extensions:

    $ find extensions/ -name '*.jar'

  A .jar file is basically a .zip file with another name, so you can
  copy it elsewhere and open it up with the unzip command.
  searchstatus.jar when unzipped has files in the content/searchstatus/
  subdirectory.  In there .xul files define chrome appearance.  XUL is
  an XML language; I've never tried writing it, but if you peer at the
  XUL source of something while also looking at the displayed version in
  the browser it isn't very hard to make good guesses about which bits
  of XUL correspond to what.

  The Searchstatus extension has searchstatusOverlay.xul, and the
  offending icon bit seems to be defined by this element:

    <statusbarpanel class="statusbarpanel-menu-iconic"
    id="searchstatus-status" tooltip="searchstatus-tooltip">

  Note the id attribute there, then you can put a rule in userChrome.css
  to make it go away:

    #searchstatus-status
    {
      display: none;
    }

  As ever, restart and it's gone.


Level 9:  Hacking on an Extension

Sometimes beating extensions into shape involves actually hacking on
them, not just affecting them from a distance with userChrome.css.  You
can use zip -r to zip an extension back up again (if you've unzipped
several extensions, make sure you've deleted the others from the
content/ directory; you don't want to zip multiple extensions into a
single .jar file) then copy it in place.  Obviously you have to repeat
this every time you upgrade the extension, so remember to save your
changes elsewhere.

* Right-extending sidebar -- having the sidebar (used for history,
  EditCSS, and so on) encroach on the current webpage's space is often
  undesirable: it squishes the page rather.  Also, everything jiggles
  around, and you've lost the thing you were looking at.

  The Sidebar Switcher extension helps somewhat, by allowing you to put
  the sidebar at the right rather than the left.  The page still
  squishes, but at least the leftmost bits of it often stay in the same
  place.  Note that while Sidebar Switcher has _some_ of its config in
  the 'Options' bit of the 'Extensions' window, the 'left/right' setting
  is instead added to the bottom of the 'General' panel in preferences
  -- except that it doesn't tell 'Firefox' to allow for these when
  sizing the window, so you have to make the window large to see them!

  There's also the OutSidebar extension, which increases the size of the
  main browser window by the width of the sidebar whenever the sidebar
  is shown, and reduces it back again when it's hidden, thereby leaving
  the space available for the webpage the same.

  Additionally it moves the left edge of the window to the left when
  showing the sidebar, and to the right when hiding it.  So, presuming
  your sidebar is at the left, this should leave the webpage in the same
  place.  Unfortunately though it flickers quite a bit in the process.
  Even more unfortunately, if you've used Sidebar Switcher to put the
  sidebar at the right then you want the left edge of the browser window
  to remain still at all times -- just increasing/decreasing the width
  will be sufficient.

  Unzip outsidebar.jar and look at the files.  XUL actions are written
  in JavaScript.  Examine outsideBar.js and you'll find 3 lines that
  include "window.move".  If you comment out all 3 of those (I missed
  one on Monday, which is why this demo didn't work and we had to use
  the one I'd prepared earlier -- sorry) then no window-moving will
  happen.


Level 10:  Hacking on Global 'Firefox' Data

Some things just can't be set using config files; you have to hack on
the main system 'Firefox' files.  Several of these are in a text format,
so can be tweaked without having to do anything as messy as recompiling.

* Making BkSpc page up -- 'The Mozilla Suite' broke the long-standing
  Unix tradition that BkSpc does the opposite of space (whatever space
  does), which means that where Space is page down, BkSpc should be page
  up; 'Firefox' made it worse by giving some other functionality to
  BkSpc, namely going back a page.  Hitting BkSpc a few times in a row,
  wanting to scroll up a bit, and suddenly finding yourself several
  pages back can be quite disorientating.

  The Keyconfig extension adds an entry to the 'Tools' menu, which can
  be used to disable BkSpc from going back.  But it doesn't have a way
  of assigning keystrokes to page up.  This is controlled by
  platformHTMLBindings.xml, whose location will depend on where
  'Firefox' was installed, but may be something like one of these:

    /opt/firefox/res/builtin/platformHTMLBindings.xml
    /usr/lib/firefox-1.0/res/builtin/platformHTMLBindings.xml

  You'll have to be root to edit the file (which means changes will
  affect all users, and you'll have to remake them should you upgrade
  'Firefox').  Search for "Page" and you'll find the line that makes
  Shift+Space (of all things!) do page up.  Duplicate that line, then
  edit one of them into this:

    <handler event="keypress" keycode="VK_BACK" command="cmd_scrollPageUp" />

  Note that we've got rid of the modifier and we're using keycode rather
  than key (cos BkSpc isn't typeable).  Restart 'Firefox' and BkSpc
  should now page up.  And yes, you have to disable its original meaning
  with Keyconfig -- simply adding the above line on its own isn't good
  enough.

  I'll reiterate that when looking at the files in extensions and the
  system 'Firefox' directory I don't know what I'm doing: it isn't that
  I've learnt all about these files' formats and what they do and am
  simply demonstrating little bits of them; I genuinely just started
  peering at them in the hope I'd find something tweakable, guessed
  wildly at what things meant, and, mostly, got lucky.

  So have the confidence to peek around, make guesses, and try out
  hunches: you don't need to know how the system as a whole works in
  order to tweak a few little bits -- in fact, you don't even need to
  know how the bit you're tweaking works, just so long as you can put it
  back together again if your guess turns out to be wrong.

  But this is software libre, where there's no incentive for the
  designers to hide the design, so guesses often are right (and many
  things are stored in text-format files, which makes them ripe for
  tweaking, unlike with much commercial software).  Happy hacking!


I hope the above is useful.  If you're interested in this topic,
O'Reilly have a book called 'Firefox Hacks' due out next month.
Currently there isn't much information on the website, so I don't know
if it's any good or not, and when I mailed O'Reilly last week asking for
some more info so I could plug the book in my talk, they said they
didn't even have the table of contents finished yet:

  http://www.oreilly.com/catalog/firefoxhks/

Finally, somebody asked me afterwards about downloads, and not wanting
everything automatically downloaded to the same directory, but to be
able to pick the location each time, so that images, programs, text
documents, etc can each be saved in different places.  I wasn't sure at
the time, but if you choose 'Edit' | 'Preferences' | 'Downloads' there's
an 'ask me every time' option, which should do what you were asking for.

However, I notice that there's the Download Sort extension which lets
you configure different directories for different types of files (well,
different extensions, anyway), so perhaps you could use this and save
having to pick every time?

  http://downloadstatusbar.mozdev.org/downsort/

(Personally I find having to navigate directories using the gui 'Save
As' dialogue box is so cumbersome that I have 'Firefox' set to download
everything to ~/tmp/ without pausing to ask me anything, then I just
switch to a shell prompt and use the mv command to store it where I want
it.)

Smylers