Fix type checks and display for JS interop types.

tests/lib_strong/html/debugger_test_golden.txt

-/// Debugger custom formatter tests.
-/// If the tests fail, paste the expected output into the [expectedGolden]
-/// string literal in this file and audit the diff to ensure changes are
-/// expected.
-///
-/// Currently only DDC supports debugging objects with custom formatters
-/// but it is reasonable to add support to Dart2JS in the future.
-@JS()
-library debugger_test;
-
-import 'dart:html';
-import 'package:js/js.dart';
-import 'package:js/js_util.dart' as js_util;
-
-import 'package:expect/minitest.dart';
-
-import 'dart:_debugger' as _debugger;
-
-class TestClass {
-  String name = 'test class';
-  int date;
-  static List<int> foo = [1, 2, 3, 4];
-  static String greeting = 'Hello world';
-  static Object bar = new Object();
-
-  static exampleStaticMethod(x) => x * 2;
-
-  TestClass(this.date);
-
-  String nameAndDate() => '$name on day $date';
-
-  int last(List<int> list) => list.last;
-
-  void addOne(String name) {
-    name = '${name}1';
-  }
-
-  get someInt => 42;
-  get someString => "Hello world";
-  get someObject => this;
-
-  Object returnObject() => bar;
-}
-
-class TestGenericClass<X, Y> {
-  TestGenericClass(this.x);
-  X x;
-}
-
-@JS('Object.getOwnPropertyNames')
-external List getOwnPropertyNames(obj);
-
-@JS('devtoolsFormatters')
-external List get _devtoolsFormatters;
-List get devtoolsFormatters => _devtoolsFormatters;
-
-@JS('JSON.stringify')
-external stringify(value, [Function replacer, int space]);
-
-// TODO(jacobr): this is only valid if the legacy library loader is used.
-// We need a solution that works with all library loaders.
-@JS('dart_library.import')
-external importDartLibrary(String path);
-
-// Replacer normalizes file names that could vary depending on the test runner.
-// styles.
-replacer(String key, value) {
-  // The values for keys with name 'object' may be arbitrary Dart nested
-  // Objects so are not safe to stringify.
-  if (key == 'object') return '<OBJECT>';
-  if (value is String) {
-    if (value.contains('dart_sdk.js')) return '<DART_SDK>';
-    if (new RegExp(r'[.](js|dart|html)').hasMatch(value)) return '<FILE>';
-  }
-  return value;
-}
-
-String format(value) {
-  // Avoid double-escaping strings.
-  if (value is String) return value;
-  return stringify(value, replacer, 4);
-}
-
-class FormattedObject {
-  FormattedObject(this.object, this.config);
-
-  Object object;
-  Object config;
-}
-
-/// Extract all object tags from a json ml expression to enable
-/// calling the custom formatter on the extracted object tag.
-List<FormattedObject> extractNestedFormattedObjects(json) {
-  var ret = <FormattedObject>[];
-  if (json is String || json is bool || json is num) return ret;
-  if (json is List) {
-    for (var e in json) {
-      ret.addAll(extractNestedFormattedObjects(e));
-    }
-    return ret;
-  }
-
-  for (var name in getOwnPropertyNames(json)) {
-    if (name == 'object') {
-      // Found a nested formatted object.
-      ret.add(new FormattedObject(js_util.getProperty(json, 'object'),
-          js_util.getProperty(json, 'config')));
-      return ret;
-    }
-    ret.addAll(extractNestedFormattedObjects(js_util.getProperty(json, name)));
-  }
-  return ret;
-}
-
-main() {
-  if (devtoolsFormatters == null) {
-    print("Warning: no devtools custom formatters specified. Skipping tests.");
-    return;
-  }
-  var _devtoolsFormatter = devtoolsFormatters.first;
-
-  var actual = new StringBuffer();
-
-  // Accumulate the entire expected custom formatted data as a single
-  // massive string buffer so it is simple to update expectations when
-  // modifying the formatting code.
-  // Otherwise a small formatting change would result in tweaking lots
-  // of expectations.
-  // The verify golden match test cases does the final comparison of golden
-  // to expected output.
-  addGolden(String name, value) {
-    actual.write('Test: $name\n'
-        'Value:\n'
-        '${format(value)}\n'
-        '-----------------------------------\n');
-  }
-
-  addFormatterGoldens(String name, object, [config]) {
-    addGolden(
-        '$name formatting header', _devtoolsFormatter.header(object, config));
-    addGolden('$name formatting body', _devtoolsFormatter.body(object, config));
-  }
-
-  // Include goldens for the nested [[class]] definition field.
-  addNestedFormatterGoldens(String name, obj) {
-    addGolden('$name instance header', _devtoolsFormatter.header(obj, null));
-    var body = _devtoolsFormatter.body(obj, null);
-    addGolden('$name instance body', body);
-
-    var nestedObjects = extractNestedFormattedObjects(body);
-    var clazz = nestedObjects.last;
-    // By convention assume last nested object is the [[class]] definition
-    // describing the object's static members and inheritance hierarchy
-    addFormatterGoldens('$name definition', clazz.object, clazz.config);
-  }
-
-  // Include goldens for the nested [[class]] definition field.
-  addAllNestedFormatterGoldens(String name, obj) {
-    addGolden('$name header', _devtoolsFormatter.header(obj, null));
-    var body = _devtoolsFormatter.body(obj, null);
-    addGolden('$name body', body);
-
-    var nestedObjects = extractNestedFormattedObjects(body);
-    var i = 0;
-    for (var nested in nestedObjects) {
-      addFormatterGoldens('$name child $i', nested.object, nested.config);
-      i++;
-    }
-  }
-
-  group('Iterable formatting', () {
-    var list = ['foo', 'bar', 'baz'];
-    var iterable = list.map((x) => x * 5);
-    addFormatterGoldens('List<String>', list);
-
-    var listOfObjects = <Object>[42, 'bar', true];
-
-    addNestedFormatterGoldens('List<Object>', listOfObjects);
-
-    var largeList = <int>[];
-    for (var i = 0; i < 200; ++i) {
-      largeList.add(i * 10);
-    }
-    addNestedFormatterGoldens('List<int> large', largeList);
-
-    addNestedFormatterGoldens('Iterable', iterable);
-
-    var s = new Set()..add("foo")..add(42)..add(true);
-    addNestedFormatterGoldens('Set', s);
-  });
-
-  group('Map formatting', () {
-    Map<String, int> foo = new Map();
-    foo = {'1': 2, 'x': 4, '5': 6};
-
-    addFormatterGoldens('Map<String, int>', foo);
-    test('hasBody', () {
-      expect(_devtoolsFormatter.hasBody(foo, null), isTrue);
-    });
-
-    Map<dynamic, dynamic> dynamicMap = new Map();
-    dynamicMap = {1: 2, 'x': 4, true: "truthy"};
-
-    addNestedFormatterGoldens('Map<dynamic, dynamic>', dynamicMap);
-  });
-
-  group('Function formatting', () {
-    adder(int a, int b) => a + b;
-
-    addFormatterGoldens('Function', adder);
-
-    test('hasBody', () {
-      expect(_devtoolsFormatter.hasBody(adder, null), isTrue);
-    });
-
-    addEventListener(String name, bool callback(Event e)) => null;
-
-    addFormatterGoldens('Function with functon arguments', addEventListener);
-
-    // Closure
-    addGolden('dart:html method', window.addEventListener);
-
-    // Get a reference to the JS constructor for a Dart class.
-    // This tracks a regression bug where overly verbose and confusing output
-    // was shown for this case.
-    var testClass = new TestClass(17);
-    var dartConstructor = js_util.getProperty(
-        js_util.getProperty(testClass, '__proto__'), 'constructor');
-    addFormatterGoldens('Raw reference to dart constructor', dartConstructor);
-  });
-
-  group('Object formatting', () {
-    var object = new Object();
-    addFormatterGoldens('Object', object);
-    test('hasBody', () {
-      expect(_devtoolsFormatter.hasBody(object, null), isTrue);
-    });
-  });
-
-  group('Type formatting', () {
-    addFormatterGoldens('Type TestClass', TestClass);
-    addFormatterGoldens('Type HttpRequest', HttpRequest);
-  });
-
-  group('JS interop object formatting', () {
-    var object = js_util.newObject();
-    js_util.setProperty(object, 'foo', 'bar');
-    // Make sure we don't apply the Dart custom formatter to JS interop objects.
-    expect(_devtoolsFormatter.header(object, null), isNull);
-  });
-
-  group('Module formatting', () {
-    var moduleNames = _debugger.getModuleNames();
-    var testModuleName = "lib/html/debugger_test";
-    expect(moduleNames.contains(testModuleName), isTrue);
-
-    addAllNestedFormatterGoldens(
-        'Test library Module', _debugger.getModuleLibraries(testModuleName));
-  });
-
-  group('StackTrace formatting', () {
-    StackTrace stack;
-    try {
-      throw new Error();
-    } catch (exception, stackTrace) {
-      stack = stackTrace;
-    }
-    addFormatterGoldens('StackTrace', stack);
-    test('hasBody', () {
-      expect(_devtoolsFormatter.hasBody(stack, null), isTrue);
-    });
-  });
-
-  group('Class formatting', () {
-    addNestedFormatterGoldens('TestClass', new TestClass(17));
-    addNestedFormatterGoldens('MouseEvent', new MouseEvent("click"));
-    // This is a good class to test as it has statics and a deep inheritance heirarchy
-    addNestedFormatterGoldens('HttpRequest', new HttpRequest());
-  });
-
-  test('verify golden match', () {
-    // Warning: all other test groups must have run for this test to be meaningful
-    print("Actual:##############\n$actual\n#################");
-
-    expect(actual.toString().trim(), equals(expectedGolden().trim()));
-  });
-}
-
-/// The golden custom formatter output is placed at the bottom of the file
-/// to simplify replacing the  golden data when the custom formatter code is
-/// changed.
-///
-/// This value is placed in a function rather than a field to avoid a recursive
-/// program that prints itself issue as the golden includes the formatter output
-/// for this library
-String expectedGolden() => r"""Test: List<String> formatting header
+Test: List<String> formatting header
 Value:
 [
     "span",
     {
         "style": "background-color: #d9edf7;"
     },
     "JSArray<String> length 3"
 ]
 -----------------------------------
 Test: List<String> formatting body
@@ skipping 1538 matching lines @@
     [
         "li",
         {
             "style": "padding-left: 13px;"
         },
         [
             "span",
             {
                 "style": "color: rgb(136, 19, 145); margin-right: -13px"
             },
+            "toString: "
+        ],
+        [
+            "span",
+            {
+                "style": "margin-left: 13px"
+            },
+            [
+                "object",
+                {
+                    "object": "<OBJECT>",
+                    "config": {
+                        "name": "none"
+                    }
+                }
+            ]
+        ]
+    ],
+    [
+        "li",
+        {
+            "style": "padding-left: 13px;"
+        },
+        [
+            "span",
+            {
+                "style": "color: rgb(136, 19, 145); margin-right: -13px"
+            },
             "where: "
         ],
         [
             "span",
             {
                 "style": "margin-left: 13px"
             },
             [
                 "object",
                 {
@@ skipping 1522 matching lines @@
     [
         "li",
         {
             "style": "padding-left: 13px;"
         },
         [
             "span",
             {
                 "style": "color: rgb(136, 19, 145); margin-right: -13px"
             },
+            "toString: "
+        ],
+        [
+            "span",
+            {
+                "style": "margin-left: 13px"
+            },
+            [
+                "object",
+                {
+                    "object": "<OBJECT>",
+                    "config": {
+                        "name": "none"
+                    }
+                }
+            ]
+        ]
+    ],
+    [
+        "li",
+        {
+            "style": "padding-left: 13px;"
+        },
+        [
+            "span",
+            {
+                "style": "color: rgb(136, 19, 145); margin-right: -13px"
+            },
             "where: "
         ],
         [
             "span",
             {
                 "style": "margin-left: 13px"
             },
             [
                 "object",
                 {
@@ skipping 1389 matching lines @@
     ]
 ]
 -----------------------------------
 Test: Map<dynamic, dynamic> instance header
 Value:
 [
     "span",
     {
         "style": "background-color: #d9edf7;"
     },
-    "JsLinkedHashMap<Object, Object> length 3"
+    "JsLinkedHashMap length 3"
 ]
 -----------------------------------
 Test: Map<dynamic, dynamic> instance body
 Value:
 [
     "ol",
     {
         "style": "list-style-type: none;padding-left: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 12px;"
     },
     [
@@ skipping 110 matching lines @@
     ]
 ]
 -----------------------------------
 Test: Map<dynamic, dynamic> definition formatting header
 Value:
 [
     "span",
     {
         "style": "background-color: #d9edf7;"
     },
-    "JsLinkedHashMap<Object, Object> implements LinkedHashMap<Object, Object>, InternalMap<Object, Object>"
+    "JsLinkedHashMap implements LinkedHashMap, InternalMap"
 ]
 -----------------------------------
 Test: Map<dynamic, dynamic> definition formatting body
 Value:
 [
     "ol",
     {
         "style": "list-style-type: none;padding-left: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 12px;"
     },
     [
@@ skipping 453 matching lines @@
     [
         "li",
         {
             "style": "padding-left: 13px;"
         },
         [
             "span",
             {
                 "style": "color: rgb(136, 19, 145); margin-right: -13px"
             },
+            "toString: "
+        ],
+        [
+            "span",
+            {
+                "style": "margin-left: 13px"
+            },
+            [
+                "object",
+                {
+                    "object": "<OBJECT>",
+                    "config": {
+                        "name": "none"
+                    }
+                }
+            ]
+        ]
+    ],
+    [
+        "li",
+        {
+            "style": "padding-left: 13px;"
+        },
+        [
+            "span",
+            {
+                "style": "color: rgb(136, 19, 145); margin-right: -13px"
+            },
             "_addHashTableEntry: "
         ],
         [
             "span",
             {
                 "style": "margin-left: 13px"
             },
             [
                 "object",
                 {
@@ skipping 944 matching lines @@
             [
                 "object",
                 {
                     "object": "<OBJECT>",
                     "config": {
                         "name": "none"
                     }
                 }
             ]
         ]
-    ],
-    [
-        "li",
-        {
-            "style": "padding-left: 13px;"
-        },
-        [
-            "span",
-            {
-                "style": "color: rgb(136, 19, 145); margin-right: -13px"
-            },
-            "expectedGolden: "
-        ],
-        [
-            "span",
-            {
-                "style": "margin-left: 13px"
-            },
-            [
-                "object",
-                {
-                    "object": "<OBJECT>",
-                    "config": {
-                        "name": "none"
-                    }
-                }
-            ]
-        ]
     ]
 ]
 -----------------------------------
 Test: StackTrace formatting header
 Value:
 [
     "span",
     {
         "style": "background-color: #d9edf7;"
     },
@@ skipping 98 matching lines @@
             "style": "padding-left: 13px;"
         },
         [
             "span",
             {},
             [
                 "span",
                 {
                     "style": ""
                 },
-                "<FILE>"
+                "Generator.next (<anonymous>)"
             ]
         ]
     ],
     [
         "li",
         {
             "style": "padding-left: 13px;"
         },
         [
             "span",
             {},
             [
                 "span",
                 {
                     "style": ""
                 },
-                "<FILE>"
+                "<DART_SDK>"
             ]
         ]
     ],
     [
         "li",
         {
             "style": "padding-left: 13px;"
         },
         [
             "span",
             {},
             [
                 "span",
                 {
                     "style": ""
                 },
-                "<FILE>"
+                "<DART_SDK>"
             ]
         ]
     ],
     [
         "li",
         {
             "style": "padding-left: 13px;"
         },
         [
             "span",
             {},
             [
                 "span",
                 {
                     "style": ""
                 },
-                "<FILE>"
+                "<DART_SDK>"
             ]
         ]
     ],
     [
         "li",
         {
             "style": "padding-left: 13px;"
         },
         [
             "span",
             {},
             [
                 "span",
                 {
                     "style": ""
                 },
-                "<FILE>"
+                "<DART_SDK>"
             ]
         ]
     ],
     [
         "li",
         {
             "style": "padding-left: 13px;"
         },
         [
             "span",
             {},
             [
                 "span",
                 {
                     "style": ""
                 },
-                "<FILE>"
+                "<DART_SDK>"
             ]
         ]
     ]
 ]
 -----------------------------------
 Test: TestClass instance header
 Value:
 [
     "span",
     {
@@ skipping 2189 matching lines @@
                     "object": "<OBJECT>",
                     "config": {
                         "name": "asClass"
                     }
                 }
             ]
         ]
     ]
 ]
 -----------------------------------
-""";
+Test: TestGenericClass instance header
+Value:
+[
+    "span",
+    {
+        "style": "background-color: #d9edf7;"
+    },
+    "TestGenericClass<int, List>"
+]
+-----------------------------------
+Test: TestGenericClass instance body
+Value:
+[
+    "ol",
+    {
+        "style": "list-style-type: none;padding-left: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 12px;"
+    },
+    [
+        "li",
+        {
+            "style": "padding-left: 13px;"
+        },
+        [
+            "span",
+            {},
+            [
+                "span",
+                {
+                    "style": "color: rgb(136, 19, 145); margin-right: -13px"
+                },
+                "x: "
+            ],
+            [
+                "span",
+                {
+                    "style": "margin-left: 13px"
+                },
+                "42"
+            ]
+        ]
+    ],
+    [
+        "li",
+        {
+            "style": "padding-left: 13px;"
+        },
+        [
+            "span",
+            {
+                "style": "color: rgb(136, 19, 145); margin-right: -13px"
+            },
+            "[[class]]: "
+        ],
+        [
+            "span",
+            {
+                "style": "margin-left: 13px"
+            },
+            [
+                "object",
+                {
+                    "object": "<OBJECT>",
+                    "config": {
+                        "name": "asClass"
+                    }
+                }
+            ]
+        ]
+    ]
+]
+-----------------------------------
+Test: TestGenericClass definition formatting header
+Value:
+[
+    "span",
+    {
+        "style": "background-color: #d9edf7;"
+    },
+    "TestGenericClass<int, List>"
+]
+-----------------------------------
+Test: TestGenericClass definition formatting body
+Value:
+[
+    "ol",
+    {
+        "style": "list-style-type: none;padding-left: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 12px;"
+    },
+    [
+        "li",
+        {
+            "style": "padding-left: 13px;"
+        },
+        [
+            "span",
+            {
+                "style": "color: rgb(136, 19, 145); margin-right: -13px"
+            },
+            "[[base class]]: "
+        ],
+        [
+            "span",
+            {
+                "style": "margin-left: 13px"
+            },
+            [
+                "object",
+                {
+                    "object": "<OBJECT>",
+                    "config": {
+                        "name": "asClass"
+                    }
+                }
+            ]
+        ]
+    ]
+]
+-----------------------------------
+Test: TestGenericClassJSInterop instance header
+Value:
+[
+    "span",
+    {
+        "style": "background-color: #d9edf7;"
+    },
+    "TestGenericClass<JSObject<ExampleJSClass>, int>"
+]
+-----------------------------------
+Test: TestGenericClassJSInterop instance body
+Value:
+[
+    "ol",
+    {
+        "style": "list-style-type: none;padding-left: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 12px;"
+    },
+    [
+        "li",
+        {
+            "style": "padding-left: 13px;"
+        },
+        [
+            "span",
+            {
+                "style": "color: rgb(136, 19, 145); margin-right: -13px"
+            },
+            "x: "
+        ],
+        [
+            "span",
+            {
+                "style": "margin-left: 13px"
+            },
+            [
+                "object",
+                {
+                    "object": "<OBJECT>",
+                    "config": {
+                        "name": "none"
+                    }
+                }
+            ]
+        ]
+    ],
+    [
+        "li",
+        {
+            "style": "padding-left: 13px;"
+        },
+        [
+            "span",
+            {
+                "style": "color: rgb(136, 19, 145); margin-right: -13px"
+            },
+            "[[class]]: "
+        ],
+        [
+            "span",
+            {
+                "style": "margin-left: 13px"
+            },
+            [
+                "object",
+                {
+                    "object": "<OBJECT>",
+                    "config": {
+                        "name": "asClass"
+                    }
+                }
+            ]
+        ]
+    ]
+]
+-----------------------------------
+Test: TestGenericClassJSInterop definition formatting header
+Value:
+[
+    "span",
+    {
+        "style": "background-color: #d9edf7;"
+    },
+    "TestGenericClass<JSObject<ExampleJSClass>, int>"
+]
+-----------------------------------
+Test: TestGenericClassJSInterop definition formatting body
+Value:
+[
+    "ol",
+    {
+        "style": "list-style-type: none;padding-left: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 12px;"
+    },
+    [
+        "li",
+        {
+            "style": "padding-left: 13px;"
+        },
+        [
+            "span",
+            {
+                "style": "color: rgb(136, 19, 145); margin-right: -13px"
+            },
+            "[[base class]]: "
+        ],
+        [
+            "span",
+            {
+                "style": "margin-left: 13px"
+            },
+            [
+                "object",
+                {
+                    "object": "<OBJECT>",
+                    "config": {
+                        "name": "asClass"
+                    }
+                }
+            ]
+        ]
+    ]
+]
+-----------------------------------
+