A select link/button for [code] blocks (SMF patch)

[PowerGlove]

I did a similar patch a while ago to add a "Copy" button to [code] blocks. I figured that it would get accepted pretty quickly, but I'm glad that it wasn't, because I think that this new patch is a bit nicer. The old patch had two problems with it (that I can think of):

(1) Programmatic access to the clipboard is something that I expect to get more and more fragile over time. There's already some not-completely-reliable browser logic that stops the clipboard from being interacted with in non-user-initiated contexts. So, rather than implement something that I expect will pick up more and more cross-browser weirdness as time goes on, I think it's better to solve basically the same problem (how finicky it is to copy-paste [code], especially on mobile), but with something that's likely to behave more reliably across more browsers.

(2) The previous patch added the button whether JavaScript was enabled or not. This patch only adds the button when JavaScript is available. Not a big deal, but, it is kind of goofy for the button to be there if it's not going to do anything when you click on it. Better to just not even show it in those situations.

Compared to the version that people helped me test, the only user-facing change I've made is to tweak the opacity (so that it's distinct from the text it's adjacent to, and so that it's a little softer/quieter in appearance):



(That's an image, above. You tried to use that select link/button, didn't you?)

Code: (Where's the code?)

No diff(s) this time... I'm experimenting with a new way to do certain kinds of patches, and this is one of those patches: I've sent the code to theymos.

[theymos]

PowerGlove sent me a different way of doing this, which is live now, but it's sort of hidden: if you click the blue "Code:" text immediately before the actual code block, then it'll select the whole code block.

Thanks to PowerGlove for the patch!

[SquirrelJulietGarden]

PowerGlove sent me a different way of doing this, which is live now, but it's sort of hidden: if you click the blue "Code:" text immediately before the actual code block, then it'll select the whole code block.

Thanks to PowerGlove for the patch!

Great! Thanks theymos.

I try to test and see that there are two ways.

First way is like you guided: Click on Code before a box of code block, and content will be selected.
Second way is clicking on the box, then the content in the code block will be selected too.

Code:

Copy

It is clearer for an example if I centralize the code block. Then I can select the content by clicking on the block at the left corner.

Code: (secondway)

copy

[ibminer]

First way is like you guided: Click on Code before a box of code block, and content will be selected.
Second way is clicking on the box, then the content in the code block will be selected too.

Looks like only one way to me, the centering just moves the "code" text to the middle, but it is still allowing the click anywhere on that top line/header of the code box:




Good to see you still around PG, I thought about you not too long ago when I was watching pixels with the family, great movie.

[noorman0]

-snip-
Second way is clicking on the box, then the content in the code block will be selected too.

-snip-
It is clearer for an example if I centralize the code block. Then I can select the content by clicking on the block at the left corner.

Code: (secondway)

copy

Actually, the second method you mentioned doesn't work for me. Double- or tripple-clicking only helps select the current line. I mean, does that also work if the code block contains more than 1 line of contents?

[PowerGlove]

Looks like only one way to me, the centering just moves the "code" text to the middle, but it is still allowing the click anywhere on that top line/header (...)

Yup. The below excerpt is from the patch PM:

One little quirk is that that div has more horizontal extent than the header text, so, while people will tend to think of this feature as being tied specifically to the header text, it actually affects all of the space immediately above the contents of a [code] block (which, accidentally, will probably help discoverability).

Good to see you still around PG, I thought about you not too long ago (...)

Yep. I'm still kind of around... I thought about you, too, recently. (I was looking at the Merit Poker code the other day, which I haven't touched in a little over a year, and I gave myself the giggles pretty good listening to the audio for the /virus easter egg, and that "Wilhelm scream" that plays when someone goes bust.)

I do miss this place. Unfortunately, it still makes just as much sense for me to throw myself at Bitcointalk as it did ~4 months ago when theymos and I arrived at the decision to part ways (which is to say: it doesn't make much sense at all). But, old habits die hard, and I expect I'll continue to once-in-a-while get an urge to contribute something (sometimes those improvements will be announced, like with this small code-selection patch, and sometimes they'll be too insignificant for that, like with the very small ignore-related bug I fixed at around the same time).


(I don't want to turn this post into a diary entry, but in case anyone is wondering what I'm spending my energy on these days: I've more-or-less focused my attention back on an old PLT-related idea that I was pursuing just before I joined Bitcointalk. I really enjoy working on compilers and so on, and they often present really interesting problems, especially when I approach them in the dependency-free, self-hosted, trusting-trust-proof way that I've been closing in on for the last 15 years or so. I was thinking of occasionally sharing/posting-about some of the bootstrapping problems that I've bumped into, and how fascinating and fundamental their solutions can be, but I don't think that there's much of an audience for that kind of exposition nowadays. Even before AI, I struggled mightily to find fellow programmers possessed of any serious desire to make use of and build nothing but deeply-understood things. I struggled even to just find people who were willing to think critically about the sacrifices that they had been taught to make at the altar of productivity. In the AI age, the "comprehension optional" style has really taken root, and that school of thought is anathema to someone like me. So, instead of depressing myself further by trying and failing to find the few remaining members of my tribe, I'll for now just quietly pursue my interests and keep the bulk of my thinking unshared.)

[ibminer]

Yup. The below excerpt is from the patch PM:~

Makes sense, I'd guess it probably helps mobile use of the site as well, to give a slightly broader range of where it could be tapped.

~Yep. I'm still kind of around... I thought about you, too, recently. (I was looking at the Merit Poker code the other day, which I haven't touched in a little over a year, and I gave myself the giggles pretty good listening to the audio for the /virus easter egg, and that "Wilhelm scream" that plays when someone goes bust.)

LoL, the easter eggs were awesome. Looking back, I wish I would have put some things in the design(s) on the collector's decks that had some sense of humor, but I was overly obsessed on trying to make every detail perfect. The /virus always reminded me of a video meme I had seen, not sure if I sent it before but it's pretty funny.

I do miss this place. Unfortunately, it still makes just as much sense for me to throw myself at Bitcointalk as it did ~4 months ago
~

I don't blame you. Without going into detail and derailing this topic with my own diary entry, I feel like I need to do some soul searching to re-evaluate my priorities in life.

As for PLT, that's some deep stuff man. I still struggle with coding in various languages, and you're apparently creating them! 

I worry AI is going to wipe out most developers, I think there's still a need for humans currently, but already much less, and over time it could eliminate humans all together, which is scary to me. Not completely because of the intelligence aspect (relating specifically to coding here, there's a an entirely different conversation to be had about fears related to the general intelligence of AI overall), but mainly because of the ability to manipulate that intelligence by whatever power controls it, combined with what you mentioned about comprehension, it's scary to think people could just be copy/pasting code from AI and using it, without really understanding what has been put in, and again my fear goes back to who may be controlling and training these models. We still have people who can comprehend and review code, but over time, why would people continue to learn and understand it if they can just use a [controlled] AI model to create the select link for a code block? (<- See how I brought it back on topic? ) And then, what could that model end up injecting and/or messing up?  Anyway, I'm probably still off-topic, but I wish you the best with your project!

[alegotardo]

(That's an image, above. You tried to use that select link/button, didn't you?)

If I still using the light theme on bitcointalk, maybe you would have caught me. But answer me honestly... do not your eyes burn with so much white background? All the good programmers that I know are fans of the dark theme in everything of possible

PowerGlove sent me a different way of doing this, which is live now, but it's sort of hidden: if you click the blue "Code:" text immediately before the actual code block, then it'll select the whole code block.

Thanks to PowerGlove for the patch!

It is incredible how we get so happy and silly over such simple things that completely change our life.
My wife just asked me why I was smiling; I tried to explain to her, but it was in vain... only those who have suffered from "selection -> copying" know how much of a "game-changer" this is for SMF.

[joker_josue]

PowerGlove sent me a different way of doing this, which is live now, but it's sort of hidden: if you click the blue "Code:" text immediately before the actual code block, then it'll select the whole code block.

Thanks to PowerGlove for the patch!

