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

Unified 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 side-by-side diff with in-line comments
Download patch
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>
+

Powered by Google App Engine
This is Rietveld 408576698