pull-requests: allow markup rendered description.

rhodecode/apps/home/__init__.py

@@ -1,49 +1,53 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2016-2018 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/
 from rhodecode.config import routing_links
 
 
 def includeme(config):
 
     config.add_route(
         name='home',
         pattern='/')
 
     config.add_route(
         name='user_autocomplete_data',
         pattern='/_users')
 
     config.add_route(
         name='user_group_autocomplete_data',
         pattern='/_user_groups')
 
     config.add_route(
         name='repo_list_data',
         pattern='/_repos')
 
     config.add_route(
         name='goto_switcher_data',
         pattern='/_goto_data')
 
+    config.add_route(
+        name='markup_preview',
+        pattern='/_markup_preview')
+
     # register our static links via redirection mechanism
     routing_links.connect_redirection_links(config)
 
     # Scan module for configuration decorators.
     config.scan('.views', ignore='.tests')

rhodecode/apps/home/views.py

@@ -1,427 +1,446 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2016-2018 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 re
 import logging
 import collections
 
 from pyramid.view import view_config
 
 from rhodecode.apps._base import BaseAppView
 from rhodecode.lib import helpers as h
 from rhodecode.lib.auth import (
-    LoginRequired, NotAnonymous, HasRepoGroupPermissionAnyDecorator)
+    LoginRequired, NotAnonymous, HasRepoGroupPermissionAnyDecorator,
+    CSRFRequired)
 from rhodecode.lib.index import searcher_from_config
 from rhodecode.lib.utils2 import safe_unicode, str2bool, safe_int
 from rhodecode.lib.ext_json import json
 from rhodecode.model.db import (
     func, or_, in_filter_generator, Repository, RepoGroup, User, UserGroup)
 from rhodecode.model.repo import RepoModel
 from rhodecode.model.repo_group import RepoGroupModel
 from rhodecode.model.scm import RepoGroupList, RepoList
 from rhodecode.model.user import UserModel
 from rhodecode.model.user_group import UserGroupModel
 
 log = logging.getLogger(__name__)
 
 
 class HomeView(BaseAppView):
 
     def load_default_context(self):
         c = self._get_local_tmpl_context()
         c.user = c.auth_user.get_instance()
 
         return c
 
     @LoginRequired()
     @view_config(
         route_name='user_autocomplete_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def user_autocomplete_data(self):
         self.load_default_context()
         query = self.request.GET.get('query')
         active = str2bool(self.request.GET.get('active') or True)
         include_groups = str2bool(self.request.GET.get('user_groups'))
         expand_groups = str2bool(self.request.GET.get('user_groups_expand'))
         skip_default_user = str2bool(self.request.GET.get('skip_default_user'))
 
         log.debug('generating user list, query:%s, active:%s, with_groups:%s',
                   query, active, include_groups)
 
         _users = UserModel().get_users(
             name_contains=query, only_active=active)
 
         def maybe_skip_default_user(usr):
             if skip_default_user and usr['username'] == UserModel.cls.DEFAULT_USER:
                 return False
             return True
         _users = filter(maybe_skip_default_user, _users)
 
         if include_groups:
             # extend with user groups
             _user_groups = UserGroupModel().get_user_groups(
                 name_contains=query, only_active=active,
                 expand_groups=expand_groups)
             _users = _users + _user_groups
 
         return {'suggestions': _users}
 
     @LoginRequired()
     @NotAnonymous()
     @view_config(
         route_name='user_group_autocomplete_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def user_group_autocomplete_data(self):
         self.load_default_context()
         query = self.request.GET.get('query')
         active = str2bool(self.request.GET.get('active') or True)
         expand_groups = str2bool(self.request.GET.get('user_groups_expand'))
 
         log.debug('generating user group list, query:%s, active:%s',
                   query, active)
 
         _user_groups = UserGroupModel().get_user_groups(
             name_contains=query, only_active=active,
             expand_groups=expand_groups)
         _user_groups = _user_groups
 
         return {'suggestions': _user_groups}
 
     def _get_repo_list(self, name_contains=None, repo_type=None, limit=20):
         org_query = name_contains
         allowed_ids = self._rhodecode_user.repo_acl_ids(
             ['repository.read', 'repository.write', 'repository.admin'],
             cache=False, name_filter=name_contains) or [-1]
 
         query = Repository.query()\
             .order_by(func.length(Repository.repo_name))\
             .order_by(Repository.repo_name)\
             .filter(or_(
                 # generate multiple IN to fix limitation problems
                 *in_filter_generator(Repository.repo_id, allowed_ids)
             ))
 
         if repo_type:
             query = query.filter(Repository.repo_type == repo_type)
 
         if name_contains:
             ilike_expression = u'%{}%'.format(safe_unicode(name_contains))
             query = query.filter(
                 Repository.repo_name.ilike(ilike_expression))
             query = query.limit(limit)
 
         acl_iter = query
 
         return [
             {
                 'id': obj.repo_name,
                 'value': org_query,
                 'value_display': obj.repo_name,
                 'text': obj.repo_name,
                 'type': 'repo',
                 'repo_id': obj.repo_id,
                 'repo_type': obj.repo_type,
                 'private': obj.private,
                 'url': h.route_path('repo_summary', repo_name=obj.repo_name)
             }
             for obj in acl_iter]
 
     def _get_repo_group_list(self, name_contains=None, limit=20):
         org_query = name_contains
         allowed_ids = self._rhodecode_user.repo_group_acl_ids(
             ['group.read', 'group.write', 'group.admin'],
             cache=False, name_filter=name_contains) or [-1]
 
         query = RepoGroup.query()\
             .order_by(func.length(RepoGroup.group_name))\
             .order_by(RepoGroup.group_name) \
             .filter(or_(
                 # generate multiple IN to fix limitation problems
                 *in_filter_generator(RepoGroup.group_id, allowed_ids)
             ))
 
         if name_contains:
             ilike_expression = u'%{}%'.format(safe_unicode(name_contains))
             query = query.filter(
                 RepoGroup.group_name.ilike(ilike_expression))
             query = query.limit(limit)
 
         acl_iter = query
 
         return [
             {
                 'id': obj.group_name,
                 'value': org_query,
                 'value_display': obj.group_name,
                 'type': 'repo_group',
                 'url': h.route_path(
                     'repo_group_home', repo_group_name=obj.group_name)
             }
             for obj in acl_iter]
 
     def _get_user_list(self, name_contains=None, limit=20):
         org_query = name_contains
         if not name_contains:
             return []
 
         name_contains = re.compile('(?:user:)(.+)').findall(name_contains)
         if len(name_contains) != 1:
             return []
         name_contains = name_contains[0]
 
         query = User.query()\
             .order_by(func.length(User.username))\
             .order_by(User.username) \
             .filter(User.username != User.DEFAULT_USER)
 
         if name_contains:
             ilike_expression = u'%{}%'.format(safe_unicode(name_contains))
             query = query.filter(
                 User.username.ilike(ilike_expression))
             query = query.limit(limit)
 
         acl_iter = query
 
         return [
             {
                 'id': obj.user_id,
                 'value': org_query,
                 'value_display': obj.username,
                 'type': 'user',
                 'icon_link': h.gravatar_url(obj.email, 30),
                 'url': h.route_path(
                     'user_profile', username=obj.username)
             }
             for obj in acl_iter]
 
     def _get_user_groups_list(self, name_contains=None, limit=20):
         org_query = name_contains
         if not name_contains:
             return []
 
         name_contains = re.compile('(?:user_group:)(.+)').findall(name_contains)
         if len(name_contains) != 1:
             return []
         name_contains = name_contains[0]
 
         query = UserGroup.query()\
             .order_by(func.length(UserGroup.users_group_name))\
             .order_by(UserGroup.users_group_name)
 
         if name_contains:
             ilike_expression = u'%{}%'.format(safe_unicode(name_contains))
             query = query.filter(
                 UserGroup.users_group_name.ilike(ilike_expression))
             query = query.limit(limit)
 
         acl_iter = query
 
         return [
             {
                 'id': obj.users_group_id,
                 'value': org_query,
                 'value_display': obj.users_group_name,
                 'type': 'user_group',
                 'url': h.route_path(
                     'user_group_profile', user_group_name=obj.users_group_name)
             }
             for obj in acl_iter]
 
     def _get_hash_commit_list(self, auth_user, query):
         org_query = query
         if not query or len(query) < 3:
             return []
 
         commit_hashes = re.compile('(?:commit:)([0-9a-f]{2,40})').findall(query)
 
         if len(commit_hashes) != 1:
             return []
         commit_hash = commit_hashes[0]
 
         searcher = searcher_from_config(self.request.registry.settings)
         result = searcher.search(
             'commit_id:%s*' % commit_hash, 'commit', auth_user,
             raise_on_exc=False)
 
         return [
             {
                 'id': entry['commit_id'],
                 'value': org_query,
                 'value_display': 'repo `{}` commit: {}'.format(
                     entry['repository'], entry['commit_id']),
                 'type': 'commit',
                 'repo': entry['repository'],
                 'url': h.route_path(
                     'repo_commit',
                     repo_name=entry['repository'], commit_id=entry['commit_id'])
             }
             for entry in result['results']]
 
     @LoginRequired()
     @view_config(
         route_name='repo_list_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def repo_list_data(self):
         _ = self.request.translate
         self.load_default_context()
 
         query = self.request.GET.get('query')
         repo_type = self.request.GET.get('repo_type')
         log.debug('generating repo list, query:%s, repo_type:%s',
                   query, repo_type)
 
         res = []
         repos = self._get_repo_list(query, repo_type=repo_type)
         if repos:
             res.append({
                 'text': _('Repositories'),
                 'children': repos
             })
 
         data = {
             'more': False,
             'results': res
         }
         return data
 
     @LoginRequired()
     @view_config(
         route_name='goto_switcher_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def goto_switcher_data(self):
         c = self.load_default_context()
 
         _ = self.request.translate
 
         query = self.request.GET.get('query')
         log.debug('generating main filter data, query %s', query)
 
         default_search_val = u'Full text search for: `{}`'.format(query)
         res = []
         if not query:
             return {'suggestions': res}
 
         res.append({
             'id': -1,
             'value': query,
             'value_display': default_search_val,
             'type': 'search',
             'url': h.route_path(
                 'search', _query={'q': query})
         })
         repo_group_id = safe_int(self.request.GET.get('repo_group_id'))
         if repo_group_id:
             repo_group = RepoGroup.get(repo_group_id)
             composed_hint = '{}/{}'.format(repo_group.group_name, query)
             show_hint = not query.startswith(repo_group.group_name)
             if repo_group and show_hint:
                 hint = u'Group search: `{}`'.format(composed_hint)
                 res.append({
                     'id': -1,
                     'value': composed_hint,
                     'value_display': hint,
                     'type': 'hint',
                     'url': ""
                 })
 
         repo_groups = self._get_repo_group_list(query)
         for serialized_repo_group in repo_groups:
             res.append(serialized_repo_group)
 
         repos = self._get_repo_list(query)
         for serialized_repo in repos:
             res.append(serialized_repo)
 
         # TODO(marcink): permissions for that ?
         allowed_user_search = self._rhodecode_user.username != User.DEFAULT_USER
         if allowed_user_search:
             users = self._get_user_list(query)
             for serialized_user in users:
                 res.append(serialized_user)
 
             user_groups = self._get_user_groups_list(query)
             for serialized_user_group in user_groups:
                 res.append(serialized_user_group)
 
         commits = self._get_hash_commit_list(c.auth_user, query)
         if commits:
             unique_repos = collections.OrderedDict()
             for commit in commits:
                 repo_name = commit['repo']
                 unique_repos.setdefault(repo_name, []).append(commit)
 
             for repo, commits in unique_repos.items():
                 for commit in commits:
                     res.append(commit)
 
         return {'suggestions': res}
 
     def _get_groups_and_repos(self, repo_group_id=None):
         # repo groups groups
         repo_group_list = RepoGroup.get_all_repo_groups(group_id=repo_group_id)
         _perms = ['group.read', 'group.write', 'group.admin']
         repo_group_list_acl = RepoGroupList(repo_group_list, perm_set=_perms)
         repo_group_data = RepoGroupModel().get_repo_groups_as_dict(
             repo_group_list=repo_group_list_acl, admin=False)
 
         # repositories
         repo_list = Repository.get_all_repos(group_id=repo_group_id)
         _perms = ['repository.read', 'repository.write', 'repository.admin']
         repo_list_acl = RepoList(repo_list, perm_set=_perms)
         repo_data = RepoModel().get_repos_as_dict(
             repo_list=repo_list_acl, admin=False)
 
         return repo_data, repo_group_data
 
     @LoginRequired()
     @view_config(
         route_name='home', request_method='GET',
         renderer='rhodecode:templates/index.mako')
     def main_page(self):
         c = self.load_default_context()
         c.repo_group = None
 
         repo_data, repo_group_data = self._get_groups_and_repos()
         # json used to render the grids
         c.repos_data = json.dumps(repo_data)
         c.repo_groups_data = json.dumps(repo_group_data)
 
         return self._get_template_context(c)
 
     @LoginRequired()
     @HasRepoGroupPermissionAnyDecorator(
         'group.read', 'group.write', 'group.admin')
     @view_config(
         route_name='repo_group_home', request_method='GET',
         renderer='rhodecode:templates/index_repo_group.mako')
     @view_config(
         route_name='repo_group_home_slash', request_method='GET',
         renderer='rhodecode:templates/index_repo_group.mako')
     def repo_group_main_page(self):
         c = self.load_default_context()
         c.repo_group = self.request.db_repo_group
         repo_data, repo_group_data = self._get_groups_and_repos(
             c.repo_group.group_id)
 
         # json used to render the grids
         c.repos_data = json.dumps(repo_data)
         c.repo_groups_data = json.dumps(repo_group_data)
 
         return self._get_template_context(c)
+
+    @LoginRequired()
+    @CSRFRequired()
+    @view_config(
+        route_name='markup_preview', request_method='POST',
+        renderer='string', xhr=True)
+    def markup_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)
+        return ''

rhodecode/public/css/main.less

@@ -1,2407 +1,2466 b''
 //Primary CSS
 
 //--- IMPORTS ------------------//
 
 @import 'helpers';
 @import 'mixins';
 @import 'rcicons';
 @import 'fonts';
 @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';
 
 //--- BASE ------------------//
 .noscript-error {
     top: 0;
     left: 0;
     width: 100%;
     z-index: 101;
     text-align: center;
     font-family: @text-semibold;
     font-size: 120%;
     color: white;
     background-color: @alert2;
     padding: 5px 0 5px 0;
 }
 
 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;
 	}
 }
 
 .action-link{
 	margin-left: @padding;
 	padding-left: @padding;
 	border-left: @border-thickness solid @border-default-color;
 }
 
 input + .action-link, .action-link.first{
 	border-left: none;
 }
 
 .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;
 }
 
 .clipboard-action {
   cursor: pointer;
 }
 
 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 {
         font-family: @text-semibold;
         color: @grey4;
     }
 
     .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-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;
 
 	position: relative;
 	vertical-align: bottom;
 	padding: 0 @header-padding;
 	background-color: @grey2;
 	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
 }
 #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;
 		}
 
         &:before { content: none; }
 	}
 }
 
 
 // My Account PR list
 
 #show_closed {
     margin: 0 1em 0 0;
 }
 
 .pullrequestlist {
     .closed {
         background-color: @grey6;
     }
     .td-status {
         padding-left: .5em;
     }
     .log-container .truncate {
         height: 2.75em;
         white-space: pre-line;
     }
     table.rctable .user {
         padding-left: 0;
     }
     table.rctable {
         td.td-description,
         .rc-user {
             min-width: auto;
         }
     }
 }
 
 // Pull Requests
 
 .pullrequests_section_head {
 	display: block;
 	clear: both;
 	margin: @padding 0;
 	font-family: @text-bold;
 }
 
 .pr-origininfo, .pr-targetinfo {
     position: relative;
 
     .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: 72%;
     font-size: 1em;
     font-family: @text-bold;
     margin: 0;
     padding: 0 0 0 @padding/4;
     line-height: 1.7em;
     color: @text-color;
     letter-spacing: .02em;
 }
 
 #pullrequest_title {
     width: 100%;
     box-sizing: border-box;
 }
 
 #pr_open_message {
     border: @border-thickness solid #fff;
     border-radius: @border-radius;
     padding: @padding-large-vertical @padding-large-vertical @padding-large-vertical 0;
     text-align: left;
     overflow: hidden;
 }
 
 .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;
 }
 
 .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: 405px;
     }
 }
 
 //--- MODULES ------------------//
 
 
 // Server Announcement
 #server-announcement {
     width: 95%;
     margin: @padding auto;
     padding: @padding;
     border-width: 2px;
     border-style: solid;
     .border-radius(2px);
     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;
 	background-color: @grey6;
 
 	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 {
 	&.disabled {
 		opacity: .5;
 	}
 }
 
 // remove extra padding in firefox
 input::-moz-focus-inner { border:0; padding:0 }
 
 .adjacent input {
 	margin-bottom: @padding;
 }
 
 .permissions_boxes {
 	display: block;
 }
 
 //TODO: lisa: this should be in tables
 .show_more_col {
     width: 20px;
 }
 
 //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 @rcblue;
 	background:white url("../images/dt-arrow-dn.png") no-repeat 100% 50%;
 	color: @rcblue;
 
 	&:after {
 		content: "\00A0\25BE";
 	}
 
 	&:focus {
 		outline: none;
 	}
 }
 
 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;
     border: 1px solid @grey4;
     box-sizing: content-box;
 
     &.gravatar-large {
         margin: -0.5em .25em -0.5em 0;
     }
 
     & + .user {
         display: inline;
         margin: 0;
         padding: 0 0 0 .17em;
         line-height: 1em;
     }
 }
 
 .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/2 + @border-thickness * 2);
 
 
     .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;
     }
 }
 
 
 // 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 {
 		display: inline-block;
 		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_nodes {
     padding-top: 43px;
 }
 
 #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 {
     .flag_status {
         margin: 0;
     }
 
     .pagination-left {
         float: left;
         clear: both;
     }
 
     .log-container {
         max-width: 345px;
 
         .message{
             max-width: 340px;
         }
     }
 
     .graph-col-wrapper {
         padding-left: 110px;
 
         #graph_nodes {
             width: 100px;
             margin-left: -110px;
             float: left;
             clear: left;
         }
     }
 
     .load-more-commits {
         text-align: center;
     }
     .load-more-commits:hover {
         background-color: @grey7;
     }
     .load-more-commits {
       a {
         display: block;
       }
     }
 }
 
 #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;
 }
 
 img {
 	border: none;
 	outline: none;
 }
  user-profile-header
 label {
 
     input[type="checkbox"] {
         margin-right: 1em;
     }
     input[type="radio"] {
         margin-right: 1em;
     }
 }
 
 .flag_status {
     margin: 2px 8px 6px 2px;
     &.under_review {
         .circle(5px, @alert3);
     }
     &.approved {
         .circle(5px, @alert1);
     }
     &.rejected,
     &.forced_closed{
         .circle(5px, @alert2);
     }
     &.not_reviewed {
         .circle(5px, @grey5);
     }
 }
 
 .flag_status_comment_box {
 	margin: 5px 6px 0px 2px;
 }
 .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
     margin: 0;
     border: @border-thickness solid @rcblue;
     border-radius: @border-radius;
     color: @rcblue;
     background-color: white;
 }
 .autocomplete-selected {
     background: #F0F0F0;
 }
 .ac-container-wrap {
 	margin: 0;
 	padding: 8px;
 	border-bottom: @border-thickness solid @rclightblue;
 	list-style-type: none;
 	cursor: pointer;
 
 		&:hover {
 			background-color: @rclightblue;
 	}
 
 	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;
     }
 }
 
 #file_history_container {
     display: none;
 }
 
 .file-history-inner {
     margin-bottom: 10px;
 }
 
 // Pull Requests
 .summary-details {
     width: 72%;
 }
 .pr-summary {
     border-bottom: @border-thickness solid @grey5;
     margin-bottom: @space;
 }
 .reviewers-title {
     width: 25%;
     min-width: 200px;
 }
 .reviewers {
     width: 25%;
     min-width: 200px;
 }
 .reviewers ul li {
     position: relative;
     width: 100%;
     padding-bottom: 8px;
 }
 
 .reviewer_entry {
   min-height: 55px;
 }
 
 .reviewers_member {
     width: 100%;
     overflow: auto;
 }
 .reviewer_reason {
     padding-left: 20px;
     line-height: 1.5em;
 }
 .reviewer_status {
     display: inline-block;
     vertical-align: top;
     width: 25px;
     min-width: 25px;
     height: 1.2em;
     margin-top: 3px;
     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 {
     position: absolute;
     left: 15px;
     top: 8px;
     width: 16px;
     font-size: 11px;
     margin: 0;
     padding: 0;
     color: black;
 }
 
 .reviewer_member_mandatory_remove,
 .reviewer_member_remove {
     position: absolute;
     right: 0;
     top: 0;
     width: 16px;
     margin-bottom: 10px;
     padding: 0;
     color: black;
 }
 
 .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 {
     padding-bottom: 8px;
     border-bottom: @border-thickness solid @grey5;
 
     .action_button.disabled {
         color: @grey4;
         cursor: inherit;
     }
     .action_button {
         color: @rcblue;
     }
 }
 .pr-details-content {
     margin-top: @textmargin;
     margin-bottom: @textmargin;
 }
-.pr-description {
-    white-space:pre-wrap;
-}
 
 .pr-reviewer-rules {
    padding: 10px 0px 20px 0px;
 }
 
 .group_members {
     margin-top: 0;
     padding: 0;
     list-style: outside none none;
 
     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;
 }
 
 .comments-summary-td {
   border-top: 1px dashed @grey5;
 }
 
 // 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: 92%;
     margin-bottom: 1em;
 }
 
 .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;
     position: relative;
     vertical-align: middle;
     width: 4px;
     height: @basefontsize;
 
     &:after {
         content: "\00A0\25BE";
         display: inline-block;
         width:10px;
         line-height: 5px;
         font-size: 12px;
         cursor: pointer;
     }
 }
 
 .journal_more .show_more {
     display: inline;
 
     &:after {
         content: none;
     }
 }
 
 .open .show_more:after,
 .select2-dropdown-open .show_more:after {
     .rotate(180deg);
     margin-left: 4px;
 }
 
 
 .compare_view_commits .collapse_commit:after {
     cursor: pointer;
     content: "\00A0\25B4";
     margin-left: -3px;
     font-size: 17px;
     color: @grey4;
 }
 
 .diff_links {
     margin-left: 8px;
 }
 
 div.ancestor {
     margin: -30px 0px;
 }
 
 .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 ul {
     padding: 0px 0px;
 }
 
 .pull-request-merge li:before{
     content: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;
 
     table {
       padding: 0px 5px;
     }
 
     td {
       line-height: 15px;
     }
 
     .flag_status {
         margin: 0;
     }
 
     .compare-radio-button {
       position: relative;
       top: -3px;
     }
 }
 
 
 #close_pull_request {
     margin-right: 0px;
 }
 
 .empty_data {
     color: @grey4;
 }
 
 #changeset_compare_view_content {
     margin-bottom: @space;
     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;
 
 		.flag_status {
 			float: left;
 		}
 	}
 }
 
 
 .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;
 	}
 
 	.desc{
 		width: 1163px;
 	}
 
 	.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;
 	}
 }
 
 
 .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;
 
             &:before { content: 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 {
     border-bottom: @border-thickness solid @border-default-color;
 
     .breadcrumbs {
         margin-bottom: 0;
     }
 }
 
 .edit-file-fieldset {
     margin-top: @sidebarpadding;
 
     .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: left;
     margin: 0 0 0 15px;
 }
 
 h3.files_location{
     line-height: 2.4em;
 }
 
 .browser-nav {
 	display: table;
 	margin-bottom: @space;
 
 
 	.info_box {
 		display: inline-table;
 		height: 2.5em;
 
         .browser-cur-rev, .info_box_elem {
 			display: table-cell;
 			vertical-align: middle;
 		}
 
 		.info_box_elem {
 			border-top: @border-thickness solid @rcblue;
 			border-bottom: @border-thickness solid @rcblue;
 
             #at_rev, a {
                 padding: 0.6em 0.9em;
                 margin: 0;
                 .box-shadow(none);
                 border: 0;
                 height: 12px;
             }
 
             input#at_rev {
                 max-width: 50px;
                 text-align: right;
             }
 
 			&.previous {
 				border: @border-thickness solid @rcblue;
                 .disabled {
                   color: @grey4;
                   cursor: not-allowed;
                 }
 			}
 
 			&.next {
 				border: @border-thickness solid @rcblue;
                 .disabled {
                   color: @grey4;
                   cursor: not-allowed;
                 }
 			}
 		}
 
 		.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;
 			}
 		}
 	}
 
 	.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;
 }
 
 .node-filter {
   font-size: @repo-title-fontsize;
   padding: 4px 0px 0px 0px;
 
   .node-filter-path {
       float: left;
       color: @grey4;
     }
     .node-filter-input {
         float: left;
         margin: -2px 0px 0px 2px;
         input {
             padding: 2px;
             border: none;
             font-size: @repo-title-fontsize;
         }
     }
 }
 
 
 .browser-result{
 	td a{
 		margin-left: 0.5em;
 		display: inline-block;
 
 		em{
 			font-family: @text-bold;
 		}
 	}
 }
 
 .browser-highlight{
 	background-color: @grey5-alpha;
 }
 
 
 // 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;
 	}
 }
 
 div.search-feedback-items {
 	display: inline-block;
 	padding:0px 0px 0px 96px;
 }
 
 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 @border-default-color;
         .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; }
     }
 
 }
 
 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: 750px;
 	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;
     }
 }
 
 
 // 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: 'Monaco', 'Courier', 'Courier New', 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;
+}

rhodecode/public/js/rhodecode/routes.js

@@ -1,321 +1,325 b''
 
 /******************************************************************************
  *                                                                            *
  *                      DO NOT CHANGE THIS FILE MANUALLY                      *
  *                                                                            *
  *                                                                            *
  *        This file is automatically generated when the app starts up with    *
  *                         generate_js_files = true                           *
  *                                                                            *
  *  To add a route here pass jsroute=True to the route definition in the app  *
  *                                                                            *
  ******************************************************************************/
 function registerRCRoutes() {
     // routes registration
     pyroutes.register('favicon', '/favicon.ico', []);
     pyroutes.register('robots', '/robots.txt', []);
     pyroutes.register('auth_home', '/_admin/auth*traverse', []);
     pyroutes.register('global_integrations_new', '/_admin/integrations/new', []);
     pyroutes.register('global_integrations_home', '/_admin/integrations', []);
     pyroutes.register('global_integrations_list', '/_admin/integrations/%(integration)s', ['integration']);
     pyroutes.register('global_integrations_create', '/_admin/integrations/%(integration)s/new', ['integration']);
     pyroutes.register('global_integrations_edit', '/_admin/integrations/%(integration)s/%(integration_id)s', ['integration', 'integration_id']);
     pyroutes.register('repo_group_integrations_home', '/%(repo_group_name)s/_settings/integrations', ['repo_group_name']);
     pyroutes.register('repo_group_integrations_new', '/%(repo_group_name)s/_settings/integrations/new', ['repo_group_name']);
     pyroutes.register('repo_group_integrations_list', '/%(repo_group_name)s/_settings/integrations/%(integration)s', ['repo_group_name', 'integration']);
     pyroutes.register('repo_group_integrations_create', '/%(repo_group_name)s/_settings/integrations/%(integration)s/new', ['repo_group_name', 'integration']);
     pyroutes.register('repo_group_integrations_edit', '/%(repo_group_name)s/_settings/integrations/%(integration)s/%(integration_id)s', ['repo_group_name', 'integration', 'integration_id']);
     pyroutes.register('repo_integrations_home', '/%(repo_name)s/settings/integrations', ['repo_name']);
     pyroutes.register('repo_integrations_new', '/%(repo_name)s/settings/integrations/new', ['repo_name']);
     pyroutes.register('repo_integrations_list', '/%(repo_name)s/settings/integrations/%(integration)s', ['repo_name', 'integration']);
     pyroutes.register('repo_integrations_create', '/%(repo_name)s/settings/integrations/%(integration)s/new', ['repo_name', 'integration']);
     pyroutes.register('repo_integrations_edit', '/%(repo_name)s/settings/integrations/%(integration)s/%(integration_id)s', ['repo_name', 'integration', 'integration_id']);
     pyroutes.register('ops_ping', '/_admin/ops/ping', []);
     pyroutes.register('ops_error_test', '/_admin/ops/error', []);
     pyroutes.register('ops_redirect_test', '/_admin/ops/redirect', []);
     pyroutes.register('ops_ping_legacy', '/_admin/ping', []);
     pyroutes.register('ops_error_test_legacy', '/_admin/error_test', []);
     pyroutes.register('admin_home', '/_admin', []);
     pyroutes.register('admin_audit_logs', '/_admin/audit_logs', []);
     pyroutes.register('admin_audit_log_entry', '/_admin/audit_logs/%(audit_log_id)s', ['audit_log_id']);
     pyroutes.register('pull_requests_global_0', '/_admin/pull_requests/%(pull_request_id)s', ['pull_request_id']);
     pyroutes.register('pull_requests_global_1', '/_admin/pull-requests/%(pull_request_id)s', ['pull_request_id']);
     pyroutes.register('pull_requests_global', '/_admin/pull-request/%(pull_request_id)s', ['pull_request_id']);
     pyroutes.register('admin_settings_open_source', '/_admin/settings/open_source', []);
     pyroutes.register('admin_settings_vcs_svn_generate_cfg', '/_admin/settings/vcs/svn_generate_cfg', []);
     pyroutes.register('admin_settings_system', '/_admin/settings/system', []);
     pyroutes.register('admin_settings_system_update', '/_admin/settings/system/updates', []);
     pyroutes.register('admin_settings_sessions', '/_admin/settings/sessions', []);
     pyroutes.register('admin_settings_sessions_cleanup', '/_admin/settings/sessions/cleanup', []);
     pyroutes.register('admin_settings_process_management', '/_admin/settings/process_management', []);
     pyroutes.register('admin_settings_process_management_data', '/_admin/settings/process_management/data', []);
     pyroutes.register('admin_settings_process_management_signal', '/_admin/settings/process_management/signal', []);
     pyroutes.register('admin_settings_process_management_master_signal', '/_admin/settings/process_management/master_signal', []);
     pyroutes.register('admin_defaults_repositories', '/_admin/defaults/repositories', []);
     pyroutes.register('admin_defaults_repositories_update', '/_admin/defaults/repositories/update', []);
     pyroutes.register('admin_settings', '/_admin/settings', []);
     pyroutes.register('admin_settings_update', '/_admin/settings/update', []);
     pyroutes.register('admin_settings_global', '/_admin/settings/global', []);
     pyroutes.register('admin_settings_global_update', '/_admin/settings/global/update', []);
     pyroutes.register('admin_settings_vcs', '/_admin/settings/vcs', []);
     pyroutes.register('admin_settings_vcs_update', '/_admin/settings/vcs/update', []);
     pyroutes.register('admin_settings_vcs_svn_pattern_delete', '/_admin/settings/vcs/svn_pattern_delete', []);
     pyroutes.register('admin_settings_mapping', '/_admin/settings/mapping', []);
     pyroutes.register('admin_settings_mapping_update', '/_admin/settings/mapping/update', []);
     pyroutes.register('admin_settings_visual', '/_admin/settings/visual', []);
     pyroutes.register('admin_settings_visual_update', '/_admin/settings/visual/update', []);
     pyroutes.register('admin_settings_issuetracker', '/_admin/settings/issue-tracker', []);
     pyroutes.register('admin_settings_issuetracker_update', '/_admin/settings/issue-tracker/update', []);
     pyroutes.register('admin_settings_issuetracker_test', '/_admin/settings/issue-tracker/test', []);
     pyroutes.register('admin_settings_issuetracker_delete', '/_admin/settings/issue-tracker/delete', []);
     pyroutes.register('admin_settings_email', '/_admin/settings/email', []);
     pyroutes.register('admin_settings_email_update', '/_admin/settings/email/update', []);
     pyroutes.register('admin_settings_hooks', '/_admin/settings/hooks', []);
     pyroutes.register('admin_settings_hooks_update', '/_admin/settings/hooks/update', []);
     pyroutes.register('admin_settings_hooks_delete', '/_admin/settings/hooks/delete', []);
     pyroutes.register('admin_settings_search', '/_admin/settings/search', []);
     pyroutes.register('admin_settings_labs', '/_admin/settings/labs', []);
     pyroutes.register('admin_settings_labs_update', '/_admin/settings/labs/update', []);
+    pyroutes.register('admin_settings_automation', '/_admin/_admin/settings/automation', []);
     pyroutes.register('admin_permissions_application', '/_admin/permissions/application', []);
     pyroutes.register('admin_permissions_application_update', '/_admin/permissions/application/update', []);
     pyroutes.register('admin_permissions_global', '/_admin/permissions/global', []);
     pyroutes.register('admin_permissions_global_update', '/_admin/permissions/global/update', []);
     pyroutes.register('admin_permissions_object', '/_admin/permissions/object', []);
     pyroutes.register('admin_permissions_object_update', '/_admin/permissions/object/update', []);
     pyroutes.register('admin_permissions_ips', '/_admin/permissions/ips', []);
     pyroutes.register('admin_permissions_overview', '/_admin/permissions/overview', []);
     pyroutes.register('admin_permissions_auth_token_access', '/_admin/permissions/auth_token_access', []);
     pyroutes.register('admin_permissions_ssh_keys', '/_admin/permissions/ssh_keys', []);
     pyroutes.register('admin_permissions_ssh_keys_data', '/_admin/permissions/ssh_keys/data', []);
     pyroutes.register('admin_permissions_ssh_keys_update', '/_admin/permissions/ssh_keys/update', []);
     pyroutes.register('users', '/_admin/users', []);
     pyroutes.register('users_data', '/_admin/users_data', []);
     pyroutes.register('users_create', '/_admin/users/create', []);
     pyroutes.register('users_new', '/_admin/users/new', []);
     pyroutes.register('user_edit', '/_admin/users/%(user_id)s/edit', ['user_id']);
     pyroutes.register('user_edit_advanced', '/_admin/users/%(user_id)s/edit/advanced', ['user_id']);
     pyroutes.register('user_edit_global_perms', '/_admin/users/%(user_id)s/edit/global_permissions', ['user_id']);
     pyroutes.register('user_edit_global_perms_update', '/_admin/users/%(user_id)s/edit/global_permissions/update', ['user_id']);
     pyroutes.register('user_update', '/_admin/users/%(user_id)s/update', ['user_id']);
     pyroutes.register('user_delete', '/_admin/users/%(user_id)s/delete', ['user_id']);
     pyroutes.register('user_force_password_reset', '/_admin/users/%(user_id)s/password_reset', ['user_id']);
     pyroutes.register('user_create_personal_repo_group', '/_admin/users/%(user_id)s/create_repo_group', ['user_id']);
     pyroutes.register('edit_user_auth_tokens', '/_admin/users/%(user_id)s/edit/auth_tokens', ['user_id']);
     pyroutes.register('edit_user_auth_tokens_add', '/_admin/users/%(user_id)s/edit/auth_tokens/new', ['user_id']);
     pyroutes.register('edit_user_auth_tokens_delete', '/_admin/users/%(user_id)s/edit/auth_tokens/delete', ['user_id']);
     pyroutes.register('edit_user_ssh_keys', '/_admin/users/%(user_id)s/edit/ssh_keys', ['user_id']);
     pyroutes.register('edit_user_ssh_keys_generate_keypair', '/_admin/users/%(user_id)s/edit/ssh_keys/generate', ['user_id']);
     pyroutes.register('edit_user_ssh_keys_add', '/_admin/users/%(user_id)s/edit/ssh_keys/new', ['user_id']);
     pyroutes.register('edit_user_ssh_keys_delete', '/_admin/users/%(user_id)s/edit/ssh_keys/delete', ['user_id']);
     pyroutes.register('edit_user_emails', '/_admin/users/%(user_id)s/edit/emails', ['user_id']);
     pyroutes.register('edit_user_emails_add', '/_admin/users/%(user_id)s/edit/emails/new', ['user_id']);
     pyroutes.register('edit_user_emails_delete', '/_admin/users/%(user_id)s/edit/emails/delete', ['user_id']);
     pyroutes.register('edit_user_ips', '/_admin/users/%(user_id)s/edit/ips', ['user_id']);
     pyroutes.register('edit_user_ips_add', '/_admin/users/%(user_id)s/edit/ips/new', ['user_id']);
     pyroutes.register('edit_user_ips_delete', '/_admin/users/%(user_id)s/edit/ips/delete', ['user_id']);
     pyroutes.register('edit_user_perms_summary', '/_admin/users/%(user_id)s/edit/permissions_summary', ['user_id']);
     pyroutes.register('edit_user_perms_summary_json', '/_admin/users/%(user_id)s/edit/permissions_summary/json', ['user_id']);
     pyroutes.register('edit_user_groups_management', '/_admin/users/%(user_id)s/edit/groups_management', ['user_id']);
     pyroutes.register('edit_user_groups_management_updates', '/_admin/users/%(user_id)s/edit/edit_user_groups_management/updates', ['user_id']);
     pyroutes.register('edit_user_audit_logs', '/_admin/users/%(user_id)s/edit/audit', ['user_id']);
     pyroutes.register('user_groups', '/_admin/user_groups', []);
     pyroutes.register('user_groups_data', '/_admin/user_groups_data', []);
     pyroutes.register('user_groups_new', '/_admin/user_groups/new', []);
     pyroutes.register('user_groups_create', '/_admin/user_groups/create', []);
     pyroutes.register('repos', '/_admin/repos', []);
     pyroutes.register('repo_new', '/_admin/repos/new', []);
     pyroutes.register('repo_create', '/_admin/repos/create', []);
     pyroutes.register('repo_groups', '/_admin/repo_groups', []);
     pyroutes.register('repo_group_new', '/_admin/repo_group/new', []);
     pyroutes.register('repo_group_create', '/_admin/repo_group/create', []);
     pyroutes.register('channelstream_connect', '/_admin/channelstream/connect', []);
     pyroutes.register('channelstream_subscribe', '/_admin/channelstream/subscribe', []);
     pyroutes.register('channelstream_proxy', '/_channelstream', []);
     pyroutes.register('login', '/_admin/login', []);
     pyroutes.register('logout', '/_admin/logout', []);
     pyroutes.register('register', '/_admin/register', []);
     pyroutes.register('reset_password', '/_admin/password_reset', []);
     pyroutes.register('reset_password_confirmation', '/_admin/password_reset_confirmation', []);
     pyroutes.register('home', '/', []);
     pyroutes.register('user_autocomplete_data', '/_users', []);
     pyroutes.register('user_group_autocomplete_data', '/_user_groups', []);
     pyroutes.register('repo_list_data', '/_repos', []);
     pyroutes.register('goto_switcher_data', '/_goto_data', []);
+    pyroutes.register('markup_preview', '/_markup_preview', []);
     pyroutes.register('journal', '/_admin/journal', []);
     pyroutes.register('journal_rss', '/_admin/journal/rss', []);
     pyroutes.register('journal_atom', '/_admin/journal/atom', []);
     pyroutes.register('journal_public', '/_admin/public_journal', []);
     pyroutes.register('journal_public_atom', '/_admin/public_journal/atom', []);
     pyroutes.register('journal_public_atom_old', '/_admin/public_journal_atom', []);
     pyroutes.register('journal_public_rss', '/_admin/public_journal/rss', []);
     pyroutes.register('journal_public_rss_old', '/_admin/public_journal_rss', []);
     pyroutes.register('toggle_following', '/_admin/toggle_following', []);
     pyroutes.register('repo_creating', '/%(repo_name)s/repo_creating', ['repo_name']);
     pyroutes.register('repo_creating_check', '/%(repo_name)s/repo_creating_check', ['repo_name']);
     pyroutes.register('repo_summary_explicit', '/%(repo_name)s/summary', ['repo_name']);
     pyroutes.register('repo_summary_commits', '/%(repo_name)s/summary-commits', ['repo_name']);
     pyroutes.register('repo_commit', '/%(repo_name)s/changeset/%(commit_id)s', ['repo_name', 'commit_id']);
     pyroutes.register('repo_commit_children', '/%(repo_name)s/changeset_children/%(commit_id)s', ['repo_name', 'commit_id']);
     pyroutes.register('repo_commit_parents', '/%(repo_name)s/changeset_parents/%(commit_id)s', ['repo_name', 'commit_id']);
     pyroutes.register('repo_commit_raw', '/%(repo_name)s/changeset-diff/%(commit_id)s', ['repo_name', 'commit_id']);
     pyroutes.register('repo_commit_patch', '/%(repo_name)s/changeset-patch/%(commit_id)s', ['repo_name', 'commit_id']);
     pyroutes.register('repo_commit_download', '/%(repo_name)s/changeset-download/%(commit_id)s', ['repo_name', 'commit_id']);
     pyroutes.register('repo_commit_data', '/%(repo_name)s/changeset-data/%(commit_id)s', ['repo_name', 'commit_id']);
     pyroutes.register('repo_commit_comment_create', '/%(repo_name)s/changeset/%(commit_id)s/comment/create', ['repo_name', 'commit_id']);
     pyroutes.register('repo_commit_comment_preview', '/%(repo_name)s/changeset/%(commit_id)s/comment/preview', ['repo_name', 'commit_id']);
     pyroutes.register('repo_commit_comment_delete', '/%(repo_name)s/changeset/%(commit_id)s/comment/%(comment_id)s/delete', ['repo_name', 'commit_id', 'comment_id']);
     pyroutes.register('repo_commit_raw_deprecated', '/%(repo_name)s/raw-changeset/%(commit_id)s', ['repo_name', 'commit_id']);
     pyroutes.register('repo_archivefile', '/%(repo_name)s/archive/%(fname)s', ['repo_name', 'fname']);
     pyroutes.register('repo_files_diff', '/%(repo_name)s/diff/%(f_path)s', ['repo_name', 'f_path']);
     pyroutes.register('repo_files_diff_2way_redirect', '/%(repo_name)s/diff-2way/%(f_path)s', ['repo_name', 'f_path']);
     pyroutes.register('repo_files', '/%(repo_name)s/files/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_files:default_path', '/%(repo_name)s/files/%(commit_id)s/', ['repo_name', 'commit_id']);
     pyroutes.register('repo_files:default_commit', '/%(repo_name)s/files', ['repo_name']);
     pyroutes.register('repo_files:rendered', '/%(repo_name)s/render/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_files:annotated', '/%(repo_name)s/annotate/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_files:annotated_previous', '/%(repo_name)s/annotate-previous/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_nodetree_full', '/%(repo_name)s/nodetree_full/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_nodetree_full:default_path', '/%(repo_name)s/nodetree_full/%(commit_id)s/', ['repo_name', 'commit_id']);
     pyroutes.register('repo_files_nodelist', '/%(repo_name)s/nodelist/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_file_raw', '/%(repo_name)s/raw/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_file_download', '/%(repo_name)s/download/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_file_download:legacy', '/%(repo_name)s/rawfile/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_file_history', '/%(repo_name)s/history/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_file_authors', '/%(repo_name)s/authors/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_files_remove_file', '/%(repo_name)s/remove_file/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_files_delete_file', '/%(repo_name)s/delete_file/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_files_edit_file', '/%(repo_name)s/edit_file/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_files_update_file', '/%(repo_name)s/update_file/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_files_add_file', '/%(repo_name)s/add_file/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_files_create_file', '/%(repo_name)s/create_file/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_refs_data', '/%(repo_name)s/refs-data', ['repo_name']);
     pyroutes.register('repo_refs_changelog_data', '/%(repo_name)s/refs-data-changelog', ['repo_name']);
     pyroutes.register('repo_stats', '/%(repo_name)s/repo_stats/%(commit_id)s', ['repo_name', 'commit_id']);
     pyroutes.register('repo_changelog', '/%(repo_name)s/changelog', ['repo_name']);
     pyroutes.register('repo_changelog_file', '/%(repo_name)s/changelog/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_changelog_elements', '/%(repo_name)s/changelog_elements', ['repo_name']);
     pyroutes.register('repo_changelog_elements_file', '/%(repo_name)s/changelog_elements/%(commit_id)s/%(f_path)s', ['repo_name', 'commit_id', 'f_path']);
     pyroutes.register('repo_compare_select', '/%(repo_name)s/compare', ['repo_name']);
     pyroutes.register('repo_compare', '/%(repo_name)s/compare/%(source_ref_type)s@%(source_ref)s...%(target_ref_type)s@%(target_ref)s', ['repo_name', 'source_ref_type', 'source_ref', 'target_ref_type', 'target_ref']);
     pyroutes.register('tags_home', '/%(repo_name)s/tags', ['repo_name']);
     pyroutes.register('branches_home', '/%(repo_name)s/branches', ['repo_name']);
     pyroutes.register('bookmarks_home', '/%(repo_name)s/bookmarks', ['repo_name']);
     pyroutes.register('repo_fork_new', '/%(repo_name)s/fork', ['repo_name']);
     pyroutes.register('repo_fork_create', '/%(repo_name)s/fork/create', ['repo_name']);
     pyroutes.register('repo_forks_show_all', '/%(repo_name)s/forks', ['repo_name']);
     pyroutes.register('repo_forks_data', '/%(repo_name)s/forks/data', ['repo_name']);
     pyroutes.register('pullrequest_show', '/%(repo_name)s/pull-request/%(pull_request_id)s', ['repo_name', 'pull_request_id']);
     pyroutes.register('pullrequest_show_all', '/%(repo_name)s/pull-request', ['repo_name']);
     pyroutes.register('pullrequest_show_all_data', '/%(repo_name)s/pull-request-data', ['repo_name']);
     pyroutes.register('pullrequest_repo_refs', '/%(repo_name)s/pull-request/refs/%(target_repo_name)s', ['repo_name', 'target_repo_name']);
     pyroutes.register('pullrequest_repo_destinations', '/%(repo_name)s/pull-request/repo-destinations', ['repo_name']);
     pyroutes.register('pullrequest_new', '/%(repo_name)s/pull-request/new', ['repo_name']);
     pyroutes.register('pullrequest_create', '/%(repo_name)s/pull-request/create', ['repo_name']);
     pyroutes.register('pullrequest_update', '/%(repo_name)s/pull-request/%(pull_request_id)s/update', ['repo_name', 'pull_request_id']);
     pyroutes.register('pullrequest_merge', '/%(repo_name)s/pull-request/%(pull_request_id)s/merge', ['repo_name', 'pull_request_id']);
     pyroutes.register('pullrequest_delete', '/%(repo_name)s/pull-request/%(pull_request_id)s/delete', ['repo_name', 'pull_request_id']);
     pyroutes.register('pullrequest_comment_create', '/%(repo_name)s/pull-request/%(pull_request_id)s/comment', ['repo_name', 'pull_request_id']);
     pyroutes.register('pullrequest_comment_delete', '/%(repo_name)s/pull-request/%(pull_request_id)s/comment/%(comment_id)s/delete', ['repo_name', 'pull_request_id', 'comment_id']);
     pyroutes.register('edit_repo', '/%(repo_name)s/settings', ['repo_name']);
     pyroutes.register('edit_repo_advanced', '/%(repo_name)s/settings/advanced', ['repo_name']);
     pyroutes.register('edit_repo_advanced_delete', '/%(repo_name)s/settings/advanced/delete', ['repo_name']);
     pyroutes.register('edit_repo_advanced_locking', '/%(repo_name)s/settings/advanced/locking', ['repo_name']);
     pyroutes.register('edit_repo_advanced_journal', '/%(repo_name)s/settings/advanced/journal', ['repo_name']);
     pyroutes.register('edit_repo_advanced_fork', '/%(repo_name)s/settings/advanced/fork', ['repo_name']);
+    pyroutes.register('edit_repo_advanced_hooks', '/%(repo_name)s/settings/advanced/hooks', ['repo_name']);
     pyroutes.register('edit_repo_caches', '/%(repo_name)s/settings/caches', ['repo_name']);
     pyroutes.register('edit_repo_perms', '/%(repo_name)s/settings/permissions', ['repo_name']);
     pyroutes.register('edit_repo_maintenance', '/%(repo_name)s/settings/maintenance', ['repo_name']);
     pyroutes.register('edit_repo_maintenance_execute', '/%(repo_name)s/settings/maintenance/execute', ['repo_name']);
     pyroutes.register('edit_repo_fields', '/%(repo_name)s/settings/fields', ['repo_name']);
     pyroutes.register('edit_repo_fields_create', '/%(repo_name)s/settings/fields/create', ['repo_name']);
     pyroutes.register('edit_repo_fields_delete', '/%(repo_name)s/settings/fields/%(field_id)s/delete', ['repo_name', 'field_id']);
     pyroutes.register('repo_edit_toggle_locking', '/%(repo_name)s/settings/toggle_locking', ['repo_name']);
     pyroutes.register('edit_repo_remote', '/%(repo_name)s/settings/remote', ['repo_name']);
     pyroutes.register('edit_repo_remote_pull', '/%(repo_name)s/settings/remote/pull', ['repo_name']);
     pyroutes.register('edit_repo_remote_push', '/%(repo_name)s/settings/remote/push', ['repo_name']);
     pyroutes.register('edit_repo_statistics', '/%(repo_name)s/settings/statistics', ['repo_name']);
     pyroutes.register('edit_repo_statistics_reset', '/%(repo_name)s/settings/statistics/update', ['repo_name']);
     pyroutes.register('edit_repo_issuetracker', '/%(repo_name)s/settings/issue_trackers', ['repo_name']);
     pyroutes.register('edit_repo_issuetracker_test', '/%(repo_name)s/settings/issue_trackers/test', ['repo_name']);
     pyroutes.register('edit_repo_issuetracker_delete', '/%(repo_name)s/settings/issue_trackers/delete', ['repo_name']);
     pyroutes.register('edit_repo_issuetracker_update', '/%(repo_name)s/settings/issue_trackers/update', ['repo_name']);
     pyroutes.register('edit_repo_vcs', '/%(repo_name)s/settings/vcs', ['repo_name']);
     pyroutes.register('edit_repo_vcs_update', '/%(repo_name)s/settings/vcs/update', ['repo_name']);
     pyroutes.register('edit_repo_vcs_svn_pattern_delete', '/%(repo_name)s/settings/vcs/svn_pattern/delete', ['repo_name']);
     pyroutes.register('repo_reviewers', '/%(repo_name)s/settings/review/rules', ['repo_name']);
     pyroutes.register('repo_default_reviewers_data', '/%(repo_name)s/settings/review/default-reviewers', ['repo_name']);
     pyroutes.register('repo_automation', '/%(repo_name)s/settings/automation', ['repo_name']);
     pyroutes.register('edit_repo_strip', '/%(repo_name)s/settings/strip', ['repo_name']);
     pyroutes.register('strip_check', '/%(repo_name)s/settings/strip_check', ['repo_name']);
     pyroutes.register('strip_execute', '/%(repo_name)s/settings/strip_execute', ['repo_name']);
     pyroutes.register('edit_repo_audit_logs', '/%(repo_name)s/settings/audit_logs', ['repo_name']);
     pyroutes.register('rss_feed_home', '/%(repo_name)s/feed/rss', ['repo_name']);
     pyroutes.register('atom_feed_home', '/%(repo_name)s/feed/atom', ['repo_name']);
     pyroutes.register('repo_summary', '/%(repo_name)s', ['repo_name']);
     pyroutes.register('repo_summary_slash', '/%(repo_name)s/', ['repo_name']);
     pyroutes.register('edit_repo_group', '/%(repo_group_name)s/_edit', ['repo_group_name']);
     pyroutes.register('edit_repo_group_advanced', '/%(repo_group_name)s/_settings/advanced', ['repo_group_name']);
     pyroutes.register('edit_repo_group_advanced_delete', '/%(repo_group_name)s/_settings/advanced/delete', ['repo_group_name']);
     pyroutes.register('edit_repo_group_perms', '/%(repo_group_name)s/_settings/permissions', ['repo_group_name']);
     pyroutes.register('edit_repo_group_perms_update', '/%(repo_group_name)s/_settings/permissions/update', ['repo_group_name']);
     pyroutes.register('repo_group_home', '/%(repo_group_name)s', ['repo_group_name']);
     pyroutes.register('repo_group_home_slash', '/%(repo_group_name)s/', ['repo_group_name']);
     pyroutes.register('user_group_members_data', '/_admin/user_groups/%(user_group_id)s/members', ['user_group_id']);
     pyroutes.register('edit_user_group_perms_summary', '/_admin/user_groups/%(user_group_id)s/edit/permissions_summary', ['user_group_id']);
     pyroutes.register('edit_user_group_perms_summary_json', '/_admin/user_groups/%(user_group_id)s/edit/permissions_summary/json', ['user_group_id']);
     pyroutes.register('edit_user_group', '/_admin/user_groups/%(user_group_id)s/edit', ['user_group_id']);
     pyroutes.register('user_groups_update', '/_admin/user_groups/%(user_group_id)s/update', ['user_group_id']);
     pyroutes.register('edit_user_group_global_perms', '/_admin/user_groups/%(user_group_id)s/edit/global_permissions', ['user_group_id']);
     pyroutes.register('edit_user_group_global_perms_update', '/_admin/user_groups/%(user_group_id)s/edit/global_permissions/update', ['user_group_id']);
     pyroutes.register('edit_user_group_perms', '/_admin/user_groups/%(user_group_id)s/edit/permissions', ['user_group_id']);
     pyroutes.register('edit_user_group_perms_update', '/_admin/user_groups/%(user_group_id)s/edit/permissions/update', ['user_group_id']);
     pyroutes.register('edit_user_group_advanced', '/_admin/user_groups/%(user_group_id)s/edit/advanced', ['user_group_id']);
     pyroutes.register('edit_user_group_advanced_sync', '/_admin/user_groups/%(user_group_id)s/edit/advanced/sync', ['user_group_id']);
     pyroutes.register('user_groups_delete', '/_admin/user_groups/%(user_group_id)s/delete', ['user_group_id']);
     pyroutes.register('search', '/_admin/search', []);
     pyroutes.register('search_repo', '/%(repo_name)s/search', ['repo_name']);
     pyroutes.register('user_profile', '/_profiles/%(username)s', ['username']);
+    pyroutes.register('user_group_profile', '/_profile_user_group/%(user_group_name)s', ['user_group_name']);
     pyroutes.register('my_account_profile', '/_admin/my_account/profile', []);
     pyroutes.register('my_account_edit', '/_admin/my_account/edit', []);
     pyroutes.register('my_account_update', '/_admin/my_account/update', []);
     pyroutes.register('my_account_password', '/_admin/my_account/password', []);
     pyroutes.register('my_account_password_update', '/_admin/my_account/password/update', []);
     pyroutes.register('my_account_auth_tokens', '/_admin/my_account/auth_tokens', []);
     pyroutes.register('my_account_auth_tokens_add', '/_admin/my_account/auth_tokens/new', []);
     pyroutes.register('my_account_auth_tokens_delete', '/_admin/my_account/auth_tokens/delete', []);
     pyroutes.register('my_account_ssh_keys', '/_admin/my_account/ssh_keys', []);
     pyroutes.register('my_account_ssh_keys_generate', '/_admin/my_account/ssh_keys/generate', []);
     pyroutes.register('my_account_ssh_keys_add', '/_admin/my_account/ssh_keys/new', []);
     pyroutes.register('my_account_ssh_keys_delete', '/_admin/my_account/ssh_keys/delete', []);
     pyroutes.register('my_account_user_group_membership', '/_admin/my_account/user_group_membership', []);
     pyroutes.register('my_account_emails', '/_admin/my_account/emails', []);
     pyroutes.register('my_account_emails_add', '/_admin/my_account/emails/new', []);
     pyroutes.register('my_account_emails_delete', '/_admin/my_account/emails/delete', []);
     pyroutes.register('my_account_repos', '/_admin/my_account/repos', []);
     pyroutes.register('my_account_watched', '/_admin/my_account/watched', []);
     pyroutes.register('my_account_perms', '/_admin/my_account/perms', []);
     pyroutes.register('my_account_notifications', '/_admin/my_account/notifications', []);
     pyroutes.register('my_account_notifications_toggle_visibility', '/_admin/my_account/toggle_visibility', []);
     pyroutes.register('my_account_pullrequests', '/_admin/my_account/pull_requests', []);
     pyroutes.register('my_account_pullrequests_data', '/_admin/my_account/pull_requests/data', []);
     pyroutes.register('notifications_show_all', '/_admin/notifications', []);
     pyroutes.register('notifications_mark_all_read', '/_admin/notifications/mark_all_read', []);
     pyroutes.register('notifications_show', '/_admin/notifications/%(notification_id)s', ['notification_id']);
     pyroutes.register('notifications_update', '/_admin/notifications/%(notification_id)s/update', ['notification_id']);
     pyroutes.register('notifications_delete', '/_admin/notifications/%(notification_id)s/delete', ['notification_id']);
     pyroutes.register('my_account_notifications_test_channelstream', '/_admin/my_account/test_channelstream', []);
     pyroutes.register('gists_show', '/_admin/gists', []);
     pyroutes.register('gists_new', '/_admin/gists/new', []);
     pyroutes.register('gists_create', '/_admin/gists/create', []);
     pyroutes.register('gist_show', '/_admin/gists/%(gist_id)s', ['gist_id']);
     pyroutes.register('gist_delete', '/_admin/gists/%(gist_id)s/delete', ['gist_id']);
     pyroutes.register('gist_edit', '/_admin/gists/%(gist_id)s/edit', ['gist_id']);
     pyroutes.register('gist_edit_check_revision', '/_admin/gists/%(gist_id)s/edit/check_revision', ['gist_id']);
     pyroutes.register('gist_update', '/_admin/gists/%(gist_id)s/update', ['gist_id']);
     pyroutes.register('gist_show_rev', '/_admin/gists/%(gist_id)s/%(revision)s', ['gist_id', 'revision']);
     pyroutes.register('gist_show_formatted', '/_admin/gists/%(gist_id)s/%(revision)s/%(format)s', ['gist_id', 'revision', 'format']);
     pyroutes.register('gist_show_formatted_path', '/_admin/gists/%(gist_id)s/%(revision)s/%(format)s/%(f_path)s', ['gist_id', 'revision', 'format', 'f_path']);
     pyroutes.register('debug_style_home', '/_admin/debug_style', []);
     pyroutes.register('debug_style_template', '/_admin/debug_style/t/%(t_path)s', ['t_path']);
     pyroutes.register('apiv2', '/_admin/api', []);
 }

