зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset 2d126d9f7ef8 (bug 1653290) for /browser_markup_overflow_badge.js failures CLOSED TREE
This commit is contained in:
Bogdan Tara
Родитель
ebb07c5b3a
Коммит
91572b9250
|
|
@ -389,10 +389,6 @@ class NodeFront extends FrontClassWithSpec(nodeSpec) {
|
|||
return this._form.isScrollable;
|
||||
}
|
||||
|
||||
get causesOverflow() {
|
||||
return this._form.causesOverflow;
|
||||
}
|
||||
|
||||
get isTreeDisplayed() {
|
||||
let parent = this;
|
||||
while (parent) {
|
||||
|
|
|
|||
|
|
@ -356,7 +356,6 @@ function MarkupView(inspector, frame, controllerWindow) {
|
|||
this._walkerEventListener = new WalkerEventListener(this.inspector, {
|
||||
"display-change": this._onWalkerNodeStatesChanged,
|
||||
"scrollable-change": this._onWalkerNodeStatesChanged,
|
||||
"overflow-change": this._onWalkerNodeStatesChanged,
|
||||
mutations: this._onWalkerMutations,
|
||||
});
|
||||
}
|
||||
|
|
@ -925,10 +924,6 @@ MarkupView.prototype = {
|
|||
"scrollable-change",
|
||||
this._onWalkerNodeStatesChanged
|
||||
);
|
||||
nodeFront.walkerFront.on(
|
||||
"overflow-change",
|
||||
this._onWalkerNodeStatesChanged
|
||||
);
|
||||
nodeFront.walkerFront.on("mutations", this._onWalkerMutations);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -184,7 +184,6 @@ skip-if = verify
|
|||
[browser_markup_node_names_namespaced.js]
|
||||
[browser_markup_node_not_displayed_01.js]
|
||||
[browser_markup_node_not_displayed_02.js]
|
||||
[browser_markup_overflow_badge.js]
|
||||
[browser_markup_pagesize_01.js]
|
||||
[browser_markup_pagesize_02.js]
|
||||
[browser_markup_pseudo_on_reload.js]
|
||||
|
|
|
|||
|
|
@ -1,103 +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";
|
||||
|
||||
// Tests that the overflow badge is shown to overflow causing elements and is updated
|
||||
// dynamically.
|
||||
|
||||
const TEST_URI = `
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
.fixed {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.shift {
|
||||
margin-left: 300px;
|
||||
}
|
||||
</style>
|
||||
<div id="top" class="parent">
|
||||
<div id="child1" class="fixed shift">
|
||||
<div id="child2" class="fixed"></div>
|
||||
</div>
|
||||
<div id="child3" class="shift">
|
||||
<div id="child4" class="fixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
add_task(async function() {
|
||||
await SpecialPowers.setBoolPref("devtools.overflow.debugging.enabled", true);
|
||||
|
||||
const { inspector } = await openInspectorForURL(
|
||||
"data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
|
||||
);
|
||||
|
||||
await expandChildContainers(inspector);
|
||||
|
||||
const child1 = await getContainerForSelector("#child1", inspector);
|
||||
const child2 = await getContainerForSelector("#child2", inspector);
|
||||
const child3 = await getContainerForSelector("#child3", inspector);
|
||||
const child4 = await getContainerForSelector("#child4", inspector);
|
||||
|
||||
info(
|
||||
"Checking if overflow badges appear correctly right after the markup-view is loaded"
|
||||
);
|
||||
|
||||
checkBadges([child1, child4], [child2, child3]);
|
||||
|
||||
info("Changing the elements to check whether the badge updates correctly");
|
||||
|
||||
await toggleClass(inspector);
|
||||
|
||||
checkBadges([child2, child3], [child1, child4]);
|
||||
|
||||
info(
|
||||
"Once again, changing the elements to check whether the badge updates correctly"
|
||||
);
|
||||
|
||||
await toggleClass(inspector);
|
||||
|
||||
checkBadges([child1, child4], [child2, child3]);
|
||||
});
|
||||
|
||||
async function expandChildContainers(inspector) {
|
||||
const container = await getContainerForSelector("#top", inspector);
|
||||
|
||||
await expandContainer(inspector, container);
|
||||
for (const child of container.getChildContainers()) {
|
||||
await expandContainer(inspector, child);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleClass(inspector) {
|
||||
const onStateChanged = inspector.walker.once("overflow-change");
|
||||
|
||||
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function() {
|
||||
content.document.querySelector("#child1").classList.toggle("fixed");
|
||||
content.document.querySelector("#child3").classList.toggle("fixed");
|
||||
});
|
||||
|
||||
await onStateChanged;
|
||||
}
|
||||
|
||||
function checkBadges(elemsWithBadges, elemsWithNoBadges) {
|
||||
const hasBadge = elem =>
|
||||
elem.elt.querySelector(
|
||||
`#${elem.elt.children[0].id} > span.editor > .inspector-badge.overflow-badge`
|
||||
);
|
||||
|
||||
for (const elem of elemsWithBadges) {
|
||||
ok(hasBadge(elem), `Overflow badge exists in ${elem.node.id}`);
|
||||
}
|
||||
|
||||
for (const elem of elemsWithNoBadges) {
|
||||
ok(!hasBadge(elem), `Overflow badge does not exist in ${elem.node.id}`);
|
||||
}
|
||||
}
|
||||
|
|
@ -32,10 +32,6 @@ const INSPECTOR_L10N = new LocalizationHelper(
|
|||
"devtools/client/locales/inspector.properties"
|
||||
);
|
||||
|
||||
const OVERFLOW_DEBUGGING_ENABLED = Services.prefs.getBoolPref(
|
||||
"devtools.overflow.debugging.enabled"
|
||||
);
|
||||
|
||||
// Page size for pageup/pagedown
|
||||
const COLLAPSE_DATA_URL_REGEX = /^data.+base64/;
|
||||
const COLLAPSE_DATA_URL_LENGTH = 60;
|
||||
|
|
@ -316,7 +312,6 @@ ElementEditor.prototype = {
|
|||
this.updateCustomBadge();
|
||||
this.updateScrollableBadge();
|
||||
this.updateTextEditor();
|
||||
this.updateOverflowBadge();
|
||||
},
|
||||
|
||||
updateEventBadge: function() {
|
||||
|
|
@ -420,31 +415,6 @@ ElementEditor.prototype = {
|
|||
}
|
||||
},
|
||||
|
||||
updateOverflowBadge: function() {
|
||||
if (!OVERFLOW_DEBUGGING_ENABLED) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.node.causesOverflow && !this._overflowBadge) {
|
||||
this._createOverflowBadge();
|
||||
} else if (!this.node.causesOverflow && this._overflowBadge) {
|
||||
this._overflowBadge.remove();
|
||||
this._overflowBadge = null;
|
||||
}
|
||||
},
|
||||
|
||||
_createOverflowBadge: function() {
|
||||
this._overflowBadge = this.doc.createElement("div");
|
||||
this._overflowBadge.className = "inspector-badge overflow-badge";
|
||||
this._overflowBadge.textContent = INSPECTOR_L10N.getStr(
|
||||
"markupView.overflowBadge.label"
|
||||
);
|
||||
this._overflowBadge.title = INSPECTOR_L10N.getStr(
|
||||
"markupView.overflowBadge.tooltip"
|
||||
);
|
||||
this.elt.insertBefore(this._overflowBadge, this._customBadge);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the markup custom element badge.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -507,14 +507,6 @@ markupView.scrollableBadge.label=scroll
|
|||
# when hovering over badges next to scrollable elements in the inspector.
|
||||
markupView.scrollableBadge.tooltip=This element has scrollable overflow.
|
||||
|
||||
# LOCALIZATION NOTE (markupView.overflowBadge.label): This is the text displayed inside a
|
||||
# badge, in the inspector, next to nodes that are causing overflow in other elements.
|
||||
markupView.overflowBadge.label=overflow
|
||||
|
||||
# LOCALIZATION NOTE (markupView.overflowBadge.tooltip): This is the tooltip that is displayed
|
||||
# when hovering over badges next to overflow causing elements in the inspector.
|
||||
markupView.overflowBadge.tooltip=This element is causing an element to overflow.
|
||||
|
||||
# LOCALIZATION NOTE (rulePreviewTooltip.noAssociatedRule): This is the text displayed inside
|
||||
# the RulePreviewTooltip when a rule cannot be found for a CSS property declaration.
|
||||
rulePreviewTooltip.noAssociatedRule=No associated rule
|
||||
|
|
|
|||
|
|
@ -107,12 +107,6 @@ const NodeActor = protocol.ActorClassWithSpec(nodeSpec, {
|
|||
this.currentDisplayType = this.displayType;
|
||||
this.wasDisplayed = this.isDisplayed;
|
||||
this.wasScrollable = this.isScrollable;
|
||||
|
||||
this.walker.updateOverflowCausingElements(
|
||||
this.rawNode,
|
||||
this,
|
||||
this.walker.overflowCausingElementsSet
|
||||
);
|
||||
},
|
||||
|
||||
toString: function() {
|
||||
|
|
@ -182,7 +176,6 @@ const NodeActor = protocol.ActorClassWithSpec(nodeSpec, {
|
|||
inlineTextChild: inlineTextChild ? inlineTextChild.form() : undefined,
|
||||
displayType: this.displayType,
|
||||
isScrollable: this.isScrollable,
|
||||
causesOverflow: this.walker.overflowCausingElementsSet.has(this.rawNode),
|
||||
|
||||
// doctype attributes
|
||||
name: this.rawNode.name,
|
||||
|
|
|
|||
|
|
@ -203,7 +203,6 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
|
|||
this.customElementWatcher = new CustomElementWatcher(
|
||||
targetActor.chromeEventHandler
|
||||
);
|
||||
this.overflowCausingElementsSet = new Set();
|
||||
|
||||
this.showAllAnonymousContent = options.showAllAnonymousContent;
|
||||
|
||||
|
|
@ -412,9 +411,6 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
|
|||
this.clearPseudoClassLocks();
|
||||
this._activePseudoClassLocks = null;
|
||||
|
||||
this.overflowCausingElementsSet.clear();
|
||||
this.overflowCausingElementsSet = null;
|
||||
|
||||
this._hoveredNode = null;
|
||||
this.rootWin = null;
|
||||
this.rootDoc = null;
|
||||
|
|
@ -550,12 +546,10 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
|
|||
|
||||
_onReflows: function(reflows) {
|
||||
// Going through the nodes the walker knows about, see which ones have had their
|
||||
// display, scrollable or overflow state changed and send events if any.
|
||||
// display or scrollable state changed and send events if any.
|
||||
const displayTypeChanges = [];
|
||||
const scrollableStateChanges = [];
|
||||
|
||||
const currentOverflowCausingElementsSet = new Set();
|
||||
|
||||
for (const [node, actor] of this._refMap) {
|
||||
if (Cu.isDeadWrapper(node)) {
|
||||
continue;
|
||||
|
|
@ -580,28 +574,8 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
|
|||
scrollableStateChanges.push(actor);
|
||||
actor.wasScrollable = isScrollable;
|
||||
}
|
||||
|
||||
this.updateOverflowCausingElements(
|
||||
node,
|
||||
actor,
|
||||
currentOverflowCausingElementsSet
|
||||
);
|
||||
}
|
||||
|
||||
// Get the NodeActor for each node in the symmetric difference of
|
||||
// currentOverflowCausingElementsSet and this.overflowCausingElementsSet
|
||||
const overflowStateChanges = [...currentOverflowCausingElementsSet]
|
||||
.filter(node => !this.overflowCausingElementsSet.has(node))
|
||||
.concat(
|
||||
[...this.overflowCausingElementsSet].filter(
|
||||
node => !currentOverflowCausingElementsSet.has(node)
|
||||
)
|
||||
)
|
||||
.filter(node => this.hasNode(node))
|
||||
.map(node => this.getNode(node));
|
||||
|
||||
this.overflowCausingElementsSet = currentOverflowCausingElementsSet;
|
||||
|
||||
if (displayTypeChanges.length) {
|
||||
this.emit("display-change", displayTypeChanges);
|
||||
}
|
||||
|
|
@ -609,10 +583,6 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
|
|||
if (scrollableStateChanges.length) {
|
||||
this.emit("scrollable-change", scrollableStateChanges);
|
||||
}
|
||||
|
||||
if (overflowStateChanges.length) {
|
||||
this.emit("overflow-change", overflowStateChanges);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -2872,32 +2842,6 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
|
|||
cancelPick() {
|
||||
this.nodePicker.cancelPick();
|
||||
},
|
||||
|
||||
/**
|
||||
* If element has a scrollbar, find the children causing the overflow and
|
||||
* add them to the set.
|
||||
* @param {DOMNode} node The node whose overflow causing elements are returned.
|
||||
* @param {NodeActor} actor The actor of the node.
|
||||
* @param {Set} set The set to which the overflow causing elements are added.
|
||||
*/
|
||||
updateOverflowCausingElements: function(node, actor, set) {
|
||||
if (node.nodeType !== Node.ELEMENT_NODE || !actor.isScrollable) {
|
||||
return;
|
||||
}
|
||||
|
||||
const overflowCausingChildren = [
|
||||
...InspectorUtils.getOverflowingChildrenOfElement(node),
|
||||
];
|
||||
|
||||
for (let child of overflowCausingChildren) {
|
||||
// child is a Node, but not necessarily an Element.
|
||||
// So, get the containing Element
|
||||
if (child.nodeType !== Node.ELEMENT_NODE) {
|
||||
child = child.parentElement;
|
||||
}
|
||||
set.add(child);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
exports.WalkerActor = WalkerActor;
|
||||
|
|
|
|||
|
|
@ -85,10 +85,6 @@ const walkerSpec = generateActorSpec({
|
|||
type: "scrollable-change",
|
||||
nodes: Arg(0, "array:domnode"),
|
||||
},
|
||||
"overflow-change": {
|
||||
type: "scrollable-change",
|
||||
nodes: Arg(0, "array:domnode"),
|
||||
},
|
||||
// The walker actor emits a useful "resize" event to its front to let
|
||||
// clients know when the browser window gets resized. This may be useful
|
||||
// for refreshing a DOM node's styles for example, since those may depend on
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче