npm - chrome-devtools-frontend - Versions diffs - 1.0.1578729 → 1.0.1579812 - Mend

chrome-devtools-frontend 1.0.1578729 → 1.0.1579812

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 (72) hide show

package/docs/cookbook/devtools_on_devtools.md CHANGED Viewed

@@ -44,7 +44,7 @@ set up your Chrome or Chromium instance for earlier versions of M-136 and M-135.
 Then in your `devtools-frontend` checkout, use
 ```bash
-./third_party/chrome/chrome-linux/chrome \
+./third_party/chrome/chrome-linux/chrome-linux64/chrome \
    --disable-infobars \
    --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
 ```
@@ -52,7 +52,7 @@ Then in your `devtools-frontend` checkout, use
 on Linux or
 ```bash
-./third_party/chrome/chrome-mac/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing \
+./third_party/chrome/chrome-mac-{arm64|x64}/chrome-mac-{arm64|x64}/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing \
   --disable-infobars \
   --disable-features=MediaRouter \
   --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end) \

package/docs/feature-specs/elements-gutter-decorators.md ADDED Viewed

@@ -0,0 +1,40 @@
+# Requirements Specification: Elements Panel Gutter & Decoration Logic
+## 1. Overview
+The gutter area in the Elements panel DOM tree serves as a visual indicator for state markers (decorations) associated with DOM nodes. These decorations provide users with "at-a-glance" information about the node or its subtree, such as active breakpoints or framework-specific annotations.
+## 2. Functional Requirements
+### 2.1 Decoration Visibility
+*   **Target Nodes**: Decorations must only appear on **Element** nodes (e.g., `<div>`, `<body>`). They must not appear on text nodes or closing tags.
+*   **Visual Indicators**: Active states must be represented by colored markers (dots) within the gutter to the left of the element's tag.
+*   **Multiple States**: If a node has multiple active states (e.g., multiple types of breakpoints), the gutter must display markers for all of them.
+    *   **Layout**: Markers must be arranged horizontally.
+    *   **Spacing**: Markers must be tightly packed, with each subsequent marker offset by exactly `3px` to the right of the previous one (creating a stacked or dense visual line).
+    ![Multiple Markers Example](images/elements-gutter-decorators-multiple.png)
+### 2.2 Parent/Child Aggregation Logic
+The visibility of decorations depends on the expansion state of the node to ensure users don't miss information hidden inside collapsed regions.
+*   **Collapsed State (Summary View)**:
+    *   The gutter must display markers for the node's **own** decorations.
+    *   The gutter must **also** display markers for any **descendant** nodes that have decorations. This acts as a summary, alerting the user that a reflected state exists somewhere inside the collapsed subtree.
+*   **Expanded State (Direct View)**:
+    *   The gutter must **only** display markers for the node's **own** decorations.
+    *   Markers for descendant nodes must be hidden from the parent's gutter, as they will be directly visible on the child nodes themselves.
+    *   **Style**: Descendant markers visible in the collapsed state must be rendered with `50%` opacity to visually distinguish them from the node's own decorations.
+### 2.3 Tooltip Behavior
+Hovering over the decoration markers in the gutter must display a consolidated tooltip containing:
+*   **Own Decorations**: A list of titles for all decorations active on the current node.
+*   **Descendant Decorations** (Collapsed State Only): A separate list of titles for decorations found within the subtree, clearly labeled to distinguish them from the parent's own states (e.g., under a "Children:" header).
+### 2.4 Layout & Positioning
+*   **Indentation Tracking**: The decoration container must dynamically adjust its position to match the indentation level of the tree element. It should always appear to the left of the opening tag, regardless of how deep the node is in the DOM hierarchy.
+*   **Gutter Alignment**: The markers must align consistent with the "gutter" column effectively creating a vertical channel for status indicators down the left side of the tree.
+### 2.5 User Interaction
+*   **Menu Access**: Clicking on the gutter area (often visualized with a "..." icon or actionable space) must trigger the context menu for that node, allowing access to actions related to the decorations (e.g., removing a breakpoint).
+### 2.6 Performance
+*   **Throttled Updates**: Changes to decorations must be batched or throttled. Visually updating the markers should not occur synchronously with every minor internal state change to prevent UI flickering during rapid DOM updates.

package/docs/feature-specs/elements-tree-selection-and-hover.md ADDED Viewed

@@ -0,0 +1,31 @@
+# Requirements Specification: Elements Panel Tree Selection and Hover
+## 1. Overview
+The Elements panel DOM tree visualizes the structure of the inspected page. As users navigate this tree—either by clicking or hovering—the panel provides visual feedback to indicate the currently active node and offers contextual actions like a console hint and an AI assistance button.
+## 2. Functional Requirements
+### 2.1 Selection State
+*   **Visual Indicator**: When a tree node is selected, its entire row must be highlighted visually. This is achieved by rendering a background spanning the full width of the tree, visually anchoring the node.
+*   **Full Row Coverage**: The selection highlight must extend to the left edge of the panel, accounting for the dynamic indentation of the DOM tree structure.
+*   **Behavior on Deselection**: When a node loses selection focus, the visual highlight must be removed immediately.
+### 2.2 Console Hint (`== $0`)
+*   **Visibility**: The `$0` hint must only appear on the currently selected tree node.
+*   **Placement**: It must be positioned to the right of the closing tag or the node's text content.
+*   **Tooltip**: Hovering over the hint must display a tooltip explaining its purpose: `Use $0 in the console to refer to this element.`
+*   **Accessibility**: The hint itself should be marked hidden from screen readers (`aria-hidden="true"`) to prevent redundancy, as the selection state inherently implies `$0` context to power users.
+### 2.3 Floating AI Assistance Button
+*   **Eligibility**: The AI button must only appear for valid `Element` nodes (e.g., `<button>`, `<div>`). It must not appear on text nodes, comments, but does appear for closing tags.
+*   **Visibility Conditions**:
+    *   The button must be visible when the node is actively hovered by the user's cursor.
+    *   The button must also be visible when the node currently holds the selection state (even if not hovered).
+*   **Action**: Clicking the button must:
+    *   Select the node (if it wasn't already selected).
+    *   Open the AI assistance panel with the context of the selected node.
+    *   Not propagate the click event to the underlying row (which might otherwise cause tree expansion/collapse).
+*   **Visual Design**: It should render as a floating button using the standard DevTools AI icon, with the tooltip matching the registered AI action title.
+## 3. Implementation Details (Declarative UI)
+The selection background, `$0` hint, and AI floating button are integrated into the primary Lit-html render cycle (`DEFAULT_VIEW`) for the tree element. This replaces previous imperative DOM creation strategies, routing all visibility and styling updates through a unified state object passed to the view.

package/docs/feature-specs/images/elements-gutter-decorators-multiple.png ADDED Viewed

Binary file

package/docs/get_the_code.md CHANGED Viewed

@@ -250,19 +250,19 @@ This works with Chromium 79 or later.
 To run on **Mac**:
 ```bash
