Provide a way to inspect a logged variable in the DOM Panel

NEW
Unassigned

Status

()

Firefox
Developer Tools: Console
P2
normal
10 months ago
10 months ago

People

(Reporter: nchevobbe, Unassigned)

Tracking

50 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

10 months ago
In Bug 1332011 we plan to investigate in using an object inspector (like the debugger does), in-lieu of the variable view (the panel which pops up when clicking on a variable title).
This panel could still be valuable for some people, since it gives the user a way to search through the inspected variable.
Maybe we could keep this by providing a way (a context menu entry, a combination of key + click, ...) to inspect the targeted variable in the DOM Panel, which has also searching capabilities.

A chat on IRC with Honza revealed that it can be technically done, even if I guess there will be some UI/UX challenges.
I like this idea (it's also how it works in Firebug)

The DOM panel implementation is based on TreeView component (devtools/shared/components/tree/tree-view). The panel wraps basic TreeView into DomTree component and sets some custom properties.

See here:
https://dxr.mozilla.org/mozilla-central/rev/7ef1e9abd296a8edc39b7efc8d637767ba2f77ed/devtools/client/dom/content/components/dom-tree.js#70

Set of props passed into the TreeView component:

TreeView({
  object: this.props.object,
  provider: new GripProvider(this.props.grips, this.props.dispatch),
  decorator: new DomDecorator(),
  mode: MODE.SHORT,
  columns: columns,
  renderValue: renderValue,
  onFilter: this.onFilter
})

`object`: this is the root grip. It's received from the backed after evaluating 'window' expression. The DOM panel displays all properties of the Window, but any grip can be passed in - e.g. the one clicked by the user that should be inspected.

`provider`: this object provides data for the TreeView. In case of the DOM panel children of a node represents JS properties. This object is responsible for fetching data from the backend (on demand, as the user is expanding nodes in the tree). Custom providers can provide different/custom data e.g. additional virtual properties that doesn't exist in JS object.

'decorator': adds custom CSS classes (e.g. read only icon)

'renderValue': renders value of a node using Reps

---

It should be quite straightforward to use the TreeView (or share/clone DomTree component) in another part of DevTools UI (e.g. in a side panel).

Honza
You need to log in before you can comment on or make changes to this bug.