front-end: use At.js for MentionsAutoComplete

We want to get rid of YUI, and select2 is not well suited for this purpose.
So use At.js, which is made just for this use case.

Original implementation was modified by Mads Kiilerich.

.hgignore

@@ -1,50 +1,52 b''
 syntax: glob
 *.pyc
 *.swp
 *.sqlite
 *.tox
 *.egg-info
 *.egg
 *.mo
 .eggs/
 tarballcache/
 
 syntax: regexp
 ^rcextensions
 ^build
 ^dist/
 ^docs/build/
 ^docs/_build/
 ^data$
 ^sql_dumps/
 ^\.settings$
 ^\.project$
 ^\.pydevproject$
 ^\.coverage$
 ^kallithea/front-end/node_modules$
 ^kallithea/front-end/package-lock\.json$
 ^kallithea/front-end/tmp$
 ^kallithea/public/codemirror$
 ^kallithea/public/css/select2-spinner\.gif$
 ^kallithea/public/css/select2\.png$
 ^kallithea/public/css/select2x2\.png$
 ^kallithea/public/css/style\.css$
 ^kallithea/public/css/style\.css\.map$
 ^kallithea/public/js/bootstrap\.js$
 ^kallithea/public/js/dataTables\.bootstrap\.js$
+^kallithea/public/js/jquery\.atwho\.min\.js$
+^kallithea/public/js/jquery\.caret\.min\.js$
 ^kallithea/public/js/jquery\.dataTables\.js$
 ^kallithea/public/js/jquery\.flot\.js$
 ^kallithea/public/js/jquery\.flot\.selection\.js$
 ^kallithea/public/js/jquery\.flot\.time\.js$
 ^kallithea/public/js/jquery\.min\.js$
 ^kallithea/public/js/select2\.js$
 ^theme\.less$
 ^kallithea\.db$
 ^test\.db$
 ^Kallithea\.egg-info$
 ^my\.ini$
 ^fabfile.py
 ^\.idea$
 ^\.cache$
 ^\.pytest_cache$
 /__pycache__$

LICENSE.md