-<path-to-devtools-frontend>./third_party/chrome/chrome-mac/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing --disable-infobars --disable-features=MediaRouter --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end) --use-mock-keychain
+<path-to-devtools-frontend>./third_party/chrome/chrome-mac-{arm64|x64}/chrome-mac-{arm64|x64}/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing --disable-infobars --disable-features=MediaRouter --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end) --use-mock-keychain
 ```
 To run on **Linux**:
 ```bash
-<path-to-devtools-frontend>./third_party/chrome/chrome-linux/chrome --disable-infobars --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
+<path-to-devtools-frontend>./third_party/chrome/chrome-linux/chrome-linux64/chrome --disable-infobars --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
 ```
 To run on **Windows**:
 ```bash
-<path-to-devtools-frontend>\third_party\chrome\chrome-win\chrome.exe --disable-infobars --custom-devtools-frontend="<path-to-devtools-frontend>\out\Default\gen\front_end"
+<path-to-devtools-frontend>\third_party\chrome\chrome-win\chrome-win64\chrome.exe --disable-infobars --custom-devtools-frontend="<path-to-devtools-frontend>\out\Default\gen\front_end"
 ```
 Note that `$(realpath out/Default/gen/front_end)` expands to the absolute path to build artifacts for DevTools frontend.

package/front_end/generated/ARIAProperties.js CHANGED Viewed

@@ -1314,9 +1314,6 @@ export const config = {
    ]
   },
   {
-   "implicitValues": {
-    "aria-live": "off"
-   },
    "name": "marquee",
    "nameFrom": [
     "author"
@@ -1975,9 +1972,6 @@ export const config = {
    ]
   },
   {
-   "implicitValues": {
-    "aria-live": "off"
-   },
    "name": "timer",
    "nameFrom": [
     "author"

package/front_end/generated/InspectorBackendCommands.ts CHANGED Viewed

@@ -1018,7 +1018,7 @@ inspectorBackend.registerEnum("Page.ClientNavigationReason", {AnchorClick: "anch
 inspectorBackend.registerEnum("Page.ClientNavigationDisposition", {CurrentTab: "currentTab", NewTab: "newTab", NewWindow: "newWindow", Download: "download"});
 inspectorBackend.registerEnum("Page.ReferrerPolicy", {NoReferrer: "noReferrer", NoReferrerWhenDowngrade: "noReferrerWhenDowngrade", Origin: "origin", OriginWhenCrossOrigin: "originWhenCrossOrigin", SameOrigin: "sameOrigin", StrictOrigin: "strictOrigin", StrictOriginWhenCrossOrigin: "strictOriginWhenCrossOrigin", UnsafeUrl: "unsafeUrl"});
 inspectorBackend.registerEnum("Page.NavigationType", {Navigation: "Navigation", BackForwardCacheRestore: "BackForwardCacheRestore"});
-inspectorBackend.registerEnum("Page.BackForwardCacheNotRestoredReason", {NotPrimaryMainFrame: "NotPrimaryMainFrame", BackForwardCacheDisabled: "BackForwardCacheDisabled", RelatedActiveContentsExist: "RelatedActiveContentsExist", HTTPStatusNotOK: "HTTPStatusNotOK", SchemeNotHTTPOrHTTPS: "SchemeNotHTTPOrHTTPS", Loading: "Loading", WasGrantedMediaAccess: "WasGrantedMediaAccess", DisableForRenderFrameHostCalled: "DisableForRenderFrameHostCalled", DomainNotAllowed: "DomainNotAllowed", HTTPMethodNotGET: "HTTPMethodNotGET", SubframeIsNavigating: "SubframeIsNavigating", Timeout: "Timeout", CacheLimit: "CacheLimit", JavaScriptExecution: "JavaScriptExecution", RendererProcessKilled: "RendererProcessKilled", RendererProcessCrashed: "RendererProcessCrashed", SchedulerTrackedFeatureUsed: "SchedulerTrackedFeatureUsed", ConflictingBrowsingInstance: "ConflictingBrowsingInstance", CacheFlushed: "CacheFlushed", ServiceWorkerVersionActivation: "ServiceWorkerVersionActivation", SessionRestored: "SessionRestored", ServiceWorkerPostMessage: "ServiceWorkerPostMessage", EnteredBackForwardCacheBeforeServiceWorkerHostAdded: "EnteredBackForwardCacheBeforeServiceWorkerHostAdded", RenderFrameHostReused_SameSite: "RenderFrameHostReused_SameSite", RenderFrameHostReused_CrossSite: "RenderFrameHostReused_CrossSite", ServiceWorkerClaim: "ServiceWorkerClaim", IgnoreEventAndEvict: "IgnoreEventAndEvict", HaveInnerContents: "HaveInnerContents", TimeoutPuttingInCache: "TimeoutPuttingInCache", BackForwardCacheDisabledByLowMemory: "BackForwardCacheDisabledByLowMemory", BackForwardCacheDisabledByCommandLine: "BackForwardCacheDisabledByCommandLine", NetworkRequestDatAPIpeDrainedAsBytesConsumer: "NetworkRequestDatapipeDrainedAsBytesConsumer", NetworkRequestRedirected: "NetworkRequestRedirected", NetworkRequestTimeout: "NetworkRequestTimeout", NetworkExceedsBufferLimit: "NetworkExceedsBufferLimit", NavigationCancelledWhileRestoring: "NavigationCancelledWhileRestoring", NotMostRecentNavigationEntry: "NotMostRecentNavigationEntry", BackForwardCacheDisabledForPrerender: "BackForwardCacheDisabledForPrerender", UserAgentOverrideDiffers: "UserAgentOverrideDiffers", ForegroundCacheLimit: "ForegroundCacheLimit", BrowsingInstanceNotSwapped: "BrowsingInstanceNotSwapped", BackForwardCacheDisabledForDelegate: "BackForwardCacheDisabledForDelegate", UnloadHandlerExistsInMainFrame: "UnloadHandlerExistsInMainFrame", UnloadHandlerExistsInSubFrame: "UnloadHandlerExistsInSubFrame", ServiceWorkerUnregistration: "ServiceWorkerUnregistration", CacheControlNoStore: "CacheControlNoStore", CacheControlNoStoreCookieModified: "CacheControlNoStoreCookieModified", CacheControlNoStoreHTTPOnlyCookieModified: "CacheControlNoStoreHTTPOnlyCookieModified", NoResponseHead: "NoResponseHead", Unknown: "Unknown", ActivationNavigationsDisallowedForBug1234857: "ActivationNavigationsDisallowedForBug1234857", ErrorDocument: "ErrorDocument", FencedFramesEmbedder: "FencedFramesEmbedder", CookieDisabled: "CookieDisabled", HTTPAuthRequired: "HTTPAuthRequired", CookieFlushed: "CookieFlushed", BroadcastChannelOnMessage: "BroadcastChannelOnMessage", WebViewSettingsChanged: "WebViewSettingsChanged", WebViewJavaScriptObjectChanged: "WebViewJavaScriptObjectChanged", WebViewMessageListenerInjected: "WebViewMessageListenerInjected", WebViewSafeBrowsingAllowlistChanged: "WebViewSafeBrowsingAllowlistChanged", WebViewDocumentStartJavascriptChanged: "WebViewDocumentStartJavascriptChanged", WebSocket: "WebSocket", WebTransport: "WebTransport", WebRTC: "WebRTC", MainResourceHasCacheControlNoStore: "MainResourceHasCacheControlNoStore", MainResourceHasCacheControlNoCache: "MainResourceHasCacheControlNoCache", SubresourceHasCacheControlNoStore: "SubresourceHasCacheControlNoStore", SubresourceHasCacheControlNoCache: "SubresourceHasCacheControlNoCache", ContainsPlugins: "ContainsPlugins", DocumentLoaded: "DocumentLoaded", OutstandingNetworkRequestOthers: "OutstandingNetworkRequestOthers", RequestedMIDIPermission: "RequestedMIDIPermission", RequestedAudioCapturePermission: "RequestedAudioCapturePermission", RequestedVideoCapturePermission: "RequestedVideoCapturePermission", RequestedBackForwardCacheBlockedSensors: "RequestedBackForwardCacheBlockedSensors", RequestedBackgroundWorkPermission: "RequestedBackgroundWorkPermission", BroadcastChannel: "BroadcastChannel", WebXR: "WebXR", SharedWorker: "SharedWorker", SharedWorkerMessage: "SharedWorkerMessage", SharedWorkerWithNoActiveClient: "SharedWorkerWithNoActiveClient", WebLocks: "WebLocks", WebHID: "WebHID", WebBluetooth: "WebBluetooth", WebShare: "WebShare", RequestedStorageAccessGrant: "RequestedStorageAccessGrant", WebNfc: "WebNfc", OutstandingNetworkRequestFetch: "OutstandingNetworkRequestFetch", OutstandingNetworkRequestXHR: "OutstandingNetworkRequestXHR", AppBanner: "AppBanner", Printing: "Printing", WebDatabase: "WebDatabase", PictureInPicture: "PictureInPicture", SpeechRecognizer: "SpeechRecognizer", IdleManager: "IdleManager", PaymentManager: "PaymentManager", SpeechSynthesis: "SpeechSynthesis", KeyboardLock: "KeyboardLock", WebOTPService: "WebOTPService", OutstandingNetworkRequestDirectSocket: "OutstandingNetworkRequestDirectSocket", InjectedJavascript: "InjectedJavascript", InjectedStyleSheet: "InjectedStyleSheet", KeepaliveRequest: "KeepaliveRequest", IndexedDBEvent: "IndexedDBEvent", Dummy: "Dummy", JsNetworkRequestReceivedCacheControlNoStoreResource: "JsNetworkRequestReceivedCacheControlNoStoreResource", WebRTCUsedWithCCNS: "WebRTCUsedWithCCNS", WebTransportUsedWithCCNS: "WebTransportUsedWithCCNS", WebSocketUsedWithCCNS: "WebSocketUsedWithCCNS", SmartCard: "SmartCard", LiveMediaStreamTrack: "LiveMediaStreamTrack", UnloadHandler: "UnloadHandler", ParserAborted: "ParserAborted", ContentSecurityHandler: "ContentSecurityHandler", ContentWebAuthenticationAPI: "ContentWebAuthenticationAPI", ContentFileChooser: "ContentFileChooser", ContentSerial: "ContentSerial", ContentFileSystemAccess: "ContentFileSystemAccess", ContentMediaDevicesDispatcherHost: "ContentMediaDevicesDispatcherHost", ContentWebBluetooth: "ContentWebBluetooth", ContentWebUSB: "ContentWebUSB", ContentMediaSessionService: "ContentMediaSessionService", ContentScreenReader: "ContentScreenReader", ContentDiscarded: "ContentDiscarded", EmbedderPopupBlockerTabHelper: "EmbedderPopupBlockerTabHelper", EmbedderSafeBrowsingTriggeredPopupBlocker: "EmbedderSafeBrowsingTriggeredPopupBlocker", EmbedderSafeBrowsingThreatDetails: "EmbedderSafeBrowsingThreatDetails", EmbedderAppBannerManager: "EmbedderAppBannerManager", EmbedderDomDistillerViewerSource: "EmbedderDomDistillerViewerSource", EmbedderDomDistillerSelfDeletingRequestDelegate: "EmbedderDomDistillerSelfDeletingRequestDelegate", EmbedderOomInterventionTabHelper: "EmbedderOomInterventionTabHelper", EmbedderOfflinePage: "EmbedderOfflinePage", EmbedderChromePasswordManagerClientBindCredentialManager: "EmbedderChromePasswordManagerClientBindCredentialManager", EmbedderPermissionRequestManager: "EmbedderPermissionRequestManager", EmbedderModalDialog: "EmbedderModalDialog", EmbedderExtensions: "EmbedderExtensions", EmbedderExtensionMessaging: "EmbedderExtensionMessaging", EmbedderExtensionMessagingForOpenPort: "EmbedderExtensionMessagingForOpenPort", EmbedderExtensionSentMessageToCachedFrame: "EmbedderExtensionSentMessageToCachedFrame", RequestedByWebViewClient: "RequestedByWebViewClient", PostMessageByWebViewClient: "PostMessageByWebViewClient", CacheControlNoStoreDeviceBoundSessionTerminated: "CacheControlNoStoreDeviceBoundSessionTerminated", CacheLimitPrunedOnModerateMemoryPressure: "CacheLimitPrunedOnModerateMemoryPressure", CacheLimitPrunedOnCriticalMemoryPressure: "CacheLimitPrunedOnCriticalMemoryPressure"});
+inspectorBackend.registerEnum("Page.BackForwardCacheNotRestoredReason", {NotPrimaryMainFrame: "NotPrimaryMainFrame", BackForwardCacheDisabled: "BackForwardCacheDisabled", RelatedActiveContentsExist: "RelatedActiveContentsExist", HTTPStatusNotOK: "HTTPStatusNotOK", SchemeNotHTTPOrHTTPS: "SchemeNotHTTPOrHTTPS", Loading: "Loading", WasGrantedMediaAccess: "WasGrantedMediaAccess", DisableForRenderFrameHostCalled: "DisableForRenderFrameHostCalled", DomainNotAllowed: "DomainNotAllowed", HTTPMethodNotGET: "HTTPMethodNotGET", SubframeIsNavigating: "SubframeIsNavigating", Timeout: "Timeout", CacheLimit: "CacheLimit", JavaScriptExecution: "JavaScriptExecution", RendererProcessKilled: "RendererProcessKilled", RendererProcessCrashed: "RendererProcessCrashed", SchedulerTrackedFeatureUsed: "SchedulerTrackedFeatureUsed", ConflictingBrowsingInstance: "ConflictingBrowsingInstance", CacheFlushed: "CacheFlushed", ServiceWorkerVersionActivation: "ServiceWorkerVersionActivation", SessionRestored: "SessionRestored", ServiceWorkerPostMessage: "ServiceWorkerPostMessage", EnteredBackForwardCacheBeforeServiceWorkerHostAdded: "EnteredBackForwardCacheBeforeServiceWorkerHostAdded", RenderFrameHostReused_SameSite: "RenderFrameHostReused_SameSite", RenderFrameHostReused_CrossSite: "RenderFrameHostReused_CrossSite", ServiceWorkerClaim: "ServiceWorkerClaim", IgnoreEventAndEvict: "IgnoreEventAndEvict", HaveInnerContents: "HaveInnerContents", TimeoutPuttingInCache: "TimeoutPuttingInCache", BackForwardCacheDisabledByLowMemory: "BackForwardCacheDisabledByLowMemory", BackForwardCacheDisabledByCommandLine: "BackForwardCacheDisabledByCommandLine", NetworkRequestDatAPIpeDrainedAsBytesConsumer: "NetworkRequestDatapipeDrainedAsBytesConsumer", NetworkRequestRedirected: "NetworkRequestRedirected", NetworkRequestTimeout: "NetworkRequestTimeout", NetworkExceedsBufferLimit: "NetworkExceedsBufferLimit", NavigationCancelledWhileRestoring: "NavigationCancelledWhileRestoring", NotMostRecentNavigationEntry: "NotMostRecentNavigationEntry", BackForwardCacheDisabledForPrerender: "BackForwardCacheDisabledForPrerender", UserAgentOverrideDiffers: "UserAgentOverrideDiffers", ForegroundCacheLimit: "ForegroundCacheLimit", BrowsingInstanceNotSwapped: "BrowsingInstanceNotSwapped", BackForwardCacheDisabledForDelegate: "BackForwardCacheDisabledForDelegate", UnloadHandlerExistsInMainFrame: "UnloadHandlerExistsInMainFrame", UnloadHandlerExistsInSubFrame: "UnloadHandlerExistsInSubFrame", ServiceWorkerUnregistration: "ServiceWorkerUnregistration", CacheControlNoStore: "CacheControlNoStore", CacheControlNoStoreCookieModified: "CacheControlNoStoreCookieModified", CacheControlNoStoreHTTPOnlyCookieModified: "CacheControlNoStoreHTTPOnlyCookieModified", NoResponseHead: "NoResponseHead", Unknown: "Unknown", ActivationNavigationsDisallowedForBug1234857: "ActivationNavigationsDisallowedForBug1234857", ErrorDocument: "ErrorDocument", FencedFramesEmbedder: "FencedFramesEmbedder", CookieDisabled: "CookieDisabled", HTTPAuthRequired: "HTTPAuthRequired", CookieFlushed: "CookieFlushed", BroadcastChannelOnMessage: "BroadcastChannelOnMessage", WebViewSettingsChanged: "WebViewSettingsChanged", WebViewJavaScriptObjectChanged: "WebViewJavaScriptObjectChanged", WebViewMessageListenerInjected: "WebViewMessageListenerInjected", WebViewSafeBrowsingAllowlistChanged: "WebViewSafeBrowsingAllowlistChanged", WebViewDocumentStartJavascriptChanged: "WebViewDocumentStartJavascriptChanged", WebSocket: "WebSocket", WebTransport: "WebTransport", WebRTC: "WebRTC", MainResourceHasCacheControlNoStore: "MainResourceHasCacheControlNoStore", MainResourceHasCacheControlNoCache: "MainResourceHasCacheControlNoCache", SubresourceHasCacheControlNoStore: "SubresourceHasCacheControlNoStore", SubresourceHasCacheControlNoCache: "SubresourceHasCacheControlNoCache", ContainsPlugins: "ContainsPlugins", DocumentLoaded: "DocumentLoaded", OutstandingNetworkRequestOthers: "OutstandingNetworkRequestOthers", RequestedMIDIPermission: "RequestedMIDIPermission", RequestedAudioCapturePermission: "RequestedAudioCapturePermission", RequestedVideoCapturePermission: "RequestedVideoCapturePermission", RequestedBackForwardCacheBlockedSensors: "RequestedBackForwardCacheBlockedSensors", RequestedBackgroundWorkPermission: "RequestedBackgroundWorkPermission", BroadcastChannel: "BroadcastChannel", WebXR: "WebXR", SharedWorker: "SharedWorker", SharedWorkerMessage: "SharedWorkerMessage", SharedWorkerWithNoActiveClient: "SharedWorkerWithNoActiveClient", WebLocks: "WebLocks", WebLocksContention: "WebLocksContention", WebHID: "WebHID", WebBluetooth: "WebBluetooth", WebShare: "WebShare", RequestedStorageAccessGrant: "RequestedStorageAccessGrant", WebNfc: "WebNfc", OutstandingNetworkRequestFetch: "OutstandingNetworkRequestFetch", OutstandingNetworkRequestXHR: "OutstandingNetworkRequestXHR", AppBanner: "AppBanner", Printing: "Printing", WebDatabase: "WebDatabase", PictureInPicture: "PictureInPicture", SpeechRecognizer: "SpeechRecognizer", IdleManager: "IdleManager", PaymentManager: "PaymentManager", SpeechSynthesis: "SpeechSynthesis", KeyboardLock: "KeyboardLock", WebOTPService: "WebOTPService", OutstandingNetworkRequestDirectSocket: "OutstandingNetworkRequestDirectSocket", InjectedJavascript: "InjectedJavascript", InjectedStyleSheet: "InjectedStyleSheet", KeepaliveRequest: "KeepaliveRequest", IndexedDBEvent: "IndexedDBEvent", Dummy: "Dummy", JsNetworkRequestReceivedCacheControlNoStoreResource: "JsNetworkRequestReceivedCacheControlNoStoreResource", WebRTCUsedWithCCNS: "WebRTCUsedWithCCNS", WebTransportUsedWithCCNS: "WebTransportUsedWithCCNS", WebSocketUsedWithCCNS: "WebSocketUsedWithCCNS", SmartCard: "SmartCard", LiveMediaStreamTrack: "LiveMediaStreamTrack", UnloadHandler: "UnloadHandler", ParserAborted: "ParserAborted", ContentSecurityHandler: "ContentSecurityHandler", ContentWebAuthenticationAPI: "ContentWebAuthenticationAPI", ContentFileChooser: "ContentFileChooser", ContentSerial: "ContentSerial", ContentFileSystemAccess: "ContentFileSystemAccess", ContentMediaDevicesDispatcherHost: "ContentMediaDevicesDispatcherHost", ContentWebBluetooth: "ContentWebBluetooth", ContentWebUSB: "ContentWebUSB", ContentMediaSessionService: "ContentMediaSessionService", ContentScreenReader: "ContentScreenReader", ContentDiscarded: "ContentDiscarded", EmbedderPopupBlockerTabHelper: "EmbedderPopupBlockerTabHelper", EmbedderSafeBrowsingTriggeredPopupBlocker: "EmbedderSafeBrowsingTriggeredPopupBlocker", EmbedderSafeBrowsingThreatDetails: "EmbedderSafeBrowsingThreatDetails", EmbedderAppBannerManager: "EmbedderAppBannerManager", EmbedderDomDistillerViewerSource: "EmbedderDomDistillerViewerSource", EmbedderDomDistillerSelfDeletingRequestDelegate: "EmbedderDomDistillerSelfDeletingRequestDelegate", EmbedderOomInterventionTabHelper: "EmbedderOomInterventionTabHelper", EmbedderOfflinePage: "EmbedderOfflinePage", EmbedderChromePasswordManagerClientBindCredentialManager: "EmbedderChromePasswordManagerClientBindCredentialManager", EmbedderPermissionRequestManager: "EmbedderPermissionRequestManager", EmbedderModalDialog: "EmbedderModalDialog", EmbedderExtensions: "EmbedderExtensions", EmbedderExtensionMessaging: "EmbedderExtensionMessaging", EmbedderExtensionMessagingForOpenPort: "EmbedderExtensionMessagingForOpenPort", EmbedderExtensionSentMessageToCachedFrame: "EmbedderExtensionSentMessageToCachedFrame", RequestedByWebViewClient: "RequestedByWebViewClient", PostMessageByWebViewClient: "PostMessageByWebViewClient", CacheControlNoStoreDeviceBoundSessionTerminated: "CacheControlNoStoreDeviceBoundSessionTerminated", CacheLimitPrunedOnModerateMemoryPressure: "CacheLimitPrunedOnModerateMemoryPressure", CacheLimitPrunedOnCriticalMemoryPressure: "CacheLimitPrunedOnCriticalMemoryPressure"});
 inspectorBackend.registerEnum("Page.BackForwardCacheNotRestoredReasonType", {SupportPending: "SupportPending", PageSupportNeeded: "PageSupportNeeded", Circumstantial: "Circumstantial"});
 inspectorBackend.registerEvent("Page.domContentEventFired", ["timestamp"]);
 inspectorBackend.registerEnum("Page.FileChooserOpenedEventMode", {SelectSingle: "selectSingle", SelectMultiple: "selectMultiple"});

package/front_end/generated/protocol.ts CHANGED Viewed

@@ -14981,6 +14981,7 @@ export namespace Page {
     SharedWorkerMessage = 'SharedWorkerMessage',
     SharedWorkerWithNoActiveClient = 'SharedWorkerWithNoActiveClient',
     WebLocks = 'WebLocks',
+    WebLocksContention = 'WebLocksContention',
     WebHID = 'WebHID',
     WebBluetooth = 'WebBluetooth',
     WebShare = 'WebShare',

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.snapshot.txt CHANGED Viewed

@@ -58,6 +58,36 @@ Content:
           }
         }
       }
+    },
+    {
+      "name": "listSourceFiles",
+      "description": "Returns a list of all files in the project.",
+      "parameters": {
+        "type": 6,
+        "description": "",
+        "nullable": true,
+        "required": [],
+        "properties": {}
+      }
+    },
+    {
+      "name": "selectSourceFile",
+      "description": "Returns a list of all files in the project.",
+      "parameters": {
+        "type": 6,
+        "description": "",
+        "nullable": true,
+        "required": [
+          "name"
+        ],
+        "properties": {
+          "name": {
+            "type": 1,
+            "description": "The name of the file",
+            "nullable": false
+          }
+        }
+      }
     }
   ],
   "options": {},

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as Logs from '../../logs/logs.js';
+import * as Workspace from '../../workspace/workspace.js';
 import {
   type AgentOptions,
@@ -132,8 +133,86 @@ export class ContextSelectionAgent extends AiAgent<never> {
         };
       },
     });
+    this.declareFunction<Record<string, never>>('listSourceFiles', {
+      description: `Returns a list of all files in the project.`,
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: [],
+        properties: {},
+      },
+      displayInfoFromArgs: () => {
+        return {title: lockedString('Listing source requests…')};
+      },
+      handler: async () => {
+        const files = [];
+        for (const file of this.#getUISourceCodes()) {
+          files.push(file.fullDisplayName());
+        }
+        return {
+          result: files,
+        };
+      },
+    });
+    this.declareFunction<{name: string}>('selectSourceFile', {
+      description: `Returns a list of all files in the project.`,
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: ['name'],
+        properties: {
+          name: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The name of the file',
+            nullable: false,
+          },
+        },
+      },
+      displayInfoFromArgs: args => {
+        return {title: lockedString('Getting source file'), action: `selectSourceFile(${args.name})`};
+      },
+      handler: async params => {
+        for (const file of this.#getUISourceCodes()) {
+          if (file.fullDisplayName() === params.name) {
+            return {
+              context: file,
+            };
+          }
+        }
+        return {error: 'Unable to find file.'};
+      },
+    });
   }
+  #getUISourceCodes = (): Iterable<Workspace.UISourceCode.UISourceCode> => {
+    const workspace = Workspace.Workspace.WorkspaceImpl.instance();
+    const projects = workspace.projects().filter(project => {
+      switch (project.type()) {
+        case Workspace.Workspace.projectTypes.Network:
+        case Workspace.Workspace.projectTypes.FileSystem:
+        case Workspace.Workspace.projectTypes.ConnectableFileSystem:
+          return true;
+        default:
+          return false;
+      }
+    });
+    const uiSourceCodes = [];
+    for (const project of projects) {
+      for (const uiSourceCode of project.uiSourceCodes()) {
+        uiSourceCodes.push(uiSourceCode);
+      }
+    }
+    return uiSourceCodes;
+  };
   async * handleContextDetails(): AsyncGenerator<ContextResponse, void, void> {
   }

package/front_end/models/javascript_metadata/NativeFunctions.js CHANGED Viewed

@@ -6821,6 +6821,10 @@ export const NativeFunctions = [
     name: "UIEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "WebMCPEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "WheelEvent",
     signatures: [["type","?eventInitDict"]]

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts CHANGED Viewed

@@ -452,9 +452,11 @@ export class AXBreadcrumb {
     this.#element = document.createElement('div');
     this.#element.classList.add('ax-breadcrumb');
-    this.#element.setAttribute(
-        'jslog',
-        `${VisualLogging.treeItem().track({click: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter'})}`);
+    this.#element.setAttribute('jslog', `${VisualLogging.treeItem().track({
+                                 click: true,
+                                 resize: true,
+                                 keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter'
+                               })}`);
     elementsToAXBreadcrumb.set(this.#element, this);
     this.#nodeElement = document.createElement('div');

package/front_end/panels/ai_assistance/AiAssistancePanel.ts CHANGED Viewed

@@ -164,6 +164,10 @@ const UIStringsNotTranslate = {
    *@description Placeholder text for the chat UI input.
    */
   inputPlaceholderForNoContext: 'Ask AI Assistance',
+  /**
+   * @description Placeholder text for the chat UI input with branding Gemini (do not translate)
+   */
+  inputPlaceholderForNoContextBranded: 'Ask Gemini',
   /**
    * @description Disclaimer text right after the chat input.
    */
@@ -591,6 +595,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onContextClick: this.#handleContextClick.bind(this),
           onNewConversation: this.#handleNewChatRequest.bind(this),
           onCopyResponseClick: this.#onCopyResponseClick.bind(this),
+          onContextRemoved: isAiAssistanceContextSelectionAgentEnabled() ? this.#handleContextRemoved.bind(this) : null,
         }
       };
     }
@@ -1011,6 +1016,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceWithNoRecording);
       }
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+        if (AiAssistanceModel.AiUtils.isGeminiBranding()) {
+          return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContextBranded);
+        }
         return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContext);
     }
   }
@@ -1098,6 +1106,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     // Node picker is using linkifier.
   }
+  #handleContextRemoved(): void {
+    this.#conversation?.setContext(null);
+    this.requestUpdate();
+  }
   #canExecuteQuery(): boolean {
     const isBrandedBuild = Boolean(Root.Runtime.hostConfig.aidaAvailability?.enabled);
     const isBlockedByAge = Boolean(Root.Runtime.hostConfig.aidaAvailability?.blockedByAge);
@@ -1292,22 +1305,23 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (data instanceof Workspace.UISourceCode.UISourceCode) {
       const context = new AiAssistanceModel.FileAgent.FileContext(data);
       this.#selectedFile = context;
+      this.#conversation?.setContext(context);
     } else if (data instanceof SDK.DOMModel.DOMNode) {
       const context = new AiAssistanceModel.StylingAgent.NodeContext(data);
       this.#selectedElement = context;
+      this.#conversation?.setContext(context);
     } else if (data instanceof SDK.NetworkRequest.NetworkRequest) {
       const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
       const context = new AiAssistanceModel.NetworkAgent.RequestContext(data, calculator);
       this.#selectedRequest = context;
+      this.#conversation?.setContext(context);
     } else if (data instanceof AiAssistanceModel.AIContext.AgentFocus) {
       const context = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(data);
       this.#selectedPerformanceTrace = context;
+      this.#conversation?.setContext(context);
     }
-    this.#updateConversationState(this.#conversation);
+    this.requestUpdate();
   };
   async #startConversation(

package/front_end/panels/ai_assistance/components/ChatInput.ts CHANGED Viewed

@@ -39,6 +39,10 @@ const UIStrings = {
    * @description The footer disclaimer that links to more information about the AI feature.
    */
   learnAbout: 'Learn about AI in DevTools',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContext: 'Remove selected context',
 } as const;
 /*
@@ -137,23 +141,27 @@ export interface ViewInput {
   onImagePaste: (event: ClipboardEvent) => void;
   onImageDragOver: (event: DragEvent) => void;
   onImageDrop: (event: DragEvent) => void;
+  onContextRemoved: (() => void)|null;
 }
 export type ViewOutput = undefined;
-export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
-  const chatInputContainerCls = Lit.Directives.classMap({
-    'chat-input-container': true,
-    'single-line-layout': !input.selectedContext,
-    disabled: input.isTextInputDisabled,
-  });
-  const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
-    const classes = Lit.Directives.classMap({
-      'chat-input-disclaimer': true,
-      'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
-    });
-    // clang-format off
+export const
+    DEFAULT_VIEW =
+        (input: ViewInput, output: ViewOutput, target: HTMLElement):
+            void => {
+              const chatInputContainerCls = Lit.Directives.classMap({
+                'chat-input-container': true,
+                'single-line-layout': !input.selectedContext,
+                disabled: input.isTextInputDisabled,
+              });
+              const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
+                const classes = Lit.Directives.classMap({
+                  'chat-input-disclaimer': true,
+                  'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
+                });
+                // clang-format off
     return html`
       <div class=${classes}>
         <button
