Revision 4b59dced
Added by koszko about 2 years ago
| html/base.css | ||
|---|---|---|
| 13 | 13 | 
    overflow: auto;  | 
| 14 | 14 | 
    }  | 
| 15 | 15 | 
     | 
| 16 | 
    .bold, h2 {
   | 
|
| 17 | 
    font-weight: bold;  | 
|
| 18 | 
    }  | 
|
| 19 | 
     | 
|
| 20 | 
    h2 {
   | 
|
| 21 | 
    margin: 8px;  | 
|
| 22 | 
    font-size: 120%;  | 
|
| 23 | 
    }  | 
|
| 24 | 
     | 
|
| 25 | 
    h3 {
   | 
|
| 26 | 
    padding: 5px;  | 
|
| 27 | 
    font-size: 108%;  | 
|
| 28 | 
    text-shadow: 0 0 0 #454;  | 
|
| 29 | 
    }  | 
|
| 30 | 
     | 
|
| 16 | 31 | 
    textarea {
   | 
| 17 | 32 | 
    font-family: monospace;  | 
| 18 | 33 | 
    }  | 
| ... | ... | |
| 84 | 99 | 
    .has_bottom_line::after {
   | 
| 85 | 100 | 
    background: linear-gradient(#555, transparent);  | 
| 86 | 101 | 
    }  | 
| 102 | 
     | 
|
| 103 | 
    .nowrap {
   | 
|
| 104 | 
    white-space: nowrap;  | 
|
| 105 | 
    }  | 
|
| html/display-panel.html | ||
|---|---|---|
| 17 | 17 | 
    width: -moz-max-content;  | 
| 18 | 18 | 
    }  | 
| 19 | 19 | 
     | 
| 20 | 
          .bold, h2 {
   | 
|
| 21 | 
    font-weight: bold;  | 
|
| 22 | 
    }  | 
|
| 23 | 
     | 
|
| 24 | 
          h2 {
   | 
|
| 25 | 
    margin: 8px;  | 
|
| 26 | 
    font-size: 120%;  | 
|
| 27 | 
    }  | 
|
| 28 | 
     | 
|
| 29 | 20 | 
          .top>h2 {
   | 
| 30 | 21 | 
    padding-left: calc(0.8*3.2em - 8px);  | 
| 31 | 22 | 
    }  | 
| ... | ... | |
| 38 | 29 | 
    padding-left: 0;  | 
| 39 | 30 | 
    }  | 
| 40 | 31 | 
     | 
| 41 | 
          h3 {
   | 
|
| 42 | 
    padding: 5px;  | 
|
| 43 | 
    font-size: 108%;  | 
|
| 44 | 
    text-shadow: 0 0 0 #454;  | 
|
| 45 | 
    }  | 
|
| 46 | 
     | 
|
| 47 | 32 | 
          .unroll_chbx:not(:checked)+div>:not(:first-child) {
   | 
| 48 | 33 | 
    display: none;  | 
| 49 | 34 | 
    }  | 
| ... | ... | |
| 179 | 164 | 
    </head>  | 
| 180 | 165 | 
    <body>  | 
| 181 | 166 | 
    <template>  | 
| 182 | 
    <tr id="pattern_entry" data-template="entry">  | 
|
| 167 | 
          <tr id="pattern_entry" class="nowrap" data-template="entry">
   | 
|
| 183 | 168 | 
    <td data-template="name"></td>  | 
| 184 | 169 | 
    <td>  | 
| 185 | 170 | 
    <div class="button" data-template="button">Add setting</div>  | 
| ... | ... | |
| 236 | 221 | 
    <input id="show_install_view_radio" type="radio" class="show_next" name="current_view"></input>  | 
| 237 | 222 | 
    <div id="install_view">  | 
| 238 | 223 | 
    <div class="top has_bottom_line"><h2> Site modifiers install </h2></div>  | 
| 239 | 
    <IMPORT html/import_frame.html />  | 
|
| 224 | 
    <div class="padding_inline">  | 
|
| 225 | 
    <IMPORT html/import_frame.html />  | 
|
| 226 | 
    </div>  | 
|
| 240 | 227 | 
    </div>  | 
