chrome-devtools-frontend 1.0.943017 → 1.0.943182

package/front_end/panels/sources/sources-meta.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 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 SDK from '../../core/sdk/sdk.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -10,10 +11,8 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Sources from './sources.js';
 
-import * as i18n from '../../core/i18n/i18n.js';
 const UIStrings = {
   /**
   *@description Command for showing the 'Sources' tool

package/front_end/panels/timeline/timeline-meta.ts

@@ -4,13 +4,11 @@
 
 import * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type * as Profiler from '../profiler/profiler.js';
+import * as i18n from '../../core/i18n/i18n.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Timeline from './timeline.js';
 
-import type * as Profiler from '../profiler/profiler.js';
-
-import * as i18n from '../../core/i18n/i18n.js';
 const UIStrings = {
   /**
   *@description Text for the performance of something

package/front_end/panels/web_audio/web_audio-meta.ts

@@ -5,7 +5,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as WebAudio from './web_audio.js';
 
 const UIStrings = {

package/front_end/panels/webauthn/webauthn-meta.ts

@@ -6,7 +6,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Webauthn from './webauthn.js';
 
 const UIStrings = {

package/front_end/ui/components/docs/component_docs.ts

@@ -12,3 +12,17 @@ import * as ToggleFonts from './toggle_fonts.js';
 ToggleDarkMode.init();
 CreateBreadcrumbs.init();
 ToggleFonts.init();
+
+// This can be used by tests to hide the UI elements that are part of the component docs interface.
+// E.g., this is useful for screenshot tests.
+window.addEventListener('hidecomponentdocsui', () => {
+  for (const node of document.querySelectorAll('.component-docs-ui')) {
+    (node as HTMLElement).style.display = 'none';
+  }
+});
+
+window.addEventListener('showcomponentdocsui', () => {
+  for (const node of document.querySelectorAll('.component-docs-ui')) {
+    (node as HTMLElement).style.display = '';
+  }
+});

package/front_end/ui/components/docs/create_breadcrumbs.ts

@@ -32,7 +32,7 @@ export function init(): void {
     }
   </style>
 
-  <ul class="docs-breadcrumbs">
+  <ul class="docs-breadcrumbs component-docs-ui">
     <li><a href="/">Index</a></li>
     <li><a href=".">All component examples</a></li>
   </ul>`, container);

package/front_end/ui/components/docs/toggle_dark_mode.ts

@@ -16,6 +16,7 @@ export function init(): void {
   window.addEventListener('load', () => {
     const button = document.createElement('button');
     button.innerText = 'Toggle light/dark mode';
+    button.className = 'component-docs-ui';
 
     button.style.position = 'fixed';
     button.style.bottom = '10px';

package/front_end/ui/components/docs/toggle_fonts.ts

@@ -14,6 +14,7 @@ export function init(): void {
   // we want a single font-family to be used by the tests.
   if (urlParams.has('fontFamily')) {
     const div = document.createElement('div');
+    div.className = 'component-docs-ui';
     div.style.position = 'fixed';
     div.style.bottom = '10px';
     div.style.right = '230px';
@@ -30,6 +31,7 @@ export function init(): void {
 
   document.body.classList.add(PLATFORM_LINUX_CLASS);
   const button = document.createElement('button');
+  button.className = 'component-docs-ui';
 
   const loop = [
     PLATFORM_LINUX_CLASS,

package/front_end/ui/components/helpers/get-stylesheet.ts

@@ -42,5 +42,4 @@ export function legacyGetStyleSheets(path: string): CSSStyleSheet[] {
  */
 export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
   'panels/application/serviceWorkerUpdateCycleView.css',
-  'ui/legacy/components/source_frame/jsonView.css',
 ];

package/front_end/ui/components/linear_memory_inspector/linear_memory_inspector-meta.ts

@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as UI from '../../legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as LinearMemoryInspector from './linear_memory_inspector.js';
 
-import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {
   /**
   *@description Title of the Linear Memory Inspector tool

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -10,7 +10,7 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import treeOutlineStyles from './treeOutline.css.js';
 
-import type {TreeNode, TreeNodeWithChildren} from './TreeOutlineUtils.js';
+import type {TreeNodeId, TreeNode, TreeNodeWithChildren} from './TreeOutlineUtils.js';
 import {findNextNodeForTreeOutlineKeyboardNavigation, getNodeChildren, getPathToTreeNode, isExpandableNode, trackDOMNodeToTreeNode} from './TreeOutlineUtils.js';
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
@@ -24,6 +24,7 @@ export interface TreeOutlineData<TreeNodeDataType> {
    * cause issues in the TreeOutline.
    */
   tree: readonly TreeNode<TreeNodeDataType>[];
+  filter?: (node: TreeNodeDataType) => FilterOption;
 }
 
 export function defaultRenderer(node: TreeNode<string>): LitHtml.TemplateResult {
@@ -66,6 +67,19 @@ export class ItemMouseOutEvent<TreeNodeDataType> extends Event {
   }
 }
 
