aboutTor.xhtml 5.93 KB
Newer Older
1
2
<?xml version="1.0" encoding="UTF-8"?>
<!--
3
   - Copyright (c) 2014, The Tor Project, Inc.
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
   - See LICENSE for licensing information.
   - vim: set sw=2 sts=2 ts=8 et syntax=xml:
  -->

<!DOCTYPE html [
  <!ENTITY % htmlDTD
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
  %htmlDTD;
  <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
  %globalDTD;
  <!ENTITY % aboutTorDTD SYSTEM "chrome://torbutton/locale/aboutTor.dtd">
  %aboutTorDTD;
]>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>&aboutTor.title;</title>
  <link rel="stylesheet" type="text/css" media="all"
        href="chrome://torbutton/skin/aboutTor.css"/>
<script type="text/javascript">
 <![CDATA[
function onLoad()
{
28
29
  document.addEventListener("AboutTorAdjustArrow", function() {
    adjustToolbarIconArrow();
30
31
32
  }, false);

  window.setTimeout( function() {
33
    adjustToolbarIconArrow();
34
35
36
37
    document.getElementById('sx').focus();
  }, 0);
}

38
function adjustToolbarIconArrow()
39
40
{
  var textElem = document.getElementById("updatePrompt");
41
42
43
  var arrowDiv = document.getElementById("toolbarIconArrow");
  var extDiv = document.getElementById("toolbarIconArrowExtension");
  if (textElem && arrowDiv && extDiv)
44
  {
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
    var tbXpos;
    if (document.body.hasAttribute("torbutton-xpos"))
      tbXpos = parseInt(document.body.getAttribute("torbutton-xpos"), 10);

    if (!tbXpos || isNaN(tbXpos) || (tbXpos < 0))
    {
      arrowDiv.style.display = "none";
      extDiv.style.display = "none";
      return;
    }

    // Account for content zoom and retina displays by converting to device
    // independent units.
    if ("devicePixelRatio" in window)  // FF18+
      tbXpos /= window.devicePixelRatio;

    const kArrowMargin = 6;
    arrowDiv.style.display = "block";  // Must be visible to get offsetWidth.
    var arrowHalfWidth = arrowDiv.offsetWidth / 2.0;
    var leftAnchor = textElem.offsetLeft - kArrowMargin - arrowHalfWidth;
    var rightAnchor = textElem.offsetLeft + textElem.offsetWidth
                      + kArrowMargin + arrowHalfWidth;

    var arrowDisplay = "block";
    var extDisplay = "block";
    if (tbXpos < leftAnchor)
    {
      // Toolbar button to left of text.
      arrowDiv.setAttribute("pos", "left");
      arrowDiv.style.left = (tbXpos - arrowHalfWidth) + "px";
      var extLeft = tbXpos + arrowHalfWidth;
      extDiv.style.left = extLeft + "px";
      extDiv.style.width = (textElem.offsetLeft - extLeft - kArrowMargin) + "px";
    }
    else if ((tbXpos > rightAnchor) &&
             (tbXpos < (window.innerWidth - arrowHalfWidth)))
    {
      // Toolbar button to right of text.
      arrowDiv.setAttribute("pos", "right");
      arrowDiv.style.left = (tbXpos - arrowHalfWidth) + "px";
      var extLeft = rightAnchor - arrowHalfWidth;
      extDiv.style.left = extLeft + "px";
      extDiv.style.width = (tbXpos - arrowHalfWidth - extLeft) + "px";
    }
    else if ((tbXpos >= leftAnchor) && (tbXpos <= rightAnchor))
    {
      // Toolbar button in middle about text; use arrow without a tail.
      arrowDiv.setAttribute("pos", "middle");
      arrowDiv.style.left = (tbXpos - arrowHalfWidth) + "px";
      extDisplay = "none";
    }
    else  // Unable to display arrow (e.g., toolbar button is above sidebar).
    {
      arrowDisplay = "none";
      extDisplay = "none";
    }

    arrowDiv.style.display = arrowDisplay;
    extDiv.style.display = extDisplay;
104
105
106
107
108
109
110
  }
}
]]>
</script>
</head>
<body dir="&locale.dir;" onload="onLoad();">
<div id="torstatus" class="top">
111
  <div id="torstatus-version"/>
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
  <div id="torstatus-image"/>
  <div class="hideIfTorOff">
    <h1>&aboutTor.success.label;</h1>
    <h2 id="success2">&aboutTor.success2.label;</h2>
    <h3 class="hideIfTBBNeedsUpdate">&aboutTor.success3.label;</h3>
    <a id="testTorSettings" href="about:blank">&aboutTor.check.label;</a>
  </div>
  <div class="hideIfTorOn">
    <h1>&aboutTor.failure.label;</h1>
    <h2>&aboutTor.failure2.label;</h2>
    <h3>&aboutTor.failure3prefix.label;<a href="mailto:&aboutTor.failure3Link;"
>&aboutTor.failure3Link;</a>&aboutTor.failure3suffix.label;</h3>
  </div>
</div>
<div class="top">
  <div class="hideIfTorIsUpToDate">
    <h1 class="hideIfTorOff">&aboutTor.outOfDateTorOn.label;</h1>
    <h1 class="hideIfTorOn">&aboutTor.outOfDateTorOff.label;</h1>
    <h3 id="updatePrompt">&aboutTor.outOfDate2.label;</h3>
131
132
    <div id="toolbarIconArrow"/>
    <div id="toolbarIconArrowExtension"/>
133
134
135
136
137
138
139
140
141
142
143
144
  </div>
</div>

<div class="searchbox hideIfTorOff"> <!-- begin form based search -->
  <form action="&aboutTor.searchSPPost.link;" method="post">
  <div id="sxw">
    <div id="sbutton">
      <input name="b" id="sb" value="" title="&aboutTor.search.label;"
             alt="&aboutTor.search.label;" type="submit"/>
    </div>
    <input name="q" autocomplete="off" id="sx" type="text"/>
  </div>
145
  <h4>&aboutTor.searchSP.privacy.beforeLink.label;<a href="&aboutTor.searchSP.privacy.link;">&aboutTor.searchSP.privacy.label;</a>&aboutTor.searchSP.privacy.afterLink.label;&aboutTor.searchSP.search.beforeLink.label;<a href="&aboutTor.searchSP.search.link;">&aboutTor.searchSP.search.label;</a>&aboutTor.searchSP.search.afterLink.label;</h4>
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
  </form>
</div>

<div class="hideIfTorOn" style="height:100px"/>

<div id="middle" class="hideIfTorOff">
  <div class="container two">
    <h1>&aboutTor.whatnextQuestion.label;</h1>
    <p>&aboutTor.whatnextAnswer.label;</p>
    <a class="tips" href="&aboutTor.whatnext.link;">&aboutTor.whatnext.label;</a>
  </div>

  <div class="container three">
    <h1>&aboutTor.helpInfo1.label;</h1>
    <p>&aboutTor.helpInfo2.label;</p>
    <ul>
      <li><a href="&aboutTor.helpInfo3.link;">&aboutTor.helpInfo3.label;</a></li>
      <li><a href="&aboutTor.helpInfo4.link;">&aboutTor.helpInfo4.label;</a></li>
      <li><a href="&aboutTor.helpInfo5.link;">&aboutTor.helpInfo5.label;</a></li>
    </ul>
  </div>
</div> <!-- middle -->

<div id="bottom">
  <p>&aboutTor.footer.label;
<a href="&aboutTor.learnMore.link;">&aboutTor.learnMore.label;</a></p>
</div>

</body>
</html>