diffs: added diff navigation to improve UX when browisng the full context diffs.

rhodecode/public/js/src/plugins/jquery.scrollstop.js

@@ -0,0 +1,91 b''
+// jQuery Scrollstop Plugin v1.2.0
+// https://github.com/ssorallen/jquery-scrollstop
+
+(function (factory) {
+  // UMD[2] wrapper for jQuery plugins to work in AMD or in CommonJS.
+  //
+  // [2] https://github.com/umdjs/umd
+
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    // Node/CommonJS
+    module.exports = factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+}(function ($) {
+  // $.event.dispatch was undocumented and was deprecated in jQuery 1.7[1]. It
+  // was replaced by $.event.handle in jQuery 1.9.
+  //
+  // Use the first of the available functions to support jQuery <1.8.
+  //
+  // [1] https://github.com/jquery/jquery-migrate/blob/master/src/event.js#L25
+  var dispatch = $.event.dispatch || $.event.handle;
+
+  var special = $.event.special,
+      uid1 = 'D' + (+new Date()),
+      uid2 = 'D' + (+new Date() + 1);
+
+  special.scrollstart = {
+    setup: function(data) {
+      var _data = $.extend({
+        latency: special.scrollstop.latency
+      }, data);
+
+      var timer,
+          handler = function(evt) {
+            var _self = this,
+                _args = arguments;
+
+            if (timer) {
+              clearTimeout(timer);
+            } else {
+              evt.type = 'scrollstart';
+              dispatch.apply(_self, _args);
+            }
+
+            timer = setTimeout(function() {
+              timer = null;
+            }, _data.latency);
+          };
+
+      $(this).bind('scroll', handler).data(uid1, handler);
+    },
+    teardown: function() {
+      $(this).unbind('scroll', $(this).data(uid1));
+    }
+  };
+
+  special.scrollstop = {
+    latency: 250,
+    setup: function(data) {
+      var _data = $.extend({
+        latency: special.scrollstop.latency
+      }, data);
+
+      var timer,
+          handler = function(evt) {
+            var _self = this,
+                _args = arguments;
+
+            if (timer) {
+              clearTimeout(timer);
+            }
+
+            timer = setTimeout(function() {
+              timer = null;
+              evt.type = 'scrollstop';
+              dispatch.apply(_self, _args);
+            }, _data.latency);
+          };
+
+      $(this).bind('scroll', handler).data(uid2, handler);
+    },
+    teardown: function() {
+      $(this).unbind('scroll', $(this).data(uid2));
+    }
+  };
+}));

rhodecode/public/js/src/plugins/jquery.within-viewport.js

@@ -0,0 +1,171 b''
+/**
+ * Within Viewport jQuery Plugin
+ *
+ * @description Companion plugin for withinviewport.js - determines whether an element is completely within the browser viewport
+ * @author      Craig Patik, http://patik.com/
+ * @version     2.1.2
+ * @date        2019-08-16
+ */
+(function ($) {
+    /**
+     * $.withinviewport()
+     * @description          jQuery method
+     * @param  {Object}      [settings] optional settings
+     * @return {Collection}  Contains all elements that were within the viewport
+     */
+    $.fn.withinviewport = function (settings) {
+        var opts;
+        var elems;
+
+        if (typeof settings === 'string') {
+            settings = {
+                sides: settings
+            };
+        }
+
+        opts = $.extend({}, settings, {
+            sides: 'all'
+        });
+        elems = [];
+
+        this.each(function () {
+            if (withinviewport(this, opts)) {
+                elems.push(this);
+            }
+        });
+
+        return $(elems);
+    };
+
+    // Main custom selector
+    $.extend($.expr[':'], {
+        'within-viewport': function (element) {
+            return withinviewport(element, 'all');
+        }
+    });
+
+    /**
+     * Optional enhancements and shortcuts
+     *
+     * @description Uncomment or comment these pieces as they apply to your project and coding preferences
+     */
+
+    // Shorthand jQuery methods
+
+    $.fn.withinviewporttop = function (settings) {
+        var opts;
+        var elems;
+
+        if (typeof settings === 'string') {
+            settings = {
+                sides: settings
+            };
+        }
+
+        opts = $.extend({}, settings, {
+            sides: 'top'
+        });
+        elems = [];
+
+        this.each(function () {
+            if (withinviewport(this, opts)) {
+                elems.push(this);
+            }
+        });
+
+        return $(elems);
+    };
+
+    $.fn.withinviewportright = function (settings) {
+        var opts;
+        var elems;
+
+        if (typeof settings === 'string') {
+            settings = {
+                sides: settings
+            };
+        }
+
+        opts = $.extend({}, settings, {
+            sides: 'right'
+        });
+        elems = [];
+
+        this.each(function () {
+            if (withinviewport(this, opts)) {
+                elems.push(this);
+            }
+        });
+
+        return $(elems);
+    };
+
+    $.fn.withinviewportbottom = function (settings) {
+        var opts;
+        var elems;
+
+        if (typeof settings === 'string') {
+            settings = {
+                sides: settings
+            };
+        }
+
+        opts = $.extend({}, settings, {
+            sides: 'bottom'
+        });
+        elems = [];
+
+        this.each(function () {
+            if (withinviewport(this, opts)) {
+                elems.push(this);
+            }
+        });
+
+        return $(elems);
+    };
+
+    $.fn.withinviewportleft = function (settings) {
+        var opts;
+        var elems;
+
+        if (typeof settings === 'string') {
+            settings = {
+                sides: settings
+            };
+        }
+
+        opts = $.extend({}, settings, {
+            sides: 'left'
+        });
+        elems = [];
+
+        this.each(function () {
+            if (withinviewport(this, opts)) {
+                elems.push(this);
+            }
+        });
+
+        return $(elems);
+    };
+
+    // Custom jQuery selectors
+    $.extend($.expr[':'], {
+        'within-viewport-top': function (element) {
+            return withinviewport(element, 'top');
+        },
+        'within-viewport-right': function (element) {
+            return withinviewport(element, 'right');
+        },
+        'within-viewport-bottom': function (element) {
+            return withinviewport(element, 'bottom');
+        },
+        'within-viewport-left': function (element) {
+            return withinviewport(element, 'left');
+        }
+        // Example custom selector:
+        //,
+        // 'within-viewport-top-left-45': function (element) {
+        //     return withinviewport(element, {sides:'top left', top: 45, left: 45});
+        // }
+    });
+}(jQuery));
  No newline at end of file

rhodecode/public/js/src/plugins/within_viewport.js

@@ -0,0 +1,235 b''
+/**
+ * Within Viewport
+ *
+ * @description Determines whether an element is completely within the browser viewport
+ * @author      Craig Patik, http://patik.com/
+ * @version     2.1.2
+ * @date        2019-08-16
+ */
+(function (root, name, factory) {
+    // AMD
+    if (typeof define === 'function' && define.amd) {
+        define([], factory);
+    }
+    // Node and CommonJS-like environments
+    else if (typeof module !== 'undefined' && typeof exports === 'object') {
+        module.exports = factory();
+    }
+    // Browser global
+    else {
+        root[name] = factory();
+    }
+}(this, 'withinviewport', function () {
+    var canUseWindowDimensions = typeof window !== 'undefined' && window.innerHeight !== undefined; // IE 8 and lower fail this
+
+    /**
+     * Determines whether an element is within the viewport
+     * @param  {Object}  elem       DOM Element (required)
+     * @param  {Object}  options    Optional settings
+     * @return {Boolean}            Whether the element was completely within the viewport
+     */
+    var withinviewport = function withinviewport(elem, options) {
+        var result = false;
+        var metadata = {};
+        var config = {};
+        var settings;
+        var isWithin;
+        var isContainerTheWindow;
+        var elemBoundingRect;
+        var containerBoundingRect;
+        var containerScrollTop;
+        var containerScrollLeft;
+        var scrollBarWidths = [0, 0];
+        var sideNamesPattern;
+        var sides;
+        var side;
+        var i;
+
+        // If invoked by the jQuery plugin, get the actual DOM element
+        if (typeof jQuery !== 'undefined' && elem instanceof jQuery) {
+            elem = elem.get(0);
+        }
+
+        if (typeof elem !== 'object' || elem.nodeType !== 1) {
+            throw new Error('First argument must be an element');
+        }
+
+        // Look for inline settings on the element
+        if (elem.getAttribute('data-withinviewport-settings') && window.JSON) {
+            metadata = JSON.parse(elem.getAttribute('data-withinviewport-settings'));
+        }
+
+        // Settings argument may be a simple string (`top`, `right`, etc)
+        if (typeof options === 'string') {
+            settings = {
+                sides: options
+            };
+        } else {
+            settings = options || {};
+        }
+
+        // Build configuration from defaults and user-provided settings and metadata
+        config.container = settings.container || metadata.container || withinviewport.defaults.container || window;
+        config.sides = settings.sides || metadata.sides || withinviewport.defaults.sides || 'all';
+        config.top = settings.top || metadata.top || withinviewport.defaults.top || 0;
+        config.right = settings.right || metadata.right || withinviewport.defaults.right || 0;
+        config.bottom = settings.bottom || metadata.bottom || withinviewport.defaults.bottom || 0;
+        config.left = settings.left || metadata.left || withinviewport.defaults.left || 0;
+
+        // Extract the DOM node from a jQuery collection
+        if (typeof jQuery !== 'undefined' && config.container instanceof jQuery) {
+            config.container = config.container.get(0);
+        }
+
+        // Use the window as the container if the user specified the body or a non-element
+        if (config.container === document.body || config.container.nodeType !== 1) {
+            config.container = window;
+        }
+
+        isContainerTheWindow = (config.container === window);
+
+        // Element testing methods
+        isWithin = {
+            // Element is below the top edge of the viewport
+            top: function _isWithin_top() {
+                if (isContainerTheWindow) {
+                    return (elemBoundingRect.top >= config.top);
+                } else {
+                    return (elemBoundingRect.top >= containerScrollTop - (containerScrollTop - containerBoundingRect.top) + config.top);
+                }
+            },
+
+            // Element is to the left of the right edge of the viewport
+            right: function _isWithin_right() {
+                // Note that `elemBoundingRect.right` is the distance from the *left* of the viewport to the element's far right edge
+
+                if (isContainerTheWindow) {
+                    return (elemBoundingRect.right <= (containerBoundingRect.right + containerScrollLeft) - config.right);
+                } else {
+                    return (elemBoundingRect.right <= containerBoundingRect.right - scrollBarWidths[0] - config.right);
+                }
+            },
+
+            // Element is above the bottom edge of the viewport
+            bottom: function _isWithin_bottom() {
+                var containerHeight = 0;
+
+                if (isContainerTheWindow) {
+                    if (canUseWindowDimensions) {
+                        containerHeight = config.container.innerHeight;
+                    } else if (document && document.documentElement) {
+                        containerHeight = document.documentElement.clientHeight;
+                    }
+                } else {
+                    containerHeight = containerBoundingRect.bottom;
+                }
+
+                // Note that `elemBoundingRect.bottom` is the distance from the *top* of the viewport to the element's bottom edge
+                return (elemBoundingRect.bottom <= containerHeight - scrollBarWidths[1] - config.bottom);
+            },
+
+            // Element is to the right of the left edge of the viewport
+            left: function _isWithin_left() {
+                if (isContainerTheWindow) {
+                    return (elemBoundingRect.left >= config.left);
+                } else {
+                    return (elemBoundingRect.left >= containerScrollLeft - (containerScrollLeft - containerBoundingRect.left) + config.left);
+                }
+            },
+
+            // Element is within all four boundaries
+            all: function _isWithin_all() {
+                // Test each boundary in order of efficiency and likeliness to be false. This way we can avoid running all four functions on most elements.
+                //     1. Top: Quickest to calculate + most likely to be false
+                //     2. Bottom: Note quite as quick to calculate, but also very likely to be false
+                //     3-4. Left and right are both equally unlikely to be false since most sites only scroll vertically, but left is faster to calculate
+                return (isWithin.top() && isWithin.bottom() && isWithin.left() && isWithin.right());
+            }
+        };
+
+        // Get the element's bounding rectangle with respect to the viewport
+        elemBoundingRect = elem.getBoundingClientRect();
+
+        // Get viewport dimensions and offsets
+        if (isContainerTheWindow) {
+            containerBoundingRect = document.documentElement.getBoundingClientRect();
+            containerScrollTop = document.body.scrollTop;
+            containerScrollLeft = window.scrollX || document.body.scrollLeft;
+        } else {
+            containerBoundingRect = config.container.getBoundingClientRect();
+            containerScrollTop = config.container.scrollTop;
+            containerScrollLeft = config.container.scrollLeft;
+        }
+
+        // Don't count the space consumed by scrollbars
+        if (containerScrollLeft) {
+            scrollBarWidths[0] = 18;
+        }
+
+        if (containerScrollTop) {
+            scrollBarWidths[1] = 16;
+        }
+
+        // Test the element against each side of the viewport that was requested
+        sideNamesPattern = /^top$|^right$|^bottom$|^left$|^all$/;
+
+        // Loop through all of the sides
+        sides = config.sides.split(' ');
+        i = sides.length;
+
+        while (i--) {
+            side = sides[i].toLowerCase();
+
+            if (sideNamesPattern.test(side)) {
+                if (isWithin[side]()) {
+                    result = true;
+                } else {
+                    result = false;
+
+                    // Quit as soon as the first failure is found
+                    break;
+                }
+            }
+        }
+
+        return result;
+    };
+
+    // Default settings
+    withinviewport.prototype.defaults = {
+        container: typeof document !== 'undefined' ? document.body : {},
+        sides: 'all',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+    };
+
+    withinviewport.defaults = withinviewport.prototype.defaults;
+
+    /**
+     * Optional enhancements and shortcuts
+     *
+     * @description Uncomment or comment these pieces as they apply to your project and coding preferences
+     */
+
+    // Shortcut methods for each side of the viewport
+    // Example: `withinviewport.top(elem)` is the same as `withinviewport(elem, 'top')`
+    withinviewport.prototype.top = function _withinviewport_top(element) {
+        return withinviewport(element, 'top');
+    };
+
+    withinviewport.prototype.right = function _withinviewport_right(element) {
+        return withinviewport(element, 'right');
+    };
+
+    withinviewport.prototype.bottom = function _withinviewport_bottom(element) {
+        return withinviewport(element, 'bottom');
+    };
+
+    withinviewport.prototype.left = function _withinviewport_left(element) {
+        return withinviewport(element, 'left');
+    };
+
+    return withinviewport;
+}));
  No newline at end of file

grunt_config.json

@@ -1,184 +1,187 b''
 {
   "dirs": {
     "css": {
       "src": "rhodecode/public/css",
       "dest": "rhodecode/public/css"
     },
     "js": {
       "src": "rhodecode/public/js/src",
       "src_rc": "rhodecode/public/js/rhodecode",
       "dest": "rhodecode/public/js",
       "node_modules": "node_modules"
     }
   },
   "copy": {
     "main": {
       "files": [
         {
           "expand": true,
           "cwd": "node_modules/@webcomponents",
           "src": "webcomponentsjs/*.*",
           "dest": "<%= dirs.js.dest %>/vendors"
         },
         {
           "src": "<%= dirs.css.src %>/style-polymer.css",
           "dest": "<%= dirs.js.dest %>/src/components/style-polymer.css"
         }
       ]
     }
   },
   "concat": {
     "dist": {
       "src": [
         "<%= dirs.js.node_modules %>/jquery/dist/jquery.min.js",
         "<%= dirs.js.node_modules %>/mousetrap/mousetrap.min.js",
         "<%= dirs.js.node_modules %>/moment/min/moment.min.js",
         "<%= dirs.js.node_modules %>/clipboard/dist/clipboard.min.js",
         "<%= dirs.js.node_modules %>/favico.js/favico-0.3.10.min.js",
         "<%= dirs.js.node_modules %>/dropzone/dist/min/dropzone.min.js",
         "<%= dirs.js.node_modules %>/sweetalert2/dist/sweetalert2.min.js",
         "<%= dirs.js.node_modules %>/sticky-sidebar/dist/sticky-sidebar.min.js",
         "<%= dirs.js.node_modules %>/sticky-sidebar/dist/jquery.sticky-sidebar.min.js",
         "<%= dirs.js.node_modules %>/waypoints/lib/noframework.waypoints.min.js",
         "<%= dirs.js.node_modules %>/waypoints/lib/jquery.waypoints.min.js",
         "<%= dirs.js.node_modules %>/appenlight-client/appenlight-client.min.js",
         "<%= dirs.js.src %>/logging.js",
         "<%= dirs.js.src %>/bootstrap.js",
         "<%= dirs.js.src %>/i18n_utils.js",
         "<%= dirs.js.src %>/deform.js",
         "<%= dirs.js.src %>/ejs.js",
         "<%= dirs.js.src %>/ejs_templates/utils.js",
         "<%= dirs.js.src %>/plugins/jquery.pjax.js",
         "<%= dirs.js.src %>/plugins/jquery.dataTables.js",
         "<%= dirs.js.src %>/plugins/flavoured_checkbox.js",
+        "<%= dirs.js.src %>/plugins/within_viewport.js",
         "<%= dirs.js.src %>/plugins/jquery.auto-grow-input.js",
         "<%= dirs.js.src %>/plugins/jquery.autocomplete.js",
         "<%= dirs.js.src %>/plugins/jquery.debounce.js",
+        "<%= dirs.js.src %>/plugins/jquery.scrollstop.js",
+        "<%= dirs.js.src %>/plugins/jquery.within-viewport.js",
         "<%= dirs.js.node_modules %>/mark.js/dist/jquery.mark.min.js",
         "<%= dirs.js.src %>/plugins/jquery.timeago.js",
         "<%= dirs.js.src %>/plugins/jquery.timeago-extension.js",
         "<%= dirs.js.src %>/select2/select2.js",
         "<%= dirs.js.src %>/codemirror/codemirror.js",
         "<%= dirs.js.src %>/codemirror/codemirror_loadmode.js",
         "<%= dirs.js.src %>/codemirror/codemirror_hint.js",
         "<%= dirs.js.src %>/codemirror/codemirror_overlay.js",
         "<%= dirs.js.src %>/codemirror/codemirror_placeholder.js",
         "<%= dirs.js.src %>/codemirror/codemirror_simplemode.js",
         "<%= dirs.js.dest %>/mode/meta.js",
         "<%= dirs.js.dest %>/mode/meta_ext.js",
         "<%= dirs.js.src_rc %>/i18n/select2/translations.js",
         "<%= dirs.js.src %>/rhodecode/utils/array.js",
         "<%= dirs.js.src %>/rhodecode/utils/string.js",
         "<%= dirs.js.src %>/rhodecode/utils/pyroutes.js",
         "<%= dirs.js.src %>/rhodecode/utils/ajax.js",
         "<%= dirs.js.src %>/rhodecode/utils/autocomplete.js",
         "<%= dirs.js.src %>/rhodecode/utils/colorgenerator.js",
         "<%= dirs.js.src %>/rhodecode/utils/ie.js",
         "<%= dirs.js.src %>/rhodecode/utils/os.js",
         "<%= dirs.js.src %>/rhodecode/utils/topics.js",
         "<%= dirs.js.src %>/rhodecode/init.js",
         "<%= dirs.js.src %>/rhodecode/changelog.js",
         "<%= dirs.js.src %>/rhodecode/codemirror.js",
         "<%= dirs.js.src %>/rhodecode/comments.js",
         "<%= dirs.js.src %>/rhodecode/constants.js",
         "<%= dirs.js.src %>/rhodecode/files.js",
         "<%= dirs.js.src %>/rhodecode/followers.js",
         "<%= dirs.js.src %>/rhodecode/menus.js",
         "<%= dirs.js.src %>/rhodecode/notifications.js",
         "<%= dirs.js.src %>/rhodecode/permissions.js",
         "<%= dirs.js.src %>/rhodecode/pjax.js",
         "<%= dirs.js.src %>/rhodecode/pullrequests.js",
         "<%= dirs.js.src %>/rhodecode/settings.js",
         "<%= dirs.js.src %>/rhodecode/select2_widgets.js",
         "<%= dirs.js.src %>/rhodecode/tooltips.js",
         "<%= dirs.js.src %>/rhodecode/users.js",
         "<%= dirs.js.src %>/rhodecode/appenlight.js",
         "<%= dirs.js.src %>/rhodecode.js",
         "<%= dirs.js.dest %>/rhodecode-components.js"
       ],
       "dest": "<%= dirs.js.dest %>/scripts.js",
       "nonull": true
     }
   },
   "uglify": {
     "dist": {
       "src": "<%= dirs.js.dest %>/scripts.js",
       "dest": "<%= dirs.js.dest %>/scripts.min.js"
     }
   },
   "less": {
     "development": {
       "options": {
         "compress": false,
         "yuicompress": false,
         "optimization": 0
       },
       "files": {
         "<%= dirs.css.dest %>/style.css": "<%= dirs.css.src %>/main.less",
         "<%= dirs.css.dest %>/style-polymer.css": "<%= dirs.css.src %>/polymer.less",
         "<%= dirs.css.dest %>/style-ipython.css": "<%= dirs.css.src %>/ipython.less"
       }
     },
     "production": {
       "options": {
         "compress": true,
         "yuicompress": true,
         "optimization": 2
       },
       "files": {
         "<%= dirs.css.dest %>/style.css": "<%= dirs.css.src %>/main.less",
         "<%= dirs.css.dest %>/style-polymer.css": "<%= dirs.css.src %>/polymer.less",
         "<%= dirs.css.dest %>/style-ipython.css": "<%= dirs.css.src %>/ipython.less"
       }
     },
     "components": {
       "files": [
         {
           "cwd": "<%= dirs.js.src %>/components/",
           "dest": "<%= dirs.js.src %>/components/",
           "src": [
             "**/*.less"
           ],
           "expand": true,
           "ext": ".css"
         }
       ]
     }
   },
   "watch": {
     "less": {
       "files": [
         "<%= dirs.css.src %>/**/*.less",
         "<%= dirs.js.src %>/components/**/*.less"
       ],
       "tasks": [
         "less:development",
         "less:components",
         "concat:polymercss",
         "webpack",
         "concat:dist"
       ]
     },
     "js": {
       "files": [
         "!<%= dirs.js.src %>/components/root-styles.gen.html",
         "<%= dirs.js.src %>/**/*.js",
         "<%= dirs.js.src %>/components/**/*.html"
       ],
       "tasks": [
         "less:components",
         "concat:polymercss",
         "webpack",
         "concat:dist"
       ]
     }
   },
   "jshint": {
     "rhodecode": {
       "src": "<%= dirs.js.src %>/rhodecode/**/*.js",
       "options": {
         "jshintrc": ".jshintrc"
       }
     }
   }
 }

rhodecode/lib/codeblocks.py

