diff options
Diffstat (limited to 'devtools/client/debugger/src/components')
48 files changed, 871 insertions, 269 deletions
diff --git a/devtools/client/debugger/src/components/App.css b/devtools/client/debugger/src/components/App.css index 796bf84574..64a899d047 100644 --- a/devtools/client/debugger/src/components/App.css +++ b/devtools/client/debugger/src/components/App.css @@ -79,6 +79,29 @@ button:hover { gap: 8px; grid-area: notification; display: flex; + /* center text within the notification */ + align-items: center; + + .info.icon { + align-self: normal; + } + + .close-button { + /* set a fixed height in order to avoid having it flexed to full height */ + height: 16px; + padding: 0; + /* put in top-right corner */ + margin-inline-start: auto; + align-self: normal; + + &::before { + display: block; + width: 16px; + height: 16px; + content: ""; + background-image: url("chrome://devtools/skin/images/close.svg"); + } + } } /* Utils */ diff --git a/devtools/client/debugger/src/components/App.js b/devtools/client/debugger/src/components/App.js index 40911e5167..1642a212ef 100644 --- a/devtools/client/debugger/src/components/App.js +++ b/devtools/client/debugger/src/components/App.js @@ -4,6 +4,7 @@ import React, { Component } from "devtools/client/shared/vendor/react"; import { + button, div, main, span, @@ -208,15 +209,23 @@ class App extends Component { } } + closeSourceMapError = () => { + this.setState({ hiddenSourceMapError: this.props.sourceMapError }); + }; + renderEditorNotificationBar() { - if (this.props.sourceMapError) { + if ( + this.props.sourceMapError && + this.state.hiddenSourceMapError != this.props.sourceMapError + ) { return div( { className: "editor-notification-footer", "aria-role": "status" }, span( { className: "info icon" }, React.createElement(AccessibleImage, { className: "sourcemap" }) ), - `Source Map Error: ${this.props.sourceMapError}` + `Source Map Error: ${this.props.sourceMapError}`, + button({ className: "close-button", onClick: this.closeSourceMapError }) ); } if (this.props.showOriginalVariableMappingWarning) { @@ -248,13 +257,13 @@ class App extends Component { className: "editor-container", }, React.createElement(EditorTabs, { - startPanelCollapsed: startPanelCollapsed, - endPanelCollapsed: endPanelCollapsed, - horizontal: horizontal, + startPanelCollapsed, + endPanelCollapsed, + horizontal, }), React.createElement(Editor, { - startPanelSize: startPanelSize, - endPanelSize: endPanelSize, + startPanelSize, + endPanelSize, }), !this.props.selectedLocation ? React.createElement(WelcomeBox, { @@ -313,7 +322,7 @@ class App extends Component { prefs.startPanelSize = num; this.triggerEditorPaneResize(); }, - startPanelCollapsed: startPanelCollapsed, + startPanelCollapsed, startPanel: React.createElement(PrimaryPanes, { horizontal, }), @@ -323,7 +332,7 @@ class App extends Component { endPanel: React.createElement(SecondaryPanes, { horizontal, }), - endPanelCollapsed: endPanelCollapsed, + endPanelCollapsed, }); }; diff --git a/devtools/client/debugger/src/components/Editor/ConditionalPanel.js b/devtools/client/debugger/src/components/Editor/ConditionalPanel.js index 8ff84c287a..97876f2f00 100644 --- a/devtools/client/debugger/src/components/Editor/ConditionalPanel.js +++ b/devtools/client/debugger/src/components/Editor/ConditionalPanel.js @@ -121,7 +121,7 @@ export class ConditionalPanel extends PureComponent { return this.clearConditionalPanel(); } - componentDidUpdate(prevProps) { + componentDidUpdate() { this.keepFocusOnInput(); } diff --git a/devtools/client/debugger/src/components/Editor/Footer.css b/devtools/client/debugger/src/components/Editor/Footer.css index 4a3272879b..f3382e94b5 100644 --- a/devtools/client/debugger/src/components/Editor/Footer.css +++ b/devtools/client/debugger/src/components/Editor/Footer.css @@ -67,6 +67,45 @@ opacity: 0.6; } +.devtools-button.debugger-source-map-button { + display: inline-flex; + align-items: center; + margin: 0; + --menuitem-icon-image: url("chrome://devtools/content/debugger/images/sourcemap.svg"); + + &.not-mapped { + --icon-color: var(--theme-icon-dimmed-color); + } + + &.original { + --icon-color: var(--theme-icon-checked-color); + --menuitem-icon-image: url("chrome://devtools/content/debugger/images/sourcemap-active.svg"); + } + + &.error { + --icon-color: var(--theme-icon-warning-color); + } + + &.disabled { + --icon-color: var(--theme-icon-dimmed-color); + --menuitem-icon-image: url("chrome://devtools/content/debugger/images/sourcemap-disabled.svg"); + } + + &.loading { + --menuitem-icon-image: url("chrome://devtools/content/debugger/images/loader.svg"); + } + + &::before { + /* override default style to have similar left and right margins */ + margin-inline-end: 3px; + color: var(--icon-color, currentColor); + } + + &.loading::before { + animation: spin 2s linear infinite; + } +} + .source-footer .mapped-source, .source-footer .cursor-position { color: var(--theme-body-color); diff --git a/devtools/client/debugger/src/components/Editor/Footer.js b/devtools/client/debugger/src/components/Editor/Footer.js index c4ff02caf4..69c7b52b68 100644 --- a/devtools/client/debugger/src/components/Editor/Footer.js +++ b/devtools/client/debugger/src/components/Editor/Footer.js @@ -7,6 +7,7 @@ import { div, button, span, + hr, } from "devtools/client/shared/vendor/react-dom-factories"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { connect } from "devtools/client/shared/vendor/react-redux"; @@ -23,14 +24,23 @@ import { isSourceOnSourceMapIgnoreList, isSourceMapIgnoreListEnabled, getSelectedMappedSource, + getSourceMapErrorForSourceActor, + areSourceMapsEnabled, + getShouldSelectOriginalLocation, + isSourceActorWithSourceMap, + getSourceMapResolvedURL, + isSelectedMappedSourceLoading, } from "../../selectors/index"; -import { isPretty, getFilename, shouldBlackbox } from "../../utils/source"; +import { isPretty, shouldBlackbox } from "../../utils/source"; import { PaneToggleButton } from "../shared/Button/index"; import AccessibleImage from "../shared/AccessibleImage"; const classnames = require("resource://devtools/client/shared/classnames.js"); +const MenuButton = require("resource://devtools/client/shared/components/menu/MenuButton.js"); +const MenuItem = require("resource://devtools/client/shared/components/menu/MenuItem.js"); +const MenuList = require("resource://devtools/client/shared/components/menu/MenuList.js"); class SourceFooter extends PureComponent { static get propTypes() { @@ -155,9 +165,11 @@ class SourceFooter extends PureComponent { } renderCommands() { - const commands = [this.blackBoxButton(), this.prettyPrintButton()].filter( - Boolean - ); + const commands = [ + this.blackBoxButton(), + this.prettyPrintButton(), + this.renderSourceMapButton(), + ].filter(Boolean); return commands.length ? div( @@ -169,7 +181,7 @@ class SourceFooter extends PureComponent { : null; } - renderSourceSummary() { + renderMappedSource() { const { mappedSource, jumpToMappedLocation, selectedLocation } = this.props; if (!mappedSource) { @@ -182,12 +194,11 @@ class SourceFooter extends PureComponent { : "sourceFooter.mappedGeneratedSource.tooltip", mappedSource.url ); - const filename = getFilename(mappedSource); const label = L10N.getFormatStr( mappedSource.isOriginal ? "sourceFooter.mappedOriginalSource.title" : "sourceFooter.mappedGeneratedSource.title", - filename + mappedSource.shortName ); return button( { @@ -227,6 +238,148 @@ class SourceFooter extends PureComponent { ); } + getSourceMapLabel() { + if (!this.props.selectedLocation) { + return undefined; + } + if (!this.props.areSourceMapsEnabled) { + return L10N.getStr("sourceFooter.sourceMapButton.disabled"); + } + if (this.props.sourceMapError) { + return undefined; + } + if (!this.props.isSourceActorWithSourceMap) { + return L10N.getStr("sourceFooter.sourceMapButton.sourceNotMapped"); + } + if (this.props.selectedLocation.source.isOriginal) { + return L10N.getStr("sourceFooter.sourceMapButton.isOriginalSource"); + } + return L10N.getStr("sourceFooter.sourceMapButton.isBundleSource"); + } + + getSourceMapTitle() { + if (this.props.sourceMapError) { + return L10N.getFormatStr( + "sourceFooter.sourceMapButton.errorTitle", + this.props.sourceMapError + ); + } + if (this.props.isSourceMapLoading) { + return L10N.getStr("sourceFooter.sourceMapButton.loadingTitle"); + } + return L10N.getStr("sourceFooter.sourceMapButton.title"); + } + + renderSourceMapButton() { + const { toolboxDoc } = this.context; + + return React.createElement( + MenuButton, + { + menuId: "debugger-source-map-button", + toolboxDoc, + className: classnames("devtools-button", "debugger-source-map-button", { + error: !!this.props.sourceMapError, + loading: this.props.isSourceMapLoading, + disabled: !this.props.areSourceMapsEnabled, + "not-mapped": + !this.props.selectedLocation?.source.isOriginal && + !this.props.isSourceActorWithSourceMap, + original: this.props.selectedLocation?.source.isOriginal, + }), + title: this.getSourceMapTitle(), + label: this.getSourceMapLabel(), + icon: true, + }, + () => this.renderSourceMapMenuItems() + ); + } + + renderSourceMapMenuItems() { + const items = [ + React.createElement(MenuItem, { + className: "menu-item debugger-source-map-enabled", + checked: this.props.areSourceMapsEnabled, + label: L10N.getStr("sourceFooter.sourceMapButton.enable"), + onClick: this.toggleSourceMaps, + }), + hr(), + React.createElement(MenuItem, { + className: "menu-item debugger-source-map-open-original", + checked: this.props.shouldSelectOriginalLocation, + label: L10N.getStr( + "sourceFooter.sourceMapButton.showOriginalSourceByDefault" + ), + onClick: this.toggleSelectOriginalByDefault, + }), + ]; + + if (this.props.mappedSource) { + items.push( + React.createElement(MenuItem, { + className: "menu-item debugger-jump-mapped-source", + label: this.props.mappedSource.isOriginal + ? L10N.getStr("sourceFooter.sourceMapButton.jumpToGeneratedSource") + : L10N.getStr("sourceFooter.sourceMapButton.jumpToOriginalSource"), + tooltip: this.props.mappedSource.url, + onClick: () => + this.props.jumpToMappedLocation(this.props.selectedLocation), + }) + ); + } + + if (this.props.resolvedSourceMapURL) { + items.push( + React.createElement(MenuItem, { + className: "menu-item debugger-source-map-link", + label: L10N.getStr( + "sourceFooter.sourceMapButton.openSourceMapInNewTab" + ), + onClick: this.openSourceMap, + }) + ); + } + return React.createElement( + MenuList, + { + id: "debugger-source-map-list", + }, + items + ); + } + + openSourceMap = () => { + let line, column; + if ( + this.props.sourceMapError && + this.props.sourceMapError.includes("JSON.parse") + ) { + const match = this.props.sourceMapError.match( + /at line (\d+) column (\d+)/ + ); + if (match) { + line = match[1]; + column = match[2]; + } + } + this.props.openSourceMap( + this.props.resolvedSourceMapURL || this.props.selectedLocation.source.url, + line, + column + ); + }; + + toggleSourceMaps = () => { + this.props.toggleSourceMapsEnabled(!this.props.areSourceMapsEnabled); + }; + + toggleSelectOriginalByDefault = () => { + this.props.setDefaultSelectedLocation( + !this.props.shouldSelectOriginalLocation + ); + this.props.jumpToMappedSelectedLocation(); + }; + render() { return div( { @@ -242,19 +395,40 @@ class SourceFooter extends PureComponent { { className: "source-footer-end", }, - this.renderSourceSummary(), + this.renderMappedSource(), this.renderCursorPosition(), this.renderToggleButton() ) ); } } +SourceFooter.contextTypes = { + toolboxDoc: PropTypes.object, +}; const mapStateToProps = state => { const selectedSource = getSelectedSource(state); const selectedLocation = getSelectedLocation(state); const sourceTextContent = getSelectedSourceTextContent(state); + const areSourceMapsEnabledProp = areSourceMapsEnabled(state); + const isSourceActorWithSourceMapProp = isSourceActorWithSourceMap( + state, + selectedLocation?.sourceActor.id + ); + const sourceMapError = selectedLocation?.sourceActor + ? getSourceMapErrorForSourceActor(state, selectedLocation.sourceActor.id) + : null; + const mappedSource = getSelectedMappedSource(state); + + const isSourceMapLoading = + areSourceMapsEnabledProp && + isSourceActorWithSourceMapProp && + // `mappedSource` will be null while loading, we need another way to know when it is done computing + !mappedSource && + isSelectedMappedSourceLoading(state) && + !sourceMapError; + return { selectedSource, selectedLocation, @@ -265,7 +439,8 @@ const mapStateToProps = state => { isSourceMapIgnoreListEnabled(state) && isSourceOnSourceMapIgnoreList(state, selectedSource), sourceLoaded: !!sourceTextContent, - mappedSource: getSelectedMappedSource(state), + mappedSource, + isSourceMapLoading, prettySource: getPrettySource( state, selectedSource ? selectedSource.id : null @@ -277,6 +452,17 @@ const mapStateToProps = state => { prettyPrintMessage: selectedLocation ? getPrettyPrintMessage(state, selectedLocation) : null, + + sourceMapError, + resolvedSourceMapURL: selectedLocation?.sourceActor + ? getSourceMapResolvedURL(state, selectedLocation.sourceActor.id) + : null, + isSourceActorWithSourceMap: isSourceActorWithSourceMapProp, + + sourceMapURL: selectedLocation?.sourceActor.sourceMapURL, + + areSourceMapsEnabled: areSourceMapsEnabledProp, + shouldSelectOriginalLocation: getShouldSelectOriginalLocation(state), }; }; @@ -285,4 +471,8 @@ export default connect(mapStateToProps, { toggleBlackBox: actions.toggleBlackBox, jumpToMappedLocation: actions.jumpToMappedLocation, togglePaneCollapse: actions.togglePaneCollapse, + toggleSourceMapsEnabled: actions.toggleSourceMapsEnabled, + setDefaultSelectedLocation: actions.setDefaultSelectedLocation, + jumpToMappedSelectedLocation: actions.jumpToMappedSelectedLocation, + openSourceMap: actions.openSourceMap, })(SourceFooter); diff --git a/devtools/client/debugger/src/components/Editor/InlinePreview.js b/devtools/client/debugger/src/components/Editor/InlinePreview.js index 552143dcf2..60303e38b5 100644 --- a/devtools/client/debugger/src/components/Editor/InlinePreview.js +++ b/devtools/client/debugger/src/components/Editor/InlinePreview.js @@ -27,7 +27,7 @@ class InlinePreview extends PureComponent { }; } - showInScopes(variable) { + showInScopes() { // TODO: focus on variable value in the scopes sidepanel // we will need more info from parent comp } diff --git a/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js b/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js index bc54fc5b4d..18fe98ff17 100644 --- a/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js +++ b/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js @@ -67,13 +67,13 @@ class InlinePreviewRow extends PureComponent { null, previews.map(preview => React.createElement(InlinePreview, { - line: line, + line, key: `${line}-${preview.name}`, variable: preview.name, value: preview.value, - openElementInInspector: openElementInInspector, - highlightDomElement: highlightDomElement, - unHighlightDomElement: unHighlightDomElement, + openElementInInspector, + highlightDomElement, + unHighlightDomElement, }) ) ), diff --git a/devtools/client/debugger/src/components/Editor/InlinePreviews.js b/devtools/client/debugger/src/components/Editor/InlinePreviews.js index 18616ae3ed..ba8b08669a 100644 --- a/devtools/client/debugger/src/components/Editor/InlinePreviews.js +++ b/devtools/client/debugger/src/components/Editor/InlinePreviews.js @@ -49,7 +49,7 @@ class InlinePreviews extends Component { inlinePreviewRows = Object.keys(previewsObj).map(line => { const lineNum = parseInt(line, 10); return React.createElement(InlinePreviewRow, { - editor: editor, + editor, key: line, line: lineNum, previews: previewsObj[line], diff --git a/devtools/client/debugger/src/components/Editor/Preview/Popup.js b/devtools/client/debugger/src/components/Editor/Preview/Popup.js index a010358dc1..431cb52729 100644 --- a/devtools/client/debugger/src/components/Editor/Preview/Popup.js +++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.js @@ -100,7 +100,7 @@ export class Popup extends Component { renderExceptionPreview(exception) { return React.createElement(ExceptionPopup, { - exception: exception, + exception, clearPreview: this.props.clearPreview, }); } @@ -182,8 +182,8 @@ export class Popup extends Component { Popover, { targetPosition: cursorPos, - type: type, - editorRef: editorRef, + type, + editorRef, target: this.props.preview.target, mouseout: this.props.clearPreview, }, diff --git a/devtools/client/debugger/src/components/Editor/Preview/index.js b/devtools/client/debugger/src/components/Editor/Preview/index.js index 218d33007f..10c600670e 100644 --- a/devtools/client/debugger/src/components/Editor/Preview/index.js +++ b/devtools/client/debugger/src/components/Editor/Preview/index.js @@ -44,7 +44,7 @@ class Preview extends PureComponent { codeMirrorWrapper.removeEventListener("mousedown", this.onMouseDown); } - updateListeners(prevProps) { + updateListeners() { const { codeMirror } = this.props.editor; const codeMirrorWrapper = codeMirror.getWrapperElement(); codeMirror.on("tokenenter", this.onTokenEnter); @@ -107,7 +107,7 @@ class Preview extends PureComponent { return null; } return React.createElement(Popup, { - preview: preview, + preview, editor: this.props.editor, editorRef: this.props.editorRef, clearPreview: this.clearPreview, diff --git a/devtools/client/debugger/src/components/Editor/SearchInFileBar.js b/devtools/client/debugger/src/components/Editor/SearchInFileBar.js index a3491a3fef..26f95ce75d 100644 --- a/devtools/client/debugger/src/components/Editor/SearchInFileBar.js +++ b/devtools/client/debugger/src/components/Editor/SearchInFileBar.js @@ -97,7 +97,7 @@ class SearchInFileBar extends Component { shortcuts.on("Escape", this.onEscape); } - componentDidUpdate(prevProps, prevState) { + componentDidUpdate() { if (this.refs.resultList && this.refs.resultList.refs) { scrollList(this.refs.resultList.refs, this.state.selectedResultIndex); } @@ -111,7 +111,7 @@ class SearchInFileBar extends Component { const { editor: ed } = this.props; if (ed) { const ctx = { ed, cm: ed.codeMirror }; - removeOverlay(ctx, this.state.query); + removeOverlay(ctx); } }; @@ -165,7 +165,7 @@ class SearchInFileBar extends Component { const ctx = { ed: editor, cm: editor.codeMirror }; if (!query) { - clearSearch(ctx.cm, query); + clearSearch(ctx.cm); return; } @@ -249,11 +249,11 @@ class SearchInFileBar extends Component { return this.doSearch(e.target.value); }; - onFocus = e => { + onFocus = () => { this.setState({ inputFocused: true }); }; - onBlur = e => { + onBlur = () => { this.setState({ inputFocused: false }); }; @@ -321,7 +321,7 @@ class SearchInFileBar extends Component { }, React.createElement(SearchInput, { query: this.state.query, - count: count, + count, placeholder: L10N.getStr("sourceSearch.search.placeholder2"), summaryMsg: this.buildSummaryMsg(), isLoading: false, @@ -349,7 +349,7 @@ SearchInFileBar.contextTypes = { shortcuts: PropTypes.object, }; -const mapStateToProps = (state, p) => { +const mapStateToProps = state => { const selectedSource = getSelectedSource(state); return { diff --git a/devtools/client/debugger/src/components/Editor/Tab.js b/devtools/client/debugger/src/components/Editor/Tab.js index ba5e1c1934..98aca90cd2 100644 --- a/devtools/client/debugger/src/components/Editor/Tab.js +++ b/devtools/client/debugger/src/components/Editor/Tab.js @@ -15,7 +15,6 @@ import actions from "../../actions/index"; import { getDisplayPath, getFileURL, - getSourceQueryString, getTruncatedFileName, isPretty, } from "../../utils/source"; @@ -87,14 +86,13 @@ class Tab extends PureComponent { }); const path = getDisplayPath(source, tabSources); - const query = getSourceQueryString(source); return div( { draggable: true, - onDragOver: onDragOver, - onDragStart: onDragStart, - onDragEnd: onDragEnd, - className: className, + onDragOver, + onDragStart, + onDragEnd, + className, "data-index": index, "data-source-id": sourceId, onClick: handleTabClick, @@ -115,7 +113,7 @@ class Tab extends PureComponent { { className: "filename", }, - getTruncatedFileName(source, query), + getTruncatedFileName(source), path && span(null, `../${path}/..`) ), React.createElement(CloseButton, { diff --git a/devtools/client/debugger/src/components/Editor/Tabs.js b/devtools/client/debugger/src/components/Editor/Tabs.js index 3577a4909c..d93f7d3b18 100644 --- a/devtools/client/debugger/src/components/Editor/Tabs.js +++ b/devtools/client/debugger/src/components/Editor/Tabs.js @@ -23,7 +23,7 @@ import { import { isVisible } from "../../utils/ui"; import { getHiddenTabs } from "../../utils/tabs"; -import { getFilename, isPretty, getFileURL } from "../../utils/source"; +import { isPretty, getFileURL } from "../../utils/source"; import actions from "../../actions/index"; import Tab from "./Tab"; @@ -144,13 +144,12 @@ class Tabs extends PureComponent { renderDropdownSource = source => { const { selectSource } = this.props; - const filename = getFilename(source); const onClick = () => selectSource(source); return li( { key: source.id, - onClick: onClick, + onClick, title: getFileURL(source, false), }, React.createElement(AccessibleImage, { @@ -160,7 +159,7 @@ class Tabs extends PureComponent { { className: "dropdown-label", }, - filename + source.shortName ) ); }; diff --git a/devtools/client/debugger/src/components/Editor/index.js b/devtools/client/debugger/src/components/Editor/index.js index c659de77d2..ae9bde7657 100644 --- a/devtools/client/debugger/src/components/Editor/index.js +++ b/devtools/client/debugger/src/components/Editor/index.js @@ -12,6 +12,7 @@ import { connect } from "devtools/client/shared/vendor/react-redux"; import { getLineText, isLineBlackboxed } from "./../../utils/source"; import { createLocation } from "./../../utils/location"; import { getIndentation } from "../../utils/indentation"; +import { features } from "../../utils/prefs"; import { getActiveSearch, @@ -50,10 +51,9 @@ import BlackboxLines from "./BlackboxLines"; import { showSourceText, - showLoading, - showErrorMessage, + setDocument, + resetLineNumberFormat, getEditor, - clearEditor, getCursorLine, getCursorColumn, lineAtHeight, @@ -143,37 +143,45 @@ class Editor extends PureComponent { this.props.selectedSourceTextContent?.value || nextProps.symbols !== this.props.symbols; - const shouldUpdateSize = - nextProps.startPanelSize !== this.props.startPanelSize || - nextProps.endPanelSize !== this.props.endPanelSize; - - const shouldScroll = - nextProps.selectedLocation && - this.shouldScrollToLocation(nextProps, editor); + if (!features.codemirrorNext) { + const shouldUpdateSize = + nextProps.startPanelSize !== this.props.startPanelSize || + nextProps.endPanelSize !== this.props.endPanelSize; + + const shouldScroll = + nextProps.selectedLocation && + this.shouldScrollToLocation(nextProps, editor); + + if (shouldUpdateText || shouldUpdateSize || shouldScroll) { + startOperation(); + if (shouldUpdateText) { + this.setText(nextProps, editor); + } + if (shouldUpdateSize) { + editor.codeMirror.setSize(); + } + if (shouldScroll) { + this.scrollToLocation(nextProps, editor); + } + endOperation(); + } - if (shouldUpdateText || shouldUpdateSize || shouldScroll) { - startOperation(); + if (this.props.selectedSource != nextProps.selectedSource) { + this.props.updateViewport(); + resizeBreakpointGutter(editor.codeMirror); + resizeToggleButton(editor.codeMirror); + } + } else { + // For codemirror 6 + // eslint-disable-next-line no-lonely-if if (shouldUpdateText) { this.setText(nextProps, editor); } - if (shouldUpdateSize) { - editor.codeMirror.setSize(); - } - if (shouldScroll) { - this.scrollToLocation(nextProps, editor); - } - endOperation(); - } - - if (this.props.selectedSource != nextProps.selectedSource) { - this.props.updateViewport(); - resizeBreakpointGutter(editor.codeMirror); - resizeToggleButton(editor.codeMirror); } } setupEditor() { - const editor = getEditor(); + const editor = getEditor(features.codemirrorNext); // disables the default search shortcuts editor._initShortcuts = () => {}; @@ -183,71 +191,84 @@ class Editor extends PureComponent { editor.appendToLocalElement(node.querySelector(".editor-mount")); } - const { codeMirror } = editor; - - this.abortController = new window.AbortController(); - - // CodeMirror refreshes its internal state on window resize, but we need to also - // refresh it when the side panels are resized. - // We could have a ResizeObserver instead, but we wouldn't be able to differentiate - // between window resize and side panel resize and as a result, might refresh - // codeMirror twice, which is wasteful. - window.document - .querySelector(".editor-pane") - .addEventListener("resizeend", () => codeMirror.refresh(), { - signal: this.abortController.signal, - }); - - codeMirror.on("gutterClick", this.onGutterClick); - codeMirror.on("cursorActivity", this.onCursorChange); - - const codeMirrorWrapper = codeMirror.getWrapperElement(); - // Set code editor wrapper to be focusable - codeMirrorWrapper.tabIndex = 0; - codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e)); - codeMirrorWrapper.addEventListener("click", e => this.onClick(e)); - codeMirrorWrapper.addEventListener("mouseover", onMouseOver(codeMirror)); - - const toggleFoldMarkerVisibility = e => { - if (node instanceof HTMLElement) { - node - .querySelectorAll(".CodeMirror-guttermarker-subtle") - .forEach(elem => { - elem.classList.toggle("visible"); - }); - } - }; + if (!features.codemirrorNext) { + const { codeMirror } = editor; + + this.abortController = new window.AbortController(); + + // CodeMirror refreshes its internal state on window resize, but we need to also + // refresh it when the side panels are resized. + // We could have a ResizeObserver instead, but we wouldn't be able to differentiate + // between window resize and side panel resize and as a result, might refresh + // codeMirror twice, which is wasteful. + window.document + .querySelector(".editor-pane") + .addEventListener("resizeend", () => codeMirror.refresh(), { + signal: this.abortController.signal, + }); + + codeMirror.on("gutterClick", this.onGutterClick); + codeMirror.on("cursorActivity", this.onCursorChange); + + const codeMirrorWrapper = codeMirror.getWrapperElement(); + // Set code editor wrapper to be focusable + codeMirrorWrapper.tabIndex = 0; + codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e)); + codeMirrorWrapper.addEventListener("click", e => this.onClick(e)); + codeMirrorWrapper.addEventListener("mouseover", onMouseOver(codeMirror)); + + const toggleFoldMarkerVisibility = () => { + if (node instanceof HTMLElement) { + node + .querySelectorAll(".CodeMirror-guttermarker-subtle") + .forEach(elem => { + elem.classList.toggle("visible"); + }); + } + }; - const codeMirrorGutter = codeMirror.getGutterElement(); - codeMirrorGutter.addEventListener("mouseleave", toggleFoldMarkerVisibility); - codeMirrorGutter.addEventListener("mouseenter", toggleFoldMarkerVisibility); - codeMirrorWrapper.addEventListener("contextmenu", event => - this.openMenu(event) - ); + const codeMirrorGutter = codeMirror.getGutterElement(); + codeMirrorGutter.addEventListener( + "mouseleave", + toggleFoldMarkerVisibility + ); + codeMirrorGutter.addEventListener( + "mouseenter", + toggleFoldMarkerVisibility + ); + codeMirrorWrapper.addEventListener("contextmenu", event => + this.openMenu(event) + ); - codeMirror.on("scroll", this.onEditorScroll); - this.onEditorScroll(); + codeMirror.on("scroll", this.onEditorScroll); + this.onEditorScroll(); + } this.setState({ editor }); return editor; } componentDidMount() { - const { shortcuts } = this.context; + if (!features.codemirrorNext) { + const { shortcuts } = this.context; - shortcuts.on(L10N.getStr("toggleBreakpoint.key"), this.onToggleBreakpoint); - shortcuts.on( - L10N.getStr("toggleCondPanel.breakpoint.key"), - this.onToggleConditionalPanel - ); - shortcuts.on( - L10N.getStr("toggleCondPanel.logPoint.key"), - this.onToggleConditionalPanel - ); - shortcuts.on( - L10N.getStr("sourceTabs.closeTab.key"), - this.onCloseShortcutPress - ); - shortcuts.on("Esc", this.onEscape); + shortcuts.on( + L10N.getStr("toggleBreakpoint.key"), + this.onToggleBreakpoint + ); + shortcuts.on( + L10N.getStr("toggleCondPanel.breakpoint.key"), + this.onToggleConditionalPanel + ); + shortcuts.on( + L10N.getStr("toggleCondPanel.logPoint.key"), + this.onToggleConditionalPanel + ); + shortcuts.on( + L10N.getStr("sourceTabs.closeTab.key"), + this.onCloseShortcutPress + ); + shortcuts.on("Esc", this.onEscape); + } } onCloseShortcutPress = e => { @@ -260,22 +281,24 @@ class Editor extends PureComponent { }; componentWillUnmount() { - const { editor } = this.state; - if (editor) { - editor.destroy(); - editor.codeMirror.off("scroll", this.onEditorScroll); - this.setState({ editor: null }); - } + if (!features.codemirrorNext) { + const { editor } = this.state; + if (editor) { + editor.destroy(); + editor.codeMirror.off("scroll", this.onEditorScroll); + this.setState({ editor: null }); + } - const { shortcuts } = this.context; - shortcuts.off(L10N.getStr("sourceTabs.closeTab.key")); - shortcuts.off(L10N.getStr("toggleBreakpoint.key")); - shortcuts.off(L10N.getStr("toggleCondPanel.breakpoint.key")); - shortcuts.off(L10N.getStr("toggleCondPanel.logPoint.key")); + const { shortcuts } = this.context; + shortcuts.off(L10N.getStr("sourceTabs.closeTab.key")); + shortcuts.off(L10N.getStr("toggleBreakpoint.key")); + shortcuts.off(L10N.getStr("toggleCondPanel.breakpoint.key")); + shortcuts.off(L10N.getStr("toggleCondPanel.logPoint.key")); - if (this.abortController) { - this.abortController.abort(); - this.abortController = null; + if (this.abortController) { + this.abortController.abort(); + this.abortController = null; + } } } @@ -542,7 +565,7 @@ class Editor extends PureComponent { } } - shouldScrollToLocation(nextProps, editor) { + shouldScrollToLocation(nextProps) { if ( !nextProps.selectedLocation?.line || !nextProps.selectedSourceTextContent @@ -583,12 +606,14 @@ class Editor extends PureComponent { // check if we previously had a selected source if (!selectedSource) { - this.clearEditor(); + if (!features.codemirrorNext) { + this.clearEditor(); + } return; } if (!selectedSourceTextContent?.value) { - showLoading(editor); + this.showLoadingMessage(editor); return; } @@ -602,7 +627,16 @@ class Editor extends PureComponent { return; } - showSourceText(editor, selectedSource, selectedSourceTextContent, symbols); + if (!features.codemirrorNext) { + showSourceText( + editor, + selectedSource, + selectedSourceTextContent, + symbols + ); + } else { + editor.setText(selectedSourceTextContent.value.value); + } } clearEditor() { @@ -611,7 +645,9 @@ class Editor extends PureComponent { return; } - clearEditor(editor); + const doc = editor.createDocument("", { name: "text" }); + editor.replaceDocument(doc); + resetLineNumberFormat(editor); } showErrorMessage(msg) { @@ -620,7 +656,37 @@ class Editor extends PureComponent { return; } - showErrorMessage(editor, msg); + let error; + if (msg.includes("WebAssembly binary source is not available")) { + error = L10N.getStr("wasmIsNotAvailable"); + } else { + error = L10N.getFormatStr("errorLoadingText3", msg); + } + if (!features.codemirrorNext) { + const doc = editor.createDocument(error, { name: "text" }); + editor.replaceDocument(doc); + resetLineNumberFormat(editor); + } else { + editor.setText(error); + } + } + + showLoadingMessage(editor) { + if (!features.codemirrorNext) { + // Create the "loading message" document only once + let doc = getDocument("loading"); + if (!doc) { + doc = editor.createDocument(L10N.getStr("loadingText"), { + name: "text", + }); + setDocument("loading", doc); + } + // `createDocument` won't be used right away in the editor, we still need to + // explicitely update it + editor.replaceDocument(doc); + } else { + editor.setText(L10N.getStr("loadingText")); + } } getInlineEditorStyles() { diff --git a/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js b/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js index 767dde9e6d..38bb318611 100644 --- a/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js +++ b/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js @@ -15,7 +15,7 @@ function createMockDocument(clear) { addLineClass: jest.fn(), removeLineClass: jest.fn(), markText: jest.fn(() => ({ clear })), - getLine: line => "", + getLine: () => "", }; return doc; diff --git a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/ConditionalPanel.spec.js.snap b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/ConditionalPanel.spec.js.snap index 58e86f5009..86d848ec3e 100644 --- a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/ConditionalPanel.spec.js.snap +++ b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/ConditionalPanel.spec.js.snap @@ -22,6 +22,8 @@ exports[`ConditionalPanel should render at location of selected breakpoint 1`] = "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -44,6 +46,8 @@ exports[`ConditionalPanel should render at location of selected breakpoint 1`] = "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -217,6 +221,8 @@ exports[`ConditionalPanel should render at location of selected breakpoint 1`] = "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -239,6 +245,8 @@ exports[`ConditionalPanel should render at location of selected breakpoint 1`] = "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", } @@ -268,6 +276,8 @@ exports[`ConditionalPanel should render with condition at selected breakpoint lo "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -290,6 +300,8 @@ exports[`ConditionalPanel should render with condition at selected breakpoint lo "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -467,6 +479,8 @@ exports[`ConditionalPanel should render with condition at selected breakpoint lo "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -489,6 +503,8 @@ exports[`ConditionalPanel should render with condition at selected breakpoint lo "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", } @@ -518,6 +534,8 @@ exports[`ConditionalPanel should render with logpoint at selected breakpoint loc "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -540,6 +558,8 @@ exports[`ConditionalPanel should render with logpoint at selected breakpoint loc "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -717,6 +737,8 @@ exports[`ConditionalPanel should render with logpoint at selected breakpoint loc "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -739,6 +761,8 @@ exports[`ConditionalPanel should render with logpoint at selected breakpoint loc "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", } diff --git a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap index a453b034ff..6c56ad33e7 100644 --- a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap +++ b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap @@ -31,6 +31,16 @@ exports[`SourceFooter Component default case should render 1`] = ` className="prettyPrint" /> </button> + <MenuButton + className="devtools-button debugger-source-map-button disabled not-mapped" + icon={true} + menuId="debugger-source-map-button" + menuOffset={-5} + menuPosition="bottom" + title="Source Map status" + > + <Component /> + </MenuButton> </div> </div> <div @@ -77,6 +87,16 @@ exports[`SourceFooter Component move cursor should render new cursor position 1` className="prettyPrint" /> </button> + <MenuButton + className="devtools-button debugger-source-map-button disabled not-mapped" + icon={true} + menuId="debugger-source-map-button" + menuOffset={-5} + menuPosition="bottom" + title="Source Map status" + > + <Component /> + </MenuButton> </div> </div> <div diff --git a/devtools/client/debugger/src/components/PrimaryPanes/Outline.js b/devtools/client/debugger/src/components/PrimaryPanes/Outline.js index 79ebf7a38e..d52ed8ff40 100644 --- a/devtools/client/debugger/src/components/PrimaryPanes/Outline.js +++ b/devtools/client/debugger/src/components/PrimaryPanes/Outline.js @@ -82,6 +82,7 @@ export class Outline extends Component { selectedLocation: PropTypes.object.isRequired, getFunctionSymbols: PropTypes.func.isRequired, getClassSymbols: PropTypes.func.isRequired, + selectedSourceTextContent: PropTypes.object, canFetchSymbols: PropTypes.bool, }; } @@ -94,7 +95,8 @@ export class Outline extends Component { } componentDidUpdate(prevProps) { - const { cursorPosition, selectedLocation, canFetchSymbols } = this.props; + const { cursorPosition, selectedSourceTextContent, canFetchSymbols } = + this.props; if (cursorPosition && cursorPosition !== prevProps.cursorPosition) { this.setFocus(cursorPosition); } @@ -106,8 +108,11 @@ export class Outline extends Component { this.focusedElRef.scrollIntoView({ block: "center" }); } - // Lets make sure the source text has been loaded and is different - if (canFetchSymbols && prevProps.selectedLocation !== selectedLocation) { + // Lets make sure the source text has been loaded and it is different + if ( + canFetchSymbols && + prevProps.selectedSourceTextContent !== selectedSourceTextContent + ) { this.getClassAndFunctionSymbols(); } } @@ -133,8 +138,8 @@ export class Outline extends Component { } // Find items that enclose the selected location - const enclosedItems = [...classes, ...functions].filter( - ({ name, location }) => containsPosition(location, cursorPosition) + const enclosedItems = [...classes, ...functions].filter(({ location }) => + containsPosition(location, cursorPosition) ); if (!enclosedItems.length) { @@ -360,7 +365,7 @@ export class Outline extends Component { div( null, React.createElement(OutlineFilter, { - filter: filter, + filter, updateFilter: this.updateFilter, }), this.renderFunctions(functions), @@ -373,6 +378,7 @@ export class Outline extends Component { const mapStateToProps = state => { const selectedSourceTextContent = getSelectedSourceTextContent(state); return { + selectedSourceTextContent, selectedLocation: getSelectedLocation(state), canFetchSymbols: selectedSourceTextContent && isFulfilled(selectedSourceTextContent), diff --git a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js index 68b08aed2b..b5a99316f8 100644 --- a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js +++ b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js @@ -16,7 +16,6 @@ import { getEditor } from "../../utils/editor/index"; import { searchKeys } from "../../constants"; import { getRelativePath } from "../../utils/sources-tree/utils"; -import { getFormattedSourceId } from "../../utils/source"; import { getProjectSearchQuery, getNavigateCounter, @@ -265,7 +264,7 @@ export class ProjectSearch extends Component { }, file.location.source.url ? getRelativePath(file.location.source.url) - : getFormattedSourceId(file.location.source.id) + : file.location.source.shortName ), span( { @@ -353,7 +352,7 @@ export class ProjectSearch extends Component { autoExpandAll: true, autoExpandDepth: 1, autoExpandNodeChildrenLimit: 100, - getParent: item => null, + getParent: () => null, getPath: getFilePath, renderItem: this.renderItem, focused: this.state.focusedItem, diff --git a/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js b/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js index fd5ceca46d..575d714ba5 100644 --- a/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js +++ b/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js @@ -19,7 +19,6 @@ import actions from "../../actions/index"; import { sourceTypes } from "../../utils/source"; import { createLocation } from "../../utils/location"; -import { safeDecodeItemName } from "../../utils/sources-tree/utils"; const classnames = require("resource://devtools/client/shared/classnames.js"); @@ -48,7 +47,7 @@ class SourceTreeItem extends Component { } } - onClick = e => { + onClick = () => { const { item, focusItem, selectSourceItem } = this.props; focusItem(item); @@ -147,19 +146,14 @@ class SourceTreeItem extends Component { ); } if (item.type == "group") { - return safeDecodeItemName(item.groupName); + return item.groupName; } if (item.type == "directory") { const parentItem = this.props.getParent(item); - return safeDecodeItemName( - item.path.replace(parentItem.path, "").replace(/^\//, "") - ); + return item.path.replace(parentItem.path, "").replace(/^\//, ""); } if (item.type == "source") { - const { displayURL } = item.source; - const name = - displayURL.filename + (displayURL.search ? displayURL.search : ""); - return safeDecodeItemName(name); + return item.source.longName; } return null; diff --git a/devtools/client/debugger/src/components/QuickOpenModal.js b/devtools/client/debugger/src/components/QuickOpenModal.js index aa3d4f73b6..438592296d 100644 --- a/devtools/client/debugger/src/components/QuickOpenModal.js +++ b/devtools/client/debugger/src/components/QuickOpenModal.js @@ -377,7 +377,7 @@ export class QuickOpenModal extends Component { isSourceSearch = () => this.isSourcesQuery() || this.isGotoSourceQuery(); /* eslint-disable react/no-danger */ - renderHighlight(candidateString, query, name) { + renderHighlight(candidateString, query) { const options = { wrap: { tagOpen: '<mark class="highlight">', @@ -444,7 +444,7 @@ export class QuickOpenModal extends Component { handleClose: this.closeModal, }, React.createElement(SearchInput, { - query: query, + query, hasPrefix: true, count: this.getResultCount(), placeholder: L10N.getStr("sourceSearch.search2"), @@ -454,7 +454,7 @@ export class QuickOpenModal extends Component { onChange: this.onChange, onKeyDown: this.onKeyDown, handleClose: this.closeModal, - expanded: expanded, + expanded, showClose: false, searchKey: searchKeys.QUICKOPEN_SEARCH, showExcludePatterns: false, @@ -466,11 +466,11 @@ export class QuickOpenModal extends Component { results && React.createElement(ResultList, { key: "results", - items: items, + items, selected: selectedIndex, selectItem: this.selectResultItem, ref: "resultList", - expanded: expanded, + expanded, ...(this.isSourceSearch() ? SIZE_BIG : SIZE_DEFAULT), }) ); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js index 78cc530cff..a4a5010c48 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js @@ -12,7 +12,6 @@ import actions from "../../../actions/index"; import { getTruncatedFileName, getDisplayPath, - getSourceQueryString, getFileURL, } from "../../../utils/source"; import { createLocation } from "../../../utils/location"; @@ -40,7 +39,6 @@ class BreakpointHeading extends PureComponent { const { sources, source, selectSource } = this.props; const path = getDisplayPath(source, sources); - const query = getSourceQueryString(source); return div( { className: "breakpoint-heading", @@ -67,7 +65,7 @@ class BreakpointHeading extends PureComponent { { className: "filename", }, - getTruncatedFileName(source, query), + getTruncatedFileName(source), path && span(null, `../${path}/..`) ) ); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js index 31ff3f44a3..caec23b848 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js @@ -21,7 +21,7 @@ export default function ExceptionOption({ input({ type: "checkbox", checked: isChecked, - onChange: onChange, + onChange, }), div( { diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js index 0f5d6f7ae3..1f5e08cd7e 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js @@ -17,6 +17,7 @@ import { getSelectedLocation } from "../../../utils/selected-location"; import { createHeadlessEditor } from "../../../utils/editor/create-editor"; import { makeBreakpointId } from "../../../utils/breakpoint/index"; +import { features } from "../../../utils/prefs"; import { getSelectedSource, @@ -44,7 +45,7 @@ class Breakpoints extends Component { this.removeEditor(); } - getEditor() { + getHeadlessEditor() { if (!this.headlessEditor) { this.headlessEditor = createHeadlessEditor(); } @@ -119,7 +120,7 @@ class Breakpoints extends Component { return null; } - const editor = this.getEditor(); + const editor = this.getHeadlessEditor(); const sources = breakpointSources.map(({ source }) => source); return div( { @@ -153,7 +154,7 @@ class Breakpoints extends Component { className: "pane", }, this.renderExceptionsOptions(), - this.renderBreakpoints() + !features.codemirrorNext ? this.renderBreakpoints() : null ); } } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js index deae156a40..3dca62d48a 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js @@ -231,7 +231,7 @@ class CommandBar extends Component { formatKey("trace"), this.props.logMethod ), - onClick: event => { + onClick: () => { this.props.toggleTracing(); }, onContextMenu: event => { @@ -362,7 +362,7 @@ class CommandBar extends Component { MenuButton, { menuId: "debugger-settings-menu-button", - toolboxDoc: toolboxDoc, + toolboxDoc, className: "devtools-button command-bar-button debugger-settings-menu-button", title: L10N.getStr("settings.button.label"), diff --git a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js index ce7eabf89d..00c885ec16 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js @@ -116,11 +116,11 @@ class EventListeners extends Component { } }; - onFocus = event => { + onFocus = () => { this.setState({ focused: true }); }; - onBlur = event => { + onBlur = () => { this.setState({ focused: false }); }; @@ -136,7 +136,7 @@ class EventListeners extends Component { className: classnames("event-search-input", { focused, }), - placeholder: placeholder, + placeholder, value: searchText, onChange: this.onInputChange, onKeyDown: this.onKeyDown, @@ -233,7 +233,7 @@ class EventListeners extends Component { indeterminate ? false : e.target.checked ); }, - checked: checked, + checked, ref: el => el && (el.indeterminate = indeterminate), }), span( diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js index be05c7327c..89b1f651ce 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js @@ -296,7 +296,7 @@ class Expressions extends Component { roots: [root], autoExpandDepth: 0, disableWrap: true, - openLink: openLink, + openLink, createElement: this.createElement, onDoubleClick: (items, { depth }) => { if (depth === 0) { @@ -374,7 +374,7 @@ class Expressions extends Component { input({ className: "input-expression", type: "text", - placeholder: L10N.getStr("expressions.placeholder"), + placeholder: L10N.getStr("expressions.placeholder2"), onChange: this.handleChange, onBlur: this.hideInput, onKeyDown: this.handleKeyDown, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js index 0c81d8afb4..2c5cc679bf 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js @@ -7,7 +7,7 @@ import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import AccessibleImage from "../../shared/AccessibleImage"; import { formatDisplayName } from "../../../utils/pause/frames/index"; -import { getFilename, getFileURL } from "../../../utils/source"; +import { getFileURL } from "../../../utils/source"; import FrameIndent from "./FrameIndent"; const classnames = require("resource://devtools/client/shared/classnames.js"); @@ -52,7 +52,7 @@ const FrameLocation = memo( const location = getFrameLocation(frame, shouldDisplayOriginalLocation); const filename = displayFullUrl ? getFileURL(location.source, false) - : getFilename(location.source); + : location.source.shortName; return React.createElement( "span", { @@ -124,7 +124,7 @@ export default class FrameComponent extends Component { this.props.showFrameContextMenu(event, frame); } - onMouseDown(e, frame, selectedFrame) { + onMouseDown(e, frame) { if (e.button !== 0) { return; } @@ -132,7 +132,7 @@ export default class FrameComponent extends Component { this.props.selectFrame(frame); } - onKeyUp(event, frame, selectedFrame) { + onKeyUp(event, frame) { if (event.key != "Enter") { return; } @@ -167,12 +167,12 @@ export default class FrameComponent extends Component { { role: "listitem", key: frame.id, - className: className, + className, onMouseDown: e => this.onMouseDown(e, frame, selectedFrame), onKeyUp: e => this.onKeyUp(e, frame, selectedFrame), onContextMenu: disableContextMenu ? null : e => this.onContextMenu(e), tabIndex: 0, - title: title, + title, }, frame.asyncCause && React.createElement( diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js index ab9f7073a7..a4ec7f72da 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js @@ -110,18 +110,18 @@ export default class Group extends Component { }, group.map(frame => React.createElement(FrameComponent, { - frame: frame, - showFrameContextMenu: showFrameContextMenu, + frame, + showFrameContextMenu, hideLocation: true, key: frame.id, - selectedFrame: selectedFrame, - selectFrame: selectFrame, - selectLocation: selectLocation, + selectedFrame, + selectFrame, + selectLocation, shouldMapDisplayName: false, - displayFullUrl: displayFullUrl, - getFrameTitle: getFrameTitle, - disableContextMenu: disableContextMenu, - panel: panel, + displayFullUrl, + getFrameTitle, + disableContextMenu, + panel, isInGroup: true, }) ) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js index d83b413a01..ff60270024 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js @@ -115,28 +115,28 @@ class Frames extends Component { frameOrGroup.id ? React.createElement(FrameComponent, { frame: frameOrGroup, - showFrameContextMenu: showFrameContextMenu, - selectFrame: selectFrame, - selectLocation: selectLocation, - selectedFrame: selectedFrame, - shouldDisplayOriginalLocation: shouldDisplayOriginalLocation, + showFrameContextMenu, + selectFrame, + selectLocation, + selectedFrame, + shouldDisplayOriginalLocation, key: String(frameOrGroup.id), - displayFullUrl: displayFullUrl, - getFrameTitle: getFrameTitle, - disableContextMenu: disableContextMenu, - panel: panel, + displayFullUrl, + getFrameTitle, + disableContextMenu, + panel, }) : React.createElement(Group, { group: frameOrGroup, - showFrameContextMenu: showFrameContextMenu, - selectFrame: selectFrame, - selectLocation: selectLocation, - selectedFrame: selectedFrame, + showFrameContextMenu, + selectFrame, + selectLocation, + selectedFrame, key: frameOrGroup[0].id, - displayFullUrl: displayFullUrl, - getFrameTitle: getFrameTitle, - disableContextMenu: disableContextMenu, - panel: panel, + displayFullUrl, + getFrameTitle, + disableContextMenu, + panel, }) ) ); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap index 90a5b1f906..c4e6722629 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap @@ -36,6 +36,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -57,6 +59,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -82,6 +86,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -103,6 +109,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -135,6 +143,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -178,6 +188,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -199,6 +211,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -224,6 +238,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -245,6 +261,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -277,6 +295,8 @@ exports[`Frame getFrameTitle 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js", }, @@ -328,6 +348,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -349,6 +371,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -375,6 +399,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -396,6 +422,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -428,6 +456,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -471,6 +501,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -492,6 +524,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -518,6 +552,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -539,6 +575,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -571,6 +609,8 @@ exports[`Frame library frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "backbone.js", + "shortName": "backbone.js", "thread": "FakeThread", "url": "backbone.js", }, @@ -622,6 +662,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -643,6 +685,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -668,6 +712,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -689,6 +735,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -721,6 +769,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -764,6 +814,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -785,6 +837,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -810,6 +864,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -831,6 +887,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -863,6 +921,8 @@ exports[`Frame user frame (not selected) 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -914,6 +974,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -935,6 +997,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -960,6 +1024,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -981,6 +1047,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1013,6 +1081,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1056,6 +1126,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1077,6 +1149,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1102,6 +1176,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1123,6 +1199,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, @@ -1155,6 +1233,8 @@ exports[`Frame user frame 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "foo-view.js", + "shortName": "foo-view.js", "thread": "FakeThread", "url": "foo-view.js", }, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap index 97c4c2ad1a..21a5321ba1 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap @@ -37,6 +37,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -58,6 +60,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -84,6 +88,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -105,6 +111,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -137,6 +145,8 @@ exports[`Group displays a group 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -199,6 +209,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -220,6 +232,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -246,6 +260,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -267,6 +283,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -299,6 +317,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -348,6 +368,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -369,6 +391,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -395,6 +419,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -416,6 +442,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -448,6 +476,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -485,6 +515,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -506,6 +538,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -532,6 +566,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -553,6 +589,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -585,6 +623,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -620,6 +660,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -641,6 +683,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -667,6 +711,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -688,6 +734,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -720,6 +768,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -757,6 +807,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -778,6 +830,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -804,6 +858,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -825,6 +881,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -857,6 +915,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -892,6 +952,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -913,6 +975,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -939,6 +1003,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -960,6 +1026,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -992,6 +1060,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1029,6 +1099,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1050,6 +1122,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1076,6 +1150,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1097,6 +1173,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1129,6 +1207,8 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1181,6 +1261,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1202,6 +1284,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1228,6 +1312,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1249,6 +1335,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1281,6 +1369,8 @@ exports[`Group renders group with anonymous functions 1`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1343,6 +1433,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1364,6 +1456,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1390,6 +1484,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1411,6 +1507,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1443,6 +1541,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1492,6 +1592,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1513,6 +1615,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1539,6 +1643,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1560,6 +1666,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1592,6 +1700,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "mahscripts.js", + "shortName": "mahscripts.js", "thread": "FakeThread", "url": "http://myfile.com/mahscripts.js", }, @@ -1628,6 +1738,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1649,6 +1761,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1675,6 +1789,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1696,6 +1812,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1728,6 +1846,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1763,6 +1883,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1784,6 +1906,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1810,6 +1934,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1831,6 +1957,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1863,6 +1991,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -1899,6 +2029,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1920,6 +2052,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1946,6 +2080,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1967,6 +2103,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -1999,6 +2137,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2034,6 +2174,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2055,6 +2197,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2081,6 +2225,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2102,6 +2248,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2134,6 +2282,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "back.js", + "shortName": "back.js", "thread": "FakeThread", "url": "http://myfile.com/back.js", }, @@ -2170,6 +2320,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2191,6 +2343,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2217,6 +2371,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2238,6 +2394,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, @@ -2270,6 +2428,8 @@ exports[`Group renders group with anonymous functions 2`] = ` "isOriginal": false, "isPrettyPrinted": false, "isWasm": false, + "longName": "url", + "shortName": "url", "thread": "FakeThread", "url": "url", }, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js index 135decd254..65e4d19032 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js @@ -307,7 +307,7 @@ class Scopes extends PureComponent { dimTopLevelWindow: true, frame: selectedFrame, mayUseCustomFormatter: true, - openLink: openLink, + openLink, onDOMNodeClick: grip => openElementInInspector(grip), onInspectIconClick: grip => openElementInInspector(grip), onDOMNodeMouseOver: grip => highlightDomElement(grip), @@ -315,7 +315,7 @@ class Scopes extends PureComponent { onContextMenu: this.onContextMenu, setExpanded: (path, expand) => setExpandedScope(selectedFrame, path, expand), - initiallyExpanded: initiallyExpanded, + initiallyExpanded, renderItemActions: this.renderWatchpointButton, shouldRenderTooltip: true, }) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Threads.js b/devtools/client/debugger/src/components/SecondaryPanes/Threads.js index 2d21a1dcc5..f1426c95cb 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Threads.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Threads.js @@ -25,7 +25,7 @@ export class Threads extends Component { }, threads.map(thread => React.createElement(Thread, { - thread: thread, + thread, key: thread.actor, }) ) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js b/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js index 9774255dcd..f0b86a5f5c 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js @@ -164,7 +164,7 @@ class XHRBreakpoints extends Component { this.setState({ focused: true, editing: true }); }; - onMouseDown = e => { + onMouseDown = () => { this.setState({ editing: false, clickedOnFormElement: true }); }; @@ -205,12 +205,12 @@ class XHRBreakpoints extends Component { className: classnames("xhr-input-container xhr-input-form", { focused, }), - onSubmit: onSubmit, + onSubmit, }, input({ className: "xhr-input-url", type: "text", - placeholder: placeholder, + placeholder, onChange: this.handleChange, onBlur: this.hideInput, onFocus: this.onFocus, @@ -262,7 +262,7 @@ class XHRBreakpoints extends Component { className: "xhr-container", key: `${path}-${method}`, title: path, - onDoubleClick: (items, options) => this.editExpression(index), + onDoubleClick: () => this.editExpression(index), }, label( null, @@ -290,7 +290,7 @@ class XHRBreakpoints extends Component { className: "xhr-container__close-btn", }, React.createElement(CloseButton, { - handleClick: e => removeXHRBreakpoint(index), + handleClick: () => removeXHRBreakpoint(index), }) ) ) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/index.js b/devtools/client/debugger/src/components/SecondaryPanes/index.js index 20830afc12..52d0d3298e 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/index.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/index.js @@ -52,7 +52,7 @@ const classnames = require("resource://devtools/client/shared/classnames.js"); function debugBtn(onClick, type, className, tooltip) { return button( { - onClick: onClick, + onClick, className: `${type} ${className}`, key: type, title: tooltip, @@ -136,7 +136,7 @@ class SecondaryPanes extends Component { }, "plus", "active", - L10N.getStr("expressions.placeholder") + L10N.getStr("expressions.placeholder2") ) ); return buttons; @@ -214,7 +214,7 @@ class SecondaryPanes extends Component { input({ type: "checkbox", checked: mapScopesEnabled ? "checked" : "", - onChange: e => this.props.toggleMapScopes(), + onChange: () => this.props.toggleMapScopes(), }), L10N.getStr("scopes.showOriginalScopes") ), @@ -249,7 +249,7 @@ class SecondaryPanes extends Component { input({ type: "checkbox", checked: logEventBreakpoints ? "checked" : "", - onChange: e => this.props.toggleEventLogging(), + onChange: () => this.props.toggleEventLogging(), }), L10N.getStr("eventlisteners.log") ) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js index 532c95e4ad..de7ab02ebe 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js @@ -225,7 +225,7 @@ describe("XHR Breakpoints", function () { } // check each expected XHR Method to see if they match the actual methods - expectedXHRMethods.forEach((expectedMethod, i) => { + expectedXHRMethods.forEach(expectedMethod => { function compareMethods(actualMethod) { return expectedMethod === actualMethod; } diff --git a/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js b/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js index 4b0b52e186..430feed904 100644 --- a/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js +++ b/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js @@ -22,9 +22,9 @@ export function debugBtn( CommandBarButton, { className: classnames(type, className), - disabled: disabled, + disabled, key: type, - onClick: onClick, + onClick, pressed: ariaPressed, title: tooltip, }, diff --git a/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js index 5e448881d9..60a500776c 100644 --- a/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js +++ b/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js @@ -11,7 +11,7 @@ describe("CloseButton", () => { const tooltip = "testTooltip"; const wrapper = shallow( React.createElement(CloseButton, { - tooltip: tooltip, + tooltip, handleClick: () => {}, }) ); diff --git a/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js index 41537cf8e4..cad3dc1f6b 100644 --- a/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js +++ b/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js @@ -21,7 +21,7 @@ describe("CommandBarButton", () => { const children = [1, 2, 3, 4]; const wrapper = shallow( React.createElement(CommandBarButton, { - children: children, + children, className: "", }) ); diff --git a/devtools/client/debugger/src/components/shared/Dropdown.js b/devtools/client/debugger/src/components/shared/Dropdown.js index a47eef9534..69727b032a 100644 --- a/devtools/client/debugger/src/components/shared/Dropdown.js +++ b/devtools/client/debugger/src/components/shared/Dropdown.js @@ -21,7 +21,7 @@ export class Dropdown extends Component { }; } - toggleDropdown = e => { + toggleDropdown = () => { this.setState(prevState => ({ dropdownShown: !prevState.dropdownShown, })); diff --git a/devtools/client/debugger/src/components/shared/Popover.js b/devtools/client/debugger/src/components/shared/Popover.js index 8748e36418..b81fd7e89e 100644 --- a/devtools/client/debugger/src/components/shared/Popover.js +++ b/devtools/client/debugger/src/components/shared/Popover.js @@ -255,7 +255,6 @@ class Popover extends Component { React.createElement(SmartGap, { token: this.props.target, preview: this.$tooltip || this.$popover, - type: this.props.type, gapHeight: this.gapHeight, coords: this.state.coords, offset: this.$gap.getBoundingClientRect().left, diff --git a/devtools/client/debugger/src/components/shared/ResultList.js b/devtools/client/debugger/src/components/shared/ResultList.js index 6b29de51f4..fb921612e7 100644 --- a/devtools/client/debugger/src/components/shared/ResultList.js +++ b/devtools/client/debugger/src/components/shared/ResultList.js @@ -93,7 +93,7 @@ export default class ResultList extends Component { ref: this.ref, className: classnames("result-list", size), id: "result-list", - role: role, + role, "aria-live": "polite", }, items.map(this.renderListItem) diff --git a/devtools/client/debugger/src/components/shared/SmartGap.js b/devtools/client/debugger/src/components/shared/SmartGap.js index d76d018987..5810aea6ea 100644 --- a/devtools/client/debugger/src/components/shared/SmartGap.js +++ b/devtools/client/debugger/src/components/shared/SmartGap.js @@ -109,7 +109,6 @@ function getSmartGapDimensions( export default function SmartGap({ token, preview, - type, gapHeight, coords, offset, diff --git a/devtools/client/debugger/src/components/shared/tests/Popover.spec.js b/devtools/client/debugger/src/components/shared/tests/Popover.spec.js index 7150f4afe8..0febe5dcd5 100644 --- a/devtools/client/debugger/src/components/shared/tests/Popover.spec.js +++ b/devtools/client/debugger/src/components/shared/tests/Popover.spec.js @@ -53,10 +53,10 @@ describe("Popover", () => { React.createElement( Popover, { - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, - editorRef: editorRef, - targetPosition: targetPosition, + onMouseLeave, + onKeyDown, + editorRef, + targetPosition, mouseout: () => {}, target: targetRef, }, @@ -69,10 +69,10 @@ describe("Popover", () => { Popover, { type: "tooltip", - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, - editorRef: editorRef, - targetPosition: targetPosition, + onMouseLeave, + onKeyDown, + editorRef, + targetPosition, mouseout: () => {}, target: targetRef, }, @@ -94,10 +94,10 @@ describe("Popover", () => { React.createElement( Popover, { - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, - editorRef: editorRef, - targetPosition: targetPosition, + onMouseLeave, + onKeyDown, + editorRef, + targetPosition, mouseout: () => {}, target: targetRef, }, @@ -113,10 +113,10 @@ describe("Popover", () => { Popover, { type: "tooltip", - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, - editorRef: editorRef, - targetPosition: targetPosition, + onMouseLeave, + onKeyDown, + editorRef, + targetPosition, mouseout: () => {}, target: targetRef, }, @@ -153,8 +153,8 @@ describe("Popover", () => { Popover, { type: "tooltip", - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, + onMouseLeave, + onKeyDown, editorRef: editor, targetPosition: target, mouseout: () => {}, @@ -195,8 +195,8 @@ describe("Popover", () => { Popover, { type: "tooltip", - onMouseLeave: onMouseLeave, - onKeyDown: onKeyDown, + onMouseLeave, + onKeyDown, editorRef: editor, targetPosition: target, mouseout: () => {}, diff --git a/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js b/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js index c4c3990771..d7e1e5805c 100644 --- a/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js +++ b/devtools/client/debugger/src/components/shared/tests/SearchInput.spec.js @@ -17,7 +17,7 @@ describe("SearchInput", () => { }); const wrapper = shallow( React.createElement(SearchInput, { - store: store, + store, query: "", count: 5, placeholder: "A placeholder", diff --git a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap index 1c3589a6f8..6379668d6e 100644 --- a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap +++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap @@ -105,7 +105,6 @@ exports[`Popover mount popover 1`] = ` "getBoundingClientRect": [Function], } } - type="popover" > <svg style={ @@ -234,7 +233,6 @@ exports[`Popover mount tooltip 1`] = ` "getBoundingClientRect": [Function], } } - type="tooltip" > <svg style={ @@ -359,7 +357,6 @@ exports[`Popover render (tooltip) 1`] = ` "getBoundingClientRect": [Function], } } - type="tooltip" > <svg style={ @@ -504,7 +501,6 @@ exports[`Popover render 1`] = ` "getBoundingClientRect": [Function], } } - type="popover" > <svg style={ diff --git a/devtools/client/debugger/src/components/test/QuickOpenModal.spec.js b/devtools/client/debugger/src/components/test/QuickOpenModal.spec.js index 74bc7c75bc..2700960c37 100644 --- a/devtools/client/debugger/src/components/test/QuickOpenModal.spec.js +++ b/devtools/client/debugger/src/components/test/QuickOpenModal.spec.js @@ -130,6 +130,7 @@ describe("QuickOpenModal", () => { displayedSources: [ { url: "mozilla.com", + shortName: "mozilla.com", displayURL: getDisplayURL("mozilla.com"), }, ], @@ -147,6 +148,7 @@ describe("QuickOpenModal", () => { value: "mozilla.com", source: { url: "mozilla.com", + shortName: "mozilla.com", displayURL: getDisplayURL("mozilla.com"), }, }, |