summaryrefslogtreecommitdiff
path: root/html/display-panel.html
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2021-09-01 11:45:06 +0200
committerWojtek Kosior <koszko@koszko.org>2021-09-01 11:45:06 +0200
commit453ba03962ececcdff9264bea606b7bc488c1803 (patch)
tree169d81bb94e2c2849d1756c65ad3a528a9d944db /html/display-panel.html
parent544c6df3ab1e331c6b6779b76ad33180a06b0b4d (diff)
downloadbrowser-extension-453ba03962ececcdff9264bea606b7bc488c1803.tar.gz
browser-extension-453ba03962ececcdff9264bea606b7bc488c1803.zip
add styling for popup page\n\nThis does not include styling for contents of the import dialog
Diffstat (limited to 'html/display-panel.html')
-rw-r--r--html/display-panel.html365
1 files changed, 292 insertions, 73 deletions
diff --git a/html/display-panel.html b/html/display-panel.html
index cbd7dc8..4121c30 100644
--- a/html/display-panel.html
+++ b/html/display-panel.html
@@ -9,117 +9,336 @@
<title>Hachette - page settings</title>
<link type="text/css" rel="stylesheet" href="reset.css" />
<link type="text/css" rel="stylesheet" href="base.css" />
+ <link type="text/css" rel="stylesheet" href="back_button.css" />
+ <link type="text/css" rel="stylesheet" href="table.css" />
<style>
body {
- width: 300px;
- height: 300px;
+ width: max-content;
+ width: -moz-max-content;
}
- ul {
- padding-inline-start: 15px;
+ .bold, h2 {
+ font-weight: bold;
}
- .bold {
- font-weight: bold;
+ h2 {
+ margin: 8px;
+ font-size: 120%;
+ }
+
+ .top>h2 {
+ padding-left: calc(0.8*3.2em - 8px);
+ }
+
+ .top {
+ line-height: calc(0.8*3.6em - 16px);
}
- .unroll_chbx:not(:checked)+*+label span.triangle:first-child+span.triangle,
- .unroll_chbx:checked+*+label span.triangle:first-child,
- .unroll_chbx:not(:checked)+*,
- .unroll_chbx:not(:checked)+*+label+* {
+ #main_view>.top>h2 {
+ padding-left: 0;
+ }
+
+ h3 {
+ padding: 5px;
+ font-size: 108%;
+ text-shadow: 0 0 0 #454;
+ }
+
+ .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;
+ border-top: dashed #4CAF50 1px;
+ border-bottom: dashed #4CAF50 1px;
+ 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;
+ }
+
+ .header {
+ border-bottom: dashed #4CAF50 1px;
+ padding-bottom: 0.3em;
+ margin-bottom: 0.5em;
+ text-align: center;
+ }
+
+ .middle {
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ }
+
+ .footer {
+ border-top: dashed #4CAF50 1px;
+ 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>
- <li id="pattern_li">
- <span></span>
- <button>View in settings</button>
- </li>
- <li id="query_match_li" class="queried_pattern_match" data-template="li">
+ <tr id="pattern_entry" 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>
- <button data-template="btn">Install</button>
+ <label class="button slimbutton" for="show_install_view_radio" data-template="btn">
+ Install
+ </label>
</div>
<div id="unrollable_component" data-template="unroll_container">
- <span data-template="component_label">payload:</span>
<input type="checkbox" class="unroll_chbx" data-template="chbx"></input>
- <br data-template="br"/>
- <label class="bold" data-template="lbl">
- <span data-template="triangle">
- <span class="triangle">&#x23F5;</span>
- <span class="triangle">&#x23F7;</span>
+ <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>
- <span data-template="component"></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>
- <div data-template="unroll"></div>
+ <pre 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_chbx" type="checkbox" class="show_hide_next2"></input>
+ <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>
<IMPORT html/import_frame.html />
- <!--
- <div id="install_status"></div>
- <label for="show_install_chbx" class="bold">Cancel install</label>
- <button id="commit_install_but">Commit install</button>
- -->
</div>
- <div id="main_view">
- <h2 id="page_url_heading"></h2>
-
- <input id="show_privileged_notice_chbx" type="checkbox" class="show_next"></input>
- <h3>Privileged page</h3>
-
- <input id="show_page_state_chbx" type="checkbox" class="show_next"></input>
- <div>
- <input id="possible_patterns_chbx" type="checkbox" class="unroll_chbx"></input>
- <span></span>
- <label for="possible_patterns_chbx">
- <h3>
- <span class="triangle">&#x23F5;</span>
- <span class="triangle">&#x23F7;</span>
- Possible patterns
- </h3>
- </label>
- <ul id="possible_patterns"></ul>
-
- <input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>
+
+ <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">
<div>
- Matched pattern: <span id="pattern" class="bold">...</span>
- <button id="view_pattern" class="hide">
- View in settings
- </button>
- <br/>
- Blocked: <span id="blocked" class="bold">...</span>
- <br/>
- Payload: <span id="payload" class="bold">...</span>
- <button id="view_payload" class="hide">
- View in settings
- </button>
- <h3>Injected</h3>
- <div id="container_for_injected">
- <span id="none_injected">None</span>
+ <table>
+ <tbody id="possible_patterns">
+ </tbody>
+ </table>
+ </div>
+ </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">
+ <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>
+ <td>Matched pattern:</td>
+ <td id="pattern" class="bold">...</td>
+ <td>
+ <button id="view_pattern" class="hide">
+ View in settings
+ </button>
+ </td>
+ </tr>
+ <tr>
+ <td>Scripts blocked:</td>
+ <td id="blocked" class="bold">...</td>
+ <td></td>
+ </tr>
+ <tr>
+ <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>
+ </tbody>
+ </table>
+ <label id="query_pattern" for="show_queried_view_radio" class="button">
+ Install scripts for this page
+ </label>
</div>
- <input id="query_started_chbx" type="checkbox" class="show_hide_next2"></input>
- <div id="container_for_repo_responses">
- <h3>Queried from repositories</h3>
+ <div>
+ <h3>
+ Connecting to content script..<span id="loading_point">.</span>
+ </h3>
+ <aside id="reload_notice">
+ Try reloading the page.
+ </aside>
</div>
- <button id="query_pattern">
- Search for matching patterns
- </button>
</div>
- <h3>Trying to connect..<input id="loading_chbx" type="checkbox" class="show_next"></input><span>.</span></h3>
</div>
- <button id="settings_but" type="button" style="margin-top: 20px;">Settings</button>
- </div>_POPUPSCRIPTS_
+ <div class="footer padding_inline">
+ <button id="settings_but" type="button">
+ Open Hachette settings
+ </button>
+ </div>
+ </div>
+
+ <div class="has_upper_line"></div>
+
+ <label for="show_main_view_radio" class="back_button"><div></div></label>_POPUPSCRIPTS_
</body>
</html>