@@ -1,792 +1,793 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2011-2020 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import logging
 import difflib
 from itertools import groupby
 
 from pygments import lex
 from pygments.formatters.html import _get_ttype_class as pygment_token_class
 from pygments.lexers.special import TextLexer, Token
 from pygments.lexers import get_lexer_by_name
 from pyramid import compat
 
 from rhodecode.lib.helpers import (
     get_lexer_for_filenode, html_escape, get_custom_lexer)
 from rhodecode.lib.utils2 import AttributeDict, StrictAttributeDict, safe_unicode
 from rhodecode.lib.vcs.nodes import FileNode
 from rhodecode.lib.vcs.exceptions import VCSError, NodeDoesNotExistError
 from rhodecode.lib.diff_match_patch import diff_match_patch
 from rhodecode.lib.diffs import LimitedDiffContainer, DEL_FILENODE, BIN_FILENODE
 
 
 plain_text_lexer = get_lexer_by_name(
     'text', stripall=False, stripnl=False, ensurenl=False)
 
 
 log = logging.getLogger(__name__)
 
 
 def filenode_as_lines_tokens(filenode, lexer=None):
     org_lexer = lexer
     lexer = lexer or get_lexer_for_filenode(filenode)
     log.debug('Generating file node pygment tokens for %s, %s, org_lexer:%s',
               lexer, filenode, org_lexer)
     content = filenode.content
     tokens = tokenize_string(content, lexer)
     lines = split_token_stream(tokens, content)
     rv = list(lines)
     return rv
 
 
 def tokenize_string(content, lexer):
     """
     Use pygments to tokenize some content based on a lexer
     ensuring all original new lines and whitespace is preserved
     """
 
     lexer.stripall = False
     lexer.stripnl = False
     lexer.ensurenl = False
 
     if isinstance(lexer, TextLexer):
         lexed = [(Token.Text, content)]
     else:
         lexed = lex(content, lexer)
 
     for token_type, token_text in lexed:
         yield pygment_token_class(token_type), token_text
 
 
 def split_token_stream(tokens, content):
     """
     Take a list of (TokenType, text) tuples and split them by a string
 
     split_token_stream([(TEXT, 'some\ntext'), (TEXT, 'more\n')])
     [(TEXT, 'some'), (TEXT, 'text'),
      (TEXT, 'more'), (TEXT, 'text')]
     """
 
     token_buffer = []
     for token_class, token_text in tokens:
         parts = token_text.split('\n')
         for part in parts[:-1]:
             token_buffer.append((token_class, part))
             yield token_buffer
             token_buffer = []
 
         token_buffer.append((token_class, parts[-1]))
 
     if token_buffer:
         yield token_buffer
     elif content:
         # this is a special case, we have the content, but tokenization didn't produce
         # any results. THis can happen if know file extensions like .css have some bogus
         # unicode content without any newline characters
         yield [(pygment_token_class(Token.Text), content)]
 
 
 def filenode_as_annotated_lines_tokens(filenode):
     """
     Take a file node and return a list of annotations => lines, if no annotation
     is found, it will be None.
 
     eg:
 
     [
         (annotation1, [
             (1, line1_tokens_list),
             (2, line2_tokens_list),
         ]),
         (annotation2, [
             (3, line1_tokens_list),
         ]),
         (None, [
             (4, line1_tokens_list),
         ]),
         (annotation1, [
             (5, line1_tokens_list),
             (6, line2_tokens_list),
         ])
     ]
     """
 
     commit_cache = {}  # cache commit_getter lookups
 
     def _get_annotation(commit_id, commit_getter):
         if commit_id not in commit_cache:
             commit_cache[commit_id] = commit_getter()
         return commit_cache[commit_id]
 
     annotation_lookup = {
         line_no: _get_annotation(commit_id, commit_getter)
         for line_no, commit_id, commit_getter, line_content
         in filenode.annotate
     }
 
     annotations_lines = ((annotation_lookup.get(line_no), line_no, tokens)
                           for line_no, tokens
                           in enumerate(filenode_as_lines_tokens(filenode), 1))
 
     grouped_annotations_lines = groupby(annotations_lines, lambda x: x[0])
 
     for annotation, group in grouped_annotations_lines:
         yield (
             annotation, [(line_no, tokens)
                           for (_, line_no, tokens) in group]
         )
 
 
 def render_tokenstream(tokenstream):
     result = []
     for token_class, token_ops_texts in rollup_tokenstream(tokenstream):
 
         if token_class:
             result.append(u'<span class="%s">' % token_class)
         else:
             result.append(u'<span>')
 
         for op_tag, token_text in token_ops_texts:
 
             if op_tag:
                 result.append(u'<%s>' % op_tag)
 
             # NOTE(marcink): in some cases of mixed encodings, we might run into
             # troubles in the html_escape, in this case we say unicode force on token_text
             # that would ensure "correct" data even with the cost of rendered
             try:
                 escaped_text = html_escape(token_text)
             except TypeError:
                 escaped_text = html_escape(safe_unicode(token_text))
 
             # TODO: dan: investigate showing hidden characters like space/nl/tab
             # escaped_text = escaped_text.replace(' ', '<sp> </sp>')
             # escaped_text = escaped_text.replace('\n', '<nl>\n</nl>')
             # escaped_text = escaped_text.replace('\t', '<tab>\t</tab>')
 
             result.append(escaped_text)
 
             if op_tag:
                 result.append(u'</%s>' % op_tag)
 
         result.append(u'</span>')
 
     html = ''.join(result)
     return html
 
 
 def rollup_tokenstream(tokenstream):
     """
     Group a token stream of the format:
 
         ('class', 'op', 'text')
     or
         ('class', 'text')
 
     into
 
         [('class1',
             [('op1', 'text'),
              ('op2', 'text')]),
          ('class2',
             [('op3', 'text')])]
 
     This is used to get the minimal tags necessary when
     rendering to html eg for a token stream ie.
 
     <span class="A"><ins>he</ins>llo</span>
     vs
     <span class="A"><ins>he</ins></span><span class="A">llo</span>
 
     If a 2 tuple is passed in, the output op will be an empty string.
 
     eg:
 
     >>> rollup_tokenstream([('classA', '',      'h'),
                             ('classA', 'del',   'ell'),
                             ('classA', '',      'o'),
                             ('classB', '',      ' '),
                             ('classA', '',      'the'),
                             ('classA', '',      're'),
                             ])
 
     [('classA', [('', 'h'), ('del', 'ell'), ('', 'o')],
      ('classB', [('', ' ')],
      ('classA', [('', 'there')]]
 
     """
     if tokenstream and len(tokenstream[0]) == 2:
         tokenstream = ((t[0], '', t[1]) for t in tokenstream)
 
     result = []
     for token_class, op_list in groupby(tokenstream, lambda t: t[0]):
         ops = []
         for token_op, token_text_list in groupby(op_list, lambda o: o[1]):
             text_buffer = []
             for t_class, t_op, t_text in token_text_list:
                 text_buffer.append(t_text)
             ops.append((token_op, ''.join(text_buffer)))
         result.append((token_class, ops))
     return result
 
 
 def tokens_diff(old_tokens, new_tokens, use_diff_match_patch=True):
     """
     Converts a list of (token_class, token_text) tuples to a list of
     (token_class, token_op, token_text) tuples where token_op is one of
     ('ins', 'del', '')
 
     :param old_tokens: list of (token_class, token_text) tuples of old line
     :param new_tokens: list of (token_class, token_text) tuples of new line
     :param use_diff_match_patch: boolean, will use google's diff match patch
         library which has options to 'smooth' out the character by character
         differences making nicer ins/del blocks
     """
 
     old_tokens_result = []
     new_tokens_result = []
 
     similarity = difflib.SequenceMatcher(None,
         ''.join(token_text for token_class, token_text in old_tokens),
         ''.join(token_text for token_class, token_text in new_tokens)
     ).ratio()
 
     if similarity < 0.6: # return, the blocks are too different
         for token_class, token_text in old_tokens:
             old_tokens_result.append((token_class, '', token_text))
         for token_class, token_text in new_tokens:
             new_tokens_result.append((token_class, '', token_text))
         return old_tokens_result, new_tokens_result, similarity
 
     token_sequence_matcher = difflib.SequenceMatcher(None,
         [x[1] for x in old_tokens],
         [x[1] for x in new_tokens])
 
     for tag, o1, o2, n1, n2 in token_sequence_matcher.get_opcodes():
         # check the differences by token block types first to give a more
         # nicer "block" level replacement vs character diffs
 
         if tag == 'equal':
             for token_class, token_text in old_tokens[o1:o2]:
                 old_tokens_result.append((token_class, '', token_text))
             for token_class, token_text in new_tokens[n1:n2]:
                 new_tokens_result.append((token_class, '', token_text))
         elif tag == 'delete':
             for token_class, token_text in old_tokens[o1:o2]:
                 old_tokens_result.append((token_class, 'del', token_text))
         elif tag == 'insert':
             for token_class, token_text in new_tokens[n1:n2]:
                 new_tokens_result.append((token_class, 'ins', token_text))
         elif tag == 'replace':
             # if same type token blocks must be replaced, do a diff on the
             # characters in the token blocks to show individual changes
 
             old_char_tokens = []
             new_char_tokens = []
             for token_class, token_text in old_tokens[o1:o2]:
                 for char in token_text:
                     old_char_tokens.append((token_class, char))
 
             for token_class, token_text in new_tokens[n1:n2]:
                 for char in token_text:
                     new_char_tokens.append((token_class, char))
 
             old_string = ''.join([token_text for
                 token_class, token_text in old_char_tokens])
             new_string = ''.join([token_text for
                 token_class, token_text in new_char_tokens])
 
             char_sequence = difflib.SequenceMatcher(
                 None, old_string, new_string)
             copcodes = char_sequence.get_opcodes()
             obuffer, nbuffer = [], []
 
             if use_diff_match_patch:
                 dmp = diff_match_patch()
                 dmp.Diff_EditCost = 11  # TODO: dan: extract this to a setting
                 reps = dmp.diff_main(old_string, new_string)
                 dmp.diff_cleanupEfficiency(reps)
 
                 a, b = 0, 0
                 for op, rep in reps:
                     l = len(rep)
                     if op == 0:
                         for i, c in enumerate(rep):
                             obuffer.append((old_char_tokens[a+i][0], '', c))
                             nbuffer.append((new_char_tokens[b+i][0], '', c))
                         a += l
                         b += l
                     elif op == -1:
                         for i, c in enumerate(rep):
                             obuffer.append((old_char_tokens[a+i][0], 'del', c))
                         a += l
                     elif op == 1:
                         for i, c in enumerate(rep):
                             nbuffer.append((new_char_tokens[b+i][0], 'ins', c))
                         b += l
             else:
                 for ctag, co1, co2, cn1, cn2 in copcodes:
                     if ctag == 'equal':
                         for token_class, token_text in old_char_tokens[co1:co2]:
                             obuffer.append((token_class, '', token_text))
                         for token_class, token_text in new_char_tokens[cn1:cn2]:
                             nbuffer.append((token_class, '', token_text))
                     elif ctag == 'delete':
                         for token_class, token_text in old_char_tokens[co1:co2]:
                             obuffer.append((token_class, 'del', token_text))
                     elif ctag == 'insert':
                         for token_class, token_text in new_char_tokens[cn1:cn2]:
                             nbuffer.append((token_class, 'ins', token_text))
                     elif ctag == 'replace':
                         for token_class, token_text in old_char_tokens[co1:co2]:
                             obuffer.append((token_class, 'del', token_text))
                         for token_class, token_text in new_char_tokens[cn1:cn2]:
                             nbuffer.append((token_class, 'ins', token_text))
 
             old_tokens_result.extend(obuffer)
             new_tokens_result.extend(nbuffer)
 
     return old_tokens_result, new_tokens_result, similarity
 
 
 def diffset_node_getter(commit):
     def get_node(fname):
         try:
             return commit.get_node(fname)
         except NodeDoesNotExistError:
             return None
 
     return get_node
 
 
 class DiffSet(object):
     """
     An object for parsing the diff result from diffs.DiffProcessor and
     adding highlighting, side by side/unified renderings and line diffs
     """
 
     HL_REAL = 'REAL'  # highlights using original file, slow
     HL_FAST = 'FAST'  # highlights using just the line, fast but not correct
                       # in the case of multiline code
     HL_NONE = 'NONE'  # no highlighting, fastest
 
     def __init__(self, highlight_mode=HL_REAL, repo_name=None,
                  source_repo_name=None,
                  source_node_getter=lambda filename: None,
                  target_repo_name=None,
                  target_node_getter=lambda filename: None,
                  source_nodes=None, target_nodes=None,
                  # files over this size will use fast highlighting
                  max_file_size_limit=150 * 1024,
                  ):
 
         self.highlight_mode = highlight_mode
         self.highlighted_filenodes = {}
         self.source_node_getter = source_node_getter
         self.target_node_getter = target_node_getter
         self.source_nodes = source_nodes or {}
         self.target_nodes = target_nodes or {}
         self.repo_name = repo_name
         self.target_repo_name = target_repo_name or repo_name
         self.source_repo_name = source_repo_name or repo_name
         self.max_file_size_limit = max_file_size_limit
 
     def render_patchset(self, patchset, source_ref=None, target_ref=None):
         diffset = AttributeDict(dict(
             lines_added=0,
             lines_deleted=0,
             changed_files=0,
             files=[],
             file_stats={},
             limited_diff=isinstance(patchset, LimitedDiffContainer),
             repo_name=self.repo_name,
             target_repo_name=self.target_repo_name,
             source_repo_name=self.source_repo_name,
             source_ref=source_ref,
             target_ref=target_ref,
         ))
         for patch in patchset:
             diffset.file_stats[patch['filename']] = patch['stats']
             filediff = self.render_patch(patch)
             filediff.diffset = StrictAttributeDict(dict(
                 source_ref=diffset.source_ref,
                 target_ref=diffset.target_ref,
                 repo_name=diffset.repo_name,
                 source_repo_name=diffset.source_repo_name,
                 target_repo_name=diffset.target_repo_name,
             ))
             diffset.files.append(filediff)
             diffset.changed_files += 1
             if not patch['stats']['binary']:
                 diffset.lines_added += patch['stats']['added']
                 diffset.lines_deleted += patch['stats']['deleted']
 
         return diffset
 
     _lexer_cache = {}
 
     def _get_lexer_for_filename(self, filename, filenode=None):
         # cached because we might need to call it twice for source/target
         if filename not in self._lexer_cache:
             if filenode:
                 lexer = filenode.lexer
                 extension = filenode.extension
             else:
                 lexer = FileNode.get_lexer(filename=filename)
                 extension = filename.split('.')[-1]
 
             lexer = get_custom_lexer(extension) or lexer
             self._lexer_cache[filename] = lexer
         return self._lexer_cache[filename]
 
     def render_patch(self, patch):
         log.debug('rendering diff for %r', patch['filename'])
 
         source_filename = patch['original_filename']
         target_filename = patch['filename']
 
         source_lexer = plain_text_lexer
         target_lexer = plain_text_lexer
 
         if not patch['stats']['binary']:
             node_hl_mode = self.HL_NONE if patch['chunks'] == [] else None
             hl_mode = node_hl_mode or self.highlight_mode
 
             if hl_mode == self.HL_REAL:
                 if (source_filename and patch['operation'] in ('D', 'M')
                     and source_filename not in self.source_nodes):
                         self.source_nodes[source_filename] = (
                             self.source_node_getter(source_filename))
 
                 if (target_filename and patch['operation'] in ('A', 'M')
                     and target_filename not in self.target_nodes):
                         self.target_nodes[target_filename] = (
                             self.target_node_getter(target_filename))
 
             elif hl_mode == self.HL_FAST:
                 source_lexer = self._get_lexer_for_filename(source_filename)
                 target_lexer = self._get_lexer_for_filename(target_filename)
 
         source_file = self.source_nodes.get(source_filename, source_filename)
         target_file = self.target_nodes.get(target_filename, target_filename)
         raw_id_uid = ''
         if self.source_nodes.get(source_filename):
             raw_id_uid = self.source_nodes[source_filename].commit.raw_id
 
         if not raw_id_uid and self.target_nodes.get(target_filename):
             # in case this is a new file we only have it in target
             raw_id_uid = self.target_nodes[target_filename].commit.raw_id
 
         source_filenode, target_filenode = None, None
 
         # TODO: dan: FileNode.lexer works on the content of the file - which
         # can be slow - issue #4289 explains a lexer clean up - which once
         # done can allow caching a lexer for a filenode to avoid the file lookup
         if isinstance(source_file, FileNode):
             source_filenode = source_file
             #source_lexer = source_file.lexer
             source_lexer = self._get_lexer_for_filename(source_filename)
             source_file.lexer = source_lexer
 
         if isinstance(target_file, FileNode):
             target_filenode = target_file
             #target_lexer = target_file.lexer
             target_lexer = self._get_lexer_for_filename(target_filename)
             target_file.lexer = target_lexer
 
         source_file_path, target_file_path = None, None
 
         if source_filename != '/dev/null':
             source_file_path = source_filename
         if target_filename != '/dev/null':
             target_file_path = target_filename
 
         source_file_type = source_lexer.name
         target_file_type = target_lexer.name
 
         filediff = AttributeDict({
             'source_file_path': source_file_path,
             'target_file_path': target_file_path,
             'source_filenode': source_filenode,
             'target_filenode': target_filenode,
             'source_file_type': target_file_type,
             'target_file_type': source_file_type,
             'patch': {'filename': patch['filename'], 'stats': patch['stats']},
             'operation': patch['operation'],
             'source_mode': patch['stats']['old_mode'],
             'target_mode': patch['stats']['new_mode'],
             'limited_diff': patch['is_limited_diff'],
             'hunks': [],
             'hunk_ops': None,
             'diffset': self,
             'raw_id': raw_id_uid,
         })
 
         file_chunks = patch['chunks'][1:]
-        for hunk in file_chunks:
+        for i, hunk in enumerate(file_chunks, 1):
             hunkbit = self.parse_hunk(hunk, source_file, target_file)
             hunkbit.source_file_path = source_file_path
             hunkbit.target_file_path = target_file_path
+            hunkbit.index = i
             filediff.hunks.append(hunkbit)
 
         # Simulate hunk on OPS type line which doesn't really contain any diff
         # this allows commenting on those
         if not file_chunks:
             actions = []
             for op_id, op_text in filediff.patch['stats']['ops'].items():
                 if op_id == DEL_FILENODE:
                     actions.append(u'file was removed')
                 elif op_id == BIN_FILENODE:
                     actions.append(u'binary diff hidden')
                 else:
                     actions.append(safe_unicode(op_text))
             action_line = u'NO CONTENT: ' + \
                           u', '.join(actions) or u'UNDEFINED_ACTION'
 
             hunk_ops = {'source_length': 0, 'source_start': 0,
                         'lines': [
                             {'new_lineno': 0, 'old_lineno': 1,
                              'action': 'unmod-no-hl', 'line': action_line}
                         ],
                         'section_header': u'', 'target_start': 1, 'target_length': 1}
 
             hunkbit = self.parse_hunk(hunk_ops, source_file, target_file)
             hunkbit.source_file_path = source_file_path
             hunkbit.target_file_path = target_file_path
             filediff.hunk_ops = hunkbit
         return filediff
 
     def parse_hunk(self, hunk, source_file, target_file):
         result = AttributeDict(dict(
             source_start=hunk['source_start'],
             source_length=hunk['source_length'],
             target_start=hunk['target_start'],
             target_length=hunk['target_length'],
             section_header=hunk['section_header'],
             lines=[],
         ))
         before, after = [], []
 
         for line in hunk['lines']:
             if line['action'] in ['unmod', 'unmod-no-hl']:
                 no_hl = line['action'] == 'unmod-no-hl'
                 result.lines.extend(
                     self.parse_lines(before, after, source_file, target_file, no_hl=no_hl))
                 after.append(line)
                 before.append(line)
             elif line['action'] == 'add':
                 after.append(line)
             elif line['action'] == 'del':
                 before.append(line)
             elif line['action'] == 'old-no-nl':
                 before.append(line)
             elif line['action'] == 'new-no-nl':
                 after.append(line)
 
         all_actions = [x['action'] for x in after] + [x['action'] for x in before]
         no_hl = {x for x in all_actions} == {'unmod-no-hl'}
         result.lines.extend(
             self.parse_lines(before, after, source_file, target_file, no_hl=no_hl))
         # NOTE(marcink): we must keep list() call here so we can cache the result...
         result.unified = list(self.as_unified(result.lines))
         result.sideside = result.lines
 
         return result
 
     def parse_lines(self, before_lines, after_lines, source_file, target_file,
                     no_hl=False):
         # TODO: dan: investigate doing the diff comparison and fast highlighting
         # on the entire before and after buffered block lines rather than by
         # line, this means we can get better 'fast' highlighting if the context
         # allows it - eg.
         # line 4: """
         # line 5: this gets highlighted as a string
         # line 6: """
 
         lines = []
 
         before_newline = AttributeDict()
         after_newline = AttributeDict()
         if before_lines and before_lines[-1]['action'] == 'old-no-nl':
             before_newline_line = before_lines.pop(-1)
             before_newline.content = '\n {}'.format(
                 render_tokenstream(
                     [(x[0], '', x[1])
                      for x in [('nonl', before_newline_line['line'])]]))
 
         if after_lines and after_lines[-1]['action'] == 'new-no-nl':
             after_newline_line = after_lines.pop(-1)
             after_newline.content = '\n {}'.format(
                 render_tokenstream(
                     [(x[0], '', x[1])
                      for x in [('nonl', after_newline_line['line'])]]))
 
         while before_lines or after_lines:
             before, after = None, None
             before_tokens, after_tokens = None, None
 
             if before_lines:
                 before = before_lines.pop(0)
             if after_lines:
                 after = after_lines.pop(0)
 
             original = AttributeDict()
             modified = AttributeDict()
 
             if before:
                 if before['action'] == 'old-no-nl':
                     before_tokens = [('nonl', before['line'])]
                 else:
                     before_tokens = self.get_line_tokens(
                         line_text=before['line'], line_number=before['old_lineno'],
                         input_file=source_file, no_hl=no_hl)
                 original.lineno = before['old_lineno']
                 original.content = before['line']
                 original.action = self.action_to_op(before['action'])
 
                 original.get_comment_args = (
                     source_file, 'o', before['old_lineno'])
 
             if after:
                 if after['action'] == 'new-no-nl':
                     after_tokens = [('nonl', after['line'])]
                 else:
                     after_tokens = self.get_line_tokens(
                         line_text=after['line'], line_number=after['new_lineno'],
                         input_file=target_file, no_hl=no_hl)
                 modified.lineno = after['new_lineno']
                 modified.content = after['line']
                 modified.action = self.action_to_op(after['action'])
 
                 modified.get_comment_args = (target_file, 'n', after['new_lineno'])
 
             # diff the lines
             if before_tokens and after_tokens:
                 o_tokens, m_tokens, similarity = tokens_diff(
                     before_tokens, after_tokens)
                 original.content = render_tokenstream(o_tokens)
                 modified.content = render_tokenstream(m_tokens)
             elif before_tokens:
                 original.content = render_tokenstream(
                     [(x[0], '', x[1]) for x in before_tokens])
             elif after_tokens:
                 modified.content = render_tokenstream(
                     [(x[0], '', x[1]) for x in after_tokens])
 
             if not before_lines and before_newline:
                 original.content += before_newline.content
                 before_newline = None
             if not after_lines and after_newline:
                 modified.content += after_newline.content
                 after_newline = None
 
             lines.append(AttributeDict({
                 'original': original,
                 'modified': modified,
             }))
 
         return lines
 
     def get_line_tokens(self, line_text, line_number, input_file=None, no_hl=False):
         filenode = None
         filename = None
 
         if isinstance(input_file, compat.string_types):
             filename = input_file
         elif isinstance(input_file, FileNode):
             filenode = input_file
             filename = input_file.unicode_path
 
         hl_mode = self.HL_NONE if no_hl else self.highlight_mode
         if hl_mode == self.HL_REAL and filenode:
             lexer = self._get_lexer_for_filename(filename)
             file_size_allowed = input_file.size < self.max_file_size_limit
             if line_number and file_size_allowed:
                 return self.get_tokenized_filenode_line(
                     input_file, line_number, lexer)
 
         if hl_mode in (self.HL_REAL, self.HL_FAST) and filename:
             lexer = self._get_lexer_for_filename(filename)
             return list(tokenize_string(line_text, lexer))
 
         return list(tokenize_string(line_text, plain_text_lexer))
 
     def get_tokenized_filenode_line(self, filenode, line_number, lexer=None):
 
         if filenode not in self.highlighted_filenodes:
             tokenized_lines = filenode_as_lines_tokens(filenode, lexer)
             self.highlighted_filenodes[filenode] = tokenized_lines
 
         try:
             return self.highlighted_filenodes[filenode][line_number - 1]
         except Exception:
             return [('', u'rhodecode diff rendering error')]
 
     def action_to_op(self, action):
         return {
             'add': '+',
             'del': '-',
             'unmod': ' ',
             'unmod-no-hl': ' ',
             'old-no-nl': ' ',
             'new-no-nl': ' ',
         }.get(action, action)
 
     def as_unified(self, lines):
         """
         Return a generator that yields the lines of a diff in unified order
         """
         def generator():
             buf = []
             for line in lines:
 
                 if buf and not line.original or line.original.action == ' ':
                     for b in buf:
                         yield b
                     buf = []
 
                 if line.original:
                     if line.original.action == ' ':
                         yield (line.original.lineno, line.modified.lineno,
                                line.original.action, line.original.content,
                                line.original.get_comment_args)
                         continue
 
                     if line.original.action == '-':
                         yield (line.original.lineno, None,
                                line.original.action, line.original.content,
                                line.original.get_comment_args)
 
                     if line.modified.action == '+':
                         buf.append((
                             None, line.modified.lineno,
                             line.modified.action, line.modified.content,
                             line.modified.get_comment_args))
                         continue
 
                 if line.modified:
                     yield (None, line.modified.lineno,
                            line.modified.action, line.modified.content,
                            line.modified.get_comment_args)
 
             for b in buf:
                 yield b
 
         return generator()

