renderFontOrigin(url) {
if (!url) {
return dom.p(
{
className: "font-origin system"
},
getStr("fontinspector.system")
);
}
return dom.p(
{
className: "font-origin remote",
},
dom.span(
{
className: "url",
title: url
},
url
),
dom.button(
{
className: "copy-icon",
onClick: this.onCopyURL,
title: getStr("fontinspector.copyURL"),
}
)
);
}
render() {
const { canBeEnabled } = this.props;
const { enabling } = this.state;
const enableButtonStr = enabling ? "accessibility.enabling" : "accessibility.enable";
let title;
let disableButton = false;
if (canBeEnabled) {
title = L10N.getStr("accessibility.enable.enabledTitle");
} else {
disableButton = true;
title = L10N.getStr("accessibility.enable.disabledTitle");
}
return (
div({ className: "description" },
p({ className: "general" },
img({
src: "chrome://devtools/skin/images/accessibility.svg",
alt: L10N.getStr("accessibility.logo")
}),
L10N.getStr("accessibility.description.general")),
Button({
id: "accessibility-enable-button",
onClick: this.onEnable,
disabled: enabling || disableButton,
busy: enabling,
"data-standalone": true,
title
}, L10N.getStr(enableButtonStr))
)
);
}
render() {
let {
box,
direction,
focusable,
level,
property,
textContent,
} = this.props;
let rotate = direction &&
(direction == "left" || direction == "right") &&
box !== "position" &&
textContent.toString().length > LONG_TEXT_ROTATE_LIMIT;
return dom.p(
{
className: `boxmodel-${box}
${direction ? " boxmodel-" + direction : "boxmodel-" + property}
${rotate ? " boxmodel-rotate" : ""}`,
},
dom.span(
{
className: "boxmodel-editable",
"data-box": box,
tabIndex: box === level && focusable ? 0 : -1,
title: property,
ref: span => {
this.boxModelEditable = span;
},
},
textContent
)
);
}
_renderLocalBuildSection() {
const { objdirs } = this.props;
return details(
{ className: "perf-settings-details" },
summary(
{
className: "perf-settings-summary",
id: "perf-settings-local-build-summary",
},
"Local build:"
),
div(
{ className: "perf-settings-details-contents" },
div(
{ className: "perf-settings-details-contents-slider" },
p(null,
`If you're profiling a build that you have compiled yourself, on this
machine, please add your build's objdir to the list below so that
it can be used to look up symbol information.`),
DirectoryPicker({
dirs: objdirs,
onAdd: this._handleAddObjdir,
onRemove: this._handleRemoveObjdir,
}),
)
)
);
}
renderFontFormatURL(url, format) {
return dom.p(
{
className: "font-format-url"
},
dom.input(
{
className: "font-url",
readOnly: "readonly",
value: url
}
),
" ",
format ?
dom.span(
{
className: "font-format"
},
format
)
:
dom.span(
{
className: "font-format",
hidden: "true"
},
format
)
);
}
render() {
let {
client,
connect,
debugDisabled,
error,
targetClass,
targets,
sort
} = this.props;
if (sort) {
targets = targets.sort(LocaleCompare);
}
targets = targets.map(target => {
return targetClass({ client, connect, target, debugDisabled });
});
let content = "";
if (error) {
content = error;
} else if (targets.length > 0) {
content = dom.ul({ className: "target-list" }, targets);
} else {
content = dom.p(null, Strings.GetStringFromName("nothing"));
}
return dom.div({ id: this.props.id, className: "targets" },
dom.h2(null, this.props.name), content);
}
renderServiceWorkersError() {
const isWindowPrivate = PrivateBrowsingUtils.isContentWindowPrivate(window);
const isPrivateBrowsingMode = PrivateBrowsingUtils.permanentPrivateBrowsing;
const isServiceWorkerDisabled = !Services.prefs
.getBoolPref("dom.serviceWorkers.enabled");
const isDisabled =
isWindowPrivate || isPrivateBrowsingMode || isServiceWorkerDisabled;
if (!isDisabled) {
return "";
}
return dom.p(
{
className: "service-worker-disabled",
},
dom.div({ className: "warning" }),
dom.span(
{
className: "service-worker-disabled-label",
},
Strings.GetStringFromName("configurationIsNotCompatible.label")
),
dom.a(
{
href: MORE_INFO_URL,
target: "_blank",
},
Strings.GetStringFromName("configurationIsNotCompatible.learnMore")
),
);
}
const errors = errorMessages.map((message, index) => {
return dom.p(
{
className: "technical-text",
key: "tmp-extension-install-error-" + index,
},
message
);
});
render() {
return (
div({ className: "description" },
p({ className: "general" },
img({
src: "chrome://devtools/skin/images/accessibility.svg",
alt: L10N.getStr("accessibility.logo"),
}), L10N.getStr("accessibility.description.oldVersion")))
);
}
renderEmptyList() {
return Localized(
{
id: "about-debugging-debug-target-list-empty",
},
dom.p(
{
className: "qa-debug-target-list-empty",
},
"Nothing yet."
)
);
}
render() {
const { localID, localVersion, minVersion, runtimeID, runtimeVersion, status } =
this.props.compatibilityReport;
if (status === COMPATIBILITY_STATUS.COMPATIBLE) {
return null;
}
let localizationId, statusClassName;
switch (status) {
case COMPATIBILITY_STATUS.TOO_OLD:
statusClassName = "qa-compatibility-warning-too-old";
localizationId = "about-debugging-browser-version-too-old";
break;
case COMPATIBILITY_STATUS.TOO_RECENT:
statusClassName = "qa-compatibility-warning-too-recent";
localizationId = "about-debugging-browser-version-too-recent";
break;
case COMPATIBILITY_STATUS.TOO_OLD_67_DEBUGGER:
statusClassName = "qa-compatibility-warning-too-old-67-debugger";
localizationId = "about-debugging-browser-version-too-old-67-debugger";
break;
}
return Message(
{
level: MESSAGE_LEVEL.WARNING,
isCloseable: true,
},
Localized(
{
id: localizationId,
a: dom.a({
href: TROUBLESHOOTING_URL,
target: "_blank",
}),
$localID: localID,
$localVersion: localVersion,
$minVersion: minVersion,
$runtimeID: runtimeID,
$runtimeVersion: runtimeVersion,
},
dom.p(
{
className: `qa-compatibility-warning ${statusClassName}`,
},
localizationId,
),
)
);
}
render() {
return div(
{ className: "perf-description" },
p(null,
"This new recording panel is a bit different from the existing " +
"performance panel. It records the entire browser, and then opens up " +
"and shares the profile with ",
this.renderLink(
"https://perf-html.io",
"perf-html.io"
),
", a Mozilla performance analysis tool."
),
p(null,
"This is still a prototype. Join along or file bugs at: ",
this.renderLink(
"https://github.com/devtools-html/perf.html",
"github.com/devtools-html/perf.html"
),
"."
)
);
}
warnings.map((warning, index) => {
return Message(
{
level: MESSAGE_LEVEL.WARNING,
key: `warning-${index}`,
},
dom.p(
{
className: "technical-text",
},
warning
)
);
})
render() {
const { href, learnMoreStringKey, l10n, messageStringKey, onClick } = this.props;
const learnMoreString = l10n.getStr(learnMoreStringKey);
const messageString = l10n.getFormatStr(messageStringKey, learnMoreString);
// Split the paragraph string with the link as a separator, and include the link into
// results.
const re = new RegExp(`(\\b${learnMoreString}\\b)`);
const contents = messageString.split(re);
contents[1] = a({ className: "link", href, onClick }, contents[1]);
return (
p({}, ...contents)
);
}
render() {
return article(
{ className: "worker-list-empty" },
h1(
{},
"You need to register a Service Worker to inspect it here.",
a(
{ className: "external-link", onClick: () => this.openDocumentation() },
"Learn More"
)
),
p(
{},
`If the current page should have a service worker, ` +
`here are some things you can try:`,
),
ul(
{ className: "worker-list-empty__tips"},
li(
{ className: "worker-list-empty__tips__item"},
"Look for errors in the Console.",
a(
{ className: "link", onClick: () => this.switchToConsole() },
"Open the Console"
)
),
li(
{ className: "worker-list-empty__tips__item"},
"Step through you Service Worker registration and look for exceptions.",
a(
{ className: "link", onClick: () => this.switchToDebugger()},
"Open the Debugger"
)
),
li(
{ className: "worker-list-empty__tips__item"},
"Inspect Service Workers from other domains.",
a(
{ className: "external-link", onClick: () => this.openAboutDebugging() },
"Open about:debugging"
)
)
)
);
}
render() {
const { canBeEnabled } = this.props;
const { enabling } = this.state;
const enableButtonStr = enabling ? "accessibility.enabling" : "accessibility.enable";
let title;
let disableButton = false;
if (canBeEnabled) {
title = L10N.getStr("accessibility.enable.enabledTitle");
} else {
disableButton = true;
title = L10N.getStr("accessibility.enable.disabledTitle");
}
return (
div({ className: "description", role: "presentation" },
div({ className: "general", role: "presentation" },
img({
src: "chrome://devtools/skin/images/accessibility.svg",
alt: L10N.getStr("accessibility.logo"),
}),
div({ role: "presentation" },
LearnMoreLink({
href: A11Y_LEARN_MORE_LINK +
"?utm_source=devtools&utm_medium=a11y-panel-description",
learnMoreStringKey: "accessibility.learnMore",
l10n: L10N,
messageStringKey: "accessibility.description.general.p1",
}),
p({}, L10N.getStr("accessibility.description.general.p2"))
)
),
Button({
id: "accessibility-enable-button",
onClick: this.onEnable,
disabled: enabling || disableButton,
busy: enabling,
"data-standalone": true,
title,
}, L10N.getStr(enableButtonStr))
)
);
}
renderMessage(flag, level, localizationId, className) {
if (!flag) {
return null;
}
return Message(
{
level,
className: `${className} sidebar-runtime-item__message`,
isCloseable: true,
},
Localized(
{
id: localizationId,
},
dom.p({ className: "word-wrap-anywhere" }, localizationId)
)
);
}
renderFontCSS(cssFamilyName) {
return dom.p(
{
className: "font-css"
},
dom.span(
{},
getStr("fontinspector.usedAs")
),
" \"",
dom.span(
{
className: "font-css-name"
},
cssFamilyName
),
"\""
);
}
render() {
const { elementPickerEnabled, toggleElementPicker } = this.props;
return dom.div(
{
className: "animation-error-message devtools-sidepanel-no-result"
},
dom.p(
null,
L10N.getStr("panel.noAnimation")
),
dom.button(
{
className: "animation-element-picker devtools-button" +
(elementPickerEnabled ? " checked" : ""),
"data-standalone": true,
onClick: toggleElementPicker
}
)
);
}
renderError() {
const { temporaryInstallError } = this.props;
if (!temporaryInstallError) {
return null;
}
const errorMessages = [
temporaryInstallError.message,
...(temporaryInstallError.additionalErrors || []),
];
const errors = errorMessages.map((message, index) => {
return dom.p(
{
className: "technical-text",
key: "tmp-extension-install-error-" + index,
},
message
);
});
return Message(
{
level: MESSAGE_LEVEL.ERROR,
className: "js-tmp-extension-install-error",
},
Localized(
{
id: "about-debugging-tmp-extension-install-error",
},
dom.p(
{ },
"There was an error during the temporary add-on installation"
)
),
errors,
);
}
renderEmptyState() {
return dom.div({ className: "devtools-sidepanel-no-result" },
dom.p({}, getStr("changes.noChanges")),
dom.p({}, getStr("changes.noChangesDescription"))
);
}
render() {
const { description } = this.props.target.details;
return dom.p({ className: "debug-target-item__subname ellipsis-text" }, description);
}
render() {
const {
boxModel,
onShowBoxModelEditor,
} = this.props;
const { layout } = boxModel;
let { height, width } = layout;
const { activeDescendant: level, focusable } = this.state;
const borderTop = this.getBorderOrPaddingValue("border-top-width");
const borderRight = this.getBorderOrPaddingValue("border-right-width");
const borderBottom = this.getBorderOrPaddingValue("border-bottom-width");
const borderLeft = this.getBorderOrPaddingValue("border-left-width");
const paddingTop = this.getBorderOrPaddingValue("padding-top");
const paddingRight = this.getBorderOrPaddingValue("padding-right");
const paddingBottom = this.getBorderOrPaddingValue("padding-bottom");
const paddingLeft = this.getBorderOrPaddingValue("padding-left");
const displayPosition = this.getDisplayPosition();
const positionTop = this.getPositionValue("top");
const positionRight = this.getPositionValue("right");
const positionBottom = this.getPositionValue("bottom");
const positionLeft = this.getPositionValue("left");
const marginTop = this.getMarginValue("margin-top", "top");
const marginRight = this.getMarginValue("margin-right", "right");
const marginBottom = this.getMarginValue("margin-bottom", "bottom");
const marginLeft = this.getMarginValue("margin-left", "left");
height = this.getHeightValue(height);
width = this.getWidthValue(width);
const contentBox = layout["box-sizing"] == "content-box" ?
dom.div({ className: "boxmodel-size" },
BoxModelEditable({
box: "content",
focusable,
level,
property: "width",
ref: editable => {
this.contentEditable = editable;
},
textContent: width,
onShowBoxModelEditor,
}),
dom.span({}, "\u00D7"),
BoxModelEditable({
box: "content",
focusable,
level,
property: "height",
textContent: height,
onShowBoxModelEditor,
})
)
:
dom.p({ className: "boxmodel-size" },
dom.span({ title: "content" },
SHARED_L10N.getFormatStr("dimensions", width, height)
)
);
return (
dom.div(
{
className: "boxmodel-main devtools-monospace",
"data-box": "position",
ref: div => {
this.positionLayout = div;
},
onClick: this.onLevelClick,
onKeyDown: this.onKeyDown,
onMouseOver: this.onHighlightMouseOver,
onMouseOut: this.props.onHideBoxModelHighlighter,
},
displayPosition ?
dom.span(
{
className: "boxmodel-legend",
"data-box": "position",
title: "position",
},
"position"
)
:
null,
dom.div({ className: "boxmodel-box" },
dom.span(
{
className: "boxmodel-legend",
"data-box": "margin",
title: "margin",
},
"margin"
),
dom.div(
{
className: "boxmodel-margins",
"data-box": "margin",
title: "margin",
ref: div => {
this.marginLayout = div;
},
},
dom.span(
{
className: "boxmodel-legend",
"data-box": "border",
title: "border",
},
"border"
),
dom.div(
{
className: "boxmodel-borders",
"data-box": "border",
title: "border",
ref: div => {
this.borderLayout = div;
},
},
dom.span(
{
className: "boxmodel-legend",
"data-box": "padding",
title: "padding",
},
"padding"
),
dom.div(
{
className: "boxmodel-paddings",
"data-box": "padding",
title: "padding",
ref: div => {
this.paddingLayout = div;
},
},
dom.div({
className: "boxmodel-contents",
"data-box": "content",
title: "content",
ref: div => {
this.contentLayout = div;
},
})
)
)
)
),
displayPosition ?
BoxModelEditable({
box: "position",
direction: "top",
focusable,
level,
property: "position-top",
ref: editable => {
this.positionEditable = editable;
},
textContent: positionTop,
onShowBoxModelEditor,
})
:
null,
displayPosition ?
BoxModelEditable({
box: "position",
direction: "right",
focusable,
level,
property: "position-right",
textContent: positionRight,
onShowBoxModelEditor,
})
:
null,
displayPosition ?
BoxModelEditable({
box: "position",
direction: "bottom",
focusable,
level,
property: "position-bottom",
textContent: positionBottom,
onShowBoxModelEditor,
})
:
null,
displayPosition ?
BoxModelEditable({
box: "position",
direction: "left",
focusable,
level,
property: "position-left",
textContent: positionLeft,
onShowBoxModelEditor,
})
:
null,
BoxModelEditable({
box: "margin",
direction: "top",
focusable,
level,
property: "margin-top",
ref: editable => {
this.marginEditable = editable;
},
textContent: marginTop,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "margin",
direction: "right",
focusable,
level,
property: "margin-right",
textContent: marginRight,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "margin",
direction: "bottom",
focusable,
level,
property: "margin-bottom",
textContent: marginBottom,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "margin",
direction: "left",
focusable,
level,
property: "margin-left",
textContent: marginLeft,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "border",
direction: "top",
focusable,
level,
property: "border-top-width",
ref: editable => {
this.borderEditable = editable;
},
textContent: borderTop,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "border",
direction: "right",
focusable,
level,
property: "border-right-width",
textContent: borderRight,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "border",
direction: "bottom",
focusable,
level,
property: "border-bottom-width",
textContent: borderBottom,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "border",
direction: "left",
focusable,
level,
property: "border-left-width",
textContent: borderLeft,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "padding",
direction: "top",
focusable,
level,
property: "padding-top",
ref: editable => {
this.paddingEditable = editable;
},
textContent: paddingTop,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "padding",
direction: "right",
focusable,
level,
property: "padding-right",
textContent: paddingRight,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "padding",
direction: "bottom",
focusable,
level,
property: "padding-bottom",
textContent: paddingBottom,
onShowBoxModelEditor,
}),
BoxModelEditable({
box: "padding",
direction: "left",
focusable,
level,
property: "padding-left",
textContent: paddingLeft,
onShowBoxModelEditor,
}),
contentBox
)
);
}