Bug 1428642 - Fix minor bugs on new global header

* The magnifier icon on the search bar should not trigger search as reported in
   https://twitter.com/colinjoy/status/949035254949523457
* The search dropdown should show Saved Searches Edit link as suggested in my UX analysis
* Remove the CSS transition on the More Tools button for consistency. I didn't add the transition;
   it's default style for buttons
* Fix the position of the arrow/triangle on dropdown lists. An error of 1px.
* Add `user-select: none;` to `#header` https://developer.mozilla.org/en-US/docs/Web/CSS/user
  select

diff --git a/qa/t/lib/QA/Util.pm b/qa/t/lib/QA/Util.pm
index f80837c0ec02170a004ab8e616ca1fb11d2246c8..5d041d56088a2ceb9410f6ae8cdd83d1ccc4eefa 100644 (file)
--- a/qa/t/lib/QA/Util.pm
+++ b/qa/t/lib/QA/Util.pm
@@ -266,7 +266,7 @@ sub go_to_bug {
     my ($sel, $bug_id) = @_;
 
     $sel->type_ok("quicksearch_top", $bug_id);
-    $sel->click_ok("find_top", undef, "Go to bug $bug_id");
+    $sel->submit("header-search");
     $sel->wait_for_page_to_load_ok(WAIT_TIME);
     my $bug_title = $sel->get_title();
     utf8::encode($bug_title) if utf8::is_utf8($bug_title);

diff --git a/qa/t/test_bug_edit.t b/qa/t/test_bug_edit.t
index 8e42a139da828d51047c563d20263a06a3fc2f82..07a64876b78cb14998ecfc5b620c2ca6c556cd53 100644 (file)
--- a/qa/t/test_bug_edit.t
+++ b/qa/t/test_bug_edit.t
@@ -161,7 +161,7 @@ logout($sel);
 
 log_in($sel, $config, 'unprivileged');
 $sel->type_ok("quicksearch_top", $bug1_id);
-$sel->click_ok("find_top");
+$sel->submit("header-search");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("Access Denied");
 $sel->is_text_present_ok("You are not authorized to access bug $bug1_id");

diff --git a/qa/t/test_qa_contact.t b/qa/t/test_qa_contact.t
index b75044806ab31de2696a60385cce947aecf21ddf..3795e2edcc579dabdb0abbfc0542aeed848d627e 100644 (file)
--- a/qa/t/test_qa_contact.t
+++ b/qa/t/test_qa_contact.t
@@ -94,7 +94,7 @@ logout($sel);
 # to the Master group.
 
 $sel->type_ok("quicksearch_top", $bug1_id);
-$sel->click_ok("find_top");
+$sel->submit("header-search");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("Access Denied");
 $sel->is_text_present_ok("You are not authorized to access bug");

diff --git a/qa/t/test_shared_searches.t b/qa/t/test_shared_searches.t
index 98237f7560463f4e47ce922932f61bde55c3d5d1..a4b2ac9ce1df5daa9c444e84dac4bb664ed685e9 100644 (file)
--- a/qa/t/test_shared_searches.t
+++ b/qa/t/test_shared_searches.t
@@ -23,7 +23,7 @@ set_parameters($sel, { "Group Security" => {"querysharegroup" => {type => "selec
 # Create new saved search and call it 'Shared Selenium buglist'.
 
 $sel->type_ok("quicksearch_top", ":TestProduct Selenium");
-$sel->click_ok("find_top");
+$sel->submit("header-search");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_like(qr/^Bug List:/);
 $sel->type_ok("save_newqueryname", "Shared Selenium buglist");
@@ -96,7 +96,7 @@ ok(!$sel->is_text_present("Shared Selenium buglist"), "Shared query no longer di
 # Create your own saved search, and share it with the canconfirm group.
 
 $sel->type_ok("quicksearch_top", ":TestProduct sw:helpwanted");
-$sel->click_ok("find_top");
+$sel->submit("header-search");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_like(qr/^Bug List:/);
 $sel->type_ok("save_newqueryname", "helpwanted");

diff --git a/skins/standard/global.css b/skins/standard/global.css
index 3a2b87856e24bd37cb2b96ad9627fbfc8c91cdc3..ea25eb88ac92730fc58dbea63ed010e37691406f 100644 (file)
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -71,6 +71,9 @@
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
         color: #555;
         background-color: #FFF;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        user-select: none;
     }
 
     #header a,
@@ -121,6 +124,7 @@
         font-family: 'Material Icons';
         vertical-align: middle;
         color: #777;
+        pointer-events: none;
     }
 
     #header .title {
@@ -165,19 +169,18 @@
         height: 32px;
     }
 
-    #header .searchbox-outer button {
+    #header .searchbox-outer .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         position: absolute;
         top: 4px;
         left: 4px;
-        border: 0;
-        padding: 0;
         width: 24px;
         height: 24px;
-        background: transparent;
-        box-shadow: none;
     }
 
-    #header .searchbox-outer button .icon::before {
+    #header .searchbox-outer .icon::before {
         content: '\E8B6';
     }
 
@@ -240,10 +243,12 @@
 
     #header .dropdown-button {
         display: block;
+        border-radius: 0; /* Override Safari's default */
         padding: 0;
         color: inherit;
         background: transparent;
         box-shadow: none;
+        transition: none;
     }
 
     #header .dropdown-content {
