Bug 1576679 - Turn on inline preview by default r=jlast

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

--HG--
extra : moz-landing-system : lando

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 {

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,

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);

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<Props, State> {
       selectedSource,
       conditionalPanelLocation,
       isPaused,
+      inlinePreviewEnabled,
     } = this.props;
     const { editor, contextMenu } = this.state;
 
@@ -611,7 +614,7 @@ class Editor extends PureComponent<Props, State> {
         {features.columnBreakpoints ? (
           <ColumnBreakpoints editor={editor} />
         ) : null}
-        {isPaused && features.inlinePreview ? (
+        {isPaused && inlinePreviewEnabled ? (
           <InlinePreviews editor={editor} selectedSource={selectedSource} />
         ) : null}
       </div>
@@ -665,6 +668,7 @@ const mapStateToProps = state => {
     symbols: getSymbols(state, selectedSource),
     isPaused: getIsPaused(state, getCurrentThread(state)),
     skipPausing: getSkipPausing(state),
+    inlinePreviewEnabled: getInlinePreview(state),
   };
 };
 

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
   );

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;

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

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);

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);
 

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);
 

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");