Bug 1858652 - [devtools] Hide previews for original sources when variable mapping is turned off r=devtools-reviewers,ochameau,nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D190814

devtools/client/debugger/src/components/App.css

@@ -56,6 +56,29 @@ 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 */

devtools/client/debugger/src/components/App.js

@@ -3,12 +3,13 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 import React, { Component } from "react";
-import { div, main } from "react-dom-factories";
+import { div, main, span } 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,
@@ -16,6 +17,8 @@ import {
   getActiveSearch,
   getQuickOpenEnabled,
   getOrientation,
+  getIsCurrentThreadPaused,
+  isMapScopesEnabled,
 } from "../selectors";
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 
@@ -68,6 +71,7 @@ class App extends Component {
       setPrimaryPaneTab: PropTypes.func.isRequired,
       startPanelCollapsed: PropTypes.bool.isRequired,
       toolboxDoc: PropTypes.object.isRequired,
+      showOriginalVariableMappingWarning: PropTypes.bool,
     };
   }
 
@@ -203,6 +207,23 @@ 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;
@@ -230,6 +251,7 @@ class App extends Component {
               toggleShortcutsModal: () => this.toggleShortcutsModal(),
             })
           : null,
+        this.renderEditorNotificationBar(),
         React.createElement(EditorFooter, {
           horizontal,
         })
@@ -328,14 +350,27 @@ App.childContextTypes = {
   fluentBundles: PropTypes.array,
 };
 
