Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: options.html

Issue 6088024630755328: issue 1526 - Implement new options page design for Chrome/Opera/Safari (Closed)
Left Patch Set: Created March 12, 2015, 2:01 p.m.
Right Patch Set: Comment about solution being temprorary is added to subscriptions.xml Created June 13, 2015, 12:59 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « locale/en-US/options.json ('k') | options.js » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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
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>
LEFTRIGHT

Powered by Google App Engine
This is Rietveld