Skip to content

Commit 146f5b5

Browse files
ktrandevtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com
ktran
authored and
devtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com
committed
Add missing ve logging to Ai features
Bug: 498224643 Change-Id: I5b5607eb58f230c1d27ed96b7a094be77384a0b8 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7761328 Reviewed-by: Jack Franklin <jacktfranklin@chromium.org> Commit-Queue: Kim-Anh Tran <kimanh@chromium.org> Auto-Submit: Kim-Anh Tran <kimanh@chromium.org>
1 parent 7cd6f77 commit 146f5b5

File tree

4 files changed

+26
-7
lines changed

4 files changed

+26
-7
lines changed

‎front_end/panels/ai_assistance/components/ChatMessage.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -729,7 +729,7 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
729729
// clang-format off
730730
return html`
731731
<details class=${stepClasses}
732-
jslog=${VisualLogging.section('step')}
732+
jslog=${VisualLogging.expand('step').track({click: true})}
733733
.open=${Boolean(step.requestApproval)}>
734734
<summary>
735735
<div class="summary">
@@ -755,6 +755,7 @@ interface WidgetMakerResponse {
755755
customRevealTitle?: Platform.UIString.LocalizedString;
756756
// Can be null if the widget is only used to add the Reveal CTA.
757757
title: Lit.LitTemplate|Platform.UIString.LocalizedString|null;
758+
jslogContext?: string;
758759
}
759760

760761
const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
@@ -823,6 +824,7 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
823824
</span>
824825
</span>`,
825826
// clang-format on
827+
jslogContext: 'computed-styles',
826828
};
827829
}
828830

@@ -836,6 +838,7 @@ async function makeCoreWebVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<
836838
renderedWidget,
837839
revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey),
838840
title: lockedString(UIStringsNotTranslate.coreVitals),
841+
jslogContext: 'core-web-vitals',
839842
};
840843
}
841844

