Bug 1648060 - start-panel sidebar prevented from being dragged wider than the available width. r=davidwalsh,bomsy

I have added a helper method, calcStartPanelWidth(), to limit the start-panel on expansion.

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

devtools/client/debugger/dist/vendors.js

@@ -5924,32 +5924,58 @@ class SplitBox extends Component {
   }) {
     const node = ReactDOM.findDOMNode(this);
     const doc = node.ownerDocument;
+    let targetWidth;
 
     if (this.props.endPanelControl) {
       // For the end panel we need to increase the width/height when the
       // movement is towards the left/top.
-      clientX = node.clientWidth - clientX;
+      targetWidth = node.clientWidth - clientX;
       movementY = -movementY;
+    } else {
+      targetWidth = this.calcStartPanelWidth({
+        node,
+        clientX,
+        doc
+      });
     }
 
     if (this.state.vert) {
       const isRtl = doc.dir === "rtl";
 
-      if (isRtl) {
+      if (isRtl && this.props.endPanelControl) {
         // In RTL we need to reverse the movement again -- but only for vertical
         // splitters
         const fullWidth = node.clientWidth + node.offsetLeft;
-        clientX = fullWidth - clientX;
+        targetWidth = fullWidth - targetWidth;
       }
 
       this.setState((state, props) => ({
-        width: clientX
+        width: targetWidth
       }));
     } else {
       this.setState((state, props) => ({
         height: state.height + movementY
       }));
     }
+  }
+
+  calcStartPanelWidth(options) {
+    const {
+      node,
+      clientX,
+      doc
+    } = options;
+    const availableWidth = node.clientWidth;
+    const maxSize = parseInt(this.props.maxSize, 10) / 100;
+    const maxPossibleWidth = Math.ceil(availableWidth * maxSize);
+
+    if (doc.dir === "rtl") {
+      const fullWidth = node.clientWidth + node.offsetLeft;
+      const targetWidth = fullWidth - clientX;
+      return targetWidth > maxPossibleWidth ? maxPossibleWidth : targetWidth;
+    }
+
+    return clientX > maxPossibleWidth ? maxPossibleWidth : clientX;
   } // Rendering
 
 

devtools/client/debugger/packages/devtools-splitter/src/SplitBox.js

@@ -139,26 +139,33 @@ class SplitBox extends Component {
   onMove({ clientX, movementY }) {
     const node = ReactDOM.findDOMNode(this);
     const doc = node.ownerDocument;
+    let targetWidth;
 
     if (this.props.endPanelControl) {
       // For the end panel we need to increase the width/height when the
       // movement is towards the left/top.
-      clientX = node.clientWidth - clientX;
+      targetWidth = node.clientWidth - clientX;
       movementY = -movementY;
+    } else {
+      targetWidth = this.calcStartPanelWidth({
+        node,
+        clientX,
+        doc,
+      });
     }
 
     if (this.state.vert) {
       const isRtl = doc.dir === "rtl";
 
-      if (isRtl) {
+      if (isRtl && this.props.endPanelControl) {
         // In RTL we need to reverse the movement again -- but only for vertical
         // splitters
         const fullWidth = node.clientWidth + node.offsetLeft;
-        clientX = fullWidth - clientX;
+        targetWidth = fullWidth - targetWidth;
       }
 
       this.setState((state, props) => ({
-        width: clientX,
+        width: targetWidth,
       }));
     } else {
       this.setState((state, props) => ({
@@ -167,6 +174,21 @@ class SplitBox extends Component {
     }
   }
 
+  calcStartPanelWidth(options) {
+    const { node, clientX, doc } = options;
+    const availableWidth = node.clientWidth;
+    const maxSize = parseInt(this.props.maxSize, 10) / 100;
+    const maxPossibleWidth = Math.ceil(availableWidth * maxSize);
+
+    if (doc.dir === "rtl") {
+      const fullWidth = node.clientWidth + node.offsetLeft;
+      const targetWidth = fullWidth - clientX;
+      return targetWidth > maxPossibleWidth ? maxPossibleWidth : targetWidth;
+    }
+
+    return clientX > maxPossibleWidth ? maxPossibleWidth : clientX;
+  }
+
   // Rendering
   preparePanelStyles() {
     const vert = this.state.vert;