kallithea Changeset - 422671dd32df

Changeset - 422671dd32df

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

domruf - 8 years ago 2017-12-16 22:10:45
dominikruf@gmail.com

css: use pseudo-content trick to prevent diff line numbers from being pasted to text

When copy-pasting a diff from Chrome to a text editor, line numbers (on
separate lines) would be pasted as well. Even though 'user-select: none'
prevents text from being visually selected, in Chrome, the text still gets
copied to the clipboard when the user for example presses ctrl-c. (It worked in
Firefox.)

Instead, don't put the line numbers directly in the DOM, but put them in a data
attribute and render them as :before. That will give the same rendering as
before but prevent it from being copied.

(Firefox will however still add empty lines - that is how <pre> is hardcoded to
be rendered when pasting to text.)

3 files changed with 6 insertions and 3 deletions:

kallithea/lib/diffs.py

kallithea/public/less/kallithea-diff.less

kallithea/public/less/style.less

0 comments (0 inline, 0 general)

kallithea/lib/diffs.py

➞

Show inline comments

 # -*- 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/>.
 """
 kallithea.lib.diffs
 ~~~~~~~~~~~~~~~~~~~
 Set of diffing helpers, previously part of vcs
 This file was forked by the Kallithea project in July 2014.
 Original author and date, and relevant copyright and licensing information is below:
 :created_on: Dec 4, 2011
 :author: marcink
 :copyright: (c) 2013 RhodeCode GmbH, and others.
 :license: GPLv3, see LICENSE.md for more details.
 """
 import re
 import difflib
 import logging
 from tg.i18n import ugettext as _
 from kallithea.lib import helpers as h
 from kallithea.lib.vcs.exceptions import VCSError
 from kallithea.lib.vcs.nodes import FileNode, SubModuleNode
 from kallithea.lib.vcs.backends.base import EmptyChangeset
 from kallithea.lib.utils2 import safe_unicode
 log = logging.getLogger(__name__)
 def _safe_id(idstring):
     """Make a string safe for including in an id attribute.
     The HTML spec says that id attributes 'must begin with
     a letter ([A-Za-z]) and may be followed by any number
     of letters, digits ([0-9]), hyphens ("-"), underscores
     ("_"), colons (":"), and periods (".")'. These regexps
     are slightly over-zealous, in that they remove colons
     and periods unnecessarily.
     Whitespace is transformed into underscores, and then
     anything which is not a hyphen or a character that
     matches \w (alphanumerics and underscore) is removed.
     """
     # Transform all whitespace to underscore
     idstring = re.sub(r'\s', "_", idstring)
     # Remove everything that is not a hyphen or a member of \w
     idstring = re.sub(r'(?!-)\W', "", idstring).lower()
     return idstring
 def as_html(table_class='code-difftable', line_class='line',
             old_lineno_class='lineno old', new_lineno_class='lineno new',
             no_lineno_class='lineno',
             code_class='code', enable_comments=False, parsed_lines=None):
     """
     Return given diff as html table with customized css classes
     """
     def _link_to_if(condition, label, url):
         """
         Generates a link if condition is meet or just the label if not.
         """
         if condition:
