chrome-devtools-frontend 1.0.955630 → 1.0.956881

package/AUTHORS

@@ -13,6 +13,7 @@
 # BEGIN individuals section.
 Ajay Panthagani <ajaypanthagani321@gmail.com>
 Alexander Stammbach <alexander@stammbach.io>
+Alexey Rodionov <fluorescent.hallucinogen@gmail.com>
 Ankit Mishra <ankit.mishra131990@gmail.com>
 Anna Agoha <annaagoha@gmail.com>
 Anthony Xie <anthonyxie64@gmail.com>

package/config/gni/devtools_grd_files.gni

@@ -1553,7 +1553,6 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/inspectorCommon.css.js",
   "front_end/ui/legacy/inspectorCommon.css.legacy.js",
   "front_end/ui/legacy/inspectorSyntaxHighlight.css.legacy.js",
-  "front_end/ui/legacy/inspectorSyntaxHighlightDark.css.legacy.js",
   "front_end/ui/legacy/inspectorViewTabbedPane.css.legacy.js",
   "front_end/ui/legacy/listWidget.css.legacy.js",
   "front_end/ui/legacy/popover.css.legacy.js",
@@ -1578,7 +1577,6 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/theme_support/theme_support_impl.js",
   "front_end/ui/legacy/toolbar.css.legacy.js",
   "front_end/ui/legacy/treeoutline.css.legacy.js",
-  "front_end/ui/legacy/utils/append-style.js",
   "front_end/ui/legacy/utils/create-shadow-root-with-core-styles.js",
   "front_end/ui/legacy/utils/focus-changed.js",
   "front_end/ui/legacy/utils/inject-core-styles.js",

package/front_end/.eslintrc.js

@@ -116,17 +116,7 @@ module.exports = {
             'format': ['camelCase'],
             'leadingUnderscore': 'allow',
           }
