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

Assigned To

None

Authored By

	• TrevorParscal
	Jul 11 2013, 9:54 PM

Description

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

Very slow, the CSS selectors use * and adding and controlling all these elements takes a lot of time as well.

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

Details

Reference: bz51202

	Subject	Repo	Branch	Lines +/-
	[WIP] FocusableNode: Allow the highlights to have holes (using SVG)	VisualEditor/VisualEditor	master	+183 -61

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		None	T104540 Reference list <div> can overlap a template <div> because that's how HTML works
Open		None	T190226 Allow "holes" inside focusable highlights, e.g. for images with editable captions
Open	Feature	None	T53202 Draw VisualEditor's non-CE block highlights using SVG polygons

Event Timeline

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

• bzimport added a project: VisualEditor-ContentEditable.

• bzimport set Reference to bz51202.

• TrevorParscal created this task.Jul 11 2013, 9:54 PM

@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 added a project: VisualEditor.Nov 23 2014, 10:47 PM

Jdforrester-WMF moved this task from To Triage to Bug Fixes on the VisualEditor board.Nov 24 2014, 1:28 AM

This is not high priority

In T53202#781046, @Esanders wrote:

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 added projects: VisualEditor-Performance, Performance Issue.

Jdforrester-WMF set Security to None.

ori moved this task from Backlog to Doing on the VisualEditor-Performance board.Jan 23 2015, 7:49 AM

Jdforrester-WMF removed Esanders as the assignee of this task.Feb 10 2015, 8:52 PM

Jdforrester-WMF moved this task from Bug Fixes to Freezer on the VisualEditor board.

Krinkle unsubscribed.Mar 8 2016, 10:15 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 8 2016, 10:15 PM

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

Krinkle removed a project: Performance Issue.May 10 2017, 9:34 PM

Jdforrester-WMF set the point value for this task to 8.May 12 2017, 12:21 AM

Jdforrester-WMF added a subscriber: matmarex.Mar 22 2018, 5:15 PM

matmarex added a parent task: T190226: Allow "holes" inside focusable highlights, e.g. for images with editable captions.Mar 22 2018, 5:16 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

gerritbot added a project: Patch-For-Review.May 19 2018, 9:04 PM

In T53202#542648, @Esanders wrote:

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 T53202#2280692, @Esanders wrote:

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 edited projects, added VisualEditor (Current work); removed VisualEditor-Performance, VisualEditor.Jun 6 2018, 9:36 PM

Jdforrester-WMF moved this task from Incoming to In progress on the VisualEditor (Current work) board.Jun 11 2018, 5:35 PM

Jdforrester-WMF moved this task from In progress to Code review on the VisualEditor (Current work) board.Jun 20 2018, 3:32 PM

Esanders assigned this task to matmarex.Aug 28 2018, 12:27 PM

matmarex changed the task status from Stalled to Open.Sep 19 2018, 4:31 PM

matmarex edited projects, added VisualEditor; removed VisualEditor (Current work).

Aklapper edited projects, added Patch-Needs-Improvement; removed Patch-For-Review.May 25 2021, 8:53 PM

matmarex removed matmarex as the assignee of this task.Jun 25 2021, 2:49 PM

Aklapper changed the subtype of this task from "Task" to "Feature Request".Feb 4 2022, 12:24 PM

Aklapper removed a subscriber: • TrevorParscal.

Change 434103 abandoned by Bartosz Dziewoński:

[VisualEditor/VisualEditor@master] [WIP] FocusableNode: Allow the highlights to have holes (using SVG)

Reason: