зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1623667 - [devtools] Update Debugger to use Box Model Highlighter r=ochameau
Depends on D92224 Update Debugger tests to use the Toolbox shortcut to highlighters introduced in D92222. Differential Revision: https://phabricator.services.mozilla.com/D92225
This commit is contained in:
Родитель
e94a8a04ad
Коммит
c2c4bcebc3
|
@ -163,8 +163,7 @@ class DebuggerPanel {
|
|||
return;
|
||||
}
|
||||
|
||||
const forceUnHighlightInTest = true;
|
||||
return this._unhighlight(forceUnHighlightInTest);
|
||||
return this._unhighlight();
|
||||
}
|
||||
|
||||
getFrames() {
|
||||
|
|
|
@ -79,12 +79,11 @@ async function checkInspectorIcon(dbg) {
|
|||
|
||||
// Ensure hovering over button highlights the node in content pane
|
||||
const view = node.ownerDocument.defaultView;
|
||||
const inspectorFront = await toolbox.target.getFront("inspector");
|
||||
const onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
|
||||
const onNodeHighlight = toolbox.getHighlighter().waitForHighlighterShown();
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(node, { type: "mousemove" }, view);
|
||||
|
||||
const nodeFront = await onNodeHighlight;
|
||||
const { nodeFront } = await onNodeHighlight;
|
||||
is(nodeFront.displayName, "button", "The correct node was highlighted");
|
||||
|
||||
// Ensure panel changes when button is clicked
|
||||
|
|
|
@ -14,6 +14,7 @@ add_task(async function() {
|
|||
const dbg = await initDebugger("doc-script-switching.html");
|
||||
const { toolbox } = dbg;
|
||||
const testActor = await getTestActor(toolbox);
|
||||
const highlighter = toolbox.getHighlighter();
|
||||
|
||||
// Bug 1562165: the WhyPaused element is displayed for a few hundred ms when adding an
|
||||
// expression, which can break synthesizeMouseAtCenter. So here we wait for the
|
||||
|
@ -30,8 +31,7 @@ add_task(async function() {
|
|||
info(
|
||||
"Check that hovering over DOM element highlights the node in content panel"
|
||||
);
|
||||
const inspectorFront = await toolbox.target.getFront("inspector");
|
||||
let onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
|
||||
let onNodeHighlight = highlighter.waitForHighlighterShown();
|
||||
|
||||
info("Mouseover the open in inspector button");
|
||||
const inspectorNode = await waitUntilPredicate(() =>
|
||||
|
@ -44,14 +44,12 @@ add_task(async function() {
|
|||
view
|
||||
);
|
||||
|
||||
info("Wait for node-highlight");
|
||||
const nodeFront = await onNodeHighlight;
|
||||
info("Wait for highligther to be shown");
|
||||
const { nodeFront } = await onNodeHighlight;
|
||||
is(nodeFront.displayName, "button", "The correct node was highlighted");
|
||||
isVisible = await testActor.isHighlighting();
|
||||
ok(isVisible, "Highlighter is displayed");
|
||||
|
||||
info("Check that moving the mouse away from the node hides the highlighter");
|
||||
let onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight");
|
||||
let onNodeUnhighlight = highlighter.waitForHighlighterHidden();
|
||||
const nonHighlightEl = inspectorNode.closest(".object-node");
|
||||
EventUtils.synthesizeMouseAtCenter(
|
||||
nonHighlightEl,
|
||||
|
@ -64,8 +62,8 @@ add_task(async function() {
|
|||
is(isVisible, false, "The highlighter is not displayed anymore");
|
||||
|
||||
info("Check we don't have zombie highlighters when briefly hovering a node");
|
||||
onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
|
||||
onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight");
|
||||
onNodeHighlight = highlighter.waitForHighlighterShown();
|
||||
onNodeUnhighlight = highlighter.waitForHighlighterHidden();
|
||||
|
||||
// Move hover the node and then, right after, move out.
|
||||
EventUtils.synthesizeMouseAtCenter(
|
||||
|
@ -86,9 +84,7 @@ add_task(async function() {
|
|||
info("Ensure panel changes when button is clicked");
|
||||
// Loading the inspector panel at first, to make it possible to listen for
|
||||
// new node selections
|
||||
await toolbox.loadTool("inspector");
|
||||
const inspector = toolbox.getPanel("inspector");
|
||||
|
||||
const inspector = await toolbox.loadTool("inspector");
|
||||
const onInspectorSelected = toolbox.once("inspector-selected");
|
||||
const onInspectorUpdated = inspector.once("inspector-updated");
|
||||
const onNewNode = toolbox.selection.once("new-node-front");
|
||||
|
@ -128,8 +124,7 @@ add_task(async function() {
|
|||
|
||||
// Loading the inspector panel at first, to make it possible to listen for
|
||||
// new node selections
|
||||
await toolbox.loadTool("inspector");
|
||||
const inspector = toolbox.getPanel("inspector");
|
||||
const inspector = await toolbox.loadTool("inspector");
|
||||
|
||||
const onInspectorSelected = toolbox.once("inspector-selected");
|
||||
const onInspectorUpdated = inspector.once("inspector-updated");
|
||||
|
|
|
@ -36,12 +36,6 @@ var openInspector = async function(hostType) {
|
|||
}
|
||||
|
||||
const testActor = await getTestActor(toolbox);
|
||||
// Override the highligher getter with a method to return the active box model
|
||||
// highlighter. Adaptation for multi-process scenarios where there can be multiple
|
||||
// highlighters, one per process.
|
||||
testActor.highlighter = () => {
|
||||
return inspector.highlighters.getActiveHighlighter("BoxModelHighlighter");
|
||||
};
|
||||
|
||||
return { toolbox, inspector, testActor };
|
||||
};
|
||||
|
|
|
@ -184,7 +184,18 @@ registerCleanupFunction(() => {
|
|||
|
||||
// Spawn an instance of the test actor for the given toolbox
|
||||
async function getTestActor(toolbox) {
|
||||
return toolbox.target.getFront("test");
|
||||
// Loading the Inspector panel in order to overwrite the TestActor getter for the
|
||||
// highlighter instance with a method that points to the currently visible
|
||||
// Box Model Highlighter managed by the Inspector panel.
|
||||
const inspector = await toolbox.loadTool("inspector");
|
||||
const testActor = await toolbox.target.getFront("test");
|
||||
// Override the highligher getter with a method to return the active box model
|
||||
// highlighter. Adaptation for multi-process scenarios where there can be multiple
|
||||
// highlighters, one per process.
|
||||
testActor.highlighter = () => {
|
||||
return inspector.highlighters.getActiveHighlighter("BoxModelHighlighter");
|
||||
};
|
||||
return testActor;
|
||||
}
|
||||
|
||||
// Sometimes, we need the test actor before opening or without a toolbox then just
|
||||
|
|
|
@ -845,13 +845,9 @@ class TestFront extends protocol.FrontClassWithSpec(testSpec) {
|
|||
constructor(client, targetFront, parentFront) {
|
||||
super(client, targetFront, parentFront);
|
||||
this.formAttributeName = "testActor";
|
||||
}
|
||||
|
||||
async initialize() {
|
||||
// TODO: Remove reference to highlighter from top-level target after
|
||||
// updating all non-Inspector consumers for the highlighter. Bug 1623667
|
||||
const inspectorFront = await this.targetFront.getFront("inspector");
|
||||
this._highlighter = inspectorFront.highlighter;
|
||||
// The currently active highlighter is obtained by calling a custom getter
|
||||
// provided manually after requesting TestFront. See `getTestActor(toolbox)`
|
||||
this._highlighter = null;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -861,13 +857,8 @@ class TestFront extends protocol.FrontClassWithSpec(testSpec) {
|
|||
* @param {Function|Highlighter} _customHighlighterGetter
|
||||
*/
|
||||
set highlighter(_customHighlighterGetter) {
|
||||
if (typeof _customHighlighterGetter === "function") {
|
||||
this._customHighlighterGetter = _customHighlighterGetter;
|
||||
} else {
|
||||
this._customHighlighterGetter = null;
|
||||
this._highlighter = _customHighlighterGetter;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The currently active highlighter instance.
|
||||
|
@ -876,10 +867,9 @@ class TestFront extends protocol.FrontClassWithSpec(testSpec) {
|
|||
* @return {Highlighter|null}
|
||||
*/
|
||||
get highlighter() {
|
||||
if (this._customHighlighterGetter) {
|
||||
return this._customHighlighterGetter();
|
||||
}
|
||||
return this._highlighter;
|
||||
return typeof this._highlighter === "function"
|
||||
? this._highlighter()
|
||||
: this._highlighter;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Загрузка…
Ссылка в новой задаче