Add experimental versions of the SSL interstitial

chrome/browser/resources/ssl/interstitial_v2.css

Index: chrome/browser/resources/ssl/interstitial_v2.css
diff --git a/chrome/browser/resources/ssl/interstitial_v2.css b/chrome/browser/resources/ssl/interstitial_v2.css
index c3040b3bd5a7407e9bf472b5820fb79cb4f14270..d9af5666a7e9d9e6cecf0387164fde57234b402a 100644
--- a/chrome/browser/resources/ssl/interstitial_v2.css
+++ b/chrome/browser/resources/ssl/interstitial_v2.css
@@ -17,6 +17,11 @@ body.safe-browsing {
   color: white;
 }
 
+body.yellow {
+  background-color: rgb(255, 220, 59);
+  color: black;
+}
+
 button {
   background: rgb(76, 142, 250);
   border: 0;
@@ -112,7 +117,8 @@ h1 {
 .safe-browsing a,
 .safe-browsing #details,
 .safe-browsing #details-button,
-.safe-browsing h1 {
+.safe-browsing h1,
+.safe-browsing small-link {

[Dan Beam, 2014/06/20 21:28:19]

nit: .small-link, probably? (unless you're actually using a <small-link>)

also

  .safe-browsing :-webkit-any(
      a, #details, #details-button, h1, small-link) {
    ...
  }

[felt, 2014/06/21 00:23:15]

What's the benefit of the :-webkit-any here?

[Dan Beam, 2014/06/21 00:42:52]

less code

   color: white;
 }
 
@@ -147,6 +153,14 @@ h1 {
       url('images/2x/brokenssl_red.png') 2x);
 }
 
+.ssl-guard .icon {
+  background-image: -webkit-image-set(
+      url('images/1x/brokenssl_guard.png') 1x,
+      url('images/2x/brokenssl_guard.png') 2x) !important;

[Dan Beam, 2014/06/20 21:28:19]

!important :(

[Dan Beam, 2014/06/20 21:28:19]

url('...') -> url(...) everywhere

[felt, 2014/06/21 00:23:15]

Done.

[felt, 2014/06/21 00:23:15]

this might be because I am clumsy at CSS. is there a better way to tell the
browser that this combination of two classes should take priority over the other
two?

[Dan Beam, 2014/06/21 00:42:52]

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

+  height: 104px;
+  width: 94px;
+}
+
 .styled-checkbox {
   float: left;
   height: 16px;
@@ -189,6 +203,20 @@ h1 {
   opacity: 1;
 }
 
+.yellow a,
+.yellow #details,
+.yellow #details-button,
+.yellow h1,
+.yellow small-link {

[Dan Beam, 2014/06/20 21:28:19]

:-webkit-any() again?

+  color: black;
+}
+
+.yellow .icon {
+  background-image: -webkit-image-set(
+      url('images/1x/brokenssl_yellow.png') 1x,
+      url('images/2x/brokenssl_yellow.png') 2x);
+}
+
 @media (max-width: 700px) {
   .interstitial-wrapper {
     padding: 0 10%;