forked from Loirooriol/tab-counter-plus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoptions.html
158 lines (137 loc) · 5.46 KB
/
options.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
<!--
Copyright 2018 Oriol Brufau
Additions 2019 by Jonathon Merz
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Tab Counter Preferences</title>
<style type="text/css">
html {
font-family: sans-serif;
}
h1 {
font-size: 1.5em;
margin-bottom: 0;
}
h3 {
font-size: 1.2em;
margin-top: 1em;
margin-bottom: .3em;
}
input[type = "checkbox"] {
vertical-align: text-top;
}
input[type = "color"] {
vertical-align: middle;
}
label {
display: inline-block;
min-width: 165px;
text-align: left;
}
[data-if] {
display: none;
}
input:nth-of-type(1):checked ~ [data-if ~= n1],
input:nth-of-type(2):checked ~ [data-if ~= n2],
input:nth-of-type(3):checked ~ [data-if ~= n3] {
display: block;
}
input#bgColorEnabled:checked ~ [data-if ~= bgColorEnabled],
input#bgColorEnabled:not(:checked) ~ [data-if ~= bgColorDisabled],
input#textColorEnabled:checked ~ [data-if ~= textColorEnabled],
input#textColorEnabled:not(:checked) ~ [data-if ~= textColorDisabled] {
display: inline;
}
br[data-bigger] {
margin-bottom: 1.2em;
}
</style>
<h1>Tab Counter Preferences</h1>
<form>
<h2>Counter style</h3>
<!--
<input type="radio" name="useBadge" id="useBadge-false" value="false" checked />
<label for="useBadge-false">Use SVG icon</label>
<br />
<input type="radio" name="useBadge" id="useBadge-true" value="true" />
<label for="useBadge-true">Use WebExtension badge</label>
<br />
-->
<div>
<h3>Counter Size</h3>
<b><i>Must match the values set in your userChrome.css file. See the Readme file at Add-on Homepage above for instructions.</i></b>
<br />
<label for="actionIconWidthPx">Counter icon width (px)</label>
<input type="number" id="actionIconWidthPx" value="84" />
<label for="actionIconWidthPx"><i>(Set to the <b>width:</b> attribute used in userChrome.css)</i></label>
<br />
<label for="actionIconHeightPx">Counter icon height (px)</label>
<input type="number" id="actionIconHeightPx" value="28" />
<label for="actionIconHeightPx"><i>(Set to the <b>height:</b> attribute used in userChrome.css)</i></label>
<br />
<h3>Counter Colors</h3>
<label for="bgColor">Background color:</label>
<input type="checkbox" id="bgColorEnabled" />
<input type="color" id="bgColor" value="#ffffff" data-if="bgColorEnabled" />
<input type="color" id="bgColorDisabled" value="#ffffff" data-if="bgColorDisabled" disabled />
<br />
<label for="textColor">Text color:</label>
<input type="checkbox" id="textColorEnabled" checked />
<input type="color" id="textColor" value="#000000" data-if="textColorEnabled" />
<input type="color" id="textColorDisabled" value="#000000" data-if="textColorDisabled" disabled />
<br />
<h3>Counter Font</h3>
<label for="maxFontSize">Max Font Size</label>
<input type="number" id="maxFontSize" value="18" />
<br />
<label for="fontWeight">Font Weight</label>
<input type="number" id="fontWeight" min="100" max="900" step="100" value="100" />
<br />
</div>
<div>
<h3>Hidden Tab Behavior</h3>
<input type="radio" name="hiddenTabsOption" id="hiddenTabsOption-doNotShow" value="doNotShow" checked />
<label for="hiddenTabsOption-doNotShow">Do not show hidden tab count</label>
<br />
<input type="radio" name="hiddenTabsOption" id="hiddenTabsOption-showWhenPresent" value="showWhenPresent" checked />
<label for="hiddenTabsOption-showWhenPresent">Show hidden tab count only if there are hidden tabs</label>
<br />
<input type="radio" name="hiddenTabsOption" id="hiddenTabsOption-showWhenZero" value="showWhenZero" />
<label for="hiddenTabsOption-showWhenZero">Show hidden tab count even if there are no hidden tabs</label>
<br data-bigger />
<h3>Tooltip data</h3>
<label for="titleCurrentTabPrefix">Text prefix for the current tab</label>
<input type="text" id="titleCurrentTabPrefix" value="Current Tab: " />
<br />
<label for="titleVisibleTabsPrefix">Text prefix for the visible tabs</label>
<input type="text" id="titleVisibleTabsPrefix" value="Open tabs: " />
<br />
<label for="titleHiddenTabsPrefix">Text prefix for the hidden tabs</label>
<input type="text" id="titleHiddenTabsPrefix" value="Hidden tabs: " />
<br data-bigger />
</div>
<!--
<div data-if="n2">
<input type="checkbox" id="badgeBgColorEnabled" checked />
<input type="color" id="badgeBgColor" value="#4b4b4b" />
<label for="badgeBgColor">Badge background color</label>
</div>
-->
<p>
<input type="submit" value="Save" />
<input type="reset" value="Reset values to default" />
</p>
</form>
<script type="text/javascript" src="options.js"></script>
</html>