Simple Machines Community Forum

SMF Development => Bug Reports => Fixed or Bogus Bugs => Topic started by: PCNetSpec on April 23, 2017, 08:46:41 AM

Title: Code: [Select] function not working in recent web browsers
Post by: PCNetSpec on April 23, 2017, 08:46:41 AM
The "Code: [Select]" function in SMF 2 has for as long as I can remember always displayed "javascript:void(0);" at the bottom left of screen in Firefox/Chromium/Chrome (and probably others) but the function still worked .. ie. when you clicked on "Select" all the text in the code box got selected.

Now it does not, you still get the "javascript:void(0);" message, but clicking "Select" does nothing .. the text in the code box does not get selected.

This seems to be related to web browser version, as if I drop back to Firefox 51 the function works, but it does not work in Firefox 53.

[SMF 2.0.13]
(and this forum .. 2.0.14)
test here
Title: Re: Code: [Select] function not working in recent web browsers
Post by: Arantor on April 23, 2017, 08:48:44 AM
Does your site use HTTPS?
Title: Re: Code: [Select] function not working in recent web browsers
Post by: PCNetSpec on April 23, 2017, 08:50:40 AM
It does yes .. but as I said the function works in Firefox 51 and earlier versions of Chromium/Chrome. It just seems to be in recent browsers.

Here's an example:
https://forum.peppermintos.com/index.php/topic,5420.msg54342.html#msg54342
Title: Re: Code: [Select] function not working in recent web browsers
Post by: Arantor on April 23, 2017, 08:58:20 AM
I was half expecting you to say no. Firefox has been changing its requirements so that higher or more sensitive features require HTTPS and potentially that would have been one of them. But it's not that.

Hmm, it still works on Chrome 57, and in Firefox 52, but you're right it's broken in FF 53. I wonder what they changed that broke.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: PCNetSpec on April 23, 2017, 09:08:41 AM
You're also right, it's working here too in Chromium 57 .. so it appears to be just Firefox 53 where it's broken ???
Title: Re: Code: [Select] function not working in recent web browsers
Post by: Illori on April 23, 2017, 10:56:49 AM
console says
QuoteIndexSizeError: Index or size is negative or greater than the allowed amount script.js?fnl (line 1366)
// Firefox at el.
else if (window.getSelection)
{
var oCurSelection = window.getSelection();
// Safari is special!
if (oCurSelection.setBaseAndExtent)
{
var oLastChild = oCodeArea.lastChild;
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);
}
else
{
var curRange = document.createRange();
curRange.selectNodeContents(oCodeArea);

oCurSelection.removeAllRanges();
oCurSelection.addRange(curRange);
}
}


1366 is oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);

i wonder if we no longer need the code just for firefox.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: Arantor on April 23, 2017, 10:59:26 AM
Would need to be tested against Safari (incl. Mobile Safari) as well if it were changed, as well as older Firefox.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: Illori on April 23, 2017, 12:38:04 PM
interesting that code is the same in SMF 2.1 but it does not have this issue.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: fugenkomponist on May 04, 2017, 03:52:35 AM
Quote from: Illori on April 23, 2017, 10:56:49 AM
1366 is oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);
If you replace 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length by 1 you'll see that Firefox selects the first line and Chromium more but not always the whole text (I assume something like "until the first closing double quote"). So it seems like this expression gives a node index out of range and different browsers count differently ...

