Implement wider hover area for icon port and simplify edge rendering

[Frizi]

Fixes #14096

Screencast_20251029_190822.webm

• Implemented treating whole WidgetSelfAccessChain as additional hover area for the icon's port. That effectively "snaps" dragged edges to the icon when hovering over the method name.
• Added debug flag to devtools that allows making all port hoverable areas visible (shown on video).
• Simplified edge rendering to reduce complexity and help with draw performance a bit. This was provoked by an edge rendering bug that caused dragged edges to randomly get masked out when working on this feature.
  • Edge cutout mask is replaced with a clip-path that isn't shared between edges.
  • Replaced the "edge arrow" elements with stroke end marker, so the shape is shared across all edges and we have less DOM nodes to render.
  • Removed the "reversed triangle" from edges going up. All edges now have an attached arrow at the end, so it was redundant (proposed this design change to @jdunkerley and got a go-ahead).

[farmaazon]

ProtectedLayout is a strange place for this one. I would either put it in App or in AppContainer

[Frizi]

This is because ProtectedLayout renders EnsoDevtools, and is effectively the closest Vue parent. This functionality is related to devtools (react), but needs to run in vue context and needs to run even when devtools are not currently displayed.