Project

General

Profile

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

haketilo / html / display-panel.html @ f0951bce

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
    <link type="text/css" rel="stylesheet" href="MOZILLA_scrollbar_fix.css" />
15
    <style>
16
      body {
17
	  width: max-content;
18
	  width: -moz-fit-content;
19
      }
20

    
21
      .top>h2 {
22
	  padding-left: calc(0.8*3.2em - 8px);
23
      }
24

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

    
29
      #main_view>.top>h2 {
30
	  padding-left: 0;
31
	  max-width: 550px
32
      }
33

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

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

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

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

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

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

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

    
73
      .l1_li {
74
	  margin-top: 0.3em;
75
	  margin-bottom: 0.3em;
76
      }
77

    
78
      .l1_li>div {
79
	  padding: 0.3em 0.3em 0.3em 0;
80
      }
81

    
82
      .l2_li {
83
	  padding: 0.3em;
84
      }
85

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

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

    
95
      #page_url_heading>span {
96
	  display: inline-block;
97
      }
98

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

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

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

    
116
      pre {
117
	  font-family: monospace;
118
	  background-color: white;
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
      .padding_top {
137
	  padding-top: 5px;
138
      }
139

    
140
      .header {
141
	  padding-bottom: 0.3em;
142
	  margin-bottom: 0.5em;
143
	  text-align: center;
144
      }
145

    
146
      .middle {
147
	  margin-top: 0.5em;
148
	  margin-bottom: 0.5em;
149
      }
150

    
151
      .footer {
152
	  padding-top: 0.3em;
153
	  margin-top: 0.5em;
154
	  text-align: center;
155
      }
156

    
157
      .active_setting_table {
158
	  margin-bottom: 0.5em;
159
      }
160

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

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

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

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

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

    
219
      <ul id="result_patterns_list" class="l2_ul" data-template="ul">
220
      </ul>
221
    </template>
222

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

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

    
239
    <input id="show_patterns_view_radio" type="radio" class="show_next" name="current_view"></input>
240
    <div>
241
      <div class="top has_bottom_line"><h2>Possible patterns for this page</h2></div>
242
      <div class="padding_inline">
243
	<aside>
244
	  Patterns higher are more specific and override the ones below.
245
	</aside>
246
      </div>
247
      <div class="table_wrapper firefox_scrollbars_hacky_fix">
248
	<div>
249
	  <table>
250
	    <tbody id="possible_patterns">
251
	    </tbody>
252
	  </table>
253
	</div>
254
      </div>
255
      <div class="padding_inline padding_top has_upper_thin_line firefox_scrollbars_hacky_fix has_inline_content">
256
	<span class="nowrap">
257
	  <IMPORT html/default_blocking_policy.html />
258
	</span>
259
      </div>
260
    </div>
261

    
262
    <input id="show_queried_view_radio" type="radio" class="show_next" name="current_view"></input>
263
    <div>
264
      <div class="top has_bottom_line"><h2>Queried from repositories</h2></div>
265
      <div id="container_for_repo_responses" class="padding_inline">
266
      </div>
267
    </div>
268

    
269
    <input id="show_main_view_radio" type="radio" class="show_next" name="current_view" checked></input>
270
    <div id="main_view">
271
      <div class="top has_bottom_line"><h2 id="page_url_heading"></h2></div>
272
      <h3 id="privileged_notice" class="middle hide">Privileged page</h3>
273

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

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

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

    
341
    <label for="show_main_view_radio" class="back_button"><div></div></label>_POPUPSCRIPTS_
342
  </body>
343
</html>
(7-7/14)