Auto expand frames group when no CodeBlock shown

packages/redux-devtools-trace-monitor/src/react-error-overlay/components/Collapsible.js

@@ -44,22 +44,26 @@ type State = {|
 
 class Collapsible extends Component<Props, State> {
   state = {
-    collapsed: true,
+    collapsed: undefined,
   };
 
-  toggleCollaped = () => {
+  toggleCollapsed = () => {
     this.setState(state => ({
-      collapsed: !state.collapsed,
+      collapsed: !this.isCollapsed(state),
     }));
   };
 
+  isCollapsed = (state) => (
+    state.collapsed === undefined ? this.props.collapsedByDefault : state.collapsed
+  );
+
   render() {
     const count = this.props.children.length;
-    const collapsed = this.state.collapsed;
+    const collapsed = this.isCollapsed(this.state);
     return (
       <div>
         <button
-          onClick={this.toggleCollaped}
+          onClick={this.toggleCollapsed}
           style={
             collapsed ? collapsibleCollapsedStyle : collapsibleExpandedStyle
           }
@@ -71,7 +75,7 @@ class Collapsible extends Component<Props, State> {
         <div style={{ display: collapsed ? 'none' : 'block' }}>
           {this.props.children}
           <button
-            onClick={this.toggleCollaped}
+            onClick={this.toggleCollapsed}
             style={collapsibleExpandedStyle}
           >
             {`▲ ${count} stack frames were expanded.`}

packages/redux-devtools-trace-monitor/src/react-error-overlay/containers/StackTrace.js

@@ -35,7 +35,8 @@ class StackTrace extends Component<Props> {
     const renderedFrames = [];
     let hasReachedAppCode = false,
       currentBundle = [],
-      bundleCount = 0;
+      bundleCount = 0,
+      anyNodeExpanded = false;
 
     stackFrames.forEach((frame, index) => {
       const { fileName, _originalFileName: sourceFileName } = frame;
@@ -44,6 +45,10 @@ class StackTrace extends Component<Props> {
       const shouldCollapse =
         isInternalUrl && (isThrownIntentionally || hasReachedAppCode);
 
+      if (!shouldCollapse) {
+        anyNodeExpanded = true;
+      }
+
       if (!isInternalUrl) {
         hasReachedAppCode = true;
       }
@@ -70,7 +75,7 @@ class StackTrace extends Component<Props> {
         } else if (currentBundle.length > 1) {
           bundleCount++;
           renderedFrames.push(
-            <Collapsible key={'bundle-' + bundleCount}>
+            <Collapsible collapsedByDefault={anyNodeExpanded} key={'bundle-' + bundleCount}>
               {currentBundle}
             </Collapsible>
           );

packages/redux-devtools-trace-monitor/test/__snapshots__/StackTraceTab.spec.js.snap

@@ -175,6 +175,7 @@ exports[`StackTraceTab component should render with trace stack 1`] = `
         }
       >
         <Collapsible
+          collapsedByDefault={false}
           key="bundle-1"
         >
           <div>
@@ -189,19 +190,19 @@ exports[`StackTraceTab component should render with trace stack 1`] = `
                   "display": "block",
                   "fontSize": "1em",
                   "lineHeight": "1.5",
-                  "marginBottom": "1.5em",
+                  "marginBottom": "0.6em",
                   "padding": "0px 5px",
                   "textAlign": "left",
                   "width": "100%",
                 }
               }
             >
-              ▶ 2 stack frames were collapsed.
+              ▼ 2 stack frames were expanded.
             </button>
             <div
               style={
                 Object {
-                  "display": "none",
+                  "display": "block",
                 }
               }
             >