Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

issue 5862- Crop long CSS values #41

Merged
merged 5 commits into from over 1 year ago

3 participants

Farshid Beheshti Simon Lindholm Sebastian Zartner
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.

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"))
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.