HTML diff results page

.prettierignore

@@ -1,5 +1,6 @@
 www/chrome
 www/assets/css/vendor
+www/assets/js/vendor
 www/assets/js/catchpoint-rum.js
 www/assets/js/dygraph-combined.js
 www/assets/js/codeflask.module.js

www/htmldiff.php

@@ -0,0 +1,65 @@
+<?php
+
+require_once __DIR__ . '/common.inc';
+
+// this output buffer hack avoids a bit of circularity
+// on one hand we want the contents of header.inc
+// on the other we want to get access to TestRunResults prior to that
+ob_start();
+define('NOBANNER', true); // otherwise Twitch banner shows 2x
+$tab = 'Test Result';
+$subtab = 'HTML diff';
+include_once INCLUDES_PATH . '/header.inc';
+$results_header = ob_get_contents();
+ob_end_clean();
+
+// all prerequisite libs were already required in header.inc
+$fileHandler = new FileHandler();
+$testInfo = TestInfo::fromFiles($testPath);
+$testRunResults = TestRunResults::fromFiles($testInfo, $run, $cached, $fileHandler);
+$pageData = loadAllPageData($testPath);
+
+$error_message = null;
+$delivered_html = null;
+$rendered_html = @$pageData[$run][$cached]['rendered-html'];
+
+if (!$rendered_html) {
+    $error_message = 'Rendered HTML not available, please run the test again';
+}
+
+$body_id = @$pageData[$run][$cached]['final_base_page_request_id'];
+if (!$body_id) {
+    $error_message = 'Could not figure out the request ID of the final base page, please run the test again';
+} else {
+    // TODO: move this to a utility and share with response_body.php
+    $cachedStr = $cached ? '_Cached' : '';
+    $bodies_file = $testPath . '/' . $run . $cachedStr . '_bodies.zip';
+    if (is_file($bodies_file)) {
+        $zip = new ZipArchive();
+        if ($zip->open($bodies_file) === true) {
+            for ($i = 0; $i < $zip->numFiles; $i++) {
+                $name = $zip->getNameIndex($i);
+                $parts = explode('-', $name);
+                $id = trim($parts[1]);
+                if (!strcmp($id, $body_id)) {
+                    $delivered_html = $zip->getFromIndex($i);
+                    break;
+                }
+            }
+        }
+    }
+}
+
+if (!$delivered_html) {
+    $error_message = 'Response body is not available, please turn on the "Save Response Bodies" option in the advanced settings to capture text resources.';
+}
+
+// template
+echo view('pages.htmldiff', [
+    'test_results_view' => true,
+    'body_class' => 'result',
+    'results_header' => $results_header,
+    'rendered_html' => $rendered_html,
+    'delivered_html' => $delivered_html,
+    'error_message' =>  $error_message,
+]);

www/nginx.conf

@@ -140,6 +140,10 @@ rewrite ^/result/([a-zA-Z0-9_]+)/([a-zA-Z0-9]+)/consolelog$ /consolelog.php?test
 rewrite ^/result/([a-zA-Z0-9_]+)/([a-zA-Z0-9]+)/consolelog/$ /consolelog.php?test=$1&run=$2 last;
 rewrite ^/result/([a-zA-Z0-9_]+)/([a-zA-Z0-9]+)/consolelog/cached$ /consolelog.php?test=$1&run=$2&cached=1 last;
 rewrite ^/result/([a-zA-Z0-9_]+)/([a-zA-Z0-9]+)/consolelog/cached/$ /consolelog.php?test=$1&run=$2&cached=1 last;
+rewrite ^/result/([a-zA-Z0-9_]+)/([a-zA-Z0-9]+)/htmldiff$ /htmldiff.php?test=$1&run=$2 last;
+rewrite ^/result/([a-zA-Z0-9_]+)/([a-zA-Z0-9]+)/htmldiff/$ /htmldiff.php?test=$1&run=$2 last;
+rewrite ^/result/([a-zA-Z0-9_]+)/([a-zA-Z0-9]+)/htmldiff/cached$ /htmldiff.php?test=$1&run=$2&cached=1 last;
+rewrite ^/result/([a-zA-Z0-9_]+)/([a-zA-Z0-9]+)/htmldiff/cached/$ /htmldiff.php?test=$1&run=$2&cached=1 last;
 
 #csv combined results
 rewrite ^/result/([a-zA-Z0-9_]+)/.*page_data.csv$ /csv.php?test=$1 last;

www/resources/views/pages/htmldiff.blade.php

@@ -0,0 +1,100 @@
+@extends('default')
+
+@section('style')
+<style>
+del {
+	text-decoration: none;
+	color: #b30000;
+	background: #fadad7;
+}
+ins {
+	background: #eaf2c2;
+	color: #406619;
+	text-decoration: none;
+}
+#delivered, #rendered {
+    display: none;
+}
+#diff-result {
+    white-space: pre-wrap;
+    font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+}
+</style>
+@endsection
+
+@section('content')
+<div class="results_main_contain">
+    <div class="results_main">
+        <div class="results_and_command">
+            <div class="results_header">
+                <h2>HTML Diff</h2>
+            </div>
+        </div>
+        @if ($error_message)
+            <div id="result" class="results_body error-banner">
+                <div>{{ $error_message }}</div>
+            </div>
+        @else
+        <label>
+            <input type="checkbox" id="prettier">
+            Run Prettier before the diff
+        </label>
+        <div id="result" class="results_body @if ($error_message) error-banner @endif">
+            <div class="overflow-container">
+                <pre id="diff-result"></pre>
+            </div>
+            <pre id="delivered">{{$delivered_html}}</pre>
+            <pre id="rendered">{{$rendered_html}}</pre>
+        </div>
+        <script src="/assets/js/vendor/diff.min.js"></script>
+        <script type="module">
+            async function diff() {
+                let before = document.getElementById('delivered').innerText;
+                let after = document.getElementById('rendered').innerText;
+                if (document.getElementById('prettier').checked) {
+                    await import("/assets/js/vendor/prettier-standalone.min.js");
+                    await import("/assets/js/vendor/prettier-parser-html.min.js");
+                    await import("/assets/js/vendor/prettier-parser-babel.min.js");
+                    await import("/assets/js/vendor/prettier-parser-postcss.min.js");
+                    const opts = {
+                        parser: "html",
+                        plugins: prettierPlugins,
+                    };
+                    before = prettier.format(before, opts);
+                    after = prettier.format(after, opts);
+                }
+
+                const diff = Diff.diffLines(before, after);
+                const fragment = document.createDocumentFragment();
+                for (let i = 0; i < diff.length; i++) {
+
+                    if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
+                        let swap = diff[i];
+                        diff[i] = diff[i + 1];
+                        diff[i + 1] = swap;
+                    }
+
+                    let node;
+                    if (diff[i].removed) {
+                        node = document.createElement('del');
+                        node.appendChild(document.createTextNode(diff[i].value));
+                    } else if (diff[i].added) {
+                        node = document.createElement('ins');
+                        node.appendChild(document.createTextNode(diff[i].value));
+                    } else {
+                        node = document.createTextNode(diff[i].value);
+                    }
+                    fragment.appendChild(node);
+                }
+                document.getElementById('diff-result').innerHTML = '';
+                document.getElementById('diff-result').appendChild(fragment);
+            }
+            diff();
+            document.getElementById('prettier').addEventListener('change', diff);
+        </script>
+        @endif
+
+    </div>
+</div>
+
+@endsection