OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <!-- This SSL interstitial is designed to look like the Firefox SSL error, with | |
3 permission from Firefox to copy the appearance of the page for an A/B | |
4 experiment. --> | |
5 <html i18n-values="dir:textdirection"> | |
6 <head> | |
7 <meta charset="utf-8"> | |
8 <title>Untrusted Connection</title> | |
9 <style> | |
Dan Beam
2013/05/07 08:07:16
move to external file
| |
10 body { | |
11 background-color: #444444; | |
Dan Beam
2013/05/07 08:07:16
#444
| |
12 color: #555555; | |
Dan Beam
2013/05/07 08:07:16
#555
| |
13 margin: 0; | |
14 padding: 0 1em; | |
15 } | |
16 #box { | |
17 background-color: #ffffff; | |
Dan Beam
2013/05/07 08:07:16
white
| |
18 border-top: 9px solid #ffbd09; | |
19 margin: 40px auto; | |
20 max-width: 52em; | |
21 min-width: 13em; | |
22 padding: 50px 0px 30px 0px; | |
Dan Beam
2013/05/07 08:07:16
50px 0 30px
| |
23 position: relative; | |
24 } | |
25 #exit-button { | |
26 color: #ffffff; | |
Dan Beam
2013/05/07 08:07:16
white
| |
27 background-color: #4285f4; | |
28 border: none; | |
29 padding: 15px; | |
30 margin-top: 15px; | |
31 font-weight: bold; | |
32 -webkit-border-radius: 3px; | |
33 } | |
34 h1 { | |
35 color: #000000; | |
36 font-size: 160%; | |
37 font-weight: normal; | |
38 margin: 0 0 .6em 0; | |
39 } | |
40 .icon { | |
41 position: absolute; | |
42 } | |
43 #inner-box { | |
44 margin: 0 80px 0 30px; | |
Dan Beam
2013/05/07 08:07:16
RTL
| |
45 } | |
46 .main { | |
47 margin: 1em 0 0 95px; | |
Dan Beam
2013/05/07 08:07:16
RTL
| |
48 } | |
49 .open { | |
Dan Beam
2013/05/07 08:07:16
why is there a) a class named `open`, b) it actual
| |
50 display: none; | |
51 } | |
52 #proceed-button { | |
53 color: #ffffff; | |
Dan Beam
2013/05/07 08:07:16
white
| |
54 background-color: #4285f4; | |
Dan Beam
2013/05/07 08:07:16
use rgb()
| |
55 border: none; | |
56 padding: 15px; | |
57 margin-top: 5px; | |
58 font-weight: bold; | |
Dan Beam
2013/05/07 08:07:16
alpha sort rules
| |
59 -webkit-border-radius: 3px; | |
Dan Beam
2013/05/07 08:07:16
drop -webkit prefix, not needed, also put -webkit
| |
60 } | |
61 .small { | |
62 margin: 1em 0 0 95px; | |
Dan Beam
2013/05/07 08:07:16
RTL
| |
63 font-size: 87%; | |
64 } | |
65 .subtitle { | |
66 cursor: pointer; | |
67 font-size: 103%; | |
68 color: #4285f4; | |
69 } | |
70 .title { | |
71 margin: 0 0 0 95px; | |
Dan Beam
2013/05/07 08:07:16
RTL
| |
72 } | |
73 .twisty { | |
74 cursor: pointer; | |
75 float:left; | |
Dan Beam
2013/05/07 08:07:16
nit: missing space, RTL
| |
76 padding-right: 8px; | |
77 padding-top: 3px; | |
78 } | |
79 #what-to-do { | |
80 border-bottom: #f0f0f0 2px solid; | |
81 padding-bottom: 20px; | |
82 padding-top: 2px; | |
83 } | |
Dan Beam
2013/05/07 08:07:16
\n between all of these
| |
84 #what-to-do-title { | |
85 color: #000000; | |
Dan Beam
2013/05/07 08:07:16
s/#000000/black/
| |
86 font-size: 110%; | |
87 } | |
88 </style> | |
89 | |
90 <script> | |
Dan Beam
2013/05/07 08:07:16
move to external file
| |
91 // Should match SSLBlockingPageCommands in ssl_blocking_page.cc. | |
92 var CMD_DONT_PROCEED = 0; | |
Dan Beam
2013/05/07 08:07:16
nit:
/** @const */ var CMD = {
DONT_PROCEED: 0,
| |
93 var CMD_PROCEED = 1; | |
94 var CMD_FOCUS = 2; | |
95 var CMD_MORE = 3; | |
96 var CMD_UNDERSTAND = 4; | |
97 | |
98 var showedMore = false; | |
99 var showedUnderstand = false; | |
100 var keyPressState = 0; | |
101 var gainFocus = false; | |
102 | |
103 function $(o) { | |
104 return document.getElementById(o); | |
Dan Beam
2013/05/07 08:07:16
why are you duplicating this from util.js?
| |
105 } | |
106 | |
107 function sendCommand(cmd) { | |
108 window.domAutomationController.setAutomationId(1); | |
109 window.domAutomationController.send(cmd); | |
110 } | |
111 | |
112 function toggleMoreInfo() { | |
113 var status = !$('more-info-content').hidden; | |
114 $('more-info-content').hidden = status; | |
115 if (status) { | |
116 $('more-info-twisty-closed').style.display = 'inline'; | |
117 $('more-info-twisty-open').style.display = 'none'; | |
Dan Beam
2013/05/07 08:07:16
hidden
| |
118 } else { | |
119 $('more-info-twisty-open').style.display = 'inline'; | |
120 $('more-info-twisty-closed').style.display = 'none'; | |
121 if (!showedMore) { | |
122 sendCommand(CMD_MORE); | |
123 showedMore = true; | |
124 } | |
125 } | |
126 } | |
127 | |
128 function toggleUnderstand() { | |
129 var status = !$('understand-content').hidden; | |
130 $('understand-content').hidden = status; | |
131 if (status) { | |
132 $('understand-twisty-closed').style.display = 'inline'; | |
133 $('understand-twisty-open').style.display = 'none'; | |
Dan Beam
2013/05/07 08:07:16
use hidden
| |
134 } else { | |
135 $('understand-twisty-open').style.display = 'inline'; | |
136 $('understand-twisty-closed').style.display = 'none'; | |
137 if (!showedUnderstand) { | |
138 sendCommand(CMD_UNDERSTAND); | |
139 showedUnderstand = true; | |
140 } | |
141 } | |
142 } | |
143 | |
144 | |
145 // Supports UMA timing, which starts after the warning is first viewed. | |
146 function handleFocusEvent() { | |
147 if (gainFocus == false) { | |
Dan Beam
2013/05/07 08:07:16
if (!gainFocus) instead
| |
148 sendCommand(CMD_FOCUS); | |
149 gainFocus = true; | |
150 } | |
151 } | |
152 | |
153 // UI modifications and event listeners that take place after load. | |
154 function setupEvents() { | |
155 if (templateData.errorType == 'overridable') { | |
156 $('proceed').hidden = false; | |
157 $('proceed-button').addEventListener('click', function() { | |
158 sendCommand(CMD_PROCEED); | |
159 }); | |
160 } else { | |
161 document.addEventListener('keypress', keyPressHandler); | |
162 } | |
163 | |
164 $('exit-button').addEventListener('click', function() { | |
165 sendCommand(CMD_DONT_PROCEED); | |
166 }); | |
167 | |
168 $('more-info-title').addEventListener('click', function() { | |
169 toggleMoreInfo(); | |
Dan Beam
2013/05/07 08:07:16
$('more-info-title').addEventListener('click', tog
| |
170 }); | |
171 | |
172 $('more-info-twisty-open').addEventListener('click', function() { | |
173 toggleMoreInfo(); | |
174 }); | |
175 | |
176 $('more-info-twisty-closed').addEventListener('click', function() { | |
177 toggleMoreInfo(); | |
178 }); | |
179 | |
180 $('understand-title').addEventListener('click', function() { | |
181 toggleUnderstand(); | |
182 }); | |
183 | |
184 $('understand-twisty-open').addEventListener('click', function() { | |
185 toggleUnderstand(); | |
186 }); | |
187 | |
188 $('understand-twisty-closed').addEventListener('click', function() { | |
189 toggleUnderstand(); | |
190 }); | |
191 | |
192 document.addEventListener('contextmenu', function(e) { | |
Dan Beam
2013/05/07 08:07:16
I think there is already some shared functionality
| |
193 e.preventDefault(); | |
194 }); | |
195 } | |
196 | |
197 window.addEventListener('focus', handleFocusEvent); | |
198 document.addEventListener('DOMContentLoaded', setupEvents); | |
199 </script> | |
200 </head> | |
201 <body i18n-values=".style.fontFamily:fontfamily"> | |
202 <div id="box"> | |
203 <div id="inner-box"> | |
204 <div class="icon"> | |
205 <img src="firefox_icon.png" alt="SSL Error Icon"> | |
206 </div> | |
207 | |
208 <div class="title"> | |
209 <h1 class="titleText">This Connection is Untrusted</h1> | |
210 </div> | |
211 | |
212 <div class="main"> | |
213 <p> | |
214 You have asked Chrome to connect securely to <b><span | |
Dan Beam
2013/05/07 08:07:16
indent +2 \s on creation of text nodes
| |
215 i18n-values=".innerHTML:domain"></span></b>, but we can't confirm that | |
216 your connection is secure. | |
217 </p> | |
218 <p> | |
219 Normally, when you try to connect securely, sites will present | |
220 trusted identification to prove that you are going to the right place. | |
221 However, this site's identity can't be verified. | |
222 </p> | |
223 </div> | |
224 | |
225 <div class="small" id="what-to-do"> | |
226 <h2 id="what-to-do-title">What Should I Do?</h2> | |
227 <p>If you usually connect to this site without problems, this error could | |
Dan Beam
2013/05/07 08:07:16
wrap consistently, this doesn't match L214-221
| |
228 mean that someone is trying to impersonate the site, and you shouldn't | |
229 continue.</p> | |
230 <button id="exit-button">Get me out of here!</button> | |
231 </div> | |
232 | |
233 <div class="small"> | |
234 <img class="twisty" id="more-info-twisty-closed" | |
235 src="firefox_fancy_twisty_closed.png" border="0"> | |
236 <img class="twisty open" id="more-info-twisty-open" | |
237 src="firefox_fancy_twisty_open.png" border="0"> | |
238 <h2 id="more-info-title" class="subtitle">Technical Details</h2> | |
239 <div id="more-info-content" class="subtext" hidden> | |
240 <p i18n-values=".innerHTML:moreInfo1"></p> | |
241 <p i18n-values=".innerHTML:moreInfo2"></p> | |
242 <p i18n-values=".innerHTML:moreInfo3"></p> | |
243 <p i18n-values=".innerHTML:moreInfo4"></p> | |
244 <p i18n-values=".innerHTML:moreInfo5"></p> | |
Dan Beam
2013/05/07 08:07:16
do all these need to be innerHTML? instead of i18n
| |
245 </div> | |
246 </div> | |
247 | |
248 <div class="small" id="proceed" hidden> | |
249 <img class="twisty" id="understand-twisty-closed" | |
250 src="firefox_fancy_twisty_closed.png" border="0"> | |
251 <img class="twisty open" id="understand-twisty-open" | |
252 src="firefox_fancy_twisty_open.png" border="0"> | |
253 <h2 id="understand-title" class="subtitle">I Understand the Risks</h2> | |
254 <div id="understand-content" class="subtext" hidden> | |
255 <p>If you understand what's going on, you can click the button below to | |
256 proceed to the site. <b>Even if you trust the site, this error could | |
257 mean that someone is tampering with your connection.</b></p> | |
258 <p>Don't proceed to the site unless you know there's a good reason why | |
259 this site doesn't use trusted identification.</p> | |
260 <button id="proceed-button">Proceed Anyway</button> | |
261 </div> | |
262 </div> | |
263 </div> | |
264 </div> | |
265 | |
266 </body> | |
267 </html> | |
268 | |
OLD | NEW |