chrome-devtools-frontend 1.0.942095 → 1.0.943709

package/front_end/ui/legacy/SearchableView.ts

@@ -39,6 +39,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import {HistoryInput} from './HistoryInput.js';
 import {InspectorView} from './InspectorView.js';
+import searchableViewStyles from './searchableView.css.legacy.js';
 import {Toolbar, ToolbarButton, ToolbarToggle} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {createTextButton} from './UIUtils.js';
@@ -123,7 +124,7 @@ export class SearchableView extends VBox {
 
   constructor(searchable: Searchable, replaceable: Replaceable|null, settingName?: string) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/searchableView.css');
+    this.registerRequiredCSS(searchableViewStyles);
     searchableViewsByElement.set(this.element, this);
 
     this.searchProvider = searchable;

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -35,8 +35,9 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import {AnchorBehavior, GlassPane, MarginBehavior, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import {Icon} from './Icon.js';
-import * as ThemeSupport from './theme_support/theme_support.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as ThemeSupport from './theme_support/theme_support.js';
 import {createTextChild, ElementFocusRestorer} from './UIUtils.js';
+import softContextMenuStyles from './softContextMenu.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -101,7 +102,7 @@ export class SoftContextMenu {
     this.glassPane = new GlassPane();
     this.glassPane.setPointerEventsBehavior(
         this.parentMenu ? PointerEventsBehavior.PierceGlassPane : PointerEventsBehavior.BlockedByGlassPane);
-    this.glassPane.registerRequiredCSS('ui/legacy/softContextMenu.css');
+    this.glassPane.registerRequiredCSS(softContextMenuStyles);
     this.glassPane.setContentAnchorBox(anchorBox);
     this.glassPane.setSizeBehavior(SizeBehavior.MeasureContent);
     this.glassPane.setMarginBehavior(MarginBehavior.NoMargin);

package/front_end/ui/legacy/SoftDropDown.ts

@@ -14,6 +14,8 @@ import type {ListDelegate} from './ListControl.js';
 import {ListControl, ListMode} from './ListControl.js';
 import type {ItemsReplacedEvent, ListModel} from './ListModel.js';
 import {Events as ListModelEvents} from './ListModel.js';
+import softDropDownStyles from './softDropDown.css.legacy.js';
+import softDropDownButtonStyles from './softDropDownButton.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -46,7 +48,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
 
     this.element = document.createElement('button');
     this.element.classList.add('soft-dropdown');
-    Utils.appendStyle(this.element, 'ui/legacy/softDropDownButton.css');
+    Utils.appendStyle(this.element, softDropDownButtonStyles);
     this.titleElement = this.element.createChild('span', 'title');
     const dropdownArrowIcon = Icon.create('smallicon-triangle-down');
     this.element.appendChild(dropdownArrowIcon);
@@ -63,7 +65,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
     this.width = 315;
     Utils
         .createShadowRootWithCoreStyles(this.glassPane.contentElement, {
-          cssFile: 'ui/legacy/softDropDown.css',
+          cssFile: softDropDownStyles,
           delegatesFocus: undefined,
         })
         .appendChild(this.list.element);

package/front_end/ui/legacy/SplitWidget.ts

@@ -37,6 +37,7 @@ import {Events as ResizerWidgetEvents, SimpleResizerWidget} from './ResizerWidge
 import {ToolbarButton} from './Toolbar.js';
 import {Widget} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
+import splitWidgetStyles from './splitWidget.css.legacy.js';
 
 export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
   private sidebarElementInternal: HTMLElement;
@@ -77,7 +78,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       defaultSidebarHeight?: number, constraintsInDip?: boolean) {
     super(true);
     this.element.classList.add('split-widget');
-    this.registerRequiredCSS('ui/legacy/splitWidget.css');
+    this.registerRequiredCSS(splitWidgetStyles);
 
     this.contentElement.classList.add('shadow-split-widget');
     this.sidebarElementInternal =

package/front_end/ui/legacy/SuggestBox.ts

@@ -41,6 +41,7 @@ import type {ListDelegate} from './ListControl.js';
 import {ListControl, ListMode} from './ListControl.js';
 import {ListModel} from './ListModel.js';
 import {measurePreferredSize} from './UIUtils.js';
+import suggestBoxStyles from './suggestBox.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -107,7 +108,7 @@ export class SuggestBox implements ListDelegate<Suggestion> {
     this.glassPane.setAnchorBehavior(AnchorBehavior.PreferBottom);
     this.glassPane.setOutsideClickCallback(this.hide.bind(this));
     const shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.glassPane.contentElement, {cssFile: 'ui/legacy/suggestBox.css', delegatesFocus: undefined});
+        this.glassPane.contentElement, {cssFile: suggestBoxStyles, delegatesFocus: undefined});
     shadowRoot.appendChild(this.element);
   }
 

package/front_end/ui/legacy/TabbedPane.ts

@@ -43,6 +43,7 @@ import {installDragHandle, invokeOnceAfterBatchUpdate} from './UIUtils.js';
 import type {Widget} from './Widget.js';
 import {VBox} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
+import tabbedPaneStyles from './tabbedPane.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -110,7 +111,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   constructor() {
     super(true);
-    this.registerRequiredCSS('ui/legacy/tabbedPane.css');
+    this.registerRequiredCSS(tabbedPaneStyles);
     this.element.classList.add('tabbed-pane');
     this.contentElement.classList.add('tabbed-pane-shadow');
     this.contentElement.tabIndex = -1;

package/front_end/ui/legacy/TargetCrashedScreen.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 
+import targetCrashedScreenStyles from './targetCrashedScreen.css.legacy.js';
 import {VBox} from './Widget.js';
 
 const UIStrings = {
@@ -22,7 +23,7 @@ export class TargetCrashedScreen extends VBox {
   private readonly hideCallback: () => void;
   constructor(hideCallback: () => void) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/targetCrashedScreen.css');
+    this.registerRequiredCSS(targetCrashedScreenStyles);
     this.contentElement.createChild('div', 'message').textContent =
         i18nString(UIStrings.devtoolsWasDisconnectedFromThe);
     this.contentElement.createChild('div', 'message').textContent =

package/front_end/ui/legacy/TextPrompt.ts

@@ -43,6 +43,7 @@ import type {SuggestBoxDelegate, Suggestion} from './SuggestBox.js';
 import {SuggestBox} from './SuggestBox.js';
 import {Tooltip} from './Tooltip.js';
 import {ElementFocusRestorer} from './UIUtils.js';
+import textPromptStyles from './textPrompt.css.legacy.js';
 
 export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements SuggestBoxDelegate {
   private proxyElement!: HTMLElement|undefined;
@@ -135,7 +136,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     this.boundOnMouseWheel = this.onMouseWheel.bind(this);
     this.boundClearAutocomplete = this.clearAutocomplete.bind(this);
     this.proxyElement = element.ownerDocument.createElement('span');
-    Utils.appendStyle(this.proxyElement, 'ui/legacy/textPrompt.css');
+    Utils.appendStyle(this.proxyElement, textPromptStyles);
     this.contentElement = this.proxyElement.createChild('div', 'text-prompt-root');
     this.proxyElement.style.display = this.proxyElementDisplay;
     if (element.parentElement) {

package/front_end/ui/legacy/Toolbar.ts

@@ -46,6 +46,7 @@ import type {Suggestion} from './SuggestBox.js';
 import {Events as TextPromptEvents, TextPrompt} from './TextPrompt.js';
 import {Tooltip} from './Tooltip.js';
 import {CheckboxLabel, LongClickController} from './UIUtils.js';
+import toolbarStyles from './toolbar.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -75,8 +76,8 @@ export class Toolbar {
     this.element.className = className;
     this.element.classList.add('toolbar');
     this.enabled = true;
-    this.shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.element, {cssFile: 'ui/legacy/toolbar.css', delegatesFocus: undefined});
+    this.shadowRoot =
+        Utils.createShadowRootWithCoreStyles(this.element, {cssFile: toolbarStyles, delegatesFocus: undefined});
     this.contentElement = this.shadowRoot.createChild('div', 'toolbar-shadow');
     this.insertionPoint = this.contentElement.createChild('slot');
   }

package/front_end/ui/legacy/Treeoutline.ts

@@ -45,6 +45,7 @@ import {InplaceEditor} from './InplaceEditor.js';
 import {Keys} from './KeyboardShortcut.js';
 import {Tooltip} from './Tooltip.js';
 import {deepElementFromPoint, enclosingNodeOrSelfWithNodeNameInArray, isEditing} from './UIUtils.js';
+import treeoutlineStyles from './treeoutline.css.legacy.js';
 
 const nodeToParentTreeElementMap = new WeakMap<Node, TreeElement>();
 
@@ -391,14 +392,14 @@ export class TreeOutlineInShadow extends TreeOutline {
     super();
     this.contentElement.classList.add('tree-outline');
     this.element = document.createElement('div');
-    this.shadowRoot = Utils.createShadowRootWithCoreStyles(
-        this.element, {cssFile: 'ui/legacy/treeoutline.css', delegatesFocus: undefined});
+    this.shadowRoot =
+        Utils.createShadowRootWithCoreStyles(this.element, {cssFile: treeoutlineStyles, delegatesFocus: undefined});
     this.disclosureElement = this.shadowRoot.createChild('div', 'tree-outline-disclosure');
     this.disclosureElement.appendChild(this.contentElement);
     this.renderSelection = true;
   }
 
-  registerRequiredCSS(cssFile: string): void {
+  registerRequiredCSS(cssFile: string|{cssContent: string}): void {
     Utils.appendStyle(this.shadowRoot, cssFile);
   }
 

package/front_end/ui/legacy/UIUtils.ts

@@ -46,13 +46,20 @@ import {Size} from './Geometry.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import {Icon} from './Icon.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
-import * as ThemeSupport from './theme_support/theme_support.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as ThemeSupport from './theme_support/theme_support.js';
 import * as Utils from './utils/utils.js';
 
 import type {ToolbarButton} from './Toolbar.js';
 import {Toolbar} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import type {TreeOutline} from './Treeoutline.js';
+import checkboxTextLabelStyles from './checkboxTextLabel.css.legacy.js';
+import closeButtonStyles from './closeButton.css.legacy.js';
+import confirmDialogStyles from './confirmDialog.css.legacy.js';
+import inlineButtonStyles from './inlineButton.css.legacy.js';
+import radioButtonStyles from './radioButton.css.legacy.js';
+import sliderStyles from './slider.css.legacy.js';
+import smallBubbleStyles from './smallBubble.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -1186,8 +1193,8 @@ export class CheckboxLabel extends HTMLSpanElement {
     super();
     CheckboxLabel.lastId = CheckboxLabel.lastId + 1;
     const id = 'ui-checkbox-label' + CheckboxLabel.lastId;
-    this.shadowRootInternal = Utils.createShadowRootWithCoreStyles(
-        this, {cssFile: 'ui/legacy/checkboxTextLabel.css', delegatesFocus: undefined});
+    this.shadowRootInternal =
+        Utils.createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles, delegatesFocus: undefined});
     this.checkboxElement = (this.shadowRootInternal.createChild('input') as HTMLInputElement);
     this.checkboxElement.type = 'checkbox';
     this.checkboxElement.setAttribute('id', id);
@@ -1268,8 +1275,7 @@ export class DevToolsRadioButton extends HTMLSpanElement {
     this.radioElement.id = id;
     this.radioElement.type = 'radio';
     this.labelElement.htmlFor = id;
-    const root =
-        Utils.createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/radioButton.css', delegatesFocus: undefined});
+    const root = Utils.createShadowRootWithCoreStyles(this, {cssFile: radioButtonStyles, delegatesFocus: undefined});
     root.createChild('slot');
     this.addEventListener('click', this.radioClickHandler.bind(this), false);
   }
@@ -1291,8 +1297,7 @@ export class DevToolsSlider extends HTMLSpanElement {
 
   constructor() {
     super();
-    const root =
-        Utils.createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/slider.css', delegatesFocus: undefined});
+    const root = Utils.createShadowRootWithCoreStyles(this, {cssFile: sliderStyles, delegatesFocus: undefined});
     this.sliderElement = document.createElement('input');
     this.sliderElement.classList.add('dt-range-input');
     this.sliderElement.type = 'range';
@@ -1315,8 +1320,7 @@ export class DevToolsSmallBubble extends HTMLSpanElement {
 
   constructor() {
     super();
-    const root =
-        Utils.createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/smallBubble.css', delegatesFocus: undefined});
+    const root = Utils.createShadowRootWithCoreStyles(this, {cssFile: smallBubbleStyles, delegatesFocus: undefined});
     this.textElement = root.createChild('div');
     this.textElement.className = 'info';
     this.textElement.createChild('slot');
@@ -1336,8 +1340,7 @@ export class DevToolsCloseButton extends HTMLDivElement {
 
   constructor() {
     super();
-    const root =
-        Utils.createShadowRootWithCoreStyles(this, {cssFile: 'ui/legacy/closeButton.css', delegatesFocus: undefined});
+    const root = Utils.createShadowRootWithCoreStyles(this, {cssFile: closeButtonStyles, delegatesFocus: undefined});
     this.buttonElement = (root.createChild('div', 'close-button') as HTMLElement);
     Tooltip.install(this.buttonElement, i18nString(UIStrings.close));
     ARIAUtils.setAccessibleName(this.buttonElement, i18nString(UIStrings.close));
@@ -1566,7 +1569,7 @@ export class MessageDialog {
     dialog.setSizeBehavior(SizeBehavior.MeasureContent);
     dialog.setDimmed(true);
     const shadowRoot = Utils.createShadowRootWithCoreStyles(
-        dialog.contentElement, {cssFile: 'ui/legacy/confirmDialog.css', delegatesFocus: undefined});
+        dialog.contentElement, {cssFile: confirmDialogStyles, delegatesFocus: undefined});
     const content = shadowRoot.createChild('div', 'widget');
     await new Promise(resolve => {
       const okButton = createTextButton(i18nString(UIStrings.ok), resolve, '', true);
@@ -1590,7 +1593,7 @@ export class ConfirmDialog {
     dialog.setDimmed(true);
     ARIAUtils.setAccessibleName(dialog.contentElement, message);
     const shadowRoot = Utils.createShadowRootWithCoreStyles(
-        dialog.contentElement, {cssFile: 'ui/legacy/confirmDialog.css', delegatesFocus: undefined});
+        dialog.contentElement, {cssFile: confirmDialogStyles, delegatesFocus: undefined});
     const content = shadowRoot.createChild('div', 'widget');
     content.createChild('div', 'message').createChild('span').textContent = message;
     const buttonsBar = content.createChild('div', 'button');
@@ -1615,7 +1618,7 @@ export class ConfirmDialog {
 export function createInlineButton(toolbarButton: ToolbarButton): Element {
   const element = document.createElement('span');
   const shadowRoot =
-      Utils.createShadowRootWithCoreStyles(element, {cssFile: 'ui/legacy/inlineButton.css', delegatesFocus: undefined});
+      Utils.createShadowRootWithCoreStyles(element, {cssFile: inlineButtonStyles, delegatesFocus: undefined});
   element.classList.add('inline-button');
   const toolbar = new Toolbar('');
   toolbar.appendToolbarItem(toolbarButton);

package/front_end/ui/legacy/ViewManager.ts

@@ -18,6 +18,7 @@ import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from
 import {getRegisteredLocationResolvers, getRegisteredViewExtensions, maybeRemoveViewExtension, registerLocationResolver, registerViewExtension, ViewLocationCategoryValues, ViewLocationValues, ViewPersistence, ViewRegistration} from './ViewRegistration.js';
 import type {Widget, WidgetElement} from './Widget.js';
 import {VBox} from './Widget.js';
+import viewContainersStyles from './viewContainers.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -418,7 +419,7 @@ export class _ExpandableContainerWidget extends VBox {
   constructor(view: View) {
     super(true);
     this.element.classList.add('flex-none');
-    this.registerRequiredCSS('ui/legacy/viewContainers.css');
+    this.registerRequiredCSS(viewContainersStyles);
 
     this.titleElement = document.createElement('div');
     this.titleElement.classList.add('expandable-view-title');

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -222,8 +222,7 @@ export class CSSAngle extends HTMLElement {
             .data=${{
               angle: this.angle,
             } as CSSAngleSwatchData}>
-          </${CSSAngleSwatch.litTagName}><slot></slot>
-        </div>
+          </${CSSAngleSwatch.litTagName}><slot></slot></div>
         ${this.popoverOpen ? this.renderPopover() : null}
       </div>
     `, this.shadow, {

package/front_end/ui/legacy/components/inline_editor/cssAngle.css

@@ -22,3 +22,7 @@ devtools-css-angle-editor {
   position: fixed;
   z-index: 2;
 }
+
+.preview {
+  display: inline-block;
+}

package/front_end/ui/legacy/components/object_ui/JavaScriptREPL.ts

@@ -36,7 +36,7 @@ export class JavaScriptREPL {
 
   static async evaluateAndBuildPreview(
       text: string, throwOnSideEffect: boolean, replMode: boolean, timeout?: number, allowErrors?: boolean,
-      objectGroup?: string): Promise<{
+      objectGroup?: string, awaitPromise: boolean = false): Promise<{
     preview: DocumentFragment,
     result: SDK.RuntimeModel.EvaluationResult|null,
   }> {
@@ -60,7 +60,7 @@ export class JavaScriptREPL {
       returnByValue: undefined,
       allowUnsafeEvalBlockedByCSP: undefined,
     };
-    const result = await executionContext.evaluate(options, false /* userGesture */, false /* awaitPromise */);
+    const result = await executionContext.evaluate(options, false /* userGesture */, awaitPromise);
     const preview = JavaScriptREPL.buildEvaluationPreview(result, allowErrors);
     return {preview, result};
   }

package/front_end/ui/legacy/components/object_ui/object_ui-meta.ts

@@ -2,19 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../../../core/root/root.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as UI from '../../legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as ObjectUI from './object_ui.js';
 
 let loadedObjectUIModule: (typeof ObjectUI|undefined);
 
 async function loadObjectUIModule(): Promise<typeof ObjectUI> {
   if (!loadedObjectUIModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('ui/legacy/components/object_ui');
     loadedObjectUIModule = await import('./object_ui.js');
   }
   return loadedObjectUIModule;

package/front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts

@@ -7,7 +7,6 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Root from '../../../../core/root/root.js';
 import * as UI from '../../legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as PerfUI from './perf_ui.js';
 
 const UIStrings = {
@@ -51,8 +50,6 @@ let loadedPerfUIModule: (typeof PerfUI|undefined);
 
 async function loadPerfUIModule(): Promise<typeof PerfUI> {
   if (!loadedPerfUIModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('perf_ui');
     loadedPerfUIModule = await import('./perf_ui.js');
   }
   return loadedPerfUIModule;

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -113,7 +113,7 @@ devtools-text-prompt {
 }
 
 .filtered-list-widget-item .filtered-list-widget-title {
-  flex: auto;
+  flex: initial;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -194,7 +194,7 @@ devtools-text-prompt {
 }
 
 .filtered-list-widget-item.one-row .filtered-list-widget-title {
-  flex: none;
+  padding-right: 8px;
 }
 
 .filtered-list-widget-item.two-rows {

package/front_end/ui/legacy/components/quick_open/quick_open-meta.ts

@@ -5,6 +5,8 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as UI from '../../legacy.js';
 
+import type * as QuickOpen from './quick_open.js';
+
 const UIStrings = {
   /**
   *@description Title of action that opens a file
@@ -18,9 +20,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/quick_open-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-// eslint-disable-next-line rulesdir/es_modules_import
-import type * as QuickOpen from './quick_open.js';
-
 let loadedQuickOpenModule: (typeof QuickOpen|undefined);
 
 async function loadQuickOpenModule(): Promise<typeof QuickOpen> {

package/front_end/ui/legacy/components/source_frame/FontView.ts

@@ -35,6 +35,8 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as UI from '../../legacy.js';
 
+import fontViewStyles from './fontView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Text that appears on a button for the font resource type filter.
@@ -59,7 +61,8 @@ export class FontView extends UI.View.SimpleView {
   private inResize!: boolean|null;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.font));
-    this.registerRequiredCSS('ui/legacy/components/source_frame/fontView.css');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
+    this.registerRequiredCSS(fontViewStyles);
     this.element.classList.add('font-view');
     this.url = contentProvider.contentURL();
     UI.ARIAUtils.setAccessibleName(this.element, i18nString(UIStrings.previewOfFontFromS, {PH1: this.url}));

package/front_end/ui/legacy/components/source_frame/ImageView.ts

@@ -38,6 +38,8 @@ import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as UI from '../../legacy.js';
 
+import imageViewStyles from './imageView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Text in Image View of the Sources panel
@@ -96,7 +98,8 @@ export class ImageView extends UI.View.SimpleView {
   private cachedContent?: string|null;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.image));
-    this.registerRequiredCSS('ui/legacy/components/source_frame/imageView.css');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
+    this.registerRequiredCSS(imageViewStyles);
     this.element.tabIndex = -1;
     this.element.classList.add('image-view');
     this.url = contentProvider.contentURL();

package/front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -34,6 +34,8 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as UI from '../../legacy.js';
 import * as ObjectUI from '../object_ui/object_ui.js';
 
+import jsonViewStyles from './jsonView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Text to find an item
@@ -54,7 +56,8 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
   constructor(parsedJSON: ParsedJSON, startCollapsed?: boolean) {
     super();
     this.initialized = false;
-    this.registerRequiredCSS('ui/legacy/components/source_frame/jsonView.css');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
+    this.registerRequiredCSS(jsonViewStyles);
     this.parsedJSON = parsedJSON;
     this.startCollapsed = Boolean(startCollapsed);
     this.element.classList.add('json-view');

package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts

@@ -37,6 +37,7 @@ import * as UI from '../../legacy.js';
 
 import type {SourceFrameOptions} from './SourceFrame.js';
 import {SourceFrameImpl} from './SourceFrame.js';
+import resourceSourceFrameStyles from './resourceSourceFrame.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -83,7 +84,8 @@ export class SearchableContainer extends UI.Widget.VBox {
 
   constructor(resource: TextUtils.ContentProvider.ContentProvider, contentType: string, autoPrettyPrint?: boolean) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/source_frame/resourceSourceFrame.css');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
+    this.registerRequiredCSS(resourceSourceFrameStyles);
     const sourceFrame = new ResourceSourceFrame(resource, contentType);
     this.sourceFrame = sourceFrame;
     const canPrettyPrint =

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -159,6 +159,11 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.textEditorInternal = new TextEditor.TextEditor.TextEditor(this.placeholderEditorState(''));
     this.textEditorInternal.style.flexGrow = '1';
     this.element.appendChild(this.textEditorInternal);
+    this.element.addEventListener('keydown', (event: KeyboardEvent): void => {
+      if (event.defaultPrevented) {
+        event.stopPropagation();
+      }
+    });
 
     this.baseDoc = this.textEditorInternal.state.doc;
 
@@ -246,7 +251,6 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
               }),
       activeSearchState,
       CodeMirror.Prec.lowest(searchHighlighter),
-      config.lineNumbers.of([]),
       config.language.of([]),
       this.wasmDisassemblyInternal ? markNonBreakableLines(this.wasmDisassemblyInternal) : nonBreakableLines,
       this.options.lineWrapping ? CodeMirror.EditorView.lineWrapping : [],
@@ -708,7 +712,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       extensions: [
         this.editorConfiguration(content),
         languageSupport,
-        this.getLineNumberFormatter(),
+        config.lineNumbers.of(this.getLineNumberFormatter()),
         config.editable.of(this.editable ? [] : CodeMirror.EditorState.readOnly.of(true)),
       ],
     });
@@ -717,7 +721,6 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (wasLoaded) {
       textEditor.editor.scrollDOM.scrollTop = scrollTop;
     }
-    this.editorInitialized();
     this.wasShownOrLoaded();
 
     if (this.delayedFindSearchMatches) {
@@ -727,9 +730,6 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.muteChangeEventsForSetContent = false;
   }
 
-  protected editorInitialized(): void {
-  }
-
   setSearchableView(view: UI.SearchableView.SearchableView|null): void {
     this.searchableView = view;
   }

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -7,6 +7,9 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as UI from '../../legacy.js';
 
+import xmlTreeStyles from './xmlTree.css.legacy.js';
+import xmlViewStyles from './xmlView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Text to find an item
@@ -25,10 +28,12 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
 
   constructor(parsedXML: Document) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/source_frame/xmlView.css');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
+    this.registerRequiredCSS(xmlViewStyles);
     this.contentElement.classList.add('shadow-xml-view', 'source-code');
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    this.treeOutline.registerRequiredCSS('ui/legacy/components/source_frame/xmlTree.css');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
+    this.treeOutline.registerRequiredCSS(xmlTreeStyles);
     this.contentElement.appendChild(this.treeOutline.element);
     this.currentSearchFocusIndex = 0;
     this.currentSearchTreeElements = [];

package/front_end/ui/legacy/components/text_editor/CodeMirrorTextEditor.ts

@@ -93,7 +93,9 @@ export class CodeMirrorTextEditor extends
     super();
     this.options = options;
 
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS('third_party/codemirror/codemirror.css');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS('ui/legacy/components/text_editor/cmdevtools.css');
 
     const {indentWithTabs, indentUnit} = CodeMirrorTextEditor.getIndentation(

package/front_end/ui/legacy/components/text_editor/module.json

@@ -1,7 +1,4 @@
 {
-  "dependencies": [
-    "ui/legacy"
-  ],
   "resources": [
     "../../../../third_party/codemirror/codemirror.css",
     "autocompleteTooltip.css",

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -227,21 +227,13 @@ export class Linkifier implements SDK.TargetManager.Observer {
       return fallbackAnchor;
     }
 
-    let rawLocation;
-    if (scriptId) {
-      rawLocation = debuggerModel.createRawLocationByScriptId(
-          scriptId, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex);
-    }
-    // The function createRawLocationByScriptId will always return a raw location. Normally
-    // we rely on the live location that is created from it to update missing information
-    // to create the link. If we, however, already have a similar script with the same source url,
-    // use that one.
-    if (!rawLocation?.script()) {
-      rawLocation = debuggerModel.createRawLocationByURL(
-                        sourceURL, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex) ||
-          rawLocation;
-    }
-
+    // Prefer createRawLocationByScriptId() here, since it will always produce a correct
+    // link, since the script ID is unique. Only fall back to createRawLocationByURL()
+    // when all we have is an URL, which is not guaranteed to be unique.
+    const rawLocation = scriptId ? debuggerModel.createRawLocationByScriptId(
+                                       scriptId, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex) :
+                                   debuggerModel.createRawLocationByURL(
+                                       sourceURL, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex);
     if (!rawLocation) {
       return fallbackAnchor;
     }