npm - chrome-devtools-frontend - Versions diffs - 1.0.1662965 → 1.0.1664496 - Mend

chrome-devtools-frontend 1.0.1662965 → 1.0.1664496

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (273) hide show

package/front_end/third_party/lighthouse/locales/en-US.json CHANGED Viewed

@@ -603,7 +603,7 @@
     "message": "Failing Rule"
   },
   "core/audits/agentic/agent-accessibility-tree.js | description": {
-    "message": "A well-formed [accessibility tree](http://goo.gle/lighthouse-agentic-a11y) helps AI agents to navigate and interact with the page."
+    "message": "A well-formed [accessibility tree](https://developer.chrome.com/docs/lighthouse/agentic-browsing/accessibility-for-agents) helps AI agents to navigate and interact with the page."
   },
   "core/audits/agentic/agent-accessibility-tree.js | displayValuePassed": {
     "message": "All audits passed"
@@ -618,7 +618,7 @@
     "message": "Accessibility tree is well-formed"
   },
   "core/audits/agentic/llms-txt.js | description": {
-    "message": "If your llms.txt file does not follow recommendations, large language models may not be able to understand how you want your website to be crawled or used for training. The [llms.txt](https://llmstxt.org/) file should be a Markdown file containing at least one H1 header."
+    "message": "If your llms.txt file does not follow recommendations, large language models may not be able to understand how you want your website to be crawled or used for training. The [llms.txt](https://llmstxt.org/) file should be a Markdown file containing at least one H1 header. [Learn more about the llms.txt audit](https://developer.chrome.com/docs/lighthouse/agentic-browsing/llms-txt)."
   },
   "core/audits/agentic/llms-txt.js | displayValueHttpBadCode": {
     "message": "Failed with HTTP status {statusCode}"
@@ -626,6 +626,9 @@
   "core/audits/agentic/llms-txt.js | explanation": {
     "message": "Fetch of llms.txt failed"
   },
+  "core/audits/agentic/llms-txt.js | explanationWithError": {
+    "message": "Fetch of llms.txt failed: {error}"
+  },
   "core/audits/agentic/llms-txt.js | failureTitle": {
     "message": "llms.txt does not follow recommendations"
   },
@@ -1263,7 +1266,10 @@
     "message": "{itemCount, plural,\n    =1 {1 error found}\n    other {# errors found}\n    }"
   },
   "core/audits/seo/robots-txt.js | explanation": {
-    "message": "Lighthouse was unable to download a robots.txt file"
+    "message": "Fetch of robots.txt failed"
+  },
+  "core/audits/seo/robots-txt.js | explanationWithError": {
+    "message": "Fetch of robots.txt failed: {error}"
   },
   "core/audits/seo/robots-txt.js | failureTitle": {
     "message": "robots.txt is not valid"
@@ -1350,7 +1356,7 @@
     "message": "Form"
   },
   "core/audits/webmcp-form-coverage.js | description": {
-    "message": "Consider adding [WebMCP](http://goo.gle/webmcp-docs) annotations to the forms listed below. This helps AI agents identify and interact with these forms more reliably."
+    "message": "Consider adding [WebMCP](https://developer.chrome.com/docs/ai/webmcp) annotations to the forms listed below. This helps AI agents identify and interact with these forms more reliably."
   },
   "core/audits/webmcp-form-coverage.js | displayValue": {
     "message": "{itemCount, plural,\n    =1 {1 form missing annotations}\n    other {# forms missing annotations}\n    }"
@@ -1374,7 +1380,7 @@
     "message": "Tool name"
   },
   "core/audits/webmcp-registered-tools.js | description": {
-    "message": "Lists the [WebMCP tools](http://goo.gle/webmcp-docs) registered at the time of analysis."
+    "message": "Lists the [WebMCP tools](https://developer.chrome.com/docs/ai/webmcp) registered at the time of analysis."
   },
   "core/audits/webmcp-registered-tools.js | title": {
     "message": "WebMCP tools registered"
@@ -1392,7 +1398,7 @@
     "message": "Issue"
   },
   "core/audits/webmcp-schema-validity.js | description": {
-    "message": "Valid [WebMCP schemas](http://goo.gle/webmcp-docs) are required for AI agents to  understand and interact with tools correctly. Please fix any errors or warnings reported by the browser."
+    "message": "Valid [WebMCP schemas](https://developer.chrome.com/docs/ai/webmcp) are required for AI agents to understand and interact with tools correctly. Please fix any errors or warnings reported by the browser."
   },
   "core/audits/webmcp-schema-validity.js | failureTitle": {
     "message": "WebMCP schemas are invalid"

package/front_end/third_party/lighthouse/locales/en-XL.json CHANGED Viewed

@@ -603,7 +603,7 @@
     "message": "F̂áîĺîńĝ Ŕûĺê"
   },
   "core/audits/agentic/agent-accessibility-tree.js | description": {
-    "message": "Â ẃêĺl̂-f́ôŕm̂éd̂ [áĉćêśŝíb̂íl̂ít̂ý t̂ŕêé](http://goo.gle/lighthouse-agentic-a11y) ĥél̂ṕŝ ÁÎ áĝén̂t́ŝ t́ô ńâv́îǵât́ê án̂d́ îńt̂ér̂áĉt́ ŵít̂h́ t̂h́ê ṕâǵê."
+    "message": "Â ẃêĺl̂-f́ôŕm̂éd̂ [áĉćêśŝíb̂íl̂ít̂ý t̂ŕêé](https://developer.chrome.com/docs/lighthouse/agentic-browsing/accessibility-for-agents) ĥél̂ṕŝ ÁÎ áĝén̂t́ŝ t́ô ńâv́îǵât́ê án̂d́ îńt̂ér̂áĉt́ ŵít̂h́ t̂h́ê ṕâǵê."
   },
   "core/audits/agentic/agent-accessibility-tree.js | displayValuePassed": {
     "message": "Âĺl̂ áûd́ît́ŝ ṕâśŝéd̂"
@@ -618,7 +618,7 @@
     "message": "Âćĉéŝśîb́îĺît́ŷ t́r̂éê íŝ ẃêĺl̂-f́ôŕm̂éd̂"
   },
   "core/audits/agentic/llms-txt.js | description": {
-    "message": "Îf́ ŷóûŕ l̂ĺm̂ś.t̂x́t̂ f́îĺê d́ôéŝ ńôt́ f̂ól̂ĺôẃ r̂éĉóm̂ḿêńd̂át̂íôńŝ, ĺâŕĝé l̂án̂ǵûáĝé m̂ód̂él̂ś m̂áŷ ńôt́ b̂é âb́l̂é t̂ó ûńd̂ér̂śt̂án̂d́ ĥóŵ ýôú ŵán̂t́ ŷóûŕ ŵéb̂śît́ê t́ô b́ê ćr̂áŵĺêd́ ôŕ ûśêd́ f̂ór̂ t́r̂áîńîńĝ. T́ĥé [l̂ĺm̂ś.t̂x́t̂](https://llmstxt.org/) f́îĺê śĥóûĺd̂ b́ê á M̂ár̂ḱd̂óŵń f̂íl̂é ĉón̂t́âín̂ín̂ǵ ât́ l̂éâśt̂ ón̂é Ĥ1 h́êád̂ér̂."
+    "message": "Îf́ ŷóûŕ l̂ĺm̂ś.t̂x́t̂ f́îĺê d́ôéŝ ńôt́ f̂ól̂ĺôẃ r̂éĉóm̂ḿêńd̂át̂íôńŝ, ĺâŕĝé l̂án̂ǵûáĝé m̂ód̂él̂ś m̂áŷ ńôt́ b̂é âb́l̂é t̂ó ûńd̂ér̂śt̂án̂d́ ĥóŵ ýôú ŵán̂t́ ŷóûŕ ŵéb̂śît́ê t́ô b́ê ćr̂áŵĺêd́ ôŕ ûśêd́ f̂ór̂ t́r̂áîńîńĝ. T́ĥé [l̂ĺm̂ś.t̂x́t̂](https://llmstxt.org/) f́îĺê śĥóûĺd̂ b́ê á M̂ár̂ḱd̂óŵń f̂íl̂é ĉón̂t́âín̂ín̂ǵ ât́ l̂éâśt̂ ón̂é Ĥ1 h́êád̂ér̂. [Ĺêár̂ń m̂ór̂é âb́ôút̂ t́ĥé l̂ĺm̂ś.t̂x́t̂ áûd́ît́](https://developer.chrome.com/docs/lighthouse/agentic-browsing/llms-txt)."
   },
   "core/audits/agentic/llms-txt.js | displayValueHttpBadCode": {
     "message": "F̂áîĺêd́ ŵít̂h́ ĤT́T̂Ṕ ŝt́ât́ûś {statusCode}"
@@ -626,6 +626,9 @@
   "core/audits/agentic/llms-txt.js | explanation": {
     "message": "F̂ét̂ćĥ óf̂ ĺl̂ḿŝ.t́x̂t́ f̂áîĺêd́"
   },
+  "core/audits/agentic/llms-txt.js | explanationWithError": {
+    "message": "F̂ét̂ćĥ óf̂ ĺl̂ḿŝ.t́x̂t́ f̂áîĺêd́: {error}"
+  },
   "core/audits/agentic/llms-txt.js | failureTitle": {
     "message": "l̂ĺm̂ś.t̂x́t̂ d́ôéŝ ńôt́ f̂ól̂ĺôẃ r̂éĉóm̂ḿêńd̂át̂íôńŝ"
   },
@@ -1263,7 +1266,10 @@
     "message": "{itemCount, plural,\n    =1 {1 êŕr̂ór̂ f́ôún̂d́}\n    other {# êŕr̂ór̂ś f̂óûńd̂}\n    }"
   },
   "core/audits/seo/robots-txt.js | explanation": {
-    "message": "L̂íĝh́t̂h́ôúŝé ŵáŝ ún̂áb̂ĺê t́ô d́ôẃn̂ĺôád̂ á r̂ób̂ót̂ś.t̂x́t̂ f́îĺê"
+    "message": "F̂ét̂ćĥ óf̂ ŕôb́ôt́ŝ.t́x̂t́ f̂áîĺêd́"
+  },
+  "core/audits/seo/robots-txt.js | explanationWithError": {
+    "message": "F̂ét̂ćĥ óf̂ ŕôb́ôt́ŝ.t́x̂t́ f̂áîĺêd́: {error}"
   },
   "core/audits/seo/robots-txt.js | failureTitle": {
     "message": "r̂ób̂ót̂ś.t̂x́t̂ íŝ ńôt́ v̂ál̂íd̂"
@@ -1350,7 +1356,7 @@
     "message": "F̂ór̂ḿ"
   },
   "core/audits/webmcp-form-coverage.js | description": {
-    "message": "Ĉón̂śîd́êŕ âd́d̂ín̂ǵ [Ŵéb̂ḾĈṔ](http://goo.gle/webmcp-docs) âńn̂ót̂át̂íôńŝ t́ô t́ĥé f̂ór̂ḿŝ ĺîśt̂éd̂ b́êĺôẃ. T̂h́îś ĥél̂ṕŝ ÁÎ áĝén̂t́ŝ íd̂én̂t́îf́ŷ án̂d́ îńt̂ér̂áĉt́ ŵít̂h́ t̂h́êśê f́ôŕm̂ś m̂ór̂é r̂él̂íâb́l̂ý."
+    "message": "Ĉón̂śîd́êŕ âd́d̂ín̂ǵ [Ŵéb̂ḾĈṔ](https://developer.chrome.com/docs/ai/webmcp) âńn̂ót̂át̂íôńŝ t́ô t́ĥé f̂ór̂ḿŝ ĺîśt̂éd̂ b́êĺôẃ. T̂h́îś ĥél̂ṕŝ ÁÎ áĝén̂t́ŝ íd̂én̂t́îf́ŷ án̂d́ îńt̂ér̂áĉt́ ŵít̂h́ t̂h́êśê f́ôŕm̂ś m̂ór̂é r̂él̂íâb́l̂ý."
   },
   "core/audits/webmcp-form-coverage.js | displayValue": {
     "message": "{itemCount, plural,\n    =1 {1 f̂ór̂ḿ m̂íŝśîńĝ án̂ńôt́ât́îón̂ś}\n    other {# f̂ór̂ḿŝ ḿîśŝín̂ǵ âńn̂ót̂át̂íôńŝ}\n    }"
@@ -1374,7 +1380,7 @@
     "message": "T̂óôĺ n̂ám̂é"
   },
   "core/audits/webmcp-registered-tools.js | description": {
-    "message": "L̂íŝt́ŝ t́ĥé [Ŵéb̂ḾĈṔ t̂óôĺŝ](http://goo.gle/webmcp-docs) ŕêǵîśt̂ér̂éd̂ át̂ t́ĥé t̂ím̂é ôf́ âńâĺŷśîś."
+    "message": "L̂íŝt́ŝ t́ĥé [Ŵéb̂ḾĈṔ t̂óôĺŝ](https://developer.chrome.com/docs/ai/webmcp) ŕêǵîśt̂ér̂éd̂ át̂ t́ĥé t̂ím̂é ôf́ âńâĺŷśîś."
   },
   "core/audits/webmcp-registered-tools.js | title": {
     "message": "Ŵéb̂ḾĈṔ t̂óôĺŝ ŕêǵîśt̂ér̂éd̂"
@@ -1392,7 +1398,7 @@
     "message": "Îśŝúê"
   },
   "core/audits/webmcp-schema-validity.js | description": {
-    "message": "V̂ál̂íd̂ [Ẃêb́M̂ĆP̂ śĉh́êḿâś](http://goo.gle/webmcp-docs) âŕê ŕêq́ûír̂éd̂ f́ôŕ ÂÍ âǵêńt̂ś t̂ó  ûńd̂ér̂śt̂án̂d́ âńd̂ ín̂t́êŕâćt̂ ẃît́ĥ t́ôól̂ś ĉór̂ŕêćt̂ĺŷ. Ṕl̂éâśê f́îx́ âńŷ ér̂ŕôŕŝ ór̂ ẃâŕn̂ín̂ǵŝ ŕêṕôŕt̂éd̂ b́ŷ t́ĥé b̂ŕôẃŝér̂."
+    "message": "V̂ál̂íd̂ [Ẃêb́M̂ĆP̂ śĉh́êḿâś](https://developer.chrome.com/docs/ai/webmcp) âŕê ŕêq́ûír̂éd̂ f́ôŕ ÂÍ âǵêńt̂ś t̂ó ûńd̂ér̂śt̂án̂d́ âńd̂ ín̂t́êŕâćt̂ ẃît́ĥ t́ôól̂ś ĉór̂ŕêćt̂ĺŷ. Ṕl̂éâśê f́îx́ âńŷ ér̂ŕôŕŝ ór̂ ẃâŕn̂ín̂ǵŝ ŕêṕôŕt̂éd̂ b́ŷ t́ĥé b̂ŕôẃŝér̂."
   },
   "core/audits/webmcp-schema-validity.js | failureTitle": {
     "message": "Ŵéb̂ḾĈṔ ŝćĥém̂áŝ ár̂é îńv̂ál̂íd̂"

package/front_end/third_party/lighthouse/report-assets/report-generator.mjs CHANGED Viewed

@@ -35,7 +35,7 @@
     ReportGenerator: () => ReportGenerator
   });
