'$this' appears in variables window on a breakpoint inside an extension method

[annagrin]

$this is a JS name for dart this - need to use debug symbols to map it properly.
Not sure where return variable is coming from, it should not be visible either (it is not in VM).

Related: #1371

Possible workaround: remove $ in the display window for now.
@nshahan some ddc questions:

• would it break any other cases, for example, can $this exist at all in dart, or map to something other than this?
• can we apply this in general, i.e. will removing $ from JS name always map to its dart name?

[nshahan]

Instance extension methods in Dart are treated as syntactic sugar for a static method that takes an instance of the "on" type as the first argument of the method. If we ignore the fact that as a user you can't name a variable begining with '#' we could imagine the de-sugaring of this example code as:

static int parseInt(String #this) {
    var ret = int.parse(#this);
    return ret;
  }

At this breakpoint shown in the screenshot the Javascript has multiple variables in scope including this and $this.

this is a reference to the library object that contains the method. Ideally it should not be visible in the debug tools since it refers to a variable that isn't part of the original Dart program.

$this is a reference to the method argument #this from the Dart code generated by the CFE for the extension method. It represents the same value you would access via this in the Dart code inside the extension method.

Ideally we would solve this with the ongoing debug symbols work. We should map this from Dart to $this in Javascript inside the scope of an instance extension method (there is no this in the extensions for static methods).

It could be difficult to implement a temporary fix in the meantime because we need to be careful about breaking the this variable in normal class methods. One possibility would be a heuristic based on the name of the method for the scope we are in. The extension methods get names in the Javascript like: <extension name>$<numeric digits><method name>. example: NumberParsing$124parseInt

[annagrin]

It could be difficult to implement a temporary fix in the meantime because we need to be careful about breaking the this variable in normal class methods. One possibility would be a heuristic based on the name of the method for the scope we are in. The extension methods get names in the Javascript like: $. example: NumberParsing$124parseInt

Since the temporary fix is non-trivial, and the issue is just showing an extra $, I would wait for the symbols work in this case. Thanks @nshahan for looking into that!