rhodecode/lib/helpers.py

@@ -1,2041 +1,2041 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2010-2020 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 """
 Helper functions
 
 Consists of functions to typically be used within templates, but also
 available to Controllers. This module is available to both as 'h'.
 """
 import base64
 
 import os
 import random
 import hashlib
 import StringIO
 import textwrap
 import urllib
 import math
 import logging
 import re
 import time
 import string
 import hashlib
 from collections import OrderedDict
 
 import pygments
 import itertools
 import fnmatch
 import bleach
 
 from pyramid import compat
 from datetime import datetime
 from functools import partial
 from pygments.formatters.html import HtmlFormatter
 from pygments.lexers import (
     get_lexer_by_name, get_lexer_for_filename, get_lexer_for_mimetype)
 
 from pyramid.threadlocal import get_current_request
-
+from tempita import looper
 from webhelpers2.html import literal, HTML, escape
 from webhelpers2.html._autolink import _auto_link_urls
 from webhelpers2.html.tools import (
     button_to, highlight, js_obfuscate, strip_links, strip_tags)
 
 from webhelpers2.text import (
     chop_at, collapse, convert_accented_entities,
     convert_misc_entities, lchop, plural, rchop, remove_formatting,
     replace_whitespace, urlify, truncate, wrap_paragraphs)
 from webhelpers2.date import time_ago_in_words
 
 from webhelpers2.html.tags import (
     _input, NotGiven, _make_safe_id_component as safeid,
     form as insecure_form,
     auto_discovery_link, checkbox, end_form, file,
     hidden, image, javascript_link, link_to, link_to_if, link_to_unless, ol,
     select as raw_select, stylesheet_link, submit, text, password, textarea,
     ul, radio, Options)
 
 from webhelpers2.number import format_byte_size
 
 from rhodecode.lib.action_parser import action_parser
 from rhodecode.lib.pagination import Page, RepoPage, SqlPage
 from rhodecode.lib.ext_json import json
 from rhodecode.lib.utils import repo_name_slug, get_custom_lexer
 from rhodecode.lib.utils2 import (
     str2bool, safe_unicode, safe_str,
     get_commit_safe, datetime_to_time, time_to_datetime, time_to_utcdatetime,
     AttributeDict, safe_int, md5, md5_safe, get_host_info)
 from rhodecode.lib.markup_renderer import MarkupRenderer, relative_links
 from rhodecode.lib.vcs.exceptions import CommitDoesNotExistError
 from rhodecode.lib.vcs.backends.base import BaseChangeset, EmptyCommit
 from rhodecode.lib.index.search_utils import get_matching_line_offsets
 from rhodecode.config.conf import DATE_FORMAT, DATETIME_FORMAT
 from rhodecode.model.changeset_status import ChangesetStatusModel
 from rhodecode.model.db import Permission, User, Repository, UserApiKeys
 from rhodecode.model.repo_group import RepoGroupModel
 from rhodecode.model.settings import IssueTrackerSettingsModel
 
 
 log = logging.getLogger(__name__)
 
 
 DEFAULT_USER = User.DEFAULT_USER
 DEFAULT_USER_EMAIL = User.DEFAULT_USER_EMAIL
 
 
 def asset(path, ver=None, **kwargs):
     """
     Helper to generate a static asset file path for rhodecode assets
 
     eg. h.asset('images/image.png', ver='3923')
 
     :param path: path of asset
     :param ver: optional version query param to append as ?ver=
     """
     request = get_current_request()
     query = {}
     query.update(kwargs)
     if ver:
         query = {'ver': ver}
     return request.static_path(
         'rhodecode:public/{}'.format(path), _query=query)
 
 
 default_html_escape_table = {
     ord('&'): u'&amp;',
     ord('<'): u'&lt;',
     ord('>'): u'&gt;',
     ord('"'): u'&quot;',
     ord("'"): u'&#39;',
 }
 
 
 def html_escape(text, html_escape_table=default_html_escape_table):
     """Produce entities within text."""
     return text.translate(html_escape_table)
 
 
 def chop_at_smart(s, sub, inclusive=False, suffix_if_chopped=None):
     """
     Truncate string ``s`` at the first occurrence of ``sub``.
 
     If ``inclusive`` is true, truncate just after ``sub`` rather than at it.
     """
     suffix_if_chopped = suffix_if_chopped or ''
     pos = s.find(sub)
     if pos == -1:
         return s
 
     if inclusive:
         pos += len(sub)
 
     chopped = s[:pos]
     left = s[pos:].strip()
 
     if left and suffix_if_chopped:
         chopped += suffix_if_chopped
 
     return chopped
 
 
 def shorter(text, size=20, prefix=False):
     postfix = '...'
     if len(text) > size:
         if prefix:
             # shorten in front
             return postfix + text[-(size - len(postfix)):]
         else:
             return text[:size - len(postfix)] + postfix
     return text
 
 
 def reset(name, value=None, id=NotGiven, type="reset", **attrs):
     """
     Reset button
     """
     return _input(type, name, value, id, attrs)
 
 
 def select(name, selected_values, options, id=NotGiven, **attrs):
 
     if isinstance(options, (list, tuple)):
         options_iter = options
         # Handle old value,label lists ... where value also can be value,label lists
         options = Options()
         for opt in options_iter:
             if isinstance(opt, tuple) and len(opt) == 2:
                 value, label = opt
             elif isinstance(opt, basestring):
                 value = label = opt
             else:
                 raise ValueError('invalid select option type %r' % type(opt))
 
             if isinstance(value, (list, tuple)):
                 option_group = options.add_optgroup(label)
                 for opt2 in value:
                     if isinstance(opt2, tuple) and len(opt2) == 2:
                         group_value, group_label = opt2
                     elif isinstance(opt2, basestring):
                         group_value = group_label = opt2
                     else:
                         raise ValueError('invalid select option type %r' % type(opt2))
 
                     option_group.add_option(group_label, group_value)
             else:
                 options.add_option(label, value)
 
     return raw_select(name, selected_values, options, id=id, **attrs)
 
 
 def branding(name, length=40):
     return truncate(name, length, indicator="")
 
 
 def FID(raw_id, path):
     """
     Creates a unique ID for filenode based on it's hash of path and commit
     it's safe to use in urls
 
     :param raw_id:
     :param path:
     """
 
     return 'c-%s-%s' % (short_id(raw_id), md5_safe(path)[:12])
 
 
 class _GetError(object):
     """Get error from form_errors, and represent it as span wrapped error
     message
 
     :param field_name: field to fetch errors for
     :param form_errors: form errors dict
     """
 
     def __call__(self, field_name, form_errors):
         tmpl = """<span class="error_msg">%s</span>"""
         if form_errors and field_name in form_errors:
             return literal(tmpl % form_errors.get(field_name))
 
 
 get_error = _GetError()
 
 
 class _ToolTip(object):
 
     def __call__(self, tooltip_title, trim_at=50):
         """
         Special function just to wrap our text into nice formatted
         autowrapped text
 
         :param tooltip_title:
         """
         tooltip_title = escape(tooltip_title)
         tooltip_title = tooltip_title.replace('<', '&lt;').replace('>', '&gt;')
         return tooltip_title
 
 
 tooltip = _ToolTip()
 
 files_icon = u'<i class="file-breadcrumb-copy tooltip icon-clipboard clipboard-action" data-clipboard-text="{}" title="Copy file path"></i>'
 
 
 def files_breadcrumbs(repo_name, repo_type, commit_id, file_path, landing_ref_name=None, at_ref=None,
                       limit_items=False, linkify_last_item=False, hide_last_item=False,
                       copy_path_icon=True):
     if isinstance(file_path, str):
         file_path = safe_unicode(file_path)
 
     if at_ref:
         route_qry = {'at': at_ref}
         default_landing_ref = at_ref or landing_ref_name or commit_id
     else:
         route_qry = None
         default_landing_ref = commit_id
 
     # first segment is a `HOME` link to repo files root location
     root_name = literal(u'<i class="icon-home"></i>')
 
     url_segments = [
         link_to(
             root_name,
             repo_files_by_ref_url(
                 repo_name,
                 repo_type,
                 f_path=None,  # None here is a special case for SVN repos,
                               # that won't prefix with a ref
                 ref_name=default_landing_ref,
                 commit_id=commit_id,
                 query=route_qry
             )
         )]
 
     path_segments = file_path.split('/')
     last_cnt = len(path_segments) - 1
     for cnt, segment in enumerate(path_segments):
         if not segment:
             continue
         segment_html = escape(segment)
 
         last_item = cnt == last_cnt
 
         if last_item and hide_last_item:
             # iterate over and hide last element
             continue
 
         if last_item and linkify_last_item is False:
             # plain version
             url_segments.append(segment_html)
         else:
             url_segments.append(
                 link_to(
                     segment_html,
                     repo_files_by_ref_url(
                         repo_name,
                         repo_type,
                         f_path='/'.join(path_segments[:cnt + 1]),
                         ref_name=default_landing_ref,
                         commit_id=commit_id,
                         query=route_qry
                     ),
                 ))
 
     limited_url_segments = url_segments[:1] + ['...'] + url_segments[-5:]
     if limit_items and len(limited_url_segments) < len(url_segments):
         url_segments = limited_url_segments
 
     full_path = file_path
     if copy_path_icon:
         icon = files_icon.format(escape(full_path))
     else:
         icon = ''
 
     if file_path == '':
         return root_name
     else:
         return literal(' / '.join(url_segments) + icon)
 
 
 def files_url_data(request):
     matchdict = request.matchdict
 
     if 'f_path' not in matchdict:
         matchdict['f_path'] = ''
 
     if 'commit_id' not in matchdict:
         matchdict['commit_id'] = 'tip'
 
     return json.dumps(matchdict)
 
 
 def repo_files_by_ref_url(db_repo_name, db_repo_type, f_path, ref_name, commit_id, query=None, ):
     _is_svn = is_svn(db_repo_type)
     final_f_path = f_path
 
     if _is_svn:
         """
         For SVN the ref_name cannot be used as a commit_id, it needs to be prefixed with
         actually commit_id followed by the ref_name. This should be done only in case
         This is a initial landing url, without additional paths.
 
         like: /1000/tags/1.0.0/?at=tags/1.0.0
         """
 
         if ref_name and ref_name != 'tip':
             # NOTE(marcink): for svn the ref_name is actually the stored path, so we prefix it
             # for SVN we only do this magic prefix if it's root, .eg landing revision
             # of files link. If we are in the tree we don't need this since we traverse the url
             # that has everything stored
             if f_path in ['', '/']:
                 final_f_path = '/'.join([ref_name, f_path])
 
         # SVN always needs a commit_id explicitly, without a named REF
         default_commit_id = commit_id
     else:
         """
         For git and mercurial we construct a new URL using the names instead of commit_id
         like: /master/some_path?at=master
         """
         # We currently do not support branches with slashes
         if '/' in ref_name:
             default_commit_id = commit_id
         else:
             default_commit_id = ref_name
 
     # sometimes we pass f_path as None, to indicate explicit no prefix,
     # we translate it to string to not have None
     final_f_path = final_f_path or ''
 
     files_url = route_path(
         'repo_files',
         repo_name=db_repo_name,
         commit_id=default_commit_id,
         f_path=final_f_path,
         _query=query
     )
     return files_url
 
 
 def code_highlight(code, lexer, formatter, use_hl_filter=False):
     """
     Lex ``code`` with ``lexer`` and format it with the formatter ``formatter``.
 
     If ``outfile`` is given and a valid file object (an object
     with a ``write`` method), the result will be written to it, otherwise
     it is returned as a string.
     """
     if use_hl_filter:
         # add HL filter
         from rhodecode.lib.index import search_utils
         lexer.add_filter(search_utils.ElasticSearchHLFilter())
     return pygments.format(pygments.lex(code, lexer), formatter)
 
 
 class CodeHtmlFormatter(HtmlFormatter):
     """
     My code Html Formatter for source codes
     """
 
     def wrap(self, source, outfile):
         return self._wrap_div(self._wrap_pre(self._wrap_code(source)))
 
     def _wrap_code(self, source):
         for cnt, it in enumerate(source):
             i, t = it
             t = '<div id="L%s">%s</div>' % (cnt + 1, t)
             yield i, t
 
     def _wrap_tablelinenos(self, inner):
         dummyoutfile = StringIO.StringIO()
         lncount = 0
         for t, line in inner:
             if t:
                 lncount += 1
             dummyoutfile.write(line)
 
         fl = self.linenostart
         mw = len(str(lncount + fl - 1))
         sp = self.linenospecial
         st = self.linenostep
         la = self.lineanchors
         aln = self.anchorlinenos
         nocls = self.noclasses
         if sp:
             lines = []
 
             for i in range(fl, fl + lncount):
                 if i % st == 0:
                     if i % sp == 0:
                         if aln:
                             lines.append('<a href="#%s%d" class="special">%*d</a>' %
                                          (la, i, mw, i))
                         else:
                             lines.append('<span class="special">%*d</span>' % (mw, i))
                     else:
                         if aln:
                             lines.append('<a href="#%s%d">%*d</a>' % (la, i, mw, i))
                         else:
                             lines.append('%*d' % (mw, i))
                 else:
                     lines.append('')
             ls = '\n'.join(lines)
         else:
             lines = []
             for i in range(fl, fl + lncount):
                 if i % st == 0:
                     if aln:
                         lines.append('<a href="#%s%d">%*d</a>' % (la, i, mw, i))
                     else:
                         lines.append('%*d' % (mw, i))
                 else:
                     lines.append('')
             ls = '\n'.join(lines)
 
         # in case you wonder about the seemingly redundant <div> here: since the
         # content in the other cell also is wrapped in a div, some browsers in
         # some configurations seem to mess up the formatting...
         if nocls:
             yield 0, ('<table class="%stable">' % self.cssclass +
                       '<tr><td><div class="linenodiv" '
                       'style="background-color: #f0f0f0; padding-right: 10px">'
                       '<pre style="line-height: 125%">' +
                       ls + '</pre></div></td><td id="hlcode" class="code">')
         else:
             yield 0, ('<table class="%stable">' % self.cssclass +
                       '<tr><td class="linenos"><div class="linenodiv"><pre>' +
                       ls + '</pre></div></td><td id="hlcode" class="code">')
         yield 0, dummyoutfile.getvalue()
         yield 0, '</td></tr></table>'
 
 
 class SearchContentCodeHtmlFormatter(CodeHtmlFormatter):
     def __init__(self, **kw):
         # only show these line numbers if set
         self.only_lines = kw.pop('only_line_numbers', [])
         self.query_terms = kw.pop('query_terms', [])
         self.max_lines = kw.pop('max_lines', 5)
         self.line_context = kw.pop('line_context', 3)
         self.url = kw.pop('url', None)
 
         super(CodeHtmlFormatter, self).__init__(**kw)
 
     def _wrap_code(self, source):
         for cnt, it in enumerate(source):
             i, t = it
             t = '<pre>%s</pre>' % t
             yield i, t
 
     def _wrap_tablelinenos(self, inner):
         yield 0, '<table class="code-highlight %stable">' % self.cssclass
 
         last_shown_line_number = 0
         current_line_number = 1
 
         for t, line in inner:
             if not t:
                 yield t, line
                 continue
 
             if current_line_number in self.only_lines:
                 if last_shown_line_number + 1 != current_line_number:
                     yield 0, '<tr>'
                     yield 0, '<td class="line">...</td>'
                     yield 0, '<td id="hlcode" class="code"></td>'
                     yield 0, '</tr>'
 
                 yield 0, '<tr>'
                 if self.url:
                     yield 0, '<td class="line"><a href="%s#L%i">%i</a></td>' % (
                         self.url, current_line_number, current_line_number)
                 else:
                     yield 0, '<td class="line"><a href="">%i</a></td>' % (
                         current_line_number)
                 yield 0, '<td id="hlcode" class="code">' + line + '</td>'
                 yield 0, '</tr>'
 
                 last_shown_line_number = current_line_number
 
             current_line_number += 1
 
         yield 0, '</table>'
 
 
 def hsv_to_rgb(h, s, v):
     """ Convert hsv color values to rgb """
 
     if s == 0.0:
         return v, v, v
     i = int(h * 6.0)  # XXX assume int() truncates!
     f = (h * 6.0) - i
     p = v * (1.0 - s)
     q = v * (1.0 - s * f)
     t = v * (1.0 - s * (1.0 - f))
     i = i % 6
     if i == 0:
         return v, t, p
     if i == 1:
         return q, v, p
     if i == 2:
         return p, v, t
     if i == 3:
         return p, q, v
     if i == 4:
         return t, p, v
     if i == 5:
         return v, p, q
 
 
 def unique_color_generator(n=10000, saturation=0.10, lightness=0.95):
     """
     Generator for getting n of evenly distributed colors using
     hsv color and golden ratio. It always return same order of colors
 
     :param n: number of colors to generate
     :param saturation: saturation of returned colors
     :param lightness: lightness of returned colors
     :returns: RGB tuple
     """
 
     golden_ratio = 0.618033988749895
     h = 0.22717784590367374
 
     for _ in xrange(n):
         h += golden_ratio
         h %= 1
         HSV_tuple = [h, saturation, lightness]
         RGB_tuple = hsv_to_rgb(*HSV_tuple)
         yield map(lambda x: str(int(x * 256)), RGB_tuple)
 
 
 def color_hasher(n=10000, saturation=0.10, lightness=0.95):
     """
     Returns a function which when called with an argument returns a unique
     color for that argument, eg.
 
     :param n: number of colors to generate
     :param saturation: saturation of returned colors
     :param lightness: lightness of returned colors
     :returns: css RGB string
 
     >>> color_hash = color_hasher()
     >>> color_hash('hello')
     'rgb(34, 12, 59)'
     >>> color_hash('hello')
     'rgb(34, 12, 59)'
     >>> color_hash('other')
     'rgb(90, 224, 159)'
     """
 
     color_dict = {}
     cgenerator = unique_color_generator(
         saturation=saturation, lightness=lightness)
 
     def get_color_string(thing):
         if thing in color_dict:
             col = color_dict[thing]
         else:
             col = color_dict[thing] = cgenerator.next()
         return "rgb(%s)" % (', '.join(col))
 
     return get_color_string
 
 
 def get_lexer_safe(mimetype=None, filepath=None):
     """
     Tries to return a relevant pygments lexer using mimetype/filepath name,
     defaulting to plain text if none could be found
     """
     lexer = None
     try:
         if mimetype:
             lexer = get_lexer_for_mimetype(mimetype)
         if not lexer:
             lexer = get_lexer_for_filename(filepath)
     except pygments.util.ClassNotFound:
         pass
 
     if not lexer:
         lexer = get_lexer_by_name('text')
 
     return lexer
 
 
 def get_lexer_for_filenode(filenode):
     lexer = get_custom_lexer(filenode.extension) or filenode.lexer
     return lexer
 
 
 def pygmentize(filenode, **kwargs):
     """
     pygmentize function using pygments
 
     :param filenode:
     """
     lexer = get_lexer_for_filenode(filenode)
     return literal(code_highlight(filenode.content, lexer,
                                   CodeHtmlFormatter(**kwargs)))
 
 
 def is_following_repo(repo_name, user_id):
     from rhodecode.model.scm import ScmModel
     return ScmModel().is_following_repo(repo_name, user_id)
 
 
 class _Message(object):
     """A message returned by ``Flash.pop_messages()``.
 
     Converting the message to a string returns the message text. Instances
     also have the following attributes:
 
     * ``message``: the message text.
     * ``category``: the category specified when the message was created.
     """
 
     def __init__(self, category, message, sub_data=None):
         self.category = category
         self.message = message
         self.sub_data = sub_data or {}
 
     def __str__(self):
         return self.message
 
     __unicode__ = __str__
 
     def __html__(self):
         return escape(safe_unicode(self.message))
 
 
 class Flash(object):
     # List of allowed categories.  If None, allow any category.
     categories = ["warning", "notice", "error", "success"]
 
     # Default category if none is specified.
     default_category = "notice"
 
     def __init__(self, session_key="flash", categories=None,
                  default_category=None):
         """
         Instantiate a ``Flash`` object.
 
         ``session_key`` is the key to save the messages under in the user's
         session.
 
         ``categories`` is an optional list which overrides the default list
         of categories.
 
         ``default_category`` overrides the default category used for messages
         when none is specified.
         """
         self.session_key = session_key
         if categories is not None:
             self.categories = categories
         if default_category is not None:
             self.default_category = default_category
         if self.categories and self.default_category not in self.categories:
             raise ValueError(
                 "unrecognized default category %r" % (self.default_category,))
 
     def pop_messages(self, session=None, request=None):
         """
         Return all accumulated messages and delete them from the session.
 
         The return value is a list of ``Message`` objects.
         """
         messages = []
 
         if not session:
             if not request:
                 request = get_current_request()
             session = request.session
 
         # Pop the 'old' pylons flash messages. They are tuples of the form
         # (category, message)
         for cat, msg in session.pop(self.session_key, []):
             messages.append(_Message(cat, msg))
 
         # Pop the 'new' pyramid flash messages for each category as list
         # of strings.
         for cat in self.categories:
             for msg in session.pop_flash(queue=cat):
                 sub_data = {}
                 if hasattr(msg, 'rsplit'):
                     flash_data = msg.rsplit('|DELIM|', 1)
                     org_message = flash_data[0]
                     if len(flash_data) > 1:
                         sub_data = json.loads(flash_data[1])
                 else:
                     org_message = msg
 
                 messages.append(_Message(cat, org_message, sub_data=sub_data))
 
         # Map messages from the default queue to the 'notice' category.
         for msg in session.pop_flash():
             messages.append(_Message('notice', msg))
 
         session.save()
         return messages
 
     def json_alerts(self, session=None, request=None):
         payloads = []
         messages = flash.pop_messages(session=session, request=request) or []
         for message in messages:
             payloads.append({
                 'message': {
                     'message': u'{}'.format(message.message),
                     'level': message.category,
                     'force': True,
                     'subdata': message.sub_data
                 }
             })
         return json.dumps(payloads)
 
     def __call__(self, message, category=None, ignore_duplicate=True,
                  session=None, request=None):
 
         if not session:
             if not request:
                 request = get_current_request()
             session = request.session
 
         session.flash(
             message, queue=category, allow_duplicate=not ignore_duplicate)
 
 
 flash = Flash()
 
 #==============================================================================
 # SCM FILTERS available via h.
 #==============================================================================
 from rhodecode.lib.vcs.utils import author_name, author_email
 from rhodecode.lib.utils2 import age, age_from_seconds
 from rhodecode.model.db import User, ChangesetStatus
 
 
 email = author_email
 
 
 def capitalize(raw_text):
     return raw_text.capitalize()
 
 
 def short_id(long_id):
     return long_id[:12]
 
 
 def hide_credentials(url):
     from rhodecode.lib.utils2 import credentials_filter
     return credentials_filter(url)
 
 
 import pytz
 import tzlocal
 local_timezone = tzlocal.get_localzone()
 
 
 def age_component(datetime_iso, value=None, time_is_local=False, tooltip=True):
     title = value or format_date(datetime_iso)
     tzinfo = '+00:00'
 
     # detect if we have a timezone info, otherwise, add it
     if time_is_local and isinstance(datetime_iso, datetime) and not datetime_iso.tzinfo:
         force_timezone = os.environ.get('RC_TIMEZONE', '')
         if force_timezone:
             force_timezone = pytz.timezone(force_timezone)
         timezone = force_timezone or local_timezone
         offset = timezone.localize(datetime_iso).strftime('%z')
         tzinfo = '{}:{}'.format(offset[:-2], offset[-2:])
 
     return literal(
         '<time class="timeago {cls}" title="{tt_title}" datetime="{dt}{tzinfo}">{title}</time>'.format(
             cls='tooltip' if tooltip else '',
             tt_title=('{title}{tzinfo}'.format(title=title, tzinfo=tzinfo)) if tooltip else '',
             title=title, dt=datetime_iso, tzinfo=tzinfo
         ))
 
 
 def _shorten_commit_id(commit_id, commit_len=None):
     if commit_len is None:
         request = get_current_request()
         commit_len = request.call_context.visual.show_sha_length
     return commit_id[:commit_len]
 
 
 def show_id(commit, show_idx=None, commit_len=None):
     """
     Configurable function that shows ID
     by default it's r123:fffeeefffeee
 
     :param commit: commit instance
     """
     if show_idx is None:
         request = get_current_request()
         show_idx = request.call_context.visual.show_revision_number
 
     raw_id = _shorten_commit_id(commit.raw_id, commit_len=commit_len)
     if show_idx:
         return 'r%s:%s' % (commit.idx, raw_id)
     else:
         return '%s' % (raw_id, )
 
 
 def format_date(date):
     """
     use a standardized formatting for dates used in RhodeCode
 
     :param date: date/datetime object
     :return: formatted date
     """
 
     if date:
         _fmt = "%a, %d %b %Y %H:%M:%S"
         return safe_unicode(date.strftime(_fmt))
 
     return u""
 
 
 class _RepoChecker(object):
 
     def __init__(self, backend_alias):
         self._backend_alias = backend_alias
 
     def __call__(self, repository):
         if hasattr(repository, 'alias'):
             _type = repository.alias
         elif hasattr(repository, 'repo_type'):
             _type = repository.repo_type
         else:
             _type = repository
         return _type == self._backend_alias
 
 
 is_git = _RepoChecker('git')
 is_hg = _RepoChecker('hg')
 is_svn = _RepoChecker('svn')
 
 
 def get_repo_type_by_name(repo_name):
     repo = Repository.get_by_repo_name(repo_name)
     if repo:
         return repo.repo_type
 
 
 def is_svn_without_proxy(repository):
     if is_svn(repository):
         from rhodecode.model.settings import VcsSettingsModel
         conf = VcsSettingsModel().get_ui_settings_as_config_obj()
         return not str2bool(conf.get('vcs_svn_proxy', 'http_requests_enabled'))
     return False
 
 
 def discover_user(author):
     """
     Tries to discover RhodeCode User based on the author string. Author string
     is typically `FirstName LastName <[e-mail]>`
     """
 
     # if author is already an instance use it for extraction
     if isinstance(author, User):
         return author
 
     # Valid email in the attribute passed, see if they're in the system
     _email = author_email(author)
     if _email != '':
         user = User.get_by_email(_email, case_insensitive=True, cache=True)
         if user is not None:
             return user
 
     # Maybe it's a username, we try to extract it and fetch by username ?
     _author = author_name(author)
     user = User.get_by_username(_author, case_insensitive=True, cache=True)
     if user is not None:
         return user
 
     return None
 
 
 def email_or_none(author):
     # extract email from the commit string
     _email = author_email(author)
 
     # If we have an email, use it, otherwise
     # see if it contains a username we can get an email from
     if _email != '':
         return _email
     else:
         user = User.get_by_username(
             author_name(author), case_insensitive=True, cache=True)
 
     if user is not None:
             return user.email
 
     # No valid email, not a valid user in the system, none!
     return None
 
 
 def link_to_user(author, length=0, **kwargs):
     user = discover_user(author)
     # user can be None, but if we have it already it means we can re-use it
     # in the person() function, so we save 1 intensive-query
     if user:
         author = user
 
     display_person = person(author, 'username_or_name_or_email')
     if length:
         display_person = shorter(display_person, length)
 
     if user and user.username != user.DEFAULT_USER:
         return link_to(
             escape(display_person),
             route_path('user_profile', username=user.username),
             **kwargs)
     else:
         return escape(display_person)
 
 
 def link_to_group(users_group_name, **kwargs):
     return link_to(
         escape(users_group_name),
         route_path('user_group_profile', user_group_name=users_group_name),
         **kwargs)
 
 
 def person(author, show_attr="username_and_name"):
     user = discover_user(author)
     if user:
         return getattr(user, show_attr)
     else:
         _author = author_name(author)
         _email = email(author)
         return _author or _email
 
 
 def author_string(email):
     if email:
         user = User.get_by_email(email, case_insensitive=True, cache=True)
         if user:
             if user.first_name or user.last_name:
                 return '%s %s &lt;%s&gt;' % (
                     user.first_name, user.last_name, email)
             else:
                 return email
         else:
             return email
     else:
         return None
 
 
 def person_by_id(id_, show_attr="username_and_name"):
     # attr to return from fetched user
     person_getter = lambda usr: getattr(usr, show_attr)
 
     #maybe it's an ID ?
     if str(id_).isdigit() or isinstance(id_, int):
         id_ = int(id_)
         user = User.get(id_)
         if user is not None:
             return person_getter(user)
     return id_
 
 
 def gravatar_with_user(request, author, show_disabled=False, tooltip=False):
     _render = request.get_partial_renderer('rhodecode:templates/base/base.mako')
     return _render('gravatar_with_user', author, show_disabled=show_disabled, tooltip=tooltip)
 
 
 tags_paterns = OrderedDict((
     ('lang', (re.compile(r'\[(lang|language)\ \=\&gt;\ *([a-zA-Z\-\/\#\+\.]*)\]'),
              '<div class="metatag" tag="lang">\\2</div>')),
 
     ('see', (re.compile(r'\[see\ \=\&gt;\ *([a-zA-Z0-9\/\=\?\&amp;\ \:\/\.\-]*)\]'),
             '<div class="metatag" tag="see">see: \\1 </div>')),
 
     ('url', (re.compile(r'\[url\ \=\&gt;\ \[([a-zA-Z0-9\ \.\-\_]+)\]\((http://|https://|/)(.*?)\)\]'),
             '<div class="metatag" tag="url"> <a href="\\2\\3">\\1</a> </div>')),
 
     ('license', (re.compile(r'\[license\ \=\&gt;\ *([a-zA-Z0-9\/\=\?\&amp;\ \:\/\.\-]*)\]'),
                 '<div class="metatag" tag="license"><a href="http:\/\/www.opensource.org/licenses/\\1">\\1</a></div>')),
 
     ('ref', (re.compile(r'\[(requires|recommends|conflicts|base)\ \=\&gt;\ *([a-zA-Z0-9\-\/]*)\]'),
             '<div class="metatag" tag="ref \\1">\\1: <a href="/\\2">\\2</a></div>')),
 
     ('state', (re.compile(r'\[(stable|featured|stale|dead|dev|deprecated)\]'),
               '<div class="metatag" tag="state \\1">\\1</div>')),
 
     # label in grey
     ('label', (re.compile(r'\[([a-z]+)\]'),
               '<div class="metatag" tag="label">\\1</div>')),
 
     # generic catch all in grey
     ('generic', (re.compile(r'\[([a-zA-Z0-9\.\-\_]+)\]'),
                 '<div class="metatag" tag="generic">\\1</div>')),
 ))
 
 
 def extract_metatags(value):
     """
     Extract supported meta-tags from given text value
     """
     tags = []
     if not value:
         return tags, ''
 
     for key, val in tags_paterns.items():
         pat, replace_html = val
         tags.extend([(key, x.group()) for x in pat.finditer(value)])
         value = pat.sub('', value)
 
     return tags, value
 
 
 def style_metatag(tag_type, value):
     """
     converts tags from value into html equivalent
     """
     if not value:
         return ''
 
     html_value = value
     tag_data = tags_paterns.get(tag_type)
     if tag_data:
         pat, replace_html = tag_data
         # convert to plain `unicode` instead of a markup tag to be used in
         # regex expressions. safe_unicode doesn't work here
         html_value = pat.sub(replace_html, unicode(value))
 
     return html_value
 
 
 def bool2icon(value, show_at_false=True):
     """
     Returns boolean value of a given value, represented as html element with
     classes that will represent icons
 
     :param value: given value to convert to html node
     """
 
     if value:  # does bool conversion
         return HTML.tag('i', class_="icon-true", title='True')
     else:  # not true as bool
         if show_at_false:
             return HTML.tag('i', class_="icon-false", title='False')
         return HTML.tag('i')
 
 #==============================================================================
 # PERMS
 #==============================================================================
 from rhodecode.lib.auth import (
     HasPermissionAny, HasPermissionAll,
     HasRepoPermissionAny, HasRepoPermissionAll, HasRepoGroupPermissionAll,
     HasRepoGroupPermissionAny, HasRepoPermissionAnyApi, get_csrf_token,
     csrf_token_key, AuthUser)
 
 
 #==============================================================================
 # GRAVATAR URL
 #==============================================================================
 class InitialsGravatar(object):
     def __init__(self, email_address, first_name, last_name, size=30,
                  background=None, text_color='#fff'):
         self.size = size
         self.first_name = first_name
         self.last_name = last_name
         self.email_address = email_address
         self.background = background or self.str2color(email_address)
         self.text_color = text_color
 
     def get_color_bank(self):
         """
         returns a predefined list of colors that gravatars can use.
         Those are randomized distinct colors that guarantee readability and
         uniqueness.
 
         generated with: http://phrogz.net/css/distinct-colors.html
         """
         return [
             '#bf3030', '#a67f53', '#00ff00', '#5989b3', '#392040', '#d90000',
             '#402910', '#204020', '#79baf2', '#a700b3', '#bf6060', '#7f5320',
             '#008000', '#003059', '#ee00ff', '#ff0000', '#8c4b00', '#007300',
             '#005fb3', '#de73e6', '#ff4040', '#ffaa00', '#3df255', '#203140',
             '#47004d', '#591616', '#664400', '#59b365', '#0d2133', '#83008c',
             '#592d2d', '#bf9f60', '#73e682', '#1d3f73', '#73006b', '#402020',
             '#b2862d', '#397341', '#597db3', '#e600d6', '#a60000', '#736039',
             '#00b318', '#79aaf2', '#330d30', '#ff8080', '#403010', '#16591f',
             '#002459', '#8c4688', '#e50000', '#ffbf40', '#00732e', '#102340',
             '#bf60ac', '#8c4646', '#cc8800', '#00a642', '#1d3473', '#b32d98',
             '#660e00', '#ffd580', '#80ffb2', '#7391e6', '#733967', '#d97b6c',
             '#8c5e00', '#59b389', '#3967e6', '#590047', '#73281d', '#665200',
             '#00e67a', '#2d50b3', '#8c2377', '#734139', '#b2982d', '#16593a',
             '#001859', '#ff00aa', '#a65e53', '#ffcc00', '#0d3321', '#2d3959',
             '#731d56', '#401610', '#4c3d00', '#468c6c', '#002ca6', '#d936a3',
             '#d94c36', '#403920', '#36d9a3', '#0d1733', '#592d4a', '#993626',
             '#cca300', '#00734d', '#46598c', '#8c005e', '#7f1100', '#8c7000',
             '#00a66f', '#7382e6', '#b32d74', '#d9896c', '#ffe680', '#1d7362',
             '#364cd9', '#73003d', '#d93a00', '#998a4d', '#59b3a1', '#5965b3',
             '#e5007a', '#73341d', '#665f00', '#00b38f', '#0018b3', '#59163a',
             '#b2502d', '#bfb960', '#00ffcc', '#23318c', '#a6537f', '#734939',
             '#b2a700', '#104036', '#3d3df2', '#402031', '#e56739', '#736f39',
             '#79f2ea', '#000059', '#401029', '#4c1400', '#ffee00', '#005953',
             '#101040', '#990052', '#402820', '#403d10', '#00ffee', '#0000d9',
             '#ff80c4', '#a66953', '#eeff00', '#00ccbe', '#8080ff', '#e673a1',
             '#a62c00', '#474d00', '#1a3331', '#46468c', '#733950', '#662900',
             '#858c23', '#238c85', '#0f0073', '#b20047', '#d9986c', '#becc00',
             '#396f73', '#281d73', '#ff0066', '#ff6600', '#dee673', '#59adb3',
             '#6559b3', '#590024', '#b2622d', '#98b32d', '#36ced9', '#332d59',
             '#40001a', '#733f1d', '#526600', '#005359', '#242040', '#bf6079',
             '#735039', '#cef23d', '#007780', '#5630bf', '#66001b', '#b24700',
             '#acbf60', '#1d6273', '#25008c', '#731d34', '#a67453', '#50592d',
             '#00ccff', '#6600ff', '#ff0044', '#4c1f00', '#8a994d', '#79daf2',
             '#a173e6', '#d93662', '#402310', '#aaff00', '#2d98b3', '#8c40ff',
             '#592d39', '#ff8c40', '#354020', '#103640', '#1a0040', '#331a20',
             '#331400', '#334d00', '#1d5673', '#583973', '#7f0022', '#4c3626',
             '#88cc00', '#36a3d9', '#3d0073', '#d9364c', '#33241a', '#698c23',
             '#5995b3', '#300059', '#e57382', '#7f3300', '#366600', '#00aaff',
             '#3a1659', '#733941', '#663600', '#74b32d', '#003c59', '#7f53a6',
             '#73000f', '#ff8800', '#baf279', '#79caf2', '#291040', '#a6293a',
             '#b2742d', '#587339', '#0077b3', '#632699', '#400009', '#d9a66c',
             '#294010', '#2d4a59', '#aa00ff', '#4c131b', '#b25f00', '#5ce600',
             '#267399', '#a336d9', '#990014', '#664e33', '#86bf60', '#0088ff',
             '#7700b3', '#593a16', '#073300', '#1d4b73', '#ac60bf', '#e59539',
             '#4f8c46', '#368dd9', '#5c0073'
         ]
 
     def rgb_to_hex_color(self, rgb_tuple):
         """
         Converts an rgb_tuple passed to an hex color.
 
         :param rgb_tuple: tuple with 3 ints represents rgb color space
         """
         return '#' + ("".join(map(chr, rgb_tuple)).encode('hex'))
 
     def email_to_int_list(self, email_str):
         """
         Get every byte of the hex digest value of email and turn it to integer.
         It's going to be always between 0-255
         """
         digest = md5_safe(email_str.lower())
         return [int(digest[i * 2:i * 2 + 2], 16) for i in range(16)]
 
     def pick_color_bank_index(self, email_str, color_bank):
         return self.email_to_int_list(email_str)[0] % len(color_bank)
 
     def str2color(self, email_str):
         """
         Tries to map in a stable algorithm an email to color
 
         :param email_str:
         """
         color_bank = self.get_color_bank()
         # pick position (module it's length so we always find it in the
         # bank even if it's smaller than 256 values
         pos = self.pick_color_bank_index(email_str, color_bank)
         return color_bank[pos]
 
     def normalize_email(self, email_address):
         import unicodedata
         # default host used to fill in the fake/missing email
         default_host = u'localhost'
 
         if not email_address:
             email_address = u'%s@%s' % (User.DEFAULT_USER, default_host)
 
         email_address = safe_unicode(email_address)
 
         if u'@' not in email_address:
             email_address = u'%s@%s' % (email_address, default_host)
 
         if email_address.endswith(u'@'):
             email_address = u'%s%s' % (email_address, default_host)
 
         email_address = unicodedata.normalize('NFKD', email_address)\
             .encode('ascii', 'ignore')
         return email_address
 
     def get_initials(self):
         """
         Returns 2 letter initials calculated based on the input.
         The algorithm picks first given email address, and takes first letter
         of part before @, and then the first letter of server name. In case
         the part before @ is in a format of `somestring.somestring2` it replaces
         the server letter with first letter of somestring2
 
         In case function was initialized with both first and lastname, this
         overrides the extraction from email by first letter of the first and
         last name. We add special logic to that functionality, In case Full name
         is compound, like Guido Von Rossum, we use last part of the last name
         (Von Rossum) picking `R`.
 
         Function also normalizes the non-ascii characters to they ascii
         representation, eg Ą => A
         """
         import unicodedata
         # replace non-ascii to ascii
         first_name = unicodedata.normalize(
             'NFKD', safe_unicode(self.first_name)).encode('ascii', 'ignore')
         last_name = unicodedata.normalize(
             'NFKD', safe_unicode(self.last_name)).encode('ascii', 'ignore')
 
         # do NFKD encoding, and also make sure email has proper format
         email_address = self.normalize_email(self.email_address)
 
         # first push the email initials
         prefix, server = email_address.split('@', 1)
 
         # check if prefix is maybe a 'first_name.last_name' syntax
         _dot_split = prefix.rsplit('.', 1)
         if len(_dot_split) == 2 and _dot_split[1]:
             initials = [_dot_split[0][0], _dot_split[1][0]]
         else:
             initials = [prefix[0], server[0]]
 
         # then try to replace either first_name or last_name
         fn_letter = (first_name or " ")[0].strip()
         ln_letter = (last_name.split(' ', 1)[-1] or " ")[0].strip()
 
         if fn_letter:
             initials[0] = fn_letter
 
         if ln_letter:
             initials[1] = ln_letter
 
         return ''.join(initials).upper()
 
     def get_img_data_by_type(self, font_family, img_type):
         default_user = """
         <svg xmlns="http://www.w3.org/2000/svg"
         version="1.1" x="0px" y="0px" width="{size}" height="{size}"
         viewBox="-15 -10 439.165 429.164"
 
         xml:space="preserve"
         style="background:{background};" >
 
         <path d="M204.583,216.671c50.664,0,91.74-48.075,
                  91.74-107.378c0-82.237-41.074-107.377-91.74-107.377
                  c-50.668,0-91.74,25.14-91.74,107.377C112.844,
                  168.596,153.916,216.671,
                  204.583,216.671z" fill="{text_color}"/>
         <path d="M407.164,374.717L360.88,
                  270.454c-2.117-4.771-5.836-8.728-10.465-11.138l-71.83-37.392
                  c-1.584-0.823-3.502-0.663-4.926,0.415c-20.316,
                  15.366-44.203,23.488-69.076,23.488c-24.877,
                  0-48.762-8.122-69.078-23.488
                  c-1.428-1.078-3.346-1.238-4.93-0.415L58.75,
                  259.316c-4.631,2.41-8.346,6.365-10.465,11.138L2.001,374.717
                  c-3.191,7.188-2.537,15.412,1.75,22.005c4.285,
                  6.592,11.537,10.526,19.4,10.526h362.861c7.863,0,15.117-3.936,
                  19.402-10.527 C409.699,390.129,
                  410.355,381.902,407.164,374.717z" fill="{text_color}"/>
         </svg>""".format(
             size=self.size,
             background='#979797',  # @grey4
             text_color=self.text_color,
             font_family=font_family)
 
         return {
             "default_user": default_user
         }[img_type]
 
     def get_img_data(self, svg_type=None):
         """
         generates the svg metadata for image
         """
         fonts = [
             '-apple-system',
              'BlinkMacSystemFont',
              'Segoe UI',
              'Roboto',
              'Oxygen-Sans',
              'Ubuntu',
              'Cantarell',
              'Helvetica Neue',
              'sans-serif'
         ]
         font_family = ','.join(fonts)
         if svg_type:
             return self.get_img_data_by_type(font_family, svg_type)
 
         initials = self.get_initials()
         img_data = """
         <svg xmlns="http://www.w3.org/2000/svg" pointer-events="none"
              width="{size}" height="{size}"
              style="width: 100%; height: 100%; background-color: {background}"
              viewBox="0 0 {size} {size}">
             <text text-anchor="middle" y="50%" x="50%" dy="0.35em"
                   pointer-events="auto" fill="{text_color}"
                   font-family="{font_family}"
                   style="font-weight: 400; font-size: {f_size}px;">{text}
             </text>
         </svg>""".format(
             size=self.size,
             f_size=self.size/2.05,  # scale the text inside the box nicely
             background=self.background,
             text_color=self.text_color,
             text=initials.upper(),
             font_family=font_family)
 
         return img_data
 
     def generate_svg(self, svg_type=None):
         img_data = self.get_img_data(svg_type)
         return "data:image/svg+xml;base64,%s" % base64.b64encode(img_data)
 
 
 def initials_gravatar(email_address, first_name, last_name, size=30):
     svg_type = None
     if email_address == User.DEFAULT_USER_EMAIL:
         svg_type = 'default_user'
     klass = InitialsGravatar(email_address, first_name, last_name, size)
     return klass.generate_svg(svg_type=svg_type)
 
 
 def gravatar_url(email_address, size=30, request=None):
     request = get_current_request()
     _use_gravatar = request.call_context.visual.use_gravatar
     _gravatar_url = request.call_context.visual.gravatar_url
 
     _gravatar_url = _gravatar_url or User.DEFAULT_GRAVATAR_URL
 
     email_address = email_address or User.DEFAULT_USER_EMAIL
     if isinstance(email_address, unicode):
         # hashlib crashes on unicode items
         email_address = safe_str(email_address)
 
     # empty email or default user
     if not email_address or email_address == User.DEFAULT_USER_EMAIL:
         return initials_gravatar(User.DEFAULT_USER_EMAIL, '', '', size=size)
 
     if _use_gravatar:
         # TODO: Disuse pyramid thread locals. Think about another solution to
         # get the host and schema here.
         request = get_current_request()
         tmpl = safe_str(_gravatar_url)
         tmpl = tmpl.replace('{email}', email_address)\
                    .replace('{md5email}', md5_safe(email_address.lower())) \
                    .replace('{netloc}', request.host)\
                    .replace('{scheme}', request.scheme)\
                    .replace('{size}', safe_str(size))
         return tmpl
     else:
         return initials_gravatar(email_address, '', '', size=size)
 
 
 def breadcrumb_repo_link(repo):
     """
     Makes a breadcrumbs path link to repo
 
     ex::
         group >> subgroup >> repo
 
     :param repo: a Repository instance
     """
 
     path = [
         link_to(group.name, route_path('repo_group_home', repo_group_name=group.group_name),
                 title='last change:{}'.format(format_date(group.last_commit_change)))
         for group in repo.groups_with_parents
     ] + [
         link_to(repo.just_name, route_path('repo_summary', repo_name=repo.repo_name),
                 title='last change:{}'.format(format_date(repo.last_commit_change)))
     ]
 
     return literal(' &raquo; '.join(path))
 
 
 def breadcrumb_repo_group_link(repo_group):
     """
     Makes a breadcrumbs path link to repo
 
     ex::
         group >> subgroup
 
     :param repo_group: a Repository Group instance
     """
 
     path = [
         link_to(group.name,
                 route_path('repo_group_home', repo_group_name=group.group_name),
                 title='last change:{}'.format(format_date(group.last_commit_change)))
         for group in repo_group.parents
     ] + [
         link_to(repo_group.name,
                 route_path('repo_group_home', repo_group_name=repo_group.group_name),
                 title='last change:{}'.format(format_date(repo_group.last_commit_change)))
     ]
 
     return literal(' &raquo; '.join(path))
 
 
 def format_byte_size_binary(file_size):
     """
     Formats file/folder sizes to standard.
     """
     if file_size is None:
         file_size = 0
 
     formatted_size = format_byte_size(file_size, binary=True)
     return formatted_size
 
 
 def urlify_text(text_, safe=True, **href_attrs):
     """
     Extract urls from text and make html links out of them
     """
 
     url_pat = re.compile(r'''(http[s]?://(?:[a-zA-Z]|[0-9]|[$-_@#.&+]'''
                          '''|[!*\(\),]|(?:%[0-9a-fA-F][0-9a-fA-F]))+)''')
 
     def url_func(match_obj):
         url_full = match_obj.groups()[0]
         a_options = dict(href_attrs)
         a_options['href'] = url_full
         a_text = url_full
         return HTML.tag("a", a_text, **a_options)
 
     _new_text = url_pat.sub(url_func, text_)
 
     if safe:
         return literal(_new_text)
     return _new_text
 
 
 def urlify_commits(text_, repo_name):
     """
     Extract commit ids from text and make link from them
 
     :param text_:
     :param repo_name: repo name to build the URL with
     """
 
     url_pat = re.compile(r'(^|\s)([0-9a-fA-F]{12,40})($|\s)')
 
     def url_func(match_obj):
         commit_id = match_obj.groups()[1]
         pref = match_obj.groups()[0]
         suf = match_obj.groups()[2]
 
         tmpl = (
             '%(pref)s<a class="tooltip-hovercard %(cls)s" href="%(url)s" data-hovercard-alt="%(hovercard_alt)s" data-hovercard-url="%(hovercard_url)s">'
             '%(commit_id)s</a>%(suf)s'
         )
         return tmpl % {
             'pref': pref,
             'cls': 'revision-link',
             'url': route_url(
                 'repo_commit', repo_name=repo_name, commit_id=commit_id),
             'commit_id': commit_id,
             'suf': suf,
             'hovercard_alt': 'Commit: {}'.format(commit_id),
             'hovercard_url': route_url(
                 'hovercard_repo_commit', repo_name=repo_name, commit_id=commit_id)
         }
 
     new_text = url_pat.sub(url_func, text_)
 
     return new_text
 
 
 def _process_url_func(match_obj, repo_name, uid, entry,
                       return_raw_data=False, link_format='html'):
     pref = ''
     if match_obj.group().startswith(' '):
         pref = ' '
 
     issue_id = ''.join(match_obj.groups())
 
     if link_format == 'html':
         tmpl = (
             '%(pref)s<a class="tooltip %(cls)s" href="%(url)s" title="%(title)s">'
             '%(issue-prefix)s%(id-repr)s'
             '</a>')
     elif link_format == 'html+hovercard':
         tmpl = (
             '%(pref)s<a class="tooltip-hovercard %(cls)s" href="%(url)s" data-hovercard-url="%(hovercard_url)s">'
             '%(issue-prefix)s%(id-repr)s'
             '</a>')
     elif link_format in ['rst', 'rst+hovercard']:
         tmpl = '`%(issue-prefix)s%(id-repr)s <%(url)s>`_'
     elif link_format in ['markdown', 'markdown+hovercard']:
         tmpl = '[%(pref)s%(issue-prefix)s%(id-repr)s](%(url)s)'
     else:
         raise ValueError('Bad link_format:{}'.format(link_format))
 
     (repo_name_cleaned,
      parent_group_name) = RepoGroupModel()._get_group_name_and_parent(repo_name)
 
     # variables replacement
     named_vars = {
         'id': issue_id,
         'repo': repo_name,
         'repo_name': repo_name_cleaned,
         'group_name': parent_group_name,
         # set dummy keys so we always have them
         'hostname': '',
         'netloc': '',
         'scheme': ''
     }
 
     request = get_current_request()
     if request:
         # exposes, hostname, netloc, scheme
         host_data = get_host_info(request)
         named_vars.update(host_data)
 
     # named regex variables
     named_vars.update(match_obj.groupdict())
     _url = string.Template(entry['url']).safe_substitute(**named_vars)
     desc = string.Template(entry['desc']).safe_substitute(**named_vars)
     hovercard_url = string.Template(entry.get('hovercard_url', '')).safe_substitute(**named_vars)
 
     def quote_cleaner(input_str):
         """Remove quotes as it's HTML"""
         return input_str.replace('"', '')
 
     data = {
         'pref': pref,
         'cls': quote_cleaner('issue-tracker-link'),
         'url': quote_cleaner(_url),
         'id-repr': issue_id,
         'issue-prefix': entry['pref'],
         'serv': entry['url'],
         'title': bleach.clean(desc, strip=True),
         'hovercard_url': hovercard_url
     }
 
     if return_raw_data:
         return {
             'id': issue_id,
             'url': _url
         }
     return tmpl % data
 
 
 def get_active_pattern_entries(repo_name):
     repo = None
     if repo_name:
         # Retrieving repo_name to avoid invalid repo_name to explode on
         # IssueTrackerSettingsModel but still passing invalid name further down
         repo = Repository.get_by_repo_name(repo_name, cache=True)
 
     settings_model = IssueTrackerSettingsModel(repo=repo)
     active_entries = settings_model.get_settings(cache=True)
     return active_entries
 
 
 pr_pattern_re = re.compile(r'(?:(?:^!)|(?: !))(\d+)')
 
 
 def process_patterns(text_string, repo_name, link_format='html', active_entries=None):
 
     allowed_formats = ['html', 'rst', 'markdown',
                        'html+hovercard', 'rst+hovercard', 'markdown+hovercard']
     if link_format not in allowed_formats:
         raise ValueError('Link format can be only one of:{} got {}'.format(
                          allowed_formats, link_format))
 
     if active_entries is None:
         log.debug('Fetch active patterns for repo: %s', repo_name)
         active_entries = get_active_pattern_entries(repo_name)
 
     issues_data = []
     new_text = text_string
 
     log.debug('Got %s entries to process', len(active_entries))
     for uid, entry in active_entries.items():
         log.debug('found issue tracker entry with uid %s', uid)
 
         if not (entry['pat'] and entry['url']):
             log.debug('skipping due to missing data')
             continue
 
         log.debug('issue tracker entry: uid: `%s` PAT:%s URL:%s PREFIX:%s',
                   uid, entry['pat'], entry['url'], entry['pref'])
 
         if entry.get('pat_compiled'):
             pattern = entry['pat_compiled']
         else:
             try:
                 pattern = re.compile(r'%s' % entry['pat'])
             except re.error:
                 log.exception('issue tracker pattern: `%s` failed to compile', entry['pat'])
                 continue
 
         data_func = partial(
             _process_url_func, repo_name=repo_name, entry=entry, uid=uid,
             return_raw_data=True)
 
         for match_obj in pattern.finditer(text_string):
             issues_data.append(data_func(match_obj))
 
         url_func = partial(
             _process_url_func, repo_name=repo_name, entry=entry, uid=uid,
             link_format=link_format)
 
         new_text = pattern.sub(url_func, new_text)
         log.debug('processed prefix:uid `%s`', uid)
 
     # finally use global replace, eg !123 -> pr-link, those will not catch
     # if already similar pattern exists
     server_url = '${scheme}://${netloc}'
     pr_entry = {
         'pref': '!',
         'url': server_url + '/_admin/pull-requests/${id}',
         'desc': 'Pull Request !${id}',
         'hovercard_url': server_url + '/_hovercard/pull_request/${id}'
     }
     pr_url_func = partial(
         _process_url_func, repo_name=repo_name, entry=pr_entry, uid=None,
         link_format=link_format+'+hovercard')
     new_text = pr_pattern_re.sub(pr_url_func, new_text)
     log.debug('processed !pr pattern')
 
     return new_text, issues_data
 
 
 def urlify_commit_message(commit_text, repository=None, active_pattern_entries=None):
     """
     Parses given text message and makes proper links.
     issues are linked to given issue-server, and rest is a commit link
     """
 
     def escaper(_text):
         return _text.replace('<', '&lt;').replace('>', '&gt;')
 
     new_text = escaper(commit_text)
 
     # extract http/https links and make them real urls
     new_text = urlify_text(new_text, safe=False)
 
     # urlify commits - extract commit ids and make link out of them, if we have
     # the scope of repository present.
     if repository:
         new_text = urlify_commits(new_text, repository)
 
     # process issue tracker patterns
     new_text, issues = process_patterns(new_text, repository or '',
                                         active_entries=active_pattern_entries)
 
     return literal(new_text)
 
 
 def render_binary(repo_name, file_obj):
     """
     Choose how to render a binary file
     """
 
     # unicode
     filename = file_obj.name
 
     # images
     for ext in ['*.png', '*.jpeg', '*.jpg', '*.ico', '*.gif']:
         if fnmatch.fnmatch(filename, pat=ext):
             src = route_path(
                 'repo_file_raw', repo_name=repo_name,
                 commit_id=file_obj.commit.raw_id,
                 f_path=file_obj.path)
 
             return literal(
                 '<img class="rendered-binary" alt="rendered-image" src="{}">'.format(src))
 
 
 def renderer_from_filename(filename, exclude=None):
     """
     choose a renderer based on filename, this works only for text based files
     """
 
     # ipython
     for ext in ['*.ipynb']:
         if fnmatch.fnmatch(filename, pat=ext):
             return 'jupyter'
 
     is_markup = MarkupRenderer.renderer_from_filename(filename, exclude=exclude)
     if is_markup:
         return is_markup
     return None
 
 
 def render(source, renderer='rst', mentions=False, relative_urls=None,
            repo_name=None, active_pattern_entries=None):
 
     def maybe_convert_relative_links(html_source):
         if relative_urls:
             return relative_links(html_source, relative_urls)
         return html_source
 
     if renderer == 'plain':
         return literal(
             MarkupRenderer.plain(source, leading_newline=False))
 
     elif renderer == 'rst':
         if repo_name:
             # process patterns on comments if we pass in repo name
             source, issues = process_patterns(
                 source, repo_name, link_format='rst',
                 active_entries=active_pattern_entries)
 
         return literal(
             '<div class="rst-block">%s</div>' %
             maybe_convert_relative_links(
                 MarkupRenderer.rst(source, mentions=mentions)))
 
     elif renderer == 'markdown':
         if repo_name:
             # process patterns on comments if we pass in repo name
             source, issues = process_patterns(
                 source, repo_name, link_format='markdown',
                 active_entries=active_pattern_entries)
 
         return literal(
             '<div class="markdown-block">%s</div>' %
             maybe_convert_relative_links(
                 MarkupRenderer.markdown(source, flavored=True,
                                         mentions=mentions)))
 
     elif renderer == 'jupyter':
         return literal(
             '<div class="ipynb">%s</div>' %
             maybe_convert_relative_links(
                 MarkupRenderer.jupyter(source)))
 
     # None means just show the file-source
     return None
 
 
 def commit_status(repo, commit_id):
     return ChangesetStatusModel().get_status(repo, commit_id)
 
 
 def commit_status_lbl(commit_status):
     return dict(ChangesetStatus.STATUSES).get(commit_status)
 
 
 def commit_time(repo_name, commit_id):
     repo = Repository.get_by_repo_name(repo_name)
     commit = repo.get_commit(commit_id=commit_id)
     return commit.date
 
 
 def get_permission_name(key):
     return dict(Permission.PERMS).get(key)
 
 
 def journal_filter_help(request):
     _ = request.translate
     from rhodecode.lib.audit_logger import ACTIONS
     actions = '\n'.join(textwrap.wrap(', '.join(sorted(ACTIONS.keys())), 80))
 
     return _(
         'Example filter terms:\n' +
         '     repository:vcs\n' +
         '     username:marcin\n' +
         '     username:(NOT marcin)\n' +
         '     action:*push*\n' +
         '     ip:127.0.0.1\n' +
         '     date:20120101\n' +
         '     date:[20120101100000 TO 20120102]\n' +
         '\n' +
         'Actions: {actions}\n' +
         '\n' +
         'Generate wildcards using \'*\' character:\n' +
         '     "repository:vcs*" - search everything starting with \'vcs\'\n' +
         '     "repository:*vcs*" - search for repository containing \'vcs\'\n' +
         '\n' +
         'Optional AND / OR operators in queries\n' +
         '     "repository:vcs OR repository:test"\n' +
         '     "username:test AND repository:test*"\n'
     ).format(actions=actions)
 
 
 def not_mapped_error(repo_name):
     from rhodecode.translation import _
     flash(_('%s repository is not mapped to db perhaps'
             ' it was created or renamed from the filesystem'
             ' please run the application again'
             ' in order to rescan repositories') % repo_name, category='error')
 
 
 def ip_range(ip_addr):
     from rhodecode.model.db import UserIpMap
     s, e = UserIpMap._get_ip_range(ip_addr)
     return '%s - %s' % (s, e)
 
 
 def form(url, method='post', needs_csrf_token=True, **attrs):
     """Wrapper around webhelpers.tags.form to prevent CSRF attacks."""
     if method.lower() != 'get' and needs_csrf_token:
         raise Exception(
             'Forms to POST/PUT/DELETE endpoints should have (in general) a ' +
             'CSRF token. If the endpoint does not require such token you can ' +
             'explicitly set the parameter needs_csrf_token to false.')
 
     return insecure_form(url, method=method, **attrs)
 
 
 def secure_form(form_url, method="POST", multipart=False, **attrs):
     """Start a form tag that points the action to an url. This
     form tag will also include the hidden field containing
     the auth token.
 
     The url options should be given either as a string, or as a
     ``url()`` function. The method for the form defaults to POST.
 
     Options:
 
     ``multipart``
         If set to True, the enctype is set to "multipart/form-data".
     ``method``
         The method to use when submitting the form, usually either
         "GET" or "POST". If "PUT", "DELETE", or another verb is used, a
         hidden input with name _method is added to simulate the verb
         over POST.
 
     """
 
     if 'request' in attrs:
         session = attrs['request'].session
         del attrs['request']
     else:
         raise ValueError(
             'Calling this form requires request= to be passed as argument')
 
     _form = insecure_form(form_url, method, multipart, **attrs)
     token = literal(
         '<input type="hidden" name="{}" value="{}">'.format(
             csrf_token_key, get_csrf_token(session)))
 
     return literal("%s\n%s" % (_form, token))
 
 
 def dropdownmenu(name, selected, options, enable_filter=False, **attrs):
     select_html = select(name, selected, options, **attrs)
 
     select2 = """
         <script>
             $(document).ready(function() {
                   $('#%s').select2({
                       containerCssClass: 'drop-menu %s',
                       dropdownCssClass: 'drop-menu-dropdown',
                       dropdownAutoWidth: true%s
                   });
             });
         </script>
     """
 
     filter_option = """,
                         minimumResultsForSearch: -1
     """
     input_id = attrs.get('id') or name
     extra_classes = ' '.join(attrs.pop('extra_classes', []))
     filter_enabled = "" if enable_filter else filter_option
     select_script = literal(select2 % (input_id, extra_classes, filter_enabled))
 
     return literal(select_html+select_script)
 
 
 def get_visual_attr(tmpl_context_var, attr_name):
     """
     A safe way to get a variable from visual variable of template context
 
     :param tmpl_context_var: instance of tmpl_context, usually present as `c`
     :param attr_name: name of the attribute we fetch from the c.visual
     """
     visual = getattr(tmpl_context_var, 'visual', None)
     if not visual:
         return
     else:
         return getattr(visual, attr_name, None)
 
 
 def get_last_path_part(file_node):
     if not file_node.path:
         return u'/'
 
     path = safe_unicode(file_node.path.split('/')[-1])
     return u'../' + path
 
 
 def route_url(*args, **kwargs):
     """
     Wrapper around pyramids `route_url` (fully qualified url) function.
     """
     req = get_current_request()
     return req.route_url(*args, **kwargs)
 
 
 def route_path(*args, **kwargs):
     """
     Wrapper around pyramids `route_path` function.
     """
     req = get_current_request()
     return req.route_path(*args, **kwargs)
 
 
 def route_path_or_none(*args, **kwargs):
     try:
         return route_path(*args, **kwargs)
     except KeyError:
         return None
 
 
 def current_route_path(request, **kw):
     new_args = request.GET.mixed()
     new_args.update(kw)
     return request.current_route_path(_query=new_args)
 
 
 def curl_api_example(method, args):
     args_json = json.dumps(OrderedDict([
         ('id', 1),
         ('auth_token', 'SECRET'),
         ('method', method),
         ('args', args)
     ]))
 
     return "curl {api_url} -X POST -H 'content-type:text/plain' --data-binary '{args_json}'".format(
         api_url=route_url('apiv2'),
         args_json=args_json
     )
 
 
 def api_call_example(method, args):
     """
     Generates an API call example via CURL
     """
     curl_call = curl_api_example(method, args)
 
     return literal(
         curl_call +
         "<br/><br/>SECRET can be found in <a href=\"{token_url}\">auth-tokens</a> page, "
         "and needs to be of `api calls` role."
         .format(token_url=route_url('my_account_auth_tokens')))
 
 
 def notification_description(notification, request):
     """
     Generate notification human readable description based on notification type
     """
     from rhodecode.model.notification import NotificationModel
     return NotificationModel().make_description(
         notification, translate=request.translate)
 
 
 def go_import_header(request, db_repo=None):
     """
     Creates a header for go-import functionality in Go Lang
     """
 
     if not db_repo:
         return
     if 'go-get' not in request.GET:
         return
 
     clone_url = db_repo.clone_url()
     prefix = re.split(r'^https?:\/\/', clone_url)[-1]
     # we have a repo and go-get flag,
     return literal('<meta name="go-import" content="{} {} {}">'.format(
         prefix, db_repo.repo_type, clone_url))
 
 
 def reviewer_as_json(*args, **kwargs):
     from rhodecode.apps.repository.utils import reviewer_as_json as _reviewer_as_json
     return _reviewer_as_json(*args, **kwargs)
 
 
 def get_repo_view_type(request):
     route_name = request.matched_route.name
     route_to_view_type = {
         'repo_changelog': 'commits',
         'repo_commits': 'commits',
         'repo_files': 'files',
         'repo_summary': 'summary',
         'repo_commit': 'commit'
     }
 
     return route_to_view_type.get(route_name)
 
 
 def is_active(menu_entry, selected):
     """
     Returns active class for selecting menus in templates
     <li class=${h.is_active('settings', current_active)}></li>
     """
     if not isinstance(menu_entry, list):
         menu_entry = [menu_entry]
 
     if selected in menu_entry:
         return "active"