@@ -279,12 +284,12 @@
 
     #header .dropdown-content.right::before,
     #header .dropdown-content.right::after {
-        left: 10px;
+        left: 11px;
     }
 
     #header .dropdown-content.left::before,
     #header .dropdown-content.left::after {
-        right: 10px;
+        right: 11px;
     }
 
     #header .dropdown-content::before {
@@ -323,18 +328,38 @@
         max-height: 400px;
     }
 
-    #header-search-dropdown h3 {
+    #header-search-dropdown header {
+        display: flex;
         position: sticky;
         top: -4px;
         left: 0;
-        margin: -4px 8px 0;
+        margin: -4px 12px 0;
         padding: 8px 0 4px;
         color: #999;
         background: #FFF;
         font-size: 12px;
+    }
+
+    #header-search-dropdown header h3 {
+        flex: auto;
+        margin: 0;
+        font-size: inherit;
+        line-height: 1.5;
         font-weight: normal;
     }
 
+    #header-search-dropdown header a {
+        flex: none;
+        padding: 0 !important;
+        font-size: inherit;
+    }
+
+    #header-search-dropdown.dropdown-content header a:hover,
+    #header-search-dropdown.dropdown-content header a:focus,
+    #header-search-dropdown.dropdown-content header a.active {
+        background-color: transparent !important;
+    }
+
     #header-search-dropdown ul {
         margin: 0;
         padding: 0;
@@ -350,7 +375,7 @@
     #header-tools-menu-button {
         width: 32px;
         height: 32px;
-        border-radius: 4px;
+        border-radius: 4px !important;
     }
 
     #header-tools-menu-button .icon {

diff --git a/template/en/default/global/header-search-dropdown.html.tmpl b/template/en/default/global/header-search-dropdown.html.tmpl
index 590c95d31f0f6cf087d32c5d0c23d94996282ecb..8e79978ba0ebb21f55815a43c9f6e8ab4c7b55f1 100644 (file)
--- a/template/en/default/global/header-search-dropdown.html.tmpl
+++ b/template/en/default/global/header-search-dropdown.html.tmpl
@@ -26,7 +26,10 @@
   <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>
+        <header>
+          <h3>Saved Searches</h3>
+          <a href="userprefs.cgi?tab=saved-searches">Edit</a>
+        </header>
         <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) %]">

diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index 0f9646ba1b35872de5f68bc34d12c5804fbd900b..04b996e169f5107bb278ab56bca537faa510957d 100644 (file)
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -242,13 +242,11 @@
       <section class="searchbox-outer dropdown" role="combobox" aria-expanded="false" aria-haspopup="listbox"
                aria-owns="header-search-dropdown">
         <h2>Quick Search</h2>
+        <span class="icon" aria-hidden="true"></span>
         <input role="searchbox" id="quicksearch_top" class="dropdown-button" name="quicksearch" autocomplete="off"
                value="[% quicksearch FILTER html %]" placeholder="Search [% terms.Bugs %]"
                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>
         [% PROCESS "global/header-search-dropdown.html.tmpl" %]
       </section>
     </form>