Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(381)

Side by Side Diff: chrome/browser/resources/ssl/fancy_firefox.html

Issue 14752005: Finch experiments on SSL, malware, and phishing interstitials (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Browsertest trybot fix Created 7 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698