130
edits
DevTools/Highlighter: Difference between revisions
Jump to navigation
Jump to search
Finalized the CanvasFrameAnonymousContentHelper section
(Improved the content insertion doc and added doc for CanvasFrameAnonymousContentHelper) |
(Finalized the CanvasFrameAnonymousContentHelper section) |
||
| Line 31: | Line 31: | ||
! Description | ! Description | ||
|- | |- | ||
| | | <code>startPicker()</code> | ||
| Starts the node picker mode which will highlight every node you hover over in the page, and will change the current node selection in the inspector on click. "picker-node-hovered" and "picker-node-picked" events are sent. | | Starts the node picker mode which will highlight every node you hover over in the page, and will change the current node selection in the inspector on click. "picker-node-hovered" and "picker-node-picked" events are sent. | ||
|- | |- | ||
| | | <code>stopPicker()</code> | ||
| Stops the node picker mode. | | Stops the node picker mode. | ||
|- | |- | ||
| | | <code>highlighterNodeFront(nodeFront)</code> | ||
| Display the box-model highlighter on a given node. NodeFront objects are what the WalkerActor return. | | Display the box-model highlighter on a given node. NodeFront objects are what the WalkerActor return. | ||
|- | |- | ||
| | | <code>highlightDomValueGrip(valueGrip)</code> | ||
| Display the box-model highlighter on a given node, represented by a debugger object value grip. | | Display the box-model highlighter on a given node, represented by a debugger object value grip. | ||
|- | |- | ||
| | | <code>unhighlight()</code> | ||
| Hide the box-model highlighter. | | Hide the box-model highlighter. | ||
|- | |- | ||
| Line 55: | Line 55: | ||
! Description | ! Description | ||
|- | |- | ||
| | | <code>getHighlighterByType(typeName)</code> | ||
| Instantiate a new highlighter, given its type (as a String). At the time of writing, the available types of highlighters are: | | Instantiate a new highlighter, given its type (as a String). At the time of writing, the available types of highlighters are: <code>BoxModelHighlighter</code>, <code>CssTransformHighlighter</code>, <code>SelectorHighlighter</code> and <code>RectHighlighter</code>. This returns a promise that resolves to the new instance of [[DevTools/protocol.js|protocol.js]] actor. | ||
|- | |- | ||
|} | |} | ||
| Line 69: | Line 69: | ||
! Description | ! Description | ||
|- | |- | ||
| | | <code>show(NodeActor node[, Object options])</code> | ||
| Highlighters are hidden by default. Calling this method is what makes them visible. The first, mandatory, parameter should be a NodeActor. NodeActors are what the WalkerActor return. It's easy to get a NodeActor for an existing DOM node. For example | | Highlighters are hidden by default. Calling this method is what makes them visible. The first, mandatory, parameter should be a NodeActor. NodeActors are what the WalkerActor return. It's easy to get a NodeActor for an existing DOM node. For example <code>toolbox.walker.querySelector(toolbox.walker.rootNode, "css selector")</code> resolves to a NodeFront (the client-side version of the NodeActor) which can be used as the first parameter. The second, optional, parameter depends on the type of highlighter being used. | ||
|- | |- | ||
| | | <code>hide()</code> | ||
| Hides the highlighter. | | Hides the highlighter. | ||
|- | |- | ||
| | | <code>finalize()</code> | ||
| Destroys the highlighter. | | Destroys the highlighter. | ||
|- | |- | ||
| Line 144: | Line 144: | ||
Using this helper is quite simple: | Using this helper is quite simple: | ||
let helper = new CanvasFrameAnonymousContentHelper(tabActor, this.buildMarkup.bind(this)); | |||
It only requires a <code>tabActor</code>, which highlighters get when they are instantiated, and a callback function that will be used to create and insert the content the first time the highlighter is shown, and every time there's a page navigation. | It only requires a <code>tabActor</code>, which highlighters get when they are instantiated, and a callback function that will be used to create and insert the content the first time the highlighter is shown, and every time there's a page navigation. | ||
| Line 150: | Line 150: | ||
The returned object provides the following API: | The returned object provides the following API: | ||
= | {| class="fullwidth-table wikitable" | ||
|- | |||
! Method | |||
! Description | |||
|- | |||
| <code>getTextContentForElement(id)</code> | |||
| Get the textContent of an element given its ID. | |||
|- | |||
| <code>setTextContentForElement(id, text)</code> | |||
| Set the textContent of an element given its ID. | |||
|- | |||
| <code>setAttributeForElement(id, name, value)</code> | |||
| Set an attribute value of an element given its ID. | |||
|- | |||
| <code>getAttributeForElement(id, name)</code> | |||
| Get an attribute value of an element given its ID. | |||
|- | |||
| <code>removeAttributeForElement(id, name)</code> | |||
| Remove an attribute of an element given its ID. | |||
|- | |||
| <code>content</code> | |||
| This property returns the wrapped AnonymousContent object. | |||
|- | |||
| <code>destroy()</code> | |||
| Destroy the helper instance. | |||
|- | |||
|} | |||