commit f0d5ebd81ad267219df0e2d121cd243730828717
parent cd8414274ddd56a475cafd889dedb22fbfab32d9
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Fri, 5 Dec 2025 12:44:12 +0000
Bug 2004299 - [devtools] Use proper ES class in documentation examples. r=devtools-reviewers,ochameau.
Also fix the Highlighter class example to better reflect what we're doing now.
Differential Revision: https://phabricator.services.mozilla.com/D275182
Diffstat:
3 files changed, 69 insertions(+), 49 deletions(-)
diff --git a/devtools/docs/contributor/backend/protocol.js.md b/devtools/docs/contributor/backend/protocol.js.md
@@ -169,15 +169,15 @@ Types and Marshalling
Things have been pretty simple up to this point - all the arguments we've passed in have been javascript primitives. But for some types (most importantly Actor types, which I'll get to eventually), we can't just copy them into a JSON packet and expect it to work, we need to marshal things ourselves.
-Again, the protocol lib tries hard to provide a natural API to actors and clients, and sometime that natural API might involve object APIs. I'm going to use a wickedly contrived example, bear with me. Let's say I have a small object that contains a number and has a few methods associated with it:
+Again, the protocol lib tries hard to provide a natural API to actors and clients, and sometime that natural API might involve object APIs. I'm going to use a wickedly contrived example, bear with me. Let's say I have a small class that contains a number and has a few methods associated with it:
- let Incrementor = function (i) {
- this.value = value;
+ class Incrementor {
+ constructor (i) {
+ this.value = i;
+ }
+ increment() { this.value++ }
+ decrement() { this.value-- }
}
- Incrementor.prototype = {
- increment: function () { this.value++ },
- decrement: function () { this.value-- }
- };
and I want to return it from a backend function:
diff --git a/devtools/docs/contributor/tools/highlighters.md b/devtools/docs/contributor/tools/highlighters.md
@@ -129,32 +129,52 @@ A good way to get started is by taking a look at [existing highlighters here](ht
Here is some boilerplate code for a new highlighter class:
```js
- function MyNewHighlighter(targetActor) {
- this.doc = targetActor.window.document;
- this.markup = new CanvasFrameAnonymousContentHelper(targetActor, this._buildMarkup.bind(this));
- this.markup.initialize();
- }
-
- MyNewHighlighter.prototype = {
- destroy: function() {
- this.doc = null;
- this.markup.destroy();
- },
-
- _buildMarkup: function() {
- let container = this.markup.anonymousContentDocument.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;");
- }
- };
+class MyNewHighlighter {
+ constructor(highlighterEnv) {
+ this.markup = new CanvasFrameAnonymousContentHelper(
+ highlighterEnv,
+ this._buildMarkup.bind(this),
+ {
+ contentRootHostClassName: "devtools-highlighter-my-new-highlighter",
+ }
+ );
+ }
+
+ destroy() {
+ this.markup.destroy();
+ }
+
+ _buildMarkup() {
+ const container = this.markup.createNode({
+ attributes: { class: "highlighter-container" },
+ });
+
+ const node = this.markup.createNode({
+ parent: container,
+ attributes: {
+ id: "new-highlighted-elements",
+ class: "new-highlighted-elements",
+ hidden: "true",
+ },
+ });
+
+ return container;
+ }
+
+ show(node, options) {
+ this.markup.removeAttributeForElement(
+ "new-highlighted-elements",
+ "hidden"
+ );
+ }
+
+ hide() {
+ this.markup.setAttributeForElement(
+ "new-highlighted-elements",
+ "hidden"
+ );
+ }
+}
```
In most situations, the `container` returned by `_buildMarkup` 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 `show` and `hide` using the AnonymousContent API.
diff --git a/devtools/docs/user/devtoolsapi/index.rst b/devtools/docs/user/devtoolsapi/index.rst
@@ -566,36 +566,36 @@ Here's a basic template for a ToolPanel implementation.
// In the ToolDefinition object, do
// build: (window, target) => new MyPanel(window, target),
- function MyPanel(window, target) {
- // The window object that has loaded the URL defined in the ToolDefinition
- this.window = window;
- // The Target this toolbox is debugging.
- this.target = target;
-
- // Do synchronous initialization here.
- window.document.body.addEventListener("click", this.handleClick);
- }
+ class MyPanel {
+ constructor(window, target) {
+ // The window object that has loaded the URL defined in the ToolDefinition
+ this.window = window;
+ // The Target this toolbox is debugging.
+ this.target = target;
+
+ // Do synchronous initialization here.
+ window.document.body.addEventListener("click", this.handleClick);
+ }
- MyPanel.prototype = {
- open: function() {
+ open() {
// Any asynchronous operations should be done here.
return this.doSomethingAsynchronous()
.then(() => this);
- },
+ }
- destroy: function() {
+ destroy() {
// Synchronous destruction.
this.window.document.body.removeEventListener("click", this.handleClick);
// Async destruction.
return this.destroySomethingAsynchronously()
.then(() => console.log("destroyed"));
- },
+ }
handleClick: function(event) {
console.log("Clicked", event.originalTarget);
- },
- };
+ }
+ }
.. _devtoolsapi-event-emitter:
