Mercurial > hg-stable

changeset 32782:2d93d2159e30

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
hgweb: refresh styling of gitweb's search form gitweb was missing the hint hover box. So that was added. Also, the positioning of the form was absolute and it didn't vertically align on all pages. The element has been moved inline with the navigation links (which now are contained in a div) and flexbox is used to obtain sane alignment of the navigation links and search form. For those new to flexbox, "justify-content: space-between" basically says to maximize space elements. You can use it to easily get left and right justified containers without having to worry about width, floating, etc. "align-items: center" centers all items in a cross-axis. I've literally wasted hours trying to figure out both these problems before flexbox. Flexbox is amazing. Flexbox has been supported by Chrome and Firefox for a few years. But it is only supported by IE 11. I'm willing to wager that people using this either won't be using IE or will be using IE 11. So I'm willing to be a bit aggressive in adopting flexbox because it makes CSS alignment so much easier.
author Gregory Szorc <gregory.szorc@gmail.com>
date Fri, 09 Jun 2017 13:55:51 -0700
parents cb5123eff7d1
children 34be21aa2b26
files mercurial/templates/gitweb/bookmarks.tmpl mercurial/templates/gitweb/branches.tmpl mercurial/templates/gitweb/changelog.tmpl mercurial/templates/gitweb/changeset.tmpl mercurial/templates/gitweb/error.tmpl mercurial/templates/gitweb/fileannotate.tmpl mercurial/templates/gitweb/filecomparison.tmpl mercurial/templates/gitweb/filediff.tmpl mercurial/templates/gitweb/filelog.tmpl mercurial/templates/gitweb/filerevision.tmpl mercurial/templates/gitweb/graph.tmpl mercurial/templates/gitweb/help.tmpl mercurial/templates/gitweb/helptopics.tmpl mercurial/templates/gitweb/manifest.tmpl mercurial/templates/gitweb/map mercurial/templates/gitweb/search.tmpl mercurial/templates/gitweb/shortlog.tmpl mercurial/templates/gitweb/summary.tmpl mercurial/templates/gitweb/tags.tmpl mercurial/templates/static/style-gitweb.css tests/test-hgweb-commands.t tests/test-hgweb-descend-empties.t tests/test-hgweb-symrev.t tests/test-hgweb.t
diffstat 24 files changed, 147 insertions(+), 70 deletions(-) [+]
line wrap: on
line diff
--- a/mercurial/templates/gitweb/bookmarks.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/bookmarks.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / bookmarks
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -23,7 +23,8 @@
 <a href="{url|urlescape}branches{sessionvars%urlparameter}">branches</a> |
 <a href="{url|urlescape}file{sessionvars%urlparameter}">files</a> |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">&nbsp;</div>
--- a/mercurial/templates/gitweb/branches.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/branches.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / branches
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -23,7 +23,8 @@
 branches |
 <a href="{url|urlescape}file{sessionvars%urlparameter}">files</a> |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">&nbsp;</div>
--- a/mercurial/templates/gitweb/changelog.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/changelog.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / changelog
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog/{symrev}{sessionvars%urlparameter}">shortlog</a> |
 changelog |
@@ -26,6 +26,8 @@
 <br/>
 {changenav%nav}<br/>
 </div>
+{searchform}
+</div>
 
 {entries%changelogentry}
 
