0:00:01.668,0:00:04.905
Hey I'm Lloyd Hilaiel working with Marcio Galli in Mozilla Labs.

0:00:04.905,0:00:09.710
In this short cast we put together we'll give you an overview of the Chromeless project.

0:00:09.710,0:00:13.547
Chromeless is an experiment which aims to make it easy to tinker

0:00:13.547,0:00:16.917
with new ideas around web user interface.

0:00:16.917,0:00:19.122
It attempts to include more people in the conversation

0:00:19.122,0:00:21.622
about what web browser software should look like.

0:00:21.622,0:00:23.954
And how it should work.

0:00:23.954,0:00:26.828
Technically Chromless is not really anything all that new.

0:00:26.828,0:00:30.130
What we've done is taken XULrunner the application runtime upon

0:00:30.130,0:00:31.932
which Firefox and Thunderbird are built

0:00:31.932,0:00:34.735
and put a thin abstraction layer on top of it.

0:00:34.735,0:00:37.804
This layer makes it possible to rapidly build a web browser

0:00:37.804,0:00:42.509
using web technologies such as html, javascript and css.

0:00:42.509,0:00:45.412
Now in Chromeless a single html document

0:00:45.412,0:00:48.588
defines the user interface of the browser itself.

0:00:48.588,0:00:50.517
To make it easier to talk about we've been calling

0:00:50.517,0:00:54.152
this initial html document as the browser code.

0:00:54.152,0:00:57.457
Now just as normal web content can embed other sites and iframes,

0:00:57.457,0:00:59.960
this browser code can also

0:00:59.960,0:01:02.696
but it has greater privileges to affect and monitor

0:01:02.696,0:01:05.149
content inside that iframe.

0:01:05.149,0:01:08.035
This theme of taking existing web concepts

0:01:08.035,0:01:10.237
and augmenting them just a little bit

0:01:10.237,0:01:13.106
is the basic idea behind Chromeless.

0:01:13.106,0:01:17.611
Now, let's take a tour of some of the things you can do.

0:01:17.611,0:01:20.080
What you are looking at now is a very simple

0:01:20.080,0:01:21.816
but functional web browser.

0:01:21.816,0:01:24.584
Here you can see basic html which renders a text

0:01:24.584,0:01:27.788
box where you can type in a url and an iframe

0:01:27.788,0:01:30.157
where web content will go.

0:01:30.157,0:01:32.395
With Chromeless this is really all the code you need to

0:01:32.395,0:01:34.328
build a browser.

0:01:34.328,0:01:35.596
Let's take it a bit further.

0:01:35.596,0:01:38.403
What if we wanted to let the user toggle full screen mode?

0:01:38.403,0:01:40.634
Expanding to full screen is obviously something

0:01:40.634,0:01:42.903
that an average web page can not do.

0:01:42.903,0:01:45.247
So we have to pull in a new API.

0:01:45.247,0:01:47.729
Within Chromeless the global require function

0:01:47.729,0:01:50.629
is how you can access new APIs.

0:01:50.629,0:01:54.014
In this case we'll require the misc library.

0:01:54.014,0:01:55.931
The name misc is just a place holder

0:01:55.931,0:01:58.585
but it exposes a full screen function that we can use

0:01:58.585,0:02:01.221
to toggle the mode of the browser.

0:02:01.221,0:02:03.638
It will invoke this function inside a button,

0:02:03.638,0:02:05.336
click handler.

0:02:05.336,0:02:07.896
With 4 more lines of code our browser now has

0:02:07.896,0:02:10.931
a functional full screen mode.

0:02:10.931,0:02:12.966
So next let's try something a bit more playful

0:02:12.966,0:02:14.601
combining a couple new ideas.

0:02:14.601,0:02:16.960
First as we mentioned before, browser code

0:02:16.960,0:02:21.241
has increased priviledges to monitor web content running in iframes.

0:02:21.241,0:02:24.878
An example of this is the experimental dom load event

0:02:24.878,0:02:28.682
which is fired when new content is loaded in an iframe.

0:02:28.682,0:02:31.418
The other tool we'll use is the dom shot library

0:02:31.418,0:02:34.788
which can get a graphical snapshot of the specific dom node.

0:02:34.788,0:02:37.391
The return value of the function is a data url which

0:02:37.391,0:02:40.227
contains embedded png image data.

0:02:40.227,0:02:42.629
Now Marcio combined these two features and a little bit of

0:02:42.629,0:02:44.624
jquery to build this demonstration browser.

0:02:44.624,0:02:48.072
It lets you view thumbnails of open tabs,

0:02:48.072,0:02:50.938
with a fish eye effect.

0:02:50.938,0:02:53.707
Hopefully that gives you a pretty good understanding of

0:02:53.707,0:02:55.308
what Chromeless is all about.

0:02:55.308,0:02:56.844
To learn more we recommend that you go

0:02:56.844,0:03:00.080
pull the code from github and start with the included tutorial.

0:03:00.080,0:03:03.150
While some of the APIs that I've shown you here might have changed,

0:03:03.150,0:03:06.954
the basic ideas behind Chromeless surely haven't.

0:03:06.954,0:03:08.989
If you have thoughts about Chromeless, or would like

0:03:08.989,0:03:11.792
to contribute, you can join the fray in the usual places,

0:03:11.792,0:03:13.933
on IRC and our mailing list.

0:03:13.933,9:59:59.000
Thanks for watching.