Skip to content

Commit f926b41

Browse files
danilsomsikovDevtools-frontend LUCI CQ
danilsomsikov
authored and
Devtools-frontend LUCI CQ
committed
Migrate PanelUtils.createIconElement to use IconButton.Icon.create
Removes a redundant function in PanelUtils and migrate all usages to the shared IconButton component instead. Bug: 407751425 Change-Id: I3c864dcac83c9eae511403fc2ba7b103a8c586fb Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6520598 Auto-Submit: Danil Somsikov <dsv@chromium.org> Reviewed-by: Kateryna Prokopenko <kprokopenko@chromium.org> Commit-Queue: Danil Somsikov <dsv@chromium.org>
1 parent e5e1d2e commit f926b41

File tree

6 files changed

+82
-202
lines changed

6 files changed

+82
-202
lines changed

‎front_end/models/ai_assistance/agents/PerformanceAgent.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import * as Host from '../../../core/host/host.js';
77
import * as i18n from '../../../core/i18n/i18n.js';
88
import * as Root from '../../../core/root/root.js';
99
import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
10-
import * as PanelUtils from '../../../panels/utils/utils.js';
10+
import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
1111
import * as Trace from '../../trace/trace.js';
1212

1313
import {
@@ -174,12 +174,9 @@ export class CallTreeContext extends ConversationContext<TimelineUtils.AICallTre
174174
}
175175

176176
override getIcon(): HTMLElement {
177-
const iconData = {
178-
iconName: 'performance',
179-
color: 'var(--sys-color-on-surface-subtle)',
180-
};
181-
const icon = PanelUtils.PanelUtils.createIconElement(iconData, 'Performance');
182-
icon.classList.add('icon');
177+
const icon = IconButton.Icon.create('performance', 'icon');
178+
icon.style.color = 'var(--sys-color-on-surface-subtle)';
179+
icon.title = 'Performance';
183180
return icon;
184181
}
185182

‎front_end/models/ai_assistance/agents/PerformanceInsightsAgent.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
77
import * as Platform from '../../../core/platform/platform.js';
88
import * as Root from '../../../core/root/root.js';
99
import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
10-
import * as PanelUtils from '../../../panels/utils/utils.js';
10+
import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
1111
import {PerformanceInsightFormatter, TraceEventFormatter} from '../data_formatters/PerformanceInsightFormatter.js';
1212
import {debugLog} from '../debug.js';
1313

@@ -122,12 +122,9 @@ export class InsightContext extends ConversationContext<TimelineUtils.InsightAIC
122122
}
123123

124124
override getIcon(): HTMLElement {
125-
const iconData = {
126-
iconName: 'performance',
127-
color: 'var(--sys-color-on-surface-subtle)',
128-
};
129-
const icon = PanelUtils.PanelUtils.createIconElement(iconData, 'Performance');
130-
icon.classList.add('icon');
125+
const icon = IconButton.Icon.create('performance', 'icon');
126+
icon.style.color = 'var(--sys-color-on-surface-subtle)';
127+
icon.title = 'Performance';
131128
return icon;
132129
}
133130

‎front_end/panels/network/NetworkDataGridNode.test.ts‎

Lines changed: 27 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -109,14 +109,10 @@ describeWithEnvironment('NetworkLogView', () => {
109109

110110
networkRequestNode.renderCell(el, 'name');
111111
const iconElement = el.querySelector('.icon') as HTMLElement;
112+
const iconImage = iconElement.getAttribute('name');
113+
assert.strictEqual('cross-circle-filled', iconImage);
112114

113-
const iconStyle = iconElement.style;
114-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
115-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
116-
117-
assert.strictEqual('cross-circle-filled.svg")', iconImage);
118-
119-
const backgroundColorOfIcon = iconStyle.backgroundColor.toString();
115+
const backgroundColorOfIcon = iconElement.style.color.toString();
120116
assert.strictEqual(backgroundColorOfIcon, 'var(--icon-error)');
121117
});
122118

