chrome-devtools-frontend 1.0.1533544 → 1.0.1534717

package/front_end/devtools_compatibility.js

@@ -53,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
@@ -337,7 +347,7 @@
      * @param targetId {string}
      */
     setInitialTargetId(targetId) {
-      this._initialTargetIdPromiseWithResolver.resolve(targetId);
+      this._setInitialTargetId(targetId);
     }
 
     /**
@@ -433,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)
   };
 
@@ -448,6 +459,34 @@
      */
     events;
 
+    /**
+     * @returns
+     */
+    getSelectionBackgroundColor() {
+      return '#6e86ff';
+    }
+
+    /**
+     * @returns
+     */
+    getSelectionForegroundColor() {
+      return '#ffffff';
+    }
+
+    /**
+     * @returns
+     */
+    getInactiveSelectionBackgroundColor() {
+      return '#c9c8c8';
+    }
+
+    /**
+     * @returns
+     */
+    getInactiveSelectionForegroundColor() {
+      return '#323232';
+    }
+
     /**
      * @returns
      */
@@ -982,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;
     }
 
     /**
@@ -1106,8 +1154,155 @@
   }
 
   function installBackwardsCompatibility() {
-    // Any polyfill that we need for backwards compatibility should be
-    // Added in this function
+    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/generated/protocol-mapping.d.ts

@@ -7,6 +7,9 @@
  * Re-generate with: npm run generate-protocol-resources.
  */
 
+
+import type * as Protocol from './protocol.js'
+
 /**
  * Mappings from protocol event and command names to the types required for them.
  */

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -2,49 +2,78 @@
 // 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 = '';
-
-const RESPONSE_SCHEMA = {
-  type: 'object',
-  properties: {
-    header: {type: 'string', maxLength: 60, description: 'Label for the console message which is being analyzed'},
-    // No hard `maxLength` for `explanation`. This would often result in responses which are cut off in the middle of a
-    // sentence. Instead provide a soft `maxLength` via the prompt.
-    explanation: {
-      type: 'string',
-      description: 'Actual explanation of the console message being analyzed',
-    },
-  },
-  required: ['header', 'explanation'],
-  additionalProperties: false,
-};
+let availability: LanguageModelAvailability|undefined;
+let hasGpu: boolean|undefined;
+let isFirstRun = true;
 
 export interface LanguageModel {
   promptStreaming: (arg0: string, opts?: {
-    responseConstraint: Object,
     signal?: AbortSignal,
   }) => AsyncGenerator<string>;
   clone: () => 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) {
@@ -53,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;
   }
@@ -101,7 +187,6 @@ Your instructions are as follows:
     const session = await this.#consoleInsightsSession.clone();
     const stream = session.promptStreaming(prompt, {
       signal: abortController.signal,
-      responseConstraint: RESPONSE_SCHEMA,
     });
     for await (const chunk of stream) {
       yield chunk;

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);
   }