@@ -185,10 +193,10 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         </div></devtools-tooltip>
       </div>
     `;
-    // clang-format on
-  };
+                // clang-format on
+              };
-  // clang-format off
+              // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
     <style>${chatInputStyles}</style>
@@ -363,6 +371,16 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                             :
                             input.selectedContext.getTitle()}
                         </span>
+                        ${input.onContextRemoved ? html`
+                                  <devtools-button
+                                    title=${i18nString(UIStrings.removeContext)}
+                                    aria-label=${i18nString(UIStrings.removeContext)}
+                                    class="remove-context"
+                                    .iconName=${'cross'}
+                                    .size=${Buttons.Button.Size.MICRO}
+                                    .jslogContext=${'context-removed'}
+                                    .variant=${Buttons.Button.Variant.ICON}
+                                    @click=${input.onContextRemoved}></devtools-button>` : Lit.nothing}
                       </div>
                     </div>`
                   : Lit.nothing}
@@ -462,8 +480,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ${renderRelevantDataDisclaimer(RELEVANT_DATA_LINK_FOOTER_ID)}
     </footer>
   `, target);
-  // clang-format on
-};
+              // clang-format on
+            };
 /**
  * ChatInput is a presenter for the input area in the AI Assistance panel.
@@ -503,6 +521,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   onInspectElementClick = (): void => {};
   onCancelClick = (): void => {};
   onNewConversation = (): void => {};
+  onContextRemoved: (() => void)|null = null;
   async #handleTakeScreenshot(): Promise<void> {
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
@@ -685,6 +704,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           onImageUpload: this.onImageUpload,
           onImageDragOver: this.#handleImageDragOver,
           onImageDrop: this.#handleImageDrop,
+          onContextRemoved: this.onContextRemoved,
         },
         undefined, this.contentElement);
   }

package/front_end/panels/ai_assistance/components/ChatMessage.ts CHANGED Viewed

@@ -323,6 +323,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           }
           return renderStep({
             step: part.step,
+            isLoading: input.isLoading,
             markdownRenderer: input.markdownRenderer,
             isLast: isLastPart,
           });
@@ -450,11 +451,12 @@ function renderStepDetails({
   // clang-format on
 }
-function renderStepBadge({step, isLast}: {
+function renderStepBadge({step, isLoading, isLast}: {
   step: Step,
+  isLoading: boolean,
   isLast: boolean,
 }): Lit.LitTemplate {
-  if (step.isLoading && isLast && !step.sideEffect) {
+  if (isLoading && isLast && !step.sideEffect) {
     return html`<devtools-spinner></devtools-spinner>`;
   }
@@ -478,8 +480,9 @@ function renderStepBadge({step, isLast}: {
     ></devtools-icon>`;
 }
