1021925 - Make frames in stack traces expandable to display the frame with a few lines surrounding it

Status: NEW

(DevTools :: Console, enhancement, P3)

Description

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Whenever we put a stack trace in the console's output, we should make each frame expandable so that you can see the line from that stack frame plus some context around it.

In crappy ascii art, here is a mock up:

  Error: this is an error
  > [e-mail]:12:34
  > [e-mail]:22:12

And then if you clicked on the first stack frame, it would get expanded to something like this:

  Error: this is an error
  V [e-mail]:12:34
       9| var count = 0;
      10| for (var i = 0; i < arr.length; i++) {
      11|   if (errorCondition) {
    **12|     throw new Error("Error: this is an error");
      13|   }
      14|   count += getCount(arr[i]);
      15| }
  > [e-mail]:22:12

And if you clicked on the second stack frame:

  Error: this is an error
  V [e-mail]:12:34
       9| var count = 0;
      10| for (var i = 0; i < arr.length; i++) {
      11|   if (errorCondition) {
    **12|     throw new Error("Error: this is an error");
      13|   }
      14|   count += getCount(arr[i]);
      15| }
  V [e-mail]:22:12
      19| // This is the foo bar baz...
      20| function baz(x, y, z) {
      21|   if (needToCallFoo()) {
    **22|     foo(x, y, z);
      23|   }
      24|   return true;
      25| }

The "**" is just to show that the actual line from the stack frame would be highlighted.

Comment 1

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Depending on bug 1137384 so that sources and their contents are easily retrievable from actors other than the ThreadActor.