| 241 | 228 | 
     | 
| 242 | 229 | 
    <input id="show_injected_view_radio" type="radio" class="show_next" name="current_view"></input>  | 
| ... | ... | |
| 288 | 275 | 
    <div>  | 
| 289 | 276 | 
    <table class="active_setting_table">  | 
| 290 | 277 | 
    <tbody>  | 
| 291 | 
    <tr>  | 
|
| 278 | 
    		<tr class="nowrap">
   | 
|
| 292 | 279 | 
    <td>Matched pattern:</td>  | 
| 293 | 280 | 
    <td id="pattern" class="bold">...</td>  | 
| 294 | 281 | 
    <td>  | 
| ... | ... | |
| 297 | 284 | 
    </button>  | 
| 298 | 285 | 
    </td>  | 
| 299 | 286 | 
    </tr>  | 
| 300 | 
    <tr>  | 
|
| 287 | 
    		<tr class="nowrap">
   | 
|
| 301 | 288 | 
    <td>Scripts blocked:</td>  | 
| 302 | 289 | 
    <td id="blocked" class="bold">...</td>  | 
| 303 | 290 | 
    <td></td>  | 
| 304 | 291 | 
    </tr>  | 
| 305 | 
    <tr>  | 
|
| 292 | 
    		<tr class="nowrap">
   | 
|
| 306 | 293 | 
    <td>Injected payload:</td>  | 
| 307 | 294 | 
    <td id="payload" class="bold">...</td>  | 
| 308 | 295 | 
    <td id="payload_buttons" class="hide">  | 
| html/display-panel.js | ||
|---|---|---|
| 23 | 23 | 
    * IMPORT url_matches  | 
| 24 | 24 | 
    * IMPORT each_url_pattern  | 
| 25 | 25 | 
    * IMPORT by_id  | 
| 26 | 
    * IMPORT get_template  | 
|
| 27 | 26 | 
    * IMPORT clone_template  | 
| 28 | 27 | 
    * IMPORTS_END  | 
| 29 | 28 | 
    */  | 
| html/import_frame.html | ||
|---|---|---|
| 1 | 
    <style>  | 
|
| 2 | 
      .padding_right {
   | 
|
| 3 | 
    padding-right: 0.3em;  | 
|
| 4 | 
    }  | 
|
| 5 | 
    </style>  | 
|
| 1 | 6 | 
    <template>  | 
| 2 | 
    <li id="import_li">  | 
|
| 3 | 
    <span></span>  | 
|
| 4 | 
    <input type="checkbox" style="display: inline;" checked></input>  | 
|
| 5 | 
    <span></span>  | 
|
| 6 | 
    </li>  | 
|
| 7 | 
    <tr id="import_entry" class="nowrap" data-template="entry">  | 
|
| 8 | 
    <td>  | 
|
| 9 | 
    <input type="checkbox" style="display: inline;" checked data-template="chbx"></input>  | 
|
| 10 | 
    <span data-template="name_span"></span>  | 
|
| 11 | 
    </td>  | 
|
| 12 | 
    <td class="bold padding_right" data-template="warning"></td>  | 
|
| 13 | 
    </tr>  | 
|
| 7 | 14 | 
    </template>  | 
| 15 | 
     | 
|
| 8 | 16 | 
    <input id="import_loading_radio" type="radio" name="import_window_content" class="show_next"></input>  | 
| 9 | 17 | 
    <span> Loading... </span>  | 
| 18 | 
     | 
|
| 10 | 19 | 
    <input id="import_failed_radio" type="radio" name="import_window_content" class="show_next"></input>  | 
| 11 | 20 | 
    <div>  | 
| 12 | 21 | 
    <span id="import_errormsg"></span>  | 
| ... | ... | |
| 14 | 23 | 
    <pre id="import_errordetail"></pre>  | 
| 15 | 24 | 
    <button id="import_failok_but"> OK </button>  | 
| 16 | 25 | 
    </div>  | 
| 26 | 
     | 
|
| 17 | 27 | 
    <input id="import_selection_radio" type="radio" name="import_window_content" class="show_next"></input>  | 
| 18 | 28 | 
    <div>  | 
| 19 | 29 | 
    <button id="check_all_import_but"> Check all </button>  | 
| 20 | 30 | 
    <button id="uncheck_all_import_but"> Uncheck all </button>  | 
| 21 | 31 | 
    <button id="uncheck_colliding_import_but"> Uncheck existing </button>  | 
| 22 | 
    <ul id="import_ul">  | 
|
| 23 | 
    </ul>  | 
|
| 32 | 
    <aside id="existing_settings_note">  | 
|
| 33 | 
    Settings that would owerwrite existing ones are marked "!".  | 
|
| 34 | 
    </aside>  | 
|
| 35 | 
    <div id="import_table_wrapper" class="table_wrapper">  | 
|
| 36 | 
    <div>  | 
|
| 37 | 
    <table>  | 
|
| 38 | 
    <tbody id="import_list">  | 
|
| 39 | 
    </tbody>  | 
|
| 40 | 
    </table>  | 
|
| 41 | 
    </div>  | 
|
| 42 | 
    </div>  | 
|
| 24 | 43 | 
    <button id="commit_import_but"> OK </button>  | 
| 25 | 44 | 
    <button id="cancel_import_but"> Cancel </button>  | 
| 26 | 45 | 
    </div>  | 
| html/import_frame.js | ||
|---|---|---|
| 9 | 9 | 
    * IMPORTS_START  | 
| 10 | 10 | 
    * IMPORT get_remote_storage  | 
| 11 | 11 | 
    * IMPORT by_id  | 
| 12 | 
     * IMPORT get_template
   | 
|
| 12 | 
     * IMPORT clone_template
   | 
|
| 13 | 13 | 
    * IMPORT nice_name  | 
| 14 | 14 | 
    * IMPORT make_once  | 
| 15 | 15 | 
    * IMPORTS_END  | 
| ... | ... | |
| 17 | 17 | 
     | 
| 18 | 18 | 
    let storage;  | 
| 19 | 19 | 
     | 
| 20 | 
    const import_li_template = get_template("import_li");
   | 
|
| 21 | 
    import_li_template.removeAttribute("id");
   | 
|
| 22 | 
     | 
|
| 23 | 
    function import_li_id(prefix, item)  | 
|
| 24 | 
    {
   | 
|
| 25 | 
        return `ili_${prefix}_${item}`;
   | 
|
| 26 | 
    }  | 
|
| 27 | 
     | 
|
| 28 | 
    let import_ul = by_id("import_ul");
   | 
|
| 20 | 
    let import_list = by_id("import_list");
   | 
|
| 29 | 21 | 
    let import_chbxs_colliding = undefined;  | 
| 22 | 
    let entry_objects = undefined;  | 
|
| 30 | 23 | 
    let settings_import_map = undefined;  | 
| 31 | 24 | 
     | 
| 32 | 
    function add_import_li(prefix, name)
   | 
|
| 25 | 
    function add_import_entry(prefix, name)
   | 
|
| 33 | 26 | 
    {
   | 
| 34 | 
    let li = import_li_template.cloneNode(true);  | 
|
| 35 | 
    let name_span = li.firstElementChild;  | 
|
| 36 | 
    let chbx = name_span.nextElementSibling;  | 
|
| 37 | 
    let warning_span = chbx.nextElementSibling;  | 
|
| 27 | 
        const cloned_template = clone_template("import_entry");
   | 
|
| 28 | 
        Object.assign(cloned_template, {prefix, name});
   | 
|
| 38 | 29 | 
     | 
| 39 | 
        li.setAttribute("data-prefix", prefix);
   | 
|
| 40 | 
        li.setAttribute("data-name", name);
   | 
|
| 41 | 
    li.id = import_li_id(prefix, name);  | 
|
| 42 | 
    name_span.textContent = nice_name(prefix, name);  | 
|
| 30 | 
    cloned_template.name_span.textContent = nice_name(prefix, name);  | 
|
| 43 | 31 | 
     | 
| 44 | 32 | 
        if (storage.get(prefix, name) !== undefined) {
   | 
| 45 | 
    import_chbxs_colliding.push(chbx);  | 
|
| 46 | 
    	warning_span.textContent = "(will overwrite existing setting!)";
   | 
|
| 33 | 
    	import_chbxs_colliding.push(cloned_template.chbx);
   | 
|
| 34 | 
    	cloned_template.warning.textContent = "!";
   | 
|
| 47 | 35 | 
    }  | 
| 48 | 36 | 
     | 
| 49 | 
    import_ul.appendChild(li);  | 
|
| 37 | 
    import_list.appendChild(cloned_template.entry);  | 
|
| 38 | 
     | 
|
| 39 | 
    return cloned_template;  | 
|
| 50 | 40 | 
    }  | 
