[GM3Restyling] Update IconDialog to use ButtonDialog

This switches the usage of IconDialog to ButtonDialog and makes a few
padding changes, and removes the now obsolete IconDialog.

Before: https://i.imgur.com/Oj2qOSW.png
After: https://i.imgur.com/Piaam45.png

Bug: 383278166, 379036632
Change-Id: I58bbcdcf09f1f295904a48f27daad715de387004
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6110475
Auto-Submit: Kim-Anh Tran <[email protected]>
Reviewed-by: Nancy Li <[email protected]>
Commit-Queue: Nancy Li <[email protected]>

Author: ktran

config/gni/devtools_grd_files.gni

@@ -2201,11 +2201,9 @@ grd_files_debug_sources = [
   "front_end/ui/components/data_grid/dataGridController.css.js",
   "front_end/ui/components/dialogs/ButtonDialog.js",
   "front_end/ui/components/dialogs/Dialog.js",
-  "front_end/ui/components/dialogs/IconDialog.js",
   "front_end/ui/components/dialogs/ShortcutDialog.js",
   "front_end/ui/components/dialogs/buttonDialog.css.js",
   "front_end/ui/components/dialogs/dialog.css.js",
-  "front_end/ui/components/dialogs/iconDialog.css.js",
   "front_end/ui/components/dialogs/shortcutDialog.css.js",
   "front_end/ui/components/diff_view/DiffView.js",
   "front_end/ui/components/diff_view/diffView.css.js",

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

@@ -7,6 +7,7 @@ import '../../../../ui/components/report_view/report_view.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 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';
@@ -148,27 +149,24 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
           ${header}
         </span>
 
-        <devtools-icon-dialog
+        <devtools-button-dialog
           .data=${{
-            iconData: {
-              iconName: 'info',
-              color: 'var(--icon-default-hover)',
-              width: '16px',
-              height: '16px',
-            },
+            iconName: 'info',
+            variant: Buttons.Button.Variant.ICON,
             closeButton: true,
             position: Dialogs.Dialog.DialogVerticalPosition.AUTO,
             horizontalAlignment: Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
             closeOnESC: true,
             closeOnScroll: false,
-          }}
+            dialogTitle: i18nString(UIStrings.titleReasonsPreventingPreloading),
+          } as Dialogs.ButtonDialog.ButtonDialogData}
           jslog=${VisualLogging.dialog('preloading-disabled').track({resize: true, keydown: 'Escape'})}
         >
           ${this.#dialogContents()}
-        </devtools-icon-dialog>
+        </devtools-button-dialog>
       </div>
     `;
-            // clang-format on
+    // clang-format on
   }
 
   #dialogContents(): LitHtml.LitTemplate {
@@ -186,19 +184,13 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
 
     return html`
       <div id='contents'>
-        <div id='title'>${i18nString(UIStrings.titleReasonsPreventingPreloading)}</div>
-
         <devtools-report>
           ${this.#maybeDisalebByPreference()}
           ${this.#maybeDisalebByDataSaver()}
           ${this.#maybeDisalebByBatterySaver()}
           ${this.#maybeDisalebByHoldbackPrefetchSpeculationRules()}
           ${this.#maybeDisalebByHoldbackPrerenderSpeculationRules()}
-
-          <devtools-report-divider>
-          </devtools-report-divider>
         </devtools-report>
-
         <div id='footer'>
           ${learnMoreLink}
           ${iconLink}

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

@@ -7,28 +7,19 @@
 #container {
   padding: 6px 12px;
   border-bottom: 1px solid var(--sys-color-divider);
+  align-items: center;
+  display: flex;
 }
 
 #contents {
-  margin-top: 14px;
+  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);
 }
 
-#title {
-  padding-bottom: 12px;
-  font-size: 15px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border-bottom: 1px solid var(--sys-color-divider);
-  color: var(--sys-color-token-subtle);
-  grid-column-start: span 2;
-  font-weight: bold;
-}
-
 #contents .key {
   grid-column-start: span 2;
   padding: 12px 0;
@@ -42,14 +33,10 @@
 }
 
 #footer {
-  padding-top: 12px;
-  font-size: 15px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--sys-color-token-subtle);
   grid-column-start: span 2;
-  font-weight: bold;
 }
 
 #footer .icon-link {

front_end/ui/components/dialogs/BUILD.gn

@@ -11,7 +11,6 @@ generate_css("css_files") {
   sources = [
     "buttonDialog.css",
     "dialog.css",
-    "iconDialog.css",
     "shortcutDialog.css",
   ]
 }
@@ -20,7 +19,6 @@ devtools_module("dialogs") {
   sources = [
     "ButtonDialog.ts",
     "Dialog.ts",
-    "IconDialog.ts",
     "ShortcutDialog.ts",
   ]
   deps = [

front_end/ui/components/dialogs/IconDialog.ts

@@ -4,12 +4,10 @@
 
 import * as ButtonDialog from './ButtonDialog.js';
 import * as Dialog from './Dialog.js';
-import * as IconDialog from './IconDialog.js';
 import * as ShortcutDialog from './ShortcutDialog.js';
 
 export {
   ButtonDialog,
   Dialog,
-  IconDialog,
   ShortcutDialog,
 };

front_end/ui/components/dialogs/dialogs.ts

@@ -28,7 +28,6 @@ group("docs") {
     "./floating_button",
     "./icon_button",
     "./icon_component",
-    "./icon_dialog",
     "./input",
     "./issue_counter",
     "./issue_link_icon",