130
edits
DevTools/Highlighter: Difference between revisions
Jump to navigation
Jump to search
Finalized the section about using the highlighter
(First version of the article) |
(Finalized the section about using the highlighter) |
||
| Line 56: | Line 56: | ||
|- | |- | ||
| '''getHighlighterByType(typeName)''' | | '''getHighlighterByType(typeName)''' | ||
| Instantiate a new highlighter, given its type (as a String). At the time of writing, the available types of highlighters are: ''BoxModelHighlighter'', ''CssTransformHighlighter'', ''SelectorHighlighter'' and ''RectHighlighter''. | | Instantiate a new highlighter, given its type (as a String). At the time of writing, the available types of highlighters are: ''BoxModelHighlighter'', ''CssTransformHighlighter'', ''SelectorHighlighter'' and ''RectHighlighter''. This returns a promise that resolves to the new instance of [[DevTools/protocol.js|protocol.js]] actor. | ||
|- | |||
|} | |||
=== The highlighter API === | |||
When getting a highlighter via ''toolbox.highlighterUtils.getHighlighterByType(typeName)'', the right type of highlighter will be instantiated on the server-side and will be wrapped into a ''CustomHighlighterActor'' and that's what will be returned to the caller. This means that all types of highlighters share the same following API: | |||
{| class="fullwidth-table wikitable" | |||
|- | |||
! Method | |||
! Description | |||
|- | |||
| '''show(NodeActor node[, Object options])''' | |||
| 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 ''toolbox.walker.querySelector(toolbox.walker.rootNode, "css selector")'' 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. | |||
|- | |||
| '''hide()''' | |||
| Hides the highlighter. | |||
|- | |||
| '''finalize()''' | |||
| Destroys the highlighter. | |||
|- | |- | ||
|} | |} | ||