chrome-devtools-frontend 1.0.1593518 → 1.0.1593959

package/front_end/generated/protocol.ts

@@ -1221,6 +1221,7 @@ export namespace Audits {
     AutofillAndManualTextPolicyControlledFeaturesInfo = 'AutofillAndManualTextPolicyControlledFeaturesInfo',
     AutofillPolicyControlledFeatureInfo = 'AutofillPolicyControlledFeatureInfo',
     ManualTextPolicyControlledFeatureInfo = 'ManualTextPolicyControlledFeatureInfo',
+    FormModelContextParameterMissingTitleAndDescription = 'FormModelContextParameterMissingTitleAndDescription',
   }
 
   /**
@@ -3033,6 +3034,11 @@ export namespace CSS {
      * The array enumerates @starting-style at-rules starting with the innermost one, going outwards.
      */
     startingStyles?: CSSStartingStyle[];
+    /**
+     * @navigation CSS at-rule array.
+     * The array enumerates @navigation at-rules starting with the innermost one, going outwards.
+     */
+    navigations?: CSSNavigation[];
   }
 
   /**
@@ -3047,6 +3053,7 @@ export namespace CSS {
     ScopeRule = 'ScopeRule',
     StyleRule = 'StyleRule',
     StartingStyleRule = 'StartingStyleRule',
+    NavigationRule = 'NavigationRule',
   }
 
   /**
@@ -3342,6 +3349,29 @@ export namespace CSS {
     styleSheetId?: DOM.StyleSheetId;
   }
 
+  /**
+   * CSS Navigation at-rule descriptor.
+   */
+  export interface CSSNavigation {
+    /**
+     * Navigation rule text.
+     */
+    text: string;
+    /**
+     * Whether the navigation condition is satisfied.
+     */
+    active?: boolean;
+    /**
+     * The associated rule header range in the enclosing stylesheet (if
+     * available).
+     */
+    range?: SourceRange;
+    /**
+     * Identifier of the stylesheet containing this object (if exists).
+     */
+    styleSheetId?: DOM.StyleSheetId;
+  }
+
   /**
    * CSS Scope at-rule descriptor.
    */
@@ -3676,6 +3706,10 @@ export namespace CSS {
      * @supports CSS at-rule condition. Only one type of condition should be set.
      */
     supports?: CSSSupports;
+    /**
+     * @navigation condition. Only one type of condition should be set.
+     */
+    navigation?: CSSNavigation;
     /**
      * Block body.
      */
@@ -4165,6 +4199,19 @@ export namespace CSS {
     supports: CSSSupports;
   }
 
+  export interface SetNavigationTextRequest {
+    styleSheetId: DOM.StyleSheetId;
+    range: SourceRange;
+    text: string;
+  }
+
+  export interface SetNavigationTextResponse extends ProtocolResponseWithError {
+    /**
+     * The resulting CSS Navigation rule after modification.
+     */
+    navigation: CSSNavigation;
+  }
+
   export interface SetScopeTextRequest {
     styleSheetId: DOM.StyleSheetId;
     range: SourceRange;

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -363,4 +363,5 @@ export class AiCodeCompletion {
 export const enum ContextFlavor {
   CONSOLE = 'console',  // generated code can contain console specific APIs like `$0`.
   SOURCES = 'sources',
+  STYLES = 'styles',
 }

package/front_end/models/emulation/DeviceModeModel.ts

@@ -113,6 +113,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #emulationModel: SDK.EmulationModel.EmulationModel|null;
   #onModelAvailable: (() => void)|null;
   #outlineRect?: Rect;
+  #screenOrientationLocked: boolean;
 
   private constructor() {
     super();
@@ -172,6 +173,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.#emulationModel = null;
     this.#onModelAvailable = null;
+    this.#screenOrientationLocked = false;
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.EmulationModel.EmulationModel, this);
   }
 
@@ -442,6 +444,9 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         this.#onModelAvailable = null;
         callback();
       }
+      emulationModel.addEventListener(
+          SDK.EmulationModel.EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED, this.onScreenOrientationLockChanged,
+          this);
       const resourceTreeModel = emulationModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
       if (resourceTreeModel) {
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameChange, this);
@@ -454,7 +459,12 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   modelRemoved(emulationModel: SDK.EmulationModel.EmulationModel): void {
     if (this.#emulationModel === emulationModel) {
+      emulationModel.removeEventListener(
+          SDK.EmulationModel.EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED, this.onScreenOrientationLockChanged,
+          this);
       this.#emulationModel = null;
+      this.#screenOrientationLocked = false;
+      this.dispatchEventToListeners(Events.UPDATED);
     }
   }
 
@@ -471,6 +481,43 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.showHingeIfApplicable(overlayModel);
   }
 
+  private onScreenOrientationLockChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.EmulationModel.ScreenOrientationLockChangedEvent>): void {
+    this.#screenOrientationLocked = event.data.locked;
+    if (event.data.locked && event.data.orientation) {
+      this.applyOrientationLock(event.data.orientation);
+    }
+    this.dispatchEventToListeners(Events.UPDATED);
+  }
+
+  private applyOrientationLock(orientation: Protocol.Emulation.ScreenOrientation): void {
+    const wantsLandscape = orientation.type === Protocol.Emulation.ScreenOrientationType.LandscapePrimary ||
+        orientation.type === Protocol.Emulation.ScreenOrientationType.LandscapeSecondary;
+
+    if (this.#type === Type.Device && this.#device && this.#mode) {
+      // For device emulation, switch to the matching orientation mode.
+      const isCurrentlyLandscape =
+          this.#mode.orientation === Horizontal || this.#mode.orientation === HorizontalSpanned;
+      if (wantsLandscape !== isCurrentlyLandscape) {
+        const rotationPartner = this.#device.getRotationPartner(this.#mode);
+        if (rotationPartner) {
+          this.emulate(this.#type, this.#device, rotationPartner);
+        }
+      }
+    } else if (this.#type === Type.Responsive) {
+      // For responsive mode, swap width/height if orientation doesn't match.
+      const appliedSize = this.appliedDeviceSize();
+      const isCurrentlyLandscape = appliedSize.width > appliedSize.height;
+      if (wantsLandscape !== isCurrentlyLandscape) {
+        this.setSizeAndScaleToFit(appliedSize.height, appliedSize.width);
+      }
+    }
+  }
+
+  isScreenOrientationLocked(): boolean {
+    return this.#screenOrientationLocked;
+  }
+
   private scaleSettingChanged(): void {
     this.calculateAndEmulate(false);
   }

package/front_end/models/issues_manager/IssueAggregator.ts

@@ -17,7 +17,6 @@ import {HeavyAdIssue} from './HeavyAdIssue.js';
 import {Issue, IssueCategory, IssueKind, unionIssueKind} from './Issue.js';
 import type {EventTypes as IssuesManagerEventsTypes, IssueAddedEvent} from './IssuesManager.js';
 import {Events as IssuesManagerEvents} from './IssuesManagerEvents.js';
-import {LowTextContrastIssue} from './LowTextContrastIssue.js';
 import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
 import {MixedContentIssue} from './MixedContentIssue.js';
 import {PartitioningBlobURLIssue} from './PartitioningBlobURLIssue.js';
@@ -64,7 +63,6 @@ export class AggregatedIssue extends Issue {
   #cspIssues = new Set<ContentSecurityPolicyIssue>();
   #deprecationIssues = new Set<DeprecationIssue>();
   #issueKind = IssueKind.IMPROVEMENT;
-  #lowContrastIssues = new Set<LowTextContrastIssue>();
   #cookieDeprecationMetadataIssues = new Set<CookieDeprecationMetadataIssue>();
   #mixedContentIssues = new Set<MixedContentIssue>();
   #partitioningBlobURLIssues = new Set<PartitioningBlobURLIssue>();
@@ -142,10 +140,6 @@ export class AggregatedIssue extends Issue {
     return this.#deprecationIssues;
   }
 
-  getLowContrastIssues(): Iterable<LowTextContrastIssue> {
-    return this.#lowContrastIssues;
-  }
-
   override requests(): Iterable<Protocol.Audits.AffectedRequest> {
     return this.#affectedRequests.values();
   }
@@ -267,9 +261,6 @@ export class AggregatedIssue extends Issue {
     if (issue instanceof SharedArrayBufferIssue) {
       this.#sharedArrayBufferIssues.add(issue);
     }
-    if (issue instanceof LowTextContrastIssue) {
-      this.#lowContrastIssues.add(issue);
-    }
     if (issue instanceof CorsIssue) {
       this.#corsIssues.add(issue);
     }

package/front_end/models/issues_manager/IssuesManager.ts

@@ -22,7 +22,6 @@ import {GenericIssue} from './GenericIssue.js';
 import {HeavyAdIssue} from './HeavyAdIssue.js';
 import type {Issue, IssueKind} from './Issue.js';
 import {Events} from './IssuesManagerEvents.js';
-import {LowTextContrastIssue} from './LowTextContrastIssue.js';
 import {MixedContentIssue} from './MixedContentIssue.js';
 import {PartitioningBlobURLIssue} from './PartitioningBlobURLIssue.js';
 import {PermissionElementIssue} from './PermissionElementIssue.js';
@@ -81,10 +80,6 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.SharedDictionaryIssue,
     SharedDictionaryIssue.fromInspectorIssue,
   ],
-  [
-    Protocol.Audits.InspectorIssueCode.LowTextContrastIssue,
-    LowTextContrastIssue.fromInspectorIssue,
-  ],
   [
     Protocol.Audits.InspectorIssueCode.CorsIssue,
     CorsIssue.fromInspectorIssue,

package/front_end/models/issues_manager/issues_manager.ts

@@ -7,7 +7,6 @@ import * as CheckFormsIssuesTrigger from './CheckFormsIssuesTrigger.js';
 import * as ClientHintIssue from './ClientHintIssue.js';
 import * as ConnectionAllowlistIssue from './ConnectionAllowlistIssue.js';
 import * as ContentSecurityPolicyIssue from './ContentSecurityPolicyIssue.js';
-import * as ContrastCheckTrigger from './ContrastCheckTrigger.js';
 import * as CookieDeprecationMetadataIssue from './CookieDeprecationMetadataIssue.js';
 import * as CookieIssue from './CookieIssue.js';
 import * as CorsIssue from './CorsIssue.js';
@@ -21,7 +20,6 @@ import * as Issue from './Issue.js';
 import * as IssueAggregator from './IssueAggregator.js';
 import * as IssueResolver from './IssueResolver.js';
 import * as IssuesManager from './IssuesManager.js';
-import * as LowTextContrastIssue from './LowTextContrastIssue.js';
 import * as MarkdownIssueDescription from './MarkdownIssueDescription.js';
 import * as MixedContentIssue from './MixedContentIssue.js';
 import * as PartitioningBlobURLIssue from './PartitioningBlobURLIssue.js';
@@ -42,7 +40,6 @@ export {
   ClientHintIssue,
   ConnectionAllowlistIssue,
   ContentSecurityPolicyIssue,
-  ContrastCheckTrigger,
   CookieDeprecationMetadataIssue,
   CookieIssue,
   CorsIssue,
@@ -56,7 +53,6 @@ export {
   IssueAggregator,
   IssueResolver,
   IssuesManager,
-  LowTextContrastIssue,
   MarkdownIssueDescription,
   MixedContentIssue,
   PartitioningBlobURLIssue,

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7221,6 +7221,10 @@ export const NativeFunctions = [
     name: "OffscreenCanvas",
     signatures: [["width","height"]]
   },
+  {
+    name: "OverscrollEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "setValueAndClosePopup",
     signatures: [["numberValue","stringValue","is_keyboard_event"]]

package/front_end/models/lighthouse/lighthouse.ts

@@ -0,0 +1,9 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as ReporterTypes from './LighthouseReporterTypes.js';
+
+export {
+  ReporterTypes,
+};

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -70,6 +70,9 @@ function getTooltipDisclaimerText(noLogging: boolean, panel: AiCodeCompletion.Ai
       return noLogging ?
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionNoLoggingInSources) :
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionInSources);
+    case AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES:
+      // TODO(476101019): update with string for styles pane
+      return '';
   }
 }
 

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -147,6 +147,9 @@ function getTooltipDisclaimerText(noLogging: boolean, panel: AiCodeCompletion.Ai
       return noLogging ?
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeGenerationNoLoggingInSources) :
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeGenerationInSources);
+    case AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES:
+      // TODO(476101019): update with string for styles pane
+      return '';
   }
 }
 

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -18,11 +18,6 @@ export class StylesAiCodeCompletionProvider {
 
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
-  #debouncedRequestAidaSuggestion =
-      Common.Debouncer.debounce((prefix: string, suffix: string, cursorPositionAtRequest: number) => {
-        void this.#requestAidaSuggestion(prefix, suffix, cursorPositionAtRequest);
-      }, TextEditor.AiCodeCompletionProvider.AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
-
   private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
     if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
@@ -113,7 +108,7 @@ export class StylesAiCodeCompletionProvider {
     prefix = prefix + text;
     const suffix = content.substring(propertyEndOffset);
     // TODO(b/476098133): Consider adjusting cursor position
-    this.#debouncedRequestAidaSuggestion(prefix, suffix, cursorPosition);
+    await this.#requestAidaSuggestion(prefix, suffix, cursorPosition);
   }
 
   async #requestAidaSuggestion(prefix: string, suffix: string, cursorPositionAtRequest: number): Promise<void> {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -42,9 +42,11 @@ import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -70,6 +72,7 @@ import {
 } from './StylePropertiesSection.js';
 import {StylePropertyHighlighter} from './StylePropertyHighlighter.js';
 import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import * as StylesAiCodeCompletionProvider from './StylesAiCodeCompletionProvider.js';
 import type {StylesContainer} from './StylesContainer.js';
 import stylesSidebarPaneStyles from './stylesSidebarPane.css.js';
 import {WebCustomData} from './WebCustomData.js';
@@ -1736,6 +1739,12 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
   private treeElement: StylePropertyTreeElement;
   private isEditingName: boolean;
   private readonly cssVariables: string[];
+  aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
+  aiCodeCompletionProvider?: StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider;
+
+  #debouncedTriggerAiCodeCompletion = Common.Debouncer.debounce(() => {
+    void this.triggerAiCodeCompletion();
+  }, TextEditor.AiCodeCompletionProvider.AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
 
   constructor(treeElement: StylePropertyTreeElement, isEditingName: boolean, completions: string[] = []) {
     // Use the same callback both for applyItemCallback and acceptItemCallback.
@@ -1794,6 +1803,27 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         }
       }
     }
