Remove one of two toolbar comboboxes. We had ToolbarCombobox and ToolbarComboBox

The former is a base class of ToolbarMenuButton, and otherwise is only used in the NetworkLogView, with a use case that better fits ToolbarMenuButton. 

Therefore, keeping ToolbarComboBox and removing the ToolbarCombobox, but folding it into the ToolbarMenuButton and migrating the NetworkLogView to it.

Had to update NetworkLogView test as these were reliant on the soft context menu DOM structure. 

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

Author: danilsomsikov

front_end/panels/network/NetworkLogView.test.ts

@@ -5,6 +5,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -13,13 +14,10 @@ import * as Logs from '../../models/logs/logs.js';
 import {
   findMenuItemWithLabel,
   getContextMenuForElement,
+  getMenu,
   getMenuItemLabels,
 } from '../../testing/ContextMenuHelpers.js';
-import {
-  dispatchClickEvent,
-  dispatchMouseUpEvent,
-  raf,
-} from '../../testing/DOMHelpers.js';
+import {dispatchClickEvent, raf} from '../../testing/DOMHelpers.js';
 import {createTarget, registerNoopActions, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {expectCalled} from '../../testing/ExpectStubCall.js';
 import {stubFileManager} from '../../testing/FileManagerHelpers.js';
@@ -386,42 +384,45 @@ describeWithMockConnection('NetworkLogView', () => {
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()),
         [urlString`chrome-extension://url1`, urlString`url2`]);
 
-    const dropdown = await openMoreTypesDropdown(filterBar, networkLogView);
+    const dropdown = await getMoreTypesDropdown(filterBar);
     if (!dropdown) {
       return;
     }
-    const softMenu = getSoftMenu();
-    const hideExtensionURL = getDropdownItem(softMenu, 'Hide extension URLs');
-    assert.isFalse(hideExtensionURL.hasAttribute('checked'));
-    dispatchMouseUpEvent(hideExtensionURL);
-    await raf();
-    assert.isTrue(hideExtensionURL.hasAttribute('checked'));
+    let softMenu = getMenu(() => dropdown.click());
+    let hideExtensionURL = getDropdownItem(softMenu, 'Hide extension URLs');
+    assert.isFalse(hideExtensionURL.buildDescriptor().checked);
+    softMenu.invokeHandler(hideExtensionURL.id());
+    softMenu.discard();
+
+    softMenu = getMenu(() => dropdown.click());
+    hideExtensionURL = getDropdownItem(softMenu, 'Hide extension URLs');
+    assert.isTrue(hideExtensionURL.buildDescriptor().checked);
 
     assert.deepEqual(
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()), [urlString`url2`]);
 
