From bcc0991871f64d7dceada06b7a8b60ff2d7ffbe2 Mon Sep 17 00:00:00 2001 From: Hubert Boma Manilla Date: Mon, 7 Aug 2023 07:19:09 +0000 Subject: [PATCH] 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 --- .../components/SecondaryPanes/CommandBar.js | 280 +++++++++--------- .../SecondaryPanes/DOMMutationBreakpoints.js | 107 ++++--- .../SecondaryPanes/EventListeners.js | 254 +++++++++------- .../components/SecondaryPanes/Expressions.js | 242 ++++++++------- .../src/components/SecondaryPanes/Scopes.js | 94 +++--- .../src/components/SecondaryPanes/Thread.js | 50 ++-- .../src/components/SecondaryPanes/Threads.js | 18 +- .../components/SecondaryPanes/WhyPaused.js | 109 ++++--- .../SecondaryPanes/XHRBreakpoints.js | 219 ++++++++------ .../src/components/SecondaryPanes/index.js | 233 ++++++++------- 10 files changed, 904 insertions(+), 702 deletions(-) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js index 3d922041a910..7cc35cf313d4 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js @@ -3,6 +3,7 @@ * file, You can obtain one at . */ 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 ( - + ), + 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 ( - - {() => this.renderSettingsMenuItems()} - + 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 ( - - { - this.props.toggleJavaScriptEnabled(!this.props.javascriptEnabled); - }} - /> - - this.props.toggleInlinePreview(!features.inlinePreview) - } - /> - this.props.toggleEditorWrapping(!prefs.editorWrapping)} - /> - - this.props.toggleSourceMapsEnabled(!prefs.clientSourceMapsEnabled) - } - /> - - this.props.setHideOrShowIgnoredSources(!prefs.hideIgnoredSources) - } - /> - - this.props.toggleSourceMapIgnoreList( - !prefs.sourceMapIgnoreListEnabled - ) - } - /> - + 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 ( -
- {this.renderStepButtons()} -
- {this.renderTraceButton()} - {this.renderSkipPausingButton()} -
- {this.renderSettingsButton()} -
+ }), + }, + this.renderStepButtons(), + div({ + className: "filler", + }), + this.renderTraceButton(), + this.renderSkipPausingButton(), + div({ + className: "devtools-separator", + }), + this.renderSettingsButton() ); } } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js index 375dad556346..a6dcacbfc72c 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js @@ -3,6 +3,7 @@ * file, You can obtain one at . */ 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 ( -
  • - this.handleBreakpoint(breakpointId, !enabled)} - /> -
    -
    - {Rep({ - object: translateNodeFrontToGrip(nodeFront), - mode: MODE.TINY, - onDOMNodeClick: () => openElementInInspector(nodeFront), - onInspectIconClick: () => openElementInInspector(nodeFront), - onDOMNodeMouseOver: () => highlightDomElement(nodeFront), - onDOMNodeMouseOut: () => unHighlightDomElement(), - })} -
    -
    - {localizationTerms[mutationType] || mutationType} -
    -
    - deleteBreakpoint(nodeFront, mutationType)} - /> -
    • + 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", `${L10N.getStr("inspectorTool")}` ); - - return ( -
    -
    openInspector()} - dangerouslySetInnerHTML={{ __html: text }} - /> -
    + 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 ( -
      - {breakpoints.map(breakpoint => this.renderItem(breakpoint))} -
    + return ul( + { + className: "dom-mutation-list", + }, + breakpoints.map(breakpoint => this.renderItem(breakpoint)) ); } } @@ -152,15 +165,13 @@ class DomMutationBreakpoints extends Component { } render() { - return ( - - ); + return React.createElement(DOMMutationBreakpointsPanel, { + openElementInInspector: this.props.openElementInInspector, + highlightDomElement: this.props.highlightDomElement, + unHighlightDomElement: this.props.unHighlightDomElement, + setSkipPausing: this.props.setSkipPausing, + openInspector: this.props.openInspector, + }); } } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js index 8b7c9975b0a6..a832616b7b35 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js @@ -3,6 +3,16 @@ * file, You can obtain one at . */ 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 ( -
    e.preventDefault()}> - -
    + 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 ( - - -
    + 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 ( -
      - {category.events.map(event => { - return this.renderListenerEvent(event, category.name); - })} -
    + return ul( + null, + category.events.map(event => { + return this.renderListenerEvent(event, category.name); + }) ); } renderCategory(category) { - return {category} ▸ ; + return span( + { + className: "category-label", + }, + category, + " \u25B8 " + ); } renderListenerEvent(event, category) { const { activeEventListeners } = this.props; const { searchText } = this.state; - - return ( -
  • - -
    • + 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 ( -
    -
    - {this.renderSearchInput()} - {this.renderClearSearchButton()} -
    -
    - {searchText - ? this.renderSearchResultsList() - : this.renderCategoriesList()} -
    -
    + return div( + { + className: "event-listeners", + }, + div( + { + className: "event-search-container", + }, + this.renderSearchInput(), + this.renderClearSearchButton() + ), + div( + { + className: "event-listeners-content", + }, + searchText + ? this.renderSearchResultsList() + : this.renderCategoriesList() + ) ); } } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js index 7c5a4debbc05..b23f0ce64ca7 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js @@ -3,6 +3,15 @@ * file, You can obtain one at . */ 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 ( -
  • -
    - { - 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} - /> -
    - this.deleteExpression(e, expression)} - tooltip={L10N.getStr("expressions.remove.tooltip")} - /> -
    -
    -
    • + 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 ( - <> -
      - {expressions.map(this.renderExpression)} -
    - {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 ( - - {autocompleteMatches.map((match, index) => { - return + return datalist( + { + id: "autocomplete-matches", + }, + autocompleteMatches.map((match, index) => { + return option({ + key: index, + value: match, + }); + }) ); } - return ; + 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 ( -
    - (this._input = c)} - {...(features.autocompleteExpression && { - list: "autocomplete-matches", - })} - /> - {this.renderAutoCompleteMatches()} - -
    + { + 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 ( -
    this.handleExistingSubmit(e, expression)} - > - (this._input = c)} - {...(features.autocompleteExpression && { - list: "autocomplete-matches", - })} - /> - {this.renderAutoCompleteMatches()} - -
    + { + 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", + }, + }) ); } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js index afcbbd79acb9..78320fef2eeb 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js @@ -3,6 +3,7 @@ * file, You can obtain one at . */ 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 ( - + 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: , + component: React.createElement(Scopes, null), opened: prefs.scopesVisible, buttons: this.getScopesButtons(), onToggle: opened => { @@ -204,50 +208,61 @@ class SecondaryPanes extends Component { } return [ -
    - - e.stopPropagation()} - title={L10N.getStr("scopes.helpTooltip.label")} - > - - -
    , + 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") + ) + ), ]; } @@ -256,12 +271,10 @@ class SecondaryPanes extends Component { header: L10N.getStr("watchExpressions.header"), className: "watch-expressions-pane", buttons: this.watchExpressionHeaderButtons(), - component: ( - - ), + 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: ( - - ), + 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: , + 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: , + 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: ( - - ), + 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: , + 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: , + component: React.createElement(DOMMutationBreakpoints, null), opened: prefs.domMutationBreakpointsVisible || pauseReason === "mutationBreakpoint", @@ -435,49 +446,63 @@ class SecondaryPanes extends Component { renderHorizontalLayout() { const { renderWhyPauseDelay } = this.props; - - return ( -
    - - -
    + return div( + null, + React.createElement(WhyPaused, { + delay: renderWhyPauseDelay, + }), + React.createElement(Accordion, { + items: this.getItems(), + }) ); } renderVerticalLayout() { - return ( - - - -
    - } - endPanel={} - /> - ); + 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 ( -
    - -
    - {this.props.horizontal - ? this.renderHorizontalLayout() - : this.renderVerticalLayout()} -
    -
    + ), + }, + this.props.horizontal + ? this.renderHorizontalLayout() + : this.renderVerticalLayout() + ) ); } }