[Lorenz] Limit autocomplete results in filter input, favor best matches

Limit results to 20 and bubble up the ones whose class name starts with
the search term. This favors ".c.b.tabmodel.TabModelImpl" instead of
".c.b.tabmodel.Foo" for the search string "TabModel".

The main reason is performance, it takes a couple of seconds for the
browser to react when the search term is changed at the moment in
the class graph.

Bug: 1142610
Change-Id: I6e73a603114360bda561ca5c3e78f64f372f257d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2500463
Commit-Queue: Henrique Nakashima <hnakashima@chromium.org>
Reviewed-by: Samuel Huang <huangs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#821900}

tools/android/dependency_analysis/js/src/vue_components/graph_filter_input.vue

@@ -58,11 +58,54 @@ const GraphFilterInput = {
     },
 
     search: function(searchTerm) {
+      const RESULT_LIMIT = 20;
+
+      if (!searchTerm) {
+        return [];
+      }
+
+      // Best matches are ones that start with class name starting with the
+      // same letters as the search term.
+      const bestMatches = [];
+
+      // Other matches contain the search term, but either in the middle of the
+      // class name or in the package name.
+      const otherMatches = [];
+
       const searchTermLower = searchTerm.toLowerCase();
-      return this.nodeIdsSortedByShortNames.filter(name => {
-        return !this.nodesAlreadyInFilterSet.has(name) &&
-          name.toLowerCase().includes(searchTermLower);
-      });
+      for (let name of this.nodeIdsSortedByShortNames) {
+        const nameLower = name.toLowerCase();
+
+        // Match only nodes not already shown and that contain the search term.
+        if (this.nodesAlreadyInFilterSet.has(name) ||
+            !nameLower.includes(searchTermLower)) {
+          continue;
+        }
+
+        const lastPeriodIndex = nameLower.lastIndexOf('.');
+        let classNameLower;
+        if (lastPeriodIndex == -1) {
+          // Class has no package.
+          classNameLower = nameLower;
+        } else {
+          classNameLower = nameLower.substring(lastPeriodIndex + 1);
+        }
+
+        if (classNameLower.startsWith(searchTermLower)) {
+          bestMatches.push(name);
+          if (bestMatches.length >= RESULT_LIMIT) {
+            break;
+          }
+        } else {
+          if (otherMatches.length >= RESULT_LIMIT) {
+            continue;
+          }
+          otherMatches.push(name);
+        }
+      }
+
+      // Prefer best matches and return no more than 20 results.
+      return bestMatches.concat(otherMatches).slice(0, RESULT_LIMIT);
     },
 
     onSelectOption(nodeNameToAdd) {