1 files changed, 40 insertions, 15 deletions

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);
     }
 }