@@ -872,6 +875,7 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
872875
node: domNodeForId,
873876
})}
874877
></devtools-widget>`,
878+
jslogContext: 'standalone-styles',
875879
};
876880
}
877881

@@ -894,6 +898,7 @@ async function makeLcpBreakdownWidget(widgetData: LcpBreakdownAiWidget): Promise
894898
renderedWidget,
895899
revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
896900
title: lockedString(UIStringsNotTranslate.lcpBreakdown),
901+
jslogContext: 'lcp-breakdown',
897902
};
898903
}
899904

@@ -922,7 +927,8 @@ async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget):
922927
return {
923928
renderedWidget,
924929
revealable: new TimelineUtils.Helpers.RevealableBottomUpProfile(widgetData.data.bounds),
925-
title: lockedString(UIStringsNotTranslate.bottomUpTree)
930+
title: lockedString(UIStringsNotTranslate.bottomUpTree),
931+
jslogContext: 'bottom-up',
926932
};
927933
}
928934

@@ -947,6 +953,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
947953
<devtools-button class="widget-reveal-button"
948954
.variant=${Buttons.Button.Variant.TEXT}
949955
.accessibleLabel=${lockedString(UIStringsNotTranslate.reveal)}
956+
.jslogContext=${'reveal'}
950957
@click=${onReveal}
951958
>
952959
${response.customRevealTitle ?? lockedString(UIStringsNotTranslate.reveal)}
@@ -956,7 +963,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
956963

957964
// clang-format off
958965
return html`
959-
<div class=${classes}>
966+
<div class=${classes} jslog=${ifDefined(response.jslogContext ? VisualLogging.section(response.jslogContext) : undefined)}>
960967
${response.title ? html`
961968
<div class="widget-header">
962969
<h3 class="widget-name">${response.title}</h3>
@@ -986,6 +993,7 @@ async function makePerformanceTraceWidget(widgetData: PerformanceTraceAiWidget):
986993
title: null,
987994
revealable: new Timeline.TimelinePanel.ParsedTraceRevealable(widgetData.data.parsedTrace),
988995
customRevealTitle: lockedString(UIStringsNotTranslate.revealTrace),
996+
jslogContext: 'performance-trace',
989997
};
990998
}
991999

@@ -1045,6 +1053,7 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
10451053
renderedWidget,
10461054
revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
10471055
title: lockedString(UIStringsNotTranslate.lcpElement),
1056+
jslogContext: 'dom-snapshot',
10481057
};
10491058
}
10501059

@@ -1607,5 +1616,6 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
16071616
renderedWidget: template,
16081617
revealable: new TimelineUtils.Helpers.RevealableTimeRange(bounds),
16091618
title: lockedString(UIStringsNotTranslate.performanceSummary),
1619+
jslogContext: 'timeline-range-summary',
16101620
};
16111621
}

‎front_end/panels/ai_assistance/components/ExportForAgentsDialog.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
1010
import * as Snackbars from '../../../ui/components/snackbars/snackbars.js';
1111
import * as UI from '../../../ui/legacy/legacy.js';
1212
import * as Lit from '../../../ui/lit/lit.js';
13+
import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
1314

1415
import styles from './exportForAgentsDialog.css.js';
1516

@@ -85,7 +86,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
8586

8687
render(html`
8788
<style>${styles}</style>
88-
<div class="export-for-agents-dialog">
89+
<div class="export-for-agents-dialog" jslog=${VisualLogging.dialog('ai-export-for-agents')}>
8990
<header>
9091
<h1 id="export-for-agents-dialog-title" tabindex="-1">
9192
${i18nString(UIStrings.exportForAgents)}

‎front_end/panels/ai_assistance/components/WalkthroughView.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import * as Input from '../../../ui/components/input/input.js';
99
import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
1010
import * as UI from '../../../ui/legacy/legacy.js';
1111
import * as Lit from '../../../ui/lit/lit.js';
12+
import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
1213

1314
import chatMessageStyles from './chatMessage.css.js';
1415
import {type ModelChatMessage, renderStep, type Step, titleForStep} from './ChatMessage.js';
@@ -119,14 +120,14 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
119120

120121
// clang-format off
121122
return html`
122-
<div class="inline-wrapper" ?data-open=${input.isExpanded}>
123+
<div class="inline-wrapper" ?data-open=${input.isExpanded} jslog=${VisualLogging.section('walkthrough-container')}>
123124
<span class="inline-icon">
124125
${input.isLoading ?
125126
html`<devtools-spinner aria-label=${lockedString(UIStrings.inProgress)}></devtools-spinner>` :
126127
html`<devtools-icon name=${icon}></devtools-icon>`
127128
}
128129
</span>
129-
<details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
130+
<details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle} jslog=${VisualLogging.expand('walkthrough').track({click: true})}>
130131
<summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
131132
<span class="walkthrough-inline-title">
132133
${input.isExpanded ?
@@ -151,7 +152,7 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
151152

152153
// clang-format off
153154
return html`
154-
<div class="walkthrough-view">
155+
<div class="walkthrough-view" jslog=${VisualLogging.section('walkthrough-container')}>
155156
<div class="walkthrough-header">
156157
<h2 class="walkthrough-title">${i18nString(UIStrings.title)}</h2>
157158
<devtools-button

‎front_end/ui/visual_logging/KnownContextValues.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1050,6 +1050,7 @@ export const knownContextValues = new Set([
10501050
'copy-visible-styled-selection',
10511051
'copy-watch-expression-value',
10521052
'copy-xpath',
1053+
'core-web-vitals',
10531054
'corner-block-end-shape',
10541055
'corner-block-start-shape',
10551056
'corner-bottom-left-shape',
@@ -1363,6 +1364,7 @@ export const knownContextValues = new Set([
13631364
'dom-node-inserted-into-document',
13641365
'dom-node-removed',
13651366
'dom-node-removed-from-document',
1367+
'dom-snapshot',
13661368
'dom-subtree-modified',
13671369
'dom-window.close',
13681370
'dom-word-wrap',
@@ -2248,6 +2250,7 @@ export const knownContextValues = new Set([
22482250
'layout',
22492251
'layout-count',
22502252
'layout-shifts',
2253+
'lcp-breakdown',
22512254
'learn-more',
22522255
'learn-more.ai-annotations',
22532256
'learn-more.ai-assistance',
@@ -2975,6 +2978,7 @@ export const knownContextValues = new Set([
29752978
'performance-full-default',
29762979
'performance-insights',
29772980
'performance-insights-default',
2981+
'performance-trace',
29782982
'performance.history-item',
29792983
'performance.monitor',
29802984
'performance.sidebar-insights-category-select',
@@ -3962,6 +3966,7 @@ export const knownContextValues = new Set([
39623966
'timeline-overview',
39633967
'timeline-persisted-main-flamechart-track-config',
39643968
'timeline-persisted-network-flamechart-track-config',
3969+
'timeline-range-summary',
39653970
'timeline-save-as-gz',
39663971
'timeline-scope',
39673972
'timeline-settings-pane',
@@ -4313,6 +4318,8 @@ export const knownContextValues = new Set([
43134318
'vw',
43144319
'waiting',
43154320
'waiting-entry-inspect',
4321+
'walkthrough',
4322+
'walkthrough-container',
43164323
'warning',
43174324
'wasm',
43184325
'wasm-auto-stepping',

0 commit comments

Comments
 (0)