rhodecode/public/js/src/rhodecode/codemirror.js

@@ -1,595 +1,850 b''
 // # Copyright (C) 2010-2018 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/
 
 /**
  * Code Mirror
  */
 // global code-mirror logger;, to enable run
 // Logger.get('CodeMirror').setLevel(Logger.DEBUG)
 
 cmLog = Logger.get('CodeMirror');
 cmLog.setLevel(Logger.OFF);
 
 
 //global cache for inline forms
 var userHintsCache = {};
 
 // global timer, used to cancel async loading
 var CodeMirrorLoadUserHintTimer;
 
 var escapeRegExChars = function(value) {
   return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
 };
 
 /**
  * Load hints from external source returns an array of objects in a format
  * that hinting lib requires
  * @returns {Array}
  */
 var CodeMirrorLoadUserHints = function(query, triggerHints) {
   cmLog.debug('Loading mentions users via AJAX');
   var _users = [];
   $.ajax({
     type: 'GET',
     data: {query: query},
     url: pyroutes.url('user_autocomplete_data'),
     headers: {'X-PARTIAL-XHR': true},
     async: true
   })
   .done(function(data) {
     var tmpl = '<img class="gravatar" src="{0}"/>{1}';
     $.each(data.suggestions, function(i) {
       var userObj = data.suggestions[i];
 
       if (userObj.username !== "default") {
         _users.push({
           text: userObj.username + " ",
           org_text: userObj.username,
           displayText: userObj.value_display, // search that field
           // internal caches
           _icon_link: userObj.icon_link,
           _text: userObj.value_display,
 
           render: function(elt, data, completion) {
             var el = document.createElement('div');
             el.className = "CodeMirror-hint-entry";
             el.innerHTML = tmpl.format(
                 completion._icon_link, completion._text);
             elt.appendChild(el);
           }
         });
       }
     });
     cmLog.debug('Mention users loaded');
     // set to global cache
     userHintsCache[query] = _users;
     triggerHints(userHintsCache[query]);
   })
   .fail(function(data, textStatus, xhr) {
       alert("error processing request. \n" +
             "Error code {0} ({1}).".format(data.status, data.statusText));
   });
 };
 
 /**
  * filters the results based on the current context
  * @param users
  * @param context
  * @returns {Array}
  */
 var CodeMirrorFilterUsers = function(users, context) {
   var MAX_LIMIT = 10;
   var filtered_users = [];
   var curWord = context.string;
 
   cmLog.debug('Filtering users based on query:', curWord);
   $.each(users, function(i) {
     var match = users[i];
     var searchText = match.displayText;
 
     if (!curWord ||
         searchText.toLowerCase().lastIndexOf(curWord) !== -1) {
       // reset state
       match._text = match.displayText;
       if (curWord) {
         // do highlighting
         var pattern = '(' + escapeRegExChars(curWord) + ')';
         match._text = searchText.replace(
             new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
       }
 
       filtered_users.push(match);
     }
     // to not return to many results, use limit of filtered results
     if (filtered_users.length > MAX_LIMIT) {
       return false;
     }
   });
 
   return filtered_users;
 };
 
 var CodeMirrorMentionHint = function(editor, callback, options) {
   var cur = editor.getCursor();
   var curLine = editor.getLine(cur.line).slice(0, cur.ch);
 
   // match on @ +1char
   var tokenMatch = new RegExp(
       '(^@| @)([a-zA-Z0-9]{1}[a-zA-Z0-9\-\_\.]*)$').exec(curLine);
 
   var tokenStr = '';
   if (tokenMatch !== null && tokenMatch.length > 0){
     tokenStr = tokenMatch[0].strip();
   } else {
     // skip if we didn't match our token
     return;
   }
 
   var context = {
     start: (cur.ch - tokenStr.length) + 1,
     end: cur.ch,
     string: tokenStr.slice(1),
     type: null
   };
 
   // case when we put the @sign in fron of a string,
   // eg <@ we put it here>sometext then we need to prepend to text
   if (context.end > cur.ch) {
     context.start = context.start + 1; // we add to the @ sign
     context.end = cur.ch; // don't eat front part just append
     context.string = context.string.slice(1, cur.ch - context.start);
   }
 
   cmLog.debug('Mention context', context);
 
   var triggerHints = function(userHints){
     return callback({
       list: CodeMirrorFilterUsers(userHints, context),
       from: CodeMirror.Pos(cur.line, context.start),
       to: CodeMirror.Pos(cur.line, context.end)
     });
   };
 
   var queryBasedHintsCache = undefined;
   // if we have something in the cache, try to fetch the query based cache
   if (userHintsCache !== {}){
     queryBasedHintsCache = userHintsCache[context.string];
   }
 
   if (queryBasedHintsCache !== undefined) {
     cmLog.debug('Users loaded from cache');
     triggerHints(queryBasedHintsCache);
   } else {
     // this takes care for async loading, and then displaying results
     // and also propagates the userHintsCache
     window.clearTimeout(CodeMirrorLoadUserHintTimer);
     CodeMirrorLoadUserHintTimer = setTimeout(function() {
       CodeMirrorLoadUserHints(context.string, triggerHints);
     }, 300);
   }
 };
 
 var CodeMirrorCompleteAfter = function(cm, pred) {
   var options = {
     completeSingle: false,
     async: true,
     closeOnUnfocus: true
   };
   var cur = cm.getCursor();
   setTimeout(function() {
     if (!cm.state.completionActive) {
       cmLog.debug('Trigger mentions hinting');
       CodeMirror.showHint(cm, CodeMirror.hint.mentions, options);
     }
   }, 100);
 
   // tell CodeMirror we didn't handle the key
   // trick to trigger on a char but still complete it
   return CodeMirror.Pass;
 };
 
 var initCodeMirror = function(textAreadId, resetUrl, focus, options) {
   var ta = $('#' + textAreadId).get(0);
   if (focus === undefined) {
       focus = true;
   }
 
   // default options
   var codeMirrorOptions = {
     mode: "null",
     lineNumbers: true,
     indentUnit: 4,
     autofocus: focus
   };
 
   if (options !== undefined) {
     // extend with custom options
     codeMirrorOptions = $.extend(true, codeMirrorOptions, options);
   }
 
   var myCodeMirror = CodeMirror.fromTextArea(ta, codeMirrorOptions);
 
   $('#reset').on('click', function(e) {
     window.location = resetUrl;
   });
 
   return myCodeMirror;
 };
 
+
+var initMarkupCodeMirror = function(textAreadId, focus, options) {
+  var initialHeight = 100;
+
+  var ta = $(textAreadId).get(0);
+  if (focus === undefined) {
+      focus = true;
+  }
+
+  // default options
+  var codeMirrorOptions = {
+    lineNumbers: false,
+    indentUnit: 4,
+    viewportMargin: 30,
+    // this is a trick to trigger some logic behind codemirror placeholder
+    // it influences styling and behaviour.
+    placeholder: " ",
+    lineWrapping: true,
+    autofocus: focus
+  };
+
+  if (options !== undefined) {
+    // extend with custom options
+    codeMirrorOptions = $.extend(true, codeMirrorOptions, options);
+  }
+
+  var cm = CodeMirror.fromTextArea(ta, codeMirrorOptions);
+  cm.setSize(null, initialHeight);
+  cm.setOption("mode", DEFAULT_RENDERER);
+  CodeMirror.autoLoadMode(cm, DEFAULT_RENDERER); // load rst or markdown mode
+  cmLog.debug('Loading codemirror mode', DEFAULT_RENDERER);
+
+  // start listening on changes to make auto-expanded editor
+  cm.on("change", function(instance, changeObj) {
+    var height = initialHeight;
+    var lines = instance.lineCount();
+    if ( lines > 6 && lines < 20) {
+      height = "auto";
+    }
+    else if (lines >= 20){
+      zheight = 20*15;
+    }
+    instance.setSize(null, height);
+
+    // detect if the change was trigger by auto desc, or user input
+    var changeOrigin = changeObj.origin;
+
+    if (changeOrigin === "setValue") {
+        cmLog.debug('Change triggered by setValue');
+    }
+    else {
+        cmLog.debug('user triggered change !');
+        // set special marker to indicate user has created an input.
+        instance._userDefinedValue = true;
+    }
+
+  });
+
+  return cm;
+};
+
+
 var initCommentBoxCodeMirror = function(CommentForm, textAreaId, triggerActions){
   var initialHeight = 100;
 
   if (typeof userHintsCache === "undefined") {
     userHintsCache = {};
     cmLog.debug('Init empty cache for mentions');
   }
   if (!$(textAreaId).get(0)) {
     cmLog.debug('Element for textarea not found', textAreaId);
     return;
   }
     /**
      * Filter action based on typed in text
      * @param actions
      * @param context
      * @returns {Array}
      */
 
     var filterActions = function(actions, context){
 
       var MAX_LIMIT = 10;
       var filtered_actions = [];
       var curWord = context.string;
 
       cmLog.debug('Filtering actions based on query:', curWord);
       $.each(actions, function(i) {
         var match = actions[i];
         var searchText = match.searchText;
 
         if (!curWord ||
           searchText.toLowerCase().lastIndexOf(curWord) !== -1) {
           // reset state
           match._text = match.displayText;
           if (curWord) {
             // do highlighting
             var pattern = '(' + escapeRegExChars(curWord) + ')';
             match._text = searchText.replace(
               new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
           }
 
           filtered_actions.push(match);
         }
         // to not return to many results, use limit of filtered results
         if (filtered_actions.length > MAX_LIMIT) {
             return false;
         }
       });
 
       return filtered_actions;
     };
 
     var submitForm = function(cm, pred) {
       $(cm.display.input.textarea.form).submit();
       return CodeMirror.Pass;
     };
 
     var completeActions = function(actions){
 
         var registeredActions = [];
         var allActions = [
         {
           text: "approve",
           searchText: "status approved",
           displayText: _gettext('Set status to Approved'),
           hint: function(CodeMirror, data, completion) {
             CodeMirror.replaceRange("", completion.from || data.from,
                         completion.to || data.to, "complete");
             $(CommentForm.statusChange).select2("val", 'approved').trigger('change');
           },
           render: function(elt, data, completion) {
             var el = document.createElement('div');
             el.className = "flag_status flag_status_comment_box approved pull-left";
             elt.appendChild(el);
 
             el = document.createElement('span');
             el.innerHTML = completion.displayText;
             elt.appendChild(el);
           }
         },
         {
           text: "reject",
           searchText: "status rejected",
           displayText: _gettext('Set status to Rejected'),
           hint: function(CodeMirror, data, completion) {
               CodeMirror.replaceRange("", completion.from || data.from,
                           completion.to || data.to, "complete");
               $(CommentForm.statusChange).select2("val", 'rejected').trigger('change');
           },
           render: function(elt, data, completion) {
               var el = document.createElement('div');
               el.className = "flag_status flag_status_comment_box rejected pull-left";
               elt.appendChild(el);
 
               el = document.createElement('span');
               el.innerHTML = completion.displayText;
               elt.appendChild(el);
           }
         },
         {
           text: "as_todo",
           searchText: "todo comment",
           displayText: _gettext('TODO comment'),
           hint: function(CodeMirror, data, completion) {
               CodeMirror.replaceRange("", completion.from || data.from,
                           completion.to || data.to, "complete");
 
               $(CommentForm.commentType).val('todo');
           },
           render: function(elt, data, completion) {
               var el = document.createElement('div');
               el.className = "pull-left";
               elt.appendChild(el);
 
               el = document.createElement('span');
               el.innerHTML = completion.displayText;
               elt.appendChild(el);
           }
         },
         {
           text: "as_note",
           searchText: "note comment",
           displayText: _gettext('Note Comment'),
           hint: function(CodeMirror, data, completion) {
               CodeMirror.replaceRange("", completion.from || data.from,
                           completion.to || data.to, "complete");
 
               $(CommentForm.commentType).val('note');
           },
           render: function(elt, data, completion) {
               var el = document.createElement('div');
               el.className = "pull-left";
               elt.appendChild(el);
 
               el = document.createElement('span');
               el.innerHTML = completion.displayText;
               elt.appendChild(el);
           }
         }
         ];
 
         $.each(allActions, function(index, value){
             var actionData = allActions[index];
             if (actions.indexOf(actionData['text']) != -1) {
                 registeredActions.push(actionData);
             }
         });
 
         return function(cm, pred) {
             var cur = cm.getCursor();
             var options = {
                 closeOnUnfocus: true,
                 registeredActions: registeredActions
             };
             setTimeout(function() {
                 if (!cm.state.completionActive) {
                     cmLog.debug('Trigger actions hinting');
                     CodeMirror.showHint(cm, CodeMirror.hint.actions, options);
                 }
             }, 100);
 
             // tell CodeMirror we didn't handle the key
             // trick to trigger on a char but still complete it
             return CodeMirror.Pass;
         }
     };
 
     var extraKeys = {
       "'@'": CodeMirrorCompleteAfter,
       Tab: function(cm) {
         // space indent instead of TABS
         var spaces = new Array(cm.getOption("indentUnit") + 1).join(" ");
         cm.replaceSelection(spaces);
       }
     };
     // submit form on Meta-Enter
     if (OSType === "mac") {
       extraKeys["Cmd-Enter"] = submitForm;
     }
     else {
       extraKeys["Ctrl-Enter"] = submitForm;
     }
 
     if (triggerActions) {
       // register triggerActions for this instance
       extraKeys["'/'"] = completeActions(triggerActions);
     }
 
     var cm = CodeMirror.fromTextArea($(textAreaId).get(0), {
       lineNumbers: false,
       indentUnit: 4,
       viewportMargin: 30,
       // this is a trick to trigger some logic behind codemirror placeholder
       // it influences styling and behaviour.
       placeholder: " ",
       extraKeys: extraKeys,
       lineWrapping: true
     });
 
     cm.setSize(null, initialHeight);
     cm.setOption("mode", DEFAULT_RENDERER);
     CodeMirror.autoLoadMode(cm, DEFAULT_RENDERER); // load rst or markdown mode
     cmLog.debug('Loading codemirror mode', DEFAULT_RENDERER);
     // start listening on changes to make auto-expanded editor
     cm.on("change", function(self) {
       var height = initialHeight;
       var lines = self.lineCount();
       if ( lines > 6 && lines < 20) {
         height = "auto";
       }
       else if (lines >= 20){
         zheight = 20*15;
       }
       self.setSize(null, height);
     });
 
     var actionHint = function(editor, options) {
 
       var cur = editor.getCursor();
       var curLine = editor.getLine(cur.line).slice(0, cur.ch);
 
       // match  only on /+1 character minimum
       var tokenMatch = new RegExp('(^/\|/\)([a-zA-Z]*)$').exec(curLine);
 
       var tokenStr = '';
       if (tokenMatch !== null && tokenMatch.length > 0){
         tokenStr = tokenMatch[2].strip();
       }
 
       var context = {
         start: (cur.ch - tokenStr.length) - 1,
         end: cur.ch,
         string: tokenStr,
         type: null
       };
 
       return {
         list: filterActions(options.registeredActions, context),
         from: CodeMirror.Pos(cur.line, context.start),
         to: CodeMirror.Pos(cur.line, context.end)
       };
 
     };
     CodeMirror.registerHelper("hint", "mentions", CodeMirrorMentionHint);
     CodeMirror.registerHelper("hint", "actions", actionHint);
     return cm;
 };
 
 var setCodeMirrorMode = function(codeMirrorInstance, mode) {
   CodeMirror.autoLoadMode(codeMirrorInstance, mode);
   codeMirrorInstance.setOption("mode", mode);
 };
 
 var setCodeMirrorLineWrap = function(codeMirrorInstance, line_wrap) {
   codeMirrorInstance.setOption("lineWrapping", line_wrap);
 };
 
 var setCodeMirrorModeFromSelect = function(
   targetSelect, targetFileInput, codeMirrorInstance, callback){
 
   $(targetSelect).on('change', function(e) {
     cmLog.debug('codemirror select2 mode change event !');
     var selected = e.currentTarget;
     var node = selected.options[selected.selectedIndex];
     var mimetype = node.value;
     cmLog.debug('picked mimetype', mimetype);
     var new_mode = $(node).attr('mode');
     setCodeMirrorMode(codeMirrorInstance, new_mode);
     cmLog.debug('set new mode', new_mode);
 
     //propose filename from picked mode
     cmLog.debug('setting mimetype', mimetype);
     var proposed_ext = getExtFromMimeType(mimetype);
     cmLog.debug('file input', $(targetFileInput).val());
     var file_data = getFilenameAndExt($(targetFileInput).val());
     var filename = file_data.filename || 'filename1';
     $(targetFileInput).val(filename + proposed_ext);
     cmLog.debug('proposed file', filename + proposed_ext);
 
 
     if (typeof(callback) === 'function') {
       try {
         cmLog.debug('running callback', callback);
         callback(filename, mimetype, new_mode);
       } catch (err) {
         console.log('failed to run callback', callback, err);
       }
     }
     cmLog.debug('finish iteration...');
   });
 };
 
 var setCodeMirrorModeFromInput = function(
   targetSelect, targetFileInput, codeMirrorInstance, callback) {
 
   // on type the new filename set mode
   $(targetFileInput).on('keyup', function(e) {
     var file_data = getFilenameAndExt(this.value);
     if (file_data.ext === null) {
       return;
     }
 
     var mimetypes = getMimeTypeFromExt(file_data.ext, true);
     cmLog.debug('mimetype from file', file_data, mimetypes);
     var detected_mode;
     var detected_option;
     for (var i in mimetypes) {
       var mt = mimetypes[i];
       if (!detected_mode) {
         detected_mode = detectCodeMirrorMode(this.value, mt);
       }
 
       if (!detected_option) {
         cmLog.debug('#mimetype option[value="{0}"]'.format(mt));
         if ($(targetSelect).find('option[value="{0}"]'.format(mt)).length) {
           detected_option = mt;
         }
       }
     }
 
     cmLog.debug('detected mode', detected_mode);
     cmLog.debug('detected option', detected_option);
     if (detected_mode && detected_option){
 
       $(targetSelect).select2("val", detected_option);
       setCodeMirrorMode(codeMirrorInstance, detected_mode);
 
       if(typeof(callback) === 'function'){
         try{
           cmLog.debug('running callback', callback);
           var filename = file_data.filename + "." + file_data.ext;
           callback(filename, detected_option, detected_mode);
         }catch (err){
           console.log('failed to run callback', callback, err);
         }
       }
     }
 
   });
 };
 
 var fillCodeMirrorOptions = function(targetSelect) {
   //inject new modes, based on codeMirrors modeInfo object
   var modes_select = $(targetSelect);
   for (var i = 0; i < CodeMirror.modeInfo.length; i++) {
     var m = CodeMirror.modeInfo[i];
     var opt = new Option(m.name, m.mime);
     $(opt).attr('mode', m.mode);
     modes_select.append(opt);
   }
 };
 
 var CodeMirrorPreviewEnable = function(edit_mode) {
   // in case it a preview enabled mode enable the button
   if (['markdown', 'rst', 'gfm'].indexOf(edit_mode) !== -1) {
     $('#render_preview').removeClass('hidden');
   }
   else {
     if (!$('#render_preview').hasClass('hidden')) {
       $('#render_preview').addClass('hidden');
     }
   }
 };
+
+
+ /* markup form */
+(function(mod) {
+
+    if (typeof exports == "object" && typeof module == "object") {
+        // CommonJS
+        module.exports = mod();
+    }
+    else {
+        // Plain browser env
+        (this || window).MarkupForm = mod();
+    }
+
+})(function() {
+    "use strict";
+
+    function MarkupForm(textareaId) {
+        if (!(this instanceof MarkupForm)) {
+            return new MarkupForm(textareaId);
+        }
+
+        // bind the element instance to our Form
+        $('#' + textareaId).get(0).MarkupForm = this;
+
+        this.withSelectorId = function(selector) {
+            var selectorId = textareaId;
+            return selector + '_' + selectorId;
+        };
+
+        this.previewButton = this.withSelectorId('#preview-btn');
+        this.previewContainer = this.withSelectorId('#preview-container');
+
+        this.previewBoxSelector = this.withSelectorId('#preview-box');
+
+        this.editButton = this.withSelectorId('#edit-btn');
+        this.editContainer = this.withSelectorId('#edit-container');
+
+        this.cmBox = textareaId;
+        this.cm = initMarkupCodeMirror('#' + textareaId);
+
+        this.previewUrl = pyroutes.url('markup_preview');
+
+        // FUNCTIONS and helpers
+        var self = this;
+
+        this.getCmInstance = function(){
+            return this.cm
+        };
+
+        this.setPlaceholder = function(placeholder) {
+            var cm = this.getCmInstance();
+            if (cm){
+                cm.setOption('placeholder', placeholder);
+            }
+        };
+
+        this.initStatusChangeSelector = function(){
+            var formatChangeStatus = function(state, escapeMarkup) {
+                var originalOption = state.element;
+                return '<div class="flag_status ' + $(originalOption).data('status') + ' pull-left"></div>' +
+                       '<span>' + escapeMarkup(state.text) + '</span>';
+            };
+            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);
+                }
+
+                var placeholderText = _gettext('Comment text will be set automatically based on currently selected status ({0}) ...').format(status);
+                self.setPlaceholder(placeholderText)
+            })
+        };
+
+        // reset the text area into it's original state
+        this.resetMarkupFormState = 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);
+        };
+
+        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) {
+            $(this.editButton).prop('disabled', state);
+            $(this.previewButton).prop('disabled', state);
+        };
+
+        // lock preview/edit/submit buttons on load, but exclude cancel button
+        var excludeCancelBtn = true;
+        this.setActionButtonsDisabled(true);
+
+        // 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)
+                } else {
+                    self.setActionButtonsDisabled(false)
+                }
+            });
+        }
+
+        $(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(data){
+                alert(
+                "Error while submitting preview.\n" +
+                "Error code {0} ({1}).".format(data.status, data.statusText)
+                );
+                self.resetMarkupFormState(text)
+            };
+            _submitAjaxPOST(
+                self.previewUrl, postData, self.previewSuccessCallback,
+                previewFailCallback);
+
+            $(self.previewButton).parent().addClass('active');
+            $(self.editButton).parent().removeClass('active');
+        });
+
+    }
+
+    return MarkupForm;
+});

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