@@ -132,14 +128,10 @@ describeWithEnvironment('NetworkLogView', () => {
132128

133129
networkRequestNode.renderCell(el, 'name');
134130
const iconElement = el.querySelector('.icon') as HTMLElement;
131+
const iconImage = iconElement.getAttribute('name');
132+
assert.strictEqual('file-document', iconImage);
135133

136-
const iconStyle = iconElement.style;
137-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
138-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
139-
140-
assert.strictEqual('file-document.svg")', iconImage);
141-
142-
const backgroundColorOfIcon = iconStyle.backgroundColor.toString();
134+
const backgroundColorOfIcon = iconElement.style.color.toString();
143135
assert.strictEqual(backgroundColorOfIcon, 'var(--icon-file-document)');
144136
// TODO(barrypollard): Would be good to test the value of --icon-file-document
145137
// is correctly set to --sys-color-blue-bright. See https://crbug.com/346714111
@@ -158,12 +150,8 @@ describeWithEnvironment('NetworkLogView', () => {
158150

159151
networkRequestNode.renderCell(el, 'name');
160152
const iconElement = el.querySelector('.icon') as HTMLElement;
161-
162-
const iconStyle = iconElement.style;
163-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
164-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
165-
166-
assert.strictEqual('file-media.svg")', iconImage);
153+
const iconImage = iconElement.getAttribute('name');
154+
assert.strictEqual('file-media', iconImage);
167155
});
168156

169157
it('show wasm icon', async () => {
@@ -179,12 +167,8 @@ describeWithEnvironment('NetworkLogView', () => {
179167

180168
networkRequestNode.renderCell(el, 'name');
181169
const iconElement = el.querySelector('.icon') as HTMLElement;
182-
183-
const iconStyle = iconElement.style;
184-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
185-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
186-
187-
assert.strictEqual('file-wasm.svg")', iconImage);
170+
const iconImage = iconElement.getAttribute('name');
171+
assert.strictEqual('file-wasm', iconImage);
188172
});
189173

190174
it('show websocket icon', async () => {
@@ -200,12 +184,8 @@ describeWithEnvironment('NetworkLogView', () => {
200184

201185
networkRequestNode.renderCell(el, 'name');
202186
const iconElement = el.querySelector('.icon') as HTMLElement;
203-
204-
const iconStyle = iconElement.style;
205-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
206-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
207-
208-
assert.strictEqual('file-websocket.svg")', iconImage);
187+
const iconImage = iconElement.getAttribute('name');
188+
assert.strictEqual('file-websocket', iconImage);
209189
});
210190

211191
it('shows fetch icon', async () => {
@@ -221,12 +201,8 @@ describeWithEnvironment('NetworkLogView', () => {
221201

222202
networkRequestNode.renderCell(el, 'name');
223203
const iconElement = el.querySelector('.icon') as HTMLElement;
224-
225-
const iconStyle = iconElement.style;
226-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
227-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
228-
229-
assert.strictEqual('file-fetch-xhr.svg")', iconImage);
204+
const iconImage = iconElement.getAttribute('name');
205+
assert.strictEqual('file-fetch-xhr', iconImage);
230206
});
231207

232208
it('shows xhr icon', async () => {
@@ -242,12 +218,8 @@ describeWithEnvironment('NetworkLogView', () => {
242218

243219
networkRequestNode.renderCell(el, 'name');
244220
const iconElement = el.querySelector('.icon') as HTMLElement;
245-
246-
const iconStyle = iconElement.style;
247-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
248-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
249-
250-
assert.strictEqual('file-fetch-xhr.svg")', iconImage);
221+
const iconImage = iconElement.getAttribute('name');
222+
assert.strictEqual('file-fetch-xhr', iconImage);
251223
});
252224

253225
it('mime win: show image preview icon for xhr-image', async () => {
@@ -282,12 +254,8 @@ describeWithEnvironment('NetworkLogView', () => {
282254

283255
networkRequestNode.renderCell(el, 'name');
284256
const iconElement = el.querySelector('.icon') as HTMLElement;
285-
286-
const iconStyle = iconElement.style;
287-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
288-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
289-
290-
assert.strictEqual('file-document.svg")', iconImage);
257+
const iconImage = iconElement.getAttribute('name');
258+
assert.strictEqual('file-document', iconImage);
291259
});
292260

293261
it('mime win: show generic icon for preflight-text', async () => {
@@ -303,12 +271,8 @@ describeWithEnvironment('NetworkLogView', () => {
303271

304272
networkRequestNode.renderCell(el, 'name');
305273
const iconElement = el.querySelector('.icon') as HTMLElement;
306-
307-
const iconStyle = iconElement.style;
308-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
309-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
310-
311-
assert.strictEqual('file-generic.svg")', iconImage);
274+
const iconImage = iconElement.getAttribute('name');
275+
assert.strictEqual('file-generic', iconImage);
312276
});
313277

314278
it('mime win: show script icon for other-javascript)', async () => {
@@ -324,12 +288,8 @@ describeWithEnvironment('NetworkLogView', () => {
324288

325289
networkRequestNode.renderCell(el, 'name');
326290
const iconElement = el.querySelector('.icon') as HTMLElement;
327-
328-
const iconStyle = iconElement.style;
329-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
330-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
331-
332-
assert.strictEqual('file-script.svg")', iconImage);
291+
const iconImage = iconElement.getAttribute('name');
292+
assert.strictEqual('file-script', iconImage);
333293
});
334294

335295
it('mime win: shows json icon for fetch-json', async () => {
@@ -345,12 +305,8 @@ describeWithEnvironment('NetworkLogView', () => {
345305

346306
networkRequestNode.renderCell(el, 'name');
347307
const iconElement = el.querySelector('.icon') as HTMLElement;
348-
349-
const iconStyle = iconElement.style;
350-
const indexOfIconImage = iconStyle.webkitMaskImage.indexOf('Images/') + 7;
351-
const iconImage = iconStyle.webkitMaskImage.substring(indexOfIconImage);
352-
353-
assert.strictEqual('file-json.svg")', iconImage);
308+
const iconImage = iconElement.getAttribute('name');
309+
assert.strictEqual('file-json', iconImage);
354310
});
355311

356312
it('shows the corresponding status text of a status code', async () => {
@@ -499,11 +455,9 @@ describeWithEnvironment('NetworkLogView', () => {
499455

500456
// The icon should be the warning icon.
501457
const iconElement = el.querySelector('.icon') as HTMLElement;
502-
const iconStyle = iconElement.style;
503-
const indexOfIconImage = iconStyle.maskImage.indexOf('Images/') + 7;
504-
const iconImage = iconStyle.maskImage.substring(indexOfIconImage);
505-
assert.strictEqual('warning-filled.svg")', iconImage);
506-
const backgroundColorOfIcon = iconStyle.backgroundColor.toString();
458+
const iconImage = iconElement.getAttribute('name');
459+
assert.strictEqual('warning-filled', iconImage);
460+
const backgroundColorOfIcon = iconElement.style.color.toString();
507461
assert.strictEqual(backgroundColorOfIcon, 'var(--icon-warning)');
508462
});
509463
});

‎front_end/panels/network/NetworkDataGridNode.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1119,12 +1119,9 @@ export class NetworkRequestNode extends NetworkNode {
11191119
if (columnId === 'name') {
11201120
const webBundleInnerRequestInfo = this.requestInternal.webBundleInnerRequestInfo();
11211121
if (webBundleInnerRequestInfo) {
1122-
const iconData = {
1123-
iconName: 'bundle',
1124-
color: 'var(--icon-info)',
1125-
};
1126-
const secondIconElement = PanelUtils.createIconElement(iconData, i18nString(UIStrings.webBundleInnerRequest));
1127-
secondIconElement.classList.add('icon');
1122+
const secondIconElement = IconButton.Icon.create('bundle', 'icon');
1123+
secondIconElement.style.color = 'var(--icon-info)';
1124+
secondIconElement.title = i18nString(UIStrings.webBundleInnerRequest);
11281125

11291126
const networkManager = SDK.NetworkManager.NetworkManager.forRequest(this.requestInternal);
11301127
if (webBundleInnerRequestInfo.bundleRequestId && networkManager) {

0 commit comments

Comments
 (0)