Page MenuHomePhabricator

Draw VisualEditor's non-CE block highlights using SVG polygons
Open, MediumPublic8 Estimated Story Points

Description

Shields/phantoms are currently recursively applying to protected elements and positioning additional elements inside them. This causes 2 major problems:

  1. Very slow, the CSS selectors use * and adding and controlling all these elements takes a lot of time as well.
  1. We are limited to a single rectangle per protected node, which for inline elements is especially problematic since they are meant to wrap.

Using getClientRect and getClientRects (for inline stuff) can give us bounding box information that we can then cache, and render polygon click blocks for using an SVG layer. SVG's pointer-events: none works across browsers (unlike using this property in HTML) so we can control which elements in the SVG rendering block or pass through.


Version: unspecified
Severity: enhancement
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=64709

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 1:46 AM
bzimport set Reference to bz51202.

@Trevor: Thanks for writing it down. I'm pretty excited about working on it. Btw. in the meantime, I'm working on shields/phantoms performance optimization here: https://gerrit.wikimedia.org/r/#/c/72113/

We are now using getBoundingClientRect and getClientRects. The only part missing from this bug is to use SVG. We should investigate the performance benefits/losses of doing so.

Jdforrester-WMF lowered the priority of this task from High to Medium.Nov 24 2014, 4:34 PM
Jdforrester-WMF added a subscriber: Esanders.

This is not high priority

Investigating performance options is generally always a priority. But you're probably right that it won't be hugely beneficial.

Jdforrester-WMF renamed this task from VisualEditor: Draw highlights using SVG polygons to Draw VisualEditor's non-CE block highlights using SVG polygons.Dec 2 2014, 9:54 PM
Jdforrester-WMF set Security to None.
Jdforrester-WMF moved this task from Bug Fixes to Freezer on the VisualEditor board.

In order to prevent the SVG canvas (a bounding rectangle) from capturing click events we'd need to set pointer-events, which would mean this wouldn't work on IE<11

Jdforrester-WMF changed the task status from Open to Stalled.May 10 2016, 4:29 PM

Change 434103 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[VisualEditor/VisualEditor@master] [WIP] FocusableNode: Allow the highlights to have holes (using SVG)

https://gerrit.wikimedia.org/r/434103

We are now using getBoundingClientRect and getClientRects. The only part missing from this bug is to use SVG. We should investigate the performance benefits/losses of doing so.

This was implemented in rGVEDee5b69772963: Shields are dead, long live getClientRects and I think that actually resolved all of the original performance concerns. I don't think switching the <div style="top: left: …"></div> to <svg><rect x= y= …></svg> is likely to improve or worsen performance. I am only doing it because it gives us the flexibility to have non-rectangular highlights.


Using getClientRect and getClientRects (for inline stuff) can give us bounding box information that we can then cache, and render polygon click blocks for using an SVG layer. SVG's pointer-events: none works across browsers (unlike using this property in HTML) so we can control which elements in the SVG rendering block or pass through.

In order to prevent the SVG canvas (a bounding rectangle) from capturing click events we'd need to set pointer-events, which would mean this wouldn't work on IE<11

This sounds like the idea was to use a single <svg> tag covering the whole page, but made unclickable with pointer-events: none, with <rect> or something for individual highlights.

I think we should stick to smaller <svg> tags covering just the focusable node (like the current <div> tags). This seems like a potentially not very well-tested area in browsers, and it would be nice if any bugs affecting the new highlights (whether in our code or in browser code) were localised to just the highlight instead of breaking the entire page. For example, when I was playing with it yesterday, my first implementation had such large <svg> tags, and it caused the mouse cursor to rapidly flicker between regular pointer and text cursor while over it (I couldn't reproduce that again, but James saw it happen :) ).

(These days we only support IE 11, so the only remaining browser that has no support for 'pointer-events' in HTML is Opera 12; it only supports the property in SVG.)

matmarex changed the task status from Stalled to Open.Sep 19 2018, 4:31 PM
matmarex edited projects, added VisualEditor; removed VisualEditor (Current work).