[Accessibility] Update button size to meet minimum size criteria

Height and width for "Clear, Enable regular expressions & Enable case
sensitive search" buttons does not meet the minimum required size of
24x24 minimum size criteria.

Before: https://imgur.com/a/rKK7aaF
After: https://imgur.com/a/EzanZyU

Bug: 375093292
Change-Id: Ia501bd9e2948570e33b018ebd3d8f5fc8c6b5d68
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5963416
Reviewed-by: Kateryna Prokopenko <[email protected]>
Reviewed-by: Peter Müller <[email protected]>
Commit-Queue: Yanling Wang <[email protected]>

Author: yanlingwang23

front_end/panels/search/SearchView.ts

@@ -95,7 +95,6 @@ function createSearchToggleButton(iconName: string, jslogContext: string): Butto
   const button = new Buttons.Button.Button();
   button.data = {
     variant: Buttons.Button.Variant.ICON_TOGGLE,
-    size: Buttons.Button.Size.SMALL,
     iconName,
     toggledIconName: iconName,
     toggleType: Buttons.Button.ToggleType.PRIMARY,
@@ -192,7 +191,6 @@ export class SearchView extends UI.Widget.VBox {
     const clearInputFieldButton = new Buttons.Button.Button();
     clearInputFieldButton.data = {
       variant: Buttons.Button.Variant.ICON,
-      size: Buttons.Button.Size.SMALL,
       iconName: 'cross-circle-filled',
       jslogContext: 'clear-input',
       title: i18nString(UIStrings.clearInput),

front_end/panels/search/searchView.css

@@ -23,7 +23,7 @@
     flex-grow: 1;
     box-shadow: inset 0 0 0 2px transparent;
     box-sizing: border-box;
-    height: var(--sys-size-9);
+    height: var(--sys-size-11);
     margin-left: var(--sys-size-3);
     padding: 0 var(--sys-size-2) 0 var(--sys-size-5);
     border-radius: 100px;