Project

General

Profile

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

haketilo / html / display-panel.html @ 4b59dced

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
      .top>h2 {
21
	  padding-left: calc(0.8*3.2em - 8px);
22
      }
23

    
24
      .top {
25
	  line-height: calc(0.8*3.6em - 16px);
26
      }
27

    
28
      #main_view>.top>h2 {
29
	  padding-left: 0;
30
      }
31

    
32
      .unroll_chbx:not(:checked)+div>:not(:first-child) {
33
	  display: none;
34
      }
35

    
36
      .unroll_triangle {
37
	  height: 1em;
38
	  width: 1em;
39
	  display: inline-block;
40
      }
41

    
42
      .unroll_triangle::after {
43
	  content: "";
44
	  width: 0.6em;
45
	  height: 0.6em;
46
	  background: linear-gradient(-45deg, currentColor 50%, transparent 50%);
47
	  display: block;
48
	  position: relative;
49
	  transform: rotate(-45deg);
50
	  top: 0.3em;
51
      }
52

    
53
      .unroll_chbx:checked+div>:first-child .unroll_triangle::after {
54
	  transform: rotate(45deg);
55
	  left: 0.2em;
56
	  top: 0.2em;
57
      }
58

    
59
      .unroll_chbx:checked+div>:first-child .unroll_block {
60
	  display: block;
61
      }
62

    
63
      .unroll_chbx:checked+div>:first-child {
64
	  line-height: 1.4em;
65
      }
66

    
67
      .l2_ul {
68
	  border-left: solid #454 5px;
69
      }
70

    
71
      .l1_li {
72
	  margin-top: 0.3em;
73
	  margin-bottom: 0.3em;
74
      }
75

    
76
      .l1_li>div {
77
	  padding: 0.3em 0.3em 0.3em 0;
78
      }
79

    
80
      .l2_li {
81
	  padding: 0.3em;
82
      }
83

    
84
      #container_for_injected>*:nth-child(odd),
85
      .l2_li:nth-child(odd) {
86
	  background-color: #e5e5e5;
87
      }
88

    
89
      #container_for_injected>#none_injected:not(:last-child) {
90
	  display: none;
91
      }
92

    
93
      #page_url_heading>span {
94
	  display: inline-block;
95
      }
96

    
97
      .back_button {
98
	  position: fixed;
99
	  z-index: 1;
100
	  top: 0;
101
	  left: 0;
102
	  /* The following scales the entire button. */
103
	  font-size: 80%;
104
      }
105

    
106
      #show_main_view_radio:checked~.back_button {
107
	  margin-left: -3.2em;
108
      }
109

    
110
      #show_main_view_radio:not(:checked)~.back_button {
111
	  transition: all 0.2s ease-out;
112
      }
113

    
114
      pre {
115
	  font-family: monospace;
116
	  background-color: white;
117
	  border-top: dashed #4CAF50 1px;
118
	  border-bottom: dashed #4CAF50 1px;
119
	  padding: 1px 5px;
120
      }
121

    
122
      .matched_pattern {
123
	  font-weight: bold;
124
      }
125

    
126
      tr.matched_pattern~tr {
127
	  color: #777;
128
	  font-size: 90%;
129
      }
130

    
131
      .padding_inline {
132
	  padding-left: 5px;
133
	  padding-right: 5px;
134
      }
135

    
136
      .header {
137
	  border-bottom: dashed #4CAF50 1px;
138
	  padding-bottom: 0.3em;
139
	  margin-bottom: 0.5em;
140
	  text-align: center;
141
      }
142

    
143
      .middle {
144
	  margin-top: 0.5em;
145
	  margin-bottom: 0.5em;
146
      }
147

    
148
      .footer {
149
	  border-top: dashed #4CAF50 1px;
150
	  padding-top: 0.3em;
151
	  margin-top: 0.5em;
152
	  text-align: center;
153
      }
154

    
155
      .active_setting_table {
156
	  margin-bottom: 0.5em;
157
      }
158

    
159
      .active_setting_table td {
160
	  padding: 5px;
161
	  vertical-align: middle;
162
      }
163
    </style>
164
  </head>
165
  <body>
166
    <template>
167
      <tr id="pattern_entry" class="nowrap" data-template="entry">
168
	<td data-template="name"></td>
169
	<td>
170
	  <div class="button" data-template="button">Add setting</div>
171
	</td>
172
      </tr>
173

    
174
      <li id="query_match_li" class="l2_li" data-template="li">
175
	<div>
176
	  <span>pattern:</span>
177
	  <span class="bold" data-template="pattern"></span>
178
	  <label class="button slimbutton" for="show_install_view_radio" data-template="btn">
179
	    Install
180
	  </label>
181
	</div>
182
	<div id="unrollable_component" data-template="unroll_container">
183
	  <input type="checkbox" class="unroll_chbx" data-template="chbx"></input>
184
	  <div>
185
	    <span>payload:
186
	      <label class="bold unroll_block" data-template="lbl">
187
		<div data-template="triangle" class="unroll_triangle"></div>
188
		<span data-template="payload"></span>
