Reland of SafeBrowsing: update interstitial layouts (patchset #1 id:1 of...

Reland of SafeBrowsing: update interstitial layouts (patchset #1 id:1 of https://codereview.chromium.org/2842633002/ )

Reason for revert:
Fixing build issues

Original issue's description:
> Revert of SafeBrowsing: update interstitial layouts (patchset #7 id:120001 of https://codereview.chromium.org/2788323002/ )
>
> Reason for revert:
> This looks like the cause of failures here: https://uberchromegw.corp.google.com/i/chromium.chromiumos/builders/Linux%20ChromiumOS%20Tests%20%281%29
>
> First seen here:
> https://uberchromegw.corp.google.com/i/chromium.chromiumos/builders/Linux%20ChromiumOS%20Tests%20%281%29/builds/37590
>
> Original issue's description:
> > SafeBrowsing: change interstitial sizes
> >
> > This CL changes the CSS max-height, max-width, etc. dimensions for
> > determining when to use mobile vs. desktop interstitial layouts. In
> > particular, it targets:
> >
> >  * wide and short views -> mobile landscape
> >  * skinny and tall views -> mobile portrait
> >  * wide and medium-height -> mobile landscape (w/ details on the same page)
> >
> > The phablet layout has been removed because it seems to actually be better
> > to just use the mobile layout instead.
> >
> > This also allows the mobile layout to remain centered even for very wide
> > views (parts of it were left-justified before), and reduces the
> > top-margin for the icon in the mobile layout, since we were leaving a
> > huge gap.
> >
> > BUG=707481
> >
> > Review-Url: https://codereview.chromium.org/2788323002
> > Cr-Commit-Position: refs/heads/master@{#466746}
> > Committed: https://chromium.googlesource.com/chromium/src/+/2f0527c9fcfdb3b53628acec1b3195563f71ec51
>
> TBR=edwardjung@chromium.org,nparker@chromium.org,ntfschr@chromium.org
> # Skipping CQ checks because original CL landed less than 1 days ago.
> NOPRESUBMIT=true
> NOTREECHECKS=true
> NOTRY=true
> BUG=707481
>
> Review-Url: https://codereview.chromium.org/2842633002
> Cr-Commit-Position: refs/heads/master@{#466811}
> Committed: https://chromium.googlesource.com/chromium/src/+/06dfd71d425ac5b0c7cef3060aee354946dc13b9

TBR=edwardjung@chromium.org,nparker@chromium.org,hcarmona@chromium.org
# Skipping CQ checks because original CL landed less than 1 days ago.
NOPRESUBMIT=true
NOTREECHECKS=true
NOTRY=true
BUG=707481

Review-Url: https://codereview.chromium.org/2837233002
Cr-Commit-Position: refs/heads/master@{#467789}

chrome/browser/safe_browsing/safe_browsing_blocking_page_test.cc

@@ -562,13 +562,26 @@ class SafeBrowsingBlockingPageBrowserTest
     if (!rfh)
       return VISIBILITY_ERROR;
 
-    std::unique_ptr<base::Value> value = content::ExecuteScriptAndGetValue(
-        rfh, "var node = document.getElementById('" + node_id +
-                 "');\n"
-                 "if (node)\n"
-                 "   node.offsetWidth > 0 && node.offsetHeight > 0;"
-                 "else\n"
-                 "  'node not found';\n");
+    // clang-format off
+    std::string jsFindVisibility = R"(
+      (function isNodeVisible(node) {
+        if (!node) return 'node not found';
+        if (node.offsetWidth === 0 || node.offsetHeight === 0) return false;
+        // Don't check opacity, since the css transition may actually leave
+        // opacity at 0 after it's been unhidden
+        if (node.classList.contains('hidden')) return false;
+        // Otherwise, we must check all parent nodes
+        var parentVisibility = isNodeVisible(node.parentElement);
+        if (parentVisibility === 'node not found') {
+          return true; // none of the parents are set invisible
+        }
+        return parentVisibility;
+      }(document.getElementById(')" + node_id + R"(')));)";
+    // clang-format on
+
+    std::unique_ptr<base::Value> value =
+        content::ExecuteScriptAndGetValue(rfh, jsFindVisibility);
+
     if (!value.get())
       return VISIBILITY_ERROR;
 

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

@@ -328,10 +328,10 @@ input[type=checkbox]:checked ~ .checkbox::before {
  * Details message replaces the top content in its own scrollable area.
  */
 
-@media (max-width: 420px) and (max-height: 736px) and (orientation: portrait) {
+@media (max-width: 420px) {
   #details-button {
     border: 0;
-    margin: 8px 0 0;
+    margin: 28px 0 0;
   }
 
   .secondary-button {
@@ -342,18 +342,17 @@ input[type=checkbox]:checked ~ .checkbox::before {
 
 /* Fixed nav. */
 @media (min-width: 240px) and (max-width: 420px) and
-       (min-height: 401px) and (max-height: 736px) and (orientation:portrait),
-       (min-width: 421px) and (max-width: 736px) and (min-height: 240px) and
-       (max-height: 420px) and (orientation:landscape) {
+       (min-height: 401px),
+       (min-width: 421px) and (min-height: 240px) and
+       (max-height: 736px) {
   body .nav-wrapper {
     background: #f7f7f7;
     bottom: 0;
     box-shadow: 0 -22px 40px rgb(247, 247, 247);
-    left: 0;
     margin: 0;
     max-width: 736px;
-    padding-left: 24px;
-    padding-right: 24px;
+    padding-left: 0px;
+    padding-right: 48px;
     position: fixed;
     z-index: 2;
   }
@@ -371,10 +370,14 @@ input[type=checkbox]:checked ~ .checkbox::before {
   #main-content {
     padding-bottom: 40px;
   }
+
+  #details {
+    padding-top: 5.5vh;
+  }
 }
 
-@media (max-width: 420px) and (max-height: 736px) and (orientation: portrait),
-       (max-width: 736px) and (max-height: 420px) and (orientation: landscape) {
+@media (max-width: 420px) and (orientation: portrait),
+       (max-height: 736px) {
   body {
     margin: 0 auto;
   }
@@ -414,6 +417,7 @@ input[type=checkbox]:checked ~ .checkbox::before {
     height: 0;
     opacity: 0;
     overflow: hidden;
+    padding-bottom: 0;
     transition: none;
   }
 
@@ -428,12 +432,12 @@ input[type=checkbox]:checked ~ .checkbox::before {
   }
 
   .icon {
-    margin-bottom: 12px;
+    margin-bottom: 5.69vh;
   }
 
   .interstitial-wrapper {
     box-sizing: border-box;
-    margin: 24px auto 12px;
+    margin: 7vh auto 12px;
     padding: 0 24px;
     position: relative;
   }
@@ -460,151 +464,34 @@ input[type=checkbox]:checked ~ .checkbox::before {
   }
 }
 
-@media (min-height: 400px) and (orientation:portrait) {
-  .interstitial-wrapper {
-    margin-bottom: 145px;
-  }
-}
-
-@media (min-height: 299px) and (orientation:portrait) {
-  .nav-wrapper {
-    padding-bottom: 16px;
-  }
-}
-
-@media (min-height: 405px) and (max-height: 736px) and
-       (max-width: 420px) and (orientation:portrait) {
-  .icon {
-    margin-bottom: 24px;
-  }
-
-  .interstitial-wrapper {
-    margin-top: 64px;
-  }
-}
-
-@media (min-height: 480px) and (max-width: 420px) and
-       (max-height: 736px) and (orientation: portrait),
-       (min-height: 338px) and (max-height: 420px) and (max-width: 736px) and
-       (orientation: landscape) {
-  .icon {
-    margin-bottom: 24px;
-  }
-
-  .nav-wrapper {
-    padding-bottom: 24px;
-  }
-}
-
-@media (min-height: 500px) and (max-width: 414px) and (orientation: portrait) {
+@media (min-width: 421px) and (min-height: 500px) and (max-height: 736px) {
   .interstitial-wrapper {
-    margin-top: 96px;
+    margin-top: 10vh;
   }
 }
 
-/* Phablet sizing */
-@media (min-width: 375px) and (min-height: 641px) and (max-height: 736px) and
-       (max-width: 414px) and (orientation: portrait) {
-  button,
-  [dir='rtl'] button,
-  .small-link {
-    font-size: 1em;
-    padding-bottom: 12px;
-    padding-top: 12px;
-  }
-
-  body:not(.offline) .icon {
-    height: 80px;
-    width: 80px;
-  }
-
-  #details-button {
-    margin-top: 28px;
-  }
-
-  h1 {
-    font-size: 1.7em;
-  }
-
-  .icon {
-    margin-bottom: 28px;
-  }
-
+@media (min-height: 400px) and (orientation:portrait) {
   .interstitial-wrapper {
-    padding: 28px;
-  }
-
-  .interstitial-wrapper p {
-    font-size: 1.05em;
-  }
-
-  .nav-wrapper {
-    padding: 28px;
+    margin-bottom: 145px;
   }
 }
 
-@media (min-width: 420px) and (max-width: 736px) and
-       (min-height: 240px) and (max-height: 298px) and
-       (orientation:landscape) {
-  body:not(.offline) .icon {
-    height: 50px;
-    width: 50px;
-  }
-
-  .icon {
-    padding-top: 0;
-  }
-
-  .interstitial-wrapper {
-    margin-top: 16px;
-  }
-
+@media (min-height: 299px) {
   .nav-wrapper {
-    padding: 0 24px 8px;
+    padding-bottom: 16px;
   }
 }
 
-@media (min-width: 420px) and (max-width: 736px) and
-       (min-height: 240px) and (max-height: 420px) and
-       (orientation:landscape) {
-  #details-button {
-    margin: 0;
-  }
-
+@media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and
+       (orientation: portrait) {
   .interstitial-wrapper {
-    margin-bottom: 70px;
-  }
-
-  .nav-wrapper {
-    margin-top: 0;
-  }
-
-  #extended-reporting-opt-in {
-    margin-top: 0;
+    margin-top: 7vh;
   }
 }
 
-/* Phablet landscape */
-@media (min-width: 680px) and (max-height: 414px) {
+@media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) {
   .interstitial-wrapper {
-    margin: 24px auto;
-  }
-
-  .nav-wrapper {
-    margin: 16px auto 0;
-  }
-}
-
-@media (max-height: 240px) and (orientation: landscape),
-       (max-height: 480px) and (orientation: portrait),
-       (max-width: 419px) and (max-height: 323px) {
-  body:not(.offline) .icon {
-    height: 56px;
-    width: 56px;
-  }
-
-  .icon {
-    margin-bottom: 16px;
+    margin-top: 10vh;
   }
 }
 

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

@@ -12,10 +12,9 @@ function onResize() {
   var helpOuterBox = document.querySelector('#details');
   var mainContent = document.querySelector('#main-content');
   var mediaQuery = '(min-width: 240px) and (max-width: 420px) and ' +
-      '(max-height: 736px) and (min-height: 401px) and ' +
-      '(orientation: portrait), (max-width: 736px) and ' +
-      '(max-height: 420px) and (min-height: 240px) and ' +
-      '(min-width: 421px) and (orientation: landscape)';
+      '(min-height: 401px), ' +
+      '(max-height: 736px) and (min-height: 240px) and ' +
+      '(min-width: 421px)';
 
   var detailsHidden = helpOuterBox.classList.contains('hidden');
   var runnerContainer = document.querySelector('.runner-container');