Safe Browsing malware interstitial redesign field trial.

chrome/browser/resources/safe_browsing/malware_block_v2.css

Index: chrome/browser/resources/safe_browsing/malware_block_v2.css
diff --git a/chrome/browser/resources/safe_browsing/malware_block_v2.css b/chrome/browser/resources/safe_browsing/malware_block_v2.css
new file mode 100644
index 0000000000000000000000000000000000000000..682275416be3a23e0eb75c4508487969779843cd
--- /dev/null
+++ b/chrome/browser/resources/safe_browsing/malware_block_v2.css
@@ -0,0 +1,161 @@
+/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+body {
+  background-color: rgb(140, 0, 0);
+  background-image: url('images/stripe.png');

[Dan Beam, 2012/08/22 02:34:03]

combine into a background rule

[mattm, 2012/08/22 20:33:47]

done

+  font-family: Arial,Helvetica,sans-serif;

[Dan Beam, 2012/08/22 02:34:03]

spaces in front of commas, you might want to figure out which of these you
really what per platform and make this work with the user customized font as set
per settings.

[arv (Not doing code reviews), 2012/08/22 14:33:45]

Dan meant space after comma ;-)

[mattm, 2012/08/22 20:33:47]

Done.

+  margin: 0;
+}
+
+.cell {
+  padding: 40px;
+}
+
+.box {
+  -webkit-border-radius: 5px;
+  -webkit-box-shadow: 3px 3px 8px rgb(140, 0, 0);
+  background-color: white;
+  color: rgb(75, 75, 77);
+  font-size: 10pt;

[arv (Not doing code reviews), 2012/08/22 14:33:45]

Use px sizes

[mattm, 2012/08/22 20:33:47]

Done.

+  line-height: 16pt;
+  padding: 20px;
+  position: relative;
+  text-align: start;
+  width: 700px;
+}
+
+.float {
+  float: right;

[arv (Not doing code reviews), 2012/08/22 14:33:45]

Don't use float. Floats are hard to reason about

[mattm, 2012/08/22 20:33:47]

Do you mind if I leave the float for now?  I don't see anything prohibiting
floats in the style guide and I'd rather not block the change on reimplementing
this again.

+}
+
+html[dir=rtl] .float {

[Dan Beam, 2012/08/22 02:34:03]

nit: [dir='rtl'] (single quotes)

[mattm, 2012/08/22 20:33:47]

Done.

+  float: left;
+}
+
+.clear {
+  clear: both;
+}
+
+.logo {
+  max-height: 54px;
+  padding: 15px;
+}
+
+#headline {
+  color: #333;
+  font-size: 14pt;
+  font-weight: bold;
+  margin: 0 90px 0 20px;

[Dan Beam, 2012/08/22 02:34:03]

nothing that sets (margin/padding)-(left/right) will work in RTL.  you can see
what I mean by running:

  document.documentElement.dir = 'rtl';

in the console and/or running chrome in Hebrew or Arabic, with:

  LANG=he ./out/Debug/chrome # on Linux

one way to solve this is by using -webkit-(padding/margin)-*, let me give you an
example:

  /* 20px of left margin, 90px of right margin in LTR.
   * In RTL, 20px of right margin and 90px of left margin. */
  -webkit-margin-start: 20px;
  -webkit-margin-end: 90px;
  margin-bottom: 0;
  margin-top: 0;

[mattm, 2012/08/22 20:33:47]

Thanks, done.

+  margin-bottom: 6pt;

[Dan Beam, 2012/08/22 02:34:03]

combine with above margin statement

[mattm, 2012/08/22 20:33:47]

Done.

+}
+
+.main {
+  font-size: 14px;
+  margin: 5px 210px 10px 20px;
+}
+
+.dropdown {
+  font-size: 12px;
+  margin: 0 40px 0 20px;
+}
+
+#footer {
+  font-size: 12px;
+  margin: 0 20px 0 15px;
+}
+
+#learn-more-link {
+  font-size: 12px;
+}
+
+.submission {
+  margin: 15px 5px 15px 0;
+  padding: 0;
+}
+
+input {
+  margin: 0;

[arv (Not doing code reviews), 2012/08/22 14:33:45]

This should not be needed

[mattm, 2012/08/22 20:33:47]

Done.

+}
+
+button {
+  -webkit-box-shadow: inset 0 1px 0 0 rgb(129, 169, 243),

[arv (Not doing code reviews), 2012/08/22 14:33:45]

Can you import a shared button css file?

[mattm, 2012/08/22 20:33:47]

When I implement the new versions of the other sb interstitial pages I'll pull
out the common bits.

+      0 1px 2px rgba(0,0,0,0.2);

[Dan Beam, 2012/08/22 02:34:03]

nit: rgba(0, 0, 0, 0.2)

[mattm, 2012/08/22 20:33:47]

Done.

+  background: -webkit-linear-gradient(rgb(112, 154, 241),
+      rgb(108, 148, 240) 44%, rgb(95, 132, 238));
+  border: 1px solid rgb(53, 116, 203);
+  border-bottom: 1px solid rgb(53, 116, 203);

[Dan Beam, 2012/08/22 02:34:03]

border-bottom-color: (and below as well there are a couple of occurrences)

[mattm, 2012/08/22 20:33:47]

Done.

+  border-radius: 3px;
+  color: white;
+  cursor: pointer;
+  display: inline-block;
+  font-family: arial, helvetica, sans-serif;

[Dan Beam, 2012/08/22 02:34:03]

font: bold 14px/1 arial, helvetica, sans-serif;

[mattm, 2012/08/22 20:33:47]

Done.

+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1;
+  padding: 11px 38px 10px 38px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 0 rgb(72, 101, 228);
+}
+
+button:hover,
+button:focus {
+  -webkit-box-shadow: inset 0 1px 0 0 rgb(129, 169, 243),
+      0 1px 2px rgba(0,0,0,0.3);
+  background: -webkit-linear-gradient(rgb(165, 188, 245),
+      rgb(108, 148, 240) 70%, rgb(95, 132, 238));
+  border: 1px solid rgb(53, 116, 203);
+  border-bottom: 1px solid rgb(53, 116, 203);
+}
+
+button:active {
+  -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
+  background: -webkit-linear-gradient(rgb(112, 154, 241),
+      rgb(108, 148, 240) 44%, rgb(95, 132, 238));
+  border: 1px solid rgb(53, 116, 203);
+  border-bottom: 1px solid rgb(53, 116, 203);
+  border-top: 1px solid rgb(53, 116, 203);
+}
+
+hr {
+  margin: 0 20px 0 20px;

[Dan Beam, 2012/08/22 02:34:03]

shorten to 0 20px;

[mattm, 2012/08/22 20:33:47]

Done.

+}
+
+a {
+  color: rgb(17, 84, 204);
+}
+
+a:link {

[Dan Beam, 2012/08/22 02:34:03]

combine, i.e.

  a:link,
  a:visited {
    text-decoration: none;
  }

  a:active,
  a:hover {
    text-decoration: underline;
  }

[mattm, 2012/08/22 20:33:47]

Done.

+  text-decoration: none;

[arv (Not doing code reviews), 2012/08/22 14:33:45]

Why? I don't think we do this in any other part of the UI

[mattm, 2012/08/22 20:33:47]

In this case it's to de-emphasize the links so the user can focus on reading the
warning instead of immediately trying to click through.

+}
+
+a:visited {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:active {
+  text-decoration: underline;
+}
+
+.checkbox {
+  position: relative;
+  margin: 0 80px 0 5px
+}
+
+.checkbox input {
+  margin-left: 1px;
+  margin-top: 5px;
+  position: absolute;
+}
+
+.checkbox span {
+  -webkit-margin-start: 21px;
+  display: inline-block;
+}
+