From 8d53a4fce6f9b0fc2b4ac6085719c2420c9397f1 Mon Sep 17 00:00:00 2001
From: cle-b <cle@tictac.pm>
Date: Sun, 5 Jan 2025 12:09:38 +0100
Subject: [PATCH] config bar update

---
 httpdbg/webapp/static/configuration.js | 27 +++++++++++++++++++++-----
 httpdbg/webapp/static/index.htm        | 10 +++++-----
 httpdbg/webapp/static/main.js          | 24 +++++++++++++++++------
 httpdbg/webapp/static/render.js        |  4 ++--
 httpdbg/webapp/static/style.css        |  4 ++--
 5 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/httpdbg/webapp/static/configuration.js b/httpdbg/webapp/static/configuration.js
index ac6dbda..06a7fff 100644
--- a/httpdbg/webapp/static/configuration.js
+++ b/httpdbg/webapp/static/configuration.js
@@ -1,14 +1,14 @@
 "use strict";
 
 function apply_config_rule_css(a_config, sheet) {
-    document.getElementById(a_config.checkbox).checked = a_config.value;
+    document.getElementById(a_config.id).checked = a_config.value;
     if (a_config.value) {
         sheet.insertRule(a_config.css);
     }
 }
 
 function apply_config_rule_click(a_config) {
-    document.getElementById(a_config.checkbox).checked = a_config.value;
+    document.getElementById(a_config.id).checked = a_config.value;
     document.getElementsByName(a_config.elt_name).forEach(element => {
         if (element.checked != a_config.value) {
             element.click();
@@ -18,7 +18,11 @@ function apply_config_rule_click(a_config) {
 }
 
 function apply_config_rule(a_config, sheet) {
-    document.getElementById(a_config.checkbox).checked = a_config.value;
+    document.getElementById(a_config.id).checked = a_config.value;
+}
+
+function apply_config_rule_select(a_config, sheet) {
+    document.getElementById(a_config.id).value = a_config.value;
 }
 
 function apply_config() {
@@ -30,6 +34,9 @@ function apply_config() {
 
     apply_config_rule(httpdbgApp.config.keep_previous_sessions);
 
+    apply_config_rule_select(httpdbgApp.config.group_by);
+    update_group_by(httpdbgApp.config.group_by.value);
+
     apply_config_rule_css(httpdbgApp.config.hide_netloc, sheet);
     apply_config_rule_css(httpdbgApp.config.hide_group, sheet);
     apply_config_rule_css(httpdbgApp.config.hide_tag, sheet);
@@ -39,13 +46,18 @@ function apply_config() {
 }
 
 function load_config_rule_from_url(a_config, params) {
-    a_config.value = (params.get(a_config.param) || "off") == "on";
+    if (a_config.type === "select") {
+        a_config.value = params.get(a_config.param) || "default";
+    } else {
+        a_config.value = (params.get(a_config.param) || "off") == "on";
+    }
 }
 
 function load_config_from_url(apply) {
     const params = new URLSearchParams(window.location.search);
 
     load_config_rule_from_url(httpdbgApp.config.keep_previous_sessions, params);
+    load_config_rule_from_url(httpdbgApp.config.group_by, params);
     load_config_rule_from_url(httpdbgApp.config.hide_netloc, params);
     load_config_rule_from_url(httpdbgApp.config.hide_group, params);
     load_config_rule_from_url(httpdbgApp.config.hide_tag, params);
@@ -58,13 +70,18 @@ function load_config_from_url(apply) {
 }
 
 function load_config_rule_from_form(a_config) {
-    a_config.value = document.getElementById(a_config.checkbox).checked;
+    if (a_config.type === "select") {
+        a_config.value = document.getElementById(a_config.id).value;
+    } else {
+        a_config.value = document.getElementById(a_config.id).checked;
+    }
 }
 
 function load_config_from_form(apply) {
     const params = new URLSearchParams(window.location.search);
 
     load_config_rule_from_form(httpdbgApp.config.keep_previous_sessions);
+    load_config_rule_from_form(httpdbgApp.config.group_by);
     load_config_rule_from_form(httpdbgApp.config.hide_netloc);
     load_config_rule_from_form(httpdbgApp.config.hide_group);
     load_config_rule_from_form(httpdbgApp.config.hide_tag);
diff --git a/httpdbg/webapp/static/index.htm b/httpdbg/webapp/static/index.htm
index b6ca5c2..8b55132 100644
--- a/httpdbg/webapp/static/index.htm
+++ b/httpdbg/webapp/static/index.htm
@@ -30,22 +30,22 @@
     <header>
         <nav id="navbar">
             <div class="menu-left">
-                <button id="trash" type="button" onclick="clean(true)">
+                <button id="trash" type="button" onclick="clean(true)" title="Delete all unpinned requests.">
                     <img class="icon" src="static/icons/recycle-bin-line-icon.svg-+-$**HTTPDBG_VERSION**$"
-                        alt="clean the requests list" />
+                        alt="Delete all unpinned requests." />
                 </button>
                 <form id="configform" onsubmit="return false;">
                     -
                     <input type="checkbox" id="ckeepsession" name="kp" onchange="load_config_from_form(true)">
-                    <label for="ckeepsession" title="The requests are not deleted for each new session.">keep previous sessions</label>
+                    <label for="ckeepsession" title="If you choose to keep previous sessions, the requests will not be deleted when starting a new session.">keep previous sessions</label>
                     -
                     <label for="groupby-select">group by</label>
-                    <select id="groupby-select" onchange="update_group_by(this)">
+                    <select id="groupby-select" name="gb" onchange="load_config_from_form(true)">
                         <option value="default" selected>default</option>
                         <option value="initiator">initiator</option>
                         <option value="session">session</option>
                     </select>
-                    - <span title="Customize the URL list view.">hide</span>
+                    - <span title="Customize the request list view.">hide</span>
                     <input type="checkbox" id="cinitiator" name="hi" onchange="load_config_from_form(true)">
                     <label for="cinitiator"
                         title="Hide the groups.&#10;Be aware that the order of the requests will not be affected.">group</label>
diff --git a/httpdbg/webapp/static/main.js b/httpdbg/webapp/static/main.js
index 461ac2a..00a2018 100644
--- a/httpdbg/webapp/static/main.js
+++ b/httpdbg/webapp/static/main.js
@@ -3,36 +3,48 @@
 let httpdbgApp = {
     config: {
         keep_previous_sessions: {
-            checkbox: "ckeepsession",
+            id: "ckeepsession",
+            type: "checkbox",
             param: "kp",
             value: false
         },
+        group_by: {
+            id: "groupby-select",
+            type: "select",            
+            param: "gb",
+            value: "default"
+        },
         hide_group: {
-            checkbox: "cinitiator",
+            id: "cinitiator",
+            type: "checkbox",            
             param: "hi",
             css: ".group {display: none;}",
             value: false
         },
         hide_netloc: {
-            checkbox: "curl",
+            id: "curl",
+            type: "checkbox",            
             param: "hn",
             css: ".netloc {display: none;}",
             value: false
         },
         hide_tag: {
-            checkbox: "ctag",
+            id: "ctag",
+            type: "checkbox",            
             param: "ht",
             css: ".tag {display: none;}",
             value: false
         },        
         details_wrap_default: {
-            checkbox: "cwrap",
+            id: "cwrap",
+            type: "checkbox",            
             param: "wl",
             elt_name: "ckwraptext",
             value: false
         },
         details_raw_default: {
-            checkbox: "craw",
+            id: "craw",
+            type: "checkbox",            
             param: "rd",
             elt_name: "ckrawdata",
             value: false
diff --git a/httpdbg/webapp/static/render.js b/httpdbg/webapp/static/render.js
index af4ede6..265feed 100644
--- a/httpdbg/webapp/static/render.js
+++ b/httpdbg/webapp/static/render.js
@@ -423,9 +423,9 @@ function prepare_for_filter(txt) {
     return encodeURI(txt.replace(/\s+/g, '').toLowerCase());
 }
 
-function update_group_by(select) {
+function update_group_by(value) {
     // we save the group by strategy
-    global.groupby = select.value;
+    global.groupby = value;
 
     // we delete all the groups/requests in the table to force the refresh
     clean(true, true);
diff --git a/httpdbg/webapp/static/style.css b/httpdbg/webapp/static/style.css
index 3e69aca..045132b 100644
--- a/httpdbg/webapp/static/style.css
+++ b/httpdbg/webapp/static/style.css
@@ -20,8 +20,8 @@
   --preview-code-border: #777777;
   --column-border: #dadada;
   --kdb-border: #000000;
-  --tag-bg-color:  #cf4b8f;
-  --tag-text:  #ffffff;
+  --tag-bg-color: #cf4b8f;
+  --tag-text: #ffffff;
 }
 
 body {