1297633 - "Edit as HTML" doesn't work on <svg> root elements of SVG files

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Sebastian Zartner [:sebo]]

+++ This bug was initially created as a clone of Bug #1222586 +++

Test case:
1. Open the Inspector on https://mdn.mozillademos.org/files/12668/MDN.svg
2. Right-click the <svg> tag and choose 'Edit as HTML' from the context menu
3. Change something (e.g. the id of the <defs> tag
4. Press Ctrl + Enter to leave the edit mode

=> Nothing has changed and the Browser Console shows the following error:

TypeError: Argument 2 of Node.replaceChild is not an object.
Stack trace:
WalkerActor<.setOuterHTML@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/inspector.js:1969:7
generateRequestHandlers/</handler@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1042:19
onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/main.js:1748:15
ChildDebuggerTransport.prototype.receiveMessage@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/transport/transport.js:761:7
1protocol.js:906

Sebastian

Comment 1

[Sebastian Zartner [:sebo]]

The related code is here:
https://hg.mozilla.org/mozilla-central/file/e9533997fcef/devtools/server/actors/inspector.js#l1928

It looks like the document type is expected to be HTML.

Once I've set up my development environment again, I may have a look at that. Until then, feel free to take that bug.

Sebastian

Comment 2

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 3

[Julian Descottes [:jdescottes]]

Some additional information: this only occurs when the svg node you are trying to edit is also the document itself. If you embed the SVG in a HTML document, you can edit it fine.

As Sebastian pointed out, the issue is that the inspector actor is doing a special processing when editing document elements, and is expecting HTML documents (with head, body etc...):

> rawNode.replaceChild(parsedDOM.head, rawNode.querySelector("head"));
> rawNode.replaceChild(parsedDOM.body, rawNode.querySelector("body"));

If the document is actually a SVG document, we could parse the new value as a SVG and then replace the innerHTML:

> let parsedSVG = DOMParser.parseFromString(value, "image/svg+xml");
> rawNode.innerHTML = parsedSVG.rootElement.innerHTML;

Comment 4

[Sebastian Zartner [:sebo]]

Attachment: Bug 1297633 - Fixed editing of SVG elements in Inspector. r=jdescottes

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cfaa6bb3bb55
Fixed editing of SVG elements in Inspector. r=jdescottes

Comment 6

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/cfaa6bb3bb55