Update SSL/malware/net error interstitial design

chrome/browser/resources/security_warnings/interstitial_v2_mobile.js

+// Copyright 2015 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;
+
+/**
+ * For small screen mobile the navigation buttons are moved
+ * below the advanced text.
+ */
+function onResize() {
+  var helpOuterBox = document.querySelector('#details');
+  var mainContent = document.querySelector('#main-content');
+  var mainFrame = document.querySelector('.interstitial-wrapper');
+  var navWrapper = document.querySelector('.nav-wrapper');
+
+  var mediaQuery = '(max-width: 420px) and (orientation:portrait),' +
+      '(max-width: 736px) and (max-height: 420px) and (orientation:landscape)';
+
+  if (window.matchMedia(mediaQuery).matches) {
+    if (navWrapper.parentNode != document.body) {
+      document.body.insertBefore(navWrapper, mainFrame.nextSibling);

[arv (Not doing code reviews), 2015/01/23 15:03:20]

Why is this done in js instead of css? Maybe you can use a flex box with the
order property instead?

[edwardjung, 2015/01/23 16:33:42]

That makes sense. My first implementation of this used flexbox but there some
issues on iOS 7. It was a month ago so I'll have a look again and see if I
missed something.

[edwardjung, 2015/01/23 22:04:25]

Done. Removed this DOM manipulation code.

+      mobileNav = true;
+    }
+  } else if (navWrapper.parentNode != mainContent) {
+    mainContent.appendChild(navWrapper);
+    mobileNav = false;
+  }
+}
+
+function setupMobileNav() {
+  window.addEventListener('resize', onResize);
+  onResize();
+}
+
+document.addEventListener('DOMContentLoaded', setupMobileNav);