Fix type checks and display for JS interop types.

tests/lib_strong/html/debugger_test.dart

 /// 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;
 
@@ skipping 44 matching lines @@
 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);
 
+@JS('ExampleJSClass')
+class ExampleJSClass<T> {
+  external factory ExampleJSClass(T x);
+  external T get x;
+}
+
 // 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>';
   }
@@ skipping 35 matching lines @@
     ret.addAll(extractNestedFormattedObjects(js_util.getProperty(json, name)));
   }
   return ret;
 }
 
 main() {
   if (devtoolsFormatters == null) {
     print("Warning: no devtools custom formatters specified. Skipping tests.");
     return;
   }
+  document.body.append(new ScriptElement()
+    ..type = 'text/javascript'
+    ..innerHtml = r"""
+window.ExampleJSClass = function ExampleJSClass(x) {
+  this.x = x;
+};
+""");
+
   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
@@ skipping 141 matching lines @@
     });
   });
 
   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());
   });
 
+  group('Generics formatting', () {
+    addNestedFormatterGoldens(
+        'TestGenericClass', new TestGenericClass<int, List>(42));
+    addNestedFormatterGoldens(
+        'TestGenericClassJSInterop',
+        new TestGenericClass<ExampleJSClass<String>, int>(
+            new ExampleJSClass("Hello")));
+  });
+
   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
@@ skipping 1554 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 3385 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"
+                    }
+                }
+            ]
+        ]
+    ]
+]
+-----------------------------------
 """;

[vsm, 2017/03/31 15:14:08]

How about putting this literal into a helper file to make it a little easier to
rebase expectations?

Anything else we can do to make it easier to regen that?  Perhaps instead of
dumping the diff, print instructions on what to check / how to reset if ok.

[Jacob, 2017/04/01 00:51:13]

Made it a little easier by adding a button to copy to the clipboard. Still not
great but easier. Not that many changes should really be breaking the golden
file.Just contact me if your change breaks it and I'll re-generate. It is pretty
easy now.