aboutTor.xhtml 8.16 KB
Newer Older
1
2
<?xml version="1.0" encoding="UTF-8"?>
<!--
3
   - Copyright (c) 2016, The Tor Project, Inc.
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   - 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"/>
24
<script type="text/javascript;version=1.7">
25
26
27
 <![CDATA[
function onLoad()
{
28
29
  insertPropertyStrings();

30
31
  document.addEventListener("AboutTorAdjustArrow", function() {
    adjustToolbarIconArrow();
32
33
34
  }, false);

  window.setTimeout( function() {
35
    adjustToolbarIconArrow();
36
37
38
  }, 0);
}

39
function adjustToolbarIconArrow()
40
{
41
42
43
44
45
46
47
48
49
50
51
52
53
54
  let textElem = document.getElementById("updatePrompt");
  let arrowHeadDiv = document.getElementById("toolbarIconArrowHead");
  let vertExtDiv = document.getElementById("toolbarIconArrowVertExtension");
  let bendDiv = document.getElementById("toolbarIconArrowBend");
  let horzExtDiv = document.getElementById("toolbarIconArrowHorzExtension");
  if (!textElem || !arrowHeadDiv || !vertExtDiv || !bendDiv || !horzExtDiv)
    return;

  let arrowTailElems = [ vertExtDiv, bendDiv, horzExtDiv ];
  let tbXpos;
  if (document.body.hasAttribute("torbutton-xpos"))
    tbXpos = parseInt(document.body.getAttribute("torbutton-xpos"), 10);

  if (!tbXpos || isNaN(tbXpos) || (tbXpos < 0))
55
  {
56
57
58
59
60
    arrowHeadDiv.style.display = "none";
    for (let elem of arrowTailElems)
      elem.style.display = "none";
    return;
  }
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
  const kArrowMargin = 6;          // Horizontal margin between line and text.
  const kArrowHeadExtraWidth = 9;  // Horizontal margin to the line.
  const kArrowLineThickness = 11;
  const kBendWidth = 22;
  const kBendHeight = 22;

  arrowHeadDiv.style.display = "block";  // Must be visible to get offsetWidth.
  let arrowHalfWidth = Math.round(arrowHeadDiv.offsetWidth / 2);
  let leftAnchor = textElem.offsetLeft - kArrowMargin
                    - kBendWidth + Math.round(kArrowLineThickness / 2);
  let rightAnchor = textElem.offsetLeft + textElem.offsetWidth
                    + kArrowMargin + arrowHalfWidth;

  let isArrowOnLeft = (tbXpos < leftAnchor);
  let isArrowOnRight = (tbXpos > rightAnchor) &&
                       (tbXpos < (window.innerWidth - arrowHalfWidth));
  let isArrowInMiddle = (tbXpos >= leftAnchor) && (tbXpos <= rightAnchor);

  if (isArrowOnLeft || isArrowOnRight || isArrowInMiddle)
  {
    // Position the arrow head.
    let arrowHeadLeft = tbXpos - arrowHalfWidth;
    arrowHeadDiv.style.left = arrowHeadLeft + "px";
    if (isArrowOnLeft || isArrowOnRight)
86
    {
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
      let horzExtBottom = textElem.offsetTop +
               Math.round((textElem.offsetHeight + kArrowLineThickness) / 2);

      // Position the vertical (extended) line.
      let arrowHeadBottom = arrowHeadDiv.offsetTop + arrowHeadDiv.offsetHeight;
      vertExtDiv.style.top = arrowHeadBottom + "px";
      vertExtDiv.style.left = (arrowHeadLeft + kArrowHeadExtraWidth) + "px";
      let ht = horzExtBottom - kBendHeight - arrowHeadBottom;
      vertExtDiv.style.height = ht + "px";

      // Position the bend (elbow).
      bendDiv.style.top = (horzExtBottom - kBendHeight) + "px";
      let bendDivLeft;
      if (isArrowOnLeft)
      {
        bendDiv.setAttribute("pos", "left");
        bendDivLeft = arrowHeadLeft + kArrowHeadExtraWidth;
      }
      else if (isArrowOnRight)
      {
        bendDiv.setAttribute("pos", "right");
        bendDivLeft = arrowHeadLeft + kArrowHeadExtraWidth
                      + kArrowLineThickness - kBendWidth;
      }
      bendDiv.style.left = bendDivLeft + "px";

      // Position the horizontal (extended) line.
      horzExtDiv.style.top = (horzExtBottom - kArrowLineThickness) + "px";
      let horzExtLeft, w;
      if (isArrowOnLeft)
      {
        horzExtLeft = bendDivLeft + kBendWidth;
        w = (textElem.offsetLeft - horzExtLeft - kArrowMargin);
      }
      else
      {
        horzExtLeft = rightAnchor - arrowHalfWidth;
        w = tbXpos - arrowHalfWidth - horzExtLeft;
      }
      horzExtDiv.style.left = horzExtLeft + "px";
      horzExtDiv.style.width = w + "px";
128
    }
129
  }
130
131
132
133
134
135
136

  let headDisplay = (isArrowOnLeft || isArrowInMiddle || isArrowOnRight)
                      ? "block" : "none";
  arrowHeadDiv.style.display = headDisplay;
  let tailDisplay = (isArrowOnLeft || isArrowOnRight) ? "block" : "none";
  for (let elem of arrowTailElems)
    elem.style.display = tailDisplay;
137
}
138
139
140
141

function insertPropertyStrings()
{
  try {
142
143
144
145
    let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";

    Components.utils.import("resource://gre/modules/Services.jsm");
    let gStringBundle = Services.strings.createBundle(kPropertiesURL);
146
147
148
    let s1 = gStringBundle.GetStringFromName("aboutTor.searchDC.privacy.link");
    let s2 = gStringBundle.GetStringFromName("aboutTor.searchDC.search.link");
    let result = gStringBundle.formatStringFromName("aboutTor.searchDC.privacy",
149
150
                  [s1, s2], 2);
    if (result) {
151
      let elem = document.getElementById("searchProviderInfo");
152
153
154
155
156
157
      if (elem)
        elem.innerHTML = result;
    }
  } catch(e) {};
}

158
159
160
161
162
window.addEventListener("pageshow", function() {
  let evt = new CustomEvent("AboutTorLoad", { bubbles: true });
  document.dispatchEvent(evt);
});

163
164
165
166
]]>
</script>
</head>
<body dir="&locale.dir;" onload="onLoad();">
167
<div id="torstatus" class="top">
168
  <div id="torstatus-version"/>
