Hicks

You’re reading all articles on The Hickensian tagged 'firefox'

Firefox becomes a contender

Up until a few months ago, Firefox was never on my list of browsers that I flirted with. It was never opened, not even for the hallowed web developer toolbar that so many swear by.

But then a few things changed. I discovered the Tails extension (for revealing Microformats) and the Firebug extension (sooo good). Combining this with Neil Lee’s G4 optimised build (with cocoa style widgets), Tab Sidebar and one of Aronnax’s pro themes I had something that looked and acted pretty much like my ideal browser. The sheer flexibility of Firefox was starting to outweigh the lack of Mac feel and behaviour.

Now, we all know that Firefox’s greatest asset is it’s extensions, but a benefit of this has only just got through to me. It allows for developers to add support for fledgling web 2.0 services (such as CoComment and the aforementioned Tails) without relying on the browser vendor to implement integration (if indeed it ever came). This flexibility is mind-blowing.

Now take a look at the new features being implemented in the Firefox 2.0 developer previews (Known as ‘Bon Echo’). SVG Text, Microsummaries, Inline Spell Checking (although I guess not using the OS X dictionary) and search suggestions. Most exciting of all, is the move to the Cairo graphics library, which on OS X, will allow Firefox (and Camino) to use the new shiny Quartz renderer, rather than the old Quickdraw, which should make a real difference to looks. I’m looking forward to this!

My hope is that the Firefox Mac theme sees an update too. Less stripes, more recent style preferences tabs and generally more Tiger styling. Aronnax has put together a proposal theme for the Bon Echo builds, but I strongly suggest setting up a new profile or user account for trying out Bon Echo. It’s not called a developer preview for nothing.

Sure, there are still plenty of annoyances, and its not seeing as much action as current faves Omniweb 5.5 and Camino, but it’s now a contender, which it’s never been before. So the browser indecision continues, only much worse, and I feel more than ever that I really should try and get out more.

A new home for Aronnax

Whenever anyone has asked me if I was going to a Firefox theme, I tell them there’s no point. There’s a chap called Aronnax, who has created some beautiful themes that make Firefox feel a whole lot more like a Mac product.

Recently, his site at spymac has been down a lot, so I offered him the Take back the web.org site as something more reliable. I felt it was so important that his themes are as available as possible, as they really make Firefox liveable on a Mac. He’s redesigned too, take a look.

The old Firefox wallpaper is still available.

Safari tabs for Firefox updated

When I last explained how to hack Firefox to get Safari style tabs, there was a missing element – close buttons on each tab. There is an extension to do this called Tab X, but it only seems to work on the Mac when using certain themes, not including the default mac theme. Fortunately, a nice fella called Chad has now created a mac version, which you can install directly from here, and it works a treat.

Safari style tabs for Firefox - with close buttons

There are just a few fixes that need to applied after this. I couldn’t get the preference to hide the tab-bar close button to work. No problem, this just gets added to the userChrome.css file:

/* Tab X mods */
/* ———————————————————————————- */

.tabs-closebutton-box { /* hides the tab bar close button */ display: none !important; }

Also, when used with the Safari tab styling, the position of the close button is a little too high, but this sorts it out:

.tabs-closebutton {
	padding-bottom: 0 !important;
 	}

Finally, a separate problem I’d come across was with site favicons. Sometimes I’d get a favicon 16px high but 32px wide – presumably when the 32×32px resource was included in the favicon. This sorts that out:

.tab-icon {
	padding-top: 0px !important;
	width: 16px;
	height: 16px;
	}

If you want a true Safari tab-look with no favicons, use this instead:

.tab-icon {
    display: none !important;
	}

I’ve updated the original download package with these small changes, so let me know if you have any problems.

