Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/* eslint no-unused-vars: [2, {"vars": "local"}] */
"use strict";
// Import the inspector's head.js first (which itself imports shared-head.js).
Services.scriptloader.loadSubScript(
this
);
Services.prefs.setCharPref("devtools.inspector.activeSidebar", "fontinspector");
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.inspector.activeSidebar");
Services.prefs.clearUserPref("devtools.inspector.selectedSidebar");
});
var nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
/**
* The font-inspector doesn't participate in the inspector's update mechanism
* (i.e. it doesn't call inspector.updating() when updating), so simply calling
* the default selectNode isn't enough to guaranty that the panel has finished
* updating. We also need to wait for the fontinspector-updated event.
*
* @param {String|NodeFront} selector
* @param {InspectorPanel} inspector
* The instance of InspectorPanel currently loaded in the toolbox.
* @param {String} reason
* Defaults to "test" which instructs the inspector not to highlight the
* node upon selection.
*/
var _selectNode = selectNode;
selectNode = async function (node, inspector, reason) {
// Ensure node is a NodeFront and not a selector (which is also accepted as
// an argument to selectNode).
node = await getNodeFront(node, inspector);
// The FontInspector will fallback to the parent node when a text node is
// selected.
const isTextNode = node.nodeType == nodeConstants.TEXT_NODE;
const expectedNode = isTextNode ? node.parentNode() : node;
const onEditorUpdated = inspector.once("fonteditor-updated");
const onFontInspectorUpdated = new Promise(resolve => {
inspector.on("fontinspector-updated", function onUpdated(eventNode) {
if (eventNode === expectedNode) {
inspector.off("fontinspector-updated", onUpdated);
resolve();
}
});
});
await _selectNode(node, inspector, reason);
// Wait for both the font inspector and font editor before proceeding.
await Promise.all([onFontInspectorUpdated, onEditorUpdated]);
};
/**
* Adds a new tab with the given URL, opens the inspector and selects the
* font-inspector tab.
* @return {Promise} resolves to a {tab, toolbox, inspector, view} object
*/
var openFontInspectorForURL = async function (url) {
const tab = await addTab(url);
const { toolbox, inspector } = await openInspector();
// Call selectNode again here to force a fontinspector update since we don't
// know if the fontinspector-updated event has been sent while the inspector
// was being opened or not.
await selectNode("body", inspector);
return {
tab,
toolbox,
inspector,
view: inspector.getPanel("fontinspector"),
};
};
/**
* Focus the preview input, clear it, type new text into it and wait for the
* preview images to be updated.
*
* @param {FontInspector} view - The FontInspector instance.
* @param {String} text - The text to preview.
*/
async function updatePreviewText(view, text) {
info(`Changing the preview text to '${text}'`);
const doc = view.document;
const input = doc.querySelector("#font-preview-input-container input");
input.focus();
info("Blanking the input field.");
while (input.value.length) {
const update = view.inspector.once("fontinspector-updated");
EventUtils.sendKey("BACK_SPACE", doc.defaultView);
await update;
}
if (text) {
info(`Typing "${text}" into the input field.`);
const update = view.inspector.once("fontinspector-updated");
EventUtils.sendString(text, doc.defaultView);
await update;
}
is(input.value, text, `The input now contains "${text}".`);
}
/**
* Get all of the <li> elements for the fonts used on the currently selected element.
*
* NOTE: This method is used by tests which check the old Font Inspector. It, along with
* the tests should be removed once the Font Editor reaches Firefox Stable.
*
* @param {Document} viewDoc
* @return {NodeList}
*/
function getUsedFontsEls_obsolete(viewDoc) {
return viewDoc.querySelectorAll("#font-editor .fonts-list li");
}
/**
* Get all of the elements with names of fonts used on the currently selected element.
*
* @param {Document} viewDoc
* @return {NodeList}
*/
function getUsedFontsEls(viewDoc) {
return viewDoc.querySelectorAll(
"#font-editor .font-control-used-fonts .font-name"
);
}
/**
* Get all of the elements with groups of fonts used on the currently selected element.
*
* @param {Document} viewDoc
* @return {NodeList}
*/
function getUsedFontGroupsEls(viewDoc) {
return viewDoc.querySelectorAll(
"#font-editor .font-control-used-fonts .font-group"
);
}
/**
* Get the DOM element for the accordion widget that contains the fonts used elsewhere in
* the document.
*
* @param {Document} viewDoc
* @return {DOMNode}
*/
function getFontsAccordion(viewDoc) {
return viewDoc.querySelector("#font-container .accordion");
}
/**
* Expand a given accordion widget.
*
* @param {DOMNode} accordion
*/
async function expandAccordion(accordion) {
const isExpanded = () => accordion.querySelector(".fonts-list");
if (isExpanded()) {
return;
}
const onExpanded = BrowserTestUtils.waitForCondition(
isExpanded,
"Waiting for other fonts section"
);
accordion.querySelector(".theme-twisty").click();
await onExpanded;
}
/**
* Expand the fonts accordion.
*
* @param {Document} viewDoc
*/
async function expandFontsAccordion(viewDoc) {
info("Expanding the other fonts section");
await expandAccordion(getFontsAccordion(viewDoc));
}
/**
* Get all of the <li> elements for the fonts used elsewhere in the document.
*
* @param {Document} viewDoc
* @return {NodeList}
*/
function getAllFontsEls(viewDoc) {
return getFontsAccordion(viewDoc).querySelectorAll(".fonts-list > li");
}
/**
* Given a font element, return its name.
*
* @param {DOMNode} fontEl
* The font element.
* @return {String}
* The name of the font as shown in the UI.
*/
function getName(fontEl) {
return fontEl.querySelector(".font-name").textContent;
}
/**
* Given a font element, return the font's URL.
*
* @param {DOMNode} fontEl
* The font element.
* @return {String}
* The URL where the font was loaded from as shown in the UI.
*/
function getURL(fontEl) {
return fontEl.querySelector(".font-origin").textContent;
}
/**
* Given a font element, return its family name.
*
* @param {DOMNode} fontEl
* The font element.
* @return {String}
* The name of the font family as shown in the UI.
*/
function getFamilyName(fontEl) {
return fontEl.querySelector(".font-family-name").textContent;
}
/**
* Get the value and unit of a CSS font property or font axis from the font editor.
*
* @param {Document} viewDoc
* Host document of the font inspector panel.
* @param {String} name
* Font property name or axis tag
* @return {Object}
* Object with the value and unit of the given font property or axis tag
* from the corresponding input fron the font editor.
* @Example:
* {
* value: {String|null}
* unit: {String|null}
* }
*/
function getPropertyValue(viewDoc, name) {
const selector = `#font-editor .font-value-input[name=${name}]`;
return {
// Ensure value input exists before querying its value
value:
viewDoc.querySelector(selector) &&
parseFloat(viewDoc.querySelector(selector).value),
// Ensure unit dropdown exists before querying its value
unit:
viewDoc.querySelector(selector + ` ~ .font-value-select`) &&
viewDoc.querySelector(selector + ` ~ .font-value-select`).value,
};
}
/**
* Given a font element, check whether its font source is remote.
*
* @param {DOMNode} fontEl
* The font element.
* @return {Boolean}
*/
function isRemote(fontEl) {
return fontEl.querySelector(".font-origin").classList.contains("remote");
}