Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 1964 insertions, 0 deletions

diff --git a/devtools/client/shared/inplace-editor.js b/devtools/client/shared/inplace-editor.js
new file mode 100644
index 0000000000..fa97b2a982
--- /dev/null
+++ b/devtools/client/shared/inplace-editor.js
@@ -0,0 +1,1964 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * Basic use:
+ * let spanToEdit = document.getElementById("somespan");
+ *
+ * editableField({
+ *   element: spanToEdit,
+ *   done: function(value, commit, direction, key) {
+ *     if (commit) {
+ *       spanToEdit.textContent = value;
+ *     }
+ *   },
+ *   trigger: "dblclick"
+ * });
+ *
+ * See editableField() for more options.
+ */
+
+"use strict";
+
+const focusManager = Services.focus;
+const isOSX = Services.appinfo.OS === "Darwin";
+const { KeyCodes } = require("resource://devtools/client/shared/keycodes.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const {
+  findMostRelevantCssPropertyIndex,
+} = require("resource://devtools/client/shared/suggestion-picker.js");
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const CONTENT_TYPES = {
+  PLAIN_TEXT: 0,
+  CSS_VALUE: 1,
+  CSS_MIXED: 2,
+  CSS_PROPERTY: 3,
+};
+
+// The limit of 500 autocomplete suggestions should not be reached but is kept
+// for safety.
+const MAX_POPUP_ENTRIES = 500;
+
+const FOCUS_FORWARD = focusManager.MOVEFOCUS_FORWARD;
+const FOCUS_BACKWARD = focusManager.MOVEFOCUS_BACKWARD;
+
+const WORD_REGEXP = /\w/;
+const isWordChar = function (str) {
+  return str && WORD_REGEXP.test(str);
+};
+
+const GRID_PROPERTY_NAMES = [
+  "grid-area",
+  "grid-row",
+  "grid-row-start",
+  "grid-row-end",
+  "grid-column",
+  "grid-column-start",
+  "grid-column-end",
+];
+const GRID_ROW_PROPERTY_NAMES = [
+  "grid-area",
+  "grid-row",
+  "grid-row-start",
+  "grid-row-end",
+];
+const GRID_COL_PROPERTY_NAMES = [
+  "grid-area",
+  "grid-column",
+  "grid-column-start",
+  "grid-column-end",
+];
+
+/**
+ * Helper to check if the provided key matches one of the expected keys.
+ * Keys will be prefixed with DOM_VK_ and should match a key in KeyCodes.
+ *
+ * @param {String} key
+ *        the key to check (can be a keyCode).
+ * @param {...String} keys
+ *        list of possible keys allowed.
+ * @return {Boolean} true if the key matches one of the keys.
+ */
+function isKeyIn(key, ...keys) {
+  return keys.some(expectedKey => {
+    return key === KeyCodes["DOM_VK_" + expectedKey];
+  });
+}
+
+/**
+ * Mark a span editable.  |editableField| will listen for the span to
+ * be focused and create an InlineEditor to handle text input.
+ * Changes will be committed when the InlineEditor's input is blurred
+ * or dropped when the user presses escape.
+ *
+ * @param {Object} options: Options for the editable field
+ * @param {Element} options.element:
+ *        (required) The span to be edited on focus.
+ * @param {Function} options.canEdit:
+ *        Will be called before creating the inplace editor.  Editor
+ *        won't be created if canEdit returns false.
+ * @param {Function} options.start:
+ *        Will be called when the inplace editor is initialized.
+ * @param {Function} options.change:
+ *        Will be called when the text input changes.  Will be called
+ *        with the current value of the text input.
+ * @param {Function} options.done:
+ *        Called when input is committed or blurred.  Called with
+ *        current value, a boolean telling the caller whether to
+ *        commit the change, the direction of the next element to be
+ *        selected and the event keybode. Direction may be one of Services.focus.MOVEFOCUS_FORWARD,
+ *        Services.focus.MOVEFOCUS_BACKWARD, or null (no movement).
+ *        This function is called before the editor has been torn down.
+ * @param {Function} options.destroy:
+ *        Called when the editor is destroyed and has been torn down.
+ * @param {Function} options.contextMenu:
+ *        Called when the user triggers a contextmenu event on the input.
+ * @param {Object} options.advanceChars:
+ *        This can be either a string or a function.
+ *        If it is a string, then if any characters in it are typed,
+ *        focus will advance to the next element.
+ *        Otherwise, if it is a function, then the function will
+ *        be called with three arguments: a key code, the current text,
+ *        and the insertion point.  If the function returns true,
+ *        then the focus advance takes place.  If it returns false,
+ *        then the character is inserted instead.
+ * @param {Boolean} options.stopOnReturn:
+ *        If true, the return key will not advance the editor to the next
+ *        focusable element. Note that Ctrl/Cmd+Enter will still advance the editor
+ * @param {Boolean} options.stopOnTab:
+ *        If true, the tab key will not advance the editor to the next
+ *        focusable element.
+ * @param {Boolean} options.stopOnShiftTab:
+ *        If true, shift tab will not advance the editor to the previous
+ *        focusable element.
+ * @param {String} options.trigger: The DOM event that should trigger editing,
+ *        defaults to "click"
+ * @param {Boolean} options.multiline: Should the editor be a multiline textarea?
+ *        defaults to false
+ * @param {Function or options.Number} maxWidth:
+ *        Should the editor wrap to remain below the provided max width. Only
+ *        available if multiline is true. If a function is provided, it will be
+ *        called when replacing the element by the inplace input.
+ * @param {Boolean} options.trimOutput: Should the returned string be trimmed?
+ *        defaults to true
+ * @param {Boolean} options.preserveTextStyles: If true, do not copy text-related styles
+ *        from `element` to the new input.
+ *        defaults to false
+ * @param {Object} options.cssProperties: An instance of CSSProperties.
+ * @param {Object} options.cssVariables: A Map object containing all CSS variables.
+ * @param {Number} options.defaultIncrement: The value by which the input is incremented
+ *        or decremented by default (0.1 for properties like opacity and 1 by default)
+ * @param {Function} options.getGridLineNames:
+ *        Will be called before offering autocomplete sugestions, if the property is
+ *        a member of GRID_PROPERTY_NAMES.
+ * @param {Boolean} options.showSuggestCompletionOnEmpty:
+ *        If true, show the suggestions in case that the current text becomes empty.
+ *        Defaults to false.
+ * @param {Boolean} options.focusEditableFieldAfterApply
+ *        If true, try to focus the next editable field after the input value is commited.
+ *        When set to true, focusEditableFieldContainerSelector is mandatory.
+ *        If no editable field can be found within the element retrieved with
+ *        focusEditableFieldContainerSelector, the focus will be moved to the next focusable
+ *        element (which won't be an editable field)
+ * @param {String} options.focusEditableFieldContainerSelector
+ *        A CSS selector that will be used to retrieve the container element into which
+ *        the next focused element should be in, when focusEditableFieldAfterApply
+ *        is set to true. This allows to bail out if we can't find a suitable
+ *        focusable field.
+ * @param {String} options.inputAriaLabel
+ *        Optional aria-label attribute value that will be added to the input.
+ * @param {String} options.inputAriaLabelledBy
+ *        Optional aria-labelled-by attribute value that will be added to the input.
+ */
+function editableField(options) {
+  return editableItem(options, function (element, event) {
+    if (!options.element.inplaceEditor) {
+      new InplaceEditor(options, event);
+    }
+  });
+}
+
+exports.editableField = editableField;
+
+/**
+ * Handle events for an element that should respond to
+ * clicks and sit in the editing tab order, and call
+ * a callback when it is activated.
+ *
+ * @param {Object} options
+ *    The options for this editor, including:
+ *    {Element} element: The DOM element.
+ *    {String} trigger: The DOM event that should trigger editing,
+ *      defaults to "click"
+ * @param {Function} callback
+ *        Called when the editor is activated.
+ * @return {Function} function which calls callback
+ */
+function editableItem(options, callback) {
+  const trigger = options.trigger || "click";
+  const element = options.element;
+  element.addEventListener(trigger, function (evt) {
+    if (evt.target.nodeName !== "a") {
+      const win = this.ownerDocument.defaultView;
+      const selection = win.getSelection();
+      if (trigger != "click" || selection.isCollapsed) {
+        callback(element, evt);
+      }
+      evt.stopPropagation();
+    }
+  });
+
+  // If focused by means other than a click, start editing by
+  // pressing enter or space.
+  element.addEventListener(
+    "keypress",
+    function (evt) {
+      if (evt.target.nodeName === "button") {
+        return;
+      }
+
+      if (isKeyIn(evt.keyCode, "RETURN") || isKeyIn(evt.charCode, "SPACE")) {
+        callback(element);
+      }
+    },
+    true
+  );
+
+  // Ugly workaround - the element is focused on mousedown but
+  // the editor is activated on click/mouseup.  This leads
+  // to an ugly flash of the focus ring before showing the editor.
+  // So hide the focus ring while the mouse is down.
+  element.addEventListener("mousedown", function (evt) {
+    if (evt.target.nodeName !== "a") {
+      const cleanup = function () {
+        element.style.removeProperty("outline-style");
+        element.removeEventListener("mouseup", cleanup);
+        element.removeEventListener("mouseout", cleanup);
+      };
+      element.style.setProperty("outline-style", "none");
+      element.addEventListener("mouseup", cleanup);
+      element.addEventListener("mouseout", cleanup);
+    }
+  });
+
+  // Mark the element editable field for tab
+  // navigation while editing.
+  element._editable = true;
+
+  // Save the trigger type so we can dispatch this later
+  element._trigger = trigger;
+
+  // Add button semantics to the element, to indicate that it can be activated.
+  element.setAttribute("role", "button");
+
+  return function turnOnEditMode() {
+    callback(element);
+  };
+}
+
+exports.editableItem = editableItem;
+
+/*
+ * Various API consumers (especially tests) sometimes want to grab the
+ * inplaceEditor expando off span elements. However, when each global has its
+ * own compartment, those expandos live on Xray wrappers that are only visible
+ * within this JSM. So we provide a little workaround here.
+ */
+
+function getInplaceEditorForSpan(span) {
+  return span.inplaceEditor;
+}
+
+exports.getInplaceEditorForSpan = getInplaceEditorForSpan;
+
+class InplaceEditor extends EventEmitter {
+  constructor(options, event) {
+    super();
+
+    this.elt = options.element;
+    const doc = this.elt.ownerDocument;
+    this.doc = doc;
+    this.elt.inplaceEditor = this;
+    this.cssProperties = options.cssProperties;
+    this.cssVariables = options.cssVariables || new Map();
+    this.change = options.change;
+    this.done = options.done;
+    this.contextMenu = options.contextMenu;
+    this.defaultIncrement = options.defaultIncrement || 1;
+    this.destroy = options.destroy;
+    this.initial = options.initial ? options.initial : this.elt.textContent;
+    this.multiline = options.multiline || false;
+    this.maxWidth = options.maxWidth;
+    if (typeof this.maxWidth == "function") {
+      this.maxWidth = this.maxWidth();
+    }
+
+    this.trimOutput =
+      options.trimOutput === undefined ? true : !!options.trimOutput;
+    this.stopOnShiftTab = !!options.stopOnShiftTab;
+    this.stopOnTab = !!options.stopOnTab;
+    this.stopOnReturn = !!options.stopOnReturn;
+    this.contentType = options.contentType || CONTENT_TYPES.PLAIN_TEXT;
+    this.property = options.property;
+    this.popup = options.popup;
+    this.preserveTextStyles =
+      options.preserveTextStyles === undefined
+        ? false
+        : !!options.preserveTextStyles;
+    this.showSuggestCompletionOnEmpty = !!options.showSuggestCompletionOnEmpty;
+    this.focusEditableFieldAfterApply =
+      options.focusEditableFieldAfterApply === true;
+    this.focusEditableFieldContainerSelector =
+      options.focusEditableFieldContainerSelector;
+
+    if (
+      this.focusEditableFieldAfterApply &&
+      !this.focusEditableFieldContainerSelector
+    ) {
+      throw new Error(
+        "focusEditableFieldContainerSelector is mandatory when focusEditableFieldAfterApply is true"
+      );
+    }
+
+    this.#createInput(options);
+
+    // Hide the provided element and add our editor.
+    this.originalDisplay = this.elt.style.display;
+    this.elt.style.display = "none";
+    this.elt.parentNode.insertBefore(this.input, this.elt);
+
+    // After inserting the input to have all CSS styles applied, start autosizing.
+    this.#autosize();
+
+    this.inputCharDimensions = this.#getInputCharDimensions();
+    // Pull out character codes for advanceChars, listing the
+    // characters that should trigger a blur.
+    if (typeof options.advanceChars === "function") {
+      this.#advanceChars = options.advanceChars;
+    } else {
+      const advanceCharcodes = {};
+      const advanceChars = options.advanceChars || "";
+      for (let i = 0; i < advanceChars.length; i++) {
+        advanceCharcodes[advanceChars.charCodeAt(i)] = true;
+      }
+      this.#advanceChars = charCode => charCode in advanceCharcodes;
+    }
+
+    this.input.focus();
+
+    if (typeof options.selectAll == "undefined" || options.selectAll) {
+      this.input.select();
+    }
+
+    const win = doc.defaultView;
+    this.#abortController = new win.AbortController();
+    const eventListenerConfig = { signal: this.#abortController.signal };
+
+    this.input.addEventListener("blur", this.#onBlur, eventListenerConfig);
+    this.input.addEventListener(
+      "keypress",
+      this.#onKeyPress,
+      eventListenerConfig
+    );
+    this.input.addEventListener("input", this.#onInput, eventListenerConfig);
+    this.input.addEventListener(
+      "dblclick",
+      this.#stopEventPropagation,
+      eventListenerConfig
+    );
+    this.input.addEventListener(
+      "click",
+      this.#stopEventPropagation,
+      eventListenerConfig
+    );
+    this.input.addEventListener(
+      "mousedown",
+      this.#stopEventPropagation,
+      eventListenerConfig
+    );
+    this.input.addEventListener(
+      "contextmenu",
+      this.#onContextMenu,
+      eventListenerConfig
+    );
+    win.addEventListener("blur", this.#onWindowBlur, eventListenerConfig);
+
+    this.validate = options.validate;
+
+    if (this.validate) {
+      this.input.addEventListener("keyup", this.#onKeyup, eventListenerConfig);
+    }
+
+    this.#updateSize();
+
+    if (options.start) {
+      options.start(this, event);
+    }
+
+    this.#getGridNamesBeforeCompletion(options.getGridLineNames);
+  }
+  static CONTENT_TYPES = CONTENT_TYPES;
+
+  #abortController;
+  #advanceChars;
+  #applied;
+  #measurement;
+  #openPopupTimeout;
+  #pressedKey;
+  #preventSuggestions;
+  #selectedIndex;
+
+  get currentInputValue() {
+    const val = this.trimOutput ? this.input.value.trim() : this.input.value;
+    return val;
+  }
+
+  /**
+   * Create the input element.
+   *
+   * @param {Object} options
+   * @param {String} options.inputAriaLabel
+   *        Optional aria-label attribute value that will be added to the input.
+   * @param {String} options.inputAriaLabelledBy
+   *        Optional aria-labelledby attribute value that will be added to the input.
+   */
+  #createInput(options = {}) {
+    this.input = this.doc.createElementNS(
+      HTML_NS,
+      this.multiline ? "textarea" : "input"
+    );
+    this.input.inplaceEditor = this;
+
+    if (this.multiline) {
+      // Hide the textarea resize handle.
+      this.input.style.resize = "none";
+      this.input.style.overflow = "hidden";
+      // Also reset padding.
+      this.input.style.padding = "0";
+    }
+
+    this.input.classList.add("styleinspector-propertyeditor");
+    this.input.value = this.initial;
+    if (options.inputAriaLabel) {
+      this.input.setAttribute("aria-label", options.inputAriaLabel);
+    } else if (options.inputAriaLabelledBy) {
+      this.input.setAttribute("aria-labelledby", options.inputAriaLabelledBy);
+    }
+
+    if (!this.preserveTextStyles) {
+      copyTextStyles(this.elt, this.input);
+    }
+  }
+
+  /**
+   * Get rid of the editor.
+   */
+  #clear() {
+    if (!this.input) {
+      // Already cleared.
+      return;
+    }
+
+    this.#abortController.abort();
+    this.#stopAutosize();
+
+    this.elt.style.display = this.originalDisplay;
+
+    if (this.doc.activeElement == this.input) {
+      this.elt.focus();
+    }
+
+    this.input.remove();
+    this.input = null;
+
+    delete this.elt.inplaceEditor;
+    delete this.elt;
+
+    if (this.destroy) {
+      this.destroy();
+    }
+  }
+
+  /**
+   * Keeps the editor close to the size of its input string.  This is pretty
+   * crappy, suggestions for improvement welcome.
+   */
+  #autosize() {
+    // Create a hidden, absolutely-positioned span to measure the text
+    // in the input.  Boo.
+
+    // We can't just measure the original element because a) we don't
+    // change the underlying element's text ourselves (we leave that
+    // up to the client), and b) without tweaking the style of the
+    // original element, it might wrap differently or something.
+    this.#measurement = this.doc.createElementNS(
+      HTML_NS,
+      this.multiline ? "pre" : "span"
+    );
+    this.#measurement.className = "autosizer";
+    this.elt.parentNode.appendChild(this.#measurement);
+    const style = this.#measurement.style;
+    style.visibility = "hidden";
+    style.position = "absolute";
+    style.top = "0";
+    style.left = "0";
+
+    if (this.multiline) {
+      style.whiteSpace = "pre-wrap";
+      style.wordWrap = "break-word";
+      if (this.maxWidth) {
+        style.maxWidth = this.maxWidth + "px";
+        // Use position fixed to measure dimensions without any influence from
+        // the container of the editor.
+        style.position = "fixed";
+      }
+    }
+
+    copyAllStyles(this.input, this.#measurement);
+    this.#updateSize();
+  }
+
+  /**
+   * Clean up the mess created by _autosize().
+   */
+  #stopAutosize() {
+    if (!this.#measurement) {
+      return;
+    }
+    this.#measurement.remove();
+    this.#measurement = null;
+  }
+
+  /**
+   * Size the editor to fit its current contents.
+   */
+  #updateSize() {
+    // Replace spaces with non-breaking spaces.  Otherwise setting
+    // the span's textContent will collapse spaces and the measurement
+    // will be wrong.
+    let content = this.input.value;
+    const unbreakableSpace = "\u00a0";
+
+    // Make sure the content is not empty.
+    if (content === "") {
+      content = unbreakableSpace;
+    }
+
+    // If content ends with a new line, add a blank space to force the autosize
+    // element to adapt its height.
+    if (content.lastIndexOf("\n") === content.length - 1) {
+      content = content + unbreakableSpace;
+    }
+
+    if (!this.multiline) {
+      content = content.replace(/ /g, unbreakableSpace);
+    }
+
+    this.#measurement.textContent = content;
+
+    // Do not use offsetWidth: it will round floating width values.
+    let width = this.#measurement.getBoundingClientRect().width;
+    if (this.multiline) {
+      if (this.maxWidth) {
+        width = Math.min(this.maxWidth, width);
+      }
+      const height = this.#measurement.getBoundingClientRect().height;
+      this.input.style.height = height + "px";
+    }
+    this.input.style.width = width + "px";
+  }
+
+  /**
+   * Get the width and height of a single character in the input to properly
+   * position the autocompletion popup.
+   */
+  #getInputCharDimensions() {
+    // Just make the text content to be 'x' to get the width and height of any
+    // character in a monospace font.
+    this.#measurement.textContent = "x";
+    const width = this.#measurement.clientWidth;
+    const height = this.#measurement.clientHeight;
+    return { width, height };
+  }
+
+  /**
+   * Increment property values in rule view.
+   *
+   * @param {Number} increment
+   *        The amount to increase/decrease the property value.
+   * @return {Boolean} true if value has been incremented.
+   */
+  #incrementValue(increment) {
+    const value = this.input.value;
+    const selectionStart = this.input.selectionStart;
+    const selectionEnd = this.input.selectionEnd;
+
+    const newValue = this.#incrementCSSValue(
+      value,
+      increment,
+      selectionStart,
+      selectionEnd
+    );
+
+    if (!newValue) {
+      return false;
+    }
+
+    this.input.value = newValue.value;
+    this.input.setSelectionRange(newValue.start, newValue.end);
+    this.#doValidation();
+
+    // Call the user's change handler if available.
+    if (this.change) {
+      this.change(this.currentInputValue);
+    }
+
+    return true;
+  }
+
+  /**
+   * Increment the property value based on the property type.
+   *
+   * @param {String} value
+   *        Property value.
+   * @param {Number} increment
+   *        Amount to increase/decrease the property value.
+   * @param {Number} selStart
+   *        Starting index of the value.
+   * @param {Number} selEnd
+   *        Ending index of the value.
+   * @return {Object} object with properties 'value', 'start', and 'end'.
+   */
+  #incrementCSSValue(value, increment, selStart, selEnd) {
+    const range = this.#parseCSSValue(value, selStart);
+    const type = range?.type || "";
+    const rawValue = range ? value.substring(range.start, range.end) : "";
+    const preRawValue = range ? value.substr(0, range.start) : "";
+    const postRawValue = range ? value.substr(range.end) : "";
+    let info;
+
+    let incrementedValue = null,
+      selection;
+    if (type === "num") {
+      if (rawValue == "0") {
+        info = {};
+        info.units = this.#findCompatibleUnit(preRawValue, postRawValue);
+      }
+
+      const newValue = this.#incrementRawValue(rawValue, increment, info);
+      if (newValue !== null) {
+        incrementedValue = newValue;
+        selection = [0, incrementedValue.length];
+      }
+    } else if (type === "hex") {
+      const exprOffset = selStart - range.start;
+      const exprOffsetEnd = selEnd - range.start;
+      const newValue = this.#incHexColor(
+        rawValue,
+        increment,
+        exprOffset,
+        exprOffsetEnd
+      );
+      if (newValue) {
+        incrementedValue = newValue.value;
+        selection = newValue.selection;
+      }
+    } else {
+      if (type === "rgb" || type === "hsl" || type === "hwb") {
+        info = {};
+        const isCSS4Color = !value.includes(",");
+        // In case the value uses the new syntax of the CSS Color 4 specification,
+        // it is split by the spaces and the slash separating the alpha value
+        // between the different color components.
+        // Example: rgb(255 0 0 / 0.5)
+        // Otherwise, the value is represented using the old color syntax and is
+        // split by the commas between the color components.
+        // Example: rgba(255, 0, 0, 0.5)
+        const part =
+          value
+            .substring(range.start, selStart)
+            .split(isCSS4Color ? / ?\/ ?| / : ",").length - 1;
+        if (part === 3) {
+          // alpha
+          info.minValue = 0;
+          info.maxValue = 1;
+        } else if (type === "rgb") {
+          info.minValue = 0;
+          info.maxValue = 255;
+        } else if (part !== 0) {
+          // hsl or hwb percentage
+          info.minValue = 0;
+          info.maxValue = 100;
+
+          // select the previous number if the selection is at the end of a
+          // percentage sign.
+          if (value.charAt(selStart - 1) === "%") {
+            --selStart;
+          }
+        }
+      }
+      return this.#incrementGenericValue(
+        value,
+        increment,
+        selStart,
+        selEnd,
+        info
+      );
+    }
+
+    if (incrementedValue === null) {
+      return null;
+    }
+
+    return {
+      value: preRawValue + incrementedValue + postRawValue,
+      start: range.start + selection[0],
+      end: range.start + selection[1],
+    };
+  }
+
+  /**
+   * Find a compatible unit to use for a CSS number value inserted between the
+   * provided beforeValue and afterValue. The compatible unit will be picked
+   * from a selection of default units corresponding to supported CSS value
+   * dimensions (distance, angle, duration).
+   *
+   * @param {String} beforeValue
+   *        The string preceeding the number value in the current property
+   *        value.
+   * @param {String} afterValue
+   *        The string following the number value in the current property value.
+   * @return {String} a valid unit that can be used for this number value or
+   *         empty string if no match could be found.
+   */
+  #findCompatibleUnit(beforeValue, afterValue) {
+    if (!this.property || !this.property.name) {
+      return "";
+    }
+
+    // A DOM element is used to test the validity of various units. This is to
+    // avoid having to do an async call to the server to get this information.
+    const el = this.doc.createElement("div");
+
+    // Cycle through unitless (""), pixels, degrees and seconds.
+    const units = ["", "px", "deg", "s"];
+    for (const unit of units) {
+      const value = beforeValue + "1" + unit + afterValue;
+      el.style.setProperty(this.property.name, "");
+      el.style.setProperty(this.property.name, value);
+      // The property was set to `""` first, so if the value is no longer `""`,
+      // it means that the second `setProperty` call set a valid property and we
+      // can use this unit.
+      if (el.style.getPropertyValue(this.property.name) !== "") {
+        return unit;
+      }
+    }
+    return "";
+  }
+
+  /**
+   * Parses the property value and type.
+   *
+   * @param {String} value
+   *        Property value.
+   * @param {Number} offset
+   *        Starting index of value.
+   * @return {Object} object with properties 'value', 'start', 'end', and
+   *         'type'.
+   */
+  #parseCSSValue(value, offset) {
+    /* eslint-disable max-len */
+    const reSplitCSS =
+      /(?<url>url\("?[^"\)]+"?\)?)|(?<rgb>rgba?\([^)]*\)?)|(?<hsl>hsla?\([^)]*\)?)|(?<hwb>hwb\([^)]*\)?)|(?<hex>#[\dA-Fa-f]+)|(?<number>-?\d*\.?\d+(%|[a-z]{1,4})?)|"([^"]*)"?|'([^']*)'?|([^,\s\/!\(\)]+)|(!(.*)?)/;
+    /* eslint-enable */
+    let start = 0;
+    let m;
+
+    // retreive values from left to right until we find the one at our offset
+    while ((m = reSplitCSS.exec(value)) && m.index + m[0].length < offset) {
+      value = value.substring(m.index + m[0].length);
+      start += m.index + m[0].length;
+      offset -= m.index + m[0].length;
+    }
+
+    if (!m) {
+      return null;
+    }
+
+    let type;
+    if (m.groups.url) {
+      type = "url";
+    } else if (m.groups.rgb) {
+      type = "rgb";
+    } else if (m.groups.hsl) {
+      type = "hsl";
+    } else if (m.groups.hwb) {
+      type = "hwb";
+    } else if (m.groups.hex) {
+      type = "hex";
+    } else if (m.groups.number) {
+      type = "num";
+    }
+
+    return {
+      value: m[0],
+      start: start + m.index,
+      end: start + m.index + m[0].length,
+      type,
+    };
+  }
+
+  /**
+   * Increment the property value for types other than
+   * number or hex, such as rgb, hsl, hwb, and file names.
+   *
+   * @param {String} value
+   *        Property value.
+   * @param {Number} increment
+   *        Amount to increment/decrement.
+   * @param {Number} offset
+   *        Starting index of the property value.
+   * @param {Number} offsetEnd
+   *        Ending index of the property value.
+   * @param {Object} info
+   *        Object with details about the property value.
+   * @return {Object} object with properties 'value', 'start', and 'end'.
+   */
+  #incrementGenericValue(value, increment, offset, offsetEnd, info) {
+    // Try to find a number around the cursor to increment.
+    let start, end;
+    // Check if we are incrementing in a non-number context (such as a URL)
+    if (
+      /^-?[0-9.]/.test(value.substring(offset, offsetEnd)) &&
+      !/\d/.test(value.charAt(offset - 1) + value.charAt(offsetEnd))
+    ) {
+      // We have a number selected, possibly with a suffix, and we are not in
+      // the disallowed case of just part of a known number being selected.
+      // Use that number.
+      start = offset;
+      end = offsetEnd;
+    } else {
+      // Parse periods as belonging to the number only if we are in a known
+      // number context. (This makes incrementing the 1 in 'image1.gif' work.)
+      const pattern = "[" + (info ? "0-9." : "0-9") + "]*";
+      const before = new RegExp(pattern + "$").exec(value.substr(0, offset))[0]
+        .length;
+      const after = new RegExp("^" + pattern).exec(value.substr(offset))[0]
+        .length;
+
+      start = offset - before;
+      end = offset + after;
+
+      // Expand the number to contain an initial minus sign if it seems
+      // free-standing.
+      if (
+        value.charAt(start - 1) === "-" &&
+        (start - 1 === 0 || /[ (:,='"]/.test(value.charAt(start - 2)))
+      ) {
+        --start;
+      }
+    }
+
+    if (start !== end) {
+      // Include percentages as part of the incremented number (they are
+      // common enough).
+      if (value.charAt(end) === "%") {
+        ++end;
+      }
+
+      const first = value.substr(0, start);
+      let mid = value.substring(start, end);
+      const last = value.substr(end);
+
+      mid = this.#incrementRawValue(mid, increment, info);
+
+      if (mid !== null) {
+        return {
+          value: first + mid + last,
+          start,
+          end: start + mid.length,
+        };
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Increment the property value for numbers.
+   *
+   * @param {String} rawValue
+   *        Raw value to increment.
+   * @param {Number} increment
+   *        Amount to increase/decrease the raw value.
+   * @param {Object} info
+   *        Object with info about the property value.
+   * @return {String} the incremented value.
+   */
+  #incrementRawValue(rawValue, increment, info) {
+    const num = parseFloat(rawValue);
+
+    if (isNaN(num)) {
+      return null;
+    }
+
+    const number = /\d+(\.\d+)?/.exec(rawValue);
+
+    let units = rawValue.substr(number.index + number[0].length);
+    if (info && "units" in info) {
+      units = info.units;
+    }
+
+    // avoid rounding errors
+    let newValue = Math.round((num + increment) * 1000) / 1000;
+
+    if (info && "minValue" in info) {
+      newValue = Math.max(newValue, info.minValue);
+    }
+    if (info && "maxValue" in info) {
+      newValue = Math.min(newValue, info.maxValue);
+    }
+
+    newValue = newValue.toString();
+
+    return newValue + units;
+  }
+
+  /**
+   * Increment the property value for hex.
+   *
+   * @param {String} value
+   *        Property value.
+   * @param {Number} increment
+   *        Amount to increase/decrease the property value.
+   * @param {Number} offset
+   *        Starting index of the property value.
+   * @param {Number} offsetEnd
+   *        Ending index of the property value.
+   * @return {Object} object with properties 'value' and 'selection'.
+   */
+  #incHexColor(rawValue, increment, offset, offsetEnd) {
+    // Return early if no part of the rawValue is selected.
+    if (offsetEnd > rawValue.length && offset >= rawValue.length) {
+      return null;
+    }
+    if (offset < 1 && offsetEnd <= 1) {
+      return null;
+    }
+    // Ignore the leading #.
+    rawValue = rawValue.substr(1);
+    --offset;
+    --offsetEnd;
+
+    // Clamp the selection to within the actual value.
+    offset = Math.max(offset, 0);
+    offsetEnd = Math.min(offsetEnd, rawValue.length);
+    offsetEnd = Math.max(offsetEnd, offset);
+
+    // Normalize #ABC -> #AABBCC.
+    if (rawValue.length === 3) {
+      rawValue =
+        rawValue.charAt(0) +
+        rawValue.charAt(0) +
+        rawValue.charAt(1) +
+        rawValue.charAt(1) +
+        rawValue.charAt(2) +
+        rawValue.charAt(2);
+      offset *= 2;
+      offsetEnd *= 2;
+    }
+
+    // Normalize #ABCD -> #AABBCCDD.
+    if (rawValue.length === 4) {
+      rawValue =
+        rawValue.charAt(0) +
+        rawValue.charAt(0) +
+        rawValue.charAt(1) +
+        rawValue.charAt(1) +
+        rawValue.charAt(2) +
+        rawValue.charAt(2) +
+        rawValue.charAt(3) +
+        rawValue.charAt(3);
+      offset *= 2;
+      offsetEnd *= 2;
+    }
+
+    if (rawValue.length !== 6 && rawValue.length !== 8) {
+      return null;
+    }
+
+    // If no selection, increment an adjacent color, preferably one to the left.
+    if (offset === offsetEnd) {
+      if (offset === 0) {
+        offsetEnd = 1;
+      } else {
+        offset = offsetEnd - 1;
+      }
+    }
+
+    // Make the selection cover entire parts.
+    offset -= offset % 2;
+    offsetEnd += offsetEnd % 2;
+
+    // Remap the increments from [0.1, 1, 10] to [1, 1, 16].
+    if (increment > -1 && increment < 1) {
+      increment = increment < 0 ? -1 : 1;
+    }
+    if (Math.abs(increment) === 10) {
+      increment = increment < 0 ? -16 : 16;
+    }
+
+    const isUpper = rawValue.toUpperCase() === rawValue;
+
+    for (let pos = offset; pos < offsetEnd; pos += 2) {
+      // Increment the part in [pos, pos+2).
+      let mid = rawValue.substr(pos, 2);
+      const value = parseInt(mid, 16);
+
+      if (isNaN(value)) {
+        return null;
+      }
+
+      mid = Math.min(Math.max(value + increment, 0), 255).toString(16);
+
+      while (mid.length < 2) {
+        mid = "0" + mid;
+      }
+      if (isUpper) {
+        mid = mid.toUpperCase();
+      }
+
+      rawValue = rawValue.substr(0, pos) + mid + rawValue.substr(pos + 2);
+    }
+
+    return {
+      value: "#" + rawValue,
+      selection: [offset + 1, offsetEnd + 1],
+    };
+  }
+
+  /**
+   * Cycle through the autocompletion suggestions in the popup.
+   *
+   * @param {Boolean} reverse
+   *        true to select previous item from the popup.
+   * @param {Boolean} noSelect
+   *        true to not select the text after selecting the newly selectedItem
+   *        from the popup.
+   */
+  #cycleCSSSuggestion(reverse, noSelect) {
+    // selectedItem can be null when nothing is selected in an empty editor.
+    const { label, preLabel } = this.popup.selectedItem || {
+      label: "",
+      preLabel: "",
+    };
+    if (reverse) {
+      this.popup.selectPreviousItem();
+    } else {
+      this.popup.selectNextItem();
+    }
+
+    this.#selectedIndex = this.popup.selectedIndex;
+    const input = this.input;
+    let pre = "";
+
+    if (input.selectionStart < input.selectionEnd) {
+      pre = input.value.slice(0, input.selectionStart);
+    } else {
+      pre = input.value.slice(
+        0,
+        input.selectionStart - label.length + preLabel.length
+      );
+    }
+
+    const post = input.value.slice(input.selectionEnd, input.value.length);
+    const item = this.popup.selectedItem;
+    const toComplete = item.label.slice(item.preLabel.length);
+    input.value = pre + toComplete + post;
+
+    if (!noSelect) {
+      input.setSelectionRange(pre.length, pre.length + toComplete.length);
+    } else {
+      input.setSelectionRange(
+        pre.length + toComplete.length,
+        pre.length + toComplete.length
+      );
+    }
+
+    this.#updateSize();
+    // This emit is mainly for the purpose of making the test flow simpler.
+    this.emit("after-suggest");
+  }
+
+  /**
+   * Call the client's done handler and clear out.
+   */
+  #apply(direction, key) {
+    if (this.#applied) {
+      return null;
+    }
+
+    this.#applied = true;
+
+    if (this.done) {
+      const val = this.cancelled ? this.initial : this.currentInputValue;
+      return this.done(val, !this.cancelled, direction, key);
+    }
+
+    return null;
+  }
+
+  /**
+   * Hide the popup and cancel any pending popup opening.
+   */
+  #onWindowBlur = () => {
+    if (this.popup && this.popup.isOpen) {
+      this.popup.hidePopup();
+    }
+
+    if (this.#openPopupTimeout) {
+      this.doc.defaultView.clearTimeout(this.#openPopupTimeout);
+    }
+  };
+
+  /**
+   * Event handler called when the inplace-editor's input loses focus.
+   */
+  #onBlur = event => {
+    if (
+      event &&
+      this.popup &&
+      this.popup.isOpen &&
+      this.popup.selectedIndex >= 0
+    ) {
+      this.#acceptPopupSuggestion();
+    } else {
+      this.#apply();
+      this.#clear();
+    }
+  };
+
+  /**
+   * Before offering autocomplete, set this.gridLineNames as the line names
+   * of the current grid, if they exist.
+   *
+   * @param {Function} getGridLineNames
+   *        A function which gets the line names of the current grid.
+   */
+  async #getGridNamesBeforeCompletion(getGridLineNames) {
+    if (
+      getGridLineNames &&
+      this.property &&
+      GRID_PROPERTY_NAMES.includes(this.property.name)
+    ) {
+      this.gridLineNames = await getGridLineNames();
+    }
+
+    if (
+      this.contentType == CONTENT_TYPES.CSS_VALUE &&
+      this.input &&
+      this.input.value == ""
+    ) {
+      this.#maybeSuggestCompletion(false);
+    }
+  }
+
+  /**
+   * Event handler called by the autocomplete popup when receiving a click
+   * event.
+   */
+  #onAutocompletePopupClick = () => {
+    this.#acceptPopupSuggestion();
+  };
+
+  #acceptPopupSuggestion() {
+    let label, preLabel;
+
+    if (this.#selectedIndex === undefined) {
+      ({ label, preLabel } = this.popup.getItemAtIndex(
+        this.popup.selectedIndex
+      ));
+    } else {
+      ({ label, preLabel } = this.popup.getItemAtIndex(this.#selectedIndex));
+    }
+
+    const input = this.input;
+
+    let pre = "";
+
+    // CSS_MIXED needs special treatment here to make it so that
+    // multiple presses of tab will cycle through completions, but
+    // without selecting the completed text.  However, this same
+    // special treatment will do the wrong thing for other editing
+    // styles.
+    if (
+      input.selectionStart < input.selectionEnd ||
+      this.contentType !== CONTENT_TYPES.CSS_MIXED
+    ) {
+      pre = input.value.slice(0, input.selectionStart);
+    } else {
+      pre = input.value.slice(
+        0,
+        input.selectionStart - label.length + preLabel.length
+      );
+    }
+    const post = input.value.slice(input.selectionEnd, input.value.length);
+    const item = this.popup.selectedItem;
+    this.#selectedIndex = this.popup.selectedIndex;
+    const toComplete = item.label.slice(item.preLabel.length);
+    input.value = pre + toComplete + post;
+    input.setSelectionRange(
+      pre.length + toComplete.length,
+      pre.length + toComplete.length
+    );
+    this.#updateSize();
+    // Wait for the popup to hide and then focus input async otherwise it does
+    // not work.
+    const onPopupHidden = () => {
+      this.popup.off("popup-closed", onPopupHidden);
+      this.doc.defaultView.setTimeout(() => {
+        input.focus();
+        this.emit("after-suggest");
+      }, 0);
+    };
+    this.popup.on("popup-closed", onPopupHidden);
+    this.#hideAutocompletePopup();
+  }
+
+  /**
+   * Handle the input field's keypress event.
+   */
+  // eslint-disable-next-line complexity
+  #onKeyPress = event => {
+    let prevent = false;
+
+    const key = event.keyCode;
+    const input = this.input;
+
+    // We want to autoclose some characters, remember the pressed key in order to process
+    // it later on in maybeSuggestionCompletion().
+    this.#pressedKey = event.key;
+
+    const multilineNavigation =
+      !this.#isSingleLine() && isKeyIn(key, "UP", "DOWN", "LEFT", "RIGHT");
+    const isPlainText = this.contentType == CONTENT_TYPES.PLAIN_TEXT;
+    const isPopupOpen = this.popup && this.popup.isOpen;
+
+    let increment = 0;
+    if (!isPlainText && !multilineNavigation) {
+      increment = this.#getIncrement(event);
+    }
+
+    if (isKeyIn(key, "PAGE_UP", "PAGE_DOWN")) {
+      this.#preventSuggestions = true;
+    }
+
+    let cycling = false;
+    if (increment && this.#incrementValue(increment)) {
+      this.#updateSize();
+      prevent = true;
+      cycling = true;
+    }
+
+    if (isPopupOpen && isKeyIn(key, "UP", "DOWN", "PAGE_UP", "PAGE_DOWN")) {
+      prevent = true;
+      cycling = true;
+      this.#cycleCSSSuggestion(isKeyIn(key, "UP", "PAGE_UP"));
+      this.#doValidation();
+    }
+
+    if (isKeyIn(key, "BACK_SPACE", "DELETE", "LEFT", "RIGHT", "HOME", "END")) {
+      if (isPopupOpen && this.currentInputValue !== "") {
+        this.#hideAutocompletePopup();
+      }
+    } else if (
+      // We may show the suggestion completion if Ctrl+space is pressed, or if an
+      // otherwise unhandled key is pressed and the user is not cycling through the
+      // options in the pop-up menu, it is not an expanded shorthand property, and no
+      // modifier key is pressed.
+      (event.key === " " && event.ctrlKey) ||
+      (!cycling &&
+        !multilineNavigation &&
+        !event.metaKey &&
+        !event.altKey &&
+        !event.ctrlKey)
+    ) {
+      this.#maybeSuggestCompletion(true);
+    }
+
+    if (this.multiline && event.shiftKey && isKeyIn(key, "RETURN")) {
+      prevent = false;
+    } else if (
+      this.#advanceChars(event.charCode, input.value, input.selectionStart) ||
+      isKeyIn(key, "RETURN", "TAB")
+    ) {
+      prevent = true;
+
+      const ctrlOrCmd = isOSX ? event.metaKey : event.ctrlKey;
+
+      let direction;
+      if (
+        (this.stopOnReturn && isKeyIn(key, "RETURN") && !ctrlOrCmd) ||
+        (this.stopOnTab && !event.shiftKey && isKeyIn(key, "TAB")) ||
+        (this.stopOnShiftTab && event.shiftKey && isKeyIn(key, "TAB"))
+      ) {
+        direction = null;
+      } else if (event.shiftKey && isKeyIn(key, "TAB")) {
+        direction = FOCUS_BACKWARD;
+      } else {
+        direction = FOCUS_FORWARD;
+      }
+
+      // Now we don't want to suggest anything as we are moving out.
+      this.#preventSuggestions = true;
+      // But we still want to show suggestions for css values. i.e. moving out
+      // of css property input box in forward direction
+      if (
+        this.contentType == CONTENT_TYPES.CSS_PROPERTY &&
+        direction == FOCUS_FORWARD
+      ) {
+        this.#preventSuggestions = false;
+      }
+
+      if (isKeyIn(key, "TAB") && this.contentType == CONTENT_TYPES.CSS_MIXED) {
+        if (this.popup && input.selectionStart < input.selectionEnd) {
+          event.preventDefault();
+          input.setSelectionRange(input.selectionEnd, input.selectionEnd);
+          this.emit("after-suggest");
+          return;
+        } else if (this.popup && this.popup.isOpen) {
+          event.preventDefault();
+          this.#cycleCSSSuggestion(event.shiftKey, true);
+          return;
+        }
+      }
+
+      this.#apply(direction, key);
+
+      // Close the popup if open
+      if (this.popup && this.popup.isOpen) {
+        this.#hideAutocompletePopup();
+      }
+
+      if (direction !== null && focusManager.focusedElement === input) {
+        // If the focused element wasn't changed by the done callback,
+        // move the focus as requested.
+        const next = moveFocus(
+          this.doc.defaultView,
+          direction,
+          this.focusEditableFieldAfterApply,
+          this.focusEditableFieldContainerSelector
+        );
+
+        // If the next node to be focused has been tagged as an editable
+        // node, trigger editing using the configured event
+        if (next && next.ownerDocument === this.doc && next._editable) {
+          const e = this.doc.createEvent("Event");
+          e.initEvent(next._trigger, true, true);
+          next.dispatchEvent(e);
+        }
+      }
+
+      this.#clear();
+    } else if (isKeyIn(key, "ESCAPE")) {
+      // Cancel and blur ourselves.
+      // Now we don't want to suggest anything as we are moving out.
+      this.#preventSuggestions = true;
+      // Close the popup if open
+      if (this.popup && this.popup.isOpen) {
+        this.#hideAutocompletePopup();
+      }
+      prevent = true;
+      this.cancelled = true;
+      this.#apply();
+      this.#clear();
+      event.stopPropagation();
+    } else if (isKeyIn(key, "SPACE")) {
+      // No need for leading spaces here.  This is particularly
+      // noticable when adding a property: it's very natural to type
+      // <name>: (which advances to the next property) then spacebar.
+      prevent = !input.value;
+    }
+
+    if (prevent) {
+      event.preventDefault();
+    }
+  };
+
+  #onContextMenu = event => {
+    if (this.contextMenu) {
+      // Call stopPropagation() and preventDefault() here so that avoid to show default
+      // context menu in about:devtools-toolbox. See Bug 1515265.
+      event.stopPropagation();
+      event.preventDefault();
+      this.contextMenu(event);
+    }
+  };
+
+  /**
+   * Open the autocomplete popup, adding a custom click handler and classname.
+   *
+   * @param {Number} offset
+   *        X-offset relative to the input starting edge.
+   * @param {Number} selectedIndex
+   *        The index of the item that should be selected. Use -1 to have no
+   *        item selected.
+   */
+  #openAutocompletePopup(offset, selectedIndex) {
+    this.popup.on("popup-click", this.#onAutocompletePopupClick);
+    this.popup.openPopup(this.input, offset, 0, selectedIndex);
+  }
+
+  /**
+   * Remove the custom classname and click handler and close the autocomplete
+   * popup.
+   */
+  #hideAutocompletePopup() {
+    this.popup.off("popup-click", this.#onAutocompletePopupClick);
+    this.popup.hidePopup();
+  }
+
+  /**
+   * Get the increment/decrement step to use for the provided key event.
+   */
+  #getIncrement(event) {
+    const getSmallIncrementKey = evt => {
+      if (isOSX) {
+        return evt.altKey;
+      }
+      return evt.ctrlKey;
+    };
+
+    const largeIncrement = 100;
+    const mediumIncrement = 10;
+    const smallIncrement = 0.1;
+
+    let increment = 0;
+    const key = event.keyCode;
+
+    if (isKeyIn(key, "UP", "PAGE_UP")) {
+      increment = 1 * this.defaultIncrement;
+    } else if (isKeyIn(key, "DOWN", "PAGE_DOWN")) {
+      increment = -1 * this.defaultIncrement;
+    }
+
+    if (event.shiftKey && !getSmallIncrementKey(event)) {
+      if (isKeyIn(key, "PAGE_UP", "PAGE_DOWN")) {
+        increment *= largeIncrement;
+      } else {
+        increment *= mediumIncrement;
+      }
+    } else if (getSmallIncrementKey(event) && !event.shiftKey) {
+      increment *= smallIncrement;
+    }
+
+    return increment;
+  }
+
+  /**
+   * Handle the input field's keyup event.
+   */
+  #onKeyup = () => {
+    this.#applied = false;
+  };
+
+  /**
+   * Handle changes to the input text.
+   */
+  #onInput = () => {
+    // Validate the entered value.
+    this.#doValidation();
+
+    // Update size if we're autosizing.
+    if (this.#measurement) {
+      this.#updateSize();
+    }
+
+    // Call the user's change handler if available.
+    if (this.change) {
+      this.change(this.currentInputValue);
+    }
+
+    // In case that the current value becomes empty, show the suggestions if needed.
+    if (this.currentInputValue === "" && this.showSuggestCompletionOnEmpty) {
+      this.#maybeSuggestCompletion(false);
+    }
+  };
+
+  /**
+   * Stop propagation on the provided event
+   */
+  #stopEventPropagation(e) {
+    e.stopPropagation();
+  }
+
+  /**
+   * Fire validation callback with current input
+   */
+  #doValidation() {
+    if (this.validate && this.input) {
+      this.validate(this.input.value);
+    }
+  }
+
+  /**
+   * Handles displaying suggestions based on the current input.
+   *
+   * @param {Boolean} autoInsert
+   *        Pass true to automatically insert the most relevant suggestion.
+   */
+  #maybeSuggestCompletion(autoInsert) {
+    // Input can be null in cases when you intantaneously switch out of it.
+    if (!this.input) {
+      return;
+    }
+
+    const preTimeoutQuery = this.input.value;
+
+    // Since we are calling this method from a keypress event handler, the
+    // |input.value| does not include currently typed character. Thus we perform
+    // this method async.
+    // eslint-disable-next-line complexity
+    this.#openPopupTimeout = this.doc.defaultView.setTimeout(() => {
+      if (this.#preventSuggestions) {
+        this.#preventSuggestions = false;
+        return;
+      }
+      if (this.contentType == CONTENT_TYPES.PLAIN_TEXT) {
+        return;
+      }
+      if (!this.input) {
+        return;
+      }
+      const input = this.input;
+      // The length of input.value should be increased by 1
+      if (input.value.length - preTimeoutQuery.length > 1) {
+        return;
+      }
+      const query = input.value.slice(0, input.selectionStart);
+      let startCheckQuery = query;
+      if (query == null) {
+        return;
+      }
+      // If nothing is selected and there is a word (\w) character after the cursor, do
+      // not autocomplete.
+      if (
+        input.selectionStart == input.selectionEnd &&
+        input.selectionStart < input.value.length
+      ) {
+        const nextChar = input.value.slice(input.selectionStart)[0];
+        // Check if the next character is a valid word character, no suggestion should be
+        // provided when preceeding a word.
+        if (/[\w-]/.test(nextChar)) {
+          // This emit is mainly to make the test flow simpler.
+          this.emit("after-suggest", "nothing to autocomplete");
+          return;
+        }
+      }
+
+      let list = [];
+      let postLabelValues = [];
+
+      if (this.contentType == CONTENT_TYPES.CSS_PROPERTY) {
+        list = this.#getCSSVariableNames().concat(this.#getCSSPropertyList());
+      } else if (this.contentType == CONTENT_TYPES.CSS_VALUE) {
+        // Get the last query to be completed before the caret.
+        const match = /([^\s,.\/]+$)/.exec(query);
+        if (match) {
+          startCheckQuery = match[0];
+        } else {
+          startCheckQuery = "";
+        }
+
+        // Check if the query to be completed is a CSS variable.
+        const varMatch = /^var\(([^\s]+$)/.exec(startCheckQuery);
+
+        if (varMatch && varMatch.length == 2) {
+          startCheckQuery = varMatch[1];
+          list = this.#getCSSVariableNames();
+          postLabelValues = list.map(varName =>
+            this.#getCSSVariableValue(varName)
+          );
+        } else {
+          list = [
+            "!important",
+            ...this.#getCSSValuesForPropertyName(this.property.name),
+          ];
+        }
+
+        if (query == "") {
+          // Do not suggest '!important' without any manually typed character.
+          list.splice(0, 1);
+        }
+      } else if (
+        this.contentType == CONTENT_TYPES.CSS_MIXED &&
+        /^\s*style\s*=/.test(query)
+      ) {
+        // Check if the style attribute is closed before the selection.
+        const styleValue = query.replace(/^\s*style\s*=\s*/, "");
+        // Look for a quote matching the opening quote (single or double).
+        if (/^("[^"]*"|'[^']*')/.test(styleValue)) {
+          // This emit is mainly to make the test flow simpler.
+          this.emit("after-suggest", "nothing to autocomplete");
+          return;
+        }
+
+        // Detecting if cursor is at property or value;
+        const match = query.match(/([:;"'=]?)\s*([^"';:=]+)?$/);
+        if (match && match.length >= 2) {
+          if (match[1] == ":") {
+            // We are in CSS value completion
+            const propertyName = query.match(
+              /[;"'=]\s*([^"';:= ]+)\s*:\s*[^"';:=]*$/
+            )[1];
+            list = [
+              "!important;",
+              ...this.#getCSSValuesForPropertyName(propertyName),
+            ];
+            const matchLastQuery = /([^\s,.\/]+$)/.exec(match[2] || "");
+            if (matchLastQuery) {
+              startCheckQuery = matchLastQuery[0];
+            } else {
+              startCheckQuery = "";
+            }
+            if (!match[2]) {
+              // Don't suggest '!important' without any manually typed character
+              list.splice(0, 1);
+            }
+          } else if (match[1]) {
+            // We are in CSS property name completion
+            list = this.#getCSSVariableNames().concat(
+              this.#getCSSPropertyList()
+            );
+            startCheckQuery = match[2];
+          }
+          if (startCheckQuery == null) {
+            // This emit is mainly to make the test flow simpler.
+            this.emit("after-suggest", "nothing to autocomplete");
+            return;
+          }
+        }
+      }
+
+      if (!this.popup) {
+        // This emit is mainly to make the test flow simpler.
+        this.emit("after-suggest", "no popup");
+        return;
+      }
+
+      const finalList = [];
+      const length = list.length;
+      for (let i = 0, count = 0; i < length && count < MAX_POPUP_ENTRIES; i++) {
+        if (startCheckQuery != null && list[i].startsWith(startCheckQuery)) {
+          count++;
+          finalList.push({
+            preLabel: startCheckQuery,
+            label: list[i],
+            postLabel: postLabelValues[i] ? postLabelValues[i] : "",
+          });
+        } else if (count > 0) {
+          // Since count was incremented, we had already crossed the entries
+          // which would have started with query, assuming that list is sorted.
+          break;
+        } else if (startCheckQuery != null && list[i][0] > startCheckQuery[0]) {
+          // We have crossed all possible matches alphabetically.
+          break;
+        }
+      }
+
+      // Sort items starting with [a-z0-9] first, to make sure vendor-prefixed
+      // values and "!important" are suggested only after standard values.
+      finalList.sort((item1, item2) => {
+        // Get the expected alphabetical comparison between the items.
+        let comparison = item1.label.localeCompare(item2.label);
+        if (/^\w/.test(item1.label) != /^\w/.test(item2.label)) {
+          // One starts with [a-z0-9], one does not: flip the comparison.
+          comparison = -1 * comparison;
+        }
+        return comparison;
+      });
+
+      let index = 0;
+      if (startCheckQuery) {
+        // Only select a "best" suggestion when the user started a query.
+        const cssValues = finalList.map(item => item.label);
+        index = findMostRelevantCssPropertyIndex(cssValues);
+      }
+
+      // Insert the most relevant item from the final list as the input value.
+      if (autoInsert && finalList[index]) {
+        const item = finalList[index].label;
+        input.value =
+          query +
+          item.slice(startCheckQuery.length) +
+          input.value.slice(query.length);
+        input.setSelectionRange(
+          query.length,
+          query.length + item.length - startCheckQuery.length
+        );
+        this.#updateSize();
+      }
+
+      // Display the list of suggestions if there are more than one.
+      if (finalList.length > 1) {
+        // Calculate the popup horizontal offset.
+        const indent = this.input.selectionStart - startCheckQuery.length;
+        let offset = indent * this.inputCharDimensions.width;
+        offset = this.#isSingleLine() ? offset : 0;
+
+        // Select the most relevantItem if autoInsert is allowed
+        const selectedIndex = autoInsert ? index : -1;
+
+        // Open the suggestions popup.
+        this.popup.setItems(finalList, selectedIndex);
+        this.#openAutocompletePopup(offset, selectedIndex);
+      } else {
+        this.#hideAutocompletePopup();
+      }
+
+      this.#autocloseParenthesis();
+
+      // This emit is mainly for the purpose of making the test flow simpler.
+      this.emit("after-suggest");
+      this.#doValidation();
+    }, 0);
+  }
+
+  /**
+   * Automatically add closing parenthesis and skip closing parenthesis when needed.
+   */
+  #autocloseParenthesis() {
+    // Split the current value at the cursor index to rebuild the string.
+    const parts = this.#splitStringAt(
+      this.input.value,
+      this.input.selectionStart
+    );
+
+    // Lookup the character following the caret to know if the string should be modified.
+    const nextChar = parts[1][0];
+
+    // Autocomplete closing parenthesis if the last key pressed was "(" and the next
+    // character is not a "word" character.
+    if (this.#pressedKey == "(" && !isWordChar(nextChar)) {
+      this.#updateValue(parts[0] + ")" + parts[1]);
+    }
+
+    // Skip inserting ")" if the next character is already a ")" (note that we actually
+    // insert and remove the extra ")" here, as the input has already been modified).
+    if (this.#pressedKey == ")" && nextChar == ")") {
+      this.#updateValue(parts[0] + parts[1].substring(1));
+    }
+
+    this.#pressedKey = null;
+  }
+
+  /**
+   * Update the current value of the input while preserving the caret position.
+   */
+  #updateValue(str) {
+    const start = this.input.selectionStart;
+    this.input.value = str;
+    this.input.setSelectionRange(start, start);
+    this.#updateSize();
+  }
+
+  /**
+   * Split the provided string at the provided index. Returns an array of two strings.
+   * _splitStringAt("1234567", 3) will return ["123", "4567"]
+   */
+  #splitStringAt(str, index) {
+    return [str.substring(0, index), str.substring(index, str.length)];
+  }
+
+  /**
+   * Check if the current input is displaying more than one line of text.
+   *
+   * @return {Boolean} true if the input has a single line of text
+   */
+  #isSingleLine() {
+    if (!this.multiline) {
+      // Checking the inputCharDimensions.height only makes sense with multiline
+      // editors, because the textarea is directly sized using
+      // inputCharDimensions (see _updateSize()).
+      // By definition if !this.multiline, then we are in single line mode.
+      return true;
+    }
+    const inputRect = this.input.getBoundingClientRect();
+    return inputRect.height < 2 * this.inputCharDimensions.height;
+  }
+
+  /**
+   * Returns the list of CSS properties to use for the autocompletion. This
+   * method is overridden by tests in order to use mocked suggestion lists.
+   *
+   * @return {Array} array of CSS property names (Strings)
+   */
+  #getCSSPropertyList() {
+    return this.cssProperties.getNames().sort();
+  }
+
+  /**
+   * Returns a list of CSS values valid for a provided property name to use for
+   * the autocompletion. This method is overridden by tests in order to use
+   * mocked suggestion lists.
+   *
+   * @param {String} propertyName
+   * @return {Array} array of CSS property values (Strings)
+   */
+  #getCSSValuesForPropertyName(propertyName) {
+    const gridLineList = [];
+    if (this.gridLineNames) {
+      if (GRID_ROW_PROPERTY_NAMES.includes(this.property.name)) {
+        gridLineList.push(...this.gridLineNames.rows);
+      }
+      if (GRID_COL_PROPERTY_NAMES.includes(this.property.name)) {
+        gridLineList.push(...this.gridLineNames.cols);
+      }
+    }
+    // Must be alphabetically sorted before comparing the results with
+    // the user input, otherwise we will lose some results.
+    return gridLineList
+      .concat(this.cssProperties.getValues(propertyName))
+      .sort();
+  }
+
+  /**
+   * Returns the list of all CSS variables to use for the autocompletion.
+   *
+   * @return {Array} array of CSS variable names (Strings)
+   */
+  #getCSSVariableNames() {
+    return Array.from(this.cssVariables.keys()).sort();
+  }
+
+  /**
+   * Returns the variable's value for the given CSS variable name.
+   *
+   * @param {String} varName
+   *        The variable name to retrieve the value of
+   * @return {String} the variable value to the given CSS variable name
+   */
+  #getCSSVariableValue(varName) {
+    return this.cssVariables.get(varName);
+  }
+}
+
+exports.InplaceEditor = InplaceEditor;
+
+/**
+ * Copy text-related styles from one element to another.
+ */
+function copyTextStyles(from, to) {
+  const win = from.ownerDocument.defaultView;
+  const style = win.getComputedStyle(from);
+
+  to.style.fontFamily = style.fontFamily;
+  to.style.fontSize = style.fontSize;
+  to.style.fontWeight = style.fontWeight;
+  to.style.fontStyle = style.fontStyle;
+}
+
+/**
+ * Copy all styles which could have an impact on the element size.
+ */
+function copyAllStyles(from, to) {
+  const win = from.ownerDocument.defaultView;
+  const style = win.getComputedStyle(from);
+
+  copyTextStyles(from, to);
+  to.style.lineHeight = style.lineHeight;
+
+  // If box-sizing is set to border-box, box model styles also need to be
+  // copied.
+  const boxSizing = style.boxSizing;
+  if (boxSizing === "border-box") {
+    to.style.boxSizing = boxSizing;
+    copyBoxModelStyles(from, to);
+  }
+}
+
+/**
+ * Copy box model styles that can impact width and height measurements when box-
+ * sizing is set to "border-box" instead of "content-box".
+ *
+ * @param {DOMNode} from
+ *        the element from which styles are copied
+ * @param {DOMNode} to
+ *        the element on which copied styles are applied
+ */
+function copyBoxModelStyles(from, to) {
+  const properties = [
+    // Copy all paddings.
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    // Copy border styles.
+    "borderTopStyle",
+    "borderRightStyle",
+    "borderBottomStyle",
+    "borderLeftStyle",
+    // Copy border widths.
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+  ];
+
+  const win = from.ownerDocument.defaultView;
+  const style = win.getComputedStyle(from);
+  for (const property of properties) {
+    to.style[property] = style[property];
+  }
+}
+
+/**
+ * Trigger a focus change similar to pressing tab/shift-tab.
+ *
+ * @param {Window} win: The window into which the focus should be moved
+ * @param {Number} direction: See Services.focus.MOVEFOCUS_*
+ * @param {Boolean} focusEditableField: Set to true to move the focus to the previous/next
+ *        editable field. If not set, the focus will be set on the next focusable element.
+ *        The function might still put the focus on a non-editable field, if none is found
+ *        within the element matching focusEditableFieldContainerSelector
+ * @param {String} focusEditableFieldContainerSelector: A CSS selector the editabled element
+ *        we want to focus should be in. This is only used when focusEditableField is set
+ *        to true.
+ *        It's important to pass a boundary otherwise we might hit an infinite loop
+ * @returns {Element} The element that received the focus
+ */
+function moveFocus(
+  win,
+  direction,
+  focusEditableField,
+  focusEditableFieldContainerSelector
+) {
+  if (!focusEditableField) {
+    return focusManager.moveFocus(win, null, direction, 0);
+  }
+
+  if (!win.document.querySelector(focusEditableFieldContainerSelector)) {
+    console.error(
+      focusEditableFieldContainerSelector,
+      "can't be found in document.",
+      `focusEditableFieldContainerSelector should match an existing element`
+    );
+    return focusManager.moveFocus(win, null, direction, 0);
+  }
+
+  // Let's look for the next/previous editable element to focus
+  while (true) {
+    const focusedElement = focusManager.moveFocus(win, null, direction, 0);
+    // The _editable property is set by the InplaceEditor on the target element
+    if (focusedElement._editable) {
+      return focusedElement;
+    }
+
+    // If the focus was moved outside of the container, simply return the focused element
+    if (!focusedElement.closest(focusEditableFieldContainerSelector)) {
+      return focusedElement;
+    }
+  }
+}