Didn't you test this situation with a text/tag next to the box? 
I'm almost certain I saw something like "Select" in those code boxes a few days ago. 

Anyway, I think that's a good "hidden feature." That everyone knows about now.

[shahzadafzal]

PowerGlove sent me a different way of doing this, which is live now, but it's sort of hidden: if you click the blue "Code:" text immediately before the actual code block, then it'll select the whole code block.

Thanks to PowerGlove for the patch!

Yes, it’s working now, but I still don’t fully understand the logic behind keeping it hidden. We may even forget that the hidden copy/select option exists. :p

I did a similar patch a while ago to add a "Copy" button to [code] blocks. I figured that it would get accepted pretty quickly, but I'm glad that it wasn't, because I think that this new patch is a bit nicer. The old patch had two problems with it (that I can think of):

Just a small suggestion since we are only selecting the code and letting the user perform the copy command, why not make it work when clicking anywhere inside the code block? For example, clicking the code block itself could select the whole block, instead of requiring users to click the small “Code” header.

Example:



Basically, the same logic currently applied here on codeheader: Code:

could also be applied to the code block itself.

This way, users will not forget about the feature, no additional button needs to be added, and since we are already clicking anyway to copy/select the content, it would feel more natural.

[ibminer]

~why not make it work when clicking anywhere inside the code block?

Because then you wouldn't be able to partially select anything in the block... every click would select all.

Yes, it’s working now, but I still don’t fully understand the logic behind keeping it hidden. We may even forget that the hidden copy/select option exists. :p

I'm not entirely sure here, but I assume it's an aesthetic reason?  

If I were going to add something, I'd probably do something like:

Code:

<div class="codeheader" style="cursor: help;" title="(Click/tap to select contents)">
  Code:
  <span style="float: right;">[select all]</span>
</div>

This would require the same 93% or maybe 94% width applied to the .codeheader CSS:

Code:

.quoteheader, .codeheader {
  color: #476C8E;
  text-decoration: none;
  font-style: normal;
  font-weight: bold;
  font-size: 10px;
  line-height: 1.2em;
  margin-left: 6px;
  width: 94%;
}

.. or separately

Code:

.codeheader {
  width: 94%;
}

To end up with something like:

[shahzadafzal]

~why not make it work when clicking anywhere inside the code block?

Because then you wouldn't be able to partially select anything in the block... every click would select all.

Well, that’s a small tweak and can easily be fixed. I just created a quick demo in 5 minutes 🙂

https://shahzadafzal.github.io/bitcointalk-code-select-demo/

Clicking the header will select the entire code block, while manually selecting specific text still works as well 🙂

[ibminer]

Well, that’s a small tweak and can easily be fixed. I just created a quick demo in 5 minutes 🙂
~

It's a thought but this feels messy on mobile. It also loses the selection if using the scroll bar. When double/triple-clicking, a flash happens on the entire code block... all of these things just feel a a little rough and annoying. I also don't think theymos would really want to dump more javascript into it. There's probably other reasons I'm not thinking of to not try and alter/effect the entire code box.

edit: And did you really need to advertise an exchange in the code?? lol 

[pandakitty]

Well, that’s a small tweak and can easily be fixed. I just created a quick demo in 5 minutes 🙂

https://shahzadafzal.github.io/bitcointalk-code-select-demo/

Clicking the header will select the entire code block, while manually selecting specific text still works as well 🙂

I find quite annoying when websites do that. It doesn't look great on mobile and the UX is terrible. Sometimes I would missclick on a code block and, with everything selected, it doesn't feel right to just drag across the code to what I actually want to copy, therefore I would click outside to unselect everything first and then drag what I want to select.

[LoyceV]

