mediawiki.util: Don't hardcode selectors in updateTooltipAccessKeys if possible

If we're running on a browser where we can do this efficiently, just
find all elements that have accesskeys using document.querySelectorAll.
We can't use jQuery's polyfill for the selector since looping over all
elements on page load might be too slow.

Otherwise (IE<=7, Firefox<=3), just as it was done previously, go
through some elements likely to have accesskeys and update only them.
Unfortunately this will not fully work for custom skins with different
HTML structures, but you can't have everything. Also added 'button' to
the selector used in this case.

Bug: 58255
Change-Id: I3306ac4b2d32a5f0f6567e6aab176ecd6682062f

diff --git a/resources/mediawiki/mediawiki.util.js b/resources/mediawiki/mediawiki.util.js
index 820cd0a..b3cb01c 100644 (file)
--- a/resources/mediawiki/mediawiki.util.js
+++ b/resources/mediawiki/mediawiki.util.js
@@ -304,18 +304,29 @@
 
                /**
                 * Add the appropriate prefix to the accesskey shown in the tooltip.
-                * If the nodeList parameter is given, only those nodes are updated;
-                * otherwise, all the nodes that will probably have accesskeys by
-                * default are updated.
+                *
+                * If the `$nodes` parameter is given, only those nodes are updated;
+                * otherwise, depending on browser support, we update either all elements
+                * with accesskeys on the page or a bunch of elements which are likely to
+                * have them on core skins.
                 *
                 * @param {Array|jQuery} [$nodes] A jQuery object, or array of nodes to update.
                 */
                updateTooltipAccessKeys: function ( $nodes ) {
                        if ( !$nodes ) {
-                               // Rather than going into a loop of all anchor tags, limit to few elements that
-                               // contain the relevant anchor tags.
-                               // Input and label are rare enough that no such optimization is needed
-                               $nodes = $( '#column-one a, #mw-head a, #mw-panel a, #p-logo a, input, label' );
+                               if ( document.querySelectorAll ) {
+                                       // If we're running on a browser where we can do this efficiently,
+                                       // just find all elements that have accesskeys. We can't use jQuery's
+                                       // polyfill for the selector since looping over all elements on page
+                                       // load might be too slow.
+                                       $nodes = $( document.querySelectorAll( '[accesskey]' ) );
+                               } else {
+                                       // Otherwise go through some elements likely to have accesskeys rather
+                                       // than looping over all of them. Unfortunately this will not fully
+                                       // work for custom skins with different HTML structures. Input, label
+                                       // and button should be rare enough that no optimizations are needed.
+                                       $nodes = $( '#column-one a, #mw-head a, #mw-panel a, #p-logo a, input, label, button' );
+                               }
                        } else if ( !( $nodes instanceof $ ) ) {
                                $nodes = $( $nodes );
                        }