1 <!DOCTYPE html> 2 <html i18n-values="dir:textdirection"> 3 <head> 4 <meta charset="utf-8"> 5 <title i18n-content="title"></title> 6 <style type="text/css"> 7 8 html { 9 background-color: rgb(92, 0, 0); 10 background-image: url(roadblock_background.png); 11 background-repeat: repeat-x; 12 height: 100%; 13 } 14 15 html[dir='rtl'] #twisty-closed { 16 -webkit-transform: scaleX(-1); 17 } 18 19 body { 20 font-family: Helvetica, Arial, sans-serif; 21 margin: 0; 22 } 23 24 .box { 25 -webkit-box-shadow: 3px 3px 8px #200; 26 background-color: white; 27 border-radius: 5px; 28 color: black; 29 font-size: 10pt; 30 line-height: 16pt; 31 margin: 40px auto auto auto; 32 max-width: 800px; 33 min-width: 500px; 34 padding: 20px; 35 position: relative; 36 width: 80%; 37 } 38 39 .icon { 40 position:absolute; 41 } 42 43 .main { 44 margin: 1em 80px; 45 } 46 47 .more { 48 border-top: 1px solid #ccc; 49 margin: 0 80px; 50 padding-top: 6px; 51 } 52 53 .more-info-title { 54 margin-left: 5px; 55 margin-right: 5px; 56 } 57 58 .more-link { 59 color: #0000FF; 60 cursor: pointer; 61 text-decoration: underline; 62 } 63 64 .test-image { 65 float: right; 66 height: 140px; 67 padding-left: 30px; 68 padding-right: 30px; 69 width: 140px; 70 } 71 72 html[dir='rtl'] .test-image { 73 float: left; 74 } 75 76 .title { 77 color: #660000; 78 font-size: 18pt; 79 font-weight: bold; 80 line-height: 140%; 81 margin: 0 77px 6pt; 82 } 83 84 .twisty { 85 display: inline; 86 } 87 </style> 88 <script src="../../../../ui/webui/resources/js/assert.js"></script> 89 <script> 90 // Should match SSLBlockingPageCommands in ssl_blocking_page.cc. 91 var CMD_DONT_PROCEED = 0; 92 var CMD_PROCEED = 1; 93 var CMD_FOCUS = 2; 94 var CMD_MORE = 3; 95 96 var showedMore = false; 97 var keyPressState = 0; 98 var gainFocus = false; 99 var setupExperiment = false; 100 101 function $(o) { 102 return document.getElementById(o); 103 } 104 105 function sendCommand(cmd) { 106 window.domAutomationController.setAutomationId(1); 107 window.domAutomationController.send(cmd); 108 } 109 110 function toggleMoreInfo(collapse) { 111 $('more-info-long').hidden = collapse; 112 $('more-info-short').hidden = !collapse; 113 if (!collapse && !showedMore) { 114 sendCommand(CMD_MORE); 115 showedMore = true; 116 } 117 } 118 119 // This allows errors to be skippped by typing "proceed" into the page. 120 function keyPressHandler(e) { 121 var sequence = 'proceed'; 122 if (sequence.charCodeAt(keyPressState) == e.keyCode) { 123 keyPressState++; 124 if (keyPressState == sequence.length) { 125 sendCommand(CMD_PROCEED); 126 keyPressState = 0; 127 } 128 } else { 129 keyPressState = 0; 130 } 131 } 132 133 // Supports UMA timing, which starts after the warning is first viewed. 134 function handleFocusEvent() { 135 if (gainFocus == false) { 136 sendCommand(CMD_FOCUS); 137 gainFocus = true; 138 } 139 } 140 141 // UI modifications and event listeners that take place after load. 142 function setupEvents() { 143 if (templateData.errorType == "overridable") { 144 // This is the blocking page you can click through. 145 $('proceed-button').hidden = false; 146 $('proceed-button').addEventListener('click', function() { 147 sendCommand(CMD_PROCEED); 148 }); 149 } else { 150 document.addEventListener('keypress', keyPressHandler); 151 } 152 153 if ($('more-info-title').textContent == '') { 154 // Malware warning currently doesn't have more info. 155 $('more-info-short').hidden = true; 156 $('more-info-long').hidden = true; 157 $('twisty-closed').style.display = 'none'; 158 } else { 159 $('more-info-short').addEventListener('click', function() { 160 toggleMoreInfo(false); 161 }); 162 $('more-info-long').addEventListener('click', function() { 163 toggleMoreInfo(true); 164 }); 165 } 166 167 $('exit-button').addEventListener('click', function() { 168 sendCommand(CMD_DONT_PROCEED); 169 }); 170 171 document.addEventListener('contextmenu', function(e) { 172 e.preventDefault(); 173 }); 174 } 175 176 function setupIconExperiments() { 177 if (templateData.trialType == '') return; 178 assert(!setupExperiment); 179 setupExperiment = true; 180 var condition = templateData.trialType.split('SSL')[1].toLowerCase(); 181 if (/policeman|stoplight|badguy/.test(condition)) { 182 $('trial-' + condition).hidden = false; 183 $('more-info-short').style.webkitMarginEnd = '30px'; 184 $('more-info-long').style.webkitMarginEnd = '30px'; 185 } 186 } 187 188 window.addEventListener('focus', handleFocusEvent); 189 document.addEventListener('DOMContentLoaded', setupEvents); 190 document.addEventListener('DOMContentLoaded', setupIconExperiments); 191 </script> 192 </head> 193 <body> 194 <div class="box"> 195 <div class="icon"> 196 <img src="roadblock_icon.png" alt="SSL Error Icon" id="roadblock-icon"> 197 </div> 198 <div class="title" i18n-content="headLine"></div> 199 200 <!-- RHS images for the field trial. --> 201 <div id="trial-badguy" class="test-image" hidden> 202 <img src="badguy.png" alt="Bad guy"> 203 </div> 204 <div id="trial-policeman" class="test-image" hidden> 205 <img src="policeman.png" alt="Policeman"> 206 </div> 207 <div id="trial-stoplight" class="test-image" hidden> 208 <img src="stoplight.png" alt="Stoplight"> 209 </div> 210 211 <div class="main" i18n-values=".innerHTML:description;dir:textdirection"></div> 212 <div class="main" i18n-values=".innerHTML:reasonForNotProceeding"></div> 213 <div class="main"> 214 <button i18n-content="proceed" id="proceed-button" hidden></button> 215 <button i18n-content="exit" id="exit-button"></button> 216 </div> 217 <div class="more" id="more-info-short"> 218 <span class="more-link"> 219 <img id="twisty-closed" class="twisty" src="twisty_closed.png" 220 border="0"><span i18n-content="moreInfoTitle" id="more-info-title" 221 class="show-more-info-title"></span> 222 </span> 223 </div> 224 <div class="more" id="more-info-long" hidden> 225 <span class="more-link"> 226 <img class="twisty" src="twisty_open.png" border="0"><span 227 i18n-content="moreInfoTitle" class="more-info-title"></span> 228 </span> 229 <p i18n-values=".innerHTML:moreInfo1"></p> 230 <p i18n-values=".innerHTML:moreInfo2"></p> 231 <p i18n-values=".innerHTML:moreInfo3"></p> 232 <p i18n-values=".innerHTML:moreInfo4"></p> 233 <p i18n-values=".innerHTML:moreInfo5"></p> 234 </div> 235 </div> 236 </table> 237 </body> 238 </html> 239
