Ticket #47069: admin-bar-no-jquery-wip.diff

src/js/_enqueues/lib/admin-bar.js

@@ -12 +12 @@
                 /* jshint ignore:end */
         }
         jQuery(document).ready(function($){
-                var adminbar = $('#wpadminbar'), refresh, touchOpen, touchClose, disableHoverIntent = false;
+                var adminbar = $('#wpadminbar'), touchOpen, touchClose, disableHoverIntent = false;
 
                 /**
-                 * Forces the browser to refresh the tabbing index.
-                 *
-                 * @since 3.3.0
-                 *
-                 * @param {number}      i  The index of the HTML element to remove the tab index
-                 *                         from. This parameter is necessary because we use this
-                 *                         function in .each calls.
-                 * @param {HTMLElement} el The HTML element to remove the tab index from.
-                 *
-                 * @return {void}
-                 */
-                refresh = function(i, el){
-                        var node = $(el), tab = node.attr('tabindex');
-                        if ( tab )
-                                node.attr('tabindex', '0').attr('tabindex', tab);
-                };
-
-                /**
                  * Adds or removes the hover class on touch.
                  *
                  * @since 3.5.0
@@ -118 +100 @@
                         interval: 100
                 });
 
-                // Prevents the toolbar from covering up content when a hash is present in the
-                // URL.
-                if ( window.location.hash )
-                        window.scrollBy( 0, -32 );
-
                 /**
                  * Handles the selected state of the Shortlink link.
                  *
@@ -143 +120 @@
                 /**
                  * Removes the hoverclass if the enter key is pressed.
                  *
-                 * Makes sure the tab index is refreshed by refreshing each ab-item
-                 * and its children.
-                 *
                  * @param {Object} e The keydown event.
                  *
                  * @return {void}
@@ -170 +144 @@
                         if ( ! parentHasHover ) {
                                 target.parent().toggleClass('hover');
                         }
+                });
 
-                        target.siblings('.ab-sub-wrapper').find('.ab-item').each(refresh);
-                }).each(refresh);
-
                 /**
                  * Removes the hover class when the escape key is pressed.
                  *
-                 * Makes sure the tab index is refreshed by refreshing each ab-item
-                 * and its children.
-                 *
                  * @param {Object} e The keydown event.
                  *
                  * @return {void}
                  */
-                $('#wpadminbar .ab-item').bind('keydown.adminbar', function(e){
+                $('#wpadminbar .ab-item, .shortlink-input').bind('keydown.adminbar', function(e){
                         // Key code 27 is the escape key.
                         if ( e.which != 27 )
                                 return;
@@ -195 +164 @@
                         e.preventDefault();
 
                         target.closest('.hover').removeClass('hover').children('.ab-item').focus();
-                        target.siblings('.ab-sub-wrapper').find('.ab-item').each(refresh);
                 });
 
                 /**
@@ -214 +182 @@
                         $( 'html, body' ).animate( { scrollTop: 0 }, 'fast' );
                         e.preventDefault();
                 });
-
-                /**
-                 * Sets the focus on an element with a href attribute.
-                 *
-                 * The timeout is used to fix a focus bug in WebKit.
-                 *
-                 * @param {Object} e The keydown event.
-                 *
-                 * @return {void}
-                 */
-                $('.screen-reader-shortcut').keydown( function(e) {
-                        var id, ua;
-
-                        if ( 13 != e.which )
-                                return;
-
-                        id = $( this ).attr( 'href' );
-
-                        ua = navigator.userAgent.toLowerCase();
-
-                        if ( ua.indexOf('applewebkit') != -1 && id && id.charAt(0) == '#' ) {
-                                setTimeout(function () {
-                                        $(id).focus();
-                                }, 100);
-                        }
-                });
-
-                $( '#adminbar-search' ).on({
-                        /**
-                         * Adds the adminbar-focused class on focus.
-                         *
-                         * @return {void}
-                         */
-                        focus: function() {
-                                $( '#adminbarsearch' ).addClass( 'adminbar-focused' );
-                        /**
-                         * Removes the adminbar-focused class on blur.
-                         *
-                         * @return {void}
-                         */
-                        }, blur: function() {
-                                $( '#adminbarsearch' ).removeClass( 'adminbar-focused' );
-                        }
-                } );
-
-                if ( 'sessionStorage' in window ) {
-                        /**
-                         * Empties sessionStorage on logging out.
-                         *
-                         * @return {void}
-                         */
-                        $('#wp-admin-bar-logout a').click( function() {
-                                try {
-                                        for ( var key in sessionStorage ) {
-                                                if ( key.indexOf('wp-autosave-') != -1 )
-                                                        sessionStorage.removeItem(key);
-                                        }
-                                } catch(e) {}
-                        });
-                }
-
-                if ( navigator.userAgent && document.body.className.indexOf( 'no-font-face' ) === -1 &&
-                        /Android (1.0|1.1|1.5|1.6|2.0|2.1)|Nokia|Opera Mini|w(eb)?OSBrowser|webOS|UCWEB|Windows Phone OS 7|XBLWP7|ZuneWP7|MSIE 7/.test( navigator.userAgent ) ) {
-
-                        document.body.className += ' no-font-face';
-                }
         });
 } else {
         /**
@@ -312 +214 @@
                         }
                 },
 
-                aB, hc = new RegExp('\\bhover\\b', 'g'), q = [],
-                rselected = new RegExp('\\bselected\\b', 'g'),
+                aB, q = [],
 
                 /**
                  * Gets the timeout ID of the given element.
@@ -352 +253 @@
                                 if ( 'LI' == t.nodeName.toUpperCase() ) {
                                         ancestors[ ancestors.length ] = t;
                                         id = getTOID(t);
-                                        if ( id )
+                                        if ( id ) {
                                                 clearTimeout( id );
-                                        t.className = t.className ? ( t.className.replace(hc, '') + ' hover' ) : 'hover';
+                                        }
+                                        t.classList.add( 'hover' );
                                         hovering = t;
                                 }
                                 t = t.parentNode;
@@ -367 +269 @@
                                         i = ul.childNodes.length;
                                         while ( i-- ) {
                                                 li = ul.childNodes[i];
-                                                if ( li != hovering )
-                                                        li.className = li.className ? li.className.replace( rselected, '' ) : '';
+                                                if ( li != hovering ) {
+                                                        li.classList.remove( 'selected' );
+                                                }
+
                                         }
                                 }
                         }
@@ -383 +287 @@
                                                 inA = true;
                                 }
 
-                                if ( ! inA )
-                                        q[i][1].className = q[i][1].className ? q[i][1].className.replace(hc, '') : '';
+                                if ( ! inA ) {
+                                        q[i][1].classList.remove( 'hover' );
+                                }
                         }
                 },
 
@@ -402 +307 @@
                                 if ( 'LI' == t.nodeName.toUpperCase() ) {
                                         (function(t) {
                                                 var to = setTimeout(function() {
-                                                        t.className = t.className ? t.className.replace(hc, '') : '';
+                                                        t.classList.remove( 'hover' );
                                                 }, 500);
                                                 q[q.length] = [to, t];
                                         })(t);
@@ -441 +346 @@
                                 e.preventDefault();
                         e.returnValue = false;
 
-                        if ( -1 == t.className.indexOf('selected') )
-                                t.className += ' selected';
+                        if ( -1 == t.className.indexOf( 'selected' ) ) {
+                                t.classList.add( 'selected' );
+                        }
 
                         for ( i = 0, l = t.childNodes.length; i < l; i++ ) {
                                 node = t.childNodes[i];
@@ -450 +356 @@
                                         node.focus();
                                         node.select();
                                         node.onblur = function() {
-                                                t.className = t.className ? t.className.replace( rselected, '' ) : '';
+                                                t.classList.remove( 'selected' );
                                         };
                                         break;
                                 }
@@ -480 +386 @@
                                 return;
 
                         speed_step = distance > 800 ? 130 : 100;
-                        speed     = Math.min( 12, Math.round( distance / speed_step ) );
-                        step      = distance > 800 ? Math.round( distance / 30  ) : Math.round( distance / 20  );
-                        steps     = [];
-                        timer     = 0;
+                        speed      = Math.min( 12, Math.round( distance / speed_step ) );
+                        step       = distance > 800 ? Math.round( distance / 30  ) : Math.round( distance / 20  );
+                        steps      = [];
+                        timer      = 0;
 
                         // Animate scrolling to the top of the page by generating steps to
                         // the top of the page and shifting to each step at a set interval.
@@ -504 +410 @@
                 addEvent(w, 'load', function() {
                         aB = d.getElementById('wpadminbar');
 
-                        if ( d.body && aB ) {
-                                d.body.appendChild( aB );
-
+                        if ( aB ) {
                                 if ( aB.className )
                                         aB.className = aB.className.replace(/nojs/, '');
 
@@ -523 +427 @@
                                 addEvent(aB, 'click', function(e) {
                                         scrollToTop( e.target || e.srcElement );
                                 });
+                        }
+                });
+        })( document, window );
+}
 
-                                addEvent( document.getElementById('wp-admin-bar-logout'), 'click', function() {
-                                        if ( 'sessionStorage' in window ) {
-                                                try {
-                                                        for ( var key in sessionStorage ) {
-                                                                if ( key.indexOf('wp-autosave-') != -1 )
-                                                                        sessionStorage.removeItem(key);
-                                                        }
-                                                } catch(e) {}
+// Common functions.
+(function() {
+        /**
+         * Specify a function to execute when the DOM is fully loaded.
+         *
+         * Can be replaced by `@wordpress/dom-ready`.
+         *
+         * @param {Function} callback A function to execute after the DOM is ready.
+         *
+         * @returns {void}
+         */
+        var domReady = function( callback ) {
+                if ( document.readyState === 'complete' ) {
+                        return callback();
+                }
+
+                document.addEventListener( 'DOMContentLoaded', callback );
+        };
+
+        /*
+         * Clear any autosave in the session storage.
+         * Note: `sessionStorage` is cleared out also in `wp-login.php`.
+         */
+        var clearAutoSave = function() {
+                if ( 'sessionStorage' in window ) {
+                        document.querySelector( '#wp-admin-bar-logout .ab-item' ).addEventListener( 'click', function() {
+                                try {
+                                        for ( var key in sessionStorage ) {
+                                                if ( key.indexOf( 'wp-autosave-' ) !== -1 )
+                                                        sessionStorage.removeItem( key );
                                         }
-                                });
-                        }
+                                } catch( e ) {}
+                        } );
+                }
+        };
 
