Bookmarklet for selecting code snippets on Code Review

Question

The following code will add to each code block a 'Select Code' button that will select the code belonging to that block. Please review for maintainability.

In order to use this, visit http://codereviewcommunity.github.io/CodeReviewBookmarklet/

javascript: if ($('button').length === 0) { 
  /* Stack Exchange does not do buttons, this does */
  $(".prettyprint").each( function()
  { 
    /* Thank you http://stackoverflow.com/a/2838358/7602 */
    function selectCode(el, win) 
    {
      win = win || window;
      var doc = win.document, sel, range;
      if (win.getSelection && doc.createRange) 
      {
        sel = win.getSelection();
        range = doc.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
      } 
      else if (doc.body.createTextRange) 
      {
        range = doc.body.createTextRange();
        range.moveToElementText(el);
        range.select();
      }
    }

    var buttonText  = 'Select Code',
        length      = buttonText.length,
        codeBlock   = this,
        $link       = $('<button type="button">' + buttonText + '</button><br>').click(function()
        {
          console.log( $(codeBlock).text().substring( length ) );
          selectCode(codeBlock);
        });
    $(codeBlock).prepend( $link );
  });
}

I have tested this on FF and Chrome and it works for me.

Answer 1

You inject the button using jQuery.prepend(), which inserts the button as the first child of the .prettyprint code block. Therefore, when the bookmarklet is invoked, and it selects the contents of the code block, the "Select Code" button is inadvertently included in the selection. I recommend using jQuery.before() instead.

Answer 2

Since StackExchange can refresh page contents dynamically, the following sequence of events is possible:

1. Page contains some code block(s).
2. Bookmarklet is invoked, adding the button to existing code block(s).
3. Page contents are updated, for example, with a new answer that contains a new code block.
4. Bookmarklet is invoked again, but it refuses add a Select Code button to the new code block.

Therefore, I suggest that the overall structure be changed such that it can be invoked again after a content update. Here is one approach (assuming that you also take my previous advice to use jQuery.before()):

javascript:$("pre.prettyprint").not("button + *").each(function() { 
    …

    var buttonText  = 'Select Code',
        length      = buttonText.length,
        codeBlock   = this,
        $link       = $('<button type="button">' + buttonText + '</button>').click(…);
    $(codeBlock).before( $link );
  });

I've changed the selector $(".prettyprint") to $("pre.prettyprint") because class-only selectors are reputed to be slower.

For the .not("button + *") next-sibling filter to work, the button must not be inserted with a <br> afterwards. The <br> is unnecessary anyway, since <pre> is a block element.