Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

201 files changed, 17814 insertions, 0 deletions

diff --git a/devtools/client/framework/test/allocations/browser_allocations_browser_console.js b/devtools/client/framework/test/allocations/browser_allocations_browser_console.js
new file mode 100644
index 0000000000..13d0171dfa
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_browser_console.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Record allocations while opening and closing the Browser Console
+
+const TEST_URL =
+  "http://example.com/browser/devtools/client/framework/test/allocations/reloaded-page.html";
+
+const { require } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/Loader.sys.mjs"
+);
+const {
+  BrowserConsoleManager,
+} = require("resource://devtools/client/webconsole/browser-console-manager.js");
+
+async function testScript() {
+  // Open
+  await BrowserConsoleManager.toggleBrowserConsole();
+
+  // Reload the tab to make the test slightly more real
+  const hud = BrowserConsoleManager.getBrowserConsole();
+  const onTargetProcessed = hud.commands.targetCommand.once(
+    "processed-available-target"
+  );
+
+  gBrowser.reloadTab(gBrowser.selectedTab);
+
+  info("Wait for target of the new document to be fully processed");
+  await onTargetProcessed;
+
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
+  // Close
+  await BrowserConsoleManager.toggleBrowserConsole();
+
+  // Browser console still cleanup stuff after the resolution of toggleBrowserConsole.
+  // So wait for a little while to ensure it completes all cleanups.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+}
+
+add_task(async function () {
+  await SpecialPowers.pushPrefEnv({
+    set: [["devtools.browsertoolbox.scope", "everything"]],
+  });
+
+  const tab = await addTab(TEST_URL);
+
+  // Run the test scenario first before recording in order to load all the
+  // modules. Otherwise they get reported as "still allocated" objects,
+  // whereas we do expect them to be kept in memory as they are loaded via
+  // the main DevTools loader, which keeps the module loaded until the
+  // shutdown of Firefox
+  await testScript();
+
+  // Now, run the test script. This time, we record this run.
+  await startRecordingAllocations();
+
+  for (let i = 0; i < 3; i++) {
+    await testScript();
+  }
+
+  await stopRecordingAllocations("browser-console");
+
+  gBrowser.removeTab(tab);
+});
diff --git a/devtools/client/framework/test/allocations/browser_allocations_browser_console.toml b/devtools/client/framework/test/allocations/browser_allocations_browser_console.toml
new file mode 100644
index 0000000000..785f665b85
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_browser_console.toml
@@ -0,0 +1,17 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "!/devtools/shared/test-helpers/allocation-tracker.js",
+  "head.js",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_allocations_browser_console.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_debugger.js b/devtools/client/framework/test/allocations/browser_allocations_reload_debugger.js
new file mode 100644
index 0000000000..748a5e906e
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_debugger.js
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Record allocations while reloading the page with the debugger opened
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/framework/test/allocations/reload-test.js",
+  this
+);
+
+add_task(createPanelReloadTest("reload-debugger", "jsdebugger"));
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_debugger.toml b/devtools/client/framework/test/allocations/browser_allocations_reload_debugger.toml
new file mode 100644
index 0000000000..aabb21dc1a
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_debugger.toml
@@ -0,0 +1,20 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "!/devtools/shared/test-helpers/allocation-tracker.js",
+  "head.js",
+  "reload-test.js",
+  "reloaded-page.html",
+  "reloaded.png",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_allocations_reload_debugger.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_inspector.js b/devtools/client/framework/test/allocations/browser_allocations_reload_inspector.js
new file mode 100644
index 0000000000..3369c54f24
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_inspector.js
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Record allocations while reloading the page with the inspector opened
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/framework/test/allocations/reload-test.js",
+  this
+);
+
+add_task(createPanelReloadTest("reload-inspector", "inspector"));
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_inspector.toml b/devtools/client/framework/test/allocations/browser_allocations_reload_inspector.toml
new file mode 100644
index 0000000000..f2046ea621
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_inspector.toml
@@ -0,0 +1,20 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "!/devtools/shared/test-helpers/allocation-tracker.js",
+  "head.js",
+  "reload-test.js",
+  "reloaded-page.html",
+  "reloaded.png",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_allocations_reload_inspector.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_netmonitor.js b/devtools/client/framework/test/allocations/browser_allocations_reload_netmonitor.js
new file mode 100644
index 0000000000..2a57652ac5
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_netmonitor.js
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Record allocations while reloading the page with the netmonitor opened
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/framework/test/allocations/reload-test.js",
+  this
+);
+
+add_task(createPanelReloadTest("reload-netmonitor", "netmonitor"));
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_netmonitor.toml b/devtools/client/framework/test/allocations/browser_allocations_reload_netmonitor.toml
new file mode 100644
index 0000000000..3a4a0b8464
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_netmonitor.toml
@@ -0,0 +1,20 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "!/devtools/shared/test-helpers/allocation-tracker.js",
+  "head.js",
+  "reload-test.js",
+  "reloaded-page.html",
+  "reloaded.png",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_allocations_reload_netmonitor.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_no_devtools.js b/devtools/client/framework/test/allocations/browser_allocations_reload_no_devtools.js
new file mode 100644
index 0000000000..e2f344fcb5
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_no_devtools.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Record allocations while reloading the page without anything related to DevTools running
+
+const TEST_URL =
+  "http://example.com/browser/devtools/client/framework/test/allocations/reloaded-page.html";
+
+async function testScript() {
+  await BrowserTestUtils.reloadTab(gBrowser.selectedTab);
+
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+}
+
+add_task(async function () {
+  const tab = await addTab(TEST_URL);
+
+  // Run the test scenario first before recording in order to load all the
+  // modules. Otherwise they get reported as "still allocated" objects,
+  // whereas we do expect them to be kept in memory as they are loaded via
+  // the main DevTools loader, which keeps the module loaded until the
+  // shutdown of Firefox
+  await testScript();
+
+  await startRecordingAllocations({
+    alsoRecordContentProcess: true,
+  });
+
+  // Now, run the test script. This time, we record this run.
+  for (let i = 0; i < 10; i++) {
+    await testScript();
+  }
+
+  await stopRecordingAllocations("reload-no-devtools", {
+    alsoRecordContentProcess: true,
+  });
+
+  gBrowser.removeTab(tab);
+});
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_no_devtools.toml b/devtools/client/framework/test/allocations/browser_allocations_reload_no_devtools.toml
new file mode 100644
index 0000000000..58dfadc598
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_no_devtools.toml
@@ -0,0 +1,19 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "!/devtools/shared/test-helpers/allocation-tracker.js",
+  "head.js",
+  "reloaded-page.html",
+  "reloaded.png",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_allocations_reload_no_devtools.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_webconsole.js b/devtools/client/framework/test/allocations/browser_allocations_reload_webconsole.js
new file mode 100644
index 0000000000..a60fd03b3c
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_webconsole.js
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Record allocations while reloading the page with the webconsole opened
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/framework/test/allocations/reload-test.js",
+  this
+);
+
+add_task(createPanelReloadTest("reload-webconsole", "webconsole"));
diff --git a/devtools/client/framework/test/allocations/browser_allocations_reload_webconsole.toml b/devtools/client/framework/test/allocations/browser_allocations_reload_webconsole.toml
new file mode 100644
index 0000000000..58bb9b733e
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_reload_webconsole.toml
@@ -0,0 +1,20 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "!/devtools/shared/test-helpers/allocation-tracker.js",
+  "head.js",
+  "reload-test.js",
+  "reloaded-page.html",
+  "reloaded.png",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_allocations_reload_webconsole.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/allocations/browser_allocations_target.js b/devtools/client/framework/test/allocations/browser_allocations_target.js
new file mode 100644
index 0000000000..a93d6b51c9
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_target.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Record allocations while spawning Commands and the first top level target
+
+const TEST_URL =
+  "data:text/html;charset=UTF-8,<div>Target allocations test</div>";
+
+const { require } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/Loader.sys.mjs"
+);
+const {
+  CommandsFactory,
+} = require("resource://devtools/shared/commands/commands-factory.js");
+
+async function testScript(tab) {
+  const commands = await CommandsFactory.forTab(tab);
+  await commands.targetCommand.startListening();
+
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
+  // destroy the commands to also destroy the dedicated client.
+  await commands.destroy();
+
+  // Spin the event loop to ensure commands destruction is fully completed
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 0));
+}
+
+add_task(async function () {
+  const tab = await addTab(TEST_URL);
+
+  // Run the test scenario first before recording in order to load all the
+  // modules. Otherwise they get reported as "still allocated" objects,
+  // whereas we do expect them to be kept in memory as they are loaded via
+  // the main DevTools loader, which keeps the module loaded until the
+  // shutdown of Firefox
+  await testScript(tab);
+
+  await startRecordingAllocations();
+
+  // Now, run the test script. This time, we record this run.
+  await testScript(tab);
+
+  await stopRecordingAllocations("target");
+
+  gBrowser.removeTab(tab);
+});
diff --git a/devtools/client/framework/test/allocations/browser_allocations_target.toml b/devtools/client/framework/test/allocations/browser_allocations_target.toml
new file mode 100644
index 0000000000..d5b4b158d5
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_target.toml
@@ -0,0 +1,17 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "!/devtools/shared/test-helpers/allocation-tracker.js",
+  "head.js",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_allocations_target.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/allocations/browser_allocations_toolbox.js b/devtools/client/framework/test/allocations/browser_allocations_toolbox.js
new file mode 100644
index 0000000000..e0f86511bc
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_toolbox.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Record allocations while opening and closing DevTools
+
+const TEST_URL =
+  "data:text/html;charset=UTF-8,<div>Target allocations test</div>";
+
+const { require } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/Loader.sys.mjs"
+);
+const {
+  gDevTools,
+} = require("resource://devtools/client/framework/devtools.js");
+
+async function testScript(tab) {
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "inspector",
+  });
+
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
+  await toolbox.destroy();
+
+  // Spin the event loop to ensure toolbox destroy is fully completed
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 0));
+}
+
+add_task(async function () {
+  const tab = await addTab(TEST_URL);
+
+  // Run the test scenario first before recording in order to load all the
+  // modules. Otherwise they get reported as "still allocated" objects,
+  // whereas we do expect them to be kept in memory as they are loaded via
+  // the main DevTools loader, which keeps the module loaded until the
+  // shutdown of Firefox
+  await testScript(tab);
+
+  await startRecordingAllocations();
+
+  // Now, run the test script. This time, we record this run.
+  for (let i = 0; i < 3; i++) {
+    await testScript(tab);
+  }
+
+  await stopRecordingAllocations("toolbox");
+
+  gBrowser.removeTab(tab);
+});
diff --git a/devtools/client/framework/test/allocations/browser_allocations_toolbox.toml b/devtools/client/framework/test/allocations/browser_allocations_toolbox.toml
new file mode 100644
index 0000000000..bbeeb14e45
--- /dev/null
+++ b/devtools/client/framework/test/allocations/browser_allocations_toolbox.toml
@@ -0,0 +1,17 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "!/devtools/shared/test-helpers/allocation-tracker.js",
+  "head.js",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_allocations_toolbox.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/allocations/docs/index.md b/devtools/client/framework/test/allocations/docs/index.md
new file mode 100644
index 0000000000..f0d6921325
--- /dev/null
+++ b/devtools/client/framework/test/allocations/docs/index.md
@@ -0,0 +1,241 @@
+# Allocation tests
+
+The [allocations](https://searchfox.org/mozilla-central/source/devtools/client/framework/test/allocations) folder contains special mochitests which are meant to record data about the memory usage of DevTools.
+This uses Spidermonkey's Memory API implemented next to the debugger API.
+For more info, see the following doc:
+<https://searchfox.org/mozilla-central/source/js/src/doc/Debugger/Debugger.Memory.md>
+
+# Test example
+
+```javascript
+add_task(async function() {
+  // Execute preliminary setup in order to be able to run your scenario
+  // You would typicaly load modules, open a tab, a toolbox, ...
+  ...
+
+  // Run the test scenario first before recording in order to load all the
+  // modules. Otherwise they get reported as "still allocated" objects,
+  // whereas we do expect them to be kept in memory as they are loaded via
+  // the main DevTools loader, which keeps the module loaded until the
+  // shutdown of Firefox
+  await testScript();
+
+  // Pass alsoRecordContentProcess if you want to record the content process
+  // of the current tab. Otherwise it will only record parent process objects.
+  await startRecordingAllocations({ alsoRecordContentProcess: true });
+
+  // Now, run the test script. This time, we record this run.
+  await testScript(toolbox);
+
+  // This will stop the record and also publish the results to Talos database
+  // Second argument will be the name of the test displayed in Talos.
+  // Many tests will be recorded, but all of them will be prefixed with this string.
+  await stopRecordingAllocations("reload", { alsoRecordContentProcess: true });
+
+  // Then, here you can execute cleanup.
+  // You would typically close the tab, toolbox, ...
+});
+```
+
+# How to run them locally
+
+```bash
+$ ./mach mochitest --headless devtools/client/framework/test/allocations/
+```
+
+And to only see the results:
+```bash
+$ ./mach mochitest --headless devtools/client/framework/test/allocations/ | grep " test leaked "
+```
+
+# Debug leaks
+
+If you are seeing a regression or an improvement, only seeing the number of objects being leaked isn't super helpful.
+The tests includes some special debug modes which are printing lots of data to figure out what is leaking and why.
+
+You may run the test with the following env variable to turn debug mode on:
+```bash
+DEBUG_DEVTOOLS_ALLOCATIONS=leak|allocations $ ./mach mochitest --headless devtools/client/framework/test/allocations/the-fault-test.js
+```
+
+**DEBUG_DEVTOOLS_ALLOCATIONS** can enable two distinct debug output. (Only one can be enabled at a given time)
+
+**DEBUG_DEVTOOLS_ALLOCATIONS=allocations** will report all allocation sites that have been made
+while running your test. This will include allocations which has been freed.
+This view is especially useful if you want to reduce allocations in order to reduce GC overload.
+
+**DEBUG_DEVTOOLS_ALLOCATIONS=leak** will report only the allocations which are still allocated
+at the end of your test. Sometimes it will only report allocations with missing stack trace.
+Thus making the preview view helpful.
+
+## Example
+
+Let's assume we have the following code:
+
+```javascript
+ 1:  exports.MyModule = {
+ 2:    globalArray: [],
+ 3:    test() {
+ 3:      // The following object will be allocated but not leaked,
+ 5:      // as we keep no reference to it anywhere
+ 6:      const transientObject = {};
+ 7:
+ 8:      // The following object will be allocated on this line,
+ 9:      // but leaked on the following one. By storing a reference
+10:      // to it in the global array which is never cleared.
+11:      const leakedObject = {};
+12:      this.globalArray.push(leakedObject);
+13:    },
+14:  };
+```
+
+And that, we have a memory test doing this:
+
+```javascript
+  const { MyModule } = require("devtools/my-module");
+
+  await startRecordingAllocations();
+
+  MyModule.test();
+
+  await stopRecordingAllocations("target");
+```
+
+We can first review all the allocations by running:
+
+```bash
+DEBUG_DEVTOOLS_ALLOCATIONS=allocations $ ./mach mochitest --headless devtools/client/framework/test/allocations/browser_allocation_myTest.js
+
+```
+
+which will print at the end:
+
+```javascript
+DEVTOOLS ALLOCATION: all allocations (which may be freed or are still allocated):
+[
+   {
+     "src": "UNKNOWN",
+     "count": 80,
+     "lines": [
+       "?: 80"
+     ]
+   },
+   {
+     "src": "resource://devtools/my-module.js",
+     "count": 2,
+     "lines": [
+       "11: 1"
+       "6: 1"
+     ]
+   }
+]
+```
+
+The first part, with `UNKNOWN` can be ignored. This is about objects with missing allocation sites.
+The second part of this logs tells us that 2 objects were allocated from my-module.js when running the test.
+One has been allocated at line 6, it is `transcientObject`.
+Another one has been allocated at line 11, it is `leakedObject`.
+
+Now, we can use the second view to focus only on objects that have been kept allocated:
+
+```bash
+DEBUG_DEVTOOLS_ALLOCATIONS=leaks $ ./mach mochitest --headless devtools/client/framework/test/allocations/browser_allocation_myTest.js
+
+```
+
+which will print at the end:
+
+```javascript
+DEVTOOLS ALLOCATION: allocations which leaked:
+[
+   {
+     "src": "UNKNOWN",
+     "count": 80,
+     "lines": [
+       "?: 80"
+     ]
+   },
+   {
+     "src": "resource://devtools/shared/commands/commands-factory.js",
+     "count": 1,
+     "lines": [
+       "11: 1"
+     ]
+   }
+]
+```
+
+Similarly, we can focus only on the second part, which tells us that only one object is being leaked
+and this object has been originally created from line 11, this is `leakedObject`.
+This doesn't tell us why the object is being kept allocated, but at least we know which one is being kept in memory.
+
+
+## Debug leaks via dominators
+
+This last feature might be the most powerful and isn't bound to DEBUG_DEVTOOLS_ALLOCATIONS.
+This is always enabled.
+Also, it requires to know which particular object is being leaked and also require to hack
+the codebase in order to pass a reference of the suspicious object to the test helper.
+
+You can instruct the test helper to track a given object by doing this:
+
+```javascript
+ 1: // Let's say it is some code running from "my-module.js"
+ 2:
+ 3: // From a DevTools CommonJS module:
+ 4: const { track } = require("devtools/shared/test-helpers/tracked-objects.sys.mjs");
+ 5: // From anything else, JSM, XPCOM module,...:
+ 6: const { track } = ChromeUtils.importESModule("resource://devtools/shared/test-helpers/tracked-objects.sys.mjs");
+ 7:
+ 8: const g = [];
+ 9: function someFunctionInDevToolsCalledBySomething() {
+10:   const myLeakedObject = {};
+11:   track(myLeakedObject);
+12:
+13:   // Simulate a leak by holding a reference to the object in a global `g` array
+14:   g.push({ seeMyCustomAttributeHere: myLeakedObject });
+15: }
+```
+
+Then, when running the test you will get such output:
+
+```bash
+ 0:41.26 GECKO(644653)  # Tracing: Object@my-module:10
+ 0:40.65 GECKO(644653) ### Path(s) from root:
+ 0:41.26 GECKO(644653) - other@no-stack:undefined.WeakMap entry value
+ 0:41.26 GECKO(644653)  \--> LexicalEnvironment@base-loader.sys.mjs:160.**UNKNOWN SLOT 1**
+ 0:41.26 GECKO(644653)  \--> Object@base-loader.sys.mjs:155.g
+ 0:41.26 GECKO(644653)  \--> Array@my-module.js:8.objectElements[0]
+ 0:41.26 GECKO(644653)  \--> Object@my-module.js:14.seeMyCustomAttributeHere
+ 0:41.26 GECKO(644653)  \--> Object@my-module.js:10
+```
+
+This output means that `myLeakedObject` was originally allocated from my-module.js at line 10.
+And is being held allocated because it is kept in an Object allocated from my-module.js at line 14.
+This is our custom object we stored in `g` global Array.
+This custom object it hold by the Array allocated at line 8 of my-module.js.
+And this array is held allocated from an Object, itself allocated by base-loader.sys.mjs at line 155.
+This is the global of the my-module.js's module, created by DevTools loader.
+Then we see some more low level object up to another global object, which misses its allocation site.
+
+# How to easily get data from try run
+
+```bash
+$ ./mach try fuzzy devtools/client/framework/test/allocations/ --query "'linux 'chrome-e10s 'opt '64-qr/opt"
+```
+
+You might also pass `--rebuild 3` if the test result is having some noise and you want more test runs.
+
+# Following trends for these tests
+
+You may try looking at:
+<https://firefox-dev.tools/performance-dashboard/tools/memory.html>
+
+Or at:
+<https://treeherder.mozilla.org/perfherder/graphs?highlightAlerts=1&highlightChangelogData=1&series=autoland,3887143,1,12&series=mozilla-central,3887737,1,12&series=mozilla-central,3887740,1,12&series=mozilla-central,3887743,1,12&series=mozilla-central,3896204,1,12&timerange=2592000&zoom=1630504360002,1632239562424,0,123469.11111111111>
+
+Link that you get from: <https://treeherder.mozilla.org/perfherder/graphs>
+by looking at last year data for "DevTools" in the first dropdown,
+and double clicking on the relevant line in "Tests" menulist.
+
+Significant improvements and regressions will be notified through [the following dashboard](https://treeherder.mozilla.org/perfherder/alerts?hideDwnToInv=1&page=1&framework=12).
diff --git a/devtools/client/framework/test/allocations/head.js b/devtools/client/framework/test/allocations/head.js
new file mode 100644
index 0000000000..a7e7f56a36
--- /dev/null
+++ b/devtools/client/framework/test/allocations/head.js
@@ -0,0 +1,250 @@
+/* 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";
+
+// Load the tracker very first in order to ensure tracking all objects created by DevTools.
+// This is especially important for allocation sites. We need to catch the global the
+// earliest possible in order to ensure that all allocation objects come with a stack.
+//
+// If we want to track DevTools module loader we should ensure loading Loader.sys.mjs within
+// the `testScript` Function. i.e. after having calling startRecordingAllocations.
+let tracker, releaseTrackerLoader;
+{
+  const {
+    useDistinctSystemPrincipalLoader,
+    releaseDistinctSystemPrincipalLoader,
+  } = ChromeUtils.importESModule(
+    "resource://devtools/shared/loader/DistinctSystemPrincipalLoader.sys.mjs"
+  );
+
+  const requester = {};
+  const loader = useDistinctSystemPrincipalLoader(requester);
+  releaseTrackerLoader = () => releaseDistinctSystemPrincipalLoader(requester);
+  const { allocationTracker } = loader.require(
+    "chrome://mochitests/content/browser/devtools/shared/test-helpers/allocation-tracker.js"
+  );
+  tracker = allocationTracker({ watchDevToolsGlobals: true });
+}
+
+// /!\ Be careful about imports/require
+//
+// Some tests may record the very first time we load a module.
+// If we start loading them from here, we might only retrieve the already loaded
+// module from the loader's cache. This would no longer highlight the cost
+// of loading a new module from scratch.
+//
+// => Avoid loading devtools module as much as possible
+// => If you really have to, lazy load them
+
+ChromeUtils.defineLazyGetter(this, "TrackedObjects", () => {
+  return ChromeUtils.importESModule(
+    "resource://devtools/shared/test-helpers/tracked-objects.sys.mjs"
+  );
+});
+
+// So that PERFHERDER data can be extracted from the logs.
+SimpleTest.requestCompleteLog();
+
+// We have to disable testing mode, or various debug instructions are enabled.
+// We especially want to disable redux store history, which would leak all the actions!
+SpecialPowers.pushPrefEnv({
+  set: [["devtools.testing", false]],
+});
+
+// Set DEBUG_DEVTOOLS_ALLOCATIONS=allocations|leaks in order print debug informations.
+const DEBUG_ALLOCATIONS = Services.env.get("DEBUG_DEVTOOLS_ALLOCATIONS");
+
+async function addTab(url) {
+  const tab = BrowserTestUtils.addTab(gBrowser, url);
+  gBrowser.selectedTab = tab;
+  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+  return tab;
+}
+
+/**
+ * This function will force some garbage collection before recording
+ * data about allocated objects.
+ *
+ * This accept an optional boolean to also record the content process objects
+ * of the current tab. That, in addition of objects from the parent process,
+ * which are always recorded.
+ *
+ * This return same data object which is meant to be passed to `stopRecordingAllocations` as-is.
+ *
+ * See README.md file in this folder.
+ */
+async function startRecordingAllocations({
+  alsoRecordContentProcess = false,
+} = {}) {
+  // Also start recording allocations in the content process, if requested
+  if (alsoRecordContentProcess) {
+    await SpecialPowers.spawn(
+      gBrowser.selectedBrowser,
+      [DEBUG_ALLOCATIONS],
+      async debug_allocations => {
+        const { DevToolsLoader } = ChromeUtils.importESModule(
+          "resource://devtools/shared/loader/Loader.sys.mjs"
+        );
+
+        const {
+          useDistinctSystemPrincipalLoader,
+          releaseDistinctSystemPrincipalLoader,
+        } = ChromeUtils.importESModule(
+          "resource://devtools/shared/loader/DistinctSystemPrincipalLoader.sys.mjs"
+        );
+
+        const requester = {};
+        const loader = useDistinctSystemPrincipalLoader(requester);
+        const { allocationTracker } = loader.require(
+          "chrome://mochitests/content/browser/devtools/shared/test-helpers/allocation-tracker.js"
+        );
+        // We watch all globals in the content process, (instead of only DevTools global in parent process)
+        // because we may easily leak web page objects, which aren't in DevTools global.
+        const tracker = allocationTracker({ watchAllGlobals: true });
+
+        // /!\ HACK: store tracker and releaseTrackerLoader on DevToolsLoader in order
+        // to be able to reuse them in a following call to SpecialPowers.spawn
+        DevToolsLoader.tracker = tracker;
+        DevToolsLoader.releaseTrackerLoader = () =>
+          releaseDistinctSystemPrincipalLoader(requester);
+
+        await tracker.startRecordingAllocations(debug_allocations);
+      }
+    );
+    // Trigger a GC in the parent process as this additional ContentTask
+    // seems to make harder to release objects created before we start recording.
+    await tracker.doGC();
+  }
+
+  await tracker.startRecordingAllocations(DEBUG_ALLOCATIONS);
+}
+
+/**
+ * See doc of startRecordingAllocations
+ */
+async function stopRecordingAllocations(
+  recordName,
+  { alsoRecordContentProcess = false } = {}
+) {
+  // Ensure that Memory API didn't ran out of buffers
+  ok(!tracker.overflowed, "Allocation were all recorded in the parent process");
+
+  // And finally, retrieve the record *after* having ran the test
+  const parentProcessData = await tracker.stopRecordingAllocations(
+    DEBUG_ALLOCATIONS
+  );
+
+  const objectNodeIds = TrackedObjects.getAllNodeIds();
+  if (objectNodeIds.length) {
+    tracker.traceObjects(objectNodeIds);
+  }
+
+  let contentProcessData = null;
+  if (alsoRecordContentProcess) {
+    contentProcessData = await SpecialPowers.spawn(
+      gBrowser.selectedBrowser,
+      [DEBUG_ALLOCATIONS],
+      debug_allocations => {
+        const { DevToolsLoader } = ChromeUtils.importESModule(
+          "resource://devtools/shared/loader/Loader.sys.mjs"
+        );
+        const { tracker } = DevToolsLoader;
+        ok(
+          !tracker.overflowed,
+          "Allocation were all recorded in the content process"
+        );
+        return tracker.stopRecordingAllocations(debug_allocations);
+      }
+    );
+  }
+
+  const trackedObjectsInContent = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const TrackedObjects = ChromeUtils.importESModule(
+        "resource://devtools/shared/test-helpers/tracked-objects.sys.mjs"
+      );
+      const objectNodeIds = TrackedObjects.getAllNodeIds();
+      if (objectNodeIds.length) {
+        const { DevToolsLoader } = ChromeUtils.importESModule(
+          "resource://devtools/shared/loader/Loader.sys.mjs"
+        );
+        const { tracker } = DevToolsLoader;
+        // Record the heap snapshot from the content process,
+        // and pass the record's filepath to the parent process
+        // As only the parent process can read the file because
+        // of sandbox restrictions made to content processes regarding file I/O.
+        const snapshotFile = tracker.getSnapshotFile();
+        return { snapshotFile, objectNodeIds };
+      }
+      return null;
+    }
+  );
+  if (trackedObjectsInContent) {
+    tracker.traceObjects(
+      trackedObjectsInContent.objectNodeIds,
+      trackedObjectsInContent.snapshotFile
+    );
+  }
+
+  // Craft the JSON object required to save data in talos database
+  info(
+    `The ${recordName} test leaked ${parentProcessData.objectsWithStack} objects (${parentProcessData.objectsWithoutStack} with missing allocation site) in the parent process`
+  );
+  const PERFHERDER_DATA = {
+    framework: {
+      name: "devtools",
+    },
+    suites: [
+      {
+        name: recordName + ":parent-process",
+        subtests: [
+          {
+            name: "objects-with-stacks",
+            value: parentProcessData.objectsWithStack,
+          },
+          {
+            name: "memory",
+            value: parentProcessData.memory,
+          },
+        ],
+      },
+    ],
+  };
+  if (alsoRecordContentProcess) {
+    info(
+      `The ${recordName} test leaked ${contentProcessData.objectsWithStack} objects (${contentProcessData.objectsWithoutStack} with missing allocation site) in the content process`
+    );
+    PERFHERDER_DATA.suites.push({
+      name: recordName + ":content-process",
+      subtests: [
+        {
+          name: "objects-with-stacks",
+          value: contentProcessData.objectsWithStack,
+        },
+        {
+          name: "memory",
+          value: contentProcessData.memory,
+        },
+      ],
+    });
+
+    // Finally release the tracker loader in content process.
+    await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+      const { DevToolsLoader } = ChromeUtils.importESModule(
+        "resource://devtools/shared/loader/Loader.sys.mjs"
+      );
+      DevToolsLoader.releaseTrackerLoader();
+    });
+  }
+
+  // And release the tracker loader in the parent process
+  releaseTrackerLoader();
+
+  // Log it to stdout so that perfherder can collect this data.
+  // This only works if we called `SimpleTest.requestCompleteLog()`!
+  info("PERFHERDER_DATA: " + JSON.stringify(PERFHERDER_DATA));
+}
diff --git a/devtools/client/framework/test/allocations/moz.build b/devtools/client/framework/test/allocations/moz.build
new file mode 100644
index 0000000000..5488c8e2fc
--- /dev/null
+++ b/devtools/client/framework/test/allocations/moz.build
@@ -0,0 +1,16 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+BROWSER_CHROME_MANIFESTS += [
+    "browser_allocations_browser_console.toml",
+    "browser_allocations_reload_debugger.toml",
+    "browser_allocations_reload_inspector.toml",
+    "browser_allocations_reload_netmonitor.toml",
+    "browser_allocations_reload_no_devtools.toml",
+    "browser_allocations_reload_webconsole.toml",
+    "browser_allocations_target.toml",
+    "browser_allocations_toolbox.toml",
+]
diff --git a/devtools/client/framework/test/allocations/reload-test.js b/devtools/client/framework/test/allocations/reload-test.js
new file mode 100644
index 0000000000..3d09d5ef43
--- /dev/null
+++ b/devtools/client/framework/test/allocations/reload-test.js
@@ -0,0 +1,84 @@
+/* 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";
+
+/* import-globals-from head.js */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+/**
+ * Generate a test Task to record allocation when reloading a test page
+ * while having one particular DevTools panel opened
+ *
+ * @param String recordName
+ *        Name of the test recorded into PerfHerder/Talos database
+ * @param String toolId
+ *        ID of the panel to open
+ */
+function createPanelReloadTest(recordName, toolId) {
+  return async function panelReloadTest() {
+    const TEST_URL =
+      "http://example.com/browser/devtools/client/framework/test/allocations/reloaded-page.html";
+
+    async function testScript(toolbox) {
+      const onTargetSwitched =
+        toolbox.commands.targetCommand.once("switched-target");
+      const onReloaded = toolbox.getCurrentPanel().once("reloaded");
+
+      gBrowser.reloadTab(gBrowser.selectedTab);
+
+      if (
+        toolbox.commands.targetCommand.targetFront.targetForm
+          .followWindowGlobalLifeCycle
+      ) {
+        info("Wait for target switched");
+        await onTargetSwitched;
+      }
+
+      info("Wait for panel reload");
+      await onReloaded;
+
+      // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+      await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+
+    const tab = await addTab(TEST_URL);
+
+    const { require } = ChromeUtils.importESModule(
+      "resource://devtools/shared/loader/Loader.sys.mjs"
+    );
+    const {
+      gDevTools,
+    } = require("resource://devtools/client/framework/devtools.js");
+    const toolbox = await gDevTools.showToolboxForTab(tab, {
+      toolId,
+    });
+
+    // Run the test scenario first before recording in order to load all the
+    // modules. Otherwise they get reported as "still allocated" objects,
+    // whereas we do expect them to be kept in memory as they are loaded via
+    // the main DevTools loader, which keeps the module loaded until the
+    // shutdown of Firefox
+    await testScript(toolbox);
+    // Running it a second time is helpful for the debugger which allocates different objects
+    // on the second run... which would be taken as leak otherwise.
+    await testScript(toolbox);
+
+    await startRecordingAllocations({
+      alsoRecordContentProcess: true,
+    });
+
+    // Now, run the test script. This time, we record this run.
+    for (let i = 0; i < 10; i++) {
+      await testScript(toolbox);
+    }
+
+    await stopRecordingAllocations(recordName, {
+      alsoRecordContentProcess: true,
+    });
+
+    await toolbox.destroy();
+    gBrowser.removeTab(tab);
+  };
+}
diff --git a/devtools/client/framework/test/allocations/reloaded-page.html b/devtools/client/framework/test/allocations/reloaded-page.html
new file mode 100644
index 0000000000..4f14c8a0c3
--- /dev/null
+++ b/devtools/client/framework/test/allocations/reloaded-page.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Reloaded page</title>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    The reloaded page
+    <img src="reloaded.png" />
+  </body>
+</html>
diff --git a/devtools/client/framework/test/allocations/reloaded.png b/devtools/client/framework/test/allocations/reloaded.png
new file mode 100644
index 0000000000..769c636340
--- /dev/null
+++ b/devtools/client/framework/test/allocations/reloaded.png
diff --git a/devtools/client/framework/test/browser-telemetry-startup.toml b/devtools/client/framework/test/browser-telemetry-startup.toml
new file mode 100644
index 0000000000..12b04456e7
--- /dev/null
+++ b/devtools/client/framework/test/browser-telemetry-startup.toml
@@ -0,0 +1,14 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+]
+
+["browser_toolbox_telemetry_open_event.js"]
+# This test suite is dedicated to run a test for the telemetry event logged when
+# opening the toolbox for the first time. This test has to be the first test
+# running for a given instance of Firefox. A dedicated manifest will ensure a
+# new browser instance is created just for this test.
diff --git a/devtools/client/framework/test/browser.toml b/devtools/client/framework/test/browser.toml
new file mode 100644
index 0000000000..e7d979ebb3
--- /dev/null
+++ b/devtools/client/framework/test/browser.toml
@@ -0,0 +1,315 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "reload/*",
+  "browser_toolbox_options_disable_js.html",
+  "browser_toolbox_options_disable_js_iframe.html",
+  "browser_toolbox_options_disable_cache.sjs",
+  "browser_toolbox_options_disable_cache.css.sjs",
+  "browser_toolbox_window_title_changes_page.html",
+  "browser_toolbox_window_title_frame_select_page.html",
+  "code_bundle_late_script.js",
+  "code_bundle_late_script.js.map",
+  "code_binary_search.coffee",
+  "code_binary_search.js",
+  "code_binary_search.map",
+  "code_binary_search_absolute.js",
+  "code_binary_search_absolute.map",
+  "code_bundle_cross_domain.js",
+  "code_bundle_cross_domain.js.map",
+  "code_bundle_no_race.js",
+  "code_bundle_no_race.js.map",
+  "code_cross_domain.js",
+  "code_inline_bundle.js",
+  "code_inline_original.js",
+  "code_math.js",
+  "code_no_race.js",
+  "doc_backward_forward_navigation.html",
+  "doc_cached-resource.html",
+  "doc_cached-resource_iframe.html",
+  "doc_empty-tab-01.html",
+  "doc_lazy_tool.html",
+  "doc_textbox_tool.html",
+  "head.js",
+  "helper_disable_cache.js",
+  "doc_theme.css",
+  "doc_viewsource.html",
+  "browser_toolbox_options_enable_serviceworkers_testing.html",
+  "serviceworker.js",
+  "sjs_cache_controle_header.sjs",
+  "test_chrome_page.html",
+  "!/devtools/client/debugger/test/mochitest/shared-head.js",
+  "!/devtools/client/inspector/test/shared-head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+  "!/devtools/client/webconsole/test/browser/shared-head.js",
+]
+prefs = ["security.allow_unsafe_parent_loads=true"] # This is far from ideal. Bug 1565279 covers removing this pref flip.
+
+["../../../../browser/base/content/test/static/browser_all_files_referenced.js"]
+# We want this test to run for mochitest-dt as well, so we include it here
+skip-if = [
+  "debug", # no point in running on both opt and debug, and will likely intermittently timeout on debug, Bug 1598726
+  "asan",
+  "ccov",
+]
+
+["../../../../browser/base/content/test/static/browser_parsable_css.js"]
+# We want this test to run for mochitest-dt as well, so we include it here
+skip-if = [
+  "debug", # no point in running on both opt and debug, and will likely intermittently timeout on debug
+  "asan",
+]
+
+["browser_about-devtools-toolbox_load.js"]
+
+["browser_about-devtools-toolbox_reload.js"]
+
+["browser_commands_from_url.js"]
+
+["browser_devtools_api_destroy.js"]
+
+["browser_dynamic_tool_enabling.js"]
+
+["browser_front_parentFront.js"]
+
+["browser_ignore_toolbox_network_requests.js"]
+
+["browser_keybindings_01.js"]
+
+["browser_keybindings_02.js"]
+
+["browser_keybindings_03.js"]
+
+["browser_menu_api.js"]
+
+["browser_new_activation_workflow.js"]
+
+["browser_source_map-01.js"]
+
+["browser_source_map-absolute.js"]
+
+["browser_source_map-cross-domain.js"]
+
+["browser_source_map-init.js"]
+
+["browser_source_map-inline.js"]
+
+["browser_source_map-late-script.js"]
+
+["browser_source_map-no-race.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_source_map-pub-sub.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_source_map-reload.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_tab_commands_factory.js"]
+
+["browser_tab_descriptor_fission.js"]
+
+["browser_target_cached-front.js"]
+
+["browser_target_cached-resource.js"]
+
+["browser_target_get-front.js"]
+
+["browser_target_listeners.js"]
+
+["browser_target_loading.js"]
+
+["browser_target_parents.js"]
+skip-if = ["tsan"] # bug 1807041
+
+["browser_target_remote.js"]
+
+["browser_target_server_compartment.js"]
+
+["browser_target_support.js"]
+
+["browser_toolbox_backward_forward_navigation.js"]
+skip-if = [
+  "os == 'linux' && bits == 64", # Bug 1770314
+  "os == 'mac'", # Bug 1770314
+]
+
+["browser_toolbox_browsertoolbox_host.js"]
+
+["browser_toolbox_contentpage_contextmenu.js"]
+
+["browser_toolbox_disable_f12.js"]
+
+["browser_toolbox_dynamic_registration.js"]
+
+["browser_toolbox_error_count.js"]
+
+["browser_toolbox_error_count_reset_on_navigation.js"]
+
+["browser_toolbox_fission_navigation.js"]
+skip-if = [
+  "os == 'linux'", # Bug 1742672
+]
+
+["browser_toolbox_frames_list.js"]
+
+["browser_toolbox_getpanelwhenready.js"]
+
+["browser_toolbox_highlight.js"]
+
+["browser_toolbox_hosts.js"]
+
+["browser_toolbox_hosts_size.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_toolbox_hosts_telemetry.js"]
+
+["browser_toolbox_keyboard_navigation.js"]
+
+["browser_toolbox_keyboard_navigation_notification_box.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_toolbox_meatball.js"]
+
+["browser_toolbox_options.js"]
+
+["browser_toolbox_options_disable_buttons.js"]
+skip-if = ["a11y_checks"] # Bug 1849028 and 1849179 for causing crashes
+
+["browser_toolbox_options_disable_cache-01.js"]
+
+["browser_toolbox_options_disable_cache-02.js"]
+
+["browser_toolbox_options_disable_cache-03.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_toolbox_options_disable_js.js"]
+
+["browser_toolbox_options_enable_serviceworkers_testing.js"]
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+
+["browser_toolbox_options_frames_button.js"]
+
+["browser_toolbox_options_multiple_tabs.js"]
+
+["browser_toolbox_options_panel_toggle.js"]
+
+["browser_toolbox_popups_debugging.js"]
+
+["browser_toolbox_races.js"]
+
+["browser_toolbox_raise.js"]
+disabled = "Bug 962258"
+
+["browser_toolbox_ready.js"]
+
+["browser_toolbox_remoteness_change.js"]
+
+["browser_toolbox_screenshot_tool.js"]
+skip-if = ["a11y_checks"] # Bugs 1858041 and 1849028 for causing intermittent crashes
+
+["browser_toolbox_select_event.js"]
+
+["browser_toolbox_selected_tool_unavailable.js"]
+
+["browser_toolbox_selectionchanged_event.js"]
+
+["browser_toolbox_show_toolbox_tool_ready.js"]
+
+["browser_toolbox_split_console.js"]
+
+["browser_toolbox_tabsswitch_shortcuts.js"]
+
+["browser_toolbox_telemetry_activate_splitconsole.js"]
+
+["browser_toolbox_telemetry_close.js"]
+
+["browser_toolbox_telemetry_enter.js"]
+
+["browser_toolbox_telemetry_exit.js"]
+
+["browser_toolbox_textbox_context_menu.js"]
+
+["browser_toolbox_theme.js"]
+
+["browser_toolbox_theme_registration.js"]
+
+["browser_toolbox_toggle.js"]
+
+["browser_toolbox_tool_ready.js"]
+
+["browser_toolbox_tool_remote_reopen.js"]
+
+["browser_toolbox_toolbar_minimum_width.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+skip-if = ["os == 'win' && !debug"] # Bug 1709840
+
+["browser_toolbox_toolbar_overflow.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_toolbox_toolbar_overflow_button_visibility.js"]
+
+["browser_toolbox_toolbar_reorder_by_dnd.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_toolbox_toolbar_reorder_by_width.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_toolbox_toolbar_reorder_with_extension.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_toolbox_toolbar_reorder_with_hidden_extension.js"]
+fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
+
+["browser_toolbox_tools_per_toolbox_registration.js"]
+
+["browser_toolbox_view_source_01.js"]
+
+["browser_toolbox_view_source_02.js"]
+
+["browser_toolbox_view_source_03.js"]
+
+["browser_toolbox_view_source_style_editor_fallback.js"]
+
+["browser_toolbox_watchedByDevTools.js"]
+
+["browser_toolbox_window_reload_target.js"]
+
+["browser_toolbox_window_reload_target_force.js"]
+
+["browser_toolbox_window_shortcuts.js"]
+
+["browser_toolbox_window_title_changes.js"]
+
+["browser_toolbox_window_title_frame_select.js"]
+
+["browser_toolbox_zoom.js"]
+skip-if = ["os == 'win' && !debug"] # bug 1683265
+
+["browser_toolbox_zoom_popup.js"]
+
+["browser_webextension_descriptor.js"]
+
+["browser_webextension_dropdown.js"]
+skip-if = ["os == 'linux' && !debug"] # Bug 1714106
+# We want these tests to run for mochitest-dt as well, so we include them here:
diff --git a/devtools/client/framework/test/browser_about-devtools-toolbox_load.js b/devtools/client/framework/test/browser_about-devtools-toolbox_load.js
new file mode 100644
index 0000000000..abcb59a5d6
--- /dev/null
+++ b/devtools/client/framework/test/browser_about-devtools-toolbox_load.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test that about:devtools-toolbox shows error an page when opened with invalid
+ * paramters
+ */
+add_task(async function () {
+  // test that error is shown when missing `type` param
+  let { document, tab } = await openAboutToolbox({ invalid: "invalid" });
+  await assertErrorIsShown(document);
+  await removeTab(tab);
+  // test that error is shown if `id` is not provided
+  ({ document, tab } = await openAboutToolbox({ type: "tab" }));
+  await assertErrorIsShown(document);
+  await removeTab(tab);
+  // test that error is shown if `remoteId` refers to an unexisting target
+  ({ document, tab } = await openAboutToolbox({
+    type: "tab",
+    remoteId: "13371337",
+  }));
+  await assertErrorIsShown(document);
+  await removeTab(tab);
+
+  async function assertErrorIsShown(doc) {
+    await waitUntil(() => doc.querySelector(".qa-error-page"));
+    ok(doc.querySelector(".qa-error-page"), "Error page is rendered");
+  }
+});
diff --git a/devtools/client/framework/test/browser_about-devtools-toolbox_reload.js b/devtools/client/framework/test/browser_about-devtools-toolbox_reload.js
new file mode 100644
index 0000000000..f350816b24
--- /dev/null
+++ b/devtools/client/framework/test/browser_about-devtools-toolbox_reload.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test that about:devtools-toolbox is reloaded correctly when reusing the same debugger
+ * client instance.
+ */
+add_task(async function () {
+  const devToolsClient = await createLocalClient();
+
+  info(
+    "Preload a local DevToolsClient as this-firefox in the remoteClientManager"
+  );
+  const {
+    remoteClientManager,
+  } = require("resource://devtools/client/shared/remote-debugging/remote-client-manager.js");
+  remoteClientManager.setClient(
+    "this-firefox",
+    "this-firefox",
+    devToolsClient,
+    {}
+  );
+  registerCleanupFunction(() => {
+    remoteClientManager.removeAllClients();
+  });
+
+  info("Create a dummy target tab");
+  const targetTab = await addTab("data:text/html,somehtml");
+
+  let onToolboxReady = gDevTools.once("toolbox-ready");
+  const { tab } = await openAboutToolbox({
+    id: targetTab.linkedBrowser.browserId,
+    remoteId: "this-firefox-this-firefox",
+    type: "tab",
+  });
+  await onToolboxReady;
+
+  info("Reload about:devtools-toolbox page");
+  onToolboxReady = gDevTools.once("toolbox-ready");
+  tab.linkedBrowser.reload();
+  await onToolboxReady;
+
+  info("Check if about:devtools-toolbox was reloaded correctly");
+  const refreshedDoc = tab.linkedBrowser.contentDocument;
+  ok(
+    refreshedDoc.querySelector(".debug-target-info"),
+    "about:devtools-toolbox header is correctly displayed"
+  );
+
+  const onToolboxDestroy = gDevTools.once("toolbox-destroyed");
+  await removeTab(tab);
+  await onToolboxDestroy;
+  await devToolsClient.close();
+  await removeTab(targetTab);
+});
+
+async function createLocalClient() {
+  const {
+    DevToolsClient,
+  } = require("resource://devtools/client/devtools-client.js");
+  const {
+    DevToolsServer,
+  } = require("resource://devtools/server/devtools-server.js");
+  DevToolsServer.init();
+  DevToolsServer.registerAllActors();
+  DevToolsServer.allowChromeProcess = true;
+
+  const devToolsClient = new DevToolsClient(DevToolsServer.connectPipe());
+  await devToolsClient.connect();
+  return devToolsClient;
+}
diff --git a/devtools/client/framework/test/browser_commands_from_url.js b/devtools/client/framework/test/browser_commands_from_url.js
new file mode 100644
index 0000000000..6d1412005c
--- /dev/null
+++ b/devtools/client/framework/test/browser_commands_from_url.js
@@ -0,0 +1,161 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URI =
+  "data:text/html;charset=utf-8," + "<p>browser_target-from-url.js</p>";
+
+const { DevToolsLoader } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/Loader.sys.mjs"
+);
+const {
+  commandsFromURL,
+} = require("resource://devtools/client/framework/commands-from-url.js");
+
+Services.prefs.setBoolPref("devtools.debugger.remote-enabled", true);
+Services.prefs.setBoolPref("devtools.debugger.prompt-connection", false);
+
+SimpleTest.registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.debugger.remote-enabled");
+  Services.prefs.clearUserPref("devtools.debugger.prompt-connection");
+});
+
+function assertTarget(target, url) {
+  is(target.url, url);
+  is(target.isBrowsingContext, true);
+}
+
+add_task(async function () {
+  const tab = await addTab(TEST_URI);
+  const browser = tab.linkedBrowser;
+  let commands, target;
+
+  info("Test invalid type");
+  try {
+    await commandsFromURL(new URL("https://foo?type=x"));
+    ok(false, "Shouldn't pass");
+  } catch (e) {
+    is(e.message, "commandsFromURL, unsupported type 'x' parameter");
+  }
+
+  info("Test tab");
+  commands = await commandsFromURL(
+    new URL("https://foo?type=tab&id=" + browser.browserId)
+  );
+  // Descriptor's getTarget will only work if the TargetCommand watches for the first top target
+  await commands.targetCommand.startListening();
+
+  // For now, we can't spawn a commands flagged as 'local tab' via URL query params
+  // The only way to has isLocalTab is to create the toolbox via showToolboxForTab
+  // and spawn the command via CommandsFactory.forTab.
+  is(
+    commands.descriptorFront.isLocalTab,
+    false,
+    "Even if we refer to a local tab, isLocalTab is false (for now)"
+  );
+
+  target = await commands.descriptorFront.getTarget();
+
+  assertTarget(target, TEST_URI);
+  await commands.destroy();
+
+  info("Test invalid tab id");
+  try {
+    await commandsFromURL(new URL("https://foo?type=tab&id=10000"));
+    ok(false, "Shouldn't pass");
+  } catch (e) {
+    is(e.message, "commandsFromURL, tab with browserId '10000' doesn't exist");
+  }
+
+  info("Test parent process");
+  commands = await commandsFromURL(new URL("https://foo?type=process"));
+  target = await commands.descriptorFront.getTarget();
+  const topWindow = Services.wm.getMostRecentWindow("navigator:browser");
+  assertTarget(target, topWindow.location.href);
+  await commands.destroy();
+
+  await testRemoteTCP();
+  await testRemoteWebSocket();
+
+  gBrowser.removeCurrentTab();
+});
+
+async function setupDevToolsServer(webSocket) {
+  info("Create a separate loader instance for the DevToolsServer.");
+  const loader = new DevToolsLoader();
+  const { DevToolsServer } = loader.require(
+    "resource://devtools/server/devtools-server.js"
+  );
+  const { SocketListener } = loader.require(
+    "resource://devtools/shared/security/socket.js"
+  );
+
+  DevToolsServer.init();
+  DevToolsServer.registerAllActors();
+  DevToolsServer.allowChromeProcess = true;
+  const socketOptions = {
+    // Pass -1 to automatically choose an available port
+    portOrPath: -1,
+    webSocket,
+  };
+
+  const listener = new SocketListener(DevToolsServer, socketOptions);
+  ok(listener, "Socket listener created");
+  await listener.open();
+  is(DevToolsServer.listeningSockets, 1, "1 listening socket");
+
+  return { DevToolsServer, listener };
+}
+
+function teardownDevToolsServer({ DevToolsServer, listener }) {
+  info("Close the listener socket");
+  listener.close();
+  is(DevToolsServer.listeningSockets, 0, "0 listening sockets");
+
+  info("Destroy the temporary devtools server");
+  DevToolsServer.destroy();
+}
+
+async function testRemoteTCP() {
+  info("Test remote process via TCP Connection");
+
+  const server = await setupDevToolsServer(false);
+
+  const { port } = server.listener;
+  const commands = await commandsFromURL(
+    new URL("https://foo?type=process&host=127.0.0.1&port=" + port)
+  );
+  const target = await commands.descriptorFront.getTarget();
+  const topWindow = Services.wm.getMostRecentWindow("navigator:browser");
+  assertTarget(target, topWindow.location.href);
+
+  const settings = commands.client._transport.connectionSettings;
+  is(settings.host, "127.0.0.1");
+  is(parseInt(settings.port, 10), port);
+  is(settings.webSocket, false);
+
+  await commands.destroy();
+
+  teardownDevToolsServer(server);
+}
+
+async function testRemoteWebSocket() {
+  info("Test remote process via WebSocket Connection");
+
+  const server = await setupDevToolsServer(true);
+
+  const { port } = server.listener;
+  const commands = await commandsFromURL(
+    new URL("https://foo?type=process&host=127.0.0.1&port=" + port + "&ws=true")
+  );
+  const target = await commands.descriptorFront.getTarget();
+  const topWindow = Services.wm.getMostRecentWindow("navigator:browser");
+  assertTarget(target, topWindow.location.href);
+
+  const settings = commands.client._transport.connectionSettings;
+  is(settings.host, "127.0.0.1");
+  is(parseInt(settings.port, 10), port);
+  is(settings.webSocket, true);
+  await commands.destroy();
+
+  teardownDevToolsServer(server);
+}
diff --git a/devtools/client/framework/test/browser_devtools_api_destroy.js b/devtools/client/framework/test/browser_devtools_api_destroy.js
new file mode 100644
index 0000000000..736455df65
--- /dev/null
+++ b/devtools/client/framework/test/browser_devtools_api_destroy.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests devtools API
+
+function test() {
+  addTab("about:blank").then(runTests);
+}
+
+async function runTests(aTab) {
+  const toolDefinition = {
+    id: "testTool",
+    visibilityswitch: "devtools.testTool.enabled",
+    isToolSupported: () => true,
+    url: "about:blank",
+    label: "someLabel",
+    build(iframeWindow, toolbox) {
+      return new Promise(resolve => {
+        executeSoon(() => {
+          resolve({
+            target: toolbox.target,
+            toolbox,
+            isReady: true,
+            destroy() {},
+          });
+        });
+      });
+    },
+  };
+
+  gDevTools.registerTool(toolDefinition);
+
+  const collectedEvents = [];
+
+  gDevTools
+    .showToolboxForTab(aTab, { toolId: toolDefinition.id })
+    .then(function (toolbox) {
+      const panel = toolbox.getPanel(toolDefinition.id);
+      ok(panel, "Tool open");
+
+      gDevTools.once("toolbox-destroy", (toolbox, iframe) => {
+        collectedEvents.push("toolbox-destroy");
+      });
+
+      gDevTools.once(toolDefinition.id + "-destroy", (toolbox, iframe) => {
+        collectedEvents.push("gDevTools-" + toolDefinition.id + "-destroy");
+      });
+
+      toolbox.once("destroy", () => {
+        collectedEvents.push("destroy");
+      });
+
+      toolbox.once(toolDefinition.id + "-destroy", () => {
+        collectedEvents.push("toolbox-" + toolDefinition.id + "-destroy");
+      });
+
+      toolbox.destroy().then(function () {
+        is(
+          collectedEvents.join(":"),
+          "toolbox-destroy:destroy:gDevTools-testTool-destroy:toolbox-testTool-destroy",
+          "Found the right amount of collected events."
+        );
+
+        gDevTools.unregisterTool(toolDefinition.id);
+        gBrowser.removeCurrentTab();
+
+        executeSoon(function () {
+          finish();
+        });
+      });
+    });
+}
diff --git a/devtools/client/framework/test/browser_dynamic_tool_enabling.js b/devtools/client/framework/test/browser_dynamic_tool_enabling.js
new file mode 100644
index 0000000000..56313607cf
--- /dev/null
+++ b/devtools/client/framework/test/browser_dynamic_tool_enabling.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that toggling prefs immediately (de)activates the relevant menuitem
+
+var gItemsToTest = {
+  menu_browserToolbox: [
+    "devtools.chrome.enabled",
+    "devtools.debugger.remote-enabled",
+  ],
+};
+
+function expectedAttributeValueFromPrefs(prefs) {
+  return prefs.every(pref => Services.prefs.getBoolPref(pref)) ? "" : "true";
+}
+
+function checkItem(el, prefs) {
+  const expectedValue = expectedAttributeValueFromPrefs(prefs);
+  is(
+    el.getAttribute("disabled"),
+    expectedValue,
+    "disabled attribute should match current pref state"
+  );
+  is(
+    el.getAttribute("hidden"),
+    expectedValue,
+    "hidden attribute should match current pref state"
+  );
+}
+
+function test() {
+  for (const k in gItemsToTest) {
+    const el = document.getElementById(k);
+    const prefs = gItemsToTest[k];
+    checkItem(el, prefs);
+    for (const pref of prefs) {
+      Services.prefs.setBoolPref(pref, !Services.prefs.getBoolPref(pref));
+      checkItem(el, prefs);
+      Services.prefs.setBoolPref(pref, !Services.prefs.getBoolPref(pref));
+      checkItem(el, prefs);
+    }
+  }
+  finish();
+}
diff --git a/devtools/client/framework/test/browser_front_parentFront.js b/devtools/client/framework/test/browser_front_parentFront.js
new file mode 100644
index 0000000000..106632dd45
--- /dev/null
+++ b/devtools/client/framework/test/browser_front_parentFront.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the Front's parentFront attribute returns the correct parent front.
+
+const TEST_URL = `data:text/html;charset=utf-8,<div id="test"></div>`;
+
+add_task(async function () {
+  const tab = await addTab(TEST_URL);
+  const target = await createAndAttachTargetForTab(tab);
+
+  const inspectorFront = await target.getFront("inspector");
+  const walker = inspectorFront.walker;
+  const pageStyleFront = await inspectorFront.getPageStyle();
+  const nodeFront = await walker.querySelector(walker.rootNode, "#test");
+
+  is(
+    inspectorFront.parentFront,
+    target,
+    "Got the correct parentFront from the InspectorFront."
+  );
+  is(
+    walker.parentFront,
+    inspectorFront,
+    "Got the correct parentFront from the WalkerFront."
+  );
+  is(
+    pageStyleFront.parentFront,
+    inspectorFront,
+    "Got the correct parentFront from the PageStyleFront."
+  );
+  is(
+    nodeFront.parentFront,
+    walker,
+    "Got the correct parentFront from the NodeFront."
+  );
+});
diff --git a/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js b/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js
new file mode 100644
index 0000000000..65daa4d78d
--- /dev/null
+++ b/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that network requests originating from the toolbox don't get recorded in
+// the network panel.
+
+add_task(async function () {
+  let tab = await addTab(URL_ROOT + "doc_viewsource.html");
+  let toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "styleeditor",
+  });
+  let panel = toolbox.getPanel("styleeditor");
+
+  is(panel.UI.editors.length, 1, "correct number of editors opened");
+
+  const monitor = await toolbox.selectTool("netmonitor");
+  const { store } = monitor.panelWin;
+
+  is(
+    store.getState().requests.requests.length,
+    0,
+    "No network requests appear in the network panel"
+  );
+
+  await toolbox.destroy();
+  tab = toolbox = panel = null;
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_keybindings_01.js b/devtools/client/framework/test/browser_keybindings_01.js
new file mode 100644
index 0000000000..968c3a3d3d
--- /dev/null
+++ b/devtools/client/framework/test/browser_keybindings_01.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(3);
+
+// Tests that the keybindings for opening and closing the inspector work as expected
+// Can probably make this a shared test that tests all of the tools global keybindings
+const TEST_URL =
+  "data:text/html,<html><head><title>Test for the " +
+  "highlighter keybindings</title></head><body>" +
+  "<h1>Keybindings!</h1></body></html>";
+
+const {
+  gDevToolsBrowser,
+} = require("resource://devtools/client/framework/devtools-browser.js");
+
+const isMac = AppConstants.platform == "macosx";
+
+const allKeys = [];
+function buildDevtoolsKeysetMap(keyset) {
+  // Fetches all the keyboard shortcuts which were defined by lazyGetter 'KeyShortcuts' in
+  // devtools-startup.js and added to the DOM by 'hookKeyShortcuts'
+  [...keyset.querySelectorAll("key")].forEach(key => {
+    if (!key.getAttribute("key")) {
+      return;
+    }
+
+    const modifiers = key.getAttribute("modifiers");
+    allKeys.push({
+      toolId: key.id.split("_")[1],
+      key: key.getAttribute("key"),
+      modifiers,
+      modifierOpt: {
+        shiftKey: modifiers.match("shift"),
+        ctrlKey: modifiers.match("ctrl"),
+        altKey: modifiers.match("alt"),
+        metaKey: modifiers.match("meta"),
+        accelKey: modifiers.match("accel"),
+      },
+      synthesizeKey() {
+        EventUtils.synthesizeKey(this.key, this.modifierOpt);
+      },
+    });
+  });
+}
+
+function setupKeyBindingsTest() {
+  for (const win of gDevToolsBrowser._trackedBrowserWindows) {
+    buildDevtoolsKeysetMap(win.document.getElementById("devtoolsKeyset"));
+  }
+}
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  await new Promise(done => waitForFocus(done));
+
+  setupKeyBindingsTest();
+
+  const tests = [
+    { id: "inspector", toolId: "inspector" },
+    { id: "webconsole", toolId: "webconsole" },
+    { id: "netmonitor", toolId: "netmonitor" },
+    { id: "jsdebugger", toolId: "jsdebugger" },
+  ];
+
+  // There are two possible keyboard shortcuts to open the inspector on macOS
+  if (isMac) {
+    tests.push({ id: "inspectorMac", toolId: "inspector" });
+  }
+
+  // Toolbox reference will be set by first tool to open.
+  let toolbox;
+
+  for (const test of tests) {
+    const onToolboxReady = gDevTools.once("toolbox-ready");
+    const onSelectTool = gDevTools.once("select-tool-command");
+
+    info(`Run the keyboard shortcut for ${test.id}`);
+    const key = allKeys.filter(({ toolId }) => toolId === test.id)[0];
+    key.synthesizeKey();
+
+    if (!toolbox) {
+      toolbox = await onToolboxReady;
+    }
+
+    if (test.toolId === "inspector") {
+      const onPickerStart = toolbox.nodePicker.once("picker-started");
+      await onPickerStart;
+      ok(true, "picker-started event received, highlighter started");
+
+      info(
+        `Run the keyboard shortcut for ${test.id} again to stop the node picker`
+      );
+      const onPickerStop = toolbox.nodePicker.once("picker-stopped");
+      key.synthesizeKey();
+      await onPickerStop;
+      ok(true, "picker-stopped event received, highlighter stopped");
+    }
+
+    await onSelectTool;
+    is(toolbox.currentToolId, test.toolId, `${test.toolId} should be selected`);
+  }
+
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_keybindings_02.js b/devtools/client/framework/test/browser_keybindings_02.js
new file mode 100644
index 0000000000..3be8309edf
--- /dev/null
+++ b/devtools/client/framework/test/browser_keybindings_02.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the toolbox keybindings still work after the host is changed.
+
+const URL = "data:text/html;charset=utf8,test page";
+
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/toolbox.properties"
+);
+
+function getZoomValue() {
+  return parseFloat(Services.prefs.getCharPref("devtools.toolbox.zoomValue"));
+}
+
+add_task(async function () {
+  info("Create a test tab and open the toolbox");
+  const tab = await addTab(URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, "webconsole");
+
+  const { RIGHT, BOTTOM } = Toolbox.HostType;
+  for (const type of [RIGHT, BOTTOM, RIGHT]) {
+    info("Switch to host type " + type);
+    await toolbox.switchHost(type);
+
+    info("Try to use the toolbox shortcuts");
+    await checkKeyBindings(toolbox);
+  }
+
+  Services.prefs.clearUserPref("devtools.toolbox.zoomValue");
+  Services.prefs.setCharPref("devtools.toolbox.host", BOTTOM);
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+function zoomWithKey(toolbox, key) {
+  const shortcut = L10N.getStr(key);
+  if (!shortcut) {
+    info("Key was empty, skipping zoomWithKey");
+    return;
+  }
+  info("Zooming with key: " + key);
+  const currentZoom = getZoomValue();
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+  isnot(
+    getZoomValue(),
+    currentZoom,
+    "The zoom level was changed in the toolbox"
+  );
+}
+
+function checkKeyBindings(toolbox) {
+  zoomWithKey(toolbox, "toolbox.zoomIn.key");
+  zoomWithKey(toolbox, "toolbox.zoomIn2.key");
+
+  zoomWithKey(toolbox, "toolbox.zoomReset.key");
+
+  zoomWithKey(toolbox, "toolbox.zoomOut.key");
+  zoomWithKey(toolbox, "toolbox.zoomOut2.key");
+
+  zoomWithKey(toolbox, "toolbox.zoomReset2.key");
+}
diff --git a/devtools/client/framework/test/browser_keybindings_03.js b/devtools/client/framework/test/browser_keybindings_03.js
new file mode 100644
index 0000000000..71ce51c1e0
--- /dev/null
+++ b/devtools/client/framework/test/browser_keybindings_03.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the toolbox 'switch to previous host' feature works.
+// Pressing ctrl/cmd+shift+d should switch to the last used host.
+
+const URL = "data:text/html;charset=utf8,test page for toolbox switching";
+
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/toolbox.properties"
+);
+
+add_task(async function () {
+  info("Create a test tab and open the toolbox");
+  const tab = await addTab(URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, "webconsole");
+
+  const shortcut = L10N.getStr("toolbox.toggleHost.key");
+
+  const { RIGHT, BOTTOM, WINDOW } = Toolbox.HostType;
+  checkHostType(toolbox, BOTTOM, RIGHT);
+
+  info("Switching from bottom to right");
+  let onHostChanged = toolbox.once("host-changed");
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+  await onHostChanged;
+  checkHostType(toolbox, RIGHT, BOTTOM);
+
+  info("Switching from right to bottom");
+  onHostChanged = toolbox.once("host-changed");
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+  await onHostChanged;
+  checkHostType(toolbox, BOTTOM, RIGHT);
+
+  info("Switching to window");
+  await toolbox.switchHost(WINDOW);
+  checkHostType(toolbox, WINDOW, BOTTOM);
+
+  info("Switching from window to bottom");
+  onHostChanged = toolbox.once("host-changed");
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+  await onHostChanged;
+  checkHostType(toolbox, BOTTOM, WINDOW);
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_menu_api.js b/devtools/client/framework/test/browser_menu_api.js
new file mode 100644
index 0000000000..daa69cf8dd
--- /dev/null
+++ b/devtools/client/framework/test/browser_menu_api.js
@@ -0,0 +1,239 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Menu API works
+
+const URL = "data:text/html;charset=utf8,test page for menu api";
+const Menu = require("resource://devtools/client/framework/menu.js");
+const MenuItem = require("resource://devtools/client/framework/menu-item.js");
+
+add_task(async function () {
+  info("Create a test tab and open the toolbox");
+  const tab = await addTab(URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "webconsole",
+  });
+
+  // This test will involve localized strings, make sure the necessary FTL file is
+  // available in the toolbox top window.
+  toolbox.topWindow.MozXULElement.insertFTLIfNeeded(
+    "toolkit/global/textActions.ftl"
+  );
+
+  loadFTL(toolbox, "toolkit/global/textActions.ftl");
+
+  await testMenuItems();
+  await testMenuPopup(toolbox);
+  await testSubmenu(toolbox);
+});
+
+function testMenuItems() {
+  const menu = new Menu();
+  const menuItem1 = new MenuItem();
+  const menuItem2 = new MenuItem();
+
+  menu.append(menuItem1);
+  menu.append(menuItem2);
+
+  is(menu.items.length, 2, "Correct number of 'items'");
+  is(menu.items[0], menuItem1, "Correct reference to MenuItem");
+  is(menu.items[1], menuItem2, "Correct reference to MenuItem");
+}
+
+async function testMenuPopup(toolbox) {
+  let clickFired = false;
+
+  const menu = new Menu({
+    id: "menu-popup",
+  });
+  menu.append(new MenuItem({ type: "separator" }));
+
+  const MENU_ITEMS = [
+    new MenuItem({
+      id: "menu-item-1",
+      label: "Normal Item",
+      click: () => {
+        info("Click callback has fired for menu item");
+        clickFired = true;
+      },
+    }),
+    new MenuItem({
+      label: "Checked Item",
+      type: "checkbox",
+      checked: true,
+    }),
+    new MenuItem({
+      label: "Radio Item",
+      type: "radio",
+    }),
+    new MenuItem({
+      label: "Disabled Item",
+      disabled: true,
+    }),
+    new MenuItem({
+      l10nID: "text-action-undo",
+    }),
+  ];
+
+  for (const item of MENU_ITEMS) {
+    menu.append(item);
+  }
+
+  // Append an invisible MenuItem, which shouldn't show up in the DOM
+  menu.append(
+    new MenuItem({
+      label: "Invisible",
+      visible: false,
+    })
+  );
+
+  menu.popup(0, 0, toolbox.doc);
+  const popup = toolbox.topDoc.querySelector("#menu-popup");
+  ok(popup, "A popup is in the DOM");
+
+  const menuSeparators = toolbox.topDoc.querySelectorAll(
+    "#menu-popup > menuseparator"
+  );
+  is(menuSeparators.length, 1, "A separator is in the menu");
+
+  const menuItems = toolbox.topDoc.querySelectorAll("#menu-popup > menuitem");
+  is(menuItems.length, MENU_ITEMS.length, "Correct number of menuitems");
+
+  is(menuItems[0].id, MENU_ITEMS[0].id, "Correct id for menuitem");
+  is(menuItems[0].getAttribute("label"), MENU_ITEMS[0].label, "Correct label");
+
+  is(menuItems[1].getAttribute("label"), MENU_ITEMS[1].label, "Correct label");
+  is(menuItems[1].getAttribute("type"), "checkbox", "Correct type attr");
+  is(menuItems[1].getAttribute("checked"), "true", "Has checked attr");
+
+  is(menuItems[2].getAttribute("label"), MENU_ITEMS[2].label, "Correct label");
+  is(menuItems[2].getAttribute("type"), "radio", "Correct type attr");
+  ok(!menuItems[2].hasAttribute("checked"), "Doesn't have checked attr");
+
+  is(menuItems[3].getAttribute("label"), MENU_ITEMS[3].label, "Correct label");
+  is(menuItems[3].getAttribute("disabled"), "true", "disabled attr menuitem");
+
+  is(
+    menuItems[4].getAttribute("data-l10n-id"),
+    MENU_ITEMS[4].l10nID,
+    "Correct localization attribute"
+  );
+
+  await once(menu, "open");
+  const closed = once(menu, "close");
+  popup.activateItem(menuItems[0]);
+  await closed;
+  ok(clickFired, "Click has fired");
+
+  ok(
+    !toolbox.topDoc.querySelector("#menu-popup"),
+    "Popup removed from the DOM"
+  );
+}
+
+async function testSubmenu(toolbox) {
+  let clickFired = false;
+  const menu = new Menu({
+    id: "menu-popup",
+  });
+  const submenu = new Menu({
+    id: "submenu-popup",
+  });
+  submenu.append(
+    new MenuItem({
+      label: "Submenu item",
+      click: () => {
+        info("Click callback has fired for submenu item");
+        clickFired = true;
+      },
+    })
+  );
+  menu.append(
+    new MenuItem({
+      l10nID: "text-action-copy",
+      submenu,
+    })
+  );
+  menu.append(
+    new MenuItem({
+      label: "Submenu parent with attributes",
+      id: "submenu-parent-with-attrs",
+      submenu,
+      accesskey: "A",
+      disabled: true,
+    })
+  );
+
+  menu.popup(0, 0, toolbox.doc);
+  const popup = toolbox.topDoc.querySelector("#menu-popup");
+  ok(popup, "A popup is in the DOM");
+  is(
+    toolbox.topDoc.querySelectorAll("#menu-popup > menuitem").length,
+    0,
+    "No menuitem children"
+  );
+
+  const menus = toolbox.topDoc.querySelectorAll("#menu-popup > menu");
+  is(menus.length, 2, "Correct number of menus");
+  ok(
+    !menus[0].hasAttribute("label"),
+    "No label: should be set by localization"
+  );
+  ok(!menus[0].hasAttribute("disabled"), "Correct disabled state");
+  is(
+    menus[0].getAttribute("data-l10n-id"),
+    "text-action-copy",
+    "Correct localization attribute"
+  );
+
+  is(menus[1].getAttribute("accesskey"), "A", "Correct accesskey");
+  ok(menus[1].hasAttribute("disabled"), "Correct disabled state");
+  is(menus[1].id, "submenu-parent-with-attrs", "Correct id");
+
+  const subMenuItems = menus[0].querySelectorAll("menupopup > menuitem");
+  is(subMenuItems.length, 1, "Correct number of submenu items");
+  is(subMenuItems[0].getAttribute("label"), "Submenu item", "Correct label");
+
+  await once(menu, "open");
+  const closed = once(menu, "close");
+
+  // The following section tests keyboard navigation of the context menus.
+  // This doesn't work on macOS when native context menus are enabled.
+  if (Services.prefs.getBoolPref("widget.macos.native-context-menus", false)) {
+    info("Using openMenu semantics because of macOS native context menus.");
+    let shown = once(menus[0], "popupshown");
+    menus[0].openMenu(true);
+    await shown;
+
+    const hidden = once(menus[0], "popuphidden");
+    menus[0].openMenu(false);
+    await hidden;
+
+    shown = once(menus[0], "popupshown");
+    menus[0].openMenu(true);
+    await shown;
+  } else {
+    info("Using keyboard navigation to open, close, and reopen the submenu");
+    let shown = once(menus[0], "popupshown");
+    EventUtils.synthesizeKey("KEY_ArrowDown");
+    EventUtils.synthesizeKey("KEY_ArrowRight");
+    await shown;
+
+    const hidden = once(menus[0], "popuphidden");
+    EventUtils.synthesizeKey("KEY_ArrowLeft");
+    await hidden;
+
+    shown = once(menus[0], "popupshown");
+    EventUtils.synthesizeKey("KEY_ArrowRight");
+    await shown;
+  }
+
+  info("Clicking the submenu item");
+  const subMenu = subMenuItems[0].closest("menupopup");
+  subMenu.activateItem(subMenuItems[0]);
+
+  await closed;
+  ok(clickFired, "Click has fired");
+}
diff --git a/devtools/client/framework/test/browser_new_activation_workflow.js b/devtools/client/framework/test/browser_new_activation_workflow.js
new file mode 100644
index 0000000000..583e6d7ca8
--- /dev/null
+++ b/devtools/client/framework/test/browser_new_activation_workflow.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests devtools API
+
+var toolbox;
+
+function test() {
+  addTab("about:blank").then(async function () {
+    loadWebConsole().then(function () {
+      console.log("loaded");
+    });
+  });
+}
+
+function loadWebConsole() {
+  ok(gDevTools, "gDevTools exists");
+  const tab = gBrowser.selectedTab;
+  return gDevTools
+    .showToolboxForTab(tab, { toolId: "webconsole" })
+    .then(function (aToolbox) {
+      toolbox = aToolbox;
+      checkToolLoading();
+    });
+}
+
+function checkToolLoading() {
+  is(toolbox.currentToolId, "webconsole", "The web console is selected");
+  ok(toolbox.isReady, "toolbox is ready");
+
+  selectAndCheckById("jsdebugger").then(function () {
+    selectAndCheckById("styleeditor").then(function () {
+      testToggle();
+    });
+  });
+}
+
+function selectAndCheckById(id) {
+  return toolbox.selectTool(id).then(function () {
+    const tab = toolbox.doc.getElementById("toolbox-tab-" + id);
+    is(
+      tab.classList.contains("selected"),
+      true,
+      "The " + id + " tab is selected"
+    );
+    is(
+      tab.getAttribute("aria-pressed"),
+      "true",
+      "The " + id + " tab is pressed"
+    );
+  });
+}
+
+function testToggle() {
+  toolbox.once("destroyed", async () => {
+    // Cannot reuse a target after it's destroyed.
+    gDevTools
+      .showToolboxForTab(gBrowser.selectedTab, { toolId: "styleeditor" })
+      .then(function (aToolbox) {
+        toolbox = aToolbox;
+        is(
+          toolbox.currentToolId,
+          "styleeditor",
+          "The style editor is selected"
+        );
+        finishUp();
+      });
+  });
+
+  toolbox.destroy();
+}
+
+function finishUp() {
+  toolbox.destroy().then(function () {
+    toolbox = null;
+    gBrowser.removeCurrentTab();
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_source_map-01.js b/devtools/client/framework/test/browser_source_map-01.js
new file mode 100644
index 0000000000..373eaebf77
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-01.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests the SourceMapService updates generated sources when source maps
+ * are subsequently found. Also checks when no column is provided, and
+ * when tagging an already source mapped location initially.
+ */
+
+// There are shutdown issues for which multiple rejections are left uncaught.
+// See bug 1018184 for resolving these issues.
+const { PromiseTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/PromiseTestUtils.sys.mjs"
+);
+PromiseTestUtils.allowMatchingRejectionsGlobally(/this\.worker is null/);
+PromiseTestUtils.allowMatchingRejectionsGlobally(/Component not initialized/);
+
+// Empty page
+const PAGE_URL = `${URL_ROOT_SSL}doc_empty-tab-01.html`;
+const JS_URL = `${URL_ROOT_SSL}code_binary_search.js`;
+const COFFEE_URL = `${URL_ROOT_SSL}code_binary_search.coffee`;
+
+add_task(async function () {
+  const toolbox = await openNewTabAndToolbox(PAGE_URL, "jsdebugger");
+  const service = toolbox.sourceMapURLService;
+
+  // Inject JS script
+  const sourceSeen = waitForSourceLoad(toolbox, JS_URL);
+  await createScript(JS_URL);
+  await sourceSeen;
+
+  const loc1 = { url: JS_URL, line: 6 };
+  const newLoc1 = await new Promise(r =>
+    service.subscribeByURL(loc1.url, loc1.line, 4, r)
+  );
+  checkLoc1(loc1, newLoc1);
+
+  const loc2 = { url: JS_URL, line: 8, column: 3 };
+  const newLoc2 = await new Promise(r =>
+    service.subscribeByURL(loc2.url, loc2.line, loc2.column, r)
+  );
+  checkLoc2(loc2, newLoc2);
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  finish();
+});
+
+function checkLoc1(oldLoc, newLoc) {
+  is(oldLoc.line, 6, "Correct line for JS:6");
+  is(oldLoc.column, undefined, "Correct column for JS:6");
+  is(oldLoc.url, JS_URL, "Correct url for JS:6");
+  is(newLoc.line, 4, "Correct line for JS:6 -> COFFEE");
+  is(
+    newLoc.column,
+    2,
+    "Correct column for JS:6 -> COFFEE -- handles falsy column entries"
+  );
+  is(newLoc.url, COFFEE_URL, "Correct url for JS:6 -> COFFEE");
+}
+
+function checkLoc2(oldLoc, newLoc) {
+  is(oldLoc.line, 8, "Correct line for JS:8:3");
+  is(oldLoc.column, 3, "Correct column for JS:8:3");
+  is(oldLoc.url, JS_URL, "Correct url for JS:8:3");
+  is(newLoc.line, 6, "Correct line for JS:8:3 -> COFFEE");
+  is(newLoc.column, 10, "Correct column for JS:8:3 -> COFFEE");
+  is(newLoc.url, COFFEE_URL, "Correct url for JS:8:3 -> COFFEE");
+}
diff --git a/devtools/client/framework/test/browser_source_map-absolute.js b/devtools/client/framework/test/browser_source_map-absolute.js
new file mode 100644
index 0000000000..206cbde944
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-absolute.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that an absolute sourceRoot works.
+
+"use strict";
+
+// There are shutdown issues for which multiple rejections are left uncaught.
+// See bug 1018184 for resolving these issues.
+const { PromiseTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/PromiseTestUtils.sys.mjs"
+);
+PromiseTestUtils.allowMatchingRejectionsGlobally(/this\.worker is null/);
+
+// Empty page
+const PAGE_URL = `${URL_ROOT_SSL}doc_empty-tab-01.html`;
+const JS_URL = `${URL_ROOT_SSL}code_binary_search_absolute.js`;
+const ORIGINAL_URL = `${URL_ROOT_SSL}code_binary_search.coffee`;
+
+add_task(async function () {
+  const toolbox = await openNewTabAndToolbox(PAGE_URL, "jsdebugger");
+  const service = toolbox.sourceMapURLService;
+
+  // Inject JS script
+  const sourceSeen = waitForSourceLoad(toolbox, JS_URL);
+  await createScript(JS_URL);
+  await sourceSeen;
+
+  info(`checking original location for ${JS_URL}:6`);
+  const newLoc = await new Promise(r =>
+    service.subscribeByURL(JS_URL, 6, 4, r)
+  );
+
+  is(newLoc.url, ORIGINAL_URL, "check mapped URL");
+  is(newLoc.line, 4, "check mapped line number");
+});
diff --git a/devtools/client/framework/test/browser_source_map-cross-domain.js b/devtools/client/framework/test/browser_source_map-cross-domain.js
new file mode 100644
index 0000000000..77fb381260
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-cross-domain.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that the source map service can fetch a source map from a
+// different domain.
+
+"use strict";
+
+const JS_URL = URL_ROOT + "code_bundle_cross_domain.js";
+
+const PAGE_URL = `data:text/html,
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Empty test page to test cross domain source map</title>
+  </head>
+
+  <body>
+    <script src="${JS_URL}"></script>
+  </body>
+
+</html>`;
+
+const ORIGINAL_URL = "webpack:///code_cross_domain.js";
+
+const GENERATED_LINE = 82;
+const ORIGINAL_LINE = 12;
+
+add_task(async function () {
+  const toolbox = await openNewTabAndToolbox(PAGE_URL, "webconsole");
+  const service = toolbox.sourceMapURLService;
+
+  info(`checking original location for ${JS_URL}:${GENERATED_LINE}`);
+  const newLoc = await new Promise(r =>
+    service.subscribeByURL(JS_URL, GENERATED_LINE, undefined, r)
+  );
+  is(newLoc.url, ORIGINAL_URL, "check mapped URL");
+  is(newLoc.line, ORIGINAL_LINE, "check mapped line number");
+});
diff --git a/devtools/client/framework/test/browser_source_map-init.js b/devtools/client/framework/test/browser_source_map-init.js
new file mode 100644
index 0000000000..60a3e4672a
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-init.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that the source map service initializes properly when source
+// actors have already been created.  Regression test for bug 1391768.
+
+"use strict";
+
+const JS_URL = URL_ROOT_SSL + "code_bundle_no_race.js";
+
+const PAGE_URL = `data:text/html,
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Empty test page to test race case</title>
+  </head>
+
+  <body>
+    <script src="${JS_URL}"></script>
+  </body>
+
+</html>`;
+
+const ORIGINAL_URL = "webpack:///code_no_race.js";
+
+const GENERATED_LINE = 84;
+const ORIGINAL_LINE = 11;
+
+add_task(async function () {
+  // Opening the debugger causes the source actors to be created.
+  const toolbox = await openNewTabAndToolbox(PAGE_URL, "jsdebugger");
+  // In bug 1391768, when the sourceMapURLService was created, it was
+  // ignoring any source actors that already existed, leading to
+  // source-mapping failures for those.
+  const service = toolbox.sourceMapURLService;
+
+  info(`checking original location for ${JS_URL}:${GENERATED_LINE}`);
+  const newLoc = await new Promise(r =>
+    service.subscribeByURL(JS_URL, GENERATED_LINE, undefined, r)
+  );
+  is(newLoc.url, ORIGINAL_URL, "check mapped URL");
+  is(newLoc.line, ORIGINAL_LINE, "check mapped line number");
+
+  // See Bug 1637793 and Bug 1621337.
+  // Ideally the debugger should only resolve when the worker targets have been
+  // retrieved, which should be fixed by Bug 1621337 or a followup.
+  info("Wait for all pending requests to settle on the DevToolsClient");
+  await toolbox.commands.client.waitForRequestsToSettle();
+});
diff --git a/devtools/client/framework/test/browser_source_map-inline.js b/devtools/client/framework/test/browser_source_map-inline.js
new file mode 100644
index 0000000000..4e5f8c7fff
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-inline.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that inline source maps work.
+
+"use strict";
+
+// There are shutdown issues for which multiple rejections are left uncaught.
+// See bug 1018184 for resolving these issues.
+const { PromiseTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/PromiseTestUtils.sys.mjs"
+);
+PromiseTestUtils.allowMatchingRejectionsGlobally(/this\.worker is null/);
+PromiseTestUtils.allowMatchingRejectionsGlobally(/Component not initialized/);
+
+const TEST_ROOT = "https://example.com/browser/devtools/client/framework/test/";
+// Empty page
+const PAGE_URL = `${TEST_ROOT}doc_empty-tab-01.html`;
+const JS_URL = `${TEST_ROOT}code_inline_bundle.js`;
+const ORIGINAL_URL = "webpack:///code_inline_original.js";
+
+add_task(async function () {
+  const toolbox = await openNewTabAndToolbox(PAGE_URL, "jsdebugger");
+  const service = toolbox.sourceMapURLService;
+
+  // Inject JS script
+  const sourceSeen = waitForSourceLoad(toolbox, JS_URL);
+  await createScript(JS_URL);
+  await sourceSeen;
+
+  info(`checking original location for ${JS_URL}:84`);
+  const newLoc = await new Promise(r =>
+    service.subscribeByURL(JS_URL, 84, undefined, r)
+  );
+
+  is(newLoc.url, ORIGINAL_URL, "check mapped URL");
+  is(newLoc.line, 11, "check mapped line number");
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  finish();
+});
diff --git a/devtools/client/framework/test/browser_source_map-late-script.js b/devtools/client/framework/test/browser_source_map-late-script.js
new file mode 100644
index 0000000000..f11d530db1
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-late-script.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that you can subscribe to notifications on a source before it has loaded.
+
+"use strict";
+
+const PAGE_URL = `${URL_ROOT_SSL}doc_empty-tab-01.html`;
+const JS_URL = URL_ROOT_SSL + "code_bundle_late_script.js";
+
+const ORIGINAL_URL = "webpack:///code_late_script.js";
+
+const GENERATED_LINE = 107;
+const ORIGINAL_LINE = 11;
+
+add_task(async function () {
+  // Start with the empty page, then navigate, so that we can properly
+  // listen for new sources arriving.
+  const toolbox = await openNewTabAndToolbox(PAGE_URL, "webconsole");
+  const service = toolbox.sourceMapURLService;
+
+  const scriptMapped = new Promise(resolve => {
+    let count = 0;
+    service.subscribeByURL(
+      JS_URL,
+      GENERATED_LINE,
+      undefined,
+      originalLocation => {
+        if (count === 0) {
+          resolve(originalLocation);
+        }
+        count += 1;
+
+        return () => {};
+      }
+    );
+  });
+
+  // Inject JS script
+  const sourceSeen = waitForSourceLoad(toolbox, JS_URL);
+  await createScript(JS_URL);
+  await sourceSeen;
+
+  // Ensure that the URL service fired an event about the location loading.
+  const { url, line } = await scriptMapped;
+  is(url, ORIGINAL_URL, "check mapped URL");
+  is(line, ORIGINAL_LINE, "check mapped line number");
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  finish();
+});
diff --git a/devtools/client/framework/test/browser_source_map-no-race.js b/devtools/client/framework/test/browser_source_map-no-race.js
new file mode 100644
index 0000000000..23751f7bc8
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-no-race.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that the source map service doesn't race against source
+// reporting.
+
+"use strict";
+
+const JS_URL = URL_ROOT + "code_bundle_no_race.js";
+
+const PAGE_URL = `data:text/html,
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Empty test page to test race case</title>
+  </head>
+
+  <body>
+    <script src="${JS_URL}"></script>
+  </body>
+
+</html>`;
+
+const ORIGINAL_URL = "webpack:///code_no_race.js";
+
+const GENERATED_LINE = 84;
+const ORIGINAL_LINE = 11;
+
+add_task(async function () {
+  // Start with the empty page, then navigate, so that we can properly
+  // listen for new sources arriving.
+  const toolbox = await openNewTabAndToolbox(PAGE_URL, "webconsole");
+  const service = toolbox.sourceMapURLService;
+
+  info(`checking original location for ${JS_URL}:${GENERATED_LINE}`);
+  const newLoc = await new Promise(r =>
+    service.subscribeByURL(JS_URL, GENERATED_LINE, undefined, r)
+  );
+  is(newLoc.url, ORIGINAL_URL, "check mapped URL");
+  is(newLoc.line, ORIGINAL_LINE, "check mapped line number");
+});
diff --git a/devtools/client/framework/test/browser_source_map-pub-sub.js b/devtools/client/framework/test/browser_source_map-pub-sub.js
new file mode 100644
index 0000000000..c7f69c91c7
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-pub-sub.js
@@ -0,0 +1,97 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that the source map service subscribe mechanism work as expected.
+
+"use strict";
+
+const JS_URL = URL_ROOT + "code_bundle_no_race.js";
+
+const PAGE_URL = `data:text/html,
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+  </head>
+  <body>
+    <script src="${JS_URL}"></script>
+  </body>
+</html>`;
+
+const ORIGINAL_URL = "webpack:///code_no_race.js";
+
+const SOURCE_MAP_PREF = "devtools.source-map.client-service.enabled";
+
+const GENERATED_LINE = 84;
+const ORIGINAL_LINE = 11;
+
+add_task(async function () {
+  // Push a pref env so any changes will be reset at the end of the test.
+  await SpecialPowers.pushPrefEnv({});
+
+  // Opening the debugger causes the source actors to be created.
+  const toolbox = await openNewTabAndToolbox(PAGE_URL, "jsdebugger");
+  const service = toolbox.sourceMapURLService;
+
+  const cbCalls = [];
+  const cb = originalLocation => cbCalls.push(originalLocation);
+  const expectedArg = { url: ORIGINAL_URL, line: ORIGINAL_LINE, column: 0 };
+
+  // Wait for the sources to fully populate so that waitForSubscriptionsToSettle
+  // can be guaranteed that all actions have been queued.
+  await service._ensureAllSourcesPopulated();
+
+  const unsubscribe1 = service.subscribeByURL(JS_URL, GENERATED_LINE, 1, cb);
+
+  // Wait for the query to finish and populate so that all of the later
+  // logic with this position will run synchronously, and the subscribe has run.
+  for (const map of service._mapsById.values()) {
+    for (const query of map.queries.values()) {
+      await query.action;
+    }
+  }
+
+  is(
+    cbCalls.length,
+    1,
+    "The callback function is called directly when subscribing"
+  );
+  Assert.deepEqual(
+    cbCalls[0],
+    expectedArg,
+    "callback called with expected arguments"
+  );
+
+  const unsubscribe2 = service.subscribeByURL(JS_URL, GENERATED_LINE, 1, cb);
+  is(cbCalls.length, 2, "Subscribing to the same location twice works");
+  Assert.deepEqual(
+    cbCalls[1],
+    expectedArg,
+    "callback called with expected arguments"
+  );
+
+  info("Manually call the dispatcher to ensure subscribers are called");
+  Services.prefs.setBoolPref(SOURCE_MAP_PREF, false);
+  is(cbCalls.length, 4, "both subscribers were called");
+  Assert.deepEqual(cbCalls[2], null, "callback called with expected arguments");
+  Assert.deepEqual(
+    cbCalls[2],
+    cbCalls[3],
+    "callbacks were passed the same arguments"
+  );
+
+  info("Check unsubscribe functions");
+  unsubscribe1();
+  Services.prefs.setBoolPref(SOURCE_MAP_PREF, true);
+  is(cbCalls.length, 5, "Only remainer subscriber callback was called");
+  Assert.deepEqual(
+    cbCalls[4],
+    expectedArg,
+    "callback called with expected arguments"
+  );
+
+  unsubscribe2();
+  Services.prefs.setBoolPref(SOURCE_MAP_PREF, false);
+  Services.prefs.setBoolPref(SOURCE_MAP_PREF, true);
+  is(cbCalls.length, 5, "No callbacks were called");
+});
diff --git a/devtools/client/framework/test/browser_source_map-reload.js b/devtools/client/framework/test/browser_source_map-reload.js
new file mode 100644
index 0000000000..13902062a7
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-reload.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that reloading re-reads the source maps.
+
+"use strict";
+const INITIAL_URL =
+  "data:text/html,<!doctype html>html><head><meta charset='utf-8'/><title>Empty test page 1</title></head><body></body></html>";
+const ORIGINAL_URL_1 = "webpack://code-reload/v1/code_reload_1.js";
+const ORIGINAL_URL_2 = "webpack://code-reload/v2/code_reload_2.js";
+
+const GENERATED_LINE = 13;
+const ORIGINAL_LINE = 7;
+
+const testServer = createVersionizedHttpTestServer("reload");
+
+const PAGE_URL = testServer.urlFor("doc_reload.html");
+const JS_URL = testServer.urlFor("code_bundle_reload.js");
+
+add_task(async function () {
+  // Start with the empty page, then navigate, so that we can properly
+  // listen for new sources arriving.
+  const toolbox = await openNewTabAndToolbox(INITIAL_URL, "webconsole");
+  const service = toolbox.sourceMapURLService;
+
+  let sourceSeen = waitForSourceLoad(toolbox, JS_URL);
+  await navigateTo(PAGE_URL);
+  await sourceSeen;
+
+  info(`checking original location for ${JS_URL}:${GENERATED_LINE}`);
+  let newLoc = await new Promise(r =>
+    service.subscribeByURL(JS_URL, GENERATED_LINE, undefined, r)
+  );
+
+  is(newLoc.url, ORIGINAL_URL_1, "check mapped URL");
+  is(newLoc.line, ORIGINAL_LINE, "check mapped line number");
+
+  testServer.switchToNextVersion();
+
+  // Reload the page. A different source file will be loaded.
+  sourceSeen = waitForSourceLoad(toolbox, JS_URL);
+  await reloadBrowser();
+  await sourceSeen;
+
+  info(
+    `checking post-reload original location for ${JS_URL}:${GENERATED_LINE}`
+  );
+  newLoc = await new Promise(r =>
+    service.subscribeByURL(JS_URL, GENERATED_LINE, undefined, r)
+  );
+  is(newLoc.url, ORIGINAL_URL_2, "check post-reload mapped URL");
+  is(newLoc.line, ORIGINAL_LINE, "check post-reload mapped line number");
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_tab_commands_factory.js b/devtools/client/framework/test/browser_tab_commands_factory.js
new file mode 100644
index 0000000000..d8f2f44ca8
--- /dev/null
+++ b/devtools/client/framework/test/browser_tab_commands_factory.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test LocalTabCommandsFactory
+
+const {
+  LocalTabCommandsFactory,
+} = require("resource://devtools/client/framework/local-tab-commands-factory.js");
+
+add_task(async function () {
+  await testTabDescriptorWithURL("data:text/html;charset=utf-8,foo");
+
+  // Bug 1699497: Also test against a page in the parent process
+  // which can hit some race with frame-connector's frame scripts.
+  await testTabDescriptorWithURL("about:robots");
+});
+
+async function testTabDescriptorWithURL(url) {
+  info(`Test TabDescriptor against url ${url}\n`);
+  const tab = await addTab(url);
+
+  const commands = await LocalTabCommandsFactory.createCommandsForTab(tab);
+  is(
+    commands.descriptorFront.localTab,
+    tab,
+    "TabDescriptor's localTab is set correctly"
+  );
+
+  info(
+    "Calling a second time createCommandsForTab with the same tab, will return the same commands"
+  );
+  const secondCommands = await LocalTabCommandsFactory.createCommandsForTab(
+    tab
+  );
+  is(commands, secondCommands, "second commands is the same");
+
+  // We have to involve TargetCommand in order to have a function TabDescriptor.getTarget.
+  await commands.targetCommand.startListening();
+
+  info("Wait for descriptor's target");
+  const target = await commands.descriptorFront.getTarget();
+
+  info("Call any method to ensure that each target works");
+  await target.logInPage("foo");
+
+  info("Destroy the command");
+  await commands.destroy();
+
+  gBrowser.removeCurrentTab();
+}
diff --git a/devtools/client/framework/test/browser_tab_descriptor_fission.js b/devtools/client/framework/test/browser_tab_descriptor_fission.js
new file mode 100644
index 0000000000..bf15f01293
--- /dev/null
+++ b/devtools/client/framework/test/browser_tab_descriptor_fission.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check that tab descriptor survives after the page navigates and changes
+ * process.
+ */
+
+const EXAMPLE_COM_URI =
+  "https://example.com/document-builder.sjs?html=<div id=com>com";
+const EXAMPLE_ORG_URI =
+  "https://example.org/document-builder.sjs?html=<div id=org>org";
+
+add_task(async function () {
+  const tab = await addTab(EXAMPLE_COM_URI);
+  const toolbox = await gDevTools.showToolboxForTab(tab);
+  const target = toolbox.target;
+  const client = toolbox.commands.client;
+
+  info("Retrieve the initial list of tab descriptors");
+  const tabDescriptors = await client.mainRoot.listTabs();
+  const tabDescriptor = tabDescriptors.find(
+    d => decodeURIComponent(d.url) === EXAMPLE_COM_URI
+  );
+  ok(tabDescriptor, "Should have a descriptor actor for the tab");
+
+  info("Retrieve the target corresponding to the TabDescriptor");
+  const comTabTarget = await tabDescriptor.getTarget();
+  is(
+    target,
+    comTabTarget,
+    "The toolbox target is also the target associated with the tab descriptor"
+  );
+
+  await navigateTo(EXAMPLE_ORG_URI);
+
+  info("Call list tabs again to update the tab descriptor forms");
+  await client.mainRoot.listTabs();
+
+  is(
+    decodeURIComponent(tabDescriptor.url),
+    EXAMPLE_ORG_URI,
+    "The existing descriptor now points to the new URI"
+  );
+
+  const newTarget = toolbox.target;
+
+  is(
+    comTabTarget.actorID,
+    null,
+    "With Fission or server side target switching, example.com target front is destroyed"
+  );
+  Assert.notEqual(
+    comTabTarget,
+    newTarget,
+    "With Fission or server side target switching, a new target was created for example.org"
+  );
+
+  const onDescriptorDestroyed = tabDescriptor.once("descriptor-destroyed");
+
+  await removeTab(tab);
+
+  info("Wait for descriptor destroyed event");
+  await onDescriptorDestroyed;
+  ok(tabDescriptor.isDestroyed(), "the descriptor front is really destroyed");
+});
diff --git a/devtools/client/framework/test/browser_target_cached-front.js b/devtools/client/framework/test/browser_target_cached-front.js
new file mode 100644
index 0000000000..43156cbded
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_cached-front.js
@@ -0,0 +1,23 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+add_task(async function () {
+  gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser);
+  await BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
+
+  const target = await createAndAttachTargetForTab(gBrowser.selectedTab);
+
+  info("Cached front when getFront has not been called");
+  let getCachedFront = target.getCachedFront("accessibility");
+  ok(!getCachedFront, "no front exists");
+
+  info("Cached front when getFront has been called but has not finished");
+  const asyncFront = target.getFront("accessibility");
+  getCachedFront = target.getCachedFront("accessibility");
+  ok(!getCachedFront, "no front exists");
+
+  info("Cached front when getFront has been called and has finished");
+  const front = await asyncFront;
+  getCachedFront = target.getCachedFront("accessibility");
+  is(getCachedFront, front, "front is the same as async front");
+});
diff --git a/devtools/client/framework/test/browser_target_cached-resource.js b/devtools/client/framework/test/browser_target_cached-resource.js
new file mode 100644
index 0000000000..b6f53fdee0
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_cached-resource.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// The target front holds resources that happend before ResourceCommand addeed listeners.
+// Test whether that feature works correctly or not.
+const TEST_URI =
+  "https://example.com/browser/devtools/client/framework/test/doc_cached-resource.html";
+const PARENT_MESSAGE = "Hello from parent";
+const CHILD_MESSAGE = "Hello from child";
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/webconsole/test/browser/shared-head.js",
+  this
+);
+
+add_task(async function () {
+  info("Open console");
+  const tab = await addTab(TEST_URI);
+  const toolbox = await openToolboxForTab(tab, "webconsole");
+  const hud = toolbox.getCurrentPanel().hud;
+
+  info("Check the initial messages");
+  ok(
+    findMessageByType(hud, PARENT_MESSAGE, ".console-api"),
+    "Message from parent document is in console"
+  );
+  ok(
+    findMessageByType(hud, CHILD_MESSAGE, ".console-api"),
+    "Message from child document is in console"
+  );
+
+  info("Clear the messages");
+  hud.ui.window.document.querySelector(".devtools-clear-icon").click();
+  await waitUntil(
+    () => !findMessageByType(hud, PARENT_MESSAGE, ".console-api")
+  );
+
+  info("Reload the browsing page");
+  await navigateTo(TEST_URI);
+
+  info("Check the messages after reloading");
+  await waitUntil(
+    () =>
+      findMessageByType(hud, PARENT_MESSAGE, ".console-api") &&
+      findMessageByType(hud, CHILD_MESSAGE, ".console-api")
+  );
+  ok(true, "All messages are shown correctly");
+});
diff --git a/devtools/client/framework/test/browser_target_get-front.js b/devtools/client/framework/test/browser_target_get-front.js
new file mode 100644
index 0000000000..9dac79d196
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_get-front.js
@@ -0,0 +1,112 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+add_task(async function () {
+  const tab = await addTab("about:blank");
+  const target = await createAndAttachTargetForTab(tab);
+
+  const tab2 = await addTab("about:blank");
+  const target2 = await createAndAttachTargetForTab(tab2);
+
+  info("Test the targetFront attribute for the root");
+  const { client } = target;
+  is(
+    client.mainRoot.targetFront,
+    null,
+    "got null from the targetFront attribute for the root"
+  );
+  is(
+    client.mainRoot.parentFront,
+    null,
+    "got null from the parentFront attribute for the root"
+  );
+
+  info("Test getting a front twice");
+  const getAccessibilityFront = await target.getFront("accessibility");
+  const getAccessibilityFront2 = await target.getFront("accessibility");
+  is(
+    getAccessibilityFront,
+    getAccessibilityFront2,
+    "got the same front when calling getFront twice"
+  );
+  is(
+    getAccessibilityFront.targetFront,
+    target,
+    "got the correct targetFront attribute from the front"
+  );
+  is(
+    getAccessibilityFront2.targetFront,
+    target,
+    "got the correct targetFront attribute from the front"
+  );
+  is(
+    getAccessibilityFront.parentFront,
+    target,
+    "got the correct parentFront attribute from the front"
+  );
+  is(
+    getAccessibilityFront2.parentFront,
+    target,
+    "got the correct parentFront attribute from the front"
+  );
+
+  info("Test getting a front on different targets");
+  const target1Front = await target.getFront("accessibility");
+  const target2Front = await target2.getFront("accessibility");
+  is(
+    target1Front !== target2Front,
+    true,
+    "got different fronts when calling getFront on different targets"
+  );
+  is(
+    target1Front.targetFront !== target2Front.targetFront,
+    true,
+    "got different targetFront from different fronts from different targets"
+  );
+  is(
+    target2Front.targetFront,
+    target2,
+    "got the correct targetFront attribute from the front"
+  );
+
+  info("Test async front retrieval");
+  // use two fronts that are initialized one after the other.
+  const asyncFront1 = target.getFront("accessibility");
+  const asyncFront2 = target.getFront("accessibility");
+
+  info("waiting on async fronts returns a real front");
+  const awaitedAsyncFront1 = await asyncFront1;
+  const awaitedAsyncFront2 = await asyncFront2;
+  is(
+    awaitedAsyncFront1,
+    awaitedAsyncFront2,
+    "got the same front when requesting the front first async then sync"
+  );
+  await target.destroy();
+  await target2.destroy();
+
+  info("destroying a front immediately is possible");
+  await testDestroy();
+});
+
+async function testDestroy() {
+  // initialize a clean target
+  const tab = await addTab("about:blank");
+  const target = await createAndAttachTargetForTab(tab);
+
+  // do not wait for the front to finish loading
+  target.getFront("accessibility");
+
+  try {
+    await target.destroy();
+    ok(
+      true,
+      "calling destroy on an async front instantiated with getFront does not throw"
+    );
+  } catch (e) {
+    ok(
+      false,
+      "calling destroy on an async front instantiated with getFront does not throw"
+    );
+  }
+}
diff --git a/devtools/client/framework/test/browser_target_listeners.js b/devtools/client/framework/test/browser_target_listeners.js
new file mode 100644
index 0000000000..942ac3bed1
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_listeners.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+add_task(async function () {
+  gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser);
+  await BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
+
+  const target = await createAndAttachTargetForTab(gBrowser.selectedTab);
+
+  info("Test applying watchFronts to a front that will be created");
+  const promise = new Promise(resolve => {
+    target.watchFronts("accessibility", resolve);
+  });
+  const getFrontFront = await target.getFront("accessibility");
+  const watchFrontsFront = await promise;
+  is(
+    getFrontFront,
+    watchFrontsFront,
+    "got the front instantiated in the future and it's the same"
+  );
+
+  info("Test applying watchFronts to an existing front");
+  await new Promise(resolve => {
+    target.watchFronts("accessibility", front => {
+      is(
+        front,
+        getFrontFront,
+        "got the already instantiated front and it's the same"
+      );
+      resolve();
+    });
+  });
+});
diff --git a/devtools/client/framework/test/browser_target_loading.js b/devtools/client/framework/test/browser_target_loading.js
new file mode 100644
index 0000000000..fe579bdaa9
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_loading.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that toolbox can be opened right after a tab is added, while the document
+// is still loading.
+
+add_task(async function testOpenToolboxOnLoadingDocument() {
+  const TEST_URI =
+    `https://example.com/document-builder.sjs?` +
+    `html=Test<script>console.log("page loaded")</script>`;
+
+  // ⚠️ Note that we don't await for `addTab` here, as we want to open the toolbox just
+  // after the tab is addded, with the document still loading.
+  info("Add tab…");
+  const onTabAdded = addTab(TEST_URI);
+  const tab = gBrowser.selectedTab;
+  info("…and open the toolbox right away");
+  const onToolboxShown = gDevTools.showToolboxForTab(tab, {
+    toolId: "webconsole",
+  });
+
+  await onTabAdded;
+  ok(true, "The tab as done loading");
+
+  const toolbox = await onToolboxShown;
+  ok(true, "The toolbox is shown");
+
+  info("Check that the console opened and has the message from the page");
+  const { hud } = toolbox.getPanel("webconsole");
+  await waitFor(() =>
+    Array.from(hud.ui.window.document.querySelectorAll(".message-body")).some(
+      el => el.innerText.includes("page loaded")
+    )
+  );
+  ok(true, "The console opened with the expected content");
+});
diff --git a/devtools/client/framework/test/browser_target_parents.js b/devtools/client/framework/test/browser_target_parents.js
new file mode 100644
index 0000000000..795219abef
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_parents.js
@@ -0,0 +1,189 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test a given Target's parentFront attribute returns the correct parent front.
+
+const {
+  DevToolsClient,
+} = require("resource://devtools/client/devtools-client.js");
+const {
+  DevToolsServer,
+} = require("resource://devtools/server/devtools-server.js");
+const {
+  createCommandsDictionary,
+} = require("resource://devtools/shared/commands/index.js");
+
+const TEST_URL = `data:text/html;charset=utf-8,<div id="test"></div>`;
+
+// Test against Tab targets
+add_task(async function () {
+  const tab = await addTab(TEST_URL);
+
+  const client = await setupDebuggerClient();
+  const mainRoot = client.mainRoot;
+
+  const tabDescriptors = await mainRoot.listTabs();
+
+  const concurrentCommands = [];
+  for (const descriptor of tabDescriptors) {
+    concurrentCommands.push(
+      (async () => {
+        const commands = await createCommandsDictionary(descriptor);
+        // Descriptor's getTarget will only work if the TargetCommand watches for the first top target
+        await commands.targetCommand.startListening();
+      })()
+    );
+  }
+  info("Instantiate all tab's commands and initialize their TargetCommand");
+  await Promise.all(concurrentCommands);
+
+  await testGetTargetWithConcurrentCalls(tabDescriptors, tabTarget => {
+    // We only call BrowsingContextTargetFront.attach and not TargetMixin.attachAndInitThread.
+    // So very few things are done.
+    return !!tabTarget.targetForm?.traits;
+  });
+
+  await client.close();
+  await removeTab(tab);
+});
+
+// Test against Process targets
+add_task(async function () {
+  const client = await setupDebuggerClient();
+  const mainRoot = client.mainRoot;
+
+  const processes = await mainRoot.listProcesses();
+
+  // Assert that concurrent calls to getTarget resolves the same target and that it is already attached
+  // With that, we were chasing a precise race, where a second call to ProcessDescriptor.getTarget()
+  // happens between the instantiation of ContentProcessTarget and its call to attach() from getTarget
+  // function.
+  await testGetTargetWithConcurrentCalls(processes, processTarget => {
+    // We only call ContentProcessTargetFront.attach and not TargetMixin.attachAndInitThread.
+    // So nothing is done for content process targets.
+    return true;
+  });
+
+  await client.close();
+});
+
+// Test against Webextension targets
+add_task(async function () {
+  const client = await setupDebuggerClient();
+
+  const mainRoot = client.mainRoot;
+
+  const addons = await mainRoot.listAddons();
+  await Promise.all(
+    // some extensions, such as themes, are not debuggable. Filter those out
+    // before trying to connect.
+    addons
+      .filter(a => a.debuggable)
+      .map(async addonDescriptorFront => {
+        const addonFront = await addonDescriptorFront.getTarget();
+        ok(addonFront, "Got the addon target");
+      })
+  );
+
+  await client.close();
+});
+
+// Test against worker targets on parent process
+add_task(async function () {
+  const client = await setupDebuggerClient();
+
+  const mainRoot = client.mainRoot;
+
+  const { workers } = await mainRoot.listWorkers();
+
+  ok(!!workers.length, "list workers returned a non-empty list of workers");
+
+  for (const workerDescriptorFront of workers) {
+    let targetFront;
+    try {
+      targetFront = await workerDescriptorFront.getTarget();
+    } catch (e) {
+      // Ignore race condition where we are trying to connect to a worker
+      // related to a previous test which is being destroyed.
+      if (
+        e.message.includes("nsIWorkerDebugger.initialize") ||
+        workerDescriptorFront.isDestroyed() ||
+        !workerDescriptorFront.name
+      ) {
+        info("Failed to connect to " + workerDescriptorFront.url);
+        continue;
+      }
+      throw e;
+    }
+    // Bug 1767760: name might be null on some worker which are probably initializing or destroying.
+    if (!workerDescriptorFront.name) {
+      info("Failed to connect to " + workerDescriptorFront.url);
+      continue;
+    }
+
+    is(
+      workerDescriptorFront,
+      targetFront,
+      "For now, worker descriptors and targets are the same object (see bug 1667404)"
+    );
+    // Check that accessing descriptor#name getter doesn't throw (See Bug 1714974).
+    ok(
+      workerDescriptorFront.name.includes(".js") ||
+        workerDescriptorFront.name.includes(".mjs"),
+      `worker descriptor front holds the worker file name (${workerDescriptorFront.name})`
+    );
+    is(
+      workerDescriptorFront.isWorkerDescriptor,
+      true,
+      "isWorkerDescriptor is true"
+    );
+  }
+
+  await client.close();
+});
+
+async function setupDebuggerClient() {
+  // Instantiate a minimal server
+  DevToolsServer.init();
+  DevToolsServer.allowChromeProcess = true;
+  if (!DevToolsServer.createRootActor) {
+    DevToolsServer.registerAllActors();
+  }
+  const transport = DevToolsServer.connectPipe();
+  const client = new DevToolsClient(transport);
+  await client.connect();
+  return client;
+}
+
+async function testGetTargetWithConcurrentCalls(descriptors, isTargetAttached) {
+  // Assert that concurrent calls to getTarget resolves the same target and that it is already attached
+  await Promise.all(
+    descriptors.map(async descriptor => {
+      const promises = [];
+      const concurrentCalls = 10;
+      for (let i = 0; i < concurrentCalls; i++) {
+        const targetPromise = descriptor.getTarget();
+        // Every odd runs, wait for a tick to introduce some more randomness
+        if (i % 2 == 0) {
+          await wait(0);
+        }
+        promises.push(
+          targetPromise.then(target => {
+            ok(isTargetAttached(target), "The target is attached");
+            return target;
+          })
+        );
+      }
+      const targets = await Promise.all(promises);
+      for (let i = 1; i < concurrentCalls; i++) {
+        is(
+          targets[0],
+          targets[i],
+          "All the targets returned by concurrent calls to getTarget are the same"
+        );
+      }
+    })
+  );
+}
diff --git a/devtools/client/framework/test/browser_target_remote.js b/devtools/client/framework/test/browser_target_remote.js
new file mode 100644
index 0000000000..272797d626
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_remote.js
@@ -0,0 +1,15 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Ensure target is closed if client is closed directly
+function test() {
+  waitForExplicitFinish();
+
+  getParentProcessActors((client, target) => {
+    target.on("target-destroyed", () => {
+      ok(true, "Target was destroyed");
+      finish();
+    });
+    client.close();
+  });
+}
diff --git a/devtools/client/framework/test/browser_target_server_compartment.js b/devtools/client/framework/test/browser_target_server_compartment.js
new file mode 100644
index 0000000000..c0bd8e56f0
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_server_compartment.js
@@ -0,0 +1,126 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Bug 1515290 - Ensure that DevToolsServer runs in its own compartment when debugging
+// chrome context. If not, Debugger API's addGlobal will throw when trying to attach
+// to chrome scripts as debugger actor's module and the chrome script will be in the same
+// compartment. Debugger and debuggee can't be running in the same compartment.
+
+const CHROME_PAGE =
+  "chrome://mochitests/content/browser/devtools/client/framework/" +
+  "test/test_chrome_page.html";
+
+add_task(async function () {
+  await testChromeTab();
+  await testMainProcess();
+});
+
+// Test that Tab Target can debug chrome pages
+async function testChromeTab() {
+  const tab = await addTab(CHROME_PAGE);
+  const browser = tab.linkedBrowser;
+  ok(!browser.isRemoteBrowser, "chrome page is not remote");
+  ok(
+    browser.contentWindow.document.nodePrincipal.isSystemPrincipal,
+    "chrome page is a privileged document"
+  );
+
+  const onThreadActorInstantiated = new Promise(resolve => {
+    const observe = function (subject, topic, data) {
+      if (topic === "devtools-thread-ready") {
+        Services.obs.removeObserver(observe, "devtools-thread-ready");
+        const threadActor = subject.wrappedJSObject;
+        resolve(threadActor);
+      }
+    };
+    Services.obs.addObserver(observe, "devtools-thread-ready");
+  });
+
+  const commands = await CommandsFactory.forTab(tab);
+  await commands.targetCommand.startListening();
+
+  const sources = [];
+  await commands.resourceCommand.watchResources(
+    [commands.resourceCommand.TYPES.SOURCE],
+    {
+      onAvailable(resources) {
+        sources.push(...resources);
+      },
+    }
+  );
+  ok(
+    sources.find(s => s.url == CHROME_PAGE),
+    "The thread actor is able to attach to the chrome page and its sources"
+  );
+
+  const threadActor = await onThreadActorInstantiated;
+  const serverGlobal = Cu.getGlobalForObject(threadActor);
+  isnot(
+    loader.id,
+    serverGlobal.loader.id,
+    "The actors are loaded in a distinct loader in order for the actors to use its very own compartment"
+  );
+
+  const onDedicatedLoaderDestroy = new Promise(resolve => {
+    const observe = function (subject, topic, data) {
+      if (topic === "devtools:loader:destroy") {
+        Services.obs.removeObserver(observe, "devtools:loader:destroy");
+        resolve();
+      }
+    };
+    Services.obs.addObserver(observe, "devtools:loader:destroy");
+  });
+
+  await commands.destroy();
+
+  // Wait for the dedicated loader used for DevToolsServer to be destroyed
+  // in order to prevent leak reports on try
+  await onDedicatedLoaderDestroy;
+}
+
+// Test that Main process Target can debug chrome scripts
+async function testMainProcess() {
+  const onThreadActorInstantiated = new Promise(resolve => {
+    const observe = function (subject, topic, data) {
+      if (topic === "devtools-thread-ready") {
+        Services.obs.removeObserver(observe, "devtools-thread-ready");
+        const threadActor = subject.wrappedJSObject;
+        resolve(threadActor);
+      }
+    };
+    Services.obs.addObserver(observe, "devtools-thread-ready");
+  });
+
+  const client = await CommandsFactory.spawnClientToDebugSystemPrincipal();
+  const commands = await CommandsFactory.forMainProcess({ client });
+  await commands.targetCommand.startListening();
+
+  const sources = [];
+  await commands.resourceCommand.watchResources(
+    [commands.resourceCommand.TYPES.SOURCE],
+    {
+      onAvailable(resources) {
+        sources.push(...resources);
+      },
+    }
+  );
+  ok(
+    sources.find(
+      s => s.url == "resource://devtools/client/framework/devtools.js"
+    ),
+    "The thread actor is able to attach to the chrome script, like client modules"
+  );
+
+  const threadActor = await onThreadActorInstantiated;
+  const serverGlobal = Cu.getGlobalForObject(threadActor);
+  isnot(
+    loader.id,
+    serverGlobal.loader.id,
+    "The actors are loaded in a distinct loader in order for the actors to use its very own compartment"
+  );
+
+  // As this target is remote (i.e. isn't a local tab) calling Target.destroy won't close
+  // the client. So do it manually here in order to ensure cleaning up the DevToolsServer
+  // spawn for this main process actor.
+  await commands.destroy();
+}
diff --git a/devtools/client/framework/test/browser_target_support.js b/devtools/client/framework/test/browser_target_support.js
new file mode 100644
index 0000000000..ff87b9fad4
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_support.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test support methods on Target, such as `hasActor` and `getTrait`.
+
+async function testTarget(client, target) {
+  is(
+    target.hasActor("inspector"),
+    true,
+    "target.hasActor() true when actor exists."
+  );
+  is(
+    target.hasActor("notreal"),
+    false,
+    "target.hasActor() false when actor does not exist."
+  );
+
+  is(
+    target.getTrait("giddyup"),
+    undefined,
+    "target.getTrait() returns undefined when trait does not exist"
+  );
+
+  close(target, client);
+}
+
+// Ensure target is closed if client is closed directly
+function test() {
+  waitForExplicitFinish();
+
+  getParentProcessActors(testTarget);
+}
+
+function close(target, client) {
+  target.on("target-destroyed", () => {
+    ok(true, "Target was destroyed");
+    finish();
+  });
+  client.close();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_backward_forward_navigation.js b/devtools/client/framework/test/browser_toolbox_backward_forward_navigation.js
new file mode 100644
index 0000000000..7350c2601c
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_backward_forward_navigation.js
@@ -0,0 +1,188 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// The test can take a while to run
+requestLongerTimeout(3);
+
+const FILENAME = "doc_backward_forward_navigation.html";
+const TEST_URI_ORG = `${URL_ROOT_ORG_SSL}${FILENAME}`;
+const TEST_URI_COM = `${URL_ROOT_COM_SSL}${FILENAME}`;
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/shared-head.js",
+  this
+);
+
+add_task(async function testMultipleNavigations() {
+  // Disable bfcache for Fission for now.
+  // If Fission is disabled, the pref is no-op.
+  await SpecialPowers.pushPrefEnv({
+    set: [["fission.bfcacheInParent", false]],
+  });
+
+  info(
+    "Test that DevTools works fine after multiple backward/forward navigations"
+  );
+  // Don't show the third panel to limit the logs and activity.
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await pushPref("devtools.inspector.activeSidebar", "ruleview");
+  const DATA_URL = `data:text/html,<meta charset=utf8>`;
+  const tab = await addTab(DATA_URL);
+
+  // Select the debugger so there will be more activity
+  const toolbox = await openToolboxForTab(tab, "jsdebugger");
+  const inspector = await toolbox.selectTool("inspector");
+
+  info("Navigate to the ORG test page");
+  // We don't use `navigateTo` as the page is adding stylesheets and js files which might
+  // delay the load event indefinitely (and we don't need for anything to be loaded, or
+  // ready, just to register the initial navigation so we can go back and forth between urls)
+  let onLocationChange = BrowserTestUtils.waitForLocationChange(
+    gBrowser,
+    TEST_URI_ORG
+  );
+  BrowserTestUtils.startLoadingURIString(gBrowser, TEST_URI_ORG);
+  await onLocationChange;
+
+  info("And then navigate to a different origin");
+  onLocationChange = BrowserTestUtils.waitForLocationChange(
+    gBrowser,
+    TEST_URI_COM
+  );
+  BrowserTestUtils.startLoadingURIString(gBrowser, TEST_URI_COM);
+  await onLocationChange;
+
+  info(
+    "Navigate backward and forward multiple times between the two origins, with different delays"
+  );
+  await navigateBackAndForth(TEST_URI_ORG, TEST_URI_COM);
+
+  // Navigate one last time to a document with less activity so we don't have to deal
+  // with pending promises when we destroy the toolbox
+  const onInspectorReloaded = inspector.once("reloaded");
+  info("Navigate to final document");
+  await navigateTo(`${TEST_URI_ORG}?no-mutation`);
+  info("Waiting for inspector to reload…");
+  await onInspectorReloaded;
+  info("-> inspector reloaded");
+  await checkToolboxState(toolbox);
+});
+
+add_task(async function testSingleBackAndForthInstantNavigation() {
+  // Disable bfcache for Fission for now.
+  // If Fission is disabled, the pref is no-op.
+  await SpecialPowers.pushPrefEnv({
+    set: [["fission.bfcacheInParent", false]],
+  });
+
+  info(
+    "Test that DevTools works fine after navigating backward and forward right after"
+  );
+
+  // Don't show the third panel to limit the logs and activity.
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await pushPref("devtools.inspector.activeSidebar", "ruleview");
+  const DATA_URL = `data:text/html,<meta charset=utf8>`;
+  const tab = await addTab(DATA_URL);
+
+  // Select the debugger so there will be more activity
+  const toolbox = await openToolboxForTab(tab, "jsdebugger");
+  const inspector = await toolbox.selectTool("inspector");
+
+  info("Navigate to a different origin");
+  await navigateTo(TEST_URI_COM);
+
+  info("Then navigate back, and forth immediatly");
+  // We can't call goBack and right away goForward as goForward and even the call to navigateTo
+  // a bit later might be ignored. So we wait at least for the location to change.
+  await safelyGoBack(DATA_URL);
+  await safelyGoForward(TEST_URI_COM);
+
+  // Navigate one last time to a document with less activity so we don't have to deal
+  // with pending promises when we destroy the toolbox
+  const onInspectorReloaded = inspector.once("reloaded");
+  info("Navigate to final document");
+  await navigateTo(`${TEST_URI_ORG}?no-mutation`);
+  info("Waiting for inspector to reload…");
+  await onInspectorReloaded;
+  info("-> inspector reloaded");
+  await checkToolboxState(toolbox);
+});
+
+async function checkToolboxState(toolbox) {
+  info("Check that the toolbox toolbar is still visible");
+  const toolboxTabsEl = toolbox.doc.querySelector(".toolbox-tabs");
+  ok(toolboxTabsEl, "Toolbar is still visible");
+
+  info(
+    "Check that the markup view is rendered correctly and elements can be selected"
+  );
+  const inspector = await toolbox.selectTool("inspector");
+  await waitFor(
+    () =>
+      inspector.markup &&
+      inspector.markup.win.document.body.innerText.includes(
+        `<body class="no-mutation">`
+      ),
+    `wait for <body class="no-mutation"> to be displayed in the markup view, got: ${inspector.markup?.win.document.body.innerText}`,
+    100,
+    100
+  );
+  ok(true, "the markup view is still rendered fine");
+  await selectNode("ul.logs", inspector);
+  ok(true, "Nodes can be selected");
+
+  info("Check that the debugger has some sources");
+  const dbgPanel = await toolbox.selectTool("jsdebugger");
+  const dbg = createDebuggerContext(toolbox);
+
+  info(`Wait for ${FILENAME} to be displayed in the debugger source panel`);
+  const rootNode = await waitFor(() =>
+    dbgPanel.panelWin.document.querySelector(selectors.sourceTreeRootNode)
+  );
+  await expandAllSourceNodes(dbg, rootNode);
+  const sourcesTreeScriptNode = await waitFor(() =>
+    findSourceNodeWithText(dbg, FILENAME)
+  );
+
+  ok(
+    sourcesTreeScriptNode.innerText.includes(FILENAME),
+    "The debugger has the expected source"
+  );
+}
+
+async function navigateBackAndForth(
+  expectedUrlAfterBackwardNavigation,
+  expectedUrlAfterForwardNavigation
+) {
+  const delays = [100, 0, 500];
+  for (const delay of delays) {
+    // For each delays, do 3 back/forth navigations
+    for (let i = 0; i < 3; i++) {
+      await safelyGoBack(expectedUrlAfterBackwardNavigation);
+      await wait(delay);
+      await safelyGoForward(expectedUrlAfterForwardNavigation);
+      await wait(delay);
+    }
+  }
+}
+
+async function safelyGoBack(expectedUrl) {
+  const onLocationChange = BrowserTestUtils.waitForLocationChange(
+    gBrowser,
+    expectedUrl
+  );
+  gBrowser.goBack();
+  await onLocationChange;
+}
+
+async function safelyGoForward(expectedUrl) {
+  const onLocationChange = BrowserTestUtils.waitForLocationChange(
+    gBrowser,
+    expectedUrl
+  );
+  gBrowser.goForward();
+  await onLocationChange;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_browsertoolbox_host.js b/devtools/client/framework/test/browser_toolbox_browsertoolbox_host.js
new file mode 100644
index 0000000000..8efb7959ce
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_browsertoolbox_host.js
@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URL = "data:text/html,test browsertoolbox host";
+
+add_task(async function () {
+  const {
+    Toolbox,
+  } = require("resource://devtools/client/framework/toolbox.js");
+
+  const tab = await addTab(TEST_URL);
+  const options = { doc: document };
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    hostType: Toolbox.HostType.BROWSERTOOLBOX,
+    hostOptions: options,
+  });
+
+  is(toolbox.topWindow, window, "Toolbox is included in browser.xhtml");
+  const iframe = document.querySelector(
+    ".devtools-toolbox-browsertoolbox-iframe"
+  );
+  ok(iframe, "A toolbox iframe was created in the provided document");
+  is(toolbox.doc, iframe.contentDocument, "Toolbox is in the custom iframe");
+
+  await toolbox.destroy();
+  iframe.remove();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_contentpage_contextmenu.js b/devtools/client/framework/test/browser_toolbox_contentpage_contextmenu.js
new file mode 100644
index 0000000000..63363e4cf3
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_contentpage_contextmenu.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const URL = "data:text/html;charset=utf8,<div>test content context menu</div>";
+
+/**
+ * Check that the DevTools context menu opens without triggering the content
+ * context menu. See Bug 1591140.
+ */
+add_task(async function () {
+  const tab = await addTab(URL);
+
+  info("Test context menu conflict with dom.event.contextmenu.enabled=true");
+  await pushPref("dom.event.contextmenu.enabled", true);
+  await checkConflictWithContentPageMenu(tab);
+
+  info("Test context menu conflict with dom.event.contextmenu.enabled=false");
+  await pushPref("dom.event.contextmenu.enabled", false);
+  await checkConflictWithContentPageMenu(tab);
+});
+
+async function checkConflictWithContentPageMenu(tab) {
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "inspector",
+  });
+
+  info("Check that the content page context menu works as expected");
+  const contextMenu = document.getElementById("contentAreaContextMenu");
+  is(contextMenu.state, "closed", "Content contextmenu is closed");
+
+  info("Show the content context menu");
+  const awaitPopupShown = BrowserTestUtils.waitForEvent(
+    contextMenu,
+    "popupshown"
+  );
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    "div",
+    {
+      type: "contextmenu",
+      button: 2,
+      centered: true,
+    },
+    gBrowser.selectedBrowser
+  );
+  await awaitPopupShown;
+  is(contextMenu.state, "open", "Content contextmenu is open");
+
+  info("Hide the content context menu");
+  const awaitPopupHidden = BrowserTestUtils.waitForEvent(
+    contextMenu,
+    "popuphidden"
+  );
+  contextMenu.hidePopup();
+  await awaitPopupHidden;
+  is(contextMenu.state, "closed", "Content contextmenu is closed again");
+
+  info("Check the DevTools menu opens without opening the content menu");
+  const onContextMenuPopup = toolbox.once("menu-open");
+  // Use inspector search box for the test, any other element should be ok as
+  // well.
+  const inspector = toolbox.getPanel("inspector");
+  synthesizeContextMenuEvent(inspector.searchBox);
+  await onContextMenuPopup;
+
+  const textboxContextMenu = toolbox.getTextBoxContextMenu();
+  is(contextMenu.state, "closed", "Content contextmenu is still closed");
+  is(textboxContextMenu.state, "open", "Toolbox contextmenu is open");
+
+  info("Check that the toolbox context menu is closed when pressing ESCAPE");
+  const onContextMenuHidden = toolbox.once("menu-close");
+  if (Services.prefs.getBoolPref("widget.macos.native-context-menus", false)) {
+    info("Using hidePopup semantics because of macOS native context menus.");
+    textboxContextMenu.hidePopup();
+  } else {
+    EventUtils.sendKey("ESCAPE", toolbox.win);
+  }
+  await onContextMenuHidden;
+  is(textboxContextMenu.state, "closed", "Toolbox contextmenu is closed.");
+
+  await toolbox.destroy();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_disable_f12.js b/devtools/client/framework/test/browser_toolbox_disable_f12.js
new file mode 100644
index 0000000000..df0a755714
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_disable_f12.js
@@ -0,0 +1,102 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function () {
+  const tab = await addTab(
+    "https://example.com/document-builder.sjs?html=test"
+  );
+
+  info("Enable F12 and check that devtools open");
+  await pushPref("devtools.f12_enabled", true);
+  await assertToolboxOpens(tab, { shouldOpen: true });
+  await assertToolboxCloses(tab, { shouldClose: true });
+
+  info("Disable F12 and check that devtools will not open");
+  await pushPref("devtools.f12_enabled", false);
+  await assertToolboxOpens(tab, { shouldOpen: false });
+
+  info("Enable F12 again and open devtools");
+  await pushPref("devtools.f12_enabled", true);
+  await assertToolboxOpens(tab, { shouldOpen: true });
+
+  info("Disable F12 and check F12 no longer closes devtools");
+  await pushPref("devtools.f12_enabled", false);
+  await assertToolboxCloses(tab, { shouldClose: false });
+
+  info("Enable F12 and close devtools");
+  await pushPref("devtools.f12_enabled", true);
+  await assertToolboxCloses(tab, { shouldClose: true });
+
+  info("Disable F12 and check other shortcuts still work");
+  await pushPref("devtools.f12_enabled", false);
+  const isMac = Services.appinfo.OS == "Darwin";
+  const shortcut = {
+    key: "i",
+    options: { accelKey: true, altKey: isMac, shiftKey: !isMac },
+  };
+  await assertToolboxOpens(tab, { shouldOpen: true, shortcut });
+  // Check F12 still doesn't close the toolbox
+  await assertToolboxCloses(tab, { shouldClose: false });
+  await assertToolboxCloses(tab, { shouldClose: true, shortcut });
+
+  gBrowser.removeTab(tab);
+});
+
+const assertToolboxCloses = async function (tab, { shortcut, shouldClose }) {
+  info(
+    `Use ${
+      shortcut ? "shortcut" : "F12"
+    } to close the toolbox (close expected: ${shouldClose})`
+  );
+  const onToolboxDestroy = gDevTools.once("toolbox-destroyed");
+
+  if (shortcut) {
+    EventUtils.synthesizeKey(shortcut.key, shortcut.options);
+  } else {
+    EventUtils.synthesizeKey("VK_F12", {});
+  }
+
+  if (shouldClose) {
+    await onToolboxDestroy;
+  } else {
+    const onTimeout = wait(1000).then(() => "TIMEOUT");
+    const res = await Promise.race([onTimeout, onToolboxDestroy]);
+    is(res, "TIMEOUT", "No toolbox-destroyed event received");
+  }
+  is(
+    !gDevTools.getToolboxForTab(tab),
+    shouldClose,
+    `Toolbox was ${shouldClose ? "" : "not "}closed for the test tab`
+  );
+};
+
+const assertToolboxOpens = async function (tab, { shortcut, shouldOpen }) {
+  info(
+    `Use ${
+      shortcut ? "shortcut" : "F12"
+    } to open the toolbox (open expected: ${shouldOpen})`
+  );
+  const onToolboxReady = gDevTools.once("toolbox-ready");
+
+  if (shortcut) {
+    EventUtils.synthesizeKey(shortcut.key, shortcut.options);
+  } else {
+    EventUtils.synthesizeKey("VK_F12", {});
+  }
+
+  if (shouldOpen) {
+    await onToolboxReady;
+    info(`Received toolbox-ready`);
+  } else {
+    const onTimeout = wait(1000).then(() => "TIMEOUT");
+    const res = await Promise.race([onTimeout, onToolboxReady]);
+    is(res, "TIMEOUT", "No toolbox-ready event received");
+  }
+  is(
+    !!gDevTools.getToolboxForTab(tab),
+    shouldOpen,
+    `Toolbox was ${shouldOpen ? "" : "not "}opened for the test tab`
+  );
+};
diff --git a/devtools/client/framework/test/browser_toolbox_dynamic_registration.js b/devtools/client/framework/test/browser_toolbox_dynamic_registration.js
new file mode 100644
index 0000000000..0ea7388eec
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_dynamic_registration.js
@@ -0,0 +1,87 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URL =
+  "data:text/html,test for dynamically registering and unregistering tools";
+
+var toolbox;
+
+function test() {
+  addTab(TEST_URL).then(async tab => {
+    gDevTools.showToolboxForTab(tab).then(testRegister);
+  });
+}
+
+function testRegister(aToolbox) {
+  toolbox = aToolbox;
+  gDevTools.once("tool-registered", toolRegistered);
+
+  gDevTools.registerTool({
+    id: "testTool",
+    label: "Test Tool",
+    inMenu: true,
+    isToolSupported: () => true,
+    build() {},
+  });
+}
+
+function toolRegistered(toolId) {
+  is(toolId, "testTool", "tool-registered event handler sent tool id");
+
+  ok(gDevTools.getToolDefinitionMap().has(toolId), "tool added to map");
+
+  // test that it appeared in the UI
+  const doc = toolbox.doc;
+  const tab = getToolboxTab(doc, toolId);
+  ok(tab, "new tool's tab exists in toolbox UI");
+
+  const panel = doc.getElementById("toolbox-panel-" + toolId);
+  ok(panel, "new tool's panel exists in toolbox UI");
+
+  for (const win of getAllBrowserWindows()) {
+    const menuitem = win.document.getElementById("menuitem_" + toolId);
+    ok(menuitem, "menu item of new tool added to every browser window");
+  }
+
+  // then unregister it
+  testUnregister();
+}
+
+function getAllBrowserWindows() {
+  return Array.from(Services.wm.getEnumerator("navigator:browser"));
+}
+
+function testUnregister() {
+  gDevTools.once("tool-unregistered", toolUnregistered);
+
+  gDevTools.unregisterTool("testTool");
+}
+
+function toolUnregistered(toolId) {
+  is(toolId, "testTool", "tool-unregistered event handler sent tool id");
+
+  ok(!gDevTools.getToolDefinitionMap().has(toolId), "tool removed from map");
+
+  // test that it disappeared from the UI
+  const doc = toolbox.doc;
+  const tab = getToolboxTab(doc, toolId);
+  ok(!tab, "tool's tab was removed from the toolbox UI");
+
+  const panel = doc.getElementById("toolbox-panel-" + toolId);
+  ok(!panel, "tool's panel was removed from toolbox UI");
+
+  for (const win of getAllBrowserWindows()) {
+    const menuitem = win.document.getElementById("menuitem_" + toolId);
+    ok(!menuitem, "menu item removed from every browser window");
+  }
+
+  cleanup();
+}
+
+function cleanup() {
+  toolbox.destroy().then(() => {
+    toolbox = null;
+    gBrowser.removeCurrentTab();
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_error_count.js b/devtools/client/framework/test/browser_toolbox_error_count.js
new file mode 100644
index 0000000000..e4dcf0214f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_error_count.js
@@ -0,0 +1,183 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+// Test for error icon and the error count displayed at right of the
+// toolbox toolbar
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/webconsole/test/browser/shared-head.js",
+  this
+);
+
+const TEST_URI = `https://example.com/document-builder.sjs?html=<meta charset=utf8></meta>
+<script>
+  console.error("Cache Error1");
+  console.exception(false, "Cache Exception");
+  console.warn("Cache warning");
+  console.assert(false, "Cache assert");
+  cache.unknown.access
+</script><body>`;
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  // Make sure we start the test with the split console disabled.
+  await pushPref("devtools.toolbox.splitconsoleEnabled", false);
+  const tab = await addTab(TEST_URI);
+
+  const toolbox = await openToolboxForTab(
+    tab,
+    "inspector",
+    Toolbox.HostType.BOTTOM
+  );
+
+  info("Check for cached errors");
+  // (console.error + console.exception + console.assert + error)
+  let expectedErrorCount = 4;
+
+  await waitFor(() => getErrorIcon(toolbox));
+  is(
+    getErrorIcon(toolbox).getAttribute("title"),
+    "Show Split Console",
+    "Icon has expected title"
+  );
+  is(
+    getErrorIconCount(toolbox),
+    expectedErrorCount,
+    "Correct count is displayed"
+  );
+
+  info("Check that calling console.clear clears the error count");
+  ContentTask.spawn(tab.linkedBrowser, null, function () {
+    content.console.clear();
+  });
+  await waitFor(
+    () => !getErrorIcon(toolbox),
+    "Wait until the error button hides"
+  );
+  ok(true, "The button was hidden after calling console.clear()");
+
+  info("Check that realtime errors increase the counter");
+  ContentTask.spawn(tab.linkedBrowser, null, function () {
+    content.console.error("Live Error1");
+    content.console.error("Live Error2");
+    content.console.exception("Live Exception");
+    content.console.warn("Live warning");
+    content.console.assert(false, "Live assert");
+    content.fetch("unknown-url-that-will-404");
+    const script = content.document.createElement("script");
+    script.textContent = `a.b.c.d`;
+    content.document.body.append(script);
+  });
+
+  expectedErrorCount = 6;
+  await waitFor(() => getErrorIconCount(toolbox) === expectedErrorCount);
+
+  info("Check if split console opens on clicking the error icon");
+  const onSplitConsoleOpen = toolbox.once("split-console");
+  getErrorIcon(toolbox).click();
+  await onSplitConsoleOpen;
+  ok(
+    toolbox.splitConsole,
+    "The split console was opened after clicking on the icon."
+  );
+
+  // Select the console and check that the icon title is updated
+  await toolbox.selectTool("webconsole");
+  is(
+    getErrorIcon(toolbox).getAttribute("title"),
+    null,
+    "When the console is selected, the icon does not have a title"
+  );
+
+  const hud = toolbox.getCurrentPanel().hud;
+  const webconsoleDoc = hud.ui.window.document;
+  // wait until all error messages are displayed in the console
+  await waitFor(
+    async () => (await findAllErrors(hud)).length === expectedErrorCount
+  );
+
+  info("Clear the console output and check that the error icon is hidden");
+  webconsoleDoc.querySelector(".devtools-clear-icon").click();
+  await waitFor(() => !getErrorIcon(toolbox));
+  ok(true, "Clearing the console does hide the icon");
+  await waitFor(async () => (await findAllErrors(hud)).length === 0);
+
+  info("Check that the error count is capped at 99");
+  expectedErrorCount = 100;
+  ContentTask.spawn(tab.linkedBrowser, expectedErrorCount, function (count) {
+    for (let i = 0; i < count; i++) {
+      content.console.error(i);
+    }
+  });
+
+  // Wait until all the messages are displayed in the console
+  await waitFor(
+    async () => (await findAllErrors(hud)).length === expectedErrorCount
+  );
+
+  await waitFor(() => getErrorIconCount(toolbox) === "99+");
+  ok(true, "The message count doesn't go higher than 99");
+
+  info(
+    "Reload the page and check that the error icon has the expected content"
+  );
+  await reloadBrowser();
+
+  // (console.error, console.exception, console.assert and exception)
+  expectedErrorCount = 4;
+  await waitFor(() => getErrorIconCount(toolbox) === expectedErrorCount);
+  ok(true, "Correct count is displayed");
+
+  // wait until all error messages are displayed in the console
+  await waitFor(
+    async () => (await findAllErrors(hud)).length === expectedErrorCount
+  );
+
+  info("Disable the error icon from the options panel");
+  const onOptionsSelected = toolbox.once("options-selected");
+  toolbox.selectTool("options");
+  const optionsPanel = await onOptionsSelected;
+  const errorCountButtonToggleEl = optionsPanel.panelWin.document.querySelector(
+    "input#command-button-errorcount"
+  );
+  errorCountButtonToggleEl.click();
+
+  await waitFor(() => !getErrorIcon(toolbox));
+  ok(true, "The error icon hides when disabling it from the settings panel");
+
+  info("Check that emitting new errors don't show the icon");
+  ContentTask.spawn(tab.linkedBrowser, null, function () {
+    content.console.error("Live Error1 while disabled");
+    content.console.error("Live Error2 while disabled");
+  });
+
+  expectedErrorCount = expectedErrorCount + 2;
+  // Wait until messages are displayed in the console, so the toolbar would have the time
+  // to render the error icon again.
+  await toolbox.selectTool("webconsole");
+  await waitFor(
+    async () => (await findAllErrors(hud)).length === expectedErrorCount
+  );
+  is(
+    getErrorIcon(toolbox),
+    null,
+    "The icon is still hidden even after generating new errors"
+  );
+
+  info("Re-enable the error icon");
+  await toolbox.selectTool("options");
+  errorCountButtonToggleEl.click();
+  await waitFor(() => getErrorIconCount(toolbox) === expectedErrorCount);
+  ok(
+    true,
+    "The error is displayed again, with the correct error count, after enabling it from the settings panel"
+  );
+
+  toolbox.destroy();
+});
+
+function findAllErrors(hud) {
+  return findMessagesVirtualizedByType({ hud, typeSelector: ".error" });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_error_count_reset_on_navigation.js b/devtools/client/framework/test/browser_toolbox_error_count_reset_on_navigation.js
new file mode 100644
index 0000000000..53f5068655
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_error_count_reset_on_navigation.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+// Test for error count in toolbar when navigating and webconsole isn't enabled
+const TEST_URI = `http://example.org/document-builder.sjs?html=<meta charset=utf8></meta>
+<script>
+  console.error("Cache Error1");
+  console.exception(false, "Cache Exception");
+  console.warn("Cache warning");
+  console.assert(false, "Cache assert");
+  cache.unknown.access
+</script>`;
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  // Disable bfcache for Fission for now.
+  // If Fission is disabled, the pref is no-op.
+  await SpecialPowers.pushPrefEnv({
+    set: [["fission.bfcacheInParent", false]],
+  });
+
+  // Make sure we start the test with the split console disabled.
+  // ⚠️ In this test it's important to _not_ enable the console.
+  await pushPref("devtools.toolbox.splitconsoleEnabled", false);
+  const tab = await addTab(TEST_URI);
+
+  const toolbox = await openToolboxForTab(
+    tab,
+    "inspector",
+    Toolbox.HostType.BOTTOM
+  );
+
+  info("Check for cached errors");
+  // (console.error + console.exception + console.assert + error)
+  const expectedErrorCount = 4;
+
+  await waitFor(() => getErrorIcon(toolbox));
+  is(
+    getErrorIcon(toolbox).getAttribute("title"),
+    "Show Split Console",
+    "Icon has expected title"
+  );
+  is(
+    getErrorIconCount(toolbox),
+    expectedErrorCount,
+    "Correct count is displayed"
+  );
+
+  info("Add another error so we have a different count");
+  ContentTask.spawn(tab.linkedBrowser, null, function () {
+    content.console.error("Live Error1");
+  });
+
+  const newExpectedErrorCount = expectedErrorCount + 1;
+  await waitFor(() => getErrorIconCount(toolbox) === newExpectedErrorCount);
+
+  info(
+    "Reload the page and check that the error icon has the expected content"
+  );
+  await reloadBrowser();
+
+  await waitFor(
+    () => getErrorIconCount(toolbox) === expectedErrorCount,
+    "Error count is cleared on navigation and then populated with the expected number of errors"
+  );
+  ok(true, "Correct count is displayed");
+
+  info(
+    "Navigate to an error-less page and check that the error icon is hidden"
+  );
+  await navigateTo(`data:text/html;charset=utf8,No errors`);
+  await waitFor(
+    () => !getErrorIcon(toolbox),
+    "Error count is cleared on navigation"
+  );
+  ok(
+    true,
+    "The error icon was hidden when navigating to a new page without errors"
+  );
+
+  toolbox.destroy();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_fission_navigation.js b/devtools/client/framework/test/browser_toolbox_fission_navigation.js
new file mode 100644
index 0000000000..123a06cce2
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_fission_navigation.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const EXAMPLE_COM_URI =
+  "https://example.com/document-builder.sjs?html=<div id=com>com";
+const EXAMPLE_ORG_URI =
+  "https://example.org/document-builder.sjs?html=<div id=org>org";
+
+add_task(async function () {
+  const tab = await addTab(EXAMPLE_COM_URI);
+
+  const toolbox = await openToolboxForTab(tab, "inspector");
+  const comNode = await getNodeBySelector(toolbox, "#com");
+  ok(comNode, "Found node for the COM page");
+
+  info("Navigate to the ORG page");
+  await navigateTo(EXAMPLE_ORG_URI);
+  const orgNode = await getNodeBySelector(toolbox, "#org");
+  ok(orgNode, "Found node for the ORG page");
+
+  info("Reload the ORG page");
+  await navigateTo(EXAMPLE_ORG_URI);
+  const orgNodeAfterReload = await getNodeBySelector(toolbox, "#org");
+  ok(orgNodeAfterReload, "Found node for the ORG page after reload");
+  isnot(orgNode, orgNodeAfterReload, "The new node is different");
+
+  info("Navigate back to the COM page");
+  await navigateTo(EXAMPLE_COM_URI);
+  const comNodeAfterNavigation = await getNodeBySelector(toolbox, "#com");
+  ok(comNodeAfterNavigation, "Found node for the COM page after navigation");
+
+  info("Navigate to about:blank");
+  await navigateTo("about:blank");
+  const blankBodyAfterNavigation = await getNodeBySelector(toolbox, "body");
+  ok(
+    blankBodyAfterNavigation,
+    "Found node for the about:blank page after navigation"
+  );
+
+  info("Navigate to about:robots");
+  await navigateTo("about:robots");
+  const aboutRobotsAfterNavigation = await getNodeBySelector(
+    toolbox,
+    "div.container"
+  );
+  ok(
+    aboutRobotsAfterNavigation,
+    "Found node for the about:robots page after navigation"
+  );
+});
+
+async function getNodeBySelector(toolbox, selector) {
+  const inspector = await toolbox.selectTool("inspector");
+  return inspector.walker.querySelector(inspector.walker.rootNode, selector);
+}
diff --git a/devtools/client/framework/test/browser_toolbox_frames_list.js b/devtools/client/framework/test/browser_toolbox_frames_list.js
new file mode 100644
index 0000000000..f1d7ff0510
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_frames_list.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that the frames list gets updated as iframes are added/removed from the document,
+// and during navigation.
+
+const TEST_COM_URL =
+  "https://example.com/document-builder.sjs?html=<div id=com>com";
+const TEST_ORG_URL =
+  `https://example.org/document-builder.sjs?html=<div id=org>org</div>` +
+  `<iframe src="https://example.org/document-builder.sjs?html=example.org iframe"></iframe>` +
+  `<iframe src="https://example.com/document-builder.sjs?html=example.com iframe"></iframe>`;
+
+add_task(async function () {
+  // Enable the frames button.
+  await pushPref("devtools.command-button-frames.enabled", true);
+
+  const tab = await addTab(TEST_COM_URL);
+
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "webconsole",
+  });
+
+  ok(
+    !getFramesButton(toolbox),
+    "Frames button is not rendered when there's no iframes in the page"
+  );
+  await checkFramesList(toolbox, []);
+
+  info("Create a same origin (example.com) iframe");
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    const comIframe = content.document.createElement("iframe");
+    comIframe.src =
+      "https://example.com/document-builder.sjs?html=example.com iframe";
+    content.document.body.appendChild(comIframe);
+  });
+
+  await waitFor(() => getFramesButton(toolbox));
+  ok(true, "Button is displayed when adding an iframe");
+
+  info("Check the content of the frames list");
+  await checkFramesList(toolbox, [
+    TEST_COM_URL,
+    "https://example.com/document-builder.sjs?html=example.com iframe",
+  ]);
+
+  info("Create a cross-process origin (example.org) iframe");
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    const orgIframe = content.document.createElement("iframe");
+    orgIframe.src =
+      "https://example.org/document-builder.sjs?html=example.org iframe";
+    content.document.body.appendChild(orgIframe);
+  });
+
+  info("Check that the content of the frames list was updated");
+  try {
+    await checkFramesList(toolbox, [
+      TEST_COM_URL,
+      "https://example.com/document-builder.sjs?html=example.com iframe",
+      "https://example.org/document-builder.sjs?html=example.org iframe",
+    ]);
+
+    // If Fission is enabled and EFT is not, we shouldn't hit this line as `checkFramesList`
+    // should throw (as remote frames are only displayed when EFT is enabled).
+    ok(
+      !isFissionEnabled() || isEveryFrameTargetEnabled(),
+      "iframe picker should only display remote frames when EFT is enabled"
+    );
+  } catch (e) {
+    ok(
+      isFissionEnabled() && !isEveryFrameTargetEnabled(),
+      "iframe picker displays remote frames only when EFT is enabled"
+    );
+    return;
+  }
+
+  info("Reload and check that the frames list is cleared");
+  await reloadBrowser();
+  await waitFor(() => !getFramesButton(toolbox));
+  ok(
+    true,
+    "The button was hidden when reloading as the page does not have iframes"
+  );
+  await checkFramesList(toolbox, []);
+
+  info("Navigate to a different origin, on a page with iframes");
+  await navigateTo(TEST_ORG_URL);
+  await checkFramesList(toolbox, [
+    TEST_ORG_URL,
+    "https://example.org/document-builder.sjs?html=example.org iframe",
+    "https://example.com/document-builder.sjs?html=example.com iframe",
+  ]);
+
+  info("Check that frames list is updated when removing same-origin iframe");
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    content.document.querySelector("iframe").remove();
+  });
+  await checkFramesList(toolbox, [
+    TEST_ORG_URL,
+    "https://example.com/document-builder.sjs?html=example.com iframe",
+  ]);
+
+  info("Check that frames list is updated when removing cross-origin iframe");
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    content.document.querySelector("iframe").remove();
+  });
+  await waitFor(() => !getFramesButton(toolbox));
+  ok(true, "The button was hidden when removing the last iframe on the page");
+  await checkFramesList(toolbox, []);
+
+  info("Check that the list does have expected items after reloading");
+  await reloadBrowser();
+  await waitFor(() => getFramesButton(toolbox));
+  ok(true, "button is displayed after reloading");
+  await checkFramesList(toolbox, [
+    TEST_ORG_URL,
+    "https://example.org/document-builder.sjs?html=example.org iframe",
+    "https://example.com/document-builder.sjs?html=example.com iframe",
+  ]);
+});
+
+function getFramesButton(toolbox) {
+  return toolbox.doc.getElementById("command-button-frames");
+}
+
+async function checkFramesList(toolbox, expectedFrames) {
+  const frames = await waitFor(() => {
+    // items might be added in the list before their url is known, so exclude empty items.
+    const f = getFramesLabels(toolbox).filter(t => t !== "");
+    if (f.length !== expectedFrames.length) {
+      return false;
+    }
+
+    return f;
+  });
+
+  is(
+    JSON.stringify(frames.sort()),
+    JSON.stringify(expectedFrames.sort()),
+    "The expected frames are displayed"
+  );
+}
+
+function getFramesLabels(toolbox) {
+  return Array.from(
+    toolbox.doc.querySelectorAll("#toolbox-frame-menu .command .label")
+  ).map(el => el.textContent);
+}
diff --git a/devtools/client/framework/test/browser_toolbox_getpanelwhenready.js b/devtools/client/framework/test/browser_toolbox_getpanelwhenready.js
new file mode 100644
index 0000000000..85436c2925
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_getpanelwhenready.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that getPanelWhenReady returns the correct panel in promise
+// resolutions regardless of whether it has opened first.
+
+var toolbox = null;
+
+const URL = "data:text/html;charset=utf8,test for getPanelWhenReady";
+
+add_task(async function () {
+  const tab = await addTab(URL);
+  toolbox = await gDevTools.showToolboxForTab(tab);
+
+  const debuggerPanelPromise = toolbox.getPanelWhenReady("jsdebugger");
+  await toolbox.selectTool("jsdebugger");
+  const debuggerPanel = await debuggerPanelPromise;
+
+  is(
+    debuggerPanel,
+    toolbox.getPanel("jsdebugger"),
+    "The debugger panel from getPanelWhenReady before loading is the actual panel"
+  );
+
+  const debuggerPanel2 = await toolbox.getPanelWhenReady("jsdebugger");
+  is(
+    debuggerPanel2,
+    toolbox.getPanel("jsdebugger"),
+    "The debugger panel from getPanelWhenReady after loading is the actual panel"
+  );
+
+  await cleanup();
+});
+
+async function cleanup() {
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  toolbox = null;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_highlight.js b/devtools/client/framework/test/browser_toolbox_highlight.js
new file mode 100644
index 0000000000..d0712aeed5
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_highlight.js
@@ -0,0 +1,122 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+var toolbox = null;
+
+function test() {
+  (async function () {
+    const URL = "data:text/plain;charset=UTF-8,Nothing to see here, move along";
+
+    const TOOL_ID_1 = "jsdebugger";
+    const TOOL_ID_2 = "webconsole";
+    await addTab(URL);
+
+    toolbox = await gDevTools.showToolboxForTab(gBrowser.selectedTab, {
+      toolId: TOOL_ID_1,
+      hostType: Toolbox.HostType.BOTTOM,
+    });
+
+    // select tool 2
+    await toolbox.selectTool(TOOL_ID_2);
+    // and highlight the first one
+    await highlightTab(TOOL_ID_1);
+    // to see if it has the proper class.
+    await checkHighlighted(TOOL_ID_1);
+    // Now switch back to first tool
+    await toolbox.selectTool(TOOL_ID_1);
+    // to check again. But there is no easy way to test if
+    // it is showing orange or not.
+    await checkNoHighlightWhenSelected(TOOL_ID_1);
+    // Switch to tool 2 again
+    await toolbox.selectTool(TOOL_ID_2);
+    // and check again.
+    await checkHighlighted(TOOL_ID_1);
+    // Highlight another tool
+    await highlightTab(TOOL_ID_2);
+    // Check that both tools are highlighted.
+    await checkHighlighted(TOOL_ID_1);
+    // Check second tool being both highlighted and selected.
+    await checkNoHighlightWhenSelected(TOOL_ID_2);
+    // Select tool 1
+    await toolbox.selectTool(TOOL_ID_1);
+    // Check second tool is still highlighted
+    await checkHighlighted(TOOL_ID_2);
+    // Unhighlight the second tool
+    await unhighlightTab(TOOL_ID_2);
+    // to see the classes gone.
+    await checkNoHighlight(TOOL_ID_2);
+    // Now unhighlight the tool
+    await unhighlightTab(TOOL_ID_1);
+    // to see the classes gone.
+    await checkNoHighlight(TOOL_ID_1);
+
+    // Now close the toolbox and exit.
+    executeSoon(() => {
+      toolbox.destroy().then(() => {
+        toolbox = null;
+        gBrowser.removeCurrentTab();
+        finish();
+      });
+    });
+  })().catch(error => {
+    ok(false, "There was an error running the test.");
+  });
+}
+
+function highlightTab(toolId) {
+  info(`Highlighting tool ${toolId}'s tab.`);
+  return toolbox.highlightTool(toolId);
+}
+
+function unhighlightTab(toolId) {
+  info(`Unhighlighting tool ${toolId}'s tab.`);
+  return toolbox.unhighlightTool(toolId);
+}
+
+function checkHighlighted(toolId) {
+  const tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(
+    toolbox.isHighlighted(toolId),
+    `Toolbox.isHighlighted reports ${toolId} as highlighted`
+  );
+  ok(
+    tab.classList.contains("highlighted"),
+    `The highlighted class is present in ${toolId}.`
+  );
+  ok(
+    !tab.classList.contains("selected"),
+    `The tab is not selected in ${toolId}`
+  );
+}
+
+function checkNoHighlightWhenSelected(toolId) {
+  const tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(
+    toolbox.isHighlighted(toolId),
+    `Toolbox.isHighlighted reports ${toolId} as highlighted`
+  );
+  ok(
+    tab.classList.contains("highlighted"),
+    `The highlighted class is present in ${toolId}`
+  );
+  ok(
+    tab.classList.contains("selected"),
+    `And the tab is selected, so the orange glow will not be present. in ${toolId}`
+  );
+}
+
+function checkNoHighlight(toolId) {
+  const tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(
+    !toolbox.isHighlighted(toolId),
+    `Toolbox.isHighlighted reports ${toolId} as not highlighted`
+  );
+  ok(
+    !tab.classList.contains("highlighted"),
+    `The highlighted class is not present in ${toolId}`
+  );
+}
diff --git a/devtools/client/framework/test/browser_toolbox_hosts.js b/devtools/client/framework/test/browser_toolbox_hosts.js
new file mode 100644
index 0000000000..37738865a9
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_hosts.js
@@ -0,0 +1,226 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  gDevToolsBrowser,
+} = require("resource://devtools/client/framework/devtools-browser.js");
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+const { LEFT, RIGHT, BOTTOM, WINDOW } = Toolbox.HostType;
+let toolbox;
+
+// We are opening/close toolboxes many times,
+// which introduces long GC pauses between each sub task
+// and requires some more time to run in DEBUG builds.
+requestLongerTimeout(2);
+
+const URL =
+  "data:text/html;charset=utf8,test for opening toolbox in different hosts";
+
+add_task(async function () {
+  const win = await BrowserTestUtils.openNewBrowserWindow();
+  win.gBrowser.selectedTab = BrowserTestUtils.addTab(win.gBrowser, URL);
+
+  const tab = win.gBrowser.selectedTab;
+  toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "webconsole",
+    hostType: Toolbox.HostType.WINDOW,
+  });
+  const onToolboxClosed = toolbox.once("destroyed");
+  ok(
+    gDevToolsBrowser.hasToolboxOpened(win),
+    "hasToolboxOpened is true before closing the toolbox"
+  );
+  await BrowserTestUtils.closeWindow(win);
+  ok(
+    !gDevToolsBrowser.hasToolboxOpened(win),
+    "hasToolboxOpened is false after closing the window"
+  );
+
+  info("Wait for toolbox to be destroyed after browser window is closed");
+  await onToolboxClosed;
+  toolbox = null;
+});
+
+add_task(async function runTest() {
+  info("Create a test tab and open the toolbox");
+  const tab = await addTab(URL);
+  toolbox = await gDevTools.showToolboxForTab(tab, { toolId: "webconsole" });
+
+  await runHostTests(gBrowser);
+  await toolbox.destroy();
+
+  toolbox = null;
+  gBrowser.removeCurrentTab();
+});
+
+// We run the same host switching tests in a private window.
+// See Bug 1581093 for an example of issue specific to private windows.
+add_task(async function runPrivateWindowTest() {
+  info("Create a private window + tab and open the toolbox");
+  await runHostTestsFromSeparateWindow({
+    private: true,
+  });
+});
+
+// We run the same host switching tests in a non-fission window.
+// See Bug 1650963 for an example of issue specific to private windows.
+add_task(async function runNonFissionWindowTest() {
+  info("Create a non-fission window + tab and open the toolbox");
+  await runHostTestsFromSeparateWindow({
+    fission: false,
+  });
+});
+
+async function runHostTestsFromSeparateWindow(options) {
+  const win = await BrowserTestUtils.openNewBrowserWindow(options);
+  const browser = win.gBrowser;
+  browser.selectedTab = BrowserTestUtils.addTab(browser, URL);
+
+  const tab = browser.selectedTab;
+  toolbox = await gDevTools.showToolboxForTab(tab, { toolId: "webconsole" });
+
+  await runHostTests(browser);
+  await toolbox.destroy();
+
+  toolbox = null;
+  await BrowserTestUtils.closeWindow(win);
+}
+
+async function runHostTests(browser) {
+  await testBottomHost(browser);
+  await testLeftHost(browser);
+  await testRightHost(browser);
+  await testWindowHost(browser);
+  await testToolSelect();
+  await testDestroy(browser);
+  await testRememberHost();
+  await testPreviousHost();
+}
+
+function testBottomHost(browser) {
+  checkHostType(toolbox, BOTTOM);
+
+  // test UI presence
+  const panel = browser.getPanel();
+  const iframe = panel.querySelector(".devtools-toolbox-bottom-iframe");
+  ok(iframe, "toolbox bottom iframe exists");
+
+  checkToolboxLoaded(iframe);
+}
+
+async function testLeftHost(browser) {
+  await toolbox.switchHost(LEFT);
+  checkHostType(toolbox, LEFT);
+
+  // test UI presence
+  const panel = browser.getPanel();
+  const bottom = panel.querySelector(".devtools-toolbox-bottom-iframe");
+  ok(!bottom, "toolbox bottom iframe doesn't exist");
+
+  const iframe = panel.querySelector(".devtools-toolbox-side-iframe");
+  ok(iframe, "toolbox side iframe exists");
+
+  checkToolboxLoaded(iframe);
+}
+
+async function testRightHost(browser) {
+  await toolbox.switchHost(RIGHT);
+  checkHostType(toolbox, RIGHT);
+
+  // test UI presence
+  const panel = browser.getPanel();
+  const bottom = panel.querySelector(".devtools-toolbox-bottom-iframe");
+  ok(!bottom, "toolbox bottom iframe doesn't exist");
+
+  const iframe = panel.querySelector(".devtools-toolbox-side-iframe");
+  ok(iframe, "toolbox side iframe exists");
+
+  checkToolboxLoaded(iframe);
+}
+
+async function testWindowHost(browser) {
+  await toolbox.switchHost(WINDOW);
+  checkHostType(toolbox, WINDOW);
+
+  const panel = browser.getPanel();
+  const sidebar = panel.querySelector(".devtools-toolbox-side-iframe");
+  ok(!sidebar, "toolbox sidebar iframe doesn't exist");
+
+  const win = Services.wm.getMostRecentWindow("devtools:toolbox");
+  ok(win, "toolbox separate window exists");
+
+  const iframe = win.document.querySelector(".devtools-toolbox-window-iframe");
+  checkToolboxLoaded(iframe);
+}
+
+async function testToolSelect() {
+  // make sure we can load a tool after switching hosts
+  await toolbox.selectTool("inspector");
+}
+
+async function testDestroy(browser) {
+  await toolbox.destroy();
+  toolbox = await gDevTools.showToolboxForTab(browser.selectedTab);
+}
+
+function testRememberHost() {
+  // last host was the window - make sure it's the same when re-opening
+  is(toolbox.hostType, WINDOW, "host remembered");
+
+  const win = Services.wm.getMostRecentWindow("devtools:toolbox");
+  ok(win, "toolbox separate window exists");
+}
+
+async function testPreviousHost() {
+  // last host was the window - make sure it's the same when re-opening
+  is(toolbox.hostType, WINDOW, "host remembered");
+
+  info("Switching to left");
+  await toolbox.switchHost(LEFT);
+  checkHostType(toolbox, LEFT, WINDOW);
+
+  info("Switching to right");
+  await toolbox.switchHost(RIGHT);
+  checkHostType(toolbox, RIGHT, LEFT);
+
+  info("Switching to bottom");
+  await toolbox.switchHost(BOTTOM);
+  checkHostType(toolbox, BOTTOM, RIGHT);
+
+  info("Switching from bottom to right");
+  await toolbox.switchToPreviousHost();
+  checkHostType(toolbox, RIGHT, BOTTOM);
+
+  info("Switching from right to bottom");
+  await toolbox.switchToPreviousHost();
+  checkHostType(toolbox, BOTTOM, RIGHT);
+
+  info("Switching to window");
+  await toolbox.switchHost(WINDOW);
+  checkHostType(toolbox, WINDOW, BOTTOM);
+
+  info("Switching from window to bottom");
+  await toolbox.switchToPreviousHost();
+  checkHostType(toolbox, BOTTOM, WINDOW);
+
+  info("Forcing the previous host to match the current (bottom)");
+  Services.prefs.setCharPref("devtools.toolbox.previousHost", BOTTOM);
+
+  info("Switching from bottom to right (since previous=current=bottom");
+  await toolbox.switchToPreviousHost();
+  checkHostType(toolbox, RIGHT, BOTTOM);
+
+  info("Forcing the previous host to match the current (right)");
+  Services.prefs.setCharPref("devtools.toolbox.previousHost", RIGHT);
+  info("Switching from right to bottom (since previous=current=side");
+  await toolbox.switchToPreviousHost();
+  checkHostType(toolbox, BOTTOM, RIGHT);
+}
+
+function checkToolboxLoaded(iframe) {
+  const tabs = iframe.contentDocument.querySelector(".toolbox-tabs");
+  ok(tabs, "toolbox UI has been loaded into iframe");
+}
diff --git a/devtools/client/framework/test/browser_toolbox_hosts_size.js b/devtools/client/framework/test/browser_toolbox_hosts_size.js
new file mode 100644
index 0000000000..81cce09a67
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_hosts_size.js
@@ -0,0 +1,136 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that getPanelWhenReady returns the correct panel in promise
+// resolutions regardless of whether it has opened first.
+
+const URL = "data:text/html;charset=utf8,test for host sizes";
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  // Set size prefs to make the hosts way too big, so that the size has
+  // to be clamped to fit into the browser window.
+  Services.prefs.setIntPref("devtools.toolbox.footer.height", 10000);
+  Services.prefs.setIntPref("devtools.toolbox.sidebar.width", 10000);
+
+  const tab = await addTab(URL);
+  const panel = gBrowser.getPanel();
+  const { clientHeight: panelHeight, clientWidth: panelWidth } = panel;
+  const toolbox = await gDevTools.showToolboxForTab(tab);
+
+  is(
+    panel.clientHeight,
+    panelHeight,
+    "Opening the toolbox hasn't changed the height of the panel"
+  );
+  is(
+    panel.clientWidth,
+    panelWidth,
+    "Opening the toolbox hasn't changed the width of the panel"
+  );
+
+  let iframe = panel.querySelector(".devtools-toolbox-bottom-iframe");
+  is(
+    iframe.clientHeight,
+    panelHeight - 25,
+    "The iframe fits within the available space"
+  );
+
+  iframe.style.height = "10000px"; // Set height to something unreasonably large.
+  Assert.less(
+    iframe.clientHeight,
+    panelHeight,
+    `The iframe fits within the available space (${iframe.clientHeight} < ${panelHeight})`
+  );
+
+  await toolbox.switchHost(Toolbox.HostType.RIGHT);
+  iframe = panel.querySelector(".devtools-toolbox-side-iframe");
+  iframe.style.minWidth = "1px"; // Disable the min width set in css
+  is(
+    iframe.clientWidth,
+    panelWidth - 25,
+    "The iframe fits within the available space"
+  );
+
+  const oldWidth = iframe.style.width;
+  iframe.style.width = "10000px"; // Set width to something unreasonably large.
+  Assert.less(
+    iframe.clientWidth,
+    panelWidth,
+    `The iframe fits within the available space (${iframe.clientWidth} < ${panelWidth})`
+  );
+  iframe.style.width = oldWidth;
+
+  // on shutdown, the sidebar width will be set to the clientWidth of the iframe
+  const expectedWidth = iframe.clientWidth;
+
+  info("waiting for cleanup");
+  await cleanup(toolbox);
+  // Wait until the toolbox-host-manager was destroyed and updated the preferences
+  // to avoid side effects in the next test.
+  await waitUntil(() => {
+    const savedWidth = Services.prefs.getIntPref(
+      "devtools.toolbox.sidebar.width"
+    );
+    info(`waiting for saved pref: ${savedWidth}, ${expectedWidth}`);
+    return savedWidth === expectedWidth;
+  });
+});
+
+add_task(async function () {
+  // Set size prefs to something reasonable, so we can check to make sure
+  // they are being set properly.
+  Services.prefs.setIntPref("devtools.toolbox.footer.height", 100);
+  Services.prefs.setIntPref("devtools.toolbox.sidebar.width", 100);
+
+  const tab = await addTab(URL);
+  const panel = gBrowser.getPanel();
+  const { clientHeight: panelHeight, clientWidth: panelWidth } = panel;
+  const toolbox = await gDevTools.showToolboxForTab(tab);
+
+  is(
+    panel.clientHeight,
+    panelHeight,
+    "Opening the toolbox hasn't changed the height of the panel"
+  );
+  is(
+    panel.clientWidth,
+    panelWidth,
+    "Opening the toolbox hasn't changed the width of the panel"
+  );
+
+  let iframe = panel.querySelector(".devtools-toolbox-bottom-iframe");
+  is(iframe.clientHeight, 100, "The iframe is resized properly");
+  const horzSplitter = panel.querySelector(".devtools-horizontal-splitter");
+  dragElement(horzSplitter, { startX: 1, startY: 1, deltaX: 0, deltaY: -50 });
+  is(iframe.clientHeight, 150, "The iframe was resized by the splitter");
+
+  await toolbox.switchHost(Toolbox.HostType.RIGHT);
+  iframe = panel.querySelector(".devtools-toolbox-side-iframe");
+  iframe.style.minWidth = "1px"; // Disable the min width set in css
+  is(iframe.clientWidth, 100, "The iframe is resized properly");
+
+  info("Resize the toolbox manually by 50 pixels");
+  const sideSplitter = panel.querySelector(".devtools-side-splitter");
+  dragElement(sideSplitter, { startX: 1, startY: 1, deltaX: -50, deltaY: 0 });
+  is(iframe.clientWidth, 150, "The iframe was resized by the splitter");
+
+  await cleanup(toolbox);
+});
+
+function dragElement(el, { startX, startY, deltaX, deltaY }) {
+  const endX = startX + deltaX;
+  const endY = startY + deltaY;
+  EventUtils.synthesizeMouse(el, startX, startY, { type: "mousedown" }, window);
+  EventUtils.synthesizeMouse(el, endX, endY, { type: "mousemove" }, window);
+  EventUtils.synthesizeMouse(el, endX, endY, { type: "mouseup" }, window);
+}
+
+async function cleanup(toolbox) {
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+  Services.prefs.clearUserPref("devtools.toolbox.footer.height");
+  Services.prefs.clearUserPref("devtools.toolbox.sidebar.width");
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_hosts_telemetry.js b/devtools/client/framework/test/browser_toolbox_hosts_telemetry.js
new file mode 100644
index 0000000000..92992048dd
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_hosts_telemetry.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+const { LEFT, RIGHT, BOTTOM, WINDOW } = Toolbox.HostType;
+
+const URL = "data:text/html;charset=utf8,browser_toolbox_hosts_telemetry.js";
+
+add_task(async function () {
+  startTelemetry();
+
+  info("Create a test tab and open the toolbox");
+  const tab = await addTab(URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "webconsole",
+  });
+
+  await changeToolboxHost(toolbox);
+  await checkResults();
+});
+
+async function changeToolboxHost(toolbox) {
+  info("Switch toolbox host");
+  await toolbox.switchHost(RIGHT);
+  await toolbox.switchHost(WINDOW);
+  await toolbox.switchHost(BOTTOM);
+  await toolbox.switchHost(LEFT);
+  await toolbox.switchHost(RIGHT);
+  await toolbox.switchHost(WINDOW);
+  await toolbox.switchHost(BOTTOM);
+  await toolbox.switchHost(LEFT);
+  await toolbox.switchHost(RIGHT);
+}
+
+function checkResults() {
+  // Check for:
+  //   - 3 "bottom" entries.
+  //   - 2 "left" entries.
+  //   - 3 "right" entries.
+  //   - 2 "window" entries.
+  checkTelemetry(
+    "DEVTOOLS_TOOLBOX_HOST",
+    "",
+    { 0: 3, 1: 3, 2: 2, 4: 2, 5: 0 },
+    "array"
+  );
+}
diff --git a/devtools/client/framework/test/browser_toolbox_keyboard_navigation.js b/devtools/client/framework/test/browser_toolbox_keyboard_navigation.js
new file mode 100644
index 0000000000..17ba9efcf9
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_keyboard_navigation.js
@@ -0,0 +1,136 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests keyboard navigation of devtools tabbar.
+
+const TEST_URL =
+  "data:text/html;charset=utf8,test page for toolbar keyboard navigation";
+
+function containsFocus(aDoc, aElm) {
+  let elm = aDoc.activeElement;
+  while (elm) {
+    if (elm === aElm) {
+      return true;
+    }
+    elm = elm.parentNode;
+  }
+  return false;
+}
+
+add_task(async function () {
+  info("Create a test tab and open the toolbox");
+  const toolbox = await openNewTabAndToolbox(TEST_URL, "webconsole");
+  const doc = toolbox.doc;
+
+  const toolbar = doc.querySelector(".devtools-tabbar");
+  const toolbarControls = [
+    ...toolbar.querySelectorAll(".devtools-tab, button"),
+  ].filter(
+    elm =>
+      !elm.hidden &&
+      doc.defaultView.getComputedStyle(elm).getPropertyValue("display") !==
+        "none"
+  );
+
+  // Put the keyboard focus onto the first toolbar control.
+  toolbarControls[0].focus();
+  ok(containsFocus(doc, toolbar), "Focus is within the toolbar");
+
+  // Move the focus away from toolbar to a next focusable element.
+  EventUtils.synthesizeKey("KEY_Tab");
+  ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
+
+  // Move the focus back to the toolbar.
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  ok(containsFocus(doc, toolbar), "Focus is within the toolbar again");
+
+  // Move through the toolbar forward using the right arrow key.
+  for (let i = 0; i < toolbarControls.length; ++i) {
+    is(doc.activeElement.id, toolbarControls[i].id, "New control is focused");
+    if (i < toolbarControls.length - 1) {
+      EventUtils.synthesizeKey("KEY_ArrowRight");
+    }
+  }
+
+  // Move the focus away from toolbar to a next focusable element.
+  EventUtils.synthesizeKey("KEY_Tab");
+  ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
+
+  // Move the focus back to the toolbar.
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  ok(containsFocus(doc, toolbar), "Focus is within the toolbar again");
+
+  // Move through the toolbar backward using the left arrow key.
+  for (let i = toolbarControls.length - 1; i >= 0; --i) {
+    is(doc.activeElement.id, toolbarControls[i].id, "New control is focused");
+    if (i > 0) {
+      EventUtils.synthesizeKey("KEY_ArrowLeft");
+    }
+  }
+
+  // Move focus to the 3rd (non-first) toolbar control.
+  const expectedFocusedControl = toolbarControls[2];
+  EventUtils.synthesizeKey("KEY_ArrowRight");
+  EventUtils.synthesizeKey("KEY_ArrowRight");
+  is(doc.activeElement.id, expectedFocusedControl.id, "New control is focused");
+
+  // Move the focus away from toolbar to a next focusable element.
+  EventUtils.synthesizeKey("KEY_Tab");
+  ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
+
+  // Move the focus back to the toolbar, ensure we land on the last active
+  // descendant control.
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  is(doc.activeElement.id, expectedFocusedControl.id, "New control is focused");
+});
+
+// Test that moving the focus of tab button and selecting it.
+add_task(async function () {
+  info("Create a test tab and open the toolbox");
+  const toolbox = await openNewTabAndToolbox(TEST_URL, "inspector");
+  const doc = toolbox.doc;
+
+  const toolbar = doc.querySelector(".toolbox-tabs");
+  const tabButtons = toolbar.querySelectorAll(".devtools-tab, button");
+  const win = tabButtons[0].ownerDocument.defaultView;
+
+  // Put the keyboard focus onto the first tab button.
+  tabButtons[0].focus();
+  ok(containsFocus(doc, toolbar), "Focus is within the toolbox");
+  is(doc.activeElement.id, tabButtons[0].id, "First tab button is focused.");
+
+  // Move the focused tab and select it by using enter key.
+  let onKeyEvent = once(win, "keydown");
+  EventUtils.synthesizeKey("KEY_ArrowRight");
+  await onKeyEvent;
+
+  let onceSelected = toolbox.once("webconsole-selected");
+  EventUtils.synthesizeKey("Enter");
+  await onceSelected;
+  is(
+    doc.activeElement.id,
+    "toolbox-panel-iframe-" + toolbox.currentToolId,
+    "Selected tool frame is now focused."
+  );
+
+  // Webconsole steal the focus from button after sending "webconsole-selected"
+  // event.
+  tabButtons[1].focus();
+
+  // Return the focused tab with space key.
+  onKeyEvent = once(win, "keydown");
+  EventUtils.synthesizeKey("KEY_ArrowLeft");
+  await onKeyEvent;
+
+  onceSelected = toolbox.once("inspector-selected");
+  EventUtils.synthesizeKey(" ");
+  await onceSelected;
+
+  is(
+    doc.activeElement.id,
+    "toolbox-panel-iframe-" + toolbox.currentToolId,
+    "Selected tool frame is now focused."
+  );
+});
diff --git a/devtools/client/framework/test/browser_toolbox_keyboard_navigation_notification_box.js b/devtools/client/framework/test/browser_toolbox_keyboard_navigation_notification_box.js
new file mode 100644
index 0000000000..135559cb2f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_keyboard_navigation_notification_box.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests keyboard navigation of the DevTools notification box.
+
+// The test page attempts to load a stylesheet at an invalid URL which will
+// trigger a devtools notification to show up on top of the window.
+const TEST_PAGE = `<link rel="stylesheet" type="text/css" href="http://mochi.test:1234/invalid.port">`;
+const TEST_URL = `data:text/html;charset=utf8,${TEST_PAGE}`;
+
+add_task(async function () {
+  info("Create a test tab and open the toolbox");
+  const toolbox = await openNewTabAndToolbox(TEST_URL, "styleeditor");
+  const doc = toolbox.doc;
+
+  info("Wait until the notification box displays the stylesheet warning");
+  const notificationBox = await waitFor(() =>
+    doc.querySelector(".notificationbox")
+  );
+
+  ok(
+    notificationBox.querySelector(".notification"),
+    "A notification is rendered"
+  );
+
+  const toolbar = doc.querySelector(".devtools-tabbar");
+  const tabButtons = toolbar.querySelectorAll(".devtools-tab, button");
+
+  // Put the keyboard focus onto the first tab button.
+  tabButtons[0].focus();
+  is(doc.activeElement.id, tabButtons[0].id, "First tab button is focused.");
+
+  // Move the focus to the notification box.
+  info("Send a shift+tab key event to focus the previous focusable element");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  is(
+    doc.activeElement,
+    notificationBox.querySelector(".messageCloseButton"),
+    "The focus is on the close button of the notification"
+  );
+
+  info("Send a vk_space key event to click on the close button");
+  EventUtils.synthesizeKey("VK_SPACE");
+
+  info("Wait until the notification is removed");
+  await waitUntil(() => !notificationBox.querySelector(".notificationbox"));
+});
diff --git a/devtools/client/framework/test/browser_toolbox_meatball.js b/devtools/client/framework/test/browser_toolbox_meatball.js
new file mode 100644
index 0000000000..04d9a3a0cd
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_meatball.js
@@ -0,0 +1,135 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Sanity test for meatball menu.
+//
+// We also use this to test the common Menu* components since we don't currently
+// have a means of testing React components in isolation.
+
+const {
+  focusableSelector,
+} = require("resource://devtools/client/shared/focus.js");
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  const tab = await addTab("about:blank");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "inspector",
+    Toolbox.HostType.BOTTOM
+  );
+
+  info("Check opening meatball menu by clicking the menu button");
+  await openMeatballMenuWithClick(toolbox);
+  const menuDockToBottom = toolbox.doc.getElementById(
+    "toolbox-meatball-menu-dock-bottom"
+  );
+  Assert.strictEqual(
+    menuDockToBottom.getAttribute("aria-checked"),
+    "true",
+    "menuDockToBottom has checked"
+  );
+
+  info("Check closing meatball menu by clicking outside the popup area");
+  await closeMeatballMenuWithClick(toolbox);
+
+  info("Check moving the focus element with key event");
+  await openMeatballMenuWithClick(toolbox);
+  checkKeyHandling(toolbox);
+
+  info("Check closing meatball menu with escape key");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, toolbox.win);
+  await waitForMeatballMenuToClose(toolbox);
+
+  // F1 should trigger the settings panel and close the menu at the same time.
+  info("Check closing meatball menu with F1 key");
+  await openMeatballMenuWithClick(toolbox);
+  EventUtils.synthesizeKey("VK_F1", {}, toolbox.win);
+  await waitForMeatballMenuToClose(toolbox);
+
+  await toolbox.destroy();
+});
+
+async function openMeatballMenuWithClick(toolbox) {
+  const meatballButton = toolbox.doc.getElementById(
+    "toolbox-meatball-menu-button"
+  );
+  await waitUntil(() => meatballButton.style.pointerEvents !== "none");
+  EventUtils.synthesizeMouseAtCenter(meatballButton, {}, toolbox.win);
+
+  const panel = toolbox.doc.querySelectorAll(".tooltip-xul-wrapper");
+  const shownListener = new Promise(res => {
+    panel[0].addEventListener("popupshown", res, { once: true });
+  });
+
+  const menuPanel = toolbox.doc.getElementById(
+    "toolbox-meatball-menu-button-panel"
+  );
+  ok(menuPanel, "meatball panel is available");
+
+  info("Waiting for the menu panel to be displayed");
+
+  await shownListener;
+  await waitUntil(() => menuPanel.classList.contains("tooltip-visible"));
+}
+
+async function closeMeatballMenuWithClick(toolbox) {
+  const meatballButton = toolbox.doc.getElementById(
+    "toolbox-meatball-menu-button"
+  );
+  await waitUntil(
+    () => toolbox.win.getComputedStyle(meatballButton).pointerEvents === "none"
+  );
+  meatballButton.click();
+
+  const menuPanel = toolbox.doc.getElementById(
+    "toolbox-meatball-menu-button-panel"
+  );
+  ok(menuPanel, "meatball panel is available");
+
+  info("Waiting for the menu panel to be hidden");
+  await waitUntil(() => !menuPanel.classList.contains("tooltip-visible"));
+}
+
+async function waitForMeatballMenuToClose(toolbox) {
+  const menuPanel = toolbox.doc.getElementById(
+    "toolbox-meatball-menu-button-panel"
+  );
+  ok(menuPanel, "meatball panel is available");
+
+  info("Waiting for the menu panel to be hidden");
+  await waitUntil(() => !menuPanel.classList.contains("tooltip-visible"));
+}
+
+function checkKeyHandling(toolbox) {
+  const selectable = toolbox.doc
+    .getElementById("toolbox-meatball-menu")
+    .querySelectorAll(focusableSelector);
+
+  EventUtils.synthesizeKey("VK_DOWN", {}, toolbox.win);
+  is(
+    toolbox.doc.activeElement,
+    selectable[0],
+    "First item selected with down key."
+  );
+  EventUtils.synthesizeKey("VK_UP", {}, toolbox.win);
+  is(
+    toolbox.doc.activeElement,
+    selectable[selectable.length - 1],
+    "End item selected with up key."
+  );
+  EventUtils.synthesizeKey("VK_HOME", {}, toolbox.win);
+  is(
+    toolbox.doc.activeElement,
+    selectable[0],
+    "First item selected with home key."
+  );
+  EventUtils.synthesizeKey("VK_END", {}, toolbox.win);
+  is(
+    toolbox.doc.activeElement,
+    selectable[selectable.length - 1],
+    "End item selected with down key."
+  );
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options.js b/devtools/client/framework/test/browser_toolbox_options.js
new file mode 100644
index 0000000000..3b5d7f2661
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options.js
@@ -0,0 +1,556 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that changing preferences in the options panel updates the prefs
+// and toggles appropriate things in the toolbox.
+
+var doc = null,
+  toolbox = null,
+  panelWin = null,
+  modifiedPrefs = [];
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/toolbox.properties"
+);
+const { PrefObserver } = require("resource://devtools/client/shared/prefs.js");
+
+add_task(async function () {
+  const URL =
+    "data:text/html;charset=utf8,test for dynamically registering " +
+    "and unregistering tools";
+  registerNewTool();
+  const tab = await addTab(URL);
+  toolbox = await gDevTools.showToolboxForTab(tab);
+
+  doc = toolbox.doc;
+  await registerNewPerToolboxTool();
+  await testSelectTool();
+  await testOptionsShortcut();
+  await testOptions();
+  await testToggleTools();
+
+  // Test that registered WebExtensions becomes entries in the
+  // options panel and toggling their checkbox toggle the related
+  // preference.
+  await registerNewWebExtensions();
+  await testToggleWebExtensions();
+
+  await cleanup();
+});
+
+function registerNewTool() {
+  const toolDefinition = {
+    id: "testTool",
+    isToolSupported: () => true,
+    visibilityswitch: "devtools.test-tool.enabled",
+    url: "about:blank",
+    label: "someLabel",
+  };
+
+  ok(gDevTools, "gDevTools exists");
+  ok(
+    !gDevTools.getToolDefinitionMap().has("testTool"),
+    "The tool is not registered"
+  );
+
+  gDevTools.registerTool(toolDefinition);
+  ok(
+    gDevTools.getToolDefinitionMap().has("testTool"),
+    "The tool is registered"
+  );
+}
+
+// Register a fake WebExtension to check that it is
+// listed in the toolbox options.
+function registerNewWebExtensions() {
+  // Register some fake extensions and init the related preferences
+  // (similarly to ext-devtools.js).
+  for (let i = 0; i < 2; i++) {
+    const extPref = `devtools.webextensions.fakeExtId${i}.enabled`;
+    Services.prefs.setBoolPref(extPref, true);
+
+    toolbox.registerWebExtension(`fakeUUID${i}`, {
+      name: `Fake WebExtension ${i}`,
+      pref: extPref,
+    });
+  }
+}
+
+function registerNewPerToolboxTool() {
+  const toolDefinition = {
+    id: "test-pertoolbox-tool",
+    isToolSupported: () => true,
+    visibilityswitch: "devtools.test-pertoolbox-tool.enabled",
+    url: "about:blank",
+    label: "perToolboxSomeLabel",
+  };
+
+  ok(gDevTools, "gDevTools exists");
+  ok(
+    !gDevTools.getToolDefinitionMap().has("test-pertoolbox-tool"),
+    "The per-toolbox tool is not registered globally"
+  );
+
+  ok(toolbox, "toolbox exists");
+  ok(
+    !toolbox.hasAdditionalTool("test-pertoolbox-tool"),
+    "The per-toolbox tool is not yet registered to the toolbox"
+  );
+
+  toolbox.addAdditionalTool(toolDefinition);
+
+  ok(
+    !gDevTools.getToolDefinitionMap().has("test-pertoolbox-tool"),
+    "The per-toolbox tool is not registered globally"
+  );
+  ok(
+    toolbox.hasAdditionalTool("test-pertoolbox-tool"),
+    "The per-toolbox tool has been registered to the toolbox"
+  );
+}
+
+async function testSelectTool() {
+  info("Checking to make sure that the options panel can be selected.");
+
+  const onceSelected = toolbox.once("options-selected");
+  toolbox.selectTool("options");
+  await onceSelected;
+  ok(true, "Toolbox selected via selectTool method");
+}
+
+async function testOptionsShortcut() {
+  info("Selecting another tool, then reselecting options panel with keyboard.");
+
+  await toolbox.selectTool("webconsole");
+  is(toolbox.currentToolId, "webconsole", "webconsole is selected");
+  synthesizeKeyShortcut(L10N.getStr("toolbox.help.key"));
+  is(toolbox.currentToolId, "options", "Toolbox selected via shortcut key");
+  synthesizeKeyShortcut(L10N.getStr("toolbox.help.key"));
+  is(toolbox.currentToolId, "webconsole", "webconsole is reselected");
+  synthesizeKeyShortcut(L10N.getStr("toolbox.help.key"));
+  is(toolbox.currentToolId, "options", "Toolbox selected via shortcut key");
+}
+
+async function testOptions() {
+  const tool = toolbox.getPanel("options");
+  panelWin = tool.panelWin;
+  const prefNodes = tool.panelDoc.querySelectorAll(
+    "input[type=checkbox][data-pref]"
+  );
+
+  // Store modified pref names so that they can be cleared on error.
+  for (const node of tool.panelDoc.querySelectorAll("[data-pref]")) {
+    const pref = node.getAttribute("data-pref");
+    modifiedPrefs.push(pref);
+  }
+
+  for (const node of prefNodes) {
+    const prefValue = GetPref(node.getAttribute("data-pref"));
+
+    // Test clicking the checkbox for each options pref
+    await testMouseClick(node, prefValue);
+
+    // Do again with opposite values to reset prefs
+    await testMouseClick(node, !prefValue);
+  }
+
+  const prefSelects = tool.panelDoc.querySelectorAll("select[data-pref]");
+  for (const node of prefSelects) {
+    await testSelect(node);
+  }
+}
+
+async function testSelect(select) {
+  const pref = select.getAttribute("data-pref");
+  const options = Array.from(select.options);
+  info("Checking select for: " + pref);
+
+  is(
+    `${select.options[select.selectedIndex].value}`,
+    `${GetPref(pref)}`,
+    "select starts out selected"
+  );
+
+  for (const option of options) {
+    if (options.indexOf(option) === select.selectedIndex) {
+      continue;
+    }
+
+    const observer = new PrefObserver("devtools.");
+
+    let changeSeen = false;
+    const changeSeenPromise = new Promise(resolve => {
+      observer.once(pref, () => {
+        changeSeen = true;
+        is(
+          `${GetPref(pref)}`,
+          `${option.value}`,
+          "Preference been switched for " + pref
+        );
+        resolve();
+      });
+    });
+
+    select.selectedIndex = options.indexOf(option);
+    const changeEvent = new Event("change");
+    select.dispatchEvent(changeEvent);
+
+    await changeSeenPromise;
+
+    ok(changeSeen, "Correct pref was changed");
+    observer.destroy();
+  }
+}
+
+async function testMouseClick(node, prefValue) {
+  const observer = new PrefObserver("devtools.");
+
+  const pref = node.getAttribute("data-pref");
+  let changeSeen = false;
+  const changeSeenPromise = new Promise(resolve => {
+    observer.once(pref, () => {
+      changeSeen = true;
+      is(GetPref(pref), !prefValue, "New value is correct for " + pref);
+      resolve();
+    });
+  });
+
+  node.scrollIntoView();
+
+  // We use executeSoon here to ensure that the element is in view and
+  // clickable.
+  executeSoon(function () {
+    info("Click event synthesized for pref " + pref);
+    EventUtils.synthesizeMouseAtCenter(node, {}, panelWin);
+  });
+
+  await changeSeenPromise;
+
+  ok(changeSeen, "Correct pref was changed");
+  observer.destroy();
+}
+
+async function testToggleWebExtensions() {
+  const disabledExtensions = new Set();
+  const toggleableWebExtensions = toolbox.listWebExtensions();
+
+  function toggleWebExtension(node) {
+    node.scrollIntoView();
+    EventUtils.synthesizeMouseAtCenter(node, {}, panelWin);
+  }
+
+  function assertExpectedDisabledExtensions() {
+    for (const ext of toggleableWebExtensions) {
+      if (disabledExtensions.has(ext)) {
+        ok(
+          !toolbox.isWebExtensionEnabled(ext.uuid),
+          `The WebExtension "${ext.name}" should be disabled`
+        );
+      } else {
+        ok(
+          toolbox.isWebExtensionEnabled(ext.uuid),
+          `The WebExtension "${ext.name}" should  be enabled`
+        );
+      }
+    }
+  }
+
+  function assertAllExtensionsDisabled() {
+    const enabledUUIDs = toggleableWebExtensions
+      .filter(ext => toolbox.isWebExtensionEnabled(ext.uuid))
+      .map(ext => ext.uuid);
+
+    Assert.deepEqual(
+      enabledUUIDs,
+      [],
+      "All the registered WebExtensions should be disabled"
+    );
+  }
+
+  function assertAllExtensionsEnabled() {
+    const disabledUUIDs = toolbox
+      .listWebExtensions()
+      .filter(ext => !toolbox.isWebExtensionEnabled(ext.uuid))
+      .map(ext => ext.uuid);
+
+    Assert.deepEqual(
+      disabledUUIDs,
+      [],
+      "All the registered WebExtensions should be enabled"
+    );
+  }
+
+  function getWebExtensionNodes() {
+    const toolNodes = panelWin.document.querySelectorAll(
+      "#default-tools-box input[type=checkbox]:not([data-unsupported])," +
+        "#additional-tools-box input[type=checkbox]:not([data-unsupported])"
+    );
+
+    return [...toolNodes].filter(node => {
+      return toggleableWebExtensions.some(
+        ({ uuid }) => node.getAttribute("id") === `webext-${uuid}`
+      );
+    });
+  }
+
+  let webExtensionNodes = getWebExtensionNodes();
+
+  is(
+    webExtensionNodes.length,
+    toggleableWebExtensions.length,
+    "There should be a toggle checkbox for every WebExtension registered"
+  );
+
+  for (const ext of toggleableWebExtensions) {
+    ok(
+      toolbox.isWebExtensionEnabled(ext.uuid),
+      `The WebExtension "${ext.name}" is initially enabled`
+    );
+  }
+
+  // Store modified pref names so that they can be cleared on error.
+  for (const ext of toggleableWebExtensions) {
+    modifiedPrefs.push(ext.pref);
+  }
+
+  // Turn each registered WebExtension to disabled.
+  for (const node of webExtensionNodes) {
+    toggleWebExtension(node);
+
+    const toggledExt = toggleableWebExtensions.find(ext => {
+      return node.id == `webext-${ext.uuid}`;
+    });
+    ok(toggledExt, "Found a WebExtension for the checkbox element");
+    disabledExtensions.add(toggledExt);
+
+    assertExpectedDisabledExtensions();
+  }
+
+  assertAllExtensionsDisabled();
+
+  // Turn each registered WebExtension to enabled.
+  for (const node of webExtensionNodes) {
+    toggleWebExtension(node);
+
+    const toggledExt = toggleableWebExtensions.find(ext => {
+      return node.id == `webext-${ext.uuid}`;
+    });
+    ok(toggledExt, "Found a WebExtension for the checkbox element");
+    disabledExtensions.delete(toggledExt);
+
+    assertExpectedDisabledExtensions();
+  }
+
+  assertAllExtensionsEnabled();
+
+  // Unregister the WebExtensions one by one, and check that only the expected
+  // ones have been unregistered, and the remaining onea are still listed.
+  for (const ext of toggleableWebExtensions) {
+    ok(
+      !!toolbox.listWebExtensions().length,
+      "There should still be extensions registered"
+    );
+    toolbox.unregisterWebExtension(ext.uuid);
+
+    const registeredUUIDs = toolbox.listWebExtensions().map(item => item.uuid);
+    ok(
+      !registeredUUIDs.includes(ext.uuid),
+      `the WebExtension "${ext.name}" should have been unregistered`
+    );
+
+    webExtensionNodes = getWebExtensionNodes();
+
+    const checkboxEl = webExtensionNodes.find(
+      el => el.id === `webext-${ext.uuid}`
+    );
+    is(
+      checkboxEl,
+      undefined,
+      "The unregistered WebExtension checkbox should have been removed"
+    );
+
+    is(
+      registeredUUIDs.length,
+      webExtensionNodes.length,
+      "There should be the expected number of WebExtensions checkboxes"
+    );
+  }
+
+  is(
+    toolbox.listWebExtensions().length,
+    0,
+    "All WebExtensions have been unregistered"
+  );
+
+  webExtensionNodes = getWebExtensionNodes();
+
+  is(
+    webExtensionNodes.length,
+    0,
+    "There should not be any checkbox for the unregistered WebExtensions"
+  );
+}
+
+function getToolNode(id) {
+  return panelWin.document.getElementById(id);
+}
+
+async function testToggleTools() {
+  const toolNodes = panelWin.document.querySelectorAll(
+    "#default-tools-box input[type=checkbox]:not([data-unsupported])," +
+      "#additional-tools-box input[type=checkbox]:not([data-unsupported])"
+  );
+  const toolNodeIds = [...toolNodes].map(node => node.id);
+  const enabledToolIds = [...toolNodes]
+    .filter(node => node.checked)
+    .map(node => node.id);
+
+  const toggleableTools = gDevTools
+    .getDefaultTools()
+    .filter(tool => {
+      return tool.visibilityswitch;
+    })
+    .concat(gDevTools.getAdditionalTools())
+    .concat(toolbox.getAdditionalTools());
+
+  for (const node of toolNodes) {
+    const id = node.getAttribute("id");
+    ok(
+      toggleableTools.some(tool => tool.id === id),
+      "There should be a toggle checkbox for: " + id
+    );
+  }
+
+  // Store modified pref names so that they can be cleared on error.
+  for (const tool of toggleableTools) {
+    const pref = tool.visibilityswitch;
+    modifiedPrefs.push(pref);
+  }
+
+  // Toggle each tool
+  for (const id of toolNodeIds) {
+    await toggleTool(getToolNode(id));
+  }
+
+  // Toggle again to reset tool enablement state
+  for (const id of toolNodeIds) {
+    await toggleTool(getToolNode(id));
+  }
+
+  // Test that a tool can still be added when no tabs are present:
+  // Disable all tools
+  for (const id of enabledToolIds) {
+    await toggleTool(getToolNode(id));
+  }
+  // Re-enable the tools which are enabled by default
+  for (const id of enabledToolIds) {
+    await toggleTool(getToolNode(id));
+  }
+
+  // Toggle first, middle, and last tools to ensure that toolbox tabs are
+  // inserted in order
+  const firstToolId = toolNodeIds[0];
+  const middleToolId = toolNodeIds[(toolNodeIds.length / 2) | 0];
+  const lastToolId = toolNodeIds[toolNodeIds.length - 1];
+
+  await toggleTool(getToolNode(firstToolId));
+  await toggleTool(getToolNode(firstToolId));
+  await toggleTool(getToolNode(middleToolId));
+  await toggleTool(getToolNode(middleToolId));
+  await toggleTool(getToolNode(lastToolId));
+  await toggleTool(getToolNode(lastToolId));
+}
+
+/**
+ * Toggle tool node checkbox. Note: because toggling the checkbox will result in
+ * re-rendering of the tool list, we must re-query the checkboxes every time.
+ */
+async function toggleTool(node) {
+  const toolId = node.getAttribute("id");
+
+  const registeredPromise = new Promise(resolve => {
+    if (node.checked) {
+      gDevTools.once(
+        "tool-unregistered",
+        checkUnregistered.bind(null, toolId, resolve)
+      );
+    } else {
+      gDevTools.once(
+        "tool-registered",
+        checkRegistered.bind(null, toolId, resolve)
+      );
+    }
+  });
+  node.scrollIntoView();
+  EventUtils.synthesizeMouseAtCenter(node, {}, panelWin);
+
+  await registeredPromise;
+}
+
+function checkUnregistered(toolId, resolve, data) {
+  if (data == toolId) {
+    ok(true, "Correct tool removed");
+    // checking tab on the toolbox
+    ok(
+      !doc.getElementById("toolbox-tab-" + toolId),
+      "Tab removed for " + toolId
+    );
+  } else {
+    ok(false, "Something went wrong, " + toolId + " was not unregistered");
+  }
+  resolve();
+}
+
+async function checkRegistered(toolId, resolve, data) {
+  if (data == toolId) {
+    ok(true, "Correct tool added back");
+    // checking tab on the toolbox
+    const button = await lookupButtonForToolId(toolId);
+    ok(button, "Tab added back for " + toolId);
+  } else {
+    ok(false, "Something went wrong, " + toolId + " was not registered");
+  }
+  resolve();
+}
+
+function GetPref(name) {
+  const type = Services.prefs.getPrefType(name);
+  switch (type) {
+    case Services.prefs.PREF_STRING:
+      return Services.prefs.getCharPref(name);
+    case Services.prefs.PREF_INT:
+      return Services.prefs.getIntPref(name);
+    case Services.prefs.PREF_BOOL:
+      return Services.prefs.getBoolPref(name);
+    default:
+      throw new Error("Unknown type");
+  }
+}
+
+/**
+ * Find the button from specified toolId.
+ * Generally, button which access to the tool panel is in toolbox or
+ * tools menu(in the Chevron menu).
+ */
+async function lookupButtonForToolId(toolId) {
+  let button = doc.getElementById("toolbox-tab-" + toolId);
+  if (!button) {
+    // search from the tools menu.
+    await openChevronMenu(toolbox);
+    button = doc.querySelector("#tools-chevron-menupopup-" + toolId);
+
+    await closeChevronMenu(toolbox);
+  }
+  return button;
+}
+
+async function cleanup() {
+  gDevTools.unregisterTool("testTool");
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  for (const pref of modifiedPrefs) {
+    Services.prefs.clearUserPref(pref);
+  }
+  toolbox = doc = panelWin = modifiedPrefs = null;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js b/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js
new file mode 100644
index 0000000000..417970bc07
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js
@@ -0,0 +1,270 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+let TEST_URL =
+  "data:text/html;charset=utf8,test for dynamically " +
+  "registering and unregistering tools";
+
+// The frames button is only shown if the page has at least one iframe so we
+// need to add one to the test page.
+TEST_URL += '<iframe src="data:text/plain,iframe"></iframe>';
+// The error count button is only shown if there are errors on the page
+TEST_URL += '<script>console.error("err")</script>';
+
+var modifiedPrefs = [];
+registerCleanupFunction(() => {
+  for (const pref of modifiedPrefs) {
+    Services.prefs.clearUserPref(pref);
+  }
+});
+
+const TOGGLE_BUTTONS = [
+  "command-button-measure",
+  "command-button-rulers",
+  "command-button-responsive",
+  "command-button-pick",
+];
+
+add_task(async function test() {
+  const tab = await addTab(TEST_URL);
+  let toolbox = await gDevTools.showToolboxForTab(tab);
+  const optionsPanelWin = await selectOptionsPanel(toolbox);
+  await testToggleToolboxButtons(toolbox, optionsPanelWin);
+  toolbox = await testPrefsAreRespectedWhenReopeningToolbox();
+  await testButtonStateOnClick(toolbox);
+
+  await toolbox.destroy();
+});
+
+async function selectOptionsPanel(toolbox) {
+  info("Selecting the options panel");
+
+  const onOptionsSelected = toolbox.once("options-selected");
+  toolbox.selectTool("options");
+  const optionsPanel = await onOptionsSelected;
+  ok(true, "Options panel selected via selectTool method");
+  return optionsPanel.panelWin;
+}
+
+async function testToggleToolboxButtons(toolbox, optionsPanelWin) {
+  const checkNodes = [
+    ...optionsPanelWin.document.querySelectorAll(
+      "#enabled-toolbox-buttons-box input[type=checkbox]"
+    ),
+  ];
+
+  // Filter out all the buttons which are not supported on the current target.
+  // (DevTools Experimental Preferences etc...)
+  const toolbarButtons = toolbox.toolbarButtons.filter(tool =>
+    tool.isToolSupported(toolbox)
+  );
+
+  const visibleToolbarButtons = toolbarButtons.filter(tool => tool.isVisible);
+
+  const toolbarButtonNodes = [
+    ...toolbox.doc.querySelectorAll(".command-button"),
+  ];
+
+  is(
+    checkNodes.length,
+    toolbarButtons.length,
+    "All of the buttons are toggleable."
+  );
+  is(
+    visibleToolbarButtons.length,
+    toolbarButtonNodes.length,
+    "All of the DOM buttons are toggleable."
+  );
+
+  for (const tool of toolbarButtons) {
+    const id = tool.id;
+    const matchedCheckboxes = checkNodes.filter(node => node.id === id);
+    const matchedButtons = toolbarButtonNodes.filter(
+      button => button.id === id
+    );
+    if (tool.isVisible) {
+      is(
+        matchedCheckboxes.length,
+        1,
+        "There should be a single toggle checkbox for: " + id
+      );
+      is(
+        matchedCheckboxes[0].nextSibling.textContent,
+        tool.description,
+        "The label for checkbox matches the tool definition."
+      );
+      is(
+        matchedButtons.length,
+        1,
+        "There should be a DOM button for the visible: " + id
+      );
+
+      // The error count button title isn't its description
+      if (id !== "command-button-errorcount") {
+        is(
+          matchedButtons[0].getAttribute("title"),
+          tool.description,
+          "The tooltip for button matches the tool definition."
+        );
+      }
+
+      if (TOGGLE_BUTTONS.includes(id)) {
+        is(
+          matchedButtons[0].getAttribute("aria-pressed"),
+          "false",
+          `The aria-pressed attribute is set to false for ${id} button`
+        );
+      } else {
+        is(
+          matchedButtons[0].getAttribute("aria-pressed"),
+          null,
+          `The ${id} button does not have the aria-pressed attribute`
+        );
+      }
+    } else {
+      is(
+        matchedButtons.length,
+        0,
+        "There should not be a DOM button for the invisible: " + id
+      );
+    }
+  }
+
+  // Store modified pref names so that they can be cleared on error.
+  for (const tool of toolbarButtons) {
+    const pref = tool.visibilityswitch;
+    modifiedPrefs.push(pref);
+  }
+
+  // Try checking each checkbox, making sure that it changes the preference
+  for (const node of checkNodes) {
+    const tool = toolbarButtons.filter(
+      commandButton => commandButton.id === node.id
+    )[0];
+    const isVisible = getBoolPref(tool.visibilityswitch);
+
+    testPreferenceAndUIStateIsConsistent(toolbox, optionsPanelWin);
+    node.click();
+    testPreferenceAndUIStateIsConsistent(toolbox, optionsPanelWin);
+
+    const isVisibleAfterClick = getBoolPref(tool.visibilityswitch);
+
+    is(
+      isVisible,
+      !isVisibleAfterClick,
+      "Clicking on the node should have toggled visibility preference for " +
+        tool.visibilityswitch
+    );
+
+    if (isVisibleAfterClick) {
+      const matchedButton = toolbox.doc.getElementById(tool.id);
+      if (TOGGLE_BUTTONS.includes(tool.id)) {
+        is(
+          matchedButton.getAttribute("aria-pressed"),
+          "false",
+          `The aria-pressed attribute is set to false for ${tool.id} button`
+        );
+      } else {
+        is(
+          matchedButton.getAttribute("aria-pressed"),
+          null,
+          `The ${tool.id} button does not have the aria-pressed attribute`
+        );
+      }
+    }
+  }
+}
+
+async function testPrefsAreRespectedWhenReopeningToolbox() {
+  info("Closing toolbox to test after reopening");
+  await gDevTools.closeToolboxForTab(gBrowser.selectedTab);
+
+  const toolbox = await gDevTools.showToolboxForTab(gBrowser.selectedTab);
+  const optionsPanelWin = await selectOptionsPanel(toolbox);
+
+  info("Toolbox has been reopened.  Checking UI state.");
+  await testPreferenceAndUIStateIsConsistent(toolbox, optionsPanelWin);
+  return toolbox;
+}
+
+function testPreferenceAndUIStateIsConsistent(toolbox, optionsPanelWin) {
+  const checkNodes = [
+    ...optionsPanelWin.document.querySelectorAll(
+      "#enabled-toolbox-buttons-box input[type=checkbox]"
+    ),
+  ];
+  const toolboxButtonNodes = [
+    ...toolbox.doc.querySelectorAll(".command-button"),
+  ];
+
+  for (const tool of toolbox.toolbarButtons) {
+    const isVisible = getBoolPref(tool.visibilityswitch);
+
+    const button = toolboxButtonNodes.find(
+      toolboxButton => toolboxButton.id === tool.id
+    );
+    is(!!button, isVisible, "Button visibility matches pref for " + tool.id);
+
+    const check = checkNodes.filter(node => node.id === tool.id)[0];
+    if (check) {
+      is(
+        check.checked,
+        isVisible,
+        "Checkbox should be selected based on current pref for " + tool.id
+      );
+    }
+  }
+}
+
+async function testButtonStateOnClick(toolbox) {
+  const toolboxButtons = ["#command-button-rulers", "#command-button-measure"];
+  for (const toolboxButton of toolboxButtons) {
+    const button = toolbox.doc.querySelector(toolboxButton);
+    if (!button) {
+      ok(false, `Couldn't find ${toolboxButton}`);
+      continue;
+    }
+
+    const isChecked = waitUntil(() => button.classList.contains("checked"));
+    is(
+      button.getAttribute("aria-pressed"),
+      "false",
+      `${toolboxButton} has aria-pressed set to false when it's off`
+    );
+
+    button.click();
+    await isChecked;
+    ok(
+      button.classList.contains("checked"),
+      `Button for ${toolboxButton} can be toggled on`
+    );
+    is(
+      button.getAttribute("aria-pressed"),
+      "true",
+      `${toolboxButton} has aria-pressed set to true when it's on`
+    );
+
+    const isUnchecked = waitUntil(() => !button.classList.contains("checked"));
+    button.click();
+    await isUnchecked;
+    ok(
+      !button.classList.contains("checked"),
+      `Button for ${toolboxButton} can be toggled off`
+    );
+    is(
+      button.getAttribute("aria-pressed"),
+      "false",
+      `aria-pressed is set back to false on ${toolboxButton} after it has been toggled off`
+    );
+  }
+}
+
+function getBoolPref(key) {
+  try {
+    return Services.prefs.getBoolPref(key);
+  } catch (e) {
+    return false;
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_cache-01.js b/devtools/client/framework/test/browser_toolbox_options_disable_cache-01.js
new file mode 100644
index 0000000000..77c2b1bccb
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_cache-01.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Tests that disabling the cache for a tab works as it should when toolboxes
+// are not toggled.
+/* import-globals-from helper_disable_cache.js */
+loadHelperScript("helper_disable_cache.js");
+
+add_task(async function () {
+  // Disable rcwn to make cache behavior deterministic.
+  await pushPref("network.http.rcwn.enabled", false);
+
+  // Ensure that the setting is cleared after the test.
+  registerCleanupFunction(() => {
+    info("Resetting devtools.cache.disabled to false.");
+    Services.prefs.setBoolPref("devtools.cache.disabled", false);
+  });
+
+  // Initialise tabs: 1 and 2 with a toolbox, 3 and 4 without.
+  for (const tab of tabs) {
+    await initTab(tab, tab.startToolbox);
+  }
+
+  // Ensure cache is enabled for all tabs.
+  await checkCacheStateForAllTabs([true, true, true, true]);
+
+  // Check the checkbox in tab 0 and ensure cache is disabled for tabs 0 and 1.
+  await setDisableCacheCheckboxChecked(tabs[0], true);
+  await checkCacheStateForAllTabs([false, false, true, true]);
+
+  await finishUp();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_cache-02.js b/devtools/client/framework/test/browser_toolbox_options_disable_cache-02.js
new file mode 100644
index 0000000000..235893ba60
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_cache-02.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Tests that disabling the cache for a tab works as it should when toolboxes
+// are toggled.
+/* import-globals-from helper_disable_cache.js */
+loadHelperScript("helper_disable_cache.js");
+
+add_task(async function () {
+  // Disable rcwn to make cache behavior deterministic.
+  await pushPref("network.http.rcwn.enabled", false);
+
+  // Ensure that the setting is cleared after the test.
+  registerCleanupFunction(() => {
+    info("Resetting devtools.cache.disabled to false.");
+    Services.prefs.setBoolPref("devtools.cache.disabled", false);
+  });
+
+  // Initialise tabs: 1 and 2 with a toolbox, 3 and 4 without.
+  for (const tab of tabs) {
+    await initTab(tab, tab.startToolbox);
+  }
+
+  // Disable cache in tab 0
+  await setDisableCacheCheckboxChecked(tabs[0], true);
+
+  // Open toolbox in tab 2 and ensure the cache is then disabled.
+  tabs[2].toolbox = await gDevTools.showToolboxForTab(tabs[2].tab, {
+    toolId: "options",
+  });
+  await checkCacheEnabled(tabs[2], false);
+
+  // Close toolbox in tab 2 and ensure the cache is enabled again
+  await tabs[2].toolbox.destroy();
+  await checkCacheEnabled(tabs[2], true);
+
+  // Open toolbox in tab 2 and ensure the cache is then disabled.
+  tabs[2].toolbox = await gDevTools.showToolboxForTab(tabs[2].tab, {
+    toolId: "options",
+  });
+  await checkCacheEnabled(tabs[2], false);
+
+  // Check the checkbox in tab 2 and ensure cache is enabled for all tabs.
+  await setDisableCacheCheckboxChecked(tabs[2], false);
+  await checkCacheStateForAllTabs([true, true, true, true]);
+
+  await finishUp();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_cache-03.js b/devtools/client/framework/test/browser_toolbox_options_disable_cache-03.js
new file mode 100644
index 0000000000..f3a53f6422
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_cache-03.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that even when the cache is disabled, the inspector/styleeditor don't fetch again
+// stylesheets from the server to display them in devtools, but use the cached version.
+
+const TEST_CSS = URL_ROOT + "browser_toolbox_options_disable_cache.css.sjs";
+const TEST_PAGE = `<html>
+  <head>
+    <meta charset="utf-8"/>
+    <link href="${TEST_CSS}" rel="stylesheet" type="text/css"/>
+  </head>
+  <body></body>
+</html>`;
+
+add_task(async function () {
+  info("Setup preferences for testing");
+  // Disable rcwn to make cache behavior deterministic.
+  await pushPref("network.http.rcwn.enabled", false);
+  // Disable the cache.
+  await pushPref("devtools.cache.disabled", true);
+
+  info("Open inspector");
+  const toolbox = await openNewTabAndToolbox(
+    `data:text/html;charset=UTF-8,${encodeURIComponent(TEST_PAGE)}`,
+    "inspector"
+  );
+  const inspector = toolbox.getPanel("inspector");
+
+  info(
+    "Check that the CSS content loaded in the page " +
+      "and the one shown in the inspector are the same"
+  );
+  const webContent = await getWebContent();
+  const inspectorContent = await getInspectorContent(inspector);
+  is(
+    webContent,
+    inspectorContent,
+    "The contents of both web and DevTools are same"
+  );
+
+  await closeTabAndToolbox();
+});
+
+async function getInspectorContent(inspector) {
+  const ruleView = inspector.getPanel("ruleview").view;
+  const valueEl = await waitFor(() =>
+    ruleView.styleDocument.querySelector(".ruleview-propertyvalue")
+  );
+  return valueEl.textContent;
+}
+
+async function getWebContent() {
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const doc = content.document;
+    return doc.ownerGlobal.getComputedStyle(doc.body, "::before").content;
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_cache.css.sjs b/devtools/client/framework/test/browser_toolbox_options_disable_cache.css.sjs
new file mode 100644
index 0000000000..0b5932ca02
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_cache.css.sjs
@@ -0,0 +1,10 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function handleRequest(request, response) {
+  // This returns always new and different CSS content.
+  const page = `body::before { content: "${Date.now()}"; }`;
+  response.setHeader("Content-Type", "text/css; charset=utf-8", false);
+  response.setHeader("Content-Length", page.length + "", false);
+  response.write(page);
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_cache.sjs b/devtools/client/framework/test/browser_toolbox_options_disable_cache.sjs
new file mode 100644
index 0000000000..dc67043be1
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_cache.sjs
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function handleRequest(request, response) {
+  const Etag = '"4d881ab-b03-435f0a0f9ef00"';
+  const IfNoneMatch = request.hasHeader("If-None-Match")
+    ? request.getHeader("If-None-Match")
+    : "";
+
+  const guid = "xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx".replace(
+    /[xy]/g,
+    function (c) {
+      const r = (Math.random() * 16) | 0;
+      const v = c === "x" ? r : (r & 0x3) | 0x8;
+
+      return v.toString(16);
+    }
+  );
+
+  const page = "<!DOCTYPE html><html><body><h1>" + guid + "</h1></body></html>";
+
+  response.setHeader("Etag", Etag, false);
+
+  if (IfNoneMatch === Etag) {
+    response.setStatusLine(request.httpVersion, "304", "Not Modified");
+  } else {
+    response.setHeader("Content-Type", "text/html; charset=utf-8", false);
+    response.setHeader("Content-Length", page.length + "", false);
+    response.write(page);
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_js.html b/devtools/client/framework/test/browser_toolbox_options_disable_js.html
new file mode 100644
index 0000000000..a8c70c2e4d
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_js.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>browser_toolbox_options_disablejs.html</title>
+    <meta charset="UTF-8">
+    <style>
+      div {
+        width: 260px;
+        height: 24px;
+        border: 1px solid #000;
+        margin-top: 10px;
+      }
+
+      iframe {
+        height: 90px;
+        border: 1px solid #000;
+      }
+
+      h1 {
+        font-size: 20px
+      }
+    </style>
+    <script type="application/javascript">
+      /* exported log */
+      function log(msg) {
+        const output = document.getElementById("output");
+
+        output.innerHTML = msg;
+      }
+    </script>
+  </head>
+  <body>
+    <h1>Test in page</h1>
+    <input id="logJSEnabled"
+           type="button"
+           value="Log JS Enabled"
+           onclick="log('JavaScript Enabled')"/>
+    <input id="logJSDisabled"
+           type="button"
+           value="Log JS Disabled"
+           onclick="log('JavaScript Disabled')"/>
+    <br>
+    <div id="output">No output</div>
+    <h1>Test in iframe</h1>
+    <iframe src="browser_toolbox_options_disable_js_iframe.html"></iframe>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_js.js b/devtools/client/framework/test/browser_toolbox_options_disable_js.js
new file mode 100644
index 0000000000..4f08838c9f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_js.js
@@ -0,0 +1,141 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that disabling JavaScript for a tab works as it should.
+
+const TEST_URI = URL_ROOT_SSL + "browser_toolbox_options_disable_js.html";
+
+add_task(async function () {
+  const tab = await addTab(TEST_URI);
+
+  // Start on the options panel from where we will toggle the disabling javascript
+  // option.
+  const toolbox = await gDevTools.showToolboxForTab(tab, { toolId: "options" });
+
+  await testJSEnabled();
+  await testJSEnabledIframe();
+
+  // Disable JS.
+  await toggleJS(toolbox);
+
+  await testJSDisabled();
+  await testJSDisabledIframe();
+
+  // Navigate and check JS is still disabled
+  for (let i = 0; i < 10; i++) {
+    await navigateTo(`${TEST_URI}?nocache=${i}`);
+    await testJSDisabled();
+    await testJSDisabledIframe();
+  }
+
+  // Re-enable JS.
+  await toggleJS(toolbox);
+
+  await testJSEnabled();
+  await testJSEnabledIframe();
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+async function testJSEnabled() {
+  info("Testing that JS is enabled");
+
+  // We use waitForTick here because switching browsingContext.allowJavascript
+  // to true takes a while to become live.
+  await waitForTick();
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    const doc = content.document;
+    const output = doc.getElementById("output");
+    doc.querySelector("#logJSEnabled").click();
+    is(
+      output.textContent,
+      "JavaScript Enabled",
+      'Output is "JavaScript Enabled"'
+    );
+  });
+}
+
+async function testJSEnabledIframe() {
+  info("Testing that JS is enabled in the iframe");
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    const doc = content.document;
+    const iframe = doc.querySelector("iframe");
+    const iframeDoc = iframe.contentDocument;
+    const output = iframeDoc.getElementById("output");
+    iframeDoc.querySelector("#logJSEnabled").click();
+    is(
+      output.textContent,
+      "JavaScript Enabled",
+      'Output is "JavaScript Enabled" in iframe'
+    );
+  });
+}
+
+async function toggleJS(toolbox) {
+  const panel = toolbox.getCurrentPanel();
+  const cbx = panel.panelDoc.getElementById("devtools-disable-javascript");
+
+  if (cbx.checked) {
+    info("Clearing checkbox to re-enable JS");
+  } else {
+    info("Checking checkbox to disable JS");
+  }
+
+  let javascriptEnabled =
+    await toolbox.commands.targetConfigurationCommand.isJavascriptEnabled();
+  is(
+    javascriptEnabled,
+    !cbx.checked,
+    "targetConfigurationCommand.isJavascriptEnabled is correct before the toggle"
+  );
+
+  const browserLoaded = BrowserTestUtils.browserLoaded(
+    gBrowser.selectedBrowser
+  );
+  cbx.click();
+  await browserLoaded;
+
+  javascriptEnabled =
+    await toolbox.commands.targetConfigurationCommand.isJavascriptEnabled();
+  is(
+    javascriptEnabled,
+    !cbx.checked,
+    "targetConfigurationCommand.isJavascriptEnabled is correctly updated"
+  );
+}
+
+async function testJSDisabled() {
+  info("Testing that JS is disabled");
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    const doc = content.document;
+    const output = doc.getElementById("output");
+    doc.querySelector("#logJSDisabled").click();
+
+    Assert.notStrictEqual(
+      output.textContent,
+      "JavaScript Disabled",
+      'output is not "JavaScript Disabled"'
+    );
+  });
+}
+
+async function testJSDisabledIframe() {
+  info("Testing that JS is disabled in the iframe");
+
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    const doc = content.document;
+    const iframe = doc.querySelector("iframe");
+    const iframeDoc = iframe.contentDocument;
+    const output = iframeDoc.getElementById("output");
+    iframeDoc.querySelector("#logJSDisabled").click();
+    Assert.notStrictEqual(
+      output.textContent,
+      "JavaScript Disabled",
+      'output is not "JavaScript Disabled" in iframe'
+    );
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_js_iframe.html b/devtools/client/framework/test/browser_toolbox_options_disable_js_iframe.html
new file mode 100644
index 0000000000..5006d24c9a
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_js_iframe.html
@@ -0,0 +1,34 @@
+<html>
+  <head>
+    <title>browser_toolbox_options_disablejs.html</title>
+    <meta charset="UTF-8">
+    <style>
+      div {
+        width: 260px;
+        height: 24px;
+        border: 1px solid #000;
+        margin-top: 10px;
+      }
+    </style>
+    <script type="application/javascript">
+      /* exported log */
+      function log(msg) {
+        const output = document.getElementById("output");
+
+        output.innerHTML = msg;
+      }
+    </script>
+  </head>
+  <body>
+    <input id="logJSEnabled"
+           type="button"
+           value="Log JS Enabled"
+           onclick="log('JavaScript Enabled')"/>
+    <input id="logJSDisabled"
+           type="button"
+           value="Log JS Disabled"
+           onclick="log('JavaScript Disabled')"/>
+    <br>
+    <div id="output">No output</div>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html
new file mode 100644
index 0000000000..4065aabc2b
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>browser_toolbox_options_enable_serviceworkers_testing.html</title>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <h1>SW-test</h1>
+    <script>
+      function register() {
+        return Promise.resolve().then(function() {
+          // While ServiceWorkerContainer.register() returns a promise, it's
+          // still wrapped with a .then() because navigator.serviceWorker is not
+          // defined in insecure contexts unless service worker testing is
+          // enabled, so dereferencing it would throw a ReferenceError (which
+          // is then caught in the .catch() clause).
+          return window.navigator.serviceWorker.register("serviceworker.js");
+        }).then(registration => {
+          return {success: true};
+        }).catch(error => {
+          return {success: false};
+        });
+      }
+
+      function unregister() {
+        return Promise.resolve().then(function() {
+          return window.navigator.serviceWorker.getRegistration();
+        }).then(registration => {
+          return registration.unregister().then(result => {
+            return {success: !!result};
+          });
+        }).catch(_ => {
+          return {success: false};
+        });
+      }
+
+      function iframeRegisterAndUnregister() {
+        var frame = window.document.createElement("iframe");
+        var promise = new Promise(function(resolve, reject) {
+          frame.addEventListener("load", function() {
+            Promise.resolve().then(_ => {
+              return frame.contentWindow.navigator.serviceWorker.register("serviceworker.js");
+            }).then(swr => {
+              return swr.unregister();
+            }).then(_ => {
+              frame.remove();
+              resolve({success: true});
+            }).catch(error => {
+              resolve({success: false});
+            });
+          }, {once: true});
+        });
+        frame.src = "browser_toolbox_options_enabled_serviceworkers_testing.html";
+        window.document.body.appendChild(frame);
+        return promise;
+      }
+
+      window.addEventListener("message", function(event) {
+        var response;
+        switch (event.data) {
+          case "devtools:sw-test:register": {
+            response = register();
+            break;
+          }
+          case "devtools:sw-test:unregister": {
+            response = unregister();
+            break;
+          }
+          case "devtools:sw-test:iframe:register-and-unregister": {
+            response = iframeRegisterAndUnregister();
+            break;
+          }
+        }
+        response.then(data => {
+          event.ports[0].postMessage(data);
+          event.ports[0].close();
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js
new file mode 100644
index 0000000000..152f64f835
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that enabling Service Workers testing option enables the
+// mServiceWorkersTestingEnabled attribute added to nsPIDOMWindow.
+
+// We explicitly want to test that service worker testing allows to use service
+// workers on non-https, so we use mochi.test:8888 to avoid the automatic upgrade
+// to https when dom.security.https_first is true.
+const TEST_URI =
+  URL_ROOT_MOCHI_8888 +
+  "browser_toolbox_options_enable_serviceworkers_testing.html";
+const ELEMENT_ID = "devtools-enable-serviceWorkersTesting";
+
+add_task(async function () {
+  await pushPref("dom.serviceWorkers.exemptFromPerDomainMax", true);
+  await pushPref("dom.serviceWorkers.enabled", true);
+  await pushPref("dom.serviceWorkers.testing.enabled", false);
+  // Force the test to start without service worker testing enabled
+  await pushPref("devtools.serviceWorkers.testing.enabled", false);
+
+  const tab = await addTab(TEST_URI);
+  const toolbox = await openToolboxForTab(tab, "options");
+
+  let data = await register();
+  is(data.success, false, "Register should fail with security error");
+
+  const panel = toolbox.getCurrentPanel();
+  const cbx = panel.panelDoc.getElementById(ELEMENT_ID);
+  is(cbx.checked, false, "The checkbox shouldn't be checked");
+
+  info(`Checking checkbox to enable service workers testing`);
+  cbx.scrollIntoView();
+  cbx.click();
+
+  await reloadBrowser();
+
+  data = await register();
+  is(data.success, true, "Register should success");
+
+  await unregister();
+  data = await registerAndUnregisterInFrame();
+  is(data.success, true, "Register should success");
+
+  info("Workers should be turned back off when we closes the toolbox");
+  await toolbox.destroy();
+
+  await reloadBrowser();
+  data = await register();
+  is(data.success, false, "Register should fail with security error");
+});
+
+function sendMessage(name) {
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [name], nameChild => {
+    return new Promise(resolve => {
+      const channel = new content.MessageChannel();
+      content.postMessage(nameChild, "*", [channel.port2]);
+      channel.port1.onmessage = function (msg) {
+        resolve(msg.data);
+        channel.port1.close();
+      };
+    });
+  });
+}
+
+function register() {
+  return sendMessage("devtools:sw-test:register");
+}
+
+function unregister(swr) {
+  return sendMessage("devtools:sw-test:unregister");
+}
+
+function registerAndUnregisterInFrame() {
+  return sendMessage("devtools:sw-test:iframe:register-and-unregister");
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_frames_button.js b/devtools/client/framework/test/browser_toolbox_options_frames_button.js
new file mode 100644
index 0000000000..50adeda39b
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_frames_button.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the frames button is always visible when the user is on the options panel.
+// Test that the button is disabled if the current target has no frames.
+// Test that the button is enabled otherwise.
+
+const TEST_URL = "data:text/html;charset=utf8,test frames button visibility";
+const TEST_IFRAME_URL = "data:text/plain,iframe";
+const TEST_IFRAME_URL2 = "data:text/plain,iframe2";
+const TEST_URL_FRAMES =
+  TEST_URL +
+  `<iframe src="${TEST_IFRAME_URL}"></iframe>` +
+  `<iframe src="${TEST_IFRAME_URL2}"></iframe>`;
+const FRAME_BUTTON_PREF = "devtools.command-button-frames.enabled";
+
+add_task(async function () {
+  // Hide the button by default.
+  await pushPref(FRAME_BUTTON_PREF, false);
+
+  const tab = await addTab(TEST_URL);
+
+  info("Open the toolbox on the Options panel");
+  const toolbox = await gDevTools.showToolboxForTab(tab, { toolId: "options" });
+  const doc = toolbox.doc;
+
+  const optionsPanel = toolbox.getCurrentPanel();
+
+  let framesButton = doc.getElementById("command-button-frames");
+  ok(!framesButton, "Frames button is not rendered.");
+
+  const optionsDoc = optionsPanel.panelWin.document;
+  const framesButtonCheckbox = optionsDoc.getElementById(
+    "command-button-frames"
+  );
+  framesButtonCheckbox.click();
+
+  info("Wait for the frame button to be rendered");
+  framesButton = await waitFor(() =>
+    doc.getElementById("command-button-frames")
+  );
+  ok(framesButton.disabled, "Frames button is disabled.");
+
+  info("Leave the options panel, the frames button should not be rendered.");
+  await toolbox.selectTool("webconsole");
+  framesButton = doc.getElementById("command-button-frames");
+  ok(!framesButton, "Frames button is no longer rendered.");
+
+  info("Go back to the options panel, the frames button should rendered.");
+  await toolbox.selectTool("options");
+  framesButton = doc.getElementById("command-button-frames");
+  ok(framesButton, "Frames button is rendered again.");
+
+  // Do not run the rest of this test when both fission and EFT is disabled as
+  // it prevents creating a target for the iframe
+  if (!isFissionEnabled() || !isEveryFrameTargetEnabled()) {
+    return;
+  }
+
+  info("Navigate to a page with frames, the frames button should be enabled.");
+  await navigateTo(TEST_URL_FRAMES);
+
+  framesButton = doc.getElementById("command-button-frames");
+  ok(framesButton, "Frames button is still rendered.");
+
+  await waitFor(() => {
+    framesButton = doc.getElementById("command-button-frames");
+    return framesButton && !framesButton.disabled;
+  });
+
+  const { targetCommand } = toolbox.commands;
+  const iframeTarget = targetCommand
+    .getAllTargets([targetCommand.TYPES.FRAME])
+    .find(target => target.url == TEST_IFRAME_URL);
+  ok(iframeTarget, "Found the target for the iframe");
+
+  ok(
+    !framesButton.classList.contains("checked"),
+    "Before selecting an iframe, the button is not checked"
+  );
+  await toolbox.commands.targetCommand.selectTarget(iframeTarget);
+  ok(
+    framesButton.classList.contains("checked"),
+    "After selecting an iframe, the button is checked"
+  );
+
+  info("Remove this first iframe, which is currently selected");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    content.document.querySelector("iframe").remove();
+  });
+
+  await waitFor(() => {
+    return targetCommand.selectedTargetFront == targetCommand.targetFront;
+  }, "Wait for the selected target to be back on the top target");
+
+  ok(
+    !framesButton.classList.contains("checked"),
+    "The button is back unchecked after having removed the selected iframe"
+  );
+
+  Services.prefs.clearUserPref(FRAME_BUTTON_PREF);
+});
diff --git a/devtools/client/framework/test/browser_toolbox_options_multiple_tabs.js b/devtools/client/framework/test/browser_toolbox_options_multiple_tabs.js
new file mode 100644
index 0000000000..74c0983d4e
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_multiple_tabs.js
@@ -0,0 +1,130 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const URL =
+  "data:text/html;charset=utf8,test for dynamically registering " +
+  "and unregistering tools across multiple tabs";
+
+let tab1, tab2, modifiedPref;
+
+add_task(async function () {
+  tab1 = await openToolboxOptionsInNewTab();
+  tab2 = await openToolboxOptionsInNewTab();
+
+  await testToggleTools();
+  await cleanup();
+});
+
+async function openToolboxOptionsInNewTab() {
+  const tab = await addTab(URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab);
+  const doc = toolbox.doc;
+  const panel = await toolbox.selectTool("options");
+  const { id } = panel.panelDoc.querySelector(
+    "#default-tools-box input[type=checkbox]:not([data-unsupported], [checked])"
+  );
+
+  return {
+    tab,
+    toolbox,
+    doc,
+    panelWin: panel.panelWin,
+    // This is a getter becuse toolbox tools list gets re-setup every time there
+    // is a tool-registered or tool-undregistered event.
+    get checkbox() {
+      return panel.panelDoc.getElementById(id);
+    },
+  };
+}
+
+async function testToggleTools() {
+  is(tab1.checkbox.id, tab2.checkbox.id, "Default tool box should be in sync.");
+
+  const toolId = tab1.checkbox.id;
+  const testTool = gDevTools.getDefaultTools().find(tool => tool.id === toolId);
+  // Store modified pref names so that they can be cleared on error.
+  modifiedPref = testTool.visibilityswitch;
+
+  info(`Registering tool ${toolId} in the first tab.`);
+  await toggleTool(tab1, toolId);
+
+  info(`Unregistering tool ${toolId} in the first tab.`);
+  await toggleTool(tab1, toolId);
+
+  info(`Registering tool ${toolId} in the second tab.`);
+  await toggleTool(tab2, toolId);
+
+  info(`Unregistering tool ${toolId} in the second tab.`);
+  await toggleTool(tab2, toolId);
+
+  info(`Registering tool ${toolId} in the first tab.`);
+  await toggleTool(tab1, toolId);
+
+  info(`Unregistering tool ${toolId} in the second tab.`);
+  await toggleTool(tab2, toolId);
+}
+
+async function toggleTool({ doc, panelWin, checkbox, tab }, toolId) {
+  const prevChecked = checkbox.checked;
+
+  (prevChecked ? checkRegistered : checkUnregistered)(toolId);
+
+  const onToggleTool = gDevTools.once(
+    `tool-${prevChecked ? "unregistered" : "registered"}`
+  );
+  EventUtils.sendMouseEvent({ type: "click" }, checkbox, panelWin);
+  const id = await onToggleTool;
+
+  is(id, toolId, `Correct event for ${toolId} was fired`);
+  // await new Promise(resolve => setTimeout(resolve, 60000));
+  (prevChecked ? checkUnregistered : checkRegistered)(toolId);
+}
+
+async function checkUnregistered(toolId) {
+  ok(
+    !getToolboxTab(tab1.doc, toolId),
+    `Tab for unregistered tool ${toolId} is not present in first toolbox`
+  );
+  ok(
+    !tab1.checkbox.checked,
+    `Checkbox for unregistered tool ${toolId} is not checked in first toolbox`
+  );
+  ok(
+    !getToolboxTab(tab2.doc, toolId),
+    `Tab for unregistered tool ${toolId} is not present in second toolbox`
+  );
+  ok(
+    !tab2.checkbox.checked,
+    `Checkbox for unregistered tool ${toolId} is not checked in second toolbox`
+  );
+}
+
+function checkRegistered(toolId) {
+  ok(
+    getToolboxTab(tab1.doc, toolId),
+    `Tab for registered tool ${toolId} is present in first toolbox`
+  );
+  ok(
+    tab1.checkbox.checked,
+    `Checkbox for registered tool ${toolId} is checked in first toolbox`
+  );
+  ok(
+    getToolboxTab(tab2.doc, toolId),
+    `Tab for registered tool ${toolId} is present in second toolbox`
+  );
+  ok(
+    tab2.checkbox.checked,
+    `Checkbox for registered tool ${toolId} is checked in second toolbox`
+  );
+}
+
+async function cleanup() {
+  await tab1.toolbox.destroy();
+  await tab2.toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  gBrowser.removeCurrentTab();
+  Services.prefs.clearUserPref(modifiedPref);
+  tab1 = tab2 = modifiedPref = null;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_panel_toggle.js b/devtools/client/framework/test/browser_toolbox_options_panel_toggle.js
new file mode 100644
index 0000000000..d94f7c14fb
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_panel_toggle.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether options panel toggled by key event and "Settings" on the meatball menu.
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  const tab = await addTab("about:blank");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "webconsole",
+    Toolbox.HostType.BOTTOM
+  );
+
+  info("Check the option panel was selected after sending F1 key event");
+  await sendOptionsKeyEvent(toolbox);
+  is(toolbox.currentToolId, "options", "The options panel should be selected");
+
+  info("Check the last selected panel was selected after sending F1 key event");
+  await sendOptionsKeyEvent(toolbox);
+  is(
+    toolbox.currentToolId,
+    "webconsole",
+    "The webconsole panel should be selected"
+  );
+
+  info("Check the option panel was selected after clicking 'Settings' menu");
+  await clickSettingsMenu(toolbox);
+  is(toolbox.currentToolId, "options", "The options panel should be selected");
+
+  info(
+    "Check the last selected panel was selected after clicking 'Settings' menu"
+  );
+  await sendOptionsKeyEvent(toolbox);
+  is(
+    toolbox.currentToolId,
+    "webconsole",
+    "The webconsole panel should be selected"
+  );
+
+  info("Check the combination of key event and 'Settings' menu");
+  await sendOptionsKeyEvent(toolbox);
+  await clickSettingsMenu(toolbox);
+  is(
+    toolbox.currentToolId,
+    "webconsole",
+    "The webconsole panel should be selected"
+  );
+  await clickSettingsMenu(toolbox);
+  await sendOptionsKeyEvent(toolbox);
+  is(
+    toolbox.currentToolId,
+    "webconsole",
+    "The webconsole panel should be selected"
+  );
+});
+
+async function sendOptionsKeyEvent(toolbox) {
+  const onReady = toolbox.once("select");
+  EventUtils.synthesizeKey("VK_F1", {}, toolbox.win);
+  await onReady;
+}
+
+async function clickSettingsMenu(toolbox) {
+  const onPopupShown = () => {
+    toolbox.doc.removeEventListener("popupshown", onPopupShown);
+    const menuItem = toolbox.doc.getElementById(
+      "toolbox-meatball-menu-settings"
+    );
+    EventUtils.synthesizeMouseAtCenter(menuItem, {}, menuItem.ownerGlobal);
+  };
+  toolbox.doc.addEventListener("popupshown", onPopupShown);
+
+  const button = toolbox.doc.getElementById("toolbox-meatball-menu-button");
+  await waitUntil(() => button.style.pointerEvents !== "none");
+  EventUtils.synthesizeMouseAtCenter(button, {}, button.ownerGlobal);
+
+  await toolbox.once("select");
+}
diff --git a/devtools/client/framework/test/browser_toolbox_popups_debugging.js b/devtools/client/framework/test/browser_toolbox_popups_debugging.js
new file mode 100644
index 0000000000..28b2603e80
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_popups_debugging.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test opening toolboxes against a tab and its popup
+
+const TEST_URL = "data:text/html,test for debugging popups";
+const POPUP_URL = "data:text/html,popup";
+
+const POPUP_DEBUG_PREF = "devtools.popups.debug";
+
+add_task(async function () {
+  const isPopupDebuggingEnabled = Services.prefs.getBoolPref(POPUP_DEBUG_PREF);
+
+  info("Open a tab and debug it");
+  const tab = await addTab(TEST_URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "webconsole",
+  });
+
+  info("Open a popup");
+  const onTabOpened = once(gBrowser.tabContainer, "TabOpen");
+  const onToolboxSwitchedToTab = toolbox.once("switched-host-to-tab");
+  await SpecialPowers.spawn(tab.linkedBrowser, [POPUP_URL], url => {
+    content.open(url);
+  });
+  const tabOpenEvent = await onTabOpened;
+  const popupTab = tabOpenEvent.target;
+
+  const popupToolbox = await gDevTools.showToolboxForTab(popupTab);
+  if (isPopupDebuggingEnabled) {
+    ok(
+      !popupToolbox,
+      "When popup debugging is enabled, the popup should be debugged via the same toolbox as the original tab"
+    );
+    info("Wait for internal event notifying about the toolbox being moved");
+    await onToolboxSwitchedToTab;
+    const browserContainer = gBrowser.getBrowserContainer(
+      popupTab.linkedBrowser
+    );
+    const iframe = browserContainer.querySelector(
+      ".devtools-toolbox-bottom-iframe"
+    );
+    ok(iframe, "The original tab's toolbox moved to the popup tab");
+  } else {
+    ok(popupToolbox, "We were able to spawn a toolbox for the popup");
+    info("Close the popup toolbox and its tab");
+    await popupToolbox.destroy();
+  }
+
+  info("Close the popup tab");
+  gBrowser.removeCurrentTab();
+
+  info("Close the original tab toolbox and itself");
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_races.js b/devtools/client/framework/test/browser_toolbox_races.js
new file mode 100644
index 0000000000..ede038e716
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_races.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Toggling the toolbox three time can take more than 45s on slow test machine
+requestLongerTimeout(2);
+
+// Test toggling the toolbox quickly and see if there is any race breaking it.
+
+const URL = "data:text/html;charset=utf-8,Toggling devtools quickly";
+const {
+  gDevToolsBrowser,
+} = require("resource://devtools/client/framework/devtools-browser.js");
+
+add_task(async function () {
+  // Make sure this test starts with the selectedTool pref cleared. Previous
+  // tests select various tools, and that sets this pref.
+  Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
+
+  await addTab(URL);
+
+  let ready = 0,
+    destroy = 0,
+    destroyed = 0;
+  const onReady = () => {
+    ready++;
+  };
+  const onDestroy = () => {
+    destroy++;
+  };
+  const onDestroyed = () => {
+    destroyed++;
+  };
+  gDevTools.on("toolbox-ready", onReady);
+  gDevTools.on("toolbox-destroy", onDestroy);
+  gDevTools.on("toolbox-destroyed", onDestroyed);
+
+  // The current implementation won't toggle the toolbox many times,
+  // instead it will ignore toggles that happens while the toolbox is still
+  // creating or still destroying.
+
+  info("Toggle the toolbox many times in a row");
+  toggle();
+  toggle();
+  toggle();
+  toggle();
+  toggle();
+  await wait(500);
+
+  await waitFor(() => ready == 1);
+  is(
+    ready,
+    1,
+    "No matter how many times we called toggle, it will only open the toolbox once"
+  );
+  is(
+    destroy,
+    0,
+    "All subsequent, synchronous call to toggle will be ignored and the toolbox won't be destroyed"
+  );
+  is(destroyed, 0);
+
+  info("Retoggle the toolbox many times in a row");
+  toggle();
+  toggle();
+  toggle();
+  toggle();
+  toggle();
+  await wait(500);
+
+  await waitFor(() => destroyed == 1);
+  is(destroyed, 1, "Similarly, the toolbox will be closed");
+  is(destroy, 1);
+  is(
+    ready,
+    1,
+    "and no other toolbox will be opened. The subsequent toggle will be ignored."
+  );
+
+  gDevTools.off("toolbox-ready", onReady);
+  gDevTools.off("toolbox-destroy", onDestroy);
+  gDevTools.off("toolbox-destroyed", onDestroyed);
+  await wait(1000);
+
+  gBrowser.removeCurrentTab();
+});
+
+function toggle() {
+  // When enabling the input event prioritization, we'll reserve some time to
+  // process input events in each frame. In that case, the synthesized input
+  // events may delay the normal events. Replace synthesized key events by
+  // toggleToolboxCommand to prevent the synthesized input events jam the
+  // content process and cause the test timeout.
+  gDevToolsBrowser.toggleToolboxCommand(window.gBrowser);
+}
diff --git a/devtools/client/framework/test/browser_toolbox_raise.js b/devtools/client/framework/test/browser_toolbox_raise.js
new file mode 100644
index 0000000000..1912d349d4
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_raise.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URL = "data:text/html,test for opening toolbox in different hosts";
+
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  const tab1 = await addTab(TEST_URL);
+  const tab2 = BrowserTestUtils.addTab(gBrowser);
+
+  const toolbox = await gDevTools.showToolboxForTab(tab1);
+  await testBottomHost(toolbox, tab1, tab2);
+
+  await testWindowHost(toolbox);
+
+  Services.prefs.setCharPref("devtools.toolbox.host", Toolbox.HostType.BOTTOM);
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  gBrowser.removeCurrentTab();
+});
+
+async function testBottomHost(toolbox, tab1, tab2) {
+  // switch to another tab and test toolbox.raise()
+  gBrowser.selectedTab = tab2;
+  await new Promise(executeSoon);
+  is(
+    gBrowser.selectedTab,
+    tab2,
+    "Correct tab is selected before calling raise"
+  );
+
+  await toolbox.raise();
+  is(
+    gBrowser.selectedTab,
+    tab1,
+    "Correct tab was selected after calling raise"
+  );
+}
+
+async function testWindowHost(toolbox) {
+  await toolbox.switchHost(Toolbox.HostType.WINDOW);
+
+  info("Wait for the toolbox to be focused when switching to window host");
+  // We can't wait for the "focus" event on toolbox.win.parent as this document is created while calling switchHost.
+  await waitFor(() => {
+    return Services.focus.activeWindow == toolbox.topWindow;
+  });
+
+  const onBrowserWindowFocused = new Promise(resolve =>
+    window.addEventListener("focus", resolve, { once: true, capture: true })
+  );
+
+  info("Focusing the browser window");
+  window.focus();
+
+  info("Wait for the browser window to be focused");
+  await onBrowserWindowFocused;
+
+  // Now raise toolbox.
+  await toolbox.raise();
+  is(
+    Services.focus.activeWindow,
+    toolbox.topWindow,
+    "the toolbox window is immediately focused after raise resolution"
+  );
+}
diff --git a/devtools/client/framework/test/browser_toolbox_ready.js b/devtools/client/framework/test/browser_toolbox_ready.js
new file mode 100644
index 0000000000..5d7d6be258
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_ready.js
@@ -0,0 +1,22 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URL = "data:text/html,test for toolbox being ready";
+
+add_task(async function () {
+  const tab = await addTab(TEST_URL);
+
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "webconsole",
+  });
+  ok(toolbox.isReady, "toolbox isReady is set");
+  ok(toolbox.threadFront, "toolbox has a thread front");
+
+  const toolbox2 = await gDevTools.showToolboxForTab(tab, {
+    toolId: toolbox.toolId,
+  });
+  is(toolbox2, toolbox, "same toolbox");
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_remoteness_change.js b/devtools/client/framework/test/browser_toolbox_remoteness_change.js
new file mode 100644
index 0000000000..af5f105214
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_remoteness_change.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const URL_1 = "about:robots";
+const URL_2 =
+  "data:text/html;charset=UTF-8," +
+  encodeURIComponent('<div id="remote-page">foo</div>');
+
+// Testing navigation between processes
+add_task(async function () {
+  info(`Testing navigation between processes`);
+
+  info("Open a tab on a URL supporting only running in parent process");
+  const tab = await addTab(URL_1);
+  is(
+    tab.linkedBrowser.currentURI.spec,
+    URL_1,
+    "We really are on the expected document"
+  );
+  is(
+    tab.linkedBrowser.getAttribute("remote"),
+    "",
+    "And running in parent process"
+  );
+
+  const toolbox = await openToolboxForTab(tab);
+
+  info("Navigate to a URL supporting remote process");
+  await navigateTo(URL_2);
+
+  is(
+    tab.linkedBrowser.getAttribute("remote"),
+    "true",
+    "Navigated to a data: URI and switching to remote"
+  );
+
+  info("Veryify we are inspecting the new document");
+  const console = await toolbox.selectTool("webconsole");
+  const { ui } = console.hud;
+  ui.wrapper.dispatchEvaluateExpression("document.location.href");
+  await waitUntil(() => ui.outputNode.querySelector(".result"));
+  const url = ui.outputNode.querySelector(".result");
+
+  ok(
+    url.textContent.includes(URL_2),
+    "The console inspects the second document"
+  );
+
+  const { client } = toolbox.target;
+  await toolbox.destroy();
+  ok(client._transportClosed, "The client is closed after closing the toolbox");
+});
diff --git a/devtools/client/framework/test/browser_toolbox_screenshot_tool.js b/devtools/client/framework/test/browser_toolbox_screenshot_tool.js
new file mode 100644
index 0000000000..63c8b9fd58
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_screenshot_tool.js
@@ -0,0 +1,126 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const exampleOrgDocument = `https://example.org/document-builder.sjs`;
+const exampleComDocument = `https://example.com/document-builder.sjs`;
+
+const TEST_URL = `${exampleOrgDocument}?html=
+  <style>
+    body {
+      margin: 0;
+      height: 10001px;
+    }
+    iframe {
+      height: 50px;
+      border:none;
+      display: block;
+    }
+  </style>
+  <iframe
+    src="${exampleOrgDocument}?html=<body style='margin:0;height:30px;background:rgb(255,0,0)'></body>"
+    id="same-origin"></iframe>
+  <iframe
+    src="${exampleComDocument}?html=<body style='margin:0;height:30px;background:rgb(0,255,0)'></body>"
+    id="remote"></iframe>`;
+
+add_task(async function () {
+  await pushPref("devtools.command-button-screenshot.enabled", true);
+
+  await addTab(TEST_URL);
+
+  info("Open the toolbox");
+  const toolbox = await gDevTools.showToolboxForTab(gBrowser.selectedTab);
+
+  const onScreenshotDownloaded = waitUntilScreenshot();
+  toolbox.doc.querySelector("#command-button-screenshot").click();
+  const filePath = await onScreenshotDownloaded;
+
+  ok(!!filePath, "The screenshot was taken");
+
+  info("Create an image using the downloaded file as source");
+  const image = new Image();
+  const onImageLoad = once(image, "load");
+  image.src = PathUtils.toFileURI(filePath);
+  await onImageLoad;
+
+  const dpr = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.wrappedJSObject.devicePixelRatio
+  );
+
+  info("Check that the same-origin iframe is rendered in the screenshot");
+  await checkImageColorAt({
+    image,
+    y: 10 * dpr,
+    expectedColor: `rgb(255, 0, 0)`,
+    label: "The same-origin iframe is rendered properly in the screenshot",
+  });
+
+  info("Check that the remote iframe is rendered in the screenshot");
+  await checkImageColorAt({
+    image,
+    y: 60 * dpr,
+    expectedColor: `rgb(0, 255, 0)`,
+    label: "The remote iframe is rendered properly in the screenshot",
+  });
+
+  info(
+    "Check that a warning message was displayed to indicate the screenshot was truncated"
+  );
+  const notificationBox = await waitFor(() =>
+    toolbox.doc.querySelector(".notificationbox")
+  );
+
+  const message = notificationBox.querySelector(".notification").textContent;
+  ok(
+    message.startsWith("The image was cut off"),
+    `The warning message is rendered as expected (${message})`
+  );
+
+  // Remove the downloaded screenshot file
+  await IOUtils.remove(filePath);
+
+  info(
+    "Check that taking a screenshot in a private window doesn't appear in the non-private window"
+  );
+  const privateWindow = await BrowserTestUtils.openNewBrowserWindow({
+    private: true,
+  });
+  ok(PrivateBrowsingUtils.isWindowPrivate(privateWindow), "window is private");
+  const privateBrowser = privateWindow.gBrowser;
+  privateBrowser.selectedTab = BrowserTestUtils.addTab(
+    privateBrowser,
+    TEST_URL
+  );
+
+  info("private tab opened");
+  ok(
+    PrivateBrowsingUtils.isBrowserPrivate(privateBrowser.selectedBrowser),
+    "tab window is private"
+  );
+
+  const privateToolbox = await gDevTools.showToolboxForTab(
+    privateBrowser.selectedTab
+  );
+
+  const onPrivateScreenshotDownloaded = waitUntilScreenshot({
+    isWindowPrivate: true,
+  });
+  privateToolbox.doc.querySelector("#command-button-screenshot").click();
+  const privateScreenshotFilePath = await onPrivateScreenshotDownloaded;
+  ok(
+    !!privateScreenshotFilePath,
+    "The screenshot was taken in the private window"
+  );
+
+  // Remove the downloaded screenshot file
+  await IOUtils.remove(privateScreenshotFilePath);
+
+  // cleanup the downloads
+  await resetDownloads();
+
+  const closePromise = BrowserTestUtils.windowClosed(privateWindow);
+  privateWindow.BrowserTryToCloseWindow();
+  await closePromise;
+});
diff --git a/devtools/client/framework/test/browser_toolbox_select_event.js b/devtools/client/framework/test/browser_toolbox_select_event.js
new file mode 100644
index 0000000000..ebdae9af13
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_select_event.js
@@ -0,0 +1,98 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const PAGE_URL = "data:text/html;charset=utf-8,test select events";
+
+requestLongerTimeout(2);
+
+add_task(async function () {
+  const tab = await addTab(PAGE_URL);
+
+  let toolbox = await openToolboxForTab(tab, "webconsole", "bottom");
+  await testSelectEvent("inspector");
+  await testSelectEvent("webconsole");
+  await testSelectEvent("styleeditor");
+  await testSelectEvent("inspector");
+  await testSelectEvent("webconsole");
+  await testSelectEvent("styleeditor");
+
+  await testToolSelectEvent("inspector");
+  await testToolSelectEvent("webconsole");
+  await testToolSelectEvent("styleeditor");
+  await toolbox.destroy();
+
+  toolbox = await openToolboxForTab(tab, "webconsole", "right");
+  await testSelectEvent("inspector");
+  await testSelectEvent("webconsole");
+  await testSelectEvent("styleeditor");
+  await testSelectEvent("inspector");
+  await testSelectEvent("webconsole");
+  await testSelectEvent("styleeditor");
+  await toolbox.destroy();
+
+  toolbox = await openToolboxForTab(tab, "webconsole", "window");
+  await testSelectEvent("inspector");
+  await testSelectEvent("webconsole");
+  await testSelectEvent("styleeditor");
+  await testSelectEvent("inspector");
+  await testSelectEvent("webconsole");
+  await testSelectEvent("styleeditor");
+  await toolbox.destroy();
+
+  await testSelectToolRace();
+
+  /**
+   * Assert that selecting the given toolId raises a select event
+   * @param {toolId} Id of the tool to test
+   */
+  async function testSelectEvent(toolId) {
+    const onSelect = toolbox.once("select");
+    toolbox.selectTool(toolId);
+    const id = await onSelect;
+    is(id, toolId, toolId + " selected");
+  }
+
+  /**
+   * Assert that selecting the given toolId raises its corresponding
+   * selected event
+   * @param {toolId} Id of the tool to test
+   */
+  async function testToolSelectEvent(toolId) {
+    const onSelected = toolbox.once(toolId + "-selected");
+    toolbox.selectTool(toolId);
+    await onSelected;
+    is(toolbox.currentToolId, toolId, toolId + " tool selected");
+  }
+
+  /**
+   * Assert that two calls to selectTool won't race
+   */
+  async function testSelectToolRace() {
+    const toolbox = await openToolboxForTab(tab, "webconsole");
+    let selected = false;
+    const onSelect = (event, id) => {
+      if (selected) {
+        ok(false, "Got more than one 'select' event");
+      } else {
+        selected = true;
+      }
+    };
+    toolbox.once("select", onSelect);
+    const p1 = toolbox.selectTool("inspector");
+    const p2 = toolbox.selectTool("inspector");
+    // Check that both promises don't resolve too early
+    const checkSelectToolResolution = panel => {
+      ok(selected, "selectTool resolves only after 'select' event is fired");
+      const inspector = toolbox.getPanel("inspector");
+      is(panel, inspector, "selecTool resolves to the panel instance");
+    };
+    p1.then(checkSelectToolResolution);
+    p2.then(checkSelectToolResolution);
+    await p1;
+    await p2;
+
+    await toolbox.destroy();
+  }
+});
diff --git a/devtools/client/framework/test/browser_toolbox_selected_tool_unavailable.js b/devtools/client/framework/test/browser_toolbox_selected_tool_unavailable.js
new file mode 100644
index 0000000000..c55ad5867c
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_selected_tool_unavailable.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that opening the toolbox doesn't throw when the previously selected
+// tool is not supported.
+
+const testToolDefinition = {
+  id: "testTool",
+  isToolSupported: () => true,
+  visibilityswitch: "devtools.test-tool.enabled",
+  url: "about:blank",
+  label: "someLabel",
+  build: (iframeWindow, toolbox) => {
+    return {
+      target: toolbox.target,
+      toolbox,
+      isReady: true,
+      destroy: () => {},
+      panelDoc: iframeWindow.document,
+    };
+  },
+};
+
+add_task(async function () {
+  gDevTools.registerTool(testToolDefinition);
+  let tab = await addTab("about:blank");
+
+  let toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: testToolDefinition.id,
+  });
+  is(toolbox.currentToolId, "testTool", "test-tool was selected");
+  await toolbox.destroy();
+
+  // Make the previously selected tool unavailable.
+  testToolDefinition.isToolSupported = () => false;
+
+  toolbox = await gDevTools.showToolboxForTab(tab);
+  is(toolbox.currentToolId, "webconsole", "web console was selected");
+
+  await toolbox.destroy();
+  gDevTools.unregisterTool(testToolDefinition.id);
+  tab = toolbox = null;
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_selectionchanged_event.js b/devtools/client/framework/test/browser_toolbox_selectionchanged_event.js
new file mode 100644
index 0000000000..e4e0dcc446
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_selectionchanged_event.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const PAGE_URL = "data:text/html;charset=utf-8,<body><div></div></body>";
+
+add_task(async function () {
+  const tab = await addTab(PAGE_URL);
+  const toolbox = await openToolboxForTab(tab, "inspector", "bottom");
+  const inspector = toolbox.getCurrentPanel();
+
+  const root = await inspector.walker.getRootNode();
+  const body = await inspector.walker.querySelector(root, "body");
+  const node = await inspector.walker.querySelector(root, "div");
+
+  is(inspector.selection.nodeFront, body, "Body is selected by default");
+
+  // Listen to selection changed
+  const onSelectionChanged = toolbox.once("selection-changed");
+
+  info("Select the div and wait for the selection-changed event to be fired.");
+  inspector.selection.setNodeFront(node, { reason: "browser-context-menu" });
+
+  await onSelectionChanged;
+
+  is(inspector.selection.nodeFront, node, "Div is now selected");
+
+  // Listen to cleared selection changed
+  const onClearSelectionChanged = toolbox.once("selection-changed");
+
+  info(
+    "Clear the selection and wait for the selection-changed event to be fired."
+  );
+  inspector.selection.setNodeFront(null);
+
+  await onClearSelectionChanged;
+
+  is(inspector.selection.nodeFront, null, "The selection is null as expected");
+});
diff --git a/devtools/client/framework/test/browser_toolbox_show_toolbox_tool_ready.js b/devtools/client/framework/test/browser_toolbox_show_toolbox_tool_ready.js
new file mode 100644
index 0000000000..d24f8cfedf
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_show_toolbox_tool_ready.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const URL =
+  "data:text/html;charset=utf8,test for showToolbox called while tool is opened";
+const lazyToolId = "testtool1";
+
+registerCleanupFunction(() => {
+  gDevTools.unregisterTool(lazyToolId);
+});
+
+// Delay to wait before the lazy tool should finish
+const TOOL_OPEN_DELAY = 3000;
+
+class LazyDevToolsPanel extends DevToolPanel {
+  constructor(iframeWindow, toolbox) {
+    super(iframeWindow, toolbox);
+  }
+
+  async open() {
+    await wait(TOOL_OPEN_DELAY);
+    return this;
+  }
+}
+
+function isPanelReady(toolbox, toolId) {
+  return !!toolbox.getPanel(toolId);
+}
+
+/**
+ * Test that showToolbox will wait until the specified tool is completely read before
+ * returning. See Bug 1543907.
+ */
+add_task(async function automaticallyBindTexbox() {
+  info(
+    "Registering a tool with an input field and making sure the context menu works"
+  );
+
+  gDevTools.registerTool({
+    id: lazyToolId,
+    isToolSupported: () => true,
+    url: CHROME_URL_ROOT + "doc_lazy_tool.html",
+    label: "Lazy",
+    build(iframeWindow, toolbox) {
+      this.panel = new LazyDevToolsPanel(iframeWindow, toolbox);
+      return this.panel.open();
+    },
+  });
+
+  const tab = await addTab(URL);
+  const toolbox = await openToolboxForTab(tab, "inspector");
+  const onLazyToolReady = toolbox.once(lazyToolId + "-ready");
+  toolbox.selectTool(lazyToolId);
+
+  info("Wait until toolbox considers the current tool is the lazy tool");
+  await waitUntil(() => toolbox.currentToolId == lazyToolId);
+
+  ok(!isPanelReady(toolbox, lazyToolId), "lazyTool should not be ready yet");
+  await gDevTools.showToolboxForTab(tab, { toolId: lazyToolId });
+  ok(
+    isPanelReady(toolbox, lazyToolId),
+    "lazyTool should not ready after showToolbox"
+  );
+
+  // Make sure lazyTool is ready before leaving the test.
+  await onLazyToolReady;
+});
diff --git a/devtools/client/framework/test/browser_toolbox_split_console.js b/devtools/client/framework/test/browser_toolbox_split_console.js
new file mode 100644
index 0000000000..e69a493df9
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_split_console.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that these toolbox split console APIs work:
+//  * toolbox.useKeyWithSplitConsole()
+//  * toolbox.isSplitConsoleFocused
+
+let gToolbox = null;
+let panelWin = null;
+
+const URL = "data:text/html;charset=utf8,test split console key delegation";
+
+add_task(async function () {
+  const tab = await addTab(URL);
+  gToolbox = await gDevTools.showToolboxForTab(tab, { toolId: "jsdebugger" });
+  panelWin = gToolbox.getPanel("jsdebugger").panelWin;
+
+  await gToolbox.openSplitConsole();
+  await testIsSplitConsoleFocused();
+  await testUseKeyWithSplitConsole();
+  await testUseKeyWithSplitConsoleWrongTool();
+
+  await cleanup();
+});
+
+async function testIsSplitConsoleFocused() {
+  await gToolbox.openSplitConsole();
+  // The newly opened split console should have focus
+  ok(gToolbox.isSplitConsoleFocused(), "Split console is focused");
+  panelWin.focus();
+  ok(!gToolbox.isSplitConsoleFocused(), "Split console is no longer focused");
+}
+
+// A key bound to the selected tool should trigger it's command
+function testUseKeyWithSplitConsole() {
+  let commandCalled = false;
+
+  info("useKeyWithSplitConsole on debugger while debugger is focused");
+  gToolbox.useKeyWithSplitConsole(
+    "F3",
+    () => {
+      commandCalled = true;
+    },
+    "jsdebugger"
+  );
+
+  info("synthesizeKey with the console focused");
+  focusConsoleInput();
+  synthesizeKeyShortcut("F3", panelWin);
+
+  ok(commandCalled, "Shortcut key should trigger the command");
+}
+
+// A key bound to a *different* tool should not trigger it's command
+function testUseKeyWithSplitConsoleWrongTool() {
+  let commandCalled = false;
+
+  info("useKeyWithSplitConsole on inspector while debugger is focused");
+  gToolbox.useKeyWithSplitConsole(
+    "F4",
+    () => {
+      commandCalled = true;
+    },
+    "inspector"
+  );
+
+  info("synthesizeKey with the console focused");
+  focusConsoleInput();
+  synthesizeKeyShortcut("F4", panelWin);
+
+  ok(!commandCalled, "Shortcut key shouldn't trigger the command");
+}
+
+async function cleanup() {
+  await gToolbox.destroy();
+  gBrowser.removeCurrentTab();
+  gToolbox = panelWin = null;
+}
+
+function focusConsoleInput() {
+  gToolbox.getPanel("webconsole").hud.jsterm.focus();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_tabsswitch_shortcuts.js b/devtools/client/framework/test/browser_toolbox_tabsswitch_shortcuts.js
new file mode 100644
index 0000000000..06123e8d68
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_tabsswitch_shortcuts.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/toolbox.properties"
+);
+
+add_task(async function () {
+  const tab = await addTab("about:blank");
+
+  const toolIDs = (await getSupportedToolIds(tab)).filter(
+    id => id != "options"
+  );
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    hostType: Toolbox.HostType.BOTTOM,
+    toolId: toolIDs[0],
+  });
+  const nextShortcut = L10N.getStr("toolbox.nextTool.key");
+  const prevShortcut = L10N.getStr("toolbox.previousTool.key");
+
+  // Iterate over all tools, starting from options to netmonitor, in normal
+  // order.
+  for (let i = 1; i < toolIDs.length; i++) {
+    await testShortcuts(toolbox, i, nextShortcut, toolIDs);
+  }
+
+  // Iterate again, in the same order, starting from netmonitor (so next one is
+  // 0: options).
+  for (let i = 0; i < toolIDs.length; i++) {
+    await testShortcuts(toolbox, i, nextShortcut, toolIDs);
+  }
+
+  // Iterate over all tools in reverse order, starting from netmonitor to
+  // options.
+  for (let i = toolIDs.length - 2; i >= 0; i--) {
+    await testShortcuts(toolbox, i, prevShortcut, toolIDs);
+  }
+
+  // Iterate again, in reverse order again, starting from options (so next one
+  // is length-1: netmonitor).
+  for (let i = toolIDs.length - 1; i >= 0; i--) {
+    await testShortcuts(toolbox, i, prevShortcut, toolIDs);
+  }
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+async function testShortcuts(toolbox, index, shortcut, toolIDs) {
+  info(
+    "Testing shortcut to switch to tool " +
+      index +
+      ":" +
+      toolIDs[index] +
+      " using shortcut " +
+      shortcut
+  );
+
+  const onToolSelected = toolbox.once("select");
+  synthesizeKeyShortcut(shortcut);
+  const id = await onToolSelected;
+
+  info("toolbox-select event from " + id);
+
+  is(
+    toolIDs.indexOf(id),
+    index,
+    "Correct tool is selected on pressing the shortcut for " + id
+  );
+}
diff --git a/devtools/client/framework/test/browser_toolbox_telemetry_activate_splitconsole.js b/devtools/client/framework/test/browser_toolbox_telemetry_activate_splitconsole.js
new file mode 100644
index 0000000000..cd1a478f5c
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_telemetry_activate_splitconsole.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const URL =
+  "data:text/html;charset=utf8,browser_toolbox_telemetry_activate_splitconsole.js";
+const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
+const DATA = [
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "activate",
+    object: "split_console",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "deactivate",
+    object: "split_console",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "activate",
+    object: "split_console",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "deactivate",
+    object: "split_console",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+    },
+  },
+];
+
+add_task(async function () {
+  // See Bug 1500141: this test frequently fails on beta because some highlighter
+  // requests made by the BoxModel component in the layout view come back when the
+  // connection between the client and the server has been destroyed. We are forcing
+  // the computed view here to avoid the failures but ideally we should have an event
+  // or a promise on the inspector we can wait for to be sure the initialization is over.
+  // Logged Bug 1500918 to investigate this.
+  await pushPref("devtools.inspector.activeSidebar", "computedview");
+
+  // Let's reset the counts.
+  Services.telemetry.clearEvents();
+
+  // Ensure no events have been logged
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  ok(!snapshot.parent, "No events have been logged for the main process");
+
+  const tab = await addTab(URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "inspector",
+  });
+
+  await toolbox.openSplitConsole();
+  await toolbox.closeSplitConsole();
+  await toolbox.openSplitConsole();
+  await toolbox.closeSplitConsole();
+
+  await checkResults();
+});
+
+async function checkResults() {
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  const events = snapshot.parent.filter(
+    event =>
+      event[1] === "devtools.main" &&
+      (event[2] === "activate" || event[2] === "deactivate")
+  );
+
+  for (const i in DATA) {
+    const [timestamp, category, method, object, value, extra] = events[i];
+    const expected = DATA[i];
+
+    // ignore timestamp
+    Assert.greater(timestamp, 0, "timestamp is greater than 0");
+    is(category, expected.category, "category is correct");
+    is(method, expected.method, "method is correct");
+    is(object, expected.object, "object is correct");
+    is(value, expected.value, "value is correct");
+
+    // extras
+    is(extra.host, expected.extra.host, "host is correct");
+    ok(extra.width > 0, "width is greater than 0");
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_telemetry_close.js b/devtools/client/framework/test/browser_toolbox_telemetry_close.js
new file mode 100644
index 0000000000..47aa1c056b
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_telemetry_close.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+const { TelemetryTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/TelemetryTestUtils.sys.mjs"
+);
+
+const URL = "data:text/html;charset=utf8,browser_toolbox_telemetry_close.js";
+const { RIGHT, BOTTOM } = Toolbox.HostType;
+const DATA = [
+  {
+    category: "devtools.main",
+    method: "close",
+    object: "tools",
+    value: null,
+    extra: {
+      host: "right",
+      width: w => w > 0,
+    },
+  },
+  {
+    category: "devtools.main",
+    method: "close",
+    object: "tools",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: w => w > 0,
+    },
+  },
+];
+
+add_task(async function () {
+  // Let's reset the counts.
+  Services.telemetry.clearEvents();
+
+  // Ensure no events have been logged
+  TelemetryTestUtils.assertNumberOfEvents(0);
+
+  await openAndCloseToolbox("webconsole", RIGHT);
+  await openAndCloseToolbox("webconsole", BOTTOM);
+
+  checkResults();
+});
+
+async function openAndCloseToolbox(toolId, host) {
+  const tab = await addTab(URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, { toolId });
+
+  await toolbox.switchHost(host);
+  await toolbox.destroy();
+}
+
+function checkResults() {
+  TelemetryTestUtils.assertEvents(DATA, {
+    category: "devtools.main",
+    method: "close",
+    object: "tools",
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_telemetry_enter.js b/devtools/client/framework/test/browser_toolbox_telemetry_enter.js
new file mode 100644
index 0000000000..4cb4611a97
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_telemetry_enter.js
@@ -0,0 +1,152 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const URL = "data:text/html;charset=utf8,browser_toolbox_telemetry_enter.js";
+const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
+const DATA = [
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "enter",
+    object: "inspector",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+      start_state: "initial_panel",
+      panel_name: "inspector",
+      cold: "true",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "enter",
+    object: "jsdebugger",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+      start_state: "toolbox_show",
+      panel_name: "jsdebugger",
+      cold: "true",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "enter",
+    object: "styleeditor",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+      start_state: "toolbox_show",
+      panel_name: "styleeditor",
+      cold: "true",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "enter",
+    object: "netmonitor",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+      start_state: "toolbox_show",
+      panel_name: "netmonitor",
+      cold: "true",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "enter",
+    object: "storage",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+      start_state: "toolbox_show",
+      panel_name: "storage",
+      cold: "true",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "enter",
+    object: "netmonitor",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: "1300",
+      start_state: "toolbox_show",
+      panel_name: "netmonitor",
+      cold: "false",
+    },
+  },
+];
+
+add_task(async function () {
+  // Let's reset the counts.
+  Services.telemetry.clearEvents();
+
+  // Ensure no events have been logged
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  ok(!snapshot.parent, "No events have been logged for the main process");
+
+  const tab = await addTab(URL);
+
+  // Set up some cached messages for the web console.
+  await SpecialPowers.spawn(tab.linkedBrowser, [], () => {
+    content.console.log("test 1");
+    content.console.log("test 2");
+    content.console.log("test 3");
+    content.console.log("test 4");
+    content.console.log("test 5");
+  });
+
+  // Open the toolbox
+  await gDevTools.showToolboxForTab(tab, { toolId: "inspector" });
+
+  // Switch between a few tools
+  await gDevTools.showToolboxForTab(tab, { toolId: "jsdebugger" });
+  await gDevTools.showToolboxForTab(tab, { toolId: "styleeditor" });
+  await gDevTools.showToolboxForTab(tab, { toolId: "netmonitor" });
+  await gDevTools.showToolboxForTab(tab, { toolId: "storage" });
+  await gDevTools.showToolboxForTab(tab, { toolId: "netmonitor" });
+
+  await checkResults();
+});
+
+async function checkResults() {
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  const events = snapshot.parent.filter(
+    event =>
+      event[1] === "devtools.main" && event[2] === "enter" && event[4] === null
+  );
+
+  for (const i in DATA) {
+    const [timestamp, category, method, object, value, extra] = events[i];
+    const expected = DATA[i];
+
+    // ignore timestamp
+    Assert.greater(timestamp, 0, "timestamp is greater than 0");
+    is(category, expected.category, "category is correct");
+    is(method, expected.method, "method is correct");
+    is(object, expected.object, "object is correct");
+    is(value, expected.value, "value is correct");
+
+    // extras
+    is(extra.host, expected.extra.host, "host is correct");
+    ok(extra.width > 0, "width is greater than 0");
+    is(extra.start_state, expected.extra.start_state, "start_state is correct");
+    is(extra.panel_name, expected.extra.panel_name, "panel_name is correct");
+    is(extra.cold, expected.extra.cold, "cold is correct");
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_telemetry_exit.js b/devtools/client/framework/test/browser_toolbox_telemetry_exit.js
new file mode 100644
index 0000000000..3056b9af8c
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_telemetry_exit.js
@@ -0,0 +1,129 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const URL = "data:text/html;charset=utf8,browser_toolbox_telemetry_enter.js";
+const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
+const DATA = [
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "exit",
+    object: "inspector",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: 1300,
+      panel_name: "inspector",
+      next_panel: "jsdebugger",
+      reason: "toolbox_show",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "exit",
+    object: "jsdebugger",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: 1300,
+      panel_name: "jsdebugger",
+      next_panel: "styleeditor",
+      reason: "toolbox_show",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "exit",
+    object: "styleeditor",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: 1300,
+      panel_name: "styleeditor",
+      next_panel: "netmonitor",
+      reason: "toolbox_show",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "exit",
+    object: "netmonitor",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: 1300,
+      panel_name: "netmonitor",
+      next_panel: "storage",
+      reason: "toolbox_show",
+    },
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "exit",
+    object: "storage",
+    value: null,
+    extra: {
+      host: "bottom",
+      width: 1300,
+      panel_name: "storage",
+      next_panel: "netmonitor",
+      reason: "toolbox_show",
+    },
+  },
+];
+
+add_task(async function () {
+  // Let's reset the counts.
+  Services.telemetry.clearEvents();
+
+  // Ensure no events have been logged
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  ok(!snapshot.parent, "No events have been logged for the main process");
+
+  const tab = await addTab(URL);
+
+  // Open the toolbox
+  await gDevTools.showToolboxForTab(tab, { toolId: "inspector" });
+
+  // Switch between a few tools
+  await gDevTools.showToolboxForTab(tab, { toolId: "jsdebugger" });
+  await gDevTools.showToolboxForTab(tab, { toolId: "styleeditor" });
+  await gDevTools.showToolboxForTab(tab, { toolId: "netmonitor" });
+  await gDevTools.showToolboxForTab(tab, { toolId: "storage" });
+  await gDevTools.showToolboxForTab(tab, { toolId: "netmonitor" });
+
+  await checkResults();
+});
+
+async function checkResults() {
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  const events = snapshot.parent.filter(
+    event =>
+      event[1] === "devtools.main" && event[2] === "exit" && event[4] === null
+  );
+
+  for (const i in DATA) {
+    const [timestamp, category, method, object, value, extra] = events[i];
+    const expected = DATA[i];
+
+    // ignore timestamp
+    Assert.greater(timestamp, 0, "timestamp is greater than 0");
+    is(category, expected.category, "category is correct");
+    is(method, expected.method, "method is correct");
+    is(object, expected.object, "object is correct");
+    is(value, expected.value, "value is correct");
+
+    // extras
+    is(extra.host, expected.extra.host, "host is correct");
+    ok(extra.width > 0, "width is greater than 0");
+    is(extra.panel_name, expected.extra.panel_name, "panel_name is correct");
+    is(extra.next_panel, expected.extra.next_panel, "next_panel is correct");
+    is(extra.reason, expected.extra.reason, "reason is correct");
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_telemetry_open_event.js b/devtools/client/framework/test/browser_toolbox_telemetry_open_event.js
new file mode 100644
index 0000000000..aa2f7ea2ed
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_telemetry_open_event.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the "open" telemetry event is correctly logged when opening the
+// toolbox.
+const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
+
+add_task(async function () {
+  Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
+  const tab = await addTab("data:text/html;charset=utf-8,Test open event");
+
+  info("Open the toolbox with a shortcut to trigger the open event");
+  const onToolboxReady = gDevTools.once("toolbox-ready");
+  EventUtils.synthesizeKey("VK_F12", {});
+  await onToolboxReady;
+
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  // The telemetry is sent by DevToolsStartup and so isn't flaged against any session id
+  const events = snapshot.parent.filter(
+    event =>
+      event[1] === "devtools.main" &&
+      event[2] === "open" &&
+      event[5].session_id == -1
+  );
+
+  is(events.length, 1, "Telemetry open event was logged");
+
+  const extras = events[0][5];
+  is(extras.entrypoint, "KeyShortcut", "entrypoint extra is correct");
+  // The logged shortcut is `${modifiers}+${shortcut}`, which adds an
+  // extra `+` before F12 here.
+  // See https://searchfox.org/mozilla-central/rev/c7e8bc4996f979e5876b33afae3de3b1ab4f3ae1/devtools/startup/DevToolsStartup.jsm#1070
+  is(extras.shortcut, "+F12", "entrypoint shortcut is correct");
+
+  gBrowser.removeTab(tab);
+});
diff --git a/devtools/client/framework/test/browser_toolbox_textbox_context_menu.js b/devtools/client/framework/test/browser_toolbox_textbox_context_menu.js
new file mode 100644
index 0000000000..903d0c9912
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_textbox_context_menu.js
@@ -0,0 +1,137 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// HTML inputs don't automatically get the 'edit' context menu, so we have
+// a helper on the toolbox to do so. Make sure that shows menu items in the
+// right state, and that it works for an input inside of a panel.
+
+const URL = "data:text/html;charset=utf8,test for textbox context menu";
+const textboxToolId = "testtool1";
+
+registerCleanupFunction(() => {
+  gDevTools.unregisterTool(textboxToolId);
+});
+
+add_task(async function checkMenuEntryStates() {
+  info("Checking the state of edit menuitems with an empty clipboard");
+  const toolbox = await openNewTabAndToolbox(URL, "inspector");
+
+  emptyClipboard();
+
+  // Make sure the focus is predictable.
+  const inspector = toolbox.getPanel("inspector");
+  const onFocus = once(inspector.searchBox, "focus");
+  inspector.searchBox.focus();
+  await onFocus;
+
+  info("Opening context menu");
+  const onContextMenuPopup = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(inspector.searchBox);
+  await onContextMenuPopup;
+
+  const textboxContextMenu = toolbox.getTextBoxContextMenu();
+  ok(textboxContextMenu, "The textbox context menu is loaded in the toolbox");
+
+  const cmdUndo = textboxContextMenu.querySelector("#editmenu-undo");
+  const cmdDelete = textboxContextMenu.querySelector("#editmenu-delete");
+  const cmdSelectAll = textboxContextMenu.querySelector("#editmenu-selectAll");
+  const cmdCut = textboxContextMenu.querySelector("#editmenu-cut");
+  const cmdCopy = textboxContextMenu.querySelector("#editmenu-copy");
+  const cmdPaste = textboxContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
+  is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+  is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
+  is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
+
+  if (isWindows()) {
+    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
+    is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
+  }
+
+  const onContextMenuHidden = toolbox.once("menu-close");
+  if (Services.prefs.getBoolPref("widget.macos.native-context-menus", false)) {
+    info("Using hidePopup semantics because of macOS native context menus.");
+    textboxContextMenu.hidePopup();
+  } else {
+    EventUtils.sendKey("ESCAPE", toolbox.win);
+  }
+  await onContextMenuHidden;
+});
+
+add_task(async function automaticallyBindTexbox() {
+  info(
+    "Registering a tool with an input field and making sure the context menu works"
+  );
+  gDevTools.registerTool({
+    id: textboxToolId,
+    isToolSupported: () => true,
+    url: CHROME_URL_ROOT + "doc_textbox_tool.html",
+    label: "Context menu works without tool intervention",
+    build(iframeWindow, toolbox) {
+      this.panel = createTestPanel(iframeWindow, toolbox);
+      return this.panel.open();
+    },
+  });
+
+  const toolbox = await openNewTabAndToolbox(URL, textboxToolId);
+  is(toolbox.currentToolId, textboxToolId, "The custom tool has been opened");
+
+  const doc = toolbox.getCurrentPanel().document;
+  await checkTextBox(doc.querySelector("input[type=text]"), toolbox);
+  await checkTextBox(doc.querySelector("textarea"), toolbox);
+  await checkTextBox(doc.querySelector("input[type=search]"), toolbox);
+  await checkTextBox(doc.querySelector("input:not([type])"), toolbox);
+  await checkNonTextInput(doc.querySelector("input[type=radio]"), toolbox);
+});
+
+async function checkNonTextInput(input, toolbox) {
+  let textboxContextMenu = toolbox.getTextBoxContextMenu();
+  ok(!textboxContextMenu, "The menu is closed");
+
+  info(
+    "Simulating context click on the non text input and expecting no menu to open"
+  );
+  const eventBubbledUp = new Promise(resolve => {
+    input.ownerDocument.addEventListener("contextmenu", resolve, {
+      once: true,
+    });
+  });
+  synthesizeContextMenuEvent(input);
+  info("Waiting for event");
+  await eventBubbledUp;
+
+  textboxContextMenu = toolbox.getTextBoxContextMenu();
+  ok(!textboxContextMenu, "The menu is still closed");
+}
+
+async function checkTextBox(textBox, toolbox) {
+  let textboxContextMenu = toolbox.getTextBoxContextMenu();
+  ok(!textboxContextMenu, "The menu is closed");
+
+  info(
+    "Simulating context click on the textbox and expecting the menu to open"
+  );
+  const onContextMenu = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(textBox);
+  await onContextMenu;
+
+  textboxContextMenu = toolbox.getTextBoxContextMenu();
+  ok(textboxContextMenu, "The menu is now visible");
+
+  info("Closing the menu");
+  const onContextMenuHidden = toolbox.once("menu-close");
+  if (Services.prefs.getBoolPref("widget.macos.native-context-menus", false)) {
+    info("Using hidePopup semantics because of macOS native context menus.");
+    textboxContextMenu.hidePopup();
+  } else {
+    EventUtils.sendKey("ESCAPE", toolbox.win);
+  }
+  await onContextMenuHidden;
+
+  textboxContextMenu = toolbox.getTextBoxContextMenu();
+  ok(!textboxContextMenu, "The menu is closed again");
+}
diff --git a/devtools/client/framework/test/browser_toolbox_theme.js b/devtools/client/framework/test/browser_toolbox_theme.js
new file mode 100644
index 0000000000..63d83e8312
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_theme.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const PREF_DEVTOOLS_THEME = "devtools.theme";
+
+registerCleanupFunction(() => {
+  // Set preferences back to their original values
+  Services.prefs.clearUserPref(PREF_DEVTOOLS_THEME);
+});
+
+add_task(async function testDevtoolsTheme() {
+  info("Checking stylesheet and :root attributes based on devtools theme.");
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
+  is(
+    document.getElementById("appcontent").getAttribute("devtoolstheme"),
+    "light",
+    "The element has an attribute based on devtools theme."
+  );
+
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
+  is(
+    document.getElementById("appcontent").getAttribute("devtoolstheme"),
+    "dark",
+    "The element has an attribute based on devtools theme."
+  );
+
+  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "unknown");
+  is(
+    document.getElementById("appcontent").getAttribute("devtoolstheme"),
+    "light",
+    "The element has 'light' as a default for the devtoolstheme attribute."
+  );
+});
diff --git a/devtools/client/framework/test/browser_toolbox_theme_registration.js b/devtools/client/framework/test/browser_toolbox_theme_registration.js
new file mode 100644
index 0000000000..6f5d2bc679
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_theme_registration.js
@@ -0,0 +1,166 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for dynamically registering and unregistering themes
+const CHROME_URL =
+  "chrome://mochitests/content/browser/devtools/client/framework/test/";
+const TEST_THEME_NAME = "test-theme";
+const LIGHT_THEME_NAME = "light";
+
+var toolbox;
+
+add_task(async function themeRegistration() {
+  const tab = await addTab("data:text/html,test");
+  toolbox = await gDevTools.showToolboxForTab(tab, { toolId: "options" });
+
+  const themeId = await new Promise(resolve => {
+    gDevTools.once("theme-registered", registeredThemeId => {
+      resolve(registeredThemeId);
+    });
+
+    gDevTools.registerTheme({
+      id: TEST_THEME_NAME,
+      label: "Test theme",
+      stylesheets: [CHROME_URL + "doc_theme.css"],
+      classList: ["theme-test"],
+    });
+  });
+
+  is(themeId, TEST_THEME_NAME, "theme-registered event handler sent theme id");
+
+  ok(gDevTools.getThemeDefinitionMap().has(themeId), "theme added to map");
+});
+
+add_task(async function themeInOptionsPanel() {
+  const panelWin = toolbox.getCurrentPanel().panelWin;
+  const doc = panelWin.frameElement.contentDocument;
+  const themeBox = doc.getElementById("devtools-theme-box");
+  const testThemeOption = themeBox.querySelector(
+    `input[type=radio][value=${TEST_THEME_NAME}]`
+  );
+  const eventsRecorded = [];
+
+  function onThemeChanged(theme) {
+    eventsRecorded.push(theme);
+  }
+  gDevTools.on("theme-changed", onThemeChanged);
+
+  ok(testThemeOption, "new theme exists in the Options panel");
+
+  const lightThemeOption = themeBox.querySelector(
+    `input[type=radio][value=${LIGHT_THEME_NAME}]`
+  );
+
+  let color = panelWin.getComputedStyle(themeBox).color;
+  isnot(color, "rgb(255, 0, 0)", "style unapplied");
+
+  let onThemeSwithComplete = once(panelWin, "theme-switch-complete");
+
+  // Select test theme.
+  testThemeOption.click();
+
+  info("Waiting for theme to finish loading");
+  await onThemeSwithComplete;
+
+  is(
+    gDevTools.getTheme(),
+    TEST_THEME_NAME,
+    "getTheme returns the expected theme"
+  );
+  is(
+    eventsRecorded.pop(),
+    TEST_THEME_NAME,
+    "theme-changed fired with the expected theme"
+  );
+
+  color = panelWin.getComputedStyle(themeBox).color;
+  is(color, "rgb(255, 0, 0)", "style applied");
+
+  onThemeSwithComplete = once(panelWin, "theme-switch-complete");
+
+  // Select light theme
+  lightThemeOption.click();
+
+  info("Waiting for theme to finish loading");
+  await onThemeSwithComplete;
+
+  is(
+    gDevTools.getTheme(),
+    LIGHT_THEME_NAME,
+    "getTheme returns the expected theme"
+  );
+  is(
+    eventsRecorded.pop(),
+    LIGHT_THEME_NAME,
+    "theme-changed fired with the expected theme"
+  );
+
+  color = panelWin.getComputedStyle(themeBox).color;
+  isnot(color, "rgb(255, 0, 0)", "style unapplied");
+
+  onThemeSwithComplete = once(panelWin, "theme-switch-complete");
+  // Select test theme again.
+  testThemeOption.click();
+  await onThemeSwithComplete;
+  is(
+    gDevTools.getTheme(),
+    TEST_THEME_NAME,
+    "getTheme returns the expected theme"
+  );
+  is(
+    eventsRecorded.pop(),
+    TEST_THEME_NAME,
+    "theme-changed fired with the expected theme"
+  );
+
+  gDevTools.off("theme-changed", onThemeChanged);
+});
+
+add_task(async function themeUnregistration() {
+  const panelWin = toolbox.getCurrentPanel().panelWin;
+  const onUnRegisteredTheme = once(gDevTools, "theme-unregistered");
+  const onThemeSwitchComplete = once(panelWin, "theme-switch-complete");
+  const eventsRecorded = [];
+
+  function onThemeChanged(theme) {
+    eventsRecorded.push(theme);
+  }
+  gDevTools.on("theme-changed", onThemeChanged);
+
+  gDevTools.unregisterTheme(TEST_THEME_NAME);
+  await onUnRegisteredTheme;
+  await onThemeSwitchComplete;
+
+  is(
+    gDevTools.getTheme(),
+    gDevTools.getAutoTheme(),
+    "getTheme returns the expected theme"
+  );
+  is(
+    eventsRecorded.pop(),
+    gDevTools.getAutoTheme(),
+    "theme-changed fired with the expected theme"
+  );
+  ok(
+    !gDevTools.getThemeDefinitionMap().has(TEST_THEME_NAME),
+    "theme removed from map"
+  );
+
+  const doc = panelWin.frameElement.contentDocument;
+  const themeBox = doc.getElementById("devtools-theme-box");
+
+  // The default theme must be selected now.
+  ok(
+    themeBox.querySelector(`#devtools-theme-box [value=auto]`).checked,
+    `auto theme must be selected`
+  );
+
+  gDevTools.off("theme-changed", onThemeChanged);
+});
+
+add_task(async function cleanup() {
+  await toolbox.destroy();
+  toolbox = null;
+});
diff --git a/devtools/client/framework/test/browser_toolbox_toggle.js b/devtools/client/framework/test/browser_toolbox_toggle.js
new file mode 100644
index 0000000000..c3848ae5ad
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toggle.js
@@ -0,0 +1,111 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the toolbox with ACCEL+SHIFT+I / ACCEL+ALT+I and F12 in docked
+// and detached (window) modes.
+
+const URL = "data:text/html;charset=utf-8,Toggling devtools using shortcuts";
+
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  // Make sure this test starts with the selectedTool pref cleared. Previous
+  // tests select various tools, and that sets this pref.
+  Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
+
+  // Test with ACCEL+SHIFT+I / ACCEL+ALT+I (MacOSX) ; modifiers should match :
+  // - toolbox-key-toggle in devtools/client/framework/toolbox-window.xhtml
+  // - key_devToolboxMenuItem in browser/base/content/browser.xhtml
+  info("Test toggle using CTRL+SHIFT+I/CMD+ALT+I");
+  await testToggle("I", {
+    accelKey: true,
+    shiftKey: !navigator.userAgent.match(/Mac/),
+    altKey: navigator.userAgent.match(/Mac/),
+  });
+
+  // Test with F12 ; no modifiers
+  info("Test toggle using F12");
+  await testToggle("VK_F12", {});
+});
+
+async function testToggle(key, modifiers) {
+  const tab = await addTab(URL + " ; key : '" + key + "'");
+  await gDevTools.showToolboxForTab(tab);
+
+  await testToggleDockedToolbox(tab, key, modifiers);
+  await testToggleDetachedToolbox(tab, key, modifiers);
+
+  await cleanup();
+}
+
+async function testToggleDockedToolbox(tab, key, modifiers) {
+  const toolbox = gDevTools.getToolboxForTab(tab);
+
+  isnot(
+    toolbox.hostType,
+    Toolbox.HostType.WINDOW,
+    "Toolbox is docked in the main window"
+  );
+
+  info("verify docked toolbox is destroyed when using toggle key");
+  const onToolboxDestroyed = gDevTools.once("toolbox-destroyed");
+  EventUtils.synthesizeKey(key, modifiers);
+  await onToolboxDestroyed;
+  ok(true, "Docked toolbox is destroyed when using a toggle key");
+
+  info("verify new toolbox is created when using toggle key");
+  const onToolboxReady = gDevTools.once("toolbox-ready");
+  EventUtils.synthesizeKey(key, modifiers);
+  await onToolboxReady;
+  ok(true, "Toolbox is created by using when toggle key");
+}
+
+async function testToggleDetachedToolbox(tab, key, modifiers) {
+  const toolbox = gDevTools.getToolboxForTab(tab);
+
+  info("change the toolbox hostType to WINDOW");
+
+  await toolbox.switchHost(Toolbox.HostType.WINDOW);
+  is(
+    toolbox.hostType,
+    Toolbox.HostType.WINDOW,
+    "Toolbox opened on separate window"
+  );
+
+  info("Wait for focus on the toolbox window");
+  await new Promise(res => waitForFocus(res, toolbox.win));
+
+  info("Focus main window to put the toolbox window in the background");
+
+  const onMainWindowFocus = once(window, "focus");
+  window.focus();
+  await onMainWindowFocus;
+  ok(true, "Main window focused");
+
+  info(
+    "Verify windowed toolbox is focused instead of closed when using " +
+      "toggle key from the main window"
+  );
+  const toolboxWindow = toolbox.topWindow;
+  const onToolboxWindowFocus = once(toolboxWindow, "focus", true);
+  EventUtils.synthesizeKey(key, modifiers);
+  await onToolboxWindowFocus;
+  ok(true, "Toolbox focused and not destroyed");
+
+  info(
+    "Verify windowed toolbox is destroyed when using toggle key from its " +
+      "own window"
+  );
+
+  const onToolboxDestroyed = gDevTools.once("toolbox-destroyed");
+  EventUtils.synthesizeKey(key, modifiers, toolboxWindow);
+  await onToolboxDestroyed;
+  ok(true, "Toolbox destroyed");
+}
+
+function cleanup() {
+  Services.prefs.setCharPref("devtools.toolbox.host", Toolbox.HostType.BOTTOM);
+  gBrowser.removeCurrentTab();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_tool_ready.js b/devtools/client/framework/test/browser_toolbox_tool_ready.js
new file mode 100644
index 0000000000..306e4598af
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_tool_ready.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(5);
+
+async function performChecks(tab) {
+  let toolbox;
+  const toolIds = await getSupportedToolIds(tab);
+  for (const toolId of toolIds) {
+    info("About to open " + toolId);
+    toolbox = await gDevTools.showToolboxForTab(tab, { toolId });
+    ok(toolbox, "toolbox exists for " + toolId);
+    is(toolbox.currentToolId, toolId, "currentToolId should be " + toolId);
+
+    const panel = toolbox.getCurrentPanel();
+    ok(panel, toolId + " panel has been registered in the toolbox");
+  }
+
+  await toolbox.destroy();
+}
+
+function test() {
+  (async function () {
+    toggleAllTools(true);
+    const tab = await addTab("about:blank");
+    await performChecks(tab);
+    gBrowser.removeCurrentTab();
+    toggleAllTools(false);
+    finish();
+  })();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_tool_remote_reopen.js b/devtools/client/framework/test/browser_toolbox_tool_remote_reopen.js
new file mode 100644
index 0000000000..52a6ea0655
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_tool_remote_reopen.js
@@ -0,0 +1,100 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  DevToolsServer,
+} = require("resource://devtools/server/devtools-server.js");
+
+// Bug 1277805: Too slow for debug runs
+requestLongerTimeout(2);
+
+/**
+ * Bug 979536: Ensure fronts are destroyed after toolbox close.
+ *
+ * The fronts need to be destroyed manually to unbind their onPacket handlers.
+ *
+ * When you initialize a front and call |this.manage|, it adds a client actor
+ * pool that the DevToolsClient uses to route packet replies to that actor.
+ *
+ * Most (all?) tools create a new front when they are opened.  When the destroy
+ * step is skipped and the tool is reopened, a second front is created and also
+ * added to the client actor pool.  When a packet reply is received, is ends up
+ * being routed to the first (now unwanted) front that is still in the client
+ * actor pool.  Since this is not the same front that was used to make the
+ * request, an error occurs.
+ *
+ * This problem does not occur with the toolbox for a local tab because the
+ * toolbox target creates its own DevToolsClient for the local tab, and the
+ * client is destroyed when the toolbox is closed, which removes the client
+ * actor pools, and avoids this issue.
+ *
+ * In remote debugging, we do not destroy the DevToolsClient on toolbox close
+ * because it can still used for other targets.
+ * Thus, the same client gets reused across multiple toolboxes,
+ * which leads to the tools failing if they don't destroy their fronts.
+ */
+
+function runTools(tab) {
+  return (async function () {
+    let toolbox;
+    const toolIds = await getSupportedToolIds(tab);
+    for (const toolId of toolIds) {
+      info("About to open " + toolId);
+      toolbox = await gDevTools.showToolboxForTab(tab, {
+        toolId,
+        hostType: "window",
+      });
+      ok(toolbox, "toolbox exists for " + toolId);
+      is(toolbox.currentToolId, toolId, "currentToolId should be " + toolId);
+
+      const panel = toolbox.getCurrentPanel();
+      ok(panel, toolId + " panel has been registered in the toolbox");
+    }
+
+    const client = toolbox.commands.client;
+    await toolbox.destroy();
+
+    // We need to check the client after the toolbox destruction.
+    return client;
+  })();
+}
+
+function test() {
+  (async function () {
+    toggleAllTools(true);
+    const tab = await addTab("about:blank");
+
+    const client = await runTools(tab);
+
+    const rootFronts = [...client.mainRoot.fronts.values()];
+
+    // Actor fronts should be destroyed now that the toolbox has closed, but
+    // look for any that remain.
+    for (const pool of client.__pools) {
+      if (!pool.__poolMap) {
+        continue;
+      }
+
+      // Ignore the root fronts, which are top-level pools and aren't released
+      // on toolbox destroy, but on client close.
+      if (rootFronts.includes(pool)) {
+        continue;
+      }
+
+      for (const actor of pool.__poolMap.keys()) {
+        // Ignore the root front as it is only release on client close
+        if (actor == "root") {
+          continue;
+        }
+        ok(false, "Front for " + actor + " still held in pool!");
+      }
+    }
+
+    gBrowser.removeCurrentTab();
+    DevToolsServer.destroy();
+    toggleAllTools(false);
+    finish();
+  })();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js b/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js
new file mode 100644
index 0000000000..cdd6678e6f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that all of buttons of tool tab go to the overflowed menu when the devtool's
+// width is narrow.
+
+const SIDEBAR_WIDTH_PREF = "devtools.toolbox.sidebar.width";
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function (pickerEnable, commandsEnable) {
+  // 74px is Chevron(26px) + Meatball(24px) + Close(24px)
+  // devtools-browser.css defined this minimum width by using min-width.
+  Services.prefs.setIntPref(SIDEBAR_WIDTH_PREF, 74);
+  registerCleanupFunction(function () {
+    Services.prefs.clearUserPref(SIDEBAR_WIDTH_PREF);
+  });
+  const tab = await addTab("about:blank");
+
+  info("Open devtools on the Inspector in a side dock");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "inspector",
+    Toolbox.HostType.RIGHT
+  );
+  await waitUntil(() => toolbox.doc.querySelector(".tools-chevron-menu"));
+
+  await openChevronMenu(toolbox);
+
+  // Check that all of tools is overflowed.
+  toolbox.panelDefinitions.forEach(({ id }) => {
+    const menuItem = toolbox.doc.getElementById(
+      "tools-chevron-menupopup-" + id
+    );
+    const tab = toolbox.doc.getElementById("toolbox-tab-" + id);
+    ok(menuItem, id + " is in the overflowed menu");
+    ok(!tab, id + " tab does not exist");
+  });
+
+  await closeChevronMenu(toolbox);
+});
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_overflow.js b/devtools/client/framework/test/browser_toolbox_toolbar_overflow.js
new file mode 100644
index 0000000000..9f964af18e
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_overflow.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a button to access tools hidden by toolbar overflow is displayed when the
+// toolbar starts to present an overflow.
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  const tab = await addTab("about:blank");
+
+  info("Open devtools on the Inspector in a bottom dock");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "inspector",
+    Toolbox.HostType.BOTTOM
+  );
+
+  const hostWindow = toolbox.topWindow;
+  const originalWidth = hostWindow.outerWidth;
+  const originalHeight = hostWindow.outerHeight;
+
+  info(
+    "Resize devtools window to a width that should not trigger any overflow"
+  );
+  let onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(1350, 300);
+  await onResize;
+
+  info("Wait for all buttons to be displayed");
+  await waitUntil(() => {
+    return (
+      toolbox.panelDefinitions.length ===
+      toolbox.doc.querySelectorAll(".devtools-tab").length
+    );
+  });
+
+  let chevronMenuButton = toolbox.doc.querySelector(".tools-chevron-menu");
+  ok(!chevronMenuButton, "The chevron menu button is not displayed");
+
+  info("Resize devtools window to a width that should trigger an overflow");
+  onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(800, 300);
+  await onResize;
+  await waitUntil(() => !toolbox.doc.querySelector(".tools-chevron-menu"));
+
+  info("Wait until the chevron menu button is available");
+  await waitUntil(() => toolbox.doc.querySelector(".tools-chevron-menu"));
+
+  chevronMenuButton = toolbox.doc.querySelector(".tools-chevron-menu");
+  ok(chevronMenuButton, "The chevron menu button is displayed");
+
+  info(
+    "Open the tools-chevron-menupopup and verify that the inspector button is checked"
+  );
+  await openChevronMenu(toolbox);
+
+  const inspectorButton = toolbox.doc.querySelector(
+    "#tools-chevron-menupopup-inspector"
+  );
+  ok(!inspectorButton, "The chevron menu doesn't have the inspector button.");
+
+  const consoleButton = toolbox.doc.querySelector(
+    "#tools-chevron-menupopup-webconsole"
+  );
+  ok(!consoleButton, "The chevron menu doesn't have the console button.");
+
+  const storageButton = toolbox.doc.querySelector(
+    "#tools-chevron-menupopup-storage"
+  );
+  ok(storageButton, "The chevron menu has the storage button.");
+
+  info("Switch to the performance using the tools-chevron-menupopup popup");
+  const onSelected = toolbox.once("storage-selected");
+  storageButton.click();
+  await onSelected;
+
+  info("Restore the original window size");
+  onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(originalWidth, originalHeight);
+  await onResize;
+});
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_overflow_button_visibility.js b/devtools/client/framework/test/browser_toolbox_toolbar_overflow_button_visibility.js
new file mode 100644
index 0000000000..f266991109
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_overflow_button_visibility.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for the toolbox tabs rearrangement when the visibility of toolbox buttons were changed.
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  const tab = await addTab("about:blank");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "options",
+    Toolbox.HostType.BOTTOM
+  );
+  const toolboxButtonPreferences = toolbox.toolbarButtons.map(
+    button => button.visibilityswitch
+  );
+
+  const win = getWindow(toolbox);
+  const { outerWidth: originalWindowWidth, outerHeight: originalWindowHeight } =
+    win;
+  registerCleanupFunction(() => {
+    for (const preference of toolboxButtonPreferences) {
+      Services.prefs.clearUserPref(preference);
+    }
+
+    win.resizeTo(originalWindowWidth, originalWindowHeight);
+  });
+
+  const optionsTool = toolbox.getCurrentPanel();
+  const checkButtons = optionsTool.panelWin.document.querySelectorAll(
+    "#enabled-toolbox-buttons-box input[type=checkbox]"
+  );
+
+  info(
+    "Test the count of shown devtools tab after making all buttons to be visible"
+  );
+  await resizeWindow(toolbox, 800);
+  // Once, make all toolbox button to be invisible.
+  setToolboxButtonsVisibility(checkButtons, false);
+  // Get count of shown devtools tab elements.
+  const initialTabCount = toolbox.doc.querySelectorAll(".devtools-tab").length;
+  // Make all toolbox button to be visible.
+  setToolboxButtonsVisibility(checkButtons, true);
+  Assert.less(
+    toolbox.doc.querySelectorAll(".devtools-tab").length,
+    initialTabCount,
+    "Count of shown devtools tab should decreased"
+  );
+
+  info(
+    "Test the count of shown devtools tab after making all buttons to be invisible"
+  );
+  setToolboxButtonsVisibility(checkButtons, false);
+  is(
+    toolbox.doc.querySelectorAll(".devtools-tab").length,
+    initialTabCount,
+    "Count of shown devtools tab should be same to 1st count"
+  );
+});
+
+function setToolboxButtonsVisibility(checkButtons, doVisible) {
+  for (const checkButton of checkButtons) {
+    if (checkButton.checked === doVisible) {
+      continue;
+    }
+
+    checkButton.click();
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js
new file mode 100644
index 0000000000..9ef82ca6e9
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js
@@ -0,0 +1,188 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following reordering operation:
+// * DragAndDrop the target component to back
+// * DragAndDrop the target component to front
+// * DragAndDrop the target component over the starting of the tab
+// * DragAndDrop the target component over the ending of the tab
+// * Mouse was out from the document while dragging
+// * Select overflowed item, then DnD that
+//
+// This test is on the assumption which default toolbar has following tools.
+//   * inspector
+//   * webconsole
+//   * jsdebugger
+//   * styleeditor
+//   * performance
+//   * memory
+//   * netmonitor
+//   * storage
+//   * accessibility
+//   * application
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+const TEST_STARTING_ORDER = [
+  "inspector",
+  "webconsole",
+  "jsdebugger",
+  "styleeditor",
+  "performance",
+  "memory",
+  "netmonitor",
+  "storage",
+  "accessibility",
+  "application",
+];
+const TEST_DATA = [
+  {
+    description: "DragAndDrop the target component to back",
+    dragTarget: "webconsole",
+    dropTarget: "jsdebugger",
+    expectedOrder: [
+      "inspector",
+      "jsdebugger",
+      "webconsole",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+    ],
+  },
+  {
+    description: "DragAndDrop the target component to front",
+    dragTarget: "webconsole",
+    dropTarget: "inspector",
+    expectedOrder: [
+      "webconsole",
+      "inspector",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+    ],
+  },
+  {
+    description:
+      "DragAndDrop the target component over the starting of the tab",
+    dragTarget: "netmonitor",
+    passedTargets: [
+      "memory",
+      "performance",
+      "styleeditor",
+      "jsdebugger",
+      "webconsole",
+      "inspector",
+    ],
+    dropTarget: "#toolbox-buttons-start",
+    expectedOrder: [
+      "netmonitor",
+      "inspector",
+      "webconsole",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "storage",
+      "accessibility",
+      "application",
+    ],
+  },
+  {
+    description: "DragAndDrop the target component over the ending of the tab",
+    dragTarget: "webconsole",
+    passedTargets: [
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+    ],
+    dropTarget: "#toolbox-buttons-end",
+    expectedOrder: [
+      "inspector",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+      "webconsole",
+    ],
+  },
+];
+
+add_task(async function () {
+  // Enable the Application panel (atm it's only available on Nightly)
+  await pushPref("devtools.application.enabled", true);
+
+  const tab = await addTab("about:blank");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "inspector",
+    Toolbox.HostType.BOTTOM
+  );
+
+  const originalPreference = Services.prefs.getCharPref(
+    "devtools.toolbox.tabsOrder"
+  );
+  const win = getWindow(toolbox);
+  const { outerWidth: originalWindowWidth, outerHeight: originalWindowHeight } =
+    win;
+  registerCleanupFunction(() => {
+    Services.prefs.setCharPref(
+      "devtools.toolbox.tabsOrder",
+      originalPreference
+    );
+    win.resizeTo(originalWindowWidth, originalWindowHeight);
+  });
+
+  for (const testData of TEST_DATA) {
+    info(`Test for '${testData.description}'`);
+    prepareToolTabReorderTest(toolbox, TEST_STARTING_ORDER);
+    await dndToolTab(
+      toolbox,
+      testData.dragTarget,
+      testData.dropTarget,
+      testData.passedTargets
+    );
+    assertToolTabOrder(toolbox, testData.expectedOrder);
+    assertToolTabSelected(toolbox, testData.dragTarget);
+    assertToolTabPreferenceOrder(testData.expectedOrder);
+  }
+
+  info("Test with overflowing tabs");
+  prepareToolTabReorderTest(toolbox, TEST_STARTING_ORDER);
+  await resizeWindow(toolbox, 800);
+  await toolbox.selectTool("storage");
+  const dragTarget = "storage";
+  const dropTarget = "inspector";
+  const expectedOrder = [
+    "storage",
+    "inspector",
+    "webconsole",
+    "jsdebugger",
+    "styleeditor",
+    "performance",
+    "memory",
+    "netmonitor",
+    "accessibility",
+    "application",
+  ];
+  await dndToolTab(toolbox, dragTarget, dropTarget);
+  assertToolTabSelected(toolbox, dragTarget);
+  assertToolTabPreferenceOrder(expectedOrder);
+});
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_width.js b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_width.js
new file mode 100644
index 0000000000..3a8cd61d12
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_width.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// This test will:
+//
+// * Confirm that currently selected button to access tools will not hide due to overflow.
+//   In this case, a button which is located on the left of a currently selected will hide.
+// * Confirm that a button to access tool will hide when registering a new panel.
+//
+// Note that this test is based on the tab ordinal is fixed.
+// i.e. After changed by Bug 1226272, this test might fail.
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function () {
+  const tab = await addTab("about:blank");
+
+  info("Open devtools on the Storage in a sidebar.");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "storage",
+    Toolbox.HostType.BOTTOM
+  );
+
+  const win = getWindow(toolbox);
+  const { outerWidth: originalWindowWidth, outerHeight: originalWindowHeight } =
+    win;
+  registerCleanupFunction(() => {
+    win.resizeTo(originalWindowWidth, originalWindowHeight);
+  });
+
+  info("Waiting for the window to be resized");
+  await resizeWindow(toolbox, 800);
+
+  info("Wait until the tools menu button is available");
+  await waitUntil(() => toolbox.doc.querySelector(".tools-chevron-menu"));
+
+  const toolsMenuButton = toolbox.doc.querySelector(".tools-chevron-menu");
+  ok(toolsMenuButton, "The tools menu button is displayed");
+
+  info("Confirm that selected tab is not hidden.");
+  const storageButton = toolbox.doc.querySelector("#toolbox-tab-storage");
+  ok(storageButton, "The storage tab is on toolbox.");
+
+  // Reset window size for 2nd test.
+  await resizeWindow(toolbox, originalWindowWidth);
+});
+
+add_task(async function () {
+  const tab = await addTab("about:blank");
+
+  info("Open devtools on the Storage in a sidebar.");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "storage",
+    Toolbox.HostType.BOTTOM
+  );
+
+  info("Resize devtools window to a width that should trigger an overflow");
+  await resizeWindow(toolbox, 800);
+
+  info("Regist a new tab");
+  const onRegistered = toolbox.once("tool-registered");
+  gDevTools.registerTool({
+    id: "test-tools",
+    label: "Test Tools",
+    isMenu: true,
+    isToolSupported: () => true,
+    build() {},
+  });
+  await onRegistered;
+
+  info("Open the tools menu button.");
+  await openChevronMenu(toolbox);
+
+  info("The registered new tool tab should be in the tools menu.");
+  let testToolsButton = toolbox.doc.querySelector(
+    "#tools-chevron-menupopup-test-tools"
+  );
+  ok(testToolsButton, "The tools menu has a registered new tool button.");
+
+  await closeChevronMenu(toolbox);
+
+  info("Unregistering test-tools");
+  const onUnregistered = toolbox.once("tool-unregistered");
+  gDevTools.unregisterTool("test-tools");
+  await onUnregistered;
+
+  info("Open the tools menu button.");
+  await openChevronMenu(toolbox);
+
+  info("An unregistered new tool tab should not be in the tools menu.");
+  testToolsButton = toolbox.doc.querySelector(
+    "#tools-chevron-menupopup-test-tools"
+  );
+  ok(
+    !testToolsButton,
+    "The tools menu doesn't have a unregistered new tool button."
+  );
+
+  await closeChevronMenu(toolbox);
+});
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_extension.js b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_extension.js
new file mode 100644
index 0000000000..d00aca4b0f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_extension.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for reordering with an extension installed.
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+const EXTENSION = "@reorder.test";
+
+const TEST_STARTING_ORDER = [
+  "inspector",
+  "webconsole",
+  "jsdebugger",
+  "styleeditor",
+  "performance",
+  "memory",
+  "netmonitor",
+  "storage",
+  "accessibility",
+  "application",
+  EXTENSION,
+];
+
+add_task(async function () {
+  // Enable the Application panel (atm it's only available on Nightly)
+  await pushPref("devtools.application.enabled", true);
+
+  const extension = ExtensionTestUtils.loadExtension({
+    useAddonManager: "temporary",
+    manifest: {
+      devtools_page: "extension.html",
+      browser_specific_settings: {
+        gecko: { id: EXTENSION },
+      },
+    },
+    files: {
+      "extension.html": `<!DOCTYPE html>
+                         <html>
+                           <head>
+                             <meta charset="utf-8">
+                           </head>
+                           <body>
+                             <script src="extension.js"></script>
+                           </body>
+                         </html>`,
+      "extension.js": async () => {
+        // eslint-disable-next-line no-undef
+        await browser.devtools.panels.create(
+          "extension",
+          "fake-icon.png",
+          "empty.html"
+        );
+        // eslint-disable-next-line no-undef
+        browser.test.sendMessage("devtools-page-ready");
+      },
+      "empty.html": "",
+    },
+  });
+
+  await extension.startup();
+
+  const tab = await addTab("about:blank");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "webconsole",
+    Toolbox.HostType.BOTTOM
+  );
+  await extension.awaitMessage("devtools-page-ready");
+
+  const originalPreference = Services.prefs.getCharPref(
+    "devtools.toolbox.tabsOrder"
+  );
+  const win = getWindow(toolbox);
+  const { outerWidth: originalWindowWidth, outerHeight: originalWindowHeight } =
+    win;
+  registerCleanupFunction(() => {
+    Services.prefs.setCharPref(
+      "devtools.toolbox.tabsOrder",
+      originalPreference
+    );
+    win.resizeTo(originalWindowWidth, originalWindowHeight);
+  });
+
+  info("Test for DragAndDrop the extension tab");
+  let dragTarget = EXTENSION;
+  let dropTarget = "webconsole";
+  let expectedOrder = [
+    "inspector",
+    EXTENSION,
+    "webconsole",
+    "jsdebugger",
+    "styleeditor",
+    "performance",
+    "memory",
+    "netmonitor",
+    "storage",
+    "accessibility",
+    "application",
+  ];
+  prepareToolTabReorderTest(toolbox, TEST_STARTING_ORDER);
+  await dndToolTab(toolbox, dragTarget, dropTarget);
+  assertToolTabOrder(toolbox, expectedOrder);
+  assertToolTabSelected(toolbox, dragTarget);
+  assertToolTabPreferenceOrder(expectedOrder);
+
+  info("Test the case of that the extension tab is overflowed");
+  prepareToolTabReorderTest(toolbox, TEST_STARTING_ORDER);
+  await resizeWindow(toolbox, 800);
+  await toolbox.selectTool("storage");
+  dragTarget = "storage";
+  dropTarget = "inspector";
+  expectedOrder = [
+    "storage",
+    "inspector",
+    "webconsole",
+    "jsdebugger",
+    "styleeditor",
+    "performance",
+    "memory",
+    "netmonitor",
+    "accessibility",
+    "application",
+    EXTENSION,
+  ];
+  await dndToolTab(toolbox, dragTarget, dropTarget);
+  assertToolTabPreferenceOrder(expectedOrder);
+  await resizeWindow(toolbox, originalWindowWidth, originalWindowHeight);
+
+  info("Test the preference after uninstalling extension");
+  prepareToolTabReorderTest(toolbox, TEST_STARTING_ORDER);
+  await extension.unload();
+  dragTarget = "webconsole";
+  dropTarget = "inspector";
+  expectedOrder = [
+    "webconsole",
+    "inspector",
+    "jsdebugger",
+    "styleeditor",
+    "performance",
+    "memory",
+    "netmonitor",
+    "storage",
+    "accessibility",
+    "application",
+  ];
+  await dndToolTab(toolbox, dragTarget, dropTarget);
+  assertToolTabPreferenceOrder(expectedOrder);
+});
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_hidden_extension.js b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_hidden_extension.js
new file mode 100644
index 0000000000..6e7b44d5d3
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_hidden_extension.js
@@ -0,0 +1,248 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for reordering with an hidden extension installed.
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+const EXTENSION = "@reorder.test";
+
+const TEST_DATA = [
+  {
+    description: "Test that drags a tab to left beyond the extension's tab",
+    startingOrder: [
+      "inspector",
+      EXTENSION,
+      "webconsole",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+    ],
+    dragTarget: "webconsole",
+    dropTarget: "inspector",
+    expectedOrder: [
+      "webconsole",
+      "inspector",
+      EXTENSION,
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+    ],
+  },
+  {
+    description: "Test that drags a tab to right beyond the extension's tab",
+    startingOrder: [
+      "inspector",
+      EXTENSION,
+      "webconsole",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+    ],
+    dragTarget: "inspector",
+    dropTarget: "webconsole",
+    expectedOrder: [
+      EXTENSION,
+      "webconsole",
+      "inspector",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+    ],
+  },
+  {
+    description:
+      "Test that drags a tab to left end, but hidden tab is left end",
+    startingOrder: [
+      EXTENSION,
+      "inspector",
+      "webconsole",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+    ],
+    dragTarget: "webconsole",
+    dropTarget: "inspector",
+    expectedOrder: [
+      EXTENSION,
+      "webconsole",
+      "inspector",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+    ],
+  },
+  {
+    description:
+      "Test that drags a tab to right end, but hidden tab is right end",
+    startingOrder: [
+      "inspector",
+      "webconsole",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+      EXTENSION,
+    ],
+    dragTarget: "webconsole",
+    dropTarget: "application",
+    expectedOrder: [
+      "inspector",
+      "jsdebugger",
+      "styleeditor",
+      "performance",
+      "memory",
+      "netmonitor",
+      "storage",
+      "accessibility",
+      "application",
+      EXTENSION,
+      "webconsole",
+    ],
+  },
+];
+
+add_task(async function () {
+  // Enable the Application panel (atm it's only available on Nightly)
+  await pushPref("devtools.application.enabled", true);
+
+  registerCleanupFunction(() => {
+    Services.prefs.clearUserPref("devtools.toolbox.tabsOrder");
+  });
+
+  const extension = ExtensionTestUtils.loadExtension({
+    useAddonManager: "temporary",
+    manifest: {
+      devtools_page: "extension.html",
+      browser_specific_settings: {
+        gecko: { id: EXTENSION },
+      },
+    },
+    files: {
+      "extension.html": `<!DOCTYPE html>
+                         <html>
+                           <head>
+                             <meta charset="utf-8">
+                           </head>
+                           <body>
+                             <script src="extension.js"></script>
+                           </body>
+                         </html>`,
+      "extension.js": async () => {
+        // Don't call browser.devtools.panels.create since this need to be as hidden.
+        // eslint-disable-next-line
+        browser.test.sendMessage("devtools-page-ready");
+      },
+    },
+  });
+
+  await extension.startup();
+
+  const tab = await addTab("about:blank");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "webconsole",
+    Toolbox.HostType.BOTTOM
+  );
+  await extension.awaitMessage("devtools-page-ready");
+
+  for (const {
+    description,
+    startingOrder,
+    dragTarget,
+    dropTarget,
+    expectedOrder,
+  } of TEST_DATA) {
+    info(description);
+    prepareTestWithHiddenExtension(toolbox, startingOrder);
+    await dndToolTab(toolbox, dragTarget, dropTarget);
+    assertToolTabPreferenceOrder(expectedOrder);
+  }
+
+  info("Test ordering preference after uninstalling hidden addon");
+  const startingOrder = [
+    "inspector",
+    EXTENSION,
+    "webconsole",
+    "jsdebugger",
+    "styleeditor",
+    "performance",
+    "memory",
+    "netmonitor",
+    "storage",
+    "accessibility",
+    "application",
+  ];
+  const dragTarget = "webconsole";
+  const dropTarget = "inspector";
+  const expectedOrder = [
+    "webconsole",
+    "inspector",
+    "jsdebugger",
+    "styleeditor",
+    "performance",
+    "memory",
+    "netmonitor",
+    "storage",
+    "accessibility",
+    "application",
+  ];
+  prepareTestWithHiddenExtension(toolbox, startingOrder);
+  await extension.unload();
+  await dndToolTab(toolbox, dragTarget, dropTarget);
+  assertToolTabPreferenceOrder(expectedOrder);
+});
+
+function prepareTestWithHiddenExtension(toolbox, startingOrder) {
+  Services.prefs.setCharPref(
+    "devtools.toolbox.tabsOrder",
+    startingOrder.join(",")
+  );
+
+  for (const id of startingOrder) {
+    if (id === EXTENSION) {
+      ok(
+        !getElementByToolId(toolbox, id),
+        "Hidden extension tab should not exist"
+      );
+    } else {
+      ok(getElementByToolId(toolbox, id), `Tab element should exist for ${id}`);
+    }
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_tools_per_toolbox_registration.js b/devtools/client/framework/test/browser_toolbox_tools_per_toolbox_registration.js
new file mode 100644
index 0000000000..0e9009497f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_tools_per_toolbox_registration.js
@@ -0,0 +1,138 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URL = `data:text/html,<!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="utf-8">
+    </head>
+    <body>
+      test for registering and unregistering tools to a specific toolbox
+    </body>
+  </html>`;
+
+const TOOL_ID = "test-toolbox-tool";
+var toolbox;
+
+function test() {
+  addTab(TEST_URL).then(async tab => {
+    gDevTools
+      .showToolboxForTab(tab)
+      .then(toolboxRegister)
+      .then(testToolRegistered);
+  });
+}
+
+var resolveToolInstanceBuild;
+var waitForToolInstanceBuild = new Promise(resolve => {
+  resolveToolInstanceBuild = resolve;
+});
+
+var resolveToolInstanceDestroyed;
+var waitForToolInstanceDestroyed = new Promise(resolve => {
+  resolveToolInstanceDestroyed = resolve;
+});
+
+function toolboxRegister(aToolbox) {
+  toolbox = aToolbox;
+
+  waitForToolInstanceBuild = new Promise(resolve => {
+    resolveToolInstanceBuild = resolve;
+  });
+
+  info("add per-toolbox tool in the opened toolbox.");
+
+  toolbox.addAdditionalTool({
+    id: TOOL_ID,
+    // The size of the label can make the test fail if it's too long.
+    // See ok(tab, ...) assert below and Bug 1596345.
+    label: "Test Tool",
+    inMenu: true,
+    isToolSupported: () => true,
+    build() {
+      info("per-toolbox tool has been built.");
+      resolveToolInstanceBuild();
+
+      return {
+        destroy: () => {
+          info("per-toolbox tool has been destroyed.");
+          resolveToolInstanceDestroyed();
+        },
+      };
+    },
+    key: "t",
+  });
+}
+
+function testToolRegistered() {
+  ok(
+    !gDevTools.getToolDefinitionMap().has(TOOL_ID),
+    "per-toolbox tool is not registered globally"
+  );
+  ok(
+    toolbox.hasAdditionalTool(TOOL_ID),
+    "per-toolbox tool registered to the specific toolbox"
+  );
+
+  // Test that the tool appeared in the UI.
+  const doc = toolbox.doc;
+  const tab = getToolboxTab(doc, TOOL_ID);
+
+  ok(tab, "new tool's tab exists in toolbox UI");
+
+  const panel = doc.getElementById("toolbox-panel-" + TOOL_ID);
+  ok(panel, "new tool's panel exists in toolbox UI");
+
+  for (const win of getAllBrowserWindows()) {
+    const key = win.document.getElementById("key_" + TOOL_ID);
+    if (win.document == doc) {
+      continue;
+    }
+    ok(!key, "key for new tool should not exists in the other browser windows");
+    const menuitem = win.document.getElementById("menuitem_" + TOOL_ID);
+    ok(!menuitem, "menu item should not exists in the other browser window");
+  }
+
+  // Test that the tool is built once selected and then test its unregistering.
+  info("select per-toolbox tool in the opened toolbox.");
+  gDevTools
+    .showToolboxForTab(gBrowser.selectedTab, { toolId: TOOL_ID })
+    .then(waitForToolInstanceBuild)
+    .then(testUnregister);
+}
+
+function getAllBrowserWindows() {
+  return Array.from(Services.wm.getEnumerator("navigator:browser"));
+}
+
+function testUnregister() {
+  info("remove per-toolbox tool in the opened toolbox.");
+  toolbox.removeAdditionalTool(TOOL_ID);
+
+  Promise.all([waitForToolInstanceDestroyed]).then(toolboxToolUnregistered);
+}
+
+function toolboxToolUnregistered() {
+  ok(
+    !toolbox.hasAdditionalTool(TOOL_ID),
+    "per-toolbox tool unregistered from the specific toolbox"
+  );
+
+  // test that it disappeared from the UI
+  const doc = toolbox.doc;
+  const tab = getToolboxTab(doc, TOOL_ID);
+  ok(!tab, "tool's tab was removed from the toolbox UI");
+
+  const panel = doc.getElementById("toolbox-panel-" + TOOL_ID);
+  ok(!panel, "tool's panel was removed from toolbox UI");
+
+  cleanup();
+}
+
+function cleanup() {
+  toolbox.destroy().then(() => {
+    toolbox = null;
+    gBrowser.removeCurrentTab();
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_view_source_01.js b/devtools/client/framework/test/browser_toolbox_view_source_01.js
new file mode 100644
index 0000000000..f1a0924cf9
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_view_source_01.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that Toolbox#viewSourceInDebugger works when debugger is not
+ * yet opened.
+ */
+
+var URL = `${URL_ROOT_SSL}doc_viewsource.html`;
+var JS_URL = `${URL_ROOT_SSL}code_math.js`;
+
+async function viewSource() {
+  const toolbox = await openNewTabAndToolbox(URL);
+
+  await toolbox.viewSourceInDebugger(JS_URL, 2);
+
+  const debuggerPanel = toolbox.getPanel("jsdebugger");
+  ok(debuggerPanel, "The debugger panel was opened.");
+  is(toolbox.currentToolId, "jsdebugger", "The debugger panel was selected.");
+
+  assertSelectedLocationInDebugger(debuggerPanel, 2, undefined);
+  await closeToolboxAndTab(toolbox);
+  finish();
+}
+
+function test() {
+  viewSource().then(finish, aError => {
+    ok(false, "Got an error: " + aError.message + "\n" + aError.stack);
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_view_source_02.js b/devtools/client/framework/test/browser_toolbox_view_source_02.js
new file mode 100644
index 0000000000..25bf0c2717
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_view_source_02.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that Toolbox#viewSourceInDebugger works when debugger is already loaded.
+ */
+
+var URL = `${URL_ROOT_SSL}doc_viewsource.html`;
+var JS_URL = `${URL_ROOT_SSL}code_math.js`;
+
+async function viewSource() {
+  const toolbox = await openNewTabAndToolbox(URL);
+  await toolbox.selectTool("jsdebugger");
+
+  await toolbox.viewSourceInDebugger(JS_URL, 2);
+
+  const debuggerPanel = toolbox.getPanel("jsdebugger");
+  ok(debuggerPanel, "The debugger panel was opened.");
+  is(toolbox.currentToolId, "jsdebugger", "The debugger panel was selected.");
+
+  assertSelectedLocationInDebugger(debuggerPanel, 2, undefined);
+
+  // See Bug 1637793 and Bug 1621337.
+  // Ideally the debugger should only resolve when the worker targets have been
+  // retrieved, which should be fixed by Bug 1621337 or a followup.
+  info("Wait for all pending requests to settle on the DevToolsClient");
+  await toolbox.commands.client.waitForRequestsToSettle();
+
+  await closeToolboxAndTab(toolbox);
+  finish();
+}
+
+function test() {
+  viewSource().then(finish, aError => {
+    ok(false, "Got an error: " + aError.message + "\n" + aError.stack);
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_view_source_03.js b/devtools/client/framework/test/browser_toolbox_view_source_03.js
new file mode 100644
index 0000000000..dce9ff8840
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_view_source_03.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that Toolbox#viewSourceInStyleEditor works when style editor is not
+ * yet opened.
+ */
+
+var URL = `${URL_ROOT_SSL}doc_viewsource.html`;
+var CSS_URL = `${URL_ROOT_SSL}doc_theme.css`;
+
+async function viewSource() {
+  const toolbox = await openNewTabAndToolbox(URL);
+
+  const fileFound = await toolbox.viewSourceInStyleEditorByURL(CSS_URL, 2);
+  ok(
+    fileFound,
+    "viewSourceInStyleEditorByURL should resolve to true if source found."
+  );
+
+  const stylePanel = toolbox.getPanel("styleeditor");
+  ok(stylePanel, "The style editor panel was opened.");
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor panel was selected."
+  );
+
+  const { UI } = stylePanel;
+
+  is(
+    UI.selectedEditor.styleSheet.href,
+    CSS_URL,
+    "The correct source is shown in the style editor."
+  );
+  is(
+    UI.selectedEditor.sourceEditor.getCursor().line + 1,
+    2,
+    "The correct line is highlighted in the style editor's source editor."
+  );
+
+  await closeToolboxAndTab(toolbox);
+  finish();
+}
+
+function test() {
+  viewSource().then(finish, aError => {
+    ok(false, "Got an error: " + aError.message + "\n" + aError.stack);
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_view_source_style_editor_fallback.js b/devtools/client/framework/test/browser_toolbox_view_source_style_editor_fallback.js
new file mode 100644
index 0000000000..b895d0a80e
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_view_source_style_editor_fallback.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that Toolbox#viewSourceInStyleEditor does fall back to view-source
+ */
+
+const TEST_URL = `data:text/html,<!DOCTYPE html><meta charset=utf8>Got no style`;
+const CSS_URL = `${URL_ROOT_SSL}doc_theme.css`;
+
+add_task(async function () {
+  // start on webconsole since it doesn't have much activity so we're less vulnerable
+  // to pending promises.
+  const toolbox = await openNewTabAndToolbox(TEST_URL, "webconsole");
+
+  const onTabOpen = BrowserTestUtils.waitForNewTab(
+    gBrowser,
+    url => url == `view-source:${CSS_URL}`,
+    true
+  );
+
+  info("View source of an existing file that isn't used by the page");
+  const fileFound = await toolbox.viewSourceInStyleEditorByURL(CSS_URL, 0);
+  ok(
+    !fileFound,
+    "viewSourceInStyleEditorByURL should resolve to false if source isn't found."
+  );
+
+  info("Waiting for view-source tab to open");
+  const viewSourceTab = await onTabOpen;
+  ok(true, "The view source tab was opened");
+  await removeTab(viewSourceTab);
+
+  info("Check that the current panel is the console");
+  is(toolbox.currentToolId, "webconsole", "Console is still selected");
+
+  await closeToolboxAndTab(toolbox);
+});
diff --git a/devtools/client/framework/test/browser_toolbox_watchedByDevTools.js b/devtools/client/framework/test/browser_toolbox_watchedByDevTools.js
new file mode 100644
index 0000000000..a58b57885d
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_watchedByDevTools.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check that the "watchedByDevTools" flag is properly handled.
+ */
+const EXAMPLE_HTTP_URI =
+  "http://mochi.test:8888/document-builder.sjs?html=<div id=http>http";
+const EXAMPLE_COM_URI =
+  "https://example.com/document-builder.sjs?html=<div id=com>com";
+const EXAMPLE_ORG_URI =
+  "https://example.org/document-builder.sjs?headers=Cross-Origin-Opener-Policy:same-origin&html=<div id=org>org</div>";
+
+add_task(async function () {
+  const tab = await addTab(EXAMPLE_HTTP_URI);
+
+  is(
+    tab.linkedBrowser.browsingContext.watchedByDevTools,
+    false,
+    "watchedByDevTools isn't set when DevTools aren't opened"
+  );
+
+  info(
+    "Open a toolbox for the opened tab and check that watchedByDevTools is set"
+  );
+  await gDevTools.showToolboxForTab(tab, { toolId: "options" });
+
+  is(
+    tab.linkedBrowser.browsingContext.watchedByDevTools,
+    true,
+    "watchedByDevTools is set after opening a toolbox"
+  );
+
+  info(
+    "Check that watchedByDevTools persist when the tab navigates to a different origin"
+  );
+  await navigateTo(EXAMPLE_COM_URI);
+
+  is(
+    tab.linkedBrowser.browsingContext.watchedByDevTools,
+    true,
+    "watchedByDevTools is still set after navigating to a different origin"
+  );
+
+  info(
+    "Check that watchedByDevTools persist when navigating to a page that creates a new browsing context"
+  );
+  const previousBrowsingContextId = tab.linkedBrowser.browsingContext.id;
+  await navigateTo(EXAMPLE_ORG_URI);
+
+  isnot(
+    tab.linkedBrowser.browsingContext.id,
+    previousBrowsingContextId,
+    "A new browsing context was created"
+  );
+
+  is(
+    tab.linkedBrowser.browsingContext.watchedByDevTools,
+    true,
+    "watchedByDevTools is still set after navigating to a new browsing context"
+  );
+
+  info("Check that the flag is reset when the toolbox is closed");
+  await gDevTools.closeToolboxForTab(tab);
+  is(
+    tab.linkedBrowser.browsingContext.watchedByDevTools,
+    false,
+    "watchedByDevTools is reset after closing the toolbox"
+  );
+});
diff --git a/devtools/client/framework/test/browser_toolbox_window_reload_target.js b/devtools/client/framework/test/browser_toolbox_window_reload_target.js
new file mode 100644
index 0000000000..d9a4eb34c1
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_reload_target.js
@@ -0,0 +1,130 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that pressing various page reload keyboard shortcuts always works when devtools
+// has focus, no matter if it's undocked or docked, and whatever the tool selected (this
+// is to avoid tools from overriding the page reload shortcuts).
+// This test also serves as a safety net checking that tools just don't explode when the
+// page is reloaded.
+// It is therefore quite long to run.
+
+requestLongerTimeout(10);
+const { PromiseTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/PromiseTestUtils.sys.mjs"
+);
+
+// allow a context error because it is harmless. This could likely be removed in the next patch because it is a symptom of events coming from the target-list and debugger targets module...
+PromiseTestUtils.allowMatchingRejectionsGlobally(/Page has navigated/);
+
+const TEST_URL =
+  "data:text/html;charset=utf-8," +
+  "<html><head><title>Test reload</title></head>" +
+  "<body><h1>Testing reload from devtools</h1></body></html>";
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/toolbox.properties"
+);
+
+// Track how many page reloads we've sent to the page.
+var reloadsSent = 0;
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const tab = gBrowser.selectedTab;
+  const toolIDs = await getSupportedToolIds(tab);
+
+  info(
+    "Display the toolbox, docked at the bottom, with the first tool selected"
+  );
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: toolIDs[0],
+    hostType: Toolbox.HostType.BOTTOM,
+  });
+
+  info(
+    "Listen to page reloads to check that they are indeed sent by the toolbox"
+  );
+  let reloadDetected = 0;
+  const reloadCounter = msg => {
+    reloadDetected++;
+    info("Detected reload #" + reloadDetected);
+    is(
+      reloadDetected,
+      reloadsSent,
+      "Detected the right number of reloads in the page"
+    );
+  };
+
+  const removeLoadListener = BrowserTestUtils.addContentEventListener(
+    gBrowser.selectedBrowser,
+    "load",
+    reloadCounter,
+    {}
+  );
+
+  info("Start testing with the toolbox docked");
+  // Note that we actually only test 1 tool in docked mode, to cut down on test time.
+  await testOneTool(toolbox, toolIDs[toolIDs.length - 1]);
+
+  info("Switch to undocked mode");
+  await toolbox.switchHost(Toolbox.HostType.WINDOW);
+  toolbox.win.focus();
+
+  info("Now test with the toolbox undocked");
+  for (const toolID of toolIDs) {
+    await testOneTool(toolbox, toolID);
+  }
+
+  info("Switch back to docked mode");
+  await toolbox.switchHost(Toolbox.HostType.BOTTOM);
+
+  removeLoadListener();
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+async function testOneTool(toolbox, toolID) {
+  info(`Select tool ${toolID}`);
+  await toolbox.selectTool(toolID);
+
+  assertThemeStyleSheet(toolbox, toolID);
+
+  await testReload("toolbox.reload.key", toolbox);
+  await testReload("toolbox.reload2.key", toolbox);
+  await testReload("toolbox.forceReload.key", toolbox);
+  await testReload("toolbox.forceReload2.key", toolbox);
+}
+
+async function testReload(shortcut, toolbox) {
+  info(`Reload with ${shortcut}`);
+
+  await sendToolboxReloadShortcut(L10N.getStr(shortcut), toolbox);
+  reloadsSent++;
+}
+
+/**
+ * As opening all panels is an expensive operation, reuse this test in order
+ * to add a few assertions around panel's stylesheets.
+ * Ensure the proper ordering of the theme stylesheet. `global.css` should come
+ * first if it exists, then the theme.
+ */
+function assertThemeStyleSheet(toolbox, toolID) {
+  const iframe = toolbox.doc.getElementById("toolbox-panel-iframe-" + toolID);
+  const styleSheets = iframe.contentDocument.querySelectorAll(
+    `link[rel="stylesheet"]`
+  );
+  ok(
+    !!styleSheets.length,
+    `The panel ${toolID} should have at least have one stylesheet`
+  );
+
+  // In the web console, we have a special case where global.css is registered very first
+  if (styleSheets[0].href === "chrome://global/skin/global.css") {
+    is(styleSheets[1].href, "chrome://devtools/skin/light-theme.css");
+  } else {
+    // Otherwise, in all other panels, the theme file is registered very first
+    is(styleSheets[0].href, "chrome://devtools/skin/light-theme.css");
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_reload_target_force.js b/devtools/client/framework/test/browser_toolbox_window_reload_target_force.js
new file mode 100644
index 0000000000..d563fb7d37
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_reload_target_force.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Simple test page which writes the value of the cache-control header.
+const TEST_URL = URL_ROOT + "sjs_cache_controle_header.sjs";
+
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/toolbox.properties"
+);
+
+// Test that "forceReload" shorcuts send requests with the correct cache-control
+// header value: no-cache.
+add_task(async function () {
+  await addTab(TEST_URL);
+  const tab = gBrowser.selectedTab;
+
+  info("Open the toolbox with the inspector selected");
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "inspector",
+  });
+
+  // The VALIDATE_ALWAYS flag isn’t going to be applied when we only revalidate
+  // the top level document, thus the expectedHeader is empty.
+  const expectedHeader = Services.prefs.getBoolPref(
+    "browser.soft_reload.only_force_validate_top_level_document",
+    false
+  )
+    ? ""
+    : "max-age=0";
+  await testReload("toolbox.reload.key", toolbox, expectedHeader);
+  await testReload("toolbox.reload2.key", toolbox, expectedHeader);
+  await testReload("toolbox.forceReload.key", toolbox, "no-cache");
+  await testReload("toolbox.forceReload2.key", toolbox, "no-cache");
+});
+
+async function testReload(shortcut, toolbox, expectedHeader) {
+  info(`Reload with ${shortcut}`);
+  await sendToolboxReloadShortcut(L10N.getStr(shortcut), toolbox);
+
+  info("Retrieve the text content of the test page");
+  const textContent = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    function () {
+      return content.document.body.textContent;
+    }
+  );
+
+  // See sjs_cache_controle_header.sjs
+  is(
+    textContent,
+    "cache-control:" + expectedHeader,
+    "cache-control header for the page request had the expected value"
+  );
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_shortcuts.js b/devtools/client/framework/test/browser_toolbox_window_shortcuts.js
new file mode 100644
index 0000000000..53cea3a55a
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_shortcuts.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+var Startup = Cc["@mozilla.org/devtools/startup-clh;1"].getService(
+  Ci.nsISupports
+).wrappedJSObject;
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+var toolbox,
+  toolIDs,
+  toolShortcuts = [],
+  idIndex,
+  modifiedPrefs = [];
+
+async function test() {
+  addTab("about:blank").then(async function () {
+    toolIDs = [];
+    for (const [id, definition] of gDevTools._tools) {
+      const shortcut = Startup.KeyShortcuts.filter(s => s.toolId == id)[0];
+      if (!shortcut) {
+        continue;
+      }
+      toolIDs.push(id);
+      toolShortcuts.push(shortcut);
+
+      // Enable disabled tools
+      const pref = definition.visibilityswitch;
+      if (pref) {
+        const prefValue = Services.prefs.getBoolPref(pref, false);
+        if (!prefValue) {
+          modifiedPrefs.push(pref);
+          Services.prefs.setBoolPref(pref, true);
+        }
+      }
+    }
+    const tab = gBrowser.selectedTab;
+    idIndex = 0;
+    gDevTools
+      .showToolboxForTab(tab, {
+        toolId: toolIDs[0],
+        hostType: Toolbox.HostType.WINDOW,
+      })
+      .then(testShortcuts);
+  });
+}
+
+function testShortcuts(aToolbox, aIndex) {
+  if (aIndex === undefined) {
+    aIndex = 1;
+  } else if (aIndex == toolIDs.length) {
+    tidyUp();
+    return;
+  }
+
+  toolbox = aToolbox;
+  info("Toolbox fired a `ready` event");
+
+  toolbox.once("select", selectCB);
+
+  const shortcut = toolShortcuts[aIndex];
+  const key = shortcut.shortcut;
+  const toolModifiers = shortcut.modifiers;
+  const modifiers = {
+    accelKey: toolModifiers.includes("accel"),
+    altKey: toolModifiers.includes("alt"),
+    shiftKey: toolModifiers.includes("shift"),
+  };
+  idIndex = aIndex;
+  info(
+    "Testing shortcut for tool " +
+      aIndex +
+      ":" +
+      toolIDs[aIndex] +
+      " using key " +
+      key
+  );
+  EventUtils.synthesizeKey(key, modifiers, toolbox.win.parent);
+}
+
+function selectCB(id) {
+  info("toolbox-select event from " + id);
+
+  is(
+    toolIDs.indexOf(id),
+    idIndex,
+    "Correct tool is selected on pressing the shortcut for " + id
+  );
+
+  testShortcuts(toolbox, idIndex + 1);
+}
+
+function tidyUp() {
+  toolbox.destroy().then(function () {
+    gBrowser.removeCurrentTab();
+
+    for (const pref of modifiedPrefs) {
+      Services.prefs.clearUserPref(pref);
+    }
+    toolbox = toolIDs = idIndex = modifiedPrefs = Toolbox = null;
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_title_changes.js b/devtools/client/framework/test/browser_toolbox_window_title_changes.js
new file mode 100644
index 0000000000..176b0b0f65
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_title_changes.js
@@ -0,0 +1,98 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+requestLongerTimeout(5);
+
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+const NAME_1 = "";
+const NAME_2 = "Toolbox test for title update";
+const NAME_3 = NAME_2;
+const NAME_4 = "Toolbox test for another title update";
+
+const URL_1 = "data:text/plain;charset=UTF-8,abcde";
+const URL_2 =
+  URL_ROOT_ORG_SSL + "browser_toolbox_window_title_changes_page.html";
+const URL_3 =
+  URL_ROOT_COM_SSL + "browser_toolbox_window_title_changes_page.html";
+const URL_4 = `https://example.com/document-builder.sjs?html=<head><title>${NAME_4}</title></head><h1>Hello`;
+
+add_task(async function test() {
+  await addTab(URL_1);
+
+  const tab = gBrowser.selectedTab;
+  let toolbox = await gDevTools.showToolboxForTab(tab, {
+    hostType: Toolbox.HostType.BOTTOM,
+  });
+  await toolbox.selectTool("webconsole");
+
+  info("Undock toolbox and check title");
+  // We have to first switch the host in order to spawn the new top level window
+  // on which we are going to listen from title change event
+  await toolbox.switchHost(Toolbox.HostType.WINDOW);
+  await checkTitle(NAME_1, URL_1, "toolbox undocked");
+
+  info("switch to different tool and check title again");
+  await toolbox.selectTool("jsdebugger");
+  await checkTitle(NAME_1, URL_1, "tool changed");
+
+  info("navigate to different local url and check title");
+
+  await navigateTo(URL_2);
+  info("wait for title change");
+  await checkTitle(NAME_2, URL_2, "url changed");
+
+  info("navigate to a real url and check title");
+  await navigateTo(URL_3);
+
+  info("wait for title change");
+  await checkTitle(NAME_3, URL_3, "url changed");
+
+  info("navigate to another page on the same domain");
+  await navigateTo(URL_4);
+  await checkTitle(NAME_4, URL_4, "title changed");
+
+  info(
+    "destroy toolbox, create new one hosted in a window (with a different tool id), and check title"
+  );
+  // Give the tools a chance to handle the navigation event before
+  // destroying the toolbox.
+  await new Promise(resolve => executeSoon(resolve));
+  await toolbox.destroy();
+
+  // After destroying the toolbox, open a new one.
+  toolbox = await gDevTools.showToolboxForTab(tab, {
+    hostType: Toolbox.HostType.WINDOW,
+  });
+  toolbox.selectTool("webconsole");
+  await checkTitle(NAME_4, URL_4, "toolbox destroyed and recreated");
+
+  info("clean up");
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+  Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
+});
+
+function getExpectedTitle(name, url) {
+  if (name) {
+    return `Developer Tools — ${name} — ${url}`;
+  }
+  return `Developer Tools — ${url}`;
+}
+
+async function checkTitle(name, url, context) {
+  info("Check title - " + context);
+  await waitFor(
+    () => getToolboxWindowTitle() === getExpectedTitle(name, url),
+    `Didn't get the expected title ("${getExpectedTitle(name, url)}"`,
+    200,
+    50
+  );
+  const expectedTitle = getExpectedTitle(name, url);
+  is(getToolboxWindowTitle(), expectedTitle, context);
+}
+
+function getToolboxWindowTitle() {
+  return Services.wm.getMostRecentWindow("devtools:toolbox").document.title;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_title_changes_page.html b/devtools/client/framework/test/browser_toolbox_window_title_changes_page.html
new file mode 100644
index 0000000000..8678469ee5
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_title_changes_page.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Toolbox test for title update</title>
+    <!-- Any copyright is dedicated to the Public Domain.
+         http://creativecommons.org/publicdomain/zero/1.0/ -->
+  </head>
+  <body></body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_window_title_frame_select.js b/devtools/client/framework/test/browser_toolbox_window_title_frame_select.js
new file mode 100644
index 0000000000..06905fbd3b
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_title_frame_select.js
@@ -0,0 +1,171 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check that the detached devtools window title is not updated when switching
+ * the selected frame. Also check that frames command button has 'open'
+ * attribute set when the list of frames is opened.
+ */
+
+var { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+const URL =
+  URL_ROOT_SSL + "browser_toolbox_window_title_frame_select_page.html";
+const IFRAME_URL =
+  URL_ROOT_SSL + "browser_toolbox_window_title_changes_page.html";
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/toolbox.properties"
+);
+
+/**
+ * Wait for a given toolbox to get its title updated.
+ */
+function waitForTitleChange(toolbox) {
+  return new Promise(resolve => {
+    toolbox.topWindow.addEventListener("message", function onmessage(event) {
+      if (event.data.name == "set-host-title") {
+        toolbox.topWindow.removeEventListener("message", onmessage);
+        resolve();
+      }
+    });
+  });
+}
+
+add_task(async function () {
+  Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
+
+  await addTab(URL);
+  const tab = gBrowser.selectedTab;
+  let toolbox = await gDevTools.showToolboxForTab(tab, {
+    hostType: Toolbox.HostType.BOTTOM,
+  });
+
+  await toolbox.switchHost(Toolbox.HostType.WINDOW);
+  // Wait for title change event *after* switch host, in order to listen
+  // for the event on the WINDOW host window, which only exists after switchHost
+  await waitForTitleChange(toolbox);
+
+  is(
+    getTitle(),
+    `Developer Tools — Page title — ${URL}`,
+    "Devtools title correct after switching to detached window host"
+  );
+
+  // Wait for tick to avoid unexpected 'popuphidden' event, which
+  // blocks the frame popup menu opened below. See also bug 1276873
+  await waitForTick();
+
+  const btn = toolbox.doc.getElementById("command-button-frames");
+
+  await testShortcutToOpenFrames(btn, toolbox);
+
+  // Open frame menu and wait till it's available on the screen.
+  // Also check 'aria-expanded' attribute on the command button.
+  is(
+    btn.getAttribute("aria-expanded"),
+    "false",
+    "The aria-expanded attribute must be set to false"
+  );
+  btn.click();
+
+  const panel = toolbox.doc.getElementById("command-button-frames-panel");
+  ok(panel, "popup panel has created.");
+  await waitUntil(() => panel.classList.contains("tooltip-visible"));
+
+  is(
+    btn.getAttribute("aria-expanded"),
+    "true",
+    "The aria-expanded attribute must be set to true"
+  );
+
+  // Verify that the frame list menu is populated
+  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
+  const frames = Array.from(menuList.querySelectorAll(".command"));
+  is(frames.length, 2, "We have both frames in the list");
+
+  const topFrameBtn = frames.filter(
+    b => b.querySelector(".label").textContent == URL
+  )[0];
+  const iframeBtn = frames.filter(
+    b => b.querySelector(".label").textContent == IFRAME_URL
+  )[0];
+  ok(topFrameBtn, "Got top level document in the list");
+  ok(iframeBtn, "Got iframe document in the list");
+
+  // Listen to will-navigate to check if the view is empty
+  const { resourceCommand } = toolbox.commands;
+  const { onResource: willNavigate } =
+    await resourceCommand.waitForNextResource(
+      resourceCommand.TYPES.DOCUMENT_EVENT,
+      {
+        ignoreExistingResources: true,
+        predicate(resource) {
+          return resource.name == "will-navigate";
+        },
+      }
+    );
+
+  // Only select the iframe after we are able to select an element from the top
+  // level document.
+  const onInspectorReloaded = toolbox.getPanel("inspector").once("reloaded");
+  info("Select the iframe");
+  iframeBtn.click();
+
+  // will-navigate isn't emitted in the targetCommand-based iframe picker.
+  if (!isEveryFrameTargetEnabled()) {
+    await willNavigate;
+  }
+  await onInspectorReloaded;
+  // wait a bit more in case an eventual title update would happen later
+  await wait(1000);
+
+  info("Navigation to the iframe is done, the inspector should be back up");
+  is(
+    getTitle(),
+    `Developer Tools — Page title — ${URL}`,
+    "Devtools title was not updated after changing inspected frame"
+  );
+
+  info("Cleanup toolbox and test preferences.");
+  await toolbox.destroy();
+  toolbox = null;
+  gBrowser.removeCurrentTab();
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+  Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
+  Services.prefs.clearUserPref("devtools.command-button-frames.enabled");
+  finish();
+});
+
+function getTitle() {
+  return Services.wm.getMostRecentWindow("devtools:toolbox").document.title;
+}
+
+async function testShortcutToOpenFrames(btn, toolbox) {
+  info("Tests if shortcut Alt+Down opens the frames");
+  // focus the button so that keyPress can be performed
+  btn.focus();
+  // perform keyPress - Alt+Down
+  const shortcut = L10N.getStr("toolbox.showFrames.key");
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+
+  const panel = toolbox.doc.getElementById("command-button-frames-panel");
+  ok(panel, "popup panel has created.");
+  await waitUntil(() => panel.classList.contains("tooltip-visible"));
+
+  is(
+    btn.getAttribute("aria-expanded"),
+    "true",
+    "The aria-expanded attribute must be set to true"
+  );
+
+  // pressing Esc should hide the menu again
+  EventUtils.sendKey("ESCAPE", toolbox.win);
+  await waitUntil(() => !panel.classList.contains("tooltip-visible"));
+
+  is(
+    btn.getAttribute("aria-expanded"),
+    "false",
+    "The aria-expanded attribute must be set to false"
+  );
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_title_frame_select_page.html b/devtools/client/framework/test/browser_toolbox_window_title_frame_select_page.html
new file mode 100644
index 0000000000..1eda94a9cf
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_title_frame_select_page.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Page title</title>
+    <!-- Any copyright is dedicated to the Public Domain.
+         http://creativecommons.org/publicdomain/zero/1.0/ -->
+    <iframe src="browser_toolbox_window_title_changes_page.html"></iframe>
+  </head>
+  <body></body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_zoom.js b/devtools/client/framework/test/browser_toolbox_zoom.js
new file mode 100644
index 0000000000..6db94900f9
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_zoom.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/toolbox.properties"
+);
+
+add_task(async function () {
+  registerCleanupFunction(function () {
+    Services.prefs.clearUserPref("devtools.toolbox.zoomValue");
+  });
+
+  // This test assume that zoom value will be default value. i.e. x1.0.
+  Services.prefs.setCharPref("devtools.toolbox.zoomValue", "1.0");
+  await addTab("about:blank");
+  const toolbox = await gDevTools.showToolboxForTab(gBrowser.selectedTab, {
+    toolId: "styleeditor",
+    hostType: Toolbox.HostType.BOTTOM,
+  });
+
+  info("testing zoom keys");
+
+  testZoomLevel("In", 2, 1.2, toolbox);
+  testZoomLevel("Out", 3, 0.9, toolbox);
+  testZoomLevel("Reset", 1, 1, toolbox);
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+function testZoomLevel(type, times, expected, toolbox) {
+  sendZoomKey("toolbox.zoom" + type + ".key", times);
+
+  const zoom = getCurrentZoom(toolbox);
+  is(
+    zoom.toFixed(1),
+    expected.toFixed(1),
+    "zoom level correct after zoom " + type
+  );
+
+  const savedZoom = parseFloat(
+    Services.prefs.getCharPref("devtools.toolbox.zoomValue")
+  );
+  is(
+    savedZoom.toFixed(1),
+    expected.toFixed(1),
+    "saved zoom level is correct after zoom " + type
+  );
+}
+
+function sendZoomKey(shortcut, times) {
+  for (let i = 0; i < times; i++) {
+    synthesizeKeyShortcut(L10N.getStr(shortcut));
+  }
+}
+
+function getCurrentZoom(toolbox) {
+  return toolbox.win.browsingContext.fullZoom;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_zoom_popup.js b/devtools/client/framework/test/browser_toolbox_zoom_popup.js
new file mode 100644
index 0000000000..7b764bf703
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_zoom_popup.js
@@ -0,0 +1,213 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the popup menu position when zooming in the devtools panel.
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+// Use a simple URL in order to prevent displacing the left position of the
+// frames menu.
+const TEST_URL = "data:text/html;charset=utf-8,<iframe/>";
+
+add_task(async function () {
+  registerCleanupFunction(async function () {
+    Services.prefs.clearUserPref("devtools.toolbox.zoomValue");
+  });
+  const zoom = 1.4;
+  Services.prefs.setCharPref("devtools.toolbox.zoomValue", zoom.toString(10));
+
+  info("Load iframe page for checking the frame menu with x1.4 zoom.");
+  await addTab(TEST_URL);
+  const tab = gBrowser.selectedTab;
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "inspector",
+    hostType: Toolbox.HostType.WINDOW,
+  });
+  const inspector = toolbox.getCurrentPanel();
+  const hostWindow = toolbox.win.parent;
+  const originWidth = hostWindow.outerWidth;
+  const originHeight = hostWindow.outerHeight;
+
+  info(`Waiting for the toolbox window will to be rendered with zoom x${zoom}`);
+  await waitUntil(() => {
+    return parseFloat(toolbox.win.browsingContext.fullZoom.toFixed(1)) === zoom;
+  });
+
+  info(
+    "Resizing and moving the toolbox window in order to display the chevron menu."
+  );
+  // If the window is displayed bottom of screen, the menu might be displayed
+  // above the button so move it to the top of the screen first.
+  await moveWindowTo(hostWindow, 10, 10);
+
+  // Shrink the width of the window such that the inspector's tab menu button
+  // and chevron button are visible.
+  const prevTabs = toolbox.doc.querySelectorAll(".devtools-tab").length;
+  info("Shrinking window");
+
+  hostWindow.resizeTo(400, hostWindow.outerHeight);
+  await waitUntil(() => {
+    info(`Waiting for chevron(${hostWindow.outerWidth})`);
+    return (
+      hostWindow.outerWidth === 400 &&
+      toolbox.doc.getElementById("tools-chevron-menu-button") &&
+      inspector.panelDoc.querySelector(".all-tabs-menu") &&
+      prevTabs != toolbox.doc.querySelectorAll(".devtools-tab").length
+    );
+  });
+
+  const menuList = [
+    toolbox.win.document.getElementById("toolbox-meatball-menu-button"),
+    toolbox.win.document.getElementById("command-button-frames"),
+    toolbox.win.document.getElementById("tools-chevron-menu-button"),
+    inspector.panelDoc.querySelector(".all-tabs-menu"),
+  ];
+
+  for (const menu of menuList) {
+    const { buttonBounds, menuType, menuBounds, arrowBounds } =
+      await getButtonAndMenuInfo(toolbox, menu);
+
+    switch (menuType) {
+      case "native":
+        {
+          // Allow rounded error and platform offset value.
+          // horizontal : IntID::ContextMenuOffsetHorizontal of GTK and Windows
+          //              uses 2.
+          // vertical: IntID::ContextMenuOffsetVertical of macOS uses -6.
+          const xDelta = Math.abs(menuBounds.left - buttonBounds.left);
+          const yDelta = Math.abs(menuBounds.top - buttonBounds.bottom);
+          Assert.less(
+            xDelta,
+            2,
+            "xDelta is lower than 2: " + xDelta + ". #" + menu.id
+          );
+          Assert.less(
+            yDelta,
+            6,
+            "yDelta is lower than 6: " + yDelta + ". #" + menu.id
+          );
+        }
+        break;
+
+      case "doorhanger":
+        {
+          // Calculate the center of the button and center of the arrow and
+          // check they align.
+          const buttonCenter = buttonBounds.left + buttonBounds.width / 2;
+          const arrowCenter = arrowBounds.left + arrowBounds.width / 2;
+          const delta = Math.abs(arrowCenter - buttonCenter);
+          Assert.lessOrEqual(
+            Math.round(delta),
+            1,
+            "Center of arrow is within 1px of button center" +
+              ` (delta: ${delta})`
+          );
+        }
+        break;
+    }
+  }
+
+  const onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(originWidth, originHeight);
+  await onResize;
+
+  await toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+function convertScreenToDoc(popup, doc) {
+  const rect = popup.getOuterScreenRect();
+  const screenX = doc.defaultView.mozInnerScreenX;
+  const screenY = doc.defaultView.mozInnerScreenY;
+  const scale =
+    popup.ownerGlobal.devicePixelRatio / doc.ownerGlobal.devicePixelRatio;
+  return new DOMRect(
+    rect.x * scale - screenX,
+    rect.y * scale - screenY,
+    rect.width * scale,
+    rect.height * scale
+  );
+}
+
+/**
+ * Get the bounds of a menu button and its popup panel. The popup panel is
+ * measured by clicking the menu button and looking for its panel (and then
+ * hiding it again).
+ *
+ * @param {Object} doc
+ *        The toolbox document to query.
+ * @param {Object} menuButton
+ *        The button whose size and popup size we should measure.
+ * @return {Object}
+ *         An object with the following properties:
+ *         - buttonBounds {DOMRect} Bounds of the button.
+ *         - menuType {string} Type of the menu, "native" or "doorhanger".
+ *         - menuBounds {DOMRect} Bounds of the menu panel.
+ *         - arrowBounds {DOMRect|null} Bounds of the arrow. Only set when
+ *                       menuType is "doorhanger", null otherwise.
+ */
+async function getButtonAndMenuInfo(toolbox, menuButton) {
+  const { doc, topDoc } = toolbox;
+  info("Show popup menu with click event.");
+  AccessibilityUtils.setEnv({
+    // Keyboard accessibility is handled on the toolbox toolbar container level.
+    // Users can use arrow keys to navigate between and select tabs.
+    nonNegativeTabIndexRule: false,
+  });
+  EventUtils.sendMouseEvent(
+    {
+      type: "click",
+      screenX: 1,
+    },
+    menuButton,
+    doc.defaultView
+  );
+  AccessibilityUtils.resetEnv();
+
+  let menuPopup;
+  let menuType;
+  let menuBounds = null;
+  let arrowBounds = null;
+  if (menuButton.hasAttribute("aria-controls")) {
+    menuType = "doorhanger";
+    menuPopup = doc.getElementById(menuButton.getAttribute("aria-controls"));
+    await waitUntil(() => menuPopup.classList.contains("tooltip-visible"));
+    // menuPopup can be a non-menupopup element, e.g. div. Call getBoxQuads to
+    // get its bounds.
+    menuBounds = menuPopup.getBoxQuads({ relativeTo: doc })[0].getBounds();
+  } else {
+    menuType = "native";
+    await waitUntil(() => {
+      const popupset = topDoc.querySelector("popupset");
+      menuPopup = popupset?.querySelector('menupopup[menu-api="true"]');
+      return menuPopup?.state === "open";
+    });
+    // menuPopup is a XUL menupopup element. Call getOuterScreenRect(), which is
+    // suported on both native and non-native menupopup implementations.
+    menuBounds = convertScreenToDoc(menuPopup, doc);
+  }
+  ok(menuPopup, "Menu popup is displayed.");
+
+  const buttonBounds = menuButton
+    .getBoxQuads({ relativeTo: doc })[0]
+    .getBounds();
+
+  if (menuType === "doorhanger") {
+    const arrow = menuPopup.querySelector(".tooltip-arrow");
+    arrowBounds = arrow.getBoxQuads({ relativeTo: doc })[0].getBounds();
+  }
+
+  info("Hide popup menu.");
+  if (menuType === "doorhanger") {
+    EventUtils.sendKey("Escape", doc.defaultView);
+    await waitUntil(() => !menuPopup.classList.contains("tooltip-visible"));
+  } else {
+    const popupHidden = once(menuPopup, "popuphidden");
+    menuPopup.hidePopup();
+    await popupHidden;
+  }
+
+  return { buttonBounds, menuType, menuBounds, arrowBounds };
+}
diff --git a/devtools/client/framework/test/browser_webextension_descriptor.js b/devtools/client/framework/test/browser_webextension_descriptor.js
new file mode 100644
index 0000000000..c3d1392a31
--- /dev/null
+++ b/devtools/client/framework/test/browser_webextension_descriptor.js
@@ -0,0 +1,31 @@
+/* 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";
+
+add_task(async function test_webextension_descriptors() {
+  const extension = ExtensionTestUtils.loadExtension({
+    useAddonManager: "temporary",
+    manifest: {
+      name: "Descriptor extension",
+    },
+  });
+
+  await extension.startup();
+
+  // Get AddonTarget.
+  const commands = await CommandsFactory.forAddon(extension.id);
+  const descriptor = commands.descriptorFront;
+  ok(descriptor, "webextension descriptor has been found");
+  is(descriptor.name, "Descriptor extension", "Descriptor name is correct");
+  is(descriptor.debuggable, true, "Descriptor debuggable attribute is correct");
+
+  const onDestroyed = descriptor.once("descriptor-destroyed");
+  info("Uninstall the extension");
+  await extension.unload();
+  info("Wait for the descriptor to be destroyed");
+  await onDestroyed;
+
+  await commands.destroy();
+});
diff --git a/devtools/client/framework/test/browser_webextension_dropdown.js b/devtools/client/framework/test/browser_webextension_dropdown.js
new file mode 100644
index 0000000000..b291ac7a9e
--- /dev/null
+++ b/devtools/client/framework/test/browser_webextension_dropdown.js
@@ -0,0 +1,135 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* globals browser */
+
+const URL =
+  "data:text/html;charset=utf8,test for drop down menu in devtools extension";
+
+add_task(async function runTest() {
+  const extension = await startupExtension();
+
+  const tab = await addTab(URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "webconsole",
+  });
+  const {
+    Toolbox,
+  } = require("resource://devtools/client/framework/toolbox.js");
+  await toolbox.switchHost(Toolbox.HostType.WINDOW);
+
+  await extension.awaitMessage("devtools_page_loaded");
+
+  const toolboxAdditionalTools = toolbox.getAdditionalTools();
+  is(
+    toolboxAdditionalTools.length,
+    1,
+    "Got the expected number of toolbox specific panel registered."
+  );
+
+  const panelId = toolboxAdditionalTools[0].id;
+
+  await gDevTools.showToolboxForTab(tab, { toolId: panelId });
+
+  await extension.awaitMessage("devtools_panel_loaded");
+
+  const panel = findExtensionPanel();
+  ok(panel, "found extension panel");
+
+  const iframe = panel.firstChild;
+  const popupShownPromise = BrowserTestUtils.waitForSelectPopupShown(
+    toolbox.win.browsingContext.topChromeWindow
+  );
+
+  const browser = iframe.contentDocument.getElementById(
+    "webext-panels-browser"
+  );
+  ok(browser, "found extension panel browser");
+
+  info("Waiting for menu");
+  await ContentTask.spawn(browser, null, async function () {
+    const menu = content.document.getElementById("menu");
+    const event = new content.MouseEvent("mousedown");
+    menu.dispatchEvent(event);
+  });
+
+  const popup = await popupShownPromise;
+  info("popup is shown");
+
+  popup.hidePopup();
+
+  await toolbox.destroy();
+
+  gBrowser.removeCurrentTab();
+
+  await extension.unload();
+});
+
+async function startupExtension() {
+  async function devtools_page() {
+    await browser.devtools.panels.create(
+      "drop",
+      "/icon.png",
+      "/devtools_panel.html"
+    );
+    browser.test.sendMessage("devtools_page_loaded");
+  }
+
+  async function devtools_panel() {
+    browser.test.sendMessage("devtools_panel_loaded");
+  }
+
+  const extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      devtools_page: "devtools_page.html",
+    },
+    files: {
+      "devtools_page.html": `<!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="utf-8">
+          </head>
+          <body>
+            <script src="devtools_page.js"></script>
+          </body>
+        </html>`,
+      "devtools_page.js": devtools_page,
+      "icon.png": "",
+      "devtools_panel.html": `<!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="utf-8">
+          </head>
+          <body>
+            <select id="menu">
+              <option value="A" selected>A</option>
+              <option value="B">B</option>
+              <option value="C">C</option>
+            </select>
+            <script src="devtools_panel.js"></script>
+          </body>
+        </html>`,
+      "devtools_panel.js": devtools_panel,
+    },
+  });
+
+  await extension.startup();
+
+  return extension;
+}
+
+function findExtensionPanel() {
+  const win = Services.wm.getMostRecentWindow("devtools:toolbox");
+  ok(win, "toolbox separate window exists");
+
+  const iframe = win.document.querySelector(".devtools-toolbox-window-iframe");
+  const deck = iframe.contentDocument.getElementById("toolbox-deck");
+  for (const box of deck.childNodes) {
+    if (box.id && box.id.startsWith("toolbox-panel-webext-devtools-panel")) {
+      return box;
+    }
+  }
+  return null;
+}
diff --git a/devtools/client/framework/test/code_binary_search.coffee b/devtools/client/framework/test/code_binary_search.coffee
new file mode 100644
index 0000000000..e3dacdaaab
--- /dev/null
+++ b/devtools/client/framework/test/code_binary_search.coffee
@@ -0,0 +1,18 @@
+# Uses a binary search algorithm to locate a value in the specified array.
+window.binary_search = (items, value) ->
+
+  start = 0
+  stop  = items.length - 1
+  pivot = Math.floor (start + stop) / 2
+
+  while items[pivot] isnt value and start < stop
+
+    # Adjust the search area.
+    stop  = pivot - 1 if value < items[pivot]
+    start = pivot + 1 if value > items[pivot]
+
+    # Recalculate the pivot.
+    pivot = Math.floor (stop + start) / 2
+
+  # Make sure we've found the correct value.
+  if items[pivot] is value then pivot else -1
\ No newline at end of file
diff --git a/devtools/client/framework/test/code_binary_search.js b/devtools/client/framework/test/code_binary_search.js
new file mode 100644
index 0000000000..c43848a60c
--- /dev/null
+++ b/devtools/client/framework/test/code_binary_search.js
@@ -0,0 +1,29 @@
+// Generated by CoffeeScript 1.6.1
+(function() {
+
+  window.binary_search = function(items, value) {
+    var pivot, start, stop;
+    start = 0;
+    stop = items.length - 1;
+    pivot = Math.floor((start + stop) / 2);
+    while (items[pivot] !== value && start < stop) {
+      if (value < items[pivot]) {
+        stop = pivot - 1;
+      }
+      if (value > items[pivot]) {
+        start = pivot + 1;
+      }
+      pivot = Math.floor((stop + start) / 2);
+    }
+    if (items[pivot] === value) {
+      return pivot;
+    } else {
+      return -1;
+    }
+  };
+
+}).call(this);
+
+/*
+//# sourceMappingURL=code_binary_search.map
+*/
diff --git a/devtools/client/framework/test/code_binary_search.map b/devtools/client/framework/test/code_binary_search.map
new file mode 100644
index 0000000000..8d22511252
--- /dev/null
+++ b/devtools/client/framework/test/code_binary_search.map
@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "code_binary_search.js",
+  "sourceRoot": "",
+  "sources": [
+    "code_binary_search.coffee"
+  ],
+  "names": [],
+  "mappings": ";AACA;CAAA;CAAA,CAAA,CAAuB,EAAA,CAAjB,GAAkB,IAAxB;CAEE,OAAA,UAAA;CAAA,EAAQ,CAAR,CAAA;CAAA,EACQ,CAAR,CAAa,CAAL;CADR,EAEQ,CAAR,CAAA;CAEA,EAA0C,CAAR,CAAtB,MAAN;CAGJ,EAA6B,CAAR,CAAA,CAArB;CAAA,EAAQ,CAAR,CAAQ,GAAR;QAAA;CACA,EAA6B,CAAR,CAAA,CAArB;CAAA,EAAQ,EAAR,GAAA;QADA;CAAA,EAIQ,CAAI,CAAZ,CAAA;CAXF,IAIA;CAUA,GAAA,CAAS;CAAT,YAA8B;MAA9B;AAA0C,CAAD,YAAA;MAhBpB;CAAvB,EAAuB;CAAvB"
+}
diff --git a/devtools/client/framework/test/code_binary_search_absolute.js b/devtools/client/framework/test/code_binary_search_absolute.js
new file mode 100644
index 0000000000..7a529f3e88
--- /dev/null
+++ b/devtools/client/framework/test/code_binary_search_absolute.js
@@ -0,0 +1,29 @@
+// Generated by CoffeeScript 1.6.1
+(function() {
+
+  window.binary_search = function(items, value) {
+    var pivot, start, stop;
+    start = 0;
+    stop = items.length - 1;
+    pivot = Math.floor((start + stop) / 2);
+    while (items[pivot] !== value && start < stop) {
+      if (value < items[pivot]) {
+        stop = pivot - 1;
+      }
+      if (value > items[pivot]) {
+        start = pivot + 1;
+      }
+      pivot = Math.floor((stop + start) / 2);
+    }
+    if (items[pivot] === value) {
+      return pivot;
+    } else {
+      return -1;
+    }
+  };
+
+}).call(this);
+
+/*
+//# sourceMappingURL=code_binary_search_absolute.map
+*/
diff --git a/devtools/client/framework/test/code_binary_search_absolute.map b/devtools/client/framework/test/code_binary_search_absolute.map
new file mode 100644
index 0000000000..04dd827940
--- /dev/null
+++ b/devtools/client/framework/test/code_binary_search_absolute.map
@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "code_binary_search.js",
+  "sourceRoot": "https://example.com/browser/devtools/client/framework/test/",
+  "sources": [
+    "code_binary_search.coffee"
+  ],
+  "names": [],
+  "mappings": ";AACA;CAAA;CAAA,CAAA,CAAuB,EAAA,CAAjB,GAAkB,IAAxB;CAEE,OAAA,UAAA;CAAA,EAAQ,CAAR,CAAA;CAAA,EACQ,CAAR,CAAa,CAAL;CADR,EAEQ,CAAR,CAAA;CAEA,EAA0C,CAAR,CAAtB,MAAN;CAGJ,EAA6B,CAAR,CAAA,CAArB;CAAA,EAAQ,CAAR,CAAQ,GAAR;QAAA;CACA,EAA6B,CAAR,CAAA,CAArB;CAAA,EAAQ,EAAR,GAAA;QADA;CAAA,EAIQ,CAAI,CAAZ,CAAA;CAXF,IAIA;CAUA,GAAA,CAAS;CAAT,YAA8B;MAA9B;AAA0C,CAAD,YAAA;MAhBpB;CAAvB,EAAuB;CAAvB"
+}
diff --git a/devtools/client/framework/test/code_bundle_cross_domain.js b/devtools/client/framework/test/code_bundle_cross_domain.js
new file mode 100644
index 0000000000..7b50467508
--- /dev/null
+++ b/devtools/client/framework/test/code_bundle_cross_domain.js
@@ -0,0 +1,93 @@
+/******/ (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, exports, __webpack_require__) {
+
+"use strict";
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Original source code for the cross-domain source map test.
+// The generated file was made with
+//    webpack --devtool source-map code_cross_domain.js code_bundle_cross_domain.js
+// ... and then edited to replace the generated sourceMappingURL.
+
+
+
+function f() {
+  console.log("anything will do");
+}
+
+f();
+
+// Avoid script GC.
+window.f = f;
+
+
+/***/ })
+/******/ ]);
+//# sourceMappingURL=http://test2.mochi.test:8888/browser/devtools/client/framework/test/code_bundle_cross_domain.js.map
diff --git a/devtools/client/framework/test/code_bundle_cross_domain.js.map b/devtools/client/framework/test/code_bundle_cross_domain.js.map
new file mode 100644
index 0000000000..59df6f6b41
--- /dev/null
+++ b/devtools/client/framework/test/code_bundle_cross_domain.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap 7b928b82bd207211f478","webpack:///./code_cross_domain.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;AC7DA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA","file":"code_bundle_cross_domain.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 7b928b82bd207211f478","/* Any copyright is dedicated to the Public Domain.\n http://creativecommons.org/publicdomain/zero/1.0/ */\n\n// Original source code for the cross-domain source map test.\n// The generated file was made with\n//    webpack --devtool source-map code_cross_domain.js code_bundle_cross_domain.js\n// ... and then edited to replace the generated sourceMappingURL.\n\n\"use strict\";\n\nfunction f() {\n  console.log(\"anything will do\");\n}\n\nf();\n\n// Avoid script GC.\nwindow.f = f;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./code_cross_domain.js\n// module id = 0\n// module chunks = 0"],"sourceRoot":""}
\ No newline at end of file
diff --git a/devtools/client/framework/test/code_bundle_late_script.js b/devtools/client/framework/test/code_bundle_late_script.js
new file mode 100644
index 0000000000..3055d249bf
--- /dev/null
+++ b/devtools/client/framework/test/code_bundle_late_script.js
@@ -0,0 +1,116 @@
+/******/ (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 = "./code_late_script.js");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./code_late_script.js":
+/*!*****************************!*\
+  !*** ./code_late_script.js ***!
+  \*****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Original source code for the inline source map test.
+// The generated file was made with
+//    webpack --devtool source-map code_late_script.js code_bundle_late_script.js
+
+
+
+function f() {
+  console.log("The first version of the script");
+}
+
+f();
+
+
+/***/ })
+
+/******/ });
+//# sourceMappingURL=code_bundle_late_script.js.map
\ No newline at end of file
diff --git a/devtools/client/framework/test/code_bundle_late_script.js.map b/devtools/client/framework/test/code_bundle_late_script.js.map
new file mode 100644
index 0000000000..319fdadc51
--- /dev/null
+++ b/devtools/client/framework/test/code_bundle_late_script.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./code_late_script.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,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;;;;;;;;;;;;;AClFA;AACA;;AAEA;AACA;AACA;;AAEa;;AAEb;AACA;AACA;;AAEA","file":"code_bundle_late_script.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 = \"./code_late_script.js\");\n","/* Any copyright is dedicated to the Public Domain.\n http://creativecommons.org/publicdomain/zero/1.0/ */\n\n// Original source code for the inline source map test.\n// The generated file was made with\n//    webpack --devtool source-map code_late_script.js code_bundle_late_script.js\n\n\"use strict\";\n\nfunction f() {\n  console.log(\"The first version of the script\");\n}\n\nf();\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/devtools/client/framework/test/code_bundle_no_race.js b/devtools/client/framework/test/code_bundle_no_race.js
new file mode 100644
index 0000000000..43ebc6e89e
--- /dev/null
+++ b/devtools/client/framework/test/code_bundle_no_race.js
@@ -0,0 +1,95 @@
+/******/ (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;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// 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, exports, __webpack_require__) {
+
+"use strict";
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Original source code for the inline source map test.
+// The generated file was made with
+//    webpack --devtool source-map code_no_race.js code_bundle_no_race.js
+
+
+
+function f() {
+  console.log("anything will do");
+}
+
+f();
+
+// Avoid script GC.
+window.f = f;
+
+
+/***/ })
+/******/ ]);
+//# sourceMappingURL=code_bundle_no_race.js.map
\ No newline at end of file
diff --git a/devtools/client/framework/test/code_bundle_no_race.js.map b/devtools/client/framework/test/code_bundle_no_race.js.map
new file mode 100644
index 0000000000..df3f096283
--- /dev/null
+++ b/devtools/client/framework/test/code_bundle_no_race.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap bac8dffc0cc5eb13fa9d","webpack:///./code_no_race.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA,mDAA2C,cAAc;;AAEzD;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;;;;;;;;AChEA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA","file":"code_bundle_no_race.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// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\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 bac8dffc0cc5eb13fa9d","/* Any copyright is dedicated to the Public Domain.\n http://creativecommons.org/publicdomain/zero/1.0/ */\n\n// Original source code for the inline source map test.\n// The generated file was made with\n//    webpack --devtool source-map code_no_race.js code_bundle_no_race.js\n\n\"use strict\";\n\nfunction f() {\n  console.log(\"anything will do\");\n}\n\nf();\n\n// Avoid script GC.\nwindow.f = f;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./code_no_race.js\n// module id = 0\n// module chunks = 0"],"sourceRoot":""}
\ No newline at end of file
diff --git a/devtools/client/framework/test/code_cross_domain.js b/devtools/client/framework/test/code_cross_domain.js
new file mode 100644
index 0000000000..0e845c1466
--- /dev/null
+++ b/devtools/client/framework/test/code_cross_domain.js
@@ -0,0 +1,19 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Original source code for the cross-domain source map test.
+// The generated file was made with
+//    webpack --devtool source-map code_cross_domain.js code_bundle_cross_domain.js
+// ... and then the bundle was edited to replace the generated
+// sourceMappingURL.
+
+"use strict";
+
+function f() {
+  console.log("anything will do");
+}
+
+f();
+
+// Avoid script GC.
+window.f = f;
diff --git a/devtools/client/framework/test/code_inline_bundle.js b/devtools/client/framework/test/code_inline_bundle.js
new file mode 100644
index 0000000000..ff133a5376
--- /dev/null
+++ b/devtools/client/framework/test/code_inline_bundle.js
@@ -0,0 +1,92 @@
+/******/ (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;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// 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, exports, __webpack_require__) {
+
+"use strict";
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Original source code for the inline source map test.
+// The generated file was made with
+//    webpack --devtool inline-source-map code_inline_original.js code_inline_bundle.js
+
+
+
+function f() {
+  console.log("I'm a goldfish with a merry face");
+}
+
+f();
+
+
+/***/ })
+/******/ ]);
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAgNDJlMDQyN2ExYTZlMzk3NTdjOGMiLCJ3ZWJwYWNrOi8vLy4vY29kZV9pbmxpbmVfb3JpZ2luYWwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBOzs7QUFHQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQSxtREFBMkMsY0FBYzs7QUFFekQ7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxhQUFLO0FBQ0w7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQSxtQ0FBMkIsMEJBQTBCLEVBQUU7QUFDdkQseUNBQWlDLGVBQWU7QUFDaEQ7QUFDQTtBQUNBOztBQUVBO0FBQ0EsOERBQXNELCtEQUErRDs7QUFFckg7QUFDQTs7QUFFQTtBQUNBOzs7Ozs7OztBQ2hFQTtBQUNBOztBQUVBO0FBQ0E7QUFDQTs7QUFFQTs7QUFFQTtBQUNBO0FBQ0E7O0FBRUEiLCJmaWxlIjoiY29kZV9pbmxpbmVfYnVuZGxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiIFx0Ly8gVGhlIG1vZHVsZSBjYWNoZVxuIFx0dmFyIGluc3RhbGxlZE1vZHVsZXMgPSB7fTtcblxuIFx0Ly8gVGhlIHJlcXVpcmUgZnVuY3Rpb25cbiBcdGZ1bmN0aW9uIF9fd2VicGFja19yZXF1aXJlX18obW9kdWxlSWQpIHtcblxuIFx0XHQvLyBDaGVjayBpZiBtb2R1bGUgaXMgaW4gY2FjaGVcbiBcdFx0aWYoaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0pIHtcbiBcdFx0XHRyZXR1cm4gaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0uZXhwb3J0cztcbiBcdFx0fVxuIFx0XHQvLyBDcmVhdGUgYSBuZXcgbW9kdWxlIChhbmQgcHV0IGl0IGludG8gdGhlIGNhY2hlKVxuIFx0XHR2YXIgbW9kdWxlID0gaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0gPSB7XG4gXHRcdFx0aTogbW9kdWxlSWQsXG4gXHRcdFx0bDogZmFsc2UsXG4gXHRcdFx0ZXhwb3J0czoge31cbiBcdFx0fTtcblxuIFx0XHQvLyBFeGVjdXRlIHRoZSBtb2R1bGUgZnVuY3Rpb25cbiBcdFx0bW9kdWxlc1ttb2R1bGVJZF0uY2FsbChtb2R1bGUuZXhwb3J0cywgbW9kdWxlLCBtb2R1bGUuZXhwb3J0cywgX193ZWJwYWNrX3JlcXVpcmVfXyk7XG5cbiBcdFx0Ly8gRmxhZyB0aGUgbW9kdWxlIGFzIGxvYWRlZFxuIFx0XHRtb2R1bGUubCA9IHRydWU7XG5cbiBcdFx0Ly8gUmV0dXJuIHRoZSBleHBvcnRzIG9mIHRoZSBtb2R1bGVcbiBcdFx0cmV0dXJuIG1vZHVsZS5leHBvcnRzO1xuIFx0fVxuXG5cbiBcdC8vIGV4cG9zZSB0aGUgbW9kdWxlcyBvYmplY3QgKF9fd2VicGFja19tb2R1bGVzX18pXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLm0gPSBtb2R1bGVzO1xuXG4gXHQvLyBleHBvc2UgdGhlIG1vZHVsZSBjYWNoZVxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5jID0gaW5zdGFsbGVkTW9kdWxlcztcblxuIFx0Ly8gaWRlbnRpdHkgZnVuY3Rpb24gZm9yIGNhbGxpbmcgaGFybW9ueSBpbXBvcnRzIHdpdGggdGhlIGNvcnJlY3QgY29udGV4dFxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5pID0gZnVuY3Rpb24odmFsdWUpIHsgcmV0dXJuIHZhbHVlOyB9O1xuXG4gXHQvLyBkZWZpbmUgZ2V0dGVyIGZ1bmN0aW9uIGZvciBoYXJtb255IGV4cG9ydHNcbiBcdF9fd2VicGFja19yZXF1aXJlX18uZCA9IGZ1bmN0aW9uKGV4cG9ydHMsIG5hbWUsIGdldHRlcikge1xuIFx0XHRpZighX193ZWJwYWNrX3JlcXVpcmVfXy5vKGV4cG9ydHMsIG5hbWUpKSB7XG4gXHRcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIG5hbWUsIHtcbiBcdFx0XHRcdGNvbmZpZ3VyYWJsZTogZmFsc2UsXG4gXHRcdFx0XHRlbnVtZXJhYmxlOiB0cnVlLFxuIFx0XHRcdFx0Z2V0OiBnZXR0ZXJcbiBcdFx0XHR9KTtcbiBcdFx0fVxuIFx0fTtcblxuIFx0Ly8gZ2V0RGVmYXVsdEV4cG9ydCBmdW5jdGlvbiBmb3IgY29tcGF0aWJpbGl0eSB3aXRoIG5vbi1oYXJtb255IG1vZHVsZXNcbiBcdF9fd2VicGFja19yZXF1aXJlX18ubiA9IGZ1bmN0aW9uKG1vZHVsZSkge1xuIFx0XHR2YXIgZ2V0dGVyID0gbW9kdWxlICYmIG1vZHVsZS5fX2VzTW9kdWxlID9cbiBcdFx0XHRmdW5jdGlvbiBnZXREZWZhdWx0KCkgeyByZXR1cm4gbW9kdWxlWydkZWZhdWx0J107IH0gOlxuIFx0XHRcdGZ1bmN0aW9uIGdldE1vZHVsZUV4cG9ydHMoKSB7IHJldHVybiBtb2R1bGU7IH07XG4gXHRcdF9fd2VicGFja19yZXF1aXJlX18uZChnZXR0ZXIsICdhJywgZ2V0dGVyKTtcbiBcdFx0cmV0dXJuIGdldHRlcjtcbiBcdH07XG5cbiBcdC8vIE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbFxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5vID0gZnVuY3Rpb24ob2JqZWN0LCBwcm9wZXJ0eSkgeyByZXR1cm4gT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsKG9iamVjdCwgcHJvcGVydHkpOyB9O1xuXG4gXHQvLyBfX3dlYnBhY2tfcHVibGljX3BhdGhfX1xuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5wID0gXCJcIjtcblxuIFx0Ly8gTG9hZCBlbnRyeSBtb2R1bGUgYW5kIHJldHVybiBleHBvcnRzXG4gXHRyZXR1cm4gX193ZWJwYWNrX3JlcXVpcmVfXyhfX3dlYnBhY2tfcmVxdWlyZV9fLnMgPSAwKTtcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyB3ZWJwYWNrL2Jvb3RzdHJhcCA0MmUwNDI3YTFhNmUzOTc1N2M4YyIsIi8qIEFueSBjb3B5cmlnaHQgaXMgZGVkaWNhdGVkIHRvIHRoZSBQdWJsaWMgRG9tYWluLlxuIGh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL3B1YmxpY2RvbWFpbi96ZXJvLzEuMC8gKi9cblxuLy8gT3JpZ2luYWwgc291cmNlIGNvZGUgZm9yIHRoZSBpbmxpbmUgc291cmNlIG1hcCB0ZXN0LlxuLy8gVGhlIGdlbmVyYXRlZCBmaWxlIHdhcyBtYWRlIHdpdGhcbi8vICAgIHdlYnBhY2sgLS1kZXZ0b29sIGlubGluZS1zb3VyY2UtbWFwIGNvZGVfaW5saW5lX29yaWdpbmFsLmpzIGNvZGVfaW5saW5lX2J1bmRsZS5qc1xuXG5cInVzZSBzdHJpY3RcIjtcblxuZnVuY3Rpb24gZigpIHtcbiAgY29uc29sZS5sb2coXCJJJ20gYSBnb2xkZmlzaCB3aXRoIGEgbWVycnkgZmFjZVwiKTtcbn1cblxuZigpO1xuXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9jb2RlX2lubGluZV9vcmlnaW5hbC5qc1xuLy8gbW9kdWxlIGlkID0gMFxuLy8gbW9kdWxlIGNodW5rcyA9IDAiXSwic291cmNlUm9vdCI6IiJ9
\ No newline at end of file
diff --git a/devtools/client/framework/test/code_inline_original.js b/devtools/client/framework/test/code_inline_original.js
new file mode 100644
index 0000000000..c1b0b033cd
--- /dev/null
+++ b/devtools/client/framework/test/code_inline_original.js
@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Original source code for the inline source map test.
+// The generated file was made with
+//    webpack --devtool inline-source-map code_inline_original.js code_inline_bundle.js
+
+"use strict";
+
+function f() {
+  console.log("I'm a goldfish with a merry face");
+}
+
+f();
diff --git a/devtools/client/framework/test/code_late_script.js b/devtools/client/framework/test/code_late_script.js
new file mode 100644
index 0000000000..a9ed62dba9
--- /dev/null
+++ b/devtools/client/framework/test/code_late_script.js
@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Original source code for the inline source map test.
+// The generated file was made with
+//    webpack --devtool source-map code_late_script.js --output code_bundle_late_script.js --mode development
+
+"use strict";
+
+function f() {
+  console.log("The first version of the script");
+}
+
+f();
diff --git a/devtools/client/framework/test/code_math.js b/devtools/client/framework/test/code_math.js
new file mode 100644
index 0000000000..0aace9b59f
--- /dev/null
+++ b/devtools/client/framework/test/code_math.js
@@ -0,0 +1,7 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function add(a, b, k) {
+  var result = a + b;
+  return k(result);
+}
diff --git a/devtools/client/framework/test/code_no_race.js b/devtools/client/framework/test/code_no_race.js
new file mode 100644
index 0000000000..3c7fd72efd
--- /dev/null
+++ b/devtools/client/framework/test/code_no_race.js
@@ -0,0 +1,17 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Original source code for the inline source map test.
+// The generated file was made with
+//    webpack --devtool source-map code_no_race.js code_bundle_no_race.js
+
+"use strict";
+
+function f() {
+  console.log("anything will do");
+}
+
+f();
+
+// Avoid script GC.
+window.f = f;
diff --git a/devtools/client/framework/test/doc_backward_forward_navigation.html b/devtools/client/framework/test/doc_backward_forward_navigation.html
new file mode 100644
index 0000000000..52eb65e00b
--- /dev/null
+++ b/devtools/client/framework/test/doc_backward_forward_navigation.html
@@ -0,0 +1,40 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Test backward/forward navigation</title>
+  </head>
+  <body>
+    <ul class="logs"></ul>
+    <script>
+      const query = new URLSearchParams(document.location.search);
+      const noMutation = query.has("no-mutation");
+
+      /* Add stylesheet, script and dom nodes so it triggers multiple actions in the toolbox. */
+      function addContent() {
+        const now = Date.now();
+
+        const styleSheetEl = document.createElement("link");
+        styleSheetEl.href = "./doc_theme.css?id=" + now;
+        document.head.append(styleSheetEl);
+
+        const scriptEl = document.createElement("script");
+        scriptEl.src = "./code_inline_bundle.js?id=" + now;
+        document.body.append(scriptEl);
+
+        const li = document.createElement("li");
+        li.textContent = now;
+        document.querySelector("ul.logs").append(li);
+      }
+
+      if (noMutation) {
+        document.body.classList.add("no-mutation");
+        addContent();
+      } else {
+        setInterval(addContent, 200);
+      }
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/doc_cached-resource.html b/devtools/client/framework/test/doc_cached-resource.html
new file mode 100644
index 0000000000..2f1cc415c6
--- /dev/null
+++ b/devtools/client/framework/test/doc_cached-resource.html
@@ -0,0 +1,15 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <iframe src="https://example.org/browser/devtools/client/framework/test/doc_cached-resource_iframe.html"></iframe>
+    <script>
+    console.log("Hello from parent");
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/doc_cached-resource_iframe.html b/devtools/client/framework/test/doc_cached-resource_iframe.html
new file mode 100644
index 0000000000..0fc5bb2263
--- /dev/null
+++ b/devtools/client/framework/test/doc_cached-resource_iframe.html
@@ -0,0 +1,14 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <script>
+    console.log("Hello from child");
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/doc_empty-tab-01.html b/devtools/client/framework/test/doc_empty-tab-01.html
new file mode 100644
index 0000000000..28398f7768
--- /dev/null
+++ b/devtools/client/framework/test/doc_empty-tab-01.html
@@ -0,0 +1,14 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Empty test page 1</title>
+  </head>
+
+  <body>
+  </body>
+
+</html>
diff --git a/devtools/client/framework/test/doc_lazy_tool.html b/devtools/client/framework/test/doc_lazy_tool.html
new file mode 100644
index 0000000000..3f1f1b7d01
--- /dev/null
+++ b/devtools/client/framework/test/doc_lazy_tool.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+  Lazy tool
+</body>
+</html>
diff --git a/devtools/client/framework/test/doc_textbox_tool.html b/devtools/client/framework/test/doc_textbox_tool.html
new file mode 100644
index 0000000000..6f0c32ade0
--- /dev/null
+++ b/devtools/client/framework/test/doc_textbox_tool.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <input />
+  <input type='text' />
+  <input type='search' />
+  <textarea></textarea>
+  <input type='radio' />
+</body>
+</html>
diff --git a/devtools/client/framework/test/doc_theme.css b/devtools/client/framework/test/doc_theme.css
new file mode 100644
index 0000000000..5ed6e866a0
--- /dev/null
+++ b/devtools/client/framework/test/doc_theme.css
@@ -0,0 +1,3 @@
+.theme-test #devtools-theme-box {
+  color: red !important;
+}
diff --git a/devtools/client/framework/test/doc_viewsource.html b/devtools/client/framework/test/doc_viewsource.html
new file mode 100644
index 0000000000..7094eb87eb
--- /dev/null
+++ b/devtools/client/framework/test/doc_viewsource.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Toolbox test for View Source methods</title>
+    <!-- Any copyright is dedicated to the Public Domain.
+         http://creativecommons.org/publicdomain/zero/1.0/ -->
+    <link charset="UTF-8" rel="stylesheet" href="doc_theme.css" />
+    <script src="code_math.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/head.js b/devtools/client/framework/test/head.js
new file mode 100644
index 0000000000..2001d5e8c4
--- /dev/null
+++ b/devtools/client/framework/test/head.js
@@ -0,0 +1,490 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// shared-head.js handles imports, constants, and utility functions
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js",
+  this
+);
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/shared-head.js",
+  this
+);
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+/**
+ * Retrieve all tool ids compatible with a target created for the provided tab.
+ *
+ * @param {XULTab} tab
+ *        The tab for which we want to get the list of supported toolIds
+ * @return {Array<String>} array of tool ids
+ */
+async function getSupportedToolIds(tab) {
+  info("Getting the entire list of tools supported in this tab");
+
+  let shouldDestroyToolbox = false;
+
+  // Get the toolbox for this tab, or create one if needed.
+  let toolbox = gDevTools.getToolboxForTab(tab);
+  if (!toolbox) {
+    toolbox = await gDevTools.showToolboxForTab(tab);
+    shouldDestroyToolbox = true;
+  }
+
+  const toolIds = gDevTools
+    .getToolDefinitionArray()
+    .filter(def => def.isToolSupported(toolbox))
+    .map(def => def.id);
+
+  if (shouldDestroyToolbox) {
+    // Only close the toolbox if it was explicitly created here.
+    await toolbox.destroy();
+  }
+
+  return toolIds;
+}
+
+function toggleAllTools(state) {
+  for (const [, tool] of gDevTools._tools) {
+    if (!tool.visibilityswitch) {
+      continue;
+    }
+    if (state) {
+      Services.prefs.setBoolPref(tool.visibilityswitch, true);
+    } else {
+      Services.prefs.clearUserPref(tool.visibilityswitch);
+    }
+  }
+}
+
+async function getParentProcessActors(callback) {
+  const commands = await CommandsFactory.forMainProcess();
+  const mainProcessTargetFront = await commands.descriptorFront.getTarget();
+
+  callback(commands.client, mainProcessTargetFront);
+}
+
+function getSourceActor(aSources, aURL) {
+  const item = aSources.getItemForAttachment(a => a.source.url === aURL);
+  return item && item.value;
+}
+
+/**
+ * Synthesize a keypress from a <key> element, taking into account
+ * any modifiers.
+ * @param {Element} el the <key> element to synthesize
+ */
+function synthesizeKeyElement(el) {
+  const key = el.getAttribute("key") || el.getAttribute("keycode");
+  const mod = {};
+  el.getAttribute("modifiers")
+    .split(" ")
+    .forEach(m => (mod[m + "Key"] = true));
+  info(`Synthesizing: key=${key}, mod=${JSON.stringify(mod)}`);
+  EventUtils.synthesizeKey(key, mod, el.ownerDocument.defaultView);
+}
+
+/* Check the toolbox host type and prefs to make sure they match the
+ * expected values
+ * @param {Toolbox}
+ * @param {HostType} hostType
+ *        One of {SIDE, BOTTOM, WINDOW} from Toolbox.HostType
+ * @param {HostType} Optional previousHostType
+ *        The host that will be switched to when calling switchToPreviousHost
+ */
+function checkHostType(toolbox, hostType, previousHostType) {
+  is(toolbox.hostType, hostType, "host type is " + hostType);
+
+  const pref = Services.prefs.getCharPref("devtools.toolbox.host");
+  is(pref, hostType, "host pref is " + hostType);
+
+  if (previousHostType) {
+    is(
+      Services.prefs.getCharPref("devtools.toolbox.previousHost"),
+      previousHostType,
+      "The previous host is correct"
+    );
+  }
+}
+
+/**
+ * Create a new <script> referencing URL.  Return a promise that
+ * resolves when this has happened
+ * @param {String} url
+ *        the url
+ * @return {Promise} a promise that resolves when the element has been created
+ */
+function createScript(url) {
+  info(`Creating script: ${url}`);
+  // This is not ideal if called multiple times, as it loads the frame script
+  // separately each time.  See bug 1443680.
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [url], urlChild => {
+    const script = content.document.createElement("script");
+    script.setAttribute("src", urlChild);
+    content.document.body.appendChild(script);
+  });
+}
+
+/**
+ * Wait for the toolbox to notice that a given source is loaded
+ * @param {Toolbox} toolbox
+ * @param {String} url
+ *        the url to wait for
+ * @return {Promise} a promise that is resolved when the source is loaded
+ */
+function waitForSourceLoad(toolbox, url) {
+  info(`Waiting for source ${url} to be available...`);
+  return new Promise(resolve => {
+    const { resourceCommand } = toolbox;
+
+    function onAvailable(sources) {
+      for (const source of sources) {
+        if (source.url === url) {
+          resourceCommand.unwatchResources([resourceCommand.TYPES.SOURCE], {
+            onAvailable,
+          });
+          resolve();
+        }
+      }
+    }
+    resourceCommand.watchResources([resourceCommand.TYPES.SOURCE], {
+      onAvailable,
+      // Ignore the cached resources as we always listen *before*
+      // the action creating a source.
+      ignoreExistingResources: true,
+    });
+  });
+}
+
+/**
+ * When a Toolbox is started it creates a DevToolPanel for each of the tools
+ * by calling toolDefinition.build(). The returned object should
+ * at least implement these functions. They will be used by the ToolBox.
+ *
+ * There may be no benefit in doing this as an abstract type, but if nothing
+ * else gives us a place to write documentation.
+ */
+function DevToolPanel(iframeWindow, toolbox) {
+  EventEmitter.decorate(this);
+
+  this._toolbox = toolbox;
+  this._window = iframeWindow;
+}
+
+DevToolPanel.prototype = {
+  open() {
+    return new Promise(resolve => {
+      executeSoon(() => {
+        resolve(this);
+      });
+    });
+  },
+
+  get document() {
+    return this._window.document;
+  },
+
+  get target() {
+    return this._toolbox.target;
+  },
+
+  get toolbox() {
+    return this._toolbox;
+  },
+
+  destroy() {
+    return Promise.resolve(null);
+  },
+};
+
+/**
+ * Create a simple devtools test panel that implements the minimum API needed to be
+ * registered and opened in the toolbox.
+ */
+function createTestPanel(iframeWindow, toolbox) {
+  return new DevToolPanel(iframeWindow, toolbox);
+}
+
+async function openChevronMenu(toolbox) {
+  const chevronMenuButton = toolbox.doc.querySelector(".tools-chevron-menu");
+  EventUtils.synthesizeMouseAtCenter(chevronMenuButton, {}, toolbox.win);
+
+  const menuPopup = toolbox.doc.getElementById(
+    "tools-chevron-menu-button-panel"
+  );
+  ok(menuPopup, "tools-chevron-menupopup is available");
+
+  info("Waiting for the menu popup to be displayed");
+  await waitUntil(() => menuPopup.classList.contains("tooltip-visible"));
+}
+
+async function closeChevronMenu(toolbox) {
+  // In order to close the popup menu with escape key, set the focus to the chevron
+  // button at first.
+  const chevronMenuButton = toolbox.doc.querySelector(".tools-chevron-menu");
+  chevronMenuButton.focus();
+
+  EventUtils.sendKey("ESCAPE", toolbox.doc.defaultView);
+  const menuPopup = toolbox.doc.getElementById(
+    "tools-chevron-menu-button-panel"
+  );
+
+  info("Closing the chevron popup menu");
+  await waitUntil(() => !menuPopup.classList.contains("tooltip-visible"));
+}
+
+function prepareToolTabReorderTest(toolbox, startingOrder) {
+  Services.prefs.setCharPref(
+    "devtools.toolbox.tabsOrder",
+    startingOrder.join(",")
+  );
+  ok(
+    !toolbox.doc.getElementById("tools-chevron-menu-button"),
+    "The size of the screen being too small"
+  );
+
+  for (const id of startingOrder) {
+    ok(getElementByToolId(toolbox, id), `Tab element should exist for ${id}`);
+  }
+}
+
+async function dndToolTab(toolbox, dragTarget, dropTarget, passedTargets = []) {
+  info(`Drag ${dragTarget} to ${dropTarget}`);
+  const dragTargetEl = getElementByToolIdOrExtensionIdOrSelector(
+    toolbox,
+    dragTarget
+  );
+
+  const onReady = dragTargetEl.classList.contains("selected")
+    ? Promise.resolve()
+    : toolbox.once("select");
+  EventUtils.synthesizeMouseAtCenter(
+    dragTargetEl,
+    { type: "mousedown" },
+    dragTargetEl.ownerGlobal
+  );
+  await onReady;
+
+  for (const passedTarget of passedTargets) {
+    info(`Via ${passedTarget}`);
+    const passedTargetEl = getElementByToolIdOrExtensionIdOrSelector(
+      toolbox,
+      passedTarget
+    );
+    EventUtils.synthesizeMouseAtCenter(
+      passedTargetEl,
+      { type: "mousemove" },
+      passedTargetEl.ownerGlobal
+    );
+  }
+
+  if (dropTarget) {
+    const dropTargetEl = getElementByToolIdOrExtensionIdOrSelector(
+      toolbox,
+      dropTarget
+    );
+    EventUtils.synthesizeMouseAtCenter(
+      dropTargetEl,
+      { type: "mousemove" },
+      dropTargetEl.ownerGlobal
+    );
+    EventUtils.synthesizeMouseAtCenter(
+      dropTargetEl,
+      { type: "mouseup" },
+      dropTargetEl.ownerGlobal
+    );
+  } else {
+    const containerEl = toolbox.doc.getElementById("toolbox-container");
+    EventUtils.synthesizeMouse(
+      containerEl,
+      0,
+      0,
+      { type: "mouseout" },
+      containerEl.ownerGlobal
+    );
+  }
+
+  // Wait for updating the preference.
+  await new Promise(resolve => {
+    const onUpdated = () => {
+      Services.prefs.removeObserver("devtools.toolbox.tabsOrder", onUpdated);
+      resolve();
+    };
+
+    Services.prefs.addObserver("devtools.toolbox.tabsOrder", onUpdated);
+  });
+}
+
+function assertToolTabOrder(toolbox, expectedOrder) {
+  info("Check the order of the tabs on the toolbar");
+
+  const tabEls = toolbox.doc.querySelectorAll(".devtools-tab");
+
+  for (let i = 0; i < expectedOrder.length; i++) {
+    const isOrdered =
+      tabEls[i].dataset.id === expectedOrder[i] ||
+      tabEls[i].dataset.extensionId === expectedOrder[i];
+    ok(isOrdered, `The tab[${expectedOrder[i]}] should exist at [${i}]`);
+  }
+}
+
+function assertToolTabSelected(toolbox, dragTarget) {
+  info("Check whether the drag target was selected");
+  const dragTargetEl = getElementByToolIdOrExtensionIdOrSelector(
+    toolbox,
+    dragTarget
+  );
+  ok(
+    dragTargetEl.classList.contains("selected"),
+    "The dragged tool should be selected"
+  );
+}
+
+function assertToolTabPreferenceOrder(expectedOrder) {
+  info("Check the order in DevTools preference for tabs order");
+  is(
+    Services.prefs.getCharPref("devtools.toolbox.tabsOrder"),
+    expectedOrder.join(","),
+    "The preference should be correct"
+  );
+}
+
+function getElementByToolId(toolbox, id) {
+  for (const tabEl of toolbox.doc.querySelectorAll(".devtools-tab")) {
+    if (tabEl.dataset.id === id || tabEl.dataset.extensionId === id) {
+      return tabEl;
+    }
+  }
+
+  return null;
+}
+
+function getElementByToolIdOrExtensionIdOrSelector(toolbox, idOrSelector) {
+  const tabEl = getElementByToolId(toolbox, idOrSelector);
+  return tabEl ? tabEl : toolbox.doc.querySelector(idOrSelector);
+}
+
+/**
+ * Returns a toolbox tab element, even if it's overflowed
+ **/
+function getToolboxTab(doc, toolId) {
+  return (
+    doc.getElementById(`toolbox-tab-${toolId}`) ||
+    doc.getElementById(`tools-chevron-menupopup-${toolId}`)
+  );
+}
+
+function getWindow(toolbox) {
+  return toolbox.topWindow;
+}
+
+async function resizeWindow(toolbox, width, height) {
+  const hostWindow = toolbox.win.parent;
+  const originalWidth = hostWindow.outerWidth;
+  const originalHeight = hostWindow.outerHeight;
+  const toWidth = width || originalWidth;
+  const toHeight = height || originalHeight;
+
+  const onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(toWidth, toHeight);
+  await onResize;
+}
+
+function assertSelectedLocationInDebugger(debuggerPanel, line, column) {
+  const location = debuggerPanel._selectors.getSelectedLocation(
+    debuggerPanel._getState()
+  );
+  is(location.line, line);
+  is(location.column, column);
+}
+
+/**
+ * Open a new tab on about:devtools-toolbox with the provided params object used as
+ * queryString.
+ */
+async function openAboutToolbox(params) {
+  info("Open about:devtools-toolbox");
+  const querystring = new URLSearchParams();
+  Object.keys(params).forEach(x => querystring.append(x, params[x]));
+
+  const tab = await addTab(`about:devtools-toolbox?${querystring}`);
+  const browser = tab.linkedBrowser;
+
+  return {
+    tab,
+    document: browser.contentDocument,
+  };
+}
+
+/**
+ * Load FTL.
+ *
+ * @param {Toolbox} toolbox
+ *        Toolbox instance.
+ * @param {String} path
+ *        Path to the FTL file.
+ */
+function loadFTL(toolbox, path) {
+  const win = toolbox.doc.ownerGlobal;
+
+  if (win.MozXULElement) {
+    win.MozXULElement.insertFTLIfNeeded(path);
+  }
+}
+
+/**
+ * Emit a reload key shortcut from a given toolbox, and wait for the reload to
+ * be completed.
+ *
+ * @param {String} shortcut
+ *        The key shortcut to send, as expected by the devtools shortcuts
+ *        helpers (eg. "CmdOrCtrl+F5").
+ * @param {Toolbox} toolbox
+ *        The toolbox through which the event should be emitted.
+ */
+async function sendToolboxReloadShortcut(shortcut, toolbox) {
+  const promises = [];
+
+  // If we have a jsdebugger panel, wait for it to complete its reload.
+  const jsdebugger = toolbox.getPanel("jsdebugger");
+  if (jsdebugger) {
+    promises.push(jsdebugger.once("reloaded"));
+  }
+
+  // If we have an inspector panel, wait for it to complete its reload.
+  const inspector = toolbox.getPanel("inspector");
+  if (inspector) {
+    promises.push(
+      inspector.once("reloaded"),
+      inspector.once("inspector-updated")
+    );
+  }
+
+  const loadPromise = BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
+  promises.push(loadPromise);
+
+  info("Focus the toolbox window and emit the reload shortcut: " + shortcut);
+  toolbox.win.focus();
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+
+  info("Wait for page and toolbox reload promises");
+  await Promise.all(promises);
+}
+
+function getErrorIcon(toolbox) {
+  return toolbox.doc.querySelector(".toolbox-error");
+}
+
+function getErrorIconCount(toolbox) {
+  const textContent = getErrorIcon(toolbox)?.textContent;
+  try {
+    const int = parseInt(textContent, 10);
+    // 99+ parses to 99, so we check if the parsedInt does not match the textContent.
+    return int.toString() === textContent ? int : textContent;
+  } catch (e) {
+    // In case the parseInt threw, return the actual textContent so the test can display
+    // an easy to debug failure.
+    return textContent;
+  }
+}
diff --git a/devtools/client/framework/test/helper_disable_cache.js b/devtools/client/framework/test/helper_disable_cache.js
new file mode 100644
index 0000000000..a98a68cc9f
--- /dev/null
+++ b/devtools/client/framework/test/helper_disable_cache.js
@@ -0,0 +1,144 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// This file assumes we have head.js globals for the scope where this is loaded.
+/* import-globals-from head.js */
+
+/* exported initTab, checkCacheStateForAllTabs, setDisableCacheCheckboxChecked,
+            finishUp */
+
+// Common code shared by browser_toolbox_options_disable_cache-*.js
+const TEST_URI = URL_ROOT + "browser_toolbox_options_disable_cache.sjs";
+var tabs = [
+  {
+    title: "Tab 0",
+    desc: "Toggles cache on.",
+    startToolbox: true,
+  },
+  {
+    title: "Tab 1",
+    desc: "Toolbox open before Tab 1 toggles cache.",
+    startToolbox: true,
+  },
+  {
+    title: "Tab 2",
+    desc: "Opens toolbox after Tab 1 has toggled cache. Also closes and opens.",
+    startToolbox: false,
+  },
+  {
+    title: "Tab 3",
+    desc: "No toolbox",
+    startToolbox: false,
+  },
+];
+
+async function initTab(tabX, startToolbox) {
+  tabX.tab = await addTab(TEST_URI);
+
+  if (startToolbox) {
+    tabX.toolbox = await gDevTools.showToolboxForTab(tabX.tab, {
+      toolId: "options",
+    });
+  }
+}
+
+async function checkCacheStateForAllTabs(states) {
+  for (let i = 0; i < tabs.length; i++) {
+    const tab = tabs[i];
+    await checkCacheEnabled(tab, states[i]);
+  }
+}
+
+async function checkCacheEnabled(tabX, expected) {
+  gBrowser.selectedTab = tabX.tab;
+
+  await reloadTab(tabX);
+
+  const oldGuid = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    function () {
+      const doc = content.document;
+      const h1 = doc.querySelector("h1");
+      return h1.textContent;
+    }
+  );
+
+  await reloadTab(tabX);
+
+  const guid = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    function () {
+      const doc = content.document;
+      const h1 = doc.querySelector("h1");
+      return h1.textContent;
+    }
+  );
+
+  if (expected) {
+    is(guid, oldGuid, tabX.title + " cache is enabled");
+  } else {
+    isnot(guid, oldGuid, tabX.title + " cache is not enabled");
+  }
+}
+
+async function setDisableCacheCheckboxChecked(tabX, state) {
+  gBrowser.selectedTab = tabX.tab;
+
+  const panel = tabX.toolbox.getCurrentPanel();
+  const cbx = panel.panelDoc.getElementById("devtools-disable-cache");
+
+  if (cbx.checked !== state) {
+    info("Setting disable cache checkbox to " + state + " for " + tabX.title);
+    const onReconfigured = tabX.toolbox.once("cache-reconfigured");
+    cbx.click();
+
+    // We have to wait for the reconfigure request to be finished before reloading
+    // the page.
+    await onReconfigured;
+  }
+}
+
+function reloadTab(tabX) {
+  const browser = gBrowser.selectedBrowser;
+
+  const reloadTabPromise = BrowserTestUtils.browserLoaded(browser).then(
+    function () {
+      info("Reloaded tab " + tabX.title);
+    }
+  );
+
+  info("Reloading tab " + tabX.title);
+  SpecialPowers.spawn(browser, [], () => {
+    content.location.reload(false);
+  });
+
+  return reloadTabPromise;
+}
+
+async function destroyTab(tabX) {
+  const toolbox = gDevTools.getToolboxForTab(tabX.tab);
+
+  let onceDestroyed;
+  if (toolbox) {
+    onceDestroyed = gDevTools.once("toolbox-destroyed");
+  }
+
+  info("Removing tab " + tabX.title);
+  gBrowser.removeTab(tabX.tab);
+  info("Removed tab " + tabX.title);
+
+  info("Waiting for toolbox-destroyed");
+  await onceDestroyed;
+}
+
+async function finishUp() {
+  for (const tab of tabs) {
+    await destroyTab(tab);
+  }
+
+  tabs = null;
+}
diff --git a/devtools/client/framework/test/metrics/browser_metrics.toml b/devtools/client/framework/test/metrics/browser_metrics.toml
new file mode 100644
index 0000000000..3e95c00dfe
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics.toml
@@ -0,0 +1,19 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+]
+
+# Tests counting the numbers of loaded modules have distinct manifest file to execute the test
+# individually, without any other test being executed before or after, as it could impact
+# the number of loaded modules.
+# This manifest file is for all the _other_ tests, where such setup isn't relevant.
+
+["browser_metrics_pool.js"]
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/metrics/browser_metrics_debugger.js b/devtools/client/framework/test/metrics/browser_metrics_debugger.js
new file mode 100644
index 0000000000..4a684e40fc
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics_debugger.js
@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * This test records the number of modules loaded by DevTools, as well as the total count
+ * of characters in those modules, when opening the debugger. These metrics are
+ * retrieved by perfherder via logs.
+ */
+
+const TEST_URL =
+  "data:text/html;charset=UTF-8,<div>Debugger modules load test</div>";
+
+add_task(async function () {
+  // Disable randomly spawning processes during tests
+  await pushPref("dom.ipc.processPrelaunch.enabled", false);
+
+  const toolbox = await openNewTabAndToolbox(TEST_URL, "jsdebugger");
+  const toolboxBrowserLoader = toolbox.win.getBrowserLoaderForWindow();
+
+  // Retrieve the browser loader dedicated to the Debugger.
+  const panel = toolbox.getCurrentPanel();
+  const debuggerLoader = panel.panelWin.getBrowserLoaderForWindow();
+
+  const loaders = [
+    loader.loader,
+    toolboxBrowserLoader.loader,
+    debuggerLoader.loader,
+  ];
+
+  const allowedDupes = [
+    "@loader/unload.js",
+    "@loader/options.js",
+    "resource://devtools/client/shared/vendor/fluent-react.js",
+    "resource://devtools/client/shared/vendor/react-dom.js",
+    "resource://devtools/client/shared/vendor/react.js",
+    "resource://devtools/client/shared/vendor/react-prop-types.js",
+    "resource://devtools/client/shared/vendor/react-dom-factories.js",
+    "resource://devtools/client/shared/vendor/react-redux.js",
+    "resource://devtools/client/shared/vendor/redux.js",
+    "resource://devtools/client/shared/redux/subscriber.js",
+
+    "resource://devtools/client/shared/components/menu/MenuButton.js",
+    "resource://devtools/client/shared/components/menu/MenuItem.js",
+    "resource://devtools/client/shared/components/menu/MenuList.js",
+  ];
+  runDuplicatedModulesTest(loaders, allowedDupes);
+
+  runMetricsTest({
+    filterString: "devtools/client/debugger",
+    loaders,
+    panelName: "debugger",
+  });
+
+  // See Bug 1637793 and Bug 1621337.
+  // Ideally the debugger should only resolve when the worker targets have been
+  // retrieved, which should be fixed by Bug 1621337 or a followup.
+  info("Wait for all pending requests to settle on the DevToolsClient");
+  await toolbox.commands.client.waitForRequestsToSettle();
+});
diff --git a/devtools/client/framework/test/metrics/browser_metrics_debugger.toml b/devtools/client/framework/test/metrics/browser_metrics_debugger.toml
new file mode 100644
index 0000000000..24d651095d
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics_debugger.toml
@@ -0,0 +1,18 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_metrics_debugger.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/metrics/browser_metrics_inspector.js b/devtools/client/framework/test/metrics/browser_metrics_inspector.js
new file mode 100644
index 0000000000..284ef82372
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics_inspector.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * This test records the number of modules loaded by DevTools, as well as the total count
+ * of characters in those modules, when opening the inspector. These metrics are retrieved
+ * by perfherder via logs.
+ */
+
+const TEST_URL =
+  "data:text/html;charset=UTF-8,<div>Inspector modules load test</div>";
+
+add_task(async function () {
+  const toolbox = await openNewTabAndToolbox(TEST_URL, "inspector");
+  const toolboxBrowserLoader = toolbox.win.getBrowserLoaderForWindow();
+
+  // Most panels involve three loaders:
+  // - the global devtools loader
+  // - the browser loader used by the toolbox
+  // - a specific browser loader created for the panel
+  // But the inspector is a specific case, because it reuses the BrowserLoader
+  // of the toolbox to load its react components. This is why we only list
+  // two loaders here.
+  const loaders = [loader.loader, toolboxBrowserLoader.loader];
+
+  runDuplicatedModulesTest(loaders, [
+    "@loader/unload.js",
+    "@loader/options.js",
+    "resource://devtools/client/shared/vendor/react.js",
+    "resource://devtools/client/shared/vendor/react-dom-factories.js",
+    "resource://devtools/client/shared/vendor/react-prop-types.js",
+    "resource://devtools/client/shared/vendor/redux.js",
+    "resource://devtools/client/shared/vendor/fluent-react.js",
+  ]);
+
+  runMetricsTest({
+    filterString: "devtools/client/inspector",
+    loaders,
+    panelName: "inspector",
+  });
+});
diff --git a/devtools/client/framework/test/metrics/browser_metrics_inspector.toml b/devtools/client/framework/test/metrics/browser_metrics_inspector.toml
new file mode 100644
index 0000000000..62e2ec13ce
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics_inspector.toml
@@ -0,0 +1,18 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_metrics_inspector.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/metrics/browser_metrics_netmonitor.js b/devtools/client/framework/test/metrics/browser_metrics_netmonitor.js
new file mode 100644
index 0000000000..07ae01eb95
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics_netmonitor.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * This test records the number of modules loaded by DevTools, as well as the total count
+ * of characters in those modules, when opening the netmonitor. These metrics are
+ * retrieved by perfherder via logs.
+ */
+
+const TEST_URL =
+  "data:text/html;charset=UTF-8,<div>Netmonitor modules load test</div>";
+
+add_task(async function () {
+  const toolbox = await openNewTabAndToolbox(TEST_URL, "netmonitor");
+  const toolboxBrowserLoader = toolbox.win.getBrowserLoaderForWindow();
+
+  // Retrieve the browser loader dedicated to the Netmonitor.
+  const panel = toolbox.getCurrentPanel();
+  const netmonitorLoader = panel.panelWin.getBrowserLoaderForWindow();
+
+  const loaders = [
+    loader.loader,
+    toolboxBrowserLoader.loader,
+    netmonitorLoader.loader,
+  ];
+
+  // Uncomment after Bug 1581068 is fixed, otherwise the test might fail too
+  // frequently.
+
+  // const allowedDupes = [
+  //   "@loader/unload.js",
+  //   "@loader/options.js",
+  //   "resource://devtools/client/netmonitor/src/api.js",
+  //   "resource://devtools/client/shared/vendor/redux.js",
+  //   "resource://devtools/client/netmonitor/src/connector/index.js",
+  //   "resource://devtools/client/netmonitor/src/create-store.js",
+  //   "resource://devtools/client/netmonitor/src/constants.js",
+  //   "resource://devtools/client/netmonitor/src/middleware/batching.js",
+  //   "resource://devtools/client/netmonitor/src/middleware/prefs.js",
+  //   "resource://devtools/client/netmonitor/src/middleware/recording.js",
+  //   "resource://devtools/client/netmonitor/src/selectors/index.js",
+  //   "resource://devtools/client/netmonitor/src/selectors/requests.js",
+  //   "resource://devtools/client/shared/vendor/reselect.js",
+  //   "resource://devtools/client/netmonitor/src/utils/filter-predicates.js",
+  //   "resource://devtools/client/netmonitor/src/utils/filter-text-utils.js",
+  //   "resource://devtools/client/netmonitor/src/utils/format-utils.js",
+  //   "resource://devtools/client/netmonitor/src/utils/l10n.js",
+  //   "resource://devtools/client/netmonitor/src/utils/sort-predicates.js",
+  //   "resource://devtools/client/netmonitor/src/utils/request-utils.js",
+  //   "resource://devtools/client/netmonitor/src/selectors/search.js",
+  //   "resource://devtools/client/netmonitor/src/selectors/timing-markers.js",
+  //   "resource://devtools/client/netmonitor/src/selectors/ui.js",
+  //   "resource://devtools/client/netmonitor/src/selectors/messages.js",
+  //   "resource://devtools/client/netmonitor/src/middleware/throttling.js",
+  //   "resource://devtools/client/shared/components/throttling/actions.js",
+  //   "resource://devtools/client/netmonitor/src/middleware/event-telemetry.js",
+  //   "resource://devtools/client/netmonitor/src/reducers/index.js",
+  //   "resource://devtools/client/netmonitor/src/reducers/batching.js",
+  //   "resource://devtools/client/netmonitor/src/reducers/requests.js",
+  //   "resource://devtools/client/netmonitor/src/reducers/search.js",
+  //   "resource://devtools/client/netmonitor/src/reducers/sort.js",
+  //   "resource://devtools/client/netmonitor/src/reducers/filters.js",
+  //   "resource://devtools/client/netmonitor/src/reducers/timing-markers.js",
+  //   "resource://devtools/client/netmonitor/src/reducers/ui.js",
+  //   "resource://devtools/client/netmonitor/src/reducers/messages.js",
+  //   "resource://devtools/client/shared/components/throttling/reducer.js",
+  //   "resource://devtools/client/netmonitor/src/actions/index.js",
+  //   "resource://devtools/client/netmonitor/src/actions/batching.js",
+  //   "resource://devtools/client/netmonitor/src/actions/filters.js",
+  //   "resource://devtools/client/netmonitor/src/actions/requests.js",
+  //   "resource://devtools/client/netmonitor/src/actions/selection.js",
+  //   "resource://devtools/client/netmonitor/src/actions/sort.js",
+  //   "resource://devtools/client/netmonitor/src/actions/timing-markers.js",
+  //   "resource://devtools/client/netmonitor/src/actions/ui.js",
+  //   "resource://devtools/client/netmonitor/src/actions/messages.js",
+  //   "resource://devtools/client/netmonitor/src/actions/search.js",
+  //   "resource://devtools/client/netmonitor/src/workers/search/index.js",
+  //   "resource://devtools/client/shared/worker-utils",
+  // ];
+  // runDuplicatedModulesTest(loaders, allowedDupes);
+
+  runMetricsTest({
+    filterString: "devtools/client/netmonitor",
+    loaders,
+    panelName: "netmonitor",
+  });
+});
diff --git a/devtools/client/framework/test/metrics/browser_metrics_netmonitor.toml b/devtools/client/framework/test/metrics/browser_metrics_netmonitor.toml
new file mode 100644
index 0000000000..2cef61b319
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics_netmonitor.toml
@@ -0,0 +1,18 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_metrics_netmonitor.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/metrics/browser_metrics_pool.js b/devtools/client/framework/test/metrics/browser_metrics_pool.js
new file mode 100644
index 0000000000..1b2231fef9
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics_pool.js
@@ -0,0 +1,118 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  DevToolsServer,
+} = require("resource://devtools/server/devtools-server.js");
+const { Pool } = require("resource://devtools/shared/protocol.js");
+
+// Test parameters
+const ROOT_POOLS = 100;
+const POOL_DEPTH = 10;
+const POOLS_BY_LEVEL = 100;
+// Number of Pools that will be added once the environment is set up.
+const ADDITIONAL_POOLS = 5000;
+
+add_task(async function () {
+  DevToolsServer.init();
+  DevToolsServer.registerAllActors();
+  const conn = DevToolsServer.connectPipe()._serverConnection;
+
+  info("Add multiple Pools to the connection");
+  const pools = setupTestEnvironment(conn);
+
+  let sumResult = 0;
+
+  info("Test how long it takes to manage new Pools");
+  let start = performance.now();
+  let parentPool = pools[pools.length - 1];
+  const newPools = [];
+  for (let i = 0; i < ADDITIONAL_POOLS; i++) {
+    const pool = new Pool(conn, `${parentPool.label}-${i}`);
+    newPools.push(pool);
+    parentPool.manage(pool);
+  }
+  const manageResult = performance.now() - start;
+  sumResult += manageResult;
+
+  info("Test how long it takes to manage Pools that were already managed");
+  start = performance.now();
+  parentPool = pools[pools.length - 2];
+  for (const pool of newPools) {
+    parentPool.manage(pool);
+  }
+  const manageAlreadyManagedResult = performance.now() - start;
+  sumResult += manageAlreadyManagedResult;
+
+  info("Test how long it takes to unmanage Pools");
+  start = performance.now();
+  for (const pool of newPools) {
+    parentPool.unmanage(pool);
+  }
+  const unmanageResult = performance.now() - start;
+  sumResult += unmanageResult;
+
+  info("Test how long it takes to destroy all the Pools");
+  start = performance.now();
+  conn.onTransportClosed();
+  const destroyResult = performance.now() - start;
+  sumResult += destroyResult;
+
+  const PERFHERDER_DATA = {
+    framework: {
+      name: "devtools",
+    },
+    suites: [
+      {
+        name: "server.pool",
+        value: sumResult,
+        subtests: [
+          {
+            name: "server.pool.manage",
+            value: manageResult,
+          },
+          {
+            name: "server.pool.manage-already-managed",
+            value: manageAlreadyManagedResult,
+          },
+          {
+            name: "server.pool.unmanage",
+            value: unmanageResult,
+          },
+          {
+            name: "server.pool.destroy",
+            value: destroyResult,
+          },
+        ],
+      },
+    ],
+  };
+  info("PERFHERDER_DATA: " + JSON.stringify(PERFHERDER_DATA));
+});
+
+// Some Pool operations might be impacted by the number of existing pools in a connection,
+// so it's important to have a sizeable number of Pools in order to assert Pool performances.
+function setupTestEnvironment(conn) {
+  const pools = [];
+  for (let i = 0; i < ROOT_POOLS; i++) {
+    const rootPool = new Pool(conn, "root-pool-" + i);
+    pools.push(rootPool);
+    let parent = rootPool;
+    for (let j = 0; j < POOL_DEPTH; j++) {
+      const intermediatePool = new Pool(conn, `pool-${i}-${j}`);
+      pools.push(intermediatePool);
+      parent.manage(intermediatePool);
+
+      for (let k = 0; k < POOLS_BY_LEVEL; k++) {
+        const pool = new Pool(conn, `pool-${i}-${j}-${k}`);
+        pools.push(pool);
+        intermediatePool.manage(pool);
+      }
+
+      parent = intermediatePool;
+    }
+  }
+  return pools;
+}
diff --git a/devtools/client/framework/test/metrics/browser_metrics_webconsole.js b/devtools/client/framework/test/metrics/browser_metrics_webconsole.js
new file mode 100644
index 0000000000..94e24291c8
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics_webconsole.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * This test records the number of modules loaded by DevTools, as well as the total count
+ * of characters in those modules, when opening the webconsole. These metrics are
+ * retrieved by perfherder via logs.
+ */
+
+const TEST_URL =
+  "data:text/html;charset=UTF-8,<div>Webconsole modules load test</div>";
+
+add_task(async function () {
+  const toolbox = await openNewTabAndToolbox(TEST_URL, "webconsole");
+  const toolboxBrowserLoader = toolbox.win.getBrowserLoaderForWindow();
+
+  // Retrieve the browser loader dedicated to the WebConsole.
+  const panel = toolbox.getCurrentPanel();
+  const webconsoleLoader = panel._frameWindow.getBrowserLoaderForWindow();
+
+  const loaders = [
+    loader.loader,
+    toolboxBrowserLoader.loader,
+    webconsoleLoader.loader,
+  ];
+
+  const allowedDupes = [
+    "@loader/unload.js",
+    "@loader/options.js",
+    "resource://devtools/client/webconsole/constants.js",
+    "resource://devtools/client/webconsole/utils.js",
+    "resource://devtools/client/webconsole/utils/messages.js",
+    "resource://devtools/client/webconsole/utils/l10n.js",
+    "resource://devtools/client/netmonitor/src/utils/request-utils.js",
+    "resource://devtools/client/webconsole/types.js",
+    "resource://devtools/client/shared/components/menu/MenuButton.js",
+    "resource://devtools/client/shared/components/menu/MenuItem.js",
+    "resource://devtools/client/shared/components/menu/MenuList.js",
+    "resource://devtools/client/shared/vendor/fluent-react.js",
+    "resource://devtools/client/shared/vendor/react.js",
+    "resource://devtools/client/shared/vendor/react-dom.js",
+    "resource://devtools/client/shared/vendor/react-prop-types.js",
+    "resource://devtools/client/shared/vendor/react-dom-factories.js",
+    "resource://devtools/client/shared/vendor/redux.js",
+    "resource://devtools/client/shared/redux/middleware/thunk.js",
+  ];
+  runDuplicatedModulesTest(loaders, allowedDupes);
+
+  runMetricsTest({
+    filterString: "devtools/client/webconsole",
+    loaders,
+    panelName: "webconsole",
+  });
+});
diff --git a/devtools/client/framework/test/metrics/browser_metrics_webconsole.toml b/devtools/client/framework/test/metrics/browser_metrics_webconsole.toml
new file mode 100644
index 0000000000..e7c8831ad0
--- /dev/null
+++ b/devtools/client/framework/test/metrics/browser_metrics_webconsole.toml
@@ -0,0 +1,18 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+support-files = [
+  "head.js",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+]
+
+# Each metrics tests is loaded in a separate .ini file. This way the test is executed
+# individually, without any other test being executed before or after.
+
+["browser_metrics_webconsole.js"]
+run-if = ["os == 'linux'"] # Results should be platform agnostic - only run on linux64-opt
+skip-if = [
+  "debug",
+  "asan",
+]
diff --git a/devtools/client/framework/test/metrics/head.js b/devtools/client/framework/test/metrics/head.js
new file mode 100644
index 0000000000..0246190b31
--- /dev/null
+++ b/devtools/client/framework/test/metrics/head.js
@@ -0,0 +1,171 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// shared-head.js handles imports, constants, and utility functions
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js",
+  this
+);
+
+// So that PERFHERDER data can be extracted from the logs.
+SimpleTest.requestCompleteLog();
+
+function getFilteredModules(filters, loaders) {
+  let modules = [];
+  for (const l of loaders) {
+    const loaderModulesMap = l.modules;
+    const loaderModulesPaths = Object.keys(loaderModulesMap);
+    modules = modules.concat(loaderModulesPaths);
+  }
+  return modules.filter(url => filters.some(filter => url.includes(filter)));
+}
+
+function countCharsInModules(modules) {
+  return modules.reduce((sum, uri) => {
+    try {
+      return sum + require("raw!" + uri).length;
+    } catch (e) {
+      // Ignore failures
+      return sum;
+    }
+  }, 0);
+}
+
+/**
+ * Record module loading data.
+ *
+ * @param {Object}
+ * - filterString {String} path to use to filter modules specific to the current panel
+ * - loaders {Array} Array of Loaders to check for modules
+ * - panelName {String} reused in identifiers for perfherder data
+ */
+function runMetricsTest({ filterString, loaders, panelName }) {
+  const allModules = getFilteredModules([""], loaders);
+  const panelModules = getFilteredModules([filterString], loaders);
+  const vendoredModules = getFilteredModules(
+    ["devtools/client/debugger/dist/vendors", "devtools/client/shared/vendor/"],
+    loaders
+  );
+
+  const allModulesCount = allModules.length;
+  const panelModulesCount = panelModules.length;
+  const vendoredModulesCount = vendoredModules.length;
+
+  const allModulesChars = countCharsInModules(allModules);
+  const panelModulesChars = countCharsInModules(panelModules);
+  const vendoredModulesChars = countCharsInModules(vendoredModules);
+
+  const PERFHERDER_DATA = {
+    framework: {
+      name: "devtools",
+    },
+    suites: [
+      {
+        name: panelName + "-metrics",
+        value: allModulesChars,
+        subtests: [
+          {
+            name: panelName + "-modules",
+            value: panelModulesCount,
+          },
+          {
+            name: panelName + "-chars",
+            value: panelModulesChars,
+          },
+          {
+            name: "all-modules",
+            value: allModulesCount,
+          },
+          {
+            name: "all-chars",
+            value: allModulesChars,
+          },
+          {
+            name: "vendored-modules",
+            value: vendoredModulesCount,
+          },
+          {
+            name: "vendored-chars",
+            value: vendoredModulesChars,
+          },
+        ],
+      },
+    ],
+  };
+  info("PERFHERDER_DATA: " + JSON.stringify(PERFHERDER_DATA));
+
+  // Simply check that we found valid values.
+  ok(
+    allModulesCount > panelModulesCount && panelModulesCount > 0,
+    "Successfully recorded module count for " + panelName
+  );
+  ok(
+    allModulesChars > panelModulesChars && panelModulesChars > 0,
+    "Successfully recorded char count for " + panelName
+  );
+
+  // Easy way to check how many vendored chars we have for a given panel.
+  const percentage = ((100 * vendoredModulesChars) / allModulesChars).toFixed(
+    1
+  );
+  info(`Percentage of vendored chars for ${panelName}: ${percentage}%`);
+}
+
+function getDuplicatedModules(loaders) {
+  const allModules = getFilteredModules([""], loaders);
+
+  const uniqueModules = new Set();
+  const duplicatedModules = new Set();
+  for (const mod of allModules) {
+    if (uniqueModules.has(mod)) {
+      duplicatedModules.add(mod);
+    }
+
+    uniqueModules.add(mod);
+  }
+
+  return duplicatedModules;
+}
+
+/**
+ * Check that modules are only loaded once in a given set of loaders.
+ * Panels might load the same module twice by mistake if they are both using
+ * a BrowserLoader and the regular DevTools Loader.
+ *
+ * @param {Array} loaders
+ *        Array of Loader instances.
+ * @param {Array} allowedDupes
+ *        Array of Strings which are paths to known duplicated modules.
+ *        The test will also fail if a allowedDupesed module is not found in the
+ *        duplicated modules.
+ */
+function runDuplicatedModulesTest(loaders, allowedDupes) {
+  const duplicatedModules = getDuplicatedModules(loaders);
+
+  // Remove allowedDupes entries, and fail if an allowed entry is not found.
+  for (const mod of allowedDupes) {
+    const deleted = duplicatedModules.delete(mod);
+    if (!deleted) {
+      ok(
+        false,
+        "module not found in the duplicated modules: [" +
+          mod +
+          "]. The allowedDupes array should be updated to remove it."
+      );
+    }
+  }
+
+  // Prepare a log string with the paths of all duplicated modules.
+  let duplicatedModulesLog = "";
+  for (const mod of duplicatedModules) {
+    duplicatedModulesLog += `  [duplicated module] ${mod}\n`;
+  }
+
+  // Check that duplicatedModules Set is empty.
+  is(
+    duplicatedModules.size,
+    0,
+    "Duplicated module load detected. List of duplicated modules:\n" +
+      duplicatedModulesLog
+  );
+}
diff --git a/devtools/client/framework/test/node/.eslintrc.js b/devtools/client/framework/test/node/.eslintrc.js
new file mode 100644
index 0000000000..5bb10e35bf
--- /dev/null
+++ b/devtools/client/framework/test/node/.eslintrc.js
@@ -0,0 +1,22 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+module.exports = {
+  env: {
+    jest: true,
+  },
+  overrides: [
+    {
+      files: [
+        // Exempt all test files that explicitly want to test http urls from 'no-insecure-url' rule.
+        // Gradually change test cases such that this list gets smaller and more precisely. Bug 1758951
+        "components/debug-target-info.test.js",
+      ],
+      rules: {
+        "@microsoft/sdl/no-insecure-url": "off",
+      },
+    },
+  ],
+};
diff --git a/devtools/client/framework/test/node/README.md b/devtools/client/framework/test/node/README.md
new file mode 100644
index 0000000000..9fb86edfc5
--- /dev/null
+++ b/devtools/client/framework/test/node/README.md
@@ -0,0 +1,22 @@
+# Jest Tests for devtools/client/framework
+
+## About
+
+DevTools React components can be tested using [jest](https://jestjs.io/). Jest allows to test our UI components in isolation and complement our end to end mochitests.
+
+## Run locally
+
+We use yarn for dependency management. To run the tests locally:
+```
+  cd devtools/client/shared/framework/test/node
+  yarn && yarn test
+```
+
+## Run on try
+
+The tests run on try on linux64 platforms. The complete name of the try job is `devtools-tests`. In treeherder, they will show up as `node(devtools)`.
+
+Adding the tests to a try push depends on the try selector you are using.
+- try fuzzy: look for the job named `source-test-node-devtools-tests`
+
+The configuration file for try can be found at `taskcluster/ci/source-test/node.yml`
diff --git a/devtools/client/framework/test/node/babel.config.js b/devtools/client/framework/test/node/babel.config.js
new file mode 100644
index 0000000000..90cffba9c3
--- /dev/null
+++ b/devtools/client/framework/test/node/babel.config.js
@@ -0,0 +1,13 @@
+/* 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";
+
+module.exports = {
+  plugins: [
+    "@babel/plugin-proposal-async-generator-functions",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+  ],
+};
diff --git a/devtools/client/framework/test/node/components/__snapshots__/debug-target-info.test.js.snap b/devtools/client/framework/test/node/components/__snapshots__/debug-target-info.test.js.snap
new file mode 100644
index 0000000000..0f6b1c9bab
--- /dev/null
+++ b/devtools/client/framework/test/node/components/__snapshots__/debug-target-info.test.js.snap
@@ -0,0 +1,586 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DebugTargetInfo component Connection info renders the expected snapshot for USB Release target 1`] = `
+<header
+  className="debug-target-info qa-debug-target-info"
+>
+  <span
+    className="iconized-label qa-connection-info"
+  >
+    <img
+      alt="usb icon"
+      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
+    />
+    toolbox.debugTargetInfo.connection.usb
+  </span>
+  <span
+    className="iconized-label qa-runtime-info"
+  >
+    <img
+      className="channel-icon qa-runtime-icon"
+      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
+    />
+    <b
+      className="devtools-ellipsis-text"
+    >
+      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    >
+      usbDeviceName
+    </span>
+  </span>
+  <span
+    className="iconized-label debug-target-title"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.tab"
+      src="chrome://devtools/skin/images/globe.svg"
+    />
+    <b
+      className="devtools-ellipsis-text qa-target-title"
+    >
+      Test Tab Name
+    </b>
+  </span>
+  <div
+    className="debug-target-navigation"
+  >
+    <button
+      className="iconized-label navigation-button qa-back-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.back"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.back"
+        src="chrome://browser/skin/back.svg"
+      />
+    </button>
+    <button
+      className="iconized-label navigation-button qa-forward-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.forward"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.forward"
+        src="chrome://browser/skin/forward.svg"
+      />
+    </button>
+    <button
+      className="iconized-label navigation-button qa-reload-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.reload"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.reload"
+        src="chrome://global/skin/icons/reload.svg"
+      />
+    </button>
+  </div>
+  <span
+    className="debug-target-url"
+  >
+    <form
+      className="debug-target-url-form"
+      onSubmit={[Function]}
+    >
+      <input
+        className="devtools-textinput debug-target-url-input"
+        defaultValue="http://some.target/url"
+        onChange={[Function]}
+        onFocus={[Function]}
+      />
+    </form>
+  </span>
+</header>
+`;
+
+exports[`DebugTargetInfo component Target icon renders the expected snapshot for a process target 1`] = `
+<header
+  className="debug-target-info qa-debug-target-info"
+>
+  <span
+    className="iconized-label qa-connection-info"
+  >
+    <img
+      alt="usb icon"
+      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
+    />
+    toolbox.debugTargetInfo.connection.usb
+  </span>
+  <span
+    className="iconized-label qa-runtime-info"
+  >
+    <img
+      className="channel-icon qa-runtime-icon"
+      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
+    />
+    <b
+      className="devtools-ellipsis-text"
+    >
+      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    >
+      usbDeviceName
+    </span>
+  </span>
+  <span
+    className="iconized-label debug-target-title"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.process"
+      src="chrome://devtools/skin/images/settings.svg"
+    />
+    <b
+      className="devtools-ellipsis-text qa-target-title"
+    >
+      Test Tab Name
+    </b>
+  </span>
+  <span
+    className="debug-target-url"
+  >
+    <span
+      className="debug-target-url-readonly devtools-ellipsis-text"
+    >
+      http://some.target/url
+    </span>
+  </span>
+</header>
+`;
+
+exports[`DebugTargetInfo component Target icon renders the expected snapshot for a tab target 1`] = `
+<header
+  className="debug-target-info qa-debug-target-info"
+>
+  <span
+    className="iconized-label qa-connection-info"
+  >
+    <img
+      alt="usb icon"
+      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
+    />
+    toolbox.debugTargetInfo.connection.usb
+  </span>
+  <span
+    className="iconized-label qa-runtime-info"
+  >
+    <img
+      className="channel-icon qa-runtime-icon"
+      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
+    />
+    <b
+      className="devtools-ellipsis-text"
+    >
+      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    >
+      usbDeviceName
+    </span>
+  </span>
+  <span
+    className="iconized-label debug-target-title"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.tab"
+      src="chrome://devtools/skin/images/globe.svg"
+    />
+    <b
+      className="devtools-ellipsis-text qa-target-title"
+    >
+      Test Tab Name
+    </b>
+  </span>
+  <div
+    className="debug-target-navigation"
+  >
+    <button
+      className="iconized-label navigation-button qa-back-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.back"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.back"
+        src="chrome://browser/skin/back.svg"
+      />
+    </button>
+    <button
+      className="iconized-label navigation-button qa-forward-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.forward"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.forward"
+        src="chrome://browser/skin/forward.svg"
+      />
+    </button>
+    <button
+      className="iconized-label navigation-button qa-reload-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.reload"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.reload"
+        src="chrome://global/skin/icons/reload.svg"
+      />
+    </button>
+  </div>
+  <span
+    className="debug-target-url"
+  >
+    <form
+      className="debug-target-url-form"
+      onSubmit={[Function]}
+    >
+      <input
+        className="devtools-textinput debug-target-url-input"
+        defaultValue="http://some.target/url"
+        onChange={[Function]}
+        onFocus={[Function]}
+      />
+    </form>
+  </span>
+</header>
+`;
+
+exports[`DebugTargetInfo component Target icon renders the expected snapshot for a worker target 1`] = `
+<header
+  className="debug-target-info qa-debug-target-info"
+>
+  <span
+    className="iconized-label qa-connection-info"
+  >
+    <img
+      alt="usb icon"
+      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
+    />
+    toolbox.debugTargetInfo.connection.usb
+  </span>
+  <span
+    className="iconized-label qa-runtime-info"
+  >
+    <img
+      className="channel-icon qa-runtime-icon"
+      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
+    />
+    <b
+      className="devtools-ellipsis-text"
+    >
+      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    >
+      usbDeviceName
+    </span>
+  </span>
+  <span
+    className="iconized-label debug-target-title"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.worker"
+      src="chrome://devtools/skin/images/debugging-workers.svg"
+    />
+    <b
+      className="devtools-ellipsis-text qa-target-title"
+    >
+      Test Tab Name
+    </b>
+  </span>
+  <span
+    className="debug-target-url"
+  >
+    <span
+      className="debug-target-url-readonly devtools-ellipsis-text"
+    >
+      http://some.target/url
+    </span>
+  </span>
+</header>
+`;
+
+exports[`DebugTargetInfo component Target icon renders the expected snapshot for an extension target 1`] = `
+<header
+  className="debug-target-info qa-debug-target-info"
+>
+  <span
+    className="iconized-label qa-connection-info"
+  >
+    <img
+      alt="usb icon"
+      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
+    />
+    toolbox.debugTargetInfo.connection.usb
+  </span>
+  <span
+    className="iconized-label qa-runtime-info"
+  >
+    <img
+      className="channel-icon qa-runtime-icon"
+      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
+    />
+    <b
+      className="devtools-ellipsis-text"
+    >
+      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    >
+      usbDeviceName
+    </span>
+  </span>
+  <span
+    className="iconized-label debug-target-title"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.extension"
+      src="chrome://devtools/skin/images/debugging-addons.svg"
+    />
+    <b
+      className="devtools-ellipsis-text qa-target-title"
+    >
+      Test Tab Name
+    </b>
+  </span>
+  <div
+    className="debug-target-navigation"
+  >
+    <button
+      className="iconized-label navigation-button qa-reload-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.reload"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.reload"
+        src="chrome://global/skin/icons/reload.svg"
+      />
+    </button>
+  </div>
+  <span
+    className="debug-target-url"
+  >
+    <span
+      className="debug-target-url-readonly devtools-ellipsis-text"
+    >
+      http://some.target/url
+    </span>
+  </span>
+</header>
+`;
+
+exports[`DebugTargetInfo component Target icon renders the expected snapshot for an local extension target 1`] = `
+<header
+  className="debug-target-info qa-debug-target-info"
+>
+  <span
+    className="iconized-label debug-target-title"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.extension"
+      src="chrome://devtools/skin/images/debugging-addons.svg"
+    />
+    <b
+      className="devtools-ellipsis-text qa-target-title"
+    >
+      Test Tab Name
+    </b>
+  </span>
+  <div
+    className="debug-target-navigation"
+  >
+    <button
+      className="iconized-label navigation-button qa-reload-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.reload"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.reload"
+        src="chrome://global/skin/icons/reload.svg"
+      />
+    </button>
+  </div>
+  <span
+    className="debug-target-url"
+  >
+    <span
+      className="debug-target-url-readonly devtools-ellipsis-text"
+    >
+      http://some.target/url
+    </span>
+  </span>
+  <button
+    className="toolbox-always-on-top"
+  />
+</header>
+`;
+
+exports[`DebugTargetInfo component Target title renders the expected snapshot for This Firefox target 1`] = `
+<header
+  className="debug-target-info qa-debug-target-info"
+>
+  <span
+    className="iconized-label qa-runtime-info"
+  >
+    <img
+      className="channel-icon qa-runtime-icon"
+      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
+    />
+    <b
+      className="devtools-ellipsis-text"
+    >
+      toolbox.debugTargetInfo.runtimeLabel.thisRuntime-brandShorterName-1.0.0
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    />
+  </span>
+  <span
+    className="iconized-label debug-target-title"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.tab"
+      src="chrome://devtools/skin/images/globe.svg"
+    />
+    <b
+      className="devtools-ellipsis-text qa-target-title"
+    >
+      Test Tab Name
+    </b>
+  </span>
+  <div
+    className="debug-target-navigation"
+  >
+    <button
+      className="iconized-label navigation-button qa-back-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.back"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.back"
+        src="chrome://browser/skin/back.svg"
+      />
+    </button>
+    <button
+      className="iconized-label navigation-button qa-forward-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.forward"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.forward"
+        src="chrome://browser/skin/forward.svg"
+      />
+    </button>
+    <button
+      className="iconized-label navigation-button qa-reload-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.reload"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.reload"
+        src="chrome://global/skin/icons/reload.svg"
+      />
+    </button>
+  </div>
+  <span
+    className="debug-target-url"
+  >
+    <form
+      className="debug-target-url-form"
+      onSubmit={[Function]}
+    >
+      <input
+        className="devtools-textinput debug-target-url-input"
+        defaultValue="http://some.target/url"
+        onChange={[Function]}
+        onFocus={[Function]}
+      />
+    </form>
+  </span>
+</header>
+`;
+
+exports[`DebugTargetInfo component Target title renders the expected snapshot for a Toolbox with an unnamed target 1`] = `
+<header
+  className="debug-target-info qa-debug-target-info"
+>
+  <span
+    className="iconized-label qa-runtime-info"
+  >
+    <img
+      className="channel-icon qa-runtime-icon"
+      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
+    />
+    <b
+      className="devtools-ellipsis-text"
+    >
+      toolbox.debugTargetInfo.runtimeLabel.thisRuntime-brandShorterName-1.0.0
+    </b>
+    <span
+      className="devtools-ellipsis-text"
+    />
+  </span>
+  <span
+    className="iconized-label debug-target-title"
+  >
+    <img
+      alt="toolbox.debugTargetInfo.targetType.tab"
+      src="chrome://devtools/skin/images/globe.svg"
+    />
+  </span>
+  <div
+    className="debug-target-navigation"
+  >
+    <button
+      className="iconized-label navigation-button qa-back-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.back"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.back"
+        src="chrome://browser/skin/back.svg"
+      />
+    </button>
+    <button
+      className="iconized-label navigation-button qa-forward-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.forward"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.forward"
+        src="chrome://browser/skin/forward.svg"
+      />
+    </button>
+    <button
+      className="iconized-label navigation-button qa-reload-button"
+      onClick={[Function]}
+      title="toolbox.debugTargetInfo.reload"
+    >
+      <img
+        alt="toolbox.debugTargetInfo.reload"
+        src="chrome://global/skin/icons/reload.svg"
+      />
+    </button>
+  </div>
+  <span
+    className="debug-target-url"
+  >
+    <form
+      className="debug-target-url-form"
+      onSubmit={[Function]}
+    >
+      <input
+        className="devtools-textinput debug-target-url-input"
+        defaultValue="http://some.target/without/a/name"
+        onChange={[Function]}
+        onFocus={[Function]}
+      />
+    </form>
+  </span>
+</header>
+`;
diff --git a/devtools/client/framework/test/node/components/debug-target-info.test.js b/devtools/client/framework/test/node/components/debug-target-info.test.js
new file mode 100644
index 0000000000..45a04007ad
--- /dev/null
+++ b/devtools/client/framework/test/node/components/debug-target-info.test.js
@@ -0,0 +1,319 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the DebugTargetInfo component.
+ */
+
+const renderer = require("react-test-renderer");
+const React = require("resource://devtools/client/shared/vendor/react.js");
+const DebugTargetInfo = React.createFactory(
+  require("resource://devtools/client/framework/components/DebugTargetInfo.js")
+);
+const {
+  CONNECTION_TYPES,
+} = require("resource://devtools/client/shared/remote-debugging/constants.js");
+const DESCRIPTOR_TYPES = require("resource://devtools/client/fronts/descriptors/descriptor-types.js");
+
+/**
+ * Stub for the L10N property expected by the DebugTargetInfo component.
+ */
+const stubL10N = {
+  getStr: id => id,
+  getFormatStr: (id, ...args) => [id, ...args].join("-"),
+};
+
+const findByClassName = (testInstance, className) => {
+  return testInstance.findAll(node => {
+    return node.props.className && node.props.className.includes(className);
+  });
+};
+
+function buildProps(base, extraDebugTargetData) {
+  const props = Object.assign({}, base);
+  Object.assign(props.debugTargetData, extraDebugTargetData);
+  return props;
+}
+
+const TEST_TOOLBOX = {
+  target: {
+    name: "Test Tab Name",
+    url: "http://some.target/url",
+    targetForm: {
+      traits: {
+        navigation: true,
+      },
+    },
+    getTrait: trait => {
+      return TEST_TOOLBOX.target.targetForm.traits[trait];
+    },
+  },
+  doc: {},
+};
+
+const TEST_TOOLBOX_NO_NAME = {
+  target: {
+    url: "http://some.target/without/a/name",
+    targetForm: {
+      traits: {
+        navigation: true,
+      },
+    },
+    getTrait: trait => {
+      return TEST_TOOLBOX.target.targetForm.traits[trait];
+    },
+  },
+  doc: {},
+};
+
+const USB_DEVICE_DESCRIPTION = {
+  deviceName: "usbDeviceName",
+  icon: "chrome://devtools/skin/images/aboutdebugging-firefox-release.svg",
+  name: "usbRuntimeBrandName",
+  version: "1.0.0",
+};
+
+const THIS_FIREFOX_DEVICE_DESCRIPTION = {
+  icon: "chrome://devtools/skin/images/aboutdebugging-firefox-release.svg",
+  version: "1.0.0",
+  name: "thisFirefoxRuntimeBrandName",
+};
+
+const USB_TARGET_INFO = {
+  debugTargetData: {
+    connectionType: CONNECTION_TYPES.USB,
+    runtimeInfo: USB_DEVICE_DESCRIPTION,
+    descriptorType: DESCRIPTOR_TYPES.TAB,
+  },
+  toolbox: TEST_TOOLBOX,
+  L10N: stubL10N,
+};
+
+const THIS_FIREFOX_TARGET_INFO = {
+  debugTargetData: {
+    connectionType: CONNECTION_TYPES.THIS_FIREFOX,
+    runtimeInfo: THIS_FIREFOX_DEVICE_DESCRIPTION,
+    descriptorType: DESCRIPTOR_TYPES.TAB,
+  },
+  toolbox: TEST_TOOLBOX,
+  L10N: stubL10N,
+};
+
+const THIS_FIREFOX_NO_NAME_TARGET_INFO = {
+  debugTargetData: {
+    connectionType: CONNECTION_TYPES.THIS_FIREFOX,
+    runtimeInfo: THIS_FIREFOX_DEVICE_DESCRIPTION,
+    descriptorType: DESCRIPTOR_TYPES.TAB,
+  },
+  toolbox: TEST_TOOLBOX_NO_NAME,
+  L10N: stubL10N,
+};
+
+describe("DebugTargetInfo component", () => {
+  describe("Connection info", () => {
+    it("displays connection info for USB Release target", () => {
+      const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO));
+      expect(
+        findByClassName(component.root, "qa-connection-info").length
+      ).toEqual(1);
+    });
+
+    it("renders the expected snapshot for USB Release target", () => {
+      const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO));
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("hides the connection info for This Firefox target", () => {
+      const component = renderer.create(
+        DebugTargetInfo(THIS_FIREFOX_TARGET_INFO)
+      );
+      expect(
+        findByClassName(component.root, "qa-connection-info").length
+      ).toEqual(0);
+    });
+  });
+
+  describe("Target title", () => {
+    it("displays the target title if the target of the Toolbox has a name", () => {
+      const component = renderer.create(
+        DebugTargetInfo(THIS_FIREFOX_TARGET_INFO)
+      );
+      expect(findByClassName(component.root, "qa-target-title").length).toEqual(
+        1
+      );
+    });
+
+    it("renders the expected snapshot for This Firefox target", () => {
+      const component = renderer.create(
+        DebugTargetInfo(THIS_FIREFOX_TARGET_INFO)
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("doesn't display the target title if the target of the Toolbox has no name", () => {
+      const component = renderer.create(
+        DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO)
+      );
+      expect(findByClassName(component.root, "qa-target-title").length).toEqual(
+        0
+      );
+    });
+
+    it("renders the expected snapshot for a Toolbox with an unnamed target", () => {
+      const component = renderer.create(
+        DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO)
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe("Target icon", () => {
+    it("renders the expected snapshot for a tab target", () => {
+      const props = buildProps(USB_TARGET_INFO, {
+        descriptorType: DESCRIPTOR_TYPES.TAB,
+      });
+      const component = renderer.create(DebugTargetInfo(props));
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("renders the expected snapshot for a worker target", () => {
+      const props = buildProps(USB_TARGET_INFO, {
+        descriptorType: DESCRIPTOR_TYPES.WORKER,
+      });
+      const component = renderer.create(DebugTargetInfo(props));
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("renders the expected snapshot for an extension target", () => {
+      const props = buildProps(USB_TARGET_INFO, {
+        descriptorType: DESCRIPTOR_TYPES.EXTENSION,
+      });
+      const component = renderer.create(DebugTargetInfo(props));
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("renders the expected snapshot for an local extension target", () => {
+      const props = buildProps(THIS_FIREFOX_TARGET_INFO, {
+        descriptorType: DESCRIPTOR_TYPES.EXTENSION,
+      });
+      const component = renderer.create(DebugTargetInfo(props));
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("renders the expected snapshot for a process target", () => {
+      const props = buildProps(USB_TARGET_INFO, {
+        descriptorType: DESCRIPTOR_TYPES.PROCESS,
+      });
+      const component = renderer.create(DebugTargetInfo(props));
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe("Always on top button", () => {
+    it("displays always on top button for local webextension target", () => {
+      const component = renderer.create(
+        DebugTargetInfo(
+          buildProps(THIS_FIREFOX_TARGET_INFO, {
+            descriptorType: DESCRIPTOR_TYPES.EXTENSION,
+          })
+        )
+      );
+      expect(
+        findByClassName(component.root, "toolbox-always-on-top").length
+      ).toEqual(1);
+    });
+
+    it(`does not display "Always on top" button for remote webextension toolbox`, () => {
+      const component = renderer.create(
+        DebugTargetInfo(
+          buildProps(USB_TARGET_INFO, {
+            descriptorType: DESCRIPTOR_TYPES.EXTENSION,
+          })
+        )
+      );
+      expect(
+        findByClassName(component.root, "toolbox-always-on-top").length
+      ).toEqual(0);
+    });
+
+    it(`does not display "Always on top" button for local tab toolbox`, () => {
+      const component = renderer.create(
+        DebugTargetInfo(
+          buildProps(THIS_FIREFOX_TARGET_INFO, {
+            descriptorType: DESCRIPTOR_TYPES.TAB,
+          })
+        )
+      );
+      expect(
+        findByClassName(component.root, "toolbox-always-on-top").length
+      ).toEqual(0);
+    });
+
+    it(`does not display "Always on top" button for remote tab toolbox`, () => {
+      const component = renderer.create(
+        DebugTargetInfo(
+          buildProps(USB_TARGET_INFO, {
+            descriptorType: DESCRIPTOR_TYPES.TAB,
+          })
+        )
+      );
+      expect(
+        findByClassName(component.root, "toolbox-always-on-top").length
+      ).toEqual(0);
+    });
+
+    it(`does not display "Always on top" button for local worker toolbox`, () => {
+      const component = renderer.create(
+        DebugTargetInfo(
+          buildProps(THIS_FIREFOX_TARGET_INFO, {
+            descriptorType: DESCRIPTOR_TYPES.WORKER,
+          })
+        )
+      );
+      expect(
+        findByClassName(component.root, "toolbox-always-on-top").length
+      ).toEqual(0);
+    });
+
+    it(`does not display "Always on top" button for remote worker toolbox`, () => {
+      const component = renderer.create(
+        DebugTargetInfo(
+          buildProps(USB_TARGET_INFO, {
+            descriptorType: DESCRIPTOR_TYPES.WORKER,
+          })
+        )
+      );
+      expect(
+        findByClassName(component.root, "toolbox-always-on-top").length
+      ).toEqual(0);
+    });
+
+    it(`does not display "Always on top" button for local process toolbox`, () => {
+      const component = renderer.create(
+        DebugTargetInfo(
+          buildProps(THIS_FIREFOX_TARGET_INFO, {
+            descriptorType: DESCRIPTOR_TYPES.PROCESS,
+          })
+        )
+      );
+      expect(
+        findByClassName(component.root, "toolbox-always-on-top").length
+      ).toEqual(0);
+    });
+
+    it(`does not display "Always on top" button for remote process toolbox`, () => {
+      const component = renderer.create(
+        DebugTargetInfo(
+          buildProps(USB_TARGET_INFO, {
+            descriptorType: DESCRIPTOR_TYPES.PROCESS,
+          })
+        )
+      );
+      expect(
+        findByClassName(component.root, "toolbox-always-on-top").length
+      ).toEqual(0);
+    });
+  });
+});
diff --git a/devtools/client/framework/test/node/jest.config.js b/devtools/client/framework/test/node/jest.config.js
new file mode 100644
index 0000000000..0d2124593d
--- /dev/null
+++ b/devtools/client/framework/test/node/jest.config.js
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* global __dirname */
+
+const sharedJestConfig = require(`${__dirname}/../../../shared/test-helpers/shared-jest.config`);
+
+module.exports = {
+  ...sharedJestConfig,
+  setupFiles: ["<rootDir>setup.js"],
+};
diff --git a/devtools/client/framework/test/node/package.json b/devtools/client/framework/test/node/package.json
new file mode 100644
index 0000000000..37237a8c57
--- /dev/null
+++ b/devtools/client/framework/test/node/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "devtools-client-framework-tests",
+  "license": "MPL-2.0",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=8.9.4"
+  },
+  "scripts": {
+    "test": "jest",
+    "test-ci": "jest --json"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-async-generator-functions": "^7.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+    "babel-jest": "^25.1.0",
+    "jest": "^25.1.0",
+    "react-test-renderer": "16.4.1",
+    "react": "16.4.1",
+    "react-dom": "16.4.1"
+  }
+}
diff --git a/devtools/client/framework/test/node/setup.js b/devtools/client/framework/test/node/setup.js
new file mode 100644
index 0000000000..fd686f0cc0
--- /dev/null
+++ b/devtools/client/framework/test/node/setup.js
@@ -0,0 +1,10 @@
+/* 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 {
+  setMocksInGlobal,
+} = require("resource://devtools/client/shared/test-helpers/shared-node-helpers.js");
+setMocksInGlobal();
diff --git a/devtools/client/framework/test/node/store/targets.test.js b/devtools/client/framework/test/node/store/targets.test.js
new file mode 100644
index 0000000000..5eb8d2b5ef
--- /dev/null
+++ b/devtools/client/framework/test/node/store/targets.test.js
@@ -0,0 +1,142 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for targets management on the toolbox store.
+ */
+
+const createStore = require("resource://devtools/client/shared/redux/create-store.js");
+const reducer = require("resource://devtools/shared/commands/target/reducers/targets.js");
+const actions = require("resource://devtools/shared/commands/target/actions/targets.js");
+const {
+  getSelectedTarget,
+  getToolboxTargets,
+} = require("resource://devtools/shared/commands/target/selectors/targets.js");
+
+describe("Toolbox store - targets", () => {
+  describe("registerTarget", () => {
+    it("adds the target to the list", () => {
+      const store = createStore(reducer);
+
+      const targetFront1 = {
+        actorID: "target/1",
+      };
+
+      store.dispatch(actions.registerTarget(targetFront1));
+
+      let targets = getToolboxTargets(store.getState());
+      expect(targets.length).toEqual(1);
+      expect(targets[0].actorID).toEqual("target/1");
+
+      const targetFront2 = {
+        actorID: "target/2",
+      };
+
+      store.dispatch(actions.registerTarget(targetFront2));
+
+      targets = getToolboxTargets(store.getState());
+      expect(targets.length).toEqual(2);
+      expect(targets[0].actorID).toEqual("target/1");
+      expect(targets[1].actorID).toEqual("target/2");
+    });
+  });
+
+  describe("selectTarget", () => {
+    it("updates the selected property when the target is known", () => {
+      const store = createStore(reducer);
+      const targetFront1 = {
+        actorID: "target/1",
+      };
+      store.dispatch(actions.registerTarget(targetFront1));
+      store.dispatch(actions.selectTarget("target/1"));
+      expect(getSelectedTarget(store.getState()).actorID).toBe("target/1");
+    });
+
+    it("does not update the selected property when the target is unknown", () => {
+      const store = createStore(reducer);
+      const targetFront1 = {
+        actorID: "target/1",
+      };
+      store.dispatch(actions.registerTarget(targetFront1));
+      store.dispatch(actions.selectTarget("target/1"));
+      expect(getSelectedTarget(store.getState()).actorID).toBe("target/1");
+
+      store.dispatch(actions.selectTarget("target/unknown"));
+      expect(getSelectedTarget(store.getState()).actorID).toBe("target/1");
+    });
+
+    it("does not update the state when the target is already selected", () => {
+      const store = createStore(reducer);
+      const targetFront1 = {
+        actorID: "target/1",
+      };
+      store.dispatch(actions.registerTarget(targetFront1));
+      store.dispatch(actions.selectTarget("target/1"));
+
+      const state = store.getState();
+      store.dispatch(actions.selectTarget("target/1"));
+      expect(store.getState()).toStrictEqual(state);
+    });
+  });
+
+  describe("unregisterTarget", () => {
+    it("removes the target from the list", () => {
+      const store = createStore(reducer);
+
+      const targetFront1 = {
+        actorID: "target/1",
+      };
+      const targetFront2 = {
+        actorID: "target/2",
+      };
+
+      store.dispatch(actions.registerTarget(targetFront1));
+      store.dispatch(actions.registerTarget(targetFront2));
+
+      let targets = getToolboxTargets(store.getState());
+      expect(targets.length).toEqual(2);
+
+      store.dispatch(actions.unregisterTarget(targetFront1));
+      targets = getToolboxTargets(store.getState());
+      expect(targets.length).toEqual(1);
+      expect(targets[0].actorID).toEqual("target/2");
+
+      store.dispatch(actions.unregisterTarget(targetFront2));
+      expect(getToolboxTargets(store.getState()).length).toEqual(0);
+    });
+
+    it("does not update the state when the target is unknown", () => {
+      const store = createStore(reducer);
+
+      const targetFront1 = {
+        actorID: "target/1",
+      };
+      const targetFront2 = {
+        actorID: "target/unknown",
+      };
+
+      store.dispatch(actions.registerTarget(targetFront1));
+
+      const state = store.getState();
+      store.dispatch(actions.unregisterTarget(targetFront2));
+      expect(store.getState()).toStrictEqual(state);
+    });
+
+    it("resets the selected property when it was the selected target", () => {
+      const store = createStore(reducer);
+
+      const targetFront1 = {
+        actorID: "target/1",
+      };
+
+      store.dispatch(actions.registerTarget(targetFront1));
+      store.dispatch(actions.selectTarget("target/1"));
+      expect(getSelectedTarget(store.getState()).actorID).toBe("target/1");
+
+      store.dispatch(actions.unregisterTarget(targetFront1));
+      expect(getSelectedTarget(store.getState())).toBe(null);
+    });
+  });
+});
diff --git a/devtools/client/framework/test/node/yarn.lock b/devtools/client/framework/test/node/yarn.lock
new file mode 100644
index 0000000000..2a71218b83
--- /dev/null
+++ b/devtools/client/framework/test/node/yarn.lock
@@ -0,0 +1,3144 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
+  dependencies:
+    "@babel/highlight" "^7.8.3"
+
+"@babel/core@^7.1.0", "@babel/core@^7.7.5":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.0"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helpers" "^7.9.0"
+    "@babel/parser" "^7.9.0"
+    "@babel/template" "^7.8.6"
+    "@babel/traverse" "^7.9.0"
+    "@babel/types" "^7.9.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.9.0":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.4.tgz#12441e90c3b3c4159cdecf312075bf1a8ce2dbce"
+  dependencies:
+    "@babel/types" "^7.9.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
+  dependencies:
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-function-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-get-function-arity@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
+  dependencies:
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-member-expression-to-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
+  dependencies:
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-module-imports@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
+  dependencies:
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-module-transforms@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
+  dependencies:
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.6"
+    "@babel/helper-simple-access" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/template" "^7.8.6"
+    "@babel/types" "^7.9.0"
+    lodash "^4.17.13"
+
+"@babel/helper-optimise-call-expression@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
+  dependencies:
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
+
+"@babel/helper-remap-async-to-generator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz#273c600d8b9bf5006142c1e35887d555c12edd86"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-wrap-function" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-replace-supers@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz#5ada744fd5ad73203bf1d67459a27dcba67effc8"
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.8.3"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/traverse" "^7.8.6"
+    "@babel/types" "^7.8.6"
+
+"@babel/helper-simple-access@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
+  dependencies:
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-split-export-declaration@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
+  dependencies:
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-validator-identifier@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.0.tgz#ad53562a7fc29b3b9a91bbf7d10397fd146346ed"
+
+"@babel/helper-wrap-function@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610"
+  dependencies:
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/helpers@^7.9.0":
+  version "7.9.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.2.tgz#b42a81a811f1e7313b88cba8adc66b3d9ae6c09f"
+  dependencies:
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.9.0"
+    "@babel/types" "^7.9.0"
+
+"@babel/highlight@^7.8.3":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.9.0.tgz#4e9b45ccb82b79607271b2979ad82c7b68163079"
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.9.0"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.7.5", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
+
+"@babel/plugin-proposal-async-generator-functions@^7.2.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-remap-async-to-generator" "^7.8.3"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@babel/plugin-proposal-optional-chaining@^7.8.3":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz#31db16b154c39d6b8a645292472b98394c292a58"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
+"@babel/plugin-syntax-async-generators@^7.8.0":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.0.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-object-rest-spread@^7.0.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/template@^7.7.4", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/parser" "^7.8.6"
+    "@babel/types" "^7.8.6"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.7.4", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.0.tgz#d3882c2830e513f4fe4cec9fe76ea1cc78747892"
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.0"
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/parser" "^7.9.0"
+    "@babel/types" "^7.9.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
+"@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.0.tgz#00b064c3df83ad32b2dbf5ff07312b15c7f1efb5"
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.9.0"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+
+"@cnakazawa/watch@^1.0.3":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
+  dependencies:
+    exec-sh "^0.3.2"
+    minimist "^1.2.0"
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b"
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
+
+"@jest/console@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-25.1.0.tgz#1fc765d44a1e11aec5029c08e798246bd37075ab"
+  dependencies:
+    "@jest/source-map" "^25.1.0"
+    chalk "^3.0.0"
+    jest-util "^25.1.0"
+    slash "^3.0.0"
+
+"@jest/core@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-25.1.0.tgz#3d4634fc3348bb2d7532915d67781cdac0869e47"
+  dependencies:
+    "@jest/console" "^25.1.0"
+    "@jest/reporters" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.3"
+    jest-changed-files "^25.1.0"
+    jest-config "^25.1.0"
+    jest-haste-map "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-resolve-dependencies "^25.1.0"
+    jest-runner "^25.1.0"
+    jest-runtime "^25.1.0"
+    jest-snapshot "^25.1.0"
+    jest-util "^25.1.0"
+    jest-validate "^25.1.0"
+    jest-watcher "^25.1.0"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    realpath-native "^1.1.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-25.1.0.tgz#4a97f64770c9d075f5d2b662b5169207f0a3f787"
+  dependencies:
+    "@jest/fake-timers" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    jest-mock "^25.1.0"
+
+"@jest/fake-timers@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-25.1.0.tgz#a1e0eff51ffdbb13ee81f35b52e0c1c11a350ce8"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-util "^25.1.0"
+    lolex "^5.0.0"
+
+"@jest/reporters@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-25.1.0.tgz#9178ecf136c48f125674ac328f82ddea46e482b0"
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^25.1.0"
+    "@jest/environment" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.0"
+    jest-haste-map "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-runtime "^25.1.0"
+    jest-util "^25.1.0"
+    jest-worker "^25.1.0"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^3.1.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^4.0.1"
+  optionalDependencies:
+    node-notifier "^6.0.0"
+
+"@jest/source-map@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-25.1.0.tgz#b012e6c469ccdbc379413f5c1b1ffb7ba7034fb0"
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.3"
+    source-map "^0.6.0"
+
+"@jest/test-result@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-25.1.0.tgz#847af2972c1df9822a8200457e64be4ff62821f7"
+  dependencies:
+    "@jest/console" "^25.1.0"
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-25.1.0.tgz#4df47208542f0065f356fcdb80026e3c042851ab"
+  dependencies:
+    "@jest/test-result" "^25.1.0"
+    jest-haste-map "^25.1.0"
+    jest-runner "^25.1.0"
+    jest-runtime "^25.1.0"
+
+"@jest/transform@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-25.1.0.tgz#221f354f512b4628d88ce776d5b9e601028ea9da"
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^25.1.0"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^3.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.3"
+    jest-haste-map "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-util "^25.1.0"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    realpath-native "^1.1.0"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
+"@jest/types@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.1.0.tgz#b26831916f0d7c381e11dbb5e103a72aed1b4395"
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+
+"@sinonjs/commons@^1.7.0":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.1.tgz#da5fd19a5f71177a53778073978873964f49acf1"
+  dependencies:
+    type-detect "4.0.8"
+
+"@types/babel__core@^7.1.0":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.6.tgz#16ff42a5ae203c9af1c6e190ed1f30f83207b610"
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.1.tgz#4901767b397e8711aeb99df8d396d7ba7b7f0e04"
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.0.2.tgz#4ff63d6b52eddac1de7b975a5223ed32ecea9307"
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.0.9"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.9.tgz#be82fab304b141c3eee81a4ce3b034d0eba1590a"
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+    "@types/istanbul-lib-report" "*"
+
+"@types/stack-utils@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+
+"@types/yargs-parser@*":
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
+
+"@types/yargs@^15.0.0":
+  version "15.0.4"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.4.tgz#7e5d0f8ca25e9d5849f2ea443cf7c402decd8299"
+  dependencies:
+    "@types/yargs-parser" "*"
+
+abab@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
+
+acorn-globals@^4.3.2:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
+  dependencies:
+    acorn "^6.0.1"
+    acorn-walk "^6.0.1"
+
+acorn-walk@^6.0.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.1.tgz#d363b66f5fac5f018ff9c3a1e7b6f8e310cc3913"
+
+acorn@^6.0.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f"
+
+acorn@^7.1.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
+
+ajv@^6.5.5:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1"
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-escapes@^4.2.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
+  dependencies:
+    type-fest "^0.11.0"
+
+ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+anymatch@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+
+arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+
+array-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+asn1@~0.2.3:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  dependencies:
+    safer-buffer "~2.1.0"
+
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+
+astral-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+atob@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
+
+babel-jest@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-25.1.0.tgz#206093ac380a4b78c4404a05b3277391278f80fb"
+  dependencies:
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    "@types/babel__core" "^7.1.0"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^25.1.0"
+    chalk "^3.0.0"
+    slash "^3.0.0"
+
+babel-plugin-istanbul@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^4.0.0"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-25.1.0.tgz#fb62d7b3b53eb36c97d1bc7fec2072f9bd115981"
+  dependencies:
+    "@types/babel__traverse" "^7.0.6"
+
+babel-preset-jest@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-25.1.0.tgz#d0aebfebb2177a21cde710996fce8486d34f1d33"
+  dependencies:
+    "@babel/plugin-syntax-bigint" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    babel-plugin-jest-hoist "^25.1.0"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+braces@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  dependencies:
+    fill-range "^7.0.1"
+
+browser-process-hrtime@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
+
+browser-resolve@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  dependencies:
+    resolve "1.1.7"
+
+bser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+
+camelcase@^5.0.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+
+capture-exit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
+  dependencies:
+    rsvp "^4.8.4"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+chalk@^2.0.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.0.tgz#150ee634ac3650b71d9c985eb7f608942334feb1"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+
+combined-stream@^1.0.6, combined-stream@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+component-emitter@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+convert-source-map@^1.4.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  dependencies:
+    safe-buffer "~5.1.1"
+
+convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  dependencies:
+    safe-buffer "~5.1.1"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-util-is@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+
+cross-spawn@^6.0.0:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+cross-spawn@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cssom@^0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+
+cssstyle@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.2.0.tgz#e4c44debccd6b7911ed617a4395e5754bba59992"
+  dependencies:
+    cssom "~0.3.6"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  dependencies:
+    assert-plus "^1.0.0"
+
+data-urls@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
+  dependencies:
+    abab "^2.0.0"
+    whatwg-mimetype "^2.2.0"
+    whatwg-url "^7.0.0"
+
+debug@^2.2.0, debug@^2.3.3:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@^4.1.0, debug@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  dependencies:
+    ms "^2.1.1"
+
+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+define-properties@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  dependencies:
+    object-keys "^1.0.12"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+
+diff-sequences@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.1.0.tgz#fd29a46f1c913fd66c22645dc75bffbe43051f32"
+
+domexception@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
+  dependencies:
+    webidl-conversions "^4.0.2"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  dependencies:
+    jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  dependencies:
+    once "^1.4.0"
+
+es-abstract@^1.5.1:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
+  dependencies:
+    es-to-primitive "^1.2.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    is-callable "^1.1.4"
+    is-regex "^1.0.4"
+    object-keys "^1.0.12"
+
+es-to-primitive@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+escodegen@^1.11.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.1.tgz#ba01d0c8278b5e95a9a45350142026659027a457"
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+esprima@^4.0.0, esprima@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+
+estraverse@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+exec-sh@^0.3.2:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
+
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+execa@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    p-finally "^2.0.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expect@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-25.1.0.tgz#7e8d7b06a53f7d66ec927278db3304254ee683ee"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    ansi-styles "^4.0.0"
+    jest-get-type "^25.1.0"
+    jest-matcher-utils "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-regex-util "^25.1.0"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
+fb-watchman@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
+  dependencies:
+    bser "^2.0.0"
+
+fbjs@^0.8.16:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^4.0.0, find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+for-in@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+
+form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.6"
+    mime-types "^2.1.12"
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  dependencies:
+    map-cache "^0.2.2"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+gensync@^1.0.0-beta.1:
+  version "1.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
+
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+
+get-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  dependencies:
+    pump "^3.0.0"
+
+get-stream@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
+  dependencies:
+    pump "^3.0.0"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.1.4:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+
+graceful-fs@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
+  dependencies:
+    ajv "^6.5.5"
+    har-schema "^2.0.0"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+
+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.1, has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  dependencies:
+    function-bind "^1.1.1"
+
+html-encoding-sniffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
+html-escaper@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.1.tgz#beed86b5d2b921e92533aa11bce6d8e3b583dee7"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+human-signals@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
+
+iconv-lite@0.4.24, iconv-lite@~0.4.13:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+import-local@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ip-regex@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
+is-callable@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  dependencies:
+    ci-info "^2.0.0"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  dependencies:
+    kind-of "^6.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+
+is-number@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+
+is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
+
+is-stream@^1.0.1, is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
+
+is-symbol@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
+  dependencies:
+    has-symbols "^1.0.0"
+
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+
+is-wsl@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
+
+isarray@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+istanbul-lib-coverage@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
+
+istanbul-lib-instrument@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.1.tgz#61f13ac2c96cfefb076fe7131156cc05907874e6"
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@babel/parser" "^7.7.5"
+    "@babel/template" "^7.7.4"
+    "@babel/traverse" "^7.7.4"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.0.tgz#d4d16d035db99581b6194e119bbf36c963c5eb70"
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+jest-changed-files@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-25.1.0.tgz#73dae9a7d9949fdfa5c278438ce8f2ff3ec78131"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    execa "^3.2.0"
+    throat "^5.0.0"
+
+jest-cli@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-25.1.0.tgz#75f0b09cf6c4f39360906bf78d580be1048e4372"
+  dependencies:
+    "@jest/core" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    exit "^0.1.2"
+    import-local "^3.0.2"
+    is-ci "^2.0.0"
+    jest-config "^25.1.0"
+    jest-util "^25.1.0"
+    jest-validate "^25.1.0"
+    prompts "^2.0.1"
+    realpath-native "^1.1.0"
+    yargs "^15.0.0"
+
+jest-config@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-25.1.0.tgz#d114e4778c045d3ef239452213b7ad3ec1cbea90"
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    babel-jest "^25.1.0"
+    chalk "^3.0.0"
+    glob "^7.1.1"
+    jest-environment-jsdom "^25.1.0"
+    jest-environment-node "^25.1.0"
+    jest-get-type "^25.1.0"
+    jest-jasmine2 "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-util "^25.1.0"
+    jest-validate "^25.1.0"
+    micromatch "^4.0.2"
+    pretty-format "^25.1.0"
+    realpath-native "^1.1.0"
+
+jest-diff@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.1.0.tgz#58b827e63edea1bc80c1de952b80cec9ac50e1ad"
+  dependencies:
+    chalk "^3.0.0"
+    diff-sequences "^25.1.0"
+    jest-get-type "^25.1.0"
+    pretty-format "^25.1.0"
+
+jest-docblock@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-25.1.0.tgz#0f44bea3d6ca6dfc38373d465b347c8818eccb64"
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-25.1.0.tgz#a6b260992bdf451c2d64a0ccbb3ac25e9b44c26a"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    jest-get-type "^25.1.0"
+    jest-util "^25.1.0"
+    pretty-format "^25.1.0"
+
+jest-environment-jsdom@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-25.1.0.tgz#6777ab8b3e90fd076801efd3bff8e98694ab43c3"
+  dependencies:
+    "@jest/environment" "^25.1.0"
+    "@jest/fake-timers" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-util "^25.1.0"
+    jsdom "^15.1.1"
+
+jest-environment-node@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-25.1.0.tgz#797bd89b378cf0bd794dc8e3dca6ef21126776db"
+  dependencies:
+    "@jest/environment" "^25.1.0"
+    "@jest/fake-timers" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-util "^25.1.0"
+
+jest-get-type@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.1.0.tgz#1cfe5fc34f148dc3a8a3b7275f6b9ce9e2e8a876"
+
+jest-haste-map@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-25.1.0.tgz#ae12163d284f19906260aa51fd405b5b2e5a4ad3"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.3"
+    jest-serializer "^25.1.0"
+    jest-util "^25.1.0"
+    jest-worker "^25.1.0"
+    micromatch "^4.0.2"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.1.2"
+
+jest-jasmine2@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-25.1.0.tgz#681b59158a430f08d5d0c1cce4f01353e4b48137"
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^25.1.0"
+    "@jest/source-map" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    co "^4.6.0"
+    expect "^25.1.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^25.1.0"
+    jest-matcher-utils "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-runtime "^25.1.0"
+    jest-snapshot "^25.1.0"
+    jest-util "^25.1.0"
+    pretty-format "^25.1.0"
+    throat "^5.0.0"
+
+jest-leak-detector@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-25.1.0.tgz#ed6872d15aa1c72c0732d01bd073dacc7c38b5c6"
+  dependencies:
+    jest-get-type "^25.1.0"
+    pretty-format "^25.1.0"
+
+jest-matcher-utils@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-25.1.0.tgz#fa5996c45c7193a3c24e73066fc14acdee020220"
+  dependencies:
+    chalk "^3.0.0"
+    jest-diff "^25.1.0"
+    jest-get-type "^25.1.0"
+    pretty-format "^25.1.0"
+
+jest-message-util@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.1.0.tgz#702a9a5cb05c144b9aa73f06e17faa219389845e"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^3.0.0"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^1.0.1"
+
+jest-mock@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-25.1.0.tgz#411d549e1b326b7350b2e97303a64715c28615fd"
+  dependencies:
+    "@jest/types" "^25.1.0"
+
+jest-pnp-resolver@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
+
+jest-regex-util@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.1.0.tgz#efaf75914267741838e01de24da07b2192d16d87"
+
+jest-resolve-dependencies@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-25.1.0.tgz#8a1789ec64eb6aaa77fd579a1066a783437e70d2"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-snapshot "^25.1.0"
+
+jest-resolve@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-25.1.0.tgz#23d8b6a4892362baf2662877c66aa241fa2eaea3"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    browser-resolve "^1.11.3"
+    chalk "^3.0.0"
+    jest-pnp-resolver "^1.2.1"
+    realpath-native "^1.1.0"
+
+jest-runner@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-25.1.0.tgz#fef433a4d42c89ab0a6b6b268e4a4fbe6b26e812"
+  dependencies:
+    "@jest/console" "^25.1.0"
+    "@jest/environment" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.3"
+    jest-config "^25.1.0"
+    jest-docblock "^25.1.0"
+    jest-haste-map "^25.1.0"
+    jest-jasmine2 "^25.1.0"
+    jest-leak-detector "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-runtime "^25.1.0"
+    jest-util "^25.1.0"
+    jest-worker "^25.1.0"
+    source-map-support "^0.5.6"
+    throat "^5.0.0"
+
+jest-runtime@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-25.1.0.tgz#02683218f2f95aad0f2ec1c9cdb28c1dc0ec0314"
+  dependencies:
+    "@jest/console" "^25.1.0"
+    "@jest/environment" "^25.1.0"
+    "@jest/source-map" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.3"
+    jest-config "^25.1.0"
+    jest-haste-map "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-snapshot "^25.1.0"
+    jest-util "^25.1.0"
+    jest-validate "^25.1.0"
+    realpath-native "^1.1.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.0.0"
+
+jest-serializer@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-25.1.0.tgz#73096ba90e07d19dec4a0c1dd89c355e2f129e5d"
+
+jest-snapshot@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-25.1.0.tgz#d5880bd4b31faea100454608e15f8d77b9d221d9"
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    expect "^25.1.0"
+    jest-diff "^25.1.0"
+    jest-get-type "^25.1.0"
+    jest-matcher-utils "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-resolve "^25.1.0"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^25.1.0"
+    semver "^7.1.1"
+
+jest-util@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.1.0.tgz#7bc56f7b2abd534910e9fa252692f50624c897d9"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    is-ci "^2.0.0"
+    mkdirp "^0.5.1"
+
+jest-validate@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-25.1.0.tgz#1469fa19f627bb0a9a98e289f3e9ab6a668c732a"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    camelcase "^5.3.1"
+    chalk "^3.0.0"
+    jest-get-type "^25.1.0"
+    leven "^3.1.0"
+    pretty-format "^25.1.0"
+
+jest-watcher@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-25.1.0.tgz#97cb4a937f676f64c9fad2d07b824c56808e9806"
+  dependencies:
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
+    jest-util "^25.1.0"
+    string-length "^3.1.0"
+
+jest-worker@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.1.0.tgz#75d038bad6fdf58eba0d2ec1835856c497e3907a"
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+jest@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-25.1.0.tgz#b85ef1ddba2fdb00d295deebbd13567106d35be9"
+  dependencies:
+    "@jest/core" "^25.1.0"
+    import-local "^3.0.2"
+    jest-cli "^25.1.0"
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+
+js-yaml@^3.13.1:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+jsdom@^15.1.1:
+  version "15.2.1"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.2.1.tgz#d2feb1aef7183f86be521b8c6833ff5296d07ec5"
+  dependencies:
+    abab "^2.0.0"
+    acorn "^7.1.0"
+    acorn-globals "^4.3.2"
+    array-equal "^1.0.0"
+    cssom "^0.4.1"
+    cssstyle "^2.0.0"
+    data-urls "^1.1.0"
+    domexception "^1.0.1"
+    escodegen "^1.11.1"
+    html-encoding-sniffer "^1.0.2"
+    nwsapi "^2.2.0"
+    parse5 "5.1.0"
+    pn "^1.1.0"
+    request "^2.88.0"
+    request-promise-native "^1.0.7"
+    saxes "^3.1.9"
+    symbol-tree "^3.2.2"
+    tough-cookie "^3.0.1"
+    w3c-hr-time "^1.0.1"
+    w3c-xmlserializer "^1.1.2"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^7.0.0"
+    ws "^7.0.0"
+    xml-name-validator "^3.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+
+json5@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.2.tgz#43ef1f0af9835dd624751a6b7fa48874fb2d608e"
+  dependencies:
+    minimist "^1.2.5"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  dependencies:
+    p-locate "^4.1.0"
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+
+lodash@^4.17.13, lodash@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+
+lolex@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+make-dir@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.0.2.tgz#04a1acbf22221e1d6ef43559f43e05a90dbb4392"
+  dependencies:
+    semver "^6.0.0"
+
+makeerror@1.0.x:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
+  dependencies:
+    tmpl "1.0.x"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  dependencies:
+    object-visit "^1.0.0"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+
+micromatch@^3.1.4:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+micromatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
+mime-db@~1.38.0:
+  version "1.38.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.38.0.tgz#1a2aab16da9eb167b49c6e4df2d9c68d63d8e2ad"
+
+mime-types@^2.1.12, mime-types@~2.1.19:
+  version "2.1.22"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.22.tgz#fe6b355a190926ab7698c9a0556a11199b2199bd"
+  dependencies:
+    mime-db "~1.38.0"
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@^1.1.1, minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+
+mixin-deep@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+mkdirp@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+ms@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+
+node-modules-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
+
+node-notifier@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-6.0.0.tgz#cea319e06baa16deec8ce5cd7f133c4a46b68e12"
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^2.1.1"
+    semver "^6.3.0"
+    shellwords "^0.1.1"
+    which "^1.3.1"
+
+normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+npm-run-path@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  dependencies:
+    path-key "^3.0.0"
+
+nwsapi@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
+
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+
+object-assign@^4.1.0, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-keys@^1.0.12:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.0.tgz#11bd22348dd2e096a045ab06f6c85bcc340fa032"
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  dependencies:
+    isobject "^3.0.0"
+
+object.getownpropertydescriptors@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  dependencies:
+    isobject "^3.0.1"
+
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
+  dependencies:
+    mimic-fn "^2.1.0"
+
+optionator@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+p-each-series@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-finally@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
+
+p-limit@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.2.tgz#61279b67721f5287aa1c13a9a7fbbc48c9291b1e"
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  dependencies:
+    p-limit "^2.2.0"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+
+parse5@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+path-key@^2.0.0, path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+
+path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
+picomatch@^2.0.4, picomatch@^2.0.5:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+
+pirates@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+  dependencies:
+    node-modules-regexp "^1.0.0"
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  dependencies:
+    find-up "^4.0.0"
+
+pn@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+pretty-format@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.1.0.tgz#ed869bdaec1356fc5ae45de045e2c8ec7b07b0c8"
+  dependencies:
+    "@jest/types" "^25.1.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
+prompts@^2.0.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.2.tgz#480572d89ecf39566d2bd3fe2c9fccb7c4c0b068"
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.4"
+
+prop-types@^15.6.0:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
+psl@^1.1.28:
+  version "1.1.31"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+
+qs@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+
+react-dom@16.4.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+react-is@^16.12.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+
+react-is@^16.4.1, react-is@^16.8.1:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
+
+react-test-renderer@16.4.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"
+  dependencies:
+    fbjs "^0.8.16"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+    react-is "^16.4.1"
+
+react@16.4.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+realpath-native@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+  dependencies:
+    util.promisify "^1.0.0"
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+
+repeat-element@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
+
+repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request-promise-core@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
+  dependencies:
+    lodash "^4.17.15"
+
+request-promise-native@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
+  dependencies:
+    request-promise-core "1.1.3"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
+
+request@^2.88.0:
+  version "2.88.2"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  dependencies:
+    resolve-from "^5.0.0"
+
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^1.3.2:
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
+  dependencies:
+    path-parse "^1.0.6"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+
+rimraf@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  dependencies:
+    glob "^7.1.3"
+
+rsvp@^4.8.4:
+  version "4.8.5"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  dependencies:
+    ret "~0.1.10"
+
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+sane@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
+  dependencies:
+    "@cnakazawa/watch" "^1.0.3"
+    anymatch "^2.0.0"
+    capture-exit "^2.0.0"
+    exec-sh "^0.3.2"
+    execa "^1.0.0"
+    fb-watchman "^2.0.0"
+    micromatch "^3.1.4"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+
+saxes@^3.1.9:
+  version "3.1.11"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
+  dependencies:
+    xmlchars "^2.1.1"
+
+semver@^5.4.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+
+semver@^5.5.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
+
+semver@^6.0.0, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+
+semver@^7.1.1:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.3.tgz#e4345ce73071c53f336445cfc19efb1c311df2a6"
+
+set-blocking@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-value@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.1"
+    to-object-path "^0.3.0"
+
+set-value@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+
+shellwords@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sisteransi@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+source-map-resolve@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
+  dependencies:
+    atob "^2.1.1"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.5.6:
+  version "0.5.11"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.11.tgz#efac2ce0800355d026326a0ca23e162aeac9a4e2"
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+
+source-map@^0.5.0, source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  dependencies:
+    extend-shallow "^3.0.0"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
+sshpk@^1.7.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+stack-utils@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+stealthy-require@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+
+string-length@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-3.1.0.tgz#107ef8c23456e187a8abd4a61162ff4ac6e25837"
+  dependencies:
+    astral-regex "^1.0.0"
+    strip-ansi "^5.2.0"
+
+string-width@^4.1.0, string-width@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
+strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  dependencies:
+    ansi-regex "^5.0.0"
+
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-hyperlinks@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47"
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
+symbol-tree@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
+throat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
+
+tmpl@1.0.x:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  dependencies:
+    is-number "^7.0.0"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+tough-cookie@^2.3.3, tough-cookie@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  dependencies:
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
+tough-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
+  dependencies:
+    ip-regex "^2.1.0"
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  dependencies:
+    punycode "^2.1.0"
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+
+type-fest@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  dependencies:
+    is-typedarray "^1.0.0"
+
+ua-parser-js@^0.7.18:
+  version "0.7.19"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
+
+union-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^0.4.3"
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+uri-js@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+
+util.promisify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
+
+uuid@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+
+v8-to-istanbul@^4.0.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-4.1.2.tgz#387d173be5383dbec209d21af033dcb892e3ac82"
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+w3c-hr-time@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
+  dependencies:
+    browser-process-hrtime "^0.1.2"
+
+w3c-xmlserializer@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
+  dependencies:
+    domexception "^1.0.1"
+    webidl-conversions "^4.0.2"
+    xml-name-validator "^3.0.0"
+
+walker@^1.0.7, walker@~1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
+  dependencies:
+    makeerror "1.0.x"
+
+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+
+whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  dependencies:
+    iconv-lite "0.4.24"
+
+whatwg-fetch@>=0.10.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
+
+whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+
+whatwg-url@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
+which@^1.2.9, which@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  dependencies:
+    isexe "^2.0.0"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  dependencies:
+    isexe "^2.0.0"
+
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write-file-atomic@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+ws@^7.0.0:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.3.tgz#a5411e1fb04d5ed0efee76d26d5c46d830c39b46"
+
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+
+xmlchars@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+
+y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+
+yargs-parser@^18.1.1:
+  version "18.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.1.tgz#bf7407b915427fc760fcbbccc6c82b4f0ffcbd37"
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs@^15.0.0:
+  version "15.3.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b"
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.1"
diff --git a/devtools/client/framework/test/reload/.eslintrc.js b/devtools/client/framework/test/reload/.eslintrc.js
new file mode 100644
index 0000000000..562c45bc96
--- /dev/null
+++ b/devtools/client/framework/test/reload/.eslintrc.js
@@ -0,0 +1,18 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+module.exports = {
+  globals: {
+    __dirname: true,
+  },
+  overrides: [
+    {
+      files: ["**/*.js"],
+      rules: {
+        "no-unused-vars": "off",
+      },
+    },
+  ],
+};
diff --git a/devtools/client/framework/test/reload/README.md b/devtools/client/framework/test/reload/README.md
new file mode 100644
index 0000000000..e8f71af039
--- /dev/null
+++ b/devtools/client/framework/test/reload/README.md
@@ -0,0 +1,4 @@
+# STEPS TO REBUILD THE BUNDLES FOR ALL VERSIONS
+
+1. yarn install
+2. yarn webpack
diff --git a/devtools/client/framework/test/reload/package.json b/devtools/client/framework/test/reload/package.json
new file mode 100644
index 0000000000..a2c06ff28f
--- /dev/null
+++ b/devtools/client/framework/test/reload/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "code-reload",
+  "version": "1.0.0",
+  "description": "Examples folders for testing sourcemps on code reload",
+  "main": "index.js",
+  "author": "Hubert B Manilla <hmanilla@mozilla.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
+  }
+}
diff --git a/devtools/client/framework/test/reload/v1/code_bundle_reload.js b/devtools/client/framework/test/reload/v1/code_bundle_reload.js
new file mode 100644
index 0000000000..bed88f7565
--- /dev/null
+++ b/devtools/client/framework/test/reload/v1/code_bundle_reload.js
@@ -0,0 +1,19 @@
+/******/ (() => {
+  // webpackBootstrap
+  /******/ "use strict";
+  var __webpack_exports__ = {};
+  /*!*****************************!*\
+  !*** ./v1/code_reload_1.js ***!
+  \*****************************/
+  /* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+  function f() {
+    console.log("The first version of the script");
+  }
+
+  f();
+
+  /******/
+})();
+//# sourceMappingURL=code_bundle_reload.js.map
diff --git a/devtools/client/framework/test/reload/v1/code_bundle_reload.js.map b/devtools/client/framework/test/reload/v1/code_bundle_reload.js.map
new file mode 100644
index 0000000000..d41c415820
--- /dev/null
+++ b/devtools/client/framework/test/reload/v1/code_bundle_reload.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"v1/code_bundle_reload.js","mappings":";;;;;;AAAA;AACA;;AAEa;;AAEb;AACA;AACA;;AAEA","sources":["webpack://code-reload/./v1/code_reload_1.js"],"sourcesContent":["/* Any copyright is dedicated to the Public Domain.\n http://creativecommons.org/publicdomain/zero/1.0/ */\n\n\"use strict\";\n\nfunction f() {\n  console.log(\"The first version of the script\");\n}\n\nf();\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/devtools/client/framework/test/reload/v1/code_reload_1.js b/devtools/client/framework/test/reload/v1/code_reload_1.js
new file mode 100644
index 0000000000..0b91e3857a
--- /dev/null
+++ b/devtools/client/framework/test/reload/v1/code_reload_1.js
@@ -0,0 +1,10 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+function f() {
+  console.log("The first version of the script");
+}
+
+f();
diff --git a/devtools/client/framework/test/reload/v1/doc_reload.html b/devtools/client/framework/test/reload/v1/doc_reload.html
new file mode 100644
index 0000000000..25df0d24b8
--- /dev/null
+++ b/devtools/client/framework/test/reload/v1/doc_reload.html
@@ -0,0 +1,15 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <script src="code_bundle_reload.js"></script>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Empty test page 1</title>
+  </head>
+
+  <body>
+  </body>
+
+</html>
diff --git a/devtools/client/framework/test/reload/v2/code_bundle_reload.js b/devtools/client/framework/test/reload/v2/code_bundle_reload.js
new file mode 100644
index 0000000000..c21166ba58
--- /dev/null
+++ b/devtools/client/framework/test/reload/v2/code_bundle_reload.js
@@ -0,0 +1,19 @@
+/******/ (() => {
+  // webpackBootstrap
+  /******/ "use strict";
+  var __webpack_exports__ = {};
+  /*!*****************************!*\
+  !*** ./v2/code_reload_2.js ***!
+  \*****************************/
+  /* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+  function f() {
+    console.log("The second version of the script");
+  }
+
+  f();
+
+  /******/
+})();
+//# sourceMappingURL=code_bundle_reload.js.map
diff --git a/devtools/client/framework/test/reload/v2/code_bundle_reload.js.map b/devtools/client/framework/test/reload/v2/code_bundle_reload.js.map
new file mode 100644
index 0000000000..d28bd1e30c
--- /dev/null
+++ b/devtools/client/framework/test/reload/v2/code_bundle_reload.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"v2/code_bundle_reload.js","mappings":";;;;;;AAAA;AACA;;AAEa;;AAEb;AACA;AACA;;AAEA","sources":["webpack://code-reload/./v2/code_reload_2.js"],"sourcesContent":["/* Any copyright is dedicated to the Public Domain.\n http://creativecommons.org/publicdomain/zero/1.0/ */\n\n\"use strict\";\n\nfunction f() {\n  console.log(\"The second version of the script\");\n}\n\nf();\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/devtools/client/framework/test/reload/v2/code_reload_2.js b/devtools/client/framework/test/reload/v2/code_reload_2.js
new file mode 100644
index 0000000000..f4690279b4
--- /dev/null
+++ b/devtools/client/framework/test/reload/v2/code_reload_2.js
@@ -0,0 +1,10 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+function f() {
+  console.log("The second version of the script");
+}
+
+f();
diff --git a/devtools/client/framework/test/reload/v2/doc_reload.html b/devtools/client/framework/test/reload/v2/doc_reload.html
new file mode 100644
index 0000000000..164e2cd26c
--- /dev/null
+++ b/devtools/client/framework/test/reload/v2/doc_reload.html
@@ -0,0 +1,15 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <script src="code_bundle_reload.js"></script>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Empty test page 2</title>
+  </head>
+
+  <body>
+  </body>
+
+</html>
diff --git a/devtools/client/framework/test/reload/webpack.config.js b/devtools/client/framework/test/reload/webpack.config.js
new file mode 100644
index 0000000000..e26b42cd4c
--- /dev/null
+++ b/devtools/client/framework/test/reload/webpack.config.js
@@ -0,0 +1,13 @@
+const path = require("path");
+
+module.exports = [1, 2].map(version => {
+  return {
+    devtool: "source-map",
+    mode: "development",
+    entry: [path.join(__dirname, `/v${version}/code_reload_${version}.js`)],
+    output: {
+      path: __dirname,
+      filename: `v${version}/code_bundle_reload.js`,
+    },
+  };
+});
diff --git a/devtools/client/framework/test/serviceworker.js b/devtools/client/framework/test/serviceworker.js
new file mode 100644
index 0000000000..db1b339fe6
--- /dev/null
+++ b/devtools/client/framework/test/serviceworker.js
@@ -0,0 +1,4 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// empty service worker, always succeed!
diff --git a/devtools/client/framework/test/sjs_cache_controle_header.sjs b/devtools/client/framework/test/sjs_cache_controle_header.sjs
new file mode 100644
index 0000000000..af58a3fc89
--- /dev/null
+++ b/devtools/client/framework/test/sjs_cache_controle_header.sjs
@@ -0,0 +1,19 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/* exported handleRequest */
+
+"use strict";
+
+// Simple server that writes a text response displaying the value of the
+// cache-control header:
+// - if the header is missing, the text will be `cache-control:`
+// - if the header is available, the text will be `cache-control:${value}`
+function handleRequest(request, response) {
+  response.setHeader("Content-Type", "text/plain; charset=utf-8", false);
+  if (request.hasHeader("cache-control")) {
+    response.write(`cache-control:${request.getHeader("cache-control")}`);
+  } else {
+    response.write(`cache-control:`);
+  }
+}
diff --git a/devtools/client/framework/test/test_chrome_page.html b/devtools/client/framework/test/test_chrome_page.html
new file mode 100644
index 0000000000..688b9de1d6
--- /dev/null
+++ b/devtools/client/framework/test/test_chrome_page.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Chrome page</title>
+<script>
+// eslint-disable-next-line no-unused-vars
+function inlineScript() {
+  console.log("foo");
+}
+</script>
diff --git a/devtools/client/framework/test/xpcshell/.eslintrc.js b/devtools/client/framework/test/xpcshell/.eslintrc.js
new file mode 100644
index 0000000000..7f6b62a9e5
--- /dev/null
+++ b/devtools/client/framework/test/xpcshell/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the shared list of defined globals for mochitests.
+  extends: "../../../../.eslintrc.xpcshell.js",
+};
diff --git a/devtools/client/framework/test/xpcshell/test_tabs_absolute_order.js b/devtools/client/framework/test/xpcshell/test_tabs_absolute_order.js
new file mode 100644
index 0000000000..23755d5e8d
--- /dev/null
+++ b/devtools/client/framework/test/xpcshell/test_tabs_absolute_order.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { require } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/Loader.sys.mjs"
+);
+
+const TEST_DATA = [
+  {
+    description: "Test for no order in preference",
+    preferenceOrder: [],
+    currentTabsOrder: ["T1", "T2", "T3", "T4", "T5"],
+    dragTarget: "T1",
+    expectedOrder: ["T1", "T2", "T3", "T4", "T5"],
+  },
+  {
+    description: "Test for drag a tab to left with hidden tab",
+    preferenceOrder: ["T1", "T2", "T3", "E1", "T4", "T5"],
+    currentTabsOrder: ["T1", "T2", "T4", "T3", "T5"],
+    dragTarget: "T4",
+    expectedOrder: ["T1", "T2", "T4", "T3", "E1", "T5"],
+  },
+  {
+    description: "Test for drag a tab to right with hidden tab",
+    preferenceOrder: ["T1", "T2", "T3", "E1", "T4", "T5"],
+    currentTabsOrder: ["T1", "T3", "T4", "T2", "T5"],
+    dragTarget: "T2",
+    expectedOrder: ["T1", "T3", "E1", "T4", "T2", "T5"],
+  },
+  {
+    description:
+      "Test for drag a tab to left end in case hidden tab was left end",
+    preferenceOrder: ["E1", "T1", "T2", "T3", "T4", "T5"],
+    currentTabsOrder: ["T4", "T1", "T2", "T3", "T5"],
+    dragTarget: "T4",
+    expectedOrder: ["E1", "T4", "T1", "T2", "T3", "T5"],
+  },
+  {
+    description:
+      "Test for drag a tab to right end in case hidden tab was right end",
+    preferenceOrder: ["T1", "T2", "T3", "T4", "T5", "E1"],
+    currentTabsOrder: ["T2", "T3", "T4", "T5", "T1"],
+    dragTarget: "T1",
+    expectedOrder: ["T2", "T3", "T4", "T5", "E1", "T1"],
+  },
+  {
+    description: "Test for multiple hidden tabs",
+    preferenceOrder: ["T1", "T2", "E1", "E2", "E3", "E4"],
+    currentTabsOrder: ["T2", "T1"],
+    dragTarget: "T1",
+    expectedOrder: ["T2", "E1", "E2", "E3", "E4", "T1"],
+  },
+];
+
+function run_test() {
+  const {
+    toAbsoluteOrder,
+  } = require("resource://devtools/client/framework/toolbox-tabs-order-manager.js");
+
+  for (const {
+    description,
+    preferenceOrder,
+    currentTabsOrder,
+    dragTarget,
+    expectedOrder,
+  } of TEST_DATA) {
+    info(description);
+    const resultOrder = toAbsoluteOrder(
+      preferenceOrder,
+      currentTabsOrder,
+      dragTarget
+    );
+    equal(
+      resultOrder.join(","),
+      expectedOrder.join(","),
+      "Result should be correct"
+    );
+  }
+}
diff --git a/devtools/client/framework/test/xpcshell/xpcshell.toml b/devtools/client/framework/test/xpcshell/xpcshell.toml
new file mode 100644
index 0000000000..569a4b1e71
--- /dev/null
+++ b/devtools/client/framework/test/xpcshell/xpcshell.toml
@@ -0,0 +1,6 @@
+[DEFAULT]
+tags = "devtools"
+firefox-appdir = "browser"
+skip-if = ["os == 'android'"]
+
+["test_tabs_absolute_order.js"]