New SSL blocking screen

chrome/browser/resources/ssl/blocking.css

Index: chrome/browser/resources/ssl/blocking.css
diff --git a/chrome/browser/resources/ssl/blocking.css b/chrome/browser/resources/ssl/blocking.css
new file mode 100644
index 0000000000000000000000000000000000000000..e8462eb3d73075134ebad8cd61b8a97f8a7cca38
--- /dev/null
+++ b/chrome/browser/resources/ssl/blocking.css
@@ -0,0 +1,63 @@
+/* Copyright 2013 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. */
+
+.explanation-par {
+  color: #444;

[Patrick Dubroy, 2013/09/18 15:01:35]

This should probably be a more general rule that sets the default text style. It
shouldn't have to be done on a paragraph-by-paragraph basis.

[felt, 2013/10/18 05:53:12]

This rule is needed to override the styling set in neterror.css that makes this
area of the error centered & a darker color. Since the other paragraphs in the
ssl error don't need to override that styling, this ends up only being used for
this paragraph.

[Patrick Dubroy, 2013/10/21 07:48:50]

Almost all the text on the page is #444 and align: left. I think it would make
more sense to change the rules in neterror.css to be something like :

#content-top h1 {
  color: #666;
  text-align: center;
}

That way if we someday have an error page that has two explanation paragraphs,
we don't end up having to add more manual rules to get the right styling.

[felt, 2013/10/21 13:08:34]

Done, although note I had to put the buttons in a new <div id='buttons'> to make
the buttons be centered too.

+  padding: 0 20px 20px 20px;
+  text-align: start;
+}
+
+h2 {
+  color: #666;
+  font-size: 1.2em;
+  font-weight: normal;
+  margin: 10px 0;
+}
+
+#icon-lock {
+  content: -webkit-image-set(
+      url('locked_page_100.png') 1x,
+      url('locked_page_200.png') 2x);
+  padding-bottom: 15px;
+  padding-top: 10px;
+}
+
+/* Increase line height at higher resolutions. */
+@media (min-width: 641px) and (min-height: 641px) {
+  .explanation-par {
+    line-height: 18px;
+  }
+  .ssl-help-box-inner {
+    line-height: 18px;
+  }
+}
+
+/* Decrease padding at low sizes. */
+@media (max-width: 640px) {
+  .explanation-par {
+    padding: 0 20px 20px 20px;

[Patrick Dubroy, 2013/09/18 15:01:35]

This is exactly the same as the default padding that's at the top of the page.

[felt, 2013/10/18 05:53:12]

That was a mistake, decreased.

+  }
+  .ssl-help-box-inner {
+    padding: 0 20px;

[Patrick Dubroy, 2013/09/18 15:01:35]

This is also the same as the default padding.

[felt, 2013/10/18 05:53:12]

That was a mistake, decreased.

+  }
+}
+
+/* Decrease padding at low sizes. */
+@media (max-height: 640px) {
+  .explanation-par {
+    padding: 0 10px 10px 10px;
+  }
+  .ssl-help-box-inner {
+    padding: 0 20px;

[Patrick Dubroy, 2013/09/18 15:01:35]

Same again.

[felt, 2013/10/18 05:53:12]

That was a mistake, decreased.

+  }
+}
+
+.outer-explanation-par {

[Patrick Dubroy, 2013/09/18 15:01:35]

Where is the class even used?

[felt, 2013/10/18 05:53:12]

Good catch, removed.

+  -webkit-transition: height ease-in 218ms;
+  overflow: hidden;
+}
+
+.ssl-help-box-inner {
+  padding: 0 20px;

[Patrick Dubroy, 2013/09/18 15:01:35]

Won't this cause an *additional* 20px padding on the left and right, since
#help-box-inner already has 20px padding?

[felt, 2013/10/18 05:53:12]

Yes, that's exactly why I added ssl-help-box-inner in addition to
help-box-inner. This error page needs more padding because it has more text.

+}