As a workaround you can switch back to the old behaviour for Firefox:// Safari is special!
if (oCurSelection.setBaseAndExtent && !is_ff)
{
setBaseAndExtent is supported in Firefox 53 (see release notes at developer.mozilla.org/en-US/Firefox/Releases/53) so I think this is why the behaviour changed in this version.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: PCNetSpec on May 04, 2017, 12:05:37 PM
Code:[Select] now appears to be broken in Chrome/Chromium 58 too .. at least on SMF 2.0.13 (but not here on 2.0.14 ???)

Test URL
https://forum.peppermintos.com/index.php/topic,5485.msg54966.html#msg54966

Chromium 58.0.3029.81 console reads
Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 183.
    at smfSelectText (eval at <anonymous> (https://forum.peppermintos.com/index.php/topic,5485.msg54966.html:1:1), <anonymous>:47:407)
    at HTMLAnchorElement.onclick (https://forum.peppermintos.com/index.php/topic,5485.msg54966.html#msg54966:386:485)


Chrome 58.0.3029.96 is indicating the problem lies at the line highlighted in red below
Quote// Firefox at el.
   else if (window.getSelection)
   {
      var oCurSelection = window.getSelection();
      // Safari is special!
      if (oCurSelection.setBaseAndExtent)
      {
         var oLastChild = oCodeArea.lastChild;
         oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);
      }
      else
      {
         var curRange = document.createRange();
         curRange.selectNodeContents(oCodeArea);

         oCurSelection.removeAllRanges();
         oCurSelection.addRange(curRange);
      }
   }

For clarity, this is WITHOUT fugenkomponist's workaround .. which I only just spotted, and haven't tried yet as I'm assuming it's a Firefox specific workaround (?) but the problem now isn't.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: Gluz on May 06, 2017, 11:48:08 PM
I've seen this, and after looking through the code I see that this part:

// Safari is special!
if (oCurSelection.setBaseAndExtent)
{
var oLastChild = oCodeArea.lastChild;
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);
}


Is intended for Safari, but since Firefox 52 they added this:"setBaseAndExtent"

I tested something by adding is_safari to that if, similar to the change fugenkomponist did but to check only for Safari instead filter out only Firefox, since that part is intended for Safari. That makes it work in Firefox 53 and Chrome 58 as intended.

The code looks like this:
// Safari is special!
if (oCurSelection.setBaseAndExtent && is_safari)
{
var oLastChild = oCodeArea.lastChild;
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);
}


Those browsers are adding support for setBaseAndExtent but is broken, and all software that uses that is getting this errors.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: Linkjay on May 07, 2017, 01:20:56 AM
Broken here too. I am on FF 53.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: tfs on July 06, 2017, 08:56:16 PM
Has there been any change on this issue? I'm using SMF 2.14 and FF 54.0.1 (32-bit), and the select option is not working. It works in IE. My site is using HTTPS exclusively.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: FragaCampos on July 11, 2017, 05:51:57 PM
I'm using FF 54.0.1 (32-bit) and SMF 2.0.13 and the select option doesn't work either.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: tfs on August 10, 2017, 08:37:44 PM
Looks like it's also broken on my iPhone with Safari.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: GravuTrad on August 11, 2017, 05:50:07 AM
Quote from: FragaCampos on July 11, 2017, 05:51:57 PM
I'm using FF 54.0.1 (32-bit) and SMF 2.0.13 and the select option doesn't work either.

Same thing
Title: Re: Code: [Select] function not working in recent web browsers
Post by: PCNetSpec on September 21, 2017, 12:38:03 PM
Any movement on this issue ?

It seems to be broken in both Firefox 55 and Chromium 60 .. although it is still working in Chrome 58 on this forum (SMF 2.0.14), but not on my forum (SMF 2.0.13) :-\
Title: Re: Code: [Select] function not working in recent web browsers
Post by: tfs on November 15, 2017, 11:10:57 AM
Still broken on Firefox Quantum 57.0 (x64)

I miss this feature!
Title: Re: Code: [Select] function not working in recent web browsers
Post by: Krawieco on January 21, 2018, 03:08:56 AM
Quote from: tfs on November 15, 2017, 11:10:57 AM
Still broken on Firefox Quantum 57.0 (x64)

I miss this feature!

Hey tfs, did you get it working yet? Because I haven't been able to.  :-[
Title: Re: Code: [Select] function not working in recent web browsers
Post by: butch2k on January 21, 2018, 04:08:54 AM
Quote from: PCNetSpec on April 23, 2017, 08:46:41 AM
The "Code: [Select]" function in SMF 2 has for as long as I can remember always displayed "javascript:void(0);" at the bottom left of screen in Firefox/Chromium/Chrome (and probably others) but the function still worked .. ie. when you clicked on "Select" all the text in the code box got selected.

Now it does not, you still get the "javascript:void(0);" message, but clicking "Select" does nothing .. the text in the code box does not get selected.

This seems to be related to web browser version, as if I drop back to Firefox 51 the function works, but it does not work in Firefox 53.

[SMF 2.0.13]
(and this forum .. 2.0.14)
test here
I do not use the same code anymore but i encountered a similar issue with mine.
IIRC you should not use textContent.length which is the content length measured in characters BUT the number of text lines (number of nodes). It used to work even if the number used was superior but not anymore, you should use a number <= to the number of lines in the text being selected.

Try this
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, oCodeArea.childElementCount);