-            return '''<a href="%(url)s">%(label)s</a>''' % {
+            return '''<a href="%(url)s" data-pseudo-content="%(label)s"></a>''' % {
                 'url': url,
                 'label': label
+            }
         else:
             return label
     _html_empty = True
     _html = []
     _html.append('''<table class="%(table_class)s">\n''' % {
         'table_class': table_class
     })
     for diff in parsed_lines:
         for line in diff['chunks']:
             _html_empty = False
             for change in line:
                 _html.append('''<tr class="%(lc)s %(action)s">\n''' % {
                     'lc': line_class,
                     'action': change['action']
                 })
                 anchor_old_id = ''
                 anchor_new_id = ''
                 anchor_old = "%(filename)s_o%(oldline_no)s" % {
                     'filename': _safe_id(diff['filename']),
                     'oldline_no': change['old_lineno']
+                }
                 anchor_new = "%(filename)s_n%(oldline_no)s" % {
                     'filename': _safe_id(diff['filename']),
                     'oldline_no': change['new_lineno']
+                }
                 cond_old = (change['old_lineno'] != '...' and
                             change['old_lineno'])
                 cond_new = (change['new_lineno'] != '...' and
                             change['new_lineno'])
                 no_lineno = (change['old_lineno'] == '...' and
                              change['new_lineno'] == '...')
                 if cond_old:
                     anchor_old_id = 'id="%s"' % anchor_old
                 if cond_new:
                     anchor_new_id = 'id="%s"' % anchor_new
                 ###########################################################
                 # OLD LINE NUMBER
                 ###########################################################
                 _html.append('''\t<td %(a_id)s class="%(olc)s" %(colspan)s>''' % {
                     'a_id': anchor_old_id,
                     'olc': no_lineno_class if no_lineno else old_lineno_class,
                     'colspan': 'colspan="2"' if no_lineno else ''
                 })
                 _html.append('''%(link)s''' % {
                     'link': _link_to_if(not no_lineno, change['old_lineno'],
                                         '#%s' % anchor_old)
                 })
                 _html.append('''</td>\n''')
                 ###########################################################
                 # NEW LINE NUMBER
                 ###########################################################
                 if not no_lineno:
                     _html.append('''\t<td %(a_id)s class="%(nlc)s">''' % {
                         'a_id': anchor_new_id,
                         'nlc': new_lineno_class
                     })
                     _html.append('''%(link)s''' % {
                         'link': _link_to_if(True, change['new_lineno'],
                                             '#%s' % anchor_new)
                     })
                     _html.append('''</td>\n''')
                 ###########################################################
                 # CODE
                 ###########################################################
                 comments = '' if enable_comments else 'no-comment'
                 _html.append('''\t<td class="%(cc)s %(inc)s">''' % {
                     'cc': code_class,
                     'inc': comments
                 })
                 _html.append('''\n\t\t<div class="add-bubble"><div>&nbsp;</div></div><pre>%(code)s</pre>\n''' % {
                     'code': change['line']
                 })
                 _html.append('''\t</td>''')
                 _html.append('''\n</tr>\n''')
     _html.append('''</table>''')
     if _html_empty:
         return None
     return ''.join(_html)
 def wrap_to_table(html):
     """Given a string with html, return it wrapped in a table, similar to what
     DiffProcessor returns."""
     return '''\
               <table class="code-difftable">
                 <tr class="line no-comment">
                 <td class="lineno new"></td>
                 <td class="code no-comment"><pre>%s</pre></td>
                 </tr>
               </table>''' % html
 def wrapped_diff(filenode_old, filenode_new, diff_limit=None,
                 ignore_whitespace=True, line_context=3,
                 enable_comments=False):
     """
     Returns a file diff wrapped into a table.
     Checks for diff_limit and presents a message if the diff is too big.
     """
     if filenode_old is None:
         filenode_old = FileNode(filenode_new.path, '', EmptyChangeset())
     op = None
     a_path = filenode_old.path # default, might be overriden by actual rename in diff
     if filenode_old.is_binary or filenode_new.is_binary:
         html_diff = wrap_to_table(_('Binary file'))
         stats = (0, 0)
     elif diff_limit != -1 and (
             diff_limit is None or
             (filenode_old.size < diff_limit and filenode_new.size < diff_limit)):
         raw_diff = get_gitdiff(filenode_old, filenode_new,
                                 ignore_whitespace=ignore_whitespace,
                                 context=line_context)
         diff_processor = DiffProcessor(raw_diff)
         if diff_processor.parsed: # there should be exactly one element, for the specified file
             f = diff_processor.parsed[0]
             op = f['operation']
             a_path = f['old_filename']
         html_diff = as_html(parsed_lines=diff_processor.parsed, enable_comments=enable_comments)
         stats = diff_processor.stat()
     else:
         html_diff = wrap_to_table(_('Changeset was too big and was cut off, use '
                                'diff menu to display this diff'))
         stats = (0, 0)
     if not html_diff:
         submodules = filter(lambda o: isinstance(o, SubModuleNode),
                             [filenode_new, filenode_old])
         if submodules:
             html_diff = wrap_to_table(h.escape('Submodule %r' % submodules[0]))
         else:
             html_diff = wrap_to_table(_('No changes detected'))
     cs1 = filenode_old.changeset.raw_id
     cs2 = filenode_new.changeset.raw_id
     return cs1, cs2, a_path, html_diff, stats, op
 def get_gitdiff(filenode_old, filenode_new, ignore_whitespace=True, context=3):
     """
     Returns git style diff between given ``filenode_old`` and ``filenode_new``.
     """
     # make sure we pass in default context
     context = context or 3
     submodules = filter(lambda o: isinstance(o, SubModuleNode),
                         [filenode_new, filenode_old])
     if submodules:
         return ''
     for filenode in (filenode_old, filenode_new):
         if not isinstance(filenode, FileNode):
             raise VCSError("Given object should be FileNode object, not %s"
                 % filenode.__class__)
     repo = filenode_new.changeset.repository
     old_raw_id = getattr(filenode_old.changeset, 'raw_id', repo.EMPTY_CHANGESET)
     new_raw_id = getattr(filenode_new.changeset, 'raw_id', repo.EMPTY_CHANGESET)
     vcs_gitdiff = get_diff(repo, old_raw_id, new_raw_id, filenode_new.path,
                            ignore_whitespace, context)
     return vcs_gitdiff
 def get_diff(scm_instance, rev1, rev2, path=None, ignore_whitespace=False, context=3):
     """
     A thin wrapper around vcs lib get_diff.
     """
     try:
         return scm_instance.get_diff(rev1, rev2, path=path,
                                      ignore_whitespace=ignore_whitespace, context=context)
     except MemoryError:
         h.flash('MemoryError: Diff is too big', category='error')
         return ''
 NEW_FILENODE = 1
 DEL_FILENODE = 2
 MOD_FILENODE = 3

kallithea/public/less/kallithea-diff.less

➞

Show inline comments

 /* bootstrap progress bar has margin-bottom we don't want that in files list */
 .cs_files .progress {
   margin-bottom: 0;
+}
 /* progress bars should be aligned right */
 .cs_files .changes {
   float: right;
   color: #577632;
+}
 /* colors for changes */
 .cs_files .changes .added {
   color: inherit;
   background-color: #BBFFBB;
   float: left;
   text-align: center;
   font-size: 9px;
   padding: 2px 0px 2px 0px;
+}
 .cs_files .changes .deleted {
   background-color: #FF8888;
   float: left;
   text-align: center;
   font-size: 9px;
   padding: 2px 0px 2px 0px;
+}
 /* binary
 NEW_FILENODE = 1
 DEL_FILENODE = 2
 MOD_FILENODE = 3
 RENAMED_FILENODE = 4
 CHMOD_FILENODE = 5
 BIN_FILENODE = 6
 */
 .changes .bin {
   background-color: #BBFFBB;
   float: left;
   text-align: center;
   font-size: 9px;
   padding: 2px 0px 2px 0px;
+}
 /* added binary */
 .changes .bin.bin1 {
   background-color: #BBFFBB;
+}
 /* deleted binary*/
 .changes .bin.bin2 {
   background-color: #FF8888;
+}
 /* mod binary*/
 .changes .bin.bin3 {
   background-color: #DDDDDD;
+}
 /* rename file*/
 .changes .bin.bin4 {
   background-color: #6D99FF;
+}
 /* chmod file*/
 .changes .bin.bin5 {
   background-color: #6D99FF;
+}
 /* center collapse button */
 .diff-collapse {
   text-align: center;
   margin-bottom: 15px;
+}
 .code-difftable {
   /* the whole line should be colored */
   border-collapse: collapse;
   border-radius: 0px !important;
   width: 100%;
   /* line coloring */
   .context {
     background: none repeat scroll 0 0 #DDE7EF;
     color: #999;
+  }
   .add {
     background: none repeat scroll 0 0 #DDFFDD;
+  }
   .add ins {
     background: none repeat scroll 0 0 #AAFFAA;
     text-decoration: none;
+  }
   .del {
     background: none repeat scroll 0 0 #FFDDDD;
+  }
   .del del {
     background: none repeat scroll 0 0 #FFAAAA;
     text-decoration: none;
+  }
   /* tabs */
   td.code pre u:before {
     content: "\21a6";
     display: inline-block;
     width: 0;
+  }
   /* CR */
   td.code pre u.cr:before {
     content: "\21a4";
     display: inline-block;
+  }
   /* whitespace characters */
   td.code pre u {
     color: rgba(0, 0, 0, 0.3);
+  }
   /* trailing spaces */
   td.code pre i {
     border-style: solid;
     border-width: 0 0 0 1px;
     border-color: rgba(0, 0, 0, 0.3);
+  }
   /** LINE NUMBERS **/
   .lineno {
     padding-left: 2px;
     padding-right: 2px !important;
     width: 30px;
     -moz-user-select: none;
     -webkit-user-select: none;
     border-right: 1px solid #CCC !important;
     border-left: 0px solid #CCC !important;
     border-top: 0px solid #CCC !important;
     border-bottom: none !important;
     vertical-align: middle !important;
     text-align: center;
+  }
   .lineno.new {
     text-align: right;
+  }
   .lineno.old {
     text-align: right;
+  }
   .lineno a {
     color: #aaa !important;
     font-size: 11px;
     font-family: @font-family-monospace;
     line-height: normal;
     padding-left: 6px;
     padding-right: 6px;
     display: block;
+  }
   .line:hover .lineno a {
     color: #333 !important;
+  }
   /** CODE **/
   .code {
     display: block;
+  }
   .code pre {
     border: 0;
     padding: 0;
     margin: 0;
     background: none;
     min-height: 17px;
     line-height: 17px;
     white-space: pre-wrap;
     word-break: break-all;
+  }
   /* leading +/- on changed lines */
   .del .code pre:before {
     content: "-";
     color: #800;
+  }
   .add .code pre:before {
     content: "+";
     color: #080;
+  }
   .code pre:before {
     content: " ";
     margin: 0 2px;
+  }
+}
 /* comment bubble */
 .add-bubble {
   position: relative;
   display: none;
   float: left;
   width: 0px;
   height: 0px;
   left: -8px;
   box-sizing: border-box;
+}
 /* comment bubble, only visible when in a commentable diff */
 .commentable-diff tr.line.add:hover td .add-bubble,
 .commentable-diff tr.line.del:hover td .add-bubble,
 .commentable-diff tr.line.unmod:hover td .add-bubble {
   display: block;
   z-index: 1;
+}
 .add-bubble div {
   background: #577632;
   width: 16px;
   height: 16px;
   cursor: pointer;
   padding: 0 2px 2px 0.5px;
   border: 1px solid #577632;
   border-radius: 3px;
   box-sizing: border-box;
+}
 .add-bubble div:before {
   font-size: 14px;
   color: #ffffff;
   font-family: "kallithea";
   content: '\1f5ea';
+}
 .add-bubble div:hover {
   transform: scale(1.2, 1.2);
+}
 /* file diff icons */
 .icon-diff-modified:before {
   color: #d0b44c;
+}
 .icon-diff-removed:before {
   color: #bd2c00;
+}
 .icon-diff-added:before {
   color: #6cc644;
+}
 .icon-diff-renamed:before {
   color: #677a85;
+}

kallithea/public/less/style.less

➞

Show inline comments

 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 {
   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 .navbar-brand {
   font-size: 20px;
   padding-top: 12px;
+}
 nav.navbar.mainmenu .navbar-brand .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%;
+}
 /* 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;
+}
 /* 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;
+  }
+}
 /* every direct child of a main panel, that is not .panel-heading, should auto
  * overflow to prevent overflowing of elements like text boxes and tables */
 #main > .panel > :not(.panel-heading) {
   overflow-x: auto;
   min-height: 0.01%;
+}
 /* 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 {
   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;
+}
 .form-group > label {
   float: left;
+}
 .dt_repo_pending {
   opacity: 0.5;
+}
 div.panel-primary {
   border: none;
+}
 div.panel div.panel-heading {
   font-size: 14px;
   font-weight: 700;
+}
 #content div.panel ul.pagination {
   margin: 10px 0 0 0;
+}
 #content div.panel ul.pagination > li > a,
 #content div.panel ul.pagination > li > span {
   background: #ebebeb url("../images/pager.png") repeat-x;
   color: #4A4A4A;
   font-weight: 700;
   border-top: 1px solid #dedede;
   border-left: 1px solid #cfcfcf;
   border-bottom: 1px solid #c4c4c4;
   border-right: 1px solid #cfcfcf;
+}
 #content div.panel ul.pagination > li.active > span,
 #content div.panel ul.pagination > li:hover > a,
 #content div.panel ul.pagination > li:active > a {
   background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
   border-top: 1px solid #ccc;
   border-left: 1px solid #bebebe;
   border-bottom: 1px solid #afafaf;
   border-right: 1px solid #bebebe;
   color: #515151;
+}
 /* remove margin below footer */
 .navbar.footer {
   margin-bottom: 0;
+}

0 comments (0 inline, 0 general)