зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1302496 - Refactor LayoutView to a Box Model component r=jdescottes
--HG-- rename : devtools/client/inspector/layout/layout.js => devtools/client/inspector/components/box-model.js rename : devtools/client/inspector/layout/test/.eslintrc => devtools/client/inspector/components/test/.eslintrc rename : devtools/client/inspector/layout/test/browser.ini => devtools/client/inspector/components/test/browser.ini rename : devtools/client/inspector/layout/test/browser_layout.js => devtools/client/inspector/components/test/browser_boxmodel.js rename : devtools/client/inspector/layout/test/browser_layout_editablemodel.js => devtools/client/inspector/components/test/browser_boxmodel_editablemodel.js rename : devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js => devtools/client/inspector/components/test/browser_boxmodel_editablemodel_allproperties.js rename : devtools/client/inspector/layout/test/browser_layout_editablemodel_bluronclick.js => devtools/client/inspector/components/test/browser_boxmodel_editablemodel_bluronclick.js rename : devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js => devtools/client/inspector/components/test/browser_boxmodel_editablemodel_border.js rename : devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js => devtools/client/inspector/components/test/browser_boxmodel_editablemodel_stylerules.js rename : devtools/client/inspector/layout/test/browser_layout_guides.js => devtools/client/inspector/components/test/browser_boxmodel_guides.js rename : devtools/client/inspector/layout/test/browser_layout_rotate-labels-on-sides.js => devtools/client/inspector/components/test/browser_boxmodel_rotate-labels-on-sides.js rename : devtools/client/inspector/layout/test/browser_layout_sync.js => devtools/client/inspector/components/test/browser_boxmodel_sync.js rename : devtools/client/inspector/layout/test/browser_layout_tooltips.js => devtools/client/inspector/components/test/browser_boxmodel_tooltips.js rename : devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js => devtools/client/inspector/components/test/browser_boxmodel_update-after-navigation.js rename : devtools/client/inspector/layout/test/browser_layout_update-after-reload.js => devtools/client/inspector/components/test/browser_boxmodel_update-after-reload.js rename : devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js => devtools/client/inspector/components/test/browser_boxmodel_update-in-iframes.js rename : devtools/client/inspector/layout/test/doc_layout_iframe1.html => devtools/client/inspector/components/test/doc_boxmodel_iframe1.html rename : devtools/client/inspector/layout/test/doc_layout_iframe2.html => devtools/client/inspector/components/test/doc_boxmodel_iframe2.html rename : devtools/client/inspector/layout/test/head.js => devtools/client/inspector/components/test/head.js rename : devtools/client/themes/layout.css => devtools/client/themes/boxmodel.css
This commit is contained in:
Gabriel Luong
Родитель
c58d0d6900
Коммит
0515d3805c
|
|
@ -23,7 +23,7 @@ const LONG_TEXT_ROTATE_LIMIT = 3;
|
|||
/**
|
||||
* An instance of EditingSession tracks changes that have been made during the
|
||||
* modification of box model values. All of these changes can be reverted by
|
||||
* calling revert. The main parameter is the LayoutView that created it.
|
||||
* calling revert. The main parameter is the BoxModelView that created it.
|
||||
*
|
||||
* @param inspector The inspector panel.
|
||||
* @param doc A DOM document that can be used to test style rules.
|
||||
|
|
@ -183,27 +183,27 @@ EditingSession.prototype = {
|
|||
};
|
||||
|
||||
/**
|
||||
* The layout-view panel
|
||||
* The box model view
|
||||
* @param {InspectorPanel} inspector
|
||||
* An instance of the inspector-panel currently loaded in the toolbox
|
||||
* @param {Document} document
|
||||
* The document that will contain the layout view.
|
||||
* The document that will contain the box model view.
|
||||
*/
|
||||
function LayoutView(inspector, document) {
|
||||
function BoxModelView(inspector, document) {
|
||||
this.inspector = inspector;
|
||||
this.doc = document;
|
||||
this.wrapper = this.doc.getElementById("layout-wrapper");
|
||||
this.container = this.doc.getElementById("layout-container");
|
||||
this.expander = this.doc.getElementById("layout-expander");
|
||||
this.sizeLabel = this.doc.querySelector(".layout-size > span");
|
||||
this.sizeHeadingLabel = this.doc.getElementById("layout-element-size");
|
||||
this.wrapper = this.doc.getElementById("boxmodel-wrapper");
|
||||
this.container = this.doc.getElementById("boxmodel-container");
|
||||
this.expander = this.doc.getElementById("boxmodel-expander");
|
||||
this.sizeLabel = this.doc.querySelector(".boxmodel-size > span");
|
||||
this.sizeHeadingLabel = this.doc.getElementById("boxmodel-element-size");
|
||||
this._geometryEditorHighlighter = null;
|
||||
this._cssProperties = getCssProperties(inspector.toolbox);
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
LayoutView.prototype = {
|
||||
BoxModelView.prototype = {
|
||||
init: function () {
|
||||
this.update = this.update.bind(this);
|
||||
|
||||
|
|
@ -218,7 +218,7 @@ LayoutView.prototype = {
|
|||
|
||||
this.onToggleExpander = this.onToggleExpander.bind(this);
|
||||
this.expander.addEventListener("click", this.onToggleExpander);
|
||||
let header = this.doc.getElementById("layout-header");
|
||||
let header = this.doc.getElementById("boxmodel-header");
|
||||
header.addEventListener("dblclick", this.onToggleExpander);
|
||||
|
||||
this.onFilterComputedView = this.onFilterComputedView.bind(this);
|
||||
|
|
@ -233,72 +233,72 @@ LayoutView.prototype = {
|
|||
this.initBoxModelHighlighter();
|
||||
|
||||
// Store for the different dimensions of the node.
|
||||
// 'selector' refers to the element that holds the value in view.xhtml;
|
||||
// 'selector' refers to the element that holds the value;
|
||||
// 'property' is what we are measuring;
|
||||
// 'value' is the computed dimension, computed in update().
|
||||
this.map = {
|
||||
position: {
|
||||
selector: "#layout-element-position",
|
||||
selector: "#boxmodel-element-position",
|
||||
property: "position",
|
||||
value: undefined
|
||||
},
|
||||
marginTop: {
|
||||
selector: ".layout-margin.layout-top > span",
|
||||
selector: ".boxmodel-margin.boxmodel-top > span",
|
||||
property: "margin-top",
|
||||
value: undefined
|
||||
},
|
||||
marginBottom: {
|
||||
selector: ".layout-margin.layout-bottom > span",
|
||||
selector: ".boxmodel-margin.boxmodel-bottom > span",
|
||||
property: "margin-bottom",
|
||||
value: undefined
|
||||
},
|
||||
marginLeft: {
|
||||
selector: ".layout-margin.layout-left > span",
|
||||
selector: ".boxmodel-margin.boxmodel-left > span",
|
||||
property: "margin-left",
|
||||
value: undefined
|
||||
},
|
||||
marginRight: {
|
||||
selector: ".layout-margin.layout-right > span",
|
||||
selector: ".boxmodel-margin.boxmodel-right > span",
|
||||
property: "margin-right",
|
||||
value: undefined
|
||||
},
|
||||
paddingTop: {
|
||||
selector: ".layout-padding.layout-top > span",
|
||||
selector: ".boxmodel-padding.boxmodel-top > span",
|
||||
property: "padding-top",
|
||||
value: undefined
|
||||
},
|
||||
paddingBottom: {
|
||||
selector: ".layout-padding.layout-bottom > span",
|
||||
selector: ".boxmodel-padding.boxmodel-bottom > span",
|
||||
property: "padding-bottom",
|
||||
value: undefined
|
||||
},
|
||||
paddingLeft: {
|
||||
selector: ".layout-padding.layout-left > span",
|
||||
selector: ".boxmodel-padding.boxmodel-left > span",
|
||||
property: "padding-left",
|
||||
value: undefined
|
||||
},
|
||||
paddingRight: {
|
||||
selector: ".layout-padding.layout-right > span",
|
||||
selector: ".boxmodel-padding.boxmodel-right > span",
|
||||
property: "padding-right",
|
||||
value: undefined
|
||||
},
|
||||
borderTop: {
|
||||
selector: ".layout-border.layout-top > span",
|
||||
selector: ".boxmodel-border.boxmodel-top > span",
|
||||
property: "border-top-width",
|
||||
value: undefined
|
||||
},
|
||||
borderBottom: {
|
||||
selector: ".layout-border.layout-bottom > span",
|
||||
selector: ".boxmodel-border.boxmodel-bottom > span",
|
||||
property: "border-bottom-width",
|
||||
value: undefined
|
||||
},
|
||||
borderLeft: {
|
||||
selector: ".layout-border.layout-left > span",
|
||||
selector: ".boxmodel-border.boxmodel-left > span",
|
||||
property: "border-left-width",
|
||||
value: undefined
|
||||
},
|
||||
borderRight: {
|
||||
selector: ".layout-border.layout-right > span",
|
||||
selector: ".boxmodel-border.boxmodel-right > span",
|
||||
property: "border-right-width",
|
||||
value: undefined
|
||||
}
|
||||
|
|
@ -326,7 +326,7 @@ LayoutView.prototype = {
|
|||
},
|
||||
|
||||
initBoxModelHighlighter: function () {
|
||||
let highlightElts = this.doc.querySelectorAll("#layout-container *[title]");
|
||||
let highlightElts = this.doc.querySelectorAll("#boxmodel-container *[title]");
|
||||
this.onHighlightMouseOver = this.onHighlightMouseOver.bind(this);
|
||||
this.onHighlightMouseOut = this.onHighlightMouseOut.bind(this);
|
||||
|
||||
|
|
@ -367,7 +367,7 @@ LayoutView.prototype = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Called when the user clicks on one of the editable values in the layoutview
|
||||
* Called when the user clicks on one of the editable values in the box model view
|
||||
*/
|
||||
initEditor: function (element, event, dimension) {
|
||||
let { property } = dimension;
|
||||
|
|
@ -382,7 +382,7 @@ LayoutView.prototype = {
|
|||
name: dimension.property
|
||||
},
|
||||
start: self => {
|
||||
self.elt.parentNode.classList.add("layout-editing");
|
||||
self.elt.parentNode.classList.add("boxmodel-editing");
|
||||
},
|
||||
|
||||
change: value => {
|
||||
|
|
@ -406,7 +406,7 @@ LayoutView.prototype = {
|
|||
},
|
||||
|
||||
done: (value, commit) => {
|
||||
editor.elt.parentNode.classList.remove("layout-editing");
|
||||
editor.elt.parentNode.classList.remove("boxmodel-editing");
|
||||
if (!commit) {
|
||||
session.revert().then(() => {
|
||||
session.destroy();
|
||||
|
|
@ -418,7 +418,7 @@ LayoutView.prototype = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Is the layoutview visible in the sidebar.
|
||||
* Is the BoxModelView visible in the sidebar.
|
||||
* @return {Boolean}
|
||||
*/
|
||||
isViewVisible: function () {
|
||||
|
|
@ -427,7 +427,7 @@ LayoutView.prototype = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Is the layoutview visible in the sidebar and is the current node valid to
|
||||
* Is the BoxModelView visible in the sidebar and is the current node valid to
|
||||
* be displayed in the view.
|
||||
* @return {Boolean}
|
||||
*/
|
||||
|
|
@ -441,7 +441,7 @@ LayoutView.prototype = {
|
|||
* Destroy the nodes. Remove listeners.
|
||||
*/
|
||||
destroy: function () {
|
||||
let highlightElts = this.doc.querySelectorAll("#layout-container *[title]");
|
||||
let highlightElts = this.doc.querySelectorAll("#boxmodel-container *[title]");
|
||||
|
||||
for (let element of highlightElts) {
|
||||
element.removeEventListener("mouseover", this.onHighlightMouseOver, true);
|
||||
|
|
@ -449,7 +449,7 @@ LayoutView.prototype = {
|
|||
}
|
||||
|
||||
this.expander.removeEventListener("click", this.onToggleExpander);
|
||||
let header = this.doc.getElementById("layout-header");
|
||||
let header = this.doc.getElementById("boxmodel-header");
|
||||
header.removeEventListener("dblclick", this.onToggleExpander);
|
||||
|
||||
let nodeGeometry = this.doc.getElementById("layout-geometry-editor");
|
||||
|
|
@ -458,7 +458,7 @@ LayoutView.prototype = {
|
|||
this.inspector.off("picker-started", this.onPickerStarted);
|
||||
|
||||
// Inspector Panel will destroy `markup` object on "will-navigate" event,
|
||||
// therefore we have to check if it's still available in case LayoutView
|
||||
// therefore we have to check if it's still available in case BoxModelView
|
||||
// is destroyed immediately after.
|
||||
if (this.inspector.markup) {
|
||||
this.inspector.markup.off("leave", this.onMarkupViewLeave);
|
||||
|
|
@ -571,7 +571,7 @@ LayoutView.prototype = {
|
|||
* Event handler that responds to the computed view being filtered
|
||||
* @param {String} reason
|
||||
* @param {Boolean} hidden
|
||||
* Whether or not to hide the layout wrapper
|
||||
* Whether or not to hide the box model wrapper
|
||||
*/
|
||||
onFilterComputedView: function (reason, hidden) {
|
||||
this.wrapper.hidden = hidden;
|
||||
|
|
@ -579,7 +579,7 @@ LayoutView.prototype = {
|
|||
|
||||
/**
|
||||
* Stop tracking reflows and hide all values when no node is selected or the
|
||||
* layout-view is hidden, otherwise track reflows and show values.
|
||||
* box model view is hidden, otherwise track reflows and show values.
|
||||
* @param {Boolean} isActive
|
||||
*/
|
||||
setActive: function (isActive) {
|
||||
|
|
@ -604,7 +604,7 @@ LayoutView.prototype = {
|
|||
let lastRequest = Task.spawn((function* () {
|
||||
if (!this.isViewVisibleAndNodeValid()) {
|
||||
this.wrapper.hidden = true;
|
||||
this.inspector.emit("layoutview-updated");
|
||||
this.inspector.emit("boxmodel-view-updated");
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -689,7 +689,7 @@ LayoutView.prototype = {
|
|||
|
||||
this.wrapper.hidden = false;
|
||||
|
||||
this.inspector.emit("layoutview-updated");
|
||||
this.inspector.emit("boxmodel-view-updated");
|
||||
return null;
|
||||
}).bind(this)).catch(console.error);
|
||||
|
||||
|
|
@ -831,12 +831,12 @@ LayoutView.prototype = {
|
|||
manageOverflowingText: function (span) {
|
||||
let classList = span.parentNode.classList;
|
||||
|
||||
if (classList.contains("layout-left") ||
|
||||
classList.contains("layout-right")) {
|
||||
if (classList.contains("boxmodel-left") ||
|
||||
classList.contains("boxmodel-right")) {
|
||||
let force = span.textContent.length > LONG_TEXT_ROTATE_LIMIT;
|
||||
classList.toggle("layout-rotate", force);
|
||||
classList.toggle("boxmodel-rotate", force);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
exports.LayoutView = LayoutView;
|
||||
exports.BoxModelView = BoxModelView;
|
||||
|
|
@ -5,6 +5,9 @@
|
|||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
DevToolsModules(
|
||||
'box-model.js',
|
||||
'inspector-tab-panel.css',
|
||||
'inspector-tab-panel.js',
|
||||
)
|
||||
|
||||
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
[DEFAULT]
|
||||
tags = devtools
|
||||
subsuite = devtools
|
||||
support-files =
|
||||
doc_boxmodel_iframe1.html
|
||||
doc_boxmodel_iframe2.html
|
||||
head.js
|
||||
!/devtools/client/commandline/test/helpers.js
|
||||
!/devtools/client/framework/test/shared-head.js
|
||||
!/devtools/client/inspector/test/head.js
|
||||
!/devtools/client/inspector/test/shared-head.js
|
||||
!/devtools/client/shared/test/test-actor.js
|
||||
!/devtools/client/shared/test/test-actor-registry.js
|
||||
|
||||
[browser_boxmodel.js]
|
||||
[browser_boxmodel_editablemodel.js]
|
||||
# [browser_boxmodel_editablemodel_allproperties.js]
|
||||
# Disabled for too many intermittent failures (bug 1009322)
|
||||
[browser_boxmodel_editablemodel_bluronclick.js]
|
||||
[browser_boxmodel_editablemodel_border.js]
|
||||
[browser_boxmodel_editablemodel_stylerules.js]
|
||||
[browser_boxmodel_guides.js]
|
||||
[browser_boxmodel_rotate-labels-on-sides.js]
|
||||
[browser_boxmodel_sync.js]
|
||||
[browser_boxmodel_tooltips.js]
|
||||
[browser_boxmodel_update-after-navigation.js]
|
||||
[browser_boxmodel_update-after-reload.js]
|
||||
# [browser_boxmodel_update-in-iframes.js]
|
||||
# Bug 1020038 boxmodel-view updates for iframe elements changes
|
||||
|
|
@ -4,124 +4,124 @@
|
|||
|
||||
"use strict";
|
||||
|
||||
// Test that the layout-view displays the right values and that it updates when
|
||||
// Test that the box model displays the right values and that it updates when
|
||||
// the node's style is changed
|
||||
|
||||
// Expected values:
|
||||
var res1 = [
|
||||
{
|
||||
selector: "#layout-element-size",
|
||||
selector: "#boxmodel-element-size",
|
||||
value: "160" + "\u00D7" + "160.117"
|
||||
},
|
||||
{
|
||||
selector: ".layout-size > span",
|
||||
selector: ".boxmodel-size > span",
|
||||
value: "100" + "\u00D7" + "100.117"
|
||||
},
|
||||
{
|
||||
selector: ".layout-margin.layout-top > span",
|
||||
selector: ".boxmodel-margin.boxmodel-top > span",
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
selector: ".layout-margin.layout-left > span",
|
||||
selector: ".boxmodel-margin.boxmodel-left > span",
|
||||
value: "auto"
|
||||
},
|
||||
{
|
||||
selector: ".layout-margin.layout-bottom > span",
|
||||
selector: ".boxmodel-margin.boxmodel-bottom > span",
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
selector: ".layout-margin.layout-right > span",
|
||||
selector: ".boxmodel-margin.boxmodel-right > span",
|
||||
value: "auto"
|
||||
},
|
||||
{
|
||||
selector: ".layout-padding.layout-top > span",
|
||||
selector: ".boxmodel-padding.boxmodel-top > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".layout-padding.layout-left > span",
|
||||
selector: ".boxmodel-padding.boxmodel-left > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".layout-padding.layout-bottom > span",
|
||||
selector: ".boxmodel-padding.boxmodel-bottom > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".layout-padding.layout-right > span",
|
||||
selector: ".boxmodel-padding.boxmodel-right > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".layout-border.layout-top > span",
|
||||
selector: ".boxmodel-border.boxmodel-top > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".layout-border.layout-left > span",
|
||||
selector: ".boxmodel-border.boxmodel-left > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".layout-border.layout-bottom > span",
|
||||
selector: ".boxmodel-border.boxmodel-bottom > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".layout-border.layout-right > span",
|
||||
selector: ".boxmodel-border.boxmodel-right > span",
|
||||
value: 10
|
||||
},
|
||||
];
|
||||
|
||||
var res2 = [
|
||||
{
|
||||
selector: "#layout-element-size",
|
||||
selector: "#boxmodel-element-size",
|
||||
value: "190" + "\u00D7" + "210"
|
||||
},
|
||||
{
|
||||
selector: ".layout-size > span",
|
||||
selector: ".boxmodel-size > span",
|
||||
value: "100" + "\u00D7" + "150"
|
||||
},
|
||||
{
|
||||
selector: ".layout-margin.layout-top > span",
|
||||
selector: ".boxmodel-margin.boxmodel-top > span",
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
selector: ".layout-margin.layout-left > span",
|
||||
selector: ".boxmodel-margin.boxmodel-left > span",
|
||||
value: "auto"
|
||||
},
|
||||
{
|
||||
selector: ".layout-margin.layout-bottom > span",
|
||||
selector: ".boxmodel-margin.boxmodel-bottom > span",
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
selector: ".layout-margin.layout-right > span",
|
||||
selector: ".boxmodel-margin.boxmodel-right > span",
|
||||
value: "auto"
|
||||
},
|
||||
{
|
||||
selector: ".layout-padding.layout-top > span",
|
||||
selector: ".boxmodel-padding.boxmodel-top > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".layout-padding.layout-left > span",
|
||||
selector: ".boxmodel-padding.boxmodel-left > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".layout-padding.layout-bottom > span",
|
||||
selector: ".boxmodel-padding.boxmodel-bottom > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".layout-padding.layout-right > span",
|
||||
selector: ".boxmodel-padding.boxmodel-right > span",
|
||||
value: 50
|
||||
},
|
||||
{
|
||||
selector: ".layout-border.layout-top > span",
|
||||
selector: ".boxmodel-border.boxmodel-top > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".layout-border.layout-left > span",
|
||||
selector: ".boxmodel-border.boxmodel-left > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".layout-border.layout-bottom > span",
|
||||
selector: ".boxmodel-border.boxmodel-bottom > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".layout-border.layout-right > span",
|
||||
selector: ".boxmodel-border.boxmodel-right > span",
|
||||
value: 10
|
||||
},
|
||||
];
|
||||
|
|
@ -133,7 +133,7 @@ add_task(function* () {
|
|||
let html = "<style>" + style + "</style><div></div>";
|
||||
|
||||
yield addTab("data:text/html," + encodeURIComponent(html));
|
||||
let {inspector, view, testActor} = yield openLayoutView();
|
||||
let {inspector, view, testActor} = yield openBoxModelView();
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
yield testInitialValues(inspector, view);
|
||||
|
|
@ -19,7 +19,7 @@ const TEST_URI = "<style>" +
|
|||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
|
||||
let {inspector, view, testActor} = yield openLayoutView();
|
||||
let {inspector, view, testActor} = yield openBoxModelView();
|
||||
|
||||
yield testEditingMargins(inspector, view, testActor);
|
||||
yield testKeyBindings(inspector, view, testActor);
|
||||
|
|
@ -36,7 +36,7 @@ function* testEditingMargins(inspector, view, testActor) {
|
|||
"Should be no margin-top on the element.");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-margin.layout-top > span");
|
||||
let span = view.doc.querySelector(".boxmodel-margin.boxmodel-top > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -66,7 +66,7 @@ function* testKeyBindings(inspector, view, testActor) {
|
|||
"Should be no margin-top on the element.");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-margin.layout-left > span");
|
||||
let span = view.doc.querySelector(".boxmodel-margin.boxmodel-left > span");
|
||||
is(span.textContent, 10, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -109,7 +109,7 @@ function* testEscapeToUndo(inspector, view, testActor) {
|
|||
"Should be the right margin-top on the element.");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-margin.layout-left > span");
|
||||
let span = view.doc.querySelector(".boxmodel-margin.boxmodel-left > span");
|
||||
is(span.textContent, 20, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -140,7 +140,7 @@ function* testDeletingValue(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-margin.layout-right > span");
|
||||
let span = view.doc.querySelector(".boxmodel-margin.boxmodel-right > span");
|
||||
is(span.textContent, 15, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -167,7 +167,7 @@ function* testRefocusingOnClick(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div4", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-margin.layout-top > span");
|
||||
let span = view.doc.querySelector(".boxmodel-margin.boxmodel-top > span");
|
||||
is(span.textContent, 1, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -16,7 +16,7 @@ const TEST_URI = "<style>" +
|
|||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
|
||||
let {inspector, view, testActor} = yield openLayoutView();
|
||||
let {inspector, view, testActor} = yield openBoxModelView();
|
||||
|
||||
yield testEditing(inspector, view, testActor);
|
||||
yield testEditingAndCanceling(inspector, view, testActor);
|
||||
|
|
@ -32,7 +32,7 @@ function* testEditing(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-padding.layout-bottom > span");
|
||||
let span = view.doc.querySelector(".boxmodel-padding.boxmodel-bottom > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -63,7 +63,7 @@ function* testEditingAndCanceling(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-padding.layout-left > span");
|
||||
let span = view.doc.querySelector(".boxmodel-padding.boxmodel-left > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -91,7 +91,7 @@ function* testDeleting(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-padding.layout-left > span");
|
||||
let span = view.doc.querySelector(".boxmodel-padding.boxmodel-left > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -122,7 +122,7 @@ function* testDeletingAndCanceling(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-padding.layout-left > span");
|
||||
let span = view.doc.querySelector(".boxmodel-padding.boxmodel-left > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -16,11 +16,12 @@ const TEST_URI =
|
|||
<div id="div1"></div>`;
|
||||
|
||||
add_task(function* () {
|
||||
// Make sure the toolbox is tall enough to have empty space below the layout-container.
|
||||
// Make sure the toolbox is tall enough to have empty space below the
|
||||
// boxmodel-container.
|
||||
yield pushPref("devtools.toolbox.footer.height", 500);
|
||||
|
||||
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
|
||||
let {inspector, view} = yield openLayoutView();
|
||||
let {inspector, view} = yield openBoxModelView();
|
||||
|
||||
yield selectNode("#div1", inspector);
|
||||
yield testClickingOutsideEditor(view);
|
||||
|
|
@ -29,7 +30,7 @@ add_task(function* () {
|
|||
|
||||
function* testClickingOutsideEditor(view) {
|
||||
info("Test that clicking outside the editor blurs it");
|
||||
let span = view.doc.querySelector(".layout-margin.layout-top > span");
|
||||
let span = view.doc.querySelector(".boxmodel-margin.boxmodel-top > span");
|
||||
is(span.textContent, 10, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -49,18 +50,18 @@ function* testClickingOutsideEditor(view) {
|
|||
|
||||
function* testClickingBelowContainer(view) {
|
||||
info("Test that clicking below the box-model container blurs it");
|
||||
let span = view.doc.querySelector(".layout-margin.layout-top > span");
|
||||
let span = view.doc.querySelector(".boxmodel-margin.boxmodel-top > span");
|
||||
is(span.textContent, 10, "Should have the right value in the box model.");
|
||||
|
||||
info("Test that clicking below the layout-container blurs the opened editor");
|
||||
info("Test that clicking below the boxmodel-container blurs the opened editor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
|
||||
let onBlur = once(editor, "blur");
|
||||
let container = view.doc.querySelector("#layout-container");
|
||||
let container = view.doc.querySelector("#boxmodel-container");
|
||||
// Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse)
|
||||
// use an erroneous height of ~50px for the layout container.
|
||||
// use an erroneous height of ~50px for the boxmodel-container.
|
||||
let bounds = container.getBoxQuads({relativeTo: view.doc})[0].bounds;
|
||||
EventUtils.synthesizeMouseAtPoint(
|
||||
bounds.left + 10,
|
||||
|
|
@ -16,7 +16,7 @@ const TEST_URI = "<style>" +
|
|||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
|
||||
let {inspector, view, testActor} = yield openLayoutView();
|
||||
let {inspector, view, testActor} = yield openBoxModelView();
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "border-top-width")), "",
|
||||
"Should have the right border");
|
||||
|
|
@ -24,7 +24,7 @@ add_task(function* () {
|
|||
"Should have the right border");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-border.layout-top > span");
|
||||
let span = view.doc.querySelector(".boxmodel-border.boxmodel-top > span");
|
||||
is(span.textContent, 0, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -17,7 +17,7 @@ const TEST_URI = "<style>" +
|
|||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
|
||||
let {inspector, view, testActor} = yield openLayoutView();
|
||||
let {inspector, view, testActor} = yield openBoxModelView();
|
||||
|
||||
yield testUnits(inspector, view, testActor);
|
||||
yield testValueComesFromStyleRule(inspector, view, testActor);
|
||||
|
|
@ -31,7 +31,7 @@ function* testUnits(inspector, view, testActor) {
|
|||
"Should have the right padding");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-padding.layout-top > span");
|
||||
let span = view.doc.querySelector(".boxmodel-padding.boxmodel-top > span");
|
||||
is(span.textContent, 3, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -68,7 +68,7 @@ function* testValueComesFromStyleRule(inspector, view, testActor) {
|
|||
"Should have the right border-bottom-width");
|
||||
yield selectNode("#div2", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-border.layout-bottom > span");
|
||||
let span = view.doc.querySelector(".boxmodel-border.boxmodel-bottom > span");
|
||||
is(span.textContent, 16, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -97,7 +97,7 @@ function* testShorthandsAreParsed(inspector, view, testActor) {
|
|||
"Should have the right padding");
|
||||
yield selectNode("#div3", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".layout-padding.layout-right > span");
|
||||
let span = view.doc.querySelector(".boxmodel-padding.boxmodel-right > span");
|
||||
is(span.textContent, 32, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
// the right options.
|
||||
// Tests that actually check the highlighter is displayed and correct are in the
|
||||
// devtools/inspector/test folder. This test only cares about checking that the
|
||||
// layout-view does call the highlighter, and it does so by mocking it.
|
||||
// box model view does call the highlighter, and it does so by mocking it.
|
||||
|
||||
const STYLE = "div { position: absolute; top: 50px; left: 50px; " +
|
||||
"height: 10px; width: 10px; border: 10px solid black; " +
|
||||
|
|
@ -19,7 +19,7 @@ var highlightedNodeFront, highlighterOptions;
|
|||
|
||||
add_task(function* () {
|
||||
yield addTab(TEST_URL);
|
||||
let {toolbox, inspector, view} = yield openLayoutView();
|
||||
let {toolbox, inspector, view} = yield openBoxModelView();
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
// Mock the highlighter by replacing the showBoxModel method.
|
||||
|
|
@ -28,21 +28,21 @@ add_task(function* () {
|
|||
highlighterOptions = options;
|
||||
};
|
||||
|
||||
let elt = view.doc.getElementById("layout-margins");
|
||||
let elt = view.doc.getElementById("boxmodel-margins");
|
||||
yield testGuideOnLayoutHover(elt, "margin", inspector, view);
|
||||
|
||||
elt = view.doc.getElementById("layout-borders");
|
||||
elt = view.doc.getElementById("boxmodel-borders");
|
||||
yield testGuideOnLayoutHover(elt, "border", inspector, view);
|
||||
|
||||
elt = view.doc.getElementById("layout-padding");
|
||||
elt = view.doc.getElementById("boxmodel-padding");
|
||||
yield testGuideOnLayoutHover(elt, "padding", inspector, view);
|
||||
|
||||
elt = view.doc.getElementById("layout-content");
|
||||
elt = view.doc.getElementById("boxmodel-content");
|
||||
yield testGuideOnLayoutHover(elt, "content", inspector, view);
|
||||
});
|
||||
|
||||
function* testGuideOnLayoutHover(elt, expectedRegion, inspector) {
|
||||
info("Synthesizing mouseover on the layout-view");
|
||||
info("Synthesizing mouseover on the boxmodel-view");
|
||||
EventUtils.synthesizeMouse(elt, 2, 2, {type: "mouseover"},
|
||||
elt.ownerDocument.defaultView);
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that longer values are rotated on the side
|
||||
|
||||
const res1 = [
|
||||
{selector: ".boxmodel-margin.boxmodel-top > span", value: 30},
|
||||
{selector: ".boxmodel-margin.boxmodel-left > span", value: "auto"},
|
||||
{selector: ".boxmodel-margin.boxmodel-bottom > span", value: 30},
|
||||
{selector: ".boxmodel-margin.boxmodel-right > span", value: "auto"},
|
||||
{selector: ".boxmodel-padding.boxmodel-top > span", value: 20},
|
||||
{selector: ".boxmodel-padding.boxmodel-left > span", value: 2000000},
|
||||
{selector: ".boxmodel-padding.boxmodel-bottom > span", value: 20},
|
||||
{selector: ".boxmodel-padding.boxmodel-right > span", value: 20},
|
||||
{selector: ".boxmodel-border.boxmodel-top > span", value: 10},
|
||||
{selector: ".boxmodel-border.boxmodel-left > span", value: 10},
|
||||
{selector: ".boxmodel-border.boxmodel-bottom > span", value: 10},
|
||||
{selector: ".boxmodel-border.boxmodel-right > span", value: 10},
|
||||
];
|
||||
|
||||
const TEST_URI = encodeURIComponent([
|
||||
"<style>",
|
||||
"div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
|
||||
"margin: 30px auto; }",
|
||||
"</style>",
|
||||
"<div></div>"
|
||||
].join(""));
|
||||
const LONG_TEXT_ROTATE_LIMIT = 3;
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html," + TEST_URI);
|
||||
let {inspector, view} = yield openBoxModelView();
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
for (let i = 0; i < res1.length; i++) {
|
||||
let elt = view.doc.querySelector(res1[i].selector);
|
||||
let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
|
||||
let classList = elt.parentNode.classList;
|
||||
let canBeRotated = classList.contains("boxmodel-left") ||
|
||||
classList.contains("boxmodel-right");
|
||||
let isRotated = classList.contains("boxmodel-rotate");
|
||||
|
||||
is(canBeRotated && isLong,
|
||||
isRotated, res1[i].selector + " correctly rotated.");
|
||||
}
|
||||
});
|
||||
|
|
@ -10,14 +10,14 @@ const TEST_URI = "<p>hello</p>";
|
|||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
|
||||
let {inspector, view} = yield openLayoutView();
|
||||
let {inspector, view} = yield openBoxModelView();
|
||||
|
||||
info("When a property is edited, it should sync in the rule view");
|
||||
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Modify padding-bottom in layout view");
|
||||
let span = view.doc.querySelector(".layout-padding.layout-bottom > span");
|
||||
info("Modify padding-bottom in box model view");
|
||||
let span = view.doc.querySelector(".boxmodel-padding.boxmodel-bottom > span");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
"use strict";
|
||||
|
||||
// Test that the regions in the layout-view have tooltips, and that individual
|
||||
// Test that the regions in the box model view have tooltips, and that individual
|
||||
// values too. Also test that values that are set from a css rule have tooltips
|
||||
// referencing the rule.
|
||||
|
||||
|
|
@ -72,28 +72,28 @@ const VALUES_TEST_DATA = [{
|
|||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
|
||||
let {inspector, view} = yield openLayoutView();
|
||||
let {inspector, view} = yield openBoxModelView();
|
||||
|
||||
info("Checking the regions tooltips");
|
||||
|
||||
ok(view.doc.querySelector("#layout-margins").hasAttribute("title"),
|
||||
ok(view.doc.querySelector("#boxmodel-margins").hasAttribute("title"),
|
||||
"The margin region has a tooltip");
|
||||
is(view.doc.querySelector("#layout-margins").getAttribute("title"), "margin",
|
||||
is(view.doc.querySelector("#boxmodel-margins").getAttribute("title"), "margin",
|
||||
"The margin region has the correct tooltip content");
|
||||
|
||||
ok(view.doc.querySelector("#layout-borders").hasAttribute("title"),
|
||||
ok(view.doc.querySelector("#boxmodel-borders").hasAttribute("title"),
|
||||
"The border region has a tooltip");
|
||||
is(view.doc.querySelector("#layout-borders").getAttribute("title"), "border",
|
||||
is(view.doc.querySelector("#boxmodel-borders").getAttribute("title"), "border",
|
||||
"The border region has the correct tooltip content");
|
||||
|
||||
ok(view.doc.querySelector("#layout-padding").hasAttribute("title"),
|
||||
ok(view.doc.querySelector("#boxmodel-padding").hasAttribute("title"),
|
||||
"The padding region has a tooltip");
|
||||
is(view.doc.querySelector("#layout-padding").getAttribute("title"), "padding",
|
||||
is(view.doc.querySelector("#boxmodel-padding").getAttribute("title"), "padding",
|
||||
"The padding region has the correct tooltip content");
|
||||
|
||||
ok(view.doc.querySelector("#layout-content").hasAttribute("title"),
|
||||
ok(view.doc.querySelector("#boxmodel-content").hasAttribute("title"),
|
||||
"The content region has a tooltip");
|
||||
is(view.doc.querySelector("#layout-content").getAttribute("title"), "content",
|
||||
is(view.doc.querySelector("#boxmodel-content").getAttribute("title"), "content",
|
||||
"The content region has the correct tooltip content");
|
||||
|
||||
for (let {selector, values} of VALUES_TEST_DATA) {
|
||||
|
|
@ -4,15 +4,15 @@
|
|||
|
||||
"use strict";
|
||||
|
||||
// Test that the layout-view continues to work after a page navigation and that
|
||||
// Test that the box model view continues to work after a page navigation and that
|
||||
// it also works after going back
|
||||
|
||||
const IFRAME1 = URL_ROOT + "doc_layout_iframe1.html";
|
||||
const IFRAME2 = URL_ROOT + "doc_layout_iframe2.html";
|
||||
const IFRAME1 = URL_ROOT + "doc_boxmodel_iframe1.html";
|
||||
const IFRAME2 = URL_ROOT + "doc_boxmodel_iframe2.html";
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab(IFRAME1);
|
||||
let {inspector, view, testActor} = yield openLayoutView();
|
||||
let {inspector, view, testActor} = yield openBoxModelView();
|
||||
|
||||
yield testFirstPage(inspector, view, testActor);
|
||||
|
||||
|
|
@ -30,62 +30,62 @@ add_task(function* () {
|
|||
});
|
||||
|
||||
function* testFirstPage(inspector, view, testActor) {
|
||||
info("Test that the layout-view works on the first page");
|
||||
info("Test that the box model view works on the first page");
|
||||
|
||||
info("Selecting the test node");
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Checking that the layout-view shows the right value");
|
||||
let paddingElt = view.doc.querySelector(".layout-padding.layout-top > span");
|
||||
info("Checking that the box model view shows the right value");
|
||||
let paddingElt = view.doc.querySelector(".boxmodel-padding.boxmodel-top > span");
|
||||
is(paddingElt.textContent, "50");
|
||||
|
||||
info("Listening for layout-view changes and modifying the padding");
|
||||
info("Listening for box model view changes and modifying the padding");
|
||||
let onUpdated = waitForUpdate(inspector);
|
||||
yield setStyle(testActor, "p", "padding", "20px");
|
||||
yield onUpdated;
|
||||
ok(true, "Layout-view got updated");
|
||||
ok(true, "Box model view got updated");
|
||||
|
||||
info("Checking that the layout-view shows the right value after update");
|
||||
info("Checking that the box model view shows the right value after update");
|
||||
is(paddingElt.textContent, "20");
|
||||
}
|
||||
|
||||
function* testSecondPage(inspector, view, testActor) {
|
||||
info("Test that the layout-view works on the second page");
|
||||
info("Test that the box model view works on the second page");
|
||||
|
||||
info("Selecting the test node");
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Checking that the layout-view shows the right value");
|
||||
let sizeElt = view.doc.querySelector(".layout-size > span");
|
||||
info("Checking that the box model view shows the right value");
|
||||
let sizeElt = view.doc.querySelector(".boxmodel-size > span");
|
||||
is(sizeElt.textContent, "100" + "\u00D7" + "100");
|
||||
|
||||
info("Listening for layout-view changes and modifying the size");
|
||||
info("Listening for box model view changes and modifying the size");
|
||||
let onUpdated = waitForUpdate(inspector);
|
||||
yield setStyle(testActor, "p", "width", "200px");
|
||||
yield onUpdated;
|
||||
ok(true, "Layout-view got updated");
|
||||
ok(true, "Box model view got updated");
|
||||
|
||||
info("Checking that the layout-view shows the right value after update");
|
||||
info("Checking that the box model view shows the right value after update");
|
||||
is(sizeElt.textContent, "200" + "\u00D7" + "100");
|
||||
}
|
||||
|
||||
function* testBackToFirstPage(inspector, view, testActor) {
|
||||
info("Test that the layout-view works on the first page after going back");
|
||||
info("Test that the box model view works on the first page after going back");
|
||||
|
||||
info("Selecting the test node");
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Checking that the layout-view shows the right value, which is the" +
|
||||
info("Checking that the box model view shows the right value, which is the" +
|
||||
"modified value from step one because of the bfcache");
|
||||
let paddingElt = view.doc.querySelector(".layout-padding.layout-top > span");
|
||||
let paddingElt = view.doc.querySelector(".boxmodel-padding.boxmodel-top > span");
|
||||
is(paddingElt.textContent, "20");
|
||||
|
||||
info("Listening for layout-view changes and modifying the padding");
|
||||
info("Listening for box model view changes and modifying the padding");
|
||||
let onUpdated = waitForUpdate(inspector);
|
||||
yield setStyle(testActor, "p", "padding", "100px");
|
||||
yield onUpdated;
|
||||
ok(true, "Layout-view got updated");
|
||||
ok(true, "Box model view got updated");
|
||||
|
||||
info("Checking that the layout-view shows the right value after update");
|
||||
info("Checking that the box model view shows the right value after update");
|
||||
is(paddingElt.textContent, "100");
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that the box model view continues to work after the page is reloaded
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
|
||||
let {inspector, view, testActor} = yield openBoxModelView();
|
||||
|
||||
info("Test that the box model view works on the first page");
|
||||
yield assertBoxModelView(inspector, view, testActor);
|
||||
|
||||
info("Reload the page");
|
||||
yield testActor.reload();
|
||||
yield inspector.once("markuploaded");
|
||||
|
||||
info("Test that the box model view works on the reloaded page");
|
||||
yield assertBoxModelView(inspector, view, testActor);
|
||||
});
|
||||
|
||||
function* assertBoxModelView(inspector, view, testActor) {
|
||||
info("Selecting the test node");
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Checking that the box model view shows the right value");
|
||||
let paddingElt = view.doc.querySelector(".boxmodel-padding.boxmodel-top > span");
|
||||
is(paddingElt.textContent, "50");
|
||||
|
||||
info("Listening for box model view changes and modifying the padding");
|
||||
let onUpdated = waitForUpdate(inspector);
|
||||
yield setStyle(testActor, "p", "padding", "20px");
|
||||
yield onUpdated;
|
||||
ok(true, "Box model view got updated");
|
||||
|
||||
info("Checking that the box model view shows the right value after update");
|
||||
is(paddingElt.textContent, "20");
|
||||
}
|
||||
|
|
@ -4,12 +4,12 @@
|
|||
|
||||
"use strict";
|
||||
|
||||
// Test that the layout-view for elements within iframes also updates when they
|
||||
// Test that the box model view for elements within iframes also updates when they
|
||||
// change
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab(URL_ROOT + "doc_layout_iframe1.html");
|
||||
let {inspector, view, testActor} = yield openLayoutView();
|
||||
yield addTab(URL_ROOT + "doc_boxmodel_iframe1.html");
|
||||
let {inspector, view, testActor} = yield openBoxModelView();
|
||||
|
||||
yield testResizingInIframe(inspector, view, testActor);
|
||||
yield testReflowsAfterIframeDeletion(inspector, view, testActor);
|
||||
|
|
@ -21,22 +21,22 @@ function* testResizingInIframe(inspector, view, testActor) {
|
|||
info("Selecting the nested test node");
|
||||
yield selectNodeInIframe2("div", inspector);
|
||||
|
||||
info("Checking that the layout-view shows the right value");
|
||||
let sizeElt = view.doc.querySelector(".layout-size > span");
|
||||
info("Checking that the box model view shows the right value");
|
||||
let sizeElt = view.doc.querySelector(".boxmodel-size > span");
|
||||
is(sizeElt.textContent, "400\u00D7200");
|
||||
|
||||
info("Listening for layout-view changes and modifying its size");
|
||||
info("Listening for box model view changes and modifying its size");
|
||||
let onUpdated = waitForUpdate(inspector);
|
||||
yield setStyleInIframe2(testActor, "div", "width", "200px");
|
||||
yield onUpdated;
|
||||
ok(true, "Layout-view got updated");
|
||||
ok(true, "Box model view got updated");
|
||||
|
||||
info("Checking that the layout-view shows the right value after update");
|
||||
info("Checking that the box model view shows the right value after update");
|
||||
is(sizeElt.textContent, "200\u00D7200");
|
||||
}
|
||||
|
||||
function* testReflowsAfterIframeDeletion(inspector, view, testActor) {
|
||||
info("Test reflows are still sent to the layout-view after deleting an " +
|
||||
info("Test reflows are still sent to the box model view after deleting an " +
|
||||
"iframe");
|
||||
|
||||
info("Deleting the iframe2");
|
||||
|
|
@ -46,17 +46,17 @@ function* testReflowsAfterIframeDeletion(inspector, view, testActor) {
|
|||
info("Selecting the test node in iframe1");
|
||||
yield selectNodeInIframe1("p", inspector);
|
||||
|
||||
info("Checking that the layout-view shows the right value");
|
||||
let sizeElt = view.doc.querySelector(".layout-size > span");
|
||||
info("Checking that the box model view shows the right value");
|
||||
let sizeElt = view.doc.querySelector(".boxmodel-size > span");
|
||||
is(sizeElt.textContent, "100\u00D7100");
|
||||
|
||||
info("Listening for layout-view changes and modifying its size");
|
||||
info("Listening for box model view changes and modifying its size");
|
||||
let onUpdated = waitForUpdate(inspector);
|
||||
yield setStyleInIframe1(testActor, "p", "width", "200px");
|
||||
yield onUpdated;
|
||||
ok(true, "Layout-view got updated");
|
||||
ok(true, "Box model view got updated");
|
||||
|
||||
info("Checking that the layout-view shows the right value after update");
|
||||
info("Checking that the box model view shows the right value after update");
|
||||
is(sizeElt.textContent, "200\u00D7100");
|
||||
}
|
||||
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<!DOCTYPE html>
|
||||
<p style="padding:50px;color:#f06;">Root page</p>
|
||||
<iframe src="doc_layout_iframe2.html"></iframe>
|
||||
<iframe src="doc_boxmodel_iframe2.html"></iframe>
|
||||
|
|
@ -20,7 +20,7 @@ registerCleanupFunction(() => {
|
|||
* Simple DOM node accesor function that takes either a node or a string css
|
||||
* selector as argument and returns the corresponding node
|
||||
* FIXME: Delete this function and use inspector/test/head.js' getNode instead,
|
||||
* and fix all layout-view tests to use nodeFronts instead of CPOWs.
|
||||
* and fix all box model view tests to use nodeFronts instead of CPOWs.
|
||||
* @param {String|DOMNode} nodeOrSelector
|
||||
* @return {DOMNode}
|
||||
*/
|
||||
|
|
@ -49,14 +49,14 @@ function selectAndHighlightNode(nodeOrSelector, inspector) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Open the toolbox, with the inspector tool visible, and the layout-view
|
||||
* sidebar tab selected.
|
||||
* @return a promise that resolves when the inspector is ready and the layout
|
||||
* Open the toolbox, with the inspector tool visible, and the computed view
|
||||
* sidebar tab selected to display the box model view.
|
||||
* @return a promise that resolves when the inspector is ready and the box model
|
||||
* view is visible and ready
|
||||
*/
|
||||
function openLayoutView() {
|
||||
function openBoxModelView() {
|
||||
return openInspectorSidebarTab("computedview").then(data => {
|
||||
// The actual highligher show/hide methods are mocked in layoutview tests.
|
||||
// The actual highligher show/hide methods are mocked in box model tests.
|
||||
// The highlighter is tested in devtools/inspector/test.
|
||||
function mockHighlighter({highlighter}) {
|
||||
highlighter.showBoxModel = function () {
|
||||
|
|
@ -71,18 +71,18 @@ function openLayoutView() {
|
|||
return {
|
||||
toolbox: data.toolbox,
|
||||
inspector: data.inspector,
|
||||
view: data.inspector.computedview.layoutView,
|
||||
view: data.inspector.computedview.boxModelView,
|
||||
testActor: data.testActor
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for the layoutview-updated event.
|
||||
* Wait for the boxmodel-view-updated event.
|
||||
* @return a promise
|
||||
*/
|
||||
function waitForUpdate(inspector) {
|
||||
return inspector.once("layoutview-updated");
|
||||
return inspector.once("boxmodel-view-updated");
|
||||
}
|
||||
|
||||
function getStyle(testActor, selector, propertyName) {
|
||||
|
|
@ -23,7 +23,7 @@ const {getCssProperties} = require("devtools/shared/fronts/css-properties");
|
|||
const overlays = require("devtools/client/inspector/shared/style-inspector-overlays");
|
||||
const StyleInspectorMenu = require("devtools/client/inspector/shared/style-inspector-menu");
|
||||
const {KeyShortcuts} = require("devtools/client/shared/key-shortcuts");
|
||||
const {LayoutView} = require("devtools/client/inspector/layout/layout");
|
||||
const {BoxModelView} = require("devtools/client/inspector/components/box-model");
|
||||
const clipboardHelper = require("devtools/shared/platform/clipboard");
|
||||
|
||||
const STYLE_INSPECTOR_PROPERTIES = "devtools-shared/locale/styleinspector.properties";
|
||||
|
|
@ -1394,7 +1394,7 @@ function ComputedViewTool(inspector, window) {
|
|||
|
||||
this.computedView = new CssComputedView(this.inspector, this.document,
|
||||
this.inspector.pageStyle);
|
||||
this.layoutView = new LayoutView(this.inspector, this.document);
|
||||
this.boxModelView = new BoxModelView(this.inspector, this.document);
|
||||
|
||||
this.onSelected = this.onSelected.bind(this);
|
||||
this.refresh = this.refresh.bind(this);
|
||||
|
|
@ -1503,9 +1503,9 @@ ComputedViewTool.prototype = {
|
|||
}
|
||||
|
||||
this.computedView.destroy();
|
||||
this.layoutView.destroy();
|
||||
this.boxModelView.destroy();
|
||||
|
||||
this.computedView = this.layoutView = this.document = this.inspector = null;
|
||||
this.computedView = this.boxModelView = this.document = this.inspector = null;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ function* testToggleDefaultStyles(inspector, computedView) {
|
|||
function* testAddTextInFilter(inspector, computedView) {
|
||||
info("setting filter text to \"color\"");
|
||||
let doc = computedView.styleDocument;
|
||||
let layoutWrapper = doc.querySelector("#layout-wrapper");
|
||||
let boxModelWrapper = doc.querySelector("#boxmodel-wrapper");
|
||||
let searchField = computedView.searchField;
|
||||
let onRefreshed = inspector.once("computed-view-refreshed");
|
||||
let win = computedView.styleWindow;
|
||||
|
|
@ -53,7 +53,7 @@ function* testAddTextInFilter(inspector, computedView) {
|
|||
synthesizeKeys("color", win);
|
||||
yield onRefreshed;
|
||||
|
||||
ok(layoutWrapper.hidden, "Layout view is hidden");
|
||||
ok(boxModelWrapper.hidden, "Box model is hidden");
|
||||
|
||||
info("check that the correct properties are visible");
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ function* testClearSearchFilter(inspector, computedView) {
|
|||
|
||||
let win = computedView.styleWindow;
|
||||
let doc = computedView.styleDocument;
|
||||
let layoutWrapper = doc.querySelector("#layout-wrapper");
|
||||
let boxModelWrapper = doc.querySelector("#boxmodel-wrapper");
|
||||
let propertyViews = computedView.propertyViews;
|
||||
let searchField = computedView.searchField;
|
||||
let searchClearButton = computedView.searchClearButton;
|
||||
|
|
@ -59,7 +59,7 @@ function* testClearSearchFilter(inspector, computedView) {
|
|||
EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
|
||||
yield onRefreshed;
|
||||
|
||||
ok(!layoutWrapper.hidden, "Layout view is displayed");
|
||||
ok(!boxModelWrapper.hidden, "Box model is displayed");
|
||||
|
||||
info("Check that the correct properties are visible");
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ const TOOLBOX_L10N = new LocalizationHelper("devtools/locale/toolbox.properties"
|
|||
/**
|
||||
* Represents an open instance of the Inspector for a tab.
|
||||
* The inspector controls the breadcrumbs, the markup view, and the sidebar
|
||||
* (computed view, rule view, font view and layout view).
|
||||
* (computed view, rule view, font view and animation inspector).
|
||||
*
|
||||
* Events:
|
||||
* - ready
|
||||
|
|
@ -52,8 +52,8 @@ const TOOLBOX_L10N = new LocalizationHelper("devtools/locale/toolbox.properties"
|
|||
* Fired when the markup-view frame has loaded
|
||||
* - breadcrumbs-updated
|
||||
* Fired when the breadcrumb widget updates to a new node
|
||||
* - layoutview-updated
|
||||
* Fired when the layoutview (box model) updates to a new node
|
||||
* - boxmodel-view-updated
|
||||
* Fired when the box model updates to a new node
|
||||
* - markupmutation
|
||||
* Fired after markup mutations have been processed by the markup-view
|
||||
* - computed-view-refreshed
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<?xml-stylesheet href="chrome://devtools/skin/rules.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/computed.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/fonts.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/layout.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/boxmodel.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/animationinspector.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/shared/components/sidebar-toggle.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/shared/components/tabs/tabs.css" type="text/css"?>
|
||||
|
|
@ -116,54 +116,54 @@
|
|||
|
||||
<html:div id="computedview-container">
|
||||
<html:div id="computedview-container-focusable" tabindex="-1">
|
||||
<html:div id="layout-wrapper" tabindex="0">
|
||||
<html:div id="layout-header">
|
||||
<html:div id="layout-expander" class="expander theme-twisty expandable" open=""></html:div>
|
||||
<html:div id="boxmodel-wrapper" tabindex="0">
|
||||
<html:div id="boxmodel-header">
|
||||
<html:div id="boxmodel-expander" class="expander theme-twisty expandable" open=""></html:div>
|
||||
<html:span>&layoutViewTitle;</html:span>
|
||||
</html:div>
|
||||
|
||||
<html:div id="layout-container">
|
||||
<html:div id="layout-main">
|
||||
<html:span class="layout-legend" data-box="margin" title="&margin.tooltip;">&margin.tooltip;</html:span>
|
||||
<html:div id="layout-margins" data-box="margin" title="&margin.tooltip;">
|
||||
<html:span class="layout-legend" data-box="border" title="&border.tooltip;">&border.tooltip;</html:span>
|
||||
<html:div id="layout-borders" data-box="border" title="&border.tooltip;">
|
||||
<html:span class="layout-legend" data-box="padding" title="&padding.tooltip;">&padding.tooltip;</html:span>
|
||||
<html:div id="layout-padding" data-box="padding" title="&padding.tooltip;">
|
||||
<html:div id="layout-content" data-box="content" title="&content.tooltip;">
|
||||
<html:div id="boxmodel-container">
|
||||
<html:div id="boxmodel-main">
|
||||
<html:span class="boxmodel-legend" data-box="margin" title="&margin.tooltip;">&margin.tooltip;</html:span>
|
||||
<html:div id="boxmodel-margins" data-box="margin" title="&margin.tooltip;">
|
||||
<html:span class="boxmodel-legend" data-box="border" title="&border.tooltip;">&border.tooltip;</html:span>
|
||||
<html:div id="boxmodel-borders" data-box="border" title="&border.tooltip;">
|
||||
<html:span class="boxmodel-legend" data-box="padding" title="&padding.tooltip;">&padding.tooltip;</html:span>
|
||||
<html:div id="boxmodel-padding" data-box="padding" title="&padding.tooltip;">
|
||||
<html:div id="boxmodel-content" data-box="content" title="&content.tooltip;">
|
||||
</html:div>
|
||||
</html:div>
|
||||
</html:div>
|
||||
</html:div>
|
||||
|
||||
<html:p class="layout-margin layout-top"><html:span data-box="margin" class="layout-editable" title="margin-top"></html:span></html:p>
|
||||
<html:p class="layout-margin layout-right"><html:span data-box="margin" class="layout-editable" title="margin-right"></html:span></html:p>
|
||||
<html:p class="layout-margin layout-bottom"><html:span data-box="margin" class="layout-editable" title="margin-bottom"></html:span></html:p>
|
||||
<html:p class="layout-margin layout-left"><html:span data-box="margin" class="layout-editable" title="margin-left"></html:span></html:p>
|
||||
<html:p class="boxmodel-margin boxmodel-top"><html:span data-box="margin" class="boxmodel-editable" title="margin-top"></html:span></html:p>
|
||||
<html:p class="boxmodel-margin boxmodel-right"><html:span data-box="margin" class="boxmodel-editable" title="margin-right"></html:span></html:p>
|
||||
<html:p class="boxmodel-margin boxmodel-bottom"><html:span data-box="margin" class="boxmodel-editable" title="margin-bottom"></html:span></html:p>
|
||||
<html:p class="boxmodel-margin boxmodel-left"><html:span data-box="margin" class="boxmodel-editable" title="margin-left"></html:span></html:p>
|
||||
|
||||
<html:p class="layout-border layout-top"><html:span data-box="border" class="layout-editable" title="border-top"></html:span></html:p>
|
||||
<html:p class="layout-border layout-right"><html:span data-box="border" class="layout-editable" title="border-right"></html:span></html:p>
|
||||
<html:p class="layout-border layout-bottom"><html:span data-box="border" class="layout-editable" title="border-bottom"></html:span></html:p>
|
||||
<html:p class="layout-border layout-left"><html:span data-box="border" class="layout-editable" title="border-left"></html:span></html:p>
|
||||
<html:p class="boxmodel-border boxmodel-top"><html:span data-box="border" class="boxmodel-editable" title="border-top"></html:span></html:p>
|
||||
<html:p class="boxmodel-border boxmodel-right"><html:span data-box="border" class="boxmodel-editable" title="border-right"></html:span></html:p>
|
||||
<html:p class="boxmodel-border boxmodel-bottom"><html:span data-box="border" class="boxmodel-editable" title="border-bottom"></html:span></html:p>
|
||||
<html:p class="boxmodel-border boxmodel-left"><html:span data-box="border" class="boxmodel-editable" title="border-left"></html:span></html:p>
|
||||
|
||||
<html:p class="layout-padding layout-top"><html:span data-box="padding" class="layout-editable" title="padding-top"></html:span></html:p>
|
||||
<html:p class="layout-padding layout-right"><html:span data-box="padding" class="layout-editable" title="padding-right"></html:span></html:p>
|
||||
<html:p class="layout-padding layout-bottom"><html:span data-box="padding" class="layout-editable" title="padding-bottom"></html:span></html:p>
|
||||
<html:p class="layout-padding layout-left"><html:span data-box="padding" class="layout-editable" title="padding-left"></html:span></html:p>
|
||||
<html:p class="boxmodel-padding boxmodel-top"><html:span data-box="padding" class="boxmodel-editable" title="padding-top"></html:span></html:p>
|
||||
<html:p class="boxmodel-padding boxmodel-right"><html:span data-box="padding" class="boxmodel-editable" title="padding-right"></html:span></html:p>
|
||||
<html:p class="boxmodel-padding boxmodel-bottom"><html:span data-box="padding" class="boxmodel-editable" title="padding-bottom"></html:span></html:p>
|
||||
<html:p class="boxmodel-padding boxmodel-left"><html:span data-box="padding" class="boxmodel-editable" title="padding-left"></html:span></html:p>
|
||||
|
||||
<html:p class="layout-size"><html:span data-box="content" title="&content.tooltip;"></html:span></html:p>
|
||||
<html:p class="boxmodel-size"><html:span data-box="content" title="&content.tooltip;"></html:span></html:p>
|
||||
</html:div>
|
||||
|
||||
<html:div id="layout-info">
|
||||
<html:span id="layout-element-size"></html:span>
|
||||
<html:section id="layout-position-group">
|
||||
<html:div id="boxmodel-info">
|
||||
<html:span id="boxmodel-element-size"></html:span>
|
||||
<html:section id="boxmodel-position-group">
|
||||
<html:button class="devtools-button" id="layout-geometry-editor" title="&geometry.button.tooltip;"></html:button>
|
||||
<html:span id="layout-element-position"></html:span>
|
||||
<html:span id="boxmodel-element-position"></html:span>
|
||||
</html:section>
|
||||
</html:div>
|
||||
|
||||
<html:div style="display: none">
|
||||
<html:p id="layout-dummy"></html:p>
|
||||
<html:p id="boxmodel-dummy"></html:p>
|
||||
</html:div>
|
||||
</html:div>
|
||||
</html:div>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
|
||||
# vim: set filetype=python:
|
||||
# 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/.
|
||||
|
||||
DevToolsModules(
|
||||
'layout.js',
|
||||
)
|
||||
|
||||
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
[DEFAULT]
|
||||
tags = devtools
|
||||
subsuite = devtools
|
||||
support-files =
|
||||
doc_layout_iframe1.html
|
||||
doc_layout_iframe2.html
|
||||
head.js
|
||||
!/devtools/client/commandline/test/helpers.js
|
||||
!/devtools/client/framework/test/shared-head.js
|
||||
!/devtools/client/inspector/test/head.js
|
||||
!/devtools/client/inspector/test/shared-head.js
|
||||
!/devtools/client/shared/test/test-actor.js
|
||||
!/devtools/client/shared/test/test-actor-registry.js
|
||||
|
||||
[browser_layout.js]
|
||||
[browser_layout_editablemodel.js]
|
||||
# [browser_layout_editablemodel_allproperties.js]
|
||||
# Disabled for too many intermittent failures (bug 1009322)
|
||||
[browser_layout_editablemodel_bluronclick.js]
|
||||
[browser_layout_editablemodel_border.js]
|
||||
[browser_layout_editablemodel_stylerules.js]
|
||||
[browser_layout_guides.js]
|
||||
[browser_layout_rotate-labels-on-sides.js]
|
||||
[browser_layout_sync.js]
|
||||
[browser_layout_tooltips.js]
|
||||
[browser_layout_update-after-navigation.js]
|
||||
[browser_layout_update-after-reload.js]
|
||||
# [browser_layout_update-in-iframes.js]
|
||||
# Bug 1020038 layout-view updates for iframe elements changes
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that longer values are rotated on the side
|
||||
|
||||
const res1 = [
|
||||
{selector: ".layout-margin.layout-top > span", value: 30},
|
||||
{selector: ".layout-margin.layout-left > span", value: "auto"},
|
||||
{selector: ".layout-margin.layout-bottom > span", value: 30},
|
||||
{selector: ".layout-margin.layout-right > span", value: "auto"},
|
||||
{selector: ".layout-padding.layout-top > span", value: 20},
|
||||
{selector: ".layout-padding.layout-left > span", value: 2000000},
|
||||
{selector: ".layout-padding.layout-bottom > span", value: 20},
|
||||
{selector: ".layout-padding.layout-right > span", value: 20},
|
||||
{selector: ".layout-border.layout-top > span", value: 10},
|
||||
{selector: ".layout-border.layout-left > span", value: 10},
|
||||
{selector: ".layout-border.layout-bottom > span", value: 10},
|
||||
{selector: ".layout-border.layout-right > span", value: 10},
|
||||
];
|
||||
|
||||
const TEST_URI = encodeURIComponent([
|
||||
"<style>",
|
||||
"div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
|
||||
"margin: 30px auto; }",
|
||||
"</style>",
|
||||
"<div></div>"
|
||||
].join(""));
|
||||
const LONG_TEXT_ROTATE_LIMIT = 3;
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html," + TEST_URI);
|
||||
let {inspector, view} = yield openLayoutView();
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
for (let i = 0; i < res1.length; i++) {
|
||||
let elt = view.doc.querySelector(res1[i].selector);
|
||||
let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
|
||||
let classList = elt.parentNode.classList;
|
||||
let canBeRotated = classList.contains("layout-left") ||
|
||||
classList.contains("layout-right");
|
||||
let isRotated = classList.contains("layout-rotate");
|
||||
|
||||
is(canBeRotated && isLong,
|
||||
isRotated, res1[i].selector + " correctly rotated.");
|
||||
}
|
||||
});
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that the layout-view continues to work after the page is reloaded
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab(URL_ROOT + "doc_layout_iframe1.html");
|
||||
let {inspector, view, testActor} = yield openLayoutView();
|
||||
|
||||
info("Test that the layout-view works on the first page");
|
||||
yield assertLayoutView(inspector, view, testActor);
|
||||
|
||||
info("Reload the page");
|
||||
yield testActor.reload();
|
||||
yield inspector.once("markuploaded");
|
||||
|
||||
info("Test that the layout-view works on the reloaded page");
|
||||
yield assertLayoutView(inspector, view, testActor);
|
||||
});
|
||||
|
||||
function* assertLayoutView(inspector, view, testActor) {
|
||||
info("Selecting the test node");
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Checking that the layout-view shows the right value");
|
||||
let paddingElt = view.doc.querySelector(".layout-padding.layout-top > span");
|
||||
is(paddingElt.textContent, "50");
|
||||
|
||||
info("Listening for layout-view changes and modifying the padding");
|
||||
let onUpdated = waitForUpdate(inspector);
|
||||
yield setStyle(testActor, "p", "padding", "20px");
|
||||
yield onUpdated;
|
||||
ok(true, "Layout-view got updated");
|
||||
|
||||
info("Checking that the layout-view shows the right value after update");
|
||||
is(paddingElt.textContent, "20");
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@ DIRS += [
|
|||
'components',
|
||||
'computed',
|
||||
'fonts',
|
||||
'layout',
|
||||
'markup',
|
||||
'rules',
|
||||
'shared'
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ devtools.jar:
|
|||
content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul)
|
||||
content/storage/storage.xul (storage/storage.xul)
|
||||
content/inspector/fonts/fonts.js (inspector/fonts/fonts.js)
|
||||
content/inspector/layout/layout.js (inspector/layout/layout.js)
|
||||
content/inspector/markup/markup.xhtml (inspector/markup/markup.xhtml)
|
||||
content/animationinspector/animation-controller.js (animationinspector/animation-controller.js)
|
||||
content/animationinspector/animation-panel.js (animationinspector/animation-panel.js)
|
||||
|
|
@ -212,7 +211,7 @@ devtools.jar:
|
|||
skin/images/itemArrow-ltr.svg (themes/images/itemArrow-ltr.svg)
|
||||
skin/images/noise.png (themes/images/noise.png)
|
||||
skin/images/dropmarker.svg (themes/images/dropmarker.svg)
|
||||
skin/layout.css (themes/layout.css)
|
||||
skin/boxmodel.css (themes/boxmodel.css)
|
||||
skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
|
||||
skin/images/pause.svg (themes/images/pause.svg)
|
||||
skin/images/play.svg (themes/images/play.svg)
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
* 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/ */
|
||||
|
||||
#layout-wrapper {
|
||||
#boxmodel-wrapper {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
#layout-container {
|
||||
#boxmodel-container {
|
||||
/* The view will grow bigger as the window gets resized, until 400px */
|
||||
max-width: 400px;
|
||||
margin: 0px auto;
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
|
||||
/* Header */
|
||||
|
||||
#layout-header,
|
||||
#layout-info {
|
||||
#boxmodel-header,
|
||||
#boxmodel-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 17px;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
/* Main: contains the box-model regions */
|
||||
|
||||
#layout-main {
|
||||
#boxmodel-main {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
/* The regions are semi-transparent, so the white background is partly
|
||||
|
|
@ -46,192 +46,192 @@
|
|||
width: calc(100% - 2 * 14px);
|
||||
}
|
||||
|
||||
.layout-margin,
|
||||
.layout-size {
|
||||
.boxmodel-margin,
|
||||
.boxmodel-size {
|
||||
color: var(--theme-highlight-blue);
|
||||
}
|
||||
|
||||
/* Regions are 3 nested elements with wide borders and outlines */
|
||||
|
||||
#layout-content {
|
||||
#boxmodel-content {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#layout-margins,
|
||||
#layout-borders,
|
||||
#layout-padding {
|
||||
#boxmodel-margins,
|
||||
#boxmodel-borders,
|
||||
#boxmodel-padding {
|
||||
border-color: hsla(210,100%,85%,0.2);
|
||||
border-width: 18px;
|
||||
border-style: solid;
|
||||
outline: dotted 1px hsl(210,100%,85%);
|
||||
}
|
||||
|
||||
#layout-margins {
|
||||
#boxmodel-margins {
|
||||
/* This opacity applies to all of the regions, since they are nested */
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
/* Regions colors */
|
||||
|
||||
#layout-margins {
|
||||
#boxmodel-margins {
|
||||
border-color: #edff64;
|
||||
}
|
||||
|
||||
#layout-borders {
|
||||
#boxmodel-borders {
|
||||
border-color: #444444;
|
||||
}
|
||||
|
||||
#layout-padding {
|
||||
#boxmodel-padding {
|
||||
border-color: #6a5acd;
|
||||
}
|
||||
|
||||
#layout-content {
|
||||
#boxmodel-content {
|
||||
background-color: #87ceeb;
|
||||
}
|
||||
|
||||
.theme-firebug #layout-main,
|
||||
.theme-firebug #layout-borders,
|
||||
.theme-firebug #layout-content {
|
||||
.theme-firebug #boxmodel-main,
|
||||
.theme-firebug #boxmodel-borders,
|
||||
.theme-firebug #boxmodel-content {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.theme-firebug #layout-main,
|
||||
.theme-firebug #layout-header {
|
||||
.theme-firebug #boxmodel-main,
|
||||
.theme-firebug #boxmodel-header {
|
||||
font-family: var(--proportional-font-family);
|
||||
}
|
||||
|
||||
.theme-firebug #layout-main {
|
||||
.theme-firebug #boxmodel-main {
|
||||
color: var(--theme-body-color);
|
||||
font-size: var(--theme-toolbar-font-size);
|
||||
}
|
||||
|
||||
.theme-firebug #layout-header {
|
||||
.theme-firebug #boxmodel-header {
|
||||
font-size: var(--theme-toolbar-font-size);
|
||||
}
|
||||
|
||||
/* Editable region sizes are contained in absolutely positioned <p> */
|
||||
|
||||
#layout-main > p {
|
||||
#boxmodel-main > p {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#layout-main > p > span,
|
||||
#layout-main > p > input {
|
||||
#boxmodel-main > p > span,
|
||||
#boxmodel-main > p > input {
|
||||
vertical-align: middle;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Coordinates for the region sizes */
|
||||
|
||||
.layout-top,
|
||||
.layout-bottom {
|
||||
.boxmodel-top,
|
||||
.boxmodel-bottom {
|
||||
width: calc(100% - 2px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layout-padding.layout-top {
|
||||
.boxmodel-padding.boxmodel-top {
|
||||
top: 37px;
|
||||
}
|
||||
|
||||
.layout-padding.layout-bottom {
|
||||
.boxmodel-padding.boxmodel-bottom {
|
||||
bottom: 38px;
|
||||
}
|
||||
|
||||
.layout-border.layout-top {
|
||||
.boxmodel-border.boxmodel-top {
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
.layout-border.layout-bottom {
|
||||
.boxmodel-border.boxmodel-bottom {
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.layout-margin.layout-top {
|
||||
.boxmodel-margin.boxmodel-top {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.layout-margin.layout-bottom {
|
||||
.boxmodel-margin.boxmodel-bottom {
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
.layout-size,
|
||||
.layout-margin.layout-left,
|
||||
.layout-margin.layout-right,
|
||||
.layout-border.layout-left,
|
||||
.layout-border.layout-right,
|
||||
.layout-padding.layout-left,
|
||||
.layout-padding.layout-right {
|
||||
.boxmodel-size,
|
||||
.boxmodel-margin.boxmodel-left,
|
||||
.boxmodel-margin.boxmodel-right,
|
||||
.boxmodel-border.boxmodel-left,
|
||||
.boxmodel-border.boxmodel-right,
|
||||
.boxmodel-padding.boxmodel-left,
|
||||
.boxmodel-padding.boxmodel-right {
|
||||
top: 22px;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
.layout-size {
|
||||
.boxmodel-size {
|
||||
width: calc(100% - 2px);
|
||||
}
|
||||
|
||||
.layout-margin.layout-right,
|
||||
.layout-margin.layout-left,
|
||||
.layout-border.layout-left,
|
||||
.layout-border.layout-right,
|
||||
.layout-padding.layout-right,
|
||||
.layout-padding.layout-left {
|
||||
.boxmodel-margin.boxmodel-right,
|
||||
.boxmodel-margin.boxmodel-left,
|
||||
.boxmodel-border.boxmodel-left,
|
||||
.boxmodel-border.boxmodel-right,
|
||||
.boxmodel-padding.boxmodel-right,
|
||||
.boxmodel-padding.boxmodel-left {
|
||||
width: 21px;
|
||||
}
|
||||
|
||||
.layout-padding.layout-left {
|
||||
.boxmodel-padding.boxmodel-left {
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
.layout-padding.layout-right {
|
||||
.boxmodel-padding.boxmodel-right {
|
||||
right: 35px;
|
||||
}
|
||||
|
||||
.layout-border.layout-left {
|
||||
.boxmodel-border.boxmodel-left {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.layout-border.layout-right {
|
||||
.boxmodel-border.boxmodel-right {
|
||||
right: 17px;
|
||||
}
|
||||
|
||||
.layout-margin.layout-right {
|
||||
.boxmodel-margin.boxmodel-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.layout-margin.layout-left {
|
||||
.boxmodel-margin.boxmodel-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.layout-rotate.layout-left:not(.layout-editing) {
|
||||
.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.layout-rotate.layout-right:not(.layout-editing) {
|
||||
.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Legend: displayed inside regions */
|
||||
|
||||
.layout-legend {
|
||||
.boxmodel-legend {
|
||||
position: absolute;
|
||||
margin: 2px 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.layout-legend[data-box="margin"] {
|
||||
.boxmodel-legend[data-box="margin"] {
|
||||
color: var(--theme-highlight-blue);
|
||||
}
|
||||
|
||||
/* Editable fields */
|
||||
|
||||
.layout-editable {
|
||||
.boxmodel-editable {
|
||||
border: 1px dashed transparent;
|
||||
-moz-user-select: text;
|
||||
}
|
||||
|
||||
.layout-editable:hover {
|
||||
.boxmodel-editable:hover {
|
||||
border-bottom-color: hsl(0, 0%, 50%);
|
||||
}
|
||||
|
||||
|
|
@ -242,17 +242,17 @@
|
|||
|
||||
/* Make sure the content size doesn't appear as editable like the other sizes */
|
||||
|
||||
.layout-size > span {
|
||||
.boxmodel-size > span {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Layout info: contains the position and size of the element */
|
||||
/* Box Model Info: contains the position and size of the element */
|
||||
|
||||
#layout-element-size {
|
||||
#boxmodel-element-size {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#layout-position-group {
|
||||
#boxmodel-position-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -72,7 +72,7 @@ exports.register = register;
|
|||
* The InspectorActor will always return the same instance of
|
||||
* HighlighterActor if asked several times and this instance is used in the
|
||||
* toolbox to highlighter elements's box-model from the markup-view,
|
||||
* layout-view, console, debugger, ... as well as select elements with the
|
||||
* box model view, console, debugger, ... as well as select elements with the
|
||||
* pointer (pick).
|
||||
*
|
||||
* Other types of highlighter actors exist and can be accessed via the
|
||||
|
|
|
|||
|
|
@ -2653,7 +2653,7 @@ exports.InspectorActor = protocol.ActorClassWithSpec(inspectorSpec, {
|
|||
* The same instance will always be returned by this method when called
|
||||
* several times.
|
||||
* The highlighter actor returned here is used to highlighter elements's
|
||||
* box-models from the markup-view, layout-view, console, debugger, ... as
|
||||
* box-models from the markup-view, box model, console, debugger, ... as
|
||||
* well as select elements with the pointer (pick).
|
||||
*
|
||||
* @param {Boolean} autohide Optionally autohide the highlighter after an
|
||||
|
|
|
|||
|
|
@ -760,7 +760,7 @@ var PageStyleActor = protocol.ActorClassWithSpec(pageStyleSpec, {
|
|||
|
||||
let layout = {};
|
||||
|
||||
// First, we update the first part of the layout view, with
|
||||
// First, we update the first part of the box model view, with
|
||||
// the size of the element.
|
||||
|
||||
let clientRect = node.rawNode.getBoundingClientRect();
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче