Visual alignment on Error stacktrace.

Making it match the stacktrace existing in mozilla-central.

Author: nchevobbe

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

@@ -142,9 +142,9 @@ function getStacktraceElements(props, preview) {
         className: "objectBox-stackTrace-location",
         onClick: onLocationClick,
         title: onLocationClick
-          ? "View source in debugger"
+          ? "View source in debugger → " + location
           : undefined,
-      }, ` (${location})`));
+      }, location));
     });
 
   return span({

packages/devtools-reps/src/reps/reps.css

@@ -15,7 +15,6 @@
   --node-color: var(--theme-highlight-purple);
   --reference-color: var(--theme-highlight-blue);
   --comment-node-color: var(--theme-comment);
-  --stack-function-color: var(--theme-highlight-red);
 }
 
 .theme-firebug {
@@ -77,11 +76,14 @@
 }
 
 .objectBox-function,
-.objectBox-stackTrace,
 .objectBox-profile {
   color: var(--object-color);
 }
 
+.objectBox-stackTrace {
+  color: var(--error-color);
+}
+
 .objectBox-stackTrace-grid {
   display: inline-grid;
   grid-template-columns: auto auto;
@@ -90,14 +92,30 @@
 
 .objectBox-stackTrace-fn::before {
   content: "\3BB"; /* The "lambda" symbol */
-  color: var(--theme-body-color);
   display: inline-block;
   margin: 0 0.3em;
 }
 
 .objectBox-stackTrace-fn {
-  color: var(--stack-function-color);
+  color: var(--console-output-color);
   padding-inline-start: 17px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-inline-end: 5px;
+}
+
+.objectBox-stackTrace-location {
+  color: var(--frame-link-source, currentColor);
+  direction: rtl;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: end;
+}
+
+.objectBox-stackTrace-location:hover {
+  text-decoration: underline;
 }
 
 .objectBox-stackTrace-location {

packages/devtools-reps/src/reps/tests/__snapshots__/error.js.snap

@@ -22,7 +22,7 @@ exports[`Error - Eval error renders with expected text for an EvalError 1`] = `
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (debugger eval code:10:13)
+      debugger eval code:10:13
     </span>
   </span>
 </span>
@@ -50,7 +50,7 @@ exports[`Error - Internal error renders with expected text for an InternalError
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (debugger eval code:11:13)
+      debugger eval code:11:13
     </span>
   </span>
 </span>
@@ -78,7 +78,7 @@ exports[`Error - Multi line stack error renders with expected text for Error obj
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (debugger eval code:6:15)
+      debugger eval code:6:15
     </span>
     <span
       className="objectBox-stackTrace-fn"
@@ -90,7 +90,7 @@ exports[`Error - Multi line stack error renders with expected text for Error obj
       className="objectBox-stackTrace-location"
       key="location1"
     >
-       (debugger eval code:3:3)
+      debugger eval code:3:3
     </span>
     <span
       className="objectBox-stackTrace-fn"
@@ -102,7 +102,7 @@ exports[`Error - Multi line stack error renders with expected text for Error obj
       className="objectBox-stackTrace-location"
       key="location2"
     >
-       (debugger eval code:8:1)
+      debugger eval code:8:1
     </span>
   </span>
 </span>
@@ -130,7 +130,7 @@ exports[`Error - Range error renders with expected text for RangeError 1`] = `
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (debugger eval code:12:13)
+      debugger eval code:12:13
     </span>
   </span>
 </span>
@@ -158,7 +158,7 @@ exports[`Error - Reference error renders with expected text for ReferenceError 1
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (debugger eval code:13:13)
+      debugger eval code:13:13
     </span>
   </span>
 </span>
@@ -186,7 +186,7 @@ exports[`Error - Simple error renders with expected text for simple error 1`] =
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (debugger eval code:1:13)
+      debugger eval code:1:13
     </span>
   </span>
 </span>
@@ -214,7 +214,7 @@ exports[`Error - Syntax error renders with expected text for SyntaxError 1`] = `
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (debugger eval code:14:13)
+      debugger eval code:14:13
     </span>
   </span>
 </span>
@@ -242,7 +242,7 @@ exports[`Error - Type error renders with expected text for TypeError 1`] = `
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (debugger eval code:15:13)
+      debugger eval code:15:13
     </span>
   </span>
 </span>
@@ -270,7 +270,7 @@ exports[`Error - URI error renders with expected text for URIError 1`] = `
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (debugger eval code:16:13)
+      debugger eval code:16:13
     </span>
   </span>
 </span>
@@ -307,7 +307,7 @@ exports[`Error - base-loader.js renders as expected without mode 1`] = `
       className="objectBox-stackTrace-location"
       key="location0"
     >
-       (resource://devtools/shared/client/debugger-client.js:856:9)
+      resource://devtools/shared/client/debugger-client.js:856:9
     </span>
     <span
       className="objectBox-stackTrace-fn"
@@ -319,7 +319,7 @@ exports[`Error - base-loader.js renders as expected without mode 1`] = `
       className="objectBox-stackTrace-location"
       key="location1"
     >
-       (resource://devtools/shared/transport/transport.js:569:13)
+      resource://devtools/shared/transport/transport.js:569:13
     </span>
     <span
       className="objectBox-stackTrace-fn"
@@ -331,7 +331,7 @@ exports[`Error - base-loader.js renders as expected without mode 1`] = `
       className="objectBox-stackTrace-location"
       key="location2"
     >
-       (resource://devtools/shared/ThreadSafeDevToolsUtils.js:109:14)
+      resource://devtools/shared/ThreadSafeDevToolsUtils.js:109:14
     </span>
     <span
       className="objectBox-stackTrace-fn"
@@ -343,7 +343,7 @@ exports[`Error - base-loader.js renders as expected without mode 1`] = `
       className="objectBox-stackTrace-location"
       key="location3"
     >
-       (resource://devtools/shared/ThreadSafeDevToolsUtils.js:109:14)
+      resource://devtools/shared/ThreadSafeDevToolsUtils.js:109:14
     </span>
   </span>
 </span>

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

@@ -347,7 +347,8 @@ describe("Error - stacktrace location click", () => {
     const locations = renderedComponent.find(".objectBox-stackTrace-location");
     expect(locations.exists()).toBeTruthy();
 
-    expect(locations.first().prop("title")).toBe("View source in debugger");
+    expect(locations.first().prop("title")).toBe("View source in debugger → " +
+      "resource://devtools/shared/client/debugger-client.js:856:9");
     locations.first().simulate("click", {
       type: "click",
       stopPropagation: () => {},
@@ -359,7 +360,8 @@ describe("Error - stacktrace location click", () => {
     expect(mockCall.line).toEqual(856);
     expect(mockCall.column).toEqual(9);
 
-    expect(locations.last().prop("title")).toBe("View source in debugger");
+    expect(locations.last().prop("title")).toBe("View source in debugger → " +
+      "resource://devtools/shared/ThreadSafeDevToolsUtils.js:109:14");
     locations.last().simulate("click", {
       type: "click",
       stopPropagation: () => {},