Update supervised user interstitial pages.

components/supervised_user_error_page/resources/supervised_user_block_interstitial.js

Index: components/supervised_user_error_page/resources/supervised_user_block_interstitial.js
diff --git a/components/supervised_user_error_page/resources/supervised_user_block_interstitial.js b/components/supervised_user_error_page/resources/supervised_user_block_interstitial.js
index 18a46c808a21ae4edb8c9e6c592a3960c019023f..285d98732fa4cf0e14dc0d006128f234f6447b0b 100644
--- a/components/supervised_user_error_page/resources/supervised_user_block_interstitial.js
+++ b/components/supervised_user_error_page/resources/supervised_user_block_interstitial.js
@@ -2,6 +2,53 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+var mobileNav = false;
+
+var showDetails = false;
+
+/**
+ * For small screen mobile the navigation buttons are moved
+ * below the advanced text.
+ */
+function onResize() {
+  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)';
+
+  // Check for change in nav status.
+  if (mobileNav != window.matchMedia(mediaQuery).matches) {
+    mobileNav = !mobileNav;
+    updateDetails();
+  }
+}
+
+function updateDetails() {
+  var helpOuterBox = $('details');
+  var mainContent = $('information-container');
+  var requestAccessButton = $('request-access-button');
+
+  // Handle showing the top content / details sections according to state.
+  if (mobileNav) {
+    mainContent.hidden = showDetails;
+    requestAccessButton.hidden = showDetails;
+    helpOuterBox.hidden = !showDetails;
+  } else if (showDetails) {
+    // Non mobile nav with visible details.
+    mainContent.hidden = false;
+    requestAccessButton.hidden = false;
+    helpOuterBox.hidden = false;
+  }
+}
+
+function setupMobileNav() {
+  window.addEventListener('resize', onResize);
+  onResize();
+}
+
+document.addEventListener('DOMContentLoaded', setupMobileNav);
+
 function sendCommand(cmd) {
   window.domAutomationController.setAutomationId(1);
   window.domAutomationController.send(cmd);
@@ -57,18 +104,16 @@ function initialize() {
     sendCommand('back');
   };
   $('show-details-link').onclick = function(event) {
-    $('details').hidden = false;
+    showDetails = true;
     $('show-details-link').hidden = true;
     $('hide-details-link').hidden = false;
-    $('information-container').classList.add('hidden-on-mobile');
-    $('request-access-button').classList.add('hidden-on-mobile');
+    updateDetails();
   };
   $('hide-details-link').onclick = function(event) {
-    $('details').hidden = true;
+    showDetails = false;
     $('show-details-link').hidden = false;
     $('hide-details-link').hidden = true;
-    $('information-container').classList.remove('hidden-on-mobile');
-    $('request-access-button').classList.remove('hidden-on-mobile');
+    updateDetails();
   };
   if (window.domAutomationController &&
         loadTimeData.getBoolean('showFeedbackLink')) {
@@ -93,7 +138,8 @@ function setRequestStatus(isSuccessful) {
     $('request-sent-message').hidden = false;
     $('show-details-link').hidden = true;
     $('hide-details-link').hidden = true;
-    $('details').hidden = true;
+    showDetails = false;
+    updateDetails();
     $('back-button').hidden = !window.domAutomationController;
     $('request-access-button').hidden = true;
   } else {