chrome-devtools-frontend 1.0.1001476 → 1.0.1003469

package/front_end/models/timeline_model/TimelineModel.ts

@@ -98,7 +98,6 @@ export class TimelineModelImpl {
   private lastRecalculateStylesEvent!: SDK.TracingModel.Event|null;
   private currentScriptEvent!: SDK.TracingModel.Event|null;
   private eventStack!: SDK.TracingModel.Event[];
-  private knownInputEvents!: Set<string>;
   private browserFrameTracking!: boolean;
   private persistentIds!: boolean;
   private legacyCurrentPage!: any;
@@ -226,7 +225,8 @@ export class TimelineModelImpl {
   }
 
   isMainFrameNavigationStartEvent(event: SDK.TracingModel.Event): boolean {
-    return this.isNavigationStartEvent(event) && event.args['data']['isLoadingMainFrame'] &&
+    return this.isNavigationStartEvent(event) &&
+        (event.args['data']['isOutermostMainFrame'] ?? event.args['data']['isLoadingMainFrame']) &&
         event.args['data']['documentLoaderURL'];
   }
 
@@ -573,7 +573,6 @@ export class TimelineModelImpl {
     this.lastRecalculateStylesEvent = null;
     this.currentScriptEvent = null;
     this.eventStack = [];
-    this.knownInputEvents = new Set();
     this.browserFrameTracking = false;
     this.persistentIds = false;
     this.legacyCurrentPage = null;
@@ -833,44 +832,6 @@ export class TimelineModelImpl {
           group(TrackType.Animation).push(asyncEvent);
           continue;
         }
-
-        if (asyncEvent.hasCategory(TimelineModelImpl.Category.LatencyInfo) ||
-            asyncEvent.name === RecordType.ImplSideFling) {
-          const lastStep = asyncEvent.steps[asyncEvent.steps.length - 1];
-          if (!lastStep) {
-            throw new Error('AsyncEvent.steps access is out of bounds.');
-          }
-          if (lastStep.phase !== SDK.TracingModel.Phase.NestableAsyncEnd) {
-            continue;
-          }
-          const chromeLatencyInfo = asyncEvent.args['chrome_latency_info'];
-
-          const data = chromeLatencyInfo?.['component_info'];
-          asyncEvent.causedFrame =
-              Boolean(data?.some((c: any) => c['component_type'] === 'COMPONENT_INPUT_EVENT_LATENCY_RENDERER_SWAP'));
-          if (asyncEvent.hasCategory(TimelineModelImpl.Category.LatencyInfo)) {
-            if (lastStep.id && !this.knownInputEvents.has(chromeLatencyInfo.trace_id)) {
-              continue;
-            }
-            if (asyncEvent.name === RecordType.InputLatencyMouseMove && !asyncEvent.causedFrame) {
-              continue;
-            }
-            // Coalesced events are not really been processed, no need to track them.
-            if (!data || data['is_coalesced']) {
-              continue;
-            }
-
-            const rendererMain =
-                data?.find((c: any) => c['component_type'] === 'COMPONENT_INPUT_EVENT_LATENCY_RENDERER_MAIN');
-            if (rendererMain) {
-              const time = rendererMain['time_us'] / 1000;
-              TimelineData.forEvent(asyncEvent.steps[0]).timeWaitingForMainThread =
-                  time - asyncEvent.steps[0].startTime;
-            }
-          }
-          group(TrackType.Input).push(asyncEvent);
-          continue;
-        }
       }
     }
 
