Chromium Code Reviews| Index: chrome/browser/resources/ssl/fancy_firefox.html |
| diff --git a/chrome/browser/resources/ssl/fancy_firefox.html b/chrome/browser/resources/ssl/fancy_firefox.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..f6b44483e120524e0771e690d698ecf602e974da |
| --- /dev/null |
| +++ b/chrome/browser/resources/ssl/fancy_firefox.html |
| @@ -0,0 +1,268 @@ |
| +<!DOCTYPE html> |
| +<!-- This SSL interstitial is designed to look like the Firefox SSL error, with |
| + permission from Firefox to copy the appearance of the page for an A/B |
| + experiment. --> |
| +<html i18n-values="dir:textdirection"> |
| +<head> |
| + <meta charset="utf-8"> |
| + <title>Untrusted Connection</title> |
| + <style> |
|
Dan Beam
2013/05/07 08:07:16
move to external file
|
| + body { |
| + background-color: #444444; |
|
Dan Beam
2013/05/07 08:07:16
#444
|
| + color: #555555; |
|
Dan Beam
2013/05/07 08:07:16
#555
|
| + margin: 0; |
| + padding: 0 1em; |
| + } |
| + #box { |
| + background-color: #ffffff; |
|
Dan Beam
2013/05/07 08:07:16
white
|
| + border-top: 9px solid #ffbd09; |
| + margin: 40px auto; |
| + max-width: 52em; |
| + min-width: 13em; |
| + padding: 50px 0px 30px 0px; |
|
Dan Beam
2013/05/07 08:07:16
50px 0 30px
|
| + position: relative; |
| + } |
| + #exit-button { |
| + color: #ffffff; |
|
Dan Beam
2013/05/07 08:07:16
white
|
| + background-color: #4285f4; |
| + border: none; |
| + padding: 15px; |
| + margin-top: 15px; |
| + font-weight: bold; |
| + -webkit-border-radius: 3px; |
| + } |
| + h1 { |
| + color: #000000; |
| + font-size: 160%; |
| + font-weight: normal; |
| + margin: 0 0 .6em 0; |
| + } |
| + .icon { |
| + position: absolute; |
| + } |
| + #inner-box { |
| + margin: 0 80px 0 30px; |
|
Dan Beam
2013/05/07 08:07:16
RTL
|
| + } |
| + .main { |
| + margin: 1em 0 0 95px; |
|
Dan Beam
2013/05/07 08:07:16
RTL
|
| + } |
| + .open { |
|
Dan Beam
2013/05/07 08:07:16
why is there a) a class named `open`, b) it actual
|
| + display: none; |
| + } |
| + #proceed-button { |
| + color: #ffffff; |
|
Dan Beam
2013/05/07 08:07:16
white
|
| + background-color: #4285f4; |
|
Dan Beam
2013/05/07 08:07:16
use rgb()
|
| + border: none; |
| + padding: 15px; |
| + margin-top: 5px; |
| + font-weight: bold; |
|
Dan Beam
2013/05/07 08:07:16
alpha sort rules
|
| + -webkit-border-radius: 3px; |
|
Dan Beam
2013/05/07 08:07:16
drop -webkit prefix, not needed, also put -webkit
|
| + } |
| + .small { |
| + margin: 1em 0 0 95px; |
|
Dan Beam
2013/05/07 08:07:16
RTL
|
| + font-size: 87%; |
| + } |
| + .subtitle { |
| + cursor: pointer; |
| + font-size: 103%; |
| + color: #4285f4; |
| + } |
| + .title { |
| + margin: 0 0 0 95px; |
|
Dan Beam
2013/05/07 08:07:16
RTL
|
| + } |
| + .twisty { |
| + cursor: pointer; |
| + float:left; |
|
Dan Beam
2013/05/07 08:07:16
nit: missing space, RTL
|
| + padding-right: 8px; |
| + padding-top: 3px; |
| + } |
| + #what-to-do { |
| + border-bottom: #f0f0f0 2px solid; |
| + padding-bottom: 20px; |
| + padding-top: 2px; |
| + } |
|
Dan Beam
2013/05/07 08:07:16
\n between all of these
|
| + #what-to-do-title { |
| + color: #000000; |
|
Dan Beam
2013/05/07 08:07:16
s/#000000/black/
|
| + font-size: 110%; |
| + } |
| + </style> |
| + |
| + <script> |
|
Dan Beam
2013/05/07 08:07:16
move to external file
|
| + // Should match SSLBlockingPageCommands in ssl_blocking_page.cc. |
| + var CMD_DONT_PROCEED = 0; |
|
Dan Beam
2013/05/07 08:07:16
nit:
/** @const */ var CMD = {
DONT_PROCEED: 0,
|
| + var CMD_PROCEED = 1; |
| + var CMD_FOCUS = 2; |
| + var CMD_MORE = 3; |
| + var CMD_UNDERSTAND = 4; |
| + |
| + var showedMore = false; |
| + var showedUnderstand = false; |
| + var keyPressState = 0; |
| + var gainFocus = false; |
| + |
| + function $(o) { |
| + return document.getElementById(o); |
|
Dan Beam
2013/05/07 08:07:16
why are you duplicating this from util.js?
|
| + } |
| + |
| + function sendCommand(cmd) { |
| + window.domAutomationController.setAutomationId(1); |
| + window.domAutomationController.send(cmd); |
| + } |
| + |
| + function toggleMoreInfo() { |
| + var status = !$('more-info-content').hidden; |
| + $('more-info-content').hidden = status; |
| + if (status) { |
| + $('more-info-twisty-closed').style.display = 'inline'; |
| + $('more-info-twisty-open').style.display = 'none'; |
|
Dan Beam
2013/05/07 08:07:16
hidden
|
| + } else { |
| + $('more-info-twisty-open').style.display = 'inline'; |
| + $('more-info-twisty-closed').style.display = 'none'; |
| + if (!showedMore) { |
| + sendCommand(CMD_MORE); |
| + showedMore = true; |
| + } |
| + } |
| + } |
| + |
| + function toggleUnderstand() { |
| + var status = !$('understand-content').hidden; |
| + $('understand-content').hidden = status; |
| + if (status) { |
| + $('understand-twisty-closed').style.display = 'inline'; |
| + $('understand-twisty-open').style.display = 'none'; |
|
Dan Beam
2013/05/07 08:07:16
use hidden
|
| + } else { |
| + $('understand-twisty-open').style.display = 'inline'; |
| + $('understand-twisty-closed').style.display = 'none'; |
| + if (!showedUnderstand) { |
| + sendCommand(CMD_UNDERSTAND); |
| + showedUnderstand = true; |
| + } |
| + } |
| + } |
| + |
| + |
| + // Supports UMA timing, which starts after the warning is first viewed. |
| + function handleFocusEvent() { |
| + if (gainFocus == false) { |
|
Dan Beam
2013/05/07 08:07:16
if (!gainFocus) instead
|
| + sendCommand(CMD_FOCUS); |
| + gainFocus = true; |
| + } |
| + } |
| + |
| + // UI modifications and event listeners that take place after load. |
| + function setupEvents() { |
| + if (templateData.errorType == 'overridable') { |
| + $('proceed').hidden = false; |
| + $('proceed-button').addEventListener('click', function() { |
| + sendCommand(CMD_PROCEED); |
| + }); |
| + } else { |
| + document.addEventListener('keypress', keyPressHandler); |
| + } |
| + |
| + $('exit-button').addEventListener('click', function() { |
| + sendCommand(CMD_DONT_PROCEED); |
| + }); |
| + |
| + $('more-info-title').addEventListener('click', function() { |
| + toggleMoreInfo(); |
|
Dan Beam
2013/05/07 08:07:16
$('more-info-title').addEventListener('click', tog
|
| + }); |
| + |
| + $('more-info-twisty-open').addEventListener('click', function() { |
| + toggleMoreInfo(); |
| + }); |
| + |
| + $('more-info-twisty-closed').addEventListener('click', function() { |
| + toggleMoreInfo(); |
| + }); |
| + |
| + $('understand-title').addEventListener('click', function() { |
| + toggleUnderstand(); |
| + }); |
| + |
| + $('understand-twisty-open').addEventListener('click', function() { |
| + toggleUnderstand(); |
| + }); |
| + |
| + $('understand-twisty-closed').addEventListener('click', function() { |
| + toggleUnderstand(); |
| + }); |
| + |
| + document.addEventListener('contextmenu', function(e) { |
|
Dan Beam
2013/05/07 08:07:16
I think there is already some shared functionality
|
| + e.preventDefault(); |
| + }); |
| + } |
| + |
| + window.addEventListener('focus', handleFocusEvent); |
| + document.addEventListener('DOMContentLoaded', setupEvents); |
| + </script> |
| +</head> |
| +<body i18n-values=".style.fontFamily:fontfamily"> |
| +<div id="box"> |
| + <div id="inner-box"> |
| + <div class="icon"> |
| + <img src="firefox_icon.png" alt="SSL Error Icon"> |
| + </div> |
| + |
| + <div class="title"> |
| + <h1 class="titleText">This Connection is Untrusted</h1> |
| + </div> |
| + |
| + <div class="main"> |
| + <p> |
| + 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
|
| + i18n-values=".innerHTML:domain"></span></b>, but we can't confirm that |
| + your connection is secure. |
| + </p> |
| + <p> |
| + Normally, when you try to connect securely, sites will present |
| + trusted identification to prove that you are going to the right place. |
| + However, this site's identity can't be verified. |
| + </p> |
| + </div> |
| + |
| + <div class="small" id="what-to-do"> |
| + <h2 id="what-to-do-title">What Should I Do?</h2> |
| + <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
|
| + mean that someone is trying to impersonate the site, and you shouldn't |
| + continue.</p> |
| + <button id="exit-button">Get me out of here!</button> |
| + </div> |
| + |
| + <div class="small"> |
| + <img class="twisty" id="more-info-twisty-closed" |
| + src="firefox_fancy_twisty_closed.png" border="0"> |
| + <img class="twisty open" id="more-info-twisty-open" |
| + src="firefox_fancy_twisty_open.png" border="0"> |
| + <h2 id="more-info-title" class="subtitle">Technical Details</h2> |
| + <div id="more-info-content" class="subtext" hidden> |
| + <p i18n-values=".innerHTML:moreInfo1"></p> |
| + <p i18n-values=".innerHTML:moreInfo2"></p> |
| + <p i18n-values=".innerHTML:moreInfo3"></p> |
| + <p i18n-values=".innerHTML:moreInfo4"></p> |
| + <p i18n-values=".innerHTML:moreInfo5"></p> |
|
Dan Beam
2013/05/07 08:07:16
do all these need to be innerHTML? instead of i18n
|
| + </div> |
| + </div> |
| + |
| + <div class="small" id="proceed" hidden> |
| + <img class="twisty" id="understand-twisty-closed" |
| + src="firefox_fancy_twisty_closed.png" border="0"> |
| + <img class="twisty open" id="understand-twisty-open" |
| + src="firefox_fancy_twisty_open.png" border="0"> |
| + <h2 id="understand-title" class="subtitle">I Understand the Risks</h2> |
| + <div id="understand-content" class="subtext" hidden> |
| + <p>If you understand what's going on, you can click the button below to |
| + proceed to the site. <b>Even if you trust the site, this error could |
| + mean that someone is tampering with your connection.</b></p> |
| + <p>Don't proceed to the site unless you know there's a good reason why |
| + this site doesn't use trusted identification.</p> |
| + <button id="proceed-button">Proceed Anyway</button> |
| + </div> |
| + </div> |
| + </div> |
| +</div> |
| + |
| +</body> |
| +</html> |
| + |