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

Delta Between Two Patch Sets: options.html

Issue 29333819: Issue 2375 - Implement "Blocking lists" section in new options page (Closed)
Left Patch Set: Addressed Thomas comments Created Jan. 22, 2016, 9:53 a.m.
Right Patch Set: Fixed the progress indicator and small fixes Created Feb. 4, 2016, 5:43 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
« background.js ('K') | « messageResponder.js ('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-2016 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 -
(...skipping 21 matching lines...) Expand all
36 <header id="page-title"> 36 <header id="page-title">
37 <p class="i18n_options_page_header_1"></p> 37 <p class="i18n_options_page_header_1"></p>
38 <h1 class="i18n_options_page_header_2"></h1> 38 <h1 class="i18n_options_page_header_2"></h1>
39 </header> 39 </header>
40 <nav> 40 <nav>
41 <ul class="tabs vertical"> 41 <ul class="tabs vertical">
42 <li id="tab-general" data-action="switch-tab" data-tab="general" cla ss="active"> 42 <li id="tab-general" data-action="switch-tab" data-tab="general" cla ss="active">
43 <a class="i18n_options_tab_general"></a> 43 <a class="i18n_options_tab_general"></a>
44 <span class="icon"></span> 44 <span class="icon"></span>
45 </li> 45 </li>
46 <li id="tab-advanced" data-action="switch-tab" data-tab="advanced,fi lter-lists"> 46 <li id="tab-advanced" data-action="switch-tab" data-tab="advanced-al lFilterLists">
47 <a class="i18n_options_tab_advanced"></a> 47 <a class="i18n_options_tab_advanced"></a>
48 <span class="icon"></span> 48 <span class="icon"></span>
49 </li> 49 </li>
50 <li id="tab-help" data-action="switch-tab" data-tab="help"> 50 <li id="tab-help" data-action="switch-tab" data-tab="help">
51 <a class="i18n_options_tab_help"></a> 51 <a class="i18n_options_tab_help"></a>
52 <span class="icon"></span> 52 <span class="icon"></span>
53 </li> 53 </li>
54 </ul> 54 </ul>
55 </nav> 55 </nav>
56 <a id="link-version"> 56 <a id="link-version">
57 <span class="i18n_options_version"></span> 57 <span class="i18n_options_version"></span>
58 <span id="abp-version"></span> 58 <span id="abp-version"></span>
59 </a> 59 </a>
60 <footer> 60 <footer>
61 <ul class="tabs vertical bottom"> 61 <ul class="tabs vertical bottom">
62 <li id="tab-share"> 62 <li id="tab-share">
63 <a class="i18n_options_tab_share"></a> 63 <a class="i18n_options_tab_share"></a>
64 <span class="icon"></span> 64 <span class="icon"></span>
65 </li> 65 </li>
66 <li id="tab-contribute"> 66 <li id="tab-contribute">
67 <a class="i18n_options_tab_contribute"></a> 67 <a class="i18n_options_tab_contribute"></a>
68 <span class="icon"></span> 68 <span class="icon"></span>
69 </li> 69 </li>
70 </ul> 70 </ul>
71 </footer> 71 </footer>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div id="tab-content"> 74 <div id="content">
75 <div id="content-wrapper"> 75 <div id="content-wrapper">
76 <div id="dialog-background"></div> 76 <div id="dialog-background"></div>
77 77
78 <!-- General tab content --> 78 <!-- General tab content -->
79 <div id="content-general"> 79 <div id="content-general" class="tab-content">
80 <div> 80 <div>
81 <h1 class="i18n_options_blocking_title"></h1> 81 <h1 class="i18n_options_blocking_title"></h1>
82 <div class="hbox"> 82 <div class="hbox">
83 <div id="blocking-languages"> 83 <div id="blocking-languages">
84 <div class="option-name"> 84 <div class="option-name">
85 <span class="i18n_options_language_title"></span> 85 <span class="i18n_options_language_title"></span>
86 <div class="tooltip"> 86 <div class="tooltip">
87 <span class="i18n_options_readMore"></span> 87 <span class="i18n_options_readMore"></span>
88 <div role="tooltip"> 88 <div role="tooltip">
89 <img src="skin/tooltips/block.png" alt="" /> 89 <img src="skin/tooltips/block.png" alt="" />
90 <p class="i18n_options_language_title_tooltip"></p> 90 <p class="i18n_options_language_title_tooltip"></p>
91 <div class="notes"> 91 <div class="notes">
92 <p class="i18n_options_language_title_tooltip_notes_1">< /p> 92 <p class="i18n_options_language_title_tooltip_notes_1">< /p>
93 <p class="i18n_options_language_title_tooltip_notes_2">< /p> 93 <p class="i18n_options_language_title_tooltip_notes_2">< /p>
94 </div> 94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97 </div> 97 </div>
98 <ul id="blocking-languages-table" class="table list"> 98 <ul id="blocking-languages-table" class="table list">
99 <template> 99 <template>
100 <input type="checkbox" class="control" /> 100 <button role="checkbox" class="control"></button>
101 <span class="display"></span> 101 <span class="display"></span>
102 </template> 102 </template>
103 </ul> 103 </ul>
104 <div class="controls"> 104 <div class="controls">
105 <button data-action="open-dialog" data-dialog="language"> 105 <button data-action="open-dialog" data-dialog="language">
106 <span class="icon icon-add"></span> 106 <span class="icon icon-add"></span>
107 <span class="i18n_options_language_add"></span> 107 <span class="i18n_options_language_add"></span>
108 </button> 108 </button>
109 </div> 109 </div>
110 </div> 110 </div>
111 <div id="further-blocking"> 111 <div id="further-blocking">
112 <div class="option-name"> 112 <div class="option-name">
113 <strong class="i18n_options_furtherBlocking_title"></strong> 113 <strong class="i18n_options_furtherBlocking_title"></strong>
114 <div class="tooltip"> 114 <div class="tooltip">
115 <span class="i18n_options_readMore"></span> 115 <span class="i18n_options_readMore"></span>
116 <div role="tooltip" class="flip-vertical"> 116 <div role="tooltip" class="flip-vertical">
117 <img src="skin/tooltips/more.png" alt="" /> 117 <img src="skin/tooltips/more.png" alt="" />
118 <p class="i18n_options_furtherBlocking_title_tooltip"></p> 118 <p class="i18n_options_furtherBlocking_title_tooltip"></p>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 <div id="custom-wrapper"> 122 <div id="custom-wrapper">
123 <ul id="recommend-list-table" class="table list"> 123 <ul id="recommend-list-table" class="table list">
124 <template> 124 <template>
125 <input type="checkbox" class="control" /> 125 <button role="checkbox" class="control"></button>
126 <span class="display"></span> 126 <span class="display"></span>
127 <span class="i18n_options_popular popular"></span> 127 <span class="i18n_options_popular popular"></span>
128 </template> 128 </template>
129 </ul> 129 </ul>
130 <ul id="custom-list-table" class="table list"> 130 <ul id="custom-list-table" class="table list">
131 <template> 131 <template>
132 <input type="checkbox" class="control" /> 132 <button role="checkbox" class="control"></button>
133 <span class="display"></span> 133 <span class="display"></span>
134 </template> 134 </template>
135 </ul> 135 </ul>
136 </div> 136 </div>
137 <div class="controls"> 137 <div class="controls">
138 <button data-action="open-dialog" data-dialog="custom"> 138 <button data-action="open-dialog" data-dialog="custom">
139 <span class="icon icon-add"></span> 139 <span class="icon icon-add"></span>
140 <span class="i18n_options_furtherBlocking_add"><span> 140 <span class="i18n_options_furtherBlocking_add"><span>
141 </button> 141 </button>
142 </div> 142 </div>
(...skipping 11 matching lines...) Expand all
154 <div role="tooltip"> 154 <div role="tooltip">
155 <img src="skin/tooltips/acceptable-ads.png" alt="" /> 155 <img src="skin/tooltips/acceptable-ads.png" alt="" />
156 <p class="i18n_options_acceptableAds_title_tooltip_1"></p> 156 <p class="i18n_options_acceptableAds_title_tooltip_1"></p>
157 <p class="i18n_options_acceptableAds_title_tooltip_2"></p> 157 <p class="i18n_options_acceptableAds_title_tooltip_2"></p>
158 <p class="i18n_options_acceptableAds_title_tooltip_3"></p> 158 <p class="i18n_options_acceptableAds_title_tooltip_3"></p>
159 </div> 159 </div>
160 </div> 160 </div>
161 </div> 161 </div>
162 <ul id="acceptableads-table" class="table list"> 162 <ul id="acceptableads-table" class="table list">
163 <template> 163 <template>
164 <input type="checkbox" class="control" /> 164 <button role="checkbox" class="control"></button>
165 <span class="display"></span> 165 <span class="display"></span>
166 </template> 166 </template>
167 </ul> 167 </ul>
168 </div> 168 </div>
169 <div id="whitelisting"> 169 <div id="whitelisting">
170 <div class="option-name"> 170 <div class="option-name">
171 <strong class="i18n_options_whitelisted_title"></strong> 171 <strong class="i18n_options_whitelisted_title"></strong>
172 <div class="tooltip"> 172 <div class="tooltip">
173 <span class="i18n_options_readMore"></span> 173 <span class="i18n_options_readMore"></span>
174 <div role="tooltip" class="flip-vertical"> 174 <div role="tooltip" class="flip-vertical">
(...skipping 29 matching lines...) Expand all
204 <span></span> 204 <span></span>
205 <button class="i18n_options_button_cancel cancel-button" dat a-action="cancel-domain-exception"></button> 205 <button class="i18n_options_button_cancel cancel-button" dat a-action="cancel-domain-exception"></button>
206 </div> 206 </div>
207 </div> 207 </div>
208 </div> 208 </div>
209 </div> 209 </div>
210 </div> 210 </div>
211 </div> 211 </div>
212 212
213 <!-- Advanced tab content --> 213 <!-- Advanced tab content -->
214 <div id="content-advanced"> 214 <div id="content-advanced" class="tab-content">
215 <div> 215 <div>
216 <h1> 216 <h1>
217 <span class="i18n_options_tweaks_title"></span> 217 <span class="i18n_options_tweaks_title"></span>
218 <a class="i18n_options_readMore tooltip" href="#"></a> 218 <a class="i18n_options_readMore tooltip"></a>
219 </h1> 219 </h1>
220 <ul class="table"> 220 <ul class="table">
221 <li> 221 <li>
222 <input type="checkbox" id="easylist"/> 222 <button role="checkbox" id="easylist"></button>
223 <span id="block-element-explanation" class="i18n_options_tweaks_ blockElement"></span> 223 <span id="block-element-explanation" class="i18n_options_tweaks_ blockElement"></span>
224 </li> 224 </li>
225 </ul> 225 </ul>
226 </div> 226 </div>
227 <div> 227 <div>
228 <h1> 228 <h1>
229 <span class="i18n_options_blockingList_title"></span> 229 <span class="i18n_options_filterList_title"></span>
230 <a class="i18n_options_readMore tooltip" href="#"></a> 230 <a class="i18n_options_readMore tooltip"></a>
231 </h1> 231 </h1>
232 <ul class="tabs horizontal"> 232 <ul class="tabs horizontal">
233 <li class="i18n_options_tab_overview active" data-action="switch-t ab" data-tab="advanced,filter-lists"></li> 233 <li class="i18n_options_tab_overview active" data-action="switch-t ab" data-tab="advanced-allFilterLists"></li>
234 <li class="i18n_options_tab_ownList" data-action="switch-tab" data -tab="advanced,custom-filters"></li> 234 <li class="i18n_options_tab_ownList" data-action="switch-tab" data -tab="advanced-customFilters"></li>
235 </ul> 235 </ul>
236 <div id="blocking-lists"> 236 <div id="filter-lists">
237 <div id="filter-lists"> 237 <div id="all-filter-lists">
Thomas Greiner 2016/01/25 15:40:31 Detail: It's unclear what the difference between t
saroyanm 2016/01/26 18:36:17 Done, I also updated texts that contain blocking l
Thomas Greiner 2016/01/27 17:16:56 Awesome, thanks!
238 <div class="table-header"> 238 <div class="table-header">
239 <h3 class="i18n_options_tableCol_name"></h3> 239 <h3 class="i18n_options_column_name"></h3>
240 <h3 class="i18n_options_tableCol_date"></h3> 240 <h3 class="i18n_options_column_date"></h3>
241 </div> 241 </div>
242 <ul class="table cols" id="blocking-lists-table"> 242 <ul class="table cols" id="all-filter-lists-table">
243 <template> 243 <template>
244 <input type="checkbox" class="control" /> 244 <button role="checkbox" class="control"></button>
245 <span> 245 <div>
246 <span data-action="open-context-menu" class="display"></sp an> 246 <span data-action="open-context-menu" class="display"></sp an>
247 <div class="context-menu"> 247 <div data-action="open-context-menu" class="arrow">
248 <a href="#" data-action="open-context-menu" class="arrow "></a> 248 <div class="context-menu">
Thomas Greiner 2016/01/25 15:40:30 Detail: No need to set the "href" attribute here s
saroyanm 2016/01/26 18:36:18 Done, also removed from other non linking anchors
249 <div class="container"> 249 <div class="content">
250 <div class="content" data-action="no-action"> 250 <a class="i18n_options_filterList_updateNow update-s ubscription" data-action="update-subscription"></a>
251 <a class="i18n_options_blockingList_updateNow update -now" data-action="update-now"></a> 251 <a class="i18n_options_filterList_website website" t arget="_blank"></a>
252 <a class="i18n_options_blockingList_website website" target="_blank" data-action="website"></a> 252 <a class="i18n_options_filterList_source source" tar get="_blank"></a>
253 <a class="i18n_options_blockingList_source source" t arget="_blank" data-action="source"></a> 253 <a class="i18n_options_filterList_delete delete" dat a-action="remove-subscription"></a>
254 <a class="i18n_options_blockingList_delete delete" d ata-action="delete"></a>
255 </div> 254 </div>
256 </div> 255 </div>
257 </div> 256 </div>
258 </span> 257 </div>
259 <span class="date"></span> 258 <span class="date"></span>
260 <span class="time"></span> 259 <span class="time"></span>
260 <span class="message"></span>
261 </template> 261 </template>
262 <li class="static"> 262 <li class="static">
263 <input type="checkbox" id="own-list" checked="true" disabled ="true" /> 263 <button role="checkbox" class="control" aria-checked="true" disabled="true"></button>
Thomas Greiner 2016/01/25 15:40:31 Detail: It doesn't seem you're using this ID here
saroyanm 2016/01/26 18:36:17 Done.
264 <span> 264 <div>
265 <span class="i18n_options_blockingList_own_list"></span> 265 <span class="i18n_options_filterList_own_list"></span>
266 </span> 266 </div>
267 <span data-action="switch-tab,edit-custom-filters" data-tab= "advanced,custom-filters"> 267 <span data-action="switch-tab,edit-custom-filters" data-tab= "advanced-customFilters">
268 <a class="i18n_options_blockingList_edit_own_list" href="# "></a> 268 <a class="i18n_options_filterList_edit_own_list"></a>
269 </span> 269 </span>
270 </li> 270 </li>
271 </ul> 271 </ul>
272 <div class="controls"> 272 <div class="controls">
273 <button data-action="open-dialog" data-dialog="custom"> 273 <button data-action="open-dialog" data-dialog="custom">
274 <span class="icon icon-add"></span><span class="i18n_options _blockingList_add"></span> 274 <span class="icon icon-add"></span>
275 <span class="i18n_options_filterList_add"></span>
275 </button> 276 </button>
276 <button data-action="update-all-subscriptions"> 277 <button data-action="update-all-subscriptions">
277 <span class="icon icon-update"></span><span class="i18n_opti ons_blockingList_update"></span> 278 <span class="icon icon-update"></span>
279 <span class="i18n_options_filterList_update"></span>
278 </button> 280 </button>
279 </div> 281 </div>
280 </div> 282 </div>
281 <div id="custom-filters"> 283 <div id="custom-filters">
282 <h2 id="custom-filters-header" class="i18n_options_customFilters _title"></h2> 284 <h3 id="custom-filters-header" class="i18n_options_customFilters _title"></h3>
Thomas Greiner 2016/01/25 15:40:30 Why are you using `<h2>` here while you're using `
saroyanm 2016/01/26 18:36:18 Done.
283 <div id="custom-filters-wrapper"> 285 <div id="custom-filters-wrapper">
284 <div id="custom-filters-list-wrapper"> 286 <div id="custom-filters-list-wrapper">
285 <ul id="custom-filters-table" class="table list"> 287 <ul id="custom-filters-table" class="table list">
286 <template> 288 <template>
287 <span class="display"></span> 289 <span class="display"></span>
288 </template> 290 </template>
289 </ul> 291 </ul>
290 <form id="custom-filters-add" class="controls"> 292 <form id="custom-filters-add" class="controls">
291 <input type="text"/> 293 <input type="text"/>
292 <button class="i18n_options_button_add" type="submit"></bu tton> 294 <button class="i18n_options_button_add" type="submit"></bu tton>
(...skipping 16 matching lines...) Expand all
309 <span class="i18n_options_customFilter_save"></span> 311 <span class="i18n_options_customFilter_save"></span>
310 </button> 312 </button>
311 </div> 313 </div>
312 </div> 314 </div>
313 </div> 315 </div>
314 </div> 316 </div>
315 </div> 317 </div>
316 </div> 318 </div>
317 319
318 <!-- Help tab content --> 320 <!-- Help tab content -->
319 <div id="content-help"> 321 <div id="content-help" class="tab-content">
320 <h1 class="i18n_options_faq_title"></h1> 322 <h1 class="i18n_options_faq_title"></h1>
321 <p class="i18n_options_faq_description"></p> 323 <p class="i18n_options_faq_description"></p>
322 <p> 324 <p>
323 <a class="i18n_options_faq_title" href="#" target="_blank"></a> 325 <a class="i18n_options_faq_title" href="#" target="_blank"></a>
324 </p> 326 </p>
325 <h1 class="i18n_options_forum_title"></h1> 327 <h1 class="i18n_options_forum_title"></h1>
326 <p class="i18n_options_forum_description"></p> 328 <p class="i18n_options_forum_description"></p>
327 <p> 329 <p>
328 <a class="i18n_options_forum_link" href="#" target="_blank"></a> 330 <a class="i18n_options_forum_link" href="#" target="_blank"></a>
329 </p> 331 </p>
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
378 <div id="dialog-content-custom" class="dialog-content"> 380 <div id="dialog-content-custom" class="dialog-content">
379 <div class="dialog-content-block"> 381 <div class="dialog-content-block">
380 <div> 382 <div>
381 <label for="blockingList-textbox" class="i18n_options_dialog_custo m_subscription_title"></label> 383 <label for="blockingList-textbox" class="i18n_options_dialog_custo m_subscription_title"></label>
382 <input id="blockingList-textbox" type="text" class="default-focus" placeholder="www.example.com/blockinglist.txt" /> 384 <input id="blockingList-textbox" type="text" class="default-focus" placeholder="www.example.com/blockinglist.txt" />
383 </div> 385 </div>
384 <button class="i18n_options_dialog_custom_import" data-action="impor t-subscription"></button> 386 <button class="i18n_options_dialog_custom_import" data-action="impor t-subscription"></button>
385 </div> 387 </div>
386 <div class="dialog-content-block"> 388 <div class="dialog-content-block">
387 <h3 class="i18n_options_dialog_edit_own_list"></h3> 389 <h3 class="i18n_options_dialog_edit_own_list"></h3>
388 <button class="i18n_options_dialog_create_own_list" data-action="clo se-dialog,switch-tab,edit-custom-filters" data-tab="advanced,custom-filters"></b utton> 390 <button class="i18n_options_dialog_create_own_list" data-action="clo se-dialog,switch-tab,edit-custom-filters" data-tab="advanced-customFilters"></bu tton>
389 </div> 391 </div>
390 </div> 392 </div>
391 <!-- Add predefined subscription --> 393 <!-- Add predefined subscription -->
392 <div id="dialog-content-predefined" class="dialog-content"> 394 <div id="dialog-content-predefined" class="dialog-content">
393 <div class="dialog-content-block"> 395 <div class="dialog-content-block">
394 <h3></h3> 396 <h3></h3>
395 <div class="url"></div> 397 <div class="url"></div>
396 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button> 398 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button>
397 </div> 399 </div>
398 </div> 400 </div>
399 </div> 401 </div>
400 <!-- Placeholder element to determine when to wrap focus around --> 402 <!-- Placeholder element to determine when to wrap focus around -->
401 <span class="focus-last" tabindex="0"></span> 403 <span class="focus-last" tabindex="0"></span>
402 </div> 404 </div>
403 </body> 405 </body>
404 </html> 406 </html>
LEFTRIGHT
« messageResponder.js ('k') | options.js » ('j') | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld