desktop-options.html 19 KB
Newer Older
1 2 3
<!DOCTYPE html>
<!--
  - This file is part of Adblock Plus <https://adblockplus.org/>,
4
  - Copyright (C) 2006-present eyeo GmbH
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
  -
  - Adblock Plus is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License version 3 as
  - published by the Free Software Foundation.
  -
  - Adblock Plus is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  -->

<html>
  <head>
    <meta charset="utf-8">
22
    <title class="i18n_options_page_document_title"></title>
23
    <link rel="stylesheet" href="skin/common.css">
24
    <link rel="stylesheet" href="skin/fonts.css">
25
    <link rel="stylesheet" href="skin/desktop-options.css">
26
    <script src="polyfill.js"></script>
27 28
    <script src="ext/common.js"></script>
    <script src="ext/content.js"></script>
29
    <script src="common.js"></script>
30
    <script src="i18n.js"></script>
31
    <script defer src="desktop-options.js"></script>
32 33 34
  </head>
  <body data-tab="general">
    <!-- Navigation sidebar -->
35 36 37
    <div id="sidebar">
      <div class="fixed">
        <header>
38
          <img id="sidebar-logo" alt="" src="skin/icons/abp-logo.svg">
39 40 41 42
          <h1>
            Adblock <strong>Plus</strong>
          </h1>
          <p class="i18n_options_page_title"></p>
43
        </header>
44

45
        <nav>
46
          <ul class="tabs"
47 48
              role="tablist" data-action="switch-tab"
              data-keys="ArrowLeft ArrowUp ArrowRight ArrowDown">
49 50
            <li role="presentation">
              <a href="#general" class="i18n_options_tab_general" role="tab" aria-selected="true" tabindex="-1" aria-controls="content-general"></a>
51
            </li>
52 53
            <li role="presentation">
              <a href="#whitelist" class="i18n_options_tab_whitelist" role="tab" tabindex="-1" aria-controls="content-whitelist"></a>
54
            </li>
55 56
            <li role="presentation">
              <a href="#advanced" class="i18n_options_tab_advanced" role="tab" tabindex="-1" aria-controls="content-advanced"></a>
57
            </li>
58 59
            <li role="presentation">
              <a href="#help" class="i18n_options_tab_help" role="tab" tabindex="-1" aria-controls="content-help"></a>
60 61 62 63
            </li>
          </ul>
        </nav>
        <footer>
64 65 66 67 68 69 70 71 72 73
          <p>
            <a id="contribute" 
                class="i18n_options_footer_contribute button secondary"
                target="_blank"></a>
          </p>
          <p>
            <button class="i18n_options_footer_about link" 
                    data-action="open-dialog" data-dialog="about"></button>
          </p>
        </footer>        
74 75
      </div>
    </div>
76 77
    <main>
      <div id="dialog-background"></div>
78

79 80
      <!-- General tab content -->
      <div id="content-general" role="tabpanel" aria-labelledby="tab-general">
81 82 83 84 85
        <header>
          <h1 class="i18n_options_tab_general"></h1>
          <p class="i18n_options_general_description"></p>
        </header>
        <section class="cols">
86
          <h2 class="i18n_options_privacy_header"></h2>
87
          <ul class="list" id="recommend-protection-list-table">
88
            <template>
89
              <button data-action="toggle-remove-subscription" data-disable="preconfigured" role="checkbox" class="control icon"></button>
90
              <span data-display="title"></span>
91
              <io-popout type="tooltip" i18n-body="options_protection_%value%_tooltip"></io-popout>
92 93 94
            </template>
          </ul>
        </section>
95 96 97 98 99
        <section class="cols">
          <header>
            <h2 class="i18n_options_acceptableAds_header"></h2>
            <p class="i18n_options_acceptableAds_description"></p>
          </header>
100
          <form id="acceptable-ads">
101
            <div id="tracking-warning">
102
              <button id="hide-tracking-warning" class="icon close tertiary" type="button" data-pref="ui_warn_tracking" data-action="toggle-pref">
103
                <span class="i18n_common_notification_hide sr-only"></span>
104 105 106 107 108 109
              </button>
              <p id="tracking-warning-1"></p>
              <p class="i18n_options_tracking_warning_2"></p>
              <p id="tracking-warning-3"></p>
              <button class="i18n_options_tracking_warning_acknowledgment link" type="button" data-pref="ui_warn_tracking" data-action="toggle-pref"></button>
            </div>
110 111
            <ul>
              <li>
112
                <button id="acceptable-ads-allow" class="icon" data-action="switch-acceptable-ads" type="button" role="checkbox" name="acceptable-ads" value="ads"></button>
