Skip to content

Commit

Permalink
UI redesign config panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@cle-b
cle-b committed Jan 4, 2025
1 parent 7c5fab9 commit ca9b392
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 111 deletions.
24 changes: 11 additions & 13 deletions httpdbg/webapp/static/configuration.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
"use strict";

function config() {
if (document.getElementById("configuration").style.display == "block") {
document.getElementById("configuration").style.display = "none";
} else {
document.getElementById("configuration").style.display = "block";
}
}

function apply_config_rule_css(a_config, sheet) {
document.getElementById(a_config.checkbox).checked = a_config.value;
if (a_config.value) {
Expand All @@ -25,13 +17,19 @@ function apply_config_rule_click(a_config) {

}

function apply_config_rule(a_config, sheet) {
document.getElementById(a_config.checkbox).checked = a_config.value;
}

function apply_config() {
var sheet = document.getElementById("configurationcss").sheet;

while (sheet.cssRules.length > 0) {
sheet.deleteRule(0);
}

apply_config_rule(httpdbgApp.config.keep_previous_sessions);

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);
Expand All @@ -47,6 +45,7 @@ function load_config_rule_from_url(a_config, params) {
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.hide_netloc, params);
load_config_rule_from_url(httpdbgApp.config.hide_group, params);
load_config_rule_from_url(httpdbgApp.config.hide_tag, params);
Expand All @@ -65,6 +64,7 @@ function load_config_rule_from_form(a_config) {
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.hide_netloc);
load_config_rule_from_form(httpdbgApp.config.hide_group);
load_config_rule_from_form(httpdbgApp.config.hide_tag);
Expand All @@ -74,14 +74,12 @@ function load_config_from_form(apply) {
if (apply) {
apply_config();
}

save_config_to_url();
}

function save_config_to_url(hide_config_panel) {
function save_config_to_url() {
const formData = new FormData(document.forms[0]);
const params = (new URLSearchParams(formData)).toString();
history.replaceState("", "", "?" + params)

if (hide_config_panel) {
config();
}
}
101 changes: 37 additions & 64 deletions httpdbg/webapp/static/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,22 +34,35 @@
<img class="icon" src="static/icons/recycle-bin-line-icon.svg-+-$**HTTPDBG_VERSION**$"
alt="clean the requests list" />
</button>
<input type="checkbox" id="onlynew" name="cleannew" checked>
<label for="onlynew">force clean for new session</label>
|
<label for="groupby-select">group by</label>
<select id="groupby-select" onchange="update_group_by(this)">
<option value="default" selected>default</option>
<option value="initiator">initiator</option>
<option value="session">session</option>
</select>
<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="groupby-select">group by</label>
<select id="groupby-select" onchange="update_group_by(this)">
<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>
<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>
<input type="checkbox" id="ctag" name="ht" onchange="load_config_from_form(true)">
<label for="ctag" title="Hide the tags.">tag</label>
<input type="checkbox" id="curl" name="hn" onchange="load_config_from_form(true)">
<label for="curl" title="Hide the network location and the scheme in the url.">netloc</label>
- <span title="Customize the requests's payload view.">payload</span>
<input type="checkbox" id="cwrap" name="wl" onchange="load_config_from_form(true)">
<label for="cwrap">wrap lines</label>
<input type="checkbox" id="craw" name="rd" onchange="load_config_from_form(true)">
<label for="craw" title="Avoid formatting the payload content based on its content type.">raw
data</label>
</form>
</div>
<div class="menu-right">
httpdbg
<button onclick="config()" title="open configuration">
<img class="icon" src="static/icons/engine-gears-icon.svg-+-$**HTTPDBG_VERSION**$"
alt="open configuration" />
</button>
<span title="httpdbg v$**HTTPDBG_VERSION**$">httpdbg</span>
<button onclick="help()" title="open help">
<img class="icon" src="static/icons/question-mark-round-line-icon.svg-+-$**HTTPDBG_VERSION**$"
alt="open help" />
Expand All @@ -58,58 +71,20 @@
</nav>
</header>

<div id="configuration">
<h4>configuration</h4>

<form id="configform" onsubmit="return false;">

<div class="grid-container-configuration">
<div>
<fieldset>
<legend>list of requests</legend>

<input type="checkbox" id="curl" name="hn" onchange="load_config_from_form(true)">
<label for="curl">Hide the netloc in the url</label>

<br>

<input type="checkbox" id="cinitiator" name="hi" onchange="load_config_from_form(true)">
<label for="cinitiator">Hide the group rows</label>

<br>

<input type="checkbox" id="ctag" name="ht" onchange="load_config_from_form(true)">
<label for="ctag">Hide the tags</label>
</fieldset>
</div>
<div>
<fieldset>
<legend>request's details</legend>
<input type="checkbox" id="cwrap" name="wl" onchange="load_config_from_form(true)">
<label for="cwrap">Wrap lines</label>

<br>

<input type="checkbox" id="craw" name="rd" onchange="load_config_from_form(true)">
<label for="craw">Raw data</label>
</fieldset>
</div>
</div>

<br>

<input type="submit" value="OK" onclick="save_config_to_url(true)">

</form>
<br>
</div>

<div id="help">
<h4>About</h4>
httpdbg v$**HTTPDBG_VERSION**$
<br>
<a href="https://httpdbg.readthedocs.io/">Documentation</a>
<br>
<a href="https://pypi.org/project/httpdbg/">PyPI package</a>
<br>
<a href="https://github.com/cle-b/httpdbg">Source code</a>
<br>
<h4>Help</h4>

<h5>Shorcuts</h5>
<ul>
<li>Press <kbd>O</kbd> <kbd>C</kbd> to open the configuration panel.</li>
<li>Press <kbd>O</kbd> <kbd>H</kbd> to open this help.</li>
</ul>

Expand All @@ -130,9 +105,7 @@ <h5>Request panel</h5>
<li>Press <kbd>R</kbd> <kbd>S</kbd> to open the stack tab.</li>
</ul>

<h4>About</h4>
httpdbg v$**HTTPDBG_VERSION**$ - <a href="https://pypi.org/project/httpdbg/">PyPI</a> <a
href="https://github.com/cle-b/httpdbg">Source code</a>
<br>
</div>

<div class="grid-container">
Expand Down
61 changes: 31 additions & 30 deletions httpdbg/webapp/static/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,41 @@
"use strict";

let httpdbgApp = {
"config": {
"hide_group": {
"checkbox": "cinitiator",
"param": "hi",
"css": ".initiator {display: none;}",
"value": false
config: {
keep_previous_sessions: {
checkbox: "ckeepsession",
param: "kp",
value: false
},
"hide_netloc": {
"checkbox": "curl",
"param": "hn",
"css": ".netloc {display: none;}",
"value": false
hide_group: {
checkbox: "cinitiator",
param: "hi",
css: ".group {display: none;}",
value: false
},
"hide_tag": {
"checkbox": "ctag",
"param": "ht",
"css": ".tag {display: none;}",
"value": false
hide_netloc: {
checkbox: "curl",
param: "hn",
css: ".netloc {display: none;}",
value: false
},
hide_tag: {
checkbox: "ctag",
param: "ht",
css: ".tag {display: none;}",
value: false
},
"details_wrap_default": {
"checkbox": "cwrap",
"param": "wl",
"elt_name": "ckwraptext",
"value": false
details_wrap_default: {
checkbox: "cwrap",
param: "wl",
elt_name: "ckwraptext",
value: false
},
"details_raw_default": {
"checkbox": "craw",
"param": "rd",
"elt_name": "ckrawdata",
"value": false
details_raw_default: {
checkbox: "craw",
param: "rd",
elt_name: "ckrawdata",
value: false
}
}
}
Expand Down Expand Up @@ -77,10 +82,6 @@ window.addEventListener('keydown', (event) => {
opentab_stack();
}

if (keys_history.endsWith("oc")) {
config();
}

if (keys_history.endsWith("oh")) {
help();
}
Expand Down
4 changes: 2 additions & 2 deletions httpdbg/webapp/static/render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,8 +286,8 @@ function show_raw_data(elt, show_raw_text, raw_text, parsed_text) {
}

function clean(force_clean = false, ui_only = false) {
var onlynew = document.getElementById("onlynew");
if (onlynew.checked || force_clean) {
var ckeepsession = document.getElementById("ckeepsession");
if ((!ckeepsession.checked) || force_clean) {

var initiators = document.getElementsByName("group");
while (initiators.length > 0) {
Expand Down
4 changes: 2 additions & 2 deletions httpdbg/webapp/static/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ a:link {
text-decoration: none;
}

#configuration {
display: none;
#configform {
display: inline;
}

#help {
Expand Down
27 changes: 27 additions & 0 deletions tests/demo_order_by.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import os
import time

import requests

BASE_URL = os.environ.get("HTTPDBG_TEST_UNITTEST_BASE_URL", "http://localhost:4909/")

def test_w1():
requests.get(f"{BASE_URL}/w1_0")
time.sleep(5)
requests.get(f"{BASE_URL}/w1_5")


def test_w2():
time.sleep(2)
requests.get(f"{BASE_URL}/w2_2")
time.sleep(5)
requests.get(f"{BASE_URL}/w2_7")


def test_w3():
time.sleep(10)
requests.get(f"{BASE_URL}/w3_10")


def test_w4():
requests.get(f"{BASE_URL}/w4_0")

0 comments on commit ca9b392

Please sign in to comment.