Bug 1463843 - Save the initial commited value in the first update call after text property editor calls create. r=pbro

In TextPropertyEditor, we call create() follow by update(). In create() we are parsing the
CSS property to store as the last committed values and this is unnnecessary and expensive
since we also parse the CSS property afterwards in update().

This changes moves the storing of the committed value over to the initial update() call
after create().

devtools/client/inspector/rules/views/text-property-editor.js

@@ -175,20 +175,6 @@ TextPropertyEditor.prototype = {
     this.valueSpan.textProperty = this.prop;
     this.nameSpan.textProperty = this.prop;
 
-    // If the value is a color property we need to put it through the parser
-    // so that colors can be coerced into the default color type. This prevents
-    // us from thinking that when colors are coerced they have been changed by
-    // the user.
-    const outputParser = this.ruleView._outputParser;
-    const frag = outputParser.parseCssProperty(this.prop.name, this.prop.value);
-    const parsedValue = frag.textContent;
-
-    // Save the initial value as the last committed value,
-    // for restoring after pressing escape.
-    this.committed = { name: this.prop.name,
-                       value: parsedValue,
-                       priority: this.prop.priority };
-
     appendText(this.valueContainer, ";");
 
     this.warning = createChild(this.container, "div", {
@@ -421,6 +407,17 @@ TextPropertyEditor.prototype = {
       isVariableInUse: varName => this.rule.elementStyle.getVariable(varName),
     };
     const frag = outputParser.parseCssProperty(name, val, parserOptions);
+
+    // Save the initial value as the last committed value,
+    // for restoring after pressing escape.
+    if (!this.committed) {
+      this.committed = {
+        name,
+        value: frag.textContent,
+        priority: this.prop.priority,
+      };
+    }
+
     this.valueSpan.innerHTML = "";
     this.valueSpan.appendChild(frag);