@@ -1210,13 +1171,6 @@ export class TimelineModelImpl {
   }
 
   private processBrowserEvent(event: SDK.TracingModel.Event): void {
-    if (event.name === RecordType.LatencyInfoFlow) {
-      if (event.args.chrome_latency_info?.trace_id) {
-        this.knownInputEvents.add(event.args.chrome_latency_info.trace_id);
-      }
-      return;
-    }
-
     if (event.name === RecordType.ResourceWillSendRequest) {
       const requestId = event.args?.data?.requestId;
       if (typeof requestId === 'string') {
@@ -1715,7 +1669,6 @@ export class Track {
 export enum TrackType {
   MainThread = 'MainThread',
   Worker = 'Worker',
-  Input = 'Input',
   Animation = 'Animation',
   Timings = 'Timings',
   Console = 'Console',

package/front_end/panels/application/AppManifestView.ts

@@ -433,7 +433,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
         .addChangeListener(this.updateManifest.bind(this, true));
 
     this.emptyView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noManifestDetected));
-    this.emptyView.appendLink('https://web.dev/add-manifest/');
+    this.emptyView.appendLink('https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString);
 
     this.emptyView.show(this.contentElement);
     this.emptyView.hideWidget();
@@ -693,7 +693,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.newNoteUrlField.parentElement?.classList.toggle('hidden', !hasNewNoteUrl);
     this.newNoteUrlField.removeChildren();
     if (hasNewNoteUrl) {
-      const completeURL = (Common.ParsedURL.ParsedURL.completeURL(url, newNoteUrl) as string);
+      const completeURL = (Common.ParsedURL.ParsedURL.completeURL(url, newNoteUrl) as Platform.DevToolsPath.UrlString);
       const link = Components.Linkifier.Linkifier.linkifyURL(
           completeURL, ({text: newNoteUrl} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;
@@ -763,7 +763,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
         shortcutSection.appendFlexedField('Description', shortcut.description);
       }
       const urlField = shortcutSection.appendFlexedField('URL');
-      const shortcutUrl = (Common.ParsedURL.ParsedURL.completeURL(url, shortcut.url) as string);
+      const shortcutUrl = Common.ParsedURL.ParsedURL.completeURL(url, shortcut.url) as Platform.DevToolsPath.UrlString;
       const link = Components.Linkifier.Linkifier.linkifyURL(
           shortcutUrl, ({text: shortcut.url} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;

package/front_end/panels/application/ApplicationPanelCacheSection.ts

@@ -41,7 +41,9 @@ export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTre
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.cacheStorage), 'CacheStorage');
     const icon = UI.Icon.Icon.create('mediumicon-database', 'resource-tree-item');
-    this.setLink('https://developer.chrome.com/docs/devtools/storage/cache/?utm_source=devtools');
+    this.setLink(
+        'https://developer.chrome.com/docs/devtools/storage/cache/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     this.setLeadingIcons([icon]);
     this.swCacheModel = null;
     this.swCacheTreeElements = new Set();

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -243,7 +243,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.localStorageListTreeElement =
         new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.localStorage), 'LocalStorage');
     this.localStorageListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     const localStorageIcon = UI.Icon.Icon.create('mediumicon-table', 'resource-tree-item');
     this.localStorageListTreeElement.setLeadingIcons([localStorageIcon]);
 
@@ -251,19 +252,22 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.sessionStorageListTreeElement =
         new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.sessionStorage), 'SessionStorage');
     this.sessionStorageListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/sessionstorage/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/sessionstorage/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     const sessionStorageIcon = UI.Icon.Icon.create('mediumicon-table', 'resource-tree-item');
     this.sessionStorageListTreeElement.setLeadingIcons([sessionStorageIcon]);
 
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
     this.indexedDBListTreeElement = new IndexedDBTreeElement(panel);
     this.indexedDBListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/indexeddb/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/indexeddb/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     storageTreeElement.appendChild(this.indexedDBListTreeElement);
     this.databasesListTreeElement =
         new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.webSql), 'Databases');
     this.databasesListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/websql/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/websql/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     const databaseIcon = UI.Icon.Icon.create('mediumicon-database', 'resource-tree-item');
     this.databasesListTreeElement.setLeadingIcons([databaseIcon]);
 
@@ -271,7 +275,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.cookieListTreeElement =
         new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.cookies), 'Cookies');
     this.cookieListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/cookies/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/cookies/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     const cookieIcon = UI.Icon.Icon.create('mediumicon-cookie', 'resource-tree-item');
     this.cookieListTreeElement.setLeadingIcons([cookieIcon]);
     storageTreeElement.appendChild(this.cookieListTreeElement);
@@ -1505,7 +1510,7 @@ export class StorageCategoryView extends UI.Widget.VBox {
     this.emptyWidget.text = text;
   }
 
