Bug 1484972 - Update Debugger Frontend v84. r=dwalsh
authorJason Laster <jason.laster.11@gmail.com>
Tue, 21 Aug 2018 20:36:00 +0300
changeset 432836 c9b2f96523b17a7da4a5827e350a11c2b049bbb7
parent 432835 3f1d6721cab0d1668a2441f7b0b7d018f1ac6475
child 432837 9d0deb476c99a94b865b202c58c71ed4cf82caf0
push id34488
push usernerli@mozilla.com
push dateWed, 22 Aug 2018 16:28:54 +0000
treeherdermozilla-central@d6e4d3e69d4c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1484972
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1484972 - Update Debugger Frontend v84. r=dwalsh
devtools/client/debugger/new/README.mozilla
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/dist/vendors.css
devtools/client/debugger/new/dist/vendors.js
devtools/client/debugger/new/src/actions/ast.js
devtools/client/debugger/new/src/actions/pause/index.js
devtools/client/debugger/new/src/actions/pause/moz.build
devtools/client/debugger/new/src/actions/sources/select.js
devtools/client/debugger/new/src/actions/tabs.js
devtools/client/debugger/new/src/components/shared/SourceIcon.js
devtools/client/debugger/new/src/reducers/pause.js
devtools/client/debugger/new/src/reducers/sources.js
devtools/client/debugger/new/src/reducers/tabs.js
devtools/client/debugger/new/src/selectors/visibleBreakpoints.js
devtools/client/debugger/new/src/utils/pause/mapScopes/index.js
devtools/client/debugger/new/src/utils/tabs.js
devtools/client/debugger/new/test/mochitest/browser.ini
devtools/client/debugger/new/test/mochitest/browser_dbg-console-async.js
devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemapped-breakpoint-console.js
devtools/client/debugger/new/test/mochitest/browser_dbg-tabs.js
devtools/client/debugger/new/test/mochitest/examples/doc-sourcemapped.html
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel6/index.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel7/index.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel7/package.json
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel7/yarn.lock
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel6/index.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel7/index.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel7/package.json
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel7/yarn.lock
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel6/index.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel7/index.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel7/package.json
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel7/yarn.lock
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-classes/input.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/babel-classes.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/babel-classes.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/typescript-classes.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/typescript-classes.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel6/babel-classes.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel6/babel-classes.js.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel7/babel-classes.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel7/babel-classes.js.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup/typescript-classes.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel6/babel-classes.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel6/babel-classes.js.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel7/babel-classes.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel7/babel-classes.js.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3/typescript-classes.js.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel6/babel-classes.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel6/babel-classes.js.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel7/babel-classes.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel7/babel-classes.js.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/polyfill-bundle.js
devtools/client/debugger/new/test/mochitest/helpers.js
devtools/client/shared/components/reps/reps.css
devtools/client/shared/components/reps/reps.js
--- a/devtools/client/debugger/new/README.mozilla
+++ b/devtools/client/debugger/new/README.mozilla
@@ -1,13 +1,13 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Version 83
+Version 84
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-82...release-83
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-83...release-84
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.2
 - babel-preset-react @6.24.1
 - react @16.4.1
 - react-dom @16.4.1
 - webpack @3.12.0
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -811,18 +811,19 @@ html[dir="rtl"] .managed-tree .tree .nod
 
 .managed-tree .tree-node button {
   position: fixed;
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
-.tree {
-  overflow: auto;
+ /* We can remove the outline since we do add our own focus style on nodes */
+.tree:focus {
+  outline: none;
 }
 
 .tree.inline {
   display: inline-block;
 }
 
 .tree.nowrap {
   white-space: nowrap;
@@ -3144,17 +3145,19 @@ html[dir="rtl"] .breakpoints-list .break
 
 .breakpoints-list .pause-indicator {
   flex: 0 1 content;
   order: 3;
 }
 
 .breakpoint .close-btn {
   offset-inline-end: 15px;
+  inset-inline-end: 15px;
   offset-inline-start: auto;
+  inset-inline-start: auto;
   position: absolute;
   top: 8px;
   display: none;
 }
 
 .breakpoint:hover .close-btn {
   display: flex;
 }
@@ -3293,16 +3296,17 @@ html[dir="rtl"] .breakpoints-list .break
 
 .tree .tree-node:not(.focused):hover {
   background-color: transparent;
 }
 
 .expression-container__close-btn {
   position: absolute;
   offset-inline-end: 0px;
+  inset-inline-end: 0px;
   top: 1px;
 }
 
 .expression-content {
   position: relative;
 }
 
 .expression-content .tree {
@@ -3966,17 +3970,19 @@ html[dir="rtl"] .object-node {
 .theme-dark .welcomebox {
   background-color: var(--theme-body-background);
 }
 
 .welcomebox .command-bar-button {
   position: absolute;
   top: auto;
   offset-inline-end: 0;
+  inset-inline-end: 0;
   offset-inline-start: auto;
+  inset-inline-start: auto;
   bottom: 0;
 }
 
 .alignlabel {
   display: flex;
   white-space: nowrap;
 }
 
--- a/devtools/client/debugger/new/dist/vendors.css
+++ b/devtools/client/debugger/new/dist/vendors.css
@@ -287,18 +287,19 @@ html[dir="rtl"] .arrow svg,
 
 .source-icon svg {
   fill: var(--theme-comment);
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
-.tree {
-  overflow: auto;
+ /* We can remove the outline since we do add our own focus style on nodes */
+.tree:focus {
+  outline: none;
 }
 
 .tree.inline {
   display: inline-block;
 }
 
 .tree.nowrap {
   white-space: nowrap;
--- a/devtools/client/debugger/new/dist/vendors.js
+++ b/devtools/client/debugger/new/dist/vendors.js
@@ -6520,25 +6520,17 @@ class Tree extends Component {
       tabIndex: "0",
       onKeyDown: this._onKeyDown,
       onKeyPress: this._preventArrowKeyScrolling,
       onKeyUp: this._preventArrowKeyScrolling,
       onFocus: ({ nativeEvent }) => {
         if (focused || !nativeEvent || !this.treeRef) {
           return;
         }
-
-        const { explicitOriginalTarget } = nativeEvent;
-
-        // Only set default focus to the first tree node if the focus came
-        // from outside the tree (e.g. by tabbing to the tree from other
-        // external elements).
-        if (explicitOriginalTarget !== this.treeRef && !this.treeRef.contains(explicitOriginalTarget)) {
-          this._focus(traversal[0].item);
-        }
+        this._focus(traversal[0].item);
       },
       onBlur: this._onBlur,
       "aria-label": this.props.label,
       "aria-labelledby": this.props.labelledby,
       "aria-activedescendant": focused && this.props.getKey(focused),
       style
     }, nodes);
   }
@@ -7143,16 +7135,18 @@ function move(array, moveIndex, toIndex)
 
 "use strict";
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _propTypes = __webpack_require__(3642);
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _react = __webpack_require__(0);
 
 var _react2 = _interopRequireDefault(_react);
 
@@ -7161,112 +7155,145 @@ var _tab = __webpack_require__(3759);
 var _tab2 = _interopRequireDefault(_tab);
 
 var _tabList = __webpack_require__(3764);
 
 var _tabList2 = _interopRequireDefault(_tabList);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class TabList extends _react2.default.Component {
-  constructor(props) {
-    super(props);
-    this.handleKeyPress = this.handleKeyPress.bind(this);
-    this.tabRefs = new Array(_react2.default.Children.count(props.children)).fill(0).map(_ => _react2.default.createRef());
-    this.handlers = this.getHandlers(props.vertical);
-  }
-
-  getHandlers(vertical) {
-    if (vertical) {
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var TabList = function (_React$Component) {
+  _inherits(TabList, _React$Component);
+
+  function TabList(props) {
+    _classCallCheck(this, TabList);
+
+    var _this = _possibleConstructorReturn(this, (TabList.__proto__ || Object.getPrototypeOf(TabList)).call(this, props));
+
+    var childrenCount = _react2.default.Children.count(props.children);
+
+    _this.handleKeyPress = _this.handleKeyPress.bind(_this);
+    _this.tabRefs = new Array(childrenCount).fill(0).map(function () {
+      return _react2.default.createRef();
+    });
+    _this.handlers = _this.getHandlers(props.vertical);
+    return _this;
+  }
+
+  _createClass(TabList, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.activeIndex !== this.props.activeIndex) {
+        this.tabRefs[this.props.activeIndex].current.focus();
+      }
+    }
+  }, {
+    key: 'getHandlers',
+    value: function getHandlers(vertical) {
+      if (vertical) {
+        return {
+          ArrowDown: this.next.bind(this),
+          ArrowUp: this.previous.bind(this)
+        };
+      }
       return {
-        ArrowDown: this.next.bind(this),
-        ArrowUp: this.previous.bind(this)
+        ArrowLeft: this.previous.bind(this),
+        ArrowRight: this.next.bind(this)
       };
     }
-    return {
-      ArrowLeft: this.previous.bind(this),
-      ArrowRight: this.next.bind(this)
-    };
-  }
-
-  wrapIndex(index) {
-    const count = _react2.default.Children.count(this.props.children);
-    return (index + count) % count;
-  }
-
-  handleKeyPress(event) {
-    const handler = this.handlers[event.key];
-    if (handler) {
-      handler();
-    }
-  }
-
-  previous() {
-    const newIndex = this.wrapIndex(this.props.activeIndex - 1);
-    this.props.onActivateTab(newIndex);
-  }
-
-  next() {
-    const newIndex = this.wrapIndex(this.props.activeIndex + 1);
-    this.props.onActivateTab(newIndex);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.activeIndex !== this.props.activeIndex) {
-      this.tabRefs[this.props.activeIndex].current.focus();
-    }
-  }
-
-  render() {
-    var _props = this.props;
-    const accessibleId = _props.accessibleId,
+  }, {
+    key: 'wrapIndex',
+    value: function wrapIndex(index) {
+      var count = _react2.default.Children.count(this.props.children);
+      return (index + count) % count;
+    }
+  }, {
+    key: 'handleKeyPress',
+    value: function handleKeyPress(event) {
+      var handler = this.handlers[event.key];
+      if (handler) {
+        handler();
+      }
+    }
+  }, {
+    key: 'previous',
+    value: function previous() {
+      var newIndex = this.wrapIndex(this.props.activeIndex - 1);
+      this.props.onActivateTab(newIndex);
+    }
+  }, {
+    key: 'next',
+    value: function next() {
+      var newIndex = this.wrapIndex(this.props.activeIndex + 1);
+      this.props.onActivateTab(newIndex);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          accessibleId = _props.accessibleId,
           activeIndex = _props.activeIndex,
           children = _props.children,
           className = _props.className,
           onActivateTab = _props.onActivateTab;
 
 
-    return _react2.default.createElement(
-      'ul',
-      { className: className, onKeyUp: this.handleKeyPress, role: 'tablist' },
-      _react2.default.Children.map(children, (child, index) => {
-        if (child.type !== _tab2.default) {
-          throw new Error('Direct children of a <TabList> must be a <Tab>');
-        }
-
-        const active = index === activeIndex;
-        const tabRef = this.tabRefs[index];
-
-        return _react2.default.cloneElement(child, {
-          accessibleId: active ? accessibleId : undefined,
-          active,
-          tabRef,
-          onActivate: () => this.props.onActivateTab(index)
-        });
-      })
-    );
-  }
-}
+      return _react2.default.createElement(
+        'ul',
+        { className: className, onKeyUp: this.handleKeyPress, role: 'tablist' },
+        _react2.default.Children.map(children, function (child, index) {
+          if (child.type !== _tab2.default) {
+            throw new Error('Direct children of a <TabList> must be a <Tab>');
+          }
+
+          var active = index === activeIndex;
+          var tabRef = _this2.tabRefs[index];
+
+          return _react2.default.cloneElement(child, {
+            accessibleId: active ? accessibleId : undefined,
+            active: active,
+            tabRef: tabRef,
+            onActivate: function onActivate() {
+              return onActivateTab(index);
+            }
+          });
+        })
+      );
+    }
+  }]);
+
+  return TabList;
+}(_react2.default.Component);
 
 exports.default = TabList;
+
+
 TabList.propTypes = {
   accessibleId: _propTypes2.default.string,
   activeIndex: _propTypes2.default.number,
   children: _propTypes2.default.node,
   className: _propTypes2.default.string,
   onActivateTab: _propTypes2.default.func,
   vertical: _propTypes2.default.bool
 };
 
 TabList.defaultProps = {
   accessibleId: undefined,
   activeIndex: 0,
   children: null,
   className: _tabList2.default.container,
-  onActivateTab: () => {},
+  onActivateTab: function onActivateTab() {},
   vertical: false
 };
 
 /***/ }),
 
 /***/ 3759:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -7281,52 +7308,57 @@ exports.default = Tab;
 var _propTypes = __webpack_require__(3642);
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _react = __webpack_require__(0);
 
 var _react2 = _interopRequireDefault(_react);
 
+var _ref2 = __webpack_require__(3784);
+
+var _ref3 = _interopRequireDefault(_ref2);
+
 var _tab = __webpack_require__(3763);
 
 var _tab2 = _interopRequireDefault(_tab);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function Tab({
-  accessibleId,
-  active,
-  children,
-  className,
-  onActivate,
-  tabRef
-}) {
+function Tab(_ref) {
+  var accessibleId = _ref.accessibleId,
+      active = _ref.active,
+      children = _ref.children,
+      className = _ref.className,
+      onActivate = _ref.onActivate,
+      tabRef = _ref.tabRef;
+
   return _react2.default.createElement(
     'li',
     {
       'aria-selected': active,
       className: className,
       id: accessibleId,
       onClick: onActivate,
+      onKeyDown: function onKeyDown() {},
       ref: tabRef,
       role: 'tab',
       tabIndex: active ? 0 : undefined
     },
     children
   );
 }
 
 Tab.propTypes = {
   accessibleId: _propTypes2.default.string,
   active: _propTypes2.default.bool,
-  children: _propTypes2.default.node,
+  children: _propTypes2.default.node.isRequired,
   className: _propTypes2.default.string,
   onActivate: _propTypes2.default.func,
-  tabRef: _propTypes2.default.object
+  tabRef: _ref3.default
 };
 
 Tab.defaultProps = {
   accessibleId: undefined,
   active: false,
   className: _tab2.default.container,
   onActivate: undefined,
   tabRef: undefined
@@ -7350,39 +7382,39 @@ var _propTypes = __webpack_require__(364
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _react = __webpack_require__(0);
 
 var _react2 = _interopRequireDefault(_react);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function TabPanels({
-  accessibleId,
-  activeIndex,
-  children,
-  className,
-  hasFocusableContent
-}) {
+function TabPanels(_ref) {
+  var accessibleId = _ref.accessibleId,
+      activeIndex = _ref.activeIndex,
+      children = _ref.children,
+      className = _ref.className,
+      hasFocusableContent = _ref.hasFocusableContent;
+
   return _react2.default.createElement(
     'div',
     {
       'aria-labelledby': accessibleId,
       role: 'tabpanel',
       className: className,
       tabIndex: hasFocusableContent ? undefined : 0
     },
     _react2.default.Children.toArray(children)[activeIndex]
   );
 }
 
 TabPanels.propTypes = {
   accessibleId: _propTypes2.default.string,
   activeIndex: _propTypes2.default.number,
-  children: _propTypes2.default.node,
+  children: _propTypes2.default.node.isRequired,
   className: _propTypes2.default.string,
   hasFocusableContent: _propTypes2.default.bool.isRequired
 };
 
 TabPanels.defaultProps = {
   accessibleId: undefined,
   activeIndex: 0,
   className: null
@@ -7459,16 +7491,18 @@ function _interopRequireDefault(obj) { r
 
 "use strict";
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _propTypes = __webpack_require__(3642);
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _react = __webpack_require__(0);
 
 var _react2 = _interopRequireDefault(_react);
 
@@ -7481,83 +7515,102 @@ var _tabList = __webpack_require__(3758)
 var _tabList2 = _interopRequireDefault(_tabList);
 
 var _tabPanels = __webpack_require__(3760);
 
 var _tabPanels2 = _interopRequireDefault(_tabPanels);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class Tabs extends _react2.default.Component {
-  constructor() {
-    super();
-    this.accessibleId = (0, _uniqueId2.default)();
-  }
-
-  render() {
-    var _props = this.props;
-    const activeIndex = _props.activeIndex,
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Tabs = function (_React$Component) {
+  _inherits(Tabs, _React$Component);
+
+  function Tabs() {
+    _classCallCheck(this, Tabs);
+
+    var _this = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this));
+
+    _this.accessibleId = (0, _uniqueId2.default)();
+    return _this;
+  }
+
+  _createClass(Tabs, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          activeIndex = _props.activeIndex,
           children = _props.children,
           className = _props.className,
           onActivateTab = _props.onActivateTab;
 
-    const accessibleId = this.accessibleId;
-
-    return _react2.default.createElement(
-      'div',
-      { className: className },
-      _react2.default.Children.map(children, child => {
-        if (!child) {
-          return child;
-        }
-
-        switch (child.type) {
-          case _tabList2.default:
-            return _react2.default.cloneElement(child, { accessibleId, activeIndex, onActivateTab });
-          case _tabPanels2.default:
-            return _react2.default.cloneElement(child, { accessibleId, activeIndex });
-          default:
+      var accessibleId = this.accessibleId;
+
+      return _react2.default.createElement(
+        'div',
+        { className: className },
+        _react2.default.Children.map(children, function (child) {
+          if (!child) {
             return child;
-        }
-      })
-    );
-  }
-}
+          }
+
+          switch (child.type) {
+            case _tabList2.default:
+              return _react2.default.cloneElement(child, { accessibleId: accessibleId, activeIndex: activeIndex, onActivateTab: onActivateTab });
+            case _tabPanels2.default:
+              return _react2.default.cloneElement(child, { accessibleId: accessibleId, activeIndex: activeIndex });
+            default:
+              return child;
+          }
+        })
+      );
+    }
+  }]);
+
+  return Tabs;
+}(_react2.default.Component);
 
 exports.default = Tabs;
+
+
 Tabs.propTypes = {
   activeIndex: _propTypes2.default.number.isRequired,
   children: _propTypes2.default.node,
   className: _propTypes2.default.string,
   onActivateTab: _propTypes2.default.func
 };
 
 Tabs.defaultProps = {
   children: null,
   className: undefined,
-  onActivateTab: () => {}
+  onActivateTab: function onActivateTab() {}
 };
 
 /***/ }),
 
 /***/ 3766:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = uniqueId;
