Bug 1426685 - Fix regressions from fixed-positioning global header

15 files changed, 93 insertions, 94 deletions

diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index b70a838c1..0fbc536b9 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -826,10 +826,10 @@ body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
 
 /* theme */
 
-#bugzilla-body {
+#main-inner {
+    margin: 15px auto;
     max-width: 1024px;
     min-width: 800px;
-    width: 100%;
 }
 
 .vcard {
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index 1218b4f27..c1080cde8 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -141,7 +141,7 @@ $(function() {
     $('#top-btn')
         .click(function(event) {
             event.preventDefault();
-            $.scrollTo($('body'));
+            $.scrollTo($('#main-inner'));
         });
 
     // bottom btn
@@ -1421,31 +1421,26 @@ $(function() {
             return -1;
         },
 
-        // Bring an element into view, leaving space for the outline.
-        // If passed a string, it will be treated as an id - the page will scroll
-        // unanimated and the url will be added to the browser's history.
-        // If passed an element, an smooth scroll will take place and no entry
-        // will be added to the history.
+        // Bring an element into view, leaving space for the outline. If passed
+        // a string, it will be treated as an id - the page will scroll and the
+        // url will be added to the browser's history. If passed an element, no
+        // entry will be added to the history.
         scrollTo: function(target, complete) {
+            let $target;
+
             if (typeof target === 'string') {
-                var el = $('#' + target);
+                $target = $('#' + target);
                 window.location.hash = target;
-                var $html = $('html');
-                if (Math.abs($html.scrollTop() - el.offset().top) <= 1) {
-                    $html.scrollTop($html.scrollTop() - 10);
-                }
-                $html.scrollLeft(0);
+            } else {
+                $target = target;
             }
-            else {
-                var offset = target.offset();
-                $('html')
-                    .animate({
-                            scrollTop: offset.top - 20,
-                            scrollLeft: 0
-                        },
-                        200,
-                        complete
-                    );
+
+            if ($target.length) {
+                $('main').scrollTop(Math.round($target.position().top) - 20);
+            }
+
+            if (complete) {
+                complete();
             }
         }
 
diff --git a/extensions/BugModal/web/common_bug_modal.css b/extensions/BugModal/web/common_bug_modal.css
index b71254cc0..473c4a445 100644
--- a/extensions/BugModal/web/common_bug_modal.css
+++ b/extensions/BugModal/web/common_bug_modal.css
@@ -815,10 +815,10 @@ body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
 
 /* theme */
 
-#bugzilla-body {
+#main-inner {
+    margin: 15px auto;
     max-width: 1024px;
     min-width: 800px;
-    width: 100%;
 }
 
 .vcard {
diff --git a/extensions/BugModal/web/common_bug_modal.js b/extensions/BugModal/web/common_bug_modal.js
index cc7f31dfd..160f922cc 100644
--- a/extensions/BugModal/web/common_bug_modal.js
+++ b/extensions/BugModal/web/common_bug_modal.js
@@ -141,7 +141,7 @@ $(function() {
     $('#top-btn')
         .click(function(event) {
             event.preventDefault();
-            $.scrollTo($('body'));
+            $.scrollTo($('#main-inner'));
         });
 
     // bottom btn
@@ -1348,31 +1348,26 @@ $(function() {
             return -1;
         },
 
-        // Bring an element into view, leaving space for the outline.
-        // If passed a string, it will be treated as an id - the page will scroll
-        // unanimated and the url will be added to the browser's history.
-        // If passed an element, an smooth scroll will take place and no entry
-        // will be added to the history.
+        // Bring an element into view, leaving space for the outline. If passed
+        // a string, it will be treated as an id - the page will scroll and the
+        // url will be added to the browser's history. If passed an element, no
+        // entry will be added to the history.
         scrollTo: function(target, complete) {
+            let $target;
+
             if (typeof target === 'string') {
-                var el = $('#' + target);
+                $target = $('#' + target);
                 window.location.hash = target;
-                var $html = $('html');
-                if (Math.abs($html.scrollTop() - el.offset().top) <= 1) {
-                    $html.scrollTop($html.scrollTop() - 10);
-                }
-                $html.scrollLeft(0);
+            } else {
+                $target = target;
             }
-            else {
-                var offset = target.offset();
-                $('html')
-                    .animate({
-                            scrollTop: offset.top - 20,
-                            scrollLeft: 0
-                        },
-                        200,
-                        complete
-                    );
+
+            if ($target.length) {
+                $('main').scrollTop(Math.round($target.position().top) - 20);
+            }
+
+            if (complete) {
+                complete();
             }
         }
 
diff --git a/js/global.js b/js/global.js
index 2b353a69e..93f364c9e 100644
--- a/js/global.js
+++ b/js/global.js
@@ -192,6 +192,16 @@ $().ready(function() {
 });
 
 /**
+ * Focus the main content when the page is loaded and there is no autofocus
+ * element, so the user can immediately scroll down the page using keyboard.
+ */
+const focus_main_content = () => {
+    if (!document.querySelector('[autofocus]')) {
+        document.querySelector('main').focus();
+    }
+}
+
+/**
  * Check if Gravatar images on the page are successfully loaded, and if blocked
  * (by any content blocker), replace them with the default/fallback image.
  */
@@ -210,17 +220,16 @@ const detect_blocked_gravatars = () => {
  */
 const scroll_element_into_view = () => {
     if (location.hash) {
-        const $header = document.querySelector('#header');
-        const $comment = document.querySelector(location.hash);
+        const $main = document.querySelector('main');
+        const $target = document.querySelector(location.hash);
 
-        if ($comment) {
-            window.setTimeout(() => {
-                window.scrollTo(0, $comment.offsetTop - $header.offsetHeight - 20);
-            }, 250);
+        if ($target) {
+            window.setTimeout(() => $main.scrollTop = $target.offsetTop - 20, 50);
         }
     }
 }
 
+window.addEventListener('DOMContentLoaded', focus_main_content, { once: true });
 window.addEventListener('load', detect_blocked_gravatars, { once: true });
 window.addEventListener('load', scroll_element_into_view, { once: true });
 window.addEventListener('hashchange', scroll_element_into_view);
diff --git a/js/instant-search.js b/js/instant-search.js
index 8277b97a9..946f8ccfc 100644
--- a/js/instant-search.js
+++ b/js/instant-search.js
@@ -15,7 +15,6 @@ Event.onDOMReady(function() {
   } else {
     YAHOO.bugzilla.instantSearch.reset();
   }
-  Dom.get('content').focus();
 });
 
 YAHOO.bugzilla.instantSearch = {
diff --git a/skins/standard/global.css b/skins/standard/global.css
index a00839de9..ab0a68a11 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -36,10 +36,13 @@
 
 /* global (begin) */
     body {
+        position: absolute;
+        margin: 0;
+        width: 100%;
+        height: 100%;
         font-family: sans-serif;
         color: #000;
         background: #fff url("global/body-back.gif") repeat-x;
-        scroll-behavior: smooth;
     }
     body, td, th, input {
         font-family: Verdana, sans-serif;
@@ -51,25 +54,25 @@
     }
 /* global (end) */
 
-/* header (begin) */
-    #header {
+/* wrapper (begin) */
+    #wrapper {
+        display: flex;
+        flex-direction: column;
         position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 1000;
         width: 100%;
+        height: 100%;
+    }
+/* wrapper (end) */
+
+/* header (begin) */
+    #header {
+        flex: none;
         border-bottom: 1px solid rgba(0, 0, 0, 0.2);
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
         color: #555;
         background-color: #FFF;
     }
 
-    @media only screen and (min-device-width: 1024px) {
-        #header {
-            position: fixed; /* Make the header fixed on desktop */
-        }
-    }
-
     #header a,
     #header a:visited,
     #header a:hover {
@@ -398,6 +401,7 @@
         position: absolute;
         top: 48px;
         right: 0;
+        z-index: 100;
         display: flex;
         align-items: center;
         padding: 8px;
@@ -1127,6 +1131,7 @@ hr {
 }
 
 #mfa-warning {
+    flex: none;
     margin: 0 -15px;
     padding: 10px 15px;
     color: #FFF;
@@ -1134,10 +1139,17 @@ hr {
 }
 
 #bugzilla-body {
-    background: none;
-    border: none;
-    color: #404040;
-    margin: 15px auto 0;
+    flex: auto;
+    position: relative;
+    outline: none;
+    padding: 0 15px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+}
+
+#main-inner {
+    margin: 15px 0;
 }
 
 #bugzilla-body th {
@@ -1625,11 +1637,6 @@ table.tabs {
     padding-bottom: 6px;
 }
 
-body {
-    margin: 0;
-    padding: 50px 15px 15px;
-}
-
 #header .btn, #header .txt {
     font-size: 100%;
 }
diff --git a/skins/standard/page.css b/skins/standard/page.css
index da0c3be8d..82d4bacb1 100644
--- a/skins/standard/page.css
+++ b/skins/standard/page.css
@@ -20,11 +20,8 @@
 /* This CSS is used by various informational pages in the
    template/en/default/pages/ directory. */
 
-#bugzilla-body {
-    padding: 0 1em;
-}
-
-#bugzilla-body > * {
+#main-inner {
+    margin: 15px auto;
     /* People have an easier time reading narrower columns of text. */
     max-width: 45em;
 }
diff --git a/template/en/default/bug/summarize-time.html.tmpl b/template/en/default/bug/summarize-time.html.tmpl
index 50c777063..120bd74ad 100644
--- a/template/en/default/bug/summarize-time.html.tmpl
+++ b/template/en/default/bug/summarize-time.html.tmpl
@@ -282,7 +282,7 @@
   <b><label accesskey="s" 
              for="start_date">Period <u>s</u>tarting</label></b>: 
 </td><td colspan="3">
-  <input type="text" id="start_date" name="start_date" size="11"
+  <input type="text" id="start_date" name="start_date" size="11" autofocus
          align="right" value="[% start_date FILTER html %]" maxlength="10"
          onchange="updateCalendarFromField(this)">
   <button type="button" class="calendar_button"
@@ -345,7 +345,6 @@
 <!--
   createCalendar('start_date');
   createCalendar('end_date');
-  document.forms['summary'].start_date.focus();
 //--></script>
 <hr noshade size=1>
 [% END %]
diff --git a/template/en/default/global/footer.html.tmpl b/template/en/default/global/footer.html.tmpl
index 7922e494b..f1ad69fc9 100644
--- a/template/en/default/global/footer.html.tmpl
+++ b/template/en/default/global/footer.html.tmpl
@@ -19,7 +19,9 @@
   #                 Svetlana Harisova <light@rathedg.com>
   #%]
 
+</div> [%# main-inner %]
 </main> [%# bugzilla-body %]
+</div> [%# wrapper %]
 
 [% Hook.process("end") %]
 
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index f339b80b1..5d00b7216 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -234,6 +234,7 @@
   # 'bannerhtml'
   #%]
 
+<div id="wrapper">
 <header id="header" role="banner">
   <div class="inner">
     <h1 id="header-title" class="title"><a href="./" title="Go to home page">[% terms.Bugzilla %]</a></h1>
@@ -376,7 +377,8 @@
   </aside>
 [% END %]
 
-<main id="bugzilla-body">
+<main id="bugzilla-body" tabindex="-1">
+<div id="main-inner">
 
 [%# in most cases the "header" variable provides redundant information, however
   # there are exceptions where not displaying this text is problematic. %]
diff --git a/template/en/default/search/field.html.tmpl b/template/en/default/search/field.html.tmpl
index a2ff5718b..0d10d4f6b 100644
--- a/template/en/default/search/field.html.tmpl
+++ b/template/en/default/search/field.html.tmpl
@@ -43,6 +43,7 @@
     %]    
     <input name="[% field.name FILTER html %]" 
            id="[% field.name FILTER html %]" size="40"
+           [% IF autofocus %] autofocus[% END %]
            [% IF onchange %] onchange="[% onchange FILTER html %]"[% END %]
            value="[% value FILTER html %]">              
   [% CASE constants.FIELD_TYPE_KEYWORDS %]
diff --git a/template/en/default/search/form.html.tmpl b/template/en/default/search/form.html.tmpl
index 02357e473..49c311806 100644
--- a/template/en/default/search/form.html.tmpl
+++ b/template/en/default/search/form.html.tmpl
@@ -141,11 +141,8 @@ TUI_hide_default('information_query');
          value = default.short_desc.0
          type_selected = default.short_desc_type.0 
          accesskey = "s"
+         autofocus = 1
          %]
-      <script> <!--
-          document.forms[queryform].short_desc.focus(); 
-      // -->
-      </script>
 
       [% IF button_name %]
         <input type="submit" id="[% button_name FILTER css_class_quote %]_top"
diff --git a/template/en/default/search/search-instant.html.tmpl b/template/en/default/search/search-instant.html.tmpl
index 8e4298654..01af804fc 100644
--- a/template/en/default/search/search-instant.html.tmpl
+++ b/template/en/default/search/search-instant.html.tmpl
@@ -71,7 +71,7 @@ YAHOO.bugzilla.instantSearch.setLabels( {
       <b><label for="content">Words:</label></b>
     </td>
     <td>
-      <input id="content" spellcheck="true" size="60"
+      <input id="content" spellcheck="true" size="60" autofocus
              value="[% default.content.0 FILTER html %]">
     </td>
   </tr>
diff --git a/template/en/default/search/search-specific.html.tmpl b/template/en/default/search/search-specific.html.tmpl
index 79b5b2932..3b4cc3514 100644
--- a/template/en/default/search/search-specific.html.tmpl
+++ b/template/en/default/search/search-specific.html.tmpl
@@ -98,12 +98,8 @@ for "crash secure SSL flash".
       <label for="content">Words:</label>
     </th>
     <td>
-      <input name="content" size="60" id="content"
+      <input name="content" size="60" id="content" autofocus
              value="[% default.content.0 FILTER html %]">
-      <script> <!--
-          document.forms['queryform'].content.focus(); 
-      // -->
-      </script>
     </td>
   </tr>
   <tr>