forked from shinzlet/oildrop
/
ui.html
172 lines (143 loc) · 6.96 KB
/
ui.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/ui.css" />
<title>Oildrop</title>
</head>
<body>
<main id="home">
<header id="options">
<div id="logo" aria-hidden="true">Oildrop</div>
<div class="bar dense-bar">
<label title="Toggle between Oildrop's light and dark mode.">
<input id="light-toggle" class="wrapped-checkbox" type="checkbox">
<div class="checkbox-proxy" id="light-toggle-icon"></div>
</label>
<button id="settings-button" title="Open the settings dialogue, which contains additional features and accessibility options."></button>
</div>
</header>
<hr>
<section id="overview-controls" class="bar dense-bar">
<!-- I often use css masks and psuedoselectors to recolor SVG
icons throughout my work. However, input and select tags do not support
pseudoelements, which means they have to be wrapped.-->
<label id="global-pause-wrapper" title="Globally pause or unpause Oildrop. If paused, Oildrop will not inject any scripts. If unpaused, Oildrop will operate normally. This will not change which scripts are individually enabled or disabled.">
<input id="global-pause" class="wrapped-checkbox" type="checkbox">
<div id="global-pause-icon" class="checkbox-proxy"></div>
</label>
<div class="select-wrapper">
<select id="filter" title="Filter which scripts are listed. 'Active' scripts are ones which apply to this domain, regardless of if they are running.">
<option value="all" selected>All scripts</option>
<option value="active">Active scripts</option>
<option value="inactive">Inactive scripts</option>
</select>
</div>
<button id="new-script" class="accent-button" title="Create a new script">New script</button>
</section>
<ul id="overview">
</ul>
<div id="snackbar-wrapper">
<div id="snackbar">
Snackbar initialization failed
</div>
</div>
<footer id="footer">
<span>Version 1.0.3</span>
<a href="https://github.com/shinzlet/oildrop">
<div id="github-logo" title="Link to Oildrop's GitHub repository"></div>
</a>
</footer>
</main>
<div class="panel-wrapper" id="editor-wrapper">
<section class="panel" id="editor">
<header>
<h1>Edit script</h1>
<button class="dismiss-panels round-button" title="Delete changes and and close editor"></button>
</header>
<label for="editor-name" title="The name you want to associate with this script. It does not need to be unique.">Name</label>
<input type="text" id="editor-name">
<label for="editor-matches" title="A comma separated list of web addresses. Each web adress must specify the scheme (like https), host (like www.github.com), and path (everything after the slash). For example, to match any google domain, use '*://*.google.*/*'. To match any site using insecure http, use 'http://*/*'. The most general form is '*://*/*', which also has the special identifier '<all_urls>'.">Run on</label>
<input type="text" id="editor-matches">
<label for="editor-code" title="The JavaScript or CSS you want to run on the sites listed above. Because Oildrop is designed to be user-auditable, this is not a code editor - just a text box. Please write your code elsewhere and paste it in here.">Code</label>
<textarea id="editor-code"></textarea>
<div class="bar dense-bar auto-height">
<div>
<label title="The language your script is written in. JavaScript is used to add function to a webpage, and CSS is used to style it.">Language</label>
<div class="select-wrapper">
<select id="editor-language" title="Filter which scripts are listed. 'Active' scripts are ones which apply to this domain, regardless of if they are running.">
<option value="js" selected>JavaScript</option>
<option value="css">CSS</option>
</select>
</div>
</div>
<div class="third">
<label title="Controls when your script should be loaded. If you aren't sure what to use, choose 'After content'. Choosing 'After DOM' will load your script sooner, but might cause the webpage to interfere with your code. 'Before DOM' is tricky to get right, but offers the most flexibility.">Runtime</label>
<div class="select-wrapper">
<select id="editor-runtime" title="Filter which scripts are listed. 'Active' scripts are ones which apply to this domain, regardless of if they are running.">
<option value="document_start">Before DOM</option>
<option value="document_end">After DOM</option>
<option value="document_idle" selected>After content</option>
</select>
</div>
</div>
</div>
<div class="bar">
<button class="dismiss-panels" title="Delete changes and and close editor">
Close
</button>
<button id="editor-save" class="accent-button" title="Save changes and and close editor">
Save
</button>
</div>
</section>
</div>
<div class="panel-wrapper" id="settings-wrapper">
<section class="panel" id="settings">
<header>
<h1>Settings</h1>
<button class="dismiss-panels round-button" title="Close settings"></button>
</header>
<div id="scalar-settings">
<label>
<input id="enable-indent" class="wrapped-checkbox" type="checkbox" checked>
<div class="checkbox-proxy" title="Enable indenting with the tab key in the code editor. This will make tab-navigation of the editor popup impossible due to browser limitations. Only turn this on if you are sighted and use a pointer device (mouse, etc.)."></div>
</label>
<label for="enable-indent">Use tab to indent</label>
</div>
<hr>
<button id="manage-data" title="Import or export your oildrop data via the filesystem.">Import / Export data</button>
<button id="open-in-tab" title="Open oildrop in a tab, rather than a popup.">Open Oildrop in a new tab</button>
<hr>
<h1>About</h1>
<p>
Oildrop is a lightweight userscript/style manager designed to be easily
audited by users.
For usage information and source code, please visit the
<a href="https://github.com/shinzlet/oildrop">project's github repo.</a>
</p>
</section>
</div>
<template id="script-card-template">
<li class="script-card">
<label class="script-enable-wrapper" title="Enable this script">
<input class="wrapped-checkbox script-enable" type="checkbox">
<div class="checkbox-proxy script-enable-icon"></div>
</label>
<div class="script-description">
<p class="script-name"></p>
<p class="script-matches"></p>
<p class="script-date"></p>
</div>
<div class="script-actions">
<button class="round-button script-edit" title="Edit this script"></button>
<button class="round-button script-delete" title="Delete this script"></button>
</div>
</li>
</template>
<script src="js/oildrop.js" type="text/javascript"></script>
<script src="js/ui.js" type="text/javascript"></script>
<script src="js/code_editor.js" type="text/javascript"></script>
</body>
</html>