cbrem

Model

The Inspector API models an Inspector as a group of trees. Each tree has a root, which corresponds to a Scope in the VariablesView. Each tree is componsed of Nodes, one of which is the root. A tree is a UI element.

A tree is similar to, but distinct from, the object under inspection which it represents. Programmers can traverse trees using the parent and children properties of Nodes. The values of these properties represent what is shown in the UI, not necessarily what is true about the object under inspection. All information about the object under inspection must be retrived via ansynchronous object clients, which are bound to Nodes when the Nodes are created.

Communication between an Inspector tree UI and the object under inspection happens via two methods:

• Inspector.onEdit: fires when a (key, value) pair changes in the UI, and causes changes to the object under inspection.
• Inspector.addChild: is set from the object under inspection as part of populating the tree

cbrem

const { Class } = require('sdk/core/heritage');
const { defer } = require('sdk/core/promise');

const { Cu } = require("chrome");
const { ObjectClient } = Cu.import('resource://gre/modules/devtools/dbg-client.jsm', {});

const SPECIAL_TYPES = Set(["null", "undefined", "Infinity", "-Infinity", "NaN", "-0"]);
const valueFromSpecialType = type => {
  if (SPECIAL_TYPES.has(type)) {
    return eval(type)

cbrem

Simple Output Formatter

Output formatters could simply apply a apply filter to objects to display in the Object Inspecter if certain criteria are met. Changes to the display would propagate back to the object being displayed (its grip, really) via a number of propertyCallbacks. Whenever we click an object that this formatter matches, we open a new tab alongside the normal inspecter to display it in (after the given formatting has been applied).

main.js

const formatters = require('sdk/devtools/output-formatter');

var formatter = formatters.Formatter({

/* The title to display for this formatter in the Object Inspecter tab created