Bug 1376826 - New HTML Header for BMO

9 files changed, 20 insertions, 162 deletions

diff --git a/extensions/BMO/template/en/default/pages/etiquette.html.tmpl b/extensions/BMO/template/en/default/pages/etiquette.html.tmpl
index 6e62f4762..45dd5bd65 100644
--- a/extensions/BMO/template/en/default/pages/etiquette.html.tmpl
+++ b/extensions/BMO/template/en/default/pages/etiquette.html.tmpl
@@ -23,7 +23,7 @@
 
 [% PROCESS global/header.html.tmpl
    title = "Bugzilla Etiquette"
-   style = "li { margin: 5px } .heading { font-weight: bold }" %]
+   style = "#bugzilla-body li { margin: 5px } .heading { font-weight: bold }" %]
 
 <h1>Bugzilla Etiquette</h1>
 
diff --git a/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl
index 814464f27..ccc974a23 100644
--- a/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl
@@ -38,7 +38,6 @@
     "extensions/ProdCompSearch/web/js/prod_comp_search.js",
     "extensions/BugModal/web/common_bug_modal.js",
     "extensions/BugModal/web/comments.js",
-    "extensions/BugModal/web/dropdown.js",
     "js/bugzilla-readable-status-min.js",
     "js/field.js",
     "js/comments.js",
@@ -51,7 +50,6 @@
   );
   style_urls.unshift(
     "extensions/BugModal/web/common_bug_modal.css",
-    "extensions/BugModal/web/dropdown.css",
     "skins/custom/bug_groups.css",
     "js/jquery/plugins/datetimepicker/datetimepicker.css",
     "js/jquery/plugins/contextMenu/contextMenu.css"
diff --git a/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl
index d92ad455d..38b6b572f 100644
--- a/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl
@@ -53,7 +53,6 @@
     "extensions/ProdCompSearch/web/js/prod_comp_search.js",
     "extensions/BugModal/web/bug_modal.js",
     "extensions/BugModal/web/comments.js",
-    "extensions/BugModal/web/dropdown.js",
     "js/bugzilla-readable-status-min.js",
     "js/field.js",
     "js/comments.js",
@@ -65,7 +64,6 @@
   );
   style_urls.push(
     "extensions/BugModal/web/bug_modal.css",
-    "extensions/BugModal/web/dropdown.css",
     "skins/standard/bug_groups.css",
     "js/jquery/plugins/contextMenu/contextMenu.css"
   );
diff --git a/extensions/BugModal/web/dropdown.css b/extensions/BugModal/web/dropdown.css
deleted file mode 100644
index e9a363c11..000000000
--- a/extensions/BugModal/web/dropdown.css
+++ /dev/null
@@ -1,53 +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. */
-
-/* The container <div> - needed to position the dropdown content */
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-/* Dropdown Content (Hidden by Default) */
-.dropdown-content {
-    position: absolute;
-    background-color: #eee;
-    min-width: 120px;
-    z-index: 1;
-    text-align: left;
-    margin: 0;
-    padding: 0;
-    border: 1px solid #ddd;
-    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-    list-style: none;
-    right: 0px;
-}
-
-.dropdown-content.menu-up {
-    bottom: 100%;
-}
-
-.dropdown-separator {
-    border-bottom: 1px solid #ddd;
-}
-
-/* Links inside the dropdown */
-.dropdown-content a {
-    white-space: nowrap;
-    background-color: #eee;
-    color: black !important;
-    padding: 4px 8px;
-    text-decoration: none !important;
-    display: block;
-}
-
-/* Change color of dropdown links on hover */
-.dropdown-content li .active {
-    text-decoration: none;
-    background-color: #39f;
-}
diff --git a/extensions/BugModal/web/dropdown.js b/extensions/BugModal/web/dropdown.js
deleted file mode 100644
index 181be9f73..000000000
--- a/extensions/BugModal/web/dropdown.js
+++ /dev/null
@@ -1,93 +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. */
-
-$(function() {
-    'use strict';
-
-    $(window).click(function(e) {
-        // clicking dropdown button opens or closes the dropdown content
-        if (!$(e.target).hasClass('dropdown-button')) {
-            $('.dropdown-button').each(function() {
-                toggleDropDown(e, $(this), $('#' + $(this).attr('aria-controls')), 1);
-            });
-        }
-    }).keydown(function(e) {
-        // Escape key hides the dropdown if visible
-        if (e.keyCode == 27) {
-            $('.dropdown-button').each(function() {
-                var $button = $(this);
-                if ($button.siblings('.dropdown-content').is(':visible')) {
-                    toggleDropDown(e, $button, $('#' + $button.attr('aria-controls')), 1);
-                    $button.focus();
-                }
-            });
-        }
-        // allow arrow up and down keys to choose one of the dropdown items if menu visible
-        if (e.keyCode == 38 || e.keyCode == 40) {
-            $('.dropdown-content').each(function() {
-                var $content = $(this);
-                if ($content.is(':visible')) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    var $li = $content.find('li');
-                    // if none focused select the first or last
-                    var $any_focused = $content.find('a:focus');
-                    if ($any_focused.length == 0) {
-                        var index = e.keyCode == 40 ? 0 : $li.length - 1;
-                        var $link = $li.eq(index).find('a');
-                        $link.addClass('active').focus();
-                        return;
-                    }
-                    // otherwise move up or down the list based on arrow key pressed
-                    var inc  = e.keyCode == 40 ? 1 : -1;
-                    var move = $content.find('a:focus').parent('li').index() + inc;
-                    var $link = $li.eq(move % $li.length).find('a');
-                    $content.find('a').removeClass('active');
-                    $link.addClass('active').focus();
-                }
-            });
-        }
-
-        // enter clicks on a link
-        if (e.keyCode == 13) {
-            $('.dropdown-content:visible a.active').trigger('click');
-        }
-    });
-
-    $('.dropdown-content a').hover(
-        function(){ $(this).addClass('active')  },
-        function(){ $(this).removeClass('active')  }
-    );
-
-    $('.dropdown').each(function() {
-        var $div     = $(this);
-        var $button  = $div.find('.dropdown-button');
-        var $content = $div.find('.dropdown-content');
-        $button.click(function(e) {
-            toggleDropDown(e, $button, $content);
-        }).keydown(function(e) {
-            // allow enter to toggle menu
-            if (e.keyCode == 13) {
-                toggleDropDown(e, $button, $content);
-            }
-        });
-    });
-
-    function toggleDropDown(e, $button, $content, hide_only) {
-        // clear all active links
-        $content.find('a').removeClass('active');
-        if ($content.is(':visible')) {
-            $content.hide();
-            $button.attr('aria-expanded', false);
-        }
-        // if not using Escape or clicking outside the dropdown div, then we are hiding
-        else if (!hide_only) {
-            $content.show();
-            $button.attr('aria-expanded', true);
-        }
-    }
-});
diff --git a/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl b/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl
index 5fcf5d72b..965e29639 100644
--- a/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl
+++ b/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl
@@ -8,7 +8,7 @@
 [% USE Bugzilla %]
 
 [% IF Param('user_info_class').split(',').contains('GitHubAuth') %]
