[scopes] Handle edge-case mappings that come up in TS and other misc …

…bugs (#6092)

src/actions/pause/mapScopes.js

@@ -251,7 +251,7 @@ function isReliableScope(scope: OriginalScope): boolean {
   }
 
   // As determined by fair dice roll.
-  return totalBindings === 0 || unknownBindings / totalBindings < 0.9;
+  return totalBindings === 0 || unknownBindings / totalBindings < 0.1;
 }
 
 function generateClientScope(

src/test/mochitest/browser.ini

@@ -7,6 +7,8 @@ support-files =
   !/devtools/client/commandline/test/helpers.js
   !/devtools/client/shared/test/shared-head.js
   examples/babel/polyfill-bundle.js
+  examples/babel/fixtures/ts-classes/output.js
+  examples/babel/fixtures/ts-classes/output.js.map
   examples/babel/fixtures/eval-source-maps/output.js
   examples/babel/fixtures/eval-source-maps/output.js.map
   examples/babel/fixtures/for-of/output.js

src/test/mochitest/browser_dbg-babel-scopes.js

@@ -7,7 +7,7 @@ requestLongerTimeout(6);
 // Tests loading sourcemapped sources for Babel's compile output.
 
 async function breakpointScopes(dbg, fixture, { line, column }, scopes) {
-  const filename = `fixtures/${fixture}/input.js`;
+  const filename = `fixtures/${fixture}/input.`;
   const fnName = fixture.replace(/-([a-z])/g, (s, c) => c.toUpperCase());
 
   await invokeWithBreakpoint(dbg, fnName, filename, { line, column }, async () => {
@@ -22,6 +22,16 @@ add_task(async function() {
 
   const dbg = await initDebugger("doc-babel.html");
 
+  await breakpointScopes(dbg, "ts-classes", { line: 36, column: 4 }, [
+    "Module",
+    "AnotherThing()",
+    ["anyWindow", "Window"],
+    "AppComponent()",
+    "decoratorFactory()",
+    "ExportedOther()",
+    "fn()",
+  ]);
+
   await breakpointScopes(dbg, "eval-source-maps", { line: 14, column: 4 }, [
     "Block",
     ["three", "5"],

src/test/mochitest/examples/babel/fixtures/ts-classes/input.ts

@@ -0,0 +1,38 @@
+// This file essentially reproduces an example Angular component to map testing,
+// among other typescript edge cases.
+
+import { decoratorFactory } from './src/mod.ts';
+
+@decoratorFactory({
+  selector: 'app-root',
+})
+export class AppComponent {
+  title = 'app';
+}
+
+const fn = arg => {
+  console.log("here");
+};
+fn("arg");
+
+// Un-decorated exported classes present a mapping challege because
+// the class name is mapped to an unhelpful export assignment.
+export class ExportedOther {
+  title = 'app';
+}
+
+class AnotherThing {
+  prop = 4;
+}
+
+const anyWindow = (<any>window);
+anyWindow.Promise.resolve().then(() => {
+  anyWindow.tsClasses = function() {
+    // This file is specifically for testing the mappings of classes and things
+    // above, which means we don't want to include _other_ references to then.
+    // To avoid having them be optimized out, we include a no-op eval.
+    eval("");
+
+    console.log("pause here");
+  };
+});

src/test/mochitest/examples/babel/fixtures/ts-classes/src/mod.ts

@@ -0,0 +1,7 @@
+
+export function decoratorFactory(opts: { selector: string }) {
+  return function decorator(target) {
+    return <any>target;
+  };
+}
+

src/test/mochitest/examples/babel/package.json

@@ -15,6 +15,8 @@
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-preset-env": "^1.6.1",
+    "ts-loader": "3.5",
+    "typescript": "^2.8.3",
     "webpack": "^3.7.1"
   },
   "dependencies": {

src/test/mochitest/examples/babel/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "experimentalDecorators": true
+  },
+  "include": [
+    "fixtures/*/input.ts",
+    "fixtures/*/src/*.ts"
+  ]
+}

src/test/mochitest/examples/babel/webpack.config.js

@@ -9,10 +9,13 @@ const tests = fs.readdirSync(fixtures).map(name => {
 
   const dirname = path.relative(__dirname, path.join(fixtures, name));
 
+  const inputTS = path.join(dirname, "input.ts");
+  const inputJS = path.join(dirname, "input.js");
+
   return {
     name: _.camelCase(name),
     dirname,
-    input: `./${path.join(dirname, "input.js")}`,
+    input: `./${fs.existsSync(inputTS) ? inputTS : inputJS}`,
     output: path.join(dirname, "output.js")
   };
 }).filter(Boolean);
@@ -68,9 +71,9 @@ module.exports = [
       },
       devtool,
       module: {
-        loaders: babelEnabled
-          ? [
-              {
+        loaders: [
+          babelEnabled
+            ? {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader: "babel-loader",
@@ -85,8 +88,14 @@ module.exports = [
                     ])
                 }
               }
-            ]
-          : []
+            : null,
+          {
+            test: /\.tsx?$/,
+            exclude: /node_modules/,
+            loader: "ts-loader",
+            options: {}
+          }
+        ].filter(Boolean)
       }
     };
   })

src/test/mochitest/examples/doc-babel.html

@@ -57,6 +57,8 @@
     <button onclick="thisArgumentsBindings()">Run thisArgumentsBindings</button>
     <script src="babel/fixtures/try-catches/output.js"></script>
     <button onclick="tryCatches()">Run tryCatches</button>
+    <script src="babel/fixtures/ts-classes/output.js"></script>
+    <button onclick="tsClasses()">Run tsClasses</button>
     <script src="babel/fixtures/webpack-modules/output.js"></script>
     <button onclick="webpackModules()">Run webpackModules</button>
     <script src="babel/fixtures/webpack-modules-es6/output.js"></script>