SXSW: Afterthoughts

  1. I’m seeing a lot of photos of me on Flickr, and I’m not liking what I’m seeing at all. Time to lose weight, gain hair, maybe shave off the Veen beard, change clothes or something.
  2. I must do something to eclipse the Firefox logo. Its nice to be known for it, and I’m very grateful for the profile, but it would also be good to be known for other things too! Its been a rod for my own back, and clients now expect that style in all my logos. There are those who are obvious (“I want the same thing, but with a dolphin/monkey/insert name of alternative animal here”), and those that are more subtle, and I realise later that all my talk of “keep it simple” is falling on deaf ears. Don’t get me wrong, I think it works, despite its complexity, but its not my usual style. Firefox is not what I would give clients as a good example of a logo, whereas I think The Escape Committee is.
  3. Now that SXSW is over, its very sad.

Josh has come to save our Aas.

I posted this as a browser news sidenote earlier today, but I think it’s worth mentioning this significant event here too. Until now, all the paid workers at the Mozilla Foundations were those on Mozilla/Firefox. The Camino project – embedding the gecko rendering in a native cocoa browser was undertaken entirely by volunteers, mainly Mike Pinkerton. They didn’t just work on Camino though, as I understand it, Mike also helped produce the Mac builds of Mozilla. (As an aside, read this fascinating interview at Ars Technica).

Josh Aas is a fairly recent addition to the the Camino development team, and he’s helped bring new life to the project. Now, in a move that shows solid commitment from Mozilla to the Mac platform, they’ve hired Josh. This is great news, and makes me very hopeful for the Mac future of Firefox and Camino. All the best with your new role Josh!

Update : Josh has clarified his new role further. It seems that his role will cover Firefox, Thunderbird and Camino, and code that is shared amongst these 3. This is just fantastic news, and I can’t wait to see what happens.

Spot the difference

When I mentioned that ABC News used the ‘older version of the logo’, there were a few people wondering just what was so old about it.

After the initial rush to get the Firefox logo out for v8, it was soon enlarged for use in the situations such as the windows installer graphics, and its many flaws were enlarged too. I recreated the logo in Illustrator, this time paying much more attention to detail. This was going to be a version that would hold up to being printed large (like this!).

So here, side by side, are the old and revised logos. The differences should hopefully be a little more obvious:

Firefox logo, old and new

People tend to notice the glossier globe, and the furrier top of the head, but in particular, more attention was paid to the face.

So there you go!

Alternative Sage Toolbar Icon

My previous modifications to the Firefox Toolbar have one problem. Certain extensions’ toolbar icons become borked. This is due to forcing a css priority, unintentionally overriding css rules for these icons.

The fix is simple, the following rules just need to be re-applied in userChrome.css, after the rules for the main toolbar:

 #sage-button {
  list-style-image: url("chrome://sage/skin/sage.png") !important;
}
toolbar[iconsize="small"] #sage-button {
  list-style-image: url("chrome://sage/skin/sage-small.png") !important;
}

So, while I was at it, I created a new toolbar icon for Sage, based on the new RSS Live Bookmarks icon:

Screenshot of the Sage Icon

I’ve revised the Sage mod kit to include the new icon, which you can download here and add this to your userChrome.css instead:

#sage-button {
  list-style-image: url("sage.png") !important;
}
toolbar[iconsize="small"] #sage-button {
  list-style-image: url("sage-small.png") !important;
}

Firefox of the Day

This afternoon, Firefox got the honour of being Radio 2’s Website of the Day on the Steve Wright show. For those outside the UK, blissfully unaware of these British institutions, Radio 2 tends to be the MOR music station, and Mr Wright’s show probably attracts the 35yr old plus market the most. I won’t go into how I came to be listening to it, but the level of the piece can be summed up in these wee quotes:

“So Miles, what is a ‘web browser?’”

“So, now there’s more than one ‘web browser’?”

“Firefox? Isn’t that the thing that protects your computer?”
“No, thats the Firewall, Steve”

OK, we’ll ‘know’ that’s what we’re up against, but it always surprises me to hear that level of unawareness.

