chrome-devtools-frontend 1.0.1543082 → 1.0.1543472

package/front_end/panels/settings/components/syncSection.css

@@ -4,63 +4,65 @@
  * found in the LICENSE file.
  */
 
-:host {
-  break-inside: avoid;
-  display: block;
-  width: 100%;
-  position: relative;
-}
+@scope to (devtools-widget > *) {
+  :scope {
+    break-inside: avoid;
+    display: block;
+    width: 100%;
+    position: relative;
+  }
 
-fieldset {
-  border: 0;
-  padding: 0;
-  padding: 4px 0 0;
-}
+  fieldset {
+    border: 0;
+    padding: 0;
+    padding: 4px 0 0;
+  }
 
-.link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-  outline-offset: 2px;
-}
+  .link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+    outline-offset: 2px;
+  }
 
-.account-avatar {
-  border: 0;
-  border-radius: var(--sys-shape-corner-full);
-  display: block;
-  height: var(--sys-size-9);
-  width: var(--sys-size-9);
-}
+  .account-avatar {
+    border: 0;
+    border-radius: var(--sys-shape-corner-full);
+    display: block;
+    height: var(--sys-size-9);
+    width: var(--sys-size-9);
+  }
 
-.account-info {
-  display: flex;
-  align-items: center;
-}
+  .account-info {
+    display: flex;
+    align-items: center;
+  }
 
-.account-email {
-  display: flex;
-  flex-direction: column;
-  margin-left: 8px;
-}
+  .account-email {
+    display: flex;
+    flex-direction: column;
+    margin-left: 8px;
+  }
 
-.not-signed-in {
-  padding-bottom: 4px;
-}
+  .not-signed-in {
+    padding-bottom: 4px;
+  }
 
-.setting-checkbox-container {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-size-2);
-}
+  .setting-checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-2);
+  }
 
-.setting-checkbox {
-  display: inline-block;
-}
+  .setting-checkbox {
+    display: inline-block;
+  }
 
