зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset ad78f4b2fcee (bug 1521452) for chrome failures at devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
--HG-- extra : rebase_source : 3ec3d16bfb96fe6341186f0a4689b235a52cfa8e
This commit is contained in:
Coroiu Cristina
Родитель
6f2d828856
Коммит
c440961ac6
|
|
@ -1,35 +0,0 @@
|
||||||
/* vim:set ts=2 sw=2 sts=2 et: */
|
|
||||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
||||||
|
|
||||||
.grid-element-width-resizer {
|
|
||||||
border-inline-style: solid;
|
|
||||||
border-inline-color: var(--theme-splitter-color);
|
|
||||||
border-inline-width: 0;
|
|
||||||
width: 10px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-element-width-resizer.start {
|
|
||||||
justify-self: start;
|
|
||||||
border-inline-start-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-element-width-resizer.end {
|
|
||||||
justify-self: end;
|
|
||||||
border-inline-end-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dragging,
|
|
||||||
.dragging * {
|
|
||||||
/* When resizing, we keep the "resize" cursor on every element we might hover */
|
|
||||||
cursor: ew-resize !important;
|
|
||||||
/* This prevents to trigger some :hover style and is better for performance
|
|
||||||
* when resizing */
|
|
||||||
pointer-events: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-element-width-resizer {
|
|
||||||
cursor: ew-resize;
|
|
||||||
}
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
|
||||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
||||||
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
const {
|
|
||||||
Component,
|
|
||||||
createFactory,
|
|
||||||
} = require("devtools/client/shared/vendor/react");
|
|
||||||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
|
||||||
const Draggable = createFactory(
|
|
||||||
require("devtools/client/shared/components/splitter/Draggable")
|
|
||||||
);
|
|
||||||
|
|
||||||
class GridElementWidthResizer extends Component {
|
|
||||||
static get propTypes() {
|
|
||||||
return {
|
|
||||||
getControlledElementNode: PropTypes.func.isRequired,
|
|
||||||
enabled: PropTypes.bool,
|
|
||||||
position: PropTypes.string.isRequired,
|
|
||||||
className: PropTypes.string,
|
|
||||||
onResizeEnd: PropTypes.func,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.onStartMove = this.onStartMove.bind(this);
|
|
||||||
this.onStopMove = this.onStopMove.bind(this);
|
|
||||||
this.onMove = this.onMove.bind(this);
|
|
||||||
this.state = {
|
|
||||||
dragging: false,
|
|
||||||
defaultCursor: null,
|
|
||||||
defaultWidth: null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
if (prevProps.enabled === true && this.props.enabled === false) {
|
|
||||||
this.onStopMove();
|
|
||||||
const controlledElementNode = this.props.getControlledElementNode();
|
|
||||||
controlledElementNode.style.width = this.state.defaultWidth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dragging Events
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set 'resizing' cursor on entire document during splitter dragging.
|
|
||||||
* This avoids cursor-flickering that happens when the mouse leaves
|
|
||||||
* the splitter bar area (happens frequently).
|
|
||||||
*/
|
|
||||||
onStartMove() {
|
|
||||||
const controlledElementNode = this.props.getControlledElementNode();
|
|
||||||
if (!controlledElementNode) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const doc = controlledElementNode.ownerDocument;
|
|
||||||
const defaultCursor = doc.documentElement.style.cursor;
|
|
||||||
const defaultWidth = doc.documentElement.style.width;
|
|
||||||
doc.documentElement.style.cursor = "ew-resize";
|
|
||||||
doc.firstElementChild.classList.add("dragging");
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
dragging: true,
|
|
||||||
defaultCursor,
|
|
||||||
defaultWidth,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onStopMove() {
|
|
||||||
const controlledElementNode = this.props.getControlledElementNode();
|
|
||||||
if (!this.state.dragging || !controlledElementNode) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const doc = controlledElementNode.ownerDocument;
|
|
||||||
doc.documentElement.style.cursor = this.state.defaultCursor;
|
|
||||||
doc.firstElementChild.classList.remove("dragging");
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
dragging: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.props.onResizeEnd) {
|
|
||||||
const { width } = controlledElementNode.getBoundingClientRect();
|
|
||||||
this.props.onResizeEnd(width);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adjust size of the controlled panel.
|
|
||||||
*/
|
|
||||||
onMove(x) {
|
|
||||||
const controlledElementNode = this.props.getControlledElementNode();
|
|
||||||
if (!this.state.dragging || !controlledElementNode) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const nodeBounds = controlledElementNode.getBoundingClientRect();
|
|
||||||
const size =
|
|
||||||
this.props.position === "end"
|
|
||||||
? x - nodeBounds.left
|
|
||||||
: nodeBounds.width + (nodeBounds.left - x);
|
|
||||||
controlledElementNode.style.width = `${size}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (!this.props.enabled) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const classNames = ["grid-element-width-resizer", this.props.position];
|
|
||||||
if (this.props.className) {
|
|
||||||
classNames.push(this.props.className);
|
|
||||||
}
|
|
||||||
|
|
||||||
return Draggable({
|
|
||||||
className: classNames.join(" "),
|
|
||||||
onStart: this.onStartMove,
|
|
||||||
onStop: this.onStopMove,
|
|
||||||
onMove: this.onMove,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = GridElementWidthResizer;
|
|
||||||
|
|
@ -6,8 +6,6 @@
|
||||||
|
|
||||||
DevToolsModules(
|
DevToolsModules(
|
||||||
'Draggable.js',
|
'Draggable.js',
|
||||||
'GridElementResizer.css',
|
|
||||||
'GridElementWidthResizer.js',
|
|
||||||
'SplitBox.css',
|
'SplitBox.css',
|
||||||
'SplitBox.js',
|
'SplitBox.js',
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@ support-files =
|
||||||
[test_accordion.html]
|
[test_accordion.html]
|
||||||
[test_frame_01.html]
|
[test_frame_01.html]
|
||||||
[test_frame_02.html]
|
[test_frame_02.html]
|
||||||
[test_GridElementWidthResizer.html]
|
|
||||||
[test_HSplitBox_01.html]
|
[test_HSplitBox_01.html]
|
||||||
[test_list.html]
|
[test_list.html]
|
||||||
[test_list_keyboard.html]
|
[test_list_keyboard.html]
|
||||||
|
|
|
||||||
|
|
@ -1,197 +0,0 @@
|
||||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<!-- Basic tests for the GridElementWidthResizer component. -->
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Tree component test</title>
|
|
||||||
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
||||||
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
|
|
||||||
<link href="chrome://mochikit/content/tests/SimpleTest/test.css" rel="stylesheet" type="text/css"/>
|
|
||||||
<link href="resource://devtools/client/themes/splitters.css" rel="stylesheet" type="text/css"/>
|
|
||||||
<link href="resource://devtools/client/shared/components/splitter/GridElementResizer.css" rel="stylesheet" type="text/css"/>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
--theme-splitter-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto 1fr auto;
|
|
||||||
grid-template-rows: 20px 20px 20px;
|
|
||||||
grid-gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a,
|
|
||||||
.b,
|
|
||||||
.c,
|
|
||||||
.d {
|
|
||||||
border: 1px solid green;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
.a {
|
|
||||||
grid-column: 1 / 2;
|
|
||||||
grid-row: 2 / -1;
|
|
||||||
min-width: 100px;
|
|
||||||
}
|
|
||||||
.b {
|
|
||||||
grid-column: 2 / 3;
|
|
||||||
grid-row: 2 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c {
|
|
||||||
grid-column: 3 / 4;
|
|
||||||
grid-row: 2 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d {
|
|
||||||
grid-column: 3 / 4;
|
|
||||||
grid-row: 3 / 4;
|
|
||||||
min-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resizer-a {
|
|
||||||
grid-column: 1 / 2;
|
|
||||||
grid-row: 2 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resizer-d {
|
|
||||||
grid-column: 3 / 4;
|
|
||||||
grid-row: 2 / -1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main></main>
|
|
||||||
<pre id="test">
|
|
||||||
<script src="head.js" type="application/javascript"></script>
|
|
||||||
<script type="application/javascript">
|
|
||||||
const FUDGE_FACTOR = .5;
|
|
||||||
function aboutEq(a, b) {
|
|
||||||
dumpn(`Checking ${a} ~= ${b}`);
|
|
||||||
return Math.abs(a - b) < FUDGE_FACTOR;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onload = async function () {
|
|
||||||
try {
|
|
||||||
const React = browserRequire("devtools/client/shared/vendor/react");
|
|
||||||
const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
|
|
||||||
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
|
||||||
|
|
||||||
let GridElementWidthResizer = React.createFactory(browserRequire("devtools/client/shared/components/splitter/GridElementWidthResizer"));
|
|
||||||
ok(GridElementWidthResizer, "Should get GridElementWidthResizer");
|
|
||||||
|
|
||||||
const resizedA = [];
|
|
||||||
const resizedD = [];
|
|
||||||
|
|
||||||
const scene = ReactDOM.render([
|
|
||||||
dom.header({}, "header"),
|
|
||||||
dom.aside({className: "a"}, "A"),
|
|
||||||
GridElementWidthResizer({
|
|
||||||
getControlledElementNode: () => a,
|
|
||||||
enabled: true,
|
|
||||||
position: "end",
|
|
||||||
className: "resizer-a",
|
|
||||||
onResizeEnd: width => resizedA.push(width),
|
|
||||||
}),
|
|
||||||
dom.section({className: "b"}, "B"),
|
|
||||||
GridElementWidthResizer({
|
|
||||||
getControlledElementNode: () => window.document.querySelector(".b"),
|
|
||||||
enabled: false,
|
|
||||||
position: "start",
|
|
||||||
className: "resizer-disabled",
|
|
||||||
}),
|
|
||||||
dom.aside({className: "c"}, "C"),
|
|
||||||
dom.aside({className: "d"}, "D"),
|
|
||||||
GridElementWidthResizer({
|
|
||||||
getControlledElementNode: () => d,
|
|
||||||
enabled: true,
|
|
||||||
position: "start",
|
|
||||||
className: "resizer-d",
|
|
||||||
onResizeEnd: width => resizedD.push(width),
|
|
||||||
}),
|
|
||||||
], window.document.querySelector("main"));
|
|
||||||
|
|
||||||
const a = window.document.querySelector(".a");
|
|
||||||
const d = window.document.querySelector(".d");
|
|
||||||
|
|
||||||
// Test that we properly rendered our two resizers, and not the disabled one.
|
|
||||||
const resizers = window.document.querySelectorAll(".grid-element-width-resizer");
|
|
||||||
is(resizers.length, 2, "The 2 enabled resizers are rendered");
|
|
||||||
|
|
||||||
const [resizerA, resizerD] = resizers;
|
|
||||||
|
|
||||||
ok(resizerA.classList.contains("resizer-a")
|
|
||||||
&& resizerA.classList.contains("end"), "resizerA has expected classes");
|
|
||||||
ok(resizerD.classList.contains("resizer-d")
|
|
||||||
&& resizerD.classList.contains("start"), "resizerD has expected classes");
|
|
||||||
|
|
||||||
const aBoundingRect = a.getBoundingClientRect();
|
|
||||||
let aOriginalWidth = aBoundingRect.width;
|
|
||||||
|
|
||||||
info("Resize element A");
|
|
||||||
resize(resizerA, aBoundingRect.right + 20);
|
|
||||||
|
|
||||||
is(resizedA.length, 1, "onResizeEnd was called once");
|
|
||||||
is(resizedD.length, 0, "resizerD was not impacted");
|
|
||||||
let aWidth = a.getBoundingClientRect().width;
|
|
||||||
is(resizedA[0], aWidth, "onResizeEnd gives the width of the controlled element");
|
|
||||||
ok(aboutEq(aWidth, aOriginalWidth + 20),
|
|
||||||
"controlled element was resized to the expected size");
|
|
||||||
|
|
||||||
info("Resize element A below its min width");
|
|
||||||
resize(resizerA, [aBoundingRect.left + 10]);
|
|
||||||
aWidth = a.getBoundingClientRect().width;
|
|
||||||
ok(aboutEq(aWidth, 100), "controlled element was resized to its min width");
|
|
||||||
|
|
||||||
info("Resize element D below its min width");
|
|
||||||
const dBoundingRect = d.getBoundingClientRect();
|
|
||||||
let dOriginalWidth = dBoundingRect.width;
|
|
||||||
|
|
||||||
resize(resizerD, dBoundingRect.left + 100);
|
|
||||||
is(resizedD.length, 1, "onResizeEnd was called once for d");
|
|
||||||
is(resizedA.length, 2, "onResizeEnd wasn't called for a");
|
|
||||||
let dWidth = d.getBoundingClientRect().width;
|
|
||||||
is(resizedD[0], dWidth, "onResizeEnd gives the width of the controlled element");
|
|
||||||
ok(aboutEq(dWidth, 150), "controlled element wasn't resized below its min-width");
|
|
||||||
|
|
||||||
info("Resize element D");
|
|
||||||
resize(resizerD, dBoundingRect.left - 15);
|
|
||||||
dWidth = d.getBoundingClientRect().width;
|
|
||||||
is(resizedD[1], dWidth, "onResizeEnd gives the width of the controlled element");
|
|
||||||
ok(aboutEq(dWidth, dOriginalWidth + 15), "element was resized");
|
|
||||||
} catch(e) {
|
|
||||||
ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
|
|
||||||
} finally {
|
|
||||||
SimpleTest.finish();
|
|
||||||
}
|
|
||||||
|
|
||||||
function resize(resizer, clientX) {
|
|
||||||
info("Mouse down to start dragging");
|
|
||||||
synthesizeMouseAtCenter(resizer, { button: 0, type: "mousedown" }, window);
|
|
||||||
ok(document.firstElementChild.classList.contains("dragging"),
|
|
||||||
"The dragging class is set on the root element");
|
|
||||||
|
|
||||||
const event = new MouseEvent("mousemove", { clientX });
|
|
||||||
resizer.ownerDocument.dispatchEvent(event);
|
|
||||||
|
|
||||||
info("Mouse up to stop resizing");
|
|
||||||
synthesizeMouseAtCenter(document.body, { button: 0, type: "mouseup" }, window);
|
|
||||||
|
|
||||||
ok(!document.firstElementChild.classList.contains("dragging"),
|
|
||||||
"The dragging class is removed from the root element");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</pre>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Загрузка…
Ссылка в новой задаче