[Bug:Docs] Copy button broken in Firefox

[danawoodman]

What were you trying to install (or what else went wrong)?

trying to copy the install code for a library

What exactly did you do?

hit the copy button on the zig install on this page: https://webinstall.dev/zig/

What went wrong?

nothing happened, copy failed, console produced this error:

Which OS did you try on?

macOS 14.3.1, Firefox 123.0

• [x] Mac
• [x] Windows
• [x] Linux

What type of computer (i.e. laptop, desktop, Raspberry Pi)?

• [x] Laptop or Desktop (amd64 / x86-64)
• [ ] Raspberry Pi (ARM-64)
• [ ] Other (please specify, if you know)

[HacDan]

Can confirm happens on Firefox in PopOS (Ubuntu Derivative) as well.

Also noticed (although should probably be a separate issue) that OS detection isn't functioning in Firefox on PopOS. Seems this isn't the case. My useragent is being incorrectly displayed.

I'll test Firefox on MacOS tonight. Can confirm I receive the same error with Firefox on MacOS(Honestly this was expected. It's an error in the handling of javascript)

[y0rune]

I confirm that error on Firefox at Mac (123.01), Windows 11, Linux :c

[coolaj86]

I just did this for something else. I believe this function should work in Firefox:

function copyUrlToClipboard(text) {
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(text).then(() => {
      console.log('URL copied to clipboard.');
    }).catch((err) => {
      console.error('Failed to copy the URL: ', err);
    });
    return;
  }

    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed'; // avoid scrolling to bottom
    textArea.style.opacity = '0'; // hidden
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
      document.execCommand('copy');
      console.log('URL copied to clipboard.');
    } catch (err) {
      console.error('Failed to copy the URL: ', err);
    }

    document.body.removeChild(textArea);
}

copyUrlToClipboard(text);

It's used here: https://x5c.bnna.net/

Update: I just downloaded Firefox (and had to fix a different bug on that site), but confirmed that the copyToClipboard works. \ Truth be told, however, I didn't create the website and I often have trouble making edits to it because... modern frameworks 🤦‍♂️🔫. \ I've gotta see if there's a simple way to edit the page I need to edit, or if there's a simple way to sidestep the framework - ajQuery is more my speed.