Highlight @replies when I click on a comment

Question

I would like to be able to click on a comment and see replies to that user highlighted in the comment thread.

This would be especially helpful in longer meta discussions, but I can see it working well on the main sites too.

I'm aware that the conversational flow is impossible to programmatically understand. So I'm simply suggesting that when you click on a comment made by foo, all messages containing @foo will be highlighted.

Below is an example of what I'm talking about. Here I've clicked on the comment from hichris123. The selected comment is ringed in colour, with the replies to that user highlighted beneath.

_{I used Rene's user script to produce this screenshot}

Answer 1

Ok, until this gets implemented here is a user script to do that:

// ==UserScript==
// @name         Comment thread highlighter
// @namespace    http://meta.stackexchange.com/users/158100/rene
// @version      0.5
// @description  Higlight where OP is @mentioned
// @author       rene
// @match        *://*.stackexchange.com/questions/*
// @match        *://stackoverflow.com/questions/*
// @match        *://meta.stackoverflow.com/questions/*
// @grant        none
// ==/UserScript==

/*global $, unsafeWindow */

(function ($) {
    "use strict";
    var cc = $('div#mainbar'),
        color = '#CCFFCC',
        marker = 'data-comment-highlight';

    /* return the number of characters that match
       in a given string from a specific position
       ('@foobar comment', '@foo', 0, 7) -> 4
    */
    function matchCount(words, find, pos, len) {
        var t = 0,
            cnt = 0;
        for (t; t < len &&
                (pos + t < words.length) &&
                (words[pos + t] === find[t]);
                t = t + 1) {
            cnt = cnt + 1;
        }
        return cnt;
    }

    /* return the highest number of characters
       that match if find is searched for in words
    */
    function findAt(words, find) {
        var best = 0,
            i = words.indexOf('@'), // '@foo comment' ->0  'my@email.com' -> 2 'comment @foo' -> 8
            space;
        if (i > 0) {
            i = words.indexOf(' @', i - 1); // 'my@email.com' -> 0  'comment @foo' -> 8
        }
        while (i > -1) {
            space = words.indexOf(' ', i + 1);
            if (space === -1) {
                space = words.length;
            }
            // require at least 4 chars for a match
            if (space - i > 3) {
                best = Math.max(
                    matchCount(words, find, i, space - i),
                    best
                );
            }
            i = words.indexOf(' @', space);
            i = i + (i > -1 ? 1 : 0);
        }
        return best;
    }

    function buildAtUser(author) {
        var  mod = author.find('span').text(); // moderator diamond
        // remove spaces and remove the diamond
        return '@' + author.text().replace(' ', '').replace(mod, '');
    }

    /* subscribe to click higher in the dom to let this work
    when new comments gets loaded as well.
    */
    cc.on('click', 'span.comment-copy', function (e) {
        var target = $(e.target),
            src = target.closest('tr'), // comment row
            tbody = target.closest('tbody'), // all comments for the post
            at = buildAtUser(target.parent().find('a.comment-user')), // find this
            remove = src.hasClass(marker),
            found = false;


        tbody.find('tr.comment').each(function () {
            var tr = $(this),
                cmt = tr.find('span.comment-copy').text(),
                match = findAt(cmt, at); //find user in this comment

            // more than 1 chars is a match
            if (match > 1) {
                found = true;
                if (remove) {
                    tr.css('background-color', '');
                } else {
                    tr.css('background-color', color);
                }
            }
        });
        // only set our src once
        if (found) {
            if (remove) {
                src.removeClass(marker);
                src.css('border', '');
            } else {
                src.addClass(marker);
                src.css('border', color + ' solid');
            }
        }
    });
}($ || unsafeWindow.$));

If you click on a comment this script finds the author. It then walks-up the DOM to find the table body it is in and then find all comment table rows. Inside each row it finds the comment-copy and with a simple indexOf determines if the author is @-mentioned there. If so it sticks a background-color on the tablerow. You click the comment again to remove the highlighting.

New in version 0.5 is matching partial usernames and also works for comments that are loaded after clicking load more comments, code jslinted

This is tested in Chrome with TamperMonkey but should work in Firefox GreaseMonkey as well.

Answer 2

I disagree with this suggestion. It encourages having such threaded conversations in the first place, which you shouldn't be doing in comments. Do it in chat, instead, which already highlights reply-threads.