From c48c3cb024bbe7c5da3f1e1d67b18bac786159cd Mon Sep 17 00:00:00 2001
From: Stoyan Stefanov <stoyan@yahoo.com>
Date: Mon, 12 Sep 2022 21:28:32 +0000
Subject: [PATCH 1/3] Read/write waterfall customizations to a permalink

---
 www/assets/css/pagestyle2.css |   5 -
 www/customWaterfall.php       | 185 +++++++++++++++++++---------------
 2 files changed, 105 insertions(+), 85 deletions(-)

diff --git a/www/assets/css/pagestyle2.css b/www/assets/css/pagestyle2.css
index f9a56f6d1c..f7320e6aa0 100644
--- a/www/assets/css/pagestyle2.css
+++ b/www/assets/css/pagestyle2.css
@@ -8764,11 +8764,6 @@ div.bar {
   margin: 1rem 0;
 }
 
-.details_panel button {
-  display: none;
-  /* necessary button? does non-js work anyway? */
-}
-
 .customwaterfall_hed {
   padding: 0 1.5rem;
 }
diff --git a/www/customWaterfall.php b/www/customWaterfall.php
index 1f1eb4833c..f8ee4fb128 100644
--- a/www/customWaterfall.php
+++ b/www/customWaterfall.php
@@ -38,7 +38,7 @@
         <h1>Generate a Custom Waterfall</h1>
         <details open class="box details_panel">
             <summary class="details_panel_hed"><span><i class="icon_plus"></i> <span>Waterfall Settings</span></span></summary>
-            <form class="details_panel_content" name="urlEntry" action="javascript:UpdateWaterfall();" method="GET">
+            <form class="details_panel_content" id="details_form" action="javascript:UpdateWaterfall();" method="GET">
                 <fieldset>
                     <legend>Chart Type</legend>
                     <label><input type="radio" name="type" value="waterfall" checked>Waterfall</label>
@@ -46,43 +46,78 @@
                 </fieldset>
                 <fieldset>
                     <legend>Chart Coloring</legend>
-                    <label><input type="radio" name="coloring" value="classic"> Classic</label>
-                    <label><input type="radio" name="coloring" value="mime" checked="checked"> By MIME Type</label>
+                    <label><input type="radio" name="mime" value="0"> Classic</label>
+                    <label><input type="radio" name="mime" value="1" checked="checked"> By MIME Type</label>
                 </fieldset>
                 <fieldset>
-                    <label>Image Width <em>(Pixels, 300-2000)</em>: <input id="width" type="text" name="width" style="width:3em" value="930"></label>
+                    <label>Image Width <em>(Pixels, 300-2000)</em>: <input id="width" type="text" name="width" style="width:3em" value="1012"></label>
                     <label>Maximum Time <em>(In seconds, leave blank for automatic)</em>: <input id="max" type="text" name="max" style="width:2em" value=""></label>
                     <label>Requests <em>(i.e. 1,2,3,4-9,8)</em>: <input id="requests" type="text" name="requests" value=""></label>
                 </fieldset>
                 <fieldset>
                     <legend>Show/Hide Extras</legend>
-                    <label><input id="showUT" type="checkbox" checked>Lines for User Timing Marks</label>
-                    <label><input id="showCPU" type="checkbox" checked>CPU Utilization</label>
-                    <label><input id="showBW" type="checkbox" checked>Bandwidth Utilization</label>
-                    <label><input id="showLT" type="checkbox" checked>Long tasks</label>
-                    <label><input id="showDots" type="checkbox" checked>Ellipsis (...) for missing items</label>
-                    <label><input id="showLabels" type="checkbox" checked>Labels for requests (URL)</label>
-                    <label><input id="showChunks" type="checkbox" checked>Download chunks</label>
-                    <label><input id="showJS" type="checkbox" checked>JS Execution chunks</label>
-                    <label><input id="showWait" type="checkbox" checked>Wait Time</label>
+                    <label><input id="ut" type="checkbox" checked>Lines for User Timing Marks</label>
+                    <label><input id="cpu" type="checkbox" checked>CPU Utilization</label>
+                    <label><input id="bw" type="checkbox" checked>Bandwidth Utilization</label>
+                    <label><input id="lt" type="checkbox" checked>Long tasks</label>
+                    <label><input id="dots" type="checkbox" checked>Ellipsis (...) for missing items</label>
+                    <label><input id="labels" type="checkbox" checked>Labels for requests (URL)</label>
+                    <label><input id="chunks" type="checkbox" checked>Download chunks</label>
+                    <label><input id="js" type="checkbox" checked>JS Execution chunks</label>
+                    <label><input id="wait" type="checkbox" checked>Wait Time</label>
                 </fieldset>
