1 files changed, 124 insertions, 0 deletions
diff --git a/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements.js b/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements.js
new file mode 100644
index 0000000000..37aa44cfc1
--- /dev/null
+++ b/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements.js
@@ -0,0 +1,124 @@
+/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set sts=2 sw=2 et tw=80: */
+"use strict";
+
+loadTestSubscript("head_devtools.js");
+
+add_task(async function test_devtools_panels_elements_onSelectionChanged() {
+  let tab = await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    "http://mochi.test:8888/"
+  );
+
+  function devtools_page() {
+    browser.devtools.panels.elements.onSelectionChanged.addListener(
+      async () => {
+        const [evalResult, exceptionInfo] =
+          await browser.devtools.inspectedWindow.eval("$0 && $0.tagName");
+
+        if (exceptionInfo) {
+          browser.test.fail(
+            "Unexpected exceptionInfo on inspectedWindow.eval: " +
+              JSON.stringify(exceptionInfo)
+          );
+        }
+
+        browser.test.sendMessage("devtools_eval_result", evalResult);
+      }
+    );
+
+    browser.test.onMessage.addListener(msg => {
+      switch (msg) {
+        case "inspectedWindow_reload": {
+          // Force a reload to test that the expected onSelectionChanged events are sent
+          // while the page is navigating and once it has been fully reloaded.
+          browser.devtools.inspectedWindow.eval("window.location.reload();");
+          break;
+        }
+
+        default: {
+          browser.test.fail(`Received unexpected test.onMesssage: ${msg}`);
+        }
+      }
+    });
+
+    browser.test.sendMessage("devtools_page_loaded");
+  }
+
+  let 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,
+    },
+  });
+
+  await extension.startup();
+
+  const toolbox = await openToolboxForTab(tab);
+
+  await extension.awaitMessage("devtools_page_loaded");
+
+  await toolbox.selectTool("inspector");
+
+  const inspector = toolbox.getPanel("inspector");
+
+  info(
+    "Waiting for the first onSelectionChanged event to be fired once the inspector is open"
+  );
+
+  const evalResult = await extension.awaitMessage("devtools_eval_result");
+  is(
+    evalResult,
+    "BODY",
+    "Got the expected onSelectionChanged once the inspector is selected"
+  );
+
+  // Reload the inspected tab and wait for the inspector markup view to have been
+  // fully reloaded.
+  const onceMarkupReloaded = inspector.once("markuploaded");
+  extension.sendMessage("inspectedWindow_reload");
+  await onceMarkupReloaded;
+
+  info(
+    "Waiting for the two onSelectionChanged events fired before and after the navigation"
+  );
+
+  // Expect the eval result to be undefined on the first onSelectionChanged event
+  // (fired when the page is navigating away, and so the current selection is undefined).
+  const evalResultNavigating = await extension.awaitMessage(
+    "devtools_eval_result"
+  );
+  is(
+    evalResultNavigating,
+    undefined,
+    "Got the expected onSelectionChanged once the tab is navigating"
+  );
+
+  // Expect the eval result to be related to the body element on the second onSelectionChanged
+  // event (fired when the page have been navigated to the new page).
+  const evalResultOnceMarkupReloaded = await extension.awaitMessage(
+    "devtools_eval_result"
+  );
+  is(
+    evalResultOnceMarkupReloaded,
+    "BODY",
+    "Got the expected onSelectionChanged once the tab has been completely reloaded"
+  );
+
+  await closeToolboxForTab(tab);
+
+  await extension.unload();
+
+  BrowserTestUtils.removeTab(tab);
+});