130
edits
DevTools/Highlighter: Difference between revisions
Jump to navigation
Jump to search
Added the AutoRefreshHighlighter section
(Finalized the CanvasFrameAnonymousContentHelper section) |
(Added the AutoRefreshHighlighter section) |
||
| Line 175: | Line 175: | ||
| <code>destroy()</code> | | <code>destroy()</code> | ||
| Destroy the helper instance. | | Destroy the helper instance. | ||
|- | |||
|} | |||
=== Creating a new highlighter class === | |||
A good way to get started is by taking a look at [http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/server/actors/highlighter.js the existing highlighter here]. | |||
Here is some boilerplate code for a new highlighter class: | |||
function MyNewHighlighter(tabActor) { | |||
this.doc = tabActor.window.document; | |||
this.markup = new CanvasFrameAnonymousContentHelper(tabActor, this._buildMarkup.bind(this)); | |||
} | |||
MyNewHighlighter.prototype = { | |||
destroy: function() { | |||
this.doc = null; | |||
this.markup.destroy(); | |||
}, | |||
_buildMarkup: function() { | |||
let container = this.doc.createElement("div"); | |||
container.innerHTML = '<div id="new-highlighted-" style="display:none;">'; | |||
return container; | |||
}, | |||
show: function(node, options) { | |||
this.markup.removeAttributeForElement("new-highlighted-el", "style"); | |||
}, | |||
hide: function() { | |||
this.markup.setAttributeForElement("new-highlighted-el", "style", "display:none;"); | |||
} | |||
}; | |||
In most situations, the <code>container</code> returned by <code>_buildMarkup</code> will be absolutely positioned, and will need to contain elements with IDs, so that these can then later be moved, resized, hidden or shown in <code>show</code> and <code>hide</code> using the AnonymousContent API. | |||
=== The AutoRefreshHighlighter parent class === | |||
It is worth mentioning this class as it may be a useful parent class to inherit a new highlighter from in some situations. | |||
If the new highlighter's job is to highlight an element in the DOM, then it most likely should inherit from <code>AutoRefreshHighlighter</code>. | |||
The <code>AutoRefreshHighlighter</code> class updates itself in a loop, checking if the currently highlighted node's geometry has changed since the last iteration. This is useful to make sure the highlighter '''follows''' the highlighted node around, in case the layout around it changes, or in case it is an animated node. | |||
Sub classes must implement the following methods: | |||
{| class="fullwidth-table wikitable" | |||
|- | |||
! Method | |||
! Description | |||
|- | |||
| <code>_show()</code> | |||
| Called when the highlighter should be shown. | |||
|- | |||
| <code>_update()</code> | |||
| Called while the highlighter is shown and the geometry of the current node changes. | |||
|- | |||
| <code>_hide()</code> | |||
| Called when the highlighter should be hidden. | |||
|- | |||
|} | |||
Sub classes will have access to the following properties: | |||
{| class="fullwidth-table wikitable" | |||
|- | |||
! Property | |||
! Description | |||
|- | |||
| <code>this.currentNode</code> | |||
| The node to be shown. | |||
|- | |||
| <code>this.currentQuads</code> | |||
| All of the node's box model region quads. | |||
|- | |||
| <code>this.win</code> | |||
| The current window | |||
|- | |- | ||
|} | |} | ||