Bug 1445081 - Update Debugger Frontend v21. r=jdescottes

MozReview-Commit-ID: IrusTqKuyAN

browser/base/content/test/static/browser_parsable_css.js

@@ -129,9 +129,6 @@ let propNameWhitelist = [
   // Bug 1441878
   {propName: "--theme-codemirror-gutter-background",
    isFromDevTools: true},
-  // Bug 1441879
-  {propName: "--arrow-width",
-   isFromDevTools: true},
   // Bug 1442300
   {propName: "--in-content-category-background",
    isFromDevTools: false},

devtools/client/debugger/new/README.mozilla

@@ -1,9 +1,9 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Version 20.0
+Version 21.0
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-19-2...release-20
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-20...release-21
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.0

devtools/client/debugger/new/debugger.css

@@ -512,19 +512,16 @@ body {
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 :root {
-  --arrow-width: 10px;
   --icon-size: 13px;
 }
 
 :root.theme-light,
 :root .theme-light {
-  --search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
   --popup-shadow-color: #d0d0d0;
 }
 
 :root.theme-dark,
 :root .theme-dark {
-  --search-overlays-semitransparent: rgba(42, 46, 56, 0.66);
   --popup-shadow-color: #5c667b;
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
@@ -1466,7 +1463,7 @@ html[dir="rtl"] .arrow svg,
 
 .project-text-search .line-match {
   display: "flex";
-  grow: 1;
+  flex-grow: 1;
 }
 
 .project-text-search .search-field {
@@ -1652,7 +1649,9 @@ html[dir="rtl"] .arrow svg,
   background-color: white;
 }
 
-.tree:not(.object-inspector) .tree-node[data-expandable="false"] .tree-indent:last-of-type {
+.tree:not(.object-inspector)
+  .tree-node[data-expandable="false"]
+  .tree-indent:last-of-type {
   margin-inline-end: 4px;
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
@@ -1758,7 +1757,6 @@ html[dir="rtl"] .arrow svg,
   text-align: center;
   position: relative;
   padding: 0px 5px;
-  margin-inline-end: 0.3em;
   fill: currentColor;
 }
 
@@ -3439,7 +3437,6 @@ html .breakpoints-list .breakpoint.paused {
   overflow: hidden;
   z-index: 1;
   background-color: var(--theme-toolbar-background);
-  align-items: center;
 }
 
 html[dir="rtl"] .command-bar {
@@ -3544,7 +3541,8 @@ img.resume {
 
 .command-bar .step-position {
   color: var(--theme-comment-alt);
-  margin-inline-end: 1em;
+  padding-top: 8px;
+  margin-inline-end: 4px;
 }
 
 .command-bar .replay-active {

devtools/client/debugger/new/parser-worker.js

@@ -2685,13 +2685,17 @@ var _getSymbols2 = _interopRequireDefault(_getSymbols);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function getFramework(sourceId) {
-  if (isReactComponent(sourceId)) {
+  const sourceSymbols = (0, _getSymbols2.default)(sourceId);
+
+  if (isReactComponent(sourceSymbols)) {
     return "React";
   }
-
-  if (isAngularComponent(sourceId)) {
+  if (isAngularComponent(sourceSymbols)) {
     return "Angular";
   }
+  if (isVueComponent(sourceSymbols)) {
+    return "Vue";
+  }
 }
 
 // React
@@ -2700,8 +2704,8 @@ function getFramework(sourceId) {
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-function isReactComponent(sourceId) {
-  const { imports, classes, callExpressions } = (0, _getSymbols2.default)(sourceId);
+function isReactComponent(sourceSymbols) {
+  const { imports, classes, callExpressions } = sourceSymbols;
   return (importsReact(imports) || requiresReact(callExpressions)) && extendsReactComponent(classes);
 }
 
@@ -2726,8 +2730,8 @@ function extendsReactComponent(classes) {
 
 // Angular
 
-const isAngularComponent = sourceId => {
-  const { memberExpressions, identifiers } = (0, _getSymbols2.default)(sourceId);
+const isAngularComponent = sourceSymbols => {
+  const { memberExpressions, identifiers } = sourceSymbols;
   return identifiesAngular(identifiers) && hasAngularExpressions(memberExpressions);
 };
 
@@ -2739,6 +2743,13 @@ const hasAngularExpressions = memberExpressions => {
   return memberExpressions.some(item => item.name == "controller" || item.name == "module");
 };
 
+// Vue
+
+const isVueComponent = sourceSymbols => {
+  const { identifiers } = sourceSymbols;
+  return identifiers.some(identifier => identifier.name == "Vue");
+};
+
 /***/ }),
 
 /***/ 198:

devtools/client/debugger/new/test/mochitest/browser.ini

@@ -47,6 +47,8 @@ support-files =
   examples/babel/fixtures/webpack-modules/output.js.map
   examples/babel/fixtures/webpack-modules-es6/output.js
   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/sourcemaps/bundle.js
   examples/sourcemaps/bundle.js.map
   examples/sourcemaps2/main.min.js
@@ -119,6 +121,7 @@ support-files =
 [browser_dbg-async-stepping.js]
 [browser_dbg-babel-scopes.js]
 [browser_dbg-babel-stepping.js]
+skip-if = true
 [browser_dbg-breaking.js]
 [browser_dbg-breaking-from-console.js]
 [browser_dbg-breakpoints.js]

devtools/client/debugger/new/test/mochitest/browser_dbg-babel-scopes.js

@@ -317,4 +317,28 @@ add_task(async function() {
     ["aNamespace3", "{\u2026}"],
     "root()"
   ]);
+
+  await breakpointScopes(dbg, "webpack-standalone", { line: 11, column: 0 }, [
+    "Block",
+    ["<this>", '"this-value"'],
+    ["arg", '"arg-value"'],
+    ["arguments", "Arguments"],
+    ["inner", "undefined"],
+    "Block",
+    ["someName", "(optimized away)"],
+    "Block",
+    ["two", "2"],
+    "Block",
+    ["one", "1"],
+    "root",
+    ["arguments", "Arguments"],
+    "fn:someName()",
+    "webpackStandalone",
+    ["__webpack_exports__", "(optimized away)"],
+    ["__WEBPACK_IMPORTED_MODULE_0__src_mod1__", "{\u2026}"],
+    ["__webpack_require__", "(optimized away)"],
+    ["arguments", "(unavailable)"],
+    ["module", "(optimized away)"],
+    "root()"
+  ]);
 });

devtools/client/debugger/new/test/mochitest/browser_dbg-babel-stepping.js

@@ -18,6 +18,7 @@ async function breakpointSteps(dbg, fixture, { line, column }, steps) {
   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"
@@ -78,12 +79,8 @@ async function runSteps(dbg, source, steps) {
   }
 }
 
-add_task(async function() {
-  requestLongerTimeout(4);
-
-  const dbg = await initDebugger("doc-babel.html");
-
-  await breakpointSteps(dbg, "step-over-for-of", { line: 4, column: 2 }, [
+function testStepOverForOf(dbg) {
+  return breakpointSteps(dbg, "step-over-for-of", { line: 4, column: 2 }, [
     ["stepOver", { line: 6, column: 2 }],
     ["stepOver", { line: 7, column: 4 }],
     ["stepOver", { line: 6, column: 2 }],
@@ -91,10 +88,12 @@ add_task(async function() {
     ["stepOver", { line: 6, column: 2 }],
     ["stepOver", { line: 10, column: 2 }]
   ]);
+}
 
-  // This codifies the current behavior, but stepping twice over the for
-  // header isn't ideal.
-  await breakpointSteps(dbg, "step-over-for-of-array", { line: 3, column: 2 }, [
+// This codifies the current behavior, but stepping twice over the for
+// header isn't ideal.
+function testStepOverForOfArray(dbg) {
+  return breakpointSteps(dbg, "step-over-for-of-array", { line: 3, column: 2 }, [
     ["stepOver", { line: 5, column: 2 }],
     ["stepOver", { line: 5, column: 7 }],
     ["stepOver", { line: 6, column: 4 }],
@@ -104,23 +103,29 @@ add_task(async function() {
     ["stepOver", { line: 5, column: 2 }],
     ["stepOver", { line: 9, column: 2 }]
   ]);
+}
 
-  // The closure means it isn't actually possible to step into the for body,
-  // and Babel doesn't map the _loop() call, so we step past it automatically.
-  await breakpointSteps(
+// The closure means it isn't actually possible to step into the for body,
+// and Babel doesn't map the _loop() call, so we step past it automatically.
+function testStepOveForOfClosure(dbg) {
+  return breakpointSteps(
     dbg,
     "step-over-for-of-closure",
     { line: 6, column: 2 },
     [
+      ["stepOver", { line: 8, column: 2 }],
+      ["stepOver", { line: 8, column: 2 }],
       ["stepOver", { line: 8, column: 2 }],
       ["stepOver", { line: 12, column: 2 }]
     ]
   );
+}
 
-  // Same as the previous, not possible to step into the body. The less
-  // complicated array logic makes it possible to step into the header at least,
-  // but this does end up double-visiting the for head.
-  await breakpointSteps(
+// Same as the previous, not possible to step into the body. The less
+// complicated array logic makes it possible to step into the header at least,
+// but this does end up double-visiting the for head.
+function testStepOverForOfArrayClosure(dbg) {
+  return breakpointSteps(
     dbg,
     "step-over-for-of-array-closure",
     { line: 3, column: 2 },
@@ -133,15 +138,19 @@ add_task(async function() {
       ["stepOver", { line: 9, column: 2 }]
     ]
   );
+}
 
-  await breakpointSteps(
+function testStepOverFunctionParams(dbg) {
+  return breakpointSteps(
     dbg,
     "step-over-function-params",
     { line: 6, column: 2 },
     [["stepOver", { line: 7, column: 2 }], ["stepIn", { line: 2, column: 2 }]]
   );
+}
 
-  await breakpointSteps(
+function testStepOverRegeneratorAwait(dbg) {
+  return breakpointSteps(
     dbg,
     "step-over-regenerator-await",
     { line: 2, column: 2 },
@@ -151,4 +160,17 @@ add_task(async function() {
       // ["stepOver", { line: 4, column: 2 }],
     ]
   );
+}
+
+add_task(async function() {
+  requestLongerTimeout(4);
+
+  const dbg = await initDebugger("doc-babel.html");
+
+  await testStepOverForOf(dbg);
+  await testStepOverForOfArray(dbg);
+  await testStepOveForOfClosure(dbg);
+  await testStepOverForOfArrayClosure(dbg);
+  await testStepOverFunctionParams(dbg);
+  await testStepOverRegeneratorAwait(dbg);
 });

devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-cond.js

@@ -24,11 +24,22 @@ function assertEditorBreakpoint(dbg, line, shouldExist) {
   );
 }
 
+function waitForElementFocus(dbg, el) {
+  const doc = dbg.win.document;
+  return waitFor(() => doc.activeElement == el && doc.hasFocus());
+}
+
+async function assertConditionalBreakpointIsFocused(dbg) {
+  const input = findElement(dbg, "conditionalPanelInput");
+  await waitForElementFocus(dbg, input);
+}
+
 async function setConditionalBreakpoint(dbg, index, condition) {
   rightClickElement(dbg, "gutter", index);
   selectMenuItem(dbg, 2);
-  await waitForElementWithSelector(dbg, ".conditional-breakpoint-panel input");
-  findElementWithSelector(dbg, ".conditional-breakpoint-panel input").focus();
+  await waitForElement(dbg, "conditionalPanelInput");
+  await assertConditionalBreakpointIsFocused(dbg);
+
   // Position cursor reliably at the end of the text.
   pressKey(dbg, "End");
   type(dbg, condition);
@@ -39,21 +50,18 @@ add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
   await selectSource(dbg, "simple2");
 
-  dump("Adding a conditional Breakpoint\n");
   await setConditionalBreakpoint(dbg, 5, "1");
   await waitForDispatch(dbg, "ADD_BREAKPOINT");
   let bp = findBreakpoint(dbg, "simple2", 5);
   is(bp.condition, "1", "breakpoint is created with the condition");
   assertEditorBreakpoint(dbg, 5, true);
 
-  dump("Editing a conditional breakpoint\n");
   await setConditionalBreakpoint(dbg, 5, "2");
   await waitForDispatch(dbg, "SET_BREAKPOINT_CONDITION");
   bp = findBreakpoint(dbg, "simple2", 5);
   is(bp.condition, "12", "breakpoint is created with the condition");
   assertEditorBreakpoint(dbg, 5, true);
 
-  dump("Removing a conditional breakpoint\n");
   clickElement(dbg, "gutter", 5);
   await waitForDispatch(dbg, "REMOVE_BREAKPOINT");
   bp = findBreakpoint(dbg, "simple2", 5);

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-standalone/input.js

@@ -0,0 +1,23 @@
+import aDefault from "./src/mod1";
+
+export default function root() {
+  let one = 1;
+
+  {
+    const two = 2;
+
+    var fn = function someName(arg) {
+      console.log(this, arguments);
+      console.log("pause here", aDefault, one, two, fn, arg);
+
+      var inner = (arg) => { var body = "42"; console.log("pause here", body); };
+      inner();
+    };
+    fn.call("this-value", "arg-value");
+  }
+}
+
+// The build harness sets the wrong global, so just override it.
+Promise.resolve().then(() => {
+  window.webpackStandalone = root;
+});

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-standalone/output.js

@@ -0,0 +1,110 @@
+var webpackStandalone =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony export (immutable) */ __webpack_exports__["default"] = root;
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_mod1__ = __webpack_require__(1);
+
+
+function root() {
+  let one = 1;
+
+  {
+    const two = 2;
+
+    var fn = function someName(arg) {
+      console.log(this, arguments);
+      console.log("pause here", __WEBPACK_IMPORTED_MODULE_0__src_mod1__["a" /* default */], one, two, fn, arg);
+
+      var inner = (arg) => { var body = "42"; console.log("pause here", body); };
+      inner();
+    };
+    fn.call("this-value", "arg-value");
+  }
+}
+
+// The build harness sets the wrong global, so just override it.
+Promise.resolve().then(() => {
+  window.webpackStandalone = root;
+});
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony default export */ __webpack_exports__["a"] = ("a-default");
+
+
+/***/ })
+/******/ ]);
+//# sourceMappingURL=output.js.map

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-standalone/output.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap c097356c0822da643365","webpack:///./fixtures/webpack-standalone/input.js","webpack:///./fixtures/webpack-standalone/src/mod1.js"],"names":[],"mappings":";;AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;;AC7DA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA,4BAA4B,iBAAiB,iCAAiC;AAC9E;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC;;;;;;;;ACtBD","file":"fixtures/webpack-standalone/output.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap c097356c0822da643365","import aDefault from \"./src/mod1\";\n\nexport default function root() {\n  let one = 1;\n\n  {\n    const two = 2;\n\n    var fn = function someName(arg) {\n      console.log(this, arguments);\n      console.log(\"pause here\", aDefault, one, two, fn, arg);\n\n      var inner = (arg) => { var body = \"42\"; console.log(\"pause here\", body); };\n      inner();\n    };\n    fn.call(\"this-value\", \"arg-value\");\n  }\n}\n\n// The build harness sets the wrong global, so just override it.\nPromise.resolve().then(() => {\n  window.webpackStandalone = root;\n});\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./fixtures/webpack-standalone/input.js\n// module id = 0\n// module chunks = 0","export default \"a-default\";\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./fixtures/webpack-standalone/src/mod1.js\n// module id = 1\n// module chunks = 0"],"sourceRoot":""}

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-standalone/src/mod1.js

@@ -0,0 +1 @@
+export default "a-default";

devtools/client/debugger/new/test/mochitest/examples/babel/webpack.config.js

@@ -48,6 +48,7 @@ module.exports = [
   }
 ].concat(
   tests.map(({ name, dirname, input, output }) => {
+    const babelEnabled = name !== "webpackStandalone";
     const babelEnv = name !== "webpackModulesEs6";
     const babelModules = name !== "webpackModules";
 
@@ -63,20 +64,23 @@ module.exports = [
       },
       devtool: "sourcemap",
       module: {
-        loaders: [
-          {
-            test: /\.js$/,
-            exclude: /node_modules/,
-            loader: "babel-loader",
-            options: {
-              babelrc: false,
-              presets: babelEnv
-                ? [["env", { modules: babelModules ? "commonjs" : false }]]
-                : [],
-              plugins: babelEnv && babelModules ? ["add-module-exports"] : []
-            }
-          }
-        ]
+        loaders: babelEnabled
+          ? [
+              {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                loader: "babel-loader",
+                options: {
+                  babelrc: false,
+                  presets: babelEnv
+                    ? [["env", { modules: babelModules ? "commonjs" : false }]]
+                    : [],
+                  plugins:
+                    babelEnv && babelModules ? ["add-module-exports"] : []
+                }
+              }
+            ]
+          : []
       }
     };
   })

devtools/client/debugger/new/test/mochitest/examples/doc-babel.html

@@ -53,6 +53,8 @@
     <button onclick="webpackModules()">Run webpackModules</button>
     <script src="babel/fixtures/webpack-modules-es6/output.js"></script>
     <button onclick="webpackModulesEs6()">Run webpackModulesEs6</button>
+    <script src="babel/fixtures/webpack-standalone/output.js"></script>
+    <button onclick="webpackStandalone()">Run webpackStandalone</button>
     <!-- INJECTED-END -->
   </body>
 </html>

devtools/client/debugger/new/test/mochitest/head.js

@@ -951,7 +951,8 @@ const selectors = {
   tooltip: ".tooltip",
   outlineItem: i =>
     `.outline-list__element:nth-child(${i}) .function-signature`,
-  outlineItems: ".outline-list__element"
+  outlineItems: ".outline-list__element",
+  conditionalPanelInput: ".conditional-breakpoint-panel input"
 };
 
 function getSelector(elementName, ...args) {