Merge pull request #478 from devtools-html/actor-id

Add an actor id data attribute on tree-node

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

@@ -40,18 +40,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",