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.