Skip to content

Commit 77e1250

Browse files
hannuhsuDevtools-frontend LUCI CQ
hannuhsu
authored and
Devtools-frontend LUCI CQ
committed
Create initial table to contain proxied requests in devtools
Uses hard coded data, real data to be added in next CL. Bug: 429154532 Change-Id: Ia3423d09e3f54428a2a36672d88038b6a3c2c10a Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6767834 Reviewed-by: Danil Somsikov <dsv@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org> Commit-Queue: Hannah Su <hannahsu@google.com>
1 parent cb74830 commit 77e1250

2 files changed

Lines changed: 104 additions & 36 deletions

File tree

‎front_end/panels/security/IPProtectionView.ts‎

Lines changed: 99 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55

66
import '../../ui/components/switch/switch.js';
77
import '../../ui/components/cards/cards.js';
8+
import '../../ui/legacy/components/data_grid/data_grid.js';
9+
import '../../ui/components/buttons/buttons.js';
810

911
import * as i18n from '../../core/i18n/i18n.js';
1012
import type * as Platform from '../../core/platform/platform.js';
@@ -42,74 +44,135 @@ const UIStrings = {
4244
* @description Description in the widget instructing users to open site in incognito
4345
*/
4446
openIncognito: 'IP proxy is only available within incognito mode. Open site in incognito.',
47+
/**
48+
* @description Column header for the ID of a proxy request in the Proxy Request View panel.
49+
*/
50+
idColumn: 'ID',
51+
/**
52+
* @description Column header for the URL of a proxy request in the Proxy Request View panel.
53+
*/
54+
urlColumn: 'URL',
55+
/**
56+
* @description Column header for the HTTP method of a proxy request in the Proxy Request View panel.
57+
*/
58+
methodColumn: 'Method',
59+
/**
60+
* @description Column header for the status code of a proxy request in the Proxy Request View panel.
61+
*/
62+
statusColumn: 'Status',
63+
/**
64+
* @description Title for the grid of proxy requests.
65+
*/
66+
proxyRequests: 'Proxy Requests',
4567
} as const;
4668

4769
const str_ = i18n.i18n.registerUIStrings('panels/security/IPProtectionView.ts', UIStrings);
4870
export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
49-
export const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
5071

5172
const INCOGNITO_EXPLANATION_URL = 'https://support.google.com/chrome/answer/95464?hl=en&co=GENIE.Platform%3DDesktop' as
5273
Platform.DevToolsPath.UrlString;
5374

54-
export type View = (input: object, output: object, target: HTMLElement) => void;
75+
// A simplified representation of a network request for mock data.
76+
interface MockNetworkRequest {
77+
requestId: string;
78+
url: string;
79+
requestMethod: string;
80+
statusCode: number;
81+
}
82+
83+
export type View = (input: IPProtectionView, output: IPProtectionView, target: HTMLElement) => void;
5584