-let counter = 0;
+var counter = 0;
 
 function uniqueId() {
-  counter++;
-  return `$rac$${counter}`;
+  counter += 1;
+  return "$rac$" + counter;
 }
 
 /***/ }),
 
 /***/ 3769:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -7913,16 +7966,36 @@ function polyfill(Component) {
   return Component;
 }
 
 
 
 
 /***/ }),
 
+/***/ 3784:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _propTypes = __webpack_require__(3642);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _propTypes2.default.object;
+
+/***/ }),
+
 /***/ 4:
 /***/ (function(module, exports) {
 
 module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
 
 /***/ }),
 
 /***/ 52:
--- a/devtools/client/debugger/new/src/actions/ast.js
+++ b/devtools/client/debugger/new/src/actions/ast.js
@@ -7,16 +7,18 @@ exports.setSourceMetaData = setSourceMet
 exports.setSymbols = setSymbols;
 exports.setOutOfScopeLocations = setOutOfScopeLocations;
 exports.setPausePoints = setPausePoints;
 
 var _selectors = require("../selectors/index");
 
 var _pause = require("./pause/index");
 
+var _tabs = require("./tabs");
+
 var _setInScopeLines = require("./ast/setInScopeLines");
 
 var _parser = require("../workers/parser/index");
 
 var _promise = require("./utils/middleware/promise");
 
 var _devtoolsSourceMap = require("devtools/client/shared/source-map/index.js");
 
@@ -34,16 +36,17 @@ function setSourceMetaData(sourceId) {
   }) => {
     const source = (0, _selectors.getSource)(getState(), sourceId);
 
     if (!source || !(0, _source.isLoaded)(source) || source.isWasm) {
       return;
     }
 
     const framework = await (0, _parser.getFramework)(source.id);
+    dispatch((0, _tabs.updateTab)(source.url, framework));
     dispatch({
       type: "SET_SOURCE_METADATA",
       sourceId: source.id,
       sourceMetaData: {
         framework
       }
     });
   };
