browser_rules_edit-selector-pseudo-element.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Testing editing pseudo element selector in the rule view.

const TEST_URI = `

  <style>

    h1::before {

      content: "-";

      color: lime;

  </style>

  <h1 class=foo>pseudo</h1>`;

add_task(async function test_inline_sheet() {

  // Avoid focusing the first declaration after editing the selector

  await pushPref("devtools.inspector.rule-view.focusNextOnEnter", false);

  await addTab(

    `data:text/html,<meta charset=utf8>${encodeURIComponent(TEST_URI)}`

);

  const { inspector, view } = await openRuleView();

  info("Check that we can edit the selectors in the pseudo elements section");

  await selectNode("h1", inspector);

  info("Expand pseudo elements section");

  const pseudoElementToggle = view.styleDocument.querySelector(

    `[aria-controls="pseudo-elements-container"]`

);

  // sanity check

is(

    pseudoElementToggle.ariaExpanded,

    "false",

    "pseudo element section is collapsed at first"

);

  pseudoElementToggle.click();

is(

    pseudoElementToggle.ariaExpanded,

    "true",

    "pseudo element section is now expanded"

);

  info(`Modify "h1::before" into ".foo::before"`);

  let ruleEditor = getRuleViewRuleEditor(view, 1, 0);

  let editor = await focusEditableField(view, ruleEditor.selectorText);

  let onRuleViewChanged = view.once("ruleview-changed");

  editor.input.value = ".foo::before";

  EventUtils.synthesizeKey("KEY_Enter");

  await onRuleViewChanged;

  // Get the new rule editor reference

  ruleEditor = getRuleViewRuleEditor(view, 1, 0);

  is(ruleEditor.selectorText.textContent, ".foo::before");

is(

    ruleEditor.element.getAttribute("unmatched"),

    "false",

    "pseudo element rule still matches"

);

  info(`Modify ".foo::before" into ".foo::after"`);

  ruleEditor = getRuleViewRuleEditor(view, 1, 0);

  editor = await focusEditableField(view, ruleEditor.selectorText);

  onRuleViewChanged = view.once("ruleview-changed");

  editor.input.value = ".foo::after";

  EventUtils.synthesizeKey("KEY_Enter");

  await onRuleViewChanged;

  // Get the new rule editor reference

  ruleEditor = getRuleViewRuleEditor(view, 1, 0);

  is(ruleEditor.selectorText.textContent, ".foo::after");

is(

    ruleEditor.element.getAttribute("unmatched"),

    "false",

    "pseudo element rule still matches"

);

  info(`Modify ".foo::after" into unmatching "h2::after"`);

  ruleEditor = getRuleViewRuleEditor(view, 1, 0);

  editor = await focusEditableField(view, ruleEditor.selectorText);

  onRuleViewChanged = view.once("ruleview-changed");

  editor.input.value = "h2::after";

  EventUtils.synthesizeKey("KEY_Enter");

  await onRuleViewChanged;

  // Get the new rule editor reference

  ruleEditor = getRuleViewRuleEditor(view, 1, 0);

  is(ruleEditor.selectorText.textContent, "h2::after");

is(

    ruleEditor.element.getAttribute("unmatched"),

    "true",

    "pseudo element rule does not match h1 anymore"

);

  info(`Modify "h2::after" back into matching "h1::after"`);

  ruleEditor = getRuleViewRuleEditor(view, 1, 0);

  editor = await focusEditableField(view, ruleEditor.selectorText);

  onRuleViewChanged = view.once("ruleview-changed");

  editor.input.value = "h1::after";

  EventUtils.synthesizeKey("KEY_Enter");

  await onRuleViewChanged;

  // Get the new rule editor reference

  ruleEditor = getRuleViewRuleEditor(view, 1, 0);

  is(ruleEditor.selectorText.textContent, "h1::after");

is(

    ruleEditor.element.getAttribute("unmatched"),

    "false",

    "pseudo element rule does match back the h1 node"

);

  info(

    "Check that we can edit the selector when the pseudo element node is selected"

);

  const h1NodeFront = await getNodeFront("h1", inspector);

  let h1NodeFrontChildren = await inspector.walker.children(h1NodeFront);

  const h1AfterNodeFront = h1NodeFrontChildren.nodes.at(-1);

  await selectNode(h1AfterNodeFront, inspector);

  // sanity check

is(

    inspector.selection.nodeFront.displayName,

    "::after",

    "We selected the ::after pseudo element"

);

  info(`Modify "h1::after" into ".foo::after"`);

  ruleEditor = getRuleViewRuleEditor(view, 0);

  editor = await focusEditableField(view, ruleEditor.selectorText);

  onRuleViewChanged = view.once("ruleview-changed");

  editor.input.value = ".foo::after";

  EventUtils.synthesizeKey("KEY_Enter");

  info("waiting for <onRuleViewChanged>");

  await onRuleViewChanged;

  // Get the new rule editor reference

  ruleEditor = getRuleViewRuleEditor(view, 0);

  is(ruleEditor.selectorText.textContent, ".foo::after");

is(

    ruleEditor.element.getAttribute("unmatched"),

    "false",

    "pseudo element rule still matches"

);

  info(`Modify ".foo::after" into "h2::after"`);

  ruleEditor = getRuleViewRuleEditor(view, 0);

  editor = await focusEditableField(view, ruleEditor.selectorText);

  onRuleViewChanged = view.once("ruleview-changed");

  const onSelection = inspector.selection.once("new-node-front");

  editor.input.value = "h2::after";

  EventUtils.synthesizeKey("KEY_Enter");

  await onRuleViewChanged;

  await onSelection;

is(

    inspector.selection.nodeFront,

    h1NodeFront,

    "The parent node of the pseudo element was selected"

);

  h1NodeFrontChildren = await inspector.walker.children(h1NodeFront);

is(

    h1NodeFrontChildren.nodes.find(child => child.displayName === "::after"),

    undefined,

    "The ::after pseudo element was removed"

);

});