diff --git a/devtools/client/debugger/images/sourcemap.svg b/devtools/client/debugger/images/sourcemap.svg deleted file mode 100644 index a760dc6edcfd..000000000000 --- a/devtools/client/debugger/images/sourcemap.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - \ No newline at end of file diff --git a/devtools/client/debugger/panel.js b/devtools/client/debugger/panel.js index 9d7d9062825c..bb38090b0d5c 100644 --- a/devtools/client/debugger/panel.js +++ b/devtools/client/debugger/panel.js @@ -100,10 +100,10 @@ class DebuggerPanel { return this; } - async _onDebuggerStateChange(state, oldState) { + _onDebuggerStateChange(state, oldState) { const { getCurrentThread } = this._selectors; - const currentThreadActorID = getCurrentThread(state); + const currentThreadActorID = getCurrentThread(state); if ( currentThreadActorID && currentThreadActorID !== getCurrentThread(oldState) @@ -112,20 +112,6 @@ class DebuggerPanel { this.commands.client.getFrontByID(currentThreadActorID); this.toolbox.selectTarget(threadFront?.targetFront.actorID); } - - this.toolbox.emit( - "show-original-variable-mapping-warnings", - this.shouldShowOriginalVariableMappingWarnings() - ); - } - - shouldShowOriginalVariableMappingWarnings() { - const { getSelectedSource, isMapScopesEnabled } = this._selectors; - if (!this.isPaused() || isMapScopesEnabled(this._getState())) { - return false; - } - const selectedSource = getSelectedSource(this._getState()); - return selectedSource?.isOriginal && !selectedSource?.isPrettyPrinted; } getVarsForTests() { diff --git a/devtools/client/debugger/src/components/App.css b/devtools/client/debugger/src/components/App.css index 796bf8457481..968bdeb98f85 100644 --- a/devtools/client/debugger/src/components/App.css +++ b/devtools/client/debugger/src/components/App.css @@ -56,29 +56,6 @@ button:hover { .editor-container { width: 100%; - display: grid; - grid-template-areas: - "editor-header" - "editor " - "notification " - "editor-footer"; - grid-template-rows: - var(--editor-header-height) - 1fr - auto - var(--editor-footer-height); - max-height: 100%; - overflow-y: auto; -} - -.editor-notification-footer { - background: var(--theme-warning-background); - border-top: 1px solid var(--theme-warning-border); - color: var(--theme-warning-color); - padding: 0.5em; - gap: 8px; - grid-area: notification; - display: flex; } /* Utils */ diff --git a/devtools/client/debugger/src/components/App.js b/devtools/client/debugger/src/components/App.js index 2bcc2e69e2da..e21a494cce87 100644 --- a/devtools/client/debugger/src/components/App.js +++ b/devtools/client/debugger/src/components/App.js @@ -3,13 +3,12 @@ * file, You can obtain one at . */ import React, { Component } from "react"; -import { div, main, span } from "react-dom-factories"; +import { div, main } from "react-dom-factories"; import PropTypes from "prop-types"; import { connect } from "../utils/connect"; import { prefs } from "../utils/prefs"; import { primaryPaneTabs } from "../constants"; import actions from "../actions"; -import AccessibleImage from "./shared/AccessibleImage"; import { getSelectedSource, @@ -17,8 +16,6 @@ import { getActiveSearch, getQuickOpenEnabled, getOrientation, - getIsCurrentThreadPaused, - isMapScopesEnabled, } from "../selectors"; const KeyShortcuts = require("devtools/client/shared/key-shortcuts"); @@ -71,7 +68,6 @@ class App extends Component { setPrimaryPaneTab: PropTypes.func.isRequired, startPanelCollapsed: PropTypes.bool.isRequired, toolboxDoc: PropTypes.object.isRequired, - showOriginalVariableMappingWarning: PropTypes.bool, }; } @@ -207,23 +203,6 @@ class App extends Component { } } - renderEditorNotificationBar() { - if (this.props.showOriginalVariableMappingWarning) { - return div( - { className: "editor-notification-footer", "aria-role": "status" }, - span( - { className: "info icon" }, - React.createElement(AccessibleImage, { className: "sourcemap" }) - ), - L10N.getFormatStr( - "editorNotificationFooter.noOriginalScopes", - L10N.getStr("scopes.showOriginalScopes") - ) - ); - } - return null; - } - renderEditorPane = () => { const { startPanelCollapsed, endPanelCollapsed } = this.props; const { endPanelSize, startPanelSize } = this.state; @@ -251,7 +230,6 @@ class App extends Component { toggleShortcutsModal: () => this.toggleShortcutsModal(), }) : null, - this.renderEditorNotificationBar(), React.createElement(EditorFooter, { horizontal, }) @@ -350,27 +328,14 @@ App.childContextTypes = { fluentBundles: PropTypes.array, }; -const mapStateToProps = state => { - const selectedSource = getSelectedSource(state); - const mapScopeEnabled = isMapScopesEnabled(state); - const isPaused = getIsCurrentThreadPaused(state); - - const showOriginalVariableMappingWarning = - isPaused && - selectedSource?.isOriginal && - !selectedSource.isPrettyPrinted && - !mapScopeEnabled; - - return { - showOriginalVariableMappingWarning, - selectedSource, - startPanelCollapsed: getPaneCollapse(state, "start"), - endPanelCollapsed: getPaneCollapse(state, "end"), - activeSearch: getActiveSearch(state), - quickOpenEnabled: getQuickOpenEnabled(state), - orientation: getOrientation(state), - }; -}; +const mapStateToProps = state => ({ + selectedSource: getSelectedSource(state), + startPanelCollapsed: getPaneCollapse(state, "start"), + endPanelCollapsed: getPaneCollapse(state, "end"), + activeSearch: getActiveSearch(state), + quickOpenEnabled: getQuickOpenEnabled(state), + orientation: getOrientation(state), +}); export default connect(mapStateToProps, { setActiveSearch: actions.setActiveSearch, diff --git a/devtools/client/debugger/src/components/Editor/Editor.css b/devtools/client/debugger/src/components/Editor/Editor.css index f7041f35b9ac..7ea45c629dc0 100644 --- a/devtools/client/debugger/src/components/Editor/Editor.css +++ b/devtools/client/debugger/src/components/Editor/Editor.css @@ -42,9 +42,11 @@ * BUG https://github.com/firefox-devtools/debugger/issues/63 */ .editor-wrapper { + position: absolute; width: calc(100% - 1px); - overflow-y: auto; - grid-area: editor; + top: var(--editor-header-height); + bottom: var(--editor-footer-height); + left: 0px; } html[dir="rtl"] .editor-mount { diff --git a/devtools/client/debugger/src/components/Editor/Footer.css b/devtools/client/debugger/src/components/Editor/Footer.css index 01c632dc0068..aee6c51d3849 100644 --- a/devtools/client/debugger/src/components/Editor/Footer.css +++ b/devtools/client/debugger/src/components/Editor/Footer.css @@ -5,9 +5,13 @@ .source-footer { background: var(--theme-body-background); border-top: 1px solid var(--theme-splitter-color); - grid-area: editor-footer; + position: absolute; display: flex; + bottom: 0; + left: 0; + right: 0; opacity: 1; + z-index: 1; width: calc(100% - 1px); user-select: none; height: var(--editor-footer-height); diff --git a/devtools/client/debugger/src/components/Editor/Tabs.css b/devtools/client/debugger/src/components/Editor/Tabs.css index ab70876d5ecd..d69f73ae4ca4 100644 --- a/devtools/client/debugger/src/components/Editor/Tabs.css +++ b/devtools/client/debugger/src/components/Editor/Tabs.css @@ -3,7 +3,6 @@ * file, You can obtain one at . */ .source-header { - grid-area: editor-header; display: flex; width: 100%; height: var(--editor-header-height); diff --git a/devtools/client/debugger/src/components/Editor/index.js b/devtools/client/debugger/src/components/Editor/index.js index 77cf37b8e917..382b3d73f019 100644 --- a/devtools/client/debugger/src/components/Editor/index.js +++ b/devtools/client/debugger/src/components/Editor/index.js @@ -29,7 +29,6 @@ import { getHighlightedLineRangeForSelectedSource, isSourceMapIgnoreListEnabled, isSourceOnSourceMapIgnoreList, - isMapScopesEnabled, } from "../../selectors"; // Redux actions @@ -120,7 +119,6 @@ class Editor extends PureComponent { breakableLines: PropTypes.object.isRequired, highlightedLineRange: PropTypes.object, isSourceOnIgnoreList: PropTypes.bool, - mapScopesEnabled: PropTypes.bool, }; } @@ -624,7 +622,6 @@ class Editor extends PureComponent { blackboxedRanges, isSourceOnIgnoreList, selectedSourceIsBlackBoxed, - mapScopesEnabled, } = this.props; const { editor } = this.state; @@ -641,15 +638,10 @@ class Editor extends PureComponent { React.createElement(Breakpoints, { editor, }), - isPaused && - selectedSource.isOriginal && - !selectedSource.isPrettyPrinted && - !mapScopesEnabled - ? null - : React.createElement(Preview, { - editor, - editorRef: this.$editorWrapper, - }), + React.createElement(Preview, { + editor, + editorRef: this.$editorWrapper, + }), highlightedLineRange ? React.createElement(HighlightLines, { editor, @@ -674,11 +666,7 @@ class Editor extends PureComponent { React.createElement(ColumnBreakpoints, { editor, }), - isPaused && - inlinePreviewEnabled && - (!selectedSource.isOriginal || - (selectedSource.isOriginal && selectedSource.isPrettyPrinted) || - (selectedSource.isOriginal && mapScopesEnabled)) + isPaused && inlinePreviewEnabled ? React.createElement(InlinePreviews, { editor, selectedSource, @@ -743,9 +731,6 @@ const mapStateToProps = state => { blackboxedRanges: getBlackBoxRanges(state), breakableLines: getSelectedBreakableLines(state), highlightedLineRange: getHighlightedLineRangeForSelectedSource(state), - mapScopesEnabled: selectedSource?.isOriginal - ? isMapScopesEnabled(state) - : null, }; }; diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js index 41991ccae08f..b23f0ce64ca7 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js @@ -11,12 +11,10 @@ import { form, datalist, option, - span, } from "react-dom-factories"; import PropTypes from "prop-types"; import { connect } from "../../utils/connect"; import { features } from "../../utils/prefs"; -import AccessibleImage from "../shared/AccessibleImage"; import { objectInspector } from "devtools/client/shared/components/reps/index"; @@ -25,12 +23,6 @@ import { getExpressions, getExpressionError, getAutocompleteMatchset, - getSelectedSource, - isMapScopesEnabled, - getIsCurrentThreadPaused, - getSelectedFrame, - getOriginalFrameScope, - getCurrentThread, } from "../../selectors"; import { getExpressionResultGripAndFront } from "../../utils/expressions"; @@ -72,8 +64,6 @@ class Expressions extends Component { showInput: PropTypes.bool.isRequired, unHighlightDomElement: PropTypes.func.isRequired, updateExpression: PropTypes.func.isRequired, - isOriginalVariableMappingDisabled: PropTypes.bool, - isLoadingOriginalVariables: PropTypes.bool, }; } @@ -109,22 +99,13 @@ class Expressions extends Component { shouldComponentUpdate(nextProps, nextState) { const { editing, inputValue, focused } = this.state; - const { - expressions, - expressionError, - showInput, - autocompleteMatches, - isLoadingOriginalVariables, - isOriginalVariableMappingDisabled, - } = this.props; + const { expressions, expressionError, showInput, autocompleteMatches } = + this.props; return ( autocompleteMatches !== nextProps.autocompleteMatches || expressions !== nextProps.expressions || expressionError !== nextProps.expressionError || - isLoadingOriginalVariables !== nextProps.isLoadingOriginalVariables || - isOriginalVariableMappingDisabled !== - nextProps.isOriginalVariableMappingDisabled || editing !== nextState.editing || inputValue !== nextState.inputValue || nextProps.showInput !== showInput || @@ -222,43 +203,6 @@ class Expressions extends Component { this.props.clearAutocomplete(); }; - renderExpressionsNotification() { - const { isOriginalVariableMappingDisabled, isLoadingOriginalVariables } = - this.props; - - if (isOriginalVariableMappingDisabled) { - return div( - { - className: "pane-info no-original-scopes-info", - "aria-role": "status", - }, - span( - { className: "info icon" }, - React.createElement(AccessibleImage, { className: "sourcemap" }) - ), - span( - { className: "message" }, - L10N.getStr("expressions.noOriginalScopes") - ) - ); - } - - if (isLoadingOriginalVariables) { - return div( - { className: "pane-info" }, - span( - { className: "info icon" }, - React.createElement(AccessibleImage, { className: "loader" }) - ), - span( - { className: "message" }, - L10N.getStr("scopes.loadingOriginalScopes") - ) - ); - } - return null; - } - renderExpression = (expression, index) => { const { expressionError, @@ -456,45 +400,19 @@ class Expressions extends Component { render() { const { expressions } = this.props; - return div( - { className: "pane" }, - this.renderExpressionsNotification(), - expressions.length === 0 - ? this.renderNewExpressionInput() - : this.renderExpressions() - ); + if (expressions.length === 0) { + return this.renderNewExpressionInput(); + } + + return this.renderExpressions(); } } -const mapStateToProps = state => { - const selectedFrame = getSelectedFrame(state, getCurrentThread(state)); - const selectedSource = getSelectedSource(state); - const isPaused = getIsCurrentThreadPaused(state); - const mapScopesEnabled = isMapScopesEnabled(state); - const expressions = getExpressions(state); - - const selectedSourceIsNonPrettyPrintedOriginal = - selectedSource?.isOriginal && !selectedSource?.isPrettyPrinted; - - let isOriginalVariableMappingDisabled, isLoadingOriginalVariables; - - if (selectedSourceIsNonPrettyPrintedOriginal) { - isOriginalVariableMappingDisabled = isPaused && !mapScopesEnabled; - isLoadingOriginalVariables = - isPaused && - mapScopesEnabled && - !expressions.length && - !getOriginalFrameScope(state, selectedFrame)?.scope; - } - - return { - isOriginalVariableMappingDisabled, - isLoadingOriginalVariables, - autocompleteMatches: getAutocompleteMatchset(state), - expressions, - expressionError: getExpressionError(state), - }; -}; +const mapStateToProps = state => ({ + autocompleteMatches: getAutocompleteMatchset(state), + expressions: getExpressions(state), + expressionError: getExpressionError(state), +}); export default connect(mapStateToProps, { autocomplete: actions.autocomplete, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.css b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.css index 07ebd44048cf..9671bd1a6516 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.css +++ b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.css @@ -17,6 +17,10 @@ padding-inline-start: 7px; } +.scopes-content .pane.scopes-list { + font-family: var(--monospace-font-family); +} + .scopes-content .toggle-map-scopes a.mdn { padding-inline-start: 3px; } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js index 4d66eea9ab19..bad31f22402d 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js @@ -3,9 +3,8 @@ * file, You can obtain one at . */ import React, { PureComponent } from "react"; -import { div, button, span } from "react-dom-factories"; +import { div, button } from "react-dom-factories"; import PropTypes from "prop-types"; -import AccessibleImage from "../shared/AccessibleImage"; import { showMenu } from "../../context-menu/menu"; import { connect } from "../../utils/connect"; import actions from "../../actions"; @@ -13,7 +12,6 @@ import actions from "../../actions"; import { getSelectedFrame, getCurrentThread, - getSelectedSource, getGeneratedFrameScope, getOriginalFrameScope, getPauseReason, @@ -51,6 +49,7 @@ class Scopes extends PureComponent { selectedFrame, generatedFrameScopes ), + showOriginal: true, }; } @@ -71,8 +70,6 @@ class Scopes extends PureComponent { unHighlightDomElement: PropTypes.func.isRequired, why: PropTypes.object.isRequired, selectedFrame: PropTypes.object, - toggleMapScopes: PropTypes.func.isRequired, - selectedSource: PropTypes.object.isRequired, }; } @@ -83,7 +80,6 @@ class Scopes extends PureComponent { originalFrameScopes, generatedFrameScopes, isPaused, - selectedSource, } = this.props; const isPausedChanged = isPaused !== nextProps.isPaused; const selectedFrameChanged = selectedFrame !== nextProps.selectedFrame; @@ -91,14 +87,12 @@ class Scopes extends PureComponent { originalFrameScopes !== nextProps.originalFrameScopes; const generatedFrameScopesChanged = generatedFrameScopes !== nextProps.generatedFrameScopes; - const selectedSourceChanged = selectedSource !== nextProps.selectedSource; if ( isPausedChanged || selectedFrameChanged || originalFrameScopesChanged || - generatedFrameScopesChanged || - selectedSourceChanged + generatedFrameScopesChanged ) { this.setState({ originalScopes: getScopesItemsForSelectedFrame( @@ -215,83 +209,17 @@ class Scopes extends PureComponent { selectedFrame, setExpandedScope, expandedScopes, - selectedSource, } = this.props; + const { originalScopes, generatedScopes, showOriginal } = this.state; - if (!selectedSource) { - return div( - { className: "pane scopes-list" }, - div({ className: "pane-info" }, L10N.getStr("scopes.notAvailable")) - ); - } - - const { originalScopes, generatedScopes } = this.state; - let scopes = null; - - if ( - selectedSource.isOriginal && - !selectedSource.isPrettyPrinted && - !selectedFrame.generatedLocation?.source.isWasm - ) { - if (!mapScopesEnabled) { - return div( - { className: "pane scopes-list" }, - div( - { - className: "pane-info no-original-scopes-info", - "aria-role": "status", - }, - span( - { className: "info icon" }, - React.createElement(AccessibleImage, { className: "sourcemap" }) - ), - L10N.getFormatStr( - "scopes.noOriginalScopes", - L10N.getStr("scopes.showOriginalScopes") - ) - ) - ); - } - if (isLoading) { - return div( - { - className: "pane scopes-list", - }, - div( - { className: "pane-info" }, - span( - { className: "info icon" }, - React.createElement(AccessibleImage, { className: "loader" }) - ), - L10N.getStr("scopes.loadingOriginalScopes") - ) - ); - } - scopes = originalScopes; - } else { - if (isLoading) { - return div( - { - className: "pane scopes-list", - }, - div( - { className: "pane-info" }, - span( - { className: "info icon" }, - React.createElement(AccessibleImage, { className: "loader" }) - ), - L10N.getStr("loadingText") - ) - ); - } - scopes = generatedScopes; - } + const scopes = + (showOriginal && mapScopesEnabled && originalScopes) || generatedScopes; function initiallyExpanded(item) { return expandedScopes.some(path => path == getScopeItemPath(item)); } - if (scopes && !!scopes.length) { + if (scopes && !!scopes.length && !isLoading) { return div( { className: "pane scopes-list", @@ -321,6 +249,14 @@ class Scopes extends PureComponent { ); } + let stateText = L10N.getStr("scopes.notPaused"); + if (this.props.isPaused) { + if (isLoading) { + stateText = L10N.getStr("loadingText"); + } else { + stateText = L10N.getStr("scopes.notAvailable"); + } + } return div( { className: "pane scopes-list", @@ -329,7 +265,7 @@ class Scopes extends PureComponent { { className: "pane-info", }, - L10N.getStr("scopes.notAvailable") + stateText ) ); } @@ -347,57 +283,31 @@ class Scopes extends PureComponent { const mapStateToProps = state => { // This component doesn't need any prop when we are not paused const selectedFrame = getSelectedFrame(state, getCurrentThread(state)); - const why = getPauseReason(state, selectedFrame.thread); - const expandedScopes = getLastExpandedScopes(state, selectedFrame.thread); - const isPaused = getIsCurrentThreadPaused(state); - const selectedSource = getSelectedSource(state); - if (!selectedFrame) { return {}; } - let originalFrameScopes; - let generatedFrameScopes; - let isLoading; - let mapScopesEnabled; + const { scope: originalFrameScopes, pending: originalPending } = + getOriginalFrameScope(state, selectedFrame) || { + scope: null, + pending: false, + }; - if ( - selectedSource?.isOriginal && - !selectedSource?.isPrettyPrinted && - !selectedFrame.generatedLocation?.source.isWasm - ) { - const { scope, pending: originalPending } = getOriginalFrameScope( - state, - selectedFrame - ) || { + const { scope: generatedFrameScopes, pending: generatedPending } = + getGeneratedFrameScope(state, selectedFrame) || { scope: null, pending: false, }; - originalFrameScopes = scope; - isLoading = originalPending; - mapScopesEnabled = isMapScopesEnabled(state); - } else { - const { scope, pending: generatedPending } = getGeneratedFrameScope( - state, - selectedFrame - ) || { - scope: null, - pending: false, - }; - generatedFrameScopes = scope; - isLoading = generatedPending; - } return { + selectedFrame, + mapScopesEnabled: isMapScopesEnabled(state), + isLoading: generatedPending || originalPending, + why: getPauseReason(state, selectedFrame.thread), originalFrameScopes, generatedFrameScopes, - mapScopesEnabled, - selectedFrame, - isLoading, - why, - expandedScopes, - isPaused, - selectedSource, + expandedScopes: getLastExpandedScopes(state, selectedFrame.thread), + isPaused: getIsCurrentThreadPaused(state), }; }; @@ -409,5 +319,4 @@ export default connect(mapStateToProps, { setExpandedScope: actions.setExpandedScope, addWatchpoint: actions.addWatchpoint, removeWatchpoint: actions.removeWatchpoint, - toggleMapScopes: actions.toggleMapScopes, })(Scopes); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/SecondaryPanes.css b/devtools/client/debugger/src/components/SecondaryPanes/SecondaryPanes.css index 6432e9fe75ca..3e4ec0333a02 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/SecondaryPanes.css +++ b/devtools/client/debugger/src/components/SecondaryPanes/SecondaryPanes.css @@ -53,16 +53,11 @@ } .pane .pane-info { - text-align: start; + font-style: italic; + text-align: center; padding: 0.5em; - gap: 8px; - display: flex; - white-space: normal; -} - -.pane .pane-info.no-original-scopes-info { - background-color: var(--theme-warning-background); - color: var(--theme-warning-color); + user-select: none; + cursor: default; } .secondary-panes .breakpoints-buttons { @@ -77,7 +72,7 @@ .secondary-panes input[type="checkbox"] { margin: 0; margin-inline-end: 4px; - vertical-align: text-top; + vertical-align: middle; } .secondary-panes-wrapper .command-bar.bottom { diff --git a/devtools/client/debugger/src/components/SecondaryPanes/index.js b/devtools/client/debugger/src/components/SecondaryPanes/index.js index 73233e344176..2389bed516b9 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/index.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/index.js @@ -16,7 +16,6 @@ import { getPauseCommand, isMapScopesEnabled, getSelectedFrame, - getSelectedSource, getShouldPauseOnExceptions, getShouldPauseOnCaughtExceptions, getThreads, @@ -197,7 +196,11 @@ class SecondaryPanes extends Component { getScopesButtons() { const { selectedFrame, mapScopesEnabled, source } = this.props; - if (!selectedFrame || !source?.isOriginal || source?.isPrettyPrinted) { + if ( + !selectedFrame || + !selectedFrame.location.source.isOriginal || + source?.isPrettyPrinted + ) { return null; } @@ -209,23 +212,21 @@ class SecondaryPanes extends Component { label( { className: "map-scopes-header", - title: L10N.getStr("scopes.showOriginalScopesTooltip"), - onClick: e => e.stopPropagation(), + title: L10N.getStr("scopes.mapping.label"), }, input({ type: "checkbox", checked: mapScopesEnabled ? "checked" : "", onChange: e => this.props.toggleMapScopes(), }), - L10N.getStr("scopes.showOriginalScopes") + L10N.getStr("scopes.map.label") ), a( { className: "mdn", target: "_blank", href: mdnLink, - onClick: e => e.stopPropagation(), - title: L10N.getStr("scopes.showOriginalScopesHelpTooltip"), + title: L10N.getStr("scopes.helpTooltip.label"), }, React.createElement(AccessibleImage, { className: "shortcuts", @@ -542,7 +543,7 @@ const mapStateToProps = state => { threads: getThreads(state), skipPausing: getSkipPausing(state), logEventBreakpoints: shouldLogEventBreakpoints(state), - source: getSelectedSource(state), + source: selectedFrame && selectedFrame.location.source, pauseReason: pauseReason?.type ?? "", shouldBreakpointsPaneOpenOnPause, thread, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/Expressions.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/Expressions.spec.js.snap index 6ecf6c2c2ec7..4869b15a73d6 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/Expressions.spec.js.snap +++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/Expressions.spec.js.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Expressions should always have unique keys 1`] = ` -
+
    @@ -98,13 +96,11 @@ exports[`Expressions should always have unique keys 1`] = `
- + `; exports[`Expressions should render 1`] = ` -
+
    @@ -199,5 +195,5 @@ exports[`Expressions should render 1`] = `
- + `; diff --git a/devtools/client/debugger/src/components/shared/AccessibleImage.css b/devtools/client/debugger/src/components/shared/AccessibleImage.css index 4ba5f1326a42..e69ec68a6f9d 100644 --- a/devtools/client/debugger/src/components/shared/AccessibleImage.css +++ b/devtools/client/debugger/src/components/shared/AccessibleImage.css @@ -117,13 +117,6 @@ html[dir="rtl"] .img.more-tabs { transform: scaleX(-1); } -.img.sourcemap { - background-image: url(chrome://devtools/content/debugger/images/sourcemap.svg); - -moz-context-properties: fill; - fill: var(--theme-icon-warning-color); - background-color: unset; -} - .img.next { mask-image: url(chrome://devtools/content/debugger/images/next.svg); } diff --git a/devtools/client/debugger/src/utils/pause/mapScopes/index.js b/devtools/client/debugger/src/utils/pause/mapScopes/index.js index dbd99f8b114c..8736c4221828 100644 --- a/devtools/client/debugger/src/utils/pause/mapScopes/index.js +++ b/devtools/client/debugger/src/utils/pause/mapScopes/index.js @@ -52,7 +52,7 @@ export async function buildMappedScopes( source, content, frame, - generatedScopes, + scopes, thunkArgs ) { const { getState, parserWorker } = thunkArgs; @@ -77,16 +77,13 @@ export async function buildMappedScopes( ); if (hasLineMappings(originalRanges)) { - // Fallback to generated scopes as there are no clear mappings to original scopes - // This means the scope variable names are likely the same for both the original - // generated sources. - return { scope: generatedScopes }; + return null; } let generatedAstBindings; - if (generatedScopes) { + if (scopes) { generatedAstBindings = buildGeneratedBindingList( - generatedScopes, + scopes, generatedAstScopes, frame.this ); @@ -104,8 +101,8 @@ export async function buildMappedScopes( thunkArgs ); - const globalLexicalScope = generatedScopes - ? getGlobalFromScope(generatedScopes) + const globalLexicalScope = scopes + ? getGlobalFromScope(scopes) : generateGlobalFromAst(generatedAstScopes); const mappedGeneratedScopes = generateClientScope( globalLexicalScope, @@ -114,7 +111,7 @@ export async function buildMappedScopes( return isReliableScope(mappedGeneratedScopes) ? { mappings: expressionLookup, scope: mappedGeneratedScopes } - : { scope: generatedScopes }; + : null; } async function mapOriginalBindingsToGenerated( diff --git a/devtools/client/debugger/test/mochitest/browser_aj.toml b/devtools/client/debugger/test/mochitest/browser_aj.toml index e473eb731775..722d1f0b1d96 100644 --- a/devtools/client/debugger/test/mochitest/browser_aj.toml +++ b/devtools/client/debugger/test/mochitest/browser_aj.toml @@ -164,7 +164,7 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and ["browser_dbg-editor-select.js"] -["browser_dbg-ember-original-variable-mapping-notifications.js"] +["browser_dbg-ember-quickstart.js"] fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled skip-if = ["debug"] # Window leaks: bug 1575332 diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-original.js b/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-original.js index b9e06e4121ec..c1bf46da7f9a 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-original.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-original.js @@ -7,7 +7,6 @@ "use strict"; add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); // NOTE: the CORS call makes the test run times inconsistent const dbg = await initDebugger( "doc-sourcemaps3.html", @@ -15,6 +14,7 @@ add_task(async function () { "sorted.js", "test.js" ); + dbg.actions.toggleMapScopes(); const sortedSrc = findSource(dbg, "sorted.js"); await selectSource(dbg, sortedSrc); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-dom-mutation-breakpoints.js b/devtools/client/debugger/test/mochitest/browser_dbg-dom-mutation-breakpoints.js index e26ca0493bd2..66cf7912a2cb 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-dom-mutation-breakpoints.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-dom-mutation-breakpoints.js @@ -22,8 +22,6 @@ async function enableMutationBreakpoints() { add_task(async function () { // Enable features await enableMutationBreakpoints(); - await pushPref("devtools.debugger.map-scopes-enabled", true); - info("Switches over to the inspector pane"); const { inspector, toolbox } = await openInspectorForURL(DMB_TEST_URL); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-editor-gutter.js b/devtools/client/debugger/test/mochitest/browser_dbg-editor-gutter.js index e5386009f0e3..1653d9195bf7 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-editor-gutter.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-editor-gutter.js @@ -31,11 +31,11 @@ add_task(async function testGutterBreakpoints() { }); add_task(async function testGutterBreakpointsInIgnoredSource() { - await pushPref("devtools.debugger.map-scopes-enabled", true); info( "Ensure clicking on gutter to add breakpoint should not un-ignore source" ); const dbg = await initDebugger("doc-sourcemaps3.html"); + dbg.actions.toggleMapScopes(); await waitForSources(dbg, "bundle.js", "sorted.js", "test.js"); info("Ignore the source"); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-ember-original-variable-mapping-notifications.js b/devtools/client/debugger/test/mochitest/browser_dbg-ember-original-variable-mapping-notifications.js deleted file mode 100644 index 752acd979b23..000000000000 --- a/devtools/client/debugger/test/mochitest/browser_dbg-ember-original-variable-mapping-notifications.js +++ /dev/null @@ -1,78 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at . */ - -"use strict"; -// Tests pausing in original sources from projects built on ember framework, -// This also tests the original variable mapping toggle and notifications - -add_task(async function () { - const dbg = await initDebugger("ember/quickstart/dist/"); - - await invokeWithBreakpoint( - dbg, - "mapTestFunction", - "router.js", - { line: 13, column: 3 }, - async () => { - info("Assert the original variable mapping notifications are visible"); - is( - getScopeNotificationMessage(dbg), - DEBUGGER_L10N.getFormatStr( - "scopes.noOriginalScopes", - DEBUGGER_L10N.getStr("scopes.showOriginalScopes") - ), - "Original mapping is disabled so the scopes notification is visible" - ); - - // Open the expressions pane - let notificationText; - const notificationVisible = waitUntil(() => { - notificationText = getExpressionNotificationMessage(dbg); - return notificationText; - }); - await toggleExpressions(dbg); - await notificationVisible; - - is( - notificationText, - DEBUGGER_L10N.getStr("expressions.noOriginalScopes"), - "Original mapping is disabled so the expressions notification is visible" - ); - - await toggleMapScopes(dbg); - - info( - "Assert the original variable mapping notifications no longer visible" - ); - ok( - !getScopeNotificationMessage(dbg), - "Original mapping is enabled so the scopes notification is no longer visible" - ); - ok( - !getScopeNotificationMessage(dbg), - "Original mapping is enabled so the expressions notification is no longer visible" - ); - - await assertScopes(dbg, [ - "Module", - ["config", "{\u2026}"], - "EmberRouter:Class()", - "Router:Class()", - ]); - }, - { shouldWaitForLoadedScopes: false } - ); -}); - -function getScopeNotificationMessage(dbg) { - return dbg.win.document.querySelector( - ".scopes-pane .pane-info.no-original-scopes-info" - )?.innerText; -} - -function getExpressionNotificationMessage(dbg) { - return dbg.win.document.querySelector( - ".watch-expressions-pane .pane-info.no-original-scopes-info" - )?.innerText; -} diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-ember-quickstart.js b/devtools/client/debugger/test/mochitest/browser_dbg-ember-quickstart.js new file mode 100644 index 000000000000..8c9dd63bd7b2 --- /dev/null +++ b/devtools/client/debugger/test/mochitest/browser_dbg-ember-quickstart.js @@ -0,0 +1,25 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at . */ + +"use strict"; + +add_task(async function () { + const dbg = await initDebugger("ember/quickstart/dist/"); + dbg.actions.toggleMapScopes(); + + await invokeWithBreakpoint( + dbg, + "mapTestFunction", + "router.js", + { line: 13, column: 3 }, + async () => { + await assertScopes(dbg, [ + "Module", + ["config", "{\u2026}"], + "EmberRouter:Class()", + "Router:Class()", + ]); + } + ); +}); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-features-breakpoints.js b/devtools/client/debugger/test/mochitest/browser_dbg-features-breakpoints.js index 0f4ad6959a51..9309c17a77a9 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-features-breakpoints.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-features-breakpoints.js @@ -28,8 +28,7 @@ add_task( info("Test pausing on an original source"); invokeInTab("foo"); - await waitForPausedInOriginalFileAndToggleMapScopes(dbg, "original.js"); - + await waitForPaused(dbg, "original.js"); assertPausedAtSourceAndLine(dbg, findSource(dbg, "original.js").id, 8); info("Then stepping into a generated source"); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-features-wasm.js b/devtools/client/debugger/test/mochitest/browser_dbg-features-wasm.js index 157204a596a2..30702a575e82 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-features-wasm.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-features-wasm.js @@ -75,8 +75,7 @@ add_task(async function () { await addBreakpoint(dbg, "fib.c", breakpointLine); invokeInTab("runWasm"); - await waitForPausedInOriginalFileAndToggleMapScopes(dbg); - + await waitForPaused(dbg); assertPausedAtSourceAndLine(dbg, findSource(dbg, "fib.c").id, breakpointLine); await assertBreakpoint(dbg, breakpointLine); // Capture the generated location line, so that we can better report @@ -132,8 +131,7 @@ add_task(async function () { // But once we switch to original source, we should have the original text content and be able // to do all classic assertions for paused state. - await waitForPausedInOriginalFileAndToggleMapScopes(dbg); - + await waitForPaused(dbg); assertPausedAtSourceAndLine(dbg, findSource(dbg, "fib.c").id, breakpointLine); info("Reselect the binary source"); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-integration-reloading-compressed-sourcemaps.js b/devtools/client/debugger/test/mochitest/browser_dbg-integration-reloading-compressed-sourcemaps.js index d83244721691..0569d36071d8 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-integration-reloading-compressed-sourcemaps.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-integration-reloading-compressed-sourcemaps.js @@ -13,7 +13,6 @@ requestLongerTimeout(10); add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); const testFolder = "sourcemaps-reload-compressed"; const isCompressed = true; diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-integration-reloading-uncompressed-sourcemaps.js b/devtools/client/debugger/test/mochitest/browser_dbg-integration-reloading-uncompressed-sourcemaps.js index f07688d8f85f..df07f0dc4313 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-integration-reloading-uncompressed-sourcemaps.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-integration-reloading-uncompressed-sourcemaps.js @@ -13,7 +13,6 @@ requestLongerTimeout(10); add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); const testFolder = "sourcemaps-reload-uncompressed"; const isCompressed = false; diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-log-point-mapping.js b/devtools/client/debugger/test/mochitest/browser_dbg-log-point-mapping.js index 67886672b672..1b5e9b03d823 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-log-point-mapping.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-log-point-mapping.js @@ -10,9 +10,9 @@ add_task(async function () { Services.prefs.setBoolPref("devtools.toolbox.splitconsoleEnabled", true); - await pushPref("devtools.debugger.map-scopes-enabled", true); const dbg = await initDebugger("doc-sourcemaps3.html", "test.js"); + dbg.actions.toggleMapScopes(); const source = findSource(dbg, "test.js"); await selectSource(dbg, "test.js"); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-minified.js b/devtools/client/debugger/test/mochitest/browser_dbg-minified.js index 1a15d1588a77..938dbf7f48f3 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-minified.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-minified.js @@ -7,8 +7,8 @@ "use strict"; add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); const dbg = await initDebugger("doc-minified2.html", "sum.js"); + dbg.actions.toggleMapScopes(); await selectSource(dbg, "sum.js"); await addBreakpoint(dbg, "sum.js", 2); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-preview-source-maps.js b/devtools/client/debugger/test/mochitest/browser_dbg-preview-source-maps.js index 18f1d2594c83..5203b311c72b 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-preview-source-maps.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-preview-source-maps.js @@ -17,7 +17,8 @@ add_task(async function () { await addBreakpoint(dbg, "times2.js", 2); invokeInTab("keepMeAlive"); - await waitForPausedInOriginalFileAndToggleMapScopes(dbg, "times2.js"); + await waitForPaused(dbg); + await waitForSelectedSource(dbg, "times2.js"); info("Test previewing in the original location"); await assertPreviews(dbg, [ @@ -36,3 +37,9 @@ add_task(async function () { await hoverAtPos(dbg, { line: 2, column: 17 }); await assertNoTooltip(dbg); }); + +async function assertNoTooltip(dbg) { + await wait(200); + const el = findElement(dbg, "previewPopup"); + is(el, null, "Tooltip should not exist"); +} diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js b/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js index 2882bba1b6ab..20e4759bec91 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js @@ -5,8 +5,8 @@ "use strict"; add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); const dbg = await initDebugger("doc-react.html", "App.js"); + dbg.actions.toggleMapScopes(); await selectSource(dbg, "App.js"); await addBreakpoint(dbg, "App.js", 11); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-react-jsx.js b/devtools/client/debugger/test/mochitest/browser_dbg-react-jsx.js index 12b4e57b3569..9e9f6417bd59 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-react-jsx.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-react-jsx.js @@ -15,6 +15,6 @@ add_task(async function () { await selectSource(dbg, "main.js"); await addBreakpoint(dbg, "main.js", 3); invokeInTab("foo"); - await waitForPausedInOriginalFileAndToggleMapScopes(dbg); + await waitForPaused(dbg); assertPausedAtSourceAndLine(dbg, findSource(dbg, "main.js").id, 3); }); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-breakpoint-console.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-breakpoint-console.js index 0d69bdc17f3e..2cbe680aa6c3 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-breakpoint-console.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-breakpoint-console.js @@ -8,8 +8,8 @@ requestLongerTimeout(3); add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); const dbg = await initDebugger("doc-sourcemapped.html"); + dbg.actions.toggleMapScopes(); await evalInConsoleAtPoint( dbg, diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-preview.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-preview.js index 2a33879f5494..eb0391666d37 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-preview.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-preview.js @@ -8,8 +8,8 @@ requestLongerTimeout(3); add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); const dbg = await initDebugger("doc-sourcemapped.html"); + dbg.actions.toggleMapScopes(); await testForOf(dbg); await testShadowing(dbg); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-scopes.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-scopes.js index 9379b91d90ce..a6ee2deb7749 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-scopes.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-scopes.js @@ -73,8 +73,8 @@ async function breakpointScopes( } add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); const dbg = await initDebugger("doc-sourcemapped.html"); + dbg.actions.toggleMapScopes(); for (const fixture of ACTIVE_FIXTURES) { await fixture(dbg); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js index 47d8fec9282b..3a48b8e33be5 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js @@ -9,61 +9,41 @@ requestLongerTimeout(5); // Test pausing with mapScopes enabled and disabled add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); const dbg = await initDebugger("doc-sourcemapped.html"); info("1. Pause on line 20"); const url = "webpack3-babel6://./esmodules-cjs/input.js"; await waitForSources(dbg, url); - const source = findSource(dbg, url); await selectSource(dbg, source); await addBreakpoint(dbg, source, 20, 3); - invokeInTab("webpack3Babel6EsmodulesCjs"); await waitForPaused(dbg); + info("2. Hover on a token with mapScopes enabled"); + await toggleMapScopes(dbg); + await waitForLoadedScopes(dbg); ok(getOriginalScope(dbg) != null, "Scopes are now mapped"); - ok(!findFooterNotificationMessage(dbg), "No footer notification message"); - await assertPreviewTextValue(dbg, 20, 20, { + await assertPreviewTextValue(dbg, 20, 17, { result: '"a-default"', expression: "aDefault", }); - info("3. Disable original variable mapping"); + info("3. Hover on a token with mapScopes disabled"); await toggleMapScopes(dbg); - - const notificationMessage = DEBUGGER_L10N.getFormatStr( - "editorNotificationFooter.noOriginalScopes", - DEBUGGER_L10N.getStr("scopes.showOriginalScopes") - ); - - info( - "Assert that previews are disabled and the footer notification is visible" - ); - await hoverAtPos(dbg, { line: 20, column: 17 }); - await assertNoTooltip(dbg); - is( - findFooterNotificationMessage(dbg), - notificationMessage, - "The Original variable mapping warning is displayed" - ); + await assertPreviewTextValue(dbg, 21, 17, { + result: "undefined", + expression: "anAliased", + }); info("4. StepOver with mapScopes disabled"); - await stepOver(dbg, { shouldWaitForLoadedScopes: false }); - - info( - "Assert that previews are still disabled and the footer notification is visible" - ); - await hoverAtPos(dbg, { line: 20, column: 17 }); - await assertNoTooltip(dbg); - - is( - findFooterNotificationMessage(dbg), - notificationMessage, - "The Original variable mapping warning is displayed" - ); + await stepOver(dbg); + await assertPreviewTextValue(dbg, 20, 17, { + result: "undefined", + expression: "aDefault", + }); + ok(getOriginalScope(dbg) == null, "Scopes are not mapped"); }); function getOriginalScope(dbg) { @@ -72,7 +52,8 @@ function getOriginalScope(dbg) { ); } -function findFooterNotificationMessage(dbg) { - return dbg.win.document.querySelector(".editor-notification-footer") - ?.innerText; +async function toggleMapScopes(dbg) { + const onDispatch = waitForDispatch(dbg.store, "TOGGLE_MAP_SCOPES"); + clickElement(dbg, "mapScopesCheckbox"); + return onDispatch; } diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-ignorelist.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-ignorelist.js index d811d8559247..9278ccf08e4c 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-ignorelist.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-ignorelist.js @@ -29,14 +29,14 @@ add_task(async function () { "Reload to hit breakpoints in the original-2.js and original-3.js files" ); const onReloaded = reload(dbg, ...sources); - await waitForPaused(dbg, null, { shouldWaitForLoadedScopes: false }); + await waitForPaused(dbg); info("Assert paused in original-2.js as original-1.js is ignored"); const original2Source = findSource(dbg, "original-2.js"); assertPausedAtSourceAndLine(dbg, original2Source.id, 2); await resume(dbg); - await waitForPaused(dbg, null, { shouldWaitForLoadedScopes: false }); + await waitForPaused(dbg); info("Assert paused in original-4.js as original-3.js is ignored"); const original4Source = findSource(dbg, "original-4.js"); @@ -54,7 +54,7 @@ add_task(async function () { info("Reload to hit breakpoints in all the original-[x].js files"); const onReloaded2 = reload(dbg, "original-1.js"); - await waitForPaused(dbg, null, { shouldWaitForLoadedScopes: false }); + await waitForPaused(dbg); info("Assert paused in original-1.js as it is no longer ignored"); const original1Source = findSource(dbg, "original-1.js"); @@ -63,7 +63,7 @@ add_task(async function () { const originalSources = ["original-2.js", "original-3.js", "original-4.js"]; for (const fileName of originalSources) { await resume(dbg); - await waitForPaused(dbg, null, { shouldWaitForLoadedScopes: false }); + await waitForPaused(dbg); const originalSource = findSource(dbg, fileName); assertPausedAtSourceAndLine(dbg, originalSource.id, 2); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-indexed.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-indexed.js index 3c78c58fe509..5bfba674ec34 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-indexed.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-indexed.js @@ -37,7 +37,7 @@ add_task(async function () { await assertBreakpoint(dbg, 4); invokeInTab("logMessage"); - await waitForPausedInOriginalFileAndToggleMapScopes(dbg); + await waitForPaused(dbg); assertPausedAtSourceAndLine(dbg, mainSrc.id, 4, 3); // Tests the existence of the sourcemap link in the original source. diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-reloading.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-reloading.js index c10273baaf9e..684bed181eed 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-reloading.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-reloading.js @@ -31,7 +31,8 @@ add_task(async function () { const onReloaded = reload(dbg, "opts.js"); await waitForDispatch(dbg.store, "LOAD_ORIGINAL_SOURCE_TEXT"); - await waitForPausedInOriginalFileAndToggleMapScopes(dbg, "entry.js"); + await waitForPaused(dbg); + await waitForDispatch(dbg.store, "ADD_INLINE_PREVIEW"); assertPausedAtSourceAndLine(dbg, findSource(dbg, "entry.js").id, 5); await waitForBreakpointCount(dbg, 2); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js index 77bcf982468b..610cfd88f38a 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js @@ -77,7 +77,7 @@ add_task(async function () { assertBreakpointExists(dbg, entrySrc, 15); invokeInTab("keepMeAlive"); - await waitForPausedInOriginalFileAndToggleMapScopes(dbg); + await waitForPaused(dbg); assertPausedAtSourceAndLine(dbg, entrySrc.id, 15); await stepIn(dbg); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps2.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps2.js index a984476d25b5..3ef9f8c75d1d 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps2.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps2.js @@ -37,7 +37,7 @@ add_task(async function () { await assertBreakpoint(dbg, 4); invokeInTab("logMessage"); - await waitForPausedInOriginalFileAndToggleMapScopes(dbg); + await waitForPaused(dbg); assertPausedAtSourceAndLine(dbg, mainSrc.id, 4); // Tests the existence of the sourcemap link in the original source. diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps3.js b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps3.js index 7ddb2f249ca8..4cb0369df1c7 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps3.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps3.js @@ -10,7 +10,6 @@ requestLongerTimeout(2); // This source map does not have source contents, so it's fetched separately add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); // NOTE: the CORS call makes the test run times inconsistent const dbg = await initDebugger( "doc-sourcemaps3.html", @@ -18,6 +17,7 @@ add_task(async function () { "sorted.js", "test.js" ); + dbg.actions.toggleMapScopes(); ok(true, "Original sources exist"); const sortedSrc = findSource(dbg, "sorted.js"); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-stepping.js b/devtools/client/debugger/test/mochitest/browser_dbg-stepping.js index 5935c7c3af62..2821075e7381 100644 --- a/devtools/client/debugger/test/mochitest/browser_dbg-stepping.js +++ b/devtools/client/debugger/test/mochitest/browser_dbg-stepping.js @@ -8,7 +8,6 @@ requestLongerTimeout(5); add_task(async function test() { - await pushPref("devtools.debugger.map-scopes-enabled", true); const dbg = await initDebugger( "big-sourcemap.html", "bundle.js", diff --git a/devtools/client/debugger/test/mochitest/head.js b/devtools/client/debugger/test/mochitest/head.js index e8ba0a7a3303..9f50a22fcd32 100644 --- a/devtools/client/debugger/test/mochitest/head.js +++ b/devtools/client/debugger/test/mochitest/head.js @@ -35,12 +35,6 @@ Services.scriptloader.loadSubScript( this ); -// Clear preferences that may be set during the course of tests. -registerCleanupFunction(() => { - info("finish() was called, cleaning up and clearing debugger preferences..."); - Services.prefs.clearUserPref("devtools.debugger.map-scopes-enabled"); -}); - /** * Helper function for `_loadAllIntegrationTests`. * diff --git a/devtools/client/debugger/test/mochitest/shared-head.js b/devtools/client/debugger/test/mochitest/shared-head.js index 8d7594e78555..215676b50108 100644 --- a/devtools/client/debugger/test/mochitest/shared-head.js +++ b/devtools/client/debugger/test/mochitest/shared-head.js @@ -553,16 +553,8 @@ function assertPaused(dbg, msg = "client is paused") { * @param {Object} dbg * @param {String} url * Optional URL of the script we should be pausing on. - * @param {Object} options - * {Boolean} shouldWaitForLoadScopes - * When paused in original files with original variable mapping disabled, scopes are - * not going to exist, lets not wait for it. defaults to true */ -async function waitForPaused( - dbg, - url, - options = { shouldWaitForLoadedScopes: true } -) { +async function waitForPaused(dbg, url) { info("Waiting for the debugger to pause"); const { getSelectedScope, getCurrentThread, getCurrentThreadFrames } = dbg.selectors; @@ -574,10 +566,7 @@ async function waitForPaused( ); await waitForState(dbg, getCurrentThreadFrames, "fetched frames"); - - if (options.shouldWaitForLoadedScopes) { - await waitForLoadedScopes(dbg); - } + await waitForLoadedScopes(dbg); await waitForSelectedSource(dbg, url); } @@ -653,7 +642,7 @@ function isFrameSelected(dbg, index, title) { } /** - * Clear all the debugger related preferences. + * Clear all the debugger related preferences. */ async function clearDebuggerPreferences(prefs = []) { resetSchemaVersion(); @@ -668,6 +657,7 @@ async function clearDebuggerPreferences(prefs = []) { Services.prefs.clearUserPref("devtools.debugger.call-stack-visible"); Services.prefs.clearUserPref("devtools.debugger.scopes-visible"); Services.prefs.clearUserPref("devtools.debugger.skip-pausing"); + Services.prefs.clearUserPref("devtools.debugger.map-scopes-enabled"); for (const pref of prefs) { await pushPref(...pref); @@ -879,15 +869,14 @@ function countTabs(dbg) { * * @memberof mochitest/actions * @param {Object} dbg - * @param {Object} pauseOptions * @return {Promise} * @static */ -async function stepOver(dbg, pauseOptions) { +async function stepOver(dbg) { const pauseLine = getVisibleSelectedFrameLine(dbg); info(`Stepping over from ${pauseLine}`); await dbg.actions.stepOver(); - return waitForPaused(dbg, null, pauseOptions); + return waitForPaused(dbg); } /** @@ -1152,15 +1141,14 @@ async function invokeWithBreakpoint( fnName, filename, { line, column }, - handler, - pauseOptions + handler ) { const source = await loadAndAddBreakpoint(dbg, filename, line, column); const invokeResult = invokeInTab(fnName); const invokeFailed = await Promise.race([ - waitForPaused(dbg, null, pauseOptions), + waitForPaused(dbg), invokeResult.then( () => new Promise(() => {}), () => true @@ -1715,7 +1703,6 @@ const selectors = { expressionNodes: ".expressions-list .tree-node", expressionPlus: ".watch-expressions-pane button.plus", expressionRefresh: ".watch-expressions-pane button.refresh", - expressionsHeader: ".watch-expressions-pane ._header .header-label", scopesHeader: ".scopes-pane ._header .header-label", breakpointItem: i => `.breakpoints-list div:nth-of-type(${i})`, breakpointLabel: i => `${selectors.breakpointItem(i)} .breakpoint-label`, @@ -2043,29 +2030,6 @@ async function typeInPanel(dbg, text) { pressKey(dbg, "Enter"); } -async function toggleMapScopes(dbg) { - info("Turn on original variable mapping"); - const scopesLoaded = waitForLoadedScopes(dbg); - const onDispatch = waitForDispatch(dbg.store, "TOGGLE_MAP_SCOPES"); - clickElement(dbg, "mapScopesCheckbox"); - return Promise.all([onDispatch, scopesLoaded]); -} - -async function waitForPausedInOriginalFileAndToggleMapScopes( - dbg, - expectedSelectedSource = null -) { - // Original variable mapping is not switched on, so do not wait for any loaded scopes - await waitForPaused(dbg, expectedSelectedSource, { - shouldWaitForLoadedScopes: false, - }); - await toggleMapScopes(dbg); -} - -function toggleExpressions(dbg) { - return findElement(dbg, "expressionsHeader").click(); -} - function toggleScopes(dbg) { return findElement(dbg, "scopesHeader").click(); } @@ -2432,16 +2396,6 @@ function getTokenElAtLine(dbg, expression, line, column = 0) { }); } -/** - * Wait for a few ms and assert that a tooltip preview was not displayed. - * @param {*} dbg - */ -async function assertNoTooltip(dbg) { - await wait(200); - const el = findElement(dbg, "previewPopup"); - is(el, null, "Tooltip should not exist"); -} - /** * Hovers and asserts tooltip previews with simple text expressions (i.e numbers and strings) * @param {*} dbg diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index d9245dfd3814..8d735e0448ef 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -246,7 +246,6 @@ devtools.jar: content/debugger/images/prettyPrint.svg (debugger/images/prettyPrint.svg) content/debugger/images/regex-match.svg (debugger/images/regex-match.svg) content/debugger/images/search.svg (debugger/images/search.svg) - content/debugger/images/sourcemap.svg (debugger/images/sourcemap.svg) content/debugger/images/stepIn.svg (debugger/images/stepIn.svg) content/debugger/images/stepOut.svg (debugger/images/stepOut.svg) content/debugger/images/tab.svg (debugger/images/tab.svg) @@ -410,7 +409,6 @@ devtools.jar: skin/images/webconsole/run.svg (themes/images/webconsole/run.svg) content/webconsole/index.html (webconsole/index.html) content/webconsole/components/Input/EagerEvaluation.css (webconsole/components/Input/EagerEvaluation.css) - content/webconsole/components/Input/EvaluationNotification.css (webconsole/components/Input/EvaluationNotification.css) content/webconsole/components/Input/EvaluationContextSelector.css (webconsole/components/Input/EvaluationContextSelector.css) content/webconsole/components/Input/ReverseSearchInput.css (webconsole/components/Input/ReverseSearchInput.css) content/webconsole/components/App.css (webconsole/components/App.css) diff --git a/devtools/client/locales/en-US/debugger.properties b/devtools/client/locales/en-US/debugger.properties index 9b9a5ae6c84c..e0dcdf697998 100644 --- a/devtools/client/locales/en-US/debugger.properties +++ b/devtools/client/locales/en-US/debugger.properties @@ -613,10 +613,6 @@ original=original # input element expressions.placeholder=Add watch expression -# LOCALIZATION NOTE (expressions.noOriginalScopes): Expressions right sidebar pane message -# for when the`map variable names`is off and the debugger is paused in an original source -expressions.noOriginalScopes=Original variables name mapping is turned off. Expression values might not be accurate. - # LOCALIZATION NOTE (expressions.errorMsg): Error text for expression # input element expressions.errorMsg=Invalid expression… @@ -726,11 +722,6 @@ sourceFooter.unignore=Unignore source # with the ignore source button when the selected source is on the ignore list sourceFooter.ignoreList=This source is on the ignore list. Please turn off the `Ignore Known Third-party Scripts` option to enable it. -# LOCALIZATION NOTE (editorNotificationFooter.noOriginalScopes): The notification message displayed in the editor notification footer -# when paused in an original file and original variable mapping is turned off -# %S is text from the label for checkbox to show original scopes -editorNotificationFooter.noOriginalScopes=Original variables name mapping is turned off, so all inline and tooltip previews are disabled. Click the `%S` checkbox in the scopes panel to turn them on. - # LOCALIZATION NOTE (ignoreContextItem.ignore): Text associated # with the ignore context menu item ignoreContextItem.ignore=Ignore source @@ -802,19 +793,14 @@ scopes.header=Scopes # for when the debugger is paused, but there isn't pause data. scopes.notAvailable=Scopes unavailable -# LOCALIZATION NOTE (scopes.noOriginalScopes): Scopes right sidebar pane message -# for when original variable mapping is disabled. This is only displayed when paused in an original source. -# %S is text from the label for checkbox to show original scopes -scopes.noOriginalScopes=Original variables name mapping is turned off. Scopes cannot be displayed. Click the `%S` checkbox above to turn on. - -# LOCALIZATION NOTE (scopes.loadingOriginalScopes): Scopes right sidebar pane message -# for when the debugger is still loading the original variable mapping information. -scopes.loadingOriginalScopes=Loading variables for the original source… - # LOCALIZATION NOTE (scopes.notPaused): Scopes right sidebar pane message # for when the debugger is not paused. scopes.notPaused=Not paused +# LOCALIZATION NOTE (scopes.mapping.label): Scopes right sidebar pane +# tooltip for checkbox and label +scopes.mapping.label=Map original variable names + # LOCALIZATION NOTE (eventlisteners.log.label): Event listeners tooltip for # checkbox and label eventlisteners.log.label=Log events to the console @@ -822,16 +808,12 @@ eventlisteners.log.label=Log events to the console # LOCALIZATION NOTE (eventlisteners.log): Checkbox label for logging events eventlisteners.log=Log -# LOCALIZATION NOTE (scopes.showOriginalScopesHelpTooltip): Scopes right sidebar pane +# LOCALIZATION NOTE (scopes.helpTooltip.label): Scopes right sidebar pane # icon tooltip for link to MDN -scopes.showOriginalScopesHelpTooltip=Learn more about mapping variables and showing the original scopes +scopes.helpTooltip.label=Learn more about map scopes -# LOCALIZATION NOTE (scopes.showOriginalScopesTooltip): Scopes right sidebar pane -# tooltip for checkbox and label -scopes.showOriginalScopesTooltip=Show the scopes with mapped variable names for the original source. - -# LOCALIZATION NOTE (scopes.showOriginalScopes): Checkbox label to show original scopes -scopes.showOriginalScopes=Show original variables +# LOCALIZATION NOTE (scopes.map.label): Checkbox label to map scopes +scopes.map.label=Map # LOCALIZATION NOTE (scopes.block): Refers to a block of code in # the scopes pane when the debugger is paused. diff --git a/devtools/client/locales/en-US/webconsole.properties b/devtools/client/locales/en-US/webconsole.properties index 0f168f668847..bfc586d92862 100644 --- a/devtools/client/locales/en-US/webconsole.properties +++ b/devtools/client/locales/en-US/webconsole.properties @@ -112,11 +112,6 @@ selfxss.msg=Scam Warning: Take care when pasting things you don’t understand. # Please avoid using non-keyboard characters here selfxss.okstring=allow pasting -# LOCALIZATION NOTE (evaluationNotifcation.noOriginalVariableMapping.msg): the text for the notification message that is displayed -# in the console when the debugger is paused in a non-pretty printed original file and original variable mapping is turned off. -# `Show original variables` should be kept in sync with the checkbox label in the Scopes panel header. -evaluationNotifcation.noOriginalVariableMapping.msg=Original variables name mapping in the debugger is disabled. Evaluation results might not be accurate. Click the `Show original variables` checkbox in the debugger scopes panel to enable. - # LOCALIZATION NOTE (messageToggleDetails): the text that is displayed when # you hover the arrow for expanding/collapsing the message details. For # console.error() and other messages we show the stacktrace. diff --git a/devtools/client/webconsole/actions/ui.js b/devtools/client/webconsole/actions/ui.js index b3f9d2d5782b..a8ffaee0f3d5 100644 --- a/devtools/client/webconsole/actions/ui.js +++ b/devtools/client/webconsole/actions/ui.js @@ -23,7 +23,6 @@ const { SHOW_OBJECT_IN_SIDEBAR, SIDEBAR_CLOSE, SPLIT_CONSOLE_CLOSE_BUTTON_TOGGLE, - SHOW_EVALUATION_NOTIFICATION, TIMESTAMPS_TOGGLE, WARNING_GROUPS_TOGGLE, FILTERBAR_DISPLAY_MODE_SET, @@ -225,13 +224,6 @@ function openSidebar(messageId, rootActorId) { }; } -function showEvaluationNotification(notification) { - return { - type: SHOW_EVALUATION_NOTIFICATION, - notification, - }; -} - module.exports = { eagerEvaluationToggle, editorOnboardingDismiss, @@ -252,5 +244,4 @@ module.exports = { openLink, openSidebar, autocompleteToggle, - showEvaluationNotification, }; diff --git a/devtools/client/webconsole/components/App.css b/devtools/client/webconsole/components/App.css index 15dfa06f5e0f..1dc9d05e4878 100644 --- a/devtools/client/webconsole/components/App.css +++ b/devtools/client/webconsole/components/App.css @@ -53,8 +53,7 @@ body { * | +----------------------+ ↔ | * | | [EagerEvaluation] | ↔ | * | +----------------------+ ↔ | - * | | [EvalNotification] | ↔ | - * | +----------------------+ ↔ | + * | ↔ | * +----------------------------↔ | * | [Reverse search input] ↔ | * +----------------------------------------------+ @@ -68,9 +67,8 @@ body { "filter-toolbar sidebar" "filter-toolbar-secondary sidebar" "output-input sidebar" - "eval-notification sidebar" "reverse-search sidebar"; - grid-template-rows: auto var(--primary-toolbar-height) auto 1fr auto auto; + grid-template-rows: auto var(--primary-toolbar-height) auto 1fr auto; grid-template-columns: minmax(200px, 1fr) minmax(0, auto); max-height: 100vh !important; height: 100vh !important; @@ -281,8 +279,6 @@ body { * +--------------------------↔ ↔ | * | [Eager evaluation] ↔ ↔ | * +--------------------------↔ ↔ | - * | [Eval Notification] ↔ ↔ | - * +--------------------------↔ ↔ | * | [Reverse search input] ↔ ↔ | * +-----------------------------------------------------+-----------------+ * @@ -297,7 +293,6 @@ body { "editor filter-toolbar-secondary sidebar" "editor output sidebar" "eager-evaluation output sidebar" - "eval-notification output sidebar" "reverse-search output sidebar"; grid-template-rows: auto @@ -306,7 +301,6 @@ body { auto 1fr auto - auto auto; grid-template-columns: minmax(150px, auto) minmax(200px, 1fr) minmax(0, auto); } @@ -453,17 +447,6 @@ body { width: 0; } -.evaluation-notification { - grid-area: eval-notification; - /* The next 2 lines make it so the element isn't impacting the grid column size, but - will still take the whole available space. */ - min-width: 100%; - width: 0; - border: 1px solid; - display: flex; - padding: 0.5em; -} - .jsterm-editor .editor-resizer { grid-column: editor; /* We want the splitter to cover the whole column (minus self-xss message) */ diff --git a/devtools/client/webconsole/components/App.js b/devtools/client/webconsole/components/App.js index cabef26b1ea7..d09157a65aae 100644 --- a/devtools/client/webconsole/components/App.js +++ b/devtools/client/webconsole/components/App.js @@ -41,9 +41,6 @@ const ConfirmDialog = createFactory( const EagerEvaluation = createFactory( require("resource://devtools/client/webconsole/components/Input/EagerEvaluation.js") ); -const EvaluationNotification = createFactory( - require("resource://devtools/client/webconsole/components/Input/EvaluationNotification.js") -); // And lazy load the ones that may not be used. loader.lazyGetter(this, "SideBar", () => @@ -459,7 +456,6 @@ class App extends Component { const notificationBox = this.renderNotificationBox(); const jsterm = this.renderJsTerm(); const eager = this.renderEagerEvaluation(); - const evaluationNotification = EvaluationNotification(); const reverseSearch = this.renderReverseSearch(); const sidebar = this.renderSideBar(); const confirmDialog = this.renderConfirmDialog(); @@ -473,8 +469,7 @@ class App extends Component { consoleOutput, notificationBox, jsterm, - eager, - evaluationNotification + eager ), editorMode && inputEnabled ? GridElementWidthResizer({ diff --git a/devtools/client/webconsole/components/Input/EagerEvaluation.js b/devtools/client/webconsole/components/Input/EagerEvaluation.js index 52d5467b4543..fddc0c2aa45c 100644 --- a/devtools/client/webconsole/components/Input/EagerEvaluation.js +++ b/devtools/client/webconsole/components/Input/EagerEvaluation.js @@ -39,7 +39,7 @@ class EagerEvaluation extends Component { static get propTypes() { return { terminalEagerResult: PropTypes.any, - hud: PropTypes.object.isRequired, + serviceContainer: PropTypes.object.isRequired, highlightDomElement: PropTypes.func.isRequired, unHighlightDomElement: PropTypes.func.isRequired, }; diff --git a/devtools/client/webconsole/components/Input/EvaluationNotification.css b/devtools/client/webconsole/components/Input/EvaluationNotification.css deleted file mode 100644 index 2e387bda7fac..000000000000 --- a/devtools/client/webconsole/components/Input/EvaluationNotification.css +++ /dev/null @@ -1,32 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -.evaluation-notification.warning { - color: var(--console-warning-color); - border-color: var(--console-warning-border); - background-color: var(--console-warning-background) -} - -.evaluation-notification.warning .evaluation-notification__icon { - color: var(--theme-icon-warning-color); - background-image: url(chrome://devtools/content/debugger/images/sourcemap.svg); -} - -.evaluation-notification__icon { - flex: none; - align-self: flex-start; - width: 16px; - height: 16px; - margin: var(--console-output-vertical-padding) 5px var(--console-output-vertical-padding) 0; - background-image: none; - background-position: center; - background-repeat: no-repeat; - background-size: 16px; - -moz-context-properties: fill; - fill: currentColor; -} - -.evaluation-notification__text { - margin: var(--console-output-vertical-padding) 0; -} diff --git a/devtools/client/webconsole/components/Input/EvaluationNotification.js b/devtools/client/webconsole/components/Input/EvaluationNotification.js deleted file mode 100644 index de6a79737296..000000000000 --- a/devtools/client/webconsole/components/Input/EvaluationNotification.js +++ /dev/null @@ -1,67 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -"use strict"; - -const { - Component, -} = require("resource://devtools/client/shared/vendor/react.js"); -const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); -const { - connect, -} = require("resource://devtools/client/shared/vendor/react-redux.js"); - -const { - getAllUi, -} = require("resource://devtools/client/webconsole/selectors/ui.js"); - -const { - ORIGINAL_VARIABLE_MAPPING, -} = require("resource://devtools/client/webconsole/constants.js"); - -loader.lazyRequireGetter( - this, - "PropTypes", - "resource://devtools/client/shared/vendor/react-prop-types.js" -); - -const l10n = require("resource://devtools/client/webconsole/utils/l10n.js"); - -/** - * Show the results of evaluating the current terminal text, if possible. - */ -class EvaluationNotification extends Component { - static get propTypes() { - return { - notification: PropTypes.string, - }; - } - - componentDidUpdate(prevProps) { - return this.props.notification !== prevProps.notification; - } - - render() { - const { notification } = this.props; - if (notification == ORIGINAL_VARIABLE_MAPPING) { - return dom.span( - { className: "evaluation-notification warning" }, - dom.span({ className: "evaluation-notification__icon" }), - dom.span( - { className: "evaluation-notification__text" }, - l10n.getStr("evaluationNotifcation.noOriginalVariableMapping.msg") - ) - ); - } - return null; - } -} - -function mapStateToProps(state) { - return { - notification: getAllUi(state).notification, - }; -} - -module.exports = connect(mapStateToProps, null)(EvaluationNotification); diff --git a/devtools/client/webconsole/components/Input/moz.build b/devtools/client/webconsole/components/Input/moz.build index 1feed60d13d5..ae435b3495f1 100644 --- a/devtools/client/webconsole/components/Input/moz.build +++ b/devtools/client/webconsole/components/Input/moz.build @@ -8,7 +8,6 @@ DevToolsModules( "EagerEvaluation.js", "EditorToolbar.js", "EvaluationContextSelector.js", - "EvaluationNotification.js", "JSTerm.js", "ReverseSearchInput.js", ) diff --git a/devtools/client/webconsole/constants.js b/devtools/client/webconsole/constants.js index e44421192c21..6b38fa61ed74 100644 --- a/devtools/client/webconsole/constants.js +++ b/devtools/client/webconsole/constants.js @@ -44,7 +44,6 @@ const actionTypes = { SHOW_OBJECT_IN_SIDEBAR: "SHOW_OBJECT_IN_SIDEBAR", SIDEBAR_CLOSE: "SIDEBAR_CLOSE", SPLIT_CONSOLE_CLOSE_BUTTON_TOGGLE: "SPLIT_CONSOLE_CLOSE_BUTTON_TOGGLE", - SHOW_EVALUATION_NOTIFICATION: "SHOW_EVALUATION_NOTIFICATION", TARGET_MESSAGES_REMOVE: "TARGET_MESSAGES_REMOVE", TIMESTAMPS_TOGGLE: "TIMESTAMPS_TOGGLE", UPDATE_HISTORY_POSITION: "UPDATE_HISTORY_POSITION", @@ -201,10 +200,6 @@ const urls = { "https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/", }; -const evaluationNotifications = { - ORIGINAL_VARIABLE_MAPPING: "originalVariableMapping", -}; - // Combine into a single constants object module.exports = Object.assign( { @@ -221,7 +216,5 @@ module.exports = Object.assign( jstermCommands, prefs, historyCommands, - urls, - historyCommands, - evaluationNotifications + urls ); diff --git a/devtools/client/webconsole/index.html b/devtools/client/webconsole/index.html index a70ff9cc2f33..1309c211a2d2 100644 --- a/devtools/client/webconsole/index.html +++ b/devtools/client/webconsole/index.html @@ -44,10 +44,6 @@ rel="stylesheet" href="chrome://devtools/content/webconsole/components/Input/EagerEvaluation.css" /> - // Only used in the browser toolbox console/ browser console // turned off by default enableNetworkMonitoring: false, - notification: null, }, overrides ) @@ -85,11 +83,6 @@ function ui(state = UiState(), action) { return { ...state, sidebarVisible: true, frontInSidebar: action.front }; case SPLIT_CONSOLE_CLOSE_BUTTON_TOGGLE: return { ...state, closeButtonVisible: action.shouldDisplayButton }; - case SHOW_EVALUATION_NOTIFICATION: - if (state.notification == action.notification) { - return state; - } - return { ...state, notification: action.notification }; case REVERSE_SEARCH_INPUT_TOGGLE: return { ...state, diff --git a/devtools/client/webconsole/test/browser/_jsterm.ini b/devtools/client/webconsole/test/browser/_jsterm.ini index 2a71ec592c84..df2f00f4dca4 100644 --- a/devtools/client/webconsole/test/browser/_jsterm.ini +++ b/devtools/client/webconsole/test/browser/_jsterm.ini @@ -130,7 +130,6 @@ skip-if = http2 [browser_jsterm_evaluation_context_selector_inspector.js] [browser_jsterm_evaluation_context_selector.js] -[browser_jsterm_evaluation_notification_original_variable_mapping_warning.js] [browser_jsterm_file_load_save_keyboard_shortcut.js] [browser_jsterm_focus_reload.js] [browser_jsterm_helper_clear.js] diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_autocomplete_mapped_variables.js b/devtools/client/webconsole/test/browser/browser_jsterm_autocomplete_mapped_variables.js index ee1bcda927b1..823c9b7a39aa 100644 --- a/devtools/client/webconsole/test/browser/browser_jsterm_autocomplete_mapped_variables.js +++ b/devtools/client/webconsole/test/browser/browser_jsterm_autocomplete_mapped_variables.js @@ -11,7 +11,6 @@ const TEST_URI = "test/browser/test-autocomplete-mapped.html"; add_task(async function () { - await pushPref("devtools.debugger.map-scopes-enabled", true); const hud = await openNewTabAndConsole(TEST_URI); const { jsterm } = hud; const { autocompletePopup: popup } = jsterm; @@ -20,6 +19,7 @@ add_task(async function () { info("Opening Debugger and enabling map scopes"); await openDebugger(); const dbg = createDebuggerContext(toolbox); + dbg.actions.toggleMapScopes(); info("Waiting for pause"); // This calls firstCall() on the content page and waits for pause. (firstCall @@ -116,11 +116,8 @@ add_task(async function () { ); info("got popup items: " + JSON.stringify(getAutocompletePopupLabels(popup))); - info("Switch to the debugger and disabling map scopes"); - await toolbox.selectTool("jsdebugger"); - await toggleMapScopes(dbg); - await toolbox.selectTool("webconsole"); - + info("Disabling map scopes"); + dbg.actions.toggleMapScopes(); await setInputValueForAutocompletion(hud, "tem"); const autocompleteLabels = getAutocompletePopupLabels(popup); ok( diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_evaluation_notification_original_variable_mapping_warning.js b/devtools/client/webconsole/test/browser/browser_jsterm_evaluation_notification_original_variable_mapping_warning.js deleted file mode 100644 index 21af7c2efd5a..000000000000 --- a/devtools/client/webconsole/test/browser/browser_jsterm_evaluation_notification_original_variable_mapping_warning.js +++ /dev/null @@ -1,75 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -// Tests that the evaluation warning notification shows in the console when the debugger -// is paused in an non-pretty printed original file with original variable mapping disabled. - -"use strict"; - -const l10n = new LocalizationHelper( - "devtools/client/locales/webconsole.properties" -); -const TEST_URI = - "https://example.com/browser/devtools/client/webconsole/test/browser/test-autocomplete-mapped.html"; - -add_task(async function () { - registerCleanupFunction(() => { - Services.prefs.clearUserPref("devtools.debugger.map-scopes-enabled"); - }); - const hud = await openNewTabAndConsole(TEST_URI); - const toolbox = gDevTools.getToolboxForTab(gBrowser.selectedTab); - - info("Opening Debugger with original variable mapping disabled"); - await openDebugger(); - const dbg = createDebuggerContext(toolbox); - - info("Waiting for pause"); - // This calls firstCall() on the content page and waits for pause(without waiting for loaded scopes). (firstCall - // has a debugger statement) - await pauseDebugger(dbg, { shouldWaitForLoadScopes: false }); - - info("Assert the warning notification in the split console"); - await toolbox.openSplitConsole(); - - // Wait for the notification to be displayed in the console - await waitUntil(() => findEvaluationNotificationMessage(hud)); - - const notificationMessage = l10n.getStr( - "evaluationNotifcation.noOriginalVariableMapping.msg" - ); - - is( - findEvaluationNotificationMessage(hud), - notificationMessage, - "The Original variable mapping warning is displayed" - ); - - info("Assert the warning notification in the full console panel"); - await toolbox.selectTool("webconsole"); - is( - findEvaluationNotificationMessage(hud), - notificationMessage, - "The Original variable mapping warning is displayed" - ); - - await toolbox.selectTool("jsdebugger"); - - const loadedScopes = waitForLoadedScopes(dbg); - dbg.actions.toggleMapScopes(); - await loadedScopes; - - await toolbox.selectTool("webconsole"); - - ok( - !findEvaluationNotificationMessage(hud), - "The Original variable mapping warning is no longer displayed" - ); - - await resume(dbg); -}); - -function findEvaluationNotificationMessage(hud) { - return hud.ui.outputNode.querySelector(".evaluation-notification__text") - ?.innerText; -} diff --git a/devtools/client/webconsole/test/browser/head.js b/devtools/client/webconsole/test/browser/head.js index 935754247b15..79e92cf20600 100644 --- a/devtools/client/webconsole/test/browser/head.js +++ b/devtools/client/webconsole/test/browser/head.js @@ -1446,9 +1446,9 @@ async function selectFrame(dbg, frame) { await onScopes; } -async function pauseDebugger(dbg, options = { shouldWaitForLoadScopes: true }) { +async function pauseDebugger(dbg) { info("Waiting for debugger to pause"); - const onPaused = waitForPaused(dbg, null, options); + const onPaused = waitForPaused(dbg); SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { content.wrappedJSObject.firstCall(); }).catch(() => {}); diff --git a/devtools/client/webconsole/webconsole-ui.js b/devtools/client/webconsole/webconsole-ui.js index 02b88ae6750d..914cf9b22dad 100644 --- a/devtools/client/webconsole/webconsole-ui.js +++ b/devtools/client/webconsole/webconsole-ui.js @@ -68,7 +68,6 @@ class WebConsoleUI { this._onResourceAvailable = this._onResourceAvailable.bind(this); this._onNetworkResourceUpdated = this._onNetworkResourceUpdated.bind(this); this._onScopePrefChanged = this._onScopePrefChanged.bind(this); - this._onShowConsoleEvaluation = this._onShowConsoleEvaluation.bind(this); if (this.isBrowserConsole) { Services.prefs.addObserver( @@ -128,7 +127,6 @@ class WebConsoleUI { // console is initialized. Otherwise `showToolbox` will resolve before // all already existing console messages are displayed. await this.wrapper.waitAsyncDispatches(); - this._initNotifications(); })(); return this._initializer; @@ -158,10 +156,6 @@ class WebConsoleUI { toolbox.off("webconsole-selected", this._onPanelSelected); toolbox.off("split-console", this._onChangeSplitConsoleState); toolbox.off("select", this._onChangeSplitConsoleState); - toolbox.off( - "show-original-variable-mapping-warnings", - this._onShowConsoleEvaluation - ); } if (this.isBrowserConsole) { @@ -630,20 +624,6 @@ class WebConsoleUI { ); } - _initNotifications() { - if (this.hud.toolbox) { - this.wrapper.toggleOriginalVariableMappingEvaluationNotification( - !!this.hud.toolbox - .getPanel("jsdebugger") - ?.shouldShowOriginalVariableMappingWarnings() - ); - this.hud.toolbox.on( - "show-original-variable-mapping-warnings", - this._onShowConsoleEvaluation - ); - } - } - _initShortcuts() { const shortcuts = new KeyShortcuts({ window: this.window, @@ -715,12 +695,6 @@ class WebConsoleUI { } } - _onShowConsoleEvaluation(isOriginalVariableMappingEnabled) { - this.wrapper.toggleOriginalVariableMappingEvaluationNotification( - isOriginalVariableMappingEnabled - ); - } - getInputCursor() { return this.jsterm && this.jsterm.getSelectionStart(); } diff --git a/devtools/client/webconsole/webconsole-wrapper.js b/devtools/client/webconsole/webconsole-wrapper.js index acfc43c3cd04..82613583486e 100644 --- a/devtools/client/webconsole/webconsole-wrapper.js +++ b/devtools/client/webconsole/webconsole-wrapper.js @@ -472,14 +472,6 @@ class WebConsoleWrapper { closeSplitConsole() { this.toolbox.closeSplitConsole(); } - - toggleOriginalVariableMappingEvaluationNotification(show) { - store.dispatch( - actions.showEvaluationNotification( - show ? Constants.ORIGINAL_VARIABLE_MAPPING : "" - ) - ); - } } // Exports from this module