chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

package/front_end/ui/legacy/components/object_ui/JavaScriptREPL.ts

@@ -2,12 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../../../models/source_map_scopes/source_map_scopes.js';
 import * as Acorn from '../../../../third_party/acorn/acorn.js';
-import {render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import {RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
@@ -46,16 +44,13 @@ export class JavaScriptREPL {
     }
   }
 
-  static async evaluateAndBuildPreview(
-      text: string, throwOnSideEffect: boolean, replMode: boolean, timeout?: number, allowErrors?: boolean,
-      objectGroup?: string, awaitPromise = false, silent = false): Promise<{
-    preview: DocumentFragment,
-    result: SDK.RuntimeModel.EvaluationResult|null,
-  }> {
-    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
+  static async evaluate(
+      text: string, executionContext: SDK.RuntimeModel.ExecutionContext, throwOnSideEffect: boolean, replMode: boolean,
+      timeout?: number, objectGroup?: string, awaitPromise = false,
+      silent = false): Promise<SDK.RuntimeModel.EvaluationResult|null> {
     const isTextLong = text.length > maxLengthForEvaluation;
-    if (!text || !executionContext || (throwOnSideEffect && isTextLong)) {
-      return {preview: document.createDocumentFragment(), result: null};
+    if (!text || (throwOnSideEffect && isTextLong)) {
+      return null;
     }
 
     let expression = text;
@@ -81,39 +76,29 @@ export class JavaScriptREPL {
       replMode,
       silent,
     };
-    const result = await executionContext.evaluate(options, false /* userGesture */, awaitPromise);
-    const preview = JavaScriptREPL.buildEvaluationPreview(result, allowErrors);
-    return {preview, result};
+    return await executionContext.evaluate(options, false /* userGesture */, awaitPromise);
   }
 
-  private static buildEvaluationPreview(result: SDK.RuntimeModel.EvaluationResult, allowErrors?: boolean):
-      DocumentFragment {
-    const fragment = document.createDocumentFragment();
-    if ('error' in result) {
-      return fragment;
+  static async evaluateAndBuildPreview(
+      text: string, throwOnSideEffect: boolean, replMode: boolean, timeout?: number, allowErrors?: boolean,
+      objectGroup?: string, awaitPromise = false, silent = false): Promise<{
+    preview: DocumentFragment,
+    result: SDK.RuntimeModel.EvaluationResult|null,
+  }> {
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
+    if (!executionContext) {
+      return {preview: document.createDocumentFragment(), result: null};
     }
 
-    if (result.exceptionDetails?.exception?.description) {
-      const exception = result.exceptionDetails.exception.description;
-      if (exception.startsWith('TypeError: ') || allowErrors) {
-        fragment.createChild('span').textContent = result.exceptionDetails.text + ' ' + exception;
-      }
-      return fragment;
+    const result = await JavaScriptREPL.evaluate(
+        text, executionContext, throwOnSideEffect, replMode, timeout, objectGroup, awaitPromise, silent);
+    if (!result) {
+      return {preview: document.createDocumentFragment(), result: null};
     }
 
     const formatter = new RemoteObjectPreviewFormatter();
-    const {preview, type, subtype, className, description} = result.object;
-    if (preview && type === 'object' && subtype !== 'node' && subtype !== 'trustedtype') {
-      /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
-      render(formatter.renderObjectPreview(preview), fragment);
-    } else {
-      /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
-      render(
-          formatter.renderPropertyPreview(
-              type, subtype, className, Platform.StringUtilities.trimEndWithMaxLength(description || '', 400)),
-          fragment);
-    }
-    return fragment;
+    const preview = formatter.renderEvaluationResultPreviewFragment(result, allowErrors);
+    return {preview, result};
   }
 }
 

package/front_end/ui/legacy/components/object_ui/RemoteObjectPreviewFormatter.ts

@@ -6,7 +6,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
-import {Directives, html, type LitTemplate, nothing} from '../../../lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../../lit/lit.js';
 
 const {ifDefined, repeat} = Directives;
 const UIStrings = {
@@ -245,6 +245,36 @@ export class RemoteObjectPreviewFormatter {
 
     return html`<span class='object-value-${(subtype || type)}' title=${ifDefined(title)}>${preview()}</span>`;
   }
+
+  renderEvaluationResultPreview(result: SDK.RuntimeModel.EvaluationResult, allowErrors?: boolean): LitTemplate {
+    if ('error' in result) {
+      return nothing;
+    }
+
+    if (result.exceptionDetails?.exception?.description) {
+      const exception = result.exceptionDetails.exception.description;
+      if (exception.startsWith('TypeError: ') || allowErrors) {
+        return html`<span>${result.exceptionDetails.text} ${exception}</span>`;
+      }
+      return nothing;
+    }
+
+    const {preview, type, subtype, className, description} = result.object;
+    if (preview && type === 'object' && subtype !== 'node' && subtype !== 'trustedtype') {
+      return this.renderObjectPreview(preview);
+    }
+    return this.renderPropertyPreview(
+        type, subtype, className, Platform.StringUtilities.trimEndWithMaxLength(description || '', 400));
+  }
+
+  /** @deprecated (crbug.com/457388389) Use lit version instead */
+  renderEvaluationResultPreviewFragment(result: SDK.RuntimeModel.EvaluationResult, allowErrors?: boolean):
+      DocumentFragment {
+    const fragment = document.createDocumentFragment();
+    /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+    render(this.renderEvaluationResultPreview(result, allowErrors), fragment);
+    return fragment;
+  }
 }
 
 const enum InternalName {

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

@@ -3883,7 +3883,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
    * Update position of an Element. By default, the element is treated as a full entry and it's dimensions are set to the full entry width/length/height.
    * If isDecoration parameter is set to true, the element will be positioned on the right side of the entry and have a square shape where width == height of the entry.
    */
-  private updateElementPosition(element: Element|null, entryIndex: number, isDecoration?: boolean): void {
+  private updateElementPosition(element: HTMLElement|null, entryIndex: number, isDecoration?: boolean): void {
     if (!element) {
       return;
     }
@@ -3929,7 +3929,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const entryLevel = timelineData.entryLevels[entryIndex];
     const barY = this.levelToOffset(entryLevel) - this.chartViewport.scrollOffset();
     const barHeight = this.levelHeight(entryLevel);
-    const style = (element as HTMLElement).style;
+    const style = element.style;
 
     // TODO(paulirish): make these changes within a RenderCoordinator.write callback.
     // Currently these (plus the scrollOffset() right above) trigger layout thrashing.

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-imperative-dom-api, @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
@@ -17,8 +17,7 @@ import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as UIHelpers from '../../../helpers/helpers.js';
-import type {Icon} from '../../../kit/kit.js';
-import {html, render} from '../../../lit/lit.js';
+import {html, type LitTemplate, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -558,13 +557,10 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     if (!decorator || !info.uiLocation) {
       return;
     }
-    if (info.icon?.parentElement) {
-      anchor.removeChild(info.icon);
-    }
     const icon = decorator.linkIcon(info.uiLocation.uiSourceCode);
-    if (icon) {
-      icon.style.setProperty('margin-right', '2px');
-      anchor.insertBefore(icon, anchor.firstChild);
+    if (icon && anchor instanceof HTMLElement && anchor.firstElementChild instanceof HTMLElement) {
+      anchor.firstElementChild?.style.setProperty('margin-left', '2px');
+      render(icon, anchor, {renderBefore: anchor.firstElementChild});
     }
     info.icon = icon;
   }
@@ -946,7 +942,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
 }
 
 export interface LinkDecorator extends Common.EventTarget.EventTarget<LinkDecorator.EventTypes> {
-  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): Icon|null;
+  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): LitTemplate|null;
 }
 
 export namespace LinkDecorator {
@@ -1106,7 +1102,7 @@ export class ContentProviderContextMenuProvider implements
 }
 
 interface LinkInfo {
-  icon: Icon|null;
+  icon: LitTemplate|null;
   enableDecorator: boolean;
   uiLocation: Workspace.UISourceCode.UILocation|null;
   liveLocation: Bindings.LiveLocation.LiveLocation|null;

package/front_end/ui/legacy/floaty.css

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+dialog {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  max-width: 400px;
+  min-width: 200px;
+  min-height: 100px;
+  max-height: 400px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  box-shadow: var(--drop-shadow);
+  background: var(--sys-color-tonal-container);
+  border-radius: var(--sys-shape-corner-medium-small);
+  border: none;
+  flex-direction: column;
+
+  header {
+    padding: var(--sys-size-6);
+
+    span {
+      font: var(--sys-typescale-headline5);
+    }
+
+    display: flex;
+    align-items: flex-start;
+
+    .close-button {
+      margin-left: auto;
+    }
+  }
+
+  section.body {
+    border-radius: var(--sys-shape-corner-medium-small);
+    background: var(--sys-color-surface);
+    height: 100%;
+    padding: var(--sys-size-6);
+  }
+
+  .floaty-contexts {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    li {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: var(--sys-size-2) var(--sys-size-3);
+      border-radius: var(--sys-shape-corner-extra-small);
+      border: 1px solid var(--sys-color-tonal-outline);
+      font: var(--sys-typescale-monospace-regular);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      devtools-button {
+        margin-left: auto;
+      }
+    }
+  }
+
+  section.actions {
+    margin-top: var(--sys-size-7);
+  }
+}
+
+dialog[open] {
+  display: flex;
+}

package/front_end/ui/legacy/legacy.ts

@@ -15,6 +15,7 @@ import * as DropTarget from './DropTarget.js';
 import * as EmptyWidget from './EmptyWidget.js';
 import * as FilterBar from './FilterBar.js';
 import * as FilterSuggestionBuilder from './FilterSuggestionBuilder.js';
+import * as Floaty from './Floaty.js';
 import * as ForwardedInputEventHandler from './ForwardedInputEventHandler.js';
 import * as Fragment from './Fragment.js';
 import * as GlassPane from './GlassPane.js';
@@ -67,6 +68,7 @@ export {
   EmptyWidget,
   FilterBar,
   FilterSuggestionBuilder,
+  Floaty,
   ForwardedInputEventHandler,
   Fragment,
   GlassPane,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -460,6 +460,7 @@ export const knownContextValues = new Set([
   'animations.playback-rate-100',
   'animations.playback-rate-25',
   'animations.remove-preview',
+  'annotation',
   'annotations-hidden',
   'another_id',
   'answer',
@@ -1921,6 +1922,8 @@ export const knownContextValues = new Set([
   'insights-deprecation-learn-more',
   'insights-deprecation-open-performance-panel',
   'insights-deprecation-send-feedback',
+  'insights-teaser-built-in-ai-documentation',
+  'insights-teaser-download-model',
   'insights-teaser-tell-me-more',
   'inspect',
   'inspect-prerendered-page',
@@ -2869,6 +2872,7 @@ export const knownContextValues = new Set([
   'performance.sidebar-toggle',
   'periodic-background-sync',
   'periodic-sync-tag',
+  'permission-element-elements',
   'persist-flame-config',
   'persistence-automatic-workspace-folders',
   'persistence-network-overrides-enabled',
@@ -3831,9 +3835,11 @@ export const knownContextValues = new Set([
   'timeline-tree-group-by',
   'timeline-trigger',
   'timeline-trigger-behavior',
+  'timeline-trigger-exit-range',
   'timeline-trigger-exit-range-end',
   'timeline-trigger-exit-range-start',
   'timeline-trigger-name',
+  'timeline-trigger-range',
   'timeline-trigger-range-end',
   'timeline-trigger-range-start',
   'timeline-trigger-source',

package/inspector_overlay/loadCSS.rollup.js

@@ -5,7 +5,8 @@
 // WARNING: don't use this rollup plugin outside of inspector_overlay.
 // See README for special constraints the overlay has.
 
-module.exports = function loadCSS() {
+// eslint-disable-next-line import/no-default-export
+export default function loadCSS() {
   return {
     name: 'loadCSS',
     /**
@@ -20,10 +21,10 @@ module.exports = function loadCSS() {
             style.replaceSync(${JSON.stringify(code)});
             export default style;
           `,
-          map: null
+          map: null,
         };
       }
       return;
-    }
+    },
   };
-};
+}

package/package.json

@@ -35,7 +35,7 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-terser": "0.4.4",
-    "@rollup/wasm-node": "4.53.2",
+    "@rollup/wasm-node": "4.21.0",
     "@stylistic/eslint-plugin": "5.5.0",
     "@types/chai": "4.3.15",
     "@types/codemirror": "5.60.17",
@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1550444"
+  "version": "1.0.1553956"
 }

package/front_end/panels/application/preloading/components/PreloadingMismatchedHeadersGrid.ts

@@ -1,99 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
-import '../../../../ui/legacy/components/data_grid/data_grid.js';
-
-import * as i18n from '../../../../core/i18n/i18n.js';
-import type * as SDK from '../../../../core/sdk/sdk.js';
-import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import type * as UI from '../../../../ui/legacy/legacy.js';
-import * as Lit from '../../../../ui/lit/lit.js';
-
-import preloadingGridStyles from './preloadingGrid.css.js';
-
-const UIStrings = {
-  /**
-   * @description The name of the HTTP request header.
-   */
-  headerName: 'Header name',
-  /**
-   * @description The value of the HTTP request header in initial navigation.
-   */
-  initialNavigationValue: 'Value in initial navigation',
-  /**
-   * @description The value of the HTTP request header in activation navigation.
-   */
-  activationNavigationValue: 'Value in activation navigation',
-  /**
-   * @description The string to indicate the value of the header is missing.
-   */
-  missing: '(missing)',
-} as const;
-const str_ = i18n.i18n.registerUIStrings(
-    'panels/application/preloading/components/PreloadingMismatchedHeadersGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-const {render, html} = Lit;
-
-export class PreloadingMismatchedHeadersGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #data: SDK.PreloadingModel.PrerenderAttempt|SDK.PreloadingModel.PrerenderUntilScriptAttempt|null = null;
-  connectedCallback(): void {
-    this.#render();
-  }
-
-  set data(data: SDK.PreloadingModel.PrerenderAttempt|SDK.PreloadingModel.PrerenderUntilScriptAttempt) {
-    if (data.mismatchedHeaders === null) {
-      return;
-    }
-    this.#data = data;
-    this.#render();
-  }
-
-  #render(): void {
-    if (!this.#data?.mismatchedHeaders) {
-      return;
-    }
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-      render(html`
-        <style>${preloadingGridStyles}</style>
-        <div class="preloading-container">
-          <devtools-data-grid striped inline>
-            <table>
-              <tr>
-                <th id="header-name" weight="30" sortable>
-                  ${i18nString(UIStrings.headerName)}
-                </th>
-                <th id="initial-value" weight="30" sortable>
-                  ${i18nString(UIStrings.initialNavigationValue)}
-                </th>
-                <th id="activation-value" weight="30" sortable>
-                  ${i18nString(UIStrings.activationNavigationValue)}
-                </th>
-              </tr>
-              ${this.#data.mismatchedHeaders.map(mismatchedHeaders => html`
-                <tr>
-                  <td>${mismatchedHeaders.headerName}</td>
-                  <td>${mismatchedHeaders.initialValue ?? i18nString(UIStrings.missing)}</td>
-                  <td>${mismatchedHeaders.activationValue ?? i18nString(UIStrings.missing)}</td>
-                </tr>
-              `)}
-            </table>
-          </devtools-data-grid>
-        </div>
-      `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-resources-preloading-mismatched-headers-grid', PreloadingMismatchedHeadersGrid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-preloading-mismatched-headers-grid': PreloadingMismatchedHeadersGrid;
-  }
-}