5685
export const DEFAULT_VIEW: View = (input, _, target) => {
5786
// clang-format off
5887
render(html`
5988
<style>
6089
${ipProtectionViewStyles}
6190
</style>
62-
${Root.Runtime.hostConfig.isOffTheRecord ? html`
63-
<div class="overflow-auto">
64-
<div class="ip-protection">
65-
<div class="header">
66-
<h1>${i18nString(UIStrings.viewTitle)}</h1>
67-
<div class="body">${i18nString(UIStrings.viewExplanation)}</div>
68-
</div>
69-
<devtools-card class="card-container">
70-
<div class="card">
71-
<div class="card-header">
72-
<div class="lhs">
73-
<div class="text">
74-
<h2 class="main-text">${i18nString(UIStrings.cardTitle)}</h2>
75-
<div class="body-subtext">
76-
${i18nString(UIStrings.cardDescription)}
77-
</div>
78-
</div>
79-
<div>
80-
<devtools-switch></devtools-switch>
91+
<div class="ip-protection">
92+
<div class="header">
93+
<h1>${i18nString(UIStrings.viewTitle)}</h1>
94+
<div class="body">${i18nString(UIStrings.viewExplanation)}</div>
95+
</div>
96+
${Root.Runtime.hostConfig.isOffTheRecord ? html`
97+
<devtools-card class="card-container">
98+
<div class="card">
99+
<div class="card-header">
100+
<div class="lhs">
101+
<div class="text">
102+
<h2 class="main-text">${i18nString(UIStrings.cardTitle)}</h2>
103+
<div class="body-subtext">
104+
${i18nString(UIStrings.cardDescription)}
81105
</div>
82106
</div>
107+
<div>
108+
<devtools-switch></devtools-switch>
109+
</div>
83110
</div>
84111
</div>
85-
</devtools-card>
112+
</div>
113+
</devtools-card>
114+
<devtools-data-grid striped name=${i18nString(UIStrings.proxyRequests)}>
115+
<table>
116+
<thead>
117+
<tr>
118+
<th id="id" sortable>${i18nString(UIStrings.idColumn)}</th>
119+
<th id="url" sortable>${i18nString(UIStrings.urlColumn)}</th>
120+
<th id="method" sortable>${i18nString(UIStrings.methodColumn)}</th>
121+
<th id="status" sortable>${i18nString(UIStrings.statusColumn)}</th>
122+
</tr>
123+
</thead>
124+
<tbody id="proxy-requests-body">
125+
${input.proxyRequests.map((request, index) => html`
126+
<tr data-request-id=${request.requestId}>
127+
<td>${index + 1}</td>
128+
<td>${request.url}</td>
129+
<td>${request.requestMethod}</td>
130+
<td>${String(request.statusCode)}</td>
131+
</tr>
132+
`)}
133+
</tbody>
134+
</table>
135+
</devtools-data-grid>
136+
` : html`
137+
<div class="empty-report">
138+
<devtools-widget
139+
class="learn-more"
140+
.widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
141+
header: i18nString(UIStrings.notInIncognito),
142+
text: i18nString(UIStrings.openIncognito),
143+
link: INCOGNITO_EXPLANATION_URL,
144+
})}>
145+
</devtools-widget>
86146
</div>
87-
</div>
88-
` : html`
89-
<div class="empty-report">
90-
<devtools-widget
91-
class="learn-more"
92-
.widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
93-
header: i18nString(UIStrings.notInIncognito),
94-
text: i18nString(UIStrings.openIncognito),
95-
link: INCOGNITO_EXPLANATION_URL,
96-
})}>
97-
</devtools-widget>
98-
</div>
99-
`}
100-
`, target);
147+
`}
148+
</div>
149+
`, target, {host: input});
101150
// clang-format on
102151
};
103152

104153
export class IPProtectionView extends UI.Widget.VBox {
105154
#view: View;
155+
#proxyRequests: MockNetworkRequest[] = [];
106156

107157
constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
108158
super(element, {useShadowDom: true});
109159
this.#view = view;
160+
this.registerRequiredCSS(ipProtectionViewStyles);
161+
162+
// TODO(crbug.com/429153435): Replace with real data.
163+
this.#proxyRequests = [
164+
{requestId: '1', url: 'https://example.com/api/data', requestMethod: 'GET', statusCode: 200},
165+
{requestId: '2', url: 'https://example.com/api/submit', requestMethod: 'POST', statusCode: 404},
166+
{requestId: '3', url: 'https://example.com/assets/style.css', requestMethod: 'GET', statusCode: 200},
167+
];
168+
110169
this.requestUpdate();
111170
}
112171

172+
get proxyRequests(): readonly MockNetworkRequest[] {
173+
return this.#proxyRequests;
174+
}
175+
113176
override performUpdate(): void {
114177
this.#view(this, this, this.contentElement);
115178
}

‎front_end/panels/security/ipProtectionView.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
padding: var(--sys-size-5) var(--sys-size-3) var(--sys-size-5) var(--sys-size-5);
2121
min-width: fit-content;
2222
min-height: fit-content;
23+
height: 100%;
2324
}
2425

2526
.header {
@@ -101,4 +102,8 @@
101102
min-height: fit-content;
102103
min-width: fit-content;
103104
}
105+
106+
devtools-data-grid {
107+
flex: auto;
108+
}
104109
}

0 commit comments

Comments
 (0)