@@ -1,811 +1,829 b''
 // # Copyright (C) 2010-2018 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) {
         if (!(this instanceof CommentForm)) {
             return new CommentForm(formElement, commitId, pullRequestId, lineNo, initAutocompleteActions, resolvesCommentId);
         }
 
         // 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('input[type="submit"]');
         this.submitButtonText = this.submitButton.val();
 
         this.previewUrl = pyroutes.url('repo_commit_comment_preview',
             {'repo_name': templateContext.repo_name,
              'commit_id': templateContext.commit_data.commit_id});
 
         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){
             this.submitUrl = pyroutes.url('repo_commit_comment_create',
                 {'repo_name': templateContext.repo_name,
                  'commit_id': this.commitId});
             this.selfUrl = pyroutes.url('repo_commit',
                 {'repo_name': templateContext.repo_name,
                  'commit_id': this.commitId});
 
         } else if (this.pullRequestId) {
             this.submitUrl = pyroutes.url('pullrequest_comment_create',
                 {'repo_name': templateContext.repo_name,
                  'pull_request_id': this.pullRequestId});
             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.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() {
           return !$(this.submitButton).prop('disabled');
         };
 
         this.initStatusChangeSelector = function(){
             var formatChangeStatus = function(state, escapeMarkup) {
                 var originalOption = state.element;
                 return '<div class="flag_status ' + $(originalOption).data('status') + ' pull-left"></div>' +
                        '<span>' + escapeMarkup(state.text) + '</span>';
             };
             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);
                 }
 
                 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(){
             // default behaviour is to call GLOBAL hook, if it's registered.
             if (window.commentFormGlobalSubmitSuccessCallback !== undefined){
                 commentFormGlobalSubmitSuccessCallback()
             }
         };
 
         this.submitAjaxPOST = function(url, postData, successHandler, failHandler) {
-            failHandler = failHandler || function() {};
-            var 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){
-                    alert(
-                        "Error while submitting comment.\n" +
-                        "Error code {0} ({1}).".format(data.status, data.statusText));
-                    failHandler()
-                });
-            return request;
+            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 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) {
                 // reload page if we change status for single commit.
                 if (status && self.commitId) {
                     location.reload(true);
                 } else {
                     $('#injected_page_comments').append(o.rendered_text);
                     self.resetCommentFormState();
                     timeagoActivate();
 
                     // mark visually which comment was resolved
                     if (resolvesCommentId) {
                         self.markCommentResolved(resolvesCommentId);
                     }
                 }
 
                 // run global callback on submit
                 self.globalSubmitSuccessCallback();
 
             };
