Stop showing invisible content in HTML diff (#43)

This also solves an issue where text coloring would be incorrect and sometimes hard to read in Safari. This change is purely about the additional styling we add to diffs -- rather than use `all: unset` in our CSS, we take a more precise approach and only reset certain styles, and do not apply most of those resets to the descendents of the `<ins>`/`<del>` elements (we only apply them to the elements themselves).

Fixes #24.

Author: Mr0grog

docs/source/release-history.rst

@@ -11,6 +11,8 @@ In Development
 
 - Improve handling of lazy-loaded images in :func:`web_monitoring_diff.html_diff_render`. When images are lazy-loaded via JS, they usually use the ``data-src`` or ``data-srcset`` attributes, and we now check those, too. Additionally, if two images have no detectable URLs, we now treat them as the same, rather than different. (`#37 <https://github.com/edgi-govdata-archiving/web-monitoring-diff/issues/37>`_)
 
+- Stop showing inline scripts and styles in :func:`web_monitoring_diff.html_diff_render`. These still get wrapped with ``<del>`` or ``<ins>`` elements, but they don’t show up visually since they aren’t elements that should be visually rendered. (`#24 <https://github.com/edgi-govdata-archiving/web-monitoring-diff/issues/24>`_
+
 
 Version 0.1.0
 -------------

web_monitoring_diff/html_render_diff.py

@@ -425,16 +425,7 @@ def html_diff_render(a_text, b_text, a_headers=None, b_headers=None,
             "style",
             type="text/css",
             id='wm-diff-style')
-
-        color_palette = get_color_palette()
-        change_styles.string = f'''
-            ins.wm-diff, ins.wm-diff > * {{background-color:
-                {color_palette['differ_insertion']} !important;
-                all: unset;}}
-            del.wm-diff, del.wm-diff > * {{background-color:
-                {color_palette['differ_deletion']} !important;
-                all: unset;}}
-            script {{display: none !important;}}'''
+        change_styles.string = get_diff_styles()
         soup.head.append(change_styles)
 
         soup.body.replace_with(diff_body)
@@ -1864,6 +1855,32 @@ def get_matching_blocks(self):
                 or not item[2]]
 
 
+def get_diff_styles():
+    colors = get_color_palette()
+    # Unset local `<ins>`/`<del>` styling on the page that might clash with
+    # our diff elements. Note that `all: unset` has browser bugs that are
+    # problematic (e.g. https://bugs.webkit.org/show_bug.cgi?id=158782) so
+    # we need to use a list of specific properties we're concerned about
+    # instead. (It can also cause the contents of `<style>` and `<script>`
+    # tags to be rendered on the page, which is also bad.)
+    return f'''
+        ins.wm-diff, del.wm-diff {{
+            display: unset;
+            visibility: unset;
+            opacity: 1;
+            clip: auto;
+            text-decoration: unset;
+            color: inherit;
+        }}
+        ins.wm-diff, ins.wm-diff > * {{
+            background-color: {colors['differ_insertion']} !important;
+        }}
+        del.wm-diff, del.wm-diff > * {{
+            background-color: {colors['differ_deletion']} !important;
+        }}
+        script {{display: none !important;}}'''
+
+
 UPDATE_CONTRAST_SCRIPT = """
     (function () {
         // Update the text color of change elements to ensure a readable level