Minimal style + JS code for better manual review of screenshot differences. (#8643)

isoos · web-flow · commit 588766233f52 · 2025-03-14T12:51:18.000+01:00
diff --git a/pkg/pub_integration/tool/compare_screenshots.dart b/pkg/pub_integration/tool/compare_screenshots.dart
@@ -110,23 +110,32 @@ class _CompareTool {
           File(p.join(_reportDir.path, relativeDir, '$basename-after.png'));
       await afterFile.writeAsBytes(afterBytes);
 
-      _report.writeln('`$path`\n');
+      _report.writeln('\n<div class="image">');
+      _report.writeln('\n### `$path`\n\n');
       _report.writeln(
-          '![before](${p.join(relativeDir, '$basename-before.png')})\n');
-      _report
-          .writeln('![after](${p.join(relativeDir, '$basename-after.png')})\n');
+          '- ![before](${p.join(relativeDir, '$basename-before.png')})\n');
+      _report.writeln(
+          '- ![after](${p.join(relativeDir, '$basename-after.png')})\n');
       _report
-          .writeln('![diff](${p.join(relativeDir, '$basename-diff.png')})\n');
+          .writeln('- ![diff](${p.join(relativeDir, '$basename-diff.png')})\n');
+      _report.writeln('\n</div>');
       _report.writeln();
     }
 
     await _writeIndexHtml();
   }
 
   Future<void> _writeIndexHtml() async {
+    final script = await File('tool/comparison_web.js').readAsString();
+    final styles = await File('tool/comparison_web.css').readAsString();
     await File(p.join(_reportDir.path, 'index.html')).writeAsString([
-      '<html><body>',
+      '<html>',
+      '<head>',
+      '<style>\n$styles\n</style>',
+      '</head>',
+      '<body>',
       markdownToHtml(_report.toString()),
+      '<script>\n$script\n</script>\n',
       '</body></html>',
     ].join('\n'));
   }
diff --git a/pkg/pub_integration/tool/comparison_web.css b/pkg/pub_integration/tool/comparison_web.css
@@ -0,0 +1,13 @@
+.image ul {
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+}
+
+.image ul li {
+  margin: 1px;
+}
+
+.image.row ul {
+  flex-direction: row;
+}
diff --git a/pkg/pub_integration/tool/comparison_web.js b/pkg/pub_integration/tool/comparison_web.js
@@ -0,0 +1,7 @@
+const imageDivs = document.querySelectorAll('div.image');
+
+imageDivs.forEach(function(div) {
+  div.addEventListener('click', function() {
+    this.classList.toggle('row');
+  });
+});
