/html/display-panel.js - Diff - Haketilo - Hydrilla issue tracker

« Previous | Next »

Revision 453ba039

Added by koszko about 2 years ago

ID 453ba03962ececcdff9264bea606b7bc488c1803
Parent 544c6df3
Child d85dcc1e

add styling for popup page\n\nThis does not include styling for contents of the import dialog

      * IMPORT TYPE_PREFIX
      * IMPORT nice_name
      * IMPORT open_in_settings
      * IMPORT url_matches
      * IMPORT each_url_pattern
      * IMPORT by_id
      * IMPORT get_template
-...
     let storage;
     let tab_url;
     /* Force popup <html>'s reflow on stupid Firefox. */
     if (is_mozilla) {
         const reflow_forcer =
     	  () => document.documentElement.style.width = "-moz-fit-content";
         for (const radio of document.querySelectorAll('[name="current_view"]'))
     	radio.addEventListener("change", reflow_forcer);
+    }
     const show_queried_view_radio = by_id("show_queried_view_radio");
     const tab_query = {currentWindow: true, active: true};
     async function get_current_tab()
-...
+    }
     const page_url_heading = by_id("page_url_heading");
     const show_privileged_notice_chbx = by_id("show_privileged_notice_chbx");
     const show_page_state_chbx = by_id("show_page_state_chbx");
     const privileged_notice = by_id("privileged_notice");
     const page_state = by_id("page_state");
     /* Helper functions to convert string into a list of one-letter <span>'s. */
     function char_to_span(char, doc)
+    {
         const span = document.createElement("span");
         span.textContent = char;
         return span;
+    }
     function to_spans(string, doc=document)
+    {
         return string.split("").map(c => char_to_span(c, doc));
+    }
     async function show_page_activity_info()
+    {
-...
+        }
         tab_url = /^([^?#]*)/.exec(tab.url)[1];
         page_url_heading.textContent = tab_url;
         to_spans(tab_url).forEach(s => page_url_heading.append(s));
         if (is_privileged_url(tab_url)) {
     	show_privileged_notice_chbx.checked = true;
     	privileged_notice.classList.remove("hide");
     	return;
+        }
         populate_possible_patterns_list(tab_url);
         show_page_state_chbx.checked = true;
         page_state.classList.remove("hide");
         try_to_connect(tab.id);
+    }
     const possible_patterns_ul = by_id("possible_patterns");
     const pattern_li_template = get_template("pattern_li");
     pattern_li_template.removeAttribute("id");
     const possible_patterns_list = by_id("possible_patterns");
     const known_patterns = new Map();
     function add_pattern_to_list(pattern)
+    {
         const li = pattern_li_template.cloneNode(true);
         li.id = `pattern_li_${known_patterns.size}`;
         known_patterns.set(pattern, li.id);
         const template = clone_template("pattern_entry");
         template.name.textContent = pattern;
         const span = li.firstElementChild;
         span.textContent = pattern;
         const button = span.nextElementSibling;
         const settings_opener = () => open_in_settings(TYPE_PREFIX.PAGE, pattern);
         button.addEventListener("click", settings_opener);
         template.button.addEventListener("click", settings_opener);
         possible_patterns_ul.appendChild(li)
         known_patterns.set(pattern, template);
         possible_patterns_list.append(template.entry);
         return li.id;
         return template;
+    }
     function ensure_pattern_exists(pattern)
+    {
         let id = known_patterns.get(pattern);
         let entry_object = known_patterns.get(pattern);
         /*
          * As long as pattern computation works well, we should never get into this
          * conditional block. This is just a safety measure. To be removed as part
          * of a bigger rework when we start taking iframes into account.
          */
         if (id === undefined) {
         if (entry_object === undefined) {
     	console.log(`unknown pattern: ${pattern}`);
     	id = add_pattern_to_list(pattern);
     	entry_object = add_pattern_to_list(pattern);
+        }
         return id;
         return entry_object;
+    }
     function set_pattern_li_button_text(li_id, text)
     function style_possible_pattern_entry(pattern, exists_in_settings)
+    {
         by_id(li_id).firstElementChild.nextElementSibling.textContent = text;
         const [text, class_action] = exists_in_settings ?
     	  ["Edit", "add"] : ["Add", "remove"];
         const entry_object = ensure_pattern_exists(pattern);
         entry_object.button.textContent = `${text} setting`;
         entry_object.entry.classList[class_action]("matched_pattern");
+    }
     function handle_page_change(change)
+    {
         const li_id = ensure_pattern_exists(change.item);
         if (change.old_val === undefined)
     	set_pattern_li_button_text(li_id, "Edit in settings");
         if (change.new_val === undefined)
     	set_pattern_li_button_text(li_id, "Add setting");
         if (url_matches(tab_url, change.item))
             style_possible_pattern_entry(change.item, change.new_val !== undefined);
+    }
     function populate_possible_patterns_list(url)
-...
         for (const pattern of each_url_pattern(url))
     	add_pattern_to_list(pattern);
         for (const [pattern, settings] of query_all(storage, url)) {
     	set_pattern_li_button_text(ensure_pattern_exists(pattern),
     				   "Edit in settings");
+        }
         for (const [pattern, settings] of query_all(storage, url))
     	style_possible_pattern_entry(pattern, true);
         storage.add_change_listener(handle_page_change, [TYPE_PREFIX.PAGE]);
+    }
-...
     	setTimeout(() => monitor_connecting(tab_id), 1000);
+    }
     const query_started_chbx = by_id("query_started_chbx");
     function start_querying_repos(port)
     function start_querying_repos()
