Tuesday, July 8th, 2008
Category: Firefox
, Showcase
José Jeria pointed us to a great looking XUL application that allows you to sketch GUI’s and then export them to PNG:
With the power of the underlying Mozilla Gecko engine, Pencil turns your excellent Firefox 3 browser into a sketching tool with just a 400-kilobyte installation package.
Pencil will always be free and can run on virtually all platforms that Firefox 3 supports.
Always good to see people using the power of XUL that still has features that I hope to see HTML get.
Wednesday, July 2nd, 2008
Category: Firefox, JavaScript
Friday, June 13th, 2008
Category: Browsers, Firefox, Mobile
It has been a busy week for Mozilla. We have seen news across the board of their technology.
First we have the news that Firefox 3 should be available to download on June 17th. They are having a download party to kick things off.
Stuart Parmenter had a proxy post that delves into the world of fonts and text:
When Mozilla developers decided to incorporate the Cairo subsystem and build a new graphics layer from scratch, they also decided to completely rework the system that renders text in the browser.
Text is an incredibly important part of the Web. While graphics, audio, and video are increasingly common, we still spend the majority of our time on the Web just reading stuff. All the words you read in a web browser are rendered using a font which contains a set of glyphs used to form individual letters. For more simple written languages there may be a straightforward one-to-one mapping of characters to glyphs, but for more complex languages, one glyph may represent multiple characters.
Ben is a huge fan (a.k.a. anal) of this type of thing. Fonts and rendering can make a big difference, and the post goes into detail on what is going on in the new Firefox 3 engine. It discusses kerning, ligatures, hinting, font smoothing, anti-aliasing, and more. After reading this post you may want to watch Helvetica the movie!
Then we go to the mobile side, where Aza Raskin has posted concept video on the new touch screen interface that they will be building for Fennec. There is a ton of detail in Aza’s writeup including design principles:
Touch. This concept prototype for Firefox mobile (code name Fennec) is being designed for a touch screen. Why not multitouch? Because Firefox should be able to run on the least common denominator of touch devices. Especially for touch-enabled interfaces direct manipulation is key. Along that line of thought, the interface should be operable with a finger. Switching between input methods is time-consuming and annoying, so the user shouldn’t have to switch to a stylus or other secondary form of input. Firefox will work on non-touchscreen devices, but that’s out of scope for this demo.
Large targets are good. The same fingertip that controls the interface takes up between 1/5th to 1/10th of the vertical/horizontal height/width of the mobile touch-screen. In other words, fingers are fat: hitting small targets is like trying to touch-type with your elbow. All actions should be represented by targets that are large enough to be fast, easy, and (at the very least) not aggravating to hit.
Visual Momentum and Physics are compelling. Nothing shouts “sexy!†like pretty animations and a physics engine. Beyond marketing appeal, there is a strong argument that such physicality helps the user build a mental model of the interface, and that interface physics yields consistency. We are wired to track the movement of things and to be able to remember where they’ve gone, as long as they don’t appear and disappear, which doesn’t happen in the real world. Of course, copying every physical metaphors blindly gets you interfaces like the multi-million dollar blunder that was Microsoft Bob, so we need to select our metaphors carefully.
Typing is difficult. This means we want to minimize the amount of keystrokes required to get anywhere or do anything.
Content is king. With restricted screen size, every pixel counts. As much of the screen as possible should always be dedicated to content, not controls or cruft.
Then we move to the server side with a Weave status update that should be shipping with Firefox 3. It includes new features around data types, bookmark sharing, and a Web client view. Check out the Wiki for more details.
Wednesday, June 4th, 2008
Category: Firefox, HTML, SVG
It seems so obvious once you think about it, but Rob O'Callahan from Mozilla took us by surprise in his blog post demonstrating his experimental branch of Gecko that allows you to apply SVG effects to HTML.
The code for applying the effects above follows:
XML:
-
-
<html xmlns="http://www.w3.org/1999/xhtml"
-
xmlns:svg="http://www.w3.org/2000/svg">
-
<body style="background:#ccc; font-size:30px;">
-
<style>
-
p { width:300px; border:1px solid black; display:inline-block; margin:1em; }
-
iframe { width:300px; height:300px; border:none; }
-
b { outline:1px dotted blue; }
-
</style>
-
<p class="target" style="background:lime;">
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-
ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
-
<iframe class="target" src="http://mozilla.org"/>
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
-
<b class="target">elit, sed do eiusmod tempor incididunt
-
ut labore et dolore magna aliqua.</b> Ut enim ad minim veniam.</p>
-
-
<style>.target { clip-path: url(#c1); }</style>
-
<svg :svg height="0">
-
</svg><svg :mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
-
</svg><svg :linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
-
<svg :stop stop-color="white" offset="0"/>
-
<svg :stop stop-color="white" stop-opacity="0" offset="1"/>
-
</svg>
-
<svg :circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-
<svg :rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
-
</body>
-
</html>
Rob makes a bunch of good points, such as:
CSS isn't really up to the task [of applying advanced visual effects to HTML]. One problem is that CSS isn't good at manipulating structured values like shapes and filter processing stacks; they're cumbersome to write in CSS expression syntax, or else they require new custom CSS syntax (e.g. @-rules), and there's no standard DOM to let scripts manipulate components of these structured values. Another issue is that we should try to avoid duplicating specification and implementation of complex features.
Contrast that with SVG, which long ago dealt with spec'ing out fancy-pants effects in mark-up and interfacing with JavaScript APIs. In fact, Rob ends his piece with a little snubby-snubby to Flash and Silverlight based both on SVG's status as a standard and its nice integration with page markup:
A nice side effect of providing better SVG-HTML integration is that it gives SVG a leg up on the Web. You can't do these effects using Flash or Silverlight, and since they're not standards they probably won't ever be invited to this party.
Unlike WebKit's shiny new CSS stuff, you can't just yet get a build of this stuff in Gecko:
I'm making tryserver builds right now, and I'll update this post with a link when they're ready. Here's a link to my Mercurial repository.
But it looks like builds are forthcoming. Hats off to Rob for putting together such a cool proof-of-concept.
Friday, May 23rd, 2008
Category: Browsers, Firefox
Kevin Yank has zoomed into the features in the new Firefox 3 RC 1, and explained two subtle ones that can help us as Web developers:
Soft Hyphens
Tucked away in the list of CSS improvements in Firefox 3 is this innocuous-looking feature: “HTML soft hyphens () are now supported.â€
Soft hyphens are one of those obscure gems that HTML has always supported on paper, but that no one has taken any notice of because browser support has been spotty. With the imminent release of Firefox 3, however, soft hyphens will be supported by all major browsers including Internet Explorer, Safari, and Opera.
So, what is a soft hyphen, anyway?
A soft hyphen is a character of text that is usually invisible. It signals a spot in the text (usually in the middle of a long word) where it would be acceptable to break the line with a hyphen.
Here you see it at work:
Inline Blocks
Another obscure-but-useful new feature making its way into Firefox 3 after all the other major browsers support it (mostly) is the inline block. When assigned to an element, a display type of inline-block causes the element to be positioned inline (like a span), but the element’s contents are laid out as if the element were a block.
This feature will come in handy in a number of situations in which the float property is currently being used for lack of a better option.
HTML:
-
-
-
-
<div class="caption">A short caption
</div>
-
<div class="thumb"><img src="thumb1.jpg"/></div>
-
-
<div class="caption">A short caption
</div>
-
<div class="thumb"><img src="thumb2.jpg"/></div>
-
-
…
-
</li></ul>
-
The code above gives you:
See it in action.
Thursday, May 22nd, 2008
Category: Debugging, Firefox
Firebug 1.2 beta is in the wild. The latest beta of the bug your FF3RC will love features:
Enablement UI
- Disable always: when the Firebug UI is not active on any page, the debugger is disabled (minimal overhead)
- Instant on: when the Firebug UI is active, HTML, CSS, DOM views activate (minimal overhead)
- Script panel user-activation: initially disabled or enabled always
- Net panel user-activiation: initially disabled or enabled always
- Bug Icon gray unless some page has Script or Net panel activation
- No Allowed-sites/Disable for Site: no longer needed. The UI for this feature is being refined; overhead tests have not been completed. We are interested in feedback on this UI change.
Javascript Debugging
- Written/cleaned up eval support
- Performance on eval better, easier to support. This feature is complete; Bug reports on javascript debugger welcome.
Net Panel
- Net timing more accurate
- Only real network requests displayed.
- Limit for number of requests (configurable in preferences).
- Additional columns for: request method, status response + text
- Cache tab has expiration time in Net panel
Console
- Redesigned to use events/attribute passing.
tests/console/joes-original/test.html mostly passes
Command Line
- Redesigned to avoid using evalInSandbox.
tests/console/commandLineObjects.html mostly passes
commandLineAPI functions, ok.
DOM Panel
- Works for FF3pre after about 2008041406 (https://bugzilla.mozilla.org/show_bug.cgi?id=425139)
Bug away!
Simon Willison also recently pointed out the command line API that lets you "set a breakpoint at the start of a function with “debug(fn)†and log all calls to it with “monitor(fn)â€."
Monday, May 19th, 2008
Category: Firefox, JavaScript, Performance
David Mandelin has posted about Tracehydra, which is the idea that the traced based JIT engine that is being worked on as part of Tamarin could be hooked up to Spidermonkey.
Tracehydra would be the fluffy cloud that translates Spidermonkey bytecode to Tamarin IL (or possibly LIR-the details get confusing fast). (In the interest of reducing confusion slightly, I’ll say that IL stands for intermediate language, and is roughly a synonym for bytecode. TT people often refer to their IL as “Forth†because they based the design on Forth or something, but I know nothing more about Forth than that it involves stacks, so that doesn’t help me.)
Specifically, Tracehydra means using Treehydra to translate the Spidermonkey (SM hereafter) C code that interprets each bytecode into C++ that emits equivalent (to the C) Tamarin IL. So I guess it reduces the problem from translating SM bytecode TT IL to translating SM C cases to TT IL-building code. Put that way, it’s not clear this actually helps, but I think SM bytecode is believed to have complex semantics that would be difficult to code in TT IL by hand, and maybe the C in SM has fewer constructs that are easier to translate. Seems possible, anyway.
David then goes on to digg into Tamarin, which is weak on docs (according to him). He walks through the various pieces of Tamarin and explains the ABC bytecode vs. the IL etc. A very nice read, and maybe Tracehydra will be the first form that we see Tamarin in Firefox?
Friday, April 11th, 2008
Category: Browsers, Firefox, Mobile
IE may be the dominant browser on the desktop, but the mobile wars are going strong. WebKit, Opera, and Pocket IE have a lot of users, but Mozilla has been a little weak in the past.
Now though, they have a new Fennec browser that takes the great performance gains in Firefox 3, and makes a mobile oriented version.
Sullivan explained that the Fennec project aims to bring the desktop Firefox user experience to handheld devices but will focus on meeting the unique requirements of mobile computing users. "Our goal on mobile is to embody the principles that have made Firefox so successful on the desktop, but with the recognition that mobile is different—not so much in that it presents some constraints, but in that it enables new types of experiences, and people's interaction with these devices are different than when they're sitting at their desks," he says. "Web compatibility, security, performance, support for rich internet apps will all be key."
I have been curious how it can scale down, just due to the XUL overhead, but it works great.
Much of the Firefox user interface is constructed with XUL, an XML-based user interface description language. This makes Firefox very easy to customize and extend. Mozilla hopes to leverage this advantage to encourage experimentation with new mobile user interface concepts. Developers can augment or reinvent the Fennec user interface by modifying the browser.xul file in the Fennec chrome directory and the associated browser.css file. Additional functionality can be implemented in JavaScript by modifying the browser.js file. Fennec will eventually support a complete extension system like Firefox 3 that developers will be able to use for modifying the browser's behavior and user interface.
"Another exciting thing is that we're providing full support for add-ons," Sullivan notes. "These will fall into three buckets: most add-ons will just work out of the box; some won't make much sense away from a PC; and a whole new class will be created that are going to be new for mobile."
There are other aspects of the Mozilla Mobile initiative that will appeal to developers as well. Mobile software development is hard, and Mozilla could potentially offer a novel approach to simplifying the process. The underlying XUL technology on which the Firefox interface is built can be used independently with a XULRunner runtime to create platform-neutral mobile applications with XML and JavaScript.
Monday, April 7th, 2008
Category: Browsers, Firefox, Security
It seems to make sense to add crypto helpers to the browser, for use by us, the humble JavaScript developer. I have called out to this in the past and people bring it up often on various lists.
Brad Neuberg found that Gecko actually has built-in crypt primitives via window.crypto!
Mozilla defines a special JavaScript object to allow web pages access to certain cryptographic related services. These services are a balance between the functionality web pages need, and the requirement to protect users from malicious web sites. Most of these services are available via the JavaScript window object as window.crypto. For instance, to obtain a ten byte random number using the cryptographic engine, simply call:
JAVASCRIPT:
-
-
var myrandom = window.crypto.random(10);
-
Services are provided to enable: smart card events, generating certificate requests, importing user certs, generating random numbers, logging out of your tokens, and signing text.
Thursday, April 3rd, 2008
Category: Firefox, Mobile, Opera
We have a couple of browser updates. First, we have Firefox 3 beta 5 which has improved integration with the host system, a better places organizer, and a bump:
Speed improvements to our JavaScript engine as well as profile guided optimizations have resulted in continued improvements in performance. Compared to Firefox 2, web applications like Google Mail and Zoho Office run twice as fast in Firefox 3 Beta 5, and the popular SunSpider test from Apple shows improvements over previous releases.
Opera also released a new browser with their Opera Mini 4.1 beta. The improvements talk about "faster" a lot: performance, finding things faster, and URL completion magic. This latest mobile browser also supports JSR-75:
JSR-75 is a specification for Java applications such as Opera Mini to access device internal storage and functionality within the phone. Some of Opera Mini features like "Save Pages" and "Download/Upload Files" vary on how much JSR-75 that is supported by the phone.
Monday, March 31st, 2008
Category: Browsers, Firefox
Ten years ago today, the code dropped from Netscape to the Mozilla project. Mitchell Baker has written up her thoughts as she looks back the last 10 years, and tries to look at the future.
People are celebrating too. Air Mozilla will have a live show with host Asa Dotzler, and guests Mitchell Baker, Brendan Eich, Mike Shaver, and Chris Hofmann.
And then we have jwz. Now the original Internet Web Site of the Mosaic Communications Corporation, is now back online, and he has fun stories of what he had to do to get it working with the old browsers.
In order to make these web sites work in the old browsers, it was necessary to host them specially. In this modern world, a single server will typically host multiple web sites from a single IP address. This works because modern web browsers send a "Host" header saying which site they're actually looking for. Old web browsers didn't do that: if you wanted to host a dozen sites on a single server, that server had to have a dozen IP addresses, one for each site. So these sites have dedicated addresses!
The web server also had to be configured to not send a "charset" parameter on the "Content-Type" header, because the old browsers didn't know what to make of that.
Do you remember why home1.mcom.com through home32.mcom.com exist?
home1.mcom.com through home32.mcom.com exist because the early browsers did client-side load-balancing: the browser itself had a special case where if it was loading "home.mcom.com" it would actually pick a random number from 1 to 32 and instead load "homeN.mcom.com"! Those were physically different servers in the Netscape data center.
Do you remember the behavioral difference the browsers exhibited when they were talking to a Netscape web server?
When loading pages from a Netscape server, the caption next to the URL field in the browser would change from "Location" to "Netsite".
Congrats to all of the open source hackers who have made "Mozilla" successful.
Category: Debugging, Firefox
There are some bleeding edge releases in the world of the Firebug.
A new alpha version of Firebug 1.2 is available for testing. It has several performance improvements, and some new UI. Give it a go and report any issues.
Also, ChromeBug takes Firebug into the world of debugging full Firefox extensions. It depends on the alpha of Firebug 1.2 and once installed you can boot it up via:
firefox.exe -chrome chrome://chromebug/content/chromebug.xul -firefox
Thursday, March 13th, 2008
Category: Firefox, Performance
Stuart Parmenter has been blogging about his work on memory usage and various malloc() libraries and their tradeoffs.
In his latest, he talks about the memory usage in Firefox 3 today and the work that he has done:
- Reduced Memory fragmentation: One of the things we did to help was to minimize the number of total allocations we did, to avoid unnecessarily churning memory. We’ve managed to reduce allocations in almost all areas of our code base.
- Fixed cycles with the Cycle collector: For Gecko 1.9, we’ve implemented an automated cycle collector that can recognize cycles in the in-memory object graph and break them automatically.
- Tuned our caches: In many cases we’ve added expiration policies to our caches which give performance benefits in the most important cases, but don’t eat up memory forever. We now expire cached documents in the back/forward cache after 30 minutes since you likely won’t be going back to them anytime soon. We have timer based font caches as well as caches of computed text metrics that are very short lived.
- Adjusted how we store image data: In Firefox 3, thanks to some work by Federico Mena-Quintero (of GNOME fame), we now throw away the uncompressed data after it hasn’t been used for a short while. Another fantastic change from Alfred Kayser changed the way we store animated GIFs so that they take up a lot less memory. We now store the animated frames as 8bit data along with a palette rather than storing them as 32 bits per pixel.
What about the tests?
For the results below we loaded 29 different web pages through 30 windows over 11 cycles (319 total page loads), always opening a new window for each page load (closing the oldest window alive once we hit 30 windows). At the end we close all the windows but one and let the browser sit for a few minutes so see if they will reclaim memory, clear short-term caches, etc. There is a 3 second delay between page loads to try and get all the browsers to take the same amount of time.
Great work guys, and thanks for talking to us about how you are doing this work!
Tuesday, March 11th, 2008
Category: Browsers, Firefox
Mozilla has released Firefox 3 beta 4 which includes new standards support and performance:
- Improved platform features such as: support for HTML5’s window.postMessage and window.messageEvent, JavaScript 1.8 improvements, and offline data storage for web applications.
- Performance improvements: changes to our JavaScript engine as well as profile guided optimization resulted in significant gains over previous releases in the popular SunSpider test from Apple, web applications like Google Mail and Zoho Office run much faster, and continued improvements to memory usage drastically reduce the amount of memory consumed over long web browsing sessions.
There is news on the Firefox 3b5 schedule. The final version has to not be TOO far in the future.
