chrome-devtools-frontend 1.0.1611825 → 1.0.1613625

package/front_end/ui/legacy/SplitWidget.ts

@@ -422,9 +422,9 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
    */
   #totalSizeDIP(): number {
     if (!this.#totalSizeCSS) {
-      this.#totalSizeCSS = this.#isVertical ? this.contentElement.offsetWidth : this.contentElement.offsetHeight;
-      this.#totalSizeOtherDimensionCSS =
-          this.#isVertical ? this.contentElement.offsetHeight : this.contentElement.offsetWidth;
+      const {width, height} = this.contentElement.getBoundingClientRect();
+      this.#totalSizeCSS = this.#isVertical ? width : height;
+      this.#totalSizeOtherDimensionCSS = this.#isVertical ? height : width;
     }
     return ZoomManager.instance().cssToDIP(this.#totalSizeCSS);
   }
@@ -457,9 +457,12 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.#removeAllLayoutProperties();
 
     // this.#totalSizeDIP is available below since we successfully applied constraints.
-    const roundSizeCSS = Math.round(ZoomManager.instance().dipToCSS(sizeDIP));
-    const sidebarSizeValue = roundSizeCSS + 'px';
-    const mainSizeValue = (this.#totalSizeCSS - roundSizeCSS) + 'px';
+    const sizeCSS = ZoomManager.instance().dipToCSS(sizeDIP);
+    const sidebarSizeValue = sizeCSS + 'px';
+    const mainSizeValue = (this.#totalSizeCSS - sizeCSS) + 'px';
+    // With `box-sizing: border-box` on the sidebar (set in splitWidget.css),
+    // flex-basis, width, and height all include the border, so the sidebar's
+    // border does not steal space from the main pane.
     this.#sidebarElement.style.flexBasis = sidebarSizeValue;
 
     // Make both sides relayout boundaries.

package/front_end/ui/legacy/TextPrompt.ts

@@ -251,7 +251,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   private proxyElementDisplay: string;
   private autocompletionTimeout: number;
   #title: string;
-  private queryRange: TextUtils.TextRange.TextRange|null;
+  protected queryRange: TextUtils.TextRange.TextRange|null;
   private previousText: string;
   private currentSuggestion: Suggestion|null;
   private completionRequestId: number;

package/front_end/ui/legacy/Treeoutline.ts

@@ -1932,7 +1932,7 @@ export namespace TreeViewElement {
   }
 }
 
-export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Directive {
+class IfExpandedDirective extends Lit.Directive.Directive {
   #partInfo: {type: Lit.Directive.PartType, startNode: Node};
   constructor(partInfo: Lit.Directive.PartInfo) {
     if (partInfo.type !== Lit.Directive.PartType.CHILD) {
@@ -1969,7 +1969,8 @@ export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Di
     }
     return node.expanded;
   }
-});
+}
+export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
 
 export class TreeElementWrapper extends HTMLElement {
   #treeElement?: TreeElement;

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -50,7 +50,7 @@ const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least o
  * @attribute striped If true, the data grid will have striped rows.
  * @attribute displayName
  */
-class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
+export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
   static readonly observedAttributes = ['striped', 'name', 'inline', 'resize'];
 
   #dataGrid = SortableDataGrid.create([DUMMY_COLUMN_ID], [], '') as SortableDataGrid<DataGridElementNode>;
@@ -609,7 +609,7 @@ const INTERNAL_TOKEN: DataGridInternalToken = {
   token: 'DataGridInternalToken'
 };
 
-export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Directive {
+class IfExpandedDirective extends Lit.Directive.Directive {
   #partInfo: {type: Lit.Directive.PartType, startNode: Node};
   constructor(partInfo: Lit.Directive.PartInfo) {
     if (partInfo.type !== Lit.Directive.PartType.CHILD) {
@@ -639,4 +639,5 @@ export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Di
     }
     return node.expanded;
   }
-});
+}
+export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);

package/front_end/ui/legacy/components/settings_ui/SettingsUI.ts

