chrome-devtools-frontend 1.0.1564339 → 1.0.1565595

package/front_end/ui/components/text_editor/{AiCodeCompletionTeaserPlaceholder.ts → AccessiblePlaceholder.ts}

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
-import type * as UI from '../../../ui/legacy/legacy.js';
+import type * as UI from '../../legacy/legacy.js';
 
 export function flattenRect(rect: DOMRect, left: boolean): {
   left: number,
@@ -16,7 +16,6 @@ export function flattenRect(rect: DOMRect, left: boolean): {
   return {left: x, right: x, top: rect.top, bottom: rect.bottom};
 }
 
-// TODO(b/462393094): Rename this to be a generic accessible placeholder
 /**
  * A CodeMirror WidgetType that displays a UI.Widget.Widget as a placeholder.
  *
@@ -25,7 +24,7 @@ export function flattenRect(rect: DOMRect, left: boolean): {
  * it ensures that screen readers can properly announce the content within
  * the encapsulated widget.
  */
-export class AiCodeCompletionTeaserPlaceholder extends CM.WidgetType {
+export class AccessiblePlaceholder extends CM.WidgetType {
   constructor(readonly teaser: UI.Widget.Widget) {
     super();
   }
@@ -72,25 +71,7 @@ export class AiCodeCompletionTeaserPlaceholder extends CM.WidgetType {
     this.teaser?.hideWidget();
   }
 
-  override eq(other: AiCodeCompletionTeaserPlaceholder): boolean {
+  override eq(other: AccessiblePlaceholder): boolean {
     return this.teaser === other.teaser;
   }
 }
-
-export function aiCodeCompletionTeaserPlaceholder(teaser: UI.Widget.Widget): CM.Extension {
-  const plugin = CM.ViewPlugin.fromClass(class {
-    placeholder: CM.DecorationSet;
-
-    constructor(readonly view: CM.EditorView) {
-      this.placeholder = CM.Decoration.set(
-          [CM.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(teaser), side: 1}).range(0)]);
-    }
-
-    declare update: () => void;
-
-    get decorations(): CM.DecorationSet {
-      return this.view.state.doc.length ? CM.Decoration.none : this.placeholder;
-    }
-  }, {decorations: v => v.decorations});
-  return plugin;
-}

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -11,7 +11,7 @@ import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.nex
 import * as UI from '../../legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
-import {AiCodeCompletionTeaserPlaceholder} from './AiCodeCompletionTeaserPlaceholder.js';
+import {AccessiblePlaceholder} from './AccessiblePlaceholder.js';
 import {
   acceptAiAutoCompleteSuggestion,
   aiAutoCompleteSuggestion,
@@ -46,10 +46,9 @@ export interface AiCodeCompletionConfig {
   };
   onFeatureEnabled: () => void;
   onFeatureDisabled: () => void;
-  onSuggestionAccepted: () => void;
+  onSuggestionAccepted: (citations: Host.AidaClient.Citation[]) => void;
   onRequestTriggered: () => void;
-  // TODO(b/445394511): Move exposing citations to onSuggestionAccepted
-  onResponseReceived: (citations: Host.AidaClient.Citation[]) => void;
+  onResponseReceived: () => void;
   panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
 
@@ -67,6 +66,7 @@ export class AiCodeCompletionProvider {
   #teaser?: PanelCommon.AiCodeCompletionTeaser;
   #suggestionRenderingTimeout?: number;
   #editor?: TextEditor;
+  #aiCodeCompletionCitations: Host.AidaClient.Citation[] = [];
   #aiCodeCompletionConfig?: AiCodeCompletionConfig;
 
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
@@ -198,7 +198,7 @@ export class AiCodeCompletionProvider {
           if (suggestion?.rpcGlobalId) {
             this.#aiCodeCompletion?.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
           }
-          this.#aiCodeCompletionConfig?.onSuggestionAccepted();
+          this.#aiCodeCompletionConfig?.onSuggestionAccepted(this.#aiCodeCompletionCitations);
           return true;
         },
       },
@@ -266,9 +266,11 @@ export class AiCodeCompletionProvider {
       prefix: string, suffix: string, cursorPositionAtRequest: number,
       inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage,
       additionalFiles?: Host.AidaClient.AdditionalFile[]): Promise<void> {
+    this.#aiCodeCompletionCitations = [];
+
     if (!this.#aiCodeCompletion) {
       AiCodeCompletion.debugLog('Ai Code Completion is not initialized');
-      this.#aiCodeCompletionConfig?.onResponseReceived([]);
+      this.#aiCodeCompletionConfig?.onResponseReceived();
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionError);
       return;
     }
@@ -283,20 +285,20 @@ export class AiCodeCompletionProvider {
           prefix, suffix, cursorPositionAtRequest, inferenceLanguage, additionalFiles);
 
       if (!completionResponse) {
-        this.#aiCodeCompletionConfig?.onResponseReceived([]);
+        this.#aiCodeCompletionConfig?.onResponseReceived();
         return;
       }
 
       const {response, fromCache} = completionResponse;
 
       if (!response) {
-        this.#aiCodeCompletionConfig?.onResponseReceived([]);
+        this.#aiCodeCompletionConfig?.onResponseReceived();
         return;
       }
 
       const sampleResponse = await this.#generateSampleForRequest(response, prefix, suffix);
       if (!sampleResponse) {
-        this.#aiCodeCompletionConfig?.onResponseReceived([]);
+        this.#aiCodeCompletionConfig?.onResponseReceived();
         return;
       }
 
@@ -310,7 +312,7 @@ export class AiCodeCompletionProvider {
       this.#suggestionRenderingTimeout = window.setTimeout(() => {
         const currentCursorPosition = this.#editor?.editor.state.selection.main.head;
         if (currentCursorPosition !== cursorPositionAtRequest) {
-          this.#aiCodeCompletionConfig?.onResponseReceived([]);
+          this.#aiCodeCompletionConfig?.onResponseReceived();
           return;
         }
         if (this.#aiCodeCompletion) {
@@ -332,11 +334,12 @@ export class AiCodeCompletionProvider {
 
         AiCodeCompletion.debugLog(
             'Suggestion dispatched to the editor', suggestionText, 'at cursor position', cursorPositionAtRequest);
-        this.#aiCodeCompletionConfig?.onResponseReceived(citations);
+        this.#aiCodeCompletionCitations = citations;
+        this.#aiCodeCompletionConfig?.onResponseReceived();
       }, remainingDelay);
     } catch (e) {
       AiCodeCompletion.debugLog('Error while fetching code completion suggestions from AIDA', e);
-      this.#aiCodeCompletionConfig?.onResponseReceived([]);
+      this.#aiCodeCompletionConfig?.onResponseReceived();
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionError);
     }
   }
