Bug 182082: Help system should support more browsers - Patch by Teemu Mannermaa <wicked+bz@etlicon.fi> r=myk a=LpSolit

7 files changed, 284 insertions, 33 deletions

diff --git a/js/help.js b/js/help.js
new file mode 100644
index 000000000..938a73a8b
--- /dev/null
+++ b/js/help.js
@@ -0,0 +1,108 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is the Bugzilla Bug Tracking System.
+ *
+ * The Initial Developer of the Original Code is
+ * Netscape Communications Corporation.
+ * Portions created by the Initial Developer are Copyright (C) 1998
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Gervase Markham <gerv@gerv.net>
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+var g_helpTexts = new Object();
+var g_helpIframe;
+var g_helpDiv;
+
+/**
+ * Generate help controls during page construction.
+ *
+ * @return Boolean; true if controls were created and false if not.
+ */
+function generateHelp()
+{
+    // Only enable help if controls can be hidden
+    if (!document.body.style)
+        return false;
+
+    // Create help controls (a div to hold help text and an iframe
+    // to mask any and all controls under the popup)
+    document.write('<div id="helpDiv" style="display: none;"><\/div>');
+    document.write('<iframe id="helpIframe" src="about:blank"');
+    document.write('        frameborder="0" scrolling="no"><\/iframe>');
+
+    return true;
+}
+
+/**
+ * Enable help popups for all form elements after the page has finished loading.
+ *
+ * @return Boolean; true if help was enabled and false if not.
+ */
+function enableHelp()
+{
+    g_helpIframe = document.getElementById('helpIframe');
+    g_helpDiv = document.getElementById('helpDiv');
+    if (!g_helpIframe || !g_helpDiv) // Disabled if no controls found
+        return false;
+
+    // MS decided to add fieldsets to the elements array; and
+    // Mozilla decided to copy this brokenness. Grr.
+    for (var i = 0; i < document.forms.length; i++) {
+        for (var j = 0; j < document.forms[i].elements.length; j++) {
+            if (document.forms[i].elements[j].tagName != 'FIELDSET') {
+                document.forms[i].elements[j].onmouseover = showHelp;
+            }
+        }
+    }
+
+    document.body.onclick = hideHelp;
+    return true;
+}
+
+/**
+ * Show the help popup for a form element.
+ */
+function showHelp() {
+    if (!g_helpIframe || !g_helpDiv || !g_helpTexts[this.name])
+        return;
+
+    // Get the position and size of the form element in the document
+    var elemY = bz_findPosY(this);
+    var elemX = bz_findPosX(this);
+    var elemH = this.offsetHeight;
+
+    // Update help text displayed in the div
+    g_helpDiv.innerHTML = ''; // Helps IE 5 Mac
+    g_helpDiv.innerHTML = g_helpTexts[this.name];
+
+    // Position and display the help popup
+    g_helpIframe.style.top = g_helpDiv.style.top = elemY + elemH + 5 + "px";
+    g_helpIframe.style.left = g_helpDiv.style.left = elemX + "px";
+    g_helpIframe.style.display = g_helpDiv.style.display = '';
+    g_helpIframe.style.width = g_helpDiv.offsetWidth + "px";
+    g_helpIframe.style.height = g_helpDiv.offsetHeight + "px";
+}
+
+/**
+ * Hide the help popup.
+ */
+function hideHelp() {
+    if (!g_helpIframe || !g_helpDiv)
+        return;
+
+    g_helpIframe.style.display = g_helpDiv.style.display = 'none';
+}
diff --git a/js/util.js b/js/util.js
new file mode 100644
index 000000000..9d2209093
--- /dev/null
+++ b/js/util.js
@@ -0,0 +1,116 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is the Cross Platform JavaScript Utility Library.
+ *
+ * The Initial Developer of the Original Code is
+ * Everything Solved.
+ * Portions created by the Initial Developer are Copyright (C) 2007
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Max Kanat-Alexander <mkanat@bugzilla.org>
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/**
+ * Locate where an element is on the page, x-wise.
+ *
+ * @param  obj Element of which location to return.
+ * @return     Current position of the element relative to the left of the
+ *             page window. Measured in pixels.
+ */
+function bz_findPosX(obj)
+{
+    var curleft = 0;
+
+    if (obj.offsetParent) {
+        while (obj) {
+            curleft += obj.offsetLeft;
+            obj = obj.offsetParent;
+        }
+    }
+    else if (obj.x) {
+        curleft += obj.x;
+    }
+
+    return curleft;
+}
+
+/**
+ * Locate where an element is on the page, y-wise.
+ *
+ * @param  obj Element of which location to return.
+ * @return     Current position of the element relative to the top of the
+ *             page window. Measured in pixels.
+ */
+function bz_findPosY(obj)
+{
+    var curtop = 0;
+
+    if (obj.offsetParent) {
+        while (obj) {
+            curtop += obj.offsetTop;
+            obj = obj.offsetParent;
+        }
+    }
+    else if (obj.y) {
+        curtop += obj.y;
+    }
+
+    return curtop;
+}
+
+/**
+ * Get the full height of an element, even if it's larger than the browser
+ * window.
+ *
+ * @param  fromObj Element of which height to return.
+ * @return         Current height of the element. Measured in pixels.
+ */
+function bz_getFullHeight(fromObj)
+{
+    var scrollY;
+
+    // All but Mac IE
+    if (fromObj.scrollHeight > fromObj.offsetHeight) {
+        scrollY = fromObj.scrollHeight;
+    // Mac IE
+    }  else {
+        scrollY = fromObj.offsetHeight;
+    }
+
+    return scrollY;
+}
+
+/**
+ * Get the full width of an element, even if it's larger than the browser
+ * window.
+ *
+ * @param  fromObj Element of which width to return.
+ * @return         Current width of the element. Measured in pixels.
+ */
+function bz_getFullWidth(fromObj)
+{
+    var scrollX;
+
+    // All but Mac IE
+    if (fromObj.scrollWidth > fromObj.offsetWidth) {
+        scrollX = fromObj.scrollWidth;
+    // Mac IE
+    }  else {
+        scrollX = fromObj.offsetWidth;
+    }
+
+    return scrollX;
+}
diff --git a/skins/standard/help.css b/skins/standard/help.css
new file mode 100644
index 000000000..bc888cabb
--- /dev/null
+++ b/skins/standard/help.css
@@ -0,0 +1,41 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is the Bugzilla Bug Tracking System.
+ *
+ * The Initial Developer of the Original Code is
+ * Netscape Communications Corporation.
+ * Portions created by the Initial Developer are Copyright (C) 1998
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Gervase Markham <gerv@gerv.net>
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* Help system */
+#helpDiv {
+    border-style: solid;
+    border-color: #F0A000;
+    background-color: white;
+    padding: 5px;
+    position: absolute;
+    z-index: 2;
+}
+
+#helpIframe {
+    overflow: hidden;
+    position: absolute;
+    z-index: 1;
+    display: none;
+}
diff --git a/template/en/default/filterexceptions.pl b/template/en/default/filterexceptions.pl
index 72ab1550a..f605ca82e 100644
--- a/template/en/default/filterexceptions.pl
+++ b/template/en/default/filterexceptions.pl
@@ -216,11 +216,6 @@
   'bug.bug_id', 
 ],
 
