15
\$\begingroup\$

When doing a CR, it's important to be able to quickly find methods/classes/whatever in the source. Currently, it's just terrible as you get a couple of small scrolling views and the search takes way more time than anything else.

That's specific to CR, as other sites rarely need that much code. There should be a way to

  • open a code block in a new tab
  • or download all code blocks as a zip file
  • or git clone the whole question
  • or (at the very least) expand all code block to their full size

or anything else. Scrolling in a posting containing multiple scroll views is a [insert you favorite swear]. The current state of CR is simply unsuitable for CR.

\$\endgroup\$
  • \$\begingroup\$ Related : meta.stackexchange.com/questions/169119/code-block-tools \$\endgroup\$ – Marc-Andre Oct 1 '14 at 19:07
  • \$\begingroup\$ Related (in a way) : meta.stackexchange.com/questions/32625/… \$\endgroup\$ – Marc-Andre Oct 1 '14 at 19:08
  • 3
    \$\begingroup\$ Interesting feature request, but I often consider having to scroll a code smell in and of itself. \$\endgroup\$ – RubberDuck Oct 1 '14 at 19:16
  • 1
    \$\begingroup\$ What problem are you trying to solve exactly?? What is your "brilliant solution in brief", overall I think your request still needs simmering. But it's dangerous to go alone, so here's an answer by Shog9 about persuading a large, critical audience ;) \$\endgroup\$ – Vogel612 Oct 2 '14 at 9:12
  • \$\begingroup\$ @Vogel612 What problem? You've obviously done a few CRs here, so how can you ask? Can't you see that you can't see any significant part of the code? I'm not really talking about a solution, just proposing some ways how to solve a problem. And there's a problem here. \$\endgroup\$ – maaartinus Oct 2 '14 at 9:45
  • \$\begingroup\$ @maartinus I am sorry but I don't see the problem here, or at least not in the graveness that you see... Your "solution in the making" currently looks like a shortcircuit reaction to me :/ \$\endgroup\$ – Vogel612 Oct 2 '14 at 9:47
  • \$\begingroup\$ @Vogel612 OK, I'm cooling down... maybe someone else will explain to you what I mean. There are some upvoters, so I guess they understand me well. \$\endgroup\$ – maaartinus Oct 2 '14 at 9:50
7
\$\begingroup\$

I couldn't agree more. It's very important to copy-paste code into an IDE for a good, detailed, tested review. Unfortunately, copying code in scrolling boxes is not as easy as it should be. It would be nice if you could just click within a box and press Control A, but that's not how browsers work. That will select everything.

Something that could help is a simple button above each block of code to select the text inside the code block, so you can press Control C to copy it. I'd like to emphasize the point of selecting text as opposed to copying to clipboard directly. Copying to clipboard is more complicated and usually implemented by Flash, which I don't want to enable. Selecting text is totally harmless, and easy to do.

For a proof of concept, run the code snippet below. (Another example of the technique on one of my web-tools.)

jQuery.fn.selectText = function () {
    var element = this[0];
    var range;
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};   
$('button.select').click(function () {
  $('.editor pre').selectText();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="editor">
<button class="select">Select text</button>
<pre>
def get_data(dir)
  newest = get_most_recent_file_numbers(dir)

  data = {} # might even be able to get rid of this with clever use of Hash.new
  data = $file_prefixes.each do |type, file_prefix|
    file = File.open("#{dir}/#{file_prefix}_#{newest[type]}.csv")
    file.readline
    ???
  end
end
</pre>
</div>

\$\endgroup\$
  • \$\begingroup\$ It could be interesting to have a userscript to run this code on Code Review. I should check stackapp (or something similar) maybe it exist already ? \$\endgroup\$ – Marc-Andre Oct 3 '14 at 18:56
3
\$\begingroup\$

Your first three suggestions suffer from a big problem:

Code on CR is not organized in files!

This makes implementing the very top 3 "fixes" quite a mess, as you'd need to parse the question body for code-blocks and extract them to a separate (where you want to export it to)

Additionally git-cloning / git remote workspaces are not quite as easy as using them is. You're basically asking something close to impossible with the current form of SE in general.

Your "at the very least" point has a relatively simple fix, though.

Use a user-style (or similar), that overrides the max-height: 600px; style-rule for pre

\$\endgroup\$
  • \$\begingroup\$ "parse the question body for code-blocks" - I'd say, someone does it already, otherwise, there'd be no scroll views. It's the browser rendering code, I know. Concerning git: It'd a form I'd gladly use, but any of my first proposals would work, too. Do you really mean that every user should define their user style, just in order to be able to do a code review and don't feel like looking through a keyhole? \$\endgroup\$ – maaartinus Oct 2 '14 at 9:41
  • \$\begingroup\$ Actually, "open a code block in a new tab" should be doable with maybe 10 lines javascript. Find a pre block, add a button with an action. \$\endgroup\$ – maaartinus Oct 2 '14 at 9:47
  • 1
    \$\begingroup\$ @maaartinus no not "every" user, every user that wants this style... \$\endgroup\$ – Vogel612 Oct 2 '14 at 10:48
  • \$\begingroup\$ No, I really don't understand you. You're speaking about style, while I was speaking about an option to view the whole thing. The style should stay as it is... or even use smaller scroll views so we can get a better overview. You and probably some others might be able to do review by reading it linearly and then writing, but this does not work for me. \$\endgroup\$ – maaartinus Oct 3 '14 at 18:36
2
\$\begingroup\$

What I do when I want code from the question,

  • click the Edit link
  • Highlight what I want
  • Ctrl + C
  • then create a new blank file in Notepad++
  • Paste into new file
  • select language formatting

then I can easily read, re-write, change tabs to spaces, use the fancy Alt + Shift command to insert all the tabs to the code, or delete an extra tab on all lines of the code, etc., etc., etc.

\$\endgroup\$
  • \$\begingroup\$ Sometimes I copy it too, but too often I forget and waste my time with trying to scroll the miniatures. And often I don't want to edit anything, just browse and comment on the most terrible things. \$\endgroup\$ – maaartinus Oct 3 '14 at 19:25
  • \$\begingroup\$ then just close the tab and don't save it. or leave it open for the next one. I agree with you though it would be nice to have something that removes the scrolling code boxes, I do like Janos' answer! \$\endgroup\$ – Malachi Oct 3 '14 at 19:26
  • 1
    \$\begingroup\$ Yes, I know, just close... but I tend to confuse my windows, so I strongly prefer the view vs editor distinction. I tried to improve on his answer... including a few lines on each page would then do. I'm too lazy now to find out how to open a new window/tab. \$\endgroup\$ – maaartinus Oct 3 '14 at 19:30
2
\$\begingroup\$

janos' idea can be easily applied to all code snippets automaticaly. They all seem to start with <pre><code>, so I find them and add the button.

I'd personally prefer to open the snippet in a new tab/window, but this is the next step.

jQuery('pre > code').parent()
        .prepend(jQuery('<button>Select code</button>').click(function (event) {
    console.log(event.target);
    var element = event.target.nextSibling;
    var range;
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<pre>
<code>
def get_data(dir)
  lorem ipsum dolor sit amet, consectetur adipiscing elit.
</code>
</pre>

\$\endgroup\$
2
\$\begingroup\$

In the meantime, there have been projects doing exactly this to make it easier on the reviewer. From the top of my mind there are at least these two:

Both are written in the language they target by Edward. While they don't open the IDE for you, all relevant files are saved to your harddisk making the final step quite easy.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .