[GM3Restyling] Update Performance > field settings dialog

Screenshot: https://imgur.com/a/ZiatZLe

Bug: 325442935
Change-Id: Ic05fcb8537100d44a4252e8cb377391d90179623
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6244023
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/timeline/components/FieldSettingsDialog.ts

@@ -257,6 +257,7 @@ export class FieldSettingsDialog extends HTMLElement {
           variant: Buttons.Button.Variant.PRIMARY,
           title: i18nString(UIStrings.ok),
         } as Buttons.Button.ButtonData}
+        class="enable"
         jslog=${VisualLogging.action('timeline.field-data.enable').track({click: true})}
         data-field-data-enable
       >${i18nString(UIStrings.ok)}</devtools-button>

front_end/panels/timeline/components/fieldSettingsDialog.css

@@ -44,7 +44,6 @@ details > summary {
 
 .content {
   max-width: 360px;
-  padding: 0 var(--sys-size-8) var(--sys-size-2);
   box-sizing: border-box;
 }
 
@@ -79,9 +78,13 @@ details > summary {
 
 .buttons-section {
   display: flex;
-  justify-content: flex-end;
-  margin-top: 6px;
-  gap: 8px;
+  justify-content: space-between;
+  margin-top: var(--sys-size-6);
+  margin-bottom: var(--sys-size-2);
+
+  devtools-button.enable {
+    float: right;
+  }
 }
 
 input[type="checkbox"] {