chrome-devtools-frontend 1.0.995629 → 1.0.996044

package/front_end/core/i18n/locales/zu.json

@@ -1352,6 +1352,12 @@
   "models/issues_manager/CrossOriginEmbedderPolicyIssue.ts | samesiteAndSameorigin": {
     "message": "Indawo efanayo kanye Nomthombo ofanayo"
   },
+  "models/issues_manager/DeprecationIssue.ts | deprecationExample": {
+    "message": "Lesi yisibonelo somlayezo ohunyushiwe wenkinga yokuhoxisa."
+  },
+  "models/issues_manager/DeprecationIssue.ts | title": {
+    "message": "Isici Esihoxisiwe Esisetshenzisiwe"
+  },
   "models/issues_manager/FederatedAuthRequestIssue.ts | fedCm": {
     "message": "I-Federated Credential Management API"
   },
@@ -3032,6 +3038,12 @@
   "panels/application/components/BackForwardCacheStrings.ts | enteredBackForwardCacheBeforeServiceWorkerHostAdded": {
     "message": "Isisebenzi sesevisi senziwe sasebenza ngenkathi ikhasi likwinqolobane yasemuva/phambili."
   },
+  "panels/application/components/BackForwardCacheStrings.ts | errorDocument": {
+    "message": "Inqolobane yasemuva/phambili ivaliwe ngenxa yephutha ledokhumenti."
+  },
+  "panels/application/components/BackForwardCacheStrings.ts | fencedFramesEmbedder": {
+    "message": "Amakhasi asebenzisa i-FencedFrames awakwazi ukugcinwa ku-bfcache."
+  },
   "panels/application/components/BackForwardCacheStrings.ts | foregroundCacheLimit": {
     "message": "Ikhasi likhishiwe kunqolobane ukuze kuvunyelwe elinye ikhasi ukuthi libe kwinqolobane."
   },
@@ -3245,6 +3257,15 @@
   "panels/application/components/BackForwardCacheView.ts | circumstantialExplanation": {
     "message": "Lezi zizathu azikwazi ukusebenza okungukuthi ukugcinwa enqolobaneni kwesikhashana kuvinjwe okuthile okungaphandle kokulawula okuqondile kwekhasi."
   },
+  "panels/application/components/BackForwardCacheView.ts | framesPerIssue": {
+    "message": "{n,plural, =1{Uhlaka olu-#}one{Izinhlaka ezingu-#}other{Izinhlaka ezingu-#}}"
+  },
+  "panels/application/components/BackForwardCacheView.ts | framesTitle": {
+    "message": "Izinhlaka"
+  },
+  "panels/application/components/BackForwardCacheView.ts | issuesInFrames": {
+    "message": "{x,plural, =1{inkinga #}one{izinkinga #}other{izinkinga #}} zitholwe ku-{y,plural, =1{uhlaka #}one{izinhlaka #}other{izinhlaka #}}."
+  },
   "panels/application/components/BackForwardCacheView.ts | learnMore": {
     "message": "Funda kabanzi: ukufaneleka kwenqolobane yokuya emuva/phambili"
   },
@@ -3677,6 +3698,12 @@
   "panels/changes/ChangesView.ts | binaryData": {
     "message": "Idatha yenambambili"
   },
+  "panels/changes/ChangesView.ts | copy": {
+    "message": "Kopisha"
+  },
+  "panels/changes/ChangesView.ts | copyAllChangesFromCurrentFile": {
+    "message": "Kopisha zonke izinguquko kwifayela lamanje"
+  },
   "panels/changes/ChangesView.ts | noChanges": {
     "message": "Azikho izinguquko"
   },
@@ -3755,6 +3782,9 @@
   "panels/console/ConsoleView.ts | allLevels": {
     "message": "Wonke amaleveli"
   },