| 51 | 41 | 
     | 
| 52 | 42 | 
    function check_all_imports()  | 
| 53 | 43 | 
    {
   | 
| 54 | 
        for (let li of import_ul.children)
   | 
|
| 55 | 
    	li.firstElementChild.nextElementSibling.checked = true;
   | 
|
| 44 | 
        for (const entry_object of entry_objects)
   | 
|
| 45 | 
    	entry_object.chbx.checked = true;
   | 
|
| 56 | 46 | 
    }  | 
| 57 | 47 | 
     | 
| 58 | 48 | 
    function uncheck_all_imports()  | 
| 59 | 49 | 
    {
   | 
| 60 | 
        for (let li of import_ul.children)
   | 
|
| 61 | 
    	li.firstElementChild.nextElementSibling.checked = false;
   | 
|
| 50 | 
        for (const entry_object of entry_objects)
   | 
|
| 51 | 
    	entry_object.chbx.checked = false;
   | 
|
| 62 | 52 | 
    }  | 
| 63 | 53 | 
     | 
| 64 | 54 | 
    function uncheck_colliding_imports()  | 
| ... | ... | |
| 69 | 59 | 
     | 
| 70 | 60 | 
    function commit_import()  | 
| 71 | 61 | 
    {
   | 
| 72 | 
        for (let li of import_ul.children) {
   | 
|
| 73 | 
    let chbx = li.firstElementChild.nextElementSibling;  | 
|
| 74 | 
     | 
|
| 75 | 
    if (!chbx.checked)  | 
|
| 62 | 
        for (const entry_object of entry_objects) {
   | 
|
| 63 | 
    if (!entry_object.chbx.checked)  | 
|
| 76 | 64 | 
    continue;  | 
| 77 | 65 | 
     | 
| 78 | 
    	let prefix = li.getAttribute("data-prefix");
   | 
|
| 79 | 
    	let name = li.getAttribute("data-name");
   | 
|
| 80 | 
    let key = prefix + name;  | 
|
| 81 | 
    let value = settings_import_map.get(key);  | 
|
| 82 | 
    storage.set(prefix, name, value);  | 
|
| 66 | 
    const key = entry_object.prefix + entry_object.name;  | 
|
| 67 | 
    const value = settings_import_map.get(key);  | 
|
| 68 | 
    storage.set(entry_object.prefix, entry_object.name, value);  | 
|
| 83 | 69 | 
    }  | 
| 84 | 70 | 
     | 
| 85 | 71 | 
    deactivate();  | 
| ... | ... | |
| 106 | 92 | 
    }  | 
| 107 | 93 | 
     | 
| 108 | 94 | 
    const import_selection_radio = by_id("import_selection_radio");
   | 
| 95 | 
    const existing_settings_note = by_id("existing_settings_note");
   | 
|
| 109 | 96 | 
     | 
| 110 | 97 | 
    function show_selection(settings)  | 
| 111 | 98 | 
    {
   | 
| 112 | 99 | 
    import_selection_radio.checked = true;  | 
| 113 | 100 | 
     | 
| 114 | 
        let old_children = import_ul.children;
   | 
|
| 101 | 
        let old_children = import_list.children;
   | 
|
| 115 | 102 | 
    while (old_children[0] !== undefined)  | 
| 116 | 
    	import_ul.removeChild(old_children[0]);
   | 
|
| 103 | 
    	import_list.removeChild(old_children[0]);
   | 
|
| 117 | 104 | 
     | 
| 118 | 105 | 
    import_chbxs_colliding = [];  | 
| 106 | 
    entry_objects = [];  | 
|
| 119 | 107 | 
    settings_import_map = new Map();  | 
| 120 | 108 | 
     | 
| 121 | 109 | 
        for (let setting of settings) {
   | 
| 122 | 110 | 
    let [key, value] = Object.entries(setting)[0];  | 
| 123 | 111 | 
    let prefix = key[0];  | 
| 124 | 112 | 
    let name = key.substring(1);  | 
| 125 | 
    	add_import_li(prefix, name);
   | 
|
| 113 | 
    	entry_objects.push(add_import_entry(prefix, name));
   | 
|
| 126 | 114 | 
    settings_import_map.set(key, value);  | 
| 127 | 115 | 
    }  | 
| 116 | 
     | 
|
| 117 | 
    const op = import_chbxs_colliding.length > 0 ? "remove" : "add";  | 
|
| 118 | 
        existing_settings_note.classList[op]("hide");
   | 
|
| 128 | 119 | 
    }  | 
| 129 | 120 | 
     | 
| 130 | 121 | 
    function deactivate()  | 
| 131 | 122 | 
    {
   | 
| 132 | 123 | 
    /* Let GC free some memory */  | 
| 133 | 124 | 
    import_chbxs_colliding = undefined;  | 
| 125 | 
    entry_objects = undefined;  | 
|
| 134 | 126 | 
    settings_import_map = undefined;  | 
| 135 | 127 | 
     | 
| 136 | 128 | 
    if (exports.onclose)  | 
| 137 | 129 | 
    exports.onclose();  | 
| 138 | 130 | 
    }  | 
| 139 | 131 | 
     | 
| 140 | 
    const exports = {show_loading, show_error, show_selection, deactivate};
   | 
|
| 132 | 
    const wrapper = by_id("import_table_wrapper");
   | 
|
| 133 | 
    const style_table = (...cls) => cls.forEach(c => wrapper.classList.add(c));  | 
|
| 134 | 
     | 
|
| 135 | 
    const exports =  | 
|
| 136 | 
          {show_loading, show_error, show_selection, deactivate, style_table};
   | 
|
| 141 | 137 | 
     | 
| 142 | 138 | 
    async function init()  | 
| 143 | 139 | 
    {
   | 
| html/options.html | ||
|---|---|---|
| 89 | 89 | 
    background: linear-gradient(#555, #e0f0f0);  | 
| 90 | 90 | 
    }  | 
| 91 | 91 | 
     | 
| 92 | 
          .table_wrapper>.always_scrollbar{
   | 
|
| 92 | 
          .table_wrapper.always_scrollbar>* {
   | 
|
| 93 | 93 | 
    border-left: solid #454 8px;  | 
| 94 | 94 | 
    max-height: 80vh;  | 
| 95 | 95 | 
    overflow-y: scroll;  | 
| 96 | 96 | 
    }  | 
| 97 | 97 | 
     | 
| 98 | 
          .table_wrapper .table_wrapper>.always_scrollbar,
   | 
|
| 99 | 
          .popup_frame .table_wrapper>.always_scrollbar {
   | 
|
| 98 | 
          .table_wrapper .table_wrapper.always_scrollbar>*,
   | 
|
| 99 | 
          .popup_frame .table_wrapper.always_scrollbar>* {
   | 
|
| 100 | 100 | 
    max-height: 60vh;  | 
| 101 | 101 | 
    }  | 
| 102 | 102 | 
     | 
| ... | ... | |
| 108 | 108 | 
    margin: 0 auto;  | 
| 109 | 109 | 
    }  | 
| 110 | 110 | 
     | 
| 111 | 
          tr>td:first-child {
   | 
|
| 111 | 
          td:first-child {
   | 
|
| 112 | 112 | 
    max-width: 70vw;  | 
| 113 | 113 | 
    overflow: hidden;  | 
| 114 | 114 | 
    }  | 
| ... | ... | |
| 156 | 156 | 
    </head>  | 
| 157 | 157 | 
    <body>  | 
| 158 | 158 | 
    <template>  | 
| 159 | 
    <tr id="item_li">  | 
|
| 159 | 
          <tr id="item_li" class="nowrap">
   | 
|
| 160 | 160 | 
    <td></td>  | 
| 161 | 161 | 
    <td><div class="button"> Edit </div></td>  | 
| 162 | 162 | 
    <td><div class="button"> Remove </div></td>  | 
| 163 | 163 | 
    <td><div class="button"> Export </div></td>  | 
| 164 | 164 | 
    </tr>  | 
| 165 | 
    <tr id="bag_component_li">  | 
|
| 165 | 
          <tr id="bag_component_li" class="nowrap">
   | 
|
| 166 | 166 | 
    <td></td>  | 
| 167 | 167 | 
    <td><div class="button"> Remove </div></td>  | 
| 168 | 168 | 
    </tr>  | 
| 169 | 
    <tr id="chbx_component_li">  | 
|
| 169 | 
          <tr id="chbx_component_li" class="nowrap">
   | 
|
| 170 | 170 | 
    <td>  | 
| 171 | 171 | 
    <input type="checkbox" style="display: inline;"></input>  | 
| 172 | 172 | 
    <span></span>  | 
| 173 | 173 | 
    </td>  | 
| 174 | 174 | 
    </tr>  | 
| 175 | 
    <tr id="radio_component_li">  | 
|
| 175 | 
          <tr id="radio_component_li" class="nowrap">
   | 
|
| 176 | 176 | 
    <td>  | 
| 177 | 177 | 
    <input type="radio" style="display: inline;" name="page_components"></input>  | 
| 178 | 178 | 
    <span></span>  | 
| ... | ... | |
| 336 | 336 | 
     | 
| 337 | 337 | 
    <div id="radio_components_window" class="hide popup" position="absolute">  | 
| 338 | 338 | 
    <div class="popup_frame">  | 
| 339 | 
    <div class="table_wrapper tight_table has_bottom_line has_upper_line">  | 
|
| 340 | 
    	  <div class="always_scrollbar">
   | 
|
| 339 | 
    	<div class="table_wrapper tight_table always_scrollbar has_bottom_line has_upper_line">
   | 
|
| 340 | 
    <div>  | 
|
| 341 | 341 | 
    <table>  | 
| 342 | 342 | 
    <tbody id="radio_components_ul">  | 
| 343 | 343 | 
    <tr id="radio_component_none_li">  | 
| html/options_main.js | ||
|---|---|---|
| 37 | 37 | 
    const op = ((list_elem.children.length === 1 &&  | 
| 38 | 38 | 
    		 list_elem.children[0].classList.contains("hide")) ||
   | 
| 39 | 39 | 
    list_elem.children.length < 1) ? "remove" : "add";  | 
| 40 | 
        list_elem.parentElement.parentElement.classList[op]("always_scrollbar");
   | 
|
| 40 | 
        while (!list_elem.classList.contains("table_wrapper"))
   | 
|
| 41 | 
    list_elem = list_elem.parentElement;  | 
|
| 42 | 
        list_elem.classList[op]("always_scrollbar");
   | 
|
| 41 | 43 | 
    }  | 
| 42 | 44 | 
     | 
| 43 | 45 | 
    function item_li_id(prefix, item)  | 
| ... | ... | |
| 632 | 634 | 
     | 
| 633 | 635 | 
    import_frame = await get_import_frame();  | 
| 634 | 636 | 
    import_frame.onclose = hide_import_window;  | 
| 637 | 
        import_frame.style_table("has_bottom_line", "always_scrollbar",
   | 
|
| 638 | 
    "has_upper_line", "tight_table");  | 
|
| 635 | 639 | 
    }  | 
| 636 | 640 | 
     | 
| 637 | 641 | 
    /*  | 
| html/table.css | ||
|---|---|---|
| 32 | 32 | 
     | 
| 33 | 33 | 
    td:first-child {
   | 
| 34 | 34 | 
    padding: 3px 10px 6px;  | 
| 35 | 
    white-space: nowrap;  | 
|
| 36 | 35 | 
    }  | 
| 37 | 36 | 
     | 
| 38 | 37 | 
    .tight_table td:first-child {
   | 
Also available in: Unified diff
add styling to settings install(import) dialog