-            var submitFailCallback = function(){
+            var submitFailCallback = function(data) {
+                alert(
+                "Error while submitting comment.\n" +
+                "Error code {0} ({1}).".format(data.status, data.statusText)
+                );
                 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);
             if (submitEvent) {
               $(this.submitButton).val(_gettext('Submitting...'));
             } else {
               $(this.submitButton).val(this.submitButtonText);
             }
 
         };
 
         // 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(){
+            var previewFailCallback = function(data){
+                alert(
+                "Error while preview of comment.\n" +
+                "Error code {0} ({1}).".format(data.status, data.statusText)
+                );
                 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;
 });
 
 /* comments controller */
 var CommentsController = function() {
   var mainComment = '#text';
   var self = this;
 
   this.cancelComment = function(node) {
       var $node = $(node);
       var $td = $node.closest('td');
       $node.closest('.comment-inline-form').remove();
       return false;
   };
 
   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');
     $comment = $(node).closest(klass);
     $comments = $(klass);
 
     // show hidden comment when referenced.
     if (!$wrapper.is(':visible')){
         $wrapper.show();
     }
 
     $('.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.deleteComment = function(node) {
       if (!confirm(_gettext('Delete this comment?'))) {
         return false;
       }
       var $node = $(node);
       var $td = $node.closest('td');
       var $comment = $node.closest('.comment');
       var comment_id = $comment.attr('data-comment-id');
       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();
         return false;
       };
       var failure = function(data, textStatus, xhr) {
         alert("error processing request: " + textStatus);
         $comment.show('fast');
         $comment.removeClass('comment-deleting');
         return false;
       };
       ajaxPOST(url, postData, success, failure);
   };
 
   this.toggleWideMode = function (node) {
       if ($('#content').hasClass('wrapper')) {
           $('#content').removeClass("wrapper");
           $('#content').addClass("wide-mode-wrapper");
           $(node).addClass('btn-success');
       } else {
           $('#content').removeClass("wide-mode-wrapper");
           $('#content').addClass("wrapper");
           $(node).removeClass('btn-success');
       }
       return false;
   };
 
   this.toggleComments = function(node, show) {
     var $filediff = $(node).closest('.filediff');
     if (show === true) {
       $filediff.removeClass('hide-comments');
     } else if (show === false) {
       $filediff.find('.hide-line-comments').removeClass('hide-line-comments');
       $filediff.addClass('hide-comments');
     } else {
       $filediff.find('.hide-line-comments').removeClass('hide-line-comments');
       $filediff.toggleClass('hide-comments');
     }
     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){
       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);
       var cm = commentForm.getCmInstance();
 
       if (resolvesCommentId){
         var placeholderText = _gettext('Leave a 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);
       }
 
       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 commentForm = this.createCommentForm(
           _form, lineNo, placeholderText, autocompleteActions, resolvesCommentId);
       commentForm.initStatusChangeSelector();
 
       return commentForm;
   };
 
   this.createComment = function(node, resolutionComment) {
       var resolvesCommentId = resolutionComment || null;
       var $node = $(node);
       var $td = $node.closest('td');
       var $form = $td.find('.comment-inline-form');
 
       if (!$form.length) {
 
           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);
 
           var $comments = $td.find('.inline-comments');
           if (!$comments.length) {
             $comments = $(
               $('#cb-comments-inline-container-template').html());
             $td.append($comments);
           }
 
           $td.find('.cb-comment-add-button').before($form);
 
           var placeholderText = _gettext('Leave a comment on line {0}.').format(lineno);
           var _form = $($form[0]).find('form');
           var autocompleteActions = ['as_note', 'as_todo'];
           var commentForm = this.createCommentForm(
               _form, lineno, placeholderText, autocompleteActions, resolvesCommentId);
 
           $.Topic('/ui/plugins/code/comment_form_built').prepareOrPublish({
               form: _form,
               parent: $td[0],
               lineno: lineno,
               f_path: f_path}
           );
 
           // 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();
 
             if (text === "") {
               return;
             }
 
             if (lineno === undefined) {
               alert('missing line !');
               return;
             }
             if (f_path === undefined) {
               alert('missing file path !');
               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,
                 'comment_type': commentType,
                 'csrf_token': CSRF_TOKEN
             };
             if (resolvesCommentId){
                 postData['resolves_comment_id'] = resolvesCommentId;
             }
 
             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;
 
                 $comments.find('.cb-comment-add-button').before(html);
 
                 //mark visually which comment was resolved
                 if (resolvesCommentId) {
                     commentForm.markCommentResolved(resolvesCommentId);
                 }
 
                 // run global callback on submit
                 commentForm.globalSubmitSuccessCallback();
 
               } catch (e) {
                 console.error(e);
               }
 
               // re trigger the linkification of next/prev navigation
               linkifyComments($('.inline-comment-injected'));
               timeagoActivate();
               commentForm.setActionButtonsDisabled(false);
 
             };
