Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Crop long CSS values #34

Closed
wants to merge 6 commits into from

4 participants

Farshid Beheshti Sebastian Zartner Jan Odvarko Simon Lindholm
Farshid Beheshti
Collaborator

Issue 5862

Farshid Beheshti
Collaborator

Simon, it was a mistake by me. I've returned cancelEditing( ) function back

Sebastian Zartner
Collaborator

Committed the changes plus a little fix in cbc142e81d.

Sebastian

Sebastian Zartner SebastianZ closed this September 06, 2012
Farshid Beheshti
Collaborator
Sebastian Zartner
Collaborator

In my commit I already replaced cssDisplayedPropertyValueLimit by stringCropLength. Sorry that I took over the last changes you were also working on.

Reusing extensions.firebug.stringCropLength for other parts of the UI is not part of issue 5862, so that should be done separately.
Furthermore I disagree with Honza that it should be used everywhere strings are cropped. E.g. source links need to have a shorter limit than URLs inside the Net panel.

Also note that I suggested enhanced string cropping to Mozilla some time ago and also to the W3C. Unfortunately nobody responded so far.

Sebastian

Jan Odvarko
Owner

source links need to have a shorter limit than URLs inside the Net panel.
Sure, we can have a different/pref category for strings that needs to be significantly shorther (or longer) and we should again try to share everywhere where possible.

Honza

Simon Lindholm
Collaborator

I generally don't see why we want to share prefs for similarly-shortened strings. Say the CSS cropping begins to bug me, so I set the cropping pref to 0. But then there is the trade-off that lots of other string also don't crop!
There's no problem with more prefs, just increased customizability.

Jan Odvarko
Owner

Of course there are two approaches

1) new preference for every (different type of) cropped string in the UI so, the user can customize every bit of it.
2) Having 2-3 categories (e.g. small, normal, large) shared. In this case the user needs to change just these prefs to adjust string cropping and not zilliens of props.

I personally prefer #2

Honza

Sebastian Zartner
Collaborator

I generally don't see why we want to share prefs for similarly-shortened strings.

Generally we want to avoid confusion by adding too many preferences, especially for similar things. General prefs should be fine in this case. And if there's really a need for cropping specific strings individually, we can still add a property for them.

Sebastian

Simon Lindholm
Collaborator

I personally prefer #2

