Bug 1631975 - Add settings controls to DevTools debugger r=jlast
authorDavid Walsh <dwalsh@mozilla.com>
Fri, 15 May 2020 16:42:31 +0000
changeset 530313 7d998f89d91f35f32ac025ead214a6d842da7f0b
parent 530312 f1e45d3ca0f66c89ab450774c079123fe04c60f1
child 530314 bbfd67d32c72833c5fbc453d5397609086fd74cd
push id37420
push usernerli@mozilla.com
push dateFri, 15 May 2020 21:52:36 +0000
treeherdermozilla-central@f340bbb582d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1631975
milestone78.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1631975 - Add settings controls to DevTools debugger r=jlast Differential Revision: https://phabricator.services.mozilla.com/D73380
devtools/client/debugger/src/actions/types/UIAction.js
devtools/client/debugger/src/actions/ui.js
devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
devtools/client/debugger/src/reducers/ui.js
devtools/client/locales/en-US/debugger.properties
--- a/devtools/client/debugger/src/actions/types/UIAction.js
+++ b/devtools/client/debugger/src/actions/types/UIAction.js
@@ -30,16 +30,20 @@ export type UIAction =
       +type: "TOGGLE_FRAMEWORK_GROUPING",
       +value: boolean,
     |}
   | {|
       +type: "TOGGLE_INLINE_PREVIEW",
       +value: boolean,
     |}
   | {|
+      +type: "TOGGLE_SOURCE_MAPS_ENABLED",
+      +value: boolean,
+    |}
+  | {|
       +type: "SHOW_SOURCE",
       +source: Source,
     |}
   | {|
       +type: "TOGGLE_PANE",
       +position: panelPositionType,
       +paneCollapsed: boolean,
     |}
--- a/devtools/client/debugger/src/actions/ui.js
+++ b/devtools/client/debugger/src/actions/ui.js
@@ -84,16 +84,25 @@ export function toggleInlinePreview(togg
   return ({ dispatch, getState }: ThunkArgs) => {
     dispatch({
       type: "TOGGLE_INLINE_PREVIEW",
       value: toggleValue,
     });
   };
 }
 