Here's an edge case: I tried to use this from a PM, to paste code into xterm. Selecting works, but that doesn't put it under my "middle mouse paste buffer", so pressing my middle mouse button on my console still pastes the previously selected text. I still had to manually select the code to be able to do what I need (CTRL-V doesn't work for this).

[PowerGlove]

Makes sense, I'd guess it probably helps mobile use of the site as well, to give a slightly broader range of where it could be tapped.

Yep. (Though, like with the helps-with-discoverability [1] thing, the helps-with-mobile thing is just a happy accident.)

[1] I mean, I realize that what would actually help with discoverability is something more than just style="cursor: help;" and title="(Click/tap to select contents)" being placed on the header div. But, several things were tried, and, on balance, I think that the way it currently is is fine.

I don't blame you. Without going into detail and derailing this topic with my own diary entry, I feel like I need to do some soul searching to re-evaluate my priorities in life.

Word. I did a lot of that toward the end of last year. That is, trying to get to the bottom of what I'm doing and why I'm doing it...

The mental lens that I eventually favored was to imagine what PowerGlove-circa-2056 might want to say to PowerGlove-circa-2026 on the subject of how they wish their time had been spent.

(I hope that you already know this, but, if you ever feel like chatting about life and stuff, I'm always just a PM away; though, I'm logging in less-and-less frequently these days, and I've turned off e-mailed PM notifications, so don't be offended if I sometimes leave you hanging for a long time.)

I worry AI is going to (...)

Yep. I don't have the energy to get into it right now, but, I have a very negative overall opinion about AI.

All I know is, we seem to have been steadily making the computing world worse for around 30 years now (from my perspective I mean; obviously, there are very many people who think that things have been getting better and better). If I think in decade-long intervals, like (a) 1996 -> 2006, (b) 2006 -> 2016, (c) 2016 -> 2026, and (d) 2026 -> 2036, I get depressed wondering what (d) is going to be like after witnessing how increasingly poorly (a), (b), and (c) went. Obviously, there are going to be bright spots in (d), just like there were in (a), (b), and (c), with Bitcoin itself being perhaps the best example of one, but, the overall trend I've noticed is for non-user control (in general) to increase, for user sophistication (in general) to decrease, and for personal-computing freedoms to become either lost, forgotten, or just buried under too much complexity.

If I still using the light theme on bitcointalk, maybe you would have caught me. But answer me honestly... do not your eyes burn with so much white background? All the good programmers that I know are fans of the dark theme in everything of possible

Haha. Yeah. I'm always on some kind of ephemeral/non-persistent OS, and I tend to leave security-unrelated settings be, so Bitcointalk for me is almost always in its unmessed-with form. But, like you say, I nearly always write code in something that supports a light-text-on-a-dark-background color scheme (mostly just Sublime Text or similar; I used to basically live in Visual Studio paired with Visual Assist by Whole Tomato Software, but, that was a long time ago, and I've been complexity-shedding for many years now; if I think all the way back to my DOS programming days, I remember a lot of white-text-on-a-blue-background, so "dark mode", I guess; if I think back to my early-Windows programming days, I remember a lot of dark-text-on-a-light-background, so "light mode", I guess; then things started to go "dark mode" again; I suppose I can get along with either).

I'm almost certain I saw something like "Select" in those code boxes a few days ago. 

Yup. You probably caught theymos testing things.

Yes, it’s working now, but I still don’t fully understand the logic behind keeping it hidden. We may even forget that the hidden copy/select option exists. :p

I'm not entirely sure here, but I assume it's an aesthetic reason?

