[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.67,0:00:04.90,Default,,0000,0000,0000,,Hey I'm Lloyd Hilaiel working with Marcio Galli in Mozilla Labs.
Dialogue: 0,0:00:04.90,0:00:09.71,Default,,0000,0000,0000,,In this short cast we put together we'll give you an overview of the Chromeless project.
Dialogue: 0,0:00:09.71,0:00:13.55,Default,,0000,0000,0000,,Chromeless is an experiment which aims to make it easy to tinker
Dialogue: 0,0:00:13.55,0:00:16.92,Default,,0000,0000,0000,,with new ideas around web user interface.
Dialogue: 0,0:00:16.92,0:00:19.12,Default,,0000,0000,0000,,It attempts to include more people in the conversation
Dialogue: 0,0:00:19.12,0:00:21.62,Default,,0000,0000,0000,,about what web browser software should look like.
Dialogue: 0,0:00:21.62,0:00:23.95,Default,,0000,0000,0000,,And how it should work.
Dialogue: 0,0:00:23.95,0:00:26.83,Default,,0000,0000,0000,,Technically Chromless is not really anything all that new.
Dialogue: 0,0:00:26.83,0:00:30.13,Default,,0000,0000,0000,,What we've done is taken XULrunner the application runtime upon
Dialogue: 0,0:00:30.13,0:00:31.93,Default,,0000,0000,0000,,which Firefox and Thunderbird are built
Dialogue: 0,0:00:31.93,0:00:34.74,Default,,0000,0000,0000,,and put a thin abstraction layer on top of it.
Dialogue: 0,0:00:34.74,0:00:37.80,Default,,0000,0000,0000,,This layer makes it possible to rapidly build a web browser
Dialogue: 0,0:00:37.80,0:00:42.51,Default,,0000,0000,0000,,using web technologies such as html, javascript and css.
Dialogue: 0,0:00:42.51,0:00:45.41,Default,,0000,0000,0000,,Now in Chromeless a single html document
Dialogue: 0,0:00:45.41,0:00:48.59,Default,,0000,0000,0000,,defines the user interface of the browser itself.
Dialogue: 0,0:00:48.59,0:00:50.52,Default,,0000,0000,0000,,To make it easier to talk about we've been calling
Dialogue: 0,0:00:50.52,0:00:54.15,Default,,0000,0000,0000,,this initial html document as the browser code.
Dialogue: 0,0:00:54.15,0:00:57.46,Default,,0000,0000,0000,,Now just as normal web content can embed other sites and iframes,
Dialogue: 0,0:00:57.46,0:00:59.96,Default,,0000,0000,0000,,this browser code can also
Dialogue: 0,0:00:59.96,0:01:02.70,Default,,0000,0000,0000,,but it has greater privileges to affect and monitor
Dialogue: 0,0:01:02.70,0:01:05.15,Default,,0000,0000,0000,,content inside that iframe.
Dialogue: 0,0:01:05.15,0:01:08.04,Default,,0000,0000,0000,,This theme of taking existing web concepts
Dialogue: 0,0:01:08.04,0:01:10.24,Default,,0000,0000,0000,,and augmenting them just a little bit
Dialogue: 0,0:01:10.24,0:01:13.11,Default,,0000,0000,0000,,is the basic idea behind Chromeless.
Dialogue: 0,0:01:13.11,0:01:17.61,Default,,0000,0000,0000,,Now, let's take a tour of some of the things you can do.
Dialogue: 0,0:01:17.61,0:01:20.08,Default,,0000,0000,0000,,What you are looking at now is a very simple
Dialogue: 0,0:01:20.08,0:01:21.82,Default,,0000,0000,0000,,but functional web browser.
Dialogue: 0,0:01:21.82,0:01:24.58,Default,,0000,0000,0000,,Here you can see basic html which renders a text
Dialogue: 0,0:01:24.58,0:01:27.79,Default,,0000,0000,0000,,box where you can type in a url and an iframe
Dialogue: 0,0:01:27.79,0:01:30.16,Default,,0000,0000,0000,,where web content will go.
Dialogue: 0,0:01:30.16,0:01:32.40,Default,,0000,0000,0000,,With Chromeless this is really all the code you need to
Dialogue: 0,0:01:32.40,0:01:34.33,Default,,0000,0000,0000,,build a browser.
Dialogue: 0,0:01:34.33,0:01:35.60,Default,,0000,0000,0000,,Let's take it a bit further.
Dialogue: 0,0:01:35.60,0:01:38.40,Default,,0000,0000,0000,,What if we wanted to let the user toggle full screen mode?
Dialogue: 0,0:01:38.40,0:01:40.63,Default,,0000,0000,0000,,Expanding to full screen is obviously something
Dialogue: 0,0:01:40.63,0:01:42.90,Default,,0000,0000,0000,,that an average web page can not do.
Dialogue: 0,0:01:42.90,0:01:45.25,Default,,0000,0000,0000,,So we have to pull in a new API.
Dialogue: 0,0:01:45.25,0:01:47.73,Default,,0000,0000,0000,,Within Chromeless the global require function
Dialogue: 0,0:01:47.73,0:01:50.63,Default,,0000,0000,0000,,is how you can access new APIs.
Dialogue: 0,0:01:50.63,0:01:54.01,Default,,0000,0000,0000,,In this case we'll require the misc library.
Dialogue: 0,0:01:54.01,0:01:55.93,Default,,0000,0000,0000,,The name misc is just a place holder
Dialogue: 0,0:01:55.93,0:01:58.58,Default,,0000,0000,0000,,but it exposes a full screen function that we can use
Dialogue: 0,0:01:58.58,0:02:01.22,Default,,0000,0000,0000,,to toggle the mode of the browser.
Dialogue: 0,0:02:01.22,0:02:03.64,Default,,0000,0000,0000,,It will invoke this function inside a button,
Dialogue: 0,0:02:03.64,0:02:05.34,Default,,0000,0000,0000,,click handler.
Dialogue: 0,0:02:05.34,0:02:07.90,Default,,0000,0000,0000,,With 4 more lines of code our browser now has
Dialogue: 0,0:02:07.90,0:02:10.93,Default,,0000,0000,0000,,a functional full screen mode.
Dialogue: 0,0:02:10.93,0:02:12.97,Default,,0000,0000,0000,,So next let's try something a bit more playful
Dialogue: 0,0:02:12.97,0:02:14.60,Default,,0000,0000,0000,,combining a couple new ideas.
Dialogue: 0,0:02:14.60,0:02:16.96,Default,,0000,0000,0000,,First as we mentioned before, browser code
Dialogue: 0,0:02:16.96,0:02:21.24,Default,,0000,0000,0000,,has increased priviledges to monitor web content running in iframes.
Dialogue: 0,0:02:21.24,0:02:24.88,Default,,0000,0000,0000,,An example of this is the experimental dom load event
Dialogue: 0,0:02:24.88,0:02:28.68,Default,,0000,0000,0000,,which is fired when new content is loaded in an iframe.
Dialogue: 0,0:02:28.68,0:02:31.42,Default,,0000,0000,0000,,The other tool we'll use is the dom shot library
Dialogue: 0,0:02:31.42,0:02:34.79,Default,,0000,0000,0000,,which can get a graphical snapshot of the specific dom node.
Dialogue: 0,0:02:34.79,0:02:37.39,Default,,0000,0000,0000,,The return value of the function is a data url which
Dialogue: 0,0:02:37.39,0:02:40.23,Default,,0000,0000,0000,,contains embedded png image data.
Dialogue: 0,0:02:40.23,0:02:42.63,Default,,0000,0000,0000,,Now Marcio combined these two features and a little bit of
Dialogue: 0,0:02:42.63,0:02:44.62,Default,,0000,0000,0000,,jquery to build this demonstration browser.
Dialogue: 0,0:02:44.62,0:02:48.07,Default,,0000,0000,0000,,It lets you view thumbnails of open tabs,
Dialogue: 0,0:02:48.07,0:02:50.94,Default,,0000,0000,0000,,with a fish eye effect.
Dialogue: 0,0:02:50.94,0:02:53.71,Default,,0000,0000,0000,,Hopefully that gives you a pretty good understanding of
Dialogue: 0,0:02:53.71,0:02:55.31,Default,,0000,0000,0000,,what Chromeless is all about.
Dialogue: 0,0:02:55.31,0:02:56.84,Default,,0000,0000,0000,,To learn more we recommend that you go
Dialogue: 0,0:02:56.84,0:03:00.08,Default,,0000,0000,0000,,pull the code from github and start with the included tutorial.
Dialogue: 0,0:03:00.08,0:03:03.15,Default,,0000,0000,0000,,While some of the APIs that I've shown you here might have changed,
Dialogue: 0,0:03:03.15,0:03:06.95,Default,,0000,0000,0000,,the basic ideas behind Chromeless surely haven't.
Dialogue: 0,0:03:06.95,0:03:08.99,Default,,0000,0000,0000,,If you have thoughts about Chromeless, or would like
Dialogue: 0,0:03:08.99,0:03:11.79,Default,,0000,0000,0000,,to contribute, you can join the fray in the usual places,
Dialogue: 0,0:03:11.79,0:03:13.93,Default,,0000,0000,0000,,on IRC and our mailing list.
Dialogue: 0,0:03:13.93,9:59:59.99,Default,,0000,0000,0000,,Thanks for watching.