Still, sites featured on Website of the Day do tend to get a lot of traffic, and it does reach a wide non-geek audience, so we can but hope…

Optimized Firefox for G5's

Last week, I linked to a guy who was producing optimized builds of Firefox specifically for Powerbook G4’s. These unofficial builds were noticeably faster, almost blinding. Now, Neil Lee has gone and cooked up a build just for G5’s too.

Grab the build from here, which also includes Kevin Gerich’s pretty widgets as standard!

Unfortunately, this coincides with my G5 being taken in to Oxford Macintosh Solutions (my local lifesavers) to have its graphics card poked and prodded, so I haven’t been able to try it out myself yet. I’m hoping a free advert might help with the bill…

Safari style tabs for Firefox OS X

As a CSS designer, I’m really enjoying the ‘customisablity’ of Firefox with a language that I understand. I can’t program, but I can do CSS, which it uses to define the look of its interface.

Screenshot of the safari-esque tabs

Here’s another little mod for OS X* Firefox users. It emulates an aqua version of Safari’s upside down tabs. I personally love this style, and prefer the more compact size of them compared to Firefox’s default tabs (which are designed to emulate the window title bar).

All you need to is quit Firefox, download these files, and pop them into your Firefox profile’s chrome folder. (*Please note, this is designed to use the default pinstripe theme as its basis – it won’t work on windows – sorry!). If you’ve already made changes to your userChrome.css file, you’ll need to add the enclosed css rules in your file. Please let me know if you have any problems using this mod (there have been some issues for people using the Sage mods posted earlier).

Thanks to Kevin Gerich, who helped me solve the last hurdle in creating these – changing the text size. I’d never used the CSS property font: icon, before.

Sage on OS X

I’ve had a few rasied eyebrows about the fact that I illustrated the Firefox icon, and I’m ‘not using the damn thing’. I’ve tried, believe me I’ve tried to like Firefox, but it still jars against me the way its so un-native. It looks great (thanks to Kevin and Stephen), but doesn’t act or feel like an OS X app. The grey opaque menus, little behavioural quirks, lack of interaction with the services menu, non-native widgets, no spell checking. It does allow you multiple undos in textareas though, which is a plus. Maybe the Mac Aquafication release will solve some of these issues (whenever that comes out…).

However, something that’s attracted me back to using Firefox in the last few weeks has been the Sage RSS Reader extension. With a little tweaking to make it look more like an OSX’y, I now have what feels like my ideal Browser/RSS Reader combination:

Sage RSS Reader extension, OS Xified

I love the idea of combining an RSS Reader with a browser, it makes sense to me (unlike, say, bundling a browser with an email client). I’d tried other solutions, such as Feed on Feeds, but stopped using it fairly quickly. It didn’t work well as a sidebar bookmark, and would often time out on the second feed. This is where Sage comes in, an RSS Reader thats designed to be used in the sidebar.

Feeds seem display to fast enough, and the interface even gives you the option to choose your own CSS for the feeds display, via the settings options.

Adding feeds is very easy, find a site you like, and Sage’s autodiscovery will list all the available feeds in a drop-down sheet. Future versions of Sage plan to integrate with the recent Live Bookmarks feature. The other advantage is that if you use something like the FTP Bookmarks Sync extension, its easy to keep your list of feeds synchronised across machines, as all your feed URLs are stored in your bookmarks.

One small suggestion I have is to remove the icon for ‘no updated feed’. Normally Sage would display an icon next to every feed, but removing this one will make it much clearer what is and isn’t updated, and which is returning errors. This is what I’ve done on my copy and you can see this in the screenshot above.

So far, Sage is the only thing that’s tempting me away from my favourite Omniweb 5 and NewsFire combination (which is just superb). I’m still not sure if it will replace it entirely, but at the end of the day, I just enjoy playing and fiddling.

