Handle global-rewrite (Ember-related) original scope resolution (firefox-devtools#5871)

* Resolve globals to allow locals to be rewritten to reference globals.
* Move the shared breakpoint testing logic into head.js
* Resolve bindings with multiple generated location.
* Add an example Ember quickstart application.
* Add a mochitest for Ember's source maps.

Author: loganfsmyth

.prettierignore

@@ -5,3 +5,4 @@ src/test/mochitest/examples/babel/polyfill-bundle.js
 src/test/mochitest/examples/babel/fixtures/*/input.js
 src/test/mochitest/examples/babel/fixtures/*/output.js
 src/test/mochitest/examples/babel/fixtures/*/output.js.map
+src/test/mochitest/examples/ember/quickstart

.travis.yml

@@ -10,7 +10,7 @@ env:
   global:
     - DISPLAY=':99.0'
     - YARN_VERSION='0.24.5'
-    - MC_COMMIT='7b40283bf1c7' # https://hg.mozilla.org/mozilla-central/shortlog
+    - MC_COMMIT='83de58ddda20' # https://hg.mozilla.org/mozilla-central/shortlog
 
 notifications:
   slack:

src/actions/pause/mapScopes.js

@@ -20,6 +20,8 @@ import { locColumn } from "../../utils/pause/mapScopes/locColumn";
 // eslint-disable-next-line max-len
 import { findGeneratedBindingFromPosition } from "../../utils/pause/mapScopes/findGeneratedBindingFromPosition";
 
+import { createObjectClient } from "../../client/firefox";
+
 import { features } from "../../utils/prefs";
 import { log } from "../../utils/log";
 import { isGeneratedId } from "devtools-source-map";
@@ -38,7 +40,7 @@ export type OriginalScope = RenderableScope;
 export type GeneratedBindingLocation = {
   name: string,
   loc: BindingLocation,
-  desc: BindingContents | null
+  desc: () => Promise<BindingContents | null>
 };
 
 export function mapScopes(scopes: Promise<Scope>, frame: Frame) {
@@ -360,13 +362,15 @@ function buildGeneratedBindingList(
     generated => "this" in generated.bindings
   );
 
+  let globalScope = null;
   const clientScopes = [];
   for (let s = scopes; s; s = s.parent) {
     const bindings = s.bindings
       ? Object.assign({}, ...s.bindings.arguments, s.bindings.variables)
       : {};
 
     clientScopes.push(bindings);
+    globalScope = s;
   }
 
   const generatedMainScopes = generatedAstScopes.slice(0, -2);
@@ -392,7 +396,7 @@ function buildGeneratedBindingList(
         acc.push({
           name,
           loc,
-          desc: bindings[name] || null
+          desc: () => Promise.resolve(bindings[name] || null)
         });
       }
     }
@@ -406,15 +410,29 @@ function buildGeneratedBindingList(
   for (const generated of generatedGlobalScopes) {
     for (const name of Object.keys(generated.bindings)) {
       const { refs } = generated.bindings[name];
-      for (const loc of refs) {
-        const bindings = clientGlobalScopes.find(b => has(b, name));
+      const bindings = clientGlobalScopes.find(b => has(b, name));
 
+      for (const loc of refs) {
         if (bindings) {
           generatedBindings.push({
             name,
             loc,
-            desc: bindings[name]
+            desc: () => Promise.resolve(bindings[name])
           });
+        } else {
+          const globalGrip = globalScope && globalScope.object;
+          if (globalGrip) {
+            // Should always exist, just checking to keep Flow happy.
+
+            generatedBindings.push({
+              name,
+              loc,
+              desc: async () => {
+                const objectClient = createObjectClient(globalGrip);
+                return (await objectClient.getProperty(name)).descriptor;
+              }
+            });
+          }
         }
       }
     }

src/test/mochitest/browser.ini

@@ -55,6 +55,13 @@ support-files =
   examples/babel/fixtures/webpack-modules-es6/output.js.map
   examples/babel/fixtures/webpack-standalone/output.js
   examples/babel/fixtures/webpack-standalone/output.js.map
+  examples/ember/quickstart/dist/index.html
+  examples/ember/quickstart/dist/assets/quickstart.css
+  examples/ember/quickstart/dist/assets/quickstart.js
+  examples/ember/quickstart/dist/assets/quickstart.map
+  examples/ember/quickstart/dist/assets/vendor.css
+  examples/ember/quickstart/dist/assets/vendor.js
+  examples/ember/quickstart/dist/assets/vendor.map
   examples/sourcemaps/bundle.js
   examples/sourcemaps/bundle.js.map
   examples/sourcemaps2/main.min.js
@@ -159,6 +166,7 @@ skip-if = (os == "win" && ccov) # Bug 1424154
 [browser_dbg-editor-gutter.js]
 [browser_dbg-editor-select.js]
 [browser_dbg-editor-highlight.js]
+[browser_dbg-ember-quickstart.js]
 [browser_dbg-expressions.js]
 [browser_dbg-expressions-error.js]
 [browser_dbg-iframes.js]

src/test/mochitest/browser_dbg-babel-breakpoint-console.js

@@ -1,49 +1,11 @@
 
 async function evalInConsoleAtPoint(dbg, fixture, { line, column }, statements) {
-  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
-
   const filename = `fixtures/${fixture}/input.js`;
-  await waitForSources(dbg, filename);
-
-  ok(true, "Original sources exist");
-  const source = findSource(dbg, filename);
-
-  await selectSource(dbg, source);
-
-  // Test that breakpoint is not off by a line.
-  await addBreakpoint(dbg, source, line);
-
-  is(getBreakpoints(getState()).size, 1, "One breakpoint exists");
-  ok(
-    getBreakpoint(getState(), { sourceId: source.id, line, column }),
-    "Breakpoint has correct line"
-  );
-
   const fnName = fixture.replace(/-([a-z])/g, (s, c) => c.toUpperCase());
 
-  const invokeResult = invokeInTab(fnName);
-
-  let invokeFailed = await Promise.race([
-    waitForPaused(dbg),
-    invokeResult.then(() => new Promise(() => {}), () => true)
-  ]);
-
-  if (invokeFailed) {
-    return invokeResult;
-  }
-
-  assertPausedLocation(dbg);
-
-  await assertConsoleEval(dbg, statements);
-
-  await removeBreakpoint(dbg, source.id, line, column);
-
-  is(getBreakpoints(getState()).size, 0, "Breakpoint reverted");
-
-  await resume(dbg);
-
-  // If the invoke errored later somehow, capture here so the error is reported nicely.
-  await invokeResult;
+  await invokeWithBreakpoint(dbg, fnName, filename, { line, column }, async () => {
+    await assertConsoleEval(dbg, statements);
+  });
 
   ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
 }

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

@@ -28,50 +28,12 @@ async function assertPreviews(dbg, previews) {
 }
 
 async function breakpointPreviews(dbg, fixture, { line, column }, previews) {
-  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
-
   const filename = `fixtures/${fixture}/input.js`;
-  await waitForSources(dbg, filename);
-
-  ok(true, "Original sources exist");
-  const source = findSource(dbg, filename);
-
-  await selectSource(dbg, source);
-
-  // Test that breakpoint is not off by a line.
-  await addBreakpoint(dbg, source, line);
-
-  is(getBreakpoints(getState()).size, 1, "One breakpoint exists");
-  ok(
-    getBreakpoint(getState(), { sourceId: source.id, line, column }),
-    "Breakpoint has correct line"
-  );
-
   const fnName = fixture.replace(/-([a-z])/g, (s, c) => c.toUpperCase());
 
-  const invokeResult = invokeInTab(fnName);
-
-  let invokeFailed = await Promise.race([
-    waitForPaused(dbg),
-    invokeResult.then(() => new Promise(() => {}), () => true)
-  ]);
-
-  if (invokeFailed) {
-    return invokeResult;
-  }
-
-  assertPausedLocation(dbg);
-
-  await assertPreviews(dbg, previews);
-
-  await removeBreakpoint(dbg, source.id, line, column);
-
-  is(getBreakpoints(getState()).size, 0, "Breakpoint reverted");
-
-  await resume(dbg);
-
-  // If the invoke errored later somehow, capture here so the error is reported nicely.
-  await invokeResult;
+  await invokeWithBreakpoint(dbg, fnName, filename, { line, column }, async () => {
+    await assertPreviews(dbg, previews);
+  });
 
   ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
 }

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

@@ -7,87 +7,16 @@ requestLongerTimeout(4);
 // Tests loading sourcemapped sources for Babel's compile output.
 
 async function breakpointScopes(dbg, fixture, { line, column }, scopes) {
-  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
-
   const filename = `fixtures/${fixture}/input.js`;
-  await waitForSources(dbg, filename);
-
-  ok(true, "Original sources exist");
-  const source = findSource(dbg, filename);
-
-  await selectSource(dbg, source);
-
-  // Test that breakpoint is not off by a line.
-  await addBreakpoint(dbg, source, line);
-
-  is(getBreakpoints(getState()).size, 1, "One breakpoint exists");
-  ok(
-    getBreakpoint(getState(), { sourceId: source.id, line, column }),
-    "Breakpoint has correct line"
-  );
-
   const fnName = fixture.replace(/-([a-z])/g, (s, c) => c.toUpperCase());
 
-  const invokeResult = invokeInTab(fnName);
-
-  let invokeFailed = await Promise.race([
-    waitForPaused(dbg),
-    invokeResult.then(() => new Promise(() => {}), () => true)
-  ]);
-
-  if (invokeFailed) {
-    return invokeResult;
-  }
-
-  assertPausedLocation(dbg);
-
-  await assertScopes(dbg, scopes);
-
-  await removeBreakpoint(dbg, source.id, line, column);
-
-  is(getBreakpoints(getState()).size, 0, "Breakpoint reverted");
-
-  await resume(dbg);
-
-  // If the invoke errored later somehow, capture here so the error is reported nicely.
-  await invokeResult;
+  await invokeWithBreakpoint(dbg, fnName, filename, { line, column }, async () => {
+    await assertScopes(dbg, scopes);
+  });
 
   ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
 }
 
-async function expandAllScopes(dbg) {
-  const scopes = await waitForElement(dbg, "scopes");
-  const scopeElements = scopes.querySelectorAll(
-    `.tree-node[aria-level="1"][data-expandable="true"]:not([aria-expanded="true"])`
-  );
-  const indices = Array.from(scopeElements, el => {
-    return Array.prototype.indexOf.call(el.parentNode.childNodes, el);
-  }).reverse();
-
-  for (const index of indices) {
-    await toggleScopeNode(dbg, index + 1);
-  }
-}
-
-async function assertScopes(dbg, items) {
-  await expandAllScopes(dbg);
-
-  for (const [i, val] of items.entries()) {
-    if (Array.isArray(val)) {
-      is(getScopeLabel(dbg, i + 1), val[0]);
-      is(
-        getScopeValue(dbg, i + 1),
-        val[1],
-        `"${val[0]}" has the expected "${val[1]}" value`
-      );
-    } else {
-      is(getScopeLabel(dbg, i + 1), val);
-    }
-  }
-
-  is(getScopeLabel(dbg, items.length + 1), "Window");
-}
-
 add_task(async function() {
   await pushPref("devtools.debugger.features.map-scopes", true);
 

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

@@ -5,52 +5,12 @@
 requestLongerTimeout(4);
 
 async function breakpointSteps(dbg, fixture, { line, column }, steps) {
-  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
-
   const filename = `fixtures/${fixture}/input.js`;
-  await waitForSources(dbg, filename);
-
-  ok(true, "Original sources exist");
-  const source = findSource(dbg, filename);
-
-  await selectSource(dbg, source);
-
-  // Test that breakpoint is not off by a line.
-  await addBreakpoint(dbg, source, line);
-
-  is(getBreakpoints(getState()).size, 1, "One breakpoint exists");
-
-  ok(
-    getBreakpoint(getState(), { sourceId: source.id, line, column }),
-    "Breakpoint has correct line"
-  );
-
   const fnName = fixture.replace(/-([a-z])/g, (s, c) => c.toUpperCase());
 
-  const invokeResult = invokeInTab(fnName);
-
-  let invokeFailed = await Promise.race([
-    waitForPaused(dbg),
-    invokeResult.then(() => new Promise(() => {}), () => true)
-  ]);
-
-  if (invokeFailed) {
-    return invokeResult;
-  }
-
-  assertPausedLocation(dbg);
-
-  await removeBreakpoint(dbg, source.id, line, column);
-
-  is(getBreakpoints(getState()).size, 0, "Breakpoint reverted");
-
-  await runSteps(dbg, source, steps);
-
-  await resume(dbg);
-
-  // If the invoke errored later somehow, capture here so the error is
-  // reported nicely.
-  await invokeResult;
+  await invokeWithBreakpoint(dbg, fnName, filename, { line, column }, async source => {
+    await runSteps(dbg, source, steps);
+  });
 
   ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
 }

src/test/mochitest/browser_dbg-ember-quickstart.js

@@ -0,0 +1,15 @@
+
+add_task(async function() {
+  await pushPref("devtools.debugger.features.map-scopes", true);
+
+  const dbg = await initDebugger("ember/quickstart/dist/");
+
+  await invokeWithBreakpoint(dbg, "mapTestFunction", "quickstart/router.js", { line: 13, column: 2 }, async () => {
+    await assertScopes(dbg, [
+      "Module",
+      ["config", "{\u2026}"],
+      "EmberRouter:Class()",
+      "Router:Class()",
+    ]);
+  });
+});