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

@@ @@ -54,49 +54,49 @@ def _safe_id(idstring): @@
     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']),

kallithea/public/less/kallithea-diff.less

➞

Show inline comments

@@ @@ -98,50 +98,48 @@ BIN_FILENODE = 6 @@
     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;

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;
+}

0 comments (0 inline, 0 general)