Firefox: Copying elements sometimes don’t work when holding alt (ctrl on macOS) the whole time without releasing it

anarcat commented 8 months ago

URL

https://lydell.github.io/LinkHints/tutorial.html#step-7

Screen shot

Here's a screenshot of the tutorial before selecting the link:

Here's a video of the procedure. Note that control-shift-v in the terminal pastes from the CLIPBOARD selection, but the PRIMARY selection is also not correct.

https://github.com/lydell/LinkHints/assets/796623/106456bb-6e5d-49e4-8600-aa65a28cfcff

Description

Copying links doesn't work in Firefox 115.8.0esr on Debian 12 "bookworm", running under Sway.

Debug info

[LinkHints] 2024-03-21 09:52:53.070 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onKeydown suppressing event 
Object { key: "L", code: "KeyL", event: keydown Alt-Shift, match: {…}, keyboardMode: "Normal", suppressNextKeyup: {…} }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.072 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#sendMessage KeyboardShortcutMatched 
Object { type: "KeyboardShortcutMatched", action: "EnterHintsMode_Select", timestamp: 1711029173072 }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.076 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onMessage StartFindElements 
Object { type: "StartFindElements", types: "selectable" }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.082 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  ElementManager#getVisibleElements results (including rejected) 
Array(293) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.083 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#sendMessage ReportVisibleElements 
Object { type: "ReportVisibleElements", elements: (32) […], numFrames: 0, stats: {…} }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.088 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onMessage StateSync 
Object { type: "StateSync", clearElements: false, keyboardShortcuts: (9) […], keyboardMode: "Hints", logLevel: "debug", keyTranslations: {}, oneTimeWindowMessageToken: "279951631727167499983150472382", mac: false, isPinned: false }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.089 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  RendererProgram#onMessage Render 
Object { type: "Render", elements: (32) […], mixedCase: false }
[renderer.js:271:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/renderer.js)
[LinkHints] 2024-03-21 09:52:53.093 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  RendererProgram#sendMessage Rendered 
Object { type: "Rendered", firstPaintTimestamp: 1711029173091, lastPaintTimestamp: 1711029173093, durations: (8) […] }
[renderer.js:271:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/renderer.js)
[LinkHints] 2024-03-21 09:52:53.094 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  ElementManager#flushQueue 
Object { length: 1, index: 0 }

Object { type: "Records", records: (1) […], recordIndex: 0, addedNodeIndex: 0, removedNodeIndex: 0, childIndex: 0, children: undefined, removalsOnly: false }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.094 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  ElementManager#flushQueue Empty queue. [worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.202 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onKeyup suppressing event 
Object { event: keyup Alt-Shift, keyboardMode: "Hints", suppressNextKeyup: {…} }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.589 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onMessage StateSync 
Object { type: "StateSync", clearElements: false, keyboardShortcuts: (9) […], keyboardMode: "Hints", logLevel: "debug", keyTranslations: {}, oneTimeWindowMessageToken: "215946989425238614683822896130", mac: false, isPinned: false }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.590 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onMessage UpdateElements 
Object { type: "UpdateElements" }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.592 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  ElementManager#getVisibleElements (update) results (including rejected) 
Array(32) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.593 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#sendMessage ReportUpdatedElements 
Object { type: "ReportUpdatedElements", elements: (32) […], rects: [] }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.597 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  RendererProgram#onMessage UpdateHints 
Object { type: "UpdateHints", updates: (32) […], enteredText: "" }
[renderer.js:271:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/renderer.js)
[LinkHints] 2024-03-21 09:52:53.598 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  RendererProgram#onMessage RenderTextRects 
Object { type: "RenderTextRects", rects: [], frameId: 0 }
[renderer.js:271:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/renderer.js)
[LinkHints] 2024-03-21 09:52:53.727 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onKeydown suppressing event 
Object { key: "Alt", code: "AltLeft", event: keydown, match: undefined, keyboardMode: "Hints", suppressNextKeyup: {…} }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:53.727 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#sendMessage NonKeyboardShortcutKeypress 
Object { type: "NonKeyboardShortcutKeypress", keypress: {…}, timestamp: 1711029173727 }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.091 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onMessage StateSync 
Object { type: "StateSync", clearElements: false, keyboardShortcuts: (9) […], keyboardMode: "Hints", logLevel: "debug", keyTranslations: {}, oneTimeWindowMessageToken: "160188501531370198731949355527", mac: false, isPinned: false }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.091 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onMessage UpdateElements 
Object { type: "UpdateElements" }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.093 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  ElementManager#getVisibleElements (update) results (including rejected) 
Array(32) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.094 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#sendMessage ReportUpdatedElements 
Object { type: "ReportUpdatedElements", elements: (32) […], rects: [] }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.096 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onKeydown suppressing event 
Object { key: "j", code: "KeyJ", event: keydown Alt, match: undefined, keyboardMode: "Hints", suppressNextKeyup: {…} }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.096 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#sendMessage NonKeyboardShortcutKeypress 
Object { type: "NonKeyboardShortcutKeypress", keypress: {…}, timestamp: 1711029174096 }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.097 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  RendererProgram#onMessage UpdateHints 
Object { type: "UpdateHints", updates: (32) […], enteredText: "" }
[renderer.js:271:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/renderer.js)
[LinkHints] 2024-03-21 09:52:54.099 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  RendererProgram#onMessage RenderTextRects 
Object { type: "RenderTextRects", rects: [], frameId: 0 }
[renderer.js:271:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/renderer.js)
[LinkHints] 2024-03-21 09:52:54.109 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onMessage GetTextRects 
Object { type: "GetTextRects", indexes: (1) […], words: [] }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.110 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#sendMessage ReportTextRects 
Object { type: "ReportTextRects", rects: [] }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.110 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onMessage CopyElement 
Object { type: "CopyElement", index: 29 }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.110 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram: CopyElement 
Object { element: a.Button
, type: "clickable", measurements: {…}, hasClickListener: false }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.114 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  RendererProgram#onMessage UpdateHints 
Object { type: "UpdateHints", updates: (32) […], enteredText: "" }
[renderer.js:271:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/renderer.js)
[LinkHints] 2024-03-21 09:52:54.117 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onMessage StateSync 
Object { type: "StateSync", clearElements: true, keyboardShortcuts: (8) […], keyboardMode: "Normal", logLevel: "debug", keyTranslations: {}, oneTimeWindowMessageToken: "50721681624222539024143739508", mac: false, isPinned: false }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.118 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  RendererProgram#onMessage RenderTextRects 
Object { type: "RenderTextRects", rects: [], frameId: 0 }
[renderer.js:271:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/renderer.js)
[LinkHints] 2024-03-21 09:52:54.173 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  WorkerProgram#onKeyup suppressing event 
Object { event: keyup Alt, keyboardMode: "Normal", suppressNextKeyup: {…} }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.318 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  RendererProgram#onMessage Unrender 
Object { type: "Unrender" }
[renderer.js:271:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/renderer.js)
[LinkHints] 2024-03-21 09:52:54.320 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  ElementManager#flushQueue 
Object { length: 1, index: 0 }

Object { type: "Records", records: (1) […], recordIndex: 0, addedNodeIndex: 0, removedNodeIndex: 0, childIndex: 0, children: undefined, removalsOnly: false }
[worker.js:392:12](moz-extension://2a6d9c03-33df-4dab-a379-13698bda5fb7/worker.js)
[LinkHints] 2024-03-21 09:52:54.321 https://lydell.github.io/LinkHints/tutorial.html#step-7 
  ElementManager#flushQueue Empty queue.

lydell commented 8 months ago

Hi! I had difficulty following a long in the video, unfortunately. Can you describe with words what you do, what happens, and what you expected to happen?

anarcat commented 8 months ago

sure, sorry. :) in the tutorial, I hit alt-shift-l which I understand means "select link", then i hit alt-j to copy the URL of the Almost there button. Then I focus on my terminal to try to paste the URL there, but it pastes whatever was already present in the clipboard.

Note that i can properly copy selected text with alt-shift-l on other places. Like if I do alt-shift-l then c, this text gets selected:

AltShiftL lets you select elements. This is useful for copying text and using the context menu.