+  "panels/console/ConsoleView.ts | autocompleteFromHistory": {
+    "message": "Qedela ngokuzenzakalela kusukela kumlando"
+  },
   "panels/console/ConsoleView.ts | consoleCleared": {
     "message": "I-console isuliwe"
   },
@@ -3836,6 +3866,9 @@
   "panels/console/ConsoleView.ts | logLevels": {
     "message": "Amaleveli elogu"
   },
+  "panels/console/ConsoleView.ts | logXMLHttpRequests": {
+    "message": "Ilogu ye-XMLHttpRequests"
+  },
   "panels/console/ConsoleView.ts | onlyShowMessagesFromTheCurrentContext": {
     "message": "Bonisa kuphela imilayezo evela kungqikithi yamanje (top, iframe, worker, isandiso)"
   },
@@ -3869,6 +3902,9 @@
   "panels/console/ConsoleView.ts | showCorsErrorsInConsole": {
     "message": "Bonisa amaphutha e-CORS ku-console"
   },
+  "panels/console/ConsoleView.ts | treatEvaluationAsUserActivation": {
+    "message": "Thatha ukuhlolwa njengokwenziwe kwasebenza umsebenzisi"
+  },
   "panels/console/ConsoleView.ts | verbose": {
     "message": "I-Verbose"
   },
@@ -4667,6 +4703,48 @@
   "panels/elements/PropertiesWidget.ts | showAllTooltip": {
     "message": "Uma kususwe ukumaka, izakhiwo kuphela inani lazo okuyiqada noma ezingachaziwe ezizoboniswa"
   },
+  "panels/elements/StylePropertiesSection.ts | constructedStylesheet": {
+    "message": "i-stylesheet eyakhiwe"
+  },
+  "panels/elements/StylePropertiesSection.ts | copyAllCSSChanges": {
+    "message": "Kopisha zonke izinguquko ze-CSS"
+  },
+  "panels/elements/StylePropertiesSection.ts | copyAllDeclarations": {
+    "message": "Kopisha zonke izimemezelo"
+  },
+  "panels/elements/StylePropertiesSection.ts | copyRule": {
+    "message": "Kopisha umthetho"
+  },
+  "panels/elements/StylePropertiesSection.ts | copySelector": {
+    "message": "Kopisha selector"
+  },
+  "panels/elements/StylePropertiesSection.ts | cssSelector": {
+    "message": "Isikhethi se-CSS"
+  },
+  "panels/elements/StylePropertiesSection.ts | injectedStylesheet": {
+    "message": "ijove isitayela seshidi"
+  },
+  "panels/elements/StylePropertiesSection.ts | insertStyleRuleBelow": {
+    "message": "Faka Umthetho Wesitayela Ngezansi"
+  },
+  "panels/elements/StylePropertiesSection.ts | sattributesStyle": {
+    "message": "{PH1}[Isitayela Sezibaluli]"
+  },
+  "panels/elements/StylePropertiesSection.ts | showAllPropertiesSMore": {
+    "message": "Bonisa Zonke Izakhiwo ({PH1} okuningi)"
+  },
+  "panels/elements/StylePropertiesSection.ts | styleAttribute": {
+    "message": "Isibaluli se-style"
+  },
+  "panels/elements/StylePropertiesSection.ts | userAgentStylesheet": {
+    "message": "isitayela seshidi lethuluzi lomsebenzisi"
+  },
+  "panels/elements/StylePropertiesSection.ts | viaInspector": {
+    "message": "ngesihloli"
+  },
+  "panels/elements/StylePropertyTreeElement.ts | copyAllCSSChanges": {
+    "message": "Kopisha zonke izinguquko ze-CSS"
+  },
   "panels/elements/StylePropertyTreeElement.ts | copyAllCssDeclarationsAsJs": {
     "message": "Kopisha zonke izimemezelo njenge-JS"
   },
@@ -4712,36 +4790,18 @@
   "panels/elements/StylePropertyTreeElement.ts | viewComputedValue": {
     "message": "Buka inani lekhompyutha"
   },
