chrome-devtools-frontend 1.0.1543472 → 1.0.1545096

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -196,7 +196,7 @@ interface ViewInput {
   callbacks: {
     onClose: () => void,
     onSearch: () => void,
-    onRating: (event: Event) => void,
+    onRating: (isPositive: boolean) => void,
     onReport: () => void,
     onGoToSignIn: () => void,
     onConsentReminderConfirmed: () => Promise<void>,
@@ -209,6 +209,8 @@ interface ViewInput {
 
 interface ViewOutput {
   referenceDetailsRef: Lit.Directives.Ref<HTMLDetailsElement>;
+  headerRef: Lit.Directives.Ref<HTMLHeadingElement>;
+  citationLinks: HTMLElement[];
 }
 
 const enum State {
@@ -297,7 +299,7 @@ function renderLearnMoreAboutInsights(): Lit.TemplateResult {
   // clang-format on
 }
 
-function maybeRenderSources(directCitationUrls: string[]): Lit.LitTemplate {
+function maybeRenderSources(directCitationUrls: string[], output: ViewOutput): Lit.LitTemplate {
   if (!directCitationUrls.length) {
     return Lit.nothing;
   }
@@ -310,8 +312,8 @@ function maybeRenderSources(directCitationUrls: string[]): Lit.LitTemplate {
           <x-link
             href=${url}
             class="link"
-            data-index=${index + 1}
             jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+            ${Directives.ref(e => { output.citationLinks[index] = e as HTMLElement; })}
           >
             ${url}
           </x-link>
@@ -376,7 +378,7 @@ function renderInsight(
         ${isSearchRagResponse(insight.metadata) ? html`
           <details class="references" ${Directives.ref(output.referenceDetailsRef)} @toggle=${callbacks.onToggleReferenceDetails} jslog=${VisualLogging.expand('references').track({click: true})}>
             <summary>${i18nString(UIStrings.references)}</summary>
-            ${maybeRenderSources(insight.directCitationUrls)}
+            ${maybeRenderSources(insight.directCitationUrls, output)}
             ${maybeRenderRelatedContent(insight.relatedUrls, insight.directCitationUrls)}
           </details>
         ` : Lit.nothing}
@@ -557,7 +559,7 @@ function renderInsightFooter(noLogging: ViewInput['noLogging'], selectedRating:
       .toggled=${selectedRating === true}
       .title=${i18nString(UIStrings.goodResponse)}
       .jslogContext=${'thumbs-up'}
-      @click=${callbacks.onRating}
+      @click=${() => callbacks.onRating(true)}
     ></devtools-button>
     <devtools-button
       data-rating="false"
@@ -571,7 +573,7 @@ function renderInsightFooter(noLogging: ViewInput['noLogging'], selectedRating:
       .toggled=${selectedRating === false}
       .title=${i18nString(UIStrings.badResponse)}
       .jslogContext=${'thumbs-down'}
-      @click=${callbacks.onRating}
+      @click=${() => callbacks.onRating(false)}
     ></devtools-button>
     <devtools-button
       .iconName=${'report'}
@@ -602,13 +604,15 @@ interface HeaderInput {
   onClose: ViewInput['callbacks']['onClose'];
 }
 
-function renderHeader({headerText, showIcon = false, showSpinner = false, onClose}: HeaderInput): Lit.LitTemplate {
+function renderHeader(
+    {headerText, showIcon = false, showSpinner = false, onClose}: HeaderInput,
+    headerRef: Lit.Directives.Ref<HTMLHeadingElement>): Lit.LitTemplate {
   // clang-format off
   return html`
     <header>
       ${showIcon ? renderHeaderIcon() : Lit.nothing}
       <div class="filler">
-        <h2 tabindex="-1">
+        <h2 tabindex="-1" ${Directives.ref(headerRef)}>
           ${headerText}
         </h2>
         ${showSpinner ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
@@ -644,7 +648,9 @@ export class ConsoleInsight extends HTMLElement {
 
   // Main state.
   #state: StateData;
-  #referenceDetailsRef = Lit.Directives.createRef<HTMLDetailsElement>();
+  #referenceDetailsRef = Directives.createRef<HTMLDetailsElement>();
+  #headerRef = Directives.createRef<HTMLHeadingElement>();
+  #citationLinks: HTMLElement[] = [];
   #areReferenceDetailsOpen = false;
 
   // Rating sub-form state.
@@ -694,8 +700,7 @@ export class ConsoleInsight extends HTMLElement {
     this.#areReferenceDetailsOpen = true;
     this.#render();
 
-    const highlightedElement =
-        this.#shadow.querySelector(`.sources-list x-link[data-index="${index}"]`) as HTMLElement | null;
+    const highlightedElement = this.#citationLinks[index - 1];
     if (highlightedElement) {
       UI.UIUtils.runCSSAnimationOnce(highlightedElement, 'highlighted');
       if (areDetailsAlreadyExpanded) {
@@ -856,7 +861,7 @@ export class ConsoleInsight extends HTMLElement {
     this.classList.add('closing');
   }
 
-  #onRating(event: Event): void {
+  #onRating(isPositive: boolean): void {
     if (this.#state.type !== State.INSIGHT) {
       throw new Error('Unexpected state');
     }
@@ -868,7 +873,7 @@ export class ConsoleInsight extends HTMLElement {
       return;
     }
 
-    this.#selectedRating = (event.target as HTMLElement).dataset.rating === 'true';
+    this.#selectedRating = isPositive;
     this.#render();
     if (this.#selectedRating) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRatedPositive);
@@ -1071,7 +1076,7 @@ export class ConsoleInsight extends HTMLElement {
 
   #focusHeader(): void {
     this.addEventListener('animationend', () => {
-      (this.#shadow.querySelector('header h2') as HTMLElement | undefined)?.focus();
+      this.#headerRef.value?.focus();
     }, {once: true});
   }
 
@@ -1118,6 +1123,8 @@ export class ConsoleInsight extends HTMLElement {
     };
     const output: ViewOutput = {
       referenceDetailsRef: this.#referenceDetailsRef,
+      headerRef: this.#headerRef,
+      citationLinks: [],
     };
 
     // Future Widget view function starts here.
@@ -1132,21 +1139,23 @@ export class ConsoleInsight extends HTMLElement {
 
     switch (state.type) {
       case State.LOADING:
-        header = renderHeader({headerText: i18nString(UIStrings.generating), onClose});
+        header = renderHeader({headerText: i18nString(UIStrings.generating), onClose}, output.headerRef);
         main = renderLoading();
         break;
       case State.INSIGHT:
-        header = renderHeader({headerText: i18nString(UIStrings.insight), onClose, showSpinner: !state.completed});
+        header = renderHeader(
+            {headerText: i18nString(UIStrings.insight), onClose, showSpinner: !state.completed}, output.headerRef);
         main = renderInsight(state, input.renderer, input.disableAnimations, callbacks, output);
         footer = renderInsightFooter(noLogging, input.selectedRating, callbacks);
         break;
       case State.ERROR:
-        header = renderHeader({headerText: i18nString(UIStrings.error), onClose});
+        header = renderHeader({headerText: i18nString(UIStrings.error), onClose}, output.headerRef);
         main = renderError(i18nString(UIStrings.errorBody));
         footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
         break;
       case State.CONSENT_REMINDER:
-        header = renderHeader({headerText: 'Understand console messages with AI', onClose, showIcon: true});
+        header = renderHeader(
+            {headerText: 'Understand console messages with AI', onClose, showIcon: true}, output.headerRef);
         mainClasses['reminder-container'] = true;
         main = renderConsentReminder(noLogging);
         footer = renderConsentReminderFooter(callbacks.onReminderSettingsLink, callbacks.onConsentReminderConfirmed);
@@ -1157,12 +1166,12 @@ export class ConsoleInsight extends HTMLElement {
         break;
       case State.NOT_LOGGED_IN:
       case State.SYNC_IS_PAUSED:
-        header = renderHeader({headerText: i18nString(UIStrings.signInToUse), onClose});
+        header = renderHeader({headerText: i18nString(UIStrings.signInToUse), onClose}, output.headerRef);
         main = renderNotLoggedIn();
         footer = renderSignInFooter(callbacks.onGoToSignIn);
         break;
       case State.OFFLINE:
-        header = renderHeader({headerText: i18nString(UIStrings.offlineHeader), onClose});
+        header = renderHeader({headerText: i18nString(UIStrings.offlineHeader), onClose}, output.headerRef);
         main = renderError(i18nString(UIStrings.offline));
         footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
         break;
@@ -1188,6 +1197,8 @@ export class ConsoleInsight extends HTMLElement {
     });
     // clang-format on
 
+    this.#citationLinks = output.citationLinks;
+
     if (this.#referenceDetailsRef.value) {
       this.#referenceDetailsRef.value.open = this.#areReferenceDetailsOpen;
     }

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -17,6 +17,7 @@ import * as RequestLinkIcon from '../../ui/components/request_link_icon/request_
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import type {IssueView} from './IssueView.js';
 
@@ -230,7 +231,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     }
 
     const deferredDOMNode = new SDK.DOMModel.DeferredDOMNode(target, backendNodeId);
-    const anchorElement = (await Common.Linkifier.Linkifier.linkify(deferredDOMNode)) as HTMLElement;
+    const anchorElement = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(deferredDOMNode) as HTMLElement;
     anchorElement.textContent = nodeName;
     anchorElement.addEventListener('click', () => sendTelemetry());
     anchorElement.addEventListener('keydown', (event: Event) => {

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -275,12 +275,9 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     // Instead, we ignore the ID coming from the worker when sending the command, but
     // patch it back in when sending the response back to the worker.
     void this.connection?.send(method, params, sessionId).then(response => {
-      this.dispatchProtocolMessage({
-        id,
-        sessionId,
-        result: 'result' in response ? response.result : undefined,
-        error: 'error' in response ? response.error : undefined,
-      });
+      const message =
+          'result' in response ? {id, sessionId, result: response.result} : {id, sessionId, error: response.error};
+      this.dispatchProtocolMessage(message);
     });
   }
 

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -13,6 +13,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import type {
   NodeDetailsJSON, ReportJSON, RunnerResultArtifacts, SourceLocationDetailsJSON} from './LighthouseReporterTypes.js';
@@ -148,7 +149,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      const element = await Common.Linkifier.Linkifier.linkify(
+      const element = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(
           node, {tooltip: detailsItem.snippet, preventKeyboardFocus: undefined});
       UI.Tooltip.Tooltip.install(origHTMLElement, '');
 

package/front_end/panels/network/NetworkLogView.ts

@@ -2484,7 +2484,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
               .replace(/"/g, '\\"')
               .replace(/[^a-zA-Z0-9\s_\-:=+~'\/.',?;()*`]/g, '^$&')
               .replace(/%(?=[a-zA-Z0-9_])/g, '%^')
-              .replace(/[^\S \r\n]/g, ' ')
+              .replace(/[^ -~\r\n]/g, ' ')
               .replace(/\r?\n|\r/g, '^\n\n') +
           encapsChars;
     }

package/front_end/panels/recorder/RecorderController.ts

@@ -1179,7 +1179,13 @@ export class RecorderController extends LitElement {
         <div class="empty-state-header">${i18nString(UIStrings.header)}</div>
         <div class="empty-state-description">
           <span>${i18nString(UIStrings.recordingDescription)}</span>
-          ${UI.XLink.XLink.create(RECORDER_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+          <x-link
+            class="x-link devtools-link"
+            href=${RECORDER_EXPLANATION_URL}
+            jslog=${VisualLogging.link()
+                    .track({ click: true, keydown: 'Enter|Space' })
+                    .context('learn-more')}
+          >${i18nString(UIStrings.learnMore)}</x-link>
         </div>
         <devtools-button .variant=${Buttons.Button.Variant.TONAL} jslogContext=${Actions.RecorderActions.CREATE_RECORDING} @click=${this.#onCreateNewRecording}>${i18nString(UIStrings.createRecording)}</devtools-button>
       </div>

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -8,6 +8,7 @@ import '../../ui/components/cards/cards.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -144,7 +145,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     };
     automaticallyIgnoreLinkButton.addEventListener(
         'click',
-        () => UI.UIUtils.openInNewTab(
+        () => UIHelpers.openInNewTab(
             'https://developer.chrome.com/docs/devtools/settings/ignore-list/#skip-third-party'));
     automaticallyIgnoreListContainer.appendChild(automaticallyIgnoreLinkButton);
 

package/front_end/panels/settings/SettingsScreen.ts

@@ -14,6 +14,7 @@ import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as Cards from '../../ui/components/cards/cards.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -497,7 +498,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
         jslogContext: `${experiment.name}-documentation`,
         title: i18nString(UIStrings.learnMore),
       };
-      linkButton.addEventListener('click', () => UI.UIUtils.openInNewTab(experimentLink));
+      linkButton.addEventListener('click', () => UIHelpers.openInNewTab(experimentLink));
       linkButton.classList.add('link-icon');
 
       p.appendChild(linkButton);
@@ -542,7 +543,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
         void SettingsScreen.showSettingsScreen({focusTabHeader: true} as ShowSettingsScreenOptions);
         return true;
       case 'settings.documentation':
-        UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/');
+        UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/');
         return true;
       case 'settings.shortcuts':
         void SettingsScreen.showSettingsScreen({name: 'keybinds', focusTabHeader: true});