instead of

oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);

Let me know if it works as i'm unable to test it right now.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: tinoest on January 21, 2018, 12:34:56 PM
Quote from: butch2k on January 21, 2018, 04:08:54 AM
Try this
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, oCodeArea.childElementCount);

instead of

oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);

Let me know if it works as i'm unable to test it right now.

That appears to work correctly.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: butch2k on January 21, 2018, 01:58:16 PM
Thanks a lot  :)
It should work with most browsers (except the IEs before IE9)
Title: Re: Code: [Select] function not working in recent web browsers
Post by: tfs on January 21, 2018, 11:36:22 PM
Quote from: Krawieco on January 21, 2018, 03:08:56 AM
Quote from: tfs on November 15, 2017, 11:10:57 AM
Still broken on Firefox Quantum 57.0 (x64)

I miss this feature!

Hey tfs, did you get it working yet? Because I haven't been able to.  :-[

Still broken. I've long given up on it being fixed. It seems to be something that isn't important enough to warrant a patch. I do see people posting possible fixes, though I don't think I have seen anyone post what actual file they propose changing. :)
Title: Re: Code: [Select] function not working in recent web browsers
Post by: butch2k on January 22, 2018, 01:19:56 AM
Function smfSelectText() in script.js
Title: Re: Code: [Select] function not working in recent web browsers
Post by: tfs on January 22, 2018, 03:25:56 PM
Quote from: butch2k on January 21, 2018, 04:08:54 AM
I do not use the same code anymore but i encountered a similar issue with mine.
IIRC you should not use textContent.length which is the content length measured in characters BUT the number of text lines (number of nodes). It used to work even if the number used was superior but not anymore, you should use a number <= to the number of lines in the text being selected.

Try this
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, oCodeArea.childElementCount);

instead of

oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);

Let me know if it works as i'm unable to test it right now.

The above change to [\Themes\default\scripts\script.js] works for a single line of code, but with a code section that has multiple lines it only selects the first line.

Single Line Works

Multiple Lines
Do not work.
Only selects line one
Title: Re: Code: [Select] function not working in recent web browsers
Post by: butch2k on January 22, 2018, 04:03:37 PM
This should work fine with FF and Chrome

function smfSelectText(oCurElement, bActOnElement)
{
// The place we're looking for is one div up, and next door - if it's auto detect.
if (typeof(bActOnElement) == 'boolean' && bActOnElement)
var oCodeArea = document.getElementById(oCurElement);
else
var oCodeArea = oCurElement.parentNode.nextSibling;

if (typeof(oCodeArea) != 'object' || oCodeArea == null)
return false;

// Start off with my favourite, internet explorer.
if ('createTextRange' in document.body)
{
var oCurRange = document.body.createTextRange();
oCurRange.moveToElementText(oCodeArea);
oCurRange.select();
}
// Firefox at el.
else if (window.getSelection)
{
var oCurSelection = window.getSelection();
// Safari is special!
if (oCurSelection.selectAllChildren)
{
oCurSelection.selectAllChildren(oCodeArea);
}
else
{
var curRange = document.createRange();
curRange.selectNodeContents(oCodeArea);

oCurSelection.removeAllRanges();
oCurSelection.addRange(curRange);
}
}

return false;
}


Note
I replaced setBaseAndExtent by selectAllChildren because Chrome's behavior differs heavily from FF.