+export function toggleSourceMapsEnabled(toggleValue: boolean) {
+  return ({ dispatch, getState }: ThunkArgs) => {
+    dispatch({
+      type: "TOGGLE_SOURCE_MAPS_ENABLED",
+      value: toggleValue,
+    });
+  };
+}
+
 export function showSource(cx: Context, sourceId: SourceId) {
   return ({ dispatch, getState }: ThunkArgs) => {
     const source = getSource(getState(), sourceId);
     if (!source) {
       return;
     }
 
     if (getPaneCollapse(getState(), "start")) {
--- a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
@@ -4,17 +4,17 @@
 
 // @flow
 
 import PropTypes from "prop-types";
 import React, { Component } from "react";
 
 import { connect } from "../../utils/connect";
 import classnames from "classnames";
-import { features, javascriptPrefs } from "../../utils/prefs";
+import { features, javascriptPrefs, prefs } from "../../utils/prefs";
 import {
   getIsWaitingOnBreak,
   getSkipPausing,
   getCurrentThread,
   isTopFrameSelected,
   getThreadContext,
 } from "../../selectors";
 import { formatKeyShortcut } from "../../utils/text";
@@ -93,16 +93,18 @@ type Props = {
   topFrameSelected: boolean,
   resume: typeof actions.resume,
   stepIn: typeof actions.stepIn,
   stepOut: typeof actions.stepOut,
   stepOver: typeof actions.stepOver,
   breakOnNext: typeof actions.breakOnNext,
   pauseOnExceptions: typeof actions.pauseOnExceptions,
   toggleSkipPausing: typeof actions.toggleSkipPausing,
+  toggleInlinePreview: typeof actions.toggleInlinePreview,
+  toggleSourceMapsEnabled: typeof actions.toggleSourceMapsEnabled,
 };
 
 class CommandBar extends Component<Props> {
   componentWillUnmount() {
     const { shortcuts } = this.context;
 
     COMMANDS.forEach(action => shortcuts.off(getKey(action)));
 
@@ -258,16 +260,34 @@ class CommandBar extends Component<Props
           className="menu-item debugger-settings-menu-item-disable-javascript"
           checked={!javascriptPrefs.enableJavaScript}
           label={L10N.getStr("settings.disableJavaScript.label")}
           tooltip={L10N.getStr("settings.disableJavaScript.tooltip")}
           onClick={() => {
             javascriptPrefs.enableJavaScript = !javascriptPrefs.enableJavaScript;
           }}
         />
+        <MenuItem
+          key="debugger-settings-menu-item-disable-inline-previews"
+          checked={!features.inlinePreview}
+          label={L10N.getStr("inlinePreview.disable.label")}
+          tooltip={L10N.getStr("inlinePreview.disable.tooltip")}
+          onClick={() =>
+            this.props.toggleInlinePreview(!features.inlinePreview)
+          }
+        />
+        <MenuItem
+          key="debugger-settings-menu-item-disable-sourcemaps"
+          checked={!prefs.clientSourceMapsEnabled}
+          label={L10N.getStr("settings.disableSourceMaps.label")}
+          tooltip={L10N.getStr("settings.disableSourceMaps.tooltip")}
+          onClick={() =>
+            this.props.toggleSourceMapsEnabled(!prefs.clientSourceMapsEnabled)
+          }
+        />
       </MenuList>
     );
   }
 
   render() {
     return (
       <div
         className={classnames("command-bar", {
@@ -298,9 +318,11 @@ const mapStateToProps = state => ({
 export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps, {
   resume: actions.resume,
   stepIn: actions.stepIn,
   stepOut: actions.stepOut,
   stepOver: actions.stepOver,
   breakOnNext: actions.breakOnNext,
   pauseOnExceptions: actions.pauseOnExceptions,
   toggleSkipPausing: actions.toggleSkipPausing,
+  toggleInlinePreview: actions.toggleInlinePreview,
+  toggleSourceMapsEnabled: actions.toggleSourceMapsEnabled,
 })(CommandBar);
--- a/devtools/client/debugger/src/reducers/ui.js
+++ b/devtools/client/debugger/src/reducers/ui.js
@@ -1,13 +1,14 @@
 /* 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/>. */
 
 // @flow
+/* eslint complexity: ["error", 35]*/
 
 /**
  * UI reducer
  * @module reducers/ui
  */
 
 import { prefs, features } from "../utils/prefs";
 
@@ -34,32 +35,34 @@ export type UIState = {
   highlightedLineRange?: {
     start?: number,
     end?: number,
     sourceId?: number,
   },
   conditionalPanelLocation: null | SourceLocation,
   isLogPoint: boolean,
   inlinePreviewEnabled: boolean,
+  sourceMapsEnabled: boolean,
 };
 
 export const createUIState = (): UIState => ({
   selectedPrimaryPaneTab: "sources",
   activeSearch: null,
   shownSource: null,
   startPanelCollapsed: prefs.startPanelCollapsed,
   endPanelCollapsed: prefs.endPanelCollapsed,
   frameworkGroupingOn: prefs.frameworkGroupingOn,
   highlightedLineRange: undefined,
   conditionalPanelLocation: null,
   isLogPoint: false,
   orientation: "horizontal",
   viewport: null,
   cursorPosition: null,
   inlinePreviewEnabled: features.inlinePreview,
+  sourceMapsEnabled: prefs.clientSourceMapsEnabled,
 });
 
 function update(state: UIState = createUIState(), action: Action): UIState {
   switch (action.type) {
     case "TOGGLE_ACTIVE_SEARCH": {
       return { ...state, activeSearch: action.value };
     }
 
@@ -68,16 +71,21 @@ function update(state: UIState = createU
       return { ...state, frameworkGroupingOn: action.value };
     }
 
     case "TOGGLE_INLINE_PREVIEW": {
       features.inlinePreview = action.value;
       return { ...state, inlinePreviewEnabled: action.value };
     }
 
+    case "TOGGLE_SOURCE_MAPS_ENABLED": {
+      prefs.clientSourceMapsEnabled = action.value;
+      return { ...state, sourceMapsEnabled: action.value };
+    }
+
     case "SET_ORIENTATION": {
       return { ...state, orientation: action.orientation };
     }
 
     case "SHOW_SOURCE": {
       return { ...state, shownSource: action.source };
     }
 
--- a/devtools/client/locales/en-US/debugger.properties
+++ b/devtools/client/locales/en-US/debugger.properties
@@ -474,27 +474,43 @@ downloadFile.accesskey=d
 # LOCALIZATION NOTE (inlinePreview.show.label): Context menu item
 # for showing the inline preview blocks
 inlinePreview.show.label=Show inline preview
 
 # LOCALIZATION NOTE (inlinePreview.hide.label): Context menu item
 # for hiding the inline preview block
 inlinePreview.hide.label=Hide inline preview
 
+# LOCALIZATION NOTE (inlinePreview.disable.label): Context menu item
+# that will toggle display of inline preview
+inlinePreview.disable.label=Disable inline preview
+
+# LOCALIZATION NOTE (inlinePreview.disable.tooltip): Context menu item
+# tooltip that will describe disabling inline preview
+inlinePreview.disable.tooltip=Disables inline preview in the debugger editor
+
 # LOCALIZATION NOTE (settings.button.label): Label for Settings button
 settings.button.label=Debugger Settings
 
 # LOCALIZATION NOTE (settings.disableJavaScript.label): Context menu item
 # label for disabling JavaScript
 settings.disableJavaScript.label=Disable JavaScript
 
 # LOCALIZATION NOTE (settings.disableJavaScript.tooltip): Context menu item
 # tooltip for disabling JavaScript
 settings.disableJavaScript.tooltip=Disables JavaScript (Requires refresh)
 
+# LOCALIZATION NOTE (settings.disableSourceMaps.tooltip): Context menu item
+# tooltip for disabling source maps
+settings.disableSourceMaps.tooltip=Disables client source maps
+
+# LOCALIZATION NOTE (settings.disableSourceMaps.label): Context menu item
+# label for disabling source maps
+settings.disableSourceMaps.label=Disable source maps
+
 # LOCALIZATION NOTE (preview.noProperties): Label shown in the preview
 # popup when there are no properties to show.
 preview.noProperties=No properties
 
 # LOCALIZATION NOTE (framework.disableGrouping): This is the text that appears in the
 # context menu to disable framework grouping.
 framework.disableGrouping=Disable framework grouping
 framework.disableGrouping.accesskey=u