chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/accessibility/accessibilityNode.css

@@ -10,7 +10,7 @@
 }
 
 .ax-ignored-info {
-  padding: 6px;
+  padding: var(--sys-size-4);
 }
 
 .ax-ignored-node-pane {
@@ -47,9 +47,9 @@ span.ax-value-undefined {
 
 .tree-outline li::before {
   content: "";
-  width: 14px;
+  width: var(--sys-size-7);
   display: inline-block;
-  margin-bottom: -2px;
+  margin-bottom: calc(-1 * var(--sys-size-2));
   margin-right: 3px;
 }
 
@@ -59,7 +59,7 @@ span.ax-value-undefined {
 
 .tree-outline li.invalid {
   position: relative;
-  left: -2px;
+  left: calc(-1 * var(--sys-size-2));
 }
 
 .tree-outline dt-icon-label + .ax-name {

package/front_end/panels/accessibility/accessibilityProperties.css

@@ -32,7 +32,7 @@ span.ax-internal-role {
 }
 
 .source-order-checkbox {
-  margin: 2px 2px 2px 5px;
+  margin: var(--sys-size-2) var(--sys-size-2) var(--sys-size-2) 5px;
 }
 
 .info-message-overflow {

package/front_end/panels/accessibility/accessibilitySidebarView.css

@@ -5,6 +5,6 @@
  */
 
 .accessibility-toggle-container {
-  padding: 12px 18px;
-  border-bottom: 1px solid var(--sys-color-divider);
+  padding: var(--sys-size-6) 18px;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/accessibility/axBreadcrumbs.css

@@ -10,19 +10,19 @@
 }
 
 .ax-breadcrumbs {
-  padding-top: 1px;
+  padding-top: var(--sys-size-1);
   margin: 0;
   position: relative;
 }
 
 .ax-breadcrumbs .ax-node {
   align-items: center;
-  margin-top: 1px;
-  min-height: 16px;
+  margin-top: var(--sys-size-1);
+  min-height: var(--sys-size-8);
   overflow-x: hidden;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 1px;
+  padding-left: var(--sys-size-3);
+  padding-right: var(--sys-size-3);
+  padding-top: var(--sys-size-1);
   position: relative;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -35,7 +35,7 @@
 }
 
 .ax-breadcrumbs .ax-node .wrapper {
-  padding-left: 12px;
+  padding-left: var(--sys-size-6);
   overflow-x: hidden;
 }
 
@@ -46,9 +46,9 @@
   content: "";
   text-shadow: none;
   margin-left: -5px;
-  margin-top: -2px;
-  height: 16px;
-  width: 16px;
+  margin-top: calc(-1 * var(--sys-size-2));
+  height: var(--sys-size-8);
+  width: var(--sys-size-8);
   position: absolute;
   display: inline-block;
 }
@@ -99,14 +99,14 @@
 .ax-breadcrumbs .ax-node.preselected:not(.inspected) .selection,
 .ax-breadcrumbs .ax-node.hovered:not(.inspected) .selection {
   display: block;
-  left: 2px;
-  right: 2px;
+  left: var(--sys-size-2);
+  right: var(--sys-size-2);
   background-color: var(--sys-color-state-hover-on-subtle);
   border-radius: 5px;
 }
 
 .ax-breadcrumbs .ax-node.preselected:not(.inspected):focus .selection {
-  border: 1px solid var(--sys-color-primary);
+  border: var(--sys-size-1) solid var(--sys-color-primary);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -678,7 +678,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       const emptyStateSuggestions = await getEmptyStateSuggestions(this.#conversation);
       const markdownRenderer = getMarkdownRenderer(this.#conversation);
       let onContextAdd: (() => void)|null = null;
-      if (isAiAssistanceContextSelectionAgentEnabled() &&
+      if (AiAssistanceModel.AiUtils.isContextSelectionEnabled() &&
           // Only add it the button if can have anything already selected
           this.#getConversationContext(this.#getDefaultConversationType())) {
         onContextAdd = this.#handleContextAdd.bind(this);
@@ -759,7 +759,8 @@ 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,
+          onContextRemoved:
+              AiAssistanceModel.AiUtils.isContextSelectionEnabled() ? this.#handleContextRemoved.bind(this) : null,
           onContextAdd,
           walkthrough: {
             onToggle: this.#toggleWalkthrough.bind(this),
@@ -946,7 +947,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE;
     }
 
-    if (isAiAssistanceContextSelectionAgentEnabled() && !targetConversationType) {
+    if (AiAssistanceModel.AiUtils.isContextSelectionEnabled() && !targetConversationType) {
       return AiAssistanceModel.AiHistoryStorage.ConversationType.NONE;
     }
 
@@ -1023,7 +1024,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     if (this.#conversation) {
-      if (this.#conversation.isEmpty && isAiAssistanceContextSelectionAgentEnabled()) {
+      if (this.#conversation.isEmpty && AiAssistanceModel.AiUtils.isContextSelectionEnabled()) {
         const context = this.#getConversationContext(this.#getDefaultConversationType());
         this.#conversation.setContext(context);
       } else {
@@ -1031,7 +1032,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         // Don't reset to the context selection agent if
         // we remove context automatically.
         // Require explicit user action.
-        if (context || !isAiAssistanceContextSelectionAgentEnabled()) {
+        if (context || !AiAssistanceModel.AiUtils.isContextSelectionEnabled()) {
           this.#conversation.setContext(context);
         }
       }
@@ -1274,7 +1275,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return true;
     }
 
-    if (!this.#conversation.selectedContext && !isAiAssistanceContextSelectionAgentEnabled()) {
+    if (!this.#conversation.selectedContext && !AiAssistanceModel.AiUtils.isContextSelectionEnabled()) {
       return true;
     }
 
@@ -1677,20 +1678,23 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         }
       };
 
+      const handleAbort = (): void => {
+        resolve(null);
+        removeListeners();
+      };
+
       const removeListeners = (): void => {
         UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, handleDOMNodeFlavorChange);
         this.#toggleSearchElementAction?.removeEventListener(
             UI.ActionRegistration.Events.TOGGLED, handleInspectModeToggled);
+        this.#runAbortController.signal.removeEventListener('abort', handleAbort);
       };
 
       UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, handleDOMNodeFlavorChange);
       this.#toggleSearchElementAction?.addEventListener(UI.ActionRegistration.Events.TOGGLED, handleInspectModeToggled);
 
       // Clean-up listeners in case of abort.
-      this.#runAbortController.signal.addEventListener('abort', () => {
-        resolve(null);
-        removeListeners();
-      }, {once: true});
+      this.#runAbortController.signal.addEventListener('abort', handleAbort, {once: true});
     });
 
     void this.#toggleSearchElementAction.execute();
@@ -2055,10 +2059,6 @@ function isAiAssistanceMultimodalInputEnabled(): boolean {
   return Boolean(Root.Runtime.hostConfig.devToolsFreestyler?.multimodal);
 }
 
-function isAiAssistanceContextSelectionAgentEnabled(): boolean {
-  return Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceContextSelectionAgent?.enabled);
-}
-
 function isAiAssistanceServerSideLoggingEnabled(): boolean {
   return !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging;
 }

package/front_end/panels/ai_assistance/ExternalHandler.ts

@@ -33,7 +33,7 @@ function resolveConversationType(contextType?: ContextType): AiAssistanceModel.A
   }
 }
 
-function getMatchingFlavorContext(
+export function getMatchingFlavorContext(
     contextOptions?: ExternalAIRequestOptions['context'],
     ): AiAssistanceModel.AiAgent.ConversationContext<unknown>|null {
   if (!contextOptions?.contextIdentifier) {

package/front_end/panels/ai_assistance/aiAssistancePanel.css

@@ -8,7 +8,7 @@
   display: flex;
   flex-wrap: wrap;
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   flex: 0 0 auto;
   justify-content: space-between;
 }

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

@@ -129,7 +129,7 @@ const SHOW_LOADING_STATE_TIMEOUT = 100;
 /**
  * Maximum allowed size for raw images uploaded by the user to prevent browser tab out-of-memory crashes.
  */
-export const MAX_IMAGE_FILE_SIZE_BYTES = 10 * 1024 * 1024;  // 10MB
+export const MAX_IMAGE_FILE_SIZE_BYTES: number = 10 * 1024 * 1024;  // 10MB
 
 const RELEVANT_DATA_LINK_CHAT_ID = 'relevant-data-link-chat';
 const RELEVANT_DATA_LINK_FOOTER_ID = 'relevant-data-link-footer';
@@ -521,7 +521,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   isContextSelected = false;
   inspectElementToggled = false;
   disclaimerText = '';
-  conversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
+  conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType =
+      AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
   multimodalInputEnabled = false;
   uploadImageInputEnabled = false;
   isReadOnly = false;

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

@@ -258,7 +258,7 @@ export class ChatView extends HTMLElement {
   #view: View;
   #cachedSummary: {markdown: string, summary: string}|null = null;
 
-  constructor(props: Props, view = DEFAULT_VIEW) {
+  constructor(props: Props, view: View = DEFAULT_VIEW) {
     super();
     this.#props = props;
     this.#view = view;

package/front_end/panels/ai_assistance/components/DisabledWidget.ts

@@ -145,7 +145,7 @@ export class DisabledWidget extends UI.Widget.Widget {
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions = Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL;
 
   #view: View;
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }

package/front_end/panels/ai_assistance/components/ExploreWidget.ts

@@ -112,7 +112,7 @@ export type View = typeof DEFAULT_VIEW;
 
 export class ExploreWidget extends UI.Widget.Widget {
   #view: View;
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }

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

@@ -43,11 +43,11 @@
   display: flex;
   position: relative;
   flex-direction: column;
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   border-radius: var(--sys-shape-corner-small);
 
   &:focus-within {
-    outline: 1px solid var(--sys-color-primary);
+    outline: var(--sys-size-1) solid var(--sys-color-primary);
     border-color: var(--sys-color-primary);
   }
 
@@ -88,14 +88,14 @@
       top: calc(-1 * var(--sys-size-2));
       right: calc(-1 * var(--sys-size-3));
       border-radius: var(--sys-shape-corner-full);
-      border: 1px solid var(--sys-color-neutral-outline);
+      border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
       background-color: var(--sys-color-cdt-base-container);
     }
 
     img {
       max-height: var(--sys-size-18);
       max-width: 100%;
-      border: 1px solid var(--sys-color-neutral-outline);
+      border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
       border-radius: var(--sys-shape-corner-small);
     }
 
@@ -108,7 +108,7 @@
       width: var(--sys-size-19);
       background-color: var(--sys-color-surface3);
       border-radius: var(--sys-shape-corner-small);
-      border: 1px solid var(--sys-color-neutral-outline);
+      border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
 
       devtools-spinner {
         color: var(--sys-color-state-disabled);
@@ -128,8 +128,8 @@
     justify-content: center;
     align-items: center;
     font: var(--sys-typescale-body5-regular);
-    border-right: 1px solid var(--sys-color-divider);
-    padding-right: 8px;
+    border-right: var(--sys-size-1) solid var(--sys-color-divider);
+    padding-right: var(--sys-size-5);
 
     &.hide-divider {
       border-right: none;
@@ -164,7 +164,7 @@
     var(--sys-size-4);
 
   &::placeholder {
-    opacity: 60%;
+    color: var(--sys-color-on-surface-subtle);
   }
 
   &:focus-visible {
@@ -252,7 +252,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--sys-color-state-focus-ring);
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
     }
 
     devtools-icon,
@@ -358,7 +358,7 @@ button.link {
   li {
     background: var(--sys-color-surface3);
     border-radius: var(--sys-shape-corner-small);
-    border: 1px solid var(--sys-color-neutral-outline);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
     padding: var(--sys-size-2) var(--sys-size-3);
     display: flex;
     flex-direction: row;
@@ -379,7 +379,7 @@ button.link {
     border: none;
 
     /* To align with other chips */
-    margin-bottom: 1px;
+    margin-bottom: var(--sys-size-1);
   }
 }
 
@@ -388,7 +388,7 @@ button.link {
   justify-content: center;
   padding-block: var(--sys-size-3);
   font: var(--sys-typescale-body5-regular);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   text-wrap: balance;
   text-align: center;
   width: 100%;

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -24,8 +24,8 @@
     }
 
     .vertical-separator {
-      height: 16px;
-      width: 1px;
+      height: var(--sys-size-8);
+      width: var(--sys-size-1);
       vertical-align: top;
       margin: 0 var(--sys-size-2);
       background: var(--sys-color-divider);
@@ -136,7 +136,7 @@
     gap: var(--sys-size-5);
     width: 100%;
     padding: var(--sys-size-7) var(--sys-size-5);
-    font-size: 12px;
+    font-size: var(--sys-typescale-body4-size);
     word-break: normal;
     overflow-wrap: anywhere;
 
@@ -207,7 +207,7 @@
         max-height: var(--sys-size-20);
         max-width: 100%;
         border-radius: var(--sys-shape-corner-small);
-        border: 1px solid var(--sys-color-neutral-outline);
+        border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
         width: fit-content;
         vertical-align: bottom;
       }
@@ -222,7 +222,7 @@
       width: var(--sys-size-18);
       background-color: var(--sys-color-surface3);
       border-radius: var(--sys-shape-corner-small);
-      border: 1px solid var(--sys-color-neutral-outline);
+      border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
 
       devtools-icon {
         color: var(--sys-color-state-disabled);
@@ -275,14 +275,14 @@
 
   .context-details {
     devtools-code-block {
-      --code-block-max-code-height: 80px;
+      --code-block-max-code-height: var(--sys-size-19);
     }
   }
 
   .step {
     width: fit-content;
     background-color: var(--sys-color-surface3);
-    border-radius: 16px;
+    border-radius: var(--sys-shape-corner-medium);
     position: relative;
 
     &.empty {
@@ -358,7 +358,7 @@
     }
 
     summary {
-      border-radius: 16px;
+      border-radius: var(--sys-shape-corner-medium);
 
       &:focus-visible {
         outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
@@ -534,7 +534,7 @@
     gap: var(--sys-size-4);
     margin-bottom: var(--sys-size-5);
     padding-bottom: var(--sys-size-5);
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
     .network-request-header {
       display: flex;
@@ -542,14 +542,14 @@
       gap: var(--sys-size-5);
 
       .network-request-icon {
-        width: 32px;
-        height: 32px;
+        width: var(--sys-size-13);
+        height: var(--sys-size-13);
         display: flex;
         align-items: center;
         justify-content: center;
         background-color: var(--sys-color-surface1);
         border-radius: var(--sys-shape-corner-small);
-        border: 1px solid var(--sys-color-divider);
+        border: var(--sys-size-1) solid var(--sys-color-divider);
         overflow: hidden;
 
         img {
@@ -559,8 +559,8 @@
         }
 
         devtools-icon {
-          width: 20px;
-          height: 20px;
+          width: var(--sys-size-9);
+          height: var(--sys-size-9);
         }
       }
 
@@ -591,8 +591,8 @@
     summary {
       list-style: none;
       cursor: pointer;
-      padding: 4px 12px;
-      border: 1px solid var(--sys-color-neutral-outline);
+      padding: var(--sys-size-3) var(--sys-size-6);
+      border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
       border-radius: var(--sys-shape-corner-small);
       color: var(--sys-color-primary);
       width: fit-content;

package/front_end/panels/ai_assistance/components/chatView.css

@@ -81,7 +81,7 @@ button.link {
 }
 
 .select-an-element-text {
-  margin-left: 2px;
+  margin-left: var(--sys-size-2);
 }
 
 main {
@@ -379,7 +379,7 @@ main {
   The `box-shadow` is a workaround to hide the content appearing between the `.input-form`
   and the footer in some resolutions even though the `.input-form` has `bottom: 0`.
   */
-  box-shadow: 0 1px var(--sys-color-cdt-base-container);
+  box-shadow: 0 var(--sys-size-1) var(--sys-color-cdt-base-container);
 
   /* Prevents the input form from jumping when the scrollbar is shown */
   /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */

package/front_end/panels/ai_assistance/components/exploreWidget.css

@@ -123,7 +123,7 @@
     align-items: center;
     padding-block: var(--sys-size-3);
     font: var(--sys-typescale-body5-regular);
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     text-wrap: balance;
     text-align: center;
 

package/front_end/panels/ai_assistance/components/exportForAgentsDialog.css

@@ -61,6 +61,10 @@
     color: var(--sys-color-on-surface);
     border-radius: var(--sys-shape-corner-small);
     border: none;
+
+    &:focus-visible {
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    }
   }
 
   main {

package/front_end/panels/ai_assistance/components/walkthroughView.css

@@ -19,14 +19,14 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 8px;
+    padding: 0 var(--sys-size-5);
     height: 35px;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     flex-shrink: 0;
   }
 
   .walkthrough-title {
-    font-size: 11px;
+    font-size: var(--sys-typescale-body5-size);
     font-weight: 500;
     color: var(--sys-color-on-surface);
   }
@@ -83,7 +83,7 @@
 
   .step-content {
     flex: 1;
-    font-size: 11px;
+    font-size: var(--sys-typescale-body5-size);
     color: var(--sys-color-on-surface);
     line-height: 1.4;
   }
@@ -94,7 +94,7 @@
     justify-content: center;
     flex: 1;
     color: var(--sys-color-on-surface-subtle);
-    font-size: 11px;
+    font-size: var(--sys-typescale-body5-size);
   }
 
   .inline-wrapper {
@@ -199,7 +199,7 @@
 
   .walkthrough-inline .steps-container {
     padding: var(--sys-size-6);
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     background-color: transparent;
   }