Indeed, according to setBaseAndExtent MDN (Mozilla) spec and introduced with FF 53
focusOffset
The number of child nodes from the start of the focus node that should be included in the selection. So for example, if the value is 0 the whole node is excluded. If the value is 1, the first child node is included. And so on.


If you got three lines of text in the code block there are 5 nodes: 3 for the text and two for the BRs, if you set focusOffset to 5 FF select all three lines

The official Spec, on which Chrome is based, is not that clear on what the focusOffset really is when both text nodes and tags are mixed within the content container. And clearly Chrome implemented it very differently from FF. So setBaseAndExtent is a no go at this time.



Title: Re: Code: [Select] function not working in recent web browsers
Post by: nesquik91 on February 06, 2018, 12:40:33 PM
Hello!

which is the"php" file where this code should be modified?

Thanks.

Nucky
Title: Re: Code: [Select] function not working in recent web browsers
Post by: butch2k on February 06, 2018, 03:45:36 PM
Quote from: nesquik91 on February 06, 2018, 12:40:33 PM
Hello!

which is the"php" file where this code should be modified?

Thanks.

Nucky
It's not a php file, it's script.js
Title: Re: Code: [Select] function not working in recent web browsers
Post by: nesquik91 on February 06, 2018, 03:47:58 PM
Hy,

which js script?
Title: Re: Code: [Select] function not working in recent web browsers
Post by: Illori on February 06, 2018, 03:49:02 PM
the file name is script.js
Title: Re: Code: [Select] function not working in recent web browsers
Post by: nesquik91 on February 06, 2018, 03:53:14 PM
Ok. I understand. I have an smf forum and the post does not work with the selection function and I thought it would explain ...
Title: Re: Code: [Select] function not working in recent web browsers
Post by: GravuTrad on February 06, 2018, 07:38:17 PM
Located here

QuoteThe above change to \Themes\default\scripts\script.js works for a single line of code, but with a code section that has multiple lines it only selects the first line.
Title: Re: Code: [Select] function not working in recent web browsers
Post by: PCNetSpec on March 06, 2018, 04:54:44 PM
Quote from: butch2k on January 22, 2018, 04:03:37 PM
This should work fine with FF and Chrome

function smfSelectText(oCurElement, bActOnElement)
{
// The place we're looking for is one div up, and next door - if it's auto detect.
if (typeof(bActOnElement) == 'boolean' && bActOnElement)
var oCodeArea = document.getElementById(oCurElement);
else
var oCodeArea = oCurElement.parentNode.nextSibling;

if (typeof(oCodeArea) != 'object' || oCodeArea == null)
return false;

// Start off with my favourite, internet explorer.
if ('createTextRange' in document.body)
{
var oCurRange = document.body.createTextRange();
oCurRange.moveToElementText(oCodeArea);
oCurRange.select();
}
// Firefox at el.
else if (window.getSelection)
{
var oCurSelection = window.getSelection();
// Safari is special!
if (oCurSelection.selectAllChildren)
{
oCurSelection.selectAllChildren(oCodeArea);
}
else
{
var curRange = document.createRange();
curRange.selectNodeContents(oCodeArea);

oCurSelection.removeAllRanges();
oCurSelection.addRange(curRange);
}
}

return false;
}


Note
I replaced setBaseAndExtent by selectAllChildren because Chrome's behavior differs heavily from FF.

Indeed, according to setBaseAndExtent MDN (Mozilla) spec and introduced with FF 53
focusOffset
The number of child nodes from the start of the focus node that should be included in the selection. So for example, if the value is 0 the whole node is excluded. If the value is 1, the first child node is included. And so on.


If you got three lines of text in the code block there are 5 nodes: 3 for the text and two for the BRs, if you set focusOffset to 5 FF select all three lines

The official Spec, on which Chrome is based, is not that clear on what the focusOffset really is when both text nodes and tags are mixed within the content container. And clearly Chrome implemented it very differently from FF. So setBaseAndExtent is a no go at this time.

Worked perfectly, many thanks butch2k :)
Title: Re: Code: [Select] function not working in recent web browsers
Post by: shawnb61 on January 03, 2020, 02:25:29 AM
Fixed in 2.0.16.