@@ -501,7 +504,7 @@ function aiCodeCompletionTeaserExtension(teaser: PanelCommon.AiCodeCompletionTea
 
     #addTeaserWidget(pos: number): void {
       this.#teaserDecoration = CodeMirror.Decoration.set([
-        CodeMirror.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(this.teaser), side: 1}).range(pos),
+        CodeMirror.Decoration.widget({widget: new AccessiblePlaceholder(this.teaser), side: 1}).range(pos),
       ]);
     }
   }, {

package/front_end/ui/components/text_editor/AiCodeGenerationProvider.ts

@@ -12,7 +12,7 @@ import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.nex
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
-import {AiCodeCompletionTeaserPlaceholder} from './AiCodeCompletionTeaserPlaceholder.js';
+import {AccessiblePlaceholder} from './AccessiblePlaceholder.js';
 import {AiCodeGenerationParser} from './AiCodeGenerationParser.js';
 import {
   acceptAiAutoCompleteSuggestion,
@@ -41,10 +41,9 @@ export interface AiCodeGenerationConfig {
   generationContext: {
     inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage,
   };
-  onSuggestionAccepted: () => void;
+  onSuggestionAccepted: (citations: Host.AidaClient.Citation[]) => void;
   onRequestTriggered: () => void;
-  // TODO(b/445394511): Move exposing citations to onSuggestionAccepted
-  onResponseReceived: (citations: Host.AidaClient.Citation[]) => void;
+  onResponseReceived: () => void;
   panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
 
@@ -56,6 +55,7 @@ export class AiCodeGenerationProvider {
   #editor?: TextEditor;
   #aiCodeGenerationConfig: AiCodeGenerationConfig;
   #aiCodeGeneration?: AiCodeGeneration.AiCodeGeneration.AiCodeGeneration;
+  #aiCodeGenerationCitations: Host.AidaClient.Citation[] = [];
 
   #aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient();
   #boundOnUpdateAiCodeGenerationState = this.#updateAiCodeGenerationState.bind(this);
@@ -170,7 +170,7 @@ export class AiCodeGenerationProvider {
           if (suggestion?.rpcGlobalId) {
             this.#aiCodeGeneration.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
           }
-          this.#aiCodeGenerationConfig?.onSuggestionAccepted();
+          this.#aiCodeGenerationConfig?.onSuggestionAccepted(this.#aiCodeGenerationCitations);
           return true;
         },
       },
@@ -251,6 +251,7 @@ export class AiCodeGenerationProvider {
       return;
     }
 
+    this.#aiCodeGenerationCitations = [];
     this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
     const cursor = this.#editor.state.selection.main.head;
     const query = AiCodeGenerationParser.extractCommentText(this.#editor.state, cursor);
@@ -272,7 +273,7 @@ export class AiCodeGenerationProvider {
       }
 
       if (!generationResponse || generationResponse.samples.length === 0) {
-        this.#aiCodeGenerationConfig?.onResponseReceived([]);
+        this.#aiCodeGenerationConfig?.onResponseReceived();
         return;
       }
       const topSample = generationResponse.samples[0];
@@ -304,11 +305,12 @@ export class AiCodeGenerationProvider {
 
       AiCodeGeneration.debugLog('Suggestion dispatched to the editor', suggestionText);
       const citations = topSample.attributionMetadata?.citations ?? [];
-      this.#aiCodeGenerationConfig?.onResponseReceived(citations);
+      this.#aiCodeGenerationCitations = citations;
+      this.#aiCodeGenerationConfig?.onResponseReceived();
       return;
     } catch (e) {
       AiCodeGeneration.debugLog('Error while fetching code generation suggestions from AIDA', e);
-      this.#aiCodeGenerationConfig?.onResponseReceived([]);
+      this.#aiCodeGenerationConfig?.onResponseReceived();
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationError);
     }
 
@@ -350,8 +352,7 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
 
       if ((isEmptyLine) || (isComment && isCursorAtEndOfLine)) {
         return CodeMirror.Decoration.set([
-          CodeMirror.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(teaser), side: 1})
-              .range(cursorPosition),
+          CodeMirror.Decoration.widget({widget: new AccessiblePlaceholder(teaser), side: 1}).range(cursorPosition),
         ]);
       }
       return CodeMirror.Decoration.none;

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -67,6 +67,9 @@ export class TextEditor extends HTMLElement {
       this.#lastScrollSnapshot = this.#activeEditor.scrollSnapshot();
       this.scrollEventHandledToSaveScrollPositionForTest();
     });
