зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1478665 - Follow source maps when viewing custom element definition r=jdescottes
Differential Revision: https://phabricator.services.mozilla.com/D50016 --HG-- extra : moz-landing-system : lando
This commit is contained in:
wartmanm
Родитель
73021bb855
Коммит
d30d028c18
|
|
@ -50,6 +50,7 @@ support-files =
|
|||
doc_markup_update-on-navigtion_1.html
|
||||
doc_markup_update-on-navigtion_2.html
|
||||
doc_markup_view-original-source.html
|
||||
doc_markup_shadowdom_open_debugger_pretty_printed.html
|
||||
events_bundle.js
|
||||
events_bundle.js.map
|
||||
events_original.js
|
||||
|
|
@ -78,6 +79,7 @@ support-files =
|
|||
lib_react_with_addons_15.3.1_min.js
|
||||
lib_react_with_addons_15.4.1.js
|
||||
react_external_listeners.js
|
||||
shadowdom_open_debugger.min.js
|
||||
!/devtools/client/debugger/test/mochitest/helpers.js
|
||||
!/devtools/client/debugger/test/mochitest/helpers/context.js
|
||||
!/devtools/client/inspector/test/head.js
|
||||
|
|
@ -211,6 +213,7 @@ tags = clipboard
|
|||
[browser_markup_shadowdom_noslot.js]
|
||||
[browser_markup_shadowdom_open_debugger.js]
|
||||
skip-if = (os == 'win' && processor == 'aarch64') # bug 1533507
|
||||
[browser_markup_shadowdom_open_debugger_pretty_printed.js]
|
||||
[browser_markup_shadowdom_shadowroot_mode.js]
|
||||
[browser_markup_shadowdom_show_nodes_button.js]
|
||||
[browser_markup_shadowdom_slotted_keyboard_focus.js]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that clicking on the "custom" badge opens the debugger to the pretty-printed
|
||||
// custom element definition.
|
||||
|
||||
/* import-globals-from ../../../debugger/test/mochitest/helpers.js */
|
||||
Services.scriptloader.loadSubScript(
|
||||
"chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/helpers.js",
|
||||
this
|
||||
);
|
||||
|
||||
/* import-globals-from ../../../debugger/test/mochitest/helpers/context.js */
|
||||
Services.scriptloader.loadSubScript(
|
||||
"chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/helpers/context.js",
|
||||
this
|
||||
);
|
||||
|
||||
const TEST_URL =
|
||||
URL_ROOT + "doc_markup_shadowdom_open_debugger_pretty_printed.html";
|
||||
|
||||
add_task(async function() {
|
||||
info("Open inspector.");
|
||||
await clearDebuggerPreferences();
|
||||
const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
|
||||
|
||||
await selectNode("test-component", inspector);
|
||||
const testFront = await getNodeFront("test-component", inspector);
|
||||
|
||||
const testContainer = inspector.markup.getContainer(testFront);
|
||||
const customBadge = testContainer.elt.querySelector(
|
||||
".inspector-badge.interactive[data-custom]"
|
||||
);
|
||||
|
||||
info("Click custom badge.");
|
||||
customBadge.click();
|
||||
|
||||
await toolbox.getPanelWhenReady("jsdebugger");
|
||||
const dbg = createDebuggerContext(toolbox);
|
||||
|
||||
await waitForSelectedSource(dbg, "shadowdom_open_debugger.min.js");
|
||||
await waitForSelectedLocation(dbg, 2);
|
||||
|
||||
info("Pretty-print source.");
|
||||
clickElement(dbg, "prettyPrintButton");
|
||||
await waitForSelectedSource(dbg, "shadowdom_open_debugger.min.js:formatted");
|
||||
info("Switch back to the original source.");
|
||||
await selectSource(dbg, "shadowdom_open_debugger.min.js");
|
||||
|
||||
info("Return to inspector.");
|
||||
await toolbox.selectTool("inspector");
|
||||
|
||||
info("Click custom badge again.");
|
||||
customBadge.click();
|
||||
|
||||
await waitForSelectedSource(dbg, "shadowdom_open_debugger.min.js:formatted");
|
||||
await waitForSelectedLocation(dbg, 4);
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Custom Element Pretty-Printed Source Test</title>
|
||||
<script src="shadowdom_open_debugger.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<test-component></test-component>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/* eslint-disable */
|
||||
"use strict";customElements.define("test-component",class extends HTMLElement{constructor(){super();let shadowRoot=this.attachShadow({mode:"open"});shadowRoot.innerHTML="<slot>some default content</slot>"}connectedCallback(){}disconnectedCallback(){}});
|
||||
|
|
@ -907,8 +907,17 @@ ElementEditor.prototype = {
|
|||
}
|
||||
},
|
||||
|
||||
onCustomBadgeClick: function() {
|
||||
const { url, line, column } = this.node.customElementLocation;
|
||||
onCustomBadgeClick: async function() {
|
||||
let { url, line, column } = this.node.customElementLocation;
|
||||
const originalLocation = await this.markup.toolbox.sourceMapURLService.originalPositionFor(
|
||||
url,
|
||||
line,
|
||||
column
|
||||
);
|
||||
if (originalLocation) {
|
||||
({ sourceUrl: url, line, column } = originalLocation);
|
||||
}
|
||||
|
||||
this.markup.toolbox.viewSourceInDebugger(
|
||||
url,
|
||||
line,
|
||||
|
|
|
|||
|
|
@ -530,6 +530,7 @@ const NodeActor = protocol.ActorClassWithSpec(nodeSpec, {
|
|||
return {
|
||||
url: customElementDO.script.url,
|
||||
line: customElementDO.script.startLine,
|
||||
column: customElementDO.script.startColumn,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче