Project

General

Profile

« Previous | Next » 

Revision 544c6df3

Added by koszko about 2 years ago

add styling for options page\n\nThis does not include styling for contents of the import popup

View differences:

html/base.css
6 6
 * Redistribution terms are gathered in the `copyright' file.
7 7
 */
8 8

  
9
html {
10
    font-family: sans-serif;
11
}
12

  
13
textarea {
14
    font-family: monospace;
15
}
16

  
9 17
input[type="checkbox"], input[type="radio"], .hide {
10 18
    display: none;
11 19
}
......
32 40
    display: inline-block;
33 41
    padding: 6px 12px;
34 42
    margin: 2px 0px;
43
    -moz-user-select: none;
44
    user-select: none;
35 45
}
36 46

  
37 47
button.slimbutton, .button.slimbutton {
......
42 52
button:hover, .button:hover {
43 53
    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
44 54
}
55

  
56
aside {
57
    background: #3f8dc6;
58
    margin: 5px 0;
59
    padding: 0.3em 1em;
60
    border-radius: 3px;
61
    color: #fff;
62
}
63

  
64
textarea: {
65
    resize: none;
66
}
html/options.html
1 1
<!doctype html>
2 2
<!--
3 3
    Copyright (C) 2021 Wojtek Kosior
4
    Copyright (C) 2021 Nicholas Johnson
5 4
    Redistribution terms are gathered in the `copyright' file.
6 5
  -->
7 6
<html>
......
11 10
    <link type="text/css" rel="stylesheet" href="reset.css" />
12 11
    <link type="text/css" rel="stylesheet" href="base.css" />
13 12
    <style>
14
      /* pages list */
15
      #page_components_ul {
16
	  max-height: 80vh;
17
	  overflow-y: auto;
18
      }
19
      #page_components_ul li.dragover_li {
20
	  border-top: 2px solid blue;
21
      }
22
      #page_components_ul li {
23
	  border-top: 2px solid white;
24
      }
25
      li[draggable=true] * {
26
	  pointer-events: none;
27
      }
28
      li[draggable=true] label,
29
      li[draggable=true] button {
30
	  pointer-events: auto;
13
      body {
14
	  background-color: #f0f0f0;
15
	  color: #555;
16
	  overflow: auto;
17
	  width: 100%;
31 18
      }
32 19

  
33 20
      /* tabbed view */
......
38 25
	  display: none;
39 26
      }
40 27

  
41
      #show_repos:checked ~ #repos_lbl,
42
      #show_pages:checked ~ #pages_lbl,
43
      #show_bags:checked ~ #bags_lbl,
44
      #show_scripts:checked ~ #scripts_lbl {
28
      #show_repos:checked ~ div #repos_lbl,
29
      #show_pages:checked ~ div #pages_lbl,
30
      #show_bags:checked ~ div #bags_lbl,
31
      #show_scripts:checked ~ div #scripts_lbl {
45 32
	  background: #4CAF50;
46 33
          color: white;
47 34
      }
48 35

  
49
      body > div {
50
	  border-top: 6px solid #4CAF50;
36
      #tab_heads>* {
37
	  font-size: 130%;
38
	  padding: 10px;
39
	  display: inline-block;
40
	  -moz-user-select: none;
41
	  user-select: none;
51 42
      }
52 43

  
53
      .tab_head {
54
	  display: inline-block;
44
      #import_but {
45
	  font: unset;
46
	  font-size: 130%;
47
	  float: right;
48
	  margin: 0;
49
	  border-radius: 0;
50
      }
51

  
52
      #tab_heads::after {
53
	  display: block;
54
	  height: 8px;
55
	  content: "";
56
	  background: linear-gradient(#555, transparent);
57
      }
58

  
59
      div.tab {
60
	  min-width: 50vw;
61
	  width: fit-content;
62
	  padding-left: 6px;
55 63
      }
56 64

  
57 65
      /* popup window with list of selectable components */
......
61 69
	  height: 100vh;
62 70
	  left: 0;
63 71
	  top: 0;
64
	  background-color: rgba(0,0,0,0.4);
72
	  background-color: rgba(60,60,60,0.4);
65 73
	  z-index: 1;
66 74
	  overflow: auto;
67 75
	  vertical-align: center;
......
69 77
      }
70 78

  
71 79
      .popup_frame {
72
	  background-color: white;
73
	  width: 50vw;
80
	  background-color: #f0f0f0;
81
	  margin: 5vh auto;
82
	  padding: 15px;
83
	  border: solid #333 4px;
84
	  border-radius: 15px;
85
	  width: -moz-fit-content;
86
	  width: fit-content;
87
      }
88

  
89
      div.ul_container {
90
	  background-color: #f0f0f0;
91
	  width: -moz-fit-content;
92
	  width: fit-content;
93
	  margin: 6px 0;
94
      }
95

  
96
      div.ul_container::after, div.ul_container::before {
97
	  display: block;
98
	  height: 6px;
99
	  content: "";
100
	  background: linear-gradient(transparent, #555);
101
      }
102

  
103
      div.ul_container::after {
104
	  background: linear-gradient(#555, transparent);
105
      }
106

  
107
      .work_li div.ul_container::before {
108
	  background: linear-gradient(#e0f0f0, #555);
109
      }
110

  
111
      .work_li div.ul_container::after {
112
	  background: linear-gradient(#555, #e0f0f0);
113
      }
114

  
115
      div.ul_container>.always_scrollbar{
116
	  border-left: solid #454 8px;
117
	  max-height: 80vh;
118
	  overflow-y: scroll;
119
      }
120

  
121
      div.ul_container table {
122
	  border-collapse: unset;
123
      }
124

  
125
      div.ul_container, div.ul_container>*, div.ul_container table>tbody {
126
	  width: -moz-min-content;
127
	  width: min-content;
128
      }
129

  
130
      div.ul_container div.ul_container>.always_scrollbar,
131
      .popup_frame div.ul_container>.always_scrollbar {
132
	  max-height: 60vh;
133
      }
134

  
135
      .popup_frame div.ul_container table {
136
	  min-width: 30vw;
137
      }
138

  
139
      .popup_frame div.ul_container {
140
	  margin: 0 auto;
141
      }
142

  
143
      tr:nth-child(odd) {
144
	  background-color: #e5e5e5;
145
      }
146

  
147
      td {
148
	  vertical-align: middle;
149
	  min-width: fit-content;
150
	  min-width: -moz-fit-content;
151
	  width: 1%;
152
      }
153

  
154
      tr>td:first-child {
155
	  padding: 3px 10px 6px;
156
	  max-width: 70vw;
157
	  overflow: hidden;
158
	  width: 100%;
159
	  white-space: nowrap;
160
      }
161

  
162
      tr.work_li>td:first-child {
163
	  padding-right: 0;
164
	  max-width: unset;
165
      }
166

  
167
      tr.work_li>td>div {
168
	  background-color: #e0f0f0;
169
	  border-left: solid #454 5px;
170
	  border-right: solid #454 2px;
171
	  padding: 5px 10px;
172
      }
173

  
174
      .form_grid {
175
	  display: grid;
176
	  grid-template-columns: auto auto;
177
      }
178

  
179
      .form_grid>label {
180
	  grid-column: 1 / span 1;
181
	  margin-right: 10px;
182
      }
183

  
184
      .form_grid label {
185
	  line-height: 34px; /* center text vertically */
186
      }
187

  
188
      .form_grid>input, .form_grid>span {
189
	  grid-column: 2 / span 1;
190
      }
191

  
192
      .form_grid>label[for="script_contents_field"],
193
      .form_grid>* {
194
	  grid-column: 1 / span 2;
195
      }
196

  
197
      .form_grid>textarea {
198
	  min-width: 70vw;
199
	  resize: none;
200
      }
201

  
202
      td>div.button {
203
	  margin-right: 4px;
74 204
      }
75 205

  
76 206
      input[type="radio"]:not(:checked)+.import_window_content {
......
80 210
  </head>
81 211
  <body>
82 212
    <template>
83
      <li id="item_li">
84
	<span></span>
85
	<button> Edit </button>
86
	<button> Remove </button>
87
	<button> Export </button>
88
      </li>
89
      <li id="bag_component_li">
90
	<span></span>
91
	<button> Remove </button>
92
      </li>
93
      <li id="chbx_component_li">
94
	<input type="checkbox" style="display: inline;"></input>
95
	<span></span>
96
      </li>
97
      <li id="radio_component_li">
98
	<input type="radio" style="display: inline;" name="page_components"></input>
99
	<span></span>
100
      </li>
213
      <tr id="item_li">
214
	<td></td>
215
	<td><div class="button"> Edit </div></td>
216
	<td><div class="button"> Remove </div></td>
217
	<td><div class="button"> Export </div></td>
218
      </tr>
219
      <tr id="bag_component_li">
220
	<td></td>
221
	<td><div class="button"> Remove </div></td>
222
      </tr>
223
      <tr id="chbx_component_li">
224
	<td>
225
	  <input type="checkbox" style="display: inline;"></input>
226
	  <span></span>
227
	</td>
228
      </tr>
229
      <tr id="radio_component_li">
230
	<td>
231
	  <input type="radio" style="display: inline;" name="page_components"></input>
232
	  <span></span>
233
	</td>
234
      </tr>
101 235
    </template>
102 236

  
103 237
    <!-- Mind the show_*s ids below - their format is assumed in js code -->
......
105 239
    <input type="radio" name="tabs" id="show_pages" checked></input>
106 240
    <input type="radio" name="tabs" id="show_bags"></input>
107 241
    <input type="radio" name="tabs" id="show_scripts"></input>
108
    <label for="show_repos" id="repos_lbl"
109
	   class="tab_head"> Repos </label>
110
    <label for="show_pages" id="pages_lbl"
111
	   class="tab_head"> Pages </label>
112
    <label for="show_bags" id="bags_lbl"
113
	   class="tab_head"> Bags </label>
114
    <label for="show_scripts" id="scripts_lbl"
115
	   class="tab_head"> Scripts </label>
116

  
117
    <div id="repos">
118
      <ul id="repos_ul">
119
	<li id="work_repo_li" class="hide">
120
	  <label for="repo_url_field">URL: </label>
121
	  <input id="repo_url_field"></input>
122
	  <br/>
123
	  <button id="save_repo_but" type="button"> Save </button>
124
	  <button id="discard_repo_but" type="button"> Cancel </button>
125
	</li>
126
      </ul>
242
    <div id="tab_heads">
243
      <label for="show_repos" id="repos_lbl"> Repos </label>
244
      <label for="show_pages" id="pages_lbl"> Pages </label>
245
      <label for="show_bags" id="bags_lbl"> Bags </label>
246
      <label for="show_scripts" id="scripts_lbl"> Scripts </label>
247
      <button id="import_but" style="margin-left: 40px;"> Import </button>
248
    </div>
249
    <div id="repos" class="tab">
250
      <div class="ul_container">
251
	<div>
252
	  <table>
253
	    <tbody id="repos_ul">
254
	      <tr id="work_repo_li" class="hide work_li">
255
		<td colspan="4">
256
		  <div class="form_grid">
257
		    <label for="repo_url_field">URL: </label>
258
		    <input id="repo_url_field"></input>
259
		    <div>
260
		      <button id="save_repo_but" type="button"> Save </button>
261
		      <button id="discard_repo_but" type="button"> Cancel </button>
262
		    </div>
263
		  </div>
264
		</td>
265
	      </tr>
266
	    </tbody>
267
	  </table>
268
	</div>
269
      </div>
127 270
      <button id="add_repo_but" type="button"> Add repository </button>
128 271
    </div>
129

  
130
    <div id="pages">
131
      <ul id="pages_ul">
132
	<li id="work_page_li" class="hide">
133
	  <label for="page_url_field">URL: </label>
134
	  <input id="page_url_field"></input>
135
	  <br/>
136
	  <label>Payload: </label>
137
	  <span id="page_payload"></span>
138
	  <button id="select_page_components_but">
139
	    Choose payload
140
	  </button>
141
	  <br/>
142
	  <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
143
	  <label for="page_allow_chbx">Allow native scripts</label>
144
	  <br/>
145
	  <button id="save_page_but" type="button"> Save </button>
146
	  <button id="discard_page_but" type="button"> Cancel </button>
147
	</li>
148
      </ul>
272
    <div id="pages" class="tab">
273
      <div class="ul_container">
274
	<div>
275
	  <table>
276
	    <tbody id="pages_ul">
277
	      <tr id="work_page_li" class="hide work_li">
278
		<td colspan="4">
279
		  <div class="form_grid">
280
		    <label for="page_url_field">URL: </label>
281
		    <input id="page_url_field"></input>
282
		    <label>Payload: </label>
283
		    <span>
284
		      <span id="page_payload"></span>
285
		      <button id="select_page_components_but">
286
			Choose payload
287
		      </button>
288
		    </span>
289
		    <div>
290
		      <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
291
		      <label for="page_allow_chbx">Allow native scripts</label>
292
		    </div>
293
		    <div>
294
		      <button id="save_page_but" type="button"> Save </button>
295
		      <button id="discard_page_but" type="button"> Cancel </button>
296
		    </div>
297
		  </div>
298
		</td>
299
	      </tr>
300
	    </tbody>
301
	  </table>
302
	</div>
303
      </div>
149 304
      <button id="add_page_but" type="button"> Add page </button>
150 305
    </div>
151

  
152
    <div id="bags">
153
      <ul id="bags_ul">
154
	<li id="work_bag_li" class="hide">
155
	  <label for="bag_name_field"> Name: </label>
156
	  <input id="bag_name_field"></input>
157
	  <ul id="bag_components_ul">
158
	    <li id="empty_bag_component_li" class="hide"></li>
159
	  </ul>
160
	  <button id="select_bag_components_but">
161
	    Add scripts
162
	  </button>
163
	  <br/>
164
	  <button id="save_bag_but"> Save </button>
165
	  <button id="discard_bag_but"> Cancel </button>
166
	</li>
167
      </ul>
306
    <div id="bags" class="tab">
307
      <div class="ul_container">
308
	<div>
309
	  <table>
310
	    <tbody id="bags_ul">
311
	      <tr id="work_bag_li" class="hide work_li">
312
		<td colspan="4">
313
		  <div class="form_grid">
314
		    <label for="bag_name_field"> Name: </label>
315
		    <input id="bag_name_field"></input>
316
		    <div class="ul_container">
317
		      <div>
318
			<table>
319
			  <tbody id="bag_components_ul">
320
			    <tr id="empty_bag_component_li" class="hide"></tr>
321
			  </tbody>
322
			</table>
323
		      </div>
324
		    </div>
325
		    <div>
326
		      <button id="select_bag_components_but">
327
			Add scripts
328
		      </button>
329
		    </div>
330
		    <div>
331
		      <button id="save_bag_but"> Save </button>
332
		      <button id="discard_bag_but"> Cancel </button>
333
		    </div>
334
		  </div>
335
		</td>
336
	      </tr>
337
	    </tbody>
338
	  </table>
339
	</div>
340
      </div>
168 341
      <button id="add_bag_but" type="button"> Add bag </button>
169 342
    </div>
170

  
171
    <div id="scripts">
172
      <ul id="scripts_ul">
173
	<li id="work_script_li" class="hide">
174
	  <label for="script_name_field"> Name: </label>
175
	  <input id="script_name_field"></input>
176
	  <br/>
177
	  <label for="script_url_field"> URL: </label>
178
	  <input id="script_url_field"></input>
179
	  <br/>
180
	  <label for="script_sha256_field"> sha256: </label>
181
	  <input id="script_sha256_field"></input>
182
	  <br/>
183
	  <label for="script_contents_field"> contents: </label>
184
	  <textarea id="script_contents_field" rows="20" cols="80"></textarea>
185
	  <br/>
186
	  <button id="save_script_but"> Save </button>
187
	  <button id="discard_script_but"> Cancel </button>
188
	</li>
189
      </ul>
343
    <div id="scripts" class="tab">
344
      <div class="ul_container">
345
	<div>
346
	  <table>
347
	    <tbody id="scripts_ul">
348
	      <tr id="work_script_li" class="hide work_li">
349
		<td colspan="4">
350
		  <div class="form_grid">
351
		    <label for="script_name_field"> Name: </label>
352
		    <input id="script_name_field"></input>
353
		    <label for="script_url_field"> URL: </label>
354
		    <input id="script_url_field"></input>
355
		    <label for="script_sha256_field"> SHA256: </label>
356
		    <input id="script_sha256_field"></input>
357
		    <aside>
358
		      Note: URL and SHA256 are ignored if script text is provided.
359
		    </aside>
360
		    <label for="script_contents_field"> contents: </label>
361
		    <textarea id="script_contents_field" rows="20" cols="80"></textarea>
362
		    <div>
363
		      <button id="save_script_but"> Save </button>
364
		      <button id="discard_script_but"> Cancel </button>
365
		    </div>
366
		  </div>
367
		</td>
368
	      </tr>
369
	    </tbody>
370
	  </table>
371
	</div>
372
      </div>
190 373
      <button id="add_script_but" type="button"> Add script </button>
191 374
    </div>
192 375

  
193
    <button id="import_but" style="margin-top: 40px;"> Import </button>
194

  
195 376
    <div id="chbx_components_window" class="hide popup" position="absolute">
196 377
      <div class="popup_frame">
197
	<ul id="chbx_components_ul">
198

  
199
	</ul>
378
	<div class="ul_container">
379
	  <div>
380
	    <table>
381
	      <tbody id="chbx_components_ul">
382
	      </tbody>
383
	    </table>
384
	  </div>
385
	</div>
200 386
	<button id="commit_bag_components_but"> Add </button>
201 387
	<button id="cancel_bag_components_but"> Cancel </button>
202 388
      </div>
......
204 390

  
205 391
    <div id="radio_components_window" class="hide popup" position="absolute">
206 392
      <div class="popup_frame">
207
	<ul id="radio_components_ul">
208

  
209
	  <li id="radio_component_none_li">
210
	    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
211
	    <span>(None)</span>
212
	  </li>
213
	</ul>
393
	<div class="ul_container">
394
	  <div class="always_scrollbar">
395
	    <table>
396
	      <tbody id="radio_components_ul">
397
		<tr id="radio_component_none_li">
398
		  <td>
399
		    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
400
		    <span>(None)</span>
401
		  </td>
402
		</tr>
403
	      </tbody>
404
	    </table>
405
	  </div>
406
	</div>
214 407
	<button id="commit_page_components_but"> Choose </button>
215 408
	<button id="cancel_page_components_but"> Cancel </button>
216 409
      </div>
html/options_main.js
32 32
chbx_component_li_template.removeAttribute("id");
33 33
radio_component_li_template.removeAttribute("id");
34 34

  
35
function list_set_scrollbar(list_elem)
36
{
37
    const op = ((list_elem.children.length === 1 &&
38
		 list_elem.children[0].classList.contains("hide")) ||
39
		list_elem.children.length < 1) ? "remove" : "add";
40
    list_elem.parentElement.parentElement.classList[op]("always_scrollbar");
41
}
42

  
35 43
function item_li_id(prefix, item)
36 44
{
37 45
    return `li_${prefix}_${item}`;
......
66 74
		continue;
67 75

  
68 76
	    ul.ul.insertBefore(li, element);
69
	    return;
77
	    break;
70 78
	}
71 79
    }
80
    if (!li.parentElement)
81
	ul.ul.appendChild(li);
72 82

  
73
    ul.ul.appendChild(li);
83
    list_set_scrollbar(ul.ul);
74 84
}
75 85

  
76 86
const chbx_components_ul = by_id("chbx_components_ul");
......
98 108
    li.setAttribute("data-prefix", prefix);
99 109
    li.setAttribute("data-name", name);
100 110

  
101
    let chbx = li.firstElementChild;
111
    let chbx = li.firstElementChild.firstElementChild;
102 112
    let span = chbx.nextElementSibling;
103 113

  
104 114
    span.textContent = nice_name(prefix, name);
105 115

  
106 116
    chbx_components_ul.appendChild(li);
117
    list_set_scrollbar(chbx_components_ul);
107 118
}
108 119

  
109 120
var radio_component_none_li = by_id("radio_component_none_li");
......
118 129
    li.setAttribute("data-prefix", prefix);
119 130
    li.setAttribute("data-name", name);
120 131

  
121
    let radio = li.firstElementChild;
132
    let radio = li.firstElementChild.firstElementChild;
122 133
    let span = radio.nextElementSibling;
123 134

  
124 135
    span.textContent = nice_name(prefix, name);
125 136

  
126
    radio_components_ul.insertBefore(li, radio_component_none_li);
137
    radio_component_none_li.before(li);
138
    list_set_scrollbar(radio_components_ul);
127 139
}
128 140

  
129 141
/* Used to reset edited repo. */
......
191 203
const empty_bag_component_li = by_id("empty_bag_component_li");
192 204
var bag_components_ul = by_id("bag_components_ul");
193 205

  
206
function remove_bag_component_entry(entry)
207
{
208
    const list = entry.parentElement;
209
    entry.remove();
210
    list_set_scrollbar(list);
211
}
212

  
194 213
/* Used to construct and update components list of edited bag. */
195 214
function add_bag_components(components)
196 215
{
......
199 218
	let li = bag_component_li_template.cloneNode(true);
200 219
	li.setAttribute("data-prefix", prefix);
201 220
	li.setAttribute("data-name", name);
221

  
202 222
	let span = li.firstElementChild;
203 223
	span.textContent = nice_name(prefix, name);
204 224
	let remove_but = span.nextElementSibling;
205
	remove_but.addEventListener("click", () =>
206
				    bag_components_ul.removeChild(li));
225
	remove_but.addEventListener("click",
226
				    () => remove_bag_component_entry(li));
207 227
	bag_components_ul.appendChild(li);
208 228
    }
209 229

  
210 230
    bag_components_ul.appendChild(empty_bag_component_li);
231
    list_set_scrollbar(bag_components_ul);
211 232
}
212 233

  
213 234
/* Used to reset edited bag. */
......
219 240
    let old_components_ul = bag_components_ul;
220 241
    bag_components_ul = old_components_ul.cloneNode(false);
221 242

  
222
    ul.work_li.insertBefore(bag_components_ul, old_components_ul);
223
    ul.work_li.removeChild(old_components_ul);
243
    old_components_ul.replaceWith(bag_components_ul);
224 244

  
225 245
    add_bag_components(components);
226 246
}
......
228 248
/* Used to get edited bag data for saving. */
229 249
function work_bag_li_data(ul)
230 250
{
231
    let components_ul = ul.work_name_input.nextElementSibling;
232
    let component_li = components_ul.firstElementChild;
251
    let component_li = bag_components_ul.firstElementChild;
233 252

  
234 253
    let components = [];
235 254

  
......
285 304
    }
286 305

  
287 306
    ul.work_li.classList.add("hide");
307
    ul.ul.append(ul.work_li);
308
    list_set_scrollbar(ul.ul);
288 309
    ul.state = UL_STATE.IDLE;
289 310
}
290 311

  
......
323 344
    ul.ul.insertBefore(ul.work_li, li);
324 345
    ul.ul.removeChild(li);
325 346
    ul.work_li.classList.remove("hide");
347
    list_set_scrollbar(ul.ul);
326 348

  
327 349
    ul.state = UL_STATE.EDITING_ENTRY;
328 350
    ul.edited_item = item;
......
380 402
    ul.reset_work_li(ul);
381 403
    ul.work_li.classList.remove("hide");
382 404
    ul.ul.appendChild(ul.work_li);
405
    list_set_scrollbar(ul.ul);
383 406

  
384 407
    if (name !== undefined)
385 408
	ul.work_name_input.value = name;
......
394 417
    radio_components_window.classList.add("hide");
395 418

  
396 419
    for (let li of chbx_components_ul.children) {
397
	let chbx = li.firstElementChild;
420
	let chbx = li.firstElementChild.firstElementChild;
398 421
	chbx.checked = false;
399 422
    }
400 423
}
......
404 427
    let selected = [];
405 428

  
406 429
    for (let li of chbx_components_ul.children) {
407
	let chbx = li.firstElementChild;
430
	let chbx = li.firstElementChild.firstElementChild;
408 431
	if (!chbx.checked)
409 432
	    continue;
410 433

  
......
432 455

  
433 456
    let [prefix, item] = components;
434 457
    let li = by_id(radio_li_id(prefix, item));
458

  
435 459
    if (li === null)
436 460
	radio_component_none_input.checked = false;
437 461
    else
438
	li.firstElementChild.checked = true;
462
	li.firstElementChild.firstElementChild.checked = true;
439 463
}
440 464

  
441 465
function commit_page_components()
......
443 467
    let components = null;
444 468

  
445 469
    for (let li of radio_components_ul.children) {
446
	let radio = li.firstElementChild;
470
	let radio = li.firstElementChild.firstElementChild;
447 471
	if (!radio.checked)
448 472
	    continue;
449 473

  
......
710 734
    for (let [components_ul, id_creator] of uls_creators) {
711 735
	let li = by_id(id_creator(change.prefix, change.item));
712 736
	components_ul.removeChild(li);
737
	list_set_scrollbar(components_ul);
713 738
    }
714 739
}
715 740

  

Also available in: Unified diff