aboutTor.xhtml 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!--
  3. - Copyright (c) 2016, The Tor Project, Inc.
  4. - See LICENSE for licensing information.
  5. - vim: set sw=2 sts=2 ts=8 et syntax=xml:
  6. -->
  7. <!DOCTYPE html [
  8. <!ENTITY % htmlDTD
  9. PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  10. "DTD/xhtml1-strict.dtd">
  11. %htmlDTD;
  12. <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
  13. %globalDTD;
  14. <!ENTITY % aboutTorDTD SYSTEM "chrome://torbutton/locale/aboutTor.dtd">
  15. %aboutTorDTD;
  16. ]>
  17. <html xmlns="http://www.w3.org/1999/xhtml">
  18. <head>
  19. <title>&aboutTor.title;</title>
  20. <link rel="stylesheet" type="text/css" media="all"
  21. href="chrome://torbutton/skin/aboutTor.css"/>
  22. <script type="text/javascript;version=1.7">
  23. <![CDATA[
  24. function onLoad()
  25. {
  26. insertPropertyStrings();
  27. document.addEventListener("AboutTorAdjustArrow", function() {
  28. adjustToolbarIconArrow();
  29. }, false);
  30. window.setTimeout( function() {
  31. adjustToolbarIconArrow();
  32. }, 0);
  33. }
  34. function adjustToolbarIconArrow()
  35. {
  36. let textElem = document.getElementById("updatePrompt");
  37. let arrowHeadDiv = document.getElementById("toolbarIconArrowHead");
  38. let vertExtDiv = document.getElementById("toolbarIconArrowVertExtension");
  39. let bendDiv = document.getElementById("toolbarIconArrowBend");
  40. let horzExtDiv = document.getElementById("toolbarIconArrowHorzExtension");
  41. if (!textElem || !arrowHeadDiv || !vertExtDiv || !bendDiv || !horzExtDiv)
  42. return;
  43. let arrowTailElems = [ vertExtDiv, bendDiv, horzExtDiv ];
  44. let tbXpos;
  45. if (document.body.hasAttribute("torbutton-xpos"))
  46. tbXpos = parseInt(document.body.getAttribute("torbutton-xpos"), 10);
  47. if (!tbXpos || isNaN(tbXpos) || (tbXpos < 0))
  48. {
  49. arrowHeadDiv.style.display = "none";
  50. for (let elem of arrowTailElems)
  51. elem.style.display = "none";
  52. return;
  53. }
  54. const kArrowMargin = 6; // Horizontal margin between line and text.
  55. const kArrowHeadExtraWidth = 9; // Horizontal margin to the line.
  56. const kArrowLineThickness = 11;
  57. const kBendWidth = 22;
  58. const kBendHeight = 22;
  59. arrowHeadDiv.style.display = "block"; // Must be visible to get offsetWidth.
  60. let arrowHalfWidth = Math.round(arrowHeadDiv.offsetWidth / 2);
  61. let leftAnchor = textElem.offsetLeft - kArrowMargin
  62. - kBendWidth + Math.round(kArrowLineThickness / 2);
  63. let rightAnchor = textElem.offsetLeft + textElem.offsetWidth
  64. + kArrowMargin + arrowHalfWidth;
  65. let isArrowOnLeft = (tbXpos < leftAnchor);
  66. let isArrowOnRight = (tbXpos > rightAnchor) &&
  67. (tbXpos < (window.innerWidth - arrowHalfWidth));
  68. let isArrowInMiddle = (tbXpos >= leftAnchor) && (tbXpos <= rightAnchor);
  69. if (isArrowOnLeft || isArrowOnRight || isArrowInMiddle)
  70. {
  71. // Position the arrow head.
  72. let arrowHeadLeft = tbXpos - arrowHalfWidth;
  73. arrowHeadDiv.style.left = arrowHeadLeft + "px";
  74. if (isArrowOnLeft || isArrowOnRight)
  75. {
  76. let horzExtBottom = textElem.offsetTop +
  77. Math.round((textElem.offsetHeight + kArrowLineThickness) / 2);
  78. // Position the vertical (extended) line.
  79. let arrowHeadBottom = arrowHeadDiv.offsetTop + arrowHeadDiv.offsetHeight;
  80. vertExtDiv.style.top = arrowHeadBottom + "px";
  81. vertExtDiv.style.left = (arrowHeadLeft + kArrowHeadExtraWidth) + "px";
  82. let ht = horzExtBottom - kBendHeight - arrowHeadBottom;
  83. vertExtDiv.style.height = ht + "px";
  84. // Position the bend (elbow).
  85. bendDiv.style.top = (horzExtBottom - kBendHeight) + "px";
  86. let bendDivLeft;
  87. if (isArrowOnLeft)
  88. {
  89. bendDiv.setAttribute("pos", "left");
  90. bendDivLeft = arrowHeadLeft + kArrowHeadExtraWidth;
  91. }
  92. else if (isArrowOnRight)
  93. {
  94. bendDiv.setAttribute("pos", "right");
  95. bendDivLeft = arrowHeadLeft + kArrowHeadExtraWidth
  96. + kArrowLineThickness - kBendWidth;
  97. }
  98. bendDiv.style.left = bendDivLeft + "px";
  99. // Position the horizontal (extended) line.
  100. horzExtDiv.style.top = (horzExtBottom - kArrowLineThickness) + "px";
  101. let horzExtLeft, w;
  102. if (isArrowOnLeft)
  103. {
  104. horzExtLeft = bendDivLeft + kBendWidth;
  105. w = (textElem.offsetLeft - horzExtLeft - kArrowMargin);
  106. }
  107. else
  108. {
  109. horzExtLeft = rightAnchor - arrowHalfWidth;
  110. w = tbXpos - arrowHalfWidth - horzExtLeft;
  111. }
  112. horzExtDiv.style.left = horzExtLeft + "px";
  113. horzExtDiv.style.width = w + "px";
  114. }
  115. }
  116. let headDisplay = (isArrowOnLeft || isArrowInMiddle || isArrowOnRight)
  117. ? "block" : "none";
  118. arrowHeadDiv.style.display = headDisplay;
  119. let tailDisplay = (isArrowOnLeft || isArrowOnRight) ? "block" : "none";
  120. for (let elem of arrowTailElems)
  121. elem.style.display = tailDisplay;
  122. }
  123. function insertPropertyStrings()
  124. {
  125. try {
  126. let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
  127. Components.utils.import("resource://gre/modules/Services.jsm");
  128. let gStringBundle = Services.strings.createBundle(kPropertiesURL);
  129. let s1 = gStringBundle.GetStringFromName("aboutTor.searchDDG.privacy.link");
  130. let s2 = gStringBundle.GetStringFromName("aboutTor.searchDDG.search.link");
  131. let result = gStringBundle.formatStringFromName("aboutTor.searchDDG.privacy",
  132. [s1, s2], 2);
  133. if (result) {
  134. let elem = document.getElementById("searchProviderInfo");
  135. if (elem)
  136. elem.innerHTML = result;
  137. }
  138. } catch(e) {};
  139. }
  140. window.addEventListener("pageshow", function() {
  141. let evt = new CustomEvent("AboutTorLoad", { bubbles: true });
  142. document.dispatchEvent(evt);
  143. });
  144. ]]>
  145. </script>
  146. </head>
  147. <body dir="&locale.dir;" onload="onLoad();">
  148. <div id="torstatus" class="top">
  149. <div id="torstatus-version"/>
  150. <div id="torstatus-image"/>
  151. <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
  152. <h1>&aboutTor.success.label;</h1>
  153. <br/>
  154. <h3 class="hideIfTBBNeedsUpdate">&aboutTor.success3.label;</h3>
  155. <br/>
  156. <div style="margin-top: 20px;">
  157. <a id="testTorSettings" href="about:blank">&aboutTor.check.label;</a>
  158. </div>
  159. </div>
  160. <div id="torstatus-off-container" class="hideIfTorOn torstatus-container">
  161. <h1>&aboutTor.failure.label;</h1>
  162. <br/>
  163. <h2>&aboutTor.failure2.label;</h2>
  164. </div>
  165. </div>
  166. <div class="top">
  167. <div class="hideIfTorIsUpToDate">
  168. <h1 class="hideIfTorOff">&aboutTor.outOfDateTorOn.label;</h1>
  169. <h1 class="hideIfTorOn">&aboutTor.outOfDateTorOff.label;</h1>
  170. <h3 id="updatePrompt">&aboutTor.outOfDate2.label;</h3>
  171. <div id="toolbarIconArrowHead" class="arrow"/>
  172. <div id="toolbarIconArrowVertExtension" class="arrow"/>
  173. <div id="toolbarIconArrowBend" class="arrow"/>
  174. <div id="toolbarIconArrowHorzExtension" class="arrow"/>
  175. </div>
  176. </div>
  177. <div class="searchbox hideIfTorOff"> <!-- begin form based search -->
  178. <form action="&aboutTor.searchDDGPost.link;" method="post">
  179. <div id="sxw">
  180. <div id="sbutton">
  181. <input name="b" id="sb" value="" title="&aboutTor.search.label;"
  182. alt="&aboutTor.search.label;" type="submit"/>
  183. </div>
  184. <input name="q" autocomplete="off" id="sx" type="text"/>
  185. </div>
  186. <h4 id="searchProviderInfo" />
  187. </form>
  188. </div>
  189. <div class="hideIfTorOn" style="height:100px"/>
  190. <div id="middle" class="hideIfTorOff">
  191. <div class="bubbleRow">
  192. <div class="bubble">
  193. <h1>&aboutTor.whatnextQuestion.label;</h1>
  194. <p>&aboutTor.whatnextAnswer.label;</p>
  195. <ul>
  196. <li>
  197. <a href="&aboutTor.whatnext.link;">
  198. &aboutTor.whatnext.label;
  199. </a>
  200. </li>
  201. <li class="showForManual">
  202. <a href="&aboutTor.torbrowser_user_manual.link;">
  203. &aboutTor.torbrowser_user_manual.label;
  204. </a>
  205. </li>
  206. </ul>
  207. </div>
  208. <div class="bubble">
  209. <h1>&aboutTor.helpInfo1.label;</h1>
  210. <p>&aboutTor.helpInfo2.label;</p>
  211. <ul>
  212. <li><a href="&aboutTor.helpInfo3.link;">&aboutTor.helpInfo3.label;</a></li>
  213. <li><a href="&aboutTor.helpInfo4.link;">&aboutTor.helpInfo4.label;</a></li>
  214. <li><a href="&aboutTor.helpInfo5.link;">&aboutTor.helpInfo5.label;</a></li>
  215. </ul>
  216. </div>
  217. </div>
  218. </div> <!-- middle -->
  219. <div id="bottom">
  220. <p>&aboutTor.footer.label;
  221. <a href="&aboutTor.learnMore.link;">&aboutTor.learnMore.label;</a></p>
  222. </div>
  223. </body>
  224. </html>