tor-browser

registered-property-editor.js (6050B)

---

/* 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/. */

"use strict";

const EventEmitter = require("resource://devtools/shared/event-emitter.js");
const {
 appendText,
 createChild,
} = require("resource://devtools/client/inspector/shared/utils.js");

const INDENT_SIZE = 2;
const INDENT_STR = " ".repeat(INDENT_SIZE);

/**
* RegisteredPropertyEditor creates a list of TextPropertyEditors for a given
* CSS registered property propertyDefinition that can be rendered in the Rules view.
*
* @param {CssRuleView} ruleView
*        The CssRuleView containg the document holding this rule editor.
* @param {Rule} rule
*        The Rule object we're editing.
*/
class RegisteredPropertyEditor extends EventEmitter {
 /**
  * @param {CssRuleView} ruleView
  *        The CssRuleView containing the document holding this rule editor.
  * @param {object} propertyDefinition
  *        The property definition data as returned by PageStyleActor's getRegisteredProperties
  */
 constructor(ruleView, propertyDefinition) {
   super();

   this.#doc = ruleView.styleDocument;
   this.#propertyDefinition = propertyDefinition;
   this.#createElement();
 }

 #doc;
 #propertyDefinition;
 // The HTMLElement that will represent the registered property. Populated in #createElement.
 element = null;

 #createElement() {
   this.element = this.#doc.createElement("div");
   this.element.className = "ruleview-rule devtools-monospace";
   this.element.setAttribute("uneditable", true);
   this.element.setAttribute("unmatched", false);
   this.element.setAttribute("data-name", this.#propertyDefinition.name);

   // Give a relative position for the inplace editor's measurement
   // span to be placed absolutely against.
   this.element.style.position = "relative";

   const code = createChild(this.element, "code", {
     class: "ruleview-code",
   });

   const header = createChild(code, "header", {});

   this.propertyName = createChild(header, "span", {
     class: "ruleview-registered-property-name",
     textContent: this.#propertyDefinition.name,
   });

   this.openBrace = createChild(header, "span", {
     class: "ruleview-ruleopen",
     textContent: " {",
   });

   // We can't use a proper "ol" as it will mess with selection copy text,
   // adding spaces on list item instead of the one we craft (.ruleview-rule-indent)
   this.propertyList = createChild(code, "div", {
     class: "ruleview-propertylist",
     role: "list",
   });

   this.#populateProperties();

   this.closeBrace = createChild(code, "div", {
     class: "ruleview-ruleclose",
     textContent: "}",
   });
 }

 /**
  * Sets the content of this.#propertyList with the contents of the registered property .
  */
 #populateProperties() {
   const properties = [
     {
       name: "syntax",
       value: `"${this.#propertyDefinition.syntax}"`,
     },
     {
       name: "inherits",
       value: this.#propertyDefinition.inherits,
     },
   ];

   // The initial value may not be set, when syntax is "*", so let's only display
   // it when it is actually set.
   if (this.#propertyDefinition.initialValue !== null) {
     // For JS-defined properties, we want to display them in the same syntax that
     // was used in CSS.registerProperty (so we'll show `initialValue` and not `initial-value`).
     properties.push({
       name: this.#propertyDefinition.fromJS
         ? "initialValue"
         : "initial-value",
       value: this.#propertyDefinition.fromJS
         ? `"${this.#propertyDefinition.initialValue}"`
         : this.#propertyDefinition.initialValue,
     });
   }

   // When the property is registered with CSS.registerProperty, we want to match the
   // object shape of the parameter, so include the "name" property.
   if (this.#propertyDefinition.fromJS) {
     properties.unshift({
       name: "name",
       value: `"${this.#propertyDefinition.name}"`,
     });
   }

   for (const { name, value } of properties) {
     // XXX: We could use the TextPropertyEditor here.
     // Pros:
     // - we'd get the similar markup, so styling would be easier
     // - the value would be properly parsed so our various swatches and popups would work
     //   out of the box
     // - rule view filtering would also work out of the box
     // Cons:
     // - it is quite tied with the Rules view regular rule, which mean we'd have
     //   to modify it to accept registered properties.

     const element = createChild(this.propertyList, "div", {
       role: "listitem",
     });
     const container = createChild(element, "div", {
       class: "ruleview-propertycontainer",
     });

     createChild(container, "span", {
       class: "ruleview-rule-indent clipboard-only",
       textContent: INDENT_STR,
     });

     const nameContainer = createChild(container, "span", {
       class: "ruleview-namecontainer",
     });

     createChild(nameContainer, "span", {
       class: "ruleview-propertyname theme-fg-color3",
       textContent: name,
     });

     appendText(nameContainer, ": ");

     // Create a span that will hold the property and semicolon.
     // Use this span to create a slightly larger click target
     // for the value.
     const valueContainer = createChild(container, "span", {
       class: "ruleview-propertyvaluecontainer",
     });

     // Property value, editable when focused.  Changes to the
     // property value are applied as they are typed, and reverted
     // if the user presses escape.
     createChild(valueContainer, "span", {
       class: "ruleview-propertyvalue theme-fg-color1",
       textContent: value,
     });

     appendText(valueContainer, this.#propertyDefinition.fromJS ? "," : ";");

     this.propertyList.appendChild(element);
   }
 }
}

module.exports = RegisteredPropertyEditor;