-        ],
-        'no-restricted-syntax': [
-          'warn', {
-            // Matches the common pattern of `.registerRequiredCSS('path\to\module-styles.css');`.
-            'selector':
-                'CallExpression[callee.property.name="registerRequiredCSS"][arguments.length=1]:has(Literal[value=/css$/])',
-            'message': 'Styles should be imported using `import styles from \'[file name].css(.legacy).js\';` and' +
-                // Intentional double periods.. since trailing period is stripped from output.
-                ' registered using `.registerCSSFiles([styles]);` or `.registerRequiredCSS(legacyStyles);` syntax..',
-          }
-        ],
+        ]
       }
     },
     {

package/front_end/Images/generate-css-vars.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 const fs = require('fs');
 const path = require('path');
-const [, , targetGenDir, targetName, ...imageSources] = process.argv;
+const [, , buildTimestamp, targetGenDir, targetName, ...imageSources] = process.argv;
 
 /**
  * @param {string} fileName
@@ -18,7 +18,7 @@ function generateCSSVariableDefinition(fileName) {
       fileName}', import.meta.url).toString() + '\\")');`;
 }
 
-const CURRENT_YEAR = new Date().getFullYear();
+const CURRENT_YEAR = new Date(Number(buildTimestamp) * 1000).getFullYear();
 const fileContent = `
 // Copyright ${CURRENT_YEAR} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be

package/front_end/core/common/ParsedURL.ts

@@ -29,7 +29,40 @@
  */
 
 import * as Platform from '../platform/platform.js';
-import * as Root from '../root/root.js';
+
+/**
+ * http://tools.ietf.org/html/rfc3986#section-5.2.4
+ */
+export function normalizePath(path: string): string {
+  if (path.indexOf('..') === -1 && path.indexOf('.') === -1) {
+    return path;
+  }
+
+  const normalizedSegments = [];
+  const segments = path.split('/');
+  for (const segment of segments) {
+    if (segment === '.') {
+      continue;
+    } else if (segment === '..') {
+      normalizedSegments.pop();
+    } else if (segment) {
+      normalizedSegments.push(segment);
+    }
+  }
+  let normalizedPath = normalizedSegments.join('/');
+  if (normalizedPath[normalizedPath.length - 1] === '/') {
+    return normalizedPath;
+  }
+  if (path[0] === '/' && normalizedPath) {
+    normalizedPath = '/' + normalizedPath;
+  }
+  if ((path[path.length - 1] === '/') || (segments[segments.length - 1] === '.') ||
+      (segments[segments.length - 1] === '..')) {
+    normalizedPath = normalizedPath + '/';
+  }
+
+  return normalizedPath;
+}
 
 export class ParsedURL {
   isValid: boolean;
@@ -291,7 +324,7 @@ export class ParsedURL {
     if (hrefPath.charAt(0) !== '/') {
       hrefPath = parsedURL.folderPathComponents + '/' + hrefPath;
     }
-    return securityOrigin + Root.Runtime.Runtime.normalizePath(hrefPath) + hrefSuffix;
+    return securityOrigin + normalizePath(hrefPath) + hrefSuffix;
   }
 
   static splitLineAndColumn(string: string): {

package/front_end/core/common/Settings.ts

@@ -36,7 +36,7 @@ import {Format} from './Color.js';
 import {Console} from './Console.js';
 import type {GenericEvents, EventDescriptor, EventTargetEvent} from './EventTarget.js';
 import {ObjectWrapper} from './Object.js';
-import {getLocalizedSettingsCategory, getRegisteredSettings, maybeRemoveSettingExtension, RegExpSettingItem, registerSettingExtension, registerSettingsForTest, resetSettings, SettingCategory, SettingExtensionOption, SettingRegistration, SettingType} from './SettingRegistration.js';
+import {getLocalizedSettingsCategory, getRegisteredSettings, maybeRemoveSettingExtension, type RegExpSettingItem, registerSettingExtension, registerSettingsForTest, resetSettings, SettingCategory, type SettingExtensionOption, type SettingRegistration, SettingType} from './SettingRegistration.js';
 
 let settingsInstance: Settings|undefined;
 

package/front_end/core/host/InspectorFrontendHost.ts

@@ -220,7 +220,8 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
 
   loadNetworkResource(
       url: string, headers: string, streamId: number, callback: (arg0: LoadNetworkResourceResult) => void): void {
-    Root.Runtime.loadResourcePromise(url)
+    fetch(url)
+        .then(result => result.text())
         .then(function(text) {
           resourceLoaderStreamWrite(streamId, text);
           callback({

package/front_end/core/i18n/i18nImpl.ts

@@ -56,11 +56,10 @@ function getLocaleFetchUrl(locale: Intl.UnicodeBCP47LocaleIdentifier): string {
  * fetched locally or remotely.
  */
 export async function fetchAndRegisterLocaleData(locale: Intl.UnicodeBCP47LocaleIdentifier): Promise<void> {
-  const localeDataTextPromise = Root.Runtime.loadResourcePromise(getLocaleFetchUrl(locale));
+  const localeDataTextPromise = fetch(getLocaleFetchUrl(locale)).then(result => result.json());
   const timeoutPromise =
       new Promise((resolve, reject) => setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
-  const localeDataText = await Promise.race([timeoutPromise, localeDataTextPromise]);
-  const localeData = JSON.parse(localeDataText as string);
+  const localeData = await Promise.race([timeoutPromise, localeDataTextPromise]);
   i18nInstance.registerLocaleData(locale, localeData);
 }
 

package/front_end/core/i18n/locales/en-US.json

@@ -1190,9 +1190,6 @@
   "entrypoints/main/MainImpl.ts | showConsoleDrawer": {
     "message": "Show console drawer"
   },
-  "entrypoints/main/MainImpl.ts | theSystempreferredColorSchemeHas": {
-    "message": "The system-preferred color scheme has changed. To apply this change to DevTools, reload."
-  },
   "entrypoints/main/MainImpl.ts | undockIntoSeparateWindow": {
     "message": "Undock into separate window"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -1190,9 +1190,6 @@
   "entrypoints/main/MainImpl.ts | showConsoleDrawer": {
     "message": "Ŝh́ôẃ ĉón̂śôĺê d́r̂áŵér̂"
   },
-  "entrypoints/main/MainImpl.ts | theSystempreferredColorSchemeHas": {
-    "message": "T̂h́ê śŷśt̂ém̂-ṕr̂éf̂ér̂ŕêd́ ĉól̂ór̂ śĉh́êḿê h́âś ĉh́âńĝéd̂. T́ô áp̂ṕl̂ý t̂h́îś ĉh́âńĝé t̂ó D̂év̂T́ôól̂ś, r̂él̂óâd́."
-  },
   "entrypoints/main/MainImpl.ts | undockIntoSeparateWindow": {
     "message": "Ûńd̂óĉḱ îńt̂ó ŝép̂ár̂át̂é ŵín̂d́ôẃ"
   },

package/front_end/core/root/Runtime.ts

@@ -47,40 +47,6 @@ export class Runtime {
     runtimeInstance = undefined;
   }
 
-  /**
-   * http://tools.ietf.org/html/rfc3986#section-5.2.4
-   */
-  static normalizePath(path: string): string {
-    if (path.indexOf('..') === -1 && path.indexOf('.') === -1) {
-      return path;
-    }
-
-    const normalizedSegments = [];
-    const segments = path.split('/');
-    for (const segment of segments) {
-      if (segment === '.') {
-        continue;
-      } else if (segment === '..') {
-        normalizedSegments.pop();
-      } else if (segment) {
-        normalizedSegments.push(segment);
-      }
-    }
-    let normalizedPath = normalizedSegments.join('/');
-    if (normalizedPath[normalizedPath.length - 1] === '/') {
-      return normalizedPath;
-    }
-    if (path[0] === '/' && normalizedPath) {
-      normalizedPath = '/' + normalizedPath;
-    }
-    if ((path[path.length - 1] === '/') || (segments[segments.length - 1] === '.') ||
-        (segments[segments.length - 1] === '..')) {
-      normalizedPath = normalizedPath + '/';
-    }
-
-    return normalizedPath;
-  }
-
   static queryParam(name: string): string|null {
     return queryParamsObject.get(name);
   }
@@ -132,15 +98,6 @@ export class Runtime {
     return true;
   }
 
-  static resolveSourceURL(path: string): string {
-    let sourceURL: string = self.location.href;
-    if (self.location.search) {
-      sourceURL = sourceURL.replace(self.location.search, '');
-    }
-    sourceURL = sourceURL.substring(0, sourceURL.lastIndexOf('/') + 1) + path;
-    return '\n/*# sourceURL=' + sourceURL + ' */';
-  }
-
   loadLegacyModule(modulePath: string): Promise<void> {
     return import(`../../${modulePath}`);
   }
@@ -297,35 +254,6 @@ export class Experiment {
   }
 }
 
-export function loadResourcePromise(url: string): Promise<string> {
-  return new Promise<string>(load);
-
-  function load(fulfill: (arg0: string) => void, reject: (arg0: Error) => void): void {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    xhr.onreadystatechange = onreadystatechange;
-
-    function onreadystatechange(this: XMLHttpRequest, _e: Event): void {
-      if (xhr.readyState !== XMLHttpRequest.DONE) {
-        return;
-      }
-
-      const response: string = this.response;
-
-      // DevTools Proxy server can mask 404s as 200s, check the body to be sure
-      const status = /^HTTP\/1.1 404/.test(response) ? 404 : xhr.status;
-
-      if ([0, 200, 304].indexOf(status) === -1)  // Testing harness file:/// results in 0.
-      {
-        reject(new Error('While loading from url ' + url + ' server responded with a status of ' + status));
-      } else {
-        fulfill(response);
-      }
-    }
-    xhr.send(null);
-  }
-}
-
 // This must be constructed after the query parameters have been parsed.
 export const experiments = new ExperimentsSupport();
 

package/front_end/core/root/root-legacy.ts

@@ -20,8 +20,6 @@ Root.Runtime.queryParam = RootModule.Runtime.Runtime.queryParam;
 /** @type {!RootModule.Runtime.Runtime} */
 Root.runtime;
 
-Root.Runtime.loadResourcePromise = RootModule.Runtime.loadResourcePromise;
-
 /** @constructor */
 Root.Runtime.Extension = RootModule.Runtime.Extension;
 

package/front_end/entrypoints/formatter_worker/FormatterActions.ts

@@ -11,3 +11,13 @@ export const enum FormatterActions {
   EVALUATE_JAVASCRIPT_SUBSTRING = 'evaluatableJavaScriptSubstring',
   ARGUMENTS_LIST = 'argumentsList',
 }
+
+export interface FormatMapping {
+  original: number[];
+  formatted: number[];
+}
+
+export interface FormatResult {
+  content: string;
+  mapping: FormatMapping;
+}

package/front_end/entrypoints/formatter_worker/FormatterWorker.ts

@@ -30,7 +30,6 @@
 
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
-import type * as Formatter from '../../models/formatter/formatter.js';
 import * as Acorn from '../../third_party/acorn/acorn.js';
 import type * as CodeMirrorModule from '../../third_party/codemirror/codemirror-legacy.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
 
@@ -38,6 +37,7 @@ import {AcornTokenizer, ECMA_VERSION} from './AcornTokenizer.js';
 import {CSSFormatter} from './CSSFormatter.js';
 import {ESTreeWalker} from './ESTreeWalker.js';
 import {FormattedContentBuilder} from './FormattedContentBuilder.js';
+import type {FormatResult} from './FormatterActions.js';
 import {HTMLFormatter} from './HTMLFormatter.js';
 import {IdentityFormatter} from './IdentityFormatter.js';
 import {JavaScriptFormatter} from './JavaScriptFormatter.js';
@@ -179,12 +179,11 @@ export function javaScriptIdentifiers(content: string): {
   return identifiers.map(id => ({name: 'name' in id && id.name || undefined, offset: id.start}));
 }
 
-export function format(
-    mimeType: string, text: string, indentString?: string): Formatter.FormatterWorkerPool.FormatResult {
+export function format(mimeType: string, text: string, indentString?: string): FormatResult {
   // Default to a 4-space indent.
   indentString = indentString || '    ';
 
-  let result: Formatter.FormatterWorkerPool.FormatResult;
+  let result: FormatResult;
   const builder = new FormattedContentBuilder(indentString);
   const lineEndings = Platform.StringUtilities.findLineEndingIndexes(text);
   try {

package/front_end/entrypoints/lighthouse_worker/LighthouseService.ts

@@ -87,20 +87,17 @@ async function fetchLocaleData(locales: string[]): Promise<string|void> {
 
   // Try to load the locale data.
   try {
-    let localeDataTextPromise;
     const remoteBase = Root.Runtime.getRemoteBase();
+    let localeUrl: string;
     if (remoteBase && remoteBase.base) {
-      const localeUrl = `${remoteBase.base}third_party/lighthouse/locales/${locale}.json`;
-      localeDataTextPromise = Root.Runtime.loadResourcePromise(localeUrl);
+      localeUrl = `${remoteBase.base}third_party/lighthouse/locales/${locale}.json`;
     } else {
-      const localeUrl = new URL(`../../third_party/lighthouse/locales/${locale}.json`, import.meta.url);
-      localeDataTextPromise = Root.Runtime.loadResourcePromise(localeUrl.toString());
+      localeUrl = new URL(`../../third_party/lighthouse/locales/${locale}.json`, import.meta.url).toString();
     }
 
     const timeoutPromise = new Promise<string>(
         (resolve, reject) => setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
-    const localeDataText = await Promise.race([timeoutPromise, localeDataTextPromise]);
-    const localeData = JSON.parse(localeDataText);
+    const localeData = await Promise.race([timeoutPromise, fetch(localeUrl).then(result => result.json())]);
     // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
     self.registerLocaleData(locale, localeData);
     return locale;

package/front_end/entrypoints/main/MainImpl.ts

@@ -51,16 +51,12 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {ExecutionContextSelector} from './ExecutionContextSelector.js';
 
 const UIStrings = {
   /**
-  *@description A message to display prompting the user to reload DevTools if the OS color scheme changes.
-  */
-  theSystempreferredColorSchemeHas:
-      'The system-preferred color scheme has changed. To apply this change to DevTools, reload.',
-  /**
   *@description Title of item in main
   */
   customizeAndControlDevtools: 'Customize and control DevTools',
@@ -408,14 +404,26 @@ export class MainImpl {
 
     const defaultThemeSetting = 'systemPreferred';
     const themeSetting = Common.Settings.Settings.instance().createSetting('uiTheme', defaultThemeSetting);
-    UI.UIUtils.initializeUIUtils(document, themeSetting);
-    if (themeSetting.get() === defaultThemeSetting) {
-      const darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-      darkThemeMediaQuery.addEventListener('change', () => {
-        UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
-            i18nString(UIStrings.theSystempreferredColorSchemeHas));
-      });
+    UI.UIUtils.initializeUIUtils(document);
+
+    // Initialize theme support and apply it.
+    if (!ThemeSupport.ThemeSupport.hasInstance()) {
+      ThemeSupport.ThemeSupport.instance({forceNew: true, setting: themeSetting});
     }
+
+    ThemeSupport.ThemeSupport.instance().applyTheme(document);
+
+    const onThemeChange = (): void => {
+      ThemeSupport.ThemeSupport.instance().applyTheme(document);
+    };
+
+    // When the theme changes we instantiate a new theme support and reapply.
+    // Equally if the user has set to match the system and the OS preference changes
+    // we perform the same change.
+    const darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    darkThemeMediaQuery.addEventListener('change', onThemeChange);
+    themeSetting.addChangeListener(onThemeChange);
+
     UI.UIUtils.installComponentRootStyles((document.body as Element));
 
     this.#addMainEventListeners(document);
@@ -798,7 +806,7 @@ export class MainMenuItem implements UI.Toolbar.Provider {
       dockItemElement.classList.add('flex-auto');
       dockItemElement.tabIndex = -1;
       UI.ARIAUtils.setAccessibleName(dockItemElement, UIStrings.dockSide);
-      const titleElement = dockItemElement.createChild('span', 'flex-auto');
+      const titleElement = dockItemElement.createChild('span', 'dockside-title');
       titleElement.textContent = i18nString(UIStrings.dockSide);
       const toggleDockSideShorcuts =
           UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('main.toggle-dock');

package/front_end/entrypoints/main/main-meta.ts

@@ -588,7 +588,7 @@ Common.Settings.registerSettingExtension({
   settingName: 'uiTheme',
   settingType: Common.Settings.SettingType.ENUM,
   defaultValue: 'systemPreferred',
-  reloadRequired: true,
+  reloadRequired: false,
   options: [
     {
       title: i18nLazyString(UIStrings.switchToSystemPreferredColor),

package/front_end/generated/protocol.d.ts

@@ -1047,6 +1047,7 @@ declare namespace Protocol {
        * https://www.chromestatus.com/feature/5684870116278272 for more details."
        */
       message?: string;
+      deprecationType: string;
     }
 
     export const enum ClientHintIssueReason {

package/front_end/global_typings/global_defs.d.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 /// <reference path="./request_idle_callback.d.ts" />
-/// <reference path="./intl_display_names.d.ts" />
 
 interface CSSStyleSheet {
   replaceSync(content: string): void;

package/front_end/models/extensions/ExtensionServer.ts

@@ -952,28 +952,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private expandResourcePath(extensionPath: string, resourcePath: string): string {
-    return extensionPath + this.normalizePath(resourcePath);
-  }
-
-  private normalizePath(path: string): string {
-    const source = path.split('/');
-    const result = [];
-
-    for (let i = 0; i < source.length; ++i) {
-      if (source[i] === '.') {
-        continue;
-      }
-      // Ignore empty path components resulting from //, as well as a leading and traling slashes.
-      if (source[i] === '') {
-        continue;
-      }
-      if (source[i] === '..') {
-        result.pop();
-      } else {
-        result.push(source[i]);
-      }
-    }
-    return '/' + result.join('/');
+    return extensionPath + '/' + Common.ParsedURL.normalizePath(resourcePath);
   }
 
   evaluate(

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -119,9 +119,9 @@ export class FormatterWorkerPool {
     });
   }
 
-  format(mimeType: string, content: string, indentString: string): Promise<FormatResult> {
+  format(mimeType: string, content: string, indentString: string): Promise<FormatterActions.FormatResult> {
     const parameters = {mimeType: mimeType, content: content, indentString: indentString};
-    return this.runTask(FormatterActions.FormatterActions.FORMAT, parameters) as Promise<FormatResult>;
+    return this.runTask(FormatterActions.FormatterActions.FORMAT, parameters) as Promise<FormatterActions.FormatResult>;
   }
 
   javaScriptIdentifiers(content: string): Promise<{
@@ -195,11 +195,6 @@ class Task {
   }
 }
 
-export interface FormatResult {
-  content: string;
-  mapping: FormatMapping;
-}
-
 interface CSSProperty {
   name: string;
   nameRange: TextRange;
@@ -220,11 +215,6 @@ export interface OutlineItem {
   subtitle?: string;
 }
 
-export interface FormatMapping {
-  original: number[];
-  formatted: number[];
-}
-
 export interface CSSStyleRule {
   selectorText: string;
   styleRange: TextRange;

package/front_end/models/formatter/ScriptFormatter.ts

@@ -30,8 +30,8 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+import type * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js'; // eslint-disable-line rulesdir/es_modules_import
 
-import type {FormatMapping} from './FormatterWorkerPool.js';
 import {formatterWorkerPool} from './FormatterWorkerPool.js';
 
 function locationToPosition(lineEndings: number[], lineNumber: number, columnNumber: number): number {
@@ -102,9 +102,9 @@ class IdentityFormatterSourceMapping implements FormatterSourceMapping {
 class FormatterSourceMappingImpl implements FormatterSourceMapping {
   private readonly originalLineEndings: number[];
   private readonly formattedLineEndings: number[];
-  private readonly mapping: FormatMapping;
+  private readonly mapping: FormatterActions.FormatMapping;
 
-  constructor(originalLineEndings: number[], formattedLineEndings: number[], mapping: FormatMapping) {
+  constructor(originalLineEndings: number[], formattedLineEndings: number[], mapping: FormatterActions.FormatMapping) {
     this.originalLineEndings = originalLineEndings;
     this.formattedLineEndings = formattedLineEndings;
     this.mapping = mapping;

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -3,20 +3,20 @@
 // found in the LICENSE file.
 
 import type * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
+import * as Protocol from '../../generated/protocol.js';
 
 import {Issue, IssueCategory, IssueKind} from './Issue.js';
 import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
 
-export const enum IssueCode {
-  DeprecationIssue = 'DeprecationIssue',
-}
-
-export class DeprecationIssue extends Issue<IssueCode> {
+export class DeprecationIssue extends Issue {
   #issueDetails: Protocol.Audits.DeprecationIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.DeprecationIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
-    super(IssueCode.DeprecationIssue, issuesModel);
+    const issueCode = [
+      Protocol.Audits.InspectorIssueCode.DeprecationIssue,
+      issueDetails.deprecationType,
+    ].join('::');
+    super({code: issueCode, umaCode: 'DeprecationIssue'}, issuesModel);
     this.#issueDetails = issueDetails;
   }
 

package/front_end/panels/console/ConsoleSidebar.ts

@@ -178,6 +178,15 @@ export class URLGroupTreeElement extends ConsoleSidebarTreeElement {
   }
 }
 
+const enum GroupName {
+  ConsoleAPI = 'user message',
+  All = 'message',
+  Error = 'error',
+  Warning = 'warning',
+  Info = 'info',
+  Verbose = 'verbose',
+}
+
 /**
  * Maps the GroupName for a filter to the UIString used to render messages.
  * Stored here so we only construct it once at runtime, rather than everytime we
@@ -274,12 +283,3 @@ export class FilterTreeElement extends ConsoleSidebarTreeElement {
     return child;
   }
 }
-
-const enum GroupName {
-  ConsoleAPI = 'user message',
-  All = 'message',
-  Error = 'error',
-  Warning = 'warning',
-  Info = 'info',
-  Verbose = 'verbose',
-}

package/front_end/panels/elements/ElementsPanel.ts

@@ -1369,7 +1369,7 @@ export class ElementsActionDelegate implements UI.ActionRegistration.ActionDeleg
         treeOutline.duplicateNode(node);
         return true;
       case 'elements.copy-styles':
-        treeOutline.findTreeElement(node)?.copyStyles();
+        void treeOutline.findTreeElement(node)?.copyStyles();
         return true;
       case 'elements.undo':
         void SDK.DOMModel.DOMModelUndoStack.instance().undo();

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -237,13 +237,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private searchHighlightsVisible?: boolean;
   selectionElement?: HTMLDivElement;
   private hintElement?: HTMLElement;
+  private contentElement: HTMLElement;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     // The title will be updated in onattach.
     super();
     this.nodeInternal = node;
     this.treeOutline = null;
-
+    this.contentElement = this.listItemElement.createChild('div');
     this.gutterContainer = this.contentElement.createChild('div', 'gutter-container');
     this.gutterContainer.addEventListener('click', this.showContextMenu.bind(this));
     const gutterMenuIcon = UI.Icon.Icon.create('largeicon-menu', 'gutter-menu-icon');
@@ -1303,11 +1304,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           this.childrenListElement.classList.add('shadow-root-depth-' + depth);
         }
       }
-      const highlightElement = document.createElement('span');
-      highlightElement.className = 'highlight';
+      this.contentElement.removeChildren();
+      const highlightElement = this.contentElement.createChild('span', 'highlight');
       highlightElement.append(nodeInfo);
       // fixme: make it clear that `this.title = x` is a setter with significant side effects
-      this.title = highlightElement;
+      this.title = this.contentElement;
       this.updateDecorations();
       this.contentElement.prepend(this.gutterContainer);
       if (!this.isClosingTagInternal && this.adornerContainer) {

package/front_end/panels/elements/components/LayoutPane.ts

@@ -8,7 +8,7 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import type {BooleanSetting, EnumSetting, Setting} from './LayoutPaneUtils.js';
-import {LayoutElement} from './LayoutPaneUtils.js';
+import type {LayoutElement} from './LayoutPaneUtils.js';
 
 import type {NodeTextData} from './NodeText.js';
 import {NodeText} from './NodeText.js';

package/front_end/panels/emulation/AdvancedApp.ts

@@ -77,8 +77,8 @@ export class AdvancedApp implements Common.App.App {
   }
 
   deviceModeEmulationFrameLoaded(toolboxDocument: Document): void {
-    UI.UIUtils.initializeUIUtils(
-        toolboxDocument, Common.Settings.Settings.instance().createSetting('uiTheme', 'default'));
+    Common.Settings.Settings.instance().createSetting('uiTheme', 'default');
+    UI.UIUtils.initializeUIUtils(toolboxDocument);
     UI.UIUtils.installComponentRootStyles((toolboxDocument.body as Element));
     UI.ContextMenu.ContextMenu.installHandler(toolboxDocument);