Visual Diff: it's comparing static HTML vs. JavaScript generated one

[humitos]

I found a few examples where some extra HTML tags are added to the DOM in current page the user is reading. At that point, if the user enables visual diff, it fetch the raw HTML file without applying any JavaScript modification to its DOM resulting on having a few diff chunks on places where the HTML didn't change in reality.

It seems that CPython adds a Copy button on their Python code chunks using JavaScript and we identify this as diff chunk:

<ins class="doc-diff-added">
  <span class="copybutton" title="Hide the prompts and output" data-hidden="false">
  &gt;&gt;&gt;
  </span>
</ins>

I found this in python/cpython#125565, but it should happen in any other project that modifies the DOM using JavaScript. I'm sure what's the solution, but we may want to render the current DOM with JavaScript disabled and use that for the comparison.

[humitos]

I did a quick test and it definitely works better regarding identifying the diff chunks. The "downside" is that all the HTML element that were regenerated/added with JavaScript won't be shown when "Visual diff" is enabled --which probably makes sense. In the previous example I mentioned, the Copy buttons will disappear when "Visual diff" is enabled:

Peek.2025-02-11.10-51.webm