1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<!-- 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 HSplitBox 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 rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<link rel="stylesheet" href="chrome://devtools/skin/splitters.css" type="text/css"/>
<link rel="stylesheet" href="chrome://devtools/skin/components-h-split-box.css" type="text/css"/>
<style>
html {
--theme-splitter-color: black;
}
</style>
</head>
<body>
<pre id="test">
<script src="head.js" type="application/javascript"></script>
<script type="application/javascript">
'use strict'
const FUDGE_FACTOR = .1;
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 HSplitBox = React.createFactory(browserRequire("devtools/client/shared/components/HSplitBox"));
ok(HSplitBox, "Should get HSplitBox");
const newSizes = [];
async function renderBox(props) {
const boxProps = Object.assign({
start: "hello!",
end: "world!",
startWidth: .5,
onResize(newSize) {
newSizes.push(newSize);
}
}, props);
const el = ReactDOM.render(HSplitBox(boxProps), window.document.body);
// wait until the element is rendered.
await SimpleTest.promiseWaitForCondition(
() => document.querySelector(".devtools-side-splitter")
);
return el;
}
await renderBox();
// Test that we properly rendered our two panes.
let panes = document.querySelectorAll(".h-split-box-pane");
is(panes.length, 2, "Should get two panes");
is(panes[0].style.flexGrow, "0.5", "Each pane should have .5 width");
is(panes[1].style.flexGrow, "0.5", "Each pane should have .5 width");
is(panes[0].textContent.trim(), "hello!", "First pane should be hello");
is(panes[1].textContent.trim(), "world!", "Second pane should be world");
// Now change the left width and assert that the changes are reflected.
await renderBox({ startWidth: .25 });
panes = document.querySelectorAll(".h-split-box-pane");
is(panes.length, 2, "Should still have two panes");
is(panes[0].style.flexGrow, "0.25", "First pane's width should be .25");
is(panes[1].style.flexGrow, "0.75", "Second pane's width should be .75");
// Mouse moves without having grabbed the splitter should have no effect.
const container = document.querySelector(".h-split-box");
ok(container, "Should get our container .h-split-box");
const { left, top, width } = container.getBoundingClientRect();
const middle = left + width / 2;
const oneQuarter = left + width / 4;
const threeQuarters = left + 3 * width / 4;
synthesizeMouse(container, middle, top, { type: "mousemove" }, window);
is(newSizes.length, 0, "Mouse moves without dragging the splitter should have no effect");
// Send a mouse down on the splitter, and then move the mouse a couple
// times. Now we should get resizes.
const splitter = document.querySelector(".devtools-side-splitter");
ok(splitter, "Should get our splitter");
synthesizeMouseAtCenter(splitter, { button: 0, type: "mousedown" }, window);
function mouseMove(clientX) {
const event = new MouseEvent("mousemove", { clientX });
document.defaultView.top.dispatchEvent(event);
}
mouseMove(middle);
is(newSizes.length, 1, "Should get 1 resize");
ok(aboutEq(newSizes[0], .5), "New size should be ~.5");
mouseMove(left);
is(newSizes.length, 2, "Should get 2 resizes");
ok(aboutEq(newSizes[1], 0), "New size should be ~0");
mouseMove(oneQuarter);
is(newSizes.length, 3, "Sould get 3 resizes");
ok(aboutEq(newSizes[2], .25), "New size should be ~.25");
mouseMove(threeQuarters);
is(newSizes.length, 4, "Should get 4 resizes");
ok(aboutEq(newSizes[3], .75), "New size should be ~.75");
synthesizeMouseAtCenter(splitter, { button: 0, type: "mouseup" }, window);
// Now that we have let go of the splitter, mouse moves should not result in resizes.
synthesizeMouse(container, middle, top, { type: "mousemove" }, window);
is(newSizes.length, 4, "Should still have 4 resizes");
} catch(e) {
ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
} finally {
SimpleTest.finish();
}
};
</script>
</pre>
</body>
</html>
|