How to install the Hicksdesign styled Sage

  1. Download the replacement Sage files
  2. Quit Firefox if it’s running
  3. Locate your Firefox profile folder: UserName >Library/Application Support/Firefox/Profiles/xxxxxxx/chrome/ folder.
  4. Copy and paste the contents of ‘Add to userChrome.css’ to the userChrome.css file. If you’re using my mods for the toolbar icons, you must paste the sage css code somewhere after that.
  5. Copy the ‘sage’ folder to the chrome directory.
  6. Restart Firefox. This will have applied all the mods, apart from the display of articles. Under Sage’s ‘Options’, choose ‘settings’, and then where it says ‘Custom Style Sheet’, click browse, and select the sage.css file in your profile folder. UserName >Library/Application Support/Firefox/Profiles/xxxxxxx/chrome/sage/sage.css

You’re done!

Go Firefox, Go!

As already reported by Asa, after only 2 days the estimated download of Firefox 1.0 preview release is at half a million! The aim is to get 1 million downloads in 10 days, so things are looking good! Whether this will now tail off – who can say? Keep an eye on SpreadFirefox.com which has a live totaliser to keep you updated.

Also, a peek at the latest Browser Statistics from W3C schools is showing Mozilla more than doubling its share since January! OK, a site like that is more likely to attract the kind of people who would use Firefox, but it still shows growth in one audience. 17.7%! Incredible!

I firmly believe that our only hope of making life better for us as designers, is to promote Firefox. I would like to promote Safari and Omniweb, but I have to face it, Mac only browsers aren’t going to be denting anyone’s market share.

We may never get more than 30%, but that would be enough to make clients take notice, and care how their sites look in a decent browser, as well as the ubiquitous IE. There will always be the people who don’t even know that there is a thing called a ‘browser’, let alone that there are alternatives, but that’s OK. Headway is being made at rate that I wouldn’t have thought possible a few months ago.

Update 18.9.04: They did it – in only 4 days! The goal is now 2 million!

Further reading: The Fight Has Just Begun

Native (looking) Firefox OS X widgets

(File under ‘obsessive browser theming’)

Following on from the previous post, I’ve made some improvements to the form widgets CSS for OS X. Phillipe pointed out to me how to add background images to tags by setting the border to solid 0px white, and the background colour to transparent. So, buttons, textfields and textareas can now look like this in Firefox:

New form widgets in Firefox

If you’d like to have a go at implementing this, you can download all the images and css here. All you have to do is put the files into your Firefox profile directory:
(users> you> Library> Application Support> Firefox> Profiles> yourprofilenumber> chrome>).

Pros:

  • The button includes an active state that shows the dark graphite colour when the button is clicked. I’ve also removed the dotted inner ring around the button text when its selected.
  • I’ve also used original OS X resource files to make the button images. This means they have alpha transparency and will ‘sit’ on any coloured background.

Cons:

  • To acheive the button look, I’ve taken an approximate ‘average’ size button. This won’t scale when the text size is increased, or the text is too large for the button. You’ve got about 100 pixels and thats it. Its enough for phrases like “Google Search” but not quite enough for “I’m feeling lucky”.
  • Also, if a webpage has already got some styling associated with widgets, then things get a bit messy.

So its a step closer, and it does make a difference to using Firefox. Any PC reader (and maybe many mac users) probably don’t get why this is so important. Select menus, radio buttons and checkboxes are harder to alter though, so there’s a task for someone with more time than me!

Tweaking Firefox with CSS

I’ve only recently discovered the power of Mozilla’s ‘user content’ files that reside in the profile directory. I’d created a user.js file to add preferences for things like pipelining, but I’d never looked into the others – ‘userChrome.css’ (for tweaking the interface), and ‘userContent.css’ (for tweaking the web page display).

Here are the tweaks and customisation that I’ve done to my copy of Firefox to give you an idea. First of all, make life easy for yourself and install Chris Neale’s ChromEdit extension. This allows you to edit the user files from within Firefox. Once you’ve restarted, ‘Edit User Files’ will appear under the Tools menu.

