Add extra links on hover to blame lines Issue 5 has some debate about where the blame line link should go. We were resisting adding 2-3 extra links to every blame line, which would be a little busy. Instead, use a CSS hover menu. This does raise the issue of discoverability, but the target audience is someone who is already interested in clicking on a blame line, so hopefully their mouse is in the area already. Moreover, hover does not play nice with non-mouse (e.g. touch) input devices. This is a valid concern for Gitiles in general, but for the particular application of blame, we want to make it as easy as possible for power users on desktops to navigate the large variety of options without cluttering the page too much. Change-Id: I6e1e33864cef81f326490d543740ce985249b703
diff --git a/gitiles-servlet/src/main/java/com/google/gitiles/blame/BlameServlet.java b/gitiles-servlet/src/main/java/com/google/gitiles/blame/BlameServlet.java index a950272..8259a9d 100644 --- a/gitiles-servlet/src/main/java/com/google/gitiles/blame/BlameServlet.java +++ b/gitiles-servlet/src/main/java/com/google/gitiles/blame/BlameServlet.java
@@ -130,15 +130,22 @@ abbrevSha = reader.abbreviate(r.getSourceCommit()).name(); abbrevShas.put(r.getSourceCommit(), abbrevSha); } - result.add(ImmutableMap.of( - "abbrevSha", abbrevSha, - "url", GitilesView.diff().copyFrom(view) - .setRevision(r.getSourceCommit().name()) - .setPathPart(r.getSourcePath()) - .setAnchor("F0") - .toUrl(), - "author", CommitSoyData.toSoyData(r.getSourceAuthor(), df), - "count", r.getCount())); + Map<String, Object> e = Maps.newHashMapWithExpectedSize(6); + e.put("abbrevSha", abbrevSha); + e.put("blameUrl", GitilesView.blame().copyFrom(view) + .setRevision(r.getSourceCommit().name()) + .setPathPart(r.getSourcePath()) + .toUrl()); + e.put("commitUrl", GitilesView.revision().copyFrom(view) + .setRevision(r.getSourceCommit().name()) + .toUrl()); + e.put("diffUrl", GitilesView.diff().copyFrom(view) + .setRevision(r.getSourceCommit().name()) + .setPathPart(r.getSourcePath()) + .toUrl()); + e.put("author", CommitSoyData.toSoyData(r.getSourceAuthor(), df)); + e.put("count", r.getCount()); + result.add(e); } } return result;
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/static/gitiles.css b/gitiles-servlet/src/main/resources/com/google/gitiles/static/gitiles.css index f99a26e..0dbd477 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/static/gitiles.css +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/static/gitiles.css
@@ -372,6 +372,31 @@ border-top: 0; } +#regions li { + position: relative; +} +#regions li.line:hover { + background-color: #eee; +} +#regions li .regionMenu { + position: absolute; + top: 13px; + left: 0; + visibility: hidden; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 8px; + padding-right: 8px; + + background-color: #eee; + font-size: 8pt; + font-family: arial,sans-serif; + z-index: 101; +} +#regions li:hover .regionMenu { + visibility: visible; +} + /* Override some styles from the default prettify.css. */ /* Line numbers on all lines. */
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/BlameDetail.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/BlameDetail.soy index ce9135e..0118d92 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/BlameDetail.soy +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/BlameDetail.soy
@@ -26,11 +26,13 @@ * following keys: * abbrevSha: abbreviated SHA-1 of revision for this line; if missing, * assume blame info is missing. - * url: URL for detail about the revision * author: author information with at least "name" and "relativeTime" * keys. * relativeTime: relative time of the revision * count: line count + * blameUrl: URL for a blame of this file at this commit + * commitUrl: URL for detail about the commit + * diffUrl: URL for a diff of this file at this commit */ {template .blameDetail} {if $regions} @@ -50,13 +52,18 @@ <td> <ul id="regions"> {foreach $region in $regions} - <li> + <li class="line"> {if $region.abbrevSha} - <a href="{$region.url}" class="commit"> + <a href="{$region.commitUrl}"> <span class="sha1">{$region.abbrevSha}</span> {sp}<span class="author">{$region.author.name}</span> {sp}<span class="time">- {$region.author.relativeTime}</span> </a> + <div class="regionMenu"> + [<a href="{$region.commitUrl}">commit</a>] + {sp}[<a href="{$region.diffUrl}">diff</a>] + {sp}[<a href="{$region.blameUrl}">blame</a>] + </div> {else} {/if}