chrome-devtools-frontend 1.0.970302 → 1.0.971727

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -39,9 +39,11 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import * as Formatter from '../../models/formatter/formatter.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
+import type * as Diff from '../../third_party/diff/diff.js';
 import * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
@@ -177,6 +179,14 @@ const UIStrings = {
   *@description Text that is announced by the screen reader when the user focuses on an input field for editing the name of a CSS selector in the Styles panel
   */
   cssSelector: '`CSS` selector',
+  /**
+  *@description Tooltip text that appears when hovering over the css changes button in the Styles Sidebar Pane of the Elements panel
+  */
+  copyAllCSSChanges: 'Copy all the CSS changes',
+  /**
+  *@description Tooltip text that appears after clicking on the copy CSS changes button
+  */
+  copiedToClipboard: 'Copied to clipboard',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylesSidebarPane.ts', UIStrings);
@@ -236,8 +246,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private readonly resizeThrottler: Common.Throttler.Throttler;
   private readonly imagePreviewPopover: ImagePreviewPopover;
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
-  #changedLinesByURLs: Map<string, Set<number>> = new Map();
-  #uiSourceCodeToDiffCallbacks: Map<Workspace.UISourceCode.UISourceCode, () => void> = new Map();
+  #urlToChangeTracker: Map<string, ChangeTracker> = new Map();
 
   static instance(): StylesSidebarPane {
     if (!_stylesSidebarPaneInstance) {
@@ -609,6 +618,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     await this.innerRebuildUpdate(matchedStyles);
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
+      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+        this.appendToolbarItem(this.createCopyAllChangesButton());
+      }
       this.dispatchEventToListeners(Events.InitialUpdateCompleted);
     }
 
@@ -841,12 +853,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const blocks = [new SectionBlock(null)];
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
-      this.resetChangedLinesTracking();
-    }
+    const refreshedURLs = new Set<string>();
     for (const style of matchedStyles.nodeStyles()) {
       if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES) && style.parentRule) {
-        await this.trackChangedLines(style.parentRule.resourceURL());
+        const url = style.parentRule.resourceURL();
+        if (url && !refreshedURLs.has(url)) {
+          await this.trackURLForChanges(url);
+          refreshedURLs.add(url);
+        }
       }
 
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
@@ -1001,25 +1015,27 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     return sections;
   }
 
-  resetChangedLinesTracking(): void {
-    this.#changedLinesByURLs.clear();
-    for (const [uiSourceCode, callback] of this.#uiSourceCodeToDiffCallbacks) {
-      WorkspaceDiff.WorkspaceDiff.workspaceDiff().unsubscribeFromDiffChange(uiSourceCode, callback);
+  async trackURLForChanges(url: string): Promise<void> {
+    const currentTracker = this.#urlToChangeTracker.get(url);
+    if (currentTracker) {
+      WorkspaceDiff.WorkspaceDiff.workspaceDiff().unsubscribeFromDiffChange(
+          currentTracker.uiSourceCode, currentTracker.diffChangeCallback);
     }
-    this.#uiSourceCodeToDiffCallbacks.clear();
-  }
 
-  async trackChangedLines(url: string): Promise<void> {
-    if (!url || this.#changedLinesByURLs.has(url)) {
-      return;
-    }
+    // We get a refreshed uiSourceCode each time because the underlying instance may be recreated.
     const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url);
-    if (uiSourceCode) {
-      await this.refreshChangedLines(uiSourceCode);
-      const callback = this.refreshChangedLines.bind(this, uiSourceCode);
-      WorkspaceDiff.WorkspaceDiff.workspaceDiff().subscribeToDiffChange(uiSourceCode, callback);
-      this.#uiSourceCodeToDiffCallbacks.set(uiSourceCode, callback);
+    if (!uiSourceCode) {
+      return;
     }
+    const diffChangeCallback = this.refreshChangedLines.bind(this, uiSourceCode);
+    WorkspaceDiff.WorkspaceDiff.workspaceDiff().subscribeToDiffChange(uiSourceCode, diffChangeCallback);
+    const newTracker = {
+      uiSourceCode,
+      changedLines: new Set<number>(),
+      diffChangeCallback,
+    };
+    this.#urlToChangeTracker.set(url, newTracker);
+    await this.refreshChangedLines(newTracker.uiSourceCode);
   }
 
   isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
@@ -1027,7 +1043,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!url) {
       return false;
     }
-    const changedLines = this.#changedLinesByURLs.get(url);
+    const changedLines = this.#urlToChangeTracker.get(url)?.changedLines;
     if (!changedLines) {
       return false;
     }
@@ -1040,6 +1056,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   private async refreshChangedLines(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
+    const changeTracker = this.#urlToChangeTracker.get(uiSourceCode.url());
+    if (!changeTracker) {
+      return;
+    }
     const diff = await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
     const changedLines = new Set<number>();
     if (diff && diff.length > 0) {
@@ -1050,7 +1070,24 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         }
       }
     }
-    this.#changedLinesByURLs.set(uiSourceCode.url(), changedLines);
+    changeTracker.changedLines = changedLines;
+  }
+
+  private async getFormattedChanges(): Promise<string> {
+    let allChanges = '';
+    for (const [url, {uiSourceCode}] of this.#urlToChangeTracker) {
+      const diff =
+          await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
+      if (!diff || diff.length < 2) {
+        continue;
+      }
+      const changes = await formatCSSChangesFromDiff(diff);
+      if (changes.length > 0) {
+        allChanges += `/* ${escapeUrlAsCssComment(url)} */\n\n${changes}\n\n`;
+      }
+    }
+
+    return allChanges;
   }
 
   private clipboardCopy(_event: Event): void {
@@ -1146,6 +1183,34 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }
     }
   }
+
+  private createCopyAllChangesButton(): UI.Toolbar.ToolbarButton {
+    const copyAllIcon = new IconButton.Icon.Icon();
+    copyAllIcon.data = {
+      iconName: 'ic_changes',
+      color: 'var(--color-text-secondary)',
+      width: '18px',
+      height: '18px',
+    };
+    const copyAllChangesButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.copyAllCSSChanges), copyAllIcon);
+    // TODO(1296947): implement a dedicated component to share between all copy buttons
+    copyAllChangesButton.element.setAttribute('data-content', i18nString(UIStrings.copiedToClipboard));
+    let timeout: number|undefined;
+    copyAllChangesButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, async () => {
+      const allChanges = await this.getFormattedChanges();
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allChanges);
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = undefined;
+      }
+      copyAllChangesButton.element.classList.add('copied-to-clipboard');
+      timeout = window.setTimeout(() => {
+        copyAllChangesButton.element.classList.remove('copied-to-clipboard');
+        timeout = undefined;
+      }, 2000);
+    });
+    return copyAllChangesButton;
+  }
 }
 
 export const enum Events {
@@ -1162,6 +1227,108 @@ export type EventTypes = {
   [Events.StylesUpdateCompleted]: StylesUpdateCompletedEvent,
 };
 
+type ChangeTracker = {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode,
+  changedLines: Set<number>,
+  diffChangeCallback: () => Promise<void>,
+};
+
+export async function formatCSSChangesFromDiff(diff: Diff.Diff.DiffArray): Promise<string> {
+  const {originalLines, currentLines, rows} = DiffView.DiffView.buildDiffRows(diff);
+
+  const {propertyToSelector: originalPropertyToSelector, ruleToSelector: originalRuleToSelector} =
+      await buildPropertyRuleMaps(originalLines.join('\n'));
+  const {propertyToSelector: currentPropertyToSelector, ruleToSelector: currentRuleToSelector} =
+      await buildPropertyRuleMaps(currentLines.join('\n'));
+  let changes = '';
+  let recordedOriginalSelector, recordedCurrentSelector;
+  for (const {currentLineNumber, originalLineNumber, type} of rows) {
+    // diff line arrays starts at 0, but line numbers start at 1.
+    const currentLineIndex = currentLineNumber - 1;
+    const originalLineIndex = originalLineNumber - 1;
+    switch (type) {
+      case DiffView.DiffView.RowType.Deletion: {
+        const originalLine = originalLines[originalLineIndex].trim();
+        if (originalRuleToSelector.has(originalLineIndex)) {
+          changes += `/* ${originalLine} { */\n`;
+          recordedOriginalSelector = originalLine;
+          continue;
+        }
+
+        const originalSelector = originalPropertyToSelector.get(originalLineIndex);
+        if (!originalSelector) {
+          continue;
+        }
+        if (originalSelector !== recordedOriginalSelector && originalSelector !== recordedCurrentSelector) {
+          if (recordedOriginalSelector || recordedCurrentSelector) {
+            changes += '}\n\n';
+          }
+          changes += `${originalSelector} {\n`;
+        }
+        recordedOriginalSelector = originalSelector;
+        changes += `  /* ${originalLine} */\n`;
+        break;
+      }
+      case DiffView.DiffView.RowType.Addition: {
+        const currentLine = currentLines[currentLineIndex].trim();
+        if (currentRuleToSelector.has(currentLineIndex)) {
+          changes += `${currentLine} {\n`;
+          recordedCurrentSelector = currentLine;
+          continue;
+        }
+
+        const currentSelector = currentPropertyToSelector.get(currentLineIndex);
+        if (!currentSelector) {
+          continue;
+        }
+        if (currentSelector !== recordedOriginalSelector && currentSelector !== recordedCurrentSelector) {
+          if (recordedOriginalSelector || recordedCurrentSelector) {
+            changes += '}\n\n';
+          }
+          changes += `${currentSelector} {\n`;
+        }
+        recordedCurrentSelector = currentSelector;
+        changes += `  ${currentLine}\n`;
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  if (changes.length > 0) {
+    changes += '}';
+  }
+  return changes;
+}
+
+async function buildPropertyRuleMaps(content: string):
+    Promise<{propertyToSelector: Map<number, string>, ruleToSelector: Map<number, string>}> {
+  const rules = await new Promise<Formatter.FormatterWorkerPool.CSSRule[]>(res => {
+    const rules: Formatter.FormatterWorkerPool.CSSRule[] = [];
+    Formatter.FormatterWorkerPool.formatterWorkerPool().parseCSS(content, (isLastChunk, currentRules) => {
+      rules.push(...currentRules);
+      if (isLastChunk) {
+        res(rules);
+      }
+    });
+  });
+  const propertyToSelector = new Map<number, string>();
+  const ruleToSelector = new Map<number, string>();
+  for (const rule of rules) {
+    if ('styleRange' in rule) {
+      const selector = rule.selectorText.split('\n').pop()?.trim();
+      if (!selector) {
+        continue;
+      }
+      ruleToSelector.set(rule.styleRange.startLine, selector);
+      for (const property of rule.properties) {
+        propertyToSelector.set(property.range.startLine, selector);
+      }
+    }
+  }
+  return {propertyToSelector, ruleToSelector};
+}
+
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const _maxLinkLength = 23;
@@ -2298,9 +2465,9 @@ export class StylePropertiesSection {
     return true;
   }
 
-  private editingMediaCommitted(
+  private async editingMediaCommitted(
       query: SDK.CSSQuery.CSSQuery, element: Element, newContent: string, _oldContent: string,
-      _context: Context|undefined, _moveDirection: string): void {
+      _context: Context|undefined, _moveDirection: string): Promise<void> {
     this.parentPane.setEditingStyle(false);
     this.editingMediaFinished(element);
 
@@ -2308,7 +2475,20 @@ export class StylePropertiesSection {
       newContent = newContent.trim();
     }
 
-    function userCallback(this: StylePropertiesSection, success: boolean): void {
+    // This gets deleted in finishOperation(), which is called both on success and failure.
+    this.parentPane.setUserOperation(true);
+    const cssModel = this.parentPane.cssModel();
+    if (cssModel && query.styleSheetId) {
+      const range = query.range as TextUtils.TextRange.TextRange;
+      let success = false;
+      if (query instanceof SDK.CSSContainerQuery.CSSContainerQuery) {
+        success = await cssModel.setContainerQueryText(query.styleSheetId, range, newContent);
+      } else if (query instanceof SDK.CSSSupports.CSSSupports) {
+        success = await cssModel.setSupportsText(query.styleSheetId, range, newContent);
+      } else {
+        success = await cssModel.setMediaText(query.styleSheetId, range, newContent);
+      }
+
       if (success) {
         this.matchedStyles.resetActiveProperties();
         this.parentPane.refreshUpdate(this);
@@ -2316,16 +2496,6 @@ export class StylePropertiesSection {
       this.parentPane.setUserOperation(false);
       this.editingMediaTextCommittedForTest();
     }
-
-    // This gets deleted in finishOperation(), which is called both on success and failure.
-    this.parentPane.setUserOperation(true);
-    const cssModel = this.parentPane.cssModel();
-    if (cssModel && query.styleSheetId) {
-      const setQueryText =
-          query instanceof SDK.CSSMedia.CSSMedia ? cssModel.setMediaText : cssModel.setContainerQueryText;
-      void setQueryText.call(cssModel, query.styleSheetId, (query.range as TextUtils.TextRange.TextRange), newContent)
-          .then(userCallback.bind(this));
-    }
   }
 
   private editingMediaTextCommittedForTest(): void {
@@ -3052,6 +3222,14 @@ export function unescapeCssString(input: string): string {
   });
 }
 
+export function escapeUrlAsCssComment(urlText: string): string {
+  const url = new URL(urlText);
+  if (url.search) {
+    return `${url.origin}${url.pathname}${url.search.replaceAll('*/', '*%2F')}${url.hash}`;
+  }
+  return url.toString();
+}
+
 export class StylesSidebarPropertyRenderer {
   private rule: SDK.CSSRule.CSSRule|null;
   private node: SDK.DOMModel.DOMNode|null;
@@ -3214,13 +3392,8 @@ export class StylesSidebarPropertyRenderer {
           // so that we don't have to keep two versions (original vs. trimmed) of URL
           // at the same time, which complicates both StylesSidebarPane and StylePropertyTreeElement.
           bypassURLTrimming: true,
-          className: undefined,
-          lineNumber: undefined,
-          columnNumber: undefined,
           showColumnNumber: false,
           inlineFrameIndex: 0,
-          maxLength: undefined,
-          tabStop: undefined,
         }),
         hrefUrl || url);
     container.appendChild(link);

package/front_end/panels/elements/elementsTreeOutline.css

@@ -144,7 +144,6 @@
 .elements-disclosure > ol {
   position: relative;
   margin: 0;
-  cursor: default;
   min-width: 100%;
   min-height: 100%;
   padding-left: 2px;

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -256,7 +256,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
       const linkifier = new Components.Linkifier.Linkifier(maxLengthForDisplayedURLs);
       const sourceAnchor = linkifier.linkifyScriptLocation(
           target || null, sourceLocation.scriptId || null, sourceLocation.url, sourceLocation.lineNumber,
-          {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0, className: undefined, tabStop: undefined});
+          {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0});
       sourceCodeLocation.appendChild(sourceAnchor);
     }
     element.appendChild(sourceCodeLocation);

package/front_end/panels/issues/AffectedSourcesView.ts

@@ -36,7 +36,7 @@ export class AffectedSourcesView extends AffectedResourcesView {
     const cellElement = document.createElement('td');
     // TODO(chromium:1072331): Check feasibility of plumping through scriptId for `linkifyScriptLocation`
     //                         to support source maps and formatted scripts.
-    const linkifierURLOptions = ({columnNumber, lineNumber, tabStop: true} as Components.Linkifier.LinkifyURLOptions);
+    const linkifierURLOptions = {columnNumber, lineNumber, tabStop: true, showColumnNumber: false, inlineFrameIndex: 0};
     // An element created with linkifyURL can subscribe to the events
     // 'click' neither 'keydown' if that key is the 'Enter' key.
     // Also, this element has a context menu, so we should be able to

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -104,6 +104,22 @@ const UIStrings = {
   *@description Tooltip text of checkbox to emulate mobile device behavior when running audits in Lighthouse
   */
   applyMobileEmulationDuring: 'Apply mobile emulation during auditing',
+  /**
+   * @description ARIA label for a radio button input to select the Lighthouse mode.
+   */
+  lighthouseMode: 'Lighthouse mode',
+  /**
+   * @description Tooltip text of a radio button to select the Lighthouse mode.
+   */
+  runLighthouseInMode: 'Run Lighthouse in navigation, timespan, or snapshot mode',
+  /**
+   * @description Text for Lighthouse navigation mode.
+   */
+  navigation: 'Navigation',
+  /**
+   * @description Text for Lighthouse snapshot mode.
+   */
+  snapshot: 'Snapshot',
   /**
   *@description Text for the mobile platform, as opposed to desktop
   */
@@ -421,6 +437,20 @@ export const RuntimeSettings: RuntimeSetting[] = [
     ],
     learnMore: undefined,
   },
+  {
+    setting: Common.Settings.Settings.instance().createSetting(
+        'lighthouse.mode', 'navigation', Common.Settings.SettingStorageType.Synced),
+    title: i18nLazyString(UIStrings.lighthouseMode),
+    description: i18nLazyString(UIStrings.runLighthouseInMode),
+    setFlags: (flags: Flags, value: string|boolean): void => {
+      flags.mode = value;
+    },
+    options: [
+      {label: i18nLazyString(UIStrings.navigation), value: 'navigation'},
+      {label: i18nLazyString(UIStrings.snapshot), value: 'snapshot'},
+    ],
+    learnMore: undefined,
+  },
   {
     // This setting is disabled, but we keep it around to show in the UI.
     setting: Common.Settings.Settings.instance().createSetting(

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -20,6 +21,7 @@ import * as LighthouseReport from '../../third_party/lighthouse/report/report.js
 import {LighthouseReportRenderer, LighthouseReportUIFeatures} from './LighthouseReportRenderer.js';
 import {Item, ReportSelector} from './LighthouseReportSelector.js';
 import {StartView} from './LighthouseStartView.js';
+import {StartViewFR} from './LighthouseStartViewFR.js';
 import {StatusView} from './LighthouseStatusView.js';
 
 const UIStrings = {
@@ -85,7 +87,11 @@ export class LighthousePanel extends UI.Panel.Panel {
 
     this.protocolService = new ProtocolService();
     this.controller = new LighthouseController(this.protocolService);
-    this.startView = new StartView(this.controller);
+    if (Root.Runtime.experiments.isEnabled('lighthousePanelFR')) {
+      this.startView = new StartViewFR(this.controller);
+    } else {
+      this.startView = new StartView(this.controller);
+    }
     this.statusView = new StatusView(this.controller);
 
     this.warningText = null;

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -63,7 +63,12 @@ export class ProtocolService {
     if (!this.targetInfo) {
       throw new Error('Unable to get target info required for Lighthouse');
     }
-    const mode = flags.legacyNavigation ? 'start' : 'navigate';
+
+    let mode = flags.mode as string;
+    if (mode === 'navigation' && flags.legacyNavigation) {
+      mode = 'legacyNavigation';
+    }
+
     return this.sendWithResponse(mode, {
       url: auditURL,
       categoryIDs,

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -127,11 +127,6 @@ export class LighthouseReportRenderer extends LighthouseReport.ReportRenderer {
         showColumnNumber: false,
         inlineFrameIndex: 0,
         maxLength: MaxLengthForLinks,
-        bypassURLTrimming: undefined,
-        className: undefined,
-        preventClick: undefined,
-        tabStop: undefined,
-        text: undefined,
       });
       UI.Tooltip.Tooltip.install(origHTMLElement, '');
       origHTMLElement.textContent = '';

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -60,7 +60,7 @@ export class StartView extends UI.Widget.Widget {
     return this.settingsToolbarInternal;
   }
 
-  private populateRuntimeSettingAsRadio(settingName: string, label: string, parentElement: Element): void {
+  protected populateRuntimeSettingAsRadio(settingName: string, label: string, parentElement: Element): void {
     const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
     if (!runtimeSetting || !runtimeSetting.options) {
       throw new Error(`${settingName} is not a setting with options`);
@@ -112,7 +112,7 @@ export class StartView extends UI.Widget.Widget {
     UI.ARIAUtils.setAccessibleName(pluginFormElements, i18nString(UIStrings.communityPluginsBeta));
   }
 
-  private render(): void {
+  protected render(): void {
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -0,0 +1,39 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import {StartView} from './LighthouseStartView.js';
+
+const UIStrings = {
+  /**
+   * @description Text that refers to the Lighthouse mode
+   */
+  mode: 'Mode',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartViewFR.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+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>
+  </div>
+    `;
+
+    // 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());
+  }
+}

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1216,7 +1216,7 @@ export class NetworkRequestNode extends NetworkNode {
         } else {
           this.linkifiedInitiatorAnchor = linkifier.linkifyScriptLocation(
               networkManager.target(), initiator.scriptId, initiator.url, initiator.lineNumber,
-              {columnNumber: initiator.columnNumber, inlineFrameIndex: 0, className: undefined, tabStop: undefined});
+              {columnNumber: initiator.columnNumber, inlineFrameIndex: 0});
         }
         UI.Tooltip.Tooltip.install((this.linkifiedInitiatorAnchor), '');
         cell.appendChild(this.linkifiedInitiatorAnchor);

package/front_end/panels/profiler/CPUProfileView.ts

@@ -310,7 +310,7 @@ export class NodeFormatter implements Formatter {
   linkifyNode(node: ProfileDataGridNode): Element|null {
     const cpuProfilerModel = this.profileView.profileHeader.cpuProfilerModel;
     const target = cpuProfilerModel ? cpuProfilerModel.target() : null;
-    const options = {className: 'profile-node-file', columnNumber: undefined, inlineFrameIndex: 0, tabStop: undefined};
+    const options = {className: 'profile-node-file', inlineFrameIndex: 0};
     return this.profileView.linkifier().maybeLinkifyConsoleCallFrame(target, node.profileNode.callFrame, options);
   }
 }

package/front_end/panels/profiler/HeapProfileView.ts

@@ -620,9 +620,7 @@ export class NodeFormatter implements Formatter {
     const target = heapProfilerModel ? heapProfilerModel.target() : null;
     const options = {
       className: 'profile-node-file',
-      columnNumber: undefined,
       inlineFrameIndex: 0,
-      tabStop: undefined,
     };
     return this.profileView.linkifier().maybeLinkifyConsoleCallFrame(target, node.profileNode.callFrame, options);
   }

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1301,7 +1301,6 @@ export class AllocationGridNode extends HeapSnapshotGridNode {
             columnNumber: allocationNode.column - 1,
             inlineFrameIndex: 0,
             className: 'profile-node-file',
-            tabStop: undefined,
           });
       urlElement.style.maxWidth = '75%';
       cell.insertBefore(urlElement, cell.firstChild);

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1887,10 +1887,9 @@ export class HeapAllocationStackView extends UI.Widget.Widget {
         continue;
       }
       const target = this.heapProfilerModel ? this.heapProfilerModel.target() : null;
-      const options = {columnNumber: frame.column - 1};
+      const options = {columnNumber: frame.column - 1, inlineFrameIndex: 0};
       const urlElement = this.linkifier.linkifyScriptLocation(
-          target, String(frame.scriptId) as Protocol.Runtime.ScriptId, frame.scriptName, frame.line - 1,
-          (options as Components.Linkifier.LinkifyOptions));
+          target, String(frame.scriptId) as Protocol.Runtime.ScriptId, frame.scriptName, frame.line - 1, options);
       frameDiv.appendChild(urlElement);
       stackFrameToURLElement.set(frameDiv, urlElement);
       frameDiv.addEventListener('contextmenu', this.onContextMenu.bind(this, urlElement));

package/front_end/panels/sensors/sensors.css

@@ -107,7 +107,6 @@
 .orientation-stage.disabled {
   filter: grayscale();
   opacity: 50%;
-  cursor: default !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .orientation-element,

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -28,12 +28,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/snippets/ScriptSnippetFileSystem.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-function escapeSnippetName(name: string): string {
-  return escape(name);
+function escapeSnippetName(name: string): Platform.DevToolsPath.EncodedPathString {
+  return Common.ParsedURL.ParsedURL.rawPathToEncodedPathString(name as Platform.DevToolsPath.RawPathString);
 }
 
 function unescapeSnippetName(name: string): string {
-  return unescape(name);
+  return Common.ParsedURL.ParsedURL.encodedPathToRawPathString(name as Platform.DevToolsPath.EncodedPathString);
 }
 
 export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFileSystem {
@@ -47,7 +47,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     this.snippetsSetting = Common.Settings.Settings.instance().createSetting('scriptSnippets', []);
   }
 
-  initialFilePaths(): string[] {
+  initialFilePaths(): Platform.DevToolsPath.EncodedPathString[] {
     const savedSnippets: Snippet[] = this.snippetsSetting.get();
     return savedSnippets.map(snippet => escapeSnippetName(snippet.name));
   }
@@ -126,7 +126,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     return Common.ResourceType.resourceTypes.Script;
   }
 
-  tooltipForURL(url: string): string {
+  tooltipForURL(url: Platform.DevToolsPath.UrlString): string {
     return i18nString(UIStrings.linkedTo, {PH1: unescapeSnippetName(url.substring(this.path().length))});
   }