Bug 1362398 - Update Debugger Frontend. r=jdescottes

MozReview-Commit-ID: H2XDuj14Ayc --HG-- extra : rebase_source : 80ffdd6a881daa6bee3b571e73d7ffd50bafdeb3
2017-05-08 16:39:35 +02:00 · 2017-05-08 16:39:35 +02:00 · faee08cb31
--- a/devtools/client/debugger/new/debugger.css
+++ b/devtools/client/debugger/new/debugger.css
--- a/devtools/client/debugger/new/debugger.js
+++ b/devtools/client/debugger/new/debugger.js
--- a/devtools/client/debugger/new/index.html
+++ b/devtools/client/debugger/new/index.html
@ -17,7 +17,7 @@
  </head>
  <body>
    <div id="mount"></div>
-    <script type="application/javascript;version=1.8"
+    <script type="application/javascript"
            src="chrome://devtools/content/shared/theme-switching.js"></script>
    <script type="text/javascript">
      const { BrowserLoader } = Components.utils.import("resource://devtools/client/shared/browser-loader.js", {});
--- a/devtools/client/debugger/new/integration-tests.js
+++ b/devtools/client/debugger/new/integration-tests.js
--- a/devtools/client/debugger/new/parser-worker.js
+++ b/devtools/client/debugger/new/parser-worker.js
--- a/devtools/client/debugger/new/pretty-print-worker.js
+++ b/devtools/client/debugger/new/pretty-print-worker.js
@ -65,14 +65,16 @@ return /******/ (function(modules) { // webpackBootstrap

 	"use strict";

+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	exports.default = assert;
 	function assert(condition, message) {
 	  if (!condition) {
 	    throw new Error(`Assertion failure: ${message}`);
 	  }
 	}

-	module.exports = assert;
-
 /***/ },

 /***/ 802:
@ -94,7 +96,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  } else {
 	    root.prettyFast = factory();
 	  }
-	}(this, () => {
+	}(this, function () {
 	  "use strict";

 	  var acorn = this.acorn || __webpack_require__(803);
@ -952,7 +954,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return result.toStringWithSourceMap({ file: options.url });
 	  };

-	}));
+	}.bind(this)));


 /***/ },