--- a/mercurial/templates/gitweb/changeset.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/changeset.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / changeset
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog/{symrev}{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log/{symrev}{sessionvars%urlparameter}">changelog</a> |
@@ -25,7 +25,8 @@
 changeset |
 <a href="{url|urlescape}raw-rev/{symrev}">raw</a> {archives%archiveentry} |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div>
--- a/mercurial/templates/gitweb/error.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/error.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / error
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -22,7 +22,8 @@
 <a href="{url|urlescape}branches{sessionvars%urlparameter}">branches</a> |
 <a href="{url|urlescape}file{sessionvars%urlparameter}">files</a> |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="page_body">
--- a/mercurial/templates/gitweb/fileannotate.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/fileannotate.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / annotate
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -31,7 +31,8 @@
 <a href="{url|urlescape}comparison/{symrev}/{file|urlescape}{sessionvars%urlparameter}">comparison</a> |
 <a href="{url|urlescape}raw-file/{symrev}/{file|urlescape}">raw</a> |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">{file|escape}</div>
--- a/mercurial/templates/gitweb/filecomparison.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/filecomparison.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / comparison
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -31,7 +31,8 @@
 comparison |
 <a href="{url|urlescape}raw-diff/{symrev}/{file|urlescape}">raw</a> |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">{file|escape}</div>
--- a/mercurial/templates/gitweb/filediff.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/filediff.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / diff
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -31,7 +31,8 @@
 <a href="{url|urlescape}comparison/{symrev}/{file|urlescape}{sessionvars%urlparameter}">comparison</a> |
 <a href="{url|urlescape}raw-diff/{symrev}/{file|urlescape}">raw</a> |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">{file|escape}</div>
--- a/mercurial/templates/gitweb/filelog.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/filelog.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / file revisions
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -31,6 +31,8 @@
 <br/>
 {nav%filenav}
 </div>
+{searchform}
+</div>
 
 <div class="title" >
   {file|urlescape}{if(linerange,
--- a/mercurial/templates/gitweb/filerevision.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/filerevision.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / file revision
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -31,7 +31,8 @@
 <a href="{url|urlescape}comparison/{symrev}/{file|urlescape}{sessionvars%urlparameter}">comparison</a> |
 <a href="{url|urlescape}raw-file/{symrev}/{file|urlescape}">raw</a> |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">{file|escape}</div>
--- a/mercurial/templates/gitweb/graph.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/graph.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -11,10 +11,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / graph
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog/{symrev}{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log/{symrev}{sessionvars%urlparameter}">changelog</a> |
@@ -27,7 +27,9 @@
 <br/>
 <a href="{url|urlescape}graph/{symrev}{lessvars%urlparameter}">less</a>
 <a href="{url|urlescape}graph/{symrev}{morevars%urlparameter}">more</a>
-| {changenav%navgraph}<br/>
+| {changenav%navgraph}
+</div>
+{searchform}
 </div>
 
 <div class="title">&nbsp;</div>
--- a/mercurial/templates/gitweb/help.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/help.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / help
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -23,7 +23,8 @@
 <a href="{url|urlescape}branches{sessionvars%urlparameter}">branches</a> |
 <a href="{url|urlescape}file{sessionvars%urlparameter}">files</a> |
 help
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">&nbsp;</div>
--- a/mercurial/templates/gitweb/helptopics.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/helptopics.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / help
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -26,7 +26,8 @@
   '<a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>',
   'help'
 )}
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">&nbsp;</div>
--- a/mercurial/templates/gitweb/manifest.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/manifest.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / files
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -24,7 +24,8 @@
 files |
 <a href="{url|urlescape}rev/{symrev}{sessionvars%urlparameter}">changeset</a> {archives%archiveentry} |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">{path|escape} <span class="logtags">{inbranch%inbranchtag}{branches%branchtag}{tags%tagtag}{bookmarks%bookmarktag}</span></div>
--- a/mercurial/templates/gitweb/map	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/map	Fri Jun 09 13:55:51 2017 -0700
@@ -325,9 +325,12 @@
 breadcrumb = '&gt; <a href="{url|urlescape}">{name|escape}</a> '
 
 searchform = '
-  <form action="{url|urlescape}log">
-    {sessionvars%hiddenformentry}
-    <div class="search">
-      <input type="text" name="rev" value="{query|escape}" />
-    </div>
-  </form>'
+  <div class="search">
+    <form id="searchform" action="{url|urlescape}log">
+      {sessionvars%hiddenformentry}
+      <input name="rev" type="text" value="{query|escape}" size="40" />
+      <div id="hint">{searchhint}</div>
+    </form>
+  </div>'
+searchhint = 'Find changesets by keywords (author, files, the commit message), revision
+  number or hash, or <a href="{url|urlescape}help/revsets">revset expression</a>.'
--- a/mercurial/templates/gitweb/search.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/search.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / search
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -24,7 +24,8 @@
 <a href="{url|urlescape}file{sessionvars%urlparameter}">files</a>{archives%archiveentry}
  |
  <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">searching for {query|escape}</div>
--- a/mercurial/templates/gitweb/shortlog.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/shortlog.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / shortlog
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 shortlog |
 <a href="{url|urlescape}log/{symrev}{sessionvars%urlparameter}">changelog</a> |
@@ -25,6 +25,8 @@
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
 <br/>{changenav%navshort}<br/>
 </div>
+{searchform}
+</div>
 
 <div class="title">&nbsp;</div>
 <table class="shortlogtable" cellspacing="0">
--- a/mercurial/templates/gitweb/summary.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/summary.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / summary
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 summary |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -23,7 +23,8 @@
 <a href="{url|urlescape}branches{sessionvars%urlparameter}">branches</a> |
 <a href="{url|urlescape}file{sessionvars%urlparameter}">files</a>{archives%archiveentry} |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">&nbsp;</div>
--- a/mercurial/templates/gitweb/tags.tmpl	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/gitweb/tags.tmpl	Fri Jun 09 13:55:51 2017 -0700
@@ -10,10 +10,10 @@
 <div class="page_header">
 <a href="{logourl}" title="Mercurial" style="float: right;">Mercurial</a>
 <a href="/">Mercurial</a> {pathdef%breadcrumb} / tags
-{searchform}
 </div>
 
 <div class="page_nav">
+<div>
 <a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a> |
 <a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a> |
 <a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a> |
@@ -23,7 +23,8 @@
 <a href="{url|urlescape}branches{sessionvars%urlparameter}">branches</a> |
 <a href="{url|urlescape}file{sessionvars%urlparameter}">files</a> |
 <a href="{url|urlescape}help{sessionvars%urlparameter}">help</a>
-<br/>
+</div>
+{searchform}
 </div>
 
 <div class="title">&nbsp;</div>
--- a/mercurial/templates/static/style-gitweb.css	Fri Jun 09 13:45:36 2017 -0700
+++ b/mercurial/templates/static/style-gitweb.css	Fri Jun 09 13:55:51 2017 -0700
@@ -4,7 +4,12 @@
 div.page_header { height:25px; padding:8px; font-size:18px; font-weight:bold; background-color:#d9d8d1; }
 div.page_header a:visited { color:#0000cc; }
 div.page_header a:hover { color:#880000; }
-div.page_nav { padding:8px; }
+div.page_nav {
+    padding:8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 div.page_nav a:visited { color:#0000cc; }
 div.page_path { padding:8px; border:solid #d9d8d1; border-width:0px 0px 1px}
 div.page_footer { padding:4px 8px; background-color: #d9d8d1; }
@@ -52,7 +57,23 @@
 div.pre { font-family:monospace; font-size:12px; white-space:pre; }
 div.diff_info { font-family:monospace; color:#000099; background-color:#edece6; font-style:italic; }
 div.index_include { border:solid #d9d8d1; border-width:0px 0px 1px; padding:12px 8px; }
-div.search { margin:4px 8px; position:absolute; top:56px; right:12px }
+
+.search {
+    margin-right: 8px;
+}
+
+div#hint {
+  position: absolute;
+  display: none;
+  width: 250px;
+  padding: 5px;
+  background: #ffc;
+  border: 1px solid yellow;
+  border-radius: 5px;
+}
+
+#searchform:hover div#hint { display: block; }
+
 tr.thisrev a { color:#999999; text-decoration: none; }
 tr.thisrev pre { color:#009900; }
 td.annotate {
--- a/tests/test-hgweb-commands.t	Fri Jun 09 13:45:36 2017 -0700
+++ b/tests/test-hgweb-commands.t	Fri Jun 09 13:55:51 2017 -0700
@@ -1533,16 +1533,10 @@
   <div class="page_header">
   <a href="https://mercurial-scm.org/" title="Mercurial" style="float: right;">Mercurial</a>
   <a href="/">Mercurial</a>  / summary
-  
-  <form action="/log">
-  <input type="hidden" name="style" value="gitweb" />
-  <div class="search">
-  <input type="text" name="rev" value="" />
-  </div>
-  </form>
   </div>
   
   <div class="page_nav">
+  <div>
   summary |
   <a href="/shortlog?style=gitweb">shortlog</a> |
   <a href="/log?style=gitweb">changelog</a> |
@@ -1552,7 +1546,16 @@
   <a href="/branches?style=gitweb">branches</a> |
   <a href="/file?style=gitweb">files</a> |
   <a href="/help?style=gitweb">help</a>
-  <br/>
+  </div>
+  
+  <div class="search">
+  <form id="searchform" action="/log">
+  <input type="hidden" name="style" value="gitweb" />
+  <input name="rev" type="text" value="" size="40" />
+  <div id="hint">Find changesets by keywords (author, files, the commit message), revision
+  number or hash, or <a href="/help/revsets">revset expression</a>.</div>
+  </form>
+  </div>
   </div>
   
   <div class="title">&nbsp;</div>
@@ -1733,16 +1736,10 @@
   <div class="page_header">
   <a href="https://mercurial-scm.org/" title="Mercurial" style="float: right;">Mercurial</a>
   <a href="/">Mercurial</a>  / graph
-  
-  <form action="/log">
-  <input type="hidden" name="style" value="gitweb" />
-  <div class="search">
-  <input type="text" name="rev" value="" />
-  </div>
-  </form>
   </div>
   
   <div class="page_nav">
+  <div>
   <a href="/summary?style=gitweb">summary</a> |
   <a href="/shortlog/tip?style=gitweb">shortlog</a> |
   <a href="/log/tip?style=gitweb">changelog</a> |
@@ -1755,7 +1752,17 @@
   <br/>
   <a href="/graph/tip?revcount=30&style=gitweb">less</a>
   <a href="/graph/tip?revcount=120&style=gitweb">more</a>
-  | <a href="/graph/2ef0ac749a14?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> <br/>
+  | <a href="/graph/2ef0ac749a14?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> 
+  </div>
+  
+  <div class="search">
+  <form id="searchform" action="/log">
+  <input type="hidden" name="style" value="gitweb" />
+  <input name="rev" type="text" value="" size="40" />
+  <div id="hint">Find changesets by keywords (author, files, the commit message), revision
+  number or hash, or <a href="/help/revsets">revset expression</a>.</div>
+  </form>
+  </div>
   </div>
   
   <div class="title">&nbsp;</div>
--- a/tests/test-hgweb-descend-empties.t	Fri Jun 09 13:45:36 2017 -0700
+++ b/tests/test-hgweb-descend-empties.t	Fri Jun 09 13:55:51 2017 -0700
@@ -405,16 +405,10 @@
   <div class="page_header">
   <a href="https://mercurial-scm.org/" title="Mercurial" style="float: right;">Mercurial</a>
   <a href="/">Mercurial</a>  / files
-  
-  <form action="/log">
-  <input type="hidden" name="style" value="gitweb" />
-  <div class="search">
-  <input type="text" name="rev" value="" />
-  </div>
-  </form>
   </div>
   
   <div class="page_nav">
+  <div>
   <a href="/summary?style=gitweb">summary</a> |
   <a href="/shortlog?style=gitweb">shortlog</a> |
   <a href="/log?style=gitweb">changelog</a> |
@@ -425,7 +419,16 @@
   files |
   <a href="/rev/tip?style=gitweb">changeset</a>  |
   <a href="/help?style=gitweb">help</a>
-  <br/>
+  </div>
+  
+  <div class="search">
+  <form id="searchform" action="/log">
+  <input type="hidden" name="style" value="gitweb" />
+  <input name="rev" type="text" value="" size="40" />
+  <div id="hint">Find changesets by keywords (author, files, the commit message), revision
+  number or hash, or <a href="/help/revsets">revset expression</a>.</div>
+  </form>
+  </div>
   </div>
   
   <div class="title">/ <span class="logtags"><span class="branchtag" title="default">default</span> <span class="tagtag" title="tip">tip</span> </span></div>
--- a/tests/test-hgweb-symrev.t	Fri Jun 09 13:45:36 2017 -0700
+++ b/tests/test-hgweb-symrev.t	Fri Jun 09 13:55:51 2017 -0700
@@ -482,7 +482,7 @@
   <a href="/file/tip?style=gitweb">files</a> |
   <a href="/graph/tip?revcount=30&style=gitweb">less</a>
   <a href="/graph/tip?revcount=120&style=gitweb">more</a>
-  | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> <br/>
+  | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> 
   <a href="/graph/tip?revcount=30&style=gitweb">less</a>
   <a href="/graph/tip?revcount=120&style=gitweb">more</a>
   | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> 
@@ -572,7 +572,7 @@
   <a href="/file/xyzzy?style=gitweb">files</a> |
   <a href="/graph/xyzzy?revcount=30&style=gitweb">less</a>
   <a href="/graph/xyzzy?revcount=120&style=gitweb">more</a>
-  | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> <br/>
+  | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> 
   <a href="/graph/xyzzy?revcount=30&style=gitweb">less</a>
   <a href="/graph/xyzzy?revcount=120&style=gitweb">more</a>
   | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> 
--- a/tests/test-hgweb.t	Fri Jun 09 13:45:36 2017 -0700
+++ b/tests/test-hgweb.t	Fri Jun 09 13:55:51 2017 -0700
@@ -340,7 +340,7 @@
 
   $ get-with-headers.py --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server
   200 Script output follows
-  content-length: 8012
+  content-length: 8265
   content-type: text/css
   
   body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; background: white; color: black; }
@@ -349,7 +349,12 @@
   div.page_header { height:25px; padding:8px; font-size:18px; font-weight:bold; background-color:#d9d8d1; }
   div.page_header a:visited { color:#0000cc; }
   div.page_header a:hover { color:#880000; }
-  div.page_nav { padding:8px; }
+  div.page_nav {
+      padding:8px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
   div.page_nav a:visited { color:#0000cc; }
   div.page_path { padding:8px; border:solid #d9d8d1; border-width:0px 0px 1px}
   div.page_footer { padding:4px 8px; background-color: #d9d8d1; }
@@ -397,7 +402,23 @@
   div.pre { font-family:monospace; font-size:12px; white-space:pre; }
   div.diff_info { font-family:monospace; color:#000099; background-color:#edece6; font-style:italic; }
   div.index_include { border:solid #d9d8d1; border-width:0px 0px 1px; padding:12px 8px; }
-  div.search { margin:4px 8px; position:absolute; top:56px; right:12px }
+  
+  .search {
+      margin-right: 8px;
+  }
+  
+  div#hint {
+    position: absolute;
+    display: none;
+    width: 250px;
+    padding: 5px;
+    background: #ffc;
+    border: 1px solid yellow;
+    border-radius: 5px;
+  }
+  
+  #searchform:hover div#hint { display: block; }
+  
   tr.thisrev a { color:#999999; text-decoration: none; }
   tr.thisrev pre { color:#009900; }
   td.annotate {