Introducing Chromeless

Hey I'm Lloyd Hilaiel working with Marcio Galli in Mozilla Labs.

In this short cast we put together we'll give you an overview of the Chromeless project.

Chromeless is an experiment which aims to make it easy to tinker

with new ideas around web user interface.

It attempts to include more people in the conversation

about what web browser software should look like.

And how it should work.

Technically Chromless is not really anything all that new.

What we've done is taken XULrunner the application runtime upon

which Firefox and Thunderbird are built

and put a thin abstraction layer on top of it.

This layer makes it possible to rapidly build a web browser

using web technologies such as html, javascript and css.

Now in Chromeless a single html document

defines the user interface of the browser itself.

To make it easier to talk about we've been calling

this initial html document as the browser code.

Now just as normal web content can embed other sites and iframes,

this browser code can also

but it has greater privileges to affect and monitor

content inside that iframe.

This theme of taking existing web concepts

and augmenting them just a little bit

is the basic idea behind Chromeless.

Now, let's take a tour of some of the things you can do.

What you are looking at now is a very simple

but functional web browser.

Here you can see basic html which renders a text

box where you can type in a url and an iframe

where web content will go.

With Chromeless this is really all the code you need to

build a browser.

Let's take it a bit further.

What if we wanted to let the user toggle full screen mode?

Expanding to full screen is obviously something

that an average web page can not do.

So we have to pull in a new API.

Within Chromeless the global require function

is how you can access new APIs.

In this case we'll require the misc library.

The name misc is just a place holder

but it exposes a full screen function that we can use

to toggle the mode of the browser.

It will invoke this function inside a button,

click handler.

With 4 more lines of code our browser now has

a functional full screen mode.

So next let's try something a bit more playful

combining a couple new ideas.

First as we mentioned before, browser code

has increased priviledges to monitor web content running in iframes.

An example of this is the experimental dom load event

which is fired when new content is loaded in an iframe.

The other tool we'll use is the dom shot library

which can get a graphical snapshot of the specific dom node.

The return value of the function is a data url which

contains embedded png image data.

Now Marcio combined these two features and a little bit of

jquery to build this demonstration browser.

It lets you view thumbnails of open tabs,

with a fish eye effect.

Hopefully that gives you a pretty good understanding of

what Chromeless is all about.

To learn more we recommend that you go

pull the code from github and start with the included tutorial.

While some of the APIs that I've shown you here might have changed,

the basic ideas behind Chromeless surely haven't.

If you have thoughts about Chromeless, or would like

to contribute, you can join the fray in the usual places,

on IRC and our mailing list.

Thanks for watching.