Fixes #228 - gutter annotation isn't sized properly

CHANGELOG.md

@@ -9,6 +9,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
   - Automatically updates to track the repository of the active editor
   - Only visible if there is more than 1 repository within the workspace
 
+### Fixed
+- Fixes [#228](https://github.com/eamodio/vscode-gitlens/issues/228) - Gutter blame spills over heatmap
+
 ## [6.4.0] - 2017-12-12
 ### Added
 - Adds `gitlens.keymap` setting to specify the keymap to use for GitLens shortcut keys -- closes [#104](https://github.com/eamodio/vscode-gitlens/issues/104)

src/annotations/annotations.ts

@@ -161,21 +161,30 @@ export class Annotations {
         return decoration;
     }
 
-    static gutterRenderOptions(separateLines: boolean, heatmap: IHeatmapConfig, options: ICommitFormatOptions): IRenderOptions {
-        // Try to get the width of the string, if there is a cap
-        let width = 4; // Start with a padding
+    static gutterRenderOptions(separateLines: boolean, heatmap: IHeatmapConfig, format: string, options: ICommitFormatOptions): IRenderOptions {
+        // Get the width of all the tokens, assuming there there is a cap (bail if not)
+        let width = 0;
         for (const token of Objects.values(options.tokenOptions!)) {
             if (token === undefined) continue;
 
             // If any token is uncapped, kick out and set no max
             if (token.truncateTo == null) {
-                width = 0;
+                width = -1;
                 break;
             }
 
             width += token.truncateTo;
         }
 
+        if (width >= 0) {
+            // Add the width of the template string (without tokens)
+            width += Strings.width(Strings.interpolate(format, undefined));
+            // If we have some width, add a bit of padding
+            if (width > 0) {
+                width += 3;
+            }
+        }
+
         let borderStyle = undefined;
         let borderWidth = undefined;
         if (heatmap.enabled) {
@@ -191,7 +200,7 @@ export class Annotations {
             height: '100%',
             margin: '0 26px -1px 0',
             textDecoration: separateLines ? 'overline solid rgba(0, 0, 0, .2)' : 'none',
-            width: (width > 4) ? `${width}ch` : undefined,
+            width: width >= 0 ? `${width}ch` : undefined,
             uncommittedColor: new ThemeColor('gitlens.gutterUncommittedForegroundColor')
         } as IRenderOptions;
     }

src/annotations/gutterBlameAnnotationProvider.ts

@@ -34,7 +34,7 @@ export class GutterBlameAnnotationProvider extends BlameAnnotationProviderBase {
 
         const now = Date.now();
         const separateLines = this._config.annotations.file.gutter.separateLines;
-        const renderOptions = Annotations.gutterRenderOptions(separateLines, cfg.heatmap, options);
+        const renderOptions = Annotations.gutterRenderOptions(separateLines, cfg.heatmap, cfg.format, options);
 
         this._decorations = [];
         const decorationsMap: { [sha: string]: DecorationOptions | undefined } = Object.create(null);

src/system/string.ts

@@ -36,8 +36,9 @@ export namespace Strings {
         return tokens;
     }
 
-    export function interpolate(template: string, context: object): string {
+    export function interpolate(template: string, context: object | undefined): string {
         if (!template) return template;
+        if (context === undefined) return template.replace(TokenSanitizeRegex, '');
 
         template = template.replace(TokenSanitizeRegex, '$${this.$1}');
         return new Function(`return \`${template}\`;`).call(context);