chrome-devtools-frontend 1.0.928081 → 1.0.928589

package/AUTHORS

@@ -29,6 +29,7 @@ Gautham Banasandra <gautham.bangalore@gmail.com>
 Jake Mulhern <mulherje@gmail.com>
 Jeffrey Chen <jeffreyca16@gmail.com>
 Jesper van den Ende <jespertheend@gmail.com>
+Juba Borgohain <chromiumjuba@gmail.com>
 Julian Geppert <spctstr@gmail.com>
 Karntino Areros <karntino.c.areros@gmail.com>
 Krishnal Ciccolella <ciccolella.krishnal@gmail.com>

package/config/gni/devtools_grd_files.gni

@@ -460,6 +460,20 @@ grd_files_release_sources = [
   "front_end/third_party/acorn-loose/acorn-loose.js",
   "front_end/third_party/acorn/acorn.js",
   "front_end/third_party/chromium/client-variations/client-variations.js",
+  "front_end/third_party/codemirror.next/chunk/codemirror.js",
+  "front_end/third_party/codemirror.next/chunk/cpp.js",
+  "front_end/third_party/codemirror.next/chunk/css.js",
+  "front_end/third_party/codemirror.next/chunk/html.js",
+  "front_end/third_party/codemirror.next/chunk/java.js",
+  "front_end/third_party/codemirror.next/chunk/javascript.js",
+  "front_end/third_party/codemirror.next/chunk/json.js",
+  "front_end/third_party/codemirror.next/chunk/legacy.js",
+  "front_end/third_party/codemirror.next/chunk/markdown.js",
+  "front_end/third_party/codemirror.next/chunk/php.js",
+  "front_end/third_party/codemirror.next/chunk/python.js",
+  "front_end/third_party/codemirror.next/chunk/wast.js",
+  "front_end/third_party/codemirror.next/chunk/xml.js",
+  "front_end/third_party/codemirror.next/codemirror.next.js",
   "front_end/third_party/codemirror/codemirror.js",
   "front_end/third_party/diff/diff-legacy.js",
   "front_end/third_party/diff/diff.js",
@@ -471,6 +485,7 @@ grd_files_release_sources = [
   "front_end/third_party/marked/marked.js",
   "front_end/third_party/wasmparser/wasmparser.js",
   "front_end/ui/components/adorners/adorners.js",
+  "front_end/ui/components/code_highlighter/code_highlighter.js",
   "front_end/ui/components/data_grid/data_grid.js",
   "front_end/ui/components/expandable_list/expandable_list.js",
   "front_end/ui/components/helpers/helpers.js",
@@ -484,6 +499,7 @@ grd_files_release_sources = [
   "front_end/ui/components/report_view/report_view.js",
   "front_end/ui/components/request_link_icon/request_link_icon.js",
   "front_end/ui/components/survey_link/survey_link.js",
+  "front_end/ui/components/text_editor/text_editor.js",
   "front_end/ui/components/text_prompt/text_prompt.js",
   "front_end/ui/components/tree_outline/tree_outline.js",
   "front_end/ui/legacy/components/color_picker/color_picker-legacy.js",
@@ -1003,6 +1019,7 @@ grd_files_debug_sources = [
   "front_end/panels/issues/GenericIssueDetailsView.js",
   "front_end/panels/issues/HiddenIssuesRow.js",
   "front_end/panels/issues/IssueAggregator.js",
+  "front_end/panels/issues/IssueKindView.js",
   "front_end/panels/issues/IssueRevealer.js",
   "front_end/panels/issues/IssueView.js",
   "front_end/panels/issues/IssuesPane.js",
@@ -1333,6 +1350,8 @@ grd_files_debug_sources = [
   "front_end/third_party/wasmparser/package/dist/esm/WasmParser.js",
   "front_end/ui/components/adorners/Adorner.js",
   "front_end/ui/components/adorners/adorner.css.js",
+  "front_end/ui/components/code_highlighter/CodeHighlighter.js",
+  "front_end/ui/components/code_highlighter/codeHighlighter.css.js",
   "front_end/ui/components/data_grid/DataGrid.js",
   "front_end/ui/components/data_grid/DataGridContextMenuUtils.js",
   "front_end/ui/components/data_grid/DataGridController.js",
@@ -1397,6 +1416,9 @@ grd_files_debug_sources = [
   "front_end/ui/components/request_link_icon/requestLinkIcon.css.js",
   "front_end/ui/components/survey_link/SurveyLink.js",
   "front_end/ui/components/survey_link/surveyLink.css.js",
+  "front_end/ui/components/text_editor/TextEditor.js",
+  "front_end/ui/components/text_editor/config.js",
+  "front_end/ui/components/text_editor/theme.js",
   "front_end/ui/components/text_prompt/TextPrompt.js",
   "front_end/ui/components/text_prompt/textPrompt.css.js",
   "front_end/ui/components/tree_outline/TreeOutline.js",

package/front_end/core/common/Settings.ts

@@ -41,8 +41,6 @@ import {getLocalizedSettingsCategory, getRegisteredSettings, maybeRemoveSettingE
 let settingsInstance: Settings|undefined;
 
 export class Settings {
-  readonly globalStorage: SettingsStorage;
-  private readonly localStorage: SettingsStorage;
   private readonly sessionStorage: SettingsStorage;
   settingNameSet: Set<string>;
   orderValuesBySettingCategory: Map<SettingCategory, Set<number>>;
@@ -50,9 +48,9 @@ export class Settings {
   private registry: Map<string, Setting<unknown>>;
   readonly moduleSettings: Map<string, Setting<unknown>>;
 
-  private constructor(globalStorage: SettingsStorage, localStorage: SettingsStorage) {
-    this.globalStorage = globalStorage;
-    this.localStorage = localStorage;
+  private constructor(
+      private readonly syncedStorage: SettingsStorage, readonly globalStorage: SettingsStorage,
+      private readonly localStorage: SettingsStorage) {
     this.sessionStorage = new SettingsStorage({});
 
     this.settingNameSet = new Set();
@@ -91,16 +89,17 @@ export class Settings {
 
   static instance(opts: {
     forceNew: boolean|null,
+    syncedStorage: SettingsStorage|null,
     globalStorage: SettingsStorage|null,
     localStorage: SettingsStorage|null,
-  } = {forceNew: null, globalStorage: null, localStorage: null}): Settings {
-    const {forceNew, globalStorage, localStorage} = opts;
+  } = {forceNew: null, syncedStorage: null, globalStorage: null, localStorage: null}): Settings {
+    const {forceNew, syncedStorage, globalStorage, localStorage} = opts;
     if (!settingsInstance || forceNew) {
-      if (!globalStorage || !localStorage) {
+      if (!syncedStorage || !globalStorage || !localStorage) {
         throw new Error(`Unable to create settings: global and local storage must be provided: ${new Error().stack}`);
       }
 
-      settingsInstance = new Settings(globalStorage, localStorage);
+      settingsInstance = new Settings(syncedStorage, globalStorage, localStorage);
     }
 
     return settingsInstance;
@@ -270,29 +269,22 @@ function removeSetting(setting: Setting<unknown>): void {
   settings.getRegistry().delete(name);
   settings.moduleSettings.delete(name);
 
-  setting.getStorage().remove(name);
+  setting.storage.remove(name);
 }
 
 export class Setting<V> {
-  private nameInternal: string;
-  private defaultValueInternal: V;
-  private readonly eventSupport: ObjectWrapper<GenericEvents>;
-  private storage: SettingsStorage;
   private titleFunction!: () => Platform.UIString.LocalizedString;
   private titleInternal!: string;
-  private registration: SettingRegistration|null;
+  private registration: SettingRegistration|null = null;
   private requiresUserAction?: boolean;
   private value?: V;
   // TODO(crbug.com/1172300) Type cannot be inferred without changes to consumers. See above.
   private serializer: Serializer<unknown, V> = JSON;
   private hadUserAction?: boolean;
 
-  constructor(name: string, defaultValue: V, eventSupport: ObjectWrapper<GenericEvents>, storage: SettingsStorage) {
-    this.nameInternal = name;
-    this.defaultValueInternal = defaultValue;
-    this.eventSupport = eventSupport;
-    this.storage = storage;
-    this.registration = null;
+  constructor(
+      readonly name: string, readonly defaultValue: V, private readonly eventSupport: ObjectWrapper<GenericEvents>,
+      readonly storage: SettingsStorage) {
   }
 
   setSerializer(serializer: Serializer<unknown, V>): void {
@@ -300,15 +292,11 @@ export class Setting<V> {
   }
 
   addChangeListener(listener: (arg0: EventTargetEvent<V>) => void, thisObject?: Object): EventDescriptor {
-    return this.eventSupport.addEventListener(this.nameInternal, listener, thisObject);
+    return this.eventSupport.addEventListener(this.name, listener, thisObject);
   }
 
   removeChangeListener(listener: (arg0: EventTargetEvent<V>) => void, thisObject?: Object): void {
-    this.eventSupport.removeEventListener(this.nameInternal, listener, thisObject);
-  }
-
-  get name(): string {
-    return this.nameInternal;
+    this.eventSupport.removeEventListener(this.name, listener, thisObject);
   }
 
   title(): string {
@@ -337,19 +325,19 @@ export class Setting<V> {
 
   get(): V {
     if (this.requiresUserAction && !this.hadUserAction) {
-      return this.defaultValueInternal;
+      return this.defaultValue;
     }
 
     if (typeof this.value !== 'undefined') {
       return this.value;
     }
 
-    this.value = this.defaultValueInternal;
-    if (this.storage.has(this.nameInternal)) {
+    this.value = this.defaultValue;
+    if (this.storage.has(this.name)) {
       try {
-        this.value = this.serializer.parse(this.storage.get(this.nameInternal));
+        this.value = this.serializer.parse(this.storage.get(this.name));
       } catch (e) {
-        this.storage.remove(this.nameInternal);
+        this.storage.remove(this.name);
       }
     }
     return this.value;
@@ -361,14 +349,14 @@ export class Setting<V> {
     try {
       const settingString = this.serializer.stringify(value);
       try {
-        this.storage.set(this.nameInternal, settingString);
+        this.storage.set(this.name, settingString);
       } catch (e) {
-        this.printSettingsSavingError(e.message, this.nameInternal, settingString);
+        this.printSettingsSavingError(e.message, this.name, settingString);
       }
     } catch (e) {
-      Console.instance().error('Cannot stringify setting with name: ' + this.nameInternal + ', error: ' + e.message);
+      Console.instance().error('Cannot stringify setting with name: ' + this.name + ', error: ' + e.message);
     }
-    this.eventSupport.dispatchEventToListeners(this.nameInternal, value);
+    this.eventSupport.dispatchEventToListeners(this.name, value);
   }
 
   setRegistration(registration: SettingRegistration): void {
@@ -427,19 +415,12 @@ export class Setting<V> {
   }
 
   private printSettingsSavingError(message: string, name: string, value: string): void {
-    const errorMessage = 'Error saving setting with name: ' + this.nameInternal + ', value length: ' + value.length +
-        '. Error: ' + message;
+    const errorMessage =
+        'Error saving setting with name: ' + this.name + ', value length: ' + value.length + '. Error: ' + message;
     console.error(errorMessage);
     Console.instance().error(errorMessage);
     this.storage.dumpSizes();
   }
-  defaultValue(): V {
-    return this.defaultValueInternal;
-  }
-
-  getStorage(): SettingsStorage {
-    return this.storage;
-  }
 }
 
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration

package/front_end/core/host/UserMetrics.ts

@@ -576,7 +576,8 @@ export const DevtoolsExperiments: {
   'hideIssuesFeature': 48,
   'reportingApiDebugging': 49,
   'syncSettings': 50,
-  '__lastValidEnumPosition': 50,
+  'groupAndHideIssuesByKind': 51,
+  '__lastValidEnumPosition': 51,
 };
 
 export const IssueExpanded: {

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

@@ -1343,12 +1343,21 @@
   "models/issues_manager/Issue.ts | breakingChangeIssue": {
     "message": "A breaking change issue: the page may stop working in an upcoming version of Chrome"
   },
+  "models/issues_manager/Issue.ts | breakingChanges": {
+    "message": "Breaking Changes"
+  },
   "models/issues_manager/Issue.ts | improvementIssue": {
     "message": "An improvement issue: there is an opportunity to improve the page"
   },
+  "models/issues_manager/Issue.ts | improvements": {
+    "message": "Improvements"
+  },
   "models/issues_manager/Issue.ts | pageErrorIssue": {
     "message": "A page error issue: the page is not working correctly"
   },
+  "models/issues_manager/Issue.ts | pageErrors": {
+    "message": "Page Errors"
+  },
   "models/issues_manager/LowTextContrastIssue.ts | colorAndContrastAccessibility": {
     "message": "Color and contrast accessibility"
   },
@@ -3983,6 +3992,9 @@
   "panels/elements/components/ElementsBreadcrumbsUtils.ts | text": {
     "message": "(text)"
   },
+  "panels/elements/components/LayoutPane.ts | chooseElementOverlayColor": {
+    "message": "Choose the overlay color for this element"
+  },
   "panels/elements/components/LayoutPane.ts | flexbox": {
     "message": "Flexbox"
   },
@@ -5015,9 +5027,15 @@
   "panels/issues/IssuesPane.ts | groupByCategory": {
     "message": "Group by category"
   },
+  "panels/issues/IssuesPane.ts | groupByKind": {
+    "message": "Group by kind"
+  },
   "panels/issues/IssuesPane.ts | groupDisplayedIssuesUnder": {
     "message": "Group displayed issues under associated categories"
   },
+  "panels/issues/IssuesPane.ts | groupDisplayedIssuesUnderKind": {
+    "message": "Group displayed issues as Page errors, Breaking changes and Improvements"
+  },
   "panels/issues/IssuesPane.ts | heavyAds": {
     "message": "Heavy Ads"
   },

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

@@ -1343,12 +1343,21 @@
   "models/issues_manager/Issue.ts | breakingChangeIssue": {
     "message": "Â b́r̂éâḱîńĝ ćĥán̂ǵê íŝśûé: t̂h́ê ṕâǵê ḿâý ŝt́ôṕ ŵór̂ḱîńĝ ín̂ án̂ úp̂ćôḿîńĝ v́êŕŝíôń ôf́ Ĉh́r̂óm̂é"
   },
+  "models/issues_manager/Issue.ts | breakingChanges": {
+    "message": "B̂ŕêák̂ín̂ǵ Ĉh́âńĝéŝ"
+  },
   "models/issues_manager/Issue.ts | improvementIssue": {
     "message": "Âń îḿp̂ŕôv́êḿêńt̂ íŝśûé: t̂h́êŕê íŝ án̂ óp̂ṕôŕt̂ún̂ít̂ý t̂ó îḿp̂ŕôv́ê t́ĥé p̂áĝé"
   },
+  "models/issues_manager/Issue.ts | improvements": {
+    "message": "Îḿp̂ŕôv́êḿêńt̂ś"
+  },
   "models/issues_manager/Issue.ts | pageErrorIssue": {
     "message": "Â ṕâǵê ér̂ŕôŕ îśŝúê: t́ĥé p̂áĝé îś n̂ót̂ ẃôŕk̂ín̂ǵ ĉór̂ŕêćt̂ĺŷ"
   },
+  "models/issues_manager/Issue.ts | pageErrors": {
+    "message": "P̂áĝé Êŕr̂ór̂ś"
+  },
   "models/issues_manager/LowTextContrastIssue.ts | colorAndContrastAccessibility": {
     "message": "Ĉól̂ór̂ án̂d́ ĉón̂t́r̂áŝt́ âćĉéŝśîb́îĺît́ŷ"
   },
@@ -3983,6 +3992,9 @@
   "panels/elements/components/ElementsBreadcrumbsUtils.ts | text": {
     "message": "(t̂éx̂t́)"
   },
+  "panels/elements/components/LayoutPane.ts | chooseElementOverlayColor": {
+    "message": "Ĉh́ôóŝé t̂h́ê óv̂ér̂ĺâý ĉól̂ór̂ f́ôŕ t̂h́îś êĺêḿêńt̂"
+  },
   "panels/elements/components/LayoutPane.ts | flexbox": {
     "message": "F̂ĺêx́b̂óx̂"
   },
@@ -5015,9 +5027,15 @@
   "panels/issues/IssuesPane.ts | groupByCategory": {
     "message": "Ĝŕôúp̂ b́ŷ ćât́êǵôŕŷ"
   },
+  "panels/issues/IssuesPane.ts | groupByKind": {
+    "message": "Ĝŕôúp̂ b́ŷ ḱîńd̂"
+  },
   "panels/issues/IssuesPane.ts | groupDisplayedIssuesUnder": {
     "message": "Ĝŕôúp̂ d́îśp̂ĺâýêd́ îśŝúêś ûńd̂ér̂ áŝśôćîát̂éd̂ ćât́êǵôŕîéŝ"
   },
+  "panels/issues/IssuesPane.ts | groupDisplayedIssuesUnderKind": {
+    "message": "Ĝŕôúp̂ d́îśp̂ĺâýêd́ îśŝúêś âś P̂áĝé êŕr̂ór̂ś, B̂ŕêák̂ín̂ǵ ĉh́âńĝéŝ án̂d́ Îḿp̂ŕôv́êḿêńt̂ś"
+  },
   "panels/issues/IssuesPane.ts | heavyAds": {
     "message": "Ĥéâv́ŷ Ád̂ś"
   },

package/front_end/core/sdk/CookieParser.ts

@@ -117,14 +117,14 @@ export class CookieParser {
     // and http://crbug.com/12361). The logic below matches latest versions of IE, Firefox,
     // Chrome and Safari on some old platforms. The latest version of Safari supports quoted
     // cookie values, though.
-    const keyValueMatch = /^[ \t]*([^\s=;]+)[ \t]*(?:=[ \t]*([^;\n]*))?/.exec(this.#input);
+    const keyValueMatch = /^[ \t]*([^=;]+)[ \t]*(?:=[ \t]*([^;\n]*))?/.exec(this.#input);
     if (!keyValueMatch) {
       console.error('Failed parsing cookie header before: ' + this.#input);
       return null;
     }
 
     const result = new KeyValue(
-        keyValueMatch[1], keyValueMatch[2] && keyValueMatch[2].trim(),
+        keyValueMatch[1] && keyValueMatch[1].trim(), keyValueMatch[2] && keyValueMatch[2].trim(),
         (this.#originalInputLength as number) - this.#input.length);
     this.#lastCookieLine += keyValueMatch[0];
     this.#input = this.#input.slice(keyValueMatch[0].length);

package/front_end/entrypoints/main/MainImpl.ts

@@ -215,7 +215,7 @@ export class MainImpl {
       clear: Host.InspectorFrontendHost.InspectorFrontendHostInstance.clearPreferences,
     };
     const globalStorage = new Common.Settings.SettingsStorage(prefs, hostStorage, storagePrefix);
-    Common.Settings.Settings.instance({forceNew: true, globalStorage, localStorage});
+    Common.Settings.Settings.instance({forceNew: true, syncedStorage: globalStorage, globalStorage, localStorage});
 
     // @ts-ignore layout test global
     self.Common.settings = Common.Settings.Settings.instance();
@@ -316,6 +316,9 @@ export class MainImpl {
         'hideIssuesFeature', 'Enable experimental hide issues menu', undefined,
         'https://developer.chrome.com/blog/new-in-devtools-94/#hide-issues');
 
+    // Hide Issues Feature.
+    Root.Runtime.experiments.register('groupAndHideIssuesByKind', 'Allow grouping and hiding of issues by IssueKind');
+
     // Localized DevTools, hide "locale selector" setting behind an experiment.
     Root.Runtime.experiments.register(Root.Runtime.ExperimentName.LOCALIZED_DEVTOOLS, 'Enable localized DevTools');
 
@@ -526,6 +529,9 @@ export class MainImpl {
       Timeline.TimelinePanel.LoadTimelineHandler.instance().handleQueryParam(value);
     }
 
+    // Initialize ARIAUtils.alert Element
+    UI.ARIAUtils.alertElementInstance();
+
     // Allow UI cycles to repaint prior to creating connection.
     setTimeout(this.initializeTarget.bind(this), 0);
     MainImpl.timeEnd('Main._showAppUI');

package/front_end/models/issues_manager/Issue.ts

@@ -11,6 +11,18 @@ import type * as Protocol from '../../generated/protocol.js';
 import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
 
 const UIStrings = {
+  /**
+   *@description The kind of an issue (plural) (Issues are categorized into kinds).
+   */
+  improvements: 'Improvements',
+  /**
+   *@description The kind of an issue (plural) (Issues are categorized into kinds).
+   */
+  pageErrors: 'Page Errors',
+  /**
+   *@description The kind of an issue (plural) (Issues are categorized into kinds).
+   */
+  breakingChanges: 'Breaking Changes',
   /**
    *@description A description for a kind of issue we display in the issues tab.
    */
@@ -64,6 +76,17 @@ export enum IssueKind {
   Improvement = 'Improvement',
 }
 
+export function getIssueKindName(issueKind: IssueKind): Common.UIString.LocalizedString {
+  switch (issueKind) {
+    case IssueKind.BreakingChange:
+      return i18nString(UIStrings.breakingChanges);
+    case IssueKind.Improvement:
+      return i18nString(UIStrings.improvements);
+    case IssueKind.PageError:
+      return i18nString(UIStrings.pageErrors);
+  }
+}
+
 export function getIssueKindDescription(issueKind: IssueKind): Common.UIString.LocalizedString {
   switch (issueKind) {
     case IssueKind.PageError:

package/front_end/models/issues_manager/IssuesManager.ts

@@ -159,7 +159,7 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   private allIssues = new Map<string, Issue>();
   private filteredIssues = new Map<string, Issue>();
   private issueCounts = new Map<IssueKind, number>();
-  private hiddenIssueCount: number = 0;
+  private hiddenIssueCount = new Map<IssueKind, number>();
   private hasSeenTopFrameNavigated = false;
   private sourceFrameIssuesManager = new SourceFrameIssuesManager(this);
   private issuesById: Map<string, Issue> = new Map();
@@ -278,7 +278,7 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
         this.updateIssueHiddenStatus(issue, values);
       }
       if (issue.isHidden()) {
-        this.hiddenIssueCount++;
+        this.hiddenIssueCount.set(issue.getKind(), 1 + (this.hiddenIssueCount.get(issue.getKind()) || 0));
       }
       this.dispatchEventToListeners(Events.IssueAdded, {issuesModel, issue});
     }
@@ -298,8 +298,15 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     return this.filteredIssues.size;
   }
 
-  numberOfHiddenIssues(): number {
-    return this.hiddenIssueCount;
+  numberOfHiddenIssues(kind?: IssueKind): number {
+    if (kind) {
+      return this.hiddenIssueCount.get(kind) ?? 0;
+    }
+    let count = 0;
+    for (const num of this.hiddenIssueCount.values()) {
+      count += num;
+    }
+    return count;
   }
 
   numberOfAllStoredIssues(): number {
@@ -332,7 +339,7 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     this.filteredIssues.clear();
     this.issueCounts.clear();
     this.issuesById.clear();
-    this.hiddenIssueCount = 0;
+    this.hiddenIssueCount.clear();
     const values = this.hideIssueSetting?.get();
     const hideIssuesFeature = Root.Runtime.experiments.isEnabled('hideIssuesFeature');
     for (const [key, issue] of this.allIssues) {
@@ -343,7 +350,7 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
         this.filteredIssues.set(key, issue);
         this.issueCounts.set(issue.getKind(), 1 + (this.issueCounts.get(issue.getKind()) ?? 0));
         if (issue.isHidden()) {
-          this.hiddenIssueCount++;
+          this.hiddenIssueCount.set(issue.getKind(), 1 + (this.hiddenIssueCount.get(issue.getKind()) || 0));
         }
         const issueId = issue.getIssueId();
         if (issueId) {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -39,13 +39,16 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as TextEditor from '../../ui/legacy/components/text_editor/text_editor.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import * as TextEditorLegacy from '../../ui/legacy/components/text_editor/text_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
+
 import * as ElementsComponents from './components/components.js';
 import {canGetJSPath, cssPath, jsPath, xPath} from './DOMPath.js';
 import {ElementsPanel} from './ElementsPanel.js';
+
 import type {ElementsTreeOutline, UpdateRecord} from './ElementsTreeOutline.js';
 import {MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
@@ -986,9 +989,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private startEditingAsHTML(
+  private async startEditingAsHTML(
       commitCallback: (arg0: string, arg1: string) => void, disposeCallback: () => void,
-      maybeInitialValue: string|null): void {
+      maybeInitialValue: string|null): Promise<void> {
     if (maybeInitialValue === null) {
       return;
     }
@@ -1013,56 +1016,62 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // Append editor.
     this.listItemElement.appendChild(this.htmlEditElement);
 
-    const factory = TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditorFactory.instance();
-    const editor = factory.createEditor({
-      lineNumbers: false,
-      lineWrapping: Common.Settings.Settings.instance().moduleSetting('domWordWrap').get(),
-      mimeType: 'text/html',
-      autoHeight: false,
-      padBottom: false,
-      bracketMatchingSetting: undefined,
-      devtoolsAccessibleName: undefined,
-      maxHighlightLength: undefined,
-      placeholder: undefined,
-      lineWiseCopyCut: undefined,
-      inputStyle: undefined,
-    });
+    const TextEditor = await import('../../ui/components/text_editor/text_editor.js');
+    const CodeMirror = await import('../../third_party/codemirror.next/codemirror.next.js');
+    const {html} = await CodeMirror.html();
+    const editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({
+      doc: initialValue,
+      extensions: [
+        CodeMirror.keymap.of([
+          {
+            key: 'Mod-Enter',
+            run: (): boolean => {
+              this.editing?.commit();
+              return true;
+            },
+          },
+          {
+            key: 'Escape',
+            run: (): boolean => {
+              this.editing?.cancel();
+              return true;
+            },
+          },
+        ]),
+        TextEditor.Config.baseConfiguration(initialValue),
+        html(),
+        TextEditor.Config.domWordWrap,
+        CodeMirror.EditorView.theme({
+          '.cm-editor': {maxHeight: '300px'},
+          '.cm-scroller': {overflowY: 'auto'},
+        }),
+        CodeMirror.EditorView.domEventHandlers({
+          focusout: event => {
+            // The relatedTarget is null when no element gains focus, e.g. switching windows.
+            const relatedTarget = (event.relatedTarget as Node | null);
+            if (relatedTarget && !relatedTarget.isSelfOrDescendant(editor)) {
+              this.editing && this.editing.commit();
+            }
+          },
+        }),
+      ],
+    }));
     this.editing = {commit: commit.bind(this), cancel: dispose.bind(this), editor, resize: resize.bind(this)};
     resize.call(this);
-    editor.widget().show((this.htmlEditElement as HTMLElement));
-    editor.setText(initialValue);
-    editor.widget().focus();
-    editor.widget().element.addEventListener('focusout', event => {
-      // The relatedTarget is null when no element gains focus, e.g. switching windows.
-      const relatedTarget = (event.relatedTarget as Node | null);
-      if (relatedTarget && !relatedTarget.isSelfOrDescendant(editor.widget().element)) {
-        this.editing && this.editing.commit();
-      }
-    }, false);
-    editor.widget().element.addEventListener('keydown', keydown.bind(this), true);
+    this.htmlEditElement.appendChild(editor);
+    editor.editor.focus();
 
-    this.treeOutline && this.treeOutline.setMultilineEditing((this.editing as {
-      commit: () => void,
-      cancel: () => void,
-      editor: UI.TextEditor.TextEditor,
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      resize: () => any,
-    }));
+    this.treeOutline && this.treeOutline.setMultilineEditing(this.editing);
 
     function resize(this: ElementsTreeElement): void {
       if (this.treeOutline && this.htmlEditElement) {
         this.htmlEditElement.style.width = this.treeOutline.visibleWidth() - this.computeLeftIndent() - 30 + 'px';
       }
-
-      if (this.editing && this.editing.editor) {
-        (this.editing.editor as TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditor).onResize();
-      }
     }
 
     function commit(this: ElementsTreeElement): void {
       if (this.editing && this.editing.editor) {
-        commitCallback(initialValue, this.editing.editor.text());
+        commitCallback(initialValue, this.editing.editor.state.doc.toString());
       }
       dispose.call(this);
     }
@@ -1071,8 +1080,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (!this.editing || !this.editing.editor) {
         return;
       }
-      this.editing.editor.widget().element.removeEventListener('blur', this.editing.commit, true);
-      this.editing.editor.widget().detach();
       this.editing = null;
 
       // Remove editor.
@@ -1098,21 +1105,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
       disposeCallback();
     }
-
-    function keydown(this: ElementsTreeElement, event: Event): void {
-      const keyboardEvent = (event as KeyboardEvent);
-      const isMetaOrCtrl = UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent) &&
-          !keyboardEvent.altKey && !keyboardEvent.shiftKey;
-      if (keyboardEvent.key === 'Enter' && (isMetaOrCtrl || keyboardEvent.isMetaOrCtrlForTest)) {
-        keyboardEvent.consume(true);
-        this.editing && this.editing.commit();
-      } else if (
-          keyboardEvent.keyCode === UI.KeyboardShortcut.Keys.Esc.code ||
-          keyboardEvent.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
-        keyboardEvent.consume(true);
-        this.editing && this.editing.cancel();
-      }
-    }
   }
 
   private attributeEditingCommitted(
@@ -1732,14 +1724,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
 
           const javascriptSyntaxHighlighter =
-              new TextEditor.SyntaxHighlighter.SyntaxHighlighter('text/javascript', true);
+              new TextEditorLegacy.SyntaxHighlighter.SyntaxHighlighter('text/javascript', true);
           javascriptSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight);
         } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'style') {
           const newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-css-node');
           const text = node.nodeValue();
           newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
 
-          const cssSyntaxHighlighter = new TextEditor.SyntaxHighlighter.SyntaxHighlighter('text/css', true);
+          const cssSyntaxHighlighter = new TextEditorLegacy.SyntaxHighlighter.SyntaxHighlighter('text/css', true);
           cssSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight);
         } else {
           UI.UIUtils.createTextChild(titleDOM, '"');
@@ -2224,7 +2216,7 @@ export function adornerComparator(adornerA: Adorners.Adorner.Adorner, adornerB:
 export interface EditorHandles {
   commit: () => void;
   cancel: () => void;
-  editor?: UI.TextEditor.TextEditor|TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditor;
+  editor?: TextEditor.TextEditor.TextEditor;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   resize: () => any;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1631,7 +1631,6 @@ export interface MultilineEditorController {
   cancel: () => void;
   commit: () => void;
   resize: () => void;
-  editor: UI.TextEditor.TextEditor;
 }
 
 export interface ClipboardData {

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

@@ -17,6 +17,10 @@ import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {
+  /**
+  *@description Title of the input to select the overlay color for an element using the color picker
+  */
+  chooseElementOverlayColor: 'Choose the overlay color for this element',
   /**
   *@description Title of the show element button in the Layout pane of the Elements panel
   */
@@ -257,7 +261,7 @@ export class LayoutPane extends HTMLElement {
           } as NodeTextData}></${NodeText.litTagName}>
         </span>
       </label>
-      <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" class="color-picker-label" style="background: ${element.color};">
+      <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" title=${i18nString(UIStrings.chooseElementOverlayColor)} class="color-picker-label" style="background: ${element.color};">
         <input @change=${onColorChange} @input=${onColorChange} class="color-picker" type="color" value=${element.color} />
       </label>
       <button tabindex="0" @click=${onElementClick} title=${i18nString(UIStrings.showElementInTheElementsPanel)} class="show-element"></button>

package/front_end/panels/issues/IssueAggregator.ts

@@ -309,6 +309,14 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return result;
   }
 
+  aggregatedIssueKinds(): Set<IssuesManager.Issue.IssueKind> {
+    const result = new Set<IssuesManager.Issue.IssueKind>();
+    for (const issue of this.aggregatedIssuesByKey.values()) {
+      result.add(issue.getKind());
+    }
+    return result;
+  }
+
   numberOfAggregatedIssues(): number {
     return this.aggregatedIssuesByKey.size;
   }

package/front_end/panels/issues/IssueKindView.ts

@@ -0,0 +1,95 @@
+// Copyright 2021 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 Common from '../../core/common/common.js';
+import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as Adorners from '../../ui/components/adorners/adorners.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+export function getGroupIssuesByKindSetting(): Common.Settings.Setting<boolean> {
+  return Common.Settings.Settings.instance().createSetting('groupIssuesByKind', false);
+}
+
+export function issueKindViewSortPriority(a: IssueKindView, b: IssueKindView): number {
+  if (a.getKind() === b.getKind()) {
+    return 0;
+  }
+  if (a.getKind() === IssuesManager.Issue.IssueKind.PageError) {
+    return -1;
+  }
+  if (a.getKind() === IssuesManager.Issue.IssueKind.BreakingChange &&
+      b.getKind() === IssuesManager.Issue.IssueKind.Improvement) {
+    return -1;
+  }
+  return 1;
+}
+
+export function getClassNameFromKind(kind: IssuesManager.Issue.IssueKind): string {
+  switch (kind) {
+    case IssuesManager.Issue.IssueKind.BreakingChange:
+      return 'breaking-changes';
+    case IssuesManager.Issue.IssueKind.Improvement:
+      return 'improvements';
+    case IssuesManager.Issue.IssueKind.PageError:
+      return 'page-errors';
+  }
+}
+
+export class IssueKindView extends UI.TreeOutline.TreeElement {
+  private kind: IssuesManager.Issue.IssueKind;
+  private issueCount: HTMLElement;
+
+  constructor(kind: IssuesManager.Issue.IssueKind) {
+    super(undefined, true);
+    this.kind = kind;
+    this.issueCount = document.createElement('span');
+
+    this.toggleOnClick = true;
+    this.listItemElement.classList.add('issue-kind');
+    this.listItemElement.classList.add(getClassNameFromKind(kind));
+    this.childrenListElement.classList.add('issue-kind-body');
+  }
+
+  getKind(): IssuesManager.Issue.IssueKind {
+    return this.kind;
+  }
+
+  private appendHeader(): void {
+    const header = document.createElement('div');
+    header.classList.add('header');
+
+    const issueKindIcon = new IconButton.Icon.Icon();
+    issueKindIcon.data = IssueCounter.IssueCounter.getIssueKindIconData(this.kind);
+    issueKindIcon.classList.add('leading-issue-icon');
+
+    const countAdorner = new Adorners.Adorner.Adorner();
+    countAdorner.data = {
+      name: 'countWrapper',
+      content: this.issueCount,
+    };
+    countAdorner.classList.add('aggregated-issues-count');
+    this.issueCount.textContent = '0';
+
+    const title = document.createElement('div');
+    title.classList.add('title');
+    title.textContent = IssuesManager.Issue.getIssueKindName(this.kind);
+
+    header.appendChild(issueKindIcon);
+    header.appendChild(countAdorner);
+    header.appendChild(title);
+
+    this.listItemElement.appendChild(header);
+  }
+
+  onattach(): void {
+    this.appendHeader();
+    this.expand();
+  }
+
+  update(count: number): void {
+    this.issueCount.textContent = `${count}`;
+  }
+}

package/front_end/panels/issues/IssueView.ts

@@ -444,6 +444,10 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     this.throttle.schedule(async () => this.doUpdate());
   }
 
+  getIssueKind(): IssuesManager.Issue.IssueKind {
+    return this.issue.getKind();
+  }
+
   isForHiddenIssue(): boolean {
     return this.issue.isHidden();
   }

package/front_end/panels/issues/IssuesPane.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -15,6 +16,7 @@ import issuesTreeStyles from './issuesTree.css.js';
 import type {AggregatedIssue, AggregationKey} from './IssueAggregator.js';
 import {Events as IssueAggregatorEvents, IssueAggregator} from './IssueAggregator.js';
 import {IssueView} from './IssueView.js';
+import {IssueKindView, getGroupIssuesByKindSetting, issueKindViewSortPriority} from './IssueKindView.js';
 
 const UIStrings = {
   /**
@@ -64,6 +66,14 @@ const UIStrings = {
    * @description Label for a checkbox which toggles grouping by category in the issues tab
    */
   groupByCategory: 'Group by category',
+  /**
+  * @description Title for a checkbox which toggles grouping by kind in the issues tab
+    */
+  groupDisplayedIssuesUnderKind: 'Group displayed issues as Page errors, Breaking changes and Improvements',
+  /**
+  * @description Label for a checkbox which toggles grouping by kind in the issues tab
+    */
+  groupByKind: 'Group by kind',
   /**
    * @description Title for a checkbox. Whether the issues tab should include third-party issues or not.
    */
@@ -168,6 +178,7 @@ let issuesPaneInstance: IssuesPane;
 export class IssuesPane extends UI.Widget.VBox {
   private categoryViews: Map<IssuesManager.Issue.IssueCategory, IssueCategoryView>;
   private issueViews: Map<AggregationKey, IssueView>;
+  private kindViews: Map<IssuesManager.Issue.IssueKind, IssueKindView>;
   private showThirdPartyCheckbox: UI.Toolbar.ToolbarSettingCheckbox|null;
   private issuesTree: UI.TreeOutline.TreeOutlineInShadow;
   private hiddenIssuesRow: HiddenIssuesRow;
@@ -182,6 +193,7 @@ export class IssuesPane extends UI.Widget.VBox {
     this.contentElement.classList.add('issues-pane');
 
     this.categoryViews = new Map();
+    this.kindViews = new Map();
     this.issueViews = new Map();
     this.showThirdPartyCheckbox = null;
 
@@ -237,6 +249,15 @@ export class IssuesPane extends UI.Widget.VBox {
       this.fullUpdate(true);
     });
 
+    const groupByKindSetting = getGroupIssuesByKindSetting();
+    const groupByKindSettingCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
+        groupByKindSetting, i18nString(UIStrings.groupDisplayedIssuesUnderKind), i18nString(UIStrings.groupByKind));
+    rightToolbar.appendToolbarItem(groupByKindSettingCheckbox);
+    groupByKindSetting.addChangeListener(() => {
+      this.fullUpdate(true);
+    });
+    groupByKindSettingCheckbox.setVisible(Root.Runtime.experiments.isEnabled('groupAndHideIssuesByKind'));
+
     const thirdPartySetting = IssuesManager.Issue.getShowThirdPartyIssuesSetting();
     this.showThirdPartyCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
         thirdPartySetting, i18nString(UIStrings.includeCookieIssuesCausedBy),
@@ -315,28 +336,45 @@ export class IssuesPane extends UI.Widget.VBox {
   }
 
   private getIssueViewParent(issue: AggregatedIssue): UI.TreeOutline.TreeOutline|UI.TreeOutline.TreeElement {
-    if (!getGroupIssuesByCategorySetting().get()) {
-      if (issue.isHidden()) {
-        return this.hiddenIssuesRow;
-      }
-      return this.issuesTree;
+    const groupByKind = Root.Runtime.experiments.isEnabled('groupAndHideIssuesByKind');
+    if (issue.isHidden()) {
+      return this.hiddenIssuesRow;
     }
+    if (groupByKind && getGroupIssuesByKindSetting().get()) {
+      const kind = issue.getKind();
+      const view = this.kindViews.get(kind);
+      if (view) {
+        return view;
+      }
 
-    const category = issue.getCategory();
-    const view = this.categoryViews.get(category);
-    if (view) {
-      return view;
+      const newView = new IssueKindView(kind);
+      this.issuesTree.appendChild(newView, (a, b) => {
+        if (a instanceof IssueKindView && b instanceof IssueKindView) {
+          return issueKindViewSortPriority(a, b);
+        }
+        return 0;
+      });
+      this.kindViews.set(kind, newView);
+      return newView;
     }
-
-    const newView = new IssueCategoryView(category);
-    this.issuesTree.appendChild(newView, (a, b) => {
-      if (a instanceof IssueCategoryView && b instanceof IssueCategoryView) {
-        return a.getCategoryName().localeCompare(b.getCategoryName());
+    if (getGroupIssuesByCategorySetting().get()) {
+      const category = issue.getCategory();
+      const view = this.categoryViews.get(category);
+      if (view) {
+        return view;
       }
-      return 0;
-    });
-    this.categoryViews.set(category, newView);
-    return newView;
+
+      const newView = new IssueCategoryView(category);
+      this.issuesTree.appendChild(newView, (a, b) => {
+        if (a instanceof IssueCategoryView && b instanceof IssueCategoryView) {
+          return a.getCategoryName().localeCompare(b.getCategoryName());
+        }
+        return 0;
+      });
+      this.categoryViews.set(category, newView);
+      return newView;
+    }
+    return this.issuesTree;
   }
 
   private clearViews<T>(views: Map<T, UI.TreeOutline.TreeElement>, preservedSet?: Set<T>): void {
@@ -355,6 +393,7 @@ export class IssuesPane extends UI.Widget.VBox {
 
   private fullUpdate(force: boolean): void {
     this.clearViews(this.categoryViews, force ? undefined : this.aggregator.aggregatedIssueCategories());
+    this.clearViews(this.kindViews, force ? undefined : this.aggregator.aggregatedIssueKinds());
     this.clearViews(this.issueViews, force ? undefined : this.aggregator.aggregatedIssueCodes());
     if (this.aggregator) {
       for (const issue of this.aggregator.aggregatedIssues()) {
@@ -364,9 +403,21 @@ export class IssuesPane extends UI.Widget.VBox {
     this.updateCounts();
   }
 
+  private updateIssueKindViewsCount(): void {
+    for (const view of this.kindViews.values()) {
+      const count =
+          this.issuesManager.numberOfIssues(view.getKind()) - this.issuesManager.numberOfHiddenIssues(view.getKind());
+      view.update(count);
+    }
+  }
+
   private updateCounts(): void {
+    const groupByKind = Root.Runtime.experiments.isEnabled('groupAndHideIssuesByKind');
     this.showIssuesTreeOrNoIssuesDetectedMessage(
         this.issuesManager.numberOfIssues(), this.issuesManager.numberOfHiddenIssues());
+    if (groupByKind && getGroupIssuesByKindSetting().get()) {
+      this.updateIssueKindViewsCount();
+    }
   }
 
   private showIssuesTreeOrNoIssuesDetectedMessage(issuesCount: number, hiddenIssueCount: number): void {
@@ -397,11 +448,17 @@ export class IssuesPane extends UI.Widget.VBox {
     await this.issueViewUpdatePromise;
     const key = this.aggregator.keyForIssue(issue);
     const issueView = this.issueViews.get(key);
+    const groupByKind = Root.Runtime.experiments.isEnabled('groupAndHideIssuesByKind');
     if (issueView) {
       if (issueView.isForHiddenIssue()) {
         this.hiddenIssuesRow.expand();
         this.hiddenIssuesRow.reveal();
       }
+      if (groupByKind && getGroupIssuesByKindSetting().get() && !issueView.isForHiddenIssue()) {
+        const kindView = this.kindViews.get(issueView.getIssueKind());
+        kindView?.expand();
+        kindView?.reveal();
+      }
       issueView.expand();
       issueView.reveal();
       issueView.select(false, true);

package/front_end/panels/issues/issuesTree.css

@@ -38,6 +38,7 @@
 }
 
 .issue-category,
+.issue-kind,
 .issue {
   padding: 0 8px;
   padding-left: var(--issue-indent);
@@ -48,7 +49,8 @@
   border-width: 0 0 1px;
 }
 
-.issue-category.hidden-issues.parent.expanded {
+.issue-category.hidden-issues.parent.expanded,
+.issue-kind.parent.expanded {
   border-width: 0 0 1px 0;
   background-color: var(--color-background-elevation-1);
 }
@@ -78,6 +80,7 @@ p {
 /* Override selected tree item styles for issues to avoid changing width. */
 
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue-category.selected:focus-visible,
+.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue-kind.selected:focus-visible,
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue.selected:focus-visible {
   width: auto;
   padding-right: 8px;
@@ -92,7 +95,8 @@ p {
   width: 100%;
 }
 
-.issue-category .header {
+.issue-category .header,
+.issue-kind .header {
   line-height: 24px;
   padding-left: 2px;
 }
@@ -118,7 +122,8 @@ p {
   padding-right: 8px;
 }
 
-.issue-category + .children {
+.issue-category + .children,
+.issue-kind + .children {
   --issue-indent: 24px;
 
   padding-left: 0;

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -288,7 +288,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
           },
           /* userGesture */ false, /* awaitPromise */ false);
       if ((!('exceptionDetails' in result) || !result.exceptionDetails) && 'object' in result && result.object) {
-        inspectedURL = result.object.value;
+        if (result.object.value) {
+          inspectedURL = result.object.value;
+        }
         result.object.release();
       }
     } catch (err) {

package/front_end/panels/network/networkLogView.css

@@ -401,6 +401,11 @@
   .network-status-pane > .recording-hint {
     color: canvastext;
   }
+
+  .initiator-column .devtools-link {
+    color: linktext;
+  }
+
   /* This is part of the large color block declared above, but should not be
    extracted out. */
   /* stylelint-disable no-descending-specificity */

package/front_end/panels/sensors/LocationsSettingsTab.ts

@@ -116,7 +116,7 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
     this.customSetting =
         Common.Settings.Settings.instance().moduleSetting<LocationDescription[]>('emulation.locations');
     const list =
-        this.customSetting.get().map(location => replaceLocationTitles(location, this.customSetting.defaultValue()));
+        this.customSetting.get().map(location => replaceLocationTitles(location, this.customSetting.defaultValue));
 
     function replaceLocationTitles(
         location: LocationDescription, defaultValues: LocationDescription[]): LocationDescription {

package/front_end/panels/settings/SettingsScreen.ts

@@ -121,6 +121,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
     this.tabbedLocation = UI.ViewManager.ViewManager.instance().createTabbedLocation(
         () => SettingsScreen.revealSettingsScreen(), 'settings-view');
     const tabbedPane = this.tabbedLocation.tabbedPane();
+    tabbedPane.registerCSSFiles([settingsScreenStyles]);
     tabbedPane.leftToolbar().appendToolbarItem(new UI.Toolbar.ToolbarItem(settingsLabelElement));
     tabbedPane.setShrinkableTabs(false);
     tabbedPane.makeVerticalTabLayout();

package/front_end/panels/settings/settingsScreen.css

@@ -187,3 +187,27 @@ fieldset {
 .settings-experiment-unstable {
   color: var(--color-text-secondary);
 }
+
+@media (forced-colors: active) {
+  .settings-window-title {
+    color: canvastext;
+  }
+
+  .tabbed-pane-header-tab {
+    background: ButtonFace;
+  }
+
+  .tabbed-pane-header-tab-title {
+    color: canvastext;
+  }
+}
+
+@media (forced-colors: active) and (prefers-color-scheme: dark) {
+  .tabbed-pane-header-tab.selected {
+    background: ButtonFace;
+  }
+
+  .tabbed-pane-header-tab.selected .tabbed-pane-header-tab-title {
+    color: HighlightText;
+  }
+}

package/front_end/ui/components/issue_counter/IssueLinkIcon.ts

@@ -163,6 +163,7 @@ export class IssueLinkIcon extends HTMLElement {
     // clang-format off
     return LitHtml.html`
       <span class=${LitHtml.Directives.classMap({'link': Boolean(this.issue)})}
+            tabindex="0"
             @click=${this.handleClick}>
         <${IconButton.Icon.Icon.litTagName} .data=${this.iconData() as IconButton.Icon.IconData}
           title=${this.getTooltip()}></${IconButton.Icon.Icon.litTagName}>

package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -197,6 +197,7 @@ export class RequestLinkIcon extends HTMLElement {
     // clang-format off
     return LitHtml.html`
       <span class=${LitHtml.Directives.classMap({'link': Boolean(this.request)})}
+            tabindex="0"
             @click=${this.handleClick}>
         <${IconButton.Icon.Icon.litTagName} .data=${this.iconData() as IconButton.Icon.IconData}
           title=${this.getTooltip()}></${IconButton.Icon.Icon.litTagName}>

package/front_end/ui/legacy/ARIAUtils.ts

@@ -462,23 +462,26 @@ function hideFromLayout(element: HTMLElement): void {
 
 let alertElement: HTMLElement|undefined;
 
-function createAriaAlertElement(): HTMLElement {
-  const element = document.body.createChild('div') as HTMLElement;
-  hideFromLayout(element);
-  element.setAttribute('role', 'alert');
-  element.setAttribute('aria-atomic', 'true');
-  return element;
+export function alertElementInstance(): HTMLElement {
+  if (!alertElement) {
+    const element = document.body.createChild('div') as HTMLElement;
+    hideFromLayout(element);
+    element.setAttribute('role', 'alert');
+    element.setAttribute('aria-atomic', 'true');
+    alertElement = element;
+  }
+  return alertElement;
 }
+
 /**
  * This function is used to announce a message with the screen reader.
  * Setting the textContent would allow the SR to access the offscreen element via browse mode
  */
 export function alert(message: string): void {
-  if (!alertElement) {
-    alertElement = createAriaAlertElement();
-  }
+  const element = alertElementInstance();
+
   // We first set the textContent to blank so that the string will announce even if it is replaced
   // with the same string.
-  alertElement.textContent = '';
-  alertElement.textContent = Platform.StringUtilities.trimEndWithMaxLength(message, 10000);
+  element.textContent = '';
+  element.textContent = Platform.StringUtilities.trimEndWithMaxLength(message, 10000);
 }

package/front_end/ui/legacy/UIUtils.ts

@@ -344,7 +344,9 @@ export function isEditing(): boolean {
   if (!focused) {
     return false;
   }
-  return focused.classList.contains('text-prompt') || focused.nodeName === 'INPUT' || focused.nodeName === 'TEXTAREA';
+  return focused.classList.contains('text-prompt') || focused.nodeName === 'INPUT' || focused.nodeName === 'TEXTAREA' ||
+      ((focused as HTMLElement).contentEditable === 'true' ||
+       (focused as HTMLElement).contentEditable === 'plaintext-only');
 }
 
 export function markBeingEdited(element: Element, value: boolean): boolean {

package/front_end/ui/legacy/closeButton.css

@@ -43,3 +43,9 @@
 .close-button:active .active-icon {
   display: block;
 }
+
+@media (forced-colors: active) and (prefers-color-scheme: dark) {
+  .close-button {
+    filter: brightness(100);
+  }
+}

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.928081"
+  "version": "1.0.928589"
 }