Merge branch 'master' into dirmenot

catchpoint · Jan 10, 2023 · 1eeaa4d · 1eeaa4d
2 parents 906fafd + a8d9b37
commit 1eeaa4d
Show file tree

Hide file tree

Showing 24 changed files with 171 additions and 60 deletions.
diff --git a/www/assets/css/account.css b/www/assets/css/account.css
@@ -2383,3 +2383,12 @@ form:invalid button[type="submit"] {
   width: 158px !important;
 }
 /** END Chargify form **/
+
+/** ApiKeyForm **/
+.apikey-control button[aria-disabled=true],
+[data-apikey-form-submit][aria-disabled] {
+  opacity: 0.3;
+  pointer-events: none;
+  cursor: auto;
+}
+/** END APiKeyForm **/
diff --git a/www/assets/css/pagestyle2.css b/www/assets/css/pagestyle2.css
@@ -4295,6 +4295,7 @@ table.checklist td {
 .history td.location {
   white-space: nowrap;
   max-width: 10vw;
+  overflow: auto;
 }
 
 .history td.url {
@@ -8633,8 +8634,14 @@ wpt-header .wptheader_nav_menu_section a.banner_lfwp:hover {
 }
 
 .glossary dt {
-  font-weight: bold;
   padding: 10px 0;
+  font-weight: 300;
+  font-size: 0.8em;
+  text-transform: uppercase;
+}
+
+.glossary dd {
+  margin-left: 0;
 }
 
 .glossary li {
@@ -8652,6 +8659,13 @@ wpt-header .wptheader_nav_menu_section a.banner_lfwp:hover {
 .table-cell-error {
   background: red;
 }
+
+.scrollableLine {
+  overflow: scroll;
+  height: 2em;
+  white-space: nowrap;
+}
+
 /* Prism.js overwrite */
 pre[class*="language-"] {
   background: none !important;

diff --git a/www/assets/js/account.js b/www/assets/js/account.js
@@ -532,6 +532,30 @@
   window.DeleteApiKeyBoxSet = DeleteApiKeyBoxSet;
 })(window);
 
+((window) => {
+  class ApiKeyForm {
+    constructor(element) {
+      this.form = element;
+      const formType = element.getAttribute('data-apikey-form');
+      const submitButton = document.querySelector(`[data-apikey-form-submit=${formType}]`);
+      this.submit = submitButton ? submitButton : element.querySelector('[type=submit]');
+
+      this.form.addEventListener('submit', this.preventDoubleClick.bind(this));
+    }
+    preventDoubleClick(e) {
+      e.preventDefault();
+      this.submit.classList.add("disabled");
+      this.submit.setAttribute("disabled", "disabled");
+      this.submit.setAttribute("aria-disabled", "true");
+      this.submit.disabled = true;
+      this.submit.textContent = "Submitting...";
+      this.form.submit();
+    }
+  }
+
+  window.ApiKeyForm = ApiKeyForm;
+})(window);
+
 /**
  * Attach all the listeners
  */
@@ -703,6 +727,11 @@
       new DeleteApiKeyBoxSet(deleteApiKeyBoxes[i]);
     }
 
+    const apiKeyForms = document.querySelectorAll('form[data-apikey-form]');
+    for (let i = 0; i < apiKeyForms.length; i++) {
+      new ApiKeyForm(apiKeyForms[i]);
+    }
+
     attachListenerToBillingFrequencySelector();
     handleRunUpdate();
   }

diff --git a/www/assets/js/test.js b/www/assets/js/test.js
@@ -116,8 +116,6 @@ function ValidateInput(form, remainingRuns) {
 })(jQuery);
 
 function RestoreSettings() {
-  if (wptStorage["testVideo"] != undefined)
-    $("#videoCheck").prop("checked", wptStorage["testVideo"]);
   if (wptStorage["testTimeline"] != undefined)
     $("#timeline").prop("checked", wptStorage["testTimeline"]);
   if (wptStorage["testLoc"] != undefined)
@@ -127,7 +125,6 @@ function RestoreSettings() {
 }
 
 function SaveSettings() {
-  wptStorage["testVideo"] = $("#videoCheck").is(":checked");
   wptStorage["testTimeline"] = $("#timeline").is(":checked");
 }
 

diff --git a/www/details.php b/www/details.php
@@ -145,37 +145,14 @@ function createForm($formName, $btnText, $id, $owner, $secret)
                 echo $userTimingTable->create(true);
 
 
-                // Full custom metrics (formerly in custommetrics.php)
-
-                if (
-                    isset($pageData) &&
-                    is_array($pageData) &&
-                    array_key_exists($run, $pageData) &&
-                    is_array($pageData[$run]) &&
-                    array_key_exists($cached, $pageData[$run]) &&
-                    array_key_exists('custom', $pageData[$run][$cached]) &&
-                    is_array($pageData[$run][$cached]['custom']) &&
-                    count($pageData[$run][$cached]['custom'])
-                ) {
-                    echo '<details class="details_custommetrics"><summary>Custom Metrics Data</summary>';
-                    echo '<div class="scrollableTable"><table class="pretty details">';
-                    foreach ($pageData[$run][$cached]['custom'] as $metric) {
-                        if (array_key_exists($metric, $pageData[$run][$cached])) {
-                            echo '<tr><th>' . htmlspecialchars($metric) . '</th><td>';
-                            $val = $pageData[$run][$cached][$metric];
-                            if (!is_string($val) && !is_numeric($val)) {
-                                $val = json_encode($val);
-                            }
-                            echo htmlspecialchars($val);
-                            echo '</td></tr>';
-                        }
-                    }
-                    echo '</table></details>';
+                // Full custom metrics
+                $customPageData = @$pageData[$run][$cached]['custom'];
+                if (!empty($customPageData) && is_array($customPageData)) {
+                    echo view('partials.custommetrics', [
+                        'data' => $pageData[$run][$cached],
+                    ]);
                 }
 
-
-
-
                 if (isset($testRunResults)) {
                     echo '<div class="cruxembed">';
                     require_once(INCLUDES_PATH . '/include/CrUX.php');

diff --git a/www/experiments.php b/www/experiments.php
@@ -777,7 +777,7 @@ function updateTestRunTotal(){
         btn.innerText = "Expand All"; 
         section.append(btn);
         btn.addEventListener("click", () => { 
-            this.closest(".util_overflow_more").className.add("util_overflow_more-expanded");
+            btn.closest(".util_overflow_more").classList.add("util_overflow_more-expanded");
         });
     });
 

diff --git a/www/experiments/cdn.inc b/www/experiments/cdn.inc
@@ -0,0 +1,36 @@
+<?php
+
+$category = "Quick";
+$pageData = $testStepResult->getRawResults();
+$needCDN = array();
+if (isset($pageData['score_cdn']) ) {
+    foreach ($requests as $index => &$request) {
+        if (isset($request['score_cdn']) && $request['score_cdn'] >= 0 && $request['score_cdn'] < 100) {
+            $key = $request['host'] . ' ' . $index;
+            $proto = 'http://';
+            if ($request['is_secure']) {
+                $proto = 'https://';
+            }
+            $value = $proto . $request['host'] . $request['url'];
+            $needCDN[$key] = $value;
+        } 
+    }
+    ksort($needCDN);
+}
+
+
+if (count($needCDN) > 0) {
+    $assessment[$category]["opportunities"][] = array(
+        "title" =>  count($needCDN) . " file" . (count($needCDN) > 1 ? "s were" : " is") . " hosted without using a CDN.",
+        "desc" =>  "A Content Delivery Network (CDN) distributes a website's files throughout the world, reducing request latency. These files do not use a CDN:",
+        "examples" =>  $needCDN,
+        "good" =>  false
+    );
+} else {
+    $assessment[$category]["opportunities"][] = array(
+        "title" =>  'This site uses a CDN for delivering its files.',
+        "desc" =>  "A Content Delivery Network (CDN) distributes a website's files throughout the world, reducing request latency.",
+        "examples" =>  array(),
+        "good" =>  true
+    );
+}
diff --git a/www/experiments/common.inc b/www/experiments/common.inc
@@ -123,6 +123,7 @@ include __DIR__ . '/imgs-lazy-loadable.inc';
 include __DIR__ . '/font-rendering.inc';
 include __DIR__ . '/fonts-3rdparty.inc';
 include __DIR__ . '/unused-preloads.inc';
+include __DIR__ . '/cdn.inc';
 include __DIR__ . '/http-redirects.inc';
 
 // usable

diff --git a/www/home.php b/www/home.php
@@ -539,9 +539,6 @@ function enableDisableLHSimple(){
                                                                                                                                 } ?> value="1">First View Only</label>
                                                     </fieldset>
                                                 </li>
-                                                <li>
-                                                    <label for="videoCheck"><input type="checkbox" name="video" id="videoCheck" class="checkbox" checked=checked> Capture Video</label>
-                                                </li>
                                                 <?php if ($is_paid) : ?>
                                                     <li>
                                                         <label for="private-advanced"><input type="checkbox" name="private" id="private-advanced" class="checkbox"> Make Test Private</label>

diff --git a/www/include/CrUX.php b/www/include/CrUX.php
@@ -88,13 +88,13 @@ function RealUserMeasurementCruxTitle($pageData)
         $startDate = date('F j\, Y', mktime(0, 0, 0, $firstDate['month'], $firstDate['day'], $firstDate['year']));
         $endDate = date('F j\, Y', mktime(0, 0, 0, $lastDate['month'], $lastDate['day'], $lastDate['year']));
         // Example: Real User Measurements (Collected anonymously by Chrome browser via Chrome User Experience Report, between October 15, 2022 and September 18, 2022)
-        return sprintf('<h3 class="hed_sub"> 
-                            Real User Measurements 
+        return sprintf('<h3 class="hed_sub">
+                            Real User Measurements
                             <em>(Collected anonymously by Chrome browser via Chrome User Experience Report, between %s and %s)</em>
                         </h3>', $startDate, $endDate);
     } else {
-        return '<h3 class="hed_sub"> 
-                    Real User Measurements 
+        return '<h3 class="hed_sub">
+                    Real User Measurements
                     <em>(Collected anonymously by Chrome browser via Chrome User Experience Report)</em>
                 </h3>';
     }
@@ -216,6 +216,7 @@ function InsertCruxMetricImage($label, $short, $histogram, $p75, $fvValue, $rvVa
     }
     $goodPct = intval(round($histogram[0]['density'] * 100));
     $fairPct = intval(round($histogram[1]['density'] * 100));
+    $poorPct = intval(round($histogram[2]['density'] * 100));
     $poorStart = $goodPct + $fairPct;
     $poorPct = 100 - $poorStart;
     $goodText = '';
@@ -264,9 +265,9 @@ function InsertCruxMetricImage($label, $short, $histogram, $p75, $fvValue, $rvVa
     $svg = <<<EOD
 <svg viewBox="0 0 $image_width 80" version='1.1' xmlns='http://www.w3.org/2000/svg'>
 <svg x='10' width='$width' y='30' height='25'>
-    <rect x='0' width='100%' height='100%' fill='#009316' />
-    <rect x='$goodPct%' width='100%' height='100%' fill='#ffa400' />
-    <rect x='$poorStart%' width='100%' height='100%' fill='#ff4e42' />
+    <rect x='0' width='100%' height='100%' fill='#009316'><title>$goodPct%</title></rect>
+    <rect x='$goodPct%' width='100%' height='100%' fill='#ffa400'><title>$fairPct%</title></rect>
+    <rect x='$poorStart%' width='100%' height='100%' fill='#ff4e42'><title>$poorPct%</title></rect>
     $goodText
     $fairText
     $poorText

diff --git a/www/include/PerformanceOptimizationHtmlSnippet.php b/www/include/PerformanceOptimizationHtmlSnippet.php
@@ -97,7 +97,7 @@ private function _createChecklistTableSnippet()
             ];
         }
 
-        return view('snippets.optimizationchecklist', [
+        return view('partials.optimizationchecklist', [
             'headers' => $headers,
             'pageData' => $this->stepResult->getRawResults(),
             'rows' => $rows,

diff --git a/www/jsonResult.php b/www/jsonResult.php
@@ -95,7 +95,13 @@
         ArchiveApi($id);
     }
 
-    json_response($ret);
+    if (!empty($_REQUEST['highlight'])) {
+        echo view('jsonhighlight', [
+            'json' => json_encode($ret, JSON_PRETTY_PRINT),
+        ]);
+    } else {
+        json_response($ret);
+    }
 }
 
 function getRequestInfoFlags()

diff --git a/www/performance_optimization.php b/www/performance_optimization.php
@@ -124,7 +124,7 @@
 
             <h3 class="hed_sub">Glossary</h3>
             <?php
-                echo view('snippets.glossary', []);
+                echo view('partials.glossary', []);
             ?>
 
         </div>

diff --git a/www/resources/views/jsonhighlight.blade.php b/www/resources/views/jsonhighlight.blade.php
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>WebPageTest JSON</title>
+    <link rel="stylesheet" type="text/css" href="/assets/css/vendor/prism-1.29.0.css">
+    <script src="/assets/js/vendor/prism-1.29.0.js" async></script>
+    <style>
+        pre {
+            background: none !important;
+            padding: 1em;
+            margin: .5em 0;
+        }
+    </style>
+</head>
+
+<body>
+    <pre><code class="language-js">{{ $json }}</code></pre>
+</body>
+
+</html>
diff --git a/www/resources/views/pages/lighthouse.blade.php b/www/resources/views/pages/lighthouse.blade.php
@@ -68,7 +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. Overall scoring color key: 
+                    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>).
@@ -187,7 +187,7 @@ function copySelector(selector) {
                             <h4>{{ $groupTitles[$cat_id] }} ({{ count($cat_audits) }})</h4>
                             <ol>
                                 @foreach ($cat_audits as $audit)
-                                @include('partials.audititem')
+                                @include('partials.lighthouse.audititem')
                                 @endforeach
                             </ol>
                             @endif

diff --git a/www/resources/views/partials/custommetrics.blade.php b/www/resources/views/partials/custommetrics.blade.php
@@ -0,0 +1,17 @@
+<details class="details_custommetrics">
+    <summary>Custom Metrics Data</summary>
+    <dl class="glossary">
+        @foreach ($data['custom'] as $metric)
+            @if (array_key_exists($metric, $data))
+            <dt>{{ $metric }}</dt>
+            <dd class="scrollableLine">
+                @if (!is_string($data[$metric]) && !is_numeric($data[$metric]))
+                    {{ json_encode($data[$metric]) }}
+                @else
+                    {{ $data[$metric] }}
+                @endif
+            </dd>
+            @endif
+        @endforeach
+    </dl>
+</details>
diff --git a/...sources/views/snippets/glossary.blade.php → ...sources/views/partials/glossary.blade.php b/...sources/views/snippets/glossary.blade.php → ...sources/views/partials/glossary.blade.php
diff --git a/.../views/partials/auditExperiment.blade.php → ...ials/lighthouse/auditExperiment.blade.php b/.../views/partials/auditExperiment.blade.php → ...ials/lighthouse/auditExperiment.blade.php
diff --git a/...ources/views/partials/audititem.blade.php → ...s/partials/lighthouse/audititem.blade.php b/...ources/views/partials/audititem.blade.php → ...s/partials/lighthouse/audititem.blade.php
@@ -2,7 +2,12 @@
     <details>
         <summary>
             <div class="summary_text">
-                <div>{!! md($audit->title) !!}@if($audit->relevantExperiment) @include('partials.auditExperiment') @endif</div>
+                <div>
+                    {!! md($audit->title) !!}
+                    @if($audit->relevantExperiment)
+                        @include('partials.lighthouse.auditExperiment')
+                    @endif
+                </div>
                 @if ($audit->displayValue)
                     @if (isset($audit->details->overallSavingsMs) && $audit->details->overallSavingsMs > 0)
                     <p>Estimated savings {{ round($audit->details->overallSavingsMs / 1000, 2) }} s</p>
@@ -21,7 +26,7 @@
                 @endif
 
                 @if ($audit->details)
-                @include('partials.details')
+                @include('partials.lighthouse.details')
                 @endif
             </div>
     </details>

diff --git a/...esources/views/partials/details.blade.php → ...ews/partials/lighthouse/details.blade.php b/...esources/views/partials/details.blade.php → ...ews/partials/lighthouse/details.blade.php
@@ -1,6 +1,6 @@
 @if ($audit->details->type === "criticalrequestchain")
 <ol class="lh-chain">
-    @each('partials.requestchain', $audit->details->chains, 'chain')
+    @each('partials.lighthouse.requestchain', $audit->details->chains, 'chain')
 </ol>
 @endif
 @if (count($audit->details->headings) && ($audit->details->type === "table" || $audit->details->type === "opportunity") )

diff --git a/...ces/views/partials/requestchain.blade.php → ...artials/lighthouse/requestchain.blade.php b/...ces/views/partials/requestchain.blade.php → ...artials/lighthouse/requestchain.blade.php
@@ -11,7 +11,7 @@
     </span>
     @if ($chain->children)
     <ol>
-        @each('partials.requestchain', $chain->children, 'chain')
+        @each('partials.lighthouse.requestchain', $chain->children, 'chain')
     </ol>
     @endif
 </li>
diff --git a/.../snippets/optimizationchecklist.blade.php → .../partials/optimizationchecklist.blade.php b/.../snippets/optimizationchecklist.blade.php → .../partials/optimizationchecklist.blade.php
-Original file line number
+Diff line change
@@ Expand Up / @@ -124,7 +124,7 @@ @@
                 <h3 class="hed_sub">Glossary</h3>
                 <?php
-                    echo view('snippets.glossary', []);
+                    echo view('partials.glossary', []);
                 ?>
             </div>
@@ Expand Down @@