OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html i18n-values="dir:textdirection"> | 2 <html i18n-values="dir:textdirection"> |
3 <head> | 3 <head> |
4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
5 <title i18n-content="title"></title> | 5 <title i18n-content="title"></title> |
6 <style type="text/css"> | 6 <style type="text/css"> |
7 | 7 |
8 html { | 8 html { |
9 background-color: rgb(92, 0, 0); | 9 background-color: rgb(92, 0, 0); |
10 background-image: url(ssl_roadblock_background.png); | 10 background-image: url(roadblock_background.png); |
11 background-repeat: repeat-x; | 11 background-repeat: repeat-x; |
12 height: 100%; | 12 height: 100%; |
13 } | 13 } |
14 | 14 |
15 html[dir='rtl'] #twisty-closed { | 15 html[dir='rtl'] #twisty-closed { |
16 -webkit-transform: scaleX(-1); | 16 -webkit-transform: scaleX(-1); |
17 } | 17 } |
18 | 18 |
19 body { | 19 body { |
20 font-family: Helvetica, Arial, sans-serif; | 20 font-family: Helvetica, Arial, sans-serif; |
21 margin: 0; | 21 margin: 0; |
22 } | 22 } |
23 | 23 |
24 .box { | 24 .box { |
25 -webkit-box-shadow: 3px 3px 8px #200; | 25 -webkit-box-shadow: 3px 3px 8px #200; |
26 background-color: white; | 26 background-color: white; |
27 border-radius: 5px; | 27 border-radius: 5px; |
28 color: black; | 28 color: black; |
29 font-size: 10pt; | 29 font-size: 10pt; |
30 line-height: 16pt; | 30 line-height: 16pt; |
31 margin: 40px auto auto auto; | 31 margin: 40px auto auto auto; |
32 max-width: 800px; | 32 max-width: 800px; |
33 min-width: 500px; | 33 min-width: 500px; |
34 padding: 20px; | 34 padding: 20px; |
35 position: relative; | 35 position: relative; |
36 width: 80%; | 36 width: 80%; |
37 } | 37 } |
38 | 38 |
39 .icon { | 39 .icon { |
40 position:absolute; | 40 position:absolute; |
41 } | 41 } |
42 | 42 |
43 .main { | 43 .main { |
44 margin: 1em 80px; | 44 margin: 1em 80px; |
45 } | 45 } |
46 | 46 |
47 .more { | 47 .more { |
48 border-top: 1px solid #ccc; | 48 border-top: 1px solid #ccc; |
49 margin: 0 80px; | 49 margin: 0 80px; |
50 padding-top: 6px; | 50 padding-top: 6px; |
51 } | 51 } |
52 | 52 |
53 .more-info-title { | 53 .more-info-title { |
54 margin-left: 5px; | 54 margin-left: 5px; |
55 margin-right: 5px; | 55 margin-right: 5px; |
56 } | 56 } |
57 | 57 |
58 .more-link { | 58 .more-link { |
59 color: #0000FF; | 59 color: #0000FF; |
60 cursor: pointer; | 60 cursor: pointer; |
61 text-decoration: underline; | 61 text-decoration: underline; |
62 } | 62 } |
63 | 63 |
64 .title { | 64 .title { |
65 color: #660000; | 65 color: #660000; |
66 font-size: 18pt; | 66 font-size: 18pt; |
67 font-weight: bold; | 67 font-weight: bold; |
68 line-height: 140%; | 68 line-height: 140%; |
69 margin: 0 77px 6pt; | 69 margin: 0 77px 6pt; |
70 } | 70 } |
71 | 71 |
72 #trial-badguy { | |
73 float:right; | |
74 height:150px; | |
75 padding-left: 10px; | |
76 padding-right: 30px; | |
77 width:196px; | |
78 } | |
79 | |
80 #trial-policeman { | |
81 float:right; | |
82 height:150px; | |
83 padding-left: 10px; | |
84 padding-right: 30px; | |
85 width:150px; | |
86 } | |
87 | |
88 #trial-stoplight { | |
89 float:right; | |
90 height:150px; | |
91 padding-left: 20px; | |
92 padding-right: 30px; | |
93 width:60px; | |
94 } | |
95 | |
72 .twisty { | 96 .twisty { |
73 display: inline; | 97 display: inline; |
74 } | 98 } |
75 </style> | 99 </style> |
76 | 100 |
77 <script> | 101 <script> |
78 // Should match SSLBlockingPageCommands in ssl_blocking_page.cc. | 102 // Should match SSLBlockingPageCommands in ssl_blocking_page.cc. |
79 var CMD_DONT_PROCEED = 0; | 103 var CMD_DONT_PROCEED = 0; |
80 var CMD_PROCEED = 1; | 104 var CMD_PROCEED = 1; |
81 var CMD_FOCUS = 2; | 105 var CMD_FOCUS = 2; |
82 var CMD_MORE = 3; | 106 var CMD_MORE = 3; |
83 | 107 |
84 var showedMore = false; | 108 var showedMore = false; |
85 var keyPressState = 0; | 109 var keyPressState = 0; |
86 var gainFocus = false; | 110 var gainFocus = false; |
87 | 111 |
88 function $(o) { | 112 function $(o) { |
89 return document.getElementById(o); | 113 return document.getElementById(o); |
90 } | 114 } |
91 | 115 |
92 function sendCommand(cmd) { | 116 function sendCommand(cmd) { |
93 window.domAutomationController.setAutomationId(1); | 117 window.domAutomationController.setAutomationId(1); |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
145 } else { | 169 } else { |
146 $('more-info-short').addEventListener('click', function() { | 170 $('more-info-short').addEventListener('click', function() { |
147 toggleMoreInfo(false); | 171 toggleMoreInfo(false); |
148 }); | 172 }); |
149 $('more-info-long').addEventListener('click', function() { | 173 $('more-info-long').addEventListener('click', function() { |
150 toggleMoreInfo(true); | 174 toggleMoreInfo(true); |
151 }); | 175 }); |
152 } | 176 } |
153 | 177 |
154 $('exit-button').addEventListener('click', function() { | 178 $('exit-button').addEventListener('click', function() { |
155 sendCommand(CMD_DONT_PROCEED); | 179 sendCommand(CMD_DONT_PROCEED); |
156 }); | 180 }); |
157 | 181 |
158 document.addEventListener('contextmenu', function(e) { | 182 document.addEventListener('contextmenu', function(e) { |
159 e.preventDefault(); | 183 e.preventDefault(); |
160 }); | 184 }); |
161 } | 185 } |
162 | 186 |
187 function setupFinch() { | |
James Hawkins
2013/05/01 23:21:45
setup<Some other name>
felt
2013/05/02 16:07:12
Done.
| |
188 var condition = templateData.trialType; | |
189 if (condition == '' || condition == 'Default') { | |
190 return; // This is the most common case. | |
191 } else if (condition == 'Condition18SSLNoImages') { | |
192 $('roadblock-icon').style.display = 'none'; | |
193 } else if (condition == 'Condition19SSLPoliceman') { | |
194 $('trial-policeman').hidden = false; | |
195 $('more-info-short').style.marginRight = '30px'; | |
196 $('more-info-long').style.marginRight = '30px'; | |
197 } else if (condition == 'Condition20SSLStoplight') { | |
198 $('trial-stoplight').hidden = false; | |
199 $('more-info-short').style.marginRight = '30px'; | |
200 $('more-info-long').style.marginRight = '30px'; | |
201 } else if (condition == 'Condition21SSLBadGuy') { | |
202 $('trial-badguy').hidden = false; | |
203 $('more-info-short').style.marginRight = '30px'; | |
204 $('more-info-long').style.marginRight = '30px'; | |
205 } | |
206 } | |
207 | |
163 window.addEventListener('focus', handleFocusEvent); | 208 window.addEventListener('focus', handleFocusEvent); |
164 document.addEventListener('DOMContentLoaded', setupEvents); | 209 document.addEventListener('DOMContentLoaded', setupEvents); |
210 document.addEventListener('DOMContentLoaded', setupFinch); | |
165 </script> | 211 </script> |
166 </head> | 212 </head> |
167 <body> | 213 <body> |
168 <div class="box"> | 214 <div class="box"> |
169 <div class="icon"> | 215 <div class="icon"> |
170 <img src="ssl_roadblock_icon.png" alt="SSL Error Icon"> | 216 <img src="roadblock_icon.png" alt="SSL Error Icon" id="roadblock-icon"> |
171 </div> | 217 </div> |
172 <div class="title" i18n-content="headLine"></div> | 218 <div class="title" i18n-content="headLine"></div> |
219 | |
220 <!-- RHS images for the field trial. --> | |
221 <div id="trial-badguy" hidden> | |
222 <img src="badguy.png" alt="Bad guy"> | |
223 </div> | |
224 <div id="trial-policeman" hidden> | |
225 <img src="policeman.png" alt="Policeman"> | |
226 </div> | |
227 <div id="trial-stoplight" hidden> | |
228 <img src="stoplight.png" alt="Stoplight"> | |
229 </div> | |
230 | |
173 <div class="main" i18n-values=".innerHTML:description;dir:textdirection"></d iv> | 231 <div class="main" i18n-values=".innerHTML:description;dir:textdirection"></d iv> |
174 <div class="main" i18n-values=".innerHTML:reasonForNotProceeding"></div> | 232 <div class="main" i18n-values=".innerHTML:reasonForNotProceeding"></div> |
175 <div class="main"> | 233 <div class="main"> |
176 <button i18n-content="proceed" id="proceed-button" hidden></button> | 234 <button i18n-content="proceed" id="proceed-button" hidden></button> |
177 <button i18n-content="exit" id="exit-button"></button> | 235 <button i18n-content="exit" id="exit-button"></button> |
178 </div> | 236 </div> |
179 <div class="more" id="more-info-short"> | 237 <div class="more" id="more-info-short"> |
180 <span class="more-link"> | 238 <span class="more-link"> |
181 <img id="twisty-closed" class="twisty" src="twisty_closed.png" | 239 <img id="twisty-closed" class="twisty" src="twisty_closed.png" |
182 border="0"><span i18n-content="moreInfoTitle" id="more-info-title" | 240 border="0"><span i18n-content="moreInfoTitle" id="more-info-title" |
183 class="show-more-info-title"></span> | 241 class="show-more-info-title"></span> |
184 </span> | 242 </span> |
185 </div> | 243 </div> |
186 <div class="more" id="more-info-long" hidden> | 244 <div class="more" id="more-info-long" hidden> |
187 <span class="more-link"> | 245 <span class="more-link"> |
188 <img class="twisty" src="twisty_open.png" border="0"><span | 246 <img class="twisty" src="twisty_open.png" border="0"><span |
189 i18n-content="moreInfoTitle" class="more-info-title"></span> | 247 i18n-content="moreInfoTitle" class="more-info-title"></span> |
190 </span> | 248 </span> |
191 <p i18n-values=".innerHTML:moreInfo1"></p> | 249 <p i18n-values=".innerHTML:moreInfo1"></p> |
192 <p i18n-values=".innerHTML:moreInfo2"></p> | 250 <p i18n-values=".innerHTML:moreInfo2"></p> |
193 <p i18n-values=".innerHTML:moreInfo3"></p> | 251 <p i18n-values=".innerHTML:moreInfo3"></p> |
194 <p i18n-values=".innerHTML:moreInfo4"></p> | 252 <p i18n-values=".innerHTML:moreInfo4"></p> |
195 <p i18n-values=".innerHTML:moreInfo5"></p> | 253 <p i18n-values=".innerHTML:moreInfo5"></p> |
196 </div> | 254 </div> |
197 </div> | 255 </div> |
198 <span id="error-type" i18n-content="errorType" hidden></span> | 256 <span id="error-type" i18n-content="errorType" hidden></span> |
199 </table> | 257 </table> |
200 </body> | 258 </body> |
201 </html> | 259 </html> |
OLD | NEW |