Bug 1420771 - Remove global footer

3 files changed, 100 insertions, 142 deletions

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;
     }