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

Delta Between Two Patch Sets: new-options.html

Issue 29536681: Issue 5628 - Implement main styles (Closed)
Left Patch Set: Created Sept. 6, 2017, 6:26 p.m.
Right Patch Set: Created Sept. 13, 2017, 5:13 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/new-options.json ('k') | skin/icons/arrow.svg » ('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-present 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,
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after
69 data-action="open-dialog" data-dialog="about"></button> 69 data-action="open-dialog" data-dialog="about"></button>
70 </p> 70 </p>
71 </footer> 71 </footer>
72 </div> 72 </div>
73 </div> 73 </div>
74 <main> 74 <main>
75 <div id="dialog-background"></div> 75 <div id="dialog-background"></div>
76 76
77 <!-- General tab content --> 77 <!-- General tab content -->
78 <div id="content-general" role="tabpanel" aria-labelledby="tab-general"> 78 <div id="content-general" role="tabpanel" aria-labelledby="tab-general">
79 <h1 class="i18n_options_tab_general"></h1> 79 <header>
juliandoucette 2017/09/12 22:45:36 NIT/Suggest: Wrap <h1> and <p> inside a <header>
saroyanm 2017/09/13 15:26:35 Agree.
saroyanm 2017/09/13 16:47:58 Done.
80 <p class="i18n_options_general_description"></p> 80 <h1 class="i18n_options_tab_general"></h1>
81 <p class="i18n_options_general_description"></p>
82 </header>
81 <section class="cols"> 83 <section class="cols">
82 <h2 class="i18n_options_privacy_header"></h2> 84 <h2 class="i18n_options_privacy_header"></h2>
83 <ul class="list" id="recommend-protection-list-table"> 85 <ul class="list" id="recommend-protection-list-table">
84 <template> 86 <template>
85 <button data-action="toggle-remove-subscription" role="checkbox" c lass="control"></button> 87 <button data-action="toggle-remove-subscription" role="checkbox" c lass="control"></button>
juliandoucette 2017/09/12 22:45:35 NIT/Suggest: Implement a custom checkbox like this
saroyanm 2017/09/13 15:26:34 We will file another issue to address separately.
86 <label class="display"></label> 88 <label class="display"></label>
87 <span data-tooltip="options_protection_%value%_tooltip"></span> 89 <span data-tooltip="options_protection_%value%_tooltip"></span>
88 </template> 90 </template>
89 </ul> 91 </ul>
90 </section> 92 </section>
91 <section class="cols"> 93 <section class="cols">
92 <header> 94 <header>
93 <h2 class="i18n_options_acceptableAds_header"></h2> 95 <h2 class="i18n_options_acceptableAds_header"></h2>
94 <p class="i18n_options_acceptableAds_description"></p> 96 <p class="i18n_options_acceptableAds_description"></p>
95 </header> 97 </header>
(...skipping 14 matching lines...) Expand all
110 <input data-action="switch-acceptable-ads" type="radio" name="acce ptable-ads" value="none"> 112 <input data-action="switch-acceptable-ads" type="radio" name="acce ptable-ads" value="none">
111 <label class="i18n_options_acceptableAds_none_label"></label> 113 <label class="i18n_options_acceptableAds_none_label"></label>
112 </div> 114 </div>
113 </form> 115 </form>
114 </section> 116 </section>
115 <section class="cols"> 117 <section class="cols">
116 <header> 118 <header>
117 <h2 class="i18n_options_language_header"></h2> 119 <h2 class="i18n_options_language_header"></h2>
118 <p class="i18n_options_language_description"></p> 120 <p class="i18n_options_language_description"></p>
119 </header> 121 </header>
120 <div id="blocking-languages"> 122 <div id="blocking-languages">
saroyanm 2017/09/06 19:02:56 Note: There is a ticket for improving semantics us
juliandoucette 2017/09/12 22:45:35 Acknowledged.
121 <ul id="blocking-languages-table" class="table list"> 123 <ul id="blocking-languages-table" class="table list">
122 <template> 124 <template>
123 <label class="display"></label> 125 <label class="display"></label>
124 <button data-single="hidden" data-action="remove-subscription" c lass="delete control" title="options_control_remove_title"></button> 126 <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="open-dialog" data-dia log="language-change" class="i18n_options_language_change link"></button> 127 <button data-single="visible" data-action="open-dialog" data-dia log="language-change" class="i18n_options_language_change link"></button>
126 </template> 128 </template>
127 </ul> 129 </ul>
128 <button class="i18n_options_language_add list" data-action="open-dia log" data-dialog="language-add"></button> 130 <button class="i18n_options_language_add list" data-action="open-dia log" data-dialog="language-add"></button>
129 <p class="i18n_options_language_tip"></p> 131 <p class="i18n_options_language_tip"></p>
130 </div> 132 </div>
131 </section> 133 </section>
132 <section class="cols"> 134 <section class="cols">
133 <header> 135 <header>
134 <h2 class="i18n_options_more_filters_header"></h2> 136 <h2 class="i18n_options_more_filters_header"></h2>
135 <p class="i18n_options_more_filters_description"></p> 137 <p class="i18n_options_more_filters_description"></p>
136 </header> 138 </header>
137 <div> 139 <div>
138 <ul id="custom-list-table" class="table list"> 140 <ul id="custom-list-table" class="table list">
juliandoucette 2017/09/12 22:45:35 NIT: I think "table" and "list" is redundant here.
saroyanm 2017/09/13 15:26:34 I'm using .table for the "list items" that has bor
139 <template> 141 <template>
140 <label class="display"></label> 142 <label class="display"></label>
141 <button data-action="remove-subscription" class="i18n_options_co ntrol_remove_title link control" title="options_control_remove_title"></button> 143 <button data-action="remove-subscription" class="i18n_options_co ntrol_remove_title link control" title="options_control_remove_title"></button>
142 </template> 144 </template>
143 </ul> 145 </ul>
144 <p class="i18n_options_more_filters_note"></p> 146 <p class="i18n_options_more_filters_note"></p>
145 </div> 147 </div>
146 </section> 148 </section>
147 </div> 149 </div>
148 150
149 <!-- Whitelist tab content --> 151 <!-- Whitelist tab content -->
150 <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-whitelist "> 152 <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-whitelist ">
151 <h1 class="i18n_options_tab_whitelist"></h1> 153 <header>
152 <p class="i18n_options_whitelist_description"></p> 154 <h1 class="i18n_options_tab_whitelist"></h1>
155 <p class="i18n_options_whitelist_description"></p>
156 </header>
153 <form class="section"> 157 <form class="section">
154 <input id="whitelisting-textbox" type="text"> 158 <input id="whitelisting-textbox" type="text">
155 <button id="whitelisting-add-button" 159 <button id="whitelisting-add-button"
156 type="submit" 160 type="submit"
157 data-action="add-domain-exception" 161 data-action="add-domain-exception"
158 class="i18n_options_whitelist_add primary" disabled> 162 class="i18n_options_whitelist_add primary" disabled>
159 </button> 163 </button>
160 </form> 164 </form>
161 <ul id="whitelisting-table" class="table list"> 165 <ul id="whitelisting-table" class="table list">
162 <template> 166 <template>
163 <label class="display"></label> 167 <label class="display"></label>
164 <button data-action="remove-filter" class="delete control" 168 <button data-action="remove-filter" class="delete control"
165 title="options_control_remove_title"> 169 title="options_control_remove_title">
166 </button> 170 </button>
167 </template> 171 </template>
168 </ul> 172 </ul>
169 </div> 173 </div>
170 174
171 <!-- Advanced tab content --> 175 <!-- Advanced tab content -->
172 <div id="content-advanced" role="tabpanel" 176 <div id="content-advanced" role="tabpanel"
173 aria-labelledby="tab-advanced"> 177 aria-labelledby="tab-advanced">
174 <h1 class="i18n_options_tab_advanced"></h1> 178 <header>
juliandoucette 2017/09/12 22:45:35 NIT/Suggest: Wrap this <h1> and <p> in a <header>
saroyanm 2017/09/13 15:26:35 Acknowledged.
175 <p class="i18n_options_advanced_description"></p> 179 <h1 class="i18n_options_tab_advanced"></h1>
180 <p class="i18n_options_advanced_description"></p>
181 </header>
176 <section class="cols"> 182 <section class="cols">
177 <h2 class="i18n_options_customize_header"></h2> 183 <h2 class="i18n_options_customize_header"></h2>
178 <ul id="customize" class="list"> 184 <ul id="customize" class="list">
179 <li data-pref="shouldShowBlockElementMenu"> 185 <li data-pref="shouldShowBlockElementMenu">
180 <button role="checkbox" data-action="toggle-pref"></button> 186 <button role="checkbox" data-action="toggle-pref"></button>
181 <span class="i18n_options_customize_blockElement display"></span> 187 <span class="i18n_options_customize_blockElement display"></span>
182 <span data-tooltip="options_customize_blockElement_tooltip"></span > 188 <span data-tooltip="options_customize_blockElement_tooltip"></span >
183 </li> 189 </li>
184 <li data-pref="show_devtools_panel"> 190 <li data-pref="show_devtools_panel">
185 <button role="checkbox" data-action="toggle-pref"></button> 191 <button role="checkbox" data-action="toggle-pref"></button>
186 <span class="i18n_options_customize_showDevToolsPanel display"></s pan> 192 <span class="i18n_options_customize_showDevToolsPanel display"></s pan>
187 <span data-tooltip="options_customize_showDevToolsPanel_tooltip">< /span> 193 <span data-tooltip="options_customize_showDevToolsPanel_tooltip">< /span>
188 </li> 194 </li>
189 <li data-pref="notifications_ignoredcategories"> 195 <li data-pref="notifications_ignoredcategories">
190 <button role="checkbox" data-action="toggle-pref"></button> 196 <button role="checkbox" data-action="toggle-pref"></button>
191 <span class="i18n_options_customize_showNotifications display"></s pan> 197 <span class="i18n_options_customize_showNotifications display"></s pan>
192 <span data-tooltip="options_customize_showNotifications_tooltip">< /span> 198 <span data-tooltip="options_customize_showNotifications_tooltip">< /span>
193 </li> 199 </li>
194 </ul> 200 </ul>
195 </section> 201 </section>
196 202
197 <section> 203 <section>
198 <header> 204 <header>
199 <h2 class="i18n_options_filterList_title"></h2> 205 <h2 class="i18n_options_filterList_title"></h2>
200 <p id="filter-lists-description" class="i18n_options_filterList_desc ription"></p> 206 <p id="filter-lists-description" class="i18n_options_filterList_desc ription"></p>
201 </header> 207 </header>
202 208
203 <div id="all-filter-lists-table-header" class="th"> 209 <div id="all-filter-lists-table-header" class="th">
juliandoucette 2017/09/12 22:45:35 Note: It's not clear why you didn't use a real tab
saroyanm 2017/09/13 15:26:35 We have issue to address that -> https://issues.ad
204 <h3 class="i18n_options_filterList_column_status col4"></h3> 210 <h3 class="i18n_options_filterList_column_status col4"></h3>
205 <h3 class="i18n_options_filterList_column_name col4"></h3> 211 <h3 class="i18n_options_filterList_column_name col4"></h3>
206 <h3 class="i18n_options_filterList_column_update col4"></h3> 212 <h3 class="i18n_options_filterList_column_update col4"></h3>
207 <h3 class="col4"></h3> 213 <h3 class="col4"></h3>
208 </div> 214 </div>
209 <ul class="table cols" id="all-filter-lists-table"> 215 <ul class="table cols" id="all-filter-lists-table">
juliandoucette 2017/09/12 22:45:34 Note: I was able to: - Make this list unrespons
saroyanm 2017/09/13 15:26:35 Most of them are caused by adding empty filter lis
210 <template> 216 <template>
211 <div class="col4"> 217 <div class="col4">
212 <button data-action="toggle-disable-subscription" role="checkbox " class="control toggle"> 218 <button data-action="toggle-disable-subscription" role="checkbox " class="control toggle">
juliandoucette 2017/09/12 22:45:35 NIT/Suggest: A checkbox is a more appropriate inpu
juliandoucette 2017/09/12 22:45:35 NIT: This switch shows 1px from the left on the ri
saroyanm 2017/09/13 15:26:35 Same as mentioned above.
saroyanm 2017/09/13 15:26:35 I'll update width of icon to -> 2.25rem
saroyanm 2017/09/13 16:47:57 Done.
213 </button> 219 </button>
214 <div class="state"> 220 <div class="state">
215 <span class="i18n_options_filterList_state_active" id="state-a ctive"></span> 221 <span class="i18n_options_filterList_state_active" id="state-a ctive"></span>
216 <span class="i18n_options_filterList_state_disabled" id="state -disabled"></span> 222 <span class="i18n_options_filterList_state_disabled" id="state -disabled"></span>
217 </div> 223 </div>
218 </div> 224 </div>
219 <div class="col4"> 225 <div class="col4">
220 <label class="display"></label> 226 <label class="display"></label>
221 </div> 227 </div>
222 <div class="col4"> 228 <div class="col4">
(...skipping 17 matching lines...) Expand all
240 <li role="menuitem"> 246 <li role="menuitem">
241 <button class="i18n_options_filterList_delete delete" da ta-action="remove-subscription"></button> 247 <button class="i18n_options_filterList_delete delete" da ta-action="remove-subscription"></button>
242 </li> 248 </li>
243 </ul> 249 </ul>
244 </div> 250 </div>
245 </div> 251 </div>
246 <button data-action="remove-subscription" class="control delete" ></button> 252 <button data-action="remove-subscription" class="control delete" ></button>
247 </div> 253 </div>
248 </template> 254 </template>
249 </ul> 255 </ul>
256 <div class="side-controls">
250 <button class="i18n_options_filterList_add primary" data-action="ope n-dialog" data-dialog="custom"></button> 257 <button class="i18n_options_filterList_add primary" data-action="ope n-dialog" data-dialog="custom"></button>
251 <button id="update" class="i18n_options_filterList_update secondary" data-action="update-all-subscriptions"></button> 258 <button id="update" class="i18n_options_filterList_update secondary" data-action="update-all-subscriptions"></button>
259 </div>
252 </section> 260 </section>
253 261
254 <section class="cols"> 262 <section class="cols">
255 <header> 263 <header>
256 <h2 class="i18n_options_customFilters_title"></h2> 264 <h2 class="i18n_options_customFilters_title"></h2>
257 <p class="i18n_options_customFilters_description"></p> 265 <p class="i18n_options_customFilters_description"></p>
258 </header> 266 </header>
259 <div id="custom-filters"> 267 <div id="custom-filters">
260 <h3 class="i18n_options_customFilters_widget_title"></h3> 268 <h3 class="i18n_options_customFilters_widget_title"></h3>
261 <div id="empty-custom-filters"> 269 <div id="empty-custom-filters">
262 <p class="i18n_options_customFilters_tip"></p> 270 <p class="i18n_options_customFilters_tip"></p>
juliandoucette 2017/09/12 22:45:35 NIT: You're missing an icon here.
saroyanm 2017/09/13 15:26:36 Yes, we are waiting for the assets
263 <button class="i18n_options_customFilters_start secondary" data-ac tion="edit-custom-filters"> 271 <button class="i18n_options_customFilters_start primary" data-acti on="edit-custom-filters">
juliandoucette 2017/09/12 22:45:35 NIT: This is supposed to be a primary button.
saroyanm 2017/09/13 15:26:36 Acknowledged.
saroyanm 2017/09/13 16:47:57 Done.
264 </button> 272 </button>
265 <p> 273 <p>
266 <a class="i18n_options_customFilters_learn" id="link-filters" ta rget="_blank"></a> 274 <a class="i18n_options_customFilters_learn" id="link-filters" ta rget="_blank"></a>
juliandoucette 2017/09/12 22:45:34 NIT: This string is missing a period.
saroyanm 2017/09/13 15:26:35 In specs documentation we are not using period.
267 </p> 275 </p>
268 </div> 276 </div>
269 <textarea id="custom-filters-raw" rows="15"></textarea> 277 <textarea id="custom-filters-raw" rows="15"></textarea>
270 <button id="custom-filters-edit" class="i18n_options_customFilter_ed it secondary" data-action="edit-custom-filters"> 278 <div class="side-controls">
271 </button> 279 <button id="custom-filters-edit" class="i18n_options_customFilter_ edit secondary" data-action="edit-custom-filters">
272 <div id="custom-filters-raw-controls"> 280 </button>
273 <button class="i18n_options_customFilter_cancel secondary" data-ac tion="cancel-custom-filters"></button> 281 <div id="custom-filters-raw-controls">
274 <button class="i18n_options_customFilter_save primary" data-action ="save-custom-filters"></button> 282 <button class="i18n_options_customFilter_cancel secondary" data- action="cancel-custom-filters"></button>
283 <button class="i18n_options_customFilter_save primary" data-acti on="save-custom-filters"></button>
284 </div>
275 </div> 285 </div>
276 </div> 286 </div>
277 </section> 287 </section>
278 </div> 288 </div>
279 289
280 <!-- Help tab content --> 290 <!-- Help tab content -->
281 <div id="content-help" role="tabpanel" aria-labelledby="tab-help"> 291 <div id="content-help" role="tabpanel" aria-labelledby="tab-help">
282 <h1 class="i18n_options_tab_help"></h1> 292 <header>
283 <p class="i18n_options_help_description"></p> 293 <h1 class="i18n_options_tab_help"></h1>
294 <p class="i18n_options_help_description"></p>
295 </header>
284 <section class="cols"> 296 <section class="cols">
285 <h2 class="i18n_options_support_title"></h2> 297 <h2 class="i18n_options_support_title"></h2>
286 <ul> 298 <ul>
287 <li id="report-issue" class="i18n_options_report_issue"></li> 299 <li id="report-issue" class="i18n_options_report_issue"></li>
288 <li id="report-ad" class="i18n_options_report_ad"></li> 300 <li id="report-ad" class="i18n_options_report_ad"></li>
289 <li id="report-bug" class="i18n_options_report_bug"></li> 301 <li id="report-bug" class="i18n_options_report_bug"></li>
290 <li id="report-forum" class="i18n_options_report_forum"></li> 302 <li id="report-forum" class="i18n_options_report_forum"></li>
291 </ul> 303 </ul>
292 </section> 304 </section>
293 <section class="cols"> 305 <section class="cols">
(...skipping 30 matching lines...) Expand all
324 <h3 id="dialog-title-language-add" class="i18n_options_dialog_language _title"></h3> 336 <h3 id="dialog-title-language-add" class="i18n_options_dialog_language _title"></h3>
325 <h3 id="dialog-title-language-change" class="i18n_options_dialog_langu age_title"></h3> 337 <h3 id="dialog-title-language-change" class="i18n_options_dialog_langu age_title"></h3>
326 <h3 id="dialog-title-predefined" class="i18n_options_dialog_predefined _title"></h3> 338 <h3 id="dialog-title-predefined" class="i18n_options_dialog_predefined _title"></h3>
327 </span> 339 </span>
328 <button id="dialog-close" data-action="close-dialog"></button> 340 <button id="dialog-close" data-action="close-dialog"></button>
329 </header> 341 </header>
330 <div id="dialog-body" class="content"> 342 <div id="dialog-body" class="content">
331 <!-- About Adblock Plus --> 343 <!-- About Adblock Plus -->
332 <div id="dialog-content-about" class="dialog-content"> 344 <div id="dialog-content-about" class="dialog-content">
333 <p id="abp-version"></p> 345 <p id="abp-version"></p>
334 <p class="i18n_options_dialog_about_copyright"></p> 346 <p class="i18n_options_dialog_about_copyright"></p>
juliandoucette 2017/09/12 22:45:35 NIT: This should probably be two paragraphs (based
saroyanm 2017/09/13 15:26:35 Acknowledged.
saroyanm 2017/09/13 16:47:58 Done.
347 <p class="i18n_options_dialog_about_trademark"></p>
335 <p> 348 <p>
336 <button class="i18n_options_close primary" data-action="close-dialog "></button> 349 <button class="i18n_options_close primary" data-action="close-dialog "></button>
337 </p> 350 </p>
338 </div> 351 </div>
339 <!-- Add language subscription --> 352 <!-- Add language subscription -->
340 <div id="dialog-content-language-add" class="dialog-content"> 353 <div id="dialog-content-language-add" class="dialog-content">
341 <ul id="all-lang-table-add" class="table list"> 354 <ul id="all-lang-table-add" class="table list">
342 <template> 355 <template>
343 <button data-action="add-language-subscription,close-dialog" class ="control add" role="checkbox"> 356 <button data-action="add-language-subscription,close-dialog" class ="control add" role="checkbox">
344 <label class="display"></label> 357 <label class="display"></label>
(...skipping 28 matching lines...) Expand all
373 </div> 386 </div>
374 <!-- Notification --> 387 <!-- Notification -->
375 <div id="notification" aria-hidden="true" aria-live="polite"> 388 <div id="notification" aria-hidden="true" aria-live="polite">
376 <strong id="notification-text"></strong> 389 <strong id="notification-text"></strong>
377 <button id="hide-notification" data-action="hide-notification"> 390 <button id="hide-notification" data-action="hide-notification">
378 <span class="i18n_options_notification_hide sr-only"></span> 391 <span class="i18n_options_notification_hide sr-only"></span>
379 </button> 392 </button>
380 </div> 393 </div>
381 </body> 394 </body>
382 </html> 395 </html>
LEFTRIGHT
« locale/en-US/new-options.json ('k') | skin/icons/arrow.svg » ('j') | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld