[GM3Restyling] Update selfXSS dialog

Also add an option to make dt-close-button small

Screenshot: https://imgur.com/a/6CVoKws

Bug: 325442935
Change-Id: I976ee79583a0b792e9f173eadb2a82d8c542e519
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6276567
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>

Author: Kateryna Prokopenko

front_end/ui/legacy/UIUtils.ts

@@ -1416,6 +1416,10 @@ export class DevToolsCloseButton extends HTMLElement {
     ARIAUtils.setLabel(this.#button, name);
   }
 
+  setSize(size: Buttons.Button.Size): void {
+    this.#button.size = size;
+  }
+
   setTabbable(tabbable: boolean): void {
     if (tabbable) {
       this.#button.tabIndex = 0;

front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -1066,15 +1066,18 @@ export class SelfXssWarningDialog {
     const content = shadowRoot.createChild('div', 'widget');
 
     const result = await new Promise<boolean>(resolve => {
-      const closeButton = content.createChild('dt-close-button', 'dialog-close-button');
+      const header = content.createChild('div', 'header');
+      header.createChild('div', 'title').textContent = i18nString(UIStrings.doYouTrustThisCode);
+
+      const closeButton = header.createChild('dt-close-button', 'dialog-close-button');
       closeButton.setTabbable(true);
       self.onInvokeElement(closeButton, event => {
         dialog.hide();
         event.consume(true);
         resolve(false);
       });
+      closeButton.setSize(Buttons.Button.Size.SMALL);
 
-      content.createChild('div', 'title').textContent = i18nString(UIStrings.doYouTrustThisCode);
       content.createChild('div', 'message').textContent =
           i18nString(UIStrings.doNotPaste, {PH1: i18nString(UIStrings.allowPasting)});
 

front_end/ui/legacy/components/source_frame/selfXssDialog.css

@@ -4,36 +4,39 @@
  * found in the LICENSE file.
  */
 
-.widget {
-  padding: 20px;
+.header {
+  display: flex;
+  justify-content: space-between;
+  font: var(--sys-typescale-body2-medium);
+  margin: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);
 }
 
 .title {
-  font-size: larger;
+  padding-top: var(--sys-size-3);
+}
+
+.dialog-close-button {
+  margin: var(--sys-size-3);
+  z-index: 1;
 }
 
-.title,
 .message,
-.button,
 .text-input {
-  margin: 5px;
+  margin: 0 var(--sys-size-8);
+}
+
+.text-input {
+  margin-top: var(--sys-size-5);
 }
 
 .button {
   text-align: right;
-  margin-top: 10px;
+  margin: var(--sys-size-6) var(--sys-size-8) var(--sys-size-8) var(--sys-size-8);
+  gap: var(--sys-size-5);
   display: flex;
   justify-content: flex-end;
-  gap: var(--sys-size-6);
 }
 
 .button button {
-  min-width: 80px;
-}
-
-.dialog-close-button {
-  position: absolute;
-  right: 9px;
-  top: 9px;
-  z-index: 1;
+  min-width: var(--sys-size-19);
 }