[ve] Annotate a few missed things.

Namely search pane, filter bar, performance monitor checkboxes and dock side menu item.

Bug: chromium:1467464
Change-Id: I8aef65643b0197f5d03a37a828f5eac8c4811597
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5335168
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: danilsomsikov

front_end/entrypoints/main/MainImpl.ts

@@ -817,11 +817,15 @@ export class MainMenuItem implements UI.Toolbar.Provider {
           i18nString(UIStrings.placementOfDevtoolsRelativeToThe, {PH1: toggleDockSideShorcuts[0].title()}));
       dockItemElement.appendChild(titleElement);
       const dockItemToolbar = new UI.Toolbar.Toolbar('', dockItemElement);
+      dockItemElement.setAttribute('jslog', `${VisualLogging.item('dock-side')}`);
       dockItemToolbar.makeBlueOnHover();
-      const undock = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.undockIntoSeparateWindow), 'dock-window');
-      const bottom = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.dockToBottom), 'dock-bottom');
-      const right = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.dockToRight), 'dock-right');
-      const left = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.dockToLeft), 'dock-left');
+      const undock = new UI.Toolbar.ToolbarToggle(
+          i18nString(UIStrings.undockIntoSeparateWindow), 'dock-window', undefined, 'undock');
+      const bottom =
+          new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.dockToBottom), 'dock-bottom', undefined, 'dock-bottom');
+      const right =
+          new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.dockToRight), 'dock-right', undefined, 'dock-right');
+      const left = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.dockToLeft), 'dock-left', undefined, 'dock-left');
       undock.addEventListener(UI.Toolbar.ToolbarButton.Events.MouseDown, event => event.data.consume());
       bottom.addEventListener(UI.Toolbar.ToolbarButton.Events.MouseDown, event => event.data.consume());
       right.addEventListener(UI.Toolbar.ToolbarButton.Events.MouseDown, event => event.data.consume());

front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -655,6 +655,8 @@ export class MetricIndicator {
     UI.ARIAUtils.markAsCheckbox(this.element);
     UI.ARIAUtils.setChecked(this.element, this.active);
     this.element.tabIndex = 0;
+    const chartName = info.metrics[0].name;
+    this.element.setAttribute('jslog', `${VisualLogging.toggle(chartName).track({click: true})}`);
   }
 
   static formatNumber(value: number, info: ChartInfo): string {

front_end/ui/legacy/FilterBar.ts

@@ -219,7 +219,6 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEve
     this.filterElement.className = 'filter-text-filter';
 
     const container = this.filterElement.createChild('div', 'filter-input-container');
-    container.setAttribute('jslog', `${VisualLogging.toggle('text-filter').track({click: true, keydown: true})}`);
     this.filterInputElement = container.createChild('span', 'filter-input-field');
 
     this.prompt = new TextPrompt();
@@ -240,6 +239,7 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEve
       this.clear();
       this.focus();
     });
+    clearButton.setAttribute('jslog', `${VisualLogging.action('clear-filter').track({click: true})}`);
     this.updateEmptyStyles();
   }
 

front_end/ui/legacy/SearchableView.ts