userChrome.css

Firefox is a an XUL application which means that the display of the interface is controlled by the same CSS we all know and love. The only real hard part is finding the name for each element – something that DOM Inspector tool is good at revealing.

Copy and paste this first example into userChrome.css, and the changes will take effect when Firefox is restarted.

download {
 border-bottom: 0px !important;
}

This removes the dashed line beneath each item in the Download Manager. By giving the rule priority – !important; – we can make sure that this overrides rules in the default theme. This one prevents the ‘throbber’ (spinny thing on the OS X toolbar) from displaying, something thats hard to get rid of:

#throbber-box {
    display: none !important;
 }

This also makes it easy to make small interface tweaks without having to create a special theme. In order to know what rules to overide, you might find it easier to find the classic.jar file inside Firefox>Contents>MacOS>Chrome and unzip it. This is where all the pinstripe theme CSS is kept.

Here, I’ve changed the appearance of the tabs slightly with new images to make the corners less rounded.

New Tabs

tab[selected="true"] > .tab-image-right {
    background: url(activetab-right.png) no-repeat !important;
}
tab[selected="true"] > .tab-image-left {
    background: url(activetab-left.png) no-repeat !important;
}
tab[selected="true"] > .tab-image-middle {
    background: url(activetab-middle.png) repeat-x !important;
}

Place the images into your Firefox profile directory:
(users> you> Library> Application Support> Firefox> Profiles> yourprofilenumber> chrome>).

userContent.css

With this file, we’re going to try and improve Firefox OS X’s form widgets. If you’re unfamiliar with the term ‘widgets’, it refers to the various form elements – input, textarea, select etc. These aren’t native in the OS X version, and they may never be, but here are some rules that you can drop into the userContent.css file to improve the form buttons a little:

input[type="button"],
input[type="submit"] {
    font-size: 12px !important;
    font-family: 'Lucida Grande' !important;
    background: #eee !important;
    -moz-border-radius: 18px !important;
    padding: 1px 6px !important;
    border: 1px solid #ccc !important;
    border-bottom: 2px solid #999 !important;
}

Here’s the result:

Input butttons

Unfortunately, the aliasing on a Mac is a bit ropey, so keeping the border quite light helps to hide this a little bit. Its something that I’m sure someone can take further, but at least its an improvement on the older PC style widgets. (Anyone know of a way of applying a background image to an <input>?!).

I’ve also had a go at form fields, but there is less you can do with these. If you use these rules then at least they don’t have that harsh appearance:

textfields

input[type="text"],
textarea {
    font-size: 12px !important;
    padding: 1px 3px !important;
    font-family: 'Lucida Grande' !important;
    border: 1px solid #999 !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 2px solid #c3c3c3 !important;
    border-right: 2px solid #c3c3c3 !important;
    border-top: 2px solid #989898 !important;
}

Firefox desktops updated

I’ve now moved the Firefox desktops to a new site takebacktheweb.org. This is by far the most requested download on the site, so moving them will help my bandwidth.

The desktops have also been updated with the latest, more polished version of Firefox logo, and the official strapline ‘take back the web’.

branding firefox

screenshot of the new about window

Shortly before Christmas, I had an email from a chap called Steven Garrity, who works for Silverorange, and runs a blog called ‘Acts of Volition’, in which he publishes a radio show on regular basis. (really worth a listen BTW). He asked if I would like to join a recently created Mozilla branding team, with the immediate aim of producing a new logo identity for the Firebird browser, soon to be renamed firefox (Ben Goodger has written up the reasons and process for the name change). The branding team came into being after Steven wrote an article recommending changes to Mozilla’s existing branding. I jumped at the chance, and today Firefox 0.8 is finally released, and the work is no longer confidential.

