Completion page; functional version.

5 files changed, 46 insertions, 9 deletions

diff --git a/pages/completion_engines.coffee b/pages/completion_engines.coffee
index 8b137891..aa8bb6cc 100644
--- a/pages/completion_engines.coffee
+++ b/pages/completion_engines.coffee
@@ -1 +1,20 @@
 
+DomUtils.documentReady ->
+  html = ""
+  for engine in CompletionEngines[0...CompletionEngines.length-1]
+    engine = new engine
+    html += "<h4>#{engine.constructor.name}</h4>\n"
+    html += "<div class=\"engine\">"
+    if engine.regexps
+      html += "<pre>"
+      for re in engine.regexps
+        re = re.toString().replace(/^\//, '').replace /\/$/, ''
+        html += "#{re}\n"
+      html += "</pre>"
+    if engine.prefix
+      html += "<p>This uses the general Google completion engine, but adds the prefix \"<tt>#{engine.prefix.trim()}</tt>\" to the query.</p>"
+    html += "</div>"
+
+  document.getElementById("engineList").innerHTML = html
+
+
diff --git a/pages/completion_engines.css b/pages/completion_engines.css
new file mode 100644
index 00000000..3e3aab1f
--- /dev/null
+++ b/pages/completion_engines.css
@@ -0,0 +1,15 @@
+
+div#wrapper
+{
+  width: 730px;
+}
+
+h4, h5
+{
+   color: #777;
+}
+
+div.engine
+{
+  margin-left: 20px;
+}
diff --git a/pages/completion_engines.html b/pages/completion_engines.html
index 42c60e31..69158c78 100644
--- a/pages/completion_engines.html
+++ b/pages/completion_engines.html
@@ -3,8 +3,10 @@
     <title>Vimium Search Completion</title>
     <!-- We re-use some styling from the options page, so that the look and feel here is similar -->
     <link rel="stylesheet" type="text/css" href="options.css">
+    <link rel="stylesheet" type="text/css" href="completion_engines.css">
     <script src="content_script_loader.js"></script>
     <script type="text/javascript" src="../lib/settings.js"></script>
+    <script src="../background_scripts/completion_engines.js"></script>
     <script src="completion_engines.js"></script>
   </head>
 
@@ -13,17 +15,17 @@
       <header>Vimium Search Completion</header>
       <p>
         Search completion is available for custom search engines whose search URL matches one of Vimium's
-        built-in completion engines.  Search completion is not available for the default search engine.
+        built-in completion engines; that is, the search URL matches one of the regular expressions below.
+        Search completion is not available for the default search engine.
       </p>
       <p>
-        Custom search engines are configured on the <a href="options.html">options</a> page.
+        Custom search engines can be configured on the <a href="options.html" target="_blank">options</a>
+        page. <br/>
+        Further information is available on the <a href="https://github.com/philc/vimium/wiki/Search-Completion">wiki</a>.
       </p>
       <header>Available Completion Engines</header>
       <p>
-        The following completion engines are available.
-        <dl id="engineList">
-          {{{ENGINES}}}
-        </dl>
+        <dl id="engineList"></dl>
       </p>
     </div>
   </body>
diff --git a/pages/options.css b/pages/options.css
index ffb348c6..282a523b 100644
--- a/pages/options.css
+++ b/pages/options.css
@@ -114,7 +114,7 @@ input#scrollStepSize, input#omniSearchWeight {
 }
 textarea#userDefinedLinkHintCss, textarea#keyMappings, textarea#searchEngines {
   width: 100%;;
-  min-height: 130px;
+  min-height: 140px;
   white-space: nowrap;
 }
 input#previousPatterns, input#nextPatterns {
diff --git a/pages/options.html b/pages/options.html
index b14c454f..7b66efde 100644
--- a/pages/options.html
+++ b/pages/options.html
@@ -44,7 +44,7 @@ unmap j
 unmapAll
 " this is a comment
 # this is also a comment</pre>
-                <a href="#" id="showCommands">Show available commands.</a>
+                <a href="#" id="showCommands">Show available commands</a>.
               </div>
             </div>
             <textarea id="keyMappings" type="text"></textarea>
@@ -61,7 +61,8 @@ a: http://a.com/?q=%s
 b: http://b.com/?q=%s description
 " this is a comment
 # this is also a comment</pre>
-                  %s is replaced with the search terms.
+                  %s is replaced with the search terms. <br/>
+                  For search completion, see <a href="completion_engines.html" target="_blank">here</a>.
                 </div>
               </div>
               <textarea id="searchEngines"></textarea>