-function renderStep({step, markdownRenderer, isLast}: {
+function renderStep({step, isLoading, markdownRenderer, isLast}: {
   step: Step,
+  isLoading: boolean,
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
@@ -496,7 +499,7 @@ function renderStep({step, markdownRenderer, isLast}: {
       .open=${Boolean(step.sideEffect)}>
       <summary>
         <div class="summary">
-          ${renderStepBadge({ step, isLast })}
+          ${renderStepBadge({ step, isLoading, isLast })}
           ${renderTitle(step)}
           <devtools-icon
             class="arrow"

package/front_end/panels/ai_assistance/components/ChatView.ts CHANGED Viewed

@@ -56,6 +56,7 @@ export interface Props {
   onContextClick: () => void;
   onNewConversation: () => void;
   onCopyResponseClick: (message: ModelChatMessage) => void;
+  onContextRemoved: (() => void)|null;
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
   messages: Message[];
@@ -175,6 +176,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             onTextSubmit: input.onTextSubmit,
             onCancelClick: input.onCancelClick,
             onNewConversation: input.onNewConversation,
+            onContextRemoved: input.onContextRemoved,
           })} ${ref(element => { output.input = element as UI.Widget.WidgetElement<ChatInput>; } )}></devtools-widget>
         </main>
       </div>

package/front_end/panels/ai_assistance/components/chatInput.css CHANGED Viewed

@@ -22,7 +22,6 @@
   max-width: var(--sys-size-36);
   background-color: var(--sys-color-cdt-base-container);
   width: 100%;
 }
 .chat-readonly-container {
@@ -221,6 +220,8 @@
   .resource-link,
   .resource-task {
+    display: flex;
+    align-items: center;
     cursor: pointer;
     padding: var(--sys-size-2) var(--sys-size-3);
     font: var(--sys-typescale-body5-regular);
@@ -239,6 +240,12 @@
     & .title {
       vertical-align: middle;
       font: var(--sys-typescale-body5-regular);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    & .remove-context {
+      vertical-align: middle;
     }
     &.has-picker-behavior {
@@ -253,8 +260,8 @@
     devtools-file-source-icon {
       display: inline-flex;
       vertical-align: middle;
-      width: var(--sys-size-7);
-      height: var(--sys-size-7);
+      min-width: var(--sys-size-7);
+      min-height: var(--sys-size-7);
     }
     /*

package/front_end/panels/animation/AnimationGroupPreviewUI.ts CHANGED Viewed

@@ -98,7 +98,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
     <div class="animation-group-preview-ui">
       <button
-        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true})}
+        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true, resize: true})}
         class=${classes}
         role="option"
         aria-label=${input.label}