tor-browser

helper_inplace_editor.js (6087B)

---

/* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
/* import-globals-from head.js */

"use strict";

/**
* Helper methods for the HTMLTooltip integration tests.
*/

const HTML_NS = "http://www.w3.org/1999/xhtml";
const {
 editableField,
} = require("resource://devtools/client/shared/inplace-editor.js");
const { colorUtils } = require("resource://devtools/shared/css/color.js");

/**
* Create an inplace editor linked to a span element and click on the span to
* to turn to edit mode.
*
* @param {object} options
*        Options passed to the InplaceEditor/editableField constructor.
* @param {Document} doc
*        Document where the span element will be created.
* @param {string} textContent
*        (optional) String that will be used as the text content of the span.
*/
const createInplaceEditorAndClick = async function (options, doc, textContent) {
 const span = (options.element = createSpan(doc));
 if (textContent) {
   span.textContent = textContent;
 }

 info("Creating an inplace-editor field");
 editableField(options);

 info("Clicking on the inplace-editor field to turn to edit mode");
 span.click();
};

/**
* Helper to create a span in the provided document.
*
* @param {Document} doc
*        Document where the span element will be created.
* @return {Element} the created span element.
*/
function createSpan(doc) {
 info("Creating a new span element");
 const div = doc.createElementNS(HTML_NS, "div");
 const span = doc.createElementNS(HTML_NS, "span");
 span.setAttribute("tabindex", "0");
 span.style.fontSize = "11px";
 span.style.display = "inline-block";
 span.style.width = "100px";
 span.style.border = "1px solid red";
 span.style.fontFamily = "monospace";

 div.style.height = "100%";
 div.style.position = "absolute";
 div.appendChild(span);

 const parent = doc.querySelector("window") || doc.body;
 parent.appendChild(div);
 return span;
}

/**
* Test helper simulating a key event in an InplaceEditor and checking that the
* autocompletion works as expected.
*
* @param {Array} testData
*        - {String|Object} key, the key to send. An object can be passed with a `key` property.
*                          The other properties will be the options for the event (e.g. `shiftKey`)
*        - {String} completion, the expected value of the auto-completion
*        - {Number} index, the index of the selected suggestion in the popup
*        - {Number|Array} items, the number of suggestions in the popup, or, alternatively
*                         an array of the items label
*        - {String} postLabel, the expected post label for the selected suggestion
*        - {Boolean} colorSwatch, if there is a swatch of color expected to be visible
*        - {Boolean} noSuggestion, true if the keypress doesn't trigger an "after-suggest" event
* @param {InplaceEditor} editor
*        The InplaceEditor instance being tested
*/
async function testCompletion(
 [key, completion, index, items, postLabel, colorSwatch, noSuggestion],
 editor
) {
 let eventOptions = {};
 if (typeof key === "object") {
   ({ key, ...eventOptions } = key);
 }

 info(`Pressing key <${key}> | options: ${JSON.stringify(eventOptions)}`);
 info("Expecting " + completion);

 let onVisibilityChange = null;
 const total = Array.isArray(items) ? items.length : items;
 const open = total > 0;
 if (editor.popup.isOpen != open) {
   onVisibilityChange = editor.popup.once(
     open ? "popup-opened" : "popup-closed"
   );
 }

 let onSuggest;
 if (/(left|right|back_space|escape)/gi.test(key) || noSuggestion) {
   info("Waiting for next keypress event");
   onSuggest = once(editor.input, "keypress");
 } else {
   info("Waiting for after-suggest event on the editor");
   onSuggest = editor.once("after-suggest");
 }

 info("Synthesizing key " + key);
 EventUtils.synthesizeKey(key, eventOptions, editor.input.defaultView);

 await onSuggest;
 await onVisibilityChange;
 await waitForTime(5);

 info("Checking the state");
 if (completion !== null) {
   is(editor.input.value, completion, "Correct value is autocompleted");
 }

 if (postLabel) {
   const selectedItem = editor.popup.getItems()[index];
   const selectedElement = editor.popup.elements.get(selectedItem);
   ok(
     selectedElement.textContent.includes(postLabel),
     "Selected popup element contains the expected post-label"
   );

   // Determines if there is a color swatch attached to the label
   // and if the color swatch's background color matches the post label
   const swatchSpan = selectedElement.getElementsByClassName(
     "autocomplete-swatch autocomplete-colorswatch"
   );
   if (colorSwatch) {
     Assert.strictEqual(
       swatchSpan.length,
       1,
       "Displayed the expected color swatch"
     );
     const color = new colorUtils.CssColor(
       swatchSpan[0].style.backgroundColor
     );
     const swatchColor = color.rgba;
     const postColor = new colorUtils.CssColor(postLabel).rgba;
     Assert.equal(
       swatchColor,
       postColor,
       "Color swatch matches postLabel value"
     );
   } else {
     Assert.strictEqual(
       swatchSpan.length,
       0,
       "As expected no swatches were available"
     );
   }
 }

 if (total === 0) {
   ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
 } else {
   ok(editor.popup.isOpen, "Popup is open");
   const popupItems = editor.popup.getItems();
   if (Array.isArray(items)) {
     Assert.deepEqual(
       popupItems.map(item => item.label),
       items,
       "Suggestions match"
     );
   } else {
     is(
       popupItems.length,
       total,
       "Number of suggestions match" +
         (popupItems.length !== total
           ? ` - got ${JSON.stringify(popupItems.map(item => item.label))}`
           : "")
     );
   }
   is(editor.popup.selectedIndex, index, "Expected item is selected");
 }
}