Fix button margins in search bars

This CL makes sure that the margins for the find and replace
search bars are equally big.

Before: https://i.imgur.com/Fh9UXwq.png
After: https://i.imgur.com/dHrADLD.png
Bug: none
Change-Id: I930f31014fc02cd1959a415cf2aaea015605079e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5969659
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/search/searchView.css

@@ -53,6 +53,10 @@
       height: var(--sys-size-8);
       margin-right: var(--sys-size-3);
     }
+
+    & > devtools-button:last-child {
+      margin-right: var(--sys-size-4);
+    }
   }
 
   .search-toolbar-input {

front_end/ui/legacy/Toolbar.ts

@@ -923,6 +923,7 @@ export class ToolbarFilter extends ToolbarInput {
 
     const filterIcon = IconButton.Icon.create('filter');
     this.element.prepend(filterIcon);
+    this.element.classList.add('toolbar-filter');
   }
 }
 

front_end/ui/legacy/searchableView.css

@@ -107,9 +107,6 @@
     & > devtools-button {
       width: var(--sys-size-11);
       justify-content: center;
-    }
-
-    & devtools-button:last-child {
       margin-right: var(--sys-size-4);
     }
   }
@@ -141,6 +138,10 @@
     display: inline-flex;
     grid-row: 1/2;
     grid-column: 2/3;
+
+    & > devtools-button:last-child {
+      margin-right: var(--sys-size-4);
+    }
   }
 
   .toolbar-search-buttons {

front_end/ui/legacy/toolbar.css

@@ -416,6 +416,10 @@ select.toolbar-item:focus-visible > * {
   }
 }
 
+.toolbar-filter .toolbar-input-clear-button {
+  margin-right: var(--sys-size-4);
+}
+
 .toolbar-input-empty .toolbar-input-clear-button {
   display: none;
 }