Make existing dropdowns initialize their panel content on first open

[Reinmar]

Part of #12592. Research in #12682.

PoC in ck/12682-performance-reference...ck/12682-performance-lazy-init.

Scope:

• Check with @oleq whether the change is fine.
• Make existing UI components (dropdowns, widget toolbar repository, table cell and table props balloons) create their content on demand (this is – on first show).
  • Scope: Most of that was already proposed in the PoC linked above. Let's not search for more types of UI – we got enough already. Additionally, we have many dropdowns that are parts of UI that is loaded on demand anyway (e.g. ones deep inside the table cell props panel), so optimizing them make no sense. The downside of this will be that we'll have two types of dropdowns: optimized and not optimized.
  • Note: In cases where changing the code to use deferred initialization will turn out to significantly increase the complexity or require a larger refactoring of that part of the code, we can safely abort. It's not crucial to have all places changed as many of them will not have any visible impact on performance.
  • Note: Tests will need to be updated.
• Review existing documentation and align with our code changes:
  • API docs for dropdown, its helpers, etc. E.g. https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_dropdown_utils.html#function-addListToDropdown
  • Guides, if any exist, regarding dropdown creation. E.g. https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/ui-library.html#using-the-existing-components
  • To not overcomplicate these examples and especially that our dropdowns will still use two ways to initialize their content, let's only add here side notes covering the "Optimizing the initialization performance" topic).

[oleq]

My 2c regarding ck/12682-performance-reference...ck/12682-performance-lazy-init#diff-5848ac0a8fcb5189cbf784a5a29e686ce98406901539650cee81f0a473df2c03R77-R81:

• The whole concept is cool :)
• ck/12682-performance-reference...ck/12682-performance-lazy-init#diff-5848ac0a8fcb5189cbf784a5a29e686ce98406901539650cee81f0a473df2c03R78

dropdownView.on( 'change:isOpen', ( evt, name, isOpen ) => {
				if ( isOpen && !dropdownView.listView ) {

can be simplified into

dropdownView.once( 'change:isOpen', () => {

because every dropdown is closed when created

• Idea (for later): addListToDropdown could be smarter and check if the dropdown is open at the moment of execution and add things right away or create a dropdownView.once( 'change:isOpen', listener for itself if not. 
  • This would hide the whole logic from features and keep it in dropdown utils.
  • Same in addToolbarToDropdown.
  • Problem: Things like this._getLanguageListItemDefinitions in ck/12682-performance-reference...ck/12682-performance-lazy-init#diff-5848ac0a8fcb5189cbf784a5a29e686ce98406901539650cee81f0a473df2c03R79 would not get deferred that way. 
    • Off-the-bat solution: Make the collection of items (2nd argument) a Collection|() => Collection.
• Idea: Let's defer the ContextualBalloon DOM elements initialization until the first show

  ckeditor5/packages/ckeditor5-ui/src/panel/balloon/contextualballoon.ts

  Lines 138 to 139 in 10f9f86

  	this.view = new BalloonPanelView( editor.locale );
  	editor.ui.view.body.add( this.view );

  .

[niegowski]

• Idea: Let's defer the ContextualBalloon DOM elements initialization until the first show

  ckeditor5/packages/ckeditor5-ui/src/panel/balloon/contextualballoon.ts

  Lines 138 to 139 in 10f9f86

  	this.view = new BalloonPanelView( editor.locale );
  	editor.ui.view.body.add( this.view );

  
  .

This case is not so simple, the ContextualBalloon#view is referenced on init in the following places (before showing code uses view.element to init clickOutsideHandler()):

• ImageTextAlternativeUI
• MentionUI
• LinkUI
• WidgetToolbarRepository (this might be not an issue)
• BalloonToolbar (this might be not an issue)
• TableCellPropertiesUI and TablePropertiesUI is already deferred by postponing panel view creation.

[oleq]

This case is not so simple, the ContextualBalloon#view is referenced on init in the following places (before showing code uses view.element to init clickOutsideHandler()):

Looks like it comes down to clickOutsideHandler initialization in most cases

ckeditor5/packages/ckeditor5-mention/src/mentionui.js

Lines 133 to 138 in 30acb8f

	clickOutsideHandler( {
	emitter: this._mentionsView,
	activator: () => this._isUIVisible,
	contextElements: [ this._balloon.view.element ],
	callback: () => this._hideUIAndRemoveMarker()
	} );

We could probably make contextElements a callback and work around this problem.

[TobiasHartlehnert]

The "minor" breaking changes for release v36.0.0 state that you have to "make sure that you access the dropdown panel/toolbar items after the dropdown is open/the toolbar is visible.

Well, how exactly can this be done? It would be nice to have some examples in the update guide for v36.x. Custom plugins of our build need to listen to the submit-event of LinkUI.formView or manipulate the listView of dropdown buttons, for example. And this should only happen once, I obviously don't want to bind events everytime a view is opened or manipulate a listView everytime it is shown.

[Witoso]

@niegowski I think we had somewhere an example but I'm not sure. Does it ring any bells on your side?

[niegowski]

@Witoso maybe you are looking for this? #4836 (comment)

[TobiasHartlehnert]

@Witoso maybe you are looking for this? #4836 (comment)

Thanks, listening to change:visibleView of ContextualBalloon works great. I figured this would be the solution, just wasn't sure if this is best practice in this scenario.

Now, this seems to work only for toolbars that are triggered by actions inside the editable, i.e. clicking on links or images. When clicking a button in the main editor toolbar that opens a dropdown (like the headings dropdown from the HeadingUI), change:visibleView of ContextualBalloon is not triggered. I need to now when the buttons of theses dropdowns are initially rendered/visible. What would be the correct emitter and event in this case?

[niegowski]

Maybe this will help with dropdowns:

ckeditor5/packages/ckeditor5-ui/src/dropdown/utils.ts

Lines 195 to 199 in 2cffea9

	if ( dropdownView.isOpen ) {
	addToolbarToOpenDropdown( dropdownView, buttonsOrCallback, options );
	} else {
	dropdownView.once(
	'change:isOpen',

I tested it in some manual test where the first toolbar item is a headings dropdown:

editor.ui.view.toolbar.items.first.once( 'change:isOpen', ( { source } ) => console.log( source.listView ) )

So more generic it would be:

dropdownView.once( 'change:isOpen', ( { source } ) => console.log( source.listView ) )

[TobiasHartlehnert]

Thanks, works great, too! Appreciate the quick help.