[application] Add right padding to report sections and inline links

The frame details report view was previously using a separate
class for adding report sections. After changing to the general
devtools-report-section, the "learn more" link styling changed.

This CL makes sure that learn more links are in-line with the
preceding text, and adds right padding to report sections. Thus,
focus styles are also properly seen if things are narrow.

Before: https://i.imgur.com/oZowNJv.png
After: https://i.imgur.com/3WGIBBv.png
Fixed: 406226081
Change-Id: I9a7117a106e84f75f9c5b6c9338c6ac186730d86
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6394676
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/application/components/FrameDetailsView.ts

@@ -347,10 +347,9 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     // clang-format off
     return html`
     <devtools-report-section-header>${i18n.i18n.lockedString('Origin trials')}</devtools-report-section-header>
-    <devtools-report-section>
-        ${i18nString(UIStrings.originTrialsExplanation)}
+    <devtools-report-section><span class="report-section">${i18nString(UIStrings.originTrialsExplanation)}
         <x-link href="https://developer.chrome.com/docs/web-platform/origin-trials/" class="link"
-        jslog=${VisualLogging.link('learn-more.origin-trials').track({click: true})}>${i18nString(UIStrings.learnMore)}</x-link>
+        jslog=${VisualLogging.link('learn-more.origin-trials').track({click: true})}>${i18nString(UIStrings.learnMore)}</x-link></span>
     </devtools-report-section>
     ${this.#originTrialTreeView}
     <devtools-report-divider></devtools-report-divider>
@@ -732,9 +731,12 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     return html`
       <devtools-report-section-header>${i18nString(UIStrings.apiAvailability)}</devtools-report-section-header>
       <devtools-report-section>
-        ${i18nString(UIStrings.availabilityOfCertainApisDepends)}
-        <x-link href="https://web.dev/why-coop-coep/" class="link" jslog=${
-        VisualLogging.link('learn-more.coop-coep').track({click: true})}>${i18nString(UIStrings.learnMore)}</x-link>
+        <span class="report-section">${
+        i18nString(
+            UIStrings
+                .availabilityOfCertainApisDepends)}<x-link href="https://web.dev/why-coop-coep/" class="link" jslog=${
+        VisualLogging.link('learn-more.coop-coep').track({click: true})}>${
+        i18nString(UIStrings.learnMore)}</x-link></span>
       </devtools-report-section>
       ${this.#renderSharedArrayBufferAvailability()}
       ${this.#renderMeasureMemoryAvailability()}

front_end/panels/application/components/frameDetailsReportView.css

@@ -22,6 +22,7 @@ button ~ .text-ellipsis {
   outline-offset: 2px;
   padding: 0;
   margin-left: var(--sys-size-3);
+  white-space: nowrap;;
 }
 
 button.link {
@@ -80,6 +81,10 @@ button.text-link {
   line-height: 28px;
 }
 
+.report-section:has(.link) {
+  line-height: var(--sys-size-12);
+}
+
 .without-min-width {
   min-width: auto;
 }

front_end/ui/components/report_view/reportSection.css

@@ -10,7 +10,7 @@
 }
 
 .section {
-  padding: var(--sys-size-5) 0 var(--sys-size-5) var(--sys-size-9);
+  padding: var(--sys-size-5) var(--sys-size-9);
   display: flex;
   flex-direction: row;
   align-items: center;