diff --git a/popup/config.css b/popup/config.css
new file mode 100644
index 0000000000000000000000000000000000000000..a2228a6e0977023e3cfe4afcb0e870e4c088c2ce
--- /dev/null
+++ b/popup/config.css
@@ -0,0 +1,45 @@
+.title{
+ color: #008CBA;
+}
+
+.select_field{
+ font-size: 14px;
+ height: 30px;
+}
+
+.input_field_small{
+ font-size: 14px;
+ height: 30px;
+ border: 1px solid #AAAAAA;
+ border-radius: 3px;
+ width: 170px;
+}
+
+.input_field_medium{
+ font-size: 14px;
+ height: 30px;
+ border: 1px solid #AAAAAA;
+ border-radius: 3px;
+ width: 230px;
+}
+
+.input_field_large{
+ font-size: 14px;
+ height: 30px;
+ border: 1px solid #AAAAAA;
+ border-radius: 3px;
+ width: 340px;
+}
+
+
+.input_url {
+ border: none;
+ border-bottom: 1px solid #AAAAAA;
+ width:600px;
+}
+
+.standard_table {
+ width:1130px;
+}
+
+
diff --git a/popup/config.html b/popup/config.html
index 7d63a5b7e4ac8c4cb60842824792db3e3b142213..040bfa70ee89d676c58db2a73d9308469cfd0bf6 100644
--- a/popup/config.html
+++ b/popup/config.html
@@ -5,32 +5,10 @@
<title>Simple Modify Headers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="bootstrap.min.css">
-
-
- <style type="text/css">
-
-.title{
- color: #008CBA;
-}
-
-.select_field{
- font-size: 14px;
- height: 30px;
-}
-
-.input_field{
- font-size: 14px;
- height: 30px;
- border: 1px solid #AAAAAA;
- border-radius: 3px;
-}
-
-.input_url {
- border: none;
- border-bottom: 1px solid #AAAAAA;
-}
-</style>
+ <link rel="stylesheet" href="bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="config.css">
+ <link rel="stylesheet" media="screen and (max-width: 1200px) and (min-width: 1001px)" href="config_medium_screen.css" />
+ <link rel="stylesheet" media="screen and (max-width: 1000px)" href="config_small_screen.css" />
</head>
<body>
@@ -40,33 +18,36 @@
<div class="container">
<!-- MAIN SCREEN -->
- <div id="main_screen">
- <div class="row">
- <div class="col-sm-6"> <h2 class="title"> SIMPLE MODIFY HEADERS </h2> </div>
- <div class="col-sm-6"> <img id="start_img" src="img/start.png" align="right" valign="top"> </img> </div>
- </div>
- <br/>
+ <div id="main_screen">
+ <center>
-
- <div class="row">
- <div class="col-sm-8">
- <b> Url Patterns* : </b> <input size="50" id="targetPage" class="form_control input_url" type="text" value="">
- </div>
- <div class="col-sm-4" align="right">
- <a href="#" id="export_button" class="btn btn-primary btn-sm" >
- <span class="glyphicon glyphicon-export"></span> Export
- </a>
- <a href="#" id="import_button" class="btn btn-primary btn-sm" >
- <span class="glyphicon glyphicon-import"></span> Import
- </a>
- <a href="#" id="parameters_button" class="btn btn-primary btn-sm">
- <span class="glyphicon glyphicon-cog"></span> Parameters
- </a>
- </div>
- </div>
+ <table class="standard_table">
+ <tr>
+ <td align="left" ><h2 class="title"> SIMPLE MODIFY HEADERS </h2> </td>
+ <td align="right"> <img id="start_img" src="img/start.png" align="right" valign="top"> </img> </td>
+ </tr>
+ </table>
+ <br/>
+
+ <br/>
+ <table class="standard_table">
+ <tr>
+ <td align="left" > <b> Url Patterns* : </b> <input id="targetPage" class="form_control input_url" type="text" value=""> </td>
+ <td align="right">
+ <a href="#" id="export_button" class="btn btn-primary btn-sm" >
+ <span class="glyphicon glyphicon-export"></span> Export
+ </a>
+ <a href="#" id="import_button" class="btn btn-primary btn-sm" >
+ <span class="glyphicon glyphicon-import"></span> Import
+ </a>
+ <a href="#" id="parameters_button" class="btn btn-primary btn-sm">
+ <span class="glyphicon glyphicon-cog"></span> Parameters
+ </a>
+ </td>
+ </tr>
+ </table>
+ <br/> <br/>
- <br/>
- <center>
<table id="table_config" class="table table-condensed " >
<thead>
<tr id="config_table_head">
@@ -85,17 +66,31 @@
<tbody id="config_tab">
</tbody>
</table>
- </center>
- <center>
- <a href="#" id="add_button" class="btn btn-primary btn-sm" style="width:100px">
- <span class="glyphicon glyphicon-plus"></span> New line
- </a>
- <a href="#" id="save_button" class="btn btn-primary btn-sm" style="width:100px">
- <span class="glyphicon glyphicon-save"></span> Save
- </a>
- </center>
-
+ <table class="standard_table"> <tr><td align="center">
+ <a href="#" id="add_button" class="btn btn-primary btn-sm" style="width:100px">
+ <span class="glyphicon glyphicon-plus"></span> New line
+ </a>
+ <a href="#" id="save_button" class="btn btn-primary btn-sm" style="width:100px">
+ <span class="glyphicon glyphicon-save"></span> Save
+ </a>
+ </td></tr></table>
+
<br/>
+
+
+ <table class="standard_table">
+ <tr>
+ <td align="left" >
+ <i style="font-size:10pt"> * Informations on url pattern can be found <a href="https://developer.chrome.com/extensions/match_patterns" target="_blank"> here.</a> <br> An empty string on the field will select all urls. It's possible to select mutliple url patterns using semicolon(;) separator </i>
+ </td>
+ <td align="right">
+ <a href="https://github.com/didierfred/SimpleModifyHeaders/tree/V1.5" target="_blank"> <span class="glyphicon glyphicon-question-sign"></span> About </a>
+ </td>
+ </tr>
+ </table>
+
+ </center>
+ <!--
<div class="row">
<div class="col-sm-10">
@@ -107,7 +102,7 @@
<a href="https://github.com/didierfred/SimpleModifyHeaders/tree/V1.5" target="_blank"> <span class="glyphicon glyphicon-question-sign"></span> About </a>
</div>
- </div>
+ </div> -->
</div>
<!-- PARAMETERS SCREEN -->
diff --git a/popup/config.js b/popup/config.js
index 43a20a43cb261e07ecc74ad3b7f4a8799250d2f0..587204c1c39dde357dab9673569aaf0b8e615f10 100644
--- a/popup/config.js
+++ b/popup/config.js
@@ -18,6 +18,9 @@ let header_name_field_size= 20;
let header_value_field_size= 28;
let comments_field_size= 28;
+let input_field_style="form_control input_field_small";
+
+
window.onload = function() {
// load configuration from local storage
let config = JSON.parse(localStorage.getItem("config"));
@@ -88,13 +91,13 @@ function useUrlContainsClick() {
function appendLine(url_contains,action,header_name,header_value,comment,apply_on,status) {
let html = "<td";
if (!use_url_contains) html=html+" hidden";
- html = html + "><input class=\"form_control input_field\" size=\""+ url_contains_field_size+ "\" id=\"url_contains"+ line_number + "\"></input></td>";
+ html = html + "><input class=\""+ input_field_style+ "\" id=\"url_contains"+ line_number + "\"></input></td>";
html = html + "<td><select class=\"form_control select_field\" id=\"select_action" + line_number + "\" disable=false><option value=\"add\">Add</option><option value=\"modify\">Modify</option><option value=\"delete\">Delete</option></select></td>";
- html = html + "<td><input class=\"form_control input_field\" size=\"" + header_name_field_size + "\" id=\"header_name"+ line_number + "\"></input></td>";
- html = html + "<td><input class=\"form_control input_field\" size=\"" + header_value_field_size + "\" id=\"header_value"+ line_number + "\"></input></td>";
+ html = html + "<td><input class=\"" + input_field_style + "\" id=\"header_name"+ line_number + "\"></input></td>";
+ html = html + "<td><input class=\"" + input_field_style + "\" id=\"header_value"+ line_number + "\"></input></td>";
html = html + "<td";
if (!show_comments) html=html+" hidden";
- html = html + "><input class=\"form_control input_field\" size=\""+ comments_field_size+ "\" id=\"comment"+ line_number + "\"></input></td>";
+ html = html + "><input class=\""+ input_field_style + "\" id=\"comment"+ line_number + "\"></input></td>";
html = html + "<td><select class=\"form_control select_field\" id=\"apply_on" + line_number + "\"><option value=\"req\"> Request </option><option value=\"res\">Response</option></select></td>";
html = html + "<td><a href=\"#\" title=\"Activate/Descativate rule\" id=\"activate_button" + line_number + "\" class=\"btn btn-primary btn-sm\">ON <span class=\"glyphicon glyphicon-ok\"></span></a></td>";
html = html + "<td><a href=\"#\" title=\"Move line up\" id=\"up_button" + line_number + "\" class=\"btn btn-default btn-sm\"> <span class=\"glyphicon glyphicon-arrow-up\"></span></a></td>";
@@ -157,36 +160,23 @@ function switchActivateButton(button_number) {
function reshapeTable() {
let th_elements = document.querySelectorAll("#config_table_head th");
let tr_elements = document.querySelectorAll("#config_tab tr");
+
if (show_comments) {
- if (use_url_contains) {
- url_contains_field_size= 18
- header_name_field_size= 18;
- header_value_field_size= 20;
- comments_field_size= 20;
- }
- else {
- header_name_field_size= 20;
- header_value_field_size= 28;
- comments_field_size= 28;
- }
+ if (use_url_contains) input_field_style = "form_control input_field_small";
+ else input_field_style = "form_control input_field_medium";
}
else {
- if (use_url_contains) {
- url_contains_field_size= 28
- header_name_field_size= 20;
- header_value_field_size= 28;
- }
- else {
- header_name_field_size= 34;
- header_value_field_size= 42;
- }
+ if (use_url_contains) input_field_style = "form_control input_field_medium";
+ else input_field_style = "form_control input_field_large";
}
+
+
for (i=0;i<tr_elements.length;i++) {
- tr_elements[i].childNodes[4].childNodes[0].size=comments_field_size;
+ tr_elements[i].childNodes[4].childNodes[0].className=input_field_style;
tr_elements[i].childNodes[4].hidden = (!show_comments);
- tr_elements[i].childNodes[3].childNodes[0].size=header_value_field_size;
- tr_elements[i].childNodes[2].childNodes[0].size=header_name_field_size;
- tr_elements[i].childNodes[0].childNodes[0].size=url_contains_field_size;
+ tr_elements[i].childNodes[3].childNodes[0].className=input_field_style;
+ tr_elements[i].childNodes[2].childNodes[0].className=input_field_style;
+ tr_elements[i].childNodes[0].childNodes[0].className=input_field_style;
tr_elements[i].childNodes[0].hidden = (!use_url_contains);
}
th_elements[4].hidden = (!show_comments);
diff --git a/popup/config_medium_screen.css b/popup/config_medium_screen.css
new file mode 100644
index 0000000000000000000000000000000000000000..6e26539d908ba6b4477d682aa09ac6e40912ed3f
--- /dev/null
+++ b/popup/config_medium_screen.css
@@ -0,0 +1,23 @@
+
+
+.input_field_small{
+ width: 120px;
+}
+
+.input_field_medium{
+ width: 170px;
+}
+
+.input_field_large{
+ width: 250px;
+}
+
+
+.input_url {
+ width:500px;
+}
+
+.standard_table {
+ width:930px;
+}
+
diff --git a/popup/config_small_screen.css b/popup/config_small_screen.css
new file mode 100644
index 0000000000000000000000000000000000000000..91925233c4c1be1641f18e9eba10a3da3e47ac53
--- /dev/null
+++ b/popup/config_small_screen.css
@@ -0,0 +1,20 @@
+.input_field_small{
+ width: 80px;
+}
+
+.input_field_medium{
+ width: 110px;
+}
+
+.input_field_large{
+ width: 170px;
+}
+
+.input_url {
+ width:200px;
+}
+
+.standard_table {
+ width:750px;
+}
+