Crop long CSS values #34

Closed
wants to merge 6 commits into
from
View
63 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("cssDisplayedPropertyValueLimit");
+ 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(target);
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,39 +1681,38 @@ 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.
{
// Record the original CSS text for the inline case so we can reconstruct at a later
// point for diffing purposes
var baseText = rule.style ? rule.style.cssText : rule.cssText;
-
+
propValue = Dom.getChildByClass(row, "cssPropValue").textContent;
parsedValue = parsePriority(propValue);
-
+
if (FBTrace.DBG_CSS)
FBTrace.sysout("CSSEditor.saveEdit : " + previousValue + "->" + value +
" = " + propValue);
-
+
if (propValue && propValue != "undefined")
{
if (FBTrace.DBG_CSS)
FBTrace.sysout("CSSEditor.saveEdit : " + previousValue + "->" + value +
" = " + propValue);
-
+
if (previousValue)
CSSModule.removeProperty(rule, previousValue);
-
+
CSSModule.setProperty(rule, value, parsedValue.value,
parsedValue.priority);
}
-
+
Events.dispatch(CSSModule.fbListeners, "onCSSPropertyNameChanged", [rule, value,
previousValue, baseText]);
}
@@ -1716,16 +1724,19 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
}
else if (Dom.getAncestorByClass(target, "cssPropValue"))
{
+ var limit = Options.get("cssDisplayedPropertyValueLimit");
+ target.textContent = limit > 0 ? Str.cropString(value, limit) : value;
+
propName = Dom.getChildByClass(row, "cssPropName").textContent;
propValue = Dom.getChildByClass(row, "cssPropValue").textContent;
-
+
if (FBTrace.DBG_CSS)
{
FBTrace.sysout("CSSEditor.saveEdit propName=propValue: "+propName +
" = "+propValue+"\n");
// FBTrace.sysout("CSSEditor.saveEdit BEFORE style:",style);
}
-
+
if (value && value != "null")
{
parsedValue = parsePriority(value);
@@ -1737,7 +1748,7 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
CSSModule.removeProperty(rule, propName);
}
}
-
+
if (value)
{
var saveSuccess = !!rule.style.getPropertyValue(propName || value);
@@ -1747,11 +1758,11 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
{
return match[1].toUpperCase()
});
-
+
if (propName in rule.style || propName == "float")
saveSuccess = "almost";
}
-
+
this.box.setAttribute("saveSuccess", saveSuccess);
}
else
@@ -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,22 @@ 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(target);
+ 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)
View
1 extension/content/firebug/lib/options.js
@@ -52,6 +52,7 @@ const prefNames = // XXXjjb TODO distribute to modules
"expandShorthandProps",
"cssEditMode",
"colorDisplay",
+ "cssDisplayedPropertyValueLimit",
// Computed
"computedStylesDisplay",
View
1 extension/defaults/preferences/firebug.js
@@ -79,6 +79,7 @@ pref("extensions.firebug.showUserAgentCSS", false);
pref("extensions.firebug.expandShorthandProps", false);
pref("extensions.firebug.cssEditMode", "Source");
pref("extensions.firebug.colorDisplay", "hex");
+pref("extensions.firebug.cssDisplayedPropertyValueLimit", 100);
// Computed
pref("extensions.firebug.computedStylesDisplay", "grouped");