WEBVTT 00:00:01.668 --> 00:00:04.905 Hey I'm Lloyd Hilaiel working with Marcio Galli in Mozilla Labs. 00:00:04.905 --> 00:00:09.710 In this short cast we put together we'll give you an overview of the Chromeless project. 00:00:09.710 --> 00:00:13.547 Chromeless is an experiment which aims to make it easy to tinker 00:00:13.547 --> 00:00:16.917 with new ideas around web user interface. 00:00:16.917 --> 00:00:19.122 It attempts to include more people in the conversation 00:00:19.122 --> 00:00:21.622 about what web browser software should look like. 00:00:21.622 --> 00:00:23.954 And how it should work. 00:00:23.954 --> 00:00:26.828 Technically Chromless is not really anything all that new. 00:00:26.828 --> 00:00:30.130 What we've done is taken XULrunner the application runtime upon 00:00:30.130 --> 00:00:31.932 which Firefox and Thunderbird are built 00:00:31.932 --> 00:00:34.735 and put a thin abstraction layer on top of it. 00:00:34.735 --> 00:00:37.804 This layer makes it possible to rapidly build a web browser 00:00:37.804 --> 00:00:42.509 using web technologies such as html, javascript and css. 00:00:42.509 --> 00:00:45.412 Now in Chromeless a single html document 00:00:45.412 --> 00:00:48.588 defines the user interface of the browser itself. 00:00:48.588 --> 00:00:50.517 To make it easier to talk about we've been calling 00:00:50.517 --> 00:00:54.152 this initial html document as the browser code. 00:00:54.152 --> 00:00:57.457 Now just as normal web content can embed other sites and iframes, 00:00:57.457 --> 00:00:59.960 this browser code can also 00:00:59.960 --> 00:01:02.696 but it has greater privileges to affect and monitor 00:01:02.696 --> 00:01:05.149 content inside that iframe. 00:01:05.149 --> 00:01:08.035 This theme of taking existing web concepts 00:01:08.035 --> 00:01:10.237 and augmenting them just a little bit 00:01:10.237 --> 00:01:13.106 is the basic idea behind Chromeless. 00:01:13.106 --> 00:01:17.611 Now, let's take a tour of some of the things you can do. 00:01:17.611 --> 00:01:20.080 What you are looking at now is a very simple 00:01:20.080 --> 00:01:21.816 but functional web browser. 00:01:21.816 --> 00:01:24.584 Here you can see basic html which renders a text 00:01:24.584 --> 00:01:27.788 box where you can type in a url and an iframe 00:01:27.788 --> 00:01:30.157 where web content will go. 00:01:30.157 --> 00:01:32.395 With Chromeless this is really all the code you need to 00:01:32.395 --> 00:01:34.328 build a browser. 00:01:34.328 --> 00:01:35.596 Let's take it a bit further. 00:01:35.596 --> 00:01:38.403 What if we wanted to let the user toggle full screen mode? 00:01:38.403 --> 00:01:40.634 Expanding to full screen is obviously something 00:01:40.634 --> 00:01:42.903 that an average web page can not do. 00:01:42.903 --> 00:01:45.247 So we have to pull in a new API. 00:01:45.247 --> 00:01:47.729 Within Chromeless the global require function 00:01:47.729 --> 00:01:50.629 is how you can access new APIs. 00:01:50.629 --> 00:01:54.014 In this case we'll require the misc library. 00:01:54.014 --> 00:01:55.931 The name misc is just a place holder 00:01:55.931 --> 00:01:58.585 but it exposes a full screen function that we can use 00:01:58.585 --> 00:02:01.221 to toggle the mode of the browser. 00:02:01.221 --> 00:02:03.638 It will invoke this function inside a button, 00:02:03.638 --> 00:02:05.336 click handler. 00:02:05.336 --> 00:02:07.896 With 4 more lines of code our browser now has 00:02:07.896 --> 00:02:10.931 a functional full screen mode. 00:02:10.931 --> 00:02:12.966 So next let's try something a bit more playful 00:02:12.966 --> 00:02:14.601 combining a couple new ideas. 00:02:14.601 --> 00:02:16.960 First as we mentioned before, browser code 00:02:16.960 --> 00:02:21.241 has increased priviledges to monitor web content running in iframes. 00:02:21.241 --> 00:02:24.878 An example of this is the experimental dom load event 00:02:24.878 --> 00:02:28.682 which is fired when new content is loaded in an iframe. 00:02:28.682 --> 00:02:31.418 The other tool we'll use is the dom shot library 00:02:31.418 --> 00:02:34.788 which can get a graphical snapshot of the specific dom node. 00:02:34.788 --> 00:02:37.391 The return value of the function is a data url which 00:02:37.391 --> 00:02:40.227 contains embedded png image data. 00:02:40.227 --> 00:02:42.629 Now Marcio combined these two features and a little bit of 00:02:42.629 --> 00:02:44.624 jquery to build this demonstration browser. 00:02:44.624 --> 00:02:48.072 It lets you view thumbnails of open tabs, 00:02:48.072 --> 00:02:50.938 with a fish eye effect. 00:02:50.938 --> 00:02:53.707 Hopefully that gives you a pretty good understanding of 00:02:53.707 --> 00:02:55.308 what Chromeless is all about. 00:02:55.308 --> 00:02:56.844 To learn more we recommend that you go 00:02:56.844 --> 00:03:00.080 pull the code from github and start with the included tutorial. 00:03:00.080 --> 00:03:03.150 While some of the APIs that I've shown you here might have changed, 00:03:03.150 --> 00:03:06.954 the basic ideas behind Chromeless surely haven't. 00:03:06.954 --> 00:03:08.989 If you have thoughts about Chromeless, or would like 00:03:08.989 --> 00:03:11.792 to contribute, you can join the fray in the usual places, 00:03:11.792 --> 00:03:13.933 on IRC and our mailing list. 00:03:13.933 --> 99:59:59.999 Thanks for watching.