Auto-expand breakpoints when adding a new breakpoing in debugger.html

debugger.html.diff

diff --git a/src/components/SecondaryPanes/index.js b/src/components/SecondaryPanes/index.js
index 43dcb33..f4aad39 100644
--- a/src/components/SecondaryPanes/index.js
+++ b/src/components/SecondaryPanes/index.js
@@ -65,6 +65,15 @@ const SecondaryPanes = React.createClass({
 
   displayName: "SecondaryPanes",
 
+  componentWillReceiveProps(nextProps) {
+    const { breakpoints: { size }} = this.props;
+    const { breakpoints: { size: nextSize }} = nextProps;
+
+    this.setState({
+      expandBreakpoints: nextSize > size
+    });
+  },
+
   renderBreakpointsToggle() {
     const { toggleAllBreakpoints, breakpoints,
             breakpointsDisabled, breakpointsLoading } = this.props;
@@ -139,7 +148,8 @@ const SecondaryPanes = React.createClass({
       { header: L10N.getStr("breakpoints.header"),
         buttons: this.renderBreakpointsToggle(),
         component: Breakpoints,
-        opened: true },
+        opened: true,
+        shouldOpen: () => this.state.expandBreakpoints },
       { header: L10N.getStr("callStack.header"),
         component: Frames,
         opened: prefs.callStackVisible,