-                        if ( w.location.hash )
-                                w.scrollBy(0,-32);
+        domReady( clearAutoSave );
 
-                        if ( navigator.userAgent && document.body.className.indexOf( 'no-font-face' ) === -1 &&
-                                /Android (1.0|1.1|1.5|1.6|2.0|2.1)|Nokia|Opera Mini|w(eb)?OSBrowser|webOS|UCWEB|Windows Phone OS 7|XBLWP7|ZuneWP7|MSIE 7/.test( navigator.userAgent ) ) {
+        // Adds a `no-font-face` CSS class to the body for browsers that don't support font-face.
+        if ( navigator.userAgent && document.body.className.indexOf( 'no-font-face' ) === -1 &&
+                /Android (1.0|1.1|1.5|1.6|2.0|2.1)|Nokia|Opera Mini|w(eb)?OSBrowser|webOS|UCWEB|Windows Phone OS 7|XBLWP7|ZuneWP7|MSIE 7/.test( navigator.userAgent ) ) {
 
-                                document.body.className += ' no-font-face';
-                        }
-                });
-        })(document, window);
+                document.body.className += ' no-font-face';
+        }
 
-}
+        /*
+         * Prevents the toolbar from covering up content when a hash is present in the URL.
+         * Note: this works only when following a link with a hash from another page.
+         */
+        if ( window.location.hash ) {
+                // Looks like WebKit browsers need a setTimeout.
+                setTimeout( function() {
+                        window.scrollBy( 0, -32 );
+                }, 0 );
+        }
+})();

src/wp-admin/css/colors/_admin.scss

@@ -316 +316 @@
 #wpadminbar li .ab-item:focus:before,
 #wpadminbar li .ab-item:focus .ab-icon:before,
 #wpadminbar li.hover .ab-icon:before,
-#wpadminbar li.hover .ab-item:before,
-#wpadminbar li:hover #adminbarsearch:before,
-#wpadminbar li #adminbarsearch.adminbar-focused:before {
+#wpadminbar li.hover .ab-item:before {
         color: $menu-submenu-focus-text;
 }
 

src/wp-includes/admin-bar.php

@@ -1029 +1029 @@
         }
 
         $form  = '<form action="' . esc_url( home_url( '/' ) ) . '" method="get" id="adminbarsearch">';
+        $form .= '<label for="adminbar-search" class="screen-reader-text">' . __( 'Search' ) . '</label>';
         $form .= '<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />';
-        $form .= '<label for="adminbar-search" class="screen-reader-text">' . __( 'Search' ) . '</label>';
+        $form .= '<span class="adminbar-search-icon" aria-hidden="true"></span>';
         $form .= '<input type="submit" class="adminbar-button" value="' . __( 'Search' ) . '"/>';
         $form .= '</form>';
 

src/wp-includes/css/admin-bar.css