113 114 115 116 117
                <label for="acceptable-ads-allow" class="i18n_options_acceptableAds_ads_label"></label>
                <p id="enable-acceptable-ads-description" class="i18n_options_acceptableAds_ads_description_1"></p>
              </li>
              <ul>
                <li>
118
                  <button id="acceptable-ads-privacy-allow" class="icon" data-action="switch-acceptable-ads" type="button" role="checkbox" name="acceptable-ads" value="privacy"></button>
119 120
                  <label for="acceptable-ads-privacy-allow" class="i18n_options_acceptableAds_privacy_label"></label>
                  <p>
121
                    <a id="enable-acceptable-ads-privacy-description" class="i18n_options_learn_more" target="_blank"></a>
122 123 124 125 126
                  </p>
                  <p id="dnt" class="i18n_options_acceptableAds_dnt_notification"></p>
                </li>
              </ul>
            </ul>
127 128
          </form>
        </section>
129 130 131 132 133
        <section class="cols">
          <header>
            <h2 class="i18n_options_language_header"></h2>
            <p class="i18n_options_language_description"></p>
          </header>
134
          <div id="blocking-languages">
135
            <ul id="blocking-languages-table" class="table list bottom-control">
136
              <template>
137 138 139 140 141 142
                <span>
                  <span data-display="title"></span>
                  <span class="dimmed">
                    (<span data-display="originalTitle"></span>)
                  </span>
                </span>
143
                <button data-single="hidden" data-hide="preconfigured" data-action="remove-subscription" class="icon delete control" title="options_control_remove_title"></button>
144
                <button data-single="visible" data-hide="preconfigured" data-action="open-list-box" data-dialog="language-change" class="i18n_options_language_change link"></button>
145 146
              </template>
            </ul>
147
            <io-list-box></io-list-box>
148
            <p class="i18n_options_language_tip"></p>
149 150
          </div>
        </section>
151 152 153 154 155 156
        <section class="cols">
          <h2 class="i18n_options_anti_cv_header"></h2>
          <ul class="list" id="anti-cv-table">
            <template>
              <button data-action="toggle-remove-subscription" data-disable="preconfigured" role="checkbox" class="control icon"></button>
              <span class="i18n_options_anti_cv_title"></span>
157
              <io-popout type="tooltip" i18n-body="options_anti_cv_tooltip"></io-popout>
158 159 160 161
              <span class="i18n_options_new_label new"></span>
            </template>
          </ul>
        </section>
162
        <section id="more-filters" class="cols">
163 164 165 166 167
          <header>
            <h2 class="i18n_options_more_filters_header"></h2>
            <p class="i18n_options_more_filters_description"></p>
          </header>
          <div>
168
            <ul id="more-list-table" class="table list">
169
              <template>
170
                <span data-display="title"></span>
171
                <button data-hide="preconfigured" data-action="remove-subscription" class="i18n_options_control_remove_title link control" title="options_control_remove_title"></button>
172 173 174 175
              </template>
            </ul>
            <p class="i18n_options_more_filters_note"></p>
          </div>
176 177 178 179 180
        </section>
      </div>

      <!-- Whitelist tab content -->
      <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-whitelist">
181 182
        <header>
          <h1 class="i18n_options_tab_whitelist"></h1>
183 184 185 186
          <p>
            <span class="i18n_options_whitelist_description"></span>
            <a id="whitelist-learn-more" class="i18n_options_learn_more" target="_blank"></a>
          </p>
187 188
        </header>
        <form class="section">
189 190 191 192
          <input id="whitelisting-textbox" type="text">
          <button id="whitelisting-add-button"
                  type="submit" 
                  data-action="add-domain-exception" 
193
                  class="i18n_options_whitelist_add primary" disabled>
194 195 196 197
          </button>
        </form>
        <ul id="whitelisting-table" class="table list">
          <template>
198
            <span data-display="title"></span>
199
            <button data-action="remove-filter" class="icon delete control" 
200 201 202 203 204 205 206 207 208
                    title="options_control_remove_title">
            </button>
          </template>
        </ul>
      </div>

      <!-- Advanced tab content -->
      <div id="content-advanced" role="tabpanel"
          aria-labelledby="tab-advanced">
209
        <header>
210 211
          <h1 class="i18n_options_tab_advanced"></h1>
          <p class="i18n_options_advanced_description"></p>
212 213 214 215
        </header>
        <section class="cols">
          <h2 class="i18n_options_customize_header"></h2>
          <ul id="customize" class="list">
