Bug 1154730: rewrite product/component searching to use jquery-ui instead of yui

2 files changed, 44 insertions, 31 deletions

diff --git a/extensions/ProdCompSearch/template/en/default/pages/prodcompsearch.html.tmpl b/extensions/ProdCompSearch/template/en/default/pages/prodcompsearch.html.tmpl
index 5b39315b5..6e28d88e5 100644
--- a/extensions/ProdCompSearch/template/en/default/pages/prodcompsearch.html.tmpl
+++ b/extensions/ProdCompSearch/template/en/default/pages/prodcompsearch.html.tmpl
@@ -10,15 +10,15 @@
 
 [% PROCESS global/header.html.tmpl
    title = "File a $terms.Bug"
-   javascript_urls = [ "js/yui3/yui/yui-min.js",
-                       "extensions/ProdCompSearch/web/js/prod_comp_search.js" ]
+   javascript_urls = [ "extensions/ProdCompSearch/web/js/prod_comp_search.js" ]
    style_urls = [ "extensions/ProdCompSearch/web/styles/prod_comp_search.css" ]
 %]
 
 <div id="prod_comp_search_main">
   [% PROCESS prodcompsearch/form.html.tmpl
-     query_header = "File a $terms.Bug:"
-     script_name  = "enter_bug.cgi"
+     input_label = "File a $terms.Bug:"
+     script_name = "enter_bug.cgi"
+     auto_focus  = 1
   %]
 </div>
 
diff --git a/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl b/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl
index 38f87dc1a..4239a9738 100644
--- a/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl
+++ b/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl
@@ -6,35 +6,48 @@
   # defined by the Mozilla Public License, v. 2.0.
   #%]
 
-[% DEFAULT max_results = 100 %]
-<script type="text/javascript">
-  [% IF script_name %]
-    ProdCompSearch.script_name = '[% script_name FILTER js %]';
-  [% END %]
-  [% IF format %]
-    ProdCompSearch.format = '[% format FILTER js %]';
-  [% END %]
-  [% IF cloned_bug_id %]
-    ProdCompSearch.cloned_bug_id = '[% cloned_bug_id FILTER js %]';
-  [% END %]
-  [% IF new_tab %]
-    ProdCompSearch.new_tab = true;
-  [% END %]
-  ProdCompSearch.max_results = [% max_results FILTER js %];
-</script>
+[%#
+  # parameters (all are optional, defaults below)
+  # id               : id and prefix of elements
+  # script_name      : .cgi to redirect to
+  # max_results      : maximum results displayed
+  # input_label      : input field label
+  # auto_focus       : focus the search form on page load
+  # format           : format parameter passed to cgi
+  # cloned_bug_id    : cloned_bug_id parameter
+  # new_tab          : open in a new tab
+  # anchor_component : append #component to url
+  #%]
+
+[%
+  DEFAULT id = "pcs";
+  DEFAULT max_results = 100;
+  DEFAULT script_name = "enter_bug.cgi";
+%]
 
-<div id="prod_comp_search_form" class="yui3-skin-sam">
-  <div id="prod_comp_search_header">
+<div class="pcs-form">
+  <div class="pcs-header">
     [% input_label FILTER none %]&nbsp;
-    <img id="prod_comp_throbber" src="extensions/ProdCompSearch/web/images/throbber.gif"
-         class="bz_default_hidden" width="16" height="11">
-    <span id="prod_comp_no_components" class="bz_default_hidden">
-      No components found</span>
-    <span id="prod_comp_too_many_components" class="bz_default_hidden">
+    <img id="[% id FILTER html %]-throbber"
+      src="extensions/ProdCompSearch/web/images/throbber.gif"
+      style="display:none" width="16" height="11">
+    <span class="pcs-message" id="[% id FILTER html %]-no_components" style="display:none">
+      No components found
+    </span>
+    <span class="pcs-message" id="[% id FILTER html %]-too_many_components" style="display:none">
       Result limited to [% max_results FILTER html %] components
-    <span id="prod_comp_error" class="bz_default_hidden">
-      An error occured</span>
+    </span>
+    <span class="pcs-message" id="[% id FILTER html %]-error" style="display:none">
+      An error occured
+    </span>
   </div>
-  <input id="prod_comp_search" type="text" size="50"
-         placeholder="Search by product and component keywords">
+  <input type="text" class="prod_comp_search" id="[% id FILTER html %]" size="50"
+    placeholder="Search by product and component keywords"
+    data-script_name="[% script_name FILTER html %]"
+    data-format="[% format FILTER html %]"
+    data-cloned_bug_id="[% cloned_bug_id FILTER html %]"
+    data-new_tab="[% new_tab ? "1" : "0" %]"
+    data-anchor_component="[% anchor_component ? "1" : "0" %]"
+    data-max_results="[% max_results FILTER html %]"
+    [% "autofocus" IF auto_focus %]>
 </div>