If someone wants to customize cropping enough to go to about:config, they probably have a specific problem in mind (assuming it's set to '0' or a high value, at least), and are probably okay with wading through a few prefs.
Were the options visible through the UI I'd agree more.

Generally we want to avoid confusion by adding too many preferences, especially for similar things.

Prefs for similar things is fine, but that's not what extensions.firebug.stringCropLength is.

In any case, I think mainly that any particular cropping which could be annoying should be possible to turn off, and due to backgrounds with long, interesting values, and infotips, I think the CSS panel could be such a thing (though I've admittedly not used it since this change).

Simon Lindholm
Collaborator

(also, I'll be away for the weekend, so I can't respond, sorry)

Sebastian Zartner
Collaborator

Created Issue 5898 for this. So we can continue the discussion there.

Sebastian

Sebastian Zartner
Collaborator

In any case, I think mainly that any particular cropping which could be annoying should be possible to turn off, and due to backgrounds with long, interesting values, and infotips, I think the CSS panel could be such a thing

I created issue 5880 recently, which describes another approach for this specific case.

Sebastian

Simon Lindholm
Collaborator

I read through the code now, and I saw some issues with this commit:

  • getInitialValue() returns "" for disabled properties, so the pre-filled value of an edited property is "", and Esc doesn't revert it correctly. See e.g. the failing "Editing a disabled property makes another" test: https://getfirebug.com/testresults/?headerid=7e2a8dfa3cbde00b138c42d9fb3a4077 (the same bug is actually also in showInfoTip, so if you want to make a general function... :) )
  • disablePropertyRow() parses .textContent as the actual value, so enabling/disabling of cropped properties doesn't work.
  • The "change property name" also parses .textContent as an actual value (Farshid: you should have searched for such occurrences!), and fails for long property values.
  • Same thing with rule renaming.

Of course the real issue is that we pull raw information from the UI in the first place, but fixing that requires quite a bit of refactoring.

Sebastian Zartner
Collaborator

and I saw some issues with this commit:

Why didn't I see all this before? :-/

Of course the real issue problem is that we pull raw information from the UI in the first place, but fixing that
requires quite a bit of refactoring.

We have that at many places throughout Firebug and we need to change that step by step.
The big problem here is that disabled properties are not available through the repObject (the style rule). So we need to find a way to get that info.

Sebastian

Simon Lindholm
Collaborator

Also units aren't stripped and it removes !important from edited properties... We should have backed this out for release.

Simon Lindholm
Collaborator

And further, changing a property's name and pressing tab is regressed: when the old property value becomes invalid for the new property name the property is temporarily removed, so the initial value is "" instead of what is shown.

And the use of rangeOffset as an offset into the property value in showInfoTip obviously doesn't work with cropping.

... Let's just back this out and rethink our model here.

Farshid Beheshti
Collaborator

Continuation is here:
Pull request 41

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
63  extension/content/firebug/css/cssPanel.js
@@ -50,6 +50,14 @@ var CSSDomplateBase =
50 50
     isSelectorEditable: function(rule)
51 51
     {
52 52
         return rule.isSelectorEditable && this.isEditable(rule);
  53
+    },
  54
+
  55
+    getPropertyValue: function(prop)
  56
+    {
  57
+        var limit = Options.get("cssDisplayedPropertyValueLimit");
  58
+        if (limit > 0)
  59
+            return Str.cropString(prop.value, limit);
  60
+        return prop.value;
53 61
     }
54 62
 };
55 63
 
@@ -70,7 +78,7 @@ var CSSPropTag = domplate(CSSDomplateBase,
70 78
             // Use a space here, so that "copy to clipboard" has it (issue 3266).
71 79
             SPAN({"class": "cssColon"}, ": "),
72 80
             SPAN({"class": "cssPropValue", $editable: "$rule|isEditable"},
73  
-                "$prop.value$prop.important"
  81
+                "$prop|getPropertyValue$prop.important"
74 82
             ),
75 83
             SPAN({"class": "cssSemi"}, ";"
76 84
         )
@@ -1286,10 +1294,11 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
1286 1294
         var propValue = Dom.getAncestorByClass(target, "cssPropValue");
1287 1295
         if (propValue)
1288 1296
         {
1289  
-            var text = propValue.textContent;
  1297
+            var styleRule = Firebug.getRepObject(target);
1290 1298
             var prop = Dom.getAncestorByClass(target, "cssProp");
1291 1299
             var propNameNode = prop.getElementsByClassName("cssPropName").item(0);
1292 1300
             var propName = propNameNode.textContent.toLowerCase();
  1301
+            var text = styleRule.style.getPropertyValue(propName);
1293 1302
             var cssValue;
1294 1303
 
1295 1304
             if (propName == "font" || propName == "font-family")
@@ -1672,39 +1681,38 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1672 1681
             this.panel.removeDisabledProperty(rule, propName);
1673 1682
         }
1674 1683
 
1675  
-        target.textContent = value;
1676  
-
1677 1684
         if (rule instanceof window.CSSStyleRule || rule instanceof window.Element)
1678 1685
         {
1679 1686
             if (Css.hasClass(target, "cssPropName"))
1680 1687
             {
1681  
-  
  1688
+                target.textContent = value;
  1689
+
1682 1690
                 if (value && previousValue != value)  // name of property has changed.
1683 1691
                 {
1684 1692
                     // Record the original CSS text for the inline case so we can reconstruct at a later
1685 1693
                     // point for diffing purposes
1686 1694
                     var baseText = rule.style ? rule.style.cssText : rule.cssText;
1687  
-  
  1695
+
1688 1696
                     propValue = Dom.getChildByClass(row, "cssPropValue").textContent;
1689 1697
                     parsedValue = parsePriority(propValue);
1690  
-  
  1698
+
1691 1699
                     if (FBTrace.DBG_CSS)
1692 1700
                         FBTrace.sysout("CSSEditor.saveEdit : " + previousValue + "->" + value +
1693 1701
                             " = " + propValue);
1694  
-  
  1702
+
1695 1703
                     if (propValue && propValue != "undefined")
1696 1704
                     {
1697 1705
                         if (FBTrace.DBG_CSS)
1698 1706
                             FBTrace.sysout("CSSEditor.saveEdit : " + previousValue + "->" + value +
1699 1707
                                 " = " + propValue);
1700  
-  
  1708
+
1701 1709
                         if (previousValue)
1702 1710
                             CSSModule.removeProperty(rule, previousValue);
1703  
-  
  1711
+
1704 1712
                         CSSModule.setProperty(rule, value, parsedValue.value,
1705 1713
                             parsedValue.priority);
1706 1714
                     }
1707  
-  
  1715
+
1708 1716
                     Events.dispatch(CSSModule.fbListeners, "onCSSPropertyNameChanged", [rule, value,
1709 1717
                         previousValue, baseText]);
1710 1718
                 }
@@ -1716,16 +1724,19 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1716 1724
             }
1717 1725
             else if (Dom.getAncestorByClass(target, "cssPropValue"))
1718 1726
             {
  1727
+                var limit = Options.get("cssDisplayedPropertyValueLimit");
  1728
+                target.textContent = limit > 0 ? Str.cropString(value, limit) : value;
  1729
+
1719 1730
                 propName = Dom.getChildByClass(row, "cssPropName").textContent;
1720 1731
                 propValue = Dom.getChildByClass(row, "cssPropValue").textContent;
1721  
-  
  1732
+
1722 1733
                 if (FBTrace.DBG_CSS)
1723 1734
                 {
1724 1735
                     FBTrace.sysout("CSSEditor.saveEdit propName=propValue: "+propName +
1725 1736
                         " = "+propValue+"\n");
1726 1737
                    // FBTrace.sysout("CSSEditor.saveEdit BEFORE style:",style);
1727 1738
                 }
1728  
-  
  1739
+
1729 1740
                 if (value && value != "null")
1730 1741
                 {
1731 1742
                     parsedValue = parsePriority(value);
@@ -1737,7 +1748,7 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1737 1748
                     CSSModule.removeProperty(rule, propName);
1738 1749
                 }
1739 1750
             }
1740  
-  
  1751
+
1741 1752
             if (value)
1742 1753
             {
1743 1754
                 var saveSuccess = !!rule.style.getPropertyValue(propName || value);
@@ -1747,11 +1758,11 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1747 1758
                     {
1748 1759
                         return match[1].toUpperCase()
1749 1760
                     });
1750  
-    
  1761
+
1751 1762
                     if (propName in rule.style || propName == "float")
1752 1763
                         saveSuccess = "almost";
1753 1764
                 }
1754  
-    
  1765
+
1755 1766
                 this.box.setAttribute("saveSuccess", saveSuccess);
1756 1767
             }
1757 1768
             else
@@ -1761,6 +1772,8 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1761 1772
         }