Over Christmas (thanks Steven!) ideas and concepts were put forward. The timescales were tight (the design would chosen 2nd January), and the concept difficult to illustrate. A firefox is actually a cute red panda, but it didn’t really conjure up the right imagery. The only concept I had done that I felt happy with was this, inspired by seeing a Japanese brush painting of a fox:

first idea for the firefox logo

The final chosen design was a concept from Daniel Burka and sketched by Stephen Desroches, which I then rendered using Fireworks MX. I’ve been using Fireworks over Illustrator or Photoshop for icon design as I love the way I can work in vectors and see the result in pixels, rather than smooth vectors. The updated gradient tools in MX make this possible too.

the original concept sketch and the final logo

As with all icons, the smaller the resolution, the harder it is to create a legible icon. OS X icons start at 128×128 pixels, Windows XP uses 48×48 whereas 95-2000 only has a maximum size of 32×32. Starting with the 128×128 version in all its detail, I scaled this down to the various sizes, and began removing excess and simplifying the shapes.

The different pixel resolutions of the firefox icon

As you can see, once you get down to 16×16, which is used in areas like the windows taskbar and OS X list views, its nearly impossible. I still have some work to do on this and other Mozilla branding, so the project continues.


0.8 is also the first milestone release to have the gorgeous new OS X aqua theme. If you’ve not seen this yet, Kevin Gerich has posted screenshots of all the different screens so that you have proof of all its lickability. Better still, download the 0.8 release and try it out.


Update: Forgot to mention that there is a page of promo graphics on the Mozilla Site – get linking! You can also read more about the project from Steven Garrity

Edit CSS in Firefox

Quick tip if you haven’t come across this before. There is an excellent web development extension available for Firefox called Edit CSS. Quite simply, it allows you to view all style sheets for the current page in the sidebar, make edits and see the result as you type. The amount of time this saves is amazing.

A problem with many firefox extensions is that they break in current and mac builds, and this is the case here. The useful option to save the css once edited doesn’t work. Even with this bug, its a worthwhile download.

Update 11.02.04: All thats needed to make Edit CSS work fully, is the jslib extension. Now I can save edited styles, or load new ones. Thanks to John for pointing this out.

Perfect for deciding on that new colour scheme… ;o)

A screenshot of the edit css sidebar in action

New Browsers

After excitedly downloading the Omniweb 5 Beta yesterday, I was all prepared to give a critique, but as usual, John Gruber says it best.

Suffice to say that OW 5 shows a lot of promise, but the beta crashes and hangs too much too often to use it for any length of time. The thumbnail tabs are wonderful and I’m no longer a sceptic. The toolbar icons are not to my taste though. I feel a browser theme coming on…

There’s more activity on the browser front – Safari 1.2 has just been released, and is even zippier, as well as adding few more features. Safari Enhancer and PithHelmet have both been updated to work with 1.2. There are bug fixes too: The aggressive caching issue is fixed, so I no longer have to use Firebird to view Dunstans Blog. Dan Cederholm reports that the hover bug is fixed too. This was causing my site logo to stick on ‘home’, so I’m glad to see the back of that. The one downside is that you now have to use Panther to get the updates – Jaguar users have to stick with 1.0.

Also, Firebird 0.8 is due out next Monday. In the nightly builds annoying OS X bugs such as no new browser window when clicking the dock icon, have been fixed, and its looking good.

Firebird for OS X

Mozilla Firebird for Mac OS X now has a sweet new default theme created by Kevin Gerich and Stephen Hollander. Until now, Firebird has always looked too ‘PC’ , but many find it the fastest browser on the OS X. This new default theme is beautiful, and well thought out. It makes all the difference and it now looks more OS X than Camino. Firebird removes all the ‘extras’ found in Mozilla, such as email and chat, but keeps the Javascript console, which I find immensely useful for web development.

If you’ve not tried Firebird before, or you’ve been put off by the interface, go and try the latest nightly build.