216 217 218 219
            <li data-pref="show_statsinicon">
              <button class="icon" role="checkbox" data-action="toggle-pref"></button>
              <span class="i18n_options_customize_iconStats" data-display="title"></span>
            </li>
220
            <li data-pref="shouldShowBlockElementMenu">
221
              <button class="icon" role="checkbox" data-action="toggle-pref"></button>
222
              <span class="i18n_options_customize_blockElement" data-display="title"></span>
223
              <io-popout type="tooltip" i18n-body="options_customize_blockElement_tooltip"></io-popout>
224 225
            </li>
            <li data-pref="show_devtools_panel">
226
              <button class="icon" role="checkbox" data-action="toggle-pref"></button>
227
              <span class="i18n_options_customize_showDevToolsPanel" data-display="title"></span>
228
              <io-popout type="tooltip" i18n-body="options_customize_showDevToolsPanel_tooltip"></io-popout>
229 230
            </li>
            <li data-pref="notifications_ignoredcategories">
231
              <button class="icon" role="checkbox" data-action="toggle-pref"></button>
232
              <span class="i18n_options_customize_showNotifications" data-display="title"></span>
233
              <io-popout type="tooltip" i18n-body="options_customize_showNotifications_tooltip"></io-popout>
234 235 236
            </li>
          </ul>
        </section>
237
        <section>
238 239
          <header>
            <h2 class="i18n_options_filterList_title"></h2>
240 241 242 243
            <p>
              <span class="i18n_options_filterList_description"></span>
              <a id="filter-lists-learn-more" class="i18n_options_learn_more" target="_blank"></a>
            </p>
244
          </header>
245

246
          <div id="all-filter-lists-table-header" class="th">
247 248 249 250 251
            <h3 class="i18n_options_filterList_column_status col5"></h3>
            <h3 class="i18n_options_filterList_column_name col5"></h3>
            <h3 class="i18n_options_filterList_column_update col5"></h3>
            <h3 class="col5"></h3>
            <h3 class="col5"></h3>
252 253
          </div>
          <ul class="table cols" id="all-filter-lists-table">
254
            <template>
255
              <div class="col5">
256
                <button data-action="toggle-disable-subscription" role="checkbox" class="control icon toggle">
257 258 259 260 261
                </button>
                <div class="state">
                  <span class="i18n_options_filterList_state_active" id="state-active"></span>
                  <span class="i18n_options_filterList_state_disabled" id="state-disabled"></span>
                </div>
262
              </div>
263
              <div class="col5">
264
                <span data-display="originalTitle"></span>
265
              </div>
266
              <div class="col5">
267 268 269
                <span class="last-update"></span>
                <span class="message"></span>
              </div>
270
              <div class="col5">
271 272 273 274 275 276 277 278 279 280 281 282 283
                <io-popout type="menubar">
                  <ul class="content" role="menu">
                    <li role="menuitem">
                      <button class="i18n_options_filterList_updateNow icon update-subscription" data-action="update-subscription"></button>
                    </li>
                    <li role="menuitem">
                      <a class="i18n_options_filterList_website icon website" target="_blank"></a>
                    </li>
                    <li role="menuitem">
                      <a class="i18n_options_filterList_source icon source" target="_blank"></a>
                    </li>
                  </ul>
                </io-popout>
284 285
              </div>
              <div class="col5">
286
                <button data-hide="preconfigured" data-action="remove-subscription" class="control icon delete"></button>
287
              </div>
288 289
            </template>
          </ul>
290 291
          <div class="side-controls wrap">
            <button class="i18n_options_filterList_add primary" data-action="open-dialog" data-dialog="import"></button>
292
            <button id="update" class="i18n_options_filterList_update secondary" data-action="update-all-subscriptions"></button>            
293
          </div>
294
        </section>
295

296
        <section>
297 298
          <header>
            <h2 class="i18n_options_customFilters_title"></h2>
299
            <p id="custom-filters-description" class="i18n_options_customFilters_description"></p>
300
          </header>
301
          <div id="custom-filters">
302 303 304 305
            <h3>
              <span class="i18n_options_customFilters_widget_title io-filter-table-title"></span>
            </h3>
            <io-filter-table></io-filter-table>
306 307 308
          </div>
        </section>
      </div>
309

310 311
      <!-- Help tab content -->
      <div id="content-help" role="tabpanel" aria-labelledby="tab-help">
312 313 314 315 316
        <header>
          <h1 class="i18n_options_tab_help"></h1>
          <p class="i18n_options_help_description"></p>
        </header>
        <section class="cols">
317 318 319
          <h2 class="i18n_options_support_title"></h2>
          <ul>
            <li id="report-bug" class="i18n_options_report_bug"></li>
