зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1828573 - [devtools] Convert the rest of the Secondary panel components from jsx r=devtools-reviewers,nchevobbe
Depends on D184936 Differential Revision: https://phabricator.services.mozilla.com/D184937
This commit is contained in:
Hubert Boma Manilla
Родитель
e6f4175cac
Коммит
bcc0991871
|
|
@ -3,6 +3,7 @@
|
|||
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { div, button } from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import { connect } from "../../utils/connect";
|
||||
|
|
@ -202,56 +203,50 @@ class CommandBar extends Component {
|
|||
// Display a button which:
|
||||
// - on left click, would toggle on/off javascript tracing
|
||||
// - on right click, would display a context menu allowing to choose the logging output (console or stdout)
|
||||
return (
|
||||
<button
|
||||
className={`devtools-button command-bar-button debugger-trace-menu-button ${
|
||||
this.props.isTracingEnabled ? "active" : ""
|
||||
}`}
|
||||
title={
|
||||
this.props.isTracingEnabled
|
||||
? L10N.getFormatStr("stopTraceButtonTooltip2", formatKey("trace"))
|
||||
: L10N.getFormatStr(
|
||||
"startTraceButtonTooltip2",
|
||||
formatKey("trace"),
|
||||
this.props.logMethod
|
||||
)
|
||||
return button({
|
||||
className: `devtools-button command-bar-button debugger-trace-menu-button ${
|
||||
this.props.isTracingEnabled ? "active" : ""
|
||||
}`,
|
||||
title: this.props.isTracingEnabled
|
||||
? L10N.getFormatStr("stopTraceButtonTooltip2", formatKey("trace"))
|
||||
: L10N.getFormatStr(
|
||||
"startTraceButtonTooltip2",
|
||||
formatKey("trace"),
|
||||
this.props.logMethod
|
||||
),
|
||||
onClick: event => {
|
||||
this.props.toggleTracing(this.props.logMethod);
|
||||
},
|
||||
onContextMenu: event => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Avoid showing the menu to avoid having to support changing tracing config "live"
|
||||
if (this.props.isTracingEnabled) {
|
||||
return;
|
||||
}
|
||||
onClick={event => {
|
||||
this.props.toggleTracing(this.props.logMethod);
|
||||
}}
|
||||
onContextMenu={event => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Avoid showing the menu to avoid having to support changing tracing config "live"
|
||||
if (this.props.isTracingEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: "debugger-trace-menu-item-console",
|
||||
label: L10N.getStr("traceInWebConsole"),
|
||||
checked: this.props.logMethod == LOG_METHODS.CONSOLE,
|
||||
click: () => {
|
||||
this.props.setJavascriptTracingLogMethod(LOG_METHODS.CONSOLE);
|
||||
},
|
||||
const items = [
|
||||
{
|
||||
id: "debugger-trace-menu-item-console",
|
||||
label: L10N.getStr("traceInWebConsole"),
|
||||
checked: this.props.logMethod == LOG_METHODS.CONSOLE,
|
||||
click: () => {
|
||||
this.props.setJavascriptTracingLogMethod(LOG_METHODS.CONSOLE);
|
||||
},
|
||||
{
|
||||
id: "debugger-trace-menu-item-stdout",
|
||||
label: L10N.getStr("traceInStdout"),
|
||||
checked: this.props.logMethod == LOG_METHODS.STDOUT,
|
||||
click: () => {
|
||||
this.props.setJavascriptTracingLogMethod(LOG_METHODS.STDOUT);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "debugger-trace-menu-item-stdout",
|
||||
label: L10N.getStr("traceInStdout"),
|
||||
checked: this.props.logMethod == LOG_METHODS.STDOUT,
|
||||
click: () => {
|
||||
this.props.setJavascriptTracingLogMethod(LOG_METHODS.STDOUT);
|
||||
},
|
||||
];
|
||||
showMenu(event, items);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
];
|
||||
showMenu(event, items);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
renderPauseButton() {
|
||||
const { breakOnNext, isWaitingOnBreak } = this.props;
|
||||
|
||||
|
|
@ -284,123 +279,120 @@ class CommandBar extends Component {
|
|||
|
||||
renderSkipPausingButton() {
|
||||
const { skipPausing, toggleSkipPausing } = this.props;
|
||||
|
||||
return (
|
||||
<button
|
||||
className={classnames(
|
||||
return button(
|
||||
{
|
||||
className: classnames(
|
||||
"command-bar-button",
|
||||
"command-bar-skip-pausing",
|
||||
{
|
||||
active: skipPausing,
|
||||
}
|
||||
)}
|
||||
title={
|
||||
skipPausing
|
||||
? L10N.getStr("undoSkipPausingTooltip.label")
|
||||
: L10N.getStr("skipPausingTooltip.label")
|
||||
}
|
||||
onClick={toggleSkipPausing}
|
||||
>
|
||||
<AccessibleImage
|
||||
className={skipPausing ? "enable-pausing" : "disable-pausing"}
|
||||
/>
|
||||
</button>
|
||||
),
|
||||
title: skipPausing
|
||||
? L10N.getStr("undoSkipPausingTooltip.label")
|
||||
: L10N.getStr("skipPausingTooltip.label"),
|
||||
onClick: toggleSkipPausing,
|
||||
},
|
||||
React.createElement(AccessibleImage, {
|
||||
className: skipPausing ? "enable-pausing" : "disable-pausing",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
renderSettingsButton() {
|
||||
const { toolboxDoc } = this.context;
|
||||
|
||||
return (
|
||||
<MenuButton
|
||||
menuId="debugger-settings-menu-button"
|
||||
toolboxDoc={toolboxDoc}
|
||||
className="devtools-button command-bar-button debugger-settings-menu-button"
|
||||
title={L10N.getStr("settings.button.label")}
|
||||
>
|
||||
{() => this.renderSettingsMenuItems()}
|
||||
</MenuButton>
|
||||
return React.createElement(
|
||||
MenuButton,
|
||||
{
|
||||
menuId: "debugger-settings-menu-button",
|
||||
toolboxDoc: toolboxDoc,
|
||||
className:
|
||||
"devtools-button command-bar-button debugger-settings-menu-button",
|
||||
title: L10N.getStr("settings.button.label"),
|
||||
},
|
||||
() => this.renderSettingsMenuItems()
|
||||
);
|
||||
}
|
||||
|
||||
renderSettingsMenuItems() {
|
||||
return (
|
||||
<MenuList id="debugger-settings-menu-list">
|
||||
<MenuItem
|
||||
key="debugger-settings-menu-item-disable-javascript"
|
||||
className="menu-item debugger-settings-menu-item-disable-javascript"
|
||||
checked={!this.props.javascriptEnabled}
|
||||
label={L10N.getStr("settings.disableJavaScript.label")}
|
||||
tooltip={L10N.getStr("settings.disableJavaScript.tooltip")}
|
||||
onClick={() => {
|
||||
this.props.toggleJavaScriptEnabled(!this.props.javascriptEnabled);
|
||||
}}
|
||||
/>
|
||||
<MenuItem
|
||||
key="debugger-settings-menu-item-disable-inline-previews"
|
||||
checked={features.inlinePreview}
|
||||
label={L10N.getStr("inlinePreview.toggle.label")}
|
||||
tooltip={L10N.getStr("inlinePreview.toggle.tooltip")}
|
||||
onClick={() =>
|
||||
this.props.toggleInlinePreview(!features.inlinePreview)
|
||||
}
|
||||
/>
|
||||
<MenuItem
|
||||
key="debugger-settings-menu-item-disable-wrap-lines"
|
||||
checked={prefs.editorWrapping}
|
||||
label={L10N.getStr("editorWrapping.toggle.label")}
|
||||
tooltip={L10N.getStr("editorWrapping.toggle.tooltip")}
|
||||
onClick={() => this.props.toggleEditorWrapping(!prefs.editorWrapping)}
|
||||
/>
|
||||
<MenuItem
|
||||
key="debugger-settings-menu-item-disable-sourcemaps"
|
||||
checked={prefs.clientSourceMapsEnabled}
|
||||
label={L10N.getStr("settings.toggleSourceMaps.label")}
|
||||
tooltip={L10N.getStr("settings.toggleSourceMaps.tooltip")}
|
||||
onClick={() =>
|
||||
this.props.toggleSourceMapsEnabled(!prefs.clientSourceMapsEnabled)
|
||||
}
|
||||
/>
|
||||
<MenuItem
|
||||
key="debugger-settings-menu-item-hide-ignored-sources"
|
||||
className="menu-item debugger-settings-menu-item-hide-ignored-sources"
|
||||
checked={prefs.hideIgnoredSources}
|
||||
label={L10N.getStr("settings.hideIgnoredSources.label")}
|
||||
tooltip={L10N.getStr("settings.hideIgnoredSources.tooltip")}
|
||||
onClick={() =>
|
||||
this.props.setHideOrShowIgnoredSources(!prefs.hideIgnoredSources)
|
||||
}
|
||||
/>
|
||||
<MenuItem
|
||||
key="debugger-settings-menu-item-enable-sourcemap-ignore-list"
|
||||
className="menu-item debugger-settings-menu-item-enable-sourcemap-ignore-list"
|
||||
checked={prefs.sourceMapIgnoreListEnabled}
|
||||
label={L10N.getStr("settings.enableSourceMapIgnoreList.label")}
|
||||
tooltip={L10N.getStr("settings.enableSourceMapIgnoreList.tooltip")}
|
||||
onClick={() =>
|
||||
this.props.toggleSourceMapIgnoreList(
|
||||
!prefs.sourceMapIgnoreListEnabled
|
||||
)
|
||||
}
|
||||
/>
|
||||
</MenuList>
|
||||
return React.createElement(
|
||||
MenuList,
|
||||
{
|
||||
id: "debugger-settings-menu-list",
|
||||
},
|
||||
React.createElement(MenuItem, {
|
||||
key: "debugger-settings-menu-item-disable-javascript",
|
||||
className: "menu-item debugger-settings-menu-item-disable-javascript",
|
||||
checked: !this.props.javascriptEnabled,
|
||||
label: L10N.getStr("settings.disableJavaScript.label"),
|
||||
tooltip: L10N.getStr("settings.disableJavaScript.tooltip"),
|
||||
onClick: () => {
|
||||
this.props.toggleJavaScriptEnabled(!this.props.javascriptEnabled);
|
||||
},
|
||||
}),
|
||||
React.createElement(MenuItem, {
|
||||
key: "debugger-settings-menu-item-disable-inline-previews",
|
||||
checked: features.inlinePreview,
|
||||
label: L10N.getStr("inlinePreview.toggle.label"),
|
||||
tooltip: L10N.getStr("inlinePreview.toggle.tooltip"),
|
||||
onClick: () => this.props.toggleInlinePreview(!features.inlinePreview),
|
||||
}),
|
||||
React.createElement(MenuItem, {
|
||||
key: "debugger-settings-menu-item-disable-wrap-lines",
|
||||
checked: prefs.editorWrapping,
|
||||
label: L10N.getStr("editorWrapping.toggle.label"),
|
||||
tooltip: L10N.getStr("editorWrapping.toggle.tooltip"),
|
||||
onClick: () => this.props.toggleEditorWrapping(!prefs.editorWrapping),
|
||||
}),
|
||||
React.createElement(MenuItem, {
|
||||
key: "debugger-settings-menu-item-disable-sourcemaps",
|
||||
checked: prefs.clientSourceMapsEnabled,
|
||||
label: L10N.getStr("settings.toggleSourceMaps.label"),
|
||||
tooltip: L10N.getStr("settings.toggleSourceMaps.tooltip"),
|
||||
onClick: () =>
|
||||
this.props.toggleSourceMapsEnabled(!prefs.clientSourceMapsEnabled),
|
||||
}),
|
||||
React.createElement(MenuItem, {
|
||||
key: "debugger-settings-menu-item-hide-ignored-sources",
|
||||
className: "menu-item debugger-settings-menu-item-hide-ignored-sources",
|
||||
checked: prefs.hideIgnoredSources,
|
||||
label: L10N.getStr("settings.hideIgnoredSources.label"),
|
||||
tooltip: L10N.getStr("settings.hideIgnoredSources.tooltip"),
|
||||
onClick: () =>
|
||||
this.props.setHideOrShowIgnoredSources(!prefs.hideIgnoredSources),
|
||||
}),
|
||||
React.createElement(MenuItem, {
|
||||
key: "debugger-settings-menu-item-enable-sourcemap-ignore-list",
|
||||
className:
|
||||
"menu-item debugger-settings-menu-item-enable-sourcemap-ignore-list",
|
||||
checked: prefs.sourceMapIgnoreListEnabled,
|
||||
label: L10N.getStr("settings.enableSourceMapIgnoreList.label"),
|
||||
tooltip: L10N.getStr("settings.enableSourceMapIgnoreList.tooltip"),
|
||||
onClick: () =>
|
||||
this.props.toggleSourceMapIgnoreList(
|
||||
!prefs.sourceMapIgnoreListEnabled
|
||||
),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className={classnames("command-bar", {
|
||||
return div(
|
||||
{
|
||||
className: classnames("command-bar", {
|
||||
vertical: !this.props.horizontal,
|
||||
})}
|
||||
>
|
||||
{this.renderStepButtons()}
|
||||
<div className="filler" />
|
||||
{this.renderTraceButton()}
|
||||
{this.renderSkipPausingButton()}
|
||||
<div className="devtools-separator" />
|
||||
{this.renderSettingsButton()}
|
||||
</div>
|
||||
}),
|
||||
},
|
||||
this.renderStepButtons(),
|
||||
div({
|
||||
className: "filler",
|
||||
}),
|
||||
this.renderTraceButton(),
|
||||
this.renderSkipPausingButton(),
|
||||
div({
|
||||
className: "devtools-separator",
|
||||
}),
|
||||
this.renderSettingsButton()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { div, input, li, ul } from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import Reps from "devtools/client/shared/components/reps/index";
|
||||
|
|
@ -64,32 +65,42 @@ class DOMMutationBreakpointsContents extends Component {
|
|||
} = this.props;
|
||||
const { enabled, id: breakpointId, nodeFront, mutationType } = breakpoint;
|
||||
|
||||
return (
|
||||
<li key={breakpoint.id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={enabled}
|
||||
onChange={() => this.handleBreakpoint(breakpointId, !enabled)}
|
||||
/>
|
||||
<div className="dom-mutation-info">
|
||||
<div className="dom-mutation-label">
|
||||
{Rep({
|
||||
object: translateNodeFrontToGrip(nodeFront),
|
||||
mode: MODE.TINY,
|
||||
onDOMNodeClick: () => openElementInInspector(nodeFront),
|
||||
onInspectIconClick: () => openElementInInspector(nodeFront),
|
||||
onDOMNodeMouseOver: () => highlightDomElement(nodeFront),
|
||||
onDOMNodeMouseOut: () => unHighlightDomElement(),
|
||||
})}
|
||||
</div>
|
||||
<div className="dom-mutation-type">
|
||||
{localizationTerms[mutationType] || mutationType}
|
||||
</div>
|
||||
</div>
|
||||
<CloseButton
|
||||
handleClick={() => deleteBreakpoint(nodeFront, mutationType)}
|
||||
/>
|
||||
</li>
|
||||
return li(
|
||||
{
|
||||
key: breakpoint.id,
|
||||
},
|
||||
input({
|
||||
type: "checkbox",
|
||||
checked: enabled,
|
||||
onChange: () => this.handleBreakpoint(breakpointId, !enabled),
|
||||
}),
|
||||
div(
|
||||
{
|
||||
className: "dom-mutation-info",
|
||||
},
|
||||
div(
|
||||
{
|
||||
className: "dom-mutation-label",
|
||||
},
|
||||
Rep({
|
||||
object: translateNodeFrontToGrip(nodeFront),
|
||||
mode: MODE.TINY,
|
||||
onDOMNodeClick: () => openElementInInspector(nodeFront),
|
||||
onInspectIconClick: () => openElementInInspector(nodeFront),
|
||||
onDOMNodeMouseOver: () => highlightDomElement(nodeFront),
|
||||
onDOMNodeMouseOut: () => unHighlightDomElement(),
|
||||
})
|
||||
),
|
||||
div(
|
||||
{
|
||||
className: "dom-mutation-type",
|
||||
},
|
||||
localizationTerms[mutationType] || mutationType
|
||||
)
|
||||
),
|
||||
React.createElement(CloseButton, {
|
||||
handleClick: () => deleteBreakpoint(nodeFront, mutationType),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -100,14 +111,16 @@ class DOMMutationBreakpointsContents extends Component {
|
|||
"noDomMutationBreakpoints",
|
||||
`<a>${L10N.getStr("inspectorTool")}</a>`
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="dom-mutation-empty">
|
||||
<div
|
||||
onClick={() => openInspector()}
|
||||
dangerouslySetInnerHTML={{ __html: text }}
|
||||
/>
|
||||
</div>
|
||||
return div(
|
||||
{
|
||||
className: "dom-mutation-empty",
|
||||
},
|
||||
div({
|
||||
onClick: () => openInspector(),
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: text,
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -117,11 +130,11 @@ class DOMMutationBreakpointsContents extends Component {
|
|||
if (breakpoints.length === 0) {
|
||||
return this.renderEmpty();
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="dom-mutation-list">
|
||||
{breakpoints.map(breakpoint => this.renderItem(breakpoint))}
|
||||
</ul>
|
||||
return ul(
|
||||
{
|
||||
className: "dom-mutation-list",
|
||||
},
|
||||
breakpoints.map(breakpoint => this.renderItem(breakpoint))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -152,15 +165,13 @@ class DomMutationBreakpoints extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<DOMMutationBreakpointsPanel
|
||||
openElementInInspector={this.props.openElementInInspector}
|
||||
highlightDomElement={this.props.highlightDomElement}
|
||||
unHighlightDomElement={this.props.unHighlightDomElement}
|
||||
setSkipPausing={this.props.setSkipPausing}
|
||||
openInspector={this.props.openInspector}
|
||||
/>
|
||||
);
|
||||
return React.createElement(DOMMutationBreakpointsPanel, {
|
||||
openElementInInspector: this.props.openElementInInspector,
|
||||
highlightDomElement: this.props.highlightDomElement,
|
||||
unHighlightDomElement: this.props.unHighlightDomElement,
|
||||
setSkipPausing: this.props.setSkipPausing,
|
||||
openInspector: this.props.openInspector,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,16 @@
|
|||
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
div,
|
||||
input,
|
||||
li,
|
||||
ul,
|
||||
span,
|
||||
button,
|
||||
form,
|
||||
label,
|
||||
} from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import { connect } from "../../utils/connect";
|
||||
|
|
@ -119,19 +129,22 @@ class EventListeners extends Component {
|
|||
renderSearchInput() {
|
||||
const { focused, searchText } = this.state;
|
||||
const placeholder = L10N.getStr("eventListenersHeader1.placeholder");
|
||||
|
||||
return (
|
||||
<form className="event-search-form" onSubmit={e => e.preventDefault()}>
|
||||
<input
|
||||
className={classnames("event-search-input", { focused })}
|
||||
placeholder={placeholder}
|
||||
value={searchText}
|
||||
onChange={this.onInputChange}
|
||||
onKeyDown={this.onKeyDown}
|
||||
onFocus={this.onFocus}
|
||||
onBlur={this.onBlur}
|
||||
/>
|
||||
</form>
|
||||
return form(
|
||||
{
|
||||
className: "event-search-form",
|
||||
onSubmit: e => e.preventDefault(),
|
||||
},
|
||||
input({
|
||||
className: classnames("event-search-input", {
|
||||
focused,
|
||||
}),
|
||||
placeholder: placeholder,
|
||||
value: searchText,
|
||||
onChange: this.onInputChange,
|
||||
onKeyDown: this.onKeyDown,
|
||||
onFocus: this.onFocus,
|
||||
onBlur: this.onBlur,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -141,43 +154,45 @@ class EventListeners extends Component {
|
|||
if (!searchText) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => this.setState({ searchText: "" })}
|
||||
className="devtools-searchinput-clear"
|
||||
/>
|
||||
);
|
||||
return button({
|
||||
onClick: () =>
|
||||
this.setState({
|
||||
searchText: "",
|
||||
}),
|
||||
className: "devtools-searchinput-clear",
|
||||
});
|
||||
}
|
||||
|
||||
renderCategoriesList() {
|
||||
const { categories } = this.props;
|
||||
|
||||
return (
|
||||
<ul className="event-listeners-list">
|
||||
{categories.map((category, index) => {
|
||||
return (
|
||||
<li className="event-listener-group" key={index}>
|
||||
{this.renderCategoryHeading(category)}
|
||||
{this.renderCategoryListing(category)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
return ul(
|
||||
{
|
||||
className: "event-listeners-list",
|
||||
},
|
||||
categories.map((category, index) => {
|
||||
return li(
|
||||
{
|
||||
className: "event-listener-group",
|
||||
key: index,
|
||||
},
|
||||
this.renderCategoryHeading(category),
|
||||
this.renderCategoryListing(category)
|
||||
);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
renderSearchResultsList() {
|
||||
const searchResults = this.getSearchResults();
|
||||
|
||||
return (
|
||||
<ul className="event-search-results-list">
|
||||
{Object.keys(searchResults).map(category => {
|
||||
return searchResults[category].map(event => {
|
||||
return this.renderListenerEvent(event, category);
|
||||
});
|
||||
})}
|
||||
</ul>
|
||||
return ul(
|
||||
{
|
||||
className: "event-search-results-list",
|
||||
},
|
||||
Object.keys(searchResults).map(category => {
|
||||
return searchResults[category].map(event => {
|
||||
return this.renderListenerEvent(event, category);
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -190,32 +205,46 @@ class EventListeners extends Component {
|
|||
const indeterminate =
|
||||
!checked && events.some(({ id }) => activeEventListeners.includes(id));
|
||||
|
||||
return (
|
||||
<div className="event-listener-header">
|
||||
<button
|
||||
className="event-listener-expand"
|
||||
onClick={() => this.onCategoryToggle(category.name)}
|
||||
>
|
||||
<AccessibleImage className={classnames("arrow", { expanded })} />
|
||||
</button>
|
||||
<label className="event-listener-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={category.name}
|
||||
onChange={e => {
|
||||
this.onCategoryClick(
|
||||
category,
|
||||
// Clicking an indeterminate checkbox should always have the
|
||||
// effect of disabling any selected items.
|
||||
indeterminate ? false : e.target.checked
|
||||
);
|
||||
}}
|
||||
checked={checked}
|
||||
ref={el => el && (el.indeterminate = indeterminate)}
|
||||
/>
|
||||
<span className="event-listener-category">{category.name}</span>
|
||||
</label>
|
||||
</div>
|
||||
return div(
|
||||
{
|
||||
className: "event-listener-header",
|
||||
},
|
||||
button(
|
||||
{
|
||||
className: "event-listener-expand",
|
||||
onClick: () => this.onCategoryToggle(category.name),
|
||||
},
|
||||
React.createElement(AccessibleImage, {
|
||||
className: classnames("arrow", {
|
||||
expanded,
|
||||
}),
|
||||
})
|
||||
),
|
||||
label(
|
||||
{
|
||||
className: "event-listener-label",
|
||||
},
|
||||
input({
|
||||
type: "checkbox",
|
||||
value: category.name,
|
||||
onChange: e => {
|
||||
this.onCategoryClick(
|
||||
category,
|
||||
// Clicking an indeterminate checkbox should always have the
|
||||
// effect of disabling any selected items.
|
||||
indeterminate ? false : e.target.checked
|
||||
);
|
||||
},
|
||||
checked: checked,
|
||||
ref: el => el && (el.indeterminate = indeterminate),
|
||||
}),
|
||||
span(
|
||||
{
|
||||
className: "event-listener-category",
|
||||
},
|
||||
category.name
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -226,57 +255,74 @@ class EventListeners extends Component {
|
|||
if (!expanded) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul>
|
||||
{category.events.map(event => {
|
||||
return this.renderListenerEvent(event, category.name);
|
||||
})}
|
||||
</ul>
|
||||
return ul(
|
||||
null,
|
||||
category.events.map(event => {
|
||||
return this.renderListenerEvent(event, category.name);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
renderCategory(category) {
|
||||
return <span className="category-label">{category} ▸ </span>;
|
||||
return span(
|
||||
{
|
||||
className: "category-label",
|
||||
},
|
||||
category,
|
||||
" \u25B8 "
|
||||
);
|
||||
}
|
||||
|
||||
renderListenerEvent(event, category) {
|
||||
const { activeEventListeners } = this.props;
|
||||
const { searchText } = this.state;
|
||||
|
||||
return (
|
||||
<li className="event-listener-event" key={event.id}>
|
||||
<label className="event-listener-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={event.id}
|
||||
onChange={e => this.onEventTypeClick(event.id, e.target.checked)}
|
||||
checked={activeEventListeners.includes(event.id)}
|
||||
/>
|
||||
<span className="event-listener-name">
|
||||
{searchText ? this.renderCategory(category) : null}
|
||||
{event.name}
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
return li(
|
||||
{
|
||||
className: "event-listener-event",
|
||||
key: event.id,
|
||||
},
|
||||
label(
|
||||
{
|
||||
className: "event-listener-label",
|
||||
},
|
||||
input({
|
||||
type: "checkbox",
|
||||
value: event.id,
|
||||
onChange: e => this.onEventTypeClick(event.id, e.target.checked),
|
||||
checked: activeEventListeners.includes(event.id),
|
||||
}),
|
||||
span(
|
||||
{
|
||||
className: "event-listener-name",
|
||||
},
|
||||
searchText ? this.renderCategory(category) : null,
|
||||
event.name
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { searchText } = this.state;
|
||||
|
||||
return (
|
||||
<div className="event-listeners">
|
||||
<div className="event-search-container">
|
||||
{this.renderSearchInput()}
|
||||
{this.renderClearSearchButton()}
|
||||
</div>
|
||||
<div className="event-listeners-content">
|
||||
{searchText
|
||||
? this.renderSearchResultsList()
|
||||
: this.renderCategoriesList()}
|
||||
</div>
|
||||
</div>
|
||||
return div(
|
||||
{
|
||||
className: "event-listeners",
|
||||
},
|
||||
div(
|
||||
{
|
||||
className: "event-search-container",
|
||||
},
|
||||
this.renderSearchInput(),
|
||||
this.renderClearSearchButton()
|
||||
),
|
||||
div(
|
||||
{
|
||||
className: "event-listeners-content",
|
||||
},
|
||||
searchText
|
||||
? this.renderSearchResultsList()
|
||||
: this.renderCategoriesList()
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,15 @@
|
|||
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
div,
|
||||
input,
|
||||
li,
|
||||
ul,
|
||||
form,
|
||||
datalist,
|
||||
option,
|
||||
} from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "../../utils/connect";
|
||||
import { features } from "../../utils/prefs";
|
||||
|
|
@ -105,17 +114,17 @@ class Expressions extends Component {
|
|||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const input = this._input;
|
||||
const _input = this._input;
|
||||
|
||||
if (!input) {
|
||||
if (!_input) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!prevState.editing && this.state.editing) {
|
||||
input.setSelectionRange(0, input.value.length);
|
||||
input.focus();
|
||||
_input.setSelectionRange(0, _input.value.length);
|
||||
_input.focus();
|
||||
} else if (this.props.showInput && !this.state.focused) {
|
||||
input.focus();
|
||||
_input.focus();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -204,7 +213,7 @@ class Expressions extends Component {
|
|||
} = this.props;
|
||||
|
||||
const { editing, editIndex } = this.state;
|
||||
const { input, updating } = expression;
|
||||
const { input: _input, updating } = expression;
|
||||
const isEditingExpr = editing && editIndex === index;
|
||||
if (isEditingExpr || (isEditingExpr && expressionError)) {
|
||||
return this.renderExpressionEditInput(expression);
|
||||
|
|
@ -219,55 +228,66 @@ class Expressions extends Component {
|
|||
|
||||
const root = {
|
||||
name: expression.input,
|
||||
path: input,
|
||||
path: _input,
|
||||
contents: {
|
||||
value: expressionResultGrip,
|
||||
front: expressionResultFront,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<li className="expression-container" key={input} title={expression.input}>
|
||||
<div className="expression-content">
|
||||
<ObjectInspector
|
||||
roots={[root]}
|
||||
autoExpandDepth={0}
|
||||
disableWrap={true}
|
||||
openLink={openLink}
|
||||
createElement={this.createElement}
|
||||
onDoubleClick={(items, { depth }) => {
|
||||
if (depth === 0) {
|
||||
this.editExpression(expression, index);
|
||||
}
|
||||
}}
|
||||
onDOMNodeClick={grip => openElementInInspector(grip)}
|
||||
onInspectIconClick={grip => openElementInInspector(grip)}
|
||||
onDOMNodeMouseOver={grip => highlightDomElement(grip)}
|
||||
onDOMNodeMouseOut={grip => unHighlightDomElement(grip)}
|
||||
shouldRenderTooltip={true}
|
||||
mayUseCustomFormatter={true}
|
||||
/>
|
||||
<div className="expression-container__close-btn">
|
||||
<CloseButton
|
||||
handleClick={e => this.deleteExpression(e, expression)}
|
||||
tooltip={L10N.getStr("expressions.remove.tooltip")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
return li(
|
||||
{
|
||||
className: "expression-container",
|
||||
key: _input,
|
||||
title: expression.input,
|
||||
},
|
||||
div(
|
||||
{
|
||||
className: "expression-content",
|
||||
},
|
||||
React.createElement(ObjectInspector, {
|
||||
roots: [root],
|
||||
autoExpandDepth: 0,
|
||||
disableWrap: true,
|
||||
openLink: openLink,
|
||||
createElement: this.createElement,
|
||||
onDoubleClick: (items, { depth }) => {
|
||||
if (depth === 0) {
|
||||
this.editExpression(expression, index);
|
||||
}
|
||||
},
|
||||
onDOMNodeClick: grip => openElementInInspector(grip),
|
||||
onInspectIconClick: grip => openElementInInspector(grip),
|
||||
onDOMNodeMouseOver: grip => highlightDomElement(grip),
|
||||
onDOMNodeMouseOut: grip => unHighlightDomElement(grip),
|
||||
shouldRenderTooltip: true,
|
||||
mayUseCustomFormatter: true,
|
||||
}),
|
||||
div(
|
||||
{
|
||||
className: "expression-container__close-btn",
|
||||
},
|
||||
React.createElement(CloseButton, {
|
||||
handleClick: e => this.deleteExpression(e, expression),
|
||||
tooltip: L10N.getStr("expressions.remove.tooltip"),
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
renderExpressions() {
|
||||
const { expressions, showInput } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul className="pane expressions-list">
|
||||
{expressions.map(this.renderExpression)}
|
||||
</ul>
|
||||
{showInput && this.renderNewExpressionInput()}
|
||||
</>
|
||||
return React.createElement(
|
||||
React.Fragment,
|
||||
null,
|
||||
ul(
|
||||
{
|
||||
className: "pane expressions-list",
|
||||
},
|
||||
expressions.map(this.renderExpression)
|
||||
),
|
||||
showInput && this.renderNewExpressionInput()
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -277,15 +297,21 @@ class Expressions extends Component {
|
|||
}
|
||||
const { autocompleteMatches } = this.props;
|
||||
if (autocompleteMatches) {
|
||||
return (
|
||||
<datalist id="autocomplete-matches">
|
||||
{autocompleteMatches.map((match, index) => {
|
||||
return <option key={index} value={match} />;
|
||||
})}
|
||||
</datalist>
|
||||
return datalist(
|
||||
{
|
||||
id: "autocomplete-matches",
|
||||
},
|
||||
autocompleteMatches.map((match, index) => {
|
||||
return option({
|
||||
key: index,
|
||||
value: match,
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
return <datalist id="autocomplete-matches" />;
|
||||
return datalist({
|
||||
id: "autocomplete-matches",
|
||||
});
|
||||
}
|
||||
|
||||
renderNewExpressionInput() {
|
||||
|
|
@ -295,32 +321,38 @@ class Expressions extends Component {
|
|||
const placeholder = error
|
||||
? L10N.getStr("expressions.errorMsg")
|
||||
: L10N.getStr("expressions.placeholder");
|
||||
|
||||
return (
|
||||
<form
|
||||
className={classnames(
|
||||
return form(
|
||||
{
|
||||
className: classnames(
|
||||
"expression-input-container expression-input-form",
|
||||
{ focused, error }
|
||||
)}
|
||||
onSubmit={this.handleNewSubmit}
|
||||
>
|
||||
<input
|
||||
className="input-expression"
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
onChange={this.handleChange}
|
||||
onBlur={this.hideInput}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onFocus={this.onFocus}
|
||||
value={!editing ? inputValue : ""}
|
||||
ref={c => (this._input = c)}
|
||||
{...(features.autocompleteExpression && {
|
||||
list: "autocomplete-matches",
|
||||
})}
|
||||
/>
|
||||
{this.renderAutoCompleteMatches()}
|
||||
<input type="submit" style={{ display: "none" }} />
|
||||
</form>
|
||||
{
|
||||
focused,
|
||||
error,
|
||||
}
|
||||
),
|
||||
onSubmit: this.handleNewSubmit,
|
||||
},
|
||||
input({
|
||||
className: "input-expression",
|
||||
type: "text",
|
||||
placeholder: placeholder,
|
||||
onChange: this.handleChange,
|
||||
onBlur: this.hideInput,
|
||||
onKeyDown: this.handleKeyDown,
|
||||
onFocus: this.onFocus,
|
||||
value: !editing ? inputValue : "",
|
||||
ref: c => (this._input = c),
|
||||
...(features.autocompleteExpression && {
|
||||
list: "autocomplete-matches",
|
||||
}),
|
||||
}),
|
||||
this.renderAutoCompleteMatches(),
|
||||
input({
|
||||
type: "submit",
|
||||
style: {
|
||||
display: "none",
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -328,32 +360,40 @@ class Expressions extends Component {
|
|||
const { expressionError } = this.props;
|
||||
const { inputValue, editing, focused } = this.state;
|
||||
const error = editing === true && expressionError === true;
|
||||
|
||||
return (
|
||||
<form
|
||||
key={expression.input}
|
||||
className={classnames(
|
||||
return form(
|
||||
{
|
||||
key: expression.input,
|
||||
className: classnames(
|
||||
"expression-input-container expression-input-form",
|
||||
{ focused, error }
|
||||
)}
|
||||
onSubmit={e => this.handleExistingSubmit(e, expression)}
|
||||
>
|
||||
<input
|
||||
className={classnames("input-expression", { error })}
|
||||
type="text"
|
||||
onChange={this.handleChange}
|
||||
onBlur={this.clear}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onFocus={this.onFocus}
|
||||
value={editing ? inputValue : expression.input}
|
||||
ref={c => (this._input = c)}
|
||||
{...(features.autocompleteExpression && {
|
||||
list: "autocomplete-matches",
|
||||
})}
|
||||
/>
|
||||
{this.renderAutoCompleteMatches()}
|
||||
<input type="submit" style={{ display: "none" }} />
|
||||
</form>
|
||||
{
|
||||
focused,
|
||||
error,
|
||||
}
|
||||
),
|
||||
onSubmit: e => this.handleExistingSubmit(e, expression),
|
||||
},
|
||||
input({
|
||||
className: classnames("input-expression", {
|
||||
error,
|
||||
}),
|
||||
type: "text",
|
||||
onChange: this.handleChange,
|
||||
onBlur: this.clear,
|
||||
onKeyDown: this.handleKeyDown,
|
||||
onFocus: this.onFocus,
|
||||
value: editing ? inputValue : expression.input,
|
||||
ref: c => (this._input = c),
|
||||
...(features.autocompleteExpression && {
|
||||
list: "autocomplete-matches",
|
||||
}),
|
||||
}),
|
||||
this.renderAutoCompleteMatches(),
|
||||
input({
|
||||
type: "submit",
|
||||
style: {
|
||||
display: "none",
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||
|
||||
import React, { PureComponent } from "react";
|
||||
import { div, button } from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
import { showMenu } from "../../context-menu/menu";
|
||||
import { connect } from "../../utils/connect";
|
||||
|
|
@ -59,6 +60,7 @@ class Scopes extends PureComponent {
|
|||
toggleMapScopes: PropTypes.func.isRequired,
|
||||
unHighlightDomElement: PropTypes.func.isRequired,
|
||||
why: PropTypes.object.isRequired,
|
||||
selectedFrame: PropTypes.object,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -181,16 +183,14 @@ class Scopes extends PureComponent {
|
|||
}
|
||||
|
||||
const { watchpoint } = item.contents;
|
||||
return (
|
||||
<button
|
||||
className={`remove-watchpoint-${watchpoint}`}
|
||||
title={L10N.getStr("watchpoints.removeWatchpointTooltip")}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
removeWatchpoint(item);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
return button({
|
||||
className: `remove-watchpoint-${watchpoint}`,
|
||||
title: L10N.getStr("watchpoints.removeWatchpointTooltip"),
|
||||
onClick: e => {
|
||||
e.stopPropagation();
|
||||
removeWatchpoint(item);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
renderScopesList() {
|
||||
|
|
@ -215,32 +215,32 @@ class Scopes extends PureComponent {
|
|||
}
|
||||
|
||||
if (scopes && !!scopes.length && !isLoading) {
|
||||
return (
|
||||
<div className="pane scopes-list">
|
||||
<ObjectInspector
|
||||
roots={scopes}
|
||||
autoExpandAll={false}
|
||||
autoExpandDepth={1}
|
||||
client={clientCommands}
|
||||
createElement={tagName => document.createElement(tagName)}
|
||||
disableWrap={true}
|
||||
dimTopLevelWindow={true}
|
||||
frame={selectedFrame}
|
||||
mayUseCustomFormatter={true}
|
||||
openLink={openLink}
|
||||
onDOMNodeClick={grip => openElementInInspector(grip)}
|
||||
onInspectIconClick={grip => openElementInInspector(grip)}
|
||||
onDOMNodeMouseOver={grip => highlightDomElement(grip)}
|
||||
onDOMNodeMouseOut={grip => unHighlightDomElement(grip)}
|
||||
onContextMenu={this.onContextMenu}
|
||||
setExpanded={(path, expand) =>
|
||||
setExpandedScope(selectedFrame, path, expand)
|
||||
}
|
||||
initiallyExpanded={initiallyExpanded}
|
||||
renderItemActions={this.renderWatchpointButton}
|
||||
shouldRenderTooltip={true}
|
||||
/>
|
||||
</div>
|
||||
return div(
|
||||
{
|
||||
className: "pane scopes-list",
|
||||
},
|
||||
React.createElement(ObjectInspector, {
|
||||
roots: scopes,
|
||||
autoExpandAll: false,
|
||||
autoExpandDepth: 1,
|
||||
client: clientCommands,
|
||||
createElement: tagName => document.createElement(tagName),
|
||||
disableWrap: true,
|
||||
dimTopLevelWindow: true,
|
||||
frame: selectedFrame,
|
||||
mayUseCustomFormatter: true,
|
||||
openLink: openLink,
|
||||
onDOMNodeClick: grip => openElementInInspector(grip),
|
||||
onInspectIconClick: grip => openElementInInspector(grip),
|
||||
onDOMNodeMouseOver: grip => highlightDomElement(grip),
|
||||
onDOMNodeMouseOut: grip => unHighlightDomElement(grip),
|
||||
onContextMenu: this.onContextMenu,
|
||||
setExpanded: (path, expand) =>
|
||||
setExpandedScope(selectedFrame, path, expand),
|
||||
initiallyExpanded: initiallyExpanded,
|
||||
renderItemActions: this.renderWatchpointButton,
|
||||
shouldRenderTooltip: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -252,16 +252,26 @@ class Scopes extends PureComponent {
|
|||
stateText = L10N.getStr("scopes.notAvailable");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pane scopes-list">
|
||||
<div className="pane-info">{stateText}</div>
|
||||
</div>
|
||||
return div(
|
||||
{
|
||||
className: "pane scopes-list",
|
||||
},
|
||||
div(
|
||||
{
|
||||
className: "pane-info",
|
||||
},
|
||||
stateText
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className="scopes-content">{this.renderScopesList()}</div>;
|
||||
return div(
|
||||
{
|
||||
className: "scopes-content",
|
||||
},
|
||||
this.renderScopesList()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { div } from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "../../utils/connect";
|
||||
|
||||
|
|
@ -34,25 +35,38 @@ export class Thread extends Component {
|
|||
if (thread.serviceWorkerStatus) {
|
||||
label += ` (${thread.serviceWorkerStatus})`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames("thread", {
|
||||
return div(
|
||||
{
|
||||
className: classnames("thread", {
|
||||
selected: thread.actor == currentThread,
|
||||
})}
|
||||
key={thread.actor}
|
||||
onClick={this.onSelectThread}
|
||||
>
|
||||
<div className="icon">
|
||||
<AccessibleImage className={isWorker ? "worker" : "window"} />
|
||||
</div>
|
||||
<div className="label">{label}</div>
|
||||
{isPaused ? (
|
||||
<div className="pause-badge">
|
||||
<AccessibleImage className="pause" />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
}),
|
||||
key: thread.actor,
|
||||
onClick: this.onSelectThread,
|
||||
},
|
||||
div(
|
||||
{
|
||||
className: "icon",
|
||||
},
|
||||
React.createElement(AccessibleImage, {
|
||||
className: isWorker ? "worker" : "window",
|
||||
})
|
||||
),
|
||||
div(
|
||||
{
|
||||
className: "label",
|
||||
},
|
||||
label
|
||||
),
|
||||
isPaused
|
||||
? div(
|
||||
{
|
||||
className: "pause-badge",
|
||||
},
|
||||
React.createElement(AccessibleImage, {
|
||||
className: "pause",
|
||||
})
|
||||
)
|
||||
: null
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { div } from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "../../utils/connect";
|
||||
|
||||
|
|
@ -20,13 +21,16 @@ export class Threads extends Component {
|
|||
|
||||
render() {
|
||||
const { threads } = this.props;
|
||||
|
||||
return (
|
||||
<div className="pane threads-list">
|
||||
{threads.map(thread => (
|
||||
<Thread thread={thread} key={thread.actor} />
|
||||
))}
|
||||
</div>
|
||||
return div(
|
||||
{
|
||||
className: "pane threads-list",
|
||||
},
|
||||
threads.map(thread =>
|
||||
React.createElement(Thread, {
|
||||
thread: thread,
|
||||
key: thread.actor,
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const {
|
|||
} = require("devtools/client/shared/vendor/fluent-react");
|
||||
|
||||
import React, { PureComponent } from "react";
|
||||
import { div, span } from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "../../utils/connect";
|
||||
import AccessibleImage from "../shared/AccessibleImage";
|
||||
|
|
@ -77,7 +78,12 @@ class WhyPaused extends PureComponent {
|
|||
// Our types for 'Why' are too general because 'type' can be 'string'.
|
||||
// $FlowFixMe - We should have a proper discriminating union of reasons.
|
||||
const summary = this.renderExceptionSummary(exception);
|
||||
return <div className="message warning">{summary}</div>;
|
||||
return div(
|
||||
{
|
||||
className: "message warning",
|
||||
},
|
||||
summary
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "mutationBreakpoint" && why.nodeGrip) {
|
||||
|
|
@ -107,33 +113,44 @@ class WhyPaused extends PureComponent {
|
|||
onDOMNodeMouseOut: () => unHighlightDomElement(),
|
||||
})
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="message">{why.message}</div>
|
||||
<div className="mutationNode">
|
||||
{ancestorRep}
|
||||
{ancestorGrip ? (
|
||||
<span className="why-paused-ancestor">
|
||||
<Localized
|
||||
id={
|
||||
return div(
|
||||
null,
|
||||
div(
|
||||
{
|
||||
className: "message",
|
||||
},
|
||||
why.message
|
||||
),
|
||||
div(
|
||||
{
|
||||
className: "mutationNode",
|
||||
},
|
||||
ancestorRep,
|
||||
ancestorGrip
|
||||
? span(
|
||||
{
|
||||
className: "why-paused-ancestor",
|
||||
},
|
||||
React.createElement(Localized, {
|
||||
id:
|
||||
action === "remove"
|
||||
? "whypaused-mutation-breakpoint-removed"
|
||||
: "whypaused-mutation-breakpoint-added"
|
||||
}
|
||||
></Localized>
|
||||
{targetRep}
|
||||
</span>
|
||||
) : (
|
||||
targetRep
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
: "whypaused-mutation-breakpoint-added",
|
||||
}),
|
||||
targetRep
|
||||
)
|
||||
: targetRep
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof message == "string") {
|
||||
return <div className="message">{message}</div>;
|
||||
return div(
|
||||
{
|
||||
className: "message",
|
||||
},
|
||||
message
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
|
|
@ -145,26 +162,46 @@ class WhyPaused extends PureComponent {
|
|||
const reason = getPauseReason(why);
|
||||
|
||||
if (!why || !reason || endPanelCollapsed) {
|
||||
return <div className={this.state.hideWhyPaused} />;
|
||||
return div({
|
||||
className: this.state.hideWhyPaused,
|
||||
});
|
||||
}
|
||||
return (
|
||||
// We're rendering the LocalizationProvider component from here and not in an upper
|
||||
// component because it does set a new context, overriding the context that we set
|
||||
// in the first place in <App>, which breaks some components.
|
||||
// This should be fixed in Bug 1743155.
|
||||
<LocalizationProvider bundles={fluentBundles || []}>
|
||||
<div className="pane why-paused">
|
||||
<div>
|
||||
<div className="info icon">
|
||||
<AccessibleImage className="info" />
|
||||
</div>
|
||||
<div className="pause reason">
|
||||
<Localized id={reason}></Localized>
|
||||
{this.renderMessage(why)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LocalizationProvider>
|
||||
React.createElement(
|
||||
LocalizationProvider,
|
||||
{
|
||||
bundles: fluentBundles || [],
|
||||
},
|
||||
div(
|
||||
{
|
||||
className: "pane why-paused",
|
||||
},
|
||||
div(
|
||||
null,
|
||||
div(
|
||||
{
|
||||
className: "info icon",
|
||||
},
|
||||
React.createElement(AccessibleImage, {
|
||||
className: "info",
|
||||
})
|
||||
),
|
||||
div(
|
||||
{
|
||||
className: "pause reason",
|
||||
},
|
||||
React.createElement(Localized, {
|
||||
id: reason,
|
||||
}),
|
||||
this.renderMessage(why)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,16 @@
|
|||
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
div,
|
||||
form,
|
||||
input,
|
||||
li,
|
||||
label,
|
||||
ul,
|
||||
option,
|
||||
select,
|
||||
} from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "../../utils/connect";
|
||||
import actions from "../../actions";
|
||||
|
|
@ -72,17 +82,17 @@ class XHRBreakpoints extends Component {
|
|||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const input = this._input;
|
||||
const _input = this._input;
|
||||
|
||||
if (!input) {
|
||||
if (!_input) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!prevState.editing && this.state.editing) {
|
||||
input.setSelectionRange(0, input.value.length);
|
||||
input.focus();
|
||||
_input.setSelectionRange(0, _input.value.length);
|
||||
_input.focus();
|
||||
} else if (this.props.showInput && !this.state.focused) {
|
||||
input.focus();
|
||||
_input.focus();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -190,29 +200,32 @@ class XHRBreakpoints extends Component {
|
|||
renderXHRInput(onSubmit) {
|
||||
const { focused, inputValue } = this.state;
|
||||
const placeholder = L10N.getStr("xhrBreakpoints.placeholder");
|
||||
|
||||
return (
|
||||
<form
|
||||
key="xhr-input-container"
|
||||
className={classnames("xhr-input-container xhr-input-form", {
|
||||
return form(
|
||||
{
|
||||
key: "xhr-input-container",
|
||||
className: classnames("xhr-input-container xhr-input-form", {
|
||||
focused,
|
||||
})}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<input
|
||||
className="xhr-input-url"
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
onChange={this.handleChange}
|
||||
onBlur={this.hideInput}
|
||||
onFocus={this.onFocus}
|
||||
value={inputValue}
|
||||
onKeyDown={this.handleTab}
|
||||
ref={c => (this._input = c)}
|
||||
/>
|
||||
{this.renderMethodSelectElement()}
|
||||
<input type="submit" style={{ display: "none" }} />
|
||||
</form>
|
||||
}),
|
||||
onSubmit: onSubmit,
|
||||
},
|
||||
input({
|
||||
className: "xhr-input-url",
|
||||
type: "text",
|
||||
placeholder: placeholder,
|
||||
onChange: this.handleChange,
|
||||
onBlur: this.hideInput,
|
||||
onFocus: this.onFocus,
|
||||
value: inputValue,
|
||||
onKeyDown: this.handleTab,
|
||||
ref: c => (this._input = c),
|
||||
}),
|
||||
this.renderMethodSelectElement(),
|
||||
input({
|
||||
type: "submit",
|
||||
style: {
|
||||
display: "none",
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -245,103 +258,113 @@ class XHRBreakpoints extends Component {
|
|||
if (index === editIndex) {
|
||||
return this.renderXHRInput(this.handleExistingSubmit);
|
||||
}
|
||||
|
||||
return (
|
||||
<li
|
||||
className="xhr-container"
|
||||
key={`${path}-${method}`}
|
||||
title={path}
|
||||
onDoubleClick={(items, options) => this.editExpression(index)}
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="xhr-checkbox"
|
||||
checked={!disabled}
|
||||
onChange={() => this.handleCheckbox(index)}
|
||||
onClick={ev => ev.stopPropagation()}
|
||||
/>
|
||||
<div className="xhr-label-method">{method}</div>
|
||||
<div className="xhr-label-url">{path}</div>
|
||||
<div className="xhr-container__close-btn">
|
||||
<CloseButton handleClick={e => removeXHRBreakpoint(index)} />
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
return li(
|
||||
{
|
||||
className: "xhr-container",
|
||||
key: `${path}-${method}`,
|
||||
title: path,
|
||||
onDoubleClick: (items, options) => this.editExpression(index),
|
||||
},
|
||||
label(
|
||||
null,
|
||||
React.createElement("input", {
|
||||
type: "checkbox",
|
||||
className: "xhr-checkbox",
|
||||
checked: !disabled,
|
||||
onChange: () => this.handleCheckbox(index),
|
||||
onClick: ev => ev.stopPropagation(),
|
||||
}),
|
||||
div(
|
||||
{
|
||||
className: "xhr-label-method",
|
||||
},
|
||||
method
|
||||
),
|
||||
div(
|
||||
{
|
||||
className: "xhr-label-url",
|
||||
},
|
||||
path
|
||||
),
|
||||
div(
|
||||
{
|
||||
className: "xhr-container__close-btn",
|
||||
},
|
||||
React.createElement(CloseButton, {
|
||||
handleClick: e => removeXHRBreakpoint(index),
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
renderBreakpoints = explicitXhrBreakpoints => {
|
||||
const { showInput } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul className="pane expressions-list">
|
||||
{explicitXhrBreakpoints.map(this.renderBreakpoint)}
|
||||
</ul>
|
||||
{showInput && this.renderXHRInput(this.handleNewSubmit)}
|
||||
</>
|
||||
return React.createElement(
|
||||
React.Fragment,
|
||||
null,
|
||||
ul(
|
||||
{
|
||||
className: "pane expressions-list",
|
||||
},
|
||||
explicitXhrBreakpoints.map(this.renderBreakpoint)
|
||||
),
|
||||
showInput && this.renderXHRInput(this.handleNewSubmit)
|
||||
);
|
||||
};
|
||||
|
||||
renderCheckbox = explicitXhrBreakpoints => {
|
||||
const { shouldPauseOnAny, togglePauseOnAny } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames("breakpoints-exceptions-options", {
|
||||
return div(
|
||||
{
|
||||
className: classnames("breakpoints-exceptions-options", {
|
||||
empty: explicitXhrBreakpoints.length === 0,
|
||||
})}
|
||||
>
|
||||
<ExceptionOption
|
||||
className="breakpoints-exceptions"
|
||||
label={L10N.getStr("pauseOnAnyXHR")}
|
||||
isChecked={shouldPauseOnAny}
|
||||
onChange={() => togglePauseOnAny()}
|
||||
/>
|
||||
</div>
|
||||
}),
|
||||
},
|
||||
React.createElement(ExceptionOption, {
|
||||
className: "breakpoints-exceptions",
|
||||
label: L10N.getStr("pauseOnAnyXHR"),
|
||||
isChecked: shouldPauseOnAny,
|
||||
onChange: () => togglePauseOnAny(),
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
renderMethodOption = method => {
|
||||
return (
|
||||
<option
|
||||
key={method}
|
||||
value={method}
|
||||
return option(
|
||||
{
|
||||
key: method,
|
||||
value: method,
|
||||
// e.stopPropagation() required here since otherwise Firefox triggers 2x
|
||||
// onMouseDown events on <select> upon clicking on an <option>
|
||||
onMouseDown={e => e.stopPropagation()}
|
||||
>
|
||||
{method}
|
||||
</option>
|
||||
onMouseDown: e => e.stopPropagation(),
|
||||
},
|
||||
method
|
||||
);
|
||||
};
|
||||
|
||||
renderMethodSelectElement = () => {
|
||||
return (
|
||||
<select
|
||||
value={this.state.inputMethod}
|
||||
className="xhr-input-method"
|
||||
onChange={this.handleMethodChange}
|
||||
onMouseDown={this.onMouseDown}
|
||||
onKeyDown={this.handleTab}
|
||||
>
|
||||
{xhrMethods.map(this.renderMethodOption)}
|
||||
</select>
|
||||
return select(
|
||||
{
|
||||
value: this.state.inputMethod,
|
||||
className: "xhr-input-method",
|
||||
onChange: this.handleMethodChange,
|
||||
onMouseDown: this.onMouseDown,
|
||||
onKeyDown: this.handleTab,
|
||||
},
|
||||
xhrMethods.map(this.renderMethodOption)
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { xhrBreakpoints } = this.props;
|
||||
const explicitXhrBreakpoints = getExplicitXHRBreakpoints(xhrBreakpoints);
|
||||
|
||||
return (
|
||||
<>
|
||||
{this.renderCheckbox(explicitXhrBreakpoints)}
|
||||
{explicitXhrBreakpoints.length === 0
|
||||
? this.renderXHRInput(this.handleNewSubmit)
|
||||
: this.renderBreakpoints(explicitXhrBreakpoints)}
|
||||
</>
|
||||
return React.createElement(
|
||||
React.Fragment,
|
||||
null,
|
||||
this.renderCheckbox(explicitXhrBreakpoints),
|
||||
explicitXhrBreakpoints.length === 0
|
||||
? this.renderXHRInput(this.handleNewSubmit)
|
||||
: this.renderBreakpoints(explicitXhrBreakpoints)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
const SplitBox = require("devtools/client/shared/components/splitter/SplitBox");
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { div, input, label, button, a } from "react-dom-factories";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "../../utils/connect";
|
||||
|
||||
|
|
@ -46,15 +47,18 @@ const classnames = require("devtools/client/shared/classnames.js");
|
|||
import "./SecondaryPanes.css";
|
||||
|
||||
function debugBtn(onClick, type, className, tooltip) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`${type} ${className}`}
|
||||
key={type}
|
||||
title={tooltip}
|
||||
>
|
||||
<AccessibleImage className={type} title={tooltip} aria-label={tooltip} />
|
||||
</button>
|
||||
return button(
|
||||
{
|
||||
onClick: onClick,
|
||||
className: `${type} ${className}`,
|
||||
key: type,
|
||||
title: tooltip,
|
||||
},
|
||||
React.createElement(AccessibleImage, {
|
||||
className: type,
|
||||
title: tooltip,
|
||||
"aria-label": tooltip,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -183,7 +187,7 @@ class SecondaryPanes extends Component {
|
|||
return {
|
||||
header: L10N.getStr("scopes.header"),
|
||||
className: "scopes-pane",
|
||||
component: <Scopes />,
|
||||
component: React.createElement(Scopes, null),
|
||||
opened: prefs.scopesVisible,
|
||||
buttons: this.getScopesButtons(),
|
||||
onToggle: opened => {
|
||||
|
|
@ -204,50 +208,61 @@ class SecondaryPanes extends Component {
|
|||
}
|
||||
|
||||
return [
|
||||
<div key="scopes-buttons">
|
||||
<label
|
||||
className="map-scopes-header"
|
||||
title={L10N.getStr("scopes.mapping.label")}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapScopesEnabled ? "checked" : ""}
|
||||
onChange={e => this.props.toggleMapScopes()}
|
||||
/>
|
||||
{L10N.getStr("scopes.map.label")}
|
||||
</label>
|
||||
<a
|
||||
className="mdn"
|
||||
target="_blank"
|
||||
href={mdnLink}
|
||||
onClick={e => e.stopPropagation()}
|
||||
title={L10N.getStr("scopes.helpTooltip.label")}
|
||||
>
|
||||
<AccessibleImage className="shortcuts" />
|
||||
</a>
|
||||
</div>,
|
||||
div(
|
||||
{
|
||||
key: "scopes-buttons",
|
||||
},
|
||||
label(
|
||||
{
|
||||
className: "map-scopes-header",
|
||||
title: L10N.getStr("scopes.mapping.label"),
|
||||
onClick: e => e.stopPropagation(),
|
||||
},
|
||||
input({
|
||||
type: "checkbox",
|
||||
checked: mapScopesEnabled ? "checked" : "",
|
||||
onChange: e => this.props.toggleMapScopes(),
|
||||
}),
|
||||
L10N.getStr("scopes.map.label")
|
||||
),
|
||||
a(
|
||||
{
|
||||
className: "mdn",
|
||||
target: "_blank",
|
||||
href: mdnLink,
|
||||
onClick: e => e.stopPropagation(),
|
||||
title: L10N.getStr("scopes.helpTooltip.label"),
|
||||
},
|
||||
React.createElement(AccessibleImage, {
|
||||
className: "shortcuts",
|
||||
})
|
||||
)
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
getEventButtons() {
|
||||
const { logEventBreakpoints } = this.props;
|
||||
return [
|
||||
<div key="events-buttons">
|
||||
<label
|
||||
className="events-header"
|
||||
title={L10N.getStr("eventlisteners.log.label")}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={logEventBreakpoints ? "checked" : ""}
|
||||
onChange={e => this.props.toggleEventLogging()}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
{L10N.getStr("eventlisteners.log")}
|
||||
</label>
|
||||
</div>,
|
||||
div(
|
||||
{
|
||||
key: "events-buttons",
|
||||
},
|
||||
label(
|
||||
{
|
||||
className: "events-header",
|
||||
title: L10N.getStr("eventlisteners.log.label"),
|
||||
onClick: e => e.stopPropagation(),
|
||||
},
|
||||
input({
|
||||
type: "checkbox",
|
||||
checked: logEventBreakpoints ? "checked" : "",
|
||||
onChange: e => this.props.toggleEventLogging(),
|
||||
onKeyDown: e => e.stopPropagation(),
|
||||
}),
|
||||
L10N.getStr("eventlisteners.log")
|
||||
)
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -256,12 +271,10 @@ class SecondaryPanes extends Component {
|
|||
header: L10N.getStr("watchExpressions.header"),
|
||||
className: "watch-expressions-pane",
|
||||
buttons: this.watchExpressionHeaderButtons(),
|
||||
component: (
|
||||
<Expressions
|
||||
showInput={this.state.showExpressionsInput}
|
||||
onExpressionAdded={this.onExpressionAdded}
|
||||
/>
|
||||
),
|
||||
component: React.createElement(Expressions, {
|
||||
showInput: this.state.showExpressionsInput,
|
||||
onExpressionAdded: this.onExpressionAdded,
|
||||
}),
|
||||
opened: prefs.expressionsVisible,
|
||||
onToggle: opened => {
|
||||
prefs.expressionsVisible = opened;
|
||||
|
|
@ -276,12 +289,10 @@ class SecondaryPanes extends Component {
|
|||
header: L10N.getStr("xhrBreakpoints.header"),
|
||||
className: "xhr-breakpoints-pane",
|
||||
buttons: this.xhrBreakpointsHeaderButtons(),
|
||||
component: (
|
||||
<XHRBreakpoints
|
||||
showInput={this.state.showXHRInput}
|
||||
onXHRAdded={this.onXHRAdded}
|
||||
/>
|
||||
),
|
||||
component: React.createElement(XHRBreakpoints, {
|
||||
showInput: this.state.showXHRInput,
|
||||
onXHRAdded: this.onXHRAdded,
|
||||
}),
|
||||
opened: prefs.xhrBreakpointsVisible || pauseReason === "XHR",
|
||||
onToggle: opened => {
|
||||
prefs.xhrBreakpointsVisible = opened;
|
||||
|
|
@ -293,7 +304,9 @@ class SecondaryPanes extends Component {
|
|||
return {
|
||||
header: L10N.getStr("callStack.header"),
|
||||
className: "call-stack-pane",
|
||||
component: <Frames panel="debugger" />,
|
||||
component: React.createElement(Frames, {
|
||||
panel: "debugger",
|
||||
}),
|
||||
opened: prefs.callStackVisible,
|
||||
onToggle: opened => {
|
||||
prefs.callStackVisible = opened;
|
||||
|
|
@ -305,7 +318,7 @@ class SecondaryPanes extends Component {
|
|||
return {
|
||||
header: L10N.getStr("threadsHeader"),
|
||||
className: "threads-pane",
|
||||
component: <Threads />,
|
||||
component: React.createElement(Threads, null),
|
||||
opened: prefs.threadsVisible,
|
||||
onToggle: opened => {
|
||||
prefs.threadsVisible = opened;
|
||||
|
|
@ -327,13 +340,11 @@ class SecondaryPanes extends Component {
|
|||
header: L10N.getStr("breakpoints.header"),
|
||||
className: "breakpoints-pane",
|
||||
buttons: this.breakpointsHeaderButtons(),
|
||||
component: (
|
||||
<Breakpoints
|
||||
shouldPauseOnExceptions={shouldPauseOnExceptions}
|
||||
shouldPauseOnCaughtExceptions={shouldPauseOnCaughtExceptions}
|
||||
pauseOnExceptions={pauseOnExceptions}
|
||||
/>
|
||||
),
|
||||
component: React.createElement(Breakpoints, {
|
||||
shouldPauseOnExceptions: shouldPauseOnExceptions,
|
||||
shouldPauseOnCaughtExceptions: shouldPauseOnCaughtExceptions,
|
||||
pauseOnExceptions: pauseOnExceptions,
|
||||
}),
|
||||
opened:
|
||||
prefs.breakpointsVisible ||
|
||||
(pauseReason === "breakpoint" && shouldBreakpointsPaneOpenOnPause),
|
||||
|
|
@ -355,7 +366,7 @@ class SecondaryPanes extends Component {
|
|||
header: L10N.getStr("eventListenersHeader1"),
|
||||
className: "event-listeners-pane",
|
||||
buttons: this.getEventButtons(),
|
||||
component: <EventListeners />,
|
||||
component: React.createElement(EventListeners, null),
|
||||
opened: prefs.eventListenersVisible || pauseReason === "eventBreakpoint",
|
||||
onToggle: opened => {
|
||||
prefs.eventListenersVisible = opened;
|
||||
|
|
@ -370,7 +381,7 @@ class SecondaryPanes extends Component {
|
|||
header: L10N.getStr("domMutationHeader"),
|
||||
className: "dom-mutations-pane",
|
||||
buttons: [],
|
||||
component: <DOMMutationBreakpoints />,
|
||||
component: React.createElement(DOMMutationBreakpoints, null),
|
||||
opened:
|
||||
prefs.domMutationBreakpointsVisible ||
|
||||
pauseReason === "mutationBreakpoint",
|
||||
|
|
@ -435,49 +446,63 @@ class SecondaryPanes extends Component {
|
|||
|
||||
renderHorizontalLayout() {
|
||||
const { renderWhyPauseDelay } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<WhyPaused delay={renderWhyPauseDelay} />
|
||||
<Accordion items={this.getItems()} />
|
||||
</div>
|
||||
return div(
|
||||
null,
|
||||
React.createElement(WhyPaused, {
|
||||
delay: renderWhyPauseDelay,
|
||||
}),
|
||||
React.createElement(Accordion, {
|
||||
items: this.getItems(),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
renderVerticalLayout() {
|
||||
return (
|
||||
<SplitBox
|
||||
initialSize="300px"
|
||||
minSize={10}
|
||||
maxSize="50%"
|
||||
splitterSize={1}
|
||||
startPanel={
|
||||
<div style={{ width: "inherit" }}>
|
||||
<WhyPaused delay={this.props.renderWhyPauseDelay} />
|
||||
<Accordion items={this.getStartItems()} />
|
||||
</div>
|
||||
}
|
||||
endPanel={<Accordion items={this.getEndItems()} />}
|
||||
/>
|
||||
);
|
||||
return React.createElement(SplitBox, {
|
||||
initialSize: "300px",
|
||||
minSize: 10,
|
||||
maxSize: "50%",
|
||||
splitterSize: 1,
|
||||
startPanel: div(
|
||||
{
|
||||
style: {
|
||||
width: "inherit",
|
||||
},
|
||||
},
|
||||
React.createElement(WhyPaused, {
|
||||
delay: this.props.renderWhyPauseDelay,
|
||||
}),
|
||||
React.createElement(Accordion, {
|
||||
items: this.getStartItems(),
|
||||
})
|
||||
),
|
||||
endPanel: React.createElement(Accordion, {
|
||||
items: this.getEndItems(),
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { skipPausing } = this.props;
|
||||
return (
|
||||
<div className="secondary-panes-wrapper">
|
||||
<CommandBar horizontal={this.props.horizontal} />
|
||||
<div
|
||||
className={classnames(
|
||||
return div(
|
||||
{
|
||||
className: "secondary-panes-wrapper",
|
||||
},
|
||||
React.createElement(CommandBar, {
|
||||
horizontal: this.props.horizontal,
|
||||
}),
|
||||
React.createElement(
|
||||
"div",
|
||||
{
|
||||
className: classnames(
|
||||
"secondary-panes",
|
||||
skipPausing && "skip-pausing"
|
||||
)}
|
||||
>
|
||||
{this.props.horizontal
|
||||
? this.renderHorizontalLayout()
|
||||
: this.renderVerticalLayout()}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
this.props.horizontal
|
||||
? this.renderHorizontalLayout()
|
||||
: this.renderVerticalLayout()
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче