Opening a devtools connection and sample usage of the walker front

using-walker-from-scratchpad.js

var { console } = Cu.import("resource://gre/modules/devtools/Console.jsm", {});
var { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
var { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
var { InspectorFront } = devtools.require("devtools/shared/fronts/inspector");
var { Task } = Cu.import("resource://gre/modules/Task.jsm", {});

Task.async(function* () {
  let target = yield devtools.TargetFactory.forRemoteTab(gBrowser.selectedTab);
  let inspector = InspectorFront(target.client, target.form);
  let walker = yield inspector.getWalker();
 
  // Now that there is a walker, you can do all sorts of different markup view type of things
  // (traversing child list, fetching attributes, markup, etc).
  // See https://dxr.mozilla.org/mozilla-central/source/browser/devtools/markupview/markup-view.js
  // and https://dxr.mozilla.org/mozilla-central/source/toolkit/devtools/server/actors/inspector.js#1109

  traverseAll = Task.async(function*(node) {
    let children = yield walker.children(node);
    children.nodes.forEach(c=> {
      console.log("Found ", c, c.nodeName);
      traverseAll(c);
    });
  });
  
  console.log(walker.rootNode);
  traverseAll(walker.rootNode);
})();