+
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
+      this.aiCodeCompletionConfig = {
+        completionContext: {},
+        generationContext: {},
+        onFeatureEnabled: () => {},
+        onFeatureDisabled: () => {},
+        onSuggestionAccepted: () => {},
+        onRequestTriggered: () => {},
+        onResponseReceived: () => {},
+        panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+        getCompletionHint: this.getCompletionHint.bind(this),
+        getCurrentText: () => {
+          return this.text();
+        },
+        setAiAutoCompletion: () => {},
+      };
+      this.aiCodeCompletionProvider =
+          StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
+    }
   }
 
   override onKeyDown(event: Event): void {
@@ -1844,6 +1874,13 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     return false;
   }
 
+  override onInput(event: Event): void {
+    super.onInput(event);
+    if (this.aiCodeCompletionProvider) {
+      this.#debouncedTriggerAiCodeCompletion();
+    }
+  }
+
   private handleNameOrValueUpDown(event: Event): boolean {
     function finishHandler(this: CSSPropertyPrompt, _originalValue: string, _replacementString: string): void {
       // Synthesize property text disregarding any comments, custom whitespace etc.
@@ -2054,6 +2091,48 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       return subtitleElement;
     }
   }
+
+  private async triggerAiCodeCompletion(): Promise<void> {
+    const selection = this.element().getComponentSelection();
+    if (!this.aiCodeCompletionProvider || !selection || selection.rangeCount === 0) {
+      return;
+    }
+    const range = selection.getRangeAt(0);
+    const userInput = this.text();
+    // Only trigger if caret is at end of text content
+    if (range.endOffset < userInput.length) {
+      return;
+    }
+    const cssModel = this.treeElement.stylesContainer().cssModel();
+    if (!cssModel) {
+      return;
+    }
+    await this.aiCodeCompletionProvider.triggerAiCodeCompletion(
+        userInput, range.endOffset, this.isEditingName, this.treeElement.property, cssModel);
+  }
+
+  /**
+   * Extracts the remaining portion of the suggestion text that follows the
+   * user's current input.
+   */
+  private getCompletionHint(): string|null {
+    const topSuggestion = this.isSuggestBoxVisible() ? this.suggestBox?.completion() : null;
+    const suggestionText = topSuggestion?.text;
+    if (!suggestionText) {
+      return null;
+    }
+    const userInput = this.text();
+    let completionHint = suggestionText;
+    // Iterate from the longest possible overlap down to the shortest
+    for (let i = Math.min(userInput.length, suggestionText.length); i > 0; i--) {
+      const overlapCandidate = suggestionText.substring(0, i);
+      if (userInput.endsWith(overlapCandidate)) {
+        completionHint = suggestionText.slice(i);
+        break;
+      }
+    }
+    return completionHint;
+  }
 }
 
 export function unescapeCssString(input: string): string {