[RPP] Add link to save trace docs

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

Author: Connor Clark

front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -14,6 +14,7 @@ import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import exportTraceOptionsStyles from './exportTraceOptions.css.js';
 
@@ -44,6 +45,10 @@ const UIStrings = {
    * @description Text for the compression option.
    */
   shouldCompress: 'Compress with gzip',
+  /**
+   * @description Text for the explanation link
+   */
+  explanation: 'Explanation',
   /**
    * @description Text for the save trace button
    */
@@ -292,7 +297,16 @@ export class ExportTraceOptions extends HTMLElement {
             'script-source-maps',
             this.#includeSourceMapsCheckbox, i18nString(UIStrings.includeSourcemap), this.#state.includeSourceMaps): ''}
           ${this.#renderCheckbox('compress-with-gzip', this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
-          <div class='export-trace-options-row'><div class='export-trace-blank'></div><devtools-button
+          <div class='export-trace-options-row export-trace-options-row-last'>
+            <div class="export-trace-explanation">
+              <x-link
+                href="https://developer.chrome.com/docs/devtools/performance/save-trace"
+                class=devtools-link
+                jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('save-trace-explanation')}>
+                  ${i18nString(UIStrings.explanation)}
+              </x-link>
+            </div>
+            <devtools-button
                   class="setup-button"
                   data-export-button
                   @click=${this.#onExportClick.bind(this)}

front_end/panels/timeline/components/exportTraceOptions.css

@@ -19,13 +19,22 @@
     height: 24px;
   }
 
-  .export-trace-blank {
+  .export-trace-explanation {
     flex: 1;
-    min-width: var(--sys-size-25)
+    min-width: var(--sys-size-25);
   }
 }
 
+.export-trace-options-row-last {
+  align-items: center;
+}
+
 .info-tooltip-container {
   max-width: var(--sys-size-28);
   white-space: normal;
 }
+
+x-link {
+  color: var(--sys-color-primary);
+  text-decoration-line: underline;
+}

front_end/ui/visual_logging/KnownContextValues.ts

@@ -3218,6 +3218,7 @@ export const knownContextValues = new Set([
   'save-image',
   'save-name',
   'save-player-info',
+  'save-trace-explanation',
   'scale',
   'scheme',
   'sci',

test/e2e_non_hosted/performance/trace-app_test.ts

@@ -42,8 +42,12 @@ async function searchAndClickOnStackTrace(
   await devToolsPage.raf();
   await devToolsPage.timeout(3000);
 
-  const topStackFrameLink =
-      await devToolsPage.$('.devtools-link', await devToolsPage.$('.timeline-details-stack-values'));
+  // Prefer stack trace if present.
+  const containerEl =
+      await devToolsPage.$('.timeline-details-stack-values') ?? await devToolsPage.$('.timeline-details-view');
+  assert.isOk(containerEl);
+
+  const topStackFrameLink = await devToolsPage.$('.devtools-link', containerEl);
   assert.isOk(topStackFrameLink);
   assert.strictEqual(await topStackFrameLink.evaluate(el => el.textContent), expectedSourceLocation);
   await topStackFrameLink.click();
@@ -87,7 +91,7 @@ describe('trace_app.html', function() {
     await searchAndClickOnStackTrace(devToolsPage, 'pooopInTheTrace', 'pooopInTheTrace', '(index):399:26');
   });
 
-  it('linkifies to CSS resoures', async ({devToolsPage, inspectedPage}) => {
+  it('linkifies to CSS resources', async ({devToolsPage, inspectedPage}) => {
     await loadTrace(devToolsPage, inspectedPage, 'performance/timeline/enhanced-trace.json.gz');
     await searchAndClickOnStackTrace(
         devToolsPage, 'fonts.googleapis.com', '/* latin */',