-.gdp-profile-container {
-  padding-bottom: var(--sys-size-4);
+  .gdp-profile-container {
+    padding-bottom: var(--sys-size-4);
+  }
 
-  & .divider {
+  .gdp-profile-container .divider {
     left: 0;
     position: absolute;
     width: 100%;
@@ -68,57 +70,56 @@ fieldset {
     background: var(--sys-color-divider);
   }
 
-  & .gdp-profile-header {
+  .gdp-profile-container .gdp-profile-header {
     display: flex;
     align-items: center;
     gap: var(--sys-size-5);
     font-family: "Google Sans", system-ui;
     font-size: var(--sys-typescale-body3-size);
     height: var(--sys-size-11);
+  }
 
-    & .gdp-logo {
-      background-image: var(--image-file-gdp-logo-light);
-      background-size: contain;
-      width: 203px;
-      height: 18px;
-      background-repeat: no-repeat;
-    }
+  .gdp-profile-container .gdp-profile-header .gdp-logo {
+    background-image: var(--image-file-gdp-logo-light);
+    background-size: contain;
+    width: 203px;
+    height: 18px;
+    background-repeat: no-repeat;
+  }
 
-    :host-context(.theme-with-dark-background) & .gdp-logo {
-      background-image: var(--image-file-gdp-logo-dark);
-    }
+  :host-context(.theme-with-dark-background) & .gdp-profile-container .gdp-profile-header .gdp-logo {
+    background-image: var(--image-file-gdp-logo-dark);
   }
 
-  & .gdp-profile-sign-up-content {
+  .gdp-profile-container .gdp-profile-sign-up-content {
     padding-top: var(--sys-size-7);
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
-  & .gdp-profile-details-content {
+  .gdp-profile-container .gdp-profile-details-content {
     padding-top: var(--sys-size-7);
     font: var(--sys-typescale-body4-regular);
+  }
+
+  .gdp-profile-container .gdp-profile-details-content .plan-details {
+    margin-top: var(--sys-size-3);
+    height: 18px;
+    display: flex;
+    align-items: center;
+  }
+
+  .gdp-profile-container .gdp-profile-details-content .setting-container {
+    margin: calc(var(--sys-size-3) - 6px) 0 -6px;
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-2);
+  }
 
-    & .plan-details {
-      margin-top: var(--sys-size-3);
-      height: 18px;
-      display: flex;
-      align-items: center;
-    }
-
-    & .setting-container {
-      /* `<settigns-checkbox>` already provides 6px margin and we want to get rid of it here */
-      margin: calc(var(--sys-size-3) - 6px) -6px -6px;
-      display: flex;
-      align-items: center;
-      gap: var(--sys-size-2);
-    }
-
-    & .tooltip-content {
-      max-width: 278px;
-      padding: var(--sys-size-2) var(--sys-size-3);
-      font: var(--sys-typescale-body5-regular);
-    }
+  .gdp-profile-container .gdp-profile-details-content .tooltip-content {
+    max-width: 278px;
+    padding: var(--sys-size-2) var(--sys-size-3);
+    font: var(--sys-typescale-body5-regular);
   }
 }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -24,6 +24,7 @@ import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AddDebugInfoURLDialog} from './AddSourceMapURLDialog.js';
@@ -2004,7 +2005,8 @@ class ValueDecoration extends CodeMirror.WidgetType {
       const propertyCount = value.preview ? value.preview.properties.length : 0;
       const entryCount = value.preview?.entries ? value.preview.entries.length : 0;
       if (value.preview && propertyCount + entryCount < 10) {
-        formatter.appendObjectPreview(nameValuePair, value.preview, false /* isEntry */);
+        /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+        render(formatter.renderObjectPreview(value.preview), nameValuePair.createChild('span'));
       } else {
         const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
             value, /* wasThrown */ false, /* showPreview */ false);

package/front_end/panels/sources/ResourceOriginPlugin.ts

@@ -28,6 +28,8 @@ const str_ = i18n.i18n.registerUIStrings('panels/sources/ResourceOriginPlugin.ts
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ResourceOriginPlugin extends Plugin {
+  readonly #linkifier = new Components.Linkifier.Linkifier();
+
   static override accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     const contentType = uiSourceCode.contentType();
     return contentType.hasScripts() || contentType.isFromSourceMap();
@@ -69,13 +71,15 @@ export class ResourceOriginPlugin extends Plugin {
     // Handle anonymous scripts with an originStackTrace.
     for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(this.uiSourceCode)) {
       if (script.originStackTrace?.callFrames.length) {
-        const link = linkifier.linkifyStackTraceTopFrame(script.debuggerModel.target(), script.originStackTrace);
+        const link = this.#linkifier.linkifyStackTraceTopFrame(script.debuggerModel.target(), script.originStackTrace);
         return [new UI.Toolbar.ToolbarItem(uiI18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: link}))];
       }
     }
 
     return [];
   }
-}
 
-export const linkifier = new Components.Linkifier.Linkifier();
+  override dispose(): void {
+    this.#linkifier.dispose();
+  }
+}

package/front_end/panels/timeline/TimelinePanel.ts

@@ -3201,27 +3201,6 @@ export interface TimelineModeViewDelegate {
   highlightEvent(event: Trace.Types.Events.Event|null): void;
 }
 
-export let loadTimelineHandlerInstance: LoadTimelineHandler;
-
-export class LoadTimelineHandler implements Common.QueryParamHandler.QueryParamHandler {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): LoadTimelineHandler {
-    const {forceNew} = opts;
-    if (!loadTimelineHandlerInstance || forceNew) {
-      loadTimelineHandlerInstance = new LoadTimelineHandler();
-    }
-
-    return loadTimelineHandlerInstance;
-  }
-
-  handleQueryParam(value: string): void {
-    void UI.ViewManager.ViewManager.instance().showView('timeline').then(async () => {
-      await TimelinePanel.instance().loadFromURL(window.decodeURIComponent(value) as Platform.DevToolsPath.UrlString);
-    });
-  }
-}
-
 export class TraceRevealer implements Common.Revealer.Revealer<SDK.TraceObject.TraceObject> {
   async reveal(trace: SDK.TraceObject.TraceObject): Promise<void> {
     await UI.ViewManager.ViewManager.instance().showView('timeline');

package/front_end/ui/components/docs/component_docs.ts

@@ -6,12 +6,8 @@
 import '../../../Images/Images.js';
 
 import * as CreateBreadcrumbs from './create_breadcrumbs.js';
-import * as ToggleDarkMode from './toggle_dark_mode.js';
-import * as ToggleFonts from './toggle_fonts.js';
 
-ToggleDarkMode.init();
 CreateBreadcrumbs.init();
-ToggleFonts.init();
 
 // This can be used by tests to hide the UI elements that are part of the component docs interface.
 // E.g., this is useful for screenshot tests.

package/front_end/ui/components/report_view/ReportView.ts

@@ -29,11 +29,14 @@ import reportValueStyles from './reportValue.css.js';
  *     <devtools-report-divider></devtools-report-divider>
  *   </devtools-report>
  * ```
- * The component is intended to replace UI.ReportView in an idiomatic way.
  */
 export interface ReportData {
   reportTitle: string;
 }
+
+/**
+ * @deprecated Use UI.ReportView.ReportView instead.
+ */
 export class Report extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #reportTitle = '';

package/front_end/ui/legacy/ReportView.ts

@@ -13,11 +13,6 @@ import reportViewStyles from './reportView.css.js';
 import type {Toolbar} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {VBox} from './Widget.js';
-
-/**
- * @deprecated Please consider using the web component version of this widget
- *             (`ui/components/report_view/ReportView.ts`) for new code.
- */
 export class ReportView extends VBox {
   private readonly contentBox: HTMLElement;
   private headerElement: HTMLElement;

package/front_end/ui/legacy/TextPrompt.ts

@@ -57,50 +57,87 @@ import {cloneCustomElement, ElementFocusRestorer} from './UIUtils.js';
  *
  * @property completionTimeout Sets the delay for showing the autocomplete suggestion box.
  * @event commit Editing is done and the result was accepted.
- * @event expand Editing was canceled.
+ * @event cancel Editing was canceled.
  * @event beforeautocomplete This is sent before the autocomplete suggestion box is triggered and before the <datalist>
  *                           is read.
  * @attribute editing Setting/removing this attribute starts/stops editing.
  * @attribute completions Sets the `id` of the <datalist> containing the autocomplete options.
+ * @attribute placeholder Sets a placeholder that's shown in place of the text contents when editing if the text is too
+ *            large.
  */
 export class TextPromptElement extends HTMLElement {
-  static readonly observedAttributes = ['editing', 'completions'];
+  static readonly observedAttributes = ['editing', 'completions', 'placeholder'];
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #entrypoint = this.#shadow.createChild('span');
   readonly #slot = this.#entrypoint.createChild('slot');
   readonly #textPrompt = new TextPrompt();
   #completionTimeout: number|null = null;
+  #completionObserver = new MutationObserver(this.#onMutate.bind(this));
 
   constructor() {
     super();
     this.#textPrompt.initialize(this.#willAutoComplete.bind(this));
   }
 
+  #onMutate(changes: MutationRecord[]): void {
+    const listId = this.getAttribute('completions');
+    if (!listId) {
+      return;
+    }
+    const checkIfNodeIsInCompletionList = (node: Node): boolean => {
+      if (node instanceof HTMLDataListElement) {
+        return node.id === listId;
+      }
+      if (node instanceof HTMLOptionElement) {
+        return Boolean(node.parentElement && checkIfNodeIsInCompletionList(node.parentElement));
+      }
+      return false;
+    };
+    const affectsCompletionList = (change: MutationRecord): boolean =>
+        change.addedNodes.values().some(checkIfNodeIsInCompletionList) ||
+        change.removedNodes.values().some(checkIfNodeIsInCompletionList) ||
+        checkIfNodeIsInCompletionList(change.target);
+
+    if (changes.some(affectsCompletionList)) {
+      this.#updateCompletions();
+    }
+  }
+
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
-    if (oldValue === newValue || !this.isConnected) {
+    if (oldValue === newValue) {
       return;
     }
 
     switch (name) {
       case 'editing':
-        if (newValue !== null && newValue !== 'false' && oldValue === null) {
-          this.#startEditing();
-        } else {
-          this.#stopEditing();
+        if (this.isConnected) {
+          if (newValue !== null && newValue !== 'false' && oldValue === null) {
+            this.#startEditing();
+          } else {
+            this.#stopEditing();
+          }
         }
         break;
       case 'completions':
-        if (this.#textPrompt.isSuggestBoxVisible()) {
-          void this.#textPrompt.complete(/* force=*/ true);
+        if (this.getAttribute('completions')) {
+          this.#completionObserver.observe(this, {childList: true, subtree: true});
+          this.#updateCompletions();
+        } else {
+          this.#textPrompt.clearAutocomplete();
+          this.#completionObserver.disconnect();
         }
         break;
     }
   }
 
-  async #willAutoComplete(expression?: string, filter?: string, force?: boolean): Promise<Suggestion[]> {
-    if (!force) {
-      this.dispatchEvent(new TextPromptElement.BeforeAutoCompleteEvent({expression, filter}));
+  #updateCompletions(): void {
+    if (this.isConnected) {
+      void this.#textPrompt.complete(/* force=*/ true);
     }
+  }
+
+  async #willAutoComplete(expression: string, filter: string, force: boolean): Promise<Suggestion[]> {
+    this.dispatchEvent(new TextPromptElement.BeforeAutoCompleteEvent({expression, filter, force}));
 
     const listId = this.getAttribute('completions');
     if (!listId) {
@@ -112,16 +149,20 @@ export class TextPromptElement extends HTMLElement {
       return [];
     }
 
-    filter = filter?.toLowerCase();
     return datalist.values()
-        .filter(option => option.textContent.startsWith(filter ?? ''))
+        .filter(option => option.textContent.startsWith(filter.toLowerCase()))
         .map(option => ({text: option.textContent}))
         .toArray();
   }
 
   #startEditing(): void {
+    const truncatedTextPlaceholder = this.getAttribute('placeholder');
     const placeholder = this.#entrypoint.createChild('span');
-    placeholder.textContent = this.#slot.deepInnerText();
+    if (truncatedTextPlaceholder === null) {
+      placeholder.textContent = this.#slot.deepInnerText();
+    } else {
+      placeholder.setTextContentTruncatedIfNeeded(this.#slot.deepInnerText(), truncatedTextPlaceholder);
+    }
     this.#slot.remove();
 
     const proxy = this.#textPrompt.attachAndStartEditing(placeholder, e => this.#done(e, /* commit=*/ true));
@@ -189,8 +230,8 @@ export namespace TextPromptElement {
       super('cancel');
     }
   }
-  export class BeforeAutoCompleteEvent extends CustomEvent<{expression?: string, filter?: string}> {
-    constructor(detail: {expression?: string, filter?: string}) {
+  export class BeforeAutoCompleteEvent extends CustomEvent<{expression: string, filter: string, force: boolean}> {
+    constructor(detail: {expression: string, filter: string, force: boolean}) {
       super('beforeautocomplete', {detail});
     }
   }
@@ -215,7 +256,12 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   private completionRequestId: number;
   private ghostTextElement: HTMLSpanElement;
   private leftParenthesesIndices: number[];
-  private loadCompletions!: (this: null, arg1: string, arg2: string, arg3?: boolean|undefined) => Promise<Suggestion[]>;
+  private loadCompletions!: (
+      this: null,
+      arg1: string,
+      arg2: string,
+      arg3: boolean,
+      ) => Promise<Suggestion[]>;
   private completionStopCharacters!: string;
   private usesSuggestionBuilder!: boolean;
   #element?: Element;
@@ -251,7 +297,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   initialize(
-      completions: (this: null, expression: string, filter: string, force?: boolean|undefined) => Promise<Suggestion[]>,
+      completions: (this: null, expression: string, filter: string, force: boolean) => Promise<Suggestion[]>,
       stopCharacters?: string, usesSuggestionBuilder?: boolean): void {
     this.loadCompletions = completions;
     this.completionStopCharacters = stopCharacters || ' =:[({;,!+-*/&|^<>.';

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

@@ -7,6 +7,7 @@ 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';
@@ -103,11 +104,14 @@ export class JavaScriptREPL {
     const formatter = new RemoteObjectPreviewFormatter();
     const {preview, type, subtype, className, description} = result.object;
     if (preview && type === 'object' && subtype !== 'node' && subtype !== 'trustedtype') {
-      formatter.appendObjectPreview(fragment, preview, false /* isEntry */);
+      /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+      render(formatter.renderObjectPreview(preview), fragment);
     } else {
-      const nonObjectPreview = formatter.renderPropertyPreview(
-          type, subtype, className, Platform.StringUtilities.trimEndWithMaxLength(description || '', 400));
-      fragment.appendChild(nonObjectPreview);
+      /* 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;
   }