-  setLink(link: string|null): void {
+  setLink(link: Platform.DevToolsPath.UrlString|null): void {
     if (link && !this.linkElement) {
       this.linkElement = this.emptyWidget.appendLink(link);
     }

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -47,7 +47,7 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
 export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeElement {
   protected readonly expandedSetting: Common.Settings.Setting<boolean>;
   protected readonly categoryName: string;
-  protected categoryLink: string|null;
+  protected categoryLink: Platform.DevToolsPath.UrlString|null;
 
   constructor(resourcesPanel: ResourcesPanel, categoryName: string, settingsKey: string, settingsDefault = false) {
     super(resourcesPanel, categoryName, false);
@@ -61,7 +61,7 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
     return 'category://' + this.categoryName as Platform.DevToolsPath.UrlString;
   }
 
-  setLink(link: string): void {
+  setLink(link: Platform.DevToolsPath.UrlString): void {
     this.categoryLink = link;
   }
 

package/front_end/panels/application/BackgroundServiceView.ts

@@ -2,17 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// eslint-disable-next-line rulesdir/es_modules_import
-import emptyWidgetStyles from '../../ui/legacy/emptyWidget.css.js';
-import backgroundServiceViewStyles from './backgroundServiceView.css.js';
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.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 DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
+// eslint-disable-next-line rulesdir/es_modules_import
+import emptyWidgetStyles from '../../ui/legacy/emptyWidget.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Protocol from '../../generated/protocol.js';
+
+import backgroundServiceViewStyles from './backgroundServiceView.css.js';
 
 import type {BackgroundServiceModel} from './BackgroundServiceModel.js';
 import {Events} from './BackgroundServiceModel.js';

package/front_end/panels/application/ResourcesPanel.ts

@@ -140,7 +140,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     return view;
   }
 
-  showCategoryView(categoryName: string, categoryLink: string|null): void {
+  showCategoryView(categoryName: string, categoryLink: Platform.DevToolsPath.UrlString|null): void {
     if (!this.categoryView) {
       this.categoryView = new StorageCategoryView();
     }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1439,7 +1439,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     // SyntaxErrors might not populate the URL field. Try to resolve it via scriptId.
-    const url = exceptionDetails.url || debuggerModel.scriptForId(scriptId)?.sourceURL;
+    const url =
+        exceptionDetails.url as Platform.DevToolsPath.UrlString || debuggerModel.scriptForId(scriptId)?.sourceURL;
     if (!url) {
       return;
     }
@@ -1531,7 +1532,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private linkifyWithCustomLinkifier(
-      string: string, linkifier: (arg0: string, arg1: string, arg2?: number, arg3?: number) => Node): DocumentFragment {
+      string: string,
+      linkifier: (arg0: string, arg1: Platform.DevToolsPath.UrlString, arg2?: number, arg3?: number) => Node):
+      DocumentFragment {
     if (string.length > getMaxTokenizableStringLength()) {
       const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(
           document.createElement('span'), string, getLongStringVisibleLength());
@@ -1563,7 +1566,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           if (splitResult) {
             linkNode = linkifier(token.text, sourceURL, splitResult.lineNumber, splitResult.columnNumber);
           } else {
-            linkNode = linkifier(token.text, '');
+            linkNode = linkifier(token.text, Platform.DevToolsPath.EmptyUrlString);
           }
           container.appendChild(linkNode);
           break;

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
@@ -43,8 +44,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = LitHtml;
 
-const FEEDBACK_LINK = 'https://g.co/devtools/css-overview-feedback';
-const DOC_LINK = 'https://developer.chrome.com/docs/devtools/css-overview';
+const FEEDBACK_LINK = 'https://g.co/devtools/css-overview-feedback' as Platform.DevToolsPath.UrlString;
+const DOC_LINK = 'https://developer.chrome.com/docs/devtools/css-overview' as Platform.DevToolsPath.UrlString;
 export class OverviewStartRequestedEvent extends Event {
   static readonly eventName = 'overviewstartrequested';
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -848,45 +848,46 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
+    const contextMenu = this.createCopyContextMenu(event);
+    void contextMenu.show();
+  }
+
+  createCopyContextMenu(event: Event): UI.ContextMenu.ContextMenu {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyDeclaration), () => {
+    contextMenu.headerSection().appendItem(i18nString(UIStrings.copyDeclaration), () => {
       const propertyText = `${this.property.name}: ${this.property.value};`;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(propertyText);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.DeclarationViaContextMenu);
     });
 
-    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyProperty), () => {
+    contextMenu.headerSection().appendItem(i18nString(UIStrings.copyProperty), () => {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.name);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.PropertyViaContextMenu);
     });
 
-    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyValue), () => {
+    contextMenu.headerSection().appendItem(i18nString(UIStrings.copyValue), () => {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.value);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.ValueViaContextMenu);
     });
 
-    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyRule), () => {
+    contextMenu.headerSection().appendItem(i18nString(UIStrings.copyRule), () => {
       const section = (this.section() as StylePropertiesSection);
       const ruleText = StylesSidebarPane.formatLeadingProperties(section).ruleText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(ruleText);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.RuleViaContextMenu);
     });
 
-    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyAllDeclarations), () => {
+    contextMenu.headerSection().appendItem(
+        i18nString(UIStrings.copyCssDeclarationAsJs), this.copyCssDeclarationAsJs.bind(this));
+
+    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyAllDeclarations), () => {
       const section = (this.section() as StylePropertiesSection);
       const allDeclarationText = StylesSidebarPane.formatLeadingProperties(section).allDeclarationText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allDeclarationText);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllDeclarationsViaContextMenu);
     });
 
