Bug 1420771 - Remove global footer

21 files changed, 309 insertions, 334 deletions

diff --git a/Bugzilla/Search/Saved.pm b/Bugzilla/Search/Saved.pm
index 23507c039..1511cd87b 100644
--- a/Bugzilla/Search/Saved.pm
+++ b/Bugzilla/Search/Saved.pm
@@ -368,9 +368,10 @@ The CGI parameters for the search, as a string.
 
 =item C<link_in_footer>
 
-Whether or not this search should be displayed in the footer for the
+Whether or not this search should be displayed in the Search Bar for the
 I<current user> (not the owner of the search, but the person actually
-using Bugzilla right now).
+using Bugzilla right now). It says "footer" for historical reasons as the link
+was previously displayed on the global footer.
 
 =item C<type>
 
diff --git a/buglist.cgi b/buglist.cgi
index e650dfcf6..4d3ad1a86 100755
--- a/buglist.cgi
+++ b/buglist.cgi
@@ -213,7 +213,8 @@ sub LookupNamedQuery {
 # query - The query part of the buglist.cgi URL, unencoded. Must not be
 #         empty, or we will throw a UserError.
 # link_in_footer (optional) - 1 if the Named Query should be
-# displayed in the user's footer, 0 otherwise.
+# displayed in the user's Search Bar, 0 otherwise. It says "footer" for
+# historical reasons as the link was previously displayed on the global footer.
 #
 # All parameters are validated before passing them into the database.
 #
diff --git a/extensions/BMO/template/en/default/bug/create/create-client-bounty.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-client-bounty.html.tmpl
index 5d9d20be8..799b2b35b 100644
--- a/extensions/BMO/template/en/default/bug/create/create-client-bounty.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-client-bounty.html.tmpl
@@ -81,9 +81,6 @@
 #client_bounty_form .form_section {
   margin-bottom: 10px;
 }
-#useful-links {
-  display: none;
-}
 [% END %]
 
 [% inline_javascript = BLOCK %]