-            var submitFailCallback = function(){
+            var submitFailCallback = function(data){
+                alert(
+                "Error while submitting comment.\n" +
+                "Error code {0} ({1}).".format(data.status, data.statusText)
+                );
                 commentForm.resetCommentFormState(text)
             };
             commentForm.submitAjaxPOST(
                 commentForm.submitUrl, postData, submitSuccessCallback, submitFailCallback);
           });
       }
 
       $form.addClass('comment-inline-form-open');
   };
 
   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)
     } else {
         Rhodecode.comments.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;
   };
 
 };

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

@@ -1,593 +1,550 b''
 // # Copyright (C) 2010-2018 RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # RhodeCode Enterprise Edition, including its added features, Support services,
 // # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 
 var prButtonLockChecks = {
   'compare': false,
   'reviewers': false
 };
 
 /**
  * lock button until all checks and loads are made. E.g reviewer calculation
  * should prevent from submitting a PR
  * @param lockEnabled
  * @param msg
  * @param scope
  */
 var prButtonLock = function(lockEnabled, msg, scope) {
       scope = scope || 'all';
       if (scope == 'all'){
           prButtonLockChecks['compare'] = !lockEnabled;
           prButtonLockChecks['reviewers'] = !lockEnabled;
       } else if (scope == 'compare') {
           prButtonLockChecks['compare'] = !lockEnabled;
       } else if (scope == 'reviewers'){
           prButtonLockChecks['reviewers'] = !lockEnabled;
       }
       var checksMeet = prButtonLockChecks.compare && prButtonLockChecks.reviewers;
       if (lockEnabled) {
           $('#pr_submit').attr('disabled', 'disabled');
       }
       else if (checksMeet) {
           $('#pr_submit').removeAttr('disabled');
       }
 
       if (msg) {
           $('#pr_open_message').html(msg);
       }
 };
 
 
 /**
 Generate Title and Description for a PullRequest.
 In case of 1 commits, the title and description is that one commit
 in case of multiple commits, we iterate on them with max N number of commits,
 and build description in a form
 - commitN
 - commitN+1
 ...
 
 Title is then constructed from branch names, or other references,
 replacing '-' and '_' into spaces
 
 * @param sourceRef
 * @param elements
 * @param limit
 * @returns {*[]}
 */
 var getTitleAndDescription = function(sourceRef, elements, limit) {
   var title = '';
   var desc = '';
 
   $.each($(elements).get().reverse().slice(0, limit), function(idx, value) {
       var rawMessage = $(value).find('td.td-description .message').data('messageRaw');
       desc += '- ' + rawMessage.split('\n')[0].replace(/\n+$/, "") + '\n';
   });
   // only 1 commit, use commit message as title
   if (elements.length === 1) {
       title = $(elements[0]).find('td.td-description .message').data('messageRaw').split('\n')[0];
   }
   else {
       // use reference name
       title = sourceRef.replace(/-/g, ' ').replace(/_/g, ' ').capitalizeFirstLetter();
   }
 
   return [title, desc]
 };
 
 
 
 ReviewersController = function () {
     var self = this;
     this.$reviewRulesContainer = $('#review_rules');
     this.$rulesList = this.$reviewRulesContainer.find('.pr-reviewer-rules');
     this.forbidReviewUsers = undefined;
     this.$reviewMembers = $('#review_members');
     this.currentRequest = null;
 
     this.defaultForbidReviewUsers = function() {
         return [
             {'username': 'default',
              'user_id': templateContext.default_user.user_id}
         ];
     };
 
     this.hideReviewRules = function() {
         self.$reviewRulesContainer.hide();
     };
 
     this.showReviewRules = function() {
         self.$reviewRulesContainer.show();
     };
 
     this.addRule = function(ruleText) {
         self.showReviewRules();
         return '<div>- {0}</div>'.format(ruleText)
     };
 
     this.loadReviewRules = function(data) {
         // reset forbidden Users
         this.forbidReviewUsers = self.defaultForbidReviewUsers();
 
         // reset state of review rules
         self.$rulesList.html('');
 
         if (!data || data.rules === undefined || $.isEmptyObject(data.rules)) {
             // default rule, case for older repo that don't have any rules stored
             self.$rulesList.append(
                 self.addRule(
                     _gettext('All reviewers must vote.'))
             );
             return self.forbidReviewUsers
         }
 
         if (data.rules.voting !== undefined) {
             if (data.rules.voting < 0) {
                 self.$rulesList.append(
                     self.addRule(
                          _gettext('All individual reviewers must vote.'))
                 )
             } else if (data.rules.voting === 1) {
                 self.$rulesList.append(
                     self.addRule(
                         _gettext('At least {0} reviewer must vote.').format(data.rules.voting))
                 )
 
             } else {
                 self.$rulesList.append(
                     self.addRule(
                         _gettext('At least {0} reviewers must vote.').format(data.rules.voting))
                 )
             }
         }
 
         if (data.rules.voting_groups !== undefined) {
             $.each(data.rules.voting_groups, function(index, rule_data) {
                 self.$rulesList.append(
                     self.addRule(rule_data.text)
                 )
             });
         }
 
         if (data.rules.use_code_authors_for_review) {
             self.$rulesList.append(
                 self.addRule(
                     _gettext('Reviewers picked from source code changes.'))
             )
         }
         if (data.rules.forbid_adding_reviewers) {
             $('#add_reviewer_input').remove();
             self.$rulesList.append(
                 self.addRule(
                     _gettext('Adding new reviewers is forbidden.'))
             )
         }
         if (data.rules.forbid_author_to_review) {
             self.forbidReviewUsers.push(data.rules_data.pr_author);
             self.$rulesList.append(
                 self.addRule(
                     _gettext('Author is not allowed to be a reviewer.'))
             )
         }
         if (data.rules.forbid_commit_author_to_review) {
 
             if (data.rules_data.forbidden_users) {
                 $.each(data.rules_data.forbidden_users, function(index, member_data) {
                     self.forbidReviewUsers.push(member_data)
                 });
 
             }
 
             self.$rulesList.append(
                 self.addRule(
                     _gettext('Commit Authors are not allowed to be a reviewer.'))
             )
         }
 
         return self.forbidReviewUsers
     };
 
     this.loadDefaultReviewers = function(sourceRepo, sourceRef, targetRepo, targetRef) {
 
         if (self.currentRequest) {
             // make sure we cleanup old running requests before triggering this
             // again
             self.currentRequest.abort();
         }
 
         $('.calculate-reviewers').show();
         // reset reviewer members
         self.$reviewMembers.empty();
 
         prButtonLock(true, null, 'reviewers');
         $('#user').hide(); // hide user autocomplete before load
 
         if (sourceRef.length !== 3 || targetRef.length !== 3) {
             // don't load defaults in case we're missing some refs...
             $('.calculate-reviewers').hide();
             return
         }
 
         var url = pyroutes.url('repo_default_reviewers_data',
                 {
                     'repo_name': templateContext.repo_name,
                     'source_repo': sourceRepo,
                     'source_ref': sourceRef[2],
                     'target_repo': targetRepo,
                     'target_ref': targetRef[2]
                 });
 
         self.currentRequest = $.get(url)
             .done(function(data) {
                 self.currentRequest = null;
 
                 // review rules
                 self.loadReviewRules(data);
 
                 for (var i = 0; i < data.reviewers.length; i++) {
                   var reviewer = data.reviewers[i];
                   self.addReviewMember(
                       reviewer, reviewer.reasons, reviewer.mandatory);
                 }
                 $('.calculate-reviewers').hide();
                 prButtonLock(false, null, 'reviewers');
                 $('#user').show(); // show user autocomplete after load
             });
     };
 
     // check those, refactor
     this.removeReviewMember = function(reviewer_id, mark_delete) {
         var reviewer = $('#reviewer_{0}'.format(reviewer_id));
 
         if(typeof(mark_delete) === undefined){
             mark_delete = false;
         }
 
         if(mark_delete === true){
             if (reviewer){
                 // now delete the input
                 $('#reviewer_{0} input'.format(reviewer_id)).remove();
                 // mark as to-delete
                 var obj = $('#reviewer_{0}_name'.format(reviewer_id));
                 obj.addClass('to-delete');
                 obj.css({"text-decoration":"line-through", "opacity": 0.5});
             }
         }
         else{
             $('#reviewer_{0}'.format(reviewer_id)).remove();
         }
     };
     this.reviewMemberEntry = function() {
 
     };
     this.addReviewMember = function(reviewer_obj, reasons, mandatory) {
         var members = self.$reviewMembers.get(0);
         var id = reviewer_obj.user_id;
         var username = reviewer_obj.username;
 
         var reasons = reasons || [];
         var mandatory = mandatory || false;
 
         // register IDS to check if we don't have this ID already in
         var currentIds = [];
         var _els = self.$reviewMembers.find('li').toArray();
         for (el in _els){
             currentIds.push(_els[el].id)
         }
 
         var userAllowedReview = function(userId) {
             var allowed = true;
             $.each(self.forbidReviewUsers, function(index, member_data) {
                 if (parseInt(userId) === member_data['user_id']) {
                     allowed = false;
                     return false // breaks the loop
                 }
             });
             return allowed
         };
 
         var userAllowed = userAllowedReview(id);
         if (!userAllowed){
            alert(_gettext('User `{0}` not allowed to be a reviewer').format(username));
         } else {
             // only add if it's not there
             var alreadyReviewer = currentIds.indexOf('reviewer_'+id) != -1;
 
             if (alreadyReviewer) {
                 alert(_gettext('User `{0}` already in reviewers').format(username));
             } else {
                 members.innerHTML += renderTemplate('reviewMemberEntry', {
                         'member': reviewer_obj,
                         'mandatory': mandatory,
                         'allowed_to_update': true,
                         'review_status': 'not_reviewed',
                         'review_status_label': _gettext('Not Reviewed'),
                         'reasons': reasons,
                         'create': true
                         });
             }
         }
 
     };
 
     this.updateReviewers = function(repo_name, pull_request_id){
         var postData = $('#reviewers input').serialize();
         _updatePullRequest(repo_name, pull_request_id, postData);
     };
 
 };
 
 
 var _updatePullRequest = function(repo_name, pull_request_id, postData) {
     var url = pyroutes.url(
         'pullrequest_update',
         {"repo_name": repo_name, "pull_request_id": pull_request_id});
     if (typeof postData === 'string' ) {
         postData += '&csrf_token=' + CSRF_TOKEN;
     } else {
         postData.csrf_token = CSRF_TOKEN;
     }
     var success = function(o) {
         window.location.reload();
     };
     ajaxPOST(url, postData, success);
 };
 
 /**
  * PULL REQUEST update commits
  */
 var updateCommits = function(repo_name, pull_request_id) {
     var postData = {
         'update_commits': true};
     _updatePullRequest(repo_name, pull_request_id, postData);
 };
 
 
 /**
  * PULL REQUEST edit info
  */
 var editPullRequest = function(repo_name, pull_request_id, title, description) {
     var url = pyroutes.url(
         'pullrequest_update',
         {"repo_name": repo_name, "pull_request_id": pull_request_id});
 
     var postData = {
         'title': title,
         'description': description,
         'edit_pull_request': true,
         'csrf_token': CSRF_TOKEN
     };
     var success = function(o) {
         window.location.reload();
     };
     ajaxPOST(url, postData, success);
 };
 
-var initPullRequestsCodeMirror = function (textAreaId) {
-    var ta = $(textAreaId).get(0);
-    var initialHeight = '100px';
-
-    // default options
-    var codeMirrorOptions = {
-        mode: "text",
-        lineNumbers: false,
-        indentUnit: 4,
-        theme: 'rc-input'
-    };
-
-    var codeMirrorInstance = CodeMirror.fromTextArea(ta, codeMirrorOptions);
-    // marker for manually set description
-    codeMirrorInstance._userDefinedDesc = false;
-    codeMirrorInstance.setSize(null, initialHeight);
-    codeMirrorInstance.on("change", function(instance, changeObj) {
-        var height = initialHeight;
-        var lines = instance.lineCount();
-        if (lines > 6 && lines < 20) {
-            height = "auto"
-        }
-        else if (lines >= 20) {
-            height = 20 * 15;
-        }
-        instance.setSize(null, height);
-
-        // detect if the change was trigger by auto desc, or user input
-        changeOrigin = changeObj.origin;
-
-        if (changeOrigin === "setValue") {
-            cmLog.debug('Change triggered by setValue');
-        }
-        else {
-            cmLog.debug('user triggered change !');
-            // set special marker to indicate user has created an input.
-            instance._userDefinedDesc = true;
-        }
-
-    });
-
-    return codeMirrorInstance
-};
 
 /**
  * Reviewer autocomplete
  */
 var ReviewerAutoComplete = function(inputId) {
   $(inputId).autocomplete({
     serviceUrl: pyroutes.url('user_autocomplete_data'),
     minChars:2,
     maxHeight:400,
     deferRequestBy: 300, //miliseconds
     showNoSuggestionNotice: true,
     tabDisabled: true,
     autoSelectFirst: true,
     params: { user_id: templateContext.rhodecode_user.user_id, user_groups:true, user_groups_expand:true, skip_default_user:true },
     formatResult: autocompleteFormatResult,
     lookupFilter: autocompleteFilterResult,
     onSelect: function(element, data) {
         var mandatory = false;
         var reasons = [_gettext('added manually by "{0}"').format(templateContext.rhodecode_user.username)];
 
         // add whole user groups
         if (data.value_type == 'user_group') {
             reasons.push(_gettext('member of "{0}"').format(data.value_display));
 
             $.each(data.members, function(index, member_data) {
                 var reviewer = member_data;
                 reviewer['user_id'] = member_data['id'];
                 reviewer['gravatar_link'] = member_data['icon_link'];
                 reviewer['user_link'] = member_data['profile_link'];
                 reviewer['rules'] = [];
                 reviewersController.addReviewMember(reviewer, reasons, mandatory);
             })
         }
         // add single user
         else {
             var reviewer = data;
             reviewer['user_id'] = data['id'];
             reviewer['gravatar_link'] = data['icon_link'];
             reviewer['user_link'] = data['profile_link'];
             reviewer['rules'] = [];
             reviewersController.addReviewMember(reviewer, reasons, mandatory);
         }
 
       $(inputId).val('');
     }
   });
 };
 
 
 VersionController = function () {
     var self = this;
     this.$verSource = $('input[name=ver_source]');
     this.$verTarget = $('input[name=ver_target]');
     this.$showVersionDiff = $('#show-version-diff');
 
     this.adjustRadioSelectors = function (curNode) {
         var getVal = function (item) {
             if (item == 'latest') {
                 return Number.MAX_SAFE_INTEGER
             }
             else {
                 return parseInt(item)
             }
         };
 
         var curVal = getVal($(curNode).val());
         var cleared = false;
 
         $.each(self.$verSource, function (index, value) {
             var elVal = getVal($(value).val());
 
             if (elVal > curVal) {
                 if ($(value).is(':checked')) {
                     cleared = true;
                 }
                 $(value).attr('disabled', 'disabled');
                 $(value).removeAttr('checked');
                 $(value).css({'opacity': 0.1});
             }
             else {
                 $(value).css({'opacity': 1});
                 $(value).removeAttr('disabled');
             }
         });
 
         if (cleared) {
             // if we unchecked an active, set the next one to same loc.
             $(this.$verSource).filter('[value={0}]'.format(
                 curVal)).attr('checked', 'checked');
         }
 
         self.setLockAction(false,
             $(curNode).data('verPos'),
             $(this.$verSource).filter(':checked').data('verPos')
         );
     };
 
 
     this.attachVersionListener = function () {
         self.$verTarget.change(function (e) {
             self.adjustRadioSelectors(this)
         });
         self.$verSource.change(function (e) {
             self.adjustRadioSelectors(self.$verTarget.filter(':checked'))
         });
     };
 
     this.init = function () {
 
         var curNode = self.$verTarget.filter(':checked');
         self.adjustRadioSelectors(curNode);
         self.setLockAction(true);
         self.attachVersionListener();
 
     };
 
     this.setLockAction = function (state, selectedVersion, otherVersion) {
         var $showVersionDiff = this.$showVersionDiff;
 
         if (state) {
             $showVersionDiff.attr('disabled', 'disabled');
             $showVersionDiff.addClass('disabled');
             $showVersionDiff.html($showVersionDiff.data('labelTextLocked'));
         }
         else {
             $showVersionDiff.removeAttr('disabled');
             $showVersionDiff.removeClass('disabled');
 
             if (selectedVersion == otherVersion) {
                 $showVersionDiff.html($showVersionDiff.data('labelTextShow'));
             } else {
                 $showVersionDiff.html($showVersionDiff.data('labelTextDiff'));
             }
         }
 
     };
 
     this.showVersionDiff = function () {
         var target = self.$verTarget.filter(':checked');
         var source = self.$verSource.filter(':checked');
 
         if (target.val() && source.val()) {
             var params = {
                 'pull_request_id': templateContext.pull_request_data.pull_request_id,
                 'repo_name': templateContext.repo_name,
                 'version': target.val(),
                 'from_version': source.val()
             };
             window.location = pyroutes.url('pullrequest_show', params)
         }
 
         return false;
     };
 
     this.toggleVersionView = function (elem) {
 
         if (this.$showVersionDiff.is(':visible')) {
             $('.version-pr').hide();
             this.$showVersionDiff.hide();
             $(elem).html($(elem).data('toggleOn'))
         } else {
             $('.version-pr').show();
             this.$showVersionDiff.show();
             $(elem).html($(elem).data('toggleOff'))
         }
 
         return false
     }
 
 };
  No newline at end of file

