tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_toolbox_keyboard_navigation.js (4643B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 * http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests keyboard navigation of devtools tabbar.
      7 
      8 const TEST_URL =
      9  "data:text/html;charset=utf8,test page for toolbar keyboard navigation";
     10 
     11 function containsFocus(doc, expectedElement) {
     12  let el = doc.activeElement;
     13  while (el) {
     14    if (el === expectedElement) {
     15      return true;
     16    }
     17    el = el.parentNode;
     18  }
     19  return false;
     20 }
     21 
     22 add_task(async function () {
     23  info("Create a test tab and open the toolbox");
     24  const toolbox = await openNewTabAndToolbox(TEST_URL, "webconsole");
     25  const doc = toolbox.doc;
     26 
     27  const toolbar = doc.querySelector(".devtools-tabbar");
     28  const toolbarControls = [
     29    ...toolbar.querySelectorAll(".devtools-tab, button"),
     30  ].filter(
     31    elm =>
     32      !elm.hidden &&
     33      doc.defaultView.getComputedStyle(elm).getPropertyValue("display") !==
     34        "none"
     35  );
     36 
     37  // Put the keyboard focus onto the first toolbar control.
     38  toolbarControls[0].focus();
     39  ok(containsFocus(doc, toolbar), "Focus is within the toolbar");
     40 
     41  // Move the focus away from toolbar to a next focusable element.
     42  EventUtils.synthesizeKey("KEY_Tab");
     43  ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
     44 
     45  // Move the focus back to the toolbar.
     46  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
     47  ok(containsFocus(doc, toolbar), "Focus is within the toolbar again");
     48 
     49  // Move through the toolbar forward using the right arrow key.
     50  for (let i = 0; i < toolbarControls.length; ++i) {
     51    is(doc.activeElement.id, toolbarControls[i].id, "New control is focused");
     52    if (i < toolbarControls.length - 1) {
     53      EventUtils.synthesizeKey("KEY_ArrowRight");
     54    }
     55  }
     56 
     57  // Move the focus away from toolbar to a next focusable element.
     58  EventUtils.synthesizeKey("KEY_Tab");
     59  ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
     60 
     61  // Move the focus back to the toolbar.
     62  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
     63  ok(containsFocus(doc, toolbar), "Focus is within the toolbar again");
     64 
     65  // Move through the toolbar backward using the left arrow key.
     66  for (let i = toolbarControls.length - 1; i >= 0; --i) {
     67    is(doc.activeElement.id, toolbarControls[i].id, "New control is focused");
     68    if (i > 0) {
     69      EventUtils.synthesizeKey("KEY_ArrowLeft");
     70    }
     71  }
     72 
     73  // Move focus to the 3rd (non-first) toolbar control.
     74  const expectedFocusedControl = toolbarControls[2];
     75  EventUtils.synthesizeKey("KEY_ArrowRight");
     76  EventUtils.synthesizeKey("KEY_ArrowRight");
     77  is(doc.activeElement.id, expectedFocusedControl.id, "New control is focused");
     78 
     79  // Move the focus away from toolbar to a next focusable element.
     80  EventUtils.synthesizeKey("KEY_Tab");
     81  ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
     82 
     83  // Move the focus back to the toolbar, ensure we land on the last active
     84  // descendant control.
     85  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
     86  is(doc.activeElement.id, expectedFocusedControl.id, "New control is focused");
     87 });
     88 
     89 // Test that moving the focus of tab button and selecting it.
     90 add_task(async function () {
     91  info("Create a test tab and open the toolbox");
     92  const toolbox = await openNewTabAndToolbox(TEST_URL, "inspector");
     93  const doc = toolbox.doc;
     94 
     95  const toolbar = doc.querySelector(".toolbox-tabs");
     96  const tabButtons = toolbar.querySelectorAll(".devtools-tab, button");
     97  const win = tabButtons[0].ownerDocument.defaultView;
     98 
     99  // Put the keyboard focus onto the first tab button.
    100  tabButtons[0].focus();
    101  ok(containsFocus(doc, toolbar), "Focus is within the toolbox");
    102  is(doc.activeElement.id, tabButtons[0].id, "First tab button is focused.");
    103 
    104  // Move the focused tab and select it by using enter key.
    105  let onKeyEvent = once(win, "keydown");
    106  EventUtils.synthesizeKey("KEY_ArrowRight");
    107  await onKeyEvent;
    108 
    109  let onceSelected = toolbox.once("webconsole-selected");
    110  EventUtils.synthesizeKey("Enter");
    111  await onceSelected;
    112  is(
    113    doc.activeElement.id,
    114    "toolbox-panel-iframe-" + toolbox.currentToolId,
    115    "Selected tool frame is now focused."
    116  );
    117 
    118  // Webconsole steal the focus from button after sending "webconsole-selected"
    119  // event.
    120  tabButtons[1].focus();
    121 
    122  // Return the focused tab with space key.
    123  onKeyEvent = once(win, "keydown");
    124  EventUtils.synthesizeKey("KEY_ArrowLeft");
    125  await onKeyEvent;
    126 
    127  onceSelected = toolbox.once("inspector-selected");
    128  EventUtils.synthesizeKey(" ");
    129  await onceSelected;
    130 
    131  is(
    132    doc.activeElement.id,
    133    "toolbox-panel-iframe-" + toolbox.currentToolId,
    134    "Selected tool frame is now focused."
    135  );
    136 });