Bug 1511717 - Pausing should jump to the first non-blackboxed frame. r=bhackett

Tags:

Bug #: 1511717

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

devtools/client/debugger/new/src/actions/pause/mapFrames.js

@@ -14,6 +14,18 @@ import type { ThunkArgs } from "../types";
 
 import { isGeneratedId } from "devtools-source-map";
 
+function getSelectedFrameId(state, frames) {
+  if (frames.length == 0) {
+    return null;
+  }
+
+  const selectedFrame =  frames.find(frame => 
+    !getSource(state, frame.location.sourceId).isBlackBoxed
+  )
+
+  return selectedFrame && selectedFrame.id
+}
+
 export function updateFrameLocation(frame: Frame, sourceMaps: any) {
   if (frame.isOriginal) {
     return Promise.resolve(frame);
@@ -149,9 +161,11 @@ export function mapFrames() {
     mappedFrames = await expandFrames(mappedFrames, sourceMaps, getState);
     mappedFrames = mapDisplayNames(mappedFrames, getState);
 
+    const selectedFrameId = getSelectedFrameId(getState(), mappedFrames)
     dispatch({
       type: "MAP_FRAMES",
-      frames: mappedFrames
+      frames: mappedFrames,
+      selectedFrameId
     });
   };
 }

devtools/client/debugger/new/src/actions/sources/blackbox.js

@@ -9,7 +9,9 @@
  * @module actions/sources
  */
 
+import { isOriginalId } from "devtools-source-map";
 import { recordEvent } from "../../utils/telemetry";
+import { features } from "../../utils/prefs";
 
 import { PROMISE } from "../utils/middleware/promise";
 import type { Source } from "../../types";
@@ -23,10 +25,17 @@ export function toggleBlackBox(source: Source) {
       recordEvent("blackbox");
     }
 
+    let promise;
+    if (features.originalBlackbox && isOriginalId(id)) {
+      promise = Promise.resolve({isBlackBoxed: !isBlackBoxed})
+    } else {
+      promise = client.blackBox(id, isBlackBoxed)
+    }
+
     return dispatch({
       type: "BLACKBOX",
       source,
-      [PROMISE]: client.blackBox(id, isBlackBoxed)
+      [PROMISE]: promise
     });
   };
 }

devtools/client/debugger/new/src/components/Editor/EditorMenu.js

@@ -14,7 +14,7 @@ import {
   getSourceLocationFromMouseEvent,
   toSourceLine
 } from "../../utils/editor";
-import { isPretty, getRawSourceURL } from "../../utils/source";
+import { isPretty, getRawSourceURL, shouldBlackbox } from "../../utils/source";
 import {
   getContextMenu,
   getPrettySource,
@@ -162,8 +162,7 @@ function getMenuItems(
     id: "node-menu-blackbox",
     label: toggleBlackBoxLabel,
     accesskey: blackboxKey,
-    disabled:
-      isOriginal || isPrettyPrinted || hasSourceMap || !selectedSource.url,
+    disabled: !shouldBlackbox(selectedSource),
     click: () => toggleBlackBox(selectedSource)
   };
 

devtools/client/debugger/new/src/components/Editor/Footer.js

@@ -19,7 +19,8 @@ import {
   isLoaded,
   getFilename,
   isOriginal,
-  isLoading
+  isLoading,
+  shouldBlackbox
 } from "../../utils/source";
 import { getGeneratedSource } from "../../reducers/sources";
 import { shouldShowFooter, shouldShowPrettyPrint } from "../../utils/editor";
@@ -107,7 +108,7 @@ class SourceFooter extends PureComponent<Props, State> {
     const { selectedSource, toggleBlackBox } = this.props;
     const sourceLoaded = selectedSource && isLoaded(selectedSource);
 
-    if (!sourceLoaded || selectedSource.isPrettyPrinted) {
+    if (!shouldBlackbox(selectedSource)) {
       return;
     }
 

devtools/client/debugger/new/src/reducers/pause.js

@@ -13,7 +13,7 @@
 import { createSelector } from "reselect";
 import { isGeneratedId } from "devtools-source-map";
 import { prefs } from "../utils/prefs";
-import { getSelectedSource } from "./sources";
+import { getSelectedSource, getSource } from "./sources";
 
 import type { OriginalScope } from "../utils/pause/mapScopes";
 import type { Action } from "../actions/types";
@@ -118,7 +118,11 @@ function update(
     }
 
     case "MAP_FRAMES": {
-      return { ...state, frames: action.frames };
+      return {
+        ...state,
+        frames: action.frames,
+        selectedFrameId: action.selectedFrameId
+      };
     }
 
     case "ADD_EXTRA": {

devtools/client/debugger/new/src/utils/prefs.js

@@ -61,6 +61,7 @@ if (isDevelopment()) {
   pref("devtools.debugger.features.map-expression-bindings", true);
   pref("devtools.debugger.features.map-await-expression", true);
   pref("devtools.debugger.features.xhr-breakpoints", true);
+  pref("devtools.debugger.features.origial-blackbox", false);
 }
 
 export const prefs = new PrefsHelper("devtools", {
@@ -113,7 +114,8 @@ export const features = new PrefsHelper("devtools.debugger.features", {
   mapExpressionBindings: ["Bool", "map-expression-bindings"],
   mapAwaitExpression: ["Bool", "map-await-expression"],
   componentPane: ["Bool", "component-pane"],
-  xhrBreakpoints: ["Bool", "xhr-breakpoints"]
+  xhrBreakpoints: ["Bool", "xhr-breakpoints"],
+  originalBlackbox: ["Bool", "origial-blackbox"],
 });
 
 export const asyncStore = asyncStoreHelper("debugger", {

devtools/client/debugger/new/src/utils/source.js

@@ -19,7 +19,7 @@ import { renderWasmText } from "./wasm";
 import { toEditorPosition } from "./editor";
 export { isMinified } from "./isMinified";
 import { getURL, getFileExtension } from "./sources-tree";
-import { prefs } from "./prefs";
+import { prefs, features } from "./prefs";
 
 import type { Source, SourceLocation, JsSource } from "../types";
 import type { SourceMetaDataType } from "../reducers/ast";
@@ -55,6 +55,22 @@ function trimUrlQuery(url: string): string {
   return url.slice(0, q);
 }
 
+export function shouldBlackbox(source: ?Source) {
+  if (!source) {
+    return false;
+  }
+
+  if (!isLoaded(source) || !source.url) {
+    return false;
+  }
+
+  if (isOriginalId(source.id) && !features.originalBlackbox) {
+    return false;
+  }
+
+  return true;
+}
+
 export function shouldPrettyPrint(source: Source) {
   if (
     !source ||

devtools/client/preferences/debugger.js

@@ -67,3 +67,4 @@ pref("devtools.debugger.features.skip-pausing", true);
 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.origial-blackbox", false);

devtools/client/themes/toolbox.css

@@ -634,7 +634,6 @@
 .webreplay-player .tick {
   position: absolute;
   height: 100%;
-  transition-duration: var(--progress-bar-transition);
 }
 
 .webreplay-player .tick::before,