Panes (firefox-devtools#4974)

* Toggle scopes on pause

* drop toggles

* fixes

Author: GarethSharpe

assets/panel/prefs.js

@@ -26,7 +26,8 @@ pref("devtools.debugger.ui.variables-sorting-enabled", true);
 pref("devtools.debugger.ui.variables-only-enum-visible", false);
 pref("devtools.debugger.ui.variables-searchbox-visible", false);
 pref("devtools.debugger.ui.framework-grouping-on", true);
-pref("devtools.debugger.call-stack-visible", false);
+pref("devtools.debugger.call-stack-visible", true);
+pref("devtools.debugger.scopes-visible", true);
 pref("devtools.debugger.start-panel-collapsed", false);
 pref("devtools.debugger.end-panel-collapsed", false);
 pref("devtools.debugger.tabs", "[]");

src/components/SecondaryPanes/index.js

@@ -145,8 +145,7 @@ class SecondaryPanes extends Component<Props> {
       opened: prefs.scopesVisible,
       onToggle: opened => {
         prefs.scopesVisible = opened;
-      },
-      shouldOpen: () => this.props.isPaused
+      }
     };
   }
 
@@ -160,6 +159,28 @@ class SecondaryPanes extends Component<Props> {
     };
   }
 
+  getCallStackItem() {
+    return {
+      header: L10N.getStr("callStack.header"),
+      className: "call-stack-pane",
+      component: Frames,
+      opened: prefs.callStackVisible,
+      onToggle: opened => {
+        prefs.callStackVisible = opened;
+      }
+    };
+  }
+
+  getBreakpointsItem() {
+    return {
+      header: L10N.getStr("breakpoints.header"),
+      className: "breakpoints-pane",
+      buttons: [this.breakpointDropdown(), this.renderBreakpointsToggle()],
+      component: Breakpoints,
+      opened: true
+    };
+  }
+
   breakpointDropdown() {
     if (!features.breakpointsDropdown) {
       return;
@@ -183,28 +204,15 @@ class SecondaryPanes extends Component<Props> {
   }
 
   getStartItems() {
-    const scopesContent: any = this.props.horizontal
-      ? this.getScopeItem()
-      : null;
-    const items: Array<SecondaryPanesItems> = [
-      {
-        header: L10N.getStr("breakpoints.header"),
-        className: "breakpoints-pane",
-        buttons: [this.breakpointDropdown(), this.renderBreakpointsToggle()],
-        component: Breakpoints,
-        opened: true
-      },
-      {
-        header: L10N.getStr("callStack.header"),
-        className: "call-stack-pane",
-        component: Frames,
-        opened: prefs.callStackVisible,
-        onToggle: opened => {
-          prefs.callStackVisible = opened;
-        }
-      },
-      scopesContent
-    ];
+    const items: Array<SecondaryPanesItems> = [];
+    items.push(this.getBreakpointsItem());
+
+    if (this.props.isPaused) {
+      if (this.props.horizontal) {
+        items.push(this.getScopeItem());
+      }
+      items.push(this.getCallStackItem());
+    }
 
     if (isEnabled("eventListeners")) {
       items.push({
@@ -236,7 +244,7 @@ class SecondaryPanes extends Component<Props> {
   getEndItems() {
     const items: Array<SecondaryPanesItems> = [];
 
-    if (!this.props.horizontal) {
+    if (!this.props.horizontal && this.props.isPaused) {
       items.unshift(this.getScopeItem());
     }
 

src/components/shared/Accordion.js

@@ -36,51 +36,38 @@ class Accordion extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    const newOpened = this.state.opened.map((isOpen, i) => {
-      const { shouldOpen } = nextProps.items[i];
-
-      return isOpen || (shouldOpen && shouldOpen());
-    });
-
-    this.setState({ opened: newOpened });
-  }
+  componentWillReceiveProps(nextProps: Props) {}
 
   handleHeaderClick(i: number) {
-    const opened = [...this.state.opened];
-    const created = [...this.state.created];
     const item = this.props.items[i];
-
-    opened[i] = !opened[i];
-    created[i] = true;
-
-    if (opened[i] && item.onOpened) {
-      item.onOpened();
-    }
+    const opened = !item.opened;
+    item.opened = opened;
 
     if (item.onToggle) {
-      item.onToggle(opened[i]);
+      item.onToggle(opened);
     }
 
-    this.setState({ opened, created });
+    // We force an update because otherwise the accordion
+    // would not re-render
+    this.forceUpdate();
   }
 
   renderContainer = (item: AccordionItem, i: number) => {
-    const { opened, created } = this.state;
+    const { opened } = item;
 
     return (
       <div className={item.className} key={i}>
         <div className="_header" onClick={() => this.handleHeaderClick(i)}>
-          <Svg name="arrow" className={opened[i] ? "expanded" : ""} />
+          <Svg name="arrow" className={opened ? "expanded" : ""} />
           {item.header}
           {item.buttons ? (
             <div className="header-buttons">{item.buttons}</div>
           ) : null}
         </div>
-        {created[i] || opened[i] ? (
+        {opened ? (
           <div
             className="_content"
-            style={{ display: opened[i] ? "block" : "none" }}
+            style={{ display: opened ? "block" : "none" }}
           >
             {createElement(item.component, item.componentProps || {})}
           </div>

src/test/mochitest/browser_dbg-call-stack.js

@@ -20,14 +20,11 @@ function toggleButton(dbg) {
 add_task(async function() {
   const dbg = await initDebugger("doc-script-switching.html");
 
-  toggleCallStack(dbg);
-
-  const notPaused = findElement(dbg, "callStackBody").innerText;
-  is(notPaused, "Not paused", "Not paused message is shown");
+  const found = findElement(dbg, "callStackBody");
+  is(found, null, "Call stack is hidden");
 
   invokeInTab("firstCall");
   await waitForPaused(dbg);
-
   ok(isFrameSelected(dbg, 1, "secondCall"), "the first frame is selected");
 
   let button = toggleButton(dbg);
@@ -37,11 +34,8 @@ add_task(async function() {
 add_task(async function() {
   const dbg = await initDebugger("doc-frames.html");
 
-  toggleCallStack(dbg);
-
   invokeInTab("startRecursion");
   await waitForPaused(dbg);
-
   ok(isFrameSelected(dbg, 1, "recurseA"), "the first frame is selected");
 
   // check to make sure that the toggle button isn't there

src/test/mochitest/browser_dbg-minified.js

@@ -26,7 +26,6 @@ add_task(async function() {
   invokeInTab("test");
   await waitForPaused(dbg);
   await waitForMappedScopes(dbg);
-  toggleScopes(dbg);
 
   is(getScopeNodeLabel(dbg, 1), "sum", "check scope label");
   is(getScopeNodeLabel(dbg, 2), "<this>", "check scope label");

src/test/mochitest/browser_dbg-returnvalues.js

@@ -6,10 +6,6 @@ function getValue(dbg, index) {
   return findElement(dbg, "scopeValue", index).innerText;
 }
 
-function toggleScopes(dbg) {
-  return findElement(dbg, "scopesHeader").click();
-}
-
 async function testReturnValue(dbg, val) {
   invokeInTab("return_something", val);
   await waitForPaused(dbg);
@@ -61,7 +57,6 @@ async function testThrowValue(dbg, val) {
 
 add_task(async function() {
   const dbg = await initDebugger("doc-return-values.html");
-  toggleScopes(dbg);
   await togglePauseOnExceptions(dbg, true, false);
 
   await testReturnValue(dbg, "to sender");

src/test/mochitest/browser_dbg-scopes-mutations.js

@@ -15,19 +15,13 @@ function expandNode(dbg, index) {
   return onLoadProperties;
 }
 
-function toggleScopes(dbg) {
-  return findElement(dbg, "scopesHeader").click();
-}
-
 function onLoadObjectProperties(dbg) {
   return waitForDispatch(dbg, "LOAD_OBJECT_PROPERTIES");
 }
 
 add_task(async function() {
   const dbg = await initDebugger("doc-script-mutate.html");
 
-  toggleScopes(dbg);
-
   let onPaused = waitForPaused(dbg);
   invokeInTab("mutate");
   await onPaused;

src/test/mochitest/browser_dbg-scopes.js

@@ -12,8 +12,6 @@ function getLabel(dbg, index) {
 add_task(async function() {
   const dbg = await initDebugger("doc-script-switching.html");
 
-  toggleScopes(dbg);
-
   invokeInTab("firstCall");
   await waitForPaused(dbg);
   await waitForLoadedSource(dbg, "switching-02");

src/test/mochitest/browser_dbg-sourcemaps3.js

@@ -29,8 +29,6 @@ add_task(async function() {
   const dbg = await initDebugger("doc-sourcemaps3.html");
   const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
 
-  toggleScopes(dbg);
-
   await waitForSources(dbg, "bundle.js", "sorted.js", "test.js");
 
   ok(true, "Original sources exist");

src/test/mochitest/head.js

@@ -498,6 +498,8 @@ function clearDebuggerPreferences() {
   Services.prefs.clearUserPref("devtools.debugger.pending-selected-location");
   Services.prefs.clearUserPref("devtools.debugger.pending-breakpoints");
   Services.prefs.clearUserPref("devtools.debugger.expressions");
+  Services.prefs.clearUserPref("devtools.debugger.call-stack-visible");
+  Services.prefs.clearUserPref("devtools.debugger.scopes-visible");
 }
 
 /**