Bug 1701004 - [devtools] Use a dedicated commands instance for the eyedropper menu item r=nchevobbe

Depends on D119170

Differential Revision: https://phabricator.services.mozilla.com/D119173
This commit is contained in:
Julian Descottes 2021-07-06 19:22:24 +00:00
parent 1a686aacb4
commit 5bf1798fbc
4 changed files with 84 additions and 9 deletions

View File

@ -48,6 +48,7 @@ support-files =
head.js
img_browser_inspector_highlighter-eyedropper-image.png
shared-head.js
style_inspector_eyedropper_ruleview.css
!/devtools/client/shared/test/shared-head.js
!/devtools/client/shared/test/telemetry-test-helpers.js
!/devtools/client/debugger/test/mochitest/helpers/context.js
@ -76,6 +77,7 @@ skip-if = (os == 'win' && processor == 'aarch64') # bug 1533490
[browser_inspector_destroy-after-navigation.js]
[browser_inspector_destroy-before-ready.js]
[browser_inspector_expand-collapse.js]
[browser_inspector_eyedropper_ruleview.js]
[browser_inspector_fission_frame.js]
[browser_inspector_fission_frame_navigation.js]
[browser_inspector_fission_switch_target.js]

View File

@ -0,0 +1,50 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
const CSS_URI = URL_ROOT + "style_inspector_eyedropper_ruleview.css";
const TEST_URI = `
<link href="${CSS_URI}" rel="stylesheet" type="text/css"/>
`;
// Test that opening the eyedropper before opening devtools doesn't break links
// in the ruleview.
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const onPickerCommandHandled = new Promise(r => {
const listener = subject => {
Services.obs.removeObserver(listener, "color-picker-command-handled");
r(subject.wrappedJSObject);
};
Services.obs.addObserver(listener, "color-picker-command-handled");
});
info("Trigger the eyedropper command");
const menu = document.getElementById("menu_eyedropper");
menu.doCommand();
info("Wait for the color-picker-command-handled observable");
const targetFront = await onPickerCommandHandled;
info("Wait for the eye dropper to be visible");
const highlighterTestFront = await targetFront.getFront("highlighterTest");
await asyncWaitUntil(() => highlighterTestFront.isEyeDropperVisible());
info("Cancel the eye dropper and wait for the target to be destroyed");
EventUtils.synthesizeKey("KEY_Escape");
await waitFor(() => targetFront.isDestroyed());
const { inspector, view } = await openRuleView();
await selectNode("body", inspector);
const linkText = getRuleViewLinkTextByIndex(view, 1);
is(
linkText,
"style_inspector_eyedropper_ruleview.css:1",
"link text at index 1 has the correct link."
);
});

View File

@ -0,0 +1,3 @@
body {
color: red;
}

View File

@ -27,18 +27,15 @@
const { Cu } = require("chrome");
loader.lazyRequireGetter(this, "Services", "Services");
loader.lazyRequireGetter(this, "flags", "devtools/shared/flags");
loader.lazyRequireGetter(
this,
"gDevToolsBrowser",
"devtools/client/framework/devtools-browser",
true
);
loader.lazyRequireGetter(
this,
"TabDescriptorFactory",
"devtools/client/framework/tab-descriptor-factory",
true
);
loader.lazyRequireGetter(
this,
"ResponsiveUIManager",
@ -50,6 +47,12 @@ loader.lazyRequireGetter(
"devtools/client/shared/link",
true
);
loader.lazyRequireGetter(
this,
"CommandsFactory",
"devtools/shared/commands/commands-factory",
true
);
loader.lazyImporter(
this,
@ -130,11 +133,15 @@ exports.menuitems = [
async oncommand(event) {
const window = event.target.ownerDocument.defaultView;
const descriptor = await TabDescriptorFactory.createDescriptorForTab(
// The eyedropper might be used without a toolbox, so it should use a
// dedicated commands instance.
// See Bug 1701004.
const commands = await CommandsFactory.forTab(
window.gBrowser.selectedTab
);
const target = await descriptor.getTarget();
await target.attach();
await commands.targetCommand.startListening();
const target = commands.targetCommand.targetFront;
const inspectorFront = await target.getFront("inspector");
// If RDM is active, disable touch simulation events if they're enabled.
@ -161,7 +168,20 @@ exports.menuitems = [
});
}
// Destroy the dedicated commands instance when the color picking is
// finished.
inspectorFront.once("color-picked", () => commands.destroy());
inspectorFront.once("color-pick-canceled", () => commands.destroy());
inspectorFront.pickColorFromPage({ copyOnSelect: true, fromMenu: true });
if (flags.testing) {
// Used in devtools/client/inspector/test/browser_inspector_eyedropper_ruleview.js
Services.obs.notifyObservers(
{ wrappedJSObject: target },
"color-picker-command-handled"
);
}
},
checkbox: true,
},