diff --git a/extensions/BMO/template/en/default/hook/global/footer-intro.html.tmpl b/extensions/BMO/template/en/default/hook/global/footer-intro.html.tmpl
deleted file mode 100644
index cb157ec48..000000000
--- a/extensions/BMO/template/en/default/hook/global/footer-intro.html.tmpl
+++ /dev/null
@@ -1,16 +0,0 @@
-[%# This Source Code Form is subject to the terms of the Mozilla Public
-  # License, v. 2.0. If a copy of the MPL was not distributed with this
-  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-  #
-  # This Source Code Form is "Incompatible With Secondary Licenses", as
-  # defined by the Mozilla Public License, v. 2.0.
-  #%]
-
-<nav class="org-links">
-  <h1><a href="https://www.mozilla.org/">Mozilla</a></h1>
-  <ul>
-    <li><a href="https://www.mozilla.org/privacy/websites/" target="_blank">Privacy</a></li>
-    <li><a href="https://www.mozilla.org/privacy/websites/#cookies" target="_blank">Cookies</a></li>
-    <li><a href="https://www.mozilla.org/about/legal/" target="_blank">Legal</a></li>
-  </ul>
-</nav>
diff --git a/extensions/BMO/template/en/default/hook/global/header-external-links.html.tmpl b/extensions/BMO/template/en/default/hook/global/header-external-links.html.tmpl
new file mode 100644
index 000000000..6c7d58816
--- /dev/null
+++ b/extensions/BMO/template/en/default/hook/global/header-external-links.html.tmpl
@@ -0,0 +1,29 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+<div id="header-external-links" class="dropdown first">
+  <button type="button" id="header-external-menu-button" class="dropdown-button minor" title="Mozilla"
+          aria-label="Mozilla" aria-expanded="false" aria-haspopup="true" aria-controls="header-external-menu">
+    <img src="extensions/BMO/web/images/moz-fav-bw-rgb.svg" width="32" height="32" alt="">
+  </button>
+  <ul class="dropdown-content right" id="header-external-menu" role="menu" style="display:none;">
+    <li role="presentation">
+      <a href="https://www.mozilla.org/" role="menuitem" tabindex="-1">Mozilla Home</a>
+    </li>
+    <li role="separator" class="dropdown-separator"></li>
+    <li role="presentation">
+      <a href="https://www.mozilla.org/privacy/websites/" role="menuitem" tabindex="-1">Privacy</a>
+    </li>
+    <li role="presentation">
+      <a href="https://www.mozilla.org/privacy/websites/#cookies" role="menuitem" tabindex="-1">Cookies</a>
+    </li>
+    <li role="presentation">
+      <a href="https://www.mozilla.org/about/legal/" role="menuitem" tabindex="-1">Legal</a>
+    </li>
+  </ul>
+</div>
diff --git a/extensions/BMO/web/images/moz-fav-bw-rgb.svg b/extensions/BMO/web/images/moz-fav-bw-rgb.svg
new file mode 100644
index 000000000..1e91f0603
--- /dev/null
+++ b/extensions/BMO/web/images/moz-fav-bw-rgb.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 68 68" style="enable-background:new 0 0 68 68;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<rect y="0" width="68" height="68"/>
+	<path class="st0" d="M57.9,42.6h3.9v6.4H49.5V32.4c0-5.1-1.7-7-5-7c-4,0-5.6,2.9-5.6,6.9v10.2h3.9v6.4H30.5V32.4c0-5.1-1.7-7-5-7
+		c-4,0-5.6,2.9-5.6,6.9v10.2h5.6v6.4H7.5v-6.4h3.9V26H7.5v-6.4h12.3v4.4c1.8-3.1,4.8-5,8.9-5c4.2,0,8.1,2,9.5,6.3
+		c1.6-3.9,4.9-6.3,9.5-6.3c5.3,0,10.1,3.2,10.1,10.1V42.6z"/>
+</g>
+</svg>
diff --git a/extensions/BMO/web/images/mozilla-tab.png b/extensions/BMO/web/images/mozilla-tab.png
deleted file mode 100644
index 417f6a5c6..000000000
--- a/extensions/BMO/web/images/mozilla-tab.png
+++ /dev/null
diff --git a/images/footer-mozilla.png b/images/footer-mozilla.png
deleted file mode 100644
index 593c10308..000000000
--- a/images/footer-mozilla.png
+++ /dev/null
diff --git a/images/moz-logo-bw-rgb.svg b/images/moz-logo-bw-rgb.svg
deleted file mode 100644
index 08f06e057..000000000
--- a/images/moz-logo-bw-rgb.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 360 102.8" style="enable-background:new 0 0 360 102.8;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<rect y="-0.2" width="360" height="102.9"/>
-	<path class="st0" d="M343.8,73.7c-0.7,0.2-1.3,0.3-1.9,0.3c-2.1,0-3.1-0.9-3.1-3.5V51c0-10.3-8.2-15.3-17.9-15.3
-		c-7.4,0-11.4,0.9-19.3,4.1L300,50.2l10.3,1.1l1.5-5.1c2.1-1.1,4.2-1.3,6.9-1.3c7.3,0,7.4,5.5,7.4,10.1v1.5
-		c-2.3-0.3-4.9-0.4-7.4-0.4c-10.3,0-21,2.6-21,13.7c0,9.4,7.4,12.9,13.9,12.9c7.3,0,11.9-4.4,14.5-9c0.6,5.5,3.9,9,9.9,9
-		c2.8,0,5.7-0.8,8.1-2.1L343.8,73.7z M316.2,73.4c-3.9,0-5.3-2.3-5.3-5.2c0-4.9,4-6.2,8.6-6.2c2.1,0,4.4,0.3,6.5,0.6
-		C325.7,70.1,320.8,73.4,316.2,73.4z M298.9,12.9l-19.5,68.7h-12.7l19.5-68.7H298.9z M272.7,12.9l-19.5,68.7h-12.7L260,12.9H272.7z
-		 M218.7,36.6h13.5v16.2h-13.5V36.6z M218.7,65.5h13.5v16.2h-13.5V65.5z M199,64.9l10.2,1l-2.8,15.8h-39.3l-1.3-6.8l24.8-28.5h-14.1
-		l-2,7l-9.3-1l1.6-15.8h39.5l1,6.8l-25,28.5h14.6L199,64.9z M134.5,35.7c-16.2,0-24.2,10.9-24.2,24.1c0,14.4,9.6,22.9,23.5,22.9
-		c14.4,0,24.8-9.1,24.8-23.5C158.6,46.6,150.7,35.7,134.5,35.7z M134.2,72.7c-7,0-10.6-6-10.6-13.8c0-8.5,4.1-13.4,10.7-13.4
-		c6.1,0,11,4.1,11,13.2C145.3,67.4,140.9,72.7,134.2,72.7z M98.7,71.8h6v9.8H85.9V56.3c0-7.8-2.6-10.8-7.7-10.8
-		c-6.2,0-8.7,4.4-8.7,10.7v15.7h6v9.8H56.6V56.3c0-7.8-2.6-10.8-7.7-10.8c-6.2,0-8.7,4.4-8.7,10.7v15.7h8.6v9.8H21.4v-9.8h6V46.4h-6
-		v-9.8h18.9v6.8c2.7-4.8,7.4-7.7,13.7-7.7c6.5,0,12.5,3.1,14.7,9.7c2.5-6,7.6-9.7,14.7-9.7c8.1,0,15.5,4.9,15.5,15.6V71.8z"/>
-</g>
-</svg>
diff --git a/js/dropdown.js b/js/dropdown.js
index 32ce4696f..58aa4fee2 100644
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -30,31 +30,63 @@ $(function() {
         if (e.keyCode == 38 || e.keyCode == 40) {
             $('.dropdown-content').each(function() {
                 var $content = $(this);
+                var content_id = $content.attr('id');
+                var $controller = content_id ? $('[aria-controls="' + content_id + '"]') : $();
                 if ($content.is(':visible')) {
                     e.preventDefault();
                     e.stopPropagation();
-                    var $items = $content.find('[role="menuitem"]');
-                    // if none focused select the first or last
-                    var $any_focused = $items.filter(':focus');
-                    if ($any_focused.length == 0) {
+                    var $items = $content.find('[role="menuitem"], [role="option"]');
+                    // if none active select the first or last
+                    var $link = $items.filter('.active');
+                    if ($link.length == 0) {
                         var index = e.keyCode == 40 ? 0 : $items.length - 1;
-                        var $link = $items.eq(index);
-                        $link.addClass('active').focus();
-                        return;
+                        $link = $items.eq(index);
+                    } else {
+                        // otherwise move up or down the list based on arrow key pressed
+                        var move = $items.index($link) + (e.keyCode == 40 ? 1 : -1);
+
+                        // remove active state first
+                        if ($link.length) {
+                            $link.removeClass('active');
+
+                            if ($link.attr('id') === content_id + '-active-item') {
+                                $link.removeAttr('id');
+                            }
+                        }
+
+                        // get the new active element
+                        $link = $items.eq(move % $items.length);
+                    }
+
+                    $link.addClass('active');
+
+                    if (content_id && !$link.attr('id')) {
+                        $link.attr('id', content_id + '-active-item');
+                    }
+
+                    if ($link.attr('id')) {
+                        $controller.attr('aria-activedescendant', $link.attr('id'));
+                    }
+
+                    // move focus when the dropdown's controller is not search box
+                    if (!$controller.eq('input')) {
+                        $link.focus();
                     }
-                    // otherwise move up or down the list based on arrow key pressed
-                    var inc  = e.keyCode == 40 ? 1 : -1;
-                    var move = $items.index($any_focused) + inc;
-                    var $link = $items.eq(move % $items.length);
-                    $content.find('a').removeClass('active');
-                    $link.addClass('active').focus();
                 }
             });
         }
 
-        // enter clicks on a link
+        // navigate to an active link or click on it
+        // note that `trigger('click')` doesn't always work
         if (e.keyCode == 13) {
-            $('.dropdown-content:visible a.active').trigger('click');
+            var $link = $('.dropdown-content:visible a.active');
+            if ($link.length) {
+                if ($link.attr('href')) {
+                    location.href = $link.attr('href');
+                } else {
+                    $link.trigger('click');
+                }
+            }
         }
     });
 
@@ -70,8 +102,18 @@ $(function() {
         $button.click(function(e) {
             toggleDropDown(e, $button, $content);
         }).keydown(function(e) {
-            // allow enter to toggle menu
             if (e.keyCode == 13) {
+                if ($button.eq('input') && !$button.val()) {
+                    // prevent the form being submitted if the search bar is empty
+                    e.preventDefault();
+                    // navigate to an active link if any
+                    var $link = $content.find('a.active');
+                    if ($link.length) {
+                        location.href = $link.attr('href');
+                    }
+                }
+
+                // allow enter to toggle menu
                 toggleDropDown(e, $button, $content);
             }
         });
@@ -85,8 +127,19 @@ $(function() {
             $expanded.attr('aria-expanded', false);
         }
 
+        // don't expand the dropdown if there's no item
+        var $items = $content.find('[role="menuitem"], [role="option"]');
+        if (!$items.length) {
+            return;
+        }
+
         // clear all active links
         $content.find('a').removeClass('active');
+        var content_id = $content.attr('id');
+        if (content_id) {
+            $('[aria-controls="' + content_id + '"]').removeAttr('aria-activedescendant');
+            $content.find('#' + content_id + '-active-item').removeAttr('id');
+        }
         if ($content.is(':visible')) {
             $content.hide();
             $button.attr('aria-expanded', false);
diff --git a/qa/t/test_bmo_enter_new_bug.t b/qa/t/test_bmo_enter_new_bug.t
index 6e5753c74..375a59fcb 100644
--- a/qa/t/test_bmo_enter_new_bug.t
+++ b/qa/t/test_bmo_enter_new_bug.t
@@ -212,7 +212,7 @@ _check_group('pr-private');
 
 _check_product('Legal');
 _check_component('Legal', 'Contract Request');
-_check_group('mozilla-employee-confidential'); 
+_check_group('mozilla-employee-confidential');
 
 $sel->open_ok("/$config->{bugzilla_installation}/enter_bug.cgi?product=Legal&format=legal");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
@@ -289,7 +289,7 @@ sub _check_component {
     $sel->wait_for_page_to_load_ok(WAIT_TIME);
     $sel->title_is("Edit components for which product?");
 
-    $sel->click_ok("link=$product");
+    $sel->click_ok("//div[\@id='bugzilla-body']//a[normalize-space(text())='$product']");
     $sel->wait_for_page_to_load_ok(WAIT_TIME);
     $sel->title_is("Select component of product '$product'");
 
@@ -311,7 +311,7 @@ sub _check_component {
     $sel->click_ok("link=components");
     $sel->wait_for_page_to_load_ok(WAIT_TIME);
     $sel->title_is("Edit components for which product?");
-    $sel->click_ok("link=$product");
+    $sel->click_ok("//div[\@id='bugzilla-body']//a[normalize-space(text())='$product']");
     $sel->wait_for_page_to_load_ok(WAIT_TIME);
     $sel->title_is("Select component of product '$product'");
     $sel->click_ok("link=Add");
@@ -372,7 +372,7 @@ sub _check_version {
     $sel->click_ok("link=versions");
     $sel->wait_for_page_to_load(WAIT_TIME);
     $sel->title_is("Edit versions for which product?");
-    $sel->click_ok("link=$product");
+    $sel->click_ok("//div[\@id='bugzilla-body']//a[normalize-space(text())='$product']");
     $sel->wait_for_page_to_load(WAIT_TIME);
 
     my $text = trim($sel->get_text("bugzilla-body"));
diff --git a/qa/t/test_saved_searches.t b/qa/t/test_saved_searches.t
index b5f47ff4a..b39458fa5 100644
--- a/qa/t/test_saved_searches.t
+++ b/qa/t/test_saved_searches.t
@@ -50,7 +50,7 @@ $sel->click_ok("link=SavedSearchTEST1");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("Bug List: SavedSearchTEST1");
 
-# Remove the saved search from the page footer. It should no longer be displayed there.
+# Remove the saved search from the Search Bar. It should no longer be displayed there.
 
 $sel->click_ok("link=Preferences");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
@@ -76,8 +76,8 @@ $sel->type_ok("short_desc", "bilboa");
 $sel->click_ok("Search");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("Bug List");
-# As we said, this saved search should no longer be displayed in the page footer.
-ok(!$sel->is_text_present("SavedSearchTEST1"), "SavedSearchTEST1 is not present in the page footer");
+# As we said, this saved search should no longer be displayed in the Search Bar.
+ok(!$sel->is_text_present("SavedSearchTEST1"), "SavedSearchTEST1 is not present in the Search Bar");
 $sel->type_ok("save_newqueryname", "SavedSearchTEST1");
 $sel->click_ok("remember");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
@@ -86,7 +86,7 @@ $text = trim($sel->get_text("message"));
 ok($text =~ /Your search named SavedSearchTEST1 has been updated./, "Saved searche SavedSearchTEST1 has been updated.");
 
 # Make sure our new criteria has been saved (let's edit the saved search).
-# As the saved search is no longer displayed in the footer, we have to go
+# As the saved search is no longer displayed in the Search Bar, we have to go
 # to the "Preferences" page to edit it.
 
 $sel->click_ok("link=Preferences");
diff --git a/qa/t/test_shared_searches.t b/qa/t/test_shared_searches.t
index 3e5838c03..98237f756 100644
--- a/qa/t/test_shared_searches.t
+++ b/qa/t/test_shared_searches.t
@@ -34,7 +34,7 @@ my $text = trim($sel->get_text("message"));
 ok($text =~ /OK, you have a new search named Shared Selenium buglist./, "New search named 'Shared Selenium buglist' has been created");
 
 # Retrieve the newly created saved search's internal ID and make sure it's displayed
-# in the footer by default.
+# in the Search Bar by default.
 
 $sel->click_ok("link=Preferences");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
@@ -47,10 +47,10 @@ $ssname =~ /(?:link_in_footer_(\d+))/;
 my $saved_search1_id = $1;
 $sel->is_checked_ok("link_in_footer_$saved_search1_id");
 
-# As an admin, the "Add to footer" checkbox must be displayed, but unchecked by default.
+# As an admin, the "Add to Search Bar" checkbox must be displayed, but unchecked by default.
 
 $sel->select_ok("share_$saved_search1_id", "label=canconfirm");
-ok(!$sel->is_checked("force_$saved_search1_id"), "Shared search not displayed in other users' footer by default");
+ok(!$sel->is_checked("force_$saved_search1_id"), "Shared search not displayed in other users' Search Bar by default");
 $sel->click_ok("force_$saved_search1_id");
 $sel->click_ok("update");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
@@ -58,9 +58,10 @@ $sel->title_is("User Preferences");
 logout($sel);
 
 # Log in as the "canconfirm" user. The search shared by the admin must appear
-# in the footer.
+# in the Search Bar.
 
 log_in($sel, $config, 'canconfirm');
+$sel->click_ok("quicksearch_top");
 $sel->is_text_present_ok("Shared Selenium buglist");
 $sel->click_ok("link=Shared Selenium buglist");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
@@ -78,7 +79,7 @@ $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("User Preferences");
 $sel->is_text_present_ok($config->{admin_user_login});
 
-# Remove the shared search from your footer.
+# Remove the shared search from your Search Bar.
 
 $sel->is_checked_ok("link_in_footer_$saved_search1_id");
 $sel->click_ok("link_in_footer_$saved_search1_id");
@@ -89,7 +90,8 @@ $sel->title_is("User Preferences");
 $sel->click_ok("link=Permissions");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("User Preferences");
-ok(!$sel->is_text_present("Shared Selenium buglist"), "Shared query no longer displayed in the footer");
+$sel->click_ok("quicksearch_top");
+ok(!$sel->is_text_present("Shared Selenium buglist"), "Shared query no longer displayed in the Search Bar");
 
 # Create your own saved search, and share it with the canconfirm group.
 
@@ -113,7 +115,7 @@ $sel->title_is("User Preferences");
 $ssname = $sel->get_attribute('//input[@type="checkbox" and @alt="helpwanted"]@name');
 $ssname =~ /(?:link_in_footer_(\d+))/;
 my $saved_search2_id = $1;
-# Our own saved searches are displayed in the footer by default.
+# Our own saved searches are displayed in the Search Bar by default.
 $sel->is_checked_ok("link_in_footer_$saved_search2_id");
 $sel->select_ok("share_$saved_search2_id", "label=canconfirm");
 $sel->click_ok("update");
@@ -123,9 +125,10 @@ logout($sel);
 
 # Log in as admin again. The other user is not a blesser for the 'canconfirm'
 # group, and so his shared search must not be displayed by default. But it
-# must still be available and can be added to the footer, if desired.
+# must still be available and can be added to the Search Bar, if desired.
 
 log_in($sel, $config, 'admin');
+$sel->click_ok("quicksearch_top");
 ok(!$sel->is_text_present("helpwanted"), "No 'helpwanted' shared search displayed");
 $sel->click_ok("link=Preferences");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
@@ -133,6 +136,7 @@ $sel->title_is("User Preferences");
 $sel->click_ok("link=Saved Searches");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("User Preferences");
+$sel->click_ok("quicksearch_top");
 $sel->is_text_present_ok("helpwanted");
 $sel->is_text_present_ok($config->{canconfirm_user_login});
 
@@ -141,7 +145,7 @@ $sel->click_ok("link_in_footer_$saved_search2_id");
 $sel->click_ok("update");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("User Preferences");
-# This query is now available from the footer.
+# This query is now available from the Search Bar.
 $sel->click_ok("link=helpwanted");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("Bug List: helpwanted");
@@ -167,13 +171,15 @@ logout($sel);
 # user as he doesn't belong to the 'canconfirm' group.
 
 log_in($sel, $config, 'QA_Selenium_TEST');
-ok(!$sel->is_text_present("helpwanted"), "The 'helpwanted' query is not displayed in the footer");
+$sel->click_ok("quicksearch_top");
+ok(!$sel->is_text_present("helpwanted"), "The 'helpwanted' query is not displayed in the Search Bar");
 $sel->click_ok("link=Preferences");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("User Preferences");
 $sel->click_ok("link=Saved Searches");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("User Preferences");
+$sel->click_ok("quicksearch_top");
 ok(!$sel->is_text_present("helpwanted"), "The 'helpwanted' query is not shared with this user");
 logout($sel);
 
@@ -186,6 +192,7 @@ $sel->title_is("User Preferences");
 $sel->click_ok("link=Saved Searches");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("User Preferences");
+$sel->click_ok("quicksearch_top");
 ok(!$sel->is_text_present("Shared Selenium buglist"), "The 'Shared Selenium buglist' is no longer available");
 $sel->click_ok('//a[contains(@href,"buglist.cgi?cmdtype=dorem&remaction=forget&namedcmd=helpwanted")]',
                undef, "Deleting the 'helpwanted' search");
diff --git a/skins/standard/IE-fixes.css b/skins/standard/IE-fixes.css
index 0e326286d..fd96e4afe 100644
--- a/skins/standard/IE-fixes.css
+++ b/skins/standard/IE-fixes.css
@@ -26,25 +26,6 @@ form#Create #comp_desc {
     margin: .5em 1em;
 }
 
-#footer #useful-links li {
-    padding-bottom: 0.8ex;
-}
-
-#footer .label {
-    display: block;
-    float: left;
-    width: 8.2em;
-    padding-bottom: 0.1ex;
-}
-
-#footer #links-actions .label {
-    padding-top: 0.35em;
-}
-
-#footer .links {
-    display: inline;
-}
-
 #bug_id_container, .search_field_grid, 
 .search_email_fields, ul.bug_changes li { 
     zoom: 1;
diff --git a/skins/standard/global.css b/skins/standard/global.css
index 12dab11f5..9b9ae6550 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -91,6 +91,10 @@
         pointer-events: none; /* Make sure button is clickable on Chrome & Safari */
     }
 
+    #header img {
+        vertical-align: top;
+    }
+
     #header .inner {
         display: flex;
         align-items: center;
@@ -154,7 +158,7 @@
 
     #header .searchbox-outer {
         position: relative;
-        width: 240px;
+        width: 280px;
         height: 32px;
     }
 
@@ -239,34 +243,8 @@
         box-shadow: none;
     }
 
-    #header-tools-menu-button {
-        width: 32px;
-        height: 32px;
-        border-radius: 4px;
-    }
-
-    #header-tools-menu-button .icon {
-        text-indent: -.7em;
-        letter-spacing: -.7em;
-    }
-
-    #header-tools-menu-button .icon::before {
-        content: '\E5CC\E5CC';
-    }
-
-    #header-account-menu-button img {
-        display: block;
-        border-radius: 50%;
-    }
-
-    #header-account-menu-button .icon::before {
-        font-size: 32px;
-        content: '\E853';
-    }
-
     #header .dropdown-content {
         top: calc(100% + 4px);
