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

Delta Between Two Patch Sets: new-options.html

Issue 29502647: Issue 5482 - Sidebar and about ABP dialog (Closed)
Left Patch Set: Created Aug. 18, 2017, 12:39 p.m.
Right Patch Set: Fixed nit Created Aug. 28, 2017, 11:38 a.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/new-options.json ('k') | new-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-2017 eyeo GmbH 4 - Copyright (C) 2006-present 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 11 matching lines...) Expand all
26 <script src="ext/content.js"></script> 26 <script src="ext/content.js"></script>
27 <script src="common.js"></script> 27 <script src="common.js"></script>
28 <script src="i18n.js"></script> 28 <script src="i18n.js"></script>
29 <script src="new-options.js"></script> 29 <script src="new-options.js"></script>
30 </head> 30 </head>
31 <body data-tab="general"> 31 <body data-tab="general">
32 <!-- Navigation sidebar --> 32 <!-- Navigation sidebar -->
33 <div id="sidebar"> 33 <div id="sidebar">
34 <div class="fixed"> 34 <div class="fixed">
35 <header> 35 <header>
36 <img id="sidebar-logo" src="skin/abp-logo.svg"> 36 <img id="sidebar-logo" alt="Adblock Plus logo" src="skin/abp-logo.svg" >
juliandoucette 2017/08/21 14:10:33 This logo is pixelated at 1x. I suggest aligning i
saroyanm 2017/08/21 15:20:21 I can't test that, looks fine for me, please note
juliandoucette 2017/08/21 16:07:24 - Test via 72 or 96 DPI monitor in the office - SV
saroyanm 2017/08/21 16:46:10 I don't know what needs/want to be done here ? Are
juliandoucette 2017/08/22 10:10:44 Yes. I'm suggesting that we may be able to change
37 <h1 class="i18n_options_page_title_1"></h1> 37 <h1>
38 <h2 class="i18n_options_page_title_2"></h2> 38 Adblock <strong>Plus</strong>
juliandoucette 2017/08/21 14:10:33 I think <p> is better than <h2> here.
saroyanm 2017/08/21 15:20:22 I'll change it back.
juliandoucette 2017/08/21 16:07:23 Acknowledged.
saroyanm 2017/08/23 13:35:45 Done.
39 </h1>
40 <p class="i18n_options_page_title"></p>
39 </header> 41 </header>
40 42
41 <nav> 43 <nav>
42 <ul class="tabs" 44 <ul class="tabs"
43 role="tablist" data-action="switch-tab" 45 role="tablist" data-action="switch-tab"
44 data-keys="ArrowLeft ArrowUp ArrowRight ArrowDown"> 46 data-keys="ArrowLeft ArrowUp ArrowRight ArrowDown">
45 <li id="tab-general" role="tab" data-tab="general" 47 <li role="presentation">
46 aria-selected="true" aria-controls="content-general" 48 <a href="#general" class="i18n_options_tab_general" role="tab" ari a-selected="true" tabindex="-1" aria-controls="content-general"></a>
47 tabindex="0">
48 <a class="i18n_options_tab_general"></a>
juliandoucette 2017/08/21 14:10:33 NIT: I don't think that text-shadow is enough to c
saroyanm 2017/08/21 15:20:22 I agree, As mentioned here -> https://codereview.a
juliandoucette 2017/08/21 16:07:24 Acknowledged.
49 </li> 49 </li>
50 <li id="tab-whitelist" role="tab" data-tab="whitelist" 50 <li role="presentation">
51 aria-controls="content-whitelist" 51 <a href="#whitelist" class="i18n_options_tab_whitelist" role="tab" tabindex="-1" aria-controls="content-whitelist"></a>
52 tabindex="-1">
53 <a class="i18n_options_tab_whitelist"></a>
juliandoucette 2017/08/21 14:10:34 Tabbing seems to function differently between Chro
saroyanm 2017/08/21 15:20:21 Can't reproduce that :/
juliandoucette 2017/08/21 16:07:23 What happens in your browsers?
saroyanm 2017/08/21 16:46:10 Same you explained for "Chrome".
juliandoucette 2017/08/22 10:10:44 It's definitely an issue on FF for OS X. And addin
saroyanm 2017/08/23 13:35:44 This implementation is changed please let me know
juliandoucette 2017/08/23 18:11:07 See my comment [here](https://codereview.adblockpl
54 </li> 52 </li>
55 <li id="tab-advanced" role="tab" data-tab="advanced" 53 <li role="presentation">
56 aria-controls="content-advanced" tabindex="-1"> 54 <a href="#advanced" class="i18n_options_tab_advanced" role="tab" t abindex="-1" aria-controls="content-advanced"></a>
57 <a class="i18n_options_tab_advanced"></a>
58 </li> 55 </li>
59 <li id="tab-help" role="tab" data-tab="help" 56 <li role="presentation">
60 aria-controls="content-help" tabindex="-1"> 57 <a href="#help" class="i18n_options_tab_help" role="tab" tabindex= "-1" aria-controls="content-help"></a>
61 <a class="i18n_options_tab_help"></a>
62 </li> 58 </li>
63 </ul> 59 </ul>
64 </nav> 60 </nav>
65 <footer> 61 <footer>
66 <p> 62 <p>
67 <a id="contribute" 63 <a id="contribute"
juliandoucette 2017/08/21 14:10:33 NIT: I don't think that the border thickness chang
saroyanm 2017/08/21 15:20:21 I think I did it consistently with the style guide
juliandoucette 2017/08/21 16:07:24 I don't see an active state for the secondary butt
saroyanm 2017/08/21 16:46:09 Yes, active state for secondary button is missing
juliandoucette 2017/08/22 10:10:43 Acknowledged.
68 class="i18n_options_footer_contribute button secondary" 64 class="i18n_options_footer_contribute button secondary"
69 target="_blank"></a> 65 target="_blank"></a>
70 </p> 66 </p>
71 <p> 67 <p>
72 <button class="i18n_options_footer_about link" 68 <button class="i18n_options_footer_about link"
73 data-action="open-dialog" data-dialog="about"></button> 69 data-action="open-dialog" data-dialog="about"></button>
74 </p> 70 </p>
75 </footer> 71 </footer>
76 </div> 72 </div>
77 </div> 73 </div>
78 <main> 74 <main>
saroyanm 2017/08/18 12:44:29 I also changed this element, as we were already to
juliandoucette 2017/08/21 13:06:39 Acknowledged.
79 <div id="dialog-background"></div> 75 <div id="dialog-background"></div>
80 76
81 <!-- General tab content --> 77 <!-- General tab content -->
82 <div id="content-general" role="tabpanel" aria-labelledby="tab-general"> 78 <div id="content-general" role="tabpanel" aria-labelledby="tab-general">
83 <h1 class="i18n_options_tab_general"></h1> 79 <h1 class="i18n_options_tab_general"></h1>
84 <p class="i18n_options_general_description"></p> 80 <p class="i18n_options_general_description"></p>
85 <section> 81 <section>
86 <h2 class="i18n_options_privacy_header"></h2> 82 <h2 class="i18n_options_privacy_header"></h2>
87 <ul id="recommend-security-list-table" class="table list"> 83 <ul id="recommend-protection-list-table" class="table list">
88 <template> 84 <template>
89 <button data-action="toggle-remove-subscription" role="checkbox" c lass="control"></button> 85 <button data-action="toggle-remove-subscription" role="checkbox" c lass="control"></button>
90 <label class="display"></label> 86 <label class="display"></label>
91 <span class="i18n_options_readMore" data-tooltip="options_more_%va lue%_tooltip"></span> 87 <span class="i18n_options_readMore" data-tooltip="options_protecti on_%value%_tooltip"></span>
92 </template> 88 </template>
93 </ul> 89 </ul>
94 </section> 90 </section>
95 <section> 91 <section>
96 <h2 class="i18n_options_aa_header"></h2> 92 <h2 class="i18n_options_acceptableAds_header"></h2>
97 <p class="i18n_options_aa_description"></p> 93 <p class="i18n_options_acceptableAds_description"></p>
98 <form id="acceptable-ads"> 94 <form id="acceptable-ads">
99 <div> 95 <div>
100 <input data-action="enable-aa" type="radio" name="acceptable-ads" value="tracking"> 96 <input data-action="switch-acceptable-ads" type="radio" name="acce ptable-ads" value="ads">
101 <label class="i18n_options_aa_tracking_label"></label> 97 <label class="i18n_options_acceptableAds_ads_label"></label>
102 <p id="enable-aa-description" class="i18n_options_aa_tracking_desc ription_1"></p> 98 <p id="enable-aa-description" class="i18n_options_acceptableAds_ad s_description_1"></p>
103 <p class="i18n_options_aa_tracking_description_2"></p> 99 <p class="i18n_options_acceptableAds_ads_description_2"></p>
104 </div> 100 </div>
105 <div> 101 <div>
106 <input data-action="enable-privacy-aa" type="radio" name="acceptab le-ads" value="no-tracking"> 102 <input data-action="switch-acceptable-ads" type="radio" name="acce ptable-ads" value="privacy">
107 <label class="i18n_options_aa_no_tracking_label"></label> 103 <label class="i18n_options_acceptableAds_privacy_label"></label>
108 <p class="i18n_options_aa_no_tracking_description"></p> 104 <p class="i18n_options_acceptableAds_privacy_description"></p>
109 <p id="no-dnt" class="i18n_options_aa_no_dnt_notification"></p> 105 <p id="dnt" class="i18n_options_acceptableAds_dnt_notification"></ p>
110 </div> 106 </div>
111 <div> 107 <div>
112 <input data-action="block-all" type="radio" name="acceptable-ads" value="disable"> 108 <input data-action="switch-acceptable-ads" type="radio" name="acce ptable-ads" value="none">
113 <label class="i18n_options_aa_disable_label"></label> 109 <label class="i18n_options_acceptableAds_none_label"></label>
114 </div> 110 </div>
115 </form> 111 </form>
116 </section> 112 </section>
117 <section> 113 <section>
118 <h2 class="i18n_options_language_header"></h2> 114 <h2 class="i18n_options_language_header"></h2>
119 <p class="i18n_options_language_description"></p> 115 <p class="i18n_options_language_description"></p>
120 <div id="blocking-languages"> 116 <div id="blocking-languages">
121 <ul id="blocking-languages-table" class="table list"> 117 <ul id="blocking-languages-table" class="table list">
122 <template> 118 <template>
123 <label class="display"></label> 119 <label class="display"></label>
124 <button data-single="hidden" data-action="remove-subscription" c lass="delete control" title="options_control_remove_title"></button> 120 <button data-single="hidden" data-action="remove-subscription" c lass="delete control" title="options_control_remove_title"></button>
125 <button data-single="visible" data-action="save-change-subscript ion,open-dialog" data-dialog="language-change" class="i18n_options_language_chan ge"></button> 121 <button data-single="visible" data-action="open-dialog" data-dia log="language-change" class="i18n_options_language_change"></button>
126 </template> 122 </template>
127 </ul> 123 </ul>
128 <div class="controls"> 124 <div class="controls">
129 <button data-action="open-dialog" data-dialog="language-add"> 125 <button data-action="open-dialog" data-dialog="language-add">
130 <span class="i18n_options_language_add"></span> 126 <span class="i18n_options_language_add"></span>
131 </button> 127 </button>
132 </div> 128 </div>
133 </div> 129 </div>
134 <p class="i18n_options_language_tip"></p> 130 <p class="i18n_options_language_tip"></p>
135 </section> 131 </section>
136 <section> 132 <section>
137 <h2 class="i18n_options_more_filters_header"></h2> 133 <h2 class="i18n_options_more_filters_header"></h2>
138 <p class="i18n_options_more_filters_description"></p> 134 <p class="i18n_options_more_filters_description"></p>
139 <ul id="custom-list-table" class="table list"> 135 <ul id="custom-list-table" class="table list">
140 <template> 136 <template>
141 <label class="display"></label> 137 <label class="display"></label>
142 <span class="i18n_options_readMore" data-tooltip="options_more_%va lue%_tooltip"></span>
143 <button data-action="remove-subscription" class="delete control" t itle="options_control_remove_title"></button> 138 <button data-action="remove-subscription" class="delete control" t itle="options_control_remove_title"></button>
144 </template> 139 </template>
145 </ul> 140 </ul>
146 <p class="i18n_options_more_filters_note"></p> 141 <p class="i18n_options_more_filters_note"></p>
147 </section> 142 </section>
148 </div> 143 </div>
149 144
150 <!-- Whitelist tab content --> 145 <!-- Whitelist tab content -->
151 <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-whitelist "> 146 <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-whitelist ">
152 <h1 class="i18n_options_tab_whitelist"></h1> 147 <h1 class="i18n_options_tab_whitelist"></h1>
(...skipping 131 matching lines...) Expand 10 before | Expand all | Expand 10 after
284 </button> 279 </button>
285 <button class="i18n_options_customFilter_cancel" data-action="canc el-custom-filters"> 280 <button class="i18n_options_customFilter_cancel" data-action="canc el-custom-filters">
286 </button> 281 </button>
287 </div> 282 </div>
288 </div> 283 </div>
289 </section> 284 </section>
290 </div> 285 </div>
291 286
292 <!-- Help tab content --> 287 <!-- Help tab content -->
293 <div id="content-help" role="tabpanel" aria-labelledby="tab-help"> 288 <div id="content-help" role="tabpanel" aria-labelledby="tab-help">
294 <h1 class="i18n_options_faq_title"></h1> 289 <h1 class="i18n_options_tab_help"></h1>
295 <p class="i18n_options_faq_description"></p> 290 <p class="i18n_options_help_description"></p>
296 <p> 291 <section>
297 <a id="link-faq" class="i18n_options_faq_title" target="_blank"></a> 292 <h2 class="i18n_options_support_title"></h2>
298 </p> 293 <ul>
299 <h1 class="i18n_options_forum_title"></h1> 294 <li id="report-issue" class="i18n_options_report_issue"></li>
300 <p class="i18n_options_forum_description"></p> 295 <li id="report-ad" class="i18n_options_report_ad"></li>
301 <p> 296 <li id="report-bug" class="i18n_options_report_bug"></li>
302 <a id="link-forum" class="i18n_options_forum_link" target="_blank"></ a> 297 <li id="report-forum" class="i18n_options_report_forum"></li>
303 </p> 298 </ul>
304 <h1 class="i18n_options_media_title"></h1> 299 </section>
305 <p class="i18n_options_media_description"></p> 300 <section>
306 <p> 301 <h2 class="i18n_options_social_title"></h2>
307 <span id="share-general"> 302 <p class="i18n_options_social_description"></p>
308 <a id="link-twitter" target="_blank">Twitter</a> 303 <div id="social">
309 <a id="link-facebook" target="_blank">Facebook</a> 304 <ul id="social-general">
310 <a id="link-gplus" target="_blank">Google+</a> 305 <li><a id="twitter">Twitter</a></li>
311 </span> 306 <li><a id="facebook">Facebook</a></li>
312 <span id="share-chinese"> 307 <li><a id="google-plus">Google Plus</a></li>
313 <a id="link-renren" target="_blank">renren</a> 308 </ul>
314 <a id="link-weibo" target="_blank">weibo</a> 309 <ul id="social-chinese">
315 </span> 310 <li><a id="weibo">Weibo</a></li>
316 </p> 311 </ul>
312 <p>
313 <strong>
314 <span class="i18n_options_email"></span>
315 <a href="mailto:support@adblockplus.org">support@adblockplus.org </a>
316 </strong>
317 </p>
318 </div>
319 </section>
317 </div> 320 </div>
318 </main> 321 </main>
319 322
320 <!-- Dialog --> 323 <!-- Dialog -->
321 <div id="dialog" role="dialog" aria-hidden="true"> 324 <div id="dialog" role="dialog" aria-hidden="true">
juliandoucette 2017/08/21 14:10:33 I think you can/should take one of two approaches.
saroyanm 2017/08/21 15:20:21 Thanks for bringing this: I think using aside is a
juliandoucette 2017/08/21 16:07:24 Acknowledged.
322 <header> 325 <header>
323 <span id="dialog-title"> 326 <span id="dialog-title">
juliandoucette 2017/08/21 14:10:34 There are no headings in this header :/
saroyanm 2017/08/21 15:20:21 No there are no, it's shouldn't be part of current
juliandoucette 2017/08/21 16:07:24 Acknowledged.
324 <span id="dialog-title-about" class="i18n_options_dialog_about_title"> </span> 327 <span id="dialog-title-about" class="i18n_options_dialog_about_title"> </span>
325 <span id="dialog-title-custom" class="i18n_options_dialog_custom_title "></span> 328 <span id="dialog-title-custom" class="i18n_options_dialog_custom_title "></span>
326 <span id="dialog-title-language-add" class="i18n_options_dialog_langua ge_title"></span> 329 <span id="dialog-title-language-add" class="i18n_options_dialog_langua ge_title"></span>
327 <span id="dialog-title-language-change" class="i18n_options_dialog_lan guage_title"></span> 330 <span id="dialog-title-language-change" class="i18n_options_dialog_lan guage_title"></span>
328 <span id="dialog-title-predefined" class="i18n_options_dialog_predefin ed_title"></span> 331 <span id="dialog-title-predefined" class="i18n_options_dialog_predefin ed_title"></span>
329 </span> 332 </span>
330 <button id="dialog-close" class="i18n_options_close focus-first" data-ac tion="close-dialog"></button> 333 <button id="dialog-close" class="i18n_options_close focus-first" data-ac tion="close-dialog"></button>
331 </header> 334 </header>
332 <div id="dialog-body" class="content"> 335 <div id="dialog-body" class="content">
333 <!-- About Adblock Plus --> 336 <!-- About Adblock Plus -->
334 <div id="dialog-content-about" class="dialog-content"> 337 <div id="dialog-content-about" class="dialog-content">
335 <p id="abp-version"></p> 338 <p id="abp-version"></p>
336 <p class="i18n_options_dialog_about_copyright"></p> 339 <p class="i18n_options_dialog_about_copyright"></p>
337 <p> 340 <p>
338 <button class="i18n_options_close primary" data-action="close-dialog "></button> 341 <button class="i18n_options_close primary" data-action="close-dialog "></button>
339 </p> 342 </p>
340 </div> 343 </div>
341 <!-- Add language subscription --> 344 <!-- Add language subscription -->
342 <div id="dialog-content-language-add" class="dialog-content"> 345 <div id="dialog-content-language-add" class="dialog-content">
343 <ul id="all-lang-table-add" class="table list"> 346 <ul id="all-lang-table-add" class="table list">
344 <template> 347 <template>
345 <button data-action="add-language-subscription,close-dialog" class ="control" role="checkbox"> 348 <button data-action="add-language-subscription,close-dialog" class ="control add" role="checkbox">
346 <label class="display"></label> 349 <label class="display"></label>
347 </button> 350 </button>
348 </template> 351 <button data-action="change-language-subscription,close-dialog" cl ass="control change" role="checkbox">
349 </ul>
350 </div>
351 <!-- Change language subscription -->
352 <div id="dialog-content-language-change" class="dialog-content">
353 <ul id="all-lang-table-change" class="table list">
354 <template>
355 <button data-action="change-language-subscription,close-dialog" cl ass="control" role="checkbox">
356 <label class="display"></label> 352 <label class="display"></label>
357 </button> 353 </button>
358 </template> 354 </template>
359 </ul> 355 </ul>
360 </div> 356 </div>
361 <!-- Add custom subscription --> 357 <!-- Add custom subscription -->
362 <div id="dialog-content-custom" class="dialog-content"> 358 <div id="dialog-content-custom" class="dialog-content">
363 <div class="dialog-content-block"> 359 <div class="dialog-content-block">
364 <div> 360 <div>
365 <label for="blockingList-textbox" class="i18n_options_dialog_custo m_subscription_title"></label> 361 <label for="blockingList-textbox" class="i18n_options_dialog_custo m_subscription_title"></label>
(...skipping 11 matching lines...) Expand all
377 <div class="dialog-content-block"> 373 <div class="dialog-content-block">
378 <h3></h3> 374 <h3></h3>
379 <div class="url"></div> 375 <div class="url"></div>
380 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button> 376 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button>
381 </div> 377 </div>
382 </div> 378 </div>
383 </div> 379 </div>
384 <!-- Placeholder element to determine when to wrap focus around --> 380 <!-- Placeholder element to determine when to wrap focus around -->
385 <span class="focus-last" tabindex="0"></span> 381 <span class="focus-last" tabindex="0"></span>
386 </div> 382 </div>
383 <!-- Notification -->
384 <div id="notification" aria-hidden="true" aria-live="polite">
385 <strong id="notification-text"></strong>
386 <button id="hide-notification" data-action="hide-notification">
387 <span class="i18n_options_notification_hide sr-only"></span>
388 </button>
389 </div>
387 </body> 390 </body>
388 </html> 391 </html>
LEFTRIGHT
« locale/en-US/new-options.json ('k') | new-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