diff options
Diffstat (limited to 'html/display_panel.html')
| -rw-r--r-- | html/display_panel.html | 375 |
1 files changed, 375 insertions, 0 deletions
diff --git a/html/display_panel.html b/html/display_panel.html new file mode 100644 index 0000000..5ee20f1 --- /dev/null +++ b/html/display_panel.html @@ -0,0 +1,375 @@ +<!doctype html> +<!-- + SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0 + + Extension's popup page + + This file is part of Haketilo. + + Copyright (C) 2021 Wojtek Kosior <koszko@koszko.org> + + File is dual-licensed. You can choose either GPLv3+, CC BY-SA or both. + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see <https://www.gnu.org/licenses/>. + + I, Wojtek Kosior, thereby promise not to sue for violation of this file's + licenses. Although I request that you do not make use this code in a + proprietary program, I am not going to enforce this in court. + --> +<html> + <head> + <meta charset="utf-8"/> + <title>Haketilo - page settings</title> +#COPY_FILE html/reset.css + <link type="text/css" rel="stylesheet" href="reset.css" /> +#COPY_FILE html/base.css + <link type="text/css" rel="stylesheet" href="base.css" /> +#COPY_FILE html/back_button.css + <link type="text/css" rel="stylesheet" href="back_button.css" /> +#COPY_FILE html/table.css + <link type="text/css" rel="stylesheet" href="table.css" /> +#IF MOZILLA +#COPY_FILE html/mozilla_scrollbar_fix.css + <link type="text/css" rel="stylesheet" href="mozilla_scrollbar_fix.css" /> +#ENDIF + <style> + body { + width: max-content; + width: -moz-fit-content; + } + + .top>h2 { + padding-left: calc(0.8*3.2em - 8px); + } + + .top { + line-height: calc(0.8*3.6em - 16px); + } + + #main_view>.top>h2 { + padding-left: 0; + max-width: 550px + } + + .unroll_chbx:not(:checked)+div>:not(:first-child) { + display: none; + } + + .unroll_triangle { + height: 1em; + width: 1em; + display: inline-block; + } + + .unroll_triangle::after { + content: ""; + width: 0.6em; + height: 0.6em; + background: linear-gradient(-45deg, currentColor 50%, transparent 50%); + display: block; + position: relative; + transform: rotate(-45deg); + top: 0.3em; + } + + .unroll_chbx:checked+div>:first-child .unroll_triangle::after { + transform: rotate(45deg); + left: 0.2em; + top: 0.2em; + } + + .unroll_chbx:checked+div>:first-child .unroll_block { + display: block; + } + + .unroll_chbx:checked+div>:first-child { + line-height: 1.4em; + } + + .l2_ul { + border-left: solid #454 5px; + } + + .l1_li { + margin-top: 0.3em; + margin-bottom: 0.3em; + } + + .l1_li>div { + padding: 0.3em 0.3em 0.3em 0; + } + + .l2_li { + padding: 0.3em; + } + + #container_for_injected>*:nth-child(odd), + .l2_li:nth-child(odd) { + background-color: #e5e5e5; + } + + #container_for_injected>#none_injected:not(:last-child) { + display: none; + } + + #page_url_heading>span { + display: inline-block; + } + + .back_button { + position: fixed; + z-index: 1; + top: 0; + left: 0; + /* The following scales the entire button. */ + font-size: 80%; + } + + #show_main_view_radio:checked~.back_button { + margin-left: -3.2em; + } + + #show_main_view_radio:not(:checked)~.back_button { + transition: all 0.2s ease-out; + } + + pre { + font-family: monospace; + background-color: white; + padding: 1px 5px; + } + + .matched_pattern { + font-weight: bold; + } + + tr.matched_pattern~tr { + color: #777; + font-size: 90%; + } + + .padding_inline { + padding-left: 5px; + padding-right: 5px; + } + + .padding_top { + padding-top: 5px; + } + + .header { + padding-bottom: 0.3em; + margin-bottom: 0.5em; + text-align: center; + } + + .middle { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .footer { + padding-top: 0.3em; + margin-top: 0.5em; + text-align: center; + } + + .active_setting_table { + margin-bottom: 0.5em; + } + + .active_setting_table td { + padding: 5px; + vertical-align: middle; + } + </style> + </head> + <body> + <template> + <tr id="pattern_entry" class="nowrap" data-template="entry"> + <td data-template="name"></td> + <td> + <div class="button" data-template="button">Add setting</div> + </td> + </tr> + + <li id="query_match_li" class="l2_li" data-template="li"> + <div> + <span>pattern:</span> + <span class="bold" data-template="pattern"></span> + <label class="button slimbutton" for="show_install_view_radio" data-template="btn"> + Install + </label> + </div> + <div id="unrollable_component" data-template="unroll_container"> + <input type="checkbox" class="unroll_chbx" data-template="chbx"></input> + <div> + <span>payload: + <label class="bold unroll_block" data-template="lbl"> + <div data-template="triangle" class="unroll_triangle"></div> + <span data-template="payload"></span> + </label> + </span> + <div data-template="unroll"></div> + </div> + </div> + </li> + + <div id="injected_script" data-template="div"> + <input type="checkbox" class="unroll_chbx" data-template="chbx"></input> + <div> + <label data-template="lbl"> + <h3><div class="unroll_triangle"></div> script</h3> + </label> + <pre class="has_bottom_thin_line has_upper_thin_line" data-template="script_contents"></pre> + </div> + </div> + + <div id="multi_repos_query_result" data-template="div"> + Results for <span class="bold" data-template="url_span"></span> + <ul class="l1_ul" data-template="ul"></ul> + </div> + + <li id="single_repo_query_result" class="l1_li" data-template="li"> + <div> + From <span class="bold" data-template="repo_url"></span> + </div> + </li> + + <ul id="result_patterns_list" class="l2_ul" data-template="ul"> + </ul> + </template> + + <input id="show_install_view_radio" type="radio" class="show_next" name="current_view"></input> + <div id="install_view"> + <div class="top has_bottom_line"><h2> Site modifiers install </h2></div> + <div class="padding_inline"> +#INCLUDE html/import_frame.html + </div> + </div> + + <input id="show_injected_view_radio" type="radio" class="show_next" name="current_view"></input> + <div id="injected_view"> + <div class="top has_bottom_line"><h2>Injected scripts</h2></div> + <div id="container_for_injected"> + <span id="none_injected">None</span> + </div> + </div> + + <input id="show_patterns_view_radio" type="radio" class="show_next" name="current_view"></input> + <div> + <div class="top has_bottom_line"><h2>Possible patterns for this page</h2></div> + <div class="padding_inline"> + <aside> + Patterns higher are more specific and override the ones below. + </aside> + </div> + <div class="table_wrapper firefox_scrollbars_hacky_fix"> + <div> + <table> + <tbody id="possible_patterns"> + </tbody> + </table> + </div> + </div> + <div class="padding_inline padding_top has_upper_thin_line firefox_scrollbars_hacky_fix has_inline_content"> + <span class="nowrap"> +#INCLUDE html/default_blocking_policy.html + </span> + </div> + </div> + + <input id="show_queried_view_radio" type="radio" class="show_next" name="current_view"></input> + <div> + <div class="top has_bottom_line"><h2>Queried from repositories</h2></div> + <div id="container_for_repo_responses" class="padding_inline"> + </div> + </div> + + <input id="show_main_view_radio" type="radio" class="show_next" name="current_view" checked></input> + <div id="main_view"> + <div class="top has_bottom_line"><h2 id="page_url_heading"></h2></div> + <h3 id="privileged_notice" class="middle hide">Privileged page</h3> + + <div id="page_state" class="hide"> + <div class="header padding_inline has_bottom_thin_line"> + <label for="show_patterns_view_radio" class="button"> + Edit settings for this page + </label> + </div> + <div class="middle padding_inline"> + <input id="connected_chbx" type="checkbox" class="show_hide_next2"></input> + <div> + <table class="active_setting_table"> + <tbody> + <tr class="nowrap"> + <td>Matched pattern:</td> + <td id="pattern" class="bold">...</td> + <td> + <button id="view_pattern" class="hide"> + View in settings + </button> + </td> + </tr> + <tr class="nowrap"> + <td>Scripts blocked:</td> + <td id="blocked" class="bold">...</td> + <td></td> + </tr> + <tr class="nowrap"> + <td>Injected payload:</td> + <td id="payload" class="bold">...</td> + <td id="payload_buttons" class="hide"> + <button id="view_payload"> View in settings </button> + <br/> + <label id="view_injected" class="button" for="show_injected_view_radio"> + View injected scripts + </label> + </td> + </tr> + <tr> + <td id="content_type" colspan="3" class="hide"> + This is a non-HTML page. Chosen payload will not be injected. + </td> + </tr> + </tbody> + </table> + <label id="query_pattern" for="show_queried_view_radio" class="button"> + Install scripts for this page + </label> + </div> + <div> + <h3> + Connecting to content script..<span id="loading_point">.</span> + </h3> + <aside id="reload_notice"> + Try reloading the page. + </aside> + </div> + </div> + </div> + + <div class="footer padding_inline has_upper_thin_line"> + <button id="settings_but" type="button"> + Open Haketilo settings + </button> + </div> + </div> + + <div class="has_upper_line"></div> + + <label for="show_main_view_radio" class="back_button"><div></div></label> +#LOADJS html/display_panel.js + </body> +</html> |