rhodecode/templates/data_table/_dt_elements.mako

@@ -1,377 +1,425 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>
 
 ## 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="${_('Changelog')}" href="${h.route_path('repo_changelog',repo_name=repo_name)}">
          <span>${_('Changelog')}</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,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 and c.visual.show_private_icon:
       <i class="icon-lock" title="${_('Private repository')}"></i>
     %elif not private 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(name,rev,tip,author,last_msg, commit_date)">
   <div>
   %if rev >= 0:
       <code><a title="${h.tooltip('%s\n%s\n\n%s' % (author, commit_date, last_msg))}" class="tooltip" href="${h.route_path('repo_commit',repo_name=name,commit_id=tip)}">${'r%s:%s' % (rev,h.short_id(tip))}</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="user_gravatar(email, size=16)">
   <div class="rc-user tooltip" title="${h.tooltip(h.author_string(email))}">
     ${base.gravatar(email, 16)}
   </div>
 </%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')}">
         <i class="icon-pencil"></i>Edit</a>
     </div>
     <div class="grid_delete">
       ${h.secure_form(h.route_path('edit_repo_advanced_delete', repo_name=repo_name), request=request)}
         ${h.submit('remove_%s' % repo_name,_('Delete'),class_="btn btn-link btn-danger",
         onclick="return confirm('"+_('Confirm to delete this repository: %s') % repo_name+"');")}
       ${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-folder-close" title="${_('Repository group')}" style="font-size: 16px"></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)">
 
     <%
     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)}
         ${h.submit('remove_%s' % repo_group_name,_('Delete'),class_="btn btn-link btn-danger",
         onclick="return confirm('"+_ungettext('Confirm to delete this group: %s with %s repository','Confirm to delete this group: %s with %s repositories',gr_count) % (repo_group_name, gr_count)+"');")}
     ${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')}">
      <i class="icon-pencil"></i>${_('Edit')}</a>
  </div>
  <div class="grid_delete">
   ${h.secure_form(h.route_path('user_delete', user_id=user_id), request=request)}
     ${h.submit('remove_',_('Delete'),id="remove_user_%s" % user_id, class_="btn btn-link btn-danger",
     onclick="return confirm('"+_('Confirm to delete this user: %s') % username+"');")}
   ${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)}
       ${h.submit('remove_',_('Delete'),id="remove_group_%s" % user_group_id, class_="btn btn-link btn-danger",
       onclick="return confirm('"+_('Confirm to delete this user group: %s') % user_group_name+"');")}
     ${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)}
 </%def>
 
 <%def name="user_group_name(user_group_name)">
   <div>
       <i class="icon-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>
       <b>
         <a href="${h.route_path('gist_show', gist_id=gist_access_id)}">gist: ${gist_access_id}</a>
       </b>
     </div>
 </%def>
 
 <%def name="gist_author(full_contact, created_on, expires)">
     ${base.gravatar_with_user(full_contact, 16)}
 </%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':
       <div class="tag">${_('Private')}</div>
     %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)">
     <div class="${'flag_status %s' % status} pull-left"></div>
 </%def>
 
 <%def name="pullrequest_title(title, description)">
-    ${title} <br/>
-    ${h.shorter(description, 40)}
+    ${title}
 </%def>
 
 <%def name="pullrequest_comments(comments_nr)">
     <i class="icon-comment"></i> ${comments_nr}
 </%def>
 
 <%def name="pullrequest_name(pull_request_id, target_repo_name, short=False)">
     <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 #%(pr_number)s') % {'pr_number': pull_request_id,}}
       % endif
     </a>
 </%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)}
 </%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}">
+                <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>

rhodecode/templates/pullrequests/pullrequest.mako

@@ -1,542 +1,547 b''
 <%inherit file="/base/base.mako"/>
+<%namespace name="dt" file="/data_table/_dt_elements.mako"/>
 
 <%def name="title()">
     ${c.repo_name} ${_('New pull request')}
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${_('New pull request')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='showpullrequest')}
 </%def>
 
 <%def name="main()">
 <div class="box">
     <div class="title">
         ${self.repo_page_title(c.rhodecode_db_repo)}
     </div>
 
     ${h.secure_form(h.route_path('pullrequest_create', repo_name=c.repo_name, _query=request.GET.mixed()), id='pull_request_form', request=request)}
 
         ${self.breadcrumbs()}
 
         <div class="box pr-summary">
 
             <div class="summary-details block-left">
 
 
                 <div class="pr-details-title">
                     ${_('Pull request summary')}
                 </div>
 
                 <div class="form" style="padding-top: 10px">
                     <!-- fields -->
 
                     <div class="fields" >
 
                          <div class="field">
                             <div class="label">
                                 <label for="pullrequest_title">${_('Title')}:</label>
                             </div>
                             <div class="input">
                                 ${h.text('pullrequest_title', c.default_title, class_="medium autogenerated-title")}
                             </div>
                          </div>
 
                         <div class="field">
                             <div class="label label-textarea">
                                 <label for="pullrequest_desc">${_('Description')}:</label>
                             </div>
                             <div class="textarea text-area editor">
-                                ${h.textarea('pullrequest_desc',size=30, )}
-                                <span class="help-block">${_('Write a short description on this pull request')}</span>
+                                ${dt.markup_form('pullrequest_desc')}
                             </div>
                         </div>
 
                         <div class="field">
                             <div class="label label-textarea">
-                                <label for="pullrequest_desc">${_('Commit flow')}:</label>
+                                <label for="commit_flow">${_('Commit flow')}:</label>
                             </div>
 
                             ## TODO: johbo: Abusing the "content" class here to get the
                             ## desired effect. Should be replaced by a proper solution.
 
                             ##ORG
                             <div class="content">
                                 <strong>${_('Source repository')}:</strong>
                                 ${c.rhodecode_db_repo.description}
                             </div>
                             <div class="content">
                                 ${h.hidden('source_repo')}
                                 ${h.hidden('source_ref')}
                             </div>
 
                             ##OTHER, most Probably the PARENT OF THIS FORK
                             <div class="content">
                                 ## filled with JS
                                 <div id="target_repo_desc"></div>
                             </div>
 
                             <div class="content">
                                 ${h.hidden('target_repo')}
                                 ${h.hidden('target_ref')}
                                 <span id="target_ref_loading" style="display: none">
                                     ${_('Loading refs...')}
                                 </span>
                             </div>
                         </div>
 
                         <div class="field">
                             <div class="label label-textarea">
                                 <label for="pullrequest_submit"></label>
                             </div>
                             <div class="input">
                                 <div class="pr-submit-button">
                                     <input id="pr_submit" class="btn" name="save" type="submit" value="${_('Submit Pull Request')}">
                                 </div>
                                 <div id="pr_open_message"></div>
                             </div>
                         </div>
 
                         <div class="pr-spacing-container"></div>
                     </div>
                 </div>
             </div>
             <div>
                 ## AUTHOR
                 <div class="reviewers-title block-right">
                   <div class="pr-details-title">
                       ${_('Author of this pull request')}
                   </div>
                 </div>
                 <div class="block-right pr-details-content reviewers">
                     <ul class="group_members">
                       <li>
                         ${self.gravatar_with_user(c.rhodecode_user.email, 16)}
                       </li>
                     </ul>
                 </div>
 
                 ## REVIEW RULES
                 <div id="review_rules" style="display: none" class="reviewers-title block-right">
                     <div class="pr-details-title">
                         ${_('Reviewer rules')}
                     </div>
                     <div class="pr-reviewer-rules">
                         ## review rules will be appended here, by default reviewers logic
                     </div>
                 </div>
 
                 ## REVIEWERS
                 <div class="reviewers-title block-right">
                     <div class="pr-details-title">
                         ${_('Pull request reviewers')}
                         <span class="calculate-reviewers"> - ${_('loading...')}</span>
                     </div>
                 </div>
                 <div id="reviewers" class="block-right pr-details-content reviewers">
                     ## members goes here, filled via JS based on initial selection !
                     <input type="hidden" name="__start__" value="review_members:sequence">
                     <ul id="review_members" class="group_members"></ul>
                     <input type="hidden" name="__end__" value="review_members:sequence">
                     <div id="add_reviewer_input" class='ac'>
                         <div class="reviewer_ac">
                             ${h.text('user', class_='ac-input', placeholder=_('Add reviewer or reviewer group'))}
                             <div id="reviewers_container"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="box">
             <div>
                 ## overview pulled by ajax
                 <div id="pull_request_overview"></div>
             </div>
         </div>
     ${h.end_form()}
 </div>
 
 <script type="text/javascript">
