Customizer panels/sections/controls with equal priorities do not sort in order of addition

[westonruter]

The blogname, blogdescription, and display_header_text controls get added with the same priority of 10, but they are expected to be rendered in the order of creation. This has historically been the case, but with the move to a JS-rendered Customizer pane (#28709), the sort order is no longer reliable since Array.sort is not stable in many browsers, and so sorting two controls with the same priority results in an undefined order once the sort is complete. The situation is the same for panels and sections: their order is not consistent across browsers if identical priorities are used.

In the past, identical priorities were addressed in PHP with logic like this in WP_Customize_Manager::prepare_controls():

// Prepare sections.
// Reversing makes uasort sort by time added when conflicts occur.
$this->sections = array_reverse( $this->sections );
uasort( $this->sections, array( $this, '_cmp_priority' ) );

This, however, does not help on the JS side of things. Sort stability needs to be implemented in JS.

[westonruter]

30225.diff​ adds stable sorting for panels, sections, controls in JS and improves in PHP. Panel, Section, and Control classes get a new static protected variable $instance_count, and when new instances are created this is incremented and the value is stored in an instance's $instance_number. This value is then used to sort the objects when their priorities are equal, thus resulting in a stable sort.

[westonruter]

​https://github.com/xwpco/wordpress-develop/pull/49

[ocean90]

In 30214:

Customizer: Add stable sorting for panels, sections and controls in JS. Improve sorting in PHP.

props westonruter.
fixes #30225.

[ocean90]

#20733 was marked as a duplicate.

[westonruter]

See fixed typo in #34594.