html: clarify type of button elements - make it clear if we really want "submit"

This might fix some real problems.

comments: don't open comment form on page load for comments on line 0

Data attributes have magic parsing of strings so '0' becomes 0 which is false.

Further, 0 == '' in JavaScript, so we have to use !== '' to catch empty strings.

style: mark failed comment submissions with red panel heading

Make it more obvious to the user that a comment submission failed: mark the
panel of the failed comment as "panel-danger" so the color of the comment panel
heading changes to red.

Previously, only the user and comment text would fade a bit.

js: fix missing var declaration of AJAX_COMMENT_URL and AJAX_COMMENT_DELETE_URL (Issue #362)

Tech debt stroke back when fb9550946c26 cleaned things up.

Eslint wearnings for these variables had incorrectly been manually ignored.

follow: Fix args for $.post() call in toggleFollowingRepo()

Before, the resulting query string was _literally_ like:

?follows_repository_id=xxx&_session_csrf_secret_token=yyy

The server side stack ended up parsing it as:

>>> urllib.parse.parse_qsl("follows_repository_id=xxx&_session_csrf_secret_token=yyy", keep_blank_values=True)
[('follows_repository_id', 'xxx'), ('amp', ''), ('_session_csrf_secret_token', 'yyy')]

because the HTML encoding of & isn't relevant here and it thus looks like a
"matrix URL" (as drafted on https://www.w3.org/DesignIssues/MatrixURIs.html )
with the following values:

param: follows_repository_id = xxx
param: amp =
matrix: _session_csrf_secret_token = yyy

It thus ended up with the right values (if ignoring 'amp') and it thus worked
anyway.

Instead, clean it up and just pass a dict to jQuery.post as intended.

js: replace jQuery's deprecated .size() with .length

The jQuery 3.0 upgrade guide states that the .size() function has been
removed, and is to be replaced with .length.

https://jquery.com/upgrade-guide/3.0/#breaking-change-deprecated-size-removed

changeset: fix XSS vulnerability in parent-child navigation

The 'Parent Rev.' - 'Child Rev.' links on changesets and in the file browser
normally immediately jump to the correct revision upon click. But, if there
are multiple candidates, e.g. two children of a commit, then a list of
revisions is shown as hyperlinks instead.

These hyperlinks have a 'title' attribute containing the full commit message
of the corresponding commit. When this commit message contains characters
special to HTML, like ", >, etc. they were added literally to the HTML code.

This can lead to a cross-site scripting (XSS) vulnerability when an attacker
has write access to a repository. They could craft a special commit message
that would introduce HTML and/or JavaScript code when the commit is listed
in such 'parent-child' navigation links.

Escape the commit message before using it further.

pullrequests: prevent XSS in @mention completion when first and last names cannot be trusted

atwho used in MentionsAutoComplete is passing raw user controlled data which
might contain HTML markup.

That could cause XSS issues when completion hit a rogue user name.

To avoid that, make sure displayTpl always escape user information, as
recommended in https://github.com/ichord/At.js/issues/334 .

pullrequests: prevent XSS when 'Potential Reviewers' are selected and first and last names cannot be trusted

The user information passed to autocompleteFormatter from select2 is the raw
data which might contain HTML markup controlled by the user.

That could cause XSS issues, already when adding rogue users as reviewers on a PR.

To avoid that, make sure select2 use the default escapeMarkup function. In
addReviewMember, use .html_escape when expanding the reviewer template.

pullrequests: prevent XSS in 'Potential Reviewers' list when first and last names cannot be trusted

The user information passed to autocompleteFormatter from select2 is the raw
data which might contain HTML markup controlled by the user.

That could cause XSS issues, already when loading a PR page.

To avoid that, make sure autocompleteHighlightMatch always escape user
information. That makes the user safe as long as a rogue user isn't selected ...

js: introduce an html_escape function

In analogy to (python) kallithea.lib.helpers.html_escape, introduce the
equivalent for use in JavaScript.

pullrequests: prevent XSS in 'Potential Reviewers' list when first and last names cannot be trusted

If a user first or last name contains javascript, these fields need proper
escaping to avoid XSS attacks.

An example scenario is:
- the malicious user creates a repository. This will cause this user to be
listed automatically under 'Potential Reviewers' in pull requests.
- another user creates a pull request on that repository and selects the
suggested reviewer from the 'Potential Reviewers' list.

Reported by Bob Hogg <wombat@rwhogg.site> (thanks!).


Technical note: the other caller of addReviewMember in base.js itself does
_not_ need to be adapted to escape the input values, because the input
values (oData) are _already_ escaped (by the YUI framework).

js: introduce an html_escape function

In analogy to (python) kallithea.lib.helpers.html_escape, introduce the
equivalent for use in JavaScript.

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.

controllers/templates: remove UI notification feature

This commit is part of the removal of the UI notification feature from
Kallithea, which is not deemed useful in its current form. Only email
notifications are preserved.

comments: don't leave stray "Add Another Comment" buttons after cancelling adding comments on a new line

2e72d2d16a0f introduced an invisible "submitting" div above comment forms. That
div was included when counting the number of comments on a line, and it thus
broke the logic for removing the last DOM elements after cancelling comments on
a new line.

To fix that, exclude the submitting div in the selector used for counting
comments.

pullrequest: avoid empty lines in reviewer list after long lines

Whitespace between the reviewer name and a hidden input element could cause
line wrapping and leave an apparently empty line.

Work around that by putting the empty element at the beginning of the line.

js: use ajax requests for select2 autocomplete

When you have a big user base, with thousends of users, always using the whole
dataset makes the UI slow.

This will replace kallithea/model/repo.py get_users_js and get_user_groups_js
which were used to inline the full list of users and groups in the document.
Instead, it will expose a json service for doing the completion.

When using the autocomplete, there might be multiple ajax requests, but tests
with a userbase > 9000 showed no problems.
And keep in mind, that although we now make multiple requests (one for every
character) that
- the autocomplete is not used that often
- the requests are quite cheap
- most importanly, we no longer need to calculate the user list/group list if
the user doesn't use the autocomplete

Users and groups are still passed as parameters to the javascript functions -
they will be removed later.

js: set cursor position after @mention selection

Based on work by Dominik Ruff and Stack Overflow.

js: refactor and simplify @mentions handling - no functional changes

The autocompleteCreate and get_mention functions are inlined.

The mentionQuery and tuple in datasource are replaced with before/search/after
data attributes on the $container element.

Variable use is simplified - less variables, better naming, and better content.

The @ is now in the before string, not in the search string.

gravatar: use icon-gravatar for default gravatar sizing and styling instead of icon-empty

We may want to use a different style for gravatar then for icon-empty,
so we should give it its own class, but still consider it an icon, like the
default icon-user is.

js: fix parent/child navigation with more than 2 parents/children

Before, it would only work with 0-2 parents/children.

js: make links to child changesets use a right arrow again

Previous changes where pulled incorrectly - fix that.

js: reuse parent/child navigation code - avoid duplication

Modified by Mads Kiilerich.

files: simplify header, making it more like changeset

"Search file list" is moved out of the header to a separate div.

The "Follow current branch" functionality is dropped, and there is thus less
need for passing the current URL around ... but it is generally still used for
browser history navigation.

The removal of branch following is a temporary feature regression - that will
be fixed next.

changeset: make parent/child navigation activation and javascript reusable

The javascript code is moved from changeset.html to base.js with minimal
changes. The markup code is moved to base.html.

The parameters ajax url and repo_name are stored as data properties on the link
element.

Use _TM['No revisions'] for translation of text.

js: don't show number of members of groups when doing autocomplete

This is done to make the database queries cheaper.

gravatar: use background-image style instead of img element for gravatar

When having several 1000 users, chrome will fail to load all the gravatar img
elements on the _admin/users page (ERR_INSUFFICIENT_RESOURCES).

If instead we use a background-image style, chrome will only load the images of
the elements that are actually displayed.

autocomplete: simplify code

Avoid unnecessary temporary variables and checking.

js: use body as container for Bootstrap tooltips

Under some circumstances, the floating of the elements gets altered, if the
tooltip elements gets put next to the source element. Therefore use body as the
container.

comments: display comment previews while submitting

Instead of just saying 'Submitting' and not showing any progress to
the user until the comment has been accepted by the server, show a
preview of the comment above the comment box in a way which is makes
it obvious to the user the comment is being submitted. Apart from
that, also clear the comment box so that a repeated clicking the
submit button doesn't result in a duplicate comment.

The preview doesn't highlight URLs or support @mentions or *bold*,
which is a good enough approximation in this case. When/if we (re-)add
the rST/Markdown support, we will need a client-side parser for the
syntax we choose.

When the submission fails, display a message and offer the user to
retry or cancel the submission.

autocomplete: use select2 when selecting users or groups to give permissions

This is a minimal change to MembersAutoComplete, inspired by Dominik Ruf.

The UX is slightly different than before, with select2 putting up an extra
input field, already before typing anything.

We use minimumInputLength 1 to get the same behaviour as before and avoid
displaying all users in a list.

autocomplete: use select2 when selecting users to add as reviewers to PRs

This is a minimal change to PullRequestAutoComplete, inspired by Dominik Ruf.

The UX is slightly different than before, with select2 putting up an extra
input field, already before typing anything.

We use minimumInputLength 1 to get the same behaviour as before and avoid
displaying all users in a list.

The select2 widget is reused for adding more users, so when a user is selected,
we process it, close the widget, and abort the selection, waiting for the user
to enter another user name.

autocomplete: use select2 when selecting owner of repos and PRs

This is a minimal change to SimpleUserAutoComplete, inspired by Dominik Ruf.

The UX is slightly different than before, with select2 putting up an extra
input field, already before typing anything.

We use minimumInputLength 1 to get the same behaviour as before and avoid
displaying all users in a list. This field will always have an old value and
the placeholder is thus never used, but we show it instead of the default
"Please enter 1 or more character" message.

The initSelection iteration is not pretty, but no more complex than what
happens when filtering the user list, and it has the advantage of giving a nice
name/gravatar display of the current user.

autocomplete: make autocompleteFormatter compatible with select2

The parameters are different, but select2 and the old YAHOO AutoComplete
library provide/require pretty much the same functionality.

This will allow gradual migration to select2.

autocompletion: drop explicit container elements - just create them when necessary

The previous wide styling of the @mention selection list didn't look pretty -
just use the default width.

Inspired by select2 port by Dominik Ruf.

notifications: remove custom 'container' class to avoid conflict with Bootstrap ... and rewrite things to use plain Bootstrap

Most of the markup and styling turned out to be easy to replace with plain
Bootstrap markup.

style: use plain Bootstrap with existing CSS styling

This is an intermediate step, trying to make our markup stay as close to plain
Bootstrap as possible, minimize the amount of customizations, and accept small
visual differences.

More long term, we will try to move to generated CSS with Bootstrap and our
customizations.

style: replace code-body etc with Bootstrap-ish panel and panel-heading, using panel-default for headers and tweak them grey

Based on work by Dominik Ruf.

templates: addPermAction JS escaping bugfix (by eliminating expansion bugfix)

In 33b71a130b16, the addPermAction template was incorrectly escaped via
h.jshtml, where it should've been plain h.js.

Instead of merely fixing the escaping, refactor the code to completely
remove the need for escaping anything, by avoiding the template variable
expansion inside the JavaScript.

template: use Bootstrap tooltips and popover instead of handmade tooltips

Based on work from Andrew Shadura <andrew@shadura.me>.

Further modified by Mads Kiilerich.

show_changeset_tooltip is merged into tooltip_activate.

db: rename UserFollowing.follows_repo_id to follows_repository_id

Since the relationship is 'follows_repository', rename the column to be
'follows_repository_id', not 'follows_repo_id'. This also makes the
Python column name match the actual database column name.

(The inconsistency dates back to early RhodeCode days.)

style: use span for reviewers instead of div

Based on Bootstrap work by Dominik Ruf.

style: use Bootstrap compatible data-toggle="tooltip" markup

Based on work by Dominik Ruf and Andrew Shadura.

style: don't use div.action_button for PR reviewers

This is an odd button. The remaining action buttons are more regular.

Based on work by Dominik Ruf.

style: in preparation for bootstrap, use bootstrap compatible button class names

Give all buttons a styling (default, success, danger, warning) and rename the sizes to sm and xs.

This is a subset of a bigger changeset. The subset was extracted by Mads Kiilerich, mostly by:

sed -i \
-e 's,btn btn-small,btn btn-default btn-sm,g' \
-e 's,btn btn-mini,btn btn-default btn-xs,g' \
-e 's,btn-default btn-\(xs\|sm\) btn-\(success\|danger\|warning\),btn-\2 btn-\1,g' \
-e 's,class_="btn",class_="btn btn-default",g' \
`hg mani`

changelog: remove quick_repo_menu code and style

AFAICS this hasn't worked since the switch to jQuery DataTables in
b8830c373681. And since nobody seems to miss it, I say we remove this.

js: drop some unused parts of YUI

YUI is now only used for autocompletion and statistics.

datatables: use jQuery DataTables instead of base.js YUI_datatable wrapper of YAHOO.widget.DataTable

Sorting and searching fixes by Mads Kiilerich.

pullrequests: make it possible to delete pull requests instead of commenting

Deleting a pull request might however be a bad idea - the reviews on the PR
will be lost.

comments: drop delayed activation of new comments

It is unclear what it fixed and we have tested this and haven't heard any complaints.

comments: avoid js string formatting of html template from DOM - avoid insecure naming

Multiple inline comment forms were only distinguished by the line number - not
by the filename.

Instead, just keep it simple and avoid trying to assign "globally" unique names
and use jQuery instead.

js: move .diff-collapse-button handling from the global base.js to the special diff js

Move it where it belongs and avoid adding more stuff to the global js later.

diff: get collapse target via .attr instead of .prop

Commit 3f017db297c4 was not fully tested and broke collapse/expand of diffs on
changesets. $button is not a link with a target and the target can thus not be
retrieved with .prop('target'); $button is just a span that happens to have a
custom attribute with the name 'target'.

We thus revert back to the old way of retrieving it with .attr('target'). (It
would perhaps be even better to use data attributes and name it data-target and
use .data('target') ...)

select2: show prefix matches first in #repo-switcher

Do as 4f4d2e899a02 introduced for the PR/changelog branch select2 boxes.

select2: be case insensitive when putting prefix matches first in result lists

The filtering is case insensitive.

files: fix Selection Link for multi-line selections

It broke in dacdea9fda2a when wrong casing in the translation lookup caused an
undefined value which didn't show up in the UI and thus made the link unusable.

js: add failure callback to ajaxGET

Like ajaxPOST.

codemirror: fix modeURL when using proxy prefix (Issue #160)

Modified by Mads to use request.script_name instead of h.url().

follow: various minor cleanup

A debug session gave no other result than this +0.1 cleanup ...

misc: remove alt-text from Gravatar images

The alternative text should convey the same information as the image,
something which the text "gravatar" does not. (In a context where the
gravatar is used on its own, the username could be a useful alt-text
- and title-text - but it's not apparent that this is ever the case.)

comments: fix warning when unloading page with unsaved comments

e87baa8f1c5b broke the existing check. Instead, only set the
comment-inline-form class when it actually is an inline form and use that class
for finding comments.

js: refactor AutoComplete functions to pass jQuery results around until DOM elements are passed to YUI

A small step forward that enables other refactorings.

comments: previous/next links should only be to first comment for a given line

Before, each comment had its own link to previous/next comment - also if it was
right before/after in the same thread. Comments right before/after in the same
thread are however easy to navigate to with scrolling or arrow keys or
pageup/down. Navigating to the next thread could take a lot of clicks to cycle
through every single comment ever made.

Instead, just show the link at the top of each thread and let the links
navigate between threads.

This also make long threads use less vertical space.

One downside of this change is that it for long threads takes a bit more work
to get from the last comment in a thread to the next thread.

comments: rework/rewrite javascript for inline comment handling

There shouldn't be any functional changes here, but the focus has been on doing
the right thing instead of looking at how it was before.

Incremental cleanup did not seem feasible. I think this is more readable and
maintainable than before ... at least for me.

Existing snippets has been reused when reimplementing. The new implementation
focus on being as simple as possible and well-structured. jQuery and data
attributes are used instead of custom implementations. Some existing functions
have been modified or renamed, others have been removed when they no longer
were needed.