зеркало из 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(
|
||||
'Draggable.js',
|
||||
'GridElementResizer.css',
|
||||
'GridElementWidthResizer.js',
|
||||
'SplitBox.css',
|
||||
'SplitBox.js',
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ support-files =
|
|||
[test_accordion.html]
|
||||
[test_frame_01.html]
|
||||
[test_frame_02.html]
|
||||
[test_GridElementWidthResizer.html]
|
||||
[test_HSplitBox_01.html]
|
||||
[test_list.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>
|
||||
Загрузка…
Ссылка в новой задаче