Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Issue 2495 (The rendered font should be highlighted in Style side panel)

  • Loading branch information...
commit 8520d5332be26f80b6598eb7b17387127502f340 1 parent c2c3c44
Sebastian Zartner authored April 26, 2012
104  extension/content/firebug/css/cssElementPanel.js
@@ -15,11 +15,13 @@ define([
15 15
     "firebug/lib/css",
16 16
     "firebug/lib/xpath",
17 17
     "firebug/lib/array",
  18
+    "firebug/lib/fonts",
  19
+    "firebug/lib/options",
18 20
     "firebug/css/cssPanel",
19 21
     "firebug/chrome/menu"
20 22
 ],
21 23
 function(Obj, Firebug, Firefox, Domplate, FirebugReps, Xpcom, Locale, Events, Url,
22  
-    SourceLink, Dom, Css, Xpath, Arr, CSSStyleSheetPanel, Menu) {
  24
+    SourceLink, Dom, Css, Xpath, Arr, Fonts, Options, CSSStyleSheetPanel, Menu) {
23 25
 
24 26
 with (Domplate) {
25 27
 
@@ -73,6 +75,14 @@ CSSElementPanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
73 75
             DIV({"class": "cssElementRuleContainer"},
74 76
                 TAG(Firebug.CSSStyleRuleTag.tag, {rule: "$rule"}),
75 77
                 TAG(FirebugReps.SourceLink.tag, {object: "$rule.sourceLink"})
  78
+            ),
  79
+
  80
+        CSSFontPropValueTag:
  81
+            SPAN({"class": "cssFontPropValue"},
  82
+                SPAN("$otherValues"),
  83
+                SPAN({"class": "cssFontPropBefore"}, "$before"),
  84
+                SPAN({"class": "cssFontUsed"}, "$used"),
  85
+                SPAN({"class": "cssFontPropAfter"}, "$after")
76 86
             )
77 87
     }),
78 88
 
@@ -106,6 +116,24 @@ CSSElementPanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
106 116
             result = this.template.cascadedTag.replace({rules: rules, inherited: sections,
107 117
                 inheritLabel: inheritLabel}, this.panelNode);
108 118
 
  119
+            var props = result.getElementsByClassName("cssProp");
  120
+
  121
+            for (var i = 0; i < props.length; i++)
  122
+            {
  123
+                var prop = props[i];
  124
+                var propName = prop.getElementsByClassName("cssPropName").item(0).textContent;
  125
+                if (propName == "font-family" || propName == "font")
  126
+                {
  127
+                    var propValueElem = prop.getElementsByClassName("cssPropValue").item(0);
  128
+                    var propValue = propValueElem.textContent;
  129
+                    var fontParts = getFontParts(element, propValue);
  130
+
  131
+                    // xxxsz: Web fonts are not covered by this.
  132
+                    // For that to work we need to react to when the fonts are loaded.
  133
+                    this.template.CSSFontPropValueTag.replace(fontParts, propValueElem);
  134
+                }
  135
+            }
  136
+
109 137
             Events.dispatch(this.fbListeners, "onCSSRulesAdded", [this, result]);
110 138
         }
111 139
         else
@@ -604,6 +632,80 @@ function safeGetContentState(selection)
604 632
     }
605 633
 }
606 634
 
  635
+function getFontForGenericFontFamily(genericFontFamily)
  636
+{
  637
+    var fontsDomain = "font.name."+genericFontFamily;
  638
+
  639
+    // xxxsz: Is there a possibility to find out the language group used for a specific page?
  640
+    return Options.getPref(fontsDomain, "x-western");
  641
+}
  642
+
  643
+function getFontParts(element, value)
  644
+{
  645
+    const genericFontFamilies =
  646
+    {
  647
+        "serif": 1,
  648
+        "sans-serif": 1,
  649
+        "cursive": 1,
  650
+        "fantasy": 1,
  651
+        "monospace": 1,
  652
+    };
  653
+    const reFontFamilies = new RegExp("^(.*(\\d+(\\.\\d+)?(em|ex|ch|rem|cm|mm|in|pt|pc|px|%)|"+
  654
+        "x{0,2}-(small|large)|medium|larger|smaller) )(.*)$|.*");
  655
+    var matches = reFontFamilies.exec(value);
  656
+    var fontParts = {otherValues: "", before: "", used: "", after: ""};
  657
+    var i = 0;
  658
+
  659
+    if (!matches)
  660
+        return;
  661
+
  662
+    var fonts;
  663
+    if (matches[6])
  664
+    {
  665
+        fontParts.otherValues = matches[1];
  666
+        fonts = matches[6].split(",");
  667
+    }
  668
+    else
  669
+    {
  670
+        fonts = matches[0].split(",");
  671
+    }
  672
+
  673
+    var usedFonts = Fonts.getFonts(element);
  674
+    for (; i < fonts.length; ++i)
  675
+    {
  676
+        var font = fonts[i].replace(/^"(.*)"$/, "$1").toLowerCase();
  677
+        if (genericFontFamilies.hasOwnProperty(font))
  678
+            font = getFontForGenericFontFamily(font).toLowerCase();
  679
+
  680
+        for (var j = 0; j < usedFonts.length; ++j)
  681
+        {
  682
+            if (font == usedFonts[j].CSSFamilyName.toLowerCase())
  683
+            {
  684
+                fontParts.used = fonts[i];
  685
+                break;
  686
+            }
  687
+        }
  688
+
  689
+        if (fontParts.used != "")
  690
+            break;
  691
+
  692
+        fontParts.before += fonts[i];
  693
+        if (i < fonts.length-1)
  694
+            fontParts.before += ", ";
  695
+    }
  696
+
  697
+    if (i < fonts.length-1)
  698
+        fontParts.after = ", ";
  699
+    for (++i; i < fonts.length; ++i)
  700
+    {
  701
+        fontParts.after += fonts[i];
  702
+        if (i < fonts.length-1)
  703
+            fontParts.after += ", ";
  704
+    }
  705
+
  706
+    return fontParts;
  707
+}
  708
+
607 709
 // ********************************************************************************************* //
608 710
 // Registration
609 711
 
10  extension/skin/classic/css.css
@@ -37,11 +37,15 @@
37 37
 }
38 38
 
39 39
 .cssPropName {
40  
-    color: DarkGreen;
  40
+    color: darkgreen;
41 41
 }
42 42
 
43  
-.cssPropValue {
44  
-    color: DarkBlue;
  43
+.cssPropValue, .cssFontPropValue {
  44
+    color: darkblue;
  45
+}
  46
+
  47
+.cssFontPropBefore, .cssFontPropAfter {
  48
+    color: #787878;
45 49
 }
46 50
 
47 51
 .cssOverridden > .cssPropName,

0 notes on commit 8520d53

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