More or less. We tried putting it on the left (similar to what's in the OP). We tried putting it on the right (similar to what you suggested). There are some subtle and not-so-subtle problems with either approach. I won't unpack the whole enchilada, but, for the left-aligned approach I was never really happy with what a large visual change it ends up being for such a small feature (I think I most recently noticed this while looking at all the one-after-another [code] blocks in the BCA25 voting thread, and thinking, "Those code-selection links make things look too busy; they draw too much attention for such a small, not-often-used convenience feature"). For the right-aligned approach, I had less of a visual-attention-to-usefulness ratio problem, but there's a complication with how it ends up looking from within [center] tags, and likely some other contexts, too, and fussing the CSS to iron out all the cross-browser jank is work that I really dislike doing. So, I just went with putting the feature on an existing element and hoping that the poor discoverability of that would be helped by the cursor-change and the tooltip (and by users mentioning it occasionally).

Here's an edge case: I tried to use this from a PM, to paste code into xterm. Selecting works, but that doesn't put it under my "middle mouse paste buffer", so pressing my middle mouse button on my console still pastes the previously selected text. I still had to manually select the code to be able to do what I need (CTRL-V doesn't work for this).

Nice find. I'll maybe look into this more deeply at some point, but, for now, my thoughts are:

(*) There's a chance that middle-click-pasting will eventually be phased out of future desktop environments and browsers (at least, that's the impression I got by quickly skimming this search result).

(*) There's probably not a lot that I can do to try to fix this (for example, if I look at the MDN documentation for the selectNodeContents API, and I play around with the live example near the bottom of that page, I see that the same thing is happening there, too; as in, the test paragraph has to be manually selected for it to be placed into the middle-click-paste buffer). It's probable that if I investigate this issue I'll find that there's something in Firefox's code (as an example) that's keeping track of a distinction between user-made selections and script-made selections (and defeating that kind of thing is normally either impossible to do from within the browser's scripting sandbox, or if it is possible, then it'll likely require some sort of ugly/brittle hack, or the use of a not-well-supported API).


That's me done for a bit, I think. I'll log in again in a few weeks. Keep well, everyone.

[LoyceV]

Nice find. I'll maybe look into this more deeply at some point

Like I said, it's an edge case. Don't worry about it

(*) There's a chance that middle-click-pasting will eventually be phased out of future desktop environments and browsers (at least, that's the impression I got by quickly skimming this search result).

WTF! Bye bye Gnome and Mozilla if that happens.

It's commonly used for other actions or more often getting clicked by accident, and dumping your entire clipboard while having no indication that this will happen is nothing short of a dumpster fire.

I use this feature all the time, even for copying the URL I just quoted. What's with removing ancient functionality just because n00bs don't know what they're doing? Stay with Microsoft if you can't handle features!

The article makes it seem worse than it really is. All they seem to be doing is moving that functionality from being the default to an option that you enable.

Even if that's true, it's part of a bigger "problem": more and more useful features are changed default. A few times per year I have to search how to restore Firefox default behaviour again after an update. The latest gimmick: some tab group thing inside my right-mouse menu right where "open in new window" used to be. Don't mess with muscle memory!

There's probably not a lot that I can do to try to fix this

That's okay. I always thought of this as some ancient relic with specific use cases. The middle-mouse-paste is even useful on websites that disable CTRL-V (and I still don't get why my browser obeys that!).

[shahzadafzal]

edit: And did you really need to advertise an exchange in the code?? lol 

I didn't notice that I was trying to test it with already existing code blocks in my messages and used the same for that code demo :p

Yes, it’s working now, but I still don’t fully understand the logic behind keeping it hidden. We may even forget that the hidden copy/select option exists. :p

I'm not entirely sure here, but I assume it's an aesthetic reason?

More or less. We tried putting it on the left (similar to what's in the OP). We tried putting it on the right (similar to what you suggested). There are some subtle and not-so-subtle problems with either approach. I won't unpack the whole enchilada, but, for the left-aligned approach I was never really happy with what a large visual change it ends up being for such a small feature (I think I most recently noticed this while looking at all the one-after-another [code] blocks in the BCA25 voting thread, and thinking, "Those code-selection links make things look too busy; they draw too much attention for such a small, not-often-used convenience feature"). For the right-aligned approach, I had less of a visual-attention-to-usefulness ratio problem, but there's a complication with how it ends up looking from within [center] tags, and likely some other contexts, too, and fussing the CSS to iron out all the cross-browser jank is work that I really dislike doing. So, I just went with putting the feature on an existing element and hoping that the poor discoverability of that would be helped by the cursor-change and the tooltip (and by users mentioning it occasionally).

Wow, that’s what we call real attention to detail. Well done, PowerGlove! You’re absolutely right.

I completely agree that this feature will probably be used <5% of the time compared to all existing code blocks and even then, mostly in signature campaigns where we only use it once in a while.

Still, it’s genuinely nice to see you and theymos continuously pushing both small and big improvements live every now and then. It keeps the forum feeling active and alive