this.props.networkLocations.map(location =>
dom.li(
{
className: "network-location js-network-location",
key: location,
},
dom.span(
{
className: "ellipsis-text js-network-location-value",
},
location
),
Localized(
{
id: "about-debugging-network-locations-remove-button",
},
dom.button(
{
className: "default-button js-network-location-remove-button",
onClick: () => {
this.props.dispatch(Actions.removeNetworkLocation(location));
},
},
"Remove",
),
)
)
renderBaseSizeSection({ mainBaseSize, clampState }, properties, dimension) {
const flexBasisValue = properties["flex-basis"];
const dimensionValue = properties[dimension];
let property = null;
let reason = null;
if (flexBasisValue) {
// If flex-basis is defined, then that's what is used for the base size.
property = this.renderCssProperty("flex-basis", flexBasisValue);
} else if (dimensionValue) {
// If not and width/height is defined, then that's what defines the base size.
property = this.renderCssProperty(dimension, dimensionValue);
} else {
// Finally, if nothing is set, then the base size is the max-content size.
reason = this.renderReasons(
[getStr("flexbox.itemSizing.itemBaseSizeFromContent")]);
}
const className = "section base";
return (
dom.li({ className: className + (property ? "" : " no-property") },
dom.span({ className: "name" },
getStr("flexbox.itemSizing.baseSizeSectionHeader")
),
dom.span({ className: "value theme-fg-color1" },
this.getRoundedDimension(mainBaseSize)
),
property,
reason
)
);
}
render() {
const {
font,
onPreviewClick,
onToggleFontHighlight,
} = this.props;
const {
CSSFamilyName,
previewUrl,
rule,
ruleText,
} = font;
return dom.li(
{
className: "font",
},
dom.div(
{},
this.renderFontFamilyName(CSSFamilyName),
FontName({ font, onToggleFontHighlight })
),
FontOrigin({ font }),
FontPreview({ onPreviewClick, previewUrl }),
this.renderFontCSSCode(rule, ruleText)
);
}
render() {
let {
font,
fontOptions,
onPreviewFonts,
onToggleFontHighlight,
} = this.props;
let { previewText } = fontOptions;
let {
previewUrl,
rule,
ruleText,
} = font;
return dom.li(
{
className: "font",
},
FontMeta({ font, onToggleFontHighlight }),
FontPreview({ previewText, previewUrl, onPreviewFonts }),
this.renderFontCSSCode(rule, ruleText)
);
}
render() {
const { connectComponent, icon, isSelected, name, selectable } = this.props;
return dom.li(
{
className: "sidebar-item js-sidebar-item" +
(isSelected ?
" sidebar-item--selected js-sidebar-item-selected" :
""
) +
(selectable ? " sidebar-item--selectable" : ""),
onClick: selectable ? () => this.onItemClick() : null
},
dom.img({
className: "sidebar-item__icon",
src: icon,
}),
dom.span(
{
className: "ellipsis-text",
title: name,
},
name),
connectComponent ? connectComponent : null
);
}
function warningMessages(target) {
let messages = [];
if (target.addonTargetFront.isLegacyTemporaryExtension()) {
messages.push(dom.li(
{
className: "addon-target-warning-message addon-target-message",
},
Strings.GetStringFromName("legacyExtensionWarning"),
" ",
dom.a(
{
href: LEGACY_WARNING_URL,
target: "_blank",
},
Strings.GetStringFromName("legacyExtensionWarning.learnMore"))
));
}
const warnings = target.warnings || [];
messages = messages.concat(warnings.map((warning) => {
return dom.li(
{ className: "addon-target-warning-message addon-target-message" },
warning);
}));
return messages;
}
render() {
return dom.li(
{
className: "animated-property-item"
}
);
}
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"
)
)
)
);
}
fonts.map(font => {
return dom.li(
{},
FontMeta({
font,
key: font.name,
onToggleFontHighlight: this.props.onToggleFontHighlight
})
);
})
renderFinalSizeSection({ mainFinalSize }) {
return (
dom.li({ className: "section final no-property" },
dom.span({ className: "name" },
getStr("flexbox.itemSizing.finalSizeSectionHeader")
),
dom.span({ className: "value theme-fg-color1" },
this.getRoundedDimension(mainFinalSize)
)
)
);
}
render() {
const {
grid,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
} = this.props;
const { nodeFront } = grid;
return dom.li(
{},
dom.label(
{},
dom.input(
{
checked: grid.highlighted,
type: "checkbox",
value: grid.id,
onChange: this.onGridCheckboxClick,
}
),
Rep(
{
defaultRep: ElementNode,
mode: MODE.TINY,
object: translateNodeFrontToGrip(nodeFront),
onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
onInspectIconClick: () => this.onGridInspectIconClick(nodeFront),
}
)
),
dom.div(
{
className: "grid-color-swatch",
style: {
backgroundColor: grid.color,
},
title: grid.color,
}
),
// The SwatchColorPicker relies on the nextSibling of the swatch element to apply
// the selected color. This is why we use a span in display: none for now.
// Ideally we should modify the SwatchColorPickerTooltip to bypass this requirement.
// See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578
dom.span(
{
className: "grid-color-value"
},
grid.color
)
);
}
...this.props.steps.map(step =>
Localized(
{
id: step.localizationId,
},
dom.li(
{
className: "connect-page__step",
key: step.localizationId,
},
step.localizationId
)
)
function infoMessages(target) {
const messages = [];
if (isTemporaryID(target.addonID)) {
messages.push(dom.li(
{ className: "addon-target-info-message addon-target-message" },
Strings.GetStringFromName("temporaryID"),
" ",
dom.a({ href: TEMP_ID_URL, className: "temporary-id-url", target: "_blank" },
Strings.GetStringFromName("temporaryID.learnMore")
)));
}
return messages;
}
.map((tab, index) => {
const {
id,
className: tabClassName,
title,
badge,
showBadge,
} = tab.props;
const ref = "tab-menu-" + index;
const isTabSelected = this.state.tabActive === index;
const className = [
"tabs-menu-item",
tabClassName,
isTabSelected ? "is-active" : "",
].join(" ");
// Set tabindex to -1 (except the selected tab) so, it's focusable,
// but not reachable via sequential tab-key navigation.
// Changing selected tab (and so, moving focus) is done through
// left and right arrow keys.
// See also `onKeyDown()` event handler.
return (
dom.li({
className,
key: index,
ref,
role: "presentation",
},
dom.span({className: "devtools-tab-line"}),
dom.a({
id: id ? id + "-tab" : "tab-" + index,
tabIndex: isTabSelected ? 0 : -1,
title,
"aria-controls": id ? id + "-panel" : "panel-" + index,
"aria-selected": isTabSelected,
role: "tab",
onClick: this.onClickTab.bind(this, index),
},
title,
badge && !isTabSelected && showBadge() ?
dom.span({ className: "tab-badge" }, badge)
:
null
)
)
);
});
list.map((item, i) => {
let isSelected = this.state.selectedIndex == i;
let itemClassList = ["autocomplete-item"];
if (isSelected) {
itemClassList.push("autocomplete-selected");
}
return dom.li({
key: i,
"data-index": i,
"data-value": item.value,
className: itemClassList.join(" "),
ref: isSelected ? "selected" : null,
onMouseDown: this.onMouseDown,
}, item.displayValue);
})
render() {
const { className, isSelected, to } = this.props;
return dom.li(
{
className: "sidebar-item js-sidebar-item" +
(className ? ` ${className}` : "") +
(isSelected ?
" sidebar-item--selected js-sidebar-item-selected" :
""
) +
(to ? " sidebar-item--selectable" : ""),
},
this.renderContent()
);
}
render() {
const {
animation,
emitEventForTest,
getAnimatedPropertyMap,
getNodeFromActor,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
selectAnimation,
setHighlightedNode,
setSelectedNode,
simulateAnimation,
timeScale,
} = this.props;
const {
isSelected,
} = this.state;
return dom.li(
{
className: `animation-item ${ animation.state.type } ` +
(isSelected ? "selected" : ""),
},
AnimationTarget(
{
animation,
emitEventForTest,
getNodeFromActor,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
setHighlightedNode,
setSelectedNode,
}
),
SummaryGraph(
{
animation,
emitEventForTest,
getAnimatedPropertyMap,
selectAnimation,
simulateAnimation,
timeScale,
}
)
);
}
...this.props.steps.map(step =>
Localized(
{
id: step.localizationId,
a: step.url ? dom.a({
href: step.url,
target: "_blank",
}) : null,
},
dom.li(
{
className: "connect-page__step",
key: step,
},
step
)
)
renderContainer(item, i) {
const { buttons, className, component, componentProps, labelledby, header } = item;
const opened = this.state.opened[i];
return (
li(
{
className,
"aria-labelledby": labelledby,
key: labelledby,
},
h2(
{
className: "accordion-header",
id: labelledby,
tabIndex: 0,
"aria-expanded": opened,
onKeyDown: e => this.onHandleHeaderKeyDown(e, i),
onClick: () => this.handleHeaderClick(i),
},
div(
{
className: `arrow theme-twisty${opened ? " open" : ""}`,
role: "presentation",
}
),
header,
buttons && div(
{
className: "header-buttons",
role: "presentation",
},
buttons
),
),
opened && div(
{
className: "accordion-content",
role: "presentation",
},
cloneElement(component, componentProps || {})
)
)
);
}
overriddenComputedProperties.map(({ name, value }) => {
return (
dom.li(
{
key: `${name}${value}`,
className: "ruleview-overridden-item ruleview-overridden",
},
dom.span({ className: "ruleview-namecontainer" },
dom.span({ className: "ruleview-propertyname theme-fg-color3" }, name),
": "
),
dom.span({ className: "ruleview-propertyvaluecontainer" },
dom.span({ className: "ruleview-propertyvalue theme-fg-color1" }, value),
";"
)
)
);
})
render() {
const { target, debugDisabled } = this.props;
return dom.li(
{ className: "card addon-target-container", "data-addon-id": target.addonID },
dom.div({ className: "target-card-heading target" },
dom.img({
className: "target-icon addon-target-icon",
role: "presentation",
src: target.icon,
}),
dom.span(
{ className: "target-name addon-target-name", title: target.name },
target.name)
),
showMessages(target),
dom.dl(
{ className: "addon-target-info" },
...filePathForTarget(target),
...addonIDforTarget(target),
...internalIDForTarget(target),
),
dom.div({className: "target-card-actions"},
dom.button({
className: "target-card-action-link debug-button addon-target-button",
onClick: this.debug,
disabled: debugDisabled,
}, Strings.GetStringFromName("debug")),
target.temporarilyInstalled
? dom.button({
className: "target-card-action-link reload-button addon-target-button",
onClick: this.reload,
}, Strings.GetStringFromName("reload"))
: null,
target.temporarilyInstalled
? dom.button({
className: "target-card-action-link uninstall-button addon-target-button",
onClick: this.uninstall,
}, Strings.GetStringFromName("remove"))
: null,
),
);
}
render() {
const { nodeFront } = this.props.flexItem;
return (
dom.li({},
dom.button(
{
className: "devtools-button devtools-monospace",
onClick: () => this.props.setSelectedNode(nodeFront),
},
Rep({
defaultRep: Rep.ElementNode,
mode: MODE.TINY,
object: translateNodeFrontToGrip(nodeFront),
})
)
)
);
}
renderMaximumSizeSection({ clampState, mainMaxSize }, properties, dimension) {
if (clampState !== "clamped_to_max") {
return null;
}
const maxDimensionValue = properties[`max-${dimension}`];
return (
dom.li({ className: "section max" },
dom.span({ className: "name" },
getStr("flexbox.itemSizing.maxSizeSectionHeader")
),
dom.span({ className: "value theme-fg-color1" },
this.getRoundedDimension(mainMaxSize)
),
this.renderCssProperty(`max-${dimension}`, maxDimensionValue)
)
);
}
this.props.declaration.computedProperties.map(({ name, value, isOverridden }) => {
return (
dom.li(
{
key: `${name}${value}`,
className: "ruleview-computed" +
(isOverridden ? " ruleview-overridden" : ""),
},
dom.span({ className: "ruleview-namecontainer" },
dom.span({ className: "ruleview-propertyname theme-fg-color3" }, name),
": "
),
dom.span({ className: "ruleview-propertyvaluecontainer" },
dom.span({ className: "ruleview-propertyvalue theme-fg-color1" }, value),
";"
)
)
);
})
render() {
const { target, debugDisabled } = this.props;
return dom.li({ className: "target-container" },
dom.img({
className: "target-icon",
role: "presentation",
src: target.icon
}),
dom.div({ className: "target" },
dom.div({ className: "target-name", title: target.name }, target.name)
),
dom.button({
className: "debug-button",
onClick: this.debug,
disabled: debugDisabled
}, Strings.GetStringFromName("debug"))
);
}
renderMinimumSizeSection({ clampState, mainMinSize }, properties, dimension) {
// We only display the minimum size when the item actually violates that size during
// layout & is clamped.
if (clampState !== "clamped_to_min") {
return null;
}
const minDimensionValue = properties[`min-${dimension}`];
return (
dom.li({ className: "section min" },
dom.span({ className: "name" },
getStr("flexbox.itemSizing.minSizeSectionHeader")
),
dom.span({ className: "value theme-fg-color1" },
this.getRoundedDimension(mainMinSize)
),
this.renderCssProperty(`min-${dimension}`, minDimensionValue)
)
);
}
render() {
const {
flexbox,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
} = this.props;
const {
actorID,
highlighted,
nodeFront,
} = flexbox;
return dom.li(
{},
dom.label(
{},
dom.input(
{
type: "checkbox",
value: actorID,
checked: highlighted,
onChange: this.onFlexboxCheckboxClick,
}
),
Rep(
{
defaultRep: ElementNode,
mode: MODE.TINY,
object: translateNodeFrontToGrip(nodeFront),
onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
onInspectIconClick: () => this.onFlexboxInspectIconClick(nodeFront),
}
)
)
);
}
messages = messages.concat(warnings.map((warning) => {
return dom.li(
{ className: "addon-target-warning-message addon-target-message" },
warning);
}));
sentences.map(sentence => dom.li({}, sentence))
renderFlexibilitySection(flexItemSizing, properties, computedStyle) {
const {
mainDeltaSize,
mainBaseSize,
mainFinalSize,
lineGrowthState,
clampState,
} = flexItemSizing;
// Don't display anything if all interesting sizes are 0.
if (!mainFinalSize && !mainBaseSize && !mainDeltaSize) {
return null;
}
// Also don't display anything if the item did not grow or shrink.
const grew = mainDeltaSize > 0;
const shrank = mainDeltaSize < 0;
if (!grew && !shrank) {
return null;
}
const definedFlexGrow = properties["flex-grow"];
const computedFlexGrow = computedStyle.flexGrow;
const definedFlexShrink = properties["flex-shrink"];
const computedFlexShrink = computedStyle.flexShrink;
const wasClamped = clampState !== "unclamped";
const reasons = [];
// Tell users whether the item was set to grow or shrink.
if (computedFlexGrow && lineGrowthState === "growing") {
reasons.push(getStr("flexbox.itemSizing.setToGrow"));
}
if (computedFlexShrink && lineGrowthState === "shrinking") {
reasons.push(getStr("flexbox.itemSizing.setToShrink"));
}
if (!computedFlexGrow && !grew && !shrank && lineGrowthState === "growing") {
reasons.push(getStr("flexbox.itemSizing.notSetToGrow"));
}
if (!computedFlexShrink && !grew && !shrank && lineGrowthState === "shrinking") {
reasons.push(getStr("flexbox.itemSizing.notSetToShrink"));
}
let property = null;
if (grew) {
// If the item grew.
if (definedFlexGrow) {
// It's normally because it was set to grow (flex-grow is non 0).
property = this.renderCssProperty("flex-grow", definedFlexGrow);
}
if (wasClamped && clampState === "clamped_to_max") {
// It may have wanted to grow more than it did, because it was later max-clamped.
reasons.push(getStr("flexbox.itemSizing.growthAttemptButMaxClamped"));
} else if (wasClamped && clampState === "clamped_to_min") {
// Or it may have wanted to grow less, but was later min-clamped to a larger size.
reasons.push(getStr("flexbox.itemSizing.growthAttemptButMinClamped"));
}
} else if (shrank) {
// If the item shrank.
if (definedFlexShrink && computedFlexShrink) {
// It's either because flex-shrink is non 0.
property = this.renderCssProperty("flex-shrink", definedFlexShrink);
} else if (computedFlexShrink) {
// Or also because it's default value is 1 anyway.
property = this.renderCssProperty("flex-shrink", computedFlexShrink, true);
}
if (wasClamped) {
// It might have wanted to shrink more (to accomodate all items) but couldn't
// because it was later min-clamped.
reasons.push(getStr("flexbox.itemSizing.shrinkAttemptWhenClamped"));
}
}
// Don't display the section at all if there's nothing useful to show users.
if (!property && !reasons.length) {
return null;
}
const className = "section flexibility";
return (
dom.li({ className: className + (property ? "" : " no-property") },
dom.span({ className: "name" },
getStr("flexbox.itemSizing.flexibilitySectionHeader")
),
dom.span({ className: "value theme-fg-color1" },
this.getFlexibilityValueString(grew, mainDeltaSize)
),
property,
this.renderReasons(reasons)
)
);
}