+/**
+ *
+ * The tree can be filtered by providing a custom filter function.
+ * The filter is applied on every node when constructing the tree
+ * and proceeds as follows:
+ * - If the filter return SHOW for a node, the node is included in the tree.
+ * - If the filter returns FLATTEN, the node is ignored but its subtree is included.
+ */
+export const enum FilterOption {
+  SHOW = 'SHOW',
+  FLATTEN = 'FLATTEN',
+}
+
 export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-tree-outline`;
   private readonly shadow = this.attachShadow({mode: 'open'});
@@ -79,7 +93,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * know for sure when that node will be rendered. This variable tracks the
    * node that we want focused but may not yet have been rendered.
    */
-  private nodePendingFocus: TreeNode<TreeNodeDataType>|null = null;
+  private nodeIdPendingFocus: TreeNodeId|null = null;
   private selectedTreeNode: TreeNode<TreeNodeDataType>|null = null;
   private defaultRenderer =
       (node: TreeNode<TreeNodeDataType>, _state: {isExpanded: boolean}): LitHtml.TemplateResult => {
@@ -91,6 +105,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         }
         return LitHtml.html`${String(node.treeNodeData)}`;
       };
+  private nodeFilter?: ((node: TreeNodeDataType) => FilterOption);
 
   /**
    * scheduledRender = render() has been called and scheduled a render.
@@ -134,6 +149,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   set data(data: TreeOutlineData<TreeNodeDataType>) {
     this.defaultRenderer = data.defaultRenderer;
     this.treeData = data.tree;
+    this.nodeFilter = data.filter;
     if (!this.hasRenderedAtLeastOnce) {
       this.selectedTreeNode = this.treeData[0];
     }
@@ -154,10 +170,17 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * Takes a TreeNode, expands the outline to reveal it, and focuses it.
    */
   async expandToAndSelectTreeNode(targetTreeNode: TreeNode<TreeNodeDataType>): Promise<void> {
-    const pathToTreeNode = await getPathToTreeNode(this.treeData, targetTreeNode);
+    return this.expandToAndSelectTreeNodeId(targetTreeNode.id);
+  }
+
+  /**
+   * Takes a TreeNode ID, expands the outline to reveal it, and focuses it.
+   */
+  async expandToAndSelectTreeNodeId(targetTreeNodeId: TreeNodeId): Promise<void> {
+    const pathToTreeNode = await getPathToTreeNode(this.treeData, targetTreeNodeId);
 
     if (pathToTreeNode === null) {
-      throw new Error(`Could not find node with id ${targetTreeNode.id} in the tree.`);
+      throw new Error(`Could not find node with id ${targetTreeNodeId} in the tree.`);
     }
     pathToTreeNode.forEach((node, index) => {
       // We don't expand the very last node, which was the target node.
@@ -167,10 +190,26 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     });
 
     // Mark the node as pending focus so when it is rendered into the DOM we can focus it
-    this.nodePendingFocus = targetTreeNode;
+    this.nodeIdPendingFocus = targetTreeNodeId;
     await this.render();
   }
 
+  /**
+   * Takes a list of TreeNode IDs and expands the corresponding nodes.
+   */
+  expandNodeIds(nodeIds: TreeNodeId[]): Promise<void> {
+    nodeIds.forEach(id => this.nodeExpandedMap.set(id, true));
+    return this.render();
+  }
+
+  /**
+   * Takes a TreeNode ID and focuses the corresponding node.
+   */
+  focusNodeId(nodeId: TreeNodeId): Promise<void> {
+    this.nodeIdPendingFocus = nodeId;
+    return this.render();
+  }
+
   async collapseChildrenOfNode(domNode: HTMLLIElement): Promise<void> {
     const treeNode = this.domNodeToTreeNodeMap.get(domNode);
     if (!treeNode) {
@@ -208,7 +247,22 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private async fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
-    return getNodeChildren(node);
+    const children = await getNodeChildren(node);
+    if (!this.nodeFilter) {
+      return children;
+    }
+    const filteredChildren = [];
+    for (const child of children) {
+      const filtering = this.nodeFilter(child.treeNodeData);
+      // We always include the selected node in the tree, regardless of its filtering status.
+      if (filtering === FilterOption.SHOW || this.isSelectedNode(child) || child.id === this.nodeIdPendingFocus) {
+        filteredChildren.push(child);
+      } else if (filtering === FilterOption.FLATTEN && isExpandableNode(child)) {
+        const grandChildren = await this.fetchNodeChildren(child);
+        filteredChildren.push(...grandChildren);
+      }
+    }
+    return filteredChildren;
   }
 
   private setNodeExpandedState(node: TreeNode<TreeNodeDataType>, newExpandedState: boolean): void {
@@ -337,7 +391,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private focusPendingNode(domNode: HTMLLIElement): void {
-    this.nodePendingFocus = null;
+    this.nodeIdPendingFocus = null;
     this.focusTreeNode(domNode);
   }
 
@@ -411,7 +465,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
             return;
           }
 
-          if (this.nodePendingFocus && node.id === this.nodePendingFocus.id) {
+          if (this.nodeIdPendingFocus && node.id === this.nodeIdPendingFocus) {
             this.focusPendingNode(domNode);
           }
         })}
@@ -433,6 +487,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     `;
     // clang-format on
   }