and I can hit control-c to copy it to my clipboard. But that doesn't work to copy the link.

lydell commented 8 months ago

alt-shift-l does not mean “select link” – it means “select element”. Basically, it lets you select the text of any element. On top of that, there’s one more thing. If you hold alt while typing the last hint character of an element, that element is copied in a “do what I mean” fashion. It usually means that the text of the element is copied, but for links it means that the link URL is copied.

anarcat commented 8 months ago

On 2024-03-21 09:39:07, Simon Lydell wrote:

[...] It usually means that the text of the element is copied, but for links it means that the link URL is copied.

Right, so this is what this bug report is about: copying link URLs doesn't work. :)

lydell commented 8 months ago

As in, nothing at all is copied?

Also – it’s not about links, right? The same problem happens if you try to copy element text by holding alt during the last hint character?

anarcat commented 8 months ago

On 2024-03-21 11:44:10, Simon Lydell wrote:

As in, nothing at all is copied?

correct.

Also – it’s not about links, right? The same problem happens if you try to copy element text by holding alt during the last hint character?

no! i can copy text elements by doing that.

in fact, interestingly, it works for some links. for example, in:

https://lydell.github.io/LinkHints/tutorial.html#step-7

i can copy the "home" link but not the "Almost there" link - maybe it's because it's a button?

lydell commented 8 months ago

Ah, then it sounds like you’re encountering this bug: https://github.com/lydell/LinkHints/issues/85

If you can’t copy elements with just one hint letter, then it’s that bug.

anarcat commented 8 months ago

aaaah that could explain it then, thanks! Let's close this one and i'll reopen if i can find a case where it doesn't work with two letters. :)

(is there a a workaround? forcing two characters everywhere maybe? :)

(one thing i was hoping this could do would be to pop open the right-click menu on a link, that way i would have access to all sorts of other things as well...)

lydell commented 8 months ago

is there a a workaround?

Unfortunately not. But luckily Link Hints is finally at the top of my todo list again, so hopefully I can fix it somewhat soon.

one thing i was hoping this could do would be to pop open the right-click menu on a link, that way i would have access to all sorts of other things as well...

That would be awesome. It was possible in Firefox back in the day, but since they switched to “Web Extensions” it is sadly not possible anymore. However, you can still use alt-shift-l to focus elements and then press the right-click key on your keyboard (if it has one – if not, you can probably solve that since you’re on Linux).

anarcat commented 8 months ago

just a quick note here to mention that i thought i had reproduced this here (failure with two-letter hints) but i think what happened is i held alt while typing both letters. it works if i type alt-shift-l then the first letter of the hint, then hold alt while I type the second letter, which is a bit confusing...

also, maybe that could explain why it doesn't work with a single letter?

lydell commented 8 months ago

which is a bit confusing...

Sorry, I didn’t quite following along. What was confusing exactly?

maybe that could explain why it doesn't work with a single letter?

That’s called solving the bug 😉

anarcat commented 8 months ago

Sorry, I didn’t quite following along. What was confusing exactly?

Maybe I misunderstand, but if I type alt-shift-l then hold alt while typing the two letters for a hint, the copying doesn't work. If I type the first letter, then hold alt then type the second letter, it works.

I find that confusing because I would expect I could just hold alt the whole time and it would work, releasing alt feels counter-intuitive.

lydell commented 8 months ago

Oh, yeah, that’s weird. Looks like you found another bug.

lydell commented 3 months ago

Tried to debug it today. When the bug happens, this is printed in the console:

WorkerProgram#onMessage->CopyElement->clipboard.writeText DOMException: Clipboard write was blocked due to lack of user activation.

Browsers only allow certain actions to be done “during a user activation”, such as during a key press. We are doing it during a key press, so it should be fine, but Firefox seems a bit twitchy. Things I learned:

I never got the issue in Chrome.
I reproduces fairly often in Firefox, but not 100 %. I couldn’t spot any pattern for what exactly I did differently when it happens.
Pressing the modifier only on the last key is a workaround at least (and the way I do it spontaneously, which is why I’ve never noticed this myself).

Not sure what to do about this, leaving it for another time.

lydell / LinkHints