diff --git a/devtools/client/debugger/src/actions/tests/pending-breakpoints.spec.js b/devtools/client/debugger/src/actions/tests/pending-breakpoints.spec.js index cf1f61955ec2..31b42d45da8e 100644 --- a/devtools/client/debugger/src/actions/tests/pending-breakpoints.spec.js +++ b/devtools/client/debugger/src/actions/tests/pending-breakpoints.spec.js @@ -30,6 +30,9 @@ jest.mock("../../utils/prefs", () => ({ pendingBreakpoints: {}, }, clear: jest.fn(), + features: { + inlinePreview: true, + }, })); import { diff --git a/devtools/client/debugger/src/actions/types/UIAction.js b/devtools/client/debugger/src/actions/types/UIAction.js index 39ff41e6ccd3..e9888b88ae75 100644 --- a/devtools/client/debugger/src/actions/types/UIAction.js +++ b/devtools/client/debugger/src/actions/types/UIAction.js @@ -30,6 +30,10 @@ export type UIAction = +type: "TOGGLE_FRAMEWORK_GROUPING", +value: boolean, |} + | {| + +type: "TOGGLE_INLINE_PREVIEW", + +value: boolean, + |} | {| +type: "SHOW_SOURCE", +source: Source, diff --git a/devtools/client/debugger/src/actions/ui.js b/devtools/client/debugger/src/actions/ui.js index 48673b26098c..7aeed2fd55f1 100644 --- a/devtools/client/debugger/src/actions/ui.js +++ b/devtools/client/debugger/src/actions/ui.js @@ -77,6 +77,15 @@ export function toggleFrameworkGrouping(toggleValue: boolean) { }; } +export function toggleInlinePreview(toggleValue: boolean) { + return ({ dispatch, getState }: ThunkArgs) => { + dispatch({ + type: "TOGGLE_INLINE_PREVIEW", + value: toggleValue, + }); + }; +} + export function showSource(cx: Context, sourceId: string) { return ({ dispatch, getState }: ThunkArgs) => { const source = getSource(getState(), sourceId); diff --git a/devtools/client/debugger/src/components/Editor/index.js b/devtools/client/debugger/src/components/Editor/index.js index 3e48897ba0b4..e622c13f0fe4 100644 --- a/devtools/client/debugger/src/components/Editor/index.js +++ b/devtools/client/debugger/src/components/Editor/index.js @@ -37,6 +37,7 @@ import { getCurrentThread, getThreadContext, getSkipPausing, + getInlinePreview, } from "../../selectors"; // Redux actions @@ -103,6 +104,7 @@ export type Props = { symbols: SymbolDeclarations, isPaused: boolean, skipPausing: boolean, + inlinePreviewEnabled: boolean, // Actions openConditionalPanel: typeof actions.openConditionalPanel, @@ -584,6 +586,7 @@ class Editor extends PureComponent { selectedSource, conditionalPanelLocation, isPaused, + inlinePreviewEnabled, } = this.props; const { editor, contextMenu } = this.state; @@ -611,7 +614,7 @@ class Editor extends PureComponent { {features.columnBreakpoints ? ( ) : null} - {isPaused && features.inlinePreview ? ( + {isPaused && inlinePreviewEnabled ? ( ) : null} @@ -665,6 +668,7 @@ const mapStateToProps = state => { symbols: getSymbols(state, selectedSource), isPaused: getIsPaused(state, getCurrentThread(state)), skipPausing: getSkipPausing(state), + inlinePreviewEnabled: getInlinePreview(state), }; }; diff --git a/devtools/client/debugger/src/components/Editor/menus/editor.js b/devtools/client/debugger/src/components/Editor/menus/editor.js index ae7034eda58e..5d2c0d226b74 100644 --- a/devtools/client/debugger/src/components/Editor/menus/editor.js +++ b/devtools/client/debugger/src/components/Editor/menus/editor.js @@ -15,6 +15,7 @@ import { } from "../../../utils/source"; import { downloadFile } from "../../../utils/utils"; +import { features } from "../../../utils/prefs"; import { isFulfilled } from "../../../utils/async-value"; import actions from "../../../actions"; @@ -159,6 +160,14 @@ const downloadFileItem = ( click: () => downloadFile(selectedContent, getFilename(selectedSource)), }); +const inlinePreviewItem = (editorActions: EditorItemActions) => ({ + id: "node-menu-inline-preview", + label: features.inlinePreview + ? L10N.getStr("inlinePreview.disable.label") + : L10N.getStr("inlinePreview.enable.label"), + click: () => editorActions.toggleInlinePreview(!features.inlinePreview), +}); + export function editorMenuItems({ cx, editorActions, @@ -218,6 +227,8 @@ export function editorMenuItems({ ); } + items.push({ type: "separator" }, inlinePreviewItem(editorActions)); + return items; } @@ -229,6 +240,7 @@ export type EditorItemActions = { jumpToMappedLocation: typeof actions.jumpToMappedLocation, showSource: typeof actions.showSource, toggleBlackBox: typeof actions.toggleBlackBox, + toggleInlinePreview: typeof actions.toggleInlinePreview, }; export function editorItemActions(dispatch: Function) { @@ -241,6 +253,7 @@ export function editorItemActions(dispatch: Function) { jumpToMappedLocation: actions.jumpToMappedLocation, showSource: actions.showSource, toggleBlackBox: actions.toggleBlackBox, + toggleInlinePreview: actions.toggleInlinePreview, }, dispatch ); diff --git a/devtools/client/debugger/src/reducers/ui.js b/devtools/client/debugger/src/reducers/ui.js index 0efb92d43818..720fd18677c8 100644 --- a/devtools/client/debugger/src/reducers/ui.js +++ b/devtools/client/debugger/src/reducers/ui.js @@ -9,7 +9,7 @@ * @module reducers/ui */ -import { prefs } from "../utils/prefs"; +import { prefs, features } from "../utils/prefs"; import type { Source, Range, SourceLocation } from "../types"; @@ -37,6 +37,7 @@ export type UIState = { }, conditionalPanelLocation: null | SourceLocation, isLogPoint: boolean, + inlinePreviewEnabled: boolean, }; export const createUIState = (): UIState => ({ @@ -51,6 +52,7 @@ export const createUIState = (): UIState => ({ isLogPoint: false, orientation: "horizontal", viewport: null, + inlinePreviewEnabled: features.inlinePreview, }); function update(state: UIState = createUIState(), action: Action): UIState { @@ -64,6 +66,11 @@ function update(state: UIState = createUIState(), action: Action): UIState { return { ...state, frameworkGroupingOn: action.value }; } + case "TOGGLE_INLINE_PREVIEW": { + features.inlinePreview = action.value; + return { ...state, inlinePreviewEnabled: action.value }; + } + case "SET_ORIENTATION": { return { ...state, orientation: action.orientation }; } @@ -185,4 +192,8 @@ export function getViewport(state: OuterState) { return state.ui.viewport; } +export function getInlinePreview(state: OuterState) { + return state.ui.inlinePreviewEnabled; +} + export default update; diff --git a/devtools/client/locales/en-US/debugger.properties b/devtools/client/locales/en-US/debugger.properties index f42e1eecd72e..18066f5012c5 100644 --- a/devtools/client/locales/en-US/debugger.properties +++ b/devtools/client/locales/en-US/debugger.properties @@ -430,6 +430,14 @@ editor.jumpToMappedLocation1.accesskey=m downloadFile.label=Download file downloadFile.accesskey=d +# LOCALIZATION NOTE (inlinePreview.enable.label): Context menu item +# for enabling the inline preview feature +inlinePreview.enable.label=Enable inline preview + +# LOCALIZATION NOTE (inlinePreview.disable.label): Context menu item +# for disabling the inline preview feature +inlinePreview.disable.label=Disable inline preview + # LOCALIZATION NOTE (framework.disableGrouping): This is the text that appears in the # context menu to disable framework grouping. framework.disableGrouping=Disable framework grouping diff --git a/devtools/client/preferences/debugger.js b/devtools/client/preferences/debugger.js index a21278e7cd4f..080870ff33ba 100644 --- a/devtools/client/preferences/debugger.js +++ b/devtools/client/preferences/debugger.js @@ -83,4 +83,4 @@ pref("devtools.debugger.features.event-listeners-breakpoints", true); pref("devtools.debugger.features.dom-mutation-breakpoints", true); pref("devtools.debugger.features.log-points", true); pref("devtools.debugger.features.overlay-step-buttons", false); -pref("devtools.debugger.features.inline-preview", false); +pref("devtools.debugger.features.inline-preview", true); diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe.js b/devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe.js index 93b0202a89b5..a52d61208d72 100644 --- a/devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe.js +++ b/devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe.js @@ -12,6 +12,10 @@ const TEST_URI = "test/browser/test-eval-in-stackframe.html"; add_task(async function() { + // TODO: Remove this pref change when middleware for terminating requests + // when closing a panel is implemented + await pushPref("devtools.debugger.features.inline-preview", false); + info("open the console"); const hud = await openNewTabAndConsole(TEST_URI); diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe2.js b/devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe2.js index 359575224929..76d9d91cb8b1 100644 --- a/devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe2.js +++ b/devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe2.js @@ -12,6 +12,10 @@ const TEST_URI = "test/browser/test-eval-in-stackframe.html"; add_task(async function() { + // TODO: Remove this pref change when middleware for terminating requests + // when closing a panel is implemented + await pushPref("devtools.debugger.features.inline-preview", false); + info("open the console"); const hud = await openNewTabAndConsole(TEST_URI); diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_while_debugging_and_inspecting.js b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_while_debugging_and_inspecting.js index 63a2f5769993..cba19fa1616a 100644 --- a/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_while_debugging_and_inspecting.js +++ b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_while_debugging_and_inspecting.js @@ -11,6 +11,10 @@ const TEST_URI = "test/browser/test-eval-in-stackframe.html"; add_task(async function() { + // TODO: Remove this pref change when middleware for terminating requests + // when closing a panel is implemented + await pushPref("devtools.debugger.features.inline-preview", false); + const hud = await openNewTabAndConsole(TEST_URI); info("Switch to the debugger");