Bug 1648060 - start-panel sidebar prevented from being dragged wider than the available width. r=davidwalsh,bomsy
authoralexdominguezg <alexand.dominguez@gmail.com>
Fri, 17 Jul 2020 20:49:52 +0000
changeset 540993 f65bc98a26f25002e5921ba1e51a77b05882d600
parent 540992 a7dd00ed82351210265183e18be502b0a578229c
child 540994 98a341f3f76f65885aa67c7931789fd1e9efa313
push id37613
push userbtara@mozilla.com
push dateSat, 18 Jul 2020 09:26:25 +0000
treeherdermozilla-central@08cd64cdbc3b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdavidwalsh, bomsy
bugs1648060
milestone80.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/debugger/packages/devtools-splitter/src/SplitBox.js
--- a/devtools/client/debugger/dist/vendors.js
+++ b/devtools/client/debugger/dist/vendors.js
@@ -5919,42 +5919,68 @@ 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) => ({
         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
 
 
   preparePanelStyles() {
     const vert = this.state.vert;
     const {
       minSize,
       maxSize,
--- a/devtools/client/debugger/packages/devtools-splitter/src/SplitBox.js
+++ b/devtools/client/debugger/packages/devtools-splitter/src/SplitBox.js
@@ -134,44 +134,66 @@ class SplitBox extends Component {
   /**
    * Adjust size of the controlled panel. Depending on the current
    * orientation we either remember the width or height of
    * the splitter box.
    */
   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) => ({
         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
   preparePanelStyles() {
     const vert = this.state.vert;
     const {
       minSize,
       maxSize,
       startPanelCollapsed,
       endPanelControl,