From 9b3834764b26d0a806b72fdc3657075b7ab9c7c0 Mon Sep 17 00:00:00 2001
From: Kohei Yoshino <kohei.yoshino@gmail.com>
Date: Mon, 8 Jan 2018 09:55:43 -0500
Subject: 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
---
 skins/standard/global.css | 47 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 11 deletions(-)

(limited to 'skins')

diff --git a/skins/standard/global.css b/skins/standard/global.css
index 3a2b87856..ea25eb88a 100644
--- 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 {
-- 
cgit v1.2.3-24-g4f1b