Skip to content

Commit 91cef26

Browse files
lutienlutien
authored
Fix Chrome support and add the field to send BiDi commands (#32)
* Fix Chrome support * Format * Add key to the network requests. * Add a field to send the command. * Address review feedback
1 parent ae2514a commit 91cef26

File tree

5 files changed

+148
-70
lines changed

5 files changed

+148
-70
lines changed

‎src/components/App.js

+54-35
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ class App extends React.Component {
7474
browserName: null,
7575
browserVersion: null,
7676
browsingContexts: [],
77+
bidiCommand: "",
7778
bidiLog: [],
7879
consoleInput: "",
7980
consoleOutput: [],
@@ -189,8 +190,7 @@ class App extends React.Component {
189190
...state.networkEntries,
190191
{
191192
contextId: data.params.context,
192-
id:
193-
data.params.request.request + data.params.redirectCount,
193+
id: data.params.request.request + data.params.redirectCount,
194194
url: data.params.request.url,
195195
redirectCount: data.params.redirectCount,
196196
request: data.params.request,
@@ -227,9 +227,13 @@ class App extends React.Component {
227227
{}
228228
);
229229

230-
// If we connected to an existing session, status `ready` will be false.
230+
// For Firefox if we connected to an existing session, status `ready` will be false.
231231
// Only attempt to create a new session if `ready` is true.
232-
const canCreateNewSession = sessionStatusResponse.result.ready;
232+
// For Chrome we can not send "session.status" command before starting the session,
233+
// so the `result` property is going to be `undefined`.
234+
const canCreateNewSession = sessionStatusResponse.result
235+
? sessionStatusResponse.result.ready
236+
: true;
233237
// const { isConnectingToExistingSession } = this.state;
234238
// if (!canCreateNewSession && !isConnectingToExistingSession) {
235239
// console.log(
@@ -241,12 +245,9 @@ class App extends React.Component {
241245

242246
if (canCreateNewSession) {
243247
console.log("Creating a new session");
244-
const sessionNewResponse = await this.#client.sendCommand(
245-
"session.new",
246-
{
247-
capabilities: {},
248-
}
249-
);
248+
const sessionNewResponse = await this.#client.sendCommand("session.new", {
249+
capabilities: {},
250+
});
250251

251252
// Store the session id
252253
const { capabilities, sessionId } = sessionNewResponse.result;
@@ -270,14 +271,14 @@ class App extends React.Component {
270271
});
271272
// Chrome doesn't support network events yet, that's why previous subscribe
272273
// will fail, and, in this case, we will subscribe again excluding network events.
273-
if (response.error === 'invalid argument') {
274+
if (response.error === "invalid argument") {
274275
this.#networkEventsSupported = false;
275276
this.#client.sendCommand("session.subscribe", {
276277
events: [
277278
"browsingContext.contextCreated",
278279
"browsingContext.domContentLoaded",
279280
"browsingContext.load",
280-
"log.entryAdded"
281+
"log.entryAdded",
281282
],
282283
});
283284
}
@@ -366,6 +367,16 @@ class App extends React.Component {
366367
});
367368
};
368369

