Issue 5862 (Crop long CSS values in Style side panel)

http://code.google.com/p/fbug/issues/detail?id=5862

extension/content/firebug/css/cssPanel.js

@@ -50,6 +50,14 @@ var CSSDomplateBase =
     isSelectorEditable: function(rule)
     {
         return rule.isSelectorEditable && this.isEditable(rule);
+    },
+
+    getPropertyValue: function(prop)
+    {
+        var limit = Options.get("stringCropLength");
+        if (limit > 0)
+            return Str.cropString(prop.value, limit);
+        return prop.value;
     }
 };
 
@@ -70,7 +78,7 @@ var CSSPropTag = domplate(CSSDomplateBase,
             // Use a space here, so that "copy to clipboard" has it (issue 3266).
             SPAN({"class": "cssColon"}, ": "),
             SPAN({"class": "cssPropValue", $editable: "$rule|isEditable"},
-                "$prop.value$prop.important"
+                "$prop|getPropertyValue$prop.important"
             ),
             SPAN({"class": "cssSemi"}, ";"
         )
@@ -1286,10 +1294,11 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
         var propValue = Dom.getAncestorByClass(target, "cssPropValue");
         if (propValue)
         {
-            var text = propValue.textContent;
+            var styleRule = Firebug.getRepObject(propValue);
             var prop = Dom.getAncestorByClass(target, "cssProp");
             var propNameNode = prop.getElementsByClassName("cssPropName").item(0);
             var propName = propNameNode.textContent.toLowerCase();
+            var text = styleRule.style.getPropertyValue(propName);
             var cssValue;
 
             if (propName == "font" || propName == "font-family")
@@ -1672,12 +1681,11 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
             this.panel.removeDisabledProperty(rule, propName);
         }
 
-        target.textContent = value;
-
         if (rule instanceof window.CSSStyleRule || rule instanceof window.Element)
         {
             if (Css.hasClass(target, "cssPropName"))
             {
+                target.textContent = value;
 
                 if (value && previousValue != value)  // name of property has changed.
                 {
@@ -1716,6 +1724,9 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
             }
             else if (Dom.getAncestorByClass(target, "cssPropValue"))
             {
+                var limit = Options.get("stringCropLength");
+                target.textContent = limit > 0 ? Str.cropString(value, limit) : value;
+
                 propName = Dom.getChildByClass(row, "cssPropName").textContent;
                 propValue = Dom.getChildByClass(row, "cssPropValue").textContent;
 
@@ -1761,6 +1772,8 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
         }
         else if (rule instanceof window.CSSImportRule && Css.hasClass(target, "cssMediaQuery"))
         {
+            target.textContent = value;
+
             if (FBTrace.DBG_CSS)
             {
                 FBTrace.sysout("CSSEditor.saveEdit: @import media query: " +
@@ -1779,6 +1792,8 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
         }
         else if (rule instanceof window.CSSCharsetRule)
         {
+            target.textContent = value;
+
             if (FBTrace.DBG_CSS)
                 FBTrace.sysout("CSSEditor.saveEdit: @charset: " + previousValue + "->" + value);
 
@@ -1826,6 +1841,23 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
         }
     },
 
+    getInitialValue: function(target, value)
+    {
+        if (value == "")
+            return value;
+
+        var propValue = Dom.getAncestorByClass(target, "cssPropValue");
+        if (propValue)
+        {
+            var styleRule = Firebug.getRepObject(propValue);
+            var prop = Dom.getAncestorByClass(target, "cssProp");
+            var propNameNode = prop.getElementsByClassName("cssPropName").item(0);
+            var propName = propNameNode.textContent.toLowerCase();
+            value = styleRule.style.getPropertyValue(propName);
+        }
+        return value;
+    },
+
     // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
     getAutoCompleteRange: function(value, offset)