@@ -105,7 +105,7 @@ export function renderSettingSelect(setting: Common.Settings.Setting<unknown>, s
 }
 
 export const renderControlForSetting = function(
-    setting: Common.Settings.Setting<unknown>, subtitle?: string): TemplateResult|null {
+    setting: Common.Settings.Setting<unknown>, subtitle?: string): TemplateResult|typeof nothing {
   switch (setting.type()) {
     case Common.Settings.SettingType.BOOLEAN: {
       const onchange = (): void => {
@@ -123,14 +123,14 @@ export const renderControlForSetting = function(
     }
     default:
       console.error('Invalid setting type: ' + setting.type());
-      return null;
+      return nothing;
   }
 };
 
 export const createControlForSetting = function(
     setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement|null {
   const template = renderControlForSetting(setting, subtitle);
-  if (template === null) {
+  if (template === nothing) {
     return null;
   }
   const fragment = document.createDocumentFragment();

package/front_end/ui/legacy/components/source_frame/FontView.ts

@@ -1,7 +1,6 @@
 // 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.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
@@ -34,6 +33,7 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import {Directives, html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -52,24 +52,70 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/FontView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const FONT_PREVIEW_LINES = ['ABCDEFGHIJKLM', 'NOPQRSTUVWXYZ', 'abcdefghijklm', 'nopqrstuvwxyz', '1234567890'];
+const MEASURE_FONT_SIZE = 50;
+
+export interface ViewInput {
+  url: Platform.DevToolsPath.UrlString;
+  fontFaceRule: string;
+  fontFamily: string;
+  previewFontSize: string;
+  previewVisible: boolean;
+}
+
+export interface ViewOutput {
+  measureDimensions?: () => {
+    width: number, height: number,
+  };
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+// clang-format off
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  let dummyEl: HTMLElement|undefined;
+  render(html`
+    <style>${fontViewStyles}</style>
+    <style>${input.fontFaceRule}</style>
+    <div class="font-view"
+      aria-label=${i18nString(UIStrings.previewOfFontFromS, {PH1: input.url})}
+      style="font-family: ${input.fontFamily}; font-size: ${input.previewFontSize}"
+      aria-hidden="true"
+      ?hidden=${!input.previewVisible}
+    >${FONT_PREVIEW_LINES.map((line, i) => html`${i > 0 ? html`<br>` : ''}${line}`)}</div>
+    <div ${Directives.ref(el => { dummyEl = el as HTMLElement; })}
+      style="visibility: hidden; z-index: -1; display: inline; position: absolute; font-family: ${input.fontFamily}; font-size: ${MEASURE_FONT_SIZE}px"
+    >${FONT_PREVIEW_LINES.map((line, i) => html`${i > 0 ? html`<br>` : ''}${line}`)}</div>
+  `, target);
+  output.measureDimensions = () => {
+    if (!dummyEl) {
+      return {width: 0, height: 0};
+    }
+    return {width: dummyEl.offsetWidth, height: dummyEl.offsetHeight};
+  };
+};
+// clang-format on
+
 export class FontView extends UI.View.SimpleView {
   private readonly url: Platform.DevToolsPath.UrlString;
   private readonly contentProvider: TextUtils.ContentProvider.ContentProvider;
   private readonly mimeTypeLabel: UI.Toolbar.ToolbarText;
-  fontPreviewElement!: HTMLElement|null;
-  private dummyElement!: HTMLElement|null;
-  fontStyleElement!: HTMLStyleElement|null;
-  private inResize!: boolean|null;
-  constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
+  readonly #view: View;
+  #fontFaceRule = '';
+  #fontFamily = '';
+  #previewFontSize = '';
+  #previewVisible = false;
+  #contentLoaded = false;
+
+  constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider, view: View = DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.font),
       viewId: 'font',
       jslog: `${VisualLogging.pane('font-view')}`,
     });
-    this.registerRequiredCSS(fontViewStyles);
-    this.element.classList.add('font-view');
+    this.#view = view;
     this.url = contentProvider.contentURL();
-    UI.ARIAUtils.setLabel(this.element, i18nString(UIStrings.previewOfFontFromS, {PH1: this.url}));
     this.contentProvider = contentProvider;
     this.mimeTypeLabel = new UI.Toolbar.ToolbarText(mimeType);
   }
@@ -78,96 +124,39 @@ export class FontView extends UI.View.SimpleView {
     return [this.mimeTypeLabel];
   }
 
-  private onFontContentLoaded(uniqueFontName: string, contentData: TextUtils.ContentData.ContentDataOrError): void {
-    const url = TextUtils.ContentData.ContentData.isError(contentData) ? this.url : contentData.asDataUrl();
-    if (!this.fontStyleElement) {
-      return;
-    }
-    this.fontStyleElement.textContent =
-        Platform.StringUtilities.sprintf('@font-face { font-family: "%s"; src: url(%s); }', uniqueFontName, url);
-    this.updateFontPreviewSize();
-  }
-
-  private createContentIfNeeded(): void {
-    if (this.fontPreviewElement) {
+  #loadContentIfNeeded(): void {
+    if (this.#contentLoaded) {
       return;
     }
+    this.#contentLoaded = true;
 
-    const uniqueFontName = `WebInspectorFontPreview${++fontId}`;
-    this.fontStyleElement = document.createElement('style');
+    this.#fontFamily = `WebInspectorFontPreview${++fontId}`;
     void this.contentProvider.requestContentData().then(contentData => {
-      this.onFontContentLoaded(uniqueFontName, contentData);
+      const url = TextUtils.ContentData.ContentData.isError(contentData) ? this.url : contentData.asDataUrl();
+      this.#fontFaceRule =
+          Platform.StringUtilities.sprintf('@font-face { font-family: "%s"; src: url(%s); }', this.#fontFamily, url);
+      this.#previewVisible = true;
+      this.requestUpdate();
     });
-    this.element.appendChild(this.fontStyleElement);
-
-    const fontPreview = document.createElement('div');
-    for (let i = 0; i < FONT_PREVIEW_LINES.length; ++i) {
-      if (i > 0) {
-        fontPreview.createChild('br');
-      }
-      UI.UIUtils.createTextChild(fontPreview, FONT_PREVIEW_LINES[i]);
-    }
-    this.fontPreviewElement = (fontPreview.cloneNode(true) as HTMLDivElement);
-    if (!this.fontPreviewElement) {
-      return;
-    }
-    UI.ARIAUtils.setHidden(this.fontPreviewElement, true);
-    this.fontPreviewElement.style.overflow = 'hidden';
-    this.fontPreviewElement.style.setProperty('font-family', uniqueFontName);
-    this.fontPreviewElement.style.setProperty('visibility', 'hidden');
-
-    this.dummyElement = fontPreview;
-    this.dummyElement.style.visibility = 'hidden';
-    this.dummyElement.style.zIndex = '-1';
-    this.dummyElement.style.display = 'inline';
-    this.dummyElement.style.position = 'absolute';
-    this.dummyElement.style.setProperty('font-family', uniqueFontName);
-    this.dummyElement.style.setProperty('font-size', MEASUURE_FONT_SIZE + 'px');
-
-    this.element.appendChild(this.fontPreviewElement);
   }
 
   override wasShown(): void {
     super.wasShown();
-    this.createContentIfNeeded();
-
-    this.updateFontPreviewSize();
+    this.#loadContentIfNeeded();
+    this.requestUpdate();
   }
 
   override onResize(): void {
-    if (this.inResize) {
-      return;
-    }
-
-    this.inResize = true;
-    try {
-      this.updateFontPreviewSize();
-    } finally {
-      this.inResize = null;
-    }
+    this.requestUpdate();
   }
 
-  private measureElement(): {
+  #calculateFontPreviewSize(dimension: {
     width: number,
     height: number,
-  } {
-    if (!this.dummyElement) {
-      throw new Error('No font preview loaded');
+  }): string {
+    if (!this.#previewVisible || !this.isShowing()) {
+      return '';
     }
-    this.element.appendChild(this.dummyElement);
-    const result = {width: this.dummyElement.offsetWidth, height: this.dummyElement.offsetHeight};
-    this.element.removeChild(this.dummyElement);
-
-    return result;
-  }
-
-  updateFontPreviewSize(): void {
-    if (!this.fontPreviewElement || !this.isShowing()) {
-      return;
-    }
-
-    this.fontPreviewElement.style.removeProperty('visibility');
-    const dimension = this.measureElement();
 
     const height = dimension.height;
     const width = dimension.width;
@@ -177,18 +166,42 @@ export class FontView extends UI.View.SimpleView {
     const containerHeight = this.element.offsetHeight - 30;
 
     if (!height || !width || !containerWidth || !containerHeight) {
-      this.fontPreviewElement.style.removeProperty('font-size');
-      return;
+      return '';
     }
 
     const widthRatio = containerWidth / width;
     const heightRatio = containerHeight / height;
-    const finalFontSize = Math.floor(MEASUURE_FONT_SIZE * Math.min(widthRatio, heightRatio)) - 2;
+    const finalFontSize = Math.floor(MEASURE_FONT_SIZE * Math.min(widthRatio, heightRatio)) - 2;
 
-    this.fontPreviewElement.style.setProperty('font-size', finalFontSize + 'px', undefined);
+    return `${finalFontSize}px`;
+  }
+
+  override performUpdate(): void {
+    const output: ViewOutput = {};
+    this.#view(
+        {
+          url: this.url,
+          fontFaceRule: this.#fontFaceRule,
+          fontFamily: this.#fontFamily,
+          previewFontSize: this.#previewFontSize,
+          previewVisible: this.#previewVisible,
+        },
+        output,
+        this.contentElement,
+    );
+
+    if (!output.measureDimensions) {
+      return;
+    }
+
+    const requestedFontSize = this.#calculateFontPreviewSize(output.measureDimensions());
+    if (requestedFontSize === this.#previewFontSize) {
+      return;
+    }
+
+    this.#previewFontSize = requestedFontSize;
+    this.requestUpdate();
   }
 }
 
 let fontId = 0;
-const FONT_PREVIEW_LINES = ['ABCDEFGHIJKLM', 'NOPQRSTUVWXYZ', 'abcdefghijklm', 'nopqrstuvwxyz', '1234567890'];
-const MEASUURE_FONT_SIZE = 50;

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -65,20 +65,20 @@ const UIStrings = {
    */
   doYouTrustThisCode: 'Do you trust this code?',
   /**
-   * @description Warning shown to users when pasting text/code into DevTools.
+   * @description Warning shown to users when pasting text/code into DevTools. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow pasting} PH1
    */
   doNotPaste:
-      'Don\'t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type \'\'{PH1}\'\' below to allow pasting.',
+      'Don\'t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type “{PH1}” below to allow pasting.',
   /**
    * @description Text a user needs to type in order to confirm that they are aware of the danger of pasting code into the DevTools console.
    */
   allowPasting: 'allow pasting',
   /**
-   * @description Input box placeholder which instructs the user to type 'allow pasting' into the input box.
+   * @description Input box placeholder which instructs the user to type 'allow pasting' into the input box. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow pasting} PH1
    */
-  typeAllowPasting: 'Type \'\'{PH1}\'\'',
+  typeAllowPasting: 'Type “{PH1}”',
   /**
    * @description Error message shown when the user tries to open a file that contains non-readable data. "Editor" refers to
    * a text editor.

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -345,6 +345,9 @@ export const knownContextValues = new Set([
   'ai-assistance-history-images',
   'ai-assistance-patching-fre-completed',
   'ai-assistance-patching-selected-project-id',
+  'ai-assistance-v2-opt-in-change-dialog-seen',
+  'ai-assistance-v2-opt-in.got-it',
+  'ai-assistance-v2-opt-in.manage-settings',
   'ai-code-completion-citations',
   'ai-code-completion-citations.citation-link',
   'ai-code-completion-disclaimer',
@@ -366,6 +369,7 @@ export const knownContextValues = new Set([
   'ai-export-for-agents.save-as-markdown',
   'ai-hide-walkthrough-sidebar',
   'ai-show-walkthrough-sidebar',
+  'ai-v2-opt-in-change-dialog',
   'ai_assistance',
   'align-content',
   'align-content-center',
@@ -1046,6 +1050,7 @@ export const knownContextValues = new Set([
   'copy-visible-styled-selection',
   'copy-watch-expression-value',
   'copy-xpath',
+  'core-web-vitals',
   'corner-block-end-shape',
   'corner-block-start-shape',
   'corner-bottom-left-shape',
@@ -1104,6 +1109,7 @@ export const knownContextValues = new Set([
   'css',
   'css-angle',
   'css-animation-name',
+  'css-animations-only-when-animations-tab-open',
   'css-font-palette',
   'css-function',
   'css-layers',
@@ -1358,6 +1364,7 @@ export const knownContextValues = new Set([
   'dom-node-inserted-into-document',
   'dom-node-removed',
   'dom-node-removed-from-document',
+  'dom-snapshot',
   'dom-subtree-modified',
   'dom-window.close',
   'dom-word-wrap',
@@ -1809,6 +1816,7 @@ export const knownContextValues = new Set([
   'greendev',
   'greendev-ai-annotations-enabled',
   'greendev-artifact-viewer-enabled',
+  'greendev-beyond-styling-enabled',
   'greendev-breakpoint-debugger-agent-enabled',
   'greendev-copy-to-gemini-enabled',
   'greendev-emulation-capabilities-enabled',
@@ -2242,6 +2250,7 @@ export const knownContextValues = new Set([
   'layout',
   'layout-count',
   'layout-shifts',
+  'lcp-breakdown',
   'learn-more',
   'learn-more.ai-annotations',
   'learn-more.ai-assistance',
@@ -2969,6 +2978,7 @@ export const knownContextValues = new Set([
   'performance-full-default',
   'performance-insights',
   'performance-insights-default',
+  'performance-trace',
   'performance.history-item',
   'performance.monitor',
   'performance.sidebar-insights-category-select',
@@ -3956,6 +3966,7 @@ export const knownContextValues = new Set([
   'timeline-overview',
   'timeline-persisted-main-flamechart-track-config',
   'timeline-persisted-network-flamechart-track-config',
+  'timeline-range-summary',
   'timeline-save-as-gz',
   'timeline-scope',
   'timeline-settings-pane',
@@ -4307,6 +4318,8 @@ export const knownContextValues = new Set([
   'vw',
   'waiting',
   'waiting-entry-inspect',
+  'walkthrough',
+  'walkthrough-container',
   'warning',
   'wasm',
   'wasm-auto-stepping',

package/package.json

@@ -89,7 +89,7 @@
     "svgo": "3.3.2",
     "terser": "5.44.1",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.9.3",
+    "typescript": "6.0.2",
     "typescript-eslint": "8.58.0",
     "uuid": "13.0.0",
     "webidl2": "24.5.0",
@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1611825"
+  "version": "1.0.1613625"
 }