mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 16:25:38 +00:00
Bug 1175040 - Add more layout-related properties to the output of getLayout; r=bgrins
The getLayout method of the PageStyleActor returns layout-related data about an element but some information is missing. In particular, this patch adds data about the box-sizing, display and z-index. All of which will be very useful when adding more information to the layoutview panel in bug 1150496. --HG-- extra : rebase_source : f2a8befa24583abdb4d3af6c376de4b17cba0b4b
This commit is contained in:
Patrick Brosset
parent
1d4769324a
commit
17923784a6
@ -768,6 +768,20 @@ let PageStyleActor = protocol.ActorClass({
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get layout-related information about a node.
|
||||
* This method returns an object with properties giving information about
|
||||
* the node's margin, border, padding and content region sizes, as well
|
||||
* as information about the type of box, its position, z-index, etc...
|
||||
* @param {NodeActor} node
|
||||
* @param {Object} options The only available option is autoMargins.
|
||||
* If set to true, the element's margins will receive an extra check to see
|
||||
* whether they are set to "auto" (knowing that the computed-style in this
|
||||
* case would return "0px").
|
||||
* The returned object will contain an extra property (autoMargins) listing
|
||||
* all margins that are set to auto, e.g. {top: "auto", left: "auto"}.
|
||||
* @return {Object}
|
||||
*/
|
||||
getLayout: method(function(node, options) {
|
||||
this.cssLogic.highlight(node.rawNode);
|
||||
|
||||
@ -795,7 +809,10 @@ let PageStyleActor = protocol.ActorClass({
|
||||
"border-top-width",
|
||||
"border-right-width",
|
||||
"border-bottom-width",
|
||||
"border-left-width"
|
||||
"border-left-width",
|
||||
"z-index",
|
||||
"box-sizing",
|
||||
"display"
|
||||
]) {
|
||||
layout[prop] = style.getPropertyValue(prop);
|
||||
}
|
||||
@ -809,10 +826,6 @@ let PageStyleActor = protocol.ActorClass({
|
||||
this.map[i].value = parseFloat(style.getPropertyValue(property));
|
||||
}
|
||||
|
||||
if (options.margins) {
|
||||
layout.margins = this.processMargins(this.cssLogic);
|
||||
}
|
||||
|
||||
return layout;
|
||||
}, {
|
||||
request: {
|
||||
|
||||
4
toolkit/devtools/server/tests/mochitest/.eslintrc
Normal file
4
toolkit/devtools/server/tests/mochitest/.eslintrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
// Extend from the common devtools mochitest eslintrc config.
|
||||
"extends": "../../../../../browser/devtools/.eslintrc.mochitests"
|
||||
}
|
||||
@ -87,6 +87,7 @@ skip-if = buildapp == 'mulet'
|
||||
[test_settings.html]
|
||||
[test_styles-applied.html]
|
||||
[test_styles-computed.html]
|
||||
[test_styles-layout.html]
|
||||
[test_styles-matched.html]
|
||||
[test_styles-modify.html]
|
||||
[test_styles-svg.html]
|
||||
|
||||
@ -19,6 +19,22 @@
|
||||
#svgcontent rect {
|
||||
fill: rgb(1,2,3);
|
||||
}
|
||||
|
||||
#layout-element,
|
||||
#layout-auto-margin-element {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 3px 5px 7px 5px;
|
||||
border: 5px solid red;
|
||||
margin: 10px 20px 30px 0;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#layout-auto-margin-element {
|
||||
margin: 10px auto;
|
||||
}
|
||||
</style>
|
||||
<link type="text/css" rel="stylesheet" href="inspector-styles-data.css"></link>
|
||||
<body>
|
||||
@ -58,5 +74,8 @@
|
||||
<svg><rect></rect></svg>
|
||||
</div>
|
||||
|
||||
<div id="layout-element">I can has layout</div>
|
||||
<div id="layout-auto-margin-element">I can has layout too</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
118
toolkit/devtools/server/tests/mochitest/test_styles-layout.html
Normal file
118
toolkit/devtools/server/tests/mochitest/test_styles-layout.html
Normal file
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test for Bug 1175040 - PageStyleActor.getLayout</title>
|
||||
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
|
||||
<script type="application/javascript;version=1.8" src="inspector-helpers.js"></script>
|
||||
<script type="application/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
|
||||
|
||||
window.onload = function() {
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
runNextTest();
|
||||
};
|
||||
|
||||
let gWalker = null;
|
||||
let gStyles = null;
|
||||
|
||||
addTest(function() {
|
||||
let url = document.getElementById("inspectorContent").href;
|
||||
attachURL(url, function(err, client, tab, doc) {
|
||||
let {InspectorFront} = devtools.require("devtools/server/actors/inspector");
|
||||
let inspector = InspectorFront(client, tab);
|
||||
promiseDone(inspector.getWalker().then(walker => {
|
||||
ok(walker, "getWalker() should return an actor.");
|
||||
gWalker = walker;
|
||||
return inspector.getPageStyle();
|
||||
}).then(styles => {
|
||||
gStyles = styles;
|
||||
}).then(runNextTest));
|
||||
});
|
||||
});
|
||||
|
||||
addTest(function() {
|
||||
ok(gStyles.getLayout, "The PageStyleActor has a getLayout method");
|
||||
runNextTest();
|
||||
});
|
||||
|
||||
addAsyncTest(function*() {
|
||||
let node = yield gWalker.querySelector(gWalker.rootNode, "#layout-element");
|
||||
let layout = yield gStyles.getLayout(node, {});
|
||||
|
||||
let properties = ["width", "height",
|
||||
"margin-top", "margin-right", "margin-bottom",
|
||||
"margin-left", "padding-top", "padding-right",
|
||||
"padding-bottom", "padding-left", "border-top-width",
|
||||
"border-right-width", "border-bottom-width",
|
||||
"border-left-width", "z-index", "box-sizing", "display",
|
||||
"position"];
|
||||
for (let prop of properties) {
|
||||
ok((prop in layout), "The layout object returned has " + prop);
|
||||
}
|
||||
|
||||
runNextTest();
|
||||
});
|
||||
|
||||
addAsyncTest(function*() {
|
||||
let node = yield gWalker.querySelector(gWalker.rootNode, "#layout-element");
|
||||
let layout = yield gStyles.getLayout(node, {});
|
||||
|
||||
let expected = {
|
||||
"box-sizing": "border-box",
|
||||
"position": "absolute",
|
||||
"z-index": "2",
|
||||
"display": "block",
|
||||
"width": 50,
|
||||
"height": 50,
|
||||
"margin-top": "10px",
|
||||
"margin-right": "20px",
|
||||
"margin-bottom": "30px",
|
||||
"margin-left": "0px"
|
||||
};
|
||||
|
||||
for (let name in expected) {
|
||||
is(layout[name], expected[name], "The " + name + " property is correct");
|
||||
}
|
||||
|
||||
runNextTest();
|
||||
});
|
||||
|
||||
addAsyncTest(function*() {
|
||||
let node = yield gWalker.querySelector(gWalker.rootNode,
|
||||
"#layout-auto-margin-element");
|
||||
|
||||
let layout = yield gStyles.getLayout(node, {});
|
||||
ok(!("autoMargins" in layout),
|
||||
"By default, getLayout doesn't return auto margins");
|
||||
|
||||
layout = yield gStyles.getLayout(node, {autoMargins: true});
|
||||
ok(("autoMargins" in layout),
|
||||
"getLayout does return auto margins when asked to");
|
||||
is(layout.autoMargins.left, "auto", "The left margin is auto");
|
||||
is(layout.autoMargins.right, "auto", "The right margin is auto");
|
||||
ok(!layout.autoMargins.bottom, "The bottom margin is not auto");
|
||||
ok(!layout.autoMargins.top, "The top margin is not auto");
|
||||
|
||||
runNextTest();
|
||||
});
|
||||
|
||||
addTest(function() {
|
||||
gStyles = gWalker = null;
|
||||
runNextTest();
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1175040">Mozilla Bug 1175040</a>
|
||||
<a id="inspectorContent" target="_blank" href="inspector-styles-data.html">Test Document</a>
|
||||
<p id="display"></p>
|
||||
<div id="content" style="display: none"></div>
|
||||
<pre id="test">
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user