aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2021-08-30 11:54:47 +0200
committerWojtek Kosior <koszko@koszko.org>2021-08-30 11:54:47 +0200
commit544c6df3ab1e331c6b6779b76ad33180a06b0b4d (patch)
tree07d3eff9fbe6fa89b1414353afadc7ff37457392
parenta43c3fe265bc7462fa4715e7e26d221826935c14 (diff)
downloadbrowser-extension-544c6df3ab1e331c6b6779b76ad33180a06b0b4d.tar.gz
browser-extension-544c6df3ab1e331c6b6779b76ad33180a06b0b4d.zip
add styling for options page\n\nThis does not include styling for contents of the import popup
-rw-r--r--html/base.css22
-rw-r--r--html/options.html463
-rw-r--r--html/options_main.js55
3 files changed, 390 insertions, 150 deletions
diff --git a/html/base.css b/html/base.css
index 2256833..91fd953 100644
--- a/html/base.css
+++ b/html/base.css
@@ -6,6 +6,14 @@
* Redistribution terms are gathered in the `copyright' file.
*/
+html {
+ font-family: sans-serif;
+}
+
+textarea {
+ font-family: monospace;
+}
+
input[type="checkbox"], input[type="radio"], .hide {
display: none;
}
@@ -32,6 +40,8 @@ button, .button {
display: inline-block;
padding: 6px 12px;
margin: 2px 0px;
+ -moz-user-select: none;
+ user-select: none;
}
button.slimbutton, .button.slimbutton {
@@ -42,3 +52,15 @@ button.slimbutton, .button.slimbutton {
button:hover, .button:hover {
box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
+
+aside {
+ background: #3f8dc6;
+ margin: 5px 0;
+ padding: 0.3em 1em;
+ border-radius: 3px;
+ color: #fff;
+}
+
+textarea: {
+ resize: none;
+}
diff --git a/html/options.html b/html/options.html
index e7dc3aa..e0c3c23 100644
--- a/html/options.html
+++ b/html/options.html
@@ -1,7 +1,6 @@
<!doctype html>
<!--
Copyright (C) 2021 Wojtek Kosior
- Copyright (C) 2021 Nicholas Johnson
Redistribution terms are gathered in the `copyright' file.
-->
<html>
@@ -11,23 +10,11 @@
<link type="text/css" rel="stylesheet" href="reset.css" />
<link type="text/css" rel="stylesheet" href="base.css" />
<style>
- /* pages list */
- #page_components_ul {
- max-height: 80vh;
- overflow-y: auto;
- }
- #page_components_ul li.dragover_li {
- border-top: 2px solid blue;
- }
- #page_components_ul li {
- border-top: 2px solid white;
- }
- li[draggable=true] * {
- pointer-events: none;
- }
- li[draggable=true] label,
- li[draggable=true] button {
- pointer-events: auto;
+ body {
+ background-color: #f0f0f0;
+ color: #555;
+ overflow: auto;
+ width: 100%;
}
/* tabbed view */
@@ -38,20 +25,41 @@
display: none;
}
- #show_repos:checked ~ #repos_lbl,
- #show_pages:checked ~ #pages_lbl,
- #show_bags:checked ~ #bags_lbl,
- #show_scripts:checked ~ #scripts_lbl {
+ #show_repos:checked ~ div #repos_lbl,
+ #show_pages:checked ~ div #pages_lbl,
+ #show_bags:checked ~ div #bags_lbl,
+ #show_scripts:checked ~ div #scripts_lbl {
background: #4CAF50;
color: white;
}
- body > div {
- border-top: 6px solid #4CAF50;
+ #tab_heads>* {
+ font-size: 130%;
+ padding: 10px;
+ display: inline-block;
+ -moz-user-select: none;
+ user-select: none;
}
- .tab_head {
- display: inline-block;
+ #import_but {
+ font: unset;
+ font-size: 130%;
+ float: right;
+ margin: 0;
+ border-radius: 0;
+ }
+
+ #tab_heads::after {
+ display: block;
+ height: 8px;
+ content: "";
+ background: linear-gradient(#555, transparent);
+ }
+
+ div.tab {
+ min-width: 50vw;
+ width: fit-content;
+ padding-left: 6px;
}
/* popup window with list of selectable components */
@@ -61,7 +69,7 @@
height: 100vh;
left: 0;
top: 0;
- background-color: rgba(0,0,0,0.4);
+ background-color: rgba(60,60,60,0.4);
z-index: 1;
overflow: auto;
vertical-align: center;
@@ -69,8 +77,130 @@
}
.popup_frame {
- background-color: white;
- width: 50vw;
+ background-color: #f0f0f0;
+ margin: 5vh auto;
+ padding: 15px;
+ border: solid #333 4px;
+ border-radius: 15px;
+ width: -moz-fit-content;
+ width: fit-content;
+ }
+
+ div.ul_container {
+ background-color: #f0f0f0;
+ width: -moz-fit-content;
+ width: fit-content;
+ margin: 6px 0;
+ }
+
+ div.ul_container::after, div.ul_container::before {
+ display: block;
+ height: 6px;
+ content: "";
+ background: linear-gradient(transparent, #555);
+ }
+
+ div.ul_container::after {
+ background: linear-gradient(#555, transparent);
+ }
+
+ .work_li div.ul_container::before {
+ background: linear-gradient(#e0f0f0, #555);
+ }
+
+ .work_li div.ul_container::after {
+ background: linear-gradient(#555, #e0f0f0);
+ }
+
+ div.ul_container>.always_scrollbar{
+ border-left: solid #454 8px;
+ max-height: 80vh;
+ overflow-y: scroll;
+ }
+
+ div.ul_container table {
+ border-collapse: unset;
+ }
+
+ div.ul_container, div.ul_container>*, div.ul_container table>tbody {
+ width: -moz-min-content;
+ width: min-content;
+ }
+
+ div.ul_container div.ul_container>.always_scrollbar,
+ .popup_frame div.ul_container>.always_scrollbar {
+ max-height: 60vh;
+ }
+
+ .popup_frame div.ul_container table {
+ min-width: 30vw;
+ }
+
+ .popup_frame div.ul_container {
+ margin: 0 auto;
+ }
+
+ tr:nth-child(odd) {
+ background-color: #e5e5e5;
+ }
+
+ td {
+ vertical-align: middle;
+ min-width: fit-content;
+ min-width: -moz-fit-content;
+ width: 1%;
+ }
+
+ tr>td:first-child {
+ padding: 3px 10px 6px;
+ max-width: 70vw;
+ overflow: hidden;
+ width: 100%;
+ white-space: nowrap;
+ }
+
+ tr.work_li>td:first-child {
+ padding-right: 0;
+ max-width: unset;
+ }
+
+ tr.work_li>td>div {
+ background-color: #e0f0f0;
+ border-left: solid #454 5px;
+ border-right: solid #454 2px;
+ padding: 5px 10px;
+ }
+
+ .form_grid {
+ display: grid;
+ grid-template-columns: auto auto;
+ }
+
+ .form_grid>label {
+ grid-column: 1 / span 1;
+ margin-right: 10px;
+ }
+
+ .form_grid label {
+ line-height: 34px; /* center text vertically */
+ }
+
+ .form_grid>input, .form_grid>span {
+ grid-column: 2 / span 1;
+ }
+
+ .form_grid>label[for="script_contents_field"],
+ .form_grid>* {
+ grid-column: 1 / span 2;
+ }
+
+ .form_grid>textarea {
+ min-width: 70vw;
+ resize: none;
+ }
+
+ td>div.button {
+ margin-right: 4px;
}
input[type="radio"]:not(:checked)+.import_window_content {
@@ -80,24 +210,28 @@
</head>
<body>
<template>
- <li id="item_li">
- <span></span>
- <button> Edit </button>
- <button> Remove </button>
- <button> Export </button>
- </li>
- <li id="bag_component_li">
- <span></span>
- <button> Remove </button>
- </li>
- <li id="chbx_component_li">
- <input type="checkbox" style="display: inline;"></input>
- <span></span>
- </li>
- <li id="radio_component_li">
- <input type="radio" style="display: inline;" name="page_components"></input>
- <span></span>
- </li>
+ <tr id="item_li">
+ <td></td>
+ <td><div class="button"> Edit </div></td>
+ <td><div class="button"> Remove </div></td>
+ <td><div class="button"> Export </div></td>
+ </tr>
+ <tr id="bag_component_li">
+ <td></td>
+ <td><div class="button"> Remove </div></td>
+ </tr>
+ <tr id="chbx_component_li">
+ <td>
+ <input type="checkbox" style="display: inline;"></input>
+ <span></span>
+ </td>
+ </tr>
+ <tr id="radio_component_li">
+ <td>
+ <input type="radio" style="display: inline;" name="page_components"></input>
+ <span></span>
+ </td>
+ </tr>
</template>
<!-- Mind the show_*s ids below - their format is assumed in js code -->
@@ -105,98 +239,150 @@
<input type="radio" name="tabs" id="show_pages" checked></input>
<input type="radio" name="tabs" id="show_bags"></input>
<input type="radio" name="tabs" id="show_scripts"></input>
- <label for="show_repos" id="repos_lbl"
- class="tab_head"> Repos </label>
- <label for="show_pages" id="pages_lbl"
- class="tab_head"> Pages </label>
- <label for="show_bags" id="bags_lbl"
- class="tab_head"> Bags </label>
- <label for="show_scripts" id="scripts_lbl"
- class="tab_head"> Scripts </label>
-
- <div id="repos">
- <ul id="repos_ul">
- <li id="work_repo_li" class="hide">
- <label for="repo_url_field">URL: </label>
- <input id="repo_url_field"></input>
- <br/>
- <button id="save_repo_but" type="button"> Save </button>
- <button id="discard_repo_but" type="button"> Cancel </button>
- </li>
- </ul>
+ <div id="tab_heads">
+ <label for="show_repos" id="repos_lbl"> Repos </label>
+ <label for="show_pages" id="pages_lbl"> Pages </label>
+ <label for="show_bags" id="bags_lbl"> Bags </label>
+ <label for="show_scripts" id="scripts_lbl"> Scripts </label>
+ <button id="import_but" style="margin-left: 40px;"> Import </button>
+ </div>
+ <div id="repos" class="tab">
+ <div class="ul_container">
+ <div>
+ <table>
+ <tbody id="repos_ul">
+ <tr id="work_repo_li" class="hide work_li">
+ <td colspan="4">
+ <div class="form_grid">
+ <label for="repo_url_field">URL: </label>
+ <input id="repo_url_field"></input>
+ <div>
+ <button id="save_repo_but" type="button"> Save </button>
+ <button id="discard_repo_but" type="button"> Cancel </button>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
<button id="add_repo_but" type="button"> Add repository </button>
</div>
-
- <div id="pages">
- <ul id="pages_ul">
- <li id="work_page_li" class="hide">
- <label for="page_url_field">URL: </label>
- <input id="page_url_field"></input>
- <br/>
- <label>Payload: </label>
- <span id="page_payload"></span>
- <button id="select_page_components_but">
- Choose payload
- </button>
- <br/>
- <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
- <label for="page_allow_chbx">Allow native scripts</label>
- <br/>
- <button id="save_page_but" type="button"> Save </button>
- <button id="discard_page_but" type="button"> Cancel </button>
- </li>
- </ul>
+ <div id="pages" class="tab">
+ <div class="ul_container">
+ <div>
+ <table>
+ <tbody id="pages_ul">
+ <tr id="work_page_li" class="hide work_li">
+ <td colspan="4">
+ <div class="form_grid">
+ <label for="page_url_field">URL: </label>
+ <input id="page_url_field"></input>
+ <label>Payload: </label>
+ <span>
+ <span id="page_payload"></span>
+ <button id="select_page_components_but">
+ Choose payload
+ </button>
+ </span>
+ <div>
+ <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
+ <label for="page_allow_chbx">Allow native scripts</label>
+ </div>
+ <div>
+ <button id="save_page_but" type="button"> Save </button>
+ <button id="discard_page_but" type="button"> Cancel </button>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
<button id="add_page_but" type="button"> Add page </button>
</div>
-
- <div id="bags">
- <ul id="bags_ul">
- <li id="work_bag_li" class="hide">
- <label for="bag_name_field"> Name: </label>
- <input id="bag_name_field"></input>
- <ul id="bag_components_ul">
- <li id="empty_bag_component_li" class="hide"></li>
- </ul>
- <button id="select_bag_components_but">
- Add scripts
- </button>
- <br/>
- <button id="save_bag_but"> Save </button>
- <button id="discard_bag_but"> Cancel </button>
- </li>
- </ul>
+ <div id="bags" class="tab">
+ <div class="ul_container">
+ <div>
+ <table>
+ <tbody id="bags_ul">
+ <tr id="work_bag_li" class="hide work_li">
+ <td colspan="4">
+ <div class="form_grid">
+ <label for="bag_name_field"> Name: </label>
+ <input id="bag_name_field"></input>
+ <div class="ul_container">
+ <div>
+ <table>
+ <tbody id="bag_components_ul">
+ <tr id="empty_bag_component_li" class="hide"></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div>
+ <button id="select_bag_components_but">
+ Add scripts
+ </button>
+ </div>
+ <div>
+ <button id="save_bag_but"> Save </button>
+ <button id="discard_bag_but"> Cancel </button>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
<button id="add_bag_but" type="button"> Add bag </button>
</div>
-
- <div id="scripts">
- <ul id="scripts_ul">
- <li id="work_script_li" class="hide">
- <label for="script_name_field"> Name: </label>
- <input id="script_name_field"></input>
- <br/>
- <label for="script_url_field"> URL: </label>
- <input id="script_url_field"></input>
- <br/>
- <label for="script_sha256_field"> sha256: </label>
- <input id="script_sha256_field"></input>
- <br/>
- <label for="script_contents_field"> contents: </label>
- <textarea id="script_contents_field" rows="20" cols="80"></textarea>
- <br/>
- <button id="save_script_but"> Save </button>
- <button id="discard_script_but"> Cancel </button>
- </li>
- </ul>
+ <div id="scripts" class="tab">
+ <div class="ul_container">
+ <div>
+ <table>
+ <tbody id="scripts_ul">
+ <tr id="work_script_li" class="hide work_li">
+ <td colspan="4">
+ <div class="form_grid">
+ <label for="script_name_field"> Name: </label>
+ <input id="script_name_field"></input>
+ <label for="script_url_field"> URL: </label>
+ <input id="script_url_field"></input>
+ <label for="script_sha256_field"> SHA256: </label>
+ <input id="script_sha256_field"></input>
+ <aside>
+ Note: URL and SHA256 are ignored if script text is provided.
+ </aside>
+ <label for="script_contents_field"> contents: </label>
+ <textarea id="script_contents_field" rows="20" cols="80"></textarea>
+ <div>
+ <button id="save_script_but"> Save </button>
+ <button id="discard_script_but"> Cancel </button>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
<button id="add_script_but" type="button"> Add script </button>
</div>
- <button id="import_but" style="margin-top: 40px;"> Import </button>
-
<div id="chbx_components_window" class="hide popup" position="absolute">
<div class="popup_frame">
- <ul id="chbx_components_ul">
-
- </ul>
+ <div class="ul_container">
+ <div>
+ <table>
+ <tbody id="chbx_components_ul">
+ </tbody>
+ </table>
+ </div>
+ </div>
<button id="commit_bag_components_but"> Add </button>
<button id="cancel_bag_components_but"> Cancel </button>
</div>
@@ -204,13 +390,20 @@
<div id="radio_components_window" class="hide popup" position="absolute">
<div class="popup_frame">
- <ul id="radio_components_ul">
-
- <li id="radio_component_none_li">
- <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
- <span>(None)</span>
- </li>
- </ul>
+ <div class="ul_container">
+ <div class="always_scrollbar">
+ <table>
+ <tbody id="radio_components_ul">
+ <tr id="radio_component_none_li">
+ <td>
+ <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
+ <span>(None)</span>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
<button id="commit_page_components_but"> Choose </button>
<button id="cancel_page_components_but"> Cancel </button>
</div>
diff --git a/html/options_main.js b/html/options_main.js
index 825728e..8067fe7 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -32,6 +32,14 @@ bag_component_li_template.removeAttribute("id");
chbx_component_li_template.removeAttribute("id");
radio_component_li_template.removeAttribute("id");
+function list_set_scrollbar(list_elem)
+{
+ const op = ((list_elem.children.length === 1 &&
+ list_elem.children[0].classList.contains("hide")) ||
+ list_elem.children.length < 1) ? "remove" : "add";
+ list_elem.parentElement.parentElement.classList[op]("always_scrollbar");
+}
+
function item_li_id(prefix, item)
{
return `li_${prefix}_${item}`;
@@ -66,11 +74,13 @@ function add_li(prefix, item, at_the_end=false)
continue;
ul.ul.insertBefore(li, element);
- return;
+ break;
}
}
+ if (!li.parentElement)
+ ul.ul.appendChild(li);
- ul.ul.appendChild(li);
+ list_set_scrollbar(ul.ul);
}
const chbx_components_ul = by_id("chbx_components_ul");
@@ -98,12 +108,13 @@ function add_chbx_li(prefix, name)
li.setAttribute("data-prefix", prefix);
li.setAttribute("data-name", name);
- let chbx = li.firstElementChild;
+ let chbx = li.firstElementChild.firstElementChild;
let span = chbx.nextElementSibling;
span.textContent = nice_name(prefix, name);
chbx_components_ul.appendChild(li);
+ list_set_scrollbar(chbx_components_ul);
}
var radio_component_none_li = by_id("radio_component_none_li");
@@ -118,12 +129,13 @@ function add_radio_li(prefix, name)
li.setAttribute("data-prefix", prefix);
li.setAttribute("data-name", name);
- let radio = li.firstElementChild;
+ let radio = li.firstElementChild.firstElementChild;
let span = radio.nextElementSibling;
span.textContent = nice_name(prefix, name);
- radio_components_ul.insertBefore(li, radio_component_none_li);
+ radio_component_none_li.before(li);
+ list_set_scrollbar(radio_components_ul);
}
/* Used to reset edited repo. */
@@ -191,6 +203,13 @@ function work_page_li_data(ul)
const empty_bag_component_li = by_id("empty_bag_component_li");
var bag_components_ul = by_id("bag_components_ul");
+function remove_bag_component_entry(entry)
+{
+ const list = entry.parentElement;
+ entry.remove();
+ list_set_scrollbar(list);
+}
+
/* Used to construct and update components list of edited bag. */
function add_bag_components(components)
{
@@ -199,15 +218,17 @@ function add_bag_components(components)
let li = bag_component_li_template.cloneNode(true);
li.setAttribute("data-prefix", prefix);
li.setAttribute("data-name", name);
+
let span = li.firstElementChild;
span.textContent = nice_name(prefix, name);
let remove_but = span.nextElementSibling;
- remove_but.addEventListener("click", () =>
- bag_components_ul.removeChild(li));
+ remove_but.addEventListener("click",
+ () => remove_bag_component_entry(li));
bag_components_ul.appendChild(li);
}
bag_components_ul.appendChild(empty_bag_component_li);
+ list_set_scrollbar(bag_components_ul);
}
/* Used to reset edited bag. */
@@ -219,8 +240,7 @@ function reset_work_bag_li(ul, item, components)
let old_components_ul = bag_components_ul;
bag_components_ul = old_components_ul.cloneNode(false);
- ul.work_li.insertBefore(bag_components_ul, old_components_ul);
- ul.work_li.removeChild(old_components_ul);
+ old_components_ul.replaceWith(bag_components_ul);
add_bag_components(components);
}
@@ -228,8 +248,7 @@ function reset_work_bag_li(ul, item, components)
/* Used to get edited bag data for saving. */
function work_bag_li_data(ul)
{
- let components_ul = ul.work_name_input.nextElementSibling;
- let component_li = components_ul.firstElementChild;
+ let component_li = bag_components_ul.firstElementChild;
let components = [];
@@ -285,6 +304,8 @@ function cancel_work(prefix)
}
ul.work_li.classList.add("hide");
+ ul.ul.append(ul.work_li);
+ list_set_scrollbar(ul.ul);
ul.state = UL_STATE.IDLE;
}
@@ -323,6 +344,7 @@ function edit_item(prefix, item)
ul.ul.insertBefore(ul.work_li, li);
ul.ul.removeChild(li);
ul.work_li.classList.remove("hide");
+ list_set_scrollbar(ul.ul);
ul.state = UL_STATE.EDITING_ENTRY;
ul.edited_item = item;
@@ -380,6 +402,7 @@ function add_new_item(prefix, name)
ul.reset_work_li(ul);
ul.work_li.classList.remove("hide");
ul.ul.appendChild(ul.work_li);
+ list_set_scrollbar(ul.ul);
if (name !== undefined)
ul.work_name_input.value = name;
@@ -394,7 +417,7 @@ function bag_components()
radio_components_window.classList.add("hide");
for (let li of chbx_components_ul.children) {
- let chbx = li.firstElementChild;
+ let chbx = li.firstElementChild.firstElementChild;
chbx.checked = false;
}
}
@@ -404,7 +427,7 @@ function commit_bag_components()
let selected = [];
for (let li of chbx_components_ul.children) {
- let chbx = li.firstElementChild;
+ let chbx = li.firstElementChild.firstElementChild;
if (!chbx.checked)
continue;
@@ -432,10 +455,11 @@ function page_components()
let [prefix, item] = components;
let li = by_id(radio_li_id(prefix, item));
+
if (li === null)
radio_component_none_input.checked = false;
else
- li.firstElementChild.checked = true;
+ li.firstElementChild.firstElementChild.checked = true;
}
function commit_page_components()
@@ -443,7 +467,7 @@ function commit_page_components()
let components = null;
for (let li of radio_components_ul.children) {
- let radio = li.firstElementChild;
+ let radio = li.firstElementChild.firstElementChild;
if (!radio.checked)
continue;
@@ -710,6 +734,7 @@ function handle_change(change)
for (let [components_ul, id_creator] of uls_creators) {
let li = by_id(id_creator(change.prefix, change.item));
components_ul.removeChild(li);
+ list_set_scrollbar(components_ul);
}
}