-  // replace-modules:/Users/cjamcl/src/lighthouse/report/generator/flow-report-assets.js
+  // replace-modules:/usr/local/google/home/lusazhan/Git/lighthouse/report/generator/flow-report-assets.js
   var flowReportAssets = {};
   // report/generator/report-assets.js

package/front_end/third_party/puppeteer/puppeteer.ts CHANGED Viewed

@@ -9,5 +9,24 @@ import { CdpFrame } from './package/lib/puppeteer/cdp/Frame.js';
 import { CdpElementHandle } from './package/lib/puppeteer/cdp/ElementHandle.js';
 import { CdpPage } from './package/lib/puppeteer/cdp/Page.js';
 import { CdpTarget } from './package/lib/puppeteer/cdp/Target.js';
+import { CDPSession, CDPSessionEvent } from './package/lib/puppeteer/api/CDPSession.js';
+import type { Handler } from './package/lib/puppeteer/common/EventEmitter.js';
+type CDPSessionEventSessionAttached = typeof CDPSessionEvent.SessionAttached;
+type CDPSessionEventSessionDetached = typeof CDPSessionEvent.SessionDetached;
+export {
+  CdpBrowser as Browser,
+  CdpTarget as Target,
+  Connection,
+  ConnectionTransport,
+  CdpElementHandle as ElementHandle,
+  CdpFrame as Frame,
+  CdpPage as Page,
+  CDPSession,
+  CDPSessionEvent,
+  type Handler,
+  type CDPSessionEventSessionAttached,
+  type CDPSessionEventSessionDetached,
+};
-export { CdpBrowser as Browser, CdpTarget as Target, Connection, ConnectionTransport, CdpElementHandle as ElementHandle, CdpFrame as Frame, CdpPage as Page };