-'global/help.html.tmpl' => [
-  'h.id', 
-  'h.html', 
-],
-
 'global/choose-product.html.tmpl' => [
   'target',
 ],
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index ec906f3e6..ad1df396d 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -82,8 +82,6 @@
       [% END %]
     [% END %]
 
-    [%+ INCLUDE "global/help-header.html.tmpl" %]
-
     [%# Set up the skin CSS cascade:
       #  1. Standard Bugzilla stylesheet set (persistent)
       #  2. Standard Bugzilla stylesheet set (selectable)
diff --git a/template/en/default/global/help.html.tmpl b/template/en/default/global/help.html.tmpl
index cc69534da..4ac309f90 100644
--- a/template/en/default/global/help.html.tmpl
+++ b/template/en/default/global/help.html.tmpl
@@ -23,12 +23,11 @@
 [% cgi = Bugzilla.cgi %]
 
 [% IF cgi.param("help") %]
-  [% IF cgi.user_agent("Mozilla/5") %]
-      [% FOREACH h = help_html %]
-      <div id="[% h.id %]_help" class="help" style="display: none;">
-        [%- h.html -%]  
-      </div>
-      [% END %]
-  [% END %]
+  <script type="text/javascript"> <!--
+    [% FOREACH h = help_html %]
+      g_helpTexts["[% h.id FILTER js %]"] = "[%- h.html FILTER js -%]";
+    [% END %]
+    // -->
+  </script>
 [% END %]
 
diff --git a/template/en/default/search/search-advanced.html.tmpl b/template/en/default/search/search-advanced.html.tmpl
index 5d9849caf..22dc1dd7d 100644
--- a/template/en/default/search/search-advanced.html.tmpl
+++ b/template/en/default/search/search-advanced.html.tmpl
@@ -37,9 +37,10 @@ var queryform = "queryform"
 
 [% PROCESS global/header.html.tmpl
   title = "Search for $terms.bugs"
-  onload = "doOnSelectProduct(0); initHelp();"
+  onload = "doOnSelectProduct(0); enableHelp();"
   javascript = js_data
-  javascript_urls = [ "js/productform.js" ]
+  javascript_urls = [ "js/productform.js" "js/util.js" "js/help.js" ]
+  style_urls = [ "skins/standard/help.css" ]
   style = "dl.bug_changes dt {
              margin-top: 15px;
            }"
@@ -50,25 +51,19 @@ var queryform = "queryform"
 [% button_name = "Search" %]
 
 [%# The decent help requires Javascript %]
+<script type="text/javascript"> <!--
 [% IF NOT cgi.param("help") %]
-  [% IF cgi.user_agent("Mozilla/5") %]
-    <script type="text/javascript"> <!--
-      document.write("<p><a href='query.cgi?help=1&amp;format=advanced'>Give me some help<\/a> (reloads page).<\/p>");
-      // -->
-    </script>
-  [% END %]
+  document.write("<p><a href='query.cgi?help=1&amp;format=advanced'>Give me some help<\/a> (reloads page).<\/p>");
 [% ELSE %]
-  <p>
-      For help, mouse over the page elements.
-      <font color="red">
-      [% IF cgi.user_agent("Mozilla/5") %]
-        Note that if the help popups are hidden by form element scroll bars,
-        this is a b<!-- word broken up to pass test 009 -->ug in your browser,
-        not in [% terms.Bugzilla %].
-      [% END %]
-    </font>
-  </p>
+  [% PROCESS "search/search-help.html.tmpl" %]
+  if (generateHelp())
+    document.write("<p>For help, mouse over the page elements.<\/p>");
+  else
+    document.write("<p>Help initialization failed, no help available.<\/p>");
 [% END %]
+// -->
+</script>
+
 <form method="get" action="buglist.cgi" name="queryform">
 
 [% PROCESS search/form.html.tmpl %]
@@ -81,7 +76,6 @@ var queryform = "queryform"
 
 </form>
 
-[% PROCESS "search/search-help.html.tmpl" IF cgi.param("help") %]
 
 [% END %]