Fix menu behavior in phone mode.

chrome/common/extensions/docs/static/js/fatnav.js

Index: chrome/common/extensions/docs/static/js/fatnav.js
diff --git a/chrome/common/extensions/docs/static/js/fatnav.js b/chrome/common/extensions/docs/static/js/fatnav.js
index d70fc58f2b7e901a9f3cb761b50898de319d74c6..2cdf03b14adb94ef38a0061b2b096a0aefc9797e 100644
--- a/chrome/common/extensions/docs/static/js/fatnav.js
+++ b/chrome/common/extensions/docs/static/js/fatnav.js
@@ -8,10 +8,11 @@
 
 (function() {
 var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
-var isLargerThanPhone = window.matchMedia('screen and (min-width: 580px)').matches;
+var isLargerThanPhoneQuery = window.matchMedia('screen and (min-width: 581px)');
 
 var fatNav = document.querySelector('#fatnav');
 var search = document.querySelector('#search');
+var mobileNavCollasper = document.querySelector('#topnav .collase-icon');
 
 function hideActive(parentNode) {
   //parentNode.classList.remove('active');
@@ -41,35 +42,39 @@ var pillars = document.querySelectorAll('.pillar');
   });
 });
 
-if (isLargerThanPhone) {
-  search.addEventListener('click', function(e) {
-    e.stopPropagation();
+// Search button is used in tablet & desktop mode.
+// In phone mode search is embedded in the menu.
+search.addEventListener('click', function(e) {
+  if (!isLargerThanPhoneQuery.matches)
+    return;
+  e.stopPropagation();
 
-    // Only toggle if magnifying glass is clicked.
-    if (e.target.localName == 'img') {
-      var wasAlreadyOpen = this.classList.contains('active');
-      hideActive(fatNav); // de-activate other fatnav items.
-      wasAlreadyOpen ? this.classList.remove('active') :
-                       this.classList.add('active');
-      if (!wasAlreadyOpen) {
-        var searchField = document.getElementById('chrome-docs-cse-input');
-        var cse = google && google.search && google.search.cse && google.search.cse.element.getElement('results') || null;
-        if (cse)
-          cse.clearAllResults();
-        searchField.select();
-        searchField.focus();
-      }
+  // Only toggle if magnifying glass is clicked.
+  if (e.target.localName == 'img') {
+    var wasAlreadyOpen = this.classList.contains('active');
+    hideActive(fatNav); // de-activate other fatnav items.
+    wasAlreadyOpen ? this.classList.remove('active') :
+                     this.classList.add('active');
+    if (!wasAlreadyOpen) {
+      var searchField = document.getElementById('chrome-docs-cse-input');
+      var cse = google && google.search && google.search.cse &&
+                google.search.cse.element.getElement('results') || null;
+      if (cse)
+        cse.clearAllResults();
+      searchField.select();
+      searchField.focus();
     }
-  });
+  }
+});
 
-} else {
-  var mobileNavCollasper = document.querySelector('#topnav .collase-icon');
-  mobileNavCollasper.addEventListener('click', function(e) {
-    e.stopPropagation();
-    fatNav.classList.toggle('active');
-    this.classList.toggle('active');
-  });
-}
+// In phone mode, show the fatnav when the menu button is clicked.
+mobileNavCollasper.addEventListener('click', function(e) {
+  if (isLargerThanPhoneQuery.matches)
+    return;
+  e.stopPropagation();
+  fatNav.classList.toggle('active');
+  this.classList.toggle('active');
+});
 
 if (!isTouch) {
   // Hitting ESC hides fatnav menus.