No critical changes (internal changes)

PiperOrigin-RevId: 646106456

plugin/trace_viewer/tf_trace_viewer/tf-trace-viewer.html

@@ -294,6 +294,7 @@
       _hosts: {type: Array, value: []},
       _selectedHosts: {type: Array, value: []},
       _showFilterForm: {type: Boolean, value: true},
+      _enableServerSideSearch: {type: Boolean, value: false},
     },
 
     ready: function() {
@@ -344,6 +345,9 @@
           max: Number(query.searchParams.get('view_end')),
         };
       }
+      if (query.searchParams.has('full_search')) {
+        this._enableServerSideSearch = true;
+      }
       query.searchParams.forEach(function(value, key, searchParams) {
         if (key === 'trace_data_url') {
           this.traceDataUrl = value;
@@ -679,6 +683,76 @@
      *************************************************************
      */
 
+    _searchAndAddTraceEvent: async function(searchText) {
+      if (this._isLoading) return;
+      const requestURL = this._buildBaseURL();
+      requestURL.searchParams.set('replace_model', 'false');
+      requestURL.searchParams.set('resolution', 0);
+      requestURL.searchParams.set('trace_filter_config', `{"device_regexes":[],"resource_regexes":[],"trace_event_filters":[{"field":"name","op":0,"regex_value":"${searchText}"}]}`);
+      this._isLoading = true;
+      this._throbber.className = 'active';
+      const searchData = await new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', requestURL);
+        xhr.onload = function() {
+          var contentType = this.getResponseHeader('Content-Type');
+          if (
+            this.status !== 200 ||
+            !contentType.startsWith('application/json')
+          ) {
+            var msg = requestURL + ' could not be loaded';
+            if (contentType.startsWith('text/plain')) {
+              msg = msg + ': ' + xhr.statusText;
+            }
+            reject(msg);
+          }
+          resolve(xhr.response);
+        };
+        xhr.onerror = function() {
+          reject(`Cannot fetch search result with uri ${requestURL}: ${xhr.statusText}`);
+        };
+        xhr.send();
+      });
+      this._isLoading = false;
+      this._throbber.className = 'inactive';
+      try {
+        await this._updateModel(searchData, false);
+        // Appending searched events won't change the loadedRange
+        await this._updateView(_loadedRange);
+      } catch (err) {
+        console.error('Fetch search result failed:', err);
+        this._displayOverlay('Trace Viewer fetch search result failed: ', err);
+      }
+    },
+
+    _updateSearchBehavior: function() {
+      const findController = document.querySelector('tr-ui-find-control');
+
+      const originalFilterKeyDown = findController.filterKeyDown;
+      const originalFilterTextChange = findController.filterTextChanged;
+      let lastFilterText = '';
+      findController.filterKeyDown = async (keyEvent) => {
+        // Add server side search logic when pressing enter key.
+        if (keyEvent.keyCode === 13) {
+          const currentFilterText = findController.$.filter.value;
+          if (currentFilterText !== lastFilterText) {
+            // If the search text is changed, do server side search.
+            await this._searchAndAddTraceEvent(currentFilterText);
+            lastFilterText = currentFilterText;
+            // Followed by client search, to unblock navigation while the request if pending
+            // TODO: remove this if the search request is fast enough.
+            originalFilterTextChange.apply(findController);
+          } else {
+            // If the search text is not changed, do client side search.
+            originalFilterKeyDown.apply(findController, [keyEvent]);
+          }
+        } else {
+          // Fallback to client search behavior for all other cases
+          originalFilterKeyDown.apply(findController, [keyEvent]);
+        }
+      };
+    },
+
     _createDetailFilter: function() {
       const detailsSelector = document.createElement('tr-ui-b-dropdown');
       detailsSelector.setAttribute('id', 'details_selector');
@@ -757,6 +831,9 @@
         }
         this._createDetailFilter();
         this._createPerfettoButton();
+        if (this._enableServerSideSearch && !this._isOss) {
+          this._updateSearchBehavior();
+        }
       }
       let initialRequestedRange = null;
       if (initialViewportRange) {
@@ -1031,7 +1108,7 @@
         this._selectedDeviceIds = null;
       }
 
-      data.traceEvents = this._filterKnownTraceEvents(data.traceEvents);
+      data.traceEvents = this._filterKnownTraceEvents(data.traceEvents || []);
       if (data.traceEvents.length > 0) {
         var opt = new tr.importer.ImportOptions();
         opt.shiftWorldToZero = false;