@ -5855,8 +5857,15 @@ return /******/ (function(modules) { // webpackBootstrap

 	"use strict";

-	var prettyFast = __webpack_require__(802);
-	var assert = __webpack_require__(223);
+	var _prettyFast = __webpack_require__(802);
+
+	var _prettyFast2 = _interopRequireDefault(_prettyFast);
+
+	var _assert = __webpack_require__(223);
+
+	var _assert2 = _interopRequireDefault(_assert);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

 	function prettyPrint(_ref) {
 	  var url = _ref.url,
@ -5864,7 +5873,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      source = _ref.source;

 	  try {
-	    var prettified = prettyFast(source, {
+	    var prettified = (0, _prettyFast2.default)(source, {
 	      url: url,
 	      indent: " ".repeat(indent)
 	    });
@ -5903,7 +5912,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      id = _msg$data.id,
 	      args = _msg$data.args;

-	  assert(msg.data.method === "prettyPrint", "Method must be `prettyPrint`");
+	  (0, _assert2.default)(msg.data.method === "prettyPrint", "Method must be `prettyPrint`");

 	  try {
 	    var _prettyPrint = prettyPrint(args[0]),
--- a/devtools/client/debugger/new/test/mochitest/browser.ini
+++ b/devtools/client/debugger/new/test/mochitest/browser.ini
@ -11,7 +11,9 @@ support-files =
  examples/sourcemaps2/main.min.js
  examples/sourcemaps2/main.js
  examples/sourcemaps2/main.js.map
+  examples/doc-asm.html
  examples/doc-scripts.html
+  examples/doc-script-mutate.html
  examples/doc-script-switching.html
  examples/doc-exceptions.html
  examples/doc-iframes.html
@ -22,6 +24,8 @@ support-files =
  examples/doc-sourcemaps2.html
  examples/doc-sourcemap-bogus.html
  examples/doc-sources.html
+  examples/doc-return-values.html
+  examples/asm.js
  examples/bogus-map.js
  examples/entry.js
  examples/exceptions.js
@ -33,6 +37,7 @@ support-files =
  examples/simple1.js
  examples/simple2.js
  examples/frames.js
+  examples/script-mutate.js
  examples/script-switching-02.js
  examples/script-switching-01.js
  examples/times2.js
@ -58,6 +63,7 @@ support-files =
 [browser_dbg-navigation.js]
 [browser_dbg-pretty-print.js]
 [browser_dbg-pretty-print-paused.js]
+[browser_dbg-scopes-mutations.js]
 [browser_dbg-searching.js]
 skip-if = true
 [browser_dbg-sourcemaps.js]
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-cond.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-cond.js
@ -8,19 +8,19 @@ function findBreakpoint(dbg, url, line) {
 }

 function setConditionalBreakpoint(dbg, index, condition) {
-  return Task.spawn(function* () {
+  return Task.spawn(function*() {
    rightClickElement(dbg, "gutter", index);
    selectMenuItem(dbg, 2);
    yield waitForElement(dbg, ".conditional-breakpoint-panel input");
    findElementWithSelector(dbg, ".conditional-breakpoint-panel input").focus();
    // Position cursor reliably at the end of the text.
-    pressKey(dbg, "End")
+    pressKey(dbg, "End");
    type(dbg, condition);
    pressKey(dbg, "Enter");
  });
 }

-add_task(function* () {
+add_task(function*() {
  const dbg = yield initDebugger("doc-scripts.html");
  yield selectSource(dbg, "simple2");

@ -49,4 +49,3 @@ add_task(function* () {
  bp = findBreakpoint(dbg, "simple2", 5);
  is(bp.condition, "1", "breakpoint is created with the condition");
 });
-
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-expressions.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-expressions.js
@ -33,7 +33,7 @@ async function editExpression(dbg, input) {
  info("updating the expression");
  dblClickElement(dbg, "expressionNode", 1);
  // Position cursor reliably at the end of the text.
-  pressKey(dbg, "End")
+  pressKey(dbg, "End");
  type(dbg, input);
  pressKey(dbg, "Enter");
  await waitForDispatch(dbg, "EVALUATE_EXPRESSION");
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-scopes-mutations.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-scopes-mutations.js
@ -0,0 +1,120 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function getScopeNodeLabel(dbg, index) {
+  return findElement(dbg, "scopeNode", index).innerText;
+}
+
+function getScopeNodeValue(dbg, index) {
+  return findElement(dbg, "scopeValue", index).innerText;
+}
+
+function expandNode(dbg, index) {
+  let onLoadProperties = onLoadObjectProperties(dbg);
+  clickElement(dbg, "scopeNode", index);
+  return onLoadProperties;
+}
+
+function toggleScopes(dbg) {
+  return findElement(dbg, "scopesHeader").click();
+}
+
+function onLoadObjectProperties(dbg) {
+  return waitForDispatch(dbg, "LOAD_OBJECT_PROPERTIES");
+}
+
+add_task(async function() {
+  const dbg = await initDebugger("doc-script-mutate.html");
+
+  toggleScopes(dbg);
+
+  let onPaused = waitForPaused(dbg);
+  invokeInTab("mutate");
+  await onPaused;
+
+  is(
+    getScopeNodeLabel(dbg, 2),
+    "<this>",
+    'The second element in the scope panel is "<this>"'
+  );
+  is(
+    getScopeNodeLabel(dbg, 3),
+    "phonebook",
+    'The third element in the scope panel is "phonebook"'
+  );
+
+  // Expand `phonebook`
+  await expandNode(dbg, 3);
+  is(
+    getScopeNodeLabel(dbg, 4),
+    "S",
+    'The fourth element in the scope panel is "S"'
+  );
+
+  // Expand `S`
+  await expandNode(dbg, 4);
+  is(
+    getScopeNodeLabel(dbg, 5),
+    "sarah",
+    'The fifth element in the scope panel is "sarah"'
+  );
+  is(
+    getScopeNodeLabel(dbg, 6),
+    "serena",
+    'The sixth element in the scope panel is "serena"'
+  );
+
+  // Expand `sarah`
+  await expandNode(dbg, 5);
+  is(
+    getScopeNodeLabel(dbg, 6),
+    "lastName",
+    'The sixth element in the scope panel is now "lastName"'
+  );
+  is(
+    getScopeNodeValue(dbg, 6),
+    '"Doe"',
+    'The "lastName" element has the expected "Doe" value'
+  );
+
+  info("Resuming");
+  onPaused = waitForPaused(dbg);
+  await resume(dbg);
+  await onPaused;
+
+  is(
+    getScopeNodeLabel(dbg, 6),
+    "lastName",
+    'The sixth element in the scope panel is still "lastName"'
+  );
+  is(
+    getScopeNodeValue(dbg, 6),
+    '"Doe"',
+    'The "lastName" property is still "Doe", but it should be "Pierce"' +
+      "since it was changed in the script."
+  );
+
+  onPaused = waitForPaused(dbg);
+  await resume(dbg);
+  await onPaused;
+  is(
+    getScopeNodeLabel(dbg, 6),
+    "lastName",
+    'The sixth element in the scope panel is still "lastName"'
+  );
+  is(
+    getScopeNodeLabel(dbg, 7),
+    "__proto__",
+    'The seventh element in the scope panel is still "__proto__", ' +
+      'but it should be now "timezone", since it was added to the "sarah" object ' +
+      "in the script"
+  );
+  is(
+    getScopeNodeValue(dbg, 7),
+    "Object",
+    'The seventh element in the scope panel has the value "Object", ' +
+      'but it should be "PST"'
+  );
+
+  await resume(dbg);
+});
--- a/devtools/client/debugger/new/test/mochitest/examples/asm.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/asm.js
@ -1,11 +1,10 @@
 /* Any copyright is dedicated to the Public Domain.
 * http://creativecommons.org/publicdomain/zero/1.0/ */

-var asmjs = (function () {
+var asmjs = (function() {
  "use asm";
  function f() {
-    return 1|0;
+    return 1 | 0;
  }
-  return {f: f};
-})()
-
+  return { f: f };
+})();
--- a/devtools/client/debugger/new/test/mochitest/examples/doc-return-values.html
+++ b/devtools/client/debugger/new/test/mochitest/examples/doc-return-values.html
@ -22,6 +22,26 @@
      }
    }
    </script>
+
+    <h3>Returns</h3>
+    <button onclick="return_something(2)">return(2)</button>
+    <button onclick="return_something(new Error('blah'))">return(error)</button>
+    <button onclick="return_something(undefined)">return(undefined)</button>
+    <button onclick="return_something(false)">return(false)</button>
+    <button onclick="return_something(null)">return(null)</button>
+    <button onclick="return_something(0)">return(0)</button>
+    <button onclick="return_something('yay')">return('yay')</button>
+
+
+    <h3>Throws</h3>
+    <button onclick="throw_something(2)">throw(2)</button>
+    <button onclick="throw_something(new Error('blah'))">throw(error)</button>
+    <button onclick="throw_something(undefined)">throw(undefined)</button>
+    <button onclick="throw_something(false)">throw(false)</button>
+    <button onclick="throw_something(0)">throw(0)</button>
+    <button onclick="throw_something(null)">throw(null)</button>
+    <button onclick="throw_something('yay')">throw('yay')</button>
+
  </body>

 </html>
--- a/devtools/client/debugger/new/test/mochitest/examples/doc-script-mutate.html
+++ b/devtools/client/debugger/new/test/mochitest/examples/doc-script-mutate.html
@ -0,0 +1,17 @@
+<!-- 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 test page - Mutate object</title>
+  </head>
+
+  <body>
+    <button onclick="mutate()">Click me!</button>
+
+    <script type="text/javascript" src="script-mutate.js"></script>
+  </body>
+
+</html>
--- a/devtools/client/debugger/new/test/mochitest/examples/doc-sources.html
+++ b/devtools/client/debugger/new/test/mochitest/examples/doc-sources.html
@ -6,16 +6,17 @@
    <meta charset="utf-8"/>
    <title>Debugger test page</title>
  </head>
- 
+
  <body>
    <script src="simple1.js"></script>
    <script src="simple2.js"></script>
    <script src="long.js"></script>
    <script>
-      // This inline script allows this HTML page to show up as a
-      // source. It also needs to introduce a new global variable so
-      // it's not immediately garbage collected.
-      function inline_script() { var x = 5; }
+      function loadScript() {
+        const script = document.createElement("script");
+        script.src = "math.min.js";
+        document.body.appendChild(script);
+      }
    </script>
    <script src="nested/nested-source.js"></script>
    <script src="nested/deeper/deeper-source.js"></script>
--- a/devtools/client/debugger/new/test/mochitest/examples/script-mutate.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/script-mutate.js
@ -0,0 +1,20 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+function mutate() {
+  const phonebook = {
+    S: {
+      sarah: {
+        lastName: "Doe"
+      },
+      serena: {
+        lastName: "Williams"
+      }
+    }
+  };
+
+  debugger;
+  phonebook.S.sarah.lastName = "Pierce";
+  debugger;
+  phonebook.S.sarah.timezone = "PST";
+  debugger;
+}
--- a/devtools/client/debugger/new/test/mochitest/head.js
+++ b/devtools/client/debugger/new/test/mochitest/head.js
@ -38,7 +38,8 @@ Services.scriptloader.loadSubScript(
  this
 );
 var { Toolbox } = require("devtools/client/framework/toolbox");
-const EXAMPLE_URL = "http://example.com/browser/devtools/client/debugger/new/test/mochitest/examples/";
+const EXAMPLE_URL =
+  "http://example.com/browser/devtools/client/debugger/new/test/mochitest/examples/";

 Services.prefs.setBoolPref("devtools.debugger.new-debugger-frontend", true);

@ -336,7 +337,7 @@ window.resumeTest = undefined;
 */
 function pauseTest() {
  info("Test paused. Invoke resumeTest to continue.");
-  return new Promise(resolve => resumeTest = resolve);
+  return new Promise(resolve => (resumeTest = resolve));
 }

 // Actions
@ -563,12 +564,12 @@ const cmdOrCtrl = isLinux ? { ctrlKey: true } : { metaKey: true };
 // On Mac, going to beginning/end only works with meta+left/right.  On
 // Windows, it only works with home/end.  On Linux, apparently, either
 // ctrl+left/right or home/end work.
-const endKey = isMac ?
-      { code: "VK_RIGHT", modifiers: cmdOrCtrl } :
-      { code: "VK_END" };
-const startKey = isMac ? 
-      { code: "VK_LEFT", modifiers: cmdOrCtrl } :
-      { code: "VK_HOME" };
+const endKey = isMac
+  ? { code: "VK_RIGHT", modifiers: cmdOrCtrl }
+  : { code: "VK_END" };
+const startKey = isMac
+  ? { code: "VK_LEFT", modifiers: cmdOrCtrl }
+  : { code: "VK_HOME" };
 const keyMappings = {
  sourceSearch: { code: "p", modifiers: cmdOrCtrl },
  fileSearch: { code: "f", modifiers: cmdOrCtrl },
@ -622,16 +623,14 @@ function isVisibleWithin(outerEl, innerEl) {
 const selectors = {
  callStackHeader: ".call-stack-pane ._header",
  callStackBody: ".call-stack-pane .pane",
-  expressionNode: i =>
-    `.expressions-list .tree-node:nth-child(${i}) .object-label`,
-  expressionValue: i =>
-    `.expressions-list .tree-node:nth-child(${i}) .object-value`,
-  expressionClose: i =>
-    `.expressions-list .expression-container:nth-child(${i}) .close`,
+  expressionNode: i => `.expressions-list .tree-node:nth-child(${i}) .object-label`,
+  expressionValue: i => `.expressions-list .tree-node:nth-child(${i}) .object-value`,
+  expressionClose: i => `.expressions-list .expression-container:nth-child(${i}) .close`,
  expressionNodes: ".expressions-list .tree-node",
  scopesHeader: ".scopes-pane ._header",
  breakpointItem: i => `.breakpoints-list .breakpoint:nth-child(${i})`,
  scopeNode: i => `.scopes-list .tree-node:nth-child(${i}) .object-label`,
+  scopeValue: i => `.scopes-list .tree-node:nth-child(${i}) .object-value`,
  frame: i => `.frames ul li:nth-child(${i})`,
  frames: ".frames ul li",
  gutter: i => `.CodeMirror-code *:nth-child(${i}) .CodeMirror-linenumber`,
--- a/devtools/client/locales/en-US/debugger.properties
+++ b/devtools/client/locales/en-US/debugger.properties
@ -22,6 +22,14 @@ copySourceUrl=Copy Source Url
 # the context menu.
 copySourceUrl.accesskey=u

+# LOCALIZATION NOTE (copyStackTrace): This is the text that appears in the
+# context menu to copy the stack trace methods, file names and row number.
+copyStackTrace=Copy Stack Trace
+
+# LOCALIZATION NOTE (copyStackTrace.accesskey): Access key to copy the stack trace data from
+# the context menu.
+copyStackTrace.accesskey=c
+
 # LOCALIZATION NOTE (expandPanes): This is the tooltip for the button
 # that expands the left and right panes in the debugger UI.
 expandPanes=Expand panes
@ -128,10 +136,6 @@ sources.search.key=P
 # does not have any sources.
 sources.noSourcesAvailable=This page has no sources

-# LOCALIZATION NOTE (sources.searchAlt.key): Alternate key shortcut to open
-# the search for searching all the source files the debugger has seen.
-sources.searchAlt.key=O
-
 # LOCALIZATION NOTE (sourceSearch.search.key): Key shortcut to open the search
 # for searching within a the currently opened files in the editor
 sourceSearch.search.key=F
@ -246,6 +250,14 @@ editor.singleResult=1 result
 # for when no results found.
 editor.noResults=no results

+# LOCALIZATION NOTE (editor.searchResults.nextResult): Editor Search bar
+# tooltip for traversing to the Next Result
+editor.searchResults.nextResult=Next Result
+
+# LOCALIZATION NOTE (editor.searchResults.prevResult): Editor Search bar
+# tooltip for traversing to the Previous Result
+editor.searchResults.prevResult=Previous Result
+
 # LOCALIZATION NOTE (editor.searchTypeToggleTitle): Search bar title for
 # toggling search type buttons(function search, variable search)
 editor.searchTypeToggleTitle=Search for: