chrome-devtools-frontend 1.0.1006211 → 1.0.1007307

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/accessibility/axBreadcrumbs.css

@@ -96,11 +96,11 @@
 }
 
 .ax-breadcrumbs .ax-node:not(.inspected):hover {
-  background-color: var(--color-background-elevation-0);
+  background-color: var(--color-background-elevation-1);
 }
 
 .ax-breadcrumbs .ax-node:not(.inspected):focus {
-  background-color: var(--color-background-elevation-1);
+  background-color: var(--color-background-elevation-2);
 }
 
 .ax-breadcrumbs .ax-node.inspected:focus * {

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/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`);
@@ -109,15 +110,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);

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -44,60 +44,22 @@ const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartViewF
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class StartViewFR extends StartView {
-  protected render(): void {
-    super.render();
-    this.refresh();
-  }
-
-  private createStartButton(mode: string): HTMLButtonElement {
-    let buttonLabel: Platform.UIString.LocalizedString;
-    let callback: () => void;
+  changeFormMode?: (mode: string) => void;
 
-    if (mode === 'timespan') {
-      buttonLabel = i18nString(UIStrings.startTimespan);
-      callback = (): void => {
-        this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseTimespanStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
-        );
-      };
-    } else if (mode === 'snapshot') {
-      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
-      callback = (): void => {
-        this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
-        );
-      };
-    } else {
-      buttonLabel = i18nString(UIStrings.analyzeNavigation);
-      callback = (): void => {
-        this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
-        );
-      };
-    }
-
-    return UI.UIUtils.createTextButton(
-        buttonLabel,
-        callback,
-        /* className */ '',
-        /* primary */ true,
-    );
-  }
+  protected render(): void {
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);
 
-  refresh(): void {
     const {mode} = this.controller.getFlags();
-
-    this.startButton = this.createStartButton(mode);
+    this.populateStartButton(mode);
 
     const fragment = UI.Fragment.Fragment.build`
 <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>
+    <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
   </header>
   <div $="help-text" class="lighthouse-help-text hidden"></div>
   <div class="lighthouse-options hbox">
@@ -127,16 +89,75 @@ export class StartViewFR extends StartView {
     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, mode);
-
-    // Populate the Lighthouse mode
     const modeFormElements = fragment.$('mode-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
 
+    // The previous radios are removed later and don't exist on the new fragment yet.
+    this.populateFormControls(fragment, mode);
+
     this.contentElement.textContent = '';
     this.contentElement.append(fragment.element());
 
+    this.refresh();
+  }
+
+  private populateStartButton(mode: string): void {
+    let buttonLabel: Platform.UIString.LocalizedString;
+    let callback: () => void;
+
+    if (mode === 'timespan') {
+      buttonLabel = i18nString(UIStrings.startTimespan);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseTimespanStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else if (mode === 'snapshot') {
+      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else {
+      buttonLabel = i18nString(UIStrings.analyzeNavigation);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    }
+
+    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainer) {
+      startButtonContainer.textContent = '';
+      this.startButton = UI.UIUtils.createTextButton(
+          buttonLabel,
+          callback,
+          /* className */ '',
+          /* primary */ true,
+      );
+      startButtonContainer.append(this.startButton);
+    }
+  }
+
+  refresh(): void {
+    const {mode} = this.controller.getFlags();
+    this.populateStartButton(mode);
+
+    for (const {checkbox, preset} of this.checkboxes) {
+      if (preset.supportedModes.includes(mode)) {
+        checkbox.setEnabled(true);
+        checkbox.setIndeterminate(false);
+      } else {
+        checkbox.setEnabled(false);
+        checkbox.setIndeterminate(true);
+      }
+    }
+
     // Ensure the correct layout is used after refresh.
     this.onResize();
   }