diffs: added scroll down/scroll up helper. Fixes #5643

rhodecode/public/css/buttons.less

@@ -1,626 +1,630 b''
 
 
 //BUTTONS
 button,
 .btn,
 input[type="button"] {
     -webkit-appearance: none;
     display: inline-block;
     margin: 0 @padding/3 0 0;
     padding: @button-padding;
     text-align: center;
     font-size: @basefontsize;
     line-height: 1em;
     font-family: @text-light;
     text-decoration: none;
     text-shadow: none;
     color: @grey2;
     background-color: white;
     background-image: none;
     border: none;
     .border ( @border-thickness-buttons, @grey5 );
     .border-radius (@border-radius);
     cursor: pointer;
     white-space: nowrap;
     -webkit-transition: background .3s,color .3s;
        -moz-transition: background .3s,color .3s;
          -o-transition: background .3s,color .3s;
             transition: background .3s,color .3s;
             box-shadow: @button-shadow;
     -webkit-box-shadow: @button-shadow;
 
 
 
     a {
         display: block;
         margin: 0;
         padding: 0;
         color: inherit;
         text-decoration: none;
 
         &:hover {
             text-decoration: none;
         }
     }
 
     &:focus,
     &:active {
         outline:none;
     }
 
     &:hover {
         color: @rcdarkblue;
         background-color: @grey6;
 
     }
 
     &.btn-active {
         color: @rcdarkblue;
         background-color: @grey6;
     }
 
     .icon-remove {
         display: none;
     }
 
     //disabled buttons
     //last; overrides any other styles
     &:disabled {
         opacity: .7;
         cursor: auto;
         background-color: white;
         color: @grey4;
         text-shadow: none;
     }
 
     &.no-margin {
         margin: 0 0 0 0;
     }
 
 
 
 }
 
 
 .btn-default {
     border: @border-thickness solid @grey5;
     background-image: none;
     color: @grey2;
 
     a {
         color: @grey2;
     }
 
     &:hover,
     &.active {
         color: @rcdarkblue;
         background-color: @white;
         .border ( @border-thickness, @grey4 );
 
         a {
             color: @grey2;
         }
     }
     &:disabled {
         .border ( @border-thickness-buttons, @grey5 );
         background-color: transparent;
     }
     &.btn-active {
         color: @rcdarkblue;
         background-color: @white;
         .border ( @border-thickness, @rcdarkblue );
     }
 }
 
 .btn-primary,
 .btn-small, /* TODO: anderson: remove .btn-small to not mix with the new btn-sm */
 .btn-success {
     .border ( @border-thickness, @rcblue );
     background-color: @rcblue;
     color: white;
 
     a {
         color: white;
     }
 
     &:hover,
     &.active {
         .border ( @border-thickness, @rcdarkblue );
         color: white;
         background-color: @rcdarkblue;
 
         a {
             color: white;
         }
     }
     &:disabled {
         background-color: @rcblue;
     }
 }
 
 .btn-secondary {
     &:extend(.btn-default);
 
     background-color: white;
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-default:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @rcblue;
     }
 
     &:disabled {
         color: @rcblue;
         background-color: white;
     }
 }
 
 .btn-danger,
 .revoke_perm,
 .btn-x,
 .form .action_button.btn-x   {
     .border ( @border-thickness, @alert2 );
     background-color: white;
     color: @alert2;
 
     a {
         color: @alert2;
     }
 
     &:hover,
     &.active {
         .border ( @border-thickness, @alert2 );
         color: white;
         background-color: @alert2;
 
         a {
             color: white;
         }
     }
 
     i {
         display:none;
     }
 
     &:disabled {
         background-color: white;
         color: @alert2;
     }
 }
 
 .btn-warning {
     .border ( @border-thickness, @alert3 );
     background-color: white;
     color: @alert3;
 
     a {
         color: @alert3;
     }
 
     &:hover,
     &.active {
         .border ( @border-thickness, @alert3 );
         color: white;
         background-color: @alert3;
 
         a {
             color: white;
         }
     }
 
     i {
         display:none;
     }
 
     &:disabled {
         background-color: white;
         color: @alert3;
     }
 }
 
 
 .btn-approved-status {
     .border ( @border-thickness, @alert1 );
     background-color: white;
     color: @alert1;
 
 }
 
 .btn-rejected-status {
     .border ( @border-thickness, @alert2 );
     background-color: white;
     color: @alert2;
 }
 
 .btn-sm,
 .btn-mini,
 .field-sm .btn {
     padding: @padding/3;
 }
 
 .btn-xs {
     padding: @padding/4;
 }
 
 .btn-lg {
     padding: @padding * 1.2;
 }
 
 .btn-group {
     display: inline-block;
     .btn {
         float: left;
         margin: 0 0 0 0;
         // first item
         &:first-of-type:not(:last-of-type) {
             border-radius: @border-radius 0 0 @border-radius;
 
         }
+        // 2nd, if only 2 elements are there
+        &:nth-of-type(2) {
+            border-left-width: 0;
+        }
         // middle elements
         &:not(:first-of-type):not(:last-of-type) {
             border-radius: 0;
             border-left-width: 0;
             border-right-width: 0;
         }
         // last item
         &:last-of-type:not(:first-of-type) {
             border-radius: 0 @border-radius @border-radius 0;
         }
 
         &:only-child {
             border-radius: @border-radius;
         }
     }
 
 }
 
 
 .btn-group-actions {
     position: relative;
     z-index: 50;
 
     &:not(.open) .btn-action-switcher-container {
         display: none;
     }
 
     .btn-more-option {
         margin-left: -1px;
         padding-left: 2px;
         padding-right: 2px;
     }
 }
 
 
 .btn-action-switcher-container {
   position: absolute;
   top: 100%;
 
   &.left-align {
     left: 0;
   }
   &.right-align {
     right: 0;
   }
 
 }
 
 .btn-action-switcher {
     display: block;
     position: relative;
     z-index: 300;
     max-width: 600px;
     margin-top: 4px;
     margin-bottom: 24px;
     font-size: 14px;
     font-weight: 400;
     padding: 8px 0;
     background-color: #fff;
     border: 1px solid @grey4;
     border-radius: 3px;
     box-shadow: @dropdown-shadow;
     overflow: auto;
 
     li {
         display: block;
         text-align: left;
         list-style: none;
         padding: 5px 10px;
     }
 
     li .action-help-block {
         font-size: 10px;
         line-height: normal;
         color: @grey4;
     }
 
 }
 
 .btn-link {
     background: transparent;
     border: none;
     padding: 0;
     color: @rcblue;
 
     &:hover {
         background: transparent;
         border: none;
         color: @rcdarkblue;
     }
 
     //disabled buttons
     //last; overrides any other styles
     &:disabled {
         opacity: .7;
         cursor: auto;
         background-color: white;
         color: @grey4;
         text-shadow: none;
     }
 
     // TODO: johbo: Check if we can avoid this, indicates that the structure
     // is not yet good.
     // lisa: The button CSS reflects the button HTML; both need a cleanup.
     &.btn-danger {
         color: @alert2;
 
         &:hover {
             color: darken(@alert2, 30%);
         }
 
         &:disabled {
             color: @alert2;
         }
     }
 }
 
 .btn-social {
     &:extend(.btn-default);
     margin: 5px 5px 5px 0px;
     min-width: 160px;
 }
 
 // TODO: johbo: check these exceptions
 
 .links {
 
     .btn + .btn {
         margin-top: @padding;
     }
 }
 
 
 .action_button {
     display:inline;
     margin: 0;
     padding: 0 1em 0 0;
     font-size: inherit;
     color: @rcblue;
     border: none;
     border-radius: 0;
     background-color: transparent;
 
     &.last-item {
         border: none;
         padding: 0 0 0 0;
     }
 
     &:last-child {
         border: none;
         padding: 0 0 0 0;
     }
 
     &:hover {
         color: @rcdarkblue;
         background-color: transparent;
         border: none;
     }
     .noselect
 }
 
 .grid_delete {
     .action_button {
         border: none;
     }
 }
 
 input[type="submit"].btn-draft {
     .border ( @border-thickness, @rcblue );
     background-color: white;
     color: @rcblue;
 
     a {
         color: @rcblue;
     }
 
     &:hover,
     &.active {
         .border ( @border-thickness, @rcdarkblue );
         background-color: white;
         color: @rcdarkblue;
 
         a {
             color: @rcdarkblue;
         }
     }
 
     &:disabled {
         background-color: white;
         color: @rcblue;
     }
 }
 
 input[type="submit"].btn-warning {
     &:extend(.btn-warning);
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-warning:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @alert3;
 
         &:disabled {
             color: @alert3;
             background-color: transparent;
         }
     }
 
     &:disabled {
         .border ( @border-thickness-buttons, @alert3 );
         background-color: white;
         color: @alert3;
         opacity: 0.5;
     }
 }
 
 
 
 // TODO: johbo: Form button tweaks, check if we can use the classes instead
 input[type="submit"] {
     &:extend(.btn-primary);
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-primary:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @rcblue;
 
         &:disabled {
             color: @rcblue;
             background-color: transparent;
         }
     }
 
     &:disabled {
         .border ( @border-thickness-buttons, @rcblue );
         background-color: @rcblue;
         color: white;
         opacity: 0.5;
     }
 }
 
 input[type="reset"] {
     &:extend(.btn-default);
 
     // TODO: johbo: Check if this tweak can be avoided.
     background: transparent;
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-default:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @rcblue;
 
         &:disabled {
             border: none;
         }
     }
 
     &:disabled {
         .border ( @border-thickness-buttons, @rcblue );
         background-color: white;
         color: @rcblue;
     }
 }
 
 input[type="submit"],
 input[type="reset"] {
     &.btn-danger {
         &:extend(.btn-danger);
 
         &:focus {
             outline: 0;
         }
 
         &:hover {
             &:extend(.btn-danger:hover);
         }
 
         &.btn-link {
             &:extend(.btn-link);
             color: @alert2;
 
             &:hover {
                 color: darken(@alert2,30%);
             }
         }
 
         &:disabled {
             color: @alert2;
             background-color: white;
         }
     }
     &.btn-danger-action {
         .border ( @border-thickness, @alert2 );
         background-color: @alert2;
         color: white;
 
         a {
             color: white;
         }
 
         &:hover {
             background-color: darken(@alert2,20%);
         }
 
         &.active {
             .border ( @border-thickness, @alert2 );
             color: white;
             background-color: @alert2;
 
             a {
                 color: white;
             }
         }
 
         &:disabled {
             background-color: white;
             color: @alert2;
         }
     }
 }
 
 
 .button-links {
     float: left;
     display: inline;
     margin: 0;
     padding-left: 0;
     list-style: none;
     text-align: right;
 
     li {
 
 
     }
 
     li.active {
         background-color: @grey6;
         .border ( @border-thickness, @grey4 );
     }
 
 }

rhodecode/public/css/rcicons.less

