connectionPane.inc.xhtml (24683B)
1 <!-- Tor panel --> 2 3 <script 4 type="application/javascript" 5 src="chrome://browser/content/torpreferences/connectionPane.js" 6 /> 7 <html:template id="template-paneConnection"> 8 <vbox 9 id="torPreferencesCategory" 10 class="subcategory" 11 data-category="paneConnection" 12 hidden="true" 13 > 14 <html:h1 data-l10n-id="tor-connection-settings-heading"></html:h1> 15 <description class="description-deemphasized" flex="1"> 16 <html:span data-l10n-id="tor-connection-overview"></html:span> 17 <label 18 class="learnMore text-link" 19 is="text-link" 20 href="about:manual#about" 21 useoriginprincipal="true" 22 data-l10n-id="tor-connection-browser-learn-more-link" 23 /> 24 </description> 25 <!-- Keep within #torPreferencesCategory so this won't appear in search 26 - results. --> 27 <html:div 28 id="network-status-internet-area" 29 class="network-status-area" 30 role="group" 31 aria-labelledby="network-status-internet-area-label" 32 > 33 <html:img alt="" class="network-status-icon" /> 34 <!-- NOTE: We do not wrap the label and status ("Internet: Offline", etc) 35 - in an aria-live area because it may be too noisey and may not be 36 - important to the user. --> 37 <html:span 38 id="network-status-internet-area-label" 39 class="network-status-label" 40 data-l10n-id="tor-connection-internet-status-label" 41 ></html:span> 42 <html:span class="network-status-result"></html:span> 43 </html:div> 44 <html:div 45 id="network-status-tor-area" 46 class="network-status-area" 47 role="group" 48 aria-labelledby="network-status-tor-area-label" 49 > 50 <html:img alt="" class="network-status-icon" /> 51 <!-- NOTE: We do not wrap the label and status 52 - ("Tor network: Not connected", etc) in an aria-live area. 53 - This is not likely to change whilst this page has focus. 54 - Moreover, the status is already present in the torconnect status bar 55 - in the window tab bar. --> 56 <html:span 57 id="network-status-tor-area-label" 58 class="network-status-label" 59 data-l10n-id="tor-connection-network-status-label" 60 ></html:span> 61 <html:span class="network-status-result"></html:span> 62 <html:button 63 id="network-status-tor-connect-button" 64 data-l10n-id="tor-connection-network-status-connect-button" 65 ></html:button> 66 </html:div> 67 </vbox> 68 69 <!-- Quickstart --> 70 <groupbox data-category="paneConnection" hidden="true"> 71 <label> 72 <html:h2 data-l10n-id="tor-connection-automatic-heading"></html:h2> 73 </label> 74 <description 75 class="description-deemphasized" 76 flex="1" 77 data-l10n-id="tor-connection-automatic-description" 78 /> 79 <html:moz-toggle 80 id="tor-connection-quickstart-toggle" 81 class="tor-toggle" 82 data-l10n-id="tor-connection-quickstart-checkbox" 83 data-l10n-attrs="label" 84 /> 85 </groupbox> 86 87 <!-- Bridges --> 88 <hbox class="subcategory" data-category="paneConnection" hidden="true"> 89 <html:h1 90 id="tor-bridges-subcategory-heading-non-search" 91 class="tor-bridges-subcategory-heading tor-focusable-heading" 92 tabindex="-1" 93 data-l10n-id="tor-bridges-heading" 94 ></html:h1> 95 </hbox> 96 <groupbox 97 id="torPreferences-bridges-group" 98 data-category="paneConnection" 99 hidden="true" 100 aria-labelledby="tor-bridges-subcategory-heading-non-search" 101 > 102 <!-- Add a search-header that only appears in search results as a substitute 103 - for the hidden h1 element. See tor-browser#43320. 104 - NOTE: Usually the first xul:label will act as the accessible name for 105 - a xul:groubbox element *if* it is not hidden. Since the search-header 106 - is sometimes hidden we need an explicit aria-labelledby anyway. 107 - However, we keep the wrapper xul:label for styling consistency with the 108 - other settings. --> 109 <label class="search-header" hidden="true"> 110 <html:h2 111 class="tor-bridges-subcategory-heading tor-focusable-heading" 112 tabindex="-1" 113 data-l10n-id="tor-bridges-heading" 114 ></html:h2> 115 </label> 116 <description class="description-deemphasized" flex="1"> 117 <html:span data-l10n-id="tor-bridges-overview"></html:span> 118 <label 119 class="learnMore text-link" 120 is="text-link" 121 href="about:manual#bridges" 122 useoriginprincipal="true" 123 data-l10n-id="tor-bridges-learn-more-link" 124 /> 125 </description> 126 <hbox 127 align="center" 128 id="torPreferences-bridges-locationGroup" 129 hidden="true" 130 > 131 <label 132 id="torPreferences-bridges-locationLabel" 133 control="torPreferences-bridges-location" 134 /> 135 <spacer flex="1" /> 136 <menulist id="torPreferences-bridges-location"> 137 <menupopup id="torPreferences-bridges-locationEntries" /> 138 </menulist> 139 <button 140 id="torPreferences-bridges-buttonChooseBridgeForMe" 141 class="primary tor-button" 142 /> 143 </hbox> 144 <html:moz-toggle 145 id="tor-bridges-enabled-toggle" 146 class="tor-toggle" 147 data-l10n-id="tor-bridges-use-bridges" 148 data-l10n-attrs="label" 149 /> 150 <!-- Add an aria-live area where we can post notifications to screen 151 - reader users about changes to their list of bridges. This is to give 152 - these users some feedback for when the remove a bridge or change 153 - their bridges in other ways. I.e. whenever tor-bridges-grid-display 154 - changes its rows. 155 - 156 - If we change the text in #tor-bridges-update-area-text, a screen 157 - reader should speak out the text to the user, even when this area 158 - does not have focus. 159 - 160 - In fact, we don't really want the user to navigate to this element 161 - directly. But currently using an aria-live region in the DOM is the 162 - only way to effectively pass a notification to a screen reader user. 163 - Since it must be somewhere in the DOM, we logically place it just 164 - before the grid, where it is hopefully least confusing to stumble 165 - across. 166 - 167 - TODO: Instead of aria-live in the DOM, use the proposed ariaNotify 168 - API if it gets accepted into firefox and works with screen readers. 169 - See https://github.com/WICG/proposals/issues/112 170 --> 171 <!-- NOTE: This area is hidden by default, and is only shown temporarily 172 - when a notification is added. It should never match with search 173 - queries. --> 174 <html:div 175 id="tor-bridges-update-area" 176 hidden="hidden" 177 data-hidden-from-search="true" 178 > 179 <!-- NOTE: This first span's text content will *not* be read out as part 180 - of the notification because it does not have an aria-live 181 - attribute. Instead it is just here to give context to the following 182 - text in #tor-bridges-update-area-text if the user navigates to 183 - #tor-bridges-update-area manually whilst it is not hidden. 184 - I.e. it is just here to make it less confusing if a screen reader 185 - user stumbles across this. 186 --> 187 <html:span data-l10n-id="tor-bridges-update-area-intro"></html:span> 188 <!-- Whitespace between spans. --> 189 <!-- This second span is the area to place notification text in. --> 190 <html:span 191 id="tor-bridges-update-area-text" 192 aria-live="polite" 193 ></html:span> 194 </html:div> 195 <html:div id="tor-bridges-none" hidden="hidden"> 196 <html:img id="tor-bridges-none-icon" alt="" /> 197 <html:div data-l10n-id="tor-bridges-none-added"></html:div> 198 </html:div> 199 <html:div id="tor-bridges-current" class="tor-bridges-box" hidden="hidden"> 200 <html:div id="tor-bridges-current-header-bar"> 201 <html:h2 202 id="tor-bridges-current-heading-non-search" 203 class="tor-bridges-current-heading tor-focusable-heading tor-small-heading tor-non-search-heading" 204 tabindex="-1" 205 data-l10n-id="tor-bridges-your-bridges" 206 ></html:h2> 207 <!-- Add a duplicate search heading. 208 - In a search result the heading h1.tor-bridges-subcategory-heading 209 - will be hidden, and the h2.tor-bridges-subcategory-heading 210 - will be visible. 211 - As such, all headings below h2.tor-bridges-subcategory-heading also 212 - need to shift one lower in heading level to preseve the correct 213 - hierarchy of - heading levels. 214 - In this case we hide the <h2> heading and show the duplicate <h3> 215 - heading instead. 216 - See tor-browser#43320. --> 217 <html:h3 218 class="tor-bridges-current-heading tor-focusable-heading tor-small-heading tor-search-heading" 219 tabindex="-1" 220 data-l10n-id="tor-bridges-your-bridges" 221 ></html:h3> 222 <html:span 223 id="tor-bridges-user-label" 224 class="tor-bridges-source-label" 225 data-l10n-id="tor-bridges-source-user" 226 ></html:span> 227 <html:span 228 id="tor-bridges-built-in-label" 229 class="tor-bridges-source-label" 230 data-l10n-id="tor-bridges-source-built-in" 231 ></html:span> 232 <html:span 233 id="tor-bridges-requested-label" 234 class="tor-bridges-source-label" 235 data-l10n-id="tor-bridges-source-requested" 236 ></html:span> 237 <html:span id="tor-bridges-lox-label" class="tor-bridges-source-label"> 238 <html:img id="tor-bridges-lox-label-icon" alt="" /> 239 <html:span data-l10n-id="tor-bridges-source-lox"></html:span> 240 </html:span> 241 <html:button 242 id="tor-bridges-all-options-button" 243 class="tor-bridges-options-button" 244 aria-haspopup="menu" 245 aria-expanded="false" 246 aria-controls="tor-bridges-all-options-menu" 247 data-l10n-id="tor-bridges-options-button" 248 ></html:button> 249 <html:panel-list 250 id="tor-bridges-all-options-menu" 251 data-hidden-from-search="true" 252 > 253 <html:panel-item 254 id="tor-bridges-options-qr-all-menu-item" 255 data-l10n-attrs="accesskey" 256 data-l10n-id="tor-bridges-menu-item-qr-all-bridge-addresses" 257 ></html:panel-item> 258 <html:panel-item 259 id="tor-bridges-options-copy-all-menu-item" 260 data-l10n-attrs="accesskey" 261 data-l10n-id="tor-bridges-menu-item-copy-all-bridge-addresses" 262 ></html:panel-item> 263 <html:panel-item 264 id="tor-bridges-options-edit-all-menu-item" 265 data-l10n-attrs="accesskey" 266 data-l10n-id="tor-bridges-menu-item-edit-all-bridges" 267 ></html:panel-item> 268 <html:panel-item 269 id="tor-bridges-options-remove-all-menu-item" 270 data-l10n-attrs="accesskey" 271 data-l10n-id="tor-bridges-menu-item-remove-all-bridges" 272 ></html:panel-item> 273 </html:panel-list> 274 </html:div> 275 <html:div id="tor-bridges-built-in-display" hidden="hidden"> 276 <html:div id="tor-bridges-built-in-type-name"></html:div> 277 <html:div 278 id="tor-bridges-built-in-connected" 279 class="bridge-status-badge" 280 > 281 <html:div class="bridge-status-icon"></html:div> 282 <html:span 283 data-l10n-id="tor-bridges-built-in-status-connected" 284 ></html:span> 285 </html:div> 286 <html:div id="tor-bridges-built-in-description"></html:div> 287 </html:div> 288 <html:div 289 id="tor-bridges-grid-display" 290 class="tor-bridges-grid" 291 role="grid" 292 aria-labelledby="tor-bridges-current-heading-non-search" 293 hidden="hidden" 294 ></html:div> 295 <html:template id="tor-bridges-grid-row-template"> 296 <html:div class="tor-bridges-grid-row" role="row"> 297 <!-- TODO: lox status cell for new bridges? --> 298 <html:span 299 class="tor-bridges-type-cell tor-bridges-grid-cell" 300 role="gridcell" 301 ></html:span> 302 <html:span class="tor-bridges-emojis-block" role="none"></html:span> 303 <html:span class="tor-bridges-grid-end-block" role="none"> 304 <html:span 305 class="tor-bridges-address-cell tor-bridges-grid-cell" 306 role="gridcell" 307 > 308 <html:span class="tor-bridges-address-cell-text"></html:span> 309 </html:span> 310 <html:span 311 class="tor-bridges-status-cell tor-bridges-grid-cell" 312 role="gridcell" 313 > 314 <html:div class="bridge-status-badge"> 315 <html:div class="bridge-status-icon"></html:div> 316 <html:span class="tor-bridges-status-cell-text"></html:span> 317 </html:div> 318 </html:span> 319 <html:span 320 class="tor-bridges-options-cell tor-bridges-grid-cell" 321 role="gridcell" 322 > 323 <html:button 324 class="tor-bridges-options-cell-button tor-bridges-options-button tor-bridges-grid-focus" 325 aria-haspopup="menu" 326 aria-expanded="false" 327 data-l10n-id="tor-bridges-individual-bridge-options-button" 328 ></html:button> 329 <html:panel-list 330 class="tor-bridges-individual-options-menu" 331 data-hidden-from-search="true" 332 > 333 <html:panel-item 334 class="tor-bridges-options-qr-one-menu-item" 335 data-l10n-attrs="accesskey" 336 data-l10n-id="tor-bridges-menu-item-qr-address" 337 ></html:panel-item> 338 <html:panel-item 339 class="tor-bridges-options-copy-one-menu-item" 340 data-l10n-attrs="accesskey" 341 data-l10n-id="tor-bridges-menu-item-copy-address" 342 ></html:panel-item> 343 <html:panel-item 344 class="tor-bridges-options-remove-one-menu-item" 345 data-l10n-attrs="accesskey" 346 data-l10n-id="tor-bridges-menu-item-remove-bridge" 347 ></html:panel-item> 348 </html:panel-list> 349 </html:span> 350 </html:span> 351 </html:div> 352 </html:template> 353 <html:div 354 id="tor-bridges-share" 355 class="tor-bridges-details-box" 356 hidden="hidden" 357 > 358 <html:h3 359 class="tor-bridges-share-heading tor-small-heading tor-non-search-heading" 360 data-l10n-id="tor-bridges-share-heading" 361 ></html:h3> 362 <!-- Add a duplicate search heading. See tor-browser#43320. --> 363 <html:h4 364 class="tor-bridges-share-heading tor-small-heading tor-search-heading" 365 data-l10n-id="tor-bridges-share-heading" 366 ></html:h4> 367 <html:span 368 id="tor-bridges-share-description" 369 data-l10n-id="tor-bridges-share-description" 370 ></html:span> 371 <html:button 372 id="tor-bridges-copy-addresses-button" 373 data-l10n-id="tor-bridges-copy-addresses-button" 374 ></html:button> 375 <html:button 376 id="tor-bridges-qr-addresses-button" 377 data-l10n-id="tor-bridges-qr-addresses-button" 378 ></html:button> 379 </html:div> 380 <html:div id="tor-bridges-lox-status" hidden="hidden"> 381 <html:div data-l10n-id="tor-bridges-lox-description"></html:div> 382 <html:div 383 id="tor-bridges-lox-details" 384 class="tor-bridges-details-box tor-bridges-lox-box" 385 hidden="hidden" 386 > 387 <html:img alt="" class="tor-bridges-lox-image-inner" /> 388 <html:img alt="" class="tor-bridges-lox-image-outer" /> 389 <html:h3 390 class="tor-bridges-lox-next-unlock-counter tor-small-heading tor-bridges-lox-intro tor-focusable-heading tor-non-search-heading" 391 tabindex="-1" 392 ></html:h3> 393 <!-- Add a duplicate search heading. See tor-browser#43320. --> 394 <html:h4 395 class="tor-bridges-lox-next-unlock-counter tor-small-heading tor-bridges-lox-intro tor-focusable-heading tor-search-heading" 396 tabindex="-1" 397 ></html:h4> 398 <html:ul class="tor-bridges-lox-list"> 399 <html:li 400 id="tor-bridges-lox-next-unlock-gain-bridges" 401 class="tor-bridges-lox-list-item tor-bridges-lox-list-item-bridge" 402 data-l10n-id="tor-bridges-lox-unlock-two-bridges" 403 hidden="hidden" 404 ></html:li> 405 <html:li 406 id="tor-bridges-lox-next-unlock-first-invites" 407 class="tor-bridges-lox-list-item tor-bridges-lox-list-item-invite" 408 data-l10n-id="tor-bridges-lox-unlock-first-invites" 409 hidden="hidden" 410 ></html:li> 411 <html:li 412 id="tor-bridges-lox-next-unlock-more-invites" 413 class="tor-bridges-lox-list-item tor-bridges-lox-list-item-invite" 414 data-l10n-id="tor-bridges-lox-unlock-more-invites" 415 hidden="hidden" 416 ></html:li> 417 </html:ul> 418 <html:div 419 id="tor-bridges-lox-remaining-invites" 420 hidden="hidden" 421 ></html:div> 422 <html:button 423 id="tor-bridges-lox-show-invites-button" 424 class="tor-bridges-lox-button" 425 data-l10n-id="tor-bridges-lox-show-invites-button" 426 hidden="hidden" 427 ></html:button> 428 </html:div> 429 <html:div 430 id="tor-bridges-lox-unlock-alert" 431 role="alert" 432 class="tor-bridges-details-box tor-bridges-lox-box" 433 hidden="hidden" 434 > 435 <html:img alt="" class="tor-bridges-lox-image-inner" /> 436 <html:img alt="" class="tor-bridges-lox-image-outer" /> 437 <html:div 438 id="tor-bridge-unlock-alert-title" 439 class="tor-small-heading tor-bridges-lox-intro" 440 ></html:div> 441 <html:ul class="tor-bridges-lox-list"> 442 <html:li 443 id="tor-bridges-lox-unlock-alert-gain-bridges" 444 class="tor-bridges-lox-list-item tor-bridges-lox-list-item-bridge" 445 data-l10n-id="tor-bridges-lox-gained-two-bridges" 446 hidden="hidden" 447 ></html:li> 448 <html:li 449 id="tor-bridges-lox-unlock-alert-new-bridges" 450 class="tor-bridges-lox-list-item tor-bridges-lox-list-item-bridge" 451 data-l10n-id="tor-bridges-lox-new-bridges" 452 hidden="hidden" 453 ></html:li> 454 <html:li 455 id="tor-bridges-lox-unlock-alert-invites" 456 class="tor-bridges-lox-list-item tor-bridges-lox-list-item-invite" 457 hidden="hidden" 458 ></html:li> 459 </html:ul> 460 <html:button 461 id="tor-bridges-lox-unlock-alert-button" 462 class="tor-bridges-lox-button" 463 data-l10n-id="tor-bridges-lox-got-it-button" 464 ></html:button> 465 </html:div> 466 </html:div> 467 </html:div> 468 <html:h2 469 class="tor-bridges-change-heading tor-medium-heading tor-non-search-heading" 470 ></html:h2> 471 <!-- Add a duplicate search heading. See tor-browser#43320. 472 - This has the same content, but a smaller font. --> 473 <html:h3 474 class="tor-bridges-change-heading tor-small-heading tor-search-heading" 475 ></html:h3> 476 <hbox align="center"> 477 <description 478 flex="1" 479 data-l10n-id="tor-bridges-select-built-in-description" 480 /> 481 <html:button 482 id="tor-bridges-open-built-in-dialog-button" 483 class="accessory-button" 484 data-l10n-id="tor-bridges-select-built-in-button" 485 ></html:button> 486 </hbox> 487 <hbox align="center"> 488 <description id="tor-bridges-user-provide-description" flex="1" /> 489 <html:button 490 id="tor-bridges-open-user-provide-dialog-button" 491 class="accessory-button" 492 ></html:button> 493 </hbox> 494 <html:h3 495 class="tor-bridges-provider-heading tor-medium-heading tor-non-search-heading" 496 data-l10n-id="tor-bridges-find-more-heading" 497 ></html:h3> 498 <!-- Add a duplicate search heading. See tor-browser#43320. 499 - This has the same content, but a smaller font. --> 500 <html:h4 501 class="tor-bridges-provider-heading tor-small-heading tor-search-heading" 502 data-l10n-id="tor-bridges-find-more-heading" 503 ></html:h4> 504 <description 505 data-l10n-id="tor-bridges-find-more-description" 506 class="description-deemphasized" 507 /> 508 <html:div id="tor-bridges-provider-area"> 509 <html:ul id="tor-bridges-provider-list"> 510 <html:li class="tor-bridges-provider-item"> 511 <html:img 512 id="tor-bridges-provider-icon-telegram" 513 class="tor-bridges-provider-icon" 514 alt="" 515 /> 516 <html:div 517 class="tor-bridges-provider-name" 518 data-l10n-id="tor-bridges-provider-telegram-name" 519 ></html:div> 520 <html:div 521 id="tor-bridges-provider-instruction-telegram" 522 class="tor-bridges-provider-instruction" 523 > 524 <html:a data-l10n-name="user"></html:a> 525 </html:div> 526 </html:li> 527 <html:li class="tor-bridges-provider-item"> 528 <html:img 529 id="tor-bridges-provider-icon-web" 530 class="tor-bridges-provider-icon" 531 alt="" 532 /> 533 <html:div 534 class="tor-bridges-provider-name" 535 data-l10n-id="tor-bridges-provider-web-name" 536 ></html:div> 537 <html:div 538 class="tor-bridges-provider-instruction" 539 data-l10n-id="tor-bridges-provider-web-instruction" 540 data-l10n-args='{ "url": "bridges.torproject.org" }' 541 > 542 <html:a 543 href="https://bridges.torproject.org" 544 data-l10n-name="url" 545 ></html:a> 546 </html:div> 547 </html:li> 548 <html:li class="tor-bridges-provider-item"> 549 <html:img 550 id="tor-bridges-provider-icon-email" 551 class="tor-bridges-provider-icon" 552 alt="" 553 /> 554 <html:div 555 class="tor-bridges-provider-name" 556 data-l10n-id="tor-bridges-provider-email-name" 557 ></html:div> 558 <html:div 559 class="tor-bridges-provider-instruction" 560 data-l10n-id="tor-bridges-provider-email-instruction" 561 data-l10n-args='{ "address": "bridges@torproject.org" }' 562 ></html:div> 563 </html:li> 564 </html:ul> 565 <html:div id="tor-bridges-request-box" class="tor-bridges-box"> 566 <html:img 567 alt="" 568 src="chrome://browser/content/torpreferences/bridge-bot.svg" 569 ></html:img> 570 <html:div 571 id="tor-bridges-request-description" 572 data-l10n-id="tor-bridges-request-from-browser" 573 ></html:div> 574 <html:button 575 id="tor-bridges-open-request-dialog-button" 576 data-l10n-id="tor-bridges-request-button" 577 ></html:button> 578 </html:div> 579 </html:div> 580 </groupbox> 581 582 <!-- Advanced --> 583 <hbox class="subcategory" data-category="paneConnection" hidden="true"> 584 <html:h1 585 id="tor-advanced-subcategory-heading-non-search" 586 data-l10n-id="tor-advanced-settings-heading" 587 ></html:h1> 588 </hbox> 589 <groupbox 590 id="torPreferences-advanced-group" 591 data-category="paneConnection" 592 hidden="true" 593 aria-labelledby="tor-advanced-subcategory-heading-non-search" 594 > 595 <!-- Add a search-header that only appears in search results as a substitute 596 - for the hidden h1 element. See tor-browser#43320. 597 - NOTE: Usually the first xul:label will act as the accessible name for 598 - a xul:groubbox element *if* it is not hidden. Since the search-header 599 - is sometimes hidden we need an explicit aria-labelledby anyway. 600 - However, we keep the wrapper xul:label for styling consistency with the 601 - other settings. --> 602 <label class="search-header" hidden="true"> 603 <html:h2 data-l10n-id="tor-advanced-settings-heading"></html:h2> 604 </label> 605 <hbox align="center"> 606 <description data-l10n-id="tor-advanced-settings-description" flex="1" /> 607 <html:button 608 id="torPreferences-advanced-button" 609 class="accessory-button" 610 data-l10n-id="tor-advanced-settings-button" 611 ></html:button> 612 </hbox> 613 <hbox align="center" data-subcategory="viewlogs"> 614 <description data-l10n-id="tor-view-log-description" flex="1" /> 615 <html:button 616 id="torPreferences-buttonTorLogs" 617 class="accessory-button" 618 data-l10n-id="tor-view-log-button" 619 ></html:button> 620 </hbox> 621 </groupbox> 622 </html:template>