-  <span id="github_mini_login[% qs_suffix FILTER html %]" class="bz_default_hidden mini_login[% qs_suffix FILTER html %]">
+  <span id="github_mini_login[% qs_suffix FILTER html %]" class="mini_login[% qs_suffix FILTER html %]">
     <form method="post" action="[% urlbase FILTER html %]github.cgi">
       <input type="hidden" name="github_secret" value="[% Bugzilla.github_secret FILTER html %]">
       <input type="hidden" name="target_uri" value="[% Bugzilla.cgi.target_uri FILTER html %]">
diff --git a/extensions/MyDashboard/template/en/default/hook/global/common-links-action-links.html.tmpl b/extensions/MyDashboard/template/en/default/hook/global/header-action-links.html.tmpl
index 518743ccf..bf25e7a88 100644
--- a/extensions/MyDashboard/template/en/default/hook/global/common-links-action-links.html.tmpl
+++ b/extensions/MyDashboard/template/en/default/hook/global/header-action-links.html.tmpl
@@ -7,6 +7,10 @@
   #%]
 
 [% IF user.login %]
-  <li><span class="separator"> | </span>
-    <a href="[% urlbase FILTER none %]page.cgi?id=mydashboard.html">My Dashboard</a></li>
+  <li class="link-dashboard">
+    <a href="[% urlbase FILTER none %]page.cgi?id=mydashboard.html" title="Show My Dashboard">
+      <span class="icon" aria-hidden="true"></span>
+      <span class="label">My Dashboard</span>
+    </a>
+  </li>
 [% END %]
diff --git a/extensions/Review/template/en/default/hook/global/header-message.html.tmpl b/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl
index e4bb1c687..aca61561e 100644
--- a/extensions/Review/template/en/default/hook/global/header-message.html.tmpl
+++ b/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl
@@ -12,7 +12,7 @@
     || user.needinfo_request_count
 %]
 
-<a id="badge"
+<a id="header-flags" class="badge"
   href="request.cgi?action=queue&amp;requestee=[% user.login FILTER uri %]&amp;group=type"
   title="Flags requested of you:
     [%- " review (" _ user.review_request_count _ ")" IF user.review_request_count -%]
diff --git a/extensions/Review/web/styles/badge.css b/extensions/Review/web/styles/badge.css
index e699b5825..53f539df8 100644
--- a/extensions/Review/web/styles/badge.css
+++ b/extensions/Review/web/styles/badge.css
@@ -5,12 +5,16 @@
  * This Source Code Form is "Incompatible With Secondary Licenses", as
  * defined by the Mozilla Public License, v. 2.0. */
 
-#badge {
-    background-color: #c00;
-    font-size: small;
+#header .badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16px;
+    padding: 4px;
+    min-width: 16px;
+    height: 16px;
+    font-size: 14px;
     font-weight: bold;
-    padding: 0 5px;
-    border-radius: 10px;
-    margin: 0 5px;
-    color: #fff !important;
+    color: #FFF !important;
+    background-color: #C00;
 }