+  "panels/elements/StylesSidebarPane.ts | automaticDarkMode": {
+    "message": "Imodi emnyama ngokuzenzekelayo"
+  },
   "panels/elements/StylesSidebarPane.ts | clickToRevealLayer": {
     "message": "Chofoza ukuze wembule isendlalelo esihlahleni sesendlalelo"
   },
-  "panels/elements/StylesSidebarPane.ts | constructedStylesheet": {
-    "message": "i-stylesheet eyakhiwe"
-  },
-  "panels/elements/StylesSidebarPane.ts | copiedToClipboard": {
-    "message": "Kukopishelwe kubhodi lokunamathisela"
-  },
-  "panels/elements/StylesSidebarPane.ts | copyAllCSSChanges": {
-    "message": "Kopisha zonke izinguquko ze-CSS"
-  },
-  "panels/elements/StylesSidebarPane.ts | copyAllDeclarations": {
-    "message": "Kopisha zonke izimemezelo"
-  },
-  "panels/elements/StylesSidebarPane.ts | copyRule": {
-    "message": "Kopisha umthetho"
-  },
-  "panels/elements/StylesSidebarPane.ts | copySelector": {
-    "message": "Kopisha selector"
-  },
   "panels/elements/StylesSidebarPane.ts | cssPropertyName": {
     "message": "CSS igama lempahla: {PH1}"
   },
   "panels/elements/StylesSidebarPane.ts | cssPropertyValue": {
     "message": "CSS inani lempahla: {PH1}"
   },
-  "panels/elements/StylesSidebarPane.ts | cssSelector": {
-    "message": "Isikhethi se-CSS"
-  },
   "panels/elements/StylesSidebarPane.ts | filter": {
     "message": "Hlunga"
   },
@@ -4754,15 +4814,12 @@
   "panels/elements/StylesSidebarPane.ts | incrementdecrementWithMousewheelOne": {
     "message": "Ukunyuka/ukwehla ngesondo legudwane noma ngokhiye waphezulu/waphansi. {PH1}: R ±1, Shift: G ±1, Alt: B ±1"
   },
+  "panels/elements/StylesSidebarPane.ts | inheritedFromSPseudoOf": {
+    "message": "Kuzuzwe kusukela ::{PH1} i-pseudo ye "
+  },
   "panels/elements/StylesSidebarPane.ts | inheritedFroms": {
     "message": "Kuzuzwe njengefa lokuthi "
   },
-  "panels/elements/StylesSidebarPane.ts | injectedStylesheet": {
-    "message": "ijove isitayela seshidi"
-  },
-  "panels/elements/StylesSidebarPane.ts | insertStyleRuleBelow": {
-    "message": "Faka Umthetho Wesitayela Ngezansi"
-  },
   "panels/elements/StylesSidebarPane.ts | invalidPropertyValue": {
     "message": "Inani lesakhiwo elingavumelekile"
   },
@@ -4781,24 +4838,12 @@
   "panels/elements/StylesSidebarPane.ts | pseudoSElement": {
     "message": "I-Pseudo ::{PH1} i-element"
   },