-const mapStateToProps = state => ({
-  selectedSource: getSelectedSource(state),
-  startPanelCollapsed: getPaneCollapse(state, "start"),
-  endPanelCollapsed: getPaneCollapse(state, "end"),
-  activeSearch: getActiveSearch(state),
-  quickOpenEnabled: getQuickOpenEnabled(state),
-  orientation: getOrientation(state),
-});
+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),
+  };
+};
 
 export default connect(mapStateToProps, {
   setActiveSearch: actions.setActiveSearch,

devtools/client/debugger/src/components/Editor/Editor.css

@@ -42,11 +42,9 @@
  * BUG https://github.com/firefox-devtools/debugger/issues/63
  */
 .editor-wrapper {
-  position: absolute;
   width: calc(100% - 1px);
-  top: var(--editor-header-height);
-  bottom: var(--editor-footer-height);
-  left: 0px;
+  overflow-y: auto;
+  grid-area: editor;
 }
 
 html[dir="rtl"] .editor-mount {

devtools/client/debugger/src/components/Editor/Footer.css

@@ -5,13 +5,9 @@
 .source-footer {
   background: var(--theme-body-background);
   border-top: 1px solid var(--theme-splitter-color);
-  position: absolute;
+  grid-area: editor-footer;
   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);

devtools/client/debugger/src/components/Editor/Tabs.css

@@ -3,6 +3,7 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .source-header {
+  grid-area: editor-header;
   display: flex;
   width: 100%;
   height: var(--editor-header-height);

devtools/client/debugger/src/components/Editor/index.js

@@ -29,6 +29,7 @@ import {
   getHighlightedLineRangeForSelectedSource,
   isSourceMapIgnoreListEnabled,
   isSourceOnSourceMapIgnoreList,
+  isMapScopesEnabled,
 } from "../../selectors";
 
 // Redux actions
@@ -119,6 +120,7 @@ class Editor extends PureComponent {
       breakableLines: PropTypes.object.isRequired,
       highlightedLineRange: PropTypes.object,
       isSourceOnIgnoreList: PropTypes.bool,
+      mapScopesEnabled: PropTypes.bool,
     };
   }
 
@@ -622,6 +624,7 @@ class Editor extends PureComponent {
       blackboxedRanges,
       isSourceOnIgnoreList,
       selectedSourceIsBlackBoxed,
+      mapScopesEnabled,
     } = this.props;
     const { editor } = this.state;
 
@@ -638,10 +641,15 @@ class Editor extends PureComponent {
       React.createElement(Breakpoints, {
         editor,
       }),
-      React.createElement(Preview, {
-        editor,
-        editorRef: this.$editorWrapper,
-      }),
+      isPaused &&
+        selectedSource.isOriginal &&
+        !selectedSource.isPrettyPrinted &&
+        !mapScopesEnabled
+        ? null
+        : React.createElement(Preview, {
+            editor,
+            editorRef: this.$editorWrapper,
+          }),
       highlightedLineRange
         ? React.createElement(HighlightLines, {
             editor,
@@ -666,7 +674,11 @@ class Editor extends PureComponent {
       React.createElement(ColumnBreakpoints, {
         editor,
       }),
-      isPaused && inlinePreviewEnabled
+      isPaused &&
+        inlinePreviewEnabled &&
+        (!selectedSource.isOriginal ||
+          (selectedSource.isOriginal && selectedSource.isPrettyPrinted) ||
+          (selectedSource.isOriginal && mapScopesEnabled))
         ? React.createElement(InlinePreviews, {
             editor,
             selectedSource,
@@ -731,6 +743,9 @@ const mapStateToProps = state => {
     blackboxedRanges: getBlackBoxRanges(state),
     breakableLines: getSelectedBreakableLines(state),
     highlightedLineRange: getHighlightedLineRangeForSelectedSource(state),
+    mapScopesEnabled: selectedSource?.isOriginal
+      ? isMapScopesEnabled(state)
+      : null,
   };
 };
 

devtools/client/debugger/test/mochitest/browser_dbg-preview-source-maps.js

@@ -36,9 +36,3 @@ 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");
-}

devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js

@@ -9,30 +9,61 @@ 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 waitForPausedInOriginalFileAndToggleMapScopes(dbg);
+  await waitForPaused(dbg);
 
   ok(getOriginalScope(dbg) != null, "Scopes are now mapped");
 
-  await assertPreviewTextValue(dbg, 20, 17, {
+  ok(!findFooterNotificationMessage(dbg), "No footer notification message");
+  await assertPreviewTextValue(dbg, 20, 20, {
     result: '"a-default"',
     expression: "aDefault",
   });
 
-  info("3. Hover on a token with mapScopes disabled");
+  info("3. Disable original variable mapping");
   await toggleMapScopes(dbg);
-  // Add assertion for inline preview disabled and footer notification
+
+  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"
+  );
+
   info("4. StepOver with mapScopes disabled");
   await stepOver(dbg, { shouldWaitForLoadedScopes: false });
-  // Add assertion for inline preview disabled and footer notification
+
+  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"
+  );
 });
 
 function getOriginalScope(dbg) {
@@ -40,3 +71,8 @@ function getOriginalScope(dbg) {
     dbg.selectors.getCurrentThread()
   );
 }
+
+function findFooterNotificationMessage(dbg) {
+  return dbg.win.document.querySelector(".editor-notification-footer")
+    ?.innerText;
+}

devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps-reloading.js

@@ -32,7 +32,6 @@ add_task(async function () {
   await waitForDispatch(dbg.store, "LOAD_ORIGINAL_SOURCE_TEXT");
 
   await waitForPausedInOriginalFileAndToggleMapScopes(dbg, "entry.js");
-  await waitForDispatch(dbg.store, "ADD_INLINE_PREVIEW");
   assertPausedAtSourceAndLine(dbg, findSource(dbg, "entry.js").id, 5);
 
   await waitForBreakpointCount(dbg, 2);

devtools/client/debugger/test/mochitest/shared-head.js

@@ -879,14 +879,15 @@ function countTabs(dbg) {
  *
  * @memberof mochitest/actions
  * @param {Object} dbg
+ * @param {Object} pauseOptions
  * @return {Promise}
  * @static
  */
-async function stepOver(dbg) {
+async function stepOver(dbg, pauseOptions) {
   const pauseLine = getVisibleSelectedFrameLine(dbg);
   info(`Stepping over from ${pauseLine}`);
   await dbg.actions.stepOver();
-  return waitForPaused(dbg);
+  return waitForPaused(dbg, null, pauseOptions);
 }
 
 /**
@@ -2431,6 +2432,16 @@ 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

devtools/client/locales/en-US/debugger.properties

@@ -726,6 +726,11 @@ 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