Update supervised user interstitial pages.

components/supervised_user_error_page/resources/supervised_user_block_interstitial.js

 // Copyright 2014 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.
 
+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);
 }
 
 function makeImageSet(url1x, url2x) {
   return '-webkit-image-set(url(' + url1x + ') 1x, url(' + url2x + ') 2x)';
 }
 
 function initialize() {
@@ skipping 35 matching lines @@
           'secondCustodianEmail');
     }
   }
   var showDetailsLink = loadTimeData.getString('showDetailsLink');
   $('show-details-link').hidden = !showDetailsLink;
   $('back-button').hidden = showDetailsLink || !window.domAutomationController;
   $('back-button').onclick = function(event) {
     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')) {
     $('feedback-link').onclick = function(event) {
       sendCommand('feedback');
     };
   } else {
     $('feedback').hidden = true;
   }
 }
 
 /**
  * Updates the interstitial to show that the request failed or was sent.
  * @param {boolean} isSuccessful Whether the request was successful or not.
  */
 function setRequestStatus(isSuccessful) {
   console.log('setRequestStatus(' + isSuccessful +')');
   $('block-page-header').hidden = true;
   $('block-page-message').hidden = true;
   if (isSuccessful) {
     $('request-failed-message').hidden = true;
     $('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 {
     $('request-failed-message').hidden = false;
     $('request-access-button').hidden = false;
   }
 }
 
 document.addEventListener('DOMContentLoaded', initialize);