Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-18 15:55:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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

Differential Revision: https://phabricator.services.mozilla.com/D80863
This commit is contained in:
alexdominguezg 2020-07-17 20:49:52 +00:00
parent b1faa2872a
commit 1ef8064302
2 changed files with 56 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
devtools/client/debugger/dist/vendors.js vendored
View File

@ -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

30
devtools/client/debugger/packages/devtools-splitter/src/SplitBox.js
View File

@ -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;