@@ -151 +151 @@
         float: none;
 }
 
-#wpadminbar.ie7 .menupop .ab-sub-wrapper,
-#wpadminbar.ie7 .shortlink-input {
-        top: 32px;
-        left: 0;
-}
-
 #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
         min-width: 100%;
 }
@@ -294 +288 @@
 #wpadminbar li .ab-item:focus .ab-icon:before,
 #wpadminbar li.hover .ab-icon:before,
 #wpadminbar li.hover .ab-item:before,
-#wpadminbar li:hover #adminbarsearch:before,
-#wpadminbar li #adminbarsearch.adminbar-focused:before {
+#adminbar-search:focus + .adminbar-search-icon::before {
         color: #00b9eb;
 }
 
@@ -424 +417 @@
         min-width: 270px;
 }
 
-#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar .ab-item {
-        white-space: nowrap;
-}
-
 #wpadminbar #wp-admin-bar-user-actions > li {
         margin-left: 16px;
         margin-right: 16px;
@@ -491 +480 @@
         display: inline;
 }
 
-#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
-#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > a img {
-        width: auto;
-}
-
 /**
  * WP Logo
  */
@@ -607 +591 @@
 /**
  * Search
  */
-#wpadminbar.ie8 #wp-admin-bar-search {
-        display: block;
-        min-width: 32px;
-}
 #wpadminbar #wp-admin-bar-search .ab-item {
         padding: 0;
         background: transparent;
@@ -623 +603 @@
         z-index: 1;
 }
 
-#wpadminbar #adminbarsearch:before {
+#wpadminbar #adminbar-search + .adminbar-search-icon::before {
         position: absolute;
         top: 6px;
         left: 5px;
@@ -671 +651 @@
         border: 0;
 }
 
-#wpadminbar.ie7 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
-        margin-top: 3px;
-        width: 120px;
-}
-
-#wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
-        /* IE8 z-index bug with transparent / empty elements - fill in with an encoded transparent GIF */
-        background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
-}
-
-/* IE8 doesn't redraw the pseudo elements unless you make a change to the content */
-#wpadminbar.ie8 #adminbarsearch.adminbar-focused:before {
-        content: "\f179 "; /* extra space */
-}
-
-#wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
-        background: #fff;
-        z-index: -1;
-}
-
 #wpadminbar #adminbarsearch .adminbar-button {
         display: none;
 }