test_popup_keys.xhtml

Enable keyboard shortcuts

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin" type="text/css"?>

<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>

<window title="Menu ignorekeys Test"

        onkeydown="keyDown()" onkeypress="gKeyPressCount++; event.stopPropagation(); event.preventDefault();"

        onload="runTests();"

        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

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

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

<!--

  This test checks that the ignorekeys attribute can be used on a menu to

  disable key navigation. The test is performed twice by opening the menu,

  simulating a cursor down key, and closing the popup. When keys are enabled,

  the first item on the menu should be highlighted, otherwise the first item

  should not be highlighted.

-->

<menupopup id="popup">

  <menuitem id="i1" label="One"/>

  <menuitem id="i2" label="Two"/>

  <menuitem id="i3" label="Three"/>

  <menuitem id="i4" label="Four"/>

</menupopup>

<script class="testbody" type="application/javascript">

<![CDATA[

SimpleTest.waitForExplicitFinish();

let gIgnoreKeys = false;

let gKeyPressCount = 0;

let gLastFirstMenuActiveValue = null;

function waitForEvent(target, eventName) {

  return new Promise(resolve => {

    target.addEventListener(eventName, function eventOccurred() {

      resolve();

    }, { once: true});

});

function runTests()

  function promiseFlushingMutationObserver() {

    return new Promise(SimpleTest.executeSoon);

  (async function() {

    const observer = new MutationObserver(checkIfFirstMenuItemActive);

    observer.observe($("i1"), { attributes: true });

    var popup = $("popup");

    is(popup.hasAttribute("ignorekeys"), false, "keys enabled");

    let popupShownPromise = waitForEvent(popup, "popupshown");

    popup.openPopup(null, "after_start");

    await popupShownPromise;

    let popupHiddenPromise = waitForEvent(popup, "popuphidden");

    info("Synthesizing ArrowDown (no ignorekeys)...");

    synthesizeKey("KEY_ArrowDown");

    await popupHiddenPromise;

    is(gKeyPressCount, 0, "keypresses with ignorekeys='false'");

    gIgnoreKeys = true;

    popup.setAttribute("ignorekeys", "true");

    // clear this first to avoid confusion

    observer.disconnect();

    $("i1").removeAttribute("_moz-menuactive")

    await promiseFlushingMutationObserver();

    observer.observe($("i1"), { attributes: true });

    popupShownPromise = waitForEvent(popup, "popupshown");

    popup.openPopup(null, "after_start");

    await popupShownPromise;

    info("Synthesizing ArrowDown (ignorekeys=\"true\")...");

    synthesizeKey("KEY_ArrowDown");

    await new Promise(resolve => setTimeout(() => resolve(), 1000));

    popupHiddenPromise = waitForEvent(popup, "popuphidden");

    popup.hidePopup();

    await popupHiddenPromise;

    is(gKeyPressCount, 1, "keypresses with ignorekeys='true'");

    popup.setAttribute("ignorekeys", "shortcuts");

    // clear this first to avoid confusion

    observer.disconnect();

    $("i1").removeAttribute("_moz-menuactive")

    await promiseFlushingMutationObserver();

    observer.observe($("i1"), { attributes: true });

    popupShownPromise = waitForEvent(popup, "popupshown");

    popup.openPopup(null, "after_start");

    await popupShownPromise;

    // When ignorekeys="shortcuts", T should be handled but accel+T should propagate.

    info("Synthesizing \"t\"...");

    sendString("t");

    is(gKeyPressCount, 1, "keypresses after t pressed with ignorekeys='shortcuts'");

    info("Synthesizing Accel-T...");

    synthesizeKey("t", { accelKey: true });

    is(gKeyPressCount, 2, "keypresses after accel+t pressed with ignorekeys='shortcuts'");

    popupHiddenPromise = waitForEvent(popup, "popuphidden");

    popup.hidePopup();

    await popupHiddenPromise;

    observer.disconnect();

    SimpleTest.finish();

  })();

function checkIfFirstMenuItemActive(aMutationList) {

  for (const mutation of aMutationList) {

    if (mutation.type != "attributes" || mutation.attributeName != "_moz-menuactive") {

      continue;

    // the attribute should not be changed when ignorekeys is enabled

    if (gIgnoreKeys) {

      ok(false, "move key with keys disabled");

      return;

is(

      $("popup").hasAttribute("ignorekeys")

        ? gLastFirstMenuActiveValue

        : $("i1").getAttribute("_moz-menuactive"),

      "true",

      "move key with keys enabled"

);

    $("popup").hidePopup();

    gLastFirstMenuActiveValue = null;

    break;

function keyDown() {

  // when keys are enabled, the menu should have stopped propagation of the

  // event, so a bubbling listener for a keydown event should only occur

  // when keys are disabled.

  ok(gIgnoreKeys, "key listener fired with keys " +

                  (gIgnoreKeys ? "disabled" : "enabled"));

  gLastFirstMenuActiveValue = $("i1").getAttribute("_moz-menuactive");

]]>

</script>

<body xmlns="http://www.w3.org/1999/xhtml">

<p id="display">

</p>

<div id="content" style="display: none">

</div>

<pre id="test">

</pre>

</body>

</window>