Intersitial page updates

+ New consistent sized icons.
+ Fix bug when page zooming in an out on desktop.
+ Add styling for secondary button for 'Show saved copy' experiment.

BUG=456746,422882

Review URL: https://codereview.chromium.org/916093003

Cr-Commit-Position: refs/heads/master@{#316225}

chrome/browser/resources/security_warnings/interstitial_v2.css

@@ -184,6 +184,12 @@ input[type=checkbox] {
       url(images/2x/stop_sign.png) 2x);
 }
 
+.secondary-button {
+  -webkit-margin-end: 16px;
+  background: #d9d9d9;
+  color: #696969;
+}
+
 .small-link {
   color: #696969;
   font-size: .875em;
@@ -305,6 +311,11 @@ input[type=checkbox] {
     border: 0;
     margin: 20px 0 0;
   }
+
+  .secondary-button {
+    -webkit-margin-end: 0;
+    margin-top: 16px;
+  }
 }
 
 /* Fixed nav. */
@@ -313,7 +324,7 @@ input[type=checkbox] {
        (min-width: 421px) and (max-width: 736px) and (min-height: 240px) and
        (max-height: 420px) and (orientation:landscape) {
 
-  body:not(.offline) .nav-wrapper {
+  body .nav-wrapper {
     background: #f7f7f7;
     bottom: 0;
     left: 0;
@@ -408,7 +419,7 @@ input[type=checkbox] {
 }
 
 @media (min-height: 400px) and (orientation:portrait) {
-  body:not(.safe-browsing-has-checkbox):not(.offline) .interstitial-wrapper {
+  body:not(.safe-browsing-has-checkbox) .interstitial-wrapper {
     margin-bottom: 145px;
   }
 }
@@ -457,7 +468,7 @@ input[type=checkbox] {
     height: 40px;
   }
 
-  body:not(.neterror) .icon {
+  body:not(.offline) .icon {
     height: 80px;
     width: 80px;
   }
@@ -485,17 +496,12 @@ input[type=checkbox] {
   .nav-wrapper {
     padding: 28px;
   }
-
-  .neterror .icon {
-    height: 80px;
-    width: 65.6px;
-  }
 }
 
 @media (min-width: 420px) and (max-width: 736px) and
        (min-height: 240px) and (max-height: 298px) and
        (orientation:landscape) {
-  body:not(.neterror) .icon {
+  body:not(.offline) .icon {
     height: 50px;
     width: 50px;
   }
@@ -563,7 +569,7 @@ input[type=checkbox] {
 @media (max-height: 240px) and (orientation: landscape),
        (max-height: 480px) and (orientation: portrait),
        (max-width: 419px) and (max-height: 323px) {
-  body:not(.neterror) .icon {
+  body:not(.offline) .icon {
     height: 56px;
     width: 56px;
   }
@@ -575,7 +581,8 @@ input[type=checkbox] {
 
 /* Small mobile screens. No fixed nav. */
 @media (max-height: 400px) and (orientation: portrait),
-       (max-height: 240px) and (orientation: landscape) {
+       (max-height: 240px) and (orientation: landscape),
+       (max-width: 419px) and (max-height: 360px) {
   .interstitial-wrapper {
     display: flex;
     flex-direction: column;

chrome/browser/resources/security_warnings/interstitial_v2_mobile.js

@@ -11,15 +11,24 @@ var mobileNav = false;
 function onResize() {
   var helpOuterBox = document.querySelector('#details');
   var mainContent = document.querySelector('#main-content');
-  var mediaQuery = '(max-width: 420px) and (orientation: portrait),' +
-      '(max-width: 736px) and (max-height: 420px) and (orientation: landscape)';
+  var mediaQuery = '(min-width: 300px) and (max-width: 420px) and ' +
+      '(orientation: portrait), (max-width: 736px) and ' +
+      '(max-height: 420px) and (orientation: landscape)';
+  var detailsHidden = helpOuterBox.classList.contains('hidden');
 
   // Check for change in nav status.
   if (mobileNav != window.matchMedia(mediaQuery).matches) {
-    // Show the top content and reset the details section to hidden.
-    mainContent.classList.toggle('hidden', false);
-    helpOuterBox.classList.toggle('hidden', true);
     mobileNav = !mobileNav;
+
+    // Handle showing the top content / details sections according to state.
+    if (mobileNav) {
+      mainContent.classList.toggle('hidden', !detailsHidden);
+      helpOuterBox.classList.toggle('hidden', detailsHidden);
+    } else if (!detailsHidden) {
+      // Non mobile nav with visible details.
+      mainContent.classList.remove('hidden');
+      helpOuterBox.classList.remove('hidden');
+    }
   }
 }
 

chrome/renderer/resources/neterror.css

@@ -48,19 +48,14 @@ a {
   content: -webkit-image-set(
       url(default_100_percent/common/error_network_generic.png) 1x,
       url(default_200_percent/common/error_network_generic.png) 2x);
-  height: 50px;
   padding-top: 20px;
-  width: 41px;
 }
 
 .icon-offline {
   content: -webkit-image-set(
       url(default_100_percent/offline/100-error-offline.png) 1x,
       url(default_200_percent/offline/200-error-offline.png) 2x);
-  height: 47px;
-  margin: 0 0 40px;
   position: relative;
-  width: 44px;
 }
 
 #content-top {
@@ -292,9 +287,8 @@ html[subframe] body {
   max-width: 600px;
   overflow: hidden;
   position: absolute;
-  top: 10px;
+  top: 35px;
   width: 44px;
-  z-index: 2;
 }
 
 .offline .runner-canvas {
@@ -304,6 +298,7 @@ html[subframe] body {
   overflow: hidden;
   position: absolute;
   top: 0;
+  z-index: 2;
 }
 
 .offline .controller {
@@ -349,4 +344,18 @@ html[subframe] body {
   .offline .interstitial-wrapper {
     margin-bottom: 20px;
   }
+
+  .icon-offline {
+    margin-bottom: 20px;
+  }
 }
+
+@media (max-height: 320px) and (orientation: landscape) {
+  .icon-offline {
+    margin-bottom: 0;
+  }
+
+  .offline .runner-container {
+    top: 10px;
+  }
+}
\ No newline at end of file

chrome/renderer/resources/neterror.js

@@ -152,6 +152,13 @@ function onDocumentLoad() {
       loadTimeData.valueExists('staleLoadButton') &&
           loadTimeData.getValue('staleLoadButton').msg) {
     controlButtonDiv.hidden = false;
+
+    // Set the secondary button state in the cases of two call to actions.
+    // Reload is secondary to stale load.
+    if (loadTimeData.valueExists('staleLoadButton') &&
+            loadTimeData.getValue('staleLoadButton').msg) {
+      reloadButton.classList.add('secondary-button');
+    }
   }
 
   // Add a main message paragraph.