169
  <div id="torstatus-image"/>
170
  <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
171
    <h1>&aboutTor.success.label;</h1>
172
    <br/>
173
    <h3 class="hideIfTBBNeedsUpdate">&aboutTor.success3.label;</h3>
174
    <br/>
175
176
177
    <div style="margin-top: 20px;">
      <a id="testTorSettings" href="about:blank">&aboutTor.check.label;</a>
    </div>
178
  </div>
179
  <div id="torstatus-off-container" class="hideIfTorOn torstatus-container">
180
    <h1>&aboutTor.failure.label;</h1>
181
    <br/>
182
183
184
185
186
187
188
189
    <h2>&aboutTor.failure2.label;</h2>
  </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>
190
191
192
193
194

    <div id="toolbarIconArrowHead" class="arrow"/>
    <div id="toolbarIconArrowVertExtension" class="arrow"/>
    <div id="toolbarIconArrowBend" class="arrow"/>
    <div id="toolbarIconArrowHorzExtension" class="arrow"/>
195
196
197
198
  </div>
</div>

<div class="searchbox hideIfTorOff"> <!-- begin form based search -->
199
  <form action="&aboutTor.searchDCPost.link;" method="post">
200
201
202
203
204
205
206
  <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>
207
  <h4 id="searchProviderInfo" />
208
209
210
211
212
213
  </form>
</div>

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

<div id="middle" class="hideIfTorOff">
214
215
216
217
  <div class="bubbleRow">
    <div class="bubble">
      <h1>&aboutTor.whatnextQuestion.label;</h1>
      <p>&aboutTor.whatnextAnswer.label;</p>
218
219
220
221
222
223
224
225
226
227
228
229
      <ul>
        <li>
          <a href="&aboutTor.whatnext.link;">
            &aboutTor.whatnext.label;
          </a>
        </li>
        <li class="showForManual">
          <a href="&aboutTor.torbrowser_user_manual.link;">
            &aboutTor.torbrowser_user_manual.label;
          </a>
        </li>
      </ul>
230
    </div>
231

232
233
234
235
236
237
238
239
240
    <div class="bubble">
      <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>
241
242
243
244
245
246
247
  </div>
</div> <!-- middle -->

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

249
250
</body>
</html>