370+
sendCommand = (e) => {
371+
e.preventDefault();
372+
try {
373+
const commandObject = JSON.parse(this.state.bidiCommand);
374+
this.#client.sendCommand(commandObject.method, commandObject.params);
375+
} catch (error) {
376+
console.error({ error });
377+
}
378+
};
379+
369380
setActiveTab = (tab) => {
370381
this.setState({
371382
activeTab: tab,
@@ -449,6 +460,7 @@ class App extends React.Component {
449460
render() {
450461
const {
451462
activeTab,
463+
bidiCommand,
452464
bidiLog,
453465
browserName,
454466
browserVersion,
@@ -465,29 +477,29 @@ class App extends React.Component {
465477
pageTimings,
466478
} = this.state;
467479

468-
const tabs = [{
469-
id: "console",
470-
icon: consoleIcon,
471-
title: "Console",
472-
content: (
473-
<Console
474-
consoleOutput={consoleOutput}
475-
consoleInput={consoleInput}
476-
isClientReady={isClientReady}
477-
onSubmit={this.onConsoleSubmit}
478-
onChange={this.onInputChange}
479-
evaluationBrowsingContextId={evaluationBrowsingContextId}
480-
filteringBrowsingContextId={filteringBrowsingContextId}
481-
browsingContexts={browsingContexts}
482-
setEvaluationBrowsingContext={
483-
this.setEvaluationBrowsingContext
484-
}
485-
/>
486-
),
487-
}];
480+
const tabs = [
481+
{
482+
id: "console",
483+
icon: consoleIcon,
484+
title: "Console",
485+
content: (
486+
<Console
487+
consoleOutput={consoleOutput}
488+
consoleInput={consoleInput}
489+
isClientReady={isClientReady}
490+
onSubmit={this.onConsoleSubmit}
491+
onChange={this.onInputChange}
492+
evaluationBrowsingContextId={evaluationBrowsingContextId}
493+
filteringBrowsingContextId={filteringBrowsingContextId}
494+
browsingContexts={browsingContexts}
495+
setEvaluationBrowsingContext={this.setEvaluationBrowsingContext}
496+
/>
497+
),
498+
},
499+
];
488500

489501
// Add network tab only if network events are supported.
490-
if(this.#networkEventsSupported) {
502+
if (this.#networkEventsSupported) {
491503
tabs.push({
492504
id: "network",
493505
icon: networkIcon,
@@ -509,8 +521,15 @@ class App extends React.Component {
509521
tabs.push({
510522
id: "bidi-log",
511523
icon: bidiLogIcon,
512-
title: "BiDi log",
513-
content: <BiDiLog log={bidiLog} />,
524+
title: "BiDi interface",
525+
content: (
526+
<BiDiLog
527+
log={bidiLog}
528+
bidiCommand={bidiCommand}
529+
onBidiCommandChange={this.onInputChange}
530+
sendCommand={this.sendCommand}
531+
/>
532+
),
514533
});
515534

516535
return (

‎src/components/BiDiCommandInput.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.BiDiCommandInput {
2+
display: grid;
3+
height: 45px;
4+
align-content: center;
5+
grid-template-columns: auto 80px;
6+
column-gap: 20px;
7+
overflow: hidden;
8+
margin-inline: 20px;
9+
border-bottom: 1px solid #eee;
10+
}
11+
12+
.BiDiCommandInput__input {
13+
border: 0;
14+
font-size: 14px;
15+
margin-left: 2px;
16+
}
17+
18+
.BiDiCommandInput__form {
19+
display: contents;
20+
}
21+
22+
.BiDiCommandInput__button {
23+
border: 0;
24+
text-align: left;
25+
height: 24px;
26+
font-size: 14px;
27+
}

‎src/components/BiDiCommandInput.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
3+
import "./BiDiCommandInput.css";
4+
5+
const BiDiCommandInput = ({ onInputChange, onSubmit, value }) => {
6+
return (
7+
<li className="BiDiCommandInput">
8+
<form className="BiDiCommandInput__form" onSubmit={onSubmit}>
9+
<input
10+
className="BiDiCommandInput__input"
11+
id="bidiCommand"
12+
name="bidiCommand"
13+
onChange={onInputChange}
14+
placeholder="Write a BiDi command here to send it to the browser"
15+
value={value}
16+
/>
17+
<button className="entry__type BiDiCommandInput__button">Send</button>
18+
</form>
19+
</li>
20+
);
21+
};
22+
23+
export default BiDiCommandInput;

‎src/components/BiDiLog.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import React from "react";
22
import BiDiLogEntry from "./BiDiLogEntry";
3+
import BiDiCommandInput from "./BiDiCommandInput";
34

45
import "./BiDiLog.css";
56

6-
const BiDiLog = ({ log }) => {
7+
const BiDiLog = ({ bidiCommand, log, onBidiCommandChange, sendCommand }) => {
78
return (
89
<div className="bidi-log">
910
<ul className="bidi-log__list">
10-
{log.map((entry) => (
11-
<BiDiLogEntry entry={entry} key={entry.message}/>
11+
<BiDiCommandInput
12+
onInputChange={onBidiCommandChange}
13+
onSubmit={sendCommand}
14+
value={bidiCommand}
15+
/>
16+
{log.toReversed().map((entry, index) => (
17+
<BiDiLogEntry entry={entry} key={entry.message + index} />
1218
))}
1319
</ul>
1420
</div>

‎src/components/Network.js

+35-32
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,25 @@ const Network = ({
1111
networkEntries,
1212
pageTimings,
1313
}) => {
14-
1514
if (!isClientReady) {
1615
return null;
1716
}
1817

19-
const entries = networkEntries.filter(({ contextId }) =>
20-
!filteringBrowsingContextId || (filteringBrowsingContextId === contextId));
18+
const entries = networkEntries.filter(
19+
({ contextId }) =>
20+
!filteringBrowsingContextId || filteringBrowsingContextId === contextId
21+
);
2122

22-
const timings = pageTimings.filter(({ contextId }) =>
23-
!filteringBrowsingContextId || (filteringBrowsingContextId === contextId));
23+
const timings = pageTimings.filter(
24+
({ contextId }) =>
25+
!filteringBrowsingContextId || filteringBrowsingContextId === contextId
26+
);
2427

25-
const events = harEvents.filter((event) =>
26-
!filteringBrowsingContextId || (filteringBrowsingContextId === event.params.context));
28+
const events = harEvents.filter(
29+
(event) =>
30+
!filteringBrowsingContextId ||
31+
filteringBrowsingContextId === event.params.context
32+
);
2733

2834
return (
2935
<div className="network-app">
@@ -38,34 +44,31 @@ const Network = ({
3844
<span className="network-column network-column-protocol ellipsis-text">
3945
Protocol
4046
</span>
41-
<span className="network-column network-column-url">
42-
URL
43-
</span>
47+
<span className="network-column network-column-url">URL</span>
4448
</div>
4549
</div>
4650
<div className="network-entries">
47-
{entries.map(
48-
({
49-
isFirstRequest,
50-
request,
51-
response,
52-
url,
53-
}) =>
54-
<div className={`network-row ${isFirstRequest ? 'network-first-request' : ''}`}>
55-
<span className="network-column network-column-status">
56-
{response?.status}
57-
</span>
58-
<span className="network-column network-column-status">
59-
{request.method}
60-
</span>
61-
<span className="network-column network-column-status">
62-
{response?.protocol}
63-
</span>
64-
<span className="network-column network-column-status ellipsis-text">
65-
{request.url}
66-
</span>
67-
</div>
68-
)}
51+
{entries.map(({ isFirstRequest, request, response, redirectCount }) => (
52+
<div
53+
className={`network-row ${
54+
isFirstRequest ? "network-first-request" : ""
55+
}`}
56+
key={request.request + redirectCount}
57+
>
58+
<span className="network-column network-column-status">
59+
{response?.status}
60+
</span>
61+
<span className="network-column network-column-status">
62+
{request.method}
63+
</span>
64+
<span className="network-column network-column-status">
65+
{response?.protocol}
66+
</span>
67+
<span className="network-column network-column-status ellipsis-text">
68+
{request.url}
69+
</span>
70+
</div>
71+
))}
6972
</div>
7073
<NetworkFooter
7174
browserName={browserName}

0 commit comments

Comments
 (0)