1 00:00:01,668 --> 00:00:04,905 Hey I'm Lloyd Hilaiel working with Marcio Galli in Mozilla Labs. 2 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. 3 00:00:09,710 --> 00:00:13,547 Chromeless is an experiment which aims to make it easy to tinker 4 00:00:13,547 --> 00:00:16,917 with new ideas around web user interface. 5 00:00:16,917 --> 00:00:19,122 It attempts to include more people in the conversation 6 00:00:19,122 --> 00:00:21,622 about what web browser software should look like. 7 00:00:21,622 --> 00:00:23,954 And how it should work. 8 00:00:23,954 --> 00:00:26,828 Technically Chromless is not really anything all that new. 9 00:00:26,828 --> 00:00:30,130 What we've done is taken XULrunner the application runtime upon 10 00:00:30,130 --> 00:00:31,932 which Firefox and Thunderbird are built 11 00:00:31,932 --> 00:00:34,735 and put a thin abstraction layer on top of it. 12 00:00:34,735 --> 00:00:37,804 This layer makes it possible to rapidly build a web browser 13 00:00:37,804 --> 00:00:42,509 using web technologies such as html, javascript and css. 14 00:00:42,509 --> 00:00:45,412 Now in Chromeless a single html document 15 00:00:45,412 --> 00:00:48,588 defines the user interface of the browser itself. 16 00:00:48,588 --> 00:00:50,517 To make it easier to talk about we've been calling 17 00:00:50,517 --> 00:00:54,152 this initial html document as the browser code. 18 00:00:54,152 --> 00:00:57,457 Now just as normal web content can embed other sites and iframes, 19 00:00:57,457 --> 00:00:59,960 this browser code can also 20 00:00:59,960 --> 00:01:02,696 but it has greater privileges to affect and monitor 21 00:01:02,696 --> 00:01:05,149 content inside that iframe. 22 00:01:05,149 --> 00:01:08,035 This theme of taking existing web concepts 23 00:01:08,035 --> 00:01:10,237 and augmenting them just a little bit 24 00:01:10,237 --> 00:01:13,106 is the basic idea behind Chromeless. 25 00:01:13,106 --> 00:01:17,611 Now, let's take a tour of some of the things you can do. 26 00:01:17,611 --> 00:01:20,080 What you are looking at now is a very simple 27 00:01:20,080 --> 00:01:21,816 but functional web browser. 28 00:01:21,816 --> 00:01:24,584 Here you can see basic html which renders a text 29 00:01:24,584 --> 00:01:27,788 box where you can type in a url and an iframe 30 00:01:27,788 --> 00:01:30,157 where web content will go. 31 00:01:30,157 --> 00:01:32,395 With Chromeless this is really all the code you need to 32 00:01:32,395 --> 00:01:34,328 build a browser. 33 00:01:34,328 --> 00:01:35,596 Let's take it a bit further. 34 00:01:35,596 --> 00:01:38,403 What if we wanted to let the user toggle full screen mode? 35 00:01:38,403 --> 00:01:40,634 Expanding to full screen is obviously something 36 00:01:40,634 --> 00:01:42,903 that an average web page can not do. 37 00:01:42,903 --> 00:01:45,247 So we have to pull in a new API. 38 00:01:45,247 --> 00:01:47,729 Within Chromeless the global require function 39 00:01:47,729 --> 00:01:50,629 is how you can access new APIs. 40 00:01:50,629 --> 00:01:54,014 In this case we'll require the misc library. 41 00:01:54,014 --> 00:01:55,931 The name misc is just a place holder 42 00:01:55,931 --> 00:01:58,585 but it exposes a full screen function that we can use 43 00:01:58,585 --> 00:02:01,221 to toggle the mode of the browser. 44 00:02:01,221 --> 00:02:03,638 It will invoke this function inside a button, 45 00:02:03,638 --> 00:02:05,336 click handler. 46 00:02:05,336 --> 00:02:07,896 With 4 more lines of code our browser now has 47 00:02:07,896 --> 00:02:10,931 a functional full screen mode. 48 00:02:10,931 --> 00:02:12,966 So next let's try something a bit more playful 49 00:02:12,966 --> 00:02:14,601 combining a couple new ideas. 50 00:02:14,601 --> 00:02:16,960 First as we mentioned before, browser code 51 00:02:16,960 --> 00:02:21,241 has increased priviledges to monitor web content running in iframes. 52 00:02:21,241 --> 00:02:24,878 An example of this is the experimental dom load event 53 00:02:24,878 --> 00:02:28,682 which is fired when new content is loaded in an iframe. 54 00:02:28,682 --> 00:02:31,418 The other tool we'll use is the dom shot library 55 00:02:31,418 --> 00:02:34,788 which can get a graphical snapshot of the specific dom node. 56 00:02:34,788 --> 00:02:37,391 The return value of the function is a data url which 57 00:02:37,391 --> 00:02:40,227 contains embedded png image data. 58 00:02:40,227 --> 00:02:42,629 Now Marcio combined these two features and a little bit of 59 00:02:42,629 --> 00:02:44,624 jquery to build this demonstration browser. 60 00:02:44,624 --> 00:02:48,072 It lets you view thumbnails of open tabs, 61 00:02:48,072 --> 00:02:50,938 with a fish eye effect. 62 00:02:50,938 --> 00:02:53,707 Hopefully that gives you a pretty good understanding of 63 00:02:53,707 --> 00:02:55,308 what Chromeless is all about. 64 00:02:55,308 --> 00:02:56,844 To learn more we recommend that you go 65 00:02:56,844 --> 00:03:00,080 pull the code from github and start with the included tutorial. 66 00:03:00,080 --> 00:03:03,150 While some of the APIs that I've shown you here might have changed, 67 00:03:03,150 --> 00:03:06,954 the basic ideas behind Chromeless surely haven't. 68 00:03:06,954 --> 00:03:08,989 If you have thoughts about Chromeless, or would like 69 00:03:08,989 --> 00:03:11,792 to contribute, you can join the fray in the usual places, 70 00:03:11,792 --> 00:03:13,933 on IRC and our mailing list. 71 00:03:13,933 --> 99:59:59,999 Thanks for watching.