[CSS] Overhaul of CSS and UX clean up. + CSS is written using the SUITCSS conventions outlined here: https://github.com/suitcss/suit/tree/master/doc + Moved from XHTML -> HTML5. + New flexbox-based layout for all pages. + General cleanup of styles and UI. These changes are to increase readability, reduce clutter in the UI, and establish a visual hierarchy that's persistent across pages. High contrast and larger font sizes are favored. + Some random FE cleanup within the soy and servlets. Change-Id: I2af6c140e82d34d12191bafb5b01f60926370b0b
diff --git a/gitiles-servlet/src/main/java/com/google/gitiles/HostIndexServlet.java b/gitiles-servlet/src/main/java/com/google/gitiles/HostIndexServlet.java index aa2208a..d8aec26 100644 --- a/gitiles-servlet/src/main/java/com/google/gitiles/HostIndexServlet.java +++ b/gitiles-servlet/src/main/java/com/google/gitiles/HostIndexServlet.java
@@ -126,7 +126,6 @@ renderHtml(req, res, "gitiles.hostIndex", ImmutableMap.of( "hostName", hostName, "breadcrumbs", SoyData.createFromExistingData(breadcrumbs), - "baseUrl", urls.getBaseGitUrl(req), "prefix", prefix != null ? prefix + '/' : "", "repositories", repos)); }
diff --git a/gitiles-servlet/src/main/java/com/google/gitiles/HtmlDiffFormatter.java b/gitiles-servlet/src/main/java/com/google/gitiles/HtmlDiffFormatter.java index 84f6abf..efccc4a 100644 --- a/gitiles-servlet/src/main/java/com/google/gitiles/HtmlDiffFormatter.java +++ b/gitiles-servlet/src/main/java/com/google/gitiles/HtmlDiffFormatter.java
@@ -37,15 +37,15 @@ /** Formats a unified format patch as UTF-8 encoded HTML. */ final class HtmlDiffFormatter extends DiffFormatter { - private static final byte[] DIFF_BEGIN = "<pre class=\"diff-unified\">".getBytes(UTF_8); + private static final byte[] DIFF_BEGIN = "<pre class=\"u-pre Diff-unified\">".getBytes(UTF_8); private static final byte[] DIFF_END = "</pre>".getBytes(UTF_8); - private static final byte[] HUNK_BEGIN = "<span class=\"h\">".getBytes(UTF_8); + private static final byte[] HUNK_BEGIN = "<span class=\"Diff-hunk\">".getBytes(UTF_8); private static final byte[] HUNK_END = "</span>".getBytes(UTF_8); - private static final byte[] LINE_INSERT_BEGIN = "<span class=\"i\">".getBytes(UTF_8); - private static final byte[] LINE_DELETE_BEGIN = "<span class=\"d\">".getBytes(UTF_8); - private static final byte[] LINE_CHANGE_BEGIN = "<span class=\"c\">".getBytes(UTF_8); + private static final byte[] LINE_INSERT_BEGIN = "<span class=\"Diff-insert\">".getBytes(UTF_8); + private static final byte[] LINE_DELETE_BEGIN = "<span class=\"Diff-delete\">".getBytes(UTF_8); + private static final byte[] LINE_CHANGE_BEGIN = "<span class=\"Diff-change\">".getBytes(UTF_8); private static final byte[] LINE_END = "</span>\n".getBytes(UTF_8); private final Renderer renderer;
diff --git a/gitiles-servlet/src/main/java/com/google/gitiles/LogSoyData.java b/gitiles-servlet/src/main/java/com/google/gitiles/LogSoyData.java index 0508561..8a46db1 100644 --- a/gitiles-servlet/src/main/java/com/google/gitiles/LogSoyData.java +++ b/gitiles-servlet/src/main/java/com/google/gitiles/LogSoyData.java
@@ -67,13 +67,13 @@ out.flush(); SoyTofu.Renderer entryRenderer = renderer.newRenderer("gitiles.logEntryWrapper"); - boolean first = true; + boolean renderedEntries = false; for (RevCommit c : paginator) { - entryRenderer.setData(toEntrySoyData(paginator, c, df, first)).render(out); + entryRenderer.setData(toEntrySoyData(paginator, c, df)).render(out); out.flush(); - first = false; + renderedEntries = true; } - if (first) { + if (!renderedEntries) { renderer.newRenderer("gitiles.emptyLog").render(out); } @@ -83,8 +83,7 @@ } private Map<String, Object> toHeaderSoyData(Paginator paginator, @Nullable String revision) { - Map<String, Object> data = Maps.newHashMapWithExpectedSize(5); - data.put("logEntryPretty", pretty); + Map<String, Object> data = Maps.newHashMapWithExpectedSize(1); ObjectId prev = paginator.getPreviousStart(); if (prev != null) { GitilesView.Builder prevView = copyAndCanonicalizeView(revision); @@ -96,16 +95,14 @@ return data; } - private Map<String, Object> toEntrySoyData(Paginator paginator, RevCommit c, DateFormatter df, - boolean first) throws IOException { + private Map<String, Object> toEntrySoyData(Paginator paginator, RevCommit c, DateFormatter df) + throws IOException { if (csd == null) { csd = new CommitSoyData(); } - Map<String, Object> entry = csd.setRevWalk(paginator.getWalk()) - .toSoyData(req, c, fields, df); + Map<String, Object> entry = csd.setRevWalk(paginator.getWalk()).toSoyData(req, c, fields, df); return ImmutableMap.of( - "firstWithPrevious", first && paginator.getPreviousStart() != null, "variant", variant, "entry", entry); }
diff --git a/gitiles-servlet/src/main/java/com/google/gitiles/Renderer.java b/gitiles-servlet/src/main/java/com/google/gitiles/Renderer.java index 7aec30f..9defb71 100644 --- a/gitiles-servlet/src/main/java/com/google/gitiles/Renderer.java +++ b/gitiles-servlet/src/main/java/com/google/gitiles/Renderer.java
@@ -69,7 +69,7 @@ "RepositoryIndex.soy"); public static final Map<String, String> STATIC_URL_GLOBALS = ImmutableMap.of( - "gitiles.CSS_URL", "gitiles.css", + "gitiles.BASE_CSS_URL", "base.css", "gitiles.DOC_CSS_URL", "doc.css", "gitiles.PRETTIFY_CSS_URL", "prettify/prettify.css");
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 c8ba7be..7f18de2 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
@@ -188,7 +188,8 @@ } } - private static final ImmutableList<String> CLASSES = ImmutableList.of("bg1", "bg2"); + private static final ImmutableList<String> CLASSES = + ImmutableList.of("Blame-region--bg1", "Blame-region--bg2"); private static final ImmutableList<SoyMapData> NULLS; static { ImmutableList.Builder<SoyMapData> nulls = ImmutableList.builder();
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css b/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css new file mode 100644 index 0000000..3d21c70 --- /dev/null +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css
@@ -0,0 +1,466 @@ +/** + * Copyright 2015 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* Common styles and definitions. */ + +@import "//fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,cyrillic-ext,greek-ext,cyrillic,greek,vietnamese,latin-ext"; + +*, +*::after, +*::before { + box-sizing: border-box; + margin: 0; + padding: 0; +} +h1, h2, h3, h4, h5, h6 { + font-weight: normal; + margin: .25em 0 .5em; +} +h1 { + font-size: 2em; +} +h2 { + font-size: 1.5em; +} +h3 { + font-size: 1.3em; +} +h4, h5, h6 { + font-size: 14px; + font-style: italic; +} +ul, ol { + list-style: none; +} + +/* Utility classes */ + +.u-sha1 { + background-color: #f1f2f3; + color: #000; + font-family: monospace; + font-size: 13px; +} +.u-pre { + font-size: 10pt; + font-family: monospace; + font-weight: 500; + white-space: pre; +} +.u-lineNum { + border-right: 1px solid #f1f2f3; + color: #666; + display: inline-block; + min-width: 3em; + text-align: right; +} +.u-noSelect { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* Common.soy */ + +.Site { + background: #fff; + color: #000; + display: flex; + font: 14px/1.54 'Open Sans', sans-serif; + min-height: 100vh; + flex-direction: column; +} +.Site-header, +.Site-footer { + background: #eee; + flex: none; +} +.Site-content { + flex: 1 0 auto; + padding: 20px; +} +.Container { + margin: 0 auto; + max-width: 980px; +} +.Container--fullWidth { + max-width: none; +} +.Header, +.Footer { + align-items: center; + display: flex; + padding: 20px; +} +.Header-title { + flex: 1; +} +.Header-menu { + display: flex; + justify-content: flex-end; +} +.Header-menuItem { + color: #00e; + display: inline-block; + margin-left: 15px; +} +.Header-menuItem--noAction { + color: inherit; +} +.Breadcrumbs { + font-size: 18px; + margin-bottom: 20px; +} +.Breadcrumbs-crumb { + color: #00e; +} +.Breadcrumbs-crumb:last-child { + color: #000; + font-weight: bold; +} +.Footer { + color: #666; +} +.Footer-poweredBy { + flex: 1; +} +.Footer-formats, +.Footer-links { + display: flex; + justify-content: flex-end; +} +.Footer-formatsItem { + display: inline-block; + font-family: monospace; +} +.Footer-formatsItem:first-child { + margin-right: 20px; +} +.Footer-link { + display: inline-block; + margin-left: 10px; +} +.RepoList-item { + display: flex; + left: -10px; + padding: 5px 0 5px 10px; + position: relative; + white-space: nowrap; + width: calc(100% + 20px); +} +.RepoList-item:link, +.RepoList-item:visited { + text-decoration: none; +} +.RepoList-item:hover { + background: #eee; +} +.RepoList-item--header { + font-weight: bold; + margin: 0; +} +.RepoList-item--header:hover { + background: #fff; +} +.RepoList-itemName, +.RepoList-itemDescription { + display: inline-block; +} +.RepoList-itemName { + min-width: 25%; + text-decoration: underline; +} +.RepoList-item--header > .RepoList-itemName { + text-decoration: none; +} +.RepoList-itemDescription { + color: #000; + overflow: hidden; + text-overflow: ellipsis; +} + +/* RepositoryIndex.soy */ + +.RepoDescription { + margin: 10px 0; +} +.RepoMirroredFrom { + margin: 10px 0; + color: #666; +} +.CloneRepo { + background: #eee; + margin-bottom: 20px; + padding: 10px; +} +.CloneRepo-title { + margin-bottom: 2px; +} +.CloneRepo-command { + border: 1px solid #ccc; + border-radius: 4px; + display: block; + font-size: inherit; + font-family: monospace; + padding: 10px; + width: 100%; +} +.RepoShortlog { + display: flex; +} +.RepoShortlog-refs { + flex: none !important; + width: 20%; +} +.RepoShortlog-refs > .RefList:first-child { + margin: 0; +} +.RepoShortlog-log { + flex: 1; +} +.RepoIndexDoc { + border-top: 1px solid #ddd; + margin-top: 20px; + padding-top: 5px; +} + +/* RefList.soy */ + +.Refs {} +.RefList { + margin: 15px 0; +} +.RefList-title { + margin: 0; +} +.RefList-items {} +.RefList-item { + padding: 2px 0; +} + +/* LogDetail.soy */ + +.LogNav { + margin: 10px 0; + text-align: center; +} +.CommitLog {} +.CommitLog-item { + padding: 2px 0; +} +.CommitLog-item--oneline:hover { + background: #eee; +} +.CommitLog-item--full { + margin-bottom: 20px; +} +.CommitLog-item--empty { + padding: 10px 0; + text-align: center; +} +.CommitLog-sha1 { + border-radius: 3px; + display: inline-block; + margin-right: 3px; + padding: 2px 4px; + text-align: center; +} +.CommitLog-time { + color: #666; +} +.CommitLog-branchLabel { + color: #dd4b39; +} +.CommitLog-tagLabel { + color: #093; +} + +/* ObjectDetail.soy */ + +.Metadata { + font-family: monospace; + margin-bottom: 15px; +} +.Metadata-title { + font-weight: bold; + padding-right: 10px; + text-align: right; +} +.MetadataMessage { + background-color: #fafafa; + border: 1px solid #ccc; + color: #000; + margin: 0; + padding: 12px; + white-space: pre-wrap; +} +.DiffTree { + margin: 10px 0 5px; +} +.DiffTree-action { + margin-left: .5em; +} +.DiffTree-action--add { + color: #060; +} +.DiffTree-action--delete { + color: #600; +} +.DiffTree-action--rename, +.DiffTree-action--copy { + color: #006; +} +.DiffSummary {} +.TreeDetail-sha1, +.BlobSha1 { + margin: 10px 0; + padding: 5px 10px; +} +.FileList { + margin-left: 25px; +} +.FileList-item { + padding: 1px 0; + position: relative; +} +.FileList-item:hover { + background: #eee; +} +.FileList-item::before { + left: -22px; + position: absolute; + top: 4px; +} +.FileList-itemLink { + display: block; +} +/* Tree icons are taken from the public domain Tango icons: + * http://tango.freedesktop.org/Tango_Icon_Library + * Compressed with pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt */ +.FileList-item--gitTree::before { + /* places/folder.png */ + content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAb5JREFUOMulkr1KA0EQgGdvTwwnYmER0gQsrFKmSy+pLESw9Qm0F/ICNnba+h6iEOuAEWslKJKTOyJJvIT72d1xZuOFC0giOLA77O7Mt/PnNptN+I+49Xr9GhH3f3mb0v1ht9vtLAUYYw5ItkgDL3KyD8PhcLvdbl/WarXT3DjLMnAcR/f7/YfxeKwtgC5RKQVhGILWeg4hQ6hUKjWyucmhLFEUuWR3QYBWAZABQ9i5CCmXy16pVALP80BKaaG+70MQBLvzFMjRKKXh8j6FSYKF7ITdEWLa4/ktokN74wiqjSMpnVcbQZqmEJHz+ckeCPFjWKwULpyspAqhdXVXdcnZcPjsIgn+2BsVA8jVYuWlgJ3yBj0icgq2uoK+lg4t+ZvLomSKamSQ4AI5BcMADtMhyNoSgNIISUaFNtwlazcDcBc4gjjVwCWid2usCWroYEhnaqbzFJLUzAHIXRDChXCcQP8zhkSZ5eNLgHAUzwDcRu4CoIRn/wsGUQIIy4Vr9TH6SYFCNzw4nALn5627K4vIttOUOwfa5YnrDYzt/9OLv9I5l8kk5hZ3XLO20b7tbR7zHLy/BX8G0IeBEM7ZN1NGIaFUaKLgAAAAAElFTkSuQmCC); +} +.FileList-item--symlink::before { + /* actions/edit-redo.png */ + content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAABZUlEQVQ4y2NgIAL4zWL7D8TGDOQCqAEg7Ey2Aes+58AMcSSkmB2I3YB4HhCfh9kOMoCgIUAJMyDe2D+b58jKe553133M+r/uU/b/zV+L/y97n/i/+JIYbkOAAl5AfGLNTde/69+n/1/4MuD/gtsqKBhkALIh5S0M1jDN2kC8a+UNt/8b36f+X3JP5f/0u1pwjeuvS8E1g3DpZQm4ITAD5s09ZPBq49uE/0vvq4E1gPCJC5z/yy+IoGgG4a5HJqjeCJ3Pc2vjy+T/ux4Y/j99Rfz/7GtK/xfeUkbBN+8pY9cMAkFzuT5uepPy/+w1lf+TF3L/Q4p3OD5zRQ67Zlg873vk9n/mMlaQ5EcgLgZiA2R5nJphCjbfNP8LVeCBJyUa40xpO+5afQXS/8jKC0DJg+uPKx+bOJf1HDYXEJPW46JW8LcduKYzbdZMph4gn4ccQxSAOAuIo4FYdvsKFpYdK1iYCekDACq5JXDHGJhDAAAAAElFTkSuQmCC); +} +.FileList-item--regularFile::before { + /* mimetypes/text-x-generic.png */ + content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAtElEQVQ4ja2TSw7CIBRFu0r3wyIYsAMHDl1CC92IDqC0wAbQi4Fo5VOMJGcAyT33vQEDY+xCCPGdnIZ48NB7kPkSLMvipZQBpVQC70Br7Y0xZQGC4zj6aZoCnPMPhBBtwb41NoN1XesCBHPNhyfI7fziFu6HJti3IgS0vrcFuZ3Btm2JpmC/M5jnOdEU5JoRstYmigKES80x7JyrC+IE7+1xAoSrgp//AqX02vsbn5nz8K/zAP9CzjbgFoHjAAAAAElFTkSuQmCC); +} +.FileList-item--executableFile::before { + /* mimetypes/text-x-script.png */ + content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA7ADsAOwdIxY2AAAACXBIWXMAAAsTAAALEwEAmpwYAAABOklEQVQ4T5WTTYqDQBBGPdKcZnIJdy7EVRByBQPi0iwHAlGT0YBHcG82kkV2VnffoKar7FYzIQYLPtqffq+rEJ04jn/CMMSV+XZs0YO1RcyLoO/7MdAD9gAI8wiK+CyYA0IDFABhrmFBAHNYbwYTIxFyWN8KwAiEmIEaknqVUposCoBBGE8cIGUipUKp5IJAzOe2JxI0pG1b3Gw2+Hg8FjoQzy0rLVAavt0GuGkaXrfb7avAzs0CNcHtDD4ejwzTve/7X/9GGFqn2QmkDmzbBJ9OJ8yyDNM0Rdd1J8mzgDqQPDNJLFwUBZ7PZ7xcLizwPI9gfj+NYAX2k+kx7vc7byrLEquqwuv1ivv9HpMk4ec6Uwfvqus63lzXNeZ5zoIRpoqiKP/09wVBwNDhcOB1t9v9OmuLTnw62dQfVIHPYx/I/0kAAAAASUVORK5CYII=); +} +.FileList-item--gitlink::before { + /* emblems/emblem-symbolic-link.png */ + content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAABO0lEQVQ4T7WT3U6EMBCF92m99yGMZuODGL01eueyXqjvwc+WUlooUPkfZxq3sQEvJLHJSQvlfDOnDbub/dUFCrZof3t9uaPF1kFeBwjD8E+apukfAVEUQRzHkCQJJKfEznES43tUGP0OIOMheIGn50e4f7izCo4H4GkKDEXPBIviCIZh8AFkfv94g5Qx4Jw7AOn4Grh1iqATdrUAEJmxFLIsgzzPQSnpQc4SIkMIh7ZtfQCjys6soNQlVFW1AEgpQWQCjDE+gHIKIaxZo7mu69UOiqJwRXxAxnFDQllS5XUzSeO+kmoJoOzUni41NE1tM9JBTdMII85d14FpjI2lihUA9wCNA8zzDOM4WkBjvgFqrQO8ulzmNgLl/8SPyTT0WL3vLLBGsNZ6HUBV1tT3vROd/Fk/AZt/Z/J+AUN8ayghXmezAAAAAElFTkSuQmCC); +} +.FileContents { + border-collapse: collapse; + border-spacing: 0; + margin: 10px 0; +} +.FileContents-line { + border: none; +} +.FileContents-lineNum { + padding-right: 10px; + width: 1%; +} +/* Used to prevent copying the line number. */ +.FileContents-lineNum::before { + color: #aaa; + content: attr(data-line-number); + cursor: pointer; +} +.FileContents-lineContents { + min-height: 1em; + padding-left: 10px; +} +.InlineReadme { + border-top: 1px solid #ddd; + margin: 10px 0; + padding: 7px 0; +} +.InlineReadme-path { + color: #666; +} + +/* BlameDetail.soy */ + +.Blame { + margin: 10px 0; +} +.Blame-region { + display: flex; +} +.Blame-leftCol { + font-size: 8pt; + width: 375px; +} +.Blame-rightCol { + flex: 1; + font-size: 8pt; +} +.Blame-sha1, +.Blame-author, +.Blame-time, +.Blame-regionLink { + display: inline-block; + font-size: 8pt; +} +.Blame-lineNum { + margin-right: 10px; + min-width: 3.5em; + padding-right: 8px; + text-align: right; +} +.Blame-lineNum:hover { + text-decoration: underline; +} +.Blame-region--bg1 { + background: #fff; +} +.Blame-region--bg2 { + background: #f1f2f3; +} + +/* DiffDetail.soy */ + +.Diff { + margin: 10px 0; +} +.Diff-fileIndex { + color: #444; + font-weight: bold; +} +.Diff-unified { + border-bottom: 1px solid #ddd; + border-top: 1px solid #ddd; + padding: 10px 0; +} +.Diff-hunk { + color: #00c; +} +.Diff-delete { + color: #c00; +} +.Diff-insert { + color: #080; +}
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css b/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css index 672797c..8d38cb3 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css
@@ -14,161 +14,45 @@ * limitations under the License. */ -html.doc-page, .doc { - font-family: arial,sans-serif; -} -.doc-page body { - margin: 0; -} - -.banner { - min-height: 44px; - margin: 0; - padding: 14px 15px 13px; - border-bottom: 1px solid #eee; -} -.banner h1, .banner h2 { - float: left; - font-size: 32px; - font-weight: 300; - line-height: 1.375; - margin: 0; -} -.banner img { - margin: -1px 10px -4px 0px; - vertical-align: middle; -} -.banner a, .banner a:hover { - text-decoration: none; -} -.banner, .banner a:link, .banner a:visited { - color: #777; -} -.banner h2:before { - border-right: 1px solid #eee; - content: ""; - float: left; - height: 44px; - margin: 0 12px 0 14px; -} - -.nav, .footer-line { - color: #333; - padding: 0 15px; - background: #eee; -} -.nav ul { - list-style: none; - margin: 0; - padding: 6px 0; -} -.nav li { - float: left; - font-size: 14px; - line-height: 1.43; - margin: 0 20px 0 0; - padding: 6px 0; -} -.nav li a, .footer-line a { - color: #7a7af9; -} -.nav li a:hover { - color: #0000f9; -} -.banner:after, .nav ul:after, .cols:after { - clear: both; - content: ""; - display: block; -} - -.nav-aux, .doc { - max-width: 978px; -} -.nav-aux, .doc-page .doc { - margin: auto; -} - -.footer-break { - clear: both; - margin: 120px 0 0 0; -} -.footer-line { - font-size: 13px; - line-height: 30px; - height: 30px; -} -.footer-line ul { - list-style: none; - margin: 0; - padding: 0; -} -.footer-line li { - display: inline; -} -.footer-line li+li:before { - content: "·"; - padding: 0 5px; -} -.footer-line .nav-aux { - position: relative; -} -.gitiles-att { - color: #A0ADCC; - position: absolute; - top: 0; - right: 0; -} -.gitiles-att a { - font-style: italic; -} - /* Markdown rendered in /+doc/ or tree view page . */ -.doc { - color: #444; - font-size: 13px; - line-height: normal; +.Site-Content--markdown { + padding-top: 0; } - .doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { - font-family: "open sans",arial,sans-serif; - font-weight: bold; - color: #444; - height: auto; - white-space: normal; - overflow: visible; - margin: 0.67em 0 0.67em 0; + font-weight: normal; + margin: 1.236em 0 .618em; +} +.doc.RepoIndexDoc h1 { + margin-top: .25em; } .doc h1 { - font-size: 20px; - margin: 0.67em 0 0.67em 0; + font-size: 2em; } .doc h2 { - font-size: 16px; - margin: 0.67em 0 0.67em 0; + font-size: 1.5em; } .doc h3 { - font-size: 14px; - margin: 0.67em 0 0.67em 0; + font-size: 1.3em; } -.doc h4 { - font-size: 13px; - margin: 1em 0 1em 0; -} -.doc h5 { - font-size: 13px; - margin: 1.3em 0 1.3em 0; -} +.doc h4, +.doc h5, .doc h6 { - font-size: 13px; - margin: 1.6em 0 1.6em 0; + font-size: 14px; + font-style: italic; } - -.doc a { text-decoration: none; } -.doc a:link { color: #245dc1; } -.doc a:visited { color: #7759ae; } -.doc a:hover { text-decoration: underline; } - +.doc a { + text-decoration: none; +} +.doc a:link { + color: #245dc1; +} +.doc a:visited { + color: #7759ae; +} +.doc a:hover { + text-decoration: underline; +} .doc a.h { display: inline-block; font-weight: normal; @@ -178,9 +62,15 @@ margin-bottom: -1em; } .doc a.h:link, -.doc a.h:visited { color: #444; } -.doc a.h:focus { outline: none; } -.doc a.h:hover { text-decoration: none; } +.doc a.h:visited { + color: #444; +} +.doc a.h:focus { + outline: none; +} +.doc a.h:hover { + text-decoration: none; +} .doc a.h span { display: inline-block; width: 1.5em; @@ -191,14 +81,36 @@ .doc h4:hover a.h span:before, .doc h5:hover a.h span:before, .doc h6:hover a.h span:before { - content: '\1f517'; /* Unicode 'LINK SYMBOL' */ + content: '#'; + font-weight: normal; + color: #AAA; } - +.doc h1:hover a:hover.h span:before, +.doc h2:hover a:hover.h span:before, +.doc h3:hover a:hover.h span:before, +.doc h4:hover a:hover.h span:before, +.doc h5:hover a:hover.h span:before, +.doc h6:hover a:hover.h span:before { + text-decoration: underline; +} +.doc h1:hover a:visited.h span:before, +.doc h2:hover a:visited.h span:before, +.doc h3:hover a:visited.h span:before, +.doc h4:hover a:visited.h span:before, +.doc h5:hover a:visited.h span:before, +.doc h6:hover a:visited.h span:before { + color: #AAA; +} .doc ul, .doc ol { margin: 10px 10px 10px 30px; padding: 0; } - +.doc ul { + list-style-type: disc; +} +.doc ol { + list-style-type: decimal; +} .doc img { border: 0; max-width: 100%; @@ -210,7 +122,6 @@ iframe.noborder { border: 0; } - .doc em { font-weight: normal; font-style: italic; @@ -219,22 +130,28 @@ font-weight: bold; color: inherit; } - +.doc p { + margin: 10px 0; +} .doc pre { - border: 1px solid silver; - background: #fafafa; - margin: 0 2em 0 2em; - padding: 2px; + padding: 12px; + font-size: 10pt; + background-color: #fafafa; + border: 1px solid #ccc; + overflow-x: auto; } -.doc code, .doc .code { - color: #060; - font: 13px/1.54 "courier new",courier,monospace; +.doc code { + padding: 2px 4px; + background-color: #F5F5F5; + border: transparent; + border-radius: 4px; } - +.doc .code { + font-family: monospace; +} .doc dl dt { margin-top: 1em; } - .doc table { border-collapse: collapse; border-spacing: 0; @@ -242,7 +159,8 @@ .doc th { text-align: center; } -.doc th, .doc td { +.doc th, +.doc td { border: 1px solid #eee; padding: 4px 12px; vertical-align: top; @@ -250,31 +168,33 @@ .doc th { background-color: #f5f5f5; } - .toc { margin-top: 30px; } .toc-aux { - padding: 2px; background: #f9f9f9; border: 1px solid #f2f2f2; - border-radius: 4px; } .toc h2 { margin: 0 0 5px 0; } .toc ul { - margin: 0 0 0 30px; + margin: 10px 10px 10px 30px; } .toc ul li { margin-left: 0px; list-style: disc; } +.toc ul ul { + margin-top: 0; + margin-bottom: 0; +} .toc ul ul li { list-style: circle; } - -.note, .promo, .aside { +.note, +.promo, +.aside { border: 1px solid; border-radius: 4px; margin: 10px 0; @@ -302,7 +222,6 @@ .aside p:last-child { margin-bottom: 0; } - .cols { margin: 0 -1.533%; width: 103.067%; @@ -324,6 +243,4 @@ .col-10 { width: 80.357%; } .col-11 { width: 88.690%; } .col-12 { width: 97.024%; } -.cols hr { - width: 80%; -} +.cols hr { width: 80%; }
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 deleted file mode 100644 index 26130ae..0000000 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/static/gitiles.css +++ /dev/null
@@ -1,453 +0,0 @@ -/** - * Copyright 2012 Google Inc. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* Common styles and definitions. */ - -h1 { - position: absolute; - top: 0; - white-space: nowrap; - margin-top: 5px; -} -.menu { - position: absolute; - top: 0; - right: 0; - font-size: 10pt; - white-space: nowrap; - text-align: right; - margin-top: 5px; - margin-right: 5px; -} -.menu .entry { - padding-right: 5px; - border-right: 1px solid black; - margin-right: 0; -} -h2 { - margin-top: 3em; -} -.breadcrumbs { - margin-top: 3em; - font-size: 150%; - border-bottom: #ddd solid 1px; /* BORDER */ -} -table.list { - margin-top: 1em; - width: 90%; -} -table.list tr.no-hover:hover { - background: #fff; -} -table.list tr:hover, ol.list li:hover, pre.prettyprint li:hover { - background: #eee; /* HOVER_BACKGROUND */ -} -table.list td { - white-space: nowrap; - padding-top: 0.25em; - padding-bottom: 0.25em; -} -.log-link, .download-link { - margin-left: 0.5em -} - - -/* Styles for the host index page. */ - -.instructions { - width: 45em; - margin-left: 1em; - margin-right: 1em; - border-top: 1px solid #555; - border-bottom: 1px solid #555; - color: #555; -} -.instructions pre { - display: block; - margin-left: 1em; - border-left: 2px solid #060; - padding-left: 1em; - white-space: nowrap; -} - -.formats { - text-align: right; - background: clear; - right: 0; - clear: both; -} - -.formats a { - font-weight: bold; - font-size: 70%; - color: white; - padding: 2px; - background-color: #A0ADCC; - border-top: #C0CFEE solid 1px; - border-left: #C0CFEE solid 1px; - border-right: #808A99 solid 1px; - border-bottom: #808A99 solid 1px; -} - -.footer { - text-align: right; - color: #A0ADCC; - right: 0; - clear: both; -} - -.footer a { - font-style: italic; -} - - -/* Styles for the repository index page. */ - -.repository-description { - border-bottom: #ddd solid 1px; /* BORDER */ - padding-bottom: 5px; /* VPADDING */ -} -.repository-mirrored-from { - font-size: 85%; - font-style: italic; - padding-left: 1em; -} -.repository-refs { - float: left; - width: 200px; - margin-left: -100%; -} -.repository-shortlog-wrapper { - float: left; - width: 100%; -} -.repository-shortlog { - margin-top: 20px; - margin-left: 200px; -} -.clone-line { - background-color: #e5ecf9; /* BOX_BACKGROUND */ - border: none; - margin: 5px /* VPADDING */ 0 0 0; - padding: 5px 2em; /* PADDING */ - font-size: 9pt; -} - -/* Styles for the ref detail page. */ - -.refs-branches { - float: left; - width: 200px; -} -.refs-tags { - float: left; - width: 200px; -} -.refs-detail { - width: 500px; -} -.ref-list { - padding-left: 15px; - padding-right: 5px; -} -.ref-list li { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.ref-list li.head-ref { - font-weight: bold; -} - - -/* Styles for the object detail templates. */ - -.sha1 { - color: #666; - font-size: 9pt; -} -div.sha1 { - padding-top: 5px; /* VPADDING */ -} - -.git-commit, .git-tag { - font-size: 9pt; - border-bottom: #ddd solid 1px; /* BORDER */ - padding: 5px 2em; /* PADDING */ -} -.git-commit table, .git-tag table { - margin: 0; -} -.git-commit table th, .git-tag table th { - text-align: right; -} -pre.commit-message, pre.tag-message { - padding: 5px 2em; /* PADDING */ - color: #000; - font-size: 9pt; - margin: 0; -} - -ul.diff-tree { - border-top: #ddd solid 1px; /* BORDER */ - font-size: 9pt; - list-style-type: none; - margin: 0; - padding: 5px 2em; /* PADDING */ -} -ul.diff-tree .add { - color: #060; -} -ul.diff-tree .delete { - color: #600; -} -ul.diff-tree .rename, ul.diff-tree .copy { - color: #006; -} -span.diff-link, ul.diff-tree .add, ul.diff-tree .modify, ul.diff-tree .delete, - ul.diff-tree .rename, ul.diff-tree .copy { - margin-left: 0.5em; -} -.diff-summary { - font-size: 9pt; - font-style: italic; - padding: 5px 2em; /* PADDING */ - border-bottom: #ddd solid 1px; /* BORDER */ -} - -ol.files { - list-style-type: none; - margin-left: 1em; - font-size: 10pt; - line-height: normal; -} - -/* Tree icons are taken from the public domain Tango icons: - * http://tango.freedesktop.org/Tango_Icon_Library - * Compressed with pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt */ -ol.files li.git-tree{ - /* places/folder.png */ - list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAb5JREFUOMulkr1KA0EQgGdvTwwnYmER0gQsrFKmSy+pLESw9Qm0F/ICNnba+h6iEOuAEWslKJKTOyJJvIT72d1xZuOFC0giOLA77O7Mt/PnNptN+I+49Xr9GhH3f3mb0v1ht9vtLAUYYw5ItkgDL3KyD8PhcLvdbl/WarXT3DjLMnAcR/f7/YfxeKwtgC5RKQVhGILWeg4hQ6hUKjWyucmhLFEUuWR3QYBWAZABQ9i5CCmXy16pVALP80BKaaG+70MQBLvzFMjRKKXh8j6FSYKF7ITdEWLa4/ktokN74wiqjSMpnVcbQZqmEJHz+ckeCPFjWKwULpyspAqhdXVXdcnZcPjsIgn+2BsVA8jVYuWlgJ3yBj0icgq2uoK+lg4t+ZvLomSKamSQ4AI5BcMADtMhyNoSgNIISUaFNtwlazcDcBc4gjjVwCWid2usCWroYEhnaqbzFJLUzAHIXRDChXCcQP8zhkSZ5eNLgHAUzwDcRu4CoIRn/wsGUQIIy4Vr9TH6SYFCNzw4nALn5627K4vIttOUOwfa5YnrDYzt/9OLv9I5l8kk5hZ3XLO20b7tbR7zHLy/BX8G0IeBEM7ZN1NGIaFUaKLgAAAAAElFTkSuQmCC); -} -ol.files li.symlink{ - /* actions/edit-redo.png */ - list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAABZUlEQVQ4y2NgIAL4zWL7D8TGDOQCqAEg7Ey2Aes+58AMcSSkmB2I3YB4HhCfh9kOMoCgIUAJMyDe2D+b58jKe553133M+r/uU/b/zV+L/y97n/i/+JIYbkOAAl5AfGLNTde/69+n/1/4MuD/gtsqKBhkALIh5S0M1jDN2kC8a+UNt/8b36f+X3JP5f/0u1pwjeuvS8E1g3DpZQm4ITAD5s09ZPBq49uE/0vvq4E1gPCJC5z/yy+IoGgG4a5HJqjeCJ3Pc2vjy+T/ux4Y/j99Rfz/7GtK/xfeUkbBN+8pY9cMAkFzuT5uepPy/+w1lf+TF3L/Q4p3OD5zRQ67Zlg873vk9n/mMlaQ5EcgLgZiA2R5nJphCjbfNP8LVeCBJyUa40xpO+5afQXS/8jKC0DJg+uPKx+bOJf1HDYXEJPW46JW8LcduKYzbdZMph4gn4ccQxSAOAuIo4FYdvsKFpYdK1iYCekDACq5JXDHGJhDAAAAAElFTkSuQmCC); -} -ol.files li.regular-file{ - /* mimetypes/text-x-generic.png */ - list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAtElEQVQ4ja2TSw7CIBRFu0r3wyIYsAMHDl1CC92IDqC0wAbQi4Fo5VOMJGcAyT33vQEDY+xCCPGdnIZ48NB7kPkSLMvipZQBpVQC70Br7Y0xZQGC4zj6aZoCnPMPhBBtwb41NoN1XesCBHPNhyfI7fziFu6HJti3IgS0vrcFuZ3Btm2JpmC/M5jnOdEU5JoRstYmigKES80x7JyrC+IE7+1xAoSrgp//AqX02vsbn5nz8K/zAP9CzjbgFoHjAAAAAElFTkSuQmCC) -} -ol.files li.executable-file{ - /* mimetypes/text-x-script.png */ - list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA7ADsAOwdIxY2AAAACXBIWXMAAAsTAAALEwEAmpwYAAABOklEQVQ4T5WTTYqDQBBGPdKcZnIJdy7EVRByBQPi0iwHAlGT0YBHcG82kkV2VnffoKar7FYzIQYLPtqffq+rEJ04jn/CMMSV+XZs0YO1RcyLoO/7MdAD9gAI8wiK+CyYA0IDFABhrmFBAHNYbwYTIxFyWN8KwAiEmIEaknqVUposCoBBGE8cIGUipUKp5IJAzOe2JxI0pG1b3Gw2+Hg8FjoQzy0rLVAavt0GuGkaXrfb7avAzs0CNcHtDD4ejwzTve/7X/9GGFqn2QmkDmzbBJ9OJ8yyDNM0Rdd1J8mzgDqQPDNJLFwUBZ7PZ7xcLizwPI9gfj+NYAX2k+kx7vc7byrLEquqwuv1ivv9HpMk4ec6Uwfvqus63lzXNeZ5zoIRpoqiKP/09wVBwNDhcOB1t9v9OmuLTnw62dQfVIHPYx/I/0kAAAAASUVORK5CYII=); -} -ol.files li.gitlink{ - /* emblems/emblem-symbolic-link.png */ - list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAABO0lEQVQ4T7WT3U6EMBCF92m99yGMZuODGL01eueyXqjvwc+WUlooUPkfZxq3sQEvJLHJSQvlfDOnDbub/dUFCrZof3t9uaPF1kFeBwjD8E+apukfAVEUQRzHkCQJJKfEznES43tUGP0OIOMheIGn50e4f7izCo4H4GkKDEXPBIviCIZh8AFkfv94g5Qx4Jw7AOn4Grh1iqATdrUAEJmxFLIsgzzPQSnpQc4SIkMIh7ZtfQCjys6soNQlVFW1AEgpQWQCjDE+gHIKIaxZo7mu69UOiqJwRXxAxnFDQllS5XUzSeO+kmoJoOzUni41NE1tM9JBTdMII85d14FpjI2lihUA9wCNA8zzDOM4WkBjvgFqrQO8ulzmNgLl/8SPyTT0WL3vLLBGsNZ6HUBV1tT3vROd/Fk/AZt/Z/J+AUN8ayghXmezAAAAAElFTkSuQmCC); -} - - -/* Styles for the path detail page. */ - -.symlink-detail, .gitlink-detail { - margin-left: 1em; - color: #666; - font-style: italic; - font-size: 10pt; -} - - -/* Styles for the log detail page. */ - -ol.log { - list-style-type: none; - margin: 0; - padding-left: 0; -} -ol.oneline.log, ol.default.log { - padding: 5px 2em; /* PADDING */ -} -ol.log > li { - border-bottom: #ddd solid 1px; /* BORDER */ - padding-top: 2px; - padding-bottom: 2px; -} -ol.full.log > li, ol.fuller.log > li { - padding-top: 0; - padding-bottom: 5px; -} -ol.full.log .git-commit, ol.fuller.log .git-commit { - background: #eee; -} -ol.log > li.first { - border-top: #ddd solid 1px; /* BORDER */ -} -ol.default.log > li:hover, ol.oneline.log > li:hover { - background: #eee; /* HOVER_BACKGROUND */ -} -ol.log span.sha1 { - font-family: monospace; -} -ol.log ul.diff-tree { - margin-left: 2em; - padding: 5px 0 5px 0; -} -.log-nav { - margin-top: 5px; - text-align: center; -} -.author { - padding-left: 3px; -} -.time { - font-size: 9pt; /* SHORTLOG_SMALL_FONT_SIZE */ - font-style: italic; - margin-right: 3px; -} -.branch-label, .tag-label { - font-size: 9pt; /* SHORTLOG_SMALL_FONT_SIZE */ - margin-right: 3px; -} -a.branch-label { - color: #dd4b39; -} -a.tag-label { - color: #009933; -} - -ol.log > li.empty:hover, ol.log > li.empty { - background: inherit; - padding: 0px; - border: 0px; -} - - -/* Styles for the diff detail template. */ - -.diff-header { -} -.diff-git { - color: #444; - font-weight: bold; -} -a.diff-git:hover { - text-decoration: none; -} -.diff-header, .diff-unified { - color: #000; - font-size: 9pt; - margin: 0; - padding-left: 2em; -} -.diff-unified { - border-bottom: #ddd solid 1px; /* BORDER */ -} -.diff-unified .h { - color: #0000cc; -} -.diff-unified .d { - color: #cc0000; -} -.diff-unified .i { - color: #008800; -} - - -/* Styles for the blame detail template. */ - -#blame { - margin-top: 10px; - margin-bottom: 10px; - margin-left: 0px; - margin-right: 0px; - padding: 0; -} -#blame td { - line-height: 1.4; - padding: 0; - font-size: 8pt; - white-space: nowrap; -} -#blame .sha1, #blame .author, #blame .time { - /* TODO(dborowitz): Make 9pt values above more specific. */ - font-size: 8pt; -} -#blame .sha1 { - color: inherit; - font-family: monospace; - padding-left: 3px; -} -#blame .author { - padding-left: 3px; - padding-right: 3px; -} -#blame .time { - padding-left: 5px; - padding-right: 5px; -} -#blame .linenum { - text-align: right; - padding-left: 5px; - padding-right: 5px; -} -#blame .regionLink { - padding-right: 3px; -} - -#blame tr.bg1 { - background: #fff; -} -#blame tr.bg2 { - background: #f7f7f7; -} - -/* Styles for pretty-print regions, including overriding some defaults from - * prettify.css. */ - -ol.prettyprint, #blame { - border-top: #ddd solid 1px; /* BORDER */ - border-bottom: #ddd solid 1px; /* BORDER */ - border-left: none; - border-right: none; - padding-left: 5em; - padding-bottom: 5px; -} -.prettyprint, #blame .linenum { - font-family: monospace; - font-size: 8pt; - white-space: pre !important; -} - -/* Styles for README.md in tree view. */ - -.readme-path { - border-top: #ddd solid 1px; /* BORDER */ - color: #666; - font-size: 9pt; - padding-top: 5px; /* VPADDING */ -} -.repository-index-doc { - border-top: #ddd solid 1px; /* BORDER */ - margin-top: 5px; /* VPADDING */ - padding-top: 5px; /* VPADDING */ - margin-left: 200px; -} -.doc { - border-bottom: #ddd solid 1px; /* BORDER */ -} -.doc h1 { - position: static; -}
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 124ed5a..5ccd8c3 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
@@ -39,40 +39,41 @@ {if $regions} {call .header data="all"} {param css: [gitiles.PRETTIFY_CSS_URL] /} + {param containerClass: 'Container--fullWidth' /} {/call} {call .blobHeader data="$data" /} - <table id="blame"> + <div class="Blame"> {foreach $line in $data.lines} {let $i: index($line) /} {let $region: $regions[$i] /} - <tr class="{$region.class}"> - {if isNonnull($region.abbrevSha)} - <td class="author">{$region.author.name}</td> - <td class="time">{$region.author.time}</td> - <td class="sha1"><a href="{$region.commitUrl}">{$region.abbrevSha}</a></td> - <td class="regionLink"> - [<a href="{$region.diffUrl}">{msg desc="text for diff URL"}diff{/msg}</a>] - [<a href="{$region.blameUrl}">{msg desc="text for blame URL"}blame{/msg}</a>] - </td> - {else} - <td colspan="4"></td> - {/if} - {let $n: $i + 1 /} - <td class="linenum"><a name="{$n}"></a>{$n}.</td> - <td class="prettyprint"> + <div class="Blame-region {$region.class}"> + <div class="Blame-leftCol"> + {if isNonnull($region.abbrevSha)} + <span class="Blame-author">{$region.author.name}</span> + {sp}<a class="u-sha1 Blame-sha1" href="{$region.commitUrl}">{$region.abbrevSha}</a> + {sp}<span class="Blame-time">{$region.author.time}</span> + {sp}<span class="Blame-regionLink"> + [<a href="{$region.diffUrl}">{msg desc="text for diff URL"}diff{/msg}</a>] + [<a href="{$region.blameUrl}">{msg desc="text for blame URL"}blame{/msg}</a>] + </span> + {/if} + </div> + <div class="u-pre Blame-rightCol"> + {let $n: $i + 1 /} + <a class="u-lineNum Blame-lineNum" href="#{$n}" name="{$n}">{$n}</a> {foreach $span in $line} <span class="{$span.classes}">{$span.text}</span> {/foreach} - </td> - </tr> + </div> + </div> {/foreach} - </table> + </div> {else} {call .header data="all" /} {call .blobDetail data="$data" /} - <div class="file-binary"> + <div class="FileContents-binary"> {msg desc="blame not available for binary file"} No blame information available {/msg}
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Common.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Common.soy index 1ec6540..7d523f6 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Common.soy +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Common.soy
@@ -25,11 +25,13 @@ * @param breadcrumbs navigation breadcrumbs for this page. * @param? css optional list of CSS URLs to include. * @param? js optional list of Javascript URLs to include. + * @param? containerClass optional class to append to the main container. */ {template .header} -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> +<!DOCTYPE html> +<html lang="en"> <head> + <meta charset="utf-8"> <title> {$title} {if $repositoryName} @@ -37,68 +39,84 @@ {/if} {sp}- {msg desc="name of the application"}{gitiles.SITE_TITLE}{/msg} </title> - <link rel="stylesheet" type="text/css" href="//www.google.com/css/go.css" /> + <link rel="stylesheet" type="text/css" href="{gitiles.BASE_CSS_URL}"> {if $css and length($css)} {foreach $url in $css} - <link rel="stylesheet" type="text/css" href="{$url}" /> + <link rel="stylesheet" type="text/css" href="{$url}"> {/foreach} {/if} - // Include default CSS after custom CSS so it can override defaults in third- - // party stylesheets (e.g. prettify). - <link rel="stylesheet" type="text/css" href="{gitiles.CSS_URL}" /> {if $js and length($js)} {foreach $url in $js} - <script src="{$url}" type="text/javascript"></script> + <script src="{$url}"></script> {/foreach} {/if} </head> -<body> - {delcall gitiles.customHeader variant="$headerVariant ?: 'default'" /} +<body class="Site"> + <header class="Site-header"> + <div class="Header"> + {delcall gitiles.customHeader variant="$headerVariant ?: 'default'" /} - {if $menuEntries and length($menuEntries)} - <div class="menu"> - {foreach $entry in $menuEntries} - {sp} - {if $entry.url} - <a href="{$entry.url}"{if not isLast($entry)} class="entry"{/if}>{$entry.text}</a> - {else} - <span{if not isLast($entry)} class="entry"{/if}>{$entry.text}</span> + {if $menuEntries and length($menuEntries)} + <div class="Header-menu"> + {foreach $entry in $menuEntries} + {sp} + {if $entry.url} + <a class="Header-menuItem" href="{$entry.url}">{$entry.text}</a> + {else} + <span class="Header-menuItem Header-menuItem--noAction">{$entry.text}</span> + {/if} + {/foreach} + {sp} + </div> {/if} - {/foreach} - {sp} </div> - {/if} + </header> - {if $breadcrumbs and length($breadcrumbs)} - <div class="breadcrumbs"> - {foreach $entry in $breadcrumbs} - {if not isFirst($entry)}{sp}/{sp}{/if} - {if not isLast($entry)} - <a href="{$entry.url}">{$entry.text}</a> - {else} - {$entry.text} - {/if} - {/foreach} - </div> - {/if} + <div class="Site-content"> + <div class="Container {if $containerClass}{$containerClass}{/if}"> + {if $breadcrumbs and length($breadcrumbs)} + <div class="Breadcrumbs"> + {foreach $entry in $breadcrumbs} + {if not isFirst($entry)}{sp}/{sp}{/if} + {if not isLast($entry)} + <a class="Breadcrumbs-crumb" href="{$entry.url}">{$entry.text}</a> + {else} + <span class="Breadcrumbs-crumb">{$entry.text}</span> + {/if} + {/foreach} + </div> + {/if} {/template} /** * Default custom header implementation for Gitiles. */ {deltemplate gitiles.customHeader variant="'default'"} -<h1>{msg desc="short name of the application"}{gitiles.SITE_TITLE}{/msg}</h1> +<div class="Header-title"> + {msg desc="short name of the application"}{gitiles.SITE_TITLE}{/msg} +</div> {/deltemplate} /** * Standard footer. */ {template .footer} - <div class="footer"> - Powered by <a href="https://code.google.com/p/gitiles/">Gitiles</a> - </div> + </div> <!-- Container --> + </div> <!-- Site-content --> + <footer class="Site-footer"> + <div class="Footer"> + <span class="Footer-poweredBy"> + Powered by <a href="https://code.google.com/p/gitiles/">Gitiles</a> + </span> + <span class="Footer-formats"> + <a class="Footer-formatsItem" href="?format=TEXT">{msg desc="text format"}txt{/msg}</a> + {sp} + <a class="Footer-formatsItem" href="?format=JSON">{msg desc="JSON format"}json{/msg}</a> + </span> + </div> + </footer> </body> </html> {/template}
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/DiffDetail.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/DiffDetail.soy index 7339f34..9f41298 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/DiffDetail.soy +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/DiffDetail.soy
@@ -44,16 +44,16 @@ * @param fileIndex position of the file within the difference. */ {template .diffHeader} -<pre class="diff-header"> -<a name="F{$fileIndex}" class="diff-git"></a> -{foreach $part in $firstParts} - {if not isFirst($part)}{sp}{/if} - {if $part.url} - <a href="{$part.url}">{$part.text}</a> - {else} - {$part.text} - {/if} -{/foreach}{\n} -{$rest} +<pre class="u-pre Diff"> + <a name="F{$fileIndex}" class="Diff-fileIndex"></a> + {foreach $part in $firstParts} + {if not isFirst($part)}{sp}{/if} + {if $part.url} + <a href="{$part.url}">{$part.text}</a> + {else} + {$part.text} + {/if} + {/foreach}{\n} + {$rest} </pre> {/template}
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy index b0daab3..d4da587 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy
@@ -28,53 +28,56 @@ * @param bodyHtml safe html to embed into the body of the page. */ {template .markdownDoc} -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html class="doc-page"> +<!DOCTYPE html> +<html lang="en"> <head> + <meta charset="utf-8"> <title> {if $siteTitle}{$siteTitle} -{sp}{/if} {$pageTitle} </title> + <link rel="stylesheet" type="text/css" href="{gitiles.BASE_CSS_URL}" /> <link rel="stylesheet" type="text/css" href="{gitiles.DOC_CSS_URL}" /> <link rel="stylesheet" type="text/css" href="{gitiles.PRETTIFY_CSS_URL}" /> </head> -<body> - {if $siteTitle} - <div class="banner" role="banner"> - <div class="nav-aux"> - <h1> - {if $homeUrl}<a href="{$homeUrl}">{/if} - {if $logoUrl}<img src="{$logoUrl}" alt="project logo" />{/if} - {$siteTitle} - {if $homeUrl}</a>{/if} - </h1> - <h2>{$pageTitle}</h2> +<body class="Site"> + <header class="Site-header"> + <div class="Header"> + <div class="Header-title"> + {if $homeUrl}<a href="{$homeUrl}">{/if} + {if $logoUrl}<img src="{$logoUrl}" alt="project logo" />{/if} + {if $siteTitle}{$siteTitle}{/if} + {if $homeUrl}</a>{/if} </div> </div> - {/if} - {if $navbarHtml} - <div class="nav" role="navigation"> - <div class="nav-aux"> - {$navbarHtml} + {if $navbarHtml} + <div class="nav" role="navigation"> + <div class="nav-aux"> + {$navbarHtml} + </div> + </div> + {/if} + </header> + <div class="Site-content Site-Content--markdown"> + <div class="Container"> + <div class="doc"> + {$bodyHtml} + </div> </div> - </div> - {/if} - <div class="doc"> - {$bodyHtml} </div> - <div class="footer-break"></div> - <div class="footer-line"> - <div class="nav-aux"> - <ul> - {if $sourceUrl}<li><a href="{$sourceUrl}">{msg desc="text for the source link"}source{/msg}</a></li>{/if} - {if $logUrl}<li><a href="{$logUrl}">{msg desc="text for the log link"}log{/msg}</a></li>{/if} - {if $blameUrl}<li><a href="{$blameUrl}">{msg desc="text for the blame link"}blame{/msg}</a></li>{/if} + <footer class="Site-footer"> + <div class="Footer"> + <div class="Footer-poweredBy"> + Powered by <a href="https://code.google.com/p/gitiles/">Gitiles</a> + </div> + <div class="Footer-links"> + {if $sourceUrl}<a class="Footer-link" href="{$sourceUrl}">{msg desc="text for the source link"}source{/msg}</a>{/if} + {if $logUrl}<a class="Footer-link" href="{$logUrl}">{msg desc="text for the log link"}log{/msg}</a>{/if} + {if $blameUrl}<a class="Footer-link" href="{$blameUrl}">{msg desc="text for the blame link"}blame{/msg}</a>{/if} </ul> - <div class="gitiles-att"> - Powered by <a href="https://code.google.com/p/gitiles/">Gitiles</a> - </div> + </div> - </div> + </footer> {if $analyticsId} /* From https://developers.google.com/analytics/devguides/collection/analyticsjs/ */ <script>
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/HostIndex.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/HostIndex.soy index ec9553d..7ac3581 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/HostIndex.soy +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/HostIndex.soy
@@ -21,7 +21,6 @@ * @param? headerVariant variant name for custom header. * @param? prefix prefix path for matching repositories. * @param? breadcrumbs map of breadcrumbs for header. - * @param baseUrl base URL for repositories. * @param repositories list of repository description maps with name, cloneUrl, * and optional description values. */ @@ -35,49 +34,32 @@ {if length($repositories)} {if not $breadcrumbs} - <h2> + <h1> {msg desc="Git repositories available on the host"} - {$hostName} Git repositories + Git repositories on {$hostName} {/msg} - </h2> - {else} - <br /> + </h1> {/if} - <div class="instructions"> - {msg desc="description on how to use this repository"} - To clone one of these repositories, install{sp} - <a href="http://www.git-scm.com/">git</a>, and run: - <pre>git clone {$baseUrl}{$prefix}<em>name</em></pre> - {/msg} - </div> - - <table class="list"> - <tr class="no-hover"> - <th width="25%"> + <div class="RepoList"> + <div class="RepoList-item RepoList-item--header"> + <span class="RepoList-itemName"> {msg desc="column header for repository name"} Name {/msg} - </th> - <th> + </span> + <span class="RepoList-itemDescription"> {msg desc="column header for repository description"} Description {/msg} - </th> - </tr> + </span> + </div> {foreach $repo in $repositories} - <tr> - <td> - <a href="{$repo.url}">{$repo.name}</a> - </td> - <td>{$repo.description}</td> - </tr> + <a class="RepoList-item" href="{$repo.url}"> + <span class="RepoList-itemName">{$repo.name}</span> + <span class="RepoList-itemDescription">{$repo.description}</span> + </a> {/foreach} - </table> - <div class="formats"> - <a href="?format=TEXT">{msg desc="text format"}TXT{/msg}</a> - {sp} - <a href="?format=JSON">{msg desc="JSON format"}JSON{/msg}</a> </div> {/if} {call .footer /}
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/LogDetail.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/LogDetail.soy index 6c4de74..b5f1e08 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/LogDetail.soy +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/LogDetail.soy
@@ -42,31 +42,27 @@ /** * Header for list of log entries. * - * @param? pretty base "pretty" format for the log entry template. * @param? previousUrl URL for the previous page of results. */ {template .logEntriesHeader} {if $previousUrl} - <div class="log-nav"> - <a href="{$previousUrl}">{msg desc="text for previous URL"}« Previous{/msg}</a> - </div> + <nav class="LogNav"> + <a class="LogNav-prev" href="{$previousUrl}">{msg desc="text for previous URL"}« Previous{/msg}</a> + </nav> {/if} -<ol class="{$pretty ?: 'default'} log"> +<ol class="CommitLog"> {/template} /** * Wrapper for a single log entry with pretty format and variant. * - * @param firstWithPrevious whether this entry is the first in the current list, - * but also comes below a "Previous" link. * @param variant variant name for log entry template. * @param entry log entry; see .logEntry. */ {template .logEntryWrapper} -// TODO(dborowitz): Better CSS instead of this firstWithPrevious hack. -<li{if $firstWithPrevious} class="first"{/if}> +<li class="CommitLog-item CommitLog-item--{$variant}"> {delcall gitiles.logEntry variant="$variant ?: 'default'" data="$entry" /} </li> {/template} @@ -80,9 +76,9 @@ {template .logEntriesFooter} </ol> {if $nextUrl} - <div class="log-nav"> - <a href="{$nextUrl}">{msg desc="text for next URL"}Next »{/msg}</a> - </div> + <nav class="LogNav"> + <a class="LogNav-next" href="{$nextUrl}">{msg desc="text for next URL"}Next »{/msg}</a> + </nav> {/if} {/template} @@ -91,7 +87,7 @@ * Single log entry indicating the full log is empty. */ {template .emptyLog} -<li class="empty">{msg desc="informational text for when the log is empty"}No commits.{/msg}</p> +<li class="CommitLog-item CommitLog-item--empty">{msg desc="informational text for when the log is empty"}No commits.{/msg}</p> {/template} @@ -112,25 +108,21 @@ * @param diffTree unused in this variant. */ {deltemplate gitiles.logEntry variant="'oneline'"} -<a href="{$url}"> - <span class="sha1">{$abbrevSha}</span> - // nbsp instad of CSS padding/margin because those cause a break in the - // underline. - - {sp}<span>{$shortMessage}</span> -</a> -{sp}<span class="author" title="{$author.email}">{msg desc="commit author name"}by {$author.name}{/msg}</span> -{sp}<span class="time" title="{$author.time}">- {$author.relativeTime}</span> +<a class="u-sha1 CommitLog-sha1" href="{$url}">{$abbrevSha}</a> +{sp}<a href="{$url}">{$shortMessage}</a> +{sp}<span class="CommitLog-author" title="{$author.email}">{msg desc="commit author name"}by {$author.name}{/msg}</span> +{sp}<span class="CommitLog-time" title="{$author.time}">· {$author.relativeTime}</span> {if length($branches)} {foreach $branch in $branches} - {sp}<a href="{$branch.url}" class="branch-label">{$branch.name}</a> + {sp}<a class="CommitLog-branchLabel" href="{$branch.url}">{$branch.name}</a> {/foreach} {/if} {if length($tags)} {foreach $tag in $tags} - {sp}<a href="{$tag.url}" class="tag-label">{$tag.name}</a> + {sp}<a class="CommitLog-tagLabel" href="{$tag.url}">{$tag.name}</a> {/foreach} {/if} + {/deltemplate} @@ -172,10 +164,10 @@ * @param diffTree unused in this variant. */ {deltemplate gitiles.logEntry variant="'full'"} -<div class="git-commit"> +<div class="Metadata"> <table> <tr> - <th>{msg desc="Header for commit SHA entry"}commit{/msg}</th> + <th class="Metadata-title">{msg desc="Header for commit SHA entry"}commit{/msg}</th> <td class="sha1"> <a href="{$url}">{$sha}</a> </td> @@ -195,18 +187,18 @@ </td> </tr> <tr> - <th>{msg desc="Header for commit author"}author{/msg}</th> + <th class="Metadata-title">{msg desc="Header for commit author"}author{/msg}</th> <td>{call .person_ data="$author" /}</td> <td>{$author.time}</td> </tr> <tr> - <th>{msg desc="Header for committer"}committer{/msg}</th> + <th class="Metadata-title">{msg desc="Header for committer"}committer{/msg}</th> <td>{call .person_ data="$committer" /}</td> <td>{$committer.time}</td> </tr> </table> </div> -<pre class="commit-message"> +<pre class="MetadataMessage"> {$message} </pre> {/deltemplate}
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/ObjectDetail.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/ObjectDetail.soy index 6c87498..242f14b 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/ObjectDetail.soy +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/ObjectDetail.soy
@@ -41,39 +41,40 @@ * @param archiveType type of the archive to download. */ {template .commitDetail} -<div class="git-commit"> +<div class="Metadata"> <table> <tr> - <th>{msg desc="Header for commit SHA entry"}commit{/msg}</th> - <td class="sha"> + <th class="Metadata-title">{msg desc="Header for commit SHA entry"}commit{/msg}</th> + <td> {$sha} - <span class="log-link"> + </td> + <td> + <span> [<a href="{$logUrl}">{msg desc="text for the log link"}log{/msg}</a>] </span> - <span class="download-link">[<a href="{$archiveUrl}">{$archiveType}</a>]</span> + {sp}<span>[<a href="{$archiveUrl}">{$archiveType}</a>]</span> </td> - <td>{sp}</td> </tr> <tr> - <th>{msg desc="Header for commit author"}author{/msg}</th> + <th class="Metadata-title">{msg desc="Header for commit author"}author{/msg}</th> <td>{call .person_ data="$author" /}</td> <td>{$author.time}</td> </tr> <tr> - <th>{msg desc="Header for committer"}committer{/msg}</th> + <th class="Metadata-title">{msg desc="Header for committer"}committer{/msg}</th> <td>{call .person_ data="$committer" /}</td> <td>{$committer.time}</td> </tr> <tr> - <th>{msg desc="Header for tree SHA entry"}tree{/msg}</th> - <td class="sha"><a href="{$treeUrl}">{$tree}</a></td> + <th class="Metadata-title">{msg desc="Header for tree SHA entry"}tree{/msg}</th> + <td><a href="{$treeUrl}">{$tree}</a></td> </tr> {foreach $parent in $parents} <tr> - <th>{msg desc="Header for parent SHA"}parent{/msg}</th> + <th class="Metadata-title">{msg desc="Header for parent SHA"}parent{/msg}</th> <td> <a href="{$parent.url}">{$parent.sha}</a> - <span class="diff-link"> + {sp}<span> [<a href="{$parent.diffUrl}">{msg desc="text for the parent diff link"}diff{/msg}</a>] {if isNonnull($parent.blameUrl)} {sp}[<a href="{$parent.blameUrl}">{msg desc="text for the parent blame link"}blame{/msg}</a>] @@ -85,42 +86,42 @@ </table> </div> {call .message_} - {param className: 'commit-message' /} + {param className: 'u-pre MetadataMessage' /} {param message: $message /} {/call} {if $diffTree and length($diffTree)} - <ul class="diff-tree"> + <ul class="DiffTree"> {foreach $entry in $diffTree} <li> <a href="{$entry.url}">{$entry.path}</a> {switch $entry.changeType} {case 'ADD'} - <span class="add"> + <span class="DiffTree-action DiffTree-action--add"> {msg desc="Text for a new tree entry"} [Added - <a href="{$entry.diffUrl}">diff</a>] {/msg} </span> {case 'MODIFY'} - <span class="modify"> + <span class="DiffTree-action DiffTree-action--modify"> {msg desc="Text for a modified tree entry"} [<a href="{$entry.diffUrl}">diff</a>] {/msg} </span> {case 'DELETE'} - <span class="delete"> + <span class="DiffTree-action DiffTree-action--delete"> {msg desc="Text for a deleted tree entry"} [Deleted - <a href="{$entry.diffUrl}">diff</a>] {/msg} </span> {case 'RENAME'} - <span class="rename"> + <span class="DiffTree-action DiffTree-action--rename"> {msg desc="Text for a renamed tree entry"} [Renamed from {$entry.oldPath} - <a href="{$entry.diffUrl}">diff</a>] {/msg} </span> {case 'COPY'} - <span class="copy"> + <span class="DiffTree-action DiffTree-action--copy"> {msg desc="Text for a copied tree entry"} [Copied from {$entry.oldPath} - <a href="{$entry.diffUrl}">diff</a>] {/msg} @@ -130,7 +131,7 @@ </li> {/foreach} </ul> - <div class="diff-summary"> + <div class="DiffSummary"> {if length($diffTree) == 1} {msg desc="1 file changed"}1 file changed{/msg} {else} @@ -160,59 +161,63 @@ * @param? readmeHtml optional rendered README.md contents. */ {template .treeDetail} -<div class="sha1"> - {msg desc="SHA-1 for the path's tree"}tree: {$sha}{/msg} - {if $logUrl}{sp}[<a href="{$logUrl}">{msg desc="history for a path"}path history{/msg}</a>]{/if} - {if $archiveUrl} - <span class="download-link">[<a href="{$archiveUrl}">{$archiveType}</a>]</span> +<div class="TreeDetail"> + <div class="u-sha1 TreeDetail-sha1"> + {msg desc="SHA-1 for the path's tree"}tree: {$sha}{/msg} + {if $logUrl}{sp}[<a href="{$logUrl}">{msg desc="history for a path"}path history{/msg}</a>]{/if} + {if $archiveUrl} + {sp}<span>[<a href="{$archiveUrl}">{$archiveType}</a>]</span> + {/if} + </div> + + {if length($entries)} + <ol class="FileList"> + {foreach $entry in $entries} + <li class="FileList-item{sp} + {switch $entry.type} + {case 'TREE'}FileList-item--gitTree + {case 'SYMLINK'}FileList-item--symlink + {case 'REGULAR_FILE'}FileList-item--regularFile + {case 'EXECUTABLE_FILE'}FileList-item--executableFile + {case 'GITLINK'}gitlink + {default}regular-file + {/switch} + " title=" + {switch $entry.type} + {case 'TREE'}{msg desc="Alt text for tree icon"}Tree{/msg} + {case 'SYMLINK'}{msg desc="Alt text for symlink icon"}Symlink{/msg} + {case 'REGULAR_FILE'}{msg desc="Alt text for regular file icon"}Regular file{/msg} + {case 'EXECUTABLE_FILE'} + {msg desc="Alt text for executable file icon"}Executable file{/msg} + {case 'GITLINK'} + {msg desc="Alt text for git submodule link icon"}Git submodule link{/msg} + {default}{msg desc="Alt text for other file icon"}Other{/msg} + {/switch} + {sp}- {$entry.name}"> + <a class="FileList-itemLink" href="{$entry.url}">{$entry.name}</a> + {if $entry.type == 'SYMLINK'} + {sp}⇨{sp} + {if $entry.targetUrl} + <a href="{$entry.targetUrl}">{$entry.targetName}</a> + {else} + {$entry.targetName} + {/if} + {/if} + // TODO(dborowitz): Something reasonable for gitlinks. + </li> + {/foreach} + </ol> + {else} + <p>{msg desc="Informational text for when a tree is empty"}This tree is empty.{/msg}</p> + {/if} + + {if $readmeHtml} + <div class="InlineReadme"> + <div class="InlineReadme-path">{$readmePath}</div> + <div class="doc">{$readmeHtml}</div> + </div> {/if} </div> - -{if length($entries)} - <ol class="list files"> - {foreach $entry in $entries} - <li class=" - {switch $entry.type} - {case 'TREE'}git-tree - {case 'SYMLINK'}symlink - {case 'REGULAR_FILE'}regular-file - {case 'EXECUTABLE_FILE'}executable-file - {case 'GITLINK'}gitlink - {default}regular-file - {/switch} - " title=" - {switch $entry.type} - {case 'TREE'}{msg desc="Alt text for tree icon"}Tree{/msg} - {case 'SYMLINK'}{msg desc="Alt text for symlink icon"}Symlink{/msg} - {case 'REGULAR_FILE'}{msg desc="Alt text for regular file icon"}Regular file{/msg} - {case 'EXECUTABLE_FILE'} - {msg desc="Alt text for executable file icon"}Executable file{/msg} - {case 'GITLINK'} - {msg desc="Alt text for git submodule link icon"}Git submodule link{/msg} - {default}{msg desc="Alt text for other file icon"}Other{/msg} - {/switch} - - {$entry.name}"> - <a href="{$entry.url}">{$entry.name}</a> - {if $entry.type == 'SYMLINK'} - {sp}⇨{sp} - {if $entry.targetUrl} - <a href="{$entry.targetUrl}">{$entry.targetName}</a> - {else} - {$entry.targetName} - {/if} - {/if} - // TODO(dborowitz): Something reasonable for gitlinks. - </li> - {/foreach} - </ol> -{else} - <p>{msg desc="Informational text for when a tree is empty"}This tree is empty.{/msg}</p> -{/if} - -{if $readmeHtml} - <div class="readme-path">{$readmePath}</div> - <div class="doc">{$readmeHtml}</div> -{/if} {/template} /** @@ -225,7 +230,7 @@ * @param? docUrl optional URL to view rendered file. */ {template .blobHeader} -<div class="sha1"> +<div class="u-sha1 BlobSha1"> {msg desc="SHA-1 for the file's blob"}blob: {$sha}{/msg} {if $fileUrl}{sp}[<a href="{$fileUrl}">{msg desc="detail view of a file"}file{/msg}</a>]{/if} {if $logUrl}{sp}[<a href="{$logUrl}">{msg desc="history for a file"}log{/msg}</a>]{/if} @@ -250,21 +255,26 @@ {if $lines != null} {if $lines} - <ol class="prettyprint"> + <table class="FileContents"> {foreach $line in $lines} - <li> - <a name="{index($line) + 1}"></a> - {foreach $span in $line} - <span class="{$span.classes}">{$span.text}</span> - {/foreach} - </li> + {let $n: index($line) + 1 /} + <tr class="u-pre FileContents-line"> + <td class="u-lineNum u-noSelect FileContents-lineNum" + data-line-number="{$n}" onclick="window.location.hash='#{$n}'"></td> + <td class="FileContents-lineContents"> + <a name="{$n}"></a> + {foreach $span in $line} + <span class="{$span.classes}">{$span.text}</span> + {/foreach} + </td> + </tr> {/foreach} - </ol> + </table> {else} - <div class="file-empty">Empty file</div> + <div class="FileContents-empty">Empty file</div> {/if} {else} - <div class="file-binary"> + <div class="FileContents-binary"> {msg desc="size of binary file in bytes"}{$size}-byte binary file{/msg} </div> {/if} @@ -280,22 +290,22 @@ * @param message tag message. */ {template .tagDetail} -<div class="git-tag"> +<div class="Metadata"> <table> <tr> - <th>{msg desc="Header for tag SHA entry"}tag{/msg}</th> + <th class="Metadata-title">{msg desc="Header for tag SHA entry"}tag{/msg}</th> <td class="sha">{$sha}</td> <td>{sp}</td> </tr> {if $tagger} <tr> - <th>{msg desc="Header for tagger"}tagger{/msg}</th> + <th class="Metadata-title">{msg desc="Header for tagger"}tagger{/msg}</th> <td>{call .person_ data="$tagger" /}</td> <td>{$tagger.time}</td> </tr> {/if} <tr> - <th>{msg desc="Header for tagged object SHA"}object{/msg}</th> + <th class="Metadata-title">{msg desc="Header for tagged object SHA"}object{/msg}</th> <td class="sha">{$object}</td> <td>{sp}</td> </tr> @@ -303,7 +313,7 @@ </div> {if $message and length($message)} {call .message_} - {param className: 'tag-message' /} + {param className: 'u-pre MetadataMessage' /} {param message: $message /} {/call} {/if}
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RefList.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RefList.soy index 57b1111..74f89d0 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RefList.soy +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RefList.soy
@@ -33,23 +33,21 @@ {param breadcrumbs: $breadcrumbs /} {/call} -{if length($branches)} - <div class="refs-branches refs-detail"> +<div class="Refs"> + {if length($branches)} {call .refList} {param type: 'Branches' /} {param refs: $branches /} {/call} - </div> -{/if} + {/if} -{if length($tags)} - <div class="refs-tags refs-detail"> + {if length($tags)} {call .refList} {param type: 'Tags' /} {param refs: $tags /} {/call} - </div> -{/if} + {/if} +</div> {call .footer /} {/template} @@ -61,10 +59,12 @@ * @param refs list of branch objects with url, name, and optional isHead keys. */ {template .refList} - <h3>{$type}</h3> - <ul class="ref-list"> - {foreach $ref in $refs} - <li{if $ref.isHead} class="head-ref"{/if}><a href="{$ref.url}">{$ref.name}</a></li> - {/foreach} - </ul> + <div class="RefList"> + <h3 class="RefList-title">{$type}</h3> + <ul class="RefList-items"> + {foreach $ref in $refs} + <li class="RefList-item"><a href="{$ref.url}">{$ref.name}</a></li> + {/foreach} + </ul> + </div> {/template}
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RepositoryIndex.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RepositoryIndex.soy index 17b0053..787c15f 100644 --- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RepositoryIndex.soy +++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RepositoryIndex.soy
@@ -50,39 +50,39 @@ {/call} {/if} -{if $description or $mirroredFromUrl} - <div class="repository-description"> - {$description} - {if $mirroredFromUrl} - <div class="repository-mirrored-from"> +{if $description} + <h2 class="RepoDescription">{$description}</h2> +{/if} + +{if $mirroredFromUrl} + <div class="RepoMirroredFrom"> {msg desc="Informational text describing source of repository"} - mirrored from {$mirroredFromUrl} + Mirrored from <a href="{$mirroredFromUrl}">{$mirroredFromUrl}</a> {/msg} - </div> - {/if} </div> {/if} -<textarea rows="1" cols="150" class="clone-line" - onclick="this.focus();this.select();" - readonly="readonly"> - git clone {$cloneUrl} -</textarea> +<div class="CloneRepo"> + <div class="CloneRepo-title">Clone this repo:</div> + <input type="text" class="CloneRepo-command" + onclick="this.focus();this.select();" + readonly="readonly" value="git clone {$cloneUrl}"> +</div> {if $hasLog and (length($branches) or length($tags))} - <div class="repository-shortlog-wrapper"> - <div class="repository-shortlog"> - {call .streamingPlaceholder /} + <div class="RepoShortlog"> + <div class="RepoShortlog-refs"> + {call .branches_ data="all" /} + {call .tags_ data="all" /} </div> - {if $readmeHtml} - <div class="doc repository-index-doc">{$readmeHtml}</div> - {/if} + <div class="RepoShortlog-log"> + {call .streamingPlaceholder /} + {if $readmeHtml} + <div class="doc RepoIndexDoc">{$readmeHtml}</div> + {/if} + </div> </div> - <div class="repository-refs"> - {call .branches_ data="all" /} - {call .tags_ data="all" /} - </div> {elseif $hasLog} {call .streamingPlaceholder /} {elseif length($branches) or length($tags)}