-$(function(){
-  var defaultSourceRepo = '${c.default_repo_data['source_repo_name']}';
-  var defaultSourceRepoData = ${c.default_repo_data['source_refs_json']|n};
-  var defaultTargetRepo = '${c.default_repo_data['target_repo_name']}';
-  var defaultTargetRepoData = ${c.default_repo_data['target_refs_json']|n};
+ $(function(){
+   var defaultSourceRepo = '${c.default_repo_data['source_repo_name']}';
+   var defaultSourceRepoData = ${c.default_repo_data['source_refs_json']|n};
+   var defaultTargetRepo = '${c.default_repo_data['target_repo_name']}';
+   var defaultTargetRepoData = ${c.default_repo_data['target_refs_json']|n};
 
-  var $pullRequestForm = $('#pull_request_form');
-  var $pullRequestSubmit = $('#pr_submit', $pullRequestForm);
-  var $sourceRepo = $('#source_repo', $pullRequestForm);
-  var $targetRepo = $('#target_repo', $pullRequestForm);
-  var $sourceRef = $('#source_ref', $pullRequestForm);
-  var $targetRef = $('#target_ref', $pullRequestForm);
+   var $pullRequestForm = $('#pull_request_form');
+   var $pullRequestSubmit = $('#pr_submit', $pullRequestForm);
+   var $sourceRepo = $('#source_repo', $pullRequestForm);
+   var $targetRepo = $('#target_repo', $pullRequestForm);
+   var $sourceRef = $('#source_ref', $pullRequestForm);
+   var $targetRef = $('#target_ref', $pullRequestForm);
 
-  var sourceRepo = function() { return $sourceRepo.eq(0).val() };
-  var sourceRef = function() { return $sourceRef.eq(0).val().split(':') };
+   var sourceRepo = function() { return $sourceRepo.eq(0).val() };
+   var sourceRef = function() { return $sourceRef.eq(0).val().split(':') };
 
-  var targetRepo = function() { return $targetRepo.eq(0).val() };
-  var targetRef = function() { return $targetRef.eq(0).val().split(':') };
+   var targetRepo = function() { return $targetRepo.eq(0).val() };
+   var targetRef = function() { return $targetRef.eq(0).val().split(':') };
 
-  var calculateContainerWidth = function() {
-      var maxWidth = 0;
-      var repoSelect2Containers = ['#source_repo', '#target_repo'];
-      $.each(repoSelect2Containers, function(idx, value) {
-          $(value).select2('container').width('auto');
-          var curWidth = $(value).select2('container').width();
-          if (maxWidth <= curWidth) {
-              maxWidth = curWidth;
-          }
-          $.each(repoSelect2Containers, function(idx, value) {
-              $(value).select2('container').width(maxWidth + 10);
-          });
-      });
-  };
+   var calculateContainerWidth = function() {
+       var maxWidth = 0;
+       var repoSelect2Containers = ['#source_repo', '#target_repo'];
+       $.each(repoSelect2Containers, function(idx, value) {
+           $(value).select2('container').width('auto');
+           var curWidth = $(value).select2('container').width();
+           if (maxWidth <= curWidth) {
+               maxWidth = curWidth;
+           }
+           $.each(repoSelect2Containers, function(idx, value) {
+               $(value).select2('container').width(maxWidth + 10);
+           });
+       });
+   };
 
-  var initRefSelection = function(selectedRef) {
-      return function(element, callback) {
-          // translate our select2 id into a text, it's a mapping to show
-          // simple label when selecting by internal ID.
-          var id, refData;
-          if (selectedRef === undefined || selectedRef === null) {
-            id = element.val();
-            refData = element.val().split(':');
+   var initRefSelection = function(selectedRef) {
+       return function(element, callback) {
+           // translate our select2 id into a text, it's a mapping to show
+           // simple label when selecting by internal ID.
+           var id, refData;
+           if (selectedRef === undefined || selectedRef === null) {
+             id = element.val();
+             refData = element.val().split(':');
 
-            if (refData.length !== 3){
-                refData = ["", "", ""]
-            }
-          } else {
-            id = selectedRef;
-            refData = selectedRef.split(':');
-          }
+             if (refData.length !== 3){
+                 refData = ["", "", ""]
+             }
+           } else {
+             id = selectedRef;
+             refData = selectedRef.split(':');
+           }
 
-          var text = refData[1];
-          if (refData[0] === 'rev') {
-              text = text.substring(0, 12);
-          }
+           var text = refData[1];
+           if (refData[0] === 'rev') {
+               text = text.substring(0, 12);
+           }
 
-          var data = {id: id, text: text};
-          callback(data);
-      };
-  };
+           var data = {id: id, text: text};
+           callback(data);
+       };
+   };
 
-  var formatRefSelection = function(item) {
-      var prefix = '';
-      var refData = item.id.split(':');
-      if (refData[0] === 'branch') {
-          prefix = '<i class="icon-branch"></i>';
-      }
-      else if (refData[0] === 'book') {
-          prefix = '<i class="icon-bookmark"></i>';
-      }
-      else if (refData[0] === 'tag') {
-          prefix = '<i class="icon-tag"></i>';
-      }
+   var formatRefSelection = function(item) {
+       var prefix = '';
+       var refData = item.id.split(':');
+       if (refData[0] === 'branch') {
+           prefix = '<i class="icon-branch"></i>';
+       }
+       else if (refData[0] === 'book') {
+           prefix = '<i class="icon-bookmark"></i>';
+       }
+       else if (refData[0] === 'tag') {
+           prefix = '<i class="icon-tag"></i>';
+       }
 
-      var originalOption = item.element;
-      return prefix + item.text;
-  };
+       var originalOption = item.element;
+       return prefix + item.text;
+   };
 
-  // custom code mirror
-  var codeMirrorInstance = initPullRequestsCodeMirror('#pullrequest_desc');
+   // custom code mirror
+   var codeMirrorInstance = $('#pullrequest_desc').get(0).MarkupForm.cm;
 
-  reviewersController = new ReviewersController();
+   reviewersController = new ReviewersController();
 
-  var queryTargetRepo = function(self, query) {
-      // cache ALL results if query is empty
-      var cacheKey = query.term || '__';
-      var cachedData = self.cachedDataSource[cacheKey];
+   var queryTargetRepo = function(self, query) {
+       // cache ALL results if query is empty
+       var cacheKey = query.term || '__';
+       var cachedData = self.cachedDataSource[cacheKey];
 
-      if (cachedData) {
-          query.callback({results: cachedData.results});
-      } else {
-          $.ajax({
-              url: pyroutes.url('pullrequest_repo_destinations', {'repo_name': templateContext.repo_name}),
-              data: {query: query.term},
-              dataType: 'json',
-              type: 'GET',
-              success: function(data) {
-                  self.cachedDataSource[cacheKey] = data;
-                  query.callback({results: data.results});
-              },
-              error: function(data, textStatus, errorThrown) {
-                  alert(
-                    "Error while fetching entries.\nError code {0} ({1}).".format(data.status, data.statusText));
-              }
-          });
-      }
-  };
+       if (cachedData) {
+           query.callback({results: cachedData.results});
+       } else {
+           $.ajax({
+               url: pyroutes.url('pullrequest_repo_destinations', {'repo_name': templateContext.repo_name}),
+               data: {query: query.term},
+               dataType: 'json',
+               type: 'GET',
+               success: function(data) {
+                   self.cachedDataSource[cacheKey] = data;
+                   query.callback({results: data.results});
+               },
+               error: function(data, textStatus, errorThrown) {
+                   alert(
+                     "Error while fetching entries.\nError code {0} ({1}).".format(data.status, data.statusText));
+               }
+           });
+       }
+   };
 
-  var queryTargetRefs = function(initialData, query) {
-      var data = {results: []};
-      // filter initialData
-      $.each(initialData, function() {
-          var section = this.text;
-          var children = [];
-          $.each(this.children, function() {
-              if (query.term.length === 0 ||
-                  this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ) {
-                  children.push({'id': this.id, 'text': this.text})
-              }
-          });
-          data.results.push({'text': section, 'children': children})
-      });
-      query.callback({results: data.results});
-  };
+   var queryTargetRefs = function(initialData, query) {
+       var data = {results: []};
+       // filter initialData
+       $.each(initialData, function() {
+           var section = this.text;
+           var children = [];
+           $.each(this.children, function() {
+               if (query.term.length === 0 ||
+                   this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ) {
+                   children.push({'id': this.id, 'text': this.text})
+               }
+           });
+           data.results.push({'text': section, 'children': children})
+       });
+       query.callback({results: data.results});
+   };
 
-  var loadRepoRefDiffPreview = function() {
+   var loadRepoRefDiffPreview = function() {
 
-      var url_data = {
-          'repo_name': targetRepo(),
-          'target_repo': sourceRepo(),
-          'source_ref': targetRef()[2],
-          'source_ref_type': 'rev',
-          'target_ref': sourceRef()[2],
-          'target_ref_type': 'rev',
-          'merge': true,
-          '_': Date.now() // bypass browser caching
-      }; // gather the source/target ref and repo here
+       var url_data = {
+           'repo_name': targetRepo(),
+           'target_repo': sourceRepo(),
+           'source_ref': targetRef()[2],
+           'source_ref_type': 'rev',
+           'target_ref': sourceRef()[2],
+           'target_ref_type': 'rev',
+           'merge': true,
+           '_': Date.now() // bypass browser caching
+       }; // gather the source/target ref and repo here
 
-      if (sourceRef().length !== 3 || targetRef().length !== 3) {
-          prButtonLock(true, "${_('Please select source and target')}");
-          return;
-      }
-      var url = pyroutes.url('repo_compare', url_data);
+       if (sourceRef().length !== 3 || targetRef().length !== 3) {
+           prButtonLock(true, "${_('Please select source and target')}");
+           return;
+       }
+       var url = pyroutes.url('repo_compare', url_data);
 
-      // lock PR button, so we cannot send PR before it's calculated
-      prButtonLock(true, "${_('Loading compare ...')}", 'compare');
+       // lock PR button, so we cannot send PR before it's calculated
+       prButtonLock(true, "${_('Loading compare ...')}", 'compare');
+
+       if (loadRepoRefDiffPreview._currentRequest) {
+           loadRepoRefDiffPreview._currentRequest.abort();
+       }
 
-      if (loadRepoRefDiffPreview._currentRequest) {
-          loadRepoRefDiffPreview._currentRequest.abort();
-      }
+       loadRepoRefDiffPreview._currentRequest = $.get(url)
+           .error(function(data, textStatus, errorThrown) {
+                 if (textStatus !== 'abort') {
+                     alert(
+                         "Error while processing request.\nError code {0} ({1}).".format(
+                                 data.status, data.statusText));
+                 }
 
-      loadRepoRefDiffPreview._currentRequest = $.get(url)
-          .error(function(data, textStatus, errorThrown) {
-                if (textStatus !== 'abort') {
-                    alert(
-                        "Error while processing request.\nError code {0} ({1}).".format(
-                                data.status, data.statusText));
-                }
+           })
+           .done(function(data) {
+               loadRepoRefDiffPreview._currentRequest = null;
+               $('#pull_request_overview').html(data);
+
+               var commitElements = $(data).find('tr[commit_id]');
 
-          })
-          .done(function(data) {
-              loadRepoRefDiffPreview._currentRequest = null;
-              $('#pull_request_overview').html(data);
+               var prTitleAndDesc = getTitleAndDescription(
+                   sourceRef()[1], commitElements, 5);
 
-              var commitElements = $(data).find('tr[commit_id]');
+               var title = prTitleAndDesc[0];
+               var proposedDescription = prTitleAndDesc[1];
 
-              var prTitleAndDesc = getTitleAndDescription(
-                  sourceRef()[1], commitElements, 5);
+               var useGeneratedTitle = (
+                    $('#pullrequest_title').hasClass('autogenerated-title') ||
+                    $('#pullrequest_title').val() === "");
 
-              var title = prTitleAndDesc[0];
-              var proposedDescription = prTitleAndDesc[1];
-
-              var useGeneratedTitle = (
-                   $('#pullrequest_title').hasClass('autogenerated-title') ||
-                   $('#pullrequest_title').val() === "");
+               if (title && useGeneratedTitle) {
+                   // use generated title if we haven't specified our own
+                   $('#pullrequest_title').val(title);
+                   $('#pullrequest_title').addClass('autogenerated-title');
 
-              if (title && useGeneratedTitle) {
-                  // use generated title if we haven't specified our own
-                  $('#pullrequest_title').val(title);
-                  $('#pullrequest_title').addClass('autogenerated-title');
+               }
+
+               var useGeneratedDescription = (
+                   !codeMirrorInstance._userDefinedValue ||
+                    codeMirrorInstance.getValue() === "");
 
-              }
+               if (proposedDescription && useGeneratedDescription) {
+                    // set proposed content, if we haven't defined our own,
+                    // or we don't have description written
+                    codeMirrorInstance._userDefinedValue = false; // reset state
+                    codeMirrorInstance.setValue(proposedDescription);
+               }
 
-              var useGeneratedDescription = (
-                  !codeMirrorInstance._userDefinedDesc ||
-                   codeMirrorInstance.getValue() === "");
+               // refresh our codeMirror so events kicks in and it's change aware
+               codeMirrorInstance.refresh();
 
-              if (proposedDescription && useGeneratedDescription) {
-                  // set proposed content, if we haven't defined our own,
-                  // or we don't have description written
-                  codeMirrorInstance._userDefinedDesc = false; // reset state
-                  codeMirrorInstance.setValue(proposedDescription);
-              }
+               var msg = '';
+               if (commitElements.length === 1) {
+                   msg = "${_ungettext('This pull request will consist of __COMMITS__ commit.', 'This pull request will consist of __COMMITS__ commits.', 1)}";
+               } else {
+                   msg = "${_ungettext('This pull request will consist of __COMMITS__ commit.', 'This pull request will consist of __COMMITS__ commits.', 2)}";
+               }
 
-              var msg = '';
-              if (commitElements.length === 1) {
-                  msg = "${_ungettext('This pull request will consist of __COMMITS__ commit.', 'This pull request will consist of __COMMITS__ commits.', 1)}";
-              } else {
-                  msg = "${_ungettext('This pull request will consist of __COMMITS__ commit.', 'This pull request will consist of __COMMITS__ commits.', 2)}";
-              }
+               msg += ' <a id="pull_request_overview_url" href="{0}" target="_blank">${_('Show detailed compare.')}</a>'.format(url);
 
-              msg += ' <a id="pull_request_overview_url" href="{0}" target="_blank">${_('Show detailed compare.')}</a>'.format(url);
-
-              if (commitElements.length) {
-                  var commitsLink = '<a href="#pull_request_overview"><strong>{0}</strong></a>'.format(commitElements.length);
-                  prButtonLock(false, msg.replace('__COMMITS__', commitsLink), 'compare');
-              }
-              else {
-                  prButtonLock(true, "${_('There are no commits to merge.')}", 'compare');
-              }
+               if (commitElements.length) {
+                   var commitsLink = '<a href="#pull_request_overview"><strong>{0}</strong></a>'.format(commitElements.length);
+                   prButtonLock(false, msg.replace('__COMMITS__', commitsLink), 'compare');
+               }
+               else {
+                   prButtonLock(true, "${_('There are no commits to merge.')}", 'compare');
+               }
 
 
-          });
-  };
+           });
+   };
 
-  var Select2Box = function(element, overrides) {
-    var globalDefaults = {
-        dropdownAutoWidth: true,
-        containerCssClass: "drop-menu",
-        dropdownCssClass: "drop-menu-dropdown"
-    };
+   var Select2Box = function(element, overrides) {
+     var globalDefaults = {
+         dropdownAutoWidth: true,
+         containerCssClass: "drop-menu",
+         dropdownCssClass: "drop-menu-dropdown"
+     };
 
-    var initSelect2 = function(defaultOptions) {
-      var options = jQuery.extend(globalDefaults, defaultOptions, overrides);
-      element.select2(options);
-    };
+     var initSelect2 = function(defaultOptions) {
+       var options = jQuery.extend(globalDefaults, defaultOptions, overrides);
+       element.select2(options);
+     };
 
-    return {
-      initRef: function() {
-        var defaultOptions = {
-          minimumResultsForSearch: 5,
-          formatSelection: formatRefSelection
-        };
+     return {
+       initRef: function() {
+         var defaultOptions = {
+           minimumResultsForSearch: 5,
+           formatSelection: formatRefSelection
+         };
 
-        initSelect2(defaultOptions);
-      },
+         initSelect2(defaultOptions);
+       },
 
-      initRepo: function(defaultValue, readOnly) {
-        var defaultOptions = {
-          initSelection : function (element, callback) {
-            var data = {id: defaultValue, text: defaultValue};
-            callback(data);
-          }
-        };
+       initRepo: function(defaultValue, readOnly) {
+         var defaultOptions = {
+           initSelection : function (element, callback) {
+             var data = {id: defaultValue, text: defaultValue};
+             callback(data);
+           }
+         };
 
-        initSelect2(defaultOptions);
+         initSelect2(defaultOptions);
 
-        element.select2('val', defaultSourceRepo);
-        if (readOnly === true) {
-          element.select2('readonly', true);
-        }
-      }
-    };
-  };
+         element.select2('val', defaultSourceRepo);
+         if (readOnly === true) {
+           element.select2('readonly', true);
+         }
+       }
+     };
+   };
 
-  var initTargetRefs = function(refsData, selectedRef) {
+   var initTargetRefs = function(refsData, selectedRef) {
 
-    Select2Box($targetRef, {
-        placeholder: "${_('Select commit reference')}",
-      query: function(query) {
-        queryTargetRefs(refsData, query);
-      },
-      initSelection : initRefSelection(selectedRef)
-    }).initRef();
+     Select2Box($targetRef, {
+         placeholder: "${_('Select commit reference')}",
+       query: function(query) {
+         queryTargetRefs(refsData, query);
+       },
+       initSelection : initRefSelection(selectedRef)
+     }).initRef();
 
-    if (!(selectedRef === undefined)) {
-        $targetRef.select2('val', selectedRef);
-    }
-  };
+     if (!(selectedRef === undefined)) {
+         $targetRef.select2('val', selectedRef);
+     }
+   };
 
-  var targetRepoChanged = function(repoData) {
-      // generate new DESC of target repo displayed next to select
-      var prLink = pyroutes.url('pullrequest_new', {'repo_name': repoData['name']});
-      $('#target_repo_desc').html(
-          "<strong>${_('Target repository')}</strong>: {0}. <a href=\"{1}\">Switch base, and use as source.</a>".format(repoData['description'], prLink)
-      );
+   var targetRepoChanged = function(repoData) {
+       // generate new DESC of target repo displayed next to select
+       var prLink = pyroutes.url('pullrequest_new', {'repo_name': repoData['name']});
+       $('#target_repo_desc').html(
+           "<strong>${_('Target repository')}</strong>: {0}. <a href=\"{1}\">Switch base, and use as source.</a>".format(repoData['description'], prLink)
+       );
 
-      // generate dynamic select2 for refs.
-      initTargetRefs(repoData['refs']['select2_refs'],
-                     repoData['refs']['selected_ref']);
+       // generate dynamic select2 for refs.
+       initTargetRefs(repoData['refs']['select2_refs'],
+                      repoData['refs']['selected_ref']);
 
-  };
+   };
 
-  var sourceRefSelect2 = Select2Box($sourceRef, {
-      placeholder: "${_('Select commit reference')}",
-      query: function(query) {
-        var initialData = defaultSourceRepoData['refs']['select2_refs'];
-        queryTargetRefs(initialData, query)
-      },
-      initSelection: initRefSelection()
-    }
-  );
+   var sourceRefSelect2 = Select2Box($sourceRef, {
+       placeholder: "${_('Select commit reference')}",
+       query: function(query) {
+         var initialData = defaultSourceRepoData['refs']['select2_refs'];
+         queryTargetRefs(initialData, query)
+       },
+       initSelection: initRefSelection()
+     }
+   );
 
-  var sourceRepoSelect2 = Select2Box($sourceRepo, {
-    query: function(query) {}
-  });
+   var sourceRepoSelect2 = Select2Box($sourceRepo, {
+     query: function(query) {}
+   });
 
-  var targetRepoSelect2 = Select2Box($targetRepo, {
-    cachedDataSource: {},
-    query: $.debounce(250, function(query) {
-      queryTargetRepo(this, query);
-    }),
-    formatResult: formatRepoResult
-  });
+   var targetRepoSelect2 = Select2Box($targetRepo, {
+     cachedDataSource: {},
+     query: $.debounce(250, function(query) {
+       queryTargetRepo(this, query);
+     }),
+     formatResult: formatRepoResult
+   });
 
-  sourceRefSelect2.initRef();
+   sourceRefSelect2.initRef();
 
-  sourceRepoSelect2.initRepo(defaultSourceRepo, true);
+   sourceRepoSelect2.initRepo(defaultSourceRepo, true);
 
-  targetRepoSelect2.initRepo(defaultTargetRepo, false);
+   targetRepoSelect2.initRepo(defaultTargetRepo, false);
 
-  $sourceRef.on('change', function(e){
-    loadRepoRefDiffPreview();
-    reviewersController.loadDefaultReviewers(
-        sourceRepo(), sourceRef(), targetRepo(), targetRef());
-  });
+   $sourceRef.on('change', function(e){
+     loadRepoRefDiffPreview();
+     reviewersController.loadDefaultReviewers(
+         sourceRepo(), sourceRef(), targetRepo(), targetRef());
+   });
 
-  $targetRef.on('change', function(e){
-    loadRepoRefDiffPreview();
-    reviewersController.loadDefaultReviewers(
-        sourceRepo(), sourceRef(), targetRepo(), targetRef());
-  });
+   $targetRef.on('change', function(e){
+     loadRepoRefDiffPreview();
+     reviewersController.loadDefaultReviewers(
+         sourceRepo(), sourceRef(), targetRepo(), targetRef());
+   });
 
-  $targetRepo.on('change', function(e){
-      var repoName = $(this).val();
-      calculateContainerWidth();
-      $targetRef.select2('destroy');
-      $('#target_ref_loading').show();
+   $targetRepo.on('change', function(e){
+       var repoName = $(this).val();
+       calculateContainerWidth();
+       $targetRef.select2('destroy');
+       $('#target_ref_loading').show();
 
-      $.ajax({
-          url: pyroutes.url('pullrequest_repo_refs',
-            {'repo_name': templateContext.repo_name, 'target_repo_name':repoName}),
-          data: {},
-          dataType: 'json',
-          type: 'GET',
-          success: function(data) {
-              $('#target_ref_loading').hide();
-              targetRepoChanged(data);
-              loadRepoRefDiffPreview();
-          },
-          error: function(data, textStatus, errorThrown) {
-              alert("Error while fetching entries.\nError code {0} ({1}).".format(data.status, data.statusText));
-          }
-      })
+       $.ajax({
+           url: pyroutes.url('pullrequest_repo_refs',
+             {'repo_name': templateContext.repo_name, 'target_repo_name':repoName}),
+           data: {},
+           dataType: 'json',
+           type: 'GET',
+           success: function(data) {
+               $('#target_ref_loading').hide();
+               targetRepoChanged(data);
+               loadRepoRefDiffPreview();
+           },
+           error: function(data, textStatus, errorThrown) {
+               alert("Error while fetching entries.\nError code {0} ({1}).".format(data.status, data.statusText));
+           }
+       })
 
-  });
-
-  $pullRequestForm.on('submit', function(e){
-      prButtonLock(true, null, 'all');
-  });
+   });
 
-  prButtonLock(true, "${_('Please select source and target')}", 'all');
+    $pullRequestForm.on('submit', function(e){
+        // Flush changes into textarea
+        codeMirrorInstance.save();
+        prButtonLock(true, null, 'all');
+    });
 
-  // auto-load on init, the target refs select2
-  calculateContainerWidth();
-  targetRepoChanged(defaultTargetRepoData);
+   prButtonLock(true, "${_('Please select source and target')}", 'all');
 
-  $('#pullrequest_title').on('keyup', function(e){
-      $(this).removeClass('autogenerated-title');
-  });
+   // auto-load on init, the target refs select2
+   calculateContainerWidth();
+   targetRepoChanged(defaultTargetRepoData);
 
-  % if c.default_source_ref:
-  // in case we have a pre-selected value, use it now
-  $sourceRef.select2('val', '${c.default_source_ref}');
-  // diff preview load
-  loadRepoRefDiffPreview();
-  // default reviewers
-  reviewersController.loadDefaultReviewers(
-      sourceRepo(), sourceRef(), targetRepo(), targetRef());
-  % endif
+   $('#pullrequest_title').on('keyup', function(e){
+       $(this).removeClass('autogenerated-title');
+   });
 
-  ReviewerAutoComplete('#user');
-});
+   % if c.default_source_ref:
+   // in case we have a pre-selected value, use it now
+   $sourceRef.select2('val', '${c.default_source_ref}');
+   // diff preview load
+   loadRepoRefDiffPreview();
+   // default reviewers
+   reviewersController.loadDefaultReviewers(
+       sourceRepo(), sourceRef(), targetRepo(), targetRef());
+   % endif
+
+   ReviewerAutoComplete('#user');
+ });
 </script>
 
 </%def>

rhodecode/templates/pullrequests/pullrequest_show.mako

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