+    this.#activeEditor.scrollDOM.addEventListener('scrollend', () => {
+      this.dispatchEvent(new Event('scrollend'));
+    });
 
     this.#ensureSettingListeners();
     this.#startObservingResize();

package/front_end/ui/components/text_editor/text_editor.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * as AccessiblePlaceholder from './AccessiblePlaceholder.js';
 export * as AiCodeCompletionProvider from './AiCodeCompletionProvider.js';
-export * as AiCodeCompletionTeaserPlaceholder from './AiCodeCompletionTeaserPlaceholder.js';
 export * as AiCodeGenerationParser from './AiCodeGenerationParser.js';
 export * as AiCodeGenerationProvider from './AiCodeGenerationProvider.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';

package/front_end/ui/legacy/PopoverHelper.ts

@@ -27,6 +27,7 @@ export class PopoverHelper {
   private readonly boundMouseDown: (event: MouseEvent) => void;
   private readonly boundMouseMove: (ev: MouseEvent) => void;
   private readonly boundMouseOut: (event: MouseEvent) => void;
+  private readonly boundScrollEnd: (event: Event) => void;
   private readonly boundKeyUp: (ev: KeyboardEvent) => void;
   jslogContext?: string;
   constructor(
@@ -45,6 +46,7 @@ export class PopoverHelper {
     this.boundMouseDown = this.mouseDown.bind(this);
     this.boundMouseMove = this.mouseMove.bind(this);
     this.boundMouseOut = this.mouseOut.bind(this);
+    this.boundScrollEnd = this.scrollEnd.bind(this);
     this.boundKeyUp = this.keyUp.bind(this);
     this.container.addEventListener('mousedown', this.boundMouseDown, false);
     this.container.addEventListener('mousemove', this.boundMouseMove, false);
@@ -66,6 +68,10 @@ export class PopoverHelper {
     return this.scheduledRequest ? this.scheduledRequest.box.contains(event.clientX, event.clientY) : false;
   }
 
+  private scrollEnd(_event: Event): void {
+    this.hidePopover();
+  }
+
   private mouseDown(event: MouseEvent): void {
     if (this.disableOnClick) {
       this.hidePopover();
@@ -220,12 +226,15 @@ export class PopoverHelper {
       popover.setContentAnchorBox(request.box);
       popover.show(document);
 
+      this.container.addEventListener('scrollend', this.boundScrollEnd, true);
+
       this.hidePopoverCallback = () => {
         if (request.hide) {
           request.hide.call(null);
         }
         popover.hide();
         popoverHelperInstance = null;
+        this.container.removeEventListener('scrollend', this.boundScrollEnd, true);
       };
     });
   }
@@ -246,6 +255,7 @@ export class PopoverHelper {
     this.container.removeEventListener('mousedown', this.boundMouseDown, false);
     this.container.removeEventListener('mousemove', this.boundMouseMove, false);
     this.container.removeEventListener('mouseout', this.boundMouseOut, false);
+    this.container.removeEventListener('keyup', this.boundKeyUp, false);
   }
 }
 

package/front_end/ui/legacy/inspectorCommon.css

@@ -610,7 +610,7 @@ button.link:focus-visible {
 @media (forced-colors: active) {
   .dimmed,
   select:disabled {
-    opacity: 100%;
+    opacity: 70%;
   }
 
   .harmony-input:not([type]),

package/front_end/ui/legacy/softContextMenu.css

@@ -125,6 +125,8 @@
     background-color: Highlight;
     color: HighlightText;
     forced-color-adjust: none;
+
+    --icon-default: HighlightText;
   }
 
   .soft-context-menu .soft-context-menu-item devtools-icon,

package/front_end/ui/lit/lit.ts

@@ -4,6 +4,7 @@
 
 import type * as Lit from '../../third_party/lit/lit.js';
 
+export type {DirectiveResult} from '../../third_party/lit/lib/directive.js';
 export {
   Decorators,
   Directive,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -814,6 +814,7 @@ export const knownContextValues = new Set([
   'column-rule-color',
   'column-rule-edge-end-inset',
   'column-rule-edge-end-outset',
+  'column-rule-edge-inset',
   'column-rule-edge-inset-end',
   'column-rule-edge-inset-start',
   'column-rule-edge-start-inset',
@@ -821,6 +822,7 @@ export const knownContextValues = new Set([
   'column-rule-inset',
   'column-rule-interior-end-inset',
   'column-rule-interior-end-outset',
+  'column-rule-interior-inset',
   'column-rule-interior-inset-end',
   'column-rule-interior-inset-start',
   'column-rule-interior-start-inset',
@@ -3201,6 +3203,7 @@ export const knownContextValues = new Set([
   'row-rule-color',
   'row-rule-edge-end-inset',
   'row-rule-edge-end-outset',
+  'row-rule-edge-inset',
   'row-rule-edge-inset-end',
   'row-rule-edge-inset-start',
   'row-rule-edge-start-inset',
@@ -3208,6 +3211,7 @@ export const knownContextValues = new Set([
   'row-rule-inset',
   'row-rule-interior-end-inset',
   'row-rule-interior-end-outset',
+  'row-rule-interior-inset',
   'row-rule-interior-inset-end',
   'row-rule-interior-inset-start',
   'row-rule-interior-start-inset',
@@ -3225,7 +3229,9 @@ export const knownContextValues = new Set([
   'rule',
   'rule-break',
   'rule-color',
+  'rule-edge-inset',
   'rule-inset',
+  'rule-interior-inset',
   'rule-outset',
   'rule-set',
   'rule-set-details',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1564339"
+  "version": "1.0.1565595"
 }