chrome-devtools-frontend 1.0.1526203 → 1.0.1528866

package/front_end/panels/settings/AISettingsTab.ts

@@ -474,7 +474,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       }
     } else if (setting.name === 'ai-assistance-enabled' && !setting.get()) {
       // If the "AI Assistance" is toggled off, we remove all the history entries related to the feature.
-      void AiAssistanceModel.AiHistoryStorage.instance().deleteAll();
+      void AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().deleteAll();
     }
     void this.render();
   }
@@ -551,7 +551,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     if (!settingData) {
       return Lit.nothing;
     }
-    const disabledReasons = AiAssistanceModel.getDisabledReasons(this.#aidaAvailability);
+    const disabledReasons = AiAssistanceModel.AiUtils.getDisabledReasons(this.#aidaAvailability);
     const isDisabled = disabledReasons.length > 0;
     const disabledReasonsJoined = disabledReasons.join('\n') || undefined;
     const detailsClasses = {
@@ -639,7 +639,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
   }
 
   override async render(): Promise<void> {
-    const disabledReasons = AiAssistanceModel.getDisabledReasons(this.#aidaAvailability);
+    const disabledReasons = AiAssistanceModel.AiUtils.getDisabledReasons(this.#aidaAvailability);
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off

package/front_end/panels/settings/WorkspaceSettingsTab.ts

@@ -106,6 +106,7 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.#eventListeners = [
       Persistence.IsolatedFileSystemManager.IsolatedFileSystemManager.instance().addEventListener(
           Persistence.IsolatedFileSystemManager.Events.FileSystemAdded, this.requestUpdate.bind(this)),
@@ -117,6 +118,7 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     Common.EventTarget.removeEventListeners(this.#eventListeners);
     this.#eventListeners = [];
   }

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -868,14 +868,14 @@ export class UserAgentClientHintsForm extends HTMLElement {
             <devtools-icon name=triangle-down></devtools-icon>
             ${i18nString(UIStrings.title)}
           </div>
-          <devtools-icon class=info-icon name=info title=${i18nString(UIStrings.userAgentClientHintsInfo)}></devtools-icon>
+          <devtools-icon tabindex=${this.#isFormDisabled ? '-1' : '0'} class=info-icon name=info aria-label=${i18nString(UIStrings.userAgentClientHintsInfo)} title=${i18nString(UIStrings.userAgentClientHintsInfo)}></devtools-icon>
           <x-link
            tabindex=${this.#isFormDisabled ? '-1' : '0'}
            href="https://web.dev/user-agent-client-hints/"
            target="_blank"
            class="link"
            @keypress=${this.#handleLinkPress}
-           aria-label=${i18nString(UIStrings.userAgentClientHintsInfo)}
+           aria-label=${i18nString(UIStrings.learnMore)}
            jslog=${VisualLogging.link('learn-more').track({click: true})}
           >
             ${i18nString(UIStrings.learnMore)}

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
@@ -334,6 +335,17 @@ export class AiCodeCompletionPlugin extends Plugin {
   }
 
   #isAiCodeCompletionEnabled(): boolean {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByGeo) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByAge) {
+      return false;
+    }
     return Boolean(Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
   }
 

package/front_end/panels/sources/BreakpointsView.ts

@@ -720,6 +720,7 @@ export class BreakpointsView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.requestUpdate();
   }
 

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -449,6 +449,7 @@ export class DebuggerPlugin extends Plugin {
   }
 
   override willHide(): void {
+    super.willHide();
     this.popoverHelper?.hidePopover();
   }
 

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -6,6 +6,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line rulesdir/es-modules-import
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
@@ -320,8 +321,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
       AiWarningInfobarPlugin,
     ];
 
-    if (Root.Runtime.hostConfig.aidaAvailability?.enabled &&
-        Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled) {
+    if (this.#isAiCodeCompletionEnabled()) {
       sourceFramePluginsList.push(AiCodeCompletionPlugin);
     }
     return sourceFramePluginsList;
@@ -511,6 +511,21 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
         this.#uiSourceCode.url().startsWith('debugger://'));
     Host.userMetrics.sourcesPanelFileOpened(mediaType);
   }
+
+  static #isAiCodeCompletionEnabled(): boolean {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByGeo) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByAge) {
+      return false;
+    }
+    return Boolean(aidaAvailability?.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
+  }
 }
 
 function getIconDataForLevel(level: Workspace.UISourceCode.Message.Level): IconButton.Icon.IconWithName {

package/front_end/panels/timeline/README.md

@@ -28,8 +28,8 @@ This option loads the DevTools frontend in a browser tab in Chrome, but requires
 
 1.  Head to `devtools-frontend/test/unittests/fixtures/traces` and run `npx statikk --cors`. [This is a tool built by @paulirish to serve local files on a server](https://github.com/paulirish/statikk).
 2.  Build and run the Chrome for Testing binary from devtools-frontend.
-3.  Visit `devtools://devtools/bundled/devtools_app.html` and let it load (you only need to do this the first time you load up the Chrome for Testing binary).
-4.  Update the URL by appending `?loadTimelineFromURL=http://localhost:1234/name-of-trace-file.json`. **Swap the port to the one `statikk` is using on your machine**.
+3.  Visit `devtools://devtools/bundled/trace_app.html` and let it load (you only need to do this the first time you load up the Chrome for Testing binary).
+4.  Update the URL by appending `?traceURL=http://localhost:1234/name-of-trace-file.json`. **Swap the port to the one `statikk` is using on your machine**.
 5.  When you make changes and rebuild DevTools, simply refresh the URL! **Make sure you disable network caching in your DevTools on DevTools instance.**
 
 Each one has its pros and cons, but typically **this option is preferred** for quick iteration because you don't have to manually record or import a trace every time you reload.

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -252,7 +252,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     const contextMenu = new UI.ContextMenu.ContextMenu(mouseEvent);
     if (perfAIEntryPointEnabled && this.parsedTrace) {
-      const callTree = AIAssistance.AICallTree.fromEvent(entry, this.parsedTrace);
+      const callTree = AIAssistance.AICallTree.AICallTree.fromEvent(entry, this.parsedTrace);
       if (callTree) {
         const action = UI.ActionRegistry.ActionRegistry.instance().getAction(PERF_AI_ACTION_ID);
 

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1408,6 +1408,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   }
 
   override willHide(): void {
+    super.willHide();
     this.#networkPersistedGroupConfigSetting.removeChangeListener(this.resizeToPreferredHeights, this);
     Workspace.IgnoreListManager.IgnoreListManager.instance().removeChangeListener(this.#boundRefreshAfterIgnoreList);
   }
@@ -1535,16 +1536,16 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
 
       const event = selectionIsEvent(selection) ? selection.event : null;
 
-      let focus = UI.Context.Context.instance().flavor(AIAssistance.AgentFocus);
+      let focus = UI.Context.Context.instance().flavor(AIAssistance.AIContext.AgentFocus);
       if (focus) {
         focus = focus.withEvent(event);
       } else if (event) {
-        focus = AIAssistance.AgentFocus.fromEvent(this.#parsedTrace, event);
+        focus = AIAssistance.AIContext.AgentFocus.fromEvent(this.#parsedTrace, event);
       } else {
         focus = null;
       }
 
-      UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, focus);
+      UI.Context.Context.instance().setFlavor(AIAssistance.AIContext.AgentFocus, focus);
     });
   }
 

package/front_end/panels/timeline/TimelineLayersView.ts

@@ -55,6 +55,7 @@ export class TimelineLayersView extends UI.SplitWidget.SplitWidget {
   }
 
   override wasShown(): void {
+    super.wasShown();
     if (this.updateWhenVisible) {
       this.updateWhenVisible = false;
       this.update();

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -8,11 +8,15 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as LayerViewer from '../layer_viewer/layer_viewer.js';
 
 import timelinePaintProfilerStyles from './timelinePaintProfiler.css.js';
 import {TracingFrameLayerTree} from './TracingLayerTree.js';
 
+const {html, render} = Lit;
+const {createRef, ref} = Lit.Directives;
+
 export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
   private readonly logAndImageSplitWidget: UI.SplitWidget.SplitWidget;
   private readonly imageView: TimelinePaintImageView;
@@ -27,14 +31,12 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
 
   constructor(parsedTrace: Trace.TraceModel.ParsedTrace) {
     super(false, false);
-    this.element.classList.add('timeline-paint-profiler-view');
     this.setSidebarSize(60);
     this.setResizable(false);
 
     this.#parsedTrace = parsedTrace;
 
-    this.logAndImageSplitWidget = new UI.SplitWidget.SplitWidget(true, false);
-    this.logAndImageSplitWidget.element.classList.add('timeline-paint-profiler-log-split');
+    this.logAndImageSplitWidget = new UI.SplitWidget.SplitWidget(true, false, 'timeline-paint-profiler-log-split');
     this.setMainWidget(this.logAndImageSplitWidget);
     this.imageView = new TimelinePaintImageView();
     this.logAndImageSplitWidget.setMainWidget(this.imageView);
@@ -204,53 +206,112 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
   }
 }
 
+export interface TimelinePaintImageViewInput {
+  maskElementHidden: boolean;
+  imageContainerHidden: boolean;
+  imageURL: string;
+  imageContainerWebKitTransform: string;
+  maskElementStyle: {
+    width?: string,
+    height?: string,
+    borderLeftWidth?: string,
+    borderTopWidth?: string,
+    borderRightWidth?: string,
+    borderBottomWidth?: string,
+  };
+}
+
+export const DEFAULT_VIEW = (input: TimelinePaintImageViewInput, output: undefined, target: HTMLElement): {
+  imageElementNaturalHeight: number,
+  imageElementNaturalWidth: number,
+} => {
+  const imageElementRef = createRef<HTMLImageElement>();
+  // clang-format off
+  render(html`
+  <div class="paint-profiler-image-view fill">
+    <div class="paint-profiler-image-container" style="-webkit-transform: ${input.imageContainerWebKitTransform}">
+      <img src=${input.imageURL} display=${input.imageContainerHidden ? 'none' : 'block'} ${ref(imageElementRef)}>
+      <div style=${Lit.Directives.styleMap({
+        display: input.maskElementHidden ? 'none' : 'block',
+        ...input.maskElementStyle,})}>
+      </div>
+    </div>
+  </div>`,
+ target);
+  // clang-format on
+
+  // The elements are guaranteed to exist after render completes
+  // because they are not conditionally rendered within the template.
+  const imageElement = imageElementRef.value;
+
+  if (!imageElement?.naturalHeight || !imageElement.naturalWidth) {
+    throw new Error('ImageElement were not found in the TimelinePaintImageView.');
+  }
+
+  return {imageElementNaturalHeight: imageElement.naturalHeight, imageElementNaturalWidth: imageElement.naturalWidth};
+};
 export class TimelinePaintImageView extends UI.Widget.Widget {
-  private imageContainer: HTMLElement;
-  private imageElement: HTMLImageElement;
-  private readonly maskElement: HTMLElement;
   private transformController: LayerViewer.TransformController.TransformController;
   private maskRectangle?: Protocol.DOM.Rect|null;
-  constructor() {
-    super({useShadowDom: true});
-    this.registerRequiredCSS(timelinePaintProfilerStyles);
 
-    this.contentElement.classList.add('fill', 'paint-profiler-image-view');
-    this.imageContainer = this.contentElement.createChild('div', 'paint-profiler-image-container');
-    this.imageElement = this.imageContainer.createChild('img');
-    this.maskElement = this.imageContainer.createChild('div');
-    this.imageElement.addEventListener('load', this.updateImagePosition.bind(this), false);
+  #inputData: TimelinePaintImageViewInput = {
+    maskElementHidden: true,
+    imageContainerHidden: true,
+    imageURL: '',
+    imageContainerWebKitTransform: '',
+    maskElementStyle: {},
+  };
+
+  #view: typeof DEFAULT_VIEW;
+  #imageElementDimensions?: {
+    naturalHeight: number,
+    naturalWidth: number,
+  };
+
+  constructor(view = DEFAULT_VIEW) {
+    super();
+    this.registerRequiredCSS(timelinePaintProfilerStyles);
+    this.#view = view;
     this.transformController = new LayerViewer.TransformController.TransformController((this.contentElement), true);
     this.transformController.addEventListener(
         LayerViewer.TransformController.Events.TRANSFORM_CHANGED, this.updateImagePosition, this);
   }
 
   override onResize(): void {
-    if (this.imageElement.src) {
-      this.updateImagePosition();
-    }
+    this.requestUpdate();
+    this.updateImagePosition();
   }
 
   private updateImagePosition(): void {
-    const width = this.imageElement.naturalWidth;
-    const height = this.imageElement.naturalHeight;
+    if (!this.#imageElementDimensions) {
+      return;
+    }
+
+    const width = this.#imageElementDimensions.naturalWidth;
+    const height = this.#imageElementDimensions.naturalHeight;
     const clientWidth = this.contentElement.clientWidth;
     const clientHeight = this.contentElement.clientHeight;
 
     const paddingFraction = 0.1;
     const paddingX = clientWidth * paddingFraction;
-    const paddingY = clientHeight * paddingFraction;
-    const scaleX = (clientWidth - paddingX) / width;
-    const scaleY = (clientHeight - paddingY) / height;
-    const scale = Math.min(scaleX, scaleY);
+    const scale = clientHeight / height;
 
+    const oldMaskStyle = JSON.stringify(this.#inputData.maskElementStyle);
+    let newMaskStyle = {};
     if (this.maskRectangle) {
-      const style = this.maskElement.style;
-      style.width = width + 'px';
-      style.height = height + 'px';
-      style.borderLeftWidth = this.maskRectangle.x + 'px';
-      style.borderTopWidth = this.maskRectangle.y + 'px';
-      style.borderRightWidth = (width - this.maskRectangle.x - this.maskRectangle.width) + 'px';
-      style.borderBottomWidth = (height - this.maskRectangle.y - this.maskRectangle.height) + 'px';
+      newMaskStyle = {
+        width: width + 'px',
+        height: height + 'px',
+        borderLeftWidth: this.maskRectangle.x + 'px',
+        borderTopWidth: this.maskRectangle.y + 'px',
+        borderRightWidth: (width - this.maskRectangle.x - this.maskRectangle.width) + 'px',
+        borderBottomWidth: (height - this.maskRectangle.y - this.maskRectangle.height) + 'px',
+      };
+    }
+    this.#inputData.maskElementStyle = newMaskStyle;
+
+    if (!this.transformController) {
+      return;
     }
     this.transformController.setScaleConstraints(0.5, 10 / scale);
     let matrix = new WebKitCSSMatrix()
@@ -259,24 +320,40 @@ export class TimelinePaintImageView extends UI.Widget.Widget {
                      .scale(scale, scale)
                      .translate(-width / 2, -height / 2);
     const bounds = Geometry.boundsForTransformedPoints(matrix, [0, 0, 0, width, height, 0]);
-    this.transformController.clampOffsets(
-        paddingX - bounds.maxX, clientWidth - paddingX - bounds.minX, paddingY - bounds.maxY,
-        clientHeight - paddingY - bounds.minY);
+    this.transformController.clampOffsets(paddingX - bounds.maxX, clientWidth - paddingX - bounds.minX, 0, 0);
     matrix = new WebKitCSSMatrix()
                  .translate(this.transformController.offsetX(), this.transformController.offsetY())
                  .multiply(matrix);
-    this.imageContainer.style.webkitTransform = matrix.toString();
+
+    const oldTransform = this.#inputData.imageContainerWebKitTransform;
+    const newTransform = matrix.toString();
+    this.#inputData.imageContainerWebKitTransform = newTransform;
+
+    if (oldTransform !== newTransform || oldMaskStyle !== JSON.stringify(newMaskStyle)) {
+      this.requestUpdate();
+    }
   }
 
   showImage(imageURL?: string): void {
-    this.imageContainer.classList.toggle('hidden', !imageURL);
+    this.#inputData.imageContainerHidden = !imageURL;
     if (imageURL) {
-      this.imageElement.src = imageURL;
+      this.#inputData.imageURL = imageURL;
     }
+    this.requestUpdate();
   }
 
   setMask(maskRectangle: Protocol.DOM.Rect|null): void {
     this.maskRectangle = maskRectangle;
-    this.maskElement.classList.toggle('hidden', !maskRectangle);
+
+    this.#inputData.maskElementHidden = !maskRectangle;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const {imageElementNaturalHeight, imageElementNaturalWidth} =
+        this.#view(this.#inputData, undefined, this.contentElement);
+    this.#imageElementDimensions = {naturalHeight: imageElementNaturalHeight, naturalWidth: imageElementNaturalWidth};
+    // Image can only be updated to correctly fit the component when the component has loaded.
+    this.updateImagePosition();
   }
 }