Bug 1097150 - Added getAllUsedFontFaces to styles.js retrieve fonts from all windows;r=pbrosset

This commit is contained in:
Anurag Chaudhury (anuragchaudhury@gmail.com) 2015-01-05 09:38:57 -08:00
parent 70fc8c5202
commit be3aee6431
6 changed files with 65 additions and 23 deletions

View File

@ -85,7 +85,7 @@ FontInspector.prototype = {
/**
* Retrieve all the font info for the selected node and display it.
*/
update: Task.async(function*() {
update: Task.async(function*(showAllFonts) {
let node = this.inspector.selection.nodeFront;
if (!node ||
@ -104,10 +104,16 @@ FontInspector.prototype = {
includePreviews: true,
previewFillStyle: fillStyle
}
let fonts = yield this.pageStyle.getUsedFontFaces(node, options)
let fonts = [];
if (showAllFonts){
fonts = yield this.pageStyle.getAllUsedFontFaces(options)
.then(null, console.error);
if (!fonts) {
}
else{
fonts = yield this.pageStyle.getUsedFontFaces(node, options)
.then(null, console.error);
}
if (!fonts || !fonts.length) {
return;
}
@ -169,21 +175,10 @@ FontInspector.prototype = {
},
/**
* Select the <body> to show all the fonts included in the document.
* Show all fonts for the document (including iframes)
*/
showAll: function FI_showAll() {
if (!this.isActive() ||
!this.inspector.selection.isConnected() ||
!this.inspector.selection.isElementNode()) {
return;
}
// Select the body node to show all fonts
let walker = this.inspector.walker;
walker.getRootNode().then(root => walker.querySelector(root, "body")).then(body => {
this.inspector.selection.setNodeFront(body, "fontinspector");
});
this.update(true);
},
}

View File

@ -2,6 +2,7 @@
subsuite = devtools
support-files =
browser_fontinspector.html
test_iframe.html
ostrich-black.ttf
ostrich-regular.ttf
head.js

View File

@ -45,6 +45,7 @@
<body>
BODY
<div>DIV</div>
<iframe src="test_iframe.html"></iframe>
<div class="normal-text">NORMAL DIV</div>
<div class="bold-text">BOLD DIV</div>
<div class="black-text">800 DIV</div>

View File

@ -107,7 +107,8 @@ function* testShowAllFonts(inspector) {
viewDoc.querySelector("#showall").click();
yield updated;
is(inspector.selection.nodeFront.nodeName, "BODY", "Show all fonts selected the body node");
// shouldn't change the node selection
is(inspector.selection.nodeFront.nodeName, "DIV", "Show all fonts selected");
let sections = viewDoc.querySelectorAll("#all-fonts > section");
is(sections.length, 5, "And font-inspector still shows 5 fonts for body");
is(sections.length, 6, "Font inspector shows 6 fonts (1 from iframe)");
}

View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<style>
div{
font-family: "Times New Roman";
}
</style>
<body>
<div>Hello world</div>
</body>

View File

@ -238,10 +238,42 @@ var PageStyleActor = protocol.ActorClass({
}
}),
/**
* Get all the fonts from a page.
*
* @param object options
* `includePreviews`: Whether to also return image previews of the fonts.
* `previewText`: The text to display in the previews.
* `previewFontSize`: The font size of the text in the previews.
*
* @returns object
* object with 'fontFaces', a list of fonts that apply to this node.
*/
getAllUsedFontFaces: method(function(options) {
let windows = this.inspector.tabActor.windows;
let fontsList = [];
for(let win of windows){
fontsList = [...fontsList,
...this.getUsedFontFaces(win.document.body, options)];
}
return fontsList;
},
{
request: {
includePreviews: Option(0, "boolean"),
previewText: Option(0, "string"),
previewFontSize: Option(0, "string"),
previewFillStyle: Option(0, "string")
},
response: {
fontFaces: RetVal("array:fontface")
}
}),
/**
* Get the font faces used in an element.
*
* @param NodeActor node
* @param NodeActor node / actual DOM node
* The node to get fonts from.
* @param object options
* `includePreviews`: Whether to also return image previews of the fonts.
@ -252,11 +284,12 @@ var PageStyleActor = protocol.ActorClass({
* object with 'fontFaces', a list of fonts that apply to this node.
*/
getUsedFontFaces: method(function(node, options) {
let contentDocument = node.rawNode.ownerDocument;
// node.rawNode is defined for NodeActor objects
let actualNode = node.rawNode || node;
let contentDocument = actualNode.ownerDocument;
// We don't get fonts for a node, but for a range
let rng = contentDocument.createRange();
rng.selectNodeContents(node.rawNode);
rng.selectNodeContents(actualNode);
let fonts = DOMUtils.getUsedFontFaces(rng);
let fontsArray = [];