comments: multiple changes on comments navigation/display logic

- toggle are smarter, they open/hide windows accorind to actions. E.g commenting opens threads
- toggle are mor explicit
- possible to hide/show only single threads
- when channelstream is enabled comments are now live-pushed to diff with NEW marker indicator
- new UI for showing thread comments

rhodecode/apps/debug_style/views.py

@@ -1,486 +1,486 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2016-2020 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import os
 import logging
 import datetime
 
 from pyramid.view import view_config
 from pyramid.renderers import render_to_response
 from rhodecode.apps._base import BaseAppView
 from rhodecode.lib.celerylib import run_task, tasks
 from rhodecode.lib.utils2 import AttributeDict
 from rhodecode.model.db import User
 from rhodecode.model.notification import EmailNotificationModel
 
 log = logging.getLogger(__name__)
 
 
 class DebugStyleView(BaseAppView):
 
     def load_default_context(self):
         c = self._get_local_tmpl_context()
 
         return c
 
     @view_config(
         route_name='debug_style_home', request_method='GET',
         renderer=None)
     def index(self):
         c = self.load_default_context()
         c.active = 'index'
 
         return render_to_response(
             'debug_style/index.html', self._get_template_context(c),
             request=self.request)
 
     @view_config(
         route_name='debug_style_email', request_method='GET',
         renderer=None)
     @view_config(
         route_name='debug_style_email_plain_rendered', request_method='GET',
         renderer=None)
     def render_email(self):
         c = self.load_default_context()
         email_id = self.request.matchdict['email_id']
         c.active = 'emails'
 
         pr = AttributeDict(
             pull_request_id=123,
             title='digital_ocean: fix redis, elastic search start on boot, '
                   'fix fd limits on supervisor, set postgres 11 version',
             description='''
 Check if we should use full-topic or mini-topic.
 
 - full topic produces some problems with merge states etc
 - server-mini-topic needs probably tweeks.            
             ''',
             repo_name='foobar',
             source_ref_parts=AttributeDict(type='branch', name='fix-ticket-2000'),
             target_ref_parts=AttributeDict(type='branch', name='master'),
         )
 
         target_repo = AttributeDict(repo_name='repo_group/target_repo')
         source_repo = AttributeDict(repo_name='repo_group/source_repo')
         user = User.get_by_username(self.request.GET.get('user')) or self._rhodecode_db_user
         # file/commit changes for PR update
         commit_changes = AttributeDict({
             'added': ['aaaaaaabbbbb', 'cccccccddddddd'],
             'removed': ['eeeeeeeeeee'],
         })
 
         file_changes = AttributeDict({
             'added': ['a/file1.md', 'file2.py'],
             'modified': ['b/modified_file.rst'],
             'removed': ['.idea'],
         })
 
         exc_traceback = {
             'exc_utc_date': '2020-03-26T12:54:50.683281',
             'exc_id': 139638856342656,
             'exc_timestamp': '1585227290.683288',
             'version': 'v1',
             'exc_message': 'Traceback (most recent call last):\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/tweens.py", line 41, in excview_tween\n    response = handler(request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/router.py", line 148, in handle_request\n    registry, request, context, context_iface, view_name\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/view.py", line 667, in _call_view\n    response = view_callable(context, request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/config/views.py", line 188, in attr_view\n    return view(context, request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/config/views.py", line 214, in predicate_wrapper\n    return view(context, request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/viewderivers.py", line 401, in viewresult_to_response\n    result = view(context, request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/viewderivers.py", line 132, in _class_view\n    response = getattr(inst, attr)()\n  File "/mnt/hgfs/marcink/workspace/rhodecode-enterprise-ce/rhodecode/apps/debug_style/views.py", line 355, in render_email\n    template_type, **email_kwargs.get(email_id, {}))\n  File "/mnt/hgfs/marcink/workspace/rhodecode-enterprise-ce/rhodecode/model/notification.py", line 402, in render_email\n    body = email_template.render(None, **_kwargs)\n  File "/mnt/hgfs/marcink/workspace/rhodecode-enterprise-ce/rhodecode/lib/partial_renderer.py", line 95, in render\n    return self._render_with_exc(tmpl, args, kwargs)\n  File "/mnt/hgfs/marcink/workspace/rhodecode-enterprise-ce/rhodecode/lib/partial_renderer.py", line 79, in _render_with_exc\n    return render_func.render(*args, **kwargs)\n  File "/nix/store/dakh34sxz4yfr435c0cwjz0sd6hnd5g3-python2.7-mako-1.1.0/lib/python2.7/site-packages/mako/template.py", line 476, in render\n    return runtime._render(self, self.callable_, args, data)\n  File "/nix/store/dakh34sxz4yfr435c0cwjz0sd6hnd5g3-python2.7-mako-1.1.0/lib/python2.7/site-packages/mako/runtime.py", line 883, in _render\n    **_kwargs_for_callable(callable_, data)\n  File "/nix/store/dakh34sxz4yfr435c0cwjz0sd6hnd5g3-python2.7-mako-1.1.0/lib/python2.7/site-packages/mako/runtime.py", line 920, in _render_context\n    _exec_template(inherit, lclcontext, args=args, kwargs=kwargs)\n  File "/nix/store/dakh34sxz4yfr435c0cwjz0sd6hnd5g3-python2.7-mako-1.1.0/lib/python2.7/site-packages/mako/runtime.py", line 947, in _exec_template\n    callable_(context, *args, **kwargs)\n  File "rhodecode_templates_email_templates_base_mako", line 63, in render_body\n  File "rhodecode_templates_email_templates_exception_tracker_mako", line 43, in render_body\nAttributeError: \'str\' object has no attribute \'get\'\n',
             'exc_type': 'AttributeError'
         }
 
         email_kwargs = {
             'test': {},
 
             'message': {
                 'body': 'message body !'
             },
 
             'email_test': {
                 'user': user,
                 'date': datetime.datetime.now(),
             },
 
             'exception': {
                 'email_prefix': '[RHODECODE ERROR]',
                 'exc_id': exc_traceback['exc_id'],
                 'exc_url': 'http://server-url/{}'.format(exc_traceback['exc_id']),
                 'exc_type_name': 'NameError',
                 'exc_traceback': exc_traceback,
             },
 
             'password_reset': {
                 'password_reset_url': 'http://example.com/reset-rhodecode-password/token',
 
                 'user': user,
                 'date': datetime.datetime.now(),
                 'email': '[e-mail]',
                 'first_admin_email': User.get_first_super_admin().email
             },
 
             'password_reset_confirmation': {
                 'new_password': 'new-password-example',
                 'user': user,
                 'date': datetime.datetime.now(),
                 'email': '[e-mail]',
                 'first_admin_email': User.get_first_super_admin().email
             },
 
             'registration': {
                 'user': user,
                 'date': datetime.datetime.now(),
             },
 
             'pull_request_comment': {
                 'user': user,
 
                 'status_change': None,
                 'status_change_type': None,
 
                 'pull_request': pr,
                 'pull_request_commits': [],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://localhost/pr1',
                 'pr_comment_url': 'http://comment-url',
                 'pr_comment_reply_url': 'http://comment-url#reply',
 
                 'comment_file': None,
                 'comment_line': None,
                 'comment_type': 'note',
                 'comment_body': 'This is my comment body. *I like !*',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
 
             },
 
             'pull_request_comment+status': {
                 'user': user,
 
                 'status_change': 'approved',
                 'status_change_type': 'approved',
 
                 'pull_request': pr,
                 'pull_request_commits': [],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://localhost/pr1',
                 'pr_comment_url': 'http://comment-url',
                 'pr_comment_reply_url': 'http://comment-url#reply',
 
                 'comment_type': 'todo',
                 'comment_file': None,
                 'comment_line': None,
                 'comment_body': '''
 I think something like this would be better
 
 ```py
 // markdown renderer
 
 def db():
    global connection
    return connection
 
 ```
                 
                 ''',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
 
             },
 
             'pull_request_comment+file': {
                 'user': user,
 
                 'status_change': None,
                 'status_change_type': None,
 
                 'pull_request': pr,
                 'pull_request_commits': [],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://localhost/pr1',
 
                 'pr_comment_url': 'http://comment-url',
                 'pr_comment_reply_url': 'http://comment-url#reply',
 
                 'comment_file': 'rhodecode/model/get_flow_commits',
                 'comment_line': 'o1210',
                 'comment_type': 'todo',
                 'comment_body': '''
 I like this !
 
 But please check this code
 
 .. code-block:: javascript
 
   // THIS IS RST CODE
 
   this.createResolutionComment = function(commentId) {
     // hide the trigger text
     $('#resolve-comment-{0}'.format(commentId)).hide();
 
     var comment = $('#comment-'+commentId);
     var commentData = comment.data();
     if (commentData.commentInline) {
-        this.createComment(comment, commentId)
+        this.createComment(comment, f_path, line_no, commentId)
     } else {
         Rhodecode.comments.createGeneralComment('general', "$placeholder", commentId)
     }
 
     return false;
   };
 
 This should work better !
                 ''',
                 'comment_id': 2048,
                 'renderer_type': 'rst',
                 'mention': True,
 
             },
 
             'pull_request_update': {
                 'updating_user': user,
 
                 'status_change': None,
                 'status_change_type': None,
 
                 'pull_request': pr,
                 'pull_request_commits': [],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://localhost/pr1',
 
                 # update comment links
                 'pr_comment_url': 'http://comment-url',
                 'pr_comment_reply_url': 'http://comment-url#reply',
                 'ancestor_commit_id': 'f39bd443',
                 'added_commits': commit_changes.added,
                 'removed_commits': commit_changes.removed,
                 'changed_files': (file_changes.added + file_changes.modified + file_changes.removed),
                 'added_files': file_changes.added,
                 'modified_files': file_changes.modified,
                 'removed_files': file_changes.removed,
             },
 
             'cs_comment': {
                 'user': user,
                 'commit': AttributeDict(idx=123, raw_id='a'*40, message='Commit message'),
                 'status_change': None,
                 'status_change_type': None,
 
                 'commit_target_repo_url': 'http://foo.example.com/#comment1',
                 'repo_name': 'test-repo',
                 'comment_type': 'note',
                 'comment_file': None,
                 'comment_line': None,
                 'commit_comment_url': 'http://comment-url',
                 'commit_comment_reply_url': 'http://comment-url#reply',
                 'comment_body': 'This is my comment body. *I like !*',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
             },
 
             'cs_comment+status': {
                 'user': user,
                 'commit': AttributeDict(idx=123, raw_id='a' * 40, message='Commit message'),
                 'status_change': 'approved',
                 'status_change_type': 'approved',
 
                 'commit_target_repo_url': 'http://foo.example.com/#comment1',
                 'repo_name': 'test-repo',
                 'comment_type': 'note',
                 'comment_file': None,
                 'comment_line': None,
                 'commit_comment_url': 'http://comment-url',
                 'commit_comment_reply_url': 'http://comment-url#reply',
                 'comment_body': '''
 Hello **world**
 
 This is a multiline comment :)
 
 - list
 - list2
                 ''',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
             },
 
             'cs_comment+file': {
                 'user': user,
                 'commit': AttributeDict(idx=123, raw_id='a' * 40, message='Commit message'),
                 'status_change': None,
                 'status_change_type': None,
 
                 'commit_target_repo_url': 'http://foo.example.com/#comment1',
                 'repo_name': 'test-repo',
 
                 'comment_type': 'note',
                 'comment_file': 'test-file.py',
                 'comment_line': 'n100',
 
                 'commit_comment_url': 'http://comment-url',
                 'commit_comment_reply_url': 'http://comment-url#reply',
                 'comment_body': 'This is my comment body. *I like !*',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
             },
 
             'pull_request': {
                 'user': user,
                 'pull_request': pr,
                 'pull_request_commits': [
                     ('472d1df03bf7206e278fcedc6ac92b46b01c4e21', '''\
         my-account: moved email closer to profile as it's similar data just moved outside.                    
                             '''),
                     ('cbfa3061b6de2696c7161ed15ba5c6a0045f90a7', '''\
         users: description edit fixes
 
         - tests
         - added metatags info                    
                             '''),
                 ],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://code.rhodecode.com/_pull-request/123',
                 'user_role': 'reviewer',
             },
 
             'pull_request+reviewer_role': {
                 'user': user,
                 'pull_request': pr,
                 'pull_request_commits': [
                     ('472d1df03bf7206e278fcedc6ac92b46b01c4e21', '''\
 my-account: moved email closer to profile as it's similar data just moved outside.                    
                     '''),
                     ('cbfa3061b6de2696c7161ed15ba5c6a0045f90a7', '''\
 users: description edit fixes
 
 - tests
 - added metatags info                    
                     '''),
                 ],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://code.rhodecode.com/_pull-request/123',
                 'user_role': 'reviewer',
             },
 
             'pull_request+observer_role': {
                 'user': user,
                 'pull_request': pr,
                 'pull_request_commits': [
                     ('472d1df03bf7206e278fcedc6ac92b46b01c4e21', '''\
         my-account: moved email closer to profile as it's similar data just moved outside.                    
                             '''),
                     ('cbfa3061b6de2696c7161ed15ba5c6a0045f90a7', '''\
         users: description edit fixes
 
         - tests
         - added metatags info                    
                             '''),
                 ],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://code.rhodecode.com/_pull-request/123',
                 'user_role': 'observer'
             }
         }
 
         template_type = email_id.split('+')[0]
         (c.subject, c.email_body, c.email_body_plaintext) = EmailNotificationModel().render_email(
             template_type, **email_kwargs.get(email_id, {}))
 
         test_email = self.request.GET.get('email')
         if test_email:
             recipients = [test_email]
             run_task(tasks.send_email, recipients, c.subject,
                      c.email_body_plaintext, c.email_body)
 
         if self.request.matched_route.name == 'debug_style_email_plain_rendered':
             template = 'debug_style/email_plain_rendered.mako'
         else:
             template = 'debug_style/email.mako'
         return render_to_response(
             template, self._get_template_context(c),
             request=self.request)
 
     @view_config(
         route_name='debug_style_template', request_method='GET',
         renderer=None)
     def template(self):
         t_path = self.request.matchdict['t_path']
         c = self.load_default_context()
         c.active = os.path.splitext(t_path)[0]
         c.came_from = ''
         # NOTE(marcink): extend the email types with variations based on data sets
         c.email_types = {
             'cs_comment+file': {},
             'cs_comment+status': {},
 
             'pull_request_comment+file': {},
             'pull_request_comment+status': {},
 
             'pull_request_update': {},
 
             'pull_request+reviewer_role': {},
             'pull_request+observer_role': {},
         }
         c.email_types.update(EmailNotificationModel.email_types)
 
         return render_to_response(
             'debug_style/' + t_path, self._get_template_context(c),
             request=self.request)
 

rhodecode/apps/repository/views/repo_commits.py

@@ -1,791 +1,795 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2010-2020 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import logging
 import collections
 
 from pyramid.httpexceptions import (
     HTTPNotFound, HTTPBadRequest, HTTPFound, HTTPForbidden, HTTPConflict)
 from pyramid.view import view_config
 from pyramid.renderers import render
 from pyramid.response import Response
 
 from rhodecode.apps._base import RepoAppView
 from rhodecode.apps.file_store import utils as store_utils
 from rhodecode.apps.file_store.exceptions import FileNotAllowedException, FileOverSizeException
 
 from rhodecode.lib import diffs, codeblocks, channelstream
 from rhodecode.lib.auth import (
     LoginRequired, HasRepoPermissionAnyDecorator, NotAnonymous, CSRFRequired)
 from rhodecode.lib.ext_json import json
 from rhodecode.lib.compat import OrderedDict
 from rhodecode.lib.diffs import (
     cache_diff, load_cached_diff, diff_cache_exist, get_diff_context,
     get_diff_whitespace_flag)
 from rhodecode.lib.exceptions import StatusChangeOnClosedPullRequestError, CommentVersionMismatch
 import rhodecode.lib.helpers as h
 from rhodecode.lib.utils2 import safe_unicode, str2bool, StrictAttributeDict
 from rhodecode.lib.vcs.backends.base import EmptyCommit
 from rhodecode.lib.vcs.exceptions import (
     RepositoryError, CommitDoesNotExistError)
 from rhodecode.model.db import ChangesetComment, ChangesetStatus, FileStore, \
     ChangesetCommentHistory
 from rhodecode.model.changeset_status import ChangesetStatusModel
 from rhodecode.model.comment import CommentsModel
 from rhodecode.model.meta import Session
 from rhodecode.model.settings import VcsSettingsModel
 
 log = logging.getLogger(__name__)
 
 
 def _update_with_GET(params, request):
     for k in ['diff1', 'diff2', 'diff']:
         params[k] += request.GET.getall(k)
 
 
 class RepoCommitsView(RepoAppView):
     def load_default_context(self):
         c = self._get_local_tmpl_context(include_app_defaults=True)
         c.rhodecode_repo = self.rhodecode_vcs_repo
 
         return c
 
     def _is_diff_cache_enabled(self, target_repo):
         caching_enabled = self._get_general_setting(
             target_repo, 'rhodecode_diff_cache')
         log.debug('Diff caching enabled: %s', caching_enabled)
         return caching_enabled
 
     def _commit(self, commit_id_range, method):
         _ = self.request.translate
         c = self.load_default_context()
         c.fulldiff = self.request.GET.get('fulldiff')
 
         # fetch global flags of ignore ws or context lines
         diff_context = get_diff_context(self.request)
         hide_whitespace_changes = get_diff_whitespace_flag(self.request)
 
         # diff_limit will cut off the whole diff if the limit is applied
         # otherwise it will just hide the big files from the front-end
         diff_limit = c.visual.cut_off_limit_diff
         file_limit = c.visual.cut_off_limit_file
 
         # get ranges of commit ids if preset
         commit_range = commit_id_range.split('...')[:2]
 
         try:
             pre_load = ['affected_files', 'author', 'branch', 'date',
                         'message', 'parents']
             if self.rhodecode_vcs_repo.alias == 'hg':
                 pre_load += ['hidden', 'obsolete', 'phase']
 
             if len(commit_range) == 2:
                 commits = self.rhodecode_vcs_repo.get_commits(
                     start_id=commit_range[0], end_id=commit_range[1],
                     pre_load=pre_load, translate_tags=False)
                 commits = list(commits)
             else:
                 commits = [self.rhodecode_vcs_repo.get_commit(
                     commit_id=commit_id_range, pre_load=pre_load)]
 
             c.commit_ranges = commits
             if not c.commit_ranges:
                 raise RepositoryError('The commit range returned an empty result')
         except CommitDoesNotExistError as e:
             msg = _('No such commit exists. Org exception: `{}`').format(e)
             h.flash(msg, category='error')
             raise HTTPNotFound()
         except Exception:
             log.exception("General failure")
             raise HTTPNotFound()
         single_commit = len(c.commit_ranges) == 1
 
         c.changes = OrderedDict()
         c.lines_added = 0
         c.lines_deleted = 0
 
         # auto collapse if we have more than limit
         collapse_limit = diffs.DiffProcessor._collapse_commits_over
         c.collapse_all_commits = len(c.commit_ranges) > collapse_limit
 
         c.commit_statuses = ChangesetStatus.STATUSES
         c.inline_comments = []
         c.files = []
 
         c.comments = []
         c.unresolved_comments = []
         c.resolved_comments = []
 
         # Single commit
         if single_commit:
             commit = c.commit_ranges[0]
             c.comments = CommentsModel().get_comments(
                 self.db_repo.repo_id,
                 revision=commit.raw_id)
 
             # comments from PR
             statuses = ChangesetStatusModel().get_statuses(
                 self.db_repo.repo_id, commit.raw_id,
                 with_revisions=True)
 
             prs = set()
             reviewers = list()
             reviewers_duplicates = set()  # to not have duplicates from multiple votes
             for c_status in statuses:
 
                 # extract associated pull-requests from votes
                 if c_status.pull_request:
                     prs.add(c_status.pull_request)
 
                 # extract reviewers
                 _user_id = c_status.author.user_id
                 if _user_id not in reviewers_duplicates:
                     reviewers.append(
                         StrictAttributeDict({
                             'user': c_status.author,
 
                             # fake attributed for commit, page that we don't have
                             # but we share the display with PR page
                             'mandatory': False,
                             'reasons': [],
                             'rule_user_group_data': lambda: None
                         })
                     )
                     reviewers_duplicates.add(_user_id)
 
             c.reviewers_count = len(reviewers)
             c.observers_count = 0
 
             # from associated statuses, check the pull requests, and
             # show comments from them
             for pr in prs:
                 c.comments.extend(pr.comments)
 
             c.unresolved_comments = CommentsModel()\
                 .get_commit_unresolved_todos(commit.raw_id)
             c.resolved_comments = CommentsModel()\
                 .get_commit_resolved_todos(commit.raw_id)
 
             c.inline_comments_flat = CommentsModel()\
                 .get_commit_inline_comments(commit.raw_id)
 
             review_statuses = ChangesetStatusModel().aggregate_votes_by_user(
                 statuses, reviewers)
 
             c.commit_review_status = ChangesetStatus.STATUS_NOT_REVIEWED
 
             c.commit_set_reviewers_data_json = collections.OrderedDict({'reviewers': []})
 
             for review_obj, member, reasons, mandatory, status in review_statuses:
                 member_reviewer = h.reviewer_as_json(
                     member, reasons=reasons, mandatory=mandatory, role=None,
                     user_group=None
                 )
 
                 current_review_status = status[0][1].status if status else ChangesetStatus.STATUS_NOT_REVIEWED
                 member_reviewer['review_status'] = current_review_status
                 member_reviewer['review_status_label'] = h.commit_status_lbl(current_review_status)
                 member_reviewer['allowed_to_update'] = False
                 c.commit_set_reviewers_data_json['reviewers'].append(member_reviewer)
 
             c.commit_set_reviewers_data_json = json.dumps(c.commit_set_reviewers_data_json)
 
             # NOTE(marcink): this uses the same voting logic as in pull-requests
             c.commit_review_status = ChangesetStatusModel().calculate_status(review_statuses)
             c.commit_broadcast_channel = channelstream.comment_channel(c.repo_name, commit_obj=commit)
 
         diff = None
         # Iterate over ranges (default commit view is always one commit)
         for commit in c.commit_ranges:
             c.changes[commit.raw_id] = []
 
             commit2 = commit
             commit1 = commit.first_parent
 
             if method == 'show':
                 inline_comments = CommentsModel().get_inline_comments(
                     self.db_repo.repo_id, revision=commit.raw_id)
                 c.inline_cnt = len(CommentsModel().get_inline_comments_as_list(
                     inline_comments))
                 c.inline_comments = inline_comments
 
                 cache_path = self.rhodecode_vcs_repo.get_create_shadow_cache_pr_path(
                     self.db_repo)
                 cache_file_path = diff_cache_exist(
                     cache_path, 'diff', commit.raw_id,
                     hide_whitespace_changes, diff_context, c.fulldiff)
 
                 caching_enabled = self._is_diff_cache_enabled(self.db_repo)
                 force_recache = str2bool(self.request.GET.get('force_recache'))
 
                 cached_diff = None
                 if caching_enabled:
                     cached_diff = load_cached_diff(cache_file_path)
 
                 has_proper_diff_cache = cached_diff and cached_diff.get('diff')
                 if not force_recache and has_proper_diff_cache:
                     diffset = cached_diff['diff']
                 else:
                     vcs_diff = self.rhodecode_vcs_repo.get_diff(
                         commit1, commit2,
                         ignore_whitespace=hide_whitespace_changes,
                         context=diff_context)
 
                     diff_processor = diffs.DiffProcessor(
                         vcs_diff, format='newdiff', diff_limit=diff_limit,
                         file_limit=file_limit, show_full_diff=c.fulldiff)
 
                     _parsed = diff_processor.prepare()
 
                     diffset = codeblocks.DiffSet(
                         repo_name=self.db_repo_name,
                         source_node_getter=codeblocks.diffset_node_getter(commit1),
                         target_node_getter=codeblocks.diffset_node_getter(commit2))
 
                     diffset = self.path_filter.render_patchset_filtered(
                         diffset, _parsed, commit1.raw_id, commit2.raw_id)
 
                     # save cached diff
                     if caching_enabled:
                         cache_diff(cache_file_path, diffset, None)
 
                 c.limited_diff = diffset.limited_diff
                 c.changes[commit.raw_id] = diffset
             else:
                 # TODO(marcink): no cache usage here...
                 _diff = self.rhodecode_vcs_repo.get_diff(
                     commit1, commit2,
                     ignore_whitespace=hide_whitespace_changes, context=diff_context)
                 diff_processor = diffs.DiffProcessor(
                     _diff, format='newdiff', diff_limit=diff_limit,
                     file_limit=file_limit, show_full_diff=c.fulldiff)
                 # downloads/raw we only need RAW diff nothing else
                 diff = self.path_filter.get_raw_patch(diff_processor)
                 c.changes[commit.raw_id] = [None, None, None, None, diff, None, None]
 
         # sort comments by how they were generated
         c.comments = sorted(c.comments, key=lambda x: x.comment_id)
         c.at_version_num = None
 
         if len(c.commit_ranges) == 1:
             c.commit = c.commit_ranges[0]
             c.parent_tmpl = ''.join(
                 '# Parent  %s\n' % x.raw_id for x in c.commit.parents)
 
         if method == 'download':
             response = Response(diff)
             response.content_type = 'text/plain'
             response.content_disposition = (
                 'attachment; filename=%s.diff' % commit_id_range[:12])
             return response
         elif method == 'patch':
             c.diff = safe_unicode(diff)
             patch = render(
                 'rhodecode:templates/changeset/patch_changeset.mako',
                 self._get_template_context(c), self.request)
             response = Response(patch)
             response.content_type = 'text/plain'
             return response
         elif method == 'raw':
             response = Response(diff)
             response.content_type = 'text/plain'
             return response
         elif method == 'show':
             if len(c.commit_ranges) == 1:
                 html = render(
                     'rhodecode:templates/changeset/changeset.mako',
                     self._get_template_context(c), self.request)
                 return Response(html)
             else:
                 c.ancestor = None
                 c.target_repo = self.db_repo
                 html = render(
                     'rhodecode:templates/changeset/changeset_range.mako',
                     self._get_template_context(c), self.request)
                 return Response(html)
 
         raise HTTPBadRequest()
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='repo_commit', request_method='GET',
         renderer=None)
     def repo_commit_show(self):
         commit_id = self.request.matchdict['commit_id']
         return self._commit(commit_id, method='show')
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='repo_commit_raw', request_method='GET',
         renderer=None)
     @view_config(
         route_name='repo_commit_raw_deprecated', request_method='GET',
         renderer=None)
     def repo_commit_raw(self):
         commit_id = self.request.matchdict['commit_id']
         return self._commit(commit_id, method='raw')
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='repo_commit_patch', request_method='GET',
         renderer=None)
     def repo_commit_patch(self):
         commit_id = self.request.matchdict['commit_id']
         return self._commit(commit_id, method='patch')
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='repo_commit_download', request_method='GET',
         renderer=None)
     def repo_commit_download(self):
         commit_id = self.request.matchdict['commit_id']
         return self._commit(commit_id, method='download')
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='repo_commit_comment_create', request_method='POST',
         renderer='json_ext')
     def repo_commit_comment_create(self):
         _ = self.request.translate
         commit_id = self.request.matchdict['commit_id']
 
         c = self.load_default_context()
         status = self.request.POST.get('changeset_status', None)
         text = self.request.POST.get('text')
         comment_type = self.request.POST.get('comment_type')
         resolves_comment_id = self.request.POST.get('resolves_comment_id', None)
+        f_path = self.request.POST.get('f_path')
+        line_no = self.request.POST.get('line')
+        target_elem_id = 'file-{}'.format(h.safeid(h.safe_unicode(f_path)))
 
         if status:
             text = text or (_('Status change %(transition_icon)s %(status)s')
                             % {'transition_icon': '>',
                                'status': ChangesetStatus.get_status_lbl(status)})
 
         multi_commit_ids = []
         for _commit_id in self.request.POST.get('commit_ids', '').split(','):
             if _commit_id not in ['', None, EmptyCommit.raw_id]:
                 if _commit_id not in multi_commit_ids:
                     multi_commit_ids.append(_commit_id)
 
         commit_ids = multi_commit_ids or [commit_id]
 
         comment = None
         for current_id in filter(None, commit_ids):
             comment = CommentsModel().create(
                 text=text,
                 repo=self.db_repo.repo_id,
                 user=self._rhodecode_db_user.user_id,
                 commit_id=current_id,
-                f_path=self.request.POST.get('f_path'),
-                line_no=self.request.POST.get('line'),
+                f_path=f_path,
+                line_no=line_no,
                 status_change=(ChangesetStatus.get_status_lbl(status)
                                if status else None),
                 status_change_type=status,
                 comment_type=comment_type,
                 resolves_comment_id=resolves_comment_id,
                 auth_user=self._rhodecode_user
             )
             is_inline = comment.is_inline
 
             # get status if set !
             if status:
                 # if latest status was from pull request and it's closed
                 # disallow changing status !
                 # dont_allow_on_closed_pull_request = True !
 
                 try:
                     ChangesetStatusModel().set_status(
                         self.db_repo.repo_id,
                         status,
                         self._rhodecode_db_user.user_id,
                         comment,
                         revision=current_id,
                         dont_allow_on_closed_pull_request=True
                     )
                 except StatusChangeOnClosedPullRequestError:
                     msg = _('Changing the status of a commit associated with '
                             'a closed pull request is not allowed')
                     log.exception(msg)
                     h.flash(msg, category='warning')
                     raise HTTPFound(h.route_path(
                         'repo_commit', repo_name=self.db_repo_name,
                         commit_id=current_id))
 
             commit = self.db_repo.get_commit(current_id)
             CommentsModel().trigger_commit_comment_hook(
                 self.db_repo, self._rhodecode_user, 'create',
                 data={'comment': comment, 'commit': commit})
 
         # finalize, commit and redirect
         Session().commit()
 
-        data = {
-            'target_id': h.safeid(h.safe_unicode(
-                self.request.POST.get('f_path'))),
-        }
+        data = {}
         if comment:
+            comment_id = comment.comment_id
+            data[comment_id] = {
+                'target_id': target_elem_id
+            }
             c.co = comment
             c.at_version_num = 0
             rendered_comment = render(
                 'rhodecode:templates/changeset/changeset_comment_block.mako',
                 self._get_template_context(c), self.request)
 
-            data.update(comment.get_dict())
-            data.update({'rendered_text': rendered_comment})
+            data[comment_id].update(comment.get_dict())
+            data[comment_id].update({'rendered_text': rendered_comment})
 
             comment_broadcast_channel = channelstream.comment_channel(
                 self.db_repo_name, commit_obj=commit)
 
             comment_data = data
             comment_type = 'inline' if is_inline else 'general'
             channelstream.comment_channelstream_push(
                 self.request, comment_broadcast_channel, self._rhodecode_user,
                 _('posted a new {} comment').format(comment_type),
                 comment_data=comment_data)
 
         return data
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='repo_commit_comment_preview', request_method='POST',
         renderer='string', xhr=True)
     def repo_commit_comment_preview(self):
         # Technically a CSRF token is not needed as no state changes with this
         # call. However, as this is a POST is better to have it, so automated
         # tools don't flag it as potential CSRF.
         # Post is required because the payload could be bigger than the maximum
         # allowed by GET.
 
         text = self.request.POST.get('text')
         renderer = self.request.POST.get('renderer') or 'rst'
         if text:
             return h.render(text, renderer=renderer, mentions=True,
                             repo_name=self.db_repo_name)
         return ''
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='repo_commit_comment_history_view', request_method='POST',
         renderer='string', xhr=True)
     def repo_commit_comment_history_view(self):
         c = self.load_default_context()
 
         comment_history_id = self.request.matchdict['comment_history_id']
         comment_history = ChangesetCommentHistory.get_or_404(comment_history_id)
         is_repo_comment = comment_history.comment.repo.repo_id == self.db_repo.repo_id
 
         if is_repo_comment:
             c.comment_history = comment_history
 
             rendered_comment = render(
                 'rhodecode:templates/changeset/comment_history.mako',
                 self._get_template_context(c)
                 , self.request)
             return rendered_comment
         else:
             log.warning('No permissions for user %s to show comment_history_id: %s',
                         self._rhodecode_db_user, comment_history_id)
             raise HTTPNotFound()
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='repo_commit_comment_attachment_upload', request_method='POST',
         renderer='json_ext', xhr=True)
     def repo_commit_comment_attachment_upload(self):
         c = self.load_default_context()
         upload_key = 'attachment'
 
         file_obj = self.request.POST.get(upload_key)
 
         if file_obj is None:
             self.request.response.status = 400
             return {'store_fid': None,
                     'access_path': None,
                     'error': '{} data field is missing'.format(upload_key)}
 
         if not hasattr(file_obj, 'filename'):
             self.request.response.status = 400
             return {'store_fid': None,
                     'access_path': None,
                     'error': 'filename cannot be read from the data field'}
 
         filename = file_obj.filename
         file_display_name = filename
 
         metadata = {
             'user_uploaded': {'username': self._rhodecode_user.username,
                               'user_id': self._rhodecode_user.user_id,
                               'ip': self._rhodecode_user.ip_addr}}
 
         # TODO(marcink): allow .ini configuration for allowed_extensions, and file-size
         allowed_extensions = [
             'gif', '.jpeg', '.jpg', '.png', '.docx', '.gz', '.log', '.pdf',
             '.pptx', '.txt', '.xlsx', '.zip']
         max_file_size = 10 * 1024 * 1024  # 10MB, also validated via dropzone.js
 
         try:
             storage = store_utils.get_file_storage(self.request.registry.settings)
             store_uid, metadata = storage.save_file(
                 file_obj.file, filename, extra_metadata=metadata,
                 extensions=allowed_extensions, max_filesize=max_file_size)
         except FileNotAllowedException:
             self.request.response.status = 400
             permitted_extensions = ', '.join(allowed_extensions)
             error_msg = 'File `{}` is not allowed. ' \
                         'Only following extensions are permitted: {}'.format(
                             filename, permitted_extensions)
             return {'store_fid': None,
                     'access_path': None,
                     'error': error_msg}
         except FileOverSizeException:
             self.request.response.status = 400
             limit_mb = h.format_byte_size_binary(max_file_size)
             return {'store_fid': None,
                     'access_path': None,
                     'error': 'File {} is exceeding allowed limit of {}.'.format(
                         filename, limit_mb)}
 
         try:
             entry = FileStore.create(
                 file_uid=store_uid, filename=metadata["filename"],
                 file_hash=metadata["sha256"], file_size=metadata["size"],
                 file_display_name=file_display_name,
                 file_description=u'comment attachment `{}`'.format(safe_unicode(filename)),
                 hidden=True, check_acl=True, user_id=self._rhodecode_user.user_id,
                 scope_repo_id=self.db_repo.repo_id
             )
             Session().add(entry)
             Session().commit()
             log.debug('Stored upload in DB as %s', entry)
         except Exception:
             log.exception('Failed to store file %s', filename)
             self.request.response.status = 400
             return {'store_fid': None,
                     'access_path': None,
                     'error': 'File {} failed to store in DB.'.format(filename)}
 
         Session().commit()
 
         return {
             'store_fid': store_uid,
             'access_path': h.route_path(
                 'download_file', fid=store_uid),
             'fqn_access_path': h.route_url(
                 'download_file', fid=store_uid),
             'repo_access_path': h.route_path(
                 'repo_artifacts_get', repo_name=self.db_repo_name, uid=store_uid),
             'repo_fqn_access_path': h.route_url(
                 'repo_artifacts_get', repo_name=self.db_repo_name, uid=store_uid),
         }
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='repo_commit_comment_delete', request_method='POST',
         renderer='json_ext')
     def repo_commit_comment_delete(self):
         commit_id = self.request.matchdict['commit_id']
         comment_id = self.request.matchdict['comment_id']
 
         comment = ChangesetComment.get_or_404(comment_id)
         if not comment:
             log.debug('Comment with id:%s not found, skipping', comment_id)
             # comment already deleted in another call probably
             return True
 
         if comment.immutable:
             # don't allow deleting comments that are immutable
             raise HTTPForbidden()
 
         is_repo_admin = h.HasRepoPermissionAny('repository.admin')(self.db_repo_name)
         super_admin = h.HasPermissionAny('hg.admin')()
         comment_owner = (comment.author.user_id == self._rhodecode_db_user.user_id)
         is_repo_comment = comment.repo.repo_id == self.db_repo.repo_id
         comment_repo_admin = is_repo_admin and is_repo_comment
 
         if super_admin or comment_owner or comment_repo_admin:
             CommentsModel().delete(comment=comment, auth_user=self._rhodecode_user)
             Session().commit()
             return True
         else:
             log.warning('No permissions for user %s to delete comment_id: %s',
                         self._rhodecode_db_user, comment_id)
             raise HTTPNotFound()
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='repo_commit_comment_edit', request_method='POST',
         renderer='json_ext')
     def repo_commit_comment_edit(self):
         self.load_default_context()
 
         comment_id = self.request.matchdict['comment_id']
         comment = ChangesetComment.get_or_404(comment_id)
 
         if comment.immutable:
             # don't allow deleting comments that are immutable
             raise HTTPForbidden()
 
         is_repo_admin = h.HasRepoPermissionAny('repository.admin')(self.db_repo_name)
         super_admin = h.HasPermissionAny('hg.admin')()
         comment_owner = (comment.author.user_id == self._rhodecode_db_user.user_id)
         is_repo_comment = comment.repo.repo_id == self.db_repo.repo_id
         comment_repo_admin = is_repo_admin and is_repo_comment
 
         if super_admin or comment_owner or comment_repo_admin:
             text = self.request.POST.get('text')
             version = self.request.POST.get('version')
             if text == comment.text:
                 log.warning(
                     'Comment(repo): '
                     'Trying to create new version '
                     'with the same comment body {}'.format(
                         comment_id,
                     )
                 )
                 raise HTTPNotFound()
 
             if version.isdigit():
                 version = int(version)
             else:
                 log.warning(
                     'Comment(repo): Wrong version type {} {} '
                     'for comment {}'.format(
                         version,
                         type(version),
                         comment_id,
                     )
                 )
                 raise HTTPNotFound()
 
             try:
                 comment_history = CommentsModel().edit(
                     comment_id=comment_id,
                     text=text,
                     auth_user=self._rhodecode_user,
                     version=version,
                 )
             except CommentVersionMismatch:
                 raise HTTPConflict()
 
             if not comment_history:
                 raise HTTPNotFound()
 
             commit_id = self.request.matchdict['commit_id']
             commit = self.db_repo.get_commit(commit_id)
             CommentsModel().trigger_commit_comment_hook(
                 self.db_repo, self._rhodecode_user, 'edit',
                 data={'comment': comment, 'commit': commit})
 
             Session().commit()
             return {
                 'comment_history_id': comment_history.comment_history_id,
                 'comment_id': comment.comment_id,
                 'comment_version': comment_history.version,
                 'comment_author_username': comment_history.author.username,
                 'comment_author_gravatar': h.gravatar_url(comment_history.author.email, 16),
                 'comment_created_on': h.age_component(comment_history.created_on,
                                                       time_is_local=True),
             }
         else:
             log.warning('No permissions for user %s to edit comment_id: %s',
                         self._rhodecode_db_user, comment_id)
             raise HTTPNotFound()
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='repo_commit_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def repo_commit_data(self):
         commit_id = self.request.matchdict['commit_id']
         self.load_default_context()
 
         try:
             return self.rhodecode_vcs_repo.get_commit(commit_id=commit_id)
         except CommitDoesNotExistError as e:
             return EmptyCommit(message=str(e))
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='repo_commit_children', request_method='GET',
         renderer='json_ext', xhr=True)
     def repo_commit_children(self):
         commit_id = self.request.matchdict['commit_id']
         self.load_default_context()
 
         try:
             commit = self.rhodecode_vcs_repo.get_commit(commit_id=commit_id)
             children = commit.children
         except CommitDoesNotExistError:
             children = []
 
         result = {"results": children}
         return result
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='repo_commit_parents', request_method='GET',
         renderer='json_ext')
     def repo_commit_parents(self):
         commit_id = self.request.matchdict['commit_id']
         self.load_default_context()
 
         try:
             commit = self.rhodecode_vcs_repo.get_commit(commit_id=commit_id)
             parents = commit.parents
         except CommitDoesNotExistError:
             parents = []
         result = {"results": parents}
         return result

rhodecode/apps/repository/views/repo_pull_requests.py

@@ -1,1826 +1,1856 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2011-2020 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import logging
 import collections
 
 import formencode
 import formencode.htmlfill
 import peppercorn
 from pyramid.httpexceptions import (
     HTTPFound, HTTPNotFound, HTTPForbidden, HTTPBadRequest, HTTPConflict)
 from pyramid.view import view_config
 from pyramid.renderers import render
 
 from rhodecode.apps._base import RepoAppView, DataGridAppView
 
 from rhodecode.lib import helpers as h, diffs, codeblocks, channelstream
 from rhodecode.lib.base import vcs_operation_context
 from rhodecode.lib.diffs import load_cached_diff, cache_diff, diff_cache_exist
 from rhodecode.lib.exceptions import CommentVersionMismatch
 from rhodecode.lib.ext_json import json
 from rhodecode.lib.auth import (
     LoginRequired, HasRepoPermissionAny, HasRepoPermissionAnyDecorator,
     NotAnonymous, CSRFRequired)
 from rhodecode.lib.utils2 import str2bool, safe_str, safe_unicode, safe_int, aslist
 from rhodecode.lib.vcs.backends.base import (
     EmptyCommit, UpdateFailureReason, unicode_to_reference)
 from rhodecode.lib.vcs.exceptions import (
     CommitDoesNotExistError, RepositoryRequirementError, EmptyRepositoryError)
 from rhodecode.model.changeset_status import ChangesetStatusModel
 from rhodecode.model.comment import CommentsModel
 from rhodecode.model.db import (
     func, false, or_, PullRequest, ChangesetComment, ChangesetStatus, Repository,
     PullRequestReviewers)
 from rhodecode.model.forms import PullRequestForm
 from rhodecode.model.meta import Session
 from rhodecode.model.pull_request import PullRequestModel, MergeCheck
 from rhodecode.model.scm import ScmModel
 
 log = logging.getLogger(__name__)
 
 
 class RepoPullRequestsView(RepoAppView, DataGridAppView):
 
     def load_default_context(self):
         c = self._get_local_tmpl_context(include_app_defaults=True)
         c.REVIEW_STATUS_APPROVED = ChangesetStatus.STATUS_APPROVED
         c.REVIEW_STATUS_REJECTED = ChangesetStatus.STATUS_REJECTED
         # backward compat., we use for OLD PRs a plain renderer
         c.renderer = 'plain'
         return c
 
     def _get_pull_requests_list(
             self, repo_name, source, filter_type, opened_by, statuses):
 
         draw, start, limit = self._extract_chunk(self.request)
         search_q, order_by, order_dir = self._extract_ordering(self.request)
         _render = self.request.get_partial_renderer(
             'rhodecode:templates/data_table/_dt_elements.mako')
 
         # pagination
 
         if filter_type == 'awaiting_review':
             pull_requests = PullRequestModel().get_awaiting_review(
                 repo_name, search_q=search_q, source=source, opened_by=opened_by,
                 statuses=statuses, offset=start, length=limit,
                 order_by=order_by, order_dir=order_dir)
             pull_requests_total_count = PullRequestModel().count_awaiting_review(
                 repo_name, search_q=search_q, source=source, statuses=statuses,
                 opened_by=opened_by)
         elif filter_type == 'awaiting_my_review':
             pull_requests = PullRequestModel().get_awaiting_my_review(
                 repo_name, search_q=search_q, source=source, opened_by=opened_by,
                 user_id=self._rhodecode_user.user_id, statuses=statuses,
                 offset=start, length=limit, order_by=order_by,
                 order_dir=order_dir)
             pull_requests_total_count = PullRequestModel().count_awaiting_my_review(
                 repo_name, search_q=search_q, source=source, user_id=self._rhodecode_user.user_id,
                 statuses=statuses, opened_by=opened_by)
         else:
             pull_requests = PullRequestModel().get_all(
                 repo_name, search_q=search_q, source=source, opened_by=opened_by,
                 statuses=statuses, offset=start, length=limit,
                 order_by=order_by, order_dir=order_dir)
             pull_requests_total_count = PullRequestModel().count_all(
                 repo_name, search_q=search_q, source=source, statuses=statuses,
                 opened_by=opened_by)
 
         data = []
         comments_model = CommentsModel()
         for pr in pull_requests:
             comments_count = comments_model.get_all_comments(
                 self.db_repo.repo_id, pull_request=pr, count_only=True)
 
             data.append({
                 'name': _render('pullrequest_name',
                                 pr.pull_request_id, pr.pull_request_state,
                                 pr.work_in_progress, pr.target_repo.repo_name,
                                 short=True),
                 'name_raw': pr.pull_request_id,
                 'status': _render('pullrequest_status',
                                   pr.calculated_review_status()),
                 'title': _render('pullrequest_title', pr.title, pr.description),
                 'description': h.escape(pr.description),
                 'updated_on': _render('pullrequest_updated_on',
                                       h.datetime_to_time(pr.updated_on)),
                 'updated_on_raw': h.datetime_to_time(pr.updated_on),
                 'created_on': _render('pullrequest_updated_on',
                                       h.datetime_to_time(pr.created_on)),
                 'created_on_raw': h.datetime_to_time(pr.created_on),
                 'state': pr.pull_request_state,
                 'author': _render('pullrequest_author',
                                   pr.author.full_contact, ),
                 'author_raw': pr.author.full_name,
                 'comments': _render('pullrequest_comments', comments_count),
                 'comments_raw': comments_count,
                 'closed': pr.is_closed(),
             })
 
         data = ({
             'draw': draw,
             'data': data,
             'recordsTotal': pull_requests_total_count,
             'recordsFiltered': pull_requests_total_count,
         })
         return data
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='pullrequest_show_all', request_method='GET',
         renderer='rhodecode:templates/pullrequests/pullrequests.mako')
     def pull_request_list(self):
         c = self.load_default_context()
 
         req_get = self.request.GET
         c.source = str2bool(req_get.get('source'))
         c.closed = str2bool(req_get.get('closed'))
         c.my = str2bool(req_get.get('my'))
         c.awaiting_review = str2bool(req_get.get('awaiting_review'))
         c.awaiting_my_review = str2bool(req_get.get('awaiting_my_review'))
 
         c.active = 'open'
         if c.my:
             c.active = 'my'
         if c.closed:
             c.active = 'closed'
         if c.awaiting_review and not c.source:
             c.active = 'awaiting'
         if c.source and not c.awaiting_review:
             c.active = 'source'
         if c.awaiting_my_review:
             c.active = 'awaiting_my'
 
         return self._get_template_context(c)
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='pullrequest_show_all_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def pull_request_list_data(self):
         self.load_default_context()
 
         # additional filters
         req_get = self.request.GET
         source = str2bool(req_get.get('source'))
         closed = str2bool(req_get.get('closed'))
         my = str2bool(req_get.get('my'))
         awaiting_review = str2bool(req_get.get('awaiting_review'))
         awaiting_my_review = str2bool(req_get.get('awaiting_my_review'))
 
         filter_type = 'awaiting_review' if awaiting_review \
             else 'awaiting_my_review' if awaiting_my_review \
             else None
 
         opened_by = None
         if my:
             opened_by = [self._rhodecode_user.user_id]
 
         statuses = [PullRequest.STATUS_NEW, PullRequest.STATUS_OPEN]
         if closed:
             statuses = [PullRequest.STATUS_CLOSED]
 
         data = self._get_pull_requests_list(
             repo_name=self.db_repo_name, source=source,
             filter_type=filter_type, opened_by=opened_by, statuses=statuses)
 
         return data
 
     def _is_diff_cache_enabled(self, target_repo):
         caching_enabled = self._get_general_setting(
             target_repo, 'rhodecode_diff_cache')
         log.debug('Diff caching enabled: %s', caching_enabled)
         return caching_enabled
 
     def _get_diffset(self, source_repo_name, source_repo,
                      ancestor_commit,
                      source_ref_id, target_ref_id,
                      target_commit, source_commit, diff_limit, file_limit,
                      fulldiff, hide_whitespace_changes, diff_context, use_ancestor=True):
 
         if use_ancestor:
             # we might want to not use it for versions
             target_ref_id = ancestor_commit.raw_id
 
         vcs_diff = PullRequestModel().get_diff(
             source_repo, source_ref_id, target_ref_id,
             hide_whitespace_changes, diff_context)
 
         diff_processor = diffs.DiffProcessor(
             vcs_diff, format='newdiff', diff_limit=diff_limit,
             file_limit=file_limit, show_full_diff=fulldiff)
 
         _parsed = diff_processor.prepare()
 
         diffset = codeblocks.DiffSet(
             repo_name=self.db_repo_name,
             source_repo_name=source_repo_name,
             source_node_getter=codeblocks.diffset_node_getter(target_commit),
             target_node_getter=codeblocks.diffset_node_getter(source_commit),
         )
         diffset = self.path_filter.render_patchset_filtered(
             diffset, _parsed, target_commit.raw_id, source_commit.raw_id)
 
         return diffset
 
     def _get_range_diffset(self, source_scm, source_repo,
                            commit1, commit2, diff_limit, file_limit,
                            fulldiff, hide_whitespace_changes, diff_context):
         vcs_diff = source_scm.get_diff(
             commit1, commit2,
             ignore_whitespace=hide_whitespace_changes,
             context=diff_context)
 
         diff_processor = diffs.DiffProcessor(
             vcs_diff, format='newdiff', diff_limit=diff_limit,
             file_limit=file_limit, show_full_diff=fulldiff)
 
         _parsed = diff_processor.prepare()
 
         diffset = codeblocks.DiffSet(
             repo_name=source_repo.repo_name,
             source_node_getter=codeblocks.diffset_node_getter(commit1),
             target_node_getter=codeblocks.diffset_node_getter(commit2))
 
         diffset = self.path_filter.render_patchset_filtered(
             diffset, _parsed, commit1.raw_id, commit2.raw_id)
 
         return diffset
 
     def register_comments_vars(self, c, pull_request, versions, include_drafts=True):
         comments_model = CommentsModel()
 
         # GENERAL COMMENTS with versions #
         q = comments_model._all_general_comments_of_pull_request(pull_request)
         q = q.order_by(ChangesetComment.comment_id.asc())
         if not include_drafts:
             q = q.filter(ChangesetComment.draft == false())
         general_comments = q
 
         # pick comments we want to render at current version
         c.comment_versions = comments_model.aggregate_comments(
             general_comments, versions, c.at_version_num)
 
         # INLINE COMMENTS with versions  #
         q = comments_model._all_inline_comments_of_pull_request(pull_request)
         q = q.order_by(ChangesetComment.comment_id.asc())
         if not include_drafts:
             q = q.filter(ChangesetComment.draft == false())
         inline_comments = q
 
         c.inline_versions = comments_model.aggregate_comments(
             inline_comments, versions, c.at_version_num, inline=True)
 
         # Comments inline+general
         if c.at_version:
             c.inline_comments_flat = c.inline_versions[c.at_version_num]['display']
             c.comments = c.comment_versions[c.at_version_num]['display']
         else:
             c.inline_comments_flat = c.inline_versions[c.at_version_num]['until']
             c.comments = c.comment_versions[c.at_version_num]['until']
 
         return general_comments, inline_comments
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='pullrequest_show', request_method='GET',
         renderer='rhodecode:templates/pullrequests/pullrequest_show.mako')
     def pull_request_show(self):
         _ = self.request.translate
         c = self.load_default_context()
 
         pull_request = PullRequest.get_or_404(
             self.request.matchdict['pull_request_id'])
         pull_request_id = pull_request.pull_request_id
 
         c.state_progressing = pull_request.is_state_changing()
         c.pr_broadcast_channel = channelstream.pr_channel(pull_request)
 
         _new_state = {
             'created': PullRequest.STATE_CREATED,
         }.get(self.request.GET.get('force_state'))
 
         if c.is_super_admin and _new_state:
             with pull_request.set_state(PullRequest.STATE_UPDATING, final_state=_new_state):
                 h.flash(
                     _('Pull Request state was force changed to `{}`').format(_new_state),
                     category='success')
                 Session().commit()
 
             raise HTTPFound(h.route_path(
                 'pullrequest_show', repo_name=self.db_repo_name,
                 pull_request_id=pull_request_id))
 
         version = self.request.GET.get('version')
         from_version = self.request.GET.get('from_version') or version
         merge_checks = self.request.GET.get('merge_checks')
         c.fulldiff = str2bool(self.request.GET.get('fulldiff'))
         force_refresh = str2bool(self.request.GET.get('force_refresh'))
         c.range_diff_on = self.request.GET.get('range-diff') == "1"
 
         # fetch global flags of ignore ws or context lines
         diff_context = diffs.get_diff_context(self.request)
         hide_whitespace_changes = diffs.get_diff_whitespace_flag(self.request)
 
         (pull_request_latest,
          pull_request_at_ver,
          pull_request_display_obj,
          at_version) = PullRequestModel().get_pr_version(
             pull_request_id, version=version)
 
         pr_closed = pull_request_latest.is_closed()
 
         if pr_closed and (version or from_version):
             # not allow to browse versions for closed PR
             raise HTTPFound(h.route_path(
                 'pullrequest_show', repo_name=self.db_repo_name,
                 pull_request_id=pull_request_id))
 
         versions = pull_request_display_obj.versions()
         # used to store per-commit range diffs
         c.changes = collections.OrderedDict()
 
         c.at_version = at_version
         c.at_version_num = (at_version
                             if at_version and at_version != PullRequest.LATEST_VER
                             else None)
 
         c.at_version_index = ChangesetComment.get_index_from_version(
             c.at_version_num, versions)
 
         (prev_pull_request_latest,
          prev_pull_request_at_ver,
          prev_pull_request_display_obj,
          prev_at_version) = PullRequestModel().get_pr_version(
             pull_request_id, version=from_version)
 
         c.from_version = prev_at_version
         c.from_version_num = (prev_at_version
                               if prev_at_version and prev_at_version != PullRequest.LATEST_VER
                               else None)
         c.from_version_index = ChangesetComment.get_index_from_version(
             c.from_version_num, versions)
 
         # define if we're in COMPARE mode or VIEW at version mode
         compare = at_version != prev_at_version
 
         # pull_requests repo_name we opened it against
         # ie. target_repo must match
         if self.db_repo_name != pull_request_at_ver.target_repo.repo_name:
             log.warning('Mismatch between the current repo: %s, and target %s',
                         self.db_repo_name, pull_request_at_ver.target_repo.repo_name)
             raise HTTPNotFound()
 
         c.shadow_clone_url = PullRequestModel().get_shadow_clone_url(pull_request_at_ver)
 
         c.pull_request = pull_request_display_obj
         c.renderer = pull_request_at_ver.description_renderer or c.renderer
         c.pull_request_latest = pull_request_latest
 
         # inject latest version
         latest_ver = PullRequest.get_pr_display_object(pull_request_latest, pull_request_latest)
         c.versions = versions + [latest_ver]
 
         if compare or (at_version and not at_version == PullRequest.LATEST_VER):
             c.allowed_to_change_status = False
             c.allowed_to_update = False
             c.allowed_to_merge = False
             c.allowed_to_delete = False
             c.allowed_to_comment = False
             c.allowed_to_close = False
         else:
             can_change_status = PullRequestModel().check_user_change_status(
                 pull_request_at_ver, self._rhodecode_user)
             c.allowed_to_change_status = can_change_status and not pr_closed
 
             c.allowed_to_update = PullRequestModel().check_user_update(
                 pull_request_latest, self._rhodecode_user) and not pr_closed
             c.allowed_to_merge = PullRequestModel().check_user_merge(
                 pull_request_latest, self._rhodecode_user) and not pr_closed
             c.allowed_to_delete = PullRequestModel().check_user_delete(
                 pull_request_latest, self._rhodecode_user) and not pr_closed
             c.allowed_to_comment = not pr_closed
             c.allowed_to_close = c.allowed_to_merge and not pr_closed
 
         c.forbid_adding_reviewers = False
         c.forbid_author_to_review = False
         c.forbid_commit_author_to_review = False
 
         if pull_request_latest.reviewer_data and \
                         'rules' in pull_request_latest.reviewer_data:
             rules = pull_request_latest.reviewer_data['rules'] or {}
             try:
                 c.forbid_adding_reviewers = rules.get('forbid_adding_reviewers')
                 c.forbid_author_to_review = rules.get('forbid_author_to_review')
                 c.forbid_commit_author_to_review = rules.get('forbid_commit_author_to_review')
             except Exception:
                 pass
 
         # check merge capabilities
         _merge_check = MergeCheck.validate(
             pull_request_latest, auth_user=self._rhodecode_user,
             translator=self.request.translate,
             force_shadow_repo_refresh=force_refresh)
 
         c.pr_merge_errors = _merge_check.error_details
         c.pr_merge_possible = not _merge_check.failed
         c.pr_merge_message = _merge_check.merge_msg
         c.pr_merge_source_commit = _merge_check.source_commit
         c.pr_merge_target_commit = _merge_check.target_commit
 
         c.pr_merge_info = MergeCheck.get_merge_conditions(
             pull_request_latest, translator=self.request.translate)
 
         c.pull_request_review_status = _merge_check.review_status
         if merge_checks:
             self.request.override_renderer = \
                 'rhodecode:templates/pullrequests/pullrequest_merge_checks.mako'
             return self._get_template_context(c)
 
         c.reviewers_count = pull_request.reviewers_count
         c.observers_count = pull_request.observers_count
 
         # reviewers and statuses
         c.pull_request_default_reviewers_data_json = json.dumps(pull_request.reviewer_data)
         c.pull_request_set_reviewers_data_json = collections.OrderedDict({'reviewers': []})
         c.pull_request_set_observers_data_json = collections.OrderedDict({'observers': []})
 
         for review_obj, member, reasons, mandatory, status in pull_request_at_ver.reviewers_statuses():
             member_reviewer = h.reviewer_as_json(
                 member, reasons=reasons, mandatory=mandatory,
                 role=review_obj.role,
                 user_group=review_obj.rule_user_group_data()
             )
 
             current_review_status = status[0][1].status if status else ChangesetStatus.STATUS_NOT_REVIEWED
             member_reviewer['review_status'] = current_review_status
             member_reviewer['review_status_label'] = h.commit_status_lbl(current_review_status)
             member_reviewer['allowed_to_update'] = c.allowed_to_update
             c.pull_request_set_reviewers_data_json['reviewers'].append(member_reviewer)
 
         c.pull_request_set_reviewers_data_json = json.dumps(c.pull_request_set_reviewers_data_json)
 
         for observer_obj, member in pull_request_at_ver.observers():
             member_observer = h.reviewer_as_json(
                 member, reasons=[], mandatory=False,
                 role=observer_obj.role,
                 user_group=observer_obj.rule_user_group_data()
             )
             member_observer['allowed_to_update'] = c.allowed_to_update
             c.pull_request_set_observers_data_json['observers'].append(member_observer)
 
         c.pull_request_set_observers_data_json = json.dumps(c.pull_request_set_observers_data_json)
 
         general_comments, inline_comments = \
             self.register_comments_vars(c, pull_request_latest, versions)
 
         # TODOs
         c.unresolved_comments = CommentsModel() \
             .get_pull_request_unresolved_todos(pull_request_latest)
         c.resolved_comments = CommentsModel() \
             .get_pull_request_resolved_todos(pull_request_latest)
 
         # if we use version, then do not show later comments
         # than current version
         display_inline_comments = collections.defaultdict(
             lambda: collections.defaultdict(list))
         for co in inline_comments:
             if c.at_version_num:
                 # pick comments that are at least UPTO given version, so we
                 # don't render comments for higher version
                 should_render = co.pull_request_version_id and \
                                 co.pull_request_version_id <= c.at_version_num
             else:
                 # showing all, for 'latest'
                 should_render = True
 
             if should_render:
                 display_inline_comments[co.f_path][co.line_no].append(co)
 
         # load diff data into template context, if we use compare mode then
         # diff is calculated based on changes between versions of PR
 
         source_repo = pull_request_at_ver.source_repo
         source_ref_id = pull_request_at_ver.source_ref_parts.commit_id
 
         target_repo = pull_request_at_ver.target_repo
         target_ref_id = pull_request_at_ver.target_ref_parts.commit_id
 
         if compare:
             # in compare switch the diff base to latest commit from prev version
             target_ref_id = prev_pull_request_display_obj.revisions[0]
 
         # despite opening commits for bookmarks/branches/tags, we always
         # convert this to rev to prevent changes after bookmark or branch change
         c.source_ref_type = 'rev'
         c.source_ref = source_ref_id
 
         c.target_ref_type = 'rev'
         c.target_ref = target_ref_id
 
         c.source_repo = source_repo
         c.target_repo = target_repo
 
         c.commit_ranges = []
         source_commit = EmptyCommit()
         target_commit = EmptyCommit()
         c.missing_requirements = False
 
         source_scm = source_repo.scm_instance()
         target_scm = target_repo.scm_instance()
 
         shadow_scm = None
         try:
             shadow_scm = pull_request_latest.get_shadow_repo()
         except Exception:
             log.debug('Failed to get shadow repo', exc_info=True)
         # try first the existing source_repo, and then shadow
         # repo if we can obtain one
         commits_source_repo = source_scm
         if shadow_scm:
             commits_source_repo = shadow_scm
 
         c.commits_source_repo = commits_source_repo
         c.ancestor = None  # set it to None, to hide it from PR view
 
         # empty version means latest, so we keep this to prevent
         # double caching
         version_normalized = version or PullRequest.LATEST_VER
         from_version_normalized = from_version or PullRequest.LATEST_VER
 
         cache_path = self.rhodecode_vcs_repo.get_create_shadow_cache_pr_path(target_repo)
         cache_file_path = diff_cache_exist(
             cache_path, 'pull_request', pull_request_id, version_normalized,
             from_version_normalized, source_ref_id, target_ref_id,
             hide_whitespace_changes, diff_context, c.fulldiff)
 
         caching_enabled = self._is_diff_cache_enabled(c.target_repo)
         force_recache = self.get_recache_flag()
 
         cached_diff = None
         if caching_enabled:
             cached_diff = load_cached_diff(cache_file_path)
 
         has_proper_commit_cache = (
                 cached_diff and cached_diff.get('commits')
                 and len(cached_diff.get('commits', [])) == 5
                 and cached_diff.get('commits')[0]
                 and cached_diff.get('commits')[3])
 
         if not force_recache and not c.range_diff_on and has_proper_commit_cache:
             diff_commit_cache = \
                 (ancestor_commit, commit_cache, missing_requirements,
                  source_commit, target_commit) = cached_diff['commits']
         else:
             # NOTE(marcink): we reach potentially unreachable errors when a PR has
             # merge errors resulting in potentially hidden commits in the shadow repo.
             maybe_unreachable = _merge_check.MERGE_CHECK in _merge_check.error_details \
                                 and _merge_check.merge_response
             maybe_unreachable = maybe_unreachable \
                                 and _merge_check.merge_response.metadata.get('unresolved_files')
             log.debug("Using unreachable commits due to MERGE_CHECK in merge simulation")
             diff_commit_cache = \
                 (ancestor_commit, commit_cache, missing_requirements,
                  source_commit, target_commit) = self.get_commits(
                     commits_source_repo,
                     pull_request_at_ver,
                     source_commit,
                     source_ref_id,
                     source_scm,
                     target_commit,
                     target_ref_id,
                     target_scm,
                 maybe_unreachable=maybe_unreachable)
 
         # register our commit range
         for comm in commit_cache.values():
             c.commit_ranges.append(comm)
 
         c.missing_requirements = missing_requirements
         c.ancestor_commit = ancestor_commit
         c.statuses = source_repo.statuses(
             [x.raw_id for x in c.commit_ranges])
 
         # auto collapse if we have more than limit
         collapse_limit = diffs.DiffProcessor._collapse_commits_over
         c.collapse_all_commits = len(c.commit_ranges) > collapse_limit
         c.compare_mode = compare
 
         # diff_limit is the old behavior, will cut off the whole diff
         # if the limit is applied  otherwise will just hide the
         # big files from the front-end
         diff_limit = c.visual.cut_off_limit_diff
         file_limit = c.visual.cut_off_limit_file
 
         c.missing_commits = False
         if (c.missing_requirements
             or isinstance(source_commit, EmptyCommit)
             or source_commit == target_commit):
 
             c.missing_commits = True
         else:
             c.inline_comments = display_inline_comments
 
             use_ancestor = True
             if from_version_normalized != version_normalized:
                 use_ancestor = False
 
             has_proper_diff_cache = cached_diff and cached_diff.get('commits')
             if not force_recache and has_proper_diff_cache:
                 c.diffset = cached_diff['diff']
             else:
                 try:
                     c.diffset = self._get_diffset(
                         c.source_repo.repo_name, commits_source_repo,
                         c.ancestor_commit,
                         source_ref_id, target_ref_id,
                         target_commit, source_commit,
                         diff_limit, file_limit, c.fulldiff,
                         hide_whitespace_changes, diff_context,
                         use_ancestor=use_ancestor
                     )
 
                     # save cached diff
                     if caching_enabled:
                         cache_diff(cache_file_path, c.diffset, diff_commit_cache)
                 except CommitDoesNotExistError:
                     log.exception('Failed to generate diffset')
                     c.missing_commits = True
 
             if not c.missing_commits:
 
                 c.limited_diff = c.diffset.limited_diff
 
                 # calculate removed files that are bound to comments
                 comment_deleted_files = [
                     fname for fname in display_inline_comments
                     if fname not in c.diffset.file_stats]
 
                 c.deleted_files_comments = collections.defaultdict(dict)
                 for fname, per_line_comments in display_inline_comments.items():
                     if fname in comment_deleted_files:
                         c.deleted_files_comments[fname]['stats'] = 0
                         c.deleted_files_comments[fname]['comments'] = list()
                         for lno, comments in per_line_comments.items():
                             c.deleted_files_comments[fname]['comments'].extend(comments)
 
                 # maybe calculate the range diff
                 if c.range_diff_on:
                     # TODO(marcink): set whitespace/context
                     context_lcl = 3
                     ign_whitespace_lcl = False
 
                     for commit in c.commit_ranges:
                         commit2 = commit
                         commit1 = commit.first_parent
 
                         range_diff_cache_file_path = diff_cache_exist(
                             cache_path, 'diff', commit.raw_id,
                             ign_whitespace_lcl, context_lcl, c.fulldiff)
 
                         cached_diff = None
                         if caching_enabled:
                             cached_diff = load_cached_diff(range_diff_cache_file_path)
 
                         has_proper_diff_cache = cached_diff and cached_diff.get('diff')
                         if not force_recache and has_proper_diff_cache:
                             diffset = cached_diff['diff']
                         else:
                             diffset = self._get_range_diffset(
                                 commits_source_repo, source_repo,
                                 commit1, commit2, diff_limit, file_limit,
                                 c.fulldiff, ign_whitespace_lcl, context_lcl
                             )
 
                         # save cached diff
                         if caching_enabled:
                             cache_diff(range_diff_cache_file_path, diffset, None)
 
                         c.changes[commit.raw_id] = diffset
 
         # this is a hack to properly display links, when creating PR, the
         # compare view and others uses different notation, and
         # compare_commits.mako renders links based on the target_repo.
         # We need to swap that here to generate it properly on the html side
         c.target_repo = c.source_repo
 
         c.commit_statuses = ChangesetStatus.STATUSES
 
         c.show_version_changes = not pr_closed
         if c.show_version_changes:
             cur_obj = pull_request_at_ver
             prev_obj = prev_pull_request_at_ver
 
             old_commit_ids = prev_obj.revisions
             new_commit_ids = cur_obj.revisions
             commit_changes = PullRequestModel()._calculate_commit_id_changes(
                 old_commit_ids, new_commit_ids)
             c.commit_changes_summary = commit_changes
 
             # calculate the diff for commits between versions
             c.commit_changes = []
 
             def mark(cs, fw):
                 return list(h.itertools.izip_longest([], cs, fillvalue=fw))
 
             for c_type, raw_id in mark(commit_changes.added, 'a') \
                                 + mark(commit_changes.removed, 'r') \
                                 + mark(commit_changes.common, 'c'):
 
                 if raw_id in commit_cache:
                     commit = commit_cache[raw_id]
                 else:
                     try:
                         commit = commits_source_repo.get_commit(raw_id)
                     except CommitDoesNotExistError:
                         # in case we fail extracting still use "dummy" commit
                         # for display in commit diff
                         commit = h.AttributeDict(
                             {'raw_id': raw_id,
                              'message': 'EMPTY or MISSING COMMIT'})
                 c.commit_changes.append([c_type, commit])
 
             # current user review statuses for each version
             c.review_versions = {}
             is_reviewer = PullRequestModel().is_user_reviewer(
                 pull_request, self._rhodecode_user)
             if is_reviewer:
                 for co in general_comments:
                     if co.author.user_id == self._rhodecode_user.user_id:
                         status = co.status_change
                         if status:
                             _ver_pr = status[0].comment.pull_request_version_id
                             c.review_versions[_ver_pr] = status[0]
 
         return self._get_template_context(c)
 
     def get_commits(
             self, commits_source_repo, pull_request_at_ver, source_commit,
             source_ref_id, source_scm, target_commit, target_ref_id, target_scm,
             maybe_unreachable=False):
 
         commit_cache = collections.OrderedDict()
         missing_requirements = False
 
         try:
             pre_load = ["author", "date", "message", "branch", "parents"]
 
             pull_request_commits = pull_request_at_ver.revisions
             log.debug('Loading %s commits from %s',
                       len(pull_request_commits), commits_source_repo)
 
             for rev in pull_request_commits:
                 comm = commits_source_repo.get_commit(commit_id=rev, pre_load=pre_load,
                                                       maybe_unreachable=maybe_unreachable)
                 commit_cache[comm.raw_id] = comm
 
             # Order here matters, we first need to get target, and then
             # the source
             target_commit = commits_source_repo.get_commit(
                 commit_id=safe_str(target_ref_id))
 
             source_commit = commits_source_repo.get_commit(
                 commit_id=safe_str(source_ref_id), maybe_unreachable=True)
         except CommitDoesNotExistError:
             log.warning('Failed to get commit from `{}` repo'.format(
                 commits_source_repo), exc_info=True)
         except RepositoryRequirementError:
             log.warning('Failed to get all required data from repo', exc_info=True)
             missing_requirements = True
 
         pr_ancestor_id = pull_request_at_ver.common_ancestor_id
 
         try:
             ancestor_commit = source_scm.get_commit(pr_ancestor_id)
         except Exception:
             ancestor_commit = None
 
         return ancestor_commit, commit_cache, missing_requirements, source_commit, target_commit
 
     def assure_not_empty_repo(self):
         _ = self.request.translate
 
         try:
             self.db_repo.scm_instance().get_commit()
         except EmptyRepositoryError:
             h.flash(h.literal(_('There are no commits yet')),
                     category='warning')
             raise HTTPFound(
                 h.route_path('repo_summary', repo_name=self.db_repo.repo_name))
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='pullrequest_new', request_method='GET',
         renderer='rhodecode:templates/pullrequests/pullrequest.mako')
     def pull_request_new(self):
         _ = self.request.translate
         c = self.load_default_context()
 
         self.assure_not_empty_repo()
         source_repo = self.db_repo
 
         commit_id = self.request.GET.get('commit')
         branch_ref = self.request.GET.get('branch')
         bookmark_ref = self.request.GET.get('bookmark')
 
         try:
             source_repo_data = PullRequestModel().generate_repo_data(
                 source_repo, commit_id=commit_id,
                 branch=branch_ref, bookmark=bookmark_ref,
                 translator=self.request.translate)
         except CommitDoesNotExistError as e:
             log.exception(e)
             h.flash(_('Commit does not exist'), 'error')
             raise HTTPFound(
                 h.route_path('pullrequest_new', repo_name=source_repo.repo_name))
 
         default_target_repo = source_repo
 
         if source_repo.parent and c.has_origin_repo_read_perm:
             parent_vcs_obj = source_repo.parent.scm_instance()
             if parent_vcs_obj and not parent_vcs_obj.is_empty():
                 # change default if we have a parent repo
                 default_target_repo = source_repo.parent
 
         target_repo_data = PullRequestModel().generate_repo_data(
             default_target_repo, translator=self.request.translate)
 
         selected_source_ref = source_repo_data['refs']['selected_ref']
         title_source_ref = ''
         if selected_source_ref:
             title_source_ref = selected_source_ref.split(':', 2)[1]
         c.default_title = PullRequestModel().generate_pullrequest_title(
             source=source_repo.repo_name,
             source_ref=title_source_ref,
             target=default_target_repo.repo_name
         )
 
         c.default_repo_data = {
             'source_repo_name': source_repo.repo_name,
             'source_refs_json': json.dumps(source_repo_data),
             'target_repo_name': default_target_repo.repo_name,
             'target_refs_json': json.dumps(target_repo_data),
         }
         c.default_source_ref = selected_source_ref
 
         return self._get_template_context(c)
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='pullrequest_repo_refs', request_method='GET',
         renderer='json_ext', xhr=True)
     def pull_request_repo_refs(self):
         self.load_default_context()
         target_repo_name = self.request.matchdict['target_repo_name']
         repo = Repository.get_by_repo_name(target_repo_name)
         if not repo:
             raise HTTPNotFound()
 
         target_perm = HasRepoPermissionAny(
             'repository.read', 'repository.write', 'repository.admin')(
             target_repo_name)
         if not target_perm:
             raise HTTPNotFound()
 
         return PullRequestModel().generate_repo_data(
             repo, translator=self.request.translate)
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='pullrequest_repo_targets', request_method='GET',
         renderer='json_ext', xhr=True)
     def pullrequest_repo_targets(self):
         _ = self.request.translate
         filter_query = self.request.GET.get('query')
 
         # get the parents
         parent_target_repos = []
         if self.db_repo.parent:
             parents_query = Repository.query() \
                 .order_by(func.length(Repository.repo_name)) \
                 .filter(Repository.fork_id == self.db_repo.parent.repo_id)
 
             if filter_query:
                 ilike_expression = u'%{}%'.format(safe_unicode(filter_query))
                 parents_query = parents_query.filter(
                     Repository.repo_name.ilike(ilike_expression))
             parents = parents_query.limit(20).all()
 
             for parent in parents:
                 parent_vcs_obj = parent.scm_instance()
                 if parent_vcs_obj and not parent_vcs_obj.is_empty():
                     parent_target_repos.append(parent)
 
         # get other forks, and repo itself
         query = Repository.query() \
             .order_by(func.length(Repository.repo_name)) \
             .filter(
                 or_(Repository.repo_id == self.db_repo.repo_id,  # repo itself
                     Repository.fork_id == self.db_repo.repo_id)  # forks of this repo
             )  \
             .filter(~Repository.repo_id.in_([x.repo_id for x in parent_target_repos]))
 
         if filter_query:
             ilike_expression = u'%{}%'.format(safe_unicode(filter_query))
             query = query.filter(Repository.repo_name.ilike(ilike_expression))
 
         limit = max(20 - len(parent_target_repos), 5)  # not less then 5
         target_repos = query.limit(limit).all()
 
         all_target_repos = target_repos + parent_target_repos
 
         repos = []
         # This checks permissions to the repositories
         for obj in ScmModel().get_repos(all_target_repos):
             repos.append({
                 'id': obj['name'],
                 'text': obj['name'],
                 'type': 'repo',
                 'repo_id': obj['dbrepo']['repo_id'],
                 'repo_type': obj['dbrepo']['repo_type'],
                 'private': obj['dbrepo']['private'],
 
             })
 
         data = {
             'more': False,
             'results': [{
                 'text': _('Repositories'),
                 'children': repos
             }] if repos else []
         }
         return data
 
-    def _get_existing_ids(self, post_data):
-        return filter(lambda e: e, map(safe_int, aslist(post_data.get('comments'), ',')))
+    @classmethod
+    def get_comment_ids(cls, post_data):
+        return filter(lambda e: e > 0, map(safe_int, aslist(post_data.get('comments'), ',')))
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='pullrequest_comments', request_method='POST',
         renderer='string_html', xhr=True)
     def pullrequest_comments(self):
         self.load_default_context()
 
         pull_request = PullRequest.get_or_404(
             self.request.matchdict['pull_request_id'])
         pull_request_id = pull_request.pull_request_id
         version = self.request.GET.get('version')
 
         _render = self.request.get_partial_renderer(
             'rhodecode:templates/base/sidebar.mako')
         c = _render.get_call_context()
 
         (pull_request_latest,
          pull_request_at_ver,
          pull_request_display_obj,
          at_version) = PullRequestModel().get_pr_version(
             pull_request_id, version=version)
         versions = pull_request_display_obj.versions()
         latest_ver = PullRequest.get_pr_display_object(pull_request_latest, pull_request_latest)
         c.versions = versions + [latest_ver]
 
         c.at_version = at_version
         c.at_version_num = (at_version
                             if at_version and at_version != PullRequest.LATEST_VER
                             else None)
 
         self.register_comments_vars(c, pull_request_latest, versions, include_drafts=False)
         all_comments = c.inline_comments_flat + c.comments
 
-        existing_ids = self._get_existing_ids(self.request.POST)
+        existing_ids = self.get_comment_ids(self.request.POST)
         return _render('comments_table', all_comments, len(all_comments),
                        existing_ids=existing_ids)
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @view_config(
         route_name='pullrequest_todos', request_method='POST',
         renderer='string_html', xhr=True)
     def pullrequest_todos(self):
         self.load_default_context()
 
         pull_request = PullRequest.get_or_404(
             self.request.matchdict['pull_request_id'])
         pull_request_id = pull_request.pull_request_id
         version = self.request.GET.get('version')
 
         _render = self.request.get_partial_renderer(
             'rhodecode:templates/base/sidebar.mako')
         c = _render.get_call_context()
         (pull_request_latest,
          pull_request_at_ver,
          pull_request_display_obj,
          at_version) = PullRequestModel().get_pr_version(
             pull_request_id, version=version)
         versions = pull_request_display_obj.versions()
         latest_ver = PullRequest.get_pr_display_object(pull_request_latest, pull_request_latest)
         c.versions = versions + [latest_ver]
 
         c.at_version = at_version
         c.at_version_num = (at_version
                             if at_version and at_version != PullRequest.LATEST_VER
                             else None)
 
         c.unresolved_comments = CommentsModel() \
             .get_pull_request_unresolved_todos(pull_request, include_drafts=False)
         c.resolved_comments = CommentsModel() \
             .get_pull_request_resolved_todos(pull_request, include_drafts=False)
 
         all_comments = c.unresolved_comments + c.resolved_comments
-        existing_ids = self._get_existing_ids(self.request.POST)
+        existing_ids = self.get_comment_ids(self.request.POST)
         return _render('comments_table', all_comments, len(c.unresolved_comments),
                        todo_comments=True, existing_ids=existing_ids)
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='pullrequest_create', request_method='POST',
         renderer=None)
     def pull_request_create(self):
         _ = self.request.translate
         self.assure_not_empty_repo()
         self.load_default_context()
 
         controls = peppercorn.parse(self.request.POST.items())
 
         try:
             form = PullRequestForm(
                 self.request.translate, self.db_repo.repo_id)()
             _form = form.to_python(controls)
         except formencode.Invalid as errors:
             if errors.error_dict.get('revisions'):
                 msg = 'Revisions: %s' % errors.error_dict['revisions']
             elif errors.error_dict.get('pullrequest_title'):
                 msg = errors.error_dict.get('pullrequest_title')
             else:
                 msg = _('Error creating pull request: {}').format(errors)
             log.exception(msg)
             h.flash(msg, 'error')
 
             # would rather just go back to form ...
             raise HTTPFound(
                 h.route_path('pullrequest_new', repo_name=self.db_repo_name))
 
         source_repo = _form['source_repo']
         source_ref = _form['source_ref']
         target_repo = _form['target_repo']
         target_ref = _form['target_ref']
         commit_ids = _form['revisions'][::-1]
         common_ancestor_id = _form['common_ancestor']
 
         # find the ancestor for this pr
         source_db_repo = Repository.get_by_repo_name(_form['source_repo'])
         target_db_repo = Repository.get_by_repo_name(_form['target_repo'])
 
         if not (source_db_repo or target_db_repo):
             h.flash(_('source_repo or target repo not found'), category='error')
             raise HTTPFound(
                 h.route_path('pullrequest_new', repo_name=self.db_repo_name))
 
         # re-check permissions again here
         # source_repo we must have read permissions
 
         source_perm = HasRepoPermissionAny(
             'repository.read', 'repository.write', 'repository.admin')(
             source_db_repo.repo_name)
         if not source_perm:
             msg = _('Not Enough permissions to source repo `{}`.'.format(
                 source_db_repo.repo_name))
             h.flash(msg, category='error')
             # copy the args back to redirect
             org_query = self.request.GET.mixed()
             raise HTTPFound(
                 h.route_path('pullrequest_new', repo_name=self.db_repo_name,
                              _query=org_query))
 
         # target repo we must have read permissions, and also later on
         # we want to check branch permissions here
         target_perm = HasRepoPermissionAny(
             'repository.read', 'repository.write', 'repository.admin')(
             target_db_repo.repo_name)
         if not target_perm:
             msg = _('Not Enough permissions to target repo `{}`.'.format(
                 target_db_repo.repo_name))
             h.flash(msg, category='error')
             # copy the args back to redirect
             org_query = self.request.GET.mixed()
             raise HTTPFound(
                 h.route_path('pullrequest_new', repo_name=self.db_repo_name,
                              _query=org_query))
 
         source_scm = source_db_repo.scm_instance()
         target_scm = target_db_repo.scm_instance()
 
         source_ref_obj = unicode_to_reference(source_ref)
         target_ref_obj = unicode_to_reference(target_ref)
 
         source_commit = source_scm.get_commit(source_ref_obj.commit_id)
         target_commit = target_scm.get_commit(target_ref_obj.commit_id)
 
         ancestor = source_scm.get_common_ancestor(
             source_commit.raw_id, target_commit.raw_id, target_scm)
 
         # recalculate target ref based on ancestor
         target_ref = ':'.join((target_ref_obj.type, target_ref_obj.name, ancestor))
 
         get_default_reviewers_data, validate_default_reviewers, validate_observers = \
             PullRequestModel().get_reviewer_functions()
 
         # recalculate reviewers logic, to make sure we can validate this
         reviewer_rules = get_default_reviewers_data(
             self._rhodecode_db_user,
             source_db_repo,
             source_ref_obj,
             target_db_repo,
             target_ref_obj,
             include_diff_info=False)
 
         reviewers = validate_default_reviewers(_form['review_members'], reviewer_rules)
         observers = validate_observers(_form['observer_members'], reviewer_rules)
 
         pullrequest_title = _form['pullrequest_title']
         title_source_ref = source_ref_obj.name
         if not pullrequest_title:
             pullrequest_title = PullRequestModel().generate_pullrequest_title(
                 source=source_repo,
                 source_ref=title_source_ref,
                 target=target_repo
             )
 
         description = _form['pullrequest_desc']
         description_renderer = _form['description_renderer']
 
         try:
             pull_request = PullRequestModel().create(
                 created_by=self._rhodecode_user.user_id,
                 source_repo=source_repo,
                 source_ref=source_ref,
                 target_repo=target_repo,
                 target_ref=target_ref,
                 revisions=commit_ids,
                 common_ancestor_id=common_ancestor_id,
                 reviewers=reviewers,
                 observers=observers,
                 title=pullrequest_title,
                 description=description,
                 description_renderer=description_renderer,
                 reviewer_data=reviewer_rules,
                 auth_user=self._rhodecode_user
             )
             Session().commit()
 
             h.flash(_('Successfully opened new pull request'),
                     category='success')
         except Exception:
             msg = _('Error occurred during creation of this pull request.')
             log.exception(msg)
             h.flash(msg, category='error')
 
             # copy the args back to redirect
             org_query = self.request.GET.mixed()
             raise HTTPFound(
                 h.route_path('pullrequest_new', repo_name=self.db_repo_name,
                              _query=org_query))
 
         raise HTTPFound(
             h.route_path('pullrequest_show', repo_name=target_repo,
                          pull_request_id=pull_request.pull_request_id))
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='pullrequest_update', request_method='POST',
         renderer='json_ext')
     def pull_request_update(self):
         pull_request = PullRequest.get_or_404(
             self.request.matchdict['pull_request_id'])
         _ = self.request.translate
 
         c = self.load_default_context()
         redirect_url = None
 
         if pull_request.is_closed():
             log.debug('update: forbidden because pull request is closed')
             msg = _(u'Cannot update closed pull requests.')
             h.flash(msg, category='error')
             return {'response': True,
                     'redirect_url': redirect_url}
 
         is_state_changing = pull_request.is_state_changing()
         c.pr_broadcast_channel = channelstream.pr_channel(pull_request)
 
         # only owner or admin can update it
         allowed_to_update = PullRequestModel().check_user_update(
             pull_request, self._rhodecode_user)
 
         if allowed_to_update:
             controls = peppercorn.parse(self.request.POST.items())
             force_refresh = str2bool(self.request.POST.get('force_refresh'))
 
             if 'review_members' in controls:
                 self._update_reviewers(
                     c,
                     pull_request, controls['review_members'],
                     pull_request.reviewer_data,
                     PullRequestReviewers.ROLE_REVIEWER)
             elif 'observer_members' in controls:
                 self._update_reviewers(
                     c,
                     pull_request, controls['observer_members'],
                     pull_request.reviewer_data,
                     PullRequestReviewers.ROLE_OBSERVER)
             elif str2bool(self.request.POST.get('update_commits', 'false')):
                 if is_state_changing:
                     log.debug('commits update: forbidden because pull request is in state %s',
                               pull_request.pull_request_state)
                     msg = _(u'Cannot update pull requests commits in state other than `{}`. '
                             u'Current state is: `{}`').format(
                         PullRequest.STATE_CREATED, pull_request.pull_request_state)
                     h.flash(msg, category='error')
                     return {'response': True,
                             'redirect_url': redirect_url}
 
                 self._update_commits(c, pull_request)
                 if force_refresh:
                     redirect_url = h.route_path(
                         'pullrequest_show', repo_name=self.db_repo_name,
                         pull_request_id=pull_request.pull_request_id,
                         _query={"force_refresh": 1})
             elif str2bool(self.request.POST.get('edit_pull_request', 'false')):
                 self._edit_pull_request(pull_request)
             else:
                 log.error('Unhandled update data.')
                 raise HTTPBadRequest()
 
             return {'response': True,
                     'redirect_url': redirect_url}
         raise HTTPForbidden()
 
     def _edit_pull_request(self, pull_request):
         """
         Edit title and description
         """
         _ = self.request.translate
 
         try:
             PullRequestModel().edit(
                 pull_request,
                 self.request.POST.get('title'),
                 self.request.POST.get('description'),
                 self.request.POST.get('description_renderer'),
                 self._rhodecode_user)
         except ValueError:
             msg = _(u'Cannot update closed pull requests.')
             h.flash(msg, category='error')
             return
         else:
             Session().commit()
 
         msg = _(u'Pull request title & description updated.')
         h.flash(msg, category='success')
         return
 
     def _update_commits(self, c, pull_request):
         _ = self.request.translate
 
         with pull_request.set_state(PullRequest.STATE_UPDATING):
             resp = PullRequestModel().update_commits(
                 pull_request, self._rhodecode_db_user)
 
         if resp.executed:
 
             if resp.target_changed and resp.source_changed:
                 changed = 'target and source repositories'
             elif resp.target_changed and not resp.source_changed:
                 changed = 'target repository'
             elif not resp.target_changed and resp.source_changed:
                 changed = 'source repository'
             else:
                 changed = 'nothing'
 
             msg = _(u'Pull request updated to "{source_commit_id}" with '
                     u'{count_added} added, {count_removed} removed commits. '
                     u'Source of changes: {change_source}.')
             msg = msg.format(
                 source_commit_id=pull_request.source_ref_parts.commit_id,
                 count_added=len(resp.changes.added),
                 count_removed=len(resp.changes.removed),
                 change_source=changed)
             h.flash(msg, category='success')
             channelstream.pr_update_channelstream_push(
                 self.request, c.pr_broadcast_channel, self._rhodecode_user, msg)
         else:
             msg = PullRequestModel.UPDATE_STATUS_MESSAGES[resp.reason]
             warning_reasons = [
                 UpdateFailureReason.NO_CHANGE,
                 UpdateFailureReason.WRONG_REF_TYPE,
             ]
             category = 'warning' if resp.reason in warning_reasons else 'error'
             h.flash(msg, category=category)
 
     def _update_reviewers(self, c, pull_request, review_members, reviewer_rules, role):
         _ = self.request.translate
 
         get_default_reviewers_data, validate_default_reviewers, validate_observers = \
             PullRequestModel().get_reviewer_functions()
 
         if role == PullRequestReviewers.ROLE_REVIEWER:
             try:
                 reviewers = validate_default_reviewers(review_members, reviewer_rules)
             except ValueError as e:
                 log.error('Reviewers Validation: {}'.format(e))
                 h.flash(e, category='error')
                 return
 
             old_calculated_status = pull_request.calculated_review_status()
             PullRequestModel().update_reviewers(
                 pull_request, reviewers, self._rhodecode_db_user)
 
             Session().commit()
 
             msg = _('Pull request reviewers updated.')
             h.flash(msg, category='success')
             channelstream.pr_update_channelstream_push(
                 self.request, c.pr_broadcast_channel, self._rhodecode_user, msg)
 
             # trigger status changed if change in reviewers changes the status
             calculated_status = pull_request.calculated_review_status()
             if old_calculated_status != calculated_status:
                 PullRequestModel().trigger_pull_request_hook(
                     pull_request, self._rhodecode_user, 'review_status_change',
                     data={'status': calculated_status})
 
         elif role == PullRequestReviewers.ROLE_OBSERVER:
             try:
                 observers = validate_observers(review_members, reviewer_rules)
             except ValueError as e:
                 log.error('Observers Validation: {}'.format(e))
                 h.flash(e, category='error')
                 return
 
             PullRequestModel().update_observers(
                 pull_request, observers, self._rhodecode_db_user)
 
             Session().commit()
             msg = _('Pull request observers updated.')
             h.flash(msg, category='success')
             channelstream.pr_update_channelstream_push(
                 self.request, c.pr_broadcast_channel, self._rhodecode_user, msg)
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='pullrequest_merge', request_method='POST',
         renderer='json_ext')
     def pull_request_merge(self):
         """
         Merge will perform a server-side merge of the specified
         pull request, if the pull request is approved and mergeable.
         After successful merging, the pull request is automatically
         closed, with a relevant comment.
         """
         pull_request = PullRequest.get_or_404(
             self.request.matchdict['pull_request_id'])
         _ = self.request.translate
 
         if pull_request.is_state_changing():
             log.debug('show: forbidden because pull request is in state %s',
                       pull_request.pull_request_state)
             msg = _(u'Cannot merge pull requests in state other than `{}`. '
                     u'Current state is: `{}`').format(PullRequest.STATE_CREATED,
                                                       pull_request.pull_request_state)
             h.flash(msg, category='error')
             raise HTTPFound(
                 h.route_path('pullrequest_show',
                              repo_name=pull_request.target_repo.repo_name,
                              pull_request_id=pull_request.pull_request_id))
 
         self.load_default_context()
 
         with pull_request.set_state(PullRequest.STATE_UPDATING):
             check = MergeCheck.validate(
                 pull_request, auth_user=self._rhodecode_user,
                 translator=self.request.translate)
         merge_possible = not check.failed
 
         for err_type, error_msg in check.errors:
             h.flash(error_msg, category=err_type)
 
         if merge_possible:
             log.debug("Pre-conditions checked, trying to merge.")
             extras = vcs_operation_context(
                 self.request.environ, repo_name=pull_request.target_repo.repo_name,
                 username=self._rhodecode_db_user.username, action='push',
                 scm=pull_request.target_repo.repo_type)
             with pull_request.set_state(PullRequest.STATE_UPDATING):
                 self._merge_pull_request(
                     pull_request, self._rhodecode_db_user, extras)
         else:
             log.debug("Pre-conditions failed, NOT merging.")
 
         raise HTTPFound(
             h.route_path('pullrequest_show',
                          repo_name=pull_request.target_repo.repo_name,
                          pull_request_id=pull_request.pull_request_id))
 
     def _merge_pull_request(self, pull_request, user, extras):
         _ = self.request.translate
         merge_resp = PullRequestModel().merge_repo(pull_request, user, extras=extras)
 
         if merge_resp.executed:
             log.debug("The merge was successful, closing the pull request.")
             PullRequestModel().close_pull_request(
                 pull_request.pull_request_id, user)
             Session().commit()
             msg = _('Pull request was successfully merged and closed.')
             h.flash(msg, category='success')
         else:
             log.debug(
                 "The merge was not successful. Merge response: %s", merge_resp)
             msg = merge_resp.merge_status_message
             h.flash(msg, category='error')
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='pullrequest_delete', request_method='POST',
         renderer='json_ext')
     def pull_request_delete(self):
         _ = self.request.translate
 
         pull_request = PullRequest.get_or_404(
             self.request.matchdict['pull_request_id'])
         self.load_default_context()
 
         pr_closed = pull_request.is_closed()
         allowed_to_delete = PullRequestModel().check_user_delete(
             pull_request, self._rhodecode_user) and not pr_closed
 
         # only owner can delete it !
         if allowed_to_delete:
             PullRequestModel().delete(pull_request, self._rhodecode_user)
             Session().commit()
             h.flash(_('Successfully deleted pull request'),
                     category='success')
             raise HTTPFound(h.route_path('pullrequest_show_all',
                                          repo_name=self.db_repo_name))
 
         log.warning('user %s tried to delete pull request without access',
                     self._rhodecode_user)
         raise HTTPNotFound()
 
+    def _pull_request_comments_create(self, pull_request, comments):
+        _ = self.request.translate
+        data = {}
+        pull_request_id = pull_request.pull_request_id
+        if not comments:
+            return
+
+        all_drafts = len([x for x in comments if str2bool(x['is_draft'])]) == len(comments)
+
+        for entry in comments:
+            c = self.load_default_context()
+            comment_type = entry['comment_type']
+            text = entry['text']
+            status = entry['status']
+            is_draft = str2bool(entry['is_draft'])
+            resolves_comment_id = entry['resolves_comment_id']
+            close_pull_request = entry['close_pull_request']
+            f_path = entry['f_path']
+            line_no = entry['line']
+            target_elem_id = 'file-{}'.format(h.safeid(h.safe_unicode(f_path)))
+
+            # the logic here should work like following, if we submit close
+            # pr comment, use `close_pull_request_with_comment` function
+            # else handle regular comment logic
+
+            if close_pull_request:
+                # only owner or admin or person with write permissions
+                allowed_to_close = PullRequestModel().check_user_update(
+                    pull_request, self._rhodecode_user)
+                if not allowed_to_close:
+                    log.debug('comment: forbidden because not allowed to close '
+                              'pull request %s', pull_request_id)
+                    raise HTTPForbidden()
+
+                # This also triggers `review_status_change`
+                comment, status = PullRequestModel().close_pull_request_with_comment(
+                    pull_request, self._rhodecode_user, self.db_repo, message=text,
+                    auth_user=self._rhodecode_user)
+                Session().flush()
+                is_inline = comment.is_inline
+
+                PullRequestModel().trigger_pull_request_hook(
+                    pull_request, self._rhodecode_user, 'comment',
+                    data={'comment': comment})
+
+            else:
+                # regular comment case, could be inline, or one with status.
+                # for that one we check also permissions
+                # Additionally ENSURE if somehow draft is sent we're then unable to change status
+                allowed_to_change_status = PullRequestModel().check_user_change_status(
+                    pull_request, self._rhodecode_user) and not is_draft
+
+                if status and allowed_to_change_status:
+                    message = (_('Status change %(transition_icon)s %(status)s')
+                               % {'transition_icon': '>',
+                                  'status': ChangesetStatus.get_status_lbl(status)})
+                    text = text or message
+
+                comment = CommentsModel().create(
+                    text=text,
+                    repo=self.db_repo.repo_id,
+                    user=self._rhodecode_user.user_id,
+                    pull_request=pull_request,
+                    f_path=f_path,
+                    line_no=line_no,
+                    status_change=(ChangesetStatus.get_status_lbl(status)
+                                   if status and allowed_to_change_status else None),
+                    status_change_type=(status
+                                        if status and allowed_to_change_status else None),
+                    comment_type=comment_type,
+                    is_draft=is_draft,
+                    resolves_comment_id=resolves_comment_id,
+                    auth_user=self._rhodecode_user,
+                    send_email=not is_draft,  # skip notification for draft comments
+                )
+                is_inline = comment.is_inline
+
+                if allowed_to_change_status:
+                    # calculate old status before we change it
+                    old_calculated_status = pull_request.calculated_review_status()
+
+                    # get status if set !
+                    if status:
+                        ChangesetStatusModel().set_status(
+                            self.db_repo.repo_id,
+                            status,
+                            self._rhodecode_user.user_id,
+                            comment,
+                            pull_request=pull_request
+                        )
+
+                    Session().flush()
+                    # this is somehow required to get access to some relationship
+                    # loaded on comment
+                    Session().refresh(comment)
+
+                    PullRequestModel().trigger_pull_request_hook(
+                        pull_request, self._rhodecode_user, 'comment',
+                        data={'comment': comment})
+
+                    # we now calculate the status of pull request, and based on that
+                    # calculation we set the commits status
+                    calculated_status = pull_request.calculated_review_status()
+                    if old_calculated_status != calculated_status:
+                        PullRequestModel().trigger_pull_request_hook(
+                            pull_request, self._rhodecode_user, 'review_status_change',
+                            data={'status': calculated_status})
+
+            comment_id = comment.comment_id
+            data[comment_id] = {
+                'target_id': target_elem_id
+            }
+            Session().flush()
+
+            c.co = comment
+            c.at_version_num = None
+            c.is_new = True
+            rendered_comment = render(
+                'rhodecode:templates/changeset/changeset_comment_block.mako',
+                self._get_template_context(c), self.request)
+
+            data[comment_id].update(comment.get_dict())
+            data[comment_id].update({'rendered_text': rendered_comment})
+
+        Session().commit()
+
+        # skip channelstream for draft comments
+        if all_drafts:
+            comment_broadcast_channel = channelstream.comment_channel(
+                self.db_repo_name, pull_request_obj=pull_request)
+
+            comment_data = data
+            comment_type = 'inline' if is_inline else 'general'
+            if len(data) == 1:
+                msg = _('posted {} new {} comment').format(len(data), comment_type)
+            else:
+                msg = _('posted {} new {} comments').format(len(data), comment_type)
+
+            channelstream.comment_channelstream_push(
+                self.request, comment_broadcast_channel, self._rhodecode_user, msg,
+                comment_data=comment_data)
+
+        return data
+
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='pullrequest_comment_create', request_method='POST',
         renderer='json_ext')
     def pull_request_comment_create(self):
         _ = self.request.translate
 
-        pull_request = PullRequest.get_or_404(
-            self.request.matchdict['pull_request_id'])
-        pull_request_id = pull_request.pull_request_id
+        pull_request = PullRequest.get_or_404(self.request.matchdict['pull_request_id'])
 
         if pull_request.is_closed():
             log.debug('comment: forbidden because pull request is closed')
             raise HTTPForbidden()
 
         allowed_to_comment = PullRequestModel().check_user_comment(
             pull_request, self._rhodecode_user)
         if not allowed_to_comment:
             log.debug('comment: forbidden because pull request is from forbidden repo')
             raise HTTPForbidden()
 
-        c = self.load_default_context()
-
-        status = self.request.POST.get('changeset_status', None)
-        text = self.request.POST.get('text')
-        comment_type = self.request.POST.get('comment_type')
-        is_draft = str2bool(self.request.POST.get('draft'))
-        resolves_comment_id = self.request.POST.get('resolves_comment_id', None)
-        close_pull_request = self.request.POST.get('close_pull_request')
-
-        # the logic here should work like following, if we submit close
-        # pr comment, use `close_pull_request_with_comment` function
-        # else handle regular comment logic
-
-        if close_pull_request:
-            # only owner or admin or person with write permissions
-            allowed_to_close = PullRequestModel().check_user_update(
-                pull_request, self._rhodecode_user)
-            if not allowed_to_close:
-                log.debug('comment: forbidden because not allowed to close '
-                          'pull request %s', pull_request_id)
-                raise HTTPForbidden()
-
-            # This also triggers `review_status_change`
-            comment, status = PullRequestModel().close_pull_request_with_comment(
-                pull_request, self._rhodecode_user, self.db_repo, message=text,
-                auth_user=self._rhodecode_user)
-            Session().flush()
-            is_inline = comment.is_inline
-
-            PullRequestModel().trigger_pull_request_hook(
-                pull_request, self._rhodecode_user, 'comment',
-                data={'comment': comment})
-
-        else:
-            # regular comment case, could be inline, or one with status.
-            # for that one we check also permissions
-            # Additionally ENSURE if somehow draft is sent we're then unable to change status
-            allowed_to_change_status = PullRequestModel().check_user_change_status(
-                pull_request, self._rhodecode_user) and not is_draft
-
-            if status and allowed_to_change_status:
-                message = (_('Status change %(transition_icon)s %(status)s')
-                           % {'transition_icon': '>',
-                              'status': ChangesetStatus.get_status_lbl(status)})
-                text = text or message
-
-            comment = CommentsModel().create(
-                text=text,
-                repo=self.db_repo.repo_id,
-                user=self._rhodecode_user.user_id,
-                pull_request=pull_request,
-                f_path=self.request.POST.get('f_path'),
-                line_no=self.request.POST.get('line'),
-                status_change=(ChangesetStatus.get_status_lbl(status)
-                               if status and allowed_to_change_status else None),
-                status_change_type=(status
-                                    if status and allowed_to_change_status else None),
-                comment_type=comment_type,
-                is_draft=is_draft,
-                resolves_comment_id=resolves_comment_id,
-                auth_user=self._rhodecode_user,
-                send_email=not is_draft,  # skip notification for draft comments
-            )
-            is_inline = comment.is_inline
-
-            if allowed_to_change_status:
-                # calculate old status before we change it
-                old_calculated_status = pull_request.calculated_review_status()
-
-                # get status if set !
-                if status:
-                    ChangesetStatusModel().set_status(
-                        self.db_repo.repo_id,
-                        status,
-                        self._rhodecode_user.user_id,
-                        comment,
-                        pull_request=pull_request
-                    )
-
-                Session().flush()
-                # this is somehow required to get access to some relationship
-                # loaded on comment
-                Session().refresh(comment)
-
-                PullRequestModel().trigger_pull_request_hook(
-                    pull_request, self._rhodecode_user, 'comment',
-                    data={'comment': comment})
-
-                # we now calculate the status of pull request, and based on that
-                # calculation we set the commits status
-                calculated_status = pull_request.calculated_review_status()
-                if old_calculated_status != calculated_status:
-                    PullRequestModel().trigger_pull_request_hook(
-                        pull_request, self._rhodecode_user, 'review_status_change',
-                        data={'status': calculated_status})
-
-        Session().commit()
-
-        data = {
-            'target_id': h.safeid(h.safe_unicode(
-                self.request.POST.get('f_path'))),
+        comment_data = {
+            'comment_type': self.request.POST.get('comment_type'),
+            'text': self.request.POST.get('text'),
+            'status': self.request.POST.get('changeset_status', None),
+            'is_draft': self.request.POST.get('draft'),
+            'resolves_comment_id': self.request.POST.get('resolves_comment_id', None),
+            'close_pull_request': self.request.POST.get('close_pull_request'),
+            'f_path': self.request.POST.get('f_path'),
+            'line': self.request.POST.get('line'),
         }
-
-        if comment:
-            c.co = comment
-            c.at_version_num = None
-            rendered_comment = render(
-                'rhodecode:templates/changeset/changeset_comment_block.mako',
-                self._get_template_context(c), self.request)
-
-            data.update(comment.get_dict())
-            data.update({'rendered_text': rendered_comment})
-
-            # skip channelstream for draft comments
-            if not is_draft:
-                comment_broadcast_channel = channelstream.comment_channel(
-                    self.db_repo_name, pull_request_obj=pull_request)
-
-                comment_data = data
-                comment_type = 'inline' if is_inline else 'general'
-                channelstream.comment_channelstream_push(
-                    self.request, comment_broadcast_channel, self._rhodecode_user,
-                    _('posted a new {} comment').format(comment_type),
-                    comment_data=comment_data)
+        data = self._pull_request_comments_create(pull_request, [comment_data])
 
         return data
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='pullrequest_comment_delete', request_method='POST',
         renderer='json_ext')
     def pull_request_comment_delete(self):
         pull_request = PullRequest.get_or_404(
             self.request.matchdict['pull_request_id'])
 
         comment = ChangesetComment.get_or_404(
             self.request.matchdict['comment_id'])
         comment_id = comment.comment_id
 
         if comment.immutable:
             # don't allow deleting comments that are immutable
             raise HTTPForbidden()
 
         if pull_request.is_closed():
             log.debug('comment: forbidden because pull request is closed')
             raise HTTPForbidden()
 
         if not comment:
             log.debug('Comment with id:%s not found, skipping', comment_id)
             # comment already deleted in another call probably
             return True
 
         if comment.pull_request.is_closed():
             # don't allow deleting comments on closed pull request
             raise HTTPForbidden()
 
         is_repo_admin = h.HasRepoPermissionAny('repository.admin')(self.db_repo_name)
         super_admin = h.HasPermissionAny('hg.admin')()
         comment_owner = comment.author.user_id == self._rhodecode_user.user_id
         is_repo_comment = comment.repo.repo_name == self.db_repo_name
         comment_repo_admin = is_repo_admin and is_repo_comment
 
         if super_admin or comment_owner or comment_repo_admin:
             old_calculated_status = comment.pull_request.calculated_review_status()
             CommentsModel().delete(comment=comment, auth_user=self._rhodecode_user)
             Session().commit()
             calculated_status = comment.pull_request.calculated_review_status()
             if old_calculated_status != calculated_status:
                 PullRequestModel().trigger_pull_request_hook(
                     comment.pull_request, self._rhodecode_user, 'review_status_change',
                     data={'status': calculated_status})
             return True
         else:
             log.warning('No permissions for user %s to delete comment_id: %s',
                         self._rhodecode_db_user, comment_id)
             raise HTTPNotFound()
 
     @LoginRequired()
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='pullrequest_comment_edit', request_method='POST',
         renderer='json_ext')
     def pull_request_comment_edit(self):
         self.load_default_context()
 
         pull_request = PullRequest.get_or_404(
             self.request.matchdict['pull_request_id']
         )
         comment = ChangesetComment.get_or_404(
             self.request.matchdict['comment_id']
         )
         comment_id = comment.comment_id
 
         if comment.immutable:
             # don't allow deleting comments that are immutable
             raise HTTPForbidden()
 
         if pull_request.is_closed():
             log.debug('comment: forbidden because pull request is closed')
             raise HTTPForbidden()
 
         if not comment:
             log.debug('Comment with id:%s not found, skipping', comment_id)
             # comment already deleted in another call probably
             return True
 
         if comment.pull_request.is_closed():
             # don't allow deleting comments on closed pull request
             raise HTTPForbidden()
 
         is_repo_admin = h.HasRepoPermissionAny('repository.admin')(self.db_repo_name)
         super_admin = h.HasPermissionAny('hg.admin')()
         comment_owner = comment.author.user_id == self._rhodecode_user.user_id
         is_repo_comment = comment.repo.repo_name == self.db_repo_name
         comment_repo_admin = is_repo_admin and is_repo_comment
 
         if super_admin or comment_owner or comment_repo_admin:
             text = self.request.POST.get('text')
             version = self.request.POST.get('version')
             if text == comment.text:
                 log.warning(
                     'Comment(PR): '
                     'Trying to create new version '
                     'with the same comment body {}'.format(
                         comment_id,
                     )
                 )
                 raise HTTPNotFound()
 
             if version.isdigit():
                 version = int(version)
             else:
                 log.warning(
                     'Comment(PR): Wrong version type {} {} '
                     'for comment {}'.format(
                         version,
                         type(version),
                         comment_id,
                     )
                 )
                 raise HTTPNotFound()
 
             try:
                 comment_history = CommentsModel().edit(
                     comment_id=comment_id,
                     text=text,
                     auth_user=self._rhodecode_user,
                     version=version,
                 )
             except CommentVersionMismatch:
                 raise HTTPConflict()
 
             if not comment_history:
                 raise HTTPNotFound()
 
             Session().commit()
 
             PullRequestModel().trigger_pull_request_hook(
                 pull_request, self._rhodecode_user, 'comment_edit',
                 data={'comment': comment})
 
             return {
                 'comment_history_id': comment_history.comment_history_id,
                 'comment_id': comment.comment_id,
                 'comment_version': comment_history.version,
                 'comment_author_username': comment_history.author.username,
                 'comment_author_gravatar': h.gravatar_url(comment_history.author.email, 16),
                 'comment_created_on': h.age_component(comment_history.created_on,
                                                       time_is_local=True),
             }
         else:
             log.warning('No permissions for user %s to edit comment_id: %s',
                         self._rhodecode_db_user, comment_id)
             raise HTTPNotFound()

rhodecode/lib/channelstream.py

@@ -1,371 +1,370 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2016-2020 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import os
 import hashlib
 import itsdangerous
 import logging
 import requests
 import datetime
 
 from dogpile.core import ReadWriteMutex
 from pyramid.threadlocal import get_current_registry
 
 import rhodecode.lib.helpers as h
 from rhodecode.lib.auth import HasRepoPermissionAny
 from rhodecode.lib.ext_json import json
 from rhodecode.model.db import User
 
 log = logging.getLogger(__name__)
 
 LOCK = ReadWriteMutex()
 
 USER_STATE_PUBLIC_KEYS = [
     'id', 'username', 'first_name', 'last_name',
     'icon_link', 'display_name', 'display_link']
 
 
 class ChannelstreamException(Exception):
     pass
 
 
 class ChannelstreamConnectionException(ChannelstreamException):
     pass
 
 
 class ChannelstreamPermissionException(ChannelstreamException):
     pass
 
 
 def get_channelstream_server_url(config, endpoint):
     return 'http://{}{}'.format(config['server'], endpoint)
 
 
 def channelstream_request(config, payload, endpoint, raise_exc=True):
     signer = itsdangerous.TimestampSigner(config['secret'])
     sig_for_server = signer.sign(endpoint)
     secret_headers = {'x-channelstream-secret': sig_for_server,
                       'x-channelstream-endpoint': endpoint,
                       'Content-Type': 'application/json'}
     req_url = get_channelstream_server_url(config, endpoint)
 
     log.debug('Sending a channelstream request to endpoint: `%s`', req_url)
     response = None
     try:
         response = requests.post(req_url, data=json.dumps(payload),
                                  headers=secret_headers).json()
     except requests.ConnectionError:
         log.exception('ConnectionError occurred for endpoint %s', req_url)
         if raise_exc:
             raise ChannelstreamConnectionException(req_url)
     except Exception:
         log.exception('Exception related to Channelstream happened')
         if raise_exc:
             raise ChannelstreamConnectionException()
     log.debug('Got channelstream response: %s', response)
     return response
 
 
 def get_user_data(user_id):
     user = User.get(user_id)
     return {
         'id': user.user_id,
         'username': user.username,
         'first_name': user.first_name,
         'last_name': user.last_name,
         'icon_link': h.gravatar_url(user.email, 60),
         'display_name': h.person(user, 'username_or_name_or_email'),
         'display_link': h.link_to_user(user),
         'notifications': user.user_data.get('notification_status', True)
     }
 
 
 def broadcast_validator(channel_name):
     """ checks if user can access the broadcast channel """
     if channel_name == 'broadcast':
         return True
 
 
 def repo_validator(channel_name):
     """ checks if user can access the broadcast channel """
     channel_prefix = '/repo$'
     if channel_name.startswith(channel_prefix):
         elements = channel_name[len(channel_prefix):].split('$')
         repo_name = elements[0]
         can_access = HasRepoPermissionAny(
             'repository.read',
             'repository.write',
             'repository.admin')(repo_name)
         log.debug(
             'permission check for %s channel resulted in %s',
             repo_name, can_access)
         if can_access:
             return True
     return False
 
 
 def check_channel_permissions(channels, plugin_validators, should_raise=True):
     valid_channels = []
 
     validators = [broadcast_validator, repo_validator]
     if plugin_validators:
         validators.extend(plugin_validators)
     for channel_name in channels:
         is_valid = False
         for validator in validators:
             if validator(channel_name):
                 is_valid = True
                 break
         if is_valid:
             valid_channels.append(channel_name)
         else:
             if should_raise:
                 raise ChannelstreamPermissionException()
     return valid_channels
 
 
 def get_channels_info(self, channels):
     payload = {'channels': channels}
     # gather persistence info
     return channelstream_request(self._config(), payload, '/info')
 
 
 def parse_channels_info(info_result, include_channel_info=None):
     """
     Returns data that contains only secure information that can be
     presented to clients
     """
     include_channel_info = include_channel_info or []
 
     user_state_dict = {}
     for userinfo in info_result['users']:
         user_state_dict[userinfo['user']] = {
             k: v for k, v in userinfo['state'].items()
             if k in USER_STATE_PUBLIC_KEYS
             }
 
     channels_info = {}
 
     for c_name, c_info in info_result['channels'].items():
         if c_name not in include_channel_info:
             continue
         connected_list = []
         for username in c_info['users']:
             connected_list.append({
                 'user': username,
                 'state': user_state_dict[username]
             })
         channels_info[c_name] = {'users': connected_list,
                                  'history': c_info['history']}
 
     return channels_info
 
 
 def log_filepath(history_location, channel_name):
     hasher = hashlib.sha256()
     hasher.update(channel_name.encode('utf8'))
     filename = '{}.log'.format(hasher.hexdigest())
     filepath = os.path.join(history_location, filename)
     return filepath
 
 
 def read_history(history_location, channel_name):
     filepath = log_filepath(history_location, channel_name)
     if not os.path.exists(filepath):
         return []
     history_lines_limit = -100
     history = []
     with open(filepath, 'rb') as f:
         for line in f.readlines()[history_lines_limit:]:
             try:
                 history.append(json.loads(line))
             except Exception:
                 log.exception('Failed to load history')
     return history
 
 
 def update_history_from_logs(config, channels, payload):
     history_location = config.get('history.location')
     for channel in channels:
         history = read_history(history_location, channel)
         payload['channels_info'][channel]['history'] = history
 
 
 def write_history(config, message):
     """ writes a messge to a base64encoded filename """
     history_location = config.get('history.location')
     if not os.path.exists(history_location):
         return
     try:
         LOCK.acquire_write_lock()
         filepath = log_filepath(history_location, message['channel'])
         with open(filepath, 'ab') as f:
             json.dump(message, f)
             f.write('\n')
     finally:
         LOCK.release_write_lock()
 
 
 def get_connection_validators(registry):
     validators = []
     for k, config in registry.rhodecode_plugins.items():
         validator = config.get('channelstream', {}).get('connect_validator')
         if validator:
             validators.append(validator)
     return validators
 
 
 def get_channelstream_config(registry=None):
     if not registry:
         registry = get_current_registry()
 
     rhodecode_plugins = getattr(registry, 'rhodecode_plugins', {})
     channelstream_config = rhodecode_plugins.get('channelstream', {})
     return channelstream_config
 
 
 def post_message(channel, message, username, registry=None):
     channelstream_config = get_channelstream_config(registry)
     if not channelstream_config.get('enabled'):
         return
 
     message_obj = message
     if isinstance(message, basestring):
         message_obj = {
             'message': message,
             'level': 'success',
             'topic': '/notifications'
         }
 
     log.debug('Channelstream: sending notification to channel %s', channel)
     payload = {
         'type': 'message',
         'timestamp': datetime.datetime.utcnow(),
         'user': 'system',
         'exclude_users': [username],
         'channel': channel,
         'message': message_obj
     }
 
     try:
         return channelstream_request(
             channelstream_config, [payload], '/message',
             raise_exc=False)
     except ChannelstreamException:
         log.exception('Failed to send channelstream data')
         raise
 
 
 def _reload_link(label):
     return (
         '<a onclick="window.location.reload()">'
         '<strong>{}</strong>'
         '</a>'.format(label)
     )
 
 
 def pr_channel(pull_request):
     repo_name = pull_request.target_repo.repo_name
     pull_request_id = pull_request.pull_request_id
     channel = '/repo${}$/pr/{}'.format(repo_name, pull_request_id)
     log.debug('Getting pull-request channelstream broadcast channel: %s', channel)
     return channel
 
 
 def comment_channel(repo_name, commit_obj=None, pull_request_obj=None):
     channel = None
     if commit_obj:
         channel = u'/repo${}$/commit/{}'.format(
             repo_name, commit_obj.raw_id
         )
     elif pull_request_obj:
         channel = u'/repo${}$/pr/{}'.format(
             repo_name, pull_request_obj.pull_request_id
         )
     log.debug('Getting comment channelstream broadcast channel: %s', channel)
 
     return channel
 
 
 def pr_update_channelstream_push(request, pr_broadcast_channel, user, msg, **kwargs):
     """
     Channel push on pull request update
     """
     if not pr_broadcast_channel:
         return
 
     _ = request.translate
 
     message = '{} {}'.format(
         msg,
         _reload_link(_(' Reload page to load changes')))
 
     message_obj = {
         'message': message,
         'level': 'success',
         'topic': '/notifications'
     }
 
     post_message(
         pr_broadcast_channel, message_obj, user.username,
         registry=request.registry)
 
 
 def comment_channelstream_push(request, comment_broadcast_channel, user, msg, **kwargs):
     """
     Channelstream push on comment action, on commit, or pull-request
     """
     if not comment_broadcast_channel:
         return
 
     _ = request.translate
 
     comment_data = kwargs.pop('comment_data', {})
     user_data = kwargs.pop('user_data', {})
-    comment_id = comment_data.get('comment_id')
+    comment_id = comment_data.keys()[0] if comment_data else ''
 
-    message = '<strong>{}</strong> {} #{}, {}'.format(
+    message = '<strong>{}</strong> {} #{}'.format(
         user.username,
         msg,
         comment_id,
-        _reload_link(_('Reload page to see new comments')),
     )
 
     message_obj = {
         'message': message,
         'level': 'success',
         'topic': '/notifications'
     }
 
     post_message(
         comment_broadcast_channel, message_obj, user.username,
         registry=request.registry)
 
     message_obj = {
         'message': None,
         'user': user.username,
         'comment_id': comment_id,
         'comment_data': comment_data,
         'user_data': user_data,
         'topic': '/comment'
     }
     post_message(
         comment_broadcast_channel, message_obj, user.username,
         registry=request.registry)

rhodecode/lib/diffs.py

@@ -1,1272 +1,1272 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2011-2020 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 
 """
 Set of diffing helpers, previously part of vcs
 """
 
 import os
 import re
 import bz2
 import gzip
 import time
 
 import collections
 import difflib
 import logging
 import cPickle as pickle
 from itertools import tee, imap
 
 from rhodecode.lib.vcs.exceptions import VCSError
 from rhodecode.lib.vcs.nodes import FileNode, SubModuleNode
 from rhodecode.lib.utils2 import safe_unicode, safe_str
 
 log = logging.getLogger(__name__)
 
 # define max context, a file with more than this numbers of lines is unusable
 # in browser anyway
 MAX_CONTEXT = 20 * 1024
 DEFAULT_CONTEXT = 3
 
 
 def get_diff_context(request):
     return MAX_CONTEXT if request.GET.get('fullcontext', '') == '1' else DEFAULT_CONTEXT
 
 
 def get_diff_whitespace_flag(request):
     return request.GET.get('ignorews', '') == '1'
 
 
 class OPS(object):
     ADD = 'A'
     MOD = 'M'
     DEL = 'D'
 
 
 def get_gitdiff(filenode_old, filenode_new, ignore_whitespace=True, context=3):
     """
     Returns git style diff between given ``filenode_old`` and ``filenode_new``.
 
     :param ignore_whitespace: ignore whitespaces in diff
     """
     # make sure we pass in default context
     context = context or 3
     # protect against IntOverflow when passing HUGE context
     if context > MAX_CONTEXT:
         context = MAX_CONTEXT
 
     submodules = filter(lambda o: isinstance(o, SubModuleNode),
                         [filenode_new, filenode_old])
     if submodules:
         return ''
 
     for filenode in (filenode_old, filenode_new):
         if not isinstance(filenode, FileNode):
             raise VCSError(
                 "Given object should be FileNode object, not %s"
                 % filenode.__class__)
 
     repo = filenode_new.commit.repository
     old_commit = filenode_old.commit or repo.EMPTY_COMMIT
     new_commit = filenode_new.commit
 
     vcs_gitdiff = repo.get_diff(
         old_commit, new_commit, filenode_new.path,
         ignore_whitespace, context, path1=filenode_old.path)
     return vcs_gitdiff
 
 NEW_FILENODE = 1
 DEL_FILENODE = 2
 MOD_FILENODE = 3
 RENAMED_FILENODE = 4
 COPIED_FILENODE = 5
 CHMOD_FILENODE = 6
 BIN_FILENODE = 7
 
 
 class LimitedDiffContainer(object):
 
     def __init__(self, diff_limit, cur_diff_size, diff):
         self.diff = diff
         self.diff_limit = diff_limit
         self.cur_diff_size = cur_diff_size
 
     def __getitem__(self, key):
         return self.diff.__getitem__(key)
 
     def __iter__(self):
         for l in self.diff:
             yield l
 
 
 class Action(object):
     """
     Contains constants for the action value of the lines in a parsed diff.
     """
 
     ADD = 'add'
     DELETE = 'del'
     UNMODIFIED = 'unmod'
 
     CONTEXT = 'context'
     OLD_NO_NL = 'old-no-nl'
     NEW_NO_NL = 'new-no-nl'
 
 
 class DiffProcessor(object):
     """
     Give it a unified or git diff and it returns a list of the files that were
     mentioned in the diff together with a dict of meta information that
     can be used to render it in a HTML template.
 
     .. note:: Unicode handling
 
        The original diffs are a byte sequence and can contain filenames
        in mixed encodings. This class generally returns `unicode` objects
        since the result is intended for presentation to the user.
 
     """
     _chunk_re = re.compile(r'^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)')
     _newline_marker = re.compile(r'^\\ No newline at end of file')
 
     # used for inline highlighter word split
     _token_re = re.compile(r'()(&gt;|&lt;|&amp;|\W+?)')
 
     # collapse ranges of commits over given number
     _collapse_commits_over = 5
 
     def __init__(self, diff, format='gitdiff', diff_limit=None,
                  file_limit=None, show_full_diff=True):
         """
         :param diff: A `Diff` object representing a diff from a vcs backend
         :param format: format of diff passed, `udiff` or `gitdiff`
         :param diff_limit: define the size of diff that is considered "big"
             based on that parameter cut off will be triggered, set to None
             to show full diff
         """
         self._diff = diff
         self._format = format
         self.adds = 0
         self.removes = 0
         # calculate diff size
         self.diff_limit = diff_limit
         self.file_limit = file_limit
         self.show_full_diff = show_full_diff
         self.cur_diff_size = 0
         self.parsed = False
         self.parsed_diff = []
 
         log.debug('Initialized DiffProcessor with %s mode', format)
         if format == 'gitdiff':
             self.differ = self._highlight_line_difflib
             self._parser = self._parse_gitdiff
         else:
             self.differ = self._highlight_line_udiff
             self._parser = self._new_parse_gitdiff
 
     def _copy_iterator(self):
         """
         make a fresh copy of generator, we should not iterate thru
         an original as it's needed for repeating operations on
         this instance of DiffProcessor
         """
         self.__udiff, iterator_copy = tee(self.__udiff)
         return iterator_copy
 
     def _escaper(self, string):
         """
         Escaper for diff escapes special chars and checks the diff limit
 
         :param string:
         """
         self.cur_diff_size += len(string)
 
         if not self.show_full_diff and (self.cur_diff_size > self.diff_limit):
             raise DiffLimitExceeded('Diff Limit Exceeded')
 
         return string \
             .replace('&', '&amp;')\
             .replace('<', '&lt;')\
             .replace('>', '&gt;')
 
     def _line_counter(self, l):
         """
         Checks each line and bumps total adds/removes for this diff
 
         :param l:
         """
         if l.startswith('+') and not l.startswith('+++'):
             self.adds += 1
         elif l.startswith('-') and not l.startswith('---'):
             self.removes += 1
         return safe_unicode(l)
 
     def _highlight_line_difflib(self, line, next_):
         """
         Highlight inline changes in both lines.
         """
 
         if line['action'] == Action.DELETE:
             old, new = line, next_
         else:
             old, new = next_, line
 
         oldwords = self._token_re.split(old['line'])
         newwords = self._token_re.split(new['line'])
         sequence = difflib.SequenceMatcher(None, oldwords, newwords)
 
         oldfragments, newfragments = [], []
         for tag, i1, i2, j1, j2 in sequence.get_opcodes():
             oldfrag = ''.join(oldwords[i1:i2])
             newfrag = ''.join(newwords[j1:j2])
             if tag != 'equal':
                 if oldfrag:
                     oldfrag = '<del>%s</del>' % oldfrag
                 if newfrag:
                     newfrag = '<ins>%s</ins>' % newfrag
             oldfragments.append(oldfrag)
             newfragments.append(newfrag)
 
         old['line'] = "".join(oldfragments)
         new['line'] = "".join(newfragments)
 
     def _highlight_line_udiff(self, line, next_):
         """
         Highlight inline changes in both lines.
         """
         start = 0
         limit = min(len(line['line']), len(next_['line']))
         while start < limit and line['line'][start] == next_['line'][start]:
             start += 1
         end = -1
         limit -= start
         while -end <= limit and line['line'][end] == next_['line'][end]:
             end -= 1
         end += 1
         if start or end:
             def do(l):
                 last = end + len(l['line'])
                 if l['action'] == Action.ADD:
                     tag = 'ins'
                 else:
                     tag = 'del'
                 l['line'] = '%s<%s>%s</%s>%s' % (
                     l['line'][:start],
                     tag,
                     l['line'][start:last],
                     tag,
                     l['line'][last:]
                 )
             do(line)
             do(next_)
 
     def _clean_line(self, line, command):
         if command in ['+', '-', ' ']:
             # only modify the line if it's actually a diff thing
             line = line[1:]
         return line
 
     def _parse_gitdiff(self, inline_diff=True):
         _files = []
         diff_container = lambda arg: arg
 
         for chunk in self._diff.chunks():
             head = chunk.header
 
             diff = imap(self._escaper, self.diff_splitter(chunk.diff))
             raw_diff = chunk.raw
             limited_diff = False
             exceeds_limit = False
 
             op = None
             stats = {
                 'added': 0,
                 'deleted': 0,
                 'binary': False,
                 'ops': {},
             }
 
             if head['deleted_file_mode']:
                 op = OPS.DEL
                 stats['binary'] = True
                 stats['ops'][DEL_FILENODE] = 'deleted file'
 
             elif head['new_file_mode']:
                 op = OPS.ADD
                 stats['binary'] = True
                 stats['ops'][NEW_FILENODE] = 'new file %s' % head['new_file_mode']
             else:  # modify operation, can be copy, rename or chmod
 
                 # CHMOD
                 if head['new_mode'] and head['old_mode']:
                     op = OPS.MOD
                     stats['binary'] = True
                     stats['ops'][CHMOD_FILENODE] = (
                         'modified file chmod %s => %s' % (
                             head['old_mode'], head['new_mode']))
                 # RENAME
                 if head['rename_from'] != head['rename_to']:
                     op = OPS.MOD
                     stats['binary'] = True
                     stats['ops'][RENAMED_FILENODE] = (
                         'file renamed from %s to %s' % (
                             head['rename_from'], head['rename_to']))
                 # COPY
                 if head.get('copy_from') and head.get('copy_to'):
                     op = OPS.MOD
                     stats['binary'] = True
                     stats['ops'][COPIED_FILENODE] = (
                         'file copied from %s to %s' % (
                             head['copy_from'], head['copy_to']))
 
                 # If our new parsed headers didn't match anything fallback to
                 # old style detection
                 if op is None:
                     if not head['a_file'] and head['b_file']:
                         op = OPS.ADD
                         stats['binary'] = True
                         stats['ops'][NEW_FILENODE] = 'new file'
 
                     elif head['a_file'] and not head['b_file']:
                         op = OPS.DEL
                         stats['binary'] = True
                         stats['ops'][DEL_FILENODE] = 'deleted file'
 
                 # it's not ADD not DELETE
                 if op is None:
                     op = OPS.MOD
                     stats['binary'] = True
                     stats['ops'][MOD_FILENODE] = 'modified file'
 
             # a real non-binary diff
             if head['a_file'] or head['b_file']:
                 try:
                     raw_diff, chunks, _stats = self._parse_lines(diff)
                     stats['binary'] = False
                     stats['added'] = _stats[0]
                     stats['deleted'] = _stats[1]
                     # explicit mark that it's a modified file
                     if op == OPS.MOD:
                         stats['ops'][MOD_FILENODE] = 'modified file'
                     exceeds_limit = len(raw_diff) > self.file_limit
 
                     # changed from _escaper function so we validate size of
                     # each file instead of the whole diff
                     # diff will hide big files but still show small ones
                     # from my tests, big files are fairly safe to be parsed
                     # but the browser is the bottleneck
                     if not self.show_full_diff and exceeds_limit:
                         raise DiffLimitExceeded('File Limit Exceeded')
 
                 except DiffLimitExceeded:
                     diff_container = lambda _diff: \
                         LimitedDiffContainer(
                             self.diff_limit, self.cur_diff_size, _diff)
 
                     exceeds_limit = len(raw_diff) > self.file_limit
                     limited_diff = True
                     chunks = []
 
             else:  # GIT format binary patch, or possibly empty diff
                 if head['bin_patch']:
                     # we have operation already extracted, but we mark simply
                     # it's a diff we wont show for binary files
                     stats['ops'][BIN_FILENODE] = 'binary diff hidden'
                 chunks = []
 
             if chunks and not self.show_full_diff and op == OPS.DEL:
                 # if not full diff mode show deleted file contents
                 # TODO: anderson: if the view is not too big, there is no way
                 # to see the content of the file
                 chunks = []
 
             chunks.insert(0, [{
                                   'old_lineno': '',
                                   'new_lineno': '',
                                   'action': Action.CONTEXT,
                                   'line': msg,
                               } for _op, msg in stats['ops'].iteritems()
                               if _op not in [MOD_FILENODE]])
 
             _files.append({
                 'filename': safe_unicode(head['b_path']),
                 'old_revision': head['a_blob_id'],
                 'new_revision': head['b_blob_id'],
                 'chunks': chunks,
                 'raw_diff': safe_unicode(raw_diff),
                 'operation': op,
                 'stats': stats,
                 'exceeds_limit': exceeds_limit,
                 'is_limited_diff': limited_diff,
             })
 
         sorter = lambda info: {OPS.ADD: 0, OPS.MOD: 1,
                                OPS.DEL: 2}.get(info['operation'])
 
         if not inline_diff:
             return diff_container(sorted(_files, key=sorter))
 
         # highlight inline changes
         for diff_data in _files:
             for chunk in diff_data['chunks']:
                 lineiter = iter(chunk)
                 try:
                     while 1:
                         line = lineiter.next()
                         if line['action'] not in (
                                 Action.UNMODIFIED, Action.CONTEXT):
                             nextline = lineiter.next()
                             if nextline['action'] in ['unmod', 'context'] or \
                                nextline['action'] == line['action']:
                                 continue
                             self.differ(line, nextline)
                 except StopIteration:
                     pass
 
         return diff_container(sorted(_files, key=sorter))
 
     def _check_large_diff(self):
         if self.diff_limit:
             log.debug('Checking if diff exceeds current diff_limit of %s', self.diff_limit)
         if not self.show_full_diff and (self.cur_diff_size > self.diff_limit):
             raise DiffLimitExceeded('Diff Limit `%s` Exceeded', self.diff_limit)
 
     # FIXME: NEWDIFFS: dan: this replaces _parse_gitdiff
     def _new_parse_gitdiff(self, inline_diff=True):
         _files = []
 
         # this can be overriden later to a LimitedDiffContainer type
         diff_container = lambda arg: arg
 
         for chunk in self._diff.chunks():
             head = chunk.header
             log.debug('parsing diff %r', head)
 
             raw_diff = chunk.raw
             limited_diff = False
             exceeds_limit = False
 
             op = None
             stats = {
                 'added': 0,
                 'deleted': 0,
                 'binary': False,
                 'old_mode': None,
                 'new_mode': None,
                 'ops': {},
             }
             if head['old_mode']:
                 stats['old_mode'] = head['old_mode']
             if head['new_mode']:
                 stats['new_mode'] = head['new_mode']
             if head['b_mode']:
                 stats['new_mode'] = head['b_mode']
 
             # delete file
             if head['deleted_file_mode']:
                 op = OPS.DEL
                 stats['binary'] = True
                 stats['ops'][DEL_FILENODE] = 'deleted file'
 
             # new file
             elif head['new_file_mode']:
                 op = OPS.ADD
                 stats['binary'] = True
                 stats['old_mode'] = None
                 stats['new_mode'] = head['new_file_mode']
                 stats['ops'][NEW_FILENODE] = 'new file %s' % head['new_file_mode']
 
             # modify operation, can be copy, rename or chmod
             else:
                 # CHMOD
                 if head['new_mode'] and head['old_mode']:
                     op = OPS.MOD
                     stats['binary'] = True
                     stats['ops'][CHMOD_FILENODE] = (
                         'modified file chmod %s => %s' % (
                             head['old_mode'], head['new_mode']))
 
                 # RENAME
                 if head['rename_from'] != head['rename_to']:
                     op = OPS.MOD
                     stats['binary'] = True
                     stats['renamed'] = (head['rename_from'], head['rename_to'])
                     stats['ops'][RENAMED_FILENODE] = (
                         'file renamed from %s to %s' % (
                             head['rename_from'], head['rename_to']))
                 # COPY
                 if head.get('copy_from') and head.get('copy_to'):
                     op = OPS.MOD
                     stats['binary'] = True
                     stats['copied'] = (head['copy_from'], head['copy_to'])
                     stats['ops'][COPIED_FILENODE] = (
                         'file copied from %s to %s' % (
                             head['copy_from'], head['copy_to']))
 
                 # If our new parsed headers didn't match anything fallback to
                 # old style detection
                 if op is None:
                     if not head['a_file'] and head['b_file']:
                         op = OPS.ADD
                         stats['binary'] = True
                         stats['new_file'] = True
                         stats['ops'][NEW_FILENODE] = 'new file'
 
                     elif head['a_file'] and not head['b_file']:
                         op = OPS.DEL
                         stats['binary'] = True
                         stats['ops'][DEL_FILENODE] = 'deleted file'
 
                 # it's not ADD not DELETE
                 if op is None:
                     op = OPS.MOD
                     stats['binary'] = True
                     stats['ops'][MOD_FILENODE] = 'modified file'
 
             # a real non-binary diff
             if head['a_file'] or head['b_file']:
                 # simulate splitlines, so we keep the line end part
                 diff = self.diff_splitter(chunk.diff)
 
                 # append each file to the diff size
                 raw_chunk_size = len(raw_diff)
 
                 exceeds_limit = raw_chunk_size > self.file_limit
                 self.cur_diff_size += raw_chunk_size
 
                 try:
                     # Check each file instead of the whole diff.
                     # Diff will hide big files but still show small ones.
                     # From the tests big files are fairly safe to be parsed
                     # but the browser is the bottleneck.
                     if not self.show_full_diff and exceeds_limit:
                         log.debug('File `%s` exceeds current file_limit of %s',
                                   safe_unicode(head['b_path']), self.file_limit)
                         raise DiffLimitExceeded(
                             'File Limit %s Exceeded', self.file_limit)
 
                     self._check_large_diff()
 
                     raw_diff, chunks, _stats = self._new_parse_lines(diff)
                     stats['binary'] = False
                     stats['added'] = _stats[0]
                     stats['deleted'] = _stats[1]
                     # explicit mark that it's a modified file
                     if op == OPS.MOD:
                         stats['ops'][MOD_FILENODE] = 'modified file'
 
                 except DiffLimitExceeded:
                     diff_container = lambda _diff: \
                         LimitedDiffContainer(
                             self.diff_limit, self.cur_diff_size, _diff)
 
                     limited_diff = True
                     chunks = []
 
             else:  # GIT format binary patch, or possibly empty diff
                 if head['bin_patch']:
                     # we have operation already extracted, but we mark simply
                     # it's a diff we wont show for binary files
                     stats['ops'][BIN_FILENODE] = 'binary diff hidden'
                 chunks = []
 
             # Hide content of deleted node by setting empty chunks
             if chunks and not self.show_full_diff and op == OPS.DEL:
                 # if not full diff mode show deleted file contents
                 # TODO: anderson: if the view is not too big, there is no way
                 # to see the content of the file
                 chunks = []
 
             chunks.insert(
                 0, [{'old_lineno': '',
                      'new_lineno': '',
                      'action': Action.CONTEXT,
                      'line': msg,
                      } for _op, msg in stats['ops'].iteritems()
                     if _op not in [MOD_FILENODE]])
 
             original_filename = safe_unicode(head['a_path'])
             _files.append({
                 'original_filename': original_filename,
                 'filename': safe_unicode(head['b_path']),
                 'old_revision': head['a_blob_id'],
                 'new_revision': head['b_blob_id'],
                 'chunks': chunks,
                 'raw_diff': safe_unicode(raw_diff),
                 'operation': op,
                 'stats': stats,
                 'exceeds_limit': exceeds_limit,
                 'is_limited_diff': limited_diff,
             })
 
         sorter = lambda info: {OPS.ADD: 0, OPS.MOD: 1,
                                OPS.DEL: 2}.get(info['operation'])
 
         return diff_container(sorted(_files, key=sorter))
 
     # FIXME: NEWDIFFS: dan: this gets replaced by _new_parse_lines
     def _parse_lines(self, diff_iter):
         """
         Parse the diff an return data for the template.
         """
 
         stats = [0, 0]
         chunks = []
         raw_diff = []
 
         try:
             line = diff_iter.next()
 
             while line:
                 raw_diff.append(line)
                 lines = []
                 chunks.append(lines)
 
                 match = self._chunk_re.match(line)
 
                 if not match:
                     break
 
                 gr = match.groups()
                 (old_line, old_end,
                  new_line, new_end) = [int(x or 1) for x in gr[:-1]]
                 old_line -= 1
                 new_line -= 1
 
                 context = len(gr) == 5
                 old_end += old_line
                 new_end += new_line
 
                 if context:
                     # skip context only if it's first line
                     if int(gr[0]) > 1:
                         lines.append({
                             'old_lineno': '...',
                             'new_lineno': '...',
                             'action':     Action.CONTEXT,
                             'line':       line,
                         })
 
                 line = diff_iter.next()
 
                 while old_line < old_end or new_line < new_end:
                     command = ' '
                     if line:
                         command = line[0]
 
                     affects_old = affects_new = False
 
                     # ignore those if we don't expect them
                     if command in '#@':
                         continue
                     elif command == '+':
                         affects_new = True
                         action = Action.ADD
                         stats[0] += 1
                     elif command == '-':
                         affects_old = True
                         action = Action.DELETE
                         stats[1] += 1
                     else:
                         affects_old = affects_new = True
                         action = Action.UNMODIFIED
 
                     if not self._newline_marker.match(line):
                         old_line += affects_old
                         new_line += affects_new
                         lines.append({
                             'old_lineno':   affects_old and old_line or '',
                             'new_lineno':   affects_new and new_line or '',
                             'action':       action,
                             'line':         self._clean_line(line, command)
                         })
                         raw_diff.append(line)
 
                     line = diff_iter.next()
 
                     if self._newline_marker.match(line):
                         # we need to append to lines, since this is not
                         # counted in the line specs of diff
                         lines.append({
                             'old_lineno':   '...',
                             'new_lineno':   '...',
                             'action':       Action.CONTEXT,
                             'line':         self._clean_line(line, command)
                         })
 
         except StopIteration:
             pass
         return ''.join(raw_diff), chunks, stats
 
     # FIXME: NEWDIFFS: dan: this replaces _parse_lines
     def _new_parse_lines(self, diff_iter):
         """
         Parse the diff an return data for the template.
         """
 
         stats = [0, 0]
         chunks = []
         raw_diff = []
 
         try:
             line = diff_iter.next()
 
             while line:
                 raw_diff.append(line)
                 # match header e.g @@ -0,0 +1 @@\n'
                 match = self._chunk_re.match(line)
 
                 if not match:
                     break
 
                 gr = match.groups()
                 (old_line, old_end,
                  new_line, new_end) = [int(x or 1) for x in gr[:-1]]
 
                 lines = []
                 hunk = {
                     'section_header': gr[-1],
                     'source_start': old_line,
                     'source_length': old_end,
                     'target_start': new_line,
                     'target_length': new_end,
                     'lines': lines,
                 }
                 chunks.append(hunk)
 
                 old_line -= 1
                 new_line -= 1
 
                 context = len(gr) == 5
                 old_end += old_line
                 new_end += new_line
 
                 line = diff_iter.next()
 
                 while old_line < old_end or new_line < new_end:
                     command = ' '
                     if line:
                         command = line[0]
 
                     affects_old = affects_new = False
 
                     # ignore those if we don't expect them
                     if command in '#@':
                         continue
                     elif command == '+':
                         affects_new = True
                         action = Action.ADD
                         stats[0] += 1
                     elif command == '-':
                         affects_old = True
                         action = Action.DELETE
                         stats[1] += 1
                     else:
                         affects_old = affects_new = True
                         action = Action.UNMODIFIED
 
                     if not self._newline_marker.match(line):
                         old_line += affects_old
                         new_line += affects_new
                         lines.append({
                             'old_lineno':   affects_old and old_line or '',
                             'new_lineno':   affects_new and new_line or '',
                             'action':       action,
                             'line':         self._clean_line(line, command)
                         })
                     raw_diff.append(line)
 
                     line = diff_iter.next()
 
                     if self._newline_marker.match(line):
                         # we need to append to lines, since this is not
                         # counted in the line specs of diff
                         if affects_old:
                             action = Action.OLD_NO_NL
                         elif affects_new:
                             action = Action.NEW_NO_NL
                         else:
                             raise Exception('invalid context for no newline')
 
                         lines.append({
                             'old_lineno':   None,
                             'new_lineno':   None,
                             'action':       action,
                             'line':         self._clean_line(line, command)
                         })
 
         except StopIteration:
             pass
 
         return ''.join(raw_diff), chunks, stats
 
     def _safe_id(self, idstring):
         """Make a string safe for including in an id attribute.
 
         The HTML spec says that id attributes 'must begin with
         a letter ([A-Za-z]) and may be followed by any number
         of letters, digits ([0-9]), hyphens ("-"), underscores
         ("_"), colons (":"), and periods (".")'. These regexps
         are slightly over-zealous, in that they remove colons
         and periods unnecessarily.
 
         Whitespace is transformed into underscores, and then
         anything which is not a hyphen or a character that
         matches \w (alphanumerics and underscore) is removed.
 
         """
         # Transform all whitespace to underscore
         idstring = re.sub(r'\s', "_", '%s' % idstring)
         # Remove everything that is not a hyphen or a member of \w
         idstring = re.sub(r'(?!-)\W', "", idstring).lower()
         return idstring
 
     @classmethod
     def diff_splitter(cls, string):
         """
         Diff split that emulates .splitlines() but works only on \n
         """
         if not string:
             return
         elif string == '\n':
             yield u'\n'
         else:
 
             has_newline = string.endswith('\n')
             elements = string.split('\n')
             if has_newline:
                 # skip last element as it's empty string from newlines
                 elements = elements[:-1]
 
             len_elements = len(elements)
 
             for cnt, line in enumerate(elements, start=1):
                 last_line = cnt == len_elements
                 if last_line and not has_newline:
                     yield safe_unicode(line)
                 else:
                     yield safe_unicode(line) + '\n'
 
     def prepare(self, inline_diff=True):
         """
         Prepare the passed udiff for HTML rendering.
 
         :return: A list of dicts with diff information.
         """
         parsed = self._parser(inline_diff=inline_diff)
         self.parsed = True
         self.parsed_diff = parsed
         return parsed
 
     def as_raw(self, diff_lines=None):
         """
         Returns raw diff as a byte string
         """
         return self._diff.raw
 
     def as_html(self, table_class='code-difftable', line_class='line',
                 old_lineno_class='lineno old', new_lineno_class='lineno new',
                 code_class='code', enable_comments=False, parsed_lines=None):
         """
         Return given diff as html table with customized css classes
         """
         # TODO(marcink): not sure how to pass in translator
         # here in an efficient way, leave the _ for proper gettext extraction
         _ = lambda s: s
 
         def _link_to_if(condition, label, url):
             """
             Generates a link if condition is meet or just the label if not.
             """
 
             if condition:
                 return '''<a href="%(url)s" class="tooltip"
                 title="%(title)s">%(label)s</a>''' % {
                     'title': _('Click to select line'),
                     'url': url,
                     'label': label
                 }
             else:
                 return label
         if not self.parsed:
             self.prepare()
 
         diff_lines = self.parsed_diff
         if parsed_lines:
             diff_lines = parsed_lines
 
         _html_empty = True
         _html = []
         _html.append('''<table class="%(table_class)s">\n''' % {
             'table_class': table_class
         })
 
         for diff in diff_lines:
             for line in diff['chunks']:
                 _html_empty = False
                 for change in line:
                     _html.append('''<tr class="%(lc)s %(action)s">\n''' % {
                         'lc': line_class,
                         'action': change['action']
                     })
                     anchor_old_id = ''
                     anchor_new_id = ''
                     anchor_old = "%(filename)s_o%(oldline_no)s" % {
                         'filename': self._safe_id(diff['filename']),
                         'oldline_no': change['old_lineno']
                     }
                     anchor_new = "%(filename)s_n%(oldline_no)s" % {
                         'filename': self._safe_id(diff['filename']),
                         'oldline_no': change['new_lineno']
                     }
                     cond_old = (change['old_lineno'] != '...' and
                                 change['old_lineno'])
                     cond_new = (change['new_lineno'] != '...' and
                                 change['new_lineno'])
                     if cond_old:
                         anchor_old_id = 'id="%s"' % anchor_old
                     if cond_new:
                         anchor_new_id = 'id="%s"' % anchor_new
 
                     if change['action'] != Action.CONTEXT:
                         anchor_link = True
                     else:
                         anchor_link = False
 
                     ###########################################################
                     # COMMENT ICONS
                     ###########################################################
                     _html.append('''\t<td class="add-comment-line"><span class="add-comment-content">''')
 
                     if enable_comments and change['action'] != Action.CONTEXT:
                         _html.append('''<a href="#"><span class="icon-comment-add"></span></a>''')
 
                     _html.append('''</span></td><td class="comment-toggle tooltip" title="Toggle Comment Thread"><i class="icon-comment"></i></td>\n''')
 
                     ###########################################################
                     # OLD LINE NUMBER
                     ###########################################################
                     _html.append('''\t<td %(a_id)s class="%(olc)s">''' % {
                         'a_id': anchor_old_id,
                         'olc': old_lineno_class
                     })
 
                     _html.append('''%(link)s''' % {
                         'link': _link_to_if(anchor_link, change['old_lineno'],
                                             '#%s' % anchor_old)
                     })
                     _html.append('''</td>\n''')
                     ###########################################################
                     # NEW LINE NUMBER
                     ###########################################################
 
                     _html.append('''\t<td %(a_id)s class="%(nlc)s">''' % {
                         'a_id': anchor_new_id,
                         'nlc': new_lineno_class
                     })
 
                     _html.append('''%(link)s''' % {
                         'link': _link_to_if(anchor_link, change['new_lineno'],
                                             '#%s' % anchor_new)
                     })
                     _html.append('''</td>\n''')
                     ###########################################################
                     # CODE
                     ###########################################################
                     code_classes = [code_class]
                     if (not enable_comments or
                             change['action'] == Action.CONTEXT):
                         code_classes.append('no-comment')
                     _html.append('\t<td class="%s">' % ' '.join(code_classes))
                     _html.append('''\n\t\t<pre>%(code)s</pre>\n''' % {
                         'code': change['line']
                     })
 
                     _html.append('''\t</td>''')
                     _html.append('''\n</tr>\n''')
         _html.append('''</table>''')
         if _html_empty:
             return None
         return ''.join(_html)
 
     def stat(self):
         """
         Returns tuple of added, and removed lines for this instance
         """
         return self.adds, self.removes
 
     def get_context_of_line(
             self, path, diff_line=None, context_before=3, context_after=3):
         """
         Returns the context lines for the specified diff line.
 
         :type diff_line: :class:`DiffLineNumber`
         """
         assert self.parsed, "DiffProcessor is not initialized."
 
         if None not in diff_line:
             raise ValueError(
                 "Cannot specify both line numbers: {}".format(diff_line))
 
         file_diff = self._get_file_diff(path)
         chunk, idx = self._find_chunk_line_index(file_diff, diff_line)
 
         first_line_to_include = max(idx - context_before, 0)
         first_line_after_context = idx + context_after + 1
         context_lines = chunk[first_line_to_include:first_line_after_context]
 
         line_contents = [
             _context_line(line) for line in context_lines
             if _is_diff_content(line)]
         # TODO: johbo: Interim fixup, the diff chunks drop the final newline.
         # Once they are fixed, we can drop this line here.
         if line_contents:
             line_contents[-1] = (
                 line_contents[-1][0], line_contents[-1][1].rstrip('\n') + '\n')
         return line_contents
 
     def find_context(self, path, context, offset=0):
         """
         Finds the given `context` inside of the diff.
 
         Use the parameter `offset` to specify which offset the target line has
         inside of the given `context`. This way the correct diff line will be
         returned.
 
         :param offset: Shall be used to specify the offset of the main line
             within the given `context`.
         """
         if offset < 0 or offset >= len(context):
             raise ValueError(
                 "Only positive values up to the length of the context "
                 "minus one are allowed.")
 
         matches = []
         file_diff = self._get_file_diff(path)
 
         for chunk in file_diff['chunks']:
             context_iter = iter(context)
             for line_idx, line in enumerate(chunk):
                 try:
                     if _context_line(line) == context_iter.next():
                         continue
                 except StopIteration:
                     matches.append((line_idx, chunk))
                 context_iter = iter(context)
 
         # Increment position and triger StopIteration
         # if we had a match at the end
         line_idx += 1
         try:
             context_iter.next()
         except StopIteration:
             matches.append((line_idx, chunk))
 
         effective_offset = len(context) - offset
         found_at_diff_lines = [
             _line_to_diff_line_number(chunk[idx - effective_offset])
             for idx, chunk in matches]
 
         return found_at_diff_lines
 
     def _get_file_diff(self, path):
         for file_diff in self.parsed_diff:
             if file_diff['filename'] == path:
                 break
         else:
             raise FileNotInDiffException("File {} not in diff".format(path))
         return file_diff
 
     def _find_chunk_line_index(self, file_diff, diff_line):
         for chunk in file_diff['chunks']:
             for idx, line in enumerate(chunk):
                 if line['old_lineno'] == diff_line.old:
                     return chunk, idx
                 if line['new_lineno'] == diff_line.new:
                     return chunk, idx
         raise LineNotInDiffException(
             "The line {} is not part of the diff.".format(diff_line))
 
 
 def _is_diff_content(line):
     return line['action'] in (
         Action.UNMODIFIED, Action.ADD, Action.DELETE)
 
 
 def _context_line(line):
     return (line['action'], line['line'])
 
 
 DiffLineNumber = collections.namedtuple('DiffLineNumber', ['old', 'new'])
 
 
 def _line_to_diff_line_number(line):
     new_line_no = line['new_lineno'] or None
     old_line_no = line['old_lineno'] or None
     return DiffLineNumber(old=old_line_no, new=new_line_no)
 
 
 class FileNotInDiffException(Exception):
     """
     Raised when the context for a missing file is requested.
 
     If you request the context for a line in a file which is not part of the
     given diff, then this exception is raised.
     """
 
 
 class LineNotInDiffException(Exception):
     """
     Raised when the context for a missing line is requested.
 
     If you request the context for a line in a file and this line is not
     part of the given diff, then this exception is raised.
     """
 
 
 class DiffLimitExceeded(Exception):
     pass
 
 
 # NOTE(marcink): if diffs.mako change, probably this
 # needs a bump to next version
-CURRENT_DIFF_VERSION = 'v4'
+CURRENT_DIFF_VERSION = 'v5'
 
 
 def _cleanup_cache_file(cached_diff_file):
     # cleanup file to not store it "damaged"
     try:
         os.remove(cached_diff_file)
     except Exception:
         log.exception('Failed to cleanup path %s', cached_diff_file)
 
 
 def _get_compression_mode(cached_diff_file):
     mode = 'bz2'
     if 'mode:plain' in cached_diff_file:
         mode = 'plain'
     elif 'mode:gzip' in cached_diff_file:
         mode = 'gzip'
     return mode
 
 
 def cache_diff(cached_diff_file, diff, commits):
     compression_mode = _get_compression_mode(cached_diff_file)
 
     struct = {
         'version': CURRENT_DIFF_VERSION,
         'diff': diff,
         'commits': commits
     }
 
     start = time.time()
     try:
         if compression_mode == 'plain':
             with open(cached_diff_file, 'wb') as f:
                 pickle.dump(struct, f)
         elif compression_mode == 'gzip':
             with gzip.GzipFile(cached_diff_file, 'wb') as f:
                 pickle.dump(struct, f)
         else:
             with bz2.BZ2File(cached_diff_file, 'wb') as f:
                 pickle.dump(struct, f)
     except Exception:
         log.warn('Failed to save cache', exc_info=True)
         _cleanup_cache_file(cached_diff_file)
 
     log.debug('Saved diff cache under %s in %.4fs', cached_diff_file, time.time() - start)
 
 
 def load_cached_diff(cached_diff_file):
     compression_mode = _get_compression_mode(cached_diff_file)
 
     default_struct = {
         'version': CURRENT_DIFF_VERSION,
         'diff': None,
         'commits': None
     }
 
     has_cache = os.path.isfile(cached_diff_file)
     if not has_cache:
         log.debug('Reading diff cache file failed %s', cached_diff_file)
         return default_struct
 
     data = None
 
     start = time.time()
     try:
         if compression_mode == 'plain':
             with open(cached_diff_file, 'rb') as f:
                 data = pickle.load(f)
         elif compression_mode == 'gzip':
             with gzip.GzipFile(cached_diff_file, 'rb') as f:
                 data = pickle.load(f)
         else:
             with bz2.BZ2File(cached_diff_file, 'rb') as f:
                 data = pickle.load(f)
     except Exception:
         log.warn('Failed to read diff cache file', exc_info=True)
 
     if not data:
         data = default_struct
 
     if not isinstance(data, dict):
         # old version of data ?
         data = default_struct
 
     # check version
     if data.get('version') != CURRENT_DIFF_VERSION:
         # purge cache
         _cleanup_cache_file(cached_diff_file)
         return default_struct
 
     log.debug('Loaded diff cache from %s in %.4fs', cached_diff_file, time.time() - start)
 
     return data
 
 
 def generate_diff_cache_key(*args):
     """
     Helper to generate a cache key using arguments
     """
     def arg_mapper(input_param):
         input_param = safe_str(input_param)
         # we cannot allow '/' in arguments since it would allow
         # subdirectory usage
         input_param.replace('/', '_')
         return input_param or None  # prevent empty string arguments
 
     return '_'.join([
         '{}' for i in range(len(args))]).format(*map(arg_mapper, args))
 
 
 def diff_cache_exist(cache_storage, *args):
     """
     Based on all generated arguments check and return a cache path
     """
     args = list(args) + ['mode:gzip']
     cache_key = generate_diff_cache_key(*args)
     cache_file_path = os.path.join(cache_storage, cache_key)
     # prevent path traversal attacks using some param that have e.g '../../'
     if not os.path.abspath(cache_file_path).startswith(cache_storage):
         raise ValueError('Final path must be within {}'.format(cache_storage))
 
     return cache_file_path

rhodecode/public/css/buttons.less

@@ -1,600 +1,600 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;
 
         }
         // 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%);
+            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-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/code-block.less

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

rhodecode/public/css/comments.less

@@ -1,642 +1,746 b''
 // comments.less
 // For use in RhodeCode applications;
 // see style guide documentation for guidelines.
 
 
 // Comments
-@comment-outdated-opacity: 0.6;
+@comment-outdated-opacity: 1.0;
 
 .comments {
     width: 100%;
 }
 
 .comments-heading {
     margin-bottom: -1px;
     background: @grey6;
     display: block;
     padding: 10px 0px;
     font-size: 18px
 }
 
 #comment-tr-show {
     padding: 5px 0;
 }
 
 tr.inline-comments div {
     max-width: 100%;
 
     p {
         white-space: normal;
     }
 
     code, pre, .code, dd {
         overflow-x: auto;
         width: 1062px;
     }
 
     dd {
         width: auto;
     }
 }
 
 #injected_page_comments {
     .comment-previous-link,
     .comment-next-link,
     .comment-links-divider {
         display: none;
     }
 }
 
 .add-comment {
     margin-bottom: 10px;
 }
 .hide-comment-button .add-comment {
     display: none;
 }
 
 .comment-bubble {
     color: @grey4;
     margin-top: 4px;
     margin-right: 30px;
     visibility: hidden;
 }
 
 .comment-draft {
     float: left;
     margin-right: 10px;
-    font-weight: 600;
-    color: @alert3;
+    font-weight: 400;
+    color: @color-draft;
+}
+
+.comment-new {
+    float: left;
+    margin-right: 10px;
+    font-weight: 400;
+    color: @color-new;
 }
 
 .comment-label {
     float: left;
 
-    padding: 0.4em 0.4em;
-    margin: 2px 4px 0px 0px;
-    display: inline-block;
+    padding: 0 8px 0 0;
     min-height: 0;
 
     text-align: center;
     font-size: 10px;
-    line-height: .8em;
 
     font-family: @text-italic;
     font-style: italic;
     background: #fff none;
     color: @grey3;
-    border: 1px solid @grey4;
     white-space: nowrap;
 
     text-transform: uppercase;
     min-width: 50px;
-    border-radius: 4px;
 
     &.todo {
         color: @color5;
         font-style: italic;
         font-weight: @text-bold-italic-weight;
         font-family: @text-bold-italic;
     }
 
     .resolve {
         cursor: pointer;
         text-decoration: underline;
     }
 
     .resolved {
         text-decoration: line-through;
         color: @color1;
     }
     .resolved a {
         text-decoration: line-through;
         color: @color1;
     }
     .resolve-text {
         color: @color1;
         margin: 2px 8px;
         font-family: @text-italic;
         font-style: italic;
     }
 }
 
 .has-spacer-after {
     &:after {
         content: ' | ';
         color: @grey5;
     }
 }
 
 .has-spacer-before {
     &:before {
         content: ' | ';
         color: @grey5;
     }
 }
 
 .comment {
 
     &.comment-general {
         border: 1px solid @grey5;
         padding: 5px 5px 5px 5px;
     }
 
     margin: @padding 0;
     padding: 4px 0 0 0;
     line-height: 1em;
 
     .rc-user {
         min-width: 0;
         margin: 0px .5em 0 0;
 
         .user {
             display: inline;
         }
     }
 
     .meta {
         position: relative;
         width: 100%;
         border-bottom: 1px solid @grey5;
         margin: -5px 0px;
         line-height: 24px;
 
         &:hover .permalink {
             visibility: visible;
             color: @rcblue;
         }
     }
 
     .author,
     .date {
         display: inline;
 
         &:after {
             content: ' | ';
             color: @grey5;
         }
     }
 
     .author-general img {
         top: 3px;
     }
     .author-inline img {
         top: 3px;
     }
 
     .status-change,
     .permalink,
     .changeset-status-lbl {
         display: inline;
     }
 
     .permalink {
         visibility: hidden;
     }
 
     .comment-links-divider {
         display: inline;
     }
 
     .comment-links-block {
         float:right;
         text-align: right;
         min-width: 85px;
 
         [class^="icon-"]:before,
         [class*=" icon-"]:before {
             margin-left: 0;
             margin-right: 0;
         }
     }
 
     .comment-previous-link {
         display: inline-block;
 
         .arrow_comment_link{
             cursor: pointer;
             i {
                 font-size:10px;
             }
         }
         .arrow_comment_link.disabled {
             cursor: default;
             color: @grey5;
         }
     }
 
     .comment-next-link {
         display: inline-block;
 
         .arrow_comment_link{
             cursor: pointer;
             i {
                 font-size:10px;
             }
         }
         .arrow_comment_link.disabled {
             cursor: default;
             color: @grey5;
         }
     }
 
     .delete-comment {
         display: inline-block;
         color: @rcblue;
 
         &:hover {
             cursor: pointer;
         }
     }
 
     .text {
         clear: both;
         .border-radius(@border-radius);
         .box-sizing(border-box);
 
         .markdown-block p,
         .rst-block p {
             margin: .5em 0 !important;
           // TODO: lisa: This is needed because of other rst !important rules :[
         }
     }
 
     .pr-version {
         display: inline-block;
     }
     .pr-version-inline {
         display: inline-block;
     }
     .pr-version-num {
         font-size: 10px;
     }
 }
 
 @comment-padding: 5px;
 
 .general-comments {
     .comment-outdated {
         opacity: @comment-outdated-opacity;
     }
+
+    .comment-outdated-label {
+        color: @grey3;
+        padding-right: 4px;
+    }
 }
 
 .inline-comments {
-    border-radius: @border-radius;
+
     .comment {
         margin: 0;
-        border-radius: @border-radius;
     }
+
     .comment-outdated {
         opacity: @comment-outdated-opacity;
     }
 
+    .comment-outdated-label {
+        color: @grey3;
+        padding-right: 4px;
+    }
+
     .comment-inline {
+
+        &:first-child {
+            margin: 4px 4px 0 4px;
+            border-top: 1px solid @grey5;
+            border-bottom: 0 solid @grey5;
+            border-left: 1px solid @grey5;
+            border-right: 1px solid @grey5;
+            .border-radius-top(4px);
+        }
+
+        &:only-child {
+            margin: 4px 4px 0 4px;
+            border-top: 1px solid @grey5;
+            border-bottom: 0 solid @grey5;
+            border-left: 1px solid @grey5;
+            border-right: 1px solid @grey5;
+            .border-radius-top(4px);
+        }
+
         background: white;
         padding: @comment-padding @comment-padding;
-        border: @comment-padding solid @grey6;
+        margin: 0 4px 0 4px;
+        border-top: 0 solid @grey5;
+        border-bottom: 0 solid @grey5;
+        border-left: 1px solid @grey5;
+        border-right: 1px solid @grey5;
 
         .text {
             border: none;
         }
+
         .meta {
             border-bottom: 1px solid @grey6;
             margin: -5px 0px;
             line-height: 24px;
         }
+
     }
     .comment-selected {
         border-left: 6px solid @comment-highlight-color;
     }
+
+    .comment-inline-form-open {
+        display: block !important;
+    }
+
     .comment-inline-form {
-        padding: @comment-padding;
         display: none;
     }
-    .cb-comment-add-button {
-        margin: @comment-padding;
+
+    .comment-inline-form-edit {
+        padding: 0;
+        margin: 0px 4px 2px 4px;
+    }
+
+    .reply-thread-container {
+        display: table;
+        width: 100%;
+        padding: 0px 4px 4px 4px;
+    }
+
+    .reply-thread-container-wrapper {
+        margin: 0 4px 4px 4px;
+        border-top: 0 solid @grey5;
+        border-bottom: 1px solid @grey5;
+        border-left: 1px solid @grey5;
+        border-right: 1px solid @grey5;
+        .border-radius-bottom(4px);
+    }
+
+    .reply-thread-gravatar {
+        display: table-cell;
+        width: 24px;
+        height: 24px;
+        padding-top: 10px;
+        padding-left: 10px;
+        background-color: #eeeeee;
+        vertical-align: top;
     }
-     /* hide add comment button when form is open */
+
+    .reply-thread-reply-button {
+        display: table-cell;
+        width: 100%;
+        height: 33px;
+        padding: 3px 8px;
+        margin-left: 8px;
+        background-color: #eeeeee;
+    }
+
+    .reply-thread-reply-button .cb-comment-add-button {
+        border-radius: 4px;
+        width: 100%;
+        padding: 6px 2px;
+        text-align: left;
+        cursor: text;
+        color: @grey3;
+    }
+    .reply-thread-reply-button .cb-comment-add-button:hover {
+        background-color: white;
+        color: @grey2;
+    }
+
+    .reply-thread-last {
+        display: table-cell;
+        width: 10px;
+    }
+
+    /* Hide reply box when it's a first element,
+    can happen when drafts are saved but not shown to specific user,
+    or there are outdated comments hidden
+    */
+    .reply-thread-container-wrapper:first-child:not(.comment-form-active) {
+         display: none;
+    }
+
+    .reply-thread-container-wrapper.comment-outdated {
+        display: none
+    }
+
+    /* hide add comment button when form is open */
     .comment-inline-form-open ~ .cb-comment-add-button {
         display: none;
     }
-    .comment-inline-form-open {
-        display: block;
-    }
-     /* hide add comment button when form but no comments */
-    .comment-inline-form:first-child + .cb-comment-add-button {
-        display: none;
-    }
-     /* hide add comment button when no comments or form */
-    .cb-comment-add-button:first-child {
-        display: none;
-    }
+
      /* hide add comment button when only comment is being deleted */
     .comment-deleting:first-child + .cb-comment-add-button {
         display: none;
     }
+
+    /* hide add comment button when form but no comments */
+    .comment-inline-form:first-child + .cb-comment-add-button {
+        display: none;
+    }
+
 }
 
-
 .show-outdated-comments {
     display: inline;
     color: @rcblue;
 }
 
 // Comment Form
 div.comment-form {
     margin-top: 20px;
 }
 
 .comment-form strong {
     display: block;
     margin-bottom: 15px;
 }
 
 .comment-form textarea {
     width: 100%;
     height: 100px;
     font-family: @text-monospace;
 }
 
 form.comment-form {
     margin-top: 10px;
     margin-left: 10px;
 }
 
 .comment-inline-form .comment-block-ta,
 .comment-form .comment-block-ta,
 .comment-form .preview-box {
     .border-radius(@border-radius);
     .box-sizing(border-box);
     background-color: white;
 }
 
 .comment-form-submit {
     margin-top: 5px;
     margin-left: 525px;
 }
 
 .file-comments {
     display: none;
 }
 
 .comment-form .preview-box.unloaded,
 .comment-inline-form .preview-box.unloaded {
     height: 50px;
     text-align: center;
     padding: 20px;
     background-color: white;
 }
 
 .comment-footer {
-    position: relative;
+    display: table;
     width: 100%;
-    min-height: 42px;
+    height: 42px;
 
-    .status_box,
+    .comment-status-box,
     .cancel-button {
-        float: left;
         display: inline-block;
     }
 
-    .status_box {
+    .comment-status-box {
         margin-left: 10px;
     }
 
     .action-buttons {
-        float: left;
-        display: inline-block;
+        display: table-cell;
+        padding: 5px 0 5px 2px;
+    }
+
+    .toolbar-text {
+        height: 42px;
+        display: table-cell;
+        vertical-align: bottom;
+        font-size: 11px;
+        color: @grey4;
+        text-align: right;
+
+        a {
+            color: @grey4;
+        }
+
+        p {
+            padding: 0;
+            margin: 0;
+        }
     }
 
     .action-buttons-extra {
         display: inline-block;
     }
 }
 
 .comment-form {
 
     .comment {
         margin-left: 10px;
     }
 
     .comment-help {
         color: @grey4;
         padding: 5px 0 5px 0;
     }
 
     .comment-title {
         padding: 5px 0 5px 0;
     }
 
     .comment-button {
         display: inline-block;
     }
 
     .comment-button-input {
         margin-right: 0;
     }
 
-    .comment-footer {
-        margin-bottom: 50px;
-        margin-top: 10px;
-    }
 }
 
 
 .comment-form-login {
     .comment-help {
         padding: 0.7em; //same as the button
     }
 
     div.clearfix {
         clear: both;
         width: 100%;
         display: block;
     }
 }
 
 .comment-version-select {
     margin: 0px;
     border-radius: inherit;
     border-color: @grey6;
     height: 20px;
 }
 
 .comment-type {
     margin: 0px;
     border-radius: inherit;
     border-color: @grey6;
 }
 
 .preview-box {
     min-height: 105px;
     margin-bottom: 15px;
     background-color: white;
     .border-radius(@border-radius);
     .box-sizing(border-box);
 }
 
 .add-another-button {
     margin-left: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 
 .comment .buttons {
     float: right;
     margin: -1px 0px 0px 0px;
 }
 
 // Inline Comment Form
 .injected_diff .comment-inline-form,
 .comment-inline-form {
     background-color: white;
-    margin-top: 10px;
-    margin-bottom: 20px;
+    margin-top: 4px;
+    margin-bottom: 10px;
 }
 
 .inline-form {
     padding: 10px 7px;
 }
 
 .inline-form div {
     max-width: 100%;
 }
 
 .overlay {
     display: none;
     position: absolute;
     width: 100%;
     text-align: center;
     vertical-align: middle;
     font-size: 16px;
     background: none repeat scroll 0 0 white;
 
     &.submitting {
         display: block;
         opacity: 0.5;
         z-index: 100;
     }
 }
 .comment-inline-form .overlay.submitting .overlay-text {
     margin-top: 5%;
 }
 
 .comment-inline-form .clearfix,
 .comment-form .clearfix {
     .border-radius(@border-radius);
     margin: 0px;
 }
 
-.comment-inline-form .comment-footer {
-    margin: 10px 0px 0px 0px;
-}
 
 .hide-inline-form-button {
     margin-left: 5px;
 }
 .comment-button .hide-inline-form {
     background: white;
 }
 
 .comment-area {
     padding: 6px 8px;
     border: 1px solid @grey5;
     .border-radius(@border-radius);
 
     .resolve-action {
         padding: 1px 0px 0px 6px;
     }
 
 }
 
 comment-area-text {
     color: @grey3;
 }
 
 .comment-area-header {
     height: 35px;
+    border-bottom: 1px solid @grey5;
 }
 
 .comment-area-header .nav-links {
     display: flex;
     flex-flow: row wrap;
     -webkit-flex-flow: row wrap;
     width: 100%;
+    border: none;
 }
 
 .comment-area-footer {
     min-height: 30px;
 }
 
 .comment-footer .toolbar {
 
 }
 
 .comment-attachment-uploader {
     border: 1px dashed white;
     border-radius: @border-radius;
     margin-top: -10px;
     line-height: 30px;
     &.dz-drag-hover {
         border-color: @grey3;
     }
 
     .dz-error-message {
         padding-top: 0;
     }
 }
 
 .comment-attachment-text {
     clear: both;
     font-size: 11px;
     color: #8F8F8F;
     width: 100%;
     .pick-attachment {
         color: #8F8F8F;
     }
     .pick-attachment:hover {
         color: @rcblue;
     }
 }
 
 .nav-links {
     padding: 0;
     margin: 0;
     list-style: none;
     height: auto;
     border-bottom: 1px solid @grey5;
 }
 .nav-links li {
     display: inline-block;
     list-style-type: none;
 }
 
 .nav-links li a.disabled {
     cursor: not-allowed;
 }
 
 .nav-links li.active a {
     border-bottom: 2px solid @rcblue;
     color: #000;
     font-weight: 600;
 }
 .nav-links li a {
     display: inline-block;
     padding: 0px 10px 5px 10px;
     margin-bottom: -1px;
     font-size: 14px;
     line-height: 28px;
     color: #8f8f8f;
     border-bottom: 2px solid transparent;
 }
 
-.toolbar-text {
-    float: right;
-    font-size: 11px;
-    color: @grey4;
-    text-align: right;
-
-    a {
-        color: @grey4;
-    }
-}
-

rhodecode/public/css/main.less

@@ -1,3239 +1,3243 b''
 //Primary CSS
 
 //--- IMPORTS ------------------//
 
 @import 'helpers';
 @import 'mixins';
 @import 'rcicons';
 @import 'variables';
 @import 'bootstrap-variables';
 @import 'form-bootstrap';
 @import 'codemirror';
 @import 'legacy_code_styles';
 @import 'readme-box';
 @import 'progress-bar';
 
 @import 'type';
 @import 'alerts';
 @import 'buttons';
 @import 'tags';
 @import 'code-block';
 @import 'examples';
 @import 'login';
 @import 'main-content';
 @import 'select2';
 @import 'comments';
 @import 'panels-bootstrap';
 @import 'panels';
 @import 'deform';
 @import 'tooltips';
 @import 'sweetalert2';
 
 
 //--- BASE ------------------//
 .noscript-error {
   top: 0;
   left: 0;
   width: 100%;
   z-index: 101;
   text-align: center;
   font-size: 120%;
   color: white;
   background-color: @alert2;
   padding: 5px 0 5px 0;
   font-weight: @text-semibold-weight;
   font-family: @text-semibold;
 }
 
 html {
     display: table;
     height: 100%;
     width: 100%;
 }
 
 body {
     display: table-cell;
     width: 100%;
 }
 
 //--- LAYOUT ------------------//
 
 .hidden{
 	display: none !important;
 }
 
 .box{
 	float: left;
 	width: 100%;
 }
 
 .browser-header {
     clear: both;
 }
 .main {
   clear: both;
   padding:0 0 @pagepadding;
   height: auto;
 
 	&:after { //clearfix
 		content:"";
 		clear:both;
 		width:100%;
 		display:block;
 	}
 }
 
 .flex-container {
     display: flex;
     justify-content: space-between;
 }
 
 .action-link{
 	margin-left: @padding;
 	padding-left: @padding;
 	border-left: @border-thickness solid @border-default-color;
 }
 
 .cursor-pointer {
   cursor: pointer;
 }
 
 input + .action-link, .action-link.first{
 	border-left: none;
 }
 
 .link-disabled {
     color: @grey4;
     cursor: default;
 }
 
 .action-link.last{
 	margin-right: @padding;
 	padding-right: @padding;
 }
 
 .action-link.active,
 .action-link.active a{
 	color: @grey4;
 }
 
 .action-link.disabled {
     color: @grey4;
     cursor: inherit;
 }
 
 .grey-link-action {
   cursor: pointer;
   &:hover {
       color: @grey2;
   }
   color: @grey4;
 }
 
 .clipboard-action {
   cursor: pointer;
   margin-left: 5px;
 
   &:not(.no-grey) {
 
     &:hover {
       color: @grey2;
     }
     color: @grey4;
   }
 }
 
 ul.simple-list{
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
 
 .main-content {
 	padding-bottom: @pagepadding;
 }
 
 .wide-mode-wrapper {
     max-width:4000px !important;
 }
 
 .wrapper {
 	position: relative;
 	max-width: @wrapper-maxwidth;
 	margin: 0 auto;
 }
 
 #content {
     clear: both;
     padding: 0 @contentpadding;
 }
 
 .advanced-settings-fields{
 	input{
 		margin-left: @textmargin;
 		margin-right: @padding/2;
 	}
 }
 
 .cs_files_title {
     margin: @pagepadding 0 0;
 }
 
 input.inline[type="file"] {
 	display: inline;
 }
 
 .error_page {
     margin: 10% auto;
 
     h1 {
         color: @grey2;
     }
 
     .alert {
         margin: @padding 0;
     }
 
     .error-branding {
       color: @grey4;
       font-weight: @text-semibold-weight;
       font-family: @text-semibold;
     }
 
     .error_message {
         font-family: @text-regular;
     }
 
     .sidebar {
         min-height: 275px;
         margin: 0;
         padding: 0 0 @sidebarpadding @sidebarpadding;
         border: none;
     }
 
     .main-content {
         position: relative;
         margin: 0 @sidebarpadding @sidebarpadding;
         padding: 0 0 0 @sidebarpadding;
         border-left: @border-thickness solid @grey5;
 
         @media (max-width:767px) {
             clear: both;
             width: 100%;
             margin: 0;
             border: none;
         }
     }
 
     .inner-column {
         float: left;
         width: 29.75%;
         min-height: 150px;
         margin: @sidebarpadding 2% 0 0;
         padding: 0 2% 0 0;
         border-right: @border-thickness solid @grey5;
 
         @media (max-width:767px) {
             clear: both;
             width: 100%;
             border: none;
         }
 
         ul {
             padding-left: 1.25em;
         }
 
         &:last-child {
             margin: @sidebarpadding 0 0;
             border: none;
         }
 
         h4 {
           margin: 0 0 @padding;
           font-weight: @text-semibold-weight;
           font-family: @text-semibold;
         }
     }
 }
 .error-page-logo {
     width: 130px;
     height: 160px;
 }
 
 // HEADER
 .header {
 
     // TODO: johbo: Fix login pages, so that they work without a min-height
     // for the header and then remove the min-height. I chose a smaller value
     // intentionally here to avoid rendering issues in the main navigation.
     min-height: 49px;
     min-width: 1024px;
 
 	position: relative;
 	vertical-align: bottom;
 	padding: 0 @header-padding;
 	background-color: @grey1;
 	color: @grey5;
 
 	.title {
 		overflow: visible;
 	}
 
 	&:before,
 	&:after {
 		content: "";
 		clear: both;
 		width: 100%;
 	}
 
 	// TODO: johbo: Avoids breaking "Repositories" chooser
 	.select2-container .select2-choice .select2-arrow {
 	    display: none;
 	}
 }
 
 #header-inner {
 	&.title {
 		margin: 0;
 	}
 	&:before,
 	&:after {
 		content: "";
 		clear: both;
 	}
 }
 
 // Gists
 #files_data {
     clear: both; //for firefox
     padding-top: 10px;
 }
 
 #gistid {
     margin-right: @padding;
 }
 
 // Global Settings Editor
 .textarea.editor {
 	float: left;
 	position: relative;
 	max-width: @texteditor-width;
 
 	select {
 		position: absolute;
 		top:10px;
 		right:0;
 	}
 
 	.CodeMirror {
 		margin: 0;
 	}
 
 	.help-block {
 		margin: 0 0 @padding;
 		padding:.5em;
 		background-color: @grey6;
         &.pre-formatting {
             white-space: pre;
         }
 	}
 }
 
 ul.auth_plugins {
 	margin: @padding 0 @padding @legend-width;
 	padding: 0;
 
 	li {
 		margin-bottom: @padding;
         line-height: 1em;
 		list-style-type: none;
 
 		.auth_buttons .btn {
 			margin-right: @padding;
 		}
 
 	}
 }
 
 
 // My Account PR list
 
 #show_closed {
     margin: 0 1em 0 0;
 }
 
 #pull_request_list_table {
     .closed {
         background-color: @grey6;
     }
 
     .state-creating,
     .state-updating,
     .state-merging
     {
         background-color: @grey6;
     }
 
     .log-container .truncate {
         height: 2.75em;
         white-space: pre-line;
     }
     table.rctable .user {
         padding-left: 0;
     }
     .td-status {
         padding: 0 0px 0px 10px;
         width: 15px;
     }
     table.rctable {
         td.td-description,
         .rc-user {
             min-width: auto;
         }
     }
 }
 
 // Pull Requests
 
 .pullrequests_section_head {
   display: block;
   clear: both;
   margin: @padding 0;
   font-weight: @text-bold-weight;
   font-family: @text-bold;
 }
 
 .pr-commit-flow  {
     position: relative;
     font-weight: 600;
 
     .tag {
         display: inline-block;
         margin: 0 1em .5em 0;
     }
 
     .clone-url {
         display: inline-block;
         margin: 0 0 .5em 0;
         padding: 0;
         line-height: 1.2em;
     }
 }
 
 .pr-mergeinfo {
       min-width: 95% !important;
       padding: 0 !important;
       border: 0;
 }
 .pr-mergeinfo-copy {
     padding: 0 0;
 }
 
 .pr-pullinfo {
       min-width: 95% !important;
       padding: 0 !important;
       border: 0;
 }
 .pr-pullinfo-copy {
     padding: 0 0;
 }
 
 .pr-title-input {
   width: 100%;
   font-size: 18px;
   margin:  0 0 4px 0;
   padding: 0;
   line-height: 1.7em;
   color: @text-color;
   letter-spacing: .02em;
   font-weight: @text-bold-weight;
   font-family: @text-bold;
 
   &:hover {
     box-shadow: none;
   }
 }
 
 #pr-title {
   input {
     border: 1px transparent;
     color: black;
     opacity: 1;
     background: #fff;
     font-size: 18px;
   }
 }
 
 .pr-title-closed-tag {
     font-size: 16px;
 }
 
 #pr-desc {
   padding: 10px 0;
 
   .markdown-block {
     padding: 0;
     margin-bottom: -30px;
   }
 }
 
 #pullrequest_title {
     width: 100%;
     box-sizing: border-box;
 }
 
 #pr_open_message {
     border: @border-thickness solid #fff;
     border-radius: @border-radius;
     text-align: left;
     overflow: hidden;
     white-space: pre-line;
     padding-top: 5px
 }
 
 #add_reviewer {
     padding-top: 10px;
 }
 
 #add_reviewer_input,
 #add_observer_input {
     padding-top: 10px
 }
 
 .pr-details-title-author-pref {
     padding-right: 10px
 }
 
 .label-pr-detail {
   display: table-cell;
   width: 120px;
   padding-top: 7.5px;
   padding-bottom: 7.5px;
   padding-right: 7.5px;
 }
 
 .source-details ul {
   padding: 10px 16px;
 }
 
 .source-details-action {
   color: @grey4;
   font-size: 11px
 }
 
 .pr-submit-button {
     float: right;
     margin: 0 0 0 5px;
 }
 
 .pr-spacing-container {
     padding: 20px;
     clear: both
 }
 
 #pr-description-input {
     margin-bottom: 0;
 }
 
 .pr-description-label {
     vertical-align: top;
 }
 
 #open_edit_pullrequest {
   padding: 0;
 }
 
 #close_edit_pullrequest {
 
 }
 
 #delete_pullrequest {
     clear: inherit;
 
   form {
       display: inline;
   }
 
 }
 
 .perms_section_head {
     min-width: 625px;
 
     h2 {
         margin-bottom: 0;
     }
 
     .label-checkbox {
         float: left;
     }
 
     &.field {
         margin: @space 0 @padding;
     }
 
     &:first-child.field {
         margin-top: 0;
 
         .label {
             margin-top: 0;
             padding-top: 0;
         }
 
         .radios {
             padding-top: 0;
         }
     }
 
     .radios {
         position: relative;
         width: 505px;
     }
 }
 
 //--- MODULES ------------------//
 
 
 // Server Announcement
 #server-announcement {
   width: 95%;
   margin: @padding auto;
   padding: @padding;
   border-width: 2px;
   border-style: solid;
   .border-radius(2px);
   font-weight: @text-bold-weight;
   font-family: @text-bold;
 
   &.info    { border-color: @alert4; background-color: @alert4-inner; }
   &.warning { border-color: @alert3; background-color: @alert3-inner; }
   &.error   { border-color: @alert2; background-color: @alert2-inner; }
   &.success { border-color: @alert1; background-color: @alert1-inner; }
   &.neutral { border-color: @grey3; background-color: @grey6; }
 }
 
 // Fixed Sidebar Column
 .sidebar-col-wrapper {
     padding-left: @sidebar-all-width;
 
     .sidebar {
         width: @sidebar-width;
         margin-left: -@sidebar-all-width;
     }
 }
 
 .sidebar-col-wrapper.scw-small {
     padding-left: @sidebar-small-all-width;
 
     .sidebar {
         width: @sidebar-small-width;
         margin-left: -@sidebar-small-all-width;
     }
 }
 
 
 // FOOTER
 #footer {
 	padding: 0;
 	text-align: center;
 	vertical-align: middle;
 	color: @grey2;
     font-size: 11px;
 
 	p {
 		margin: 0;
 		padding: 1em;
 		line-height: 1em;
 	}
 
 	.server-instance { //server instance
 		display: none;
 	}
 
 	.title {
 		float: none;
 		margin: 0 auto;
 	}
 }
 
 button.close {
 	padding: 0;
 	cursor: pointer;
 	background: transparent;
 	border: 0;
 	.box-shadow(none);
 	-webkit-appearance: none;
 }
 
 .close {
 	float: right;
 	font-size: 21px;
 	font-family: @text-bootstrap;
 	line-height: 1em;
 	font-weight: bold;
 	color: @grey2;
 
 	&:hover,
 	&:focus {
 		color: @grey1;
 		text-decoration: none;
 		cursor: pointer;
 	}
 }
 
 // GRID
 .sorting,
 .sorting_desc,
 .sorting_asc {
 	cursor: pointer;
 }
 .sorting_desc:after {
 	content: "\00A0\25B2";
 	font-size: .75em;
 }
 .sorting_asc:after {
 	content: "\00A0\25BC";
 	font-size: .68em;
 }
 
 
 .user_auth_tokens {
 
     &.truncate {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
 	.fields .field .input {
 		margin: 0;
 	}
 
 	input#description {
 		width: 100px;
 		margin: 0;
 	}
 
 	.drop-menu {
 	    // TODO: johbo: Remove this, should work out of the box when
 	    // having multiple inputs inline
 		margin: 0 0 0 5px;
 	}
 }
 #user_list_table {
   .closed {
     background-color: @grey6;
   }
 }
 
 
 input, textarea {
 	&.disabled {
 		opacity: .5;
 	}
 
     &:hover {
         border-color: @grey3;
         box-shadow: @button-shadow;
     }
 
     &:focus {
         border-color: @rcblue;
         box-shadow: @button-shadow;
     }
 }
 
 // remove extra padding in firefox
 input::-moz-focus-inner { border:0; padding:0 }
 
 .adjacent input {
 	margin-bottom: @padding;
 }
 
 .permissions_boxes {
 	display: block;
 }
 
 //FORMS
 
 .medium-inline,
 input#description.medium-inline {
 	display: inline;
 	width: @medium-inline-input-width;
 	min-width: 100px;
 }
 
 select {
 	//reset
 	-webkit-appearance: none;
 	-moz-appearance: none;
 
 	display: inline-block;
 	height: 28px;
 	width: auto;
 	margin: 0 @padding @padding 0;
 	padding: 0 18px 0 8px;
 	line-height:1em;
 	font-size: @basefontsize;
 	border: @border-thickness solid @grey5;
     border-radius: @border-radius;
 	background:white url("../images/dt-arrow-dn.png") no-repeat 100% 50%;
 	color: @grey4;
     box-shadow: @button-shadow;
 
 	&:after {
 		content: "\00A0\25BE";
 	}
 
 	&:focus, &:hover {
 		outline: none;
         border-color: @grey4;
         color: @rcdarkblue;
 	}
 }
 
 option {
 	&:focus {
 		outline: none;
 	}
 }
 
 input,
 textarea {
 	padding: @input-padding;
 	border: @input-border-thickness solid @border-highlight-color;
 	.border-radius (@border-radius);
 	font-family: @text-light;
 	font-size: @basefontsize;
 
 	&.input-sm {
 		padding: 5px;
 	}
 
 	&#description {
 		min-width: @input-description-minwidth;
 		min-height: 1em;
 		padding: 10px;
 	}
 }
 
 .field-sm {
     input,
     textarea {
         padding: 5px;
     }
 }
 
 textarea {
 	display: block;
 	clear: both;
 	width: 100%;
 	min-height: 100px;
 	margin-bottom: @padding;
     .box-sizing(border-box);
     overflow: auto;
 }
 
 label {
 	font-family: @text-light;
 }
 
 // GRAVATARS
 // centers gravatar on username to the right
 
 .gravatar {
     display: inline;
     min-width: 16px;
     min-height: 16px;
     margin: -5px 0;
     padding: 0;
     line-height: 1em;
     box-sizing: content-box;
     border-radius: 50%;
 
     &.gravatar-large {
         margin: -0.5em .25em -0.5em 0;
     }
 
     & + .user {
         display: inline;
         margin: 0;
         padding: 0 0 0 .17em;
         line-height: 1em;
     }
 
     & + .no-margin {
       margin: 0
     }
 
 }
 
 .user-inline-data {
     display: inline-block;
     float: left;
     padding-left: .5em;
     line-height: 1.3em;
 }
 
 .rc-user { // gravatar + user wrapper
     float: left;
     position: relative;
     min-width: 100px;
     max-width: 200px;
     min-height: (@gravatar-size + @border-thickness * 2); // account for border
     display: block;
     padding: 0 0 0 (@gravatar-size  + @basefontsize/4);
 
 
     .gravatar {
         display: block;
         position: absolute;
         top: 0;
         left: 0;
         min-width:  @gravatar-size;
         min-height: @gravatar-size;
         margin: 0;
     }
 
     .user {
         display: block;
         max-width: 175px;
         padding-top: 2px;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 }
 
 .gist-gravatar,
 .journal_container {
     .gravatar-large {
         margin: 0 .5em -10px 0;
     }
 }
 
 .gist-type-fields {
     line-height: 30px;
     height: 30px;
 
     .gist-type-fields-wrapper {
         vertical-align: middle;
         display: inline-block;
         line-height: 25px;
     }
 }
 
 // ADMIN SETTINGS
 
 // Tag Patterns
 .tag_patterns {
 	.tag_input {
 		margin-bottom: @padding;
 	}
 }
 
 .locked_input {
     position: relative;
 
     input {
         display: inline;
         margin: 3px 5px 0px 0px;
     }
 
     br {
         display: none;
     }
 
     .error-message {
         float: left;
         width: 100%;
     }
 
     .lock_input_button {
         display: inline;
     }
 
     .help-block {
         clear: both;
     }
 }
 
 // Notifications
 
 .notifications_buttons {
 	margin: 0 0 @space 0;
 	padding: 0;
 
 	.btn {
 		display: inline-block;
 	}
 }
 
 .notification-list {
 
 	div {
 		vertical-align: middle;
 	}
 
 	.container {
 		display: block;
 		margin: 0 0 @padding 0;
 	}
 
 	.delete-notifications {
 		margin-left: @padding;
 		text-align: right;
         cursor: pointer;
 	}
 
 	.read-notifications {
 		margin-left: @padding/2;
 		text-align: right;
 		width: 35px;
         cursor: pointer;
 	}
 
 	.icon-minus-sign {
 		color: @alert2;
 	}
 
 	.icon-ok-sign {
 		color: @alert1;
 	}
 }
 
 .user_settings {
 	float: left;
 	clear: both;
 	display: block;
 	width: 100%;
 
 	.gravatar_box {
 		margin-bottom: @padding;
 
 		&:after {
 			content: " ";
 			clear: both;
 			width: 100%;
 		}
 	}
 
 	.fields .field {
 		clear: both;
 	}
 }
 
 .advanced_settings {
 	margin-bottom: @space;
 
 	.help-block {
 		margin-left: 0;
 	}
 
 	button + .help-block {
 		margin-top: @padding;
 	}
 }
 
 // admin settings radio buttons and labels
 .label-2 {
 	float: left;
 	width: @label2-width;
 
 	label {
 		color: @grey1;
 	}
 }
 .checkboxes {
 	float: left;
 	width: @checkboxes-width;
 	margin-bottom: @padding;
 
 	.checkbox {
 		width: 100%;
 
 		label {
 			margin: 0;
 			padding: 0;
 		}
 	}
 
 	.checkbox + .checkbox {
 		display: inline-block;
 	}
 
 	label {
 		margin-right: 1em;
 	}
 }
 
 // CHANGELOG
 .container_header {
     float: left;
 	display: block;
 	width: 100%;
 	margin: @padding 0 @padding;
 
     #filter_changelog {
         float: left;
         margin-right: @padding;
     }
 
     .breadcrumbs_light {
         display: inline-block;
     }
 }
 
 .info_box {
 	float: right;
 }
 
 
 
 #graph_content{
 
     // adjust for table headers so that graph renders properly
     //           #graph_nodes padding - table cell padding
     padding-top: (@space - (@basefontsize * 2.4));
 
     &.graph_full_width {
         width: 100%;
         max-width: 100%;
     }
 }
 
 #graph {
 
     .pagination-left {
         float: left;
         clear: both;
     }
 
     .log-container {
         max-width: 345px;
 
         .message{
             max-width: 340px;
         }
     }
 
     .graph-col-wrapper {
 
         #graph_nodes {
             width: 100px;
             position: absolute;
             left: 70px;
             z-index: -1;
         }
     }
 
     .load-more-commits {
         text-align: center;
     }
     .load-more-commits:hover {
         background-color: @grey7;
     }
     .load-more-commits {
       a {
         display: block;
       }
     }
 }
 
 .obsolete-toggle {
     line-height: 30px;
     margin-left: -15px;
 }
 
 #rev_range_container, #rev_range_clear, #rev_range_more {
     margin-top: -5px;
     margin-bottom: -5px;
 }
 
 #filter_changelog {
     float: left;
 }
 
 
 //--- THEME ------------------//
 
 #logo {
 	float: left;
 	margin: 9px 0 0 0;
 
     .header {
     	background-color: transparent;
     }
 
     a {
     	display: inline-block;
     }
 
     img {
     	height:30px;
     }
 }
 
 .logo-wrapper {
 	float:left;
 }
 
 .branding {
 	float: left;
 	padding: 9px 2px;
 	line-height: 1em;
 	font-size: @navigation-fontsize;
 
     a {
       color: @grey5
     }
 
     // 1024px or smaller
     @media screen and (max-width: 1180px) {
       display: none;
     }
 
 }
 
 img {
 	border: none;
 	outline: none;
 }
  user-profile-header
 label {
 
     input[type="checkbox"] {
         margin-right: 1em;
     }
     input[type="radio"] {
         margin-right: 1em;
     }
 }
 
 .review-status {
     &.under_review {
         color: @alert3;
     }
     &.approved {
         color: @alert1;
     }
     &.rejected,
     &.forced_closed{
         color: @alert2;
     }
     &.not_reviewed {
         color: @grey5;
     }
 }
 
 .review-status-under_review {
   color: @alert3;
 }
 .status-tag-under_review {
   border-color: @alert3;
 }
 
 .review-status-approved {
   color: @alert1;
 }
 .status-tag-approved {
   border-color: @alert1;
 }
 
 .review-status-rejected,
 .review-status-forced_closed {
   color: @alert2;
 }
 .status-tag-rejected,
 .status-tag-forced_closed {
   border-color: @alert2;
 }
 
 .review-status-not_reviewed {
   color: @grey5;
 }
 .status-tag-not_reviewed {
   border-color: @grey5;
 }
 
 .test_pattern_preview {
 	margin: @space 0;
 
 	p {
         margin-bottom: 0;
 		border-bottom: @border-thickness solid @border-default-color;
 		color: @grey3;
 	}
 
 	.btn {
 		margin-bottom: @padding;
 	}
 }
 #test_pattern_result {
     display: none;
     &:extend(pre);
     padding: .9em;
     color: @grey3;
     background-color: @grey7;
     border-right: @border-thickness solid @border-default-color;
     border-bottom: @border-thickness solid @border-default-color;
     border-left: @border-thickness solid @border-default-color;
 }
 
 #repo_vcs_settings {
     #inherit_overlay_vcs_default {
         display: none;
     }
     #inherit_overlay_vcs_custom {
         display: custom;
     }
     &.inherited {
         #inherit_overlay_vcs_default {
             display: block;
         }
         #inherit_overlay_vcs_custom {
             display: none;
         }
     }
 }
 
 .issue-tracker-link {
 	color: @rcblue;
 }
 
 // Issue Tracker Table Show/Hide
 #repo_issue_tracker {
     #inherit_overlay {
         display: none;
     }
     #custom_overlay {
         display: custom;
     }
     &.inherited {
         #inherit_overlay {
             display: block;
         }
         #custom_overlay {
             display: none;
         }
     }
 }
 table.issuetracker {
     &.readonly {
         tr, td {
             color: @grey3;
         }
     }
     .edit {
         display: none;
     }
     .editopen {
         .edit {
             display: inline;
         }
         .entry {
             display: none;
         }
     }
     tr td.td-action {
         min-width: 117px;
     }
     td input {
         max-width: none;
         min-width: 30px;
         width: 80%;
     }
     .issuetracker_pref input {
         width: 40%;
     }
     input.edit_issuetracker_update {
         margin-right: 0;
         width: auto;
     }
 }
 
 table.integrations {
     .td-icon {
         width: 20px;
         .integration-icon {
             height: 20px;
             width: 20px;
         }
     }
 }
 
 .integrations {
     a.integration-box {
         color: @text-color;
         &:hover {
             .panel {
                 background: #fbfbfb;
             }
         }
         .integration-icon {
           width: 30px;
           height: 30px;
           margin-right: 20px;
           float: left;
         }
 
         .panel-body {
             padding: 10px;
         }
         .panel {
             margin-bottom: 10px;
         }
         h2 {
             display: inline-block;
             margin: 0;
             min-width: 140px;
         }
     }
     a.integration-box.dummy-integration {
       color: @grey4
     }
 }
 
 //Permissions Settings
 #add_perm {
     margin: 0 0 @padding;
 	cursor: pointer;
 }
 
 .perm_ac {
     input {
         width: 95%;
     }
 }
 
 .autocomplete-suggestions {
     width: auto !important; // overrides autocomplete.js
     min-width: 278px;
     margin: 0;
     border: @border-thickness solid @grey5;
     border-radius: @border-radius;
     color: @grey2;
     background-color: white;
 }
 
 .autocomplete-qfilter-suggestions {
     width: auto !important; // overrides autocomplete.js
     max-height: 100% !important;
     min-width: 376px;
     margin: 0;
     border: @border-thickness solid @grey5;
     color: @grey2;
     background-color: white;
 }
 
 .autocomplete-selected {
     background: #F0F0F0;
 }
 
 .ac-container-wrap {
 	margin: 0;
 	padding: 8px;
 	border-bottom: @border-thickness solid @grey5;
 	list-style-type: none;
 	cursor: pointer;
 
 		&:hover {
 			background-color: @grey7;
 	}
 
 	img {
         height: @gravatar-size;
         width: @gravatar-size;
 		margin-right: 1em;
 	}
 
 	strong {
 		font-weight: normal;
 	}
 }
 
 // Settings Dropdown
 .user-menu .container {
     padding: 0 4px;
     margin: 0;
 }
 
 .user-menu .gravatar {
     cursor: pointer;
 }
 
 .codeblock {
 	margin-bottom: @padding;
     clear: both;
 
     .stats {
         overflow: hidden;
     }
 
     .message{
         textarea{
             margin: 0;
         }
     }
 
     .code-header {
     	.stats {
             line-height: 2em;
 
     		.revision_id {
     			margin-left: 0;
     		}
 			.buttons {
                 padding-right: 0;
 			}
     	}
 
         .item{
             margin-right: 0.5em;
         }
     }
 
     #editor_container {
       position: relative;
       margin: @padding 10px;
     }
 }
 
 #file_history_container {
     display: none;
 }
 
 .file-history-inner {
     margin-bottom: 10px;
 }
 
 // Pull Requests
 .summary-details {
     width: 100%;
 }
 .pr-summary {
     border-bottom: @border-thickness solid @grey5;
     margin-bottom: @space;
 }
 
 .reviewers {
   width: 98%;
 }
 
 .reviewers ul li {
     position: relative;
     width: 100%;
     padding-bottom: 8px;
     list-style-type: none;
 }
 
 .reviewer_entry {
   min-height: 55px;
 }
 
 .reviewer_reason {
     padding-left: 20px;
     line-height: 1.5em;
 }
 .reviewer_status {
     display: inline-block;
     width: 20px;
     min-width: 20px;
     height: 1.2em;
     line-height: 1em;
 }
 
 .reviewer_name {
     display: inline-block;
     max-width: 83%;
     padding-right: 20px;
     vertical-align: middle;
     line-height: 1;
 
     .rc-user {
         min-width: 0;
         margin: -2px 1em 0 0;
     }
 
     .reviewer {
         float: left;
     }
 }
 
 .reviewer_member_mandatory {
     width: 16px;
     font-size: 11px;
     margin: 0;
     padding: 0;
     color: black;
     opacity: 0.4;
 }
 
 .reviewer_member_mandatory_remove,
 .reviewer_member_remove {
     width: 16px;
     padding: 0;
     color: black;
     cursor: pointer;
 }
 
 .reviewer_member_mandatory_remove {
   color: @grey4;
 }
 
 .reviewer_member_status {
     margin-top: 5px;
 }
 .pr-summary #summary{
     width: 100%;
 }
 .pr-summary .action_button:hover {
     border: 0;
     cursor: pointer;
 }
 .pr-details-title {
     height: 20px;
     line-height: 16px;
 
     padding-bottom: 4px;
     border-bottom: @border-thickness solid @grey5;
 
     .action_button.disabled {
         color: @grey4;
         cursor: inherit;
     }
     .action_button {
         color: @rcblue;
     }
 }
 .pr-details-content {
     margin-top: @textmargin - 5;
     margin-bottom: @textmargin - 5;
 }
 
 .pr-reviewer-rules {
    padding: 10px 0px 20px 0px;
 }
 
 .todo-resolved {
   text-decoration: line-through;
 }
 
 .todo-table, .comments-table {
   width: 100%;
 
   td {
     padding: 5px 0px;
   }
 
   .td-todo-number {
     text-align: left;
     white-space: nowrap;
     width: 1%;
     padding-right: 2px;
   }
 
   .td-todo-gravatar {
     width: 5%;
 
     img {
       margin: -3px 0;
     }
   }
 
 }
 
 .todo-comment-text-wrapper {
   display: inline-grid;
 }
 
 .todo-comment-text {
   margin-left: 5px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 table.group_members {
   width: 100%
 }
 
 .group_members {
     margin-top: 0;
     padding: 0;
 
     img {
         height: @gravatar-size;
         width: @gravatar-size;
         margin-right: .5em;
         margin-left: 3px;
     }
 
     .to-delete {
         .user {
           text-decoration: line-through;
         }
     }
 }
 
 .compare_view_commits_title {
   .disabled {
     cursor: inherit;
     &:hover{
       background-color: inherit;
       color: inherit;
     }
   }
 }
 
 .subtitle-compare {
   margin: -15px 0px 0px 0px;
 }
 
 // new entry in group_members
 .td-author-new-entry {
   background-color: rgba(red(@alert1), green(@alert1), blue(@alert1), 0.3);
 }
 
 .usergroup_member_remove {
     width: 16px;
     margin-bottom: 10px;
     padding: 0;
     color: black !important;
     cursor: pointer;
 }
 
 .reviewer_ac .ac-input {
     width: 98%;
     margin-bottom: 1em;
 }
 
 .observer_ac .ac-input {
     width: 98%;
     margin-bottom: 1em;
 }
 
 .rule-table {
     width: 100%;
 }
 
 .rule-table td {
 
 }
 
 .rule-table .td-role {
   width: 100px
 }
 
 .rule-table .td-mandatory {
   width: 100px
 }
 
 .rule-table .td-group-votes {
   width: 150px
 }
 
 .compare_view_commits tr{
     height: 20px;
 }
 .compare_view_commits td {
     vertical-align: top;
     padding-top: 10px;
 }
 .compare_view_commits .author {
     margin-left: 5px;
 }
 
 .compare_view_commits {
   .color-a {
     color: @alert1;
   }
 
   .color-c {
     color: @color3;
   }
 
   .color-r {
     color: @color5;
   }
 
   .color-a-bg {
     background-color: @alert1;
   }
 
   .color-c-bg {
     background-color: @alert3;
   }
 
   .color-r-bg {
     background-color: @alert2;
   }
 
   .color-a-border {
     border: 1px solid @alert1;
   }
 
   .color-c-border {
     border: 1px solid @alert3;
   }
 
   .color-r-border {
     border: 1px solid @alert2;
   }
 
   .commit-change-indicator {
     width: 15px;
     height: 15px;
     position: relative;
     left: 15px;
   }
 
   .commit-change-content {
     text-align: center;
     vertical-align: middle;
     line-height: 15px;
   }
 }
 
 .compare_view_filepath {
     color: @grey1;
 }
 
 .show_more {
     display: inline-block;
     width: 0;
     height: 0;
     vertical-align: middle;
     content: "";
     border: 4px solid;
     border-right-color: transparent;
     border-bottom-color: transparent;
     border-left-color: transparent;
     font-size: 0;
 }
 
 .journal_more .show_more {
     display: inline;
 
     &:after {
         content: none;
     }
 }
 
 .compare_view_commits .collapse_commit:after {
     cursor: pointer;
     content: "\00A0\25B4";
     margin-left: -3px;
     font-size: 17px;
     color: @grey4;
 }
 
 .diff_links {
     margin-left: 8px;
 }
 
 #pull_request_overview {
   div.ancestor {
       margin: -33px 0;
   }
 }
 
 div.ancestor {
 
 }
 
 .cs_icon_td input[type="checkbox"] {
     display: none;
 }
 
 .cs_icon_td .expand_file_icon:after {
     cursor: pointer;
     content: "\00A0\25B6";
     font-size: 12px;
     color: @grey4;
 }
 
 .cs_icon_td .collapse_file_icon:after {
     cursor: pointer;
     content: "\00A0\25BC";
     font-size: 12px;
     color: @grey4;
 }
 
 /*new binary
 NEW_FILENODE = 1
 DEL_FILENODE = 2
 MOD_FILENODE = 3
 RENAMED_FILENODE = 4
 COPIED_FILENODE = 5
 CHMOD_FILENODE = 6
 BIN_FILENODE = 7
 */
 .cs_files_expand {
     font-size: @basefontsize + 5px;
     line-height: 1.8em;
     float: right;
 }
 
 .cs_files_expand span{
     color: @rcblue;
     cursor: pointer;
 }
 .cs_files {
     clear: both;
 	padding-bottom: @padding;
 
     .cur_cs {
         margin: 10px 2px;
         font-weight: bold;
     }
 
     .node {
         float: left;
     }
 
     .changes {
         float: right;
         color: white;
         font-size: @basefontsize - 4px;
         margin-top: 4px;
         opacity: 0.6;
         filter: Alpha(opacity=60); /* IE8 and earlier */
 
         .added {
             background-color: @alert1;
             float: left;
             text-align: center;
         }
 
         .deleted {
             background-color: @alert2;
             float: left;
             text-align: center;
         }
 
         .bin {
             background-color: @alert1;
             text-align: center;
         }
 
         /*new binary*/
         .bin.bin1 {
             background-color: @alert1;
             text-align: center;
         }
 
         /*deleted binary*/
         .bin.bin2 {
             background-color: @alert2;
             text-align: center;
         }
 
         /*mod binary*/
         .bin.bin3 {
             background-color: @grey2;
             text-align: center;
         }
 
         /*rename file*/
         .bin.bin4 {
             background-color: @alert4;
             text-align: center;
         }
 
         /*copied file*/
         .bin.bin5 {
             background-color: @alert4;
             text-align: center;
         }
 
         /*chmod file*/
         .bin.bin6 {
             background-color: @grey2;
             text-align: center;
         }
     }
 }
 
 .cs_files .cs_added, .cs_files .cs_A,
 .cs_files .cs_added, .cs_files .cs_M,
 .cs_files .cs_added, .cs_files .cs_D {
     height: 16px;
     padding-right: 10px;
     margin-top: 7px;
     text-align: left;
 }
 
 .cs_icon_td {
   min-width: 16px;
   width: 16px;
 }
 
 .pull-request-merge {
     border: 1px solid @grey5;
     padding: 10px 0px 20px;
     margin-top: 10px;
     margin-bottom: 20px;
 }
 
 .pull-request-merge-refresh {
   margin: 2px 7px;
   a {
     color: @grey3;
   }
 }
 
 .pull-request-merge ul {
     padding: 0px 0px;
 }
 
 .pull-request-merge li {
     list-style-type: none;
 }
 
 .pull-request-merge .pull-request-wrap {
     height: auto;
     padding: 0px 0px;
     text-align: right;
 }
 
 .pull-request-merge span {
     margin-right: 5px;
 }
 
 .pull-request-merge-actions {
     min-height: 30px;
     padding: 0px 0px;
 }
 
 .pull-request-merge-info {
   padding: 0px 5px 5px 0px;
 }
 
 .merge-status {
   margin-right: 5px;
 }
 
 .merge-message {
     font-size: 1.2em
 }
 
 .merge-message.success i,
 .merge-icon.success i {
     color:@alert1;
 }
 
 .merge-message.warning i,
 .merge-icon.warning i {
   color: @alert3;
 }
 
 .merge-message.error i,
 .merge-icon.error i  {
     color:@alert2;
 }
 
 .pr-versions {
     font-size: 1.1em;
     padding: 7.5px;
 
     table {
 
     }
 
     td {
       line-height: 15px;
     }
 
     .compare-radio-button {
       position: relative;
       top: -3px;
     }
 }
 
 
 #close_pull_request {
     margin-right: 0px;
 }
 
 .empty_data {
     color: @grey4;
 }
 
 #changeset_compare_view_content {
     clear: both;
     width: 100%;
     box-sizing: border-box;
     .border-radius(@border-radius);
 
     .help-block {
         margin: @padding 0;
         color: @text-color;
         &.pre-formatting {
             white-space: pre;
         }
     }
 
     .empty_data {
         margin: @padding 0;
     }
 
     .alert {
         margin-bottom: @space;
     }
 }
 
 .table_disp {
 	.status {
 		width: auto;
 	}
 }
 
 
 .creation_in_progress {
   color: @grey4
 }
 
 .status_box_menu {
     margin: 0;
 }
 
 .notification-table{
 	margin-bottom: @space;
 	display: table;
 	width: 100%;
 
 	.container{
 		display: table-row;
 
 		.notification-header{
 			border-bottom: @border-thickness solid @border-default-color;
 		}
 
 		.notification-subject{
 			display: table-cell;
 		}
 	}
 }
 
 // Notifications
 .notification-header{
 	display: table;
 	width: 100%;
 	padding: floor(@basefontsize/2) 0;
     line-height: 1em;
 
 	.desc, .delete-notifications, .read-notifications{
 		display: table-cell;
 		text-align: left;
 	}
 
 	.delete-notifications, .read-notifications{
 		width: 35px;
 		min-width: 35px; //fixes when only one button is displayed
 	}
 }
 
 .notification-body {
     .markdown-block,
 	.rst-block {
 		padding: @padding 0;
 	}
 
 	.notification-subject {
 		padding: @textmargin 0;
 		border-bottom: @border-thickness solid @border-default-color;
 	}
 }
 
 .notice-messages {
     .markdown-block,
 	.rst-block {
 		padding: 0;
 	}
 }
 
 .notifications_buttons{
 	float: right;
 }
 
 #notification-status{
   display: inline;
 }
 
 // Repositories
 
 #summary.fields{
 	display: table;
 
 	.field{
 		display: table-row;
 
 		.label-summary{
 			display: table-cell;
 			min-width: @label-summary-minwidth;
 			padding-top: @padding/2;
 			padding-bottom: @padding/2;
 			padding-right: @padding/2;
 		}
 
 		.input{
 			display: table-cell;
 			padding: @padding/2;
 
 			input{
 				min-width: 29em;
 				padding:  @padding/4;
 			}
 		}
 		.statistics, .downloads{
 			.disabled{
 				color: @grey4;
 			}
 		}
 	}
 }
 
 #summary{
 	width: 70%;
 }
 
 
 // Journal
 .journal.title {
 	h5 {
 		float: left;
 		margin: 0;
 		width: 70%;
 	}
 
 	ul {
 		float: right;
 		display: inline-block;
 		margin: 0;
 		width: 30%;
 		text-align: right;
 
 		li {
 			display: inline;
 			font-size: @journal-fontsize;
             line-height: 1em;
 
             list-style-type: none;
 		}
 	}
 }
 
 .filterexample {
     position: absolute;
     top: 95px;
     left: @contentpadding;
     color: @rcblue;
     font-size: 11px;
     font-family: @text-regular;
     cursor: help;
 
     &:hover {
         color: @rcdarkblue;
     }
 
     @media (max-width:768px) {
         position: relative;
         top: auto;
         left: auto;
         display: block;
     }
 }
 
 
 #journal{
 	margin-bottom: @space;
 
 	.journal_day{
 		margin-bottom: @textmargin/2;
 		padding-bottom: @textmargin/2;
 		font-size: @journal-fontsize;
 		border-bottom: @border-thickness solid @border-default-color;
 	}
 
 	.journal_container{
 		margin-bottom: @space;
 
 		.journal_user{
 			display: inline-block;
 		}
 		.journal_action_container{
 			display: block;
 			margin-top: @textmargin;
 
 			div{
 				display: inline;
 			}
 
 			div.journal_action_params{
 				display: block;
 			}
 
 			div.journal_repo:after{
 				content: "\A";
 				white-space: pre;
 			}
 
 			div.date{
 				display: block;
 				margin-bottom: @textmargin;
 			}
 		}
 	}
 }
 
 // Files
 .edit-file-title {
     font-size: 16px;
 
     .title-heading {
       padding: 2px;
     }
 }
 
 .edit-file-fieldset {
     margin: @sidebarpadding 0;
 
     .fieldset {
         .left-label {
             width: 13%;
         }
         .right-content {
             width: 87%;
             max-width: 100%;
         }
         .filename-label {
             margin-top: 13px;
         }
         .commit-message-label {
             margin-top: 4px;
         }
         .file-upload-input {
             input {
                 display: none;
             }
           margin-top: 10px;
         }
         .file-upload-label {
           margin-top: 10px;
         }
         p {
             margin-top: 5px;
         }
 
     }
     .custom-path-link {
         margin-left: 5px;
     }
     #commit {
         resize: vertical;
     }
 }
 
 .delete-file-preview {
     max-height: 250px;
 }
 
 .new-file,
 #filter_activate,
 #filter_deactivate {
     float: right;
     margin: 0 0 0 10px;
 }
 
 .file-upload-transaction-wrapper {
     margin-top: 57px;
     clear: both;
 }
 
 .file-upload-transaction-wrapper .error {
     color: @color5;
 }
 
 .file-upload-transaction {
     min-height: 200px;
     padding: 54px;
     border: 1px solid @grey5;
     text-align: center;
     clear: both;
 }
 
 .file-upload-transaction i {
     font-size: 48px
 }
 
 h3.files_location{
     line-height: 2.4em;
 }
 
 .browser-nav {
     width: 100%;
 	display: table;
     margin-bottom: 20px;
 
 	.info_box {
         float: left;
 		display: inline-table;
 		height: 2.5em;
 
         .browser-cur-rev, .info_box_elem {
 			display: table-cell;
 			vertical-align: middle;
 		}
 
         .drop-menu {
             margin: 0 10px;
         }
 
 		.info_box_elem {
 			border-top: @border-thickness solid @grey5;
 			border-bottom: @border-thickness solid @grey5;
             box-shadow: @button-shadow;
 
             #at_rev, a {
                 padding: 0.6em 0.4em;
                 margin: 0;
                 .box-shadow(none);
                 border: 0;
                 height: 12px;
                 color: @grey2;
             }
 
             input#at_rev {
                 max-width: 50px;
                 text-align: center;
             }
 
 			&.previous {
 				border: @border-thickness solid @grey5;
                 border-top-left-radius: @border-radius;
                 border-bottom-left-radius: @border-radius;
 
                 &:hover {
                     border-color: @grey4;
                 }
 
                 .disabled {
                   color: @grey5;
                   cursor: not-allowed;
                   opacity: 0.5;
                 }
 			}
 
 			&.next {
 				border: @border-thickness solid @grey5;
                 border-top-right-radius: @border-radius;
                 border-bottom-right-radius: @border-radius;
 
                 &:hover {
                     border-color: @grey4;
                 }
 
                 .disabled {
                   color: @grey5;
                   cursor: not-allowed;
                   opacity: 0.5;
                 }
 			}
 		}
 
 		.browser-cur-rev {
 
 			span{
                 margin: 0;
 				color: @rcblue;
                 height: 12px;
                 display: inline-block;
                 padding:  0.7em 1em ;
                 border: @border-thickness solid @rcblue;
                 margin-right: @padding;
 			}
 		}
 
 	}
 
     .select-index-number {
         margin: 0 0 0 20px;
         color: @grey3;
     }
 
 	.search_activate {
 		display: table-cell;
 		vertical-align: middle;
 
 		input, label{
 			margin: 0;
 			padding: 0;
 		}
 
 		input{
 			margin-left: @textmargin;
 		}
 
 	}
 }
 
 .browser-cur-rev{
 	margin-bottom: @textmargin;
 }
 
 #node_filter_box_loading{
 	.info_text;
 }
 
 .browser-search {
 	margin: -25px 0px 5px 0px;
 }
 
 .files-quick-filter {
   float: right;
   width: 180px;
   position: relative;
 }
 
 .files-filter-box {
   display: flex;
   padding: 0px;
   border-radius: 3px;
   margin-bottom: 0;
 
   a {
     border: none !important;
   }
 
   li {
     list-style-type: none
   }
 }
 
 .files-filter-box-path {
   line-height: 33px;
   padding: 0;
   width: 20px;
   position: absolute;
   z-index: 11;
   left: 5px;
 }
 
 .files-filter-box-input {
   margin-right: 0;
 
   input {
     border: 1px solid @white;
     padding-left: 25px;
     width: 145px;
 
     &:hover {
         border-color: @grey6;
     }
 
     &:focus {
         border-color: @grey5;
     }
   }
 }
 
 .browser-result{
 	td a{
 		margin-left: 0.5em;
 		display: inline-block;
 
 		em {
           font-weight: @text-bold-weight;
           font-family: @text-bold;
         }
 	}
 }
 
 .browser-highlight{
 	background-color: @grey5-alpha;
 }
 
 
 .edit-file-fieldset #location,
 .edit-file-fieldset #filename {
   display: flex;
   width: -moz-available; /* WebKit-based browsers will ignore this. */
   width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
   width: fill-available;
   border: 0;
 }
 
 .path-items {
   display: flex;
   padding: 0;
   border: 1px solid #eeeeee;
   width: 100%;
   float: left;
 
   .breadcrumb-path {
     line-height: 30px;
     padding: 0 4px;
     white-space: nowrap;
   }
 
   .upload-form {
     margin-top: 46px;
   }
 
   .location-path {
     width: -moz-available; /* WebKit-based browsers will ignore this. */
     width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
     width: fill-available;
 
     .file-name-input {
       padding: 0.5em 0;
     }
 
   }
 
   ul {
     display: flex;
     margin: 0;
     padding: 0;
     width: 100%;
   }
 
   li {
     list-style-type: none;
   }
 
 }
 
 .editor-items {
   height: 40px;
   margin: 10px 0 -17px 10px;
 
   .editor-action {
     cursor: pointer;
   }
 
   .editor-action.active {
     border-bottom: 2px solid #5C5C5C;
   }
 
   li {
     list-style-type: none;
   }
 }
 
 .edit-file-fieldset .message textarea {
   border: 1px solid #eeeeee;
 }
 
 #files_data .codeblock {
   background-color: #F5F5F5;
 }
 
 #editor_preview {
   background: white;
 }
 
 .show-editor {
   padding: 10px;
   background-color: white;
 
 }
 
 .show-preview {
   padding: 10px;
   background-color: white;
   border-left: 1px solid #eeeeee;
 }
 // quick filter
 .grid-quick-filter {
   float: right;
     position: relative;
 }
 
 .grid-filter-box {
   display: flex;
   padding: 0px;
   border-radius: 3px;
   margin-bottom: 0;
 
   a {
     border: none !important;
   }
 
   li {
     list-style-type: none
   }
 
 }
 
 .grid-filter-box-icon {
   line-height: 33px;
   padding: 0;
   width: 20px;
   position: absolute;
   z-index: 11;
   left: 5px;
 }
 
 .grid-filter-box-input {
   margin-right: 0;
 
   input {
     border: 1px solid @white;
     padding-left: 25px;
     width: 145px;
 
     &:hover {
         border-color: @grey6;
     }
 
     &:focus {
         border-color: @grey5;
     }
   }
 }
 
 
 
 // Search
 
 .search-form{
     #q {
         width: @search-form-width;
     }
 	.fields{
 		margin: 0 0 @space;
 	}
 
 	label{
 		display: inline-block;
 		margin-right: @textmargin;
 		padding-top: 0.25em;
 	}
 
 
 	.results{
 		clear: both;
 		margin: 0 0 @padding;
 	}
 
     .search-tags {
       padding: 5px 0;
     }
 }
 
 div.search-feedback-items {
 	display: inline-block;
 }
 
 div.search-code-body {
     background-color: #ffffff; padding: 5px 0 5px 10px;
     pre {
         .match { background-color: #faffa6;}
         .break { display: block; width: 100%; background-color: #DDE7EF; color: #747474; }
     }
 }
 
 .expand_commit.search {
     .show_more.open {
         height: auto;
         max-height: none;
     }
 }
 
 .search-results {
 
     h2 {
         margin-bottom: 0;
     }
     .codeblock {
         border: none;
         background: transparent;
     }
 
     .codeblock-header {
         border: none;
         background: transparent;
     }
 
     .code-body {
         border: @border-thickness solid @grey6;
         .border-radius(@border-radius);
     }
 
     .td-commit {
         &:extend(pre);
         border-bottom: @border-thickness solid @border-default-color;
     }
 
     .message {
         height: auto;
         max-width: 350px;
         white-space: normal;
         text-overflow: initial;
         overflow: visible;
 
         .match { background-color: #faffa6;}
         .break { background-color: #DDE7EF; width: 100%; color: #747474; display: block; }
     }
 
     .path {
       border-bottom: none !important;
       border-left: 1px solid @grey6 !important;
       border-right: 1px solid @grey6 !important;
     }
 }
 
 table.rctable td.td-search-results div {
     max-width: 100%;
 }
 
 #tip-box, .tip-box{
 	padding: @menupadding/2;
 	display: block;
 	border: @border-thickness solid @border-highlight-color;
 	.border-radius(@border-radius);
 	background-color: white;
     z-index: 99;
     white-space: pre-wrap;
 }
 
 #linktt {
     width: 79px;
 }
 
 #help_kb .modal-content{
 	max-width: 800px;
 	margin: 10% auto;
 
 	table{
 		td,th{
 			border-bottom: none;
 			line-height: 2.5em;
 		}
 		th{
 			padding-bottom: @textmargin/2;
 		}
 		td.keys{
 			text-align: center;
 		}
 	}
 
 	.block-left{
 		width: 45%;
 		margin-right: 5%;
 	}
 	.modal-footer{
 		clear: both;
 	}
 	.key.tag{
 		padding: 0.5em;
 		background-color: @rcblue;
 		color: white;
 		border-color: @rcblue;
 		.box-shadow(none);
 	}
 }
 
 
 
 //--- IMPORTS FOR REFACTORED STYLES ------------------//
 
 @import 'statistics-graph';
 @import 'tables';
 @import 'forms';
 @import 'diff';
 @import 'summary';
 @import 'navigation';
 
 //--- SHOW/HIDE SECTIONS --//
 
 .btn-collapse {
     float: right;
     text-align: right;
     font-family: @text-light;
     font-size: @basefontsize;
     cursor: pointer;
     border: none;
     color: @rcblue;
 }
 
 table.rctable,
 table.dataTable {
     .btn-collapse {
         float: right;
         text-align: right;
     }
 }
 
 table.rctable {
   &.permissions {
 
     th.td-owner {
       padding: 0;
     }
 
     th {
       font-weight: normal;
       padding: 0 5px;
     }
 
   }
 }
 
 
 // TODO: johbo: Fix for IE10, this avoids that we see a border
 // and padding around checkboxes and radio boxes. Move to the right place,
 // or better: Remove this once we did the form refactoring.
 input[type=checkbox],
 input[type=radio] {
     padding: 0;
     border: none;
 }
 
 .toggle-ajax-spinner{
   height: 16px;
   width: 16px;
 }
 
 
 .markup-form .clearfix {
     .border-radius(@border-radius);
     margin: 0px;
 }
 
 .markup-form-area {
     padding: 8px 12px;
     border: 1px solid @grey4;
     .border-radius(@border-radius);
 }
 
 .markup-form-area-header .nav-links {
     display: flex;
     flex-flow: row wrap;
     -webkit-flex-flow: row wrap;
     width: 100%;
 }
 
 .markup-form-area-footer {
     display: flex;
 }
 
 .markup-form-area-footer .toolbar {
 
 }
 
 // markup Form
 div.markup-form {
     margin-top: 20px;
 }
 
 .markup-form strong {
     display: block;
     margin-bottom: 15px;
 }
 
 .markup-form textarea {
     width: 100%;
     height: 100px;
     font-family: @text-monospace;
 }
 
 form.markup-form {
     margin-top: 10px;
     margin-left: 10px;
 }
 
 .markup-form .comment-block-ta,
 .markup-form .preview-box {
     .border-radius(@border-radius);
     .box-sizing(border-box);
     background-color: white;
 }
 
 .markup-form .preview-box.unloaded {
     height: 50px;
     text-align: center;
     padding: 20px;
     background-color: white;
 }
 
 
 .dropzone-wrapper {
   border: 1px solid @grey5;
   padding: 20px;
 }
 
 .dropzone,
 .dropzone-pure {
   border: 2px dashed @grey5;
   border-radius: 5px;
   background: white;
   min-height: 200px;
   padding: 54px;
 
   .dz-message {
     font-weight: 700;
     text-align: center;
     margin: 2em 0;
   }
 
 }
 
 .dz-preview {
   margin: 10px 0 !important;
   position: relative;
   vertical-align: top;
   padding: 10px;
   border-bottom: 1px solid @grey5;
 }
 
 .dz-filename {
   font-weight: 700;
   float: left;
 }
 
 .dz-sending {
   float: right;
 }
 
 .dz-response {
   clear: both
 }
 
 .dz-filename-size {
   float: right
 }
 
 .dz-error-message {
   color: @alert2;
   padding-top: 10px;
   clear: both;
 }
 
 
 .user-hovercard {
   padding: 5px;
 }
 
 .user-hovercard-icon {
   display: inline;
   padding: 0;
   box-sizing: content-box;
   border-radius: 50%;
   float: left;
 }
 
 .user-hovercard-name {
   float: right;
   vertical-align: top;
   padding-left: 10px;
   min-width: 150px;
 }
 
 .user-hovercard-bio {
   clear: both;
   padding-top: 10px;
 }
 
 .user-hovercard-header {
   clear: both;
   min-height: 10px;
 }
 
 .user-hovercard-footer {
   clear: both;
   min-height: 10px;
 }
 
 .user-group-hovercard {
   padding: 5px;
 }
 
 .user-group-hovercard-icon {
   display: inline;
   padding: 0;
   box-sizing: content-box;
   border-radius: 50%;
   float: left;
 }
 
 .user-group-hovercard-name {
   float: left;
   vertical-align: top;
   padding-left: 10px;
   min-width: 150px;
 }
 
 .user-group-hovercard-icon i {
   border: 1px solid @grey4;
   border-radius: 4px;
 }
 
 .user-group-hovercard-bio {
   clear: both;
   padding-top: 10px;
   line-height: 1.0em;
 }
 
 .user-group-hovercard-header {
   clear: both;
   min-height: 10px;
 }
 
 .user-group-hovercard-footer {
   clear: both;
   min-height: 10px;
 }
 
 .pr-hovercard-header {
   clear: both;
   display: block;
   line-height: 20px;
 }
 
 .pr-hovercard-user {
   display: flex;
   align-items: center;
   padding-left: 5px;
 }
 
 .pr-hovercard-title {
   padding-top: 5px;
 }
 
 .action-divider {
   opacity: 0.5;
 }
 
 .details-inline-block {
   display: inline-block;
   position: relative;
 }
 
 .details-inline-block summary {
   list-style: none;
 }
 
 details:not([open]) > :not(summary) {
   display: none !important;
 }
 
 .details-reset > summary {
   list-style: none;
 }
 
 .details-reset > summary::-webkit-details-marker {
   display: none;
 }
 
 .details-dropdown {
   position: absolute;
   top: 100%;
   width: 185px;
   list-style: none;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid @grey5;
   box-shadow: 0 8px 24px rgba(149, 157, 165, .2);
   left: -150px;
   text-align: left;
   z-index: 90;
 }
 
 .dropdown-divider {
   display: block;
   height: 0;
   margin: 8px 0;
   border-top: 1px solid @grey5;
 }
 
 .dropdown-item {
   display: block;
   padding: 4px 8px 4px 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: normal;
 }
 
 .right-sidebar {
   position: fixed;
   top: 0px;
   bottom: 0;
   right: 0;
 
   background: #fafafa;
   z-index: 50;
 }
 
 .right-sidebar {
   border-left: 1px solid @grey5;
 }
 
 .right-sidebar.right-sidebar-expanded {
   width: 300px;
   overflow: scroll;
 }
 
 .right-sidebar.right-sidebar-collapsed {
   width: 40px;
   padding: 0;
   display: block;
   overflow: hidden;
 }
 
 .sidenav {
   float: right;
   will-change: min-height;
   background: #fafafa;
   width: 100%;
 }
 
 .sidebar-toggle {
   height: 30px;
   text-align: center;
   margin: 15px 0px 0 0;
 }
 
 .sidebar-toggle a {
 
 }
 
 .sidebar-content {
   margin-left: 15px;
   margin-right: 15px;
 }
 
 .sidebar-heading {
   font-size: 1.2em;
   font-weight: 700;
   margin-top: 10px;
 }
 
 .sidebar-element {
   margin-top: 20px;
-}
+
+  .icon-draft {
+    color: @color-draft
+  }
+}
+
 
 .right-sidebar-collapsed-state {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0 10px;
   cursor: pointer;
   font-size: 1.3em;
   margin: 0 -15px;
 }
 
 .right-sidebar-collapsed-state:hover {
   background-color: @grey5;
 }
 
 .old-comments-marker {
   text-align: left;
 }
 
 .old-comments-marker td {
   padding-top: 15px;
-  border-bottom: 1px solid @grey5;
-}
+}

rhodecode/public/css/variables.less

@@ -1,154 +1,156 b''
 // variables for use in all RhodeCode products
 
 // FONTS
 //Primary Colors (brand)
 @rcblue: #427cc9;		//RhodeCode blue
 @rcdarkblue: #305b91;	//RhodeCode dark blue
 @rclightblue: lighten(@rcblue, 30%);
 @rchighlightblue: lighten(@rcblue, 35%);
 
 // Secondary Colors (greyscale)
 @black: #000;
 @white: #fff;
 @grey1: #2B2B2D;		//midnight
 @grey2: #5C5C5C;		//charcoal
 @grey3: #7E7F7F;		//tungsten
 @grey4: #949494;		//light grey
 @grey5: #dbd9da;		//greyish
 @grey6: #eeeeee;		//silver
 @grey7: #F5F5F5;		//light silver
 
 // special for navigation
 @nav-grey: #CDCCCD;
 
 @grey5-alpha: rgba(219, 217, 218, 0.3);
 
 // Tertiary Colors
 @color1: #879938;		//olive green
 @color2: #fcc93a;		//bright yellow
 @color3: #ff9e07;		//orange-yellow
 @color4: #fc663a;		//bright orange
 @color5: #d63d44;		//signal red
 @color6: #99287c;		//violet
 @color7: #682668;		//dark purple
 @color8: #194f8e;		//dark blue
 
 // Alert Colors (bright)
 @alert1: #0ac878;		//bright green
 @alert2: #e85e4d;		//soft red
 @alert3: #ffc854;		//corn yellow
 @alert4: #84a5d2;		//light blue
 
 // Alert Inner Colors
 @alert1-inner: #daf7eb;		//bright green
 @alert2-inner: #fbdfdb;		//soft red
 @alert3-inner: #fff4dd;		//corn yellow
 @alert4-inner: #e6edf6;		//light blue
 
 // Highlight color for lines and colors
 @comment-highlight-color: #ffd887;
+@color-draft: darken(@alert3, 30%);
+@color-new: darken(@alert1, 5%);
 
 // FONTS
 @basefontsize: 13px;
 @navigation-fontsize: 14px;
 @journal-fontsize: @basefontsize+7px;
 @text-color: @grey2;
 @repo-title-fontsize: 18px;
 
 @text-regular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
 
 @text-italic: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
 @text-bold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-bold-weight: 600;
 
 @text-semibold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-semibold-weight: 500;
 
 @text-bold-italic: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 @text-bold-italic-weight: 600;
 
 @text-code: @text-monospace;
 @text-light: @text-regular;
 
 
 // Used for .close buttons
 @text-bootstrap: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
 @panel-title: @basefontsize;
 @panel-footer: @basefontsize;
 
 // BORDERS
 @border-thickness: 1px;
 @border-thickness-buttons: 1px;
 @border-thickness-tags: 1px;
 @border-radius: 2px;
 @border-default-color: @grey5;
 @border-highlight-color: @grey4;
 
 // SPACING
 @contentpadding: 15px;  //padding on left and right of pages
 @pagepadding: 40px;		//padding on top and bottom of pages
 @menupadding: 12px;		//padding for sidebar and content
 @sidebarpadding: 15px;	//spacing between sections
 @space: 40px;			//spacing between sections
 @padding: 15px;			//padding inside modules
 @textmargin: 20px;		//spacing below headers
 @header-padding: 20px;
 @panel-padding: @padding;
 @gravatar-size: 16px;   // height/width of gravatar w/o border
 
 // ADMIN
 @form-max-width: 750px;
 
 // FORMS (new)
 @border-thickness-inputs: 1px;
 @input-padding: .6em; //needs to match button padding
 // TODO: johbo: Needed for working computation of paddings around labels etc.
 // Expected to be replaced once we are done with the form refactoring.
 @input-padding-px: 12px;
 @legend-width: 220px;
 @form-vertical-margin: 20px;
 @form-check-width: 20px;
 @form-radio-width: 10px;
 @form-textcolor: @grey3;
 
 // FORMS
 @label-width: 220px;
 //TODO: lisa: Eventually we don't need both of these; remove
 //            label-width when legend-width is no longer used
 
 @input-border-thickness: @border-thickness;
 @medium-inline-input-width: 115px;
 @input-description-minwidth: 300px;
 @label2-width: 200px;
 @checkboxes-width: 420px;
 @label-summary-minwidth: 80px;
 @search-form-width: 400px;
 @fields-input-m: 400px;
 @fields-input-l: 720px;
 
 // BUTTONS
 @button-padding: .7em;
 @button-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);
 
 // DROPDOWNS
 @dropdown-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07);
 
 // DEFAULT WIDTHS
 @wrapper-maxwidth: 1600px;
 @sidebar-width: 145px;
 @sidebar-all-width: @sidebar-width + 2 * @sidebarpadding;
 @sidebar-small-width: 100px;
 @sidebar-small-all-width: @sidebar-small-width + 2 * @sidebarpadding;
 @texteditor-width: 660px;
 @maincontent-maxwidth: 940px;
 @pullrequest-width: 1025px;
 @summary-menu-stats-width: 200px;
 
 // SCREEN WIDTHS
 @screen-sm-min: 320px;
 
 // For Bootstrap
 @panel-border-radius: @border-radius;

rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js

@@ -1,205 +1,211 b''
 import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
 import '../channelstream-connection/channelstream-connection.js';
 import '../rhodecode-toast/rhodecode-toast.js';
 import '../rhodecode-favicon/rhodecode-favicon.js';
 
 var ccLog = Logger.get('RhodeCodeApp');
 ccLog.setLevel(Logger.OFF);
 
 export class RhodecodeApp extends PolymerElement {
 
     static get is() {
         return 'rhodecode-app';
     }
 
     static get template(){
         return html`
         <channelstream-connection
                 id="channelstream-connection"
                 on-channelstream-listen-message="receivedMessage"
                 on-channelstream-connected="handleConnected"
                 on-channelstream-subscribed="handleSubscribed">
         </channelstream-connection>
         <rhodecode-favicon></rhodecode-favicon>
         `
     }
 
     connectedCallback() {
         super.connectedCallback();
         ccLog.debug('rhodeCodeApp created');
         $.Topic('/notifications').subscribe(this.handleNotifications.bind(this));
         $.Topic('/comment').subscribe(this.handleComment.bind(this));
         $.Topic('/favicon/update').subscribe(this.faviconUpdate.bind(this));
         $.Topic('/connection_controller/subscribe').subscribe(
             this.subscribeToChannelTopic.bind(this)
         );
 
         // this event can be used to coordinate plugins to do their
         // initialization before channelstream is kicked off
         $.Topic('/__MAIN_APP__').publish({});
 
         for (var i = 0; i < alertMessagePayloads.length; i++) {
             $.Topic('/notifications').publish(alertMessagePayloads[i]);
         }
         this.initPlugins();
         // after rest of application loads and topics get fired, launch connection
         $(document).ready(function () {
             this.kickoffChannelstreamPlugin();
         }.bind(this));
     }
 
     initPlugins() {
         for (var i = 0; i < window.APPLICATION_PLUGINS.length; i++) {
             var pluginDef = window.APPLICATION_PLUGINS[i];
             if (pluginDef.component) {
                 var pluginElem = document.createElement(pluginDef.component);
                 this.shadowRoot.appendChild(pluginElem);
                 if (typeof pluginElem.init !== 'undefined') {
                     pluginElem.init();
                 }
             }
         }
     }
 
     /** proxy to channelstream connection */
     getChannelStreamConnection() {
         return this.$['channelstream-connection'];
     }
 
     handleNotifications(data) {
         var elem = document.getElementById('notifications');
         if (elem) {
             elem.handleNotification(data);
         }
-
     }
 
     handleComment(data) {
-        if (data.message.comment_id) {
+
+        if (data.message.comment_data.length !== 0) {
           if (window.refreshAllComments !== undefined) {
               refreshAllComments()
           }
+          var json_data = data.message.comment_data;
+
+          if (window.commentsController !== undefined) {
+
+            window.commentsController.attachComment(json_data)
+          }
         }
     }
 
     faviconUpdate(data) {
         this.shadowRoot.querySelector('rhodecode-favicon').counter = data.count;
     }
 
     /** opens connection to ws server */
     kickoffChannelstreamPlugin(data) {
         ccLog.debug('kickoffChannelstreamPlugin');
         var channels = ['broadcast'];
         var addChannels = this.checkViewChannels();
         for (var i = 0; i < addChannels.length; i++) {
             channels.push(addChannels[i]);
         }
         if (window.CHANNELSTREAM_SETTINGS && CHANNELSTREAM_SETTINGS.enabled) {
             var channelstreamConnection = this.getChannelStreamConnection();
             channelstreamConnection.connectUrl = CHANNELSTREAM_URLS.connect;
             channelstreamConnection.subscribeUrl = CHANNELSTREAM_URLS.subscribe;
             channelstreamConnection.websocketUrl = CHANNELSTREAM_URLS.ws + '/ws';
             channelstreamConnection.longPollUrl = CHANNELSTREAM_URLS.longpoll + '/listen';
             // some channels might already be registered by topic
             for (var i = 0; i < channels.length; i++) {
                 channelstreamConnection.push('channels', channels[i]);
             }
             // append any additional channels registered in other plugins
             $.Topic('/connection_controller/subscribe').processPrepared();
 
             channelstreamConnection.connect();
         }
     }
 
     checkViewChannels() {
         // subscribe to different channels data is sent.
 
         var channels = [];
         // subscribe to PR repo channel for PR's'
         if (templateContext.pull_request_data.pull_request_id) {
             var channelName = '/repo$' + templateContext.repo_name + '$/pr/' +
                 String(templateContext.pull_request_data.pull_request_id);
             channels.push(channelName);
         }
 
         if (templateContext.commit_data.commit_id) {
             var channelName = '/repo$' + templateContext.repo_name + '$/commit/' +
                 String(templateContext.commit_data.commit_id);
             channels.push(channelName);
         }
 
         return channels;
     }
 
     /** subscribes users from channels in channelstream */
     subscribeToChannelTopic(channels) {
         var channelstreamConnection = this.getChannelStreamConnection();
         var toSubscribe = channelstreamConnection.calculateSubscribe(channels);
         ccLog.debug('subscribeToChannelTopic', toSubscribe);
         if (toSubscribe.length > 0) {
             // if we are connected then subscribe
             if (channelstreamConnection.connected) {
                 channelstreamConnection.subscribe(toSubscribe);
             }
             // not connected? just push channels onto the stack
             else {
                 for (var i = 0; i < toSubscribe.length; i++) {
                     channelstreamConnection.push('channels', toSubscribe[i]);
                 }
             }
         }
     }
 
     /** publish received messages into correct topic */
     receivedMessage(event) {
         for (var i = 0; i < event.detail.length; i++) {
             var message = event.detail[i];
             if (message.message.topic) {
                 ccLog.debug('publishing', message.message.topic);
                 $.Topic(message.message.topic).publish(message);
             }
             else if (message.type === 'presence') {
                 $.Topic('/connection_controller/presence').publish(message);
             }
             else {
                 ccLog.warn('unhandled message', message);
             }
         }
     }
 
     handleConnected(event) {
         var channelstreamConnection = this.getChannelStreamConnection();
         channelstreamConnection.set('channelsState', event.detail.channels_info);
         channelstreamConnection.set('userState', event.detail.state);
         channelstreamConnection.set('channels', event.detail.channels);
         this.propagageChannelsState();
     }
 
     handleSubscribed(event) {
         var channelstreamConnection = this.getChannelStreamConnection();
         var channelInfo = event.detail.channels_info;
         var channelKeys = Object.keys(event.detail.channels_info);
         for (var i = 0; i < channelKeys.length; i++) {
             var key = channelKeys[i];
             channelstreamConnection.set(['channelsState', key], channelInfo[key]);
         }
         channelstreamConnection.set('channels', event.detail.channels);
         this.propagageChannelsState();
     }
 
     /** propagates channel states on topics */
     propagageChannelsState(event) {
         var channelstreamConnection = this.getChannelStreamConnection();
         var channel_data = channelstreamConnection.channelsState;
         var channels = channelstreamConnection.channels;
         for (var i = 0; i < channels.length; i++) {
             var key = channels[i];
             $.Topic('/connection_controller/channel_update').publish(
                 {channel: key, state: channel_data[key]}
             );
         }
     }
 
 }
 
 customElements.define(RhodecodeApp.is, RhodecodeApp);

rhodecode/public/js/src/rhodecode/comments.js

@@ -1,1349 +1,1450 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 firefoxAnchorFix = function() {
   // hack to make anchor links behave properly on firefox, in our inline
   // comments generation when comments are injected firefox is misbehaving
   // when jumping to anchor links
   if (location.href.indexOf('#') > -1) {
     location.href += '';
   }
 };
 
 var linkifyComments = function(comments) {
   var firstCommentId = null;
   if (comments) {
       firstCommentId = $(comments[0]).data('comment-id');
   }
 
   if (firstCommentId){
     $('#inline-comments-counter').attr('href', '#comment-' + firstCommentId);
   }
 };
 
 var bindToggleButtons = function() {
   $('.comment-toggle').on('click', function() {
         $(this).parent().nextUntil('tr.line').toggle('inline-comments');
   });
 };
 
 
 
 var _submitAjaxPOST = function(url, postData, successHandler, failHandler) {
     failHandler = failHandler || function() {};
     postData = toQueryString(postData);
     var request = $.ajax({
         url: url,
         type: 'POST',
         data: postData,
         headers: {'X-PARTIAL-XHR': true}
     })
     .done(function (data) {
         successHandler(data);
     })
     .fail(function (data, textStatus, errorThrown) {
         failHandler(data, textStatus, errorThrown)
     });
     return request;
 };
 
 
 
 
 /* Comment form for main and inline comments */
 (function(mod) {
 
     if (typeof exports == "object" && typeof module == "object") {
         // CommonJS
         module.exports = mod();
     }
     else {
         // Plain browser env
         (this || window).CommentForm = mod();
     }
 
 })(function() {
     "use strict";
 
     function CommentForm(formElement, commitId, pullRequestId, lineNo, initAutocompleteActions, resolvesCommentId, edit, comment_id) {
 
         if (!(this instanceof CommentForm)) {
             return new CommentForm(formElement, commitId, pullRequestId, lineNo, initAutocompleteActions, resolvesCommentId, edit, comment_id);
         }
 
         // bind the element instance to our Form
         $(formElement).get(0).CommentForm = this;
 
         this.withLineNo = function(selector) {
             var lineNo = this.lineNo;
             if (lineNo === undefined) {
                 return selector
             } else {
                 return selector + '_' + lineNo;
             }
         };
 
         this.commitId = commitId;
         this.pullRequestId = pullRequestId;
         this.lineNo = lineNo;
         this.initAutocompleteActions = initAutocompleteActions;
 
         this.previewButton = this.withLineNo('#preview-btn');
         this.previewContainer = this.withLineNo('#preview-container');
 
         this.previewBoxSelector = this.withLineNo('#preview-box');
 
         this.editButton = this.withLineNo('#edit-btn');
         this.editContainer = this.withLineNo('#edit-container');
         this.cancelButton = this.withLineNo('#cancel-btn');
         this.commentType = this.withLineNo('#comment_type');
 
         this.resolvesId = null;
         this.resolvesActionId = null;
 
         this.closesPr = '#close_pull_request';
 
         this.cmBox = this.withLineNo('#text');
         this.cm = initCommentBoxCodeMirror(this, this.cmBox, this.initAutocompleteActions);
 
         this.statusChange = this.withLineNo('#change_status');
 
         this.submitForm = formElement;
 
         this.submitButton = $(this.submitForm).find('.submit-comment-action');
         this.submitButtonText = this.submitButton.val();
 
         this.submitDraftButton = $(this.submitForm).find('.submit-draft-action');
         this.submitDraftButtonText = this.submitDraftButton.val();
 
         this.previewUrl = pyroutes.url('repo_commit_comment_preview',
             {'repo_name': templateContext.repo_name,
              'commit_id': templateContext.commit_data.commit_id});
 
         if (edit){
             this.submitDraftButton.hide();
             this.submitButtonText = _gettext('Update Comment');
             $(this.commentType).prop('disabled', true);
             $(this.commentType).addClass('disabled');
             var editInfo =
                 '';
             $(editInfo).insertBefore($(this.editButton).parent());
         }
 
         if (resolvesCommentId){
             this.resolvesId = '#resolve_comment_{0}'.format(resolvesCommentId);
             this.resolvesActionId = '#resolve_comment_action_{0}'.format(resolvesCommentId);
             $(this.commentType).prop('disabled', true);
             $(this.commentType).addClass('disabled');
 
             // disable select
             setTimeout(function() {
                 $(self.statusChange).select2('readonly', true);
             }, 10);
 
             var resolvedInfo = (
                 '<li class="resolve-action">' +
                 '<input type="hidden" id="resolve_comment_{0}" name="resolve_comment_{0}" value="{0}">' +
                 '<button id="resolve_comment_action_{0}" class="resolve-text btn btn-sm" onclick="return Rhodecode.comments.submitResolution({0})">{1} #{0}</button>' +
                 '</li>'
             ).format(resolvesCommentId, _gettext('resolve comment'));
             $(resolvedInfo).insertAfter($(this.commentType).parent());
         }
 
         // based on commitId, or pullRequestId decide where do we submit
         // out data
         if (this.commitId){
             var pyurl = 'repo_commit_comment_create';
             if(edit){
                 pyurl = 'repo_commit_comment_edit';
             }
             this.submitUrl = pyroutes.url(pyurl,
                 {'repo_name': templateContext.repo_name,
                  'commit_id': this.commitId,
                  'comment_id': comment_id});
             this.selfUrl = pyroutes.url('repo_commit',
                 {'repo_name': templateContext.repo_name,
                  'commit_id': this.commitId});
 
         } else if (this.pullRequestId) {
             var pyurl = 'pullrequest_comment_create';
             if(edit){
                 pyurl = 'pullrequest_comment_edit';
             }
             this.submitUrl = pyroutes.url(pyurl,
                 {'repo_name': templateContext.repo_name,
                  'pull_request_id': this.pullRequestId,
                  'comment_id': comment_id});
             this.selfUrl = pyroutes.url('pullrequest_show',
                 {'repo_name': templateContext.repo_name,
                  'pull_request_id': this.pullRequestId});
 
         } else {
             throw new Error(
                 'CommentForm requires pullRequestId, or commitId to be specified.')
         }
 
         // FUNCTIONS and helpers
         var self = this;
 
         this.isInline = function(){
             return this.lineNo && this.lineNo != 'general';
         };
 
         this.getCmInstance = function(){
             return this.cm
         };
 
         this.setPlaceholder = function(placeholder) {
             var cm = this.getCmInstance();
             if (cm){
                 cm.setOption('placeholder', placeholder);
             }
         };
 
         this.getCommentStatus = function() {
           return $(this.submitForm).find(this.statusChange).val();
         };
 
         this.getCommentType = function() {
           return $(this.submitForm).find(this.commentType).val();
         };
 
         this.getDraftState = function () {
             var submitterElem = $(this.submitForm).find('input[type="submit"].submitter');
             var data = $(submitterElem).data('isDraft');
             return data
         }
 
         this.getResolvesId = function() {
             return $(this.submitForm).find(this.resolvesId).val() || null;
         };
 
         this.getClosePr = function() {
             return $(this.submitForm).find(this.closesPr).val() || null;
         };
 
         this.markCommentResolved = function(resolvedCommentId){
             $('#comment-label-{0}'.format(resolvedCommentId)).find('.resolved').show();
             $('#comment-label-{0}'.format(resolvedCommentId)).find('.resolve').hide();
         };
 
         this.isAllowedToSubmit = function() {
             var commentDisabled = $(this.submitButton).prop('disabled');
             var draftDisabled = $(this.submitDraftButton).prop('disabled');
             return !commentDisabled && !draftDisabled;
         };
 
         this.initStatusChangeSelector = function(){
             var formatChangeStatus = function(state, escapeMarkup) {
                 var originalOption = state.element;
                 var tmpl = '<i class="icon-circle review-status-{0}"></i><span>{1}</span>'.format($(originalOption).data('status'), escapeMarkup(state.text));
                 return tmpl
             };
             var formatResult = function(result, container, query, escapeMarkup) {
                 return formatChangeStatus(result, escapeMarkup);
             };
 
             var formatSelection = function(data, container, escapeMarkup) {
                 return formatChangeStatus(data, escapeMarkup);
             };
 
             $(this.submitForm).find(this.statusChange).select2({
                 placeholder: _gettext('Status Review'),
                 formatResult: formatResult,
                 formatSelection: formatSelection,
                 containerCssClass: "drop-menu status_box_menu",
                 dropdownCssClass: "drop-menu-dropdown",
                 dropdownAutoWidth: true,
                 minimumResultsForSearch: -1
             });
 
             $(this.submitForm).find(this.statusChange).on('change', function() {
                 var status = self.getCommentStatus();
 
                 if (status && !self.isInline()) {
                     $(self.submitButton).prop('disabled', false);
                     $(self.submitDraftButton).prop('disabled', false);
                 }
 
                 var placeholderText = _gettext('Comment text will be set automatically based on currently selected status ({0}) ...').format(status);
                 self.setPlaceholder(placeholderText)
             })
         };
 
         // reset the comment form into it's original state
         this.resetCommentFormState = function(content) {
             content = content || '';
 
             $(this.editContainer).show();
             $(this.editButton).parent().addClass('active');
 
             $(this.previewContainer).hide();
             $(this.previewButton).parent().removeClass('active');
 
             this.setActionButtonsDisabled(true);
             self.cm.setValue(content);
             self.cm.setOption("readOnly", false);
 
             if (this.resolvesId) {
                 // destroy the resolve action
                 $(this.resolvesId).parent().remove();
             }
             // reset closingPR flag
             $('.close-pr-input').remove();
 
             $(this.statusChange).select2('readonly', false);
         };
 
         this.globalSubmitSuccessCallback = function(comment){
             // default behaviour is to call GLOBAL hook, if it's registered.
             if (window.commentFormGlobalSubmitSuccessCallback !== undefined){
                 commentFormGlobalSubmitSuccessCallback(comment);
             }
         };
 
         this.submitAjaxPOST = function(url, postData, successHandler, failHandler) {
             return _submitAjaxPOST(url, postData, successHandler, failHandler);
         };
 
         // overwrite a submitHandler, we need to do it for inline comments
         this.setHandleFormSubmit = function(callback) {
             this.handleFormSubmit = callback;
         };
 
         // overwrite a submitSuccessHandler
         this.setGlobalSubmitSuccessCallback = function(callback) {
             this.globalSubmitSuccessCallback = callback;
         };
 
         // default handler for for submit for main comments
         this.handleFormSubmit = function() {
             var text = self.cm.getValue();
             var status = self.getCommentStatus();
             var commentType = self.getCommentType();
             var isDraft = self.getDraftState();
             var resolvesCommentId = self.getResolvesId();
             var closePullRequest = self.getClosePr();
 
             if (text === "" && !status) {
                 return;
             }
 
             var excludeCancelBtn = false;
             var submitEvent = true;
             self.setActionButtonsDisabled(true, excludeCancelBtn, submitEvent);
             self.cm.setOption("readOnly", true);
 
             var postData = {
                 'text': text,
                 'changeset_status': status,
                 'comment_type': commentType,
                 'csrf_token': CSRF_TOKEN
             };
 
             if (resolvesCommentId) {
                 postData['resolves_comment_id'] = resolvesCommentId;
             }
 
             if (closePullRequest) {
                 postData['close_pull_request'] = true;
             }
 
-            var submitSuccessCallback = function(o) {
+            // submitSuccess for general comments
+            var submitSuccessCallback = function(json_data) {
                 // reload page if we change status for single commit.
                 if (status && self.commitId) {
                     location.reload(true);
                 } else {
-                    $('#injected_page_comments').append(o.rendered_text);
+                    // inject newly created comments, json_data is {<comment_id>: {}}
+                    self.attachGeneralComment(json_data)
+
                     self.resetCommentFormState();
                     timeagoActivate();
                     tooltipActivate();
 
                     // mark visually which comment was resolved
                     if (resolvesCommentId) {
                         self.markCommentResolved(resolvesCommentId);
                     }
                 }
 
                 // run global callback on submit
                 self.globalSubmitSuccessCallback({draft: isDraft, comment_id: comment_id});
 
             };
             var submitFailCallback = function(jqXHR, textStatus, errorThrown) {
                 var prefix = "Error while submitting comment.\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
                 self.resetCommentFormState(text);
             };
             self.submitAjaxPOST(
                 self.submitUrl, postData, submitSuccessCallback, submitFailCallback);
         };
 
         this.previewSuccessCallback = function(o) {
             $(self.previewBoxSelector).html(o);
             $(self.previewBoxSelector).removeClass('unloaded');
 
             // swap buttons, making preview active
             $(self.previewButton).parent().addClass('active');
             $(self.editButton).parent().removeClass('active');
 
             // unlock buttons
             self.setActionButtonsDisabled(false);
         };
 
         this.setActionButtonsDisabled = function(state, excludeCancelBtn, submitEvent) {
             excludeCancelBtn = excludeCancelBtn || false;
             submitEvent = submitEvent || false;
 
             $(this.editButton).prop('disabled', state);
             $(this.previewButton).prop('disabled', state);
 
             if (!excludeCancelBtn) {
                 $(this.cancelButton).prop('disabled', state);
             }
 
             var submitState = state;
             if (!submitEvent && this.getCommentStatus() && !self.isInline()) {
                 // if the value of commit review status is set, we allow
                 // submit button, but only on Main form, isInline means inline
                 submitState = false
             }
 
             $(this.submitButton).prop('disabled', submitState);
             $(this.submitDraftButton).prop('disabled', submitState);
 
             if (submitEvent) {
               var isDraft = self.getDraftState();
 
               if (isDraft) {
                 $(this.submitDraftButton).val(_gettext('Saving Draft...'));
               }  else {
                 $(this.submitButton).val(_gettext('Submitting...'));
               }
 
             } else {
               $(this.submitButton).val(this.submitButtonText);
               $(this.submitDraftButton).val(this.submitDraftButtonText);
             }
 
         };
 
         // lock preview/edit/submit buttons on load, but exclude cancel button
         var excludeCancelBtn = true;
         this.setActionButtonsDisabled(true, excludeCancelBtn);
 
         // anonymous users don't have access to initialized CM instance
         if (this.cm !== undefined){
             this.cm.on('change', function(cMirror) {
                 if (cMirror.getValue() === "") {
                     self.setActionButtonsDisabled(true, excludeCancelBtn)
                 } else {
                     self.setActionButtonsDisabled(false, excludeCancelBtn)
                 }
             });
         }
 
         $(this.editButton).on('click', function(e) {
             e.preventDefault();
 
             $(self.previewButton).parent().removeClass('active');
             $(self.previewContainer).hide();
 
             $(self.editButton).parent().addClass('active');
             $(self.editContainer).show();
 
         });
 
         $(this.previewButton).on('click', function(e) {
             e.preventDefault();
             var text = self.cm.getValue();
 
             if (text === "") {
                 return;
             }
 
             var postData = {
                 'text': text,
                 'renderer': templateContext.visual.default_renderer,
                 'csrf_token': CSRF_TOKEN
             };
 
             // lock ALL buttons on preview
             self.setActionButtonsDisabled(true);
 
             $(self.previewBoxSelector).addClass('unloaded');
             $(self.previewBoxSelector).html(_gettext('Loading ...'));
 
             $(self.editContainer).hide();
             $(self.previewContainer).show();
 
             // by default we reset state of comment preserving the text
             var previewFailCallback = function(jqXHR, textStatus, errorThrown) {
                 var prefix = "Error while preview of comment.\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
 
                 self.resetCommentFormState(text)
             };
             self.submitAjaxPOST(
                 self.previewUrl, postData, self.previewSuccessCallback,
                 previewFailCallback);
 
             $(self.previewButton).parent().addClass('active');
             $(self.editButton).parent().removeClass('active');
         });
 
         $(this.submitForm).submit(function(e) {
             e.preventDefault();
             var allowedToSubmit = self.isAllowedToSubmit();
             if (!allowedToSubmit){
                return false;
             }
 
             self.handleFormSubmit();
         });
 
     }
 
     return CommentForm;
 });
 
 /* selector for comment versions */
 var initVersionSelector = function(selector, initialData) {
 
     var formatResult = function(result, container, query, escapeMarkup) {
 
         return renderTemplate('commentVersion', {
             show_disabled: true,
             version: result.comment_version,
             user_name: result.comment_author_username,
             gravatar_url: result.comment_author_gravatar,
             size: 16,
             timeago_component: result.comment_created_on,
         })
     };
 
     $(selector).select2({
         placeholder: "Edited",
         containerCssClass: "drop-menu-comment-history",
         dropdownCssClass: "drop-menu-dropdown",
         dropdownAutoWidth: true,
         minimumResultsForSearch: -1,
         data: initialData,
         formatResult: formatResult,
     });
 
     $(selector).on('select2-selecting', function (e) {
         // hide the mast as we later do preventDefault()
         $("#select2-drop-mask").click();
         e.preventDefault();
         e.choice.action();
     });
 
     $(selector).on("select2-open", function() {
         timeagoActivate();
     });
 };
 
 /* comments controller */
 var CommentsController = function() {
   var mainComment = '#text';
   var self = this;
 
-  this.cancelComment = function (node) {
-      var $node = $(node);
-      var edit = $(this).attr('edit');
-      if (edit) {
-          var $general_comments = null;
-          var $inline_comments = $node.closest('div.inline-comments');
-          if (!$inline_comments.length) {
-              $general_comments = $('#comments');
-              var $comment = $general_comments.parent().find('div.comment:hidden');
-              // show hidden general comment form
-              $('#cb-comment-general-form-placeholder').show();
-          } else {
-              var $comment = $inline_comments.find('div.comment:hidden');
-          }
-          $comment.show();
-      }
-      $node.closest('.comment-inline-form').remove();
-      return false;
-  };
-
   this.showVersion = function (comment_id, comment_history_id) {
 
        var historyViewUrl = pyroutes.url(
            'repo_commit_comment_history_view',
            {
                'repo_name': templateContext.repo_name,
                'commit_id': comment_id,
                'comment_history_id': comment_history_id,
            }
        );
        successRenderCommit = function (data) {
            SwalNoAnimation.fire({
                html: data,
                title: '',
            });
        };
        failRenderCommit = function () {
            SwalNoAnimation.fire({
                html: 'Error while loading comment history',
                title: '',
            });
        };
        _submitAjaxPOST(
            historyViewUrl, {'csrf_token': CSRF_TOKEN},
            successRenderCommit,
            failRenderCommit
        );
   };
 
   this.getLineNumber = function(node) {
       var $node = $(node);
       var lineNo = $node.closest('td').attr('data-line-no');
       if (lineNo === undefined && $node.data('commentInline')){
           lineNo = $node.data('commentLineNo')
       }
 
       return lineNo
   };
 
   this.scrollToComment = function(node, offset, outdated) {
     if (offset === undefined) {
       offset = 0;
     }
     var outdated = outdated || false;
     var klass = outdated ? 'div.comment-outdated' : 'div.comment-current';
 
     if (!node) {
       node = $('.comment-selected');
       if (!node.length) {
         node = $('comment-current')
       }
     }
 
     $wrapper = $(node).closest('div.comment');
 
     // show hidden comment when referenced.
     if (!$wrapper.is(':visible')){
         $wrapper.show();
     }
 
     $comment = $(node).closest(klass);
     $comments = $(klass);
 
     $('.comment-selected').removeClass('comment-selected');
 
     var nextIdx = $(klass).index($comment) + offset;
     if (nextIdx >= $comments.length) {
       nextIdx = 0;
     }
     var $next = $(klass).eq(nextIdx);
 
     var $cb = $next.closest('.cb');
     $cb.removeClass('cb-collapsed');
 
     var $filediffCollapseState = $cb.closest('.filediff').prev();
     $filediffCollapseState.prop('checked', false);
     $next.addClass('comment-selected');
     scrollToElement($next);
     return false;
   };
 
   this.nextComment = function(node) {
     return self.scrollToComment(node, 1);
   };
 
   this.prevComment = function(node) {
     return self.scrollToComment(node, -1);
   };
 
   this.nextOutdatedComment = function(node) {
     return self.scrollToComment(node, 1, true);
   };
 
   this.prevOutdatedComment = function(node) {
     return self.scrollToComment(node, -1, true);
   };
 
+  this.cancelComment = function (node) {
+      var $node = $(node);
+      var edit = $(this).attr('edit');
+      var $inlineComments = $node.closest('div.inline-comments');
+
+      if (edit) {
+          var $general_comments = null;
+          if (!$inlineComments.length) {
+              $general_comments = $('#comments');
+              var $comment = $general_comments.parent().find('div.comment:hidden');
+              // show hidden general comment form
+              $('#cb-comment-general-form-placeholder').show();
+          } else {
+              var $comment = $inlineComments.find('div.comment:hidden');
+          }
+          $comment.show();
+      }
+      var $replyWrapper = $node.closest('.comment-inline-form').closest('.reply-thread-container-wrapper')
+      $replyWrapper.removeClass('comment-form-active');
+
+      var lastComment = $inlineComments.find('.comment-inline').last();
+      if ($(lastComment).hasClass('comment-outdated')) {
+        $replyWrapper.hide();
+      }
+
+      $node.closest('.comment-inline-form').remove();
+      return false;
+  };
+
   this._deleteComment = function(node) {
       var $node = $(node);
       var $td = $node.closest('td');
       var $comment = $node.closest('.comment');
       var comment_id = $($comment).data('commentId');
       var isDraft = $($comment).data('commentDraft');
       var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__', comment_id);
       var postData = {
         'csrf_token': CSRF_TOKEN
       };
 
       $comment.addClass('comment-deleting');
       $comment.hide('fast');
 
       var success = function(response) {
         $comment.remove();
 
         if (window.updateSticky !== undefined) {
             // potentially our comments change the active window size, so we
             // notify sticky elements
             updateSticky()
         }
 
         if (window.refreshAllComments !== undefined && !isDraft) {
           // if we have this handler, run it, and refresh all comments boxes
           refreshAllComments()
         }
         return false;
       };
 
       var failure = function(jqXHR, textStatus, errorThrown) {
         var prefix = "Error while deleting this comment.\n"
         var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
         ajaxErrorSwal(message);
 
         $comment.show('fast');
         $comment.removeClass('comment-deleting');
         return false;
       };
       ajaxPOST(url, postData, success, failure);
 
 
 
   }
 
   this.deleteComment = function(node) {
     var $comment = $(node).closest('.comment');
     var comment_id = $comment.attr('data-comment-id');
 
     SwalNoAnimation.fire({
       title: 'Delete this comment?',
       icon: 'warning',
       showCancelButton: true,
       confirmButtonText: _gettext('Yes, delete comment #{0}!').format(comment_id),
 
     }).then(function(result) {
       if (result.value) {
         self._deleteComment(node);
       }
     })
   };
 
   this._finalizeDrafts = function(commentIds) {
     window.finalizeDrafts(commentIds)
   }
 
   this.finalizeDrafts = function(commentIds) {
 
     SwalNoAnimation.fire({
-      title: _ngettext('Submit {0} draft comment', 'Submit {0} draft comments', commentIds.length).format(commentIds.length),
+      title: _ngettext('Submit {0} draft comment.', 'Submit {0} draft comments.', commentIds.length).format(commentIds.length),
       icon: 'warning',
       showCancelButton: true,
       confirmButtonText: _gettext('Yes, finalize drafts'),
 
     }).then(function(result) {
       if (result.value) {
         self._finalizeDrafts(commentIds);
       }
     })
   };
 
   this.toggleWideMode = function (node) {
+
       if ($('#content').hasClass('wrapper')) {
           $('#content').removeClass("wrapper");
           $('#content').addClass("wide-mode-wrapper");
           $(node).addClass('btn-success');
           return true
       } else {
           $('#content').removeClass("wide-mode-wrapper");
           $('#content').addClass("wrapper");
           $(node).removeClass('btn-success');
           return false
       }
 
   };
 
-  this.toggleComments = function(node, show) {
+  /**
+   * Turn off/on all comments in file diff
+   */
+  this.toggleDiffComments = function(node) {
+    // Find closes filediff container
     var $filediff = $(node).closest('.filediff');
+    if ($(node).hasClass('toggle-on')) {
+        var show = false;
+    } else if ($(node).hasClass('toggle-off')) {
+        var show = true;
+    }
+
+    // Toggle each individual comment block, so we can un-toggle single ones
+    $.each($filediff.find('.toggle-comment-action'), function(idx, val) {
+        self.toggleLineComments($(val), show)
+    })
+
+    // since we change the height of the diff container that has anchor points for upper
+    // sticky header, we need to tell it to re-calculate those
+    if (window.updateSticky !== undefined) {
+        // potentially our comments change the active window size, so we
+        // notify sticky elements
+        updateSticky()
+    }
+
+    return false;
+  }
+
+  this.toggleLineComments = function(node, show) {
+
+    var trElem = $(node).closest('tr')
+
     if (show === true) {
-      $filediff.removeClass('hide-comments');
+        // mark outdated comments as visible before the toggle;
+        $(trElem).find('.comment-outdated').show();
+        $(trElem).removeClass('hide-line-comments');
     } else if (show === false) {
-      $filediff.find('.hide-line-comments').removeClass('hide-line-comments');
-      $filediff.addClass('hide-comments');
+        $(trElem).find('.comment-outdated').hide();
+        $(trElem).addClass('hide-line-comments');
     } else {
-      $filediff.find('.hide-line-comments').removeClass('hide-line-comments');
-      $filediff.toggleClass('hide-comments');
+        // mark outdated comments as visible before the toggle;
+        $(trElem).find('.comment-outdated').show();
+        $(trElem).toggleClass('hide-line-comments');
     }
 
     // since we change the height of the diff container that has anchor points for upper
     // sticky header, we need to tell it to re-calculate those
     if (window.updateSticky !== undefined) {
         // potentially our comments change the active window size, so we
         // notify sticky elements
         updateSticky()
     }
 
-    return false;
-  };
-
-  this.toggleLineComments = function(node) {
-    self.toggleComments(node, true);
-    var $node = $(node);
-    // mark outdated comments as visible before the toggle;
-    $(node.closest('tr')).find('.comment-outdated').show();
-    $node.closest('tr').toggleClass('hide-line-comments');
   };
 
   this.createCommentForm = function(formElement, lineno, placeholderText, initAutocompleteActions, resolvesCommentId, edit, comment_id){
       var pullRequestId = templateContext.pull_request_data.pull_request_id;
       var commitId = templateContext.commit_data.commit_id;
 
       var commentForm = new CommentForm(
           formElement, commitId, pullRequestId, lineno, initAutocompleteActions, resolvesCommentId, edit, comment_id);
       var cm = commentForm.getCmInstance();
 
       if (resolvesCommentId){
         placeholderText = _gettext('Leave a resolution comment, or click resolve button to resolve TODO comment #{0}').format(resolvesCommentId);
       }
 
       setTimeout(function() {
           // callbacks
           if (cm !== undefined) {
               commentForm.setPlaceholder(placeholderText);
               if (commentForm.isInline()) {
                 cm.focus();
                 cm.refresh();
               }
           }
       }, 10);
 
       // trigger scrolldown to the resolve comment, since it might be away
       // from the clicked
       if (resolvesCommentId){
         var actionNode = $(commentForm.resolvesActionId).offset();
 
         setTimeout(function() {
             if (actionNode) {
                 $('body, html').animate({scrollTop: actionNode.top}, 10);
             }
         }, 100);
       }
 
         // add dropzone support
         var insertAttachmentText = function (cm, attachmentName, attachmentStoreUrl, isRendered) {
             var renderer = templateContext.visual.default_renderer;
             if (renderer == 'rst') {
                 var attachmentUrl = '`#{0} <{1}>`_'.format(attachmentName, attachmentStoreUrl);
                 if (isRendered){
                     attachmentUrl = '\n.. image:: {0}'.format(attachmentStoreUrl);
                 }
             } else if (renderer == 'markdown') {
                 var attachmentUrl = '[{0}]({1})'.format(attachmentName, attachmentStoreUrl);
                 if (isRendered){
                     attachmentUrl = '!' + attachmentUrl;
                 }
             } else {
                 var attachmentUrl = '{}'.format(attachmentStoreUrl);
             }
             cm.replaceRange(attachmentUrl+'\n', CodeMirror.Pos(cm.lastLine()));
 
             return false;
         };
 
         //see: https://www.dropzonejs.com/#configuration
         var storeUrl = pyroutes.url('repo_commit_comment_attachment_upload',
             {'repo_name': templateContext.repo_name,
                      'commit_id': templateContext.commit_data.commit_id})
 
         var previewTmpl = $(formElement).find('.comment-attachment-uploader-template').get(0);
         if (previewTmpl !== undefined){
             var selectLink = $(formElement).find('.pick-attachment').get(0);
             $(formElement).find('.comment-attachment-uploader').dropzone({
                 url: storeUrl,
                 headers: {"X-CSRF-Token": CSRF_TOKEN},
                 paramName: function () {
                     return "attachment"
                 }, // The name that will be used to transfer the file
                 clickable: selectLink,
                 parallelUploads: 1,
                 maxFiles: 10,
                 maxFilesize: templateContext.attachment_store.max_file_size_mb,
                 uploadMultiple: false,
                 autoProcessQueue: true, // if false queue will not be processed automatically.
                 createImageThumbnails: false,
                 previewTemplate: previewTmpl.innerHTML,
 
                 accept: function (file, done) {
                     done();
                 },
                 init: function () {
 
                     this.on("sending", function (file, xhr, formData) {
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-text').hide();
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-upload').show();
                     });
 
                     this.on("success", function (file, response) {
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-text').show();
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-upload').hide();
 
                         var isRendered = false;
                         var ext = file.name.split('.').pop();
                         var imageExts = templateContext.attachment_store.image_ext;
                         if (imageExts.indexOf(ext) !== -1){
                             isRendered = true;
                         }
 
                         insertAttachmentText(cm, file.name, response.repo_fqn_access_path, isRendered)
                     });
 
                     this.on("error", function (file, errorMessage, xhr) {
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-upload').hide();
 
                         var error = null;
 
                         if (xhr !== undefined){
                             var httpStatus = xhr.status + " " + xhr.statusText;
                             if (xhr !== undefined && xhr.status >= 500) {
                                 error = httpStatus;
                             }
                         }
 
                         if (error === null) {
                             error = errorMessage.error || errorMessage || httpStatus;
                         }
                         $(file.previewElement).find('.dz-error-message').html('ERROR: {0}'.format(error));
 
                     });
                 }
             });
         }
       return commentForm;
   };
 
   this.createGeneralComment = function (lineNo, placeholderText, resolvesCommentId) {
 
       var tmpl = $('#cb-comment-general-form-template').html();
       tmpl = tmpl.format(null, 'general');
       var $form = $(tmpl);
 
       var $formPlaceholder = $('#cb-comment-general-form-placeholder');
       var curForm = $formPlaceholder.find('form');
       if (curForm){
           curForm.remove();
       }
       $formPlaceholder.append($form);
 
       var _form = $($form[0]);
       var autocompleteActions = ['approve', 'reject', 'as_note', 'as_todo'];
       var edit = false;
       var comment_id = null;
       var commentForm = this.createCommentForm(
           _form, lineNo, placeholderText, autocompleteActions, resolvesCommentId, edit, comment_id);
       commentForm.initStatusChangeSelector();
 
       return commentForm;
   };
 
-  this.editComment = function(node) {
+  this.editComment = function(node, line_no, f_path) {
+      self.edit = true;
       var $node = $(node);
+      var $td = $node.closest('td');
+
       var $comment = $(node).closest('.comment');
       var comment_id = $($comment).data('commentId');
       var isDraft = $($comment).data('commentDraft');
-      var $form = null
+      var $editForm = null
 
       var $comments = $node.closest('div.inline-comments');
       var $general_comments = null;
-      var lineno = null;
 
       if($comments.length){
           // inline comments setup
-          $form = $comments.find('.comment-inline-form');
-          lineno = self.getLineNumber(node)
+          $editForm = $comments.find('.comment-inline-form');
+          line_no = self.getLineNumber(node)
       }
       else{
           // general comments setup
           $comments = $('#comments');
-          $form = $comments.find('.comment-inline-form');
-          lineno = $comment[0].id
+          $editForm = $comments.find('.comment-inline-form');
+          line_no = $comment[0].id
           $('#cb-comment-general-form-placeholder').hide();
       }
 
-      this.edit = true;
+      if ($editForm.length === 0) {
 
-      if (!$form.length) {
-
+          // unhide all comments if they are hidden for a proper REPLY mode
           var $filediff = $node.closest('.filediff');
           $filediff.removeClass('hide-comments');
-          var f_path = $filediff.attr('data-f-path');
-
-          // create a new HTML from template
 
-          var tmpl = $('#cb-comment-inline-form-template').html();
-          tmpl = tmpl.format(escapeHtml(f_path), lineno);
-          $form = $(tmpl);
-          $comment.after($form)
+          $editForm = self.createNewFormWrapper(f_path, line_no);
+          if(f_path && line_no) {
+            $editForm.addClass('comment-inline-form-edit')
+          }
 
-          var _form = $($form[0]).find('form');
+          $comment.after($editForm)
+
+          var _form = $($editForm[0]).find('form');
           var autocompleteActions = ['as_note',];
           var commentForm = this.createCommentForm(
-              _form, lineno, '', autocompleteActions, resolvesCommentId,
+              _form, line_no, '', autocompleteActions, resolvesCommentId,
               this.edit, comment_id);
           var old_comment_text_binary = $comment.attr('data-comment-text');
           var old_comment_text = b64DecodeUnicode(old_comment_text_binary);
           commentForm.cm.setValue(old_comment_text);
           $comment.hide();
+          tooltipActivate();
 
-           $.Topic('/ui/plugins/code/comment_form_built').prepareOrPublish({
-               form: _form,
-               parent: $comments,
-               lineno: lineno,
-               f_path: f_path}
-           );
-
-           // set a CUSTOM submit handler for inline comments.
-            commentForm.setHandleFormSubmit(function(o) {
+           // set a CUSTOM submit handler for inline comment edit action.
+           commentForm.setHandleFormSubmit(function(o) {
               var text = commentForm.cm.getValue();
               var commentType = commentForm.getCommentType();
 
               if (text === "") {
                 return;
               }
 
               if (old_comment_text == text) {
                   SwalNoAnimation.fire({
                       title: 'Unable to edit comment',
                       html: _gettext('Comment body was not changed.'),
                   });
                   return;
               }
               var excludeCancelBtn = false;
               var submitEvent = true;
               commentForm.setActionButtonsDisabled(true, excludeCancelBtn, submitEvent);
               commentForm.cm.setOption("readOnly", true);
 
               // Read last version known
               var versionSelector = $('#comment_versions_{0}'.format(comment_id));
               var version = versionSelector.data('lastVersion');
 
               if (!version) {
                 version = 0;
               }
 
               var postData = {
                   'text': text,
                   'f_path': f_path,
-                  'line': lineno,
+                  'line': line_no,
                   'comment_type': commentType,
                   'draft': isDraft,
                   'version': version,
                   'csrf_token': CSRF_TOKEN
               };
 
               var submitSuccessCallback = function(json_data) {
-                $form.remove();
+                $editForm.remove();
                 $comment.show();
                 var postData = {
                     'text': text,
                     'renderer': $comment.attr('data-comment-renderer'),
                     'csrf_token': CSRF_TOKEN
                 };
 
                 /* Inject new edited version selector */
                 var updateCommentVersionDropDown = function () {
                     var versionSelectId = '#comment_versions_'+comment_id;
                     var preLoadVersionData = [
                         {
                             id: json_data['comment_version'],
                             text: "v{0}".format(json_data['comment_version']),
                             action: function () {
                                 Rhodecode.comments.showVersion(
                                     json_data['comment_id'],
                                     json_data['comment_history_id']
                                 )
                             },
                             comment_version: json_data['comment_version'],
                             comment_author_username: json_data['comment_author_username'],
                             comment_author_gravatar: json_data['comment_author_gravatar'],
                             comment_created_on: json_data['comment_created_on'],
                         },
                     ]
 
 
                     if ($(versionSelectId).data('select2')) {
                         var oldData = $(versionSelectId).data('select2').opts.data.results;
                         $(versionSelectId).select2("destroy");
                         preLoadVersionData = oldData.concat(preLoadVersionData)
                     }
 
                     initVersionSelector(versionSelectId, {results: preLoadVersionData});
 
                     $comment.attr('data-comment-text', utf8ToB64(text));
 
                     var versionSelector = $('#comment_versions_'+comment_id);
 
                     // set lastVersion so we know our last edit version
                     versionSelector.data('lastVersion', json_data['comment_version'])
                     versionSelector.parent().show();
                 }
                 updateCommentVersionDropDown();
 
                 // by default we reset state of comment preserving the text
                 var failRenderCommit = function(jqXHR, textStatus, errorThrown) {
                     var prefix = "Error while editing this comment.\n"
                     var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                     ajaxErrorSwal(message);
                 };
 
                 var successRenderCommit = function(o){
                     $comment.show();
                     $comment[0].lastElementChild.innerHTML = o;
                 };
 
                 var previewUrl = pyroutes.url(
                     'repo_commit_comment_preview',
              {'repo_name': templateContext.repo_name,
                     'commit_id': templateContext.commit_data.commit_id});
 
                 _submitAjaxPOST(
-                    previewUrl, postData, successRenderCommit,
-                    failRenderCommit
+                    previewUrl, postData, successRenderCommit, failRenderCommit
                 );
 
                 try {
                   var html = json_data.rendered_text;
                   var lineno = json_data.line_no;
                   var target_id = json_data.target_id;
 
                   $comments.find('.cb-comment-add-button').before(html);
 
                  //  run global callback on submit
                   commentForm.globalSubmitSuccessCallback({draft: isDraft, comment_id: comment_id});
 
                 } catch (e) {
                   console.error(e);
                 }
 
                 // re trigger the linkification of next/prev navigation
                 linkifyComments($('.inline-comment-injected'));
                 timeagoActivate();
                 tooltipActivate();
 
                 if (window.updateSticky !== undefined) {
                     // potentially our comments change the active window size, so we
                     // notify sticky elements
                     updateSticky()
                 }
 
                 if (window.refreshAllComments !== undefined && !isDraft) {
                       // if we have this handler, run it, and refresh all comments boxes
                       refreshAllComments()
                 }
 
                 commentForm.setActionButtonsDisabled(false);
 
               };
 
               var submitFailCallback = function(jqXHR, textStatus, errorThrown) {
                   var prefix = "Error while editing comment.\n"
                   var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                   if (jqXHR.status == 409){
                     message = 'This comment was probably changed somewhere else. Please reload the content of this comment.'
                     ajaxErrorSwal(message, 'Comment version mismatch.');
                   } else {
                     ajaxErrorSwal(message);
                   }
 
                   commentForm.resetCommentFormState(text)
               };
               commentForm.submitAjaxPOST(
                   commentForm.submitUrl, postData,
                   submitSuccessCallback,
                   submitFailCallback);
             });
       }
 
-      $form.addClass('comment-inline-form-open');
+      $editForm.addClass('comment-inline-form-open');
   };
 
-  this.createComment = function(node, resolutionComment) {
-      var resolvesCommentId = resolutionComment || null;
+  this.attachComment = function(json_data) {
+    var self = this;
+    $.each(json_data, function(idx, val) {
+        var json_data_elem = [val]
+        var isInline = val.comment_f_path && val.comment_lineno
+
+        if (isInline) {
+            self.attachInlineComment(json_data_elem)
+        }  else {
+            self.attachGeneralComment(json_data_elem)
+        }
+    })
+
+  }
+
+  this.attachGeneralComment = function(json_data) {
+    $.each(json_data, function(idx, val) {
+        $('#injected_page_comments').append(val.rendered_text);
+    })
+  }
+
+  this.attachInlineComment = function(json_data) {
+
+    $.each(json_data, function (idx, val) {
+        var line_qry = '*[data-line-no="{0}"]'.format(val.line_no);
+        var html = val.rendered_text;
+        var $inlineComments = $('#' + val.target_id)
+                .find(line_qry)
+                .find('.inline-comments');
+
+        var lastComment = $inlineComments.find('.comment-inline').last();
+
+        if (lastComment.length === 0) {
+            // first comment, we append simply
+            $inlineComments.find('.reply-thread-container-wrapper').before(html);
+        } else {
+            $(lastComment).after(html)
+        }
+
+    })
+
+  };
+
+  this.createNewFormWrapper = function(f_path, line_no) {
+      // create a new reply HTML form from template
+      var tmpl = $('#cb-comment-inline-form-template').html();
+      tmpl = tmpl.format(escapeHtml(f_path), line_no);
+      return $(tmpl);
+  }
+
+  this.createComment = function(node, f_path, line_no, resolutionComment) {
+      self.edit = false;
       var $node = $(node);
       var $td = $node.closest('td');
-      var $form = $td.find('.comment-inline-form');
-      this.edit = false;
+      var resolvesCommentId = resolutionComment || null;
 
-      if (!$form.length) {
+      var $replyForm = $td.find('.comment-inline-form');
 
-          var $filediff = $node.closest('.filediff');
-          $filediff.removeClass('hide-comments');
-          var f_path = $filediff.attr('data-f-path');
-          var lineno = self.getLineNumber(node);
-          // create a new HTML from template
-          var tmpl = $('#cb-comment-inline-form-template').html();
-          tmpl = tmpl.format(escapeHtml(f_path), lineno);
-          $form = $(tmpl);
+      // if form isn't existing, we're generating a new one and injecting it.
+      if ($replyForm.length === 0) {
+
+          // unhide/expand all comments if they are hidden for a proper REPLY mode
+          self.toggleLineComments($node, true);
+
+          $replyForm = self.createNewFormWrapper(f_path, line_no);
 
           var $comments = $td.find('.inline-comments');
-          if (!$comments.length) {
-            $comments = $(
-              $('#cb-comments-inline-container-template').html());
-            $td.append($comments);
+
+          // There aren't any comments, we init the `.inline-comments` with `reply-thread-container` first
+          if ($comments.length===0) {
+            var replBtn = '<button class="cb-comment-add-button" onclick="return Rhodecode.comments.createComment(this, \'{0}\', \'{1}\', null)">Reply...</button>'.format(f_path, line_no)
+            var $reply_container = $('#cb-comments-inline-container-template')
+            $reply_container.find('button.cb-comment-add-button').replaceWith(replBtn);
+            $td.append($($reply_container).html());
           }
 
-          $td.find('.cb-comment-add-button').before($form);
+          // default comment button exists, so we prepend the form for leaving initial comment
+          $td.find('.cb-comment-add-button').before($replyForm);
+          // set marker, that we have a open form
+          var $replyWrapper = $td.find('.reply-thread-container-wrapper')
+          $replyWrapper.addClass('comment-form-active');
 
-          var placeholderText = _gettext('Leave a comment on line {0}.').format(lineno);
-          var _form = $($form[0]).find('form');
+          var lastComment = $comments.find('.comment-inline').last();
+          if ($(lastComment).hasClass('comment-outdated')) {
+            $replyWrapper.show();
+          }
+
+          var _form = $($replyForm[0]).find('form');
           var autocompleteActions = ['as_note', 'as_todo'];
           var comment_id=null;
-          var commentForm = this.createCommentForm(
-              _form, lineno, placeholderText, autocompleteActions, resolvesCommentId, this.edit, comment_id);
-
-          $.Topic('/ui/plugins/code/comment_form_built').prepareOrPublish({
-              form: _form,
-              parent: $td[0],
-              lineno: lineno,
-              f_path: f_path}
-          );
+          var placeholderText = _gettext('Leave a comment on file {0} line {1}.').format(f_path, line_no);
+          var commentForm = self.createCommentForm(
+              _form, line_no, placeholderText, autocompleteActions, resolvesCommentId,
+              self.edit, comment_id);
 
           // set a CUSTOM submit handler for inline comments.
           commentForm.setHandleFormSubmit(function(o) {
             var text = commentForm.cm.getValue();
             var commentType = commentForm.getCommentType();
             var resolvesCommentId = commentForm.getResolvesId();
             var isDraft = commentForm.getDraftState();
 
             if (text === "") {
               return;
             }
 
-            if (lineno === undefined) {
-              alert('missing line !');
+            if (line_no === undefined) {
+              alert('Error: unable to fetch line number for this inline comment !');
               return;
             }
+
             if (f_path === undefined) {
-              alert('missing file path !');
+              alert('Error: unable to fetch file path for this inline comment !');
               return;
             }
 
             var excludeCancelBtn = false;
             var submitEvent = true;
             commentForm.setActionButtonsDisabled(true, excludeCancelBtn, submitEvent);
             commentForm.cm.setOption("readOnly", true);
             var postData = {
                 'text': text,
                 'f_path': f_path,
-                'line': lineno,
+                'line': line_no,
                 'comment_type': commentType,
                 'draft': isDraft,
                 'csrf_token': CSRF_TOKEN
             };
             if (resolvesCommentId){
                 postData['resolves_comment_id'] = resolvesCommentId;
             }
 
+            // submitSuccess for inline commits
             var submitSuccessCallback = function(json_data) {
-              $form.remove();
-              try {
-                var html = json_data.rendered_text;
-                var lineno = json_data.line_no;
-                var target_id = json_data.target_id;
+
+                $replyForm.remove();
+                $td.find('.reply-thread-container-wrapper').removeClass('comment-form-active');
+
+                try {
+
+                    // inject newly created comments, json_data is {<comment_id>: {}}
+                    self.attachInlineComment(json_data)
 
-                $comments.find('.cb-comment-add-button').before(html);
+                    //mark visually which comment was resolved
+                    if (resolvesCommentId) {
+                        commentForm.markCommentResolved(resolvesCommentId);
+                    }
 
-                //mark visually which comment was resolved
-                if (resolvesCommentId) {
-                    commentForm.markCommentResolved(resolvesCommentId);
+                    // run global callback on submit
+                    commentForm.globalSubmitSuccessCallback({
+                        draft: isDraft,
+                        comment_id: comment_id
+                    });
+
+                } catch (e) {
+                    console.error(e);
                 }
 
-                // run global callback on submit
-                commentForm.globalSubmitSuccessCallback({draft: isDraft, comment_id: comment_id});
-
-              } catch (e) {
-                console.error(e);
-              }
-
-              // re trigger the linkification of next/prev navigation
-              linkifyComments($('.inline-comment-injected'));
-              timeagoActivate();
-              tooltipActivate();
-
               if (window.updateSticky !== undefined) {
                   // potentially our comments change the active window size, so we
                   // notify sticky elements
                   updateSticky()
               }
 
               if (window.refreshAllComments !== undefined && !isDraft) {
                   // if we have this handler, run it, and refresh all comments boxes
                   refreshAllComments()
               }
 
               commentForm.setActionButtonsDisabled(false);
 
+              // re trigger the linkification of next/prev navigation
+              linkifyComments($('.inline-comment-injected'));
+              timeagoActivate();
+              tooltipActivate();
             };
+
             var submitFailCallback = function(jqXHR, textStatus, errorThrown) {
                 var prefix = "Error while submitting comment.\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
                 commentForm.resetCommentFormState(text)
             };
+
             commentForm.submitAjaxPOST(
                 commentForm.submitUrl, postData, submitSuccessCallback, submitFailCallback);
           });
       }
 
-      $form.addClass('comment-inline-form-open');
+      // Finally "open" our reply form, since we know there are comments and we have the "attached" old form
+      $replyForm.addClass('comment-inline-form-open');
+      tooltipActivate();
   };
 
   this.createResolutionComment = function(commentId){
     // hide the trigger text
     $('#resolve-comment-{0}'.format(commentId)).hide();
 
     var comment = $('#comment-'+commentId);
     var commentData = comment.data();
     if (commentData.commentInline) {
-        this.createComment(comment, commentId)
+        var f_path = commentData.fPath;
+        var line_no = commentData.lineNo;
+        //TODO check this if we need to give f_path/line_no
+        this.createComment(comment, f_path, line_no, commentId)
     } else {
-        Rhodecode.comments.createGeneralComment('general', "$placeholder", commentId)
+        this.createGeneralComment('general', "$placeholder", commentId)
     }
 
     return false;
   };
 
   this.submitResolution = function(commentId){
     var form = $('#resolve_comment_{0}'.format(commentId)).closest('form');
     var commentForm = form.get(0).CommentForm;
 
     var cm = commentForm.getCmInstance();
     var renderer = templateContext.visual.default_renderer;
     if (renderer == 'rst'){
         var commentUrl = '`#{0} <{1}#comment-{0}>`_'.format(commentId, commentForm.selfUrl);
     } else if (renderer == 'markdown') {
         var commentUrl = '[#{0}]({1}#comment-{0})'.format(commentId, commentForm.selfUrl);
     } else {
         var commentUrl = '{1}#comment-{0}'.format(commentId, commentForm.selfUrl);
     }
 
     cm.setValue(_gettext('TODO from comment {0} was fixed.').format(commentUrl));
     form.submit();
     return false;
   };
 
 };
+
+window.commentHelp = function(renderer) {
+    var funcData = {'renderer': renderer}
+    return renderTemplate('commentHelpHovercard', funcData)
+}
  No newline at end of file

rhodecode/public/js/src/rhodecode/menus.js

@@ -1,109 +1,119 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/
 
 /**
  * QUICK REPO MENU, used on repositories to show shortcuts to files, history
  * etc.
  */
 
 var quick_repo_menu = function() {
   var hide_quick_repo_menus = function() {
     $('.menu_items_container').hide();
     $('.active_quick_repo').removeClass('active_quick_repo');
   };
   $('.quick_repo_menu').hover(function() {
     hide_quick_repo_menus();
     if (!$(this).hasClass('active_quick_repo')) {
       $('.menu_items_container', this).removeClass("hidden").show();
       $(this).addClass('active_quick_repo');
     }
   }, function() {
     hide_quick_repo_menus();
   });
 };
 
 
 window.toggleElement = function (elem, target) {
   var $elem = $(elem);
   var $target = $(target);
 
-  if ($target.is(':visible') || $target.length === 0) {
+  if (target !== undefined) {
+      var show = $target.is(':visible') || $target.length === 0;
+  } else {
+      var show = $elem.hasClass('toggle-off')
+  }
+
+  if (show) {
     $target.hide();
     $elem.html($elem.data('toggleOn'))
+    $elem.addClass('toggle-on')
+    $elem.removeClass('toggle-off')
   } else {
     $target.show();
     $elem.html($elem.data('toggleOff'))
+    $elem.addClass('toggle-off')
+    $elem.removeClass('toggle-on')
   }
 
   return false
 }
 
 var marginExpVal = '300' // needs a sync with `.right-sidebar.right-sidebar-expanded` value
 var marginColVal = '40'  // needs a sync with `.right-sidebar.right-sidebar-collapsed` value
 
 var marginExpanded = {'margin': '0 {0}px 0 0'.format(marginExpVal)};
 var marginCollapsed = {'margin': '0 {0}px 0 0'.format(marginColVal)};
 
 var updateStickyHeader = function () {
     if (window.updateSticky !== undefined) {
         // potentially our comments change the active window size, so we
         // notify sticky elements
         updateSticky()
     }
 }
 
 var expandSidebar = function () {
     var $sideBar = $('.right-sidebar');
     $('.outerwrapper').css(marginExpanded);
     $('.sidebar-toggle a').html('<i class="icon-right" style="margin-right: -10px"></i><i class="icon-right"></i>');
     $('.right-sidebar-collapsed-state').hide();
     $('.right-sidebar-expanded-state').show();
     $('.branding').addClass('display-none');
     $sideBar.addClass('right-sidebar-expanded')
     $sideBar.removeClass('right-sidebar-collapsed')
 }
 
 var collapseSidebar = function () {
     var $sideBar = $('.right-sidebar');
     $('.outerwrapper').css(marginCollapsed);
     $('.sidebar-toggle a').html('<i class="icon-left" style="margin-right: -10px"></i><i class="icon-left"></i>');
     $('.right-sidebar-collapsed-state').show();
     $('.right-sidebar-expanded-state').hide();
     $('.branding').removeClass('display-none');
     $sideBar.removeClass('right-sidebar-expanded')
     $sideBar.addClass('right-sidebar-collapsed')
 }
 
 window.toggleSidebar = function () {
     var $sideBar = $('.right-sidebar');
 
     if ($sideBar.hasClass('right-sidebar-expanded')) {
         // expanded -> collapsed transition
         collapseSidebar();
         var sidebarState = 'collapsed';
 
     } else {
         // collapsed -> expanded
         expandSidebar();
         var sidebarState = 'expanded';
     }
 
     // update our other sticky header in same context
     updateStickyHeader();
     storeUserSessionAttr('rc_user_session_attr.sidebarState', sidebarState);
 }

rhodecode/public/js/topics_list.txt

@@ -1,9 +1,7 b''
 /__MAIN_APP__ - launched when rhodecode-app element is attached to DOM
 /plugins/__REGISTER__ - launched after the onDomReady() code from rhodecode.js is executed
-/ui/plugins/code/anchor_focus - launched when rc starts to scroll on load to anchor on PR/Codeview
-/ui/plugins/code/comment_form_built - launched when injectInlineForm() is executed and the form object is created
 /notifications - shows new event notifications
 /connection_controller/subscribe - subscribes user to new channels
 /connection_controller/presence - receives presence change messages
 /connection_controller/channel_update - receives channel states
 /favicon/update - notify state change for favicon

rhodecode/templates/changeset/changeset_comment_block.mako

@@ -1,4 +1,4 b''
 ## this is a dummy html file for partial rendering on server and sending
 ## generated output via ajax after comment submit
 <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
-${comment.comment_block(c.co, inline=c.co.is_inline)}
+${comment.comment_block(c.co, inline=c.co.is_inline, is_new=c.is_new)}

rhodecode/templates/changeset/changeset_file_comment.mako

@@ -1,542 +1,560 b''
 ## -*- coding: utf-8 -*-
 ## usage:
 ## <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
 ## ${comment.comment_block(comment)}
 ##
 <%namespace name="base" file="/base/base.mako"/>
 
 <%!
     from rhodecode.lib import html_filters
 %>
 
 
-<%def name="comment_block(comment, inline=False, active_pattern_entries=None)">
+<%def name="comment_block(comment, inline=False, active_pattern_entries=None, is_new=False)">
 
     <%
       from rhodecode.model.comment import CommentsModel
       comment_model = CommentsModel()
 
       comment_ver = comment.get_index_version(getattr(c, 'versions', []))
       latest_ver = len(getattr(c, 'versions', []))
       visible_for_user = True
       if comment.draft:
         visible_for_user = comment.user_id == c.rhodecode_user.user_id
     %>
 
   % if inline:
       <% outdated_at_ver = comment.outdated_at_version(c.at_version_num) %>
   % else:
       <% outdated_at_ver = comment.older_than_version(c.at_version_num) %>
   % endif
 
   % if visible_for_user:
   <div class="comment
              ${'comment-inline' if inline else 'comment-general'}
              ${'comment-outdated' if outdated_at_ver else 'comment-current'}"
        id="comment-${comment.comment_id}"
        line="${comment.line_no}"
        data-comment-id="${comment.comment_id}"
        data-comment-type="${comment.comment_type}"
        data-comment-draft=${h.json.dumps(comment.draft)}
        data-comment-renderer="${comment.renderer}"
        data-comment-text="${comment.text | html_filters.base64,n}"
+       data-comment-f-path="${comment.f_path}"
        data-comment-line-no="${comment.line_no}"
        data-comment-inline=${h.json.dumps(inline)}
        style="${'display: none;' if outdated_at_ver else ''}">
 
       <div class="meta">
           <div class="comment-type-label">
                % if comment.draft:
-                 <div class="tooltip comment-draft" title="${_('Draft comments are only visible to the author until submitted')}.">DRAFT</div>
+               <div class="tooltip comment-draft" title="${_('Draft comments are only visible to the author until submitted')}.">
+                DRAFT
+               </div>
                % endif
+
+              % if is_new:
+              <div class="tooltip comment-new" title="${_('This comment was added while you browsed this page')}.">
+                NEW
+              </div>
+              % endif
+
               <div class="comment-label ${comment.comment_type or 'note'}" id="comment-label-${comment.comment_id}">
 
               ## TODO COMMENT
               % if comment.comment_type == 'todo':
                   % if comment.resolved:
                       <div class="resolved tooltip" title="${_('Resolved by comment #{}').format(comment.resolved.comment_id)}">
                           <i class="icon-flag-filled"></i>
                           <a href="#comment-${comment.resolved.comment_id}">${comment.comment_type}</a>
                       </div>
                   % else:
                       <div class="resolved tooltip" style="display: none">
                           <span>${comment.comment_type}</span>
                       </div>
                       <div class="resolve tooltip" onclick="return Rhodecode.comments.createResolutionComment(${comment.comment_id});" title="${_('Click to create resolution comment.')}">
                         <i class="icon-flag-filled"></i>
                         ${comment.comment_type}
                       </div>
                   % endif
               ## NOTE COMMENT
               % else:
                   ## RESOLVED NOTE
                   % if comment.resolved_comment:
                     <div class="tooltip" title="${_('This comment resolves TODO #{}').format(comment.resolved_comment.comment_id)}">
                         fix
                         <a href="#comment-${comment.resolved_comment.comment_id}" onclick="Rhodecode.comments.scrollToComment($('#comment-${comment.resolved_comment.comment_id}'), 0, ${h.json.dumps(comment.resolved_comment.outdated)})">
                             <span style="text-decoration: line-through">#${comment.resolved_comment.comment_id}</span>
                         </a>
                     </div>
                   ## STATUS CHANGE NOTE
                   % elif not comment.is_inline and comment.status_change:
                     <%
                         if comment.pull_request:
                             status_change_title = 'Status of review for pull request !{}'.format(comment.pull_request.pull_request_id)
                         else:
                             status_change_title = 'Status of review for commit {}'.format(h.short_id(comment.commit_id))
                     %>
 
                     <i class="icon-circle review-status-${comment.review_status}"></i>
                     <div class="changeset-status-lbl tooltip" title="${status_change_title}">
                          ${comment.review_status_lbl}
                     </div>
                   % else:
                     <div>
                         <i class="icon-comment"></i>
                         ${(comment.comment_type or 'note')}
                     </div>
                   % endif
               % endif
 
               </div>
           </div>
           ## NOTE 0 and .. => because we disable it for now until UI ready
           % if 0 and comment.status_change:
           <div class="pull-left">
               <span  class="tag authortag tooltip" title="${_('Status from pull request.')}">
                   <a href="${h.route_path('pullrequest_show',repo_name=comment.pull_request.target_repo.repo_name,pull_request_id=comment.pull_request.pull_request_id)}">
                       ${'!{}'.format(comment.pull_request.pull_request_id)}
                   </a>
               </span>
           </div>
           % endif
           ## Since only author can see drafts, we don't show it
           % if not comment.draft:
           <div class="author ${'author-inline' if inline else 'author-general'}">
               ${base.gravatar_with_user(comment.author.email, 16, tooltip=True)}
           </div>
           % endif
 
           <div class="date">
               ${h.age_component(comment.modified_at, time_is_local=True)}
           </div>
 
           % if comment.pull_request and comment.pull_request.author.user_id == comment.author.user_id:
             <span class="tag authortag tooltip" title="${_('Pull request author')}">
             ${_('author')}
             </span>
           % endif
 
           <%
           comment_version_selector = 'comment_versions_{}'.format(comment.comment_id)
           %>
 
           % if comment.history:
               <div class="date">
 
                  <input id="${comment_version_selector}" name="${comment_version_selector}"
                         type="hidden"
                         data-last-version="${comment.history[-1].version}">
 
                  <script type="text/javascript">
 
                     var preLoadVersionData = [
                        % for comment_history in comment.history:
                             {
                                 id: ${comment_history.comment_history_id},
                                 text: 'v${comment_history.version}',
                                 action: function () {
                                     Rhodecode.comments.showVersion(
                                         "${comment.comment_id}",
                                         "${comment_history.comment_history_id}"
                                     )
                                 },
                                 comment_version: "${comment_history.version}",
                                 comment_author_username: "${comment_history.author.username}",
                                 comment_author_gravatar: "${h.gravatar_url(comment_history.author.email, 16)}",
                                 comment_created_on: '${h.age_component(comment_history.created_on, time_is_local=True)}',
                             },
                        % endfor
                         ]
                     initVersionSelector("#${comment_version_selector}", {results: preLoadVersionData});
 
                   </script>
 
               </div>
           % else:
               <div class="date" style="display: none">
                 <input id="${comment_version_selector}" name="${comment_version_selector}"
                        type="hidden"
                        data-last-version="0">
               </div>
           %endif
 
           <div class="comment-links-block">
 
             % if inline:
                     <a class="pr-version-inline" href="${request.current_route_path(_query=dict(version=comment.pull_request_version_id), _anchor='comment-{}'.format(comment.comment_id))}">
                     % if outdated_at_ver:
-                        <code class="tooltip pr-version-num" title="${_('Outdated comment from pull request version v{0}, latest v{1}').format(comment_ver, latest_ver)}">outdated ${'v{}'.format(comment_ver)}</code>
+                        <strong class="comment-outdated-label">outdated</strong> <code class="tooltip pr-version-num" title="${_('Outdated comment from pull request version v{0}, latest v{1}').format(comment_ver, latest_ver)}">${'v{}'.format(comment_ver)}</code>
                         <code class="action-divider">|</code>
                     % elif comment_ver:
                         <code class="tooltip pr-version-num" title="${_('Comment from pull request version v{0}, latest v{1}').format(comment_ver, latest_ver)}">${'v{}'.format(comment_ver)}</code>
                         <code class="action-divider">|</code>
                     % endif
                     </a>
             % else:
                 % if comment_ver:
 
                       % if comment.outdated:
                         <a class="pr-version"
                            href="?version=${comment.pull_request_version_id}#comment-${comment.comment_id}"
                         >
                             ${_('Outdated comment from pull request version v{0}, latest v{1}').format(comment_ver, latest_ver)}
                         </a>
                         <code class="action-divider">|</code>
                       % else:
                         <a class="tooltip pr-version"
                            title="${_('Comment from pull request version v{0}, latest v{1}').format(comment_ver, latest_ver)}"
                            href="${h.route_path('pullrequest_show',repo_name=comment.pull_request.target_repo.repo_name,pull_request_id=comment.pull_request.pull_request_id, version=comment.pull_request_version_id)}"
                         >
                             <code class="pr-version-num">${'v{}'.format(comment_ver)}</code>
                         </a>
                         <code class="action-divider">|</code>
                       % endif
 
                 % endif
             % endif
 
             <details class="details-reset details-inline-block">
               <summary class="noselect"><i class="icon-options cursor-pointer"></i></summary>
               <details-menu class="details-dropdown">
 
                 <div class="dropdown-item">
                     ${_('Comment')} #${comment.comment_id}
                     <span class="pull-right icon-clipboard clipboard-action" data-clipboard-text="${comment_model.get_url(comment,request, permalink=True, anchor='comment-{}'.format(comment.comment_id))}" title="${_('Copy permalink')}"></span>
                 </div>
 
                 ## show delete comment if it's not a PR (regular comments) or it's PR that is not closed
                 ## only super-admin, repo admin OR comment owner can delete, also hide delete if currently viewed comment is outdated
                 %if not outdated_at_ver and (not comment.pull_request or (comment.pull_request and not comment.pull_request.is_closed())):
                    ## permissions to delete
                    %if comment.immutable is False and (c.is_super_admin or h.HasRepoPermissionAny('repository.admin')(c.repo_name) or comment.author.user_id == c.rhodecode_user.user_id):
                        <div class="dropdown-divider"></div>
                        <div class="dropdown-item">
-                        <a onclick="return Rhodecode.comments.editComment(this);" class="btn btn-link btn-sm edit-comment">${_('Edit')}</a>
+                        <a onclick="return Rhodecode.comments.editComment(this, '${comment.line_no}', '${comment.f_path}');" class="btn btn-link btn-sm edit-comment">${_('Edit')}</a>
                        </div>
                        <div class="dropdown-item">
                         <a onclick="return Rhodecode.comments.deleteComment(this);" class="btn btn-link btn-sm btn-danger delete-comment">${_('Delete')}</a>
                        </div>
-                       % if comment.draft:
+                       ## Only available in EE edition
+                       % if comment.draft and c.rhodecode_edition_id == 'EE':
                        <div class="dropdown-item">
                         <a onclick="return Rhodecode.comments.finalizeDrafts([${comment.comment_id}]);" class="btn btn-link btn-sm finalize-draft-comment">${_('Submit draft')}</a>
                        </div>
                        % endif
                    %else:
                       <div class="dropdown-divider"></div>
                       <div class="dropdown-item">
                         <a class="tooltip edit-comment link-disabled" disabled="disabled" title="${_('Action unavailable')}">${_('Edit')}</a>
                       </div>
                       <div class="dropdown-item">
                         <a class="tooltip edit-comment link-disabled" disabled="disabled" title="${_('Action unavailable')}">${_('Delete')}</a>
                       </div>
                    %endif
                 %else:
                     <div class="dropdown-divider"></div>
                     <div class="dropdown-item">
                       <a class="tooltip edit-comment link-disabled" disabled="disabled" title="${_('Action unavailable')}">${_('Edit')}</a>
                     </div>
                     <div class="dropdown-item">
                       <a class="tooltip edit-comment link-disabled" disabled="disabled" title="${_('Action unavailable')}">${_('Delete')}</a>
                     </div>
                 %endif
               </details-menu>
             </details>
 
             <code class="action-divider">|</code>
             % if outdated_at_ver:
                 <a onclick="return Rhodecode.comments.prevOutdatedComment(this);" class="tooltip prev-comment" title="${_('Jump to the previous outdated comment')}"> <i class="icon-angle-left"></i> </a>
                 <a onclick="return Rhodecode.comments.nextOutdatedComment(this);" class="tooltip next-comment" title="${_('Jump to the next outdated comment')}"> <i class="icon-angle-right"></i></a>
             % else:
                 <a onclick="return Rhodecode.comments.prevComment(this);" class="tooltip prev-comment" title="${_('Jump to the previous comment')}"> <i class="icon-angle-left"></i></a>
                 <a onclick="return Rhodecode.comments.nextComment(this);" class="tooltip next-comment" title="${_('Jump to the next comment')}"> <i class="icon-angle-right"></i></a>
             % endif
 
           </div>
       </div>
       <div class="text">
           ${h.render(comment.text, renderer=comment.renderer, mentions=True, repo_name=getattr(c, 'repo_name', None), active_pattern_entries=active_pattern_entries)}
       </div>
 
   </div>
   % endif
 </%def>
 
 ## generate main comments
 <%def name="generate_comments(comments, include_pull_request=False, is_pull_request=False)">
   <%
     active_pattern_entries = h.get_active_pattern_entries(getattr(c, 'repo_name', None))
   %>
 
   <div class="general-comments" id="comments">
     %for comment in comments:
         <div id="comment-tr-${comment.comment_id}">
           ## only render comments that are not from pull request, or from
           ## pull request and a status change
           %if not comment.pull_request or (comment.pull_request and comment.status_change) or include_pull_request:
           ${comment_block(comment, active_pattern_entries=active_pattern_entries)}
           %endif
         </div>
     %endfor
     ## to anchor ajax comments
     <div id="injected_page_comments"></div>
   </div>
 </%def>
 
 
 <%def name="comments(post_url, cur_status, is_pull_request=False, is_compare=False, change_status=True, form_extras=None)">
 
 <div class="comments">
     <%
       if is_pull_request:
         placeholder = _('Leave a comment on this Pull Request.')
       elif is_compare:
         placeholder = _('Leave a comment on {} commits in this range.').format(len(form_extras))
       else:
         placeholder = _('Leave a comment on this Commit.')
     %>
 
     % if c.rhodecode_user.username != h.DEFAULT_USER:
     <div class="js-template" id="cb-comment-general-form-template">
         ## template generated for injection
         ${comment_form(form_type='general', review_statuses=c.commit_statuses, form_extras=form_extras)}
     </div>
 
     <div id="cb-comment-general-form-placeholder" class="comment-form ac">
         ## inject form here
     </div>
     <script type="text/javascript">
         var lineNo = 'general';
         var resolvesCommentId = null;
         var generalCommentForm = Rhodecode.comments.createGeneralComment(
             lineNo, "${placeholder}", resolvesCommentId);
 
         // set custom success callback on rangeCommit
         % if is_compare:
             generalCommentForm.setHandleFormSubmit(function(o) {
                 var self = generalCommentForm;
 
                 var text = self.cm.getValue();
                 var status = self.getCommentStatus();
                 var commentType = self.getCommentType();
                 var isDraft = self.getDraftState();
 
                 if (text === "" && !status) {
                     return;
                 }
 
                 // we can pick which commits we want to make the comment by
                 // selecting them via click on preview pane, this will alter the hidden inputs
                 var cherryPicked = $('#changeset_compare_view_content .compare_select.hl').length > 0;
 
                 var commitIds = [];
                 $('#changeset_compare_view_content .compare_select').each(function(el) {
                     var commitId = this.id.replace('row-', '');
                     if ($(this).hasClass('hl') || !cherryPicked) {
                         $("input[data-commit-id='{0}']".format(commitId)).val(commitId);
                         commitIds.push(commitId);
                     } else {
                         $("input[data-commit-id='{0}']".format(commitId)).val('')
                     }
                 });
 
                 self.setActionButtonsDisabled(true);
                 self.cm.setOption("readOnly", true);
                 var postData = {
                     'text': text,
                     'changeset_status': status,
                     'comment_type': commentType,
                     'draft': isDraft,
                     'commit_ids': commitIds,
                     'csrf_token': CSRF_TOKEN
                 };
 
                 var submitSuccessCallback = function(o) {
                     location.reload(true);
                 };
                 var submitFailCallback = function(){
                     self.resetCommentFormState(text)
                 };
                 self.submitAjaxPOST(
                     self.submitUrl, postData, submitSuccessCallback, submitFailCallback);
             });
         % endif
 
     </script>
     % else:
     ## form state when not logged in
     <div class="comment-form ac">
 
         <div class="comment-area">
             <div class="comment-area-header">
                 <ul class="nav-links clearfix">
                     <li class="active">
                         <a class="disabled" href="#edit-btn" disabled="disabled" onclick="return false">${_('Write')}</a>
                     </li>
                     <li class="">
                         <a class="disabled" href="#preview-btn" disabled="disabled" onclick="return false">${_('Preview')}</a>
                     </li>
                 </ul>
             </div>
 
             <div class="comment-area-write" style="display: block;">
                 <div id="edit-container">
-                    <div style="padding: 40px 0">
+                    <div style="padding: 20px 0px 0px 0;">
                       ${_('You need to be logged in to leave comments.')}
                       <a href="${h.route_path('login', _query={'came_from': h.current_route_path(request)})}">${_('Login now')}</a>
                     </div>
                 </div>
                 <div id="preview-container" class="clearfix" style="display: none;">
                     <div id="preview-box" class="preview-box"></div>
                 </div>
             </div>
 
             <div class="comment-area-footer">
                 <div class="toolbar">
                     <div class="toolbar-text">
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="comment-footer">
         </div>
 
     </div>
     % endif
 
     <script type="text/javascript">
         bindToggleButtons();
     </script>
 </div>
 </%def>
 
 
 <%def name="comment_form(form_type, form_id='', lineno_id='{1}', review_statuses=None, form_extras=None)">
 
   ## comment injected based on assumption that user is logged in
   <form ${('id="{}"'.format(form_id) if form_id else '') |n} action="#" method="GET">
 
     <div class="comment-area">
         <div class="comment-area-header">
             <div class="pull-left">
                 <ul class="nav-links clearfix">
                     <li class="active">
                         <a href="#edit-btn" tabindex="-1" id="edit-btn_${lineno_id}">${_('Write')}</a>
                     </li>
                     <li class="">
                         <a href="#preview-btn" tabindex="-1" id="preview-btn_${lineno_id}">${_('Preview')}</a>
                     </li>
                 </ul>
             </div>
             <div class="pull-right">
                 <span class="comment-area-text">${_('Mark as')}:</span>
                 <select class="comment-type" id="comment_type_${lineno_id}" name="comment_type">
                     % for val in c.visual.comment_types:
                         <option value="${val}">${val.upper()}</option>
                     % endfor
                 </select>
             </div>
         </div>
 
         <div class="comment-area-write" style="display: block;">
-            <div id="edit-container_${lineno_id}">
+            <div id="edit-container_${lineno_id}" style="margin-top: -1px">
                 <textarea id="text_${lineno_id}" name="text" class="comment-block-ta ac-input"></textarea>
             </div>
             <div id="preview-container_${lineno_id}" class="clearfix" style="display: none;">
                 <div id="preview-box_${lineno_id}" class="preview-box"></div>
             </div>
         </div>
 
         <div class="comment-area-footer comment-attachment-uploader">
             <div class="toolbar">
 
                 <div class="comment-attachment-text">
                     <div class="dropzone-text">
                         ${_("Drag'n Drop files here or")} <span class="link pick-attachment">${_('Choose your files')}</span>.<br>
                     </div>
                     <div class="dropzone-upload" style="display:none">
                         <i class="icon-spin animate-spin"></i> ${_('uploading...')}
                     </div>
                 </div>
 
                 ## comments dropzone template, empty on purpose
                 <div style="display: none" class="comment-attachment-uploader-template">
                     <div class="dz-file-preview" style="margin: 0">
                         <div class="dz-error-message"></div>
                     </div>
                 </div>
 
             </div>
         </div>
     </div>
 
     <div class="comment-footer">
 
         ## inject extra inputs into the form
         % if form_extras and isinstance(form_extras, (list, tuple)):
             <div id="comment_form_extras">
                 % for form_ex_el in form_extras:
                     ${form_ex_el|n}
                 % endfor
             </div>
         % endif
 
         <div class="action-buttons">
             % if form_type != 'inline':
                 <div class="action-buttons-extra"></div>
             % endif
 
             <input class="btn btn-success comment-button-input submit-comment-action" id="save_${lineno_id}" name="save" type="submit" value="${_('Add comment')}" data-is-draft=false onclick="$(this).addClass('submitter')">
 
             % if form_type == 'inline':
-                <input class="btn btn-warning comment-button-input submit-draft-action" id="save_draft_${lineno_id}" name="save_draft" type="submit" value="${_('Add draft')}" data-is-draft=true onclick="$(this).addClass('submitter')">
+                % if c.rhodecode_edition_id == 'EE':
+                    ## Disable the button for CE, the "real" validation is in the backend code anyway
+                    <input class="btn btn-warning comment-button-input submit-draft-action" id="save_draft_${lineno_id}" name="save_draft" type="submit" value="${_('Add draft')}" data-is-draft=true onclick="$(this).addClass('submitter')">
+                % else:
+                    <input class="tooltip btn btn-warning comment-button-input submit-draft-action disabled" type="submit" disabled="disabled" value="${_('Add draft')}" onclick="return false;" title="Draft comments only available in EE edition of RhodeCode">
+                % endif
+            % endif
+
+            % if review_statuses:
+            <div class="comment-status-box">
+              <select id="change_status_${lineno_id}" name="changeset_status">
+                  <option></option> ## Placeholder
+                  % for status, lbl in review_statuses:
+                  <option value="${status}" data-status="${status}">${lbl}</option>
+                      %if is_pull_request and change_status and status in ('approved', 'rejected'):
+                          <option value="${status}_closed" data-status="${status}">${lbl} & ${_('Closed')}</option>
+                      %endif
+                  % endfor
+              </select>
+            </div>
             % endif
 
             ## inline for has a file, and line-number together with cancel hide button.
             % if form_type == 'inline':
                 <input type="hidden" name="f_path" value="{0}">
                 <input type="hidden" name="line" value="${lineno_id}">
-                <button type="button" class="tooltip cb-comment-cancel" onclick="return Rhodecode.comments.cancelComment(this);" title="Hide comment box">
+                <button type="button" class="cb-comment-cancel" onclick="return Rhodecode.comments.cancelComment(this);">
                 <i class="icon-cancel-circled2"></i>
                 </button>
             % endif
         </div>
 
-        % if review_statuses:
-        <div class="status_box">
-          <select id="change_status_${lineno_id}" name="changeset_status">
-              <option></option> ## Placeholder
-              % for status, lbl in review_statuses:
-              <option value="${status}" data-status="${status}">${lbl}</option>
-                  %if is_pull_request and change_status and status in ('approved', 'rejected'):
-                      <option value="${status}_closed" data-status="${status}">${lbl} & ${_('Closed')}</option>
-                  %endif
-              % endfor
-          </select>
-        </div>
-        % endif
-
         <div class="toolbar-text">
             <% renderer_url = '<a href="%s">%s</a>' % (h.route_url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper()) %>
-            ${_('Comments parsed using {} syntax.').format(renderer_url)|n} <br/>
-            <span class="tooltip" title="${_('Use @username inside this text to send notification to this RhodeCode user')}">@mention</span>
-            ${_('and')}
-            <span class="tooltip" title="${_('Start typing with / for certain actions to be triggered via text box.')}">`/` autocomplete</span>
-            ${_('actions supported.')}
+            <p>${_('Styling with {} is supported.').format(renderer_url)|n}
+
+            <i class="icon-info-circled tooltip-hovercard"
+               data-hovercard-alt="ALT"
+               data-hovercard-url="javascript:commentHelp('${c.visual.default_renderer.upper()}')"
+               data-comment-json-b64='${h.b64(h.json.dumps({}))}'></i>
+            </p>
         </div>
     </div>
 
   </form>
 
 </%def>
  No newline at end of file

rhodecode/templates/codeblocks/diffs.mako

@@ -1,1406 +1,1415 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 c.rhodecode_user.username != h.DEFAULT_USER:
+    %if not c.rhodecode_user.is_default:
         ## render template for inline comments
         ${commentblock.comment_form(form_type='inline')}
-    %else:
-        ${h.form('', class_='inline-form comment-form-login', method='get')}
-        <div class="pull-left">
-            <div class="comment-help pull-right">
-              ${_('You need to be logged in to leave comments.')} <a href="${h.route_path('login', _query={'came_from': h.current_route_path(request)})}">${_('Login now')}</a>
-            </div>
-        </div>
-        <div class="comment-button pull-right">
-         <button type="button" class="cb-comment-cancel" onclick="return Rhodecode.comments.cancelComment(this);">
-          ${_('Cancel')}
-         </button>
-        </div>
-        <div class="clearfix"></div>
-        ${h.end_form()}
     %endif
     </div>
 </div>
 
 %endif
 
 %if c.user_session_attrs["diffmode"] == 'sideside':
 <style>
 .wrapper {
     max-width: 1600px !important;
 }
 </style>
 %endif
 
 %if ruler_at_chars:
 <style>
 .diff table.cb .cb-content:after {
     content: "";
     border-left: 1px solid blue;
     position: absolute;
     top: 0;
     height: 18px;
     opacity: .2;
     z-index: 10;
     //## +5 to account for diff action (+/-)
     left: ${ruler_at_chars + 5}ch;
 </style>
 %endif
 
 <div class="diffset ${disable_new_comments and 'diffset-comments-disabled'}">
 
     <div style="height: 20px; line-height: 20px">
         ## expand/collapse action
         <div class="pull-left">
             <a class="${'collapsed' if collapse_all else ''}" href="#expand-files" onclick="toggleExpand(this, '${diffset_container_id}'); return false">
             % if collapse_all:
                 <i class="icon-plus-squared-alt icon-no-margin"></i>${_('Expand all files')}
             % else:
                 <i class="icon-minus-squared-alt icon-no-margin"></i>${_('Collapse all files')}
             % endif
             </a>
 
         </div>
 
         ## todos
         % if show_todos and getattr(c, 'at_version', None):
         <div class="pull-right">
             <i class="icon-flag-filled" style="color: #949494">TODOs:</i>
              ${_('not available in this view')}
         </div>
         % elif show_todos:
         <div class="pull-right">
             <div class="comments-number" style="padding-left: 10px">
                 % if hasattr(c, 'unresolved_comments') and hasattr(c, 'resolved_comments'):
                     <i class="icon-flag-filled" style="color: #949494">TODOs:</i>
                     % if c.unresolved_comments:
                         <a href="#show-todos" onclick="$('#todo-box').toggle(); return false">
                             ${_('{} unresolved').format(len(c.unresolved_comments))}
                         </a>
                     % else:
                         ${_('0 unresolved')}
                     % endif
 
                     ${_('{} Resolved').format(len(c.resolved_comments))}
                 % endif
             </div>
         </div>
         % endif
 
 ##         ## comments
 ##         <div class="pull-right">
 ##             <div class="comments-number" style="padding-left: 10px">
 ##                 % if hasattr(c, 'comments') and hasattr(c, 'inline_cnt'):
 ##                     <i class="icon-comment" style="color: #949494">COMMENTS:</i>
 ##                     % if c.comments:
 ##                         <a href="#comments">${_ungettext("{} General", "{} General", len(c.comments)).format(len(c.comments))}</a>,
 ##                     % else:
 ##                         ${_('0 General')}
 ##                     % endif
 ##
 ##                     % if c.inline_cnt:
 ##                         <a href="#" onclick="return Rhodecode.comments.nextComment();"
 ##                            id="inline-comments-counter">${_ungettext("{} Inline", "{} Inline", c.inline_cnt).format(c.inline_cnt)}
 ##                         </a>
 ##                     % else:
 ##                         ${_('0 Inline')}
 ##                     % endif
 ##                 % endif
 ##
 ##                 % if pull_request_menu:
 ##                     <%
 ##                     outdated_comm_count_ver = pull_request_menu['outdated_comm_count_ver']
 ##                     %>
 ##
 ##                     % if outdated_comm_count_ver:
 ##                         <a href="#" onclick="showOutdated(); Rhodecode.comments.nextOutdatedComment(); return false;">
 ##                             (${_("{} Outdated").format(outdated_comm_count_ver)})
 ##                         </a>
 ##                         <a href="#" class="showOutdatedComments" onclick="showOutdated(this); return false;"> | ${_('show outdated')}</a>
 ##                         <a href="#" class="hideOutdatedComments" style="display: none" onclick="hideOutdated(this); return false;"> | ${_('hide outdated')}</a>
 ##                     % else:
 ##                         (${_("{} Outdated").format(outdated_comm_count_ver)})
 ##                     % endif
 ##
 ##                 % endif
 ##
 ##             </div>
 ##         </div>
 
     </div>
 
     % if diffset.limited_diff:
         <div class="diffset-heading ${(diffset.limited_diff and 'diffset-heading-warning' or '')}">
             <h2 class="clearinner">
                 ${_('The requested changes are too big and content was truncated.')}
                 <a href="${h.current_route_path(request, fulldiff=1)}" onclick="return confirm('${_("Showing a big diff might take some time and resources, continue?")}')">${_('Show full diff')}</a>
             </h2>
         </div>
     % 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]
             %>
             <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 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 '')}">
+        <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="return Rhodecode.comments.toggleComments(this);">
-        <span class="show-comment-button">${_('Show comments')}</span><span class="hide-comment-button">${_('Hide comments')}</span>
+    <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)">
+<%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
-    % if comments and comments[-1].outdated:
-    <span class="btn btn-secondary cb-comment-add-button comment-outdated}" style="display: none;}">
-        ${_('Add another comment')}
-    </span>
-    % else:
-    <span onclick="return Rhodecode.comments.createComment(this)" class="btn btn-secondary cb-comment-add-button">
-        ${_('Add another comment')}
-    </span>
-    % endif
+
+    <%
+        extra_class = ''
+        extra_style = ''
+
+        if comments and comments[-1].outdated:
+            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">
+                ${base.gravatar(c.rhodecode_user.email, 20, tooltip=True, user=c.rhodecode_user)}
+            </div>
+            <div class="reply-thread-reply-button">
+                ## 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>
+            </div>
+            <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 icon-comment-toggle" title="${_('comments including outdated: {}. Click here to display them.').format(len(line_old_comments_no_drafts))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
+                    <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 icon-comment" title="${_('comments: {}. Click to toggle them.').format(len(line_old_comments_no_drafts))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
+                    <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="o${line.original.lineno}"
+            data-line-no="${line_no}"
             >
             %if use_comments and line.original.lineno:
-            ${render_add_comment_button()}
+            ${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)}
+                ${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 icon-comment-toggle" title="${_('comments including outdated: {}. Click here to display them.').format(len(line_new_comments_no_drafts))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
+                    <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 icon-comment" title="${_('comments: {}. Click to toggle them.').format(len(line_new_comments_no_drafts))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
+                    <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="n${line.modified.lineno}"
+            data-line-no="${line_no}"
             >
             %if use_comments and line.modified.lineno:
-            ${render_add_comment_button()}
+            ${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 use_comments and line.modified.lineno and line_new_comments:
-            ${inline_comments_container(line_new_comments, active_pattern_entries=active_pattern_entries)}
-            %endif
                 % if line_action in ['+', '-'] and prev_line_action not in ['+', '-']:
                 <div class="nav-chunk" style="visibility: hidden">
                     <i class="icon-eye" title="viewing diff hunk-${hunk.index}-${chunk_count}"></i>
                 </div>
                 <% chunk_count +=1 %>
                 % endif
+            %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 icon-comment-toggle" title="${_('comments including outdated: {}. Click here to display them.').format(len(comments_no_drafts))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
+                        <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 icon-comment" title="${_('comments: {}. Click to toggle them.').format(len(comments_no_drafts))}" onclick="return Rhodecode.comments.toggleLineComments(this)"></i>
+                        <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="${(new_line_no and 'n' or 'o')}${(new_line_no or old_line_no)}"
+            data-line-no="${line_no}"
             >
             %if use_comments:
-            ${render_add_comment_button()}
+            ${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)}
+            ${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()">
-<button class="btn btn-small btn-primary cb-comment-box-opener" onclick="return Rhodecode.comments.createComment(this)">
+<%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">
                     <a class="btn tooltip toggle-wide-diff" href="#toggle-wide-diff" onclick="toggleWideDiff(this); return false" title="${h.tooltip(_('Toggle wide diff'))}">
                     <i class="icon-wide-mode"></i>
                     </a>
                 </div>
                 <div class="btn-group">
 
                 <a
                   class="btn ${(c.user_session_attrs["diffmode"] == 'sideside' and 'btn-active')} tooltip"
                   title="${h.tooltip(_('View diff as side by side'))}"
                   href="${h.current_route_path(request, diffmode='sideside')}">
                     <span>${_('Side by Side')}</span>
                 </a>
 
                 <a
                   class="btn ${(c.user_session_attrs["diffmode"] == 'unified' and 'btn-active')} tooltip"
                   title="${h.tooltip(_('View diff as unified'))}" href="${h.current_route_path(request, diffmode='unified')}">
                     <span>${_('Unified')}</span>
                 </a>
 
                 % if range_diff_on is True:
                     <a
                       title="${_('Turn off: Show the diff as commit range')}"
                       class="btn btn-primary"
                       href="${h.current_route_path(request, **{"range-diff":"0"})}">
                         <span>${_('Range Diff')}</span>
                    </a>
                 % elif range_diff_on is False:
                     <a
                       title="${_('Show the diff as commit range')}"
                       class="btn"
                       href="${h.current_route_path(request, **{"range-diff":"1"})}">
                         <span>${_('Range Diff')}</span>
                    </a>
                 % endif
             </div>
                 <div class="btn-group">
 
                 <div class="pull-left">
                     ${h.hidden('diff_menu_{}'.format(diffset_container_id))}
                 </div>
 
                 </div>
         </div>
             <div class="pull-left">
             <div class="btn-group">
               <div class="pull-left">
                 ${h.hidden('file_filter_{}'.format(diffset_container_id))}
               </div>
 
             </div>
             </div>
         </div>
         <div class="fpath-placeholder 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;
             };
 
             var preloadDiffMenuData = {
                 results: [
 
                     ## Whitespace change
                     % if request.GET.get('ignorews', '') == '1':
                     {
                         id: 2,
                         text: _gettext('Show whitespace changes'),
                         action: function () {},
                         url: "${h.current_route_path(request, ignorews=0)|n}"
                     },
                     % else:
                     {
                         id: 2,
                         text: _gettext('Hide whitespace changes'),
                         action: function () {},
                         url: "${h.current_route_path(request, ignorews=1)|n}"
                     },
                     % endif
 
                     ## FULL CONTEXT
                     % if request.GET.get('fullcontext', '') == '1':
                     {
                         id: 3,
                         text: _gettext('Hide full context diff'),
                         action: function () {},
                         url: "${h.current_route_path(request, fullcontext=0)|n}"
                     },
                     % else:
                     {
                         id: 3,
                         text: _gettext('Show full context diff'),
                         action: function () {},
                         url: "${h.current_route_path(request, fullcontext=1)|n}"
                     },
                     % endif
 
                 ]
             };
 
             var diffMenuId = "#diff_menu_" + "${diffset_container_id}";
             $(diffMenuId).select2({
                 minimumResultsForSearch: -1,
                 containerCssClass: "drop-menu-no-width",
                 dropdownCssClass: "drop-menu-dropdown",
                 dropdownAutoWidth: true,
                 data: preloadDiffMenuData,
                 placeholder: "${_('...')}",
             });
             $(diffMenuId).on('select2-selecting', function (e) {
                 e.choice.action();
                 if (e.choice.url !== null) {
                     window.location = e.choice.url
                 }
             });
             toggleExpand = function (el, diffsetEl) {
                 var el = $(el);
                 if (el.hasClass('collapsed')) {
                     $('.filediff-collapse-state.collapse-{0}'.format(diffsetEl)).prop('checked', false);
                     el.removeClass('collapsed');
                     el.html(
                         '<i class="icon-minus-squared-alt icon-no-margin"></i>' +
                         _gettext('Collapse all files'));
                 }
                 else {
                     $('.filediff-collapse-state.collapse-{0}'.format(diffsetEl)).prop('checked', true);
                     el.addClass('collapsed');
                     el.html(
                         '<i class="icon-plus-squared-alt icon-no-margin"></i>' +
                         _gettext('Expand all files'));
                 }
                 updateSticky()
             };
 
             toggleCommitExpand = function (el) {
                 var $el = $(el);
                 var commits = $el.data('toggleCommitsCnt');
                 var collapseMsg = _ngettext('Collapse {0} commit', 'Collapse {0} commits', commits).format(commits);
                 var expandMsg = _ngettext('Expand {0} commit', 'Expand {0} commits', commits).format(commits);
 
                 if ($el.hasClass('collapsed')) {
                     $('.compare_select').show();
                     $('.compare_select_hidden').hide();
 
                     $el.removeClass('collapsed');
                     $el.html(
                         '<i class="icon-minus-squared-alt icon-no-margin"></i>' +
                        collapseMsg);
                 }
                 else {
                     $('.compare_select').hide();
                     $('.compare_select_hidden').show();
                     $el.addClass('collapsed');
                     $el.html(
                         '<i class="icon-plus-squared-alt icon-no-margin"></i>' +
                         expandMsg);
                 }
                 updateSticky();
             };
 
             // get stored diff mode and pre-enable it
             if (templateContext.session_attrs.wide_diff_mode === "true") {
                 Rhodecode.comments.toggleWideMode(null);
                 $('.toggle-wide-diff').addClass('btn-active');
                 updateSticky();
             }
 
             // DIFF NAV //
 
             // element to detect scroll direction of
             var $window = $(window);
 
             // initialize last scroll position
             var lastScrollY = $window.scrollTop();
 
             $window.on('resize scrollstop', {latency: 350}, function () {
                 var visibleChunks = $('.nav-chunk').withinviewport({top: 75});
 
                 // get current scroll position
                 var currentScrollY = $window.scrollTop();
 
                 // determine current scroll direction
                 if (currentScrollY > lastScrollY) {
                     var y = 'down'
                 } else if (currentScrollY !== lastScrollY) {
                     var y = 'up';
                 }
 
                 var pos = -1; // by default we use last element in viewport
                 if (y === 'down') {
                     pos = -1;
                 } else if (y === 'up') {
                     pos = 0;
                 }
 
                 if (visibleChunks.length > 0) {
                     $('.nav-chunk').removeClass('selected');
                     $(visibleChunks.get(pos)).addClass('selected');
                 }
 
                 // update last scroll position to current position
                 lastScrollY = currentScrollY;
 
             });
             $('#diff_nav').html(diffNavText);
 
         });
     </script>
 
 </%def>

rhodecode/templates/data_table/_dt_elements.mako

@@ -1,489 +1,489 b''
 ## DATA TABLE RE USABLE ELEMENTS
 ## usage:
 ## <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
 <%namespace name="base" file="/base/base.mako"/>
 
 <%def name="metatags_help()">
     <table>
         <%
             example_tags = [
                 ('state','[stable]'),
                 ('state','[stale]'),
                 ('state','[featured]'),
                 ('state','[dev]'),
                 ('state','[dead]'),
                 ('state','[deprecated]'),
 
                 ('label','[personal]'),
                 ('generic','[v2.0.0]'),
 
                 ('lang','[lang =&gt; JavaScript]'),
                 ('license','[license =&gt; LicenseName]'),
 
                 ('ref','[requires =&gt; RepoName]'),
                 ('ref','[recommends =&gt; GroupName]'),
                 ('ref','[conflicts =&gt; SomeName]'),
                 ('ref','[base =&gt; SomeName]'),
                 ('url','[url =&gt; [linkName](https://rhodecode.com)]'),
                 ('see','[see =&gt; http://rhodecode.com]'),
             ]
         %>
         % for tag_type, tag in example_tags:
             <tr>
                 <td>${tag|n}</td>
                 <td>${h.style_metatag(tag_type, tag)|n}</td>
             </tr>
         % endfor
     </table>
 </%def>
 
 <%def name="render_description(description, stylify_metatags)">
 <%
     tags = []
     if stylify_metatags:
         tags, description = h.extract_metatags(description)
 %>
 % for tag_type, tag in tags:
 ${h.style_metatag(tag_type, tag)|n,trim}
 % endfor
 <code style="white-space: pre-wrap">${description}</code>
 </%def>
 
 ## REPOSITORY RENDERERS
 <%def name="quick_menu(repo_name)">
   <i class="icon-more"></i>
   <div class="menu_items_container hidden">
     <ul class="menu_items">
       <li>
          <a title="${_('Summary')}" href="${h.route_path('repo_summary',repo_name=repo_name)}">
          <span>${_('Summary')}</span>
          </a>
       </li>
       <li>
          <a title="${_('Commits')}" href="${h.route_path('repo_commits',repo_name=repo_name)}">
          <span>${_('Commits')}</span>
          </a>
       </li>
       <li>
          <a title="${_('Files')}" href="${h.route_path('repo_files:default_commit',repo_name=repo_name)}">
          <span>${_('Files')}</span>
          </a>
       </li>
       <li>
          <a title="${_('Fork')}" href="${h.route_path('repo_fork_new',repo_name=repo_name)}">
          <span>${_('Fork')}</span>
          </a>
       </li>
     </ul>
   </div>
 </%def>
 
 <%def name="repo_name(name,rtype,rstate,private,archived,fork_of,short_name=False,admin=False)">
     <%
     def get_name(name,short_name=short_name):
       if short_name:
         return name.split('/')[-1]
       else:
         return name
     %>
   <div class="${'repo_state_pending' if rstate == 'repo_state_pending' else ''} truncate">
     ##NAME
     <a href="${h.route_path('edit_repo',repo_name=name) if admin else h.route_path('repo_summary',repo_name=name)}">
 
     ##TYPE OF REPO
     %if h.is_hg(rtype):
         <span title="${_('Mercurial repository')}"><i class="icon-hg" style="font-size: 14px;"></i></span>
     %elif h.is_git(rtype):
         <span title="${_('Git repository')}"><i class="icon-git" style="font-size: 14px"></i></span>
     %elif h.is_svn(rtype):
         <span title="${_('Subversion repository')}"><i class="icon-svn" style="font-size: 14px"></i></span>
     %endif
 
     ##PRIVATE/PUBLIC
     %if private is True and c.visual.show_private_icon:
       <i class="icon-lock" title="${_('Private repository')}"></i>
     %elif private is False and c.visual.show_public_icon:
       <i class="icon-unlock-alt" title="${_('Public repository')}"></i>
     %else:
       <span></span>
     %endif
     ${get_name(name)}
     </a>
     %if fork_of:
       <a href="${h.route_path('repo_summary',repo_name=fork_of.repo_name)}"><i class="icon-code-fork"></i></a>
     %endif
     %if rstate == 'repo_state_pending':
       <span class="creation_in_progress tooltip" title="${_('This repository is being created in a background task')}">
           (${_('creating...')})
       </span>
     %endif
 
   </div>
 </%def>
 
 <%def name="repo_desc(description, stylify_metatags)">
     <%
     tags, description = h.extract_metatags(description)
     %>
 
     <div class="truncate-wrap">
         % if stylify_metatags:
             % for tag_type, tag in tags:
                 ${h.style_metatag(tag_type, tag)|n}
             % endfor
         % endif
         ${description}
     </div>
 
 </%def>
 
 <%def name="last_change(last_change)">
     ${h.age_component(last_change, time_is_local=True)}
 </%def>
 
 <%def name="revision(repo_name, rev, commit_id, author, last_msg, commit_date)">
   <div>
   %if rev >= 0:
       <code><a class="tooltip-hovercard" data-hovercard-alt=${h.tooltip(last_msg)} data-hovercard-url="${h.route_path('hovercard_repo_commit', repo_name=repo_name, commit_id=commit_id)}" href="${h.route_path('repo_commit',repo_name=repo_name,commit_id=commit_id)}">${'r{}:{}'.format(rev,h.short_id(commit_id))}</a></code>
   %else:
       ${_('No commits yet')}
   %endif
   </div>
 </%def>
 
 <%def name="rss(name)">
   %if c.rhodecode_user.username != h.DEFAULT_USER:
     <a title="${h.tooltip(_('Subscribe to %s rss feed')% name)}" href="${h.route_path('rss_feed_home', repo_name=name, _query=dict(auth_token=c.rhodecode_user.feed_token))}"><i class="icon-rss-sign"></i></a>
   %else:
     <a title="${h.tooltip(_('Subscribe to %s rss feed')% name)}" href="${h.route_path('rss_feed_home', repo_name=name)}"><i class="icon-rss-sign"></i></a>
   %endif
 </%def>
 
 <%def name="atom(name)">
   %if c.rhodecode_user.username != h.DEFAULT_USER:
     <a title="${h.tooltip(_('Subscribe to %s atom feed')% name)}" href="${h.route_path('atom_feed_home', repo_name=name, _query=dict(auth_token=c.rhodecode_user.feed_token))}"><i class="icon-rss-sign"></i></a>
   %else:
     <a title="${h.tooltip(_('Subscribe to %s atom feed')% name)}" href="${h.route_path('atom_feed_home', repo_name=name)}"><i class="icon-rss-sign"></i></a>
   %endif
 </%def>
 
 <%def name="repo_actions(repo_name, super_user=True)">
   <div>
     <div class="grid_edit">
       <a href="${h.route_path('edit_repo',repo_name=repo_name)}" title="${_('Edit')}">
         Edit
       </a>
     </div>
     <div class="grid_delete">
       ${h.secure_form(h.route_path('edit_repo_advanced_delete', repo_name=repo_name), request=request)}
         <input class="btn btn-link btn-danger" id="remove_${repo_name}" name="remove_${repo_name}"
                onclick="submitConfirm(event, this, _gettext('Confirm to delete this repository'), _gettext('Delete'), '${repo_name}')"
                type="submit" value="Delete"
         >
       ${h.end_form()}
     </div>
   </div>
 </%def>
 
 <%def name="repo_state(repo_state)">
   <div>
     %if repo_state == 'repo_state_pending':
         <div class="tag tag4">${_('Creating')}</div>
     %elif repo_state == 'repo_state_created':
         <div class="tag tag1">${_('Created')}</div>
     %else:
         <div class="tag alert2" title="${h.tooltip(repo_state)}">invalid</div>
     %endif
   </div>
 </%def>
 
 
 ## REPO GROUP RENDERERS
 <%def name="quick_repo_group_menu(repo_group_name)">
   <i class="icon-more"></i>
   <div class="menu_items_container hidden">
     <ul class="menu_items">
       <li>
          <a href="${h.route_path('repo_group_home', repo_group_name=repo_group_name)}">${_('Summary')}</a>
       </li>
 
     </ul>
   </div>
 </%def>
 
 <%def name="repo_group_name(repo_group_name, children_groups=None)">
   <div>
     <a href="${h.route_path('repo_group_home', repo_group_name=repo_group_name)}">
     <i class="icon-repo-group" title="${_('Repository group')}" style="font-size: 14px"></i>
       %if children_groups:
           ${h.literal(' &raquo; '.join(children_groups))}
       %else:
           ${repo_group_name}
       %endif
   </a>
   </div>
 </%def>
 
 <%def name="repo_group_desc(description, personal, stylify_metatags)">
 
     <%
         if stylify_metatags:
             tags, description = h.extract_metatags(description)
     %>
 
     <div class="truncate-wrap">
         % if personal:
             <div class="metatag" tag="personal">${_('personal')}</div>
         % endif
 
         % if stylify_metatags:
             % for tag_type, tag in tags:
                 ${h.style_metatag(tag_type, tag)|n}
             % endfor
         % endif
         ${description}
     </div>
 
 </%def>
 
 <%def name="repo_group_actions(repo_group_id, repo_group_name, gr_count)">
  <div class="grid_edit">
     <a href="${h.route_path('edit_repo_group',repo_group_name=repo_group_name)}" title="${_('Edit')}">Edit</a>
  </div>
  <div class="grid_delete">
     ${h.secure_form(h.route_path('edit_repo_group_advanced_delete', repo_group_name=repo_group_name), request=request)}
         <input class="btn btn-link btn-danger" id="remove_${repo_group_name}" name="remove_${repo_group_name}"
                onclick="submitConfirm(event, this, _gettext('Confirm to delete this repository group'), _gettext('Delete'), '${_ungettext('`{}` with {} repository','`{}` with {} repositories',gr_count).format(repo_group_name, gr_count)}')"
                type="submit" value="Delete"
         >
     ${h.end_form()}
  </div>
 </%def>
 
 
 <%def name="user_actions(user_id, username)">
  <div class="grid_edit">
    <a href="${h.route_path('user_edit',user_id=user_id)}" title="${_('Edit')}">
      ${_('Edit')}
    </a>
  </div>
  <div class="grid_delete">
   ${h.secure_form(h.route_path('user_delete', user_id=user_id), request=request)}
     <input class="btn btn-link btn-danger" id="remove_user_${user_id}" name="remove_user_${user_id}"
            onclick="submitConfirm(event, this, _gettext('Confirm to delete this user'), _gettext('Delete'), '${username}')"
            type="submit" value="Delete"
     >
   ${h.end_form()}
  </div>
 </%def>
 
 <%def name="user_group_actions(user_group_id, user_group_name)">
  <div class="grid_edit">
     <a href="${h.route_path('edit_user_group', user_group_id=user_group_id)}" title="${_('Edit')}">Edit</a>
  </div>
  <div class="grid_delete">
     ${h.secure_form(h.route_path('user_groups_delete', user_group_id=user_group_id), request=request)}
         <input class="btn btn-link btn-danger" id="remove_group_${user_group_id}" name="remove_group_${user_group_id}"
                onclick="submitConfirm(event, this, _gettext('Confirm to delete this user group'), _gettext('Delete'), '${user_group_name}')"
                type="submit" value="Delete"
         >
     ${h.end_form()}
  </div>
 </%def>
 
 
 <%def name="user_name(user_id, username)">
     ${h.link_to(h.person(username, 'username_or_name_or_email'), h.route_path('user_edit', user_id=user_id))}
 </%def>
 
 <%def name="user_profile(username)">
     ${base.gravatar_with_user(username, 16, tooltip=True)}
 </%def>
 
 <%def name="user_group_name(user_group_name)">
   <div>
       <i class="icon-user-group" title="${_('User group')}"></i>
       ${h.link_to_group(user_group_name)}
   </div>
 </%def>
 
 
 ## GISTS
 
 <%def name="gist_gravatar(full_contact)">
     <div class="gist_gravatar">
       ${base.gravatar(full_contact, 30)}
     </div>
 </%def>
 
 <%def name="gist_access_id(gist_access_id, full_contact)">
     <div>
       <code>
         <a href="${h.route_path('gist_show', gist_id=gist_access_id)}">${gist_access_id}</a>
       </code>
     </div>
 </%def>
 
 <%def name="gist_author(full_contact, created_on, expires)">
     ${base.gravatar_with_user(full_contact, 16, tooltip=True)}
 </%def>
 
 
 <%def name="gist_created(created_on)">
     <div class="created">
       ${h.age_component(created_on, time_is_local=True)}
     </div>
 </%def>
 
 <%def name="gist_expires(expires)">
     <div class="created">
           %if expires == -1:
             ${_('never')}
           %else:
             ${h.age_component(h.time_to_utcdatetime(expires))}
           %endif
     </div>
 </%def>
 
 <%def name="gist_type(gist_type)">
     %if gist_type == 'public':
         <span class="tag tag-gist-public disabled">${_('Public Gist')}</span>
     %else:
         <span class="tag tag-gist-private disabled">${_('Private Gist')}</span>
     %endif
 </%def>
 
 <%def name="gist_description(gist_description)">
   ${gist_description}
 </%def>
 
 
 ## PULL REQUESTS GRID RENDERERS
 
 <%def name="pullrequest_target_repo(repo_name)">
     <div class="truncate">
       ${h.link_to(repo_name,h.route_path('repo_summary',repo_name=repo_name))}
     </div>
 </%def>
 
 <%def name="pullrequest_status(status)">
     <i class="icon-circle review-status-${status}"></i>
 </%def>
 
 <%def name="pullrequest_title(title, description)">
     ${title}
 </%def>
 
 <%def name="pullrequest_comments(comments_nr)">
     <i class="icon-comment"></i> ${comments_nr}
 </%def>
 
 <%def name="pullrequest_name(pull_request_id, state, is_wip, target_repo_name, short=False)">
     <code>
     <a href="${h.route_path('pullrequest_show',repo_name=target_repo_name,pull_request_id=pull_request_id)}">
       % if short:
         !${pull_request_id}
       % else:
         ${_('Pull request !{}').format(pull_request_id)}
       % endif
     </a>
     </code>
     % if state not in ['created']:
         <span class="tag tag-merge-state-${state} tooltip" title="Pull request state is changing">${state}</span>
     % endif
 
     % if is_wip:
         <span class="tag tooltip" title="${_('Work in progress')}">wip</span>
     % endif
 </%def>
 
 <%def name="pullrequest_updated_on(updated_on)">
     ${h.age_component(h.time_to_utcdatetime(updated_on))}
 </%def>
 
 <%def name="pullrequest_author(full_contact)">
     ${base.gravatar_with_user(full_contact, 16, tooltip=True)}
 </%def>
 
 
 ## ARTIFACT RENDERERS
 <%def name="repo_artifact_name(repo_name, file_uid, artifact_display_name)">
     <a href="${h.route_path('repo_artifacts_get', repo_name=repo_name, uid=file_uid)}">
         ${artifact_display_name or '_EMPTY_NAME_'}
     </a>
 </%def>
 
 <%def name="repo_artifact_uid(repo_name, file_uid)">
     <code>${h.shorter(file_uid, size=24, prefix=True)}</code>
 </%def>
 
 <%def name="repo_artifact_sha256(artifact_sha256)">
     <div class="code">${h.shorter(artifact_sha256, 12)}</div>
 </%def>
 
 <%def name="repo_artifact_actions(repo_name, file_store_id, file_uid)">
 ##  <div class="grid_edit">
 ##     <a href="#Edit" title="${_('Edit')}">${_('Edit')}</a>
 ##  </div>
 <div class="grid_edit">
     <a href="${h.route_path('repo_artifacts_info', repo_name=repo_name, uid=file_store_id)}" title="${_('Info')}">${_('Info')}</a>
 </div>
     % if h.HasRepoPermissionAny('repository.admin')(c.repo_name):
     <div class="grid_delete">
     ${h.secure_form(h.route_path('repo_artifacts_delete', repo_name=repo_name, uid=file_store_id), request=request)}
       <input class="btn btn-link btn-danger" id="remove_artifact_${file_store_id}" name="remove_artifact_${file_store_id}"
              onclick="submitConfirm(event, this, _gettext('Confirm to delete this artifact'), _gettext('Delete'), '${file_uid}')"
              type="submit" value="${_('Delete')}"
       >
     ${h.end_form()}
  </div>
 % endif
 </%def>
 
 <%def name="markup_form(form_id, form_text='', help_text=None)">
 
   <div class="markup-form">
     <div class="markup-form-area">
         <div class="markup-form-area-header">
             <ul class="nav-links clearfix">
                 <li class="active">
                     <a href="#edit-text" tabindex="-1" id="edit-btn_${form_id}">${_('Write')}</a>
                 </li>
                 <li class="">
                     <a href="#preview-text" tabindex="-1" id="preview-btn_${form_id}">${_('Preview')}</a>
                 </li>
             </ul>
         </div>
 
         <div class="markup-form-area-write" style="display: block;">
-            <div id="edit-container_${form_id}">
+            <div id="edit-container_${form_id}" style="margin-top: -1px">
                 <textarea id="${form_id}" name="${form_id}" class="comment-block-ta ac-input">${form_text if form_text else ''}</textarea>
             </div>
             <div id="preview-container_${form_id}" class="clearfix" style="display: none;">
                 <div id="preview-box_${form_id}" class="preview-box"></div>
             </div>
         </div>
 
         <div class="markup-form-area-footer">
             <div class="toolbar">
                 <div class="toolbar-text">
                   ${(_('Parsed using %s syntax') % (
                            ('<a href="%s">%s</a>' % (h.route_url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper())),
                        )
                     )|n}
                 </div>
             </div>
         </div>
     </div>
 
     <div class="markup-form-footer">
         % if help_text:
             <span class="help-block">${help_text}</span>
         % endif
     </div>
   </div>
   <script type="text/javascript">
     new MarkupForm('${form_id}');
   </script>
 
 </%def>