chrome-devtools-frontend 1.0.969882 → 1.0.971140

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;
@@ -3052,6 +3219,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;

package/front_end/panels/elements/components/adornerSettingsPane.css

@@ -39,7 +39,6 @@
   border: none;
   border-radius: 50%;
   background-color: var(--color-background-elevation-1);
-  cursor: pointer;
 }
 
 .close::before,

package/front_end/panels/elements/components/computedStyleTrace.css

@@ -16,7 +16,7 @@
 
 .computed-style-trace:hover {
   background-color: var(--legacy-focus-bg-color);
-  cursor: pointer;
+  cursor: text;
 }
 
 .goto {

package/front_end/panels/elements/components/elementsBreadcrumbs.css

@@ -73,7 +73,6 @@
 .overflow:not(:disabled):hover {
   background-color: var(--color-background-elevation-2);
   color: var(--color-text-primary);
-  cursor: pointer;
 }
 
 .crumb-link {

package/front_end/panels/elements/computedStyleWidgetTree.css

@@ -15,7 +15,7 @@
 
 .tree-outline li:hover {
   background-color: var(--legacy-focus-bg-color);
-  cursor: pointer;
+  cursor: text;
 }
 
 .tree-outline li::before {
@@ -35,7 +35,7 @@
   margin: 1px 0 0;
   padding: 1em 0;
   width: 100%;
-  cursor: pointer;
+  cursor: text;
   color: var(--color-text-secondary);
   font-size: 11px;
   font-weight: 400;

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;
@@ -203,7 +202,6 @@ select {
   border-radius: 5px;
   border: 1px solid var(--issue-color-yellow);
   background-color: var(--issue-color-yellow);
-  cursor: pointer;
 }
 
 .elements-gutter-decoration.elements-has-decorated-children {
@@ -278,7 +276,6 @@ select {
   position: absolute;
   top: 0;
   left: 0;
-  cursor: pointer;
   width: 15px;
   height: 15px;
 }

package/front_end/panels/emulation/deviceModeView.css

@@ -90,7 +90,6 @@
   pointer-events: auto;
   text-align: center;
   flex: none;
-  cursor: pointer;
   color: var(--color-text-primary);
   display: flex;
   align-items: center;

package/front_end/panels/event_listeners/eventListenersView.css

@@ -56,7 +56,6 @@
   border: 1px solid var(--color-details-hairline);
   margin-left: 5px;
   display: block;
-  cursor: pointer;
   opacity: 80%;
   flex-shrink: 0;
 }

package/front_end/panels/issues/components/hideIssuesMenu.css

@@ -14,7 +14,6 @@
   padding: 1px 4px;
   overflow: hidden;
   border-radius: 0;
-  cursor: pointer;
   border: none;
 
   --icon-color: var(--color-text-primary);

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/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/media/playerListView.css

@@ -61,7 +61,6 @@ li.storage-group-list-item::before {
 }
 
 .player-entry-row:hover {
-  cursor: pointer;
   background: var(--color-background-hover-overlay);
 }
 

package/front_end/panels/network/networkLogView.css

@@ -124,10 +124,6 @@
   color: inherit;
 }
 
-.network-log-grid.data-grid .name-column {
-  cursor: pointer;
-}
-
 .network-log-grid.data-grid .waterfall-column {
   padding: 1px 0;
 }

package/front_end/panels/network/requestPayloadTree.css

@@ -71,7 +71,6 @@
 
 .tree-outline li .header-toggle:hover {
   color: var(--color-text-secondary);
-  cursor: pointer;
 }
 
 .tree-outline .payload-name {
@@ -105,7 +104,6 @@
   display: inline-block;
   font-size: 12px;
   font-family: sans-serif;
-  cursor: pointer;
   margin: 0 4px;
   padding: 2px 4px;
 }

package/front_end/panels/network/signedExchangeInfoTree.css

@@ -69,7 +69,6 @@
   --override-header-hover-color: rgb(20% 20% 45%);
 
   color: var(--override-header-hover-color);
-  cursor: pointer;
 }
 
 .-theme-with-dark-background .tree-outline .header-toggle:hover,

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/settings/emulation/components/userAgentClientHintsForm.css

@@ -75,10 +75,6 @@
   margin-right: 5px;
 }
 
-.delete-icon {
-  cursor: pointer;
-}
-
 .brand-row {
   display: flex;
   align-items: center;

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -34,7 +34,6 @@
   display: flex;
   align-items: center;
   flex: auto 1 1;
-  cursor: pointer;
   overflow: hidden;
   color: var(--color-text-primary);
   user-select: none;

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));
   }

package/front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -77,7 +77,7 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
   }
 
   renderItem(itemIndex: number, query: string, titleElement: Element, _subtitleElement: Element): void {
-    titleElement.textContent = unescape(this.snippets[itemIndex].name());
+    titleElement.textContent = this.snippets[itemIndex].name();
     titleElement.classList.add('monospace');
     QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query, true);
   }