Implement V2 design for quiet safe browsing interstitial

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

Index: components/security_interstitials/core/browser/resources/interstitial_webview_quiet.js
diff --git a/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.js b/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.js
index cb189d7128a27e5ff10207902dae683dac6b0792..e59990a73d4063d7af07ca1cd653054f15cd7aab 100644
--- a/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.js
+++ b/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.js
@@ -2,9 +2,37 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * Restores the interstitial content to the initial state if the window size
+ * switches to a small view.
+ */
+function onResize() {
+  var mediaQuery = '(max-height:11.25em) and (max-width:18.75em),' +
+       '(max-height:18.75em) and (max-width:11.25em),' +
+       '(max-height:5em), (max-width:5em)';
+
+  // Check for change in window size.
+  if (window.matchMedia(mediaQuery).matches) {
+    var hiddenDetails = $('details').classList.add(HIDDEN_CLASS);
+    $('main-content').classList.remove(HIDDEN_CLASS);
+  }
+}
+
 function initPage() {
   var isGiantWebView = loadTimeData.getBoolean('is_giant');
   document.body.className = isGiantWebView ? 'giant' : '';
+  preventDefaultOnPoundLinkClicks();
+
+  $('details-link').addEventListener('click', function(event) {
+    var hiddenDetails = $('details').classList.toggle(HIDDEN_CLASS);
+    $('main-content').classList.toggle(HIDDEN_CLASS, !hiddenDetails);
+  });
+
+  $('proceed-link').addEventListener('click', function(event) {
+    sendCommand(SecurityInterstitialCommandId.CMD_PROCEED);
+  });
+
+  window.addEventListener('resize', onResize);
 }
 
 document.addEventListener('DOMContentLoaded', initPage);