chrome-devtools-frontend 1.0.1006768 → 1.0.1007846

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../bindings/bindings.js';
 import * as Formatter from '../formatter/formatter.js';
@@ -12,7 +11,7 @@ import * as Protocol from '../../generated/protocol.js';
 
 interface CachedScopeMap {
   sourceMap: SDK.SourceMap.SourceMap|null;
-  identifiersPromise: Promise<Map<string, string>>;
+  mappingPromise: Promise<{variableMapping: Map<string, string>, thisMapping: string|null}>;
 }
 
 const scopeToCachedIdentifiersMap = new WeakMap<SDK.DebuggerModel.ScopeChainEntry, CachedScopeMap>();
@@ -29,61 +28,138 @@ export class Identifier {
   }
 }
 
-export const scopeIdentifiers = async function(scope: SDK.DebuggerModel.ScopeChainEntry): Promise<Identifier[]> {
-  if (scope.type() === Protocol.Debugger.ScopeType.Global) {
-    return [];
-  }
-  const startLocation = scope.startLocation();
-  const endLocation = scope.endLocation();
-  if (!startLocation || !endLocation) {
-    return [];
+const computeScopeTree = async function(functionScope: SDK.DebuggerModel.ScopeChainEntry): Promise<{
+  scopeTree: Formatter.FormatterWorkerPool.ScopeTreeNode, text: TextUtils.Text.Text, slide: number,
+}|null> {
+  const functionStartLocation = functionScope.startLocation();
+  const functionEndLocation = functionScope.endLocation();
+  if (!functionStartLocation || !functionEndLocation) {
+    return null;
   }
-  const script = startLocation.script();
-  if (!script || !script.sourceMapURL || script !== endLocation.script()) {
-    return [];
+  const script = functionStartLocation.script();
+  if (!script || !script.sourceMapURL || script !== functionEndLocation.script()) {
+    return null;
   }
   const {content} = await script.requestContent();
   if (!content) {
-    return [];
+    return null;
   }
 
   const text = new TextUtils.Text.Text(content);
   const scopeRange = new TextUtils.TextRange.TextRange(
-      startLocation.lineNumber, startLocation.columnNumber, endLocation.lineNumber, endLocation.columnNumber);
+      functionStartLocation.lineNumber, functionStartLocation.columnNumber, functionEndLocation.lineNumber,
+      functionEndLocation.columnNumber);
   const scopeText = text.extract(scopeRange);
   const scopeStart = text.toSourceRange(scopeRange).offset;
   const prefix = 'function fui';
-  const identifiers =
-      await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptIdentifiers(prefix + scopeText);
-  const result = [];
-  const cursor = new TextUtils.TextCursor.TextCursor(text.lineEndings());
-  for (const id of identifiers) {
-    if (id.offset < prefix.length) {
-      continue;
-    }
-    const start = scopeStart + id.offset - prefix.length;
-    cursor.resetTo(start);
-    result.push(new Identifier(id.name, cursor.lineNumber(), cursor.columnNumber()));
+  const scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
+  if (!scopeTree) {
+    return null;
   }
-  return result;
+  return {scopeTree, text, slide: scopeStart - prefix.length};
 };
 
-export const resolveScopeChain =
-    async function(callFrame: SDK.DebuggerModel.CallFrame|null): Promise<SDK.DebuggerModel.ScopeChainEntry[]|null> {
-  if (!callFrame) {
+export const scopeIdentifiers = async function(
+    functionScope: SDK.DebuggerModel.ScopeChainEntry|null, scope: SDK.DebuggerModel.ScopeChainEntry): Promise<{
+  freeVariables: Identifier[], boundVariables: Identifier[],
+}|null> {
+  if (!functionScope) {
     return null;
   }
-  const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-  if (pluginManager) {
-    const scopeChain = await pluginManager.resolveScopeChain(callFrame);
-    if (scopeChain) {
-      return scopeChain;
+
+  const startLocation = scope.startLocation();
+  const endLocation = scope.endLocation();
+  if (!startLocation || !endLocation) {
+    return null;
+  }
+
+  // Parse the function scope to get the scope tree.
+  const scopeTreeAndStart = await computeScopeTree(functionScope);
+  if (!scopeTreeAndStart) {
+    return null;
+  }
+  const {scopeTree, text, slide} = scopeTreeAndStart;
+
+  // Compute the offset within the scope tree coordinate space.
+  const scopeOffsets = {
+    start: text.offsetFromPosition(startLocation.lineNumber, startLocation.columnNumber) - slide,
+    end: text.offsetFromPosition(endLocation.lineNumber, endLocation.columnNumber) - slide,
+  };
+
+  if (!contains(scopeTree, scopeOffsets)) {
+    return null;
+  }
+
+  // Find the corresponding scope in the scope tree.
+  let containingScope = scopeTree;
+  const ancestorScopes = [];
+  while (true) {
+    let childFound = false;
+    for (const child of containingScope.children) {
+      if (contains(child, scopeOffsets)) {
+        // We found a nested containing scope, continue with search there.
+        ancestorScopes.push(containingScope);
+        containingScope = child;
+        childFound = true;
+        break;
+      }
+      // Sanity check: |scope| should not straddle any of the scopes in the tree. That is:
+      // Either |scope| is disjoint from |child| or |child| must be inside |scope|.
+      // (Or the |scope| is inside |child|, but that case is covered above.)
+      if (!disjoint(scopeOffsets, child) && !contains(scopeOffsets, child)) {
+        console.error('Wrong nesting of scopes');
+        return null;
+      }
+    }
+    if (!childFound) {
+      // We found the deepest scope in the tree that contains our scope chain entry.
+      break;
     }
   }
-  return callFrame.scopeChain();
+
+  // Now we have containing scope. Collect all the scope variables.
+  const boundVariables = [];
+  const cursor = new TextUtils.TextCursor.TextCursor(text.lineEndings());
+  for (const variable of containingScope.variables) {
+    // Skip the fixed-kind variable (i.e., 'this' or 'arguments') if we only found their "definition"
+    // without any uses.
+    if (variable.kind === Formatter.FormatterWorkerPool.DefinitionKind.Fixed && variable.offsets.length <= 1) {
+      continue;
+    }
+
+    for (const offset of variable.offsets) {
+      const start = offset + slide;
+      cursor.resetTo(start);
+      boundVariables.push(new Identifier(variable.name, cursor.lineNumber(), cursor.columnNumber()));
+    }
+  }
+
+  // Compute free variables by collecting all the ancestor variables that are used in |containingScope|.
+  const freeVariables = [];
+  for (const ancestor of ancestorScopes) {
+    for (const ancestorVariable of ancestor.variables) {
+      for (const offset of ancestorVariable.offsets) {
+        if (offset >= containingScope.start && offset < containingScope.end) {
+          const start = offset + slide;
+          cursor.resetTo(start);
+          freeVariables.push(new Identifier(ancestorVariable.name, cursor.lineNumber(), cursor.columnNumber()));
+        }
+      }
+    }
+  }
+  return {boundVariables, freeVariables};
+
+  function contains(scope: {start: number, end: number}, candidate: {start: number, end: number}): boolean {
+    return (scope.start <= candidate.start) && (scope.end >= candidate.end);
+  }
+  function disjoint(scope: {start: number, end: number}, other: {start: number, end: number}): boolean {
+    return (scope.end <= other.start) || (other.end <= scope.start);
+  }
 };
 
-export const resolveScope = async(scope: SDK.DebuggerModel.ScopeChainEntry): Promise<Map<string, string>> => {
+const resolveScope =
+    async(scope: SDK.DebuggerModel
+              .ScopeChainEntry): Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
   let cachedScopeMap = scopeToCachedIdentifiersMap.get(scope);
   const script = scope.callFrame().script;
   const sourceMap = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().sourceMapForScript(script);
@@ -93,33 +169,59 @@ export const resolveScope = async(scope: SDK.DebuggerModel.ScopeChainEntry): Pro
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const identifiersPromise = (async(): Promise<Map<any, any>> => {
-      const namesMapping = new Map<string, string>();
-      if (sourceMap) {
-        const textCache = new Map<string, TextUtils.Text.Text>();
-        // Extract as much as possible from SourceMap and resolve
-        // missing identifier names from SourceMap ranges.
-        const promises = [];
-        for (const id of await scopeIdentifiers(scope)) {
-          const entry = sourceMap.findEntry(id.lineNumber, id.columnNumber);
-          if (entry && entry.name) {
-            namesMapping.set(id.name, entry.name);
-          } else {
-            promises.push(resolveSourceName(script, sourceMap, id, textCache).then(sourceName => {
-              if (sourceName) {
-                namesMapping.set(id.name, sourceName);
+    const identifiersPromise =
+        (async(): Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
+          const variableMapping = new Map<string, string>();
+          let thisMapping = null;
+
+          if (!sourceMap) {
+            return {variableMapping, thisMapping};
+          }
+          const textCache = new Map<string, TextUtils.Text.Text>();
+          // Extract as much as possible from SourceMap and resolve
+          // missing identifier names from SourceMap ranges.
+          const promises: Promise<void>[] = [];
+
+          const resolveEntry = (id: Identifier, handler: (sourceName: string) => void): void => {
+            const entry = sourceMap.findEntry(id.lineNumber, id.columnNumber);
+            if (entry && entry.name) {
+              handler(entry.name);
+            } else {
+              promises.push(resolveSourceName(script, sourceMap, id, textCache).then(sourceName => {
+                if (sourceName) {
+                  handler(sourceName);
+                }
+              }));
+            }
+          };
+
+          const functionScope = findFunctionScope();
+          const parsedVariables = await scopeIdentifiers(functionScope, scope);
+          if (!parsedVariables) {
+            return {variableMapping, thisMapping};
+          }
+          for (const id of parsedVariables.boundVariables) {
+            resolveEntry(id, sourceName => {
+              // Let use ignore 'this' mappings - those are handled separately.
+              if (sourceName !== 'this') {
+                variableMapping.set(id.name, sourceName);
               }
-            }));
+            });
           }
-        }
-        await Promise.all(promises).then(getScopeResolvedForTest());
-      }
-      return namesMapping;
-    })();
-    cachedScopeMap = {sourceMap, identifiersPromise};
-    scopeToCachedIdentifiersMap.set(scope, {sourceMap, identifiersPromise});
+          for (const id of parsedVariables.freeVariables) {
+            resolveEntry(id, sourceName => {
+              if (sourceName === 'this') {
+                thisMapping = id.name;
+              }
+            });
+          }
+          await Promise.all(promises).then(getScopeResolvedForTest());
+          return {variableMapping, thisMapping};
+        })();
+    cachedScopeMap = {sourceMap, mappingPromise: identifiersPromise};
+    scopeToCachedIdentifiersMap.set(scope, {sourceMap, mappingPromise: identifiersPromise});
   }
-  return await cachedScopeMap.identifiersPromise;
+  return await cachedScopeMap.mappingPromise;
 
   async function resolveSourceName(
       script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap, id: Identifier,
@@ -152,6 +254,39 @@ export const resolveScope = async(scope: SDK.DebuggerModel.ScopeChainEntry): Pro
     const originalIdentifier = text.extract(sourceTextRange).trim();
     return /[a-zA-Z0-9_$]+/.test(originalIdentifier) ? originalIdentifier : null;
   }
+
+  function findFunctionScope(): SDK.DebuggerModel.ScopeChainEntry|null {
+    // First find the scope in the callframe's scope chain and then find the containing function scope (closure or local).
+    const scopeChain = scope.callFrame().scopeChain();
+    let scopeIndex = 0;
+    for (scopeIndex; scopeIndex < scopeChain.length; scopeIndex++) {
+      if (scopeChain[scopeIndex] === scope) {
+        break;
+      }
+    }
+    for (scopeIndex; scopeIndex < scopeChain.length; scopeIndex++) {
+      const kind = scopeChain[scopeIndex].type();
+      if (kind === Protocol.Debugger.ScopeType.Local || kind === Protocol.Debugger.ScopeType.Closure) {
+        break;
+      }
+    }
+    return scopeIndex === scopeChain.length ? null : scopeChain[scopeIndex];
+  }
+};
+
+export const resolveScopeChain =
+    async function(callFrame: SDK.DebuggerModel.CallFrame|null): Promise<SDK.DebuggerModel.ScopeChainEntry[]|null> {
+  if (!callFrame) {
+    return null;
+  }
+  const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+  if (pluginManager) {
+    const scopeChain = await pluginManager.resolveScopeChain(callFrame);
+    if (scopeChain) {
+      return scopeChain;
+    }
+  }
+  return callFrame.scopeChain();
 };
 
 export const allVariablesInCallFrame = async(callFrame: SDK.DebuggerModel.CallFrame): Promise<Map<string, string>> => {
@@ -163,8 +298,8 @@ export const allVariablesInCallFrame = async(callFrame: SDK.DebuggerModel.CallFr
   const scopeChain = callFrame.scopeChain();
   const nameMappings = await Promise.all(scopeChain.map(resolveScope));
   const reverseMapping = new Map<string, string>();
-  for (const map of nameMappings) {
-    for (const [compiledName, originalName] of map) {
+  for (const {variableMapping} of nameMappings) {
+    for (const [compiledName, originalName] of variableMapping) {
       if (originalName && !reverseMapping.has(originalName)) {
         reverseMapping.set(originalName, compiledName);
       }
@@ -234,15 +369,13 @@ export const resolveThisObject =
     return callFrame.thisObject();
   }
 
-  const namesMapping = await resolveScope(scopeChain[0]);
-  const thisMappings = Platform.MapUtilities.inverse(namesMapping).get('this');
-  if (!thisMappings || thisMappings.size !== 1) {
+  const {thisMapping} = await resolveScope(scopeChain[0]);
+  if (!thisMapping) {
     return callFrame.thisObject();
   }
 
-  const [expression] = thisMappings.values();
   const result = await callFrame.evaluate(({
-    expression,
+    expression: thisMapping,
     objectGroup: 'backtrace',
     includeCommandLineAPI: false,
     silent: true,
@@ -322,7 +455,7 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
   async getAllProperties(accessorPropertiesOnly: boolean, generatePreview: boolean):
       Promise<SDK.RemoteObject.GetPropertiesResult> {
     const allProperties = await this.object.getAllProperties(accessorPropertiesOnly, generatePreview);
-    const namesMapping = await resolveScope(this.scope);
+    const {variableMapping} = await resolveScope(this.scope);
 
     const properties = allProperties.properties;
     const internalProperties = allProperties.internalProperties;
@@ -330,7 +463,7 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
     if (properties) {
       for (let i = 0; i < properties.length; ++i) {
         const property = properties[i];
-        const name = namesMapping.get(property.name) || properties[i].name;
+        const name = variableMapping.get(property.name) || properties[i].name;
         if (!property.value) {
           continue;
         }
@@ -343,7 +476,7 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
   }
 
   async setPropertyValue(argumentName: string|Protocol.Runtime.CallArgument, value: string): Promise<string|undefined> {
-    const namesMapping = await resolveScope(this.scope);
+    const {variableMapping} = await resolveScope(this.scope);
 
     let name;
     if (typeof argumentName === 'string') {
@@ -353,8 +486,8 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
     }
 
     let actualName: string = name;
-    for (const compiledName of namesMapping.keys()) {
-      if (namesMapping.get(compiledName) === name) {
+    for (const compiledName of variableMapping.keys()) {
+      if (variableMapping.get(compiledName) === name) {
         actualName = compiledName;
         break;
       }

package/front_end/models/workspace/UISourceCode.ts

@@ -127,6 +127,13 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.urlInternal;
   }
 
+  // Identifier used for deduplicating scripts that are considered by the
+  // DevTools UI to be the same script. For now this is just the url but this
+  // is likely to change in the future.
+  canononicalScriptId(): string {
+    return this.urlInternal;
+  }
+
   parentURL(): Platform.DevToolsPath.UrlString {
     return this.parentURLInternal;
   }

package/front_end/panels/application/AppManifestView.ts

@@ -663,7 +663,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     }
 
     const userPreferences = parsedManifest['user_preferences'] || {};
-    const colorSchemeDark = userPreferences['color_scheme_dark'] || {};
+    const colorScheme = userPreferences['color_scheme'] || {};
+    const colorSchemeDark = colorScheme['dark'] || {};
     const darkThemeColorString = colorSchemeDark['theme_color'];
     const hasDarkThemeColor = typeof darkThemeColorString === 'string';
     this.darkThemeColorField.parentElement?.classList.toggle('hidden', !hasDarkThemeColor);

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -94,6 +94,10 @@ const UIStrings = {
    * @description Link Text about explanation of back/forward cache
    */
   learnMore: 'Learn more: back/forward cache eligibility',
+  /**
+   * @description Link Text about unload handler
+   */
+  neverUseUnload: 'Learn more: Never use unload handler',
   /**
    * @description Explanation for 'pending support' items which prevent the page from being eligible
    * for back/forward cache.
@@ -536,6 +540,17 @@ export class BackForwardCacheView extends HTMLElement {
     `;
   }
 
+  #maybeRenderDeepLinkToUnload(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.LitTemplate {
+    if (explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInMainFrame ||
+        explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInSubFrame) {
+      return LitHtml.html`
+        <x-link href="https://web.dev/bfcache/#never-use-the-unload-event" class="link">
+          ${i18nString(UIStrings.neverUseUnload)}
+        </x-link>`;
+    }
+    return LitHtml.nothing;
+  }
+
   #renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation, frames: string[]|undefined):
       LitHtml.TemplateResult {
     // clang-format off
@@ -554,6 +569,7 @@ export class BackForwardCacheView extends HTMLElement {
             </div>
             <div>
               ${NotRestoredReasonDescription[explanation.reason].name()}
+              ${this.#maybeRenderDeepLinkToUnload(explanation)}
              ${this.#maybeRenderReasonContext(explanation)}
            </div>` :
             LitHtml.nothing}

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -53,6 +53,13 @@ const UIStrings = {
   */
   sS: '{PH1}: {PH2}',
   /**
+  *@description Text with three placeholders separated by a colon and a comma
+  *@example {Node removed} PH1
+  *@example {div#id1} PH2
+  *@example {checked} PH3
+  */
+  sSS: '{PH1}: {PH2}, {PH3}',
+  /**
   *@description Text exposed to screen readers on checked items.
   */
   checked: 'checked',
@@ -196,19 +203,26 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     description.textContent = breakpointTypeLabel ? breakpointTypeLabel() : null;
     const breakpointTypeText = breakpointTypeLabel ? breakpointTypeLabel() : '';
     UI.ARIAUtils.setAccessibleName(checkboxElement, breakpointTypeText);
+    const checkedStateText = item.enabled ? i18nString(UIStrings.checked) : i18nString(UIStrings.unchecked);
     const linkifiedNode = document.createElement('monospace');
     linkifiedNode.style.display = 'block';
     labelElement.appendChild(linkifiedNode);
     void Common.Linkifier.Linkifier.linkify(item.node, {preventKeyboardFocus: true, tooltip: undefined})
         .then(linkified => {
           linkifiedNode.appendChild(linkified);
+          // Give the checkbox an aria-label as it is required for all form element
           UI.ARIAUtils.setAccessibleName(
               checkboxElement, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
+          // The parent list element is the one that actually gets focused.
+          // Assign it an aria-label with complete information for the screen reader to read out properly
+          UI.ARIAUtils.setAccessibleName(
+              element,
+              i18nString(
+                  UIStrings.sSS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent(), PH3: checkedStateText}));
         });
 
     labelElement.appendChild(description);
 
-    const checkedStateText = item.enabled ? i18nString(UIStrings.checked) : i18nString(UIStrings.unchecked);
     if (item === this.#highlightedBreakpoint) {
       element.classList.add('breakpoint-hit');
       UI.ARIAUtils.setDescription(element, i18nString(UIStrings.sBreakpointHit, {PH1: checkedStateText}));

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -146,14 +146,22 @@ const UIStrings = {
   */
   desktop: 'Desktop',
   /**
-  *@description Text for option to enable simulated throttling in Lighthouse Panel
-  */
-  simulatedThrottling: 'Simulated throttling',
+   * @description Text for an option to select a throttling method.
+   */
+  throttlingMethod: 'Throttling method',
   /**
-  *@description Tooltip text that appears when hovering over the 'Simulated Throttling' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel
-  */
+   * @description Text for an option in a dropdown to use simulated throttling. This is the default setting.
+   */
+  simulatedThrottling: 'Simulated throttling (default)',
+  /**
+   * @description Text for an option in a dropdown to use DevTools throttling. This option should only be used by advanced users.
+   */
+  devtoolsThrottling: 'DevTools throttling (advanced)',
+  /**
+   * @description Tooltip text that appears when hovering over the 'Simulated Throttling' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel
+   */
   simulateASlowerPageLoadBasedOn:
-      'Simulate a slower page load, based on data from an initial unthrottled load. If disabled, the page is actually slowed with applied throttling.',
+      'Simulated throttling simulates a slower page load based on data from an initial unthrottled load. DevTools throttling actually slows down the page.',
   /**
   *@description Text of checkbox to reset storage features prior to running audits in Lighthouse
   */
@@ -515,17 +523,24 @@ export const RuntimeSettings: RuntimeSetting[] = [
   {
     // This setting is disabled, but we keep it around to show in the UI.
     setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.throttling', true, Common.Settings.SettingStorageType.Synced),
-    title: i18nLazyString(UIStrings.simulatedThrottling),
+        'lighthouse.throttling', 'simulated', Common.Settings.SettingStorageType.Synced),
+    title: i18nLazyString(UIStrings.throttlingMethod),
     // We will disable this when we have a Lantern trace viewer within DevTools.
     learnMore:
         'https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md#devtools-lighthouse-panel-throttling' as
         Platform.DevToolsPath.UrlString,
     description: i18nLazyString(UIStrings.simulateASlowerPageLoadBasedOn),
     setFlags: (flags: Flags, value: string|boolean): void => {
-      flags.throttlingMethod = value ? 'simulate' : 'devtools';
+      if (typeof value === 'string') {
+        flags.throttlingMethod = value;
+      } else {
+        flags.throttlingMethod = value ? 'simulate' : 'devtools';
+      }
     },
-    options: undefined,
+    options: [
+      {label: i18nLazyString(UIStrings.simulatedThrottling), value: 'simulate'},
+      {label: i18nLazyString(UIStrings.devtoolsThrottling), value: 'devtools'},
+    ],
   },
   {
     setting: Common.Settings.Settings.instance().createSetting(

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -7,7 +7,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {LighthouseController} from './LighthouseController.js';
+import type {LighthouseController, Preset} from './LighthouseController.js';
 import {Events, Presets, RuntimeSettings} from './LighthouseController.js';
 import {RadioSetting} from './RadioSetting.js';
 
@@ -42,10 +42,11 @@ const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartView.
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class StartView extends UI.Widget.Widget {
   protected controller: LighthouseController;
-  private readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
+  protected readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
   protected startButton!: HTMLButtonElement;
   protected helpText?: Element;
   protected warningText?: Element;
+  protected checkboxes: Array<{preset: Preset, checkbox: UI.Toolbar.ToolbarCheckbox}> = [];
   private shouldConfirm?: boolean;
 
   constructor(controller: LighthouseController) {
@@ -84,7 +85,7 @@ export class StartView extends UI.Widget.Widget {
     UI.ARIAUtils.setAccessibleName(control.element, label);
   }
 
-  private populateRuntimeSettingAsToolbarCheckbox(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
+  protected populateRuntimeSettingAsToolbarCheckbox(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
     const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
     if (!runtimeSetting || !runtimeSetting.title) {
       throw new Error(`${settingName} is not a setting with a title`);
@@ -102,6 +103,30 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
+  protected populateRuntimeSettingAsToolbarDropdown(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
+    const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
+    if (!runtimeSetting || !runtimeSetting.title) {
+      throw new Error(`${settingName} is not a setting with a title`);
+    }
+
+    const options = runtimeSetting.options?.map(option => ({label: option.label(), value: option.value})) || [];
+
+    runtimeSetting.setting.setTitle(runtimeSetting.title());
+    const control = new UI.Toolbar.ToolbarSettingComboBox(
+        options,
+        runtimeSetting.setting as Common.Settings.Setting<string>,
+        runtimeSetting.title(),
+    );
+    control.setTitle(runtimeSetting.description());
+    toolbar.appendToolbarItem(control);
+    if (runtimeSetting.learnMore) {
+      const link =
+          UI.XLink.XLink.create(runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more');
+      link.style.padding = '5px';
+      control.element.appendChild(link);
+    }
+  }
+
   protected populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
     // Populate the device type
     const deviceTypeFormElements = fragment.$('device-type-form-elements');
@@ -109,15 +134,16 @@ export class StartView extends UI.Widget.Widget {
 
     // Populate the categories
     const categoryFormElements = fragment.$('categories-form-elements') as HTMLElement;
-    categoryFormElements.textContent = '';
     const pluginFormElements = fragment.$('plugins-form-elements') as HTMLElement;
-    pluginFormElements.textContent = '';
+
+    this.checkboxes = [];
     for (const preset of Presets) {
       const formElements = preset.plugin ? pluginFormElements : categoryFormElements;
       preset.setting.setTitle(preset.title());
       const checkbox = new UI.Toolbar.ToolbarSettingCheckbox(preset.setting, preset.description());
       const row = formElements.createChild('div', 'vbox lighthouse-launcher-row');
       row.appendChild(checkbox.element);
+      this.checkboxes.push({preset, checkbox});
       if (mode && !preset.supportedModes.includes(mode)) {
         checkbox.setEnabled(false);
         checkbox.setIndeterminate(true);
@@ -132,7 +158,7 @@ export class StartView extends UI.Widget.Widget {
   protected render(): void {
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
-    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);
+    this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.settingsToolbarInternal);
 
     this.startButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.generateReport),