Left: | ||
Right: |
LEFT | RIGHT |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 - This file is part of Adblock Plus <https://adblockplus.org/>, | 3 - This file is part of Adblock Plus <https://adblockplus.org/>, |
4 - Copyright (C) 2006-2015 Eyeo GmbH | 4 - Copyright (C) 2006-2015 Eyeo GmbH |
5 - | 5 - |
6 - Adblock Plus is free software: you can redistribute it and/or modify | 6 - Adblock Plus is free software: you can redistribute it and/or modify |
7 - it under the terms of the GNU General Public License version 3 as | 7 - it under the terms of the GNU General Public License version 3 as |
8 - published by the Free Software Foundation. | 8 - published by the Free Software Foundation. |
9 - | 9 - |
10 - Adblock Plus is distributed in the hope that it will be useful, | 10 - Adblock Plus is distributed in the hope that it will be useful, |
11 - but WITHOUT ANY WARRANTY; without even the implied warranty of | 11 - but WITHOUT ANY WARRANTY; without even the implied warranty of |
12 - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | 12 - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
13 - GNU General Public License for more details. | 13 - GNU General Public License for more details. |
14 - | 14 - |
15 - You should have received a copy of the GNU General Public License | 15 - You should have received a copy of the GNU General Public License |
16 - along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. | 16 - along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. |
17 --> | 17 --> |
18 | 18 |
19 <html> | 19 <html> |
20 <head> | 20 <head> |
21 <meta charset="utf-8"> | 21 <meta charset="utf-8"> |
22 <title class="i18n_options_page_title"></title> | 22 <title class="i18n_options_page_title"></title> |
Felix Dahlke
2015/06/05 21:51:26
Nit: Why not use dashes here for consistency? Can
Felix Dahlke
2015/06/07 21:09:59
Nevermind actually - this way it's consistent with
| |
23 <link type="text/css" rel="stylesheet" href="skin/options.css"> | 23 <link rel="stylesheet" href="skin/options.css"> |
24 <style type="text/css" id="search-style"></style> | 24 <style id="search-style"></style> |
Felix Dahlke
2015/06/05 21:51:26
Nit: type is optional here since we're using HTML5
saroyanm
2015/06/09 15:29:13
Done.
| |
25 <script src="ext/common.js"></script> | 25 <script src="ext/common.js"></script> |
26 <script src="ext/content.js"></script> | 26 <script src="ext/content.js"></script> |
27 <script src="i18n.js"></script> | 27 <script src="i18n.js"></script> |
28 <script src="options.js"></script> | 28 <script src="options.js"></script> |
29 </head> | 29 </head> |
30 <body data-tab="general"> | 30 <body data-tab="general"> |
31 <!-- Navigation sidebar --> | 31 <!-- Navigation sidebar --> |
32 <div id="nav-sidebar"> | 32 <div id="nav-sidebar"> |
Felix Dahlke
2015/06/05 21:51:26
Since we're using HTML5, I think we should use nav
saroyanm
2015/06/09 15:29:13
https://issues.adblockplus.org/ticket/2669
| |
33 <div id="fixed-sidebar" class="fixed"> | 33 <div id="fixed-sidebar" class="fixed"> |
34 <div id="page-title"> | 34 <div id="page-title"> |
35 <p class="i18n_options_page_name"></p> | 35 <p class="i18n_options_page_header_1"></p> |
36 <h1 class="i18n_options_abp"></h1> | 36 <h1 class="i18n_options_page_header_2"></h1> |
37 </div> | 37 </div> |
38 <ul class="tabs vertical" id="main-navigation-tabs"> | 38 <ul id="main-navigation-tabs" class="tabs vertical"> |
Felix Dahlke
2015/06/05 21:51:26
Tiny nit: Sometimes it's id before class, sometime
saroyanm
2015/06/09 15:29:13
Done.
| |
39 <li id="tab-general" data-show="general" class="active"> | 39 <li id="tab-general" data-show="general" class="active"> |
40 <span class="i18n_options_tab_general"></span> | 40 <span class="i18n_options_tab_general"></span> |
41 <span class="icon"></span> | 41 <span class="icon"></span> |
42 </li> | 42 </li> |
43 <li id="tab-advanced" data-show="advanced"> | 43 <li id="tab-advanced" data-show="advanced"> |
44 <span class="i18n_options_tab_advanced"></span> | 44 <span class="i18n_options_tab_advanced"></span> |
45 <span class="icon"></span> | 45 <span class="icon"></span> |
46 </li> | 46 </li> |
47 <li id="tab-help" data-show="help"> | 47 <li id="tab-help" data-show="help"> |
48 <span class="i18n_options_tab_help"></span> | 48 <span class="i18n_options_tab_help"></span> |
49 <span class="icon"></span> | 49 <span class="icon"></span> |
50 </li> | 50 </li> |
51 </ul> | 51 </ul> |
52 <p class="nav-link"> | 52 <p class="nav-link"> |
53 <span class="i18n_options_version"></span> <span id="abp-version"></sp an> | 53 <span class="i18n_options_version"></span> <span id="abp-version"></sp an> |
54 </p> | 54 </p> |
55 <ul class="tabs vertical bottom"> | 55 <ul class="tabs vertical bottom"> |
56 <li id="tab-share"> | 56 <li id="tab-share"> |
57 <span class="i18n_options_tab_share"></span><span class="icon"></spa n> | 57 <span class="i18n_options_tab_share"></span><span class="icon"></spa n> |
58 </li> | 58 </li> |
59 <li id="tab-donate"> | 59 <li id="tab-donate"> |
60 <span class="i18n_options_tab_donate"></span><span class="icon"></sp an> | 60 <span class="i18n_options_tab_donate"></span><span class="icon"></sp an> |
61 </li> | 61 </li> |
62 </ul> | 62 </ul> |
63 </div> | 63 </div> |
64 </div> | 64 </div> |
65 <div id="tab-content"> | 65 <div id="tab-content"> |
66 <div id="content-wrapper"> | 66 <div id="content-wrapper"> |
67 <div id="modal-background"></div> | 67 <div id="dialog-background"></div> |
68 | 68 |
69 <!-- General tab content --> | 69 <!-- General tab content --> |
70 <div id="content-general"> | 70 <div id="content-general"> |
71 <div> | 71 <div> |
72 <h1 class="i18n_options_blocking"></h1> | 72 <h1 class="i18n_options_blocking_title"></h1> |
73 <div class="flex-container"> | 73 <div class="flex-container"> |
74 <div id="blocking-languages"> | 74 <div id="blocking-languages"> |
75 <p class="option-name"> | 75 <p class="option-name"> |
76 <span class="i18n_options_language_title"></span> | 76 <span class="i18n_options_language_title"></span> |
77 <a class="i18n_options_readMore tooltip" target="_blank"></a> | 77 <a class="i18n_options_readMore tooltip" target="_blank"></a> |
78 </p> | 78 </p> |
79 <ul class="table list" id="blocking-languages-table"> | 79 <ul id="blocking-languages-table" class="table list"> |
80 <template> | 80 <template> |
81 <input type="checkbox" class="control" /> | 81 <input type="checkbox" class="control" /> |
82 <span class="display"></span> | 82 <span class="display"></span> |
83 </template> | 83 </template> |
84 </ul> | 84 </ul> |
85 <div class="controls"> | 85 <div class="controls"> |
86 <button id="add-website-language"> | 86 <button id="add-website-language"> |
87 <span class="icon icon-add"></span> | 87 <span class="icon icon-add"></span> |
88 <span class="i18n_options_language_add"></span> | 88 <span class="i18n_options_language_add"></span> |
89 </button> | 89 </button> |
90 </div> | 90 </div> |
91 </div> | 91 </div> |
92 <div id="further-blocking"> | 92 <div id="further-blocking"> |
93 <p class="option-name"> | 93 <p class="option-name"> |
94 <strong class="i18n_options_furtherBlocking_title"></strong> | 94 <strong class="i18n_options_furtherBlocking_title"></strong> |
95 <a class="i18n_options_readMore tooltip" target="_blank"></a> | 95 <a class="i18n_options_readMore tooltip" target="_blank"></a> |
96 </p> | 96 </p> |
97 <div id="custom-wrapper"> | 97 <div id="custom-wrapper"> |
98 <ul class="table list" id="recommend-list-table"> | 98 <ul id="recommend-list-table" class="table list"> |
99 <template> | 99 <template> |
100 <input type="checkbox" class=control /> | 100 <input type="checkbox" class=control /> |
101 <span class="display"></span> | 101 <span class="display"></span> |
102 <span class="popular"></span> | 102 <span class="popular"></span> |
103 </template> | 103 </template> |
104 </ul> | 104 </ul> |
105 <ul class="table list" id="custom-list-table"> | 105 <ul id="custom-list-table" class="table list"> |
106 <template> | 106 <template> |
107 <input type="checkbox" class="control" /> | 107 <input type="checkbox" class="control" /> |
108 <span class="display"></span> | 108 <span class="display"></span> |
109 </template> | 109 </template> |
110 </ul> | 110 </ul> |
111 </div> | 111 </div> |
112 <div class="controls"> | 112 <div class="controls"> |
113 <button id="add-blocking-list"> | 113 <button id="add-blocking-list"> |
114 <span class="icon icon-add"></span> | 114 <span class="icon icon-add"></span> |
115 <span class="i18n_options_furtherBlocking_add"><span> | 115 <span class="i18n_options_furtherBlocking_add"><span> |
116 </button> | 116 </button> |
117 </div> | 117 </div> |
118 </div> | 118 </div> |
119 </div> | 119 </div> |
120 </div> | 120 </div> |
121 <div> | 121 <div> |
122 <h1 class="i18n_options_exceptions"></h1> | 122 <h1 class="i18n_options_exceptions_title"></h1> |
123 <div class="flex-container"> | 123 <div class="flex-container"> |
124 <div id="acceptable-ads"> | 124 <div id="acceptable-ads"> |
125 <p class="option-name"> | 125 <p class="option-name"> |
126 <strong class="i18n_options_acceptableAds_title"></strong> | 126 <strong class="i18n_options_acceptableAds_title"></strong> |
127 <a class="i18n_options_readMore tooltip" target="_blank"></a> | 127 <a class="i18n_options_readMore tooltip" target="_blank"></a> |
128 </p> | 128 </p> |
129 <ul id="acceptableads-table" class="table list"> | 129 <ul id="acceptableads-table" class="table list"> |
130 <template> | 130 <template> |
131 <input type="checkbox" class="control" /> | 131 <input type="checkbox" class="control" /> |
132 <span class="display"></span> | 132 <span class="display"></span> |
133 </template> | 133 </template> |
134 </ul> | 134 </ul> |
135 </div> | 135 </div> |
136 <div id="whitelisting"> | 136 <div id="whitelisting"> |
137 <p class="option-name"> | 137 <p class="option-name"> |
138 <strong class="i18n_options_whitelisted_title"></strong> | 138 <strong class="i18n_options_whitelisted_title"></strong> |
139 <a class="i18n_options_readMore tooltip" target="_blank"></a> | 139 <a class="i18n_options_readMore tooltip" target="_blank"></a> |
140 </p> | 140 </p> |
141 <ul class="table list" id="whitelisting-table"> | 141 <ul id="whitelisting-table" class="table list"> |
142 <template> | 142 <template> |
143 <button class="delete control"></button> | 143 <button class="delete control"></button> |
144 <span class="display"></span> | 144 <span class="display"></span> |
145 </template> | 145 </template> |
146 </ul> | 146 </ul> |
147 <div class="controls"> | 147 <div class="controls"> |
148 <div> | 148 <div> |
149 <span class="icon icon-add" id="whitelisting-add-icon"></spa n> | 149 <span id="whitelisting-add-icon" class="icon icon-add"></spa n> |
150 <input type="text" id="whitelisting-textbox" /> | 150 <input type="text" id="whitelisting-textbox" /> |
151 <span class="icon icon-enter" id="whitelisting-enter-icon">< /span> | 151 <span id="whitelisting-enter-icon" class="icon icon-enter">< /span> |
152 </div> | 152 </div> |
153 <div> | 153 <div> |
154 <button class="button-add" id="whitelisting-add-button"> | 154 <button id="whitelisting-add-button" class="button-add"> |
155 +<span class="i18n_options_button_add"></span> | 155 +<span class="i18n_options_button_add"></span> |
156 </button> | 156 </button> |
157 <span></span> | 157 <span></span> |
158 <button class="i18n_options_button_cancel cancel-button" id= "whitelisting-cancel-button"></button> | 158 <button id="whitelisting-cancel-button" class="i18n_options_ button_cancel cancel-button"></button> |
159 </div> | 159 </div> |
160 </div> | 160 </div> |
161 </div> | 161 </div> |
162 </div> | 162 </div> |
163 </div> | 163 </div> |
164 </div> | 164 </div> |
165 | 165 |
166 <!-- Advanced tab content --> | 166 <!-- Advanced tab content --> |
167 <div id="content-advanced"> | 167 <div id="content-advanced"> |
168 <div> | 168 <div> |
169 <h1><span class="i18n_options_tweaks"></span><a class="i18n_options_ readMore tooltip" href="#"></a></h1> | 169 <h1><span class="i18n_options_tweaks_title"></span><a class="i18n_op tions_readMore tooltip" href="#"></a></h1> |
170 <ul class="table" style="width: auto;"> | 170 <ul class="table" style="width: auto;"> |
Felix Dahlke
2015/06/05 21:51:26
Nit: Can we avoid using a style attribute here, an
saroyanm
2015/06/09 15:29:13
Yes, please note that this is Advanced tab code we
| |
171 <li> | 171 <li> |
172 <input type="checkbox" id="easylist"/><span id="block-element-ex planation" class="i18n_options_tweaks_blockElement"></span></li> | 172 <input type="checkbox" id="easylist"/><span id="block-element-ex planation" class="i18n_options_tweaks_blockElement"></span></li> |
173 </ul> | 173 </ul> |
174 </div> | 174 </div> |
175 <div> | 175 <div> |
176 <h1><span class="i18n_options_blockingList"></span><a class="i18n_op tions_readMore tooltip" href="#" target="_blank"></a></h1> | 176 <h1><span class="i18n_options_blockingList_title"></span><a class="i 18n_options_readMore tooltip" href="#" target="_blank"></a></h1> |
177 <ul class="tabs horizontal" id="blocking-list-tabs"> | 177 <ul id="blocking-list-tabs" class="tabs horizontal"> |
178 <li class="i18n_options_tab_overview active" data-show="blocking-l ist-overview"></li><li class="i18n_options_tab_ownList" data-show="blocking-list -own"></li> | 178 <li class="i18n_options_tab_overview active" data-show="blocking-l ist-overview"></li><li class="i18n_options_tab_ownList" data-show="blocking-list -own"></li> |
179 </ul> | 179 </ul> |
180 <div id="blocking-list"> | 180 <div id="blocking-list"> |
181 <div id="blocking-list-overview"> | 181 <div id="blocking-list-overview"> |
182 <ul class="table cols" style="width: auto;"> | 182 <ul class="table cols" style="width: auto;"> |
183 <li class="col-name"><span class="i18n_options_tableCol_name"> </span><span class="i18n_options_tableCol_description"></span><span class="i18n_ options_tableCol_date"></span></li> | 183 <li class="col-name"><span class="i18n_options_tableCol_name"> </span><span class="i18n_options_tableCol_description"></span><span class="i18n_ options_tableCol_date"></span></li> |
184 <li><input type="checkbox" id="easylist"/><span>Easylist</span ><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li> | 184 <li><input type="checkbox" id="easylist"/><span>Easylist</span ><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li> |
185 <li><input type="checkbox" id="easylist+de"/><span>Easylist Ge rmany + Easylist</span><span>Adblocking english + german sites</span><span>15 Ma rch 14 - 10:31</span></li> | 185 <li><input type="checkbox" id="easylist+de"/><span>Easylist Ge rmany + Easylist</span><span>Adblocking english + german sites</span><span>15 Ma rch 14 - 10:31</span></li> |
186 <li><input type="checkbox" id="annoyance-fb"/><span>Facebook a nnoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li> | 186 <li><input type="checkbox" id="annoyance-fb"/><span>Facebook a nnoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li> |
187 <li><input type="checkbox" id="annoyance-youtube"/><span>Faceb ook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 Marc h 14 - 10:31</span></li> | 187 <li><input type="checkbox" id="annoyance-youtube"/><span>Faceb ook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 Marc h 14 - 10:31</span></li> |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
224 <span class="i18n_options_blockingRules_edit"></span> | 224 <span class="i18n_options_blockingRules_edit"></span> |
225 </button> | 225 </button> |
226 </div> | 226 </div> |
227 </div> | 227 </div> |
228 </div> | 228 </div> |
229 </div> | 229 </div> |
230 </div> | 230 </div> |
231 | 231 |
232 <!-- Help tab content --> | 232 <!-- Help tab content --> |
233 <div id="content-help"> | 233 <div id="content-help"> |
234 <h1 class="i18n_options_faq"></h1> | 234 <h1 class="i18n_options_faq_title"></h1> |
235 <p class="i18n_options_faq_description"></p> | 235 <p class="i18n_options_faq_description"></p> |
236 <p> | 236 <p> |
237 <a class="i18n_options_faq_link" href="#" target="_blank"></a> | 237 <a class="i18n_options_faq_title" href="#" target="_blank"></a> |
238 </p> | 238 </p> |
239 <h1 class="i18n_options_forum"></h1> | 239 <h1 class="i18n_options_forum_title"></h1> |
240 <p class="i18n_options_forum_description"></p> | 240 <p class="i18n_options_forum_description"></p> |
241 <p> | 241 <p> |
242 <a class="i18n_options_forum_link" href="#" target="_blank"></a> | 242 <a class="i18n_options_forum_link" href="#" target="_blank"></a> |
243 </p> | 243 </p> |
244 <h1 class="i18n_options_media"></h1> | 244 <h1 class="i18n_options_media_title"></h1> |
245 <p class="i18n_options_media_description"></p> | 245 <p class="i18n_options_media_description"></p> |
246 <p> | 246 <p> |
247 <a href="#" target="_blank">Twitter</a> | 247 <a href="#" target="_blank">Twitter</a> |
248 <a href="#" target="_blank">Facebook</a> | 248 <a href="#" target="_blank">Facebook</a> |
249 <a href="#" target="_blank">Google+</a> | 249 <a href="#" target="_blank">Google+</a> |
250 </p> | 250 </p> |
251 </div> | 251 </div> |
252 </div> | 252 </div> |
253 </div> | 253 </div> |
254 | 254 |
255 <!-- Modal --> | 255 <!-- Dialog --> |
256 <div id="modal"> | 256 <div id="dialog"> |
Felix Dahlke
2015/06/05 21:51:26
What's a "modal"? That's rather an adjective, as i
saroyanm
2015/06/09 15:29:13
Done.
| |
257 <header> | 257 <header> |
258 <span id="modal-title"> | 258 <span id="dialog-title"> |
259 <span id="modal-title-customlist" class="i18n_options_modal_customlist _title"></span> | 259 <span id="dialog-title-customlist" class="i18n_options_dialog_customli st_title"></span> |
260 <span id="modal-title-language" class="i18n_options_modal_language_tit le"></span> | 260 <span id="dialog-title-language" class="i18n_options_dialog_language_t itle"></span> |
261 </span> | 261 </span> |
262 <button id="modal-close" class="i18n_options_close"></button> | 262 <button id="dialog-close" class="i18n_options_close"></button> |
263 </header> | 263 </header> |
264 <div class="content" id="modal-body"> | 264 <div id="dialog-body" class="content"> |
265 <!-- Add other website language: Modal --> | 265 <!-- Add other website language: Dialog --> |
266 <div class="modal-content" id="modal-content-language"> | 266 <div id="dialog-content-language" class="dialog-content"> |
267 <div class="modal-content-block"> | 267 <div class="dialog-content-block"> |
268 <h3 class="i18n_options_modal_language_added"></h3> | 268 <h3 class="i18n_options_dialog_language_added"></h3> |
269 <ul class="table list" id="blocking-languages-modal-table"> | 269 <ul id="blocking-languages-dialog-table" class="table list"> |
270 <template> | 270 <template> |
271 <span class="display"></span> | 271 <span class="display"></span> |
272 </template> | 272 </template> |
273 </ul> | 273 </ul> |
274 </div> | 274 </div> |
275 <div class="modal-content-block" id="other-language"> | 275 <div id="other-language" class="dialog-content-block"> |
276 <h3 class="i18n_options_modal_language_other"></h3> | 276 <h3 class="i18n_options_dialog_language_other"></h3> |
277 <div> | 277 <div> |
278 <input type="search" id="find-language" /> | 278 <input type="search" id="find-language" /> |
279 </div> | 279 </div> |
280 <ul class="table list" id="all-lang-table"> | 280 <ul id="all-lang-table" class="table list"> |
281 <template> | 281 <template> |
282 <button class="button-add control"> | 282 <button class="button-add control"> |
283 +<span></span> | 283 +<span></span> |
284 </button> | 284 </button> |
285 <span class="display"></span> | 285 <span class="display"></span> |
286 </template> | 286 </template> |
287 </ul> | 287 </ul> |
288 </div> | 288 </div> |
289 </div> | 289 </div> |
290 <!-- Add other blocking list: Modal --> | 290 <!-- Add other blocking list: Dialog --> |
291 <div class="modal-content" id="modal-content-customlist"> | 291 <div id="dialog-content-customlist" class="dialog-content"> |
292 <div class="modal-content-block"> | 292 <div class="dialog-content-block"> |
293 <h3 class="i18n_options_modal_customlist_subscription_title"></h3> | 293 <h3 class="i18n_options_dialog_customlist_subscription_title"></h3> |
294 <div> | 294 <div> |
295 <input id="blockingList-textbox" type="text" placeholder="www.exam ple.com/blockinglist.txt" /> | 295 <input id="blockingList-textbox" type="text" placeholder="www.exam ple.com/blockinglist.txt" /> |
296 </div> | 296 </div> |
297 <div class="button-wrapper" id="import-blockingList-button"> | 297 <div id="import-blockingList-button" class="button-wrapper"> |
298 <span class="icon icon-arrow"></span> | 298 <span class="icon icon-arrow"></span> |
299 <span class="i18n_options_modal_customlist_import"></span> | 299 <span class="i18n_options_dialog_customlist_import"></span> |
300 </div> | 300 </div> |
301 </div> | 301 </div> |
302 <div class="modal-content-block"> | 302 <div class="dialog-content-block"> |
303 <h3 class="i18n_options_modal_edit_own_list"></h3> | 303 <h3 class="i18n_options_dialog_edit_own_list"></h3> |
304 <div class="button-wrapper" id="edit-ownBlockingList-button"> | 304 <div id="edit-ownBlockingList-button" class="button-wrapper"> |
305 <span class="icon icon-arrow"></span> | 305 <span class="icon icon-arrow"></span> |
306 <span class="i18n_options_modal_create_own_list"></span> | 306 <span class="i18n_options_dialog_create_own_list"></span> |
307 </div> | 307 </div> |
308 </div> | 308 </div> |
309 </div> | 309 </div> |
310 </div> | 310 </div> |
311 </div> | 311 </div> |
312 </body> | 312 </body> |
313 </html> | 313 </html> |
LEFT | RIGHT |