+    {
         query_pattern_but.removeEventListener("click", start_querying_repos);
         const repo_urls = storage.get_all_names(TYPE_PREFIX.REPO);
         if (content_script_port)
     	content_script_port.postMessage([TYPE_PREFIX.URL, tab_url, repo_urls]);
         query_started_chbx.checked = true;
+    }
     const loading_chbx = by_id("loading_chbx");
     const loading_point = by_id("loading_point");
     const reload_notice = by_id("reload_notice");
     function handle_disconnect(tab_id, button_cb)
+    {
-...
         if (connected_chbx.checked)
     	return;
         loading_chbx.checked = !loading_chbx.checked;
         loading_point.classList.toggle("camouflage");
         reload_notice.classList.remove("hide");
         setTimeout(() => try_to_connect(tab_id), 1000);
+    }
-...
         else
     	return;
         loading_chbx.checked = !loading_chbx.checked;
         loading_point.classList.toggle("camouflage");
         reload_notice.classList.remove("hide");
         try_to_connect(tab_id);
+    }
-...
     const view_pattern_but = by_id("view_pattern");
     const blocked_span = by_id("blocked");
     const payload_span = by_id("payload");
     const payload_buttons_div = by_id("payload_buttons");
     const view_payload_but = by_id("view_payload");
     const view_injected_but = by_id("view_injected");
     const container_for_injected = by_id("container_for_injected");
     const queried_items = new Map();
     let max_injected_script_id = 0;
     function handle_activity_report(message)
