test_highlighter_paused_debugger.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

Test the PausedDebuggerOverlay highlighter.

-->

<head>

  <meta charset="utf-8">

  <title>PausedDebuggerOverlay test</title>

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">

</head>

<body>

<pre id="test">

<script>

"use strict";

window.onload = async function() {

  SimpleTest.waitForExplicitFinish();

  const {require} = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs");

  require("devtools/server/actors/inspector/inspector");

  const {HighlighterEnvironment} = require("devtools/server/actors/highlighters");

  const {PausedDebuggerOverlay} = require("devtools/server/actors/highlighters/paused-debugger");

  const env = new HighlighterEnvironment();

  env.initFromWindow(window);

  const highlighter = new PausedDebuggerOverlay(env);

  await highlighter.isReady;

  const anonymousContent = highlighter.markup.content;

  const id = elementID => `${highlighter.ID_CLASS_PREFIX}${elementID}`;

  function isHidden(elementID) {

    const attr = anonymousContent.root.getElementById(id(elementID)).getAttribute("hidden");

    return typeof attr === "string" && attr == "true";

  function getReason() {

    return anonymousContent.root.getElementById(id("reason")).textContent;

  function isOverlayShown() {

    const attr = anonymousContent.root.getElementById(id("root")).getAttribute("overlay");

    return typeof attr === "string" && attr == "true";

  info("Test that the various elements with IDs exist");

  ok(highlighter.getElement("root"), "The root wrapper element exists");

  ok(highlighter.getElement("toolbar"), "The toolbar element exists");

  ok(highlighter.getElement("reason"), "The reason label element exists");

  info("Test that the highlighter is hidden by default");

  ok(isHidden("root"), "The highlighter is hidden");

  info("Show the highlighter with overlay and toolbar");

  let didShow = highlighter.show("breakpoint");

  ok(didShow, "Calling show returned true");

  ok(!isHidden("root"), "The highlighter is shown");

  ok(isOverlayShown(), "The overlay is shown");

is(

    getReason(),

    "Paused on breakpoint",

    "The reason displayed in the toolbar is correct"

);

  info("Call show again with another reason");

  didShow = highlighter.show("debuggerStatement");

  ok(didShow, "Calling show returned true too");

  ok(!isHidden("root"), "The highlighter is still shown");

  is(getReason(), "Paused on debugger statement",

     "The reason displayed in the toolbar is correct again");

  ok(isOverlayShown(), "The overlay is still shown too");

  info("Call show again but with no reason");

  highlighter.show();

  ok(isOverlayShown(), "The overlay is shown however");

  info("Hide the highlighter");

  highlighter.hide();

  ok(isHidden("root"), "The highlighter is now hidden");

  SimpleTest.finish();

};

</script>

</pre>

</body>

</html>