chrome-devtools-frontend 1.0.981004 → 1.0.995227

package/front_end/panels/application/components/backForwardCacheView.css

@@ -10,7 +10,7 @@
 
 .gray-text {
   color: var(--color-text-secondary);
-  margin: 0 0 15px 56px;
+  margin: 0 0 5px 56px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -19,6 +19,11 @@
   overflow: hidden;
 }
 
+.explanation-frames {
+  margin-left: 56px;
+  grid-column-start: span 2;
+}
+
 .help-outline-icon {
   margin: 0 2px;
 }
@@ -33,7 +38,7 @@
   flex-shrink: 0;
 }
 
-.url {
+.report-line {
   grid-column-start: span 2;
   display: flex;
   align-items: center;
@@ -41,15 +46,17 @@
   line-height: 28px;
 }
 
-.url-key {
+.report-key {
   color: var(--color-text-secondary);
   min-width: auto;
   overflow-wrap: break-word;
+  align-self: start;
 }
 
-.url-value {
+.report-value {
   padding: 0 6px;
   overflow-wrap: break-word;
+  line-height: 24px;
 }
 
 .link,
@@ -59,3 +66,7 @@
   cursor: pointer;
   padding: 2px 0; /* adjust focus ring size */
 }
+
+.tree-outline li .selection {
+  margin-left: -5px;
+}

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -152,11 +152,11 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     return true;
   }
 
-  private setBreakpoint(url: string): void {
-    if (this.#breakpoints.indexOf(url) !== -1) {
-      this.#list.refreshItem(url);
+  private setBreakpoint(breakKeyword: string): void {
+    if (this.#breakpoints.indexOf(breakKeyword) !== -1) {
+      this.#list.refreshItem(breakKeyword);
     } else {
-      this.#breakpoints.insertWithComparator(url, (a, b) => {
+      this.#breakpoints.insertWithComparator(breakKeyword, (a, b) => {
         if (a > b) {
           return 1;
         }
@@ -251,12 +251,12 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     return true;
   }
 
-  private removeBreakpoint(url: string): void {
-    const index = this.#breakpoints.indexOf(url);
+  private removeBreakpoint(breakKeyword: string): void {
+    const index = this.#breakpoints.indexOf(breakKeyword);
     if (index >= 0) {
       this.#breakpoints.remove(index);
     }
-    this.#breakpointElements.delete(url);
+    this.#breakpointElements.delete(breakKeyword);
     this.update();
   }
 
@@ -274,12 +274,12 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     }
   }
 
-  private contextMenu(url: string, event: Event): void {
+  private contextMenu(breakKeyword: string, event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
 
     function removeBreakpoint(this: XHRBreakpointsSidebarPane): void {
-      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(url);
-      this.removeBreakpoint(url);
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
+      this.removeBreakpoint(breakKeyword);
     }
 
     function removeAllBreakpoints(this: XHRBreakpointsSidebarPane): void {
@@ -297,21 +297,21 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     void contextMenu.show();
   }
 
-  private checkboxClicked(url: string, checked: boolean): void {
+  private checkboxClicked(breakKeyword: string, checked: boolean): void {
     const hadFocus = this.hasFocus();
-    SDK.DOMDebuggerModel.DOMDebuggerManager.instance().toggleXHRBreakpoint(url, !checked);
-    this.#list.refreshItem(url);
-    this.#list.selectItem(url);
+    SDK.DOMDebuggerModel.DOMDebuggerManager.instance().toggleXHRBreakpoint(breakKeyword, !checked);
+    this.#list.refreshItem(breakKeyword);
+    this.#list.selectItem(breakKeyword);
     if (hadFocus) {
       this.focus();
     }
   }
 
-  private labelClicked(url: string): void {
-    const element = this.#breakpointElements.get(url);
+  private labelClicked(breakKeyword: string): void {
+    const element = this.#breakpointElements.get(breakKeyword);
     const inputElement = document.createElement('span');
     inputElement.classList.add('breakpoint-condition');
-    inputElement.textContent = url;
+    inputElement.textContent = breakKeyword;
     if (element) {
       this.#list.element.insertBefore(inputElement, element);
       element.classList.add('hidden');
@@ -320,8 +320,8 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     function finishEditing(this: XHRBreakpointsSidebarPane, accept: boolean, e: Element, text: string): void {
       this.removeListElement(inputElement);
       if (accept) {
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(url);
-        this.removeBreakpoint(url);
+        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
+        this.removeBreakpoint(breakKeyword);
         let enabled = true;
         if (element) {
           const breakpointEntryElement = containerToBreakpointEntry.get(element);

package/front_end/panels/changes/ChangesView.ts

@@ -3,8 +3,10 @@
 // found in the LICENSE file.
 
 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 {formatCSSChangesFromDiff} from '../../panels/utils/utils.js';
 import * as Diff from '../../third_party/diff/diff.js';
 import * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -22,6 +24,10 @@ const UIStrings = {
   */
   revertAllChangesToCurrentFile: 'Revert all changes to current file',
   /**
+  *@description Screen reader/tooltip label for a button in the Changes tool that copies all changes from the currently open file.
+  */
+  copyAllChangesFromCurrentFile: 'Copy all changes from current file',
+  /**
   *@description Text in Changes View of the Changes tab
   */
   noChanges: 'No changes',
@@ -41,6 +47,10 @@ const UIStrings = {
   * lines were removed (not translatable).
   */
   sDeletions: '{n, plural, =1 {# deletion (-)} other {# deletions (-)}}',
+  /**
+  *@description Text for a button in the Changes tool that copies all the changes from the currently open file.
+  */
+  copy: 'Copy',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -66,6 +76,8 @@ export class ChangesView extends UI.Widget.VBox {
   private readonly toolbar: UI.Toolbar.Toolbar;
   private readonly diffStats: UI.Toolbar.ToolbarText;
   private readonly diffView: DiffView.DiffView.DiffView;
+  private readonly copyButton: UI.Toolbar.ToolbarButton;
+  private readonly copyButtonSeparator: UI.Toolbar.ToolbarSeparator;
 
   private constructor() {
     super(true);
@@ -98,6 +110,11 @@ export class ChangesView extends UI.Widget.VBox {
     this.toolbar.appendToolbarItem(revertButton);
     this.diffStats = new UI.Toolbar.ToolbarText('');
     this.toolbar.appendToolbarItem(this.diffStats);
+
+    this.copyButton = new UI.Toolbar.ToolbarButton(
+        i18nString(UIStrings.copyAllChangesFromCurrentFile), 'largeicon-copy', UIStrings.copy);
+    this.copyButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.copyChanges.bind(this));
+    this.copyButtonSeparator = new UI.Toolbar.ToolbarSeparator();
     this.toolbar.setEnabled(false);
 
     this.hideDiff(i18nString(UIStrings.noChanges));
@@ -115,6 +132,13 @@ export class ChangesView extends UI.Widget.VBox {
 
   private selectedUISourceCodeChanged(): void {
     this.revealUISourceCode(this.changesSidebar.selectedUISourceCode());
+    if (this.selectedUISourceCode?.contentType() === Common.ResourceType.resourceTypes.Stylesheet) {
+      this.toolbar.appendToolbarItem(this.copyButtonSeparator);
+      this.toolbar.appendToolbarItem(this.copyButton);
+    } else {
+      this.toolbar.removeToolbarItem(this.copyButtonSeparator);
+      this.toolbar.removeToolbarItem(this.copyButton);
+    }
   }
 
   private revert(): void {
@@ -125,6 +149,20 @@ export class ChangesView extends UI.Widget.VBox {
     void this.workspaceDiff.revertToOriginal(uiSourceCode);
   }
 
+  private async copyChanges(): Promise<void> {
+    const uiSourceCode = this.selectedUISourceCode;
+    if (!uiSourceCode) {
+      return;
+    }
+    const diffResponse = await this.workspaceDiff.requestDiff(uiSourceCode, {shouldFormatDiff: true});
+    // Diff array with real diff will contain at least 2 lines.
+    if (!diffResponse || diffResponse?.diff.length < 2) {
+      return;
+    }
+    const changes = await formatCSSChangesFromDiff(diffResponse.diff);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(changes);
+  }
+
   private click(event: MouseEvent): void {
     if (!this.selectedUISourceCode) {
       return;

package/front_end/panels/console/ConsoleFormat.ts

@@ -196,3 +196,26 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
   addStringToken(fmt);
   return {tokens, args: args.slice(argIndex)};
 };
+
+export const updateStyle = (currentStyle: Map<string, {value: string, priority: string}>, styleToAdd: string): void => {
+  const ALLOWED_PROPERTY_PREFIXES = ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
+  const BLOCKED_URL_SCHEMES = ['chrome', 'resource', 'about', 'app', 'http', 'https', 'ftp', 'file'];
+
+  currentStyle.clear();
+  const buffer = document.createElement('span');
+  buffer.setAttribute('style', styleToAdd);
+  for (const property of buffer.style) {
+    if (!ALLOWED_PROPERTY_PREFIXES.some(
+            prefix => property.startsWith(prefix) || property.startsWith(`-webkit-${prefix}`))) {
+      continue;
+    }
+    const value = buffer.style.getPropertyValue(property);
+    if (BLOCKED_URL_SCHEMES.some(scheme => value.includes(scheme + ':'))) {
+      continue;
+    }
+    currentStyle.set(property, {
+      value,
+      priority: buffer.style.getPropertyPriority(property),
+    });
+  }
+};

package/front_end/panels/console/ConsolePinPane.ts

@@ -245,6 +245,13 @@ export class ConsolePin {
               return true;
             },
           },
+          {
+            key: 'Enter',
+            run: (): boolean => {
+              this.focusOut();
+              return true;
+            },
+          },
           {
             key: 'Mod-Enter',
             run: (): boolean => {

package/front_end/panels/console/ConsolePrompt.ts

@@ -255,12 +255,22 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       return false;
     }
 
-    const cursorPos = dir < 0 ? newText.search(/\n|$/) : newText.length;
+    // Change the prompt input to the history content, and scroll to the end to
+    // bring the full content (potentially multiple lines) into view.
+    const cursorPos = newText.length;
     this.editor.dispatch({
       changes: {from: 0, to: this.editor.state.doc.length, insert: newText},
       selection: CodeMirror.EditorSelection.cursor(cursorPos),
       scrollIntoView: true,
     });
+    if (dir < 0) {
+      // If we are going back in history, put the cursor to the end of the first line
+      // so that the user can quickly go further back in history.
+      const firstLineBreak = newText.search(/\n|$/);
+      this.editor.dispatch({
+        selection: CodeMirror.EditorSelection.cursor(firstLineBreak),
+      });
+    }
     return true;
   }
 

package/front_end/panels/console/ConsoleSidebar.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.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 * as Protocol from '../../generated/protocol.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -259,7 +260,7 @@ export class FilterTreeElement extends ConsoleSidebarTreeElement {
     this.updateCounter();
   }
 
-  private childElement(url?: string): URLGroupTreeElement {
+  private childElement(url?: Platform.DevToolsPath.UrlString): URLGroupTreeElement {
     const urlValue = url || null;
     let child = this.urlTreeElements.get(urlValue);
     if (child) {

package/front_end/panels/console/ConsoleView.ts

@@ -136,10 +136,22 @@ const UIStrings = {
   *@description Alternative title text of a setting in Console View of the Console panel
   */
   selectedContextOnly: 'Selected context only',
+  /**
+   *@description Description of a setting that controls whether XMLHttpRequests are logged in the console.
+   */
+  logXMLHttpRequests: 'Log XMLHttpRequests',
   /**
   *@description Tooltip text that appears on the setting when hovering over it in Console View of the Console panel
   */
   eagerlyEvaluateTextInThePrompt: 'Eagerly evaluate text in the prompt',
+  /**
+   *@description Description of a setting that controls whether text typed in the console should be autocompleted from commands executed in the local console history.
+   */
+  autocompleteFromHistory: 'Autocomplete from history',
+  /**
+   *@description Description of a setting that controls whether user activation is triggered by evaluation'.
+  */
+  treatEvaluationAsUserActivation: 'Treat evaluation as user activation',
   /**
   * @description Text in Console View of the Console panel, indicating that a number of console
   * messages have been hidden.
@@ -271,8 +283,6 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   private readonly progressToolbarItem: UI.Toolbar.ToolbarItem;
   private readonly groupSimilarSetting: Common.Settings.Setting<boolean>;
   private readonly showCorsErrorsSetting: Common.Settings.Setting<boolean>;
-  private readonly preserveLogCheckbox: UI.Toolbar.ToolbarSettingCheckbox;
-  private readonly hideNetworkMessagesCheckbox: UI.Toolbar.ToolbarSettingCheckbox;
   private readonly timestampsSetting: Common.Settings.Setting<unknown>;
   private readonly consoleHistoryAutocompleteSetting: Common.Settings.Setting<boolean>;
   readonly pinPane: ConsolePinPane;
@@ -376,15 +386,12 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.progressToolbarItem = new UI.Toolbar.ToolbarItem(document.createElement('div'));
     this.groupSimilarSetting = Common.Settings.Settings.instance().moduleSetting('consoleGroupSimilar');
     this.groupSimilarSetting.addChangeListener(() => this.updateMessageList());
-    const groupSimilarToggle = new UI.Toolbar.ToolbarSettingCheckbox(
-        this.groupSimilarSetting, i18nString(UIStrings.groupSimilarMessagesInConsole));
+
     this.showCorsErrorsSetting = Common.Settings.Settings.instance().moduleSetting('consoleShowsCorsErrors');
     this.showCorsErrorsSetting.addChangeListener(() => {
       Host.userMetrics.showCorsErrorsSettingChanged(this.showCorsErrorsSetting.get());
       this.updateMessageList();
     });
-    const showCorsErrorsToggle = new UI.Toolbar.ToolbarSettingCheckbox(
-        this.showCorsErrorsSetting, i18nString(UIStrings.showCorsErrorsInConsole));
 
     const toolbar = new UI.Toolbar.Toolbar('console-main-toolbar', this.consoleToolbarContainer);
     toolbar.makeWrappable(true);
@@ -422,15 +429,6 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     rightToolbar.appendToolbarItem(this.filterStatusText);
     rightToolbar.appendToolbarItem(this.showSettingsPaneButton);
 
-    this.preserveLogCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
-        Common.Settings.Settings.instance().moduleSetting('preserveConsoleLog'),
-        i18nString(UIStrings.doNotClearLogOnPageReload), i18nString(UIStrings.preserveLog));
-    this.hideNetworkMessagesCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
-        this.filter.hideNetworkMessagesSetting, this.filter.hideNetworkMessagesSetting.title(),
-        i18nString(UIStrings.hideNetwork));
-    const filterByExecutionContextCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
-        this.filter.filterByExecutionContextSetting, i18nString(UIStrings.onlyShowMessagesFromTheCurrentContext),
-        i18nString(UIStrings.selectedContextOnly));
     const monitoringXHREnabledSetting = Common.Settings.Settings.instance().moduleSetting('monitoringXHREnabled');
     this.timestampsSetting = Common.Settings.Settings.instance().moduleSetting('consoleTimestampsEnabled');
     this.consoleHistoryAutocompleteSetting =
@@ -442,26 +440,36 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
 
     UI.ARIAUtils.setAccessibleName(settingsPane.element, i18nString(UIStrings.consoleSettings));
     UI.ARIAUtils.markAsGroup(settingsPane.element);
+
     const settingsToolbarLeft = new UI.Toolbar.Toolbar('', settingsPane.element);
     settingsToolbarLeft.makeVertical();
-    settingsToolbarLeft.appendToolbarItem(this.hideNetworkMessagesCheckbox);
-    settingsToolbarLeft.appendToolbarItem(this.preserveLogCheckbox);
-    settingsToolbarLeft.appendToolbarItem(filterByExecutionContextCheckbox);
-    settingsToolbarLeft.appendToolbarItem(groupSimilarToggle);
-    settingsToolbarLeft.appendToolbarItem(showCorsErrorsToggle);
+
+    ConsoleView.appendSettingsCheckboxToToolbar(
+        settingsToolbarLeft, this.filter.hideNetworkMessagesSetting, this.filter.hideNetworkMessagesSetting.title(),
+        i18nString(UIStrings.hideNetwork));
+    ConsoleView.appendSettingsCheckboxToToolbar(
+        settingsToolbarLeft, 'preserveConsoleLog', i18nString(UIStrings.doNotClearLogOnPageReload),
+        i18nString(UIStrings.preserveLog));
+    ConsoleView.appendSettingsCheckboxToToolbar(
+        settingsToolbarLeft, this.filter.filterByExecutionContextSetting,
+        i18nString(UIStrings.onlyShowMessagesFromTheCurrentContext), i18nString(UIStrings.selectedContextOnly));
+    ConsoleView.appendSettingsCheckboxToToolbar(
+        settingsToolbarLeft, this.groupSimilarSetting, i18nString(UIStrings.groupSimilarMessagesInConsole));
+    ConsoleView.appendSettingsCheckboxToToolbar(
+        settingsToolbarLeft, this.showCorsErrorsSetting, i18nString(UIStrings.showCorsErrorsInConsole));
 
     const settingsToolbarRight = new UI.Toolbar.Toolbar('', settingsPane.element);
     settingsToolbarRight.makeVertical();
-    settingsToolbarRight.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(monitoringXHREnabledSetting));
-    const eagerEvalCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
-        Common.Settings.Settings.instance().moduleSetting('consoleEagerEval'),
-        i18nString(UIStrings.eagerlyEvaluateTextInThePrompt));
-    settingsToolbarRight.appendToolbarItem(eagerEvalCheckbox);
-    settingsToolbarRight.appendToolbarItem(
-        new UI.Toolbar.ToolbarSettingCheckbox(this.consoleHistoryAutocompleteSetting));
-    const userGestureCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
-        Common.Settings.Settings.instance().moduleSetting('consoleUserActivationEval'));
-    settingsToolbarRight.appendToolbarItem(userGestureCheckbox);
+
+    ConsoleView.appendSettingsCheckboxToToolbar(
+        settingsToolbarRight, monitoringXHREnabledSetting, i18nString(UIStrings.logXMLHttpRequests));
+    ConsoleView.appendSettingsCheckboxToToolbar(
+        settingsToolbarRight, 'consoleEagerEval', i18nString(UIStrings.eagerlyEvaluateTextInThePrompt));
+    ConsoleView.appendSettingsCheckboxToToolbar(
+        settingsToolbarRight, this.consoleHistoryAutocompleteSetting, i18nString(UIStrings.autocompleteFromHistory));
+    ConsoleView.appendSettingsCheckboxToToolbar(
+        settingsToolbarRight, 'consoleUserActivationEval', i18nString(UIStrings.treatEvaluationAsUserActivation));
+
     if (!this.showSettingsPaneSetting.get()) {
       settingsPane.element.classList.add('hidden');
     }
@@ -569,6 +577,20 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
         IssuesManager.IssuesManager.Events.IssuesCountUpdated,
         () => this.issueToolbarThrottle.schedule(async () => this.updateIssuesToolbarItem()), this);
   }
+  static appendSettingsCheckboxToToolbar(
+      toolbar: UI.Toolbar.Toolbar, settingOrSetingName: Common.Settings.Setting<boolean>|string, title: string,
+      alternateTitle?: string): UI.Toolbar.ToolbarSettingCheckbox {
+    let setting: Common.Settings.Setting<boolean>;
+    if (typeof settingOrSetingName === 'string') {
+      setting = Common.Settings.Settings.instance().moduleSetting(settingOrSetingName);
+    } else {
+      setting = settingOrSetingName;
+    }
+
+    const checkbox = new UI.Toolbar.ToolbarSettingCheckbox(setting, title, alternateTitle);
+    toolbar.appendToolbarItem(checkbox);
+    return checkbox;
+  }
 
   static instance(): ConsoleView {
     if (!consoleViewInstance) {
@@ -759,6 +781,10 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.scheduledRefreshPromiseForTest = this.viewportThrottler.schedule(this.invalidateViewport.bind(this));
   }
 
+  getScheduledRefreshPromiseForTest(): Promise<void>|undefined {
+    return this.scheduledRefreshPromiseForTest;
+  }
+
   private scheduleViewportRefreshForTest(_muted: boolean): void {
     // This functions is sniffed in tests.
   }
@@ -1076,7 +1102,9 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   private async saveConsole(): Promise<void> {
     const url = (SDK.TargetManager.TargetManager.instance().mainTarget() as SDK.Target.Target).inspectedURL();
     const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
-    const filename = Platform.StringUtilities.sprintf('%s-%d.log', parsedURL ? parsedURL.host : 'console', Date.now());
+    const filename =
+        Platform.StringUtilities.sprintf('%s-%d.log', parsedURL ? parsedURL.host : 'console', Date.now()) as
+        Platform.DevToolsPath.RawPathString;
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
@@ -1692,7 +1720,7 @@ export class ConsoleViewFilter {
     }
   }
 
-  addMessageURLFilter(url: string): void {
+  addMessageURLFilter(url: Platform.DevToolsPath.UrlString): void {
     if (!url) {
       return;
     }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -53,7 +53,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
 
-import {format} from './ConsoleFormat.js';
+import {format, updateStyle} from './ConsoleFormat.js';
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
 import consoleViewStyles from './consoleView.css.js';
 import {augmentErrorStackWithScriptIds, parseSourcePositionsFromErrorStack} from './ErrorStackParser.js';
@@ -456,7 +456,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   protected buildMessageAnchor(): HTMLElement|null {
     const linkify = (message: SDK.ConsoleModel.ConsoleMessage): HTMLElement|null => {
       if (message.scriptId) {
-        return this.linkifyScriptId(message.scriptId, message.url || '', message.line, message.column);
+        return this.linkifyScriptId(
+            message.scriptId, message.url || Platform.DevToolsPath.EmptyUrlString, message.line, message.column);
       }
       if (message.stackTrace && message.stackTrace.callFrames.length) {
         return this.linkifyStackTraceTopFrame(message.stackTrace);
@@ -542,7 +543,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return toggleElement;
   }
 
-  private linkifyLocation(url: string, lineNumber: number, columnNumber: number): HTMLElement|null {
+  private linkifyLocation(url: Platform.DevToolsPath.UrlString, lineNumber: number, columnNumber: number): HTMLElement
+      |null {
     const runtimeModel = this.message.runtimeModel();
     if (!runtimeModel) {
       return null;
@@ -559,8 +561,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.linkifier.linkifyStackTraceTopFrame(runtimeModel.target(), stackTrace);
   }
 
-  private linkifyScriptId(scriptId: Protocol.Runtime.ScriptId, url: string, lineNumber: number, columnNumber: number):
-      HTMLElement|null {
+  private linkifyScriptId(
+      scriptId: Protocol.Runtime.ScriptId, url: Platform.DevToolsPath.UrlString, lineNumber: number,
+      columnNumber: number): HTMLElement|null {
     const runtimeModel = this.message.runtimeModel();
     if (!runtimeModel) {
       return null;
@@ -925,26 +928,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           }
           break;
         }
-        case 'style': {
+        case 'style':
           // Make sure that allowed properties do not interfere with link visibility.
-          const ALLOWED_PROPERTY_PREFIXES =
-              ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
-
-          currentStyle.clear();
-          const buffer = document.createElement('span');
-          buffer.setAttribute('style', token.value);
-          for (const property of buffer.style) {
-            if (!ALLOWED_PROPERTY_PREFIXES.some(
-                    prefix => property.startsWith(prefix) || property.startsWith(`-webkit-${prefix}`))) {
-              continue;
-            }
-            currentStyle.set(property, {
-              value: buffer.style.getPropertyValue(property),
-              priority: buffer.style.getPropertyPriority(property),
-            });
-          }
+          updateStyle(currentStyle, token.value);
           break;
-        }
       }
     }
     return args;
@@ -1398,8 +1385,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private async getInlineFrames(
-      debuggerModel: SDK.DebuggerModel.DebuggerModel, url: string, lineNumber: number|undefined,
-      columnNumber: number|undefined): Promise<{frames: Chrome.DevTools.FunctionInfo[]}> {
+      debuggerModel: SDK.DebuggerModel.DebuggerModel, url: Platform.DevToolsPath.UrlString,
+      lineNumber: number|undefined, columnNumber: number|undefined): Promise<{frames: Chrome.DevTools.FunctionInfo[]}> {
     const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
     if (debuggerWorkspaceBinding.pluginManager) {
       const projects = Workspace.Workspace.WorkspaceImpl.instance().projects();
@@ -1420,9 +1407,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   // Expand inline stack frames in the formatted error in the stackTrace element, inserting new elements before the
   // insertBefore anchor.
   private async expandInlineStackFrames(
-      debuggerModel: SDK.DebuggerModel.DebuggerModel, prefix: string, suffix: string, url: string,
-      lineNumber: number|undefined, columnNumber: number|undefined, stackTrace: HTMLElement,
-      insertBefore: HTMLElement): Promise<boolean> {
+      debuggerModel: SDK.DebuggerModel.DebuggerModel, prefix: string, suffix: string,
+      url: Platform.DevToolsPath.UrlString, lineNumber: number|undefined, columnNumber: number|undefined,
+      stackTrace: HTMLElement, insertBefore: HTMLElement): Promise<boolean> {
     const {frames} = await this.getInlineFrames(debuggerModel, url, lineNumber, columnNumber);
     if (!frames.length) {
       return false;

package/front_end/panels/console/ConsoleViewport.ts

@@ -240,7 +240,8 @@ export class ConsoleViewport {
   private updateFocusedItem(focusLastChild?: boolean): void {
     const selectedElement = this.renderedElementAt(this.virtualSelectedIndex);
     const changed = this.lastSelectedElement !== selectedElement;
-    const containerHasFocus = this.contentElementInternal === this.element.ownerDocument.deepActiveElement();
+    const containerHasFocus =
+        this.contentElementInternal === Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);
     if (this.lastSelectedElement && changed) {
       this.lastSelectedElement.classList.remove('console-selected');
     }

package/front_end/panels/console/ErrorStackParser.ts

@@ -3,13 +3,16 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 export interface ParsedErrorFrame {
   line: string;
   link?: {
-    url: string,
+    url: Platform.DevToolsPath.UrlString,
     prefix: string,
     suffix: string,
     lineNumber?: number,
@@ -101,13 +104,14 @@ export function parseSourcePositionsFromErrorStack(
   return linkInfos;
 }
 
-function parseOrScriptMatch(debuggerModel: SDK.DebuggerModel.DebuggerModel, url: string|null): string|null {
+function parseOrScriptMatch(debuggerModel: SDK.DebuggerModel.DebuggerModel, url: Platform.DevToolsPath.UrlString|null):
+    Platform.DevToolsPath.UrlString|null {
   if (!url) {
     return null;
   }
   const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
   if (parsedURL) {
-    return parsedURL.url;
+    return parsedURL.url as Platform.DevToolsPath.UrlString;
   }
   if (debuggerModel.scriptsForSourceURL(url).length) {
     return url;
@@ -115,7 +119,7 @@ function parseOrScriptMatch(debuggerModel: SDK.DebuggerModel.DebuggerModel, url:
   // nodejs stack traces contain (absolute) file paths, but v8 reports them as file: urls.
   const fileUrl = new URL(url, 'file://');
   if (debuggerModel.scriptsForSourceURL(fileUrl.href).length) {
-    return fileUrl.href;
+    return fileUrl.href as Platform.DevToolsPath.UrlString;
   }
   return null;
 }

package/front_end/panels/console/consoleView.css

@@ -86,7 +86,6 @@
   overflow-y: auto;
   word-wrap: break-word;
   user-select: text;
-  transform: translateZ(0);
   overflow-anchor: none;  /* Chrome-specific scroll-anchoring opt-out */
   background-color: var(--color-background);
 }

package/front_end/panels/coverage/CoverageListView.ts

@@ -315,7 +315,7 @@ function getPercentageFormatter(): Intl.NumberFormat {
 export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<GridNode> {
   coverageInfo: URLCoverageInfo;
   private lastUsedSize!: number|undefined;
-  private url: string;
+  private url: Platform.DevToolsPath.UrlString;
   private maxSize: number;
   private highlightRegExp: RegExp|null;