Open Bug 1383613 Opened 7 years ago Updated 2 years ago

Be smarter when applying HTML from edit mode

Categories

(DevTools :: Inspector, enhancement, P3)

56 Branch
enhancement

Tracking

(Not tracked)

People

(Reporter: sebo, Unassigned)

References

Details

When leaving "Edit As HTML" the whole edited HTML is replaced, which kills event listeners and iframe contents.

Instead of doing that, the changed HTML should be recognized and only those parts be replaced, so event listeners still work and iframe contents stay visible.

This was initially mentioned in a Stack Overflow question[1] comparing the output between the Firefox and the Chrome DevTools, where the latter are obviously doing a smarter job already.

Test case:
1. Go to https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick.
2. Open the Inspector.
3. Press F2 to start the edit mode (on the <body> element).
4. Edit some text.
5. Press Ctrl+Enter to leave the edit mode.

=> The text is changed, but the iframe now is empty and you can't edit the code at the left side anymore.

Sebastian

[1] https://stackoverflow.com/q/45260099/432681
Version: unspecified → 56 Branch
Here's another simple test case showing that event listeners are gone after editing:

1. Go to data:text/html,<div id="d">test</div><script>document.getElementById("d").addEventListener("click", evt => console.log("test"));</script>
2. Right-click the <div> containing "test" and choose "Inspect Element" from the context menu
3. Press F2 to start the edit mode.
4. Change the text.
5. Press Ctrl+Enter to leave the edit mode.

=> The text is changed but the click event listener is gone.

Sebastian
Severity: normal → enhancement
Priority: -- → P3
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.