diffs: added handy quick file selector in diffs views.

rhodecode/public/css/code-block.less

@@ -1,1152 +1,1167 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-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
 
 div.comment:target {
     border-left: 6px solid @comment-highlight-color !important;
     padding-left: 3px;
     margin-left: -9px;
 }
 
 //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.
     margin-top: @padding;
 
     overflow: auto;
     padding: 0px;
     border: @border-thickness solid @grey5;
     background: @grey6;
     .border-radius(@border-radius);
 
     #remove_gist {
         float: right;
     }
 
     .gist_url {
         padding: 0px 0px 10px 0px;
     }
 
     .author {
         clear: both;
         vertical-align: middle;
         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: @padding;
         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: 100%;
         }
     }
 }
 
 .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: "Lucida Console",Monaco,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 {
     .hll { background-color: #ffffcc }
     .c { color: #408080; font-style: italic } /* Comment */
     .err, .codehilite .err { border: @border-thickness solid #FF0000 } /* Error */
     .k { color: #008000; font-weight: bold } /* Keyword */
     .o { color: #666666 } /* Operator */
     .cm { color: #408080; font-style: italic } /* Comment.Multiline */
     .cp { color: #BC7A00 } /* Comment.Preproc */
     .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: #808080 } /* 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: #0040D0 } /* 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 */
     .mf { color: #666666 } /* Literal.Number.Float */
     .mh { color: #666666 } /* Literal.Number.Hex */
     .mi { color: #666666 } /* Literal.Number.Integer */
     .mo { color: #666666 } /* Literal.Number.Oct */
     .sb { color: #BA2121 } /* Literal.String.Backtick */
     .sc { color: #BA2121 } /* Literal.String.Char */
     .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 */
     .vc { color: #19177C } /* Name.Variable.Class */
     .vg { color: #19177C } /* Name.Variable.Global */
     .vi { color: #19177C } /* Name.Variable.Instance */
     .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 {
             width: 0;
             height: 0;
             border-style: solid;
             border-width: 4.5px 0 4.5px 9.3px;
             border-color: transparent transparent transparent  #aaa;
             margin: 6px 0px;
         }
         .filediff-menu {
             display: none;
         }
         margin: 10px 0 0 0;
     }
 
     &+ .filediff { /* file diff is expanded */
         .filediff-collapse-indicator {
             width: 0;
             height: 0;
             border-style: solid;
             border-width: 9.3px 4.5px 0 4.5px;
             border-color: #aaa transparent transparent transparent;
             margin: 6px 0px;
 
         }
         .filediff-menu {
             display: block;
         }
         margin: 10px 0;
         &:nth-child(2) {
             margin: 0;
         }
     }
 }
 .cs_files {
     clear: both;
 }
 
 .diffset-menu {
     margin-bottom: 20px;
 }
 .diffset {
     margin: 20px 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;
         &: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;
         }
     }
 }
 
 /* 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;
     }
     .filediff-anchor {
         visibility: hidden;
     }
     &:hover {
         .filediff-anchor {
             visibility: visible;
         }
     }
 
     .filediff-collapse-indicator {
         border-style: solid;
         float: left;
         margin: 4px 0px 0 0;
         cursor: pointer;
     }
 
     .filediff-heading {
         background: @grey7;
         cursor: pointer;
         display: block;
         padding: 5px 10px;
     }
     .filediff-heading:after {
         content: "";
         display: table;
         clear: both;
     }
     .filediff-heading:hover {
         background: #e1e9f4 !important;
     }
 
     .filediff-menu {
         float: right;
         text-align: right;
         padding: 5px 5px 5px 0px;
 
         &> 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 ****/
+
+}
+
+
+
+.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;
         }
     }
-
-    .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 ****/
-
-}
 
 .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;
         }
     }
 
     /* 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: @font-family-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: @font-family-monospace;
                 word-break: break-all;
                 .nonl {
                     color: @color5;
                 }
             }
 
             &> 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: @font-family-monospace;
 
             .icon-comment {
                 cursor: pointer;
             }
             &.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: @font-family-monospace;
             user-select: none;
 
             a::before {
                 content: attr(data-line-no);
             }
             &.cb-line-selected a {
                 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/changeset/changeset.mako

@@ -1,354 +1,354 b''
 ## -*- coding: utf-8 -*-
 
 <%inherit file="/base/base.mako"/>
 <%namespace name="diff_block" file="/changeset/diff_block.mako"/>
 
 <%def name="title()">
     ${_('%s Commit') % c.repo_name} - ${h.show_id(c.commit)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='changelog')}
 </%def>
 
 <%def name="main()">
 <script>
     // TODO: marcink switch this to pyroutes
     AJAX_COMMENT_DELETE_URL = "${h.route_path('repo_commit_comment_delete',repo_name=c.repo_name,commit_id=c.commit.raw_id,comment_id='__COMMENT_ID__')}";
     templateContext.commit_data.commit_id = "${c.commit.raw_id}";
 </script>
 <div class="box">
     <div class="title">
         ${self.repo_page_title(c.rhodecode_db_repo)}
     </div>
 
   <div id="changeset_compare_view_content"  class="summary changeset">
     <div class="summary-detail">
       <div class="summary-detail-header">
           <div class="breadcrumbs files_location">
             <h4>
             ${_('Commit')}
 
             <code>
                 ${h.show_id(c.commit)}
             </code>
             <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.commit.raw_id}" title="${_('Copy the full commit id')}"></i>
             % if hasattr(c.commit, 'phase'):
                   <span class="tag phase-${c.commit.phase} tooltip" title="${_('Commit phase')}">${c.commit.phase}</span>
             % endif
 
             ## obsolete commits
             % if hasattr(c.commit, 'obsolete'):
               % if c.commit.obsolete:
                   <span class="tag obsolete-${c.commit.obsolete} tooltip" title="${_('Evolve State')}">${_('obsolete')}</span>
               % endif
             % endif
 
             ## hidden commits
             % if hasattr(c.commit, 'hidden'):
               % if c.commit.hidden:
                   <span class="tag hidden-${c.commit.hidden} tooltip" title="${_('Evolve State')}">${_('hidden')}</span>
               % endif
             % endif
             </h4>
 
           </div>
           <div class="pull-right">
               <span id="parent_link">
                 <a href="#parentCommit" title="${_('Parent Commit')}"><i class="icon-left icon-no-margin"></i>${_('parent')}</a>
               </span>
                |
               <span id="child_link">
                 <a href="#childCommit" title="${_('Child Commit')}">${_('child')}<i class="icon-right icon-no-margin"></i></a>
               </span>
           </div>
       </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Description')}:
         </div>
         <div class="right-content">
           <div id="trimmed_message_box" class="commit">${h.urlify_commit_message(c.commit.message,c.repo_name)}</div>
           <div id="message_expand" style="display:none;">
             ${_('Expand')}
           </div>
         </div>
       </div>
 
       %if c.statuses:
       <div class="fieldset">
         <div class="left-label">
           ${_('Commit status')}:
         </div>
         <div class="right-content">
           <div class="changeset-status-ico">
             <div class="${'flag_status %s' % c.statuses[0]} pull-left"></div>
           </div>
           <div title="${_('Commit status')}" class="changeset-status-lbl">[${h.commit_status_lbl(c.statuses[0])}]</div>
         </div>
       </div>
       %endif
 
       <div class="fieldset">
         <div class="left-label">
           ${_('References')}:
         </div>
         <div class="right-content">
           <div class="tags">
 
             %if c.commit.merge:
               <span class="mergetag tag">
                <i class="icon-merge"></i>${_('merge')}
               </span>
             %endif
 
             %if h.is_hg(c.rhodecode_repo):
               %for book in c.commit.bookmarks:
               <span class="booktag tag" title="${h.tooltip(_('Bookmark %s') % book)}">
                 <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=book))}"><i class="icon-bookmark"></i>${h.shorter(book)}</a>
               </span>
               %endfor
             %endif
 
             %for tag in c.commit.tags:
              <span class="tagtag tag"  title="${h.tooltip(_('Tag %s') % tag)}">
               <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=tag))}"><i class="icon-tag"></i>${tag}</a>
              </span>
             %endfor
 
             %if c.commit.branch:
               <span class="branchtag tag" title="${h.tooltip(_('Branch %s') % c.commit.branch)}">
                 <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=c.commit.branch))}"><i class="icon-code-fork"></i>${h.shorter(c.commit.branch)}</a>
               </span>
             %endif
             </div>
           </div>
         </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Diff options')}:
         </div>
         <div class="right-content">
             <div class="diff-actions">
               <a href="${h.route_path('repo_commit_raw',repo_name=c.repo_name,commit_id=c.commit.raw_id)}"  class="tooltip" title="${h.tooltip(_('Raw diff'))}">
                 ${_('Raw Diff')}
               </a>
                |
               <a href="${h.route_path('repo_commit_patch',repo_name=c.repo_name,commit_id=c.commit.raw_id)}"  class="tooltip" title="${h.tooltip(_('Patch diff'))}">
                 ${_('Patch Diff')}
               </a>
                |
               <a href="${h.route_path('repo_commit_download',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(diff='download'))}" class="tooltip" title="${h.tooltip(_('Download diff'))}">
                 ${_('Download Diff')}
               </a>
                |
               ${c.ignorews_url(request)}
                |
               ${c.context_url(request)}
             </div>
         </div>
       </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Comments')}:
         </div>
         <div class="right-content">
             <div class="comments-number">
                 %if c.comments:
                     <a href="#comments">${_ungettext("%d Commit comment", "%d Commit comments", len(c.comments)) % len(c.comments)}</a>,
                 %else:
                     ${_ungettext("%d Commit comment", "%d Commit comments", len(c.comments)) % len(c.comments)}
                 %endif
                 %if c.inline_cnt:
                     <a href="#" onclick="return Rhodecode.comments.nextComment();" id="inline-comments-counter">${_ungettext("%d Inline Comment", "%d Inline Comments", c.inline_cnt) % c.inline_cnt}</a>
                 %else:
                     ${_ungettext("%d Inline Comment", "%d Inline Comments", c.inline_cnt) % c.inline_cnt}
                 %endif
             </div>
         </div>
       </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Unresolved TODOs')}:
         </div>
         <div class="right-content">
             <div class="comments-number">
                 % if 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}'))"> #${co.comment_id}</a>${'' if loop.last else ','}
                     % endfor
                 % else:
                     ${_('There are no unresolved TODOs')}
                 % endif
             </div>
         </div>
       </div>
 
     </div> <!-- end summary-detail -->
 
     <div id="commit-stats" class="sidebar-right">
       <div class="summary-detail-header">
         <h4 class="item">
           ${_('Author')}
         </h4>
       </div>
         <div class="sidebar-right-content">
             ${self.gravatar_with_user(c.commit.author)}
             <div class="user-inline-data">- ${h.age_component(c.commit.date)}</div>
         </div>
     </div><!-- end sidebar -->
   </div> <!-- end summary -->
   <div class="cs_files">
     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
-    ${cbdiffs.render_diffset_menu()}
+    ${cbdiffs.render_diffset_menu(c.changes[c.commit.raw_id])}
     ${cbdiffs.render_diffset(
       c.changes[c.commit.raw_id], commit=c.commit, use_comments=True,inline_comments=c.inline_comments )}
   </div>
 
     ## template for inline comment form
     <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
 
     ## render comments
     ${comment.generate_comments(c.comments)}
 
     ## main comment form and it status
     ${comment.comments(h.route_path('repo_commit_comment_create', repo_name=c.repo_name, commit_id=c.commit.raw_id),
                        h.commit_status(c.rhodecode_db_repo, c.commit.raw_id))}
 </div>
 
     ## FORM FOR MAKING JS ACTION AS CHANGESET COMMENTS
     <script type="text/javascript">
 
       $(document).ready(function() {
 
           var boxmax = parseInt($('#trimmed_message_box').css('max-height'), 10);
           if($('#trimmed_message_box').height() === boxmax){
               $('#message_expand').show();
           }
 
           $('#message_expand').on('click', function(e){
               $('#trimmed_message_box').css('max-height', 'none');
               $(this).hide();
           });
 
           $('.show-inline-comments').on('click', function(e){
               var boxid = $(this).attr('data-comment-id');
               var button = $(this);
 
               if(button.hasClass("comments-visible")) {
                 $('#{0} .inline-comments'.format(boxid)).each(function(index){
                   $(this).hide();
                 });
                 button.removeClass("comments-visible");
               } else {
                 $('#{0} .inline-comments'.format(boxid)).each(function(index){
                   $(this).show();
                 });
                 button.addClass("comments-visible");
               }
           });
 
 
           // next links
           $('#child_link').on('click', function(e){
               // fetch via ajax what is going to be the next link, if we have
               // >1 links show them to user to choose
               if(!$('#child_link').hasClass('disabled')){
                   $.ajax({
                     url: '${h.route_path('repo_commit_children',repo_name=c.repo_name, commit_id=c.commit.raw_id)}',
                     success: function(data) {
                       if(data.results.length === 0){
                           $('#child_link').html("${_('No Child Commits')}").addClass('disabled');
                       }
                       if(data.results.length === 1){
                           var commit = data.results[0];
                           window.location = pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': commit.raw_id});
                       }
                       else if(data.results.length === 2){
                           $('#child_link').addClass('disabled');
                           $('#child_link').addClass('double');
                           var _html = '';
                           _html +='<a title="__title__" href="__url__">__rev__</a> '
                                   .replace('__rev__','r{0}:{1}'.format(data.results[0].revision, data.results[0].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[0].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[0].raw_id}));
                           _html +=' | ';
                           _html +='<a title="__title__" href="__url__">__rev__</a> '
                                   .replace('__rev__','r{0}:{1}'.format(data.results[1].revision, data.results[1].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[1].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[1].raw_id}));
                           $('#child_link').html(_html);
                       }
                     }
                   });
                   e.preventDefault();
               }
           });
 
           // prev links
           $('#parent_link').on('click', function(e){
               // fetch via ajax what is going to be the next link, if we have
               // >1 links show them to user to choose
               if(!$('#parent_link').hasClass('disabled')){
                   $.ajax({
                     url: '${h.route_path("repo_commit_parents",repo_name=c.repo_name, commit_id=c.commit.raw_id)}',
                     success: function(data) {
                       if(data.results.length === 0){
                           $('#parent_link').html('${_('No Parent Commits')}').addClass('disabled');
                       }
                       if(data.results.length === 1){
                           var commit = data.results[0];
                           window.location = pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': commit.raw_id});
                       }
                       else if(data.results.length === 2){
                           $('#parent_link').addClass('disabled');
                           $('#parent_link').addClass('double');
                           var _html = '';
                           _html +='<a title="__title__" href="__url__">Parent __rev__</a>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[0].revision, data.results[0].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[0].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[0].raw_id}));
                           _html +=' | ';
                           _html +='<a title="__title__" href="__url__">Parent __rev__</a>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[1].revision, data.results[1].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[1].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[1].raw_id}));
                           $('#parent_link').html(_html);
                       }
                     }
                   });
                   e.preventDefault();
               }
           });
 
           if (location.hash) {
             var result = splitDelimitedHash(location.hash);
             var line = $('html').find(result.loc);
               if (line.length > 0){
                   offsetScroll(line, 70);
               }
           }
 
           // browse tree @ revision
           $('#files_link').on('click', function(e){
               window.location = '${h.route_path('repo_files:default_path',repo_name=c.repo_name, commit_id=c.commit.raw_id)}';
               e.preventDefault();
           });
 
           // inject comments into their proper positions
           var file_comments = $('.inline-comment-placeholder');
       })
     </script>
 
 </%def>

rhodecode/templates/changeset/changeset_range.mako

@@ -1,131 +1,131 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('%s Commits') % c.repo_name} -
-    r${c.commit_ranges[0].revision}:${h.short_id(c.commit_ranges[0].raw_id)}
+    r${c.commit_ranges[0].idx}:${h.short_id(c.commit_ranges[0].raw_id)}
     ...
-    r${c.commit_ranges[-1].revision}:${h.short_id(c.commit_ranges[-1].raw_id)}
+    r${c.commit_ranges[-1].idx}:${h.short_id(c.commit_ranges[-1].raw_id)}
     ${_ungettext('(%s commit)','(%s commits)', len(c.commit_ranges)) % len(c.commit_ranges)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${_('Commits')} -
-    r${c.commit_ranges[0].revision}:${h.short_id(c.commit_ranges[0].raw_id)}
+    r${c.commit_ranges[0].idx}:${h.short_id(c.commit_ranges[0].raw_id)}
     ...
-    r${c.commit_ranges[-1].revision}:${h.short_id(c.commit_ranges[-1].raw_id)}
+    r${c.commit_ranges[-1].idx}:${h.short_id(c.commit_ranges[-1].raw_id)}
     ${_ungettext('(%s commit)','(%s commits)', len(c.commit_ranges)) % len(c.commit_ranges)}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='changelog')}
 </%def>
 
 <%def name="main()">
     <div class="summary-header">
       <div class="title">
           ${self.repo_page_title(c.rhodecode_db_repo)}
       </div>
     </div>
 
 
     <div class="summary changeset">
         <div class="summary-detail">
           <div class="summary-detail-header">
               <span class="breadcrumbs files_location">
                 <h4>
                     ${_('Commit Range')}
                     <code>
-                    r${c.commit_ranges[0].revision}:${h.short_id(c.commit_ranges[0].raw_id)}...r${c.commit_ranges[-1].revision}:${h.short_id(c.commit_ranges[-1].raw_id)}
+                    r${c.commit_ranges[0].idx}:${h.short_id(c.commit_ranges[0].raw_id)}...r${c.commit_ranges[-1].idx}:${h.short_id(c.commit_ranges[-1].raw_id)}
                     </code>
                 </h4>
               </span>
           </div>
 
           <div class="fieldset">
             <div class="left-label">
               ${_('Diff option')}:
             </div>
             <div class="right-content">
-              <div class="header-buttons">
+              <div class="btn btn-primary">
                 <a href="${h.route_path('repo_compare',
                 repo_name=c.repo_name,
                 source_ref_type='rev',
                 source_ref=getattr(c.commit_ranges[0].parents[0] if c.commit_ranges[0].parents else h.EmptyCommit(), 'raw_id'),
                 target_ref_type='rev',
                 target_ref=c.commit_ranges[-1].raw_id)}"
                 >
                     ${_('Show combined compare')}
                 </a>
               </div>
             </div>
           </div>
 
          <%doc>
          ##TODO(marcink): implement this and diff menus
           <div class="fieldset">
             <div class="left-label">
               ${_('Diff options')}:
             </div>
             <div class="right-content">
                 <div class="diff-actions">
                   <a href="${h.route_path('repo_commit_raw',repo_name=c.repo_name,commit_id='?')}"  class="tooltip" title="${h.tooltip(_('Raw diff'))}">
                     ${_('Raw Diff')}
                   </a>
                    |
                   <a href="${h.route_path('repo_commit_patch',repo_name=c.repo_name,commit_id='?')}"  class="tooltip" title="${h.tooltip(_('Patch diff'))}">
                     ${_('Patch Diff')}
                   </a>
                    |
                   <a href="${h.route_path('repo_commit_download',repo_name=c.repo_name,commit_id='?',_query=dict(diff='download'))}" class="tooltip" title="${h.tooltip(_('Download diff'))}">
                     ${_('Download Diff')}
                   </a>
                 </div>
             </div>
           </div>
         </%doc>
         </div> <!-- end summary-detail -->
 
     </div> <!-- end summary -->
 
     <div id="changeset_compare_view_content">
     <div class="pull-left">
       <div class="btn-group">
           <a
               class="btn"
               href="#"
               onclick="$('.compare_select').show();$('.compare_select_hidden').hide(); return false">
               ${_ungettext('Expand %s commit','Expand %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
           </a>
           <a
               class="btn"
               href="#"
               onclick="$('.compare_select').hide();$('.compare_select_hidden').show(); return false">
               ${_ungettext('Collapse %s commit','Collapse %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
           </a>
       </div>
     </div>
     ## Commit range generated below
     <%include file="../compare/compare_commits.mako"/>
     <div class="cs_files">
       <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
       <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
       <%namespace name="diff_block" file="/changeset/diff_block.mako"/>
       ${cbdiffs.render_diffset_menu()}
       %for commit in c.commit_ranges:
         ${cbdiffs.render_diffset(
             diffset=c.changes[commit.raw_id],
             collapse_when_files_over=5,
             commit=commit,
          )}
         %endfor
     </div>
   </div>
 </%def>

rhodecode/templates/codeblocks/diffs.mako

@@ -1,767 +1,870 b''
 <%namespace name="commentblock" file="/changeset/changeset_file_comment.mako"/>
 
 <%def name="diff_line_anchor(filename, line, type)"><%
 return '%s_%s_%i' % (h.safeid(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
 
 )">
 %if use_comments:
 <div id="cb-comments-inline-container-template" class="js-template">
   ${inline_comments_container([], inline_comments)}
 </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
 <%
 collapse_all = len(diffset.files) > collapse_when_files_over
 %>
 
 %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 class="diffset-heading ${diffset.limited_diff and 'diffset-heading-warning' or ''}">
         %if commit:
             <div class="pull-right">
                 <a class="btn tooltip" title="${h.tooltip(_('Browse Files at revision {}').format(commit.raw_id))}" href="${h.route_path('repo_files',repo_name=diffset.repo_name, commit_id=commit.raw_id, f_path='')}">
                     ${_('Browse Files')}
                 </a>
             </div>
         %endif
         <h2 class="clearinner">
+        ## invidual commit
         %if commit:
-            <a class="tooltip revision" title="${h.tooltip(commit.message)}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=commit.raw_id)}">${'r%s:%s' % (commit.revision,h.short_id(commit.raw_id))}</a> -
-            ${h.age_component(commit.date)} -
-        %endif
-
+            <a class="tooltip revision" title="${h.tooltip(commit.message)}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=commit.raw_id)}">${('r%s:%s' % (commit.idx,h.short_id(commit.raw_id)))}</a> -
+            ${h.age_component(commit.date)}
         %if diffset.limited_diff:
-            ${_('The requested commit is too big and content was truncated.')}
-
+                - ${_('The requested commit is too big and content was truncated.')}
             ${_ungettext('%(num)s file changed.', '%(num)s files changed.', diffset.changed_files) % {'num': diffset.changed_files}}
             <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>
+            % elif hasattr(c, 'commit_ranges') and len(c.commit_ranges) > 1:
+                ## compare diff, has no file-selector and we want to show stats anyway
+               ${_ungettext('{num} file changed: {linesadd} inserted, ''{linesdel} deleted',
+                            '{num} files changed: {linesadd} inserted, {linesdel} deleted', diffset.changed_files) \
+                            .format(num=diffset.changed_files, linesadd=diffset.lines_added, linesdel=diffset.lines_deleted)}
+            % endif
         %else:
-            ${_ungettext('%(num)s file changed: %(linesadd)s inserted, ''%(linesdel)s deleted',
-                        '%(num)s files changed: %(linesadd)s inserted, %(linesdel)s deleted', diffset.changed_files) % {'num': diffset.changed_files, 'linesadd': diffset.lines_added, 'linesdel': diffset.lines_deleted}}
+            ## pull requests/compare
+            ${_('File Changes')}
         %endif
 
         </h2>
     </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
         %>
 
         <input ${(collapse_all and 'checked' or '')} class="filediff-collapse-state" id="filediff-collapse-${id(filediff)}" type="checkbox">
         <div
             class="filediff"
             data-f-path="${filediff.patch['filename']}"
             id="a_${h.FID('', filediff.patch['filename'])}"
         >
 
         <label for="filediff-collapse-${id(filediff)}" class="filediff-heading">
             <div class="filediff-collapse-indicator"></div>
             ${diff_ops(filediff)}
         </label>
         ${diff_menu(filediff, use_comments=use_comments)}
         <table class="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(c.user_session_attrs["diffmode"], filediff.hunk_ops, use_comments=use_comments, inline_comments=inline_comments)}
         % 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 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'); return false;">${_('Show them')}
                             </a>
                             <a href="#" class="cb-collapse"
                                onclick="$(this).closest('table').addClass('cb-collapsed'); 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(c.user_session_attrs["diffmode"], hunk, use_comments=use_comments, inline_comments=inline_comments)}
         % 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 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, inline_comments)}
                     </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 inline comments below')}
                         </div>
                     </td>
                     <td colspan="2"></td>
                     <td class="cb-line">
                         <div>
                         ${_('Unmatched 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, inline_comments)}
                         % 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, inline_comments)}
                         % 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 = ''
         %>
         <div class="filediffs filediff-outdated" style="${display_state}">
             <input ${(collapse_all and 'checked' or '')} class="filediff-collapse-state" id="filediff-collapse-${id(filename)}" type="checkbox">
             <div class="filediff" data-f-path="${filename}"  id="a_${h.FID('', filename)}">
                 <label for="filediff-collapse-${id(filename)}" class="filediff-heading">
                     <div class="filediff-collapse-indicator"></div>
                     <span class="pill">
                         ## file was deleted
                         <strong>${filename}</strong>
                     </span>
                     <span class="pill-group" style="float: left">
                         ## file op, doesn't need translation
                         <span class="pill" op="removed">removed in this version</span>
                     </span>
                     <a class="pill filediff-anchor" href="#a_${h.FID('', filename)}">¶</a>
                     <span class="pill-group" style="float: right">
                         <span class="pill" op="deleted">-${comments_dict['stats']}</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')}>
                         ${_('File was deleted in this version. 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'], inline_comments)}
                         </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'], inline_comments)}
                         </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">
         %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']:
                     <strong>${filediff.target_file_path}</strong> ⬅ <del>${filediff.source_file_path}</del>
                     <% final_path = filediff.target_file_path %>
                 %elif COPIED_FILENODE in filediff.patch['stats']['ops']:
                     <strong>${filediff.target_file_path}</strong> ⬅ ${filediff.source_file_path}
                     <% final_path = filediff.target_file_path %>
                 %endif
             %else:
                 ## file was modified
                 <strong>${filediff.source_file_path}</strong>
                 <% final_path = filediff.source_file_path %>
             %endif
         %else:
             %if filediff.source_file_path:
                 ## file was deleted
                 <strong>${filediff.source_file_path}</strong>
                 <% final_path = filediff.source_file_path %>
             %else:
                 ## file was added
                 <strong>${filediff.target_file_path}</strong>
                 <% final_path = filediff.target_file_path %>
             %endif
         %endif
         <i style="color: #aaa" class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${final_path}" title="${_('Copy the full path')}" onclick="return false;"></i>
     </span>
     <span class="pill-group" style="float: left">
         %if filediff.limited_diff:
         <span class="pill tooltip" op="limited" title="The stats for this diff are not complete">limited diff</span>
         %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 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 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
     </span>
 
     <a class="pill filediff-anchor" href="#a_${h.FID('', filediff.patch['filename'])}">¶</a>
 
     <span class="pill-group" style="float: right">
         %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
         %if filediff.patch['stats']['added']:
         <span class="pill" op="added">+${filediff.patch['stats']['added']}</span>
         %endif
         %if filediff.patch['stats']['deleted']:
         <span class="pill" op="deleted">-${filediff.patch['stats']['deleted']}</span>
         %endif
     </span>
 
 </%def>
 
 <%def name="nice_mode(filemode)">
-    ${filemode.startswith('100') and filemode[3:] or 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:
     %if filediff.operation in ['D', 'M']:
         <a
             class="tooltip"
             href="${h.route_path('repo_files',repo_name=filediff.diffset.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 no longer present at commit: %(commit_id)s') % {'commit_id': filediff.diffset.source_ref[:12]})}"
         >
             ${_('Show file before')}
         </span> |
     %endif
     %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 no longer present at commit: %(commit_id)s') % {'commit_id': filediff.diffset.target_ref[:12]})}"
             >
                 ${_('Show file after')}
         </span> |
     %endif
         <a
             class="tooltip"
             title="${h.tooltip(_('Raw diff'))}"
             href="${h.route_path('repo_files_diff',repo_name=filediff.diffset.repo_name,f_path=filediff.target_file_path, _query=dict(diff2=filediff.diffset.target_ref,diff1=filediff.diffset.source_ref,diff='raw'))}"
         >
             ${_('Raw diff')}
         </a> |
         <a
             class="tooltip"
             title="${h.tooltip(_('Download diff'))}"
             href="${h.route_path('repo_files_diff',repo_name=filediff.diffset.repo_name,f_path=filediff.target_file_path, _query=dict(diff2=filediff.diffset.target_ref,diff1=filediff.diffset.source_ref,diff='download'))}"
         >
             ${_('Download diff')}
         </a>
         % if use_comments:
             |
         % endif
 
         ## TODO: dan: refactor ignorews_url and context_url into the diff renderer same as diffmode=unified/sideside. Also use ajax to load more context (by clicking hunks)
         %if hasattr(c, 'ignorews_url'):
         ${c.ignorews_url(request, h.FID('', filediff.patch['filename']))}
         %endif
         %if hasattr(c, 'context_url'):
         ${c.context_url(request, h.FID('', filediff.patch['filename']))}
         %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, inline_comments)">
 <div class="inline-comments">
     %for comment in comments:
         ${commentblock.comment_block(comment, inline=True)}
     %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_comments_for(diff_type, comments, filename, line_version, line_number):
     if hasattr(filename, 'unicode_path'):
         filename = filename.unicode_path
 
     if not isinstance(filename, basestring):
         return None
 
     line_key = '{}{}'.format(line_version, line_number) ## e.g o37, n12
 
     if comments and filename in comments:
         file_comments = comments[filename]
         if line_key in file_comments:
             data = file_comments.pop(line_key)
             return data
 %>
 
 <%def name="render_hunk_lines_sideside(hunk, use_comments=False, inline_comments=None)">
 
     %for i, line in enumerate(hunk.sideside):
     <%
     old_line_anchor, new_line_anchor = None, None
     if line.original.lineno:
         old_line_anchor = diff_line_anchor(hunk.source_file_path, line.original.lineno, 'o')
     if line.modified.lineno:
         new_line_anchor = diff_line_anchor(hunk.target_file_path, line.modified.lineno, 'n')
     %>
 
     <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 title="${_('comments including outdated')}:${len(line_old_comments)}" class="icon-comment_toggle" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
                 % else:
                     <i title="${_('comments')}: ${len(line_old_comments)}" class="icon-comment" 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">${line.original.action} ${line.original.content or '' | n}</span>
 
             %if use_comments and line.original.lineno and line_old_comments:
                 ${inline_comments_container(line_old_comments, inline_comments)}
             %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 title="${_('comments including outdated')}:${len(line_new_comments)}" class="icon-comment_toggle" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
                 % else:
                     <i title="${_('comments')}: ${len(line_new_comments)}" class="icon-comment" 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">${line.modified.action} ${line.modified.content or '' | n}</span>
             %if use_comments and line.modified.lineno and line_new_comments:
             ${inline_comments_container(line_new_comments, inline_comments)}
             %endif
         </td>
     </tr>
     %endfor
 </%def>
 
 
 <%def name="render_hunk_lines_unified(hunk, use_comments=False,  inline_comments=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(hunk.source_file_path, old_line_no, 'o')
     if new_line_no:
         new_line_anchor = diff_line_anchor(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 title="${_('comments including outdated')}:${len(comments)}" class="icon-comment_toggle" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
                 % else:
                     <i title="${_('comments')}: ${len(comments)}" class="icon-comment" 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}"
+            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">${action} ${content or '' | n}</span>
             %if use_comments and comments:
             ${inline_comments_container(comments, inline_comments)}
             %endif
         </td>
     </tr>
     %endfor
 </%def>
 
 
 <%def name="render_hunk_lines(diff_mode, hunk, use_comments, inline_comments)">
     % if diff_mode == 'unified':
         ${render_hunk_lines_unified(hunk, use_comments=use_comments, inline_comments=inline_comments)}
     % elif diff_mode == 'sideside':
         ${render_hunk_lines_sideside(hunk, use_comments=use_comments, inline_comments=inline_comments)}
     % else:
         <tr class="cb-line">
             <td>unknown diff mode</td>
         </tr>
     % endif
 </%def>
 
 
 <%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()">
+<%def name="render_diffset_menu(diffset=None)">
 
     <div class="diffset-menu clearinner">
         <div class="pull-right">
             <div class="btn-group">
 
                 <a
                   class="btn ${(c.user_session_attrs["diffmode"] == 'sideside' and 'btn-primary')} tooltip"
                   title="${h.tooltip(_('View 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-primary')} tooltip"
                   title="${h.tooltip(_('View unified'))}" href="${h.current_route_path(request, diffmode='unified')}">
                     <span>${_('Unified')}</span>
                 </a>
             </div>
         </div>
 
         <div class="pull-left">
           <div class="btn-group">
+              <div class="pull-left">
+              ${h.hidden('file_filter')}
+              </div>
               <a
                   class="btn"
                   href="#"
                   onclick="$('input[class=filediff-collapse-state]').prop('checked', false); return false">${_('Expand All Files')}</a>
               <a
                   class="btn"
                   href="#"
                   onclick="$('input[class=filediff-collapse-state]').prop('checked', true); return false">${_('Collapse All Files')}</a>
               <a
                   class="btn"
                   href="#"
                   onclick="return Rhodecode.comments.toggleWideMode(this)">${_('Wide Mode Diff')}</a>
+
           </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 = _ungettext('%(num)s file changed: %(linesadd)s inserted, ''%(linesdel)s deleted', '%(num)s files changed: %(linesadd)s inserted, %(linesdel)s deleted', diffset.changed_files) % {'num': diffset.changed_files, 'linesadd': diffset.lines_added, 'linesdel': diffset.lines_deleted}%>
+        %endif
+
+        <script>
+
+        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 formatFileResult = function(result, container, query, escapeMarkup) {
+            return function(data, escapeMarkup) {
+                var container = '<div class="filelist" style="padding-right:100px">{0}</div>';
+                var tmpl = '<span style="margin-right:-50px"><strong>{0}</strong></span>'.format(escapeMarkup(data['text']));
+                var pill = '<span class="pill-group" style="float: right;margin-right: -100px">' +
+                            '<span class="pill" op="added">{0}</span>' +
+                            '<span class="pill" op="deleted">{1}</span>' +
+                           '</span>'
+                        ;
+                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);
+
+            }(result, escapeMarkup);
+        };
+        var preloadData = {
+            results: [
+                % for filediff in diffset.files:
+                    {id:"a_${h.FID('', filediff.patch['filename'])}",
+                     text:"${filediff.patch['filename']}",
+                     ops:${h.json.dumps(filediff.patch['stats'])|n}}${('' if loop.last else ',')}
+                % endfor
+            ]
+        };
+
+        $("#file_filter").select2({
+            'dropdownAutoWidth': true,
+            'width': 'auto',
+            'placeholder': "${file_placeholder}",
+            containerCssClass: "drop-menu",
+            dropdownCssClass: "drop-menu-dropdown",
+            data: preloadData,
+            query: function(query) {
+                feedFilesOptions(query, preloadData);
+            },
+            formatResult: formatFileResult
+        });
+
+        $("#file_filter").on('click', function (e) {
+            e.preventDefault();
+            var selected = $('#file_filter').select2('data');
+            var idSelector = "#"+selected.id;
+            window.location.hash = idSelector;
+            // expand the container if we quick-select the field
+            $(idSelector).prev().prop('checked', false);
+        })
+
+    </script>
+    % endif
+
 </%def>

rhodecode/templates/compare/compare_commits.mako

@@ -1,117 +1,117 b''
 ## Changesets table !
 <%namespace name="base" file="/base/base.mako"/>
 
 %if c.ancestor:
 <div class="ancestor">${_('Common Ancestor Commit')}:
     <a href="${h.route_path('repo_commit', repo_name=c.repo_name, commit_id=c.ancestor)}">
         ${h.short_id(c.ancestor)}
     </a>. ${_('Compare was calculated based on this shared commit.')}
     <input id="common_ancestor" type="hidden" name="common_ancestor" value="${c.ancestor}">
 </div>
 %endif
 
 <div class="container">
     <input type="hidden" name="__start__" value="revisions:sequence">
     <table class="rctable compare_view_commits">
         <tr>
             <th>${_('Time')}</th>
             <th>${_('Author')}</th>
             <th>${_('Commit')}</th>
             <th></th>
             <th>${_('Description')}</th>
         </tr>
     ## to speed up lookups cache some functions before the loop
     <%
         active_patterns = h.get_active_pattern_entries(c.repo_name)
         urlify_commit_message = h.partial(h.urlify_commit_message, active_pattern_entries=active_patterns)
     %>
     %for commit in c.commit_ranges:
         <tr id="row-${commit.raw_id}"
             commit_id="${commit.raw_id}"
             class="compare_select"
             style="${'display: none' if c.collapse_all_commits else ''}"
         >
             <td class="td-time">
                 ${h.age_component(commit.date)}
             </td>
             <td class="td-user">
                 ${base.gravatar_with_user(commit.author, 16)}
             </td>
             <td class="td-hash">
                 <code>
                     <a href="${h.route_path('repo_commit', repo_name=c.target_repo.repo_name, commit_id=commit.raw_id)}">
-                        r${commit.revision}:${h.short_id(commit.raw_id)}
+                        r${commit.idx}:${h.short_id(commit.raw_id)}
                     </a>
                     ${h.hidden('revisions',commit.raw_id)}
                 </code>
             </td>
             <td class="expand_commit"
                 data-commit-id="${commit.raw_id}"
                 title="${_( 'Expand commit message')}"
             >
                 <div class="show_more_col">
                 <i class="show_more"></i>
                 </div>
             </td>
             <td class="mid td-description">
                 <div class="log-container truncate-wrap">
                     <div
                         id="c-${commit.raw_id}"
                         class="message truncate"
                         data-message-raw="${commit.message}"
                     >
                         ${urlify_commit_message(commit.message, c.repo_name)}
                     </div>
                 </div>
             </td>
         </tr>
     %endfor
         <tr class="compare_select_hidden" style="${'' if c.collapse_all_commits else 'display: none'}">
             <td colspan="5">
                 ${_ungettext('%s commit hidden','%s commits hidden', len(c.commit_ranges)) % len(c.commit_ranges)},
                 <a href="#" onclick="$('.compare_select').show();$('.compare_select_hidden').hide(); return false">${_ungettext('show it','show them', len(c.commit_ranges))}</a>
             </td>
         </tr>
     % if not c.commit_ranges:
         <tr class="compare_select">
             <td colspan="5">
                 ${_('No commits in this compare')}
             </td>
         </tr>
     % endif
     </table>
     <input type="hidden" name="__end__" value="revisions:sequence">
 
 </div>
 
 <script>
 $('.expand_commit').on('click',function(e){
   var target_expand = $(this);
   var cid = target_expand.data('commitId');
 
   // ## TODO: dan: extract styles into css, and just toggleClass('open') here
   if (target_expand.hasClass('open')){
     $('#c-'+cid).css({
         'height': '1.5em',
         'white-space': 'nowrap',
         'text-overflow': 'ellipsis',
         'overflow':'hidden'
     });
     target_expand.removeClass('open');
   }
   else {
     $('#c-'+cid).css({
         'height': 'auto',
         'white-space': 'pre-line',
         'text-overflow': 'initial',
         'overflow':'visible'
     });
     target_expand.addClass('open');
   }
 });
 
 $('.compare_select').on('click',function(e){
     var cid = $(this).attr('commit_id');
     $('#row-'+cid).toggleClass('hl', !$('#row-'+cid).hasClass('hl'));
 });
 </script>

rhodecode/templates/compare/compare_diff.mako

@@ -1,333 +1,333 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
 
 <%def name="title()">
     %if c.compare_home:
         ${_('%s Compare') % c.repo_name}
     %else:
         ${_('%s Compare') % c.repo_name} - ${'%s@%s' % (c.source_repo.repo_name, c.source_ref)} &gt; ${'%s@%s' % (c.target_repo.repo_name, c.target_ref)}
     %endif
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
   ${_ungettext('%s commit','%s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='compare')}
 </%def>
 
 <%def name="main()">
     <script type="text/javascript">
         // set fake commitId on this commit-range page
         templateContext.commit_data.commit_id = "${h.EmptyCommit().raw_id}";
     </script>
 
     <div class="box">
         <div class="title">
             ${self.repo_page_title(c.rhodecode_db_repo)}
         </div>
 
         <div class="summary changeset">
             <div class="summary-detail">
               <div class="summary-detail-header">
                   <span class="breadcrumbs files_location">
                     <h4>
                         ${_('Compare Commits')}
                         % if c.file_path:
                         ${_('for file')} <a href="#${'a_' + h.FID('',c.file_path)}">${c.file_path}</a>
                         % endif
 
                         % if c.commit_ranges:
                         <code>
                         r${c.source_commit.revision}:${h.short_id(c.source_commit.raw_id)}...r${c.target_commit.revision}:${h.short_id(c.target_commit.raw_id)}
                         </code>
                         % endif
                     </h4>
                   </span>
               </div>
 
               <div class="fieldset">
                 <div class="left-label">
                   ${_('Target')}:
                 </div>
                 <div class="right-content">
                     <div>
                         <div class="code-header" >
                             <div class="compare_header">
                                 ## The hidden elements are replaced with a select2 widget
                                 ${h.hidden('compare_source')}
                             </div>
                         </div>
                     </div>
                 </div>
               </div>
 
               <div class="fieldset">
                 <div class="left-label">
                   ${_('Source')}:
                 </div>
                 <div class="right-content">
                     <div>
                         <div class="code-header" >
                             <div class="compare_header">
                                 ## The hidden elements are replaced with a select2 widget
                                 ${h.hidden('compare_target')}
                             </div>
                         </div>
                     </div>
                 </div>
               </div>
 
               <div class="fieldset">
                 <div class="left-label">
                   ${_('Actions')}:
                 </div>
                 <div class="right-content">
                     <div>
                         <div class="code-header" >
                             <div class="compare_header">
 
                                 <div class="compare-buttons">
                                 % if c.compare_home:
                                   <a id="compare_revs" class="btn btn-primary"> ${_('Compare Commits')}</a>
 
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Swap')}</a>
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Comment')}</a>
                                   <div id="changeset_compare_view_content">
                                      <div class="help-block">${_('Compare commits, branches, bookmarks or tags.')}</div>
                                   </div>
 
                                 % elif c.preview_mode:
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Compare Commits')}</a>
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Swap')}</a>
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Comment')}</a>
 
                                 % else:
                                   <a id="compare_revs" class="btn btn-primary"> ${_('Compare Commits')}</a>
                                   <a id="btn-swap" class="btn btn-primary" href="${c.swap_url}">${_('Swap')}</a>
 
                                   ## allow comment only if there are commits to comment on
                                   % if c.diffset and c.diffset.files and c.commit_ranges:
                                     <a id="compare_changeset_status_toggle" class="btn btn-primary">${_('Comment')}</a>
                                   % else:
                                     <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Comment')}</a>
                                   % endif
                                 % endif
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
               </div>
 
               <%doc>
               ##TODO(marcink): implement this and diff menus
               <div class="fieldset">
                 <div class="left-label">
                   ${_('Diff options')}:
                 </div>
                 <div class="right-content">
                     <div class="diff-actions">
                       <a href="${h.route_path('repo_commit_raw',repo_name=c.repo_name,commit_id='?')}"  class="tooltip" title="${h.tooltip(_('Raw diff'))}">
                         ${_('Raw Diff')}
                       </a>
                        |
                       <a href="${h.route_path('repo_commit_patch',repo_name=c.repo_name,commit_id='?')}"  class="tooltip" title="${h.tooltip(_('Patch diff'))}">
                         ${_('Patch Diff')}
                       </a>
                        |
                       <a href="${h.route_path('repo_commit_download',repo_name=c.repo_name,commit_id='?',_query=dict(diff='download'))}" class="tooltip" title="${h.tooltip(_('Download diff'))}">
                         ${_('Download Diff')}
                       </a>
                     </div>
                 </div>
               </div>
               </%doc>
 
               ## commit status form
               <div class="fieldset" id="compare_changeset_status" style="display: none; margin-bottom: -80px;">
                 <div class="left-label">
                   ${_('Commit status')}:
                 </div>
                 <div class="right-content">
                     <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
                     ## main comment form and it status
                     <%
                     def revs(_revs):
                         form_inputs = []
                         for cs in _revs:
                             tmpl = '<input type="hidden" data-commit-id="%(cid)s" name="commit_ids" value="%(cid)s">' % {'cid': cs.raw_id}
                             form_inputs.append(tmpl)
                         return form_inputs
                     %>
                     <div>
                         ${comment.comments(h.route_path('repo_commit_comment_create', repo_name=c.repo_name, commit_id='0'*16), None, is_compare=True, form_extras=revs(c.commit_ranges))}
                     </div>
                 </div>
               </div>
 
             </div> <!-- end summary-detail -->
         </div> <!-- end summary -->
 
         ## use JS script to load it quickly before potentially large diffs render long time
         ## this prevents from situation when large diffs block rendering of select2 fields
         <script type="text/javascript">
 
                 var cache = {};
 
                 var formatSelection = function(repoName){
                     return function(data, container, escapeMarkup) {
                         var selection = data ? this.text(data) : "";
                         return escapeMarkup('{0}@{1}'.format(repoName, selection));
                     }
                 };
 
                 var feedCompareData = function(query, cachedValue){
                     var data = {results: []};
                     //filter results
                     $.each(cachedValue.results, function() {
                         var section = this.text;
                         var children = [];
                         $.each(this.children, function() {
                             if (query.term.length === 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
                                 children.push({
                                     'id': this.id,
                                     'text': this.text,
                                     'type': this.type
                                 })
                             }
                         });
                         data.results.push({
                             'text': section,
                             'children': children
                         })
                     });
                     //push the typed in changeset
                     data.results.push({
                         'text': _gettext('specify commit'),
                         'children': [{
                             'id': query.term,
                             'text': query.term,
                             'type': 'rev'
                         }]
                     });
                     query.callback(data);
                 };
 
                 var loadCompareData = function(repoName, query, cache){
                     $.ajax({
                         url: pyroutes.url('repo_refs_data', {'repo_name': repoName}),
                         data: {},
                         dataType: 'json',
                         type: 'GET',
                         success: function(data) {
                             cache[repoName] = data;
                             query.callback({results: data.results});
                         }
                     })
                 };
 
                 var enable_fields = ${"false" if c.preview_mode else "true"};
                 $("#compare_source").select2({
                     placeholder: "${'%s@%s' % (c.source_repo.repo_name, c.source_ref)}",
                     containerCssClass: "drop-menu",
                     dropdownCssClass: "drop-menu-dropdown",
                     formatSelection: formatSelection("${c.source_repo.repo_name}"),
                     dropdownAutoWidth: true,
                     query: function(query) {
                         var repoName = '${c.source_repo.repo_name}';
                         var cachedValue = cache[repoName];
 
                         if (cachedValue){
                             feedCompareData(query, cachedValue);
                         }
                         else {
                             loadCompareData(repoName, query, cache);
                         }
                     }
                 }).select2("enable", enable_fields);
 
                 $("#compare_target").select2({
                     placeholder: "${'%s@%s' % (c.target_repo.repo_name, c.target_ref)}",
                     dropdownAutoWidth: true,
                     containerCssClass: "drop-menu",
                     dropdownCssClass: "drop-menu-dropdown",
                     formatSelection: formatSelection("${c.target_repo.repo_name}"),
                     query: function(query) {
                         var repoName = '${c.target_repo.repo_name}';
                         var cachedValue = cache[repoName];
 
                         if (cachedValue){
                             feedCompareData(query, cachedValue);
                         }
                         else {
                             loadCompareData(repoName, query, cache);
                         }
                     }
                 }).select2("enable", enable_fields);
                 var initial_compare_source = {id: "${c.source_ref}", type:"${c.source_ref_type}"};
                 var initial_compare_target = {id: "${c.target_ref}", type:"${c.target_ref_type}"};
 
                 $('#compare_revs').on('click', function(e) {
                     var source = $('#compare_source').select2('data') || initial_compare_source;
                     var target = $('#compare_target').select2('data')  || initial_compare_target;
                     if (source && target) {
                         var url_data = {
                             repo_name: "${c.repo_name}",
                             source_ref: source.id,
                             source_ref_type: source.type,
                             target_ref: target.id,
                             target_ref_type: target.type
                         };
                         window.location = pyroutes.url('repo_compare', url_data);
                     }
                 });
                 $('#compare_changeset_status_toggle').on('click', function(e) {
                     $('#compare_changeset_status').toggle();
                 });
 
         </script>
 
         ## table diff data
         <div class="table">
 
 
             % if not c.compare_home:
                 <div id="changeset_compare_view_content">
                     <div class="pull-left">
                       <div class="btn-group">
                           <a
                               class="btn"
                               href="#"
                               onclick="$('.compare_select').show();$('.compare_select_hidden').hide(); return false">
                               ${_ungettext('Expand %s commit','Expand %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
                           </a>
                           <a
                               class="btn"
                               href="#"
                               onclick="$('.compare_select').hide();$('.compare_select_hidden').show(); return false">
                               ${_ungettext('Collapse %s commit','Collapse %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
                           </a>
                       </div>
                     </div>
                     <div style="padding:0 10px 10px 0px" class="pull-left"></div>
                     ## commit compare generated below
                     <%include file="compare_commits.mako"/>
-                    ${cbdiffs.render_diffset_menu()}
+                    ${cbdiffs.render_diffset_menu(c.diffset)}
                     ${cbdiffs.render_diffset(c.diffset)}
                  </div>
             % endif
 
         </div>
     </div>
 
-</%def>
  No newline at end of file
+</%def>

rhodecode/templates/pullrequests/pullrequest_show.mako

@@ -1,859 +1,859 b''
 <%inherit file="/base/base.mako"/>
 <%namespace name="base" file="/base/base.mako"/>
 <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
 
 <%def name="title()">
     ${_('%s Pull Request #%s') % (c.repo_name, c.pull_request.pull_request_id)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     <span id="pr-title">
     ${c.pull_request.title}
     %if c.pull_request.is_closed():
         (${_('Closed')})
     %endif
     </span>
     <div id="pr-title-edit" class="input" style="display: none;">
         ${h.text('pullrequest_title', id_="pr-title-input", class_="large", value=c.pull_request.title)}
     </div>
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='showpullrequest')}
 </%def>
 
 <%def name="main()">
 
 <script type="text/javascript">
     // TODO: marcink switch this to pyroutes
     AJAX_COMMENT_DELETE_URL = "${h.route_path('pullrequest_comment_delete',repo_name=c.repo_name,pull_request_id=c.pull_request.pull_request_id,comment_id='__COMMENT_ID__')}";
     templateContext.pull_request_data.pull_request_id = ${c.pull_request.pull_request_id};
 </script>
 <div class="box">
 
   <div class="title">
     ${self.repo_page_title(c.rhodecode_db_repo)}
   </div>
 
   ${self.breadcrumbs()}
 
   <div class="box pr-summary">
 
       <div class="summary-details block-left">
         <% summary = lambda n:{False:'summary-short'}.get(n) %>
         <div class="pr-details-title">
             <a href="${h.route_path('pull_requests_global', pull_request_id=c.pull_request.pull_request_id)}">${_('Pull request #%s') % c.pull_request.pull_request_id}</a> ${_('From')} ${h.format_date(c.pull_request.created_on)}
             %if c.allowed_to_update:
               <div id="delete_pullrequest" class="pull-right action_button ${'' if c.allowed_to_delete else 'disabled' }" style="clear:inherit;padding: 0">
                   % if c.allowed_to_delete:
                       ${h.secure_form(h.route_path('pullrequest_delete', repo_name=c.pull_request.target_repo.repo_name, pull_request_id=c.pull_request.pull_request_id), request=request)}
                           ${h.submit('remove_%s' % c.pull_request.pull_request_id, _('Delete'),
                         class_="btn btn-link btn-danger no-margin",onclick="return confirm('"+_('Confirm to delete this pull request')+"');")}
                       ${h.end_form()}
                   % else:
                     ${_('Delete')}
                   % endif
               </div>
               <div id="open_edit_pullrequest" class="pull-right action_button">${_('Edit')}</div>
               <div id="close_edit_pullrequest" class="pull-right action_button" style="display: none;padding: 0">${_('Cancel')}</div>
             %endif
         </div>
 
         <div id="summary" class="fields pr-details-content">
            <div class="field">
             <div class="label-summary">
                 <label>${_('Source')}:</label>
             </div>
             <div class="input">
                 <div class="pr-origininfo">
                     ## branch link is only valid if it is a branch
                     <span class="tag">
                       %if c.pull_request.source_ref_parts.type == 'branch':
                         <a href="${h.route_path('repo_changelog', repo_name=c.pull_request.source_repo.repo_name, _query=dict(branch=c.pull_request.source_ref_parts.name))}">${c.pull_request.source_ref_parts.type}: ${c.pull_request.source_ref_parts.name}</a>
                       %else:
                         ${c.pull_request.source_ref_parts.type}: ${c.pull_request.source_ref_parts.name}
                       %endif
                     </span>
                     <span class="clone-url">
                         <a href="${h.route_path('repo_summary', repo_name=c.pull_request.source_repo.repo_name)}">${c.pull_request.source_repo.clone_url()}</a>
                     </span>
                     <br/>
                     % if c.ancestor_commit:
                         ${_('Common ancestor')}:
                         <code><a href="${h.route_path('repo_commit', repo_name=c.target_repo.repo_name, commit_id=c.ancestor_commit.raw_id)}">${h.show_id(c.ancestor_commit)}</a></code>
                     % endif
                 </div>
                 %if h.is_hg(c.pull_request.source_repo):
                     <% clone_url = 'hg pull -r {} {}'.format(h.short_id(c.source_ref), c.pull_request.source_repo.clone_url()) %>
                 %elif h.is_git(c.pull_request.source_repo):
                     <% clone_url = 'git pull {} {}'.format(c.pull_request.source_repo.clone_url(), c.pull_request.source_ref_parts.name) %>
                 %endif
 
                 <div class="">
                     <input type="text" class="input-monospace pr-pullinfo" value="${clone_url}" readonly="readonly">
                     <i class="tooltip icon-clipboard clipboard-action pull-right pr-pullinfo-copy" data-clipboard-text="${clone_url}" title="${_('Copy the pull url')}"></i>
                 </div>
 
             </div>
            </div>
            <div class="field">
             <div class="label-summary">
                 <label>${_('Target')}:</label>
             </div>
             <div class="input">
                 <div class="pr-targetinfo">
                     ## branch link is only valid if it is a branch
                     <span class="tag">
                       %if c.pull_request.target_ref_parts.type == 'branch':
                         <a href="${h.route_path('repo_changelog', repo_name=c.pull_request.target_repo.repo_name, _query=dict(branch=c.pull_request.target_ref_parts.name))}">${c.pull_request.target_ref_parts.type}: ${c.pull_request.target_ref_parts.name}</a>
                       %else:
                         ${c.pull_request.target_ref_parts.type}: ${c.pull_request.target_ref_parts.name}
                       %endif
                     </span>
                     <span class="clone-url">
                         <a href="${h.route_path('repo_summary', repo_name=c.pull_request.target_repo.repo_name)}">${c.pull_request.target_repo.clone_url()}</a>
                     </span>
                 </div>
             </div>
            </div>
 
             ## Link to the shadow repository.
             <div class="field">
                 <div class="label-summary">
                     <label>${_('Merge')}:</label>
                 </div>
                 <div class="input">
                     % if not c.pull_request.is_closed() and c.pull_request.shadow_merge_ref:
                         %if h.is_hg(c.pull_request.target_repo):
                             <% clone_url = 'hg clone --update {} {} pull-request-{}'.format(c.pull_request.shadow_merge_ref.name, c.shadow_clone_url, c.pull_request.pull_request_id) %>
                         %elif h.is_git(c.pull_request.target_repo):
                             <% clone_url = 'git clone --branch {} {} pull-request-{}'.format(c.pull_request.shadow_merge_ref.name, c.shadow_clone_url, c.pull_request.pull_request_id) %>
                         %endif
                         <div class="">
                             <input type="text" class="input-monospace pr-mergeinfo" value="${clone_url}" readonly="readonly">
                             <i class="tooltip icon-clipboard clipboard-action pull-right pr-mergeinfo-copy" data-clipboard-text="${clone_url}" title="${_('Copy the clone url')}"></i>
                         </div>
                     % else:
                         <div class="">
                             ${_('Shadow repository data not available')}.
                         </div>
                     % endif
                 </div>
             </div>
 
            <div class="field">
             <div class="label-summary">
                 <label>${_('Review')}:</label>
             </div>
             <div class="input">
               %if c.pull_request_review_status:
                 <div class="${'flag_status %s' % c.pull_request_review_status} tooltip pull-left"></div>
                 <span class="changeset-status-lbl tooltip">
                   %if c.pull_request.is_closed():
                       ${_('Closed')},
                   %endif
                   ${h.commit_status_lbl(c.pull_request_review_status)}
                 </span>
                 - ${_ungettext('calculated based on %s reviewer vote', 'calculated based on %s reviewers votes', len(c.pull_request_reviewers)) % len(c.pull_request_reviewers)}
               %endif
             </div>
            </div>
            <div class="field">
             <div class="pr-description-label label-summary" title="${_('Rendered using {} renderer').format(c.renderer)}">
                 <label>${_('Description')}:</label>
             </div>
             <div id="pr-desc" class="input">
                 <div class="pr-description">${h.render(c.pull_request.description, renderer=c.renderer)}</div>
             </div>
             <div id="pr-desc-edit" class="input textarea editor" style="display: none;">
                 <input id="pr-renderer-input" type="hidden" name="description_renderer" value="${c.visual.default_renderer}">
                 ${dt.markup_form('pr-description-input', form_text=c.pull_request.description)}
             </div>
            </div>
 
            <div class="field">
                <div class="label-summary">
                    <label>${_('Versions')}:</label>
                </div>
 
                <% outdated_comm_count_ver = len(c.inline_versions[None]['outdated']) %>
                <% general_outdated_comm_count_ver = len(c.comment_versions[None]['outdated']) %>
 
                <div class="pr-versions">
                % if c.show_version_changes:
                    <% outdated_comm_count_ver = len(c.inline_versions[c.at_version_num]['outdated']) %>
                    <% general_outdated_comm_count_ver = len(c.comment_versions[c.at_version_num]['outdated']) %>
                    <a id="show-pr-versions" class="input" onclick="return versionController.toggleVersionView(this)" href="#show-pr-versions"
                         data-toggle-on="${_ungettext('{} version available for this pull request, show it.', '{} versions available for this pull request, show them.', len(c.versions)).format(len(c.versions))}"
                         data-toggle-off="${_('Hide all versions of this pull request')}">
                        ${_ungettext('{} version available for this pull request, show it.', '{} versions available for this pull request, show them.', len(c.versions)).format(len(c.versions))}
                    </a>
                    <table>
                        ## SHOW ALL VERSIONS OF PR
                        <% ver_pr = None %>
 
                        % for data in reversed(list(enumerate(c.versions, 1))):
                            <% ver_pos = data[0] %>
                            <% ver = data[1] %>
                            <% ver_pr = ver.pull_request_version_id %>
                            <% display_row = '' if c.at_version and (c.at_version_num == ver_pr or c.from_version_num == ver_pr) else 'none' %>
 
                            <tr class="version-pr" style="display: ${display_row}">
                                <td>
                                     <code>
                                         <a href="${request.current_route_path(_query=dict(version=ver_pr or 'latest'))}">v${ver_pos}</a>
                                     </code>
                                </td>
                                <td>
                                    <input ${'checked="checked"' if c.from_version_num == ver_pr else ''} class="compare-radio-button" type="radio" name="ver_source" value="${ver_pr or 'latest'}" data-ver-pos="${ver_pos}"/>
                                    <input ${'checked="checked"' if c.at_version_num == ver_pr else ''} class="compare-radio-button" type="radio" name="ver_target" value="${ver_pr or 'latest'}" data-ver-pos="${ver_pos}"/>
                                </td>
                                <td>
                                 <% review_status = c.review_versions[ver_pr].status if ver_pr in c.review_versions else 'not_reviewed' %>
                                 <div class="${'flag_status %s' % review_status} tooltip pull-left" title="${_('Your review status at this version')}">
                                 </div>
                                </td>
                                <td>
                                    % if c.at_version_num != ver_pr:
                                     <i class="icon-comment"></i>
                                        <code class="tooltip" title="${_('Comment from pull request version v{0}, general:{1} inline:{2}').format(ver_pos, len(c.comment_versions[ver_pr]['at']), len(c.inline_versions[ver_pr]['at']))}">
                                            G:${len(c.comment_versions[ver_pr]['at'])} / I:${len(c.inline_versions[ver_pr]['at'])}
                                        </code>
                                    % endif
                                </td>
                                <td>
                                    ##<code>${ver.source_ref_parts.commit_id[:6]}</code>
                                </td>
                                <td>
                                    ${h.age_component(ver.updated_on, time_is_local=True)}
                                </td>
                            </tr>
                        % endfor
 
                        <tr>
                            <td colspan="6">
                                <button id="show-version-diff" onclick="return versionController.showVersionDiff()" class="btn btn-sm" style="display: none"
                                        data-label-text-locked="${_('select versions to show changes')}"
                                        data-label-text-diff="${_('show changes between versions')}"
                                        data-label-text-show="${_('show pull request for this version')}"
                                >
                                    ${_('select versions to show changes')}
                                </button>
                            </td>
                        </tr>
 
                        ## show comment/inline comments summary
                        <%def name="comments_summary()">
                        <tr>
                            <td colspan="6" class="comments-summary-td">
 
                             % if c.at_version:
                                 <% inline_comm_count_ver = len(c.inline_versions[c.at_version_num]['display']) %>
                                 <% general_comm_count_ver = len(c.comment_versions[c.at_version_num]['display']) %>
                                 ${_('Comments at this version')}:
                             % else:
                                 <% inline_comm_count_ver = len(c.inline_versions[c.at_version_num]['until']) %>
                                 <% general_comm_count_ver = len(c.comment_versions[c.at_version_num]['until']) %>
                                 ${_('Comments for this pull request')}:
                             % endif
 
 
                             %if general_comm_count_ver:
                                 <a href="#comments">${_("%d General ") % general_comm_count_ver}</a>
                             %else:
                                 ${_("%d General ") % general_comm_count_ver}
                             %endif
 
                             %if inline_comm_count_ver:
                                , <a href="#" onclick="return Rhodecode.comments.nextComment();" id="inline-comments-counter">${_("%d Inline") % inline_comm_count_ver}</a>
                             %else:
                                , ${_("%d Inline") % inline_comm_count_ver}
                             %endif
 
                             %if outdated_comm_count_ver:
                               , <a href="#" onclick="showOutdated(); Rhodecode.comments.nextOutdatedComment(); return false;">${_("%d Outdated") % outdated_comm_count_ver}</a>
                                 <a href="#" class="showOutdatedComments" onclick="showOutdated(this); return false;"> | ${_('show outdated comments')}</a>
                                 <a href="#" class="hideOutdatedComments" style="display: none" onclick="hideOutdated(this); return false;"> | ${_('hide outdated comments')}</a>
                             %else:
                               , ${_("%d Outdated") % outdated_comm_count_ver}
                             %endif
                            </td>
                        </tr>
                        </%def>
                        ${comments_summary()}
                    </table>
                % else:
                    <div class="input">
                    ${_('Pull request versions not available')}.
                    </div>
                    <div>
                       <table>
                         ${comments_summary()}
                       </table>
                    </div>
                % endif
                </div>
            </div>
 
            <div id="pr-save" class="field" style="display: none;">
             <div class="label-summary"></div>
             <div class="input">
               <span id="edit_pull_request" class="btn btn-small no-margin">${_('Save Changes')}</span>
             </div>
            </div>
         </div>
       </div>
       <div>
         ## AUTHOR
         <div class="reviewers-title block-right">
           <div class="pr-details-title">
               ${_('Author of this pull request')}
           </div>
         </div>
         <div class="block-right pr-details-content reviewers">
             <ul class="group_members">
               <li>
                 ${self.gravatar_with_user(c.pull_request.author.email, 16)}
               </li>
             </ul>
         </div>
 
         ## REVIEW RULES
         <div id="review_rules" style="display: none" class="reviewers-title block-right">
             <div class="pr-details-title">
                 ${_('Reviewer rules')}
               %if c.allowed_to_update:
                 <span id="close_edit_reviewers" class="block-right action_button last-item" style="display: none;">${_('Close')}</span>
               %endif
             </div>
             <div class="pr-reviewer-rules">
                 ## review rules will be appended here, by default reviewers logic
             </div>
             <input id="review_data" type="hidden" name="review_data" value="">
         </div>
 
         ## REVIEWERS
         <div class="reviewers-title block-right">
           <div class="pr-details-title">
               ${_('Pull request reviewers')}
               %if c.allowed_to_update:
                 <span id="open_edit_reviewers" class="block-right action_button last-item">${_('Edit')}</span>
               %endif
           </div>
         </div>
         <div id="reviewers" class="block-right pr-details-content reviewers">
 
             ## members redering block
             <input type="hidden" name="__start__" value="review_members:sequence">
             <ul id="review_members" class="group_members">
 
             % for review_obj, member, reasons, mandatory, status in c.pull_request_reviewers:
                 <script>
                     var member = ${h.json.dumps(h.reviewer_as_json(member, reasons=reasons, mandatory=mandatory, user_group=review_obj.rule_user_group_data()))|n};
                     var status = "${(status[0][1].status if status else 'not_reviewed')}";
                     var status_lbl = "${h.commit_status_lbl(status[0][1].status if status else 'not_reviewed')}";
                     var allowed_to_update = ${h.json.dumps(c.allowed_to_update)};
 
                     var entry = renderTemplate('reviewMemberEntry', {
                         'member': member,
                         'mandatory': member.mandatory,
                         'reasons': member.reasons,
                         'allowed_to_update': allowed_to_update,
                         'review_status': status,
                         'review_status_label': status_lbl,
                         'user_group': member.user_group,
                         'create': false
                     });
                     $('#review_members').append(entry)
                 </script>
 
             % endfor
 
             </ul>
             <input type="hidden" name="__end__" value="review_members:sequence">
             ## end members redering block
 
             %if not c.pull_request.is_closed():
                 <div id="add_reviewer" class="ac" style="display: none;">
                 %if c.allowed_to_update:
                     % if not c.forbid_adding_reviewers:
                         <div id="add_reviewer_input" class="reviewer_ac">
                            ${h.text('user', class_='ac-input', placeholder=_('Add reviewer or reviewer group'))}
                            <div id="reviewers_container"></div>
                         </div>
                     % endif
                     <div class="pull-right">
                         <button id="update_pull_request" class="btn btn-small no-margin">${_('Save Changes')}</button>
                     </div>
                 %endif
                 </div>
             %endif
         </div>
       </div>
   </div>
   <div class="box">
       ##DIFF
       <div class="table" >
           <div id="changeset_compare_view_content">
               ##CS
               % if c.missing_requirements:
                 <div class="box">
                   <div class="alert alert-warning">
                     <div>
                       <strong>${_('Missing requirements:')}</strong>
                       ${_('These commits cannot be displayed, because this repository uses the Mercurial largefiles extension, which was not enabled.')}
                     </div>
                   </div>
                 </div>
               % elif c.missing_commits:
                 <div class="box">
                   <div class="alert alert-warning">
                     <div>
                       <strong>${_('Missing commits')}:</strong>
                         ${_('This pull request cannot be displayed, because one or more commits no longer exist in the source repository.')}
                         ${_('Please update this pull request, push the commits back into the source repository, or consider closing this pull request.')}
                         ${_('Consider doing a {force_refresh_url} in case you think this is an error.').format(force_refresh_url=h.link_to('force refresh', h.current_route_path(request, force_refresh='1')))|n}
                     </div>
                   </div>
                 </div>
               % endif
 
               <div class="compare_view_commits_title">
                   % if not c.compare_mode:
 
                     % if c.at_version_pos:
                         <h4>
                         ${_('Showing changes at v%d, commenting is disabled.') % c.at_version_pos}
                         </h4>
                     % endif
 
                     <div class="pull-left">
                       <div class="btn-group">
                           <a
                               class="btn"
                               href="#"
                               onclick="$('.compare_select').show();$('.compare_select_hidden').hide(); return false">
                               ${_ungettext('Expand %s commit','Expand %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
                           </a>
                           <a
                               class="btn"
                               href="#"
                               onclick="$('.compare_select').hide();$('.compare_select_hidden').show(); return false">
                               ${_ungettext('Collapse %s commit','Collapse %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
                           </a>
                       </div>
                     </div>
 
                     <div class="pull-right">
                         % if c.allowed_to_update and not c.pull_request.is_closed():
                           <a id="update_commits" class="btn btn-primary no-margin pull-right">${_('Update commits')}</a>
                         % else:
                           <a class="tooltip btn disabled pull-right" disabled="disabled" title="${_('Update is disabled for current view')}">${_('Update commits')}</a>
                         % endif
 
                     </div>
                   % endif
               </div>
 
               % if not c.missing_commits:
                 % if c.compare_mode:
                     % if c.at_version:
                     <h4>
                         ${_('Commits and changes between v{ver_from} and {ver_to} of this pull request, commenting is disabled').format(ver_from=c.from_version_pos, ver_to=c.at_version_pos if c.at_version_pos else 'latest')}:
                     </h4>
 
                     <div class="subtitle-compare">
                         ${_('commits added: {}, removed: {}').format(len(c.commit_changes_summary.added), len(c.commit_changes_summary.removed))}
                     </div>
 
                     <div class="container">
                         <table class="rctable compare_view_commits">
                             <tr>
                                 <th></th>
                                 <th>${_('Time')}</th>
                                 <th>${_('Author')}</th>
                                 <th>${_('Commit')}</th>
                                 <th></th>
                                 <th>${_('Description')}</th>
                             </tr>
 
                             % for c_type, commit in c.commit_changes:
                               % if c_type in ['a', 'r']:
                                 <%
                                     if c_type == 'a':
                                         cc_title = _('Commit added in displayed changes')
                                     elif c_type == 'r':
                                         cc_title = _('Commit removed in displayed changes')
                                     else:
                                         cc_title = ''
                                 %>
                                 <tr id="row-${commit.raw_id}" commit_id="${commit.raw_id}" class="compare_select">
                                 <td>
                                     <div class="commit-change-indicator color-${c_type}-border">
                                       <div class="commit-change-content color-${c_type} tooltip" title="${h.tooltip(cc_title)}">
                                         ${c_type.upper()}
                                       </div>
                                     </div>
                                 </td>
                                 <td class="td-time">
                                     ${h.age_component(commit.date)}
                                 </td>
                                 <td class="td-user">
                                     ${base.gravatar_with_user(commit.author, 16)}
                                 </td>
                                 <td class="td-hash">
                                     <code>
                                         <a href="${h.route_path('repo_commit', repo_name=c.target_repo.repo_name, commit_id=commit.raw_id)}">
                                             r${commit.revision}:${h.short_id(commit.raw_id)}
                                         </a>
                                         ${h.hidden('revisions', commit.raw_id)}
                                     </code>
                                 </td>
                                 <td class="expand_commit" data-commit-id="${commit.raw_id}" title="${_( 'Expand commit message')}">
                                     <div class="show_more_col">
                                     <i class="show_more"></i>
                                     </div>
                                 </td>
                                 <td class="mid td-description">
                                     <div class="log-container truncate-wrap">
                                         <div class="message truncate" id="c-${commit.raw_id}" data-message-raw="${commit.message}">
                                             ${h.urlify_commit_message(commit.message, c.repo_name)}
                                         </div>
                                     </div>
                                 </td>
                             </tr>
                               % endif
                             % endfor
                         </table>
                     </div>
 
                     <script>
                     $('.expand_commit').on('click',function(e){
                       var target_expand = $(this);
                       var cid = target_expand.data('commitId');
 
                       if (target_expand.hasClass('open')){
                         $('#c-'+cid).css({
                             'height': '1.5em',
                             'white-space': 'nowrap',
                             'text-overflow': 'ellipsis',
                             'overflow':'hidden'
                         });
                         target_expand.removeClass('open');
                       }
                       else {
                         $('#c-'+cid).css({
                             'height': 'auto',
                             'white-space': 'pre-line',
                             'text-overflow': 'initial',
                             'overflow':'visible'
                         });
                         target_expand.addClass('open');
                       }
                     });
                     </script>
 
                     % endif
 
                 % else:
                     <%include file="/compare/compare_commits.mako" />
                 % endif
 
                 <div class="cs_files">
                     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
-                    ${cbdiffs.render_diffset_menu()}
+                    ${cbdiffs.render_diffset_menu(c.diffset)}
                     ${cbdiffs.render_diffset(
                       c.diffset, use_comments=True,
                       collapse_when_files_over=30,
                       disable_new_comments=not c.allowed_to_comment,
                       deleted_files_comments=c.deleted_files_comments,
                       inline_comments=c.inline_comments)}
                 </div>
               % else:
                   ## skipping commits we need to clear the view for missing commits
                   <div style="clear:both;"></div>
               % endif
 
           </div>
       </div>
 
       ## template for inline comment form
       <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
 
       ## render general comments
 
       <div id="comment-tr-show">
           <div class="comment">
             % if general_outdated_comm_count_ver:
             <div class="meta">
                 % if general_outdated_comm_count_ver == 1:
                     ${_('there is {num} general comment from older versions').format(num=general_outdated_comm_count_ver)},
                     <a href="#show-hidden-comments" onclick="$('.comment-general.comment-outdated').show(); $(this).parent().hide(); return false;">${_('show it')}</a>
                 % else:
                     ${_('there are {num} general comments from older versions').format(num=general_outdated_comm_count_ver)},
                     <a href="#show-hidden-comments" onclick="$('.comment-general.comment-outdated').show(); $(this).parent().hide(); return false;">${_('show them')}</a>
                 % endif
             </div>
             % endif
           </div>
       </div>
 
       ${comment.generate_comments(c.comments, include_pull_request=True, is_pull_request=True)}
 
       % if not c.pull_request.is_closed():
         ## merge status, and merge action
         <div class="pull-request-merge">
             <%include file="/pullrequests/pullrequest_merge_checks.mako"/>
         </div>
 
         ## main comment form and it status
         ${comment.comments(h.route_path('pullrequest_comment_create', repo_name=c.repo_name,
                                         pull_request_id=c.pull_request.pull_request_id),
                            c.pull_request_review_status,
                            is_pull_request=True, change_status=c.allowed_to_change_status)}
       %endif
 
       <script type="text/javascript">
         if (location.hash) {
           var result = splitDelimitedHash(location.hash);
             var line = $('html').find(result.loc);
             // show hidden comments if we use location.hash
             if (line.hasClass('comment-general')) {
                 $(line).show();
             } else if (line.hasClass('comment-inline')) {
                 $(line).show();
                 var $cb = $(line).closest('.cb');
                 $cb.removeClass('cb-collapsed')
             }
             if (line.length > 0){
                 offsetScroll(line, 70);
             }
         }
 
         versionController = new VersionController();
         versionController.init();
 
         reviewersController = new ReviewersController();
 
         $(function(){
 
             // custom code mirror
             var codeMirrorInstance = $('#pr-description-input').get(0).MarkupForm.cm;
 
             var PRDetails = {
               editButton: $('#open_edit_pullrequest'),
               closeButton: $('#close_edit_pullrequest'),
               deleteButton: $('#delete_pullrequest'),
               viewFields: $('#pr-desc, #pr-title'),
               editFields: $('#pr-desc-edit, #pr-title-edit, #pr-save'),
 
               init: function() {
                 var that = this;
                 this.editButton.on('click', function(e) { that.edit(); });
                 this.closeButton.on('click', function(e) { that.view(); });
               },
 
               edit: function(event) {
                 this.viewFields.hide();
                 this.editButton.hide();
                 this.deleteButton.hide();
                 this.closeButton.show();
                 this.editFields.show();
                 codeMirrorInstance.refresh();
               },
 
               view: function(event) {
                 this.editButton.show();
                 this.deleteButton.show();
                 this.editFields.hide();
                 this.closeButton.hide();
                 this.viewFields.show();
               }
             };
 
             var ReviewersPanel = {
               editButton: $('#open_edit_reviewers'),
               closeButton: $('#close_edit_reviewers'),
               addButton: $('#add_reviewer'),
               removeButtons: $('.reviewer_member_remove,.reviewer_member_mandatory_remove'),
 
               init: function() {
                 var self = this;
                 this.editButton.on('click', function(e) { self.edit(); });
                 this.closeButton.on('click', function(e) { self.close(); });
               },
 
               edit: function(event) {
                 this.editButton.hide();
                 this.closeButton.show();
                 this.addButton.show();
                 this.removeButtons.css('visibility', 'visible');
                 // review rules
                 reviewersController.loadReviewRules(
                     ${c.pull_request.reviewer_data_json | n});
               },
 
               close: function(event) {
                 this.editButton.show();
                 this.closeButton.hide();
                 this.addButton.hide();
                 this.removeButtons.css('visibility', 'hidden');
                 // hide review rules
                 reviewersController.hideReviewRules()
               }
             };
 
             PRDetails.init();
             ReviewersPanel.init();
 
             showOutdated = function(self){
                 $('.comment-inline.comment-outdated').show();
                 $('.filediff-outdated').show();
                 $('.showOutdatedComments').hide();
                 $('.hideOutdatedComments').show();
             };
 
             hideOutdated = function(self){
                 $('.comment-inline.comment-outdated').hide();
                 $('.filediff-outdated').hide();
                 $('.hideOutdatedComments').hide();
                 $('.showOutdatedComments').show();
             };
 
             refreshMergeChecks = function(){
                 var loadUrl = "${request.current_route_path(_query=dict(merge_checks=1))}";
                 $('.pull-request-merge').css('opacity', 0.3);
                 $('.action-buttons-extra').css('opacity', 0.3);
 
                 $('.pull-request-merge').load(
                     loadUrl, function() {
                         $('.pull-request-merge').css('opacity', 1);
 
                         $('.action-buttons-extra').css('opacity', 1);
                         injectCloseAction();
                     }
                 );
             };
 
             injectCloseAction =  function() {
                 var closeAction = $('#close-pull-request-action').html();
                 var $actionButtons = $('.action-buttons-extra');
                 // clear the action before
                 $actionButtons.html("");
                 $actionButtons.html(closeAction);
             };
 
             closePullRequest = function (status) {
                 // inject closing flag
                 $('.action-buttons-extra').append('<input type="hidden" class="close-pr-input" id="close_pull_request" value="1">');
                 $(generalCommentForm.statusChange).select2("val", status).trigger('change');
                 $(generalCommentForm.submitForm).submit();
             };
 
             $('#show-outdated-comments').on('click', function(e){
                 var button = $(this);
                 var outdated = $('.comment-outdated');
 
                 if (button.html() === "(Show)") {
                   button.html("(Hide)");
                   outdated.show();
                 } else {
                   button.html("(Show)");
                   outdated.hide();
                 }
             });
 
             $('.show-inline-comments').on('change', function(e){
                 var show = 'none';
                 var target = e.currentTarget;
                 if(target.checked){
                     show = ''
                 }
                 var boxid = $(target).attr('id_for');
                 var comments = $('#{0} .inline-comments'.format(boxid));
                 var fn_display = function(idx){
                    $(this).css('display', show);
                 };
                 $(comments).each(fn_display);
                 var btns = $('#{0} .inline-comments-button'.format(boxid));
                 $(btns).each(fn_display);
             });
 
             $('#merge_pull_request_form').submit(function() {
                 if (!$('#merge_pull_request').attr('disabled')) {
                     $('#merge_pull_request').attr('disabled', 'disabled');
                 }
                 return true;
             });
 
             $('#edit_pull_request').on('click', function(e){
                 var title = $('#pr-title-input').val();
                 var description = codeMirrorInstance.getValue();
                 var renderer = $('#pr-renderer-input').val();
                 editPullRequest(
                     "${c.repo_name}", "${c.pull_request.pull_request_id}",
                     title, description, renderer);
             });
 
             $('#update_pull_request').on('click', function(e){
                 $(this).attr('disabled', 'disabled');
                 $(this).addClass('disabled');
                 $(this).html(_gettext('Saving...'));
                 reviewersController.updateReviewers(
                     "${c.repo_name}", "${c.pull_request.pull_request_id}");
             });
 
             $('#update_commits').on('click', function(e){
                 var isDisabled = !$(e.currentTarget).attr('disabled');
                 $(e.currentTarget).attr('disabled', 'disabled');
                 $(e.currentTarget).addClass('disabled');
                 $(e.currentTarget).removeClass('btn-primary');
                 $(e.currentTarget).text(_gettext('Updating...'));
                 if(isDisabled){
                     updateCommits(
                         "${c.repo_name}", "${c.pull_request.pull_request_id}");
                 }
             });
             // fixing issue with caches on firefox
             $('#update_commits').removeAttr("disabled");
 
             $('.show-inline-comments').on('click', function(e){
                 var boxid = $(this).attr('data-comment-id');
                 var button = $(this);
 
                 if(button.hasClass("comments-visible")) {
                   $('#{0} .inline-comments'.format(boxid)).each(function(index){
                     $(this).hide();
                   });
                   button.removeClass("comments-visible");
                 } else {
                   $('#{0} .inline-comments'.format(boxid)).each(function(index){
                     $(this).show();
                   });
                   button.addClass("comments-visible");
                 }
             });
 
             // register submit callback on commentForm form to track TODOs
             window.commentFormGlobalSubmitSuccessCallback = function(){
                 refreshMergeChecks();
             };
             // initial injection
             injectCloseAction();
 
             ReviewerAutoComplete('#user');
 
         })
       </script>
 
   </div>
 </div>
 
 </%def>