-        right: -4px;
         border-color: #BBB #999 #777;
         border-radius: 4px;
         padding: 4px 0;
@@ -276,6 +254,14 @@
         box-shadow: 0 2px 8px rgba(0,0,0,.3);
     }
 
+    #header .dropdown-content.right {
+        left: -4px;
+    }
+
+    #header .dropdown-content.left {
+        right: -4px;
+    }
+
     #header .dropdown-content::before,
     #header .dropdown-content::after {
         content: '';
@@ -283,12 +269,21 @@
         width: 0;
         height: 0;
         position: absolute;
-        right: 10px;
         border-width: 8px;
         border-color: transparent;
         border-style: solid;
     }
 
+    #header .dropdown-content.right::before,
+    #header .dropdown-content.right::after {
+        left: 10px;
+    }
+
+    #header .dropdown-content.left::before,
+    #header .dropdown-content.left::after {
+        right: 10px;
+    }
+
     #header .dropdown-content::before {
         top: -17px;
         border-bottom-color: #BBB;
@@ -304,9 +299,80 @@
         padding: 2px 16px;
         line-height: 1.5;
         white-space: normal;
+        color: inherit !important;
         background-color: transparent;
     }
 
+    #header-search h2 {
+        position: absolute;
+        left: -99999px;
+    }
+
+    #header-search-dropdown {
+        right: auto;
+        min-width: calc(100% + 8px) !important;
+        max-width: calc(200% + 8px) !important;
+    }
+
+    #header-search-dropdown-wrapper {
+        overflow-x: hidden;
+        overflow-y: scroll;
+        max-height: 400px;
+    }
+
+    #header-search-dropdown h3 {
+        position: sticky;
+        top: -4px;
+        left: 0;
+        margin: -4px 8px 0;
+        padding: 8px 0 4px;
+        color: #999;
+        background: #FFF;
+        font-size: 12px;
+        font-weight: normal;
+    }
+
+    #header-search-dropdown ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    #header-search-dropdown a {
+        overflow: hidden;
+        white-space: nowrap !important;
+        text-overflow: ellipsis;
+    }
+
+    #header-tools-menu-button {
+        width: 32px;
+        height: 32px;
+        border-radius: 4px;
+    }
+
+    #header-tools-menu-button .icon {
+        text-indent: -.7em;
+        letter-spacing: -.7em;
+    }
+
+    #header-tools-menu-button .icon::before {
+        content: '\E5CC\E5CC';
+    }
+
+    #header-account-menu-button img {
+        display: block;
+        border-radius: 50%;
+    }
+
+    #header-account-menu-button .icon::before {
+        font-size: 32px;
+        content: '\E853';
+    }
+
+    #header-external-links.first {
+        order: -1;
+    }
+
     #header .account-label * {
         overflow: hidden;
         white-space: nowrap;
