tor-browser

browser_rules_variables_autocomplete.js (5687B)

---

/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test for autocomplete of CSS variables in the Rules view.

const IFRAME_URL = `https://example.org/document-builder.sjs?html=${encodeURIComponent(`
 <style>
   @property --iframe {
     syntax: "*";
     inherits: true;
   }
   body {
     --iframe-not-registered: turquoise;
   }

   h1 {
     color: tomato;
   }
 </style>
 <h1>iframe</h1>
`)}`;

const TEST_URI = `https://example.org/document-builder.sjs?html=
<script>
   CSS.registerProperty({
     name: "--js",
     syntax: "<color>",
     inherits: false,
     initialValue: "gold"
   });
 </script>
 <style>
   @property --css {
     syntax: "<color>";
     inherits: false;
     initial-value: tomato;
   }

   h1 {
     --css: red;
     --not-registered: blue;
     --nested: var(--js);
     --nested-with-function: color-mix(in srgb, var(--css) 50%, var(--not-registered));
     color: gold;
   }
 </style>
 <h1>Hello world</h1>
 <iframe src="${encodeURIComponent(IFRAME_URL)}"></iframe>`;

add_task(async function () {
 await pushPref("layout.css.properties-and-values.enabled", true);

 await addTab(TEST_URI);
 const { inspector, view } = await openRuleView();
 await selectNode("h1", inspector);

 info("Wait for @property panel to be displayed");
 await waitFor(() =>
   view.styleDocument.querySelector("#registered-properties-container")
 );

 const topLevelVariables = [
   { label: "--css", postLabel: "rgb(255, 0, 0)", hasColorSwatch: true },
   { label: "--js", postLabel: "gold", hasColorSwatch: true },
   { label: "--nested", postLabel: "rgb(255, 215, 0)", hasColorSwatch: true },
   {
     label: "--nested-with-function",
     postLabel: "color-mix(in srgb, rgb(255, 0, 0) 50%, blue)",
     hasColorSwatch: true,
   },
   { label: "--not-registered", postLabel: "blue", hasColorSwatch: true },
 ];
 await checkNewPropertyCssVariableAutocomplete(view, topLevelVariables);

 await checkCssVariableAutocomplete(
   view,
   getTextProperty(view, 1, { color: "gold" }).editor.valueSpan,
   topLevelVariables
 );

 info(
   "Check that the list is correct when selecting a node from another document"
 );
 await selectNodeInFrames(["iframe", "h1"], inspector);

 const iframeVariables = [
   { label: "--iframe" },
   {
     label: "--iframe-not-registered",
     postLabel: "turquoise",
     hasColorSwatch: true,
   },
 ];
 await checkNewPropertyCssVariableAutocomplete(view, iframeVariables);

 await checkCssVariableAutocomplete(
   view,
   getTextProperty(view, 1, { color: "tomato" }).editor.valueSpan,
   iframeVariables
 );
});

async function checkNewPropertyCssVariableAutocomplete(
 view,
 expectedPopupItems
) {
 const ruleEditor = getRuleViewRuleEditor(view, 1);
 const editor = await focusNewRuleViewProperty(ruleEditor);
 const onPopupOpen = editor.popup.once("popup-opened");
 EventUtils.sendString("--");
 await onPopupOpen;

 assertEditorPopupItems(
   editor,
   // we don't display postLabel for the new property
   expectedPopupItems.map(item => ({ label: item.label }))
 );

 info("Close the popup");
 const onPopupClosed = once(editor.popup, "popup-closed");
 EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
 await onPopupClosed;

 info("Close the editor");
 EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
}

async function checkCssVariableAutocomplete(
 view,
 inplaceEditorEl,
 expectedPopupItems
) {
 const editor = await focusEditableField(view, inplaceEditorEl);
 await wait(500);

 const onCloseParenthesisAppended = editor.once("after-suggest");
 EventUtils.sendString("var(");
 await onCloseParenthesisAppended;

 let onRuleViewChanged = view.once("ruleview-changed");
 EventUtils.sendString("--");
 const onPopupOpen = editor.popup.once("popup-opened");
 view.debounce.flush();
 await onPopupOpen;
 assertEditorPopupItems(editor, expectedPopupItems);
 await onRuleViewChanged;

 info("Close the popup");
 const onPopupClosed = once(editor.popup, "popup-closed");
 EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
 await onPopupClosed;

 info("Cancel");
 onRuleViewChanged = view.once("ruleview-changed");
 EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
 await onRuleViewChanged;

 view.debounce.flush();
}

/**
* Check that the popup items are the expected ones.
*
* @param {InplaceEditor} editor
* @param {Array{Object}} expectedPopupItems
*/
function assertEditorPopupItems(editor, expectedPopupItems) {
 const popupListItems = Array.from(editor.popup.list.querySelectorAll("li"));
 is(
   popupListItems.length,
   expectedPopupItems.length,
   "Popup has expected number of items"
 );
 popupListItems.forEach((li, i) => {
   const expected = expectedPopupItems[i];
   const value =
     (li.querySelector(".initial-value")?.textContent ?? "") +
     li.querySelector(".autocomplete-value").textContent;
   is(value, expected.label, `Popup item #${i} as expected label`);

   // Don't pollute test logs if we don't have the expected variable
   if (value !== expected.label) {
     return;
   }

   const postLabelEl = li.querySelector(".autocomplete-postlabel");
   is(
     li.querySelector(".autocomplete-postlabel")?.textContent,
     expected.postLabel,
     `${expected.label} has expected post label`
   );
   is(
     !!postLabelEl?.querySelector(".autocomplete-swatch"),
     !!expected.hasColorSwatch,
     `${expected.label} ${
       expected.hasColorSwatch ? "has" : "does not have"
     } a post label color swatch`
   );
 });
}