Skip to content

Commit ac9aef2

Browse files
wolfibDevtools-frontend LUCI CQ
wolfib
authored and
Devtools-frontend LUCI CQ
committed
Add console insight with references to component server and screenshot
test drive-by: fix margin which jumps on animation Bug: 393061324 Change-Id: I35e0e20134c556cd8e6e7be322aa8acac25f8295 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6291325 Auto-Submit: Wolfgang Beyer <[email protected]> Reviewed-by: Alex Rudenko <[email protected]> Commit-Queue: Wolfgang Beyer <[email protected]>
1 parent 90699c4 commit ac9aef2

File tree

6 files changed

+159
-4
lines changed

6 files changed

+159
-4
lines changed

‎front_end/panels/explain/components/consoleInsight.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -295,12 +295,12 @@ details {
295295
details.references {
296296
/* This transition is only added because there is no `transitionend` event in
297297
JS for the `::details-content` transition. */
298-
transition: margin-top var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized);
298+
transition: margin-bottom var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized);
299299
}
300300

301301
details.references[open] {
302-
/* This transition does not affect the actual UI. */
303-
margin-top: 11px;
302+
/* This transition does not affect the actual UI because of collapsing margins. */
303+
margin-bottom: var(--sys-size-1);
304304
}
305305

306306
h2 {

‎front_end/ui/components/docs/console_insight/BUILD.gn‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ ts_library("ts") {
1212
"error.ts",
1313
"loading.ts",
1414
"optin.ts",
15+
"references.ts",
1516
"reminder.ts",
1617
"static.ts",
1718
]
@@ -32,6 +33,7 @@ copy_to_gen("console_insight") {
3233
"error.html",
3334
"loading.html",
3435
"optin.html",
36+
"references.html",
3537
"reminder.html",
3638
"static.html",
3739
]

‎front_end/ui/components/docs/console_insight/references.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!--
2+
Copyright 2025 The Chromium Authors. All rights reserved.
3+
Use of this source code is governed by a BSD-style license that can be
4+
found in the LICENSE file.
5+
-->
6+
<!DOCTYPE html>
7+
<html>
8+
<head>
9+
<meta charset="UTF-8" />
10+
<meta name="viewport" content="width=device-width" />
11+
<title>Console Insight example with references-section</title>
12+
<style>
13+
#container {
14+
box-sizing: border-box;
15+
border-radius: 5px;
16+
width: 600px;
17+
margin: 1em;
18+
padding: 1em;
19+
background-color: rgb(252 235 235 / 100%);
20+
}
21+
</style>
22+
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
23+
</head>
24+
<body>
25+
<div id="container"></div>
26+
27+
<script type="module" src="./references.js"></script>
28+
</body>
29+
</html>

‎front_end/ui/components/docs/console_insight/references.ts‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
// Copyright 2025 The Chromium Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import * as Host from '../../../../core/host/host.js';
6+
import * as Explain from '../../../../panels/explain/explain.js';
7+
import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
8+
import * as ComponentHelpers from '../../helpers/helpers.js';
9+
10+
await ComponentHelpers.ComponentServerSetup.setup();
11+
await FrontendHelpers.initializeGlobalVars();
12+
13+
const ConsoleInsight = Explain.ConsoleInsight;
14+
15+
const component = new ConsoleInsight(
16+
{
17+
getSearchQuery() {
18+
return '';
19+
},
20+
async buildPrompt() {
21+
return {
22+
prompt: '',
23+
isPageReloadRecommended: false,
24+
sources: [
25+
{
26+
type: Explain.SourceType.MESSAGE,
27+
value: 'Something went wrong\n\nSomething went wrong',
28+
},
29+
{
30+
type: Explain.SourceType.STACKTRACE,
31+
value: 'Stacktrace line1\nStacketrace line2',
32+
},
33+
{
34+
type: Explain.SourceType.RELATED_CODE,
35+
value: 'RelatedCode',
36+
},
37+
{
38+
type: Explain.SourceType.NETWORK_REQUEST,
39+
value: `Request: https://example.com/data.html
40+
41+
Request headers:
42+
:authority: example.com
43+
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
44+
45+
Response headers:
46+
Response status: 404`,
47+
},
48+
],
49+
};
50+
},
51+
},
52+
{
53+
async *
54+
fetch() {
55+
yield {
56+
explanation: `## Result
57+
58+
Here is a text which contains both direct and indirect citations.
59+
60+
An indirect citation is a link to a reference which applies to the whole response.
61+
62+
A direct citation is a link to a reference, but it only applies to a specific part of the response. Direct citations are numbered and are shown as a number within square brackets in the response text.
63+
`,
64+
metadata: {
65+
attributionMetadata: {
66+
attributionAction: Host.AidaClient.RecitationAction.CITE,
67+
citations: [
68+
{
69+
startIndex: 20,
70+
endIndex: 50,
71+
uri: 'https://www.direct-citation.dev',
72+
sourceType: Host.AidaClient.CitationSourceType.WORLD_FACTS,
73+
},
74+
{
75+
startIndex: 170,
76+
endIndex: 176,
77+
uri: 'https://www.another-direct-citation.dev',
78+
sourceType: Host.AidaClient.CitationSourceType.WORLD_FACTS,
79+
},
80+
],
81+
},
82+
factualityMetadata: {
83+
facts: [
84+
{
85+
sourceUri: 'https://www.indirect-citation.dev',
86+
},
87+
{
88+
sourceUri: 'https://www.the-whole-world.dev',
89+
},
90+
{
91+
sourceUri: 'https://www.even-more-content.dev',
92+
},
93+
]
94+
}
95+
},
96+
completed: true,
97+
};
98+
},
99+
registerClientEvent: () => Promise.resolve({}),
100+
},
101+
102+
Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
103+
document.getElementById('container')?.appendChild(component);

‎test/interactions/goldens/linux/explain/console_insight_references.png‎

37.5 KB
Loading

‎test/interactions/panels/explain/explain_test.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
import {waitFor} from '../../../shared/helper.js';
5+
import {getBrowserAndPages, waitFor} from '../../../shared/helper.js';
66
import {assertElementScreenshotUnchanged} from '../../../shared/screenshots.js';
77
import {loadComponentDocExample} from '../../helpers/shared.js';
88

@@ -26,4 +26,25 @@ describe('ConsoleInsight', function() {
2626
await loadComponentDocExample('console_insight/static.html');
2727
await assertElementScreenshotUnchanged(await waitFor('devtools-console-insight'), 'explain/console_insight.png', 3);
2828
});
29+
30+
// eslint-disable-next-line rulesdir/no-screenshot-test-outside-perf-panel
31+
itScreenshot('renders insights with references', async () => {
32+
const {frontend} = getBrowserAndPages();
33+
await loadComponentDocExample('console_insight/references.html');
34+
35+
// Click on summary and Wait for details expansion animation to finish
36+
await frontend.evaluate(() => {
37+
const detailsElement =
38+
document.querySelector('devtools-console-insight')?.shadowRoot?.querySelector('details.references');
39+
detailsElement?.querySelector('summary')?.click();
40+
return new Promise<void>(resolve => {
41+
detailsElement?.addEventListener('transitionend', () => {
42+
resolve();
43+
});
44+
});
45+
});
46+
47+
await assertElementScreenshotUnchanged(
48+
await waitFor('devtools-console-insight'), 'explain/console_insight_references.png', 3);
49+
});
2950
});

0 commit comments

Comments
 (0)