Bug 1033153 - Part 3: Display a Promise's internal state in the VariableView's properties. r=vporof

browser/devtools/debugger/test/browser.ini

@@ -76,6 +76,7 @@ support-files =
   doc_pretty-print-2.html
   doc_pretty-print-3.html
   doc_pretty-print-on-paused.html
+  doc_promise.html
   doc_random-javascript.html
   doc_recursion-stack.html
   doc_same-line-functions.html
@@ -278,6 +279,7 @@ skip-if = os == "linux" || e10s # Bug 888811 & bug 891176
 [browser_dbg_variables-view-03.js]
 [browser_dbg_variables-view-04.js]
 [browser_dbg_variables-view-05.js]
+[browser_dbg_variables-view-06.js]
 [browser_dbg_variables-view-accessibility.js]
 [browser_dbg_variables-view-data.js]
 [browser_dbg_variables-view-edit-cancel.js]

browser/devtools/debugger/test/browser_dbg_variables-view-06.js

@@ -0,0 +1,122 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test that Promises get their internal state added as psuedo properties.
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_promise.html";
+
+const test = Task.async(function* () {
+  const [tab, debuggee, panel] = yield initDebugger(TAB_URL);
+  yield ensureSourceIs(panel, "doc_promise.html", true);
+
+  const scopes = waitForCaretAndScopes(panel, 21);
+  executeSoon(debuggee.doPause);
+  yield scopes;
+
+  const variables = panel.panelWin.DebuggerView.Variables;
+  ok(variables, "Should get the variables view.");
+
+  const scope = [...variables][0];
+  ok(scope, "Should get the current function's scope.");
+
+  const promiseVariables = [...scope].filter(([name]) =>
+    ["p", "f", "r"].indexOf(name) !== -1);
+
+  is(promiseVariables.length, 3,
+     "Should have our 3 promise variables: p, f, r");
+
+  for (let [name, item] of promiseVariables) {
+    info("Expanding variable '" + name + "'");
+    let expanded = once(variables, "fetched");
+    item.expand();
+    yield expanded;
+
+    let foundState = false;
+    switch (name) {
+      case "p":
+        for (let [property, { value }] of item) {
+          if (property !== "<state>") {
+            isnot(property, "<value>",
+                  "A pending promise shouldn't have a value");
+            isnot(property, "<reason>",
+                  "A pending promise shouldn't have a reason");
+            continue;
+          }
+
+          foundState = true;
+          is(value, "pending", "The state should be pending.");
+        }
+        ok(foundState, "We should have found the <state> property.");
+        break;
+
+      case "f":
+        let foundValue = false;
+        for (let [property, value] of item) {
+          if (property === "<state>") {
+            foundState = true;
+            is(value.value, "fulfilled", "The state should be fulfilled.");
+          } else if (property === "<value>") {
+            foundValue = true;
+
+            let expanded = once(variables, "fetched");
+            value.expand();
+            yield expanded;
+
+            let expectedProps = new Map([["a", 1], ["b", 2], ["c", 3]]);
+            for (let [prop, val] of value) {
+              if (prop === "__proto__") {
+                continue;
+              }
+              ok(expectedProps.has(prop), "The property should be expected.");
+              is(val.value, expectedProps.get(prop), "The property value should be correct.");
+              expectedProps.delete(prop);
+            }
+            is(Object.keys(expectedProps).length, 0,
+               "Should have found all of the expected properties.");
+          } else {
+            isnot(property, "<reason>",
+                  "A fulfilled promise shouldn't have a reason");
+          }
+        }
+        ok(foundState, "We should have found the <state> property.");
+        ok(foundValue, "We should have found the <value> property.");
+        break;
+
+      case "r":
+        let foundReason = false;
+        for (let [property, value] of item) {
+          if (property === "<state>") {
+            foundState = true;
+            is(value.value, "rejected", "The state should be rejected.");
+          } else if (property === "<reason>") {
+            foundReason = true;
+
+            let expanded = once(variables, "fetched");
+            value.expand();
+            yield expanded;
+
+            let foundMessage = false;
+            for (let [prop, val] of value) {
+              if (prop !== "message") {
+                continue;
+              }
+              foundMessage = true;
+              is(val.value, "uh oh", "Should have the correct error message.");
+            }
+            ok(foundMessage, "Should have found the error's message");
+          } else {
+            isnot(property, "<value>",
+                  "A rejected promise shouldn't have a value");
+          }
+        }
+        ok(foundState, "We should have found the <state> property.");
+        break;
+    }
+  }
+
+  debugger;
+
+  resumeDebuggerThenCloseAndFinish(panel);
+});

browser/devtools/debugger/test/doc_promise.html

@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Debugger + Promise test page</title>
+  </head>
+
+  <body>
+    <script>
+    window.pending   = new Promise(function () {});
+    window.fulfilled = Promise.resolve({ a: 1, b: 2, c: 3 });
+    window.rejected  = Promise.reject(new Error("uh oh"));
+
+    window.doPause = function () {
+      var p = window.pending;
+      var f = window.fulfilled;
+      var r = window.rejected;
+      debugger;
+    };
+
+    // Attach an error handler so that the logs don't have a warning about an
+    // unhandled, rejected promise.
+    window.rejected.then(null, function () {});
+    </script>
+  </body>
+
+</html>

browser/devtools/shared/widgets/VariablesViewController.jsm

@@ -170,6 +170,16 @@ VariablesViewController.prototype = {
   _populateFromObject: function(aTarget, aGrip) {
     let deferred = promise.defer();
 
+    if (aGrip.class === "Promise" && aGrip.promiseState) {
+      const { state, value, reason } = aGrip.promiseState;
+      aTarget.addItem("<state>", { value: state });
+      if (state === "fulfilled") {
+        this.addExpander(aTarget.addItem("<value>", { value }), value);
+      } else if (state === "rejected") {
+        this.addExpander(aTarget.addItem("<reason>", { value: reason }), reason);
+      }
+    }
+
     let objectClient = this._getObjectClient(aGrip);
     objectClient.getPrototypeAndProperties(aResponse => {
       let { ownProperties, prototype } = aResponse;