Modify the title for ObjectWithText rep.

Fix #684

Author: weilonge

packages/devtools-reps/src/reps/object-with-text.js

@@ -11,6 +11,8 @@ const {
   wrapRender,
 } = require("./rep-utils");
 
+const String = require("./string").rep;
+
 const dom = require("react-dom-factories");
 const { span } = dom;
 
@@ -24,11 +26,14 @@ ObjectWithText.propTypes = {
 function ObjectWithText(props) {
   let grip = props.object;
   return (
-    span({
-      "data-link-actor-id": grip.actor,
-      className: "objectBox objectBox-" + getType(grip)
-    },
-      span({className: "objectPropValue"}, getDescription(grip))
+    span(
+      {
+        "data-link-actor-id": grip.actor,
+        className: "objectTitle objectBox objectBox-" + getType(grip)
+      },
+      getType(grip),
+      " ",
+      getDescription(grip)
     )
   );
 }
@@ -38,7 +43,9 @@ function getType(grip) {
 }
 
 function getDescription(grip) {
-  return "\"" + grip.preview.text + "\"";
+  return String({
+    object: grip.preview.text,
+  });
 }
 
 // Registration

packages/devtools-reps/src/reps/stubs/object-with-text.js

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const stubs = new Map();
-stubs.set("ObjectWithText", {
+stubs.set("ShadowRule", {
   "type": "object",
   "class": "CSSStyleRule",
   "actor": "server1.conn3.obj273",
@@ -17,4 +17,19 @@ stubs.set("ObjectWithText", {
   }
 });
 
+stubs.set("CSSMediaRule", {
+  "type": "object",
+  "actor": "server2.conn8.child17/obj30",
+  "class": "CSSMediaRule",
+  "extensible": true,
+  "frozen": false,
+  "sealed": false,
+  "ownPropertyLength": 0,
+  "preview": {
+    "kind": "ObjectWithText",
+    "text": "(min-height: 680px), screen and (orientation: portrait)"
+  }
+
+});
+
 module.exports = stubs;

packages/devtools-reps/src/reps/tests/object-with-text.js

@@ -15,8 +15,8 @@ const {
 const stubs = require("../stubs/object-with-text");
 const { ObjectWithText, Rep } = REPS;
 
-describe("Object with text", () => {
-  const gripStub = stubs.get("ObjectWithText");
+describe("Object with text - CSSStyleRule", () => {
+  const gripStub = stubs.get("ShadowRule");
 
   // Test that correct rep is chosen
   it("selects ObjectsWithText Rep", () => {
@@ -29,7 +29,28 @@ describe("Object with text", () => {
       object: gripStub
     }));
 
-    expect(renderedComponent.text()).toEqual("\".Shadow\"");
+    expect(renderedComponent.text()).toEqual("CSSStyleRule \".Shadow\"");
     expectActorAttribute(renderedComponent, gripStub.actor);
   });
 });
+
+describe("Object with text - CSSMediaRule", () => {
+  const gripStub = stubs.get("CSSMediaRule");
+
+  // Test that correct rep is chosen
+  it("selects ObjectsWithText Rep", () => {
+    expect(getRep(gripStub)).toEqual(ObjectWithText.rep);
+  });
+
+  // Test rendering
+  it("renders with the correct text content", () => {
+    const renderedComponent = shallow(Rep({
+      object: gripStub
+    }));
+
+    const S = "CSSMediaRule \"(min-height: 680px), screen and (orientation: portrait)\"";
+    expect(renderedComponent.text()).toEqual(S);
+    expectActorAttribute(renderedComponent, gripStub.actor);
+  });
+});
+

packages/devtools-reps/src/reps/tests/object.js

@@ -253,7 +253,7 @@ describe("Object - noGrip prop", () => {
 
   it("ObjectWithText grip", () => {
     const stubs = require("../stubs/object-with-text");
-    expect(getRep(stubs.get("ObjectWithText"), undefined, true)).toBe(Obj.rep);
+    expect(getRep(stubs.get("ShadowRule"), undefined, true)).toBe(Obj.rep);
   });
 
   it("ObjectWithURL grip", () => {