rhodecode/public/css/code-block.less

@@ -1,1326 +1,1341 b''
 // Default styles
 
 .diff-collapse {
     margin: @padding 0;
     text-align: right;
 }
 
 .diff-container {
     margin-bottom: @space;
 
     .diffblock {
         margin-bottom: @space;
     }
 
     &.hidden {
         display: none;
         overflow: hidden;
     }
 }
 
 
 div.diffblock .sidebyside {
  background: #ffffff;
 }
 
 div.diffblock {
     overflow-x: auto;
     overflow-y: hidden;
     clear: both;
     padding: 0px;
     background: @grey6;
     border: @border-thickness solid @grey5;
     -webkit-border-radius: @border-radius @border-radius 0px 0px;
     border-radius: @border-radius @border-radius 0px 0px;
 
 
     .comments-number {
         float: right;
     }
 
     // BEGIN CODE-HEADER STYLES
 
     .code-header {
         background: @grey6;
         padding: 10px 0 10px 0;
         height: auto;
         width: 100%;
 
         .hash {
             float: left;
             padding: 2px 0 0 2px;
         }
 
         .date {
             float: left;
             text-transform: uppercase;
             padding: 4px 0px 0px 2px;
         }
 
         div {
             margin-left: 4px;
         }
 
         div.compare_header {
             min-height: 40px;
             margin: 0;
             padding: 0 @padding;
 
             .drop-menu {
                 float:left;
                 display: block;
                 margin:0 0 @padding 0;
             }
 
             .compare-label {
                 float: left;
                 clear: both;
                 display: inline-block;
                 min-width: 5em;
                 margin: 0;
                 padding: @button-padding @button-padding @button-padding 0;
                 font-weight: @text-semibold-weight;
                 font-family: @text-semibold;
             }
 
             .compare-buttons {
                 float: left;
                 margin: 0;
                 padding: 0 0 @padding;
 
                 .btn {
                     margin: 0 @padding 0 0;
                 }
             }
         }
 
     }
 
     .parents {
         float: left;
         width: 100px;
         font-weight: 400;
         vertical-align: middle;
         padding: 0px 2px 0px 2px;
         background-color: @grey6;
 
         #parent_link {
            margin: 00px 2px;
 
            &.double {
                margin: 0px 2px;
             }
 
             &.disabled{
                 margin-right: @padding;
             }
         }
     }
 
     .children {
         float: right;
         width: 100px;
         font-weight: 400;
         vertical-align: middle;
         text-align: right;
         padding: 0px 2px 0px 2px;
         background-color: @grey6;
 
         #child_link {
            margin: 0px 2px;
 
            &.double {
                margin: 0px 2px;
             }
 
             &.disabled{
                 margin-right: @padding;
             }
         }
     }
 
     .changeset_header {
         height: 16px;
 
         & > div{
             margin-right: @padding;
        }
     }
 
     .changeset_file {
         text-align: left;
         float: left;
         padding: 0;
 
         a{
             display: inline-block;
             margin-right: 0.5em;
         }
 
        #selected_mode{
             margin-left: 0;
        }
     }
 
     .diff-menu-wrapper {
         float: left;
     }
 
     .diff-menu {
         position: absolute;
         background: none repeat scroll 0 0 #FFFFFF;
         border-color: #003367 @grey3 @grey3;
         border-right: 1px solid @grey3;
         border-style: solid solid solid;
         border-width: @border-thickness;
         box-shadow: 2px 8px 4px rgba(0, 0, 0, 0.2);
         margin-top: 5px;
         margin-left: 1px;
     }
 
     .diff-actions, .editor-actions {
         float: left;
 
         input{
             margin: 0 0.5em 0 0;
         }
     }
 
     // END CODE-HEADER STYLES
 
     // BEGIN CODE-BODY STYLES
 
     .code-body {
         padding: 0;
         background-color: #ffffff;
         position: relative;
         max-width: none;
         box-sizing: border-box;
         // TODO: johbo: Parent has overflow: auto, this forces the child here
         // to have the intended size and to scroll. Should be simplified.
         width: 100%;
         overflow-x: auto;
     }
 
     pre.raw {
         background: white;
         color: @grey1;
     }
     // END CODE-BODY STYLES
 
 }
 
 
 table.code-difftable {
     border-collapse: collapse;
     width: 99%;
     border-radius: 0px !important;
 
      td {
         padding: 0 !important;
         background: none !important;
         border: 0 !important;
     }
 
     .context {
         background: none repeat scroll 0 0 #DDE7EF;
     }
 
     .add {
         background: none repeat scroll 0 0 #DDFFDD;
 
         ins {
             background: none repeat scroll 0 0 #AAFFAA;
             text-decoration: none;
         }
     }
 
     .del {
         background: none repeat scroll 0 0 #FFDDDD;
 
         del {
             background: none repeat scroll 0 0 #FFAAAA;
             text-decoration: none;
         }
     }
 
     /** LINE NUMBERS **/
     .lineno {
         padding-left: 2px !important;
         padding-right: 2px;
         text-align: right;
         width: 32px;
         -moz-user-select: none;
         -webkit-user-select: none;
         border-right: @border-thickness solid @grey5 !important;
         border-left: 0px solid #CCC !important;
         border-top: 0px solid #CCC !important;
         border-bottom: none !important;
 
         a {
             &:extend(pre);
             text-align: right;
             padding-right: 2px;
             cursor: pointer;
             display: block;
             width: 32px;
         }
     }
 
     .context {
         cursor: auto;
         &:extend(pre);
     }
 
     .lineno-inline {
         background: none repeat scroll 0 0 #FFF !important;
         padding-left: 2px;
         padding-right: 2px;
         text-align: right;
         width: 30px;
         -moz-user-select: none;
         -webkit-user-select: none;
     }
 
     /** CODE **/
     .code {
         display: block;
         width: 100%;
 
         td {
             margin: 0;
             padding: 0;
         }
 
         pre {
             margin: 0;
             padding: 0;
             margin-left: .5em;
         }
     }
 }
 
 
 // Comments
 .comment-selected-hl {
     border-left: 6px solid @comment-highlight-color !important;
     padding-left: 3px !important;
     margin-left: -7px !important;
 }
 
 div.comment:target,
 div.comment-outdated:target {
     .comment-selected-hl;
 }
 
 //TODO: anderson: can't get an absolute number out of anything, so had to put the
 //current values that might change. But to make it clear I put as a calculation
 @comment-max-width: 1065px;
 @pr-extra-margin: 34px;
 @pr-border-spacing: 4px;
 @pr-comment-width: @comment-max-width - @pr-extra-margin - @pr-border-spacing;
 
 // Pull Request
 .cs_files .code-difftable {
     border: @border-thickness solid @grey5; //borders only on PRs
 
     .comment-inline-form,
     div.comment {
         width: @pr-comment-width;
     }
 }
 
 // Changeset
 .code-difftable {
     .comment-inline-form,
     div.comment {
         width: @comment-max-width;
     }
 }
 
 //Style page
 @style-extra-margin: @sidebar-width + (@sidebarpadding * 3) + @padding;
 #style-page .code-difftable{
     .comment-inline-form,
     div.comment {
         width: @comment-max-width - @style-extra-margin;
     }
 }
 
 #context-bar > h2 {
     font-size: 20px;
 }
 
 #context-bar > h2> a {
     font-size: 20px;
 }
 // end of defaults
 
 .file_diff_buttons {
     padding: 0 0 @padding;
 
     .drop-menu {
         float: left;
         margin: 0 @padding 0 0;
     }
     .btn {
         margin: 0 @padding 0 0;
     }
 }
 
 .code-body.textarea.editor {
     max-width: none;
     padding: 15px;
 }
 
 td.injected_diff{
     max-width: 1178px;
     overflow-x: auto;
     overflow-y: hidden;
 
     div.diff-container,
     div.diffblock{
         max-width: 100%;
     }
 
     div.code-body {
         max-width: 1124px;
         overflow-x: auto;
         overflow-y: hidden;
         padding: 0;
     }
     div.diffblock {
         border: none;
     }
 
     &.inline-form {
         width: 99%
     }
  }
 
 
 table.code-difftable {
     width: 100%;
 }
 
 /** PYGMENTS COLORING **/
 div.codeblock {
 
     // TODO: johbo: Added interim to get rid of the margin around
     // Select2 widgets. This needs further cleanup.
     overflow: auto;
     padding: 0px;
     border: @border-thickness solid @grey6;
     .border-radius(@border-radius);
 
     #remove_gist {
         float: right;
     }
 
     .gist_url {
         padding: 0px 0px 35px 0px;
     }
 
     .gist-desc {
         clear: both;
         margin: 0 0 10px 0;
         code {
             white-space: pre-line;
             line-height: inherit
         }
     }
 
     .author {
         clear: both;
         vertical-align: middle;
         font-weight: @text-bold-weight;
         font-family: @text-bold;
     }
 
     .btn-mini {
         float: left;
         margin: 0 5px 0 0;
     }
 
     .code-header {
         padding: @padding;
         border-bottom: @border-thickness solid @grey5;
 
         .rc-user {
             min-width: 0;
             margin-right: .5em;
         }
 
         .stats {
             clear: both;
             margin: 0 0 @padding 0;
             padding: 0;
             .left {
                 float: left;
                 clear: left;
                 max-width: 75%;
                 margin: 0 0 @padding 0;
 
                 &.item {
                     margin-right: @padding;
                     &.last { border-right: none; }
                 }
             }
             .buttons { float: right; }
             .author {
                 height: 25px; margin-left: 15px; font-weight: bold;
             }
         }
 
         .commit {
             margin: 5px 0 0 26px;
             font-weight: normal;
             white-space: pre-wrap;
         }
     }
 
     .message {
         position: relative;
         margin: @padding;
 
         .codeblock-label {
             margin: 0 0 1em 0;
         }
     }
 
     .code-body {
         padding: 0.8em 1em;
         background-color: #ffffff;
         min-width: 100%;
         box-sizing: border-box;
         // TODO: johbo: Parent has overflow: auto, this forces the child here
         // to have the intended size and to scroll. Should be simplified.
         width: 100%;
         overflow-x: auto;
 
         img.rendered-binary {
             height: auto;
             width: auto;
         }
 
         .markdown-block {
             padding: 1em 0;
         }
     }
 
     .codeblock-header {
         background: @grey7;
         height: 36px;
     }
 
     .path {
         border-bottom: 1px solid @grey6;
         padding: .65em 1em;
         height: 18px;
     }
 }
 
 .code-highlighttable,
 div.codeblock {
 
     &.readme {
         background-color: white;
     }
 
     .markdown-block table {
         border-collapse: collapse;
 
         th,
         td {
             padding: .5em;
             border: @border-thickness solid @border-default-color;
         }
     }
 
     table {
         border: 0px;
         margin: 0;
         letter-spacing: normal;
 
 
         td {
             border: 0px;
             vertical-align: top;
         }
     }
 }
 
 div.codeblock .code-header .search-path { padding: 0 0 0 10px; }
 div.search-code-body {
     background-color: #ffffff; padding: 5px 0 5px 10px;
     pre {
         .match { background-color: #faffa6;}
         .break { display: block; width: 100%; background-color: #DDE7EF; color: #747474; }
     }
     .code-highlighttable {
         border-collapse: collapse;
 
         tr:hover {
             background: #fafafa;
         }
         td.code {
           padding-left: 10px;
         }
         td.line {
             border-right: 1px solid #ccc !important;
             padding-right: 10px;
             text-align: right;
             font-family: @text-monospace;
             span {
                 white-space: pre-wrap;
                 color: #666666;
             }
         }
     }
 }
 
 div.annotatediv { margin-left: 2px; margin-right: 4px; }
 .code-highlight {
     margin: 0; padding: 0; border-left: @border-thickness solid @grey5;
     pre, .linenodiv pre { padding: 0 5px; margin: 0; }
     pre div:target {background-color: @comment-highlight-color !important;}
 }
 
 .linenos a { text-decoration: none; }
 
 .CodeMirror-selected { background: @rchighlightblue; }
 .CodeMirror-focused .CodeMirror-selected { background: @rchighlightblue; }
 .CodeMirror ::selection { background: @rchighlightblue; }
 .CodeMirror ::-moz-selection { background: @rchighlightblue; }
 
 .code { display: block; border:0px !important; }
 
 .code-highlight, /* TODO: dan: merge codehilite into code-highlight */
 .codehilite {
     /*ElasticMatch is custom RhodeCode TAG*/
 
     .c-ElasticMatch {
         background-color: #faffa6;
         padding: 0.2em;
     }
 }
 
 /* This can be generated with `pygmentize -S default -f html` */
 .code-highlight,
 .codehilite {
     /*ElasticMatch is custom RhodeCode TAG*/
     .c-ElasticMatch { background-color: #faffa6; padding: 0.2em;}
     .hll { background-color: #ffffcc }
     .c { color: #408080; font-style: italic } /* Comment */
     .err, .codehilite .err { border: none } /* Error */
     .k { color: #008000; font-weight: bold } /* Keyword */
     .o { color: #666666 } /* Operator */
     .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
     .cm { color: #408080; font-style: italic } /* Comment.Multiline */
     .cp { color: #BC7A00 } /* Comment.Preproc */
     .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
     .c1 { color: #408080; font-style: italic } /* Comment.Single */
     .cs { color: #408080; font-style: italic } /* Comment.Special */
     .gd { color: #A00000 } /* Generic.Deleted */
     .ge { font-style: italic } /* Generic.Emph */
     .gr { color: #FF0000 } /* Generic.Error */
     .gh { color: #000080; font-weight: bold } /* Generic.Heading */
     .gi { color: #00A000 } /* Generic.Inserted */
     .go { color: #888888 } /* Generic.Output */
     .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
     .gs { font-weight: bold } /* Generic.Strong */
     .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
     .gt { color: #0044DD } /* Generic.Traceback */
     .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
     .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
     .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
     .kp { color: #008000 } /* Keyword.Pseudo */
     .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
     .kt { color: #B00040 } /* Keyword.Type */
     .m { color: #666666 } /* Literal.Number */
     .s { color: #BA2121 } /* Literal.String */
     .na { color: #7D9029 } /* Name.Attribute */
     .nb { color: #008000 } /* Name.Builtin */
     .nc { color: #0000FF; font-weight: bold } /* Name.Class */
     .no { color: #880000 } /* Name.Constant */
     .nd { color: #AA22FF } /* Name.Decorator */
     .ni { color: #999999; font-weight: bold } /* Name.Entity */
     .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
     .nf { color: #0000FF } /* Name.Function */
     .nl { color: #A0A000 } /* Name.Label */
     .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
     .nt { color: #008000; font-weight: bold } /* Name.Tag */
     .nv { color: #19177C } /* Name.Variable */
     .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
     .w { color: #bbbbbb } /* Text.Whitespace */
     .mb { color: #666666 } /* Literal.Number.Bin */
     .mf { color: #666666 } /* Literal.Number.Float */
     .mh { color: #666666 } /* Literal.Number.Hex */
     .mi { color: #666666 } /* Literal.Number.Integer */
     .mo { color: #666666 } /* Literal.Number.Oct */
     .sa { color: #BA2121 } /* Literal.String.Affix */
     .sb { color: #BA2121 } /* Literal.String.Backtick */
     .sc { color: #BA2121 } /* Literal.String.Char */
     .dl { color: #BA2121 } /* Literal.String.Delimiter */
     .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
     .s2 { color: #BA2121 } /* Literal.String.Double */
     .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
     .sh { color: #BA2121 } /* Literal.String.Heredoc */
     .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
     .sx { color: #008000 } /* Literal.String.Other */
     .sr { color: #BB6688 } /* Literal.String.Regex */
     .s1 { color: #BA2121 } /* Literal.String.Single */
     .ss { color: #19177C } /* Literal.String.Symbol */
     .bp { color: #008000 } /* Name.Builtin.Pseudo */
     .fm { color: #0000FF } /* Name.Function.Magic */
     .vc { color: #19177C } /* Name.Variable.Class */
     .vg { color: #19177C } /* Name.Variable.Global */
     .vi { color: #19177C } /* Name.Variable.Instance */
     .vm { color: #19177C } /* Name.Variable.Magic */
     .il { color: #666666 } /* Literal.Number.Integer.Long */
 
 }
 
 /* customized pre blocks for markdown/rst */
 pre.literal-block, .codehilite pre{
     padding: @padding;
     border: 1px solid @grey6;
     .border-radius(@border-radius);
     background-color: @grey7;
 }
 
 
 /* START NEW CODE BLOCK CSS */
 
 @cb-line-height: 18px;
 @cb-line-code-padding: 10px;
 @cb-text-padding: 5px;
 
 @pill-padding: 2px 7px;
 @pill-padding-small: 2px 2px 1px 2px;
 
 input.filediff-collapse-state {
     display: none;
 
     &:checked + .filediff { /* file diff is collapsed */
         .cb {
             display: none
         }
         .filediff-collapse-indicator {
             float: left;
             cursor: pointer;
             margin: 1px -5px;
         }
         .filediff-collapse-indicator:before {
             content: '\f105';
         }
 
         .filediff-menu {
             display: none;
         }
 
     }
 
     &+ .filediff { /* file diff is expanded */
 
         .filediff-collapse-indicator {
             float: left;
             cursor: pointer;
             margin: 1px -5px;
         }
         .filediff-collapse-indicator:before {
             content: '\f107';
         }
 
         .filediff-menu {
             display: block;
         }
 
         margin: 10px 0;
         &:nth-child(2) {
             margin: 0;
         }
     }
 }
 
 .filediffs .anchor {
     display: block;
     height: 40px;
     margin-top: -40px;
     visibility: hidden;
 }
 
 .filediffs .anchor:nth-of-type(1) {
     display: block;
     height: 80px;
     margin-top: -80px;
     visibility: hidden;
 }
 
 .cs_files {
     clear: both;
 }
 
 #diff-file-sticky{
     will-change: min-height;
     height: 80px;
 }
 
 .sidebar__inner{
     transform: translate(0, 0); /* For browsers don't support translate3d. */
     transform: translate3d(0, 0, 0);
     will-change: position, transform;
     height: 65px;
     background-color: #fff;
     padding: 5px 0px;
 }
 
 .sidebar__bar {
     padding: 5px 0px 0px 0px
 }
 
 .fpath-placeholder {
     clear: both;
     visibility: hidden
 }
 
 .is-affixed {
 
     .sidebar__inner {
         z-index: 30;
     }
 
     .sidebar_inner_shadow {
         position: fixed;
         top: 75px;
         right: -100%;
         left: -100%;
         z-index: 30;
         display: block;
         height: 5px;
         content: "";
         background: linear-gradient(rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.001)) repeat-x 0 0;
         border-top: 1px solid rgba(0, 0, 0, 0.15);
     }
 
     .fpath-placeholder {
         visibility: visible !important;
     }
 }
 
 .diffset-menu {
 
 }
 
 #todo-box {
     clear:both;
     display: none;
     text-align: right
 }
 
 .diffset {
     margin: 0px auto;
     .diffset-heading {
         border: 1px solid @grey5;
         margin-bottom: -1px;
         // margin-top: 20px;
         h2 {
             margin: 0;
             line-height: 38px;
             padding-left: 10px;
         }
         .btn {
             margin: 0;
         }
         background: @grey6;
         display: block;
         padding: 5px;
     }
     .diffset-heading-warning {
         background: @alert3-inner;
         border: 1px solid @alert3;
     }
     &.diffset-comments-disabled {
         .cb-comment-box-opener, .comment-inline-form, .cb-comment-add-button {
             display: none !important;
         }
     }
 }
 
 .filelist {
     .pill {
         display: block;
         float: left;
         padding: @pill-padding-small;
     }
 }
 
 .pill {
     display: block;
     float: left;
     padding: @pill-padding;
 }
 
 .pill-group {
     .pill {
         opacity: .8;
         margin-right: 3px;
         font-size: 12px;
         font-weight: normal;
         min-width: 30px;
         text-align: center;
 
         &:first-child {
             border-radius: @border-radius 0 0 @border-radius;
         }
         &:last-child {
             border-radius: 0 @border-radius @border-radius 0;
         }
         &:only-child {
             border-radius: @border-radius;
             margin-right: 0;
         }
     }
 }
 
 /* Main comments*/
 #comments {
     .comment-selected {
         border-left: 6px solid @comment-highlight-color;
         padding-left: 3px;
         margin-left: -9px;
     }
 }
 
 .filediff {
     border: 1px solid @grey5;
 
     /* START OVERRIDES */
     .code-highlight {
         border: none;  // TODO: remove this border from the global
                        // .code-highlight, it doesn't belong there
     }
     label {
         margin: 0; // TODO: remove this margin definition from global label
                    // it doesn't belong there - if margin on labels
                    // are needed for a form they should be defined
                    // in the form's class
     }
     /* END OVERRIDES */
 
     * {
         box-sizing: border-box;
     }
 
     .on-hover-icon {
         visibility: hidden;
     }
 
     .filediff-anchor {
         visibility: hidden;
     }
     &:hover {
         .filediff-anchor {
             visibility: visible;
         }
         .on-hover-icon {
             visibility: visible;
         }
     }
 
     .filediff-heading {
         cursor: pointer;
         display: block;
         padding: 10px 10px;
     }
     .filediff-heading:after {
         content: "";
         display: table;
         clear: both;
     }
     .filediff-heading:hover {
         background: #e1e9f4 !important;
     }
 
     .filediff-menu {
         text-align: right;
         padding: 5px 5px 5px 0px;
         background: @grey7;
 
         &> a,
         &> span {
             padding: 1px;
         }
     }
 
     .filediff-collapse-button, .filediff-expand-button {
         cursor: pointer;
     }
     .filediff-collapse-button {
         display: inline;
     }
     .filediff-expand-button {
         display: none;
     }
     .filediff-collapsed .filediff-collapse-button {
         display: none;
     }
     .filediff-collapsed .filediff-expand-button {
         display: inline;
     }
 
     /**** COMMENTS ****/
 
     .filediff-menu {
         .show-comment-button {
             display: none;
         }
     }
     &.hide-comments {
         .inline-comments {
             display: none;
         }
         .filediff-menu {
             .show-comment-button {
                 display: inline;
             }
             .hide-comment-button {
                 display: none;
             }
         }
     }
 
     .hide-line-comments {
         .inline-comments {
             display: none;
         }
     }
 
     /**** END COMMENTS ****/
 
+
+    .nav-chunk {
+        position: absolute;
+        right: 20px;
+        margin-top: -17px;
+    }
+
+    .nav-chunk.selected {
+        visibility: visible !important;
+    }
+
+    #diff_nav {
+        color: @grey3;
+    }
+
 }
 
 
 .op-added {
     color: @alert1;
 }
 
 .op-deleted {
     color: @alert2;
 }
 
 .filediff, .filelist {
 
     .pill {
         &[op="name"] {
             background: none;
             opacity: 1;
             color: white;
         }
         &[op="limited"] {
             background: @grey2;
             color: white;
         }
         &[op="binary"] {
             background: @color7;
             color: white;
         }
         &[op="modified"] {
             background: @alert1;
             color: white;
         }
         &[op="renamed"] {
             background: @color4;
             color: white;
         }
         &[op="copied"] {
             background: @color4;
             color: white;
         }
         &[op="mode"] {
             background: @grey3;
             color: white;
         }
         &[op="symlink"] {
             background: @color8;
             color: white;
         }
 
         &[op="added"] { /* added lines */
             background: @alert1;
             color: white;
         }
         &[op="deleted"] { /* deleted lines */
             background: @alert2;
             color: white;
         }
 
         &[op="created"] { /* created file */
             background: @alert1;
             color: white;
         }
         &[op="removed"] { /* deleted file */
             background: @color5;
             color: white;
         }
         &[op="comments"] { /* comments on file */
             background: @grey4;
             color: white;
         }
     }
 }
 
 
 .filediff-outdated {
     padding: 8px 0;
 
     .filediff-heading {
         opacity: .5;
     }
 }
 
 table.cb {
     width: 100%;
     border-collapse: collapse;
 
     .cb-text {
         padding: @cb-text-padding;
     }
     .cb-hunk {
         padding: @cb-text-padding;
     }
     .cb-expand {
         display: none;
     }
     .cb-collapse {
         display: inline;
     }
     &.cb-collapsed {
         .cb-line {
             display: none;
         }
         .cb-expand {
             display: inline;
         }
         .cb-collapse {
             display: none;
         }
         .cb-hunk {
             display: none;
         }
     }
 
     /* intentionally general selector since .cb-line-selected must override it
        and they both use !important since the td itself may have a random color
        generated by annotation blocks. TLDR: if you change it, make sure
        annotated block selection and line selection in file view still work */
     .cb-line-fresh .cb-content {
         background: white !important;
     }
     .cb-warning {
         background: #fff4dd;
     }
 
     &.cb-diff-sideside {
         td {
             &.cb-content {
                 width: 50%;
             }
         }
     }
 
     tr {
         &.cb-annotate {
             border-top: 1px solid #eee;
         }
 
         &.cb-comment-info {
             border-top: 1px solid #eee;
             color: rgba(0, 0, 0, 0.3);
             background: #edf2f9;
 
             td {
 
             }
         }
 
         &.cb-hunk {
             font-family: @text-monospace;
             color: rgba(0, 0, 0, 0.3);
 
             td {
                 &:first-child {
                     background: #edf2f9;
                 }
                 &:last-child {
                     background: #f4f7fb;
                 }
             }
         }
     }
 
 
     td {
         vertical-align: top;
         padding: 0;
 
         &.cb-content {
             font-size: 12.35px;
 
             &.cb-line-selected .cb-code {
                 background: @comment-highlight-color !important;
             }
 
             span.cb-code {
                 line-height: @cb-line-height;
                 padding-left: @cb-line-code-padding;
                 padding-right: @cb-line-code-padding;
                 display: block;
                 white-space: pre-wrap;
                 font-family: @text-monospace;
                 word-break: break-all;
                 .nonl {
                     color: @color5;
                 }
                 .cb-action {
                     &:before {
                         content: "  ";
                     }
                     &.cb-deletion:before {
                         content: "- ";
                     }
                     &.cb-addition:before {
                         content: "+ ";
                     }
                 }
             }
 
             &> button.cb-comment-box-opener {
 
                 padding: 2px 2px 1px 3px;
                 margin-left: -6px;
                 margin-top: -1px;
 
                 border-radius: @border-radius;
                 position: absolute;
                 display: none;
             }
             .cb-comment {
                 margin-top: 10px;
                 white-space: normal;
             }
         }
         &:hover {
             button.cb-comment-box-opener {
                 display: block;
             }
             &+ td button.cb-comment-box-opener {
                 display: block
             }
         }
 
         &.cb-data {
             text-align: right;
             width: 30px;
             font-family: @text-monospace;
 
             .icon-comment {
                 cursor: pointer;
             }
             &.cb-line-selected {
                 background: @comment-highlight-color !important;
             }
             &.cb-line-selected > div {
                 display: block;
                 background: @comment-highlight-color !important;
                 line-height: @cb-line-height;
                 color: rgba(0, 0, 0, 0.3);
             }
         }
 
         &.cb-lineno {
             padding: 0;
             width: 50px;
             color: rgba(0, 0, 0, 0.3);
             text-align: right;
             border-right: 1px solid #eee;
             font-family: @text-monospace;
             -webkit-user-select: none;
             -moz-user-select: none;
             user-select: none;
 
             a::before {
                 content: attr(data-line-no);
             }
             &.cb-line-selected {
                 background: @comment-highlight-color !important;
             }
 
             a {
                 display: block;
                 padding-right: @cb-line-code-padding;
                 padding-left: @cb-line-code-padding;
                 line-height: @cb-line-height;
                 color: rgba(0, 0, 0, 0.3);
             }
         }
 
         &.cb-empty {
             background: @grey7;
         }
 
         ins {
             color: black;
             background: #a6f3a6;
             text-decoration: none;
         }
         del {
             color: black;
             background: #f8cbcb;
             text-decoration: none;
         }
         &.cb-addition {
             background: #ecffec;
 
             &.blob-lineno {
                 background: #ddffdd;
             }
         }
         &.cb-deletion {
             background: #ffecec;
 
             &.blob-lineno {
                 background: #ffdddd;
             }
         }
         &.cb-annotate-message-spacer {
              width:8px;
              padding: 1px 0px 0px 3px;
         }
         &.cb-annotate-info {
             width: 320px;
             min-width: 320px;
             max-width: 320px;
             padding: 5px 2px;
             font-size: 13px;
 
             .cb-annotate-message {
                 padding: 2px 0px 0px 0px;
                 white-space: pre-line;
                 overflow: hidden;
             }
             .rc-user {
                 float: none;
                 padding: 0 6px 0 17px;
                 min-width: unset;
                 min-height: unset;
             }
         }
 
         &.cb-annotate-revision {
             cursor: pointer;
             text-align: right;
             padding: 1px 3px 0px 3px;
         }
     }
 }

rhodecode/templates/codeblocks/diffs.mako

@@ -1,1219 +1,1355 b''
 <%namespace name="commentblock" file="/changeset/changeset_file_comment.mako"/>
 
 <%def name="diff_line_anchor(commit, filename, line, type)"><%
 return '%s_%s_%i' % (h.md5_safe(commit+filename), type, line)
 %></%def>
 
 <%def name="action_class(action)">
 <%
     return {
         '-': 'cb-deletion',
         '+': 'cb-addition',
         ' ': 'cb-context',
         }.get(action, 'cb-empty')
 %>
 </%def>
 
 <%def name="op_class(op_id)">
 <%
     return {
         DEL_FILENODE: 'deletion', # file deleted
         BIN_FILENODE: 'warning' # binary diff hidden
     }.get(op_id, 'addition')
 %>
 </%def>
 
 
 
 <%def name="render_diffset(diffset, commit=None,
 
     # collapse all file diff entries when there are more than this amount of files in the diff
     collapse_when_files_over=20,
 
     # collapse lines in the diff when more than this amount of lines changed in the file diff
     lines_changed_limit=500,
 
     # add a ruler at to the output
     ruler_at_chars=0,
 
     # show inline comments
     use_comments=False,
 
     # disable new comments
     disable_new_comments=False,
 
     # special file-comments that were deleted in previous versions
     # it's used for showing outdated comments for deleted files in a PR
     deleted_files_comments=None,
 
     # for cache purpose
     inline_comments=None,
 
     # additional menu for PRs
     pull_request_menu=None,
 
     # show/hide todo next to comments
     show_todos=True,
 
 )">
 
 <%
     diffset_container_id = h.md5(diffset.target_ref)
     collapse_all = len(diffset.files) > collapse_when_files_over
     active_pattern_entries = h.get_active_pattern_entries(getattr(c, 'repo_name', None))
 %>
 
 %if use_comments:
 
 ## Template for injecting comments
 <div id="cb-comments-inline-container-template" class="js-template">
   ${inline_comments_container([])}
 </div>
 
 <div class="js-template" id="cb-comment-inline-form-template">
     <div class="comment-inline-form ac">
 
     %if c.rhodecode_user.username != h.DEFAULT_USER:
         ## render template for inline comments
         ${commentblock.comment_form(form_type='inline')}
     %else:
         ${h.form('', class_='inline-form comment-form-login', method='get')}
         <div class="pull-left">
             <div class="comment-help pull-right">
               ${_('You need to be logged in to leave comments.')} <a href="${h.route_path('login', _query={'came_from': h.current_route_path(request)})}">${_('Login now')}</a>
             </div>
         </div>
         <div class="comment-button pull-right">
          <button type="button" class="cb-comment-cancel" onclick="return Rhodecode.comments.cancelComment(this);">
           ${_('Cancel')}
          </button>
         </div>
         <div class="clearfix"></div>
         ${h.end_form()}
     %endif
     </div>
 </div>
 
 %endif
 
 %if c.user_session_attrs["diffmode"] == 'sideside':
 <style>
 .wrapper {
     max-width: 1600px !important;
 }
 </style>
 %endif
 
 %if ruler_at_chars:
 <style>
 .diff table.cb .cb-content:after {
     content: "";
     border-left: 1px solid blue;
     position: absolute;
     top: 0;
     height: 18px;
     opacity: .2;
     z-index: 10;
     //## +5 to account for diff action (+/-)
     left: ${ruler_at_chars + 5}ch;
 </style>
 %endif
 
 <div class="diffset ${disable_new_comments and 'diffset-comments-disabled'}">
 
     <div style="height: 20px; line-height: 20px">
         ## expand/collapse action
         <div class="pull-left">
             <a class="${'collapsed' if collapse_all else ''}" href="#expand-files" onclick="toggleExpand(this, '${diffset_container_id}'); return false">
             % if collapse_all:
                 <i class="icon-plus-squared-alt icon-no-margin"></i>${_('Expand all files')}
             % else:
                 <i class="icon-minus-squared-alt icon-no-margin"></i>${_('Collapse all files')}
             % endif
             </a>
 
         </div>
 
         ## todos
         % if show_todos and getattr(c, 'at_version', None):
         <div class="pull-right">
             <i class="icon-flag-filled" style="color: #949494">TODOs:</i>
              ${_('not available in this view')}
         </div>
         % elif show_todos:
         <div class="pull-right">
             <div class="comments-number" style="padding-left: 10px">
                 % if hasattr(c, 'unresolved_comments') and hasattr(c, 'resolved_comments'):
                     <i class="icon-flag-filled" style="color: #949494">TODOs:</i>
                     % if c.unresolved_comments:
                         <a href="#show-todos" onclick="$('#todo-box').toggle(); return false">
                             ${_('{} unresolved').format(len(c.unresolved_comments))}
                         </a>
                     % else:
                         ${_('0 unresolved')}
                     % endif
 
                     ${_('{} Resolved').format(len(c.resolved_comments))}
                 % endif
             </div>
         </div>
         % endif
 
         ## comments
         <div class="pull-right">
             <div class="comments-number" style="padding-left: 10px">
                 % if hasattr(c, 'comments') and hasattr(c, 'inline_cnt'):
                     <i class="icon-comment" style="color: #949494">COMMENTS:</i>
                     % if c.comments:
                         <a href="#comments">${_ungettext("{} General", "{} General", len(c.comments)).format(len(c.comments))}</a>,
                     % else:
                         ${_('0 General')}
                     % endif
 
                     % if c.inline_cnt:
                         <a href="#" onclick="return Rhodecode.comments.nextComment();"
                            id="inline-comments-counter">${_ungettext("{} Inline", "{} Inline", c.inline_cnt).format(c.inline_cnt)}
                         </a>
                     % else:
                         ${_('0 Inline')}
                     % endif
                 % endif
 
                 % if pull_request_menu:
                     <%
                     outdated_comm_count_ver = pull_request_menu['outdated_comm_count_ver']
                     %>
 
                     % if outdated_comm_count_ver:
                         <a href="#" onclick="showOutdated(); Rhodecode.comments.nextOutdatedComment(); return false;">
                             (${_("{} Outdated").format(outdated_comm_count_ver)})
                         </a>
                         <a href="#" class="showOutdatedComments" onclick="showOutdated(this); return false;"> | ${_('show outdated')}</a>
                         <a href="#" class="hideOutdatedComments" style="display: none" onclick="hideOutdated(this); return false;"> | ${_('hide outdated')}</a>
                     % else:
                         (${_("{} Outdated").format(outdated_comm_count_ver)})
                     % endif
 
                 % endif
 
             </div>
         </div>
 
     </div>
 
     % if diffset.limited_diff:
         <div class="diffset-heading ${(diffset.limited_diff and 'diffset-heading-warning' or '')}">
             <h2 class="clearinner">
                 ${_('The requested changes are too big and content was truncated.')}
                 <a href="${h.current_route_path(request, fulldiff=1)}" onclick="return confirm('${_("Showing a big diff might take some time and resources, continue?")}')">${_('Show full diff')}</a>
             </h2>
         </div>
     ## commit range header for each individual diff
     % elif commit and hasattr(c, 'commit_ranges') and len(c.commit_ranges) > 1:
         <div class="diffset-heading ${(diffset.limited_diff and 'diffset-heading-warning' or '')}">
             <div class="clearinner">
                 <a class="tooltip revision" title="${h.tooltip(commit.message)}" href="${h.route_path('repo_commit',repo_name=diffset.repo_name,commit_id=commit.raw_id)}">${('r%s:%s' % (commit.idx,h.short_id(commit.raw_id)))}</a>
             </div>
         </div>
     % endif
 
     <div id="todo-box">
         % if hasattr(c, 'unresolved_comments') and c.unresolved_comments:
             % for co in c.unresolved_comments:
                 <a class="permalink" href="#comment-${co.comment_id}"
                    onclick="Rhodecode.comments.scrollToComment($('#comment-${co.comment_id}'))">
                     <i class="icon-flag-filled-red"></i>
                     ${co.comment_id}</a>${('' if loop.last else ',')}
             % endfor
         % endif
     </div>
     %if diffset.has_hidden_changes:
         <p class="empty_data">${_('Some changes may be hidden')}</p>
     %elif not diffset.files:
         <p class="empty_data">${_('No files')}</p>
     %endif
 
     <div class="filediffs">
 
     ## initial value could be marked as False later on
     <% over_lines_changed_limit = False %>
     %for i, filediff in enumerate(diffset.files):
 
         <%
         lines_changed = filediff.patch['stats']['added'] + filediff.patch['stats']['deleted']
         over_lines_changed_limit = lines_changed > lines_changed_limit
         %>
         ## anchor with support of sticky header
         <div class="anchor" id="a_${h.FID(filediff.raw_id, filediff.patch['filename'])}"></div>
 
         <input ${(collapse_all and 'checked' or '')} class="filediff-collapse-state collapse-${diffset_container_id}" id="filediff-collapse-${id(filediff)}" type="checkbox" onchange="updateSticky();">
         <div
             class="filediff"
             data-f-path="${filediff.patch['filename']}"
             data-anchor-id="${h.FID(filediff.raw_id, filediff.patch['filename'])}"
         >
         <label for="filediff-collapse-${id(filediff)}" class="filediff-heading">
             <%
                 file_comments = (get_inline_comments(inline_comments, filediff.patch['filename']) or {}).values()
                 total_file_comments = [_c for _c in h.itertools.chain.from_iterable(file_comments) if not _c.outdated]
             %>
             <div class="filediff-collapse-indicator icon-"></div>
             <span class="pill-group pull-right" >
                 <span class="pill" op="comments">
 
                     <i class="icon-comment"></i> ${len(total_file_comments)}
                 </span>
             </span>
             ${diff_ops(filediff)}
 
         </label>
 
         ${diff_menu(filediff, use_comments=use_comments)}
         <table data-f-path="${filediff.patch['filename']}" data-anchor-id="${h.FID(filediff.raw_id, filediff.patch['filename'])}" class="code-visible-block cb cb-diff-${c.user_session_attrs["diffmode"]} code-highlight ${(over_lines_changed_limit and 'cb-collapsed' or '')}">
 
         ## new/deleted/empty content case
         % if not filediff.hunks:
             ## Comment container, on "fakes" hunk that contains all data to render comments
             ${render_hunk_lines(filediff, c.user_session_attrs["diffmode"], filediff.hunk_ops, use_comments=use_comments, inline_comments=inline_comments, active_pattern_entries=active_pattern_entries)}
         % endif
 
         %if filediff.limited_diff:
                 <tr class="cb-warning cb-collapser">
                     <td class="cb-text" ${(c.user_session_attrs["diffmode"] == 'unified' and 'colspan=4' or 'colspan=6')}>
                         ${_('The requested commit or file is too big and content was truncated.')} <a href="${h.current_route_path(request, fulldiff=1)}" onclick="return confirm('${_("Showing a big diff might take some time and resources, continue?")}')">${_('Show full diff')}</a>
                     </td>
                 </tr>
         %else:
             %if over_lines_changed_limit:
                 <tr class="cb-warning cb-collapser">
                     <td class="cb-text" ${(c.user_session_attrs["diffmode"] == 'unified' and 'colspan=4' or 'colspan=6')}>
                         ${_('This diff has been collapsed as it changes many lines, (%i lines changed)' % lines_changed)}
                         <a href="#" class="cb-expand"
                            onclick="$(this).closest('table').removeClass('cb-collapsed'); updateSticky(); return false;">${_('Show them')}
                         </a>
                         <a href="#" class="cb-collapse"
                            onclick="$(this).closest('table').addClass('cb-collapsed'); updateSticky(); return false;">${_('Hide them')}
                         </a>
                     </td>
                 </tr>
             %endif
         %endif
 
         % for hunk in filediff.hunks:
             <tr class="cb-hunk">
                 <td ${(c.user_session_attrs["diffmode"] == 'unified' and 'colspan=3' or '')}>
                     ## TODO: dan: add ajax loading of more context here
                     ## <a href="#">
                         <i class="icon-more"></i>
                     ## </a>
                 </td>
                 <td ${(c.user_session_attrs["diffmode"] == 'sideside' and 'colspan=5' or '')}>
                     @@
                     -${hunk.source_start},${hunk.source_length}
                     +${hunk.target_start},${hunk.target_length}
                     ${hunk.section_header}
                 </td>
             </tr>
+
             ${render_hunk_lines(filediff, c.user_session_attrs["diffmode"], hunk, use_comments=use_comments, inline_comments=inline_comments, active_pattern_entries=active_pattern_entries)}
         % endfor
 
         <% unmatched_comments = (inline_comments or {}).get(filediff.patch['filename'], {}) %>
 
         ## outdated comments that do not fit into currently displayed lines
         % for lineno, comments in unmatched_comments.items():
 
             %if c.user_session_attrs["diffmode"] == 'unified':
                 % if loop.index == 0:
                 <tr class="cb-hunk">
                     <td colspan="3"></td>
                     <td>
                         <div>
                         ${_('Unmatched/outdated inline comments below')}
                         </div>
                     </td>
                 </tr>
                 % endif
                 <tr class="cb-line">
                     <td class="cb-data cb-context"></td>
                     <td class="cb-lineno cb-context"></td>
                     <td class="cb-lineno cb-context"></td>
                     <td class="cb-content cb-context">
                         ${inline_comments_container(comments, active_pattern_entries=active_pattern_entries)}
                     </td>
                 </tr>
             %elif c.user_session_attrs["diffmode"] == 'sideside':
                 % if loop.index == 0:
                 <tr class="cb-comment-info">
                     <td colspan="2"></td>
                     <td class="cb-line">
                         <div>
                         ${_('Unmatched/outdated inline comments below')}
                         </div>
                     </td>
                     <td colspan="2"></td>
                     <td class="cb-line">
                         <div>
                         ${_('Unmatched/outdated comments below')}
                         </div>
                     </td>
                 </tr>
                 % endif
                 <tr class="cb-line">
                     <td class="cb-data cb-context"></td>
                     <td class="cb-lineno cb-context"></td>
                     <td class="cb-content cb-context">
                         % if lineno.startswith('o'):
                             ${inline_comments_container(comments, active_pattern_entries=active_pattern_entries)}
                         % endif
                     </td>
 
                     <td class="cb-data cb-context"></td>
                     <td class="cb-lineno cb-context"></td>
                     <td class="cb-content cb-context">
                         % if lineno.startswith('n'):
                             ${inline_comments_container(comments, active_pattern_entries=active_pattern_entries)}
                         % endif
                     </td>
                 </tr>
             %endif
 
         % endfor
 
             </table>
         </div>
     %endfor
 
     ## outdated comments that are made for a file that has been deleted
     % for filename, comments_dict in (deleted_files_comments or {}).items():
 
         <%
             display_state = 'display: none'
             open_comments_in_file = [x for x in comments_dict['comments'] if x.outdated is False]
             if open_comments_in_file:
                 display_state = ''
             fid = str(id(filename))
         %>
         <div class="filediffs filediff-outdated" style="${display_state}">
             <input ${(collapse_all and 'checked' or '')} class="filediff-collapse-state collapse-${diffset_container_id}" id="filediff-collapse-${id(filename)}" type="checkbox" onchange="updateSticky();">
             <div class="filediff" data-f-path="${filename}"  id="a_${h.FID(fid, filename)}">
                 <label for="filediff-collapse-${id(filename)}" class="filediff-heading">
                     <div class="filediff-collapse-indicator icon-"></div>
 
                     <span class="pill">
                         ## file was deleted
                         ${filename}
                     </span>
                     <span class="pill-group pull-left" >
                         ## file op, doesn't need translation
                         <span class="pill" op="removed">unresolved comments</span>
                     </span>
                     <a class="pill filediff-anchor" href="#a_${h.FID(fid, filename)}">¶</a>
                     <span class="pill-group pull-right">
                         <span class="pill" op="deleted">
                             % if comments_dict['stats'] >0:
                                 -${comments_dict['stats']}
                             % else:
                                  ${comments_dict['stats']}
                             % endif
                         </span>
                     </span>
                 </label>
 
                 <table class="cb cb-diff-${c.user_session_attrs["diffmode"]} code-highlight ${(over_lines_changed_limit and 'cb-collapsed' or '')}">
                     <tr>
                         % if c.user_session_attrs["diffmode"] == 'unified':
                         <td></td>
                         %endif
 
                         <td></td>
                         <td class="cb-text cb-${op_class(BIN_FILENODE)}" ${(c.user_session_attrs["diffmode"] == 'unified' and 'colspan=4' or 'colspan=5')}>
                         <strong>${_('This file was removed from diff during updates to this pull-request.')}</strong><br/>
                         ${_('There are still outdated/unresolved comments attached to it.')}
                         </td>
                     </tr>
                     %if c.user_session_attrs["diffmode"] == 'unified':
                     <tr class="cb-line">
                         <td class="cb-data cb-context"></td>
                         <td class="cb-lineno cb-context"></td>
                         <td class="cb-lineno cb-context"></td>
                         <td class="cb-content cb-context">
                             ${inline_comments_container(comments_dict['comments'], active_pattern_entries=active_pattern_entries)}
                         </td>
                     </tr>
                     %elif c.user_session_attrs["diffmode"] == 'sideside':
                     <tr class="cb-line">
                         <td class="cb-data cb-context"></td>
                         <td class="cb-lineno cb-context"></td>
                         <td class="cb-content cb-context"></td>
 
                         <td class="cb-data cb-context"></td>
                         <td class="cb-lineno cb-context"></td>
                         <td class="cb-content cb-context">
                             ${inline_comments_container(comments_dict['comments'], active_pattern_entries=active_pattern_entries)}
                         </td>
                     </tr>
                     %endif
                 </table>
             </div>
         </div>
     % endfor
 
 </div>
 </div>
 </%def>
 
 <%def name="diff_ops(filediff)">
 <%
 from rhodecode.lib.diffs import NEW_FILENODE, DEL_FILENODE, \
     MOD_FILENODE, RENAMED_FILENODE, CHMOD_FILENODE, BIN_FILENODE, COPIED_FILENODE
 %>
     <span class="pill">
         <i class="icon-file-text"></i>
         %if filediff.source_file_path and filediff.target_file_path:
             %if filediff.source_file_path != filediff.target_file_path:
                  ## file was renamed, or copied
                 %if RENAMED_FILENODE in filediff.patch['stats']['ops']:
                     ${filediff.target_file_path} ⬅ <del>${filediff.source_file_path}</del>
                     <% final_path = filediff.target_file_path %>
                 %elif COPIED_FILENODE in filediff.patch['stats']['ops']:
                     ${filediff.target_file_path} ⬅ ${filediff.source_file_path}
                     <% final_path = filediff.target_file_path %>
                 %endif
             %else:
                 ## file was modified
                 ${filediff.source_file_path}
                 <% final_path = filediff.source_file_path %>
             %endif
         %else:
             %if filediff.source_file_path:
                 ## file was deleted
                 ${filediff.source_file_path}
                 <% final_path = filediff.source_file_path %>
             %else:
                 ## file was added
                 ${filediff.target_file_path}
                 <% final_path = filediff.target_file_path %>
             %endif
         %endif
         <i style="color: #aaa" class="on-hover-icon icon-clipboard clipboard-action" data-clipboard-text="${final_path}" title="${_('Copy file path')}" onclick="return false;"></i>
     </span>
     ## anchor link
     <a class="pill filediff-anchor" href="#a_${h.FID(filediff.raw_id, filediff.patch['filename'])}">¶</a>
 
     <span class="pill-group pull-right">
 
         ## ops pills
         %if filediff.limited_diff:
         <span class="pill tooltip" op="limited" title="The stats for this diff are not complete">limited diff</span>
         %endif
 
         %if NEW_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="created">created</span>
             %if filediff['target_mode'].startswith('120'):
         <span class="pill" op="symlink">symlink</span>
             %else:
         <span class="pill" op="mode">${nice_mode(filediff['target_mode'])}</span>
             %endif
         %endif
 
         %if RENAMED_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="renamed">renamed</span>
         %endif
 
         %if COPIED_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="copied">copied</span>
         %endif
 
         %if DEL_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="removed">removed</span>
         %endif
 
         %if CHMOD_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="mode">
             ${nice_mode(filediff['source_mode'])} ➡ ${nice_mode(filediff['target_mode'])}
         </span>
         %endif
 
         %if BIN_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="binary">binary</span>
             %if MOD_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="modified">modified</span>
             %endif
         %endif
 
         <span class="pill" op="added">${('+' if filediff.patch['stats']['added'] else '')}${filediff.patch['stats']['added']}</span>
         <span class="pill" op="deleted">${((h.safe_int(filediff.patch['stats']['deleted']) or 0) * -1)}</span>
 
     </span>
 
 </%def>
 
 <%def name="nice_mode(filemode)">
     ${(filemode.startswith('100') and filemode[3:] or filemode)}
 </%def>
 
 <%def name="diff_menu(filediff, use_comments=False)">
     <div class="filediff-menu">
 
     %if filediff.diffset.source_ref:
 
     ## FILE BEFORE CHANGES
     %if filediff.operation in ['D', 'M']:
         <a
             class="tooltip"
             href="${h.route_path('repo_files',repo_name=filediff.diffset.target_repo_name,commit_id=filediff.diffset.source_ref,f_path=filediff.source_file_path)}"
             title="${h.tooltip(_('Show file at commit: %(commit_id)s') % {'commit_id': filediff.diffset.source_ref[:12]})}"
         >
             ${_('Show file before')}
         </a> |
     %else:
         <span
             class="tooltip"
             title="${h.tooltip(_('File not present at commit: %(commit_id)s') % {'commit_id': filediff.diffset.source_ref[:12]})}"
         >
             ${_('Show file before')}
         </span> |
     %endif
 
     ## FILE AFTER CHANGES
     %if filediff.operation in ['A', 'M']:
         <a
             class="tooltip"
             href="${h.route_path('repo_files',repo_name=filediff.diffset.source_repo_name,commit_id=filediff.diffset.target_ref,f_path=filediff.target_file_path)}"
             title="${h.tooltip(_('Show file at commit: %(commit_id)s') % {'commit_id': filediff.diffset.target_ref[:12]})}"
         >
             ${_('Show file after')}
         </a>
     %else:
         <span
             class="tooltip"
             title="${h.tooltip(_('File not present at commit: %(commit_id)s') % {'commit_id': filediff.diffset.target_ref[:12]})}"
             >
             ${_('Show file after')}
         </span>
     %endif
 
     % if use_comments:
     |
     <a href="#" onclick="return Rhodecode.comments.toggleComments(this);">
         <span class="show-comment-button">${_('Show comments')}</span><span class="hide-comment-button">${_('Hide comments')}</span>
     </a>
     % endif
 
     %endif
 
     </div>
 </%def>
 
 
 <%def name="inline_comments_container(comments, active_pattern_entries=None)">
 
 <div class="inline-comments">
     %for comment in comments:
         ${commentblock.comment_block(comment, inline=True, active_pattern_entries=active_pattern_entries)}
     %endfor
     % if comments and comments[-1].outdated:
     <span class="btn btn-secondary cb-comment-add-button comment-outdated}" style="display: none;}">
         ${_('Add another comment')}
     </span>
     % else:
     <span onclick="return Rhodecode.comments.createComment(this)" class="btn btn-secondary cb-comment-add-button">
         ${_('Add another comment')}
     </span>
     % endif
 
 </div>
 </%def>
 
 <%!
 
 def get_inline_comments(comments, filename):
     if hasattr(filename, 'unicode_path'):
         filename = filename.unicode_path
 
     if not isinstance(filename, (unicode, str)):
         return None
 
     if comments and filename in comments:
         return comments[filename]
 
     return None
 
 def get_comments_for(diff_type, comments, filename, line_version, line_number):
     if hasattr(filename, 'unicode_path'):
         filename = filename.unicode_path
 
     if not isinstance(filename, (unicode, str)):
         return None
 
     file_comments = get_inline_comments(comments, filename)
     if file_comments is None:
         return None
 
     line_key = '{}{}'.format(line_version, line_number) ## e.g o37, n12
     if line_key in file_comments:
         data = file_comments.pop(line_key)
         return data
 %>
 
 <%def name="render_hunk_lines_sideside(filediff, hunk, use_comments=False, inline_comments=None, active_pattern_entries=None)">
-    %for i, line in enumerate(hunk.sideside):
+
+    <% chunk_count = 1 %>
+    %for loop_obj, item in h.looper(hunk.sideside):
     <%
+    line = item
+    i = loop_obj.index
+    prev_line = loop_obj.previous
     old_line_anchor, new_line_anchor = None, None
 
     if line.original.lineno:
         old_line_anchor = diff_line_anchor(filediff.raw_id, hunk.source_file_path, line.original.lineno, 'o')
     if line.modified.lineno:
         new_line_anchor = diff_line_anchor(filediff.raw_id, hunk.target_file_path, line.modified.lineno, 'n')
+
+    line_action = line.modified.action or line.original.action
+    prev_line_action = prev_line and (prev_line.modified.action or prev_line.original.action)
     %>
 
     <tr class="cb-line">
         <td class="cb-data ${action_class(line.original.action)}"
             data-line-no="${line.original.lineno}"
             >
-            <div>
 
             <% line_old_comments = None %>
             %if line.original.get_comment_args:
                 <% line_old_comments = get_comments_for('side-by-side', inline_comments, *line.original.get_comment_args) %>
             %endif
             %if line_old_comments:
                 <% has_outdated = any([x.outdated for x in line_old_comments]) %>
                 % if has_outdated:
                     <i class="tooltip icon-comment-toggle" title="${_('comments including outdated: {}. Click here to display them.').format(len(line_old_comments))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
                 % else:
                     <i class="tooltip icon-comment" title="${_('comments: {}. Click to toggle them.').format(len(line_old_comments))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
                 % endif
             %endif
-            </div>
         </td>
         <td class="cb-lineno ${action_class(line.original.action)}"
             data-line-no="${line.original.lineno}"
             %if old_line_anchor:
             id="${old_line_anchor}"
             %endif
         >
             %if line.original.lineno:
             <a name="${old_line_anchor}" href="#${old_line_anchor}">${line.original.lineno}</a>
             %endif
         </td>
         <td class="cb-content ${action_class(line.original.action)}"
             data-line-no="o${line.original.lineno}"
             >
             %if use_comments and line.original.lineno:
             ${render_add_comment_button()}
             %endif
             <span class="cb-code"><span class="cb-action ${action_class(line.original.action)}"></span>${line.original.content or '' | n}</span>
 
             %if use_comments and line.original.lineno and line_old_comments:
                 ${inline_comments_container(line_old_comments, active_pattern_entries=active_pattern_entries)}
             %endif
 
         </td>
         <td class="cb-data ${action_class(line.modified.action)}"
             data-line-no="${line.modified.lineno}"
             >
             <div>
 
             %if line.modified.get_comment_args:
                 <% line_new_comments = get_comments_for('side-by-side', inline_comments, *line.modified.get_comment_args) %>
             %else:
                 <% line_new_comments = None%>
             %endif
             %if line_new_comments:
 
                 <% has_outdated = any([x.outdated for x in line_new_comments]) %>
                 % if has_outdated:
                     <i class="tooltip icon-comment-toggle" title="${_('comments including outdated: {}. Click here to display them.').format(len(line_new_comments))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
                 % else:
                     <i class="tooltip icon-comment" title="${_('comments: {}. Click to toggle them.').format(len(line_new_comments))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
                 % endif
             %endif
             </div>
         </td>
         <td class="cb-lineno ${action_class(line.modified.action)}"
             data-line-no="${line.modified.lineno}"
             %if new_line_anchor:
             id="${new_line_anchor}"
             %endif
             >
             %if line.modified.lineno:
                 <a name="${new_line_anchor}" href="#${new_line_anchor}">${line.modified.lineno}</a>
             %endif
         </td>
         <td class="cb-content ${action_class(line.modified.action)}"
             data-line-no="n${line.modified.lineno}"
             >
             %if use_comments and line.modified.lineno:
             ${render_add_comment_button()}
             %endif
             <span class="cb-code"><span class="cb-action ${action_class(line.modified.action)}"></span>${line.modified.content or '' | n}</span>
             %if use_comments and line.modified.lineno and line_new_comments:
             ${inline_comments_container(line_new_comments, active_pattern_entries=active_pattern_entries)}
             %endif
+                % if line_action in ['+', '-'] and prev_line_action not in ['+', '-']:
+                <div class="nav-chunk" style="visibility: hidden">
+                    <i class="icon-eye" title="viewing diff hunk-${hunk.index}-${chunk_count}"></i>
+                </div>
+                <% chunk_count +=1 %>
+                % endif
         </td>
     </tr>
     %endfor
 </%def>
 
 
 <%def name="render_hunk_lines_unified(filediff, hunk, use_comments=False,  inline_comments=None, active_pattern_entries=None)">
     %for old_line_no, new_line_no, action, content, comments_args in hunk.unified:
 
     <%
     old_line_anchor, new_line_anchor = None, None
     if old_line_no:
         old_line_anchor = diff_line_anchor(filediff.raw_id, hunk.source_file_path, old_line_no, 'o')
     if new_line_no:
         new_line_anchor = diff_line_anchor(filediff.raw_id, hunk.target_file_path, new_line_no, 'n')
     %>
     <tr class="cb-line">
         <td class="cb-data ${action_class(action)}">
             <div>
 
             %if comments_args:
                 <% comments = get_comments_for('unified', inline_comments, *comments_args) %>
             %else:
                 <% comments = None %>
             %endif
 
             % if comments:
                 <% has_outdated = any([x.outdated for x in comments]) %>
                 % if has_outdated:
                     <i class="tooltip icon-comment-toggle" title="${_('comments including outdated: {}. Click here to display them.').format(len(comments))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
                 % else:
                     <i class="tooltip icon-comment" title="${_('comments: {}. Click to toggle them.').format(len(comments))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
                 % endif
             % endif
             </div>
         </td>
         <td class="cb-lineno ${action_class(action)}"
             data-line-no="${old_line_no}"
             %if old_line_anchor:
             id="${old_line_anchor}"
             %endif
         >
             %if old_line_anchor:
             <a name="${old_line_anchor}" href="#${old_line_anchor}">${old_line_no}</a>
             %endif
         </td>
         <td class="cb-lineno ${action_class(action)}"
             data-line-no="${new_line_no}"
             %if new_line_anchor:
             id="${new_line_anchor}"
             %endif
         >
             %if new_line_anchor:
             <a name="${new_line_anchor}" href="#${new_line_anchor}">${new_line_no}</a>
             %endif
         </td>
         <td class="cb-content ${action_class(action)}"
             data-line-no="${(new_line_no and 'n' or 'o')}${(new_line_no or old_line_no)}"
             >
             %if use_comments:
             ${render_add_comment_button()}
             %endif
             <span class="cb-code"><span class="cb-action ${action_class(action)}"></span> ${content or '' | n}</span>
             %if use_comments and comments:
             ${inline_comments_container(comments, active_pattern_entries=active_pattern_entries)}
             %endif
         </td>
     </tr>
     %endfor
 </%def>
 
 
 <%def name="render_hunk_lines(filediff, diff_mode, hunk, use_comments, inline_comments, active_pattern_entries)">
     % if diff_mode == 'unified':
         ${render_hunk_lines_unified(filediff, hunk, use_comments=use_comments, inline_comments=inline_comments, active_pattern_entries=active_pattern_entries)}
     % elif diff_mode == 'sideside':
         ${render_hunk_lines_sideside(filediff, hunk, use_comments=use_comments, inline_comments=inline_comments, active_pattern_entries=active_pattern_entries)}
     % else:
         <tr class="cb-line">
             <td>unknown diff mode</td>
         </tr>
     % endif
 </%def>file changes
 
 
 <%def name="render_add_comment_button()">
 <button class="btn btn-small btn-primary cb-comment-box-opener" onclick="return Rhodecode.comments.createComment(this)">
     <span><i class="icon-comment"></i></span>
 </button>
 </%def>
 
 <%def name="render_diffset_menu(diffset, range_diff_on=None)">
     <% diffset_container_id = h.md5(diffset.target_ref) %>
 
     <div id="diff-file-sticky" class="diffset-menu clearinner">
         ## auto adjustable
         <div class="sidebar__inner">
             <div class="sidebar__bar">
             <div class="pull-right">
                 <div class="btn-group">
                     <a class="btn tooltip toggle-wide-diff" href="#toggle-wide-diff" onclick="toggleWideDiff(this); return false" title="${h.tooltip(_('Toggle wide diff'))}">
                     <i class="icon-wide-mode"></i>
                     </a>
                 </div>
                 <div class="btn-group">
 
                 <a
                   class="btn ${(c.user_session_attrs["diffmode"] == 'sideside' and 'btn-active')} tooltip"
                   title="${h.tooltip(_('View diff as side by side'))}"
                   href="${h.current_route_path(request, diffmode='sideside')}">
                     <span>${_('Side by Side')}</span>
                 </a>
 
                 <a
                   class="btn ${(c.user_session_attrs["diffmode"] == 'unified' and 'btn-active')} tooltip"
                   title="${h.tooltip(_('View diff as unified'))}" href="${h.current_route_path(request, diffmode='unified')}">
                     <span>${_('Unified')}</span>
                 </a>
 
                 % if range_diff_on is True:
                     <a
                       title="${_('Turn off: Show the diff as commit range')}"
                       class="btn btn-primary"
                       href="${h.current_route_path(request, **{"range-diff":"0"})}">
                         <span>${_('Range Diff')}</span>
                    </a>
                 % elif range_diff_on is False:
                     <a
                       title="${_('Show the diff as commit range')}"
                       class="btn"
                       href="${h.current_route_path(request, **{"range-diff":"1"})}">
                         <span>${_('Range Diff')}</span>
                    </a>
                 % endif
             </div>
                 <div class="btn-group">
 
                 <div class="pull-left">
                     ${h.hidden('diff_menu_{}'.format(diffset_container_id))}
                 </div>
 
                 </div>
         </div>
             <div class="pull-left">
             <div class="btn-group">
               <div class="pull-left">
                 ${h.hidden('file_filter_{}'.format(diffset_container_id))}
               </div>
 
             </div>
             </div>
         </div>
-        <div class="fpath-placeholder">
+        <div class="fpath-placeholder pull-left">
             <i class="icon-file-text"></i>
             <strong class="fpath-placeholder-text">
             Context file:
             </strong>
         </div>
+        <div class="pull-right noselect">
+            <span id="diff_nav">Loading diff...:</span>
+            <span class="cursor-pointer" onclick="scrollToPrevChunk(); return false">
+                <i class="icon-angle-up"></i>
+            </span>
+            <span class="cursor-pointer" onclick="scrollToNextChunk(); return false">
+                <i class="icon-angle-down"></i>
+            </span>
+        </div>
         <div class="sidebar_inner_shadow"></div>
         </div>
     </div>
 
     % if diffset:
         %if diffset.limited_diff:
             <% file_placeholder = _ungettext('%(num)s file changed', '%(num)s files changed', diffset.changed_files) % {'num': diffset.changed_files} %>
         %else:
             <% file_placeholder = h.literal(_ungettext('%(num)s file changed: <span class="op-added">%(linesadd)s inserted</span>, <span class="op-deleted">%(linesdel)s deleted</span>', '%(num)s files changed: <span class="op-added">%(linesadd)s inserted</span>, <span class="op-deleted">%(linesdel)s deleted</span>',
             diffset.changed_files) % {'num': diffset.changed_files, 'linesadd': diffset.lines_added, 'linesdel': diffset.lines_deleted}) %>
 
         %endif
         ## case on range-diff placeholder needs to be updated
         % if range_diff_on is True:
             <% file_placeholder = _('Disabled on range diff') %>
         % endif
 
         <script type="text/javascript">
         var feedFilesOptions = function (query, initialData) {
             var data = {results: []};
             var isQuery = typeof query.term !== 'undefined';
 
             var section = _gettext('Changed files');
             var filteredData = [];
 
             //filter results
             $.each(initialData.results, function (idx, value) {
 
                 if (!isQuery || query.term.length === 0 || value.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
                     filteredData.push({
                         'id': this.id,
                         'text': this.text,
                         "ops": this.ops,
                     })
                 }
 
             });
 
             data.results = filteredData;
 
             query.callback(data);
         };
 
         var selectionFormatter = function(data, escapeMarkup) {
             var container = '<div class="filelist" style="padding-right:100px">{0}</div>';
             var tmpl = '<div><strong>{0}</strong></div>'.format(escapeMarkup(data['text']));
             var pill = '<div class="pill-group" style="position: absolute; top:7px; right: 0">' +
                         '<span class="pill" op="added">{0}</span>' +
                         '<span class="pill" op="deleted">{1}</span>' +
                        '</div>'
                     ;
             var added = data['ops']['added'];
             if (added === 0) {
                 // don't show +0
                 added = 0;
             } else {
                 added = '+' + added;
             }
 
             var deleted = -1*data['ops']['deleted'];
 
             tmpl += pill.format(added, deleted);
             return container.format(tmpl);
         };
         var formatFileResult = function(result, container, query, escapeMarkup) {
             return selectionFormatter(result, escapeMarkup);
         };
 
         var formatSelection = function (data, container) {
             return '${file_placeholder}'
         };
 
         if (window.preloadFileFilterData === undefined) {
             window.preloadFileFilterData = {}
         }
 
         preloadFileFilterData["${diffset_container_id}"] = {
             results: [
                 % for filediff in diffset.files:
                     {id:"a_${h.FID(filediff.raw_id, filediff.patch['filename'])}",
                      text:"${filediff.patch['filename']}",
                      ops:${h.json.dumps(filediff.patch['stats'])|n}}${('' if loop.last else ',')}
                 % endfor
             ]
         };
 
         var diffFileFilterId = "#file_filter_" + "${diffset_container_id}";
         var diffFileFilter = $(diffFileFilterId).select2({
             'dropdownAutoWidth': true,
             'width': 'auto',
 
             containerCssClass: "drop-menu",
             dropdownCssClass: "drop-menu-dropdown",
             data: preloadFileFilterData["${diffset_container_id}"],
             query: function(query) {
                 feedFilesOptions(query, preloadFileFilterData["${diffset_container_id}"]);
             },
             initSelection: function(element, callback) {
               callback({'init': true});
             },
             formatResult: formatFileResult,
             formatSelection: formatSelection
         });
 
         % if range_diff_on is True:
             diffFileFilter.select2("enable", false);
         % endif
 
         $(diffFileFilterId).on('select2-selecting', function (e) {
             var idSelector = e.choice.id;
 
             // expand the container if we quick-select the field
             $('#'+idSelector).next().prop('checked', false);
             // hide the mast as we later do preventDefault()
             $("#select2-drop-mask").click();
 
             window.location.hash = '#'+idSelector;
             updateSticky();
 
             e.preventDefault();
         });
 
+        getCurrentChunk = function () {
+
+            var chunksAll = $('.nav-chunk').filter(function () {
+                return $(this).parents('.filediff').prev().get(0).checked !== true
+            })
+            var chunkSelected = $('.nav-chunk.selected');
+            var initial = false;
+
+            if (chunkSelected.length === 0) {
+                // no initial chunk selected, we pick first
+                chunkSelected = $(chunksAll.get(0));
+                var initial = true;
+            }
+
+            return {
+                'all': chunksAll,
+                'selected': chunkSelected,
+                'initial': initial,
+            }
+        }
+
+        animateDiffNavText = function () {
+            var $diffNav = $('#diff_nav')
+
+            var callback = function () {
+                $diffNav.animate({'opacity': 1.00}, 200)
+            };
+            $diffNav.animate({'opacity': 0.15}, 200, callback);
+        }
+
+        scrollToChunk = function (moveBy) {
+            var chunk = getCurrentChunk();
+            var all = chunk.all
+            var selected = chunk.selected
+
+            var curPos = all.index(selected);
+            var newPos = curPos;
+            if (!chunk.initial) {
+                var newPos = curPos + moveBy;
+            }
+
+            var curElem = all.get(newPos);
+
+            if (curElem === undefined) {
+                // end or back
+                $('#diff_nav').html('No next diff element.')
+                animateDiffNavText()
+                return
+            } else if (newPos < 0) {
+                $('#diff_nav').html('No previous diff element.')
+                animateDiffNavText()
+                return
+            } else {
+                $('#diff_nav').html('Diff navigation:')
+            }
+
+            curElem = $(curElem)
+            var offset = 100;
+            $(window).scrollTop(curElem.position().top - offset);
+
+            //clear selection
+            all.removeClass('selected')
+            curElem.addClass('selected')
+        }
+
+        scrollToPrevChunk = function () {
+            scrollToChunk(-1)
+        }
+        scrollToNextChunk = function () {
+            scrollToChunk(1)
+        }
+
         </script>
     % endif
 
     <script type="text/javascript">
+        $('#diff_nav').html('loading diff...') // wait until whole page is loaded
+
         $(document).ready(function () {
 
             var contextPrefix = _gettext('Context file: ');
             ## sticky sidebar
             var sidebarElement = document.getElementById('diff-file-sticky');
             sidebar = new StickySidebar(sidebarElement, {
                   topSpacing: 0,
                   bottomSpacing: 0,
                   innerWrapperSelector: '.sidebar__inner'
             });
             sidebarElement.addEventListener('affixed.static.stickySidebar', function () {
                 // reset our file so it's not holding new value
                 $('.fpath-placeholder-text').html(contextPrefix + ' - ')
             });
 
             updateSticky = function () {
                 sidebar.updateSticky();
                 Waypoint.refreshAll();
             };
 
             var animateText = function (fPath, anchorId) {
                 fPath = Select2.util.escapeMarkup(fPath);
                 $('.fpath-placeholder-text').html(contextPrefix + '<a href="#a_' + anchorId + '">' + fPath + '</a>')
             };
 
             ## dynamic file waypoints
             var setFPathInfo = function(fPath, anchorId){
                 animateText(fPath, anchorId)
             };
 
             var codeBlock = $('.filediff');
 
             // forward waypoint
             codeBlock.waypoint(
                 function(direction) {
                     if (direction === "down"){
                         setFPathInfo($(this.element).data('fPath'), $(this.element).data('anchorId'))
                     }
                 }, {
                     offset: function () {
                         return 70;
                     },
                     context: '.fpath-placeholder'
                 }
             );
 
             // backward waypoint
             codeBlock.waypoint(
                 function(direction) {
                     if (direction === "up"){
                         setFPathInfo($(this.element).data('fPath'), $(this.element).data('anchorId'))
                     }
                 }, {
                     offset: function () {
                         return -this.element.clientHeight + 90;
                     },
                     context: '.fpath-placeholder'
                 }
             );
 
             toggleWideDiff = function (el) {
                 updateSticky();
                 var wide = Rhodecode.comments.toggleWideMode(this);
                 storeUserSessionAttr('rc_user_session_attr.wide_diff_mode', wide);
                 if (wide === true) {
                     $(el).addClass('btn-active');
                 } else {
                     $(el).removeClass('btn-active');
                 }
                 return null;
             };
 
             var preloadDiffMenuData = {
                 results: [
 
                     ## Whitespace change
                     % if request.GET.get('ignorews', '') == '1':
                     {
                         id: 2,
                         text: _gettext('Show whitespace changes'),
                         action: function () {},
                         url: "${h.current_route_path(request, ignorews=0)|n}"
                     },
                     % else:
                     {
                         id: 2,
                         text: _gettext('Hide whitespace changes'),
                         action: function () {},
                         url: "${h.current_route_path(request, ignorews=1)|n}"
                     },
                     % endif
 
                     ## FULL CONTEXT
                     % if request.GET.get('fullcontext', '') == '1':
                     {
                         id: 3,
                         text: _gettext('Hide full context diff'),
                         action: function () {},
                         url: "${h.current_route_path(request, fullcontext=0)|n}"
                     },
                     % else:
                     {
                         id: 3,
                         text: _gettext('Show full context diff'),
                         action: function () {},
                         url: "${h.current_route_path(request, fullcontext=1)|n}"
                     },
                     % endif
 
                 ]
             };
 
             var diffMenuId = "#diff_menu_" + "${diffset_container_id}";
             $(diffMenuId).select2({
                 minimumResultsForSearch: -1,
                 containerCssClass: "drop-menu-no-width",
                 dropdownCssClass: "drop-menu-dropdown",
                 dropdownAutoWidth: true,
                 data: preloadDiffMenuData,
                 placeholder: "${_('...')}",
             });
             $(diffMenuId).on('select2-selecting', function (e) {
                 e.choice.action();
                 if (e.choice.url !== null) {
                     window.location = e.choice.url
                 }
             });
             toggleExpand = function (el, diffsetEl) {
                 var el = $(el);
                 if (el.hasClass('collapsed')) {
                     $('.filediff-collapse-state.collapse-{0}'.format(diffsetEl)).prop('checked', false);
                     el.removeClass('collapsed');
                     el.html(
                         '<i class="icon-minus-squared-alt icon-no-margin"></i>' +
                         _gettext('Collapse all files'));
                 }
                 else {
                     $('.filediff-collapse-state.collapse-{0}'.format(diffsetEl)).prop('checked', true);
                     el.addClass('collapsed');
                     el.html(
                         '<i class="icon-plus-squared-alt icon-no-margin"></i>' +
                         _gettext('Expand all files'));
                 }
                 updateSticky()
             };
 
             toggleCommitExpand = function (el) {
                 var $el = $(el);
                 var commits = $el.data('toggleCommitsCnt');
                 var collapseMsg = _ngettext('Collapse {0} commit', 'Collapse {0} commits', commits).format(commits);
                 var expandMsg = _ngettext('Expand {0} commit', 'Expand {0} commits', commits).format(commits);
 
                 if ($el.hasClass('collapsed')) {
                     $('.compare_select').show();
                     $('.compare_select_hidden').hide();
 
                     $el.removeClass('collapsed');
                     $el.html(
                         '<i class="icon-minus-squared-alt icon-no-margin"></i>' +
                        collapseMsg);
                 }
                 else {
                     $('.compare_select').hide();
                     $('.compare_select_hidden').show();
                     $el.addClass('collapsed');
                     $el.html(
                         '<i class="icon-plus-squared-alt icon-no-margin"></i>' +
                         expandMsg);
                 }
                 updateSticky();
             };
 
             // get stored diff mode and pre-enable it
             if (templateContext.session_attrs.wide_diff_mode === "true") {
                 Rhodecode.comments.toggleWideMode(null);
                 $('.toggle-wide-diff').addClass('btn-active');
                 updateSticky();
             }
+
+            // DIFF NAV //
+
+            // element to detect scroll direction of
+            var $window = $(window);
+
+            // initialize last scroll position
+            var lastScrollY = $window.scrollTop();
+
+            $window.on('resize scrollstop', {latency: 350}, function () {
+                var visibleChunks = $('.nav-chunk').withinviewport({top: 75});
+
+                // get current scroll position
+                var currentScrollY = $window.scrollTop();
+
+                // determine current scroll direction
+                if (currentScrollY > lastScrollY) {
+                    var y = 'down'
+                } else if (currentScrollY !== lastScrollY) {
+                    var y = 'up';
+                }
+
+                var pos = -1; // by default we use last element in viewport
+                if (y === 'down') {
+                    pos = -1;
+                } else if (y === 'up') {
+                    pos = 0;
+                }
+
+                if (visibleChunks.length > 0) {
+                    $('.nav-chunk').removeClass('selected');
+                    $(visibleChunks.get(pos)).addClass('selected');
+                }
+
+                // update last scroll position to current position
+                lastScrollY = currentScrollY;
+
+            });
+            $('#diff_nav').html('Diff navigation:')
+
         });
     </script>
 
 </%def>