Return to Video

Introducing Chromeless

  • 0:02 - 0:05
    Hey I'm Lloyd Hilaiel working with Marcio Galli in Mozilla Labs.
  • 0:05 - 0:10
    In this short cast we put together we'll give you an overview of the Chromeless project.
  • 0:10 - 0:14
    Chromeless is an experiment which aims to make it easy to tinker
  • 0:14 - 0:17
    with new ideas around web user interface.
  • 0:17 - 0:19
    It attempts to include more people in the conversation
  • 0:19 - 0:22
    about what web browser software should look like.
  • 0:22 - 0:24
    And how it should work.
  • 0:24 - 0:27
    Technically Chromless is not really anything all that new.
  • 0:27 - 0:30
    What we've done is taken XULrunner the application runtime upon
  • 0:30 - 0:32
    which Firefox and Thunderbird are built
  • 0:32 - 0:35
    and put a thin abstraction layer on top of it.
  • 0:35 - 0:38
    This layer makes it possible to rapidly build a web browser
  • 0:38 - 0:43
    using web technologies such as html, javascript and css.
  • 0:43 - 0:45
    Now in Chromeless a single html document
  • 0:45 - 0:49
    defines the user interface of the browser itself.
  • 0:49 - 0:51
    To make it easier to talk about we've been calling
  • 0:51 - 0:54
    this initial html document as the browser code.
  • 0:54 - 0:57
    Now just as normal web content can embed other sites and iframes,
  • 0:57 - 1:00
    this browser code can also
  • 1:00 - 1:03
    but it has greater privileges to affect and monitor
  • 1:03 - 1:05
    content inside that iframe.
  • 1:05 - 1:08
    This theme of taking existing web concepts
  • 1:08 - 1:10
    and augmenting them just a little bit
  • 1:10 - 1:13
    is the basic idea behind Chromeless.
  • 1:13 - 1:18
    Now, let's take a tour of some of the things you can do.
  • 1:18 - 1:20
    What you are looking at now is a very simple
  • 1:20 - 1:22
    but functional web browser.
  • 1:22 - 1:25
    Here you can see basic html which renders a text
  • 1:25 - 1:28
    box where you can type in a url and an iframe
  • 1:28 - 1:30
    where web content will go.
  • 1:30 - 1:32
    With Chromeless this is really all the code you need to
  • 1:32 - 1:34
    build a browser.
  • 1:34 - 1:36
    Let's take it a bit further.
  • 1:36 - 1:38
    What if we wanted to let the user toggle full screen mode?
  • 1:38 - 1:41
    Expanding to full screen is obviously something
  • 1:41 - 1:43
    that an average web page can not do.
  • 1:43 - 1:45
    So we have to pull in a new API.
  • 1:45 - 1:48
    Within Chromeless the global require function
  • 1:48 - 1:51
    is how you can access new APIs.
  • 1:51 - 1:54
    In this case we'll require the misc library.
  • 1:54 - 1:56
    The name misc is just a place holder
  • 1:56 - 1:59
    but it exposes a full screen function that we can use
  • 1:59 - 2:01
    to toggle the mode of the browser.
  • 2:01 - 2:04
    It will invoke this function inside a button,
  • 2:04 - 2:05
    click handler.
  • 2:05 - 2:08
    With 4 more lines of code our browser now has
  • 2:08 - 2:11
    a functional full screen mode.
  • 2:11 - 2:13
    So next let's try something a bit more playful
  • 2:13 - 2:15
    combining a couple new ideas.
  • 2:15 - 2:17
    First as we mentioned before, browser code
  • 2:17 - 2:21
    has increased priviledges to monitor web content running in iframes.
  • 2:21 - 2:25
    An example of this is the experimental dom load event
  • 2:25 - 2:29
    which is fired when new content is loaded in an iframe.
  • 2:29 - 2:31
    The other tool we'll use is the dom shot library
  • 2:31 - 2:35
    which can get a graphical snapshot of the specific dom node.
  • 2:35 - 2:37
    The return value of the function is a data url which
  • 2:37 - 2:40
    contains embedded png image data.
  • 2:40 - 2:43
    Now Marcio combined these two features and a little bit of
  • 2:43 - 2:45
    jquery to build this demonstration browser.
  • 2:45 - 2:48
    It lets you view thumbnails of open tabs,
  • 2:48 - 2:51
    with a fish eye effect.
  • 2:51 - 2:54
    Hopefully that gives you a pretty good understanding of
  • 2:54 - 2:55
    what Chromeless is all about.
  • 2:55 - 2:57
    To learn more we recommend that you go
  • 2:57 - 3:00
    pull the code from github and start with the included tutorial.
  • 3:00 - 3:03
    While some of the APIs that I've shown you here might have changed,
  • 3:03 - 3:07
    the basic ideas behind Chromeless surely haven't.
  • 3:07 - 3:09
    If you have thoughts about Chromeless, or would like
  • 3:09 - 3:12
    to contribute, you can join the fray in the usual places,
  • 3:12 - 3:14
    on IRC and our mailing list.
  • 3:14 -
    Thanks for watching.
Title:
Introducing Chromeless
Video Language:
English
Duration:
03:16

English subtitles

Revisions Compare revisions