chrome-devtools-frontend 1.0.1534251 → 1.0.1534717

package/docs/contributing/infrastructure.md

@@ -68,6 +68,27 @@ https://chromium.googlesource.com/chromium/tools/build/+/refs/heads/main/recipes
 and upload a CL for
 [`chromium/tools/build`](https://chromium.googlesource.com/chromium/tools/build/+/refs/heads/main).
 
+It's good practice to also manually test your recipes. You can test your recipe
+changes against a build that was performed with the same recipes. To do so
+follow these steps:
+- authenticate with `led auth-login`
+- select a particular build that ran with your target recipe ([example](https://ci.chromium.org/ui/p/devtools-frontend/builders/try/dtf_linux_dbg/14161))
+- got to Infra tab and collect the Buildbucket id (8700153319150087425 for the example above)
+- run `led get-build --real-build 8700153319150087425 | led edit-recipe-bundle | led edit-system -p 25 | led launch` while in your local recipe checkout
+- collect the output link to your test build and verify that you got the expected result
+
+## Pin older version of DevTools recipes to a branch
+
+Updating a recipe that depends on DevTools repo recent changes can break the
+build in beta/stable/extended branches. If those changes cannot be back-merged
+into the branches you can pin the older version of the recipe to the branches in
+infra/config.
+
+To do so update the `legacy_recipe` config in `definitions.star` with the number
+of the last branch you need the old version of the recipe to run on and with the
+revision hash of that version. Branches with number higher than the one you
+configured will run ToT recipe version. [Example](https://crrev.com/c/7003685)
+
 ## Updating test commands in the infrastructure
 
 The DevTools recipes are defined in
@@ -228,6 +249,17 @@ Below is a detailed description of what happens in such a build:
   - fail the builder if tests failed in the deflaking phase
   - otherwise report build as passing
 
+## Skip flake detection
+
+Test that are already flaky can end up being updated in CLs that do not deal
+with the original flakiness nor can be blamed for introducing or increasing the
+flakiness of the test. However CQ builder will fail in Flake Detection steps
+because they picked up the test as it was being touched.
+
+You can skip Flake Detection for your tests by adding the `Skip-Flake-Detection`
+CL footer (see example [CL](https://crrev.com/c/6994031)). Make sure you use the
+full path to your test.
+
 ### Common build failures
 
 The first place where a build usually fails is on `bot_update` and this usually

package/front_end/core/host/InspectorFrontendHost.ts

@@ -600,13 +600,9 @@ class InspectorFrontendAPIImpl {
     resourceLoaderStreamWrite(id, chunk);
   }
 }
-/**
- * Used in `front_end/devtools_compatibility.js` to verify that calls from there
- * are valid.
- */
-export type InspectorFrontendAPIImplMethods = keyof InspectorFrontendAPIImpl;
 
 (function(): void {
+
 function initializeInspectorFrontendHost(): void {
   if (!InspectorFrontendHostInstance) {
     // Instantiate stub for web-hosted mode if necessary.

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -550,5 +550,6 @@ export const enum EnumeratedHistogram {
   LighthouseCategoryUsed = 'DevTools.LighthouseCategoryUsed',
   SwatchActivated = 'DevTools.SwatchActivated',
   AnimationPlaybackRateChanged = 'DevTools.AnimationPlaybackRateChanged',
+  BuiltInAiAvailability = 'DevTools.BuiltInAiAvailability',
   // LINT.ThenChange(/front_end/devtools_compatibility.js:EnumeratedHistogram)
 }

package/front_end/core/host/UserMetrics.ts

@@ -307,6 +307,16 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordCountHistogram(
         'DevTools.PerformanceAI.MainThreadActivityResponseSize', bytes, 0, 100_000, 100);
   }
+
+  builtInAiAvailability(availability: BuiltInAiAvailability): void {
+    InspectorFrontendHostInstance.recordEnumeratedHistogram(
+        EnumeratedHistogram.BuiltInAiAvailability, availability, BuiltInAiAvailability.MAX_VALUE);
+  }
+
+  consoleInsightTeaserGenerated(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogram(
+        'DevTools.Insights.TeaserGenerationTime', timeInMilliseconds);
+  }
 }
 
 /**
@@ -1229,3 +1239,17 @@ export const enum TimelineNavigationSetting {
   SWITCHED_TO_MODERN = 3,
   MAX_VALUE = 4,
 }
+
+export const enum BuiltInAiAvailability {
+  UNAVAILABLE_HAS_GPU = 0,
+  DOWNLOADABLE_HAS_GPU = 1,
+  DOWNLOADING_HAS_GPU = 2,
+  AVAILABLE_HAS_GPU = 3,
+  DISABLED_HAS_GPU = 4,
+  UNAVAILABLE_NO_GPU = 5,
+  DOWNLOADABLE_NO_GPU = 6,
+  DOWNLOADING_NO_GPU = 7,
+  AVAILABLE_NO_GPU = 8,
+  DISABLED_NO_GPU = 9,
+  MAX_VALUE = 10,
+}

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -855,13 +855,11 @@ export class TargetBase {
  * of the invoke_enable, etc. methods that the front-end uses.
  */
 class AgentPrototype {
-  replyArgs: Record<string, string[]>;
   description = '';
   metadata: Record<string, {parameters: CommandParameter[], description: string, replyArgs: string[]}>;
   readonly domain: string;
   target!: TargetBase;
   constructor(domain: string) {
-    this.replyArgs = {};
     this.domain = domain;
     this.metadata = {};
   }
@@ -869,11 +867,6 @@ class AgentPrototype {
   registerCommand(
       methodName: UnqualifiedName, parameters: CommandParameter[], replyArgs: string[], description: string): void {
     const domainAndMethod = qualifyName(this.domain, methodName);
-    function sendMessagePromise(this: AgentPrototype, ...args: unknown[]): Promise<unknown> {
-      return AgentPrototype.prototype.sendMessageToBackendPromise.call(this, domainAndMethod, parameters, args);
-    }
-    // @ts-expect-error Method code generation
-    this[methodName] = sendMessagePromise;
     this.metadata[domainAndMethod] = {parameters, description, replyArgs};
 
     function invoke(this: AgentPrototype, request: Object|undefined = {}): Promise<Protocol.ProtocolResponseWithError> {
@@ -882,88 +875,6 @@ class AgentPrototype {
 
     // @ts-expect-error Method code generation
     this['invoke_' + methodName] = invoke;
-    this.replyArgs[domainAndMethod] = replyArgs;
-  }
-
-  private prepareParameters(
-      method: string, parameters: CommandParameter[], args: unknown[], errorCallback: (arg0: string) => void): Object
-      |null {
-    const params: Record<string, unknown> = {};
-    let hasParams = false;
-
-    for (const param of parameters) {
-      const paramName = param.name;
-      const typeName = param.type;
-      const optionalFlag = param.optional;
-
-      if (!args.length && !optionalFlag) {
-        errorCallback(
-            `Protocol Error: Invalid number of arguments for method '${method}' call. ` +
-            `It must have the following arguments ${JSON.stringify(parameters)}'.`);
-        return null;
-      }
-
-      const value = args.shift();
-      if (optionalFlag && typeof value === 'undefined') {
-        continue;
-      }
-      const expectedJSType = typeName === 'array' ? 'object' : typeName;
-      if (typeof value !== expectedJSType) {
-        errorCallback(
-            `Protocol Error: Invalid type of argument '${paramName}' for method '${method}' call. ` +
-            `It must be '${typeName}' but it is '${typeof value}'.`);
-        return null;
-      }
-
-      params[paramName] = value;
-      hasParams = true;
-    }
-
-    if (args.length) {
-      errorCallback(`Protocol Error: Extra ${args.length} arguments in a call to method '${method}'.`);
-      return null;
-    }
-
-    return hasParams ? params : null;
-  }
-
-  private sendMessageToBackendPromise(method: QualifiedName, parameters: CommandParameter[], args: unknown[]):
-      Promise<unknown> {
-    let errorMessage;
-    function onError(message: string): void {
-      console.error(message);
-      errorMessage = message;
-    }
-    const params = this.prepareParameters(method, parameters, args, onError);
-    if (errorMessage) {
-      return Promise.resolve(null);
-    }
-
-    return new Promise(resolve => {
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const callback: Callback = (error: MessageError|null, result: any|null): void => {
-        if (error) {
-          if (!test.suppressRequestErrors && error.code !== DevToolsStubErrorCode && error.code !== GenericErrorCode &&
-              error.code !== ConnectionClosedErrorCode) {
-            console.error('Request ' + method + ' failed. ' + JSON.stringify(error));
-          }
-
-          resolve(null);
-          return;
-        }
-
-        const args = this.replyArgs[method];
-        resolve(result && args.length ? result[args[0]] : undefined);
-      };
-
-      const router = this.target.router();
-      if (!router) {
-        SessionRouter.dispatchConnectionError(callback, method);
-      } else {
-        router.sendMessage(this.target.sessionId, this.domain, method, params, callback);
-      }
-    });
   }
 
   private invoke(method: QualifiedName, request: Object|null): Promise<Protocol.ProtocolResponseWithError> {

package/front_end/core/root/Runtime.ts

@@ -521,6 +521,7 @@ interface DevToolsStartingStyleDebugging {
 
 interface AiPromptApi {
   enabled: boolean;
+  allowWithoutGpu: boolean;
 }
 
 interface DevToolsIndividualRequestThrottling {

package/front_end/core/sdk/RehydratingConnection.ts

@@ -109,7 +109,7 @@ export class RehydratingConnection implements ProtocolClient.ConnectionTransport
     if (this.#rehydratingWindow.opener) {
       this.#rehydratingWindow.opener.postMessage({type: 'REHYDRATING_WINDOW_READY'});
     } else if (this.#rehydratingWindow !== window.top) {
-      this.#rehydratingWindow.parent.postMessage({type: 'REHYDRATING_IFRAME_READY'});
+      this.#rehydratingWindow.parent.postMessage({type: 'REHYDRATING_IFRAME_READY'}, '*');
     } else {
       this.#onConnectionLost(i18nString(UIStrings.noHostWindow));
     }

package/front_end/devtools_compatibility.js

@@ -7,10 +7,6 @@
 // https://crsrc.org/c/third_party/blink/renderer/controller/dev_tools_frontend_impl.cc;l=107
 (window => {
   /**
-   * A function that tries to check the remotely connected instance
-   * major version. You should check against this to provide
-   * forward and backwards compatibility.
-   *
    * @returns {number|null}
    */
   function getRemoteMajorVersion() {
@@ -24,6 +20,8 @@
       return null;
     }
   }
+  // eslint-disable-next-line no-unused-vars
+  const majorVersion = getRemoteMajorVersion();
 
   // DevToolsAPI ----------------------------------------------------------------
   /**
@@ -55,9 +53,19 @@
     _addExtensionCallback = null;
 
     /**
-     * @type {ReturnType<typeof Promise.withResolvers<string>>}
+     * @type {Promise<string>}
      */
-    _initialTargetIdPromiseWithResolver = Promise.withResolvers();
+    _initialTargetIdPromise;
+    /**
+     * @type {(param:string) => void}
+     */
+    _setInitialTargetId;
+
+    constructor() {
+      this._initialTargetIdPromise = new Promise(resolve => {
+        this._setInitialTargetId = resolve;
+      });
+    }
 
     /**
      * @param id
@@ -89,9 +97,7 @@
     }
 
     /**
-     * @typedef {import('./core/host/InspectorFrontendHostAPI.js').Events} Events
-     * @typedef {import('./core/host/InspectorFrontendHost.js').InspectorFrontendAPIImplMethods} Methods
-     * @param method {`${Events|Methods}`}
+     * @param method
      * @param args
      */
     _dispatchOnInspectorFrontendAPI(method, args) {
@@ -161,7 +167,7 @@
     }
 
     /**
-     * @param count {number}
+     * @param count
      */
     deviceCountUpdated(count) {
       this._dispatchOnInspectorFrontendAPI('deviceCountUpdated', [count]);
@@ -341,7 +347,7 @@
      * @param targetId {string}
      */
     setInitialTargetId(targetId) {
-      this._initialTargetIdPromiseWithResolver.resolve(targetId);
+      this._setInitialTargetId(targetId);
     }
 
     /**
@@ -437,7 +443,8 @@
     TimelineNavigationSettingState: 'DevTools.TimelineNavigationSettingState',
     SyncSetting: 'DevTools.SyncSetting',
     SwatchActivated: 'DevTools.SwatchActivated',
-    AnimationPlaybackRateChanged: 'DevTools.AnimationPlaybackRateChanged'
+    AnimationPlaybackRateChanged: 'DevTools.AnimationPlaybackRateChanged',
+    BuiltInAiAvailability: 'DevTools.BuiltInAiAvailability'
     // LINT.ThenChange(/front_end/core/host/InspectorFrontendHostAPI.ts:EnumeratedHistogram)
   };
 
@@ -452,6 +459,34 @@
      */
     events;
 
+    /**
+     * @returns
+     */
+    getSelectionBackgroundColor() {
+      return '#6e86ff';
+    }
+
+    /**
+     * @returns
+     */
+    getSelectionForegroundColor() {
+      return '#ffffff';
+    }
+
+    /**
+     * @returns
+     */
+    getInactiveSelectionBackgroundColor() {
+      return '#c9c8c8';
+    }
+
+    /**
+     * @returns
+     */
+    getInactiveSelectionForegroundColor() {
+      return '#323232';
+    }
+
     /**
      * @returns
      */
@@ -986,12 +1021,21 @@
     }
 
     // Backward-compatible methods below this line --------------------------------------------
+    /**
+     * Support for legacy front-ends (<M65).
+     * @returns
+     */
+    isUnderTest() {
+      return false;
+    }
+
+    // Backward-compatible methods end before line --------------------------------------------
 
     /**
      * @returns
      */
     initialTargetId() {
-      return DevToolsAPI._initialTargetIdPromiseWithResolver.promise;
+      return DevToolsAPI._initialTargetIdPromise;
     }
 
     /**
@@ -1110,9 +1154,155 @@
   }
 
   function installBackwardsCompatibility() {
-    // Any polyfill that we need for backwards compatibility should be
-    // Added in this function
-    // Use getRemoteMajorVersion to get the correct Major Chrome version
+    const majorVersion = getRemoteMajorVersion();
+    if (!majorVersion) {
+      return;
+    }
+
+    /** @type {!Array<string>} */
+    const styleRules = [];
+    // Shadow DOM V0 polyfill
+    if (majorVersion <= 73 && !Element.prototype.createShadowRoot) {
+      Element.prototype.createShadowRoot = function() {
+        try {
+          return this.attachShadow({mode: 'open'});
+        } catch {
+          // some elements we use to add shadow roots can no
+          // longer have shadow roots.
+          const fakeShadowHost = document.createElement('span');
+          this.appendChild(fakeShadowHost);
+          fakeShadowHost.className = 'fake-shadow-host';
+          return fakeShadowHost.createShadowRoot();
+        }
+      };
+
+      const origAdd = DOMTokenList.prototype.add;
+      DOMTokenList.prototype.add = function(...tokens) {
+        if (tokens[0].startsWith('insertion-point') || tokens[0].startsWith('tabbed-pane-header')) {
+          this._myElement.slot = '.' + tokens[0];
+        }
+        return origAdd.apply(this, tokens);
+      };
+
+      const origCreateElement = Document.prototype.createElement;
+      Document.prototype.createElement = function(tagName, ...rest) {
+        if (tagName === 'content') {
+          tagName = 'slot';
+        }
+        const element = origCreateElement.call(this, tagName, ...rest);
+        element.classList._myElement = element;
+        return element;
+      };
+
+      Object.defineProperty(HTMLSlotElement.prototype, 'select', {
+        set(selector) {
+          this.name = selector;
+        }
+      });
+    }
+
+    // Custom Elements V0 polyfill
+    if (majorVersion <= 73 && !Document.prototype.hasOwnProperty('registerElement')) {
+      const fakeRegistry = new Map();
+      Document.prototype.registerElement = function(typeExtension, options) {
+        const {prototype, extends: localName} = options;
+        const document = this;
+        const callback = function() {
+          const element = document.createElement(localName || typeExtension);
+          const skip = new Set(['constructor', '__proto__']);
+          for (const key of Object.keys(Object.getOwnPropertyDescriptors(prototype.__proto__ || {}))) {
+            if (skip.has(key)) {
+              continue;
+            }
+            element[key] = prototype[key];
+          }
+          element.setAttribute('is', typeExtension);
+          if (element['createdCallback']) {
+            element['createdCallback']();
+          }
+          return element;
+        };
+        fakeRegistry.set(typeExtension, callback);
+        return callback;
+      };
+
+      const origCreateElement = Document.prototype.createElement;
+      Document.prototype.createElement = function(tagName, fakeCustomElementType) {
+        const fakeConstructor = fakeRegistry.get(fakeCustomElementType);
+        if (fakeConstructor) {
+          return fakeConstructor();
+        }
+        return origCreateElement.call(this, tagName, fakeCustomElementType);
+      };
+
+      // DevTools front-ends mistakenly assume that
+      //   classList.toggle('a', undefined) works as
+      //   classList.toggle('a', false) rather than as
+      //   classList.toggle('a');
+      const originalDOMTokenListToggle = DOMTokenList.prototype.toggle;
+      DOMTokenList.prototype.toggle = function(token, force) {
+        if (arguments.length === 1) {
+          force = !this.contains(token);
+        }
+        return originalDOMTokenListToggle.call(this, token, Boolean(force));
+      };
+    }
+
+    if (majorVersion <= 66) {
+      /** @type {(!function(number, number):Element|undefined)} */
+      ShadowRoot.prototype.__originalShadowRootElementFromPoint;
+
+      if (!ShadowRoot.prototype.__originalShadowRootElementFromPoint) {
+        ShadowRoot.prototype.__originalShadowRootElementFromPoint = ShadowRoot.prototype.elementFromPoint;
+        /**
+         *  @param x
+         *  @param y
+         *  @returns
+         */
+        ShadowRoot.prototype.elementFromPoint = function(x, y) {
+          const originalResult = ShadowRoot.prototype.__originalShadowRootElementFromPoint.apply(this, arguments);
+          if (this.host && originalResult === this.host) {
+            return null;
+          }
+          return originalResult;
+        };
+      }
+    }
+
+    if (majorVersion <= 71) {
+      styleRules.push(
+          '.coverage-toolbar-container, .animation-timeline-toolbar-container, .computed-properties { flex-basis: auto; }');
+    }
+
+    installExtraStyleRules(styleRules);
+  }
+
+  /**
+   * @param styleRules
+   */
+  function installExtraStyleRules(styleRules) {
+    if (!styleRules.length) {
+      return;
+    }
+    const styleText = styleRules.join('\n');
+    document.head.appendChild(createStyleElement(styleText));
+
+    const origCreateShadowRoot = HTMLElement.prototype.createShadowRoot;
+    HTMLElement.prototype.createShadowRoot = function(...args) {
+      const shadowRoot = origCreateShadowRoot.call(this, ...args);
+      shadowRoot.appendChild(createStyleElement(styleText));
+      return shadowRoot;
+    };
+  }
+
+  /**
+   * @param styleText
+   * @returns
+   */
+  function createStyleElement(styleText) {
+    const style = document.createElement('style');
+    style.textContent = styleText;
+    return style;
   }
 
   installBackwardsCompatibility();

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 
 let builtInAiInstance: BuiltInAi|undefined;
-let availability = '';
+let availability: LanguageModelAvailability|undefined;
+let hasGpu: boolean|undefined;
+let isFirstRun = true;
 
 export interface LanguageModel {
   promptStreaming: (arg0: string, opts?: {
@@ -15,20 +18,62 @@ export interface LanguageModel {
   destroy: () => void;
 }
 
+export const enum LanguageModelAvailability {
+  UNAVAILABLE = 'unavailable',
+  DOWNLOADABLE = 'downloadable',
+  DOWNLOADING = 'downloading',
+  AVAILABLE = 'available',
+  DISABLED = 'disabled',
+}
+
 export class BuiltInAi {
   #consoleInsightsSession: LanguageModel;
 
-  static async isAvailable(): Promise<boolean> {
+  static async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
     if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.enabled) {
-      return false;
+      return LanguageModelAvailability.DISABLED;
+    }
+    try {
+      // @ts-expect-error
+      availability = await window.LanguageModel.availability({expectedOutputs: [{type: 'text', languages: ['en']}]}) as
+          LanguageModelAvailability;
+      return availability;
+    } catch {
+      return LanguageModelAvailability.UNAVAILABLE;
     }
-    // @ts-expect-error
-    availability = await window.LanguageModel.availability({expectedOutputs: [{type: 'text', languages: ['en']}]});
-    return availability === 'available';
   }
 
   static cachedIsAvailable(): boolean {
-    return availability === 'available';
+    return availability === LanguageModelAvailability.AVAILABLE;
+  }
+
+  static isGpuAvailable(): boolean {
+    const hasGpuHelper = (): boolean => {
+      const canvas = document.createElement('canvas');
+      try {
+        const webgl = canvas.getContext('webgl');
+        if (!webgl) {
+          return false;
+        }
+        const debugInfo = webgl.getExtension('WEBGL_debug_renderer_info');
+        if (!debugInfo) {
+          return false;
+        }
+        const renderer = webgl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+        if (renderer.includes('SwiftShader')) {
+          return false;
+        }
+      } catch {
+        return false;
+      }
+      return true;
+    };
+
+    if (hasGpu !== undefined) {
+      return hasGpu;
+    }
+    hasGpu = hasGpuHelper();
+    return hasGpu;
   }
 
   private constructor(consoleInsightsSession: LanguageModel) {
@@ -37,40 +82,97 @@ export class BuiltInAi {
 
   static async instance(): Promise<BuiltInAi|undefined> {
     if (builtInAiInstance === undefined) {
-      if (!(await BuiltInAi.isAvailable())) {
-        return undefined;
+      if (isFirstRun) {
+        const languageModelAvailability = await BuiltInAi.getLanguageModelAvailability();
+        const hasGpu = BuiltInAi.isGpuAvailable();
+        if (hasGpu) {
+          switch (languageModelAvailability) {
+            case LanguageModelAvailability.UNAVAILABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_HAS_GPU);
+              break;
+            case LanguageModelAvailability.DOWNLOADABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_HAS_GPU);
+              break;
+            case LanguageModelAvailability.DOWNLOADING:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_HAS_GPU);
+              break;
+            case LanguageModelAvailability.AVAILABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_HAS_GPU);
+              break;
+            case LanguageModelAvailability.DISABLED:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_HAS_GPU);
+              break;
+          }
+        } else {
+          switch (languageModelAvailability) {
+            case LanguageModelAvailability.UNAVAILABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_NO_GPU);
+              break;
+            case LanguageModelAvailability.DOWNLOADABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_NO_GPU);
+              break;
+            case LanguageModelAvailability.DOWNLOADING:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_NO_GPU);
+              break;
+            case LanguageModelAvailability.AVAILABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_NO_GPU);
+              break;
+            case LanguageModelAvailability.DISABLED:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_NO_GPU);
+              break;
+          }
+        }
+        isFirstRun = false;
+        if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !hasGpu) {
+          return undefined;
+        }
+        if (languageModelAvailability !== LanguageModelAvailability.AVAILABLE) {
+          return undefined;
+        }
+      } else {
+        if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !BuiltInAi.isGpuAvailable()) {
+          return undefined;
+        }
+        if ((await BuiltInAi.getLanguageModelAvailability()) !== LanguageModelAvailability.AVAILABLE) {
+          return undefined;
+        }
       }
-      // @ts-expect-error
-      const consoleInsightsSession = await window.LanguageModel.create({
-        initialPrompts: [{
-          role: 'system',
-          content: `
-You are an expert web developer. Your goal is to help a human web developer who
-is using Chrome DevTools to debug a web site or web app. The Chrome DevTools
-console is showing a message which is either an error or a warning. Please help
-the user understand the problematic console message.
 
-Your instructions are as follows:
-  - Explain the reason why the error or warning is showing up.
-  - The explanation has a maximum length of 200 characters. Anything beyond this
-    length will be cut off. Make sure that your explanation is at most 200 characters long.
-  - Your explanation should not end in the middle of a sentence.
-  - Your explanation should consist of a single paragraph only. Do not include any
-    headings or code blocks. Only write a single paragraph of text.
-  - Your response should be concise and to the point. Avoid lengthy explanations
-    or unnecessary details.
-          `
-        }],
-        expectedInputs: [{
-          type: 'text',
-          languages: ['en'],
-        }],
-        expectedOutputs: [{
-          type: 'text',
-          languages: ['en'],
-        }],
-      }) as LanguageModel;
-      builtInAiInstance = new BuiltInAi(consoleInsightsSession);
+      try {
+        // @ts-expect-error
+        const consoleInsightsSession = await window.LanguageModel.create({
+          initialPrompts: [{
+            role: 'system',
+            content: `
+  You are an expert web developer. Your goal is to help a human web developer who
+  is using Chrome DevTools to debug a web site or web app. The Chrome DevTools
+  console is showing a message which is either an error or a warning. Please help
+  the user understand the problematic console message.
+
+  Your instructions are as follows:
+    - Explain the reason why the error or warning is showing up.
+    - The explanation has a maximum length of 200 characters. Anything beyond this
+      length will be cut off. Make sure that your explanation is at most 200 characters long.
+    - Your explanation should not end in the middle of a sentence.
+    - Your explanation should consist of a single paragraph only. Do not include any
+      headings or code blocks. Only write a single paragraph of text.
+    - Your response should be concise and to the point. Avoid lengthy explanations
+      or unnecessary details.
+            `
+          }],
+          expectedInputs: [{
+            type: 'text',
+            languages: ['en'],
+          }],
+          expectedOutputs: [{
+            type: 'text',
+            languages: ['en'],
+          }],
+        }) as LanguageModel;
+        builtInAiInstance = new BuiltInAi(consoleInsightsSession);
+      } catch {
+        return undefined;
+      }
     }
     return builtInAiInstance;
   }

package/front_end/panels/common/BadgeNotification.ts

@@ -6,7 +6,6 @@ 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 Badges from '../../models/badges/badges.js';
-import * as WindowBoundsService from '../../services/window_bounds/window_bounds.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -166,8 +165,7 @@ export class BadgeNotification extends UI.Widget.Widget {
 
   #positionNotification(): void {
     const boundingRect = this.contentElement.getBoundingClientRect();
-    const container =
-        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+    const container = UI.UIUtils.getDevToolsBoundingElement();
     this.contentElement.positionAt(
         LEFT_OFFSET, container.clientHeight - boundingRect.height - BOTTOM_OFFSET, container);
   }

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -346,6 +346,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#headerText = this.#consoleViewMessage.toMessageTextString().substring(0, 70);
     this.#isGenerating = true;
     this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
+    const startTime = performance.now();
     let teaserText = '';
     try {
       for await (const chunk of this.#getOnDeviceInsight()) {
@@ -366,6 +367,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     }
 
     clearTimeout(this.#timeoutId);
+    Host.userMetrics.consoleInsightTeaserGenerated(performance.now() - startTime);
     this.#isGenerating = false;
     this.#mainText = teaserText;
     this.requestUpdate();

package/front_end/panels/network/components/ResponseHeaderSection.ts

@@ -29,7 +29,6 @@ import {
   type HeaderEditedEvent,
   type HeaderEditorDescriptor,
   type HeaderRemovedEvent,
-  type HeaderSectionRow,
   type HeaderSectionRowData,
   isValidHeaderName,
 } from './HeaderSectionRow.js';
@@ -515,7 +514,7 @@ export class ResponseHeaderSection extends ResponseHeaderSectionBase {
     this.#updateOverrides(this.#headerEditors[index].name, this.#headerEditors[index].value || '', index);
     this.#render();
 
-    const rows = this.shadow.querySelectorAll<HeaderSectionRow>('devtools-header-section-row');
+    const rows = this.shadow.querySelectorAll('devtools-header-section-row');
     const [lastRow] = Array.from(rows).slice(-1);
     lastRow?.focus();
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.HeaderOverrideHeaderAdded);

package/front_end/ui/components/dialogs/Dialog.ts

@@ -5,11 +5,11 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as UI from '../../legacy/legacy.js';
 import * as Buttons from '../buttons/buttons.js';
 
 import dialogStyles from './dialog.css.js';
@@ -77,10 +77,6 @@ interface DialogData {
    */
   dialogShownCallback: (() => unknown)|null;
 
-  /**
-   * Optional. Service that provides the window dimensions used for positioning the Dialog.
-   */
-  windowBoundsService: WindowBoundsService.WindowBoundsService.WindowBoundsService;
   /**
    * Whether the dialog is closed when the 'Escape' key is pressed. When true, the event is
    * propagation is stopped.
@@ -132,7 +128,6 @@ export class Dialog extends HTMLElement {
     horizontalAlignment: DialogHorizontalAlignment.CENTER,
     getConnectorCustomXPosition: null,
     dialogShownCallback: null,
-    windowBoundsService: WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance(),
     closeOnESC: true,
     closeOnScroll: true,
     closeButton: false,
@@ -161,7 +156,7 @@ export class Dialog extends HTMLElement {
     this.#forceDialogCloseInDevToolsBound();
   });
   readonly #dialogResizeObserver = new ResizeObserver(this.#updateDialogBounds.bind(this));
-  #devToolsBoundingElement = this.windowBoundsService.getDevToolsBoundingElement();
+  #devToolsBoundingElement = UI.UIUtils.getDevToolsBoundingElement();
 
   // We bind here because we have to listen to keydowns on the entire window,
   // not on the Dialog element itself. This is because if the user has the
@@ -204,16 +199,6 @@ export class Dialog extends HTMLElement {
     this.#onStateChange();
   }
 
-  get windowBoundsService(): WindowBoundsService.WindowBoundsService.WindowBoundsService {
-    return this.#props.windowBoundsService;
-  }
-
-  set windowBoundsService(windowBoundsService: WindowBoundsService.WindowBoundsService.WindowBoundsService) {
-    this.#props.windowBoundsService = windowBoundsService;
-    this.#devToolsBoundingElement = this.windowBoundsService.getDevToolsBoundingElement();
-    this.#onStateChange();
-  }
-
   get bestVerticalPosition(): DialogVerticalPosition|null {
     return this.#bestVerticalPosition;
   }
@@ -733,6 +718,11 @@ export class Dialog extends HTMLElement {
     VisualLogging.setMappedParent(this.#getDialog(), this.parentElementOrShadowHost() as HTMLElement);
     // clang-format on
   }
+
+  setBoundingElementForTesting(element: HTMLElement): void {
+    this.#devToolsBoundingElement = element;
+    this.#onStateChange();
+  }
 }
 
 customElements.define('devtools-dialog', Dialog);

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

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
-import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+import * as UI from '../../legacy/legacy.js';
 import * as ThemeSupport from '../../legacy/theme_support/theme_support.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
@@ -166,8 +166,7 @@ export class TextEditor extends HTMLElement {
   }
 
   #startObservingResize(): void {
-    const devtoolsElement =
-        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+    const devtoolsElement = UI.UIUtils.getDevToolsBoundingElement();
     if (devtoolsElement) {
       this.#devtoolsResizeObserver.observe(devtoolsElement);
     }

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

@@ -7,7 +7,6 @@ import * as Common from '../../../core/common/common.js';
 import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
-import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
@@ -343,8 +342,7 @@ let sideBarElement: HTMLElement|null = null;
 
 function getTooltipSpace(): DOMRect {
   if (!sideBarElement) {
-    sideBarElement =
-        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+    sideBarElement = UI.UIUtils.getDevToolsBoundingElement();
   }
   return sideBarElement.getBoundingClientRect();
 }

package/front_end/ui/legacy/UIUtils.ts

@@ -56,6 +56,7 @@ import confirmDialogStyles from './confirmDialog.css.js';
 import {Dialog} from './Dialog.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import inspectorCommonStyles from './inspectorCommon.css.js';
+import {InspectorView} from './InspectorView.js';
 import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
 import smallBubbleStyles from './smallBubble.css.js';
 import {Tooltip} from './Tooltip.js';
@@ -2348,3 +2349,7 @@ export function copyTextToClipboard(text: string, alert?: string): void {
     ARIAUtils.LiveAnnouncer.alert(alert);
   }
 }
+
+export function getDevToolsBoundingElement(): HTMLElement {
+  return InspectorView.maybeGetInspectorViewInstance()?.element || document.body;
+}

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -99,7 +99,7 @@ export class CSSAngle extends HTMLElement {
       this.angleElement = this.querySelector<HTMLElement>('.css-angle');
     }
     if (!this.swatchElement) {
-      this.swatchElement = this.querySelector<HTMLElement>('devtools-css-angle-swatch');
+      this.swatchElement = this.querySelector('devtools-css-angle-swatch');
     }
     if (!this.angleElement || !this.swatchElement) {
       return;

package/front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as WindowBounds from '../../../../services/window_bounds/window_bounds.js';
+import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import type {FlameChart} from './FlameChart.js';
@@ -124,7 +124,7 @@ export class BrickBreaker extends HTMLElement {
   #keyPressHandlerBound = this.#keyPressHandler.bind(this);
   #closeGameBound = this.#closeGame.bind(this);
   #mouseMoveHandlerBound = this.#mouseMoveHandler.bind(this);
-  #boundingElement = WindowBounds.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+  #boundingElement = UI.UIUtils.getDevToolsBoundingElement();
   // Value by which we moved the game up relative to the viewport
   #gameViewportOffset = 0;
   #running = false;

package/front_end/ui/legacy/components/perf_ui/Font.ts

@@ -3,8 +3,6 @@
 // found in the LICENSE file.
 import * as Host from '../../../../core/host/host.js';
 
-let fontFamily: string|null = null;
-
 /**
  * Because we run our UI in a couple of contexts (actual app & test
  * environments) and on multiple platforms, the font is not consistent, so this
@@ -19,18 +17,7 @@ let fontFamily: string|null = null;
  * to ensure that the screenshot tests are consistent.
  **/
 export function getFontFamilyForCanvas(): string {
-  if (fontFamily) {
-    return fontFamily;
-  }
-
-  const bodyStyles = getComputedStyle(document.body);
-  if (bodyStyles.fontFamily) {
-    fontFamily = bodyStyles.fontFamily;
-  } else {
-    fontFamily = Host.Platform.fontFamily();
-  }
-
-  return fontFamily;
+  return Host.Platform.fontFamily();
 }
 
 export const DEFAULT_FONT_SIZE = '11px';

package/inspector_overlay/testing/InspectorOverlayHelpers.ts

@@ -217,11 +217,7 @@ export function drawGridLineNamesAndAssertLabels(
 
   for (const expected of expectedLabels) {
     const foundLabel = foundLabels.find(({textContent}) => textContent === expected.textContent);
-
-    if (!foundLabel) {
-      assert.fail(`Expected line name label with text content ${expected.textContent} not found`);
-      return;
-    }
+    assert.exists(foundLabel, `Expected line name label with text content ${expected.textContent} not found`);
 
     if (expected.type === 'column' && typeof expected.x !== 'undefined') {
       assert.closeTo(
@@ -256,11 +252,7 @@ export function drawGridAreaNamesAndAssertLabels(
   });
   for (const expected of expectedLabels) {
     const foundLabel = foundLabels.find(({textContent}) => textContent === expected.textContent);
-
-    if (!foundLabel) {
-      assert.fail(`Expected area label with text content ${expected.textContent} not found`);
-      return;
-    }
+    assert.exists(foundLabel, `Expected area label with text content ${expected.textContent} not found`);
 
     if (typeof expected.left !== 'undefined') {
       assert.strictEqual(

package/package.json

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1534251"
+  "version": "1.0.1534717"
 }

package/front_end/services/window_bounds/WindowBoundsService.ts

@@ -1,27 +0,0 @@
-// Copyright 2021 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 Legacy from '../../ui/legacy/legacy.js';
-
-export interface WindowBoundsService {
-  getDevToolsBoundingElement(): HTMLElement;
-}
-
-let windowBoundsServiceImplInstance: WindowBoundsServiceImpl;
-export class WindowBoundsServiceImpl implements WindowBoundsService {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): WindowBoundsServiceImpl {
-    const {forceNew} = opts;
-    if (!windowBoundsServiceImplInstance || forceNew) {
-      windowBoundsServiceImplInstance = new WindowBoundsServiceImpl();
-    }
-
-    return windowBoundsServiceImplInstance;
-  }
-
-  getDevToolsBoundingElement(): HTMLElement {
-    return Legacy.InspectorView.InspectorView.maybeGetInspectorViewInstance()?.element || document.body;
-  }
-}

package/front_end/services/window_bounds/window_bounds.ts

@@ -1,9 +0,0 @@
-// Copyright 2021 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 WindowBoundsService from './WindowBoundsService.js';
-
-export {
-  WindowBoundsService,
-};