@@ -1,311 +1,343 b''
 Kallithea License
 =================
 
 Kallithea as a whole is copyrighted by various authors and is licensed under
 the terms of the GNU General Public License, version 3 (GPLv3), which is a
 license published by the Free Software Foundation,
 Inc. [A copy of GPLv3](/COPYING) is included herein.
 
 Some individual files have copyright notices and those who offer changes to
 those files should update the copyright notices in those specific files if
 they so chose.
 
 However, the definitive list of copyright holders for this project is kept in
 [the about page template](kallithea/templates/about.html) so that it is
 displayed appropriately when Kallithea is installed.  This is the most
 important place to update copyright notices.
 
 Third-Party Code Incorporated in Kallithea
 ==========================================
 
 Various third-party code under GPLv3-compatible licenses is included as part
 of Kallithea.
 
 
 Alembic
 -------
 
 Kallithea incorporates an [Alembic](http://alembic.zzzcomputing.com/en/latest/)
 "migration environment" in `kallithea/alembic`, portions of which is:
 
 Copyright © 2009-2016 by Michael Bayer.
 Alembic is a trademark of Michael Bayer.
 
 and licensed under the MIT-permissive license, which is
 [included in this distribution](MIT-Permissive-License.txt).
 
 
 Bootstrap
 ---------
 
 Kallithea uses the web framework called
 [Bootstrap](http://getbootstrap.com/), which is:
 
 Copyright © 2011-2016 Twitter, Inc.
 
 and licensed under the MIT-permissive license, which is
 [included in this distribution](MIT-Permissive-License.txt).
 
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 
 
 
 Codemirror
 ----------
 
 Kallithea uses the Javascript system called
 [Codemirror](http://codemirror.net/), version 4.7.0, which is primarily:
 
 Copyright &copy; 2013-2014 by Marijn Haverbeke <[e-mail]>
 
 and licensed under the MIT-permissive license, which is
 [included in this distribution](MIT-Permissive-License.txt).
 
 Additional files from upstream Codemirror are copyrighted by various authors
 and licensed under other permissive licenses.
 
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 
 
 
 jQuery
 ------
 
 Kallithea uses the Javascript system called
 [jQuery](http://jquery.org/).
 
 It is Copyright 2013 jQuery Foundation and other contributors http://jquery.com/ and is under an
 [MIT-permissive license](MIT-Permissive-License.txt).
 
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 
 
 
+At.js
+-----
+
+Kallithea uses the Javascript system called
+[At.js](http://ichord.github.com/At.js),
+which can be found together with its Corresponding Source in
+https://github.com/ichord/At.js at tag v1.5.4.
+
+It is Copyright 2013 [e-mail] and is under an
+[MIT-permissive license](MIT-Permissive-License.txt).
+
+It is not distributed with Kallithea, but will be downloaded
+using the ''kallithea-cli front-end-build'' command.
+
+
+
+Caret.js
+--------
+
+Kallithea uses the Javascript system called
+[Caret.js](http://ichord.github.com/Caret.js/),
+which can be found together with its Corresponding Source in
+https://github.com/ichord/Caret.js at tag v0.3.1.
+
+It is Copyright 2013 [e-mail] and is under an
+[MIT-permissive license](MIT-Permissive-License.txt).
+
+It is not distributed with Kallithea, but will be downloaded
+using the ''kallithea-cli front-end-build'' command.
+
+
+
 DataTables
 ----------
 
 Kallithea uses the Javascript system called
 [DataTables](http://www.datatables.net/).
 
 It is Copyright 2008-2015 SpryMedia Ltd. and is under an
 [MIT-permissive license](MIT-Permissive-License.txt).
 
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 
 
 
 Mergely
 -------
 
 Kallithea incorporates some code from the Javascript system called
 [Mergely](http://www.mergely.com/), version 3.3.9.
 [Mergely's license](http://www.mergely.com/license.php), a
 [copy of which is included in this repository](LICENSE-MERGELY.html),
 is (GPL|LGPL|MPL).  Kallithea as GPLv3'd project chooses the GPL arm of that
 tri-license.
 
 
 
 Select2
 -------
 
 Kallithea uses the Javascript system called
 [Select2](http://ivaynberg.github.io/select2/), which is:
 
 Copyright 2012 Igor Vaynberg (and probably others)
 
 and is licensed [under the following license](https://github.com/ivaynberg/select2/blob/master/LICENSE):
 
 > This software is licensed under the Apache License, Version 2.0 (the
 > "Apache License") or the GNU General Public License version 2 (the "GPL
 > License"). You may choose either license to govern your use of this
 > software only upon the condition that you accept all of the terms of either
 > the Apache License or the GPL License.
 
 A [copy of the Apache License 2.0](Apache-License-2.0.txt) is also included
 in this distribution.
 
 Kallithea will take the Apache license fork of the dual license, since
 Kallithea is GPLv3'd.
 
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 
 
 
 Select2-Bootstrap-CSS
 ---------------------
 
 Kallithea uses some CSS from a system called
 [Select2-bootstrap-css](https://github.com/t0m/select2-bootstrap-css), which
 is:
 
 Copyright &copy; 2013 Tom Terrace (and likely others)
 
 and licensed under the MIT-permissive license, which is
 [included in this distribution](MIT-Permissive-License.txt).
 
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 
 
 
 History.js
 ----------
 
 Kallithea incorporates some CSS from a system called History.js, which is
 
 Copyright 2010-2011 Benjamin Arthur Lupton <[e-mail]>
 
 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
 
 1. Redistributions of source code must retain the above copyright notice,
    this list of conditions and the following disclaimer.
 
 2. Redistributions in binary form must reproduce the above copyright notice,
    this list of conditions and the following disclaimer in the documentation
    and/or other materials provided with the distribution.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
 LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 
 
 
 YUI
 ---
 
 Kallithea incorporates parts of the Javascript system called
 [YUI 2 — Yahoo! User Interface Library](http://yui.github.io/yui2/docs/yui_2.9.0_full/),
 which is made available under the [BSD License](http://yuilibrary.com/license/):
 
 Copyright &copy; 2013 Yahoo! Inc. All rights reserved.
 
 Redistribution and use of this software in source and binary forms, with or
 without modification, are permitted provided that the following conditions are
 met:
 
 * Redistributions of source code must retain the above copyright notice, this
   list of conditions and the following disclaimer.
 
 * Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.
 
 * Neither the name of Yahoo! Inc. nor the names of YUI's contributors may be
   used to endorse or promote products derived from this software without
   specific prior written permission of Yahoo! Inc.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
 ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 
 Kallithea includes a minified version of YUI 2.9. To build yui.2.9.js:
 
     git clone https://github.com/yui/builder
     git clone https://github.com/yui/yui2
     cd yui2/
     git checkout hudson-yui2-2800
     ln -sf JumpToPageDropDown.js src/paginator/js/JumpToPageDropdown.js # work around inconsistent casing
     rm -f tmp.js
     for m in yahoo event dom animation datasource autocomplete event-delegate; do
       rm -f build/$m/$m.js
       ( cd src/$m && ant build deploybuild ) && sed -e 's,@VERSION@,2.9.0,g' -e 's,@BUILD@,2800,g' build/$m/$m.js >> tmp.js
     done
     java -jar ../builder/componentbuild/lib/yuicompressor/yuicompressor-2.4.4.jar tmp.js -o yui.2.9.js
 
 In compliance with GPLv3 the Corresponding Source for this Object Code is made
 available on
 [https://kallithea-scm.org/repos/mirror](https://kallithea-scm.org/repos/mirror).
 
 
 
 YUI Flot
 --------
 
 Kallithea incorporates some CSS from a system called
 [Flot](http://code.google.com/p/flot/), which is:
 
 Copyright 2006 Google Inc.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 
 A [copy of the Apache License 2.0](Apache-License-2.0.txt) is also included
 in this distribution.
 
 
 
 Flot
 ----
 
 Kallithea uses some parts of a Javascript system called
 [Flot](http://www.flotcharts.org/), which is:
 
 Copyright (c) 2007-2014 IOLA and Ole Laursen
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation
 files (the "Software"), to deal in the Software without
 restriction, including without limitation the rights to use,
 copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the
 Software is furnished to do so, subject to the following
 conditions:
 
 The above copyright notice and this permission notice shall be
 included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 OTHER DEALINGS IN THE SOFTWARE.
 
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 
 
 
 Icon fonts
 ----------
 
 Kallithea incorporates subsets of both
 [Font Awesome](http://fontawesome.io) and
 [GitHub Octicons](https://octicons.github.com) for icons. Font Awesome is:
 
 Copyright (c) 2016, Dave Gandy
 
 Octicons is:
 
 Copyright (c) 2012-2014 GitHub
 
 These two sets are distributed under [SIL OFL 1.1](http://scripts.sil.org/OFL)
 and have been combined into one font called "kallithea."
 
 
 EOF

kallithea/bin/kallithea_cli_front_end.py

@@ -1,108 +1,110 b''
 # -*- coding: utf-8 -*-
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # (at your option) any later version.
 #
 # 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 General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import click
 import kallithea.bin.kallithea_cli_base as cli_base
 
 import os
 import shutil
 import subprocess
 import json
 
 import kallithea
 
 @cli_base.register_command()
 @click.option('--install-deps/--no-install-deps', default=True,
         help='Skip installation of dependencies, via "npm".')
 @click.option('--generate/--no-generate', default=True,
         help='Skip generation of front-end files.')
 def front_end_build(install_deps, generate):
     """Build the front-end.
 
     Install required dependencies for the front-end and generate the necessary
     files.  This step is complementary to any 'pip install' step which only
     covers Python dependencies.
 
     The installation of front-end dependencies happens via the tool 'npm' which
     is expected to be installed already.
     """
     front_end_dir = os.path.abspath(os.path.join(kallithea.__file__, '..', 'front-end'))
     public_dir = os.path.abspath(os.path.join(kallithea.__file__, '..', 'public'))
 
     if install_deps:
         click.echo("Running 'npm install' to install front-end dependencies from package.json")
         subprocess.check_call(['npm', 'install'], cwd=front_end_dir)
 
     if generate:
         tmp_dir = os.path.join(front_end_dir, 'tmp')
         if not os.path.isdir(tmp_dir):
             os.mkdir(tmp_dir)
 
         click.echo("Building CSS styling based on Bootstrap")
         with open(os.path.join(tmp_dir, 'pygments.css'), 'w') as f:
             subprocess.check_call(['pygmentize',
                     '-S', 'default',
                     '-f', 'html',
                     '-a', '.code-highlight'],
                     stdout=f)
         lesscpath = os.path.join(front_end_dir, 'node_modules', '.bin', 'lessc')
         lesspath = os.path.join(public_dir, 'less', 'main.less')
         csspath = os.path.join(public_dir, 'css', 'style.css')
         subprocess.check_call([lesscpath, '--relative-urls', '--source-map',
                 '--source-map-less-inline', lesspath, csspath],
                 cwd=front_end_dir)
 
         click.echo("Preparing Bootstrap JS")
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'bootstrap', 'dist', 'js', 'bootstrap.js'), os.path.join(public_dir, 'js', 'bootstrap.js'))
 
-        click.echo("Preparing jQuery JS with Flot")
+        click.echo("Preparing jQuery JS with Flot, Caret and Atwho")
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery', 'dist', 'jquery.min.js'), os.path.join(public_dir, 'js', 'jquery.min.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery.flot', 'jquery.flot.js'), os.path.join(public_dir, 'js', 'jquery.flot.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery.flot', 'jquery.flot.selection.js'), os.path.join(public_dir, 'js', 'jquery.flot.selection.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery.flot', 'jquery.flot.time.js'), os.path.join(public_dir, 'js', 'jquery.flot.time.js'))
+        shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery.caret', 'dist', 'jquery.caret.min.js'), os.path.join(public_dir, 'js', 'jquery.caret.min.js'))
+        shutil.copy(os.path.join(front_end_dir, 'node_modules', 'at.js', 'dist', 'js', 'jquery.atwho.min.js'), os.path.join(public_dir, 'js', 'jquery.atwho.min.js'))
 
         click.echo("Preparing DataTables JS")
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'datatables.net', 'js', 'jquery.dataTables.js'), os.path.join(public_dir, 'js', 'jquery.dataTables.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'datatables.net-bs', 'js', 'dataTables.bootstrap.js'), os.path.join(public_dir, 'js', 'dataTables.bootstrap.js'))
 
         click.echo("Preparing Select2 JS")
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'select2', 'select2.js'), os.path.join(public_dir, 'js', 'select2.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'select2', 'select2.png'), os.path.join(public_dir, 'css', 'select2.png'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'select2', 'select2x2.png'), os.path.join(public_dir, 'css', 'select2x2.png'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'select2', 'select2-spinner.gif'), os.path.join(public_dir, 'css', 'select2-spinner.gif'))
 
         click.echo("Preparing CodeMirror JS")
         if os.path.isdir(os.path.join(public_dir, 'codemirror')):
             shutil.rmtree(os.path.join(public_dir, 'codemirror'))
         shutil.copytree(os.path.join(front_end_dir, 'node_modules', 'codemirror'), os.path.join(public_dir, 'codemirror'))
 
         click.echo("Generating LICENSES.txt")
         check_licensing_json_path = os.path.join(tmp_dir, 'licensing.json')
         licensing_txt_path = os.path.join(public_dir, 'LICENSES.txt')
         subprocess.check_call([
             os.path.join(front_end_dir, 'node_modules', '.bin', 'license-checker'),
             '--json',
             '--out', check_licensing_json_path,
             ], cwd=front_end_dir)
         with open(check_licensing_json_path) as jsonfile:
             rows = json.loads(jsonfile.read())
             with open(licensing_txt_path, 'w') as out:
                 out.write("The Kallithea front-end was built using the following Node modules:\n\n")
                 for name_version, values in sorted(rows.items()):
                     name, version = name_version.rsplit('@', 1)
                     line = "%s from https://www.npmjs.com/package/%s/v/%s\n  License: %s\n  Repository: %s\n" % (
                         name_version, name, version, values['licenses'], values.get('repository', '-'))
                     if values.get('copyright'):
                         line += "  Copyright: %s\n" % (values['copyright'])
                     out.write(line + '\n')

kallithea/front-end/package.json

@@ -1,19 +1,21 b''
 {
   "name": "kallithea",
   "private": true,
   "dependencies": {
+    "at.js": "1.5.4",
     "bootstrap": "3.3.7",
     "codemirror": "4.7",
     "datatables.net": "1.10.13",
     "datatables.net-bs": "1.10.13",
     "jquery": "1.12.3",
+    "jquery.caret": "0.3.1",
     "jquery.flot": "0.8.3",
     "select2": "3.5.1",
     "select2-bootstrap-css": "1.2.4"
   },
   "devDependencies": {
     "less": "~2.7",
     "less-plugin-clean-css": "~1.5",
     "license-checker": "24.1.0"
   }
 }

kallithea/public/js/base.js

@@ -1,1516 +1,1481 b''
 /**
 Kallithea JS Files
 **/
 'use strict';
 
 if (typeof console == "undefined" || typeof console.log == "undefined"){
     console = { log: function() {} }
 }
 
 /**
  * INJECT .format function into String
  * Usage: "My name is {0} {1}".format("Johny","Bravo")
  * Return "My name is Johny Bravo"
  * Inspired by https://gist.github.com/1049426
  */
 String.prototype.format = function() {
     function format() {
         var str = this;
         var len = arguments.length+1;
         var safe = undefined;
         var arg = undefined;
 
         // For each {0} {1} {n...} replace with the argument in that position.  If
         // the argument is an object or an array it will be stringified to JSON.
         for (var i=0; i < len; arg = arguments[i++]) {
             safe = typeof arg === 'object' ? JSON.stringify(arg) : arg;
             str = str.replace(RegExp('\\{'+(i-1)+'\\}', 'g'), safe);
         }
         return str;
     }
 
     // Save a reference of what may already exist under the property native.
     // Allows for doing something like: if("".format.native) { /* use native */ }
     format.native = String.prototype.format;
 
     // Replace the prototype property
     return format;
 
 }();
 
 String.prototype.strip = function(char) {
     if(char === undefined){
         char = '\\s';
     }
     return this.replace(new RegExp('^'+char+'+|'+char+'+$','g'), '');
 }
 
 String.prototype.lstrip = function(char) {
     if(char === undefined){
         char = '\\s';
     }
     return this.replace(new RegExp('^'+char+'+'),'');
 }
 
 String.prototype.rstrip = function(char) {
     if(char === undefined){
         char = '\\s';
     }
     return this.replace(new RegExp(''+char+'+$'),'');
 }
 
 /* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill
    under MIT license / public domain, see
    https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses */
 if(!Array.prototype.indexOf) {
     Array.prototype.indexOf = function (searchElement, fromIndex) {
         if ( this === undefined || this === null ) {
             throw new TypeError( '"this" is null or not defined' );
         }
 
         var length = this.length >>> 0; // Hack to convert object.length to a UInt32
 
         fromIndex = +fromIndex || 0;
 
         if (Math.abs(fromIndex) === Infinity) {
             fromIndex = 0;
         }
 
         if (fromIndex < 0) {
             fromIndex += length;
             if (fromIndex < 0) {
                 fromIndex = 0;
             }
         }
 
         for (;fromIndex < length; fromIndex++) {
             if (this[fromIndex] === searchElement) {
                 return fromIndex;
             }
         }
 
         return -1;
     };
 }
 
 /* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Compatibility
    under MIT license / public domain, see
    https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses */
 if (!Array.prototype.filter)
 {
     Array.prototype.filter = function(fun /*, thisArg */)
     {
         if (this === void 0 || this === null)
             throw new TypeError();
 
         var t = Object(this);
         var len = t.length >>> 0;
         if (typeof fun !== "function")
             throw new TypeError();
 
         var res = [];
         var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
         for (var i = 0; i < len; i++)
         {
             if (i in t)
             {
                 var val = t[i];
 
                 // NOTE: Technically this should Object.defineProperty at
                 //       the next index, as push can be affected by
                 //       properties on Object.prototype and Array.prototype.
                 //       But that method's new, and collisions should be
                 //       rare, so use the more-compatible alternative.
                 if (fun.call(thisArg, val, i, t))
                     res.push(val);
             }
         }
 
         return res;
     };
 }
 
 /**
  * A customized version of PyRoutes.JS from https://pypi.python.org/pypi/pyroutes.js/
  * which is copyright Stephane Klein and was made available under the BSD License.
  *
  * Usage pyroutes.url('mark_error_fixed',{"error_id":error_id}) // /mark_error_fixed/<error_id>
  */
 var pyroutes = (function() {
     var matchlist = {};
     var sprintf = (function() {
         function get_type(variable) {
             return Object.prototype.toString.call(variable).slice(8, -1).toLowerCase();
         }
         function str_repeat(input, multiplier) {
             for (var output = []; multiplier > 0; output[--multiplier] = input) {/* do nothing */}
             return output.join('');
         }
 
         var str_format = function() {
             if (!str_format.cache.hasOwnProperty(arguments[0])) {
                 str_format.cache[arguments[0]] = str_format.parse(arguments[0]);
             }
             return str_format.format.call(null, str_format.cache[arguments[0]], arguments);
         };
 
         str_format.format = function(parse_tree, argv) {
             var cursor = 1, tree_length = parse_tree.length, node_type = '', arg, output = [], i, k, match, pad, pad_character, pad_length;
             for (i = 0; i < tree_length; i++) {
                 node_type = get_type(parse_tree[i]);
                 if (node_type === 'string') {
                     output.push(parse_tree[i]);
                 }
                 else if (node_type === 'array') {
                     match = parse_tree[i]; // convenience purposes only
                     if (match[2]) { // keyword argument
                         arg = argv[cursor];
                         for (k = 0; k < match[2].length; k++) {
                             if (!arg.hasOwnProperty(match[2][k])) {
                                 throw(sprintf('[sprintf] property "%s" does not exist', match[2][k]));
                             }
                             arg = arg[match[2][k]];
                         }
                     }
                     else if (match[1]) { // positional argument (explicit)
                         arg = argv[match[1]];
                     }
                     else { // positional argument (implicit)
                         arg = argv[cursor++];
                     }
 
                     if (/[^s]/.test(match[8]) && (get_type(arg) != 'number')) {
                         throw(sprintf('[sprintf] expecting number but found %s', get_type(arg)));
                     }
                     switch (match[8]) {
                         case 'b': arg = arg.toString(2); break;
                         case 'c': arg = String.fromCharCode(arg); break;
                         case 'd': arg = parseInt(arg, 10); break;
                         case 'e': arg = match[7] ? arg.toExponential(match[7]) : arg.toExponential(); break;
                         case 'f': arg = match[7] ? parseFloat(arg).toFixed(match[7]) : parseFloat(arg); break;
                         case 'o': arg = arg.toString(8); break;
                         case 's': arg = ((arg = String(arg)) && match[7] ? arg.substring(0, match[7]) : arg); break;
                         case 'u': arg = Math.abs(arg); break;
                         case 'x': arg = arg.toString(16); break;
                         case 'X': arg = arg.toString(16).toUpperCase(); break;
                     }
                     arg = (/[def]/.test(match[8]) && match[3] && arg >= 0 ? '+'+ arg : arg);
                     pad_character = match[4] ? match[4] == '0' ? '0' : match[4].charAt(1) : ' ';
                     pad_length = match[6] - String(arg).length;
                     pad = match[6] ? str_repeat(pad_character, pad_length) : '';
                     output.push(match[5] ? arg + pad : pad + arg);
                 }
             }
             return output.join('');
         };
 
         str_format.cache = {};
 
         str_format.parse = function(fmt) {
             var _fmt = fmt, match = [], parse_tree = [], arg_names = 0;
             while (_fmt) {
                 if ((match = /^[^\x25]+/.exec(_fmt)) !== null) {
                     parse_tree.push(match[0]);
                 }
                 else if ((match = /^\x25{2}/.exec(_fmt)) !== null) {
                     parse_tree.push('%');
                 }
                 else if ((match = /^\x25(?:([1-9]\d*)\$|\(([^\)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-fosuxX])/.exec(_fmt)) !== null) {
                     if (match[2]) {
                         arg_names |= 1;
                         var field_list = [], replacement_field = match[2], field_match = [];
                         if ((field_match = /^([a-z_][a-z_\d]*)/i.exec(replacement_field)) !== null) {
                             field_list.push(field_match[1]);
                             while ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {
                                 if ((field_match = /^\.([a-z_][a-z_\d]*)/i.exec(replacement_field)) !== null) {
                                     field_list.push(field_match[1]);
                                 }
                                 else if ((field_match = /^\[(\d+)\]/.exec(replacement_field)) !== null) {
                                     field_list.push(field_match[1]);
                                 }
                                 else {
                                     throw('[sprintf] huh?');
                                 }
                             }
                         }
                         else {
                             throw('[sprintf] huh?');
                         }
                         match[2] = field_list;
                     }
                     else {
                         arg_names |= 2;
                     }
                     if (arg_names === 3) {
                         throw('[sprintf] mixing positional and named placeholders is not (yet) supported');
                     }
                     parse_tree.push(match);
                 }
                 else {
                     throw('[sprintf] huh?');
                 }
                 _fmt = _fmt.substring(match[0].length);
             }
             return parse_tree;
         };
 
         return str_format;
     })();
 
     var vsprintf = function(fmt, argv) {
         argv.unshift(fmt);
         return sprintf.apply(null, argv);
     };
     return {
         'url': function(route_name, params) {
             var result = route_name;
             if (typeof(params) != 'object'){
                 params = {};
             }
             if (matchlist.hasOwnProperty(route_name)) {
                 var route = matchlist[route_name];
                 // param substitution
                 for(var i=0; i < route[1].length; i++) {
                    if (!params.hasOwnProperty(route[1][i]))
                         throw new Error(route[1][i] + ' missing in "' + route_name + '" route generation');
                 }
                 result = sprintf(route[0], params);
 
                 var ret = [];
                 //extra params => GET
                 for(var param in params){
                     if (route[1].indexOf(param) == -1){
                         ret.push(encodeURIComponent(param) + "=" + encodeURIComponent(params[param]));
                     }
                 }
                 var _parts = ret.join("&");
                 if(_parts){
                     result = result +'?'+ _parts
                 }
             }
 
             return result;
         },
         'register': function(route_name, route_tmpl, req_params) {
             if (typeof(req_params) != 'object') {
                 req_params = [];
             }
             var keys = [];
             for (var i=0; i < req_params.length; i++) {
                 keys.push(req_params[i]);
             }
             matchlist[route_name] = [
                 unescape(route_tmpl),
                 keys
             ]
         },
         '_routes': function(){
             return matchlist;
         }
     }
 })();
 
 
 /* Invoke all functions in callbacks */
 var _run_callbacks = function(callbacks){
     if (callbacks !== undefined){
         var _l = callbacks.length;
         for (var i=0;i<_l;i++){
             var func = callbacks[i];
             if(typeof(func)=='function'){
                 try{
                     func();
                 }catch (err){};
             }
         }
     }
 }
 
 /**
  * turns objects into GET query string
  */
 var _toQueryString = function(o) {
     if(typeof o !== 'object') {
         return false;
     }
     var _p, _qs = [];
     for(_p in o) {
         _qs.push(encodeURIComponent(_p) + '=' + encodeURIComponent(o[_p]));
     }
     return _qs.join('&');
 };
 
 /**
  * Load HTML into DOM using Ajax
  *
  * @param $target: load html async and place it (or an error message) here
  * @param success: success callback function
  * @param args: query parameters to pass to url
  */
 function asynchtml(url, $target, success, args){
     if(args===undefined){
         args=null;
     }
     $target.html(_TM['Loading ...']).css('opacity','0.3');
 
     return $.ajax({url: url, data: args, headers: {'X-PARTIAL-XHR': '1'}, cache: false, dataType: 'html'})
         .done(function(html) {
                 $target.html(html);
                 $target.css('opacity','1.0');
                 //execute the given original callback
                 if (success !== undefined && success) {
                     success();
                 }
             })
         .fail(function(jqXHR, textStatus, errorThrown) {
                 if (textStatus == "abort")
                     return;
                 $target.html('<span class="bg-danger">ERROR: {0}</span>'.format(textStatus));
                 $target.css('opacity','1.0');
             })
         ;
 };
 
 var ajaxGET = function(url, success, failure) {
     if(failure === undefined) {
         failure = function(jqXHR, textStatus, errorThrown) {
                 if (textStatus != "abort")
                     alert("Ajax GET error: " + textStatus);
             };
     }
     return $.ajax({url: url, headers: {'X-PARTIAL-XHR': '1'}, cache: false})
         .done(success)
         .fail(failure);
 };
 
 var ajaxPOST = function(url, postData, success, failure) {
     postData['_authentication_token'] = _authentication_token;
     var postData = _toQueryString(postData);
     if(failure === undefined) {
         failure = function(jqXHR, textStatus, errorThrown) {
                 if (textStatus != "abort")
                     alert("Error posting to server: " + textStatus);
             };
     }
     return $.ajax({url: url, data: postData, type: 'POST', headers: {'X-PARTIAL-XHR': '1'}, cache: false})
         .done(success)
         .fail(failure);
 };
 
 
 /**
  * activate .show_more links
  * the .show_more must have an id that is the the id of an element to hide prefixed with _
  * the parentnode will be displayed
  */
 var show_more_event = function(){
     $('.show_more').click(function(e){
         var el = e.currentTarget;
         $('#' + el.id.substring(1)).hide();
         $(el.parentNode).show();
     });
 };
 
 
 var _onSuccessFollow = function(target){
     var $target = $(target);
     var $f_cnt = $('#current_followers_count');
     if ($target.hasClass('follow')) {
         $target.removeClass('follow').addClass('following');
         $target.prop('title', _TM['Stop following this repository']);
         if ($f_cnt.html()) {
             var cnt = Number($f_cnt.html())+1;
             $f_cnt.html(cnt);
         }
     } else {
         $target.removeClass('following').addClass('follow');
         $target.prop('title', _TM['Start following this repository']);
         if ($f_cnt.html()) {
             var cnt = Number($f_cnt.html())-1;
             $f_cnt.html(cnt);
         }
     }
 }
 
 var toggleFollowingRepo = function(target, follows_repository_id){
     var args = 'follows_repository_id=' + follows_repository_id;
     args += '&amp;_authentication_token=' + _authentication_token;
     $.post(TOGGLE_FOLLOW_URL, args, function(data){
             _onSuccessFollow(target);
         });
     return false;
 };
 
 var showRepoSize = function(target, repo_name){
     var args = '_authentication_token=' + _authentication_token;
 
     if(!$("#" + target).hasClass('loaded')){
         $("#" + target).html(_TM['Loading ...']);
         var url = pyroutes.url('repo_size', {"repo_name":repo_name});
         $.post(url, args, function(data) {
             $("#" + target).html(data);
             $("#" + target).addClass('loaded');
         });
     }
     return false;
 };
 
 /**
  * load tooltips dynamically based on data attributes, used for .lazy-cs changeset links
  */
 var get_changeset_tooltip = function() {
     var $target = $(this);
     var tooltip = $target.data('tooltip');
     if (!tooltip) {
         var raw_id = $target.data('raw_id');
         var repo_name = $target.data('repo_name');
         var url = pyroutes.url('changeset_info', {"repo_name": repo_name, "revision": raw_id});
 
         $.ajax(url, {
             async: false,
             success: function(data) {
                 tooltip = data["message"];
             }
         });
         $target.data('tooltip', tooltip);
     }
     return tooltip;
 };
 
 /**
  * activate tooltips and popups
  */
 var tooltip_activate = function(){
     function placement(p, e){
         if(e.getBoundingClientRect().top > 2*$(window).height()/3){
             return 'top';
         }else{
             return 'bottom';
         }
     }
     $(document).ready(function(){
         $('[data-toggle="tooltip"]').tooltip({
             container: 'body',
             placement: placement
         });
         $('[data-toggle="popover"]').popover({
             html: true,
             container: 'body',
             placement: placement,
             trigger: 'hover',
             template: '<div class="popover cs-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
         });
         $('.lazy-cs').tooltip({
             title: get_changeset_tooltip,
             placement: placement
         });
     });
 };
 
 
 /**
  * Quick filter widget
  *
  * @param target: filter input target
  * @param nodes: list of nodes in html we want to filter.
  * @param display_element function that takes current node from nodes and
  *    does hide or show based on the node
  */
 var q_filter = (function() {
     var _namespace = {};
     var namespace = function (target) {
         if (!(target in _namespace)) {
             _namespace[target] = {};
         }
         return _namespace[target];
     };
     return function (target, $nodes, display_element) {
         var $nodes = $nodes;
         var $q_filter_field = $('#' + target);
         var F = namespace(target);
 
         $q_filter_field.keyup(function (e) {
             clearTimeout(F.filterTimeout);
             F.filterTimeout = setTimeout(F.updateFilter, 600);
         });
 
         F.filterTimeout = null;
 
         F.updateFilter = function () {
             // Reset timeout
             F.filterTimeout = null;
 
             var obsolete = [];
 
             var req = $q_filter_field.val().toLowerCase();
 
             var showing = 0;
             $nodes.each(function () {
                 var n = this;
                 var target_element = display_element(n);
                 if (req && n.innerHTML.toLowerCase().indexOf(req) == -1) {
                     $(target_element).hide();
                 }
                 else {
                     $(target_element).show();
                     showing += 1;
                 }
             });
 
             $('#repo_count').html(showing);
             /* FIXME: don't hardcode */
         }
     }
 })();
 
 
 /**
  * Comment handling
  */
 
 // move comments to their right location, inside new trs
 function move_comments($anchorcomments) {
     $anchorcomments.each(function(i, anchorcomment) {
         var $anchorcomment = $(anchorcomment);
         var target_id = $anchorcomment.data('target-id');
         var $comment_div = _get_add_comment_div(target_id);
         var f_path = $anchorcomment.data('f_path');
         var line_no = $anchorcomment.data('line_no');
         if ($comment_div[0]) {
             $comment_div.append($anchorcomment.children());
             if (f_path && line_no) {
                 _comment_div_append_add($comment_div, f_path, line_no);
             } else {
                 _comment_div_append_form($comment_div, f_path, line_no);
             }
         } else {
             $anchorcomment.before("<span class='bg-warning'>Comment to {0} line {1} which is outside the diff context:</span>".format(f_path || '?', line_no || '?'));
         }
     });
     linkInlineComments($('.firstlink'), $('.comment:first-child'));
 }
 
 // comment bubble was clicked - insert new tr and show form
 function show_comment_form($bubble) {
     var children = $bubble.closest('tr.line').children('[id]');
     var line_td_id = children[children.length - 1].id;
     var $comment_div = _get_add_comment_div(line_td_id);
     var f_path = $bubble.closest('[data-f_path]').data('f_path');
     var parts = line_td_id.split('_');
     var line_no = parts[parts.length-1];
     comment_div_state($comment_div, f_path, line_no, true);
 }
 
 // return comment div for target_id - add it if it doesn't exist yet
 function _get_add_comment_div(target_id) {
     var comments_box_id = 'comments-' + target_id;
     var $comments_box = $('#' + comments_box_id);
     if (!$comments_box.length) {
         var html = '<tr><td id="{0}" colspan="3" class="inline-comments"></td></tr>'.format(comments_box_id);
         $('#' + target_id).closest('tr').after(html);
         $comments_box = $('#' + comments_box_id);
     }
     return $comments_box;
 }
 
 // Set $comment_div state - showing or not showing form and Add button.
 // An Add button is shown on non-empty forms when no form is shown.
 // The form is controlled by show_form_opt - if undefined, form is only shown for general comments.
 function comment_div_state($comment_div, f_path, line_no, show_form_opt) {
     var show_form = show_form_opt !== undefined ? show_form_opt : !f_path && !line_no;
     var $forms = $comment_div.children('.comment-inline-form');
     var $buttonrow = $comment_div.children('.add-button-row');
     var $comments = $comment_div.children('.comment:not(.submitting)');
     $forms.remove();
     $buttonrow.remove();
     if (show_form) {
         _comment_div_append_form($comment_div, f_path, line_no);
     } else if ($comments.length) {
         _comment_div_append_add($comment_div, f_path, line_no);
     } else {
         $comment_div.parent('tr').remove();
     }
 }
 
 // append an Add button to $comment_div and hook it up to show form
 function _comment_div_append_add($comment_div, f_path, line_no) {
     var addlabel = TRANSLATION_MAP['Add Another Comment'];
     var $add = $('<div class="add-button-row"><span class="btn btn-default btn-xs add-button">{0}</span></div>'.format(addlabel));
     $comment_div.append($add);
     $add.children('.add-button').click(function(e) {
         comment_div_state($comment_div, f_path, line_no, true);
     });
 }
 
 // append a comment form to $comment_div
 function _comment_div_append_form($comment_div, f_path, line_no) {
     var $form_div = $('#comment-inline-form-template').children()
         .clone()
         .addClass('comment-inline-form');
     $comment_div.append($form_div);
     var $preview = $comment_div.find("div.comment-preview");
     var $form = $comment_div.find("form");
     var $textarea = $form.find('textarea');
 
     $form.submit(function(e) {
         e.preventDefault();
 
         var text = $textarea.val();
         var review_status = $form.find('input:radio[name=changeset_status]:checked').val();
         var pr_close = $form.find('input:checkbox[name=save_close]:checked').length ? 'on' : '';
         var pr_delete = $form.find('input:checkbox[name=save_delete]:checked').length ? 'delete' : '';
 
         if (!text && !review_status && !pr_close && !pr_delete) {
             alert("Please provide a comment");
             return false;
         }
 
         if (pr_delete) {
             if (text || review_status || pr_close) {
                 alert('Cannot delete pull request while making other changes');
                 return false;
             }
             if (!confirm('Confirm to delete this pull request')) {
                 return false;
             }
             var comments = $('.comment').size();
             if (comments > 0 &&
                 !confirm('Confirm again to delete this pull request with {0} comments'.format(comments))) {
                 return false;
             }
         }
 
         if (review_status) {
             var $review_status = $preview.find('.automatic-comment');
             var review_status_lbl = $("#comment-inline-form-template input.status_change_radio[value='" + review_status + "']").parent().text().strip();
             $review_status.find('.comment-status-label').text(review_status_lbl);
             $review_status.show();
         }
         $preview.find('.comment-text div').text(text);
         $preview.show();
         $textarea.val('');
         if (f_path && line_no) {
             $form.hide();
         }
 
         var postData = {
             'text': text,
             'f_path': f_path,
             'line': line_no,
             'changeset_status': review_status,
             'save_close': pr_close,
             'save_delete': pr_delete
         };
         var success = function(json_data) {
             if (pr_delete) {
                 location = json_data['location'];
             } else {
                 $comment_div.append(json_data['rendered_text']);
                 comment_div_state($comment_div, f_path, line_no);
                 linkInlineComments($('.firstlink'), $('.comment:first-child'));
                 if ((review_status || pr_close) && !f_path && !line_no) {
                     // Page changed a lot - reload it after closing the submitted form
                     comment_div_state($comment_div, f_path, line_no, false);
                     location.reload(true);
                 }
             }
         };
         var failure = function(x, s, e) {
             $preview.removeClass('submitting').addClass('failed');
             var $status = $preview.find('.comment-submission-status');
             $('<span>', {
                 'title': e,
                 text: _TM['Unable to post']
             }).replaceAll($status.contents());
             $('<div>', {
                 'class': 'btn-group'
             }).append(
                 $('<button>', {
                     'class': 'btn btn-default btn-xs',
                     text: _TM['Retry']
                 }).click(function() {
                     $status.text(_TM['Submitting ...']);
                     $preview.addClass('submitting').removeClass('failed');
                     ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);
                 }),
                 $('<button>', {
                     'class': 'btn btn-default btn-xs',
                     text: _TM['Cancel']
                 }).click(function() {
                     comment_div_state($comment_div, f_path, line_no);
                 })
             ).appendTo($status);
         };
         ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);
     });
 
     // add event handler for hide/cancel buttons
     $form.find('.hide-inline-form').click(function(e) {
         comment_div_state($comment_div, f_path, line_no);
     });
 
     tooltip_activate();
     if ($textarea.length > 0) {
-        MentionsAutoComplete($textarea, _USERS_AC_DATA);
+        MentionsAutoComplete($textarea);
     }
     if (f_path) {
         $textarea.focus();
     }
 }
 
 
 function deleteComment(comment_id) {
     var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__', comment_id);
     var postData = {};
     var success = function(o) {
         $('#comment-'+comment_id).remove();
         // Ignore that this might leave a stray Add button (or have a pending form with another comment) ...
     }
     ajaxPOST(url, postData, success);
 }
 
 
 /**
  * Double link comments
  */
 var linkInlineComments = function($firstlinks, $comments){
     if ($comments.length > 0) {
         $firstlinks.html('<a href="#{0}">First comment</a>'.format($comments.prop('id')));
     }
     if ($comments.length <= 1) {
         return;
     }
 
     $comments.each(function(i, e){
             var prev = '';
             if (i > 0){
                 var prev_anchor = $($comments.get(i-1)).prop('id');
                 prev = '<a href="#{0}">Previous comment</a>'.format(prev_anchor);
             }
             var next = '';
             if (i+1 < $comments.length){
                 var next_anchor = $($comments.get(i+1)).prop('id');
                 next = '<a href="#{0}">Next comment</a>'.format(next_anchor);
             }
             $(this).find('.comment-prev-next-links').html(
                 '<div class="prev-comment">{0}</div>'.format(prev) +
                 '<div class="next-comment">{0}</div>'.format(next));
         });
 }
 
 /* activate files.html stuff */
 var fileBrowserListeners = function(node_list_url, url_base){
     var $node_filter = $('#node_filter');
 
     var filterTimeout = null;
     var nodes = null;
 
     var initFilter = function(){
         $('#node_filter_box_loading').show();
         $('#search_activate_id').hide();
         $('#add_node_id').hide();
         $.ajax({url: node_list_url, headers: {'X-PARTIAL-XHR': '1'}, cache: false})
             .done(function(json) {
                     nodes = json.nodes;
                     $('#node_filter_box_loading').hide();
                     $('#node_filter_box').show();
                     $node_filter.focus();
                     if($node_filter.hasClass('init')){
                         $node_filter.val('');
                         $node_filter.removeClass('init');
                     }
                 })
             .fail(function() {
                     console.log('fileBrowserListeners initFilter failed to load');
                 })
         ;
     }
 
     var updateFilter = function(e) {
         return function(){
             // Reset timeout
             filterTimeout = null;
             var query = e.currentTarget.value.toLowerCase();
             var match = [];
             var matches = 0;
             var matches_max = 20;
             if (query != ""){
                 for(var i=0;i<nodes.length;i++){
                     var pos = nodes[i].name.toLowerCase().indexOf(query);
                     if(query && pos != -1){
                         matches++
                         //show only certain amount to not kill browser
                         if (matches > matches_max){
                             break;
                         }
 
                         var n = nodes[i].name;
                         var t = nodes[i].type;
                         var n_hl = n.substring(0,pos)
                             + "<b>{0}</b>".format(n.substring(pos,pos+query.length))
                             + n.substring(pos+query.length);
                         var new_url = url_base.replace('__FPATH__',n);
                         match.push('<tr><td><a class="browser-{0}" href="{1}">{2}</a></td><td colspan="5"></td></tr>'.format(t,new_url,n_hl));
                     }
                     if(match.length >= matches_max){
                         match.push('<tr><td>{0}</td><td colspan="5"></td></tr>'.format(_TM['Search truncated']));
                         break;
                     }
                 }
             }
             if(query != ""){
                 $('#tbody').hide();
                 $('#tbody_filtered').show();
 
                 if (match.length==0){
                   match.push('<tr><td>{0}</td><td colspan="5"></td></tr>'.format(_TM['No matching files']));
                 }
 
                 $('#tbody_filtered').html(match.join(""));
             }
             else{
                 $('#tbody').show();
                 $('#tbody_filtered').hide();
             }
         }
     };
 
     $('#filter_activate').click(function(){
             initFilter();
         });
     $node_filter.click(function(){
             if($node_filter.hasClass('init')){
                 $node_filter.val('');
                 $node_filter.removeClass('init');
             }
         });
     $node_filter.keyup(function(e){
             clearTimeout(filterTimeout);
             filterTimeout = setTimeout(updateFilter(e),600);
         });
 };
 
 
 var initCodeMirror = function(textarea_id, baseUrl, resetUrl){
     var myCodeMirror = CodeMirror.fromTextArea($('#' + textarea_id)[0], {
             mode: "null",
             lineNumbers: true,
             indentUnit: 4,
             autofocus: true
         });
     CodeMirror.modeURL = baseUrl + "/codemirror/mode/%N/%N.js";
 
     $('#reset').click(function(e){
             window.location=resetUrl;
         });
 
     $('#file_enable').click(function(){
             $('#upload_file_container').hide();
             $('#filename_container').show();
             $('#body').show();
         });
 
     $('#upload_file_enable').click(function(){
             $('#upload_file_container').show();
             $('#filename_container').hide();
             $('#body').hide();
         });
 
     return myCodeMirror
 };
 
 var setCodeMirrorMode = function(codeMirrorInstance, mode) {
     CodeMirror.autoLoadMode(codeMirrorInstance, mode);
 }
 
 
 var _getIdentNode = function(n){
     //iterate thrugh nodes until matching interesting node
 
     if (typeof n == 'undefined'){
         return -1
     }
 
     if(typeof n.id != "undefined" && n.id.match('L[0-9]+')){
         return n
     }
     else{
         return _getIdentNode(n.parentNode);
     }
 };
 
 /* generate links for multi line selects that can be shown by files.html page_highlights.
  * This is a mouseup handler for hlcode from CodeHtmlFormatter and pygmentize */
 var getSelectionLink = function(e) {
     //get selection from start/to nodes
     if (typeof window.getSelection != "undefined") {
         var s = window.getSelection();
 
         var from = _getIdentNode(s.anchorNode);
         var till = _getIdentNode(s.focusNode);
 
         var f_int = parseInt(from.id.replace('L',''));
         var t_int = parseInt(till.id.replace('L',''));
 
         var yoffset = 35;
         var ranges = [parseInt(from.id.replace('L','')), parseInt(till.id.replace('L',''))];
         if (ranges[0] > ranges[1]){
             //highlight from bottom
             yoffset = -yoffset;
             ranges = [ranges[1], ranges[0]];
         }
         var $hl_div = $('div#linktt');
         // if we select more than 2 lines
         if (ranges[0] != ranges[1]){
             if ($hl_div.length) {
                 $hl_div.html('');
             } else {
                 $hl_div = $('<div id="linktt" class="hl-tip-box">');
                 $('body').prepend($hl_div);
             }
 
             $hl_div.append($('<a>').html(_TM['Selection Link']).prop('href', location.href.substring(0, location.href.indexOf('#')) + '#L' + ranges[0] + '-'+ranges[1]));
             var xy = $(till).offset();
             $hl_div.css('top', (xy.top + yoffset) + 'px').css('left', xy.left + 'px');
             $hl_div.show();
         }
         else{
             $hl_div.hide();
         }
     }
 };
 
 /**
  * Autocomplete functionality
  */
 
 // Custom search function for the DataSource of users
 var autocompleteMatchUsers = function (sQuery, myUsers) {
     // Case insensitive matching
     var query = sQuery.toLowerCase();
     var i = 0;
     var l = myUsers.length;
     var matches = [];
 
     // Match against each name of each contact
     for (; i < l; i++) {
         var contact = myUsers[i];
         if (((contact.fname+"").toLowerCase().indexOf(query) > -1) ||
              ((contact.lname+"").toLowerCase().indexOf(query) > -1) ||
              ((contact.nname) && ((contact.nname).toLowerCase().indexOf(query) > -1))) {
             matches[matches.length] = contact;
         }
     }
     return matches;
 };
 
 // Custom search function for the DataSource of userGroups
 var autocompleteMatchGroups = function (sQuery, myGroups) {
     // Case insensitive matching
     var query = sQuery.toLowerCase();
     var i = 0;
     var l = myGroups.length;
     var matches = [];
 
     // Match against each name of each group
     for (; i < l; i++) {
         var matched_group = myGroups[i];
         if (matched_group.grname.toLowerCase().indexOf(query) > -1) {
             matches[matches.length] = matched_group;
         }
     }
     return matches;
 };
 
 // Highlight the snippet if it is found in the full text.
 // Snippet must be lowercased already.
 var autocompleteHighlightMatch = function (full, snippet) {
     var matchindex = full.toLowerCase().indexOf(snippet);
     if (matchindex <0)
         return full;
     return full.substring(0, matchindex)
         + '<span class="select2-match">'
         + full.substr(matchindex, snippet.length)
         + '</span>' + full.substring(matchindex + snippet.length);
 };
 
 // Return html snippet for showing the provided gravatar url
 var gravatar = function(gravatar_lnk, size, cssclass) {
     if (!gravatar_lnk) {
         return '';
     }
     if (gravatar_lnk == 'default') {
         return '<i class="icon-user {1}" style="font-size: {0}px;"></i>'.format(size, cssclass);
     }
     return ('<i class="icon-gravatar {2}"' +
             ' style="font-size: {0}px;background-image: url(\'{1}\'); background-size: {0}px"' +
             '></i>').format(size, gravatar_lnk, cssclass);
 }
 
 var autocompleteGravatar = function(res, gravatar_lnk, size, group) {
     var elem;
     if (group !== undefined) {
         elem = '<i class="perm-gravatar-ac icon-users"></i>';
     } else {
         elem = gravatar(gravatar_lnk, size, "perm-gravatar-ac");
     }
     return '<div class="ac-container-wrap">{0}{1}</div>'.format(elem, res);
 }
 
 // Custom formatter to highlight the matching letters
 var autocompleteFormatter = function (oResultData, sQuery, sResultMatch) {
     var query;
     if (sQuery && sQuery.toLowerCase) // YAHOO AutoComplete
         query = sQuery.toLowerCase();
     else if (sResultMatch && sResultMatch.term) // select2 - parameter names doesn't match
         query = sResultMatch.term.toLowerCase();
 
     // group
     if (oResultData.type == "group") {
         return autocompleteGravatar(
             "{0}: {1}".format(
                 _TM['Group'],
                 autocompleteHighlightMatch(oResultData.grname, query)),
             null, null, true);
     }
 
     // users
     if (oResultData.nname) {
         var displayname = autocompleteHighlightMatch(oResultData.nname, query);
         if (oResultData.fname && oResultData.lname) {
             displayname = "{0} {1} ({2})".format(
                 autocompleteHighlightMatch(oResultData.fname, query),
                 autocompleteHighlightMatch(oResultData.lname, query),
                 displayname);
         }
 
         return autocompleteGravatar(displayname, oResultData.gravatar_lnk, oResultData.gravatar_size);
     }
 
     return '';
 };
 
 var SimpleUserAutoComplete = function ($inputElement) {
     $inputElement.select2({
         formatInputTooShort: $inputElement.attr('placeholder'),
         initSelection : function (element, callback) {
             $.ajax({
                 url: pyroutes.url('users_and_groups_data'),
                 dataType: 'json',
                 data: {
                     key: element.val()
                 },
                 success: function(data){
                   callback(data.results[0]);
                 }
             });
         },
         minimumInputLength: 1,
         ajax: {
             url: pyroutes.url('users_and_groups_data'),
             dataType: 'json',
             data: function(term, page){
               return {
                 query: term
               };
             },
             results: function (data, page){
               return data;
             },
             cache: true
         },
         formatSelection: autocompleteFormatter,
         formatResult: autocompleteFormatter,
         escapeMarkup: function(m) { return m; },
         id: function(item) { return item.nname; },
     });
 }
 
 var MembersAutoComplete = function ($inputElement, $typeElement) {
 
     $inputElement.select2({
         placeholder: $inputElement.attr('placeholder'),
         minimumInputLength: 1,
         ajax: {
             url: pyroutes.url('users_and_groups_data'),
             dataType: 'json',
             data: function(term, page){
               return {
                 query: term,
                 types: 'users,groups'
               };
             },
             results: function (data, page){
               return data;
             },
             cache: true
         },
         formatSelection: autocompleteFormatter,
         formatResult: autocompleteFormatter,
         escapeMarkup: function(m) { return m; },
         id: function(item) { return item.type == 'user' ? item.nname : item.grname },
     }).on("select2-selecting", function(e) {
         // e.choice.id is automatically used as selection value - just set the type of the selection
         $typeElement.val(e.choice.type);
     });
 }
 
-var MentionsAutoComplete = function ($inputElement, users_list) {
-    var $container = $('<div/>').insertAfter($inputElement);
-
-    var matchUsers = function (sQuery) {
-            // use the search string from $inputElement instead of sQuery
-            if(!$container.data('search')){
-                // return empty list so the input list isn't shown
-                return []
-            }
-            return autocompleteMatchUsers($container.data('search'), users_list);
-    }
-
-    var datasource = new YAHOO.util.FunctionDataSource(matchUsers);
-    var mentionsAC = new YAHOO.widget.AutoComplete($inputElement[0], $container[0], datasource);
-    mentionsAC.useShadow = false;
-    mentionsAC.resultTypeList = false;
-    mentionsAC.animVert = false;
-    mentionsAC.animHoriz = false;
-    mentionsAC.animSpeed = 0.1;
-    mentionsAC.suppressInputUpdate = true;
-    mentionsAC.formatResult = function (oResultData, sQuery, sResultMatch) {
-        // use the search string from $inputElement instead of sQuery
-        return autocompleteFormatter(oResultData, $container.data('search'), sResultMatch);
+var MentionsAutoComplete = function ($inputElement) {
+  $inputElement.atwho({
+    at: "@",
+    callbacks: {
+      remoteFilter: function(query, callback) {
+        $.getJSON(
+          pyroutes.url('users_and_groups_data'),
+          {
+            query: query,
+            types: 'users'
+          },
+          function(data) {
+            callback(data.results)
     }
-
-    // Handler for selection of an entry
-    if(mentionsAC.itemSelectEvent){
-        mentionsAC.itemSelectEvent.subscribe(function (sType, aArgs) {
-            var myAC = aArgs[0]; // reference back to the AC instance
-            var elLI = aArgs[1]; // reference to the selected LI element
-            var oData = aArgs[2]; // object literal of selected item's result data
-            myAC.getInputEl().value = $container.data('before') + oData.nname + ' ' + $container.data('after');
-            _setCaretPosition($(myAC.getInputEl()), myAC.dataSource.before.length + oData.nname.length + 1);
-        });
+        );
+      },
+      sorter: function(query, items, searchKey) {
+        return items;
     }
-
-    // Must match utils2.py MENTIONS_REGEX.
-    // Operates on a string from char before @ up to cursor.
-    // Check that the char before @ doesn't look like an email address, and match to end of string.
-    var mentionRe = new RegExp('(?:^|[^a-zA-Z0-9])@([a-zA-Z0-9][-_.a-zA-Z0-9]*[a-zA-Z0-9])$');
-
-    $inputElement.keyup(function(e){
-            var currentMessage = $inputElement.val();
-            var currentCaretPosition = $inputElement[0].selectionStart;
-
-            $container.data('search', '');
-            var messageBeforeCaret = currentMessage.substr(0, currentCaretPosition);
-            var lastAtPos = messageBeforeCaret.lastIndexOf('@');
-            if(lastAtPos >= 0){
-                // Search from one char before last @ ... if possible
-                var m = mentionRe.exec(messageBeforeCaret.substr(Math.max(0, lastAtPos - 1)));
-                if(m){
-                    $container.data('before', currentMessage.substr(0, lastAtPos + 1));
-                    $container.data('search', currentMessage.substr(lastAtPos + 1, currentCaretPosition - lastAtPos - 1));
-                    $container.data('after', currentMessage.substr(currentCaretPosition));
-                }
-            }
+    },
+    displayTpl: "<li>" + autocompleteGravatar('${fname} ${lname} (${nname})', '${gravatar_lnk}', 16) + "</li>",
+    insertTpl: "${atwho-at}${nname}"
         });
-}
+};
 
 
 // Set caret at the given position in the input element
 function _setCaretPosition($inputElement, caretPos) {
     $inputElement.each(function(){
         if(this.createTextRange) { // IE
             var range = this.createTextRange();
             range.move('character', caretPos);
             range.select();
         }
         else if(this.selectionStart) { // other recent browsers
             this.focus();
             this.setSelectionRange(caretPos, caretPos);
         }
         else // last resort - very old browser
             this.focus();
     });
 }
 
 
 var addReviewMember = function(id,fname,lname,nname,gravatar_link,gravatar_size){
     var displayname = nname;
     if ((fname != "") && (lname != "")) {
         displayname = "{0} {1} ({2})".format(fname, lname, nname);
     }
     var gravatarelm = gravatar(gravatar_link, gravatar_size, "");
     // WARNING: the HTML below is duplicate with
     // kallithea/templates/pullrequests/pullrequest_show.html
     // If you change something here it should be reflected in the template too.
     var element = (
         '     <li id="reviewer_{2}">\n'+
         '       <span class="reviewers_member">\n'+
         '         <input type="hidden" value="{2}" name="review_members" />\n'+
         '         <span class="reviewer_status" data-toggle="tooltip" title="not_reviewed">\n'+
         '             <i class="icon-circle changeset-status-not_reviewed"></i>\n'+
         '         </span>\n'+
         (gravatarelm ?
         '         {0}\n' :
         '')+
         '         <span>{1}</span>\n'+
         '         <a href="#" class="reviewer_member_remove" onclick="removeReviewMember({2})">\n'+
         '             <i class="icon-minus-circled"></i>\n'+
         '         </a> (add not saved)\n'+
         '       </span>\n'+
         '     </li>\n'
         ).format(gravatarelm, displayname, id);
     // check if we don't have this ID already in
     var ids = [];
     $('#review_members').find('li').each(function() {
             ids.push(this.id);
         });
     if(ids.indexOf('reviewer_'+id) == -1){
         //only add if it's not there
         $('#review_members').append(element);
     }
 }
 
 var removeReviewMember = function(reviewer_id, repo_name, pull_request_id){
     var $li = $('#reviewer_{0}'.format(reviewer_id));
     $li.find('div div').css("text-decoration", "line-through");
     $li.find('input').prop('name', 'review_members_removed');
     $li.find('.reviewer_member_remove').replaceWith('&nbsp;(remove not saved)');
 }
 
 /* activate auto completion of users as PR reviewers */
 var PullRequestAutoComplete = function ($inputElement) {
     $inputElement.select2(
     {
         placeholder: $inputElement.attr('placeholder'),
         minimumInputLength: 1,
         ajax: {
             url: pyroutes.url('users_and_groups_data'),
             dataType: 'json',
             data: function(term, page){
               return {
                 query: term
               };
             },
             results: function (data, page){
               return data;
             },
             cache: true
         },
         formatSelection: autocompleteFormatter,
         formatResult: autocompleteFormatter,
         escapeMarkup: function(m) { return m; },
     }).on("select2-selecting", function(e) {
         addReviewMember(e.choice.id, e.choice.fname, e.choice.lname, e.choice.nname,
                         e.choice.gravatar_lnk, e.choice.gravatar_size);
         $inputElement.select2("close");
         e.preventDefault();
     });
 }
 
 
 function addPermAction(perm_type) {
     var template =
         '<td><input type="radio" value="{1}.none" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +
         '<td><input type="radio" value="{1}.read" checked="checked" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +
         '<td><input type="radio" value="{1}.write" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +
         '<td><input type="radio" value="{1}.admin" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +
         '<td>' +
                 '<input class="form-control" id="perm_new_member_name_{0}" name="perm_new_member_name_{0}" value="" type="text" placeholder="{2}">' +
                 '<input id="perm_new_member_type_{0}" name="perm_new_member_type_{0}" value="" type="hidden">' +
         '</td>' +
         '<td></td>';
     var $last_node = $('.last_new_member').last(); // empty tr between last and add
     var next_id = $('.new_members').length;
     $last_node.before($('<tr class="new_members">').append(template.format(next_id, perm_type, _TM['Type name of user or member to grant permission'])));
     MembersAutoComplete($("#perm_new_member_name_"+next_id), $("#perm_new_member_type_"+next_id));
 }
 
 function ajaxActionRevokePermission(url, obj_id, obj_type, field_id, extra_data) {
     var success = function (o) {
             $('#' + field_id).remove();
         };
     var failure = function (o) {
             alert(_TM['Failed to revoke permission'] + ": " + o.status);
         };
     var query_params = {};
     // put extra data into POST
     if (extra_data !== undefined && (typeof extra_data === 'object')){
         for(var k in extra_data){
             query_params[k] = extra_data[k];
         }
     }
 
     if (obj_type=='user'){
         query_params['user_id'] = obj_id;
         query_params['obj_type'] = 'user';
     }
     else if (obj_type=='user_group'){
         query_params['user_group_id'] = obj_id;
         query_params['obj_type'] = 'user_group';
     }
 
     ajaxPOST(url, query_params, success, failure);
 };
 
 /* Multi selectors */
 
 var MultiSelectWidget = function(selected_id, available_id, form_id){
     var $availableselect = $('#' + available_id);
     var $selectedselect = $('#' + selected_id);
 
     //fill available only with those not in selected
     var $selectedoptions = $selectedselect.children('option');
     $availableselect.children('option').filter(function(i, e){
             for(var j = 0, node; node = $selectedoptions[j]; j++){
                 if(node.value == e.value){
                     return true;
                 }
             }
             return false;
         }).remove();
 
     $('#add_element').click(function(e){
             $selectedselect.append($availableselect.children('option:selected'));
         });
     $('#remove_element').click(function(e){
             $availableselect.append($selectedselect.children('option:selected'));
         });
 
     $('#'+form_id).submit(function(){
             $selectedselect.children('option').each(function(i, e){
                 e.selected = 'selected';
             });
         });
 }
 
 
 /**
  Branch Sorting callback for select2, modifying the filtered result so prefix
  matches come before matches in the line.
  **/
 var branchSort = function(results, container, query) {
     if (query.term) {
         return results.sort(function (a, b) {
             // Put closed branches after open ones (a bit of a hack ...)
             var aClosed = a.text.indexOf("(closed)") > -1,
                 bClosed = b.text.indexOf("(closed)") > -1;
             if (aClosed && !bClosed) {
                 return 1;
             }
             if (bClosed && !aClosed) {
                 return -1;
             }
 
             // Put early (especially prefix) matches before later matches
             var aPos = a.text.toLowerCase().indexOf(query.term.toLowerCase()),
                 bPos = b.text.toLowerCase().indexOf(query.term.toLowerCase());
             if (aPos < bPos) {
                 return -1;
             }
             if (bPos < aPos) {
                 return 1;
             }
 
             // Default sorting
             if (a.text > b.text) {
                 return 1;
             }
             if (a.text < b.text) {
                 return -1;
             }
             return 0;
         });
     }
     return results;
 };
 
 var prefixFirstSort = function(results, container, query) {
     if (query.term) {
         return results.sort(function (a, b) {
             // if parent node, no sorting
             if (a.children != undefined || b.children != undefined) {
                 return 0;
             }
 
             // Put prefix matches before matches in the line
             var aPos = a.text.toLowerCase().indexOf(query.term.toLowerCase()),
                 bPos = b.text.toLowerCase().indexOf(query.term.toLowerCase());
             if (aPos === 0 && bPos !== 0) {
                 return -1;
             }
             if (bPos === 0 && aPos !== 0) {
                 return 1;
             }
 
             // Default sorting
             if (a.text > b.text) {
                 return 1;
             }
             if (a.text < b.text) {
                 return -1;
             }
             return 0;
         });
     }
     return results;
 };
 
 /* Helper for jQuery DataTables */
 
 var updateRowCountCallback = function updateRowCountCallback($elem, onlyDisplayed) {
     return function drawCallback() {
         var info = this.api().page.info(),
             count = onlyDisplayed === true ? info.recordsDisplay : info.recordsTotal;
         $elem.html(count);
     }
 };
 
 
 /**
  * activate changeset parent/child navigation links
  */
 var activate_parent_child_links = function(){
 
     $('.parent-child-link').on('click', function(e){
         var $this = $(this);
         //fetch via ajax what is going to be the next link, if we have
         //>1 links show them to user to choose
         if(!$this.hasClass('disabled')){
             $.ajax({
                 url: $this.data('ajax-url'),
                 success: function(data) {
                     var repo_name = $this.data('reponame');
                     if(data.results.length === 0){
                         $this.addClass('disabled');
                         $this.text(_TM['No revisions']);
                     }
                     if(data.results.length === 1){
                         var commit = data.results[0];
                         window.location = pyroutes.url('changeset_home', {'repo_name': repo_name, 'revision': commit.raw_id});
                     }
                     else if(data.results.length > 1){
                         $this.addClass('disabled');
                         $this.addClass('double');
                         var template =
                             ($this.data('linktype') == 'parent' ? '<i class="icon-left-open"/> ' : '') +
                             '<a title="__title__" href="__url__">__rev__</a>' +
                             ($this.data('linktype') == 'child' ? ' <i class="icon-right-open"/>' : '');
                         var _html = [];
                         for(var i = 0; i < data.results.length; i++){
                             _html.push(template
                                 .replace('__rev__', 'r{0}:{1}'.format(data.results[i].revision, data.results[i].raw_id.substr(0, 6)))
                                 .replace('__title__', data.results[i].message)
                                 .replace('__url__', pyroutes.url('changeset_home', {
                                     'repo_name': repo_name,
                                     'revision': data.results[i].raw_id}))
                                 );
                         }
                         $this.html(_html.join('<br/>'));
                     }
                 }
             });
         e.preventDefault();
         }
     });
 }

kallithea/public/less/main.less

@@ -1,28 +1,29 b''
 /*!
  * Don't edit the css file directly.
  *
  * Instead, edit the less file(s) and regenerate the css:
  *
  * npm install
  * npm run less
  *
  */
 
 /* 3rd party styles */
 @import "node_modules/bootstrap/less/bootstrap.less";
 @import (inline) "node_modules/datatables.net-bs/css/dataTables.bootstrap.css";
+@import (inline) "node_modules/at.js/dist/css/jquery.atwho.css";
 @import (less) "node_modules/select2/select2.css";
 @import (less) "node_modules/select2-bootstrap-css/select2-bootstrap.css";
 @import (less) "tmp/pygments.css";
 @import (less) "../fontello/css/kallithea.css";
 
 /* kallithea styles */
 @import "kallithea-variables.less";
 @import "kallithea-labels.less";
 @import "yui-ac.less";
 @import "kallithea-select2.less";
 @import "kallithea-diff.less";
 @import "style.less";
 
 /* finally, import the optional theme file with local customizations */
 @import (optional) "theme.less";

kallithea/public/less/style.less

@@ -1,931 +1,937 b''
 body {
   background: url("../images/background.png") repeat scroll 0 0 #B0B0B0;
 }
 
 /* pseude content that should not be selected or copied by the user */
 [data-pseudo-content]:before {
   content: attr(data-pseudo-content);
 }
 
 /* class for texts where newlines should be preserved, for very light-weight ascii art markup (like pull request descriptions) */
 .formatted-fixed {
   font-family: @font-family-monospace;
   white-space: pre-wrap;
 }
 
 /* use monospace for changeset hashes */
 .changeset_hash {
   font-family: @font-family-monospace;
 }
 
 /* Note: class 'icon-empty' or 'icon-gravatar' can be used to get icon-ish styling without an actual glyph */
 i[class^='icon-empty'],
 i[class^='icon-gravatar'] {
   background-repeat: no-repeat;
   background-position: center;
   display: inline-block;
   min-width: 16px;
   min-height: 16px;
   margin: -2px 0 -4px 0;
 }
 
 .inline-comments-general.show-general-status .hidden.general-only {
   display: block !important;
 }
 .truncate {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   -ms-text-overflow: ellipsis;
 }
 .truncate.autoexpand:hover {
   overflow: visible;
 }
 
 /* show comment anchors when hovering over panel-heading */
 a.permalink {
   visibility: hidden;
 }
 .panel-heading:hover .permalink {
   visibility: visible;
 }
 
 .navbar-inverse {
   border: none;
 }
 
 /* logo */
 nav.navbar.mainmenu > .navbar-header > .navbar-brand {
   font-size: 20px;
   padding-top: 12px;
   > .branding:before {
     content: "";
     display: inline-block;
     margin-right: .2em;
     background-image: url(@kallithea-logo-url);
     width: @kallithea-logo-width;
     height: @kallithea-logo-height;
     margin-bottom: -@kallithea-logo-bottom;
     margin-top: -12px;
   }
 }
 
 /* code highlighting */
 /* don't use bootstrap style for code blocks */
 .code-highlighttable pre {
   background: inherit;
   border: 0;
 }
 
 /* every direct child of a panel, that is not .panel-heading, should auto
  * overflow to prevent overflowing of elements like text boxes and tables */
 .panel > :not(.panel-heading){
   overflow-x: auto;
   min-height: 0.01%;
 }
 
 /* allow other exceptions to automatic overflow-x */
 .panel > .overflow-x-visible {
   overflow-x: visible;
 }
 
 /* margin below top level panels */
 #main > .panel {
   margin-bottom: @kallithea-panel-margin;
 }
 
 /* search highlighting */
 div.search-code-body pre .match {
   background-color: @highlight-color;
 }
 div.search-code-body pre .break {
   background-color: @highlight-line-color;
   width: 100%;
   display: block;
 }
 
 /* use @alert-danger-text for form error messages and .alert-danger for the input element */
 .form-group .error-message {
   color: @alert-danger-text;
   display: inline-block;
   padding-top: 5px;
   &:empty{
     display: none;
   }
 }
 input.error {
   .alert-danger;
 }
 
 /* datatable */
 .dataTables_left {
   .pull-left;
 }
 .dataTables_right {
   .pull-right;
 }
 
 /* make all datatable paginations small */
 .dataTables_paginate .pagination {
   .pagination-sm;
 }
 
 /* show column sort icons in our font ... and before column header */
 table.dataTable {
   .sorting_asc:before {
     font-family: "kallithea";
     content: "\23f6";
     padding-right: 8px;
   }
   .sorting_desc:before {
     font-family: "kallithea";
     content: "\23f7";
     padding-right: 8px;
   }
   .sorting:before {
     font-family: "kallithea";
     content: "\2195";
     padding-right: 8px;
     opacity: 0.5;
   }
   .sorting_asc:after,
   .sorting_desc:after,
   .sorting:after {
     content: "" !important;
   }
 }
 
 /* _dt_elements.html styling - some submit buttons have their own form but should still be shown inline */
 table.dataTable td > .btn + form {
   display: inline;
 }
 
 table.dataTable .dt_repo_pending {
   opacity: 0.5;
 }
 
 /* language bars (summary page) */
 #lang_stats {
   .progress-bar {
     min-width: 15px;
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
   }
   td {
     padding: 1px 0 !important;
   }
 }
 
 /* use pointer cursor for expand_commit */
 .expand_commit .icon-align-left {
   cursor: pointer;
   color: #999;
 }
 
 /* don't break author, date and comment cells into multiple lines in changeset table */
 table.changesets {
   .author,
   .date,
   .comments {
     white-space: nowrap;
   }
 }
 
 /* textareas should be at least 100px high and 400px wide */
 textarea.form-control {
   font-family: @font-family-monospace;
   min-height: 100px;
   min-width: 400px;
 }
 
 /* add some space between the code-browser icons and the file names */
 .browser-dir > i[class^='icon-'],
 .submodule-dir > i[class^='icon-'],
 .browser-file > i[class^='icon-'] {
   padding-right: 0.3em;
 }
 
 div.panel-primary {
   border: none;
 }
 
 /* no extra vertical margin */
 #content div.panel ul.pagination {
   margin: 0;
 }
 
 /* remove margin below footer */
 .navbar.footer {
   margin-bottom: 0;
 }
 
 .user-menu {
   padding: 0 !important;
 }
 #quick_login {
   width: 360px;
   margin-top: 15px;
   min-height: 110px;
 }
 #quick_login input#username,
 #quick_login input#password {
   display: block;
   margin: 5px 0 10px;
 }
 #quick_login .password_forgotten a,
 #quick_login .register a {
   padding: 0 !important;
   line-height: 25px !important;
   float: left;
   clear: both;
 }
 #quick_login .submit {
   float: right;
 }
 #quick_login .submit input#sign_in {
   margin-top: 5px;
 }
 #quick_login > .pull-left {
   width: 170px;
 }
 #quick_login > .pull-right {
   width: 140px;
 }
 #quick_login .full_name {
   font-weight: bold;
   padding: 3px;
 }
 #quick_login .email {
   padding: 3px 3px 3px 0;
 }
 #quick_login :not(input) {
   color: @kallithea-theme-inverse-color;
   padding-bottom: 3px;
 }
 
 #journal .journal_user {
   color: #747474;
   font-size: 14px;
   font-weight: bold;
   height: 30px;
 }
 #journal .journal_user.deleted {
   color: #747474;
   font-size: 14px;
   font-weight: normal;
   height: 30px;
   font-style: italic;
 }
 #journal .journal_icon {
   clear: both;
   float: left;
   padding-right: 4px;
   padding-top: 3px;
 }
 #journal .journal_action {
   padding-top: 4px;
   min-height: 2px;
   float: left;
 }
 #journal .journal_action_params {
   clear: left;
   padding-left: 22px;
 }
 #journal .date {
   clear: both;
   color: #777777;
   font-size: 11px;
   padding-left: 22px;
 }
 #journal .journal_repo_name {
   font-weight: bold;
   font-size: 1.1em;
 }
 #journal .compare_view {
   padding: 5px 0px 5px 0px;
   width: 95px;
 }
 .trending_language_tbl,
 .trending_language_tbl td {
   border: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
 }
 .trending_language_tbl,
 .trending_language_tbl tr {
   border-spacing: 1px;
 }
 h3.files_location {
   font-size: 1.8em;
   font-weight: 700;
   border-bottom: none !important;
   margin: 10px 0 !important;
 }
 .file_history {
   padding-top: 10px;
   font-size: 16px;
 }
 .file_author {
   float: left;
 }
 .file_author .item {
   float: left;
   padding: 5px;
   color: #888;
 }
 table#updaterevs-table tr.mergerow,
 table#updaterevs-table tr.out-of-range,
 table#changesets tr.mergerow,
 table#changesets tr.out-of-range {
   opacity: 0.6;
 }
 .issue-tracker-link {
   color: #3F6F9F;
   font-weight: bold !important;
 }
 /* changeset statuses (must be the same name as the status) */
 .changeset-status-not_reviewed {
   color: #bababa;
 }
 .changeset-status-approved {
   color: #81ba51;
 }
 .changeset-status-rejected {
   color: #d06060;
 }
 .changeset-status-under_review {
   color: #ffc71e;
 }
 
 #repo_size {
   display: block;
   margin-top: 4px;
   color: #666;
   float: right;
 }
 .currently_following {
   padding-left: 10px;
   padding-bottom: 5px;
 }
 #switch_repos {
   position: absolute;
   height: 25px;
   z-index: 1;
 }
 #switch_repos select {
   min-width: 150px;
   max-height: 250px;
   z-index: 1;
 }
 table#permissions_manage span.private_repo_msg {
   font-size: 0.8em;
   opacity: 0.6;
 }
 table#permissions_manage td.private_repo_msg {
   font-size: 0.8em;
 }
 table#permissions_manage tr#add_perm_input td {
   vertical-align: middle;
 }
 div.gravatar {
   float: left;
   background-color: #FFF;
   margin-right: 0.7em;
   padding: 1px 1px 1px 1px;
   line-height: 0;
   border-radius: 3px;
 }
 div.gravatar img {
   border-radius: 2px;
 }
 .panel-body.settings .nav-pills > :not(.active) > a {
   color: inherit;
 }
 .panel-body.no-padding {
   padding: 0;
 }
 .panel-body ~ .panel-body {
   padding-top: 0;
 }
 .panel-body.no-padding ~ .panel-body {
   padding-top: 15px;
 }
 .panel-body > :last-child {
   margin-bottom: 0;
 }
 .panel-body.settings .text-muted {
   margin: 5px 0;
 }
 ins,
 div.options a:hover {
   text-decoration: none;
 }
 img,
 nav.navbar #quick li a:hover span.normal,
 #clone_url,
 #clone_url_id {
   border: none;
 }
 img.icon,
 .right .merge img {
   vertical-align: bottom;
 }
 #content div.panel div.panel-heading ul.links,
 #content div.panel div.message div.dismiss {
   float: right;
   margin: 0;
   padding: 0;
 }
 nav.navbar #home,
 #content div.panel ul.left,
 #content div.panel ol.left,
 div#commit_history,
 div#legend_data,
 div#legend_container,
 div#legend_choices {
   float: left;
 }
 
 /* set size for statistics charts */
 #commit_history {
   width: 450px;
   height: 300px;
 }
 #overview {
   clear: both;
   width: 450px;
   height: 100px;
 }
 
 #content #left #menu ul.closed,
 #content #left #menu li ul.collapsed,
 .yui-tt-shadow {
   display: none;
 }
 #content #left #menu ul.opened,
 #content #left #menu li ul.expanded {
   display: block !important;
 }
 
 #content div.panel ol.lower-roman,
 #content div.panel ol.upper-roman,
 #content div.panel ol.lower-alpha,
 #content div.panel ol.upper-alpha,
 #content div.panel ol.decimal {
   margin: 10px 24px 10px 44px;
 }
 
 div.form div.form-group div.button input,
 #content div.panel div.form div.buttons input,
 div.form div.buttons input,
 #content div.panel div.action div.button input {
   font-size: 11px;
   font-weight: 700;
   margin: 0;
 }
 div.form div.form-group div.highlight,
 #content div.panel div.form div.buttons div.highlight {
   display: inline;
 }
 #content div.panel table td.user,
 #content div.panel table td.address {
   width: 10%;
   text-align: center;
 }
 #content div.panel div.action div.button {
   text-align: right;
   margin: 6px 0 0;
   padding: 0;
 }
 .ac .match {
   font-weight: 700;
   padding-top: 5px;
   padding-bottom: 5px;
 }
 .q_filter_box {
   border-radius: 4px;
   border: 0 none;
   margin-bottom: -4px;
   margin-top: -4px;
   padding-left: 3px;
 }
 #node_filter {
   border: 0px solid #545454;
   color: #AAAAAA;
   padding-left: 3px;
 }
 /** comment main **/
 .comment .panel,
 .comment-inline-form {
   max-width: 978px;
 }
 .comment .panel-body {
   background-color: #FAFAFA;
 }
 .comments-number {
   padding: 10px 0;
   color: #666;
 }
 .automatic-comment {
   font-style: italic;
 }
 /** comment form **/
 .status-block {
   margin: 5px;
   clear: both;
 }
 .panel-heading .pull-left input[type=checkbox],
 .panel-heading .pull-right input[type=checkbox] {
   position: relative;
   top: 4px;
   margin: -10px 2px 0;
 }
 /** comment inline **/
 .inline-comments {
   padding: 5px;
 }
 .inline-comments .comments-number {
   padding: 0px 0px 10px 0px;
 }
 input.status_change_checkbox,
 input.status_change_radio {
   margin: 0 0 5px 15px;
 }
 @keyframes animated-comment-background {
   0% {
     background-position: 0 0;
   }
   100% {
     background-position: 20px 0;
   }
 }
 .comment-preview.failed .user,
 .comment-preview.failed .panel-body {
   color: #666;
 }
 .comment-preview .comment-submission-status {
   float: right;
 }
 .comment-preview .comment-submission-status .btn-group {
   margin-left: 10px;
 }
 .comment-preview.submitting .panel-body {
   background-image: linear-gradient(-45deg, #FAFAFA, #FAFAFA 25%, #FFF 25%, #FFF 50%, #FAFAFA 50%, #FAFAFA 75%, #FFF 75%, #FFF 100%);
   background-size: 20px 20px;
   animation: animated-comment-background 0.4s linear infinite;
 }
 /****
 PULL REQUESTS
 *****/
 div.pr-details-title.closed {
   color: #555;
   background: #eee;
 }
 div.pr {
   margin: 0px 15px;
   padding: 4px 4px;
 }
 tr.pr-closed td {
   background-color: #eee !important;
   color: #555 !important;
 }
 span.pr-closed-tag {
   margin-bottom: 1px;
   margin-right: 1px;
   padding: 1px 3px;
   font-size: 10px;
   color: @kallithea-theme-main-color;
   white-space: nowrap;
   border-radius: 4px;
   border: 1px solid #d9e8f8;
   line-height: 1.5em;
 }
 #s2id_org_ref,
 #s2id_other_ref,
 #s2id_org_repo,
 #s2id_other_repo {
   min-width: 150px;
   margin: 5px;
 }
 #pr-summary > .pr-not-edit {
   min-height: 50px !important;
 }
 /* make 'next iteration' changeset table smaller and scrollable */
 #pr-summary #updaterevs {
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 /****
   PERMS
 *****/
 .perm-gravatar-ac {
   vertical-align: middle;
   padding: 2px;
   width: 14px;
   height: 14px;
 }
 
 /* avoid gaps between the navbar and browser */
 .navbar.mainmenu {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 .navbar.footer {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 /* show some context of link targets - but only works when the link target
    can be extended with any visual difference */
 div.comment:target:before {
   display: block;
   height: 100px;
   margin: -100px 0 0;
   content: "";
 }
 div.comment:target > .panel {
   border: solid 2px #ee0 !important;
 }
 .lineno:target a {
   border: solid 2px #ee0 !important;
   margin: -2px;
 }
 .btn-image-diff-show,
 .btn-image-diff-swap {
   margin: 5px;
 }
 .img-diff {
   max-width: 45%;
   height: auto;
   margin: 5px;
   /* http://lea.verou.me/demos/css3-patterns.html */
   background-image: linear-gradient(45deg, #888 25%, transparent 25%, transparent), linear-gradient(-45deg, #888 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #888 75%), linear-gradient(-45deg, transparent 75%, #888 75%);
   background-size: 10px 10px;
   background-color: #999;
 }
 .img-preview {
   max-width: 100%;
   height: auto;
   margin: 5px;
 }
 div.comment-prev-next-links div.prev-comment,
 div.comment-prev-next-links div.next-comment {
   display: inline-block;
   min-width: 150px;
   margin: 3px 6px;
 }
 #comments-general-comments div.comment-prev-next-links div.prev-comment,
 #comments-general-comments div.comment-prev-next-links div.next-comment {
   margin-left: 0;
 }
 
 /* changelog graph */
 #graph_nodes,
 #updaterevs-graph {
   .make-xs-column(1);
   height: 0;
 }
 #graph_content,
 #graph_content_pr,
 #updaterevs-table {
   .make-xs-column-offset(1);
   .make-xs-column(11);
 }
 
 /* use bootstrap grid columns for centered columns */
 .centered-column {
   .make-sm-column-offset(3);
   .make-sm-column(6);
   .form {
     .form-horizontal;
     .form-group > label {
       .make-sm-column(4);
     }
     .form-group > div {
       .make-sm-column(8);
     }
     .form-group > div:first-child { /* in case there is no label */
       .make-sm-column-offset(4);
       .make-sm-column(8);
     }
   }
 }
 
 /* use columns and form-horizontal for settings pages ... on wide screens */
 @media (min-width: @screen-sm-min) {
   .settings {
     max-width: @container-md;
     > ul.nav-stacked {
       .make-sm-column(2);
       max-width: (@container-md/12)*2;
     }
     > div {
       .make-sm-column(10);
       max-width: (@container-md/12)*10;
     }
     .form {
       .form-horizontal;
     }
     .form-group {
       .clearfix;
       > label {
         .make-xs-column(3);
         overflow: hidden;
         text-overflow: ellipsis;
         input {
           width: 100%;
         }
       }
       > div {
         .make-xs-column(9);
       }
       .buttons {
         .make-xs-column-offset(3);
       }
     }
   }
 }
 
 /* use columns and form-horizontal for summary page */
 #summary {
   max-width: @container-md;
   .form-horizontal;
   .make-sm-column(10);
   .form-group > label {
     .make-sm-column(2);
   }
   .form-group > div {
     .make-sm-column(10);
   }
 }
 #summary-menu-stats {
   .make-sm-column(2);
 }
 
 /* use columns and form-horizontal for pull request page */
 .pr-box {
   .make-sm-column(9);
   max-width: @container-md;
   #pr-summary {
     .form-horizontal;
     .form-group > label {
       .make-sm-column(3);
     }
     .form-group > div {
       .make-sm-column(9);
     }
     .form-group > .buttons {
       .make-sm-column-offset(3);
       .make-sm-column(9);
     }
   }
 }
 .pr-reviewers-box {
   .make-sm-column(3);
 }
 
 /* repo table icons */
 #repos_list_wrap_wrapper {
   /* make icon-folder and repotag the same width */
   .icon-folder:before {
     margin: 0; // default margin would otherwise add to the total width
     width: 24px;
     text-align: left;
   }
   .label-repo {
     display: inline-block;
     width: 24px;
   }
 }
 
 /* changelog table columns */
 .table#changesets {
   table-layout: fixed;
   td {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     vertical-align: baseline;
   }
   .checkbox-column {
     width: 24px;
     /* the optional second checkbox will be inline-block but should wrap to a new line */
     white-space: normal;
     > input[type=checkbox] {
       margin-top: inherit;
       vertical-align: text-bottom;
     }
   }
   .changeset-logical-index {
     color: @gray-light;
     font-style: italic;
     font-size: 85%;
     text-align: right;
     overflow: visible;
   }
   .changeset-logical-index,
   .expand_commit,
   .status {
     width: 28px;
   }
   .author {
     width: 200px;
     @media (max-width: @screen-sm-max) {
       width: 120px;
     }
     @media (max-width: @screen-xs-max) {
       width: 20px;
       /* keep gravatar but hide name on tiny screens to give important columns more room */
       span {
         .hidden;
       }
     }
   }
   .hash {
     .small;
     width: 110px;
     @media (max-width: @screen-xs-max) {
       width: 48px;
     }
   }
   .date {
     .small;
     width: 100px;
   }
   /* hide on small screens to give important columns more room */
   .status,
   .expand_commit,
   .comments,
   .extra-container {
     .hidden-xs;
   }
   .mid > .log-container {
     position: relative;
     overflow: hidden;
     > .extra-container {
       position: absolute;
       top: 0;
       right: 0;
       background: white;
       box-shadow: -10px 0px 10px 0px white;
     }
   }
 }
 
 /* undo Bootstrap chrome/webkit blue outline on focus in navbar */
 .navbar-inverse .navbar-nav > li > a:focus {
   outline: 0;
 }
 
 /* use same badge coloring in navbar inverse as in panel-heading */
 .navbar-inverse {
   .badge {
     color: @navbar-inverse-bg;
     background-color: @navbar-inverse-color;
   }
 }
 
 /* pygments style */
 div.search-code-body pre .match {
   background-color: @highlight-color;
 }
 div.search-code-body pre .break {
   background-color: @highlight-line-color;
   width: 100%;
   color: #747474;
   display: block;
 }
 div.annotatediv {
   margin-left: 2px;
   margin-right: 4px;
 }
 .code-highlight {
   border-left: 1px solid #ccc;
 }
 .code-highlight pre,
 .linenodiv pre {
   padding: 5px 2px 0px 5px;
   margin: 0;
 }
 .code-highlight pre div:target {
   background-color: #FFFFBE !important;
 }
 .linenos a { text-decoration: none; }
 
 /* Stylesheets for the context bar */
 #quick_login > .pull-right .list-group-item {
   background-color: @kallithea-theme-main-color;
   border: 0;
 }
 #content #context-pages .follow .show-following,
 #content #context-pages .following .show-follow {
   display: none;
 }
 
 nav.navbar #quick > li > a,
 #context-pages > ul > li > a {
   height: @navbar-height;
 }