-    contextMenu.defaultSection().appendItem(i18nString(UIStrings.viewComputedValue), () => {
-      void this.viewComputedValue();
-    });
-
     contextMenu.clipboardSection().appendItem(
-        i18nString(UIStrings.copyCssDeclarationAsJs), this.copyCssDeclarationAsJs.bind(this));
-
-    contextMenu.defaultSection().appendItem(
         i18nString(UIStrings.copyAllCssDeclarationsAsJs), this.copyAllCssDeclarationAsJs.bind(this));
 
     // TODO(changhaohan): conditionally add this item only when there are changes to copy
@@ -896,7 +897,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllChangesViaStylesPane);
     });
 
-    void contextMenu.show();
+    contextMenu.footerSection().appendItem(i18nString(UIStrings.viewComputedValue), () => {
+      void this.viewComputedValue();
+    });
+
+    return contextMenu;
   }
 
   private async viewComputedValue(): Promise<void> {
@@ -1513,6 +1518,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     if (updatedProperty) {
       this.listItemElement.classList.toggle('changed', this.isPropertyChanged(updatedProperty));
+      this.parentPane().updateChangeStatus();
     }
 
     this.matchedStylesInternal.resetActiveProperties();

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -147,6 +147,14 @@ const UIStrings = {
   */
   automaticDarkMode: 'Automatic dark mode',
   /**
+  *@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',
+  /**
   *@description Text displayed on layer separators in the styles sidebar pane.
   */
   layer: 'Layer',
@@ -207,6 +215,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private readonly imagePreviewPopover: ImagePreviewPopover;
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
   #urlToChangeTracker: Map<Platform.DevToolsPath.UrlString, ChangeTracker> = new Map();
+  #copyChangesButton?: UI.Toolbar.ToolbarButton;
 
   static instance(): StylesSidebarPane {
     if (!stylesSidebarPaneInstance) {
@@ -579,6 +588,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
       this.appendToolbarItem(this.createRenderingShortcuts());
+      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+        this.#copyChangesButton = this.createCopyAllChangesButton();
+        this.appendToolbarItem(this.#copyChangesButton);
+        this.#copyChangesButton.element.classList.add('hidden');
+      }
       this.dispatchEventToListeners(Events.InitialUpdateCompleted);
     }
 
@@ -1109,6 +1123,22 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     return changedLines.has(formattedLineNumber + 1);
   }
 
+  updateChangeStatus(): void {
+    if (!this.#copyChangesButton) {
+      return;
+    }
+
+    let hasChangedStyles = false;
+    for (const changeTracker of this.#urlToChangeTracker.values()) {
+      if (changeTracker.changedLines.size > 0) {
+        hasChangedStyles = true;
+        break;
+      }
+    }
+
+    this.#copyChangesButton.element.classList.toggle('hidden', !hasChangedStyles);
+  }
+
   private async refreshChangedLines(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
     const changeTracker = this.#urlToChangeTracker.get(uiSourceCode.url());
     if (!changeTracker) {
@@ -1290,6 +1320,29 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     return button;
   }
+
+  private createCopyAllChangesButton(): UI.Toolbar.ToolbarButton {
+    const copyAllChangesButton =
+        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.copyAllCSSChanges), 'largeicon-copy');
+    // 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);
+      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllChangesViaStylesPane);
+      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 {
@@ -1301,6 +1354,10 @@ export interface StylesUpdateCompletedEvent {
   hasMatchedStyles: boolean;
 }
 
+interface CompletionResult extends UI.SuggestBox.Suggestion {
+  isCSSVariableColor?: boolean;
+}
+
 export type EventTypes = {
   [Events.InitialUpdateCompleted]: void,
   [Events.StylesUpdateCompleted]: StylesUpdateCompletedEvent,
@@ -1596,8 +1653,8 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       return Promise.resolve([]);
     }
 
-    const prefixResults: UI.SuggestBox.Suggestions = [];
-    const anywhereResults: UI.SuggestBox.Suggestions = [];
+    const prefixResults: Array<CompletionResult> = [];
+    const anywhereResults: Array<CompletionResult> = [];
     if (!editingVariable) {
       this.cssCompletions.forEach(completion => filterCompletions.call(this, completion, false /* variable */));
     }
@@ -1692,10 +1749,10 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
 
     if (this.isColorAware && !this.isEditingName) {
       results.sort((a, b) => {
-        if (Boolean(a.subtitleRenderer) === Boolean(b.subtitleRenderer)) {
+        if (a.isCSSVariableColor && b.isCSSVariableColor) {
           return 0;
         }
-        return a.subtitleRenderer ? -1 : 1;
+        return a.isCSSVariableColor ? -1 : 1;
       });
     }
     return Promise.resolve(results);
@@ -1703,7 +1760,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     function filterCompletions(
         this: CSSPropertyPrompt, completion: string, variable: boolean, nameValue?: boolean): void {
       const index = completion.toLowerCase().indexOf(lowerQuery);
-      const result: UI.SuggestBox.Suggestion = {
+      const result: CompletionResult = {
         text: completion,
         title: undefined,
         subtitle: undefined,
@@ -1714,6 +1771,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         selectionRange: undefined,
         hideGhostText: undefined,
         iconElement: undefined,
+        isCSSVariableColor: false,
       };
       if (variable) {
         const computedValue =
@@ -1722,6 +1780,9 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
           const color = Common.Color.Color.parse(computedValue);
           if (color) {
             result.subtitleRenderer = swatchRenderer.bind(null, color);
+            result.isCSSVariableColor = true;
+          } else {
+            result.subtitleRenderer = computedValueSubtitleRenderer.bind(null, computedValue);
           }
         }
       }
@@ -1742,6 +1803,14 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       swatch.style.pointerEvents = 'none';
       return swatch;
     }
+    function computedValueSubtitleRenderer(computedValue: string): Element {
+      const subtitleElement = document.createElement('span');
+      subtitleElement.className = 'suggestion-subtitle';
+      subtitleElement.textContent = `${computedValue}`;
+      subtitleElement.style.maxWidth = '100px';
+      subtitleElement.title = `${computedValue}`;
+      return subtitleElement;
+    }
   }
 }
 

package/front_end/panels/elements/stylesSidebarPane.css

@@ -232,6 +232,9 @@
 
 .sidebar-pane-section-toolbar.new-rule-toolbar {
   visibility: hidden;
+  margin-bottom: 5px;
+
+  --toolbar-height: 16px;
 }
 
 .styles-pane:not(.is-editing-style) .styles-section.matched-styles:not(.read-only):hover .sidebar-pane-section-toolbar.new-rule-toolbar {

package/front_end/panels/issues/AffectedResourcesView.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 type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
@@ -44,7 +45,7 @@ export const enum AffectedItem {
   Source = 'Source',
 }
 
-export const extractShortPath = (path: string): string => {
+export const extractShortPath = (path: Platform.DevToolsPath.UrlString): string => {
   // 1st regex matches everything after last '/'
   // if path ends with '/', 2nd regex returns everything between the last two '/'
   return (/[^/]+$/.exec(path) || /[^/]+\/$/.exec(path) || [''])[0];
@@ -255,8 +256,8 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
       // TODO(crbug.com/1108503): Add some mechanism to be able to add telemetry to this element.
       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});
+          target || null, sourceLocation.scriptId || null, sourceLocation.url as Platform.DevToolsPath.UrlString,
+          sourceLocation.lineNumber, {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0});
       sourceCodeLocation.appendChild(sourceAnchor);
     }
     element.appendChild(sourceCodeLocation);

package/front_end/panels/issues/AffectedSourcesView.ts

@@ -42,7 +42,8 @@ export class AffectedSourcesView extends AffectedResourcesView {
     // Also, this element has a context menu, so we should be able to
     // track when the user use the context menu too.
     // TODO(crbug.com/1108503): Add some mechanism to be able to add telemetry to this element.
-    const anchorElement = Components.Linkifier.Linkifier.linkifyURL(url, linkifierURLOptions);
+    const anchorElement =
+        Components.Linkifier.Linkifier.linkifyURL(url as Platform.DevToolsPath.UrlString, linkifierURLOptions);
     cellElement.appendChild(anchorElement);
     const rowElement = document.createElement('tr');
     rowElement.classList.add('affected-resource-source');