wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1174821 - 4 - Refactor layoutview's dimming; r=janx

Browse Source
This commit is contained in:
Patrick Brosset 2015-06-16 17:10:26 +02:00
parent 1629cb4cca
commit 02a39670f5
2 changed files with 54 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
browser/devtools/layoutview/view.js
View File

@ -300,13 +300,25 @@ LayoutView.prototype = {
},
/**
* Is the layoutview visible in the sidebar?
* Is the layoutview visible in the sidebar.
* @return {Boolean}
*/
isActive: function() {
isViewVisible: function() {
return this.inspector &&
this.inspector.sidebar.getCurrentTabID() == "layoutview";
},
/**
* Is the layoutview visible in the sidebar and is the current node valid to
* be displayed in the view.
* @return {Boolean}
*/
isViewVisibleAndNodeValid: function() {
return this.isViewVisible() &&
this.inspector.selection.isConnected() &&
this.inspector.selection.isElementNode();
},
/**
* Destroy the nodes. Remove listeners.
*/
@ -328,9 +340,7 @@ LayoutView.prototype = {
},
onSidebarSelect: function(e, sidebar) {
if (sidebar !== "layoutview") {
this.dim();
}
this.setActive(sidebar === "layoutview");
},
/**
@ -348,35 +358,27 @@ LayoutView.prototype = {
* @return a promise that resolves when the view has been updated
*/
onNewNode: function() {
if (this.isActive() &&
this.inspector.selection.isConnected() &&
this.inspector.selection.isElementNode()) {
this.undim();
} else {
this.dim();
}
this.setActive(this.isViewVisibleAndNodeValid());
return this.update();
},
/**
* Hide the layout boxes and stop refreshing on reflows. No node is selected
* or the layout-view sidebar is inactive.
* Stop tracking reflows and hide all values when no node is selected or the
* layout-view is hidden, otherwise track reflows and show values.
* @param {Boolean} isActive
*/
dim: function() {
this.untrackReflows();
this.doc.body.classList.add("dim");
this.dimmed = true;
},
setActive: function(isActive) {
if (isActive === this.isActive) {
return;
}
this.isActive = isActive;
/**
* Show the layout boxes and start refreshing on reflows. A node is selected
* and the layout-view side is active.
*/
undim: function() {
this.doc.body.classList.toggle("inactive", !isActive);
if (isActive) {
this.trackReflows();
this.doc.body.classList.remove("dim");
this.dimmed = false;
} else {
this.untrackReflows();
}
},
/**
@ -386,15 +388,13 @@ LayoutView.prototype = {
*/
update: function() {
let lastRequest = Task.spawn((function*() {
if (!this.isActive() ||
!this.inspector.selection.isConnected() ||
!this.inspector.selection.isElementNode()) {
if (!this.isViewVisibleAndNodeValid()) {
return;
}
let node = this.inspector.selection.nodeFront;
let layout = yield this.inspector.pageStyle.getLayout(node, {
autoMargins: !this.dimmed
autoMargins: this.isActive
});
let styleEntries = yield this.inspector.pageStyle.getApplied(node, {});
@ -412,8 +412,8 @@ LayoutView.prototype = {
this.sizeHeadingLabel.textContent = newLabel;
}
// If the view is dimmed, no need to do anything more.
if (this.dimmed) {
// If the view isn't active, no need to do anything more.
if (!this.isActive) {
this.inspector.emit("layoutview-updated");
return null;
}
@ -436,10 +436,18 @@ LayoutView.prototype = {
}
let margins = layout.autoMargins;
if ("top" in margins) this.map.marginTop.value = "auto";
if ("right" in margins) this.map.marginRight.value = "auto";
if ("bottom" in margins) this.map.marginBottom.value = "auto";
if ("left" in margins) this.map.marginLeft.value = "auto";
if ("top" in margins) {
this.map.marginTop.value = "auto";
}
if ("right" in margins) {
this.map.marginRight.value = "auto";
}
if ("bottom" in margins) {
this.map.marginBottom.value = "auto";
}
if ("left" in margins) {
this.map.marginLeft.value = "auto";
}
for (let i in this.map) {
let selector = this.map[i].selector;

8
browser/themes/shared/devtools/layoutview.css
View File

@ -329,3 +329,11 @@ body {
.size > span {
cursor: default;
}
/* Hide all values when the view is inactive */
body.inactive > #header > #element-position,
body.inactive > #header > #element-size,
body.inactive > #main > p {
visibility: hidden;
}