+    {
         connected_chbx.checked = true;
-...
     	const components = settings.components;
     	if (components) {
     	    payload_span.textContent = nice_name(...components);
     	    payload_buttons_div.classList.remove("hide");
     	    const settings_opener = () => open_in_settings(...components);
     	    view_payload_but.classList.remove("hide");
     	    view_payload_but.addEventListener("click", settings_opener);
     	} else {
     	    payload_span.textContent = "none";
+    	}
+        }
         if (type === "script") {
     	const h4 = document.createElement("h4");
     	const pre = document.createElement("pre");
     	h4.textContent = "script";
     	pre.textContent = data;
     	container_for_injected.appendChild(h4);
     	container_for_injected.appendChild(pre);
     	const template = clone_template("injected_script");
     	const chbx_id = `injected_script_${max_injected_script_id++}`;
     	template.chbx.id = chbx_id;
     	template.lbl.setAttribute("for", chbx_id);
     	template.script_contents.textContent = data;
     	container_for_injected.appendChild(template.div);
+        }
         if (type === "repo_query_action") {
     	query_started_chbx.checked = true;
     	const key = data.prefix + data.item;
     	const results = queried_items.get(key) || {};
     	Object.assign(results, data.results);
-...
     function create_results_list(url)
+    {
         const list_div = document.createElement("div");
         const list_head = document.createElement("h4");
         const list = document.createElement("ul");
         const cloned_template = clone_template("multi_repos_query_result");
         cloned_template.url_span.textContent = url;
         container_for_repo_responses.appendChild(cloned_template.div);
         list_head.textContent = url;
         list_div.appendChild(list_head);
         list_div.appendChild(list);
         container_for_repo_responses.appendChild(list_div);
         cloned_template.by_repo = new Map();
         results_lists.set(url, cloned_template);
         const list_object = {list, by_repo: new Map()};
         results_lists.set(url, list_object);
         return list_object;
         return cloned_template;
+    }
     function create_result_item(list_object, repo_url, result)
+    {
         const result_li = document.createElement("li");
         const repo_url_span = document.createElement("span");
         const result_item = {result_li, appended: null};
         repo_url_span.textContent = repo_url;
         result_li.appendChild(repo_url_span);
         const cloned_template = clone_template("single_repo_query_result");
         cloned_template.repo_url.textContent = repo_url;
         cloned_template.appended = null;
         list_object.list.appendChild(result_li);
         list_object.by_repo.set(repo_url, result_item);
         list_object.ul.appendChild(cloned_template.li);
         list_object.by_repo.set(repo_url, cloned_template);
         return result_item;
         return cloned_template;
+    }
     function set_appended(result_item, element)
-...
         if (result_item.appended)
     	result_item.appended.remove();
         result_item.appended = element;
         result_item.result_li.appendChild(element);
         result_item.li.appendChild(element);
+    }
     function show_message(result_item, text)
-...
         entry_object.chbx.removeEventListener("change", entry_object.unroll_cb);
         delete entry_object.unroll_cb;
         entry_object.unroll.textContent = "preview not implemented...";
         entry_object.unroll.innerHTML = "preview not implemented...<br />(consider contributing)";
+    }
     const show_install_chbx = by_id("show_install_view_chbx");
     let import_frame;
     let install_target = null;
-...
     function install_clicked(entry_object)
+    {
         show_install_chbx.checked = true;
         import_frame.show_loading();
         install_target = {
-...
     function show_query_successful_result(result_item, repo_url, result)
+    {
         const ul = document.createElement("ul");
         set_appended(result_item, ul);
         const cloned_ul_template = clone_template("result_patterns_list");
         set_appended(result_item, cloned_ul_template.ul);
         for (const match of result) {
     	const entry_object = clone_template("query_match_li");
     	entry_object.pattern.textContent = match.pattern;
     	ul.appendChild(entry_object.li);
     	cloned_ul_template.ul.appendChild(entry_object.li);
     	if (!match.payload) {
     	    entry_object.payload.textContent = "(none)";
     	    for (const key of ["chbx", "br", "triangle", "unroll"])
     	    for (const key of ["chbx", "triangle", "unroll"])
     		entry_object[key].remove();
     	    continue;
+    	}
     	entry_object.component.textContent = nice_name(...match.payload);
     	entry_object.payload.textContent = nice_name(...match.payload);
     	const install_cb = () => install_clicked(entry_object);
     	entry_object.btn.addEventListener("click", install_cb);
-...
+    {
         storage = await get_remote_storage();
         import_frame = await get_import_frame();
         import_frame.onclose = () => show_install_chbx.checked = false;
         import_frame.onclose = () => show_queried_view_radio.checked = true;
         show_page_activity_info();
+    }

Also available in: Unified diff