@@ -1,293 +1,297 b''
 @font-face {
   font-family: 'rcicons';
 
   src: url('../fonts/RCIcons/rcicons.eot?44705679');
   src: url('../fonts/RCIcons/rcicons.eot?44705679#iefix') format('embedded-opentype'),
        url('../fonts/RCIcons/rcicons.woff2?44705679') format('woff2'),
        url('../fonts/RCIcons/rcicons.woff?44705679') format('woff'),
        url('../fonts/RCIcons/rcicons.ttf?44705679') format('truetype'),
        url('../fonts/RCIcons/rcicons.svg?44705679#rcicons') format('svg');
 
   font-weight: normal;
   font-style: normal;
 }
 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
 /*
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'rcicons';
     src: url('../fonts/RCIcons/rcicons.svg?74666722#rcicons') format('svg');
   }
 }
 */
  
  [class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: "rcicons";
   font-style: normal;
   font-weight: normal;
   speak: none;
  
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
   margin-right: .2em;
   text-align: center;
   /* opacity: .8; */
  
   /* For safety - reset parent styles, that can break glyph codes*/
   font-variant: normal;
   text-transform: none;
  
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
  
   /* Animation center compensation - margins should be symmetric */
   /* remove if not needed */
   margin-left: .2em;
  
   /* you can be more comfortable with increased icons size */
   /* font-size: 120%; */
  
   /* Font smoothing. That was taken from TWBS */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
  
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
 .animate-spin {
   -moz-animation: spin 2s infinite linear;
   -o-animation: spin 2s infinite linear;
   -webkit-animation: spin 2s infinite linear;
   animation: spin 2s infinite linear;
   display: inline-block;
 }
 @-moz-keyframes spin {
   0% {
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -moz-transform: rotate(359deg);
     -o-transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
 }
 @-webkit-keyframes spin {
   0% {
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -moz-transform: rotate(359deg);
     -o-transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
 }
 @-o-keyframes spin {
   0% {
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -moz-transform: rotate(359deg);
     -o-transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
 }
 @-ms-keyframes spin {
   0% {
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -moz-transform: rotate(359deg);
     -o-transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
 }
 @keyframes spin {
   0% {
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -moz-transform: rotate(359deg);
     -o-transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
 }
 
 
 
 .icon-no-margin::before {
     margin: 0;
 
 }
 // -- ICON CLASSES -- //
 // sorter = lambda s: '\n'.join(sorted(s.splitlines()))
 
 .icon-delete:before { content: '\e800'; } /* '' */
 .icon-ok:before { content: '\e801'; } /* '' */
 .icon-comment:before { content: '\e802'; } /* '' */
 .icon-bookmark:before { content: '\e803'; } /* '' */
 .icon-branch:before { content: '\e804'; } /* '' */
 .icon-tag:before { content: '\e805'; } /* '' */
 .icon-lock:before { content: '\e806'; } /* '' */
 .icon-unlock:before { content: '\e807'; } /* '' */
 .icon-feed:before { content: '\e808'; } /* '' */
 .icon-left:before { content: '\e809'; } /* '' */
 .icon-right:before { content: '\e80a'; } /* '' */
 .icon-down:before { content: '\e80b'; } /* '' */
 .icon-folder:before { content: '\e80c'; } /* '' */
 .icon-folder-open:before { content: '\e80d'; } /* '' */
 .icon-trash-empty:before { content: '\e80e'; } /* '' */
 .icon-group:before { content: '\e80f'; } /* '' */
 .icon-remove:before { content: '\e810'; } /* '' */
 .icon-fork:before { content: '\e811'; } /* '' */
 .icon-more:before { content: '\e812'; } /* '' */
 .icon-options:before { content: '\e812'; } /* '' */
 .icon-search:before { content: '\e813'; } /* '' */
 .icon-scissors:before { content: '\e814'; } /* '' */
 .icon-download:before { content: '\e815'; } /* '' */
 .icon-doc:before { content: '\e816'; } /* '' */
 .icon-cog:before { content: '\e817'; } /* '' */
 .icon-cog-alt:before { content: '\e818'; } /* '' */
 .icon-eye:before { content: '\e819'; } /* '' */
 .icon-eye-off:before { content: '\e81a'; } /* '' */
 .icon-cancel-circled2:before { content: '\e81b'; } /* '' */
 .icon-cancel-circled:before { content: '\e81c'; } /* '' */
 .icon-plus:before { content: '\e81d'; } /* '' */
 .icon-plus-circled:before { content: '\e81e'; } /* '' */
 .icon-minus-circled:before { content: '\e81f'; } /* '' */
 .icon-minus:before { content: '\e820'; } /* '' */
 .icon-info-circled:before { content: '\e821'; } /* '' */
 .icon-upload:before { content: '\e822'; } /* '' */
 .icon-home:before { content: '\e823'; } /* '' */
 .icon-flag-filled:before { content: '\e824'; } /* '' */
 .icon-git:before { content: '\e82a'; } /* '' */
 .icon-hg:before { content: '\e82d'; } /* '' */
 .icon-svn:before { content: '\e82e'; } /* '' */
 .icon-comment-add:before { content: '\e82f'; } /* '' */
 .icon-comment-toggle:before { content: '\e830'; } /* '' */
 .icon-rhodecode:before { content: '\e831'; } /* '' */
 .icon-up:before { content: '\e832'; } /* '' */
+.icon-down:before { content: '\e832'; } /* '' */
 .icon-merge:before { content: '\e833'; } /* '' */
 .icon-spin-alt:before { content: '\e834'; } /* '' */
 .icon-spin:before { content: '\e838'; } /* '' */
 .icon-docs:before { content: '\f0c5'; } /* '' */
 .icon-menu:before { content: '\f0c9'; } /* '' */
 .icon-sort:before { content: '\f0dc'; } /* '' */
 .icon-paste:before { content: '\f0ea'; } /* '' */
 .icon-doc-text:before { content: '\f0f6'; } /* '' */
 .icon-plus-squared:before { content: '\f0fe'; } /* '' */
 .icon-angle-left:before { content: '\f104'; } /* '' */
 .icon-angle-right:before { content: '\f105'; } /* '' */
 .icon-angle-up:before { content: '\f106'; } /* '' */
 .icon-angle-down:before { content: '\f107'; } /* '' */
 .icon-circle-empty:before { content: '\f10c'; } /* '' */
 .icon-circle:before { content: '\f111'; } /* '' */
 .icon-folder-empty:before { content: '\f114'; } /* '' */
 .icon-folder-open-empty:before { content: '\f115'; } /* '' */
 .icon-code:before { content: '\f121'; } /* '' */
 .icon-info:before { content: '\f129'; } /* '' */
 .icon-minus-squared:before { content: '\f146'; } /* '' */
 .icon-minus-squared-alt:before { content: '\f147'; } /* '' */
 .icon-doc-inv:before { content: '\f15b'; } /* '' */
 .icon-doc-text-inv:before { content: '\f15c'; } /* '' */
 .icon-plus-squared-alt:before { content: '\f196'; } /* '' */
 .icon-file-code:before { content: '\f1c9'; } /* '' */
 .icon-history:before { content: '\f1da'; } /* '' */
 .icon-circle-thin:before { content: '\f1db'; } /* '' */
 .icon-sliders:before { content: '\f1de'; } /* '' */
 .icon-trash:before { content: '\f1f8'; } /* '' */
 
 
 // MERGED ICONS BASED ON CURRENT ONES
 .icon-repo-group:before { &:extend(.icon-folder-open:before); }
 .icon-repo-private:before { &:extend(.icon-lock:before); }
 .icon-repo-lock:before { &:extend(.icon-lock:before); }
 .icon-unlock-alt:before { &:extend(.icon-unlock:before); }
 .icon-repo-unlock:before { &:extend(.icon-unlock:before); }
 .icon-repo-public:before { &:extend(.icon-unlock:before); }
 .icon-rss-sign:before { &:extend(.icon-feed:before); }
 .icon-code-fork:before {  &:extend(.icon-fork:before);  }
 .icon-arrow_up:before { &:extend(.icon-up:before); }
+.icon-arrow_down:before { &:extend(.icon-down:before); }
 .icon-file:before { &:extend(.icon-file-code:before); }
 .icon-file-text:before { &:extend(.icon-file-code:before); }
 .icon-directory:before { &:extend(.icon-folder:before); }
 .icon-more-linked:before { &:extend(.icon-more:before); }
 .icon-clipboard:before { &:extend(.icon-docs:before); }
 .icon-copy:before { &:extend(.icon-docs:before); }
 .icon-true:before { &:extend(.icon-ok:before); }
 .icon-false:before { &:extend(.icon-delete:before); }
 .icon-expand-linked:before { &:extend(.icon-down:before); }
 .icon-pr-merge-fail:before { &:extend(.icon-delete:before); }
 .icon-wide-mode:before { &:extend(.icon-sort:before); }
 .icon-flag-filled-red:before { &:extend(.icon-flag-filled:before); }
 .icon-user-group-alt:before { &:extend(.icon-group:before); }
 
 // TRANSFORM
 .icon-merge:before {transform: rotate(180deg);}
 .icon-wide-mode:before {transform: rotate(90deg);}
 .icon-options:before {transform: rotate(90deg);}
+.icon-down:before {transform: rotate(180deg);}
+
 
 // -- END ICON CLASSES -- //
 
 
 //--- ICONS STYLING ------------------//
 
 .icon-git { color: @color4 !important; }
 .icon-hg { color: @color8 !important; }
 .icon-svn { color: @color1 !important; }
 .icon-git-inv { color: @color4 !important; }
 .icon-hg-inv { color: @color8 !important; }
 .icon-svn-inv { color: @color1 !important; }
 .icon-repo-lock { color: #FF0000; }
 .icon-repo-unlock { color: #FF0000; }
 .icon-false { color: @grey5 }
 .icon-expand-linked { cursor: pointer; color: @grey3; font-size: 14px }
 .icon-more-linked { cursor: pointer; color: @grey3 }
 .icon-flag-filled-red { color: @color5 !important; }
 .icon-filled-red { color: @color5 !important; }
 
 .repo-switcher-dropdown .select2-result-label {
     .icon-git:before {
         &:extend(.icon-git-transparent:before);
     }
     .icon-hg:before {
         &:extend(.icon-hg-transparent:before);
         color: @alert4;
     }
     .icon-svn:before {
         &:extend(.icon-svn-transparent:before);
     }
 }
 
 .icon-user-group:before {
   &:extend(.icon-group:before);
   margin: 0;
   font-size: 16px;
 }

rhodecode/public/js/src/rhodecode.js

@@ -1,716 +1,724 b''
 // # Copyright (C) 2010-2020 RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # RhodeCode Enterprise Edition, including its added features, Support services,
 // # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 /**
 RhodeCode JS Files
 **/
 
 if (typeof console == "undefined" || typeof console.log == "undefined"){
     console = { log: function() {} }
 }
 
 // TODO: move the following function to submodules
 
 /**
  * show more
  */
 var show_more_event = function(){
   $('table .show_more').click(function(e) {
     var cid = e.target.id.substring(1);
     var button = $(this);
     if (button.hasClass('open')) {
       $('#'+cid).hide();
       button.removeClass('open');
     } else {
       $('#'+cid).show();
       button.addClass('open one');
     }
   });
 };
 
 var compare_radio_buttons = function(repo_name, compare_ref_type){
     $('#compare_action').on('click', function(e){
         e.preventDefault();
 
         var source = $('input[name=compare_source]:checked').val();
         var target = $('input[name=compare_target]:checked').val();
         if(source && target){
             var url_data = {
                 repo_name: repo_name,
                 source_ref: source,
                 source_ref_type: compare_ref_type,
                 target_ref: target,
                 target_ref_type: compare_ref_type,
                 merge: 1
             };
             window.location = pyroutes.url('repo_compare', url_data);
         }
     });
     $('.compare-radio-button').on('click', function(e){
         var source = $('input[name=compare_source]:checked').val();
         var target = $('input[name=compare_target]:checked').val();
         if(source && target){
             $('#compare_action').removeAttr("disabled");
             $('#compare_action').removeClass("disabled");
         }
     })
 };
 
 var showRepoSize = function(target, repo_name, commit_id, callback) {
     var container = $('#' + target);
     var url = pyroutes.url('repo_stats',
       {"repo_name": repo_name, "commit_id": commit_id});
 
     container.show();
     if (!container.hasClass('loaded')) {
         $.ajax({url: url})
             .complete(function (data) {
                 var responseJSON = data.responseJSON;
                 container.addClass('loaded');
                 container.html(responseJSON.size);
                 callback(responseJSON.code_stats)
             })
             .fail(function (data) {
                 console.log('failed to load repo stats');
             });
     }
 
 };
 
 var showRepoStats = function(target, data){
     var container = $('#' + target);
 
     if (container.hasClass('loaded')) {
         return
     }
 
     var total = 0;
     var no_data = true;
     var tbl = document.createElement('table');
     tbl.setAttribute('class', 'trending_language_tbl rctable');
 
     $.each(data, function(key, val){
         total += val.count;
     });
 
     var sortedStats = [];
     for (var obj in data){
         sortedStats.push([obj, data[obj]])
     }
     var sortedData = sortedStats.sort(function (a, b) {
         return b[1].count - a[1].count
     });
     var cnt = 0;
     $.each(sortedData, function(idx, val){
         cnt += 1;
         no_data = false;
 
         var tr = document.createElement('tr');
 
         var key = val[0];
         var obj = {"desc": val[1].desc, "count": val[1].count};
 
         // meta language names
         var td1 = document.createElement('td');
         var trending_language_label = document.createElement('div');
         trending_language_label.innerHTML = obj.desc;
         td1.appendChild(trending_language_label);
 
         // extensions
         var td2 = document.createElement('td');
         var extension = document.createElement('div');
         extension.innerHTML = ".{0}".format(key)
         td2.appendChild(extension);
 
         // number of files
         var td3 = document.createElement('td');
         var file_count = document.createElement('div');
         var percentage_num = Math.round((obj.count / total * 100), 2);
         var label = _ngettext('file', 'files', obj.count);
         file_count.innerHTML = "{0} {1} ({2}%)".format(obj.count, label, percentage_num) ;
         td3.appendChild(file_count);
 
         // percentage
         var td4 = document.createElement('td');
         td4.setAttribute("class", 'trending_language');
 
         var percentage = document.createElement('div');
         percentage.setAttribute('class', 'lang-bar');
         percentage.innerHTML = "&nbsp;";
         percentage.style.width = percentage_num + '%';
         td4.appendChild(percentage);
 
         tr.appendChild(td1);
         tr.appendChild(td2);
         tr.appendChild(td3);
         tr.appendChild(td4);
         tbl.appendChild(tr);
 
     });
 
     $(container).html(tbl);
     $(container).addClass('loaded');
 
     $('#code_stats_show_more').on('click', function (e) {
         e.preventDefault();
         $('.stats_hidden').each(function (idx) {
             $(this).css("display", "");
         });
         $('#code_stats_show_more').hide();
     });
 
 };
 
 // returns a node from given html;
 var fromHTML = function(html){
   var _html = document.createElement('element');
   _html.innerHTML = html;
   return _html;
 };
 
 // Toggle Collapsable Content
 function collapsableContent() {
 
     $('.collapsable-content').not('.no-hide').hide();
 
     $('.btn-collapse').unbind(); //in case we've been here before
     $('.btn-collapse').click(function() {
         var button = $(this);
         var togglename = $(this).data("toggle");
         $('.collapsable-content[data-toggle='+togglename+']').toggle();
         if ($(this).html()=="Show Less")
             $(this).html("Show More");
         else
             $(this).html("Show Less");
     });
 };
 
 var timeagoActivate = function() {
     $("time.timeago").timeago();
 };
 
 
 var clipboardActivate = function() {
     /*
     *
     * <i class="tooltip icon-plus clipboard-action" data-clipboard-text="${commit.raw_id}" title="${_('Copy the full commit id')}"></i>
     * */
     var clipboard = new ClipboardJS('.clipboard-action');
 
     clipboard.on('success', function(e) {
         var callback = function () {
             $(e.trigger).animate({'opacity': 1.00}, 200)
         };
         $(e.trigger).animate({'opacity': 0.15}, 200, callback);
         e.clearSelection();
     });
 };
 
 var tooltipActivate = function () {
     var delay = 50;
     var animation = 'fade';
     var theme = 'tooltipster-shadow';
     var debug = false;
 
     $('.tooltip').tooltipster({
         debug: debug,
         theme: theme,
         animation: animation,
         delay: delay,
         contentCloning: true,
         contentAsHTML: true,
 
         functionBefore: function (instance, helper) {
             var $origin = $(helper.origin);
             var data = '<div style="white-space: pre-wrap">{0}</div>'.format(instance.content());
             instance.content(data);
         }
     });
     var hovercardCache = {};
 
     var loadHoverCard = function (url, altHovercard, callback) {
         var id = url;
 
         if (hovercardCache[id] !== undefined) {
             callback(hovercardCache[id]);
             return true;
         }
 
         hovercardCache[id] = undefined;
         $.get(url, function (data) {
             hovercardCache[id] = data;
             callback(hovercardCache[id]);
             return true;
         }).fail(function (data, textStatus, errorThrown) {
 
             if (parseInt(data.status) === 404) {
                 var msg = "<p>{0}</p>".format(altHovercard || "No Data exists for this hovercard");
             } else {
                 var msg = "<p class='error-message'>Error while fetching hovercard.\nError code {0} ({1}).</p>".format(data.status,data.statusText);
             }
             callback(msg);
             return false
         });
     };
 
     $('.tooltip-hovercard').tooltipster({
         debug: debug,
         theme: theme,
         animation: animation,
         delay: delay,
         interactive: true,
         contentCloning: true,
 
         trigger: 'custom',
         triggerOpen: {
             mouseenter: true,
         },
         triggerClose: {
             mouseleave: true,
             originClick: true,
             touchleave: true
         },
         content: _gettext('Loading...'),
         contentAsHTML: true,
         updateAnimation: null,
 
         functionBefore: function (instance, helper) {
 
             var $origin = $(helper.origin);
 
             // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
             if ($origin.data('loaded') !== true) {
                 var hovercardUrl = $origin.data('hovercardUrl');
                 var altHovercard = $origin.data('hovercardAlt');
 
                 if (hovercardUrl !== undefined && hovercardUrl !== "") {
                     var urlLoad = true;
                     if (hovercardUrl.substr(0, 12) === 'pyroutes.url') {
                         hovercardUrl = eval(hovercardUrl)
                     } else if (hovercardUrl.substr(0, 11) === 'javascript:') {
                         var jsFunc = hovercardUrl.substr(11);
                         urlLoad = false;
                         loaded = true;
                         instance.content(eval(jsFunc))
                     }
 
                     if (urlLoad) {
                         var loaded = loadHoverCard(hovercardUrl, altHovercard, function (data) {
                             instance.content(data);
                         })
                     }
 
                 } else {
                     if ($origin.data('hovercardAltHtml')) {
                         var data =  atob($origin.data('hovercardAltHtml'));
                     } else {
                         var data = '<div style="white-space: pre-wrap">{0}</div>'.format(altHovercard)
                     }
                     var loaded = true;
                     instance.content(data);
                 }
 
                 // to remember that the data has been loaded
                 $origin.data('loaded', loaded);
             }
         }
     })
 };
 
 // Formatting values in a Select2 dropdown of commit references
 var formatSelect2SelectionRefs = function(commit_ref){
   var tmpl = '';
   if (!commit_ref.text || commit_ref.type === 'sha'){
     return commit_ref.text;
   }
   if (commit_ref.type === 'branch'){
     tmpl = tmpl.concat('<i class="icon-branch"></i> ');
   } else if (commit_ref.type === 'tag'){
     tmpl = tmpl.concat('<i class="icon-tag"></i> ');
   } else if (commit_ref.type === 'book'){
     tmpl = tmpl.concat('<i class="icon-bookmark"></i> ');
   }
   return tmpl.concat(escapeHtml(commit_ref.text));
 };
 
 // takes a given html element and scrolls it down offset pixels
 function offsetScroll(element, offset) {
     setTimeout(function() {
         var location = element.offset().top;
         // some browsers use body, some use html
         $('html, body').animate({ scrollTop: (location - offset) });
     }, 100);
 }
 
 // scroll an element `percent`% from the top of page in `time` ms
 function scrollToElement(element, percent, time) {
     percent = (percent === undefined ? 25 : percent);
     time = (time === undefined ? 100 : time);
 
     var $element = $(element);
     if ($element.length == 0) {
         throw('Cannot scroll to {0}'.format(element))
     }
     var elOffset = $element.offset().top;
     var elHeight = $element.height();
     var windowHeight = $(window).height();
     var offset = elOffset;
     if (elHeight < windowHeight) {
         offset = elOffset - ((windowHeight / (100 / percent)) - (elHeight / 2));
     }
     setTimeout(function() {
         $('html, body').animate({ scrollTop: offset});
     }, time);
 }
 
 /**
  * global hooks after DOM is loaded
  */
 $(document).ready(function() {
     firefoxAnchorFix();
 
     $('.navigation a.menulink').on('click', function(e){
         var menuitem = $(this).parent('li');
         if (menuitem.hasClass('open')) {
             menuitem.removeClass('open');
         } else {
             menuitem.addClass('open');
             $(document).on('click', function(event) {
                 if (!$(event.target).closest(menuitem).length) {
                     menuitem.removeClass('open');
                 }
             });
         }
     });
 
     $('body').on('click', '.cb-lineno a', function(event) {
         function sortNumber(a,b) {
             return a - b;
         }
 
         var lineNo = $(this).data('lineNo');
         var lineName = $(this).attr('name');
 
         if (lineNo) {
             var prevLine = $('.cb-line-selected a').data('lineNo');
 
             // on shift, we do a range selection, if we got previous line
             if (event.shiftKey && prevLine !== undefined) {
                 var prevLine = parseInt(prevLine);
                 var nextLine = parseInt(lineNo);
                 var pos = [prevLine, nextLine].sort(sortNumber);
                 var anchor = '#L{0}-{1}'.format(pos[0], pos[1]);
 
             // single click
             } else {
                 var nextLine = parseInt(lineNo);
                 var pos = [nextLine, nextLine];
                 var anchor = '#L{0}'.format(pos[0]);
 
             }
             // highlight
             var range = [];
             for (var i = pos[0]; i <= pos[1]; i++) {
                 range.push(i);
             }
             // clear old selected lines
             $('.cb-line-selected').removeClass('cb-line-selected');
 
             $.each(range, function (i, lineNo) {
                 var line_td = $('td.cb-lineno#L' + lineNo);
 
                 if (line_td.length) {
                     line_td.addClass('cb-line-selected'); // line number td
                     line_td.prev().addClass('cb-line-selected'); // line data
                     line_td.next().addClass('cb-line-selected'); // line content
                 }
             });
 
         } else if (lineName !== undefined) { // lineName only occurs in diffs
             // clear old selected lines
             $('td.cb-line-selected').removeClass('cb-line-selected');
             var anchor = '#{0}'.format(lineName);
             var diffmode = templateContext.session_attrs.diffmode || "sideside";
 
             if (diffmode === "unified") {
                 $(this).closest('tr').find('td').addClass('cb-line-selected');
             } else {
                 var activeTd = $(this).closest('td');
                 activeTd.addClass('cb-line-selected');
                 activeTd.next('td').addClass('cb-line-selected');
             }
 
         }
 
         // Replace URL without jumping to it if browser supports.
         // Default otherwise
         if (history.pushState && anchor !== undefined) {
             var new_location = location.href.rstrip('#');
             if (location.hash) {
                 // location without hash
                 new_location = new_location.replace(location.hash, "");
             }
 
             // Make new anchor url
             new_location = new_location + anchor;
             history.pushState(true, document.title, new_location);
 
             return false;
         }
 
     });
 
     $('.collapse_file').on('click', function(e) {
         e.stopPropagation();
         if ($(e.target).is('a')) { return; }
         var node = $(e.delegateTarget).first();
         var icon = $($(node.children().first()).children().first());
         var id = node.attr('fid');
         var target = $('#'+id);
         var tr = $('#tr_'+id);
         var diff = $('#diff_'+id);
         if(node.hasClass('expand_file')){
             node.removeClass('expand_file');
             icon.removeClass('expand_file_icon');
             node.addClass('collapse_file');
             icon.addClass('collapse_file_icon');
             diff.show();
             tr.show();
             target.show();
         } else {
             node.removeClass('collapse_file');
             icon.removeClass('collapse_file_icon');
             node.addClass('expand_file');
             icon.addClass('expand_file_icon');
             diff.hide();
             tr.hide();
             target.hide();
         }
     });
 
     $('#expand_all_files').click(function() {
         $('.expand_file').each(function() {
             var node = $(this);
             var icon = $($(node.children().first()).children().first());
             var id = $(this).attr('fid');
             var target = $('#'+id);
             var tr = $('#tr_'+id);
             var diff = $('#diff_'+id);
             node.removeClass('expand_file');
             icon.removeClass('expand_file_icon');
             node.addClass('collapse_file');
             icon.addClass('collapse_file_icon');
             diff.show();
             tr.show();
             target.show();
         });
     });
 
     $('#collapse_all_files').click(function() {
         $('.collapse_file').each(function() {
             var node = $(this);
             var icon = $($(node.children().first()).children().first());
             var id = $(this).attr('fid');
             var target = $('#'+id);
             var tr = $('#tr_'+id);
             var diff = $('#diff_'+id);
             node.removeClass('collapse_file');
             icon.removeClass('collapse_file_icon');
             node.addClass('expand_file');
             icon.addClass('expand_file_icon');
             diff.hide();
             tr.hide();
             target.hide();
         });
     });
 
     // Mouse over behavior for comments and line selection
 
     // Select the line that comes from the url anchor
     // At the time of development, Chrome didn't seem to support jquery's :target
     // element, so I had to scroll manually
 
     if (location.hash) {
         var result = splitDelimitedHash(location.hash);
 
         var loc = result.loc;
 
         if (loc.length > 1) {
 
             var highlightable_line_tds = [];
 
             // source code line format
             var page_highlights = loc.substring(loc.indexOf('#') + 1).split('L');
 
             // multi-line HL, for files
             if (page_highlights.length > 1) {
                 var highlight_ranges = page_highlights[1].split(",");
                 var h_lines = [];
                 for (var pos in highlight_ranges) {
                     var _range = highlight_ranges[pos].split('-');
                     if (_range.length === 2) {
                         var start = parseInt(_range[0]);
                         var end = parseInt(_range[1]);
                         if (start < end) {
                             for (var i = start; i <= end; i++) {
                                 h_lines.push(i);
                             }
                         }
                     } else {
                         h_lines.push(parseInt(highlight_ranges[pos]));
                     }
                 }
                 for (pos in h_lines) {
                     var line_td = $('td.cb-lineno#L' + h_lines[pos]);
                     if (line_td.length) {
                         highlightable_line_tds.push(line_td);
                     }
                 }
             }
 
             // now check a direct id reference of line in diff / pull-request page)
             if ($(loc).length > 0 && $(loc).hasClass('cb-lineno')) {
                 highlightable_line_tds.push($(loc));
             }
 
             // mark diff lines as selected
             $.each(highlightable_line_tds, function (i, $td) {
                 $td.addClass('cb-line-selected'); // line number td
                 $td.prev().addClass('cb-line-selected'); // line data
                 $td.next().addClass('cb-line-selected'); // line content
             });
 
             if (highlightable_line_tds.length > 0) {
                 var $first_line_td = highlightable_line_tds[0];
                 scrollToElement($first_line_td);
                 $.Topic('/ui/plugins/code/anchor_focus').prepareOrPublish({
                     td: $first_line_td,
                     remainder: result.remainder
                 });
             } else {
                 // case for direct anchor to comments
                 var $line = $(loc);
 
                 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) {
                     $line.addClass('comment-selected-hl');
                     offsetScroll($line, 70);
                 }
                 if (!$line.hasClass('comment-outdated') && result.remainder === '/ReplyToComment') {
                     $line.parent().find('.cb-comment-add-button').trigger('click');
                 }
             }
 
         }
     }
     collapsableContent();
 });
 
 var feedLifetimeOptions = function(query, initialData){
     var data = {results: []};
     var isQuery = typeof query.term !== 'undefined';
 
     var section = _gettext('Lifetime');
     var children = [];
 
     //filter results
     $.each(initialData.results, function(idx, value) {
 
         if (!isQuery || query.term.length === 0 || value.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
             children.push({
                 'id': this.id,
                 'text': this.text
             })
         }
 
     });
     data.results.push({
         'text': section,
         'children': children
     });
 
     if (isQuery) {
 
         var now = moment.utc();
 
         var parseQuery = function(entry, now){
             var fmt = 'DD/MM/YYYY H:mm';
             var parsed = moment.utc(entry, fmt);
             var diffInMin = parsed.diff(now, 'minutes');
 
             if (diffInMin > 0){
                 return {
                     id: diffInMin,
                     text: parsed.format(fmt)
                 }
             } else {
                 return {
                     id: undefined,
                     text: parsed.format('DD/MM/YYYY') + ' ' + _gettext('date not in future')
                 }
             }
 
 
         };
 
         data.results.push({
             'text': _gettext('Specified expiration date'),
             'children': [{
                 'id': parseQuery(query.term, now).id,
                 'text': parseQuery(query.term, now).text
             }]
         });
     }
 
     query.callback(data);
 };
 
 /*
 * Retrievew via  templateContext.session_attrs.key
 * */
 var storeUserSessionAttr = function (key, val) {
 
     var postData = {
         'key': key,
         'val': val,
         'csrf_token': CSRF_TOKEN
     };
 
     var success = function(o) {
         return true
     };
 
     ajaxPOST(pyroutes.url('store_user_session_value'), postData, success);
     return false;
 };
 
 
 var getUserSessionAttr = function(key) {
     var storeKey = templateContext.session_attrs;
     var val = storeKey[key]
     if (val !== undefined) {
         return JSON.parse(val)
     }
     return null
 }
+
+window.scrollDown = function () {
+    $(document).scrollTop($(document).height());
+}
+
+window.scrollUp = function scrollUp() {
+    $(window).scrollTop(0);
+}

rhodecode/public/js/src/rhodecode/pullrequests.js

@@ -1,1170 +1,1173 b''
 // # Copyright (C) 2010-2020 RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # RhodeCode Enterprise Edition, including its added features, Support services,
 // # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 
 var prButtonLockChecks = {
   'compare': false,
   'reviewers': false
 };
 
 /**
  * lock button until all checks and loads are made. E.g reviewer calculation
  * should prevent from submitting a PR
  * @param lockEnabled
  * @param msg
  * @param scope
  */
 var prButtonLock = function(lockEnabled, msg, scope) {
       scope = scope || 'all';
       if (scope == 'all'){
           prButtonLockChecks['compare'] = !lockEnabled;
           prButtonLockChecks['reviewers'] = !lockEnabled;
       } else if (scope == 'compare') {
           prButtonLockChecks['compare'] = !lockEnabled;
       } else if (scope == 'reviewers'){
           prButtonLockChecks['reviewers'] = !lockEnabled;
       }
       var checksMeet = prButtonLockChecks.compare && prButtonLockChecks.reviewers;
       if (lockEnabled) {
           $('#pr_submit').attr('disabled', 'disabled');
       }
       else if (checksMeet) {
           $('#pr_submit').removeAttr('disabled');
       }
 
       if (msg) {
           $('#pr_open_message').html(msg);
       }
 };
 
 
 /**
 Generate Title and Description for a PullRequest.
 In case of 1 commits, the title and description is that one commit
 in case of multiple commits, we iterate on them with max N number of commits,
 and build description in a form
 - commitN
 - commitN+1
 ...
 
 Title is then constructed from branch names, or other references,
 replacing '-' and '_' into spaces
 
 * @param sourceRef
 * @param elements
 * @param limit
 * @returns {*[]}
 */
 var getTitleAndDescription = function(sourceRefType, sourceRef, elements, limit) {
   var title = '';
   var desc = '';
 
   $.each($(elements).get().reverse().slice(0, limit), function(idx, value) {
       var rawMessage = value['message'];
       desc += '- ' + rawMessage.split('\n')[0].replace(/\n+$/, "") + '\n';
   });
   // only 1 commit, use commit message as title
   if (elements.length === 1) {
       var rawMessage = elements[0]['message'];
       title = rawMessage.split('\n')[0];
   }
   else {
       // use reference name
       var normalizedRef = sourceRef.replace(/-/g, ' ').replace(/_/g, ' ').capitalizeFirstLetter()
       var refType = sourceRefType;
       title = 'Changes from {0}: {1}'.format(refType, normalizedRef);
   }
 
   return [title, desc]
 };
 
 
 window.ReviewersController = function () {
     var self = this;
     this.$loadingIndicator = $('.calculate-reviewers');
     this.$reviewRulesContainer = $('#review_rules');
     this.$rulesList = this.$reviewRulesContainer.find('.pr-reviewer-rules');
     this.$userRule = $('.pr-user-rule-container');
     this.$reviewMembers = $('#review_members');
     this.$observerMembers = $('#observer_members');
 
     this.currentRequest = null;
     this.diffData = null;
     this.enabledRules = [];
     // sync with db.py entries
     this.ROLE_REVIEWER = 'reviewer';
     this.ROLE_OBSERVER = 'observer'
 
     //dummy handler, we might register our own later
     this.diffDataHandler = function (data) {};
 
     this.defaultForbidUsers = function () {
         return [
             {
                 'username': 'default',
                 'user_id': templateContext.default_user.user_id
             }
         ];
     };
 
     // init default forbidden users
     this.forbidUsers = this.defaultForbidUsers();
 
     this.hideReviewRules = function () {
         self.$reviewRulesContainer.hide();
         $(self.$userRule.selector).hide();
     };
 
     this.showReviewRules = function () {
         self.$reviewRulesContainer.show();
         $(self.$userRule.selector).show();
     };
 
     this.addRule = function (ruleText) {
         self.showReviewRules();
         self.enabledRules.push(ruleText);
         return '<div>- {0}</div>'.format(ruleText)
     };
 
     this.increaseCounter = function(role) {
         if (role === self.ROLE_REVIEWER) {
             var $elem = $('#reviewers-cnt')
             var cnt = parseInt($elem.data('count') || 0)
             cnt +=1
             $elem.html(cnt);
             $elem.data('count', cnt);
         }
         else if (role === self.ROLE_OBSERVER) {
             var $elem = $('#observers-cnt');
             var cnt = parseInt($elem.data('count') || 0)
             cnt +=1
             $elem.html(cnt);
             $elem.data('count', cnt);
         }
     }
 
     this.resetCounter = function () {
         var $elem = $('#reviewers-cnt');
 
         $elem.data('count', 0);
         $elem.html(0);
 
         var $elem = $('#observers-cnt');
 
         $elem.data('count', 0);
         $elem.html(0);
     }
 
     this.loadReviewRules = function (data) {
         self.diffData = data;
 
         // reset forbidden Users
         this.forbidUsers = self.defaultForbidUsers();
 
         // reset state of review rules
         self.$rulesList.html('');
 
         if (!data || data.rules === undefined || $.isEmptyObject(data.rules)) {
             // default rule, case for older repo that don't have any rules stored
             self.$rulesList.append(
                 self.addRule(_gettext('All reviewers must vote.'))
             );
             return self.forbidUsers
         }
 
         if (data.rules.forbid_adding_reviewers) {
             $('#add_reviewer_input').remove();
         }
 
         if (data.rules_data !== undefined && data.rules_data.forbidden_users !== undefined) {
             $.each(data.rules_data.forbidden_users, function(idx, val){
                 self.forbidUsers.push(val)
             })
         }
 
         if (data.rules_humanized !== undefined && data.rules_humanized.length > 0) {
             $.each(data.rules_humanized, function(idx, val) {
                 self.$rulesList.append(
                     self.addRule(val)
                 )
             })
         } else {
             // we don't have any rules set, so we inform users about it
             self.$rulesList.append(
                 self.addRule(_gettext('No additional review rules set.'))
             )
         }
 
         return self.forbidUsers
     };
 
     this.emptyTables = function () {
         self.emptyReviewersTable();
         self.emptyObserversTable();
 
         // Also reset counters.
         self.resetCounter();
     }
 
     this.emptyReviewersTable = function (withText) {
         self.$reviewMembers.empty();
         if (withText !== undefined) {
             self.$reviewMembers.html(withText)
         }
     };
 
     this.emptyObserversTable = function (withText) {
         self.$observerMembers.empty();
         if (withText !== undefined) {
             self.$observerMembers.html(withText)
         }
     }
 
     this.loadDefaultReviewers = function (sourceRepo, sourceRef, targetRepo, targetRef) {
 
         if (self.currentRequest) {
             // make sure we cleanup old running requests before triggering this again
             self.currentRequest.abort();
         }
 
         self.$loadingIndicator.show();
 
         // reset reviewer/observe members
         self.emptyTables();
 
         prButtonLock(true, null, 'reviewers');
         $('#user').hide(); // hide user autocomplete before load
         $('#observer').hide(); //hide observer autocomplete before load
 
         // lock PR button, so we cannot send PR before it's calculated
         prButtonLock(true, _gettext('Loading diff ...'), 'compare');
 
         if (sourceRef.length !== 3 || targetRef.length !== 3) {
             // don't load defaults in case we're missing some refs...
             self.$loadingIndicator.hide();
             return
         }
 
         var url = pyroutes.url('repo_default_reviewers_data',
             {
                 'repo_name': templateContext.repo_name,
                 'source_repo': sourceRepo,
                 'source_ref_type': sourceRef[0],
                 'source_ref_name': sourceRef[1],
                 'source_ref': sourceRef[2],
                 'target_repo': targetRepo,
                 'target_ref': targetRef[2],
                 'target_ref_type': targetRef[0],
                 'target_ref_name': targetRef[1]
             });
 
         self.currentRequest = $.ajax({
             url: url,
             headers: {'X-PARTIAL-XHR': true},
             type: 'GET',
             success: function (data) {
 
                 self.currentRequest = null;
 
                 // review rules
                 self.loadReviewRules(data);
                 var diffHandled = self.handleDiffData(data["diff_info"]);
                 if (diffHandled === false) {
                     return
                 }
 
                 for (var i = 0; i < data.reviewers.length; i++) {
                     var reviewer = data.reviewers[i];
                     // load reviewer rules from the repo data
                     self.addMember(reviewer, reviewer.reasons, reviewer.mandatory, reviewer.role);
                 }
 
 
                 self.$loadingIndicator.hide();
                 prButtonLock(false, null, 'reviewers');
 
                 $('#user').show(); // show user autocomplete before load
                 $('#observer').show(); // show observer autocomplete before load
 
                 var commitElements = data["diff_info"]['commits'];
 
                 if (commitElements.length === 0) {
                     var noCommitsMsg = '<span class="alert-text-warning">{0}</span>'.format(
                         _gettext('There are no commits to merge.'));
                     prButtonLock(true, noCommitsMsg, 'all');
 
                 } else {
                     // un-lock PR button, so we cannot send PR before it's calculated
                     prButtonLock(false, null, 'compare');
                 }
 
             },
             error: function (jqXHR, textStatus, errorThrown) {
                 var prefix = "Loading diff and reviewers/observers failed\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
             }
         });
 
     };
 
     // check those, refactor
     this.removeMember = function (reviewer_id, mark_delete) {
         var reviewer = $('#reviewer_{0}'.format(reviewer_id));
 
         if (typeof (mark_delete) === undefined) {
             mark_delete = false;
         }
 
         if (mark_delete === true) {
             if (reviewer) {
                 // now delete the input
                 $('#reviewer_{0} input'.format(reviewer_id)).remove();
                 $('#reviewer_{0}_rules input'.format(reviewer_id)).remove();
                 // mark as to-delete
                 var obj = $('#reviewer_{0}_name'.format(reviewer_id));
                 obj.addClass('to-delete');
                 obj.css({"text-decoration": "line-through", "opacity": 0.5});
             }
         } else {
             $('#reviewer_{0}'.format(reviewer_id)).remove();
         }
     };
 
     this.addMember = function (reviewer_obj, reasons, mandatory, role) {
 
         var id = reviewer_obj.user_id;
         var username = reviewer_obj.username;
 
         reasons = reasons || [];
         mandatory = mandatory || false;
         role = role || self.ROLE_REVIEWER
 
         // register current set IDS to check if we don't have this ID already in
         // and prevent duplicates
         var currentIds = [];
 
         $.each($('.reviewer_entry'), function (index, value) {
             currentIds.push($(value).data('reviewerUserId'))
         })
 
         var userAllowedReview = function (userId) {
             var allowed = true;
             $.each(self.forbidUsers, function (index, member_data) {
                 if (parseInt(userId) === member_data['user_id']) {
                     allowed = false;
                     return false // breaks the loop
                 }
             });
             return allowed
         };
 
         var userAllowed = userAllowedReview(id);
 
         if (!userAllowed) {
             alert(_gettext('User `{0}` not allowed to be a reviewer').format(username));
         } else {
             // only add if it's not there
             var alreadyReviewer = currentIds.indexOf(id) != -1;
 
             if (alreadyReviewer) {
                 alert(_gettext('User `{0}` already in reviewers/observers').format(username));
             } else {
 
                 var reviewerEntry = renderTemplate('reviewMemberEntry', {
                     'member': reviewer_obj,
                     'mandatory': mandatory,
                     'role': role,
                     'reasons': reasons,
                     'allowed_to_update': true,
                     'review_status': 'not_reviewed',
                     'review_status_label': _gettext('Not Reviewed'),
                     'user_group': reviewer_obj.user_group,
                     'create': true,
                     'rule_show': true,
+                    'rhodecode_user': templateContext.rhodecode_user
                 })
 
                 if (role === self.ROLE_REVIEWER) {
                     $(self.$reviewMembers.selector).append(reviewerEntry);
                     self.increaseCounter(self.ROLE_REVIEWER);
                     $('#reviewer-empty-msg').remove()
                 }
                 else if (role === self.ROLE_OBSERVER) {
                     $(self.$observerMembers.selector).append(reviewerEntry);
                     self.increaseCounter(self.ROLE_OBSERVER);
                     $('#observer-empty-msg').remove();
                 }
 
                 tooltipActivate();
             }
         }
 
     };
 
     this.updateReviewers = function (repo_name, pull_request_id, role) {
         if (role === 'reviewer') {
             var postData = $('#reviewers input').serialize();
             _updatePullRequest(repo_name, pull_request_id, postData);
         } else if (role === 'observer') {
             var postData = $('#observers input').serialize();
             _updatePullRequest(repo_name, pull_request_id, postData);
         }
     };
 
     this.handleDiffData = function (data) {
         return self.diffDataHandler(data)
     }
 };
 
 
 var _updatePullRequest = function(repo_name, pull_request_id, postData) {
     var url = pyroutes.url(
         'pullrequest_update',
         {"repo_name": repo_name, "pull_request_id": pull_request_id});
     if (typeof postData === 'string' ) {
         postData += '&csrf_token=' + CSRF_TOKEN;
     } else {
         postData.csrf_token = CSRF_TOKEN;
     }
 
     var success = function(o) {
         var redirectUrl = o['redirect_url'];
         if (redirectUrl !== undefined && redirectUrl !== null && redirectUrl !== '') {
             window.location = redirectUrl;
         } else {
             window.location.reload();
         }
     };
 
     ajaxPOST(url, postData, success);
 };
 
 /**
  * PULL REQUEST update commits
  */
 var updateCommits = function(repo_name, pull_request_id, force) {
     var postData = {
         'update_commits': true
     };
     if (force !== undefined && force === true) {
         postData['force_refresh'] = true
     }
     _updatePullRequest(repo_name, pull_request_id, postData);
 };
 
 
 /**
  * PULL REQUEST edit info
  */
 var editPullRequest = function(repo_name, pull_request_id, title, description, renderer) {
     var url = pyroutes.url(
         'pullrequest_update',
         {"repo_name": repo_name, "pull_request_id": pull_request_id});
 
     var postData = {
         'title': title,
         'description': description,
         'description_renderer': renderer,
         'edit_pull_request': true,
         'csrf_token': CSRF_TOKEN
     };
     var success = function(o) {
         window.location.reload();
     };
     ajaxPOST(url, postData, success);
 };
 
 
 /**
  * autocomplete handler for reviewers/observers
  */
 var autoCompleteHandler = function (inputId, controller, role) {
 
     return function (element, data) {
         var mandatory = false;
         var reasons = [_gettext('added manually by "{0}"').format(
             templateContext.rhodecode_user.username)];
 
         // add whole user groups
         if (data.value_type == 'user_group') {
             reasons.push(_gettext('member of "{0}"').format(data.value_display));
 
             $.each(data.members, function (index, member_data) {
                 var reviewer = member_data;
                 reviewer['user_id'] = member_data['id'];
                 reviewer['gravatar_link'] = member_data['icon_link'];
                 reviewer['user_link'] = member_data['profile_link'];
                 reviewer['rules'] = [];
                 controller.addMember(reviewer, reasons, mandatory, role);
             })
         }
         // add single user
         else {
             var reviewer = data;
             reviewer['user_id'] = data['id'];
             reviewer['gravatar_link'] = data['icon_link'];
             reviewer['user_link'] = data['profile_link'];
             reviewer['rules'] = [];
             controller.addMember(reviewer, reasons, mandatory, role);
         }
 
         $(inputId).val('');
     }
 }
 
 /**
  * Reviewer autocomplete
  */
 var ReviewerAutoComplete = function (inputId, controller) {
     var self = this;
     self.controller = controller;
     self.inputId = inputId;
     var handler = autoCompleteHandler(inputId, controller, controller.ROLE_REVIEWER);
 
     $(inputId).autocomplete({
         serviceUrl: pyroutes.url('user_autocomplete_data'),
         minChars: 2,
         maxHeight: 400,
         deferRequestBy: 300, //miliseconds
         showNoSuggestionNotice: true,
         tabDisabled: true,
         autoSelectFirst: true,
         params: {
             user_id: templateContext.rhodecode_user.user_id,
             user_groups: true,
             user_groups_expand: true,
             skip_default_user: true
         },
         formatResult: autocompleteFormatResult,
         lookupFilter: autocompleteFilterResult,
         onSelect: handler
     });
 };
 
 /**
  * Observers autocomplete
  */
 var ObserverAutoComplete = function(inputId, controller) {
     var self = this;
     self.controller = controller;
     self.inputId = inputId;
     var handler = autoCompleteHandler(inputId, controller, controller.ROLE_OBSERVER);
 
     $(inputId).autocomplete({
         serviceUrl: pyroutes.url('user_autocomplete_data'),
         minChars: 2,
         maxHeight: 400,
         deferRequestBy: 300, //miliseconds
         showNoSuggestionNotice: true,
         tabDisabled: true,
         autoSelectFirst: true,
         params: {
             user_id: templateContext.rhodecode_user.user_id,
             user_groups: true,
             user_groups_expand: true,
             skip_default_user: true
         },
         formatResult: autocompleteFormatResult,
         lookupFilter: autocompleteFilterResult,
         onSelect: handler
     });
 }
 
 
 window.VersionController = function () {
     var self = this;
     this.$verSource = $('input[name=ver_source]');
     this.$verTarget = $('input[name=ver_target]');
     this.$showVersionDiff = $('#show-version-diff');
 
     this.adjustRadioSelectors = function (curNode) {
         var getVal = function (item) {
             if (item === 'latest') {
                 return Number.MAX_SAFE_INTEGER
             }
             else {
                 return parseInt(item)
             }
         };
 
         var curVal = getVal($(curNode).val());
         var cleared = false;
 
         $.each(self.$verSource, function (index, value) {
             var elVal = getVal($(value).val());
 
             if (elVal > curVal) {
                 if ($(value).is(':checked')) {
                     cleared = true;
                 }
                 $(value).attr('disabled', 'disabled');
                 $(value).removeAttr('checked');
                 $(value).css({'opacity': 0.1});
             }
             else {
                 $(value).css({'opacity': 1});
                 $(value).removeAttr('disabled');
             }
         });
 
         if (cleared) {
             // if we unchecked an active, set the next one to same loc.
             $(this.$verSource).filter('[value={0}]'.format(
                 curVal)).attr('checked', 'checked');
         }
 
         self.setLockAction(false,
             $(curNode).data('verPos'),
             $(this.$verSource).filter(':checked').data('verPos')
         );
     };
 
 
     this.attachVersionListener = function () {
         self.$verTarget.change(function (e) {
             self.adjustRadioSelectors(this)
         });
         self.$verSource.change(function (e) {
             self.adjustRadioSelectors(self.$verTarget.filter(':checked'))
         });
     };
 
     this.init = function () {
 
         var curNode = self.$verTarget.filter(':checked');
         self.adjustRadioSelectors(curNode);
         self.setLockAction(true);
         self.attachVersionListener();
 
     };
 
     this.setLockAction = function (state, selectedVersion, otherVersion) {
         var $showVersionDiff = this.$showVersionDiff;
 
         if (state) {
             $showVersionDiff.attr('disabled', 'disabled');
             $showVersionDiff.addClass('disabled');
             $showVersionDiff.html($showVersionDiff.data('labelTextLocked'));
         }
         else {
             $showVersionDiff.removeAttr('disabled');
             $showVersionDiff.removeClass('disabled');
 
             if (selectedVersion == otherVersion) {
                 $showVersionDiff.html($showVersionDiff.data('labelTextShow'));
             } else {
                 $showVersionDiff.html($showVersionDiff.data('labelTextDiff'));
             }
         }
 
     };
 
     this.showVersionDiff = function () {
         var target = self.$verTarget.filter(':checked');
         var source = self.$verSource.filter(':checked');
 
         if (target.val() && source.val()) {
             var params = {
                 'pull_request_id': templateContext.pull_request_data.pull_request_id,
                 'repo_name': templateContext.repo_name,
                 'version': target.val(),
                 'from_version': source.val()
             };
             window.location = pyroutes.url('pullrequest_show', params)
         }
 
         return false;
     };
 
     this.toggleVersionView = function (elem) {
 
         if (this.$showVersionDiff.is(':visible')) {
             $('.version-pr').hide();
             this.$showVersionDiff.hide();
             $(elem).html($(elem).data('toggleOn'))
         } else {
             $('.version-pr').show();
             this.$showVersionDiff.show();
             $(elem).html($(elem).data('toggleOff'))
         }
 
         return false
     };
 
 };
 
 
 window.UpdatePrController = function () {
     var self = this;
     this.$updateCommits = $('#update_commits');
     this.$updateCommitsSwitcher = $('#update_commits_switcher');
 
     this.lockUpdateButton = function (label) {
         self.$updateCommits.attr('disabled', 'disabled');
         self.$updateCommitsSwitcher.attr('disabled', 'disabled');
 
         self.$updateCommits.addClass('disabled');
         self.$updateCommitsSwitcher.addClass('disabled');
 
         self.$updateCommits.removeClass('btn-primary');
         self.$updateCommitsSwitcher.removeClass('btn-primary');
 
         self.$updateCommits.text(_gettext(label));
     };
 
     this.isUpdateLocked = function () {
         return self.$updateCommits.attr('disabled') !== undefined;
     };
 
     this.updateCommits = function (curNode) {
         if (self.isUpdateLocked()) {
             return
         }
         self.lockUpdateButton(_gettext('Updating...'));
         updateCommits(
             templateContext.repo_name,
             templateContext.pull_request_data.pull_request_id);
     };
 
     this.forceUpdateCommits = function () {
         if (self.isUpdateLocked()) {
             return
         }
         self.lockUpdateButton(_gettext('Force updating...'));
         var force = true;
         updateCommits(
             templateContext.repo_name,
             templateContext.pull_request_data.pull_request_id, force);
     };
 };
 
 
 /**
  * Reviewer display panel
  */
 window.ReviewersPanel = {
     editButton: null,
     closeButton: null,
     addButton: null,
     removeButtons: null,
     reviewRules: null,
     setReviewers: null,
     controller: null,
 
     setSelectors: function () {
         var self = this;
         self.editButton = $('#open_edit_reviewers');
         self.closeButton =$('#close_edit_reviewers');
         self.addButton = $('#add_reviewer');
         self.removeButtons = $('.reviewer_member_remove,.reviewer_member_mandatory_remove');
     },
 
     init: function (controller, reviewRules, setReviewers) {
         var self = this;
         self.setSelectors();
 
         self.controller = controller;
         self.reviewRules = reviewRules;
         self.setReviewers = setReviewers;
 
         self.editButton.on('click', function (e) {
             self.edit();
         });
         self.closeButton.on('click', function (e) {
             self.close();
             self.renderReviewers();
         });
 
         self.renderReviewers();
 
     },
 
     renderReviewers: function () {
         var self = this;
 
         if (self.setReviewers.reviewers === undefined) {
             return
         }
         if (self.setReviewers.reviewers.length === 0) {
             self.controller.emptyReviewersTable('<tr id="reviewer-empty-msg"><td colspan="6">No reviewers</td></tr>');
             return
         }
 
         self.controller.emptyReviewersTable();
 
         $.each(self.setReviewers.reviewers, function (key, val) {
 
             var member = val;
             if (member.role === self.controller.ROLE_REVIEWER) {
                 var entry = renderTemplate('reviewMemberEntry', {
                     'member': member,
                     'mandatory': member.mandatory,
                     'role': member.role,
                     'reasons': member.reasons,
                     'allowed_to_update': member.allowed_to_update,
                     'review_status': member.review_status,
                     'review_status_label': member.review_status_label,
                     'user_group': member.user_group,
-                    'create': false
+                    'create': false,
+                    'rhodecode_user': templateContext.rhodecode_user
                 });
 
                 $(self.controller.$reviewMembers.selector).append(entry)
             }
         });
 
         tooltipActivate();
     },
 
     edit: function (event) {
         var self = this;
         self.editButton.hide();
         self.closeButton.show();
         self.addButton.show();
         $(self.removeButtons.selector).css('visibility', 'visible');
         // review rules
         self.controller.loadReviewRules(this.reviewRules);
     },
 
     close: function (event) {
         var self = this;
         this.editButton.show();
         this.closeButton.hide();
         this.addButton.hide();
         $(this.removeButtons.selector).css('visibility', 'hidden');
         // hide review rules
         self.controller.hideReviewRules();
     }
 };
 
 /**
  * Reviewer display panel
  */
 window.ObserversPanel = {
     editButton: null,
     closeButton: null,
     addButton: null,
     removeButtons: null,
     reviewRules: null,
     setReviewers: null,
     controller: null,
 
     setSelectors: function () {
         var self = this;
         self.editButton = $('#open_edit_observers');
         self.closeButton =$('#close_edit_observers');
         self.addButton = $('#add_observer');
         self.removeButtons = $('.observer_member_remove,.observer_member_mandatory_remove');
     },
 
     init: function (controller, reviewRules, setReviewers) {
         var self = this;
         self.setSelectors();
 
         self.controller = controller;
         self.reviewRules = reviewRules;
         self.setReviewers = setReviewers;
 
         self.editButton.on('click', function (e) {
             self.edit();
         });
         self.closeButton.on('click', function (e) {
             self.close();
             self.renderObservers();
         });
 
         self.renderObservers();
 
     },
 
     renderObservers: function () {
         var self = this;
         if (self.setReviewers.observers === undefined) {
             return
         }
         if (self.setReviewers.observers.length === 0) {
             self.controller.emptyObserversTable('<tr id="observer-empty-msg"><td colspan="6">No observers</td></tr>');
             return
         }
 
         self.controller.emptyObserversTable();
 
         $.each(self.setReviewers.observers, function (key, val) {
             var member = val;
             if (member.role === self.controller.ROLE_OBSERVER) {
                 var entry = renderTemplate('reviewMemberEntry', {
                     'member': member,
                     'mandatory': member.mandatory,
                     'role': member.role,
                     'reasons': member.reasons,
                     'allowed_to_update': member.allowed_to_update,
                     'review_status': member.review_status,
                     'review_status_label': member.review_status_label,
                     'user_group': member.user_group,
-                    'create': false
+                    'create': false,
+                    'rhodecode_user': templateContext.rhodecode_user
                 });
 
                 $(self.controller.$observerMembers.selector).append(entry)
             }
         });
 
         tooltipActivate();
     },
 
     edit: function (event) {
         this.editButton.hide();
         this.closeButton.show();
         this.addButton.show();
         $(this.removeButtons.selector).css('visibility', 'visible');
     },
 
     close: function (event) {
         this.editButton.show();
         this.closeButton.hide();
         this.addButton.hide();
         $(this.removeButtons.selector).css('visibility', 'hidden');
     }
 
 };
 
 window.PRDetails = {
     editButton: null,
     closeButton: null,
     deleteButton: null,
     viewFields: null,
     editFields: null,
 
     setSelectors: function () {
         var self = this;
         self.editButton = $('#open_edit_pullrequest')
         self.closeButton = $('#close_edit_pullrequest')
         self.deleteButton = $('#delete_pullrequest')
         self.viewFields = $('#pr-desc, #pr-title')
         self.editFields = $('#pr-desc-edit, #pr-title-edit, .pr-save')
     },
 
     init: function () {
         var self = this;
         self.setSelectors();
         self.editButton.on('click', function (e) {
             self.edit();
         });
         self.closeButton.on('click', function (e) {
             self.view();
         });
     },
 
     edit: function (event) {
         var cmInstance = $('#pr-description-input').get(0).MarkupForm.cm;
         this.viewFields.hide();
         this.editButton.hide();
         this.deleteButton.hide();
         this.closeButton.show();
         this.editFields.show();
         cmInstance.refresh();
     },
 
     view: function (event) {
         this.editButton.show();
         this.deleteButton.show();
         this.editFields.hide();
         this.closeButton.hide();
         this.viewFields.show();
     }
 };
 
 /**
  * OnLine presence using channelstream
  */
 window.ReviewerPresenceController = function (channel) {
     var self = this;
     this.channel = channel;
     this.users = {};
 
     this.storeUsers = function (users) {
         self.users = {}
         $.each(users, function (index, value) {
             var userId = value.state.id;
             self.users[userId] = value.state;
         })
     }
 
     this.render = function () {
         $.each($('.reviewer_entry'), function (index, value) {
             var userData = $(value).data();
             if (self.users[userData.reviewerUserId] !== undefined) {
                 $(value).find('.presence-state').show();
             } else {
                 $(value).find('.presence-state').hide();
             }
         })
     };
 
     this.handlePresence = function (data) {
         if (data.type == 'presence' && data.channel === self.channel) {
             this.storeUsers(data.users);
             this.render();
         }
     };
 
     this.handleChannelUpdate = function (data) {
         if (data.channel === this.channel) {
             this.storeUsers(data.state.users);
             this.render();
         }
 
     };
 
     /* subscribe to the current presence */
     $.Topic('/connection_controller/presence').subscribe(this.handlePresence.bind(this));
     /* subscribe to updates e.g connect/disconnect */
     $.Topic('/connection_controller/channel_update').subscribe(this.handleChannelUpdate.bind(this));
 
 };
 
 window.refreshCommentsSuccess = function(targetNode, counterNode, extraCallback) {
     var $targetElem = targetNode;
     var $counterElem = counterNode;
 
     return function (data) {
         var newCount = $(data).data('counter');
         if (newCount !== undefined) {
             var callback = function () {
                 $counterElem.animate({'opacity': 1.00}, 200)
                 $counterElem.html(newCount);
             };
             $counterElem.animate({'opacity': 0.15}, 200, callback);
         }
 
         $targetElem.css('opacity', 1);
         $targetElem.html(data);
         tooltipActivate();
 
         if (extraCallback !== undefined) {
             extraCallback(data)
         }
     }
 }
 
 window.refreshComments = function (version) {
     version = version || templateContext.pull_request_data.pull_request_version || '';
 
     // Pull request case
     if (templateContext.pull_request_data.pull_request_id !== null) {
         var params = {
             'pull_request_id': templateContext.pull_request_data.pull_request_id,
             'repo_name': templateContext.repo_name,
             'version': version,
         };
         var loadUrl = pyroutes.url('pullrequest_comments', params);
     } // commit case
     else {
         return
     }
 
     var currentIDs = []
     $.each($('.comment'), function (idx, element) {
         currentIDs.push($(element).data('commentId'));
     });
     var data = {"comments": currentIDs};
 
     var $targetElem = $('.comments-content-table');
     $targetElem.css('opacity', 0.3);
     var $counterElem = $('#comments-count');
     var success = refreshCommentsSuccess($targetElem, $counterElem);
     ajaxPOST(loadUrl, data, success, null, {})
 
 }
 
 window.refreshTODOs = function (version) {
     version = version || templateContext.pull_request_data.pull_request_version || '';
     // Pull request case
     if (templateContext.pull_request_data.pull_request_id !== null) {
         var params = {
             'pull_request_id': templateContext.pull_request_data.pull_request_id,
             'repo_name': templateContext.repo_name,
             'version': version,
         };
         var loadUrl = pyroutes.url('pullrequest_todos', params);
     } // commit case
     else {
         return
     }
 
     var currentIDs = []
     $.each($('.comment'), function (idx, element) {
         currentIDs.push($(element).data('commentId'));
     });
 
     var data = {"comments": currentIDs};
     var $targetElem = $('.todos-content-table');
     $targetElem.css('opacity', 0.3);
     var $counterElem = $('#todos-count');
     var success = refreshCommentsSuccess($targetElem, $counterElem);
 
     ajaxPOST(loadUrl, data, success, null, {})
 
 }
 
 window.refreshDraftComments = function () {
 
     // Pull request case
     if (templateContext.pull_request_data.pull_request_id !== null) {
         var params = {
             'pull_request_id': templateContext.pull_request_data.pull_request_id,
             'repo_name': templateContext.repo_name,
         };
         var loadUrl = pyroutes.url('pullrequest_drafts', params);
     } // commit case
     else {
         return
     }
 
     var data = {};
 
     var $targetElem = $('.drafts-content-table');
     $targetElem.css('opacity', 0.3);
     var $counterElem = $('#drafts-count');
     var extraCallback = function(data) {
         if ($(data).data('counter') == 0){
             $('#draftsTable').hide();
         } else {
             $('#draftsTable').show();
         }
         // uncheck on load the select all checkbox
         $('[name=select_all_drafts]').prop('checked', 0);
     }
     var success = refreshCommentsSuccess($targetElem, $counterElem, extraCallback);
 
     ajaxPOST(loadUrl, data, success, null, {})
 };
 
 window.refreshAllComments = function (version) {
     version = version || templateContext.pull_request_data.pull_request_version || '';
 
     refreshComments(version);
     refreshTODOs(version);
 };
 
 window.sidebarComment = function (commentId) {
     var jsonData = $('#commentHovercard{0}'.format(commentId)).data('commentJsonB64');
     if (!jsonData) {
         return 'Failed to load comment {0}'.format(commentId)
     }
     var funcData = JSON.parse(atob(jsonData));
     return renderTemplate('sideBarCommentHovercard', funcData)
 };

rhodecode/templates/codeblocks/diffs.mako

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

rhodecode/templates/pullrequests/pullrequest_show.mako

@@ -1,1051 +1,1052 b''
 <%inherit file="/base/base.mako"/>
 <%namespace name="base" file="/base/base.mako"/>
 <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
 <%namespace name="sidebar" file="/base/sidebar.mako"/>
 
 
 <%def name="title()">
     ${_('{} Pull Request !{}').format(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()">
 
 </%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()">
 ## Container to gather extracted Tickets
 <%
     c.referenced_commit_issues = []
     c.referenced_desc_issues = []
 %>
 
 <script type="text/javascript">
     templateContext.pull_request_data.pull_request_id = ${c.pull_request.pull_request_id};
     templateContext.pull_request_data.pull_request_version = '${request.GET.get('version', '')}';
 </script>
 
 <div class="box">
 
   <div class="box pr-summary">
 
     <div class="summary-details block-left">
         <div id="pr-title">
             % if c.pull_request.is_closed():
                 <span class="pr-title-closed-tag tag">${_('Closed')}</span>
             % endif
             <input class="pr-title-input large disabled" disabled="disabled" name="pullrequest_title" type="text" value="${c.pull_request.title}">
         </div>
         <div id="pr-title-edit" class="input" style="display: none;">
             <input class="pr-title-input large" id="pr-title-input" name="pullrequest_title" type="text" value="${c.pull_request.title}">
         </div>
 
     <% summary = lambda n:{False:'summary-short'}.get(n) %>
     <div class="pr-details-title">
         <div class="pull-left">
             <a href="${h.route_path('pull_requests_global', pull_request_id=c.pull_request.pull_request_id)}">${_('Pull request !{}').format(c.pull_request.pull_request_id)}</a>
             ${_('Created on')}
             <span class="tooltip" title="${_('Last updated on')} ${h.format_date(c.pull_request.updated_on)}">${h.format_date(c.pull_request.created_on)},</span>
             <span class="pr-details-title-author-pref">${_('by')}</span>
         </div>
 
         <div class="pull-left">
             ${self.gravatar_with_user(c.pull_request.author.email, 16, tooltip=True)}
         </div>
 
         %if c.allowed_to_update:
           <div class="pull-right">
               <div id="edit_pull_request" class="action_button pr-save" style="display: none;">${_('Update title & description')}</div>
               <div id="delete_pullrequest" class="action_button pr-save ${('' if c.allowed_to_delete else 'disabled' )}" style="display: none;">
                   % 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)}
                           <input class="btn btn-link btn-danger no-margin" id="remove_${c.pull_request.pull_request_id}" name="remove_${c.pull_request.pull_request_id}"
                                  onclick="submitConfirm(event, this, _gettext('Confirm to delete this pull request'), _gettext('Delete'), '${'!{}'.format(c.pull_request.pull_request_id)}')"
                                  type="submit" value="${_('Delete pull request')}">
                       ${h.end_form()}
                   % else:
                     <span class="tooltip" title="${_('Not allowed to delete this pull request')}">${_('Delete pull request')}</span>
                   % endif
               </div>
               <div id="open_edit_pullrequest" class="action_button">${_('Edit')}</div>
               <div id="close_edit_pullrequest" class="action_button" style="display: none;">${_('Cancel')}</div>
           </div>
 
         %endif
     </div>
 
     <div id="pr-desc" class="input" title="${_('Rendered using {} renderer').format(c.renderer)}">
         ${h.render(c.pull_request.description, renderer=c.renderer, repo_name=c.repo_name, issues_container=c.referenced_desc_issues)}
     </div>
 
     <div id="pr-desc-edit" class="input textarea" 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 id="summary" class="fields pr-details-content">
 
        ## source
        <div class="field">
         <div class="label-pr-detail">
             <label>${_('Commit flow')}:</label>
         </div>
         <div class="input">
             <div class="pr-commit-flow">
                 ## Source
                 %if c.pull_request.source_ref_parts.type == 'branch':
                     <a href="${h.route_path('repo_commits', repo_name=c.pull_request.source_repo.repo_name, _query=dict(branch=c.pull_request.source_ref_parts.name))}"><code class="pr-source-info">${c.pull_request.source_ref_parts.type}:${c.pull_request.source_ref_parts.name}</code></a>
                 %else:
                     <code class="pr-source-info">${'{}:{}'.format(c.pull_request.source_ref_parts.type, c.pull_request.source_ref_parts.name)}</code>
                 %endif
                 ${_('of')} <a href="${h.route_path('repo_summary', repo_name=c.pull_request.source_repo.repo_name)}">${c.pull_request.source_repo.repo_name}</a>
                 &rarr;
                 ## Target
                 %if c.pull_request.target_ref_parts.type == 'branch':
                     <a href="${h.route_path('repo_commits', repo_name=c.pull_request.target_repo.repo_name, _query=dict(branch=c.pull_request.target_ref_parts.name))}"><code class="pr-target-info">${c.pull_request.target_ref_parts.type}:${c.pull_request.target_ref_parts.name}</code></a>
                 %else:
                     <code class="pr-target-info">${'{}:{}'.format(c.pull_request.target_ref_parts.type, c.pull_request.target_ref_parts.name)}</code>
                 %endif
 
                 ${_('of')} <a href="${h.route_path('repo_summary', repo_name=c.pull_request.target_repo.repo_name)}">${c.pull_request.target_repo.repo_name}</a>
 
                 <a class="source-details-action" href="#expand-source-details" onclick="return toggleElement(this, '.source-details')" data-toggle-on='<i class="icon-angle-down">more details</i>' data-toggle-off='<i class="icon-angle-up">less details</i>'>
                     <i class="icon-angle-down">more details</i>
                 </a>
 
             </div>
 
             <div class="source-details" style="display: none">
 
                 <ul>
 
                     ## common ancestor
                     <li>
                         ${_('Common ancestor')}:
                         % if c.ancestor_commit:
                             <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>
                         % else:
                             ${_('not available')}
                         % endif
                     </li>
 
                     ## pull url
                     <li>
                         %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
 
                         <span>${_('Pull changes from source')}</span>: <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>
                     </li>
 
                     ## Shadow repo
                     <li>
                         % 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
 
                             <span class="tooltip" title="${_('Clone repository in its merged state using shadow repository')}">${_('Clone from shadow repository')}</span>: <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>
 
                         % else:
                             <div class="">
                                 ${_('Shadow repository data not available')}.
                             </div>
                         % endif
                     </li>
 
                 </ul>
 
             </div>
 
         </div>
 
        </div>
 
        ## versions
        <div class="field">
            <div class="label-pr-detail">
                <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']) %>
                ${_ungettext('{} version available for this pull request, ', '{} versions available for this pull request, ', len(c.versions)).format(len(c.versions))}
                <a id="show-pr-versions" onclick="return versionController.toggleVersionView(this)" href="#show-pr-versions"
                     data-toggle-on="${_('show versions')}."
                     data-toggle-off="${_('hide versions')}.">
                     ${_('show 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_index == 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' %>
                             <i class="tooltip icon-circle review-status-${review_status}" title="${_('Your review status at this version')}"></i>
 
                            </td>
                            <td>
                                % if c.at_version_num != ver_pr:
                                 <i class="tooltip icon-comment" title="${_('Comments from pull request version v{0}').format(ver_pos)}"></i>
                                 <code>
                                    General:${len(c.comment_versions[ver_pr]['at'])} / Inline:${len(c.inline_versions[ver_pr]['at'])}
                                 </code>
                                % endif
                            </td>
                            <td>
                                ##<code>${ver.source_ref_parts.commit_id[:6]}</code>
                            </td>
                            <td>
                                <code>${h.age_component(ver.updated_on, time_is_local=True, tooltip=False)}</code>
                            </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>
                </table>
            % else:
                <div>
                ${_('Pull request versions not available')}.
                </div>
            % endif
            </div>
        </div>
 
     </div>
 
   </div>
 
 
   </div>
 
 </div>
 
 <div class="box">
 
   % if c.state_progressing:
 
     <h2 style="text-align: center">
         ${_('Cannot show diff when pull request state is changing. Current progress state')}: <span class="tag tag-merge-state-${c.pull_request.state}">${c.pull_request.state}</span>
 
         % if c.is_super_admin:
         <br/>
         If you think this is an error try <a href="${h.current_route_path(request, force_state='created')}">forced state reset</a> to <span class="tag tag-merge-state-created">created</span> state.
         % endif
     </h2>
 
   % else:
 
       ## Diffs rendered here
       <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.')}<br/>
                         ${_('Please update this pull request, push the commits back into the source repository, or consider closing this pull request.')}<br/>
                         ${_('Consider doing a `force update commits` in case you think this is an error.')}
                     </div>
                   </div>
                 </div>
               % elif c.pr_merge_source_commit.changed and not c.pull_request.is_closed():
                 <div class="box">
                   <div class="alert alert-info">
                     <div>
                         <strong>${_('There are new changes for `{}:{}` in source repository, please consider updating this pull request.').format(c.pr_merge_source_commit.ref_spec.type, c.pr_merge_source_commit.ref_spec.name)}</strong>
                     </div>
                   </div>
                 </div>
               % endif
 
               <div class="compare_view_commits_title">
                   % if not c.compare_mode:
 
                     % if c.at_version_index:
                         <h4>
                         ${_('Showing changes at v{}, commenting is disabled.').format(c.at_version_index)}
                         </h4>
                     % endif
 
                     <div class="pull-left">
                       <div class="btn-group">
                           <a class="${('collapsed' if c.collapse_all_commits else '')}" href="#expand-commits" onclick="toggleCommitExpand(this); return false" data-toggle-commits-cnt=${len(c.commit_ranges)} >
                               % if c.collapse_all_commits:
                                 <i class="icon-plus-squared-alt icon-no-margin"></i>
                                 ${_ungettext('Expand {} commit', 'Expand {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
                               % else:
                                 <i class="icon-minus-squared-alt icon-no-margin"></i>
                                 ${_ungettext('Collapse {} commit', 'Collapse {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
                               % endif
                           </a>
                       </div>
                     </div>
 
                     <div class="pull-right">
                         % if c.allowed_to_update and not c.pull_request.is_closed():
 
                             <div class="btn-group btn-group-actions">
                                 <a id="update_commits" class="btn btn-primary no-margin" onclick="updateController.updateCommits(this); return false">
                                     ${_('Update commits')}
                                 </a>
 
                                 <a id="update_commits_switcher" class="tooltip btn btn-primary btn-more-option" data-toggle="dropdown" aria-pressed="false" role="button" title="${_('more update options')}">
                                     <i class="icon-down"></i>
                                 </a>
 
                                 <div class="btn-action-switcher-container right-align" id="update-commits-switcher">
                                     <ul class="btn-action-switcher" role="menu" style="min-width: 300px;">
                                         <li>
                                             <a href="#forceUpdate" onclick="updateController.forceUpdateCommits(this); return false">
                                                 ${_('Force update commits')}
                                             </a>
                                             <div class="action-help-block">
                                                ${_('Update commits and force refresh this pull request.')}
                                             </div>
                                         </li>
                                     </ul>
                                 </div>
                             </div>
 
                         % 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:
                 ## COMPARE RANGE DIFF MODE
                 % 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_index, ver_to=c.at_version_index if c.at_version_index 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, tooltip=True)}
                                 </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.idx}:${h.short_id(commit.raw_id)}
                                         </a>
                                         ${h.hidden('revisions', commit.raw_id)}
                                     </code>
                                 </td>
                                 <td class="td-message expand_commit" data-commit-id="${commit.raw_id}" title="${_( 'Expand commit message')}" onclick="commitsController.expandCommit(this); return false">
                                     <i class="icon-expand-linked"></i>
                                 </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, issues_container=c.referenced_commit_issues)}</div>
                                     </div>
                                 </td>
                             </tr>
                               % endif
                             % endfor
                         </table>
                     </div>
 
                     % endif
 
                 ## Regular DIFF
                 % else:
                     <%include file="/compare/compare_commits.mako" />
                 % endif
 
                 <div class="cs_files">
                     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
 
                     <%
                         pr_menu_data = {
                             'outdated_comm_count_ver': outdated_comm_count_ver,
                             'pull_request': c.pull_request
                         }
                     %>
 
                     ${cbdiffs.render_diffset_menu(c.diffset, range_diff_on=c.range_diff_on, pull_request_menu=pr_menu_data)}
 
                     % if c.range_diff_on:
                         % for commit in c.commit_ranges:
                             ${cbdiffs.render_diffset(
                               c.changes[commit.raw_id],
                               commit=commit, use_comments=True,
                               collapse_when_files_over=5,
                               disable_new_comments=True,
                               deleted_files_comments=c.deleted_files_comments,
                               inline_comments=c.inline_comments,
                               pull_request_menu=pr_menu_data, show_todos=False)}
                         % endfor
                     % else:
                         ${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,
                           pull_request_menu=pr_menu_data, show_todos=False)}
                     % endif
 
                 </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"/>
 
       ## comments heading with count
       <div class="comments-heading">
         <i class="icon-comment"></i>
         ${_('General Comments')} ${len(c.comments)}
       </div>
 
       ## render general comments
       <div id="comment-tr-show">
         % if general_outdated_comm_count_ver:
         <div class="info-box">
             % 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>
 
       ${comment.generate_comments(c.comments, include_pull_request=True, is_pull_request=True)}
 
       % if not c.pull_request.is_closed():
         ## 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)}
 
         ## merge status, and merge action
         <div class="pull-request-merge">
             <%include file="/pullrequests/pullrequest_merge_checks.mako"/>
         </div>
 
       %endif
 
    % endif
   </div>
 
 
 ### NAV SIDEBAR
 <aside class="right-sidebar right-sidebar-expanded" id="pr-nav-sticky" style="display: none">
     <div class="sidenav navbar__inner" >
         ## TOGGLE
         <div class="sidebar-toggle" onclick="toggleSidebar(); return false">
             <a href="#toggleSidebar" class="grey-link-action">
 
             </a>
         </div>
 
         ## CONTENT
         <div class="sidebar-content">
 
             ## Drafts
             % if c.rhodecode_edition_id == 'EE':
             <div id="draftsTable" class="sidebar-element clear-both" style="display: ${'block' if c.draft_comments else 'none'}">
                 <div class="tooltip right-sidebar-collapsed-state" style="display: none;" onclick="toggleSidebar(); return false" title="${_('Drafts')}">
                     <i class="icon-comment icon-draft"></i>
                     <span id="drafts-count">${len(c.draft_comments)}</span>
                 </div>
 
                 <div class="right-sidebar-expanded-state pr-details-title">
                   <span style="padding-left: 2px">
                   <input name="select_all_drafts" type="checkbox" onclick="$('[name=submit_draft]').prop('checked', !$('[name=submit_draft]').prop('checked'))">
                   </span>
                   <span class="sidebar-heading noselect" onclick="refreshDraftComments(); return false">
                     <i class="icon-comment icon-draft"></i>
                     ${_('Drafts')}
                   </span>
                   <span class="block-right action_button last-item" onclick="submitDrafts(event)">${_('Submit')}</span>
                 </div>
 
                 <div id="drafts" class="right-sidebar-expanded-state pr-details-content reviewers">
                     % if c.draft_comments:
                         ${sidebar.comments_table(c.draft_comments, len(c.draft_comments), draft_comments=True)}
                     % else:
                         <table class="drafts-content-table">
                             <tr>
                                 <td>
                                     ${_('No TODOs yet')}
                                 </td>
                             </tr>
                         </table>
                     % endif
                 </div>
 
             </div>
             % endif
 
             ## RULES SUMMARY/RULES
             <div class="sidebar-element clear-both">
                 <% vote_title = _ungettext(
                         'Status calculated based on votes from {} reviewer',
                         'Status calculated based on votes from {} reviewers', c.reviewers_count).format(c.reviewers_count)
                 %>
 
                 <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${vote_title}">
                     <i class="icon-circle review-status-${c.pull_request_review_status}"></i>
                     ${c.reviewers_count}
                 </div>
 
                 ## REVIEWERS
                 <div class="right-sidebar-expanded-state pr-details-title">
                     <span class="tooltip sidebar-heading" title="${vote_title}">
                         <i class="icon-circle review-status-${c.pull_request_review_status}"></i>
                         ${_('Reviewers')}
                     </span>
+
                     %if c.allowed_to_update:
                         <span id="open_edit_reviewers" class="block-right action_button last-item">${_('Edit')}</span>
                         <span id="close_edit_reviewers" class="block-right action_button last-item" style="display: none;">${_('Close')}</span>
                     %else:
                         <span id="open_edit_reviewers" class="block-right action_button last-item">${_('Show rules')}</span>
                         <span id="close_edit_reviewers" class="block-right action_button last-item" style="display: none;">${_('Close')}</span>
                     %endif
                 </div>
 
                 <div id="reviewers" class="right-sidebar-expanded-state pr-details-content reviewers">
 
                     <div id="review_rules" style="display: none" class="">
 
                         <strong>${_('Reviewer rules')}</strong>
                         <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>
 
                     ## members redering block
                     <input type="hidden" name="__start__" value="review_members:sequence">
 
                     <table id="review_members" class="group_members">
                     ## This content is loaded via JS and ReviewersPanel
                     </table>
 
                     <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" style="width: 240px">
                                    <input class="ac-input" id="user" name="user" placeholder="${_('Add reviewer or reviewer group')}" type="text" autocomplete="off">
                                    <div id="reviewers_container"></div>
                                 </div>
                             % endif
                             <div class="pull-right" style="margin-bottom: 15px">
-                                <button data-role="reviewer" id="update_reviewers" class="btn btn-small no-margin">${_('Save Changes')}</button>
+                                <button data-role="reviewer" id="update_reviewers" class="btn btn-sm no-margin">${_('Save Changes')}</button>
                             </div>
                         %endif
                         </div>
                     %endif
                 </div>
             </div>
 
             ## OBSERVERS
             % if c.rhodecode_edition_id == 'EE':
             <div class="sidebar-element clear-both">
                 <% vote_title = _ungettext(
                         '{} observer without voting right.',
                         '{} observers without voting right.', c.observers_count).format(c.observers_count)
                 %>
 
                 <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${vote_title}">
                     <i class="icon-circle-thin"></i>
                     ${c.observers_count}
                 </div>
 
                 <div class="right-sidebar-expanded-state pr-details-title">
                   <span class="tooltip sidebar-heading" title="${vote_title}">
                     <i class="icon-circle-thin"></i>
                     ${_('Observers')}
                   </span>
                   %if c.allowed_to_update:
                       <span id="open_edit_observers" class="block-right action_button last-item">${_('Edit')}</span>
                       <span id="close_edit_observers" class="block-right action_button last-item" style="display: none;">${_('Close')}</span>
                   %endif
                 </div>
 
                 <div id="observers" class="right-sidebar-expanded-state pr-details-content reviewers">
                     ## members redering block
                     <input type="hidden" name="__start__" value="observer_members:sequence">
 
                     <table id="observer_members" class="group_members">
                     ## This content is loaded via JS and ReviewersPanel
                     </table>
 
                     <input type="hidden" name="__end__" value="observer_members:sequence">
                     ## end members redering block
 
                     %if not c.pull_request.is_closed():
                         <div id="add_observer" class="ac" style="display: none;">
                         %if c.allowed_to_update:
                             % if not c.forbid_adding_reviewers or 1:
                                 <div id="add_reviewer_input" class="reviewer_ac" style="width: 240px" >
                                    <input class="ac-input" id="observer" name="observer" placeholder="${_('Add observer or observer group')}" type="text" autocomplete="off">
                                    <div id="observers_container"></div>
                                 </div>
                             % endif
                             <div class="pull-right" style="margin-bottom: 15px">
-                                <button data-role="observer" id="update_observers" class="btn btn-small no-margin">${_('Save Changes')}</button>
+                                <button data-role="observer" id="update_observers" class="btn btn-sm no-margin">${_('Save Changes')}</button>
                             </div>
                         %endif
                         </div>
                     %endif
                 </div>
             </div>
             % endif
 
             ## TODOs
             <div id="todosTable" class="sidebar-element clear-both">
                 <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="TODOs">
                   <i class="icon-flag-filled"></i>
                   <span id="todos-count">${len(c.unresolved_comments)}</span>
                 </div>
 
                 <div class="right-sidebar-expanded-state pr-details-title">
                       ## Only show unresolved, that is only what matters
                       <span class="sidebar-heading noselect" onclick="refreshTODOs(); return false">
                       <i class="icon-flag-filled"></i>
                       TODOs
                       </span>
 
                       % if not c.at_version:
                           % if c.resolved_comments:
                               <span class="block-right action_button last-item noselect" onclick="$('.unresolved-todo-text').toggle(); return toggleElement(this, '.resolved-todo');" data-toggle-on="Show resolved" data-toggle-off="Hide resolved">Show resolved</span>
                           % else:
                               <span class="block-right last-item noselect">Show resolved</span>
                           % endif
                       % endif
                   </div>
 
                 <div class="right-sidebar-expanded-state pr-details-content">
 
                   % if c.at_version:
                       <table>
                           <tr>
                             <td class="unresolved-todo-text">${_('TODOs unavailable when browsing versions')}.</td>
                           </tr>
                       </table>
                   % else:
                     % if c.unresolved_comments + c.resolved_comments:
                       ${sidebar.comments_table(c.unresolved_comments + c.resolved_comments, len(c.unresolved_comments), todo_comments=True)}
                     % else:
                         <table class="todos-content-table">
                             <tr>
                                 <td>
                                     ${_('No TODOs yet')}
                                 </td>
                             </tr>
                         </table>
                     % endif
                   % endif
                 </div>
             </div>
 
             ## COMMENTS
             <div id="commentsTable" class="sidebar-element clear-both">
                 <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${_('Comments')}">
                     <i class="icon-comment" style="color: #949494"></i>
                     <span id="comments-count">${len(c.inline_comments_flat+c.comments)}</span>
                     <span class="display-none" id="general-comments-count">${len(c.comments)}</span>
                     <span class="display-none" id="inline-comments-count">${len(c.inline_comments_flat)}</span>
                 </div>
 
                 <div class="right-sidebar-expanded-state pr-details-title">
                   <span class="sidebar-heading noselect" onclick="refreshComments(); return false">
                     <i class="icon-comment" style="color: #949494"></i>
                     ${_('Comments')}
 
 ##                    % if outdated_comm_count_ver:
 ##                         <a href="#" onclick="showOutdated(); Rhodecode.comments.nextOutdatedComment(); return false;">
 ##                             (${_("{} Outdated").format(outdated_comm_count_ver)})
 ##                         </a>
 ##                         <a href="#" class="showOutdatedComments" onclick="showOutdated(this); return false;"> | ${_('show outdated')}</a>
 ##                         <a href="#" class="hideOutdatedComments" style="display: none" onclick="hideOutdated(this); return false;"> | ${_('hide outdated')}</a>
 
 ##                         % else:
 ##                             (${_("{} Outdated").format(outdated_comm_count_ver)})
 ##                    % endif
 
                   </span>
 
                   % if outdated_comm_count_ver:
                     <span class="block-right action_button last-item noselect" onclick="return toggleElement(this, '.hidden-comment');" data-toggle-on="Show outdated" data-toggle-off="Hide outdated">Show outdated</span>
                   % else:
                     <span class="block-right last-item noselect">Show hidden</span>
                   % endif
 
                 </div>
 
                 <div class="right-sidebar-expanded-state pr-details-content">
                 % if c.inline_comments_flat + c.comments:
                     ${sidebar.comments_table(c.inline_comments_flat + c.comments, len(c.inline_comments_flat+c.comments))}
                 % else:
                     <table class="comments-content-table">
                         <tr>
                             <td>
                                 ${_('No Comments yet')}
                             </td>
                         </tr>
                     </table>
                 % endif
                 </div>
 
             </div>
 
             ## Referenced Tickets
             <div class="sidebar-element clear-both">
                 <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${_('Referenced Tickets')}">
                     <i class="icon-info-circled"></i>
                     ${(len(c.referenced_desc_issues) + len(c.referenced_commit_issues))}
                 </div>
 
                 <div class="right-sidebar-expanded-state pr-details-title">
                   <span class="sidebar-heading">
                     <i class="icon-info-circled"></i>
                     ${_('Referenced Tickets')}
                   </span>
                 </div>
                 <div class="right-sidebar-expanded-state pr-details-content">
                     <table>
 
                         <tr><td><code>${_('In pull request description')}:</code></td></tr>
                         % if c.referenced_desc_issues:
                             % for ticket_dict in sorted(c.referenced_desc_issues):
                             <tr>
                                 <td>
                                     <a href="${ticket_dict.get('url')}">
                                     ${ticket_dict.get('id')}
                                     </a>
                                 </td>
                             </tr>
                             % endfor
                         % else:
                             <tr>
                                 <td>
                                     ${_('No Ticket data found.')}
                                 </td>
                             </tr>
                         % endif
 
                         <tr><td style="padding-top: 10px"><code>${_('In commit messages')}:</code></td></tr>
                         % if c.referenced_commit_issues:
                             % for ticket_dict in sorted(c.referenced_commit_issues):
                             <tr>
                                 <td>
                                     <a href="${ticket_dict.get('url')}">
                                     ${ticket_dict.get('id')}
                                     </a>
                                 </td>
                             </tr>
                             % endfor
                         % else:
                             <tr>
                                 <td>
                                     ${_('No Ticket data found.')}
                                 </td>
                             </tr>
                         % endif
                     </table>
 
                 </div>
             </div>
 
         </div>
 
     </div>
 </aside>
 
 ## This JS needs to be at the end
 <script type="text/javascript">
 
 versionController = new VersionController();
 versionController.init();
 
 reviewersController = new ReviewersController();
 commitsController = new CommitsController();
 commentsController = new CommentsController();
 
 updateController = new UpdatePrController();
 
 window.reviewerRulesData = ${c.pull_request_default_reviewers_data_json | n};
 window.setReviewersData = ${c.pull_request_set_reviewers_data_json | n};
 window.setObserversData = ${c.pull_request_set_observers_data_json | n};
 
 (function () {
     "use strict";
 
     // custom code mirror
     var codeMirrorInstance = $('#pr-description-input').get(0).MarkupForm.cm;
 
     PRDetails.init();
     ReviewersPanel.init(reviewersController, reviewerRulesData, setReviewersData);
     ObserversPanel.init(reviewersController, reviewerRulesData, setObserversData);
 
     window.showOutdated = function (self) {
         $('.comment-inline.comment-outdated').show();
         $('.filediff-outdated').show();
         $('.showOutdatedComments').hide();
         $('.hideOutdatedComments').show();
     };
 
     window.hideOutdated = function (self) {
         $('.comment-inline.comment-outdated').hide();
         $('.filediff-outdated').hide();
         $('.hideOutdatedComments').hide();
         $('.showOutdatedComments').show();
     };
 
     window.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);
                 }
         );
     };
 
     window.submitDrafts = function (event) {
         var target = $(event.currentTarget);
         var callback = function (result) {
             target.removeAttr('onclick').html('saving...');
         }
         var draftIds = [];
         $.each($('[name=submit_draft]:checked'), function (idx, val) {
             draftIds.push(parseInt($(val).val()));
         })
         if (draftIds.length > 0) {
             Rhodecode.comments.finalizeDrafts(draftIds, callback);
         }
         else {
 
         }
     }
 
     window.closePullRequest = function (status) {
         if (!confirm(_gettext('Are you sure to close this pull request without merging?'))) {
             return false;
         }
         // 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();
     };
 
     //TODO this functionality is now missing
     $('#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();
         }
     });
 
     $('#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);
     });
 
     var $updateButtons = $('#update_reviewers,#update_observers');
     $updateButtons.on('click', function (e) {
         var role = $(this).data('role');
         $updateButtons.attr('disabled', 'disabled');
         $updateButtons.addClass('disabled');
         $updateButtons.html(_gettext('Saving...'));
         reviewersController.updateReviewers(
                 templateContext.repo_name,
                 templateContext.pull_request_data.pull_request_id,
                 role
         );
     });
 
     // 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");
         }
     });
 
     $('.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);
     });
 
     // register submit callback on commentForm form to track TODOs, and refresh mergeChecks conditions
     window.commentFormGlobalSubmitSuccessCallback = function (comment) {
         if (!comment.draft) {
             refreshMergeChecks();
         }
     };
 
     ReviewerAutoComplete('#user', reviewersController);
     ObserverAutoComplete('#observer', reviewersController);
 
 })();
 
 $(document).ready(function () {
 
     var channel = '${c.pr_broadcast_channel}';
     new ReviewerPresenceController(channel)
     // register globally so inject comment logic can re-use it.
     window.commentsController = commentsController;
 })
 </script>
 
 </%def>