Render a toggle for original/generated scopes when available. (#5702)

Author: loganfsmyth

assets/panel/debugger.properties

@@ -548,6 +548,14 @@ scopes.notAvailable=Scopes unavailable
 # for when the debugger is not paused.
 scopes.notPaused=Not paused
 
+# LOCALIZATION NOTE (scopes.toggleToGenerated): Link displayed in the right
+# sidebar scope pane to update the view to show generated scope data.
+scopes.toggleToGenerated=Show generated scope
+
+# LOCALIZATION NOTE (scopes.toggleToOriginal): Link displayed in the right
+# sidebar scope pane to update the view to show original scope data.
+scopes.toggleToOriginal=Show original scope
+
 # LOCALIZATION NOTE (scopes.block): Refers to a block of code in
 # the scopes pane when the debugger is paused.
 scopes.block=Block

src/components/SecondaryPanes/Scopes.css

@@ -40,3 +40,14 @@
 .scopes-list .function-signature {
   display: inline-block;
 }
+
+.scopes-list .scope-type-toggle {
+  text-align: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.scopes-list .scope-type-toggle a {
+  /* Override color so that the link doesn't turn purple */
+  color: var(--theme-body-color);
+}

src/components/SecondaryPanes/Scopes.js

@@ -12,7 +12,8 @@ import { createObjectClient } from "../../client/firefox";
 import {
   getSelectedSource,
   getSelectedFrame,
-  getFrameScope,
+  getGeneratedFrameScope,
+  getOriginalFrameScope,
   isPaused as getIsPaused,
   getPauseReason
 } from "../../selectors";
@@ -27,48 +28,78 @@ import "./Scopes.css";
 type Props = {
   isPaused: Pause,
   selectedFrame: Object,
-  frameScopes: Object | null,
+  generatedFrameScopes: Object,
+  originalFrameScopes: Object | null,
   isLoading: boolean,
   why: Why
 };
 
 type State = {
-  scopes: ?(NamedValue[])
+  originalScopes: ?(NamedValue[]),
+  generatedScopes: ?(NamedValue[]),
+  showOriginal: boolean
 };
 
 class Scopes extends PureComponent<Props, State> {
   constructor(props: Props, ...args) {
-    const { why, selectedFrame, frameScopes } = props;
+    const {
+      why,
+      selectedFrame,
+      originalFrameScopes,
+      generatedFrameScopes
+    } = props;
 
     super(props, ...args);
 
     this.state = {
-      scopes: getScopes(why, selectedFrame, frameScopes)
+      originalScopes: getScopes(why, selectedFrame, originalFrameScopes),
+      generatedScopes: getScopes(why, selectedFrame, generatedFrameScopes),
+      showOriginal: true
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    const { isPaused, selectedFrame, frameScopes } = this.props;
+    const {
+      isPaused,
+      selectedFrame,
+      originalFrameScopes,
+      generatedFrameScopes
+    } = this.props;
     const isPausedChanged = isPaused !== nextProps.isPaused;
     const selectedFrameChanged = selectedFrame !== nextProps.selectedFrame;
-    const frameScopesChanged = frameScopes !== nextProps.frameScopes;
-
-    if (isPausedChanged || selectedFrameChanged || frameScopesChanged) {
+    const originalFrameScopesChanged =
+      originalFrameScopes !== nextProps.originalFrameScopes;
+    const generatedFrameScopesChanged =
+      generatedFrameScopes !== nextProps.generatedFrameScopes;
+
+    if (
+      isPausedChanged ||
+      selectedFrameChanged ||
+      originalFrameScopesChanged ||
+      generatedFrameScopesChanged
+    ) {
       this.setState({
-        scopes: getScopes(
+        originalScopes: getScopes(
+          nextProps.why,
+          nextProps.selectedFrame,
+          nextProps.originalFrameScopes
+        ),
+        generatedScopes: getScopes(
           nextProps.why,
           nextProps.selectedFrame,
-          nextProps.frameScopes
+          nextProps.generatedFrameScopes
         )
       });
     }
   }
 
   render() {
     const { isPaused, isLoading } = this.props;
-    const { scopes } = this.state;
+    const { originalScopes, generatedScopes, showOriginal } = this.state;
+
+    const scopes = (showOriginal && originalScopes) || generatedScopes;
 
-    if (scopes) {
+    if (scopes && !isLoading) {
       return (
         <div className="pane scopes-list">
           <ObjectInspector
@@ -80,6 +111,21 @@ class Scopes extends PureComponent<Props, State> {
             dimTopLevelWindow={true}
             createObjectClient={grip => createObjectClient(grip)}
           />
+          {originalScopes ? (
+            <div className="scope-type-toggle">
+              <a
+                href=""
+                onClick={e => {
+                  e.preventDefault();
+                  this.setState({ showOriginal: !showOriginal });
+                }}
+              >
+                {showOriginal
+                  ? L10N.getStr("scopes.toggleToGenerated")
+                  : L10N.getStr("scopes.toggleToOriginal")}
+              </a>
+            </div>
+          ) : null}
         </div>
       );
     }
@@ -106,18 +152,30 @@ export default connect(
     const selectedFrame = getSelectedFrame(state);
     const selectedSource = getSelectedSource(state);
 
-    const { scope: frameScopes, pending } = getFrameScope(
+    const {
+      scope: originalFrameScopes,
+      pending: originalPending
+    } = getOriginalFrameScope(
       state,
       selectedSource && selectedSource.get("id"),
       selectedFrame && selectedFrame.id
     ) || { scope: null, pending: false };
 
+    const {
+      scope: generatedFrameScopes,
+      pending: generatedPending
+    } = getGeneratedFrameScope(state, selectedFrame && selectedFrame.id) || {
+      scope: null,
+      pending: false
+    };
+
     return {
       selectedFrame,
       isPaused: getIsPaused(state),
-      isLoading: pending,
+      isLoading: generatedPending || originalPending,
       why: getPauseReason(state),
-      frameScopes: frameScopes
+      originalFrameScopes,
+      generatedFrameScopes
     };
   },
   dispatch => bindActionCreators(actions, dispatch)

src/reducers/pause.js

@@ -326,11 +326,7 @@ export function getGeneratedFrameScope(state: OuterState, frameId: ?string) {
   return getFrameScopes(state).generated[frameId];
 }
 
-export function getFrameScopes(state: OuterState) {
-  return state.pause.frameScopes;
-}
-
-export function getFrameScope(
+export function getOriginalFrameScope(
   state: OuterState,
   sourceId: ?SourceId,
   frameId: ?string
@@ -349,7 +345,25 @@ export function getFrameScope(
     return original;
   }
 
-  return getFrameScopes(state).generated[frameId];
+  return null;
+}
+
+export function getFrameScopes(state: OuterState) {
+  return state.pause.frameScopes;
+}
+
+export function getFrameScope(
+  state: OuterState,
+  sourceId: ?SourceId,
+  frameId: ?string
+): ?{
+  pending: boolean,
+  +scope: OriginalScope | Scope
+} {
+  return (
+    getOriginalFrameScope(state, sourceId, frameId) ||
+    getGeneratedFrameScope(state, frameId)
+  );
 }
 
 export function getSelectedScope(state: OuterState) {