Skip to content

Commit 0f8508b

Browse files
OrKoNDevtools-frontend LUCI CQ
OrKoN
authored and
Devtools-frontend LUCI CQ
committed
[AI Assistance] Refactor selector rendering
Bug: none Change-Id: I8baa4d42383da893b5816b4d0ff46c00fce91ceb Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5993277 Commit-Queue: Alex Rudenko <[email protected]> Reviewed-by: Nikolay Vitkov <[email protected]>
1 parent 14ceca9 commit 0f8508b

File tree

12 files changed

+179
-204
lines changed

12 files changed

+179
-204
lines changed

‎front_end/panels/freestyler/AiAgent.test.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,12 @@ describeWithEnvironment('AiAgent', () => {
229229
describe('ConversationContext', () => {
230230
function getTestContext(origin: string) {
231231
class TestContext extends ConversationContext<undefined> {
232+
override getIcon(): HTMLElement {
233+
throw new Error('Method not implemented.');
234+
}
235+
override getTitle(): string {
236+
throw new Error('Method not implemented.');
237+
}
232238
override getOrigin(): string {
233239
return origin;
234240
}

‎front_end/panels/freestyler/AiAgent.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// found in the LICENSE file.
44

55
import * as Host from '../../core/host/host.js';
6+
import type * as LitHtml from '../../ui/lit-html/lit-html.js';
67

78
export const enum ResponseType {
89
CONTEXT = 'context',
@@ -130,6 +131,9 @@ const MAX_STEP = 10;
130131
export abstract class ConversationContext<T> {
131132
abstract getOrigin(): string;
132133
abstract getItem(): T;
134+
abstract getIcon(): HTMLElement;
135+
abstract getTitle(): string|ReturnType<typeof LitHtml.Directives.until>;
136+
133137
isOriginAllowed(agentOrigin: string|undefined): boolean {
134138
if (!agentOrigin) {
135139
return true;

‎front_end/panels/freestyler/DrJonesFileAgent.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
77
import * as i18n from '../../core/i18n/i18n.js';
88
import * as Bindings from '../../models/bindings/bindings.js';
99
import type * as Workspace from '../../models/workspace/workspace.js';
10+
import * as PanelUtils from '../utils/utils.js';
1011

1112
import {
1213
AgentType,
@@ -78,13 +79,21 @@ export class FileContext extends ConversationContext<Workspace.UISourceCode.UISo
7879
this.#file = file;
7980
}
8081

81-
getOrigin(): string {
82+
override getOrigin(): string {
8283
return new URL(this.#file.url()).origin;
8384
}
8485

85-
getItem(): Workspace.UISourceCode.UISourceCode {
86+
override getItem(): Workspace.UISourceCode.UISourceCode {
8687
return this.#file;
8788
}
89+
90+
override getIcon(): HTMLElement {
91+
return PanelUtils.PanelUtils.getIconForSourceFile(this.#file);
92+
}
93+
94+
override getTitle(): string {
95+
return this.#file.displayName();
96+
}
8897
}
8998

9099
/**

‎front_end/panels/freestyler/DrJonesNetworkAgent.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
88
import type * as SDK from '../../core/sdk/sdk.js';
99
import * as Logs from '../../models/logs/logs.js';
1010
import * as Network from '../../panels/network/network.js';
11+
import * as PanelUtils from '../utils/utils.js';
1112

1213
import {
1314
AgentType,
@@ -106,13 +107,21 @@ export class RequestContext extends ConversationContext<SDK.NetworkRequest.Netwo
106107
this.#request = request;
107108
}
108109

109-
getOrigin(): string {
110+
override getOrigin(): string {
110111
return new URL(this.#request.url()).origin;
111112
}
112113

113-
getItem(): SDK.NetworkRequest.NetworkRequest {
114+
override getItem(): SDK.NetworkRequest.NetworkRequest {
114115
return this.#request;
115116
}
117+
118+
override getIcon(): HTMLElement {
119+
return PanelUtils.PanelUtils.getIconForNetworkRequest(this.#request);
120+
}
121+
122+
override getTitle(): string {
123+
return this.#request.name();
124+
}
116125
}
117126

118127
/**

‎front_end/panels/freestyler/DrJonesPerformanceAgent.ts‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
import * as Common from '../../core/common/common.js';
66
import * as Host from '../../core/host/host.js';
77
import * as i18n from '../../core/i18n/i18n.js';
8-
import type * as TimelineUtils from '../../panels/timeline/utils/utils.js';
8+
import * as TimelineUtils from '../../panels/timeline/utils/utils.js';
9+
import * as PanelUtils from '../utils/utils.js';
910

1011
import {
1112
AgentType,
@@ -129,14 +130,33 @@ export class CallTreeContext extends ConversationContext<TimelineUtils.AICallTre
129130
this.#callTree = callTree;
130131
}
131132

132-
getOrigin(): string {
133+
override getOrigin(): string {
133134
// TODO: implement cross-origin checks for the PerformanceAgent.
134135
return '';
135136
}
136137

137-
getItem(): TimelineUtils.AICallTree.AICallTree {
138+
override getItem(): TimelineUtils.AICallTree.AICallTree {
138139
return this.#callTree;
139140
}
141+
142+
override getIcon(): HTMLElement {
143+
const iconData = {
144+
iconName: 'performance',
145+
color: 'var(--sys-color-on-surface-subtle)',
146+
};
147+
const icon = PanelUtils.PanelUtils.createIconElement(iconData, 'Performance');
148+
icon.classList.add('icon');
149+
return icon;
150+
}
151+
152+
override getTitle(): string {
153+
const {event} = this.#callTree.selectedNode;
154+
if (!event) {
155+
return 'unknown';
156+
}
157+
158+
return TimelineUtils.EntryName.nameForEntry(event);
159+
}
140160
}
141161

142162
/**

‎front_end/panels/freestyler/FreestylerAgent.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import * as Platform from '../../core/platform/platform.js';
99
import * as Root from '../../core/root/root.js';
1010
import * as SDK from '../../core/sdk/sdk.js';
1111
import * as UI from '../../ui/legacy/legacy.js';
12+
import * as LitHtml from '../../ui/lit-html/lit-html.js';
1213

1314
import {
1415
type ActionResponse,
@@ -229,6 +230,16 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
229230
getItem(): SDK.DOMModel.DOMNode {
230231
return this.#node;
231232
}
233+
234+
override getIcon(): HTMLElement {
235+
return document.createElement('span');
236+
}
237+
238+
override getTitle(): string|ReturnType<typeof LitHtml.Directives.until> {
239+
return LitHtml.Directives.until(
240+
Common.Linkifier.Linkifier.linkify(this.#node),
241+
);
242+
}
232243
}
233244

234245
/**

‎front_end/panels/freestyler/FreestylerPanel.test.ts‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -310,9 +310,10 @@ describeWithEnvironment('FreestylerPanel', () => {
310310
UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
311311
panel.markAsRoot();
312312
panel.show(document.body);
313+
panel.handleAction('freestyler.elements-floating-button');
313314

314315
sinon.assert.calledWith(mockView, sinon.match({
315-
selectedElement: new Freestyler.NodeContext(node),
316+
selectedContext: new Freestyler.NodeContext(node),
316317
}));
317318
});
318319

@@ -325,8 +326,9 @@ describeWithEnvironment('FreestylerPanel', () => {
325326
});
326327
panel.markAsRoot();
327328
panel.show(document.body);
329+
panel.handleAction('freestyler.elements-floating-button');
328330
sinon.assert.calledWith(mockView, sinon.match({
329-
selectedElement: null,
331+
selectedContext: null,
330332
}));
331333

332334
const node = sinon.createStubInstance(SDK.DOMModel.DOMNode, {
@@ -335,7 +337,7 @@ describeWithEnvironment('FreestylerPanel', () => {
335337
UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
336338

337339
sinon.assert.calledWith(mockView, sinon.match({
338-
selectedElement: new Freestyler.NodeContext(node),
340+
selectedContext: new Freestyler.NodeContext(node),
339341
}));
340342
});
341343

@@ -348,8 +350,9 @@ describeWithEnvironment('FreestylerPanel', () => {
348350
});
349351
panel.markAsRoot();
350352
panel.show(document.body);
353+
panel.handleAction('freestyler.elements-floating-button');
351354
sinon.assert.calledWith(mockView, sinon.match({
352-
selectedElement: null,
355+
selectedContext: null,
353356
}));
354357

355358
const node = sinon.createStubInstance(SDK.DOMModel.DOMNode, {
@@ -358,7 +361,7 @@ describeWithEnvironment('FreestylerPanel', () => {
358361
UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
359362

360363
sinon.assert.calledWith(mockView, sinon.match({
361-
selectedElement: null,
364+
selectedContext: null,
362365
}));
363366
});
364367

@@ -392,9 +395,10 @@ describeWithEnvironment('FreestylerPanel', () => {
392395
UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
393396
panel.markAsRoot();
394397
panel.show(document.body);
398+
panel.handleAction('drjones.network-floating-button');
395399

396400
sinon.assert.calledWith(mockView, sinon.match({
397-
selectedNetworkRequest: new Freestyler.RequestContext(networkRequest),
401+
selectedContext: new Freestyler.RequestContext(networkRequest),
398402
}));
399403
});
400404

@@ -407,15 +411,16 @@ describeWithEnvironment('FreestylerPanel', () => {
407411
});
408412
panel.markAsRoot();
409413
panel.show(document.body);
414+
panel.handleAction('drjones.network-floating-button');
410415
sinon.assert.calledWith(mockView, sinon.match({
411-
selectedNetworkRequest: null,
416+
selectedContext: null,
412417
}));
413418

414419
const networkRequest = sinon.createStubInstance(SDK.NetworkRequest.NetworkRequest);
415420
UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
416421

417422
sinon.assert.calledWith(mockView, sinon.match({
418-
selectedNetworkRequest: new Freestyler.RequestContext(networkRequest),
423+
selectedContext: new Freestyler.RequestContext(networkRequest),
419424
}));
420425
});
421426

@@ -447,9 +452,10 @@ describeWithEnvironment('FreestylerPanel', () => {
447452
UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, selectedAiCallTree);
448453
panel.markAsRoot();
449454
panel.show(document.body);
455+
panel.handleAction('drjones.performance-panel-context');
450456

451457
sinon.assert.calledWith(mockView, sinon.match({
452-
selectedAiCallTree: new Freestyler.CallTreeContext(selectedAiCallTree as TimelineUtils.AICallTree.AICallTree),
458+
selectedContext: new Freestyler.CallTreeContext(selectedAiCallTree as TimelineUtils.AICallTree.AICallTree),
453459
}));
454460
});
455461

@@ -462,15 +468,16 @@ describeWithEnvironment('FreestylerPanel', () => {
462468
});
463469
panel.markAsRoot();
464470
panel.show(document.body);
471+
panel.handleAction('drjones.performance-panel-context');
465472
sinon.assert.calledWith(mockView, sinon.match({
466-
selectedAiCallTree: null,
473+
selectedContext: null,
467474
}));
468475

469476
const selectedAiCallTree = {};
470477
UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, selectedAiCallTree);
471478

472479
sinon.assert.calledWith(mockView, sinon.match({
473-
selectedAiCallTree: new Freestyler.CallTreeContext(selectedAiCallTree as TimelineUtils.AICallTree.AICallTree),
480+
selectedContext: new Freestyler.CallTreeContext(selectedAiCallTree as TimelineUtils.AICallTree.AICallTree),
474481
}));
475482
});
476483

@@ -502,9 +509,10 @@ describeWithEnvironment('FreestylerPanel', () => {
502509
UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
503510
panel.markAsRoot();
504511
panel.show(document.body);
512+
panel.handleAction('drjones.sources-panel-context');
505513

506514
sinon.assert.calledWith(mockView, sinon.match({
507-
selectedFile: new Freestyler.FileContext(uiSourceCode),
515+
selectedContext: new Freestyler.FileContext(uiSourceCode),
508516
}));
509517
});
510518

@@ -517,15 +525,16 @@ describeWithEnvironment('FreestylerPanel', () => {
517525
});
518526
panel.markAsRoot();
519527
panel.show(document.body);
528+
panel.handleAction('drjones.sources-panel-context');
520529
sinon.assert.calledWith(mockView, sinon.match({
521-
selectedFile: null,
530+
selectedContext: null,
522531
}));
523532

524533
const uiSourceCode = sinon.createStubInstance(Workspace.UISourceCode.UISourceCode);
525534
UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
526535

527536
sinon.assert.calledWith(mockView, sinon.match({
528-
selectedFile: new Freestyler.FileContext(uiSourceCode),
537+
selectedContext: new Freestyler.FileContext(uiSourceCode),
529538
}));
530539
});
531540

@@ -813,9 +822,10 @@ describeWithEnvironment('FreestylerPanel', () => {
813822
});
814823
panel.markAsRoot();
815824
panel.show(document.body);
825+
panel.handleAction('drjones.network-floating-button');
816826

817827
sinon.assert.calledWith(mockView, sinon.match({
818-
selectedNetworkRequest: new Freestyler.RequestContext(networkRequest),
828+
selectedContext: new Freestyler.RequestContext(networkRequest),
819829
blockedByCrossOrigin: false,
820830
}));
821831

@@ -833,7 +843,7 @@ describeWithEnvironment('FreestylerPanel', () => {
833843
await drainMicroTasks();
834844

835845
sinon.assert.calledWith(mockView, sinon.match({
836-
selectedNetworkRequest: new Freestyler.RequestContext(networkRequest2),
846+
selectedContext: new Freestyler.RequestContext(networkRequest2),
837847
blockedByCrossOrigin: true,
838848
}));
839849
});

0 commit comments

Comments
 (0)