-                <button id="update" onclick="javascript:UpdateWaterfall();">Update Waterfall</button><br>
+                <a href="#" id="customized-permalink">Permalink to this waterfall page</a>
             </form>
         </details>
     </div>
     <div class="box">
 
         <?php
-
+        $uri_params = [
+            'max' => '',
+            'width' => 1012,
+            'type' => 'waterfall',
+            'mime' => 1,
+            'ut' => 1,
+            'cpu' => 1,
+            'bw' => 1,
+            'lt' => 1,
+            'dots' => 1,
+            'labels' => 1,
+            'chunks' => 1,
+            'js' => 1,
+            'wait' => 1,
+            'requests' => '',
+        ];
+        $server_params = [
+            'test' => $id,
+            'run' => $run,
+            'cached' => $cached,
+            'step' => $step,
+        ];
+        $request_params = [];
+        foreach ($server_params as $key => $default) {
+            $request_params[$key] = $default;
+            if (array_key_exists($param, $_REQUEST)) {
+                $request_params[$param] = $_REQUEST[$param];
+            }
+        }
+        foreach ($uri_params as $key => $default) {
+            $request_params[$key] = $default;
+            if (array_key_exists($key, $_REQUEST)) {
+                $request_params[$key] = $_REQUEST[$key];
+            }
+        }
+        $query_string = http_build_query($request_params);
         $waterfallSnippet = new WaterfallViewHtmlSnippet($testInfo, $testRunResults->getStepResult(1));
-        echo $waterfallSnippet->create(true, '&cpu=1&bw=1&lt=1&ut=1&mime=1&js=1&wait=1');
+        echo $waterfallSnippet->create(true, $query_string);
 
         $extension = 'php';
         if (FRIENDLY_URLS) {
             $extension = 'png';
         }
-        echo "<div class=\"waterfall-container\"><img id=\"waterfallImage\" style=\"display: block; margin-left: auto; margin-right: auto;\" alt=\"Waterfall\" src=\"/waterfall.$extension?test=$id&run=$run&cached=$cached&step=$step&cpu=1&bw=1&lt=1&ut=1&mime=1&js=1&wait=1\"></div>";
-        echo "<p class=\"customwaterfall_download\"><a class=\"pill\" download href=\"/waterfall.$extension?test=$id&run=$run&cached=$cached&step=$step&cpu=1&bw=1&lt=1&ut=1&mime=1&js=1&wait=1\">Download Waterfall Image</a></p>";
+        echo "<div class=\"waterfall-container\"><img id=\"waterfallImage\" style=\"display: block; margin-left: auto; margin-right: auto;\" alt=\"Waterfall\" src=\"/waterfall.$extension?$query_string\"></div>";
+        echo "<p class=\"customwaterfall_download\"><a class=\"pill\" download href=\"/waterfall.$extension?$query_string\">Download Waterfall Image</a></p>";
 
         ?>
     </div>
@@ -90,6 +125,30 @@
 
 
     <script>
+        const details_form = document.getElementById('details_form');
+        const permalink = document.getElementById('customized-permalink');
+        permalink.href = location.origin + location.pathname + '?<?php echo $query_string; ?>';
+
+        const formInputs = ['<?php echo implode("', '", array_keys($uri_params));?>'];
+        const serverData = {
+            test: '<?php echo $id; ?>',
+            run: <?php echo (int)$run; ?>,
+            cached: <?php echo (int)$cached; ?>,
+            step: <?php echo (int)$step; ?>,
+        };
+        const requestParams = <?php echo json_encode($request_params); ?>;
+
+        formInputs.forEach(i => {
+            const inputElement = details_form[i];
+            if (inputElement.type === 'checkbox') {
+                inputElement.checked = requestParams[i] == 1;
+            } else {
+                inputElement.value = requestParams[i];
+            }
+        });
+
+
+
         $(document).ready(function() {
 
             // handle when the selection changes for the location
@@ -104,7 +163,7 @@
                 UpdateWaterfall();
             });
 
-            $("input[name=coloring], input[type=checkbox]").click(UpdateWaterfall);
+            $("input[name=mime], input[type=checkbox]").click(UpdateWaterfall);
             $("input[type=text]:not(#requests)").on("input", UpdateWaterfall);
             $("input#requests").on("change", UpdateWaterfall);
 
