diff options
Diffstat (limited to 'devtools/client/inspector/markup')
10 files changed, 174 insertions, 56 deletions
diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js index 5d10b003c9..7975d442f8 100644 --- a/devtools/client/inspector/markup/markup.js +++ b/devtools/client/inspector/markup/markup.js @@ -1218,19 +1218,15 @@ MarkupView.prototype = { } else if (type == "idref") { // Select the node in the same document. nodeFront.walkerFront - .document(nodeFront) - .then(doc => { - return nodeFront.walkerFront - .querySelector(doc, "#" + CSS.escape(link)) - .then(node => { - if (!node) { - this.emit("idref-attribute-link-failed"); - return; - } - this.inspector.selection.setNodeFront(node, { - reason: "markup-attribute-link", - }); - }); + .getIdrefNode(nodeFront, CSS.escape(link)) + .then(node => { + if (!node) { + this.emitForTests("idref-attribute-link-failed"); + return; + } + this.inspector.selection.setNodeFront(node, { + reason: "markup-attribute-link", + }); }) .catch(console.error); } @@ -1555,7 +1551,7 @@ MarkupView.prototype = { } }, - _onTargetAvailable({ targetFront }) {}, + _onTargetAvailable() {}, _onTargetDestroyed({ targetFront, isModeSwitching }) { // Bug 1776250: We only watch targets in order to update containers which @@ -2103,14 +2099,12 @@ MarkupView.prototype = { * Mark the given node selected, and update the inspector.selection * object's NodeFront to keep consistent state between UI and selection. * - * @param {NodeFront} aNode + * @param {NodeFront} node * The NodeFront to mark as selected. - * @param {String} reason - * The reason for marking the node as selected. * @return {Boolean} False if the node is already marked as selected, true * otherwise. */ - markNodeAsSelected(node, reason = "nodeselected") { + markNodeAsSelected(node) { const container = this.getContainer(node); return this._markContainerAsSelected(container); }, diff --git a/devtools/client/inspector/markup/test/browser.toml b/devtools/client/inspector/markup/test/browser.toml index 0b566f5e18..4f08fd10f2 100644 --- a/devtools/client/inspector/markup/test/browser.toml +++ b/devtools/client/inspector/markup/test/browser.toml @@ -1,5 +1,4 @@ [DEFAULT] -prefs = ["devtools.chrome.enabled=false"] # Bug 1520383 - Force devtools.chrome.enabled to false regardless of whether we're in an official build so we don't show event bubbles from chrome event listeners in the inspector on unprivileged test pages. tags = "devtools" subsuite = "devtools" support-files = [ @@ -76,6 +75,7 @@ support-files = [ "lib_react_with_addons_15.3.1_min.js", "lib_react_with_addons_15.4.1.js", "react_external_listeners.js", + "resources/*", "shadowdom_open_debugger.min.js", "!/devtools/client/debugger/test/mochitest/shared-head.js", "!/devtools/client/inspector/test/head.js", diff --git a/devtools/client/inspector/markup/test/browser_markup_events_03.js b/devtools/client/inspector/markup/test/browser_markup_events_03.js index bebffec066..b0de4561e0 100644 --- a/devtools/client/inspector/markup/test/browser_markup_events_03.js +++ b/devtools/client/inspector/markup/test/browser_markup_events_03.js @@ -17,7 +17,7 @@ const TEST_DATA = [ expected: [ { type: "click", - filename: TEST_URL + ":69:17", + filename: TEST_URL + ":70:17", attributes: ["Bubbling"], handler: "es6Method(foo, bar) {\n" + ' alert("obj.es6Method");\n' + "}", @@ -29,7 +29,7 @@ const TEST_DATA = [ expected: [ { type: "click", - filename: TEST_URL + ":89:25", + filename: TEST_URL + ":91:25", attributes: ["Bubbling"], handler: "function* generator() {\n" + ' alert("generator");\n' + "}", }, @@ -40,7 +40,7 @@ const TEST_DATA = [ expected: [ { type: "click", - filename: TEST_URL + ":46:58", + filename: TEST_URL + ":47:58", attributes: ["Bubbling"], handler: "function*() {\n" + ' alert("anonGenerator");\n' + "}", }, diff --git a/devtools/client/inspector/markup/test/browser_markup_links_07.js b/devtools/client/inspector/markup/test/browser_markup_links_07.js index 2a86f3b1d9..830d370b03 100644 --- a/devtools/client/inspector/markup/test/browser_markup_links_07.js +++ b/devtools/client/inspector/markup/test/browser_markup_links_07.js @@ -7,6 +7,7 @@ // do follows the link. const TEST_URL = URL_ROOT_SSL + "doc_markup_links.html"; +const TEST_URL_BASE = URL_ROOT_SSL + "resources/doc_markup_links_base.html"; add_task(async function () { const { inspector } = await openInspectorForURL(TEST_URL); @@ -70,6 +71,31 @@ add_task(async function () { await followLinkNoNewNode(linkEl, true, inspector); }); +add_task(async function testDocumentWithBaseAttribute() { + const { inspector } = await openInspectorForURL(TEST_URL_BASE); + + info("Select a node with a URI attribute"); + await selectNode("img", inspector); + + info("Find the link element from the markup-view"); + const { editor } = await getContainerForSelector("img", inspector); + const linkEl = editor.attrElements.get("src").querySelector(".link"); + + info("Follow the link with middle-click and wait for the new tab to open"); + await followLinkWaitForTab( + linkEl, + false, + URL_ROOT_SSL + "doc_markup_tooltip.png" + ); + + info("Follow the link with meta/ctrl-click and wait for the new tab to open"); + await followLinkWaitForTab( + linkEl, + true, + URL_ROOT_SSL + "doc_markup_tooltip.png" + ); +}); + function performMouseDown(linkEl, metactrl) { const evt = linkEl.ownerDocument.createEvent("MouseEvents"); diff --git a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js index 1f50ae6b88..6d02f214ae 100644 --- a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js +++ b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js @@ -16,42 +16,84 @@ const TEST_DATA = [ { selector: "#aria-activedescendant", attributeName: "aria-activedescendant", - links: ["activedescendant01"], + links: [{ id: "activedescendant01" }], }, { selector: "#aria-controls", attributeName: "aria-controls", - links: ["controls01", "controls02"], + links: [{ id: "controls01" }, { id: "controls02" }], }, { selector: "#aria-describedby", attributeName: "aria-describedby", - links: ["describedby01", "describedby02"], + links: [{ id: "describedby01" }, { id: "describedby02" }], }, { selector: "#aria-details", attributeName: "aria-details", - links: ["details01", "details02"], + links: [{ id: "details01" }, { id: "details02" }], }, { selector: "#aria-errormessage", attributeName: "aria-errormessage", - links: ["errormessage01"], + links: [{ id: "errormessage01" }], }, { selector: "#aria-flowto", attributeName: "aria-flowto", - links: ["flowto01", "flowto02"], + links: [{ id: "flowto01" }, { id: "flowto02" }], }, { selector: "#aria-labelledby", attributeName: "aria-labelledby", - links: ["labelledby01", "labelledby02"], + links: [{ id: "labelledby01" }, { id: "labelledby02" }], }, { selector: "#aria-owns", attributeName: "aria-owns", - links: ["owns01", "owns02"], + links: [{ id: "owns01" }, { id: "owns02" }], + }, + { + getContainer: async inspector => { + info("Find and expand the test-component shadow DOM host."); + const hostFront = await getNodeFront("test-component", inspector); + const hostContainer = inspector.markup.getContainer(hostFront); + await expandContainer(inspector, hostContainer); + + info("Expand the shadow root"); + const shadowRootContainer = hostContainer.getChildContainers()[0]; + await expandContainer(inspector, shadowRootContainer); + + info("Expand the slot"); + const slotContainer = shadowRootContainer.getChildContainers()[0]; + + is( + slotContainer.elt + .querySelector(`[data-attr="id"]`) + .getAttribute("data-value"), + "aria-describedby-shadow-dom", + `This is the container for button#aria-describedby-shadow-dom` + ); + + // The test expect the node to be selected + const updated = inspector.once("inspector-updated"); + inspector.selection.setNodeFront(slotContainer.node, { reason: "test" }); + await updated; + + return slotContainer; + }, + attributeName: "aria-describedby", + links: [{ id: "describedby01", valid: false }, { id: "describedbyshadow" }], + }, + { + selector: "#empty-attributes", + attributeName: "aria-activedescendant", + links: [], + }, + { + selector: "#empty-attributes", + attributeName: "aria-details", + links: [], }, ]; @@ -59,11 +101,16 @@ add_task(async function () { const { inspector } = await openInspectorForURL(TEST_URL); for (const test of TEST_DATA) { - info("Selecting test node " + test.selector); - await selectNode(test.selector, inspector); + let editor; + if (typeof test.getContainer === "function") { + ({ editor } = await test.getContainer(inspector)); + } else { + info("Selecting test node " + test.selector); + await selectNode(test.selector, inspector); + info("Finding the popupNode to anchor the context-menu to"); + ({ editor } = await getContainerForSelector(test.selector, inspector)); + } - info("Finding the popupNode to anchor the context-menu to"); - const { editor } = await getContainerForSelector(test.selector, inspector); const attributeEl = editor.attrElements.get(test.attributeName); const linksEl = attributeEl.querySelectorAll(".link"); @@ -79,8 +126,6 @@ add_task(async function () { const linkEl = linksEl[i]; ok(linkEl, "Found the link"); - const expectedReferencedNodeId = test.links[i]; - info("Simulating a context click on the link"); const allMenuItems = openContextMenuAndGetAllItems(inspector, { target: linkEl, @@ -95,6 +140,7 @@ add_task(async function () { is(linkFollow.visible, true, "The follow-link item is visible"); is(linkCopy.visible, false, "The copy-link item is not visible"); + const { id: expectedReferencedNodeId } = test.links[i]; const linkFollowItemLabel = INSPECTOR_L10N.getFormatStr( "inspector.menu.selectElement.label", expectedReferencedNodeId @@ -114,16 +160,32 @@ add_task(async function () { "Button has expected title" ); - info("Check that clicking on button selects the associated node"); - const onSelection = inspector.selection.once("new-node-front"); - buttonEl.click(); - await onSelection; - - is( - inspector.selection.nodeFront.id, - expectedReferencedNodeId, - "The expected new node was selected" - ); + if (test.links[i].valid !== false) { + info("Check that clicking on button selects the associated node"); + const onSelection = inspector.selection.once("new-node-front"); + buttonEl.click(); + await onSelection; + + is( + inspector.selection.nodeFront.id, + expectedReferencedNodeId, + "The expected new node was selected" + ); + } else { + info( + "Check that clicking on button triggers idref-attribute-link-failed event" + ); + const onIdrefAttributeLinkFailed = inspector.markup.once( + "idref-attribute-link-failed" + ); + const onSelection = inspector.selection.once("new-node-front"); + const onTimeout = wait(500).then(() => "TIMEOUT"); + buttonEl.click(); + await onIdrefAttributeLinkFailed; + ok(true, "Got expected idref-attribute-link-failed event"); + const res = await Promise.race([onSelection, onTimeout]); + is(res, "TIMEOUT", "Clicking the button did not select a new node"); + } } } }); diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js index 38f7361725..563863d614 100644 --- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js +++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js @@ -59,7 +59,7 @@ var TEST_DATA = [ expectedAttributes: { style: DATA_URL_INLINE_STYLE, }, - validate: (container, inspector) => { + validate: container => { const editor = container.editor; const visibleAttrText = editor.attrElements .get("style") @@ -75,7 +75,7 @@ var TEST_DATA = [ expectedAttributes: { "data-long": LONG_ATTRIBUTE, }, - validate: (container, inspector) => { + validate: container => { const editor = container.editor; const visibleAttrText = editor.attrElements .get("data-long") @@ -91,7 +91,7 @@ var TEST_DATA = [ expectedAttributes: { src: DATA_URL_ATTRIBUTE, }, - validate: (container, inspector) => { + validate: container => { const editor = container.editor; const visibleAttrText = editor.attrElements .get("src") @@ -107,17 +107,17 @@ var TEST_DATA = [ expectedAttributes: { "data-long": LONG_ATTRIBUTE, }, - setUp(inspector) { + setUp() { Services.prefs.setBoolPref("devtools.markup.collapseAttributes", false); }, - validate: (container, inspector) => { + validate: container => { const editor = container.editor; const visibleAttrText = editor.attrElements .get("data-long") .querySelector(".attr-value").textContent; is(visibleAttrText, LONG_ATTRIBUTE); }, - tearDown(inspector) { + tearDown() { Services.prefs.clearUserPref("devtools.markup.collapseAttributes"); }, }, @@ -127,10 +127,10 @@ var TEST_DATA = [ expectedAttributes: { "data-long": LONG_ATTRIBUTE, }, - setUp(inspector) { + setUp() { Services.prefs.setIntPref("devtools.markup.collapseAttributeLength", 2); }, - validate: (container, inspector) => { + validate: container => { const firstChar = LONG_ATTRIBUTE[0]; const lastChar = LONG_ATTRIBUTE[LONG_ATTRIBUTE.length - 1]; const collapsed = firstChar + "\u2026" + lastChar; @@ -140,7 +140,7 @@ var TEST_DATA = [ .querySelector(".attr-value").textContent; is(visibleAttrText, collapsed); }, - tearDown(inspector) { + tearDown() { Services.prefs.clearUserPref("devtools.markup.collapseAttributeLength"); }, }, diff --git a/devtools/client/inspector/markup/test/doc_markup_events_03.html b/devtools/client/inspector/markup/test/doc_markup_events_03.html index a0c067e33e..deb3730d32 100644 --- a/devtools/client/inspector/markup/test/doc_markup_events_03.html +++ b/devtools/client/inspector/markup/test/doc_markup_events_03.html @@ -43,6 +43,7 @@ generatorNode.addEventListener("click", generator); const anonGenerator = document.getElementById("anon-generator"); + // eslint-disable-next-line require-yield anonGenerator.addEventListener("click", function* () { alert("anonGenerator"); }); @@ -86,6 +87,7 @@ } }; + // eslint-disable-next-line require-yield function* generator() { alert("generator"); } diff --git a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html index 0e3bf0a57f..d4fc13042f 100644 --- a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html +++ b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html @@ -3,6 +3,24 @@ <head> <meta charset="utf-8"> <title>Markup-view Linkify ARIA attributes</title> + <script> + "use strict"; + class TestComponent extends HTMLElement { + constructor() { + super(); + this.attachShadow({mode: 'open'}); + + this.shadowRoot.innerHTML = ` + <button + id="aria-describedby-shadow-dom" + aria-describedby="describedby01 describedbyshadow" + ></button> + <div id="describedbyshadow">#describedbyshadow</div> + `; + } + } + customElements.define('test-component', TestComponent); + </script> </head> <body> <div id="aria-activedescendant" @@ -40,5 +58,9 @@ <div id="aria-owns" aria-owns="owns01 owns02">aria-owns test</div> <div id="owns01">#owns01</div> <div id="owns02">#owns02</div> + + <test-component></test-component> + + <div id="empty-attributes" aria-activedescendant=" " aria-details=" "></div> </body> </html> diff --git a/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html b/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html new file mode 100644 index 0000000000..55b5350ab5 --- /dev/null +++ b/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Markup-view links with base attribute</title> + <base href="../"> + </head> + <body> + <img src="doc_markup_tooltip.png"> + Test relative links with base attributes. + </body> +</html> diff --git a/devtools/client/inspector/markup/views/element-editor.js b/devtools/client/inspector/markup/views/element-editor.js index f538c2f6a9..c7e47c0a7c 100644 --- a/devtools/client/inspector/markup/views/element-editor.js +++ b/devtools/client/inspector/markup/views/element-editor.js @@ -878,7 +878,7 @@ ElementEditor.prototype = { // Create links in the attribute value, and truncate long attribute values if needed. for (const token of parsedLinksData) { - if (token.type === "string") { + if (token.type === "string" || token.value?.trim() === "") { attributeValueEl.appendChild( this.doc.createTextNode(this._truncateAttributeValue(token.value)) ); |