Add support for Page.getResourceTree

sky/framework/inspector/page-agent.sky

Index: sky/framework/inspector/page-agent.sky
diff --git a/sky/framework/inspector/page-agent.sky b/sky/framework/inspector/page-agent.sky
index 875d5719301ef3179c79eb802451230b75aa9904..6276a96bf175457f5e534d4ba7ea96cf4d478194 100644
--- a/sky/framework/inspector/page-agent.sky
+++ b/sky/framework/inspector/page-agent.sky
@@ -33,19 +33,83 @@ Page.prototype.getResourceContent = function(params, message_id) {
   return this.delegate_.ASYNC_RESPONSE;
 };
 
+Page.prototype._treeOrderWalk = function(root, visit) {

[esprehn, 2014/11/18 23:23:58]

You can actually just do querySelectorAll("*") and then walk that array if you
want a tree order traversal of only elements.

function forEachElement(node, visit) {
  var elements = node.querySelectorAll("*");
  for (var i = 0; i < elements.length; ++i) {
    visit(elements[i]);
  }
}

+  // HTML defines tree-order as a pre-order depth-first walk.
+  var node = root;
+  var parent_stack = [];

[esprehn, 2014/11/18 23:23:58]

JS vars should really be camelCase.

+  while (parent_stack.length || node) {
+    if (node) {
+      visit(node);
+      if (node.nextSibling)
+        parent_stack.push(node.nextSibling);
+      node = node.firstChild;
+    } else
+      node = parent_stack.pop();
+  }
+}
+
+Page.prototype._getElementsByTagName = function(root, tag_name) {

[esprehn, 2014/11/18 23:23:58]

Just use querySelectorAll()

+  var elements = [];
+  this._treeOrderWalk(root, function(node) {
+    if (node.tagName == tag_name)
+      elements.push(node);
+  });
+  return elements;
+}
+
+// ES6 has Array.from which theoretically does this.
+Page.prototype._arrayFromIterator = function(iterator) {
+  var a = [];
+  for (var e of iterator)

[esprehn, 2014/11/18 23:23:58]

You could also do Array.prototype.slice.call(iterator) but maybe that's too
crazy for you.

+    a.push(e);
+  return a;
+}
+
+Page.prototype._resourcesMapForSubtree = function(root_doc) {
+  var resource_map = new Map;
+  function _addResource(url, type, mimeType) {

[esprehn, 2014/11/18 23:23:58]

This requires allocating a new function each time _resourcesMapForSubtree is
called, is this called a lot like in a loop?

+    var absolute_url = new URL(url, document.URL);
+    if (resource_map.has(absolute_url))

[esprehn, 2014/11/18 23:23:58]

String first, new object means this is always false.

+      return;
+    resource_map.set(absolute_url, {
+      'url': String(absolute_url),

[esprehn, 2014/11/18 23:23:58]

no quotes needed on any of these

+      'type': type,
+      'mimeType': mimeType,
+    })
+  }
+
+  var pending_docs = [root_doc];
+  while (pending_docs.length) {
+    var doc = pending_docs.pop();
+    var imports = this._getElementsByTagName(doc, 'import');

[esprehn, 2014/11/18 23:23:58]

querySelectorAll("import,img") will only walk the document once then branch on
the type below instead.

+    imports.forEach(function(imp) {
+      // FIXME: It's no longer possible to walk into an import. :(
+      // pending_docs.push(imp.import);
+      _addResource(imp.getAttribute('src'), 'Document', 'text/html');
+    });
+    var images = this._getElementsByTagName(doc, 'img');
+    images.forEach(function(img) {
+      // FIXME: Can't determine the type of an image from the DOM.
+      _addResource(img.getAttribute('src'), 'Image', 'image/unknown');
+    });
+  }
+  return resource_map;
+}
+
 Page.prototype.getResourceTree = function() {
   // Unclear if this is all needed, but if we don't return something here
   // the inspector hits an exception in WebInspector.ResourceTreeModel.
+  var resources_iter = this._resourcesMapForSubtree(document).values();
   return {
     "frameTree": {
       "frame": {
         "id": "1",
         "loaderId": "1",
-        "url": document.URL,
+        "url": String(document.URL),
         "mimeType": "text/html",
-        "securityOrigin": document.URL,
+        "securityOrigin": String(document.URL),
       },
-      "resources": [], // FIXME
+      "resources": this._arrayFromIterator(resources_iter),
     }
   };
 };