Bug 1576679 - Turn on inline preview by default r=jlast
authorDavid Walsh <dwalsh@mozilla.com>
Tue, 27 Aug 2019 21:48:49 +0000
changeset 554050 19cf8e37f2868369ee8ca86a81074b15b71b3dc8
parent 554049 689d2a67147048b5545b5a394c50087d175fcfba
child 554051 663d87d66315567920932d793885182fcda014fe
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1576679
milestone70.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 1576679 - Turn on inline preview by default r=jlast Differential Revision: https://phabricator.services.mozilla.com/D43490
devtools/client/debugger/src/actions/tests/pending-breakpoints.spec.js
devtools/client/debugger/src/actions/types/UIAction.js
devtools/client/debugger/src/actions/ui.js
devtools/client/debugger/src/components/Editor/index.js
devtools/client/debugger/src/components/Editor/menus/editor.js
devtools/client/debugger/src/reducers/ui.js
devtools/client/locales/en-US/debugger.properties
devtools/client/preferences/debugger.js
devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe.js
devtools/client/webconsole/test/browser/browser_webconsole_eval_in_debugger_stackframe2.js
devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_while_debugging_and_inspecting.js
--- a/devtools/client/debugger/src/actions/tests/pending-breakpoints.spec.js
+++ b/devtools/client/debugger/src/actions/tests/pending-breakpoints.spec.js
@@ -25,16 +25,19 @@ jest.mock("../../utils/prefs", () => ({
   prefs: {
     clientSourceMapsEnabled: true,
     expressions: [],
   },
   asyncStore: {
     pendingBreakpoints: {},
   },
   clear: jest.fn(),
+  features: {
+    inlinePreview: true,
+  },
 }));
 
 import {
   createStore,
   selectors,
   actions,
   makeSource,
   makeSourceURL,
--- a/devtools/client/debugger/src/actions/types/UIAction.js
+++ b/devtools/client/debugger/src/actions/types/UIAction.js
@@ -26,16 +26,20 @@ export type UIAction =
   | {|
       +type: "CLOSE_QUICK_OPEN",
     |}
   | {|
       +type: "TOGGLE_FRAMEWORK_GROUPING",
       +value: boolean,
     |}
   | {|
+      +type: "TOGGLE_INLINE_PREVIEW",
+      +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
@@ -72,16 +72,25 @@ export function toggleFrameworkGrouping(
   return ({ dispatch, getState }: ThunkArgs) => {
     dispatch({
       type: "TOGGLE_FRAMEWORK_GROUPING",
       value: toggleValue,
     });
   };
 }
 
+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);
     if (!source) {
       return;
     }
 
     if (getPaneCollapse(getState(), "start")) {
--- a/devtools/client/debugger/src/components/Editor/index.js
+++ b/devtools/client/debugger/src/components/Editor/index.js
@@ -32,16 +32,17 @@ import {
   getSelectedLocation,
   getSelectedSourceWithContent,
   getConditionalPanelLocation,
   getSymbols,
   getIsPaused,
   getCurrentThread,
   getThreadContext,
   getSkipPausing,
+  getInlinePreview,
 } from "../../selectors";
 
 // Redux actions
 import actions from "../../actions";
 
 import SearchBar from "./SearchBar";
 import HighlightLines from "./HighlightLines";
 import Preview from "./Preview";
@@ -98,16 +99,17 @@ export type Props = {
   selectedSource: ?SourceWithContent,
   searchOn: boolean,
   startPanelSize: number,
   endPanelSize: number,
   conditionalPanelLocation: SourceLocation,
   symbols: SymbolDeclarations,
   isPaused: boolean,
   skipPausing: boolean,
+  inlinePreviewEnabled: boolean,
 
   // Actions
   openConditionalPanel: typeof actions.openConditionalPanel,
   closeConditionalPanel: typeof actions.closeConditionalPanel,
   continueToHere: typeof actions.continueToHere,
   addBreakpointAtLine: typeof actions.addBreakpointAtLine,
   jumpToMappedLocation: typeof actions.jumpToMappedLocation,
   toggleBreakpointAtLine: typeof actions.toggleBreakpointAtLine,
@@ -579,16 +581,17 @@ class Editor extends PureComponent<Props
   }
 
   renderItems() {
     const {
       cx,
       selectedSource,
       conditionalPanelLocation,
       isPaused,
+      inlinePreviewEnabled,
     } = this.props;
     const { editor, contextMenu } = this.state;
 
     if (!selectedSource || !editor || !getDocument(selectedSource.id)) {
       return null;
     }
 
     return (
@@ -606,17 +609,17 @@ class Editor extends PureComponent<Props
             clearContextMenu={this.clearContextMenu}
             selectedSource={selectedSource}
           />
         }
         {conditionalPanelLocation ? <ConditionalPanel editor={editor} /> : null}
         {features.columnBreakpoints ? (
           <ColumnBreakpoints editor={editor} />
         ) : null}
-        {isPaused && features.inlinePreview ? (
+        {isPaused && inlinePreviewEnabled ? (
           <InlinePreviews editor={editor} selectedSource={selectedSource} />
         ) : null}
       </div>
     );
   }
 
   renderSearchBar() {
     const { editor } = this.state;
@@ -660,16 +663,17 @@ const mapStateToProps = state => {
     cx: getThreadContext(state),
     selectedLocation: getSelectedLocation(state),
     selectedSource,
     searchOn: getActiveSearch(state) === "file",
     conditionalPanelLocation: getConditionalPanelLocation(state),
     symbols: getSymbols(state, selectedSource),
     isPaused: getIsPaused(state, getCurrentThread(state)),
     skipPausing: getSkipPausing(state),
+    inlinePreviewEnabled: getInlinePreview(state),
   };
 };
 
 const mapDispatchToProps = dispatch => ({
   ...bindActionCreators(
     {
       openConditionalPanel: actions.openConditionalPanel,
       closeConditionalPanel: actions.closeConditionalPanel,
--- a/devtools/client/debugger/src/components/Editor/menus/editor.js
+++ b/devtools/client/debugger/src/components/Editor/menus/editor.js
@@ -10,16 +10,17 @@ import { isOriginalId } from "devtools-s
 import { copyToTheClipboard } from "../../../utils/clipboard";
 import {
   getRawSourceURL,
   getFilename,
   shouldBlackbox,
 } from "../../../utils/source";
 
 import { downloadFile } from "../../../utils/utils";
+import { features } from "../../../utils/prefs";
 
 import { isFulfilled } from "../../../utils/async-value";
 import actions from "../../../actions";
 
 import type {
   Source,
   SourceLocation,
   SourceContent,
@@ -154,16 +155,24 @@ const downloadFileItem = (
   editorActions: EditorItemActions
 ) => ({
   id: "node-menu-download-file",
   label: L10N.getStr("downloadFile.label"),
   accesskey: L10N.getStr("downloadFile.accesskey"),
   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,
   selectedSource,
   location,
   selectionText,
   hasMappedLocation,
   isTextSelected,
@@ -213,35 +222,39 @@ export function editorMenuItems({
   if (isTextSelected) {
     items.push(
       { type: "separator" },
       watchExpressionItem(cx, selectedSource, selectionText, editorActions),
       evaluateInConsoleItem(selectedSource, selectionText, editorActions)
     );
   }
 
+  items.push({ type: "separator" }, inlinePreviewItem(editorActions));
+
   return items;
 }
 
 export type EditorItemActions = {
   addExpression: typeof actions.addExpression,
   continueToHere: typeof actions.continueToHere,
   evaluateInConsole: typeof actions.evaluateInConsole,
   flashLineRange: typeof actions.flashLineRange,
   jumpToMappedLocation: typeof actions.jumpToMappedLocation,
   showSource: typeof actions.showSource,
   toggleBlackBox: typeof actions.toggleBlackBox,
+  toggleInlinePreview: typeof actions.toggleInlinePreview,
 };
 
 export function editorItemActions(dispatch: Function) {
   return bindActionCreators(
     {
       addExpression: actions.addExpression,
       continueToHere: actions.continueToHere,
       evaluateInConsole: actions.evaluateInConsole,
       flashLineRange: actions.flashLineRange,
       jumpToMappedLocation: actions.jumpToMappedLocation,
       showSource: actions.showSource,
       toggleBlackBox: actions.toggleBlackBox,
+      toggleInlinePreview: actions.toggleInlinePreview,
     },
     dispatch
   );
 }
--- a/devtools/client/debugger/src/reducers/ui.js
+++ b/devtools/client/debugger/src/reducers/ui.js
@@ -4,17 +4,17 @@
 
 // @flow
 
 /**
  * UI reducer
  * @module reducers/ui
  */
 
-import { prefs } from "../utils/prefs";
+import { prefs, features } from "../utils/prefs";
 
 import type { Source, Range, SourceLocation } from "../types";
 
 import type { Action, panelPositionType } from "../actions/types";
 
 export type ActiveSearchType = "project" | "file";
 
 export type OrientationType = "horizontal" | "vertical";
@@ -32,43 +32,50 @@ export type UIState = {
   viewport: ?Range,
   highlightedLineRange?: {
     start?: number,
     end?: number,
     sourceId?: number,
   },
   conditionalPanelLocation: null | SourceLocation,
   isLogPoint: boolean,
+  inlinePreviewEnabled: 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,
+  inlinePreviewEnabled: features.inlinePreview,
 });
 
 function update(state: UIState = createUIState(), action: Action): UIState {
   switch (action.type) {
     case "TOGGLE_ACTIVE_SEARCH": {
       return { ...state, activeSearch: action.value };
     }
 
     case "TOGGLE_FRAMEWORK_GROUPING": {
       prefs.frameworkGroupingOn = action.value;
       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 };
     }
 
     case "SHOW_SOURCE": {
       return { ...state, shownSource: action.source };
     }
 
@@ -180,9 +187,13 @@ export function getLogPointStatus(state:
 export function getOrientation(state: OuterState): OrientationType {
   return state.ui.orientation;
 }
 
 export function getViewport(state: OuterState) {
   return state.ui.viewport;
 }
 
+export function getInlinePreview(state: OuterState) {
+  return state.ui.inlinePreviewEnabled;
+}
+
 export default update;
--- a/devtools/client/locales/en-US/debugger.properties
+++ b/devtools/client/locales/en-US/debugger.properties
@@ -425,16 +425,24 @@ editor.conditionalPanel.logPoint.placeho
 editor.jumpToMappedLocation1=Jump to %S location
 editor.jumpToMappedLocation1.accesskey=m
 
 # LOCALIZATION NOTE (downloadFile.label): Context menu item
 # for downloading a source's content
 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
 framework.disableGrouping.accesskey=u
 
 # LOCALIZATION NOTE (framework.enableGrouping): This is the text that appears in the
 # context menu to enable framework grouping.
 framework.enableGrouping=Enable framework grouping
--- a/devtools/client/preferences/debugger.js
+++ b/devtools/client/preferences/debugger.js
@@ -78,9 +78,9 @@ pref("devtools.debugger.features.skip-pa
 pref("devtools.debugger.features.autocomplete-expressions", false);
 pref("devtools.debugger.features.map-expression-bindings", true);
 pref("devtools.debugger.features.xhr-breakpoints", true);
 pref("devtools.debugger.features.original-blackbox", true);
 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);
--- 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
@@ -7,16 +7,20 @@
 "use strict";
 /* import-globals-from head.js*/
 
 const TEST_URI =
   "http://example.com/browser/devtools/client/webconsole/" +
   "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);
 
   info("Check `foo` value");
   await executeAndWaitForMessage(hud, "foo", "globalFooBug783499", ".result");
   ok(true, "|foo| value is correct");
 
   info("Assign and check `foo2` value");
--- 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
@@ -7,16 +7,20 @@
 
 "use strict";
 
 const TEST_URI =
   "http://example.com/browser/devtools/client/webconsole/" +
   "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);
 
   info("open the debugger");
   await openDebugger();
 
   const toolbox = hud.toolbox;
   const dbg = createDebuggerContext(toolbox);
--- 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
@@ -6,16 +6,20 @@
 
 "use strict";
 
 const TEST_URI =
   "https://example.com/browser/devtools/client/webconsole/" +
   "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");
   await openDebugger();
 
   info("Switch to the inspector");
   const target = await TargetFactory.forTab(gBrowser.selectedTab);
   await gDevTools.showToolbox(target, "inspector");