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
"use strict";
const {
PureComponent,
} = require("resource://devtools/client/shared/vendor/react.js");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const {
getStr,
} = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
const Types = require("resource://devtools/client/inspector/fonts/types.js");
const isMacOS = Services.appinfo.OS === "Darwin";
const MAX_STRING_LENGTH = 250;
class FontMetadata extends PureComponent {
static get propTypes() {
return {
font: PropTypes.shape(Types.font).isRequired,
};
}
constructor() {
super();
this.state = { expanded: {} };
}
/**
* Handle displaying potentially long font properties (e.g. License).
* If the string is larger than MAX_STRING_LENGTH, the string gets truncated
* and we display a twisty button to reveal the full text.
*
* @param {String} fontProperty: The font property to render
* @returns {String|Array<ReactElement>}
*/
renderExpandableString(fontProperty) {
const str = this.props.font[fontProperty];
if (str.length <= MAX_STRING_LENGTH) {
return str;
}
const expanded = !!this.state.expanded[fontProperty];
const toggleExpanded = () => {
this.setState({
expanded: { ...this.state.expanded, [fontProperty]: !expanded },
});
};
const title = getStr("fontinspector.showFullText");
return [
dom.button(
{
className: "theme-twisty",
title,
"aria-expanded": expanded,
onClick: toggleExpanded,
},
""
),
!expanded ? str.substring(0, MAX_STRING_LENGTH) : str,
!expanded
? dom.button({
onClick: toggleExpanded,
title,
className: "font-truncated-string-expander",
})
: null,
];
}
render() {
const { font } = this.props;
const dlItems = [];
if (font.version) {
dlItems.push(
dom.dt({}, getStr("fontinspector.fontVersion")),
// font.version might already have the `Version` prefix, remove it.
dom.dd({}, font.version.replace(/^version(\s|:)*/i, ""))
);
}
const onClickLink = e => {
e.preventDefault();
openContentLink(e.target.href, {
inBackground: isMacOS ? e.metaKey : e.ctrlKey,
relatedToCurrent: true,
});
};
if (font.designer) {
dlItems.push(
dom.dt({}, getStr("fontinspector.fontDesigner")),
dom.dd(
{},
font.designerUrl && URL.canParse(font.designerUrl)
? dom.a(
{
href: font.designerUrl,
onClick: onClickLink,
},
font.designer
)
: font.designer
)
);
}
if (font.manufacturer) {
dlItems.push(
dom.dt({}, getStr("fontinspector.fontManufacturer")),
dom.dd({}, font.manufacturer)
);
}
if (font.vendorUrl) {
dlItems.push(
dom.dt({}, getStr("fontinspector.fontVendor")),
dom.dd(
{},
dom.a({ href: font.vendorUrl, onClick: onClickLink }, font.vendorUrl)
)
);
}
if (font.description) {
dlItems.push(
dom.dt({}, getStr("fontinspector.fontDescription")),
dom.dd({}, this.renderExpandableString("description"))
);
}
if (font.license) {
dlItems.push(
dom.dt({}, getStr("fontinspector.fontLicense")),
dom.dd({}, this.renderExpandableString("license"))
);
}
if (font.licenseUrl) {
dlItems.push(
dom.dt({}, getStr("fontinspector.fontLicenseInfoUrl")),
dom.dd(
{},
dom.a(
{ href: font.licenseUrl, onClick: onClickLink },
font.licenseUrl
)
)
);
}
if (!dlItems) {
return null;
}
return dom.dl({}, dlItems);
}
}
module.exports = FontMetadata;