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 2019-07-12 10:54:47 +03:00
Родитель 6f2d828856
Коммит c440961ac6
5 изменённых файлов: 0 добавлений и 363 удалений

Просмотреть файл

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