@@ -115,71 +174,37 @@
             });
         });
 
+
+
+        function getFormParams() {
+            const params = {};
+            Object.keys(serverData).forEach(k => params[k] = serverData[k]);
+            formInputs.forEach(i => {
+                const inputElement = details_form[i];
+                if (inputElement.type === 'checkbox') {
+                    params[i] = inputElement.checked === true ? 1 : 0;
+                } else {
+                    params[i] = inputElement.value;
+                }
+            });
+            console.log(params);
+            return params;
+        }
+
         function UpdateWaterfall() {
             $('body').css('cursor', 'wait');
-            var type = $('input[name=type]:checked').val();
-            var coloring = $('input[name=coloring]:checked').val();
-            var mime = 0;
-            if (coloring == 'mime')
-                mime = 1;
-            var width = $('#width').val();
-            var max = $('#max').val();
-            var requests = $('#requests').val();
-            var showUT = 0;
-            if ($('#showUT').attr('checked'))
-                showUT = 1;
-            var showCPU = 0;
-            if ($('#showCPU').attr('checked'))
-                showCPU = 1;
-            var showBW = 0;
-            if ($('#showBW').attr('checked'))
-                showBW = 1;
-            var showLT = 0;
-            if ($('#showLT').attr('checked'))
-                showLT = 1;
-            var showDots = 0;
-            if ($('#showDots').attr('checked'))
-                showDots = 1;
-            var showLabels = 0;
-            if ($('#showLabels').attr('checked'))
-                showLabels = 1;
-            var showChunks = 0;
-            if ($('#showChunks').attr('checked'))
-                showChunks = 1;
-            var showJS = 0;
-            if ($('#showJS').attr('checked'))
-                showJS = 1;
-            var showWait = 0;
-            if ($('#showWait').attr('checked'))
-                showWait = 1;
-            <?php
-            echo "var testId='$id';\n";
-            echo "var testRun='$run';\n";
-            echo "var cached='$cached';\n";
-            echo "var extension='$extension';\n";
-            echo "var step='$step';\n";
-            ?>
-
-            var src = '/waterfall.' + extension + '?test=' + testId +
-                '&run=' + testRun +
-                '&cached=' + cached +
-                '&step=' + step +
-                '&max=' + max +
-                '&width=' + width +
-                '&type=' + type +
-                '&mime=' + mime +
-                '&ut=' + showUT +
-                '&cpu=' + showCPU +
-                '&bw=' + showBW +
-                '&lt=' + showLT +
-                '&dots=' + showDots +
-                '&labels=' + showLabels +
-                '&chunks=' + showChunks +
-                '&js=' + showJS +
-                '&wait=' + showWait +
-                '&requests=' + requests;
+
+            const params = getFormParams();
+            let search = '?';
+            Object.keys(params).forEach(param => {
+                search += param + '=' + encodeURIComponent(params[param]) + '&';
+            });
+
+            const extension = '<?php echo $extension; ?>';
+            const src = '/waterfall.' + extension + search;
             $('#waterfallImage').attr("src", src);
             $('.customwaterfall_download a').attr("href", src);
+            permalink.href = location.origin + location.pathname + search;
         };
     </script>
 </body>

From 32921484867cfbdf26c6c1eb5cea8163ff579ec5 Mon Sep 17 00:00:00 2001
From: Stoyan Stefanov <stoyan@yahoo.com>
Date: Mon, 12 Sep 2022 21:29:47 +0000
Subject: [PATCH 2/3] Remove forgotten console.log and new lines

---
 www/customWaterfall.php | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/www/customWaterfall.php b/www/customWaterfall.php
index f8ee4fb128..fd6dbba1f4 100644
--- a/www/customWaterfall.php
+++ b/www/customWaterfall.php
@@ -123,7 +123,6 @@
     </div>
     <?php include('footer.inc'); ?>
 
-
     <script>
         const details_form = document.getElementById('details_form');
         const permalink = document.getElementById('customized-permalink');
@@ -147,8 +146,6 @@
             }
         });
 
-
-
         $(document).ready(function() {
 
             // handle when the selection changes for the location
@@ -174,8 +171,6 @@
             });
         });
 
