Page MenuHomePhabricator

VisualEditor: Floated nodes don't get shields in Chrome
Closed, ResolvedPublic

Description

If you have a floated table inside an alien, it gets a shield (and a phantom) in Firefox but not in Chrome. This is because the table is floated with external CSS triggered by class="infobox", rather than an inline style attribute. At the time when we check for $this.css('float'), $this hasn't been attached to the main DOM yet. Firefox computes styles on unattached nodes correctly, but Chrome doesn't.

The solution is to wait until after the entire CE rendering has been built and attached to the DOM before generating shields and phantoms. Possible implementations:

  1. Add an onAttach function to ce.Node. After attaching, traverse the entire CE tree and invoke onAttach() on every node (bottom up). This is expensive, though, because you have to traverse the entire tree just to invoke onAttach on the few nodes that use it.
  1. Make the ce.Surface throw an 'attached' event after attaching to the DOM, and make the ce.AlienBlockNode constructor listen for this event. This is not as clean, but more efficient, because only nodes that need processing are processed.

I have a slight preference for #2, but I can be convinced either way.

In both cases, the call to onUpdate() in the ce.AlienBlockNode constructor would be removed, otherwise the HTML would be set twice.


Version: unspecified
Severity: normal

Details

Reference
bz42134