[RPP] Status dialog: Hide stop button and make responsive

The stop button is only relevant to finish the recording. It cannot stop loading or processing the trace (without significant refactors).

The previous arrangeDialog() solution to narrow widths could trigger dramatic layout thrashing under certain (inconsistent repro) circumstances. It's solved with container queries and a simpler layout.

Demo: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6164069

Bug: 41470724
Change-Id: I681491c1959d4ace5c7d1c70238c64cad5c1e884
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6164069
Auto-Submit: Paul Irish <[email protected]>
Reviewed-by: Connor Clark <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: paulirish

front_end/panels/timeline/TimelinePanel.ts

@@ -214,9 +214,9 @@ const UIStrings = {
    */
   close: 'Close',
   /**
-   *@description Text to download the raw trace files after an error
+   *@description Text to download the trace file after an error
    */
-  downloadAfterError: 'Download raw trace events',
+  downloadAfterError: 'Download trace',
   /**
    *@description Status text to indicate the recording has failed in the Performance panel
    */
@@ -1763,7 +1763,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         {
           description: error,
           buttonText: i18nString(UIStrings.close),
-          buttonDisabled: false,
+          hideStopButton: true,
           showProgress: undefined,
           showTimer: undefined,
         },
@@ -2264,7 +2264,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         {
           showProgress: true,
           showTimer: undefined,
-          buttonDisabled: undefined,
+          hideStopButton: true,
           buttonText: undefined,
           description: undefined,
         },
@@ -2444,7 +2444,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         {
           showTimer: true,
           showProgress: true,
-          buttonDisabled: true,
+          hideStopButton: false,
           description: undefined,
           buttonText: undefined,
         },
@@ -2669,11 +2669,11 @@ export class StatusPane extends UI.Widget.VBox {
 
   constructor(
       options: {
+        hideStopButton: boolean,
         showTimer?: boolean,
         showProgress?: boolean,
         description?: string,
         buttonText?: string,
-        buttonDisabled?: boolean,
       },
       buttonCallback: () => (Promise<void>| void)) {
     super(true);
@@ -2712,22 +2712,22 @@ export class StatusPane extends UI.Widget.VBox {
     }, {jslogContext: 'timeline.download-after-error'});
 
     this.downloadTraceButton.disabled = true;
-    this.downloadTraceButton.style.visibility = 'hidden';
+    this.downloadTraceButton.classList.add('hidden');
 
     const buttonText = options.buttonText || i18nString(UIStrings.stop);
     this.button = UI.UIUtils.createTextButton(buttonText, buttonCallback, {
       jslogContext: 'timeline.stop-recording',
     });
     // Profiling can't be stopped during initialization.
-    this.button.disabled = !options.buttonDisabled === false;
+    this.button.classList.toggle('hidden', options.hideStopButton);
 
     buttonContainer.append(this.downloadTraceButton);
     buttonContainer.append(this.button);
   }
 
   finish(): void {
     this.stopTimer();
-    this.button.disabled = true;
+    this.button.classList.add('hidden');
   }
 
   async #downloadRawTraceAfterError(): Promise<void> {
@@ -2746,26 +2746,22 @@ export class StatusPane extends UI.Widget.VBox {
   enableDownloadOfEvents(rawEvents: Trace.Types.Events.Event[]): void {
     this.#rawEvents = rawEvents;
     this.downloadTraceButton.disabled = false;
-    this.downloadTraceButton.style.visibility = 'visible';
+    this.downloadTraceButton.classList.remove('hidden');
   }
 
   remove(): void {
-    if (this.element.parentNode) {
-      (this.element.parentNode as HTMLElement).classList.remove('tinted');
-      this.arrangeDialog((this.element.parentNode as HTMLElement));
-    }
+    (this.element.parentNode as HTMLElement)?.classList.remove('tinted');
     this.stopTimer();
     this.element.remove();
   }
 
   showPane(parent: Element): void {
-    this.arrangeDialog(parent);
     this.show(parent);
     parent.classList.add('tinted');
   }
 
   enableAndFocusButton(): void {
-    this.button.disabled = false;
+    this.button.classList.remove('hidden');
     this.button.focus();
   }
 
@@ -2796,7 +2792,6 @@ export class StatusPane extends UI.Widget.VBox {
   }
 
   private updateTimer(): void {
-    this.arrangeDialog((this.element.parentNode as HTMLElement));
     if (!this.timeUpdateTimer || !this.time) {
       return;
     }
@@ -2805,11 +2800,6 @@ export class StatusPane extends UI.Widget.VBox {
     this.time.textContent = i18n.TimeUtilities.preciseSecondsToString(seconds, 1);
   }
 
-  private arrangeDialog(parent: Element): void {
-    const isSmallDialog = parent.clientWidth < 325;
-    this.element.classList.toggle('small-dialog', isSmallDialog);
-    this.contentElement.classList.toggle('small-dialog', isSmallDialog);
-  }
   override wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([timelineStatusDialogStyles]);

front_end/panels/timeline/timelinePanel.css

@@ -596,11 +596,6 @@
   flex: none;
 }
 
-.status-pane-container > .small-dialog {
-  width: 100%;
-  height: 100%;
-}
-
 devtools-feedback-button {
   float: right;
 }

front_end/panels/timeline/timelineStatusDialog.css

@@ -55,17 +55,6 @@
   border-radius: 12px;
 }
 
-.timeline-status-dialog.small-dialog {
-  width: inherit;
-  justify-content: center;
-}
-
-.small-dialog > .stop-button {
-  align-self: center;
-  margin-top: 20px;
-  height: initial;
-}
-
 @media (forced-colors: active) {
   .timeline-status-dialog {
     border: 1px solid canvastext;
@@ -81,3 +70,26 @@
     background-color: ButtonText;
   }
 }
+
+:host {
+  container-type: inline-size;
+}
+
+/* 326 is the widths above (200 + 80) + a bunch of padding. calc() can't be used here sadly */
+@container (max-width: 326px) {
+  .timeline-status-dialog {
+    box-shadow: none;
+
+    .stop-button {
+      align-self: center;
+    }
+  }
+
+  .status-dialog-line {
+    flex-direction: column;
+
+    .label {
+      display: none;
+    }
+  }
+}

test/e2e/helpers/performance-helpers.ts

@@ -382,7 +382,5 @@ export function veImpressionForPerformancePanel() {
 }
 
 function veImpressionForStatusDialog() {
-  return veImpression(
-      'Dialog', 'timeline-status',
-      [veImpression('Action', 'timeline.download-after-error'), veImpression('Action', 'timeline.stop-recording')]);
+  return veImpression('Dialog', 'timeline-status');
 }