=> { event.preventDefault(); event.stopPropagation(); const attribute = (event.target as HTMLElement).dataset.attribute as Attribute; this.#commit(immutableDeepAssign(this.state, { [attribute]: await EditorState.defaultByAttribute(this.state, attribute), })); this.#ensureFocus(`[data-attribute=${attribute}].attribute devtools-suggestion-input`); }; #renderInlineButton(opts: {class: string, title: string, iconName: string, onClick: (event: MouseEvent) => void}): Lit.TemplateResult|undefined { if (this.disabled) { return; } return html` `; } #renderDeleteButton(attribute: Attribute): Lit.TemplateResult|undefined { if (this.disabled) { return; } const attributes = attributesByType[this.state.type]; const optional = [...attributes.optional].includes(attribute as typeof attributes.optional[number]); if (!optional || this.disabled) { return; } // clang-format off return html` { event.preventDefault(); event.stopPropagation(); this.#commit( immutableDeepAssign(this.state, { [attribute]: undefined }), ); }} >`; // clang-format on } #renderTypeRow(editable: boolean): Lit.TemplateResult { this.#renderedAttributes.add('type'); // clang-format off return html`

type:

`; // clang-format on } #renderRow(attribute: Attribute): Lit.TemplateResult|undefined { this.#renderedAttributes.add(attribute); const attributeValue = this.state[attribute]?.toString(); if (attributeValue === undefined) { return; } // clang-format off return html`

${attribute}:

{ switch (attribute) { case 'expression': return 'text/javascript'; case 'properties': return 'application/json'; default: return ''; } })()} @blur=${this.#handleInputBlur({ attribute, from(value) { if (this.state[attribute] === undefined) { return; } switch (attribute) { case 'properties': Host.userMetrics.recordingAssertion(Host.UserMetrics.RecordingAssertion.PROPERTY_ASSERTION_EDITED); break; } return {[attribute]: value}; }, metric: Host.UserMetrics.RecordingEdited.OTHER_EDITING, })} > ${this.#renderDeleteButton(attribute)}

`; // clang-format on } #renderFrameRow(): Lit.TemplateResult|undefined { this.#renderedAttributes.add('frame'); if (this.state.frame === undefined) { return; } // clang-format off return html`

frame:

${this.#renderDeleteButton('frame')}

${this.state.frame.map((frame, index, frames) => { return html`

${this.#renderInlineButton({ class: 'add-frame', title: i18nString(UIStrings.addFrameIndex), iconName: 'plus', onClick: this.#handleAddOrRemoveClick( { frame: new ArrayAssignments({ [index + 1]: new InsertAssignment( defaultValuesByAttribute.frame[0], ), }), }, `devtools-suggestion-input[data-path="frame.${index + 1}"]`, Host.UserMetrics.RecordingEdited.OTHER_EDITING, ), })} ${this.#renderInlineButton({ class: 'remove-frame', title: i18nString(UIStrings.removeFrameIndex), iconName: 'minus', onClick: this.#handleAddOrRemoveClick( { frame: new ArrayAssignments({ [index]: undefined }), }, `devtools-suggestion-input[data-path="frame.${Math.min( index, frames.length - 2, )}"]`, Host.UserMetrics.RecordingEdited.OTHER_EDITING, ), })}

`; })}

`; // clang-format on } #renderSelectorsRow(): Lit.TemplateResult|undefined { this.#renderedAttributes.add('selectors'); if (this.state.selectors === undefined) { return; } // clang-format off return html`

selectors:

${this.#renderDeleteButton('selectors')}

${this.state.selectors.map((selector, index, selectors) => { return html`

selector #${index + 1}:

${this.#renderInlineButton({ class: 'add-selector', title: i18nString(UIStrings.addSelector), iconName: 'plus', onClick: this.#handleAddOrRemoveClick( { selectors: new ArrayAssignments({ [index + 1]: new InsertAssignment( structuredClone(defaultValuesByAttribute.selectors[0]), ), }), }, `devtools-suggestion-input[data-path="selectors.${index + 1}.0"]`, Host.UserMetrics.RecordingEdited.SELECTOR_ADDED, ), })} ${this.#renderInlineButton({ class: 'remove-selector', title: i18nString(UIStrings.removeSelector), iconName: 'minus', onClick: this.#handleAddOrRemoveClick( { selectors: new ArrayAssignments({ [index]: undefined }) }, `devtools-suggestion-input[data-path="selectors.${Math.min( index, selectors.length - 2, )}.0"]`, Host.UserMetrics.RecordingEdited.SELECTOR_REMOVED, ), })}

${selector.map((part, partIndex, parts) => { return html`

${this.#renderInlineButton({ class: 'add-selector-part', title: i18nString(UIStrings.addSelectorPart), iconName: 'plus', onClick: this.#handleAddOrRemoveClick( { selectors: new ArrayAssignments({ [index]: new ArrayAssignments({ [partIndex + 1]: new InsertAssignment( defaultValuesByAttribute.selectors[0][0], ), }), }), }, `devtools-suggestion-input[data-path="selectors.${index}.${ partIndex + 1 }"]`, Host.UserMetrics.RecordingEdited.SELECTOR_PART_ADDED, ), })} ${this.#renderInlineButton({ class: 'remove-selector-part', title: i18nString(UIStrings.removeSelectorPart), iconName: 'minus', onClick: this.#handleAddOrRemoveClick( { selectors: new ArrayAssignments({ [index]: new ArrayAssignments({ [partIndex]: undefined, }), }), }, `devtools-suggestion-input[data-path="selectors.${index}.${Math.min( partIndex, parts.length - 2, )}"]`, Host.UserMetrics.RecordingEdited.SELECTOR_PART_REMOVED, ), })}

`; })}`; })}

`; // clang-format on } #renderAssertedEvents(): Lit.TemplateResult|undefined { this.#renderedAttributes.add('assertedEvents'); if (this.state.assertedEvents === undefined) { return; } // clang-format off return html`

asserted events:

${this.#renderDeleteButton('assertedEvents')}

${this.state.assertedEvents.map((event, index) => { return html`

type:

${event.type}

title:

url:

`; })}

`; // clang-format on } #renderAttributesRow(): Lit.TemplateResult|undefined { this.#renderedAttributes.add('attributes'); if (this.state.attributes === undefined) { return; } // clang-format off return html`

attributes:

${this.#renderDeleteButton('attributes')}

${this.state.attributes.map(({ name, value }, index, attributes) => { return html`

: ${this.#renderInlineButton({ class: 'add-attribute-assertion', title: i18nString(UIStrings.addSelectorPart), iconName: 'plus', onClick: this.#handleAddOrRemoveClick( { attributes: new ArrayAssignments({ [index + 1]: new InsertAssignment( (() => { { const names = new Set( attributes.map(({ name }) => name), ); const defaultAttribute = defaultValuesByAttribute.attributes[0]; let name = defaultAttribute.name; let i = 0; while (names.has(name)) { ++i; name = `${defaultAttribute.name}-${i}`; } return { ...defaultAttribute, name }; } })(), ), }), }, `devtools-suggestion-input[data-path="attributes.${ index + 1 }.name"]`, Host.UserMetrics.RecordingEdited.OTHER_EDITING, ), })} ${this.#renderInlineButton({ class: 'remove-attribute-assertion', title: i18nString(UIStrings.removeSelectorPart), iconName: 'minus', onClick: this.#handleAddOrRemoveClick( { attributes: new ArrayAssignments({ [index]: undefined }) }, `devtools-suggestion-input[data-path="attributes.${Math.min( index, attributes.length - 2, )}.value"]`, Host.UserMetrics.RecordingEdited.OTHER_EDITING, ), })}

`; })}

`; // clang-format on } #renderAddRowButtons(): Array { const attributes = attributesByType[this.state.type]; return [...attributes.optional].filter(attr => this.state[attr] === undefined).map(attr => { // clang-format off return html` ${i18nString(UIStrings.addAttribute, { attributeName: attr, })} `; // clang-format on }); } #ensureFocus = (query: string): void => { void this.updateComplete.then(() => { const node = this.renderRoot.querySelector(query); node?.focus(); }); }; protected override render(): Lit.TemplateResult { this.#renderedAttributes = new Set(); // clang-format off const result = html`

${this.#renderTypeRow(this.isTypeEditable)} ${this.#renderRow('target')} ${this.#renderFrameRow()} ${this.#renderSelectorsRow()} ${this.#renderRow('deviceType')} ${this.#renderRow('button')} ${this.#renderRow('url')} ${this.#renderRow('x')} ${this.#renderRow('y')} ${this.#renderRow('offsetX')} ${this.#renderRow('offsetY')} ${this.#renderRow('value')} ${this.#renderRow('key')} ${this.#renderRow('operator')} ${this.#renderRow('count')} ${this.#renderRow('expression')} ${this.#renderRow('duration')} ${this.#renderAssertedEvents()} ${this.#renderRow('timeout')} ${this.#renderRow('width')} ${this.#renderRow('height')} ${this.#renderRow('deviceScaleFactor')} ${this.#renderRow('isMobile')} ${this.#renderRow('hasTouch')} ${this.#renderRow('isLandscape')} ${this.#renderRow('download')} ${this.#renderRow('upload')} ${this.#renderRow('latency')} ${this.#renderRow('name')} ${this.#renderRow('parameters')} ${this.#renderRow('visible')} ${this.#renderRow('properties')} ${this.#renderAttributesRow()} ${this.error ? html`

${i18nString(UIStrings.notSaved, { error: this.error, })}

` : undefined} ${!this.disabled ? html`

${this.#renderAddRowButtons()}

` : undefined}

`; // clang-format on for (const key of Object.keys(dataTypeByAttribute)) { if (!this.#renderedAttributes.has(key as Attribute)) { throw new Error(`The editable attribute ${key} does not have UI`); } } return result; } }