Merge mozilla-central to autoland. a=merge CLOSED TREE

2018-08-22 19:31:52 +03:00 · 2018-08-22 19:31:52 +03:00 · e0e342c6ae
--- a/Cargo.lock
+++ b/Cargo.lock
@ -806,6 +806,7 @@ dependencies = [
 name = "geckodriver"
 version = "0.21.0"
 dependencies = [
+ "base64 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "chrono 0.2.25 (registry+https://github.com/rust-lang/crates.io-index)",
 "clap 2.31.2 (registry+https://github.com/rust-lang/crates.io-index)",
 "hyper 0.10.13 (registry+https://github.com/rust-lang/crates.io-index)",
@ -815,7 +816,9 @@ dependencies = [
 "mozrunner 0.7.0",
 "mozversion 0.1.3",
 "regex 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "rustc-serialize 0.3.24 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.66 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_derive 1.0.66 (git+https://github.com/servo/serde?branch=deserialize_from_enums8)",
+ "serde_json 1.0.26 (registry+https://github.com/rust-lang/crates.io-index)",
 "uuid 0.5.1 (registry+https://github.com/rust-lang/crates.io-index)",
 "webdriver 0.36.0",
 "zip 0.3.3 (registry+https://github.com/rust-lang/crates.io-index)",
@ -832,6 +835,7 @@ dependencies = [
 "log 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)",
 "malloc_size_of 0.0.1",
 "nsstring 0.1.0",
+ "num-traits 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "parking_lot 0.6.3 (registry+https://github.com/rust-lang/crates.io-index)",
 "selectors 0.19.0",
 "servo_arc 0.1.1",
@ -1836,11 +1840,6 @@ name = "rustc-demangle"
 version = "0.1.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"

-[[package]]
-name = "rustc-serialize"
-version = "0.3.24"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-
 [[package]]
 name = "rustc_version"
 version = "0.2.1"
@ -1849,6 +1848,11 @@ dependencies = [
 "semver 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]

+[[package]]
+name = "ryu"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+
 [[package]]
 name = "safemem"
 version = "0.2.0"
@ -1928,6 +1932,16 @@ dependencies = [
 "syn 0.14.6 (registry+https://github.com/rust-lang/crates.io-index)",
 ]

+[[package]]
+name = "serde_json"
+version = "1.0.26"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+dependencies = [
+ "itoa 0.4.1 (registry+https://github.com/rust-lang/crates.io-index)",
+ "ryu 0.2.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.66 (registry+https://github.com/rust-lang/crates.io-index)",
+]
+
 [[package]]
 name = "servo_arc"
 version = "0.1.1"
@ -2100,6 +2114,7 @@ dependencies = [
 "libc 0.2.39 (registry+https://github.com/rust-lang/crates.io-index)",
 "log 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)",
 "malloc_size_of 0.0.1",
+ "num-traits 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "regex 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "selectors 0.19.0",
 "size_of_test 0.0.1",
@ -2412,11 +2427,15 @@ dependencies = [
 name = "webdriver"
 version = "0.36.0"
 dependencies = [
+ "base64 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "cookie 0.10.1 (registry+https://github.com/rust-lang/crates.io-index)",
 "hyper 0.10.13 (registry+https://github.com/rust-lang/crates.io-index)",
+ "lazy_static 1.0.1 (registry+https://github.com/rust-lang/crates.io-index)",
 "log 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)",
 "regex 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "rustc-serialize 0.3.24 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.66 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_derive 1.0.66 (git+https://github.com/servo/serde?branch=deserialize_from_enums8)",
+ "serde_json 1.0.26 (registry+https://github.com/rust-lang/crates.io-index)",
 "time 0.1.40 (registry+https://github.com/rust-lang/crates.io-index)",
 "unicode-segmentation 1.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
 "url 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
@ -2795,8 +2814,8 @@ dependencies = [
 "checksum runloop 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)" = "5d79b4b604167921892e84afbbaad9d5ad74e091bf6c511d9dbfb0593f09fabd"
 "checksum rust-ini 0.10.3 (registry+https://github.com/rust-lang/crates.io-index)" = "8a654c5bda722c699be6b0fe4c0d90de218928da5b724c3e467fc48865c37263"
 "checksum rustc-demangle 0.1.8 (registry+https://github.com/rust-lang/crates.io-index)" = "76d7ba1feafada44f2d38eed812bd2489a03c0f5abb975799251518b68848649"
-"checksum rustc-serialize 0.3.24 (registry+https://github.com/rust-lang/crates.io-index)" = "dcf128d1287d2ea9d80910b5f1120d0b8eede3fbf1abe91c40d39ea7d51e6fda"
 "checksum rustc_version 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "b9743a7670d88d5d52950408ecdb7c71d8986251ab604d4689dd2ca25c9bca69"
+"checksum ryu 0.2.4 (registry+https://github.com/rust-lang/crates.io-index)" = "fd0568787116e13c652377b6846f5931454a363a8fdf8ae50463ee40935b278b"
 "checksum safemem 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "e27a8b19b835f7aea908818e871f5cc3a5a186550c30773be987e155e8163d8f"
 "checksum same-file 1.0.2 (registry+https://github.com/rust-lang/crates.io-index)" = "cfb6eded0b06a0b512c8ddbcf04089138c9b4362c2f696f3c3d76039d68f3637"
 "checksum scoped-tls 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)" = "f417c22df063e9450888a7561788e9bd46d3bb3c1466435b4eccb903807f147d"
@ -2806,6 +2825,7 @@ dependencies = [
 "checksum serde 1.0.66 (registry+https://github.com/rust-lang/crates.io-index)" = "e9a2d9a9ac5120e0f768801ca2b58ad6eec929dc9d1d616c162f208869c2ce95"
 "checksum serde_bytes 0.10.4 (registry+https://github.com/rust-lang/crates.io-index)" = "adb6e51a6b3696b301bc221d785f898b4457c619b51d7ce195a6d20baecb37b3"
 "checksum serde_derive 1.0.66 (git+https://github.com/servo/serde?branch=deserialize_from_enums8)" = "<none>"
+"checksum serde_json 1.0.26 (registry+https://github.com/rust-lang/crates.io-index)" = "44dd2cfde475037451fa99b7e5df77aa3cfd1536575fa8e7a538ab36dcde49ae"
 "checksum simd 0.2.2 (registry+https://github.com/rust-lang/crates.io-index)" = "ed3686dd9418ebcc3a26a0c0ae56deab0681e53fe899af91f5bbcee667ebffb1"
 "checksum siphasher 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "2ffc669b726f2bc9a3bcff66e5e23b56ba6bf70e22a34c3d7b6d0b3450b65b84"
 "checksum slab 0.3.0 (registry+https://github.com/rust-lang/crates.io-index)" = "17b4fcaed89ab08ef143da37bc52adbcc04d4a69014f4c1208d6b51f0c47bc23"
--- a/browser/base/content/browser-context.inc
+++ b/browser/base/content/browser-context.inc
@ -356,8 +356,7 @@
          <menuitem id="context-viewframesource"
                    label="&viewFrameSourceCmd.label;"
                    accesskey="&viewFrameSourceCmd.accesskey;"
-                    oncommand="gContextMenu.viewFrameSource();"
-                    observes="isFrameImage"/>
+                    oncommand="gContextMenu.viewFrameSource();"/>
          <menuitem id="context-viewframeinfo"
                    label="&viewFrameInfoCmd.label;"
                    accesskey="&viewFrameInfoCmd.accesskey;"
@ -367,14 +366,12 @@
      <menuitem id="context-viewpartialsource-selection"
                label="&viewPartialSourceForSelectionCmd.label;"
                accesskey="&viewPartialSourceCmd.accesskey;"
-                oncommand="gContextMenu.viewPartialSource();"
-                observes="isImage"/>
+                oncommand="gContextMenu.viewPartialSource();"/>
      <menuseparator id="context-sep-viewsource"/>
      <menuitem id="context-viewsource"
                label="&viewPageSourceCmd.label;"
                accesskey="&viewPageSourceCmd.accesskey;"
-                oncommand="BrowserViewSource(gContextMenu.browser);"
-                observes="canViewSource"/>
+                oncommand="BrowserViewSource(gContextMenu.browser);"/>
      <menuitem id="context-viewinfo"
                label="&viewPageInfoCmd.label;"
                accesskey="&viewPageInfoCmd.accesskey;"
--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@ -89,8 +89,7 @@
                          label="&goOfflineCmd.label;"
                          accesskey="&goOfflineCmd.accesskey;"
                          type="checkbox"
-                          observes="workOfflineMenuitemState"
-                          oncommand="BrowserOffline.toggleOfflineStatus();"/>
+                          command="cmd_toggleOfflineStatus"/>
                <menuitem id="menu_FileQuitItem"
 #ifdef XP_WIN
                          label="&quitApplicationCmdWin2.label;"
@ -246,7 +245,7 @@
                  </menupopup>
                </menu>
                <menu id="pageStyleMenu" label="&pageStyleMenu.label;"
-                      accesskey="&pageStyleMenu.accesskey;" observes="isImage">
+                      accesskey="&pageStyleMenu.accesskey;">
                  <menupopup onpopupshowing="gPageStyleMenu.fillPopup(this);">
                    <menuitem id="menu_pageStyleNoStyle"
                              label="&pageStyleNoStyle.label;"
@ -518,17 +517,18 @@
                            label="&pageSourceCmd.label;"
                            key="key_viewSource"
                            command="View:PageSource"
-                            accesskey="&pageSourceCmd.accesskey;">
-                    <observes element="canViewSource" attribute="disabled"/>
-                  </menuitem>
+                            accesskey="&pageSourceCmd.accesskey;"/>
                  <menuitem id="menu_devtools_recordExecution"
-                            observes="devtoolsMenuBroadcaster_RecordExecution"
+                            label="&devtoolsRecordExecution.label;"
+                            command="Tools:RecordExecution"
                            hidden="true"/>
                  <menuitem id="menu_devtools_saveRecording"
-                            observes="devtoolsMenuBroadcaster_SaveRecording"
+                            label="&devtoolsSaveRecording.label;"
+                            command="Tools:SaveRecording"
                            hidden="true"/>
                  <menuitem id="menu_devtools_replayExecution"
-                            observes="devtoolsMenuBroadcaster_ReplayExecution"
+                            label="&devtoolsReplayExecution.label;"
+                            command="Tools:ReplayExecution"
                            hidden="true"/>
                </menupopup>
              </menu>
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@ -37,23 +37,18 @@
    <command id="cmd_closeWindow" oncommand="BrowserTryToCloseWindow()"/>
    <command id="cmd_toggleMute" oncommand="gBrowser.selectedTab.toggleMuteAudio()"/>
    <command id="cmd_CustomizeToolbars" oncommand="gCustomizeMode.enter()"/>
+    <command id="cmd_toggleOfflineStatus" oncommand="BrowserOffline.toggleOfflineStatus();"/>
    <command id="cmd_quitApplication" oncommand="goQuitApplication()"/>

 #include ../../../toolkit/content/editMenuCommands.inc.xul

-    <command id="View:PageSource" oncommand="BrowserViewSource(window.gBrowser.selectedBrowser);" observes="canViewSource"/>
+    <command id="View:PageSource" oncommand="BrowserViewSource(window.gBrowser.selectedBrowser);"/>
    <command id="View:PageInfo" oncommand="BrowserPageInfo();"/>
    <command id="View:FullScreen" oncommand="BrowserFullScreen();"/>
    <command id="View:ReaderView" oncommand="ReaderParent.toggleReaderMode(event);"/>
-    <command id="cmd_find"
-             oncommand="gLazyFindCommand('onFindCommand')"
-             observes="isImage"/>
-    <command id="cmd_findAgain"
-             oncommand="gLazyFindCommand('onFindAgainCommand', false)"
-             observes="isImage"/>
-    <command id="cmd_findPrevious"
-             oncommand="gLazyFindCommand('onFindAgainCommand', true)"
-             observes="isImage"/>
+    <command id="cmd_find" oncommand="gLazyFindCommand('onFindCommand')"/>
+    <command id="cmd_findAgain" oncommand="gLazyFindCommand('onFindAgainCommand', false)"/>
+    <command id="cmd_findPrevious" oncommand="gLazyFindCommand('onFindAgainCommand', true)"/>
 #ifdef XP_MACOSX
    <command id="cmd_findSelection" oncommand="gLazyFindCommand('onFindSelectionCommand')"/>
 #endif
@ -121,23 +116,6 @@

 #include ../../components/places/content/placesCommands.inc.xul

-  <broadcasterset id="mainBroadcasterSet">
-    <broadcaster id="isImage"/>
-    <broadcaster id="canViewSource"/>
-    <broadcaster id="isFrameImage"/>
-
-    <broadcaster id="workOfflineMenuitemState"/>
-    <broadcaster id="devtoolsMenuBroadcaster_RecordExecution"
-                 label="&devtoolsRecordExecution.label;"
-                 command="Tools:RecordExecution"/>
-    <broadcaster id="devtoolsMenuBroadcaster_SaveRecording"
-                 label="&devtoolsSaveRecording.label;"
-                 command="Tools:SaveRecording"/>
-    <broadcaster id="devtoolsMenuBroadcaster_ReplayExecution"
-                 label="&devtoolsReplayExecution.label;"
-                 command="Tools:ReplayExecution"/>
-  </broadcasterset>
-
  <keyset id="mainKeyset">
    <key id="key_newNavigator"
         key="&newNavigatorCmd.key;"
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@ -28,6 +28,14 @@
  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
 }

+/* Set additional backgrounds alignment relative to toolbox */
+
+#navigator-toolbox:-moz-lwtheme {
+  background-image: var(--lwt-additional-images);
+  background-position: var(--lwt-background-alignment);
+  background-repeat: var(--lwt-background-tiling);
+}
+
 #main-window:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
  min-width: 335px;
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@ -343,28 +343,28 @@ function* browserWindows() {
 }

 function UpdateBackForwardCommands(aWebNavigation) {
-  var backBroadcaster = document.getElementById("Browser:Back");
-  var forwardBroadcaster = document.getElementById("Browser:Forward");
+  var backCommand = document.getElementById("Browser:Back");
+  var forwardCommand = document.getElementById("Browser:Forward");

-  // Avoid setting attributes on broadcasters if the value hasn't changed!
+  // Avoid setting attributes on commands if the value hasn't changed!
  // Remember, guys, setting attributes on elements is expensive!  They
  // get inherited into anonymous content, broadcast to other widgets, etc.!
  // Don't do it if the value hasn't changed! - dwh

-  var backDisabled = backBroadcaster.hasAttribute("disabled");
-  var forwardDisabled = forwardBroadcaster.hasAttribute("disabled");
+  var backDisabled = backCommand.hasAttribute("disabled");
+  var forwardDisabled = forwardCommand.hasAttribute("disabled");
  if (backDisabled == aWebNavigation.canGoBack) {
    if (backDisabled)
-      backBroadcaster.removeAttribute("disabled");
+      backCommand.removeAttribute("disabled");
    else
-      backBroadcaster.setAttribute("disabled", true);
+      backCommand.setAttribute("disabled", true);
  }

  if (forwardDisabled == aWebNavigation.canGoForward) {
    if (forwardDisabled)
-      forwardBroadcaster.removeAttribute("disabled");
+      forwardCommand.removeAttribute("disabled");
    else
-      forwardBroadcaster.setAttribute("disabled", true);
+      forwardCommand.setAttribute("disabled", true);
  }
 }

@ -4524,13 +4524,22 @@ var XULBrowserWindow = {
    delete this.reloadCommand;
    return this.reloadCommand = document.getElementById("Browser:Reload");
  },
-  get isImage() {
-    delete this.isImage;
-    return this.isImage = document.getElementById("isImage");
+  get elementsForTextBasedTypes() {
+    delete this.elementsForTextBasedTypes;
+    return this.elementsForTextBasedTypes = [
+      document.getElementById("pageStyleMenu"),
+      document.getElementById("context-viewpartialsource-selection"),
+      document.getElementById("cmd_find"),
+      document.getElementById("cmd_findAgain"),
+      document.getElementById("cmd_findPrevious"),
+    ];
  },
-  get canViewSource() {
-    delete this.canViewSource;
-    return this.canViewSource = document.getElementById("canViewSource");
+  get elementsForViewSource() {
+    delete this.elementsForViewSource;
+    return this.elementsForViewSource = [
+      document.getElementById("context-viewsource"),
+      document.getElementById("View:PageSource"),
+    ];
  },

  forceInitialBrowserNonRemote(aOpener) {
@ -4684,17 +4693,22 @@ var XULBrowserWindow = {
        this.setDefaultStatus(msg);

        // Disable menu entries for images, enable otherwise
-        if (browser.documentContentType && BrowserUtils.mimeTypeIsTextBased(browser.documentContentType)) {
-          this.isImage.removeAttribute("disabled");
-        } else {
-          canViewSource = false;
-          this.isImage.setAttribute("disabled", "true");
+        let isText = browser.documentContentType &&
+                     BrowserUtils.mimeTypeIsTextBased(browser.documentContentType);
+        for (let element of this.elementsForTextBasedTypes) {
+          if (isText) {
+            element.removeAttribute("disabled");
+          } else {
+            element.setAttribute("disabled", "true");
+          }
        }

-        if (canViewSource) {
-          this.canViewSource.removeAttribute("disabled");
-        } else {
-          this.canViewSource.setAttribute("disabled", "true");
+        for (let element of this.elementsForViewSource) {
+          if (canViewSource && isText) {
+            element.removeAttribute("disabled");
+          } else {
+            element.setAttribute("disabled", "true");
+          }
        }
      }

@ -4733,10 +4747,15 @@ var XULBrowserWindow = {
    let browser = gBrowser.selectedBrowser;

    // Disable menu entries for images, enable otherwise
-    if (browser.documentContentType && BrowserUtils.mimeTypeIsTextBased(browser.documentContentType))
-      this.isImage.removeAttribute("disabled");
-    else
-      this.isImage.setAttribute("disabled", "true");
+    let isText = browser.documentContentType &&
+                 BrowserUtils.mimeTypeIsTextBased(browser.documentContentType);
+    for (let element of this.elementsForTextBasedTypes) {
+      if (isText) {
+        element.removeAttribute("disabled");
+      } else {
+        element.setAttribute("disabled", "true");
+      }
+    }

    this.hideOverLinkImmediately = true;
    this.setOverLink("", null);
@ -6431,7 +6450,7 @@ var BrowserOffline = {
  // BrowserOffline Public Methods
  init() {
    if (!this._uiElement)
-      this._uiElement = document.getElementById("workOfflineMenuitemState");
+      this._uiElement = document.getElementById("cmd_toggleOfflineStatus");

    Services.obs.addObserver(this, "network:offline-status-changed");

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@ -81,7 +81,7 @@ xmlns="http://www.w3.org/1999/xhtml"
  Services.scriptloader.loadSubScript("chrome://browser/content/tabbrowser.js", this);
 </script>

-# All sets except for popupsets (commands, keys, stringbundles and broadcasters)
+# All sets except for popupsets (commands, keys, and stringbundles)
 # *must* go into the browser-sets.inc file so that they can be shared with other
 # top level windows in macWindow.inc.xul.
 #include browser-sets.inc
@ -1121,6 +1121,7 @@ xmlns="http://www.w3.org/1999/xhtml"
                   placespopup="true"
                   context="placesContext"
                   openInTabs="children"
+                   side="top"
                   onmouseup="BookmarksEventHandler.onMouseUp(event);"
                   oncommand="BookmarksEventHandler.onCommand(event);"
                   onclick="BookmarksEventHandler.onClick(event, this.parentNode._placesView);"
--- a/browser/base/content/macWindow.inc.xul
+++ b/browser/base/content/macWindow.inc.xul
@ -17,7 +17,7 @@

 <script type="application/javascript" src="chrome://browser/content/nonbrowser-mac.js"></script>

-# All sets except for popupsets (commands, keys, stringbundles and broadcasters)
+# All sets except for popupsets (commands, keys, and stringbundles)
 # *must* go into the browser-sets.inc file so that they can be shared with
 # browser.xul
 #include browser-sets.inc
--- a/browser/base/content/nsContextMenu.js
+++ b/browser/base/content/nsContextMenu.js
@ -133,7 +133,8 @@ nsContextMenu.prototype = {
      Services.obs.notifyObservers(subject, "on-build-contextmenu");
    }

-    this.isFrameImage = document.getElementById("isFrameImage");
+    this.viewFrameSourceElement =
+         document.getElementById("context-viewframesource");
    this.ellipsis = "\u2026";
    try {
      this.ellipsis = Services.prefs.getComplexValue("intl.ellipsis",
@ -374,9 +375,6 @@ nsContextMenu.prototype = {

    this.showItem("context-reload", stopReloadItem == "reload");
    this.showItem("context-stop", stopReloadItem == "stop");
-
-    // XXX: Stop is determined in browser.js; the canStop broadcaster is broken
-    // this.setItemAttrFromNode( "context-stop", "disabled", "canStop" );
  },

  initLeaveDOMFullScreenItems: function CM_initLeaveFullScreenItem() {
@ -534,9 +532,9 @@ nsContextMenu.prototype = {
    // Hide menu entries for images, show otherwise
    if (this.inFrame) {
      if (BrowserUtils.mimeTypeIsTextBased(this.target.ownerDocument.contentType))
-        this.isFrameImage.removeAttribute("hidden");
+        this.viewFrameSourceElement.removeAttribute("hidden");
      else
-        this.isFrameImage.setAttribute("hidden", "true");
+        this.viewFrameSourceElement.setAttribute("hidden", "true");
    }

    // BiDi UI
@ -1342,16 +1340,6 @@ nsContextMenu.prototype = {
    }
  },

-  // Set context menu attribute according to like attribute of another node
-  // (such as a broadcaster).
-  setItemAttrFromNode(aItem_id, aAttr, aOther_id) {
-    var elem = document.getElementById(aOther_id);
-    if (elem && elem.getAttribute(aAttr) == "true")
-      this.setItemAttr(aItem_id, aAttr, "true");
-    else
-      this.setItemAttr(aItem_id, aAttr, null);
-  },
-
  // Temporary workaround for DOM api not yet implemented by XUL nodes.
  cloneNode(aItem) {
    // Create another element like the one we're cloning.
--- a/browser/base/content/test/general/browser_viewSourceInTabOnViewSource.js
+++ b/browser/base/content/test/general/browser_viewSourceInTabOnViewSource.js
@ -13,7 +13,7 @@ function wait_while_tab_is_busy() {
 }

 // This function waits for the tab to stop being busy instead of waiting for it
-// to load, since the canViewSource change happens at that time.
+// to load, since the elementsForViewSource change happens at that time.
 var with_new_tab_opened = async function(options, taskFn) {
  let busyPromise = wait_while_tab_is_busy();
  let tab = await BrowserTestUtils.openNewForegroundTab(options.gBrowser, options.url, false);
@ -24,8 +24,10 @@ var with_new_tab_opened = async function(options, taskFn) {

 add_task(async function test_regular_page() {
  function test_expect_view_source_enabled(browser) {
-    ok(!XULBrowserWindow.canViewSource.hasAttribute("disabled"),
-       "View Source should be enabled");
+    for (let element of [...XULBrowserWindow.elementsForViewSource]) {
+      ok(!element.hasAttribute("disabled"),
+         "View Source should be enabled");
+    }
  }

  await with_new_tab_opened({
@ -36,8 +38,10 @@ add_task(async function test_regular_page() {

 add_task(async function test_view_source_page() {
  function test_expect_view_source_disabled(browser) {
-    ok(XULBrowserWindow.canViewSource.hasAttribute("disabled"),
-       "View Source should be disabled");
+    for (let element of [...XULBrowserWindow.elementsForViewSource]) {
+      ok(element.hasAttribute("disabled"),
+         "View Source should be disabled");
+    }
  }

  await with_new_tab_opened({
--- a/browser/base/content/webext-panels.xul
+++ b/browser/base/content/webext-panels.xul
@ -26,10 +26,6 @@
  <script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
  <script type="application/javascript" src="chrome://browser/content/utilityOverlay.js"/>

-  <broadcasterset id="mainBroadcasterSet">
-    <broadcaster id="isFrameImage"/>
-  </broadcasterset>
-
  <commandset id="mainCommandset">
    <command id="Browser:Back"
             oncommand="getPanelBrowser().webNavigation.goBack();"
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@ -627,8 +627,7 @@
                       class="subviewbutton"
                       label="&goOfflineCmd.label;"
                       type="checkbox"
-                       observes="workOfflineMenuitemState"
-                       oncommand="BrowserOffline.toggleOfflineStatus();"/>
+                       command="cmd_toggleOfflineStatus"/>
      </vbox>
    </panelview>
    <panelview id="appMenu-libraryView" class="PanelUI-subView">
--- a/browser/components/preferences/in-content/tests/browser.ini
+++ b/browser/components/preferences/in-content/tests/browser.ini
@ -16,6 +16,7 @@ skip-if = !updater
 [browser_bug731866.js]
 [browser_search_no_results_change_category.js]
 [browser_search_within_preferences_1.js]
+skip-if = (os == 'win') # Bug 1480314
 [browser_search_within_preferences_2.js]
 [browser_search_within_preferences_command.js]
 [browser_search_subdialogs_within_preferences_1.js]
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@ -193,12 +193,12 @@ menuitem.bookmark-item {
 }

 #close-button:hover {
-  background-color: hsl(355, 86%, 49%);
+  background-color: #d70022;
  stroke: white;
 }

 #close-button:hover:active {
-  background-color: hsl(355, 82%, 69%);
+  background-color: #ff0039;
 }

 /* Location bar */
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@ -29,14 +29,6 @@
  color: @lwtPopupBrighttextLinkColor@;
 }

-/* Set additional backgrounds alignment relative to toolbox*/
-
-#navigator-toolbox:-moz-lwtheme {
-  background-image: var(--lwt-additional-images);
-  background-position: var(--lwt-background-alignment);
-  background-repeat: var(--lwt-background-tiling);
-}
-
 /* Toolbar / content area border */

 #navigator-toolbox::after {
--- a/devtools/client/accessibility/accessibility-startup.js
+++ b/devtools/client/accessibility/accessibility-startup.js
@ -4,8 +4,12 @@

 "use strict";

+const Services = require("Services");
 const { AccessibilityFront } = require("devtools/shared/fronts/accessibility");

+// @remove after release 63 (See Bug 1482461)
+const PROMOTE_COUNT_PREF = "devtools.promote.accessibility";
+
 /**
 * Component responsible for all accessibility panel startup steps before the panel is
 * actually opened.
@ -129,6 +133,11 @@ class AccessibilityStartup {
    }
  }

+  // @remove after release 63 (See Bug 1482461)
+  updatePanelPromoteCount() {
+    Services.prefs.setIntPref(PROMOTE_COUNT_PREF, 0);
+  }
+
  async destroy() {
    await this.destroyAccessibility();
    this.toolbox = null;
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@ -12,6 +12,17 @@
  --accessibility-horizontal-padding: 5px;
  --accessibility-arrow-horizontal-padding: 4px;
  --accessibility-tree-row-height: 21px;
+  --accessibility-unfocused-tree-focused-node-background: var(--grey-20);
+  --accessibility-tree-focused-node-twisty-brightness: brightness(20%);
+  --accessibility-link-color: var(--blue-60);
+  --accessibility-link-color-active: var(--blue-70);
+}
+
+:root.theme-dark {
+  --accessibility-unfocused-tree-focused-node-background: var(--grey-70);
+  --accessibility-tree-focused-node-twisty-brightness: unset;
+  --accessibility-link-color: var(--theme-highlight-blue);
+  --accessibility-link-color-active: var(--blue-40);
 }

 /* General */
@ -85,6 +96,41 @@ body {
  -moz-outline-radius: 2px;
 }

+.devtools-toolbar {
+  display: flex;
+  align-items: center;
+}
+
+.devtools-toolbar .help {
+  cursor: pointer;
+  width: 18px;
+  margin-inline-start: auto;
+  margin-inline-end: 3px;
+  background: transparent;
+}
+
+.devtools-toolbar .help .btn-content {
+  display: block;
+  padding: 0;
+  background-color: var(--theme-body-color);
+  width: 16px;
+  height: 16px;
+  mask: url("chrome://devtools/skin/images/help.svg") no-repeat;
+}
+
+.devtools-toolbar .help:focus {
+  outline: 2px solid var(--accessibility-toolbar-focus);
+  box-shadow: 0 0 0 3px var(--accessibility-toolbar-focus-alpha30);
+  border-radius: 2px;
+  outline-offset: -1px;
+  -moz-outline-radius: 2px;
+}
+
+.devtools-toolbar .help:focus > .btn-content {
+  outline: none;
+  box-shadow: none;
+}
+
 /* Description */
 .description {
  color: var(--theme-toolbar-color);
@ -95,10 +141,18 @@ body {
  width: 50vw;
 }

+/* To ensure that the message does not look squished in vertical mode, increase its width
+   when the toolbox is narrow */
+@media (max-width: 700px) {
+  .description {
+    width: 80vw;
+  }
+}
+
 .description .general {
  display: flex;
  align-items: center;
-  margin-bottom: 1.7em;
+  margin-bottom: 1em;
 }

 .description img {
@ -115,6 +169,26 @@ body {
  margin: auto;
 }

+.description .link {
+  color: var(--accessibility-link-color);
+  cursor: pointer;
+  outline: 0;
+}
+
+.description .link:hover:not(:focus) {
+  text-decoration: underline;
+}
+
+.description .link:focus:not(:active) {
+  box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus), 0 0 0 4px var(--accessibility-toolbar-focus-alpha30);
+  border-radius: 2px;
+}
+
+.description .link:active {
+  color: var(--accessibility-link-color-active);
+  text-decoration: underline;
+}
+
 /* TreeView Customization */
 .split-box:not(.horz) .main-panel {
  height: calc(100vh - var(--accessibility-toolbar-height));
@ -155,9 +229,21 @@ body {
  border: 0;
 }

-.treeTable:focus > tbody {
-  outline: var(--theme-focus-outline);
-  outline-offset: -1px;
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected {
+  background-color: var(--accessibility-unfocused-tree-focused-node-background);
+}
+
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .theme-twisty {
+  filter: var(--accessibility-tree-focused-node-twisty-brightness);
+}
+
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected *,
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .treeLabelCell:after {
+  color: inherit;
+}
+
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .objectBox-string {
+  color: var(--string-color);
 }

 .treeTable > thead {
@ -260,23 +346,44 @@ body {
  align-items: center;
 }

-.accessible .tree .node.focused {
-  background-color: var(--theme-selection-background);
+.accessible .tree:focus {
+  outline: 0;
 }

-.accessible .tree .tree-node:hover:not(.focused) {
+.accessible .tree::-moz-focus-inner {
+  border: 0;
+}
+
+/* Unset tree styles leaking from reps.css */
+.accessible .tree .tree-node:not(.focused):hover {
+  background-color: transparent;
+}
+
+.accessible .tree:not(:focus) .node.focused {
+  background-color: var(--accessibility-unfocused-tree-focused-node-background);
+}
+
+.accessible .tree:not(:focus) .node.focused .theme-twisty {
+  filter: var(--accessibility-tree-focused-node-twisty-brightness);
+}
+
+.accessible .tree .node:not(.focused):hover {
  background-color: var(--theme-selection-background-hover);
 }

-.accessible .tree .node.focused * {
+.accessible .tree:focus .node.focused {
+  background-color: var(--theme-selection-background);
+}
+
+.accessible .tree:focus .node.focused * {
  color: var(--theme-selection-color);
 }

-.accessible .tree .node.focused .open-inspector {
+.accessible .tree:focus .node.focused .open-inspector {
  background-color: var(--grey-30);
 }

-.accessible .tree .node.focused:hover .open-inspector {
+.accessible .tree:focus .node.focused:hover .open-inspector {
  background-color: var(--theme-selection-color);
 }

--- a/devtools/client/accessibility/components/Description.js
+++ b/devtools/client/accessibility/components/Description.js
@ -12,12 +12,13 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");

 const Button = createFactory(require("./Button"));
+const LearnMoreLink = createFactory(require("./LearnMoreLink"));
 const { enable, updateCanBeEnabled } = require("../actions/ui");

 // Localization
 const { L10N } = require("../utils/l10n");

-const { A11Y_SERVICE_ENABLED_COUNT } = require("../constants");
+const { A11Y_LEARN_MORE_LINK, A11Y_SERVICE_ENABLED_COUNT } = require("../constants");

 class OldVersionDescription extends Component {
  render() {
@ -99,13 +100,23 @@ class Description extends Component {
    }

    return (
-      div({ className: "description" },
-        p({ className: "general" },
+      div({ className: "description", role: "presentation" },
+        div({ className: "general", role: "presentation" },
          img({
            src: "chrome://devtools/skin/images/accessibility.svg",
            alt: L10N.getStr("accessibility.logo")
          }),
-          L10N.getStr("accessibility.description.general")),
+          div({ role: "presentation" },
+            LearnMoreLink({
+              href: A11Y_LEARN_MORE_LINK +
+                    "?utm_source=devtools&utm_medium=a11y-panel-description",
+              learnMoreStringKey: "accessibility.learnMore",
+              l10n: L10N,
+              messageStringKey: "accessibility.description.general.p1"
+            }),
+            p({}, L10N.getStr("accessibility.description.general.p2"))
+          )
+        ),
        Button({
          id: "accessibility-enable-button",
          onClick: this.onEnable,
--- a/devtools/client/accessibility/components/LearnMoreLink.js
+++ b/devtools/client/accessibility/components/LearnMoreLink.js
@ -0,0 +1,60 @@
+/* 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/. */
+
+"use strict";
+
+const { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { p, a } = require("devtools/client/shared/vendor/react-dom-factories");
+
+const { openDocLink } = require("devtools/client/shared/link");
+
+/**
+ * Localization friendly component for rendering a block of text with a "Learn more" link
+ * as a part of it.
+ */
+class LearnMoreLink extends Component {
+  static get propTypes() {
+    return {
+      href: PropTypes.string,
+      learnMoreStringKey: PropTypes.string.isRequired,
+      l10n: PropTypes.object.isRequired,
+      messageStringKey: PropTypes.string.isRequired,
+      onClick: PropTypes.func
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      href: "#",
+      learnMoreStringKey: null,
+      l10n: null,
+      messageStringKey: null,
+      onClick: LearnMoreLink.openDocOnClick
+    };
+  }
+
+  static openDocOnClick(event) {
+    event.preventDefault();
+    openDocLink(event.target.href);
+  }
+
+  render() {
+    const { href, learnMoreStringKey, l10n, messageStringKey, onClick } = this.props;
+    const learnMoreString = l10n.getStr(learnMoreStringKey);
+    const messageString = l10n.getFormatStr(messageStringKey, learnMoreString);
+
+    // Split the paragraph string with the link as a separator, and include the link into
+    // results.
+    const re = new RegExp(`(\\b${learnMoreString}\\b)`);
+    const contents = messageString.split(re);
+    contents[1] = a({ className: "link", href, onClick }, contents[1]);
+
+    return (
+      p({}, ...contents)
+    );
+  }
+}
+
+module.exports = LearnMoreLink;
--- a/devtools/client/accessibility/components/Toolbar.js
+++ b/devtools/client/accessibility/components/Toolbar.js
@ -13,6 +13,9 @@ const Button = createFactory(require("./Button"));
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { disable, updateCanBeDisabled } = require("../actions/ui");

+const { A11Y_LEARN_MORE_LINK } = require("../constants");
+const { openDocLink } = require("devtools/client/shared/link");
+
 class Toolbar extends Component {
  static get propTypes() {
    return {
@ -56,6 +59,11 @@ class Toolbar extends Component {
      .catch(() => this.setState({ disabling: false }));
  }

+  onLearnMoreClick() {
+    openDocLink(A11Y_LEARN_MORE_LINK +
+      "?utm_source=devtools&utm_medium=a11y-panel-toolbar");
+  }
+
  render() {
    const { canBeDisabled } = this.props;
    const { disabling } = this.state;
@ -82,7 +90,12 @@ class Toolbar extends Component {
        disabled: disabling || isDisabled,
        busy: disabling,
        title
-      }, L10N.getStr(disableButtonStr)))
+      }, L10N.getStr(disableButtonStr)),
+      Button({
+        className: "help",
+        title: L10N.getStr("accessibility.learnMore"),
+        onClick: this.onLearnMoreClick
+      }))
    );
  }
 }
--- a/devtools/client/accessibility/components/moz.build
+++ b/devtools/client/accessibility/components/moz.build
@ -8,6 +8,7 @@ DevToolsModules(
    'Accessible.js',
    'Button.js',
    'Description.js',
+    'LearnMoreLink.js',
    'MainFrame.js',
    'RightSidebar.js',
    'Toolbar.js'
--- a/devtools/client/accessibility/constants.js
+++ b/devtools/client/accessibility/constants.js
@ -63,3 +63,7 @@ exports.ACCESSIBLE_EVENTS = [
 // Telemetry name constants.
 exports.A11Y_SERVICE_DURATION = "DEVTOOLS_ACCESSIBILITY_SERVICE_TIME_ACTIVE_SECONDS";
 exports.A11Y_SERVICE_ENABLED_COUNT = "devtools.accessibility.service_enabled_count";
+
+// URL constants
+exports.A11Y_LEARN_MORE_LINK =
+  "https://developer.mozilla.org/docs/Tools/Accessibility_inspector";
--- a/devtools/client/accessibility/panel.js
+++ b/devtools/client/accessibility/panel.js
@ -86,6 +86,8 @@ AccessibilityPanel.prototype = {
      this.picker = new Picker(this);
    }

+    this.startup.updatePanelPromoteCount();
+
    this.updateA11YServiceDurationTimer();
    this.front.on("init", this.updateA11YServiceDurationTimer);
    this.front.on("shutdown", this.updateA11YServiceDurationTimer);
--- a/devtools/client/accessibility/test/mochitest/chrome.ini
+++ b/devtools/client/accessibility/test/mochitest/chrome.ini
@ -2,4 +2,5 @@
 support-files =
  head.js

+[test_accessible_learnMoreLink.html]
 [test_accessible_openLink.html]
--- a/devtools/client/accessibility/test/mochitest/test_accessible_learnMoreLink.html
+++ b/devtools/client/accessibility/test/mochitest/test_accessible_learnMoreLink.html
@ -0,0 +1,95 @@
+<!-- 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/. -->
+<!DOCTYPE HTML>
+<html>
+<!--
+Test that LearnMoreLink parses and renders correctly text with learn more links.
+-->
+<head>
+  <meta charset="utf-8">
+  <title>LearnMoreLink component test</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+</head>
+<body>
+<pre id="test">
+<script src="head.js" type="application/javascript"></script>
+<script type="application/javascript">
+
+"use strict";
+
+window.onload = async function() {
+  try {
+    const { gDevTools } = require("devtools/client/framework/devtools");
+    const Services = browserRequire("Services");
+    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
+    const { Simulate } =
+      browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
+    const LearnMoreLink = createFactory(
+      browserRequire("devtools/client/accessibility/components/LearnMoreLink"));
+
+    class MockL10N {
+      constructor(bundle) {
+        this.bundle = bundle;
+      }
+
+      getStr(name) {
+        return this.bundle[name];
+      }
+
+      getFormatStr(name, ...args) {
+        let index = 0;
+        return this.bundle[name].replace("%S", () => args[index++]);
+      }
+    }
+
+    function testLinkClicked(link, expectedUrl) {
+      const browserWindow = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
+      const defaultOpenWebLinkIn = browserWindow.openWebLinkIn;
+
+      const checker = Symbol();
+      let onClickUrl = checker;
+      browserWindow.openWebLinkIn = url => {
+        onClickUrl = url;
+      };
+
+      Simulate.click(link);
+
+      ok(onClickUrl !== checker, "Link was clicked");
+      is(onClickUrl, expectedUrl, "Correct URL is opened");
+
+      browserWindow.openWebLinkIn = defaultOpenWebLinkIn;
+    }
+
+    const href = "http://example.com/";
+    const l10n = new MockL10N({
+      message: "This is a message that contains a link. %S",
+      link: "Learn more"
+    });
+    const learnMoreLink = LearnMoreLink(
+      { href, l10n, learnMoreStringKey: "link", messageStringKey: "message" });
+    ok(LearnMoreLink, "Should be able to create LearnMoreLink instances");
+
+    ReactDOM.render(learnMoreLink, document.body);
+    const p = document.querySelector("p");
+    is(p.textContent, "This is a message that contains a link. Learn more",
+      "Text content for the whole paragraph is correct");
+
+    const link = p.querySelector(".link");
+    ok(link, "Link was rendered");
+    is(link.textContent, "Learn more", "Text content for link is correct");
+
+    testLinkClicked(link, href);
+  } catch (e) {
+    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+  } finally {
+    SimpleTest.finish();
+  }
+};
+</script>
+</pre>
+</body>
+</html>
--- a/devtools/client/debugger/new/README.mozilla
+++ b/devtools/client/debugger/new/README.mozilla
@ -1,9 +1,9 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html

-Version 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
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@ -816,8 +816,9 @@ html[dir="rtl"] .managed-tree .tree .node > div {
 * 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 {
@ -3149,7 +3150,9 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {

 .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;
@ -3298,6 +3301,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
 .expression-container__close-btn {
  position: absolute;
  offset-inline-end: 0px;
+  inset-inline-end: 0px;
  top: 1px;
 }

@ -3971,7 +3975,9 @@ html[dir="rtl"] .object-node {
  position: absolute;
  top: auto;
  offset-inline-end: 0;
+  inset-inline-end: 0;
  offset-inline-start: auto;
+  inset-inline-start: auto;
  bottom: 0;
 }

--- a/devtools/client/debugger/new/dist/vendors.css
+++ b/devtools/client/debugger/new/dist/vendors.css
@ -292,8 +292,9 @@ html[dir="rtl"] .arrow svg,
 * 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 {
--- a/devtools/client/debugger/new/dist/vendors.js
+++ b/devtools/client/debugger/new/dist/vendors.js
@ -6525,15 +6525,7 @@ class Tree extends Component {
        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,
@ -7148,6 +7140,8 @@ 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);
@ -7166,87 +7160,120 @@ 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);
+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;
  }

-  getHandlers(vertical) {
-    if (vertical) {
+  _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();
+  }, {
+    key: 'wrapIndex',
+    value: function wrapIndex(index) {
+      var count = _react2.default.Children.count(this.props.children);
+      return (index + count) % count;
    }
-  }
-
-  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();
+  }, {
+    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;

-  render() {
-    var _props = this.props;
-    const accessibleId = _props.accessibleId,
+      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>');
-        }
+      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>');
+          }

-        const active = index === activeIndex;
-        const tabRef = this.tabRefs[index];
+          var active = index === activeIndex;
+          var tabRef = _this2.tabRefs[index];

-        return _react2.default.cloneElement(child, {
-          accessibleId: active ? accessibleId : undefined,
-          active,
-          tabRef,
-          onActivate: () => this.props.onActivateTab(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,
@ -7261,7 +7288,7 @@ TabList.defaultProps = {
  activeIndex: 0,
  children: null,
  className: _tabList2.default.container,
-  onActivateTab: () => {},
+  onActivateTab: function onActivateTab() {},
  vertical: false
 };

@ -7286,20 +7313,24 @@ 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',
    {
@ -7307,6 +7338,7 @@ function Tab({
      className: className,
      id: accessibleId,
      onClick: onActivate,
+      onKeyDown: function onKeyDown() {},
      ref: tabRef,
      role: 'tab',
      tabIndex: active ? 0 : undefined
@ -7318,10 +7350,10 @@ function Tab({
 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 = {
@ -7355,13 +7387,13 @@ 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',
    {
@ -7377,7 +7409,7 @@ function TabPanels({
 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
 };
@ -7464,6 +7496,8 @@ 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);
@ -7486,43 +7520,62 @@ 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)();
+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;
  }

-  render() {
-    var _props = this.props;
-    const activeIndex = _props.activeIndex,
+  _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;
+      var 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:
+      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,
@ -7533,7 +7586,7 @@ Tabs.propTypes = {
 Tabs.defaultProps = {
  children: null,
  className: undefined,
-  onActivateTab: () => {}
+  onActivateTab: function onActivateTab() {}
 };

 /***/ }),
@ -7548,11 +7601,11 @@ 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;
 }

 /***/ }),
@ -7916,6 +7969,26 @@ function polyfill(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:
--- a/devtools/client/debugger/new/src/actions/ast.js
+++ b/devtools/client/debugger/new/src/actions/ast.js
@ -12,6 +12,8 @@ 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");
@ -39,6 +41,7 @@ function setSourceMetaData(sourceId) {
    }

    const framework = await (0, _parser.getFramework)(source.id);
+    dispatch((0, _tabs.updateTab)(source.url, framework));
    dispatch({
      type: "SET_SOURCE_METADATA",
      sourceId: source.id,
--- a/devtools/client/debugger/new/src/actions/pause/index.js
+++ b/devtools/client/debugger/new/src/actions/pause/index.js
@ -142,15 +142,6 @@ Object.defineProperty(exports, "pauseOnExceptions", {
  }
 });

-var _selectComponent = require("./selectComponent");
-
-Object.defineProperty(exports, "selectComponent", {
-  enumerable: true,
-  get: function () {
-    return _selectComponent.selectComponent;
-  }
-});
-
 var _selectFrame = require("./selectFrame");

 Object.defineProperty(exports, "selectFrame", {
--- a/devtools/client/debugger/new/src/actions/pause/moz.build
+++ b/devtools/client/debugger/new/src/actions/pause/moz.build
@ -19,7 +19,6 @@ DevToolsModules(
    '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
@ -154,7 +154,7 @@ function selectLocation(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);
--- a/devtools/client/debugger/new/src/actions/tabs.js
+++ b/devtools/client/debugger/new/src/actions/tabs.js
@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
  value: true
 });
+exports.updateTab = updateTab;
 exports.addTab = addTab;
 exports.moveTab = moveTab;
 exports.closeTab = closeTab;
@ -22,11 +23,19 @@ var _selectors = require("../selectors/index");
 * 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
  };
 }

--- a/devtools/client/debugger/new/src/components/shared/SourceIcon.js
+++ b/devtools/client/debugger/new/src/components/shared/SourceIcon.js
@ -12,6 +12,8 @@ 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 }; }
@ -24,9 +26,10 @@ class SourceIcon extends _react.PureComponent {
    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;
@ -41,6 +44,7 @@ class SourceIcon extends _react.PureComponent {

 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);
--- a/devtools/client/debugger/new/src/reducers/pause.js
+++ b/devtools/client/debugger/new/src/reducers/pause.js
@ -26,7 +26,6 @@ exports.getFrameScope = getFrameScope;
 exports.getSelectedScope = getSelectedScope;
 exports.getSelectedScopeMappings = getSelectedScopeMappings;
 exports.getSelectedFrameId = getSelectedFrameId;
-exports.getSelectedComponentIndex = getSelectedComponentIndex;
 exports.getTopFrame = getTopFrame;
 exports.getDebuggeeUrl = getDebuggeeUrl;
 exports.getSkipPausing = getSkipPausing;
@ -50,19 +49,9 @@ var _sources = require("./sources");
 * 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,
@ -185,11 +174,6 @@ function update(state = createPauseState(), action) {
        selectedFrameId: action.frame.id
      };

-    case "SELECT_COMPONENT":
-      return { ...state,
-        selectedComponentIndex: action.componentIndex
-      };
-
    case "SET_POPUP_OBJECT_PROPERTIES":
      if (!action.properties) {
        return { ...state
@ -448,10 +432,6 @@ 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];
--- a/devtools/client/debugger/new/src/reducers/sources.js
+++ b/devtools/client/debugger/new/src/reducers/sources.js
@ -73,18 +73,18 @@ function update(state = initialSourcesState(), action) {
    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":
@ -133,10 +133,10 @@ function update(state = initialSourcesState(), action) {
          isBlackBoxed
        } = action.value;
        updateBlackBoxList(url, isBlackBoxed);
-        return updateSource(state, {
+        return updateSources(state, [{
          id,
          isBlackBoxed
-        });
+        }]);
      }

      break;
@ -179,8 +179,8 @@ function getTextPropsFromAction(action) {
  }

  return {
-    text: action.value.text,
    id: sourceId,
+    text: action.value.text,
    contentType: action.value.contentType,
    loadedState: "loaded"
  };
@ -191,8 +191,20 @@ function getTextPropsFromAction(action) {


 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) {
@ -204,18 +216,11 @@ function updateSource(state, source) {
  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) {
--- a/devtools/client/debugger/new/src/reducers/tabs.js
+++ b/devtools/client/debugger/new/src/reducers/tabs.js
@ -31,10 +31,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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":
@ -47,7 +48,7 @@ function update(state = _prefs.prefs.tabs || [], action) {
 }

 function removeSourceFromTabList(tabs, url) {
-  return tabs.filter(tab => tab !== url);
+  return tabs.filter(tab => tab.url !== url);
 }

 function removeSourcesFromTabList(tabs, urls) {
@ -60,18 +61,34 @@ function removeSourcesFromTabList(tabs, urls) {
 */


-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
@ -96,7 +113,9 @@ function getNewSelectedSourceId(state, availableTabs) {
    return "";
  }

-  if (availableTabs.includes(selectedTab.url)) {
+  const matchingTab = availableTabs.find(tab => tab.url == selectedTab.url);
+
+  if (matchingTab) {
    const sources = state.sources.sources;

    if (!sources) {
@ -112,15 +131,18 @@ function getNewSelectedSourceId(state, availableTabs) {
    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 (tabSource) {
-    return tabSource.id;
+  if (availableTab) {
+    const tabSource = (0, _sources.getSourceByUrlInSources)((0, _sources.getSources)(state), (0, _sources.getUrls)(state), availableTab.url);
+
+    if (tabSource) {
+      return tabSource.id;
+    }
  }

  return "";
@ -136,8 +158,8 @@ function getNewSelectedSourceId(state, availableTabs) {

 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;
--- a/devtools/client/debugger/new/src/selectors/visibleBreakpoints.js
+++ b/devtools/client/debugger/new/src/selectors/visibleBreakpoints.js
@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
  value: true
 });
-exports.getVisibleBreakpoints = getVisibleBreakpoints;
+exports.getVisibleBreakpoints = undefined;

 var _breakpoints = require("../reducers/breakpoints");

@ -11,6 +11,8 @@ 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/>. */
@ -18,7 +20,20 @@ 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,
@ -34,7 +49,7 @@ function formatBreakpoint(breakpoint, selectedSource) {
    disabled,
    hidden
  };
-}
+});

 function isVisible(breakpoint, selectedSource) {
  const sourceId = selectedSource.id;
@ -47,12 +62,10 @@ function isVisible(breakpoint, selectedSource) {
  */


-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));
-}
+  return breakpoints.filter(bp => isVisible(bp, selectedSource)).map(bp => formatBreakpoint(bp, selectedSource));
+});
--- a/devtools/client/debugger/new/src/utils/pause/mapScopes/index.js
+++ b/devtools/client/debugger/new/src/utils/pause/mapScopes/index.js
@ -341,7 +341,7 @@ async function findGeneratedBinding(sourceMaps, client, source, name, originalBi
      },
      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
--- a/devtools/client/debugger/new/src/utils/tabs.js
+++ b/devtools/client/debugger/new/src/utils/tabs.js
@ -4,6 +4,7 @@ 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
@ -40,6 +41,16 @@ function getHiddenTabs(sourceTabs, sourceTabEls) {
  });
 }

+function getFramework(tabs, url) {
+  const tab = tabs.find(t => t.url === url);
+
+  if (tab) {
+    return tab.framework;
+  }
+
+  return "";
+}
+
 function getTabMenuItems() {
  return {
    closeTab: {
--- a/devtools/client/debugger/new/test/mochitest/browser.ini
+++ b/devtools/client/debugger/new/test/mochitest/browser.ini
@ -11,6 +11,8 @@ support-files =
  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
@ -123,6 +125,8 @@ support-files =
  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
@ -179,6 +183,8 @@ support-files =
  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
@ -289,6 +295,8 @@ support-files =
  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
@ -345,6 +353,8 @@ support-files =
  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
@ -447,6 +457,8 @@ support-files =
  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
@ -495,6 +507,8 @@ support-files =
  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
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-console-async.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-console-async.js
@ -38,7 +38,7 @@ async function hasMessage(dbg, msg) {

 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");

--- 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
@ -78,4 +78,9 @@ add_task(async function() {
    { 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
@ -30,8 +30,8 @@ add_task(async function() {

  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");
--- a/devtools/client/debugger/new/test/mochitest/examples/doc-sourcemapped.html
+++ b/devtools/client/debugger/new/test/mochitest/examples/doc-sourcemapped.html
@ -16,6 +16,8 @@
    <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>
@ -130,6 +132,8 @@
    <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>
@ -187,6 +191,8 @@
    <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>
@ -299,6 +305,8 @@
    <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>
@ -356,6 +364,8 @@
    <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>
@ -460,6 +470,8 @@
    <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>
@ -509,6 +521,8 @@
    <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>
--- 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
@ -43,7 +43,10 @@ module.exports = exports = async function(tests, dirname) {
              ? [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) {
--- 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
@ -38,6 +38,9 @@ module.exports = exports = async function(tests, dirname) {
        },
        rollupBabel({
          babelrc: false,
+          plugins: [
+            require.resolve("@babel/plugin-proposal-class-properties")
+          ],
          presets: [
            require.resolve("@babel/preset-flow"),
            babelEnv
--- 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
@ -5,6 +5,7 @@
    "@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
@ -8,6 +8,12 @@
  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"
@ -37,6 +43,16 @@
    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"
@ -81,12 +97,26 @@
    "@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"
@ -99,6 +129,12 @@
  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"
@ -130,10 +166,20 @@
  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"
@ -159,6 +205,15 @@
    "@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"
@ -173,6 +228,12 @@
  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"
@ -198,10 +259,22 @@
    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"
@ -210,6 +283,17 @@
    "@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"
@ -238,6 +322,12 @@
  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"
@ -512,6 +602,15 @@
    "@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"
@ -526,6 +625,20 @@
    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"
@ -542,6 +655,14 @@
    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"
@ -792,7 +913,7 @@ 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"

--- 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
@ -55,7 +55,8 @@ module.exports = exports = async function(tests, dirname) {
                  : 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")
              ]
            }
          }
--- 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
@ -46,6 +46,9 @@ module.exports = exports = async function(tests, dirname) {
            loader: require.resolve("babel-loader"),
            options: {
              babelrc: false,
+              plugins: [
+                require.resolve("@babel/plugin-proposal-class-properties")
+              ],
              presets: [
                require.resolve("@babel/preset-flow"),
                babelEnv
--- 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
@ -5,6 +5,7 @@
    "@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
@ -8,6 +8,12 @@
  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"
@ -37,6 +43,16 @@
    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"
@ -81,12 +97,26 @@
    "@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"
@ -99,6 +129,12 @@
  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"
@ -123,10 +159,20 @@
  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"
@ -152,6 +198,15 @@
    "@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"
@ -166,6 +221,12 @@
  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"
@ -191,10 +252,22 @@
    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"
@ -203,6 +276,17 @@
    "@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"
@ -231,6 +315,12 @@
  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"
@ -505,6 +595,15 @@
    "@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"
@ -519,6 +618,20 @@
    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"
@ -527,6 +640,14 @@
    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"
--- 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
@ -56,7 +56,8 @@ module.exports = exports = async function(tests, dirname) {
                  : 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")
              ]
            }
          }
--- 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
@ -47,6 +47,9 @@ module.exports = exports = async function(tests, dirname) {
            loader: require.resolve("babel-loader"),
            options: {
              babelrc: false,
+              plugins: [
+                require.resolve("@babel/plugin-proposal-class-properties")
+              ],
              presets: [
                require.resolve("@babel/preset-flow"),
                babelEnv
--- 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
@ -6,6 +6,7 @@
    "@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
@ -8,6 +8,12 @@
  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"
@ -37,6 +43,16 @@
    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"
@ -81,12 +97,26 @@
    "@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"
@ -99,6 +129,12 @@
  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"
@ -123,10 +159,20 @@
  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"
@ -152,6 +198,15 @@
    "@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"
@ -166,6 +221,12 @@
  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"
@ -191,10 +252,22 @@
    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"
@ -203,6 +276,17 @@
    "@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"
@ -231,6 +315,12 @@
  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"
@ -505,6 +595,15 @@
    "@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"
@ -519,6 +618,20 @@
    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"
@ -527,6 +640,14 @@
    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"
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-classes/input.js
+++ 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();
+}
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/babel-classes.js
+++ 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;
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/babel-classes.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/parcel/babel-classes.map
@ -0,0 +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"]}
--- 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
@ -121,10 +121,13 @@ exports["default"] = def;
 // 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);
--- 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 @@
-{"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"]}
+{"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"]}
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel6/babel-classes.js
+++ 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
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel6/babel-classes.js.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel6/babel-classes.js.map
@ -0,0 +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;;;;;;;;"}
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel7/babel-classes.js
+++ 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
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel7/babel-classes.js.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup-babel7/babel-classes.js.map
@ -0,0 +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;;;;;;;;"}
--- 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,94 +1,94 @@
 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;
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel6/babel-classes.js
+++ 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
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel6/babel-classes.js.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel6/babel-classes.js.map
@ -0,0 +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":""}
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel7/babel-classes.js
+++ 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
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel7/babel-classes.js.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack3-babel7/babel-classes.js.map
@ -0,0 +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":""}
--- 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
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel6/babel-classes.js
+++ 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
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel6/babel-classes.js.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel6/babel-classes.js.map
@ -0,0 +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":""}
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel7/babel-classes.js
+++ 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
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel7/babel-classes.js.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/webpack4-babel7/babel-classes.js.map
@ -0,0 +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":""}
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/polyfill-bundle.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/polyfill-bundle.js
@ -2754,27 +2754,27 @@ 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;


 /***/ }),
--- a/devtools/client/debugger/new/test/mochitest/helpers.js
+++ b/devtools/client/debugger/new/test/mochitest/helpers.js
@ -373,10 +373,11 @@ function assertHighlightLocation(dbg, source, line) {
  );

  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"
  );
 }
@ -609,9 +610,9 @@ async function selectSpecificSource(dbg, url, line) {
 }


-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);
 }

 /**
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@ -465,6 +465,15 @@ Tools.accessibility = {

  buildToolStartup(toolbox) {
    return new AccessibilityStartup(toolbox);
+  },
+
+  // @remove after release 63 (See Bug 1482461)
+  get badge() {
+    if (Services.prefs.getIntPref("devtools.promote.accessibility") > 0) {
+      return l10n("toolbox.tab.newBadge");
+    }
+
+    return null;
  }
 };

--- a/devtools/client/framework/components/ToolboxTab.js
+++ b/devtools/client/framework/components/ToolboxTab.js
@ -41,7 +41,7 @@ class ToolboxTab extends Component {
  render() {
    const {panelDefinition, currentToolId, highlightedTools, selectTool,
           focusedButton, focusButton} = this.props;
-    const {id, extensionId, tooltip, label, iconOnly} = panelDefinition;
+    const {id, extensionId, tooltip, label, iconOnly, badge} = panelDefinition;
    const isHighlighted = id === currentToolId;

    const className = [
@ -81,7 +81,15 @@ class ToolboxTab extends Component {
          {
            className: "devtools-tab-label"
          },
-          label
+          label,
+          badge && !isHighlighted ?
+            span(
+              {
+                className: "devtools-tab-badge"
+              },
+              badge
+            ) :
+            null
        )
    );
  }
--- a/devtools/client/locales/en-US/accessibility.properties
+++ b/devtools/client/locales/en-US/accessibility.properties
@ -77,11 +77,26 @@ accessibility.enable.disabledTitle=Accessibility service can not be turned on. I
 # enabled.
 accessibility.enable.enabledTitle=Accessibility service will be turned on for all tabs and windows.

+# LOCALIZATION NOTE (accessibility.learnMore): A text that is used as is or as textual
+# description in places that link to accessibility inspector documentation.
+accessibility.learnMore=Learn more
+
 # LOCALIZATION NOTE (accessibility.description.general): A title text used when
 # accessibility service description is provided before accessibility inspector
 # is enabled.
 accessibility.description.general=Accessibility features are deactivated by default because they negatively impact performance. Consider turning off accessibility features before using other Developer Tools panels.

+# LOCALIZATION NOTE (accessibility.description.general.p1): A title text for the first
+# paragraph, used when accessibility service description is provided before accessibility
+# inspector is enabled. %S in the content will be replaced by a link at run time
+# with the accessibility.learnMore string.
+accessibility.description.general.p1=Accessibility Inspector lets you examine the current page’s accessibility tree, which is used by screen readers and other assistive technologies. %S
+
+# LOCALIZATION NOTE (accessibility.description.general.p2): A title text for the second
+# paragraph, used when accessibility service description is provided before accessibility
+# inspector is enabled.
+accessibility.description.general.p2=Accessibility features may affect the performance of other developer tools panels and should be turned off when not in use.
+
 # LOCALIZATION NOTE (accessibility.description.oldVersion): A title text used
 # when accessibility service description is provided when a client is connected
 # to an older version of accessibility actor.
--- a/devtools/client/locales/en-US/startup.properties
+++ b/devtools/client/locales/en-US/startup.properties
@ -312,3 +312,8 @@ toolbox.buttons.rulers = Toggle rulers for the page
 # This is the tooltip of the button in the toolbox toolbar that toggles the
 # measuring tools
 toolbox.buttons.measure = Measure a portion of the page
+
+# LOCALIZATION NOTE (toolbox.tab.newBadge):
+# This is the text of a promotion badge showed in the toobox tab bar, next to a tab panel
+# name. Used to promote new/recent panels such as the accessibility panel.
+toolbox.tab.newBadge=New
--- a/devtools/client/netmonitor/src/components/MonitorPanel.js
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@ -149,7 +149,7 @@ class MonitorPanel extends Component {
          initialHeight: initialHeight,
          minSize: "50px",
          maxSize: "80%",
-          splitterSize: 1,
+          splitterSize: networkDetailsOpen ? 1 : 0,
          startPanel: RequestList({ isEmpty, connector }),
          endPanel: networkDetailsOpen && NetworkDetailsPanel({
            ref: "endPanel",
--- a/devtools/client/preferences/devtools-client.js
+++ b/devtools/client/preferences/devtools-client.js
@ -229,6 +229,9 @@ pref("devtools.dom.enabled", false);

 // Make sure the Accessibility panel is hidden by default
 pref("devtools.accessibility.enabled", false);
+// Counter to promote the Accessibility panel.
+// @remove after release 63 (See Bug 1482461)
+pref("devtools.promote.accessibility", 1);

 // Web Audio Editor Inspector Width should be a preference
 pref("devtools.webaudioeditor.inspectorWidth", 300);
--- a/devtools/client/shared/components/reps/reps.css
+++ b/devtools/client/shared/components/reps/reps.css
@ -2,8 +2,9 @@
 * 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 {
--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@ -4465,15 +4465,7 @@ class Tree extends Component {
        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,
--- a/devtools/client/shared/components/splitter/SplitBox.css
+++ b/devtools/client/shared/components/splitter/SplitBox.css
@ -1,88 +1,94 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* 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/. */
-
-.split-box {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.split-box.vert {
-  flex-direction: row;
-}
-
-.split-box.horz {
-  flex-direction: column;
-}
-
-.split-box > .uncontrolled {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  overflow: auto;
-}
-
-.split-box > .controlled {
-  display: flex;
-  overflow: auto;
-}
-
-.split-box > .splitter {
-  background-image: none;
-  border: 0;
-  border-style: solid;
-  border-color: transparent;
-  background-color: var(--theme-splitter-color);
-  background-clip: content-box;
-  position: relative;
-
-  box-sizing: border-box;
-
-  /* Positive z-index positions the splitter on top of its siblings and makes
-     it clickable on both sides. */
-  z-index: 1;
-}
-
-.split-box.vert > .splitter {
-  min-width: calc(var(--devtools-splitter-inline-start-width) +
-    var(--devtools-splitter-inline-end-width) + 1px);
-
-  border-inline-start-width: var(--devtools-splitter-inline-start-width);
-  border-inline-end-width: var(--devtools-splitter-inline-end-width);
-
-  margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
-  margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width));
-
-  cursor: ew-resize;
-}
-
-.split-box.horz > .splitter {
-  min-height: calc(var(--devtools-splitter-top-width) +
-    var(--devtools-splitter-bottom-width) + 1px);
-
-  border-top-width: var(--devtools-splitter-top-width);
-  border-bottom-width: var(--devtools-splitter-bottom-width);
-
-  margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
-  margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
-
-  cursor: ns-resize;
-}
-
-.split-box.disabled {
-  pointer-events: none;
-}
-
-/**
- * Make sure splitter panels are not processing any mouse
- * events. This is good for performance during splitter
- * bar dragging.
- */
-.split-box.dragging > .controlled,
-.split-box.dragging > .uncontrolled {
-  pointer-events: none;
-}
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+.split-box {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.split-box.vert {
+  flex-direction: row;
+}
+
+.split-box.horz {
+  flex-direction: column;
+}
+
+.split-box > .uncontrolled {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+
+.split-box > .controlled {
+  display: flex;
+  overflow: auto;
+}
+
+.split-box > .splitter {
+  background-image: none;
+  border: 0;
+  border-style: solid;
+  border-color: transparent;
+  background-color: var(--theme-splitter-color);
+  background-clip: content-box;
+  position: relative;
+
+  box-sizing: border-box;
+
+  /* Positive z-index positions the splitter on top of its siblings and makes
+     it clickable on both sides. */
+  z-index: 1;
+}
+
+.split-box.vert > .splitter {
+  min-width: var(--devtools-vertical-splitter-min-width);
+
+  border-inline-start-width: var(--devtools-splitter-inline-start-width);
+  border-inline-end-width: var(--devtools-splitter-inline-end-width);
+
+  margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
+  margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width));
+
+  cursor: ew-resize;
+}
+
+.split-box.horz > .splitter {
+  /* Emphasize the horizontal splitter width and color */
+  min-height: var(--devtools-emphasized-horizontal-splitter-min-height);
+
+  background-color: var(--theme-emphasized-splitter-color);
+
+  border-top-width: var(--devtools-splitter-top-width);
+  border-bottom-width: var(--devtools-splitter-bottom-width);
+
+  margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
+  margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
+
+  cursor: ns-resize;
+}
+
+/* Emphasized splitter has the hover style. */
+.split-box.horz > .splitter:hover {
+  background-color: var(--theme-emphasized-splitter-color-hover);
+}
+
+.split-box.disabled {
+  pointer-events: none;
+}
+
+/**
+ * Make sure splitter panels are not processing any mouse
+ * events. This is good for performance during splitter
+ * bar dragging.
+ */
+.split-box.dragging > .controlled,
+.split-box.dragging > .uncontrolled {
+  pointer-events: none;
+}
--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@ -8,16 +8,30 @@
 /* Splitters */

 :root {
+  /* Draggable splitter element size */
+  --devtools-splitter-element-size: 1px;
+  --devtools-emphasized-splitter-element-size: 2px;
+
  /* Define the widths of the draggable areas on each side of a splitter. top
     and bottom widths are used for horizontal splitters, inline-start and
     inline-end for side splitters.*/

  --devtools-splitter-top-width: 2px;
  --devtools-splitter-bottom-width: 2px;
+  --devtools-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
+                                                  var(--devtools-splitter-bottom-width) +
+                                                  var(--devtools-splitter-element-size));
+  --devtools-emphasized-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
+                                                             var(--devtools-splitter-bottom-width) +
+                                                             var(--devtools-emphasized-splitter-element-size));

  /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
  --devtools-splitter-inline-start-width: 1px;
  --devtools-splitter-inline-end-width: 4px;
+
+  --devtools-vertical-splitter-min-width: calc(var(--devtools-splitter-inline-start-width) +
+                                               var(--devtools-splitter-inline-end-width) +
+                                               var(--devtools-splitter-element-size));
 }

 #appcontent[devtoolstheme="light"] {
@ -48,8 +62,7 @@ splitter.devtools-horizontal-splitter,
 }

 splitter.devtools-horizontal-splitter {
-  min-height: calc(var(--devtools-splitter-top-width) +
-    var(--devtools-splitter-bottom-width) + 1px);
+  min-height: var(--devtools-horizontal-splitter-min-height);

  border-top-width: var(--devtools-splitter-top-width);
  border-bottom-width: var(--devtools-splitter-bottom-width);
@ -60,9 +73,20 @@ splitter.devtools-horizontal-splitter {
  cursor: ns-resize;
 }

+#toolbox-deck ~ splitter.devtools-horizontal-splitter {
+  min-height: var(--devtools-emphasized-horizontal-splitter-min-height);
+}
+
+/**
+ * Emphasized splitter has the hover style.
+ * This emphasized splitter affect splitter console only.
+ */
+#toolbox-deck ~ splitter.devtools-horizontal-splitter:hover {
+  background-color: var(--theme-emphasized-splitter-color-hover);
+}
+
 .devtools-side-splitter {
-  min-width: calc(var(--devtools-splitter-inline-start-width) +
-    var(--devtools-splitter-inline-end-width) + 1px);
+  min-width: var(--devtools-vertical-splitter-min-width);

  border-inline-start-width: var(--devtools-splitter-inline-start-width);
  border-inline-end-width: var(--devtools-splitter-inline-end-width);
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@ -119,6 +119,13 @@
  mask-image: linear-gradient(to right, transparent 0, black 6px);
 }

+.devtools-tab .devtools-tab-badge {
+  color: var(--theme-highlight-blue);
+  font-size: 80%;
+  font-weight: 500;
+  margin-inline-start: 5px;
+}
+
 .devtools-tab-icon-only {
  min-width: 24px;
 }
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@ -41,6 +41,8 @@

  /* Border color that splits the toolbars/panels/headers. */
  --theme-splitter-color: #e0e0e1;
+  --theme-emphasized-splitter-color: var(--grey-30);
+  --theme-emphasized-splitter-color-hover: var(--grey-40);

  --theme-comment: var(--grey-50);
  --theme-comment-alt: #ccd1d5;
@ -146,6 +148,8 @@

  /* Border color that splits the toolbars/panels/headers. */
  --theme-splitter-color: #3c3c3d;
+  --theme-emphasized-splitter-color: var(--grey-60);
+  --theme-emphasized-splitter-color-hover: var(--grey-50);

  --theme-comment: #939393;
  --theme-comment-alt: #939393;
--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_split.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_split.js
@ -88,6 +88,8 @@ async function performTests() {
    const deckHeight = deck.getBoundingClientRect().height;
    const webconsoleHeight = webconsolePanel.getBoundingClientRect().height;
    const splitterVisibility = !splitter.getAttribute("hidden");
+    // Splitter height will be 1px since the margin is negative.
+    const splitterHeight = splitterVisibility ? 1 : 0;
    const openedConsolePanel = toolbox.currentToolId === "webconsole";
    const menuLabel = await getMenuLabel(toolbox);

@ -96,6 +98,7 @@ async function performTests() {
      containerHeight: containerHeight,
      webconsoleHeight: webconsoleHeight,
      splitterVisibility: splitterVisibility,
+      splitterHeight: splitterHeight,
      openedConsolePanel: openedConsolePanel,
      menuLabel,
    };
@ -218,7 +221,9 @@ async function performTests() {
       "Deck has a height > 0 when console is split");
    ok(currentUIState.webconsoleHeight > 0,
       "Web console has a height > 0 when console is split");
-    is(Math.round(currentUIState.deckHeight + currentUIState.webconsoleHeight),
+    is(Math.round(currentUIState.deckHeight +
+                  currentUIState.webconsoleHeight +
+                  currentUIState.splitterHeight),
       currentUIState.containerHeight,
       "Everything adds up to container height");
    ok(!currentUIState.openedConsolePanel,
--- a/docshell/base/nsDocShell.cpp
+++ b/docshell/base/nsDocShell.cpp
@ -4282,7 +4282,7 @@ nsDocShell::DisplayLoadError(nsresult aError, nsIURI* aURI,
                             bool* aDisplayedErrorPage)
 {
  *aDisplayedErrorPage = false;
-  // Get prompt and string bundle servcies
+  // Get prompt and string bundle services
  nsCOMPtr<nsIPrompt> prompter;
  nsCOMPtr<nsIStringBundle> stringBundle;
  GetPromptAndStringBundle(getter_AddRefs(prompter),
@ -4303,20 +4303,24 @@ nsDocShell::DisplayLoadError(nsresult aError, nsIURI* aURI,
  nsAutoCString cssClass;
  nsAutoCString errorPage;

-  errorPage.AssignLiteral("neterror");
-
  if (mLoadURIDelegate) {
-    bool loadErrorHandled = false;
+    nsCOMPtr<nsIURI> errorPageURI;
    rv = mLoadURIDelegate->HandleLoadError(aURI, aError,
                                           NS_ERROR_GET_MODULE(aError),
-                                           &loadErrorHandled);
-    if (NS_SUCCEEDED(rv) && loadErrorHandled) {
-      // The request has been handled, nothing to do here.
+                                           getter_AddRefs(errorPageURI));
+    if (NS_FAILED(rv)) {
      *aDisplayedErrorPage = false;
      return NS_OK;
    }
+
+    if (errorPageURI) {
+      *aDisplayedErrorPage = NS_SUCCEEDED(LoadErrorPage(errorPageURI, aURI, aFailedChannel));
+      return NS_OK;
+    }
  }

+  errorPage.AssignLiteral("neterror");
+
  // Turn the error code into a human readable error message.
  if (NS_ERROR_UNKNOWN_PROTOCOL == aError) {
    NS_ENSURE_ARG_POINTER(aURI);
@ -4757,16 +4761,6 @@ nsDocShell::LoadErrorPage(nsIURI* aURI, const char16_t* aURL,
            chanName.get()));
  }
 #endif
-  mFailedChannel = aFailedChannel;
-  mFailedURI = aURI;
-  mFailedLoadType = mLoadType;
-
-  if (mLSHE) {
-    // Abandon mLSHE's BFCache entry and create a new one.  This way, if
-    // we go back or forward to another SHEntry with the same doc
-    // identifier, the error page won't persist.
-    mLSHE->AbandonBFCacheEntry();
-  }

  nsAutoCString url;
  if (aURI) {
@ -4833,7 +4827,24 @@ nsDocShell::LoadErrorPage(nsIURI* aURI, const char16_t* aURL,
  nsresult rv = NS_NewURI(getter_AddRefs(errorPageURI), errorPageUrl);
  NS_ENSURE_SUCCESS(rv, rv);

-  return InternalLoad(errorPageURI, nullptr, Nothing(), false, false, nullptr, RP_Unset,
+  return LoadErrorPage(errorPageURI, aURI, aFailedChannel);
+}
+
+nsresult
+nsDocShell::LoadErrorPage(nsIURI* aErrorURI, nsIURI* aFailedURI, nsIChannel* aFailedChannel)
+{
+  mFailedChannel = aFailedChannel;
+  mFailedURI = aFailedURI;
+  mFailedLoadType = mLoadType;
+
+  if (mLSHE) {
+    // Abandon mLSHE's BFCache entry and create a new one.  This way, if
+    // we go back or forward to another SHEntry with the same doc
+    // identifier, the error page won't persist.
+    mLSHE->AbandonBFCacheEntry();
+  }
+
+  return InternalLoad(aErrorURI, nullptr, Nothing(), false, false, nullptr, RP_Unset,
                      nsContentUtils::GetSystemPrincipal(), nullptr,
                      INTERNAL_LOAD_FLAGS_NONE, EmptyString(),
                      nullptr, VoidString(), nullptr, nullptr,
@ -9526,7 +9537,7 @@ nsDocShell::InternalLoad(nsIURI* aURI,
  const bool checkLoadDelegates = !(aFlags & INTERNAL_LOAD_FLAGS_DELEGATES_CHECKED);
  aFlags = aFlags & ~INTERNAL_LOAD_FLAGS_DELEGATES_CHECKED;

-  if (aURI && mLoadURIDelegate && checkLoadDelegates &&
+  if (aURI && mLoadURIDelegate && checkLoadDelegates && aLoadType != LOAD_ERROR_PAGE &&
      (!targetDocShell || targetDocShell == static_cast<nsIDocShell*>(this))) {
    // Dispatch only load requests for the current or a new window to the
    // delegate, e.g., to allow for GeckoView apps to handle the load event
--- a/docshell/base/nsDocShell.h
+++ b/docshell/base/nsDocShell.h
@ -590,12 +590,18 @@ private: // member functions
                       nsresult aResult);


+  // Builds an error page URI (e.g. about:neterror?etc) for the given aURI
+  // and displays it via the LoadErrorPage() overload below.
  nsresult LoadErrorPage(nsIURI* aURI, const char16_t* aURL,
-                           const char* aErrorPage,
-                           const char* aErrorType,
-                           const char16_t* aDescription,
-                           const char* aCSSClass,
-                           nsIChannel* aFailedChannel);
+                         const char* aErrorPage,
+                         const char* aErrorType,
+                         const char16_t* aDescription,
+                         const char* aCSSClass,
+                         nsIChannel* aFailedChannel);
+
+  // This method directly loads aErrorURI as an error page. aFailedURI and aFailedChannel
+  // come from DisplayLoadError() or the LoadErrorPage() overload above.
+  nsresult LoadErrorPage(nsIURI* aErrorURI, nsIURI* aFailedURI, nsIChannel* aFailedChannel);

  bool DisplayLoadError(nsresult aError, nsIURI* aURI, const char16_t* aURL,
                        nsIChannel* aFailedChannel)
--- a/dom/events/test/file_bug1484371.html
+++ b/dom/events/test/file_bug1484371.html
@ -0,0 +1,94 @@
+<html>
+  <head>
+    <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
+    <script>
+      var mouseEnterCount = 0;
+      function mouseEnter() {
+        ++mouseEnterCount;
+      }
+      var mouseLeaveCount = 0;
+      function mouseLeave() {
+        ++mouseLeaveCount;
+      }
+
+      var pointerEnterCount = 0;
+      function pointerEnter() {
+        ++pointerEnterCount;
+      }
+      var pointerLeaveCount = 0;
+      function pointerLeave() {
+        ++pointerLeaveCount;
+      }
+
+      function pointerEventsEnabled() {
+        return "onpointerenter" in document.body;
+      }
+
+      function checkEventCounts(expected, msg) {
+        parent.is(mouseEnterCount, expected.mouseEnterCount, msg + ": mouseenter event count");
+        parent.is(mouseLeaveCount, expected.mouseLeaveCount, msg + ": mouseleave event count");
+        if (pointerEventsEnabled()) {
+          parent.is(pointerEnterCount, expected.pointerEnterCount, msg + ": pointerenter event count");
+          parent.is(pointerLeaveCount, expected.pointerLeaveCount, msg + ": pointerleave event count");
+        }
+      }
+
+      function test() {
+        var lightDiv = document.getElementById("lightDiv");
+        var host = document.getElementById("host");
+        var sr = host.attachShadow({mode: "closed"});
+        sr.innerHTML = "<div>shadow DOM<div>";
+        var shadowDiv = sr.firstChild;
+
+        host.addEventListener("mouseenter", mouseEnter, true);
+        host.addEventListener("mouseleave", mouseLeave, true);
+        host.addEventListener("pointerenter", pointerEnter, true);
+        host.addEventListener("pointerleave", pointerLeave, true);
+
+        shadowDiv.addEventListener("mouseenter", mouseEnter, true);
+        shadowDiv.addEventListener("mouseleave", mouseLeave, true);
+        shadowDiv.addEventListener("pointerenter", pointerEnter, true);
+        shadowDiv.addEventListener("pointerleave", pointerLeave, true);
+
+        synthesizeMouseAtCenter(lightDiv, { type: "mousemove" });
+        checkEventCounts({ mouseEnterCount: 0,
+                           mouseLeaveCount: 0,
+                           pointerEnterCount: 0,
+                           pointerLeaveCount: 0
+                         },
+                         "Entered light DOM"
+                         );
+
+        synthesizeMouseAtCenter(shadowDiv, { type: "mousemove" })
+        checkEventCounts({ mouseEnterCount: 2,
+                           mouseLeaveCount: 0,
+                           pointerEnterCount: 2,
+                           pointerLeaveCount: 0
+                         },
+                         "Entered shadow DOM");
+
+        synthesizeMouseAtCenter(lightDiv, { type: "mousemove" })
+        checkEventCounts({ mouseEnterCount: 2,
+                           mouseLeaveCount: 2,
+                           pointerEnterCount: 2,
+                           pointerLeaveCount: 2
+                         },
+                         "Left shadow DOM"
+                         );
+
+        parent.SimpleTest.finish();
+      }
+
+    function lazyRequestAnimationFrame(fn) {
+      requestAnimationFrame(
+        function() {
+          setTimeout(fn);
+        });
+    }
+    </script>
+  </head>
+  <body onload="lazyRequestAnimationFrame(test)">
+    <div id="lightDiv">light DOM</div>
+    <div id="host"></div>
+  </body>
+</html>
--- a/dom/events/test/mochitest.ini
+++ b/dom/events/test/mochitest.ini
@ -205,6 +205,8 @@ support-files = file_bug1446834.html
 [test_bug1447993.html]
 support-files = window_bug1447993.html
 skip-if = toolkit == 'android'
+[test_bug1484371.html]
+support-files = file_bug1484371.html
 [test_dnd_with_modifiers.html]
 [test_hover_mouseleave.html]
 [test_slotted_mouse_event.html]
--- a/dom/events/test/test_bug1484371.html
+++ b/dom/events/test/test_bug1484371.html
@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1484371
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1484371</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  /** Test for Bug 1484371 **/
+
+  SimpleTest.waitForExplicitFinish();
+
+  window.onload = function() {
+    SpecialPowers.pushPrefEnv({"set": [["dom.webcomponents.shadowdom.enabled", true]]},
+      function() {
+        document.getElementById("iframe").src = "file_bug1484371.html";
+      });
+  }
+
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1484371">Mozilla Bug 1484371</a>
+<iframe id="iframe"></iframe>
+</body>
+</html>
--- a/dom/script/ScriptLoader.cpp
+++ b/dom/script/ScriptLoader.cpp
@ -964,6 +964,39 @@ ScriptLoader::InstantiateModuleTree(ModuleLoadRequest* aRequest)
  return true;
 }

+nsresult
+ScriptLoader::AssociateSourceElementsForModuleTree(JSContext* aCx,
+                                                   ModuleLoadRequest* aRequest)
+{
+  // Preloading can cause JS scripts to be compiled before DOM script element
+  // nodes have been created. This method ensures compiled scripts are
+  // associated with DOM element nodes before execution.
+
+  MOZ_ASSERT(aRequest);
+
+  ModuleScript* moduleScript = aRequest->mModuleScript;
+  if (moduleScript->SourceElementAssociated()) {
+    return NS_OK;
+  }
+
+  for (ModuleLoadRequest* childRequest : aRequest->mImports) {
+    nsresult rv = AssociateSourceElementsForModuleTree(aCx, childRequest);
+    NS_ENSURE_SUCCESS(rv, rv);
+  }
+
+  JS::Rooted<JSScript*> script(aCx, moduleScript->Script());
+  MOZ_ASSERT(script);
+
+  nsresult rv = nsJSUtils::InitModuleSourceElement(aCx, script, aRequest->Element());
+  NS_ENSURE_SUCCESS(rv, rv);
+  moduleScript->SetSourceElementAssociated();
+
+  // The script is now ready to be exposed to the debugger.
+  JS::ExposeScriptToDebugger(aCx, script);
+
+  return NS_OK;
+}
+
 nsresult
 ScriptLoader::RestartLoad(ScriptLoadRequest* aRequest)
 {
@ -2312,12 +2345,8 @@ ScriptLoader::EvaluateScript(ScriptLoadRequest* aRequest)
      MOZ_ASSERT(script);

      if (!moduleScript->SourceElementAssociated()) {
-        rv = nsJSUtils::InitModuleSourceElement(cx, script, aRequest->Element());
+        rv = AssociateSourceElementsForModuleTree(cx, request);
        NS_ENSURE_SUCCESS(rv, rv);
-        moduleScript->SetSourceElementAssociated();
-
-        // The script is now ready to be exposed to the debugger.
-        JS::ExposeScriptToDebugger(cx, script);
      }

      rv = nsJSUtils::ModuleEvaluate(cx, script);
--- a/dom/script/ScriptLoader.h
+++ b/dom/script/ScriptLoader.h
@ -540,6 +540,9 @@ private:
  RefPtr<mozilla::GenericPromise>
  StartFetchingModuleAndDependencies(ModuleLoadRequest* aParent, nsIURI* aURI);

+  nsresult AssociateSourceElementsForModuleTree(JSContext* aCx,
+                                                ModuleLoadRequest* aRequest);
+
  nsIDocument* mDocument;                   // [WEAK]
  nsCOMArray<nsIScriptLoaderObserver> mObservers;
  ScriptLoadRequestList mNonAsyncExternalScriptInsertedRequests;
--- a/gfx/layers/LayerSorter.cpp
+++ b/gfx/layers/LayerSorter.cpp
@ -79,8 +79,8 @@ static gfxFloat RecoverZDepth(const Matrix4x4& aTransform, const gfxPoint& aPoin
 * unsolved without changing our rendering code.
 */
 static LayerSortOrder CompareDepth(Layer* aOne, Layer* aTwo) {
-  gfxRect ourRect = ThebesRect(aOne->GetLocalVisibleRegion().ToUnknownRegion().GetBounds());
-  gfxRect otherRect = ThebesRect(aTwo->GetLocalVisibleRegion().ToUnknownRegion().GetBounds());
+  gfxRect ourRect = ThebesRect(aOne->GetLocalVisibleRegion().GetBounds().ToUnknownRect());
+  gfxRect otherRect = ThebesRect(aTwo->GetLocalVisibleRegion().GetBounds().ToUnknownRect());

  MOZ_ASSERT(aOne->GetParent() && aOne->GetParent()->Extend3DContext() &&
             aTwo->GetParent() && aTwo->GetParent()->Extend3DContext());
--- a/Показать больше
+++ b/Показать больше
				`@ -0,0 +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"]}
				`@ -0,0 +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;;;;;;;;"}
				`@ -0,0 +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":""}
				`@ -0,0 +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":""}
				`@ -0,0 +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":""}
				`@ -0,0 +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":""}