1 files changed, 171 insertions, 0 deletions
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"
+  );
+}