-  "panels/elements/StylesSidebarPane.ts | sattributesStyle": {
-    "message": "{PH1}[Isitayela Sezibaluli]"
-  },
-  "panels/elements/StylesSidebarPane.ts | showAllPropertiesSMore": {
-    "message": "Bonisa Zonke Izakhiwo ({PH1} okuningi)"
-  },
-  "panels/elements/StylesSidebarPane.ts | styleAttribute": {
-    "message": "Isibaluli se-style"
+  "panels/elements/StylesSidebarPane.ts | toggleRenderingEmulations": {
+    "message": "Guqula ama-emulation afanayo okunikezela"
   },
   "panels/elements/StylesSidebarPane.ts | unknownPropertyName": {
     "message": "Igama lempahla engaziwa"
   },
-  "panels/elements/StylesSidebarPane.ts | userAgentStylesheet": {
-    "message": "isitayela seshidi lethuluzi lomsebenzisi"
-  },
-  "panels/elements/StylesSidebarPane.ts | viaInspector": {
-    "message": "ngesihloli"
-  },
   "panels/elements/components/AccessibilityTreeNode.ts | ignored": {
     "message": "Izitshiwe"
   },
@@ -5345,6 +5390,9 @@
   "panels/issues/CSPViolationsView.ts | filter": {
     "message": "Hlunga"
   },
+  "panels/issues/ComboBoxOfCheckBoxes.ts | genericMenuLabel": {
+    "message": "Imenyu"
+  },
   "panels/issues/CorsIssueDetailsView.ts | allowCredentialsValueFromHeader": {
     "message": "Access-Control-Allow-Credentials Inani lonhlokwana"
   },
@@ -6425,6 +6473,9 @@
   "panels/network/NetworkConfigView.ts | enterACustomUserAgent": {
     "message": "Faka umenzeli womsebenzisi"
   },
+  "panels/network/NetworkConfigView.ts | networkConditionsPanelShown": {
+    "message": "Izimo zenethiwekhi zibonisiwe"
+  },
   "panels/network/NetworkConfigView.ts | networkThrottling": {
     "message": "I-throttling yenethiwekhi"
   },
@@ -7040,6 +7091,9 @@
   "panels/network/RequestHeadersView.ts | general": {
     "message": "Okuvamile"
   },
+  "panels/network/RequestHeadersView.ts | headerOverrides": {
+    "message": "Ukukhipha unhlokweni"
+  },
   "panels/network/RequestHeadersView.ts | learnMore": {
     "message": "Funda kabanzi"
   },

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -110,7 +110,7 @@ const UIStrings = {
   obsoleteWebRtcCipherSuite:
       'Your partner is negotiating an obsolete (D)TLS version. Please check with your partner to have this fixed.',
   /**
-   *@description TODO(crbug.com/1318868): Description needed for translation
+   *@description This issue indicates that a `<source>` element with a `<picture>` parent was using an `src` attribute, which is not valid and is ignored by the browser. The `srcset` attribute should be used instead.
    */
   pictureSourceSrc:
       '`<source src>` with a `<picture>` parent is invalid and therefore ignored. Please use `<source srcset>` instead.',

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -113,17 +113,29 @@ const UIStrings = {
    */
   runLighthouseInMode: 'Run Lighthouse in navigation, timespan, or snapshot mode',
   /**
-   * @description Label of a radio option for a Lighthouse mode that audits a page navigation.
+   * @description Label of a radio option for a Lighthouse mode that audits a page navigation. This should be marked as the default radio option.
    */
-  navigation: 'Navigation',
+  navigation: 'Navigation (Default)',
+  /**
+   * @description Tooltip description of a radio option for a Lighthouse mode that audits a page navigation.
+   */
+  navigationTooltip: 'Navigation mode analyzes a page load, exactly like the original Lighthouse reports.',
   /**
    * @description Label of a radio option for a Lighthouse mode that audits user interactions over a period of time.
    */
   timespan: 'Timespan',
+  /**
+   * @description Tooltip description of a radio option for a Lighthouse mode that audits user interactions over a period of time.
+   */
+  timespanTooltip: 'Timespan mode analyzes an arbitrary period of time, typically containing user interactions.',
   /**
    * @description Label of a radio option for a Lighthouse mode that audits the current page state.
    */
   snapshot: 'Snapshot',
+  /**
+   * @description Tooltip description of a radio option for a Lighthouse mode that audits the current page state.
+   */
+  snapshotTooltip: 'Snapshot mode analyzes the page in a particular state, typically after user interactions.',
   /**
   *@description Text for the mobile platform, as opposed to desktop
   */
@@ -364,6 +376,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     this.dispatchEventToListeners(Events.PageAuditabilityChanged, {helpText});
 
     void this.hasImportantResourcesNotCleared().then(warning => {
+      if (this.getFlags().mode !== 'navigation') {
+        warning = '';
+      }
       this.dispatchEventToListeners(Events.PageWarningsChanged, {warning});
     });
   }
@@ -456,11 +471,23 @@ export const RuntimeSettings: RuntimeSetting[] = [
       flags.mode = value;
     },
     options: [
-      {label: i18nLazyString(UIStrings.navigation), value: 'navigation'},
-      {label: i18nLazyString(UIStrings.timespan), value: 'timespan'},
-      {label: i18nLazyString(UIStrings.snapshot), value: 'snapshot'},
+      {
+        label: i18nLazyString(UIStrings.navigation),
+        tooltip: i18nLazyString(UIStrings.navigationTooltip),
+        value: 'navigation',
+      },
+      {
+        label: i18nLazyString(UIStrings.timespan),
+        tooltip: i18nLazyString(UIStrings.timespanTooltip),
+        value: 'timespan',
+      },
+      {
+        label: i18nLazyString(UIStrings.snapshot),
+        tooltip: i18nLazyString(UIStrings.snapshotTooltip),
+        value: 'snapshot',
+      },
     ],
-    learnMore: undefined,
+    learnMore: 'https://web.dev/lighthouse-user-flows/',
   },
   {
     // This setting is disabled, but we keep it around to show in the UI.
@@ -545,7 +572,11 @@ export interface RuntimeSetting {
   setting: Common.Settings.Setting<string|boolean>;
   description: () => Common.UIString.LocalizedString;
   setFlags: (flags: Flags, value: string|boolean) => void;
-  options?: {label: () => Common.UIString.LocalizedString, value: string}[];
+  options?: {
+    label: () => Common.UIString.LocalizedString,
+    value: string,
+    tooltip?: () => Common.UIString.LocalizedString,
+  }[];
   title?: () => Common.UIString.LocalizedString;
   learnMore?: string;
 }

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -174,7 +174,7 @@ export class LighthousePanel extends UI.Panel.Panel {
       return;
     }
 
-    this.startView.updateStartButton();
+    this.startView.updateMode();
 
     this.unauditableExplanation = evt.data.helpText;
     this.startView.setUnauditableExplanation(evt.data.helpText);

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -44,8 +44,8 @@ export class StartView extends UI.Widget.Widget {
   protected controller: LighthouseController;
   private readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
   protected startButton!: HTMLButtonElement;
-  private helpText?: Element;
-  private warningText?: Element;
+  protected helpText?: Element;
+  protected warningText?: Element;
   private shouldConfirm?: boolean;
 
   constructor(controller: LighthouseController) {
@@ -66,6 +66,17 @@ export class StartView extends UI.Widget.Widget {
       throw new Error(`${settingName} is not a setting with options`);
     }
 
+    const labelEl = document.createElement('div');
+    labelEl.classList.add('lighthouse-form-section-label');
+    labelEl.textContent = label;
+
+    if (runtimeSetting.learnMore) {
+      const link =
+          UI.XLink.XLink.create(runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more');
+      labelEl.append(link);
+    }
+    parentElement.appendChild(labelEl);
+
     const control = new RadioSetting(
         runtimeSetting.options, runtimeSetting.setting as Common.Settings.Setting<string>,
         runtimeSetting.description());
@@ -91,7 +102,7 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  private populateFormControls(fragment: UI.Fragment.Fragment): void {
+  protected populateFormControls(fragment: UI.Fragment.Fragment): void {
     // Populate the device type
     const deviceTypeFormElements = fragment.$('device-type-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.device_type', i18nString(UIStrings.device), deviceTypeFormElements);
@@ -157,9 +168,6 @@ export class StartView extends UI.Widget.Widget {
   </div>
   </div>
   <div class="lighthouse-form-section">
-  <div class="lighthouse-form-section-label">
-  ${i18nString(UIStrings.device)}
-  </div>
   <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
   </div>
   </form>
@@ -173,7 +181,7 @@ export class StartView extends UI.Widget.Widget {
     this.contentElement.style.overflow = 'auto';
   }
 
-  updateStartButton(): void {
+  updateMode(): void {
     // Do nothing in default case.
   }
 

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -10,20 +10,32 @@ import {StartView} from './LighthouseStartView.js';
 import {Events} from './LighthouseController.js';
 
 const UIStrings = {
+  /**
+   * @description Text displayed as the title of a panel that can be used to audit a web page with Lighthouse.
+   */
+  generateLighthouseReport: 'Generate a Lighthouse report',
   /**
    * @description Text that refers to the Lighthouse mode
    */
   mode: 'Mode',
+  /**
+   * @description Title in the Lighthouse Start View for list of categories to run during audit
+   */
+  categories: 'Categories',
+  /**
+   * @description Title in the Lighthouse Start View for list of available start plugins
+   */
+  plugins: 'Plugins',
   /**
    * @description Label for a button to start analyzing a page navigation with Lighthouse
    */
-  analyzeNavigation: 'Analyze navigation',
+  analyzeNavigation: 'Analyze page load',
   /**
    * @description Label for a button to start analyzing the current page state with Lighthouse
    */
-  analyzeSnapshot: 'Analyze snapshot',
+  analyzeSnapshot: 'Analyze page state',
   /**
-   * @description Label for a button that ends a Lighthouse timespan
+   * @description Label for a button that starts a Lighthouse mode that analyzes user interactions over a period of time.
    */
   startTimespan: 'Start timespan',
 };
@@ -35,31 +47,75 @@ export class StartViewFR extends StartView {
   protected render(): void {
     super.render();
     const fragment = UI.Fragment.Fragment.build`
-  <div class="lighthouse-form-section">
-  <div class="lighthouse-form-section-label">
-  ${i18nString(UIStrings.mode)}
-  </div>
-  <div class="lighthouse-form-elements" $="mode-form-elements"></div>
+<form class="lighthouse-start-view-fr">
+  <header class="hbox">
+    <div class="lighthouse-logo"></div>
+    <div class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</div>
+    <div class="lighthouse-start-button-container">${this.startButton}</div>
+  </header>
+  <div $="help-text" class="lighthouse-help-text hidden"></div>
+  <div class="lighthouse-options hbox">
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="mode-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-categories">
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</div>
+        <div class="lighthouse-form-elements" $="categories-form-elements"></div>
+      </div>
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">
+          <div class="lighthouse-icon-label">${i18nString(UIStrings.plugins)}</div>
+        </div>
+        <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
+      </div>
+    </div>
   </div>
+  <div $="warning-text" class="lighthouse-warning-text hidden"></div>
+</form>
     `;
 
+    this.helpText = fragment.$('help-text');
+    this.warningText = fragment.$('warning-text');
+
+    // The previous radios are removed later and don't exist on the new fragment yet.
+    this.populateFormControls(fragment);
+
     // Populate the Lighthouse mode
     const modeFormElements = fragment.$('mode-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
 
-    const form = this.contentElement.querySelector('form');
-    form?.appendChild(fragment.element());
-    this.updateStartButton();
+    this.contentElement.textContent = '';
+    this.contentElement.append(fragment.element());
+    this.updateMode();
+  }
+
+  onResize(): void {
+    const useNarrowLayout = this.contentElement.offsetWidth < 500;
+    const useWideLayout = this.contentElement.offsetWidth > 800;
+    const headerEl = this.contentElement.querySelector('.lighthouse-start-view-fr header');
+    const optionsEl = this.contentElement.querySelector('.lighthouse-options');
+    if (headerEl) {
+      headerEl.classList.toggle('hbox', !useNarrowLayout);
+      headerEl.classList.toggle('vbox', useNarrowLayout);
+    }
+    if (optionsEl) {
+      optionsEl.classList.toggle('wide', useWideLayout);
+      optionsEl.classList.toggle('narrow', useNarrowLayout);
+    }
   }
 
-  updateStartButton(): void {
+  updateMode(): void {
     const {mode} = this.controller.getFlags();
 
-    let label: Platform.UIString.LocalizedString;
+    let buttonLabel: Platform.UIString.LocalizedString;
     let callback: () => void;
 
     if (mode === 'timespan') {
-      label = i18nString(UIStrings.startTimespan);
+      buttonLabel = i18nString(UIStrings.startTimespan);
       callback = (): void => {
         this.controller.dispatchEventToListeners(
             Events.RequestLighthouseTimespanStart,
@@ -67,7 +123,7 @@ export class StartViewFR extends StartView {
         );
       };
     } else if (mode === 'snapshot') {
-      label = i18nString(UIStrings.analyzeSnapshot);
+      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
       callback = (): void => {
         this.controller.dispatchEventToListeners(
             Events.RequestLighthouseStart,
@@ -75,7 +131,7 @@ export class StartViewFR extends StartView {
         );
       };
     } else {
-      label = i18nString(UIStrings.analyzeNavigation);
+      buttonLabel = i18nString(UIStrings.analyzeNavigation);
       callback = (): void => {
         this.controller.dispatchEventToListeners(
             Events.RequestLighthouseStart,
@@ -85,16 +141,16 @@ export class StartViewFR extends StartView {
     }
 
     this.startButton = UI.UIUtils.createTextButton(
-        label,
+        buttonLabel,
         callback,
         /* className */ '',
         /* primary */ true,
     );
 
-    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
-    if (startButtonContainer) {
-      startButtonContainer.textContent = '';
-      startButtonContainer.appendChild(this.startButton);
+    const startButtonContainerEl = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainerEl) {
+      startButtonContainerEl.textContent = '';
+      startButtonContainerEl.appendChild(this.startButton);
     }
   }
 }

package/front_end/panels/lighthouse/RadioSetting.ts

@@ -5,16 +5,20 @@
 import type * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+interface RadioOption {
+  value: string;
+  label: () => Common.UIString.LocalizedString;
+  tooltip?: () => Common.UIString.LocalizedString;
+}
+
 export class RadioSetting {
   private readonly setting: Common.Settings.Setting<string>;
-  private options: {value: string, label: () => Common.UIString.LocalizedString}[];
+  private options: RadioOption[];
   element: HTMLDivElement;
   private radioElements: HTMLInputElement[];
   private ignoreChangeEvents: boolean;
   private selectedIndex: number;
-  constructor(
-      options: {value: string, label: () => Common.UIString.LocalizedString}[],
-      setting: Common.Settings.Setting<string>, description: string) {
+  constructor(options: RadioOption[], setting: Common.Settings.Setting<string>, description: string) {
     this.setting = setting;
     this.options = options;
 
@@ -32,9 +36,11 @@ export class RadioSetting {
   `;
 
       this.element.appendChild(fragment.element());
+
+      const tooltip = option.tooltip?.() || description;
       if (description) {
-        UI.Tooltip.Tooltip.install(fragment.$('input') as HTMLElement, description);
-        UI.Tooltip.Tooltip.install(fragment.$('span') as HTMLElement, description);
+        UI.Tooltip.Tooltip.install(fragment.$('input') as HTMLElement, tooltip);
+        UI.Tooltip.Tooltip.install(fragment.$('span') as HTMLElement, tooltip);
       }
       const radioElement = fragment.$('input') as HTMLInputElement;
       radioElement.addEventListener('change', this.valueChanged.bind(this));