Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Better approach for issue 5420.

Now multiple fonts can be marked as used when an element uses different
fonts for the texts in it.
  • Loading branch information...
commit e8ab8cb95aa0325410ebef5084ed7fd56fe43f42 1 parent 1ae347f
Sebastian Zartner SebastianZ authored
88 extension/content/firebug/css/cssElementPanel.js
View
@@ -79,11 +79,22 @@ CSSElementPanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
CSSFontPropValueTag:
SPAN({"class": "cssFontPropValue"},
- SPAN("$otherValues"),
- SPAN({"class": "cssFontPropBefore"}, "$before"),
- SPAN({"class": "cssFontUsed"}, "$used"),
- SPAN({"class": "cssFontPropAfter"}, "$after")
- )
+ FOR("part", "$propValueParts",
+ SPAN({"class": "$part.class"}, "$part.value"),
+ SPAN({"class": "cssFontPropSeparator"}, "$part|getSeparator")
+ )
+ ),
+
+ getSeparator: function(part)
+ {
+ if (part.type == "otherProps")
+ return " ";
+
+ if (part.last)
+ return "";
+
+ return ",";
+ }
}),
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //
@@ -126,11 +137,12 @@ CSSElementPanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
{
var propValueElem = prop.getElementsByClassName("cssPropValue").item(0);
var propValue = propValueElem.textContent;
- var fontParts = getFontParts(element, propValue);
+ var fontPropValueParts = getFontPropValueParts(element, propValue);
- // xxxsz: Web fonts are not covered by this.
- // For that to work we need to react to when the fonts are loaded.
- this.template.CSSFontPropValueTag.replace(fontParts, propValueElem);
+ // xxxsz: Web fonts not being loaded at display time
+ // won't be marked as used. See issue 5420.
+ this.template.CSSFontPropValueTag.replace({propValueParts: fontPropValueParts},
+ propValueElem);
}
}
@@ -652,16 +664,19 @@ function safeGetContentState(selection)
}
}
-function getFontForGenericFontFamily(genericFontFamily)
+function getFontPropValueParts(element, value)
{
- var fontsDomain = "font.name."+genericFontFamily;
+ function isFontInDefinition(fonts, font)
+ {
+ for (var i = 0; i < fonts.length; ++i)
+ {
+ if (font == fonts[i].replace(/^"(.*)"$/, "$1").toLowerCase())
+ return true;
+ }
- // xxxsz: Is there a possibility to find out the language group used for a specific page?
- return Options.getPref(fontsDomain, "x-western");
-}
+ return false;
+ }
-function getFontParts(element, value)
-{
const genericFontFamilies =
{
"serif": 1,
@@ -671,9 +686,9 @@ function getFontParts(element, value)
"monospace": 1,
};
const reFontFamilies = new RegExp("^(.*(\\d+(\\.\\d+)?(em|ex|ch|rem|cm|mm|in|pt|pc|px|%)|"+
- "x{0,2}-(small|large)|medium|larger|smaller) )(.*)$|.*");
+ "x{0,2}-(small|large)|medium|larger|smaller)) (.*)$|.*");
var matches = reFontFamilies.exec(value);
- var fontParts = {otherValues: "", before: "", used: "", after: ""};
+ var parts = [];
var i = 0;
if (!matches)
@@ -682,7 +697,7 @@ function getFontParts(element, value)
var fonts;
if (matches[6])
{
- fontParts.otherValues = matches[1];
+ parts.push({type: "otherProps", value: matches[1]});
fonts = matches[6].split(",");
}
else
@@ -691,39 +706,36 @@ function getFontParts(element, value)
}
var usedFonts = Fonts.getFonts(element);
+ var genericFontUsed = false;
for (; i < fonts.length; ++i)
{
var font = fonts[i].replace(/^"(.*)"$/, "$1").toLowerCase();
- if (genericFontFamilies.hasOwnProperty(font))
- font = getFontForGenericFontFamily(font).toLowerCase();
-
+ var isUsedFont = false;
for (var j = 0; j < usedFonts.length; ++j)
{
- if (font == usedFonts[j].CSSFamilyName.toLowerCase())
+ var usedFont = usedFonts[j].CSSFamilyName.toLowerCase();
+ if (font == usedFont || (genericFontFamilies.hasOwnProperty(font) &&
+ !genericFontUsed && !isFontInDefinition(fonts, usedFont)))
{
- fontParts.used = fonts[i];
+ parts.push({type: "used", value: fonts[i]});
+
+ isUsedFont = true;
+ if (genericFontFamilies.hasOwnProperty(font))
+ genericFontUsed = true;
break;
}
}
- if (fontParts.used != "")
- break;
+ if (!isUsedFont)
+ parts.push({type: "unused", class: "cssPropValueUnused", value: fonts[i]});
- fontParts.before += fonts[i];
- if (i < fonts.length-1)
- fontParts.before += ",";
}
- if (i < fonts.length-1)
- fontParts.after = ",";
- for (++i; i < fonts.length; ++i)
- {
- fontParts.after += fonts[i];
- if (i < fonts.length-1)
- fontParts.after += ",";
- }
+ // xxxsz: Domplate doesn't allow to check for the last element in an array yet,
+ // so use this as hack
+ parts[parts.length-1].last = true;
- return fontParts;
+ return parts;
}
// ********************************************************************************************* //
2  extension/skin/classic/css.css
View
@@ -44,7 +44,7 @@
color: darkblue;
}
-.cssFontPropBefore, .cssFontPropAfter {
+.cssPropValueUnused, .cssFontPropSeparator {
color: #787878;
}
Please sign in to comment.
Something went wrong with that request. Please try again.