Add an actor id data attribute on tree-node

This then can be used to retrieve the actor the node is representing.
For example, in the console we can use it in the context menu entry
to store an object as a global variable.

Author: nchevobbe

packages/devtools-reps/src/reps/attribute.js

@@ -31,7 +31,10 @@ function Attribute(props) {
   let value = object.preview.value;
 
   return (
-    safeObjectLink(props, {className: "objectLink-Attr"},
+    safeObjectLink(props, {
+      className: "objectLink-Attr",
+      "data-link-actor-id": object.actor,
+    },
       span({className: "attrTitle"},
         getTitle(object)
       ),

packages/devtools-reps/src/reps/comment-node.js

@@ -38,7 +38,10 @@ function CommentNode(props) {
     textContent = cropString(textContent, 50);
   }
 
-  return span({className: "objectBox theme-comment"}, `<!-- ${textContent} -->`);
+  return span({
+    className: "objectBox theme-comment",
+    "data-link-actor-id": object.actor,
+  }, `<!-- ${textContent} -->`);
 }
 
 // Registration

packages/devtools-reps/src/reps/date-time.js

@@ -27,7 +27,10 @@ function DateTime(props) {
   let grip = props.object;
   let date;
   try {
-    date = span({className: "objectBox"},
+    date = span({
+      "data-link-actor-id": grip.actor,
+      className: "objectBox",
+    },
       getTitle(props, grip),
       span({className: "Date"},
         new Date(grip.preview.timestamp).toISOString()

packages/devtools-reps/src/reps/document.js

@@ -28,7 +28,10 @@ function Document(props) {
   let grip = props.object;
 
   return (
-    span({className: "objectBox objectBox-object"},
+    span({
+      "data-link-actor-id": grip.actor,
+      className: "objectBox objectBox-object"
+    },
       getTitle(props, grip),
       span({className: "objectPropValue"},
         getLocation(grip)

packages/devtools-reps/src/reps/element-node.js

@@ -43,7 +43,10 @@ function ElementNode(props) {
 
   let isInTree = object.preview && object.preview.isConnected === true;
 
-  let baseConfig = {className: "objectBox objectBox-node"};
+  let baseConfig = {
+    "data-link-actor-id": object.actor,
+    className: "objectBox objectBox-node"
+  };
   let inspectIcon;
   if (isInTree) {
     if (onDOMNodeMouseOver) {

packages/devtools-reps/src/reps/error.js

@@ -42,7 +42,10 @@ function ErrorRep(props) {
     content = `${content}\nStack trace:\n${preview.stack}`;
   }
 
-  return safeObjectLink(props, {className: "objectBox-stackTrace"}, content);
+  return safeObjectLink(props, {
+    "data-link-actor-id": object.actor,
+    className: "objectBox-stackTrace",
+  }, content);
 }
 
 // Registration

packages/devtools-reps/src/reps/function.js

@@ -29,9 +29,13 @@ function FunctionRep(props) {
   let grip = props.object;
 
   return (
-    // Set dir="ltr" to prevent function parentheses from
-    // appearing in the wrong direction
-    span({dir: "ltr", className: "objectBox objectBox-function"},
+    span({
+      "data-link-actor-id": grip.actor,
+      className: "objectBox objectBox-function",
+      // Set dir="ltr" to prevent function parentheses from
+      // appearing in the wrong direction
+      dir: "ltr",
+    },
       getTitle(props, grip),
       summarizeFunction(grip),
       "(",

packages/devtools-reps/src/reps/grip-array.js

@@ -45,7 +45,9 @@ function GripArray(props) {
   if (mode === MODE.TINY) {
     let objectLength = getLength(object);
     let isEmpty = objectLength === 0;
-    items = [span({className: "length"}, isEmpty ? "" : objectLength)];
+    items = [span({
+      className: "length",
+    }, isEmpty ? "" : objectLength)];
     brackets = needSpace(false);
   } else {
     let max = maxLengthMap.get(mode);
@@ -57,6 +59,7 @@ function GripArray(props) {
 
   return (
     span({
+      "data-link-actor-id": object.actor,
       className: "objectBox objectBox-array"},
       title,
       safeObjectLink(props, {

packages/devtools-reps/src/reps/grip-map.js

@@ -37,18 +37,21 @@ function GripMap(props) {
     object,
   } = props;
 
+  const config = {
+    "data-link-actor-id": object.actor,
+    className: "objectBox objectBox-object",
+  };
+
   if (mode === MODE.TINY) {
     return (
-      span({className: "objectBox objectBox-object"},
-        getTitle(props, object)
-      )
+      span(config, getTitle(props, object))
     );
   }
 
   let propsArray = safeEntriesIterator(props, object, maxLengthMap.get(mode));
 
   return (
-    span({className: "objectBox objectBox-object"},
+    span(config,
       getTitle(props, object),
       safeObjectLink(props, {
         className: "objectLeftBrace",

packages/devtools-reps/src/reps/grip.js

@@ -39,18 +39,21 @@ function GripRep(props) {
     object,
   } = props;
 
+  const config = {
+    "data-link-actor-id": object.actor,
+    className: "objectBox objectBox-object"
+  };
+
   if (mode === MODE.TINY) {
     return (
-      span({className: "objectBox objectBox-object"},
-        getTitle(props, object)
-      )
+      span(config, getTitle(props, object))
     );
   }
 
   let propsArray = safePropIterator(props, object, maxLengthMap.get(mode));
 
   return (
-    span({className: "objectBox objectBox-object"},
+    span(config,
       getTitle(props, object),
       safeObjectLink(props, {
         className: "objectLeftBrace",