[GM3Restyling] Update Lighthouse timespan view dialog

Screenshot: https://imgur.com/a/4tTUpge

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

Author: Kateryna Prokopenko

front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -196,14 +196,14 @@ export class StatusView {
       jslogContext: 'lighthouse.cancel',
     });
     const fragment = UI.Fragment.Fragment.build`
-  <span $="status-header">Auditing your web page…</span>
+  <span $="status-header" class="header">Auditing your web page…</span>
   <div class="lighthouse-status vbox" $="status-view">
   <div class="lighthouse-progress-wrapper" $="progress-wrapper">
   <div class="lighthouse-progress-bar" $="progress-bar"></div>
   </div>
   <div class="lighthouse-status-text" $="status-text"></div>
   </div>
-  <div class="lighthouse-button-container">
+  <div class="lighthouse-action-buttons">
   ${cancelButton}
   </div>
   `;

front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -17,7 +17,11 @@ const UIStrings = {
   /**
    * @description Header indicating that a Lighthouse timespan has started. "Timespan" is a Lighthouse mode that analyzes user interactions over a period of time. "interact with the page" is a call to action for the user to interact with the web page.
    */
-  timespanStarted: 'Timespan started, interact with the page',
+  timespanStarted: 'Timespan started',
+  /**
+   * @description Call to action for the user to interact with the web page.
+   */
+  interactWithPage: 'Interact with the page.',
   /**
    * @description Label for a button that ends a Lighthouse timespan. "timespan" is a Lighthouse mode that analyzes user interactions over a period of time.
    */
@@ -34,12 +38,14 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TimespanView extends UI.Dialog.Dialog {
   private panel: LighthousePanel;
   private statusHeader: Element|null;
+  private contentContainer: Element|null;
   private endButton: Buttons.Button.Button|null;
 
   constructor(panel: LighthousePanel) {
     super();
     this.panel = panel;
     this.statusHeader = null;
+    this.contentContainer = null;
     this.endButton = null;
     this.setDimmed(true);
     this.setCloseOnEscape(false);
@@ -53,15 +59,17 @@ export class TimespanView extends UI.Dialog.Dialog {
   }
 
   reset(): void {
-    if (this.statusHeader && this.endButton) {
+    if (this.statusHeader && this.contentContainer && this.endButton) {
       this.statusHeader.textContent = i18nString(UIStrings.timespanStarting);
+      this.contentContainer.textContent = '';
       this.endButton.disabled = true;
     }
   }
 
   ready(): void {
-    if (this.statusHeader && this.endButton) {
+    if (this.statusHeader && this.contentContainer && this.endButton) {
       this.statusHeader.textContent = i18nString(UIStrings.timespanStarted);
+      this.contentContainer.textContent = i18nString(UIStrings.interactWithPage);
       this.endButton.disabled = false;
       this.endButton.focus();
     }
@@ -74,14 +82,16 @@ export class TimespanView extends UI.Dialog.Dialog {
     this.endButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.endTimespan),
         this.endTimespan.bind(this),
-        {variant: Buttons.Button.Variant.PRIMARY, jslogContext: 'lighthouse.end-time-span'},
+        {variant: Buttons.Button.Variant.PRIMARY, jslogContext: 'lighthouse.end-time-span', className: 'end-timespan'},
     );
     const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this), {
+      className: 'cancel',
       jslogContext: 'lighthouse.cancel',
     });
     const fragment = UI.Fragment.Fragment.build`
   <div class="lighthouse-view vbox">
-  <h2 $="status-header"></h2>
+  <span $="status-header" class="header"></span>
+  <span $="call-to-action" class="lighthouse-dialog-text"></span>
   <div class="lighthouse-action-buttons hbox">
   ${cancelButton}
   ${this.endButton}
@@ -90,6 +100,7 @@ export class TimespanView extends UI.Dialog.Dialog {
   `;
 
     this.statusHeader = fragment.$('status-header');
+    this.contentContainer = fragment.$('call-to-action');
     dialogRoot.appendChild(fragment.element());
 
     this.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);

front_end/panels/lighthouse/lighthouseDialog.css

@@ -8,14 +8,18 @@
   flex: auto;
   align-items: start;
   width: 100%;
-  max-width: 500px;
-}
+  max-width: var(--sys-size-34);
+
+  .header {
+    font: var(--sys-typescale-body2-medium);
+    padding-top: var(--sys-size-3);
+    margin: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);
+    flex: none;
+  }
 
-.lighthouse-view span {
-  font: var(--sys-typescale-body2-medium);
-  padding-top: var(--sys-size-3);
-  margin: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);
-  flex: none;
+  .lighthouse-dialog-text {
+    margin: 0 var(--sys-size-8);
+  }
 }
 
 .lighthouse-view button {
@@ -48,10 +52,6 @@
   overflow: auto;
 }
 
-.lighthouse-button-container {
-  margin: var(--sys-size-6) var(--sys-size-8) var(--sys-size-8) var(--sys-size-8);
-}
-
 .lighthouse-progress-wrapper {
   height: var(--sys-size-2);
   background-color: var(--sys-color-neutral-outline);
@@ -117,6 +117,8 @@
 }
 
 .lighthouse-action-buttons {
+  justify-content: space-between;
   align-self: end;
-  column-gap: var(--sys-size-6);
+  width: calc(100% - 2*var(--sys-size-8));
+  margin: var(--sys-size-6) var(--sys-size-8) var(--sys-size-8) var(--sys-size-8);
 }

test/e2e/helpers/lighthouse-helpers.ts

@@ -178,7 +178,7 @@ export async function waitForStorageUsage(p: (quota: number) => boolean) {
 }
 
 export async function waitForTimespanStarted() {
-  await waitForElementWithTextContent('Timespan started, interact with the page');
+  await waitForElementWithTextContent('Timespan started');
 }
 
 export async function endTimespan() {