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..3f84fc0639d0e89aa2063b1de4169e8010c5c70b
--- /dev/null
+++ b/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.css
@@ -0,0 +1,121 @@
+/* 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;
+  font-family: Roboto-Regular,Helvetica;
+}
+
+button {
+  font-size: .933em;
+  font-weight: 600;
+  margin: 6px 0;
+  text-transform: uppercase;
+  transform: translatez(0);
+}
+
+#hide-details-button {
+  background: #EDEDED;

[felt, 2017/05/05 04:35:01]

nit: lowercase recommended if using hex

[edwardjung, 2017/05/08 16:27:33]

Done.

+  border: 0;
+  color: rgba(0,0,0,.54);

[felt, 2017/05/05 04:35:01]

nit: should there be spaces here? (and elsewhere when specifying rgba)

[edwardjung, 2017/05/08 16:27:33]

Done.

+  float: none;
+  margin: 10px 0 0;
+  padding: 10px 0;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+#details {
+  box-sizing: border-box;
+  display: none;
+  height: auto;
+  line-height: 1.48em;
+  margin: 0;
+  opacity: 1;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#details.hidden {
+  display: block;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding-bottom: 0;
+  transition: none;
+}
+
+#details-button {
+  color: rgba(0,0,0,.38);
+  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 {
+  left: calc(50% - 16px);
+  position: fixed;
+  top: calc(50% - 16px);
+}
+
+.giant #details,
+.giant #main-message {
+  display: none;
+}
+
+.icon {
+  background-image: url(../../../../../ui/webui/resources/images/warning.svg);
+  height: 20vh;
+  margin: 0 auto;
+  max-height: 32px;
+  max-width: 32px;
+  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: 12px;
+  width: 100%;
+}
+
+#main-content {
+  align-self: auto;
+  color: rgba(0,0,0,.54);
+  flex: 0 1 auto;
+  text-align: center;
+}
+
+#main-message {
+  display: none;
+}
+
+.nav-wrapper {
+  text-align: center;
+}
+
+/* Views that fit the details text */
+@media (min-height:190px) and (min-width:300px),
+       (min-height:300px) and (min-width:190px) {
+  #details,
+  #main-message {
+    display: block;
+  }
+}