render() {
const {
flexItems,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
scrollToTop,
setSelectedNode,
} = this.props;
return (
dom.div(
{ className: "flex-item-list" },
dom.div({ className: "flex-item-list-header" },
!flexItems.length ?
getStr("flexbox.noFlexItems") :
getStr("flexbox.flexItems")),
flexItems.map((flexItem, index) => FlexItem({
key: flexItem.actorID,
flexItem,
index: index + 1,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
scrollToTop,
setSelectedNode,
}))
)
);
}
/**
* Render Accessibility panel content
*/
render() {
const { accessibility, walker, enabled } = this.props;
if (!enabled) {
return Description({ accessibility });
}
return (
div({ className: "mainFrame", role: "presentation" },
Toolbar({ accessibility, walker }),
SplitBox({
ref: "splitBox",
initialSize: SIDEBAR_WIDTH,
minSize: "10px",
maxSize: "80%",
splitterSize: 1,
endPanelControl: true,
startPanel: div({
className: "main-panel",
role: "presentation"
}, AccessibilityTree({ walker })),
endPanel: RightSidebar(),
vert: this.useLandscapeMode,
})
));
}
render() {
let { client } = this.props;
let { selectedPanelId } = this.state;
let selectPanel = this.selectPanel;
let selectedPanel = panels.find(p => p.id == selectedPanelId);
let panel;
if (selectedPanel) {
panel = selectedPanel.component({ client, id: selectedPanel.id });
} else {
panel = (
dom.div({ className: "error-page" },
dom.h1({ className: "header-name" },
Strings.GetStringFromName("pageNotFound")
),
dom.h4({ className: "error-page-details" },
Strings.formatStringFromName("doesNotExist", [selectedPanelId], 1))
)
);
}
return dom.div({ className: "app" },
PanelMenu({ panels, selectedPanelId, selectPanel }),
dom.div({ className: "main-content" }, panel)
);
}
render() {
let content = this.props.content;
if (!content && this.props.params) {
content = NetInfoParams({
params: this.props.params
});
}
let open = this.state.open;
let className = open ? "opened" : "";
return (
dom.div({className: "netInfoGroup" + " " + className + " " +
this.props.type},
dom.span({
className: "netInfoGroupTwisty",
onClick: this.onToggle
}),
dom.span({
className: "netInfoGroupTitle",
onClick: this.onToggle},
this.props.name
),
dom.div({className: "netInfoGroupContent"},
content
)
)
);
}
render() {
let { client, connect, id } = this.props;
let { tabs } = this.state;
return dom.div({
id: id + "-panel",
className: "panel",
role: "tabpanel",
"aria-labelledby": id + "-header"
},
PanelHeader({
id: id + "-header",
name: Strings.GetStringFromName("tabs")
}),
dom.div({},
TargetList({
client,
connect,
id: "tabs",
name: Strings.GetStringFromName("tabs"),
sort: false,
targetClass: TabTarget,
targets: tabs
})
));
}
render() {
const { label: labelText, scale, id, value, display } = this.props;
return (
div(
{ className: "perf-settings-row" },
label(
{
className: "perf-settings-label",
htmlFor: id,
},
labelText
),
div(
{ className: "perf-settings-value" },
div(
{ className: "perf-settings-range-input" },
input({
type: "range",
className: `perf-settings-range-input-el`,
min: "0",
max: "100",
value: scale.fromValueToFraction(value) * 100,
onChange: this.handleInput,
id,
})
),
div(
{ className: `perf-settings-range-value`},
display(value)
)
)
)
);
}
render() {
let { data: file } = this.props;
let requestCookies = file.request.cookies;
let responseCookies = file.response.cookies;
// The cookie panel displays two groups of cookies:
// 1) Response Cookies
// 2) Request Cookies
let groups = [{
key: "responseCookies",
name: Locale.$STR("responseCookies"),
params: responseCookies
}, {
key: "requestCookies",
name: Locale.$STR("requestCookies"),
params: requestCookies
}];
return (
dom.div({className: "cookiesTabBox"},
dom.div({className: "panelContent"},
NetInfoGroupList({
groups: groups
})
)
)
);
}
render() {
return section(
{ className: "perf-settings" },
h2({ className: "perf-settings-title" }, "Recording Settings"),
div(
{ className: "perf-settings-row" },
label({ className: "perf-settings-label" }, "Overhead:"),
div(
{ className: "perf-settings-value perf-settings-notches" },
this._renderNotches()
)
),
Range({
label: "Sampling interval:",
value: this.props.interval,
id: "perf-range-interval",
scale: this._intervalExponentialScale,
display: _intervalTextDisplay,
onChange: this.props.changeInterval,
}),
Range({
label: "Buffer size:",
value: this.props.entries,
id: "perf-range-entries",
scale: this._entriesExponentialScale,
display: _entriesTextDisplay,
onChange: this.props.changeEntries,
}),
this._renderThreads(),
this._renderFeatures()
);
}
render() {
const { debugDisabled } = this.props;
return dom.div({ className: "addons-top" },
dom.div({ className: "addons-controls" },
dom.div({ className: "addons-options toggle-container-with-text" },
dom.input({
id: "enable-addon-debugging",
type: "checkbox",
checked: !debugDisabled,
onChange: this.onEnableAddonDebuggingChange,
role: "checkbox",
}),
dom.label({
className: "addons-debugging-label",
htmlFor: "enable-addon-debugging",
title: Strings.GetStringFromName("addonDebugging.tooltip"),
}, Strings.GetStringFromName("addonDebugging.label")),
dom.a({ href: MORE_INFO_URL, target: "_blank" },
Strings.GetStringFromName("addonDebugging.learnMore")
),
),
dom.button({
id: "load-addon-from-file",
onClick: this.loadAddonFromFile,
}, Strings.GetStringFromName("loadTemporaryAddon2"))
),
AddonsInstallError({
error: this.state.installError,
retryInstall: this.retryInstall,
}));
}
render() {
const { error } = this.props;
if (!this.props.error) {
return null;
}
const text = Strings.formatStringFromName("addonInstallError", [error.message], 1);
const additionalErrors = Array.isArray(error.additionalErrors) ?
dom.div(
{ className: "addons-install-error__additional-errors" },
error.additionalErrors.join(" ")
) : null;
return dom.div(
{ className: "addons-install-error" },
dom.span(
{},
dom.div({ className: "warning" }),
dom.span({}, text),
additionalErrors
),
dom.button(
{ className: "addons-install-retry", onClick: this.props.retryInstall },
Strings.GetStringFromName("retryTemporaryInstall")));
}
featureCheckboxes.map(({name, value, title, recommended}) => label(
{
className: "perf-settings-checkbox-label perf-settings-feature-label",
key: value,
},
input({
className: "perf-settings-checkbox",
id: `perf-settings-feature-checkbox-${value}`,
type: "checkbox",
value,
checked: this.props.features.includes(value),
onChange: this._handleFeaturesCheckboxChange,
}),
div({ className: "perf-settings-feature-name" }, name),
div(
{ className: "perf-settings-feature-title" },
title,
recommended
? span(
{ className: "perf-settings-subtext" },
" (Recommended on by default.)"
)
: null
)
))
_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,
}),
)
)
);
}
_renderCensus(state, census, diffing, onViewSourceInDebugger, onViewIndividuals) {
assert(census.report, "Should not render census that does not have a report");
if (!census.report.children) {
const censusFilterMsg = census.filter ? L10N.getStr("heapview.none-match")
: L10N.getStr("heapview.empty");
const msg = diffing ? L10N.getStr("heapview.no-difference")
: censusFilterMsg;
return this._renderHeapView(state, dom.div({ className: "empty" }, msg));
}
const contents = [];
if (census.display.breakdown.by === "allocationStack"
&& census.report.children
&& census.report.children.length === 1
&& census.report.children[0].name === "noStack") {
contents.push(dom.div({ className: "error no-allocation-stacks" },
L10N.getStr("heapview.noAllocationStacks")));
}
contents.push(CensusHeader({ diffing }));
contents.push(Census({
onViewSourceInDebugger,
onViewIndividuals,
diffing,
census,
onExpand: node => this.props.onCensusExpand(census, node),
onCollapse: node => this.props.onCensusCollapse(census, node),
onFocus: node => this.props.onCensusFocus(census, node),
}));
return this._renderHeapView(state, ...contents);
}
render() {
return dom.div(
{
className: "error-message js-error-message",
},
dom.div(
{
className: "error-message__header",
},
dom.img(
{
// Temporary image chosen to match error container in about:addons.
// Pending UX in Bug 1509091
src: "chrome://mozapps/skin/extensions/alerticon-error.svg",
}
),
Localized(
{
id: this.props.errorDescriptionKey,
},
dom.span({}, this.props.errorDescriptionKey)
)
),
this.props.children
);
}
render() {
const {
flexContainer,
setSelectedNode,
} = this.props;
const {
flexItemShown,
nodeFront,
} = flexContainer;
return (
dom.div({ className: "flex-header devtools-monospace" },
flexItemShown ?
dom.button({
className: "flex-header-button-prev devtools-button",
onClick: e => {
e.stopPropagation();
setSelectedNode(nodeFront);
},
})
:
null,
dom.div(
{
className: "flex-header-content" +
(flexItemShown ? " flex-item-shown" : ""),
},
this.renderFlexContainer(),
this.renderFlexItemSelector()
),
this.renderFlexboxHighlighterToggle()
)
);
}
render() {
let { data } = this.props;
let requestHeaders = data.request.headers;
let responseHeaders = data.response.headers;
// TODO: Another groups to implement:
// 1) Cached Headers
// 2) Headers from upload stream
let groups = [{
key: "responseHeaders",
name: Locale.$STR("responseHeaders"),
params: responseHeaders
}, {
key: "requestHeaders",
name: Locale.$STR("requestHeaders"),
params: requestHeaders
}];
// If response headers are not available yet, display a spinner
if (!responseHeaders || !responseHeaders.length) {
groups[0].content = Spinner();
}
return (
dom.div({className: "headersTabBox"},
dom.div({className: "panelContent"},
NetInfoGroupList({groups: groups})
)
)
);
}
render() {
const {
error,
isLargeText,
color,
value, backgroundColor, score,
min, backgroundColorMin, scoreMin,
max, backgroundColorMax, scoreMax,
} = this.props;
const children = [];
if (error) {
children.push(span({
className: "accessibility-color-contrast-error",
role: "presentation",
}, L10N.getStr("accessibility.contrast.error")));
return (div({
role: "presentation",
className: "accessibility-color-contrast",
}, ...children));
}
if (value) {
children.push(ContrastValue({ score, color, backgroundColor, value }));
} else {
children.push(
ContrastValue(
{ score: scoreMin, color, backgroundColor: backgroundColorMin, value: min }),
div({
role: "presentation",
className: "accessibility-color-contrast-separator",
}),
ContrastValue(
{ score: scoreMax, color, backgroundColor: backgroundColorMax, value: max }),
);
}
if (isLargeText) {
children.push(
span({
className: "accessibility-color-contrast-large-text",
role: "presentation",
title: L10N.getStr("accessibility.contrast.large.title"),
}, L10N.getStr("accessibility.contrast.large.text"))
);
}
return (
div(
{
role: "presentation",
className: "accessibility-color-contrast",
},
...children
)
);
}
render() {
let {
boxModel,
setSelectedNode,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
} = this.props;
let { layout } = boxModel;
let layoutInfo = ["box-sizing", "display", "float",
"line-height", "position", "z-index"];
const properties = layoutInfo.map(info => {
let { referenceElement, referenceElementType } = this.getReferenceElement(info);
return ComputedProperty({
name: info,
key: info,
value: layout[info],
referenceElement,
referenceElementType,
setSelectedNode,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
});
});
return dom.div(
{
className: "boxmodel-properties",
},
dom.div(
{
className: "boxmodel-properties-header",
onDoubleClick: this.onToggleExpander,
},
dom.span(
{
className: "boxmodel-properties-expander theme-twisty",
open: this.state.isOpen,
onClick: this.onToggleExpander,
}
),
BOXMODEL_L10N.getStr("boxmodel.propertiesLabel")
),
dom.div(
{
className: "boxmodel-properties-wrapper devtools-monospace",
hidden: !this.state.isOpen,
tabIndex: 0,
},
properties
)
);
}
render() {
const { client, connect, id } = this.props;
const { debugDisabled, extensions: targets } = this.state;
const installedName = Strings.GetStringFromName("extensions");
const temporaryName = Strings.GetStringFromName("temporaryExtensions");
const targetClass = AddonTarget;
const installedTargets = targets.filter((target) => !target.temporarilyInstalled);
const temporaryTargets = targets.filter((target) => target.temporarilyInstalled);
return dom.div({
id: id + "-panel",
className: "panel",
role: "tabpanel",
"aria-labelledby": id + "-header"
},
PanelHeader({
id: id + "-header",
name: Strings.GetStringFromName("addons")
}),
AddonsControls({ debugDisabled }),
dom.div({ id: "temporary-addons" },
TargetList({
id: "temporary-extensions",
name: temporaryName,
targets: temporaryTargets,
client,
connect,
debugDisabled,
targetClass,
sort: true
}),
dom.div({ className: "addons-tip"},
dom.div({ className: "addons-tip-icon"}),
dom.span({
className: "addons-web-ext-tip",
}, Strings.GetStringFromName("webExtTip")),
dom.a({ href: WEB_EXT_URL, target: "_blank" },
Strings.GetStringFromName("webExtTip.learnMore")
)
)
),
dom.div({ id: "addons" },
TargetList({
id: "extensions",
name: installedName,
targets: installedTargets,
client,
connect,
debugDisabled,
targetClass,
sort: true
})
));
}
_renderIndividuals(state, individuals, dominatorTree, onViewSourceInDebugger) {
assert(individuals.state === individualsState.FETCHED,
"Should have fetched individuals");
assert(dominatorTree && dominatorTree.root,
"Should have a dominator tree and its root");
const tree = dom.div(
{
className: "vbox",
style: {
overflowY: "auto"
}
},
IndividualsHeader(),
Individuals({
individuals,
dominatorTree,
onViewSourceInDebugger,
onFocus: this.props.onFocusIndividual
})
);
const shortestPaths = ShortestPaths({
graph: individuals.focused
? individuals.focused.shortestPaths
: null
});
return this._renderHeapView(
state,
dom.div(
{ className: "hbox devtools-toolbar" },
dom.label(
{ id: "pop-view-button-label" },
dom.button(
{
id: "pop-view-button",
className: "devtools-button",
onClick: this.props.onPopView,
},
L10N.getStr("toolbar.pop-view")
),
L10N.getStr("toolbar.pop-view.label")
),
L10N.getStr("toolbar.viewing-individuals")
),
HSplitBox({
start: tree,
end: shortestPaths,
startWidth: this.props.sizes.shortestPathsSize,
onResize: this.props.onShortestPathsResize,
})
);
}
render() {
if (!this.props.grids.length) {
return (
dom.div({ className: "devtools-sidepanel-no-result" },
getStr("layout.noGridsOnThisPage")
)
);
}
const {
getSwatchColorPickerTooltip,
grids,
highlighterSettings,
onHideBoxModelHighlighter,
onSetGridOverlayColor,
onShowBoxModelHighlighterForNode,
onShowGridOutlineHighlight,
onToggleShowGridAreas,
onToggleGridHighlighter,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
setSelectedNode,
} = this.props;
const highlightedGrids = grids.filter(grid => grid.highlighted);
return (
dom.div({ id: "layout-grid-container" },
dom.div({ className: "grid-content" },
GridList({
getSwatchColorPickerTooltip,
grids,
onHideBoxModelHighlighter,
onSetGridOverlayColor,
onShowBoxModelHighlighterForNode,
onToggleGridHighlighter,
setSelectedNode,
}),
GridDisplaySettings({
highlighterSettings,
onToggleShowGridAreas,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
})
),
highlightedGrids.length === 1 ?
GridOutline({
grids,
onShowGridOutlineHighlight,
})
:
null
)
);
}
render() {
const { client, id } = this.props;
const { workers, processCount } = this.state;
const isE10S = Services.appinfo.browserTabsRemoteAutostart;
const isMultiE10S = isE10S && processCount > 1;
return dom.div(
{
id: id + "-panel",
className: "panel",
role: "tabpanel",
"aria-labelledby": id + "-header",
},
PanelHeader({
id: id + "-header",
name: Strings.GetStringFromName("workers"),
}),
isMultiE10S ? MultiE10SWarning() : "",
dom.div(
{
id: "workers",
className: "inverted-icons",
},
TargetList({
client,
debugDisabled: isMultiE10S,
error: this.renderServiceWorkersError(),
id: "service-workers",
name: Strings.GetStringFromName("serviceWorkers"),
sort: true,
targetClass: ServiceWorkerTarget,
targets: workers.service,
}),
TargetList({
client,
id: "shared-workers",
name: Strings.GetStringFromName("sharedWorkers"),
sort: true,
targetClass: WorkerTarget,
targets: workers.shared,
}),
TargetList({
client,
id: "other-workers",
name: Strings.GetStringFromName("otherWorkers"),
sort: true,
targetClass: WorkerTarget,
targets: workers.other,
})
)
);
}
render() {
if (this.props.hud.isBrowserConsole &&
!Services.prefs.getBoolPref("devtools.chrome.enabled")) {
return null;
}
if (this.props.codeMirrorEnabled) {
return dom.div({
className: "jsterm-input-container devtools-monospace",
key: "jsterm-container",
style: {direction: "ltr"},
"aria-live": "off",
ref: node => {
this.node = node;
},
});
}
const {
onPaste
} = this.props;
return (
dom.div({
className: "jsterm-input-container",
key: "jsterm-container",
style: {direction: "ltr"},
"aria-live": "off",
},
dom.textarea({
className: "jsterm-complete-node devtools-monospace",
key: "complete",
tabIndex: "-1",
ref: node => {
this.completeNode = node;
},
}),
dom.textarea({
className: "jsterm-input-node devtools-monospace",
key: "input",
tabIndex: "0",
rows: "1",
"aria-autocomplete": "list",
ref: node => {
this.inputNode = node;
},
onPaste: onPaste,
onDrop: onPaste,
})
)
);
}
render() {
const { isAddRuleEnabled, isClassPanelExpanded } = this.props;
const { isPseudoClassPanelExpanded } = this.state;
return (
dom.div(
{
id: "ruleview-toolbar-container",
className: "devtools-toolbar",
},
dom.div({ id: "ruleview-toolbar" },
SearchBox({}),
dom.div({ id: "ruleview-command-toolbar" },
dom.button({
id: "ruleview-add-rule-button",
className: "devtools-button",
disabled: !isAddRuleEnabled,
onClick: this.onAddRuleClick,
title: getStr("rule.addRule.tooltip"),
}),
dom.button({
id: "pseudo-class-panel-toggle",
className: "devtools-button" +
(isPseudoClassPanelExpanded ? " checked" : ""),
onClick: this.onPseudoClassPanelToggle,
title: getStr("rule.togglePseudo.tooltip"),
}),
dom.button({
id: "class-panel-toggle",
className: "devtools-button" +
(isClassPanelExpanded ? " checked" : ""),
onClick: this.onClassPanelToggle,
title: getStr("rule.classPanel.toggleClass.tooltip"),
})
)
),
isClassPanelExpanded ?
ClassListPanel({
onAddClass: this.props.onAddClass,
onSetClassState: this.props.onSetClassState,
})
:
null,
isPseudoClassPanelExpanded ?
PseudoClassPanel({
onTogglePseudoClass: this.props.onTogglePseudoClass,
})
:
null
)
);
}
renderWarning() {
return dom.div(
{
id: "font-editor"
},
dom.div(
{
className: "devtools-sidepanel-no-result"
},
getStr("fontinspector.noFontsOnSelectedElement")
)
);
}
renderWarning(warning) {
return dom.div(
{
id: "font-editor",
},
dom.div(
{
className: "devtools-sidepanel-no-result",
},
warning
)
);
}
/**
* Render the heap view's container panel with the given contents inside of
* it.
*
* @param {snapshotState|diffingState|dominatorTreeState} state
* @param {...Any} contents
*/
_renderHeapView(state, ...contents) {
return dom.div(
{
id: "heap-view",
"data-state": state
},
dom.div(
{
className: "heap-view-panel",
"data-state": state,
},
...contents
)
);
}
_renderThreads() {
return details(
{ className: "perf-settings-details" },
summary(
{
className: "perf-settings-summary",
id: "perf-settings-threads-summary",
},
"Threads:"
),
// Contain the overflow of the slide down animation with the first div.
div(
{ className: "perf-settings-details-contents" },
// Provide a second <div> element for the contents of the slide down animation.
div(
{ className: "perf-settings-details-contents-slider" },
div(
{ className: "perf-settings-thread-columns" },
threadColumns.map(this._renderThreadsColumns),
),
div(
{ className: "perf-settings-row" },
label(
{
className: "perf-settings-text-label",
title: "These thread names are a comma separated list that is used to " +
"enable profiling of the threads in the profiler. The name needs to " +
"be only a partial match of the thread name to be included. It " +
"is whitespace sensitive.",
},
div({}, "Add custom threads by name:"),
input({
className: "perf-settings-text-input",
id: "perf-settings-thread-text",
type: "text",
value: this.state.temporaryThreadText === null
? this.props.threads
: this.state.temporaryThreadText,
onBlur: this._handleThreadTextCleanup,
onFocus: this._setThreadTextFromInput,
onChange: this._setThreadTextFromInput,
})
)
)
)
)
);
}
render() {
return dom.div(
{
ref: "browserContainer",
className: "browser-container",
/**
* React uses a whitelist for attributes, so we need some way to set
* attributes it does not know about, such as @mozbrowser. If this were
* the only issue, we could use componentDidMount or ref: node => {} to
* set the atttibutes. In the case of @remote and @remoteType, the
* attribute must be set before the element is added to the DOM to have
* any effect, which we are able to do with this approach.
*
* @noisolation and @allowfullscreen are needed so that these frames
* have the same access to browser features as regular browser tabs.
* The `swapFrameLoaders` platform API we use compares such features
* before allowing the swap to proceed.
*/
dangerouslySetInnerHTML: {
__html: `<iframe class="browser" mozbrowser="true"
remote="true" remoteType="web"
noisolation="true" allowfullscreen="true"
src="about:blank" width="100%" height="100%">
</iframe>`
}
}
);
}
render() {
return (
dom.div({className: "toolbar"},
this.props.children
)
);
}