+
   private async render(): Promise<void> {
     if (this.scheduledRender) {
       // If we are already rendering, don't render again immediately, but

package/front_end/ui/components/tree_outline/TreeOutlineUtils.ts

@@ -4,10 +4,12 @@
 import * as Platform from '../../../core/platform/platform.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 
+export type TreeNodeId = string;
+
 interface BaseTreeNode<TreeNodeDataType> {
   treeNodeData: TreeNodeDataType;
   renderer?: (node: TreeNode<TreeNodeDataType>, state: {isExpanded: boolean}) => LitHtml.TemplateResult;
-  id: string;
+  id: TreeNodeId;
 }
 
 export interface TreeNodeWithChildren<TreeNodeDataType> extends BaseTreeNode<TreeNodeDataType> {
@@ -196,10 +198,10 @@ export const getNodeChildren =
  * And you look for F, you'll get back [A, D, F]
  */
 export const getPathToTreeNode =
-    async<TreeNodeDataType>(tree: readonly TreeNode<TreeNodeDataType>[], nodeToFind: TreeNode<TreeNodeDataType>):
+    async<TreeNodeDataType>(tree: readonly TreeNode<TreeNodeDataType>[], nodeIdToFind: TreeNodeId):
         Promise<TreeNode<TreeNodeDataType>[]|null> => {
           for (const rootNode of tree) {
-            const foundPathOrNull = await getPathToTreeNodeRecursively(rootNode, nodeToFind, [rootNode]);
+            const foundPathOrNull = await getPathToTreeNodeRecursively(rootNode, nodeIdToFind, [rootNode]);
             if (foundPathOrNull !== null) {
               return foundPathOrNull;
             }
@@ -208,16 +210,16 @@ export const getPathToTreeNode =
         };
 
 const getPathToTreeNodeRecursively = async<TreeNodeDataType>(
-    currentNode: TreeNode<TreeNodeDataType>, nodeToFind: TreeNode<TreeNodeDataType>,
+    currentNode: TreeNode<TreeNodeDataType>, nodeIdToFind: TreeNodeId,
     pathToNode: TreeNode<TreeNodeDataType>[]): Promise<TreeNode<TreeNodeDataType>[]|null> => {
-  if (currentNode.id === nodeToFind.id) {
+  if (currentNode.id === nodeIdToFind) {
     return pathToNode;
   }
 
   if (currentNode.children) {
     const children = await getNodeChildren(currentNode);
     for (const child of children) {
-      const foundPathOrNull = await getPathToTreeNodeRecursively(child, nodeToFind, [...pathToNode, child]);
+      const foundPathOrNull = await getPathToTreeNodeRecursively(child, nodeIdToFind, [...pathToNode, child]);
       if (foundPathOrNull !== null) {
         return foundPathOrNull;
       }

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -35,7 +35,7 @@ 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';
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -399,7 +399,7 @@ export class TreeOutlineInShadow extends TreeOutline {
     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,7 +46,7 @@ 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';

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

@@ -5,7 +5,6 @@
 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);

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 = {

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.
@@ -60,7 +62,7 @@ export class FontView extends UI.View.SimpleView {
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.font));
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/fontView.css');
+    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
@@ -97,7 +99,7 @@ export class ImageView extends UI.View.SimpleView {
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.image));
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/imageView.css');
+    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
@@ -55,7 +57,7 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     super();
     this.initialized = false;
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/jsonView.css');
+    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 = {
   /**
@@ -84,7 +85,7 @@ export class SearchableContainer extends UI.Widget.VBox {
   constructor(resource: TextUtils.ContentProvider.ContentProvider, contentType: string, autoPrettyPrint?: boolean) {
     super(true);
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/resourceSourceFrame.css');
+    this.registerRequiredCSS(resourceSourceFrameStyles);
     const sourceFrame = new ResourceSourceFrame(resource, contentType);
     this.sourceFrame = sourceFrame;
     const canPrettyPrint =

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
@@ -26,11 +29,11 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
   constructor(parsedXML: Document) {
     super(true);
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.registerRequiredCSS('ui/legacy/components/source_frame/xmlView.css');
+    this.registerRequiredCSS(xmlViewStyles);
     this.contentElement.classList.add('shadow-xml-view', 'source-code');
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
     // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
-    this.treeOutline.registerRequiredCSS('ui/legacy/components/source_frame/xmlTree.css');
+    this.treeOutline.registerRequiredCSS(xmlTreeStyles);
     this.contentElement.appendChild(this.treeOutline.element);
     this.currentSearchFocusIndex = 0;
     this.currentSearchTreeElements = [];

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.943017"
+  "version": "1.0.943182"
 }

package/scripts/check_gn.js

@@ -17,40 +17,6 @@ const gnPath = path.resolve(__dirname, '..', 'BUILD.gn');
 const gnFile = fs.readFileSync(gnPath, 'utf-8');
 const gnLines = gnFile.split('\n');
 
-/**
- * Ensures that generated module files are in the right list in BUILD.gn.
- * This is primarily to avoid remote modules from accidentally getting
- * bundled with the main Chrome binary.
- */
-function checkNonAutostartNonRemoteModules() {
-  const errors = [];
-  const gnVariable = 'non_autostart_non_remote_modules';
-  const lines = selectGNLines(`${gnVariable} = [`, ']');
-  if (!lines.length) {
-    return [
-      'Could not identify non-autostart non-remote modules in gn file',
-      'Please look at: ' + __filename,
-    ];
-  }
-  const text = lines.join('\n');
-  const modules = manifestModules.filter(m => m.type !== 'autostart').map(m => m.name);
-
-  const missingModules = modules.filter(m => !text.includes(`${m}/${path.basename(m)}_module.js`));
-  if (missingModules.length) {
-    errors.push(`Check that you've included [${missingModules.join(', ')}] modules in: ` + gnVariable);
-  }
-
-  // e.g. "lighthouse/lighthouse_module.js" => "lighthouse"
-  const mapLineToModuleName = line => path.dirname(line.substring(1));
-
-  const extraneousModules = lines.map(mapLineToModuleName).filter(module => !modules.includes(module));
-  if (extraneousModules.length) {
-    errors.push(`Found extraneous modules [${extraneousModules.join(', ')}] in: ` + gnVariable);
-  }
-
-  return errors;
-}
-
 /**
  * Ensures that all source files (according to the various module.json files) are
  * listed in BUILD.gn.
@@ -139,7 +105,6 @@ function selectGNLines(startLine, endLine, linesToCheck = gnLines) {
 
 function main() {
   const errors = [
-    ...checkNonAutostartNonRemoteModules(),
     ...checkAllDevToolsFiles(),
   ];
   if (errors.length) {

package/scripts/eslint_rules/lib/es_modules_import.js

@@ -90,14 +90,21 @@ function checkStarImport(context, node, importPath, importPathForErrorMessage, i
   const invalidCrossFolderUsage = !isSameFolder && !isModuleEntrypoint(exportingFileName);
 
   if (invalidSameFolderUsage) {
-    context.report({
-      node,
-      message:
-          'Incorrect same-namespace import: "{{importPathForErrorMessage}}". Use "import { Symbol } from \'./relative-file.js\';" instead.',
-      data: {
-        importPathForErrorMessage,
-      },
-    });
+    // Meta files import their entrypoints and are considered separate entrypoints.
+    // Additionally, any file ending with `-entrypoint.ts` is considered an entrypoint as well.
+    // Therefore, they are allowed to import using a same-namespace star-import.
+    const importingFileIsEntrypoint =
+        importingFileName.endsWith('-entrypoint.ts') || importingFileName.endsWith('-meta.ts');
+    if (!importingFileIsEntrypoint) {
+      context.report({
+        node,
+        message:
+            'Incorrect same-namespace import: "{{importPathForErrorMessage}}". Use "import { Symbol } from \'./relative-file.js\';" instead.',
+        data: {
+          importPathForErrorMessage,
+        },
+      });
+    }
   }
 
   if (invalidCrossFolderUsage) {

package/scripts/eslint_rules/tests/es_modules_import_test.js

@@ -106,6 +106,14 @@ ruleTester.run('es_modules_import', rule, {
       code: 'import * as ConsoleCounters from \'../console_counters/console_counters.js\';',
       filename: 'front_end/panels/console/ConsoleView.ts',
     },
+    {
+      code: 'import * as Elements from \'./elements.js\';',
+      filename: 'front_end/panels/elements/elements-meta.ts',
+    },
+    {
+      code: 'import * as Elements from \'./elements.js\';',
+      filename: 'front_end/panels/elements/elements-entrypoint.ts',
+    },
     // Tests are allowed to import from front_end
     {
       code: 'import * as UI from \'../../../front_end/ui/ui.js\';',