[GM3Restyling] Update preloading warning dialog

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

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

Author: Kateryna Prokopenko

front_end/panels/application/preloading/components/PreloadingDisabledInfobar.ts

@@ -10,7 +10,6 @@ import type * as Protocol from '../../../../generated/protocol.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ChromeLink from '../../../../ui/components/chrome_link/chrome_link.js';
 import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
@@ -179,10 +178,6 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
     const iconLink = UI.Fragment.html`
       <x-link class="icon-link devtools-link" tabindex="0" href="${LINK}"></x-link>
     ` as UI.XLink.XLink;
-    const iconLinkIcon = new IconButton.Icon.Icon();
-    iconLinkIcon
-        .data = {iconName: 'open-externally', color: 'var(--icon-default-hover)', width: '16px', height: '16px'};
-    iconLink.append(iconLinkIcon);
 
     return html`
       <div id='contents'>

front_end/panels/application/preloading/components/preloadingDisabledInfobar.css

@@ -11,35 +11,26 @@
   display: flex;
 }
 
-#contents {
-  margin-top: calc(-1 * var(--sys-size-6));
-  padding: 0 var(--sys-size-8) var(--sys-size-2);
-}
-
-#contents * {
-  background: var(--color-background-elevation-dark-only);
-}
-
 #contents .key {
   grid-column-start: span 2;
-  padding: 12px 0;
   font-weight: bold;
-  margin-bottom: -1.2em;
 }
 
 #contents .value {
   grid-column-start: span 2;
-  padding: 12px 0;
+  margin-top: var(--sys-size-6);
 }
 
 #footer {
+  margin-top: var(--sys-size-6);
+  margin-bottom: var(--sys-size-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   grid-column-start: span 2;
 }
 
-#footer .icon-link {
-  vertical-align: sub;
-  float: right;
+x-link { /* stylelint-disable-line selector-type-no-unknown */
+  color: var(--sys-color-primary);
+  text-decoration-line: underline;
 }