+
+/* at.js */
+.atwho-view strong {
+  /* the blue color doesn't look good, use normal color */
+  color: inherit;
+}

kallithea/templates/base/root.html

@@ -1,141 +1,143 b''
 ## -*- coding: utf-8 -*-
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title><%block name="title"/><%block name="branding_title"/></title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=10"/>
         <meta name="robots" content="index, nofollow"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="shortcut icon" href="${h.url('/images/favicon.ico')}" type="image/x-icon" />
         <link rel="icon" type="image/png" href="${h.url('/images/favicon-32x32.png')}" sizes="32x32">
         <link rel="icon" type="image/png" href="${h.url('/images/favicon-16x16.png')}" sizes="16x16">
         <link rel="apple-touch-icon" sizes="180x180" href="${h.url('/images/apple-touch-icon.png')}">
         <link rel="manifest" href="${h.url('/images/manifest.json')}">
         <link rel="mask-icon" href="${h.url('/images/safari-pinned-tab.svg')}" color="#b1d579">
         <meta name="msapplication-config" content="${h.url('/images/browserconfig.xml')}">
         <meta name="theme-color" content="#ffffff">
 
         ## CSS ###
         <link rel="stylesheet" type="text/css" href="${h.url('/css/style.css', ver=c.kallithea_version)}" media="screen"/>
         <%block name="css_extra"/>
 
         ## JAVASCRIPT ##
         <script type="text/javascript">
             ## JS translations map
             var TRANSLATION_MAP = {
                 'Cancel': ${h.jshtml(_("Cancel"))},
                 'Retry': ${h.jshtml(_("Retry"))},
                 'Submitting ...': ${h.jshtml(_("Submitting ..."))},
                 'Unable to post': ${h.jshtml(_("Unable to post"))},
                 'Add Another Comment': ${h.jshtml(_("Add Another Comment"))},
                 'Stop following this repository': ${h.jshtml(_('Stop following this repository'))},
                 'Start following this repository': ${h.jshtml(_('Start following this repository'))},
                 'Group': ${h.jshtml(_('Group'))},
                 'Loading ...': ${h.jshtml(_('Loading ...'))},
                 'loading ...': ${h.jshtml(_('loading ...'))},
                 'Search truncated': ${h.jshtml(_('Search truncated'))},
                 'No matching files': ${h.jshtml(_('No matching files'))},
                 'Open New Pull Request from {0}': ${h.jshtml(_('Open New Pull Request from {0}'))},
                 'Open New Pull Request for {0} &rarr; {1}': ${h.js(_('Open New Pull Request for {0} &rarr; {1}'))},
                 'Show Selected Changesets {0} &rarr; {1}': ${h.js(_('Show Selected Changesets {0} &rarr; {1}'))},
                 'Selection Link': ${h.jshtml(_('Selection Link'))},
                 'Collapse Diff': ${h.jshtml(_('Collapse Diff'))},
                 'Expand Diff': ${h.jshtml(_('Expand Diff'))},
                 'No revisions': ${h.jshtml(_('No revisions'))},
                 'Type name of user or member to grant permission': ${h.jshtml(_('Type name of user or member to grant permission'))},
                 'Failed to revoke permission': ${h.jshtml(_('Failed to revoke permission'))},
                 'Confirm to revoke permission for {0}: {1} ?': ${h.jshtml(_('Confirm to revoke permission for {0}: {1} ?'))},
                 'Enabled': ${h.jshtml(_('Enabled'))},
                 'Disabled': ${h.jshtml(_('Disabled'))},
                 'Select changeset': ${h.jshtml(_('Select changeset'))},
                 'Specify changeset': ${h.jshtml(_('Specify changeset'))},
                 'MSG_SORTASC': ${h.jshtml(_('Click to sort ascending'))},
                 'MSG_SORTDESC': ${h.jshtml(_('Click to sort descending'))},
                 'MSG_EMPTY': ${h.jshtml(_('No records found.'))},
                 'MSG_ERROR': ${h.jshtml(_('Data error.'))},
                 'MSG_LOADING': ${h.jshtml(_('Loading...'))}
             };
             var _TM = TRANSLATION_MAP;
 
             var TOGGLE_FOLLOW_URL  = ${h.js(h.url('toggle_following'))};
 
             var REPO_NAME = "";
             %if hasattr(c, 'repo_name'):
                 var REPO_NAME = ${h.js(c.repo_name)};
             %endif
 
             var _authentication_token = ${h.js(h.authentication_token())};
         </script>
         <script type="text/javascript" src="${h.url('/js/yui.2.9.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/jquery.min.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/jquery.dataTables.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/dataTables.bootstrap.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/bootstrap.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/select2.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/native.history.js', ver=c.kallithea_version)}"></script>
