chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -40,6 +40,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -151,6 +152,10 @@ const UIStrings = {
    * @description Text for referring to a timer that has timed-out and therefore is being removed.
    */
   timeout: 'Timeout',
+  /**
+   * @description Text used to refer to a positive timeout value that schedules the idle callback once elapsed, even if no idle time is available.
+   */
+  requestIdleCallbackTimeout: 'Timeout',
   /**
    * @description Text used to indicate that a timer is repeating (e.g. every X seconds) rather than a one off.
    */
@@ -868,19 +873,43 @@ export class TimelineUIUtils {
     }
   }
 
-  static maybeCreateLinkElement(link: Trace.Types.Extensions.ExtensionTrackEntryPayloadDeeplink): HTMLElement|null {
-    const protocol = URL.parse(link.url)?.protocol;
-    if (protocol && protocol.length > 0) {
-      const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(link.url);
-      if (splitResult) {
-        const {lineNumber, columnNumber} = splitResult;
-        const options = {text: link.url, lineNumber, columnNumber} as LegacyComponents.Linkifier.LinkifyURLOptions;
-        const linkElement = LegacyComponents.Linkifier.Linkifier.linkifyURL(link.url, (options));
-        return linkElement;
-      }
+  static maybeCreateLinkElement(url: string): HTMLElement|null {
+    const protocol = URL.parse(url)?.protocol;
+    if (!protocol || protocol.length === 0) {
+      return null;
     }
 
-    return null;
+    const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(url);
+    if (!splitResult) {
+      return null;
+    }
+    const {lineNumber, columnNumber} = splitResult;
+    const options = {text: url, lineNumber, columnNumber} as LegacyComponents.Linkifier.LinkifyURLOptions;
+    const linkElement =
+        LegacyComponents.Linkifier.Linkifier.linkifyURL(url as Platform.DevToolsPath.UrlString, (options));
+    return linkElement;
+  }
+
+  /**
+   * Takes an input string and parses it to look for links. It does this by
+   * looking for URLs in the input string. The returned fragment will contain
+   * the same string but with any links wrapped in clickable links. The text
+   * of the link is the URL, so the visible string to the user is unchanged.
+   */
+  static parseStringForLinks(rawString: string): DocumentFragment {
+    // Look for scheme:// plus text and exclude any punctuation at the end.
+    const urlRegex = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/)[^\s"]{2,}[^\s"'\)\}\],:;.!?]/u;
+    const results = TextUtils.TextUtils.Utils.splitStringByRegexes(rawString, [urlRegex]);
+    const nodes = results.map(result => {
+      if (result.regexIndex === -1) {
+        return result.value;
+      }
+      return TimelineUIUtils.maybeCreateLinkElement(result.value) ?? result.value;
+    });
+
+    const frag = document.createDocumentFragment();
+    frag.append(...nodes);
+    return frag;
   }
 
   static async buildTraceEventDetails(
@@ -1005,18 +1034,36 @@ export class TimelineUIUtils {
     }
 
     if (Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
-      const additionalContext = 'additionalContext' in event.args ? event.args.additionalContext : null;
-      if (additionalContext) {
-        if (Boolean(Root.Runtime.hostConfig.devToolsDeepLinksViaExtensibilityApi?.enabled)) {
-          const linkElement = this.maybeCreateLinkElement(additionalContext);
+      // isSyntheticExtensionEntries can be any of: perf.measure, perf.mark or console.timeStamp.
+      const userDetail = structuredClone(event.userDetail) as Record<string, Trace.Types.Extensions.JsonValue>;
+      if (userDetail && Object.keys(userDetail).length) {
+        // E.g. console.timeStamp(name, start, end, track, trackGroup, color,
+        // {url: 'foo-extension://node/1', description: 'Node'});
+        const hasExclusiveLink = typeof userDetail === 'object' && typeof userDetail.url === 'string' &&
+            typeof userDetail.description === 'string';
+        if (hasExclusiveLink && Boolean(Root.Runtime.hostConfig.devToolsDeepLinksViaExtensibilityApi?.enabled)) {
+          const linkElement = this.maybeCreateLinkElement(String(userDetail.url));
           if (linkElement) {
-            contentHelper.appendElementRow(additionalContext.description, linkElement);
+            contentHelper.appendElementRow(String(userDetail.description), linkElement);
+            // Now remove so we don't render them in renderObjectJson.
+            delete userDetail.url;
+            delete userDetail.description;
           }
         }
+        if (Object.keys(userDetail).length) {
+          // E.g., performance.measure(name, {detail: {important: 42, devtools: {}}})
+          const detailContainer = TimelineUIUtils.renderObjectJson(userDetail);
+          contentHelper.appendElementRow(i18nString(UIStrings.details), detailContainer);
+        }
       }
 
-      for (const [key, value] of event.args.properties as Array<[string, string]>|| []) {
-        contentHelper.appendTextRow(key, String(value));
+      // E.g. performance.measure(name, {detail: {devtools: {properties: ['Key', 'Value']}}})
+      if (event.devtoolsObj.properties) {
+        for (const [key, value] of event.devtoolsObj.properties || []) {
+          const renderedValue = typeof value === 'string' ? TimelineUIUtils.parseStringForLinks(value) :
+                                                            TimelineUIUtils.renderObjectJson(value);
+          contentHelper.appendElementRow(key, renderedValue);
+        }
       }
     }
 
@@ -1373,6 +1420,12 @@ export class TimelineUIUtils {
       case Trace.Types.Events.Name.REQUEST_IDLE_CALLBACK:
       case Trace.Types.Events.Name.CANCEL_IDLE_CALLBACK: {
         contentHelper.appendTextRow(i18nString(UIStrings.callbackId), unsafeEventData['id']);
+
+        if (Trace.Types.Events.isRequestIdleCallback(event)) {
+          contentHelper.appendTextRow(
+              i18nString(UIStrings.requestIdleCallbackTimeout),
+              i18n.TimeUtilities.preciseMillisToString(event.args.data.timeout));
+        }
         break;
       }
 
@@ -1607,7 +1660,7 @@ export class TimelineUIUtils {
     contentHelper.appendElementRow('', highlightContainer);
   }
 
-  private static renderObjectJson(obj: Object): HTMLDivElement {
+  private static renderObjectJson(obj: Object|Trace.Types.Extensions.JsonValue): HTMLDivElement {
     const indentLength = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get().length;
     // Elide if the data is huge. Then remove the initial new-line for a denser UI
     const eventStr = JSON.stringify(obj, null, indentLength).slice(0, 10_000).replace(/{\n  /, '{ ');
@@ -1618,7 +1671,23 @@ export class TimelineUIUtils {
     const elem = shadowRoot.createChild('div');
     elem.classList.add('monospace', 'source-code');
     elem.textContent = eventStr;
-    void CodeHighlighter.CodeHighlighter.highlightNode(elem, 'text/javascript');
+    // Highlighting is done async (shrug), but we'll return the container immediately.
+    void CodeHighlighter.CodeHighlighter.highlightNode(elem, 'text/javascript').then(() => {
+      // Linkify any URLs within the text nodes.
+      // Use a TreeWalker to find all our text nodes
+      function* iterateTreeWalker(walker: TreeWalker): IterableIterator<Node> {
+        while (walker.nextNode()) {
+          yield walker.currentNode;
+        }
+      }
+      const walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT);
+      // Gather all the nodes first, then we'll potentially replace them.
+      for (const node of Array.from(iterateTreeWalker(walker))) {
+        const frag = TimelineUIUtils.parseStringForLinks(node.textContent || '');
+        node.parentNode?.replaceChild(frag, node);
+      }
+    });
+
     return highlightContainer;
   }
 

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -72,11 +72,12 @@ export class TimingsTrackAppender implements TrackAppender {
   appendTrackAtLevel(trackStartLevel: number, expanded?: boolean): number {
     const extensionMarkersAreEmpty = this.#extensionMarkers.length === 0;
     const performanceMarks = this.#parsedTrace.UserTimings.performanceMarks.filter(
-        m => !Trace.Handlers.ModelHandlers.ExtensionTraceData.extensionDataInPerformanceTiming(m));
+        m => !Trace.Handlers.ModelHandlers.ExtensionTraceData.extensionDataInPerformanceTiming(m).devtoolsObj);
     const performanceMeasures = this.#parsedTrace.UserTimings.performanceMeasures.filter(
-        m => !Trace.Handlers.ModelHandlers.ExtensionTraceData.extensionDataInPerformanceTiming(m));
+        m => !Trace.Handlers.ModelHandlers.ExtensionTraceData.extensionDataInPerformanceTiming(m).devtoolsObj);
     const timestampEvents = this.#parsedTrace.UserTimings.timestampEvents.filter(
-        timeStamp => !Trace.Handlers.ModelHandlers.ExtensionTraceData.extensionDataInConsoleTimeStamp(timeStamp));
+        timeStamp =>
+            !Trace.Handlers.ModelHandlers.ExtensionTraceData.extensionDataInConsoleTimeStamp(timeStamp).devtoolsObj);
     const consoleTimings = this.#parsedTrace.UserTimings.consoleTimings;
     if (extensionMarkersAreEmpty && performanceMarks.length === 0 && performanceMeasures.length === 0 &&
         timestampEvents.length === 0 && consoleTimings.length === 0) {
@@ -248,9 +249,7 @@ export class TimingsTrackAppender implements TrackAppender {
     if (Trace.Types.Events.isPerformanceMark(event)) {
       return `[mark]: ${event.name}`;
     }
-    if (Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText) {
-      return event.args.tooltipText;
-    }
+    // Trace.Types.Extensions.isSyntheticExtensionEntry(event) can fall through to event.name.
     return event.name;
   }
 
@@ -263,7 +262,11 @@ export class TimingsTrackAppender implements TrackAppender {
     // console.timestamp() events
 
     const isExtensibilityMarker = Trace.Types.Extensions.isSyntheticExtensionEntry(event) &&
-        Trace.Types.Extensions.isExtensionPayloadMarker(event.args);
+        Trace.Types.Extensions.isExtensionPayloadMarker(event.devtoolsObj);
+
+    if (isExtensibilityMarker) {
+      info.title = event.devtoolsObj.tooltipText || event.name;
+    }
 
     if (Trace.Types.Events.isMarkerEvent(event) || Trace.Types.Events.isPerformanceMark(event) ||
         Trace.Types.Events.isConsoleTimeStamp(event) || isExtensibilityMarker) {

package/front_end/panels/timeline/components/insights/CLSCulprits.ts

@@ -30,17 +30,7 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
       return [];
     }
 
-    const overlays = this.model.createOverlays?.();
-    if (!overlays) {
-      return [];
-    }
-
-    const timespanOverlaySection = overlays.find(overlay => overlay.type === 'TIMESPAN_BREAKDOWN')?.sections[0];
-    if (timespanOverlaySection) {
-      timespanOverlaySection.label = html`<div>${i18nString(UIStrings.worstLayoutShiftCluster)}</div>`;
-    }
-
-    return overlays;
+    return this.model.createOverlays?.() ?? [];
   }
 
   #clickEvent(event: Trace.Types.Events.Event): void {

package/front_end/panels/timeline/components/insights/ForcedReflow.ts

@@ -22,6 +22,10 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-forced-reflow`;
   override internalName = 'forced-reflow';
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   mapToRow(data: Trace.Insights.Models.ForcedReflow.BottomUpCallStack): TableDataRow {
     return {
       values: [this.#linkifyUrl(data.bottomUpData)],

package/front_end/panels/timeline/components/insights/LCPDiscovery.ts

@@ -45,8 +45,7 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
 
     const timespanOverlaySection = overlays.find(overlay => overlay.type === 'TIMESPAN_BREAKDOWN')?.sections[0];
     if (timespanOverlaySection) {
-      timespanOverlaySection.label =
-          html`<div class="discovery-delay"> ${this.#renderDiscoveryDelay(imageResults.discoveryDelay)}</div>`;
+      timespanOverlaySection.label = this.#renderDiscoveryDelay(imageResults.discoveryDelay);
     }
 
     return overlays;
@@ -60,7 +59,7 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
     return getImageData(this.model)?.estimatedSavings ?? null;
   }
 
-  #renderDiscoveryDelay(delay: Trace.Types.Timing.Micro): Element {
+  #renderDiscoveryDelay(delay: Trace.Types.Timing.Micro): HTMLElement {
     const timeWrapper = document.createElement('span');
     timeWrapper.classList.add('discovery-time-ms');
     timeWrapper.innerText = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(delay);

package/front_end/panels/timeline/components/insights/NetworkDependencyTree.ts

@@ -33,6 +33,10 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
   #relatedRequests: Set<Trace.Types.Events.SyntheticNetworkRequest>|null = null;
   #countOfChains = 0;
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   #createOverlayForChain(requests: Set<Trace.Types.Events.SyntheticNetworkRequest>):
       Trace.Types.Overlays.EntryOutline[] {
     const overlays: Trace.Types.Overlays.EntryOutline[] = [];

package/front_end/panels/timeline/components/insights/ThirdParties.ts

@@ -51,6 +51,10 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
         },
   };
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   override renderContent(): Lit.LitTemplate {
     if (!this.model) {
       return Lit.nothing;

package/front_end/panels/timeline/extensions/ExtensionUI.ts

@@ -6,7 +6,7 @@ import type * as Trace from '../../../models/trace/trace.js';
 import * as ThemeSupport from '../../../ui/legacy/theme_support/theme_support.js';
 
 export function extensionEntryColor(event: Trace.Types.Extensions.SyntheticExtensionEntry): string {
-  const color = event.args.color;
+  const color = event.devtoolsObj.color;
   // Use a default value for when the color of the extension entry
   // was not passed or was set an unknown value.
   let themeColor = '--ref-palette-blue70';

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -577,7 +577,7 @@ export class EntryLabelOverlay extends HTMLElement {
       onLearnMoreClick: () => {
         UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/performance/annotations#auto-annotations');
       },
-      learnMoreButtonTitle: UIStringsNotTranslate.learnMoreButton,
+      learnMoreButtonText: UIStringsNotTranslate.learnMoreButton,
     });
     this.dispatchEvent(new LabelAnnotationsConsentDialogVisibilityChange(false));
 

package/front_end/panels/timeline/overlays/components/TimespanBreakdownOverlay.ts

@@ -11,19 +11,10 @@ import timespanBreakdownOverlayStyles from './timespanBreakdownOverlay.css.js';
 
 const {html} = Lit;
 
-/**
- * An EntryBreakdown, or section, that makes up a TimespanBreakdown.
- */
-export interface EntryBreakdown {
-  bounds: Trace.Types.Timing.TraceWindowMicro;
-  label: string|Lit.LitTemplate;
-  showDuration: boolean;
-}
-
 export class TimespanBreakdownOverlay extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #canvasRect: DOMRect|null = null;
-  #sections: EntryBreakdown[]|null = null;
+  #sections: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown[]|null = null;
 
   set isBelowEntry(isBelow: boolean) {
     this.classList.toggle('is-below', isBelow);
@@ -37,7 +28,7 @@ export class TimespanBreakdownOverlay extends HTMLElement {
     this.#render();
   }
 
-  set sections(sections: EntryBreakdown[]|null) {
+  set sections(sections: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown[]|null) {
     if (sections === this.#sections) {
       return;
     }
@@ -152,7 +143,7 @@ export class TimespanBreakdownOverlay extends HTMLElement {
     return Array.from(this.#shadow.querySelectorAll('.timespan-breakdown-overlay-section'));
   }
 
-  #renderSection(section: EntryBreakdown): Lit.TemplateResult {
+  #renderSection(section: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown): Lit.TemplateResult {
     // clang-format off
     return html`
       <div class="timespan-breakdown-overlay-section">

package/front_end/panels/timeline/utils/AIContext.ts

@@ -30,8 +30,10 @@ type AgentFocusData = AgentFocusDataCallTree|AgentFocusDataInsight|AgentFocusDat
 
 export class AgentFocus {
   static full(
-      parsedTrace: Trace.Handlers.Types.ParsedTrace, insightSet: Trace.Insights.Types.InsightSet|null,
+      parsedTrace: Trace.Handlers.Types.ParsedTrace, insights: Trace.Insights.Types.TraceInsightSets,
       traceMetadata: Trace.Types.File.MetaData): AgentFocus {
+    // Currently only support a single insight set. Pick the first one with a navigation.
+    const insightSet = [...insights.values()].filter(insightSet => insightSet.navigation).at(0) ?? null;
     return new AgentFocus({
       type: 'full',
       parsedTrace,
@@ -65,3 +67,14 @@ export class AgentFocus {
     return this.#data;
   }
 }
+
+export function getPerformanceAgentFocusFromModel(model: Trace.TraceModel.Model): AgentFocus|null {
+  const parsedTrace = model.parsedTrace();
+  const insights = model.traceInsights();
+  const traceMetadata = model.metadata();
+  if (!insights || !parsedTrace || !traceMetadata) {
+    return null;
+  }
+
+  return AgentFocus.full(parsedTrace, insights, traceMetadata);
+}

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -40,28 +40,28 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 81,
-  header: 'What\'s new in DevTools 140',
+  version: 82,
+  header: 'What\'s new in DevTools 141',
   markdownLinks: [
     {
-      key: 'ai-insights',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-140/#ai-insights',
+      key: 'ai-insight',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-141/#ai-insight',
     },
     {
-      key: 'save-data',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-140/#save-data',
+      key: 'ai-chat-export',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-141/#ai-chat-export',
     },
     {
-      key: 'debug-css',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-138#debug-css-values',
+      key: 'ipp',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-141/#ipp',
     },
   ],
   videoLinks: [
     {
-      description: 'See past highlights from Chrome 139',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-139' as Platform.DevToolsPath.UrlString,
+      description: 'See past highlights from Chrome 140',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-140' as Platform.DevToolsPath.UrlString,
       type: VideoType.WHATS_NEW,
     },
   ],
-  link: 'https://developer.chrome.com/blog/new-in-devtools-140/',
+  link: 'https://developer.chrome.com/blog/new-in-devtools-141/',
 };

package/front_end/panels/whats_new/resources/WNDT.md

@@ -1,8 +1,8 @@
-### [Ask AI about more insights](ai-insights)
-You can now ask Gemini about more performance insights: image delivery, legacy JavaScript, duplicate JavaScript, and modern HTTP.
+### [Debug the network dependency tree with Gemini](ai-insight)
+In Performance > Insights > Network dependency tree, click the corresponding AI button to discuss and debug said tree with Gemini in the 'AI assistance' panel.
 
-### [Emulate the 'Save-Data' header](save-data)
-In 'Network conditions', you can now emulate the 'Save-Data' request header that indicates the client's preference for reduced data usage.
+### [Export your chats with Gemini](ai-chat-export)
+You can now export your current chat with Gemini or copy its response to clipboard with a click of a button.
 
-### [Debug complex CSS values easier](debug-css)
-See also, from version 138: The Elements > Styles tab can now show you a tooltip with a breakdown of the definition chain and step-by-step evaluations of complex CSS variables, so you can find bugs quicker and gain a deeper understanding of how a value is computed.
+### [Filter IP protected network requests](ipp)
+In the Network panel, you can now filter requests sent to IP Protection proxies.

package/front_end/services/tracing/tracing.ts

@@ -2,12 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ExternalRequests from './ExternalRequests.js';
 import * as PerformanceTracing from './PerformanceTracing.js';
 import * as TracingManager from './TracingManager.js';
 
 export {
-  ExternalRequests,
   PerformanceTracing,
   TracingManager,
 };

package/front_end/tsconfig.json

@@ -9,6 +9,7 @@
         "name": "ts-lit-plugin",
         "rules": {
           "no-complex-attribute-binding": "off",
+          "no-noncallable-event-binding": "off",
           "no-missing-import": "error",
           "no-unknown-tag-name": "error",
           "no-unclosed-tag": "error"

package/front_end/ui/components/buttons/button.css

@@ -129,6 +129,10 @@ button {
       top: 2px;
       left: 3px;
     }
+
+    devtools-icon[name='cross-circle-filled'] {
+      color: var(--icon-default);
+    }
   }
 
   &.primary {

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

@@ -1,12 +1,9 @@
 // Copyright 2023 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.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import type * as TextUtils from '../../../models/text_utils/text_utils.js';
 
-import highlightingStyles from './highlighting.css.js';
-
 export class RangeWalker {
   #offset = 0;
   readonly #treeWalker: TreeWalker;
@@ -62,17 +59,17 @@ export class RangeWalker {
   }
 }
 
-export const HIGHLIGHT_REGISTRY = 'search-highlight';
+export const HIGHLIGHT_REGISTRY = 'highlighted-search-result';
+export const CURRENT_HIGHLIGHT_REGISTRY = 'current-search-result';
 
 let highlightManagerInstance: HighlightManager;
 export class HighlightManager {
   #highlights = new Highlight();
+  #currentHighlights = new Highlight();
 
   constructor() {
-    const styleElement = document.createElement('style');
-    styleElement.textContent = highlightingStyles;
-    document.head.appendChild(styleElement);
     CSS.highlights.set(HIGHLIGHT_REGISTRY, this.#highlights);
+    CSS.highlights.set(CURRENT_HIGHLIGHT_REGISTRY, this.#currentHighlights);
   }
 
   static instance(opts: {
@@ -94,19 +91,32 @@ export class HighlightManager {
     ranges.forEach(this.removeHighlight.bind(this));
   }
 
+  addCurrentHighlight(range: Range): void {
+    this.#currentHighlights.add(range);
+  }
+
+  addCurrentHighlights(ranges: Range[]): void {
+    ranges.forEach(this.addCurrentHighlight.bind(this));
+  }
+
   addHighlight(range: Range): void {
     this.#highlights.add(range);
   }
 
   removeHighlight(range: Range): void {
     this.#highlights.delete(range);
+    this.#currentHighlights.delete(range);
   }
 
-  highlightOrderedTextRanges(root: Node, sourceRanges: TextUtils.TextRange.SourceRange[]): Range[] {
+  highlightOrderedTextRanges(root: Node, sourceRanges: TextUtils.TextRange.SourceRange[], isCurrent = false): Range[] {
     const rangeWalker = new RangeWalker(root);
     const ranges = sourceRanges.map(range => rangeWalker.nextRange(range.offset, range.length))
                        .filter((r): r is Range => r !== null && !r.collapsed);
-    this.addHighlights(ranges);
+    if (isCurrent) {
+      this.addCurrentHighlights(ranges);
+    } else {
+      this.addHighlights(ranges);
+    }
     return ranges;
   }
 }

package/front_end/ui/legacy/ARIAUtils.ts

@@ -440,7 +440,7 @@ export class LiveAnnouncer {
 
   static removeAnnouncerElements(container: HTMLElement = document.body): void {
     LiveAnnouncer.#removeAnnouncerElement(container, AnnouncerRole.ALERT);
-    LiveAnnouncer.#removeAnnouncerElement(container, AnnouncerRole.ALERT);
+    LiveAnnouncer.#removeAnnouncerElement(container, AnnouncerRole.STATUS);
   }
 
   static alert(message: string): void {

package/front_end/ui/legacy/DockController.ts

@@ -116,7 +116,6 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
 
   private dockSideChanged(): void {
     this.setDockSide(this.currentDockStateSetting.get());
-    setTimeout(this.announceDockLocation.bind(this), 2000);
   }
 
   dockSide(): DockState|undefined {
@@ -169,6 +168,7 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
 
   private setIsDockedResponse(eventData: ChangeEvent): void {
     this.dispatchEventToListeners(Events.AFTER_DOCK_SIDE_CHANGED, eventData);
+    this.announceDockLocation();
   }
 
   toggleDockSide(): void {

package/front_end/ui/legacy/GlassPane.ts

@@ -2,7 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
-import type {Size} from './Geometry.js';
+import type {Size} from '../../models/geometry/geometry.js';
+
 import glassPaneStyles from './glassPane.css.js';
 import {deepElementFromEvent, measuredScrollbarWidth} from './UIUtils.js';
 import {Widget} from './Widget.js';