-
-
         function getFormParams() {
             const params = {};
             Object.keys(serverData).forEach(k => params[k] = serverData[k]);
@@ -187,7 +182,6 @@ function getFormParams() {
                     params[i] = inputElement.value;
                 }
             });
-            console.log(params);
             return params;
         }
 

From a6ee0097ce57b85061f1615645c98972e5ea05df Mon Sep 17 00:00:00 2001
From: Stoyan Stefanov <stoyan@yahoo.com>
Date: Tue, 13 Sep 2022 00:35:43 +0000
Subject: [PATCH 3/3] buh-bye jQuery and other finishing touches

---
 www/customWaterfall.php | 43 +++++++++++++----------------------------
 1 file changed, 13 insertions(+), 30 deletions(-)

diff --git a/www/customWaterfall.php b/www/customWaterfall.php
index fd6dbba1f4..b15835ec02 100644
--- a/www/customWaterfall.php
+++ b/www/customWaterfall.php
@@ -38,11 +38,11 @@
         <h1>Generate a Custom Waterfall</h1>
         <details open class="box details_panel">
             <summary class="details_panel_hed"><span><i class="icon_plus"></i> <span>Waterfall Settings</span></span></summary>
-            <form class="details_panel_content" id="details_form" action="javascript:UpdateWaterfall();" method="GET">
+            <form class="details_panel_content" id="details_form" action="javascript:updateWaterfall();" method="GET">
                 <fieldset>
                     <legend>Chart Type</legend>
                     <label><input type="radio" name="type" value="waterfall" checked>Waterfall</label>
-                    <label><input type="radio" name="type" value="connection"> Connection View</label>
+                    <label><input type="radio" name="type" value="connection">Connection View</label>
                 </fieldset>
                 <fieldset>
                     <legend>Chart Coloring</legend>
@@ -117,7 +117,7 @@
             $extension = 'png';
         }
         echo "<div class=\"waterfall-container\"><img id=\"waterfallImage\" style=\"display: block; margin-left: auto; margin-right: auto;\" alt=\"Waterfall\" src=\"/waterfall.$extension?$query_string\"></div>";
-        echo "<p class=\"customwaterfall_download\"><a class=\"pill\" download href=\"/waterfall.$extension?$query_string\">Download Waterfall Image</a></p>";
+        echo "<p class=\"customwaterfall_download\"><a id=\"waterfallImageLink\" class=\"pill\" download href=\"/waterfall.$extension?$query_string\">Download Waterfall Image</a></p>";
 
         ?>
     </div>
@@ -145,30 +145,12 @@
                 inputElement.value = requestParams[i];
             }
         });
+        details_form.requests.disabled = details_form.type.value === 'connection';
 
-        $(document).ready(function() {
-
-            // handle when the selection changes for the location
-            $("input[name=type]").click(function() {
-                // disable the requests for connection view
-                var type = $('input[name=type]:checked').val();
-                if (type == 'connection')
-                    $('#requests').attr("disabled", "disabled");
-                else
-                    $('#requests').removeAttr("disabled");
-
-                UpdateWaterfall();
-            });
-
-            $("input[name=mime], input[type=checkbox]").click(UpdateWaterfall);
-            $("input[type=text]:not(#requests)").on("input", UpdateWaterfall);
-            $("input#requests").on("change", UpdateWaterfall);
-
-
-            // reset the wait cursor when the image loads
-            $('#waterfallImage').load(function() {
-                $('body').css('cursor', 'default');
-            });
+        // event isteners
+        details_form.addEventListener('input', updateWaterfall);
+        document.getElementById('waterfallImage').addEventListener('load', () => {
+            document.body.style.cursor = 'default';
         });
 
         function getFormParams() {
@@ -185,8 +167,9 @@ function getFormParams() {
             return params;
         }
 
-        function UpdateWaterfall() {
-            $('body').css('cursor', 'wait');
+        function updateWaterfall() {
+            document.body.style.cursor = 'wait';
+            details_form.requests.disabled = details_form.type.value === 'connection';
 
             const params = getFormParams();
             let search = '?';
@@ -196,8 +179,8 @@ function UpdateWaterfall() {
 
             const extension = '<?php echo $extension; ?>';
             const src = '/waterfall.' + extension + search;
-            $('#waterfallImage').attr("src", src);
-            $('.customwaterfall_download a').attr("href", src);
+            document.getElementById('waterfallImage').src = src;
+            document.getElementById('waterfallImageLink').href = src;
             permalink.href = location.origin + location.pathname + search;
         };
     </script>