Convert the directory listing to run on top of the platform

Previously we were using string concatenation to build up the directory
listing. Now we fetch some JSON from the server and use data binding to inflate
a directory listing.

This exmaple doesn't work yet because we're missing support for
template@repeat, but hopefully we'll get that soon.

Also, added support for setRequestHeader to XMLHttpRequest.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/688413005

engine/src/flutter/examples/file-browser.sky

@@ -0,0 +1,41 @@
+<!--
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="../framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="../framework/xmlhttprequest.sky" as="XMLHttpRequest" />
+
+<template>
+  <style>
+    heading {
+      font-size: 16px;
+    }
+  </style>
+  <heading>File browser for {{ url }}</heading>
+  <template repeat="{{ directory in directories }}">
+    <a href="{{ directory }}">{{ directory }}</a>
+  </template>
+  <template repeat="{{ file in files }}">
+    <a href="{{ file }}">{{ file }}</a>
+  </template>
+</template>
+<script>
+SkyElement({
+  name: 'file-browser',
+  url: '',
+  files: [],
+  directories: [],
+  attached: function() {
+    this.url = this.ownerDocument.URL;
+    var xhr = this.xhr_ = new XMLHttpRequest();
+    xhr.open('GET', this.url + '?format=json');
+    xhr.onload = (function() {
+      var listing = JSON.parse(xhr.responseText);
+      this.files = listing.files;
+      this.directories = listing.directories;
+    }).bind(this);
+    xhr.send();
+  }
+});
+</script>

engine/src/flutter/tools/sky_server

@@ -4,8 +4,9 @@
 # found in the LICENSE file.
 
 import argparse
-import os
 import cherrypy
+import json
+import os
 import staticdirindex
 
 
@@ -17,29 +18,23 @@ SKY_ROOT = os.path.join(SRC_ROOT, 'sky')
 GEN_ROOT = os.path.join(SRC_ROOT, BUILD_DIRECTORY, CONFIG_DIRECTORY, 'gen')
 
 
-# FIXME: This should be replaced by just json and inflated into DOM client-side.
 def skydir(section="", dir="", path="", **kwargs):
-    url = "%s%s" % (cherrypy.request.headers.get('Host', ''),
-        cherrypy.request.path_info)
-    sky = "<listing>"
-    sky += "<style>a { display: block; }"
-    sky += "header { border-bottom: 1px solid lightgrey }</style>"
-    sky += '<header>Listing for: <a href="' + url + '">' + url +'</a></header>'
+    if cherrypy.request.params.get('format') is None:
+        return '<sky><import src="/sky/examples/file-browser.sky"/><file-browser/></sky>'
+    result = dict()
+    result['directories'] = []
+    result['files'] = []
     for _, dir_names, file_names in os.walk(path.rstrip(r"\/")):
         for dir_name in sorted(dir_names):
-            sky += "<a href=\"%s/\">%s/</a>\n" % (dir_name, dir_name)
+            result["directories"].append(dir_name)
 
         del dir_names[:] # limit to one level
 
         for file_name in sorted(file_names):
-            sky += "<a href=\"%s\">%s</a>\n" % (file_name, file_name)
-    return sky + "</listing>"
+            result["files"].append(file_name)
+    return json.dumps(result)
 
 
-# FIXME: This doesn't yet support directory listings.  We'll do something like:
-# http://tools.cherrypy.org/wiki/staticdirindex
-# but have it spit .sky instead of HTML
-
 def main():
     parser = argparse.ArgumentParser(description='Sky development server')
     parser.add_argument('-v', '--verbose', action='store_true',