@@ -360,92 +426,6 @@
     }
 /* header (end) */
 
-/* footer (begin)
- * See also the "header" section for styles that apply
- * to both the header and footer.
- */
-    #footer {
-        display: flex;
-        clear: both;
-        margin: 15px 0 0;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        padding: 8px;
-        color: #bbb;
-        background-color: #fff;
-        line-height: 1.5;
-    }
-
-    #footer .intro {
-        flex: none;
-        display: flex;
-        align-items: center;
-        border-right: 1px solid #DDD;
-        padding: 16px 24px 16px 16px;
-    }
-
-    #footer .org-links {
-        display: flex;
-        align-items: center;
-    }
-
-    #footer .org-links h1 {
-        margin: 0;
-        font-size: 1em;
-    }
-
-    #footer .org-links h1 a {
-        display: block;
-        width: 100px;
-        height: 30px;
-        background-image: url(../../images/moz-logo-bw-rgb.svg);
-        background-repeat: no-repeat;
-        background-size: contain;
-        text-indent: -9999px;
-    }
-
-    #footer .org-links ul {
-        display: flex;
-        margin: 0 0 0 16px;
-        padding: 0;
-    }
-
-    #footer .org-links li {
-        flex: none;
-    }
-
-    #footer .org-links li:not(:last-child) {
-        margin-right: 16px;
-    }
-
-    #footer #useful-links {
-        flex: auto;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: 0 0 0 24px;
-        padding: 0;
-    }
-
-    #footer ul {
-        list-style-type: none;
-    }
-    #links-saved ul {
-        display: inline;
-    }
-    #links-saved th {
-        vertical-align: top;
-    }
-
-    #footer .label {
-        white-space: nowrap;
-        vertical-align: top;
-    }
-
-    #footer .links {
-        vertical-align: top;
-    }
-/* footer (end) */
-
 /* link lists (begin) */
     ul.links {
         margin: 0;
@@ -783,7 +763,7 @@ div.user_match {
 
 /* Rules specific for printing */
 @media print {
-    #header, #footer {
+    #header {
         display: none;
     }
 
@@ -1075,6 +1055,7 @@ input.required, select.required, span.required_explanation {
 }
 
 body {
+    min-height: 400px;
     background: #f6f4ec;
     background-image: url(../../images/noise.png);
     background-image: url(../../images/noise.png), -moz-linear-gradient(#d7d3c8, #f6f4ec 400px);
@@ -1088,11 +1069,11 @@ body, td, th, input, select, option, optgroup, button, .text_input {
     font-family: "Fira Sans", "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 
-a, #footer a, #footer a:visited {
+a {
     color: #0095dd;
 }
 
-a:hover, #footer a:hover {
+a:hover {
     color: #00539f;
 }
 
@@ -1148,7 +1129,7 @@ hr {
     background: none;
     border: none;
     color: #404040;
-    margin: 15px auto;
+    margin: 15px auto 0;
 }
 
 #bugzilla-body th {
diff --git a/skins/standard/mobile.css b/skins/standard/mobile.css
index 244726f21..f112c2a3b 100644
--- a/skins/standard/mobile.css
+++ b/skins/standard/mobile.css
@@ -8,7 +8,7 @@
 
 @media
 only screen and (max-device-width : 720px) {
-    #header, #footer {
+    #header {
         display: none;
     }
     .cookie-notify {
@@ -52,10 +52,6 @@ only screen and (-o-min-device-pixel-ratio: 2/1),
 only screen and (min-device-pixel-ratio: 2),
 only screen and (min-resolution: 192dpi),
 only screen and (min-resolution: 2dppx) {
-    #footer .org-links {
-        font-size: small;
-    }
-
     body {
         font-size: medium;
     }
diff --git a/template/en/default/account/prefs/saved-searches.html.tmpl b/template/en/default/account/prefs/saved-searches.html.tmpl
index ce9623372..7b71ccf6d 100644
--- a/template/en/default/account/prefs/saved-searches.html.tmpl
+++ b/template/en/default/account/prefs/saved-searches.html.tmpl
@@ -59,7 +59,7 @@
       </th>
       <th>
         Show in
-        Footer
+        Search Bar
       </th>
       [% may_share = user.in_group(Param('querysharegroup')) && queryshare_groups.size %]
       [% IF may_share %]
@@ -137,7 +137,7 @@
                      %]class="bz_default_hidden"[% END %]>
                 <input type="checkbox" id="force_[% q.id FILTER html %]"
                        name="force_[% q.id FILTER html %]" value="1">
-                <label for="force_[% q.id FILTER html %]">Add to footer</label>
+                <label for="force_[% q.id FILTER html %]">Add to Search Bar</label>
               </span>
             [% END %]
             [% IF q.shared_with_users %]
@@ -151,8 +151,8 @@
     [% END %]
   </table>
 [% IF user.can_bless %]
-  <p>Note that for every search that has the "Add to footer" selected, a
-     link to the shared search is added to the footer of every user that is
+  <p>Note that for every search that has the "Add to Search Bar" selected, a
+     link to the shared search is added to the Search Bar of every user that is
      a direct member of the group at the time you click Submit Changes.</p>
 [% END %]
 </blockquote>
@@ -179,7 +179,7 @@
       </th>
       <th>
         Show in
-        Footer
+        Search Bar
       </th>
     </tr>
     [% FOREACH q = user.queries_available %]
diff --git a/template/en/default/global/footer.html.tmpl b/template/en/default/global/footer.html.tmpl
index 29d17bccd..4578c1084 100644
--- a/template/en/default/global/footer.html.tmpl
+++ b/template/en/default/global/footer.html.tmpl
@@ -19,28 +19,7 @@
   #                 Svetlana Harisova <light@rathedg.com>
   #%]
 
-[%# INTERFACE:
-  # This template has no interface. However, you must fulfill the interface to
-  # global/useful-links.html.tmpl.
-  #%]
-
-</div>
-
-[%# Migration note: below this point, this file corresponds to the old Param
-  # 'footerhtml'
-  #%]
-
-<div id="footer">
-  <div class="intro">[% Hook.process('intro') %]</div>
-
-[%# Migration note: the old param 'blurbhtml' goes here %]
-
-[%# Migration note: useful-links.html.tmpl corresponds to %commandmenu% %]
-
-           [% PROCESS "global/useful-links.html.tmpl" %]
-
-  <div class="outro">[% Hook.process('outro') %]</div>
-</div>
+</div> [%# bugzilla-body %]
 
 [% Hook.process("end") %]
 
diff --git a/template/en/default/global/header-search-dropdown.html.tmpl b/template/en/default/global/header-search-dropdown.html.tmpl
new file mode 100644
index 000000000..590c95d31
--- /dev/null
+++ b/template/en/default/global/header-search-dropdown.html.tmpl
@@ -0,0 +1,48 @@
+[%# The contents of this file are subject to the Mozilla Public
+  # License Version 1.1 (the "License"); you may not use this file
+  # except in compliance with the License. You may obtain a copy of
+  # the License at http://www.mozilla.org/MPL/
+  #
+  # Software distributed under the License is distributed on an "AS
+  # IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
+  # implied. See the License for the specific language governing
+  # rights and limitations under the License.
+  #
+  # The Original Code is the Bugzilla Bug Tracking System.
+  #
+  # The Initial Developer of the Original Code is Netscape Communications
+  # Corporation. Portions created by Netscape are
+  # Copyright (C) 1998 Netscape Communications Corporation. All
+  # Rights Reserved.
+  #
+  # Contributor(s): Gervase Markham <gerv@gerv.net>
+  #                 Svetlana Harisova <light@rathedg.com>
+  #                 Marc Schumann <wurblzap@gmail.com>
+  #%]
+
+[% PROCESS global/variables.none.tmpl %]
+
+<div id="header-search-dropdown" class="dropdown-content right" role="listbox" style="display: none;">
+  <div id="header-search-dropdown-wrapper">
+    [% IF user.showmybugslink OR user.queries.size OR user.queries_subscribed.size %]
+      <section id="header-search-dropdown-saved">
+        <h3>Saved Searches</h3>
+        <ul role="none">
+          [% IF user.showmybugslink %][% filtered_username = user.login FILTER uri %]
+            <li role="none"><a role="option" href="[% Param('mybugstemplate').replace('%userid%', filtered_username) %]">
+                My [% terms.Bugs %]</a></li>
+          [% END %]
+          [% FOREACH q = user.queries %][% IF q.link_in_footer %]
+            <li role="none"><a role="option" href="buglist.cgi?cmdtype=runnamed&amp;namedcmd=[% q.name FILTER uri %]">
+                [% q.name FILTER html %]</a></li>
+          [% END %][% END %]
+          [% FOREACH q = user.queries_subscribed %]
+            <li role="none"><a role="option" href="buglist.cgi?cmdtype=dorem&amp;remaction=run&amp;namedcmd=
+                [% q.name FILTER uri %]&amp;sharer_id=[% q.user.id FILTER uri %]"
+                title="Shared by [% q.user.identity FILTER html %]">[% q.name FILTER html FILTER no_break %]</a></li>
+          [% END %]
+        </ul>
+      </section>
+    [% END %]
+  </div>
+</div>
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index 9baecbb53..81db1910b 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -246,16 +246,20 @@
 
 <header id="header" role="banner">
   <div class="inner">
-    <h1 id="header-title" class="title"><a href="./" title="Go to home page">[% terms.BugzillaTitle %]</a></h1>
-    <form role="search" id="header-search" class="quicksearch quicksearch_check_empty" action="buglist.cgi">
-      <div class="searchbox-outer">
-        <input role="searchbox" id="quicksearch_top" name="quicksearch"
+    <h1 id="header-title" class="title"><a href="./" title="Go to home page">[% terms.Bugzilla %]</a></h1>
+    <form role="search" id="header-search" class="quicksearch" action="buglist.cgi">
+      <section class="searchbox-outer dropdown" role="combobox" aria-expanded="false" aria-haspopup="listbox"
+               aria-owns="header-search-dropdown">
+        <h2>Quick Search</h2>
+        <input role="searchbox" id="quicksearch_top" class="dropdown-button" name="quicksearch" autocomplete="off"
                value="[% quicksearch FILTER html %]" placeholder="Search [% terms.Bugs %]"
-               title="Search [% terms.bugs %] by keywords">
+               title="Enter a [% terms.bug %] number or some search terms" aria-controls="header-search-dropdown"
+               aria-label="Quick Search">
         <button type="submit" id="find_top" aria-label="Submit">
           <span class="icon" aria-hidden="true"></span>
         </button>
-      </div>
+        [% PROCESS "global/header-search-dropdown.html.tmpl" %]
+      </section>
     </form>
     <nav id="header-nav">
       <ul class="links">
@@ -286,13 +290,7 @@
                 aria-label="More tools…" aria-expanded="false" aria-haspopup="true" aria-controls="header-tools-menu">
           <span class="icon" aria-hidden="true"></span>
         </button>
-        <ul class="dropdown-content" id="header-tools-menu" role="menu" style="display:none;">
-          [% IF user.showmybugslink %]
-            [% filtered_username = user.login FILTER uri %]
-            <li role="presentation">
-              <a href="[% Param('mybugstemplate').replace('%userid%', filtered_username) %]" role="menuitem" tabindex="-1">My [% terms.Bugs %]</a>
-            </li>
-          [% END %]
+        <ul class="dropdown-content left" id="header-tools-menu" role="menu" style="display:none;">
           [% IF user.id %]
             <li role="presentation">
               <a href="request.cgi?requester=[% user.login FILTER uri %]&amp;requestee=[% user.login FILTER uri %]&amp;do_union=1&amp;group=type&amp;action=queue" role="menuitem" tabindex="-1">My Requests</a>
@@ -330,7 +328,7 @@
             <span class="icon" aria-hidden="true"></span>
           [% END %]
         </button>
-        <ul class="dropdown-content" id="header-account-menu" role="menu" style="display:none;">
+        <ul class="dropdown-content left" id="header-account-menu" role="menu" style="display:none;">
           <li role="presentation">
             <div href="user_profile" class="account-label">
               <div class="name">[% user.name FILTER html %]</div>
@@ -371,6 +369,7 @@
         [% END %]
       </ul>
     [% END %]
+    [% Hook.process('external-links') %]
   </div>
 </header> [%# header %]
 
diff --git a/template/en/default/global/useful-links.html.tmpl b/template/en/default/global/useful-links.html.tmpl
deleted file mode 100644
index 90a3268cb..000000000
--- a/template/en/default/global/useful-links.html.tmpl
+++ /dev/null
@@ -1,73 +0,0 @@
-[%# The contents of this file are subject to the Mozilla Public
-  # License Version 1.1 (the "License"); you may not use this file
-  # except in compliance with the License. You may obtain a copy of
-  # the License at http://www.mozilla.org/MPL/
-  #
-  # Software distributed under the License is distributed on an "AS
-  # IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
-  # implied. See the License for the specific language governing
-  # rights and limitations under the License.
-  #
-  # The Original Code is the Bugzilla Bug Tracking System.
-  #
-  # The Initial Developer of the Original Code is Netscape Communications
-  # Corporation. Portions created by Netscape are
-  # Copyright (C) 1998 Netscape Communications Corporation. All
-  # Rights Reserved.
-  #
-  # Contributor(s): Gervase Markham <gerv@gerv.net>
-  #                 Svetlana Harisova <light@rathedg.com>
-  #                 Marc Schumann <wurblzap@gmail.com>
-  #%]
-
-[%# Migration note: this whole file corresponds to the old %commandmenu% 
-    substitution param in 'footerhtml' %]
-
-[% PROCESS global/variables.none.tmpl %]
-
-<ul id="useful-links">
-  [%# Saved searches %]
-    
-  [% IF user.showmybugslink OR user.queries.size 
-        OR user.queries_subscribed.size 
-  %]
-    [% print_pipe = 0 %]
-    <li id="links-saved">
-      <ul class="links">
-        [% IF user.showmybugslink %]
-          [% filtered_username = user.login FILTER uri %]
-          <li><a href="[% Param('mybugstemplate').replace('%userid%', filtered_username) %]">My [% terms.Bugs %]</a></li>
-          [% print_pipe = 1 %]
-        [% END %]
-
-        [% FOREACH q = user.queries %]
-          [% IF q.link_in_footer %]
-            <li>[% '<span class="separator">| </span>' IF print_pipe %]
-            <a href="buglist.cgi?cmdtype=runnamed&amp;namedcmd=[% q.name FILTER uri %]">[% q.name FILTER html %]</a></li>
-            [% print_pipe = 1 %]
-          [% END %]
-        [% END %]
-        [% new_line = print_pipe %]
-        [% print_pipe = 0 %]
-        [% FOREACH q = user.queries_subscribed %]
-          [% IF new_line %]
-            <br>
-            [% new_line = 0 %]
-          [% END %]
-          <li>
-            [% '<span class="separator">| </span>' IF print_pipe %]
-            <a href="buglist.cgi?cmdtype=dorem&amp;remaction=run&amp;namedcmd=
-                     [% q.name FILTER uri %]&amp;sharer_id=
-                     [% q.user.id FILTER uri %]"
-               class="shared"
-               title="Shared by [% q.user.identity FILTER html %]"
-               >[% q.name FILTER html FILTER no_break %]</a></li>
-          [% print_pipe = 1 %]
-        [% END %]
-      </ul>
-    </li>
-  [% END %]
-
-  [%# Sections of links to more things users can do on this installation. %]
-  [% Hook.process("end") %]
-</ul>