189
	      </label>
190
	    </span>
191
	    <div data-template="unroll"></div>
192
	  </div>
193
	</div>
194
      </li>
195

    
196
      <div id="injected_script" data-template="div">
197
	<input type="checkbox" class="unroll_chbx" data-template="chbx"></input>
198
	<div>
199
	  <label data-template="lbl">
200
	    <h3><div class="unroll_triangle"></div> script</h3>
201
	  </label>
202
	  <pre data-template="script_contents"></pre>
203
	</div>
204
      </div>
205

    
206
      <div id="multi_repos_query_result" data-template="div">
207
	Results for <span class="bold" data-template="url_span"></span>
208
	<ul class="l1_ul" data-template="ul"></ul>
209
      </div>
210

    
211
      <li id="single_repo_query_result" class="l1_li" data-template="li">
212
	<div>
213
	  From <span class="bold" data-template="repo_url"></span>
214
	</div>
215
      </li>
216

    
217
      <ul id="result_patterns_list" class="l2_ul" data-template="ul">
218
      </ul>
219
    </template>
220

    
221
    <input id="show_install_view_radio" type="radio" class="show_next" name="current_view"></input>
222
    <div id="install_view">
223
      <div class="top has_bottom_line"><h2> Site modifiers install </h2></div>
224
      <div class="padding_inline">
225
	<IMPORT html/import_frame.html />
226
      </div>
227
    </div>
228

    
229
    <input id="show_injected_view_radio" type="radio" class="show_next" name="current_view"></input>
230
    <div id="injected_view">
231
      <div class="top has_bottom_line"><h2>Injected scripts</h2></div>
232
      <div id="container_for_injected">
233
	<span id="none_injected">None</span>
234
      </div>
235
    </div>
236

    
237
    <input id="show_patterns_view_radio" type="radio" class="show_next" name="current_view"></input>
238
    <div>
239
      <div class="top has_bottom_line"><h2>Possible patterns for this page</h2></div>
240
      <div class="padding_inline">
241
	<aside>
242
	  Patterns higher are more specific and override the ones below.
243
	</aside>
244
      </div>
245
      <div class="table_wrapper">
246
	<div>
247
	  <table>
248
	    <tbody id="possible_patterns">
249
	    </tbody>
250
	  </table>
251
	</div>
252
      </div>
253
    </div>
254

    
255
    <input id="show_queried_view_radio" type="radio" class="show_next" name="current_view"></input>
256
    <div>
257
      <div class="top has_bottom_line"><h2>Queried from repositories</h2></div>
258
      <div id="container_for_repo_responses" class="padding_inline">
259
      </div>
260
    </div>
261

    
262
    <input id="show_main_view_radio" type="radio" class="show_next" name="current_view" checked></input>
263
    <div id="main_view">
264
      <div class="top has_bottom_line"><h2 id="page_url_heading"></h2></div>
265
      <h3 id="privileged_notice" class="middle hide">Privileged page</h3>
266

    
267
      <div id="page_state" class="hide">
268
	<div class="header padding_inline">
269
	  <label for="show_patterns_view_radio" class="button">
270
	    Edit settings for this page
271
	  </label>
272
	</div>
273
	<div class="middle padding_inline">
274
	  <input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>
275
	  <div>
276
	    <table class="active_setting_table">
277
	      <tbody>
278
		<tr class="nowrap">
279
		  <td>Matched pattern:</td>
280
		  <td id="pattern" class="bold">...</td>
281
		  <td>
282
		    <button id="view_pattern" class="hide">
283
		      View in settings
284
		    </button>
285
		  </td>
286
		</tr>
287
		<tr class="nowrap">
288
		  <td>Scripts blocked:</td>
289
		  <td id="blocked" class="bold">...</td>
290
		  <td></td>
291
		</tr>
292
		<tr class="nowrap">
293
		  <td>Injected payload:</td>
294
		  <td id="payload" class="bold">...</td>
295
		  <td id="payload_buttons" class="hide">
296
		    <button id="view_payload"> View in settings </button>
297
		    <br/>
298
		    <label id="view_injected" class="button" for="show_injected_view_radio">
299
		      View injected scripts
300
		    </label>
301
		  </td>
302
		</tr>
303
	      </tbody>
304
	    </table>
305
	    <label id="query_pattern" for="show_queried_view_radio" class="button">
306
	      Install scripts for this page
307
	    </label>
308
	  </div>
309
	  <div>
310
	    <h3>
311
	      Connecting to content script..<span id="loading_point">.</span>
312
	    </h3>
313
	    <aside id="reload_notice">
314
	      Try reloading the page.
315
	    </aside>
316
	  </div>
317
	</div>
318
      </div>
319

    
320
      <div class="footer padding_inline">
321
	<button id="settings_but" type="button">
322
	  Open Hachette settings
323
	</button>
324
      </div>
325
    </div>
326

    
327
    <div class="has_upper_line"></div>
328

    
329
    <label for="show_main_view_radio" class="back_button"><div></div></label>_POPUPSCRIPTS_
330
  </body>
331
</html>
(4-4/11)