Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Merge pull request #41 from FarshidB/master

Issue 5862 (Crop long CSS values)
http://code.google.com/p/fbug/issues/detail?id=5862
  • Loading branch information...
commit 1f2247154fd2b4ff3b89739929c86cb8236a0a23 2 parents 5ebeac0 + ee7e746
Sebastian Zartner authored September 23, 2012

Showing 1 changed file with 105 additions and 33 deletions. Show diff stats Hide diff stats

  1. 138  extension/content/firebug/css/cssPanel.js
138  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("stringCropLength");
  58
+        if (limit > 0)
  59
+            return Str.cropString(prop.value, limit);
  60
+        return prop.value;
53 61
     }
54 62
 };
55 63
 
@@ -69,8 +77,8 @@ var CSSPropTag = domplate(CSSDomplateBase,
69 77
 
70 78
             // Use a space here, so that "copy to clipboard" has it (issue 3266).
71 79
             SPAN({"class": "cssColon"}, ": "),
72  
-            SPAN({"class": "cssPropValue", $editable: "$rule|isEditable"},
73  
-                "$prop.value$prop.important"
  80
+            SPAN({"class": "cssPropValue", $editable: "$rule|isEditable",
  81
+                _repObject: "$prop.value$prop.important"},"$prop|getPropertyValue$prop.important"
74 82
             ),
75 83
             SPAN({"class": "cssSemi"}, ";"
76 84
         )
@@ -790,7 +798,7 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
790 798
             disabledMap.set(rule, []);
791 799
         var map = disabledMap.get(rule);
792 800
 
793  
-        var propValue = Dom.getChildByClass(row, "cssPropValue").textContent;
  801
+        var propValue = Firebug.getRepObject(Dom.getChildByClass(row, "cssPropValue"));
794 802
         var parsedValue = parsePriority(propValue);
795 803
 
796 804
         CSSModule.disableProperty(Css.hasClass(row, "disabledStyle"), rule,
@@ -1286,10 +1294,38 @@ 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;
1290 1297
             var prop = Dom.getAncestorByClass(target, "cssProp");
  1298
+            var styleRule = Firebug.getRepObject(prop);
1291 1299
             var propNameNode = prop.getElementsByClassName("cssPropName").item(0);
1292 1300
             var propName = propNameNode.textContent.toLowerCase();
  1301
+            var priority = styleRule.style.getPropertyPriority(propName);
  1302
+            var text = styleRule.style.getPropertyValue(propName) +
  1303
+                (priority ? " !" + priority : "");
  1304
+
  1305
+            if (text != "")
  1306
+            {
  1307
+                if (Options.get("colorDisplay") == "hex")
  1308
+                    text = Css.rgbToHex(text);
  1309
+                else if (Options.get("colorDisplay") == "hsl")
  1310
+                    text = Css.rgbToHSL(text);
  1311
+            }
  1312
+            else
  1313
+            {
  1314
+                var disabledMap = this.getDisabledMap(this.context);
  1315
+                var disabledProps = disabledMap.get(styleRule);
  1316
+                if (disabledProps)
  1317
+                {
  1318
+                    for (var i = 0, len = disabledProps.length; i < len; ++i)
  1319
+                    {
  1320
+                        if (disabledProps[i].name == propName)
  1321
+                        {
  1322
+                            priority = disabledProps[i].important;
  1323
+                            text = disabledProps[i].value + (priority ? " !" + priority : "");
  1324
+                            break;
  1325
+                        }
  1326
+                    }
  1327
+                }
  1328
+            }
1293 1329
             var cssValue;
1294 1330
 
1295 1331
             if (propName == "font" || propName == "font-family")
@@ -1574,13 +1610,15 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
1574 1610
     {
1575 1611
         var cssRule = Dom.getAncestorByClass(cssSelector, "cssRule");
1576 1612
         var cssRules = cssRule.getElementsByClassName("cssPropertyListBox")[0].rule;
  1613
+        var rule = Firebug.getRepObject(cssRule);
1577 1614
         var props = [];
1578 1615
 
1579 1616
         for (var p in cssRules.props)
1580 1617
         {
1581 1618
             var prop = cssRules.props[p];
1582 1619
             if (!(prop.disabled || prop.overridden))
1583  
-                props.push(prop.name + ": " + prop.value + prop.important + ";");
  1620
+                props.push(prop.name + ": " + rule.style.getPropertyValue(prop.name) +
  1621
+                    prop.important + ";");
1584 1622
         }
1585 1623
 
1586 1624
         return props;
@@ -1659,52 +1697,52 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1659 1697
 
1660 1698
         var propValue, parsedValue, propName;
1661 1699
 
1662  
-        var rule = Firebug.getRepObject(target);
1663 1700
         var row = Dom.getAncestorByClass(target, "cssProp");
  1701
+        var rule = Firebug.getRepObject(row);
  1702
+        var propName = Dom.getChildByClass(row, "cssPropName").textContent;
1664 1703
 
1665 1704
         // If the property was previously disabled, remove it from the "disabled"
1666 1705
         // map. (We will then proceed to enable the property.)
1667 1706
         if (row && row.classList.contains("disabledStyle"))
1668 1707
         {
1669 1708
             row.classList.remove("disabledStyle");
1670  
-            propName = Dom.getChildByClass(row, "cssPropName").textContent;
1671 1709
 
1672 1710
             this.panel.removeDisabledProperty(rule, propName);
1673 1711
         }
1674 1712
 
1675  
-        target.textContent = value;
1676 1713
 
1677 1714
         if (rule instanceof window.CSSStyleRule || rule instanceof window.Element)
1678 1715
         {
1679 1716
             if (Css.hasClass(target, "cssPropName"))
1680 1717
             {
1681  
-  
  1718
+                target.textContent = value;
  1719
+
1682 1720
                 if (value && previousValue != value)  // name of property has changed.
1683 1721
                 {
1684 1722
                     // Record the original CSS text for the inline case so we can reconstruct at a later
1685 1723
                     // point for diffing purposes
1686 1724
                     var baseText = rule.style ? rule.style.cssText : rule.cssText;
1687  
-  
1688  
-                    propValue = Dom.getChildByClass(row, "cssPropValue").textContent;
  1725
+
  1726
+                    propValue = Firebug.getRepObject(Dom.getChildByClass(row,"cssPropValue"));
1689 1727
                     parsedValue = parsePriority(propValue);
1690  
-  
  1728
+
1691 1729
                     if (FBTrace.DBG_CSS)
1692 1730
                         FBTrace.sysout("CSSEditor.saveEdit : " + previousValue + "->" + value +
1693 1731
                             " = " + propValue);
1694  
-  
  1732
+
1695 1733
                     if (propValue && propValue != "undefined")
1696 1734
                     {
1697 1735
                         if (FBTrace.DBG_CSS)
1698 1736
                             FBTrace.sysout("CSSEditor.saveEdit : " + previousValue + "->" + value +
1699 1737
                                 " = " + propValue);
1700  
-  
  1738
+
1701 1739
                         if (previousValue)
1702 1740
                             CSSModule.removeProperty(rule, previousValue);
1703  
-  
  1741
+
1704 1742
                         CSSModule.setProperty(rule, value, parsedValue.value,
1705 1743
                             parsedValue.priority);
  1744
+                        propName = value;
1706 1745
                     }
1707  
-  
1708 1746
                     Events.dispatch(CSSModule.fbListeners, "onCSSPropertyNameChanged", [rule, value,
1709 1747
                         previousValue, baseText]);
1710 1748
                 }
@@ -1716,42 +1754,47 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1716 1754
             }
1717 1755
             else if (Dom.getAncestorByClass(target, "cssPropValue"))
1718 1756
             {
  1757
+                var limit = Options.get("stringCropLength");
  1758
+                target.textContent = limit > 0 ? Str.cropString(value, limit) : value;
  1759
+
1719 1760
                 propName = Dom.getChildByClass(row, "cssPropName").textContent;
1720 1761
                 propValue = Dom.getChildByClass(row, "cssPropValue").textContent;
1721  
-  
  1762
+
1722 1763
                 if (FBTrace.DBG_CSS)
1723 1764
                 {
1724 1765
                     FBTrace.sysout("CSSEditor.saveEdit propName=propValue: "+propName +
1725 1766
                         " = "+propValue+"\n");
1726 1767
                    // FBTrace.sysout("CSSEditor.saveEdit BEFORE style:",style);
1727 1768
                 }
1728  
-  
  1769
+
1729 1770
                 if (value && value != "null")
1730 1771
                 {
1731 1772
                     parsedValue = parsePriority(value);
1732 1773
                     CSSModule.setProperty(rule, propName, parsedValue.value,
1733 1774
                         parsedValue.priority);
  1775
+                    // Save in rep object.
  1776
+                    Dom.getAncestorByClass(target, "cssPropValue").repObject = value;
1734 1777
                 }
1735 1778
                 else if (previousValue && previousValue != "null")
1736 1779
                 {
1737 1780
                     CSSModule.removeProperty(rule, propName);
1738 1781
                 }
1739 1782
             }
1740  
-  
  1783
+
1741 1784
             if (value)
1742 1785
             {
1743  
-                var saveSuccess = !!rule.style.getPropertyValue(propName || value);
1744  
-                if(!saveSuccess && !propName)
  1786
+                var saveSuccess = !!rule.style.getPropertyValue(propName);
  1787
+                if (!saveSuccess && Css.hasClass(target, "cssPropName"))
1745 1788
                 {
1746 1789
                     propName = value.replace(/-./g, function(match)
1747 1790
                     {
1748  
-                        return match[1].toUpperCase()
  1791
+                        return match[1].toUpperCase();
1749 1792
                     });
1750  
-    
  1793
+
1751 1794
                     if (propName in rule.style || propName == "float")
1752 1795
                         saveSuccess = "almost";
1753 1796
                 }
1754  
-    
  1797
+
1755 1798
                 this.box.setAttribute("saveSuccess", saveSuccess);
1756 1799
             }
1757 1800
             else
@@ -1761,6 +1804,8 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1761 1804
         }
1762 1805
         else if (rule instanceof window.CSSImportRule && Css.hasClass(target, "cssMediaQuery"))
1763 1806
         {
  1807
+            target.textContent = value;
  1808
+
1764 1809
             if (FBTrace.DBG_CSS)
1765 1810
             {
1766 1811
                 FBTrace.sysout("CSSEditor.saveEdit: @import media query: " +
@@ -1779,6 +1824,8 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1779 1824
         }
1780 1825
         else if (rule instanceof window.CSSCharsetRule)
1781 1826
         {
  1827
+            target.textContent = value;
  1828
+
1782 1829
             if (FBTrace.DBG_CSS)
1783 1830
                 FBTrace.sysout("CSSEditor.saveEdit: @charset: " + previousValue + "->" + value);
1784 1831
 
@@ -1826,6 +1873,20 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
1826 1873
         }
1827 1874
     },
1828 1875
 
  1876
+    getInitialValue: function(target, value)
  1877
+    {
  1878
+        if (value == "")
  1879
+            return value;
  1880
+
  1881
+        var propValue = Dom.getAncestorByClass(target, "cssPropValue");
  1882
+        if (propValue)
  1883
+        {
  1884
+            var row = Dom.getAncestorByClass(target, "cssProp");
  1885
+            value = Firebug.getRepObject(propValue);
  1886
+        }
  1887
+        return value;
  1888
+    },
  1889
+
1829 1890
     // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
1830 1891
 
1831 1892
     getAutoCompleteRange: function(value, offset)
@@ -2226,13 +2287,13 @@ CSSRuleEditor.prototype = domplate(Firebug.InlineEditor.prototype,
2226 2287
                 "'", target);
2227 2288
 
2228 2289
         target.innerHTML = Str.escapeForCss(value);
2229  
-
2230 2290
         if (value === previousValue)
2231 2291
             return;
2232 2292
 
2233 2293
         var row = Dom.getAncestorByClass(target, "cssRule");
2234 2294
 
2235 2295
         var rule = Firebug.getRepObject(target);
  2296
+
2236 2297
         var searchRule = rule || Firebug.getRepObject(row.nextSibling);
2237 2298
         var oldRule, ruleIndex;
2238 2299
 
@@ -2281,12 +2342,6 @@ CSSRuleEditor.prototype = domplate(Firebug.InlineEditor.prototype,
2281 2342
             ruleIndex = cssRules.length;
2282 2343
         }
2283 2344
 
2284  
-        // Delete in all cases except for new add
2285  
-        // We want to do this before the insert to ease change tracking
2286  
-        if (oldRule)
2287  
-        {
2288  
-            CSSModule.deleteRule(styleSheet, ruleIndex);
2289  
-        }
2290 2345
 
2291 2346
         // Firefox does not follow the spec for the update selector text case.
2292 2347
         // When attempting to update the value, firefox will silently fail.
@@ -2300,23 +2355,35 @@ CSSRuleEditor.prototype = domplate(Firebug.InlineEditor.prototype,
2300 2355
             var props = row.getElementsByClassName("cssProp");
2301 2356
             for (var i = 0; i < props.length; i++)
2302 2357
             {
  2358
+
2303 2359
                 var propEl = props[i];
2304 2360
                 if (!Css.hasClass(propEl, "disabledStyle"))
2305 2361
                 {
2306  
-                    cssText.push(Dom.getChildByClass(propEl, "cssPropName").textContent);
  2362
+                    var propName = Dom.getChildByClass(propEl, "cssPropName").textContent;
  2363
+                    cssText.push(propName);
2307 2364
                     cssText.push(":");
2308  
-                    cssText.push(Dom.getChildByClass(propEl, "cssPropValue").textContent);
  2365
+                    cssText.push(rule.style.getPropertyValue(propName) +
  2366
+                        (rule.style.getPropertyPriority(propName) ? " !important" : ""));
2309 2367
                     cssText.push(";");
2310 2368
                 }
2311 2369
             }
2312 2370
 
2313 2371
             cssText.push("}");
2314 2372
             cssText = cssText.join("");
  2373
+            
  2374
+            // Delete in all cases except for new add
  2375
+            // We want to do this before the insert to ease change tracking
  2376
+            if (oldRule)
  2377
+            {
  2378
+                CSSModule.deleteRule(styleSheet, ruleIndex);
  2379
+            }
2315 2380
 
2316 2381
             try
2317 2382
             {
2318 2383
                 var insertLoc = CSSModule.insertRule(styleSheet, cssText, ruleIndex);
  2384
+
2319 2385
                 rule = cssRules[insertLoc];
  2386
+
2320 2387
                 ruleIndex++;
2321 2388
 
2322 2389
                 var saveSuccess = (this.panel.name != "css");
@@ -2347,6 +2414,10 @@ CSSRuleEditor.prototype = domplate(Firebug.InlineEditor.prototype,
2347 2414
         }
2348 2415
         else
2349 2416
         {
  2417
+            if (oldRule)
  2418
+            {
  2419
+                CSSModule.deleteRule(styleSheet, ruleIndex);
  2420
+            }
2350 2421
             rule = undefined;
2351 2422
         }
2352 2423
 
@@ -2358,6 +2429,7 @@ CSSRuleEditor.prototype = domplate(Firebug.InlineEditor.prototype,
2358 2429
         this.panel.markChange(this.panel.name == "stylesheet");
2359 2430
     },
2360 2431
 
  2432
+
2361 2433
     getAutoCompleteRange: function(value, offset)
2362 2434
     {
2363 2435
         if (!Css.hasClass(this.target, "cssSelector"))

0 notes on commit 1f22471

Please sign in to comment.
Something went wrong with that request. Please try again.