Balloon Toolbar

[mlewand]

Are you reporting a feature request or a bug?

Feature request

Browser Compatibility

All supported browsers, except IE8 (see the "Internet Explorer 8 Compatibility" comment)

Provide detailed reproduction steps (if any)

We need a lightweight, inline toolbar component that could be displayed inside of an editor.

The toolbar should be pointing at an element in the content, and should be updated automatically if the pointed element is moved, for example due to scrolling / browser resizing etc.

It should be possible to customize the toolbar appearance using CSS.

Contexts

This feature should also support a case where multiple different toolbars are registered at the same time, however only one (best match) should be visible at a time.

For instance there could be Link,Unlink,Image2 buttons for image2 widgets, NumberedList,BulletedList buttons for list elements and Bold,Underline buttons for any other selection.

In the case above we listed 3 different context, and based on selection only the best match will be shown by the Balloon Toolbar manager. This feature was added in #1195.

Example usages

• Images (linking, image properties)
• Tables (any operations from tabletools, so insert column, insert row, insert cell, cell properties etc.)
• Widgets (for instance refetch option for embedded content)
• Lists (so you can change list type)
• Inline styling (bold, underline, italics)

Styling compatibility

If possible, the toolbar should look decently on any 3rd party skin that does not have dedicated styles for balloon toolbar. That was solved in #1136.

Technical details

Ideally it would be great if it's compatible with the existing button interfaces (I'm looking at CKEDITOR.ui.button) - it's fine to use a subclass though.

It make sense to extend the Balloon Panel plugin as it has a lot of logic that we should extend.

It should not have any dependencies on the standard Toolbar plugin.

Toolbar context matching

Context matching should be performed based on following criteria (starting with the highest priority):

• Callback
• Widget
• CSS matching

Toolbar positioning

Contrary original Balloon Panel plugin which used any position possible - the toolbar should prefer displaying below the pointed element. Reason for this is that this way it will better integrate with mobile browsers, which display context menu over the selection.

Having our toolbar at the bottom and the native context menu on the top is the optimal solution (#1246).

[mlewand]

I believe we can use a lot of logic from the balloon panel here.

[mlewand]

Note we're in the middle of renaming process from Inline Toolbar to Balloon Toolbar (#1207), so some old task might refer to it as "Inline Toolbar".

[mlewand]

Internet Explorer 8 Compatibility

During the course of development, we used options.cssSelector property, that uses HTMLElement.matches property which is not implemented in IE8.

Any other aspect of Balloon Toolbar looks to be working well on IE8, that is:

• options.widgets
• options.refresh

The toolbar itself positions well and works correctly on IE8, so there's no problem with that too.

So as long as you use options.refresh rather than options.cssSelector you'll have Balloon Toolbar working well on IE8 too.