Add quiet safe browsing interstitial for WebView

components/security_interstitials/core/browser/resources/interstitial_webview_quiet.css

Index: components/security_interstitials/core/browser/resources/interstitial_webview_quiet.css
diff --git a/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.css b/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.css
new file mode 100644
index 0000000000000000000000000000000000000000..8bf753493bd0c97718cad93ef0d8c00bf7341063
--- /dev/null
+++ b/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.css
@@ -0,0 +1,112 @@
+/* Copyright 2017 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 {
+  margin: 0;
+}
+
+#details {
+  box-sizing: border-box;
+  height: auto;
+  line-height: 1.48em;
+  margin: 0;
+  opacity: 1;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#details.hidden {

[Dan Beam, 2017/05/19 19:14:22]

uhhh, why is .hidden doing this rather than just using the hidden attribute?

[edwardjung, 2017/05/19 19:38:18]

The details fade in / out rather than just disappearing immediately hence the
use of the class versus the attribute. 

+  display: block;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding-bottom: 0;
+  transition: none;
+}
+
+#details-link {
+  color: rgba(0,0,0,.38);
+  /* For V1, the details link is hidden. */
+  display: none;
+  text-decoration: underline;
+  text-transform: none;
+}
+
+h1 {
+  color: rgba(0,0,0,.38);
+  font-size: 1.037037em;
+  line-height: 1.4em;
+  margin: 8px 0 8px;
+}
+
+.giant .icon {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.giant #details,
+.giant #main-message {
+  display: none;
+}
+
+.icon {
+  background-image: url(images/blocked.svg);
+  height: 20vh;
+  margin: 0 auto;
+  max-height: 36px;
+  max-width: 36px;
+  min-height: 18px;
+  min-width: 18px;
+  opacity: .54;
+  width: 20vh;
+}
+
+.interstitial-wrapper {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.9em;
+  height: 100vh;
+  justify-content: center;
+  line-height: 1.6em;
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 16px;
+  width: 100%;
+}
+
+#main-content {
+  align-self: auto;
+  color: rgba(0, 0, 0, .54);
+  flex: 0 1 auto;
+  text-align: center;
+}
+
+@media (max-height:2em), (max-width:2em) {
+  .icon {
+    display: none;
+  }
+}
+
+@media (min-height:25em) and (min-width:37.5em),
+       (min-height:37.5em) and (min-width:25em) {
+  .icon {
+    height: 36px;
+    width: 36px;
+  }
+}
+
+/* Views that don't fit the details text. */
+@media (max-height:11.25em) and (max-width:18.75em),
+       (max-height:18.75em) and (max-width:11.25em),
+       (max-height:5em), (max-width:5em) {
+  #details,
+  #main-message {
+    display: none;
+  }
+}