320
            <li id="visit-forum" class="i18n_options_report_forum"></li>
321 322 323 324
            <li>
              <span class="i18n_options_email"></span>
              <a href="mailto:support@adblockplus.org">support@adblockplus.org</a>
            </li>
325 326
          </ul>
        </section>
327 328 329 330 331
        <section class="cols">
          <header>
            <h2 class="i18n_options_social_title"></h2>
            <p class="i18n_options_social_description"></p>
          </header>
332 333
          <div id="social">
            <ul id="social-general">
334 335
              <li><a class="icon twitter" target="_blank">Twitter</a></li>
              <li><a class="icon facebook" target="_blank">Facebook</a></li>
336
            </ul>
337
            <ul id="social-chinese">
338
              <li><a class="icon weibo" target="_blank">Weibo</a></li>
339 340 341
            </ul>
          </div>
        </section>
342
      </div>
343
    </main>
344 345

    <!-- Dialog -->
346
    <div id="dialog" role="dialog" aria-hidden="true">
347 348
      <header>
        <span id="dialog-title">
349
          <h3 id="dialog-title-about" class="i18n_options_dialog_about_title"></h3>
350
          <h3 id="dialog-title-import" class="i18n_options_dialog_import_title"></h3>
351 352 353
          <h3 id="dialog-title-language-add" class="i18n_options_dialog_language_title"></h3>
          <h3 id="dialog-title-language-change" class="i18n_options_dialog_language_title"></h3>
          <h3 id="dialog-title-predefined" class="i18n_options_dialog_predefined_title"></h3>
354
        </span>
355
        <button class="icon close primary" data-action="close-dialog"></button>
356 357
      </header>
      <div id="dialog-body" class="content">
358 359 360
        <!-- About Adblock Plus -->
        <div id="dialog-content-about" class="dialog-content">
          <p id="abp-version"></p>
361
          <p id="copyright"></p>
362
          <p class="i18n_options_dialog_about_trademark"></p>
363
          <p>
364
            <button class="i18n_options_close primary default-focus" data-action="close-dialog"></button>
365 366
          </p>
        </div>
367
        <!-- Add language subscription -->
368
        <div id="dialog-content-language-add" class="dialog-content">
369
          <ul id="all-lang-table-add" class="table list default-focus">
370
            <template>
371
              <button data-action="add-language-subscription,close-dialog" class="control icon add" role="checkbox">
372 373 374 375 376 377
                <span>
                  <span data-display="title"></span>
                  <span class="dimmed">
                    (<span data-display="originalTitle"></span>)
                  </span>
                </span>
378
              </button>
379
              <button data-action="change-language-subscription,close-dialog" class="control icon change" role="checkbox">
380 381 382 383 384 385
                <span>
                  <span data-display="title"></span>
                  <span class="dimmed">
                    (<span data-display="originalTitle"></span>)
                  </span>
                </span>
386 387 388
              </button>
            </template>
          </ul>
389
        </div>
390 391 392 393
        <!-- Add import subscription -->
        <div id="dialog-content-import" class="dialog-content">
          <form data-validation="custom" novalidate>
            <p class="floating-input">
394
              <input placeholder=" " id="import-list-url" class="default-focus" type="url" required/>
395
              <label for="import-list-url" class="i18n_options_dialog_import_subscription_location"></label>
396
              <span class="icon attention"></span>
397 398 399 400 401 402 403
              <span class="i18n_options_dialog_import_subscription_location_error error-msg"></span>
            </p>
            <p class="side-controls">
              <button class="i18n_options_customFilter_cancel secondary" type="reset" data-action="close-dialog"></button>
              <button type="button" class="i18n_options_dialog_import_title primary" data-action="validate-import-subscription"></button>
            </p>
          </form>
404
        </div>
405 406 407 408 409
        <!-- Add predefined subscription -->
        <div id="dialog-content-predefined" class="dialog-content">
          <div class="dialog-content-block">
            <h3></h3>
            <div class="url"></div>
410
            <button class="i18n_options_dialog_predefined_confirm default-focus primary" data-action="add-predefined-subscription"></button>
411 412
          </div>
        </div>
413
      </div>
414 415
      <!-- Placeholder element to determine when to wrap focus around -->
      <span class="focus-last" tabindex="0"></span>
416
    </div>
417 418 419
     <!-- Notification -->
    <div id="notification" aria-hidden="true" aria-live="polite">
      <strong id="notification-text"></strong>
420
      <button class="icon close secondary" data-action="hide-notification">
421
        <span class="i18n_common_notification_hide sr-only"></span>
422 423
      </button>
    </div>
424
  </body>
425
</html>