@@ -36,6 +36,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {HistoryInput} from './HistoryInput.js';
@@ -137,9 +138,10 @@ export class SearchableView extends VBox {
     this.footerElementContainer = this.contentElement.createChild('div', 'search-bar hidden');
     this.footerElementContainer.style.order = '100';
     this.footerElement = this.footerElementContainer.createChild('div', 'toolbar-search');
+    this.footerElement.setAttribute('jslog', `${VisualLogging.toolbar('search').track({resize: true})}`);
 
     const replaceToggleToolbar = new Toolbar('replace-toggle-toolbar', this.footerElement);
-    this.replaceToggleButton = new ToolbarToggle(i18nString(UIStrings.replace), 'replace');
+    this.replaceToggleButton = new ToolbarToggle(i18nString(UIStrings.replace), 'replace', undefined, 'repalce');
     this.replaceToggleButton.addEventListener(ToolbarButton.Events.Click, this.toggleReplace, this);
     replaceToggleToolbar.appendToolbarItem(this.replaceToggleButton);
 
@@ -151,6 +153,7 @@ export class SearchableView extends VBox {
     this.searchInputElement.classList.add('search-replace', 'custom-search-input');
     this.searchInputElement.id = 'search-input-field';
     this.searchInputElement.placeholder = i18nString(UIStrings.findString);
+    this.searchInputElement.setAttribute('jslog', `${VisualLogging.textField('search').track({change: true})}`);
     searchControlElement.appendChild(this.searchInputElement);
 
     this.matchesElement = searchControlElement.createChild('label', 'search-results-matches');
@@ -163,34 +166,40 @@ export class SearchableView extends VBox {
     this.searchNavigationPrevElement.addEventListener('click', this.onPrevButtonSearch.bind(this), false);
     Tooltip.install(this.searchNavigationPrevElement, i18nString(UIStrings.searchPrevious));
     ARIAUtils.setLabel(this.searchNavigationPrevElement, i18nString(UIStrings.searchPrevious));
+    this.searchNavigationPrevElement.setAttribute(
+        'jslog', `${VisualLogging.action('select-previous').track({click: true})}`);
 
     this.searchNavigationNextElement =
         searchNavigationElement.createChild('div', 'toolbar-search-navigation toolbar-search-navigation-next');
     this.searchNavigationNextElement.addEventListener('click', this.onNextButtonSearch.bind(this), false);
     Tooltip.install(this.searchNavigationNextElement, i18nString(UIStrings.searchNext));
     ARIAUtils.setLabel(this.searchNavigationNextElement, i18nString(UIStrings.searchNext));
+    this.searchNavigationPrevElement.setAttribute(
+        'jslog', `${VisualLogging.action('select-next').track({click: true})}`);
 
     this.searchInputElement.addEventListener('keydown', this.onSearchKeyDown.bind(this), true);
     this.searchInputElement.addEventListener('input', this.onInput.bind(this), false);
     this.replaceInputElement =
         (searchInputElements.createChild('input', 'search-replace toolbar-replace-control hidden') as HTMLInputElement);
     this.replaceInputElement.addEventListener('keydown', this.onReplaceKeyDown.bind(this), true);
     this.replaceInputElement.placeholder = i18nString(UIStrings.replace);
+    this.replaceInputElement.setAttribute('jslog', `${VisualLogging.textField('replace').track({change: true})}`);
 
     this.buttonsContainer = this.footerElement.createChild('div', 'toolbar-search-buttons');
     const firstRowButtons = this.buttonsContainer.createChild('div', 'first-row-buttons');
 
     const toolbar = new Toolbar('toolbar-search-options', firstRowButtons);
 
     if (this.searchProvider.supportsCaseSensitiveSearch()) {
-      this.caseSensitiveButton = new ToolbarToggle(i18nString(UIStrings.matchCase));
+      this.caseSensitiveButton = new ToolbarToggle(i18nString(UIStrings.matchCase), undefined, undefined, 'match-case');
       this.caseSensitiveButton.setText('Aa');
       this.caseSensitiveButton.addEventListener(ToolbarButton.Events.Click, this.toggleCaseSensitiveSearch, this);
       toolbar.appendToolbarItem(this.caseSensitiveButton);
     }
 
     if (this.searchProvider.supportsRegexSearch()) {
-      this.regexButton = new ToolbarToggle(i18nString(UIStrings.useRegularExpression));
+      this.regexButton =
+          new ToolbarToggle(i18nString(UIStrings.useRegularExpression), undefined, undefined, 'regex-search');
       this.regexButton.setText('.*');
       this.regexButton.addEventListener(ToolbarButton.Events.Click, this.toggleRegexSearch, this);
       toolbar.appendToolbarItem(this.regexButton);

front_end/ui/legacy/SoftContextMenu.ts

@@ -253,7 +253,7 @@ export class SoftContextMenu {
       subMenuTimer: undefined,
     };
 
-    if (item.jslogContext) {
+    if (item.jslogContext && !item.element?.hasAttribute('jslog')) {
       if (item.type === 'checkbox') {
         menuItemElement.setAttribute(
             'jslog', `${VisualLogging.toggle().track({click: true}).context(item.jslogContext)}`);