Ticket #43058: 43058-3.patch

wp-admin/css/common-rtl.css

@@ -3045 +3045 @@
         box-sizing: border-box;
 }
 
+#plugin-files-search,
+#theme-files-search {
+        width: 100%;
+}
+
 #templateside > h2 {
         padding-top: 6px;
         padding-bottom: 7px;

wp-admin/css/common.css

@@ -3045 +3045 @@
         box-sizing: border-box;
 }
 
+#plugin-files-search,
+#theme-files-search {
+        width: 100%;
+}
+
 #templateside > h2 {
         padding-top: 6px;
         padding-bottom: 7px;

wp-admin/js/theme-plugin-editor.js

@@ -73 +73 @@
                         }
                         return undefined;
                 } );
+
+                var inputEvent;
+
+                /*
+                 * Use feature detection to determine whether inputs should use
+                 * the `keyup` or `input` event. Input is preferred but lacks support
+                 * in legacy browsers. See changeset 34078, see also ticket #26600#comment:59
+                 */
+                if ( 'oninput' in document.createElement( 'input' ) ) {
+                        inputEvent = 'input';
+                } else {
+                        inputEvent = 'keyup';
+                }
+
+                $( document ).on( inputEvent, '#plugin-files-search, #theme-files-search', component._searchFile);
         };
 
         /**
+         * Search file.
+         *
+         * @since 4.9.2
+         * @returns {void}
+         */
+        component._searchFile = function() {
+                var parent              = $('#templateside'),
+                        directories     = parent.find('ul ul li'),
+                        files           = parent.find('ul ul li a'),
+                        search_term     = $(this).val();
+
+                if( search_term.length ) {
+
+                        // Expand all directories for search file.
+                        // Hide Directories. Because, Below we show those directories
+                        // which have search term in the file name.
+                        directories.attr('aria-expanded', true).hide();
+
+                        // Search file and ONLY show these directories which "contain" the file name.
+                        var rex = new RegExp( search_term, 'i');
+                files.filter(function () {
+                                var file_name = $.trim( $(this).text() ) || '';
+                        return rex.test( file_name );
+                }).parents('li').show();
+
+                } else {
+        
+                        // Collapse & show all directories.
+                        directories.attr('aria-expanded', false).show();
+                }
+        };
+
+        /**
          * Set up and display the warning modal.
          *
          * @since 4.9.0

wp-admin/plugin-editor.php

@@ -239 +239 @@
 
 <div id="templateside">
         <h2 id="plugin-files-label"><?php _e( 'Plugin Files' ); ?></h2>
+        <label for="plugin-files-search" class="screen-reader-text"><?php esc_html_e( 'Search file..' ); ?></label>
+        <input id="plugin-files-search" name="plugin-files-search" type="search" placeholder="<?php esc_html_e( 'Search file..' ); ?>">
 
         <?php
         $plugin_editable_files = array();

wp-admin/theme-editor.php

@@ -243 +243 @@
 ?>
 <div id="templateside">
         <h2 id="theme-files-label"><?php _e( 'Theme Files' ); ?></h2>
+        <label for="theme-files-search" class="screen-reader-text"><?php esc_html_e( 'Search file..' ); ?></label>
+        <input id="theme-files-search" name="theme-files-search" type="search" placeholder="<?php esc_html_e( 'Search file..' ); ?>">
+
         <ul role="tree" aria-labelledby="theme-files-label">
                 <?php if ( ( $has_templates || $theme->parent() ) && $theme->parent() ) : ?>
                         <li class="howto">