front_end/ui/legacy/components/object_ui/RemoteObjectPreviewFormatter.ts - devtools/devtools-frontend.git - Git at Google

 // Copyright 2015 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 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, render} from '../../../lit/lit.js';

 const {ifDefined, repeat} = Directives;
 const UIStrings = {
   /**
    * @description Text shown in the console object preview. Shown when the user is inspecting a
    * JavaScript object and there are multiple empty properties on the object (x =
    * 'times'/'multiply').
    * @example {3} PH1
    */
   emptyD: 'empty × {PH1}',
   /**
    * @description Shown when the user is inspecting a JavaScript object in the console and there is
    * an empty property on the object..
    */
   empty: 'empty',
   /**
    * @description Text shown when the user is inspecting a JavaScript object, but of the properties
    * is not immediately available because it is a JavaScript 'getter' function, which means we have
    * to run some code first in order to compute this property.
    */
   thePropertyIsComputedWithAGetter: 'The property is computed with a getter',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/object_ui/RemoteObjectPreviewFormatter.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

 interface PropertyPreviewValue {
   name?: string;
   entry?: Protocol.Runtime.EntryPreview;
   value?: Protocol.Runtime.PropertyPreview;
   placeholder?: string;
 }

 export class RemoteObjectPreviewFormatter {
   private static objectPropertyComparator(a: Protocol.Runtime.PropertyPreview, b: Protocol.Runtime.PropertyPreview):
       number {
     return sortValue(a) - sortValue(b);

     function sortValue(property: Protocol.Runtime.PropertyPreview): number {
       // TODO(einbinder) expose whether preview properties are actually internal.
       if (property.name === InternalName.PROMISE_STATE) {
         return 1;
       }
       if (property.name === InternalName.PROMISE_RESULT) {
         return 2;
       }
       if (property.name === InternalName.GENERATOR_STATE || property.name === InternalName.PRIMITIVE_VALUE ||
           property.name === InternalName.WEAK_REF_TARGET) {
         return 3;
       }
       if (property.type !== Protocol.Runtime.PropertyPreviewType.Function && !property.name.startsWith('#')) {
         return 4;
       }
       return 5;
     }
   }

   renderObjectPreview(preview: Protocol.Runtime.ObjectPreview, includeNullOrUndefined = true): LitTemplate {
     const description = preview.description;
     const subTypesWithoutValuePreview = new Set<Protocol.Runtime.ObjectPreviewSubtype|'internal#entry'|'trustedtype'>([
       Protocol.Runtime.ObjectPreviewSubtype.Arraybuffer,
       Protocol.Runtime.ObjectPreviewSubtype.Dataview,
       Protocol.Runtime.ObjectPreviewSubtype.Error,
       Protocol.Runtime.ObjectPreviewSubtype.Null,
       Protocol.Runtime.ObjectPreviewSubtype.Regexp,
       Protocol.Runtime.ObjectPreviewSubtype.Webassemblymemory,
       'internal#entry',
       'trustedtype',
     ]);
     if (preview.type !== Protocol.Runtime.ObjectPreviewType.Object ||
         (preview.subtype && subTypesWithoutValuePreview.has(preview.subtype))) {
       return this.renderPropertyPreview(preview.type, preview.subtype, undefined, description);
     }
     const isArrayOrTypedArray = preview.subtype === Protocol.Runtime.ObjectPreviewSubtype.Array ||
         preview.subtype === Protocol.Runtime.ObjectPreviewSubtype.Typedarray;
     let objectDescription = '';
     if (description) {
       if (isArrayOrTypedArray) {
         const arrayLength = SDK.RemoteObject.RemoteObject.arrayLength(preview);
         const arrayLengthText = arrayLength > 1 ? ('(' + arrayLength + ')') : '';
         const arrayName = SDK.RemoteObject.RemoteObject.arrayNameFromDescription(description);
         objectDescription = arrayName === 'Array' ? arrayLengthText : (arrayName + arrayLengthText);
       } else {
         const hideDescription = description === 'Object';
         objectDescription = hideDescription ? '' : description;
       }
     }

     const items = Array.from(
         preview.entries         ? this.renderEntries(preview) :
             isArrayOrTypedArray ? this.renderArrayProperties(preview) :
                                   this.renderObjectProperties(preview, includeNullOrUndefined));

     // clang-format off
     const renderName = (name: string): LitTemplate  => html`<span class=name>${
       /^\s|\s$|^$|\n/.test(name)? '"' + name.replace(/\n/g, '\u21B5') + '"' : name}</span>`;

     const renderPlaceholder = (placeholder: string): LitTemplate =>
           html`<span class=object-value-undefined>${placeholder}</span>`;

     const renderValue = (value: Protocol.Runtime.PropertyPreview): LitTemplate=>
           this.renderPropertyPreview(value.type, value.subtype, value.name, value.value);

     const renderEntry = (entry: Protocol.Runtime.EntryPreview): LitTemplate=> html`${entry.key &&
           html`${this.renderPropertyPreview(entry.key.type, entry.key.subtype, undefined, entry.key.description)} => `}
           ${this.renderPropertyPreview(entry.value.type, entry.value.subtype, undefined, entry.value.description)}`;

     const renderItem = ({name, entry, value, placeholder}: PropertyPreviewValue, index: number): LitTemplate => html`${
         index > 0 ? ', ' : ''}${
         placeholder !== undefined ? renderPlaceholder(placeholder) : nothing}${
         name !== undefined ? renderName(name) : nothing}${
         name !== undefined && value ? ': ' : ''}${
         value ? renderValue(value) : nothing}${
         entry ? renderEntry(entry) : nothing}`;
     // clang-format on

     return html`${
         objectDescription.length > 0 ?
             html`<span class=object-description>${objectDescription + '\xA0'}</span>` :
             nothing}<span class=object-properties-preview>${isArrayOrTypedArray ? '[' : '{'}${
         repeat(items, renderItem)}${preview.overflow ? html`<span>${items.length > 0 ? ',\xA0…' : '…'}</span>` : ''}
     ${isArrayOrTypedArray ? ']' : '}'}</span>`;
   }

   private *
       renderObjectProperties(preview: Protocol.Runtime.ObjectPreview, includeNullOrUndefined: boolean):
           Generator<PropertyPreviewValue> {
     const properties = preview.properties.filter(p => p.type !== 'accessor')
                            .sort(RemoteObjectPreviewFormatter.objectPropertyComparator);
     for (let i = 0; i < properties.length; ++i) {
       const property = properties[i];
       const name = property.name;
       if (!includeNullOrUndefined &&
           (property.type === 'undefined' || (property.type === 'object' && property.subtype === 'null'))) {
         continue;
       }

       // Internal properties are given special formatting, e.g. Promises `<rejected>: 123`.
       if (preview.subtype === Protocol.Runtime.ObjectPreviewSubtype.Promise && name === InternalName.PROMISE_STATE) {
         const promiseResult =
             properties.at(i + 1)?.name === InternalName.PROMISE_RESULT ? properties.at(i + 1) : undefined;
         if (promiseResult) {
           i++;
         }
         yield {name: '<' + property.value + '>', value: property.value !== 'pending' ? promiseResult : undefined};
       } else if (preview.subtype === 'generator' && name === InternalName.GENERATOR_STATE) {
         yield {name: '<' + property.value + '>'};
       } else if (name === InternalName.PRIMITIVE_VALUE) {
         yield {value: property};
       } else if (name === InternalName.WEAK_REF_TARGET) {
         if (property.type === Protocol.Runtime.PropertyPreviewType.Undefined) {
           yield {name: '<cleared>'};
         } else {
           yield {value: property};
         }
       } else {
         yield {name, value: property};
       }
     }
   }

   private * renderArrayProperties(preview: Protocol.Runtime.ObjectPreview): Generator<PropertyPreviewValue> {
     const arrayLength = SDK.RemoteObject.RemoteObject.arrayLength(preview);
     const indexProperties = preview.properties.filter(p => toArrayIndex(p.name) !== -1).sort(arrayEntryComparator);
     const otherProperties = preview.properties.filter(p => toArrayIndex(p.name) === -1)
                                 .sort(RemoteObjectPreviewFormatter.objectPropertyComparator);

     function arrayEntryComparator(a: Protocol.Runtime.PropertyPreview, b: Protocol.Runtime.PropertyPreview): number {
       return toArrayIndex(a.name) - toArrayIndex(b.name);
     }

     function toArrayIndex(name: string): number {
       // We need to differentiate between property accesses and array index accesses
       // Therefore, we need to make sure we are always dealing with an i32, in the event
       // that a particular property also exists, but as the literal string. For example
       // for {["1.5"]: true}, we don't want to return `true` if we provide `1.5` as the
       // value, but only want to do that if we provide `"1.5"`.
       const index = Number(name) >>> 0;
       if (String(index) === name && index < arrayLength) {
         return index;
       }
       return -1;
     }

     // Gaps can be shown when all properties are guaranteed to be in the preview.
     const canShowGaps = !preview.overflow;

     const indexedProperties:
         Array<{property: Protocol.Runtime.PropertyPreview, index: number, gap: number, hasGaps: boolean}> = [];
     for (const property of indexProperties) {
       const index = toArrayIndex(property.name);
       const gap = index - (indexedProperties.at(-1)?.index ?? -1) - 1;
       const hasGaps = index !== indexedProperties.length;
       indexedProperties.push({property, index, gap, hasGaps});
     }
     const trailingGap = arrayLength - (indexedProperties.at(-1)?.index ?? -1) - 1;

     // TODO(l10n): Plurals. Tricky because of a bug in the presubmit check for plurals.
     const renderGap = (count: number): {placeholder: string} =>
         ({placeholder: count !== 1 ? i18nString(UIStrings.emptyD, {PH1: count}) : i18nString(UIStrings.empty)});
     for (const {property, gap, hasGaps} of indexedProperties) {
       if (canShowGaps && gap > 0) {
         yield renderGap(gap);
       }
       yield {name: !canShowGaps && hasGaps ? property.name : undefined, value: property};
     }
     if (canShowGaps && trailingGap > 0) {
       yield renderGap(trailingGap);
     }

     for (const property of otherProperties) {
       yield {name: property.name, value: property};
     }
   }

   private * renderEntries(preview: Protocol.Runtime.ObjectPreview): Generator<PropertyPreviewValue> {
     for (const entry of preview.entries ?? []) {
       yield {entry};
     }
   }

   renderPropertyPreview(type: string, subtype?: string, className?: string|null, description?: string): LitTemplate {
     const title = type === 'accessor'   ? i18nString(UIStrings.thePropertyIsComputedWithAGetter) :
         (type === 'object' && !subtype) ? description :
                                           undefined;

     const abbreviateFullQualifiedClassName = (description: string): string => {
       const abbreviatedDescription = description.split('.');
       for (let i = 0; i < abbreviatedDescription.length - 1; ++i) {
         abbreviatedDescription[i] = Platform.StringUtilities.trimMiddle(abbreviatedDescription[i], 3);
       }
       return abbreviatedDescription.length === 1 && abbreviatedDescription[0] === 'Object' ?
           '{…}' :
           abbreviatedDescription.join('.');
     };

     const preview = (): string|LitTemplate|undefined|null => type === 'accessor' ? '(...)' :
         type === 'function'                                                      ? '\u0192' :
         type === 'object' && subtype === 'trustedtype' && className ? renderTrustedType(description ?? '', className) :
         type === 'object' && subtype === 'node' && description      ? renderNodeTitle(description) :
         type === 'string'             ? Platform.StringUtilities.formatAsJSLiteral(description ?? '') :
         type === 'object' && !subtype ? abbreviateFullQualifiedClassName(description ?? '') :
                                         description;

     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 {
   GENERATOR_STATE = '[[GeneratorState]]',
   PRIMITIVE_VALUE = '[[PrimitiveValue]]',
   PROMISE_STATE = '[[PromiseState]]',
   PROMISE_RESULT = '[[PromiseResult]]',
   WEAK_REF_TARGET = '[[WeakRefTarget]]',
 }

 export function renderNodeTitle(nodeTitle: string): LitTemplate|null {
   const match = nodeTitle.match(/([^#.]+)(#[^.]+)?(\..*)?/);
   if (!match) {
     return null;
   }
   return html`<span class=webkit-html-tag-name>${match[1]}</span>${
       match[2] && html`<span class=webkit-html-attribute-value>${match[2]}</span>`}${
       match[3] && html`<span class=webkit-html-attribute-name>${match[3]}</span>`}`;
 }

 export function renderTrustedType(description: string, className: string): LitTemplate {
   return html`${className} <span class=object-value-string>"${description.replace(/\n/g, '\u21B5')}"</span>`;
 }
	// Copyright 2015 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 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, render} from '../../../lit/lit.js';

	const {ifDefined, repeat} = Directives;
	const UIStrings = {
	/**
	* @description Text shown in the console object preview. Shown when the user is inspecting a
	* JavaScript object and there are multiple empty properties on the object (x =
	* 'times'/'multiply').
	* @example {3} PH1
	*/
	emptyD: 'empty × {PH1}',
	/**
	* @description Shown when the user is inspecting a JavaScript object in the console and there is
	* an empty property on the object..
	*/
	empty: 'empty',
	/**
	* @description Text shown when the user is inspecting a JavaScript object, but of the properties
	* is not immediately available because it is a JavaScript 'getter' function, which means we have
	* to run some code first in order to compute this property.
	*/
	thePropertyIsComputedWithAGetter: 'The property is computed with a getter',
	} as const;
	const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/object_ui/RemoteObjectPreviewFormatter.ts', UIStrings);
	const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

	interface PropertyPreviewValue {
	name?: string;
	entry?: Protocol.Runtime.EntryPreview;
	value?: Protocol.Runtime.PropertyPreview;
	placeholder?: string;
	}

	export class RemoteObjectPreviewFormatter {
	private static objectPropertyComparator(a: Protocol.Runtime.PropertyPreview, b: Protocol.Runtime.PropertyPreview):
	number {
	return sortValue(a) - sortValue(b);

	function sortValue(property: Protocol.Runtime.PropertyPreview): number {
	// TODO(einbinder) expose whether preview properties are actually internal.
	if (property.name === InternalName.PROMISE_STATE) {
	return 1;
	}
	if (property.name === InternalName.PROMISE_RESULT) {
	return 2;
	}
	if (property.name === InternalName.GENERATOR_STATE \|\| property.name === InternalName.PRIMITIVE_VALUE \|\|
	property.name === InternalName.WEAK_REF_TARGET) {
	return 3;
	}
	if (property.type !== Protocol.Runtime.PropertyPreviewType.Function && !property.name.startsWith('#')) {
	return 4;
	}
	return 5;
	}
	}

	renderObjectPreview(preview: Protocol.Runtime.ObjectPreview, includeNullOrUndefined = true): LitTemplate {
	const description = preview.description;
	const subTypesWithoutValuePreview = new Set<Protocol.Runtime.ObjectPreviewSubtype\|'internal#entry'\|'trustedtype'>([
	Protocol.Runtime.ObjectPreviewSubtype.Arraybuffer,
	Protocol.Runtime.ObjectPreviewSubtype.Dataview,
	Protocol.Runtime.ObjectPreviewSubtype.Error,
	Protocol.Runtime.ObjectPreviewSubtype.Null,
	Protocol.Runtime.ObjectPreviewSubtype.Regexp,
	Protocol.Runtime.ObjectPreviewSubtype.Webassemblymemory,
	'internal#entry',
	'trustedtype',
	]);
	if (preview.type !== Protocol.Runtime.ObjectPreviewType.Object \|\|
	(preview.subtype && subTypesWithoutValuePreview.has(preview.subtype))) {
	return this.renderPropertyPreview(preview.type, preview.subtype, undefined, description);
	}
	const isArrayOrTypedArray = preview.subtype === Protocol.Runtime.ObjectPreviewSubtype.Array \|\|
	preview.subtype === Protocol.Runtime.ObjectPreviewSubtype.Typedarray;
	let objectDescription = '';
	if (description) {
	if (isArrayOrTypedArray) {
	const arrayLength = SDK.RemoteObject.RemoteObject.arrayLength(preview);
	const arrayLengthText = arrayLength > 1 ? ('(' + arrayLength + ')') : '';
	const arrayName = SDK.RemoteObject.RemoteObject.arrayNameFromDescription(description);
	objectDescription = arrayName === 'Array' ? arrayLengthText : (arrayName + arrayLengthText);
	} else {
	const hideDescription = description === 'Object';
	objectDescription = hideDescription ? '' : description;
	}
	}

	const items = Array.from(
	preview.entries ? this.renderEntries(preview) :
	isArrayOrTypedArray ? this.renderArrayProperties(preview) :
	this.renderObjectProperties(preview, includeNullOrUndefined));

	// clang-format off
	const renderName = (name: string): LitTemplate => html`<span class=name>${
	/^\s\|\s$\|^$\|\n/.test(name)? '"' + name.replace(/\n/g, '\u21B5') + '"' : name}</span>`;

	const renderPlaceholder = (placeholder: string): LitTemplate =>
	html`<span class=object-value-undefined>${placeholder}</span>`;

	const renderValue = (value: Protocol.Runtime.PropertyPreview): LitTemplate=>
	this.renderPropertyPreview(value.type, value.subtype, value.name, value.value);

	const renderEntry = (entry: Protocol.Runtime.EntryPreview): LitTemplate=> html`${entry.key &&
	html`${this.renderPropertyPreview(entry.key.type, entry.key.subtype, undefined, entry.key.description)} => `}
	${this.renderPropertyPreview(entry.value.type, entry.value.subtype, undefined, entry.value.description)}`;

	const renderItem = ({name, entry, value, placeholder}: PropertyPreviewValue, index: number): LitTemplate => html`${
	index > 0 ? ', ' : ''}${
	placeholder !== undefined ? renderPlaceholder(placeholder) : nothing}${
	name !== undefined ? renderName(name) : nothing}${
	name !== undefined && value ? ': ' : ''}${
	value ? renderValue(value) : nothing}${
	entry ? renderEntry(entry) : nothing}`;
	// clang-format on

	return html`${
	objectDescription.length > 0 ?
	html`<span class=object-description>${objectDescription + '\xA0'}</span>` :
	nothing}<span class=object-properties-preview>${isArrayOrTypedArray ? '[' : '{'}${
	repeat(items, renderItem)}${preview.overflow ? html`<span>${items.length > 0 ? ',\xA0…' : '…'}</span>` : ''}
	${isArrayOrTypedArray ? ']' : '}'}</span>`;
	}

	private *
	renderObjectProperties(preview: Protocol.Runtime.ObjectPreview, includeNullOrUndefined: boolean):
	Generator<PropertyPreviewValue> {
	const properties = preview.properties.filter(p => p.type !== 'accessor')
	.sort(RemoteObjectPreviewFormatter.objectPropertyComparator);
	for (let i = 0; i < properties.length; ++i) {
	const property = properties[i];
	const name = property.name;
	if (!includeNullOrUndefined &&
	(property.type === 'undefined' \|\| (property.type === 'object' && property.subtype === 'null'))) {
	continue;
	}

	// Internal properties are given special formatting, e.g. Promises `<rejected>: 123`.
	if (preview.subtype === Protocol.Runtime.ObjectPreviewSubtype.Promise && name === InternalName.PROMISE_STATE) {
	const promiseResult =
	properties.at(i + 1)?.name === InternalName.PROMISE_RESULT ? properties.at(i + 1) : undefined;
	if (promiseResult) {
	i++;
	}
	yield {name: '<' + property.value + '>', value: property.value !== 'pending' ? promiseResult : undefined};
	} else if (preview.subtype === 'generator' && name === InternalName.GENERATOR_STATE) {
	yield {name: '<' + property.value + '>'};
	} else if (name === InternalName.PRIMITIVE_VALUE) {
	yield {value: property};
	} else if (name === InternalName.WEAK_REF_TARGET) {
	if (property.type === Protocol.Runtime.PropertyPreviewType.Undefined) {
	yield {name: '<cleared>'};
	} else {
	yield {value: property};
	}
	} else {
	yield {name, value: property};
	}
	}
	}

	private * renderArrayProperties(preview: Protocol.Runtime.ObjectPreview): Generator<PropertyPreviewValue> {
	const arrayLength = SDK.RemoteObject.RemoteObject.arrayLength(preview);
	const indexProperties = preview.properties.filter(p => toArrayIndex(p.name) !== -1).sort(arrayEntryComparator);
	const otherProperties = preview.properties.filter(p => toArrayIndex(p.name) === -1)
	.sort(RemoteObjectPreviewFormatter.objectPropertyComparator);

	function arrayEntryComparator(a: Protocol.Runtime.PropertyPreview, b: Protocol.Runtime.PropertyPreview): number {
	return toArrayIndex(a.name) - toArrayIndex(b.name);
	}

	function toArrayIndex(name: string): number {
	// We need to differentiate between property accesses and array index accesses
	// Therefore, we need to make sure we are always dealing with an i32, in the event
	// that a particular property also exists, but as the literal string. For example
	// for {["1.5"]: true}, we don't want to return `true` if we provide `1.5` as the
	// value, but only want to do that if we provide `"1.5"`.
	const index = Number(name) >>> 0;
	if (String(index) === name && index < arrayLength) {
	return index;
	}
	return -1;
	}

	// Gaps can be shown when all properties are guaranteed to be in the preview.
	const canShowGaps = !preview.overflow;

	const indexedProperties:
	Array<{property: Protocol.Runtime.PropertyPreview, index: number, gap: number, hasGaps: boolean}> = [];
	for (const property of indexProperties) {
	const index = toArrayIndex(property.name);
	const gap = index - (indexedProperties.at(-1)?.index ?? -1) - 1;
	const hasGaps = index !== indexedProperties.length;
	indexedProperties.push({property, index, gap, hasGaps});
	}
	const trailingGap = arrayLength - (indexedProperties.at(-1)?.index ?? -1) - 1;

	// TODO(l10n): Plurals. Tricky because of a bug in the presubmit check for plurals.
	const renderGap = (count: number): {placeholder: string} =>
	({placeholder: count !== 1 ? i18nString(UIStrings.emptyD, {PH1: count}) : i18nString(UIStrings.empty)});
	for (const {property, gap, hasGaps} of indexedProperties) {
	if (canShowGaps && gap > 0) {
	yield renderGap(gap);
	}
	yield {name: !canShowGaps && hasGaps ? property.name : undefined, value: property};
	}
	if (canShowGaps && trailingGap > 0) {
	yield renderGap(trailingGap);
	}

	for (const property of otherProperties) {
	yield {name: property.name, value: property};
	}
	}

	private * renderEntries(preview: Protocol.Runtime.ObjectPreview): Generator<PropertyPreviewValue> {
	for (const entry of preview.entries ?? []) {
	yield {entry};
	}
	}

	renderPropertyPreview(type: string, subtype?: string, className?: string\|null, description?: string): LitTemplate {
	const title = type === 'accessor' ? i18nString(UIStrings.thePropertyIsComputedWithAGetter) :
	(type === 'object' && !subtype) ? description :
	undefined;

	const abbreviateFullQualifiedClassName = (description: string): string => {
	const abbreviatedDescription = description.split('.');
	for (let i = 0; i < abbreviatedDescription.length - 1; ++i) {
	abbreviatedDescription[i] = Platform.StringUtilities.trimMiddle(abbreviatedDescription[i], 3);
	}
	return abbreviatedDescription.length === 1 && abbreviatedDescription[0] === 'Object' ?
	'{…}' :
	abbreviatedDescription.join('.');
	};

	const preview = (): string\|LitTemplate\|undefined\|null => type === 'accessor' ? '(...)' :
	type === 'function' ? '\u0192' :
	type === 'object' && subtype === 'trustedtype' && className ? renderTrustedType(description ?? '', className) :
	type === 'object' && subtype === 'node' && description ? renderNodeTitle(description) :
	type === 'string' ? Platform.StringUtilities.formatAsJSLiteral(description ?? '') :
	type === 'object' && !subtype ? abbreviateFullQualifiedClassName(description ?? '') :
	description;

	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 {
	GENERATOR_STATE = '[[GeneratorState]]',
	PRIMITIVE_VALUE = '[[PrimitiveValue]]',
	PROMISE_STATE = '[[PromiseState]]',
	PROMISE_RESULT = '[[PromiseResult]]',
	WEAK_REF_TARGET = '[[WeakRefTarget]]',
	}

	export function renderNodeTitle(nodeTitle: string): LitTemplate\|null {
	const match = nodeTitle.match(/([^#.]+)(#[^.]+)?(\..*)?/);
	if (!match) {
	return null;
	}
	return html`<span class=webkit-html-tag-name>${match[1]}</span>${
	match[2] && html`<span class=webkit-html-attribute-value>${match[2]}</span>`}${
	match[3] && html`<span class=webkit-html-attribute-name>${match[3]}</span>`}`;
	}

	export function renderTrustedType(description: string, className: string): LitTemplate {
	return html`${className} <span class=object-value-string>"${description.replace(/\n/g, '\u21B5')}"</span>`;
	}