RPP: Fix focus outline overlap on "Learn more" link

Swapping from padding to margin means that the focus outline no longer
overlaps the text.

As a drive-by, I left a comment to explain why we use inline styles here
as it tripped me up at first :)

Fixed: 375982185
Change-Id: I855e51bb8e69ab3fb5cfd33099841c9154a4f6c4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6148228
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Andres Olivares <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>

Author: jackfranklin

front_end/panels/timeline/TimelinePanel.ts

@@ -1275,7 +1275,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     const localLink = UI.XLink.XLink.create(
         'https://developer.chrome.com/docs/devtools/performance/extension', i18nString(UIStrings.learnMore));
-    localLink.style.paddingLeft = '5px';
+    // Has to be done in JS because the element is inserted into the
+    // checkbox's shadow DOM so any styling into timelinePanel.css would
+    // not apply.
+    localLink.style.marginLeft = '5px';
     thirdPartyCheckbox.element.shadowRoot?.appendChild(localLink);
     thirdPartyToolbar.appendToolbarItem(thirdPartyCheckbox);