tor-browser

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

browser_rules_completion-existing-property_02.js (4727B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that CSS property names and values are autocompleted and cycled
      7 // correctly when editing existing properties in the rule view.
      8 
      9 // format :
     10 //  [
     11 //    what key to press,
     12 //    modifers,
     13 //    expected input box value after keypress,
     14 //    is the popup open,
     15 //    is a suggestion selected in the popup,
     16 //    expect ruleview-changed,
     17 //  ]
     18 
     19 const OPEN = true,
     20  SELECTED = true,
     21  CHANGE = true;
     22 var testData = [
     23  ["b", {}, "beige", OPEN, SELECTED, CHANGE],
     24  ["l", {}, "black", OPEN, SELECTED, CHANGE],
     25  ["VK_DOWN", {}, "blanchedalmond", OPEN, SELECTED, CHANGE],
     26  ["VK_DOWN", {}, "blue", OPEN, SELECTED, CHANGE],
     27  ["VK_RIGHT", {}, "blue", !OPEN, !SELECTED, !CHANGE],
     28  [" ", {}, "blue aliceblue", OPEN, SELECTED, CHANGE],
     29  ["!", {}, "blue !important", !OPEN, !SELECTED, CHANGE],
     30  ["VK_BACK_SPACE", {}, "blue !", !OPEN, !SELECTED, CHANGE],
     31  ["VK_BACK_SPACE", {}, "blue ", !OPEN, !SELECTED, CHANGE],
     32  ["VK_BACK_SPACE", {}, "blue", !OPEN, !SELECTED, CHANGE],
     33  ["VK_TAB", { shiftKey: true }, "color", !OPEN, !SELECTED, CHANGE],
     34  ["VK_BACK_SPACE", {}, "", !OPEN, !SELECTED, !CHANGE],
     35  ["d", {}, "display", OPEN, SELECTED, !CHANGE],
     36  ["VK_TAB", {}, "blue", !OPEN, !SELECTED, CHANGE],
     37  ["n", {}, "none", !OPEN, !SELECTED, CHANGE],
     38  ["VK_RETURN", {}, null, !OPEN, !SELECTED, CHANGE],
     39 ];
     40 
     41 const TEST_URI = "<h1 style='color: red'>Header</h1>";
     42 
     43 add_task(async function () {
     44  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     45  const { inspector, view } = await openRuleView();
     46 
     47  info("Test autocompletion after 1st page load");
     48  await runAutocompletionTest(inspector, view);
     49 
     50  info("Test autocompletion after page navigation");
     51  await reloadBrowser();
     52  await runAutocompletionTest(inspector, view);
     53 });
     54 
     55 async function runAutocompletionTest(inspector, view) {
     56  info("Selecting the test node");
     57  await selectNode("h1", inspector);
     58 
     59  const prop = getTextProperty(view, 0, { color: "red" });
     60 
     61  info("Focusing the css property editable value");
     62  let editor = await focusEditableField(view, prop.editor.valueSpan);
     63 
     64  info("Starting to test for css property completion");
     65  for (let i = 0; i < testData.length; i++) {
     66    // Re-define the editor at each iteration, because the focus may have moved
     67    // from property to value and back
     68    editor = inplaceEditor(view.styleDocument.activeElement);
     69    await testCompletion(testData[i], editor, view);
     70  }
     71 }
     72 
     73 async function testCompletion(
     74  [key, modifiers, completion, open, selected, change],
     75  editor,
     76  view
     77 ) {
     78  info(
     79    `Pressing key "${key}", expecting "${completion}", popup opened: ${open}, item selected: ${selected}`
     80  );
     81 
     82  const promises = [];
     83 
     84  if (change) {
     85    // If the key triggers a ruleview-changed, wait for that event, it will
     86    // always be the last to be triggered and tells us when the preview has
     87    // been done.
     88    promises.push(view.once("ruleview-changed"));
     89  } else if (key !== "VK_RIGHT" && key !== "VK_BACK_SPACE") {
     90    // Otherwise, expect an after-suggest event (except if the autocomplete gets dismissed).
     91    promises.push(editor.once("after-suggest"));
     92  }
     93 
     94  if (editor.popup.isOpen !== open) {
     95    // if the key does not submit the property name, we only want to wait for popup
     96    // events if the current state of the popup is different from the one that is
     97    // expected after
     98    promises.push(editor.popup.once(open ? "popup-opened" : "popup-closed"));
     99  }
    100 
    101  info(
    102    `Synthesizing key "${key}", modifiers: ${JSON.stringify(Object.keys(modifiers))}`
    103  );
    104  EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
    105 
    106  // Flush the debounce for the preview text.
    107  view.debounce.flush();
    108 
    109  // Wait for all the events
    110  await Promise.all(promises);
    111 
    112  // The key might have been a TAB or shift-TAB, in which case the editor will
    113  // be a new one
    114  editor = inplaceEditor(view.styleDocument.activeElement);
    115 
    116  info("Checking the state");
    117  if (completion !== null) {
    118    try {
    119      await waitFor(() => editor.input.value === completion);
    120    } catch (e) {
    121      // catch the exception so we'll get a nicer failure in the assertion below
    122    }
    123    is(editor.input.value, completion, "Correct value is autocompleted");
    124  }
    125 
    126  if (
    127    key === "VK_RETURN" &&
    128    !Services.prefs.getBoolPref("devtools.inspector.rule-view.focusNextOnEnter")
    129  ) {
    130    ok(!editor, "Enter does not move focus to next element");
    131    return;
    132  }
    133 
    134  if (!open) {
    135    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
    136  } else {
    137    ok(editor.popup.isOpen, "Popup is open");
    138    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
    139  }
    140 }