--- a/devtools/client/debugger/new/src/actions/pause/index.js
+++ b/devtools/client/debugger/new/src/actions/pause/index.js
@@ -137,25 +137,16 @@ var _pauseOnExceptions = require("./paus
 
 Object.defineProperty(exports, "pauseOnExceptions", {
   enumerable: true,
   get: function () {
     return _pauseOnExceptions.pauseOnExceptions;
   }
 });
 
-var _selectComponent = require("./selectComponent");
-
-Object.defineProperty(exports, "selectComponent", {
-  enumerable: true,
-  get: function () {
-    return _selectComponent.selectComponent;
-  }
-});
-
 var _selectFrame = require("./selectFrame");
 
 Object.defineProperty(exports, "selectFrame", {
   enumerable: true,
   get: function () {
     return _selectFrame.selectFrame;
   }
 });
--- a/devtools/client/debugger/new/src/actions/pause/moz.build
+++ b/devtools/client/debugger/new/src/actions/pause/moz.build
@@ -14,13 +14,12 @@ DevToolsModules(
     'extra.js',
     'fetchScopes.js',
     'index.js',
     'mapFrames.js',
     'mapScopes.js',
     'paused.js',
     'pauseOnExceptions.js',
     'resumed.js',
-    'selectComponent.js',
     'selectFrame.js',
     'setPopupObjectProperties.js',
     'skipPausing.js',
 )
--- a/devtools/client/debugger/new/src/actions/sources/select.js
+++ b/devtools/client/debugger/new/src/actions/sources/select.js
@@ -149,17 +149,17 @@ function selectLocation(location, {
 
     const selectedSource = (0, _selectors.getSelectedSource)(getState());
 
     if (keepContext && selectedSource && (0, _devtoolsSourceMap.isOriginalId)(selectedSource.id) != (0, _devtoolsSourceMap.isOriginalId)(location.sourceId)) {
       location = await (0, _sourceMaps.getMappedLocation)(getState(), sourceMaps, location);
       source = (0, _sources.getSourceFromId)(getState(), location.sourceId);
     }
 
-    dispatch((0, _tabs.addTab)(source.url, 0));
+    dispatch((0, _tabs.addTab)(source.url));
     dispatch(setSelectedLocation(source, location));
     await dispatch((0, _loadSourceText.loadSourceText)(source));
     const loadedSource = (0, _selectors.getSource)(getState(), source.id);
 
     if (!loadedSource) {
       // If there was a navigation while we were loading the loadedSource
       return;
     }
--- a/devtools/client/debugger/new/src/actions/tabs.js
+++ b/devtools/client/debugger/new/src/actions/tabs.js
@@ -1,13 +1,14 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.updateTab = updateTab;
 exports.addTab = addTab;
 exports.moveTab = moveTab;
 exports.closeTab = closeTab;
 exports.closeTabs = closeTabs;
 
 var _editor = require("../utils/editor/index");
 
 var _sources = require("./sources/index");
@@ -17,21 +18,29 @@ var _selectors = require("../selectors/i
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/>. */
 
 /**
  * Redux actions for the editor tabs
  * @module actions/tabs
  */
-function addTab(url, tabIndex) {
+function updateTab(url, framework) {
+  return {
+    type: "UPDATE_TAB",
+    url,
+    framework
+  };
+}
+
+function addTab(url, framework) {
   return {
     type: "ADD_TAB",
     url,
-    tabIndex
+    framework
   };
 }
 
 function moveTab(url, tabIndex) {
   return {
     type: "MOVE_TAB",
     url,
     tabIndex
--- a/devtools/client/debugger/new/src/components/shared/SourceIcon.js
+++ b/devtools/client/debugger/new/src/components/shared/SourceIcon.js
@@ -7,40 +7,44 @@ Object.defineProperty(exports, "__esModu
 var _react = require("devtools/client/shared/vendor/react");
 
 var _react2 = _interopRequireDefault(_react);
 
 var _reactRedux = require("devtools/client/shared/vendor/react-redux");
 
 var _source = require("../../utils/source");
 
+var _tabs = require("../../utils/tabs");
+
 var _selectors = require("../../selectors/index");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/>. */
 class SourceIcon extends _react.PureComponent {
   render() {
     const {
       shouldHide,
       source,
-      sourceMetaData
+      sourceMetaData,
+      framework
     } = this.props;
-    const iconClass = (0, _source.getSourceClassnames)(source, sourceMetaData);
+    const iconClass = framework ? framework.toLowerCase() : (0, _source.getSourceClassnames)(source, sourceMetaData);
 
     if (shouldHide && shouldHide(iconClass)) {
       return null;
     }
 
     return _react2.default.createElement("img", {
       className: `source-icon ${iconClass}`
     });
   }
 
 }
 
 exports.default = (0, _reactRedux.connect)((state, props) => {
   return {
-    sourceMetaData: (0, _selectors.getSourceMetaData)(state, props.source.id)
+    sourceMetaData: (0, _selectors.getSourceMetaData)(state, props.source.id),
+    framework: (0, _tabs.getFramework)((0, _selectors.getTabs)(state), props.source.url)
   };
 })(SourceIcon);
\ No newline at end of file
--- a/devtools/client/debugger/new/src/reducers/pause.js
+++ b/devtools/client/debugger/new/src/reducers/pause.js
@@ -21,17 +21,16 @@ exports.getFrames = getFrames;
 exports.getGeneratedFrameScope = getGeneratedFrameScope;
 exports.getOriginalFrameScope = getOriginalFrameScope;
 exports.getFrameScopes = getFrameScopes;
 exports.getSelectedFrameBindings = getSelectedFrameBindings;
 exports.getFrameScope = getFrameScope;
 exports.getSelectedScope = getSelectedScope;
 exports.getSelectedScopeMappings = getSelectedScopeMappings;
 exports.getSelectedFrameId = getSelectedFrameId;
-exports.getSelectedComponentIndex = getSelectedComponentIndex;
 exports.getTopFrame = getTopFrame;
 exports.getDebuggeeUrl = getDebuggeeUrl;
 exports.getSkipPausing = getSkipPausing;
 exports.getChromeScopes = getChromeScopes;
 
 var _reselect = require("devtools/client/debugger/new/dist/vendors").vendored["reselect"];
 
 var _devtoolsSourceMap = require("devtools/client/shared/source-map/index.js");
@@ -45,29 +44,19 @@ var _sources = require("./sources");
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 /* eslint complexity: ["error", 30]*/
 
 /**
  * Pause reducer
  * @module reducers/pause
  */
-const createPauseState = exports.createPauseState = () => ({
+const createPauseState = exports.createPauseState = () => ({ ...emptyPauseState,
   extra: {},
-  why: null,
   isWaitingOnBreak: false,
-  frames: undefined,
-  selectedFrameId: undefined,
-  selectedComponentIndex: undefined,
-  frameScopes: {
-    generated: {},
-    original: {},
-    mappings: {}
-  },
-  loadedObjects: {},
   shouldPauseOnExceptions: _prefs.prefs.pauseOnExceptions,
   shouldPauseOnCaughtExceptions: _prefs.prefs.pauseOnCaughtExceptions,
   canRewind: false,
   debuggeeUrl: "",
   command: null,
   previousLocation: null,
   skipPausing: _prefs.prefs.skipPausing
 });
@@ -180,21 +169,16 @@ function update(state = createPauseState
         isWaitingOnBreak: true
       };
 
     case "SELECT_FRAME":
       return { ...state,
         selectedFrameId: action.frame.id
       };
 
-    case "SELECT_COMPONENT":
-      return { ...state,
-        selectedComponentIndex: action.componentIndex
-      };
-
     case "SET_POPUP_OBJECT_PROPERTIES":
       if (!action.properties) {
         return { ...state
         };
       }
 
       return { ...state,
         loadedObjects: { ...state.loadedObjects,
@@ -443,20 +427,16 @@ function getSelectedScopeMappings(state)
 
   return getFrameScopes(state).mappings[frameId];
 }
 
 function getSelectedFrameId(state) {
   return state.pause.selectedFrameId;
 }
 
-function getSelectedComponentIndex(state) {
-  return state.pause.selectedComponentIndex;
-}
-
 function getTopFrame(state) {
   const frames = getFrames(state);
   return frames && frames[0];
 }
 
 const getSelectedFrame = exports.getSelectedFrame = (0, _reselect.createSelector)(getSelectedFrameId, getFrames, (selectedFrameId, frames) => {
   if (!frames) {
     return null;
--- a/devtools/client/debugger/new/src/reducers/sources.js
+++ b/devtools/client/debugger/new/src/reducers/sources.js
@@ -68,28 +68,28 @@ function createSource(source) {
 
 function update(state = initialSourcesState(), action) {
   let location = null;
 
   switch (action.type) {
     case "UPDATE_SOURCE":
       {
         const source = action.source;
-        return updateSource(state, source);
+        return updateSources(state, [source]);
       }
 
     case "ADD_SOURCE":
       {
         const source = action.source;
-        return updateSource(state, source);
+        return updateSources(state, [source]);
       }
 
     case "ADD_SOURCES":
       {
-        return action.sources.reduce((newState, source) => updateSource(newState, source), state);
+        return updateSources(state, action.sources);
       }
 
     case "SET_SELECTED_LOCATION":
       location = { ...action.location,
         url: action.source.url
       };
       _prefs.prefs.pendingSelectedLocation = location;
       return { ...state,
@@ -128,20 +128,20 @@ function update(state = initialSourcesSt
         const {
           id,
           url
         } = action.source;
         const {
           isBlackBoxed
         } = action.value;
         updateBlackBoxList(url, isBlackBoxed);
-        return updateSource(state, {
+        return updateSources(state, [{
           id,
           isBlackBoxed
-        });
+        }]);
       }
 
       break;
 
     case "SET_PROJECT_DIRECTORY_ROOT":
       return recalculateRelativeSources(state, action.url);
 
     case "NAVIGATE":
@@ -174,53 +174,58 @@ function getTextPropsFromAction(action) 
     return {
       id: sourceId,
       error: action.error,
       loadedState: "loaded"
     };
   }
 
   return {
+    id: sourceId,
     text: action.value.text,
-    id: sourceId,
     contentType: action.value.contentType,
     loadedState: "loaded"
   };
 } // TODO: Action is coerced to `any` unfortunately because how we type
 // asynchronous actions is wrong. The `value` may be null for the
 // "start" and "error" states but we don't type it like that. We need
 // to rethink how we type async actions.
 
 
 function setSourceTextProps(state, action) {
-  const text = getTextPropsFromAction(action);
-  return updateSource(state, text);
+  const source = getTextPropsFromAction(action);
+  return updateSources(state, [source]);
+}
+
+function updateSources(state, sources) {
+  state = { ...state,
+    sources: { ...state.sources
+    },
+    relativeSources: { ...state.relativeSources
+    },
+    urls: { ...state.urls
+    }
+  };
+  return sources.reduce((newState, source) => updateSource(newState, source), state);
 }
 
 function updateSource(state, source) {
   if (!source.id) {
     return state;
   }
 
   const existingSource = state.sources[source.id];
   const updatedSource = existingSource ? { ...existingSource,
     ...source
   } : createSource(source);
+  state.sources[source.id] = updatedSource;
   const existingUrls = state.urls[source.url];
-  const urls = existingUrls ? [...existingUrls, source.id] : [source.id];
-  return { ...state,
-    relativeSources: updateRelativeSource({ ...state.relativeSources
-    }, updatedSource, state.projectDirectoryRoot),
-    sources: { ...state.sources,
-      [source.id]: updatedSource
-    },
-    urls: { ...state.urls,
-      [source.url]: urls
-    }
-  };
+  state.urls[source.url] = existingUrls ? [...existingUrls, source.id] : [source.id];
+  updateRelativeSource(state.relativeSources, updatedSource, state.projectDirectoryRoot);
+  return state;
 }
 
 function updateRelativeSource(relativeSources, source, root) {
   if (!(0, _source.underRoot)(source, root)) {
     return relativeSources;
   }
 
   const relativeSource = { ...source,
--- a/devtools/client/debugger/new/src/reducers/tabs.js
+++ b/devtools/client/debugger/new/src/reducers/tabs.js
@@ -26,57 +26,74 @@ function _interopRequireDefault(obj) { r
 
 /**
  * Tabs reducer
  * @module reducers/tabs
  */
 function update(state = _prefs.prefs.tabs || [], action) {
   switch (action.type) {
     case "ADD_TAB":
-      return updateTabList(state, action.url);
+    case "UPDATE_TAB":
+      return updateTabList(state, action);
 
     case "MOVE_TAB":
-      return updateTabList(state, action.url, action.tabIndex);
+      return moveTabInList(state, action);
 
     case "CLOSE_TAB":
     case "CLOSE_TABS":
       _prefs.prefs.tabs = action.tabs;
       return action.tabs;
 
     default:
       return state;
   }
 }
 
 function removeSourceFromTabList(tabs, url) {
-  return tabs.filter(tab => tab !== url);
+  return tabs.filter(tab => tab.url !== url);
 }
 
 function removeSourcesFromTabList(tabs, urls) {
   return urls.reduce((t, url) => removeSourceFromTabList(t, url), tabs);
 }
 /**
  * Adds the new source to the tab list if it is not already there
  * @memberof reducers/tabs
  * @static
  */
 
 
-function updateTabList(tabs, url, newIndex) {
-  const currentIndex = tabs.indexOf(url);
+function updateTabList(tabs, {
+  url,
+  framework = null
+}) {
+  const currentIndex = tabs.findIndex(tab => tab.url == url);
 
   if (currentIndex === -1) {
-    tabs = [url, ...tabs];
-  } else if (newIndex !== undefined) {
-    tabs = (0, _lodashMove2.default)(tabs, currentIndex, newIndex);
+    tabs = [{
+      url,
+      framework
+    }, ...tabs];
+  } else if (framework) {
+    tabs[currentIndex].framework = framework;
   }
 
   _prefs.prefs.tabs = tabs;
   return tabs;
 }
+
+function moveTabInList(tabs, {
+  url,
+  tabIndex: newIndex
+}) {
+  const currentIndex = tabs.findIndex(tab => tab.url == url);
+  tabs = (0, _lodashMove2.default)(tabs, currentIndex, newIndex);
+  _prefs.prefs.tabs = tabs;
+  return tabs;
+}
 /**
  * Gets the next tab to select when a tab closes. Heuristics:
  * 1. if the selected tab is available, it remains selected
  * 2. if it is gone, the next available tab to the left should be active
  * 3. if the first tab is active and closed, select the second tab
  *
  * @memberof reducers/tabs
  * @static
@@ -91,53 +108,58 @@ function getNewSelectedSourceId(state, a
   }
 
   const selectedTab = (0, _sources.getSource)(state, selectedLocation.sourceId);
 
   if (!selectedTab) {
     return "";
   }
 
-  if (availableTabs.includes(selectedTab.url)) {
+  const matchingTab = availableTabs.find(tab => tab.url == selectedTab.url);
+
+  if (matchingTab) {
     const sources = state.sources.sources;
 
     if (!sources) {
       return "";
     }
 
     const selectedSource = (0, _sources.getSourceByURL)(state, selectedTab.url);
 
     if (selectedSource) {
       return selectedSource.id;
     }
 
     return "";
   }
 
-  const tabUrls = state.tabs;
+  const tabUrls = state.tabs.map(t => t.url);
   const leftNeighborIndex = Math.max(tabUrls.indexOf(selectedTab.url) - 1, 0);
   const lastAvailbleTabIndex = availableTabs.length - 1;
   const newSelectedTabIndex = Math.min(leftNeighborIndex, lastAvailbleTabIndex);
   const availableTab = availableTabs[newSelectedTabIndex];
-  const tabSource = (0, _sources.getSourceByUrlInSources)((0, _sources.getSources)(state), (0, _sources.getUrls)(state), availableTab);
+
+  if (availableTab) {
+    const tabSource = (0, _sources.getSourceByUrlInSources)((0, _sources.getSources)(state), (0, _sources.getUrls)(state), availableTab.url);
 
-  if (tabSource) {
-    return tabSource.id;
+    if (tabSource) {
+      return tabSource.id;
+    }
   }
 
   return "";
 } // Selectors
 // Unfortunately, it's really hard to make these functions accept just
 // the state that we care about and still type it with Flow. The
 // problem is that we want to re-export all selectors from a single
 // module for the UI, and all of those selectors should take the
 // top-level app state, so we'd have to "wrap" them to automatically
 // pick off the piece of state we're interested in. It's impossible
 // (right now) to type those wrapped functions.
 
 
 const getTabs = exports.getTabs = state => state.tabs;
 
-const getSourceTabs = exports.getSourceTabs = (0, _reselect.createSelector)(getTabs, _sources.getSources, _sources.getUrls, (tabs, sources, urls) => tabs.filter(tab => (0, _sources.getSourceByUrlInSources)(sources, urls, tab)));
+const getSourceTabs = exports.getSourceTabs = (0, _reselect.createSelector)(getTabs, _sources.getSources, _sources.getUrls, (tabs, sources, urls) => tabs.filter(tab => (0, _sources.getSourceByUrlInSources)(sources, urls, tab.url)));
 const getSourcesForTabs = exports.getSourcesForTabs = (0, _reselect.createSelector)(getSourceTabs, _sources.getSources, _sources.getUrls, (tabs, sources, urls) => {
-  return tabs.map(tab => (0, _sources.getSourceByUrlInSources)(sources, urls, tab)).filter(source => source);
+  return tabs.map(tab => (0, _sources.getSourceByUrlInSources)(sources, urls, tab.url)).filter(source => source);
 });
 exports.default = update;
\ No newline at end of file
--- a/devtools/client/debugger/new/src/selectors/visibleBreakpoints.js
+++ b/devtools/client/debugger/new/src/selectors/visibleBreakpoints.js
@@ -1,58 +1,71 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getVisibleBreakpoints = getVisibleBreakpoints;
+exports.getVisibleBreakpoints = undefined;
 
 var _breakpoints = require("../reducers/breakpoints");
 
 var _sources = require("../reducers/sources");
 
 var _devtoolsSourceMap = require("devtools/client/shared/source-map/index.js");
 
+var _reselect = require("devtools/client/debugger/new/dist/vendors").vendored["reselect"];
+
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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 getLocation(breakpoint, isGeneratedSource) {
   return isGeneratedSource ? breakpoint.generatedLocation || breakpoint.location : breakpoint.location;
 }
 
-function formatBreakpoint(breakpoint, selectedSource) {
+function memoize(func) {
+  const store = new WeakMap();
+  return function (key, ...rest) {
+    if (store.has(key)) {
+      return store.get(key);
+    }
+
+    const value = func.apply(null, arguments);
+    store.set(key, value);
+    return value;
+  };
+}
+
+const formatBreakpoint = memoize(function (breakpoint, selectedSource) {
   const {
     condition,
     loading,
     disabled,
     hidden
   } = breakpoint;
   const sourceId = selectedSource.id;
   const isGeneratedSource = (0, _devtoolsSourceMap.isGeneratedId)(sourceId);
   return {
     location: getLocation(breakpoint, isGeneratedSource),
     condition,
     loading,
     disabled,
     hidden
   };
-}
+});
 
 function isVisible(breakpoint, selectedSource) {
   const sourceId = selectedSource.id;
   const isGeneratedSource = (0, _devtoolsSourceMap.isGeneratedId)(sourceId);
   const location = getLocation(breakpoint, isGeneratedSource);
   return location.sourceId === sourceId;
 }
 /*
  * Finds the breakpoints, which appear in the selected source.
   */
 
 
-function getVisibleBreakpoints(state) {
-  const selectedSource = (0, _sources.getSelectedSource)(state);
-
+const getVisibleBreakpoints = exports.getVisibleBreakpoints = (0, _reselect.createSelector)(_sources.getSelectedSource, _breakpoints.getBreakpoints, (selectedSource, breakpoints) => {
   if (!selectedSource) {
     return null;
   }
 
-  return (0, _breakpoints.getBreakpoints)(state).filter(bp => isVisible(bp, selectedSource)).map(bp => formatBreakpoint(bp, selectedSource));
-}
\ No newline at end of file
+  return breakpoints.filter(bp => isVisible(bp, selectedSource)).map(bp => formatBreakpoint(bp, selectedSource));
+});
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/pause/mapScopes/index.js
+++ b/devtools/client/debugger/new/src/utils/pause/mapScopes/index.js
@@ -336,17 +336,17 @@ async function findGeneratedBinding(sour
           unscoped: true,
           // HACK: Until support for "unscoped" lands in devtools-reps,
           // this will make these show as (unavailable).
           missingArguments: true
         }
       },
       expression: null
     };
-  } else if (!hadApplicableBindings) {
+  } else if (!hadApplicableBindings && name !== "this") {
     // If there were no applicable bindings to consider while searching for
     // matching bindings, then the source map for this file didn't make any
     // attempt to map the binding, and that most likely means that the
     // code was entirely emitted from the output code.
     return {
       grip: {
         configurable: false,
         enumerable: true,
--- a/devtools/client/debugger/new/src/utils/tabs.js
+++ b/devtools/client/debugger/new/src/utils/tabs.js
@@ -1,14 +1,15 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getHiddenTabs = getHiddenTabs;
+exports.getFramework = getFramework;
 exports.getTabMenuItems = getTabMenuItems;
 
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/>. */
 
 /*
  * Finds the hidden tabs by comparing the tabs' top offset.
@@ -35,16 +36,26 @@ function getHiddenTabs(sourceTabs, sourc
   }
 
   return sourceTabs.filter((tab, index) => {
     const element = sourceTabEls[index];
     return element && hasTopOffset(element);
   });
 }
 
+function getFramework(tabs, url) {
+  const tab = tabs.find(t => t.url === url);
+
+  if (tab) {
+    return tab.framework;
+  }
+
+  return "";
+}
+
 function getTabMenuItems() {
   return {
     closeTab: {
       id: "node-menu-close-tab",
       label: L10N.getStr("sourceTabs.closeTab"),
       accesskey: L10N.getStr("sourceTabs.closeTab.accesskey"),
       disabled: false
     },
--- a/devtools/client/debugger/new/test/mochitest/browser.ini
+++ b/devtools/client/debugger/new/test/mochitest/browser.ini
@@ -6,16 +6,18 @@ support-files =
   head.js
   helpers.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
   ## START-SOURCEMAPPED-FIXTURES - Generated by examples/sourcemapped/build.js
   examples/sourcemapped/polyfill-bundle.js
   examples/sourcemapped/output/parcel/babel-bindings-with-flow.js
   examples/sourcemapped/output/parcel/babel-bindings-with-flow.map
+  examples/sourcemapped/output/parcel/babel-classes.js
+  examples/sourcemapped/output/parcel/babel-classes.map
   examples/sourcemapped/output/parcel/babel-flowtype-bindings.js
   examples/sourcemapped/output/parcel/babel-flowtype-bindings.map
   examples/sourcemapped/output/parcel/classes.js
   examples/sourcemapped/output/parcel/classes.map
   examples/sourcemapped/output/parcel/esmodules.js
   examples/sourcemapped/output/parcel/esmodules.map
   examples/sourcemapped/output/parcel/esmodules-cjs.js
   examples/sourcemapped/output/parcel/esmodules-cjs.map
@@ -118,16 +120,18 @@ support-files =
   examples/sourcemapped/output/webpack3/typescript-classes.js
   examples/sourcemapped/output/webpack3/typescript-classes.js.map
   examples/sourcemapped/output/webpack3/webpack-functions.js
   examples/sourcemapped/output/webpack3/webpack-functions.js.map
   examples/sourcemapped/output/webpack3/webpack-line-mappings.js
   examples/sourcemapped/output/webpack3/webpack-line-mappings.js.map
   examples/sourcemapped/output/webpack3-babel6/babel-bindings-with-flow.js
   examples/sourcemapped/output/webpack3-babel6/babel-bindings-with-flow.js.map
+  examples/sourcemapped/output/webpack3-babel6/babel-classes.js
+  examples/sourcemapped/output/webpack3-babel6/babel-classes.js.map
   examples/sourcemapped/output/webpack3-babel6/babel-flowtype-bindings.js
   examples/sourcemapped/output/webpack3-babel6/babel-flowtype-bindings.js.map
   examples/sourcemapped/output/webpack3-babel6/classes.js
   examples/sourcemapped/output/webpack3-babel6/classes.js.map
   examples/sourcemapped/output/webpack3-babel6/esmodules.js
   examples/sourcemapped/output/webpack3-babel6/esmodules.js.map
   examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js
   examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js.map
@@ -174,16 +178,18 @@ support-files =
   examples/sourcemapped/output/webpack3-babel6/type-script-cjs.js
   examples/sourcemapped/output/webpack3-babel6/type-script-cjs.js.map
   examples/sourcemapped/output/webpack3-babel6/webpack-functions.js
   examples/sourcemapped/output/webpack3-babel6/webpack-functions.js.map
   examples/sourcemapped/output/webpack3-babel6/webpack-line-mappings.js
   examples/sourcemapped/output/webpack3-babel6/webpack-line-mappings.js.map
   examples/sourcemapped/output/webpack3-babel7/babel-bindings-with-flow.js
   examples/sourcemapped/output/webpack3-babel7/babel-bindings-with-flow.js.map
+  examples/sourcemapped/output/webpack3-babel7/babel-classes.js
+  examples/sourcemapped/output/webpack3-babel7/babel-classes.js.map
   examples/sourcemapped/output/webpack3-babel7/babel-flowtype-bindings.js
   examples/sourcemapped/output/webpack3-babel7/babel-flowtype-bindings.js.map
   examples/sourcemapped/output/webpack3-babel7/classes.js
   examples/sourcemapped/output/webpack3-babel7/classes.js.map
   examples/sourcemapped/output/webpack3-babel7/esmodules.js
   examples/sourcemapped/output/webpack3-babel7/esmodules.js.map
   examples/sourcemapped/output/webpack3-babel7/esmodules-cjs.js
   examples/sourcemapped/output/webpack3-babel7/esmodules-cjs.js.map
@@ -284,16 +290,18 @@ support-files =
   examples/sourcemapped/output/webpack4/typescript-classes.js
   examples/sourcemapped/output/webpack4/typescript-classes.js.map
   examples/sourcemapped/output/webpack4/webpack-functions.js
   examples/sourcemapped/output/webpack4/webpack-functions.js.map
   examples/sourcemapped/output/webpack4/webpack-line-mappings.js
   examples/sourcemapped/output/webpack4/webpack-line-mappings.js.map
   examples/sourcemapped/output/webpack4-babel6/babel-bindings-with-flow.js
   examples/sourcemapped/output/webpack4-babel6/babel-bindings-with-flow.js.map
+  examples/sourcemapped/output/webpack4-babel6/babel-classes.js
+  examples/sourcemapped/output/webpack4-babel6/babel-classes.js.map
   examples/sourcemapped/output/webpack4-babel6/babel-flowtype-bindings.js
   examples/sourcemapped/output/webpack4-babel6/babel-flowtype-bindings.js.map
   examples/sourcemapped/output/webpack4-babel6/classes.js
   examples/sourcemapped/output/webpack4-babel6/classes.js.map
   examples/sourcemapped/output/webpack4-babel6/esmodules.js
   examples/sourcemapped/output/webpack4-babel6/esmodules.js.map
   examples/sourcemapped/output/webpack4-babel6/esmodules-cjs.js
   examples/sourcemapped/output/webpack4-babel6/esmodules-cjs.js.map
@@ -340,16 +348,18 @@ support-files =
   examples/sourcemapped/output/webpack4-babel6/type-script-cjs.js
   examples/sourcemapped/output/webpack4-babel6/type-script-cjs.js.map
   examples/sourcemapped/output/webpack4-babel6/webpack-functions.js
   examples/sourcemapped/output/webpack4-babel6/webpack-functions.js.map
   examples/sourcemapped/output/webpack4-babel6/webpack-line-mappings.js
   examples/sourcemapped/output/webpack4-babel6/webpack-line-mappings.js.map
   examples/sourcemapped/output/webpack4-babel7/babel-bindings-with-flow.js
   examples/sourcemapped/output/webpack4-babel7/babel-bindings-with-flow.js.map
+  examples/sourcemapped/output/webpack4-babel7/babel-classes.js
+  examples/sourcemapped/output/webpack4-babel7/babel-classes.js.map
   examples/sourcemapped/output/webpack4-babel7/babel-flowtype-bindings.js
   examples/sourcemapped/output/webpack4-babel7/babel-flowtype-bindings.js.map
   examples/sourcemapped/output/webpack4-babel7/classes.js
   examples/sourcemapped/output/webpack4-babel7/classes.js.map
   examples/sourcemapped/output/webpack4-babel7/esmodules.js
   examples/sourcemapped/output/webpack4-babel7/esmodules.js.map
   examples/sourcemapped/output/webpack4-babel7/esmodules-cjs.js
   examples/sourcemapped/output/webpack4-babel7/esmodules-cjs.js.map
@@ -442,16 +452,18 @@ support-files =
   examples/sourcemapped/output/rollup/typescript-classes.js
   examples/sourcemapped/output/rollup/typescript-classes.js.map
   examples/sourcemapped/output/rollup/webpack-functions.js
   examples/sourcemapped/output/rollup/webpack-functions.js.map
   examples/sourcemapped/output/rollup/webpack-line-mappings.js
   examples/sourcemapped/output/rollup/webpack-line-mappings.js.map
   examples/sourcemapped/output/rollup-babel6/babel-bindings-with-flow.js
   examples/sourcemapped/output/rollup-babel6/babel-bindings-with-flow.js.map
+  examples/sourcemapped/output/rollup-babel6/babel-classes.js
+  examples/sourcemapped/output/rollup-babel6/babel-classes.js.map
   examples/sourcemapped/output/rollup-babel6/babel-flowtype-bindings.js
   examples/sourcemapped/output/rollup-babel6/babel-flowtype-bindings.js.map
   examples/sourcemapped/output/rollup-babel6/classes.js
   examples/sourcemapped/output/rollup-babel6/classes.js.map
   examples/sourcemapped/output/rollup-babel6/esmodules.js
   examples/sourcemapped/output/rollup-babel6/esmodules.js.map
   examples/sourcemapped/output/rollup-babel6/esmodules-es6.js
   examples/sourcemapped/output/rollup-babel6/esmodules-es6.js.map
@@ -490,16 +502,18 @@ support-files =
   examples/sourcemapped/output/rollup-babel6/type-module.js
   examples/sourcemapped/output/rollup-babel6/type-module.js.map
   examples/sourcemapped/output/rollup-babel6/webpack-functions.js
   examples/sourcemapped/output/rollup-babel6/webpack-functions.js.map
   examples/sourcemapped/output/rollup-babel6/webpack-line-mappings.js
   examples/sourcemapped/output/rollup-babel6/webpack-line-mappings.js.map
   examples/sourcemapped/output/rollup-babel7/babel-bindings-with-flow.js
   examples/sourcemapped/output/rollup-babel7/babel-bindings-with-flow.js.map
+  examples/sourcemapped/output/rollup-babel7/babel-classes.js
+  examples/sourcemapped/output/rollup-babel7/babel-classes.js.map
   examples/sourcemapped/output/rollup-babel7/babel-flowtype-bindings.js
   examples/sourcemapped/output/rollup-babel7/babel-flowtype-bindings.js.map
   examples/sourcemapped/output/rollup-babel7/classes.js
   examples/sourcemapped/output/rollup-babel7/classes.js.map
   examples/sourcemapped/output/rollup-babel7/esmodules.js
   examples/sourcemapped/output/rollup-babel7/esmodules.js.map
   examples/sourcemapped/output/rollup-babel7/esmodules-es6.js
   examples/sourcemapped/output/rollup-babel7/esmodules-es6.js.map
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-console-async.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-console-async.js
@@ -33,17 +33,17 @@ async function hasMessage(dbg, msg) {
   return waitFor(async () => findMessages(
     webConsole._frameWindow,
     msg
   ).length > 0)
 }
 
 add_task(async function() {
   Services.prefs.setBoolPref("devtools.toolbox.splitconsoleEnabled", true);
-  Services.prefs.setBoolPref("devtools.map-await-expression", true);
+  Services.prefs.setBoolPref("devtools.debugger.features.map-await-expression", true);
 
   const dbg = await initDebugger("doc-script-switching.html");
 
   await selectSource(dbg, "switching-01");
 
   // open the console
   await getSplitConsole(dbg);
   ok(dbg.toolbox.splitConsole, "Split console is shown.");
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemapped-breakpoint-console.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemapped-breakpoint-console.js
@@ -73,9 +73,14 @@ add_task(async function() {
 
   await evalInConsoleAtPoint(
     dbg,
     "webpack3-babel6",
     "shadowed-vars",
     { line: 18, column: 6 },
     [`aVar === "var3"`, `aLet === "let3"`, `aConst === "const3"`]
   );
+
+  await evalInConsoleAtPoint(dbg, "webpack3-babel6", "babel-classes", { line: 8, column: 6 }, [
+    `this.hasOwnProperty("bound")`,
+  ]);
+
 });
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-tabs.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-tabs.js
@@ -25,15 +25,15 @@ add_task(async function() {
   await waitForSelectedSource(dbg);
 });
 
 add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html", "simple1", "simple2");
 
   await selectSource(dbg, "simple1");
   await selectSource(dbg, "simple2");
-  closeTab(dbg, "simple1");
-  closeTab(dbg, "simple2");
+  await closeTab(dbg, "simple1");
+  await closeTab(dbg, "simple2");
 
   // Test reloading the debugger
   await reload(dbg, "simple1", "simple2");
   is(countTabs(dbg), 0);
 });
--- a/devtools/client/debugger/new/test/mochitest/examples/doc-sourcemapped.html
+++ b/devtools/client/debugger/new/test/mochitest/examples/doc-sourcemapped.html
@@ -11,16 +11,18 @@
     <!-- INJECTED-START -->
     <!--
       Content generated by examples/sourcemapped/build.js.
       Run "yarn build" to update.
     -->
     <h2>parcel</h2>
     <script src="sourcemapped/output/parcel/babel-bindings-with-flow.js"></script>
     <button onclick="parcelBabelBindingsWithFlow()">Run babel-bindings-with-flow</button>
+    <script src="sourcemapped/output/parcel/babel-classes.js"></script>
+    <button onclick="parcelBabelClasses()">Run babel-classes</button>
     <script src="sourcemapped/output/parcel/babel-flowtype-bindings.js"></script>
     <button onclick="parcelBabelFlowtypeBindings()">Run babel-flowtype-bindings</button>
     <script src="sourcemapped/output/parcel/classes.js"></script>
     <button onclick="parcelClasses()">Run classes</button>
     <script src="sourcemapped/output/parcel/esmodules.js"></script>
     <button onclick="parcelEsmodules()">Run esmodules</button>
     <script src="sourcemapped/output/parcel/esmodules-cjs.js"></script>
     <button onclick="parcelEsmodulesCjs()">Run esmodules-cjs</button>
@@ -125,16 +127,18 @@
     <button onclick="webpack3TypescriptClasses()">Run typescript-classes</button>
     <script src="sourcemapped/output/webpack3/webpack-functions.js"></script>
     <button onclick="webpack3WebpackFunctions()">Run webpack-functions</button>
     <script src="sourcemapped/output/webpack3/webpack-line-mappings.js"></script>
     <button onclick="webpack3WebpackLineMappings()">Run webpack-line-mappings</button>
     <h2>webpack3-babel6</h2>
     <script src="sourcemapped/output/webpack3-babel6/babel-bindings-with-flow.js"></script>
     <button onclick="webpack3Babel6BabelBindingsWithFlow()">Run babel-bindings-with-flow</button>
+    <script src="sourcemapped/output/webpack3-babel6/babel-classes.js"></script>
+    <button onclick="webpack3Babel6BabelClasses()">Run babel-classes</button>
     <script src="sourcemapped/output/webpack3-babel6/babel-flowtype-bindings.js"></script>
     <button onclick="webpack3Babel6BabelFlowtypeBindings()">Run babel-flowtype-bindings</button>
     <script src="sourcemapped/output/webpack3-babel6/classes.js"></script>
     <button onclick="webpack3Babel6Classes()">Run classes</button>
     <script src="sourcemapped/output/webpack3-babel6/esmodules.js"></script>
     <button onclick="webpack3Babel6Esmodules()">Run esmodules</button>
     <script src="sourcemapped/output/webpack3-babel6/esmodules-cjs.js"></script>
     <button onclick="webpack3Babel6EsmodulesCjs()">Run esmodules-cjs</button>
@@ -182,16 +186,18 @@
     <button onclick="webpack3Babel6TypeScriptCjs()">Run type-script-cjs</button>
     <script src="sourcemapped/output/webpack3-babel6/webpack-functions.js"></script>
     <button onclick="webpack3Babel6WebpackFunctions()">Run webpack-functions</button>
     <script src="sourcemapped/output/webpack3-babel6/webpack-line-mappings.js"></script>
     <button onclick="webpack3Babel6WebpackLineMappings()">Run webpack-line-mappings</button>
     <h2>webpack3-babel7</h2>
     <script src="sourcemapped/output/webpack3-babel7/babel-bindings-with-flow.js"></script>
     <button onclick="webpack3Babel7BabelBindingsWithFlow()">Run babel-bindings-with-flow</button>
+    <script src="sourcemapped/output/webpack3-babel7/babel-classes.js"></script>
+    <button onclick="webpack3Babel7BabelClasses()">Run babel-classes</button>
     <script src="sourcemapped/output/webpack3-babel7/babel-flowtype-bindings.js"></script>
     <button onclick="webpack3Babel7BabelFlowtypeBindings()">Run babel-flowtype-bindings</button>
     <script src="sourcemapped/output/webpack3-babel7/classes.js"></script>
     <button onclick="webpack3Babel7Classes()">Run classes</button>
     <script src="sourcemapped/output/webpack3-babel7/esmodules.js"></script>
     <button onclick="webpack3Babel7Esmodules()">Run esmodules</button>
     <script src="sourcemapped/output/webpack3-babel7/esmodules-cjs.js"></script>
     <button onclick="webpack3Babel7EsmodulesCjs()">Run esmodules-cjs</button>
@@ -294,16 +300,18 @@
     <button onclick="webpack4TypescriptClasses()">Run typescript-classes</button>
     <script src="sourcemapped/output/webpack4/webpack-functions.js"></script>
     <button onclick="webpack4WebpackFunctions()">Run webpack-functions</button>
     <script src="sourcemapped/output/webpack4/webpack-line-mappings.js"></script>
     <button onclick="webpack4WebpackLineMappings()">Run webpack-line-mappings</button>
     <h2>webpack4-babel6</h2>
     <script src="sourcemapped/output/webpack4-babel6/babel-bindings-with-flow.js"></script>
     <button onclick="webpack4Babel6BabelBindingsWithFlow()">Run babel-bindings-with-flow</button>
+    <script src="sourcemapped/output/webpack4-babel6/babel-classes.js"></script>
+    <button onclick="webpack4Babel6BabelClasses()">Run babel-classes</button>
     <script src="sourcemapped/output/webpack4-babel6/babel-flowtype-bindings.js"></script>
     <button onclick="webpack4Babel6BabelFlowtypeBindings()">Run babel-flowtype-bindings</button>
     <script src="sourcemapped/output/webpack4-babel6/classes.js"></script>
     <button onclick="webpack4Babel6Classes()">Run classes</button>
     <script src="sourcemapped/output/webpack4-babel6/esmodules.js"></script>
     <button onclick="webpack4Babel6Esmodules()">Run esmodules</button>
     <script src="sourcemapped/output/webpack4-babel6/esmodules-cjs.js"></script>
     <button onclick="webpack4Babel6EsmodulesCjs()">Run esmodules-cjs</button>
@@ -351,16 +359,18 @@
     <button onclick="webpack4Babel6TypeScriptCjs()">Run type-script-cjs</button>
     <script src="sourcemapped/output/webpack4-babel6/webpack-functions.js"></script>
     <button onclick="webpack4Babel6WebpackFunctions()">Run webpack-functions</button>
     <script src="sourcemapped/output/webpack4-babel6/webpack-line-mappings.js"></script>
     <button onclick="webpack4Babel6WebpackLineMappings()">Run webpack-line-mappings</button>
     <h2>webpack4-babel7</h2>
     <script src="sourcemapped/output/webpack4-babel7/babel-bindings-with-flow.js"></script>
     <button onclick="webpack4Babel7BabelBindingsWithFlow()">Run babel-bindings-with-flow</button>
+    <script src="sourcemapped/output/webpack4-babel7/babel-classes.js"></script>
+    <button onclick="webpack4Babel7BabelClasses()">Run babel-classes</button>
     <script src="sourcemapped/output/webpack4-babel7/babel-flowtype-bindings.js"></script>
     <button onclick="webpack4Babel7BabelFlowtypeBindings()">Run babel-flowtype-bindings</button>
     <script src="sourcemapped/output/webpack4-babel7/classes.js"></script>
     <button onclick="webpack4Babel7Classes()">Run classes</button>
     <script src="sourcemapped/output/webpack4-babel7/esmodules.js"></script>
     <button onclick="webpack4Babel7Esmodules()">Run esmodules</button>
     <script src="sourcemapped/output/webpack4-babel7/esmodules-cjs.js"></script>
     <button onclick="webpack4Babel7EsmodulesCjs()">Run esmodules-cjs</button>
@@ -455,16 +465,18 @@
     <button onclick="rollupTypescriptClasses()">Run typescript-classes</button>
     <script src="sourcemapped/output/rollup/webpack-functions.js"></script>
     <button onclick="rollupWebpackFunctions()">Run webpack-functions</button>
     <script src="sourcemapped/output/rollup/webpack-line-mappings.js"></script>
     <button onclick="rollupWebpackLineMappings()">Run webpack-line-mappings</button>
     <h2>rollup-babel6</h2>
     <script src="sourcemapped/output/rollup-babel6/babel-bindings-with-flow.js"></script>
     <button onclick="rollupBabel6BabelBindingsWithFlow()">Run babel-bindings-with-flow</button>
+    <script src="sourcemapped/output/rollup-babel6/babel-classes.js"></script>
+    <button onclick="rollupBabel6BabelClasses()">Run babel-classes</button>
     <script src="sourcemapped/output/rollup-babel6/babel-flowtype-bindings.js"></script>
     <button onclick="rollupBabel6BabelFlowtypeBindings()">Run babel-flowtype-bindings</button>
     <script src="sourcemapped/output/rollup-babel6/classes.js"></script>
     <button onclick="rollupBabel6Classes()">Run classes</button>
     <script src="sourcemapped/output/rollup-babel6/esmodules.js"></script>
     <button onclick="rollupBabel6Esmodules()">Run esmodules</button>
     <script src="sourcemapped/output/rollup-babel6/esmodules-es6.js"></script>
     <button onclick="rollupBabel6EsmodulesEs6()">Run esmodules-es6</button>
@@ -504,16 +516,18 @@
     <button onclick="rollupBabel6TypeModule()">Run type-module</button>
     <script src="sourcemapped/output/rollup-babel6/webpack-functions.js"></script>
     <button onclick="rollupBabel6WebpackFunctions()">Run webpack-functions</button>
     <script src="sourcemapped/output/rollup-babel6/webpack-line-mappings.js"></script>
     <button onclick="rollupBabel6WebpackLineMappings()">Run webpack-line-mappings</button>
     <h2>rollup-babel7</h2>
     <script src="sourcemapped/output/rollup-babel7/babel-bindings-with-flow.js"></script>
     <button onclick="rollupBabel7BabelBindingsWithFlow()">Run babel-bindings-with-flow</button>
+    <script src="sourcemapped/output/rollup-babel7/babel-classes.js"></script>
+    <button onclick="rollupBabel7BabelClasses()">Run babel-classes</button>
     <script src="sourcemapped/output/rollup-babel7/babel-flowtype-bindings.js"></script>
     <button onclick="rollupBabel7BabelFlowtypeBindings()">Run babel-flowtype-bindings</button>
     <script src="sourcemapped/output/rollup-babel7/classes.js"></script>
     <button onclick="rollupBabel7Classes()">Run classes</button>
     <script src="sourcemapped/output/rollup-babel7/esmodules.js"></script>
     <button onclick="rollupBabel7Esmodules()">Run esmodules</button>
     <script src="sourcemapped/output/rollup-babel7/esmodules-es6.js"></script>
     <button onclick="rollupBabel7EsmodulesEs6()">Run esmodules-es6</button>
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel6/index.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel6/index.js
@@ -38,17 +38,20 @@ module.exports = exports = async functio
         },
         rollupBabel({
           babelrc: false,
           presets: [
             babelEnv
               ? [require.resolve("babel-preset-env"), { modules: false }]
               : null
           ].filter(Boolean),
-          plugins: [require.resolve("babel-plugin-transform-flow-strip-types")]
+          plugins: [
+            require.resolve("babel-plugin-transform-flow-strip-types"),
+            require.resolve("babel-plugin-transform-class-properties")
+          ]
         }),
         {
           ongenerate(out, data) {
             data.map.sources = data.map.sources.map(source =>
               source.replace(/^fixtures[\\/]/, `${TARGET_NAME}://./`)
             );
           }
         }
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel7/index.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel7/index.js
@@ -33,16 +33,19 @@ module.exports = exports = async functio
           resolveId: id => (id === "fake-bundle-root" ? id : undefined),
           load: id =>
             id === "fake-bundle-root"
               ? `import test from "${input}"; export default test;`
               : undefined
         },
         rollupBabel({
           babelrc: false,
+          plugins: [
+            require.resolve("@babel/plugin-proposal-class-properties")
+          ],
           presets: [
             require.resolve("@babel/preset-flow"),
             babelEnv
               ? [require.resolve("@babel/preset-env"), { modules: false }]
               : null
           ].filter(Boolean)
         }),
         {
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel7/package.json
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel7/package.json
@@ -1,12 +1,13 @@
 {
   "name": "sourcemapped-rollup",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0-beta.54",
     "@babel/preset-env": "^7.0.0-beta.54",
     "@babel/preset-flow": "^7.0.0-beta.54",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.54",
     "lodash": "^4.17.5",
     "rollup": "^0.63.0",
     "rollup-plugin-babel": "^4.0.0-beta.7"
   }
 }
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel7/yarn.lock
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/rollup-babel7/yarn.lock
@@ -3,16 +3,22 @@
 
 
 "@babel/code-frame@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.54.tgz#0024f96fdf7028a21d68e273afd4e953214a1ead"
   dependencies:
     "@babel/highlight" "7.0.0-beta.54"
 
+"@babel/code-frame@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-rc.1.tgz#5c2154415d6c09959a71845ef519d11157e95d10"
+  dependencies:
+    "@babel/highlight" "7.0.0-rc.1"
+
 "@babel/core@^7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.0.0-beta.54.tgz#253c54d0095403a5cfa764e7d9b458194692d02b"
   dependencies:
     "@babel/code-frame" "7.0.0-beta.54"
     "@babel/generator" "7.0.0-beta.54"
     "@babel/helpers" "7.0.0-beta.54"
     "@babel/parser" "7.0.0-beta.54"
@@ -32,16 +38,26 @@
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.54.tgz#c043c7eebeebfd7e665d95c281a4aafc83d4e1c9"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
     jsesc "^2.5.1"
     lodash "^4.17.5"
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-rc.1.tgz#739c87d70b31aeed802bd6bc9fd51480065c45e8"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.54.tgz#1626126a3f9fc4ed280ac942372c7d39653d7121"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
 "@babel/helper-builder-binary-assignment-operator-visitor@7.0.0-beta.54":
   version "7.0.0-beta.54"
@@ -76,34 +92,54 @@
 "@babel/helper-function-name@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.54.tgz#307875507a1eda2482a09a9a4df6a25632ffb34b"
   dependencies:
     "@babel/helper-get-function-arity" "7.0.0-beta.54"
     "@babel/template" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-function-name@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-rc.1.tgz#20b2cc836a53c669f297c8d309fc553385c5cdde"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-rc.1"
+    "@babel/template" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-get-function-arity@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.54.tgz#757bd189b077074a004028cfde5f083c306cc6c4"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-get-function-arity@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-rc.1.tgz#60185957f72ed73766ce74c836ac574921743c46"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-hoist-variables@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.0.0-beta.54.tgz#8635be8095135ff73f753ed189e449f68b4f43cb"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
 "@babel/helper-member-expression-to-functions@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0-beta.54.tgz#bce9ddc484317b13d2615bafe2b524d0d56d99df"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-member-expression-to-functions@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0-rc.1.tgz#03a3b200fc00f8100dbcef9a351b69cfc0234b4f"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-module-imports@7.0.0-beta.51":
   version "7.0.0-beta.51"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.51.tgz#ce00428045fbb7d5ebc0ea7bf835789f15366ab2"
   dependencies:
     "@babel/types" "7.0.0-beta.51"
     lodash "^4.17.5"
 
 "@babel/helper-module-imports@7.0.0-beta.54":
@@ -125,20 +161,30 @@
     lodash "^4.17.5"
 
 "@babel/helper-optimise-call-expression@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0-beta.54.tgz#4af8dd4ff90dbd29b3bcf85fff43952e2ae1016e"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-optimise-call-expression@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0-rc.1.tgz#482d8251870f61d88c9800fd3e58128e14ff8c98"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-plugin-utils@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.54.tgz#61d2a9a0f9a3e31838a458debb9eebd7bdd249b4"
 
+"@babel/helper-plugin-utils@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-rc.1.tgz#3e277eae59818e7d4caf4174f58a7a00d441336e"
+
 "@babel/helper-regex@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0-beta.54.tgz#8ac562f855f132fc68dfd10b132552555ac870d9"
   dependencies:
     lodash "^4.17.5"
 
 "@babel/helper-remap-async-to-generator@7.0.0-beta.54":
   version "7.0.0-beta.54"
@@ -154,30 +200,45 @@
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.0.0-beta.54.tgz#901f5a1493a410799fd3ab3e0c0d29d18071c89f"
   dependencies:
     "@babel/helper-member-expression-to-functions" "7.0.0-beta.54"
     "@babel/helper-optimise-call-expression" "7.0.0-beta.54"
     "@babel/traverse" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-replace-supers@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.0.0-rc.1.tgz#cab8d7a6c758e4561fb285f4725c850d68c1c3db"
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "7.0.0-rc.1"
+    "@babel/helper-optimise-call-expression" "7.0.0-rc.1"
+    "@babel/traverse" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-simple-access@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.0.0-beta.54.tgz#5f760a19589a9b6f07e80a65ef4bcbd4fba8c253"
   dependencies:
     "@babel/template" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
     lodash "^4.17.5"
 
 "@babel/helper-split-export-declaration@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.54.tgz#89cd8833c95481a0827ac6a1bfccddb92b75a109"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-split-export-declaration@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-rc.1.tgz#b00323834343fd0210f1f46c7a53521ad53efa5e"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-wrap-function@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.0.0-beta.54.tgz#dc1b7a483a3074a3531b36523e03156d910a3a2a"
   dependencies:
     "@babel/helper-function-name" "7.0.0-beta.54"
     "@babel/template" "7.0.0-beta.54"
     "@babel/traverse" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
@@ -193,28 +254,51 @@
 "@babel/highlight@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.54.tgz#155d507358329b8e7068970017c3fd74a9b08584"
   dependencies:
     chalk "^2.0.0"
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/highlight@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-rc.1.tgz#e0ca4731fa4786f7b9500421d6ff5e5a7753e81e"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
 "@babel/parser@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.0.0-beta.54.tgz#c01aa63b57c9c8dce8744796c81d9df121f20db4"
 
+"@babel/parser@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.0.0-rc.1.tgz#d009a9bba8175d7b971e30cd03535b278c44082d"
+
 "@babel/plugin-proposal-async-generator-functions@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.0.0-beta.54.tgz#19871bd655b5d748b0ae3e9ecebe247be8b7f83b"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
     "@babel/helper-remap-async-to-generator" "7.0.0-beta.54"
     "@babel/plugin-syntax-async-generators" "7.0.0-beta.54"
 
+"@babel/plugin-proposal-class-properties@^7.0.0-beta.54":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.0.0-rc.1.tgz#88b3d3b257b9ed53fae50b13103e4c3c725e704e"
+  dependencies:
+    "@babel/helper-function-name" "7.0.0-rc.1"
+    "@babel/helper-member-expression-to-functions" "7.0.0-rc.1"
+    "@babel/helper-optimise-call-expression" "7.0.0-rc.1"
+    "@babel/helper-plugin-utils" "7.0.0-rc.1"
+    "@babel/helper-replace-supers" "7.0.0-rc.1"
+    "@babel/plugin-syntax-class-properties" "7.0.0-rc.1"
+
 "@babel/plugin-proposal-object-rest-spread@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.0.0-beta.54.tgz#5481269a020dd0d38715a8094fed015d30ef4c2a"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
     "@babel/plugin-syntax-object-rest-spread" "7.0.0-beta.54"
 
 "@babel/plugin-proposal-optional-catch-binding@7.0.0-beta.54":
@@ -233,16 +317,22 @@
     regexpu-core "^4.2.0"
 
 "@babel/plugin-syntax-async-generators@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.0.0-beta.54.tgz#ffac8f64927614762897cc9643495fd38097dd41"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
 
+"@babel/plugin-syntax-class-properties@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.0.0-rc.1.tgz#155343e256c84d127496e46675a3049636d311ff"
+  dependencies:
+    "@babel/helper-plugin-utils" "7.0.0-rc.1"
+
 "@babel/plugin-syntax-flow@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.0.0-beta.54.tgz#8d38fffa6da16e2d327f5fee4f90913b14d43d14"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
 
 "@babel/plugin-syntax-object-rest-spread@7.0.0-beta.54":
   version "7.0.0-beta.54"
@@ -507,46 +597,77 @@
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.54.tgz#d5b0d2d2d55c0e78b048c61a058f36cfd7d91af3"
   dependencies:
     "@babel/code-frame" "7.0.0-beta.54"
     "@babel/parser" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
     lodash "^4.17.5"
 
+"@babel/template@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-rc.1.tgz#5f9c0a481c9f22ecdb84697b3c3a34eadeeca23c"
+  dependencies:
+    "@babel/code-frame" "7.0.0-rc.1"
+    "@babel/parser" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+    lodash "^4.17.10"
+
 "@babel/traverse@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.54.tgz#2c17f98dcdbf19aa918fde128f0e1a0bc089e05a"
   dependencies:
     "@babel/code-frame" "7.0.0-beta.54"
     "@babel/generator" "7.0.0-beta.54"
     "@babel/helper-function-name" "7.0.0-beta.54"
     "@babel/helper-split-export-declaration" "7.0.0-beta.54"
     "@babel/parser" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
     debug "^3.1.0"
     globals "^11.1.0"
     lodash "^4.17.5"
 
+"@babel/traverse@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-rc.1.tgz#867b4b45ada2d51ae2d0076f1c1d5880f8557158"
+  dependencies:
+    "@babel/code-frame" "7.0.0-rc.1"
+    "@babel/generator" "7.0.0-rc.1"
+    "@babel/helper-function-name" "7.0.0-rc.1"
+    "@babel/helper-split-export-declaration" "7.0.0-rc.1"
+    "@babel/parser" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.10"
+
 "@babel/types@7.0.0-beta.51":
   version "7.0.0-beta.51"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.51.tgz#d802b7b543b5836c778aa691797abf00f3d97ea9"
   dependencies:
     esutils "^2.0.2"
     lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
 "@babel/types@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.54.tgz#025ad68492fed542c13f14c579a44c848e531063"
   dependencies:
     esutils "^2.0.2"
     lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-rc.1.tgz#6abf6d14ddd9fc022617e5b62e6b32f4fa6526ad"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
 
 "@types/node@*":
   version "10.5.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.5.3.tgz#5bcfaf088ad17894232012877669634c06b20cc5"
 
@@ -787,17 +908,17 @@ kind-of@^3.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   dependencies:
     is-buffer "^1.1.5"
 
 kind-of@^6.0.0:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
 
-lodash@^4.17.5:
+lodash@^4.17.10, lodash@^4.17.5:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
 loose-envify@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel6/index.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel6/index.js
@@ -50,17 +50,18 @@ module.exports = exports = async functio
                 babelEnv
                   ? [
                       require.resolve("babel-preset-env"),
                       { modules: babelModules ? "commonjs" : false }
                     ]
                   : null
               ].filter(Boolean),
               plugins: [
-                require.resolve("babel-plugin-transform-flow-strip-types")
+                require.resolve("babel-plugin-transform-flow-strip-types"),
+                require.resolve("babel-plugin-transform-class-properties")
               ]
             }
           }
         ].filter(Boolean)
       }
     });
 
     fixtures.push({
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel7/index.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel7/index.js
@@ -41,16 +41,19 @@ module.exports = exports = async functio
       module: {
         loaders: [
           {
             test: /\.js$/,
             exclude: /node_modules/,
             loader: require.resolve("babel-loader"),
             options: {
               babelrc: false,
+              plugins: [
+                require.resolve("@babel/plugin-proposal-class-properties")
+              ],
               presets: [
                 require.resolve("@babel/preset-flow"),
                 babelEnv
                   ? [
                       require.resolve("@babel/preset-env"),
                       { modules: babelModules ? "commonjs" : false }
                     ]
                   : null
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel7/package.json
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel7/package.json
@@ -1,12 +1,13 @@
 {
   "name": "sourcemapped-webpack3-babel7",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0-beta.54",
     "@babel/preset-env": "^7.0.0-beta.54",
     "@babel/preset-flow": "^7.0.0-beta.54",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.54",
     "babel-loader": "^8.0.0-beta.4",
     "lodash": "^4.17.10",
     "webpack": "3"
   }
 }
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel7/yarn.lock
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack3-babel7/yarn.lock
@@ -3,16 +3,22 @@
 
 
 "@babel/code-frame@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.54.tgz#0024f96fdf7028a21d68e273afd4e953214a1ead"
   dependencies:
     "@babel/highlight" "7.0.0-beta.54"
 
+"@babel/code-frame@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-rc.1.tgz#5c2154415d6c09959a71845ef519d11157e95d10"
+  dependencies:
+    "@babel/highlight" "7.0.0-rc.1"
+
 "@babel/core@^7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.0.0-beta.54.tgz#253c54d0095403a5cfa764e7d9b458194692d02b"
   dependencies:
     "@babel/code-frame" "7.0.0-beta.54"
     "@babel/generator" "7.0.0-beta.54"
     "@babel/helpers" "7.0.0-beta.54"
     "@babel/parser" "7.0.0-beta.54"
@@ -32,16 +38,26 @@
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.54.tgz#c043c7eebeebfd7e665d95c281a4aafc83d4e1c9"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
     jsesc "^2.5.1"
     lodash "^4.17.5"
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-rc.1.tgz#739c87d70b31aeed802bd6bc9fd51480065c45e8"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.54.tgz#1626126a3f9fc4ed280ac942372c7d39653d7121"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
 "@babel/helper-builder-binary-assignment-operator-visitor@7.0.0-beta.54":
   version "7.0.0-beta.54"
@@ -76,34 +92,54 @@
 "@babel/helper-function-name@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.54.tgz#307875507a1eda2482a09a9a4df6a25632ffb34b"
   dependencies:
     "@babel/helper-get-function-arity" "7.0.0-beta.54"
     "@babel/template" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-function-name@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-rc.1.tgz#20b2cc836a53c669f297c8d309fc553385c5cdde"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-rc.1"
+    "@babel/template" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-get-function-arity@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.54.tgz#757bd189b077074a004028cfde5f083c306cc6c4"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-get-function-arity@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-rc.1.tgz#60185957f72ed73766ce74c836ac574921743c46"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-hoist-variables@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.0.0-beta.54.tgz#8635be8095135ff73f753ed189e449f68b4f43cb"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
 "@babel/helper-member-expression-to-functions@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0-beta.54.tgz#bce9ddc484317b13d2615bafe2b524d0d56d99df"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-member-expression-to-functions@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0-rc.1.tgz#03a3b200fc00f8100dbcef9a351b69cfc0234b4f"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-module-imports@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.54.tgz#c2d8e14ff034225bf431356db77ef467b8d35aac"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
     lodash "^4.17.5"
 
 "@babel/helper-module-transforms@7.0.0-beta.54":
@@ -118,20 +154,30 @@
     lodash "^4.17.5"
 
 "@babel/helper-optimise-call-expression@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0-beta.54.tgz#4af8dd4ff90dbd29b3bcf85fff43952e2ae1016e"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-optimise-call-expression@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0-rc.1.tgz#482d8251870f61d88c9800fd3e58128e14ff8c98"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-plugin-utils@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.54.tgz#61d2a9a0f9a3e31838a458debb9eebd7bdd249b4"
 
+"@babel/helper-plugin-utils@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-rc.1.tgz#3e277eae59818e7d4caf4174f58a7a00d441336e"
+
 "@babel/helper-regex@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0-beta.54.tgz#8ac562f855f132fc68dfd10b132552555ac870d9"
   dependencies:
     lodash "^4.17.5"
 
 "@babel/helper-remap-async-to-generator@7.0.0-beta.54":
   version "7.0.0-beta.54"
@@ -147,30 +193,45 @@
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.0.0-beta.54.tgz#901f5a1493a410799fd3ab3e0c0d29d18071c89f"
   dependencies:
     "@babel/helper-member-expression-to-functions" "7.0.0-beta.54"
     "@babel/helper-optimise-call-expression" "7.0.0-beta.54"
     "@babel/traverse" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-replace-supers@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.0.0-rc.1.tgz#cab8d7a6c758e4561fb285f4725c850d68c1c3db"
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "7.0.0-rc.1"
+    "@babel/helper-optimise-call-expression" "7.0.0-rc.1"
+    "@babel/traverse" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-simple-access@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.0.0-beta.54.tgz#5f760a19589a9b6f07e80a65ef4bcbd4fba8c253"
   dependencies:
     "@babel/template" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
     lodash "^4.17.5"
 
 "@babel/helper-split-export-declaration@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.54.tgz#89cd8833c95481a0827ac6a1bfccddb92b75a109"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-split-export-declaration@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-rc.1.tgz#b00323834343fd0210f1f46c7a53521ad53efa5e"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-wrap-function@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.0.0-beta.54.tgz#dc1b7a483a3074a3531b36523e03156d910a3a2a"
   dependencies:
     "@babel/helper-function-name" "7.0.0-beta.54"
     "@babel/template" "7.0.0-beta.54"
     "@babel/traverse" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
@@ -186,28 +247,51 @@
 "@babel/highlight@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.54.tgz#155d507358329b8e7068970017c3fd74a9b08584"
   dependencies:
     chalk "^2.0.0"
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/highlight@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-rc.1.tgz#e0ca4731fa4786f7b9500421d6ff5e5a7753e81e"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
 "@babel/parser@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.0.0-beta.54.tgz#c01aa63b57c9c8dce8744796c81d9df121f20db4"
 
+"@babel/parser@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.0.0-rc.1.tgz#d009a9bba8175d7b971e30cd03535b278c44082d"
+
 "@babel/plugin-proposal-async-generator-functions@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.0.0-beta.54.tgz#19871bd655b5d748b0ae3e9ecebe247be8b7f83b"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
     "@babel/helper-remap-async-to-generator" "7.0.0-beta.54"
     "@babel/plugin-syntax-async-generators" "7.0.0-beta.54"
 
+"@babel/plugin-proposal-class-properties@^7.0.0-beta.54":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.0.0-rc.1.tgz#88b3d3b257b9ed53fae50b13103e4c3c725e704e"
+  dependencies:
+    "@babel/helper-function-name" "7.0.0-rc.1"
+    "@babel/helper-member-expression-to-functions" "7.0.0-rc.1"
+    "@babel/helper-optimise-call-expression" "7.0.0-rc.1"
+    "@babel/helper-plugin-utils" "7.0.0-rc.1"
+    "@babel/helper-replace-supers" "7.0.0-rc.1"
+    "@babel/plugin-syntax-class-properties" "7.0.0-rc.1"
+
 "@babel/plugin-proposal-object-rest-spread@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.0.0-beta.54.tgz#5481269a020dd0d38715a8094fed015d30ef4c2a"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
     "@babel/plugin-syntax-object-rest-spread" "7.0.0-beta.54"
 
 "@babel/plugin-proposal-optional-catch-binding@7.0.0-beta.54":
@@ -226,16 +310,22 @@
     regexpu-core "^4.2.0"
 
 "@babel/plugin-syntax-async-generators@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.0.0-beta.54.tgz#ffac8f64927614762897cc9643495fd38097dd41"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
 
+"@babel/plugin-syntax-class-properties@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.0.0-rc.1.tgz#155343e256c84d127496e46675a3049636d311ff"
+  dependencies:
+    "@babel/helper-plugin-utils" "7.0.0-rc.1"
+
 "@babel/plugin-syntax-flow@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.0.0-beta.54.tgz#8d38fffa6da16e2d327f5fee4f90913b14d43d14"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
 
 "@babel/plugin-syntax-object-rest-spread@7.0.0-beta.54":
   version "7.0.0-beta.54"
@@ -500,38 +590,69 @@
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.54.tgz#d5b0d2d2d55c0e78b048c61a058f36cfd7d91af3"
   dependencies:
     "@babel/code-frame" "7.0.0-beta.54"
     "@babel/parser" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
     lodash "^4.17.5"
 
+"@babel/template@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-rc.1.tgz#5f9c0a481c9f22ecdb84697b3c3a34eadeeca23c"
+  dependencies:
+    "@babel/code-frame" "7.0.0-rc.1"
+    "@babel/parser" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+    lodash "^4.17.10"
+
 "@babel/traverse@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.54.tgz#2c17f98dcdbf19aa918fde128f0e1a0bc089e05a"
   dependencies:
     "@babel/code-frame" "7.0.0-beta.54"
     "@babel/generator" "7.0.0-beta.54"
     "@babel/helper-function-name" "7.0.0-beta.54"
     "@babel/helper-split-export-declaration" "7.0.0-beta.54"
     "@babel/parser" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
     debug "^3.1.0"
     globals "^11.1.0"
     lodash "^4.17.5"
 
+"@babel/traverse@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-rc.1.tgz#867b4b45ada2d51ae2d0076f1c1d5880f8557158"
+  dependencies:
+    "@babel/code-frame" "7.0.0-rc.1"
+    "@babel/generator" "7.0.0-rc.1"
+    "@babel/helper-function-name" "7.0.0-rc.1"
+    "@babel/helper-split-export-declaration" "7.0.0-rc.1"
+    "@babel/parser" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.10"
+
 "@babel/types@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.54.tgz#025ad68492fed542c13f14c579a44c848e531063"
   dependencies:
     esutils "^2.0.2"
     lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-rc.1.tgz#6abf6d14ddd9fc022617e5b62e6b32f4fa6526ad"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
 
 acorn-dynamic-import@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
   dependencies:
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel6/index.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel6/index.js
@@ -51,17 +51,18 @@ module.exports = exports = async functio
                 babelEnv
                   ? [
                       require.resolve("babel-preset-env"),
                       { modules: babelModules ? "commonjs" : false }
                     ]
                   : null
               ].filter(Boolean),
               plugins: [
-                require.resolve("babel-plugin-transform-flow-strip-types")
+                require.resolve("babel-plugin-transform-flow-strip-types"),
+                require.resolve("babel-plugin-transform-class-properties")
               ]
             }
           }
         ].filter(Boolean)
       }
     });
 
     fixtures.push({
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel7/index.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel7/index.js
@@ -42,16 +42,19 @@ module.exports = exports = async functio
       module: {
         rules: [
           {
             test: /\.js$/,
             exclude: /node_modules/,
             loader: require.resolve("babel-loader"),
             options: {
               babelrc: false,
+              plugins: [
+                require.resolve("@babel/plugin-proposal-class-properties")
+              ],
               presets: [
                 require.resolve("@babel/preset-flow"),
                 babelEnv
                   ? [
                       require.resolve("@babel/preset-env"),
                       { modules: babelModules ? "commonjs" : false }
                     ]
                   : null
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel7/package.json
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel7/package.json
@@ -1,12 +1,13 @@
 {
   "name": "sourcemapped-webpack3-babel7",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0-beta.54",
     "@babel/preset-env": "^7.0.0-beta.54",
     "@babel/preset-flow": "^7.0.0-beta.54",
     "babel-loader": "^8.0.0-beta.4",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.54",
     "lodash": "^4.17.10",
     "webpack": "^4"
   }
 }
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel7/yarn.lock
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/builds/webpack4-babel7/yarn.lock
@@ -3,16 +3,22 @@
 
 
 "@babel/code-frame@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.54.tgz#0024f96fdf7028a21d68e273afd4e953214a1ead"
   dependencies:
     "@babel/highlight" "7.0.0-beta.54"
 
+"@babel/code-frame@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-rc.1.tgz#5c2154415d6c09959a71845ef519d11157e95d10"
+  dependencies:
+    "@babel/highlight" "7.0.0-rc.1"
+
 "@babel/core@^7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.0.0-beta.54.tgz#253c54d0095403a5cfa764e7d9b458194692d02b"
   dependencies:
     "@babel/code-frame" "7.0.0-beta.54"
     "@babel/generator" "7.0.0-beta.54"
     "@babel/helpers" "7.0.0-beta.54"
     "@babel/parser" "7.0.0-beta.54"
@@ -32,16 +38,26 @@
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.54.tgz#c043c7eebeebfd7e665d95c281a4aafc83d4e1c9"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
     jsesc "^2.5.1"
     lodash "^4.17.5"
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-rc.1.tgz#739c87d70b31aeed802bd6bc9fd51480065c45e8"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.54.tgz#1626126a3f9fc4ed280ac942372c7d39653d7121"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
 "@babel/helper-builder-binary-assignment-operator-visitor@7.0.0-beta.54":
   version "7.0.0-beta.54"
@@ -76,34 +92,54 @@
 "@babel/helper-function-name@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.54.tgz#307875507a1eda2482a09a9a4df6a25632ffb34b"
   dependencies:
     "@babel/helper-get-function-arity" "7.0.0-beta.54"
     "@babel/template" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-function-name@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-rc.1.tgz#20b2cc836a53c669f297c8d309fc553385c5cdde"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-rc.1"
+    "@babel/template" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-get-function-arity@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.54.tgz#757bd189b077074a004028cfde5f083c306cc6c4"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-get-function-arity@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-rc.1.tgz#60185957f72ed73766ce74c836ac574921743c46"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-hoist-variables@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.0.0-beta.54.tgz#8635be8095135ff73f753ed189e449f68b4f43cb"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
 "@babel/helper-member-expression-to-functions@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0-beta.54.tgz#bce9ddc484317b13d2615bafe2b524d0d56d99df"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-member-expression-to-functions@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0-rc.1.tgz#03a3b200fc00f8100dbcef9a351b69cfc0234b4f"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-module-imports@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.54.tgz#c2d8e14ff034225bf431356db77ef467b8d35aac"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
     lodash "^4.17.5"
 
 "@babel/helper-module-transforms@7.0.0-beta.54":
@@ -118,20 +154,30 @@
     lodash "^4.17.5"
 
 "@babel/helper-optimise-call-expression@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0-beta.54.tgz#4af8dd4ff90dbd29b3bcf85fff43952e2ae1016e"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-optimise-call-expression@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0-rc.1.tgz#482d8251870f61d88c9800fd3e58128e14ff8c98"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-plugin-utils@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.54.tgz#61d2a9a0f9a3e31838a458debb9eebd7bdd249b4"
 
+"@babel/helper-plugin-utils@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-rc.1.tgz#3e277eae59818e7d4caf4174f58a7a00d441336e"
+
 "@babel/helper-regex@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0-beta.54.tgz#8ac562f855f132fc68dfd10b132552555ac870d9"
   dependencies:
     lodash "^4.17.5"
 
 "@babel/helper-remap-async-to-generator@7.0.0-beta.54":
   version "7.0.0-beta.54"
@@ -147,30 +193,45 @@
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.0.0-beta.54.tgz#901f5a1493a410799fd3ab3e0c0d29d18071c89f"
   dependencies:
     "@babel/helper-member-expression-to-functions" "7.0.0-beta.54"
     "@babel/helper-optimise-call-expression" "7.0.0-beta.54"
     "@babel/traverse" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-replace-supers@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.0.0-rc.1.tgz#cab8d7a6c758e4561fb285f4725c850d68c1c3db"
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "7.0.0-rc.1"
+    "@babel/helper-optimise-call-expression" "7.0.0-rc.1"
+    "@babel/traverse" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-simple-access@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.0.0-beta.54.tgz#5f760a19589a9b6f07e80a65ef4bcbd4fba8c253"
   dependencies:
     "@babel/template" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
     lodash "^4.17.5"
 
 "@babel/helper-split-export-declaration@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.54.tgz#89cd8833c95481a0827ac6a1bfccddb92b75a109"
   dependencies:
     "@babel/types" "7.0.0-beta.54"
 
+"@babel/helper-split-export-declaration@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-rc.1.tgz#b00323834343fd0210f1f46c7a53521ad53efa5e"
+  dependencies:
+    "@babel/types" "7.0.0-rc.1"
+
 "@babel/helper-wrap-function@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.0.0-beta.54.tgz#dc1b7a483a3074a3531b36523e03156d910a3a2a"
   dependencies:
     "@babel/helper-function-name" "7.0.0-beta.54"
     "@babel/template" "7.0.0-beta.54"
     "@babel/traverse" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
@@ -186,28 +247,51 @@
 "@babel/highlight@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.54.tgz#155d507358329b8e7068970017c3fd74a9b08584"
   dependencies:
     chalk "^2.0.0"
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/highlight@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-rc.1.tgz#e0ca4731fa4786f7b9500421d6ff5e5a7753e81e"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
 "@babel/parser@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.0.0-beta.54.tgz#c01aa63b57c9c8dce8744796c81d9df121f20db4"
 
+"@babel/parser@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.0.0-rc.1.tgz#d009a9bba8175d7b971e30cd03535b278c44082d"
+
 "@babel/plugin-proposal-async-generator-functions@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.0.0-beta.54.tgz#19871bd655b5d748b0ae3e9ecebe247be8b7f83b"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
     "@babel/helper-remap-async-to-generator" "7.0.0-beta.54"
     "@babel/plugin-syntax-async-generators" "7.0.0-beta.54"
 
+"@babel/plugin-proposal-class-properties@^7.0.0-beta.54":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.0.0-rc.1.tgz#88b3d3b257b9ed53fae50b13103e4c3c725e704e"
+  dependencies:
+    "@babel/helper-function-name" "7.0.0-rc.1"
+    "@babel/helper-member-expression-to-functions" "7.0.0-rc.1"
+    "@babel/helper-optimise-call-expression" "7.0.0-rc.1"
+    "@babel/helper-plugin-utils" "7.0.0-rc.1"
+    "@babel/helper-replace-supers" "7.0.0-rc.1"
+    "@babel/plugin-syntax-class-properties" "7.0.0-rc.1"
+
 "@babel/plugin-proposal-object-rest-spread@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.0.0-beta.54.tgz#5481269a020dd0d38715a8094fed015d30ef4c2a"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
     "@babel/plugin-syntax-object-rest-spread" "7.0.0-beta.54"
 
 "@babel/plugin-proposal-optional-catch-binding@7.0.0-beta.54":
@@ -226,16 +310,22 @@
     regexpu-core "^4.2.0"
 
 "@babel/plugin-syntax-async-generators@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.0.0-beta.54.tgz#ffac8f64927614762897cc9643495fd38097dd41"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
 
+"@babel/plugin-syntax-class-properties@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.0.0-rc.1.tgz#155343e256c84d127496e46675a3049636d311ff"
+  dependencies:
+    "@babel/helper-plugin-utils" "7.0.0-rc.1"
+
 "@babel/plugin-syntax-flow@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.0.0-beta.54.tgz#8d38fffa6da16e2d327f5fee4f90913b14d43d14"
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-beta.54"
 
 "@babel/plugin-syntax-object-rest-spread@7.0.0-beta.54":
   version "7.0.0-beta.54"
@@ -500,38 +590,69 @@
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.54.tgz#d5b0d2d2d55c0e78b048c61a058f36cfd7d91af3"
   dependencies:
     "@babel/code-frame" "7.0.0-beta.54"
     "@babel/parser" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
     lodash "^4.17.5"
 
+"@babel/template@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-rc.1.tgz#5f9c0a481c9f22ecdb84697b3c3a34eadeeca23c"
+  dependencies:
+    "@babel/code-frame" "7.0.0-rc.1"
+    "@babel/parser" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+    lodash "^4.17.10"
+
 "@babel/traverse@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.54.tgz#2c17f98dcdbf19aa918fde128f0e1a0bc089e05a"
   dependencies:
     "@babel/code-frame" "7.0.0-beta.54"
     "@babel/generator" "7.0.0-beta.54"
     "@babel/helper-function-name" "7.0.0-beta.54"
     "@babel/helper-split-export-declaration" "7.0.0-beta.54"
     "@babel/parser" "7.0.0-beta.54"
     "@babel/types" "7.0.0-beta.54"
     debug "^3.1.0"
     globals "^11.1.0"
     lodash "^4.17.5"
 
+"@babel/traverse@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-rc.1.tgz#867b4b45ada2d51ae2d0076f1c1d5880f8557158"
+  dependencies:
+    "@babel/code-frame" "7.0.0-rc.1"
+    "@babel/generator" "7.0.0-rc.1"
+    "@babel/helper-function-name" "7.0.0-rc.1"
+    "@babel/helper-split-export-declaration" "7.0.0-rc.1"
+    "@babel/parser" "7.0.0-rc.1"
+    "@babel/types" "7.0.0-rc.1"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.10"
+
 "@babel/types@7.0.0-beta.54":
   version "7.0.0-beta.54"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.54.tgz#025ad68492fed542c13f14c579a44c848e531063"
   dependencies:
     esutils "^2.0.2"
     lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-rc.1":
+  version "7.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-rc.1.tgz#6abf6d14ddd9fc022617e5b62e6b32f4fa6526ad"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
 "@webassemblyjs/ast@1.5.13":
   version "1.5.13"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.13.tgz#81155a570bd5803a30ec31436bc2c9c0ede38f25"
   dependencies:
     "@webassemblyjs/helper-module-context" "1.5.13"
     "@webassemblyjs/helper-wasm-bytecode" "1.5.13"
     "@webassemblyjs/wast-parser" "1.5.13"
     debug "^3.1.0"
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-classes/input.js
@@ -0,0 +1,15 @@
+export default function root() {
+  class Another {
+    bound = () => {
+      return this;
+    }
+
+    method() {
+      let two = 2;
+
+      console.log("pause here", Another, root);
+    }
+  }
+
+  new Another().method();
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/babel-classes.js
@@ -0,0 +1,132 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+// eslint-disable-next-line no-global-assign
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  return newRequire;
+})({"input.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = root;
+function root() {
+  class Another {
+    constructor() {
+      this.bound = () => {
+        return this;
+      };
+    }
+
+    method() {
+      let two = 2;
+
+      console.log("pause here", Another, root);
+    }
+  }
+
+  new Another().method();
+}
+},{}]},{},["input.js"], "parcelBabelClasses")
+//# sourceMappingURL=babel-classes.map
+;parcelBabelClasses = parcelBabelClasses.default;
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/babel-classes.map
@@ -0,0 +1,1 @@
+{"version":3,"sources":["parcel://./babel-classes/input.js"],"names":["root","Another","bound","method","two","console","log"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAwBA;AAAT,SAASA,IAAT,GAAgB;AAC7B,QAAMC,OAAN,CAAc;AAAA;AAAA,WACZC,KADY,GACJ,MAAM;AACZ,eAAO,IAAP;AACD,OAHW;AAAA;;AAKZC,aAAS;AACP,UAAIC,MAAM,CAAV;;AAEAC,cAAQC,GAAR,CAAY,YAAZ,EAA0BL,OAA1B,EAAmCD,IAAnC;AACD;AATW;;AAYd,MAAIC,OAAJ,GAAcE,MAAd;AACD","file":"babel-classes.map","sourcesContent":["export default function root() {\n  class Another {\n    bound = () => {\n      return this;\n    }\n\n    method() {\n      let two = 2;\n\n      console.log(\"pause here\", Another, root);\n    }\n  }\n\n  new Another().method();\n}\n"]}
\ No newline at end of file
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/typescript-classes.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/typescript-classes.js
@@ -116,20 +116,23 @@ exports.decoratorFactory = decoratorFact
 function def() {}
 exports["default"] = def;
 },{}],"input.ts":[function(require,module,exports) {
 "use strict";
 // This file essentially reproduces an example Angular component to map testing,
 // among other typescript edge cases.
 
 var __extends = this && this.__extends || function () {
-    var extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (d, b) {
-        d.__proto__ = b;
-    } || function (d, b) {
-        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (d, b) {
+            d.__proto__ = b;
+        } || function (d, b) {
+            for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+        };
+        return extendStatics(d, b);
     };
     return function (d, b) {
         extendStatics(d, b);
         function __() {
             this.constructor = d;
         }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/typescript-classes.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/typescript-classes.map
@@ -1,1 +1,1 @@
-{"version":3,"sources":["parcel://./typescript-classes/src/mod.ts","parcel://./typescript-classes/input.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAA,gBAAA,CAAiC,IAAjC,EAA2D;AACzD,WAAO,SAAA,SAAA,CAAmB,MAAnB,EAAyB;AAC9B,eAAY,MAAZ;AACD,KAFD;AAGD;AAJD,QAAA,gBAAA,GAAA,gBAAA;AAMA,SAAA,GAAA,GAAA,CAAgC;AAAhC,QAAA,SAAA,IAAA,GAAA;;;ACPA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAA,WAAA,QAAA,cAAA,CAAA;AAEA,IAAA,KAAA,aAAA,QAAA,cAAA,CAAA,CAAA;AAKA,IAAA,eAAA,aAAA,YAAA;AAHA,aAAA,YAAA,GAAA;AAIE,aAAA,KAAA,GAAQ,KAAR;AACD;AAFY,mBAAY,WAAA,CAHxB,SAAA,gBAAA,CAAiB;AAChB,kBAAU;AADM,KAAjB,CAGwB,CAAA,EAAZ,YAAY,CAAZ;AAEb,WAAA,YAAA;AAFA,CAAA,EAAA;AAAa,QAAA,YAAA,GAAA,YAAA;AAIb,IAAM,KAAK,UAAA,GAAA,EAAG;AACZ,YAAQ,GAAR,CAAY,MAAZ;AACD,CAFD;AAGA,GAAG,KAAH;AAEA;AACA;AACA,IAAA,gBAAA,aAAA,YAAA;AAAA,aAAA,aAAA,GAAA;AACE,aAAA,KAAA,GAAQ,KAAR;AACD;AAAD,WAAA,aAAA;AAFA,CAAA,EAAA;AAAa,QAAA,aAAA,GAAA,aAAA;AAIb,IAAA,eAAA,aAAA,YAAA;AAAA,aAAA,YAAA,GAAA;AACE,aAAA,IAAA,GAAO,CAAP;AACD;AAAD,WAAA,YAAA;AAFA,CAAA,EAAA;AAIA,IAAM,kBAAe,aAAA,YAAA;AAAG,aAAA,GAAA,GAAA;AACtB,aAAA,IAAA,GAAO,CAAP;AACD;AAAD,WAAA,GAAA;AAFwB,CAAH,EAArB;AAIA,IAAA,UAAA,aAAA,UAAA,MAAA,EAAA;AAAsB,cAAA,OAAA,EAAA,MAAA;AAAtB,aAAA,OAAA,GAAA;AAAA,YAAA,QAAA,WAAA,IAAA,IAAA,OAAA,KAAA,CAAA,IAAA,EAAA,SAAA,CAAA,IAAA,IAAA;AACE,cAAA,IAAA,GAAO,CAAP;;AACD;AAAD,WAAA,OAAA;AAFA,CAAA,CAAsB,YAAtB,CAAA;AAIA,IAAI,SAAM,aAAA,UAAA,MAAA,EAAA;AAAyB,cAAA,OAAA,EAAA,MAAA;AAAtB,aAAA,OAAA,GAAA;AAAA,YAAA,QAAA,WAAA,IAAA,IAAA,OAAA,KAAA,CAAA,IAAA,EAAA,SAAA,CAAA,IAAA,IAAA;AACX,cAAA,IAAA,GAAO,CAAP;;AACD;AAAD,WAAA,OAAA;AAFa,CAAH,CAAyB,YAAzB,CAAV;AAIA;AAEA,SAAA,SAAA,GAAA;AACE;AACA;AACA;AACA,SAAK,EAAL;AAEA,YAAQ,GAAR,CAAY,YAAZ;AACD;AAPD,QAAA,SAAA,IAAA,SAAA","file":"typescript-classes.map","sourcesContent":["\nexport function decoratorFactory(opts: { selector: string }) {\n  return function decorator(target) {\n    return <any>target;\n  };\n}\n\nexport default function def() {}\n","// This file essentially reproduces an example Angular component to map testing,\n// among other typescript edge cases.\n\nimport def, { decoratorFactory } from './src/mod.ts';\n\nimport * as ns from './src/mod.ts';\n\n@decoratorFactory({\n  selector: 'app-root',\n})\nexport class AppComponent {\n  title = 'app';\n}\n\nconst fn = arg => {\n  console.log(\"here\");\n};\nfn(\"arg\");\n\n// Un-decorated exported classes present a mapping challege because\n// the class name is mapped to an unhelpful export assignment.\nexport class ExportedOther {\n  title = 'app';\n}\n\nclass AnotherThing {\n  prop = 4;\n}\n\nconst ExpressionClass = class Foo {\n  prop = 4;\n};\n\nclass SubDecl extends AnotherThing {\n  prop = 4;\n}\n\nlet SubVar = class SubExpr extends AnotherThing {\n  prop = 4;\n};\n\nns;\n\nexport default function(){\n  // This file is specifically for testing the mappings of classes and things\n  // above, which means we don't want to include _other_ references to then.\n  // To avoid having them be optimized out, we include a no-op eval.\n  eval(\"\");\n\n  console.log(\"pause here\");\n}\n"]}
\ No newline at end of file
+{"version":3,"sources":["parcel://./typescript-classes/src/mod.ts","parcel://./typescript-classes/input.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAgB,gBAAhB,CAAiC,IAAjC,EAA2D;AACzD,WAAO,SAAS,SAAT,CAAmB,MAAnB,EAAyB;AAC9B,eAAY,MAAZ;AACD,KAFD;AAGD;AAJD,QAAA,gBAAA,GAAA,gBAAA;AAMA,SAAwB,GAAxB,GAA2B,CAAK;AAAhC,QAAA,SAAA,IAAA,GAAA;;;ACPA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAA,WAAA,QAAA,cAAA,CAAA;AAEA,IAAA,KAAA,aAAA,QAAA,cAAA,CAAA,CAAA;AAKA,IAAA,eAAA,aAAA,YAAA;AAHA,aAAA,YAAA,GAAA;AAIE,aAAA,KAAA,GAAQ,KAAR;AACD;AAFY,mBAAY,WAAA,CAHxB,SAAA,gBAAA,CAAiB;AAChB,kBAAU;AADM,KAAjB,CAGwB,CAAA,EAAZ,YAAY,CAAZ;AAEb,WAAA,YAAA;AAFA,CAAA,EAAA;AAAa,QAAA,YAAA,GAAA,YAAA;AAIb,IAAM,KAAK,UAAA,GAAA,EAAG;AACZ,YAAQ,GAAR,CAAY,MAAZ;AACD,CAFD;AAGA,GAAG,KAAH;AAEA;AACA;AACA,IAAA,gBAAA,aAAA,YAAA;AAAA,aAAA,aAAA,GAAA;AACE,aAAA,KAAA,GAAQ,KAAR;AACD;AAAD,WAAA,aAAA;AAFA,CAAA,EAAA;AAAa,QAAA,aAAA,GAAA,aAAA;AAIb,IAAA,eAAA,aAAA,YAAA;AAAA,aAAA,YAAA,GAAA;AACE,aAAA,IAAA,GAAO,CAAP;AACD;AAAD,WAAA,YAAA;AAFA,CAAA,EAAA;AAIA,IAAM,kBAAe,aAAA,YAAA;AAAG,aAAA,GAAA,GAAA;AACtB,aAAA,IAAA,GAAO,CAAP;AACD;AAAD,WAAA,GAAA;AAFwB,CAAH,EAArB;AAIA,IAAA,UAAA,aAAA,UAAA,MAAA,EAAA;AAAsB,cAAA,OAAA,EAAA,MAAA;AAAtB,aAAA,OAAA,GAAA;AAAA,YAAA,QAAA,WAAA,IAAA,IAAA,OAAA,KAAA,CAAA,IAAA,EAAA,SAAA,CAAA,IAAA,IAAA;AACE,cAAA,IAAA,GAAO,CAAP;;AACD;AAAD,WAAA,OAAA;AAFA,CAAA,CAAsB,YAAtB,CAAA;AAIA,IAAI,SAAM,aAAA,UAAA,MAAA,EAAA;AAAyB,cAAA,OAAA,EAAA,MAAA;AAAtB,aAAA,OAAA,GAAA;AAAA,YAAA,QAAA,WAAA,IAAA,IAAA,OAAA,KAAA,CAAA,IAAA,EAAA,SAAA,CAAA,IAAA,IAAA;AACX,cAAA,IAAA,GAAO,CAAP;;AACD;AAAD,WAAA,OAAA;AAFa,CAAH,CAAyB,YAAzB,CAAV;AAIA;AAEA,SAAA,SAAA,GAAA;AACE;AACA;AACA;AACA,SAAK,EAAL;AAEA,YAAQ,GAAR,CAAY,YAAZ;AACD;AAPD,QAAA,SAAA,IAAA,SAAA","file":"typescript-classes.map","sourcesContent":["\nexport function decoratorFactory(opts: { selector: string }) {\n  return function decorator(target) {\n    return <any>target;\n  };\n}\n\nexport default function def() {}\n","// This file essentially reproduces an example Angular component to map testing,\n// among other typescript edge cases.\n\nimport def, { decoratorFactory } from './src/mod.ts';\n\nimport * as ns from './src/mod.ts';\n\n@decoratorFactory({\n  selector: 'app-root',\n})\nexport class AppComponent {\n  title = 'app';\n}\n\nconst fn = arg => {\n  console.log(\"here\");\n};\nfn(\"arg\");\n\n// Un-decorated exported classes present a mapping challege because\n// the class name is mapped to an unhelpful export assignment.\nexport class ExportedOther {\n  title = 'app';\n}\n\nclass AnotherThing {\n  prop = 4;\n}\n\nconst ExpressionClass = class Foo {\n  prop = 4;\n};\n\nclass SubDecl extends AnotherThing {\n  prop = 4;\n}\n\nlet SubVar = class SubExpr extends AnotherThing {\n  prop = 4;\n};\n\nns;\n\nexport default function(){\n  // This file is specifically for testing the mappings of classes and things\n  // above, which means we don't want to include _other_ references to then.\n  // To avoid having them be optimized out, we include a no-op eval.\n  eval(\"\");\n\n  console.log(\"pause here\");\n}\n"]}
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel6/babel-classes.js
@@ -0,0 +1,37 @@
+var rollupBabel6BabelClasses = (function () {
+  'use strict';
+
+  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+  function root() {
+    var Another = function () {
+      function Another() {
+        var _this = this;
+
+        _classCallCheck(this, Another);
+
+        this.bound = function () {
+          return _this;
+        };
+      }
+
+      _createClass(Another, [{
+        key: "method",
+        value: function method() {
+
+          console.log("pause here", Another, root);
+        }
+      }]);
+
+      return Another;
+    }();
+
+    new Another().method();
+  }
+
+  return root;
+
+}());
+//# sourceMappingURL=babel-classes.js.map
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel6/babel-classes.js.map
@@ -0,0 +1,1 @@
+{"version":3,"file":"babel-classes.js","sources":["rollup-babel6://./babel-classes/input.js"],"sourcesContent":["export default function root() {\n  class Another {\n    bound = () => {\n      return this;\n    }\n\n    method() {\n      let two = 2;\n\n      console.log(\"pause here\", Another, root);\n    }\n  }\n\n  new Another().method();\n}\n"],"names":["root","Another","bound","console","log","method"],"mappings":";;;;;;;AAAA,EAAe,SAASA,IAAT,GAAgB;EAAA,MACvBC,OADuB;EAAA;EAAA;;EAAA;;EAAA,WAE3BC,KAF2B,GAEnB,YAAM;EACZ,eAAO,KAAP;EACD,OAJ0B;EAAA;;EAAA;EAAA;EAAA,+BAMlB;AACP;EAEAC,gBAAQC,GAAR,CAAY,YAAZ,EAA0BH,OAA1B,EAAmCD,IAAnC;EACD;EAV0B;;EAAA;EAAA;;EAa7B,MAAIC,OAAJ,GAAcI,MAAd;EACD;;;;;;;;"}
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel7/babel-classes.js
@@ -0,0 +1,71 @@
+var rollupBabel7BabelClasses = (function () {
+  'use strict';
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  function root() {
+    var Another =
+    /*#__PURE__*/
+    function () {
+      function Another() {
+        var _this = this;
+
+        _classCallCheck(this, Another);
+
+        _defineProperty(this, "bound", function () {
+          return _this;
+        });
+      }
+
+      _createClass(Another, [{
+        key: "method",
+        value: function method() {
+          console.log("pause here", Another, root);
+        }
+      }]);
+
+      return Another;
+    }();
+
+    new Another().method();
+  }
+
+  return root;
+
+}());
+//# sourceMappingURL=babel-classes.js.map
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel7/babel-classes.js.map
@@ -0,0 +1,1 @@
+{"version":3,"file":"babel-classes.js","sources":["rollup-babel7://./babel-classes/input.js"],"sourcesContent":["export default function root() {\n  class Another {\n    bound = () => {\n      return this;\n    }\n\n    method() {\n      let two = 2;\n\n      console.log(\"pause here\", Another, root);\n    }\n  }\n\n  new Another().method();\n}\n"],"names":["root","Another","console","log","method"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAe,SAASA,IAAT,GAAgB;EAAA,MACvBC,OADuB;EAAA;EAAA;EAAA;EAAA;;EAAA;;EAAA,qCAEnB,YAAM;EACZ,eAAO,KAAP;EACD,OAJ0B;EAAA;;EAAA;EAAA;EAAA,+BAMlB;AACP,EAEAC,gBAAQC,GAAR,CAAY,YAAZ,EAA0BF,OAA1B,EAAmCD,IAAnC;EACD;EAV0B;;EAAA;EAAA;;EAa7B,MAAIC,OAAJ,GAAcG,MAAd;EACD;;;;;;;;"}
\ No newline at end of file
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup/typescript-classes.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup/typescript-classes.js
@@ -1,97 +1,97 @@
 var rollupTypescriptClasses = (function () {
     'use strict';
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
-
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
-
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-
-    var extendStatics = function(d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-
-    function __extends(d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-
-    function decoratorFactory(opts) {
-        return function decorator(target) {
-            return target;
-        };
+    function decoratorFactory(opts) {
+        return function decorator(target) {
+            return target;
+        };
     }
 
-    // This file essentially reproduces an example Angular component to map testing,
-    var AppComponent = /** @class */ (function () {
-        function AppComponent() {
-            this.title = 'app';
-        }
-        AppComponent = __decorate([
-            decoratorFactory({
-                selector: 'app-root'
-            })
-        ], AppComponent);
-        return AppComponent;
-    }());
-    var fn = function (arg) {
-        console.log("here");
-    };
-    fn("arg");
-    var AnotherThing = /** @class */ (function () {
-        function AnotherThing() {
-            this.prop = 4;
-        }
-        return AnotherThing;
-    }());
-    var SubDecl = /** @class */ (function (_super) {
-        __extends(SubDecl, _super);
-        function SubDecl() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.prop = 4;
-            return _this;
-        }
-        return SubDecl;
-    }(AnotherThing));
-    var SubVar = /** @class */ (function (_super) {
-        __extends(SubExpr, _super);
-        function SubExpr() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.prop = 4;
-            return _this;
-        }
-        return SubExpr;
-    }(AnotherThing));
-    function test () {
-        // 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");
+    // This file essentially reproduces an example Angular component to map testing,
+    var AppComponent = /** @class */ (function () {
+        function AppComponent() {
+            this.title = 'app';
+        }
+        AppComponent = __decorate([
+            decoratorFactory({
+                selector: 'app-root'
+            })
+        ], AppComponent);
+        return AppComponent;
+    }());
+    var fn = function (arg) {
+        console.log("here");
+    };
+    fn("arg");
+    var AnotherThing = /** @class */ (function () {
+        function AnotherThing() {
+            this.prop = 4;
+        }
+        return AnotherThing;
+    }());
+    var SubDecl = /** @class */ (function (_super) {
+        __extends(SubDecl, _super);
+        function SubDecl() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.prop = 4;
+            return _this;
+        }
+        return SubDecl;
+    }(AnotherThing));
+    var SubVar = /** @class */ (function (_super) {
+        __extends(SubExpr, _super);
+        function SubExpr() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.prop = 4;
+            return _this;
+        }
+        return SubExpr;
+    }(AnotherThing));
+    function test () {
+        // 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");
     }
 
     return test;
 
 }());
 //# sourceMappingURL=typescript-classes.js.map
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel6/babel-classes.js
@@ -0,0 +1,107 @@
+var webpack3Babel6BabelClasses =
+/******/ (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;
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function root() {
+  var Another = function () {
+    function Another() {
+      var _this = this;
+
+      _classCallCheck(this, Another);
+
+      this.bound = function () {
+        return _this;
+      };
+    }
+
+    _createClass(Another, [{
+      key: "method",
+      value: function method() {
+        var two = 2;
+
+        console.log("pause here", Another, root);
+      }
+    }]);
+
+    return Another;
+  }();
+
+  new Another().method();
+}
+
+/***/ })
+/******/ ])["default"];
+//# sourceMappingURL=babel-classes.js.map
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel6/babel-classes.js.map
@@ -0,0 +1,1 @@
+{"version":3,"sources":["webpack3-babel6://./babel-classes/webpack/bootstrap 5a57728ea4dd6e4f4f6a","webpack3-babel6://./babel-classes/./input.js"],"names":["root","Another","bound","two","console","log","method"],"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;;;;;;;;;;;;;;AC7De,SAASA,IAAT,GAAgB;AAAA,MACvBC,OADuB;AAAA;AAAA;;AAAA;;AAAA,WAE3BC,KAF2B,GAEnB,YAAM;AACZ,eAAO,KAAP;AACD,OAJ0B;AAAA;;AAAA;AAAA;AAAA,+BAMlB;AACP,YAAIC,MAAM,CAAV;;AAEAC,gBAAQC,GAAR,CAAY,YAAZ,EAA0BJ,OAA1B,EAAmCD,IAAnC;AACD;AAV0B;;AAAA;AAAA;;AAa7B,MAAIC,OAAJ,GAAcK,MAAd;AACD,C","file":"babel-classes.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 5a57728ea4dd6e4f4f6a","export default function root() {\n  class Another {\n    bound = () => {\n      return this;\n    }\n\n    method() {\n      let two = 2;\n\n      console.log(\"pause here\", Another, root);\n    }\n  }\n\n  new Another().method();\n}\n\n\n\n// WEBPACK FOOTER //\n// ./input.js"],"sourceRoot":""}
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel7/babel-classes.js
@@ -0,0 +1,112 @@
+var webpack3Babel7BabelClasses =
+/******/ (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;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function root() {
+  var Another =
+  /*#__PURE__*/
+  function () {
+    function Another() {
+      var _this = this;
+
+      _classCallCheck(this, Another);
+
+      _defineProperty(this, "bound", function () {
+        return _this;
+      });
+    }
+
+    _createClass(Another, [{
+      key: "method",
+      value: function method() {
+        var two = 2;
+        console.log("pause here", Another, root);
+      }
+    }]);
+
+    return Another;
+  }();
+
+  new Another().method();
+}
+
+/***/ })
+/******/ ])["default"];
+//# sourceMappingURL=babel-classes.js.map
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel7/babel-classes.js.map
@@ -0,0 +1,1 @@
+{"version":3,"sources":["webpack3-babel7://./babel-classes/webpack/bootstrap 21c3483666431a1bbc91","webpack3-babel7://./babel-classes/./input.js"],"names":["root","Another","two","console","log","method"],"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;;;;;;;;;;;;;;;;;;AC7De,SAASA,IAAT,GAAgB;AAAA,MACvBC,OADuB;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA,qCAEnB,YAAM;AACZ,eAAO,KAAP;AACD,OAJ0B;AAAA;;AAAA;AAAA;AAAA,+BAMlB;AACP,YAAIC,MAAM,CAAV;AAEAC,gBAAQC,GAAR,CAAY,YAAZ,EAA0BH,OAA1B,EAAmCD,IAAnC;AACD;AAV0B;;AAAA;AAAA;;AAa7B,MAAIC,OAAJ,GAAcI,MAAd;AACD,C","file":"babel-classes.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 21c3483666431a1bbc91","export default function root() {\n  class Another {\n    bound = () => {\n      return this;\n    }\n\n    method() {\n      let two = 2;\n\n      console.log(\"pause here\", Another, root);\n    }\n  }\n\n  new Another().method();\n}\n\n\n\n// WEBPACK FOOTER //\n// ./input.js"],"sourceRoot":""}
\ No newline at end of file
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3/typescript-classes.js.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3/typescript-classes.js.map
@@ -1,1 +1,1 @@
-{"version":3,"sources":["webpack3://./typescript-classes/webpack/bootstrap 56fd7aa89ed0d74421bc","webpack3://./typescript-classes/./src/mod.ts","webpack3://./typescript-classes/./input.ts"],"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;;;;;;;;;;AC5DA,0BAAiC,IAA0B;IACzD,OAAO,mBAAmB,MAAM;QAC9B,OAAY,MAAM,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC;AAJD,4CAIC;AAED,iBAA+B,CAAC;AAAhC,yBAAgC;;;;;;;;;ACPhC,gFAAgF;AAChF,qCAAqC;;;;;;;;;;;;;;;;;;AAErC,sCAAqD;AAErD,gCAAmC;AAKnC;IAHA;QAIE,UAAK,GAAG,KAAK,CAAC;IAChB,CAAC;IAFY,YAAY;QAHxB,yBAAgB,CAAC;YAChB,QAAQ,EAAE,UAAU;SACrB,CAAC;OACW,YAAY,CAExB;IAAD,mBAAC;CAAA;AAFY,oCAAY;AAIzB,IAAM,EAAE,GAAG,aAAG;IACZ,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AACtB,CAAC,CAAC;AACF,EAAE,CAAC,KAAK,CAAC,CAAC;AAEV,mEAAmE;AACnE,8DAA8D;AAC9D;IAAA;QACE,UAAK,GAAG,KAAK,CAAC;IAChB,CAAC;IAAD,oBAAC;AAAD,CAAC;AAFY,sCAAa;AAI1B;IAAA;QACE,SAAI,GAAG,CAAC,CAAC;IACX,CAAC;IAAD,mBAAC;AAAD,CAAC;AAED,IAAM,eAAe;IAAG;QACtB,SAAI,GAAG,CAAC,CAAC;IACX,CAAC;IAAD,UAAC;AAAD,CAAC,IAAC;AAEF;IAAsB,2BAAY;IAAlC;QAAA,qEAEC;QADC,UAAI,GAAG,CAAC,CAAC;;IACX,CAAC;IAAD,cAAC;AAAD,CAAC,CAFqB,YAAY,GAEjC;AAED,IAAI,MAAM;IAAyB,2BAAY;IAAlC;QAAA,qEAEZ;QADC,UAAI,GAAG,CAAC,CAAC;;IACX,CAAC;IAAD,cAAC;AAAD,CAAC,CAFkC,YAAY,EAE9C,CAAC;AAEF,EAAE,CAAC;AAEH;IACE,2EAA2E;IAC3E,0EAA0E;IAC1E,kEAAkE;IAClE,IAAI,CAAC,EAAE,CAAC,CAAC;IAET,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;AAC5B,CAAC;AAPD,+BAOC","file":"typescript-classes.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 = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 56fd7aa89ed0d74421bc","\nexport function decoratorFactory(opts: { selector: string }) {\n  return function decorator(target) {\n    return <any>target;\n  };\n}\n\nexport default function def() {}\n\n\n\n// WEBPACK FOOTER //\n// ./src/mod.ts","// This file essentially reproduces an example Angular component to map testing,\n// among other typescript edge cases.\n\nimport def, { decoratorFactory } from './src/mod.ts';\n\nimport * as ns from './src/mod.ts';\n\n@decoratorFactory({\n  selector: 'app-root',\n})\nexport class AppComponent {\n  title = 'app';\n}\n\nconst fn = arg => {\n  console.log(\"here\");\n};\nfn(\"arg\");\n\n// Un-decorated exported classes present a mapping challege because\n// the class name is mapped to an unhelpful export assignment.\nexport class ExportedOther {\n  title = 'app';\n}\n\nclass AnotherThing {\n  prop = 4;\n}\n\nconst ExpressionClass = class Foo {\n  prop = 4;\n};\n\nclass SubDecl extends AnotherThing {\n  prop = 4;\n}\n\nlet SubVar = class SubExpr extends AnotherThing {\n  prop = 4;\n};\n\nns;\n\nexport default function(){\n  // This file is specifically for testing the mappings of classes and things\n  // above, which means we don't want to include _other_ references to then.\n  // To avoid having them be optimized out, we include a no-op eval.\n  eval(\"\");\n\n  console.log(\"pause here\");\n}\n\n\n\n// WEBPACK FOOTER //\n// ./input.ts"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack3://./typescript-classes/webpack/bootstrap 72affb70e005e17a24e0","webpack3://./typescript-classes/./src/mod.ts","webpack3://./typescript-classes/./input.ts"],"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;;;;;;;;;;AC5DA,0BAAiC,IAA0B;IACzD,OAAO,mBAAmB,MAAM;QAC9B,OAAY,MAAM,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC;AAJD,4CAIC;AAED,iBAA+B,CAAC;AAAhC,yBAAgC;;;;;;;;;ACPhC,gFAAgF;AAChF,qCAAqC;;;;;;;;;;;;;;;;;;AAErC,sCAAqD;AAErD,gCAAmC;AAKnC;IAHA;QAIE,UAAK,GAAG,KAAK,CAAC;IAChB,CAAC;IAFY,YAAY;QAHxB,yBAAgB,CAAC;YAChB,QAAQ,EAAE,UAAU;SACrB,CAAC;OACW,YAAY,CAExB;IAAD,mBAAC;CAAA;AAFY,oCAAY;AAIzB,IAAM,EAAE,GAAG,aAAG;IACZ,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AACtB,CAAC,CAAC;AACF,EAAE,CAAC,KAAK,CAAC,CAAC;AAEV,mEAAmE;AACnE,8DAA8D;AAC9D;IAAA;QACE,UAAK,GAAG,KAAK,CAAC;IAChB,CAAC;IAAD,oBAAC;AAAD,CAAC;AAFY,sCAAa;AAI1B;IAAA;QACE,SAAI,GAAG,CAAC,CAAC;IACX,CAAC;IAAD,mBAAC;AAAD,CAAC;AAED,IAAM,eAAe;IAAG;QACtB,SAAI,GAAG,CAAC,CAAC;IACX,CAAC;IAAD,UAAC;AAAD,CAAC,IAAC;AAEF;IAAsB,2BAAY;IAAlC;QAAA,qEAEC;QADC,UAAI,GAAG,CAAC,CAAC;;IACX,CAAC;IAAD,cAAC;AAAD,CAAC,CAFqB,YAAY,GAEjC;AAED,IAAI,MAAM;IAAyB,2BAAY;IAAlC;QAAA,qEAEZ;QADC,UAAI,GAAG,CAAC,CAAC;;IACX,CAAC;IAAD,cAAC;AAAD,CAAC,CAFkC,YAAY,EAE9C,CAAC;AAEF,EAAE,CAAC;AAEH;IACE,2EAA2E;IAC3E,0EAA0E;IAC1E,kEAAkE;IAClE,IAAI,CAAC,EAAE,CAAC,CAAC;IAET,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;AAC5B,CAAC;AAPD,+BAOC","file":"typescript-classes.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 = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 72affb70e005e17a24e0","\nexport function decoratorFactory(opts: { selector: string }) {\n  return function decorator(target) {\n    return <any>target;\n  };\n}\n\nexport default function def() {}\n\n\n\n// WEBPACK FOOTER //\n// ./src/mod.ts","// This file essentially reproduces an example Angular component to map testing,\n// among other typescript edge cases.\n\nimport def, { decoratorFactory } from './src/mod.ts';\n\nimport * as ns from './src/mod.ts';\n\n@decoratorFactory({\n  selector: 'app-root',\n})\nexport class AppComponent {\n  title = 'app';\n}\n\nconst fn = arg => {\n  console.log(\"here\");\n};\nfn(\"arg\");\n\n// Un-decorated exported classes present a mapping challege because\n// the class name is mapped to an unhelpful export assignment.\nexport class ExportedOther {\n  title = 'app';\n}\n\nclass AnotherThing {\n  prop = 4;\n}\n\nconst ExpressionClass = class Foo {\n  prop = 4;\n};\n\nclass SubDecl extends AnotherThing {\n  prop = 4;\n}\n\nlet SubVar = class SubExpr extends AnotherThing {\n  prop = 4;\n};\n\nns;\n\nexport default function(){\n  // This file is specifically for testing the mappings of classes and things\n  // above, which means we don't want to include _other_ references to then.\n  // To avoid having them be optimized out, we include a no-op eval.\n  eval(\"\");\n\n  console.log(\"pause here\");\n}\n\n\n\n// WEBPACK FOOTER //\n// ./input.ts"],"sourceRoot":""}
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel6/babel-classes.js
@@ -0,0 +1,134 @@
+var webpack4Babel6BabelClasses =
+/******/ (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, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// 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 = "./input.js");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./input.js":
+/*!******************!*\
+  !*** ./input.js ***!
+  \******************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return root; });
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function root() {
+  var Another = function () {
+    function Another() {
+      var _this = this;
+
+      _classCallCheck(this, Another);
+
+      this.bound = function () {
+        return _this;
+      };
+    }
+
+    _createClass(Another, [{
+      key: "method",
+      value: function method() {
+        var two = 2;
+
+        console.log("pause here", Another, root);
+      }
+    }]);
+
+    return Another;
+  }();
+
+  new Another().method();
+}
+
+/***/ })
+
+/******/ })["default"];
+//# sourceMappingURL=babel-classes.js.map
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel6/babel-classes.js.map
@@ -0,0 +1,1 @@
+{"version":3,"sources":["webpack4-babel6://./babel-classes/webpack/bootstrap","webpack4-babel6://./babel-classes/./input.js"],"names":["root","Another","bound","two","console","log","method"],"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,kDAA0C,gCAAgC;AAC1E;AACA;;AAEA;AACA;AACA;AACA,gEAAwD,kBAAkB;AAC1E;AACA,yDAAiD,cAAc;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAyC,iCAAiC;AAC1E,wHAAgH,mBAAmB,EAAE;AACrI;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;;AAGA;AACA;;;;;;;;;;;;;;;;;;;AClFe,SAASA,IAAT,GAAgB;AAAA,MACvBC,OADuB;AAAA;AAAA;;AAAA;;AAAA,WAE3BC,KAF2B,GAEnB,YAAM;AACZ,eAAO,KAAP;AACD,OAJ0B;AAAA;;AAAA;AAAA;AAAA,+BAMlB;AACP,YAAIC,MAAM,CAAV;;AAEAC,gBAAQC,GAAR,CAAY,YAAZ,EAA0BJ,OAA1B,EAAmCD,IAAnC;AACD;AAV0B;;AAAA;AAAA;;AAa7B,MAAIC,OAAJ,GAAcK,MAAd;AACD,C","file":"babel-classes.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, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\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\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./input.js\");\n","export default function root() {\n  class Another {\n    bound = () => {\n      return this;\n    }\n\n    method() {\n      let two = 2;\n\n      console.log(\"pause here\", Another, root);\n    }\n  }\n\n  new Another().method();\n}\n"],"sourceRoot":""}
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel7/babel-classes.js
@@ -0,0 +1,139 @@
+var webpack4Babel7BabelClasses =
+/******/ (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, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// 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 = "./input.js");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./input.js":
+/*!******************!*\
+  !*** ./input.js ***!
+  \******************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return root; });
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function root() {
+  var Another =
+  /*#__PURE__*/
+  function () {
+    function Another() {
+      var _this = this;
+
+      _classCallCheck(this, Another);
+
+      _defineProperty(this, "bound", function () {
+        return _this;
+      });
+    }
+
+    _createClass(Another, [{
+      key: "method",
+      value: function method() {
+        var two = 2;
+        console.log("pause here", Another, root);
+      }
+    }]);
+
+    return Another;
+  }();
+
+  new Another().method();
+}
+
+/***/ })
+
+/******/ })["default"];
+//# sourceMappingURL=babel-classes.js.map
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel7/babel-classes.js.map
@@ -0,0 +1,1 @@
+{"version":3,"sources":["webpack4-babel7://./babel-classes/webpack/bootstrap","webpack4-babel7://./babel-classes/./input.js"],"names":["root","Another","two","console","log","method"],"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,kDAA0C,gCAAgC;AAC1E;AACA;;AAEA;AACA;AACA;AACA,gEAAwD,kBAAkB;AAC1E;AACA,yDAAiD,cAAc;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAyC,iCAAiC;AAC1E,wHAAgH,mBAAmB,EAAE;AACrI;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;;AAGA;AACA;;;;;;;;;;;;;;;;;;;;;;;AClFe,SAASA,IAAT,GAAgB;AAAA,MACvBC,OADuB;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA,qCAEnB,YAAM;AACZ,eAAO,KAAP;AACD,OAJ0B;AAAA;;AAAA;AAAA;AAAA,+BAMlB;AACP,YAAIC,MAAM,CAAV;AAEAC,gBAAQC,GAAR,CAAY,YAAZ,EAA0BH,OAA1B,EAAmCD,IAAnC;AACD;AAV0B;;AAAA;AAAA;;AAa7B,MAAIC,OAAJ,GAAcI,MAAd;AACD,C","file":"babel-classes.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, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\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\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./input.js\");\n","export default function root() {\n  class Another {\n    bound = () => {\n      return this;\n    }\n\n    method() {\n      let two = 2;\n\n      console.log(\"pause here\", Another, root);\n    }\n  }\n\n  new Another().method();\n}\n"],"sourceRoot":""}
\ No newline at end of file
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/polyfill-bundle.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/polyfill-bundle.js
@@ -2749,37 +2749,37 @@ hide($DataView[PROTOTYPE], $typed.VIEW, 
 exports[ARRAY_BUFFER] = $ArrayBuffer;
 exports[DATA_VIEW] = $DataView;
 
 
 /***/ }),
 /* 90 */
 /***/ (function(module, exports) {
 
-var g;
-
-// This works in non-strict mode
-g = (function() {
-	return this;
-})();
-
-try {
-	// This works if eval is allowed (see CSP)
-	g = g || Function("return this")() || (1,eval)("this");
-} catch(e) {
-	// This works if the window reference is available
-	if(typeof window === "object")
-		g = window;
-}
-
-// g can still be undefined, but nothing to do about it...
-// We return undefined, instead of nothing here, so it's
-// easier to handle this case. if(!global) { ...}
-
-module.exports = g;
+var g;
+
+// This works in non-strict mode
+g = (function() {
+	return this;
+})();
+
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || Function("return this")() || (1,eval)("this");
+} catch(e) {
+	// This works if the window reference is available
+	if(typeof window === "object")
+		g = window;
+}
+
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
+
+module.exports = g;
 
 
 /***/ }),
 /* 91 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = !__webpack_require__(6) && !__webpack_require__(3)(function () {
   return Object.defineProperty(__webpack_require__(64)('div'), 'a', { get: function () { return 7; } }).a != 7;
--- a/devtools/client/debugger/new/test/mochitest/helpers.js
+++ b/devtools/client/debugger/new/test/mochitest/helpers.js
@@ -368,20 +368,21 @@ function assertHighlightLocation(dbg, so
 
   is(
     findAllElements(dbg, "highlightLine").length,
     1,
     "Only 1 line is highlighted"
   );
 
   ok(isVisibleInEditor(dbg, lineEl), "Highlighted line is visible");
+
+  const cm = getCM(dbg);
+  const lineInfo = cm.lineInfo(line - 1);
   ok(
-    getCM(dbg)
-      .lineInfo(line - 1)
-      .wrapClass.includes("highlight-line"),
+    lineInfo.wrapClass.includes("highlight-line"),
     "Line is highlighted"
   );
 }
 
 /**
  * Returns boolean for whether the debugger is paused.
  *
  * @memberof mochitest/asserts
@@ -604,19 +605,19 @@ async function selectSource(dbg, url, li
 
 async function selectSpecificSource(dbg, url, line) {
   const source = findSource(dbg, url);
   await dbg.actions.selectLocation({ sourceId: source.id, line }, {keepContext: false});
   return waitForSelectedSource(dbg, url);
 }
 
 
-function closeTab(dbg, url) {
+async function closeTab(dbg, url) {
   const source = findSource(dbg, url);
-  return dbg.actions.closeTab(source.url);
+  await dbg.actions.closeTab(source.url);
 }
 
 /**
  * Steps over.
  *
  * @memberof mochitest/actions
  * @param {Object} dbg
  * @return {Promise}
--- a/devtools/client/shared/components/reps/reps.css
+++ b/devtools/client/shared/components/reps/reps.css
@@ -1,14 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
-.tree {
-  overflow: auto;
+ /* We can remove the outline since we do add our own focus style on nodes */
+.tree:focus {
+  outline: none;
 }
 
 .tree.inline {
   display: inline-block;
 }
 
 .tree.nowrap {
   white-space: nowrap;
--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@@ -4460,25 +4460,17 @@ class Tree extends Component {
       tabIndex: "0",
       onKeyDown: this._onKeyDown,
       onKeyPress: this._preventArrowKeyScrolling,
       onKeyUp: this._preventArrowKeyScrolling,
       onFocus: ({ nativeEvent }) => {
         if (focused || !nativeEvent || !this.treeRef) {
           return;
         }
-
-        const { explicitOriginalTarget } = nativeEvent;
-
-        // Only set default focus to the first tree node if the focus came
-        // from outside the tree (e.g. by tabbing to the tree from other
-        // external elements).
-        if (explicitOriginalTarget !== this.treeRef && !this.treeRef.contains(explicitOriginalTarget)) {
-          this._focus(traversal[0].item);
-        }
+        this._focus(traversal[0].item);
       },
       onBlur: this._onBlur,
       "aria-label": this.props.label,
       "aria-labelledby": this.props.labelledby,
       "aria-activedescendant": focused && this.props.getKey(focused),
       style
     }, nodes);
   }