Repository: catchpoint/WebPageTest (language: php)

Issue:
Adjust Lighthouse scoring key description so that it is not misleading about score source
per @connorjclark's note: 

>  top-line description of category score will actively mislead users that Performance category audits impact score directly ("Category scores summarize their contained audits") 

<img width="974" alt="image" src="https://user-images.githubusercontent.com/214783/207895577-0daffc33-b160-4f37-bc1c-5c2d45b878e3.png">





Discussion / hints:

Fix patch:
diff --git a/www/assets/js/conditional_metrics/generated-html.js b/www/assets/js/conditional_metrics/generated-html.js
new file mode 100644
index 0000000000..08ee33ee38
--- /dev/null
+++ b/www/assets/js/conditional_metrics/generated-html.js
@@ -0,0 +1,26 @@
+// this is similar to rendered-html metric
+// except it includes doctype and
+// rewrites CSS only conditionally
+const clonedDoc = document.cloneNode(true);
+const clonedStyles = clonedDoc.querySelectorAll("style")
+let styles = document.querySelectorAll("style").forEach((style, idx) => {
+  let generatedCSS = "";
+  for (let i in style.sheet.cssRules) {
+    if (style.sheet.cssRules[i] && style.sheet.cssRules[i].cssText) {
+      generatedCSS += style.sheet.cssRules[i].cssText + "\n";
+    }
+  }
+  if (!generatedCSS) {
+    return;
+  }
+  // just count the }s before and after as a rough idea if the inner style was CSSOM'd
+  if (generatedCSS.split("}").length !== style.textContent.split("}").length) {
+    clonedStyles[idx].textContent =
+      "/* inner styles set by WPT to match CSSOM */\n" + generatedCSS;
+  }
+});
+let doctype = new XMLSerializer().serializeToString(clonedDoc.doctype);
+if (doctype) {
+  doctype += "\n";
+}
+return doctype + clonedDoc.documentElement.outerHTML;
diff --git a/www/resources/views/pages/lighthouse.blade.php b/www/resources/views/pages/lighthouse.blade.php
index 0bad310202..8d7d9d7483 100644
--- a/www/resources/views/pages/lighthouse.blade.php
+++ b/www/resources/views/pages/lighthouse.blade.php
@@ -68,8 +68,7 @@ function copySelector(selector) {
                 <p>
 
                     Lighthouse is an open-source, automated tool for improving the quality of web pages.
-                    You can run it against any web page, public or requiring authentication. Category scores
-                    summarize their contained audits
+                    You can run it against any web page, public or requiring authentication. Overall scoring color key: 
                     (<span class="lh_score_grade-fail">0-49</span>
                     <span class="lh_score_grade-average">50-89</span>
                     <span class="lh_score_grade-pass">90-100</span>).
@@ -202,4 +201,4 @@ function copySelector(selector) {
     </div>
 
 </div>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/www/settings/custom_metrics/doctype.js b/www/settings/custom_metrics/doctype.js
deleted file mode 100644
index 94ed4a3ad9..0000000000
--- a/www/settings/custom_metrics/doctype.js
+++ /dev/null
@@ -1,1 +0,0 @@
-return new XMLSerializer().serializeToString(document.doctype);


Test patch:
diff --git a/www/runtest.php b/www/runtest.php
index 3d50a47c66..bd1f02474d 100644
--- a/www/runtest.php
+++ b/www/runtest.php
@@ -662,11 +662,19 @@
         $test['block'] .= ' adsWrapper.js adsWrapperAT.js adsonar.js sponsored_links1.js switcher.dmn.aol.com';
     }
 
+    if ($test['bodies']) {
+        $test['customMetrics'] = array();
+        $code = file_get_contents(ASSETS_PATH . '/js/conditional_metrics/generated-html.js');
+        $test['customMetrics']['generated-html'] = $code;
+    }
+
     // see if there are any custom metrics to extract
     if (is_dir('./settings/custom_metrics')) {
         $files = glob('./settings/custom_metrics/*.js');
         if ($files !== false && is_array($files) && count($files)) {
-            $test['customMetrics'] = array();
+            if (!isset($test['customMetrics'])) {
+                $test['customMetrics'] = array();
+            }
             foreach ($files as $file) {
                 $name = basename($file, '.js');
                 $code = file_get_contents($file);