New SSL blocking screen

chrome/browser/resources/ssl/blocking.css

+/* 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 {
+  padding-bottom: 10px;
+}
+
+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;
+}
+
+.inner-text {
+  color: #444;
+  line-height: 18px;
+  padding: 0 20px 20px 20px;
+  text-align: start;
+}
+
+/* Increase line height at higher resolutions. */
+@media (min-width: 641px) and (min-height: 641px) {
+  .inner-text {
+    line-height: 18px;

[Patrick Dubroy, 2013/09/12 13:12:26]

This code seems like it should be shared with other error pages as well.

[felt, 2013/09/16 00:05:21]

The other error pages don't have any text in this area, so they don't need this
part of the structure or layout.

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

Unless I'm mistaken, you shouldn't even need the rule for .ssl-help-box-inner
here, because it is already inside #help-box-inner, so it should inherit the
line-height.

I think what you probably want to do is use <p> for all of the explanatory
paragraphs on the page. Then you can have a style in neterror.css that styles
the line-height and margins of those.

+  }
+}
+
+/* Decrease padding at low sizes. */
+@media (max-width: 640px) {
+  .inner-text {
+    padding: 20px;
+  }
+}
+
+@media (max-height: 640px) {
+  .inner-text {
+    padding: 20px;
+  }
+}
+
+.outer-text {
+  -webkit-transition: height ease-in 218ms;
+  overflow: hidden;
+}
+
+.ssl-help-box-inner {
+  line-height: 18px;
+  padding-left: 20px;
+  padding-right: 20px;
+}