Project

General

Profile

Download (8.14 KB) Statistics
| Branch: | Tag: | Revision:

haketilo / html / display-panel.html @ 453ba039

1
<!doctype html>
2
<!--
3
    Copyright (C) 2021 Wojtek Kosior
4
    Redistribution terms are gathered in the `copyright' file.
5
  -->
6
<html>
7
  <head>
8
    <meta charset="utf-8"/>
9
    <title>Hachette - page settings</title>
10
    <link type="text/css" rel="stylesheet" href="reset.css" />
11
    <link type="text/css" rel="stylesheet" href="base.css" />
12
    <link type="text/css" rel="stylesheet" href="back_button.css" />
13
    <link type="text/css" rel="stylesheet" href="table.css" />
14
    <style>
15
      body {
16
	  width: max-content;
17
	  width: -moz-max-content;
18
      }
19

    
20
      .bold, h2 {
21
	  font-weight: bold;
22
      }
23

    
24
      h2 {
25
	  margin: 8px;
26
	  font-size: 120%;
27
      }
28

    
29
      .top>h2 {
30
	  padding-left: calc(0.8*3.2em - 8px);
31
      }
32

    
33
      .top {
34
	  line-height: calc(0.8*3.6em - 16px);
35
      }
36

    
37
      #main_view>.top>h2 {
38
	  padding-left: 0;
39
      }
40

    
41
      h3 {
42
	  padding: 5px;
43
	  font-size: 108%;
44
	  text-shadow: 0 0 0 #454;
45
      }
46

    
47
      .unroll_chbx:not(:checked)+div>:not(:first-child) {
48
	  display: none;
49
      }
50

    
51
      .unroll_triangle {
52
	  height: 1em;
53
	  width: 1em;
54
	  display: inline-block;
55
      }
56

    
57
      .unroll_triangle::after {
58
	  content: "";
59
	  width: 0.6em;
60
	  height: 0.6em;
61
	  background: linear-gradient(-45deg, currentColor 50%, transparent 50%);
62
	  display: block;
63
	  position: relative;
64
	  transform: rotate(-45deg);
65
	  top: 0.3em;
66
      }
67

    
68
      .unroll_chbx:checked+div>:first-child .unroll_triangle::after {
69
	  transform: rotate(45deg);
70
	  left: 0.2em;
71
	  top: 0.2em;
72
      }
73

    
74
      .unroll_chbx:checked+div>:first-child .unroll_block {
75
	  display: block;
76
      }
77

    
78
      .unroll_chbx:checked+div>:first-child {
79
	  line-height: 1.4em;
80
      }
81

    
82
      .l2_ul {
83
	  border-left: solid #454 5px;
84
      }
85

    
86
      .l1_li {
87
	  margin-top: 0.3em;
88
	  margin-bottom: 0.3em;
89
      }
90

    
91
      .l1_li>div {
92
	  padding: 0.3em 0.3em 0.3em 0;
93
      }
94

    
95
      .l2_li {
96
	  padding: 0.3em;
97
      }
98

    
99
      #container_for_injected>*:nth-child(odd),
100
      .l2_li:nth-child(odd) {
101
	  background-color: #e5e5e5;
102
      }
103

    
104
      #container_for_injected>#none_injected:not(:last-child) {
105
	  display: none;
106
      }
107

    
108
      #page_url_heading>span {
109
	  display: inline-block;
110
      }
111

    
112
      .back_button {
113
	  position: fixed;
114
	  z-index: 1;
115
	  top: 0;
116
	  left: 0;
117
	  /* The following scales the entire button. */
118
	  font-size: 80%;
119
      }
120

    
121
      #show_main_view_radio:checked~.back_button {
122
	  margin-left: -3.2em;
123
      }
124

    
125
      #show_main_view_radio:not(:checked)~.back_button {
126
	  transition: all 0.2s ease-out;
127
      }
128

    
129
      pre {
130
	  font-family: monospace;
131
	  background-color: white;
132
	  border-top: dashed #4CAF50 1px;
133
	  border-bottom: dashed #4CAF50 1px;
134
	  padding: 1px 5px;
135
      }
136

    
137
      .matched_pattern {
138
	  font-weight: bold;
139
      }
140

    
141
      tr.matched_pattern~tr {
142
	  color: #777;
143
	  font-size: 90%;
144
      }
145

    
146
      .padding_inline {
147
	  padding-left: 5px;
148
	  padding-right: 5px;
149
      }
150

    
151
      .header {
152
	  border-bottom: dashed #4CAF50 1px;
153
	  padding-bottom: 0.3em;
154
	  margin-bottom: 0.5em;
155
	  text-align: center;
156
      }
157

    
158
      .middle {
159
	  margin-top: 0.5em;
160
	  margin-bottom: 0.5em;
161
      }
162

    
163
      .footer {
164
	  border-top: dashed #4CAF50 1px;
165
	  padding-top: 0.3em;
166
	  margin-top: 0.5em;
167
	  text-align: center;
168
      }
169

    
170
      .active_setting_table {
171
	  margin-bottom: 0.5em;
172
      }
173

    
174
      .active_setting_table td {
175
	  padding: 5px;
176
	  vertical-align: middle;
177
      }
178
    </style>
179
  </head>
180
  <body>
181
    <template>
182
      <tr id="pattern_entry" data-template="entry">
183
	<td data-template="name"></td>
184
	<td>
185
	  <div class="button" data-template="button">Add setting</div>
186
	</td>
187
      </tr>
188

    
189
      <li id="query_match_li" class="l2_li" data-template="li">
190
	<div>
191
	  <span>pattern:</span>
192
	  <span class="bold" data-template="pattern"></span>
193
	  <label class="button slimbutton" for="show_install_view_radio" data-template="btn">
194
	    Install
195
	  </label>
196
	</div>
197
	<div id="unrollable_component" data-template="unroll_container">
198
	  <input type="checkbox" class="unroll_chbx" data-template="chbx"></input>
199
	  <div>
200
	    <span>payload:
201
	      <label class="bold unroll_block" data-template="lbl">
202
		<div data-template="triangle" class="unroll_triangle"></div>
203
		<span data-template="payload"></span>
204
	      </label>
205
	    </span>
206
	    <div data-template="unroll"></div>
207
	  </div>
208
	</div>
209
      </li>
210

    
211
      <div id="injected_script" data-template="div">
212
	<input type="checkbox" class="unroll_chbx" data-template="chbx"></input>
213
	<div>
214
	  <label data-template="lbl">
215
	    <h3><div class="unroll_triangle"></div> script</h3>
216
	  </label>
217
	  <pre data-template="script_contents"></pre>
218
	</div>
219
      </div>
220

    
221
      <div id="multi_repos_query_result" data-template="div">
222
	Results for <span class="bold" data-template="url_span"></span>
223
	<ul class="l1_ul" data-template="ul"></ul>
224
      </div>
225

    
226
      <li id="single_repo_query_result" class="l1_li" data-template="li">
227
	<div>
228
	  From <span class="bold" data-template="repo_url"></span>
229
	</div>
230
      </li>
231

    
232
      <ul id="result_patterns_list" class="l2_ul" data-template="ul">
233
      </ul>
234
    </template>
235

    
236
    <input id="show_install_view_radio" type="radio" class="show_next" name="current_view"></input>
237
    <div id="install_view">
238
      <div class="top has_bottom_line"><h2> Site modifiers install </h2></div>
239
      <IMPORT html/import_frame.html />
240
    </div>
241

    
242
    <input id="show_injected_view_radio" type="radio" class="show_next" name="current_view"></input>
243
    <div id="injected_view">
244
      <div class="top has_bottom_line"><h2>Injected scripts</h2></div>
245
      <div id="container_for_injected">
246
	<span id="none_injected">None</span>
247
      </div>
248
    </div>
249

    
250
    <input id="show_patterns_view_radio" type="radio" class="show_next" name="current_view"></input>
251
    <div>
252
      <div class="top has_bottom_line"><h2>Possible patterns for this page</h2></div>
253
      <div class="padding_inline">
254
	<aside>
255
	  Patterns higher are more specific and override the ones below.
256
	</aside>
257
      </div>
258
      <div class="table_wrapper">
259
	<div>
260
	  <table>
261
	    <tbody id="possible_patterns">
262
	    </tbody>
263
	  </table>
264
	</div>
265
      </div>
266
    </div>
267

    
268
    <input id="show_queried_view_radio" type="radio" class="show_next" name="current_view"></input>
269
    <div>
270
      <div class="top has_bottom_line"><h2>Queried from repositories</h2></div>
271
      <div id="container_for_repo_responses" class="padding_inline">
272
      </div>
273
    </div>
274

    
275
    <input id="show_main_view_radio" type="radio" class="show_next" name="current_view" checked></input>
276
    <div id="main_view">
277
      <div class="top has_bottom_line"><h2 id="page_url_heading"></h2></div>
278
      <h3 id="privileged_notice" class="middle hide">Privileged page</h3>
279

    
280
      <div id="page_state" class="hide">
281
	<div class="header padding_inline">
282
	  <label for="show_patterns_view_radio" class="button">
283
	    Edit settings for this page
284
	  </label>
285
	</div>
286
	<div class="middle padding_inline">
287
	  <input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>
288
	  <div>
289
	    <table class="active_setting_table">
290
	      <tbody>
291
		<tr>
292
		  <td>Matched pattern:</td>
293
		  <td id="pattern" class="bold">...</td>
294
		  <td>
295
		    <button id="view_pattern" class="hide">
296
		      View in settings
297
		    </button>
298
		  </td>
299
		</tr>
300
		<tr>
301
		  <td>Scripts blocked:</td>
302
		  <td id="blocked" class="bold">...</td>
303
		  <td></td>
304
		</tr>
305
		<tr>
306
		  <td>Injected payload:</td>
307
		  <td id="payload" class="bold">...</td>
308
		  <td id="payload_buttons" class="hide">
309
		    <button id="view_payload"> View in settings </button>
310
		    <br/>
311
		    <label id="view_injected" class="button" for="show_injected_view_radio">
312
		      View injected scripts
313
		    </label>
314
		  </td>
315
		</tr>
316
	      </tbody>
317
	    </table>
318
	    <label id="query_pattern" for="show_queried_view_radio" class="button">
319
	      Install scripts for this page
320
	    </label>
321
	  </div>
322
	  <div>
323
	    <h3>
324
	      Connecting to content script..<span id="loading_point">.</span>
325
	    </h3>
326
	    <aside id="reload_notice">
327
	      Try reloading the page.
328
	    </aside>
329
	  </div>
330
	</div>
331
      </div>
332

    
333
      <div class="footer padding_inline">
334
	<button id="settings_but" type="button">
335
	  Open Hachette settings
336
	</button>
337
      </div>
338
    </div>
339

    
340
    <div class="has_upper_line"></div>
341

    
342
    <label for="show_main_view_radio" class="back_button"><div></div></label>_POPUPSCRIPTS_
343
  </body>
344
</html>
(4-4/11)