-    dropdown.discard();
+    softMenu.discard();
   });
 
   it('displays correct count for more filters', async () => {
     Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN);
     let filterBar;
     ({filterBar, networkLogView} = createEnvironment());
-    const dropdown = await openMoreTypesDropdown(filterBar, networkLogView);
+    const dropdown = await getMoreTypesDropdown(filterBar);
     if (!dropdown) {
       return;
     }
 
     assert.strictEqual(getMoreFiltersActiveCount(filterBar), '0');
     assert.isTrue(getCountAdorner(filterBar)?.classList.contains('hidden'));
 
-    const softMenu = getSoftMenu();
+    const softMenu = getMenu(() => dropdown.click());
     await selectMoreFiltersOption(softMenu, 'Hide extension URLs');
 
     assert.strictEqual(getMoreFiltersActiveCount(filterBar), '1');
     assert.isFalse(getCountAdorner(filterBar)?.classList.contains('hidden'));
 
-    dropdown.discard();
+    softMenu.discard();
   });
 
   it('can filter requests with blocked response cookies from checkbox', async () => {
@@ -460,67 +461,66 @@ describeWithMockConnection('NetworkLogView', () => {
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()),
         [urlString`url1`, urlString`url2`]);
 
-    const dropdown = await openMoreTypesDropdown(filterBar, networkLogView);
+    const dropdown = await getMoreTypesDropdown(filterBar);
     if (!dropdown) {
       return;
     }
-    const softMenu = getSoftMenu();
-    const blockedResponseCookies = getDropdownItem(softMenu, 'Blocked response cookies');
-    assert.isFalse(blockedResponseCookies.hasAttribute('checked'));
-    dispatchMouseUpEvent(blockedResponseCookies);
-    await raf();
-    assert.isTrue(blockedResponseCookies.hasAttribute('checked'));
+    let softMenu = getMenu(() => dropdown.click());
+    let blockedResponseCookies = getDropdownItem(softMenu, 'Blocked response cookies');
+    assert.isFalse(blockedResponseCookies.buildDescriptor().checked);
+    softMenu.invokeHandler(blockedResponseCookies.id());
+    softMenu.discard();
+
+    softMenu = getMenu(() => dropdown.click());
+    blockedResponseCookies = getDropdownItem(softMenu, 'Blocked response cookies');
+    assert.isTrue(blockedResponseCookies.buildDescriptor().checked);
 
     assert.deepEqual(rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()), [
       urlString`url1`,
     ]);
 
-    dropdown.discard();
+    softMenu.discard();
   });
 
   it('lists selected options in more filters tooltip', async () => {
     Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN);
     let filterBar;
     ({filterBar, networkLogView} = createEnvironment());
 
-    const dropdown = await openMoreTypesDropdown(filterBar, networkLogView);
+    const dropdown = await getMoreTypesDropdown(filterBar);
     assert.exists(dropdown);
 
-    const button = dropdown.element().querySelector('.toolbar-button');
-    assert.instanceOf(button, HTMLElement);
-    assert.strictEqual(button.title, 'Show only/hide requests');
+    assert.strictEqual(dropdown.title, 'Show only/hide requests');
 
-    const softMenu = getSoftMenu();
+    const softMenu = getMenu(() => dropdown.click());
     await selectMoreFiltersOption(softMenu, 'Blocked response cookies');
     await selectMoreFiltersOption(softMenu, 'Hide extension URLs');
 
-    assert.strictEqual(button.title, 'Hide extension URLs, Blocked response cookies');
+    assert.strictEqual(dropdown.title, 'Hide extension URLs, Blocked response cookies');
 
-    dropdown.discard();
+    softMenu.discard();
   });
 
   it('updates tooltip to default when more filters option deselected', async () => {
     Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN);
     let filterBar;
     ({filterBar, networkLogView} = createEnvironment());
 
-    const dropdown = await openMoreTypesDropdown(filterBar, networkLogView);
+    const dropdown = await getMoreTypesDropdown(filterBar);
     assert.exists(dropdown);
 
-    const button = dropdown.element().querySelector('.toolbar-button');
-    assert.instanceOf(button, HTMLElement);
-    assert.strictEqual(button.title, 'Show only/hide requests');
+    assert.strictEqual(dropdown.title, 'Show only/hide requests');
 
-    const softMenu = getSoftMenu();
+    const softMenu = getMenu(() => dropdown.click());
     await selectMoreFiltersOption(softMenu, 'Blocked response cookies');
 
-    assert.strictEqual(button.title, 'Blocked response cookies');
+    assert.strictEqual(dropdown.title, 'Blocked response cookies');
 
     await selectMoreFiltersOption(softMenu, 'Blocked response cookies');
 
-    assert.strictEqual(button.title, 'Show only/hide requests');
+    assert.strictEqual(dropdown.title, 'Show only/hide requests');
 
-    dropdown.discard();
+    softMenu.discard();
   });
 
   it('can remove requests', async () => {
@@ -977,15 +977,9 @@ function getCheckbox(filterBar: UI.FilterBar.FilterBar, title: string) {
   return checkbox;
 }
 
-async function openMoreTypesDropdown(
-    filterBar: UI.FilterBar.FilterBar, networkLogView: Network.NetworkLogView.NetworkLogView):
-    Promise<Network.NetworkLogView.MoreFiltersDropDownUI|undefined> {
-  const button = filterBar.element.querySelector('[aria-label="Show only/hide requests dropdown"]')
-                     ?.querySelector('.toolbar-button');
-  button?.dispatchEvent(new Event('click'));
-  await raf();
-  const dropdown = networkLogView.getMoreFiltersDropdown();
-  return dropdown;
+async function getMoreTypesDropdown(filterBar: UI.FilterBar.FilterBar): Promise<HTMLElement> {
+  return filterBar.element.querySelector('[aria-label="Show only/hide requests dropdown"]')
+             ?.querySelector('.toolbar-button') as HTMLElement;
 }
 
 function getCountAdorner(filterBar: UI.FilterBar.FilterBar): HTMLElement|null {
@@ -1000,22 +994,15 @@ function getMoreFiltersActiveCount(filterBar: UI.FilterBar.FilterBar): string {
   return count;
 }
 
-function getSoftMenu(): HTMLElement {
-  const container = document.querySelector('div[data-devtools-glass-pane]');
-  const softMenu = container!.shadowRoot!.querySelector('.soft-context-menu');
-  assert.instanceOf(softMenu, HTMLElement);
-  return softMenu;
-}
-
-function getDropdownItem(softMenu: HTMLElement, label: string) {
-  const item = softMenu?.querySelector(`[aria-label^="${label}"]`);
-  assert.instanceOf(item, HTMLElement);
+function getDropdownItem(softMenu: UI.ContextMenu.ContextMenu, label: string) {
+  const item = findMenuItemWithLabel(softMenu.defaultSection(), label);
+  assertNotNullOrUndefined(item);
   return item;
 }
 
-async function selectMoreFiltersOption(softMenu: HTMLElement, option: string) {
+async function selectMoreFiltersOption(softMenu: UI.ContextMenu.ContextMenu, option: string) {
   const item = getDropdownItem(softMenu, option);
-  dispatchMouseUpEvent(item);
+  softMenu.invokeHandler(item.id());
   await raf();
 }
 

front_end/panels/network/NetworkLogView.ts

@@ -2652,10 +2652,10 @@ export const overrideFilter = {
 
 export type Filter = (request: SDK.NetworkRequest.NetworkRequest) => boolean;
 
-export class MoreFiltersDropDownUI extends
-    Common.ObjectWrapper.ObjectWrapper<UI.FilterBar.FilterUIEventTypes> implements UI.FilterBar.FilterUI {
+export class MoreFiltersDropDownUI extends Common.ObjectWrapper.ObjectWrapper<UI.FilterBar.FilterUIEventTypes>
+    implements UI.FilterBar.FilterUI {
   private readonly filterElement: HTMLDivElement;
-  private readonly dropDownButton: UI.Toolbar.ToolbarCombobox;
+  private readonly dropDownButton: UI.Toolbar.ToolbarMenuButton;
   private networkHideDataURLSetting: Common.Settings.Setting<boolean>;
   private networkHideChromeExtensionsSetting: Common.Settings.Setting<boolean>;
   private networkShowBlockedCookiesOnlySetting: Common.Settings.Setting<boolean>;
@@ -2691,75 +2691,66 @@ export class MoreFiltersDropDownUI extends
     this.activeFiltersCountAdorner.classList.add('active-filters-count');
     this.updateActiveFiltersCount();
 
-    this.dropDownButton = new UI.Toolbar.ToolbarCombobox(i18nString(UIStrings.showOnlyHideRequests));
+    this.dropDownButton = new UI.Toolbar.ToolbarMenuButton(
+        this.showMoreFiltersContextMenu.bind(this), /* isIconDropdown=*/ false, /* useSoftMenu=*/ true,
+        /* jslogContext=*/ undefined, /* iconName=*/ undefined,
+        /* keepOpen=*/ true);
+    this.dropDownButton.setTitle(i18nString(UIStrings.showOnlyHideRequests));
     this.dropDownButton.setText(i18nString(UIStrings.moreFilters));
     this.dropDownButton.setAdorner(this.activeFiltersCountAdorner);
     this.filterElement.appendChild(this.dropDownButton.element);
     this.dropDownButton.element.classList.add('dropdown-filterbar');
-    this.dropDownButton.addEventListener(
-        UI.Toolbar.ToolbarButton.Events.CLICK, this.showMoreFiltersContextMenu.bind(this));
-    UI.ARIAUtils.markAsMenuButton(this.dropDownButton.element);
     this.updateTooltip();
   }
 
   #onSettingChanged(): void {
     this.dispatchEventToListeners(UI.FilterBar.FilterUIEvents.FILTER_CHANGED);
   }
 
-  showMoreFiltersContextMenu(event: Common.EventTarget.EventTargetEvent<Event>): void {
-    const mouseEvent = event.data;
-
+  showMoreFiltersContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
     this.networkHideDataURLSetting.addChangeListener(this.#onSettingChanged.bind(this));
     this.networkHideChromeExtensionsSetting.addChangeListener(this.#onSettingChanged.bind(this));
     this.networkShowBlockedCookiesOnlySetting.addChangeListener(this.#onSettingChanged.bind(this));
     this.networkOnlyBlockedRequestsSetting.addChangeListener(this.#onSettingChanged.bind(this));
     this.networkOnlyThirdPartySetting.addChangeListener(this.#onSettingChanged.bind(this));
-    this.contextMenu = new UI.ContextMenu.ContextMenu(mouseEvent, {
-      useSoftMenu: true,
-      keepOpen: true,
-      x: this.dropDownButton.element.getBoundingClientRect().left,
-      y: this.dropDownButton.element.getBoundingClientRect().top + (this.dropDownButton.element).offsetHeight,
-    });
 
-    this.contextMenu.defaultSection().appendCheckboxItem(
+    contextMenu.defaultSection().appendCheckboxItem(
         i18nString(UIStrings.hideDataUrls),
         () => this.networkHideDataURLSetting.set(!this.networkHideDataURLSetting.get()), {
           checked: this.networkHideDataURLSetting.get(),
           tooltip: i18nString(UIStrings.hidesDataAndBlobUrls),
           jslogContext: 'hide-data-urls',
         });
-    this.contextMenu.defaultSection().appendCheckboxItem(
+    contextMenu.defaultSection().appendCheckboxItem(
         i18nString(UIStrings.chromeExtensions),
         () => this.networkHideChromeExtensionsSetting.set(!this.networkHideChromeExtensionsSetting.get()), {
           checked: this.networkHideChromeExtensionsSetting.get(),
           tooltip: i18nString(UIStrings.hideChromeExtension),
           jslogContext: 'hide-extension-urls',
         });
-    this.contextMenu.defaultSection().appendSeparator();
+    contextMenu.defaultSection().appendSeparator();
 
-    this.contextMenu.defaultSection().appendCheckboxItem(
+    contextMenu.defaultSection().appendCheckboxItem(
         i18nString(UIStrings.hasBlockedCookies),
         () => this.networkShowBlockedCookiesOnlySetting.set(!this.networkShowBlockedCookiesOnlySetting.get()), {
           checked: this.networkShowBlockedCookiesOnlySetting.get(),
           tooltip: i18nString(UIStrings.onlyShowRequestsWithBlockedCookies),
           jslogContext: 'only-blocked-response-cookies',
         });
-    this.contextMenu.defaultSection().appendCheckboxItem(
+    contextMenu.defaultSection().appendCheckboxItem(
         i18nString(UIStrings.blockedRequests),
         () => this.networkOnlyBlockedRequestsSetting.set(!this.networkOnlyBlockedRequestsSetting.get()), {
           checked: this.networkOnlyBlockedRequestsSetting.get(),
           tooltip: i18nString(UIStrings.onlyShowBlockedRequests),
           jslogContext: 'only-blocked-requests',
         });
-    this.contextMenu.defaultSection().appendCheckboxItem(
+    contextMenu.defaultSection().appendCheckboxItem(
         i18nString(UIStrings.thirdParty),
         () => this.networkOnlyThirdPartySetting.set(!this.networkOnlyThirdPartySetting.get()), {
           checked: this.networkOnlyThirdPartySetting.get(),
           tooltip: i18nString(UIStrings.onlyShowThirdPartyRequests),
           jslogContext: 'only-3rd-party-requests',
         });
-
-    void this.contextMenu.show();
   }
 
   selectedFilters(): string[] {
@@ -2788,12 +2779,6 @@ export class MoreFiltersDropDownUI extends
     }
   }
 
-  discard(): void {
-    if (this.contextMenu) {
-      this.contextMenu.discard();
-    }
-  }
-
   isActive(): boolean {
     return this.selectedFilters().length !== 0;
   }