Much improved support for context, reorganize dom using divs only, improve html part, and more

svn: r10894

collects/scribblings/main/private/make-search.ss

@@ -178,13 +178,14 @@
     (copy-file src dest)))
 
 (define (make-search user-dir?)
-  (make-paragraph
+  (make-splice
    (list
-    (script-ref "plt-index.js"
+    (make-paragraph
-                #:noscript
+     (list
-                @list{Sorry, you must have JavaScript to use this page.})
+      (script-ref "plt-index.js"
-    (script-ref "search.js")
+                  #:noscript
-    (make-render-element
+                  @list{Sorry, you must have JavaScript to use this page.})
-     (make-with-attributes #f '((id . "plt_search_container")))
+      (script-ref "search.js")
-     null
+      (make-render-element null null
-     (lambda (r s i) (make-script user-dir? r s i))))))
+                           (lambda (r s i) (make-script user-dir? r s i)))))
+    (make-styled-paragraph '() '(div-hack [id "plt_search_container"])))))

collects/scribblings/main/private/search.js

@@ -1,12 +1,14 @@
 // Globally visible bindings
 var key_handler, toggle_panel, hide_prefs, new_query, refine_query,
-    set_pre_query, set_show_manuals, set_show_manual_titles, set_results_num,
+    set_pre_query, set_context_query, set_show_manuals, set_show_manual_titles,
-    set_type_delay, set_highlight_color, status_line, saved_status = false;
+    set_results_num, set_type_delay, set_highlight_color, status_line,
+    saved_status = false, pre_query_label_line;
 
 (function(){
 
 // Configuration options (use || in case a cookie exists but is empty)
 var pre_query          = GetCookie("PLT_PreQuery","");
+var pre_query_label    = GetCookie("PLT_PreQueryLabel",""); // no prefs UI
 var manual_settings    = parseInt(GetCookie("PLT_ManualSettings",1));
 var show_manuals       = manual_settings % 10;
 var show_manual_titles = ((manual_settings - show_manuals) / 10) > 0;
@@ -15,13 +17,15 @@ var type_delay         = (parseInt(GetCookie("PLT_TypeDelay",false)) || 150);
 var highlight_color    = (GetCookie("PLT_HighlightColor",false) || "#ffd");
 var background_color   = "#f8f8f8";
 
-var query, results_container, result_links, prev_page_link, next_page_link;
+var query, results_container, result_links;
+var prev_page_link1, prev_page_link2, next_page_link1, next_page_link2;
 
 // tabIndex fields are set:
 //   1 query
 //   2 index links
 //   3 help/pref toggle
 //   4 pref widgets
+//   5 clear current pre-filter context
 //  -1 prev/next page (un-tab-able)
 
 function MakePref(label, input) {
@@ -37,131 +41,181 @@ function PrefInputArgs(name, desc) {
        +' onchange="set_'+name+'(this); return true;"'
        +' onfocus="saved_status=status_line.innerHTML;'
                  +'status_line.innerHTML=descriptions[\''+name+'\'];"'
-       +' onblur="status_line.innerHTML = saved_status || \'\';"';
+       +' onblur="status_line.innerHTML=(saved_status || \'\');"';
+}
+
+function MakeChevrons(num, middle) {
+  return '<div style="text-align: center;">'
+          +'<a href="#" title="Previous Page" id="prev_page_link'+num+'"'
+            +' tabIndex="-1"'
+            +' style="float: left; text-decoration: none; font-weight: bold;'
+                   +' font-family: monospace;"'
+            +' onclick="key_handler(\'PgUp\'); return false;"'
+            +'>&lt;&lt;</a>'
+          +'<a href="#" title="Next Page" id="next_page_link'+num+'" '
+            +'tabIndex="-1"'
+            +' style="float: right; text-decoration: none; font-weight: bold;'
+                   +' font-family: monospace;"'
+            +' onclick="key_handler(\'PgDn\'); return false;"'
+            +'>&gt;&gt;</a>'
+          +middle
+        +'</div>';
+}
+
+function MakePreQueryItem(qry, desc) {
+  return '<li><a href="?hq='+encodeURIComponent(qry)+'" tabIndex="4"'
+              +' title="set this as your pre-filter context"'
+              +' style="text-decoration: none;"'
+              +' onclick="return new_query(this,\''
+                                   +encodeURIComponent(desc)
+                                   +'\');">'
+              + desc.replace(/{{/g, "<tt><b>").replace(/}}/g, "</b></tt>")
+           + '</a></li>';
+}
+
+function MakeIcon(label,title,action) {
+  return '<a href="#" title="'+title+'" tabIndex="3"'
+          +' style="text-decoration: none; color: black;'
+                 +' font-weight: bold; font-family: monospace;"'
+          +' onclick="'+action+'; return false;"'
+          +'>'+label+'</a>'
 }
 
 function InitializeSearch() {
   var n;
-  n = document.getElementById("plt_search_container").parentNode;
+  n = document.getElementById("plt_search_container");
-  // hack the table in
+  // hack the dom widgets in
-  n.innerHTML = ''
+  var panelbgcolor = "background-color: #f0f0f0;"
-    +'<table width="100%" cellspacing="0" cellpadding="0"'
+  var panelstyle =
-          +' bgcolor='+background_color+' style="margin: 0em; padding: 0em;">'
+    'style="display: none; border: 1px solid #222; border-top: 0px;'
-    +'<tr><td align="center" colspan="2">'
+         +' font-family: arial, sans-serif; margin: 0em 0em 1em 0em;'
-      +'<input type="text" id="search_box" style="width: 100%;"'
+         +' padding: 0.5em; '+panelbgcolor+'"';
-            +' tabIndex="1" onkeydown="return key_handler(event);"'
+  n.innerHTML =
-            +' onkeydown="return key_handler(null);" />'
+    '<div style="width: 100%; margin: 0em; padding: 0em;'
-    +'</td><td class="nobreak">'
+              +' background-color: '+background_color+';">'
-      +'<a href="#" title="help" tabIndex="3"'
+      +'<div style="'+panelbgcolor+'">'
-        +' style="text-decoration: none; font-weight: bold; color: black;"'
+        +'<div style="float: right; border-color: #222; border-style: solid;'
-        +' onclick="toggle_panel(\'help\'); return false;"'
+                   +' border-width: 1px 1px 0px 0px;">'
-        +'><tt><b>[?]</b></tt></a>'
+          +MakeIcon("[?]", "help",        "toggle_panel(\'help\')")
-      +'<a href="#" title="preferences" tabIndex="3"'
+          +MakeIcon("[!]", "preferences", "toggle_panel(\'prefs\')")
-        +' style="text-decoration: none; font-weight: bold; color: black;"'
+        +'</div>'
-        +' onclick="toggle_panel(\'prefs\'); return false;"'
+        +'<input type="text" id="search_box" style="width: 90%;"'
-        +'><tt><b>[!]</b></tt></a>'
+              +' tabIndex="1" onkeydown="return key_handler(event);"'
-    +'</td></tr>'
+              +' onkeydown="return key_handler(null);" />'
-    +'<tr><td colspan="3" class="smaller" style="padding: 0em;">'
+      +'</div>'
-    +'<div id="help_panel"'
+      +'<div id="close_panel"'
-        +' style="display: none; border: 1px solid #222; border-top: 0px;'
+          +' style="display: none; float: right;'
-               +' font-family: arial, sans-serif; margin: 0em 0em 1em 0em;'
+                 +' margin: 0.2em 0.5em; '+panelbgcolor+'">'
-               +' padding: 0.5em; background-color: #f0f0f0;">'
+        +MakeIcon("&#10005;", "close", "toggle_panel(false)")
-      +'<ul style="padding: 0em; margin: 0.5em 1.5em;">'
+      +'</div>'
-      +'<li>Hit <tt>PageUp</tt>/<tt>PageDown</tt> and'
+      +'<div id="help_panel" '+panelstyle+'>'
-         +' <tt>C+Enter</tt>/<tt>S+C+Enter</tt> to scroll through the'
+        +'<ul style="padding: 0em; margin: 0.5em 1.5em;">'
-         +' results.</li>'
+        +'<li>Hit <tt>PageUp</tt>/<tt>PageDown</tt> and'
-      +'<li>Use &ldquo;<tt>M:<i>str</i></tt>&rdquo; to match only identifiers'
+           +' <tt>C+Enter</tt>/<tt>S+C+Enter</tt> to scroll through the'
-         +' from modules that (partially) match'
+           +' results.</li>'
-         +' &ldquo;<tt><i>str</i></tt>&rdquo;; &ldquo;<tt>M:</tt>&rdquo; by'
+        +'<li>Use &ldquo;<tt>M:<i>str</i></tt>&rdquo; to match only'
-         +' itself will restrict results to bound names only.</li>'
+           +' identifiers from modules that (partially) match'
-      +'<li>&ldquo;<tt>L:<i>str</i></tt>&rdquo; is similar to'
+           +' &ldquo;<tt><i>str</i></tt>&rdquo;; &ldquo;<tt>M:</tt>&rdquo; by'
-         +' &ldquo;<tt>M:<i>str</i></tt>&rdquo;, but'
+           +' itself will restrict results to bound names only.</li>'
-         +' &ldquo;<tt><i>str</i></tt>&rdquo; should match the module name'
+        +'<li>&ldquo;<tt>L:<i>str</i></tt>&rdquo; is similar to'
-         +' exactly.</li>'
+           +' &ldquo;<tt>M:<i>str</i></tt>&rdquo;, but'
-      +'<li>&ldquo;<tt>T:<i>str</i></tt>&rdquo; restricts results to ones in'
+           +' &ldquo;<tt><i>str</i></tt>&rdquo; should match the module name'
-         +' the &ldquo;<tt><i>str</i></tt>&rdquo; manual (naming the directory'
+           +' exactly.</li>'
-         +' where the manual is found).</li>'
+        +'<li>&ldquo;<tt>T:<i>str</i></tt>&rdquo; restricts results to ones in'
-      +'<li>Entries that correspond to bindings have module links that create'
+           +' the &ldquo;<tt><i>str</i></tt>&rdquo; manual (naming the'
-         +' a query restricted to bindings in that module (using'
+           +' directory where the manual is found).</li>'
-         +' &ldquo;<tt>L:</tt>&rdquo;), other entries have similar links for'
+        +'<li>Entries that correspond to bindings have module links that'
-         +' restricting results to a specific manual (using'
+           +' create a query restricted to bindings in that module (using'
-         +' &ldquo;<tt>T:</tt>&rdquo;); you can control whether manual links'
+           +' &ldquo;<tt>L:</tt>&rdquo;), other entries have similar links for'
-         +' appear (and how) in the preferences.</li>'
+           +' restricting results to a specific manual (using'
-      +'<li>Right-clicking these links refines the current query instead of'
+           +' &ldquo;<tt>T:</tt>&rdquo;); you can control whether manual links'
-         +' changing it (but some browsers don\'t support this).</li>'
+           +' appear (and how) in the preferences.</li>'
-      +'</ul>'
+        +'<li>Right-clicking these links refines the current query instead of'
-    +'</div></td></tr>'
+           +' changing it (but some browsers don\'t support this).</li>'
-    +'<tr><td colspan="3" class="smaller" style="padding: 0em;">'
+        +'</ul>'
-    +'<div id="prefs_panel"'
+      +'</div>'
-        +' style="display: none; border: 1px solid #222; border-top: 0px;'
+      +'<div id="prefs_panel" '+panelstyle+'>'
-               +' font-family: arial, sans-serif; margin: 0em 0em 1em 0em;'
+        +'<table align="center" style="margin: 0em 2em;">'
-               +' padding: 0.5em; background-color: #f0f0f0;">'
+        + MakePref('Show manuals',
-    +'<table width="100%" align="center" style="margin: 0em 2em;">'
+           '<select '
-      + MakePref('Show manuals',
+                   +PrefInputArgs("show_manuals",
-         '<select '
+                                  "Controls when manual links are shown")
-                 +PrefInputArgs("show_manuals",
+                   +'>'
-                                "Controls when manual links are shown")
+             +'<option>never</option>'
-                 +'>'
+             +'<option>except identifiers</option>'
-           +'<option>never</option>'
+             +'<option>always</option>'
-           +'<option>except identifiers</option>'
+           +'</select>'
-           +'<option>always</option>'
+           +'<input type="checkbox" '
-         +'</select>'
+                   +PrefInputArgs("show_manual_titles",
-         +'<input type="checkbox" '
+                                  "Controls how manual links are shown")
-                 +PrefInputArgs("show_manual_titles",
+                   +'>'
-                                "Controls how manual links are shown")
+           +' use titles')
-                 +'>'
+        + MakePref('Results per page',
-         +' use titles')
+           '<input type="text" '
-      + MakePref('Results per page',
+                   +PrefInputArgs("results_num",
-         '<input type="text" '
+                                  "How many results to show on the page")
-                 +PrefInputArgs("results_num",
+                   +'>')
-                                "How many results to show on the page")
+        + MakePref('Type delay',
-                 +'>')
+           '<input type="text" '
-      + MakePref('Type delay',
+                   +PrefInputArgs("type_delay",
-         '<input type="text" '
+                                  "The delay to wait (in msec) before search"
-                 +PrefInputArgs("type_delay",
+                                  +" results are updated")
-                                "The delay to wait (in msec) before search"
+                   +'>')
-                                +" results are updated")
+        + MakePref('Exact matches color',
-                 +'>')
+           '<input type="text" '
-      + MakePref('Exact matches color',
+                   +PrefInputArgs("highlight_color",
-         '<input type="text" '
+                                  "The color to use for highlighting exact"
-                 +PrefInputArgs("highlight_color",
+                                  +" matches (a known color name or #RGB)")
-                                "The color to use for highlighting exact"
+                   +'>')
-                                +" matches (a known color name or #RGB)")
+        + MakePref('Pre-Query',
-                 +'>')
+           '<input type="text" '
-      + MakePref('Pre-Query',
+                   +PrefInputArgs("pre_query",
-         '<input type="text" '
+                     "A &ldquo;context&rdquo; query that is implicitly added"
-                 +PrefInputArgs("pre_query",
+                     +" to all searches")
-                   "A &ldquo;context&rdquo; query that is implicitly added to"
+                   +'>&nbsp;'
-                   +" all searches, for example, &ldquo;<tt>M:</tt>&rdquo; to"
+           +'<a style="font-size: 82%; color: #444; text-decoration: none;"'
-                   +" search only bindings, &ldquo;<tt>T:reference</tt>&rdquo;"
+             +' href="#" onclick="toggle_panel(\'contexts\'); return false;">'
-                   +" to search only the reference manual")
+            +'[more]</a>')
-                 +'>')
+        +'</table>'
-    +'</table></div></td></tr>'
+      +'</div>'
-    +'<tr valign="top"><td align="left">'
+      +'<div id="contexts_panel" '+panelstyle+'>'
-      +'<a href="#" title="Previous Page" id="prev_page_link" tabIndex="-1"'
+        +'<table align="center" style="margin: 0em 2em;">'
-        +' style="text-decoration: none; font-weight: bold;"'
+          + MakePref('Pre-Query',
-        +' onclick="key_handler(\'PgUp\'); return false;"'
+             '<input type="text" '
-        +'><tt><b>&lt;&lt;</b></tt></a>'
+                     +PrefInputArgs("context_query",
-    +'</td><td align="center" width="100%">'
+                       "A &ldquo;context&rdquo; query that is implicitly added"
-      +'<span id="search_status"'
+                       +" to all searches")
-           +' style="color: #601515; font-weight: bold;">&nbsp;</span>'
+                     +'>')
-    +'</td><td align="right">'
+        +'</table>'
-      +'<a href="#" title="Next Page" id="next_page_link" tabIndex="-1"'
+        +'Clicking the following links will set your pre-query context to a'
-        +' style="text-decoration: none; font-weight: bold;"'
+        +' few common choices:'
-        +' onclick="key_handler(\'PgDn\'); return false;"'
+        +'<ul style="padding: 0em; margin: 0.5em 1.5em;">'
-        +'><tt><b>&gt;&gt;</b></tt></a>'
+        +MakePreQueryItem("M:", "Bindings")
-    +'</td></tr>'
+        +MakePreQueryItem("T:reference", "Reference manual")
-    +'<tr><td colspan="3">'
+        +MakePreQueryItem("M:scheme", "{{scheme}} bindings")
-      +'<span id="search_result"'
+        +MakePreQueryItem("M:scheme/base", "{{scheme/base}} bindings")
-           +' style="display: none;'
+        +'</ul>'
-           +' margin: 0.1em 0em; padding: 0.25em 1em;"></span>'
+      +'</div>'
-    +'</td></tr>'
+      +MakeChevrons(1,
-    +'</table>';
+        '<span id="search_status"'
+            +' style="color: #601515; font-weight: bold;">&nbsp;</span>')
+      +'<div>'
+        +'<div id="search_result"'
+             +' style="display: none;'
+             +' margin: 0.1em 0em; padding: 0.25em 1em;"></div>'
+      +'</div>'
+      +'<br />'
+      +MakeChevrons(2,
+        '<span id="pre_query_label" style="color: #444;">&nbsp;</span>')
+    +'</div>';
   // get the widgets we use
   query = document.getElementById("search_box");
   status_line = document.getElementById("search_status");
-  prev_page_link = document.getElementById("prev_page_link");
+  pre_query_label_line = document.getElementById("pre_query_label");
-  next_page_link = document.getElementById("next_page_link");
+  prev_page_link1 = document.getElementById("prev_page_link1");
+  prev_page_link2 = document.getElementById("prev_page_link2");
+  next_page_link1 = document.getElementById("next_page_link1");
+  next_page_link2 = document.getElementById("next_page_link2");
   // result_links is the array of result link <container,link> pairs
   result_links = new Array();
   n = document.getElementById("search_result");
@@ -257,8 +311,20 @@ function MinComparesRx(pats, str) {
 }
 
 function NormalizeSpaces(str) {
-  return str.replace(/\s\s*/g," ")              // single spaces
+  // use single spaces first, then trim edge spaces
-            .replace(/^ /,"").replace(/ $/,""); // trim edge spaces
+  return str.replace(/\s\s*/g," ").replace(/^ /,"").replace(/ $/,"");
+}
+
+function SanitizeHTML(str) {
+  // Minimal protection against bad html strings
+  // HACK: we don't want to actually parse these things, but we do want a way
+  // to have tt text, so use a "{{...}}" markup for that.
+  return str.replace(/[&]/g, "&amp;")
+            .replace(/>/g,   "&gt;")
+            .replace(/</g,   "&lt;")
+            .replace(/\"/g,  "&quot;")
+            .replace(/{{/g,  "<tt><b>")
+            .replace(/}}/g,  "</b></tt>");
 }
 
 function UrlToManual(url) {
@@ -387,6 +453,34 @@ var search_data; // pre-filtered searchable index data
 function PreFilter() {
   pre_query = NormalizeSpaces(pre_query);
   search_data = Search(plt_search_data, pre_query, true, false)[1];
+  if (pre_query == "") {
+    pre_query_label_line.innerHTML =
+      '<a href="#" tabIndex="5"'
+       +' title="Edit pre-filter context"'
+       +' style="text-decoration: none; color: #444;'
+              +' font-size: 82%; font-weight: bold;"'
+       +' onclick="toggle_panel(\'contexts\'); return false;">'
+       +'[set context]</a>';
+  } else {
+    pre_query_label_line.innerHTML =
+      'Context:&nbsp;'
+      + (((pre_query_label != "") && pre_query_label)
+         ? SanitizeHTML(pre_query_label)
+         : ('&ldquo;' + SanitizeHTML(pre_query) + '&rdquo;'))
+      + '&nbsp;<a href="?hq=" tabIndex="5"'
+                  +' title="Clear pre-filter context"'
+                  +' style="text-decoration: none; color: #444;'
+                         +' font-size: 82%; font-weight: bold;"'
+                  +' onclick="return new_query(this,\'\');">'
+               +'[clear</a>'
+             +'/'
+             +'<a href="#" tabIndex="5"'
+                  +' title="Edit pre-filter context"'
+                  +' style="text-decoration: none; color: #444;'
+                         +' font-size: 82%; font-weight: bold;"'
+                  +' onclick="toggle_panel(\'contexts\'); return false;">'
+               +'modify]</a>';
+  }
   last_search_term = null;
   last_search_term_raw = null;
 }
@@ -459,11 +553,12 @@ function UpdateResults() {
         for (var j=0; j<desc.length; j++)
           note +=
             (j==0 ? "" : ", ")
-            + '<a href="?q=L:' + encodeURIComponent(desc[j]) + '"'
+            + '<a href="?q=' + encodeURIComponent("L:"+desc[j]) + '"'
                +' class="schememod" tabIndex="2"'
-               +' title="show bindings from the '+desc[j]+' module"'
+               +' title="show bindings from the '+desc[j]+' module'
+                       +' (right-click to refine current query)"'
                +' style="text-decoration: none; color: #006;"'
-               +' onclick="return new_query(this);"'
+               +' onclick="return new_query(this,\'\');"'
                +' oncontextmenu="return refine_query(this);">'
             + desc[j] + '</a>';
       } else if (desc == "module") {
@@ -475,9 +570,10 @@ function UpdateResults() {
         note = (note ? (note + " ") : "");
         note += '<span class="smaller">in</span> '
                 + '<a href="?q=T:' + manual + '" tabIndex="2"'
-                   +' title="show entries from the '+manual+' manual"'
+                   +' title="show entries from the '+manual+' manual'
+                           +' (right-click to refine current query)"'
                    +' style="text-decoration: none; color: #006;"'
-                   +' onclick="return new_query(this);"'
+                   +' onclick="return new_query(this,\'\');"'
                    +' oncontextmenu="return refine_query(this);">'
                 + ((typeof idx == "number")
                    ? ('<i>'+UncompactHtml(search_data[idx][2])+'</i>')
@@ -509,6 +605,7 @@ function UpdateResults() {
            + '<div style="color: black; font-size: 82%;">'
            + '(Make sure your spelling is correct'
            + (last_search_term.search(/ /)>=0 ? ', or try fewer keywords' : '')
+           + ((pre_query != "") ? ', or clear the search context' : '')
            + ')</div>';
   } else if (search_results.length <= results_num)
     status_line.innerHTML = "Showing all matches" + exact;
@@ -520,9 +617,9 @@ function UpdateResults() {
       + exact
       + " of " + search_results.length
       + ((search_results.length==search_data.length) ? "" : " matches");
-  prev_page_link.style.color =
+  prev_page_link1.style.color = prev_page_link2.style.color =
     (first_search_result-results_num >= 0) ? "black" : "#e0e0e0";
-  next_page_link.style.color =
+  next_page_link1.style.color = next_page_link2.style.color =
     (first_search_result+results_num < search_results.length)
     ? "black" : "#e0e0e0";
   saved_status = false;
@@ -575,17 +672,22 @@ function HandleKeyEvent(event) {
 }
 key_handler = HandleKeyEvent;
 
-// use this one to set the query field without jumping to the current
+// use this one to set the query field without jumping to the current url
-// url again, since some browsers will reload the whole page for that
+// again, since some browsers will reload the whole page for that (it would be
-// (it would be nice if there was a way to add it to the history too)
+// nice if there was an easy way to add it to the history too)
-function NewQuery(node) {
+function NewQuery(node,label) {
-  var m = node.href.search(/[?]q=[^?&;]+$/);
+  var m, href = node.href;
-  if (m < 0) return true;
+  if ((m = href.search(/[?]q=[^?&;]+$/)) >= 0) { // `q' cannot be empty
-  else {
+    query.value = decodeURIComponent(href.substring(m+3));
-    query.value = decodeURIComponent(node.href.substring(m+3));
     query.focus();
     DoSearch();
     return false;
+  } else if ((m = href.search(/[?]hq=[^?&;]*$/)) >= 0) { // `hq' can
+    SetPreQuery(decodeURIComponent(href.substring(m+4)),
+                decodeURIComponent(label));
+    return false;
+  } else {
+    return true;
   }
 }
 new_query = NewQuery;
@@ -599,7 +701,7 @@ function RefineQuery(node) {
   m = decodeURIComponent(node.href.substring(m+3));
   if (query.value.indexOf(m) >= 0) return true;
   else {
-    query.value = m + " " + query.value;
+    query.value = query.value + " " + m;
     query.focus();
     DoSearch();
     return false;
@@ -609,8 +711,10 @@ refine_query = RefineQuery;
 
 var panel_shown = false;
 function TogglePanel(name) {
-  if (panel_shown)
+  if (panel_shown) {
     document.getElementById(panel_shown+"_panel").style.display = "none";
+    document.getElementById("close_panel").style.display = "none";
+  }
   panel_shown = ((panel_shown != name) && name);
   if (panel_shown == "prefs") {
     document.getElementById("pre_query_pref").value = pre_query;
@@ -620,9 +724,13 @@ function TogglePanel(name) {
     document.getElementById("results_num_pref").value = results_num;
     document.getElementById("type_delay_pref").value = type_delay;
     document.getElementById("highlight_color_pref").value = highlight_color;
+  } else if (panel_shown == "contexts") {
+    document.getElementById("context_query_pref").value = pre_query;
   }
-  if (panel_shown)
+  if (panel_shown) {
     document.getElementById(panel_shown+"_panel").style.display = "block";
+    document.getElementById("close_panel").style.display = "block";
+  }
 }
 toggle_panel = TogglePanel;
 
@@ -643,15 +751,23 @@ function SetShowManuals(inp) {
 }
 set_show_manuals = SetShowManuals;
 
-function SetPreQuery(inp) {
+function SetPreQuery(inp,label) {
-  if (inp.value != pre_query) {
+  // can be called with the input object, or with a string
-    pre_query = inp.value;
+  if (typeof inp != "string") inp = inp.value;
+  if (inp != pre_query) {
+    pre_query = inp;
     SetCookie("PLT_PreQuery", pre_query);
+    label = label || "";
+    pre_query_label = label;
+    SetCookie("PLT_PreQueryLabel",label);
     PreFilter();
+    document.getElementById("pre_query_pref").value = pre_query;
+    document.getElementById("context_query_pref").value   = pre_query;
     DoSearch();
   }
 }
-set_pre_query = SetPreQuery;
+set_pre_query     = SetPreQuery;
+set_context_query = SetPreQuery; // a different widget, same effect
 
 function SetShowManuals(inp) {
   if (inp.selectedIndex != show_manuals) {