1762 1773
         else if (rule instanceof window.CSSImportRule && Css.hasClass(target, "cssMediaQuery"))
1763 1774
         {
  1775
+            target.textContent = value;
  1776
+
1764 1777
             if (FBTrace.DBG_CSS)
1765 1778
             {
1766 1779
                 FBTrace.sysout("CSSEditor.saveEdit: @import media query: " +
@@ -1779,6 +1792,8 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1779 1792
         }
1780 1793
         else if (rule instanceof window.CSSCharsetRule)
1781 1794
         {
  1795
+            target.textContent = value;
  1796
+
1782 1797
             if (FBTrace.DBG_CSS)
1783 1798
                 FBTrace.sysout("CSSEditor.saveEdit: @charset: " + previousValue + "->" + value);
1784 1799
 
@@ -1826,6 +1841,22 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1826 1841
         }
1827 1842
     },
1828 1843
 
  1844
+    getInitialValue: function(target, value)
  1845
+    {
  1846
+        if (value == "")
  1847
+            return value;
  1848
+        var propValue = Dom.getAncestorByClass(target, "cssPropValue");
  1849
+        if (propValue)
  1850
+        {
  1851
+            var styleRule = Firebug.getRepObject(target);
  1852
+            var prop = Dom.getAncestorByClass(target, "cssProp");
  1853
+            var propNameNode = prop.getElementsByClassName("cssPropName").item(0);
  1854
+            var propName = propNameNode.textContent.toLowerCase();
  1855
+            value = styleRule.style.getPropertyValue(propName);
  1856
+        }
  1857
+        return value;
  1858
+    },
  1859
+
1829 1860
     // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
1830 1861
 
1831 1862
     getAutoCompleteRange: function(value, offset)
1  extension/content/firebug/lib/options.js
@@ -52,6 +52,7 @@ const prefNames =  // XXXjjb TODO distribute to modules
52 52
     "expandShorthandProps",
53 53
     "cssEditMode",
54 54
     "colorDisplay",
  55
+    "cssDisplayedPropertyValueLimit",
55 56
 
56 57
     // Computed
57 58
     "computedStylesDisplay",
1  extension/defaults/preferences/firebug.js
@@ -79,6 +79,7 @@ pref("extensions.firebug.showUserAgentCSS", false);
79 79
 pref("extensions.firebug.expandShorthandProps", false);
80 80
 pref("extensions.firebug.cssEditMode", "Source");
81 81
 pref("extensions.firebug.colorDisplay", "hex");
  82
+pref("extensions.firebug.cssDisplayedPropertyValueLimit", 100);
82 83
 
83 84
 // Computed
84 85
 pref("extensions.firebug.computedStylesDisplay", "grouped");
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.