B2G/gecko/browser/devtools/styleinspector/CssRuleView.jsm
/**
   * Create the property editor's DOM.
   */
Create the property editor's DOM.
Create the property editor ' s DOM .
function TextPropertyEditor_create()
  {
    this.element = this.doc.createElementNS(HTML_NS, "li");
    this.element.classList.add("ruleview-property");
    this.enable = createChild(this.element, "input", {
      class: "ruleview-enableproperty",
      type: "checkbox",
      tabindex: "-1"
    });
    this.enable.addEventListener("click", this._onEnableClicked, true);
    this.expander = createChild(this.element, "span", {
      class: "ruleview-expander"
    });
    this.expander.addEventListener("click", this._onExpandClicked, true);
    this.nameContainer = createChild(this.element, "span", {
      class: "ruleview-namecontainer"
    });
    this.nameContainer.addEventListener("click", function(aEvent) {
      aEvent.stopPropagation();
      if (aEvent.target === propertyContainer) {
        this.nameSpan.click();
      }
    }.bind(this), false);
    this.nameSpan = createChild(this.nameContainer, "span", {
      class: "ruleview-propertyname",
      tabindex: "0",
    });
    editableField({
      start: this._onStartEditing,
      element: this.nameSpan,
      done: this._onNameDone,
      advanceChars: ':'
    });
    appendText(this.nameContainer, ": ");
    let propertyContainer = createChild(this.element, "span", {
      class: "ruleview-propertycontainer"
    });
    propertyContainer.addEventListener("click", function(aEvent) {
      aEvent.stopPropagation();
      if (aEvent.target === propertyContainer) {
        this.valueSpan.click();
      }
    }.bind(this), false);
    this.valueSpan = createChild(propertyContainer, "span", {
      class: "ruleview-propertyvalue",
      tabindex: "0",
    });
    this.committed = { name: this.prop.name,
                       value: this.prop.value,
                       priority: this.prop.priority };
    appendText(propertyContainer, ";");
    this.warning = createChild(this.element, "div", {
      hidden: "",
      class: "ruleview-warning",
      title: CssLogic.l10n("rule.warning.title"),
    });
    this.computed = createChild(this.element, "ul", {
      class: "ruleview-computedlist",
    });
    editableField({
      start: this._onStartEditing,
      element: this.valueSpan,
      done: this._onValueDone,
      validate: this._validate.bind(this),
      warning: this.warning,
      advanceChars: ';'
    });
  }
function TextPropertyEditor_create ( ) { this . element = this . doc . createElementNS ( HTML_NS , "li" ) ; this . element . classList . add ( "ruleview-property" ) ; this . enable = createChild ( this . element , "input" , { class : "ruleview-enableproperty" , type : "checkbox" , tabindex : "-1" } ) ; this . enable . addEventListener ( "click" , this . _onEnableClicked , true ) ; this . expander = createChild ( this . element , "span" , { class : "ruleview-expander" } ) ; this . expander . addEventListener ( "click" , this . _onExpandClicked , true ) ; this . nameContainer = createChild ( this . element , "span" , { class : "ruleview-namecontainer" } ) ; this . nameContainer . addEventListener ( "click" , function ( aEvent ) { aEvent . stopPropagation ( ) ; if ( aEvent . target === propertyContainer ) { this . nameSpan . click ( ) ; } } . bind ( this ) , false ) ; this . nameSpan = createChild ( this . nameContainer , "span" , { class : "ruleview-propertyname" , tabindex : "0" , } ) ; editableField ( { start : this . _onStartEditing , element : this . nameSpan , done : this . _onNameDone , advanceChars : ':' } ) ; appendText ( this . nameContainer , ": " ) ; let propertyContainer = createChild ( this . element , "span" , { class : "ruleview-propertycontainer" } ) ; propertyContainer . addEventListener ( "click" , function ( aEvent ) { aEvent . stopPropagation ( ) ; if ( aEvent . target === propertyContainer ) { this . valueSpan . click ( ) ; } } . bind ( this ) , false ) ; this . valueSpan = createChild ( propertyContainer , "span" , { class : "ruleview-propertyvalue" , tabindex : "0" , } ) ; this . committed = { name : this . prop . name , value : this . prop . value , priority : this . prop . priority } ; appendText ( propertyContainer , ";" ) ; this . warning = createChild ( this . element , "div" , { hidden : "" , class : "ruleview-warning" , title : CssLogic . l10n ( "rule.warning.title" ) , } ) ; this . computed = createChild ( this . element , "ul" , { class : "ruleview-computedlist" , } ) ; editableField ( { start : this . _onStartEditing , element : this . valueSpan , done : this . _onValueDone , validate : this . _validate . bind ( this ) , warning : this . warning , advanceChars : ';' } ) ; }
Create the property editor's DOM.
Create the property editor ' s DOM .
// The enable checkbox will disable or enable the rule. // Click to expand the computed properties of the text property. // Clicks within the name shouldn't propagate any further. // Property name, editable when focused.  Property name // is committed when the editor is unfocused. // Create a span that will hold the property and semicolon. // Use this span to create a slightly larger click target // for the value. // Clicks within the value shouldn't propagate any further. // Property value, editable when focused.  Changes to the // property value are applied as they are typed, and reverted // if the user presses escape. // Save the initial value as the last committed value, // for restoring after pressing escape. // Holds the viewers for the computed properties. // will be populated in |_updateComputed|.