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 Node
s, 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 Node
s. 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 Node
s when the Node
s 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 UI. It binds aNode
to aclient
, which will be used to query the object under inspection for further UI population.
Objects under inspection can come from one of many Inspector.source
s, such as the Webconsole
or Debugger
backends.
/*
* An enum of sources for input to the Inspector.
*/
sources: Object
/* The tab to which this VariablesView is attached. */
tab : Tab
/*
* The component in which this VariablesView is embedded.
* Could be Webconsole, Debugger, etc.
*/
source : Inspector.sources
/*
* The label which this VariablesView displays.
*/
label : string
/*
* Retrieves a map from `Inspector` sources to `Inspector`s within the given SDK `Tab`.
*/
getInspectors( tab : Tab ) : { Inspector.source : Inspector }
/*
* Manage the `Inspector`'s roots (i.e. `Scopes` from the `VariablesView`.)
*/
getRoots() : promise([Node])
/*
* Adds a child to the given `parent` (which may be a root).
* This child will be another `Node` with the given `name`.
* Whenever this client is first expanded, it will populate itself with the given `client`.
*
* This call may originate from an `Inspector.source`, and will cause updates to the UI.
*/
addChild(parent : Node, name : string, client : client.Object) : promise()
/*
* Called when the `Inspector` UI updates a `(key, value)` pair.
* `Node` is the parent of this pair.
*
* Unlike `addChild`, this call originates from the UI and will cause updates to an `Inspector.source`.
*
* TODO: maybe take client as an input instead of Node?
*/
onEdit(node : Node, key : string, value : string) : promise()
A node is a struct that contains information about one tree element. Nodes have the following properties.
/*
* The `Node` above this one, or null if it is a root.
* Not settable.
*/
parent : Node | null
/*
* This node's children.
* Not settable.
*/
children : [Node]
/*
* The `Node`'s name.
* Not settable later.
*/
name : string
/*
* A handle for asynchronously retrieving information about this `Node`'s value.
* Set in `addChild`.
* Not settable later.
*/
client : client.Object
/*
* Determines whether the `Node` is expanded.
* Settable.
*/
expanded : boolean
Jordan, the things that you pointed out in your first comment were typos. My bad! I fixed those. It's work noting that this interface condenses
ownProperties
andprototype
into justproperties
for simplicity.And the
Tool
constructor is from Irakli's devtools SDK work. Currently it just takesPanel
s as input, but it seems to make sense that aTool
can includeInspector
objects, too. I'll update theTool
constructor to containinspectors
as a named property.