Customizer: autofocus should load as soon as the panel/section/control is active

[celloexpressions]

Currently, autofocusing waits until the preview loads fully, which can take quite a while on a lot of pages and themes. Widgets need to wait for this to determine whether they should be activated, but for most other sections, we should be able to autofocus as soon as the Customizer controls finish loading. For menus, this would shave seconds off of the percieved loading time of the Customizer. See ​https://make.wordpress.org/flow/2015/06/14/menus-in-the-admin-and-the-customizer-ux-flow-performance-comparisons/.

[obenland]

@celloexpressions, can you add a patch here?

[valendesigns]

@celloexpressions do you have time to patch this issue? If not, can you share your thoughts on how to do it?

[celloexpressions]

Will dig some when I get a chance and determine whether this is viable for 4.3. Unless you have time before I get to it @valendesigns, in which case go for it. I haven't looked at the internals yet here, but I think there's a good chance it's a reasonably contained adjustment that would call focus as soon as the section is first visible or rendered or something along those lines, deferring if it's not yet active until it does become active.

[westonruter]

The logic in customize-controls.js that handles the expansion:

// Focus the autofocused element
_.each( [ 'panel', 'section', 'control' ], function ( type ) {
        var instance, id = api.settings.autofocus[ type ];
        if ( id && api[ type ]( id ) ) {
                instance = api[ type ]( id );
                // Wait until the element is embedded in the DOM
                instance.deferred.embedded.done( function () {
                        // Wait until the preview has activated and so active panels, sections, controls have been set
                        api.previewer.deferred.active.done( function () {
                                instance.focus();
                        });
                });
        }
});

So you can see that it waits until the panel, section, or control is embedded into the document until it focuses on the element. If we wanted to make it so that the top-level sections aren't shown at the initial load, then we should probably hide the pane and show a spinner, and wrap the focus call in an expand call with a duration of 0 to skip the animation, for instance:

instance.expand({
    completeCallback: function() {
        instance.focus();
    },
    duration: 0
});

There's too much work to do here for 4.3 I think, so it should be punted. Also this it is going to be heavily impacted by #28580 since if we're requesting autofocus of a certain section, then the controls and their settings in the section should be pre-loaded up-front. If there is no autofocus, then we can defer the loading of the controls/settings until the section is expanded.

[westonruter]

@joop54.vwsetup.net why did you remove the javascript focus?

[westonruter]

See also #33052 (Widgets section in customize late to show up).

[celloexpressions]

This is most noticeable for deep links that core has to the theme installer in the customizer. We'd also want to get this fixed before deep linking to widgets if the widgets screen gets replaced with a deep link to the customizer panel.