package/front_end/ui/components/highlighting/HighlightElement.ts CHANGED Viewed

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/enforce-custom-element-definitions-location */
-import * as TextUtils from '../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../core/text_utils/text_utils.js';
 import {HighlightManager} from './HighlightManager.js';
 import {type HighlightChange, highlightRangesWithStyleClass, revertDomChanges} from './MarkupHighlight.js';
@@ -25,6 +25,9 @@ export class HighlightElement extends HTMLElement {
         break;
       case 'current-range':
         this.#currentRange = parseRanges(newValue)[0];
+        if (this.#currentRange && oldValue !== newValue) {
+          queueMicrotask(() => this.scrollIntoView({block: 'nearest'}));
+        }
         break;
       case 'type':
         this.#type = newValue || 'css';

package/front_end/ui/components/highlighting/HighlightManager.ts CHANGED Viewed

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import type * as TextUtils from '../../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../../core/text_utils/text_utils.js';
 export class RangeWalker {
   #offset = 0;

package/front_end/ui/components/highlighting/MarkupHighlight.ts CHANGED Viewed

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import * as TextUtils from '../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../core/text_utils/text_utils.js';
 export const highlightedSearchResultClassName = 'highlighted-search-result';
 export const highlightedCurrentSearchResultClassName = 'current-search-result';

package/front_end/ui/components/markdown_view/MarkdownView.ts CHANGED Viewed

@@ -130,6 +130,22 @@ declare global {
     'devtools-markdown-view': MarkdownView;
   }
 }
+const BLOCK_TOKEN_TYPES = new Set<Marked.Marked.Token['type']>([
+  'list',
+  'code',
+  'table',
+  'heading',
+  'paragraph',
+  'blockquote',
+]);
+/**
+ * Identifies block-level tokens (such as nested lists, headings, or tables)
+ * that should be rendered outside of the inline typing animation spans.
+ */
+function isBlockToken(token: Marked.Marked.Token): boolean {
+  return BLOCK_TOKEN_TYPES.has(token.type);
+}
 /**
  * Default renderer is used for the IssuesPanel and allows only well-known images and links to be embedded.
@@ -231,8 +247,36 @@ export class MarkdownLitRenderer {
         return html`<ul class=${this.customClassMapForToken('list')}>${token.items.map(token => {
           return this.renderToken(token);
         })}</ul>`;
-      case 'list_item':
-        return html`<li class=${this.customClassMapForToken('list_item')}>${this.renderChildTokens(token)}</li>`;
+      case 'list_item': {
+        // Group consecutive inline tokens into a `.markdown-list-item-content` span
+        // so that the typing animation (requiring `overflow: hidden`) applies to the text
+        // instead of the parent `<li>` element. This keeps the list marker (bullet point)
+        // visible immediately. Block-level children (like nested lists) are kept outside
+        // of this span to prevent nesting layout issues.
+        const childTokens = (token as Marked.Marked.Tokens.ListItem).tokens || [];
+        const renderedParts: Lit.TemplateResult[] = [];
+        let currentInline: Marked.Marked.Token[] = [];
+        const flushInline = (): void => {
+          if (currentInline.length > 0) {
+            renderedParts.push(
+                html`<span class="markdown-list-item-content">${currentInline.map(t => this.renderToken(t))}</span>`);
+            currentInline = [];
+          }
+        };
+        for (const child of childTokens) {
+          if (isBlockToken(child)) {
+            flushInline();
+            renderedParts.push(html`${this.renderToken(child)}`);
+          } else {
+            currentInline.push(child);
+          }
+        }
+        flushInline();
+        return html`<li class=${this.customClassMapForToken('list_item')}>${renderedParts}</li>`;
+      }
       case 'text':
         return this.renderText(token);
       case 'codespan':

package/front_end/ui/components/markdown_view/markdownView.css CHANGED Viewed

@@ -72,6 +72,29 @@ devtools-code-block.animating {
   list-style-type: disc;
 }
+.message li.animating {
+  /*
+   * The JS animation controller applies the `pending` and `animating` classes to the <li>.
+   * We need `pending` (which is `display: none`) on the <li> to hide the bullet point
+   * before it starts animating.
+   *
+   * Once animating, we must override the default `.animating` styles on the <li> itself
+   * to prevent the bullet point from being clipped by `overflow: hidden`.
+   * Instead, we apply the typing animation to the inner `.markdown-list-item-content` span.
+   */
+  overflow: visible;
+  white-space: normal;
+  animation: none;
+}
+.message li.animating > .markdown-list-item-content {
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+  white-space: nowrap;
+  animation: typing 0.4s steps(40, end);
+}
 .message code {
   color: var(--sys-color-on-surface);
   font-family: var(--monospace-font-family);

package/front_end/ui/components/text_editor/config.ts CHANGED Viewed

@@ -6,7 +6,7 @@
 import * as Common from '../../../core/common/common.js';
 import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as TextUtils from '../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../core/text_utils/text_utils.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 import {Icon} from '../../kit/kit.js';
 import * as UI from '../../legacy/legacy.js';

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

@@ -74,9 +74,15 @@ export class ItemContextMenuEvent<TreeNodeDataType> extends Event {
   };
   constructor(node: TreeNode<TreeNodeDataType>, originalEvent: MouseEvent) {
-    super(ItemContextMenuEvent.eventName, {bubbles: true, composed: true});
+    super(ItemContextMenuEvent.eventName, {bubbles: true, composed: true, cancelable: true});
     this.data = {node, originalEvent};
   }
+  createContextMenu(): UI.ContextMenu.ContextMenu {
+    this.preventDefault();
+    this.stopPropagation();
+    return new UI.ContextMenu.ContextMenu(this.data.originalEvent);
+  }
 }
 export class ItemMouseOutEvent<TreeNodeDataType> extends Event {

package/front_end/ui/legacy/Infobar.ts CHANGED Viewed

@@ -19,7 +19,7 @@ const UIStrings = {
   /**
    * @description Text on a button to close the infobar and never show the infobar in the future
    */
-  dontShowAgain: 'Don\'t show again',
+  dontShowAgain: 'Don’t show again',
   /**
    * @description Text to close something
    */

package/front_end/ui/legacy/InspectorView.ts CHANGED Viewed

@@ -81,7 +81,7 @@ const UIStrings = {
    * is configured with a different locale than Chrome. This option means DevTools will
    * always try and display the DevTools UI in the same language as Chrome.
    */
-  setToBrowserLanguage: 'Always match Chrome\'s language',
+  setToBrowserLanguage: 'Always match Chrome’s language',
   /**
    * @description An option the user can select when DevTools notices that DevTools
    * is configured with a different locale than Chrome. This option means DevTools UI
@@ -365,12 +365,17 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   #observedResize(): void {
     const rect = this.element.getBoundingClientRect();
-    this.element.style.setProperty('--devtools-window-left', `${rect.left}px`);
-    this.element.style.setProperty('--devtools-window-right', `${window.innerWidth - rect.right}px`);
-    this.element.style.setProperty('--devtools-window-width', `${rect.width}px`);
-    this.element.style.setProperty('--devtools-window-top', `${rect.top}px`);
-    this.element.style.setProperty('--devtools-window-bottom', `${window.innerHeight - rect.bottom}px`);
-    this.element.style.setProperty('--devtools-window-height', `${rect.height}px`);
+    // Set custom properties on the root element so top-layer elements
+    // (such as native popovers inside Shadow DOM) can inherit them.
+    // Top-layer popovers inside Shadow DOM roots inherit CSS custom properties
+    // from documentElement rather than local parent elements or shadow hosts.
+    const root = this.element.ownerDocument.documentElement;
+    root.style.setProperty('--devtools-window-left', `${rect.left}px`);
+    root.style.setProperty('--devtools-window-right', `${window.innerWidth - rect.right}px`);
+    root.style.setProperty('--devtools-window-width', `${rect.width}px`);
+    root.style.setProperty('--devtools-window-top', `${rect.top}px`);
+    root.style.setProperty('--devtools-window-bottom', `${window.innerHeight - rect.bottom}px`);
+    root.style.setProperty('--devtools-window-height', `${rect.height}px`);
   }
   override wasShown(): void {

package/front_end/ui/legacy/SuggestBox.ts CHANGED Viewed

@@ -6,8 +6,8 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import type * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Geometry from '../../models/geometry/geometry.js';
-import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 import * as ARIAUtils from './ARIAUtils.js';

package/front_end/ui/legacy/TextPrompt.ts CHANGED Viewed

@@ -34,7 +34,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 import * as ARIAUtils from './ARIAUtils.js';

package/front_end/ui/legacy/Toolbar.ts CHANGED Viewed

@@ -11,7 +11,7 @@ import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {createIcon} from '../kit/kit.js';
-import type {TemplateResult} from '../lit/lit.js';
+import {nothing, render, type TemplateResult} from '../lit/lit.js';
 import {type Action, Events as ActionEvents} from './ActionRegistration.js';
 import {ActionRegistry} from './ActionRegistry.js';
@@ -412,10 +412,13 @@ export class Toolbar extends HTMLElement {
       const widget = Widget.get(item.element);
       if (widget) {
         widget.detach();
+      } else {
+        item.element.remove();
       }
     }
     this.items = [];
-    this.removeChildren();
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(nothing, this);
   }
   hideSeparatorDupes(): void {

package/front_end/ui/legacy/Treeoutline.ts CHANGED Viewed

@@ -37,7 +37,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Buttons from '../components/buttons/buttons.js';
 import * as Highlighting from '../components/highlighting/highlighting.js';
 import type {Icon} from '../kit/kit.js';
@@ -1427,8 +1427,8 @@ function hasBooleanAttribute(element: Element, name: string): boolean {
   return element.hasAttribute(name) && element.getAttribute(name) !== 'false';
 }
-interface TreeNode<NodeT> {
-  children(): NodeT[];
+export interface TreeNode<NodeT> {
+  treeNodeChildren(): Iterable<NodeT>;
 }
 export interface TreeSearchResult<NodeT> {
@@ -1438,17 +1438,23 @@ export interface TreeSearchResult<NodeT> {
 }
 export class TreeSearch < NodeT extends TreeNode<NodeT>,
-                                        SearchResultT extends TreeSearchResult<NodeT >= TreeSearchResult<NodeT>> {
+                                        SearchResultT extends TreeSearchResult<NodeT >= TreeSearchResult<NodeT>> extends
+    Common.ObjectWrapper.ObjectWrapper<TreeSearch.EventTypes> {
   #matches: SearchResultT[] = [];
   #currentMatchIndex = 0;
   #nodeMatchMap: WeakMap<NodeT, SearchResultT[]>|undefined;
-  reset(): void {
+  #reset(): void {
     this.#matches = [];
     this.#nodeMatchMap = undefined;
     this.#currentMatchIndex = 0;
   }
+  reset(): void {
+    this.#reset();
+    this.dispatchEventToListeners(TreeSearch.Events.SEARCH_CHANGED);
+  }
   currentMatch(): SearchResultT|undefined {
     return this.#matches.at(this.#currentMatchIndex);
   }
@@ -1497,11 +1503,13 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
   next(): SearchResultT|undefined {
     this.#currentMatchIndex = Platform.NumberUtilities.mod(this.#currentMatchIndex + 1, this.#matches.length);
+    this.dispatchEventToListeners(TreeSearch.Events.SEARCH_CHANGED);
     return this.currentMatch();
   }
   prev(): SearchResultT|undefined {
     this.#currentMatchIndex = Platform.NumberUtilities.mod(this.#currentMatchIndex - 1, this.#matches.length);
+    this.dispatchEventToListeners(TreeSearch.Events.SEARCH_CHANGED);
     return this.currentMatch();
   }
@@ -1529,7 +1537,7 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
     this.#matches.push(...preOrderMatches);
     updateCurrentMatchIndex(/* isPostOrder=*/ false);
     yield* preOrderMatches.values();
-    for (const child of node.children()) {
+    for (const child of node.treeNodeChildren()) {
       yield* this.#innerSearch(child, currentMatch, jumpBackwards, match);
     }
     const postOrderMatches = match(node, /* isPostOrder=*/ true);
@@ -1540,16 +1548,27 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
   search(node: NodeT, jumpBackwards: boolean, match: (node: NodeT, isPostOrder: boolean) => SearchResultT[]): number {
     const currentMatch = this.currentMatch();
-    this.reset();
+    this.#reset();
     // eslint-disable-next-line @typescript-eslint/naming-convention,@typescript-eslint/no-unused-vars
     for (const _ of this.#innerSearch(node, currentMatch, jumpBackwards, match)) {
       // run the generator
     }
     this.#currentMatchIndex = Platform.NumberUtilities.mod(this.#currentMatchIndex, this.#matches.length);
+    this.dispatchEventToListeners(TreeSearch.Events.SEARCH_CHANGED);
     return this.#matches.length;
   }
 }
+export namespace TreeSearch {
+  export const enum Events {
+    SEARCH_CHANGED = 'SearchChanged',
+  }
+  export interface EventTypes {
+    [Events.SEARCH_CHANGED]: void;
+  }
+}
 class TreeViewTreeElement extends TreeElement {
   static readonly CLONED_ATTRIBUTES = SDK.DOMModel.ARIA_ATTRIBUTES.union(new Set(['jslog']));
   #clonedAttributes = new Set<string>();

package/front_end/ui/legacy/components/color_picker/Spectrum.ts CHANGED Viewed

@@ -38,7 +38,7 @@ import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 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 TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as SrgbOverlay from '../../../components/srgb_overlay/srgb_overlay.js';
 import {createIcon, Icon} from '../../../kit/kit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 import type * as Platform from '../../../../core/platform/platform.js';
-import type * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Lit from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';

package/front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import * as Common from '../../../../core/common/common.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import type * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as RenderCoordinator from '../../../components/render_coordinator/render_coordinator.js';
 import {type DataGridData, DataGridImpl, DataGridNode, Events as DataGridEvents, type Parameters} from './DataGrid.js';

package/front_end/ui/legacy/components/data_grid/dataGrid.css CHANGED Viewed

@@ -36,7 +36,7 @@
   position: sticky;
   top: 0;
   height: 21px;
-  z-index: 1;
+  z-index: 2;
 }
 .data-grid .aria-live-label {