Pre-filter the 'Available' plugin manager tab, allow multiple terms

core/src/main/resources/hudson/PluginManager/_table.css

@@ -1,6 +1,5 @@
 #filter-box {
-    background: white url('search.gif') no-repeat 2px center;
-    padding-left: 20px;
+    padding-left: 35px;
     width: 15em;
 }
 
@@ -10,7 +9,7 @@ time {
 
 #filter-container {
     margin: 1em;
-    text-align: right;
+    font-size: 1em;
 }
 .plugin-manager__categories {
     margin-top: 0.25em;
@@ -25,3 +24,42 @@ time {
     padding: 0 0.5rem;
     margin: 0 0.25rem 0.25rem 0;
 }
+
+.plugin-manager__search-input {
+    position: static;
+    padding: 0.25rem 0.1rem 0.25rem 2.5rem;
+    margin: 0;
+
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #4d545d;
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+
+    border-radius: 4px;
+    border: 1px solid grey;
+    outline: none;
+}
+
+.plugin-manager__search {
+    position: relative;
+}
+
+.plugin-manager__icon-leading {
+    position: absolute;
+    left: -2px;
+    top: -3px;
+    font-size: 15px;
+    padding: 0.5rem;
+}
+
+.main-search__icon-leading {
+    left: 0;
+    pointer-events: none;
+}
+
+
+.hidden-by-default {
+}
+.hidden {
+    display: none;
+}

core/src/main/resources/hudson/PluginManager/_table.js

@@ -9,30 +9,42 @@ function checkPluginsWithoutWarnings() {
 }
 
 Behaviour.specify("#filter-box", '_table', 0, function(e) {
-      function applyFilter() {
-          var filter = e.value.toLowerCase();
-          ["TR.plugin","TR.plugin-category"].each(function(clz) {
-            var encountered = {};
-            var items = document.getElementsBySelector(clz);
-            for (var i=0; i<items.length; i++) {
-                var visible = (filter=="" || items[i].innerHTML.toLowerCase().indexOf(filter)>=0);
-                var name = items[i].cells && items[i].cells.length > 1
-                        ? items[i].cells[1].getAttribute('data-id')
-                        : items[i].getAttribute("name");
-                if (visible && name != null) {
-                    if (encountered[name]) {
-                        visible = false;
-                    }
-                    encountered[name] = true;
+    function applyFilter() {
+        var filter = e.value.toLowerCase().trim();
+        var filterParts = filter.split(/ +/).filter (word => word.length > 0);
+        var items = document.getElementsBySelector("TR.plugin");
+        var anyVisible = false;
+        for (var i=0; i<items.length; i++) {
+            if ((filterParts.length < 1 || filter.length < 2) && items[i].hasClassName("hidden-by-default")) {
+                items[i].addClassName("hidden");
+                continue;
+            }
+            var makeVisible = true;
+
+            var content = items[i].innerHTML.toLowerCase();
+            for (var j = 0; j < filterParts.length; j++) {
+                var part = filterParts[j];
+                if (content.indexOf(part) < 0) {
+                    makeVisible = false;
+                    break;
                 }
-                items[i].style.display = (visible ? "" : "none");
             }
-          });
+            if (makeVisible) {
+                items[i].removeClassName("hidden");
+                anyVisible = true;
+            } else {
+                items[i].addClassName("hidden");
+            }
+        }
+        var instructions = document.getElementById("hidden-by-default-instructions")
+        if (instructions) {
+            instructions.style.display = anyVisible ? 'none' : '';
+        }
 
-          layoutUpdateCallback.call();
-      }
+        layoutUpdateCallback.call();
+    }
 
-      e.onkeyup = applyFilter;
+    e.onkeyup = applyFilter;
 });
 
 /**
@@ -407,3 +419,7 @@ Behaviour.specify("#filter-box", '_table', 0, function(e) {
         setEnableWidgetStates();
     });
 }());
+
+Element.observe(window, "load", function() {
+    document.getElementById('filter-box').focus();
+});

core/src/main/resources/hudson/PluginManager/available.jelly

@@ -27,5 +27,5 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
-  <local:table page="available" list="${app.updateCenter.availables}" xmlns:local="/hudson/PluginManager" />
+  <local:table page="available" list="${app.updateCenter.availables}" filtered="true" xmlns:local="/hudson/PluginManager" />
 </j:jelly>

core/src/main/resources/hudson/PluginManager/installed.jelly

@@ -39,10 +39,19 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly"/>
     <l:main-panel>
         <st:adjunct includes="hudson.PluginManager._table"/>
-        <div id="filter-container">
-            ${%Filter}:
-            <input type="text" id="filter-box"/>
+      <div id="filter-container">
+        <div class="plugin-manager__search">
+          <input
+              role="searchbox"
+              class="plugin-manager__search-input"
+              type="text"
+              id="filter-box"
+              placeholder="${filtered == 'true' ? '%search' : '%filter'}" />
+          <span class="plugin-manager__icon-leading">
+            <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" />
+          </span>
         </div>
+      </div>
 
       <j:if test="${app.updateCenter.isRestartRequiredForCompletion()}">
         <div class="alert alert-warning"><strong>${%Warning}</strong>: ${%requires.restart}</div>

core/src/main/resources/hudson/PluginManager/table.jelly

@@ -22,23 +22,37 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 
-<!--
-  Shared between index.jelly and available.jelly
-
-  Attributes:
-     list: variable to contain List<Plugin>
-     page: page name to be passed to local:tabBar
--->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
+  <st:documentation>
+    <!-- Shared between PluginManager/index.jelly and PluginManager/available.jelly -->
+    <st:attribute name="list">
+      Variable to contain List of Plugin
+    </st:attribute>
+    <st:attribute name="page">
+      Page name to be passed to local:tabBar; 'updates' or 'available'.
+    </st:attribute>
+    <st:attribute name="filtered">
+      If true, will hide all rows by default, and only the filter field will show them.
+    </st:attribute>
+  </st:documentation>
   <l:layout title="${%Update Center}" permission="${app.SYSTEM_READ}">
     <st:include page="sidepanel.jelly"/>
     <l:main-panel>
       <st:adjunct includes="hudson.PluginManager._table"/>
-      
+
       <div id="filter-container">
-        ${%Filter}:
-        <input type="text" id="filter-box"/>
+        <div class="plugin-manager__search">
+          <input
+              role="searchbox"
+              class="plugin-manager__search-input"
+              type="text"
+              id="filter-box"
+              placeholder="${filtered == 'true' ? '%search' : '%filter'}" />
+          <span class="plugin-manager__icon-leading">
+            <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" />
+          </span>
+        </div>
       </div>
 
       <form method="post" action="install">
@@ -60,11 +74,18 @@ THE SOFTWARE.
             <j:choose>
               <j:when test="${!empty(list)}">
                 <j:set var="cache" value="${it.createCache()}"/>
+                <j:if test="${filtered == 'true'}">
+                  <tr id="hidden-by-default-instructions">
+                    <td class="pane" colspan="5" align="center">
+                      ${%Use the search field above to search for available plugins.}
+                    </td>
+                  </tr>
+                </j:if>
                 <j:forEach var="p" items="${list}">
                   <j:set var="installJob" value="${isUpdates ? app.updateCenter.getJob(p) : null}" />
                   <j:set var="installedOk"
                          value="${installJob.status.success and installJob.plugin.version==p.version}" />
-                  <tr class="${installJob!=null ? 'already-upgraded' : ''} plugin" name="${p.displayName}">
+                  <tr class="${installJob!=null ? 'already-upgraded' : ''} plugin ${filtered == 'true' ? 'hidden hidden-by-default' : ''}" name="${p.displayName}">
                     <l:isAdmin>
                       <td class="pane" align="center">
                         <input type="checkbox" name="plugin.${p.name}.${p.sourceId}"