+        <script type="text/javascript" src="${h.url('/js/jquery.caret.min.js', ver=c.kallithea_version)}"></script>
+        <script type="text/javascript" src="${h.url('/js/jquery.atwho.min.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/base.js', ver=c.kallithea_version)}"></script>
         ## EXTRA FOR JS
         <%block name="js_extra"/>
         <script type="text/javascript">
             (function(window,undefined){
                 var History = window.History; // Note: We are using a capital H instead of a lower h
                 if ( !History.enabled ) {
                      // History.js is disabled for this browser.
                      // This is because we can optionally choose to support HTML4 browsers or not.
                     return false;
                 }
             })(window);
 
             $(document).ready(function(){
               tooltip_activate();
               show_more_event();
               // routes registration
               pyroutes.register('home', ${h.js(h.url('home'))}, []);
               pyroutes.register('new_gist', ${h.js(h.url('new_gist'))}, []);
               pyroutes.register('gists', ${h.js(h.url('gists'))}, []);
               pyroutes.register('new_repo', ${h.js(h.url('new_repo'))}, []);
 
               pyroutes.register('summary_home', ${h.js(h.url('summary_home', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('changelog_home', ${h.js(h.url('changelog_home', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('files_home', ${h.js(h.url('files_home', repo_name='%(repo_name)s',revision='%(revision)s',f_path='%(f_path)s'))}, ['repo_name', 'revision', 'f_path']);
               pyroutes.register('edit_repo', ${h.js(h.url('edit_repo', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('edit_repo_perms', ${h.js(h.url('edit_repo_perms', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('pullrequest_home', ${h.js(h.url('pullrequest_home', repo_name='%(repo_name)s'))}, ['repo_name']);
 
               pyroutes.register('toggle_following', ${h.js(h.url('toggle_following'))});
               pyroutes.register('changeset_info', ${h.js(h.url('changeset_info', repo_name='%(repo_name)s', revision='%(revision)s'))}, ['repo_name', 'revision']);
               pyroutes.register('changeset_home', ${h.js(h.url('changeset_home', repo_name='%(repo_name)s', revision='%(revision)s'))}, ['repo_name', 'revision']);
               pyroutes.register('repo_size', ${h.js(h.url('repo_size', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('repo_refs_data', ${h.js(h.url('repo_refs_data', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('users_and_groups_data', ${h.js(h.url('users_and_groups_data'))}, []);
              });
         </script>
 
         <%block name="head_extra"/>
     </head>
     <body>
       <nav class="navbar navbar-inverse mainmenu">
           <div class="navbar-header" id="logo">
             <a class="navbar-brand" href="${h.url('home')}">
               <span class="branding">${c.site_name}</span>
             </a>
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
           </div>
           <div id="navbar" class="navbar-collapse collapse">
             <%block name="header_menu"/>
           </div>
       </nav>
 
       ${next.body()}
 
       %if c.ga_code:
       ${h.literal(c.ga_code)}
       %endif
     </body>
 </html>